vcomply-workflow-engine 3.0.17 → 3.0.19

package/fesm2015/vcomply-workflow-engine.js

@@ -3187,7 +3187,19 @@ class WorkflowComplianceComponent {
         this.disableRadioAssignee = [];
         this.isResponsibilitySimplified = false;
         this.queryParam = '';
-        this.recentResponsibilityUrl = { "byResponsibilities": { "type": ["recent_responsibilities"], "subType": ["CC"] }, "byStatus": { "type": [], "subType": [] }, "filterObject": { "responsibilityCenter": [], "entrustedBy": [], "entrustedTo": [], "riskIds": [], "responsibilityCategory": [] }, "timePeriodDetails": { "type": "", "selectedPeriod": "", "selectedYear": "" }, "status": "" };
+        this.recentResponsibilityUrl = {
+            byResponsibilities: { type: ['recent_responsibilities'], subType: ['CC'] },
+            byStatus: { type: [], subType: [] },
+            filterObject: {
+                responsibilityCenter: [],
+                entrustedBy: [],
+                entrustedTo: [],
+                riskIds: [],
+                responsibilityCategory: [],
+            },
+            timePeriodDetails: { type: '', selectedPeriod: '', selectedYear: '' },
+            status: '',
+        };
         this.isResponsibilityRcLinkEnabled = false;
         this.url = 'q={"byResponsibilities":{"type":["responsibilities_in_queue"],"subType":["CC"]},"byStatus":{"type":["responsibilities_in_queue"],"subType":[]},"filterObject":{"responsibilityCenter":[],"entrustedBy":[],"entrustedTo":[],"riskIds":[],"responsibilityCategory":[]},"timePeriodDetails":{"type":"","selectedPeriod":"","selectedYear":""},"status":""}';
         this.pickerChanged = new EventEmitter();
@@ -3224,7 +3236,11 @@ class WorkflowComplianceComponent {
         this.submitted = false;
         this.smileyMessage = `Done!`;
         this.actionButtons = [
-            { buttonText: 'Entrust More Responsibilities', class: 'white-btn', id: 'addMore' },
+            {
+                buttonText: 'Entrust More Responsibilities',
+                class: 'white-btn',
+                id: 'addMore',
+            },
             { buttonText: 'View Responsibilities', class: 'blue-btn', id: 'view' },
         ];
         this.showSmiley = false;
@@ -3268,7 +3284,7 @@ class WorkflowComplianceComponent {
         this.responsibilityForm = {
             assignors: {
                 enable: false,
-                list: []
+                list: [],
             },
             responsibility: {
                 name: '',
@@ -3276,11 +3292,11 @@ class WorkflowComplianceComponent {
             },
             assigneeGroups: {
                 whoCanComplete: 'ANYONE',
-                list: []
+                list: [],
             },
             assignees: {
                 whoCanComplete: 'ALL',
-                list: []
+                list: [],
             },
             frequency: '',
             description: '',
@@ -3297,25 +3313,25 @@ class WorkflowComplianceComponent {
                 sequentialWorkflow: true,
                 reviewFrequency: {
                     reviewCompleteDays: 2,
-                    reviewNOtCompletedDays: 2
+                    reviewNOtCompletedDays: 2,
                 },
-                list: []
+                list: [],
             },
             groupReviewers: {
                 sequentialWorkflow: true,
                 reviewFrequency: {
                     reviewCompleteDays: 2,
-                    reviewNOtCompletedDays: 2
+                    reviewNOtCompletedDays: 2,
                 },
-                list: []
+                list: [],
             },
             overseers: {
                 notifyList: [],
-                list: []
+                list: [],
             },
             overseersGroups: {
                 notifyList: [],
-                list: []
+                list: [],
             },
             formatAndEvidence: {
                 formatRequired: false,
@@ -3332,10 +3348,11 @@ class WorkflowComplianceComponent {
                 sample: 5,
                 percentage: 30,
                 frequency_pattern: '1~0~3~1',
-                frequency_time: '23:59:00'
+                frequency_time: '23:59:00',
             },
             assessment: {
-                category_id: '', assessment_id: ''
+                category_id: '',
+                assessment_id: '',
             },
             new_checkpoints: {},
             linkedProgram: [],
@@ -3354,10 +3371,28 @@ class WorkflowComplianceComponent {
             ASSURANCE: false,
             APPS: false,
             REQUIRES_AUDIT: false,
-            CHECKPOINTS_NEW: false
+            CHECKPOINTS_NEW: false,
         };
         this.activeSelector = '';
-        this.sideSelectorElements = ['assurance', 'framework', 'assignors', 'assignees', 'category', 'program', 'rc', 'checkpoints', 'frequency', 'reviewer', 'reviewerFrequency', 'overseer', 'overseerNotify', 'riskCalculator', 'isAssessment', 'requires_audit', 'checkpoints-new'];
+        this.sideSelectorElements = [
+            'assurance',
+            'framework',
+            'assignors',
+            'assignees',
+            'category',
+            'program',
+            'rc',
+            'checkpoints',
+            'frequency',
+            'reviewer',
+            'reviewerFrequency',
+            'overseer',
+            'overseerNotify',
+            'riskCalculator',
+            'isAssessment',
+            'requires_audit',
+            'checkpoints-new',
+        ];
         this.focus = {
             responsibilityName: false,
             description: false,
@@ -3366,27 +3401,27 @@ class WorkflowComplianceComponent {
         this.categories = {
             regulations: {
                 list: [],
-                selectedList: []
+                selectedList: [],
             },
             standards: {
                 list: [],
-                selectedList: []
+                selectedList: [],
             },
             internalControls: {
                 list: [],
-                selectedList: []
+                selectedList: [],
             },
             others: {
                 list: [],
-                selectedList: []
-            }
+                selectedList: [],
+            },
         };
         this.allPrograms = [];
         this.riskClassification = [
             { name: 'Low', value: 1, class: 'low' },
             { name: 'Low-Medium', value: 2, class: 'low-med' },
             { name: 'Medium-High', value: 3, class: 'med-high' },
-            { name: 'High', value: 4, class: 'high' }
+            { name: 'High', value: 4, class: 'high' },
         ];
         this.assignorMode = 'checkbox';
         this.rcMode = 'checkbox';
@@ -3408,7 +3443,7 @@ class WorkflowComplianceComponent {
             time: '11:59 pm',
             failedTime: '',
             continuous_failed_days: 0,
-            onCompletionReportDetails: {}
+            onCompletionReportDetails: {},
         };
         this.frequencyPlaceholder = 'How often does the responsibility occur?';
         this.shortMonth = [];
@@ -3432,7 +3467,9 @@ class WorkflowComplianceComponent {
         this.authService.getUserInfo().subscribe((res) => {
             const complianceSubmodule = res.roleActions[res.roleActions.findIndex((ele) => ele.moduleName == 'compliance')].subModule;
             const permissions = complianceSubmodule[complianceSubmodule.findIndex((ele) => ele.subModuleName == 'Programs')].permissions;
-            this.managePermission = (permissions[permissions.findIndex((ele) => ele.name == 'manage programs')].enable) ? true : false;
+            this.managePermission = permissions[permissions.findIndex((ele) => ele.name == 'manage programs')].enable
+                ? true
+                : false;
             if (this.managePermission) {
                 this.hiddenList.push('CATEGORY');
                 this.categoriesListLoaded = true;
@@ -3477,7 +3514,7 @@ class WorkflowComplianceComponent {
         this.checkWhetherAllListsLoaded();
         this.getOrganizationDetails();
         this.getUserDetails();
-        this.shortMonth = this.frequencyService.monthArray.map(month => month.substring(0, 3));
+        this.shortMonth = this.frequencyService.monthArray.map((month) => month.substring(0, 3));
         if (this.mode === 'CREATE') {
             this.organizationId = this.authService.getOrganizationId();
             this.memberId = this.authService.getMemberId();
@@ -3493,7 +3530,7 @@ class WorkflowComplianceComponent {
         this.authService.getSubscriptionDetails().subscribe((res) => {
             this.subscriptionDetails = res;
             if (this.subscriptionDetails[0].assessment_flag) {
-                this.hiddenList = this.hiddenList.filter(ele => ele !== 'ASSESSMENT');
+                this.hiddenList = this.hiddenList.filter((ele) => ele !== 'ASSESSMENT');
                 this.hideElementsFromMoreOptions.emit(this.hiddenList);
             }
         });
@@ -3527,7 +3564,9 @@ class WorkflowComplianceComponent {
     }
     addMoreInfo(event) {
         this.scrollToBottom = true;
-        if (event.code === 'CHECKPOINTS_NEW' && event.checkpoint_new && this.checkpointCount) {
+        if (event.code === 'CHECKPOINTS_NEW' &&
+            event.checkpoint_new &&
+            this.checkpointCount) {
         }
         else {
             this.moreOptions[event.code] = event.checked;
@@ -3542,7 +3581,7 @@ class WorkflowComplianceComponent {
         if (program_id) {
             params = params.append('program_ids', program_id);
         }
-        (_a = this.responsibilityService) === null || _a === void 0 ? void 0 : _a.getResponsibilityCenterList(params).subscribe(res => {
+        (_a = this.responsibilityService) === null || _a === void 0 ? void 0 : _a.getResponsibilityCenterList(params).subscribe((res) => {
             this.responsibilityCentersList = res;
             this.rcListLoaded = true;
             const ids = this.returnIds(this.responsibilityForm.rc, 'item_id');
@@ -3557,7 +3596,11 @@ class WorkflowComplianceComponent {
                 this.responsibilityForm.rc = this.setList(this.responsibilityCentersList, [this.selectedRC], 'item_id');
                 this.moreOptions.RC = true;
                 this.actionButtons = [
-                    { buttonText: 'Go to risk treatment', class: 'blue-btn', id: 'view' },
+                    {
+                        buttonText: 'Go to risk treatment',
+                        class: 'blue-btn',
+                        id: 'view',
+                    },
                 ];
                 // Previously there was only RC was emitting which made the checked options to de check now checking the condition and sending all the selected options
                 let checkedMoreOptions = [];
@@ -3568,7 +3611,7 @@ class WorkflowComplianceComponent {
                 }
                 this.populateOption.emit(checkedMoreOptions);
             }
-        }, err => {
+        }, (err) => {
             console.error(err);
             this.rcListLoaded = true;
         });
@@ -3576,7 +3619,9 @@ class WorkflowComplianceComponent {
     getUserDetails() {
         this.authService.getUserInfo().subscribe((res) => {
             this.isNotificationPending = res.notification_pending_flag;
-            this.actionButtons[1].buttonText = this.isNotificationPending ? 'View Responsibilities in Queue' : 'View Responsibilities';
+            this.actionButtons[1].buttonText = this.isNotificationPending
+                ? 'View Responsibilities in Queue'
+                : 'View Responsibilities';
         });
     }
     getAssurance() {
@@ -3584,12 +3629,14 @@ class WorkflowComplianceComponent {
         this.responsibilityService.getAssurance().subscribe((res) => {
             var _a;
             this.assuranceCategoriesList = res;
-            if ((this.subscriptionDetails && !this.subscriptionDetails[0].assurance_flag) || ((_a = this.assuranceCategoriesList) === null || _a === void 0 ? void 0 : _a.length) == 0) {
+            if ((this.subscriptionDetails &&
+                !this.subscriptionDetails[0].assurance_flag) ||
+                ((_a = this.assuranceCategoriesList) === null || _a === void 0 ? void 0 : _a.length) == 0) {
                 this.hiddenList.push('ASSURANCE');
             }
             this.hideElementsFromMoreOptions.emit(this.hiddenList);
             this.assuranceCategoryListLoaded = true;
-        }, err => {
+        }, (err) => {
             console.error(err);
             this.assuranceCategoryListLoaded = true;
         });
@@ -3599,12 +3646,14 @@ class WorkflowComplianceComponent {
         this.responsibilityService.getAssuranceForRequiresAudit().subscribe((res) => {
             var _a;
             this.assuranceRequiresAuditList = res;
-            if ((this.subscriptionDetails && !this.subscriptionDetails[0].audit_flag) || ((_a = this.assuranceRequiresAuditList) === null || _a === void 0 ? void 0 : _a.length) == 0) {
+            if ((this.subscriptionDetails &&
+                !this.subscriptionDetails[0].audit_flag) ||
+                ((_a = this.assuranceRequiresAuditList) === null || _a === void 0 ? void 0 : _a.length) == 0) {
                 this.hiddenList.push('REQUIRES_AUDIT');
             }
             this.hideElementsFromMoreOptions.emit(this.hiddenList);
             // this.assuranceCategoryListLoaded = true;
-        }, err => {
+        }, (err) => {
             console.error(err);
             // this.assuranceCategoryListLoaded = true;
         });
@@ -3617,7 +3666,7 @@ class WorkflowComplianceComponent {
     getCategoryList() {
         this.loader = true;
         this.uiKitService.isLoader = true;
-        this.responsibilityService.getCategoriesList().subscribe(res => {
+        this.responsibilityService.getCategoriesList().subscribe((res) => {
             const data = res;
             this.allCategories = cloneDeep(res);
             data.forEach((element) => {
@@ -3635,7 +3684,7 @@ class WorkflowComplianceComponent {
                 }
             });
             this.categoriesListLoaded = true;
-        }, err => {
+        }, (err) => {
             console.error(err);
             this.categoriesListLoaded = true;
         });
@@ -3661,16 +3710,29 @@ class WorkflowComplianceComponent {
         this.loader = true;
         this.programService.getProgram(programId).subscribe((res) => {
             var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-            if ((res === null || res === void 0 ? void 0 : res.assessment) && ((_a = res === null || res === void 0 ? void 0 : res.assessment) === null || _a === void 0 ? void 0 : _a.length) && ((_c = Object.keys((_b = this.responsibilityForm) === null || _b === void 0 ? void 0 : _b.assessment)) === null || _c === void 0 ? void 0 : _c.length)) {
-                const categoryAssessment = res === null || res === void 0 ? void 0 : res.assessment.filter((assessment) => { var _a, _b; return ((_b = (_a = this.responsibilityForm) === null || _a === void 0 ? void 0 : _a.assessment) === null || _b === void 0 ? void 0 : _b.category_id) === (assessment === null || assessment === void 0 ? void 0 : assessment.category_id); });
-                if ((categoryAssessment === null || categoryAssessment === void 0 ? void 0 : categoryAssessment.length) && ((_e = (_d = categoryAssessment[0]) === null || _d === void 0 ? void 0 : _d.assessmentIds) === null || _e === void 0 ? void 0 : _e.length)) {
+            if ((res === null || res === void 0 ? void 0 : res.assessment) &&
+                ((_a = res === null || res === void 0 ? void 0 : res.assessment) === null || _a === void 0 ? void 0 : _a.length) &&
+                ((_c = Object.keys((_b = this.responsibilityForm) === null || _b === void 0 ? void 0 : _b.assessment)) === null || _c === void 0 ? void 0 : _c.length)) {
+                const categoryAssessment = res === null || res === void 0 ? void 0 : res.assessment.filter((assessment) => {
+                    var _a, _b;
+                    return ((_b = (_a = this.responsibilityForm) === null || _a === void 0 ? void 0 : _a.assessment) === null || _b === void 0 ? void 0 : _b.category_id) ===
+                        (assessment === null || assessment === void 0 ? void 0 : assessment.category_id);
+                });
+                if ((categoryAssessment === null || categoryAssessment === void 0 ? void 0 : categoryAssessment.length) &&
+                    ((_e = (_d = categoryAssessment[0]) === null || _d === void 0 ? void 0 : _d.assessmentIds) === null || _e === void 0 ? void 0 : _e.length)) {
                     const isExist = (_g = (_f = categoryAssessment[0]) === null || _f === void 0 ? void 0 : _f.assessmentIds) === null || _g === void 0 ? void 0 : _g.includes((_j = (_h = this.responsibilityForm) === null || _h === void 0 ? void 0 : _h.assessment) === null || _j === void 0 ? void 0 : _j.assessment_id);
                     if (!isExist) {
-                        this.responsibilityForm.assessment = { assessment_id: "", category_id: "" };
+                        this.responsibilityForm.assessment = {
+                            assessment_id: '',
+                            category_id: '',
+                        };
                     }
                 }
                 else {
-                    this.responsibilityForm.assessment = { assessment_id: "", category_id: "" };
+                    this.responsibilityForm.assessment = {
+                        assessment_id: '',
+                        category_id: '',
+                    };
                 }
             }
             this.loader = false;
@@ -3697,7 +3759,7 @@ class WorkflowComplianceComponent {
                 this.refreshAllLists();
             }
             this.assignorsListLoaded = true;
-        }, err => {
+        }, (err) => {
             console.error(err);
             this.assignorsListLoaded = true;
             this.assignorsListLoader = false;
@@ -3729,7 +3791,7 @@ class WorkflowComplianceComponent {
                 this.refreshAllLists();
             }
             this.assigneesListLoaded = true;
-        }, err => {
+        }, (err) => {
             console.error(err);
             this.assigneesListLoaded = true;
             this.userListLoader = false;
@@ -3768,10 +3830,14 @@ class WorkflowComplianceComponent {
                 reviewersList: [...new Set(this.reviewersList)],
                 overseersList: [...new Set(this.overseersList)],
             };
-            if (((_b = (_a = this.responsibilityForm) === null || _a === void 0 ? void 0 : _a.program[0]) === null || _b === void 0 ? void 0 : _b.default_assignee_ids) || ((_c = this.responsibilityForm.assignees.list) === null || _c === void 0 ? void 0 : _c.length)) {
+            if (((_b = (_a = this.responsibilityForm) === null || _a === void 0 ? void 0 : _a.program[0]) === null || _b === void 0 ? void 0 : _b.default_assignee_ids) ||
+                ((_c = this.responsibilityForm.assignees.list) === null || _c === void 0 ? void 0 : _c.length)) {
                 if ((_d = this.responsibilityForm.assignees.list) === null || _d === void 0 ? void 0 : _d.length) {
                     const ids = this.returnIds(this.responsibilityForm.assignees.list, 'my_member_id');
-                    const allIds = [...new Set(ids), ...new Set((_f = (_e = this.responsibilityForm) === null || _e === void 0 ? void 0 : _e.program[0]) === null || _f === void 0 ? void 0 : _f.default_assignee_ids)];
+                    const allIds = [
+                        ...new Set(ids),
+                        ...new Set((_f = (_e = this.responsibilityForm) === null || _e === void 0 ? void 0 : _e.program[0]) === null || _f === void 0 ? void 0 : _f.default_assignee_ids),
+                    ];
                     const assignors = this.assigneesList.filter((element) => allIds === null || allIds === void 0 ? void 0 : allIds.includes(element === null || element === void 0 ? void 0 : element.my_member_id));
                     if (assignors === null || assignors === void 0 ? void 0 : assignors.length) {
                         this.responsibilityForm.assignees.list = assignors;
@@ -3781,7 +3847,10 @@ class WorkflowComplianceComponent {
                     }
                 }
                 else {
-                    const assignors = this.assigneesList.filter((element) => { var _a, _b, _c; return (_c = (_b = (_a = this.responsibilityForm) === null || _a === void 0 ? void 0 : _a.program[0]) === null || _b === void 0 ? void 0 : _b.default_assignee_ids) === null || _c === void 0 ? void 0 : _c.includes(element === null || element === void 0 ? void 0 : element.my_member_id); });
+                    const assignors = this.assigneesList.filter((element) => {
+                        var _a, _b, _c;
+                        return (_c = (_b = (_a = this.responsibilityForm) === null || _a === void 0 ? void 0 : _a.program[0]) === null || _b === void 0 ? void 0 : _b.default_assignee_ids) === null || _c === void 0 ? void 0 : _c.includes(element === null || element === void 0 ? void 0 : element.my_member_id);
+                    });
                     if (assignors === null || assignors === void 0 ? void 0 : assignors.length) {
                         this.responsibilityForm.assignees.list = assignors;
                     }
@@ -3794,12 +3863,19 @@ class WorkflowComplianceComponent {
                 this.populateProgramAssigneeGroup();
             }
             const checkedMoreOptions = [];
-            if (((_h = (_g = this.responsibilityForm) === null || _g === void 0 ? void 0 : _g.program[0]) === null || _h === void 0 ? void 0 : _h.default_reviewers) || ((_l = (_k = (_j = this.responsibilityForm) === null || _j === void 0 ? void 0 : _j.reviewers) === null || _k === void 0 ? void 0 : _k.list) === null || _l === void 0 ? void 0 : _l.length) || ((_p = (_o = (_m = this.responsibilityForm) === null || _m === void 0 ? void 0 : _m.groupReviewers) === null || _o === void 0 ? void 0 : _o.list) === null || _p === void 0 ? void 0 : _p.length)) {
+            if (((_h = (_g = this.responsibilityForm) === null || _g === void 0 ? void 0 : _g.program[0]) === null || _h === void 0 ? void 0 : _h.default_reviewers) ||
+                ((_l = (_k = (_j = this.responsibilityForm) === null || _j === void 0 ? void 0 : _j.reviewers) === null || _k === void 0 ? void 0 : _k.list) === null || _l === void 0 ? void 0 : _l.length) ||
+                ((_p = (_o = (_m = this.responsibilityForm) === null || _m === void 0 ? void 0 : _m.groupReviewers) === null || _o === void 0 ? void 0 : _o.list) === null || _p === void 0 ? void 0 : _p.length)) {
                 const ids = this.returnIds(this.responsibilityForm.reviewers.list, 'my_member_id');
-                const allIds = [...new Set(ids), ...new Set(this.responsibilityForm.program[0].default_reviewers)];
+                const allIds = [
+                    ...new Set(ids),
+                    ...new Set(this.responsibilityForm.program[0].default_reviewers),
+                ];
                 const reviewers = this.reviewersList.filter((element) => allIds === null || allIds === void 0 ? void 0 : allIds.includes(element === null || element === void 0 ? void 0 : element.my_member_id));
                 // const reviewers = this.reviewersList.filter((element: any) => this.responsibilityForm.program[0].default_reviewers?.includes(element?.my_member_id));
-                if (((reviewers === null || reviewers === void 0 ? void 0 : reviewers.length) || (this.featureFlag_groups && ((_s = (_r = (_q = this.responsibilityForm) === null || _q === void 0 ? void 0 : _q.groupReviewers) === null || _r === void 0 ? void 0 : _r.list) === null || _s === void 0 ? void 0 : _s.length) > 0))) {
+                if ((reviewers === null || reviewers === void 0 ? void 0 : reviewers.length) ||
+                    (this.featureFlag_groups &&
+                        ((_s = (_r = (_q = this.responsibilityForm) === null || _q === void 0 ? void 0 : _q.groupReviewers) === null || _r === void 0 ? void 0 : _r.list) === null || _s === void 0 ? void 0 : _s.length) > 0)) {
                     this.responsibilityForm.reviewers.list = reviewers;
                     this.responsibilityForm.reviewers.list = reviewers;
                     if (this.featureFlag_groups) {
@@ -3817,13 +3893,21 @@ class WorkflowComplianceComponent {
             if (this.featureFlag_groups) {
                 this.populateProgramReviewerGroup();
             }
-            if (this.responsibilityForm.program[0].default_overseers || ((_v = (_u = (_t = this.responsibilityForm) === null || _t === void 0 ? void 0 : _t.overseers) === null || _u === void 0 ? void 0 : _u.list) === null || _v === void 0 ? void 0 : _v.length) || ((_y = (_x = (_w = this.responsibilityForm) === null || _w === void 0 ? void 0 : _w.overseers) === null || _x === void 0 ? void 0 : _x.notifyList) === null || _y === void 0 ? void 0 : _y.length)) {
+            if (this.responsibilityForm.program[0].default_overseers ||
+                ((_v = (_u = (_t = this.responsibilityForm) === null || _t === void 0 ? void 0 : _t.overseers) === null || _u === void 0 ? void 0 : _u.list) === null || _v === void 0 ? void 0 : _v.length) ||
+                ((_y = (_x = (_w = this.responsibilityForm) === null || _w === void 0 ? void 0 : _w.overseers) === null || _x === void 0 ? void 0 : _x.notifyList) === null || _y === void 0 ? void 0 : _y.length)) {
                 const ids = this.returnIds((_0 = (_z = this.responsibilityForm) === null || _z === void 0 ? void 0 : _z.overseers) === null || _0 === void 0 ? void 0 : _0.list, 'my_member_id');
-                const allDefaultCCIds = [...new Set(ids), ...new Set((_3 = (_2 = (_1 = this.responsibilityForm) === null || _1 === void 0 ? void 0 : _1.program[0]) === null || _2 === void 0 ? void 0 : _2.default_overseers) === null || _3 === void 0 ? void 0 : _3.cc_email)];
+                const allDefaultCCIds = [
+                    ...new Set(ids),
+                    ...new Set((_3 = (_2 = (_1 = this.responsibilityForm) === null || _1 === void 0 ? void 0 : _1.program[0]) === null || _2 === void 0 ? void 0 : _2.default_overseers) === null || _3 === void 0 ? void 0 : _3.cc_email),
+                ];
                 const overseersCC = (_4 = this.overseersList) === null || _4 === void 0 ? void 0 : _4.filter((element) => allDefaultCCIds === null || allDefaultCCIds === void 0 ? void 0 : allDefaultCCIds.includes(element === null || element === void 0 ? void 0 : element.my_member_id));
                 // const overseers = this.overseersList.filter((element: any) => this.responsibilityForm.program[0].default_overseers.cc_email.includes(element.my_member_id));
                 const notifyListIds = this.returnIds(this.responsibilityForm.overseers.notifyList, 'my_member_id');
-                const allDefaultCCFailureIds = [...new Set(notifyListIds), ...new Set((_7 = (_6 = (_5 = this.responsibilityForm) === null || _5 === void 0 ? void 0 : _5.program[0]) === null || _6 === void 0 ? void 0 : _6.default_overseers) === null || _7 === void 0 ? void 0 : _7.failure_cc_email)];
+                const allDefaultCCFailureIds = [
+                    ...new Set(notifyListIds),
+                    ...new Set((_7 = (_6 = (_5 = this.responsibilityForm) === null || _5 === void 0 ? void 0 : _5.program[0]) === null || _6 === void 0 ? void 0 : _6.default_overseers) === null || _7 === void 0 ? void 0 : _7.failure_cc_email),
+                ];
                 const overseersCCFailure = (_8 = this.overseersList) === null || _8 === void 0 ? void 0 : _8.filter((element) => allDefaultCCFailureIds === null || allDefaultCCFailureIds === void 0 ? void 0 : allDefaultCCFailureIds.includes(element === null || element === void 0 ? void 0 : element.my_member_id));
                 // const notifyOverseers = this.overseersList.filter((element: any) => this.responsibilityForm.program[0].default_overseers.failure_cc_email.includes(element.my_member_id));
                 // if (overseers?.length) {
@@ -3847,7 +3931,8 @@ class WorkflowComplianceComponent {
                 if (overseersCCFailure === null || overseersCCFailure === void 0 ? void 0 : overseersCCFailure.length) {
                     this.responsibilityForm.overseers.notifyList = overseersCCFailure;
                     if (this.featureFlag_groups) {
-                        this.responsibilityForm.overseers.notifyList = this.assignUserMemberId(this.responsibilityForm.overseers.notifyList);
+                        this.responsibilityForm.overseers.notifyList =
+                            this.assignUserMemberId(this.responsibilityForm.overseers.notifyList);
                     }
                     this.moreOptions.OVERSEER = true;
                 }
@@ -3868,7 +3953,7 @@ class WorkflowComplianceComponent {
                 }
             }
             this.populateOption.emit(checkedMoreOptions);
-        }, err => {
+        }, (err) => {
             this.userListLoader = false;
             console.error(err);
         }, () => {
@@ -3881,7 +3966,10 @@ class WorkflowComplianceComponent {
         if (program_id) {
             params = params.append('program_ids', program_id);
         }
-        this.responsibilityService.getOrganizationGroups(params).pipe(takeUntil(this.unSubscribeProgram)).subscribe((res) => {
+        this.responsibilityService
+            .getOrganizationGroups(params)
+            .pipe(takeUntil(this.unSubscribeProgram))
+            .subscribe((res) => {
             var _a, _b, _c, _d, _e;
             const data = res !== null && res !== void 0 ? res : [];
             if (!program_id) {
@@ -3899,20 +3987,29 @@ class WorkflowComplianceComponent {
             }
             this.groupsList = groups;
             this.groupsListLoaded = true;
-            if (this.featureFlag_groups && ((_a = this.OrgGroup) === null || _a === void 0 ? void 0 : _a.length) && ((_b = this.responsibilityForm.program) === null || _b === void 0 ? void 0 : _b.length) && program_id) {
+            if (this.featureFlag_groups &&
+                ((_a = this.OrgGroup) === null || _a === void 0 ? void 0 : _a.length) &&
+                ((_b = this.responsibilityForm.program) === null || _b === void 0 ? void 0 : _b.length) &&
+                program_id) {
                 this.refreshListsWhileProgramSelected();
             }
             else {
                 this.refreshAllLists();
             }
-            if (((_d = (_c = this.responsibilityForm) === null || _c === void 0 ? void 0 : _c.program[0]) === null || _d === void 0 ? void 0 : _d.default_assignee_group_ids) && program_id) {
-                const selectedGroups = data.filter((element) => { var _a; return (_a = this.responsibilityForm.program[0].default_assignee_group_ids) === null || _a === void 0 ? void 0 : _a.includes(element.group_id); });
+            if (((_d = (_c = this.responsibilityForm) === null || _c === void 0 ? void 0 : _c.program[0]) === null || _d === void 0 ? void 0 : _d.default_assignee_group_ids) &&
+                program_id) {
+                const selectedGroups = data.filter((element) => {
+                    var _a;
+                    return (_a = this.responsibilityForm.program[0].default_assignee_group_ids) === null || _a === void 0 ? void 0 : _a.includes(element.group_id);
+                });
                 if (groups === null || groups === void 0 ? void 0 : groups.length) {
                     let memberIds = [];
                     selectedGroups.forEach((eachGroup) => {
                         var _a;
                         if ((_a = eachGroup === null || eachGroup === void 0 ? void 0 : eachGroup.member_ids) === null || _a === void 0 ? void 0 : _a.length) {
-                            memberIds = [...new Set(memberIds.concat(eachGroup === null || eachGroup === void 0 ? void 0 : eachGroup.member_ids))];
+                            memberIds = [
+                                ...new Set(memberIds.concat(eachGroup === null || eachGroup === void 0 ? void 0 : eachGroup.member_ids)),
+                            ];
                         }
                     });
                     if ((_e = this.responsibilityForm.assignees.list) === null || _e === void 0 ? void 0 : _e.length) {
@@ -3931,7 +4028,7 @@ class WorkflowComplianceComponent {
                     }
                 }
             }
-        }, err => {
+        }, (err) => {
             console.error(err);
             this.groupsListLoaded = true;
         });
@@ -3950,58 +4047,85 @@ class WorkflowComplianceComponent {
                     member_id: currentUser.id,
                     member_name: currentUser.name,
                     organisation_id: currentUser.organisation_id,
-                    _id: this.authService.getUserDetails()._id
+                    _id: this.authService.getUserDetails()._id,
                 };
-                const testPlanCategory = typeof (res === null || res === void 0 ? void 0 : res.testplan_category_id) === 'string' ? [] : res === null || res === void 0 ? void 0 : res.testplan_category_id;
-                const requiredAuditCategoryId = ((_b = res === null || res === void 0 ? void 0 : res.audit_category_details) === null || _b === void 0 ? void 0 : _b.category_id) ? [(_c = res === null || res === void 0 ? void 0 : res.audit_category_details) === null || _c === void 0 ? void 0 : _c.category_id] : [];
+                const testPlanCategory = typeof (res === null || res === void 0 ? void 0 : res.testplan_category_id) === 'string'
+                    ? []
+                    : res === null || res === void 0 ? void 0 : res.testplan_category_id;
+                const requiredAuditCategoryId = ((_b = res === null || res === void 0 ? void 0 : res.audit_category_details) === null || _b === void 0 ? void 0 : _b.category_id)
+                    ? [(_c = res === null || res === void 0 ? void 0 : res.audit_category_details) === null || _c === void 0 ? void 0 : _c.category_id]
+                    : [];
                 const reviewerDetails = Object.keys(res === null || res === void 0 ? void 0 : res.reviewer_arr);
                 this.hasReviewer = (reviewerDetails === null || reviewerDetails === void 0 ? void 0 : reviewerDetails.length) > 0;
-                this.assigneeRadioSelect = (((_d = res === null || res === void 0 ? void 0 : res.assigned_to_member_id) === null || _d === void 0 ? void 0 : _d.length) == 0) ? true : false;
+                this.assigneeRadioSelect =
+                    ((_d = res === null || res === void 0 ? void 0 : res.assigned_to_member_id) === null || _d === void 0 ? void 0 : _d.length) == 0 ? true : false;
                 this.isEntrust = res.isGroupAssignTo ? true : false;
                 let linkage = res === null || res === void 0 ? void 0 : res.linkedProgramDetails;
                 linkage.push(res === null || res === void 0 ? void 0 : res.programDetails);
                 this.responsibilityForm = {
                     assignors: {
                         enable: false,
-                        list: ((_e = this.setList(this.assignorsList, [res.member_id], 'member_id')) === null || _e === void 0 ? void 0 : _e.length) > 0 ? this.setList(this.assignorsList, [res.member_id], 'member_id') : [currentsUerInfo],
+                        list: ((_e = this.setList(this.assignorsList, [res.member_id], 'member_id')) === null || _e === void 0 ? void 0 : _e.length) > 0
+                            ? this.setList(this.assignorsList, [res.member_id], 'member_id')
+                            : [currentsUerInfo],
                     },
                     responsibility: {
                         name: res === null || res === void 0 ? void 0 : res.report_name,
                         keyResponsibility: res === null || res === void 0 ? void 0 : res.key_compliance,
                     },
                     assignees: {
-                        whoCanComplete: (res.isGroupAssignTo) ? 'ANY_ONE' : 'ALL',
-                        list: (((_f = res.assigned_to_member_id) === null || _f === void 0 ? void 0 : _f.length) == 0) ? this.setList(this.assigneesList, [Number(res.assigned_to)], 'employee_id') :
-                            this.setList(this.assigneesList, res.assigned_to_member_id, 'my_member_id'),
+                        whoCanComplete: res.isGroupAssignTo ? 'ANY_ONE' : 'ALL',
+                        list: ((_f = res.assigned_to_member_id) === null || _f === void 0 ? void 0 : _f.length) == 0
+                            ? this.setList(this.assigneesList, [Number(res.assigned_to)], 'employee_id')
+                            : this.setList(this.assigneesList, res.assigned_to_member_id, 'my_member_id'),
                     },
                     frequency: res === null || res === void 0 ? void 0 : res.frequency_details,
                     description: res === null || res === void 0 ? void 0 : res.remarks,
                     objective: res === null || res === void 0 ? void 0 : res.objective,
                     rc: this.setList(this.responsibilityCentersList, [Number(res === null || res === void 0 ? void 0 : res.rc_id)], 'rc_id'),
-                    responsibilityCenterType: (this.isResponsibilityRcLinkEnabled && (res === null || res === void 0 ? void 0 : res.responsibilityCenterType)) ? parseInt(res === null || res === void 0 ? void 0 : res.responsibilityCenterType) : 0,
-                    category: ((_g = res === null || res === void 0 ? void 0 : res.program_cat_ids) === null || _g === void 0 ? void 0 : _g.length) ? res === null || res === void 0 ? void 0 : res.category_ids_array.filter((ele) => { var _a; return !((_a = res.program_cat_ids) === null || _a === void 0 ? void 0 : _a.includes(ele)); }) : res === null || res === void 0 ? void 0 : res.category_ids_array,
+                    responsibilityCenterType: this.isResponsibilityRcLinkEnabled && (res === null || res === void 0 ? void 0 : res.responsibilityCenterType)
+                        ? parseInt(res === null || res === void 0 ? void 0 : res.responsibilityCenterType)
+                        : 0,
+                    category: ((_g = res === null || res === void 0 ? void 0 : res.program_cat_ids) === null || _g === void 0 ? void 0 : _g.length)
+                        ? res === null || res === void 0 ? void 0 : res.category_ids_array.filter((ele) => { var _a; return !((_a = res.program_cat_ids) === null || _a === void 0 ? void 0 : _a.includes(ele)); })
+                        : res === null || res === void 0 ? void 0 : res.category_ids_array,
                     program_selected_ids: (_h = res === null || res === void 0 ? void 0 : res.category_id.split(',')) !== null && _h !== void 0 ? _h : [],
                     category_id: (_j = res === null || res === void 0 ? void 0 : res.category_id) !== null && _j !== void 0 ? _j : '',
                     linkedProgram: linkage !== null && linkage !== void 0 ? linkage : res === null || res === void 0 ? void 0 : res.linkedProgramDetails,
-                    program: ((_k = res === null || res === void 0 ? void 0 : res.programDetails) === null || _k === void 0 ? void 0 : _k.category_id) ? [res === null || res === void 0 ? void 0 : res.programDetails] : [],
+                    program: ((_k = res === null || res === void 0 ? void 0 : res.programDetails) === null || _k === void 0 ? void 0 : _k.category_id)
+                        ? [res === null || res === void 0 ? void 0 : res.programDetails]
+                        : [],
                     checkpointInstruction: res === null || res === void 0 ? void 0 : res.checkpoint_description,
                     customTags: (res === null || res === void 0 ? void 0 : res.custom_tags) ? JSON.parse(res === null || res === void 0 ? void 0 : res.custom_tags) : '',
-                    checkpoints: (res === null || res === void 0 ? void 0 : res.checkpoint_details) ? JSON.parse(res === null || res === void 0 ? void 0 : res.checkpoint_details) : '',
+                    checkpoints: (res === null || res === void 0 ? void 0 : res.checkpoint_details)
+                        ? JSON.parse(res === null || res === void 0 ? void 0 : res.checkpoint_details)
+                        : '',
                     reviewers: {
-                        sequentialWorkflow: (((_m = (_l = res === null || res === void 0 ? void 0 : res.reviewer_arr) === null || _l === void 0 ? void 0 : _l.level1) === null || _m === void 0 ? void 0 : _m.type) == 'SEQUENTIAL') ? true : false,
+                        sequentialWorkflow: ((_m = (_l = res === null || res === void 0 ? void 0 : res.reviewer_arr) === null || _l === void 0 ? void 0 : _l.level1) === null || _m === void 0 ? void 0 : _m.type) == 'SEQUENTIAL' ? true : false,
                         reviewFrequency: {
-                            reviewCompleteDays: ((reviewerDetails === null || reviewerDetails === void 0 ? void 0 : reviewerDetails.length) > 0) ? res === null || res === void 0 ? void 0 : res.review_after_days : 2,
-                            reviewNOtCompletedDays: ((reviewerDetails === null || reviewerDetails === void 0 ? void 0 : reviewerDetails.length) > 0) ? res === null || res === void 0 ? void 0 : res.review_failed_after_days : 2
+                            reviewCompleteDays: (reviewerDetails === null || reviewerDetails === void 0 ? void 0 : reviewerDetails.length) > 0 ? res === null || res === void 0 ? void 0 : res.review_after_days : 2,
+                            reviewNOtCompletedDays: (reviewerDetails === null || reviewerDetails === void 0 ? void 0 : reviewerDetails.length) > 0 ? res === null || res === void 0 ? void 0 : res.review_failed_after_days : 2,
                         },
-                        acceptedData: (reviewerDetails === null || reviewerDetails === void 0 ? void 0 : reviewerDetails.length) > 0 ? (_p = (_o = res === null || res === void 0 ? void 0 : res.reviewer_arr) === null || _o === void 0 ? void 0 : _o.level1) === null || _p === void 0 ? void 0 : _p.reviewers : [],
-                        list: (reviewerDetails === null || reviewerDetails === void 0 ? void 0 : reviewerDetails.length) > 0 ? this.setReviewerPayload((_r = (_q = res === null || res === void 0 ? void 0 : res.reviewer_arr) === null || _q === void 0 ? void 0 : _q.level1) === null || _r === void 0 ? void 0 : _r.reviewers, 'object', (_t = (_s = res === null || res === void 0 ? void 0 : res.reviewer_arr) === null || _s === void 0 ? void 0 : _s.level1) === null || _t === void 0 ? void 0 : _t.type) : []
+                        acceptedData: (reviewerDetails === null || reviewerDetails === void 0 ? void 0 : reviewerDetails.length) > 0
+                            ? (_p = (_o = res === null || res === void 0 ? void 0 : res.reviewer_arr) === null || _o === void 0 ? void 0 : _o.level1) === null || _p === void 0 ? void 0 : _p.reviewers
+                            : [],
+                        list: (reviewerDetails === null || reviewerDetails === void 0 ? void 0 : reviewerDetails.length) > 0
+                            ? this.setReviewerPayload((_r = (_q = res === null || res === void 0 ? void 0 : res.reviewer_arr) === null || _q === void 0 ? void 0 : _q.level1) === null || _r === void 0 ? void 0 : _r.reviewers, 'object', (_t = (_s = res === null || res === void 0 ? void 0 : res.reviewer_arr) === null || _s === void 0 ? void 0 : _s.level1) === null || _t === void 0 ? void 0 : _t.type)
+                            : [],
                     },
                     overseers: {
-                        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') : [],
-                        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') : [],
+                        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')
+                            : [],
+                        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')
+                            : [],
                     },
                     formatAndEvidence: {
-                        formatRequired: (((_u = res === null || res === void 0 ? void 0 : res.report_format) === null || _u === void 0 ? void 0 : _u.length) > 0 || ((_v = res === null || res === void 0 ? void 0 : res.link_for_details) === null || _v === void 0 ? void 0 : _v.length) > 0) ? true : false,
+                        formatRequired: ((_u = res === null || res === void 0 ? void 0 : res.report_format) === null || _u === void 0 ? void 0 : _u.length) > 0 ||
+                            ((_v = res === null || res === void 0 ? void 0 : res.link_for_details) === null || _v === void 0 ? void 0 : _v.length) > 0
+                            ? true
+                            : false,
                         formatFiles: res === null || res === void 0 ? void 0 : res.report_format,
                         formatLinks: res === null || res === void 0 ? void 0 : res.link_for_details,
                         evidenceRequired: (res === null || res === void 0 ? void 0 : res.report_upload_flag) ? true : false,
@@ -4009,16 +4133,22 @@ class WorkflowComplianceComponent {
                     assuranceList: this.setList(this.assuranceCategoriesList, testPlanCategory, 'category_id'),
                     requiresAuditList: this.setList(this.assuranceRequiresAuditList, requiredAuditCategoryId, 'category_id'),
                     riskClass: res === null || res === void 0 ? void 0 : res.risk_class,
-                    riskMatrix: res === null || res === void 0 ? void 0 : res.risk_matrix_data
+                    riskMatrix: res === null || res === void 0 ? void 0 : res.risk_matrix_data,
                 };
                 if (this.featureFlag_groups) {
                     this.populateAssigneeData(res);
                     this.populateOverseerData(res);
                     this.populateReviewerData(res);
                 }
-                this.responsibilityCenterType = (this.isResponsibilityRcLinkEnabled && (res === null || res === void 0 ? void 0 : res.responsibilityCenterType)) ? parseInt(res === null || res === void 0 ? void 0 : res.responsibilityCenterType) : 0;
-                this.selectedProgram = ((_w = res === null || res === void 0 ? void 0 : res.programDetails) === null || _w === void 0 ? void 0 : _w.category_id) ? res.programDetails : undefined;
-                if (((_x = this.selectedProgram) === null || _x === void 0 ? void 0 : _x._id) && ((_y = this.orgDetails) === null || _y === void 0 ? void 0 : _y.hasProgramFullPermission)) {
+                this.responsibilityCenterType =
+                    this.isResponsibilityRcLinkEnabled && (res === null || res === void 0 ? void 0 : res.responsibilityCenterType)
+                        ? parseInt(res === null || res === void 0 ? void 0 : res.responsibilityCenterType)
+                        : 0;
+                this.selectedProgram = ((_w = res === null || res === void 0 ? void 0 : res.programDetails) === null || _w === void 0 ? void 0 : _w.category_id)
+                    ? res.programDetails
+                    : undefined;
+                if (((_x = this.selectedProgram) === null || _x === void 0 ? void 0 : _x._id) &&
+                    ((_y = this.orgDetails) === null || _y === void 0 ? void 0 : _y.hasProgramFullPermission)) {
                     this.getListsAccordingToProgram((_z = this.selectedProgram) === null || _z === void 0 ? void 0 : _z._id);
                 }
                 this.isNotificationPending = res.notification_pending;
@@ -4029,7 +4159,8 @@ class WorkflowComplianceComponent {
                     this.actionButtons[1].buttonText = 'View Responsibilities';
                 }
                 // 5~0~0~0 this is for other frequency
-                if (res.frequency_details !== '' && res.frequency_details !== '5~0~0~0') {
+                if (res.frequency_details !== '' &&
+                    res.frequency_details !== '5~0~0~0') {
                     this.frequencyDataPopulation(res);
                     this.getFrequencyPlaceholder(res);
                     res.placeholder = this.frequencyPlaceholder;
@@ -4043,7 +4174,10 @@ class WorkflowComplianceComponent {
                     this.organizationId = this.authService.getOrganizationId();
                     this.memberId = this.authService.getMemberId();
                 }
-                if ((((_0 = this.responsibilityForm.assignees.list) === null || _0 === void 0 ? void 0 : _0.length) === 0 && (!this.featureFlag_groups || (((_2 = (_1 = this.responsibilityForm) === null || _1 === void 0 ? void 0 : _1.assigneeGroups.list) === null || _2 === void 0 ? void 0 : _2.length) === 0 && this.featureFlag_groups)))) {
+                if (((_0 = this.responsibilityForm.assignees.list) === null || _0 === void 0 ? void 0 : _0.length) === 0 &&
+                    (!this.featureFlag_groups ||
+                        (((_2 = (_1 = this.responsibilityForm) === null || _1 === void 0 ? void 0 : _1.assigneeGroups.list) === null || _2 === void 0 ? void 0 : _2.length) === 0 &&
+                            this.featureFlag_groups))) {
                     this.isEntrust = true;
                     this.mode = 'CREATE';
                     this.assigneeRadioSelect = false;
@@ -4060,7 +4194,9 @@ class WorkflowComplianceComponent {
                 if ((res === null || res === void 0 ? void 0 : res.rc_id) > 0) {
                     this.rcSelected.emit(true);
                 }
-                if (this.isResponsibilityRcLinkEnabled && ((_3 = res === null || res === void 0 ? void 0 : res.responsibilityCenterArr) === null || _3 === void 0 ? void 0 : _3.length) && (res === null || res === void 0 ? void 0 : res.responsibilityCenterType) === 1) {
+                if (this.isResponsibilityRcLinkEnabled &&
+                    ((_3 = res === null || res === void 0 ? void 0 : res.responsibilityCenterArr) === null || _3 === void 0 ? void 0 : _3.length) &&
+                    (res === null || res === void 0 ? void 0 : res.responsibilityCenterType) === 1) {
                     this.responsibilityForm.rc = this.setList(this.responsibilityCentersList, res.responsibilityCenterArr, 'rc_id');
                     this.rcSelected.emit(true);
                 }
@@ -4073,7 +4209,7 @@ class WorkflowComplianceComponent {
                         sample: 0,
                         percentage: 0,
                         frequency_pattern: '',
-                        frequency_time: ''
+                        frequency_time: '',
                     };
                 }
                 if ((_4 = res.assessment) === null || _4 === void 0 ? void 0 : _4.assessment_id) {
@@ -4102,16 +4238,22 @@ class WorkflowComplianceComponent {
         return data;
     }
     returnIds(list, key) {
-        return list === null || list === void 0 ? void 0 : list.map(ele => { if (ele[key]) {
-            return ele[key];
-        } }).filter(ele => ele);
+        return list === null || list === void 0 ? void 0 : list.map((ele) => {
+            if (ele[key]) {
+                return ele[key];
+            }
+        }).filter((ele) => ele);
     }
     populateProgramAssigneeGroup() {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
-        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) || ((_e = (_d = (_c = this.responsibilityForm) === null || _c === void 0 ? void 0 : _c.assigneeGroups) === null || _d === void 0 ? void 0 : _d.list) === null || _e === void 0 ? void 0 : _e.length)) {
+        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) ||
+            ((_e = (_d = (_c = this.responsibilityForm) === null || _c === void 0 ? void 0 : _c.assigneeGroups) === null || _d === void 0 ? void 0 : _d.list) === null || _e === void 0 ? void 0 : _e.length)) {
             if ((_h = (_g = (_f = this.responsibilityForm) === null || _f === void 0 ? void 0 : _f.assigneeGroups) === null || _g === void 0 ? void 0 : _g.list) === null || _h === void 0 ? void 0 : _h.length) {
                 const ids = this.returnIds((_k = (_j = this.responsibilityForm) === null || _j === void 0 ? void 0 : _j.assigneeGroups) === null || _k === void 0 ? void 0 : _k.list, 'group_id');
-                const allIds = [...new Set(ids), ...new Set((_m = (_l = this.responsibilityForm) === null || _l === void 0 ? void 0 : _l.program[0]) === null || _m === void 0 ? void 0 : _m.default_assignee_group_ids)];
+                const allIds = [
+                    ...new Set(ids),
+                    ...new Set((_m = (_l = this.responsibilityForm) === null || _l === void 0 ? void 0 : _l.program[0]) === null || _m === void 0 ? void 0 : _m.default_assignee_group_ids),
+                ];
                 const assigneeGroups = (_o = this.groupAssigneeList) === null || _o === void 0 ? void 0 : _o.filter((element) => allIds === null || allIds === void 0 ? void 0 : allIds.includes(element === null || element === void 0 ? void 0 : element.group_id));
                 if (assigneeGroups === null || assigneeGroups === void 0 ? void 0 : assigneeGroups.length) {
                     this.responsibilityForm.assigneeGroups.list = assigneeGroups;
@@ -4121,7 +4263,10 @@ class WorkflowComplianceComponent {
                 }
             }
             else {
-                const assigneeGroups = (_p = this.groupAssigneeList) === null || _p === void 0 ? void 0 : _p.filter((element) => { var _a, _b, _c; return (_c = (_b = (_a = this.responsibilityForm) === null || _a === void 0 ? void 0 : _a.program[0]) === null || _b === void 0 ? void 0 : _b.default_assignee_group_ids) === null || _c === void 0 ? void 0 : _c.includes(element === null || element === void 0 ? void 0 : element.group_id); });
+                const assigneeGroups = (_p = this.groupAssigneeList) === null || _p === void 0 ? void 0 : _p.filter((element) => {
+                    var _a, _b, _c;
+                    return (_c = (_b = (_a = this.responsibilityForm) === null || _a === void 0 ? void 0 : _a.program[0]) === null || _b === void 0 ? void 0 : _b.default_assignee_group_ids) === null || _c === void 0 ? void 0 : _c.includes(element === null || element === void 0 ? void 0 : element.group_id);
+                });
                 if (assigneeGroups === null || assigneeGroups === void 0 ? void 0 : assigneeGroups.length) {
                     this.responsibilityForm.assigneeGroups.list = assigneeGroups;
                 }
@@ -4133,13 +4278,22 @@ class WorkflowComplianceComponent {
     }
     populateProgramOverseerGroup() {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2;
-        if (((_c = (_b = (_a = this.responsibilityForm) === null || _a === void 0 ? void 0 : _a.program[0]) === null || _b === void 0 ? void 0 : _b.default_overseers) === null || _c === void 0 ? void 0 : _c.cc_email_groups) || ((_f = (_e = (_d = this.responsibilityForm) === null || _d === void 0 ? void 0 : _d.overseersGroups) === null || _e === void 0 ? void 0 : _e.notifyList) === null || _f === void 0 ? void 0 : _f.length) || ((_j = (_h = (_g = this.responsibilityForm) === null || _g === void 0 ? void 0 : _g.overseersGroups) === null || _h === void 0 ? void 0 : _h.list) === null || _j === void 0 ? void 0 : _j.length) || ((_m = (_l = (_k = this.responsibilityForm) === null || _k === void 0 ? void 0 : _k.program[0]) === null || _l === void 0 ? void 0 : _l.default_overseers) === null || _m === void 0 ? void 0 : _m.failure_cc_email_groups)) {
+        if (((_c = (_b = (_a = this.responsibilityForm) === null || _a === void 0 ? void 0 : _a.program[0]) === null || _b === void 0 ? void 0 : _b.default_overseers) === null || _c === void 0 ? void 0 : _c.cc_email_groups) ||
+            ((_f = (_e = (_d = this.responsibilityForm) === null || _d === void 0 ? void 0 : _d.overseersGroups) === null || _e === void 0 ? void 0 : _e.notifyList) === null || _f === void 0 ? void 0 : _f.length) ||
+            ((_j = (_h = (_g = this.responsibilityForm) === null || _g === void 0 ? void 0 : _g.overseersGroups) === null || _h === void 0 ? void 0 : _h.list) === null || _j === void 0 ? void 0 : _j.length) ||
+            ((_m = (_l = (_k = this.responsibilityForm) === null || _k === void 0 ? void 0 : _k.program[0]) === null || _l === void 0 ? void 0 : _l.default_overseers) === null || _m === void 0 ? void 0 : _m.failure_cc_email_groups)) {
             if ((_q = (_p = (_o = this.responsibilityForm) === null || _o === void 0 ? void 0 : _o.overseersGroups) === null || _p === void 0 ? void 0 : _p.list) === null || _q === void 0 ? void 0 : _q.length) {
                 const ids = this.returnIds((_s = (_r = this.responsibilityForm) === null || _r === void 0 ? void 0 : _r.overseersGroups) === null || _s === void 0 ? void 0 : _s.list, 'group_id');
-                const allDefaultCCGroupIds = [...new Set(ids), ...new Set((_v = (_u = (_t = this.responsibilityForm) === null || _t === void 0 ? void 0 : _t.program[0]) === null || _u === void 0 ? void 0 : _u.default_overseers) === null || _v === void 0 ? void 0 : _v.cc_email_groups)];
+                const allDefaultCCGroupIds = [
+                    ...new Set(ids),
+                    ...new Set((_v = (_u = (_t = this.responsibilityForm) === null || _t === void 0 ? void 0 : _t.program[0]) === null || _u === void 0 ? void 0 : _u.default_overseers) === null || _v === void 0 ? void 0 : _v.cc_email_groups),
+                ];
                 const overseersCCGroup = (_w = this.groupOverseerList) === null || _w === void 0 ? void 0 : _w.filter((element) => allDefaultCCGroupIds === null || allDefaultCCGroupIds === void 0 ? void 0 : allDefaultCCGroupIds.includes(element === null || element === void 0 ? void 0 : element.group_id));
                 const notifyListIds = this.returnIds(this.responsibilityForm.overseersGroups.notifyList, 'group_id');
-                const allDefaultCCFailureGroupIds = [...new Set(notifyListIds), ...new Set((_z = (_y = (_x = this.responsibilityForm) === null || _x === void 0 ? void 0 : _x.program[0]) === null || _y === void 0 ? void 0 : _y.default_overseers) === null || _z === void 0 ? void 0 : _z.failure_cc_email_groups)];
+                const allDefaultCCFailureGroupIds = [
+                    ...new Set(notifyListIds),
+                    ...new Set((_z = (_y = (_x = this.responsibilityForm) === null || _x === void 0 ? void 0 : _x.program[0]) === null || _y === void 0 ? void 0 : _y.default_overseers) === null || _z === void 0 ? void 0 : _z.failure_cc_email_groups),
+                ];
                 const overseersCCFailureGroup = (_0 = this.groupOverseerList) === null || _0 === void 0 ? void 0 : _0.filter((element) => allDefaultCCFailureGroupIds === null || allDefaultCCFailureGroupIds === void 0 ? void 0 : allDefaultCCFailureGroupIds.includes(element === null || element === void 0 ? void 0 : element.group_id));
                 if (overseersCCGroup === null || overseersCCGroup === void 0 ? void 0 : overseersCCGroup.length) {
                     this.responsibilityForm.overseersGroups.list = overseersCCGroup;
@@ -4149,7 +4303,8 @@ class WorkflowComplianceComponent {
                     this.responsibilityForm.overseersGroups.list = [];
                 }
                 if (overseersCCFailureGroup === null || overseersCCFailureGroup === void 0 ? void 0 : overseersCCFailureGroup.length) {
-                    this.responsibilityForm.overseersGroups.notifyList = overseersCCFailureGroup;
+                    this.responsibilityForm.overseersGroups.notifyList =
+                        overseersCCFailureGroup;
                     this.moreOptions.OVERSEER = true;
                 }
                 else {
@@ -4157,14 +4312,21 @@ class WorkflowComplianceComponent {
                 }
             }
             else {
-                const overseersCCGroup = (_1 = this.groupOverseerList) === null || _1 === void 0 ? void 0 : _1.filter((element) => { var _a, _b, _c, _d; return (_d = (_c = (_b = (_a = this.responsibilityForm) === null || _a === void 0 ? void 0 : _a.program[0]) === null || _b === void 0 ? void 0 : _b.default_overseers) === null || _c === void 0 ? void 0 : _c.cc_email_groups) === null || _d === void 0 ? void 0 : _d.includes(element === null || element === void 0 ? void 0 : element.group_id); });
-                const overseersCCFailureGroup = (_2 = this.groupOverseerList) === null || _2 === void 0 ? void 0 : _2.filter((element) => { var _a, _b, _c, _d; return (_d = (_c = (_b = (_a = this.responsibilityForm) === null || _a === void 0 ? void 0 : _a.program[0]) === null || _b === void 0 ? void 0 : _b.default_overseers) === null || _c === void 0 ? void 0 : _c.failure_cc_email_groups) === null || _d === void 0 ? void 0 : _d.includes(element === null || element === void 0 ? void 0 : element.group_id); });
+                const overseersCCGroup = (_1 = this.groupOverseerList) === null || _1 === void 0 ? void 0 : _1.filter((element) => {
+                    var _a, _b, _c, _d;
+                    return (_d = (_c = (_b = (_a = this.responsibilityForm) === null || _a === void 0 ? void 0 : _a.program[0]) === null || _b === void 0 ? void 0 : _b.default_overseers) === null || _c === void 0 ? void 0 : _c.cc_email_groups) === null || _d === void 0 ? void 0 : _d.includes(element === null || element === void 0 ? void 0 : element.group_id);
+                });
+                const overseersCCFailureGroup = (_2 = this.groupOverseerList) === null || _2 === void 0 ? void 0 : _2.filter((element) => {
+                    var _a, _b, _c, _d;
+                    return (_d = (_c = (_b = (_a = this.responsibilityForm) === null || _a === void 0 ? void 0 : _a.program[0]) === null || _b === void 0 ? void 0 : _b.default_overseers) === null || _c === void 0 ? void 0 : _c.failure_cc_email_groups) === null || _d === void 0 ? void 0 : _d.includes(element === null || element === void 0 ? void 0 : element.group_id);
+                });
                 if (overseersCCGroup === null || overseersCCGroup === void 0 ? void 0 : overseersCCGroup.length) {
                     this.responsibilityForm.overseersGroups.list = overseersCCGroup;
                     this.moreOptions.OVERSEER = true;
                 }
                 if (overseersCCFailureGroup.length) {
-                    this.responsibilityForm.overseersGroups.notifyList = overseersCCFailureGroup;
+                    this.responsibilityForm.overseersGroups.notifyList =
+                        overseersCCFailureGroup;
                     this.moreOptions.OVERSEER = true;
                 }
             }
@@ -4176,11 +4338,17 @@ class WorkflowComplianceComponent {
     }
     populateProgramReviewerGroup() {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-        if (((_b = (_a = this.responsibilityForm) === null || _a === void 0 ? void 0 : _a.program[0]) === null || _b === void 0 ? void 0 : _b.default_reviewer_group_ids) || ((_e = (_d = (_c = this.responsibilityForm) === null || _c === void 0 ? void 0 : _c.groupReviewers) === null || _d === void 0 ? void 0 : _d.list) === null || _e === void 0 ? void 0 : _e.length)) {
+        if (((_b = (_a = this.responsibilityForm) === null || _a === void 0 ? void 0 : _a.program[0]) === null || _b === void 0 ? void 0 : _b.default_reviewer_group_ids) ||
+            ((_e = (_d = (_c = this.responsibilityForm) === null || _c === void 0 ? void 0 : _c.groupReviewers) === null || _d === void 0 ? void 0 : _d.list) === null || _e === void 0 ? void 0 : _e.length)) {
             const ids = this.returnIds((_g = (_f = this.responsibilityForm) === null || _f === void 0 ? void 0 : _f.groupReviewers) === null || _g === void 0 ? void 0 : _g.list, 'group_id');
-            const allIds = [...new Set(ids), ...new Set((_h = this.responsibilityForm.program[0]) === null || _h === void 0 ? void 0 : _h.default_reviewer_group_ids)];
+            const allIds = [
+                ...new Set(ids),
+                ...new Set((_h = this.responsibilityForm.program[0]) === null || _h === void 0 ? void 0 : _h.default_reviewer_group_ids),
+            ];
             const reviewersGroup = this.groupReviewerList.filter((element) => allIds === null || allIds === void 0 ? void 0 : allIds.includes(element === null || element === void 0 ? void 0 : element.group_id));
-            if (((reviewersGroup === null || reviewersGroup === void 0 ? void 0 : reviewersGroup.length) || (this.featureFlag_groups && ((_l = (_k = (_j = this.responsibilityForm) === null || _j === void 0 ? void 0 : _j.groupReviewers) === null || _k === void 0 ? void 0 : _k.list) === null || _l === void 0 ? void 0 : _l.length) > 0))) {
+            if ((reviewersGroup === null || reviewersGroup === void 0 ? void 0 : reviewersGroup.length) ||
+                (this.featureFlag_groups &&
+                    ((_l = (_k = (_j = this.responsibilityForm) === null || _j === void 0 ? void 0 : _j.groupReviewers) === null || _k === void 0 ? void 0 : _k.list) === null || _l === void 0 ? void 0 : _l.length) > 0)) {
                 this.responsibilityForm.groupReviewers.list = reviewersGroup;
                 this.moreOptions.REVIEWER = true;
             }
@@ -4196,80 +4364,123 @@ class WorkflowComplianceComponent {
         var _a, _b, _c, _d, _e, _f, _g, _h;
         let overseerUserList = [];
         let overseerUserNotifyList = [];
-        let overseerEmployeesList = (res === null || res === void 0 ? void 0 : res.cc_email) ? Object.keys(res === null || res === void 0 ? void 0 : res.cc_email).map(Number) : [];
-        overseerUserList = ((overseerEmployeesList === null || overseerEmployeesList === void 0 ? void 0 : overseerEmployeesList.length) > 0 && ((_b = (_a = res === null || res === void 0 ? void 0 : res.userGroupIds) === null || _a === void 0 ? void 0 : _a.ccEmailGroupIds) === null || _b === void 0 ? void 0 : _b.length) > 0) ? overseerEmployeesList.filter((employeeIds) => { var _a, _b; return (_b = (_a = res === null || res === void 0 ? void 0 : res.existingUserIds) === null || _a === void 0 ? void 0 : _a.ccEmailEmpIds) === null || _b === void 0 ? void 0 : _b.includes(employeeIds); }) : [...overseerEmployeesList];
-        let overseerEmployeeNotifyList = (res === null || res === void 0 ? void 0 : res.failure_cc_email) ? Object.keys(res === null || res === void 0 ? void 0 : res.failure_cc_email).map(Number) : [];
-        overseerUserNotifyList = ((overseerEmployeeNotifyList === null || overseerEmployeeNotifyList === void 0 ? void 0 : overseerEmployeeNotifyList.length) > 0 && ((_d = (_c = res === null || res === void 0 ? void 0 : res.userGroupIds) === null || _c === void 0 ? void 0 : _c.failureCCEmailGroupIds) === null || _d === void 0 ? void 0 : _d.length) > 0) ? overseerEmployeeNotifyList.filter((employeeIds) => { var _a, _b; return (_b = (_a = res === null || res === void 0 ? void 0 : res.existingUserIds) === null || _a === void 0 ? void 0 : _a.failureCCEmailEmpIds) === null || _b === void 0 ? void 0 : _b.includes(employeeIds); }) : [...overseerEmployeeNotifyList];
-        this.responsibilityForm["overseers"] = {
-            list: (res === null || res === void 0 ? void 0 : res.cc_email) ? this.setList(this.overseersList, overseerUserList, 'employee_id') : [],
-            notifyList: (res === null || res === void 0 ? void 0 : res.failure_cc_email) ? this.setList(this.overseersList, overseerUserNotifyList, 'employee_id') : [],
+        let overseerEmployeesList = (res === null || res === void 0 ? void 0 : res.cc_email)
+            ? Object.keys(res === null || res === void 0 ? void 0 : res.cc_email).map(Number)
+            : [];
+        overseerUserList =
+            (overseerEmployeesList === null || overseerEmployeesList === void 0 ? void 0 : overseerEmployeesList.length) > 0 &&
+                ((_b = (_a = res === null || res === void 0 ? void 0 : res.userGroupIds) === null || _a === void 0 ? void 0 : _a.ccEmailGroupIds) === null || _b === void 0 ? void 0 : _b.length) > 0
+                ? overseerEmployeesList.filter((employeeIds) => { var _a, _b; return (_b = (_a = res === null || res === void 0 ? void 0 : res.existingUserIds) === null || _a === void 0 ? void 0 : _a.ccEmailEmpIds) === null || _b === void 0 ? void 0 : _b.includes(employeeIds); })
+                : [...overseerEmployeesList];
+        let overseerEmployeeNotifyList = (res === null || res === void 0 ? void 0 : res.failure_cc_email)
+            ? Object.keys(res === null || res === void 0 ? void 0 : res.failure_cc_email).map(Number)
+            : [];
+        overseerUserNotifyList =
+            (overseerEmployeeNotifyList === null || overseerEmployeeNotifyList === void 0 ? void 0 : overseerEmployeeNotifyList.length) > 0 &&
+                ((_d = (_c = res === null || res === void 0 ? void 0 : res.userGroupIds) === null || _c === void 0 ? void 0 : _c.failureCCEmailGroupIds) === null || _d === void 0 ? void 0 : _d.length) > 0
+                ? overseerEmployeeNotifyList.filter((employeeIds) => { var _a, _b; return (_b = (_a = res === null || res === void 0 ? void 0 : res.existingUserIds) === null || _a === void 0 ? void 0 : _a.failureCCEmailEmpIds) === null || _b === void 0 ? void 0 : _b.includes(employeeIds); })
+                : [...overseerEmployeeNotifyList];
+        this.responsibilityForm['overseers'] = {
+            list: (res === null || res === void 0 ? void 0 : res.cc_email)
+                ? this.setList(this.overseersList, overseerUserList, 'employee_id')
+                : [],
+            notifyList: (res === null || res === void 0 ? void 0 : res.failure_cc_email)
+                ? this.setList(this.overseersList, overseerUserNotifyList, 'employee_id')
+                : [],
         };
-        this.responsibilityForm["overseersGroups"] = {
-            list: ((_e = res === null || res === void 0 ? void 0 : res.userGroupIds) === null || _e === void 0 ? void 0 : _e.ccEmailGroupIds) ? this.setList(this.OrgGroup, (_f = res === null || res === void 0 ? void 0 : res.userGroupIds) === null || _f === void 0 ? void 0 : _f.ccEmailGroupIds, 'group_id') : [],
-            notifyList: ((_g = res === null || res === void 0 ? void 0 : res.userGroupIds) === null || _g === void 0 ? void 0 : _g.failureCCEmailGroupIds) ? this.setList(this.OrgGroup, (_h = res === null || res === void 0 ? void 0 : res.userGroupIds) === null || _h === void 0 ? void 0 : _h.failureCCEmailGroupIds, 'group_id') : []
+        this.responsibilityForm['overseersGroups'] = {
+            list: ((_e = res === null || res === void 0 ? void 0 : res.userGroupIds) === null || _e === void 0 ? void 0 : _e.ccEmailGroupIds)
+                ? this.setList(this.OrgGroup, (_f = res === null || res === void 0 ? void 0 : res.userGroupIds) === null || _f === void 0 ? void 0 : _f.ccEmailGroupIds, 'group_id')
+                : [],
+            notifyList: ((_g = res === null || res === void 0 ? void 0 : res.userGroupIds) === null || _g === void 0 ? void 0 : _g.failureCCEmailGroupIds)
+                ? this.setList(this.OrgGroup, (_h = res === null || res === void 0 ? void 0 : res.userGroupIds) === null || _h === void 0 ? void 0 : _h.failureCCEmailGroupIds, 'group_id')
+                : [],
         };
     }
     populateReviewerData(res) {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
         const reviewerDetails = Object.keys(res === null || res === void 0 ? void 0 : res.reviewer_arr);
         this.hasReviewer = (reviewerDetails === null || reviewerDetails === void 0 ? void 0 : reviewerDetails.length) > 0;
-        const groupReviewerDetails = ((_b = (_a = res === null || res === void 0 ? void 0 : res.userGroupIds) === null || _a === void 0 ? void 0 : _a.reviewerGroupIds) === null || _b === void 0 ? void 0 : _b.length) ? Object.assign((_c = res === null || res === void 0 ? void 0 : res.userGroupIds) === null || _c === void 0 ? void 0 : _c.reviewerGroupIds) : [];
+        const groupReviewerDetails = ((_b = (_a = res === null || res === void 0 ? void 0 : res.userGroupIds) === null || _a === void 0 ? void 0 : _a.reviewerGroupIds) === null || _b === void 0 ? void 0 : _b.length)
+            ? Object.assign((_c = res === null || res === void 0 ? void 0 : res.userGroupIds) === null || _c === void 0 ? void 0 : _c.reviewerGroupIds)
+            : [];
         let reviewer_users = [];
-        reviewer_users = (((_f = (_e = (_d = res === null || res === void 0 ? void 0 : res.reviewer_arr) === null || _d === void 0 ? void 0 : _d.level1) === null || _e === void 0 ? void 0 : _e.reviewers) === null || _f === void 0 ? void 0 : _f.length) > 0 && ((_h = (_g = res === null || res === void 0 ? void 0 : res.userGroupIds) === null || _g === void 0 ? void 0 : _g.reviewerGroupIds) === null || _h === void 0 ? void 0 : _h.length) > 0) ? (_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.filter((memberId) => { var _a, _b; return (_b = (_a = res === null || res === void 0 ? void 0 : res.existingUserIds) === null || _a === void 0 ? void 0 : _a.reviewerIds) === null || _b === void 0 ? void 0 : _b.includes(memberId === null || memberId === void 0 ? void 0 : memberId.member_id); }) : (_m = (_l = res === null || res === void 0 ? void 0 : res.reviewer_arr) === null || _l === void 0 ? void 0 : _l.level1) === null || _m === void 0 ? void 0 : _m.reviewers;
-        this.responsibilityForm["reviewers"] = {
-            sequentialWorkflow: (((_p = (_o = res === null || res === void 0 ? void 0 : res.reviewer_arr) === null || _o === void 0 ? void 0 : _o.level1) === null || _p === void 0 ? void 0 : _p.type) == 'SEQUENTIAL') ? true : false,
+        reviewer_users =
+            ((_f = (_e = (_d = res === null || res === void 0 ? void 0 : res.reviewer_arr) === null || _d === void 0 ? void 0 : _d.level1) === null || _e === void 0 ? void 0 : _e.reviewers) === null || _f === void 0 ? void 0 : _f.length) > 0 &&
+                ((_h = (_g = res === null || res === void 0 ? void 0 : res.userGroupIds) === null || _g === void 0 ? void 0 : _g.reviewerGroupIds) === null || _h === void 0 ? void 0 : _h.length) > 0
+                ? (_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.filter((memberId) => { var _a, _b; return (_b = (_a = res === null || res === void 0 ? void 0 : res.existingUserIds) === null || _a === void 0 ? void 0 : _a.reviewerIds) === null || _b === void 0 ? void 0 : _b.includes(memberId === null || memberId === void 0 ? void 0 : memberId.member_id); })
+                : (_m = (_l = res === null || res === void 0 ? void 0 : res.reviewer_arr) === null || _l === void 0 ? void 0 : _l.level1) === null || _m === void 0 ? void 0 : _m.reviewers;
+        this.responsibilityForm['reviewers'] = {
+            sequentialWorkflow: ((_p = (_o = res === null || res === void 0 ? void 0 : res.reviewer_arr) === null || _o === void 0 ? void 0 : _o.level1) === null || _p === void 0 ? void 0 : _p.type) == 'SEQUENTIAL' ? true : false,
             reviewFrequency: {
-                reviewCompleteDays: ((reviewerDetails === null || reviewerDetails === void 0 ? void 0 : reviewerDetails.length) > 0) ? res === null || res === void 0 ? void 0 : res.review_after_days : 2,
-                reviewNOtCompletedDays: ((reviewerDetails === null || reviewerDetails === void 0 ? void 0 : reviewerDetails.length) > 0) ? res === null || res === void 0 ? void 0 : res.review_failed_after_days : 2
+                reviewCompleteDays: (reviewerDetails === null || reviewerDetails === void 0 ? void 0 : reviewerDetails.length) > 0 ? res === null || res === void 0 ? void 0 : res.review_after_days : 2,
+                reviewNOtCompletedDays: (reviewerDetails === null || reviewerDetails === void 0 ? void 0 : reviewerDetails.length) > 0 ? res === null || res === void 0 ? void 0 : res.review_failed_after_days : 2,
             },
             acceptedData: (reviewerDetails === null || reviewerDetails === void 0 ? void 0 : reviewerDetails.length) > 0 ? reviewer_users : [],
-            list: (reviewerDetails === null || reviewerDetails === void 0 ? void 0 : reviewerDetails.length) > 0 ? this.setReviewerPayload(reviewer_users, 'object', (_r = (_q = res === null || res === void 0 ? void 0 : res.reviewer_arr) === null || _q === void 0 ? void 0 : _q.level1) === null || _r === void 0 ? void 0 : _r.type) : []
+            list: (reviewerDetails === null || reviewerDetails === void 0 ? void 0 : reviewerDetails.length) > 0
+                ? this.setReviewerPayload(reviewer_users, 'object', (_r = (_q = res === null || res === void 0 ? void 0 : res.reviewer_arr) === null || _q === void 0 ? void 0 : _q.level1) === null || _r === void 0 ? void 0 : _r.type)
+                : [],
         };
-        this.responsibilityForm["groupReviewers"] = {
-            sequentialWorkflow: (((_t = (_s = res === null || res === void 0 ? void 0 : res.reviewer_arr) === null || _s === void 0 ? void 0 : _s.level1) === null || _t === void 0 ? void 0 : _t.type) == 'SEQUENTIAL') ? true : false,
+        this.responsibilityForm['groupReviewers'] = {
+            sequentialWorkflow: ((_t = (_s = res === null || res === void 0 ? void 0 : res.reviewer_arr) === null || _s === void 0 ? void 0 : _s.level1) === null || _t === void 0 ? void 0 : _t.type) == 'SEQUENTIAL' ? true : false,
             reviewFrequency: {
-                reviewCompleteDays: ((reviewerDetails === null || reviewerDetails === void 0 ? void 0 : reviewerDetails.length) > 0) ? res === null || res === void 0 ? void 0 : res.review_after_days : 2,
-                reviewNOtCompletedDays: ((reviewerDetails === null || reviewerDetails === void 0 ? void 0 : reviewerDetails.length) > 0) ? res === null || res === void 0 ? void 0 : res.review_failed_after_days : 2
+                reviewCompleteDays: (reviewerDetails === null || reviewerDetails === void 0 ? void 0 : reviewerDetails.length) > 0 ? res === null || res === void 0 ? void 0 : res.review_after_days : 2,
+                reviewNOtCompletedDays: (reviewerDetails === null || reviewerDetails === void 0 ? void 0 : reviewerDetails.length) > 0 ? res === null || res === void 0 ? void 0 : res.review_failed_after_days : 2,
             },
-            list: (groupReviewerDetails === null || groupReviewerDetails === void 0 ? void 0 : groupReviewerDetails.length) > 0 ? this.setList(this.OrgGroup, groupReviewerDetails, 'group_id') : []
+            list: (groupReviewerDetails === null || groupReviewerDetails === void 0 ? void 0 : groupReviewerDetails.length) > 0
+                ? this.setList(this.OrgGroup, groupReviewerDetails, 'group_id')
+                : [],
         };
     }
     populateAssigneeData(res) {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
         let AssigneeAnyUserList = [];
         let AssigneeAllUserList = [];
-        let assigneeAnyOneList = ((res === null || res === void 0 ? void 0 : res.assigned_to_member_id) && this.isEntrust) ? res === null || res === void 0 ? void 0 : res.assigned_to_member_id : [];
-        AssigneeAnyUserList = (((_a = res === null || res === void 0 ? void 0 : res.assigned_to_member_id) === null || _a === void 0 ? void 0 : _a.length) > 0 && ((_c = (_b = res === null || res === void 0 ? void 0 : res.userGroupIds) === null || _b === void 0 ? void 0 : _b.assigneeAnyoneGroupIds) === null || _c === void 0 ? void 0 : _c.length) > 0) ? assigneeAnyOneList.filter((employeeIds) => { var _a, _b; return (_b = (_a = res === null || res === void 0 ? void 0 : res.existingUserIds) === null || _a === void 0 ? void 0 : _a.assigneeAnyoneIds) === null || _b === void 0 ? void 0 : _b.includes(employeeIds); }) : [...assigneeAnyOneList];
-        AssigneeAllUserList = ((res === null || res === void 0 ? void 0 : res.assigned_to) && !this.isEntrust) ? res === null || res === void 0 ? void 0 : res.assigned_to : [];
+        let assigneeAnyOneList = (res === null || res === void 0 ? void 0 : res.assigned_to_member_id) && this.isEntrust
+            ? res === null || res === void 0 ? void 0 : res.assigned_to_member_id
+            : [];
+        AssigneeAnyUserList =
+            ((_a = res === null || res === void 0 ? void 0 : res.assigned_to_member_id) === null || _a === void 0 ? void 0 : _a.length) > 0 &&
+                ((_c = (_b = res === null || res === void 0 ? void 0 : res.userGroupIds) === null || _b === void 0 ? void 0 : _b.assigneeAnyoneGroupIds) === null || _c === void 0 ? void 0 : _c.length) > 0
+                ? assigneeAnyOneList.filter((employeeIds) => { var _a, _b; return (_b = (_a = res === null || res === void 0 ? void 0 : res.existingUserIds) === null || _a === void 0 ? void 0 : _a.assigneeAnyoneIds) === null || _b === void 0 ? void 0 : _b.includes(employeeIds); })
+                : [...assigneeAnyOneList];
+        AssigneeAllUserList =
+            (res === null || res === void 0 ? void 0 : res.assigned_to) && !this.isEntrust ? res === null || res === void 0 ? void 0 : res.assigned_to : [];
         const assignedToUserDetails = this.setList(this.assigneesList, [Number(res === null || res === void 0 ? void 0 : res.assigned_to)], 'employee_id');
         if (assignedToUserDetails === null || assignedToUserDetails === void 0 ? void 0 : assignedToUserDetails.length) {
             const member_id = (_d = assignedToUserDetails[0]) === null || _d === void 0 ? void 0 : _d.my_member_id;
             if ((_f = (_e = res === null || res === void 0 ? void 0 : res.existingUserIds) === null || _e === void 0 ? void 0 : _e.assigneeAllIds) === null || _f === void 0 ? void 0 : _f.includes(member_id)) {
                 AssigneeAllUserList = res === null || res === void 0 ? void 0 : res.assigned_to;
-                res.userGroupIds["assigneeAllGroupIds"] = [];
+                res.userGroupIds['assigneeAllGroupIds'] = [];
             }
             else if (((_h = (_g = res === null || res === void 0 ? void 0 : res.userGroupIds) === null || _g === void 0 ? void 0 : _g.assigneeAllGroupIds) === null || _h === void 0 ? void 0 : _h.length) > 0) {
                 AssigneeAllUserList = [];
             }
         }
-        this.responsibilityForm["assignees"] = {
-            whoCanComplete: (res.isGroupAssignTo) ? 'ANY_ONE' : 'ALL',
-            list: (((_j = res === null || res === void 0 ? void 0 : res.assigned_to_member_id) === null || _j === void 0 ? void 0 : _j.length) == 0) ? this.setList(this.assigneesList, [Number(AssigneeAllUserList)], 'employee_id') :
-                this.setList(this.assigneesList, AssigneeAnyUserList, 'my_member_id'),
+        this.responsibilityForm['assignees'] = {
+            whoCanComplete: res.isGroupAssignTo ? 'ANY_ONE' : 'ALL',
+            list: ((_j = res === null || res === void 0 ? void 0 : res.assigned_to_member_id) === null || _j === void 0 ? void 0 : _j.length) == 0
+                ? this.setList(this.assigneesList, [Number(AssigneeAllUserList)], 'employee_id')
+                : this.setList(this.assigneesList, AssigneeAnyUserList, 'my_member_id'),
         };
-        this.responsibilityForm["assigneeGroups"] = {
+        this.responsibilityForm['assigneeGroups'] = {
             whoCanComplete: (res === null || res === void 0 ? void 0 : res.isGroupAssignTo) ? 'ANY_ONE' : 'ALL',
-            list: (((_l = (_k = res === null || res === void 0 ? void 0 : res.userGroupIds) === null || _k === void 0 ? void 0 : _k.assigneeAnyoneGroupIds) === null || _l === void 0 ? void 0 : _l.length) == 0) ? ((_o = (_m = res === null || res === void 0 ? void 0 : res.userGroupIds) === null || _m === void 0 ? void 0 : _m.assigneeAllGroupIds) === null || _o === void 0 ? void 0 : _o.length) > 0 ? this.setList(this.OrgGroup, (_p = res === null || res === void 0 ? void 0 : res.userGroupIds) === null || _p === void 0 ? void 0 : _p.assigneeAllGroupIds, 'group_id') : [] :
-                this.setList(this.OrgGroup, (_q = res === null || res === void 0 ? void 0 : res.userGroupIds) === null || _q === void 0 ? void 0 : _q.assigneeAnyoneGroupIds, 'group_id'),
+            list: ((_l = (_k = res === null || res === void 0 ? void 0 : res.userGroupIds) === null || _k === void 0 ? void 0 : _k.assigneeAnyoneGroupIds) === null || _l === void 0 ? void 0 : _l.length) == 0
+                ? ((_o = (_m = res === null || res === void 0 ? void 0 : res.userGroupIds) === null || _m === void 0 ? void 0 : _m.assigneeAllGroupIds) === null || _o === void 0 ? void 0 : _o.length) > 0
+                    ? this.setList(this.OrgGroup, (_p = res === null || res === void 0 ? void 0 : res.userGroupIds) === null || _p === void 0 ? void 0 : _p.assigneeAllGroupIds, 'group_id')
+                    : []
+                : this.setList(this.OrgGroup, (_q = res === null || res === void 0 ? void 0 : res.userGroupIds) === null || _q === void 0 ? void 0 : _q.assigneeAnyoneGroupIds, 'group_id'),
         };
-        this.allGroupAssignee = (((_t = (_s = (_r = this.responsibilityForm) === null || _r === void 0 ? void 0 : _r.assigneeGroups) === null || _s === void 0 ? void 0 : _s.list) === null || _t === void 0 ? void 0 : _t.length) > 0 && !this.isEntrust);
+        this.allGroupAssignee =
+            ((_t = (_s = (_r = this.responsibilityForm) === null || _r === void 0 ? void 0 : _r.assigneeGroups) === null || _s === void 0 ? void 0 : _s.list) === null || _t === void 0 ? void 0 : _t.length) > 0 &&
+                !this.isEntrust;
     }
     /**
-   * this function is for getting the users data based on member_id of users of selected User Group
-   * @param userlist contains users data
-   * @param selectedgroups contains selected User Group data
-   * @returns user data of Selected user group.
-   */
+     * this function is for getting the users data based on member_id of users of selected User Group
+     * @param userlist contains users data
+     * @param selectedgroups contains selected User Group data
+     * @returns user data of Selected user group.
+     */
     getGroupsUserEmployeesId(userList, selectedGroups) {
         let groupMemberIds = [];
         let groupUserEmployee = [];
@@ -4295,9 +4506,10 @@ class WorkflowComplianceComponent {
                 var _a, _b;
                 let index = -1;
                 if (((_a = (acceptedData !== null && acceptedData !== void 0 ? acceptedData : [])) === null || _a === void 0 ? void 0 : _a.length) > 0) {
-                    index = (_b = acceptedData === null || acceptedData === void 0 ? void 0 : acceptedData.findIndex(ele => ele.member_id === element)) !== null && _b !== void 0 ? _b : -1;
+                    index =
+                        (_b = acceptedData === null || acceptedData === void 0 ? void 0 : acceptedData.findIndex((ele) => ele.member_id === element)) !== null && _b !== void 0 ? _b : -1;
                 }
-                let acceptStatus = (index > -1 && acceptedData) ? acceptedData[index].reviewer_accept : 0;
+                let acceptStatus = index > -1 && acceptedData ? acceptedData[index].reviewer_accept : 0;
                 if (acceptStatus === 0 && reviewerType === 'ANYONE') {
                     acceptStatus = 1;
                 }
@@ -4308,10 +4520,14 @@ class WorkflowComplianceComponent {
     }
     checkWhetherAllListsLoaded() {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-        if (this.rcListLoaded && this.assigneesListLoaded && this.assignorsListLoaded &&
-            this.categoriesListLoaded && this.assuranceCategoryListLoaded && this.groupsListLoaded) {
+        if (this.rcListLoaded &&
+            this.assigneesListLoaded &&
+            this.assignorsListLoaded &&
+            this.categoriesListLoaded &&
+            this.assuranceCategoryListLoaded &&
+            this.groupsListLoaded) {
             if (((_a = this.frameworkDetails) === null || _a === void 0 ? void 0 : _a.length) > 0) {
-                this.entrustFramework(this.frameworkDetails[0]);
+                this.assignFromFramework(this.frameworkDetails[0]);
             }
             if (this.mode === 'EDIT') {
                 this.getEditResponsibilityDetails(this.responsibilityId);
@@ -4322,13 +4538,25 @@ class WorkflowComplianceComponent {
                 if (this.selectedProgram) {
                     this.responsibilityForm.program.push(this.selectedProgram);
                     this.responsibilityForm.program_selected_ids.push(this.selectedProgram.category_id);
-                    this.responsibilityForm.category_id = (_c = (_b = this.selectedProgram) === null || _b === void 0 ? void 0 : _b.category_id) === null || _c === void 0 ? void 0 : _c.toString();
+                    this.responsibilityForm.category_id =
+                        (_c = (_b = this.selectedProgram) === null || _b === void 0 ? void 0 : _b.category_id) === null || _c === void 0 ? void 0 : _c.toString();
                     if ((_d = this.orgDetails) === null || _d === void 0 ? void 0 : _d.hasProgramFullPermission) {
-                        this.responsibilityForm.assignees.whoCanComplete = (((_e = this.selectedProgram) === null || _e === void 0 ? void 0 : _e.default_assignee_type) == 'ANYONE') ? 'ANY_ONE' : 'ALL';
-                        this.responsibilityForm.reviewers.sequentialWorkflow = (((_f = this.selectedProgram) === null || _f === void 0 ? void 0 : _f.default_reviewers_type) == 'SEQUENTIAL') ? true : false;
-                        this.responsibilityForm.formatAndEvidence.evidenceRequired = ((_g = this.selectedProgram) === null || _g === void 0 ? void 0 : _g.evidence_upload_flag) ? true : false;
+                        this.responsibilityForm.assignees.whoCanComplete =
+                            ((_e = this.selectedProgram) === null || _e === void 0 ? void 0 : _e.default_assignee_type) == 'ANYONE'
+                                ? 'ANY_ONE'
+                                : 'ALL';
+                        this.responsibilityForm.reviewers.sequentialWorkflow =
+                            ((_f = this.selectedProgram) === null || _f === void 0 ? void 0 : _f.default_reviewers_type) == 'SEQUENTIAL'
+                                ? true
+                                : false;
+                        this.responsibilityForm.formatAndEvidence.evidenceRequired = ((_g = this
+                            .selectedProgram) === null || _g === void 0 ? void 0 : _g.evidence_upload_flag)
+                            ? true
+                            : false;
                     }
-                    const programCustomTags = ((_h = this.selectedProgram) === null || _h === void 0 ? void 0 : _h.custom_tags) ? JSON.parse(this.selectedProgram.custom_tags) : [];
+                    const programCustomTags = ((_h = this.selectedProgram) === null || _h === void 0 ? void 0 : _h.custom_tags)
+                        ? JSON.parse(this.selectedProgram.custom_tags)
+                        : [];
                     programCustomTags.forEach((tag) => {
                         const tagData = JSON.parse(tag);
                         const index = this.responsibilityForm.customTags.findIndex((tagElement) => tagElement.tag_name == tagData.tag_name);
@@ -4339,7 +4567,8 @@ class WorkflowComplianceComponent {
                     const checkedMoreOptions = [];
                     this.moreOptions.PROGRAM = true;
                     checkedMoreOptions.push('PROGRAM');
-                    if (((_j = this.selectedProgram) === null || _j === void 0 ? void 0 : _j.evidence_upload_flag) && ((_k = this.orgDetails) === null || _k === void 0 ? void 0 : _k.hasProgramFullPermission)) {
+                    if (((_j = this.selectedProgram) === null || _j === void 0 ? void 0 : _j.evidence_upload_flag) &&
+                        ((_k = this.orgDetails) === null || _k === void 0 ? void 0 : _k.hasProgramFullPermission)) {
                         checkedMoreOptions.push('FORMATE_EVIDENCE');
                         this.moreOptions.FORMATE_EVIDENCE = true;
                     }
@@ -4368,7 +4597,8 @@ class WorkflowComplianceComponent {
                 if (this.invalidType === 'who') {
                     this.invalidType = '';
                 }
-                if (!this.isEntrust && this.responsibilityForm.assignees.whoCanComplete !== 'ANY_ONE') {
+                if (!this.isEntrust &&
+                    this.responsibilityForm.assignees.whoCanComplete !== 'ANY_ONE') {
                     this.responsibilityForm.assignees.list = this.setList(this.assigneesList, [selectedItems.employee_id], 'employee_id');
                     this.callRefreshList();
                 }
@@ -4393,7 +4623,11 @@ class WorkflowComplianceComponent {
             case 'category':
                 this.responsibilityForm.category = selectedItems;
                 selectedItems.forEach((element) => {
-                    const tag = element.custom_tags !== '' && element.custom_tags !== "null" && element.custom_tags != "[]" ? JSON.parse(element.custom_tags) : [];
+                    const tag = element.custom_tags !== '' &&
+                        element.custom_tags !== 'null' &&
+                        element.custom_tags != '[]'
+                        ? JSON.parse(element.custom_tags)
+                        : [];
                     if ((tag === null || tag === void 0 ? void 0 : tag.length) > 0) {
                         tag.forEach((tagData) => {
                             const index = this.responsibilityForm.customTags.findIndex((tagElement) => tagElement.tag_name == tagData.tag_name);
@@ -4406,19 +4640,32 @@ class WorkflowComplianceComponent {
                 break;
             case 'program':
                 this.responsibilityForm.linkedProgram = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.linkedProgram;
-                if ((this.selectedProgram && !(((_c = this.selectedProgram) === null || _c === void 0 ? void 0 : _c.programType) === 0 && ((_e = (_d = this.selectedProgram) === null || _d === void 0 ? void 0 : _d.name) === null || _e === void 0 ? void 0 : _e.toLowerCase()) === 'uncategorized' || !((_f = this.orgDetails) === null || _f === void 0 ? void 0 : _f.hasProgramFullPermission))) && !this.feature.isFeatureEnabled('ff_deprecate_primary_program_flag')) {
-                    this.responsibilityForm.category = (selectedItems.categories) ? selectedItems.categories : [];
+                if (this.selectedProgram &&
+                    !((((_c = this.selectedProgram) === null || _c === void 0 ? void 0 : _c.programType) === 0 &&
+                        ((_e = (_d = this.selectedProgram) === null || _d === void 0 ? void 0 : _d.name) === null || _e === void 0 ? void 0 : _e.toLowerCase()) === 'uncategorized') ||
+                        !((_f = this.orgDetails) === null || _f === void 0 ? void 0 : _f.hasProgramFullPermission)) &&
+                    !this.feature.isFeatureEnabled('ff_deprecate_primary_program_flag')) {
+                    this.responsibilityForm.category = selectedItems.categories
+                        ? selectedItems.categories
+                        : [];
                     let categoryId = (_g = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.categories) === null || _g === void 0 ? void 0 : _g.toString();
                     if ((_h = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.categories) === null || _h === void 0 ? void 0 : _h.length) {
-                        this.responsibilityForm.category_id = ((_j = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.program) === null || _j === void 0 ? void 0 : _j.category_id) + ',' + categoryId;
+                        this.responsibilityForm.category_id =
+                            ((_j = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.program) === null || _j === void 0 ? void 0 : _j.category_id) + ',' + categoryId;
                     }
                     else {
-                        this.responsibilityForm.category_id = (_l = (_k = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.program) === null || _k === void 0 ? void 0 : _k.category_id) === null || _l === void 0 ? void 0 : _l.toString();
+                        this.responsibilityForm.category_id =
+                            (_l = (_k = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.program) === null || _k === void 0 ? void 0 : _k.category_id) === null || _l === void 0 ? void 0 : _l.toString();
                     }
-                    this.responsibilityForm.program_selected_ids = [...new Set(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.categories), ...new Set([(_m = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.program) === null || _m === void 0 ? void 0 : _m.category_id])];
-                    const programCustomTags = ((_o = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.program) === null || _o === void 0 ? void 0 : _o.custom_tags) ? JSON.parse((_p = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.program) === null || _p === void 0 ? void 0 : _p.custom_tags) : [];
+                    this.responsibilityForm.program_selected_ids = [
+                        ...new Set(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.categories),
+                        ...new Set([(_m = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.program) === null || _m === void 0 ? void 0 : _m.category_id]),
+                    ];
+                    const programCustomTags = ((_o = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.program) === null || _o === void 0 ? void 0 : _o.custom_tags)
+                        ? JSON.parse((_p = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.program) === null || _p === void 0 ? void 0 : _p.custom_tags)
+                        : [];
                     programCustomTags === null || programCustomTags === void 0 ? void 0 : programCustomTags.forEach((tag) => {
-                        const tagData = typeof tag === "string" ? JSON.parse(tag) : tag;
+                        const tagData = typeof tag === 'string' ? JSON.parse(tag) : tag;
                         const index = this.responsibilityForm.customTags.findIndex((tagElement) => tagElement.tag_name == tagData.tag_name);
                         if (index == -1) {
                             this.responsibilityForm.customTags.push(tagData);
@@ -4427,40 +4674,62 @@ class WorkflowComplianceComponent {
                 }
                 else {
                     if ((_q = this.responsibilityForm) === null || _q === void 0 ? void 0 : _q.assessment) {
-                        ((_s = Object.keys((_r = this.responsibilityForm) === null || _r === void 0 ? void 0 : _r.assessment)) === null || _s === void 0 ? void 0 : _s.length) ? this.getProgramDetails(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.program._id) : null;
+                        ((_s = Object.keys((_r = this.responsibilityForm) === null || _r === void 0 ? void 0 : _r.assessment)) === null || _s === void 0 ? void 0 : _s.length)
+                            ? this.getProgramDetails(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.program._id)
+                            : null;
                     }
-                    this.responsibilityForm.category = (selectedItems.categories) ? selectedItems.categories : [];
+                    this.responsibilityForm.category = selectedItems.categories
+                        ? selectedItems.categories
+                        : [];
                     this.responsibilityForm.program = [];
                     this.responsibilityForm.category_id = '';
                     this.responsibilityForm.program_selected_ids = [];
                     this.responsibilityForm.customTags = [];
-                    this.responsibilityForm.program = (selectedItems.program) ? [selectedItems.program] : [];
+                    this.responsibilityForm.program = selectedItems.program
+                        ? [selectedItems.program]
+                        : [];
                     let categoryId = (_t = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.categories) === null || _t === void 0 ? void 0 : _t.toString();
                     if ((_u = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.categories) === null || _u === void 0 ? void 0 : _u.length) {
-                        this.responsibilityForm.category_id = ((_v = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.program) === null || _v === void 0 ? void 0 : _v.category_id) + ',' + categoryId;
+                        this.responsibilityForm.category_id =
+                            ((_v = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.program) === null || _v === void 0 ? void 0 : _v.category_id) + ',' + categoryId;
                     }
                     else {
-                        this.responsibilityForm.category_id = (_x = (_w = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.program) === null || _w === void 0 ? void 0 : _w.category_id) === null || _x === void 0 ? void 0 : _x.toString();
+                        this.responsibilityForm.category_id =
+                            (_x = (_w = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.program) === null || _w === void 0 ? void 0 : _w.category_id) === null || _x === void 0 ? void 0 : _x.toString();
                     }
-                    this.responsibilityForm.program_selected_ids = [...new Set(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.categories), ...new Set([(_y = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.program) === null || _y === void 0 ? void 0 : _y.category_id])];
-                    const programCustomTags = ((_z = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.program) === null || _z === void 0 ? void 0 : _z.custom_tags) ? JSON.parse((_0 = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.program) === null || _0 === void 0 ? void 0 : _0.custom_tags) : [];
+                    this.responsibilityForm.program_selected_ids = [
+                        ...new Set(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.categories),
+                        ...new Set([(_y = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.program) === null || _y === void 0 ? void 0 : _y.category_id]),
+                    ];
+                    const programCustomTags = ((_z = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.program) === null || _z === void 0 ? void 0 : _z.custom_tags)
+                        ? JSON.parse((_0 = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.program) === null || _0 === void 0 ? void 0 : _0.custom_tags)
+                        : [];
                     programCustomTags === null || programCustomTags === void 0 ? void 0 : programCustomTags.forEach((tag) => {
-                        const tagData = typeof tag === "string" ? JSON.parse(tag) : tag;
+                        const tagData = typeof tag === 'string' ? JSON.parse(tag) : tag;
                         const index = this.responsibilityForm.customTags.findIndex((tagElement) => tagElement.tag_name == tagData.tag_name);
                         if (index == -1) {
                             this.responsibilityForm.customTags.push(tagData);
                         }
                     });
                     if ((_1 = this.orgDetails) === null || _1 === void 0 ? void 0 : _1.hasProgramFullPermission) {
-                        this.responsibilityForm.assignees.whoCanComplete = (((_2 = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.program) === null || _2 === void 0 ? void 0 : _2.default_assignee_type) == 'ANYONE') ? 'ANY_ONE' : 'ALL';
-                        this.responsibilityForm.reviewers.sequentialWorkflow = (((_3 = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.program) === null || _3 === void 0 ? void 0 : _3.default_reviewers_type) == 'SEQUENTIAL') ? true : false;
-                        this.responsibilityForm.formatAndEvidence.evidenceRequired = ((_4 = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.program) === null || _4 === void 0 ? void 0 : _4.evidence_upload_flag) ? true : false;
+                        this.responsibilityForm.assignees.whoCanComplete =
+                            ((_2 = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.program) === null || _2 === void 0 ? void 0 : _2.default_assignee_type) == 'ANYONE'
+                                ? 'ANY_ONE'
+                                : 'ALL';
+                        this.responsibilityForm.reviewers.sequentialWorkflow =
+                            ((_3 = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.program) === null || _3 === void 0 ? void 0 : _3.default_reviewers_type) == 'SEQUENTIAL'
+                                ? true
+                                : false;
+                        this.responsibilityForm.formatAndEvidence.evidenceRequired =
+                            ((_4 = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.program) === null || _4 === void 0 ? void 0 : _4.evidence_upload_flag) ? true : false;
                         if ((_5 = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.program) === null || _5 === void 0 ? void 0 : _5.evidence_upload_flag) {
                             this.moreOptions.FORMATE_EVIDENCE = true;
                         }
                     }
-                    if (!(((_6 = this.selectedProgram) === null || _6 === void 0 ? void 0 : _6.programType) === 0 && ((_8 = (_7 = this.selectedProgram) === null || _7 === void 0 ? void 0 : _7.name) === null || _8 === void 0 ? void 0 : _8.toLowerCase()) === 'uncategorized')) {
-                        if (((_9 = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.program) === null || _9 === void 0 ? void 0 : _9._id) && ((_10 = this.orgDetails) === null || _10 === void 0 ? void 0 : _10.hasProgramFullPermission)) {
+                    if (!(((_6 = this.selectedProgram) === null || _6 === void 0 ? void 0 : _6.programType) === 0 &&
+                        ((_8 = (_7 = this.selectedProgram) === null || _7 === void 0 ? void 0 : _7.name) === null || _8 === void 0 ? void 0 : _8.toLowerCase()) === 'uncategorized')) {
+                        if (((_9 = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.program) === null || _9 === void 0 ? void 0 : _9._id) &&
+                            ((_10 = this.orgDetails) === null || _10 === void 0 ? void 0 : _10.hasProgramFullPermission)) {
                             this.filterListsAccordingToProgram(selectedItems.program._id);
                         }
                         else {
@@ -4501,21 +4770,27 @@ class WorkflowComplianceComponent {
                 break;
             case 'requires_audit':
                 this.responsibilityForm.requiresAuditList = this.setList(this.assuranceRequiresAuditList, [selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.category_id], 'category_id');
-                this.responsibilityForm['audit_category_details']['category_id'] = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.category_id;
+                this.responsibilityForm['audit_category_details']['category_id'] =
+                    selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.category_id;
                 break;
             case 'checkpoints':
                 this.responsibilityForm.checkpoints = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.checkpointDetails;
-                this.responsibilityForm.checkpointInstruction = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.checkpointInstruction;
+                this.responsibilityForm.checkpointInstruction =
+                    selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.checkpointInstruction;
                 break;
             case 'calculatedrisk':
                 this.responsibilityForm.riskClass = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.riskClass;
                 this.responsibilityForm.riskMatrix = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.riskMatrix;
                 break;
             case 'formate_evidence':
-                this.responsibilityForm.formatAndEvidence.formatRequired = (_11 = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.isFormateUploaded) !== null && _11 !== void 0 ? _11 : false;
-                this.responsibilityForm.formatAndEvidence.formatFiles = (_12 = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.files) !== null && _12 !== void 0 ? _12 : [];
-                this.responsibilityForm.formatAndEvidence.formatLinks = (_13 = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.links) !== null && _13 !== void 0 ? _13 : [];
-                this.responsibilityForm.formatAndEvidence.evidenceRequired = (_14 = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.isEvidenceRequired) !== null && _14 !== void 0 ? _14 : false;
+                this.responsibilityForm.formatAndEvidence.formatRequired =
+                    (_11 = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.isFormateUploaded) !== null && _11 !== void 0 ? _11 : false;
+                this.responsibilityForm.formatAndEvidence.formatFiles =
+                    (_12 = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.files) !== null && _12 !== void 0 ? _12 : [];
+                this.responsibilityForm.formatAndEvidence.formatLinks =
+                    (_13 = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.links) !== null && _13 !== void 0 ? _13 : [];
+                this.responsibilityForm.formatAndEvidence.evidenceRequired =
+                    (_14 = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.isEvidenceRequired) !== null && _14 !== void 0 ? _14 : false;
                 break;
             case 'reviewFrequency':
                 this.responsibilityForm.reviewers.reviewFrequency = {
@@ -4532,7 +4807,8 @@ class WorkflowComplianceComponent {
      */
     callRefreshList() {
         var _a, _b;
-        if (((_a = this.responsibilityForm.program) === null || _a === void 0 ? void 0 : _a.length) && ((_b = this.orgDetails) === null || _b === void 0 ? void 0 : _b.hasProgramFullPermission)) {
+        if (((_a = this.responsibilityForm.program) === null || _a === void 0 ? void 0 : _a.length) &&
+            ((_b = this.orgDetails) === null || _b === void 0 ? void 0 : _b.hasProgramFullPermission)) {
             this.refreshListsWhileProgramSelected();
         }
         else {
@@ -4634,7 +4910,7 @@ class WorkflowComplianceComponent {
                     sample: 0,
                     percentage: 0,
                     frequency_pattern: '',
-                    frequency_time: ''
+                    frequency_time: '',
                 };
                 break;
             case 'assurance':
@@ -4646,8 +4922,8 @@ class WorkflowComplianceComponent {
                 break;
             case 'assessment':
                 this.responsibilityForm.assessment = {
-                    category_id: "",
-                    assessment_id: "",
+                    category_id: '',
+                    assessment_id: '',
                 };
                 break;
             case 'new-checkpoints':
@@ -4670,8 +4946,13 @@ class WorkflowComplianceComponent {
             userObj.push(ele.employee_id);
         });
         this.responsibilityForm.reviewers.list = this.setList(this.reviewersList, userObj, 'employee_id');
-        this.responsibilityForm.groupReviewers = { list: (((_a = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.groups) === null || _a === void 0 ? void 0 : _a.length) > 0) ? selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.groups : [] };
-        this.responsibilityForm.reviewers.sequentialWorkflow = ((_d = (_c = (_b = this.responsibilityForm) === null || _b === void 0 ? void 0 : _b.groupReviewers) === null || _c === void 0 ? void 0 : _c.list) === null || _d === void 0 ? void 0 : _d.length) > 0 ? false : this.responsibilityForm.reviewers.sequentialWorkflow;
+        this.responsibilityForm.groupReviewers = {
+            list: ((_a = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.groups) === null || _a === void 0 ? void 0 : _a.length) > 0 ? selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.groups : [],
+        };
+        this.responsibilityForm.reviewers.sequentialWorkflow =
+            ((_d = (_c = (_b = this.responsibilityForm) === null || _b === void 0 ? void 0 : _b.groupReviewers) === null || _c === void 0 ? void 0 : _c.list) === null || _d === void 0 ? void 0 : _d.length) > 0
+                ? false
+                : this.responsibilityForm.reviewers.sequentialWorkflow;
     }
     saveOverseerData(selectedItems, type) {
         var _a, _b;
@@ -4679,12 +4960,14 @@ class WorkflowComplianceComponent {
             case 'overseerList':
                 let overseerselectedlist = this.returnIds(selectedItems.users, 'employee_id');
                 this.responsibilityForm.overseers.list = this.setList(this.overseersList, overseerselectedlist, 'employee_id');
-                this.responsibilityForm.overseersGroups['list'] = (((_a = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.groups) === null || _a === void 0 ? void 0 : _a.length) > 0) ? selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.groups : [];
+                this.responsibilityForm.overseersGroups['list'] =
+                    ((_a = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.groups) === null || _a === void 0 ? void 0 : _a.length) > 0 ? selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.groups : [];
                 break;
             case 'overseerNotifyList':
                 let overseerselectedNotifylist = this.returnIds(selectedItems.users, 'employee_id');
                 this.responsibilityForm.overseers.notifyList = this.setList(this.overseersList, overseerselectedNotifylist, 'employee_id');
-                this.responsibilityForm.overseersGroups['notifyList'] = (((_b = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.groups) === null || _b === void 0 ? void 0 : _b.length) > 0) ? selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.groups : [];
+                this.responsibilityForm.overseersGroups['notifyList'] =
+                    ((_b = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.groups) === null || _b === void 0 ? void 0 : _b.length) > 0 ? selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.groups : [];
                 break;
         }
     }
@@ -4694,59 +4977,95 @@ class WorkflowComplianceComponent {
         this.activeDeselector();
         this.responsibilityForm.responsibility = {
             name: event.report_name,
-            keyResponsibility: (event.key_compliance) ? true : false,
+            keyResponsibility: event.key_compliance ? true : false,
         };
-        const newStartDate = event.start_date || event.start_date != null || event.start_date !== '' ? new Date(event.start_date * 1000) : new Date();
-        const pvtTemplate = event.frequency_template && event.frequency_template !== '' ? event.frequency_template : event.frequency;
+        const newStartDate = event.start_date || event.start_date != null || event.start_date !== ''
+            ? new Date(event.start_date * 1000)
+            : new Date();
+        const pvtTemplate = event.frequency_template && event.frequency_template !== ''
+            ? event.frequency_template
+            : event.frequency;
         const frequencyDetailsObject = this.frequencyService.shortHand_freqCal(pvtTemplate, newStartDate.getDate(), newStartDate.getMonth(), newStartDate.getFullYear());
         this.responsibilityForm.frequency_details = frequencyDetailsObject === null || frequencyDetailsObject === void 0 ? void 0 : frequencyDetailsObject.pattern;
         event.frequency_details = this.responsibilityForm.frequency_details;
         event.frequency_time = '23:59:00';
-        event.reminder_before_days = event.remind_days_before_due_date ? event.remind_days_before_due_date : 2;
-        ;
-        event.failed_after_days = event.mark_failed_after ? event.mark_failed_after : 2;
+        event.reminder_before_days = event.remind_days_before_due_date
+            ? event.remind_days_before_due_date
+            : 2;
+        event.failed_after_days = event.mark_failed_after
+            ? event.mark_failed_after
+            : 2;
         event.lifecycle_details = '0000-00-00~~0';
         event.start_of_day_utc = this.frequencyService.frameworkStartDate(event);
         event.on_completion_of = [];
         event.dom_utc = new Date().getTime();
-        event.continuous_failed_days = frequencyDetailsObject.continuous_failed_days;
-        this.responsibilityForm.frequency = this.responsibilityForm.frequency_details;
+        event.continuous_failed_days =
+            frequencyDetailsObject.continuous_failed_days;
+        this.responsibilityForm.frequency =
+            this.responsibilityForm.frequency_details;
         this.responsibilityForm.frequency_time = '23:59:00';
-        this.responsibilityForm.reminder_before_days = event.remind_days_before_due_date ? event.remind_days_before_due_date : 2;
-        ;
-        this.responsibilityForm.failed_after_days = event.mark_failed_after ? event.mark_failed_after : 2;
+        this.responsibilityForm.reminder_before_days =
+            event.remind_days_before_due_date ? event.remind_days_before_due_date : 2;
+        this.responsibilityForm.failed_after_days = event.mark_failed_after
+            ? event.mark_failed_after
+            : 2;
         this.responsibilityForm.lifecycleDetails = '0000-00-00~~0';
-        this.responsibilityForm.start_of_day_utc = this.frequencyService.frameworkStartDate(event).toFixed().toString();
+        this.responsibilityForm.start_of_day_utc = this.frequencyService
+            .frameworkStartDate(event)
+            .toFixed()
+            .toString();
         this.responsibilityForm.on_completion_of = [];
         this.responsibilityForm.dom_utc = new Date().getTime();
-        this.responsibilityForm.description = event.remarks.trim() != '' ? event.remarks : '';
-        this.responsibilityForm.customTags = event.custom_tags && event.custom_tags !== null && event.custom_tags !== 'null' && event.custom_tags !== '' ? JSON.parse(event.custom_tags) : [];
-        this.responsibilityForm.objective = event.control_objective ? event.control_objective : '';
+        this.responsibilityForm.description =
+            event.remarks.trim() != '' ? event.remarks : '';
+        this.responsibilityForm.customTags =
+            event.custom_tags &&
+                event.custom_tags !== null &&
+                event.custom_tags !== 'null' &&
+                event.custom_tags !== ''
+                ? JSON.parse(event.custom_tags)
+                : [];
+        this.responsibilityForm.objective = event.control_objective
+            ? event.control_objective
+            : '';
         this.responsibilityForm.category = this.setList(this.allCategories, [event.category_id], 'category_id'); //
         this.responsibilityForm.reviewers.reviewFrequency.reviewCompleteDays = 2;
         this.responsibilityForm.reviewers.reviewFrequency.reviewNOtCompletedDays = 2;
-        this.responsibilityForm.rc = this.responsibilityCentersList.find((rc) => rc.rc_id === event.entity_id) ? [this.responsibilityCentersList.find((rc) => rc.rc_id === event.entity_id)] : [];
+        this.responsibilityForm.rc = this.responsibilityCentersList.find((rc) => rc.rc_id === event.entity_id)
+            ? [
+                this.responsibilityCentersList.find((rc) => rc.rc_id === event.entity_id),
+            ]
+            : [];
         this.responsibilityForm.riskClass = this.isRiskEnable ? 1 : 2;
         this.responsibilityForm.private_library_id = event.report_id;
-        this.responsibilityForm.frequency = this.responsibilityForm.frequency_details;
+        this.responsibilityForm.frequency =
+            this.responsibilityForm.frequency_details;
         this.responsibilityForm.classification = this.isRiskEnable ? 1 : 2;
-        this.responsibilityForm.continuous_failed_days = frequencyDetailsObject.continuous_failed_days;
-        this.responsibilityForm.startDate = this.frequencyService.frameworkStartDate(event);
+        this.responsibilityForm.continuous_failed_days =
+            frequencyDetailsObject.continuous_failed_days;
+        this.responsibilityForm.startDate =
+            this.frequencyService.frameworkStartDate(event);
         this.responsibilityForm.formatAndEvidence = {
             evidenceRequired: event.report_upload_flag ? true : false,
             formatFiles: event.report_format,
-            formatLinks: !(event.report_format_link) || event.report_format_link == '' ? [] : [event.report_format_link],
-            formatRequired: (((_a = event.report_format) === null || _a === void 0 ? void 0 : _a.length) > 0 || ((event.report_format_link) && event.report_format_link != '')) ? true : false
+            formatLinks: !event.report_format_link || event.report_format_link == ''
+                ? []
+                : [event.report_format_link],
+            formatRequired: ((_a = event.report_format) === null || _a === void 0 ? void 0 : _a.length) > 0 ||
+                (event.report_format_link && event.report_format_link != '')
+                ? true
+                : false,
         };
         this.responsibilityForm.audit_category_details = {
             category_id: 0,
             sample: 5,
             percentage: 30,
             frequency_pattern: '1~0~3~1',
-            frequency_time: '23:59:00'
+            frequency_time: '23:59:00',
         };
         event.frequency_time = '11:59 pm';
-        if (event.frequency_details !== '' && event.frequency_details !== '5~0~0~0') {
+        if (event.frequency_details !== '' &&
+            event.frequency_details !== '5~0~0~0') {
             this.frequencyPopulation(event);
         }
         else {
@@ -4765,7 +5084,8 @@ class WorkflowComplianceComponent {
             checkedMoreOptions.push('CATEGORY');
             this.moreOptions.CATEGORY = true;
         }
-        if (((_d = (_c = this.responsibilityForm) === null || _c === void 0 ? void 0 : _c.formatAndEvidence) === null || _d === void 0 ? void 0 : _d.evidenceRequired) || ((_f = (_e = this.responsibilityForm) === null || _e === void 0 ? void 0 : _e.formatAndEvidence) === null || _f === void 0 ? void 0 : _f.formatRequired)) {
+        if (((_d = (_c = this.responsibilityForm) === null || _c === void 0 ? void 0 : _c.formatAndEvidence) === null || _d === void 0 ? void 0 : _d.evidenceRequired) ||
+            ((_f = (_e = this.responsibilityForm) === null || _e === void 0 ? void 0 : _e.formatAndEvidence) === null || _f === void 0 ? void 0 : _f.formatRequired)) {
             checkedMoreOptions.push('FORMATE_EVIDENCE');
             this.moreOptions.FORMATE_EVIDENCE = true;
         }
@@ -4773,11 +5093,13 @@ class WorkflowComplianceComponent {
             checkedMoreOptions.push('RC');
             this.moreOptions.RC = true;
         }
+        console.log('dwcewdec ewfwe ===>', event, this.responsibilityForm);
         this.populateOption.emit(checkedMoreOptions);
         //  event.placeholder
     }
     assignFromFramework(freqObj) {
         var _a, _b, _c, _d, _e, _f, _g, _h;
+        console.log('objec    ===>', freqObj);
         if (freqObj.data) {
             // this.reset();
             this.activeDeselector();
@@ -4792,7 +5114,8 @@ class WorkflowComplianceComponent {
             event.start_of_day_utc = Date.now() / 1000;
             event.on_completion_of = [];
             event.dom_utc = new Date().getTime();
-            event.continuous_failed_days = frequencyDetailsObject.continuous_failed_days;
+            event.continuous_failed_days =
+                frequencyDetailsObject.continuous_failed_days;
             this.getFrequencyPlaceholder(event);
             event.placeholder = this.frequencyPlaceholder;
             event.frequency_time = '11:59 pm';
@@ -4802,7 +5125,8 @@ class WorkflowComplianceComponent {
             this.responsibilityForm.frequency = (_c = frequencyDetailsObject === null || frequencyDetailsObject === void 0 ? void 0 : frequencyDetailsObject.pattern) !== null && _c !== void 0 ? _c : '';
             this.responsibilityForm.startDate = event.start_of_day_utc;
             this.responsibilityForm.reminder_before_days = event.reminder_before_days;
-            this.responsibilityForm.continuous_failed_days = event.continuous_failed_days;
+            this.responsibilityForm.continuous_failed_days =
+                event.continuous_failed_days;
             this.responsibilityForm.failed_after_days = event.failed_after_days;
             this.selectedFrameworkValues = (_d = freqObj.selectedFrameworkData) !== null && _d !== void 0 ? _d : undefined;
             if ((_e = freqObj === null || freqObj === void 0 ? void 0 : freqObj.data) === null || _e === void 0 ? void 0 : _e.description) {
@@ -4855,11 +5179,17 @@ class WorkflowComplianceComponent {
         const assignees = cloneDeep((_d = (_c = this.responsibilityForm) === null || _c === void 0 ? void 0 : _c.assignees) === null || _d === void 0 ? void 0 : _d.list);
         const assigneeGroupList = cloneDeep((_f = (_e = this.responsibilityForm) === null || _e === void 0 ? void 0 : _e.assigneeGroups) === null || _f === void 0 ? void 0 : _f.list);
         const reviewers = cloneDeep(this.responsibilityForm.reviewers.list);
-        const groupReviewersList = this.featureFlag_groups ? cloneDeep((_h = (_g = this.responsibilityForm) === null || _g === void 0 ? void 0 : _g.groupReviewers) === null || _h === void 0 ? void 0 : _h.list) : [];
+        const groupReviewersList = this.featureFlag_groups
+            ? cloneDeep((_h = (_g = this.responsibilityForm) === null || _g === void 0 ? void 0 : _g.groupReviewers) === null || _h === void 0 ? void 0 : _h.list)
+            : [];
         const overseerList = cloneDeep((_k = (_j = this.responsibilityForm) === null || _j === void 0 ? void 0 : _j.overseers) === null || _k === void 0 ? void 0 : _k.list);
-        const groupOverseerList = this.featureFlag_groups ? cloneDeep((_m = (_l = this.responsibilityForm) === null || _l === void 0 ? void 0 : _l.overseersGroups) === null || _m === void 0 ? void 0 : _m.list) : [];
+        const groupOverseerList = this.featureFlag_groups
+            ? cloneDeep((_m = (_l = this.responsibilityForm) === null || _l === void 0 ? void 0 : _l.overseersGroups) === null || _m === void 0 ? void 0 : _m.list)
+            : [];
         const notifyOverseers = cloneDeep((_p = (_o = this.responsibilityForm) === null || _o === void 0 ? void 0 : _o.overseers) === null || _p === void 0 ? void 0 : _p.notifyList);
-        const groupNotifyOverseers = this.featureFlag_groups ? cloneDeep((_r = (_q = this.responsibilityForm) === null || _q === void 0 ? void 0 : _q.overseersGroups) === null || _r === void 0 ? void 0 : _r.notifyList) : [];
+        const groupNotifyOverseers = this.featureFlag_groups
+            ? cloneDeep((_r = (_q = this.responsibilityForm) === null || _q === void 0 ? void 0 : _q.overseersGroups) === null || _r === void 0 ? void 0 : _r.notifyList)
+            : [];
         assignors === null || assignors === void 0 ? void 0 : assignors.forEach((user) => {
             assignorAndAssigneesIds.push(user.member_id);
             this.assignorId.push(user.member_id);
@@ -4874,7 +5204,7 @@ class WorkflowComplianceComponent {
             this.assignorId.push(this.memberId);
         }
         allUsers === null || allUsers === void 0 ? void 0 : allUsers.forEach((user) => {
-            allUsersIds.push((user === null || user === void 0 ? void 0 : user.my_member_id));
+            allUsersIds.push(user === null || user === void 0 ? void 0 : user.my_member_id);
         });
         assigneeGroupList === null || assigneeGroupList === void 0 ? void 0 : assigneeGroupList.forEach((group) => {
             assigneeGroupIds.push(group === null || group === void 0 ? void 0 : group.group_id);
@@ -4914,29 +5244,39 @@ class WorkflowComplianceComponent {
         groupOverseerIds = [...new Set(groupOverseerIds)];
         this.assignorsList = behalfUsers.filter((user) => !(overseerIds === null || overseerIds === void 0 ? void 0 : overseerIds.includes(user.member_id)));
         this.assigneesList = allUsers;
-        this.reviewersList = allUsers.filter((user) => !((overseerIds === null || overseerIds === void 0 ? void 0 : overseerIds.includes(user === null || user === void 0 ? void 0 : user.my_member_id)) || (assigneeIds === null || assigneeIds === void 0 ? void 0 : assigneeIds.includes(user === null || user === void 0 ? void 0 : user.my_member_id))));
-        this.overseersList = allUsers.filter((user) => !((assignorAndAssigneesIds === null || assignorAndAssigneesIds === void 0 ? void 0 : assignorAndAssigneesIds.includes(user === null || user === void 0 ? void 0 : user.my_member_id)) || (reviewersIds === null || reviewersIds === void 0 ? void 0 : reviewersIds.includes(user === null || user === void 0 ? void 0 : user.my_member_id))));
+        this.reviewersList = allUsers.filter((user) => !((overseerIds === null || overseerIds === void 0 ? void 0 : overseerIds.includes(user === null || user === void 0 ? void 0 : user.my_member_id)) ||
+            (assigneeIds === null || assigneeIds === void 0 ? void 0 : assigneeIds.includes(user === null || user === void 0 ? void 0 : user.my_member_id))));
+        this.overseersList = allUsers.filter((user) => !((assignorAndAssigneesIds === null || assignorAndAssigneesIds === void 0 ? void 0 : assignorAndAssigneesIds.includes(user === null || user === void 0 ? void 0 : user.my_member_id)) ||
+            (reviewersIds === null || reviewersIds === void 0 ? void 0 : reviewersIds.includes(user === null || user === void 0 ? void 0 : user.my_member_id))));
         this.disableList(allUsers, assignorAndAssigneesIds, assigneeIds, reviewersIds, overseerIds);
         if (this.featureFlag_groups) {
-            this.groupAssigneeList = allGroups.filter((group) => !((groupReviewerIds === null || groupReviewerIds === void 0 ? void 0 : groupReviewerIds.includes(group === null || group === void 0 ? void 0 : group.group_id)) || (groupOverseerIds === null || groupOverseerIds === void 0 ? void 0 : groupOverseerIds.includes(group === null || group === void 0 ? void 0 : group.group_id))));
+            this.groupAssigneeList = allGroups.filter((group) => !((groupReviewerIds === null || groupReviewerIds === void 0 ? void 0 : groupReviewerIds.includes(group === null || group === void 0 ? void 0 : group.group_id)) ||
+                (groupOverseerIds === null || groupOverseerIds === void 0 ? void 0 : groupOverseerIds.includes(group === null || group === void 0 ? void 0 : group.group_id))));
             this.reviewerMemberIdsList = this.assignUserMemberId(this.allUsersList);
             this.overseersList = this.assignUserMemberId(this.allUsersList);
-            this.groupReviewerList = allGroups.filter((group) => !((groupOverseerIds === null || groupOverseerIds === void 0 ? void 0 : groupOverseerIds.includes(group === null || group === void 0 ? void 0 : group.group_id)) || (assigneeGroupIds === null || assigneeGroupIds === void 0 ? void 0 : assigneeGroupIds.includes(group === null || group === void 0 ? void 0 : group.group_id))));
-            this.groupOverseerList = allGroups.filter((group) => !((assigneeGroupIds === null || assigneeGroupIds === void 0 ? void 0 : assigneeGroupIds.includes(group === null || group === void 0 ? void 0 : group.group_id)) || (groupReviewerIds === null || groupReviewerIds === void 0 ? void 0 : groupReviewerIds.includes(group === null || group === void 0 ? void 0 : group.group_id))));
+            this.groupReviewerList = allGroups.filter((group) => !((groupOverseerIds === null || groupOverseerIds === void 0 ? void 0 : groupOverseerIds.includes(group === null || group === void 0 ? void 0 : group.group_id)) ||
+                (assigneeGroupIds === null || assigneeGroupIds === void 0 ? void 0 : assigneeGroupIds.includes(group === null || group === void 0 ? void 0 : group.group_id))));
+            this.groupOverseerList = allGroups.filter((group) => !((assigneeGroupIds === null || assigneeGroupIds === void 0 ? void 0 : assigneeGroupIds.includes(group === null || group === void 0 ? void 0 : group.group_id)) ||
+                (groupReviewerIds === null || groupReviewerIds === void 0 ? void 0 : groupReviewerIds.includes(group === null || group === void 0 ? void 0 : group.group_id))));
         }
     }
     disableList(allUsers, assignorAndAssigneesIds, assigneeIds, reviewersIds, overseerIds) {
-        let disableAssigneeList = allUsers.filter((user) => ((reviewersIds === null || reviewersIds === void 0 ? void 0 : reviewersIds.includes(user === null || user === void 0 ? void 0 : user.my_member_id)) || (overseerIds === null || overseerIds === void 0 ? void 0 : overseerIds.includes(user === null || user === void 0 ? void 0 : user.my_member_id))));
+        let disableAssigneeList = allUsers.filter((user) => (reviewersIds === null || reviewersIds === void 0 ? void 0 : reviewersIds.includes(user === null || user === void 0 ? void 0 : user.my_member_id)) ||
+            (overseerIds === null || overseerIds === void 0 ? void 0 : overseerIds.includes(user === null || user === void 0 ? void 0 : user.my_member_id)));
         this.disableAssigneeIds = this.returnIds(disableAssigneeList, 'my_member_id');
         this.disableRadioAssignee = this.returnIds(disableAssigneeList, 'employee_id');
-        let disableReviewerList = allUsers.filter((user) => ((overseerIds === null || overseerIds === void 0 ? void 0 : overseerIds.includes(user === null || user === void 0 ? void 0 : user.my_member_id)) || (assigneeIds === null || assigneeIds === void 0 ? void 0 : assigneeIds.includes(user === null || user === void 0 ? void 0 : user.my_member_id))));
+        let disableReviewerList = allUsers.filter((user) => (overseerIds === null || overseerIds === void 0 ? void 0 : overseerIds.includes(user === null || user === void 0 ? void 0 : user.my_member_id)) ||
+            (assigneeIds === null || assigneeIds === void 0 ? void 0 : assigneeIds.includes(user === null || user === void 0 ? void 0 : user.my_member_id)));
         this.disableReviewerIds = this.returnIds(disableReviewerList, 'employee_id');
-        let disableOverseerList = allUsers.filter((user) => ((assignorAndAssigneesIds === null || assignorAndAssigneesIds === void 0 ? void 0 : assignorAndAssigneesIds.includes(user === null || user === void 0 ? void 0 : user.my_member_id)) || (reviewersIds === null || reviewersIds === void 0 ? void 0 : reviewersIds.includes(user === null || user === void 0 ? void 0 : user.my_member_id))));
+        let disableOverseerList = allUsers.filter((user) => (assignorAndAssigneesIds === null || assignorAndAssigneesIds === void 0 ? void 0 : assignorAndAssigneesIds.includes(user === null || user === void 0 ? void 0 : user.my_member_id)) ||
+            (reviewersIds === null || reviewersIds === void 0 ? void 0 : reviewersIds.includes(user === null || user === void 0 ? void 0 : user.my_member_id)));
         this.disableOverseerIds = this.returnIds(disableOverseerList, 'employee_id');
         if (this.featureFlag_groups) {
-            let disableReviewerList = allUsers.filter((user) => ((overseerIds === null || overseerIds === void 0 ? void 0 : overseerIds.includes(user === null || user === void 0 ? void 0 : user.my_member_id)) || (assigneeIds === null || assigneeIds === void 0 ? void 0 : assigneeIds.includes(user === null || user === void 0 ? void 0 : user.my_member_id))));
+            let disableReviewerList = allUsers.filter((user) => (overseerIds === null || overseerIds === void 0 ? void 0 : overseerIds.includes(user === null || user === void 0 ? void 0 : user.my_member_id)) ||
+                (assigneeIds === null || assigneeIds === void 0 ? void 0 : assigneeIds.includes(user === null || user === void 0 ? void 0 : user.my_member_id)));
             this.disableReviewerIds = this.returnIds(disableReviewerList, 'member_id');
-            let disableOverseersList = allUsers.filter((user) => ((assignorAndAssigneesIds === null || assignorAndAssigneesIds === void 0 ? void 0 : assignorAndAssigneesIds.includes(user === null || user === void 0 ? void 0 : user.my_member_id)) || (reviewersIds === null || reviewersIds === void 0 ? void 0 : reviewersIds.includes(user === null || user === void 0 ? void 0 : user.my_member_id))));
+            let disableOverseersList = allUsers.filter((user) => (assignorAndAssigneesIds === null || assignorAndAssigneesIds === void 0 ? void 0 : assignorAndAssigneesIds.includes(user === null || user === void 0 ? void 0 : user.my_member_id)) ||
+                (reviewersIds === null || reviewersIds === void 0 ? void 0 : reviewersIds.includes(user === null || user === void 0 ? void 0 : user.my_member_id)));
             this.disableOverseerIds = this.returnIds(disableOverseersList, 'member_id');
         }
     }
@@ -4957,13 +5297,21 @@ class WorkflowComplianceComponent {
         const allGroups = cloneDeep(this.OrgGroup);
         const assignors = cloneDeep(this.responsibilityForm.assignors.list);
         const assignees = cloneDeep((_b = (_a = this.responsibilityForm) === null || _a === void 0 ? void 0 : _a.assignees) === null || _b === void 0 ? void 0 : _b.list);
-        const assigneeGroupList = this.featureFlag_groups ? cloneDeep((_d = (_c = this.responsibilityForm) === null || _c === void 0 ? void 0 : _c.assigneeGroups) === null || _d === void 0 ? void 0 : _d.list) : [];
+        const assigneeGroupList = this.featureFlag_groups
+            ? cloneDeep((_d = (_c = this.responsibilityForm) === null || _c === void 0 ? void 0 : _c.assigneeGroups) === null || _d === void 0 ? void 0 : _d.list)
+            : [];
         const reviewers = cloneDeep((_f = (_e = this.responsibilityForm) === null || _e === void 0 ? void 0 : _e.reviewers) === null || _f === void 0 ? void 0 : _f.list);
-        const groupReviewersList = this.featureFlag_groups ? cloneDeep((_h = (_g = this.responsibilityForm) === null || _g === void 0 ? void 0 : _g.groupReviewers) === null || _h === void 0 ? void 0 : _h.list) : [];
+        const groupReviewersList = this.featureFlag_groups
+            ? cloneDeep((_h = (_g = this.responsibilityForm) === null || _g === void 0 ? void 0 : _g.groupReviewers) === null || _h === void 0 ? void 0 : _h.list)
+            : [];
         const overseerList = cloneDeep((_k = (_j = this.responsibilityForm) === null || _j === void 0 ? void 0 : _j.overseers) === null || _k === void 0 ? void 0 : _k.list);
-        const groupOverseerList = this.featureFlag_groups ? cloneDeep((_m = (_l = this.responsibilityForm) === null || _l === void 0 ? void 0 : _l.overseersGroups) === null || _m === void 0 ? void 0 : _m.list) : [];
+        const groupOverseerList = this.featureFlag_groups
+            ? cloneDeep((_m = (_l = this.responsibilityForm) === null || _l === void 0 ? void 0 : _l.overseersGroups) === null || _m === void 0 ? void 0 : _m.list)
+            : [];
         const notifyOverseers = cloneDeep((_p = (_o = this.responsibilityForm) === null || _o === void 0 ? void 0 : _o.overseers) === null || _p === void 0 ? void 0 : _p.notifyList);
-        const groupNotifyOverseers = this.featureFlag_groups ? cloneDeep((_r = (_q = this.responsibilityForm) === null || _q === void 0 ? void 0 : _q.overseersGroups) === null || _r === void 0 ? void 0 : _r.notifyList) : [];
+        const groupNotifyOverseers = this.featureFlag_groups
+            ? cloneDeep((_r = (_q = this.responsibilityForm) === null || _q === void 0 ? void 0 : _q.overseersGroups) === null || _r === void 0 ? void 0 : _r.notifyList)
+            : [];
         assignors === null || assignors === void 0 ? void 0 : assignors.forEach((user) => {
             this.assignorId.push(user === null || user === void 0 ? void 0 : user.member_id);
             assignorAndAssigneesIds.push(user === null || user === void 0 ? void 0 : user.member_id);
@@ -5014,14 +5362,31 @@ class WorkflowComplianceComponent {
         this.overseerIds = [...new Set(this.overseerIds)];
         this.assignorsList = behalfUsers.filter((user) => !(overseerIds === null || overseerIds === void 0 ? void 0 : overseerIds.includes(user.member_id)));
         this.assigneesList = (_v = this.programPeopleList) === null || _v === void 0 ? void 0 : _v.assigneesList;
-        this.reviewersList = (_w = this.programPeopleList) === null || _w === void 0 ? void 0 : _w.reviewersList.filter((user) => !((overseerIds === null || overseerIds === void 0 ? void 0 : overseerIds.includes(user === null || user === void 0 ? void 0 : user.my_member_id)) || (assigneeIds === null || assigneeIds === void 0 ? void 0 : assigneeIds.includes(user === null || user === void 0 ? void 0 : user.my_member_id))));
-        this.overseersList = (_x = this.programPeopleList) === null || _x === void 0 ? void 0 : _x.overseersList.filter((user) => !((assignorAndAssigneesIds === null || assignorAndAssigneesIds === void 0 ? void 0 : assignorAndAssigneesIds.includes(user === null || user === void 0 ? void 0 : user.my_member_id)) || (reviewersIds === null || reviewersIds === void 0 ? void 0 : reviewersIds.includes(user === null || user === void 0 ? void 0 : user.my_member_id))));
+        this.reviewersList = (_w = this.programPeopleList) === null || _w === void 0 ? void 0 : _w.reviewersList.filter((user) => !((overseerIds === null || overseerIds === void 0 ? void 0 : overseerIds.includes(user === null || user === void 0 ? void 0 : user.my_member_id)) ||
+            (assigneeIds === null || assigneeIds === void 0 ? void 0 : assigneeIds.includes(user === null || user === void 0 ? void 0 : user.my_member_id))));
+        this.overseersList = (_x = this.programPeopleList) === null || _x === void 0 ? void 0 : _x.overseersList.filter((user) => !((assignorAndAssigneesIds === null || assignorAndAssigneesIds === void 0 ? void 0 : assignorAndAssigneesIds.includes(user === null || user === void 0 ? void 0 : user.my_member_id)) ||
+            (reviewersIds === null || reviewersIds === void 0 ? void 0 : reviewersIds.includes(user === null || user === void 0 ? void 0 : user.my_member_id))));
         if (this.featureFlag_groups) {
-            this.groupAssigneeList = this.selectedProgram && ((_z = (_y = this.selectedProgram) === null || _y === void 0 ? void 0 : _y.assignee_group_ids) === null || _z === void 0 ? void 0 : _z.length) > 0 ? this.programGroupList(allGroups, (_0 = this.selectedProgram) === null || _0 === void 0 ? void 0 : _0.assignee_group_ids) : allGroups.filter((group) => !((groupReviewerIds === null || groupReviewerIds === void 0 ? void 0 : groupReviewerIds.includes(group === null || group === void 0 ? void 0 : group.group_id)) || (groupOverseerIds === null || groupOverseerIds === void 0 ? void 0 : groupOverseerIds.includes(group === null || group === void 0 ? void 0 : group.group_id))));
+            this.groupAssigneeList =
+                this.selectedProgram &&
+                    ((_z = (_y = this.selectedProgram) === null || _y === void 0 ? void 0 : _y.assignee_group_ids) === null || _z === void 0 ? void 0 : _z.length) > 0
+                    ? this.programGroupList(allGroups, (_0 = this.selectedProgram) === null || _0 === void 0 ? void 0 : _0.assignee_group_ids)
+                    : allGroups.filter((group) => !((groupReviewerIds === null || groupReviewerIds === void 0 ? void 0 : groupReviewerIds.includes(group === null || group === void 0 ? void 0 : group.group_id)) ||
+                        (groupOverseerIds === null || groupOverseerIds === void 0 ? void 0 : groupOverseerIds.includes(group === null || group === void 0 ? void 0 : group.group_id))));
             this.reviewerMemberIdsList = this.assignUserMemberId(this.programPeopleList.reviewersList);
-            this.groupReviewerList = this.selectedProgram && ((_2 = (_1 = this.selectedProgram) === null || _1 === void 0 ? void 0 : _1.reviewer_group_ids) === null || _2 === void 0 ? void 0 : _2.length) > 0 ? this.programGroupList(allGroups, (_3 = this.selectedProgram) === null || _3 === void 0 ? void 0 : _3.reviewer_group_ids) : allGroups.filter((group) => !((groupOverseerIds === null || groupOverseerIds === void 0 ? void 0 : groupOverseerIds.includes(group === null || group === void 0 ? void 0 : group.group_id)) || (assigneeGroupIds === null || assigneeGroupIds === void 0 ? void 0 : assigneeGroupIds.includes(group === null || group === void 0 ? void 0 : group.group_id))));
+            this.groupReviewerList =
+                this.selectedProgram &&
+                    ((_2 = (_1 = this.selectedProgram) === null || _1 === void 0 ? void 0 : _1.reviewer_group_ids) === null || _2 === void 0 ? void 0 : _2.length) > 0
+                    ? this.programGroupList(allGroups, (_3 = this.selectedProgram) === null || _3 === void 0 ? void 0 : _3.reviewer_group_ids)
+                    : allGroups.filter((group) => !((groupOverseerIds === null || groupOverseerIds === void 0 ? void 0 : groupOverseerIds.includes(group === null || group === void 0 ? void 0 : group.group_id)) ||
+                        (assigneeGroupIds === null || assigneeGroupIds === void 0 ? void 0 : assigneeGroupIds.includes(group === null || group === void 0 ? void 0 : group.group_id))));
             this.overseersList = this.assignUserMemberId(this.programPeopleList.overseersList);
-            this.groupOverseerList = this.selectedProgram && ((_6 = (_5 = (_4 = this.selectedProgram) === null || _4 === void 0 ? void 0 : _4.overseers) === null || _5 === void 0 ? void 0 : _5.cc_email_groups) === null || _6 === void 0 ? void 0 : _6.length) > 0 ? this.programGroupList(allGroups, (_8 = (_7 = this.selectedProgram) === null || _7 === void 0 ? void 0 : _7.overseers) === null || _8 === void 0 ? void 0 : _8.cc_email_groups) : allGroups.filter((group) => !((assigneeGroupIds === null || assigneeGroupIds === void 0 ? void 0 : assigneeGroupIds.includes(group === null || group === void 0 ? void 0 : group.group_id)) || (groupReviewerIds === null || groupReviewerIds === void 0 ? void 0 : groupReviewerIds.includes(group === null || group === void 0 ? void 0 : group.group_id))));
+            this.groupOverseerList =
+                this.selectedProgram &&
+                    ((_6 = (_5 = (_4 = this.selectedProgram) === null || _4 === void 0 ? void 0 : _4.overseers) === null || _5 === void 0 ? void 0 : _5.cc_email_groups) === null || _6 === void 0 ? void 0 : _6.length) > 0
+                    ? this.programGroupList(allGroups, (_8 = (_7 = this.selectedProgram) === null || _7 === void 0 ? void 0 : _7.overseers) === null || _8 === void 0 ? void 0 : _8.cc_email_groups)
+                    : allGroups.filter((group) => !((assigneeGroupIds === null || assigneeGroupIds === void 0 ? void 0 : assigneeGroupIds.includes(group === null || group === void 0 ? void 0 : group.group_id)) ||
+                        (groupReviewerIds === null || groupReviewerIds === void 0 ? void 0 : groupReviewerIds.includes(group === null || group === void 0 ? void 0 : group.group_id))));
         }
         this.disableProgramList(assignorAndAssigneesIds, assigneeIds, reviewersIds, overseerIds);
     }
@@ -5031,23 +5396,28 @@ class WorkflowComplianceComponent {
         let assigneeProgram = [];
         let groupIds = args[0];
         if (this.selectedProgram && ((_a = this.selectedProgram) === null || _a === void 0 ? void 0 : _a.assignee_group_ids)) {
-            assigneeProgram = allGroups.filter((group) => (groupIds.includes(group.group_id)));
+            assigneeProgram = allGroups.filter((group) => groupIds.includes(group.group_id));
         }
         return assigneeProgram;
     }
     disableProgramList(assignorAndAssigneesIds, assigneeIds, reviewersIds, overseerIds) {
         var _a, _b, _c;
-        let disableAssigneeList = (_a = this.programPeopleList) === null || _a === void 0 ? void 0 : _a.assigneesList.filter((user) => ((reviewersIds === null || reviewersIds === void 0 ? void 0 : reviewersIds.includes(user === null || user === void 0 ? void 0 : user.my_member_id)) || (overseerIds === null || overseerIds === void 0 ? void 0 : overseerIds.includes(user === null || user === void 0 ? void 0 : user.my_member_id))));
+        let disableAssigneeList = (_a = this.programPeopleList) === null || _a === void 0 ? void 0 : _a.assigneesList.filter((user) => (reviewersIds === null || reviewersIds === void 0 ? void 0 : reviewersIds.includes(user === null || user === void 0 ? void 0 : user.my_member_id)) ||
+            (overseerIds === null || overseerIds === void 0 ? void 0 : overseerIds.includes(user === null || user === void 0 ? void 0 : user.my_member_id)));
         this.disableAssigneeIds = this.returnIds(disableAssigneeList, 'my_member_id');
         this.disableRadioAssignee = this.returnIds(disableAssigneeList, 'employee_id');
-        let disableReviewerList = (_b = this.programPeopleList) === null || _b === void 0 ? void 0 : _b.reviewersList.filter((user) => ((overseerIds === null || overseerIds === void 0 ? void 0 : overseerIds.includes(user === null || user === void 0 ? void 0 : user.my_member_id)) || (assigneeIds === null || assigneeIds === void 0 ? void 0 : assigneeIds.includes(user === null || user === void 0 ? void 0 : user.my_member_id))));
+        let disableReviewerList = (_b = this.programPeopleList) === null || _b === void 0 ? void 0 : _b.reviewersList.filter((user) => (overseerIds === null || overseerIds === void 0 ? void 0 : overseerIds.includes(user === null || user === void 0 ? void 0 : user.my_member_id)) ||
+            (assigneeIds === null || assigneeIds === void 0 ? void 0 : assigneeIds.includes(user === null || user === void 0 ? void 0 : user.my_member_id)));
         this.disableReviewerIds = this.returnIds(disableReviewerList, 'employee_id');
-        let disableOverseerList = (_c = this.programPeopleList) === null || _c === void 0 ? void 0 : _c.overseersList.filter((user) => ((assignorAndAssigneesIds === null || assignorAndAssigneesIds === void 0 ? void 0 : assignorAndAssigneesIds.includes(user === null || user === void 0 ? void 0 : user.my_member_id)) || (reviewersIds === null || reviewersIds === void 0 ? void 0 : reviewersIds.includes(user === null || user === void 0 ? void 0 : user.my_member_id))));
+        let disableOverseerList = (_c = this.programPeopleList) === null || _c === void 0 ? void 0 : _c.overseersList.filter((user) => (assignorAndAssigneesIds === null || assignorAndAssigneesIds === void 0 ? void 0 : assignorAndAssigneesIds.includes(user === null || user === void 0 ? void 0 : user.my_member_id)) ||
+            (reviewersIds === null || reviewersIds === void 0 ? void 0 : reviewersIds.includes(user === null || user === void 0 ? void 0 : user.my_member_id)));
         this.disableOverseerIds = this.returnIds(disableOverseerList, 'employee_id');
         if (this.featureFlag_groups) {
-            let disableReviewerList = this.reviewerMemberIdsList.filter((user) => ((overseerIds === null || overseerIds === void 0 ? void 0 : overseerIds.includes(user === null || user === void 0 ? void 0 : user.my_member_id)) || (assigneeIds === null || assigneeIds === void 0 ? void 0 : assigneeIds.includes(user === null || user === void 0 ? void 0 : user.my_member_id))));
+            let disableReviewerList = this.reviewerMemberIdsList.filter((user) => (overseerIds === null || overseerIds === void 0 ? void 0 : overseerIds.includes(user === null || user === void 0 ? void 0 : user.my_member_id)) ||
+                (assigneeIds === null || assigneeIds === void 0 ? void 0 : assigneeIds.includes(user === null || user === void 0 ? void 0 : user.my_member_id)));
             this.disableReviewerIds = this.returnIds(disableReviewerList, 'member_id');
-            let disableOverseerList = this.overseersList.filter((user) => ((assignorAndAssigneesIds === null || assignorAndAssigneesIds === void 0 ? void 0 : assignorAndAssigneesIds.includes(user === null || user === void 0 ? void 0 : user.my_member_id)) || (reviewersIds === null || reviewersIds === void 0 ? void 0 : reviewersIds.includes(user === null || user === void 0 ? void 0 : user.my_member_id))));
+            let disableOverseerList = this.overseersList.filter((user) => (assignorAndAssigneesIds === null || assignorAndAssigneesIds === void 0 ? void 0 : assignorAndAssigneesIds.includes(user === null || user === void 0 ? void 0 : user.my_member_id)) ||
+                (reviewersIds === null || reviewersIds === void 0 ? void 0 : reviewersIds.includes(user === null || user === void 0 ? void 0 : user.my_member_id)));
             this.disableOverseerIds = this.returnIds(disableOverseerList, 'member_id');
         }
     }
@@ -5082,24 +5452,42 @@ class WorkflowComplianceComponent {
     validateResponsibility() {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
         this.submitted = true;
-        if (this.responsibilityForm.assignors.enable && ((_a = this.responsibilityForm.assignors.list) === null || _a === void 0 ? void 0 : _a.length) === 0) {
-            this.invalidType = "whom";
+        if (this.responsibilityForm.assignors.enable &&
+            ((_a = this.responsibilityForm.assignors.list) === null || _a === void 0 ? void 0 : _a.length) === 0) {
+            this.invalidType = 'whom';
             return;
         }
-        if (!this.responsibilityForm.responsibility.name || this.responsibilityForm.responsibility.name.trim() == '') {
+        if (!this.responsibilityForm.responsibility.name ||
+            this.responsibilityForm.responsibility.name.trim() == '') {
             this.invalidType = 'what';
         }
-        else if (!((_c = (_b = this.responsibilityForm) === null || _b === void 0 ? void 0 : _b.assignees) === null || _c === void 0 ? void 0 : _c.list) || ((_f = (_e = (_d = this.responsibilityForm) === null || _d === void 0 ? void 0 : _d.assignees) === null || _e === void 0 ? void 0 : _e.list) === null || _f === void 0 ? void 0 : _f.length) == 0 && (!this.featureFlag_groups || ((!((_h = (_g = this.responsibilityForm) === null || _g === void 0 ? void 0 : _g.assigneeGroups) === null || _h === void 0 ? void 0 : _h.list) || ((_l = (_k = (_j = this.responsibilityForm) === null || _j === void 0 ? void 0 : _j.assigneeGroups) === null || _k === void 0 ? void 0 : _k.list) === null || _l === void 0 ? void 0 : _l.length) == 0) && this.featureFlag_groups))) {
+        else if (!((_c = (_b = this.responsibilityForm) === null || _b === void 0 ? void 0 : _b.assignees) === null || _c === void 0 ? void 0 : _c.list) ||
+            (((_f = (_e = (_d = this.responsibilityForm) === null || _d === void 0 ? void 0 : _d.assignees) === null || _e === void 0 ? void 0 : _e.list) === null || _f === void 0 ? void 0 : _f.length) == 0 &&
+                (!this.featureFlag_groups ||
+                    ((!((_h = (_g = this.responsibilityForm) === null || _g === void 0 ? void 0 : _g.assigneeGroups) === null || _h === void 0 ? void 0 : _h.list) ||
+                        ((_l = (_k = (_j = this.responsibilityForm) === null || _j === void 0 ? void 0 : _j.assigneeGroups) === null || _k === void 0 ? void 0 : _k.list) === null || _l === void 0 ? void 0 : _l.length) == 0) &&
+                        this.featureFlag_groups)))) {
             this.invalidType = 'who';
         }
-        else if (!this.responsibilityForm.frequency || this.responsibilityForm.frequency == '' || this.responsibilityForm.frequency === '' || this.responsibilityForm.frequency === '5~0~0~0') {
+        else if (!this.responsibilityForm.frequency ||
+            this.responsibilityForm.frequency == '' ||
+            this.responsibilityForm.frequency === '' ||
+            this.responsibilityForm.frequency === '5~0~0~0') {
             this.invalidType = 'when';
         }
         else {
             this.invalidType = '';
         }
-        if (!this.responsibilityForm.responsibility.name || this.responsibilityForm.responsibility.name.trim() == ''
-            || (!this.responsibilityForm.frequency || this.responsibilityForm.frequency === '' || this.responsibilityForm.frequency === '5~0~0~0') || (((_m = this.responsibilityForm.assignees.list) === null || _m === void 0 ? void 0 : _m.length) == 0 && (!this.featureFlag_groups || ((!this.responsibilityForm.assigneeGroups.list || ((_o = this.responsibilityForm.assigneeGroups.list) === null || _o === void 0 ? void 0 : _o.length) == 0) && this.featureFlag_groups)))) {
+        if (!this.responsibilityForm.responsibility.name ||
+            this.responsibilityForm.responsibility.name.trim() == '' ||
+            !this.responsibilityForm.frequency ||
+            this.responsibilityForm.frequency === '' ||
+            this.responsibilityForm.frequency === '5~0~0~0' ||
+            (((_m = this.responsibilityForm.assignees.list) === null || _m === void 0 ? void 0 : _m.length) == 0 &&
+                (!this.featureFlag_groups ||
+                    ((!this.responsibilityForm.assigneeGroups.list ||
+                        ((_o = this.responsibilityForm.assigneeGroups.list) === null || _o === void 0 ? void 0 : _o.length) == 0) &&
+                        this.featureFlag_groups)))) {
             return false;
         }
         else {
@@ -5110,22 +5498,26 @@ class WorkflowComplianceComponent {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23;
         this.loader = true;
         this.uiKitService.isLoader = true;
-        let startDate = moment(parseInt(entrustForm.startDate) * 1000).format("YYYY-MM-DD HH:mm:ss");
-        startDate = moment(startDate.split(' ')[0] + " 00:00:00").format("YYYY-MM-DD HH:mm:ss");
-        const rcDetails = ((_a = entrustForm.rc) === null || _a === void 0 ? void 0 : _a.length) > 0 ? entrustForm.rc.map((rc) => {
-            if (rc) {
-                const rcDetailsArr = {
-                    parent_rc_ids: rc.parent_rc_ids,
-                    rc_id: rc.rc_id
-                };
-                return rcDetailsArr;
-            }
-        }) : [];
-        const rcDetailsIdArr = ((_b = entrustForm.rc) === null || _b === void 0 ? void 0 : _b.length) > 0 ? entrustForm.rc.map((rc) => {
-            if (rc) {
-                return rc.rc_id;
-            }
-        }) : [];
+        let startDate = moment(parseInt(entrustForm.startDate) * 1000).format('YYYY-MM-DD HH:mm:ss');
+        startDate = moment(startDate.split(' ')[0] + ' 00:00:00').format('YYYY-MM-DD HH:mm:ss');
+        const rcDetails = ((_a = entrustForm.rc) === null || _a === void 0 ? void 0 : _a.length) > 0
+            ? entrustForm.rc.map((rc) => {
+                if (rc) {
+                    const rcDetailsArr = {
+                        parent_rc_ids: rc.parent_rc_ids,
+                        rc_id: rc.rc_id,
+                    };
+                    return rcDetailsArr;
+                }
+            })
+            : [];
+        const rcDetailsIdArr = ((_b = entrustForm.rc) === null || _b === void 0 ? void 0 : _b.length) > 0
+            ? entrustForm.rc.map((rc) => {
+                if (rc) {
+                    return rc.rc_id;
+                }
+            })
+            : [];
         const moreOptions = this.moreOptions;
         const checkContinuousFailedValue = (details) => {
             const frequencyType = parseInt(details.split('~')[0]);
@@ -5147,7 +5539,7 @@ class WorkflowComplianceComponent {
                     subProgramIds: (_c = ele === null || ele === void 0 ? void 0 : ele.child_id) === null || _c === void 0 ? void 0 : _c.filter((el) => {
                         var _a;
                         return (_a = this.responsibilityForm.category) === null || _a === void 0 ? void 0 : _a.includes(el);
-                    })
+                    }),
                 };
                 linkedProgramIds === null || linkedProgramIds === void 0 ? void 0 : linkedProgramIds.push(program);
                 linkedCategoryIds === null || linkedCategoryIds === void 0 ? void 0 : linkedCategoryIds.push(ele === null || ele === void 0 ? void 0 : ele.category_id);
@@ -5156,49 +5548,88 @@ class WorkflowComplianceComponent {
         let categoryIdsExceptDefault = [];
         categoryIdsExceptDefault = (_f = (_e = this.responsibilityForm) === null || _e === void 0 ? void 0 : _e.category) === null || _f === void 0 ? void 0 : _f.filter((el) => {
             var _a, _b, _c, _d, _e;
-            return (el !== ((_b = (_a = this.responsibilityForm) === null || _a === void 0 ? void 0 : _a.program[0]) === null || _b === void 0 ? void 0 : _b.category_id) && !((_e = (_d = (_c = this.responsibilityForm) === null || _c === void 0 ? void 0 : _c.program[0]) === null || _d === void 0 ? void 0 : _d.child_id) === null || _e === void 0 ? void 0 : _e.includes(el)));
+            return (el !== ((_b = (_a = this.responsibilityForm) === null || _a === void 0 ? void 0 : _a.program[0]) === null || _b === void 0 ? void 0 : _b.category_id) &&
+                !((_e = (_d = (_c = this.responsibilityForm) === null || _c === void 0 ? void 0 : _c.program[0]) === null || _d === void 0 ? void 0 : _d.child_id) === null || _e === void 0 ? void 0 : _e.includes(el)));
         });
-        this.combineUserAndUserGroupMembers((this.mode === 'EDIT' && this.responsibilityForm.assignees.whoCanComplete === 'ALL' && ((_j = (_h = (_g = this.rawResponsibility) === null || _g === void 0 ? void 0 : _g.userGroupIds) === null || _h === void 0 ? void 0 : _h.assigneeAllGroupIds) === null || _j === void 0 ? void 0 : _j.length)));
-        const remarks = (entrustForm.description.replace(/\ /g, '').trim() !== '') ? entrustForm.description : '';
-        const objective = (entrustForm.objective.replace(/\ /g, '').trim() !== '') ? entrustForm.objective : '';
+        this.combineUserAndUserGroupMembers(this.mode === 'EDIT' &&
+            this.responsibilityForm.assignees.whoCanComplete === 'ALL' &&
+            ((_j = (_h = (_g = this.rawResponsibility) === null || _g === void 0 ? void 0 : _g.userGroupIds) === null || _h === void 0 ? void 0 : _h.assigneeAllGroupIds) === null || _j === void 0 ? void 0 : _j.length));
+        const remarks = entrustForm.description.replace(/\ /g, '').trim() !== ''
+            ? entrustForm.description
+            : '';
+        const objective = entrustForm.objective.replace(/\ /g, '').trim() !== ''
+            ? entrustForm.objective
+            : '';
         let payload = {
             app_association: [],
             assigned_to: this.returnIds(this.assigneeUserList, 'employee_id').toString(),
-            program_cat_ids: (moreOptions === null || moreOptions === void 0 ? void 0 : moreOptions.PROGRAM) ? (((_k = entrustForm === null || entrustForm === void 0 ? void 0 : entrustForm.program) === null || _k === void 0 ? void 0 : _k.length) ? [(_l = entrustForm === null || entrustForm === void 0 ? void 0 : entrustForm.program[0]) === null || _l === void 0 ? void 0 : _l.category_id] : []) : [],
+            program_cat_ids: (moreOptions === null || moreOptions === void 0 ? void 0 : moreOptions.PROGRAM)
+                ? ((_k = entrustForm === null || entrustForm === void 0 ? void 0 : entrustForm.program) === null || _k === void 0 ? void 0 : _k.length)
+                    ? [(_l = entrustForm === null || entrustForm === void 0 ? void 0 : entrustForm.program[0]) === null || _l === void 0 ? void 0 : _l.category_id]
+                    : []
+                : [],
             linked_program_ids: linkedProgramIds,
-            linked_category_ids: this.getUniqueIds([...categoryIdsExceptDefault, ...linkedCategoryIds]),
+            linked_category_ids: this.getUniqueIds([
+                ...categoryIdsExceptDefault,
+                ...linkedCategoryIds,
+            ]),
             // category_id: (this.responsibilityForm?.program_selected_ids?.length > 0) ? this.responsibilityForm?.category_id : '',
-            category_id: (((_o = (_m = this.responsibilityForm) === null || _m === void 0 ? void 0 : _m.program_selected_ids) === null || _o === void 0 ? void 0 : _o.length) > 0) ? (_r = this.getUniqueIds([...(_p = this.responsibilityForm) === null || _p === void 0 ? void 0 : _p.category, ...linkedCategoryIds, ...[(_q = entrustForm === null || entrustForm === void 0 ? void 0 : entrustForm.program[0]) === null || _q === void 0 ? void 0 : _q.category_id]])) === null || _r === void 0 ? void 0 : _r.toString() : '',
-            cc_email: (moreOptions.OVERSEER) ? this.returnIds(this.overseerUserList, 'employee_id').toString() : '',
-            checkpoint_description: (moreOptions.CHECKPOINTS) ? entrustForm.checkpointInstruction : '',
-            checkpoint_details: (moreOptions.CHECKPOINTS) ? JSON.stringify(this.responsibilityForm.checkpoints) : '',
+            category_id: ((_o = (_m = this.responsibilityForm) === null || _m === void 0 ? void 0 : _m.program_selected_ids) === null || _o === void 0 ? void 0 : _o.length) > 0
+                ? (_r = this.getUniqueIds([
+                    ...(_p = this.responsibilityForm) === null || _p === void 0 ? void 0 : _p.category,
+                    ...linkedCategoryIds,
+                    ...[(_q = entrustForm === null || entrustForm === void 0 ? void 0 : entrustForm.program[0]) === null || _q === void 0 ? void 0 : _q.category_id],
+                ])) === null || _r === void 0 ? void 0 : _r.toString()
+                : '',
+            cc_email: moreOptions.OVERSEER
+                ? this.returnIds(this.overseerUserList, 'employee_id').toString()
+                : '',
+            checkpoint_description: moreOptions.CHECKPOINTS
+                ? entrustForm.checkpointInstruction
+                : '',
+            checkpoint_details: moreOptions.CHECKPOINTS
+                ? JSON.stringify(this.responsibilityForm.checkpoints)
+                : '',
             checkpoint_flag: 0,
             collaborator_mark_done: 0,
             comment: '',
-            continuous_failed_days: checkContinuousFailedValue(entrustForm.frequency) ? entrustForm.continuous_failed_days : 0,
+            continuous_failed_days: checkContinuousFailedValue(entrustForm.frequency)
+                ? entrustForm.continuous_failed_days
+                : 0,
             cost_of_compliance: '',
             created_by: ((_s = entrustForm.assignors.list) === null || _s === void 0 ? void 0 : _s.length) < 1 ? 0 : this.memberId,
             creation_window: 0,
             custom_tags: JSON.stringify(entrustForm.customTags),
-            entity_tree: (moreOptions.RC) ? ((this.isResponsibilityRcLinkEnabled && this.responsibilityCenterType == 1) ? [] : rcDetails) : [],
+            entity_tree: moreOptions.RC
+                ? this.isResponsibilityRcLinkEnabled &&
+                    this.responsibilityCenterType == 1
+                    ? []
+                    : rcDetails
+                : [],
             entrust_from_risk: this.openedFrom === 'RISK_TREATMENT' ? true : false,
             failed_after_days: entrustForm.failed_after_days,
             failed_time_utc: entrustForm.failed_time_utc,
-            failure_cc_email: (moreOptions.OVERSEER) ? this.returnIds(this.overseerUserNotifyList, 'employee_id').toString() : '',
+            failure_cc_email: moreOptions.OVERSEER
+                ? this.returnIds(this.overseerUserNotifyList, 'employee_id').toString()
+                : '',
             frequency_details: entrustForm.frequency,
-            frequency_time: (_t = entrustForm.timeIn24Hr) !== null && _t !== void 0 ? _t : "23:59:00",
+            frequency_time: (_t = entrustForm.timeIn24Hr) !== null && _t !== void 0 ? _t : '23:59:00',
             grc_object_id: 0,
             grc_relationship: '',
             if_testplan_failed: 0,
             impact: '',
-            isGroupAssignTo: (entrustForm.assignees.whoCanComplete == 'ANY_ONE') ? 1 : 0,
+            isGroupAssignTo: entrustForm.assignees.whoCanComplete == 'ANY_ONE' ? 1 : 0,
             is_key_compliance: entrustForm.responsibility.keyResponsibility ? 1 : 0,
             library_report_id: 0,
             lifecycle_details: (_u = entrustForm.lifecycleDetails) !== null && _u !== void 0 ? _u : '0000-00-00~~0',
-            link_for_details: (moreOptions.FORMATE_EVIDENCE) ? entrustForm.formatAndEvidence.formatLinks : [],
+            link_for_details: moreOptions.FORMATE_EVIDENCE
+                ? entrustForm.formatAndEvidence.formatLinks
+                : [],
             linkages: { compliance: [] },
-            member_id: ((_v = this.returnIds(entrustForm.assignors.list, 'member_id')) === null || _v === void 0 ? void 0 : _v.length) > 0 ? this.returnIds(entrustForm.assignors.list, 'member_id')[0] : this.memberId,
-            objective: (moreOptions.OBJECTIVE) ? objective : '',
+            member_id: ((_v = this.returnIds(entrustForm.assignors.list, 'member_id')) === null || _v === void 0 ? void 0 : _v.length) > 0
+                ? this.returnIds(entrustForm.assignors.list, 'member_id')[0]
+                : this.memberId,
+            objective: moreOptions.OBJECTIVE ? objective : '',
             on_completion_of: entrustForm.reportId ? [entrustForm.reportId] : [],
             on_completion_of_type: 1,
             organisation_id: this.organizationId,
@@ -5208,66 +5639,126 @@ class WorkflowComplianceComponent {
             private_library_id: 0,
             remarks: remarks,
             reminder_before_days: entrustForm.reminder_before_days,
-            report_format: (moreOptions.FORMATE_EVIDENCE) ? entrustForm.formatAndEvidence.formatFiles : [],
+            report_format: moreOptions.FORMATE_EVIDENCE
+                ? entrustForm.formatAndEvidence.formatFiles
+                : [],
             report_format_link: '',
             report_name: entrustForm.responsibility.name,
-            report_upload_flag: entrustForm.formatAndEvidence.evidenceRequired ? 1 : 0,
-            review_after_days: (moreOptions.REVIEWER) ? entrustForm.reviewers.reviewFrequency.reviewCompleteDays === '' ? 0 : Number(entrustForm.reviewers.reviewFrequency.reviewCompleteDays) : 0,
-            review_failed_after_days: (moreOptions.REVIEWER) ? entrustForm.reviewers.reviewFrequency.reviewNOtCompletedDays === '' ? 0 : Number(entrustForm.reviewers.reviewFrequency.reviewNOtCompletedDays) : 0,
-            reviewer_arr: (moreOptions.REVIEWER) ? {
-                level1: {
-                    reviewers: this.setReviewerPayload(this.reviewerUserList, 'list', entrustForm.reviewers.acceptedData, (entrustForm.reviewers.sequentialWorkflow) ? 'SEQUENTIAL' : 'ANYONE'),
-                    type: (entrustForm.reviewers.sequentialWorkflow) ? 'SEQUENTIAL' : 'ANYONE'
-                },
-            } : {},
+            report_upload_flag: entrustForm.formatAndEvidence.evidenceRequired
+                ? 1
+                : 0,
+            review_after_days: moreOptions.REVIEWER
+                ? entrustForm.reviewers.reviewFrequency.reviewCompleteDays === ''
+                    ? 0
+                    : Number(entrustForm.reviewers.reviewFrequency.reviewCompleteDays)
+                : 0,
+            review_failed_after_days: moreOptions.REVIEWER
+                ? entrustForm.reviewers.reviewFrequency.reviewNOtCompletedDays === ''
+                    ? 0
+                    : Number(entrustForm.reviewers.reviewFrequency.reviewNOtCompletedDays)
+                : 0,
+            reviewer_arr: moreOptions.REVIEWER
+                ? {
+                    level1: {
+                        reviewers: this.setReviewerPayload(this.reviewerUserList, 'list', entrustForm.reviewers.acceptedData, entrustForm.reviewers.sequentialWorkflow
+                            ? 'SEQUENTIAL'
+                            : 'ANYONE'),
+                        type: entrustForm.reviewers.sequentialWorkflow
+                            ? 'SEQUENTIAL'
+                            : 'ANYONE',
+                    },
+                }
+                : {},
             userGroupIds: {
-                assigneeAllGroupIds: entrustForm.assignees.whoCanComplete !== 'ANY_ONE' ? this.returnIds((_w = entrustForm === null || entrustForm === void 0 ? void 0 : entrustForm.assigneeGroups) === null || _w === void 0 ? void 0 : _w.list, 'group_id') : [],
-                assigneeAnyoneGroupIds: entrustForm.assignees.whoCanComplete === 'ANY_ONE' ? this.returnIds((_x = entrustForm === null || entrustForm === void 0 ? void 0 : entrustForm.assigneeGroups) === null || _x === void 0 ? void 0 : _x.list, 'group_id') : [],
+                assigneeAllGroupIds: entrustForm.assignees.whoCanComplete !== 'ANY_ONE'
+                    ? this.returnIds((_w = entrustForm === null || entrustForm === void 0 ? void 0 : entrustForm.assigneeGroups) === null || _w === void 0 ? void 0 : _w.list, 'group_id')
+                    : [],
+                assigneeAnyoneGroupIds: entrustForm.assignees.whoCanComplete === 'ANY_ONE'
+                    ? this.returnIds((_x = entrustForm === null || entrustForm === void 0 ? void 0 : entrustForm.assigneeGroups) === null || _x === void 0 ? void 0 : _x.list, 'group_id')
+                    : [],
                 ccEmailGroupIds: (_0 = this.returnIds((_z = (_y = this.responsibilityForm) === null || _y === void 0 ? void 0 : _y.overseersGroups) === null || _z === void 0 ? void 0 : _z.list, 'group_id')) !== null && _0 !== void 0 ? _0 : [],
                 failureCCEmailGroupIds: (_3 = this.returnIds((_2 = (_1 = this.responsibilityForm) === null || _1 === void 0 ? void 0 : _1.overseersGroups) === null || _2 === void 0 ? void 0 : _2.notifyList, 'group_id')) !== null && _3 !== void 0 ? _3 : [],
-                reviewerGroupIds: (_6 = this.returnIds((_5 = (_4 = this.responsibilityForm) === null || _4 === void 0 ? void 0 : _4.groupReviewers) === null || _5 === void 0 ? void 0 : _5.list, 'group_id')) !== null && _6 !== void 0 ? _6 : []
+                reviewerGroupIds: (_6 = this.returnIds((_5 = (_4 = this.responsibilityForm) === null || _4 === void 0 ? void 0 : _4.groupReviewers) === null || _5 === void 0 ? void 0 : _5.list, 'group_id')) !== null && _6 !== void 0 ? _6 : [],
             },
             existingUserIds: {
-                assigneeAllIds: entrustForm.assignees.whoCanComplete !== 'ANY_ONE' ? this.returnIds((_7 = entrustForm === null || entrustForm === void 0 ? void 0 : entrustForm.assignees) === null || _7 === void 0 ? void 0 : _7.list, 'my_member_id') : [],
-                assigneeAnyoneIds: entrustForm.assignees.whoCanComplete === 'ANY_ONE' ? this.returnIds((_8 = entrustForm === null || entrustForm === void 0 ? void 0 : entrustForm.assignees) === null || _8 === void 0 ? void 0 : _8.list, 'my_member_id') : [],
+                assigneeAllIds: entrustForm.assignees.whoCanComplete !== 'ANY_ONE'
+                    ? this.returnIds((_7 = entrustForm === null || entrustForm === void 0 ? void 0 : entrustForm.assignees) === null || _7 === void 0 ? void 0 : _7.list, 'my_member_id')
+                    : [],
+                assigneeAnyoneIds: entrustForm.assignees.whoCanComplete === 'ANY_ONE'
+                    ? this.returnIds((_8 = entrustForm === null || entrustForm === void 0 ? void 0 : entrustForm.assignees) === null || _8 === void 0 ? void 0 : _8.list, 'my_member_id')
+                    : [],
                 ccEmailEmpIds: (_10 = this.returnIds((_9 = entrustForm === null || entrustForm === void 0 ? void 0 : entrustForm.overseers) === null || _9 === void 0 ? void 0 : _9.list, 'employee_id')) !== null && _10 !== void 0 ? _10 : [],
                 failureCCEmailEmpIds: (_12 = this.returnIds((_11 = entrustForm === null || entrustForm === void 0 ? void 0 : entrustForm.overseers) === null || _11 === void 0 ? void 0 : _11.notifyList, 'employee_id')) !== null && _12 !== void 0 ? _12 : [],
-                reviewerIds: (_15 = this.returnIds((_14 = (_13 = this.responsibilityForm) === null || _13 === void 0 ? void 0 : _13.reviewers) === null || _14 === void 0 ? void 0 : _14.list, 'member_id')) !== null && _15 !== void 0 ? _15 : []
+                reviewerIds: (_15 = this.returnIds((_14 = (_13 = this.responsibilityForm) === null || _13 === void 0 ? void 0 : _13.reviewers) === null || _14 === void 0 ? void 0 : _14.list, 'member_id')) !== null && _15 !== void 0 ? _15 : [],
             },
             reviewer_checkpoints: [{ checkpoints: [], instruction: '' }],
             reviewer_id: 0,
             risk_class: this.isRiskEnable ? entrustForm.riskClass : 2,
             risk_ids: '',
-            risk_matrix_data: (moreOptions.RISK_CLASSIFICATION) ? entrustForm.riskMatrix : '0,0,0,0,0,0',
+            risk_matrix_data: moreOptions.RISK_CLASSIFICATION
+                ? entrustForm.riskMatrix
+                : '0,0,0,0,0,0',
             sample_size: 0,
             start_date_utc: startDate,
             statutory_day: 0,
-            test_required_flag: (moreOptions.ASSURANCE) ? (((_16 = entrustForm.assuranceList) === null || _16 === void 0 ? void 0 : _16.length) > 0 ? 1 : 0) : 0,
-            testplan_category_id: (moreOptions.ASSURANCE) ? this.returnIds(entrustForm.assuranceList, 'category_id') : [],
+            test_required_flag: moreOptions.ASSURANCE
+                ? ((_16 = entrustForm.assuranceList) === null || _16 === void 0 ? void 0 : _16.length) > 0
+                    ? 1
+                    : 0
+                : 0,
+            testplan_category_id: moreOptions.ASSURANCE
+                ? this.returnIds(entrustForm.assuranceList, 'category_id')
+                : [],
             testplan_category_manager: '',
-            audit_category_details: moreOptions.REQUIRES_AUDIT && ((_18 = (_17 = this.responsibilityForm) === null || _17 === void 0 ? void 0 : _17.audit_category_details) === null || _18 === void 0 ? void 0 : _18.category_id) ? {
-                category_id: this.responsibilityForm.audit_category_details.category_id,
-                sample: this.selectedSample === 0 ? this.sampleValue : 0,
-                percentage: this.selectedSample === 1 ? this.samplePercentage : 0,
-                frequency_pattern: `1~0~${this.sendAuditRemindersValue}~1`,
-                frequency_time: moment(this.auditTime, 'HH:mm a').format('HH:mm:ss')
-            } : {
-                category_id: 0,
-                sample: 0,
-                percentage: 0,
-                frequency_pattern: ``,
-                frequency_time: ''
-            },
+            audit_category_details: moreOptions.REQUIRES_AUDIT &&
+                ((_18 = (_17 = this.responsibilityForm) === null || _17 === void 0 ? void 0 : _17.audit_category_details) === null || _18 === void 0 ? void 0 : _18.category_id)
+                ? {
+                    category_id: this.responsibilityForm.audit_category_details.category_id,
+                    sample: this.selectedSample === 0 ? this.sampleValue : 0,
+                    percentage: this.selectedSample === 1 ? this.samplePercentage : 0,
+                    frequency_pattern: `1~0~${this.sendAuditRemindersValue}~1`,
+                    frequency_time: moment(this.auditTime, 'HH:mm a').format('HH:mm:ss'),
+                }
+                : {
+                    category_id: 0,
+                    sample: 0,
+                    percentage: 0,
+                    frequency_pattern: ``,
+                    frequency_time: '',
+                },
             assessment: {
-                category_id: moreOptions.ASSESSMENT ? (_19 = entrustForm === null || entrustForm === void 0 ? void 0 : entrustForm.assessment) === null || _19 === void 0 ? void 0 : _19.category_id : '',
-                assessment_id: moreOptions.ASSESSMENT ? (_20 = entrustForm === null || entrustForm === void 0 ? void 0 : entrustForm.assessment) === null || _20 === void 0 ? void 0 : _20.assessment_id : ''
+                category_id: moreOptions.ASSESSMENT
+                    ? (_19 = entrustForm === null || entrustForm === void 0 ? void 0 : entrustForm.assessment) === null || _19 === void 0 ? void 0 : _19.category_id
+                    : '',
+                assessment_id: moreOptions.ASSESSMENT
+                    ? (_20 = entrustForm === null || entrustForm === void 0 ? void 0 : entrustForm.assessment) === null || _20 === void 0 ? void 0 : _20.assessment_id
+                    : '',
             },
-            assessment_checkpoint: moreOptions.CHECKPOINTS_NEW ? (((_21 = Object.keys(entrustForm === null || entrustForm === void 0 ? void 0 : entrustForm.new_checkpoints)) === null || _21 === void 0 ? void 0 : _21.length) > 0 ? entrustForm === null || entrustForm === void 0 ? void 0 : entrustForm.new_checkpoints : {}) : {},
-            questionnaire_type: moreOptions.CHECKPOINTS_NEW ? (((_22 = Object.keys(entrustForm === null || entrustForm === void 0 ? void 0 : entrustForm.new_checkpoints)) === null || _22 === void 0 ? void 0 : _22.length) > 0 ? 'assessment_checkpoint' : (moreOptions.ASSESSMENT && ((_23 = entrustForm === null || entrustForm === void 0 ? void 0 : entrustForm.assessment) === null || _23 === void 0 ? void 0 : _23.category_id) ? 'assessment' : (JSON.stringify(this.responsibilityForm.checkpoints) != '' && moreOptions.CHECKPOINTS ? 'checkpoint' : ''))) : ''
+            assessment_checkpoint: moreOptions.CHECKPOINTS_NEW
+                ? ((_21 = Object.keys(entrustForm === null || entrustForm === void 0 ? void 0 : entrustForm.new_checkpoints)) === null || _21 === void 0 ? void 0 : _21.length) > 0
+                    ? entrustForm === null || entrustForm === void 0 ? void 0 : entrustForm.new_checkpoints
+                    : {}
+                : {},
+            questionnaire_type: moreOptions.CHECKPOINTS_NEW
+                ? ((_22 = Object.keys(entrustForm === null || entrustForm === void 0 ? void 0 : entrustForm.new_checkpoints)) === null || _22 === void 0 ? void 0 : _22.length) > 0
+                    ? 'assessment_checkpoint'
+                    : moreOptions.ASSESSMENT && ((_23 = entrustForm === null || entrustForm === void 0 ? void 0 : entrustForm.assessment) === null || _23 === void 0 ? void 0 : _23.category_id)
+                        ? 'assessment'
+                        : JSON.stringify(this.responsibilityForm.checkpoints) != '' &&
+                            moreOptions.CHECKPOINTS
+                            ? 'checkpoint'
+                            : ''
+                : '',
         };
         if (this.isResponsibilityRcLinkEnabled) {
-            payload['responsibilityCenterType'] = (this.isResponsibilityRcLinkEnabled && moreOptions.RC) ? this.responsibilityCenterType : 0;
-            payload["responsibilityCenterArr"] = (this.isResponsibilityRcLinkEnabled && moreOptions.RC) ? rcDetailsIdArr : [];
+            payload['responsibilityCenterType'] =
+                this.isResponsibilityRcLinkEnabled && moreOptions.RC
+                    ? this.responsibilityCenterType
+                    : 0;
+            payload['responsibilityCenterArr'] =
+                this.isResponsibilityRcLinkEnabled && moreOptions.RC
+                    ? rcDetailsIdArr
+                    : [];
         }
         this.responsibilityPayload = payload;
         if (this.mode == 'CREATE' && !this.isDuplicateEntrust) {
@@ -5281,16 +5772,17 @@ class WorkflowComplianceComponent {
                     this.smileyMessage = `You have entrusted ${res.calculate_no_of_responsibiities} responsibilities. These would be reflected within your account in sometime.`;
                 }
                 if (this.isNotificationPending && payload.created_by == 0) {
-                    this.smileyMessage = 'This responsibility has been added to the notification queue.';
+                    this.smileyMessage =
+                        'This responsibility has been added to the notification queue.';
                 }
                 else {
                     if (payload.created_by > 0) {
-                        this.actionButtons[1].buttonText = "View Responsibilities";
+                        this.actionButtons[1].buttonText = 'View Responsibilities';
                         this.smileyMessage = `You just created a responsibility on behalf ${entrustForm.assignors.list.find((member) => member.member_id === payload.member_id).member_name}`;
                     }
                 }
                 //this.reset();
-            }, err => {
+            }, (err) => {
                 console.log(err);
                 this.loader = false;
                 this.uiKitService.isLoader = false;
@@ -5299,7 +5791,9 @@ class WorkflowComplianceComponent {
         }
         if (this.mode == 'EDIT' || this.isDuplicateEntrust) {
             this.smileyMessage = `The responsibility has been modified.`;
-            this.responsibilityService.updateEntrust(payload, this.responsibilityId, true).subscribe((res) => {
+            this.responsibilityService
+                .updateEntrust(payload, this.responsibilityId, true)
+                .subscribe((res) => {
                 this.responsibilityData = res;
                 this.loader = false;
                 this.uiKitService.isLoader = false;
@@ -5307,7 +5801,7 @@ class WorkflowComplianceComponent {
                 this.uiKitService.isSmileyOn = true;
                 this.isDuplicateEntrust = false;
                 // this.resetForm();
-            }, err => {
+            }, (err) => {
                 console.log(err);
                 this.loader = false;
                 this.uiKitService.isLoader = false;
@@ -5318,14 +5812,19 @@ class WorkflowComplianceComponent {
     uniqueIdUserGroups(totalUserList, selectedGroup, selectedUsers) {
         let groupUserList = this.getGroupsUserEmployeesId(totalUserList, selectedGroup);
         let ids = new Set(selectedUsers.map((user) => user === null || user === void 0 ? void 0 : user.my_member_id));
-        let userList = [...selectedUsers, ...groupUserList.filter((groupUser) => !ids.has(groupUser === null || groupUser === void 0 ? void 0 : groupUser.my_member_id))];
+        let userList = [
+            ...selectedUsers,
+            ...groupUserList.filter((groupUser) => !ids.has(groupUser === null || groupUser === void 0 ? void 0 : groupUser.my_member_id)),
+        ];
         return userList;
     }
     combineUserAndUserGroupMembers(isGroup) {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2;
         if (this.featureFlag_groups) {
-            console.log("this.responsibilityForm?.assigneeGroups?.list ==>", this.allUsersList, (_b = (_a = this.responsibilityForm) === null || _a === void 0 ? void 0 : _a.assigneeGroups) === null || _b === void 0 ? void 0 : _b.list);
-            this.assigneeUserList = isGroup ? [{ employee_id: (_c = this.rawResponsibility) === null || _c === void 0 ? void 0 : _c.assigned_to }] : this.uniqueIdUserGroups(this.allUsersList, (_e = (_d = this.responsibilityForm) === null || _d === void 0 ? void 0 : _d.assigneeGroups) === null || _e === void 0 ? void 0 : _e.list, (_g = (_f = this.responsibilityForm) === null || _f === void 0 ? void 0 : _f.assignees) === null || _g === void 0 ? void 0 : _g.list);
+            console.log('this.responsibilityForm?.assigneeGroups?.list ==>', this.allUsersList, (_b = (_a = this.responsibilityForm) === null || _a === void 0 ? void 0 : _a.assigneeGroups) === null || _b === void 0 ? void 0 : _b.list);
+            this.assigneeUserList = isGroup
+                ? [{ employee_id: (_c = this.rawResponsibility) === null || _c === void 0 ? void 0 : _c.assigned_to }]
+                : this.uniqueIdUserGroups(this.allUsersList, (_e = (_d = this.responsibilityForm) === null || _d === void 0 ? void 0 : _d.assigneeGroups) === null || _e === void 0 ? void 0 : _e.list, (_g = (_f = this.responsibilityForm) === null || _f === void 0 ? void 0 : _f.assignees) === null || _g === void 0 ? void 0 : _g.list);
             this.reviewerUserList = this.uniqueIdUserGroups(this.allUsersList, (_j = (_h = this.responsibilityForm) === null || _h === void 0 ? void 0 : _h.groupReviewers) === null || _j === void 0 ? void 0 : _j.list, (_l = (_k = this.responsibilityForm) === null || _k === void 0 ? void 0 : _k.reviewers) === null || _l === void 0 ? void 0 : _l.list);
             this.overseerUserList = this.uniqueIdUserGroups(this.allUsersList, (_o = (_m = this.responsibilityForm) === null || _m === void 0 ? void 0 : _m.overseersGroups) === null || _o === void 0 ? void 0 : _o.list, (_q = (_p = this.responsibilityForm) === null || _p === void 0 ? void 0 : _p.overseers) === null || _q === void 0 ? void 0 : _q.list);
             this.overseerUserNotifyList = this.uniqueIdUserGroups(this.allUsersList, (_s = (_r = this.responsibilityForm) === null || _r === void 0 ? void 0 : _r.overseersGroups) === null || _s === void 0 ? void 0 : _s.notifyList, (_u = (_t = this.responsibilityForm) === null || _t === void 0 ? void 0 : _t.overseers) === null || _u === void 0 ? void 0 : _u.notifyList);
@@ -5334,7 +5833,8 @@ class WorkflowComplianceComponent {
             this.assigneeUserList = (_w = (_v = this.responsibilityForm) === null || _v === void 0 ? void 0 : _v.assignees) === null || _w === void 0 ? void 0 : _w.list;
             this.reviewerUserList = (_y = (_x = this.responsibilityForm) === null || _x === void 0 ? void 0 : _x.reviewers) === null || _y === void 0 ? void 0 : _y.list;
             this.overseerUserList = (_0 = (_z = this.responsibilityForm) === null || _z === void 0 ? void 0 : _z.overseers) === null || _0 === void 0 ? void 0 : _0.list;
-            this.overseerUserNotifyList = (_2 = (_1 = this.responsibilityForm) === null || _1 === void 0 ? void 0 : _1.overseers) === null || _2 === void 0 ? void 0 : _2.notifyList;
+            this.overseerUserNotifyList =
+                (_2 = (_1 = this.responsibilityForm) === null || _1 === void 0 ? void 0 : _1.overseers) === null || _2 === void 0 ? void 0 : _2.notifyList;
         }
     }
     /**
@@ -5347,7 +5847,7 @@ class WorkflowComplianceComponent {
         this.responsibilityForm = {
             assignors: {
                 enable: false,
-                list: []
+                list: [],
             },
             responsibility: {
                 name: '',
@@ -5355,11 +5855,11 @@ class WorkflowComplianceComponent {
             },
             assigneeGroups: {
                 whoCanComplete: 'ALL',
-                list: []
+                list: [],
             },
             assignees: {
                 whoCanComplete: 'ALL',
-                list: []
+                list: [],
             },
             frequency: '',
             description: '',
@@ -5373,25 +5873,25 @@ class WorkflowComplianceComponent {
                 sequentialWorkflow: true,
                 reviewFrequency: {
                     reviewCompleteDays: 2,
-                    reviewNOtCompletedDays: 2
+                    reviewNOtCompletedDays: 2,
                 },
-                list: []
+                list: [],
             },
             groupReviewers: {
                 sequentialWorkflow: true,
                 reviewFrequency: {
                     reviewCompleteDays: 2,
-                    reviewNOtCompletedDays: 2
+                    reviewNOtCompletedDays: 2,
                 },
-                list: []
+                list: [],
             },
             overseers: {
                 notifyList: [],
-                list: []
+                list: [],
             },
             overseersGroups: {
                 notifyList: [],
-                list: []
+                list: [],
             },
             formatAndEvidence: {
                 formatRequired: false,
@@ -5404,7 +5904,7 @@ class WorkflowComplianceComponent {
             riskClass: 1,
             riskMatrix: '0,0,0,0,0,0',
             program: [],
-            program_selected_ids: []
+            program_selected_ids: [],
         };
         this.moreOptions = {
             OBJECTIVE: false,
@@ -5433,7 +5933,7 @@ class WorkflowComplianceComponent {
             time: '11:59 pm',
             failedTime: '',
             continuous_failed_days: 0,
-            onCompletionReportDetails: {}
+            onCompletionReportDetails: {},
         };
         this.sampleValue = undefined;
         this.samplePercentage = undefined;
@@ -5462,12 +5962,14 @@ class WorkflowComplianceComponent {
         let url;
         let urlSubstring = '';
         this.disconnectRefresh.emit(false);
-        if (this.isNotificationPending && this.responsibilityPayload.created_by == 0) {
+        if (this.isNotificationPending &&
+            this.responsibilityPayload.created_by == 0) {
             if (this.isResponsibilitySimplified) {
                 urlSubstring = 'compliance/manage-responsibility?' + this.url;
             }
             else {
-                urlSubstring = 'compliance/manage-responsibilities/responsibilities-queue';
+                urlSubstring =
+                    'compliance/manage-responsibilities/responsibilities-queue';
             }
         }
         else {
@@ -5519,7 +6021,7 @@ class WorkflowComplianceComponent {
             continuous_failed_days: event.continuous_failed_days,
             startDate: Number(event === null || event === void 0 ? void 0 : event.start_of_day_utc),
             reportId: (_a = event === null || event === void 0 ? void 0 : event.on_completion_of[0]) !== null && _a !== void 0 ? _a : 0,
-            timeIn12hr: this.frequencyService.timeIn12(event.frequency_time != '' ? event.frequency_time : '23:59:00')
+            timeIn12hr: this.frequencyService.timeIn12(event.frequency_time != '' ? event.frequency_time : '23:59:00'),
         };
         let onCompletionReportDetails = this.getOnCompletionReportDetails(event);
         if (onCompletionReportDetails != null) {
@@ -5537,11 +6039,13 @@ class WorkflowComplianceComponent {
         this.frequencyDetails.startDate = event === null || event === void 0 ? void 0 : event.start_of_day_utc;
         this.frequencyDetails.selectedReport = (_a = event === null || event === void 0 ? void 0 : event.on_completion_of[0]) !== null && _a !== void 0 ? _a : 0;
         this.frequencyDetails.dateOfModified = event === null || event === void 0 ? void 0 : event.dom_utc;
-        this.frequencyDetails.continuous_failed_days = event === null || event === void 0 ? void 0 : event.continuous_failed_days;
+        this.frequencyDetails.continuous_failed_days =
+            event === null || event === void 0 ? void 0 : event.continuous_failed_days;
         this.frequencyPlaceholder = event === null || event === void 0 ? void 0 : event.placeholder;
         let onCompletionReportDetails = this.getOnCompletionReportDetails(event);
         if (onCompletionReportDetails != null) {
-            this.frequencyDetails.onCompletionReportDetails = onCompletionReportDetails;
+            this.frequencyDetails.onCompletionReportDetails =
+                onCompletionReportDetails;
         }
     }
     frequencyData(event) {
@@ -5550,7 +6054,8 @@ class WorkflowComplianceComponent {
             this.invalidType = '';
         }
         this.responsibilityForm.frequency = event.pattern;
-        this.responsibilityForm.reminder_before_days = (event.case === "daily") ? 0 : event.window;
+        this.responsibilityForm.reminder_before_days =
+            event.case === 'daily' ? 0 : event.window;
         //this.responsibilityForm.reminder_before_days = event.window;
         this.responsibilityForm.failed_after_days = event.failedAfter;
         this.responsibilityForm.failed_time_utc = event.failed_time_utc;
@@ -5558,7 +6063,8 @@ class WorkflowComplianceComponent {
         this.responsibilityForm.reportId = (_a = event.reportId) !== null && _a !== void 0 ? _a : 0;
         this.responsibilityForm.startDate = event.startFrom;
         this.responsibilityForm.timeIn24Hr = event.timeIn24Hr;
-        this.responsibilityForm.continuous_failed_days = event.continuous_failed_days;
+        this.responsibilityForm.continuous_failed_days =
+            event.continuous_failed_days;
         this.activateSelector('frequency', false);
         let payload = {
             frequency_details: event.pattern,
@@ -5570,7 +6076,7 @@ class WorkflowComplianceComponent {
             on_completion_of: [event.reportId],
             dom_utc: Math.floor(Date.now() / 1000),
             continuous_failed_days: event.continuous_failed_days,
-            placeholder: event.placeholder
+            placeholder: event.placeholder,
         };
         event.frequency_details = event.pattern;
         let onCompletionReportDetails = this.getOnCompletionReportDetails(event);
@@ -5596,7 +6102,9 @@ class WorkflowComplianceComponent {
         try {
             if (res.frequency_details) {
                 const frequencyDetails = res === null || res === void 0 ? void 0 : res.frequency_details.split('~');
-                const frequencyTime = (res === null || res === void 0 ? void 0 : res.frequency_time) === '00:00:00' ? '12:00 am' : this.frequencyService.timeIn12(res === null || res === void 0 ? void 0 : res.frequency_time);
+                const frequencyTime = (res === null || res === void 0 ? void 0 : res.frequency_time) === '00:00:00'
+                    ? '12:00 am'
+                    : this.frequencyService.timeIn12(res === null || res === void 0 ? void 0 : res.frequency_time);
                 switch (parseInt(frequencyDetails[0])) {
                     case 1:
                         this.getDailyPlaceholder(frequencyDetails, frequencyTime);
@@ -5618,10 +6126,22 @@ class WorkflowComplianceComponent {
                         break;
                     case 0:
                         {
-                            const dateObject = new Date(moment(frequencyDetails[1] + '-' + frequencyDetails[2] + '-' + frequencyDetails[3] + ' 00:00:00', 'YYYY-MM-DD HH:mm:ss').unix() * 1000);
+                            const dateObject = new Date(moment(frequencyDetails[1] +
+                                '-' +
+                                frequencyDetails[2] +
+                                '-' +
+                                frequencyDetails[3] +
+                                ' 00:00:00', 'YYYY-MM-DD HH:mm:ss').unix() * 1000);
                             // tslint:disable-next-line: max-line-length
                             this.frequencyPlaceholder =
-                                'One Time ' + dateObject.getDate() + ' ' + this.shortMonth[dateObject.getMonth()] + ' ' + dateObject.getFullYear() + ' by ' + frequencyTime;
+                                'One Time ' +
+                                    dateObject.getDate() +
+                                    ' ' +
+                                    this.shortMonth[dateObject.getMonth()] +
+                                    ' ' +
+                                    dateObject.getFullYear() +
+                                    ' by ' +
+                                    frequencyTime;
                         }
                         break;
                     case 8:
@@ -5630,7 +6150,8 @@ class WorkflowComplianceComponent {
                         break;
                     case 10:
                         {
-                            this.frequencyPlaceholder = 'You have selected an ongoing frequency.';
+                            this.frequencyPlaceholder =
+                                'You have selected an ongoing frequency.';
                         }
                         break;
                     case 6:
@@ -5651,10 +6172,21 @@ class WorkflowComplianceComponent {
      * @param {number} reportId - number
      */
     getOnCompletionOf(frequencyDetails, reportId, onCompletionReportDetails) {
-        this.frequencyPlaceholder = frequencyDetails[3] + ' ' + (parseInt(frequencyDetails[3]) > 1 ? 'days' : 'day') + ' after completion of ';
+        this.frequencyPlaceholder =
+            frequencyDetails[3] +
+                ' ' +
+                (parseInt(frequencyDetails[3]) > 1 ? 'days' : 'day') +
+                ' after completion of ';
         if (onCompletionReportDetails) {
             if (reportId === onCompletionReportDetails.ReportId) {
-                this.frequencyPlaceholder = frequencyDetails[3] + ' ' + (parseInt(frequencyDetails[3]) > 1 ? 'days' : 'day') + ' after completion of ' + (onCompletionReportDetails ? onCompletionReportDetails.report_name : '');
+                this.frequencyPlaceholder =
+                    frequencyDetails[3] +
+                        ' ' +
+                        (parseInt(frequencyDetails[3]) > 1 ? 'days' : 'day') +
+                        ' after completion of ' +
+                        (onCompletionReportDetails
+                            ? onCompletionReportDetails.report_name
+                            : '');
             }
         }
         this.loader = false;
@@ -5674,7 +6206,11 @@ class WorkflowComplianceComponent {
                 this.frequencyPlaceholder = 'Daily by ' + frequencyTime;
             }
             else if (parseInt(frequencyDetails[3]) > 1) {
-                this.frequencyPlaceholder = 'Every ' + parseInt(frequencyDetails[3]) + ' days by ' + frequencyTime;
+                this.frequencyPlaceholder =
+                    'Every ' +
+                        parseInt(frequencyDetails[3]) +
+                        ' days by ' +
+                        frequencyTime;
             }
         }
     }
@@ -5697,16 +6233,25 @@ class WorkflowComplianceComponent {
                 return this.frequencyService.dayName[parseInt(ele) - 1];
             });
             if (parseInt(frequencyDetails[3]) === 1) {
-                this.frequencyPlaceholder = 'Every ' + selectedDay.join() + ' by ' + frequencyTime;
+                this.frequencyPlaceholder =
+                    'Every ' + selectedDay.join() + ' by ' + frequencyTime;
             }
             if (parseInt(frequencyDetails[3]) === 2) {
-                this.frequencyPlaceholder = 'Every alternate ' + selectedDay.join() + ' by ' + frequencyTime;
+                this.frequencyPlaceholder =
+                    'Every alternate ' + selectedDay.join() + ' by ' + frequencyTime;
             }
             if (parseInt(frequencyDetails[3]) === 3) {
-                this.frequencyPlaceholder = 'Every 3rd ' + selectedDay.join() + ' by ' + frequencyTime;
+                this.frequencyPlaceholder =
+                    'Every 3rd ' + selectedDay.join() + ' by ' + frequencyTime;
             }
             if (parseInt(frequencyDetails[3]) > 3) {
-                this.frequencyPlaceholder = 'Every ' + parseInt(frequencyDetails[1]) + 'th ' + selectedDay.join() + ' by ' + frequencyTime;
+                this.frequencyPlaceholder =
+                    'Every ' +
+                        parseInt(frequencyDetails[1]) +
+                        'th ' +
+                        selectedDay.join() +
+                        ' by ' +
+                        frequencyTime;
             }
         }
     }
@@ -5722,25 +6267,49 @@ class WorkflowComplianceComponent {
                 return this.shortMonth[parseInt(ele) - 1];
             });
             if (parseInt(frequencyDetails[1]) === 1) {
-                this.frequencyPlaceholder = '1st of every ' + selectedMonth.join(', ') + ' by ' + frequencyTime;
+                this.frequencyPlaceholder =
+                    '1st of every ' + selectedMonth.join(', ') + ' by ' + frequencyTime;
             }
             else if (parseInt(frequencyDetails[1]) === 2) {
-                this.frequencyPlaceholder = '2nd of every ' + selectedMonth.join(', ') + ' by ' + frequencyTime;
+                this.frequencyPlaceholder =
+                    '2nd of every ' + selectedMonth.join(', ') + ' by ' + frequencyTime;
             }
             else if (parseInt(frequencyDetails[1]) === 3) {
-                this.frequencyPlaceholder = '3rd of every ' + selectedMonth.join(', ') + ' by ' + frequencyTime;
-            }
-            else if (parseInt(frequencyDetails[1]) === 21 || parseInt(frequencyDetails[1]) === 31) {
-                this.frequencyPlaceholder = parseInt(frequencyDetails[1]) + 'st of every ' + selectedMonth.join(', ') + ' by ' + frequencyTime;
+                this.frequencyPlaceholder =
+                    '3rd of every ' + selectedMonth.join(', ') + ' by ' + frequencyTime;
+            }
+            else if (parseInt(frequencyDetails[1]) === 21 ||
+                parseInt(frequencyDetails[1]) === 31) {
+                this.frequencyPlaceholder =
+                    parseInt(frequencyDetails[1]) +
+                        'st of every ' +
+                        selectedMonth.join(', ') +
+                        ' by ' +
+                        frequencyTime;
             }
             else if (parseInt(frequencyDetails[1]) === 22) {
-                this.frequencyPlaceholder = parseInt(frequencyDetails[1]) + 'nd of every ' + selectedMonth.join(', ') + ' by ' + frequencyTime;
+                this.frequencyPlaceholder =
+                    parseInt(frequencyDetails[1]) +
+                        'nd of every ' +
+                        selectedMonth.join(', ') +
+                        ' by ' +
+                        frequencyTime;
             }
             else if (parseInt(frequencyDetails[1]) === 23) {
-                this.frequencyPlaceholder = parseInt(frequencyDetails[1]) + 'rd of every ' + selectedMonth.join(', ') + ' by ' + frequencyTime;
+                this.frequencyPlaceholder =
+                    parseInt(frequencyDetails[1]) +
+                        'rd of every ' +
+                        selectedMonth.join(', ') +
+                        ' by ' +
+                        frequencyTime;
             }
             else if (parseInt(frequencyDetails[1]) > 3) {
-                this.frequencyPlaceholder = parseInt(frequencyDetails[1]) + 'th of every ' + selectedMonth.join(', ') + ' by ' + frequencyTime;
+                this.frequencyPlaceholder =
+                    parseInt(frequencyDetails[1]) +
+                        'th of every ' +
+                        selectedMonth.join(', ') +
+                        ' by ' +
+                        frequencyTime;
             }
         }
     }
@@ -5753,27 +6322,64 @@ class WorkflowComplianceComponent {
      */
     getQuarterlyPlaceholder(frequencyDetails, frequencyTime) {
         {
-            const quarterly = ['January, April, July, October', 'February, May, August, November', ' March, June, September, December'];
+            const quarterly = [
+                'January, April, July, October',
+                'February, May, August, November',
+                ' March, June, September, December',
+            ];
             if (parseInt(frequencyDetails[1]) === 1) {
-                this.frequencyPlaceholder = '1st of every ' + quarterly[parseInt(frequencyDetails[2].split(',')[0]) - 1] + ' by ' + frequencyTime;
+                this.frequencyPlaceholder =
+                    '1st of every ' +
+                        quarterly[parseInt(frequencyDetails[2].split(',')[0]) - 1] +
+                        ' by ' +
+                        frequencyTime;
             }
             else if (parseInt(frequencyDetails[1]) === 2) {
-                this.frequencyPlaceholder = '2nd of every ' + quarterly[parseInt(frequencyDetails[2].split(',')[0]) - 1] + ' by ' + frequencyTime;
+                this.frequencyPlaceholder =
+                    '2nd of every ' +
+                        quarterly[parseInt(frequencyDetails[2].split(',')[0]) - 1] +
+                        ' by ' +
+                        frequencyTime;
             }
             else if (parseInt(frequencyDetails[1]) === 3) {
-                this.frequencyPlaceholder = '3rd of every ' + quarterly[parseInt(frequencyDetails[2].split(',')[0]) - 1] + ' by ' + frequencyTime;
-            }
-            else if (parseInt(frequencyDetails[1]) === 21 || parseInt(frequencyDetails[1]) === 31) {
-                this.frequencyPlaceholder = parseInt(frequencyDetails[1]) + 'st of every ' + quarterly[parseInt(frequencyDetails[2].split(',')[0]) - 1] + ' by ' + frequencyTime;
+                this.frequencyPlaceholder =
+                    '3rd of every ' +
+                        quarterly[parseInt(frequencyDetails[2].split(',')[0]) - 1] +
+                        ' by ' +
+                        frequencyTime;
+            }
+            else if (parseInt(frequencyDetails[1]) === 21 ||
+                parseInt(frequencyDetails[1]) === 31) {
+                this.frequencyPlaceholder =
+                    parseInt(frequencyDetails[1]) +
+                        'st of every ' +
+                        quarterly[parseInt(frequencyDetails[2].split(',')[0]) - 1] +
+                        ' by ' +
+                        frequencyTime;
             }
             else if (parseInt(frequencyDetails[1]) === 22) {
-                this.frequencyPlaceholder = parseInt(frequencyDetails[1]) + 'nd of every ' + quarterly[parseInt(frequencyDetails[2].split(',')[0]) - 1] + ' by ' + frequencyTime;
+                this.frequencyPlaceholder =
+                    parseInt(frequencyDetails[1]) +
+                        'nd of every ' +
+                        quarterly[parseInt(frequencyDetails[2].split(',')[0]) - 1] +
+                        ' by ' +
+                        frequencyTime;
             }
             else if (parseInt(frequencyDetails[1]) === 23) {
-                this.frequencyPlaceholder = parseInt(frequencyDetails[1]) + 'rd of every ' + quarterly[parseInt(frequencyDetails[2].split(',')[0]) - 1] + ' by ' + frequencyTime;
+                this.frequencyPlaceholder =
+                    parseInt(frequencyDetails[1]) +
+                        'rd of every ' +
+                        quarterly[parseInt(frequencyDetails[2].split(',')[0]) - 1] +
+                        ' by ' +
+                        frequencyTime;
             }
             else if (parseInt(frequencyDetails[1]) > 3) {
-                this.frequencyPlaceholder = parseInt(frequencyDetails[1]) + 'th of every ' + quarterly[parseInt(frequencyDetails[2].split(',')[0]) - 1] + ' by ' + frequencyTime;
+                this.frequencyPlaceholder =
+                    parseInt(frequencyDetails[1]) +
+                        'th of every ' +
+                        quarterly[parseInt(frequencyDetails[2].split(',')[0]) - 1] +
+                        ' by ' +
+                        frequencyTime;
             }
         }
     }
@@ -5788,25 +6394,49 @@ class WorkflowComplianceComponent {
                 return this.shortMonth[parseInt(ele) - 1];
             });
             if (parseInt(frequencyDetails[1]) === 1) {
-                this.frequencyPlaceholder = '1st of every ' + selectedMonth.join(', ') + ' by ' + frequencyTime;
+                this.frequencyPlaceholder =
+                    '1st of every ' + selectedMonth.join(', ') + ' by ' + frequencyTime;
             }
             else if (parseInt(frequencyDetails[1]) === 2) {
-                this.frequencyPlaceholder = '2nd of every ' + selectedMonth.join(', ') + ' by ' + frequencyTime;
+                this.frequencyPlaceholder =
+                    '2nd of every ' + selectedMonth.join(', ') + ' by ' + frequencyTime;
             }
             else if (parseInt(frequencyDetails[1]) === 3) {
-                this.frequencyPlaceholder = '3rd of every ' + selectedMonth.join(', ') + ' by ' + frequencyTime;
-            }
-            else if (parseInt(frequencyDetails[1]) === 21 || parseInt(frequencyDetails[1]) === 31) {
-                this.frequencyPlaceholder = parseInt(frequencyDetails[1]) + 'st of every ' + selectedMonth.join(', ') + ' by ' + frequencyTime;
+                this.frequencyPlaceholder =
+                    '3rd of every ' + selectedMonth.join(', ') + ' by ' + frequencyTime;
+            }
+            else if (parseInt(frequencyDetails[1]) === 21 ||
+                parseInt(frequencyDetails[1]) === 31) {
+                this.frequencyPlaceholder =
+                    parseInt(frequencyDetails[1]) +
+                        'st of every ' +
+                        selectedMonth.join(', ') +
+                        ' by ' +
+                        frequencyTime;
             }
             else if (parseInt(frequencyDetails[1]) === 22) {
-                this.frequencyPlaceholder = parseInt(frequencyDetails[1]) + 'nd of every ' + selectedMonth.join(', ') + ' by ' + frequencyTime;
+                this.frequencyPlaceholder =
+                    parseInt(frequencyDetails[1]) +
+                        'nd of every ' +
+                        selectedMonth.join(', ') +
+                        ' by ' +
+                        frequencyTime;
             }
             else if (parseInt(frequencyDetails[1]) === 23) {
-                this.frequencyPlaceholder = parseInt(frequencyDetails[1]) + 'rd of every ' + selectedMonth.join(', ') + ' by ' + frequencyTime;
+                this.frequencyPlaceholder =
+                    parseInt(frequencyDetails[1]) +
+                        'rd of every ' +
+                        selectedMonth.join(', ') +
+                        ' by ' +
+                        frequencyTime;
             }
             else if (parseInt(frequencyDetails[1]) > 3) {
-                this.frequencyPlaceholder = parseInt(frequencyDetails[1]) + 'th of every ' + selectedMonth.join(', ') + ' by ' + frequencyTime;
+                this.frequencyPlaceholder =
+                    parseInt(frequencyDetails[1]) +
+                        'th of every ' +
+                        selectedMonth.join(', ') +
+                        ' by ' +
+                        frequencyTime;
             }
         }
     }
@@ -5824,53 +6454,126 @@ class WorkflowComplianceComponent {
             const yearSequence = parseInt(frequencyDetails[3]) > 0 ? parseInt(frequencyDetails[3]) : 1;
             if (parseInt(frequencyDetails[1]) < 2) {
                 if (parseInt(frequencyDetails[1]) === 1) {
-                    this.frequencyPlaceholder = '1st of every ' + this.shortMonth[parseInt(frequencyDetails[2]) - 1] + ' by ' + frequencyTime;
+                    this.frequencyPlaceholder =
+                        '1st of every ' +
+                            this.shortMonth[parseInt(frequencyDetails[2]) - 1] +
+                            ' by ' +
+                            frequencyTime;
                 }
                 if (parseInt(frequencyDetails[1]) === 2) {
-                    this.frequencyPlaceholder = '2nd of every ' + this.shortMonth[parseInt(frequencyDetails[2]) - 1] + ' by ' + frequencyTime;
+                    this.frequencyPlaceholder =
+                        '2nd of every ' +
+                            this.shortMonth[parseInt(frequencyDetails[2]) - 1] +
+                            ' by ' +
+                            frequencyTime;
                 }
                 if (parseInt(frequencyDetails[1]) === 3) {
-                    this.frequencyPlaceholder = '3rd of every ' + this.shortMonth[parseInt(frequencyDetails[2]) - 1] + ' by ' + frequencyTime;
+                    this.frequencyPlaceholder =
+                        '3rd of every ' +
+                            this.shortMonth[parseInt(frequencyDetails[2]) - 1] +
+                            ' by ' +
+                            frequencyTime;
                 }
                 if (parseInt(frequencyDetails[1]) > 3) {
-                    this.frequencyPlaceholder = parseInt(frequencyDetails[1]) + 'th of every ' + this.shortMonth[parseInt(frequencyDetails[2]) - 1] + ' by ' + frequencyTime;
-                }
-                if (parseInt(frequencyDetails[1]) === 31 || parseInt(frequencyDetails[1]) === 21) {
-                    this.frequencyPlaceholder = parseInt(frequencyDetails[1]) + 'st of every ' + this.shortMonth[parseInt(frequencyDetails[2]) - 1] + ' by ' + frequencyTime;
+                    this.frequencyPlaceholder =
+                        parseInt(frequencyDetails[1]) +
+                            'th of every ' +
+                            this.shortMonth[parseInt(frequencyDetails[2]) - 1] +
+                            ' by ' +
+                            frequencyTime;
+                }
+                if (parseInt(frequencyDetails[1]) === 31 ||
+                    parseInt(frequencyDetails[1]) === 21) {
+                    this.frequencyPlaceholder =
+                        parseInt(frequencyDetails[1]) +
+                            'st of every ' +
+                            this.shortMonth[parseInt(frequencyDetails[2]) - 1] +
+                            ' by ' +
+                            frequencyTime;
                 }
                 if (parseInt(frequencyDetails[1]) === 22) {
-                    this.frequencyPlaceholder = parseInt(frequencyDetails[1]) + 'nd of every ' + this.shortMonth[parseInt(frequencyDetails[2]) - 1] + ' by ' + frequencyTime;
+                    this.frequencyPlaceholder =
+                        parseInt(frequencyDetails[1]) +
+                            'nd of every ' +
+                            this.shortMonth[parseInt(frequencyDetails[2]) - 1] +
+                            ' by ' +
+                            frequencyTime;
                 }
                 if (parseInt(frequencyDetails[1]) === 23) {
-                    this.frequencyPlaceholder = parseInt(frequencyDetails[1]) + 'rd of every ' + this.shortMonth[parseInt(frequencyDetails[2]) - 1] + ' by ' + frequencyTime;
+                    this.frequencyPlaceholder =
+                        parseInt(frequencyDetails[1]) +
+                            'rd of every ' +
+                            this.shortMonth[parseInt(frequencyDetails[2]) - 1] +
+                            ' by ' +
+                            frequencyTime;
                 }
             }
             if (parseInt(frequencyDetails[1]) > 1) {
                 if (parseInt(frequencyDetails[1]) === 1) {
                     // tslint:disable-next-line: max-line-length
-                    this.frequencyPlaceholder = '1st ' + this.shortMonth[parseInt(frequencyDetails[2]) - 1] + ', Interval: every ' + yearSequence + ' years by ' + frequencyTime;
+                    this.frequencyPlaceholder =
+                        '1st ' +
+                            this.shortMonth[parseInt(frequencyDetails[2]) - 1] +
+                            ', Interval: every ' +
+                            yearSequence +
+                            ' years by ' +
+                            frequencyTime;
                 }
                 if (parseInt(frequencyDetails[1]) === 2) {
                     // tslint:disable-next-line: max-line-length
-                    this.frequencyPlaceholder = '2nd ' + this.shortMonth[parseInt(frequencyDetails[2]) - 1] + ', Interval: every ' + yearSequence + ' years by ' + frequencyTime;
+                    this.frequencyPlaceholder =
+                        '2nd ' +
+                            this.shortMonth[parseInt(frequencyDetails[2]) - 1] +
+                            ', Interval: every ' +
+                            yearSequence +
+                            ' years by ' +
+                            frequencyTime;
                 }
                 if (parseInt(frequencyDetails[1]) === 3) {
                     // tslint:disable-next-line: max-line-length
-                    this.frequencyPlaceholder = '3rd ' + this.shortMonth[parseInt(frequencyDetails[2]) - 1] + ', Interval: every ' + yearSequence + ' years by ' + frequencyTime;
+                    this.frequencyPlaceholder =
+                        '3rd ' +
+                            this.shortMonth[parseInt(frequencyDetails[2]) - 1] +
+                            ', Interval: every ' +
+                            yearSequence +
+                            ' years by ' +
+                            frequencyTime;
                 }
                 if (parseInt(frequencyDetails[1]) > 3) {
                     // tslint:disable-next-line: max-line-length
                     this.frequencyPlaceholder =
-                        parseInt(frequencyDetails[1]) + 'th of  ' + this.shortMonth[parseInt(frequencyDetails[2]) - 1] + ', Interval: every ' + yearSequence + ' years by ' + frequencyTime;
-                }
-                if (parseInt(frequencyDetails[1]) === 31 || parseInt(frequencyDetails[1]) === 21) {
-                    this.frequencyPlaceholder = parseInt(frequencyDetails[1]) + 'st of every ' + this.shortMonth[parseInt(frequencyDetails[2]) - 1] + ' by ' + frequencyTime;
+                        parseInt(frequencyDetails[1]) +
+                            'th of  ' +
+                            this.shortMonth[parseInt(frequencyDetails[2]) - 1] +
+                            ', Interval: every ' +
+                            yearSequence +
+                            ' years by ' +
+                            frequencyTime;
+                }
+                if (parseInt(frequencyDetails[1]) === 31 ||
+                    parseInt(frequencyDetails[1]) === 21) {
+                    this.frequencyPlaceholder =
+                        parseInt(frequencyDetails[1]) +
+                            'st of every ' +
+                            this.shortMonth[parseInt(frequencyDetails[2]) - 1] +
+                            ' by ' +
+                            frequencyTime;
                 }
                 if (parseInt(frequencyDetails[1]) === 22) {
-                    this.frequencyPlaceholder = parseInt(frequencyDetails[1]) + 'nd of every ' + this.shortMonth[parseInt(frequencyDetails[2]) - 1] + ' by ' + frequencyTime;
+                    this.frequencyPlaceholder =
+                        parseInt(frequencyDetails[1]) +
+                            'nd of every ' +
+                            this.shortMonth[parseInt(frequencyDetails[2]) - 1] +
+                            ' by ' +
+                            frequencyTime;
                 }
                 if (parseInt(frequencyDetails[1]) === 23) {
-                    this.frequencyPlaceholder = parseInt(frequencyDetails[1]) + 'rd of every ' + this.shortMonth[parseInt(frequencyDetails[2]) - 1] + ' by ' + frequencyTime;
+                    this.frequencyPlaceholder =
+                        parseInt(frequencyDetails[1]) +
+                            'rd of every ' +
+                            this.shortMonth[parseInt(frequencyDetails[2]) - 1] +
+                            ' by ' +
+                            frequencyTime;
                 }
             }
         }
@@ -5880,11 +6583,16 @@ class WorkflowComplianceComponent {
      * @param {any} frequencyDetails - [4,1,1,1]
      */
     getRandomPlaceholder(frequencyDetails, frequencyTime) {
-        const quarterly = ['January, April, July, October', 'February, May, August, November', ' March, June, September, December'];
+        const quarterly = [
+            'January, April, July, October',
+            'February, May, August, November',
+            ' March, June, September, December',
+        ];
         {
             switch (parseInt(frequencyDetails[1])) {
                 case 1:
-                    this.frequencyPlaceholder = 'Every week for ' + frequencyDetails[3] + ' random instances';
+                    this.frequencyPlaceholder =
+                        'Every week for ' + frequencyDetails[3] + ' random instances';
                     break;
                 case 2:
                     this.frequencyPlaceholder =
@@ -5898,10 +6606,16 @@ class WorkflowComplianceComponent {
                             ' random instances';
                     break;
                 case 3:
-                    this.frequencyPlaceholder = 'Every ' + quarterly[parseInt(frequencyDetails[2].split(',')[0]) - 1] + ' for ' + frequencyDetails[3] + ' random instances';
+                    this.frequencyPlaceholder =
+                        'Every ' +
+                            quarterly[parseInt(frequencyDetails[2].split(',')[0]) - 1] +
+                            ' for ' +
+                            frequencyDetails[3] +
+                            ' random instances';
                     break;
                 case 4:
-                    this.frequencyPlaceholder = 'Every year for ' + frequencyDetails[3] + ' random instances';
+                    this.frequencyPlaceholder =
+                        'Every year for ' + frequencyDetails[3] + ' random instances';
             }
         }
     }
@@ -5913,6 +6627,7 @@ class WorkflowComplianceComponent {
     onEditWhat(event) {
         setTimeout(() => {
             var _a, _b;
+            // this will make the execution after the above boolean has changed
             this.isEditWhat = false;
             (_b = (_a = this.whatInput) === null || _a === void 0 ? void 0 : _a.nativeElement) === null || _b === void 0 ? void 0 : _b.focus();
         }, 0);
@@ -5935,7 +6650,8 @@ class WorkflowComplianceComponent {
             checkedMoreOptions.push('PROGRAM');
             this.moreOptions.PROGRAM = true;
         }
-        if (this.responsibilityForm.formatAndEvidence.evidenceRequired || this.responsibilityForm.formatAndEvidence.formatRequired) {
+        if (this.responsibilityForm.formatAndEvidence.evidenceRequired ||
+            this.responsibilityForm.formatAndEvidence.formatRequired) {
             checkedMoreOptions.push('FORMATE_EVIDENCE');
             this.moreOptions.FORMATE_EVIDENCE = true;
         }
@@ -5943,7 +6659,9 @@ class WorkflowComplianceComponent {
             checkedMoreOptions.push('RC');
             this.moreOptions.RC = true;
         }
-        if (this.isResponsibilityRcLinkEnabled && (res === null || res === void 0 ? void 0 : res.responsibilityCenterArr) && ((_c = res === null || res === void 0 ? void 0 : res.responsibilityCenterArr) === null || _c === void 0 ? void 0 : _c.length)) {
+        if (this.isResponsibilityRcLinkEnabled &&
+            (res === null || res === void 0 ? void 0 : res.responsibilityCenterArr) &&
+            ((_c = res === null || res === void 0 ? void 0 : res.responsibilityCenterArr) === null || _c === void 0 ? void 0 : _c.length)) {
             checkedMoreOptions.push('RC');
             this.moreOptions.RC = true;
         }
@@ -5951,11 +6669,15 @@ class WorkflowComplianceComponent {
             checkedMoreOptions.push('CHECKPOINTS');
             this.moreOptions.CHECKPOINTS = true;
         }
-        if (((_g = (_f = (_e = this.responsibilityForm) === null || _e === void 0 ? void 0 : _e.reviewers) === null || _f === void 0 ? void 0 : _f.list) === null || _g === void 0 ? void 0 : _g.length) > 0 || ((_k = (_j = (_h = this.responsibilityForm) === null || _h === void 0 ? void 0 : _h.groupReviewer) === null || _j === void 0 ? void 0 : _j.list) === null || _k === void 0 ? void 0 : _k.length) > 0) {
+        if (((_g = (_f = (_e = this.responsibilityForm) === null || _e === void 0 ? void 0 : _e.reviewers) === null || _f === void 0 ? void 0 : _f.list) === null || _g === void 0 ? void 0 : _g.length) > 0 ||
+            ((_k = (_j = (_h = this.responsibilityForm) === null || _h === void 0 ? void 0 : _h.groupReviewer) === null || _j === void 0 ? void 0 : _j.list) === null || _k === void 0 ? void 0 : _k.length) > 0) {
             checkedMoreOptions.push('REVIEWER');
             this.moreOptions.REVIEWER = true;
         }
-        if (((_o = (_m = (_l = this.responsibilityForm) === null || _l === void 0 ? void 0 : _l.overseers) === null || _m === void 0 ? void 0 : _m.list) === null || _o === void 0 ? void 0 : _o.length) > 0 || ((_r = (_q = (_p = this.responsibilityForm) === null || _p === void 0 ? void 0 : _p.overseers) === null || _q === void 0 ? void 0 : _q.notifyList) === null || _r === void 0 ? void 0 : _r.length) > 0 || ((_u = (_t = (_s = this.responsibilityForm) === null || _s === void 0 ? void 0 : _s.overseersGroups) === null || _t === void 0 ? void 0 : _t.list) === null || _u === void 0 ? void 0 : _u.length) > 0 || ((_x = (_w = (_v = this.responsibilityForm) === null || _v === void 0 ? void 0 : _v.overseersGroups) === null || _w === void 0 ? void 0 : _w.notifyList) === null || _x === void 0 ? void 0 : _x.length) > 0) {
+        if (((_o = (_m = (_l = this.responsibilityForm) === null || _l === void 0 ? void 0 : _l.overseers) === null || _m === void 0 ? void 0 : _m.list) === null || _o === void 0 ? void 0 : _o.length) > 0 ||
+            ((_r = (_q = (_p = this.responsibilityForm) === null || _p === void 0 ? void 0 : _p.overseers) === null || _q === void 0 ? void 0 : _q.notifyList) === null || _r === void 0 ? void 0 : _r.length) > 0 ||
+            ((_u = (_t = (_s = this.responsibilityForm) === null || _s === void 0 ? void 0 : _s.overseersGroups) === null || _t === void 0 ? void 0 : _t.list) === null || _u === void 0 ? void 0 : _u.length) > 0 ||
+            ((_x = (_w = (_v = this.responsibilityForm) === null || _v === void 0 ? void 0 : _v.overseersGroups) === null || _w === void 0 ? void 0 : _w.notifyList) === null || _x === void 0 ? void 0 : _x.length) > 0) {
             checkedMoreOptions.push('OVERSEER');
             this.moreOptions.OVERSEER = true;
         }
@@ -5979,7 +6701,8 @@ class WorkflowComplianceComponent {
     }
     // Format & Evidence
     testFunction() {
-        if (this.responsibilityForm.responsibility.name.trim() !== '' && this.isEditWhat === false) {
+        if (this.responsibilityForm.responsibility.name.trim() !== '' &&
+            this.isEditWhat === false) {
             this.isEditWhat = true;
         }
         if (this.responsibilityForm.description == '<br>') {
@@ -5990,7 +6713,8 @@ class WorkflowComplianceComponent {
         }
     }
     reviewerTypeChange(event) {
-        this.responsibilityForm.reviewers.sequentialWorkflow = event === 'SEQUENTIAL' ? true : false;
+        this.responsibilityForm.reviewers.sequentialWorkflow =
+            event === 'SEQUENTIAL' ? true : false;
     }
     selectedSampleData(event) {
         this.selectedSample = event;
@@ -6014,13 +6738,15 @@ class WorkflowComplianceComponent {
             this.selectedSample = 1;
         }
         this.tempCheckValue = this.selectedSample;
-        this.sendAuditRemindersValue = testPlanCategory.frequency_pattern ? parseInt(testPlanCategory.frequency_pattern.split('~')[2]) : 2;
+        this.sendAuditRemindersValue = testPlanCategory.frequency_pattern
+            ? parseInt(testPlanCategory.frequency_pattern.split('~')[2])
+            : 2;
         this.auditTime = moment(testPlanCategory === null || testPlanCategory === void 0 ? void 0 : testPlanCategory.frequency_time, 'HH:mm:ss').format('HH:mm a');
     }
     //on sample toggle on/off
     checkInputValue(event) {
         let key = event.charCode; //         key = event.keyCode;  (Both can be used)
-        return ((key > 47 && key < 58) || key == 45);
+        return (key > 47 && key < 58) || key == 45;
     }
     switchEnable(event) {
         if (event) {
@@ -6041,7 +6767,9 @@ class WorkflowComplianceComponent {
      * @param assessmentDetails : selected assessment details like it's object id and category_id
      */
     getAssessmentDetails(assessmentDetails, type) {
-        this.responsibilityService.getAssessmentDetailsByID(assessmentDetails.assessment_id).subscribe((res) => {
+        this.responsibilityService
+            .getAssessmentDetailsByID(assessmentDetails.assessment_id)
+            .subscribe((res) => {
             if ((res === null || res === void 0 ? void 0 : res.length) > 0) {
                 if (type === 'assessment') {
                     const categoryDetails = res[0].category.find((ele) => ele._id == assessmentDetails.category_id);
@@ -6052,9 +6780,9 @@ class WorkflowComplianceComponent {
                         assessmentDetails: {
                             id: assessmentDetails.assessment_id,
                             assessment_name: res[0].assessment_name,
-                            questions: res[0].questionsCount
+                            questions: res[0].questionsCount,
                         },
-                        category_details: categoryDetails
+                        category_details: categoryDetails,
                     };
                     this.responsibilityForm.assessment = JSON.parse(JSON.stringify(assessmentData));
                 }
@@ -6073,9 +6801,9 @@ class WorkflowComplianceComponent {
         this.responsibilityForm.checkpoints = [];
     }
     /**
-   *
-   * @param event Assessment details
-   */
+     *
+     * @param event Assessment details
+     */
     postAssessment(event) {
         var _a;
         this.responsibilityForm.new_checkpoints = event.assessmentDetails;
@@ -6115,7 +6843,7 @@ class WorkflowComplianceComponent {
     }
     openAssigneeChangeConfirmation(event) {
         if (event) {
-            this.responsibilityForm.assignees.whoCanComplete = "ANY_ONE";
+            this.responsibilityForm.assignees.whoCanComplete = 'ANY_ONE';
         }
         else {
             this.responsibilityForm.assignees.whoCanComplete = '';
@@ -6127,7 +6855,8 @@ class WorkflowComplianceComponent {
      * @param {any} event - any - the event that is triggered when the user selects a radio button
      */
     onReviewerWorkflowChange(event) {
-        this.responsibilityForm.reviewers.sequentialWorkflow = event === 'sequential' ? true : false;
+        this.responsibilityForm.reviewers.sequentialWorkflow =
+            event === 'sequential' ? true : false;
         if (this.mode === 'EDIT' && this.hasReviewer) {
             this.onReviewerTypeChange.emit(event);
         }
@@ -6510,10 +7239,10 @@ class WorkflowPolicyComponent {
         this.categoriesListLoaded = false;
         this.groupsListLoaded = false;
         this.categoryConfig = {
-            panelTitle: 'Select Category',
-            floatingTextSingular: 'Category selected',
-            floatingTextPlural: 'Categories selected',
-            searchPlaceholder: 'Search Category',
+            panelTitle: 'Select Policy Category',
+            floatingTextSingular: 'Policy Category Selected',
+            floatingTextPlural: 'Policy Categories Selected',
+            searchPlaceholder: 'Search Policy Category',
             searchEnabled: true,
             selectAllEnabled: true,
             workflow: 'policy',
@@ -6584,7 +7313,7 @@ class WorkflowPolicyComponent {
             'linkProgram',
             'isAssessment',
             'owners',
-            'policyAccess'
+            'policyAccess',
         ];
         this.riskClassification = [
             { name: 'LOW', value: 1, class: 'low' },
@@ -6680,7 +7409,8 @@ class WorkflowPolicyComponent {
     }
     ngOnInit() {
         var _a, _b;
-        this.groupEnabled = ((_a = this.feature) === null || _a === void 0 ? void 0 : _a.isFeatureEnabled('ff_policy_groups')) || true;
+        this.groupEnabled =
+            ((_a = this.feature) === null || _a === void 0 ? void 0 : _a.isFeatureEnabled('ff_policy_groups')) || true;
         this.getRCList();
         this.getUsersList();
         this.getCategoriesList();
@@ -6692,7 +7422,9 @@ class WorkflowPolicyComponent {
             if (!res.enable_riskclass) {
                 this.showRiskClassification = false;
             }
-            this.organization_id = res._id;
+            if (res._id) {
+                this.organization_id = res._id;
+            }
         });
         this.member_obj_id = this.authService.getUserDetails()._id;
         this.userInfo = this.authService.getUserDetails().user;
@@ -7209,7 +7941,8 @@ class WorkflowPolicyComponent {
                 break;
             case 'policyAccess':
                 let accessIds, accessGroupIds;
-                this.policyForm.availableOnPortal = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.futureUsersWillSelect;
+                this.policyForm.availableOnPortal =
+                    selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.futureUsersWillSelect;
                 if (this.groupEnabled) {
                     accessIds = this.returnIds(selectedItems.users, 'member_id');
                     accessGroupIds = this.returnIds(selectedItems.groups, 'group_id');
@@ -7752,8 +8485,12 @@ class WorkflowPolicyComponent {
                 ? policy === null || policy === void 0 ? void 0 : policy.businessCycle
                 : undefined,
             policy_access_type: (_k = policy.policy_access_type) !== null && _k !== void 0 ? _k : 0,
-            policy_access_owners: policy.availableOnPortal ? [] : (policyAccessUsersIds !== null && policyAccessUsersIds !== void 0 ? policyAccessUsersIds : []),
-            policy_access_groups: policy.availableOnPortal ? [] : (policyAccessGroupsIds !== null && policyAccessGroupsIds !== void 0 ? policyAccessGroupsIds : []),
+            policy_access_owners: policy.availableOnPortal
+                ? []
+                : policyAccessUsersIds !== null && policyAccessUsersIds !== void 0 ? policyAccessUsersIds : [],
+            policy_access_groups: policy.availableOnPortal
+                ? []
+                : policyAccessGroupsIds !== null && policyAccessGroupsIds !== void 0 ? policyAccessGroupsIds : [],
         };
         if (this.mode == 'CREATE') {
             this.policyService.submitPolicy(payload).subscribe((res) => {
@@ -8176,7 +8913,10 @@ class WorkflowPolicyComponent {
         this.policyForm.policy_access_type = event;
         if (event == 0) {
             // this.policyForm.policy_access_owners = this.usersAccessList;
-            this.saveSelectedList('policyAccess', { users: this.usersAccessList, groups: [] });
+            this.saveSelectedList('policyAccess', {
+                users: this.usersAccessList,
+                groups: [],
+            });
         }
     }
     getUsersAccessListByCategory(categoryDetails) {
@@ -8186,7 +8926,9 @@ class WorkflowPolicyComponent {
         uniqueUsers = uniqBy((_a = categoryDetails === null || categoryDetails === void 0 ? void 0 : categoryDetails.all_managers) === null || _a === void 0 ? void 0 : _a.concat(categoryDetails === null || categoryDetails === void 0 ? void 0 : categoryDetails.all_approvers, categoryDetails === null || categoryDetails === void 0 ? void 0 : categoryDetails.all_authors), 'member_id');
         this.usersAccessList = uniqueUsers;
         this.usersAccessListIds = this.returnIds(this.usersAccessList, 'member_id');
-        uniqueGroupsId = [...new Set((_b = categoryDetails === null || categoryDetails === void 0 ? void 0 : categoryDetails.author_usergroup_ids) === null || _b === void 0 ? void 0 : _b.concat(categoryDetails === null || categoryDetails === void 0 ? void 0 : categoryDetails.owner_usergroup_ids))];
+        uniqueGroupsId = [
+            ...new Set((_b = categoryDetails === null || categoryDetails === void 0 ? void 0 : categoryDetails.author_usergroup_ids) === null || _b === void 0 ? void 0 : _b.concat(categoryDetails === null || categoryDetails === void 0 ? void 0 : categoryDetails.owner_usergroup_ids)),
+        ];
         this.groupsAccessList = this.setList(this.overseerGroupsList, uniqueGroupsId, '_id');
         this.groupsAccessListIds = this.returnIds(this.groupsAccessList, 'group_id');
     }
@@ -8210,7 +8952,7 @@ class WorkflowPolicyComponent {
 WorkflowPolicyComponent.decorators = [
     { type: Component, args: [{
                 selector: 'app-workflow-policy',
-                template: "<!-- <p>workflow-policy works!</p> -->\r\n\r\n<ng-container *ngIf=\"!showCreateDocuments\">\r\n  <div class=\"workflow-policy\">\r\n    <!-- Policy Name -->\r\n    <div\r\n      class=\"form-group-row\"\r\n      [class.disabled]=\"activeSelector && activeSelector !== 'name'\"\r\n    >\r\n      <div class=\"left\" [class.checked]=\"policyForm?.policyName\">\r\n        <img\r\n          src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/what.svg\"\r\n          alt=\"name\"\r\n          *ngIf=\"!policyForm?.policyName || activeSelector === 'name'\"\r\n        />\r\n\r\n        <svg\r\n          *ngIf=\"policyForm?.policyName && activeSelector !== 'name'\"\r\n          class=\"checkIcon\"\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          viewBox=\"0 0 52 52\"\r\n        >\r\n          <circle\r\n            class=\"checkIcon__circle\"\r\n            cx=\"26\"\r\n            cy=\"26\"\r\n            r=\"25\"\r\n            fill=\"none\"\r\n          />\r\n          <path\r\n            class=\"checkIcon__check\"\r\n            fill=\"none\"\r\n            d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n          />\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            Policy Name <span class=\"required\">*</span>\r\n          </label>\r\n          <input\r\n            type=\"text\"\r\n            (keydown)=\"activeSelector = 'name'\"\r\n            (focusin)=\"activateSelector('name', true)\"\r\n            *ngIf=\"policyForm.policyName == '' || activeSelector === 'name'\"\r\n            (focusout)=\"activateSelector('name', false)\"\r\n            [ngModel]=\"policyForm.policyName\"\r\n            (ngModelChange)=\"policyForm.policyName = changeName($event)\"\r\n            placeholder=\"Name this policy\"\r\n          />\r\n          <div\r\n            class=\"selected\"\r\n            *ngIf=\"policyForm.policyName.length && activeSelector !== 'name'\"\r\n          >\r\n            <div class=\"chip-container\">\r\n              <span class=\"value\">{{ policyForm.policyName }}</span>\r\n            </div>\r\n            <button\r\n              class=\"edit\"\r\n              (click)=\"activateSelector('name', true)\"\r\n              type=\"button\"\r\n            >\r\n              <i class=\"icons\">&#xe9ba;</i> Edit\r\n            </button>\r\n          </div>\r\n\r\n          <p\r\n            *ngIf=\"submitted && !policyForm.policyName.trim()\"\r\n            [appScrollInView]=\"true\"\r\n            class=\"error-message\"\r\n          >\r\n            Please enter a name for this policy.\r\n          </p>\r\n          <marx-editor\r\n            [(ngModel)]=\"policyForm.policyNotes\"\r\n            [editorConfig]=\"description\"\r\n          ></marx-editor>\r\n          <!-- <app-cs-switch\r\n            [(ngValue)]=\"policyForm.availableOnPortal\"\r\n            (ngValueChange)=\"availabilityOnPortal($event)\"\r\n          >\r\n            Do you want this policy to be available on the portal?\r\n            <i\r\n              class=\"icons\"\r\n              [appTooltip]=\"\r\n                'The policies that you intend to make accessible to the entire organization can be added to the policy portal. It is like a shared catalog of all active & updated policies that any logged in user can read/download for reference.'\r\n              \"\r\n              placement=\"bottom-right\"\r\n              type=\"white\"\r\n              delay=\"0\"\r\n              [tooltipMandatory]=\"true\"\r\n              >&#xe932;</i\r\n            >\r\n          </app-cs-switch>\r\n          <app-cs-switch\r\n            *ngIf=\"policyForm.availableOnPortal\"\r\n            [(ngValue)]=\"policyForm.acceptSuggestions\"\r\n          >\r\n            Accept suggestions\r\n            <i\r\n              class=\"icons\"\r\n              [appTooltip]=\"\r\n                'If enabled, users can provide improvement suggestions to the policies that are listed on the Policy Portal.'\r\n              \"\r\n              placement=\"bottom-right\"\r\n              type=\"white\"\r\n              delay=\"0\"\r\n              [tooltipMandatory]=\"true\"\r\n              >&#xe932;</i\r\n            ></app-cs-switch> -->\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Policy Category -->\r\n    <div\r\n      class=\"form-group-row\"\r\n      [class.active]=\"activeSelector === 'category'\"\r\n      [class.disabled]=\"\r\n        activeSelector &&\r\n        activeSelector !== 'category' &&\r\n        sideSelectorElements.includes(activeSelector)\r\n      \"\r\n    >\r\n      <div\r\n        class=\"left\"\r\n        [class.checked]=\"policyForm?.selectedCategories?.length > 0\"\r\n      >\r\n        <img\r\n          *ngIf=\"\r\n            policyForm?.selectedCategories?.length == 0 ||\r\n            activeSelector === 'category'\r\n          \"\r\n          src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/category.svg\"\r\n          alt=\"\"\r\n        />\r\n\r\n        <svg\r\n          *ngIf=\"\r\n            policyForm?.selectedCategories?.length > 0 &&\r\n            activeSelector !== 'category'\r\n          \"\r\n          class=\"checkIcon\"\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          viewBox=\"0 0 52 52\"\r\n        >\r\n          <circle\r\n            class=\"checkIcon__circle\"\r\n            cx=\"26\"\r\n            cy=\"26\"\r\n            r=\"25\"\r\n            fill=\"none\"\r\n          />\r\n          <path\r\n            class=\"checkIcon__check\"\r\n            fill=\"none\"\r\n            d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n          />\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            >Policy Category <span class=\"required\">*</span>\r\n          </label>\r\n          <div\r\n            class=\"select\"\r\n            *ngIf=\"policyForm?.selectedCategories?.length == 0\"\r\n          >\r\n            <input\r\n              type=\"text\"\r\n              (click)=\"activateSelector('category', true)\"\r\n              placeholder=\"Select a category for this policy.\"\r\n              readonly\r\n            />\r\n          </div>\r\n\r\n          <div\r\n            class=\"selected\"\r\n            *ngIf=\"policyForm?.selectedCategories?.length > 0\"\r\n          >\r\n            <div\r\n              class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n            >\r\n              <ng-container\r\n                *ngFor=\"\r\n                  let category of policyForm?.selectedCategories?.slice(0, 1)\r\n                \"\r\n              >\r\n                <i\r\n                  (click)=\"remove('category', category)\"\r\n                  class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                  >&#xe9ae;</i\r\n                >\r\n                <span\r\n                  class=\"chipName vx-fs-11 vx-label-txt\"\r\n                  [appTooltip]=\"category.item_name\"\r\n                  placement=\"bottom-left\"\r\n                  delay=\"0\"\r\n                  type=\"black\"\r\n                  [tooltipMandatory]=\"false\"\r\n                  >{{ category.item_name }}</span\r\n                >\r\n              </ng-container>\r\n              <button\r\n                class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n                *ngIf=\"policyForm?.selectedCategories?.length > 1\"\r\n                type=\"button\"\r\n                appPopover\r\n                (click)=\"category.popover()\"\r\n                placement=\"right\"\r\n              >\r\n                +{{ policyForm?.selectedCategories?.slice(1).length }}\r\n              </button>\r\n            </div>\r\n\r\n            <!-- <div class=\"chip-container\" [class.more-one]=\"policyForm?.selectedCategories?.length>1\"\r\n                          [class.plus]=\"policyForm?.selectedCategories?.length>2\">\r\n                          <span class=\"chip\" *ngFor=\"let category of policyForm?.selectedCategories?.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=\"policyForm?.selectedCategories?.length > 2\" type=\"button\"\r\n                              appPopover (click)=\"category.popover()\" placement=\"right\">+\r\n                              {{policyForm?.selectedCategories?.slice(2).length}}</button>\r\n                      </div> -->\r\n            <button\r\n              *ngIf=\"activeSelector !== 'category'\"\r\n              class=\"edit\"\r\n              type=\"button\"\r\n              (click)=\"activateSelector('category', true)\"\r\n            >\r\n              <i class=\"icons\">&#xe9ba;</i> Edit\r\n            </button>\r\n          </div>\r\n          <app-popover #category [dontCloseonClick]=\"true\">\r\n            <div class=\"wf-action-list\">\r\n              <ul class=\"action-item\">\r\n                <li\r\n                  *ngFor=\"\r\n                    let category of policyForm?.selectedCategories | slice : 1;\r\n                    let j = index\r\n                  \"\r\n                >\r\n                  <div class=\"avatar-card\">\r\n                    <span class=\"value\">\r\n                      <i class=\"icons\" (click)=\"remove('category', category)\"\r\n                        >&#xe90d;</i\r\n                      >\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          <p\r\n            *ngIf=\"submitted && policyForm?.selectedCategories?.length == 0\"\r\n            [appScrollInView]=\"true\"\r\n            class=\"error-message\"\r\n          >\r\n            Please select the category for this policy.\r\n          </p>\r\n        </div>\r\n\r\n        <div class=\"vx-form-group\" *ngIf=\"policyForm?.customTags?.length > 0\">\r\n          <ng-container *ngFor=\"let tag of policyForm?.customTags\">\r\n            <label class=\"vx-control-panel vx-mt-2\">{{ tag.tagname }}</label>\r\n            <input\r\n              type=\"text\"\r\n              [(ngModel)]=\"tag.value\"\r\n              placeholder=\"{{ tag.tagname }}\"\r\n            />\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Effective Date -->\r\n    <div\r\n      class=\"form-group-row\"\r\n      [class.disabled]=\"activeSelector && activeSelector !== 'name'\"\r\n    >\r\n      <div class=\"left\" [class.checked]=\"false\">\r\n        <img\r\n          src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/when.svg\"\r\n          alt=\"\"\r\n        />\r\n\r\n        <svg\r\n          *ngIf=\"false\"\r\n          class=\"checkIcon\"\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          viewBox=\"0 0 52 52\"\r\n        >\r\n          <circle\r\n            class=\"checkIcon__circle\"\r\n            cx=\"26\"\r\n            cy=\"26\"\r\n            r=\"25\"\r\n            fill=\"none\"\r\n          />\r\n          <path\r\n            class=\"checkIcon__check\"\r\n            fill=\"none\"\r\n            d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n          />\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\">Effective Date</label>\r\n          <div class=\"date-time-picker\">\r\n            <div class=\"picker-group\">\r\n              <input\r\n                type=\"text\"\r\n                readonly\r\n                placeholder=\"Select the effective date of the policy.\"\r\n                [value]=\"policyForm.policyDueDate | date : 'dd MMM yyyy'\"\r\n                (click)=\"openDatePicker()\"\r\n              />\r\n              <i class=\"icons\">&#xe92d;</i>\r\n              <dp-date-picker\r\n                #datePicker\r\n                (onSelect)=\"datePickerOverlay = false; closeDatePicker($event)\"\r\n                [config]=\"dateConfig\"\r\n                [(ngModel)]=\"policyForm.policyDueDate\"\r\n              >\r\n              </dp-date-picker>\r\n              <div\r\n                class=\"vx-overlay\"\r\n                (click)=\"closeDatePicker($event)\"\r\n                *ngIf=\"datePickerOverlay\"\r\n              ></div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Policy Owner -->\r\n    <div\r\n      class=\"form-group-row\"\r\n      [class.active]=\"activeSelector === 'owners'\"\r\n      [class.disabled]=\"\r\n        activeSelector &&\r\n        activeSelector !== 'owners' &&\r\n        sideSelectorElements.includes(activeSelector)\r\n      \"\r\n    >\r\n      <div class=\"left\" [class.checked]=\"policyForm.policy_owners?.length\">\r\n        <img\r\n          *ngIf=\"!policyForm.policy_owners?.length\"\r\n          src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/im-creating.svg\"\r\n          alt=\"\"\r\n        />\r\n\r\n        <svg\r\n          *ngIf=\"policyForm.policy_owners?.length\"\r\n          class=\"checkIcon\"\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          viewBox=\"0 0 52 52\"\r\n        >\r\n          <circle\r\n            class=\"checkIcon__circle\"\r\n            cx=\"26\"\r\n            cy=\"26\"\r\n            r=\"25\"\r\n            fill=\"none\"\r\n          />\r\n          <path\r\n            class=\"checkIcon__check\"\r\n            fill=\"none\"\r\n            d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n          />\r\n        </svg>\r\n      </div>\r\n      <div class=\"right\">\r\n        <div class=\"vx-form-group\">\r\n          <div class=\"vx-d-flex vx-align-center vx-justify-between\">\r\n            <label class=\"vx-control-panel\">POLICY OWNER(S)</label>\r\n          </div>\r\n          <div\r\n            *ngIf=\"!policyForm.policy_owners?.length\"\r\n            (click)=\"activateSelector('owners', true)\"\r\n            class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\r\n            [class.disabled]=\"!policyForm?.selectedCategories?.length\"\r\n          >\r\n            <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\r\n              Select owners for this policy.\r\n            </div>\r\n          </div>\r\n\r\n          <div\r\n            *ngIf=\"policyForm.policy_owners?.length\"\r\n            class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\r\n          >\r\n            <div class=\"vx-d-flex vx-align-center\">\r\n              <div\r\n                class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n              >\r\n                <i\r\n                  (click)=\"remove('owners', policyForm?.policy_owners[0], 0)\"\r\n                  class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                  >&#xe9ae;</i\r\n                >\r\n                <span\r\n                  class=\"chipName vx-fs-11 vx-label-txt\"\r\n                  [appTooltip]=\"policyForm?.policy_owners[0]?.member_name\"\r\n                  placement=\"bottom-left\"\r\n                  delay=\"0\"\r\n                  type=\"black\"\r\n                  [tooltipMandatory]=\"false\"\r\n                  >{{ policyForm?.policy_owners[0]?.member_name }}</span\r\n                >\r\n\r\n                <button\r\n                  *ngIf=\"policyForm?.policy_owners?.length > 1\"\r\n                  class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 greenBg\"\r\n                  appPopover\r\n                  (click)=\"policyUserPopover.popover()\"\r\n                  placement=\"right\"\r\n                >\r\n                  + {{ policyForm?.policy_owners.length - 1 }}\r\n                </button>\r\n              </div>\r\n              <div\r\n                *ngIf=\"false\"\r\n                class=\"vx-fs-12 vx-paragraph-txt vx-ml-1 vx-mr-1\"\r\n              >\r\n                &\r\n              </div>\r\n              <div\r\n                *ngIf=\"false\"\r\n                class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n              >\r\n                <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                  >&#xe9ae;</i\r\n                >\r\n                <span\r\n                  class=\"chipName vx-fs-11 vx-label-txt\"\r\n                  [appTooltip]=\"'Samantha Jones'\"\r\n                  placement=\"bottom-left\"\r\n                  delay=\"0\"\r\n                  type=\"black\"\r\n                  [tooltipMandatory]=\"false\"\r\n                  >Samantha Jones</span\r\n                >\r\n                <button\r\n                  class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n                  appPopover\r\n                  (click)=\"policyGroupPopover.popover()\"\r\n                  placement=\"right\"\r\n                >\r\n                  +4\r\n                </button>\r\n              </div>\r\n              <app-popover #policyUserPopover [dontCloseonClick]=\"true\">\r\n                <div class=\"wf-action-list\">\r\n                  <ul class=\"action-item\">\r\n                    <li\r\n                      *ngFor=\"\r\n                        let owner of policyForm?.policy_owners | slice : 1;\r\n                        let i = index\r\n                      \"\r\n                    >\r\n                      <div class=\"avatar-card\">\r\n                        <span\r\n                          class=\"value\"\r\n                          [appTooltip]=\"owner?.member_name\"\r\n                          placement=\"bottom-left\"\r\n                          delay=\"0\"\r\n                          type=\"black\"\r\n                          [tooltipMandatory]=\"false\"\r\n                        >\r\n                          <i\r\n                            (click)=\"remove('owners', owner, i + 1)\"\r\n                            class=\"icons\"\r\n                            >&#xe90d;</i\r\n                          >\r\n                          {{ owner?.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 #policyGroupPopover [dontCloseonClick]=\"true\">\r\n                <div class=\"wf-action-list\">\r\n                  <ul class=\"action-item\">\r\n                    <li *ngFor=\"let data of [1, 1, 1, 1, 1, 1, 1]\">\r\n                      <div class=\"avatar-card\">\r\n                        <span\r\n                          class=\"value\"\r\n                          [appTooltip]=\"'Harshvardhan Kariwala'\"\r\n                          placement=\"bottom-left\"\r\n                          delay=\"0\"\r\n                          type=\"black\"\r\n                          [tooltipMandatory]=\"false\"\r\n                        >\r\n                          <i class=\"icons\">&#xe90d;</i>\r\n                          Harshvardhan Kariwala\r\n                        </span>\r\n                      </div>\r\n                    </li>\r\n                  </ul>\r\n                </div>\r\n              </app-popover>\r\n            </div>\r\n            <button\r\n              (click)=\"activateSelector('owners', true)\"\r\n              class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\r\n            >\r\n              <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\r\n            </button>\r\n          </div>\r\n          <p\r\n            *ngIf=\"submitted && !policyForm?.policy_owners?.length\"\r\n            [appScrollInView]=\"true\"\r\n            class=\"error-message\"\r\n          >\r\n            Select owners for this policy.\r\n          </p>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Review -->\r\n    <div\r\n      class=\"form-group-row\"\r\n      [class.active]=\"\r\n        activeSelector === 'reviewer' || activeSelector === 'reviewerFrequency'\r\n      \"\r\n      [class.disabled]=\"\r\n        activeSelector &&\r\n        activeSelector !== 'reviewer' &&\r\n        activeSelector !== 'reviewerFrequency' &&\r\n        sideSelectorElements.includes(activeSelector)\r\n      \"\r\n    >\r\n      <div class=\"left\" [class.checked]=\"policyForm?.addReviewers\">\r\n        <img\r\n          *ngIf=\"!policyForm?.addReviewers\"\r\n          src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/reviewer.svg\"\r\n          alt=\"\"\r\n        />\r\n\r\n        <svg\r\n          *ngIf=\"policyForm?.addReviewers\"\r\n          class=\"checkIcon\"\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          viewBox=\"0 0 52 52\"\r\n        >\r\n          <circle\r\n            class=\"checkIcon__circle\"\r\n            cx=\"26\"\r\n            cy=\"26\"\r\n            r=\"25\"\r\n            fill=\"none\"\r\n          />\r\n          <path\r\n            class=\"checkIcon__check\"\r\n            fill=\"none\"\r\n            d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n          />\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\">REVIEW</label>\r\n          <div\r\n            class=\"reviewSelection vx-p-3 vx-pb-0\"\r\n            [class.disabled]=\"\r\n              activeSelector && sideSelectorElements.includes(activeSelector)\r\n            \"\r\n          >\r\n            <div class=\"vx-fs-13 vx-paragraph-txt vx-mb-1\">\r\n              Does this policy need to be reviewed?\r\n            </div>\r\n            <app-cs-radio\r\n              name=\"review-type\"\r\n              [checked]=\"policyForm?.addReviewers\"\r\n              (checkedEvent)=\"typeSelected(true)\"\r\n              ><div class=\"vx-fs-11 vx-fw-500 vx-paragraph-txt vx-mr-3\">\r\n                YES\r\n              </div></app-cs-radio\r\n            >\r\n            <app-cs-radio\r\n              name=\"review-type\"\r\n              [checked]=\"!policyForm?.addReviewers\"\r\n              (checkedEvent)=\"typeSelected(false)\"\r\n              ><div class=\"vx-fs-11 vx-fw-500 vx-paragraph-txt vx-mr-3\">\r\n                NO\r\n              </div></app-cs-radio\r\n            >\r\n          </div>\r\n\r\n          <ng-container *ngIf=\"policyForm?.addReviewers\">\r\n            <label class=\"vx-control-panel vx-mt-2\">REVIEWER</label>\r\n            <div\r\n              class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\r\n              *ngIf=\"policyForm?.selectedReviewers?.length == 0\"\r\n              [appScrollInView]=\"scrollToBottom\"\r\n              [class.active]=\"activeSelector === 'reviewer'\"\r\n              [class.disabled]=\"\r\n                activeSelector &&\r\n                activeSelector !== 'reviewer' &&\r\n                sideSelectorElements.includes(activeSelector)\r\n              \"\r\n              (click)=\"activateSelector('reviewer', true)\"\r\n            >\r\n              <div\r\n                class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\r\n              >\r\n                Select the person responsible for reviewing this policy\r\n              </div>\r\n            </div>\r\n\r\n            <div\r\n              class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\r\n              *ngIf=\"policyForm?.selectedReviewers?.length > 0\"\r\n              [class.active]=\"activeSelector === 'reviewer'\"\r\n              [class.disabled]=\"\r\n                activeSelector &&\r\n                activeSelector !== 'reviewer' &&\r\n                sideSelectorElements.includes(activeSelector)\r\n              \"\r\n            >\r\n              <div\r\n                class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n                *ngFor=\"let reviewer of policyForm?.selectedReviewers\"\r\n              >\r\n                <i\r\n                  (click)=\"remove('reviewer', reviewer)\"\r\n                  class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\"\r\n                  >&#xe9ae;</i\r\n                >\r\n                <span\r\n                  class=\"chipName vx-fs-11 vx-label-txt\"\r\n                  [appTooltip]=\"'Samantha Jones'\"\r\n                  placement=\"bottom-left\"\r\n                  delay=\"0\"\r\n                  type=\"black\"\r\n                  [tooltipMandatory]=\"false\"\r\n                >\r\n                  {{ reviewer?.member_name }}</span\r\n                >\r\n              </div>\r\n              <button\r\n                class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\r\n                *ngIf=\"activeSelector !== 'reviewer'\"\r\n                (click)=\"activateSelector('reviewer', true)\"\r\n              >\r\n                <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\r\n              </button>\r\n            </div>\r\n            <label class=\"vx-control-panel vx-mt-3\">REVIEW FREQUENCY</label>\r\n            <div\r\n              *ngIf=\"policyForm?.review_frequency_details == ''\"\r\n              class=\"selectButton vx-pl-3 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\r\n              [class.active]=\"activeSelector === 'reviewerFrequency'\"\r\n              [class.disabled]=\"\r\n                activeSelector &&\r\n                activeSelector !== 'reviewerFrequency' &&\r\n                sideSelectorElements.includes(activeSelector)\r\n              \"\r\n              (click)=\"activateSelector('reviewerFrequency', true)\"\r\n            >\r\n              <div\r\n                class=\"selectButtonPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\r\n              >\r\n                When does this policy needs to be reviewed?\r\n              </div>\r\n              <div\r\n                (click)=\"activateSelector('reviewerFrequency', true)\"\r\n                class=\"vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase\"\r\n              >\r\n                SET A FREQUENCY\r\n              </div>\r\n            </div>\r\n\r\n            <div\r\n              *ngIf=\"policyForm?.review_frequency_details != ''\"\r\n              class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\r\n              [class.disabled]=\"\r\n                activeSelector &&\r\n                activeSelector !== 'reviewerFrequency' &&\r\n                sideSelectorElements.includes(activeSelector)\r\n              \"\r\n              [class.active]=\"activeSelector === 'reviewerFrequency'\"\r\n            >\r\n              <div\r\n                class=\"selectBoxText vx-fs-13 vx-paragraph-txt\"\r\n                [appTooltip]=\"reviewerFrequencyPlaceholder\"\r\n                placement=\"bottom-left\"\r\n                delay=\"0\"\r\n                type=\"black\"\r\n                [tooltipMandatory]=\"false\"\r\n              >\r\n                {{ reviewerFrequencyPlaceholder }}\r\n              </div>\r\n              <button\r\n                *ngIf=\"activeSelector !== 'reviewerFrequency'\"\r\n                (click)=\"activateSelector('reviewerFrequency', true)\"\r\n                class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\r\n              >\r\n                <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\r\n              </button>\r\n            </div>\r\n            <p\r\n              *ngIf=\"\r\n                submitted &&\r\n                policyForm?.selectedReviewers?.length > 0 &&\r\n                !policyForm?.review_frequency_details\r\n              \"\r\n              class=\"error-message\"\r\n              [appScrollInView]=\"true\"\r\n            >\r\n              Select the review schedule for this policy.\r\n            </p>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- New Approval Workflow -->\r\n    <div\r\n      class=\"form-group-row\"\r\n      [class.active]=\"activeSelector === 'approvers'\"\r\n      [class.disabled]=\"\r\n        activeSelector &&\r\n        activeSelector !== 'approvers' &&\r\n        sideSelectorElements.includes(activeSelector)\r\n      \"\r\n    >\r\n      <div\r\n        class=\"left\"\r\n        [class.checked]=\"policyForm?.selectedApprovers?.length > 0\"\r\n      >\r\n        <img\r\n          *ngIf=\"\r\n            policyForm?.selectedApprovers?.length == 0 ||\r\n            activeSelector === 'approvers'\r\n          \"\r\n          src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/approval.svg\"\r\n          alt=\"im\"\r\n        />\r\n\r\n        <svg\r\n          *ngIf=\"\r\n            policyForm?.selectedApprovers?.length > 0 &&\r\n            activeSelector !== 'approvers'\r\n          \"\r\n          class=\"checkIcon\"\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          viewBox=\"0 0 52 52\"\r\n        >\r\n          <circle\r\n            class=\"checkIcon__circle\"\r\n            cx=\"26\"\r\n            cy=\"26\"\r\n            r=\"25\"\r\n            fill=\"none\"\r\n          />\r\n          <path\r\n            class=\"checkIcon__check\"\r\n            fill=\"none\"\r\n            d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n          />\r\n        </svg>\r\n      </div>\r\n      <div class=\"right\" [class.disabled]=\"policyApprovalFlag !== 0\">\r\n        <div class=\"vx-form-group\">\r\n          <div class=\"vx-d-flex vx-align-center vx-justify-between\">\r\n            <label class=\"vx-control-panel\"\r\n              >APPROVAL <span class=\"required\">*</span></label\r\n            >\r\n            <button\r\n              (click)=\"\r\n                createApprovalWorkflow(); activateSelector('approvers', true)\r\n              \"\r\n              [class.disabled]=\"!policyForm?.selectedCategories?.length\"\r\n              class=\"createNewBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0\"\r\n            >\r\n              CREATE A NEW APPROVAL WORKFLOW\r\n            </button>\r\n          </div>\r\n          <div\r\n            *ngIf=\"\r\n              selectedWorkflow?.length === 0 ||\r\n              !selectedWorkflow[0]?.workflow_name\r\n            \"\r\n            (click)=\"\r\n              clickApprovalWorkflow(true); activateSelector('approvers', true)\r\n            \"\r\n            class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\r\n            [class.disabled]=\"!policyForm?.selectedCategories?.length\"\r\n          >\r\n            <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\r\n              Select the approval workflow for this policy\r\n            </div>\r\n          </div>\r\n          <div\r\n            *ngIf=\"\r\n              selectedWorkflow?.length > 0 && selectedWorkflow[0]?.workflow_name\r\n            \"\r\n            class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-mb-2\"\r\n          >\r\n            <div\r\n              class=\"vx-d-flex vx-align-center vx-justify-between vx-mt-2 vx-mb-2\"\r\n            >\r\n              <div\r\n                class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n              >\r\n                <i\r\n                  (click)=\"removeWorkflow()\"\r\n                  class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                  >&#xe9ae;</i\r\n                >\r\n                <span\r\n                  class=\"chipName vx-fs-11 vx-label-txt\"\r\n                  [appTooltip]=\"selectedWorkflow[0]?.workflow_name\"\r\n                  placement=\"bottom-left\"\r\n                  delay=\"0\"\r\n                  type=\"black\"\r\n                  [tooltipMandatory]=\"false\"\r\n                  >{{ selectedWorkflow[0]?.workflow_name }}</span\r\n                >\r\n              </div>\r\n              <button\r\n                (click)=\"editWorkflow(selectedWorkflow[0])\"\r\n                class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\r\n              >\r\n                <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\r\n              </button>\r\n            </div>\r\n          </div>\r\n          <ng-container *ngIf=\"selectedWorkflow?.length > 0\">\r\n            <div\r\n              *ngFor=\"\r\n                let approval of selectedWorkflow[0]?.approval_workflow;\r\n                let approvalIndex = index\r\n              \"\r\n              class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between vx-mb-2\"\r\n            >\r\n              <div class=\"vx-d-flex vx-align-center\">\r\n                <div class=\"level-left vx-d-flex vx-align-center\">\r\n                  <div class=\"vx-d-block\">\r\n                    <div\r\n                      class=\"level-name vx-fs-9 vx-fw-500 vx-paragraph-txt vx-tt-uppercase vx-lh-3\"\r\n                      [appTooltip]=\"\r\n                        approval?.alias_name\r\n                          ? approval?.alias_name\r\n                          : approval?.level1\r\n                      \"\r\n                      placement=\"bottom-left\"\r\n                      delay=\"0\"\r\n                      type=\"black\"\r\n                      [tooltipMandatory]=\"false\"\r\n                    >\r\n                      {{\r\n                        approval?.alias_name\r\n                          ? approval?.alias_name\r\n                          : approval?.level1\r\n                      }}\r\n                    </div>\r\n                    <div\r\n                      class=\"vx-fs-9 vx-fw-500 vx-label-txt vx-tt-uppercase vx-lh-3\"\r\n                    >\r\n                      {{\r\n                        approval?.type === \"ROUNDROBIN\"\r\n                          ? \"ROUND-ROBIN\"\r\n                          : approval?.type === \"ANYONE\"\r\n                          ? \"ANY ONE\"\r\n                          : approval?.type\r\n                      }}\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n                <div\r\n                  class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2 vx-ml-2\"\r\n                >\r\n                  <!-- <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                    >&#xe9ae;</i\r\n                  > -->\r\n                  <div\r\n                    *ngIf=\"\r\n                      approval?.type?.toLowerCase() === 'sequential' &&\r\n                      approval?.approvers?.length < 2\r\n                    \"\r\n                    class=\"workflowLavel vx-fs-11 vx-fw-500 vx-pl-1 vx-pr-1 vx-lh-4 vx-mr-1 vx-text-center\"\r\n                  >\r\n                    {{ 1 == approval?.approvers?.length ? \"Final\" : 1 }}\r\n                  </div>\r\n                  <div\r\n                    *ngIf=\"\r\n                      approval?.approvers?.length > 1 &&\r\n                      approval?.type?.toLowerCase() === 'sequential'\r\n                    \"\r\n                    class=\"workflowLavel vx-fs-11 vx-fw-500 vx-pl-1 vx-pr-1 vx-lh-4 vx-mr-1 vx-text-center\"\r\n                  >\r\n                    1\r\n                  </div>\r\n                  <span\r\n                    class=\"chipName vx-fs-11 vx-label-txt\"\r\n                    [appTooltip]=\"approval?.approvers[0]?.member_name\"\r\n                    placement=\"bottom-left\"\r\n                    delay=\"0\"\r\n                    type=\"black\"\r\n                    [tooltipMandatory]=\"false\"\r\n                    >{{ approval?.approvers[0]?.member_name }}</span\r\n                  >\r\n                  <button\r\n                    *ngIf=\"approval?.approvers?.length > 1\"\r\n                    class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n                    appPopover\r\n                    (click)=\"workflowPopover.popover()\"\r\n                    placement=\"right\"\r\n                  >\r\n                    +{{ approval?.approvers?.length - 1 }}\r\n                  </button>\r\n                </div>\r\n                <app-popover #workflowPopover [dontCloseonClick]=\"true\">\r\n                  <div class=\"wf-action-list\">\r\n                    <ul class=\"action-item\">\r\n                      <li\r\n                        *ngFor=\"\r\n                          let approver of approval?.approvers | slice : 1;\r\n                          let approvalIndex = index\r\n                        \"\r\n                      >\r\n                        <div class=\"avatar-card\">\r\n                          <span\r\n                            class=\"value\"\r\n                            [appTooltip]=\"approver?.member_name\"\r\n                            placement=\"bottom-left\"\r\n                            delay=\"0\"\r\n                            type=\"black\"\r\n                            [tooltipMandatory]=\"false\"\r\n                          >\r\n                            <!-- <i class=\"icons\">&#xe90d;</i> -->\r\n                            <span\r\n                              *ngIf=\"\r\n                                approval?.type?.toLowerCase() === 'sequential'\r\n                              \"\r\n                              class=\"workflowLavel vx-fs-11 vx-fw-500 vx-pl-1 vx-pr-1 vx-lh-4 vx-mr-1 vx-text-center\"\r\n                              >{{\r\n                                approvalIndex + 1 ===\r\n                                approval?.approvers?.length - 1\r\n                                  ? \"Final\"\r\n                                  : approvalIndex + 2\r\n                              }}</span\r\n                            >\r\n                            {{ approver?.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\r\n              <!-- <div class=\"vx-d-flex vx-align-center\">\r\n                <button (click)=\"editLevelClicked(approval,approvalIndex)\"\r\n                  class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\r\n                >\r\n                  <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\r\n                </button>\r\n                <button (click)=\"deleteLevel(approvalIndex)\"\r\n                  class=\"deleteBtn vx-fs-11 vx-fw-600 vx-tt-uppercase vx-p-0 vx-m-0 vx-ml-4 vx-d-flex vx-align-center\"\r\n                >\r\n                  <i class=\"icons vx-mr-1\">&#xe9ae;</i> DELETE\r\n                </button>\r\n              </div> -->\r\n            </div>\r\n          </ng-container>\r\n          <p\r\n            *ngIf=\"\r\n              submitted &&\r\n              !policyForm?.selectedApprovers[0]?.approval_workflow?.length &&\r\n              !policyApprovalFlag &&\r\n              !policyForm?.selectedApprovers[0]?.approvers?.length\r\n            \"\r\n            [appScrollInView]=\"true\"\r\n            class=\"error-message\"\r\n          >\r\n            Select or create an approval workflow for this policy.\r\n          </p>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Policy Access -->\r\n    <div\r\n      *ngIf=\"true\"\r\n      class=\"form-group-row\"\r\n      [class.active]=\"activeSelector === 'policyAccess'\"\r\n      [class.disabled]=\"activeSelector &&\r\n      activeSelector !== 'policyAccess' &&\r\n      sideSelectorElements.includes(activeSelector)\"\r\n    >\r\n      <div class=\"left\" [class.checked]=\"true\">\r\n        <img\r\n          *ngIf=\"!policyForm?.policy_access_owners?.length && !policyForm?.policy_access_groups?.length && !policyForm?.availableOnPortal\"\r\n          src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/lock-scope.svg\"\r\n          alt=\"\"\r\n        />\r\n\r\n        <svg\r\n          *ngIf=\"policyForm?.policy_access_owners?.length || policyForm?.policy_access_groups?.length || policyForm?.availableOnPortal\"\r\n          class=\"checkIcon\"\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          viewBox=\"0 0 52 52\"\r\n        >\r\n          <circle\r\n            class=\"checkIcon__circle\"\r\n            cx=\"26\"\r\n            cy=\"26\"\r\n            r=\"25\"\r\n            fill=\"none\"\r\n          />\r\n          <path\r\n            class=\"checkIcon__check\"\r\n            fill=\"none\"\r\n            d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n          />\r\n        </svg>\r\n      </div>\r\n      <div class=\"right\">\r\n        <div class=\"vx-form-group\">\r\n          <div class=\"vx-d-flex vx-align-center vx-justify-between\">\r\n            <label class=\"vx-control-panel\">POLICY PORTAL ACCESS</label>\r\n          </div>\r\n          <div *ngIf=\"!policyForm?.policy_access_owners?.length && !policyForm?.policy_access_groups?.length && !policyForm?.availableOnPortal\"\r\n            (click)=\"activateSelector('policyAccess', true)\"\r\n            class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\r\n            [class.disabled]=\"!policyForm?.selectedCategories?.length\"\r\n          >\r\n            <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\r\n              Who should be able to view this policy?\r\n            </div>\r\n          </div>\r\n\r\n          <ng-container *ngIf=\"!policyForm?.availableOnPortal\">\r\n            <div class=\"selectBoxSuccess vx-pl-2 vx-pr-3\" *ngIf=\"policyForm?.policy_access_owners?.length || policyForm?.policy_access_groups?.length\">\r\n              <div class=\"vx-d-flex vx-align-center vx-justify-between vx-mt-2 vx-mb-2\">\r\n                <div class=\"vx-d-flex vx-align-center\">\r\n                  <div *ngIf=\"policyForm?.policy_access_owners?.length\"\r\n                    class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n                  >\r\n                    <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" *ngIf=\"policyForm?.policy_access_type === 1\"\r\n                    (click)=\"\r\n                        remove(\r\n                          'policyAccess',\r\n                          policyForm?.policy_access_owners[0]\r\n                        )\r\n                      \"\r\n                      >&#xe9ae;</i\r\n                    >\r\n                    <span\r\n                      class=\"chipName vx-fs-11 vx-label-txt\"\r\n                      [appTooltip]=\"policyForm?.policy_access_owners[0]?.employee_name\"\r\n                      placement=\"bottom-left\"\r\n                      delay=\"0\"\r\n                      type=\"black\"\r\n                      [tooltipMandatory]=\"false\"\r\n                      >{{policyForm?.policy_access_owners[0]?.employee_name}}</span\r\n                    >\r\n                    <button \r\n                    *ngIf=\"policyForm?.policy_access_owners?.length > 1\"\r\n                      class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 greenBg\"\r\n                      appPopover\r\n                      (click)=\"policyAccessPopover.popover()\"\r\n                      placement=\"right\"\r\n                    >\r\n                      +{{ policyForm?.policy_access_owners.length - 1 }}\r\n                    </button>\r\n                  </div>\r\n\r\n                  <div\r\n                    class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\"\r\n                    *ngIf=\"\r\n                      policyForm?.policy_access_owners.length > 0 &&\r\n                      policyForm?.policy_access_groups.length > 0\r\n                    \"\r\n                  >\r\n                    &\r\n                  </div>\r\n                  <div\r\n                    class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n                    *ngIf=\"policyForm?.policy_access_groups.length > 0\"\r\n                  >\r\n                    <i\r\n                      class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" *ngIf=\"policyForm?.policy_access_type === 1\" \r\n                      (click)=\"\r\n                        remove(\r\n                          'accessGroup',\r\n                          policyForm?.policy_access_groups[0]\r\n                        )\r\n                      \"\r\n                      >&#xe9ae;</i\r\n                    >\r\n                    <span\r\n                      class=\"chipName vx-fs-11 vx-label-txt\"\r\n                      [appTooltip]=\"\r\n                        policyForm?.policy_access_groups[0]?.group_name\r\n                      \"\r\n                      placement=\"bottom-left\"\r\n                      delay=\"0\"\r\n                      type=\"black\"\r\n                      [tooltipMandatory]=\"false\"\r\n                      >{{ policyForm?.policy_access_groups[0]?.group_name }}</span\r\n                    >\r\n                    <button\r\n                      class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n                      appPopover\r\n                      (click)=\"accessGroup.popover()\"\r\n                      placement=\"right\"\r\n                      *ngIf=\"policyForm?.policy_access_groups.length > 1\"\r\n                    >\r\n                      +{{ policyForm?.policy_access_groups.length - 1 }}\r\n                    </button>\r\n                  </div>\r\n\r\n                  <app-popover #policyAccessPopover [dontCloseonClick]=\"true\">\r\n                    <div class=\"wf-action-list\">\r\n                      <ul class=\"action-item\">\r\n                        <li *ngFor=\"\r\n                        let user of policyForm?.policy_access_owners | slice : 1;\r\n                        let j = index\r\n                      \">\r\n                          <div class=\"avatar-card\">\r\n                            <span\r\n                              class=\"value\"\r\n                              [appTooltip]=\"user?.employee_name\"\r\n                              placement=\"bottom-left\"\r\n                              delay=\"0\"\r\n                              type=\"black\"\r\n                              [tooltipMandatory]=\"false\"\r\n                            >\r\n                              <i class=\"icons\" *ngIf=\"policyForm?.policy_access_type === 1\" (click)=\"\r\n                              remove(\r\n                                'policyAccess',\r\n                                user\r\n                              )\r\n                            \">&#xe90d;</i>\r\n                              {{user?.employee_name}}\r\n                            </span>\r\n                          </div>\r\n                        </li>\r\n                      </ul>\r\n                    </div>\r\n                  </app-popover>\r\n                  <app-popover #accessGroup [dontCloseonClick]=\"true\">\r\n                    <div class=\"wf-action-list\">\r\n                      <ul class=\"action-item\">\r\n                        <li\r\n                          *ngFor=\"\r\n                            let data of policyForm?.policy_access_groups | slice : 1;\r\n                            let j = index\r\n                          \"\r\n                        >\r\n                          <div class=\"avatar-card\">\r\n                            <span class=\"value\">\r\n                              <i class=\"icons\" *ngIf=\"policyForm?.policy_access_type === 1\" (click)=\"remove('accessGroup', data)\"\r\n                                >&#xe90d;</i\r\n                              >\r\n                              {{ data?.group_name }}\r\n                            </span>\r\n                          </div>\r\n                        </li>\r\n                      </ul>\r\n                    </div>\r\n                  </app-popover>\r\n                </div>\r\n\r\n                <button (click)=\"activateSelector('policyAccess', true)\"\r\n                  class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\r\n                >\r\n                  <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\r\n                </button>\r\n              </div>\r\n\r\n              <!-- <div class=\"vx-mt-4 vx-mb-2\">\r\n                <app-cs-radio\r\n                  [name]=\"'policyFormAccessType'\" [checked]=\"policyForm?.policy_access_type === 0\" (checkedEvent)=\"setAccessField(0)\"\r\n                  ><div class=\"vx-fs-12 vx-paragraph-txt\">\r\n                    Everyone who has access to this Policy Category\r\n                  </div></app-cs-radio\r\n                >\r\n                <app-cs-radio\r\n                  [name]=\"'policyFormAccessType'\" [checked]=\"policyForm?.policy_access_type === 1\" (checkedEvent)=\"setAccessField(1)\"\r\n                class=\"vx-mt-1\"\r\n                  ><div class=\"vx-fs-12 vx-paragraph-txt\">\r\n                    Select users/groups\r\n                  </div></app-cs-radio\r\n                >\r\n              </div> -->\r\n            </div>\r\n          </ng-container>\r\n\r\n          <div class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\" *ngIf=\"policyForm?.availableOnPortal\">\r\n            <span class=\"vx-fs-13 vx-paragraph-txt\">Visible to All Current & Future Users</span>\r\n\r\n            <button (click)=\"activateSelector('policyAccess', true)\" class=\"edit vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"><i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT</button>\r\n          </div>\r\n\r\n          <div class=\"vx-mt-2\">\r\n            <app-cs-switch\r\n            *ngIf=\"policyForm.availableOnPortal\"\r\n            [(ngValue)]=\"policyForm.acceptSuggestions\"\r\n              >ACCEPT SUGGESTIONS\r\n              <i\r\n                class=\"icons vx-fs-12 vx-txt-blue vx-ml-1 vx-mr-2\"\r\n                [appTooltip]=\"'If enabled, users can provide improvement suggestions to the policies that are listed on the Policy Portal.'\"\r\n                placement=\"bottom-right\"\r\n                delay=\"0\"\r\n                type=\"white\"\r\n                [tooltipMandatory]=\"true\"\r\n                >&#xe91f;</i\r\n              ></app-cs-switch\r\n            >\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Attestations -->\r\n    <div\r\n      class=\"form-group-row\"\r\n      [class.active]=\"false\"\r\n      [class.disabled]=\"false\"\r\n      *ngIf=\"false\"\r\n    >\r\n      <div class=\"left\" [class.checked]=\"false\">\r\n        <img\r\n          src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/attestations.svg\"\r\n          alt=\"\"\r\n        />\r\n\r\n        <svg\r\n          *ngIf=\"false\"\r\n          class=\"checkIcon\"\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          viewBox=\"0 0 52 52\"\r\n        >\r\n          <circle\r\n            class=\"checkIcon__circle\"\r\n            cx=\"26\"\r\n            cy=\"26\"\r\n            r=\"25\"\r\n            fill=\"none\"\r\n          />\r\n          <path\r\n            class=\"checkIcon__check\"\r\n            fill=\"none\"\r\n            d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n          />\r\n        </svg>\r\n      </div>\r\n      <div class=\"right\">\r\n        <div class=\"vx-form-group\">\r\n          <div class=\"vx-d-flex vx-align-center vx-justify-between\">\r\n            <label class=\"vx-control-panel\">ATTESTATIONS</label>\r\n          </div>\r\n          <div\r\n            class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\r\n            [class.disabled]=\"false\"\r\n          >\r\n            <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\r\n              Select the persons required to attest to this Policy\r\n            </div>\r\n          </div>\r\n\r\n          <div\r\n            class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\r\n          >\r\n            <div\r\n              class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n            >\r\n              <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                >&#xe9ae;</i\r\n              >\r\n              <span\r\n                class=\"chipName vx-fs-11 vx-label-txt\"\r\n                [appTooltip]=\"'Samantha Jones'\"\r\n                placement=\"bottom-left\"\r\n                delay=\"0\"\r\n                type=\"black\"\r\n                [tooltipMandatory]=\"false\"\r\n                >Samantha Jones</span\r\n              >\r\n              <button\r\n                class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n                appPopover\r\n                (click)=\"policyAttestationPopover.popover()\"\r\n                placement=\"right\"\r\n              >\r\n                +4\r\n              </button>\r\n            </div>\r\n            <app-popover #policyAttestationPopover [dontCloseonClick]=\"true\">\r\n              <div class=\"wf-action-list\">\r\n                <ul class=\"action-item\">\r\n                  <li *ngFor=\"let data of [1, 1, 1, 1, 1, 1, 1]\">\r\n                    <div class=\"avatar-card\">\r\n                      <span\r\n                        class=\"value\"\r\n                        [appTooltip]=\"'Harshvardhan Kariwala'\"\r\n                        placement=\"bottom-left\"\r\n                        delay=\"0\"\r\n                        type=\"black\"\r\n                        [tooltipMandatory]=\"false\"\r\n                      >\r\n                        <i class=\"icons\">&#xe90d;</i>\r\n                        Harshvardhan Kariwala\r\n                      </span>\r\n                    </div>\r\n                  </li>\r\n                </ul>\r\n              </div>\r\n            </app-popover>\r\n            <button\r\n              class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\r\n            >\r\n              <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\r\n            </button>\r\n          </div>\r\n\r\n          <div class=\"vx-mt-2\">\r\n            <app-cs-switch\r\n              >REQUIRES E-SIGNATURE FOR ATTESTATION\r\n              <i\r\n                class=\"icons vx-fs-12 vx-txt-blue vx-ml-1 vx-mr-2\"\r\n                [appTooltip]=\"\r\n                  'Requires e-signature for attestation info text here...'\r\n                \"\r\n                placement=\"bottom-right\"\r\n                delay=\"0\"\r\n                type=\"white\"\r\n                [tooltipMandatory]=\"true\"\r\n                >&#xe91f;</i\r\n              ></app-cs-switch\r\n            >\r\n          </div>\r\n\r\n          <label class=\"vx-control-panel vx-mt-2\">WHEN?</label>\r\n          <div\r\n            class=\"selectButton vx-pl-3 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\r\n          >\r\n            <div\r\n              class=\"selectButtonPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\r\n            >\r\n              What is the attestation schedule for this<br />policy?\r\n            </div>\r\n            <div class=\"vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase\">\r\n              SET A FREQUENCY\r\n            </div>\r\n          </div>\r\n\r\n          <div\r\n            class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\r\n          >\r\n            <div class=\"selectBoxText vx-fs-13 vx-paragraph-txt\">\r\n              Every Wednesday by 11:59 pm\r\n            </div>\r\n            <button\r\n              class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\r\n            >\r\n              <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\r\n            </button>\r\n          </div>\r\n\r\n          <label class=\"vx-control-panel vx-mt-2\"\r\n            >ASSESSMENT OF UNDERSTANDING</label\r\n          >\r\n          <div\r\n            class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\r\n            [class.disabled]=\"false\"\r\n          >\r\n            <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\r\n              Set up a questionnaire to confirm the reader\u2019s<br />understanding\r\n              of the policy.\r\n            </div>\r\n          </div>\r\n\r\n          <div\r\n            class=\"selectBoxSuccess vx-pl-3 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\r\n          >\r\n            <div\r\n              class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n            >\r\n              <span class=\"chipName vx-fs-11 vx-label-txt\">5 Questions</span>\r\n            </div>\r\n            <button\r\n              class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\r\n            >\r\n              <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Approval Workflow -->\r\n    <div\r\n      class=\"form-group-row\"\r\n      *ngIf=\"false\"\r\n      [class.active]=\"activeSelector === 'approvers'\"\r\n      [class.disabled]=\"\r\n        activeSelector &&\r\n        activeSelector !== 'approvers' &&\r\n        sideSelectorElements.includes(activeSelector)\r\n      \"\r\n    >\r\n      <div\r\n        class=\"left\"\r\n        [class.checked]=\"policyForm?.selectedApprovers?.length > 0\"\r\n      >\r\n        <img\r\n          *ngIf=\"\r\n            policyForm?.selectedApprovers?.length == 0 ||\r\n            activeSelector === 'approvers'\r\n          \"\r\n          src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/approval.svg\"\r\n          alt=\"im\"\r\n        />\r\n\r\n        <svg\r\n          *ngIf=\"\r\n            policyForm?.selectedApprovers?.length > 0 &&\r\n            activeSelector !== 'approvers'\r\n          \"\r\n          class=\"checkIcon\"\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          viewBox=\"0 0 52 52\"\r\n        >\r\n          <circle\r\n            class=\"checkIcon__circle\"\r\n            cx=\"26\"\r\n            cy=\"26\"\r\n            r=\"25\"\r\n            fill=\"none\"\r\n          />\r\n          <path\r\n            class=\"checkIcon__check\"\r\n            fill=\"none\"\r\n            d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n          />\r\n        </svg>\r\n      </div>\r\n      <div class=\"right\">\r\n        <div\r\n          class=\"vx-form-group approval-workflow\"\r\n          [class.disabled]=\"policyApprovalFlag !== 0\"\r\n        >\r\n          <label class=\"vx-control-panel\">\r\n            Approval workflow <span class=\"required\">*</span>\r\n            <button\r\n              (click)=\"\r\n                activateSelector('approvers', true);\r\n                addMoreLevels = true;\r\n                workflowType = 'SEQUENTIAL'\r\n              \"\r\n              class=\"button\"\r\n            >\r\n              Create a new Approval Workflow\r\n            </button>\r\n          </label>\r\n          <div\r\n            class=\"select\"\r\n            [class.disabled]=\"approverWorkFlowList?.length == 0\"\r\n            *ngIf=\"\r\n              policyForm?.selectedApprovers[0]?.approvers?.length == 0 ||\r\n              policyForm?.selectedApprovers.length == 0\r\n            \"\r\n          >\r\n            <cs-select\r\n              [ngModel]=\"selectedApprovalWorkflow\"\r\n              (ngModelChange)=\"selectedWorkflowChange($event)\"\r\n              [placeholder]=\"'Select approval workflow for this policy'\"\r\n              name=\"selectedApprovalWorkflow\"\r\n              [setMaxWidth]=\"true\"\r\n            >\r\n              <cs-option\r\n                *ngFor=\"let data of approverWorkFlowList\"\r\n                [value]=\"data\"\r\n              >\r\n                {{ data.workflow_name }}\r\n              </cs-option>\r\n              <cs-option\r\n                [value]=\"-1\"\r\n                (click)=\"\r\n                  activateSelector('approvers', true);\r\n                  addMoreLevels = true;\r\n                  workflowType = 'SEQUENTIAL'\r\n                \"\r\n                >Create a new approval workflow</cs-option\r\n              >\r\n            </cs-select>\r\n          </div>\r\n          <ng-container\r\n            *ngIf=\"policyForm?.selectedApprovers[0]?.approvers?.length > 0\"\r\n          >\r\n            <div\r\n              class=\"selected\"\r\n              *ngFor=\"let level of policyForm?.selectedApprovers; let i = index\"\r\n            >\r\n              <div class=\"workflow-label\">\r\n                <p class=\"title\">Level {{ i + 1 }}</p>\r\n                <p class=\"description\">{{ level.name }}</p>\r\n              </div>\r\n              <div class=\"vx-d-flex vx-align-center\">\r\n                <div class=\"chip-container\">\r\n                  <span\r\n                    class=\"chip\"\r\n                    *ngFor=\"\r\n                      let approver of level.approvers.slice(0, 1);\r\n                      let j = index\r\n                    \"\r\n                    ><i class=\"icons\" (click)=\"remove('approvers', approver, i)\"\r\n                      >&#xe90d;</i\r\n                    >\r\n                    <span class=\"step\" *ngIf=\"level.name == 'SEQUENTIAL'\">{{\r\n                      j + 1\r\n                    }}</span\r\n                    >{{ approver.member_name }}</span\r\n                  >\r\n\r\n                  <button\r\n                    class=\"count\"\r\n                    *ngIf=\"level.approvers?.length > 1\"\r\n                    type=\"button\"\r\n                    appPopover\r\n                    (click)=\"labelName.popover()\"\r\n                    placement=\"right\"\r\n                  >\r\n                    +\r\n\r\n                    {{ level.approvers.slice(1).length }}\r\n                  </button>\r\n                  <app-popover #labelName [dontCloseonClick]=\"true\">\r\n                    <div class=\"wf-action-list\">\r\n                      <ul class=\"action-item\">\r\n                        <li\r\n                          *ngFor=\"\r\n                            let approver of level.approvers | slice : 1;\r\n                            let j = index\r\n                          \"\r\n                        >\r\n                          <div class=\"avatar-card\">\r\n                            <span class=\"value\">\r\n                              <i\r\n                                class=\"icons\"\r\n                                (click)=\"remove('approvers', approver, i)\"\r\n                                >&#xe90d;</i\r\n                              >\r\n                              <span\r\n                                class=\"step\"\r\n                                *ngIf=\"level.name == 'SEQUENTIAL'\"\r\n                              >\r\n                                {{\r\n                                  j == level.approvers.slice(1).length - 1\r\n                                    ? \"Final\"\r\n                                    : j + 2\r\n                                }}\r\n                              </span>\r\n                              {{ approver.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                <button\r\n                  class=\"edit\"\r\n                  type=\"button\"\r\n                  (click)=\"\r\n                    activateSelector('approvers', true, level.name);\r\n                    approversListIndex = i\r\n                  \"\r\n                >\r\n                  <i class=\"icons\">&#xe9ba;</i>Edit\r\n                </button>\r\n                <button\r\n                  class=\"close-btn\"\r\n                  (click)=\"remove('workflowLevel', level, i)\"\r\n                >\r\n                  <i class=\"icons\">&#xe90d;</i>\r\n                </button>\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n\r\n          <p\r\n            *ngIf=\"\r\n              submitted &&\r\n              !policyForm?.selectedApprovers?.length &&\r\n              !policyApprovalFlag\r\n            \"\r\n            [appScrollInView]=\"true\"\r\n            class=\"error-message\"\r\n          >\r\n            Select or create an approval workflow for this policy.\r\n          </p>\r\n\r\n          <label\r\n            class=\"vx-control-panel\"\r\n            *ngIf=\"policyForm.selectedApprovers[0]?.approvers?.length > 0\"\r\n            ><button\r\n              class=\"button\"\r\n              (click)=\"\r\n                activateSelector('approvers', true);\r\n                addMoreLevels = true;\r\n                workflowType = 'SEQUENTIAL'\r\n              \"\r\n            >\r\n              + Add More Levels\r\n            </button></label\r\n          >\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Who / now Attestation -->\r\n    <div\r\n      class=\"form-group-row\"\r\n      [class.active]=\"activeSelector === 'assignees'\"\r\n      [class.disabled]=\"\r\n        activeSelector &&\r\n        activeSelector !== 'assignees' &&\r\n        sideSelectorElements.includes(activeSelector)\r\n      \"\r\n    >\r\n      <div\r\n        class=\"left\"\r\n        [class.checked]=\"policyForm?.selectedAssignees?.length > 0\"\r\n      >\r\n        <img\r\n          *ngIf=\"\r\n            policyForm?.selectedAssignees?.length == 0 ||\r\n            activeSelector === 'assignees'\r\n          \"\r\n          src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/who.svg\"\r\n          alt=\"im\"\r\n        />\r\n\r\n        <svg\r\n          *ngIf=\"\r\n            policyForm?.selectedAssignees?.length > 0 &&\r\n            activeSelector !== 'assignees'\r\n          \"\r\n          class=\"checkIcon\"\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          viewBox=\"0 0 52 52\"\r\n        >\r\n          <circle\r\n            class=\"checkIcon__circle\"\r\n            cx=\"26\"\r\n            cy=\"26\"\r\n            r=\"25\"\r\n            fill=\"none\"\r\n          />\r\n          <path\r\n            class=\"checkIcon__check\"\r\n            fill=\"none\"\r\n            d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n          />\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\">Attestation</label>\r\n          <div\r\n            class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center vx-mb-2\"\r\n            *ngIf=\"\r\n              (policyForm?.selectedAssignees?.length == 0 && !groupEnabled) ||\r\n              (policyForm?.selectedAssignees?.length == 0 &&\r\n                groupEnabled &&\r\n                policyForm?.selectedGroupAssignee.length == 0)\r\n            \"\r\n            (click)=\"activateSelector('assignees', true)\"\r\n          >\r\n            <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\r\n              Select the persons responsible for attesting this policy.\r\n            </div>\r\n          </div>\r\n\r\n          <div\r\n            class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between vx-mb-2\"\r\n            *ngIf=\"\r\n              policyForm?.selectedAssignees?.length > 0 ||\r\n              policyForm?.selectedGroupAssignee?.length > 0\r\n            \"\r\n          >\r\n            <div\r\n              class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n              *ngIf=\"!groupEnabled\"\r\n            >\r\n              <ng-container\r\n                *ngFor=\"\r\n                  let assignee of policyForm?.selectedAssignees?.slice(0, 1)\r\n                \"\r\n              >\r\n                <i\r\n                  class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                  (click)=\"remove('assignees', assignee)\"\r\n                  >&#xe9ae;</i\r\n                >\r\n                <span\r\n                  class=\"chipName vx-fs-11 vx-label-txt\"\r\n                  [appTooltip]=\"assignee.employee_name\"\r\n                  placement=\"bottom-left\"\r\n                  delay=\"0\"\r\n                  type=\"black\"\r\n                  [tooltipMandatory]=\"false\"\r\n                  >{{ assignee.employee_name }}</span\r\n                >\r\n              </ng-container>\r\n              <button\r\n                class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 greenBg\"\r\n                appPopover\r\n                (click)=\"assigneePopover.popover()\"\r\n                placement=\"right\"\r\n                *ngIf=\"policyForm?.selectedAssignees?.length > 1\"\r\n              >\r\n                +{{ policyForm?.selectedAssignees?.slice(1).length }}\r\n              </button>\r\n            </div>\r\n            <ng-container *ngIf=\"groupEnabled\">\r\n              <div\r\n                class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n                *ngIf=\"groupEnabled && policyForm?.selectedAssignees.length > 0\"\r\n              >\r\n                <i\r\n                  class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                  (click)=\"\r\n                    remove('assignees', policyForm?.selectedAssignees[0])\r\n                  \"\r\n                  >&#xe9ae;</i\r\n                >\r\n                <span\r\n                  class=\"chipName vx-fs-11 vx-label-txt\"\r\n                  [appTooltip]=\"policyForm?.selectedAssignees[0]?.employee_name\"\r\n                  placement=\"bottom-left\"\r\n                  delay=\"0\"\r\n                  type=\"black\"\r\n                  [tooltipMandatory]=\"false\"\r\n                  >{{ policyForm?.selectedAssignees[0]?.employee_name }}</span\r\n                >\r\n                <button\r\n                  class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n                  appPopover\r\n                  (click)=\"UserPopover.popover()\"\r\n                  placement=\"right\"\r\n                  *ngIf=\"policyForm?.selectedAssignees.length > 1\"\r\n                >\r\n                  +{{ policyForm?.selectedAssignees.length - 1 }}\r\n                </button>\r\n              </div>\r\n              <div\r\n                class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\"\r\n                *ngIf=\"\r\n                  policyForm?.selectedAssignees.length > 0 &&\r\n                  policyForm?.selectedGroupAssignee.length > 0\r\n                \"\r\n              >\r\n                &\r\n              </div>\r\n              <div\r\n                class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n                *ngIf=\"policyForm?.selectedGroupAssignee.length > 0\"\r\n              >\r\n                <i\r\n                  class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                  (click)=\"\r\n                    remove(\r\n                      'groupAssignees',\r\n                      policyForm?.selectedGroupAssignee[0]\r\n                    )\r\n                  \"\r\n                  >&#xe9ae;</i\r\n                >\r\n                <span\r\n                  class=\"chipName vx-fs-11 vx-label-txt\"\r\n                  [appTooltip]=\"\r\n                    policyForm?.selectedGroupAssignee[0]?.group_name\r\n                  \"\r\n                  placement=\"bottom-left\"\r\n                  delay=\"0\"\r\n                  type=\"black\"\r\n                  [tooltipMandatory]=\"false\"\r\n                  >{{ policyForm?.selectedGroupAssignee[0]?.group_name }}</span\r\n                >\r\n                <button\r\n                  class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n                  appPopover\r\n                  (click)=\"group.popover()\"\r\n                  placement=\"right\"\r\n                  *ngIf=\"policyForm?.selectedGroupAssignee.length > 1\"\r\n                >\r\n                  +{{ policyForm?.selectedGroupAssignee.length - 1 }}\r\n                </button>\r\n              </div>\r\n            </ng-container>\r\n            <button\r\n              class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\r\n              (click)=\"activateSelector('assignees', true)\"\r\n            >\r\n              <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\r\n            </button>\r\n          </div>\r\n\r\n          <p\r\n            *ngIf=\"\r\n              submitted &&\r\n              ((policyForm?.selectedAssignees?.length == 0 &&\r\n                policyForm?.frequency_details &&\r\n                !groupEnabled) ||\r\n                (policyForm?.selectedAssignees?.length == 0 &&\r\n                  policyForm.selectedGroupAssignee.length == 0 &&\r\n                  policyForm?.frequency_details &&\r\n                  groupEnabled))\r\n            \"\r\n            id=\"whovalidatemsg\"\r\n            class=\"error-message\"\r\n            [appScrollInView]=\"true\"\r\n          >\r\n            Select the persons required to attest to this Policy.\r\n          </p>\r\n          <app-cs-switch\r\n            [(ngValue)]=\"policyForm.requiresSignatureForAttestation\"\r\n            [class.disabled]=\"policyForm?.selectedAssignees?.length == 0\"\r\n            class=\"who-toggle\"\r\n            >THIS POLICY REQUIRES E-SIGNATURE FOR ATTESTATION\r\n            <i\r\n              class=\"icons\"\r\n              [appTooltip]=\"\r\n                'If selected, the readers will be required to attest this policy using their electronic signature.'\r\n              \"\r\n              placement=\"bottom-right\"\r\n              type=\"white\"\r\n              delay=\"0\"\r\n              [tooltipMandatory]=\"true\"\r\n              >&#xe91f;</i\r\n            ></app-cs-switch\r\n          >\r\n          <app-popover #assigneePopover [dontCloseonClick]=\"true\">\r\n            <div class=\"wf-action-list\">\r\n              <ul class=\"action-item\">\r\n                <li\r\n                  *ngFor=\"\r\n                    let assignee of policyForm?.selectedAssignees | slice : 1;\r\n                    let j = index\r\n                  \"\r\n                >\r\n                  <div class=\"avatar-card\">\r\n                    <span class=\"value\">\r\n                      <i class=\"icons\" (click)=\"remove('assignees', assignee)\"\r\n                        >&#xe90d;</i\r\n                      >\r\n                      {{ assignee.employee_name }}\r\n                    </span>\r\n                  </div>\r\n                </li>\r\n              </ul>\r\n            </div>\r\n          </app-popover>\r\n          <app-popover #UserPopover [dontCloseonClick]=\"true\">\r\n            <div class=\"wf-action-list\">\r\n              <ul class=\"action-item\">\r\n                <li\r\n                  *ngFor=\"\r\n                    let assignee of policyForm?.selectedAssignees | slice : 1;\r\n                    let j = index\r\n                  \"\r\n                >\r\n                  <div class=\"avatar-card\">\r\n                    <span class=\"value\">\r\n                      <i class=\"icons\" (click)=\"remove('assignees', assignee)\"\r\n                        >&#xe90d;</i\r\n                      >\r\n                      {{ assignee.employee_name }}\r\n                    </span>\r\n                  </div>\r\n                </li>\r\n              </ul>\r\n            </div>\r\n          </app-popover>\r\n          <app-popover #group [dontCloseonClick]=\"true\">\r\n            <div class=\"wf-action-list\">\r\n              <ul class=\"action-item\">\r\n                <li\r\n                  *ngFor=\"\r\n                    let data of policyForm?.selectedGroupAssignee | slice : 1;\r\n                    let j = index\r\n                  \"\r\n                >\r\n                  <div class=\"avatar-card\">\r\n                    <span class=\"value\">\r\n                      <i class=\"icons\" (click)=\"remove('groupAssignees', data)\"\r\n                        >&#xe90d;</i\r\n                      >\r\n                      {{ data.group_name }}\r\n                    </span>\r\n                  </div>\r\n                </li>\r\n              </ul>\r\n            </div>\r\n          </app-popover>\r\n\r\n          <!-- overseer -->\r\n          <app-popover #overseerPopover [dontCloseonClick]=\"true\">\r\n            <div class=\"wf-action-list\">\r\n              <ul class=\"action-item\">\r\n                <li\r\n                  *ngFor=\"\r\n                    let overseer of policyForm?.CCEmail | slice : 1;\r\n                    let j = index\r\n                  \"\r\n                >\r\n                  <div class=\"avatar-card\">\r\n                    <span class=\"value\">\r\n                      <i class=\"icons\" (click)=\"remove('ccEmail', overseer)\"\r\n                        >&#xe90d;</i\r\n                      >\r\n                      {{ overseer?.employee_name }}\r\n                    </span>\r\n                  </div>\r\n                </li>\r\n              </ul>\r\n            </div>\r\n          </app-popover>\r\n          <app-popover #overseerGroup [dontCloseonClick]=\"true\">\r\n            <div class=\"wf-action-list\">\r\n              <ul class=\"action-item\">\r\n                <li\r\n                  *ngFor=\"\r\n                    let data of policyForm?.CCGroupEmail | slice : 1;\r\n                    let j = index\r\n                  \"\r\n                >\r\n                  <div class=\"avatar-card\">\r\n                    <span class=\"value\">\r\n                      <i class=\"icons\" (click)=\"remove('ccGroupEmail', data)\"\r\n                        >&#xe90d;</i\r\n                      >\r\n                      {{ data?.group_name }}\r\n                    </span>\r\n                  </div>\r\n                </li>\r\n              </ul>\r\n            </div>\r\n          </app-popover>\r\n          <!-- overseer end -->\r\n\r\n          <!-- overseer fail start -->\r\n          <app-popover #overseerFailPopover [dontCloseonClick]=\"true\">\r\n            <div class=\"wf-action-list\">\r\n              <ul class=\"action-item\">\r\n                <li\r\n                  *ngFor=\"\r\n                    let overseer of policyForm?.CCFailEmail | slice : 1;\r\n                    let j = index\r\n                  \"\r\n                >\r\n                  <div class=\"avatar-card\">\r\n                    <span class=\"value\">\r\n                      <i class=\"icons\" (click)=\"remove('ccFail', overseer)\"\r\n                        >&#xe90d;</i\r\n                      >\r\n                      {{ overseer?.employee_name }}\r\n                    </span>\r\n                  </div>\r\n                </li>\r\n              </ul>\r\n            </div>\r\n          </app-popover>\r\n          <app-popover #overseerFailGroup [dontCloseonClick]=\"true\">\r\n            <div class=\"wf-action-list\">\r\n              <ul class=\"action-item\">\r\n                <li\r\n                  *ngFor=\"\r\n                    let data of policyForm?.CCFailEmailGroup | slice : 1;\r\n                    let j = index\r\n                  \"\r\n                >\r\n                  <div class=\"avatar-card\">\r\n                    <span class=\"value\">\r\n                      <i\r\n                        class=\"icons\"\r\n                        (click)=\"remove('ccGroupFailEmail', data)\"\r\n                        >&#xe90d;</i\r\n                      >\r\n                      {{ data?.group_name }}\r\n                    </span>\r\n                  </div>\r\n                </li>\r\n              </ul>\r\n            </div>\r\n          </app-popover>\r\n          <!-- overseer fail end -->\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- When -->\r\n    <div\r\n      class=\"form-group-row\"\r\n      [class.active]=\"activeSelector === 'frequency'\"\r\n      [class.disabled]=\"\r\n        activeSelector &&\r\n        activeSelector !== 'frequency' &&\r\n        sideSelectorElements.includes(activeSelector)\r\n      \"\r\n    >\r\n      <div\r\n        *ngIf=\"false\"\r\n        class=\"left\"\r\n        [class.checked]=\"policyForm?.frequency_details\"\r\n      >\r\n        <img\r\n          *ngIf=\"\r\n            !policyForm?.frequency_details || activeSelector === 'frequency'\r\n          \"\r\n          src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/when.svg\"\r\n          alt=\"im\"\r\n        />\r\n\r\n        <svg\r\n          *ngIf=\"\r\n            policyForm?.frequency_details && activeSelector !== 'frequency'\r\n          \"\r\n          class=\"checkIcon\"\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          viewBox=\"0 0 52 52\"\r\n        >\r\n          <circle\r\n            class=\"checkIcon__circle\"\r\n            cx=\"26\"\r\n            cy=\"26\"\r\n            r=\"25\"\r\n            fill=\"none\"\r\n          />\r\n          <path\r\n            class=\"checkIcon__check\"\r\n            fill=\"none\"\r\n            d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n          />\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?</label>\r\n\r\n          <div\r\n            *ngIf=\"policyForm?.frequency_details == ''\"\r\n            class=\"select button-sec\"\r\n          >\r\n            <div\r\n              class=\"custom-input frequency-custom-input\"\r\n              (click)=\"activateSelector('frequency', true)\"\r\n            >\r\n              {{ frequencyPlaceholder }}\r\n            </div>\r\n\r\n            <button (click)=\"activateSelector('frequency', true)\" type=\"button\">\r\n              Set A frequency\r\n            </button>\r\n          </div>\r\n          <div\r\n            *ngIf=\"policyForm?.frequency_details != ''\"\r\n            class=\"selected button-sec\"\r\n          >\r\n            <span class=\"chip\">{{ frequencyPlaceholder }}</span>\r\n            <button\r\n              *ngIf=\"activeSelector !== 'frequency'\"\r\n              type=\"button\"\r\n              class=\"edit\"\r\n              (click)=\"activateSelector('frequency', true)\"\r\n            >\r\n              <i class=\"icons\">&#xe9ba;</i>Edit\r\n            </button>\r\n          </div>\r\n          <p\r\n            *ngIf=\"\r\n              submitted &&\r\n              ((policyForm?.selectedAssignees?.length > 0 &&\r\n                !policyForm?.frequency_details &&\r\n                !groupEnabled) ||\r\n                ((policyForm?.selectedAssignees?.length > 0 ||\r\n                  policyForm?.selectedGroupAssignee?.length > 0) &&\r\n                  !policyForm?.frequency_details &&\r\n                  groupEnabled))\r\n            \"\r\n            class=\"error-message\"\r\n            [appScrollInView]=\"true\"\r\n          >\r\n            Select an attestation schedule for this policy.\r\n          </p>\r\n\r\n          <!-- <label class=\"vx-control-panel\">Effective Date</label>\r\n                  <div class=\"date-time-picker\">\r\n                      <div class=\"picker-group\">\r\n                          <input type=\"text\" readonly placeholder=\"Select the date from which this policy goes into effect.\"\r\n                              [value]=\"policyForm.policyDueDate  | date: 'dd MMM yyyy'\" (click)=\"openDatePicker();\">\r\n                          <i class=\"icons\">&#xe92d;</i>\r\n                          <dp-date-picker #datePicker (onSelect)=\"datePickerOverlay = false;closeDatePicker($event)\"\r\n                              [config]=\"dateConfig\" [(ngModel)]=\"policyForm.policyDueDate\">\r\n                          </dp-date-picker>\r\n                          <div class=\"vx-overlay\" (click)=\"closeDatePicker($event)\" *ngIf=\"datePickerOverlay\"></div>\r\n                      </div>\r\n                  </div> -->\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Checkpoints / Assessment of Understanding -->\r\n    <div\r\n      class=\"form-group-row\"\r\n      [appScrollInView]=\"scrollToBottom\"\r\n      *ngIf=\"true\"\r\n      [class.active]=\"activeSelector === 'checkpoints'\"\r\n      [class.disabled]=\"\r\n        activeSelector &&\r\n        activeSelector !== 'checkpoints' &&\r\n        sideSelectorElements.includes(activeSelector)\r\n      \"\r\n    >\r\n      <div\r\n        *ngIf=\"false\"\r\n        class=\"left\"\r\n        [class.checked]=\"policyForm?.checkpointDetails?.length > 0\"\r\n      >\r\n        <img\r\n          *ngIf=\"\r\n            policyForm?.checkpointDetails?.length == 0 ||\r\n            activeSelector === 'checkpoints'\r\n          \"\r\n          src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/checkpoints.svg\"\r\n          alt=\"im\"\r\n        />\r\n\r\n        <svg\r\n          *ngIf=\"\r\n            policyForm?.checkpointDetails?.length > 0 &&\r\n            activeSelector !== 'checkpoints'\r\n          \"\r\n          class=\"checkIcon\"\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          viewBox=\"0 0 52 52\"\r\n        >\r\n          <circle\r\n            class=\"checkIcon__circle\"\r\n            cx=\"26\"\r\n            cy=\"26\"\r\n            r=\"25\"\r\n            fill=\"none\"\r\n          />\r\n          <path\r\n            class=\"checkIcon__check\"\r\n            fill=\"none\"\r\n            d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n          />\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            Assessment of Understanding\r\n            <!-- <button  *ngIf=\"policyForm?.checkpointDetails?.length===0\" class=\"button\" (click)=\"activateSelector('checkpoints',true)\">+ Add Checkpoints</button> -->\r\n          </label>\r\n          <div\r\n            class=\"select\"\r\n            *ngIf=\"policyForm?.checkpointDetails?.length === 0\"\r\n            (click)=\"activateSelector('checkpoints', true)\"\r\n          >\r\n            <!-- <input type=\"text\" placeholder=\"Set up a questionnaire to confirm the reader\u2019s understanding of the policy.\" readonly> -->\r\n            <div class=\"custom-input\">\r\n              Set up a questionnaire to confirm the reader\u2019s<br />understanding\r\n              of the policy.\r\n            </div>\r\n          </div>\r\n          <div\r\n            class=\"selected\"\r\n            *ngIf=\"policyForm?.checkpointDetails?.length > 0\"\r\n          >\r\n            <!-- <div class=\"chip-container\">\r\n                      <span class=\"chip\">{{policyForm?.checkpointDetails?.length + (policyForm?.checkpointDetails?.length > 1 ?' Checkpoints':' Checkpoint')}}</span>\r\n\r\n                      <span class=\"checkpoint-point-text first\">TOTAL POINTS: <span class=\"no\">{{policyForm?.totalQuestion}}</span><br><em>Each question carries 1 point</em></span>\r\n\r\n                      <span class=\"checkpoint-point-text\">POINTS REQUIRED TO ATTEST : <span class=\"no\">{{policyForm?.passingMarks}}</span></span>\r\n\r\n                    </div> -->\r\n            <div\r\n              class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n            >\r\n              <span class=\"chipName vx-fs-11 vx-label-txt\">{{\r\n                policyForm?.checkpointDetails?.length +\r\n                  (policyForm?.checkpointDetails?.length > 1\r\n                    ? \" Questions\"\r\n                    : \" Question\")\r\n              }}</span>\r\n            </div>\r\n            <button\r\n              class=\"edit\"\r\n              type=\"button\"\r\n              (click)=\"activateSelector('checkpoints', true)\"\r\n            >\r\n              <i class=\"icons\">&#xe9ba;</i> Edit\r\n            </button>\r\n          </div>\r\n          <!-- <app-popover #checkpointPopOver [dontCloseonClick]=\"true\">\r\n                  <div class=\"wf-action-list\">\r\n                      <ul class=\"action-item\">\r\n                          <li *ngFor=\"let checkpoint of policyForm?.checkpointDetails | slice: 1; let j = index\">\r\n                              <div class=\"avatar-card\">\r\n                                  <span class=\"value\">\r\n                                      <i class=\"icons\" (click)=\"remove('checkpoints',checkpoint,j+1)\">&#xe90d;</i>\r\n                                      {{ checkpoint?.question }}\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    <!-- Risk Classification -->\r\n    <div\r\n      class=\"form-group-row\"\r\n      *ngIf=\"showRiskClassification && false\"\r\n      [class.disabled]=\"activeSelector && activeSelector !== 'name'\"\r\n    >\r\n      <div class=\"left\" [class.checked]=\"policyForm.riskRating\">\r\n        <img\r\n          src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/risks.svg\"\r\n          alt=\"im\"\r\n          *ngIf=\"!policyForm?.riskRating\"\r\n        />\r\n\r\n        <svg\r\n          class=\"checkIcon\"\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          viewBox=\"0 0 52 52\"\r\n          *ngIf=\"policyForm?.riskRating\"\r\n        >\r\n          <circle\r\n            class=\"checkIcon__circle\"\r\n            cx=\"26\"\r\n            cy=\"26\"\r\n            r=\"25\"\r\n            fill=\"none\"\r\n          />\r\n          <path\r\n            class=\"checkIcon__check\"\r\n            fill=\"none\"\r\n            d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n          />\r\n        </svg>\r\n      </div>\r\n\r\n      <div class=\"right\">\r\n        <div class=\"vx-form-group\">\r\n          <label class=\"vx-control-panel\">Risk Classification</label>\r\n          <div class=\"classification\">\r\n            <label\r\n              class=\"low\"\r\n              *ngFor=\"let class of riskClassification\"\r\n              [ngClass]=\"[class.class]\"\r\n            >\r\n              <input\r\n                type=\"radio\"\r\n                name=\"classification\"\r\n                [value]=\"class.value\"\r\n                [checked]=\"policyForm?.riskRating === class.value\"\r\n                [(ngModel)]=\"policyForm.riskRating\"\r\n              />\r\n              <span>{{ class.name }}</span>\r\n            </label>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Responsibility Center -->\r\n    <div\r\n      class=\"form-group-row\"\r\n      [appScrollInView]=\"scrollToBottom\"\r\n      *ngIf=\"policyForm.addResponsibilityCenters\"\r\n      [class.active]=\"activeSelector === 'rc'\"\r\n      [class.disabled]=\"\r\n        activeSelector &&\r\n        activeSelector !== 'rc' &&\r\n        sideSelectorElements.includes(activeSelector)\r\n      \"\r\n    >\r\n      <div class=\"left\" [class.checked]=\"policyForm?.selectedRCs?.length > 0\">\r\n        <img\r\n          *ngIf=\"\r\n            policyForm?.selectedRCs?.length == 0 || activeSelector === 'rc'\r\n          \"\r\n          src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/responsibility-center.svg\"\r\n          alt=\"\"\r\n        />\r\n\r\n        <svg\r\n          *ngIf=\"policyForm?.selectedRCs?.length > 0 && activeSelector !== 'rc'\"\r\n          class=\"checkIcon\"\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          viewBox=\"0 0 52 52\"\r\n        >\r\n          <circle\r\n            class=\"checkIcon__circle\"\r\n            cx=\"26\"\r\n            cy=\"26\"\r\n            r=\"25\"\r\n            fill=\"none\"\r\n          />\r\n          <path\r\n            class=\"checkIcon__check\"\r\n            fill=\"none\"\r\n            d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n          />\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=\"policyForm?.selectedRCs?.length == 0\">\r\n            <input\r\n              type=\"text\"\r\n              (click)=\"activateSelector('rc', true)\"\r\n              placeholder=\"Select Responsibility Center(s) that this policy relates to.\"\r\n              readonly\r\n            />\r\n          </div>\r\n\r\n          <div class=\"selected\" *ngIf=\"policyForm?.selectedRCs?.length > 0\">\r\n            <div\r\n              class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n            >\r\n              <ng-container\r\n                *ngFor=\"let rc of policyForm?.selectedRCs?.slice(0, 1)\"\r\n              >\r\n                <i\r\n                  class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                  (click)=\"remove('rc', rc)\"\r\n                  >&#xe9ae;</i\r\n                >\r\n                <span\r\n                  class=\"chipName vx-fs-11 vx-label-txt\"\r\n                  [appTooltip]=\"rc.item_name\"\r\n                  placement=\"bottom-left\"\r\n                  delay=\"0\"\r\n                  type=\"black\"\r\n                  [tooltipMandatory]=\"false\"\r\n                  >{{ rc.item_name }}</span\r\n                >\r\n              </ng-container>\r\n              <button\r\n                class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n                appPopover\r\n                (click)=\"rcPopover.popover()\"\r\n                placement=\"right\"\r\n                *ngIf=\"policyForm?.selectedRCs?.length > 1\"\r\n              >\r\n                +{{ policyForm?.selectedRCs?.slice(1).length }}\r\n              </button>\r\n            </div>\r\n            <button\r\n              class=\"edit\"\r\n              type=\"button\"\r\n              (click)=\"activateSelector('rc', true)\"\r\n            >\r\n              <i class=\"icons\">&#xe9ba;</i> Edit\r\n            </button>\r\n          </div>\r\n          <app-popover #rcPopover [dontCloseonClick]=\"true\">\r\n            <div class=\"wf-action-list\">\r\n              <ul class=\"action-item\">\r\n                <li\r\n                  *ngFor=\"\r\n                    let rc of policyForm?.selectedRCs | slice : 1;\r\n                    let j = index\r\n                  \"\r\n                >\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\r\n    <!-- Version -->\r\n    <div\r\n      *ngIf=\"policyForm.addVersion\"\r\n      class=\"form-group-row\"\r\n      [class.disabled]=\"\r\n        activeSelector && sideSelectorElements.includes(activeSelector)\r\n      \"\r\n    >\r\n      <div class=\"left\" [class.checked]=\"policyForm.policy_version\">\r\n        <img\r\n          src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/associated-risks.svg\"\r\n          alt=\"name\"\r\n          *ngIf=\"!policyForm.policy_version\"\r\n        />\r\n\r\n        <svg\r\n          *ngIf=\"policyForm.policy_version\"\r\n          class=\"checkIcon\"\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          viewBox=\"0 0 52 52\"\r\n        >\r\n          <circle\r\n            class=\"checkIcon__circle\"\r\n            cx=\"26\"\r\n            cy=\"26\"\r\n            r=\"25\"\r\n            fill=\"none\"\r\n          />\r\n          <path\r\n            class=\"checkIcon__check\"\r\n            fill=\"none\"\r\n            d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n          />\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\">VERSION</label>\r\n          <input\r\n            [(ngModel)]=\"policyForm.policy_version\"\r\n            (change)=\"onVersion($event)\"\r\n            type=\"text\"\r\n            placeholder=\"Specify the policy version.\"\r\n          />\r\n          <p\r\n            *ngIf=\"!isVersionValid\"\r\n            class=\"error-message\"\r\n            [appScrollInView]=\"true\"\r\n          >\r\n            {{ versionErrorMessage }}\r\n          </p>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Reviewer -->\r\n    <div\r\n      class=\"form-group-row\"\r\n      [appScrollInView]=\"scrollToBottom\"\r\n      *ngIf=\"policyForm.addReviewers && false\"\r\n      [class.active]=\"activeSelector === 'reviewer'\"\r\n      [class.disabled]=\"\r\n        activeSelector &&\r\n        activeSelector !== 'reviewer' &&\r\n        activeSelector !== 'reviewerFrequency' &&\r\n        sideSelectorElements.includes(activeSelector)\r\n      \"\r\n    >\r\n      <div\r\n        class=\"left\"\r\n        [class.checked]=\"policyForm?.selectedReviewers?.length > 0\"\r\n      >\r\n        <img\r\n          *ngIf=\"\r\n            policyForm?.selectedReviewers?.length == 0 ||\r\n            activeSelector === 'reviewer'\r\n          \"\r\n          src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/reviewer.svg\"\r\n          alt=\"\"\r\n        />\r\n\r\n        <svg\r\n          *ngIf=\"\r\n            policyForm?.selectedReviewers?.length > 0 &&\r\n            activeSelector !== 'reviewer'\r\n          \"\r\n          class=\"checkIcon\"\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          viewBox=\"0 0 52 52\"\r\n        >\r\n          <circle\r\n            class=\"checkIcon__circle\"\r\n            cx=\"26\"\r\n            cy=\"26\"\r\n            r=\"25\"\r\n            fill=\"none\"\r\n          />\r\n          <path\r\n            class=\"checkIcon__check\"\r\n            fill=\"none\"\r\n            d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n          />\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\r\n            class=\"select\"\r\n            *ngIf=\"policyForm?.selectedReviewers?.length == 0\"\r\n          >\r\n            <input\r\n              type=\"text\"\r\n              (click)=\"activateSelector('reviewer', true)\"\r\n              placeholder=\"Select the person responsible for reviewing this policy\"\r\n              readonly\r\n            />\r\n          </div>\r\n\r\n          <div\r\n            class=\"selected\"\r\n            *ngIf=\"policyForm?.selectedReviewers?.length > 0\"\r\n          >\r\n            <div\r\n              class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n            >\r\n              <ng-container\r\n                *ngFor=\"let reviewer of policyForm?.selectedReviewers\"\r\n              >\r\n                <i\r\n                  class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                  (click)=\"remove('reviewer', reviewer)\"\r\n                  >&#xe9ae;</i\r\n                >\r\n                <span\r\n                  class=\"chipName vx-fs-11 vx-label-txt\"\r\n                  [appTooltip]=\"reviewer.member_name\"\r\n                  placement=\"bottom-left\"\r\n                  delay=\"0\"\r\n                  type=\"black\"\r\n                  [tooltipMandatory]=\"false\"\r\n                  >{{ reviewer.member_name }}</span\r\n                >\r\n              </ng-container>\r\n            </div>\r\n\r\n            <button\r\n              class=\"edit\"\r\n              type=\"button\"\r\n              (click)=\"activateSelector('reviewer', true)\"\r\n            >\r\n              <i class=\"icons\">&#xe9ba;</i> Edit\r\n            </button>\r\n          </div>\r\n          <p\r\n            *ngIf=\"\r\n              submitted &&\r\n              policyForm?.selectedReviewers?.length == 0 &&\r\n              policyForm?.review_frequency_details\r\n            \"\r\n            class=\"error-message\"\r\n            [appScrollInView]=\"true\"\r\n          >\r\n            Select a reviewer for this policy.\r\n          </p>\r\n\r\n          <label class=\"vx-control-panel\">When? </label>\r\n\r\n          <div\r\n            *ngIf=\"policyForm?.review_frequency_details == ''\"\r\n            class=\"select button-sec\"\r\n          >\r\n            <input\r\n              type=\"text\"\r\n              (click)=\"activateSelector('reviewerFrequency', true)\"\r\n              [placeholder]=\"reviewerFrequencyPlaceholder\"\r\n              readonly\r\n            />\r\n            <button\r\n              (click)=\"activateSelector('reviewerFrequency', true)\"\r\n              type=\"button\"\r\n            >\r\n              Set A frequency\r\n            </button>\r\n          </div>\r\n          <div\r\n            *ngIf=\"policyForm?.review_frequency_details != ''\"\r\n            class=\"selected button-sec\"\r\n          >\r\n            <span class=\"chip\">{{ reviewerFrequencyPlaceholder }}</span>\r\n            <button\r\n              *ngIf=\"activeSelector !== 'reviewerFrequency'\"\r\n              type=\"button\"\r\n              class=\"edit\"\r\n              (click)=\"activateSelector('reviewerFrequency', true)\"\r\n            >\r\n              <i class=\"icons\">&#xe9ba;</i>Edit\r\n            </button>\r\n          </div>\r\n          <p\r\n            *ngIf=\"\r\n              submitted &&\r\n              policyForm?.selectedReviewers?.length > 0 &&\r\n              !policyForm?.review_frequency_details\r\n            \"\r\n            class=\"error-message\"\r\n            [appScrollInView]=\"true\"\r\n          >\r\n            Select the review schedule for this policy.\r\n          </p>\r\n\r\n          <app-format-and-evidence\r\n            (updateFiles)=\"saveSelectedList('reviewer_attachments', $event)\"\r\n            #formatEvidence\r\n            [mode]=\"'policyReviewer'\"\r\n            [organization_id]=\"organization_id\"\r\n            [formatEvidanceData]=\"policyForm?.documentsAndLinks\"\r\n          >\r\n          </app-format-and-evidence>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Overseer -->\r\n    <div\r\n      class=\"form-group-row\"\r\n      [appScrollInView]=\"scrollToBottom\"\r\n      *ngIf=\"policyForm.addOverseers\"\r\n      [class.active]=\"\r\n        activeSelector === 'ccEmail' || activeSelector === 'ccFail'\r\n      \"\r\n      [class.disabled]=\"\r\n        activeSelector &&\r\n        activeSelector !== 'ccEmail' &&\r\n        activeSelector !== 'ccFail' &&\r\n        sideSelectorElements.includes(activeSelector)\r\n      \"\r\n    >\r\n      <div\r\n        class=\"left\"\r\n        [class.checked]=\"\r\n          policyForm?.CCEmail?.length > 0 || policyForm?.CCFailEmail?.length > 0\r\n        \"\r\n      >\r\n        <img\r\n          *ngIf=\"\r\n            (policyForm?.CCFailEmail?.length == 0 &&\r\n              policyForm?.CCEmail?.length == 0) ||\r\n            activeSelector === 'ccEmail' ||\r\n            activeSelector === 'ccFail'\r\n          \"\r\n          src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/oversight.svg\"\r\n          alt=\"im\"\r\n        />\r\n\r\n        <svg\r\n          *ngIf=\"\r\n            (policyForm?.CCFailEmail?.length > 0 ||\r\n              policyForm?.CCEmail?.length > 0) &&\r\n            activeSelector !== 'ccEmail' &&\r\n            activeSelector !== 'ccFail'\r\n          \"\r\n          class=\"checkIcon\"\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          viewBox=\"0 0 52 52\"\r\n        >\r\n          <circle\r\n            class=\"checkIcon__circle\"\r\n            cx=\"26\"\r\n            cy=\"26\"\r\n            r=\"25\"\r\n            fill=\"none\"\r\n          />\r\n          <path\r\n            class=\"checkIcon__check\"\r\n            fill=\"none\"\r\n            d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n          />\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\r\n            class=\"select\"\r\n            *ngIf=\"\r\n              policyForm?.CCEmail?.length == 0 &&\r\n              policyForm?.CCGroupEmail.length == 0\r\n            \"\r\n          >\r\n            <input\r\n              type=\"text\"\r\n              (click)=\"activateSelector('ccEmail', true)\"\r\n              placeholder=\"Who should have oversight of this policy?\"\r\n              readonly\r\n            />\r\n          </div>\r\n          <div\r\n            class=\"selected\"\r\n            *ngIf=\"\r\n              policyForm?.CCEmail?.length > 0 ||\r\n              policyForm?.CCGroupEmail.length > 0\r\n            \"\r\n          >\r\n            <div\r\n              class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n              *ngIf=\"!groupEnabled\"\r\n            >\r\n              <ng-container\r\n                *ngFor=\"let ccEmail of policyForm?.CCEmail?.slice(0, 1)\"\r\n              >\r\n                <i\r\n                  class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                  (click)=\"remove('ccEmail', ccEmail)\"\r\n                  >&#xe9ae;</i\r\n                >\r\n                <span\r\n                  class=\"chipName vx-fs-11 vx-label-txt\"\r\n                  [appTooltip]=\"ccEmail.employee_name\"\r\n                  placement=\"bottom-left\"\r\n                  delay=\"0\"\r\n                  type=\"black\"\r\n                  [tooltipMandatory]=\"false\"\r\n                  >{{ ccEmail.employee_name }}</span\r\n                >\r\n              </ng-container>\r\n              <button\r\n                class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 greenBg\"\r\n                appPopover\r\n                (click)=\"ccEmailPopover.popover()\"\r\n                placement=\"right\"\r\n                *ngIf=\"policyForm?.CCEmail?.length > 1\"\r\n              >\r\n                +{{ policyForm?.CCEmail?.slice(1).length }}\r\n              </button>\r\n            </div>\r\n\r\n            <div *ngIf=\"groupEnabled\" class=\"chip-container\">\r\n              <div\r\n                class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n                *ngIf=\"groupEnabled && policyForm?.CCEmail?.length > 0\"\r\n              >\r\n                <i\r\n                  class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                  (click)=\"remove('ccEmail', policyForm?.CCEmail[0])\"\r\n                  >&#xe9ae;</i\r\n                >\r\n                <span\r\n                  class=\"chipName vx-fs-11 vx-label-txt\"\r\n                  [appTooltip]=\"policyForm?.CCEmail[0].employee_name\"\r\n                  placement=\"bottom-left\"\r\n                  delay=\"0\"\r\n                  type=\"black\"\r\n                  [tooltipMandatory]=\"false\"\r\n                  >{{ policyForm?.CCEmail[0].employee_name }}</span\r\n                >\r\n                <button\r\n                  class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 greenBg\"\r\n                  appPopover\r\n                  (click)=\"overseerPopover.popover()\"\r\n                  placement=\"right\"\r\n                  *ngIf=\"policyForm?.CCEmail?.length > 1\"\r\n                >\r\n                  +{{ policyForm?.CCEmail?.length - 1 }}\r\n                </button>\r\n              </div>\r\n\r\n              <div\r\n                class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\"\r\n                *ngIf=\"\r\n                  policyForm?.CCEmail.length > 0 &&\r\n                  policyForm?.CCGroupEmail?.length > 0\r\n                \"\r\n              >\r\n                &\r\n              </div>\r\n\r\n              <div\r\n                class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n                *ngIf=\"policyForm?.CCGroupEmail.length > 0\"\r\n              >\r\n                <i\r\n                  class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                  (click)=\"remove('ccGroupEmail', policyForm?.CCGroupEmail[0])\"\r\n                  >&#xe9ae;</i\r\n                >\r\n                <span\r\n                  class=\"chipName vx-fs-11 vx-label-txt\"\r\n                  [appTooltip]=\"policyForm?.CCGroupEmail[0]?.group_name\"\r\n                  placement=\"bottom-left\"\r\n                  delay=\"0\"\r\n                  type=\"black\"\r\n                  [tooltipMandatory]=\"false\"\r\n                  >{{ policyForm?.CCGroupEmail[0]?.group_name }}</span\r\n                >\r\n                <button\r\n                  class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n                  appPopover\r\n                  (click)=\"overseerGroup.popover()\"\r\n                  placement=\"right\"\r\n                  *ngIf=\"policyForm?.CCGroupEmail?.length > 1\"\r\n                >\r\n                  +{{ policyForm?.CCGroupEmail?.length - 1 }}\r\n                </button>\r\n              </div>\r\n            </div>\r\n\r\n            <button\r\n              class=\"edit\"\r\n              type=\"button\"\r\n              (click)=\"activateSelector('ccEmail', true)\"\r\n            >\r\n              <i class=\"icons\">&#xe9ba;</i> Edit\r\n            </button>\r\n          </div>\r\n\r\n          <div\r\n            class=\"select\"\r\n            *ngIf=\"\r\n              policyForm?.CCFailEmail?.length == 0 &&\r\n              policyForm?.CCFailEmailGroup?.length == 0\r\n            \"\r\n          >\r\n            <input\r\n              type=\"text\"\r\n              (click)=\"activateSelector('ccFail', true)\"\r\n              placeholder=\"Who should be notified if the policy is not attested on time?\"\r\n              readonly\r\n            />\r\n          </div>\r\n\r\n          <div\r\n            class=\"selected\"\r\n            *ngIf=\"\r\n              policyForm?.CCFailEmail?.length > 0 ||\r\n              policyForm?.CCFailEmailGroup?.length > 0\r\n            \"\r\n          >\r\n            <div\r\n              class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n              *ngIf=\"!groupEnabled\"\r\n            >\r\n              <ng-container\r\n                *ngFor=\"let ccFail of policyForm?.CCFailEmail?.slice(0, 1)\"\r\n              >\r\n                <i\r\n                  class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                  (click)=\"remove('ccFail', ccFail)\"\r\n                  >&#xe9ae;</i\r\n                >\r\n                <span\r\n                  class=\"chipName vx-fs-11 vx-label-txt\"\r\n                  [appTooltip]=\"ccFail.employee_name\"\r\n                  placement=\"bottom-left\"\r\n                  delay=\"0\"\r\n                  type=\"black\"\r\n                  [tooltipMandatory]=\"false\"\r\n                  >{{ ccFail.employee_name }}</span\r\n                >\r\n              </ng-container>\r\n              <button\r\n                class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 greenBg\"\r\n                appPopover\r\n                (click)=\"ccFailPopover.popover()\"\r\n                placement=\"right\"\r\n                *ngIf=\"policyForm?.CCFailEmail?.length > 1\"\r\n              >\r\n                +{{ policyForm?.CCFailEmail?.slice(1).length }}\r\n              </button>\r\n            </div>\r\n\r\n            <div *ngIf=\"groupEnabled\" class=\"chip-container\">\r\n              <div\r\n                class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n                *ngIf=\"groupEnabled && policyForm?.CCFailEmail.length > 0\"\r\n              >\r\n                <i\r\n                  class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                  (click)=\"remove('ccFail', policyForm?.CCFailEmail[0])\"\r\n                  >&#xe9ae;</i\r\n                >\r\n                <span\r\n                  class=\"chipName vx-fs-11 vx-label-txt\"\r\n                  [appTooltip]=\"policyForm?.CCFailEmail[0]?.employee_name\"\r\n                  placement=\"bottom-left\"\r\n                  delay=\"0\"\r\n                  type=\"black\"\r\n                  [tooltipMandatory]=\"false\"\r\n                  >{{ policyForm?.CCFailEmail[0]?.employee_name }}</span\r\n                >\r\n                <button\r\n                  class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 greenBg\"\r\n                  appPopover\r\n                  (click)=\"overseerFailPopover.popover()\"\r\n                  placement=\"right\"\r\n                  *ngIf=\"policyForm?.CCFailEmail?.length > 1\"\r\n                >\r\n                  +{{ policyForm?.CCFailEmail?.length - 1 }}\r\n                </button>\r\n              </div>\r\n\r\n              <div\r\n                class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\"\r\n                *ngIf=\"\r\n                  policyForm?.CCFailEmail?.length > 0 &&\r\n                  policyForm?.CCFailEmailGroup?.length > 0\r\n                \"\r\n              >\r\n                &\r\n              </div>\r\n\r\n              <div\r\n                class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n                *ngIf=\"policyForm?.CCFailEmailGroup?.length > 0\"\r\n              >\r\n                <i\r\n                  class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                  (click)=\"\r\n                    remove('ccGroupFailEmail', policyForm?.CCFailEmailGroup[0])\r\n                  \"\r\n                  >&#xe9ae;</i\r\n                >\r\n                <span\r\n                  class=\"chipName vx-fs-11 vx-label-txt\"\r\n                  [appTooltip]=\"policyForm?.CCFailEmailGroup[0]?.group_name\"\r\n                  placement=\"bottom-left\"\r\n                  delay=\"0\"\r\n                  type=\"black\"\r\n                  [tooltipMandatory]=\"false\"\r\n                  >{{ policyForm?.CCFailEmailGroup[0]?.group_name }}</span\r\n                >\r\n                <button\r\n                  class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n                  appPopover\r\n                  (click)=\"overseerFailGroup.popover()\"\r\n                  placement=\"right\"\r\n                  *ngIf=\"policyForm?.CCFailEmailGroup?.length > 1\"\r\n                >\r\n                  +{{ policyForm?.CCFailEmailGroup?.length - 1 }}\r\n                </button>\r\n              </div>\r\n            </div>\r\n            <button\r\n              class=\"edit\"\r\n              type=\"button\"\r\n              (click)=\"activateSelector('ccFail', true)\"\r\n            >\r\n              <i class=\"icons\">&#xe9ba;</i> Edit\r\n            </button>\r\n          </div>\r\n          <app-popover #ccEmailPopover [dontCloseonClick]=\"true\">\r\n            <div class=\"wf-action-list\">\r\n              <ul class=\"action-item\">\r\n                <li\r\n                  *ngFor=\"\r\n                    let ccEmail of policyForm?.CCEmail | slice : 1;\r\n                    let j = index\r\n                  \"\r\n                >\r\n                  <div class=\"avatar-card\">\r\n                    <span class=\"value\">\r\n                      <i class=\"icons\" (click)=\"remove('ccEmail', ccEmail)\"\r\n                        >&#xe90d;</i\r\n                      >\r\n                      {{ ccEmail.employee_name }}\r\n                    </span>\r\n                  </div>\r\n                </li>\r\n              </ul>\r\n            </div>\r\n          </app-popover>\r\n          <app-popover #ccFailPopover [dontCloseonClick]=\"true\">\r\n            <div class=\"wf-action-list\">\r\n              <ul class=\"action-item\">\r\n                <li\r\n                  *ngFor=\"\r\n                    let ccFail of policyForm?.CCFailEmail | slice : 1;\r\n                    let j = index\r\n                  \"\r\n                >\r\n                  <div class=\"avatar-card\">\r\n                    <span class=\"value\">\r\n                      <i class=\"icons\" (click)=\"remove('ccFail', ccFail)\"\r\n                        >&#xe90d;</i\r\n                      >\r\n                      {{ ccFail.employee_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    <!-- Related Documents -->\r\n    <div\r\n      class=\"form-group-row\"\r\n      [appScrollInView]=\"scrollToBottom\"\r\n      *ngIf=\"policyForm.addAssociatedDocuments\"\r\n      [class.disabled]=\"activeSelector && activeSelector !== 'name'\"\r\n    >\r\n      <div class=\"left\">\r\n        <img\r\n          *ngIf=\"policyForm.associatedDocuments.formatFiles?.length == 0\"\r\n          src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/format-evidence.svg\"\r\n          alt=\"im\"\r\n        />\r\n\r\n        <svg\r\n          *ngIf=\"policyForm.associatedDocuments.formatFiles?.length > 0\"\r\n          class=\"checkIcon\"\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          viewBox=\"0 0 52 52\"\r\n        >\r\n          <circle\r\n            class=\"checkIcon__circle\"\r\n            cx=\"26\"\r\n            cy=\"26\"\r\n            r=\"25\"\r\n            fill=\"none\"\r\n          />\r\n          <path\r\n            class=\"checkIcon__check\"\r\n            fill=\"none\"\r\n            d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n          />\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\">RELATED DOCUMENTS</label>\r\n          <app-format-and-evidence\r\n            (updateFiles)=\"saveSelectedList('associatedDocuments', $event)\"\r\n            [mode]=\"'policy'\"\r\n            [organization_id]=\"organization_id\"\r\n            [formatEvidanceData]=\"policyForm?.associatedDocuments\"\r\n          ></app-format-and-evidence>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Link Programs & Responsibilities -->\r\n    <div\r\n      *ngIf=\"policyForm?.addLinkProgram\"\r\n      class=\"form-group-row\"\r\n      [class.active]=\"activeSelector === 'linkProgram'\"\r\n      [class.disabled]=\"\r\n        activeSelector &&\r\n        activeSelector !== 'linkProgram' &&\r\n        sideSelectorElements.includes(activeSelector)\r\n      \"\r\n    >\r\n      <div\r\n        class=\"left\"\r\n        [class.checked]=\"\r\n          policyForm?.programSelectedValues?.program?.category_id\r\n        \"\r\n      >\r\n        <img\r\n          *ngIf=\"!policyForm?.programSelectedValues?.program?.category_id\"\r\n          src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/link-items.svg\"\r\n          alt=\"\"\r\n        />\r\n\r\n        <svg\r\n          *ngIf=\"policyForm?.programSelectedValues?.program?.category_id\"\r\n          class=\"checkIcon\"\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          viewBox=\"0 0 52 52\"\r\n        >\r\n          <circle\r\n            class=\"checkIcon__circle\"\r\n            cx=\"26\"\r\n            cy=\"26\"\r\n            r=\"25\"\r\n            fill=\"none\"\r\n          />\r\n          <path\r\n            class=\"checkIcon__check\"\r\n            fill=\"none\"\r\n            d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n          />\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            >LINK PROGRAMS & RESPONSIBILITIES</label\r\n          >\r\n          <div\r\n            *ngIf=\"!policyForm?.programSelectedValues?.program?.category_id\"\r\n            (click)=\"activateSelector('linkProgram', true)\"\r\n            class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\r\n            [class.disabled]=\"false\"\r\n          >\r\n            <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\r\n              Select Programs & responsibilities that are<br />associated with\r\n              this policy.\r\n            </div>\r\n          </div>\r\n\r\n          <div\r\n            class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\r\n            *ngIf=\"policyForm?.programSelectedValues?.program?.category_id\"\r\n          >\r\n            <div\r\n              class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n            >\r\n              <i\r\n                (click)=\"\r\n                  remove('linkProgram', policyForm?.programSelectedValues)\r\n                \"\r\n                class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                >&#xe9ae;</i\r\n              >\r\n              <span\r\n                class=\"chipName vx-fs-11 vx-label-txt\"\r\n                [appTooltip]=\"policyForm?.programSelectedValues?.program?.name\"\r\n                placement=\"bottom-left\"\r\n                delay=\"0\"\r\n                type=\"black\"\r\n                [tooltipMandatory]=\"false\"\r\n                >{{ policyForm?.programSelectedValues?.program?.name }}</span\r\n              >\r\n              <!-- <button\r\n                class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n                appPopover\r\n                (click)=\"programResponsibilityPopover.popover()\"\r\n                placement=\"right\"\r\n              >\r\n                +4\r\n              </button> -->\r\n            </div>\r\n            <app-popover\r\n              #programResponsibilityPopover\r\n              [dontCloseonClick]=\"true\"\r\n            >\r\n              <div class=\"wf-action-list\">\r\n                <ul class=\"action-item\">\r\n                  <li *ngFor=\"let data of [1, 1, 1, 1, 1, 1, 1]\">\r\n                    <div class=\"avatar-card\">\r\n                      <span\r\n                        class=\"value\"\r\n                        [appTooltip]=\"\r\n                          'Reporting information security weaknesses'\r\n                        \"\r\n                        placement=\"bottom-left\"\r\n                        delay=\"0\"\r\n                        type=\"black\"\r\n                        [tooltipMandatory]=\"false\"\r\n                      >\r\n                        <i class=\"icons\">&#xe90d;</i>\r\n                        Reporting information security weaknesses\r\n                      </span>\r\n                    </div>\r\n                  </li>\r\n                </ul>\r\n              </div>\r\n            </app-popover>\r\n            <button\r\n              class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\r\n              (click)=\"activateSelector('linkProgram', true)\"\r\n            >\r\n              <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Link Assessment -->\r\n    <div\r\n      *ngIf=\"policyForm.addLinkAssessment\"\r\n      class=\"form-group-row\"\r\n      [class.active]=\"activeSelector === 'isAssessment'\"\r\n      [class.disabled]=\"\r\n        activeSelector &&\r\n        activeSelector !== 'isAssessment' &&\r\n        sideSelectorElements.includes(activeSelector)\r\n      \"\r\n    >\r\n      <div class=\"left\" [class.checked]=\"policyForm?.assessment?.length\">\r\n        <img\r\n          *ngIf=\"!policyForm?.assessment?.length\"\r\n          src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/assessments.svg\"\r\n          alt=\"\"\r\n        />\r\n\r\n        <svg\r\n          *ngIf=\"policyForm?.assessment?.length\"\r\n          class=\"checkIcon\"\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          viewBox=\"0 0 52 52\"\r\n        >\r\n          <circle\r\n            class=\"checkIcon__circle\"\r\n            cx=\"26\"\r\n            cy=\"26\"\r\n            r=\"25\"\r\n            fill=\"none\"\r\n          />\r\n          <path\r\n            class=\"checkIcon__check\"\r\n            fill=\"none\"\r\n            d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n          />\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\">LINK ASSESSMENTS</label>\r\n          <div\r\n            *ngIf=\"policyForm?.assessment?.length === 0\"\r\n            (click)=\"activateSelector('isAssessment', true)\"\r\n            class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\r\n            [class.disabled]=\"false\"\r\n          >\r\n            <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\r\n              Select assessments that are associated with this<br />policy.\r\n            </div>\r\n          </div>\r\n\r\n          <div\r\n            *ngIf=\"policyForm?.assessment?.length > 0\"\r\n            class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\r\n          >\r\n            <div\r\n              class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n            >\r\n              <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                >&#xe9ae;</i\r\n              >\r\n              <span\r\n                class=\"chipName vx-fs-11 vx-label-txt\"\r\n                [appTooltip]=\"\r\n                  policyForm.assessment[0]?.assessmentDetails?.assessment_name\r\n                \"\r\n                placement=\"bottom-left\"\r\n                delay=\"0\"\r\n                type=\"black\"\r\n                [tooltipMandatory]=\"false\"\r\n                >{{\r\n                  policyForm.assessment[0]?.assessmentDetails?.assessment_name\r\n                }}</span\r\n              >\r\n            </div>\r\n            <app-popover\r\n              #programResponsibilityPopover\r\n              [dontCloseonClick]=\"true\"\r\n            >\r\n              <div class=\"wf-action-list\">\r\n                <ul class=\"action-item\">\r\n                  <li\r\n                    *ngFor=\"let assessment of policyForm.assessment | slice : 1\"\r\n                  >\r\n                    <div class=\"avatar-card\">\r\n                      <span\r\n                        class=\"value\"\r\n                        [appTooltip]=\"\r\n                          assessment?.assessmentDetails?.assessment_name\r\n                        \"\r\n                        placement=\"bottom-left\"\r\n                        delay=\"0\"\r\n                        type=\"black\"\r\n                        [tooltipMandatory]=\"false\"\r\n                      >\r\n                        <i class=\"icons\">&#xe90d;</i>\r\n                        {{ assessment?.assessmentDetails?.assessment_name }}\r\n                      </span>\r\n                    </div>\r\n                  </li>\r\n                </ul>\r\n              </div>\r\n            </app-popover>\r\n            <button\r\n              (click)=\"activateSelector('isAssessment', true)\"\r\n              class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\r\n            >\r\n              <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <app-checkbox-list\r\n    [config]=\"categoryConfig\"\r\n    [twoColumn]=\"false\"\r\n    [itemsList]=\"categoryList\"\r\n    [selectedItems]=\"policyForm.selectedCategories\"\r\n    [identifierKey]=\"'_id'\"\r\n    [displayKey]=\"'item_name'\"\r\n    [tooltipKey]=\"'item_name'\"\r\n    *ngIf=\"activeSelector === 'category'\"\r\n    (saveList)=\"saveSelectedList('category', $event)\"\r\n    (closeList)=\"disableSelector()\"\r\n  >\r\n  </app-checkbox-list>\r\n  <!-- <app-checkbox-list [config]=\"approvalWorkflowConfig\" [twoColumn]=\"true\"\r\n  [itemsList]=\"\"\r\n  [selectedItems]=\"policyForm.issueCCUsers\" [identifierKey]=\"'employee_email'\" [displayKey]=\"'employee_name'\" [tooltipKey]=\"'employee_email'\"\r\n  *ngIf=\"activeSelector==='ISSUE_CC'\" (saveList)=\"selectorAction($event,'ISSUE_CC')\"\r\n  (closeList)=\"fieldDeselector('ISSUE_CC')\">\r\n</app-checkbox-list> -->\r\n\r\n  <app-responsibility-centers-list\r\n    *ngIf=\"activeSelector === 'rc'\"\r\n    [responsibilityCentersList]=\"rcList\"\r\n    [selectedResponsibilityCenters]=\"policyForm.selectedRCs\"\r\n    [rcIdKey]=\"'item_id'\"\r\n    (saveSelectedList)=\"saveSelectedList('rc', $event)\"\r\n    (closeRcList)=\"disableSelector()\"\r\n  >\r\n  </app-responsibility-centers-list>\r\n\r\n  <app-users-radio-list\r\n    *ngIf=\"activeSelector === 'reviewer'\"\r\n    [itemEmailKey]=\"'member_email'\"\r\n    [usersList]=\"allReviewers\"\r\n    [headerText]=\"'Select a Reviewer'\"\r\n    [selectedUsers]=\"policyForm.selectedReviewers\"\r\n    [userIdKey]=\"'member_id'\"\r\n    [itemNameKey]=\"'member_name'\"\r\n    (saveSelectedList)=\"saveSelectedList('reviewer', $event)\"\r\n    (closeUsersList)=\"disableSelector()\"\r\n  >\r\n  </app-users-radio-list>\r\n\r\n  <app-owner-list\r\n    *ngIf=\"activeSelector === 'ccEmail' && !groupEnabled\"\r\n    [usersList]=\"overseersList\"\r\n    [singularText]=\"'User selected'\"\r\n    [pluralText]=\"'Users selected'\"\r\n    [selectedUsers]=\"policyForm.CCEmail\"\r\n    [userIdKey]=\"'employee_id'\"\r\n    [itemNameKey]=\"'employee_name'\"\r\n    (saveSelectedList)=\"saveSelectedList('ccEmail', $event)\"\r\n    (closeUsersList)=\"disableSelector()\"\r\n  >\r\n  </app-owner-list>\r\n\r\n  <user-group-list\r\n    *ngIf=\"activeSelector === 'ccEmail' && groupEnabled\"\r\n    [groupEnabled]=\"true\"\r\n    [userlist]=\"overseersList\"\r\n    [groupList]=\"overseerGroupsList\"\r\n    [selectedUsers]=\"policyForm.CCEmail\"\r\n    [selectedGroups]=\"policyForm.CCGroupEmail\"\r\n    (save)=\"saveSelectedList('ccEmail', $event)\"\r\n    (cancel)=\"disableSelector()\"\r\n    [featureflag]=\"groupEnabled\"\r\n  >\r\n  </user-group-list>\r\n\r\n  <app-owner-list\r\n    *ngIf=\"activeSelector === 'ccFail' && !groupEnabled\"\r\n    [usersList]=\"overseersList\"\r\n    [singularText]=\"'User selected'\"\r\n    [pluralText]=\"'Users selected'\"\r\n    [selectedUsers]=\"policyForm.CCFailEmail\"\r\n    [userIdKey]=\"'employee_id'\"\r\n    [itemNameKey]=\"'employee_name'\"\r\n    (saveSelectedList)=\"saveSelectedList('ccFail', $event)\"\r\n    (closeUsersList)=\"disableSelector()\"\r\n  >\r\n  </app-owner-list>\r\n\r\n  <user-group-list\r\n    *ngIf=\"activeSelector === 'ccFail' && groupEnabled\"\r\n    [groupEnabled]=\"true\"\r\n    [userlist]=\"overseersList\"\r\n    [groupList]=\"overseerGroupsList\"\r\n    [selectedUsers]=\"policyForm.CCFailEmail\"\r\n    [selectedGroups]=\"policyForm.CCFailEmailGroup\"\r\n    (save)=\"saveSelectedList('ccFail', $event)\"\r\n    (cancel)=\"disableSelector()\"\r\n    [featureflag]=\"groupEnabled\"\r\n  >\r\n  </user-group-list>\r\n\r\n  <app-group-users-list\r\n    *ngIf=\"activeSelector === 'assignees' && !groupEnabled\"\r\n    [usersList]=\"assigneesList\"\r\n    [groupsList]=\"groupsList\"\r\n    [selectedUsers]=\"policyForm.selectedAssignees\"\r\n    [userIdKey]=\"'my_member_id'\"\r\n    (saveSelectedList)=\"saveSelectedList('assignees', $event)\"\r\n    (closeUsersList)=\"disableSelector()\"\r\n  >\r\n  </app-group-users-list>\r\n\r\n  <user-group-list\r\n    *ngIf=\"activeSelector === 'assignees' && groupEnabled\"\r\n    [groupEnabled]=\"true\"\r\n    [userlist]=\"ownerlist\"\r\n    [groupList]=\"groupsList\"\r\n    (save)=\"saveSelectedList('assignees', $event)\"\r\n    (cancel)=\"disableSelector()\"\r\n    [selectedGroups]=\"policyForm.selectedGroupAssignee\"\r\n    [selectedUsers]=\"policyForm.selectedAssignees\"\r\n    [featureflag]=\"groupEnabled\"\r\n  >\r\n  </user-group-list>\r\n\r\n  <app-owner-list\r\n    *ngIf=\"activeSelector === 'approvers' && false\"\r\n    [listHeading]=\"'Select Approvers'\"\r\n    [singularText]=\"'User selected'\"\r\n    [pluralText]=\"'Users selected'\"\r\n    [usersList]=\"allApprovers\"\r\n    [showWorkflow]=\"true\"\r\n    [selectedUsers]=\"\r\n      addMoreLevels\r\n        ? []\r\n        : policyForm.selectedApprovers[approversListIndex].approvers\r\n    \"\r\n    [userIdKey]=\"'member_id'\"\r\n    [itemEmailKey]=\"'member_email'\"\r\n    [itemNameKey]=\"'member_name'\"\r\n    (saveSelectedList)=\"saveSelectedList('approvers', $event)\"\r\n    (closeUsersList)=\"disableSelector()\"\r\n    [mode]=\"mode\"\r\n    [reviewerWorkflowType]=\"workflowType\"\r\n    (reviewerWorkflowTypeChange)=\"reviewerTypeChange($event)\"\r\n    [workflowList]=\"workflowList\"\r\n    [workflowText]=\"'Approval Workflow'\"\r\n  >\r\n  </app-owner-list>\r\n\r\n  <app-frequency-container\r\n    *ngIf=\"activeSelector === 'frequency'\"\r\n    [mode]=\"'policy'\"\r\n    [frequencyDetails]=\"frequencyDetails\"\r\n    (selectedFrequency)=\"frequencyData($event)\"\r\n    [feature]=\"feature\"\r\n    [pageType]=\"'policy'\"\r\n    (closeFrequency)=\"disableSelector()\"\r\n  ></app-frequency-container>\r\n\r\n  <app-frequency-container\r\n    *ngIf=\"activeSelector === 'reviewerFrequency'\"\r\n    [mode]=\"'reviewerFrequency'\"\r\n    [frequencyDetails]=\"reviewerFrequencyDetails\"\r\n    (selectedFrequency)=\"reviewerFrequencyData($event)\"\r\n    [feature]=\"feature\"\r\n    [pageType]=\"'policy'\"\r\n    (closeFrequency)=\"disableSelector()\"\r\n  ></app-frequency-container>\r\n\r\n  <vc-link-program\r\n    *ngIf=\"activeSelector === 'linkProgram'\"\r\n    (close)=\"disableSelector()\"\r\n    [policy]=\"policyForm\"\r\n    [selectedProgram]=\"policyForm?.programSelectedValues\"\r\n    [mode]=\"mode\"\r\n    [selectedLinkProgram]=\"selectedLinkProgram\"\r\n    (changeTab)=\"changeTab('linkedPrograms')\"\r\n    (updatedProgramDetails)=\"updatedProgramDetails($event)\"\r\n  >\r\n  </vc-link-program>\r\n\r\n  <app-checkpoints-policy-container\r\n    (closeCheckPoint)=\"disableSelector()\"\r\n    [checkpointData]=\"policyForm?.checkpointDetails\"\r\n    [requiredPoint]=\"policyForm?.passingMarks\"\r\n    *ngIf=\"activeSelector === 'checkpoints'\"\r\n    (saveCheckPoint)=\"saveSelectedList('checkpoints', $event)\"\r\n  ></app-checkpoints-policy-container>\r\n  <app-loader-inline *ngIf=\"loader\"></app-loader-inline>\r\n\r\n  <app-approval-workflow\r\n    *ngIf=\"enableApprovalWorkflow\"\r\n    [selectedCategory]=\"policyForm?.selectedCategories\"\r\n    [approverWorkFlowList]=\"approverWorkFlowList\"\r\n    [allApprovers]=\"allApprovers\"\r\n    (listCancelClicked)=\"listCancelClicked($event)\"\r\n    (selectedWorkflowNext)=\"selectedApprovalWorkflow($event)\"\r\n    (saveApprovalWorkflow)=\"approvalWorkflowAPICall($event)\"\r\n    [editApprovalWorkflow]=\"editApprovalWorkflow\"\r\n    [createApprovalClick]=\"createApprovalClick\"\r\n    (closeCreateClicked)=\"closeClickedCreateForm()\"\r\n    [editWorkflowLevel]=\"editWorkflowLevel\"\r\n  ></app-approval-workflow>\r\n  <!-- <app-select-approvers></app-select-approvers> -->\r\n\r\n  <app-policy-access *ngIf=\"activeSelector === 'policyAccess'\"\r\n    [policyAccessType]=\"policyForm?.policy_access_type\"\r\n    (close)=\"disableSelector()\"\r\n    [orgUsersList]=\"usersList\"\r\n    [usersAccessList]=\"usersAccessList\"\r\n    [groupList]=\"overseerGroupsList\"\r\n    [groupsAccessList]=\"groupsAccessList\"\r\n    [selectedUsers]=\"policyForm?.policy_access_owners\"\r\n    [selectedGroups]=\"policyForm?.policy_access_groups\"\r\n    [disabledIds]=\"usersAccessListIds\"\r\n    [disabledGroupIds]=\"groupsAccessListIds\"\r\n    [futureUsersWillSelect]=\"policyForm?.availableOnPortal\"\r\n    (saveCheckPoint)=\"saveSelectedList('policyAccess', $event)\"\r\n    (setPolicyAccessType)=\"policyForm.policy_access_type = $event\"\r\n  >\r\n\r\n  </app-policy-access>\r\n</ng-container>\r\n<ng-container *ngIf=\"showCreateDocuments\">\r\n  <!-- <app-create-documents *ngIf=\"showCreateDocuments\"\r\n   [organization_id]=\"organization_id\"\r\n   [member_obj_id]=\"member_obj_id\"\r\n   [userInfo]=\"userInfo\"\r\n   [policyId]=\"policyId\"\r\n   [policyName]=\"policyForm.policyName\"\r\n   (disconnectRefresh)=\"disconnectRefresh.emit(false)\"\r\n   (editPolicy)=\"editPolicyFromDocuments()\"\r\n   ></app-create-documents> -->\r\n  <lib-document-section\r\n    *ngIf=\"showCreateDocuments\"\r\n    [organization_id]=\"organization_id\"\r\n    [member_obj_id]=\"member_obj_id\"\r\n    [userInfo]=\"userInfo\"\r\n    [policyId]=\"policyId\"\r\n    [policyName]=\"policyForm.policyName\"\r\n    (disconnectRefresh)=\"disconnectRefresh.emit(false)\"\r\n    (editPolicy)=\"editPolicyFromDocuments()\"\r\n  ></lib-document-section>\r\n</ng-container>\r\n\r\n<app-assessment-list\r\n  *ngIf=\"activeSelector === 'isAssessment'\"\r\n  [program_ids]=\"''\"\r\n  [isEdit]=\"policyForm?.assessment?.length\"\r\n  (cancelAssessment)=\"saveSelectedList('isAssessment', false)\"\r\n  [selectedAssessment]=\"policyForm?.assessment[0]\"\r\n  (onAssessmentSelect)=\"\r\n    onAssessmentSelect($event); saveSelectedList('isAssessment', false)\r\n  \"\r\n></app-assessment-list>\r\n\r\n<app-owner-list\r\n  *ngIf=\"activeSelector === 'approvers' && false\"\r\n  [listHeading]=\"'Select Approvers'\"\r\n  [singularText]=\"'User selected'\"\r\n  [pluralText]=\"'Users selected'\"\r\n  [usersList]=\"allApprovers\"\r\n  [showWorkflow]=\"true\"\r\n  [selectedUsers]=\"\r\n    addMoreLevels\r\n      ? []\r\n      : policyForm.selectedApprovers[approversListIndex].approvers\r\n  \"\r\n  [userIdKey]=\"'member_id'\"\r\n  [itemEmailKey]=\"'member_email'\"\r\n  [itemNameKey]=\"'member_name'\"\r\n  (saveSelectedList)=\"saveSelectedList('approvers', $event)\"\r\n  (closeUsersList)=\"disableSelector()\"\r\n  [mode]=\"mode\"\r\n  [reviewerWorkflowType]=\"workflowType\"\r\n  (reviewerWorkflowTypeChange)=\"reviewerTypeChange($event)\"\r\n  [workflowList]=\"workflowList\"\r\n  [workflowText]=\"'Approval Workflow'\"\r\n>\r\n</app-owner-list>\r\n\r\n<app-owner-list\r\n  *ngIf=\"activeSelector === 'owners'\"\r\n  [listHeading]=\"'Select Owner(s)'\"\r\n  [singularText]=\"'User selected'\"\r\n  [pluralText]=\"'Users selected'\"\r\n  [usersList]=\"allApprovers\"\r\n  [showWorkflow]=\"false\"\r\n  [userIdKey]=\"'member_id'\"\r\n  [itemEmailKey]=\"'member_email'\"\r\n  [itemNameKey]=\"'member_name'\"\r\n  (saveSelectedList)=\"saveSelectedList('owners', $event)\"\r\n  (closeUsersList)=\"disableSelector()\"\r\n  [mode]=\"mode\"\r\n  [selectedUsers]=\"policyForm?.policy_owners ?? []\"\r\n>\r\n</app-owner-list>\r\n",
+                template: "<!-- <p>workflow-policy works!</p> -->\r\n\r\n<ng-container *ngIf=\"!showCreateDocuments\">\r\n  <div class=\"workflow-policy\">\r\n    <!-- Policy Name -->\r\n    <div\r\n      class=\"form-group-row\"\r\n      [class.disabled]=\"activeSelector && activeSelector !== 'name'\"\r\n    >\r\n      <div class=\"left\" [class.checked]=\"policyForm?.policyName\">\r\n        <img\r\n          src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/what.svg\"\r\n          alt=\"name\"\r\n          *ngIf=\"!policyForm?.policyName || activeSelector === 'name'\"\r\n        />\r\n\r\n        <svg\r\n          *ngIf=\"policyForm?.policyName && activeSelector !== 'name'\"\r\n          class=\"checkIcon\"\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          viewBox=\"0 0 52 52\"\r\n        >\r\n          <circle\r\n            class=\"checkIcon__circle\"\r\n            cx=\"26\"\r\n            cy=\"26\"\r\n            r=\"25\"\r\n            fill=\"none\"\r\n          />\r\n          <path\r\n            class=\"checkIcon__check\"\r\n            fill=\"none\"\r\n            d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n          />\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            Policy Name <span class=\"required\">*</span>\r\n          </label>\r\n          <input\r\n            type=\"text\"\r\n            (keydown)=\"activeSelector = 'name'\"\r\n            (focusin)=\"activateSelector('name', true)\"\r\n            *ngIf=\"policyForm.policyName == '' || activeSelector === 'name'\"\r\n            (focusout)=\"activateSelector('name', false)\"\r\n            [ngModel]=\"policyForm.policyName\"\r\n            (ngModelChange)=\"policyForm.policyName = changeName($event)\"\r\n            placeholder=\"Name this policy\"\r\n          />\r\n          <div\r\n            class=\"selected\"\r\n            *ngIf=\"policyForm.policyName.length && activeSelector !== 'name'\"\r\n          >\r\n            <div class=\"chip-container\">\r\n              <span class=\"value\">{{ policyForm.policyName }}</span>\r\n            </div>\r\n            <button\r\n              class=\"edit\"\r\n              (click)=\"activateSelector('name', true)\"\r\n              type=\"button\"\r\n            >\r\n              <i class=\"icons\">&#xe9ba;</i> Edit\r\n            </button>\r\n          </div>\r\n\r\n          <p\r\n            *ngIf=\"submitted && !policyForm.policyName.trim()\"\r\n            [appScrollInView]=\"true\"\r\n            class=\"error-message\"\r\n          >\r\n            Please enter a name for this policy.\r\n          </p>\r\n          <marx-editor\r\n            [(ngModel)]=\"policyForm.policyNotes\"\r\n            [editorConfig]=\"description\"\r\n          ></marx-editor>\r\n          <!-- <app-cs-switch\r\n            [(ngValue)]=\"policyForm.availableOnPortal\"\r\n            (ngValueChange)=\"availabilityOnPortal($event)\"\r\n          >\r\n            Do you want this policy to be available on the portal?\r\n            <i\r\n              class=\"icons\"\r\n              [appTooltip]=\"\r\n                'The policies that you intend to make accessible to the entire organization can be added to the policy portal. It is like a shared catalog of all active & updated policies that any logged in user can read/download for reference.'\r\n              \"\r\n              placement=\"bottom-right\"\r\n              type=\"white\"\r\n              delay=\"0\"\r\n              [tooltipMandatory]=\"true\"\r\n              >&#xe932;</i\r\n            >\r\n          </app-cs-switch>\r\n          <app-cs-switch\r\n            *ngIf=\"policyForm.availableOnPortal\"\r\n            [(ngValue)]=\"policyForm.acceptSuggestions\"\r\n          >\r\n            Accept suggestions\r\n            <i\r\n              class=\"icons\"\r\n              [appTooltip]=\"\r\n                'If enabled, users can provide improvement suggestions to the policies that are listed on the Policy Portal.'\r\n              \"\r\n              placement=\"bottom-right\"\r\n              type=\"white\"\r\n              delay=\"0\"\r\n              [tooltipMandatory]=\"true\"\r\n              >&#xe932;</i\r\n            ></app-cs-switch> -->\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Policy Category -->\r\n    <div\r\n      class=\"form-group-row\"\r\n      [class.active]=\"activeSelector === 'category'\"\r\n      [class.disabled]=\"\r\n        activeSelector &&\r\n        activeSelector !== 'category' &&\r\n        sideSelectorElements.includes(activeSelector)\r\n      \"\r\n    >\r\n      <div\r\n        class=\"left\"\r\n        [class.checked]=\"policyForm?.selectedCategories?.length > 0\"\r\n      >\r\n        <img\r\n          *ngIf=\"\r\n            policyForm?.selectedCategories?.length == 0 ||\r\n            activeSelector === 'category'\r\n          \"\r\n          src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/category.svg\"\r\n          alt=\"\"\r\n        />\r\n\r\n        <svg\r\n          *ngIf=\"\r\n            policyForm?.selectedCategories?.length > 0 &&\r\n            activeSelector !== 'category'\r\n          \"\r\n          class=\"checkIcon\"\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          viewBox=\"0 0 52 52\"\r\n        >\r\n          <circle\r\n            class=\"checkIcon__circle\"\r\n            cx=\"26\"\r\n            cy=\"26\"\r\n            r=\"25\"\r\n            fill=\"none\"\r\n          />\r\n          <path\r\n            class=\"checkIcon__check\"\r\n            fill=\"none\"\r\n            d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n          />\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            >Policy Category <span class=\"required\">*</span>\r\n          </label>\r\n          <div\r\n            class=\"select\"\r\n            *ngIf=\"policyForm?.selectedCategories?.length == 0\"\r\n          >\r\n            <input\r\n              type=\"text\"\r\n              (click)=\"activateSelector('category', true)\"\r\n              placeholder=\"Select a category for this policy.\"\r\n              readonly\r\n            />\r\n          </div>\r\n\r\n          <div\r\n            class=\"selected\"\r\n            *ngIf=\"policyForm?.selectedCategories?.length > 0\"\r\n          >\r\n            <div\r\n              class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n            >\r\n              <ng-container\r\n                *ngFor=\"\r\n                  let category of policyForm?.selectedCategories?.slice(0, 1)\r\n                \"\r\n              >\r\n                <i\r\n                  (click)=\"remove('category', category)\"\r\n                  class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                  >&#xe9ae;</i\r\n                >\r\n                <span\r\n                  class=\"chipName vx-fs-11 vx-label-txt\"\r\n                  [appTooltip]=\"category.item_name\"\r\n                  placement=\"bottom-left\"\r\n                  delay=\"0\"\r\n                  type=\"black\"\r\n                  [tooltipMandatory]=\"false\"\r\n                  >{{ category.item_name }}</span\r\n                >\r\n              </ng-container>\r\n              <button\r\n                class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n                *ngIf=\"policyForm?.selectedCategories?.length > 1\"\r\n                type=\"button\"\r\n                appPopover\r\n                (click)=\"category.popover()\"\r\n                placement=\"right\"\r\n              >\r\n                +{{ policyForm?.selectedCategories?.slice(1).length }}\r\n              </button>\r\n            </div>\r\n\r\n            <!-- <div class=\"chip-container\" [class.more-one]=\"policyForm?.selectedCategories?.length>1\"\r\n                          [class.plus]=\"policyForm?.selectedCategories?.length>2\">\r\n                          <span class=\"chip\" *ngFor=\"let category of policyForm?.selectedCategories?.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=\"policyForm?.selectedCategories?.length > 2\" type=\"button\"\r\n                              appPopover (click)=\"category.popover()\" placement=\"right\">+\r\n                              {{policyForm?.selectedCategories?.slice(2).length}}</button>\r\n                      </div> -->\r\n            <button\r\n              *ngIf=\"activeSelector !== 'category'\"\r\n              class=\"edit\"\r\n              type=\"button\"\r\n              (click)=\"activateSelector('category', true)\"\r\n            >\r\n              <i class=\"icons\">&#xe9ba;</i> Edit\r\n            </button>\r\n          </div>\r\n          <app-popover #category [dontCloseonClick]=\"true\">\r\n            <div class=\"wf-action-list\">\r\n              <ul class=\"action-item\">\r\n                <li\r\n                  *ngFor=\"\r\n                    let category of policyForm?.selectedCategories | slice : 1;\r\n                    let j = index\r\n                  \"\r\n                >\r\n                  <div class=\"avatar-card\">\r\n                    <span class=\"value\">\r\n                      <i class=\"icons\" (click)=\"remove('category', category)\"\r\n                        >&#xe90d;</i\r\n                      >\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          <p\r\n            *ngIf=\"submitted && policyForm?.selectedCategories?.length == 0\"\r\n            [appScrollInView]=\"true\"\r\n            class=\"error-message\"\r\n          >\r\n            Please select the category for this policy.\r\n          </p>\r\n        </div>\r\n\r\n        <div class=\"vx-form-group\" *ngIf=\"policyForm?.customTags?.length > 0\">\r\n          <ng-container *ngFor=\"let tag of policyForm?.customTags\">\r\n            <label class=\"vx-control-panel vx-mt-2\">{{ tag.tagname }}</label>\r\n            <input\r\n              type=\"text\"\r\n              [(ngModel)]=\"tag.value\"\r\n              placeholder=\"{{ tag.tagname }}\"\r\n            />\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Effective Date -->\r\n    <div\r\n      class=\"form-group-row\"\r\n      [class.disabled]=\"activeSelector && activeSelector !== 'name'\"\r\n    >\r\n      <div class=\"left\" [class.checked]=\"false\">\r\n        <img\r\n          src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/when.svg\"\r\n          alt=\"\"\r\n        />\r\n\r\n        <svg\r\n          *ngIf=\"false\"\r\n          class=\"checkIcon\"\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          viewBox=\"0 0 52 52\"\r\n        >\r\n          <circle\r\n            class=\"checkIcon__circle\"\r\n            cx=\"26\"\r\n            cy=\"26\"\r\n            r=\"25\"\r\n            fill=\"none\"\r\n          />\r\n          <path\r\n            class=\"checkIcon__check\"\r\n            fill=\"none\"\r\n            d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n          />\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\">Effective Date</label>\r\n          <div class=\"date-time-picker\">\r\n            <div class=\"picker-group\">\r\n              <input\r\n                type=\"text\"\r\n                readonly\r\n                placeholder=\"Select the effective date of the policy.\"\r\n                [value]=\"policyForm.policyDueDate | date : 'dd MMM yyyy'\"\r\n                (click)=\"openDatePicker()\"\r\n              />\r\n              <i class=\"icons\">&#xe92d;</i>\r\n              <dp-date-picker\r\n                #datePicker\r\n                (onSelect)=\"datePickerOverlay = false; closeDatePicker($event)\"\r\n                [config]=\"dateConfig\"\r\n                [(ngModel)]=\"policyForm.policyDueDate\"\r\n              >\r\n              </dp-date-picker>\r\n              <div\r\n                class=\"vx-overlay\"\r\n                (click)=\"closeDatePicker($event)\"\r\n                *ngIf=\"datePickerOverlay\"\r\n              ></div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Policy Owner -->\r\n    <div\r\n      class=\"form-group-row\"\r\n      [class.active]=\"activeSelector === 'owners'\"\r\n      [class.disabled]=\"\r\n        activeSelector &&\r\n        activeSelector !== 'owners' &&\r\n        sideSelectorElements.includes(activeSelector)\r\n      \"\r\n    >\r\n      <div class=\"left\" [class.checked]=\"policyForm.policy_owners?.length\">\r\n        <img\r\n          *ngIf=\"!policyForm.policy_owners?.length\"\r\n          src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/im-creating.svg\"\r\n          alt=\"\"\r\n        />\r\n\r\n        <svg\r\n          *ngIf=\"policyForm.policy_owners?.length\"\r\n          class=\"checkIcon\"\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          viewBox=\"0 0 52 52\"\r\n        >\r\n          <circle\r\n            class=\"checkIcon__circle\"\r\n            cx=\"26\"\r\n            cy=\"26\"\r\n            r=\"25\"\r\n            fill=\"none\"\r\n          />\r\n          <path\r\n            class=\"checkIcon__check\"\r\n            fill=\"none\"\r\n            d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n          />\r\n        </svg>\r\n      </div>\r\n      <div class=\"right\">\r\n        <div class=\"vx-form-group\">\r\n          <div class=\"vx-d-flex vx-align-center vx-justify-between\">\r\n            <label class=\"vx-control-panel\">POLICY OWNER(S)</label>\r\n          </div>\r\n          <div\r\n            *ngIf=\"!policyForm.policy_owners?.length\"\r\n            (click)=\"activateSelector('owners', true)\"\r\n            class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\r\n            [class.disabled]=\"!policyForm?.selectedCategories?.length\"\r\n          >\r\n            <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\r\n              Select owners for this policy.\r\n            </div>\r\n          </div>\r\n\r\n          <div\r\n            *ngIf=\"policyForm.policy_owners?.length\"\r\n            class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\r\n          >\r\n            <div class=\"vx-d-flex vx-align-center\">\r\n              <div\r\n                class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n              >\r\n                <i\r\n                  (click)=\"remove('owners', policyForm?.policy_owners[0], 0)\"\r\n                  class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                  >&#xe9ae;</i\r\n                >\r\n                <span\r\n                  class=\"chipName vx-fs-11 vx-label-txt\"\r\n                  [appTooltip]=\"policyForm?.policy_owners[0]?.member_name\"\r\n                  placement=\"bottom-left\"\r\n                  delay=\"0\"\r\n                  type=\"black\"\r\n                  [tooltipMandatory]=\"false\"\r\n                  >{{ policyForm?.policy_owners[0]?.member_name }}</span\r\n                >\r\n\r\n                <button\r\n                  *ngIf=\"policyForm?.policy_owners?.length > 1\"\r\n                  class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 greenBg\"\r\n                  appPopover\r\n                  (click)=\"policyUserPopover.popover()\"\r\n                  placement=\"right\"\r\n                >\r\n                  + {{ policyForm?.policy_owners.length - 1 }}\r\n                </button>\r\n              </div>\r\n              <div\r\n                *ngIf=\"false\"\r\n                class=\"vx-fs-12 vx-paragraph-txt vx-ml-1 vx-mr-1\"\r\n              >\r\n                &\r\n              </div>\r\n              <div\r\n                *ngIf=\"false\"\r\n                class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n              >\r\n                <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                  >&#xe9ae;</i\r\n                >\r\n                <span\r\n                  class=\"chipName vx-fs-11 vx-label-txt\"\r\n                  [appTooltip]=\"'Samantha Jones'\"\r\n                  placement=\"bottom-left\"\r\n                  delay=\"0\"\r\n                  type=\"black\"\r\n                  [tooltipMandatory]=\"false\"\r\n                  >Samantha Jones</span\r\n                >\r\n                <button\r\n                  class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n                  appPopover\r\n                  (click)=\"policyGroupPopover.popover()\"\r\n                  placement=\"right\"\r\n                >\r\n                  +4\r\n                </button>\r\n              </div>\r\n              <app-popover #policyUserPopover [dontCloseonClick]=\"true\">\r\n                <div class=\"wf-action-list\">\r\n                  <ul class=\"action-item\">\r\n                    <li\r\n                      *ngFor=\"\r\n                        let owner of policyForm?.policy_owners | slice : 1;\r\n                        let i = index\r\n                      \"\r\n                    >\r\n                      <div class=\"avatar-card\">\r\n                        <span\r\n                          class=\"value\"\r\n                          [appTooltip]=\"owner?.member_name\"\r\n                          placement=\"bottom-left\"\r\n                          delay=\"0\"\r\n                          type=\"black\"\r\n                          [tooltipMandatory]=\"false\"\r\n                        >\r\n                          <i\r\n                            (click)=\"remove('owners', owner, i + 1)\"\r\n                            class=\"icons\"\r\n                            >&#xe90d;</i\r\n                          >\r\n                          {{ owner?.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 #policyGroupPopover [dontCloseonClick]=\"true\">\r\n                <div class=\"wf-action-list\">\r\n                  <ul class=\"action-item\">\r\n                    <li *ngFor=\"let data of [1, 1, 1, 1, 1, 1, 1]\">\r\n                      <div class=\"avatar-card\">\r\n                        <span\r\n                          class=\"value\"\r\n                          [appTooltip]=\"'Harshvardhan Kariwala'\"\r\n                          placement=\"bottom-left\"\r\n                          delay=\"0\"\r\n                          type=\"black\"\r\n                          [tooltipMandatory]=\"false\"\r\n                        >\r\n                          <i class=\"icons\">&#xe90d;</i>\r\n                          Harshvardhan Kariwala\r\n                        </span>\r\n                      </div>\r\n                    </li>\r\n                  </ul>\r\n                </div>\r\n              </app-popover>\r\n            </div>\r\n            <button\r\n              (click)=\"activateSelector('owners', true)\"\r\n              class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\r\n            >\r\n              <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\r\n            </button>\r\n          </div>\r\n          <p\r\n            *ngIf=\"submitted && !policyForm?.policy_owners?.length\"\r\n            [appScrollInView]=\"true\"\r\n            class=\"error-message\"\r\n          >\r\n            Select owners for this policy.\r\n          </p>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Review -->\r\n    <div\r\n      class=\"form-group-row\"\r\n      [class.active]=\"\r\n        activeSelector === 'reviewer' || activeSelector === 'reviewerFrequency'\r\n      \"\r\n      [class.disabled]=\"\r\n        activeSelector &&\r\n        activeSelector !== 'reviewer' &&\r\n        activeSelector !== 'reviewerFrequency' &&\r\n        sideSelectorElements.includes(activeSelector)\r\n      \"\r\n    >\r\n      <div class=\"left\" [class.checked]=\"policyForm?.addReviewers\">\r\n        <img\r\n          *ngIf=\"!policyForm?.addReviewers\"\r\n          src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/reviewer.svg\"\r\n          alt=\"\"\r\n        />\r\n\r\n        <svg\r\n          *ngIf=\"policyForm?.addReviewers\"\r\n          class=\"checkIcon\"\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          viewBox=\"0 0 52 52\"\r\n        >\r\n          <circle\r\n            class=\"checkIcon__circle\"\r\n            cx=\"26\"\r\n            cy=\"26\"\r\n            r=\"25\"\r\n            fill=\"none\"\r\n          />\r\n          <path\r\n            class=\"checkIcon__check\"\r\n            fill=\"none\"\r\n            d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n          />\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\">REVIEW</label>\r\n          <div\r\n            class=\"reviewSelection vx-p-3 vx-pb-0\"\r\n            [class.disabled]=\"\r\n              activeSelector && sideSelectorElements.includes(activeSelector)\r\n            \"\r\n          >\r\n            <div class=\"vx-fs-13 vx-paragraph-txt vx-mb-1\">\r\n              Does this policy need to be reviewed?\r\n            </div>\r\n            <app-cs-radio\r\n              name=\"review-type\"\r\n              [checked]=\"policyForm?.addReviewers\"\r\n              (checkedEvent)=\"typeSelected(true)\"\r\n              ><div class=\"vx-fs-11 vx-fw-500 vx-paragraph-txt vx-mr-3\">\r\n                YES\r\n              </div></app-cs-radio\r\n            >\r\n            <app-cs-radio\r\n              name=\"review-type\"\r\n              [checked]=\"!policyForm?.addReviewers\"\r\n              (checkedEvent)=\"typeSelected(false)\"\r\n              ><div class=\"vx-fs-11 vx-fw-500 vx-paragraph-txt vx-mr-3\">\r\n                NO\r\n              </div></app-cs-radio\r\n            >\r\n          </div>\r\n\r\n          <ng-container *ngIf=\"policyForm?.addReviewers\">\r\n            <label class=\"vx-control-panel vx-mt-2\">REVIEWER</label>\r\n            <div\r\n              class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\r\n              *ngIf=\"policyForm?.selectedReviewers?.length == 0\"\r\n              [appScrollInView]=\"scrollToBottom\"\r\n              [class.active]=\"activeSelector === 'reviewer'\"\r\n              [class.disabled]=\"\r\n                activeSelector &&\r\n                activeSelector !== 'reviewer' &&\r\n                sideSelectorElements.includes(activeSelector)\r\n              \"\r\n              (click)=\"activateSelector('reviewer', true)\"\r\n            >\r\n              <div\r\n                class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\r\n              >\r\n                Select the person responsible for reviewing this policy\r\n              </div>\r\n            </div>\r\n\r\n            <div\r\n              class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\r\n              *ngIf=\"policyForm?.selectedReviewers?.length > 0\"\r\n              [class.active]=\"activeSelector === 'reviewer'\"\r\n              [class.disabled]=\"\r\n                activeSelector &&\r\n                activeSelector !== 'reviewer' &&\r\n                sideSelectorElements.includes(activeSelector)\r\n              \"\r\n            >\r\n              <div\r\n                class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n                *ngFor=\"let reviewer of policyForm?.selectedReviewers\"\r\n              >\r\n                <i\r\n                  (click)=\"remove('reviewer', reviewer)\"\r\n                  class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\"\r\n                  >&#xe9ae;</i\r\n                >\r\n                <span\r\n                  class=\"chipName vx-fs-11 vx-label-txt\"\r\n                  [appTooltip]=\"'Samantha Jones'\"\r\n                  placement=\"bottom-left\"\r\n                  delay=\"0\"\r\n                  type=\"black\"\r\n                  [tooltipMandatory]=\"false\"\r\n                >\r\n                  {{ reviewer?.member_name }}</span\r\n                >\r\n              </div>\r\n              <button\r\n                class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\r\n                *ngIf=\"activeSelector !== 'reviewer'\"\r\n                (click)=\"activateSelector('reviewer', true)\"\r\n              >\r\n                <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\r\n              </button>\r\n            </div>\r\n            <label class=\"vx-control-panel vx-mt-3\">REVIEW FREQUENCY</label>\r\n            <div\r\n              *ngIf=\"policyForm?.review_frequency_details == ''\"\r\n              class=\"selectButton vx-pl-3 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\r\n              [class.active]=\"activeSelector === 'reviewerFrequency'\"\r\n              [class.disabled]=\"\r\n                activeSelector &&\r\n                activeSelector !== 'reviewerFrequency' &&\r\n                sideSelectorElements.includes(activeSelector)\r\n              \"\r\n              (click)=\"activateSelector('reviewerFrequency', true)\"\r\n            >\r\n              <div\r\n                class=\"selectButtonPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\r\n              >\r\n                When does this policy needs to be reviewed?\r\n              </div>\r\n              <div\r\n                (click)=\"activateSelector('reviewerFrequency', true)\"\r\n                class=\"vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase\"\r\n              >\r\n                SET A FREQUENCY\r\n              </div>\r\n            </div>\r\n\r\n            <div\r\n              *ngIf=\"policyForm?.review_frequency_details != ''\"\r\n              class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\r\n              [class.disabled]=\"\r\n                activeSelector &&\r\n                activeSelector !== 'reviewerFrequency' &&\r\n                sideSelectorElements.includes(activeSelector)\r\n              \"\r\n              [class.active]=\"activeSelector === 'reviewerFrequency'\"\r\n            >\r\n              <div\r\n                class=\"selectBoxText vx-fs-13 vx-paragraph-txt\"\r\n                [appTooltip]=\"reviewerFrequencyPlaceholder\"\r\n                placement=\"bottom-left\"\r\n                delay=\"0\"\r\n                type=\"black\"\r\n                [tooltipMandatory]=\"false\"\r\n              >\r\n                {{ reviewerFrequencyPlaceholder }}\r\n              </div>\r\n              <button\r\n                *ngIf=\"activeSelector !== 'reviewerFrequency'\"\r\n                (click)=\"activateSelector('reviewerFrequency', true)\"\r\n                class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\r\n              >\r\n                <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\r\n              </button>\r\n            </div>\r\n            <p\r\n              *ngIf=\"\r\n                submitted &&\r\n                policyForm?.selectedReviewers?.length > 0 &&\r\n                !policyForm?.review_frequency_details\r\n              \"\r\n              class=\"error-message\"\r\n              [appScrollInView]=\"true\"\r\n            >\r\n              Select the review schedule for this policy.\r\n            </p>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- New Approval Workflow -->\r\n    <div\r\n      class=\"form-group-row\"\r\n      [class.active]=\"activeSelector === 'approvers'\"\r\n      [class.disabled]=\"\r\n        activeSelector &&\r\n        activeSelector !== 'approvers' &&\r\n        sideSelectorElements.includes(activeSelector)\r\n      \"\r\n    >\r\n      <div\r\n        class=\"left\"\r\n        [class.checked]=\"policyForm?.selectedApprovers?.length > 0\"\r\n      >\r\n        <img\r\n          *ngIf=\"\r\n            policyForm?.selectedApprovers?.length == 0 ||\r\n            activeSelector === 'approvers'\r\n          \"\r\n          src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/approval.svg\"\r\n          alt=\"im\"\r\n        />\r\n\r\n        <svg\r\n          *ngIf=\"\r\n            policyForm?.selectedApprovers?.length > 0 &&\r\n            activeSelector !== 'approvers'\r\n          \"\r\n          class=\"checkIcon\"\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          viewBox=\"0 0 52 52\"\r\n        >\r\n          <circle\r\n            class=\"checkIcon__circle\"\r\n            cx=\"26\"\r\n            cy=\"26\"\r\n            r=\"25\"\r\n            fill=\"none\"\r\n          />\r\n          <path\r\n            class=\"checkIcon__check\"\r\n            fill=\"none\"\r\n            d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n          />\r\n        </svg>\r\n      </div>\r\n      <div class=\"right\" [class.disabled]=\"policyApprovalFlag !== 0\">\r\n        <div class=\"vx-form-group\">\r\n          <div class=\"vx-d-flex vx-align-center vx-justify-between\">\r\n            <label class=\"vx-control-panel\"\r\n              >APPROVAL <span class=\"required\">*</span></label\r\n            >\r\n            <button\r\n              (click)=\"\r\n                createApprovalWorkflow(); activateSelector('approvers', true)\r\n              \"\r\n              [class.disabled]=\"!policyForm?.selectedCategories?.length\"\r\n              class=\"createNewBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0\"\r\n            >\r\n              CREATE A NEW APPROVAL WORKFLOW\r\n            </button>\r\n          </div>\r\n          <div\r\n            *ngIf=\"\r\n              selectedWorkflow?.length === 0 ||\r\n              !selectedWorkflow[0]?.workflow_name\r\n            \"\r\n            (click)=\"\r\n              clickApprovalWorkflow(true); activateSelector('approvers', true)\r\n            \"\r\n            class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\r\n            [class.disabled]=\"!policyForm?.selectedCategories?.length\"\r\n          >\r\n            <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\r\n              Select the approval workflow for this policy\r\n            </div>\r\n          </div>\r\n          <div\r\n            *ngIf=\"\r\n              selectedWorkflow?.length > 0 && selectedWorkflow[0]?.workflow_name\r\n            \"\r\n            class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-mb-2\"\r\n          >\r\n            <div\r\n              class=\"vx-d-flex vx-align-center vx-justify-between vx-mt-2 vx-mb-2\"\r\n            >\r\n              <div\r\n                class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n              >\r\n                <i\r\n                  (click)=\"removeWorkflow()\"\r\n                  class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                  >&#xe9ae;</i\r\n                >\r\n                <span\r\n                  class=\"chipName vx-fs-11 vx-label-txt\"\r\n                  [appTooltip]=\"selectedWorkflow[0]?.workflow_name\"\r\n                  placement=\"bottom-left\"\r\n                  delay=\"0\"\r\n                  type=\"black\"\r\n                  [tooltipMandatory]=\"false\"\r\n                  >{{ selectedWorkflow[0]?.workflow_name }}</span\r\n                >\r\n              </div>\r\n              <button\r\n                (click)=\"editWorkflow(selectedWorkflow[0])\"\r\n                class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\r\n              >\r\n                <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\r\n              </button>\r\n            </div>\r\n          </div>\r\n          <ng-container *ngIf=\"selectedWorkflow?.length > 0\">\r\n            <div\r\n              *ngFor=\"\r\n                let approval of selectedWorkflow[0]?.approval_workflow;\r\n                let approvalIndex = index\r\n              \"\r\n              class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between vx-mb-2\"\r\n            >\r\n              <div class=\"vx-d-flex vx-align-center\">\r\n                <div class=\"level-left vx-d-flex vx-align-center\">\r\n                  <div class=\"vx-d-block\">\r\n                    <div\r\n                      class=\"level-name vx-fs-9 vx-fw-500 vx-paragraph-txt vx-tt-uppercase vx-lh-3\"\r\n                      [appTooltip]=\"\r\n                        approval?.alias_name\r\n                          ? approval?.alias_name\r\n                          : approval?.level1\r\n                      \"\r\n                      placement=\"bottom-left\"\r\n                      delay=\"0\"\r\n                      type=\"black\"\r\n                      [tooltipMandatory]=\"false\"\r\n                    >\r\n                      {{\r\n                        approval?.alias_name\r\n                          ? approval?.alias_name\r\n                          : approval?.level1\r\n                      }}\r\n                    </div>\r\n                    <div\r\n                      class=\"vx-fs-9 vx-fw-500 vx-label-txt vx-tt-uppercase vx-lh-3\"\r\n                    >\r\n                      {{\r\n                        approval?.type === \"ROUNDROBIN\"\r\n                          ? \"ROUND-ROBIN\"\r\n                          : approval?.type === \"ANYONE\"\r\n                          ? \"ANY ONE\"\r\n                          : approval?.type\r\n                      }}\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n                <div\r\n                  class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2 vx-ml-2\"\r\n                >\r\n                  <!-- <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                    >&#xe9ae;</i\r\n                  > -->\r\n                  <div\r\n                    *ngIf=\"\r\n                      approval?.type?.toLowerCase() === 'sequential' &&\r\n                      approval?.approvers?.length < 2\r\n                    \"\r\n                    class=\"workflowLavel vx-fs-11 vx-fw-500 vx-pl-1 vx-pr-1 vx-lh-4 vx-mr-1 vx-text-center\"\r\n                  >\r\n                    {{ 1 == approval?.approvers?.length ? \"Final\" : 1 }}\r\n                  </div>\r\n                  <div\r\n                    *ngIf=\"\r\n                      approval?.approvers?.length > 1 &&\r\n                      approval?.type?.toLowerCase() === 'sequential'\r\n                    \"\r\n                    class=\"workflowLavel vx-fs-11 vx-fw-500 vx-pl-1 vx-pr-1 vx-lh-4 vx-mr-1 vx-text-center\"\r\n                  >\r\n                    1\r\n                  </div>\r\n                  <span\r\n                    class=\"chipName vx-fs-11 vx-label-txt\"\r\n                    [appTooltip]=\"approval?.approvers[0]?.member_name\"\r\n                    placement=\"bottom-left\"\r\n                    delay=\"0\"\r\n                    type=\"black\"\r\n                    [tooltipMandatory]=\"false\"\r\n                    >{{ approval?.approvers[0]?.member_name }}</span\r\n                  >\r\n                  <button\r\n                    *ngIf=\"approval?.approvers?.length > 1\"\r\n                    class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n                    appPopover\r\n                    (click)=\"workflowPopover.popover()\"\r\n                    placement=\"right\"\r\n                  >\r\n                    +{{ approval?.approvers?.length - 1 }}\r\n                  </button>\r\n                </div>\r\n                <app-popover #workflowPopover [dontCloseonClick]=\"true\">\r\n                  <div class=\"wf-action-list\">\r\n                    <ul class=\"action-item\">\r\n                      <li\r\n                        *ngFor=\"\r\n                          let approver of approval?.approvers | slice : 1;\r\n                          let approvalIndex = index\r\n                        \"\r\n                      >\r\n                        <div class=\"avatar-card\">\r\n                          <span\r\n                            class=\"value\"\r\n                            [appTooltip]=\"approver?.member_name\"\r\n                            placement=\"bottom-left\"\r\n                            delay=\"0\"\r\n                            type=\"black\"\r\n                            [tooltipMandatory]=\"false\"\r\n                          >\r\n                            <!-- <i class=\"icons\">&#xe90d;</i> -->\r\n                            <span\r\n                              *ngIf=\"\r\n                                approval?.type?.toLowerCase() === 'sequential'\r\n                              \"\r\n                              class=\"workflowLavel vx-fs-11 vx-fw-500 vx-pl-1 vx-pr-1 vx-lh-4 vx-mr-1 vx-text-center\"\r\n                              >{{\r\n                                approvalIndex + 1 ===\r\n                                approval?.approvers?.length - 1\r\n                                  ? \"Final\"\r\n                                  : approvalIndex + 2\r\n                              }}</span\r\n                            >\r\n                            {{ approver?.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\r\n              <!-- <div class=\"vx-d-flex vx-align-center\">\r\n                <button (click)=\"editLevelClicked(approval,approvalIndex)\"\r\n                  class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\r\n                >\r\n                  <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\r\n                </button>\r\n                <button (click)=\"deleteLevel(approvalIndex)\"\r\n                  class=\"deleteBtn vx-fs-11 vx-fw-600 vx-tt-uppercase vx-p-0 vx-m-0 vx-ml-4 vx-d-flex vx-align-center\"\r\n                >\r\n                  <i class=\"icons vx-mr-1\">&#xe9ae;</i> DELETE\r\n                </button>\r\n              </div> -->\r\n            </div>\r\n          </ng-container>\r\n          <p\r\n            *ngIf=\"\r\n              submitted &&\r\n              !policyForm?.selectedApprovers[0]?.approval_workflow?.length &&\r\n              !policyApprovalFlag &&\r\n              !policyForm?.selectedApprovers[0]?.approvers?.length\r\n            \"\r\n            [appScrollInView]=\"true\"\r\n            class=\"error-message\"\r\n          >\r\n            Select or create an approval workflow for this policy.\r\n          </p>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Policy Access -->\r\n    <div\r\n      *ngIf=\"true\"\r\n      class=\"form-group-row\"\r\n      [class.active]=\"activeSelector === 'policyAccess'\"\r\n      [class.disabled]=\"activeSelector &&\r\n      activeSelector !== 'policyAccess' &&\r\n      sideSelectorElements.includes(activeSelector)\"\r\n    >\r\n      <div class=\"left\" [class.checked]=\"true\">\r\n        <img\r\n          *ngIf=\"!policyForm?.policy_access_owners?.length && !policyForm?.policy_access_groups?.length && !policyForm?.availableOnPortal\"\r\n          src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/lock-scope.svg\"\r\n          alt=\"\"\r\n        />\r\n\r\n        <svg\r\n          *ngIf=\"policyForm?.policy_access_owners?.length || policyForm?.policy_access_groups?.length || policyForm?.availableOnPortal\"\r\n          class=\"checkIcon\"\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          viewBox=\"0 0 52 52\"\r\n        >\r\n          <circle\r\n            class=\"checkIcon__circle\"\r\n            cx=\"26\"\r\n            cy=\"26\"\r\n            r=\"25\"\r\n            fill=\"none\"\r\n          />\r\n          <path\r\n            class=\"checkIcon__check\"\r\n            fill=\"none\"\r\n            d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n          />\r\n        </svg>\r\n      </div>\r\n      <div class=\"right\">\r\n        <div class=\"vx-form-group\">\r\n          <div class=\"vx-d-flex vx-align-center vx-justify-between\">\r\n            <label class=\"vx-control-panel\">POLICY PORTAL ACCESS</label>\r\n          </div>\r\n          <div *ngIf=\"!policyForm?.policy_access_owners?.length && !policyForm?.policy_access_groups?.length && !policyForm?.availableOnPortal\"\r\n            (click)=\"activateSelector('policyAccess', true)\"\r\n            class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\r\n            [class.disabled]=\"!policyForm?.selectedCategories?.length\"\r\n          >\r\n            <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\r\n              Who should be able to view this policy?\r\n            </div>\r\n          </div>\r\n\r\n          <ng-container *ngIf=\"!policyForm?.availableOnPortal\">\r\n            <div class=\"selectBoxSuccess vx-pl-2 vx-pr-3\" *ngIf=\"policyForm?.policy_access_owners?.length || policyForm?.policy_access_groups?.length\">\r\n              <div class=\"vx-d-flex vx-align-center vx-justify-between vx-mt-2 vx-mb-2\">\r\n                <div class=\"vx-d-flex vx-align-center\">\r\n                  <div *ngIf=\"policyForm?.policy_access_owners?.length\"\r\n                    class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n                  >\r\n                    <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" *ngIf=\"policyForm?.policy_access_type === 1\"\r\n                    (click)=\"\r\n                        remove(\r\n                          'policyAccess',\r\n                          policyForm?.policy_access_owners[0]\r\n                        )\r\n                      \"\r\n                      >&#xe9ae;</i\r\n                    >\r\n                    <span\r\n                      class=\"chipName vx-fs-11 vx-label-txt\"\r\n                      [appTooltip]=\"policyForm?.policy_access_owners[0]?.employee_name\"\r\n                      placement=\"bottom-left\"\r\n                      delay=\"0\"\r\n                      type=\"black\"\r\n                      [tooltipMandatory]=\"false\"\r\n                      >{{policyForm?.policy_access_owners[0]?.employee_name}}</span\r\n                    >\r\n                    <button \r\n                    *ngIf=\"policyForm?.policy_access_owners?.length > 1\"\r\n                      class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 greenBg\"\r\n                      appPopover\r\n                      (click)=\"policyAccessPopover.popover()\"\r\n                      placement=\"right\"\r\n                    >\r\n                      +{{ policyForm?.policy_access_owners.length - 1 }}\r\n                    </button>\r\n                  </div>\r\n\r\n                  <div\r\n                    class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\"\r\n                    *ngIf=\"\r\n                      policyForm?.policy_access_owners.length > 0 &&\r\n                      policyForm?.policy_access_groups.length > 0\r\n                    \"\r\n                  >\r\n                    &\r\n                  </div>\r\n                  <div\r\n                    class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n                    *ngIf=\"policyForm?.policy_access_groups.length > 0\"\r\n                  >\r\n                    <i\r\n                      class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" *ngIf=\"policyForm?.policy_access_type === 1\" \r\n                      (click)=\"\r\n                        remove(\r\n                          'accessGroup',\r\n                          policyForm?.policy_access_groups[0]\r\n                        )\r\n                      \"\r\n                      >&#xe9ae;</i\r\n                    >\r\n                    <span\r\n                      class=\"chipName vx-fs-11 vx-label-txt\"\r\n                      [appTooltip]=\"\r\n                        policyForm?.policy_access_groups[0]?.group_name\r\n                      \"\r\n                      placement=\"bottom-left\"\r\n                      delay=\"0\"\r\n                      type=\"black\"\r\n                      [tooltipMandatory]=\"false\"\r\n                      >{{ policyForm?.policy_access_groups[0]?.group_name }}</span\r\n                    >\r\n                    <button\r\n                      class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n                      appPopover\r\n                      (click)=\"accessGroup.popover()\"\r\n                      placement=\"right\"\r\n                      *ngIf=\"policyForm?.policy_access_groups.length > 1\"\r\n                    >\r\n                      +{{ policyForm?.policy_access_groups.length - 1 }}\r\n                    </button>\r\n                  </div>\r\n\r\n                  <app-popover #policyAccessPopover [dontCloseonClick]=\"true\">\r\n                    <div class=\"wf-action-list\">\r\n                      <ul class=\"action-item\">\r\n                        <li *ngFor=\"\r\n                        let user of policyForm?.policy_access_owners | slice : 1;\r\n                        let j = index\r\n                      \">\r\n                          <div class=\"avatar-card\">\r\n                            <span\r\n                              class=\"value\"\r\n                              [appTooltip]=\"user?.employee_name\"\r\n                              placement=\"bottom-left\"\r\n                              delay=\"0\"\r\n                              type=\"black\"\r\n                              [tooltipMandatory]=\"false\"\r\n                            >\r\n                              <i class=\"icons\" *ngIf=\"policyForm?.policy_access_type === 1\" (click)=\"\r\n                              remove(\r\n                                'policyAccess',\r\n                                user\r\n                              )\r\n                            \">&#xe90d;</i>\r\n                              {{user?.employee_name}}\r\n                            </span>\r\n                          </div>\r\n                        </li>\r\n                      </ul>\r\n                    </div>\r\n                  </app-popover>\r\n                  <app-popover #accessGroup [dontCloseonClick]=\"true\">\r\n                    <div class=\"wf-action-list\">\r\n                      <ul class=\"action-item\">\r\n                        <li\r\n                          *ngFor=\"\r\n                            let data of policyForm?.policy_access_groups | slice : 1;\r\n                            let j = index\r\n                          \"\r\n                        >\r\n                          <div class=\"avatar-card\">\r\n                            <span class=\"value\">\r\n                              <i class=\"icons\" *ngIf=\"policyForm?.policy_access_type === 1\" (click)=\"remove('accessGroup', data)\"\r\n                                >&#xe90d;</i\r\n                              >\r\n                              {{ data?.group_name }}\r\n                            </span>\r\n                          </div>\r\n                        </li>\r\n                      </ul>\r\n                    </div>\r\n                  </app-popover>\r\n                </div>\r\n\r\n                <button (click)=\"activateSelector('policyAccess', true)\"\r\n                  class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\r\n                >\r\n                  <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\r\n                </button>\r\n              </div>\r\n\r\n              <!-- <div class=\"vx-mt-4 vx-mb-2\">\r\n                <app-cs-radio\r\n                  [name]=\"'policyFormAccessType'\" [checked]=\"policyForm?.policy_access_type === 0\" (checkedEvent)=\"setAccessField(0)\"\r\n                  ><div class=\"vx-fs-12 vx-paragraph-txt\">\r\n                    Everyone who has access to this Policy Category\r\n                  </div></app-cs-radio\r\n                >\r\n                <app-cs-radio\r\n                  [name]=\"'policyFormAccessType'\" [checked]=\"policyForm?.policy_access_type === 1\" (checkedEvent)=\"setAccessField(1)\"\r\n                class=\"vx-mt-1\"\r\n                  ><div class=\"vx-fs-12 vx-paragraph-txt\">\r\n                    Select users/groups\r\n                  </div></app-cs-radio\r\n                >\r\n              </div> -->\r\n            </div>\r\n          </ng-container>\r\n\r\n          <div class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\" *ngIf=\"policyForm?.availableOnPortal\">\r\n            <span class=\"vx-fs-13 vx-paragraph-txt\">Visible to All Current & Future Users</span>\r\n\r\n            <button (click)=\"activateSelector('policyAccess', true)\" class=\"edit vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"><i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT</button>\r\n          </div>\r\n\r\n          <div class=\"vx-mt-2\">\r\n            <app-cs-switch\r\n            *ngIf=\"policyForm.availableOnPortal\"\r\n            [(ngValue)]=\"policyForm.acceptSuggestions\"\r\n              >ACCEPT SUGGESTIONS\r\n              <i\r\n                class=\"icons vx-fs-12 vx-txt-blue vx-ml-1 vx-mr-2\"\r\n                [appTooltip]=\"'If enabled, users can provide improvement suggestions to the policies that are listed on the Policy Portal.'\"\r\n                placement=\"bottom-right\"\r\n                delay=\"0\"\r\n                type=\"white\"\r\n                [tooltipMandatory]=\"true\"\r\n                >&#xe91f;</i\r\n              ></app-cs-switch\r\n            >\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Attestations -->\r\n    <div\r\n      class=\"form-group-row\"\r\n      [class.active]=\"false\"\r\n      [class.disabled]=\"false\"\r\n      *ngIf=\"false\"\r\n    >\r\n      <div class=\"left\" [class.checked]=\"false\">\r\n        <img\r\n          src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/attestations.svg\"\r\n          alt=\"\"\r\n        />\r\n\r\n        <svg\r\n          *ngIf=\"false\"\r\n          class=\"checkIcon\"\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          viewBox=\"0 0 52 52\"\r\n        >\r\n          <circle\r\n            class=\"checkIcon__circle\"\r\n            cx=\"26\"\r\n            cy=\"26\"\r\n            r=\"25\"\r\n            fill=\"none\"\r\n          />\r\n          <path\r\n            class=\"checkIcon__check\"\r\n            fill=\"none\"\r\n            d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n          />\r\n        </svg>\r\n      </div>\r\n      <div class=\"right\">\r\n        <div class=\"vx-form-group\">\r\n          <div class=\"vx-d-flex vx-align-center vx-justify-between\">\r\n            <label class=\"vx-control-panel\">ATTESTATIONS</label>\r\n          </div>\r\n          <div\r\n            class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\r\n            [class.disabled]=\"false\"\r\n          >\r\n            <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\r\n              Select the persons required to attest to this Policy\r\n            </div>\r\n          </div>\r\n\r\n          <div\r\n            class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\r\n          >\r\n            <div\r\n              class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n            >\r\n              <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                >&#xe9ae;</i\r\n              >\r\n              <span\r\n                class=\"chipName vx-fs-11 vx-label-txt\"\r\n                [appTooltip]=\"'Samantha Jones'\"\r\n                placement=\"bottom-left\"\r\n                delay=\"0\"\r\n                type=\"black\"\r\n                [tooltipMandatory]=\"false\"\r\n                >Samantha Jones</span\r\n              >\r\n              <button\r\n                class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n                appPopover\r\n                (click)=\"policyAttestationPopover.popover()\"\r\n                placement=\"right\"\r\n              >\r\n                +4\r\n              </button>\r\n            </div>\r\n            <app-popover #policyAttestationPopover [dontCloseonClick]=\"true\">\r\n              <div class=\"wf-action-list\">\r\n                <ul class=\"action-item\">\r\n                  <li *ngFor=\"let data of [1, 1, 1, 1, 1, 1, 1]\">\r\n                    <div class=\"avatar-card\">\r\n                      <span\r\n                        class=\"value\"\r\n                        [appTooltip]=\"'Harshvardhan Kariwala'\"\r\n                        placement=\"bottom-left\"\r\n                        delay=\"0\"\r\n                        type=\"black\"\r\n                        [tooltipMandatory]=\"false\"\r\n                      >\r\n                        <i class=\"icons\">&#xe90d;</i>\r\n                        Harshvardhan Kariwala\r\n                      </span>\r\n                    </div>\r\n                  </li>\r\n                </ul>\r\n              </div>\r\n            </app-popover>\r\n            <button\r\n              class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\r\n            >\r\n              <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\r\n            </button>\r\n          </div>\r\n\r\n          <div class=\"vx-mt-2\">\r\n            <app-cs-switch\r\n              >REQUIRES E-SIGNATURE FOR ATTESTATION\r\n              <i\r\n                class=\"icons vx-fs-12 vx-txt-blue vx-ml-1 vx-mr-2\"\r\n                [appTooltip]=\"\r\n                  'Requires e-signature for attestation info text here...'\r\n                \"\r\n                placement=\"bottom-right\"\r\n                delay=\"0\"\r\n                type=\"white\"\r\n                [tooltipMandatory]=\"true\"\r\n                >&#xe91f;</i\r\n              ></app-cs-switch\r\n            >\r\n          </div>\r\n\r\n          <label class=\"vx-control-panel vx-mt-2\">WHEN?</label>\r\n          <div\r\n            class=\"selectButton vx-pl-3 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\r\n          >\r\n            <div\r\n              class=\"selectButtonPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\r\n            >\r\n              What is the attestation schedule for this<br />policy?\r\n            </div>\r\n            <div class=\"vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase\">\r\n              SET A FREQUENCY\r\n            </div>\r\n          </div>\r\n\r\n          <div\r\n            class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\r\n          >\r\n            <div class=\"selectBoxText vx-fs-13 vx-paragraph-txt\">\r\n              Every Wednesday by 11:59 pm\r\n            </div>\r\n            <button\r\n              class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\r\n            >\r\n              <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\r\n            </button>\r\n          </div>\r\n\r\n          <label class=\"vx-control-panel vx-mt-2\"\r\n            >ASSESSMENT OF UNDERSTANDING</label\r\n          >\r\n          <div\r\n            class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\r\n            [class.disabled]=\"false\"\r\n          >\r\n            <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\r\n              Set up a questionnaire to confirm the reader\u2019s<br />understanding\r\n              of the policy.\r\n            </div>\r\n          </div>\r\n\r\n          <div\r\n            class=\"selectBoxSuccess vx-pl-3 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\r\n          >\r\n            <div\r\n              class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n            >\r\n              <span class=\"chipName vx-fs-11 vx-label-txt\">5 Questions</span>\r\n            </div>\r\n            <button\r\n              class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\r\n            >\r\n              <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Approval Workflow -->\r\n    <div\r\n      class=\"form-group-row\"\r\n      *ngIf=\"false\"\r\n      [class.active]=\"activeSelector === 'approvers'\"\r\n      [class.disabled]=\"\r\n        activeSelector &&\r\n        activeSelector !== 'approvers' &&\r\n        sideSelectorElements.includes(activeSelector)\r\n      \"\r\n    >\r\n      <div\r\n        class=\"left\"\r\n        [class.checked]=\"policyForm?.selectedApprovers?.length > 0\"\r\n      >\r\n        <img\r\n          *ngIf=\"\r\n            policyForm?.selectedApprovers?.length == 0 ||\r\n            activeSelector === 'approvers'\r\n          \"\r\n          src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/approval.svg\"\r\n          alt=\"im\"\r\n        />\r\n\r\n        <svg\r\n          *ngIf=\"\r\n            policyForm?.selectedApprovers?.length > 0 &&\r\n            activeSelector !== 'approvers'\r\n          \"\r\n          class=\"checkIcon\"\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          viewBox=\"0 0 52 52\"\r\n        >\r\n          <circle\r\n            class=\"checkIcon__circle\"\r\n            cx=\"26\"\r\n            cy=\"26\"\r\n            r=\"25\"\r\n            fill=\"none\"\r\n          />\r\n          <path\r\n            class=\"checkIcon__check\"\r\n            fill=\"none\"\r\n            d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n          />\r\n        </svg>\r\n      </div>\r\n      <div class=\"right\">\r\n        <div\r\n          class=\"vx-form-group approval-workflow\"\r\n          [class.disabled]=\"policyApprovalFlag !== 0\"\r\n        >\r\n          <label class=\"vx-control-panel\">\r\n            Approval workflow <span class=\"required\">*</span>\r\n            <button\r\n              (click)=\"\r\n                activateSelector('approvers', true);\r\n                addMoreLevels = true;\r\n                workflowType = 'SEQUENTIAL'\r\n              \"\r\n              class=\"button\"\r\n            >\r\n              Create a new Approval Workflow\r\n            </button>\r\n          </label>\r\n          <div\r\n            class=\"select\"\r\n            [class.disabled]=\"approverWorkFlowList?.length == 0\"\r\n            *ngIf=\"\r\n              policyForm?.selectedApprovers[0]?.approvers?.length == 0 ||\r\n              policyForm?.selectedApprovers.length == 0\r\n            \"\r\n          >\r\n            <cs-select\r\n              [ngModel]=\"selectedApprovalWorkflow\"\r\n              (ngModelChange)=\"selectedWorkflowChange($event)\"\r\n              [placeholder]=\"'Select approval workflow for this policy'\"\r\n              name=\"selectedApprovalWorkflow\"\r\n              [setMaxWidth]=\"true\"\r\n            >\r\n              <cs-option\r\n                *ngFor=\"let data of approverWorkFlowList\"\r\n                [value]=\"data\"\r\n              >\r\n                {{ data.workflow_name }}\r\n              </cs-option>\r\n              <cs-option\r\n                [value]=\"-1\"\r\n                (click)=\"\r\n                  activateSelector('approvers', true);\r\n                  addMoreLevels = true;\r\n                  workflowType = 'SEQUENTIAL'\r\n                \"\r\n                >Create a new approval workflow</cs-option\r\n              >\r\n            </cs-select>\r\n          </div>\r\n          <ng-container\r\n            *ngIf=\"policyForm?.selectedApprovers[0]?.approvers?.length > 0\"\r\n          >\r\n            <div\r\n              class=\"selected\"\r\n              *ngFor=\"let level of policyForm?.selectedApprovers; let i = index\"\r\n            >\r\n              <div class=\"workflow-label\">\r\n                <p class=\"title\">Level {{ i + 1 }}</p>\r\n                <p class=\"description\">{{ level.name }}</p>\r\n              </div>\r\n              <div class=\"vx-d-flex vx-align-center\">\r\n                <div class=\"chip-container\">\r\n                  <span\r\n                    class=\"chip\"\r\n                    *ngFor=\"\r\n                      let approver of level.approvers.slice(0, 1);\r\n                      let j = index\r\n                    \"\r\n                    ><i class=\"icons\" (click)=\"remove('approvers', approver, i)\"\r\n                      >&#xe90d;</i\r\n                    >\r\n                    <span class=\"step\" *ngIf=\"level.name == 'SEQUENTIAL'\">{{\r\n                      j + 1\r\n                    }}</span\r\n                    >{{ approver.member_name }}</span\r\n                  >\r\n\r\n                  <button\r\n                    class=\"count\"\r\n                    *ngIf=\"level.approvers?.length > 1\"\r\n                    type=\"button\"\r\n                    appPopover\r\n                    (click)=\"labelName.popover()\"\r\n                    placement=\"right\"\r\n                  >\r\n                    +\r\n\r\n                    {{ level.approvers.slice(1).length }}\r\n                  </button>\r\n                  <app-popover #labelName [dontCloseonClick]=\"true\">\r\n                    <div class=\"wf-action-list\">\r\n                      <ul class=\"action-item\">\r\n                        <li\r\n                          *ngFor=\"\r\n                            let approver of level.approvers | slice : 1;\r\n                            let j = index\r\n                          \"\r\n                        >\r\n                          <div class=\"avatar-card\">\r\n                            <span class=\"value\">\r\n                              <i\r\n                                class=\"icons\"\r\n                                (click)=\"remove('approvers', approver, i)\"\r\n                                >&#xe90d;</i\r\n                              >\r\n                              <span\r\n                                class=\"step\"\r\n                                *ngIf=\"level.name == 'SEQUENTIAL'\"\r\n                              >\r\n                                {{\r\n                                  j == level.approvers.slice(1).length - 1\r\n                                    ? \"Final\"\r\n                                    : j + 2\r\n                                }}\r\n                              </span>\r\n                              {{ approver.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                <button\r\n                  class=\"edit\"\r\n                  type=\"button\"\r\n                  (click)=\"\r\n                    activateSelector('approvers', true, level.name);\r\n                    approversListIndex = i\r\n                  \"\r\n                >\r\n                  <i class=\"icons\">&#xe9ba;</i>Edit\r\n                </button>\r\n                <button\r\n                  class=\"close-btn\"\r\n                  (click)=\"remove('workflowLevel', level, i)\"\r\n                >\r\n                  <i class=\"icons\">&#xe90d;</i>\r\n                </button>\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n\r\n          <p\r\n            *ngIf=\"\r\n              submitted &&\r\n              !policyForm?.selectedApprovers?.length &&\r\n              !policyApprovalFlag\r\n            \"\r\n            [appScrollInView]=\"true\"\r\n            class=\"error-message\"\r\n          >\r\n            Select or create an approval workflow for this policy.\r\n          </p>\r\n\r\n          <label\r\n            class=\"vx-control-panel\"\r\n            *ngIf=\"policyForm.selectedApprovers[0]?.approvers?.length > 0\"\r\n            ><button\r\n              class=\"button\"\r\n              (click)=\"\r\n                activateSelector('approvers', true);\r\n                addMoreLevels = true;\r\n                workflowType = 'SEQUENTIAL'\r\n              \"\r\n            >\r\n              + Add More Levels\r\n            </button></label\r\n          >\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Who / now Attestation -->\r\n    <div\r\n      class=\"form-group-row\"\r\n      [class.active]=\"activeSelector === 'assignees'\"\r\n      [class.disabled]=\"\r\n        activeSelector &&\r\n        activeSelector !== 'assignees' &&\r\n        sideSelectorElements.includes(activeSelector)\r\n      \"\r\n    >\r\n      <div\r\n        class=\"left\"\r\n        [class.checked]=\"policyForm?.selectedAssignees?.length > 0\"\r\n      >\r\n        <img\r\n          *ngIf=\"\r\n            policyForm?.selectedAssignees?.length == 0 ||\r\n            activeSelector === 'assignees'\r\n          \"\r\n          src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/who.svg\"\r\n          alt=\"im\"\r\n        />\r\n\r\n        <svg\r\n          *ngIf=\"\r\n            policyForm?.selectedAssignees?.length > 0 &&\r\n            activeSelector !== 'assignees'\r\n          \"\r\n          class=\"checkIcon\"\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          viewBox=\"0 0 52 52\"\r\n        >\r\n          <circle\r\n            class=\"checkIcon__circle\"\r\n            cx=\"26\"\r\n            cy=\"26\"\r\n            r=\"25\"\r\n            fill=\"none\"\r\n          />\r\n          <path\r\n            class=\"checkIcon__check\"\r\n            fill=\"none\"\r\n            d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n          />\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\">Attestation</label>\r\n          <div\r\n            class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center vx-mb-2\"\r\n            *ngIf=\"\r\n              (policyForm?.selectedAssignees?.length == 0 && !groupEnabled) ||\r\n              (policyForm?.selectedAssignees?.length == 0 &&\r\n                groupEnabled &&\r\n                policyForm?.selectedGroupAssignee.length == 0)\r\n            \"\r\n            (click)=\"activateSelector('assignees', true)\"\r\n          >\r\n            <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\r\n              Select the persons responsible for attesting this policy.\r\n            </div>\r\n          </div>\r\n\r\n          <div\r\n            class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between vx-mb-2\"\r\n            *ngIf=\"\r\n              policyForm?.selectedAssignees?.length > 0 ||\r\n              policyForm?.selectedGroupAssignee?.length > 0\r\n            \"\r\n          >\r\n            <div\r\n              class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n              *ngIf=\"!groupEnabled\"\r\n            >\r\n              <ng-container\r\n                *ngFor=\"\r\n                  let assignee of policyForm?.selectedAssignees?.slice(0, 1)\r\n                \"\r\n              >\r\n                <i\r\n                  class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                  (click)=\"remove('assignees', assignee)\"\r\n                  >&#xe9ae;</i\r\n                >\r\n                <span\r\n                  class=\"chipName vx-fs-11 vx-label-txt\"\r\n                  [appTooltip]=\"assignee.employee_name\"\r\n                  placement=\"bottom-left\"\r\n                  delay=\"0\"\r\n                  type=\"black\"\r\n                  [tooltipMandatory]=\"false\"\r\n                  >{{ assignee.employee_name }}</span\r\n                >\r\n              </ng-container>\r\n              <button\r\n                class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 greenBg\"\r\n                appPopover\r\n                (click)=\"assigneePopover.popover()\"\r\n                placement=\"right\"\r\n                *ngIf=\"policyForm?.selectedAssignees?.length > 1\"\r\n              >\r\n                +{{ policyForm?.selectedAssignees?.slice(1).length }}\r\n              </button>\r\n            </div>\r\n            <ng-container *ngIf=\"groupEnabled\">\r\n              <div\r\n                class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n                *ngIf=\"groupEnabled && policyForm?.selectedAssignees.length > 0\"\r\n              >\r\n                <i\r\n                  class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                  (click)=\"\r\n                    remove('assignees', policyForm?.selectedAssignees[0])\r\n                  \"\r\n                  >&#xe9ae;</i\r\n                >\r\n                <span\r\n                  class=\"chipName vx-fs-11 vx-label-txt\"\r\n                  [appTooltip]=\"policyForm?.selectedAssignees[0]?.employee_name\"\r\n                  placement=\"bottom-left\"\r\n                  delay=\"0\"\r\n                  type=\"black\"\r\n                  [tooltipMandatory]=\"false\"\r\n                  >{{ policyForm?.selectedAssignees[0]?.employee_name }}</span\r\n                >\r\n                <button\r\n                  class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n                  appPopover\r\n                  (click)=\"UserPopover.popover()\"\r\n                  placement=\"right\"\r\n                  *ngIf=\"policyForm?.selectedAssignees.length > 1\"\r\n                >\r\n                  +{{ policyForm?.selectedAssignees.length - 1 }}\r\n                </button>\r\n              </div>\r\n              <div\r\n                class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\"\r\n                *ngIf=\"\r\n                  policyForm?.selectedAssignees.length > 0 &&\r\n                  policyForm?.selectedGroupAssignee.length > 0\r\n                \"\r\n              >\r\n                &\r\n              </div>\r\n              <div\r\n                class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n                *ngIf=\"policyForm?.selectedGroupAssignee.length > 0\"\r\n              >\r\n                <i\r\n                  class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                  (click)=\"\r\n                    remove(\r\n                      'groupAssignees',\r\n                      policyForm?.selectedGroupAssignee[0]\r\n                    )\r\n                  \"\r\n                  >&#xe9ae;</i\r\n                >\r\n                <span\r\n                  class=\"chipName vx-fs-11 vx-label-txt\"\r\n                  [appTooltip]=\"\r\n                    policyForm?.selectedGroupAssignee[0]?.group_name\r\n                  \"\r\n                  placement=\"bottom-left\"\r\n                  delay=\"0\"\r\n                  type=\"black\"\r\n                  [tooltipMandatory]=\"false\"\r\n                  >{{ policyForm?.selectedGroupAssignee[0]?.group_name }}</span\r\n                >\r\n                <button\r\n                  class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n                  appPopover\r\n                  (click)=\"group.popover()\"\r\n                  placement=\"right\"\r\n                  *ngIf=\"policyForm?.selectedGroupAssignee.length > 1\"\r\n                >\r\n                  +{{ policyForm?.selectedGroupAssignee.length - 1 }}\r\n                </button>\r\n              </div>\r\n            </ng-container>\r\n            <button\r\n              class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\r\n              (click)=\"activateSelector('assignees', true)\"\r\n            >\r\n              <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\r\n            </button>\r\n          </div>\r\n\r\n          <p\r\n            *ngIf=\"\r\n              submitted &&\r\n              ((policyForm?.selectedAssignees?.length == 0 &&\r\n                policyForm?.frequency_details &&\r\n                !groupEnabled) ||\r\n                (policyForm?.selectedAssignees?.length == 0 &&\r\n                  policyForm.selectedGroupAssignee.length == 0 &&\r\n                  policyForm?.frequency_details &&\r\n                  groupEnabled))\r\n            \"\r\n            id=\"whovalidatemsg\"\r\n            class=\"error-message\"\r\n            [appScrollInView]=\"true\"\r\n          >\r\n            Select the persons required to attest to this Policy.\r\n          </p>\r\n          <app-cs-switch\r\n            [(ngValue)]=\"policyForm.requiresSignatureForAttestation\"\r\n            [class.disabled]=\"policyForm?.selectedAssignees?.length == 0\"\r\n            class=\"who-toggle\"\r\n            >THIS POLICY REQUIRES E-SIGNATURE FOR ATTESTATION\r\n            <i\r\n              class=\"icons\"\r\n              [appTooltip]=\"\r\n                'If selected, the readers will be required to attest this policy using their electronic signature.'\r\n              \"\r\n              placement=\"bottom-right\"\r\n              type=\"white\"\r\n              delay=\"0\"\r\n              [tooltipMandatory]=\"true\"\r\n              >&#xe91f;</i\r\n            ></app-cs-switch\r\n          >\r\n          <app-popover #assigneePopover [dontCloseonClick]=\"true\">\r\n            <div class=\"wf-action-list\">\r\n              <ul class=\"action-item\">\r\n                <li\r\n                  *ngFor=\"\r\n                    let assignee of policyForm?.selectedAssignees | slice : 1;\r\n                    let j = index\r\n                  \"\r\n                >\r\n                  <div class=\"avatar-card\">\r\n                    <span class=\"value\">\r\n                      <i class=\"icons\" (click)=\"remove('assignees', assignee)\"\r\n                        >&#xe90d;</i\r\n                      >\r\n                      {{ assignee.employee_name }}\r\n                    </span>\r\n                  </div>\r\n                </li>\r\n              </ul>\r\n            </div>\r\n          </app-popover>\r\n          <app-popover #UserPopover [dontCloseonClick]=\"true\">\r\n            <div class=\"wf-action-list\">\r\n              <ul class=\"action-item\">\r\n                <li\r\n                  *ngFor=\"\r\n                    let assignee of policyForm?.selectedAssignees | slice : 1;\r\n                    let j = index\r\n                  \"\r\n                >\r\n                  <div class=\"avatar-card\">\r\n                    <span class=\"value\">\r\n                      <i class=\"icons\" (click)=\"remove('assignees', assignee)\"\r\n                        >&#xe90d;</i\r\n                      >\r\n                      {{ assignee.employee_name }}\r\n                    </span>\r\n                  </div>\r\n                </li>\r\n              </ul>\r\n            </div>\r\n          </app-popover>\r\n          <app-popover #group [dontCloseonClick]=\"true\">\r\n            <div class=\"wf-action-list\">\r\n              <ul class=\"action-item\">\r\n                <li\r\n                  *ngFor=\"\r\n                    let data of policyForm?.selectedGroupAssignee | slice : 1;\r\n                    let j = index\r\n                  \"\r\n                >\r\n                  <div class=\"avatar-card\">\r\n                    <span class=\"value\">\r\n                      <i class=\"icons\" (click)=\"remove('groupAssignees', data)\"\r\n                        >&#xe90d;</i\r\n                      >\r\n                      {{ data.group_name }}\r\n                    </span>\r\n                  </div>\r\n                </li>\r\n              </ul>\r\n            </div>\r\n          </app-popover>\r\n\r\n          <!-- overseer -->\r\n          <app-popover #overseerPopover [dontCloseonClick]=\"true\">\r\n            <div class=\"wf-action-list\">\r\n              <ul class=\"action-item\">\r\n                <li\r\n                  *ngFor=\"\r\n                    let overseer of policyForm?.CCEmail | slice : 1;\r\n                    let j = index\r\n                  \"\r\n                >\r\n                  <div class=\"avatar-card\">\r\n                    <span class=\"value\">\r\n                      <i class=\"icons\" (click)=\"remove('ccEmail', overseer)\"\r\n                        >&#xe90d;</i\r\n                      >\r\n                      {{ overseer?.employee_name }}\r\n                    </span>\r\n                  </div>\r\n                </li>\r\n              </ul>\r\n            </div>\r\n          </app-popover>\r\n          <app-popover #overseerGroup [dontCloseonClick]=\"true\">\r\n            <div class=\"wf-action-list\">\r\n              <ul class=\"action-item\">\r\n                <li\r\n                  *ngFor=\"\r\n                    let data of policyForm?.CCGroupEmail | slice : 1;\r\n                    let j = index\r\n                  \"\r\n                >\r\n                  <div class=\"avatar-card\">\r\n                    <span class=\"value\">\r\n                      <i class=\"icons\" (click)=\"remove('ccGroupEmail', data)\"\r\n                        >&#xe90d;</i\r\n                      >\r\n                      {{ data?.group_name }}\r\n                    </span>\r\n                  </div>\r\n                </li>\r\n              </ul>\r\n            </div>\r\n          </app-popover>\r\n          <!-- overseer end -->\r\n\r\n          <!-- overseer fail start -->\r\n          <app-popover #overseerFailPopover [dontCloseonClick]=\"true\">\r\n            <div class=\"wf-action-list\">\r\n              <ul class=\"action-item\">\r\n                <li\r\n                  *ngFor=\"\r\n                    let overseer of policyForm?.CCFailEmail | slice : 1;\r\n                    let j = index\r\n                  \"\r\n                >\r\n                  <div class=\"avatar-card\">\r\n                    <span class=\"value\">\r\n                      <i class=\"icons\" (click)=\"remove('ccFail', overseer)\"\r\n                        >&#xe90d;</i\r\n                      >\r\n                      {{ overseer?.employee_name }}\r\n                    </span>\r\n                  </div>\r\n                </li>\r\n              </ul>\r\n            </div>\r\n          </app-popover>\r\n          <app-popover #overseerFailGroup [dontCloseonClick]=\"true\">\r\n            <div class=\"wf-action-list\">\r\n              <ul class=\"action-item\">\r\n                <li\r\n                  *ngFor=\"\r\n                    let data of policyForm?.CCFailEmailGroup | slice : 1;\r\n                    let j = index\r\n                  \"\r\n                >\r\n                  <div class=\"avatar-card\">\r\n                    <span class=\"value\">\r\n                      <i\r\n                        class=\"icons\"\r\n                        (click)=\"remove('ccGroupFailEmail', data)\"\r\n                        >&#xe90d;</i\r\n                      >\r\n                      {{ data?.group_name }}\r\n                    </span>\r\n                  </div>\r\n                </li>\r\n              </ul>\r\n            </div>\r\n          </app-popover>\r\n          <!-- overseer fail end -->\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- When -->\r\n    <div\r\n      class=\"form-group-row\"\r\n      [class.active]=\"activeSelector === 'frequency'\"\r\n      [class.disabled]=\"\r\n        activeSelector &&\r\n        activeSelector !== 'frequency' &&\r\n        sideSelectorElements.includes(activeSelector)\r\n      \"\r\n    >\r\n      <div\r\n        *ngIf=\"false\"\r\n        class=\"left\"\r\n        [class.checked]=\"policyForm?.frequency_details\"\r\n      >\r\n        <img\r\n          *ngIf=\"\r\n            !policyForm?.frequency_details || activeSelector === 'frequency'\r\n          \"\r\n          src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/when.svg\"\r\n          alt=\"im\"\r\n        />\r\n\r\n        <svg\r\n          *ngIf=\"\r\n            policyForm?.frequency_details && activeSelector !== 'frequency'\r\n          \"\r\n          class=\"checkIcon\"\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          viewBox=\"0 0 52 52\"\r\n        >\r\n          <circle\r\n            class=\"checkIcon__circle\"\r\n            cx=\"26\"\r\n            cy=\"26\"\r\n            r=\"25\"\r\n            fill=\"none\"\r\n          />\r\n          <path\r\n            class=\"checkIcon__check\"\r\n            fill=\"none\"\r\n            d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n          />\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?</label>\r\n\r\n          <div\r\n            *ngIf=\"policyForm?.frequency_details == ''\"\r\n            class=\"select button-sec\"\r\n          >\r\n            <div\r\n              class=\"custom-input frequency-custom-input\"\r\n              (click)=\"activateSelector('frequency', true)\"\r\n            >\r\n              {{ frequencyPlaceholder }}\r\n            </div>\r\n\r\n            <button (click)=\"activateSelector('frequency', true)\" type=\"button\">\r\n              Set A frequency\r\n            </button>\r\n          </div>\r\n          <div\r\n            *ngIf=\"policyForm?.frequency_details != ''\"\r\n            class=\"selected button-sec\"\r\n          >\r\n            <span class=\"chip\">{{ frequencyPlaceholder }}</span>\r\n            <button\r\n              *ngIf=\"activeSelector !== 'frequency'\"\r\n              type=\"button\"\r\n              class=\"edit\"\r\n              (click)=\"activateSelector('frequency', true)\"\r\n            >\r\n              <i class=\"icons\">&#xe9ba;</i>Edit\r\n            </button>\r\n          </div>\r\n          <p\r\n            *ngIf=\"\r\n              submitted &&\r\n              ((policyForm?.selectedAssignees?.length > 0 &&\r\n                !policyForm?.frequency_details &&\r\n                !groupEnabled) ||\r\n                ((policyForm?.selectedAssignees?.length > 0 ||\r\n                  policyForm?.selectedGroupAssignee?.length > 0) &&\r\n                  !policyForm?.frequency_details &&\r\n                  groupEnabled))\r\n            \"\r\n            class=\"error-message\"\r\n            [appScrollInView]=\"true\"\r\n          >\r\n            Select an attestation schedule for this policy.\r\n          </p>\r\n\r\n          <!-- <label class=\"vx-control-panel\">Effective Date</label>\r\n                  <div class=\"date-time-picker\">\r\n                      <div class=\"picker-group\">\r\n                          <input type=\"text\" readonly placeholder=\"Select the date from which this policy goes into effect.\"\r\n                              [value]=\"policyForm.policyDueDate  | date: 'dd MMM yyyy'\" (click)=\"openDatePicker();\">\r\n                          <i class=\"icons\">&#xe92d;</i>\r\n                          <dp-date-picker #datePicker (onSelect)=\"datePickerOverlay = false;closeDatePicker($event)\"\r\n                              [config]=\"dateConfig\" [(ngModel)]=\"policyForm.policyDueDate\">\r\n                          </dp-date-picker>\r\n                          <div class=\"vx-overlay\" (click)=\"closeDatePicker($event)\" *ngIf=\"datePickerOverlay\"></div>\r\n                      </div>\r\n                  </div> -->\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Checkpoints / Assessment of Understanding -->\r\n    <div\r\n      class=\"form-group-row\"\r\n      [appScrollInView]=\"scrollToBottom\"\r\n      *ngIf=\"true\"\r\n      [class.active]=\"activeSelector === 'checkpoints'\"\r\n      [class.disabled]=\"\r\n        activeSelector &&\r\n        activeSelector !== 'checkpoints' &&\r\n        sideSelectorElements.includes(activeSelector)\r\n      \"\r\n    >\r\n      <div\r\n        *ngIf=\"false\"\r\n        class=\"left\"\r\n        [class.checked]=\"policyForm?.checkpointDetails?.length > 0\"\r\n      >\r\n        <img\r\n          *ngIf=\"\r\n            policyForm?.checkpointDetails?.length == 0 ||\r\n            activeSelector === 'checkpoints'\r\n          \"\r\n          src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/checkpoints.svg\"\r\n          alt=\"im\"\r\n        />\r\n\r\n        <svg\r\n          *ngIf=\"\r\n            policyForm?.checkpointDetails?.length > 0 &&\r\n            activeSelector !== 'checkpoints'\r\n          \"\r\n          class=\"checkIcon\"\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          viewBox=\"0 0 52 52\"\r\n        >\r\n          <circle\r\n            class=\"checkIcon__circle\"\r\n            cx=\"26\"\r\n            cy=\"26\"\r\n            r=\"25\"\r\n            fill=\"none\"\r\n          />\r\n          <path\r\n            class=\"checkIcon__check\"\r\n            fill=\"none\"\r\n            d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n          />\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            Assessment of Understanding\r\n            <!-- <button  *ngIf=\"policyForm?.checkpointDetails?.length===0\" class=\"button\" (click)=\"activateSelector('checkpoints',true)\">+ Add Checkpoints</button> -->\r\n          </label>\r\n          <div\r\n            class=\"select\"\r\n            *ngIf=\"policyForm?.checkpointDetails?.length === 0\"\r\n            (click)=\"activateSelector('checkpoints', true)\"\r\n          >\r\n            <!-- <input type=\"text\" placeholder=\"Set up a questionnaire to confirm the reader\u2019s understanding of the policy.\" readonly> -->\r\n            <div class=\"custom-input\">\r\n              Set up a questionnaire to confirm the reader\u2019s<br />understanding\r\n              of the policy.\r\n            </div>\r\n          </div>\r\n          <div\r\n            class=\"selected\"\r\n            *ngIf=\"policyForm?.checkpointDetails?.length > 0\"\r\n          >\r\n            <!-- <div class=\"chip-container\">\r\n                      <span class=\"chip\">{{policyForm?.checkpointDetails?.length + (policyForm?.checkpointDetails?.length > 1 ?' Checkpoints':' Checkpoint')}}</span>\r\n\r\n                      <span class=\"checkpoint-point-text first\">TOTAL POINTS: <span class=\"no\">{{policyForm?.totalQuestion}}</span><br><em>Each question carries 1 point</em></span>\r\n\r\n                      <span class=\"checkpoint-point-text\">POINTS REQUIRED TO ATTEST : <span class=\"no\">{{policyForm?.passingMarks}}</span></span>\r\n\r\n                    </div> -->\r\n            <div\r\n              class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n            >\r\n              <span class=\"chipName vx-fs-11 vx-label-txt\">{{\r\n                policyForm?.checkpointDetails?.length +\r\n                  (policyForm?.checkpointDetails?.length > 1\r\n                    ? \" Questions\"\r\n                    : \" Question\")\r\n              }}</span>\r\n            </div>\r\n            <button\r\n              class=\"edit\"\r\n              type=\"button\"\r\n              (click)=\"activateSelector('checkpoints', true)\"\r\n            >\r\n              <i class=\"icons\">&#xe9ba;</i> Edit\r\n            </button>\r\n          </div>\r\n          <!-- <app-popover #checkpointPopOver [dontCloseonClick]=\"true\">\r\n                  <div class=\"wf-action-list\">\r\n                      <ul class=\"action-item\">\r\n                          <li *ngFor=\"let checkpoint of policyForm?.checkpointDetails | slice: 1; let j = index\">\r\n                              <div class=\"avatar-card\">\r\n                                  <span class=\"value\">\r\n                                      <i class=\"icons\" (click)=\"remove('checkpoints',checkpoint,j+1)\">&#xe90d;</i>\r\n                                      {{ checkpoint?.question }}\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    <!-- Risk Classification -->\r\n    <div\r\n      class=\"form-group-row\"\r\n      *ngIf=\"showRiskClassification && false\"\r\n      [class.disabled]=\"activeSelector && activeSelector !== 'name'\"\r\n    >\r\n      <div class=\"left\" [class.checked]=\"policyForm.riskRating\">\r\n        <img\r\n          src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/risks.svg\"\r\n          alt=\"im\"\r\n          *ngIf=\"!policyForm?.riskRating\"\r\n        />\r\n\r\n        <svg\r\n          class=\"checkIcon\"\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          viewBox=\"0 0 52 52\"\r\n          *ngIf=\"policyForm?.riskRating\"\r\n        >\r\n          <circle\r\n            class=\"checkIcon__circle\"\r\n            cx=\"26\"\r\n            cy=\"26\"\r\n            r=\"25\"\r\n            fill=\"none\"\r\n          />\r\n          <path\r\n            class=\"checkIcon__check\"\r\n            fill=\"none\"\r\n            d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n          />\r\n        </svg>\r\n      </div>\r\n\r\n      <div class=\"right\">\r\n        <div class=\"vx-form-group\">\r\n          <label class=\"vx-control-panel\">Risk Classification</label>\r\n          <div class=\"classification\">\r\n            <label\r\n              class=\"low\"\r\n              *ngFor=\"let class of riskClassification\"\r\n              [ngClass]=\"[class.class]\"\r\n            >\r\n              <input\r\n                type=\"radio\"\r\n                name=\"classification\"\r\n                [value]=\"class.value\"\r\n                [checked]=\"policyForm?.riskRating === class.value\"\r\n                [(ngModel)]=\"policyForm.riskRating\"\r\n              />\r\n              <span>{{ class.name }}</span>\r\n            </label>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Responsibility Center -->\r\n    <div\r\n      class=\"form-group-row\"\r\n      [appScrollInView]=\"scrollToBottom\"\r\n      *ngIf=\"policyForm.addResponsibilityCenters\"\r\n      [class.active]=\"activeSelector === 'rc'\"\r\n      [class.disabled]=\"\r\n        activeSelector &&\r\n        activeSelector !== 'rc' &&\r\n        sideSelectorElements.includes(activeSelector)\r\n      \"\r\n    >\r\n      <div class=\"left\" [class.checked]=\"policyForm?.selectedRCs?.length > 0\">\r\n        <img\r\n          *ngIf=\"\r\n            policyForm?.selectedRCs?.length == 0 || activeSelector === 'rc'\r\n          \"\r\n          src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/responsibility-center.svg\"\r\n          alt=\"\"\r\n        />\r\n\r\n        <svg\r\n          *ngIf=\"policyForm?.selectedRCs?.length > 0 && activeSelector !== 'rc'\"\r\n          class=\"checkIcon\"\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          viewBox=\"0 0 52 52\"\r\n        >\r\n          <circle\r\n            class=\"checkIcon__circle\"\r\n            cx=\"26\"\r\n            cy=\"26\"\r\n            r=\"25\"\r\n            fill=\"none\"\r\n          />\r\n          <path\r\n            class=\"checkIcon__check\"\r\n            fill=\"none\"\r\n            d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n          />\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=\"policyForm?.selectedRCs?.length == 0\">\r\n            <input\r\n              type=\"text\"\r\n              (click)=\"activateSelector('rc', true)\"\r\n              placeholder=\"Select Responsibility Center(s) that this policy relates to.\"\r\n              readonly\r\n            />\r\n          </div>\r\n\r\n          <div class=\"selected\" *ngIf=\"policyForm?.selectedRCs?.length > 0\">\r\n            <div\r\n              class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n            >\r\n              <ng-container\r\n                *ngFor=\"let rc of policyForm?.selectedRCs?.slice(0, 1)\"\r\n              >\r\n                <i\r\n                  class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                  (click)=\"remove('rc', rc)\"\r\n                  >&#xe9ae;</i\r\n                >\r\n                <span\r\n                  class=\"chipName vx-fs-11 vx-label-txt\"\r\n                  [appTooltip]=\"rc.item_name\"\r\n                  placement=\"bottom-left\"\r\n                  delay=\"0\"\r\n                  type=\"black\"\r\n                  [tooltipMandatory]=\"false\"\r\n                  >{{ rc.item_name }}</span\r\n                >\r\n              </ng-container>\r\n              <button\r\n                class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n                appPopover\r\n                (click)=\"rcPopover.popover()\"\r\n                placement=\"right\"\r\n                *ngIf=\"policyForm?.selectedRCs?.length > 1\"\r\n              >\r\n                +{{ policyForm?.selectedRCs?.slice(1).length }}\r\n              </button>\r\n            </div>\r\n            <button\r\n              class=\"edit\"\r\n              type=\"button\"\r\n              (click)=\"activateSelector('rc', true)\"\r\n            >\r\n              <i class=\"icons\">&#xe9ba;</i> Edit\r\n            </button>\r\n          </div>\r\n          <app-popover #rcPopover [dontCloseonClick]=\"true\">\r\n            <div class=\"wf-action-list\">\r\n              <ul class=\"action-item\">\r\n                <li\r\n                  *ngFor=\"\r\n                    let rc of policyForm?.selectedRCs | slice : 1;\r\n                    let j = index\r\n                  \"\r\n                >\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\r\n    <!-- Version -->\r\n    <div\r\n      *ngIf=\"policyForm.addVersion\"\r\n      class=\"form-group-row\"\r\n      [class.disabled]=\"\r\n        activeSelector && sideSelectorElements.includes(activeSelector)\r\n      \"\r\n    >\r\n      <div class=\"left\" [class.checked]=\"policyForm.policy_version\">\r\n        <img\r\n          src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/associated-risks.svg\"\r\n          alt=\"name\"\r\n          *ngIf=\"!policyForm.policy_version\"\r\n        />\r\n\r\n        <svg\r\n          *ngIf=\"policyForm.policy_version\"\r\n          class=\"checkIcon\"\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          viewBox=\"0 0 52 52\"\r\n        >\r\n          <circle\r\n            class=\"checkIcon__circle\"\r\n            cx=\"26\"\r\n            cy=\"26\"\r\n            r=\"25\"\r\n            fill=\"none\"\r\n          />\r\n          <path\r\n            class=\"checkIcon__check\"\r\n            fill=\"none\"\r\n            d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n          />\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\">VERSION</label>\r\n          <input\r\n            [(ngModel)]=\"policyForm.policy_version\"\r\n            (change)=\"onVersion($event)\"\r\n            type=\"text\"\r\n            placeholder=\"Specify the policy version.\"\r\n          />\r\n          <p\r\n            *ngIf=\"!isVersionValid\"\r\n            class=\"error-message\"\r\n            [appScrollInView]=\"true\"\r\n          >\r\n            {{ versionErrorMessage }}\r\n          </p>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Reviewer -->\r\n    <div\r\n      class=\"form-group-row\"\r\n      [appScrollInView]=\"scrollToBottom\"\r\n      *ngIf=\"policyForm.addReviewers && false\"\r\n      [class.active]=\"activeSelector === 'reviewer'\"\r\n      [class.disabled]=\"\r\n        activeSelector &&\r\n        activeSelector !== 'reviewer' &&\r\n        activeSelector !== 'reviewerFrequency' &&\r\n        sideSelectorElements.includes(activeSelector)\r\n      \"\r\n    >\r\n      <div\r\n        class=\"left\"\r\n        [class.checked]=\"policyForm?.selectedReviewers?.length > 0\"\r\n      >\r\n        <img\r\n          *ngIf=\"\r\n            policyForm?.selectedReviewers?.length == 0 ||\r\n            activeSelector === 'reviewer'\r\n          \"\r\n          src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/reviewer.svg\"\r\n          alt=\"\"\r\n        />\r\n\r\n        <svg\r\n          *ngIf=\"\r\n            policyForm?.selectedReviewers?.length > 0 &&\r\n            activeSelector !== 'reviewer'\r\n          \"\r\n          class=\"checkIcon\"\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          viewBox=\"0 0 52 52\"\r\n        >\r\n          <circle\r\n            class=\"checkIcon__circle\"\r\n            cx=\"26\"\r\n            cy=\"26\"\r\n            r=\"25\"\r\n            fill=\"none\"\r\n          />\r\n          <path\r\n            class=\"checkIcon__check\"\r\n            fill=\"none\"\r\n            d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n          />\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\r\n            class=\"select\"\r\n            *ngIf=\"policyForm?.selectedReviewers?.length == 0\"\r\n          >\r\n            <input\r\n              type=\"text\"\r\n              (click)=\"activateSelector('reviewer', true)\"\r\n              placeholder=\"Select the person responsible for reviewing this policy\"\r\n              readonly\r\n            />\r\n          </div>\r\n\r\n          <div\r\n            class=\"selected\"\r\n            *ngIf=\"policyForm?.selectedReviewers?.length > 0\"\r\n          >\r\n            <div\r\n              class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n            >\r\n              <ng-container\r\n                *ngFor=\"let reviewer of policyForm?.selectedReviewers\"\r\n              >\r\n                <i\r\n                  class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                  (click)=\"remove('reviewer', reviewer)\"\r\n                  >&#xe9ae;</i\r\n                >\r\n                <span\r\n                  class=\"chipName vx-fs-11 vx-label-txt\"\r\n                  [appTooltip]=\"reviewer.member_name\"\r\n                  placement=\"bottom-left\"\r\n                  delay=\"0\"\r\n                  type=\"black\"\r\n                  [tooltipMandatory]=\"false\"\r\n                  >{{ reviewer.member_name }}</span\r\n                >\r\n              </ng-container>\r\n            </div>\r\n\r\n            <button\r\n              class=\"edit\"\r\n              type=\"button\"\r\n              (click)=\"activateSelector('reviewer', true)\"\r\n            >\r\n              <i class=\"icons\">&#xe9ba;</i> Edit\r\n            </button>\r\n          </div>\r\n          <p\r\n            *ngIf=\"\r\n              submitted &&\r\n              policyForm?.selectedReviewers?.length == 0 &&\r\n              policyForm?.review_frequency_details\r\n            \"\r\n            class=\"error-message\"\r\n            [appScrollInView]=\"true\"\r\n          >\r\n            Select a reviewer for this policy.\r\n          </p>\r\n\r\n          <label class=\"vx-control-panel\">When? </label>\r\n\r\n          <div\r\n            *ngIf=\"policyForm?.review_frequency_details == ''\"\r\n            class=\"select button-sec\"\r\n          >\r\n            <input\r\n              type=\"text\"\r\n              (click)=\"activateSelector('reviewerFrequency', true)\"\r\n              [placeholder]=\"reviewerFrequencyPlaceholder\"\r\n              readonly\r\n            />\r\n            <button\r\n              (click)=\"activateSelector('reviewerFrequency', true)\"\r\n              type=\"button\"\r\n            >\r\n              Set A frequency\r\n            </button>\r\n          </div>\r\n          <div\r\n            *ngIf=\"policyForm?.review_frequency_details != ''\"\r\n            class=\"selected button-sec\"\r\n          >\r\n            <span class=\"chip\">{{ reviewerFrequencyPlaceholder }}</span>\r\n            <button\r\n              *ngIf=\"activeSelector !== 'reviewerFrequency'\"\r\n              type=\"button\"\r\n              class=\"edit\"\r\n              (click)=\"activateSelector('reviewerFrequency', true)\"\r\n            >\r\n              <i class=\"icons\">&#xe9ba;</i>Edit\r\n            </button>\r\n          </div>\r\n          <p\r\n            *ngIf=\"\r\n              submitted &&\r\n              policyForm?.selectedReviewers?.length > 0 &&\r\n              !policyForm?.review_frequency_details\r\n            \"\r\n            class=\"error-message\"\r\n            [appScrollInView]=\"true\"\r\n          >\r\n            Select the review schedule for this policy.\r\n          </p>\r\n\r\n          <app-format-and-evidence\r\n            (updateFiles)=\"saveSelectedList('reviewer_attachments', $event)\"\r\n            #formatEvidence\r\n            [mode]=\"'policyReviewer'\"\r\n            [organization_id]=\"organization_id\"\r\n            [formatEvidanceData]=\"policyForm?.documentsAndLinks\"\r\n          >\r\n          </app-format-and-evidence>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Overseer -->\r\n    <div\r\n      class=\"form-group-row\"\r\n      [appScrollInView]=\"scrollToBottom\"\r\n      *ngIf=\"policyForm.addOverseers\"\r\n      [class.active]=\"\r\n        activeSelector === 'ccEmail' || activeSelector === 'ccFail'\r\n      \"\r\n      [class.disabled]=\"\r\n        activeSelector &&\r\n        activeSelector !== 'ccEmail' &&\r\n        activeSelector !== 'ccFail' &&\r\n        sideSelectorElements.includes(activeSelector)\r\n      \"\r\n    >\r\n      <div\r\n        class=\"left\"\r\n        [class.checked]=\"\r\n          policyForm?.CCEmail?.length > 0 || policyForm?.CCFailEmail?.length > 0\r\n        \"\r\n      >\r\n        <img\r\n          *ngIf=\"\r\n            (policyForm?.CCFailEmail?.length == 0 &&\r\n              policyForm?.CCEmail?.length == 0) ||\r\n            activeSelector === 'ccEmail' ||\r\n            activeSelector === 'ccFail'\r\n          \"\r\n          src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/oversight.svg\"\r\n          alt=\"im\"\r\n        />\r\n\r\n        <svg\r\n          *ngIf=\"\r\n            (policyForm?.CCFailEmail?.length > 0 ||\r\n              policyForm?.CCEmail?.length > 0) &&\r\n            activeSelector !== 'ccEmail' &&\r\n            activeSelector !== 'ccFail'\r\n          \"\r\n          class=\"checkIcon\"\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          viewBox=\"0 0 52 52\"\r\n        >\r\n          <circle\r\n            class=\"checkIcon__circle\"\r\n            cx=\"26\"\r\n            cy=\"26\"\r\n            r=\"25\"\r\n            fill=\"none\"\r\n          />\r\n          <path\r\n            class=\"checkIcon__check\"\r\n            fill=\"none\"\r\n            d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n          />\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\r\n            class=\"select\"\r\n            *ngIf=\"\r\n              policyForm?.CCEmail?.length == 0 &&\r\n              policyForm?.CCGroupEmail.length == 0\r\n            \"\r\n          >\r\n            <input\r\n              type=\"text\"\r\n              (click)=\"activateSelector('ccEmail', true)\"\r\n              placeholder=\"Who should have oversight of this policy?\"\r\n              readonly\r\n            />\r\n          </div>\r\n          <div\r\n            class=\"selected\"\r\n            *ngIf=\"\r\n              policyForm?.CCEmail?.length > 0 ||\r\n              policyForm?.CCGroupEmail.length > 0\r\n            \"\r\n          >\r\n            <div\r\n              class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n              *ngIf=\"!groupEnabled\"\r\n            >\r\n              <ng-container\r\n                *ngFor=\"let ccEmail of policyForm?.CCEmail?.slice(0, 1)\"\r\n              >\r\n                <i\r\n                  class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                  (click)=\"remove('ccEmail', ccEmail)\"\r\n                  >&#xe9ae;</i\r\n                >\r\n                <span\r\n                  class=\"chipName vx-fs-11 vx-label-txt\"\r\n                  [appTooltip]=\"ccEmail.employee_name\"\r\n                  placement=\"bottom-left\"\r\n                  delay=\"0\"\r\n                  type=\"black\"\r\n                  [tooltipMandatory]=\"false\"\r\n                  >{{ ccEmail.employee_name }}</span\r\n                >\r\n              </ng-container>\r\n              <button\r\n                class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 greenBg\"\r\n                appPopover\r\n                (click)=\"ccEmailPopover.popover()\"\r\n                placement=\"right\"\r\n                *ngIf=\"policyForm?.CCEmail?.length > 1\"\r\n              >\r\n                +{{ policyForm?.CCEmail?.slice(1).length }}\r\n              </button>\r\n            </div>\r\n\r\n            <div *ngIf=\"groupEnabled\" class=\"chip-container\">\r\n              <div\r\n                class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n                *ngIf=\"groupEnabled && policyForm?.CCEmail?.length > 0\"\r\n              >\r\n                <i\r\n                  class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                  (click)=\"remove('ccEmail', policyForm?.CCEmail[0])\"\r\n                  >&#xe9ae;</i\r\n                >\r\n                <span\r\n                  class=\"chipName vx-fs-11 vx-label-txt\"\r\n                  [appTooltip]=\"policyForm?.CCEmail[0].employee_name\"\r\n                  placement=\"bottom-left\"\r\n                  delay=\"0\"\r\n                  type=\"black\"\r\n                  [tooltipMandatory]=\"false\"\r\n                  >{{ policyForm?.CCEmail[0].employee_name }}</span\r\n                >\r\n                <button\r\n                  class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 greenBg\"\r\n                  appPopover\r\n                  (click)=\"overseerPopover.popover()\"\r\n                  placement=\"right\"\r\n                  *ngIf=\"policyForm?.CCEmail?.length > 1\"\r\n                >\r\n                  +{{ policyForm?.CCEmail?.length - 1 }}\r\n                </button>\r\n              </div>\r\n\r\n              <div\r\n                class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\"\r\n                *ngIf=\"\r\n                  policyForm?.CCEmail.length > 0 &&\r\n                  policyForm?.CCGroupEmail?.length > 0\r\n                \"\r\n              >\r\n                &\r\n              </div>\r\n\r\n              <div\r\n                class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n                *ngIf=\"policyForm?.CCGroupEmail.length > 0\"\r\n              >\r\n                <i\r\n                  class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                  (click)=\"remove('ccGroupEmail', policyForm?.CCGroupEmail[0])\"\r\n                  >&#xe9ae;</i\r\n                >\r\n                <span\r\n                  class=\"chipName vx-fs-11 vx-label-txt\"\r\n                  [appTooltip]=\"policyForm?.CCGroupEmail[0]?.group_name\"\r\n                  placement=\"bottom-left\"\r\n                  delay=\"0\"\r\n                  type=\"black\"\r\n                  [tooltipMandatory]=\"false\"\r\n                  >{{ policyForm?.CCGroupEmail[0]?.group_name }}</span\r\n                >\r\n                <button\r\n                  class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n                  appPopover\r\n                  (click)=\"overseerGroup.popover()\"\r\n                  placement=\"right\"\r\n                  *ngIf=\"policyForm?.CCGroupEmail?.length > 1\"\r\n                >\r\n                  +{{ policyForm?.CCGroupEmail?.length - 1 }}\r\n                </button>\r\n              </div>\r\n            </div>\r\n\r\n            <button\r\n              class=\"edit\"\r\n              type=\"button\"\r\n              (click)=\"activateSelector('ccEmail', true)\"\r\n            >\r\n              <i class=\"icons\">&#xe9ba;</i> Edit\r\n            </button>\r\n          </div>\r\n\r\n          <div\r\n            class=\"select\"\r\n            *ngIf=\"\r\n              policyForm?.CCFailEmail?.length == 0 &&\r\n              policyForm?.CCFailEmailGroup?.length == 0\r\n            \"\r\n          >\r\n            <input\r\n              type=\"text\"\r\n              (click)=\"activateSelector('ccFail', true)\"\r\n              placeholder=\"Who should be notified if the policy is not attested on time?\"\r\n              readonly\r\n            />\r\n          </div>\r\n\r\n          <div\r\n            class=\"selected\"\r\n            *ngIf=\"\r\n              policyForm?.CCFailEmail?.length > 0 ||\r\n              policyForm?.CCFailEmailGroup?.length > 0\r\n            \"\r\n          >\r\n            <div\r\n              class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n              *ngIf=\"!groupEnabled\"\r\n            >\r\n              <ng-container\r\n                *ngFor=\"let ccFail of policyForm?.CCFailEmail?.slice(0, 1)\"\r\n              >\r\n                <i\r\n                  class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                  (click)=\"remove('ccFail', ccFail)\"\r\n                  >&#xe9ae;</i\r\n                >\r\n                <span\r\n                  class=\"chipName vx-fs-11 vx-label-txt\"\r\n                  [appTooltip]=\"ccFail.employee_name\"\r\n                  placement=\"bottom-left\"\r\n                  delay=\"0\"\r\n                  type=\"black\"\r\n                  [tooltipMandatory]=\"false\"\r\n                  >{{ ccFail.employee_name }}</span\r\n                >\r\n              </ng-container>\r\n              <button\r\n                class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 greenBg\"\r\n                appPopover\r\n                (click)=\"ccFailPopover.popover()\"\r\n                placement=\"right\"\r\n                *ngIf=\"policyForm?.CCFailEmail?.length > 1\"\r\n              >\r\n                +{{ policyForm?.CCFailEmail?.slice(1).length }}\r\n              </button>\r\n            </div>\r\n\r\n            <div *ngIf=\"groupEnabled\" class=\"chip-container\">\r\n              <div\r\n                class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n                *ngIf=\"groupEnabled && policyForm?.CCFailEmail.length > 0\"\r\n              >\r\n                <i\r\n                  class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                  (click)=\"remove('ccFail', policyForm?.CCFailEmail[0])\"\r\n                  >&#xe9ae;</i\r\n                >\r\n                <span\r\n                  class=\"chipName vx-fs-11 vx-label-txt\"\r\n                  [appTooltip]=\"policyForm?.CCFailEmail[0]?.employee_name\"\r\n                  placement=\"bottom-left\"\r\n                  delay=\"0\"\r\n                  type=\"black\"\r\n                  [tooltipMandatory]=\"false\"\r\n                  >{{ policyForm?.CCFailEmail[0]?.employee_name }}</span\r\n                >\r\n                <button\r\n                  class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 greenBg\"\r\n                  appPopover\r\n                  (click)=\"overseerFailPopover.popover()\"\r\n                  placement=\"right\"\r\n                  *ngIf=\"policyForm?.CCFailEmail?.length > 1\"\r\n                >\r\n                  +{{ policyForm?.CCFailEmail?.length - 1 }}\r\n                </button>\r\n              </div>\r\n\r\n              <div\r\n                class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\"\r\n                *ngIf=\"\r\n                  policyForm?.CCFailEmail?.length > 0 &&\r\n                  policyForm?.CCFailEmailGroup?.length > 0\r\n                \"\r\n              >\r\n                &\r\n              </div>\r\n\r\n              <div\r\n                class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n                *ngIf=\"policyForm?.CCFailEmailGroup?.length > 0\"\r\n              >\r\n                <i\r\n                  class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                  (click)=\"\r\n                    remove('ccGroupFailEmail', policyForm?.CCFailEmailGroup[0])\r\n                  \"\r\n                  >&#xe9ae;</i\r\n                >\r\n                <span\r\n                  class=\"chipName vx-fs-11 vx-label-txt\"\r\n                  [appTooltip]=\"policyForm?.CCFailEmailGroup[0]?.group_name\"\r\n                  placement=\"bottom-left\"\r\n                  delay=\"0\"\r\n                  type=\"black\"\r\n                  [tooltipMandatory]=\"false\"\r\n                  >{{ policyForm?.CCFailEmailGroup[0]?.group_name }}</span\r\n                >\r\n                <button\r\n                  class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n                  appPopover\r\n                  (click)=\"overseerFailGroup.popover()\"\r\n                  placement=\"right\"\r\n                  *ngIf=\"policyForm?.CCFailEmailGroup?.length > 1\"\r\n                >\r\n                  +{{ policyForm?.CCFailEmailGroup?.length - 1 }}\r\n                </button>\r\n              </div>\r\n            </div>\r\n            <button\r\n              class=\"edit\"\r\n              type=\"button\"\r\n              (click)=\"activateSelector('ccFail', true)\"\r\n            >\r\n              <i class=\"icons\">&#xe9ba;</i> Edit\r\n            </button>\r\n          </div>\r\n          <app-popover #ccEmailPopover [dontCloseonClick]=\"true\">\r\n            <div class=\"wf-action-list\">\r\n              <ul class=\"action-item\">\r\n                <li\r\n                  *ngFor=\"\r\n                    let ccEmail of policyForm?.CCEmail | slice : 1;\r\n                    let j = index\r\n                  \"\r\n                >\r\n                  <div class=\"avatar-card\">\r\n                    <span class=\"value\">\r\n                      <i class=\"icons\" (click)=\"remove('ccEmail', ccEmail)\"\r\n                        >&#xe90d;</i\r\n                      >\r\n                      {{ ccEmail.employee_name }}\r\n                    </span>\r\n                  </div>\r\n                </li>\r\n              </ul>\r\n            </div>\r\n          </app-popover>\r\n          <app-popover #ccFailPopover [dontCloseonClick]=\"true\">\r\n            <div class=\"wf-action-list\">\r\n              <ul class=\"action-item\">\r\n                <li\r\n                  *ngFor=\"\r\n                    let ccFail of policyForm?.CCFailEmail | slice : 1;\r\n                    let j = index\r\n                  \"\r\n                >\r\n                  <div class=\"avatar-card\">\r\n                    <span class=\"value\">\r\n                      <i class=\"icons\" (click)=\"remove('ccFail', ccFail)\"\r\n                        >&#xe90d;</i\r\n                      >\r\n                      {{ ccFail.employee_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    <!-- Related Documents -->\r\n    <div\r\n      class=\"form-group-row\"\r\n      [appScrollInView]=\"scrollToBottom\"\r\n      *ngIf=\"policyForm.addAssociatedDocuments\"\r\n      [class.disabled]=\"activeSelector && activeSelector !== 'name'\"\r\n    >\r\n      <div class=\"left\">\r\n        <img\r\n          *ngIf=\"policyForm.associatedDocuments.formatFiles?.length == 0\"\r\n          src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/format-evidence.svg\"\r\n          alt=\"im\"\r\n        />\r\n\r\n        <svg\r\n          *ngIf=\"policyForm.associatedDocuments.formatFiles?.length > 0\"\r\n          class=\"checkIcon\"\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          viewBox=\"0 0 52 52\"\r\n        >\r\n          <circle\r\n            class=\"checkIcon__circle\"\r\n            cx=\"26\"\r\n            cy=\"26\"\r\n            r=\"25\"\r\n            fill=\"none\"\r\n          />\r\n          <path\r\n            class=\"checkIcon__check\"\r\n            fill=\"none\"\r\n            d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n          />\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\">RELATED DOCUMENTS</label>\r\n          <app-format-and-evidence\r\n            (updateFiles)=\"saveSelectedList('associatedDocuments', $event)\"\r\n            [mode]=\"'policy'\"\r\n            [organization_id]=\"organization_id\"\r\n            [formatEvidanceData]=\"policyForm?.associatedDocuments\"\r\n          ></app-format-and-evidence>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Link Programs & Responsibilities -->\r\n    <div\r\n      *ngIf=\"policyForm?.addLinkProgram\"\r\n      class=\"form-group-row\"\r\n      [class.active]=\"activeSelector === 'linkProgram'\"\r\n      [class.disabled]=\"\r\n        activeSelector &&\r\n        activeSelector !== 'linkProgram' &&\r\n        sideSelectorElements.includes(activeSelector)\r\n      \"\r\n    >\r\n      <div\r\n        class=\"left\"\r\n        [class.checked]=\"\r\n          policyForm?.programSelectedValues?.program?.category_id\r\n        \"\r\n      >\r\n        <img\r\n          *ngIf=\"!policyForm?.programSelectedValues?.program?.category_id\"\r\n          src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/link-items.svg\"\r\n          alt=\"\"\r\n        />\r\n\r\n        <svg\r\n          *ngIf=\"policyForm?.programSelectedValues?.program?.category_id\"\r\n          class=\"checkIcon\"\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          viewBox=\"0 0 52 52\"\r\n        >\r\n          <circle\r\n            class=\"checkIcon__circle\"\r\n            cx=\"26\"\r\n            cy=\"26\"\r\n            r=\"25\"\r\n            fill=\"none\"\r\n          />\r\n          <path\r\n            class=\"checkIcon__check\"\r\n            fill=\"none\"\r\n            d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n          />\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            >LINK PROGRAMS & RESPONSIBILITIES</label\r\n          >\r\n          <div\r\n            *ngIf=\"!policyForm?.programSelectedValues?.program?.category_id\"\r\n            (click)=\"activateSelector('linkProgram', true)\"\r\n            class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\r\n            [class.disabled]=\"false\"\r\n          >\r\n            <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\r\n              Select Programs & responsibilities that are<br />associated with\r\n              this policy.\r\n            </div>\r\n          </div>\r\n\r\n          <div\r\n            class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\r\n            *ngIf=\"policyForm?.programSelectedValues?.program?.category_id\"\r\n          >\r\n            <div\r\n              class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n            >\r\n              <i\r\n                (click)=\"\r\n                  remove('linkProgram', policyForm?.programSelectedValues)\r\n                \"\r\n                class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                >&#xe9ae;</i\r\n              >\r\n              <span\r\n                class=\"chipName vx-fs-11 vx-label-txt\"\r\n                [appTooltip]=\"policyForm?.programSelectedValues?.program?.name\"\r\n                placement=\"bottom-left\"\r\n                delay=\"0\"\r\n                type=\"black\"\r\n                [tooltipMandatory]=\"false\"\r\n                >{{ policyForm?.programSelectedValues?.program?.name }}</span\r\n              >\r\n              <!-- <button\r\n                class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n                appPopover\r\n                (click)=\"programResponsibilityPopover.popover()\"\r\n                placement=\"right\"\r\n              >\r\n                +4\r\n              </button> -->\r\n            </div>\r\n            <app-popover\r\n              #programResponsibilityPopover\r\n              [dontCloseonClick]=\"true\"\r\n            >\r\n              <div class=\"wf-action-list\">\r\n                <ul class=\"action-item\">\r\n                  <li *ngFor=\"let data of [1, 1, 1, 1, 1, 1, 1]\">\r\n                    <div class=\"avatar-card\">\r\n                      <span\r\n                        class=\"value\"\r\n                        [appTooltip]=\"\r\n                          'Reporting information security weaknesses'\r\n                        \"\r\n                        placement=\"bottom-left\"\r\n                        delay=\"0\"\r\n                        type=\"black\"\r\n                        [tooltipMandatory]=\"false\"\r\n                      >\r\n                        <i class=\"icons\">&#xe90d;</i>\r\n                        Reporting information security weaknesses\r\n                      </span>\r\n                    </div>\r\n                  </li>\r\n                </ul>\r\n              </div>\r\n            </app-popover>\r\n            <button\r\n              class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\r\n              (click)=\"activateSelector('linkProgram', true)\"\r\n            >\r\n              <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Link Assessment -->\r\n    <div\r\n      *ngIf=\"policyForm.addLinkAssessment\"\r\n      class=\"form-group-row\"\r\n      [class.active]=\"activeSelector === 'isAssessment'\"\r\n      [class.disabled]=\"\r\n        activeSelector &&\r\n        activeSelector !== 'isAssessment' &&\r\n        sideSelectorElements.includes(activeSelector)\r\n      \"\r\n    >\r\n      <div class=\"left\" [class.checked]=\"policyForm?.assessment?.length\">\r\n        <img\r\n          *ngIf=\"!policyForm?.assessment?.length\"\r\n          src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/assessments.svg\"\r\n          alt=\"\"\r\n        />\r\n\r\n        <svg\r\n          *ngIf=\"policyForm?.assessment?.length\"\r\n          class=\"checkIcon\"\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          viewBox=\"0 0 52 52\"\r\n        >\r\n          <circle\r\n            class=\"checkIcon__circle\"\r\n            cx=\"26\"\r\n            cy=\"26\"\r\n            r=\"25\"\r\n            fill=\"none\"\r\n          />\r\n          <path\r\n            class=\"checkIcon__check\"\r\n            fill=\"none\"\r\n            d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n          />\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\">LINK ASSESSMENTS</label>\r\n          <div\r\n            *ngIf=\"policyForm?.assessment?.length === 0\"\r\n            (click)=\"activateSelector('isAssessment', true)\"\r\n            class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\r\n            [class.disabled]=\"false\"\r\n          >\r\n            <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\r\n              Select assessments that are associated with this<br />policy.\r\n            </div>\r\n          </div>\r\n\r\n          <div\r\n            *ngIf=\"policyForm?.assessment?.length > 0\"\r\n            class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\r\n          >\r\n            <div\r\n              class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n            >\r\n              <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                >&#xe9ae;</i\r\n              >\r\n              <span\r\n                class=\"chipName vx-fs-11 vx-label-txt\"\r\n                [appTooltip]=\"\r\n                  policyForm.assessment[0]?.assessmentDetails?.assessment_name\r\n                \"\r\n                placement=\"bottom-left\"\r\n                delay=\"0\"\r\n                type=\"black\"\r\n                [tooltipMandatory]=\"false\"\r\n                >{{\r\n                  policyForm.assessment[0]?.assessmentDetails?.assessment_name\r\n                }}</span\r\n              >\r\n            </div>\r\n            <app-popover\r\n              #programResponsibilityPopover\r\n              [dontCloseonClick]=\"true\"\r\n            >\r\n              <div class=\"wf-action-list\">\r\n                <ul class=\"action-item\">\r\n                  <li\r\n                    *ngFor=\"let assessment of policyForm.assessment | slice : 1\"\r\n                  >\r\n                    <div class=\"avatar-card\">\r\n                      <span\r\n                        class=\"value\"\r\n                        [appTooltip]=\"\r\n                          assessment?.assessmentDetails?.assessment_name\r\n                        \"\r\n                        placement=\"bottom-left\"\r\n                        delay=\"0\"\r\n                        type=\"black\"\r\n                        [tooltipMandatory]=\"false\"\r\n                      >\r\n                        <i class=\"icons\">&#xe90d;</i>\r\n                        {{ assessment?.assessmentDetails?.assessment_name }}\r\n                      </span>\r\n                    </div>\r\n                  </li>\r\n                </ul>\r\n              </div>\r\n            </app-popover>\r\n            <button\r\n              (click)=\"activateSelector('isAssessment', true)\"\r\n              class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\r\n            >\r\n              <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <app-checkbox-list\r\n    [config]=\"categoryConfig\"\r\n    [twoColumn]=\"false\"\r\n    [itemsList]=\"categoryList\"\r\n    [selectedItems]=\"policyForm.selectedCategories\"\r\n    [identifierKey]=\"'_id'\"\r\n    [displayKey]=\"'item_name'\"\r\n    [tooltipKey]=\"'item_name'\"\r\n    *ngIf=\"activeSelector === 'category'\"\r\n    (saveList)=\"saveSelectedList('category', $event)\"\r\n    (closeList)=\"disableSelector()\"\r\n  >\r\n  </app-checkbox-list>\r\n  <!-- <app-checkbox-list [config]=\"approvalWorkflowConfig\" [twoColumn]=\"true\"\r\n  [itemsList]=\"\"\r\n  [selectedItems]=\"policyForm.issueCCUsers\" [identifierKey]=\"'employee_email'\" [displayKey]=\"'employee_name'\" [tooltipKey]=\"'employee_email'\"\r\n  *ngIf=\"activeSelector==='ISSUE_CC'\" (saveList)=\"selectorAction($event,'ISSUE_CC')\"\r\n  (closeList)=\"fieldDeselector('ISSUE_CC')\">\r\n</app-checkbox-list> -->\r\n\r\n  <app-responsibility-centers-list\r\n    *ngIf=\"activeSelector === 'rc'\"\r\n    [responsibilityCentersList]=\"rcList\"\r\n    [selectedResponsibilityCenters]=\"policyForm.selectedRCs\"\r\n    [rcIdKey]=\"'item_id'\"\r\n    (saveSelectedList)=\"saveSelectedList('rc', $event)\"\r\n    (closeRcList)=\"disableSelector()\"\r\n  >\r\n  </app-responsibility-centers-list>\r\n\r\n  <app-users-radio-list\r\n    *ngIf=\"activeSelector === 'reviewer'\"\r\n    [itemEmailKey]=\"'member_email'\"\r\n    [usersList]=\"allReviewers\"\r\n    [headerText]=\"'Select a Reviewer'\"\r\n    [selectedUsers]=\"policyForm.selectedReviewers\"\r\n    [userIdKey]=\"'member_id'\"\r\n    [itemNameKey]=\"'member_name'\"\r\n    (saveSelectedList)=\"saveSelectedList('reviewer', $event)\"\r\n    (closeUsersList)=\"disableSelector()\"\r\n  >\r\n  </app-users-radio-list>\r\n\r\n  <app-owner-list\r\n    *ngIf=\"activeSelector === 'ccEmail' && !groupEnabled\"\r\n    [usersList]=\"overseersList\"\r\n    [singularText]=\"'User selected'\"\r\n    [pluralText]=\"'Users selected'\"\r\n    [selectedUsers]=\"policyForm.CCEmail\"\r\n    [userIdKey]=\"'employee_id'\"\r\n    [itemNameKey]=\"'employee_name'\"\r\n    (saveSelectedList)=\"saveSelectedList('ccEmail', $event)\"\r\n    (closeUsersList)=\"disableSelector()\"\r\n  >\r\n  </app-owner-list>\r\n\r\n  <user-group-list\r\n    *ngIf=\"activeSelector === 'ccEmail' && groupEnabled\"\r\n    [groupEnabled]=\"true\"\r\n    [userlist]=\"overseersList\"\r\n    [groupList]=\"overseerGroupsList\"\r\n    [selectedUsers]=\"policyForm.CCEmail\"\r\n    [selectedGroups]=\"policyForm.CCGroupEmail\"\r\n    (save)=\"saveSelectedList('ccEmail', $event)\"\r\n    (cancel)=\"disableSelector()\"\r\n    [featureflag]=\"groupEnabled\"\r\n  >\r\n  </user-group-list>\r\n\r\n  <app-owner-list\r\n    *ngIf=\"activeSelector === 'ccFail' && !groupEnabled\"\r\n    [usersList]=\"overseersList\"\r\n    [singularText]=\"'User selected'\"\r\n    [pluralText]=\"'Users selected'\"\r\n    [selectedUsers]=\"policyForm.CCFailEmail\"\r\n    [userIdKey]=\"'employee_id'\"\r\n    [itemNameKey]=\"'employee_name'\"\r\n    (saveSelectedList)=\"saveSelectedList('ccFail', $event)\"\r\n    (closeUsersList)=\"disableSelector()\"\r\n  >\r\n  </app-owner-list>\r\n\r\n  <user-group-list\r\n    *ngIf=\"activeSelector === 'ccFail' && groupEnabled\"\r\n    [groupEnabled]=\"true\"\r\n    [userlist]=\"overseersList\"\r\n    [groupList]=\"overseerGroupsList\"\r\n    [selectedUsers]=\"policyForm.CCFailEmail\"\r\n    [selectedGroups]=\"policyForm.CCFailEmailGroup\"\r\n    (save)=\"saveSelectedList('ccFail', $event)\"\r\n    (cancel)=\"disableSelector()\"\r\n    [featureflag]=\"groupEnabled\"\r\n  >\r\n  </user-group-list>\r\n\r\n  <app-group-users-list\r\n    *ngIf=\"activeSelector === 'assignees' && !groupEnabled\"\r\n    [usersList]=\"assigneesList\"\r\n    [groupsList]=\"groupsList\"\r\n    [selectedUsers]=\"policyForm.selectedAssignees\"\r\n    [userIdKey]=\"'my_member_id'\"\r\n    (saveSelectedList)=\"saveSelectedList('assignees', $event)\"\r\n    (closeUsersList)=\"disableSelector()\"\r\n  >\r\n  </app-group-users-list>\r\n\r\n  <user-group-list\r\n    *ngIf=\"activeSelector === 'assignees' && groupEnabled\"\r\n    [groupEnabled]=\"true\"\r\n    [userlist]=\"ownerlist\"\r\n    [groupList]=\"groupsList\"\r\n    (save)=\"saveSelectedList('assignees', $event)\"\r\n    (cancel)=\"disableSelector()\"\r\n    [selectedGroups]=\"policyForm.selectedGroupAssignee\"\r\n    [selectedUsers]=\"policyForm.selectedAssignees\"\r\n    [featureflag]=\"groupEnabled\"\r\n  >\r\n  </user-group-list>\r\n\r\n  <app-owner-list\r\n    *ngIf=\"activeSelector === 'approvers' && false\"\r\n    [listHeading]=\"'Select Approvers'\"\r\n    [singularText]=\"'User selected'\"\r\n    [pluralText]=\"'Users selected'\"\r\n    [usersList]=\"allApprovers\"\r\n    [showWorkflow]=\"true\"\r\n    [selectedUsers]=\"\r\n      addMoreLevels\r\n        ? []\r\n        : policyForm.selectedApprovers[approversListIndex].approvers\r\n    \"\r\n    [userIdKey]=\"'member_id'\"\r\n    [itemEmailKey]=\"'member_email'\"\r\n    [itemNameKey]=\"'member_name'\"\r\n    (saveSelectedList)=\"saveSelectedList('approvers', $event)\"\r\n    (closeUsersList)=\"disableSelector()\"\r\n    [mode]=\"mode\"\r\n    [reviewerWorkflowType]=\"workflowType\"\r\n    (reviewerWorkflowTypeChange)=\"reviewerTypeChange($event)\"\r\n    [workflowList]=\"workflowList\"\r\n    [workflowText]=\"'Approval Workflow'\"\r\n  >\r\n  </app-owner-list>\r\n\r\n  <app-frequency-container\r\n    *ngIf=\"activeSelector === 'frequency'\"\r\n    [mode]=\"'policy'\"\r\n    [frequencyDetails]=\"frequencyDetails\"\r\n    (selectedFrequency)=\"frequencyData($event)\"\r\n    [feature]=\"feature\"\r\n    [pageType]=\"'policy'\"\r\n    (closeFrequency)=\"disableSelector()\"\r\n  ></app-frequency-container>\r\n\r\n  <app-frequency-container\r\n    *ngIf=\"activeSelector === 'reviewerFrequency'\"\r\n    [mode]=\"'reviewerFrequency'\"\r\n    [frequencyDetails]=\"reviewerFrequencyDetails\"\r\n    (selectedFrequency)=\"reviewerFrequencyData($event)\"\r\n    [feature]=\"feature\"\r\n    [pageType]=\"'policy'\"\r\n    (closeFrequency)=\"disableSelector()\"\r\n  ></app-frequency-container>\r\n\r\n  <vc-link-program\r\n    *ngIf=\"activeSelector === 'linkProgram'\"\r\n    (close)=\"disableSelector()\"\r\n    [policy]=\"policyForm\"\r\n    [selectedProgram]=\"policyForm?.programSelectedValues\"\r\n    [mode]=\"mode\"\r\n    [selectedLinkProgram]=\"selectedLinkProgram\"\r\n    (changeTab)=\"changeTab('linkedPrograms')\"\r\n    (updatedProgramDetails)=\"updatedProgramDetails($event)\"\r\n  >\r\n  </vc-link-program>\r\n\r\n  <app-checkpoints-policy-container\r\n    (closeCheckPoint)=\"disableSelector()\"\r\n    [checkpointData]=\"policyForm?.checkpointDetails\"\r\n    [requiredPoint]=\"policyForm?.passingMarks\"\r\n    *ngIf=\"activeSelector === 'checkpoints'\"\r\n    (saveCheckPoint)=\"saveSelectedList('checkpoints', $event)\"\r\n  ></app-checkpoints-policy-container>\r\n  <app-loader-inline *ngIf=\"loader\"></app-loader-inline>\r\n\r\n  <app-approval-workflow\r\n    *ngIf=\"enableApprovalWorkflow\"\r\n    [selectedCategory]=\"policyForm?.selectedCategories\"\r\n    [approverWorkFlowList]=\"approverWorkFlowList\"\r\n    [allApprovers]=\"allApprovers\"\r\n    (listCancelClicked)=\"listCancelClicked($event)\"\r\n    (selectedWorkflowNext)=\"selectedApprovalWorkflow($event)\"\r\n    (saveApprovalWorkflow)=\"approvalWorkflowAPICall($event)\"\r\n    [editApprovalWorkflow]=\"editApprovalWorkflow\"\r\n    [createApprovalClick]=\"createApprovalClick\"\r\n    (closeCreateClicked)=\"closeClickedCreateForm()\"\r\n    [editWorkflowLevel]=\"editWorkflowLevel\"\r\n  ></app-approval-workflow>\r\n  <!-- <app-select-approvers></app-select-approvers> -->\r\n\r\n  <app-policy-access *ngIf=\"activeSelector === 'policyAccess'\"\r\n    [policyAccessType]=\"policyForm?.policy_access_type\"\r\n    (close)=\"disableSelector()\"\r\n    [orgUsersList]=\"usersList\"\r\n    [usersAccessList]=\"usersAccessList\"\r\n    [groupList]=\"overseerGroupsList\"\r\n    [groupsAccessList]=\"groupsAccessList\"\r\n    [selectedUsers]=\"policyForm?.policy_access_owners\"\r\n    [selectedGroups]=\"policyForm?.policy_access_groups\"\r\n    [disabledIds]=\"usersAccessListIds\"\r\n    [disabledGroupIds]=\"groupsAccessListIds\"\r\n    [futureUsersWillSelect]=\"policyForm?.availableOnPortal\"\r\n    (saveCheckPoint)=\"saveSelectedList('policyAccess', $event)\"\r\n    (setPolicyAccessType)=\"policyForm.policy_access_type = $event\"\r\n  >\r\n\r\n  </app-policy-access>\r\n</ng-container>\r\n<ng-container *ngIf=\"showCreateDocuments\">\r\n  <!-- <app-create-documents *ngIf=\"showCreateDocuments\"\r\n   [organization_id]=\"organization_id\"\r\n   [member_obj_id]=\"member_obj_id\"\r\n   [userInfo]=\"userInfo\"\r\n   [policyId]=\"policyId\"\r\n   [policyName]=\"policyForm.policyName\"\r\n   (disconnectRefresh)=\"disconnectRefresh.emit(false)\"\r\n   (editPolicy)=\"editPolicyFromDocuments()\"\r\n   ></app-create-documents> -->\r\n  <lib-document-section\r\n    *ngIf=\"showCreateDocuments\"\r\n    [organization_id]=\"organization_id\"\r\n    [member_obj_id]=\"member_obj_id\"\r\n    [userInfo]=\"userInfo\"\r\n    [policyId]=\"policyId\"\r\n    [policyName]=\"policyForm.policyName\"\r\n    (disconnectRefresh)=\"disconnectRefresh.emit(false)\"\r\n    (editPolicy)=\"editPolicyFromDocuments()\"\r\n  ></lib-document-section>\r\n</ng-container>\r\n\r\n<app-assessment-list\r\n  *ngIf=\"activeSelector === 'isAssessment'\"\r\n  [program_ids]=\"''\"\r\n  [isEdit]=\"policyForm?.assessment?.length\"\r\n  (cancelAssessment)=\"saveSelectedList('isAssessment', false)\"\r\n  [selectedAssessment]=\"policyForm?.assessment[0]\"\r\n  [mode]=\"'policy'\"\r\n  (onAssessmentSelect)=\"\r\n    onAssessmentSelect($event); saveSelectedList('isAssessment', false)\r\n  \"\r\n></app-assessment-list>\r\n\r\n<app-owner-list\r\n  *ngIf=\"activeSelector === 'approvers' && false\"\r\n  [listHeading]=\"'Select Approvers'\"\r\n  [singularText]=\"'User selected'\"\r\n  [pluralText]=\"'Users selected'\"\r\n  [usersList]=\"allApprovers\"\r\n  [showWorkflow]=\"true\"\r\n  [selectedUsers]=\"\r\n    addMoreLevels\r\n      ? []\r\n      : policyForm.selectedApprovers[approversListIndex].approvers\r\n  \"\r\n  [userIdKey]=\"'member_id'\"\r\n  [itemEmailKey]=\"'member_email'\"\r\n  [itemNameKey]=\"'member_name'\"\r\n  (saveSelectedList)=\"saveSelectedList('approvers', $event)\"\r\n  (closeUsersList)=\"disableSelector()\"\r\n  [mode]=\"mode\"\r\n  [reviewerWorkflowType]=\"workflowType\"\r\n  (reviewerWorkflowTypeChange)=\"reviewerTypeChange($event)\"\r\n  [workflowList]=\"workflowList\"\r\n  [workflowText]=\"'Approval Workflow'\"\r\n>\r\n</app-owner-list>\r\n\r\n<app-owner-list\r\n  *ngIf=\"activeSelector === 'owners'\"\r\n  [listHeading]=\"'Select Owner(s)'\"\r\n  [singularText]=\"'User selected'\"\r\n  [pluralText]=\"'Users selected'\"\r\n  [usersList]=\"allApprovers\"\r\n  [showWorkflow]=\"false\"\r\n  [userIdKey]=\"'member_id'\"\r\n  [itemEmailKey]=\"'member_email'\"\r\n  [itemNameKey]=\"'member_name'\"\r\n  (saveSelectedList)=\"saveSelectedList('owners', $event)\"\r\n  (closeUsersList)=\"disableSelector()\"\r\n  [mode]=\"mode\"\r\n  [selectedUsers]=\"policyForm?.policy_owners ?? []\"\r\n>\r\n</app-owner-list>\r\n",
                 styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";::ng-deep .workflow-policy{position:relative}::ng-deep .workflow-policy app-cs-switch{display:block}::ng-deep .workflow-policy app-cs-switch label.cs-switch span.value{color:#747576!important;font-size:11px!important;font-weight:500!important;justify-content:flex-end!important;line-height:16px;width:100%!important}::ng-deep .workflow-policy app-cs-switch label.cs-switch span.value i{display:inline-flex;font-size:12px;cursor:pointer;color:#1e5dd3;align-items:center;line-height:16px;margin:0 8px 0 4px}::ng-deep .workflow-policy .form-group-row .right .approval-workflow .selected{height:56px;padding:4px 12px 8px;display:block}::ng-deep .workflow-policy .form-group-row .right .approval-workflow .selected .workflow-label{min-width:auto;padding:0;text-align:left;margin:0 0 4px;border-right:none;width:100%;display:flex;align-items:center}::ng-deep .workflow-policy .form-group-row .right .approval-workflow .selected .workflow-label p.description{font-size:10px;margin-left:6px}::ng-deep .workflow-policy .form-group-row .right .approval-workflow cs-select .selection-wrap .input-group:before{display:none!important}::ng-deep .workflow-policy app-frequency-container app-frequency-weekly .frequency-weekly app-frequency-lifecycle .frequency-lifecycle-responsibility-inner-item{height:unset!important}.disabled{opacity:.5;pointer-events:none}\n", "@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::-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-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}button{font-family:\"Poppins\",sans-serif}::ng-deep input.textField{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;font-size:13px;color:#747576;padding:8px 12px;position:relative;height:2.5rem;width:100%;transition:all .2s ease-in-out}::ng-deep input.textField::placeholder{font-size:13px;color:#747576}::ng-deep input.textField:hover,::ng-deep input.textField:focus{outline:none;border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;cursor:pointer;height:2.5rem;position:relative;transition:all .2s ease-in-out}::ng-deep .selectBoxEnable:after{border-bottom-style:solid;border-bottom-width:1px;border-right-style:solid;border-right-width:1px;border-color:#747576;content:\"\";display:inline-block;right:12px;position:absolute;top:calc(50% - 4px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .selectBoxEnable:hover,::ng-deep .selectBoxEnable:focus{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable.disabled{background:#f1f1f1;pointer-events:none;opacity:1}::ng-deep .selectBoxSuccess{background:#f8f8f8;border-radius:.25rem;border:1px solid #f1f1f1;min-height:2.5rem;position:relative}::ng-deep .selectBoxSuccess .selectBoxText{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:22rem}::ng-deep .selectBoxSuccess button{background:transparent;border-radius:0;border:none}::ng-deep .selectBoxSuccess button.deleteBtn{color:#d93b41}::ng-deep .selectBoxSuccess .level-left{border-right:1px solid #f1f1f1;height:2.375rem;width:5rem}::ng-deep .selectBoxSuccess .level-left .level-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:4.5rem}::ng-deep .chipContainer{background:#fff;border-radius:.125rem;box-shadow:0 0 2px #1e5dd340;height:1.5rem}::ng-deep .chipContainer .cross{cursor:pointer;min-width:16px;width:16px;height:16px;display:flex;align-items:center;justify-content:center;background:transparent;border-radius:2px;margin-left:-4px}::ng-deep .chipContainer .cross:hover{background:#f1f1f1}::ng-deep .chipContainer .chipName{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:6rem}::ng-deep .chipContainer button.countBtn{background:#1e5dd3;border-radius:1.25rem;border:none;min-width:1.5rem;height:1rem;margin:0 0 0 .5rem;padding:0 .25rem}::ng-deep .chipContainer button.countBtn.greenBg{background:#34aa44}::ng-deep .workflowLavel{background:#f1f1f1;border-radius:.125rem;color:#042e7d;min-width:1rem;height:1rem}::ng-deep .reviewSelection{border-radius:.25rem;border:1px solid #dbdbdb;transition:all .2s ease-in-out}::ng-deep .reviewSelection:hover{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectButton{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;cursor:pointer;height:2.5rem;position:relative;transition:all .2s ease-in-out}::ng-deep .selectButton:hover,::ng-deep .selectButton:focus{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep button.createNewBtn{background:transparent;border-radius:0;border:none}::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-bottom-style:solid;border-bottom-width:1px;border-right-style:solid;border-right-width:1px;border-color:#707070;content:\"\";display:inline-block;right:12px;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:#ffffff;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 #1e5dd345}::ng-deep .vx-form-group .select .custom-input.frequency-custom-input{padding-right:108px;display:flex;align-items:center}::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;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;transition:all .2s ease-in-out}::ng-deep .vx-form-group .tab-group:hover{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group .tab-group .upload-file{padding:16px 62px 16px 24px;display:flex;align-items:center;justify-content:space-between}::ng-deep .vx-form-group .tab-group .upload-file .image{width:80px}::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:8px 0!important;text-align:center}::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%;text-align:center}::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:#ffffff}::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:13px!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;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:14px;font-weight:500;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[type=text],::ng-deep .vx-form-group .input{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#ffffff;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[type=text]::placeholder,::ng-deep .vx-form-group .input::placeholder{color:#747576;font-weight:400}::ng-deep .vx-form-group input[type=text]:focus,::ng-deep .vx-form-group .input:focus,::ng-deep .vx-form-group input[type=text]:hover,::ng-deep .vx-form-group .input:hover{border-color:#1e5dd3!important;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group input[type=text].error,::ng-deep .vx-form-group .input.error{border-color:#eb2424;color:#eb2424;margin-bottom:4px}::ng-deep .vx-form-group input[type=text].error:focus,::ng-deep .vx-form-group .input.error:focus{box-shadow:0 0 5px #d31e1e45}::ng-deep .vx-form-group input[type=text]:disabled,::ng-deep .vx-form-group .input:disabled{background:#f1f1f1;cursor:not-allowed;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group input[type=text]:disabled:hover,::ng-deep .vx-form-group .input:disabled:hover{border-color:#dbdbdb;box-shadow:none}::ng-deep .vx-form-group input[type=text] span.text,::ng-deep .vx-form-group .input span.text{font-size:13px;color:#747576;font-weight:400;display:block;width:100%}::ng-deep .vx-form-group input[type=text] .input-group,::ng-deep .vx-form-group .input .input-group{display:flex;align-items:center}::ng-deep .vx-form-group input[type=text] .input-group.counter,::ng-deep .vx-form-group .input .input-group.counter{min-width:96px;width:96px}::ng-deep .vx-form-group input[type=text] .input-group.counter button,::ng-deep .vx-form-group .input .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[type=text] .input-group.counter input,::ng-deep .vx-form-group .input .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[type=text] .input-group.counter input::-webkit-inner-spin-button,::ng-deep .vx-form-group .input .input-group.counter input::-webkit-inner-spin-button,::ng-deep .vx-form-group input[type=text] .input-group.counter input::-webkit-outer-spin-button,::ng-deep .vx-form-group .input .input-group.counter input::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;margin:0}::ng-deep .vx-form-group input[type=text]+.file-list,::ng-deep .vx-form-group .input+.file-list{margin-top:8px}::ng-deep .vx-form-group input[type=text]::placeholder,::ng-deep .vx-form-group .input::placeholder{font-size:13px}::ng-deep .vx-form-group input[type=text]:-ms-input-placeholder,::ng-deep .vx-form-group .input:-ms-input-placeholder{font-size:13px}::ng-deep .vx-form-group input[type=text]::-ms-input-placeholder,::ng-deep .vx-form-group .input::-ms-input-placeholder{font-size:13px}::ng-deep .vx-form-group .classification{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#ffffff;padding:8px 12px;display:flex;justify-content:space-between}::ng-deep .vx-form-group .classification label{margin:0 4px 0 0;width:100%;position:relative;z-index:1}::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:#ffffff;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;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:100px}::ng-deep .vx-form-group .selected .chip-container .chip-inner button.count{border-radius:20px;height:16px;padding:0 6px;border:none;font-size:9px;line-height:16px;margin-left:4px;min-width:20px}::ng-deep .vx-form-group .selected .chip-container .chip-inner button.count.user{background:#34aa44}::ng-deep .vx-form-group .selected .chip-container .chip-inner i.cross{cursor:pointer;position:relative;top:1px;font-size:8px}::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:none;border-radius:0;background:transparent;outline:none;cursor:pointer;display:block;font-size:11px;font-weight:600;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:#ffffff;box-shadow:0 0 5px #1e5dd345;top:100%;right:0;left:0;z-index:2}::ng-deep .vx-form-group .select-list .vx-radio-group label.vx-radio-item{width:100%;padding:12px 16px}::ng-deep .vx-form-group .select-list .vx-radio-group label.vx-radio-item:hover{background:#f8f8f8}::ng-deep .vx-form-group marx-editor{margin-top:8px;display:block}::ng-deep .vx-form-group marx-editor .editor-container{border-radius:4px;border:1px solid #dbdbdb}::ng-deep .vx-form-group marx-editor .editor-container .editable-block{min-height:60px;padding:11px 15px;max-height:100px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%}::ng-deep .vx-form-group marx-editor .editor-container .editable-block ul{padding:0 0 0 10px;margin-top:0}::ng-deep .vx-form-group marx-editor .editor-container .editable-block ul li{list-style:disc}::ng-deep .vx-form-group marx-editor .editor-container .editable-block ol{padding:0 0 0 10px;margin-top:0}::ng-deep .vx-form-group marx-editor .editor-container .editable-block ol li{list-style:decimal}::ng-deep .vx-form-group marx-editor .editor-container .editor-tools{z-index:1;border-top:1px solid #dbdbdb;transition:none;border-radius:0 0 3px 3px;position:static}::ng-deep .vx-form-group marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button{height:22px!important;width:22px!important;padding:0 5px}::ng-deep .vx-form-group marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg{height:22px;width:12px}::ng-deep .vx-form-group marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit{width:80px!important;line-height:22px;justify-content:center}::ng-deep .vx-form-group marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button{width:100%!important;height:auto!important}::ng-deep .vx-form-group marx-editor .editor-container:focus-within{border-color:#1e5dd3!important;box-shadow:0 3px 6px #1e5dd31a}::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;box-shadow:0 3px 6px #1e5dd31a}::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;background:#ffffff}::ng-deep .vx-form-group .date-time-picker:focus-within{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::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:transparent;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::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:12px;position:absolute;left:12px;top:0;color:#747576;font-size:12px;pointer-events:none}::ng-deep .vx-form-group app-cs-radio.main-filed{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;color:#707070}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group app-cs-radio.disabled{pointer-events:none;opacity:.5;filter:grayscale(1);background:#f1f1f1}::ng-deep .vx-form-group .switch-row{display:flex}::ng-deep .vx-form-group .switch-row app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .switch-row app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:0;text-transform:uppercase;color:#747576!important}::ng-deep .vx-form-group .switch-row app-cs-switch label.cs-switch span.value i{display:inline-flex;font-size:11px;cursor:pointer;color:#1e5dd3;align-items:center;line-height:16px;margin:0 4px}::ng-deep .vx-form-group .switch-row app-cs-switch+app-cs-switch{margin-left:8px}::ng-deep .vx-form-group .switch-row.align-right{justify-content:flex-end}::ng-deep .vx-form-group .switch-row.align-right label.cs-switch span.value{margin-right:8px}::ng-deep .vx-form-group .risk-type-field{background:#f8f8f8;border:1px solid #dbdbdb;border-radius:4px;height:40px;display:flex;align-items:center;padding:4px;position:relative;z-index:1}::ng-deep .vx-form-group .risk-type-field .type-item{width:50%;position:relative}::ng-deep .vx-form-group .risk-type-field .type-item button{background:transparent;border:none;border-radius:0;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase;width:100%;height:32px;padding:0 12px;text-align:left}::ng-deep .vx-form-group .risk-type-field .type-item button.disabled{background:transparent!important;color:#dbdbdb!important;filter:unset!important;opacity:unset!important;pointer-events:none;-webkit-user-select:none;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:26px;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:#ffffff;border-radius:50%;stroke-width:4;stroke:#34aa44;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin-top:0}.left .checkIcon__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}.left .checkIcon__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;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;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:#ffffff;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 input,.form-group-row.active .right .vx-form-group .custom-input{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}.form-group-row.active .right .vx-form-group .selectBoxEnable{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}.form-group-row.active .right .vx-form-group .selectBoxEnable.disabled{border-color:#dbdbdb;box-shadow:none}::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}@keyframes strokeCheck{to{stroke-dashoffset:0}}@keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #34aa44}}::ng-deep .wf-action-list{width:220px}::ng-deep .wf-action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#ffffff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}::ng-deep .wf-action-list ul.action-item{display:block}::ng-deep .wf-action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}::ng-deep .wf-action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}::ng-deep .wf-action-list ul.action-item li button i{font-size:16px;margin-right:10px;color:#1e5dd3}::ng-deep .wf-action-list ul.action-item li button:hover{background:#f3f3f3}::ng-deep .wf-action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}::ng-deep .wf-action-list ul.action-item li .avatar-card.within-con{display:block}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#1e5dd3;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar img{width:100%}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}::ng-deep .wf-action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}::ng-deep .wf-action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#747576;cursor:pointer;margin-right:5px}::ng-deep .wf-action-list ul.action-item li .avatar-card.no-image{display:block}::ng-deep .wf-action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}::ng-deep .wf-action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}::ng-deep .wf-action-list ul.action-item li .chip-item i{color:#747576;margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}::ng-deep .wf-action-list ul.action-item li .chip-item span{display:block;width:auto;max-width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep .wf-action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}::ng-deep .wf-action-list ul.action-item li .chip-item span.id{font-size:9px}::ng-deep .wf-action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}::ng-deep .wf-action-list ul.action-item li .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}::ng-deep .wf-action-list ul.action-item li .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}::ng-deep .wf-action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}@keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}@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{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;animation:dash 1.5s ease-in-out infinite;stroke-linecap:round}@keyframes rotate{to{transform:rotate(360deg)}}@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:#ffffff;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;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-current-location-btn,dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn,dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left,dp-date-picker .dp-popup dp-month-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-month-calendar button.dp-calendar-nav-right{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-current-location-btn:hover,dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:hover,dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left:hover,dp-date-picker .dp-popup dp-month-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-month-calendar button.dp-calendar-nav-right: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:#000000;display:inline-flex}dp-date-picker .dp-popup dp-day-calendar .dp-weekdays,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays,dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week{display:flex;justify-content:space-around}dp-date-picker .dp-popup dp-day-calendar .dp-weekdays .dp-calendar-weekday,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays .dp-calendar-weekday,dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week .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-weekdays button,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button,dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week 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-weekdays button:hover,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button:hover,dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button:hover,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button:hover{background-color:#f3f3f3}dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-selected,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-selected,dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-selected{background:#1e5dd3}dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-current-day,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-current-day,dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-current-day,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week 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-month-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-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)}@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;border:1px solid transparent;border-color:#747576;position:relative;margin-right:5px;border-top:none;margin-top:5px;background:#ffffff}::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 0%,#747576 1%,#747576 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);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;background:#ffffff}::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 0%,#f31c39 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);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.xlsx,::ng-deep span.file.xls,::ng-deep span.file.css,::ng-deep span.file.scss,::ng-deep span.file.less{border-color:#34aa44}::ng-deep span.file.xlsx:before,::ng-deep span.file.xls:before,::ng-deep span.file.css:before,::ng-deep span.file.scss:before,::ng-deep span.file.less:before{background:linear-gradient(45deg,#34aa44 0%,#34aa44 1%,#34aa44 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.xlsx:after,::ng-deep span.file.xls:after,::ng-deep span.file.css:after,::ng-deep span.file.scss:after,::ng-deep span.file.less:after{border-color:#34aa44;color:#34aa44}::ng-deep span.file.xlsx .format,::ng-deep span.file.xls .format,::ng-deep span.file.css .format,::ng-deep span.file.scss .format,::ng-deep span.file.less .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 0%,#1e5dd3 1%,#1e5dd3 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);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.ppt,::ng-deep span.file.ai,::ng-deep span.file.html,::ng-deep span.file.jpg,::ng-deep span.file.jpeg,::ng-deep span.file.png{border-color:#f6882f}::ng-deep span.file.ppt:before,::ng-deep span.file.ai:before,::ng-deep span.file.html:before,::ng-deep span.file.jpg:before,::ng-deep span.file.jpeg:before,::ng-deep span.file.png:before{background:linear-gradient(45deg,#f6882f 0%,#f6882f 1%,#f6882f 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.ppt:after,::ng-deep span.file.ai:after,::ng-deep span.file.html:after,::ng-deep span.file.jpg:after,::ng-deep span.file.jpeg:after,::ng-deep span.file.png:after{border-color:#f6882f}::ng-deep span.file.ppt .format,::ng-deep span.file.ai .format,::ng-deep span.file.html .format,::ng-deep span.file.jpg .format,::ng-deep span.file.jpeg .format,::ng-deep span.file.png .format{color:#f6882f}::ng-deep span.file.php{border-color:#7aa6f7}::ng-deep span.file.php:before{background:linear-gradient(45deg,#7aa6f7 0%,#7aa6f7 1%,#7aa6f7 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);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:#0000000d!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:solid 14px #f1f1f1;border-bottom:solid 12px transparent;border-top:solid 12px 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:solid 14px #f1f1f1;border-bottom:solid 12px transparent;border-top:solid 12px transparent;z-index:-1}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period button{font-size:11px;background-color:transparent;padding:0;border-radius:20px;color:#747576;font-weight:600;font-family:\"Poppins\";width:84px;height:24px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period button.timepicker-dial__item_active{background:#fff!important;color:#1e5dd3!important;box-shadow:0 1px 2px #dbdbdb}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period button+button{margin-left:0!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face{width:200px!important;height:200px!important;padding:10px!important;background:transparent!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number--outer{height:calc(224px / 2 - 20px)!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number--outer span{color:#000}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number--outer span.active{color:#fff}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__clock-hand{height:80px!important;top:calc(50% - 80px)!important;background-color:#1e5dd3!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number>span.active{background-color:#1e5dd3!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__clock-hand_minute:before{border:4px solid #1e5dd3!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions{display:flex!important;padding:10px 0 0!important;background:#fff!important;justify-content:space-around!important;border-radius:0 0 2px 2px!important;overflow:hidden}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions div:first-child ngx-material-timepicker-button button.timepicker-button{background:#f8f8f8;color:#1e5dd3}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions div ngx-material-timepicker-button button.timepicker-button{line-height:28px!important;width:100%;background:#1e5dd3;color:#fff;border-radius:0!important;height:32px!important;width:116px!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions div ngx-material-timepicker-button button.timepicker-button span{font-weight:500!important;font-size:11px;font-family:\"Poppins\"}::ng-deep marx-editor{display:block}::ng-deep marx-editor .editor-container{border-radius:4px;border:1px solid #dbdbdb;transition:all .2s ease-in-out}::ng-deep marx-editor .editor-container:hover,::ng-deep marx-editor .editor-container:focus-within{border:1px solid #1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep marx-editor .editor-container mention-list ul li a{font-size:16px!important}::ng-deep marx-editor .editor-container .editable-block{background:#fff;min-height:60px;padding:8px 12px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%}::ng-deep marx-editor .editor-container .editable-block:before{color:#747576!important}::ng-deep marx-editor .editor-container .editor-tools{border-top:1px solid #dbdbdb;border-radius:0 0 3px 3px}::ng-deep marx-editor .editor-container .editor-tools:hover{border-color:#1e5dd3}::ng-deep marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button{height:22px!important;width:22px!important;padding:0 5px}::ng-deep marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg{height:22px;width:12px}::ng-deep 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 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 marx-modal .popup-modal-background{background-color:#161b2fcc!important}::ng-deep .within-box{background:#f1f1f1;border-radius:.125rem;color:#042e7d}::ng-deep .within-value{overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;word-break:break-word}\n"]
             },] }
 ];
@@ -9738,7 +10480,7 @@ class ResponsibilityCentersListComponent {
 ResponsibilityCentersListComponent.decorators = [
     { type: Component, args: [{
                 selector: 'app-responsibility-centers-list',
-                template: "<div class=\"add-risk-rc\" [class.animate]=\"animation\">\r\n  <div class=\"add-risk-rc-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\">\r\n    <h3 class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Select Responsibility Center(s)</h3>\r\n  </div>\r\n  <div class=\"add-risk-rc-body\">\r\n    <div class=\"search-block\">\r\n      <i class=\"icons\">&#xe90b;</i>\r\n      <input type=\"text\" [(ngModel)]=\"search\" placeholder=\"Search Responsibility Center\" />\r\n    </div>\r\n    <!-- <app-workflow-pagination></app-workflow-pagination> -->\r\n    <ng-container *ngIf=\"(responsibilityCentersList | filter:search) as searchList\">\r\n    <div class=\"body-top\" *ngIf=\"!radioSelection && (searchList?.length > 0 && search?.trim()?.length === 0)\">\r\n      <app-cs-checkbox [ngValue]=\"checkSelectAll()\" (ngValueChange)=\"selectAll($event)\"><strong>{{checkSelectAll() ? 'Deselect All' : 'Select All'}}</strong>\r\n      </app-cs-checkbox>\r\n    </div>\r\n\r\n    <ul class=\"add-risk-rc-list\" *ngIf=\"searchList?.length > 0\">\r\n      <ng-container *ngIf=\"!radioSelection\">\r\n        <li *ngFor=\"let rc of searchList\" #ulElement>\r\n          <app-cs-checkbox [ngValue]=\"selectedIds.includes(rc.item_id)\" (ngValueChange)=\"selectRc(rc.item_id,$event)\">\r\n            <ul class=\"add-risk-rc-name\" #listBlock>\r\n              <!-- [style.max-width.px]=\"blockWidth / rc.rc_name\" -->\r\n              <li\r\n                *ngFor=\"let entity of rc.rc_name; let j = index\"\r\n                [appTooltip]=\"entity\"\r\n                placement=\"bottom\"\r\n                type=\"black\"\r\n                delay=\"0\"\r\n                [tooltipMandatory]=\"true\">\r\n                  <i class=\"icons\" *ngIf=\"j !== 0\">&#xe910;</i>{{ entity }}\r\n              </li>\r\n            </ul>\r\n          </app-cs-checkbox>\r\n        </li>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"radioSelection\">\r\n        <li *ngFor=\"let rc of searchList\" #ulElement>\r\n          <app-cs-radio (checkedEvent)=\"selectRc(rc.item_id,$event)\"\r\n              [checked]=\"selectedIds.includes(rc.item_id)\">\r\n              <ul class=\"add-risk-rc-name\">\r\n                <li\r\n                  *ngFor=\"let entity of rc.rc_name; let j = index\"\r\n                  [appTooltip]=\"entity\"\r\n                  placement=\"bottom\"\r\n                  type=\"black\"\r\n                  delay=\"0\"\r\n                  [tooltipMandatory]=\"true\">\r\n                    <i class=\"icons\" *ngIf=\"j !== 0\">&#xe910;</i>{{ entity }}\r\n                </li>\r\n              </ul>\r\n          </app-cs-radio>\r\n      </li>\r\n      </ng-container>\r\n\r\n    </ul>\r\n    <app-no-data *ngIf=\"searchList?.length === 0\"  [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"'No data to display'\"></app-no-data>\r\n  </ng-container>\r\n\r\n  <app-floating-bar\r\n  [selectedData]=\"selectedResponsibilityCenters\"\r\n  [displayElementKey]=\"'item_name'\"\r\n  [singularText]=\"singularText\"\r\n  [pluralText]=\"pluralText\"\r\n  (closeEvent)=\"save(selectedIds)\"\r\n  (deleteEvent)=\"deleteEvent($event)\" (closeList)=\"close()\"\r\n  [isDisabled]=\"selectedResponsibilityCenters?.length === 0 || responsibilityCentersList?.length === 0\"></app-floating-bar>\r\n  </div>\r\n</div>\r\n\r\n<!-- <button (click)=\"save(selectedIds)\">Next</button> -->\r\n",
+                template: "<div class=\"add-risk-rc\" [class.animate]=\"animation\">\r\n  <div class=\"add-risk-rc-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\">\r\n    <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Select Responsibility Center(s)</div>\r\n  </div>\r\n  <div class=\"add-risk-rc-body\">\r\n    <div class=\"search-block\">\r\n      <i class=\"icons\">&#xe90b;</i>\r\n      <input type=\"text\" [(ngModel)]=\"search\" placeholder=\"Search Responsibility Center\" />\r\n    </div>\r\n    <!-- <app-workflow-pagination></app-workflow-pagination> -->\r\n    <ng-container *ngIf=\"(responsibilityCentersList | filter:search) as searchList\">\r\n    <div class=\"body-top\" *ngIf=\"!radioSelection && (searchList?.length > 0 && search?.trim()?.length === 0)\">\r\n      <app-cs-checkbox [ngValue]=\"checkSelectAll()\" (ngValueChange)=\"selectAll($event)\"><strong>{{checkSelectAll() ? 'Deselect All' : 'Select All'}}</strong>\r\n      </app-cs-checkbox>\r\n    </div>\r\n\r\n    <ul class=\"add-risk-rc-list\" *ngIf=\"searchList?.length > 0\">\r\n      <ng-container *ngIf=\"!radioSelection\">\r\n        <li *ngFor=\"let rc of searchList\" #ulElement>\r\n          <app-cs-checkbox [ngValue]=\"selectedIds.includes(rc.item_id)\" (ngValueChange)=\"selectRc(rc.item_id,$event)\">\r\n            <ul class=\"add-risk-rc-name\" #listBlock>\r\n              <!-- [style.max-width.px]=\"blockWidth / rc.rc_name\" -->\r\n              <li\r\n                *ngFor=\"let entity of rc.rc_name; let j = index\"\r\n                [appTooltip]=\"entity\"\r\n                placement=\"bottom\"\r\n                type=\"black\"\r\n                delay=\"0\"\r\n                [tooltipMandatory]=\"true\">\r\n                  <i class=\"icons\" *ngIf=\"j !== 0\">&#xe910;</i>{{ entity }}\r\n              </li>\r\n            </ul>\r\n          </app-cs-checkbox>\r\n        </li>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"radioSelection\">\r\n        <li *ngFor=\"let rc of searchList\" #ulElement>\r\n          <app-cs-radio (checkedEvent)=\"selectRc(rc.item_id,$event)\"\r\n              [checked]=\"selectedIds.includes(rc.item_id)\">\r\n              <ul class=\"add-risk-rc-name\">\r\n                <li\r\n                  *ngFor=\"let entity of rc.rc_name; let j = index\"\r\n                  [appTooltip]=\"entity\"\r\n                  placement=\"bottom\"\r\n                  type=\"black\"\r\n                  delay=\"0\"\r\n                  [tooltipMandatory]=\"true\">\r\n                    <i class=\"icons\" *ngIf=\"j !== 0\">&#xe910;</i>{{ entity }}\r\n                </li>\r\n              </ul>\r\n          </app-cs-radio>\r\n      </li>\r\n      </ng-container>\r\n\r\n    </ul>\r\n    <app-no-data *ngIf=\"searchList?.length === 0\"  [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"'No data to display'\"></app-no-data>\r\n  </ng-container>\r\n\r\n  <app-floating-bar\r\n  [selectedData]=\"selectedResponsibilityCenters\"\r\n  [displayElementKey]=\"'item_name'\"\r\n  [singularText]=\"singularText\"\r\n  [pluralText]=\"pluralText\"\r\n  (closeEvent)=\"save(selectedIds)\"\r\n  (deleteEvent)=\"deleteEvent($event)\" (closeList)=\"close()\"\r\n  [isDisabled]=\"selectedResponsibilityCenters?.length === 0 || responsibilityCentersList?.length === 0\"></app-floating-bar>\r\n  </div>\r\n</div>\r\n\r\n<!-- <button (click)=\"save(selectedIds)\">Next</button> -->\r\n",
                 styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::-webkit-scrollbar-track{background-color:#fff;position:absolute}::-webkit-scrollbar{width:3px;height:3px;background-color:transparent;position:absolute}::-webkit-scrollbar-thumb{border-radius:3px;background-color:#dbdbdb;position:absolute}::ng-deep .add-risk-rc{position:fixed;top:0;right:500px;bottom:0;left:0}::ng-deep .add-risk-rc:before{background:#1E5DD3;content:\"\";position:absolute;top:0;left:0;right:0;width:100%;height:3px}::ng-deep .add-risk-rc-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .add-risk-rc-body{background:#fff;height:calc(100vh - 2.75rem);padding:2rem}::ng-deep .add-risk-rc-body .search-block{position:relative}::ng-deep .add-risk-rc-body .search-block input{height:2.75rem;line-height:1.5rem;padding:.5rem 1rem .5rem 2.5rem;outline:none;border:1px solid #7475763f;border-radius:.25rem;width:100%;font-size:14px;color:#747576}::ng-deep .add-risk-rc-body .search-block input:focus{border-color:#1e5dd3}::ng-deep .add-risk-rc-body .search-block i{position:absolute;left:1rem;font-size:12px;font-weight:400;top:1rem;pointer-events:none;color:#f1f1f1}::ng-deep .add-risk-rc-body .body-top{display:flex;justify-content:space-between;padding:.5rem 0 0}::ng-deep .add-risk-rc-body .body-top app-cs-checkbox{display:flex}::ng-deep .add-risk-rc-body .body-top app-cs-checkbox label span.value strong{color:#161b2f;font-size:12px;font-weight:600;white-space:nowrap}::ng-deep .add-risk-rc-body ul{padding:0;margin:0}::ng-deep .add-risk-rc-body ul.add-risk-rc-list{display:block;align-items:flex-start;flex-wrap:wrap;height:calc(100vh - 16rem);overflow:auto;margin:1rem 0}::ng-deep .add-risk-rc-body ul.add-risk-rc-list li{width:100%;padding:0 0 1rem;list-style:none}::ng-deep .add-risk-rc-body ul.add-risk-rc-list li app-cs-checkbox,::ng-deep .add-risk-rc-body ul.add-risk-rc-list li app-cs-radio{display:flex}::ng-deep .add-risk-rc-body ul.add-risk-rc-list li app-cs-checkbox label,::ng-deep .add-risk-rc-body ul.add-risk-rc-list li app-cs-radio label{width:100%}::ng-deep .add-risk-rc-body ul.add-risk-rc-list li app-cs-checkbox label span.value,::ng-deep .add-risk-rc-body ul.add-risk-rc-list li app-cs-radio label span.value{width:auto;justify-content:flex-start;line-height:18px!important}::ng-deep .add-risk-rc-body ul.add-risk-rc-list li app-cs-checkbox ul.add-risk-rc-name,::ng-deep .add-risk-rc-body ul.add-risk-rc-list li app-cs-radio ul.add-risk-rc-name{display:flex;justify-content:flex-start;width:auto;max-width:100%}::ng-deep .add-risk-rc-body ul.add-risk-rc-list li app-cs-checkbox ul.add-risk-rc-name li,::ng-deep .add-risk-rc-body ul.add-risk-rc-list li app-cs-radio ul.add-risk-rc-name li{list-style:none;color:#747576;font-size:12px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;width:auto;padding:0 .5rem 0 0;max-width:100%}::ng-deep .add-risk-rc-body ul.add-risk-rc-list li app-cs-checkbox ul.add-risk-rc-name li i,::ng-deep .add-risk-rc-body ul.add-risk-rc-list li app-cs-radio ul.add-risk-rc-name li i{font-size:8px;padding-right:8px}::ng-deep .add-risk-rc-body ul.add-risk-rc-list li app-cs-checkbox ul.add-risk-rc-name li:first-child,::ng-deep .add-risk-rc-body ul.add-risk-rc-list li app-cs-radio ul.add-risk-rc-name li:first-child{color:#1e5dd3;max-width:100%}::ng-deep .add-risk-rc-body ul.add-risk-rc-list li app-cs-checkbox ul.add-risk-rc-name li:last-of-type,::ng-deep .add-risk-rc-body ul.add-risk-rc-list li app-cs-radio ul.add-risk-rc-name li:last-of-type{color:#34aa44}::ng-deep .add-risk-rc-body app-no-data .no-data-wrapper{height:calc(100vh - 92px)}::ng-deep .add-risk-rc.animate{animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;z-index:-1}::ng-deep .add-risk-rc .message-footer{background:#1e5dd3;border-radius:5px;margin:0 0 0 30px;width:calc(100% - 60px);position:relative;bottom:0}::ng-deep .add-risk-rc .message-footer .message{padding:15px;display:flex;align-items:flex-start}::ng-deep .add-risk-rc .message-footer .message i{width:auto;font-size:16px;color:#fff}::ng-deep .add-risk-rc .message-footer .message span{color:#fff;font-size:12px;line-height:18px;padding-left:9px;font-weight:300}::ng-deep .add-risk-rc .message-footer .footer{border-top:1px solid #1483ef;display:flex;justify-content:space-between;align-items:center;padding:10px 15px}::ng-deep .add-risk-rc .message-footer .footer span{color:#fff;font-size:14px}::ng-deep .add-risk-rc .message-footer .footer .button-wrapper{display:flex}::ng-deep .add-risk-rc .message-footer .footer .button-wrapper button{width:60px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:11px;font-weight:500;border:1px solid #fff;text-transform:uppercase;border-radius:2px;outline:none;padding:0;margin:0}::ng-deep .add-risk-rc .message-footer .footer .button-wrapper button.outline{background:#1e5dd3;color:#fff}::ng-deep .add-risk-rc .message-footer .footer .button-wrapper button.fill{background:#fff;color:#1e5dd3}@keyframes animate-right{0%{transform:translate(100%)}to{transform:translate(0)}}\n"]
             },] }
 ];
@@ -14009,7 +14751,7 @@ class FrequencyDueDateComponent {
 FrequencyDueDateComponent.decorators = [
     { type: Component, args: [{
                 selector: 'app-frequency-due-date',
-                template: "<div\r\n  *ngIf=\"['responsibility', 'policy', 'reviewerFrequency'].includes(mode)\"\r\n  class=\"frequency-bottom\"\r\n>\r\n  <div *ngIf=\"completedRequired\" class=\"frequency-bottom-item vx-mt-5\">\r\n    <div class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">\r\n      {{ dueDateText.windowOpen }}\r\n    </div>\r\n    <div\r\n      class=\"frequency-bottom-item-box vx-fs-13 vx-paragraph-txt vx-p-3 vx-pt-4 vx-pb-4 vx-d-block\"\r\n    >\r\n      The {{ pageType }} can be {{ dueDateText?.keys }} on the due date and\r\n      <input\r\n        class=\"countNum\"\r\n        [id]=\"'complete-' + id\"\r\n        type=\"number\"\r\n        [(ngModel)]=\"completedValue\"\r\n        (change)=\"onValueChange($event, 'completed')\"\r\n        onkeydown=\"return event.keyCode !== 190\"\r\n        min=\"0\"\r\n        oninput=\"this.value = Math.abs(this.value)\"\r\n      />\r\n      {{ completedValue < 2 ? \"day\" : \"days\" }}\r\n      <span class=\"vx-fw-500\">before</span> the due date. Where this occurs,\r\n      this will show as the {{ mode !== \"reviewerFrequency\" ? type : \"\" }} being\r\n      <span class=\"completed-text vx-fw-500\"\r\n        >{{ dueDateText?.keys }} on time</span\r\n      >.\r\n    </div>\r\n  </div>\r\n\r\n  <div *ngIf=\"notCompletedRequired\" class=\"frequency-bottom-item vx-mt-5\">\r\n    <div class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">\r\n      {{ dueDateText.extension }}\r\n    </div>\r\n    <div\r\n      class=\"frequency-bottom-item-box vx-fs-13 vx-paragraph-txt vx-p-3 vx-pt-4 vx-pb-4 vx-d-block\"\r\n    >\r\n      The {{ pageType }} can be {{ dueDateText?.keys }}\r\n      <input\r\n        class=\"countNum\"\r\n        type=\"number\"\r\n        [id]=\"'not-completed-' + id\"\r\n        [(ngModel)]=\"notCompletedValue\"\r\n        (change)=\"onValueChange($event, 'not completed')\"\r\n        onkeydown=\"return event.keyCode !== 190\"\r\n        min=\"0\"\r\n        oninput=\"this.value = Math.abs(this.value)\"\r\n      />\r\n      {{ notCompletedValue < 2 ? \"day\" : \"days\" }}\r\n      <span class=\"vx-fw-500\">after</span> the due date. Where this occurs, this\r\n      will show as the {{ mode !== \"reviewerFrequency\" ? type : \"\" }} being\r\n      <span class=\"delay-text vx-fw-500\"\r\n        >{{ dueDateText?.keys }} with delay</span\r\n      >.\r\n    </div>\r\n  </div>\r\n\r\n  <div *ngIf=\"notCompletedRequired\" class=\"frequency-bottom-item vx-mt-5\">\r\n    <div class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">\r\n      {{ dueDateText.windowCloses }}\r\n    </div>\r\n    <div\r\n      class=\"frequency-bottom-item-box vx-fs-13 vx-paragraph-txt vx-p-3 vx-pt-4 vx-pb-4 vx-d-block\"\r\n    >\r\n      The {{ pageType }} cannot be {{ dueDateText?.keys }}\r\n      <span class=\"vx-fw-500 vx-label-txt\">{{ notCompletedValue }}</span>\r\n      {{ notCompletedValue < 2 ? \"day\" : \"days\" }}\r\n      <span class=\"vx-fw-500\">after</span> the due date. Where this occurs, this\r\n      will show as the {{ type }} being\r\n      <span class=\"notcompleted-text vx-fw-500\"\r\n        >not\r\n        {{\r\n          dueDateText?.keys === \"reviewed\" ? \"completed\" : dueDateText?.keys\r\n        }}</span\r\n      >.\r\n    </div>\r\n  </div>\r\n\r\n  <div\r\n    *ngIf=\"isDeactivated && mode === 'responsibility'\"\r\n    class=\"frequency-bottom-item vx-mt-5\"\r\n  >\r\n    <div class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">\r\n      AUTOMATIC DEACTIVATE:\r\n    </div>\r\n    <div\r\n      class=\"frequency-bottom-item-box vx-fs-13 vx-paragraph-txt vx-p-3 vx-pt-4 vx-pb-4 vx-d-block\"\r\n    >\r\n      This {{ type }} will be automatically deactivated, if it is not\r\n      {{ dueDateText?.keys }}\r\n      for\r\n      <input\r\n        class=\"countNum\"\r\n        type=\"number\"\r\n        [id]=\"'deactivate' + id\"\r\n        [(ngModel)]=\"deactivateValue\"\r\n        (change)=\"onValueChange($event, 'deactivated')\"\r\n        onkeydown=\"return event.keyCode !== 190\"\r\n        min=\"0\"\r\n        oninput=\"this.value = Math.abs(this.value)\"\r\n      />\r\n      consecutive due dates.\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!-- For Policy -->\r\n<div class=\"frequency-due-date\" *ngIf=\"mode == 'policy' && false\">\r\n  <div *ngIf=\"completedRequired\" class=\"frequency-due-date-row\">\r\n    <p>The policy can be <i class=\"completed\">attested</i></p>\r\n    <input\r\n      [id]=\"'complete-' + id\"\r\n      type=\"number\"\r\n      [(ngModel)]=\"completedValue\"\r\n      (change)=\"onValueChange($event, 'completed')\"\r\n      onkeydown=\"return event.keyCode !== 190\"\r\n      min=\"0\"\r\n      oninput=\"this.value = Math.abs(this.value)\"\r\n    />\r\n    <p>{{ completedValue < 2 ? \"day\" : \"days\" }} before the due date.</p>\r\n  </div>\r\n  <div *ngIf=\"notCompletedRequired\" class=\"frequency-due-date-row\">\r\n    <p>The policy attestation will <i>fail</i></p>\r\n    <input\r\n      type=\"number\"\r\n      [id]=\"'not-completed-' + id\"\r\n      [(ngModel)]=\"notCompletedValue\"\r\n      (change)=\"onValueChange($event, 'not completed')\"\r\n      onkeydown=\"return event.keyCode !== 190\"\r\n      min=\"0\"\r\n      oninput=\"this.value = Math.abs(this.value)\"\r\n    />\r\n    <p>\r\n      {{ notCompletedValue < 2 ? \"day\" : \"days\" }} after the due date if it is\r\n      not completed.\r\n    </p>\r\n  </div>\r\n</div>\r\n<div class=\"frequency-due-date\" *ngIf=\"mode == 'reviewerFrequency' && false\">\r\n  <div *ngIf=\"completedRequired\" class=\"frequency-due-date-row\">\r\n    <p>The policy can be <i class=\"completed\">reviewed</i></p>\r\n    <input\r\n      [id]=\"'complete-' + id\"\r\n      type=\"number\"\r\n      [(ngModel)]=\"completedValue\"\r\n      (change)=\"onValueChange($event, 'completed')\"\r\n      onkeydown=\"return event.keyCode !== 190\"\r\n      min=\"0\"\r\n      oninput=\"this.value = Math.abs(this.value)\"\r\n    />\r\n    <p>{{ completedValue < 2 ? \"day\" : \"days\" }} before the review date.</p>\r\n  </div>\r\n  <div *ngIf=\"notCompletedRequired\" class=\"frequency-due-date-row\">\r\n    <p>The policy review will <i>fail</i></p>\r\n    <input\r\n      type=\"number\"\r\n      [id]=\"'not-completed-' + id\"\r\n      [(ngModel)]=\"notCompletedValue\"\r\n      (change)=\"onValueChange($event, 'not completed')\"\r\n      onkeydown=\"return event.keyCode !== 190\"\r\n      min=\"0\"\r\n      oninput=\"this.value = Math.abs(this.value)\"\r\n    />\r\n    <p>\r\n      {{ notCompletedValue < 2 ? \"day\" : \"days\" }} after the review date if it\r\n      is not completed.\r\n    </p>\r\n  </div>\r\n</div>\r\n",
+                template: "<div\r\n  *ngIf=\"['responsibility', 'policy', 'reviewerFrequency'].includes(mode)\"\r\n  class=\"frequency-bottom\"\r\n>\r\n  <div *ngIf=\"completedRequired\" class=\"frequency-bottom-item vx-mt-5\">\r\n    <div class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">\r\n      {{ dueDateText.windowOpen }}\r\n    </div>\r\n    <div\r\n      class=\"frequency-bottom-item-box vx-fs-13 vx-paragraph-txt vx-p-3 vx-pt-4 vx-pb-4 vx-d-block\"\r\n    >\r\n      The {{ pageType }} can be {{ dueDateText?.keys }} on the due date and\r\n      <input\r\n        class=\"countNum\"\r\n        [id]=\"'complete-' + id\"\r\n        type=\"number\"\r\n        [(ngModel)]=\"completedValue\"\r\n        (change)=\"onValueChange($event, 'completed')\"\r\n        onkeydown=\"return event.keyCode !== 190\"\r\n        min=\"0\"\r\n        oninput=\"this.value = Math.abs(this.value)\"\r\n      />\r\n      {{ completedValue < 2 ? \"day\" : \"days\" }}\r\n      <span class=\"vx-fw-500\">before</span> the due date. Where this occurs,\r\n      this will show as the {{ mode === \"reviewerFrequency\" ? \"policy\" : type }} being\r\n      <span class=\"completed-text vx-fw-500\"\r\n        >{{ dueDateText?.keys }} on time</span\r\n      >.\r\n    </div>\r\n  </div>\r\n\r\n  <div *ngIf=\"notCompletedRequired\" class=\"frequency-bottom-item vx-mt-5\">\r\n    <div class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">\r\n      {{ dueDateText.extension }}\r\n    </div>\r\n    <div\r\n      class=\"frequency-bottom-item-box vx-fs-13 vx-paragraph-txt vx-p-3 vx-pt-4 vx-pb-4 vx-d-block\"\r\n    >\r\n      The {{ pageType }} can be {{ dueDateText?.keys }}\r\n      <input\r\n        class=\"countNum\"\r\n        type=\"number\"\r\n        [id]=\"'not-completed-' + id\"\r\n        [(ngModel)]=\"notCompletedValue\"\r\n        (change)=\"onValueChange($event, 'not completed')\"\r\n        onkeydown=\"return event.keyCode !== 190\"\r\n        min=\"0\"\r\n        oninput=\"this.value = Math.abs(this.value)\"\r\n      />\r\n      {{ notCompletedValue < 2 ? \"day\" : \"days\" }}\r\n      <span class=\"vx-fw-500\">after</span> the due date. Where this occurs, this\r\n      will show as the {{ mode === \"reviewerFrequency\" ? \"policy\" : type }} being\r\n      <span class=\"delay-text vx-fw-500\"\r\n        >{{ dueDateText?.keys }} with delay</span\r\n      >.\r\n    </div>\r\n  </div>\r\n\r\n  <div *ngIf=\"notCompletedRequired\" class=\"frequency-bottom-item vx-mt-5\">\r\n    <div class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">\r\n      {{ dueDateText.windowCloses }}\r\n    </div>\r\n    <div\r\n      class=\"frequency-bottom-item-box vx-fs-13 vx-paragraph-txt vx-p-3 vx-pt-4 vx-pb-4 vx-d-block\"\r\n    >\r\n      The {{ pageType }} cannot be {{ dueDateText?.keys }}\r\n      <span class=\"vx-fw-500 vx-label-txt\">{{ notCompletedValue }}</span>\r\n      {{ notCompletedValue < 2 ? \"day\" : \"days\" }}\r\n      <span class=\"vx-fw-500\">after</span> the due date. Where this occurs, this\r\n      will show as the {{ type }} being\r\n      <span class=\"notcompleted-text vx-fw-500\"\r\n        >not\r\n        {{\r\n          dueDateText?.keys === \"reviewed\" ? \"completed\" : dueDateText?.keys\r\n        }}</span\r\n      >.\r\n    </div>\r\n  </div>\r\n\r\n  <div\r\n    *ngIf=\"isDeactivated && mode === 'responsibility'\"\r\n    class=\"frequency-bottom-item vx-mt-5\"\r\n  >\r\n    <div class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">\r\n      AUTOMATIC DEACTIVATE:\r\n    </div>\r\n    <div\r\n      class=\"frequency-bottom-item-box vx-fs-13 vx-paragraph-txt vx-p-3 vx-pt-4 vx-pb-4 vx-d-block\"\r\n    >\r\n      This {{ type }} will be automatically deactivated, if it is not\r\n      {{ dueDateText?.keys }}\r\n      for\r\n      <input\r\n        class=\"countNum\"\r\n        type=\"number\"\r\n        [id]=\"'deactivate' + id\"\r\n        [(ngModel)]=\"deactivateValue\"\r\n        (change)=\"onValueChange($event, 'deactivated')\"\r\n        onkeydown=\"return event.keyCode !== 190\"\r\n        min=\"0\"\r\n        oninput=\"this.value = Math.abs(this.value)\"\r\n      />\r\n      consecutive due dates.\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!-- For Policy -->\r\n<div class=\"frequency-due-date\" *ngIf=\"mode == 'policy' && false\">\r\n  <div *ngIf=\"completedRequired\" class=\"frequency-due-date-row\">\r\n    <p>The policy can be <i class=\"completed\">attested</i></p>\r\n    <input\r\n      [id]=\"'complete-' + id\"\r\n      type=\"number\"\r\n      [(ngModel)]=\"completedValue\"\r\n      (change)=\"onValueChange($event, 'completed')\"\r\n      onkeydown=\"return event.keyCode !== 190\"\r\n      min=\"0\"\r\n      oninput=\"this.value = Math.abs(this.value)\"\r\n    />\r\n    <p>{{ completedValue < 2 ? \"day\" : \"days\" }} before the due date.</p>\r\n  </div>\r\n  <div *ngIf=\"notCompletedRequired\" class=\"frequency-due-date-row\">\r\n    <p>The policy attestation will <i>fail</i></p>\r\n    <input\r\n      type=\"number\"\r\n      [id]=\"'not-completed-' + id\"\r\n      [(ngModel)]=\"notCompletedValue\"\r\n      (change)=\"onValueChange($event, 'not completed')\"\r\n      onkeydown=\"return event.keyCode !== 190\"\r\n      min=\"0\"\r\n      oninput=\"this.value = Math.abs(this.value)\"\r\n    />\r\n    <p>\r\n      {{ notCompletedValue < 2 ? \"day\" : \"days\" }} after the due date if it is\r\n      not completed.\r\n    </p>\r\n  </div>\r\n</div>\r\n<div class=\"frequency-due-date\" *ngIf=\"mode == 'reviewerFrequency' && false\">\r\n  <div *ngIf=\"completedRequired\" class=\"frequency-due-date-row\">\r\n    <p>The policy can be <i class=\"completed\">reviewed</i></p>\r\n    <input\r\n      [id]=\"'complete-' + id\"\r\n      type=\"number\"\r\n      [(ngModel)]=\"completedValue\"\r\n      (change)=\"onValueChange($event, 'completed')\"\r\n      onkeydown=\"return event.keyCode !== 190\"\r\n      min=\"0\"\r\n      oninput=\"this.value = Math.abs(this.value)\"\r\n    />\r\n    <p>{{ completedValue < 2 ? \"day\" : \"days\" }} before the review date.</p>\r\n  </div>\r\n  <div *ngIf=\"notCompletedRequired\" class=\"frequency-due-date-row\">\r\n    <p>The policy review will <i>fail</i></p>\r\n    <input\r\n      type=\"number\"\r\n      [id]=\"'not-completed-' + id\"\r\n      [(ngModel)]=\"notCompletedValue\"\r\n      (change)=\"onValueChange($event, 'not completed')\"\r\n      onkeydown=\"return event.keyCode !== 190\"\r\n      min=\"0\"\r\n      oninput=\"this.value = Math.abs(this.value)\"\r\n    />\r\n    <p>\r\n      {{ notCompletedValue < 2 ? \"day\" : \"days\" }} after the review date if it\r\n      is not completed.\r\n    </p>\r\n  </div>\r\n</div>\r\n",
                 styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/header/header.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/popover/popover.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";::ng-deep .frequency-bottom-item-box{border-radius:.25rem;border:1px solid #f1f1f1}::ng-deep .frequency-bottom-item-box input.countNum{-moz-appearance:textfield;border:none;border-bottom:1px solid #DBDBDB;color:#161b2f;display:inline-block;font-size:13px;text-align:center;width:2.75rem;padding:.125rem;margin:0 .5rem;outline:none}::ng-deep .frequency-bottom-item-box input.countNum::-webkit-inner-spin-button,::ng-deep .frequency-bottom-item-box input.countNum::-webkit-outer-spin-button{-webkit-appearance:none}::ng-deep .frequency-bottom-item-box .completed-text{color:#34aa44}::ng-deep .frequency-bottom-item-box .delay-text{color:#f0b819}::ng-deep .frequency-bottom-item-box .notcompleted-text{color:#d93b41}.frequency-due-date{display:block}.frequency-due-date-row{display:flex;border-top:1px solid #f1f1f1;padding:12px 20px;align-items:center}.frequency-due-date p{font-size:13px;color:#747576;width:auto;margin:0;font-weight:400;line-height:20px}.frequency-due-date p i{color:#d93b41;font-style:italic;font-weight:500;padding:0 4px}.frequency-due-date p i.completed{color:#1e5dd3}.frequency-due-date p strong{font-weight:600;font-style:italic}.frequency-due-date input{-moz-appearance:textfield;font-size:14px;color:#161b2f;border:0;border-bottom:2px solid #dcdcdc;display:inline-block;width:36px;text-align:center;padding:4px;margin:0 8px;outline:none}.frequency-due-date input::-webkit-outer-spin-button,.frequency-due-date input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"]
             },] }
 ];
@@ -20373,6 +21115,7 @@ class AssessmentListComponent {
         this.animation = false;
         this.subList = false;
         this.isEdit = false;
+        this.mode = '';
         this.openedCategory = [];
         this.assessmentPayload = {
             search_title: "",
@@ -20532,7 +21275,7 @@ class AssessmentListComponent {
 AssessmentListComponent.decorators = [
     { type: Component, args: [{
                 selector: 'app-assessment-list',
-                template: "\r\n<app-preview *ngIf=\"isPreview\" [questionData]=\"previewQuestionData\" (previewBack)=\"previewBack()\"></app-preview>\r\n<div class=\"assessment-list\" [class.animate]=\"animation\">\r\n    <div class=\"assessment-list-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\">\r\n        <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Select an Assessment</div>\r\n    </div>\r\n    <div class=\"assessment-list-body\">\r\n        <div class=\"search-block\">\r\n            <i class=\"icons\">&#xe90b;</i>\r\n            <input type=\"text\" [(ngModel)]=\"searchAssessments\" (change)=\"onAssessmentSearch($event.target.value)\" placeholder=\"Search Assessment Category\" />\r\n        </div>\r\n        <app-workflow-pagination \r\n            [pageCount]=\"assessmentCategory?.totalPage\" \r\n            [total]=\"assessmentCategory?.totalRecords\" \r\n            [start]=\"assessmentCategory?.start_value\" \r\n            [end]=\"assessmentCategory?.end_value\" \r\n            [activeAlphabet]=\"''\" \r\n            (selectedAlphabet)=\"onAlphabetSelected($event)\" \r\n            (selectedPage)=\"onPageSelection($event)\"\r\n        ></app-workflow-pagination>\r\n        <div *ngIf=\"assessmentCategory.data.length === 0 && !isLoader && searchAssessments\" class=\"assessment-list-part vx-mb-4\">\r\n        <app-no-data  [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"'No Assessments Found.'\"></app-no-data>\r\n        </div>\r\n        <div *ngIf=\"assessmentCategory.data.length || isLoader\" class=\"assessment-list-part vx-mb-4\">\r\n            <div *ngIf=\"isEdit && selectedAssessment?.assessmentDetails?.assessment_name\" class=\"assessment-list-selected\">\r\n                <div class=\"assessment-list-heading\">Assessment already selected for this responsibility</div>\r\n                <div class=\"assessment-list-item\">\r\n                    <div class=\"table-row\">\r\n                        <div class=\"table-column serial disabled\">\r\n                            <app-cs-radio [disabled]=\"true\" class=\"disabled\" [checked]=\"true\" [readonly]=\"true\"></app-cs-radio>\r\n                        </div>\r\n                        <div class=\"table-column sub-name\">\r\n                            <div class=\"name-inner\">\r\n                                <div class=\"value\" [appTooltip]=\"selectedAssessment?.assessmentDetails?.assessment_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{selectedAssessment?.assessmentDetails?.assessment_name}}</div>\r\n                                <div class=\"within-part\">\r\n                                    <span class=\"within-box\">Within</span>\r\n                                    <span class=\"value\" [appTooltip]=\"selectedAssessment?.category_details?.category_name + (selectedAssessment?.category_details?.parent_tree ? ' > ' + selectedAssessment?.category_details?.parent_tree : '')\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{selectedAssessment?.category_details?.category_name + (selectedAssessment?.category_details?.parent_tree ? ' > ' + selectedAssessment?.category_details?.parent_tree : '')}}</span>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"table-column question\">\r\n                            <div class=\"buttons\">\r\n                                <button class=\"action-btn\" (click)=\"preview(selectedAssessment?.assessmentDetails)\"><i class=\"icons\">&#xeae5;</i> Preview</button>\r\n                                <!-- <button class=\"action-btn\"><i class=\"icons\">&#xe90c;</i> Edit</button> -->\r\n                            </div>\r\n                            <div class=\"label\">{{selectedAssessment?.assessmentDetails?.questions}} {{selectedAssessment?.assessmentDetails?.questions > 1 ? 'Questions': 'Question'}}</div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div class=\"assessment-list-heading\">Select an Assessment for this responsibility</div>\r\n\r\n            <!--\r\n                    Assessment category list \r\n                    active class is used for highlighting opened element\r\n            -->\r\n            <ng-container *ngIf=\"!isLoader\">\r\n                <div *ngFor=\"let data of assessmentCategory.data; let  i = index;\" class=\"assessment-list-item\" [class.active]=\"openedCategory.includes(i) || data.id === selectedAssessment?.category_id\">\r\n                    <div class=\"table-row main-list\" (click)=\"showSubList(i, data?.id)\" [class.disabled]=\"data?.assessmentcount < 1\">\r\n                        <div class=\"table-column serial\">\r\n                            <div [id]=\"'sr-no' + i\" class=\"sr-no\" [appTooltip]=\"i + 1\" placement=\"bottom\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">{{dataPerPage * (assessmentPayload.page_no - 1) + (i + 1)}}</div>\r\n                        </div>\r\n                        <div class=\"table-column name\">\r\n                            <div class=\"name-inner\">\r\n                                <div class=\"value\" [appTooltip]=\"data.category_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{data?.category_name}}</div>\r\n                                <div class=\"within-part\" *ngIf=\"data?.parent_tree\">\r\n                                    <span class=\"within-box\">Within</span>\r\n                                    <span class=\"value\" [appTooltip]=\"data.parent_tree\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{data?.parent_tree}}</span>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"table-column action\">\r\n                            <button [id]=\"'arrow' + i\" class=\"arrow\" [class.disabled] = \"data?.assessmentcount < 1\" [disabled]=\"data?.assessmentcount < 1\">\r\n                                <i *ngIf=\"!openedCategory.includes(i)\" class=\"icons\">&#xe970;</i>\r\n                                <i *ngIf=\"openedCategory.includes(i)\" class=\"icons\">&#xe9e8;</i>\r\n                            </button>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <!-- Assessment list start from here -->\r\n                    <div *ngIf=\"openedCategory.includes(i)\" class=\"sub-list\">\r\n                        <ng-container *ngIf=\"data.assessmentData?.length > 0\">\r\n                            <div class=\"table-row\" *ngFor=\"let assessment of data.assessmentData; let j = index\" [class.active]=\"assessment.id === selectedAssessment?.assessment_id && data.id === selectedAssessment?.category_id\">\r\n                                <div class=\"table-column serial\">\r\n                                    <div [id]=\"'sub-sr-no'+ i+j\" class=\"sr-no\" appTooltip=\"{{dataPerPage * (assessmentPayload.page_no - 1) + (i + 1)}}.{{j + 1}}\" placement=\"bottom\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">\r\n                                        {{dataPerPage * (assessmentPayload.page_no - 1) + (i + 1)}}.{{j + 1}}\r\n                                        <app-cs-radio name=\"assessment\" [value]=\"assessment.id\" [checked]=\"assessment?.id === selectedAssessment?.assessment_id && data?.id === selectedAssessment?.category_id\"\r\n                                        (checkedEvent)=\"setAssessment(data, assessment)\"></app-cs-radio>\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"table-column sub-name\">\r\n                                    <div class=\"value\" [appTooltip]=\"'Mission and message, communications to external audiences'\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{assessment?.assessment_name}}</div>\r\n                                </div>\r\n                                <div class=\"table-column question\">\r\n                                    <div class=\"buttons\">\r\n                                        <button class=\"action-btn\" (click)=\"preview(assessment)\"><i class=\"icons\">&#xeae5;</i> Preview</button>\r\n                                        <!-- <button class=\"action-btn\"><i class=\"icons\">&#xe9ba;</i> Edit</button> -->\r\n                                    </div>\r\n                                    <div class=\"label\">{{assessment?.questions}} {{assessment?.questions > 1 ? 'Questions' : 'Question'}}</div>\r\n                                </div>\r\n                            </div>\r\n                        </ng-container>\r\n                            <!-- Loader loading isLoader  -->\r\n                        <app-assessment-list-sub-loader *ngIf=\"!data.assessmentData?.length\"></app-assessment-list-sub-loader>\r\n                        <!-- <app-line-loader *ngIf=\"!data.assessmentData?.length\" [loaderHeight]=\"'5'\"></app-line-loader> -->\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n            <!-- Loader loading isLoader  -->\r\n            <app-assessment-list-loader *ngIf=\"isLoader\"></app-assessment-list-loader>\r\n        </div>\r\n        <!-- No data image  -->\r\n        <app-no-data *ngIf=\"!assessmentCategory.data.length && !isLoader && !searchAssessments\" [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"'No Data to Display'\"></app-no-data>\r\n    \r\n        <app-floating-bar \r\n            [selectedData]=\"[]\" \r\n            (closeEvent)=\"save()\"\r\n            (closeList)=\"close()\" \r\n            [isDisabled]=\"!selectedAssessment?.assessment_id && !isDeleted\"\r\n            [selectedData]=\"selectedAssessment?.assessment_id ? [selectedAssessment?.assessmentDetails]:[]\"\r\n            [displayElementKey]=\"'assessment_name'\" \r\n            [pluralText]=\"'Risk Categories selected'\" (closeEvent)=\"save()\" (deleteEvent)=\"deleteEvent($event)\"\r\n        >\r\n        </app-floating-bar>\r\n    </div>\r\n</div>\r\n",
+                template: "\r\n<app-preview *ngIf=\"isPreview\" [questionData]=\"previewQuestionData\" (previewBack)=\"previewBack()\"></app-preview>\r\n<div class=\"assessment-list\" [class.animate]=\"animation\">\r\n    <div class=\"assessment-list-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\">\r\n        <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Select an Assessment</div>\r\n    </div>\r\n    <div class=\"assessment-list-body\">\r\n        <div class=\"search-block\">\r\n            <i class=\"icons\">&#xe90b;</i>\r\n            <input type=\"text\" [(ngModel)]=\"searchAssessments\" (change)=\"onAssessmentSearch($event.target.value)\" placeholder=\"Search Assessment Category\" />\r\n        </div>\r\n        <app-workflow-pagination \r\n            [pageCount]=\"assessmentCategory?.totalPage\" \r\n            [total]=\"assessmentCategory?.totalRecords\" \r\n            [start]=\"assessmentCategory?.start_value\" \r\n            [end]=\"assessmentCategory?.end_value\" \r\n            [activeAlphabet]=\"''\" \r\n            (selectedAlphabet)=\"onAlphabetSelected($event)\" \r\n            (selectedPage)=\"onPageSelection($event)\"\r\n        ></app-workflow-pagination>\r\n        <div *ngIf=\"assessmentCategory.data.length === 0 && !isLoader && searchAssessments\" class=\"assessment-list-part vx-mb-4\">\r\n        <app-no-data  [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"'No Assessments Found.'\"></app-no-data>\r\n        </div>\r\n        <div *ngIf=\"assessmentCategory.data.length || isLoader\" class=\"assessment-list-part vx-mb-4\">\r\n            <div *ngIf=\"isEdit && selectedAssessment?.assessmentDetails?.assessment_name\" class=\"assessment-list-selected\">\r\n                <div class=\"assessment-list-heading\">{{ mode === 'policy' ? 'Assessment already selected' :'Assessment already selected for this responsibility'}}</div>\r\n                <div class=\"assessment-list-item\">\r\n                    <div class=\"table-row\">\r\n                        <div class=\"table-column serial disabled\">\r\n                            <app-cs-radio [disabled]=\"true\" class=\"disabled\" [checked]=\"true\" [readonly]=\"true\"></app-cs-radio>\r\n                        </div>\r\n                        <div class=\"table-column sub-name\">\r\n                            <div class=\"name-inner\">\r\n                                <div class=\"value\" [appTooltip]=\"selectedAssessment?.assessmentDetails?.assessment_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{selectedAssessment?.assessmentDetails?.assessment_name}}</div>\r\n                                <div class=\"within-part\">\r\n                                    <span class=\"within-box\">Within</span>\r\n                                    <span class=\"value\" [appTooltip]=\"selectedAssessment?.category_details?.category_name + (selectedAssessment?.category_details?.parent_tree ? ' > ' + selectedAssessment?.category_details?.parent_tree : '')\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{selectedAssessment?.category_details?.category_name + (selectedAssessment?.category_details?.parent_tree ? ' > ' + selectedAssessment?.category_details?.parent_tree : '')}}</span>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"table-column question\">\r\n                            <div class=\"buttons\">\r\n                                <button class=\"action-btn\" (click)=\"preview(selectedAssessment?.assessmentDetails)\"><i class=\"icons\">&#xeae5;</i> Preview</button>\r\n                                <!-- <button class=\"action-btn\"><i class=\"icons\">&#xe90c;</i> Edit</button> -->\r\n                            </div>\r\n                            <div class=\"label\">{{selectedAssessment?.assessmentDetails?.questions}} {{selectedAssessment?.assessmentDetails?.questions > 1 ? 'Questions': 'Question'}}</div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div class=\"assessment-list-heading\">{{ mode === 'policy' ? 'Select an Assessment' : 'Select an Assessment for this responsibility'}}</div>\r\n\r\n            <!--\r\n                    Assessment category list \r\n                    active class is used for highlighting opened element\r\n            -->\r\n            <ng-container *ngIf=\"!isLoader\">\r\n                <div *ngFor=\"let data of assessmentCategory.data; let  i = index;\" class=\"assessment-list-item\" [class.active]=\"openedCategory.includes(i) || data.id === selectedAssessment?.category_id\">\r\n                    <div class=\"table-row main-list\" (click)=\"showSubList(i, data?.id)\" [class.disabled]=\"data?.assessmentcount < 1\">\r\n                        <div class=\"table-column serial\">\r\n                            <div [id]=\"'sr-no' + i\" class=\"sr-no\" [appTooltip]=\"i + 1\" placement=\"bottom\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">{{dataPerPage * (assessmentPayload.page_no - 1) + (i + 1)}}</div>\r\n                        </div>\r\n                        <div class=\"table-column name\">\r\n                            <div class=\"name-inner\">\r\n                                <div class=\"value\" [appTooltip]=\"data.category_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{data?.category_name}}</div>\r\n                                <div class=\"within-part\" *ngIf=\"data?.parent_tree\">\r\n                                    <span class=\"within-box\">Within</span>\r\n                                    <span class=\"value\" [appTooltip]=\"data.parent_tree\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{data?.parent_tree}}</span>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"table-column action\">\r\n                            <button [id]=\"'arrow' + i\" class=\"arrow\" [class.disabled] = \"data?.assessmentcount < 1\" [disabled]=\"data?.assessmentcount < 1\">\r\n                                <i *ngIf=\"!openedCategory.includes(i)\" class=\"icons\">&#xe970;</i>\r\n                                <i *ngIf=\"openedCategory.includes(i)\" class=\"icons\">&#xe9e8;</i>\r\n                            </button>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <!-- Assessment list start from here -->\r\n                    <div *ngIf=\"openedCategory.includes(i)\" class=\"sub-list\">\r\n                        <ng-container *ngIf=\"data.assessmentData?.length > 0\">\r\n                            <div class=\"table-row\" *ngFor=\"let assessment of data.assessmentData; let j = index\" [class.active]=\"assessment.id === selectedAssessment?.assessment_id && data.id === selectedAssessment?.category_id\">\r\n                                <div class=\"table-column serial\">\r\n                                    <div [id]=\"'sub-sr-no'+ i+j\" class=\"sr-no\" appTooltip=\"{{dataPerPage * (assessmentPayload.page_no - 1) + (i + 1)}}.{{j + 1}}\" placement=\"bottom\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">\r\n                                        {{dataPerPage * (assessmentPayload.page_no - 1) + (i + 1)}}.{{j + 1}}\r\n                                        <app-cs-radio name=\"assessment\" [value]=\"assessment.id\" [checked]=\"assessment?.id === selectedAssessment?.assessment_id && data?.id === selectedAssessment?.category_id\"\r\n                                        (checkedEvent)=\"setAssessment(data, assessment)\"></app-cs-radio>\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"table-column sub-name\">\r\n                                    <div class=\"value\" [appTooltip]=\"'Mission and message, communications to external audiences'\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{assessment?.assessment_name}}</div>\r\n                                </div>\r\n                                <div class=\"table-column question\">\r\n                                    <div class=\"buttons\">\r\n                                        <button class=\"action-btn\" (click)=\"preview(assessment)\"><i class=\"icons\">&#xeae5;</i> Preview</button>\r\n                                        <!-- <button class=\"action-btn\"><i class=\"icons\">&#xe9ba;</i> Edit</button> -->\r\n                                    </div>\r\n                                    <div class=\"label\">{{assessment?.questions}} {{assessment?.questions > 1 ? 'Questions' : 'Question'}}</div>\r\n                                </div>\r\n                            </div>\r\n                        </ng-container>\r\n                            <!-- Loader loading isLoader  -->\r\n                        <app-assessment-list-sub-loader *ngIf=\"!data.assessmentData?.length\"></app-assessment-list-sub-loader>\r\n                        <!-- <app-line-loader *ngIf=\"!data.assessmentData?.length\" [loaderHeight]=\"'5'\"></app-line-loader> -->\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n            <!-- Loader loading isLoader  -->\r\n            <app-assessment-list-loader *ngIf=\"isLoader\"></app-assessment-list-loader>\r\n        </div>\r\n        <!-- No data image  -->\r\n        <app-no-data *ngIf=\"!assessmentCategory.data.length && !isLoader && !searchAssessments\" [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"'No Data to Display'\"></app-no-data>\r\n    \r\n        <app-floating-bar \r\n            [selectedData]=\"[]\" \r\n            (closeEvent)=\"save()\"\r\n            (closeList)=\"close()\" \r\n            [isDisabled]=\"!selectedAssessment?.assessment_id && !isDeleted\"\r\n            [selectedData]=\"selectedAssessment?.assessment_id ? [selectedAssessment?.assessmentDetails]:[]\"\r\n            [displayElementKey]=\"'assessment_name'\" \r\n            [pluralText]=\"'Risk Categories selected'\" (closeEvent)=\"save()\" (deleteEvent)=\"deleteEvent($event)\"\r\n        >\r\n        </app-floating-bar>\r\n    </div>\r\n</div>\r\n",
                 styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .assessment-list{position:fixed;top:0;right:500px;bottom:0;left:0}::ng-deep .assessment-list:before{background:#1E5DD3;content:\"\";position:absolute;top:0;left:0;right:0;width:100%;height:3px}::ng-deep .assessment-list.animate{animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;z-index:-1}::ng-deep .assessment-list-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .assessment-list-body{background:#fff;height:calc(100vh - 2.75rem);padding:2rem}::ng-deep .assessment-list-body .search-block{position:relative}::ng-deep .assessment-list-body .search-block input{height:2.75rem;line-height:1.5rem;padding:.5rem 1rem .5rem 2.5rem;outline:none;border:1px solid #7475763f;border-radius:.25rem;width:100%;font-size:14px;color:#747576}::ng-deep .assessment-list-body .search-block input:focus{border-color:#1e5dd3}::ng-deep .assessment-list-body .search-block i{position:absolute;left:1rem;top:1rem;pointer-events:none;color:#f1f1f1;font-size:12px}::ng-deep .assessment-list-body app-workflow-pagination .pagination-sec{padding-bottom:0!important}::ng-deep .assessment-list-body .assessment-list-part{height:calc(100vh - 242px);overflow:auto;padding:8px 12px 0 0;width:calc(100% + 12px)}::ng-deep .assessment-list-body .assessment-list-part::-webkit-scrollbar-track{background-color:#fff;position:absolute}::ng-deep .assessment-list-body .assessment-list-part::-webkit-scrollbar{width:3px;height:3px;background-color:transparent;position:absolute}::ng-deep .assessment-list-body .assessment-list-part::-webkit-scrollbar-thumb{border-radius:3px;background-color:#dbdbdb;position:absolute}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-selected{margin-bottom:8px}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-heading{color:#161b2f;font-size:12px;font-weight:600;margin-bottom:4px}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item{border:1px solid #f1f1f1;border-radius:2px;margin-bottom:4px}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .main-list{cursor:pointer}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item.active{border-color:#1e5dd3;box-shadow:0 3px 6px #4681ef26}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row{display:flex;align-items:center;justify-content:space-between}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row.disabled{pointer-events:none}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column{color:#747576;height:48px;position:relative;width:100%;display:flex;align-items:center;padding:0 4px}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.serial{width:32px;max-width:32px;justify-content:center}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.serial .sr-no{width:16px;background:#f8f8f8;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 .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.serial .sr-no app-cs-radio{position:absolute;top:8px;left:0;opacity:0;transition:all .2s ease-in-out}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.serial .sr-no app-cs-radio .radio-item{position:absolute;left:8px;top:0}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.name{width:calc(100% - 64px);min-width:calc(100% - 64px)}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.name .name-inner{width:100%}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.name .name-inner .value{color:#161b2f;font-size:12px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;padding-right:20px}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.action{width:32px;max-width:32px;justify-content:center}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-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 .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.action button.disabled{opacity:.5!important;pointer-events:none}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.sub-name{width:calc(100% - 232px);min-width:calc(100% - 232px)}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.sub-name .name-inner{width:100%}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.sub-name .value{color:#747576;font-size:12px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;padding-right:20px}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.question{width:200px;max-width:200px;justify-content:flex-end}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.question .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 .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.question .buttons{display:flex;opacity:0;overflow:hidden;transition:all .2s ease-in-out}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.question .buttons button.action-btn{background:#fff;border:1px solid #f1f1f1;border-radius:2px;color:#1e5dd3;font-size:11px;font-weight:500;line-height:22px;text-transform:uppercase;padding:0 8px;display:flex;align-items:center;margin:0}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.question .buttons button.action-btn i{margin-right:4px}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.question .buttons button.action-btn+button{margin-left:4px}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row:hover .table-column.question .buttons{opacity:1}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .sub-list .table-row{border-top:1px solid #f1f1f1}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .sub-list .table-row:hover .table-column.serial .sr-no,::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .sub-list .table-row.active .table-column.serial .sr-no{color:#f8f8f8}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .sub-list .table-row:hover .table-column.serial .sr-no app-cs-radio,::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .sub-list .table-row.active .table-column.serial .sr-no app-cs-radio{opacity:1}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .sub-list .table-row .table-column{height:32px}::ng-deep .assessment-list-body ul{padding:0;margin:0}::ng-deep .assessment-list-body ul.assessment{max-height:calc(100vh - 240px);overflow:auto;padding:16px 12px 0 0;width:calc(100% + 12px)}::ng-deep .assessment-list-body ul.assessment::-webkit-scrollbar-track{background-color:#fff;position:absolute}::ng-deep .assessment-list-body ul.assessment::-webkit-scrollbar{width:3px;height:3px;background-color:transparent;position:absolute}::ng-deep .assessment-list-body ul.assessment::-webkit-scrollbar-thumb{border-radius:3px;background-color:#dbdbdb;position:absolute}::ng-deep .assessment-list-body ul.assessment li{padding:0 0 12px;list-style:none;display:flex;align-items:center;justify-content:space-between}::ng-deep .assessment-list-body ul.assessment li app-cs-radio{width:calc(100% - 260px)}::ng-deep .assessment-list-body ul.assessment li app-cs-radio .radio-item .value .name{font-size:12px;color:#161b2f;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .assessment-list-body ul.assessment li .right{display:flex;align-items:center}::ng-deep .assessment-list-body ul.assessment li .right .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}::ng-deep .assessment-list-body ul.assessment li .right .buttons{display:flex;width:0;overflow:hidden;transition:all .2s ease-in-out}::ng-deep .assessment-list-body ul.assessment li .right .buttons button.action-btn{background:#fff;border:1px solid #f1f1f1;border-radius:2px;color:#1e5dd3;font-size:11px;font-weight:500;line-height:24px;text-transform:uppercase;padding:0 8px;margin-left:12px;display:flex;align-items:center}::ng-deep .assessment-list-body ul.assessment li .right .buttons button.action-btn i{margin-right:4px}::ng-deep .assessment-list-body ul.assessment li .right .buttons button.action-btn+button{margin-left:4px}::ng-deep .assessment-list-body ul.assessment li:hover .right .buttons{width:156px}.within-part{display:flex;align-items:center;padding-right:12px}.within-part .value{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;font-size:12px;color:#747576}.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}@keyframes animate-right{0%{transform:translate(100%)}to{transform:translate(0)}}\n"]
             },] }
 ];
@@ -20543,6 +21286,7 @@ AssessmentListComponent.ctorParameters = () => [
 ];
 AssessmentListComponent.propDecorators = {
     isEdit: [{ type: Input }],
+    mode: [{ type: Input }],
     selectedAssessment: [{ type: Input }],
     selectedAssessmentData: [{ type: Input }],
     program_ids: [{ type: Input }],
@@ -29749,6 +30493,12 @@ class UserGroupListComponent {
     }
     setAllUsersSelected(event) {
         this.futureUsersWillSelect = event;
+        if (event) {
+            this.selectedUsers = [];
+            this.selectedGroups = [];
+            this.selectedUserIds = [];
+            this.selectedGroupIds = [];
+        }
     }
 }
 UserGroupListComponent.decorators = [