vcomply-workflow-engine 2.6.49 → 2.6.51

package/bundles/vcomply-workflow-engine.umd.js

@@ -849,7 +849,7 @@
         sizeChange: [{ type: i0.HostListener, args: ['window:resize', ['$event'],] }]
     };
 
-    /*! *****************************************************************************
+    /******************************************************************************
     Copyright (c) Microsoft Corporation.
 
     Permission to use, copy, modify, and/or distribute this software for any
@@ -947,7 +947,7 @@
         function step(op) {
             if (f)
                 throw new TypeError("Generator is already executing.");
-            while (_)
+            while (g && (g = 0, op[0] && (_ = 0)), _)
                 try {
                     if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done)
                         return t;
@@ -1011,7 +1011,11 @@
     var __createBinding = Object.create ? (function (o, m, k, k2) {
         if (k2 === undefined)
             k2 = k;
-        Object.defineProperty(o, k2, { enumerable: true, get: function () { return m[k]; } });
+        var desc = Object.getOwnPropertyDescriptor(m, k);
+        if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+            desc = { enumerable: true, get: function () { return m[k]; } };
+        }
+        Object.defineProperty(o, k2, desc);
     }) : (function (o, m, k, k2) {
         if (k2 === undefined)
             k2 = k;
@@ -1084,7 +1088,7 @@
                     ar[i] = from[i];
                 }
             }
-        return to.concat(ar || from);
+        return to.concat(ar || Array.prototype.slice.call(from));
     }
     function __await(v) {
         return this instanceof __await ? (this.v = v, this) : new __await(v);
@@ -1165,6 +1169,11 @@
         if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
             throw new TypeError("Cannot write private member to an object whose class did not declare it");
         return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+    }
+    function __classPrivateFieldIn(state, receiver) {
+        if (receiver === null || (typeof receiver !== "object" && typeof receiver !== "function"))
+            throw new TypeError("Cannot use 'in' operator on non-object");
+        return typeof state === "function" ? receiver === state : state.has(receiver);
     }
 
     var AddRiskService = /** @class */ (function () {
@@ -2105,21 +2114,31 @@
                 params: params, headers: headers
             }).pipe(operators.retry(2));
         };
+        // This API used to get the defined system responsibilities.
+        ResponsibilityService.prototype.getSystemResponsibilityList = function (params) {
+            var headers = new i1.HttpHeaders().set('token', this.authService.getAuthorizationToken());
+            return this.http.get(this.env.responsibilitiesGet + 'system_defined_responsibility/list', {
+                params: params, headers: headers
+            }).pipe(operators.retry(0));
+        };
         ResponsibilityService.prototype.getOrganizationGroups = function (params) {
+            var _a;
             var headers = new i1.HttpHeaders().set('token', this.authService.getAuthorizationToken());
-            return this.http.get(this.env.organizationGet + 'groupsList&status=1&type=compliance', {
+            return this.http.get(((_a = this.env) === null || _a === void 0 ? void 0 : _a.organizationGet) + 'groupsList&status=1&type=compliance', {
                 params: params, headers: headers,
             }).pipe(operators.retry(2));
         };
         ResponsibilityService.prototype.getOrganizationUsers = function () {
+            var _a;
             var headers = new i1.HttpHeaders().set('token', this.authService.getAuthorizationToken());
-            return this.http.get(this.env.organizationGet + 'organizationUsers', {
+            return this.http.get(((_a = this.env) === null || _a === void 0 ? void 0 : _a.organizationGet) + 'organizationUsers', {
                 headers: headers,
             }).pipe(operators.retry(2));
         };
         ResponsibilityService.prototype.getOrganizationPeople = function (params) {
+            var _a;
             var headers = new i1.HttpHeaders().set('token', this.authService.getAuthorizationToken());
-            return this.http.get(this.env.organizationGet + 'people', {
+            return this.http.get(((_a = this.env) === null || _a === void 0 ? void 0 : _a.organizationGet) + 'people', {
                 params: params, headers: headers
             }).pipe(operators.retry(2));
         };
@@ -2156,51 +2175,61 @@
             }).pipe(operators.retry(2));
         };
         ResponsibilityService.prototype.getCategoriesUnderProgram = function (params) {
+            var _a;
             var headers = new i1.HttpHeaders().set('token', this.authService.getAuthorizationToken());
-            return this.http.get(this.env.complianceGet + 'complianceCategory/CategoryListTree', {
+            return this.http.get(((_a = this.env) === null || _a === void 0 ? void 0 : _a.complianceGet) + 'complianceCategory/CategoryListTree', {
                 params: params, headers: headers
             }).pipe(operators.retry(2));
         };
         ResponsibilityService.prototype.getAssurance = function () {
+            var _a;
             var headers = new i1.HttpHeaders().set('token', this.authService.getAuthorizationToken());
-            return this.http.get(this.env.assuranceGet + 'category/list&id=1', {
+            return this.http.get(((_a = this.env) === null || _a === void 0 ? void 0 : _a.assuranceGet) + 'category/list&id=1', {
                 headers: headers,
             }).pipe(operators.retry(2));
         };
         ResponsibilityService.prototype.getAssuranceForRequiresAudit = function () {
+            var _a;
             var headers = new i1.HttpHeaders().set('token', this.authService.getAuthorizationToken());
-            return this.http.get(this.env.assuranceApi + 'Audit/Category/List/?mode=entrust_module', {
+            return this.http.get(((_a = this.env) === null || _a === void 0 ? void 0 : _a.assuranceApi) + 'Audit/Category/List/?mode=entrust_module', {
                 headers: headers,
             }).pipe(operators.retry(2));
         };
         ResponsibilityService.prototype.getRCDetailsOfFramework = function (rc_id, category_id) {
+            var _a;
             var headers = new i1.HttpHeaders().set('token', this.authService.getAuthorizationToken());
-            return this.http.get(this.env.complianceGet + 'complianceCategory/CategoryRCTreeById&id=' + category_id + '&rc_id=' + rc_id, { headers: headers });
+            return this.http.get(((_a = this.env) === null || _a === void 0 ? void 0 : _a.complianceGet) + 'complianceCategory/CategoryRCTreeById&id=' + category_id + '&rc_id=' + rc_id, { headers: headers });
         };
         ResponsibilityService.prototype.submitEntrust = function (entrust_body) {
+            var _a;
             var headers = new i1.HttpHeaders().set('token', this.authService.getAuthorizationToken());
-            return this.http.post(this.env.compliancePost + 'createReport', entrust_body, { headers: headers });
+            return this.http.post(((_a = this.env) === null || _a === void 0 ? void 0 : _a.compliancePost) + 'createReport', entrust_body, { headers: headers });
         };
         ResponsibilityService.prototype.updateEntrust = function (entrust_body, object_id, isDelegate) {
+            var _a;
             var headers = new i1.HttpHeaders().set('token', this.authService.getAuthorizationToken());
-            return this.http.post(this.env.compliancePost + 'createReport&reportId=' + object_id + '&isDelegate=0', entrust_body, { headers: headers });
+            return this.http.post(((_a = this.env) === null || _a === void 0 ? void 0 : _a.compliancePost) + 'createReport&reportId=' + object_id + '&isDelegate=0', entrust_body, { headers: headers });
         };
         ResponsibilityService.prototype.editResponsibility = function (objectId) {
+            var _a;
             var headers = new i1.HttpHeaders().set('token', this.authService.getAuthorizationToken());
-            return this.http.get(this.env.complianceGet + 'complianceReport/reportById&id=' + objectId, { headers: headers }).pipe(operators.retry(2));
+            return this.http.get(((_a = this.env) === null || _a === void 0 ? void 0 : _a.complianceGet) + 'complianceReport/reportById&id=' + objectId, { headers: headers }).pipe(operators.retry(2));
         };
         ResponsibilityService.prototype.addBulkResponsibility = function (entrust_body) {
+            var _a;
             var headers = new i1.HttpHeaders().set('token', this.authService.getAuthorizationToken());
-            return this.http.post(this.env.compliancePost + 'import/create', entrust_body, { headers: headers }).pipe(operators.retry(2));
+            return this.http.post(((_a = this.env) === null || _a === void 0 ? void 0 : _a.compliancePost) + 'import/create', entrust_body, { headers: headers }).pipe(operators.retry(2));
         };
         ResponsibilityService.prototype.uploadToNode = function (payload, des) {
+            var _a;
             // const headers = new HttpHeaders().set('token', this.authService.getAuthorizationToken());
             // return this.http.post<any[]>(this.env.fileUploadEndPoint + 'risk/responsibilityCenterList', { rc_id_arr: rcArray ?? [] }, { headers }).pipe(retry(2));
-            return this.http.post(this.env.fileUploadEndPoint + des, payload);
+            return this.http.post(((_a = this.env) === null || _a === void 0 ? void 0 : _a.fileUploadEndPoint) + des, payload);
         };
         ResponsibilityService.prototype.getCategoryDetailsById = function (id) {
+            var _a;
             var headers = new i1.HttpHeaders().set('token', this.authService.getAuthorizationToken());
-            return this.http.get(this.env.complianceGet + 'complianceCategory/CategoryTreeById&id=' + id, { headers: headers, }).pipe(operators.retry(2));
+            return this.http.get(((_a = this.env) === null || _a === void 0 ? void 0 : _a.complianceGet) + 'complianceCategory/CategoryTreeById&id=' + id, { headers: headers, }).pipe(operators.retry(2));
         };
         ResponsibilityService.prototype.getFrameWorkCount = function (params) {
             var httpOptions = {};
@@ -2973,6 +3002,10 @@
             this.groupsListLoaded = false;
             this.assuranceCategoryListLoaded = false;
             this.hasReviewer = false;
+            this.responsibilityType = [
+                { label: 'DEFAULT RESPONSIBILITY', value: 0 },
+                { label: 'SYSTEM RESPONSIBILITY', value: 1 }
+            ];
             // usersList: any[] = [];
             this.assignorsList = [];
             this.assigneesList = [];
@@ -2989,6 +3022,7 @@
             this.categoryList = [];
             this.nonRemovableUsersList = [];
             this.responsibilityForm = {
+                responsibility_type: 0,
                 assignors: {
                     enable: false,
                     list: []
@@ -3002,6 +3036,7 @@
                     list: []
                 },
                 frequency: '',
+                systemResponsibilities: [],
                 description: '',
                 objective: '',
                 rc: [],
@@ -3063,7 +3098,7 @@
                 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', 'what', 'framework', 'assignors', 'assignees', 'category', 'program', 'rc', 'checkpoints', 'frequency', 'reviewer', 'reviewerFrequency', 'overseer', 'overseerNotify', 'riskCalculator', 'isAssessment', 'requires_audit', 'checkpoints-new'];
             this.focus = {
                 responsibilityName: false,
                 description: false,
@@ -3131,6 +3166,8 @@
             this.managePermission = false;
             this.checkpointCount = 0;
             this.isGroupAssigned = false;
+            this.unsubscribe = new rxjs.Subject();
+            this.systemResponsibilityList = [];
             this.unSubscribeProgram = new rxjs.Subject();
             this.authService.getUserInfo().subscribe(function (res) {
                 var complianceSubmodule = res.roleActions[res.roleActions.findIndex(function (ele) { return ele.moduleName == 'compliance'; })].subModule;
@@ -3186,6 +3223,7 @@
             this.checkWhetherAllListsLoaded();
             this.getOrganizationDetails();
             this.getUserDetails();
+            this.getSystemResponsibility();
             this.shortMonth = this.frequencyService.monthArray.map(function (month) { return month.substring(0, 3); });
             if (this.mode === 'CREATE') {
                 this.organizationId = this.authService.getOrganizationId();
@@ -3210,12 +3248,31 @@
         };
         WorkflowComplianceComponent.prototype.activateSelector = function (type, event) {
             this.activeSelector = event ? type : '';
+            if (type === 'what' && this.responsibilityForm.responsibility_type == 1) {
+                this.getSystemResponsibility();
+            }
             if (type === 'checkpoints-new')
                 this.authService.previewPanel.next(event);
             if (this.sideSelectorElements.includes(type)) {
                 this.pickerChanged.emit(event);
             }
         };
+        WorkflowComplianceComponent.prototype.getSystemResponsibility = function () {
+            var _this = this;
+            this.loader = true;
+            var params = new i1.HttpParams();
+            params = params.append('pageNo', 1);
+            params = params.append('searchFor', '');
+            this.responsibilityService.getSystemResponsibilityList(params).pipe(rxjs.takeUntil(this.unsubscribe)).subscribe({
+                next: function (res) {
+                    _this.loader = false;
+                    _this.systemResponsibilityList = res;
+                },
+                error: function (err) {
+                    _this.loader = false;
+                },
+            });
+        };
         WorkflowComplianceComponent.prototype.whatChanged = function (event) {
             var _a;
             this.responsibilityForm.responsibility.name = (_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.value;
@@ -3342,6 +3399,20 @@
                 _this.categoriesListLoaded = true;
             });
         };
+        WorkflowComplianceComponent.prototype.responsibilityTypeChange = function (evt) {
+            console.log('responsibility', evt);
+            if (evt === 1) {
+                this.hideElementsFromMoreOptions.emit(['FORMATE_EVIDENCE', 'ASSESSMENT', 'CHECKPOINTS', 'CHECKPOINTS_NEW', 'RISK_CLASSIFICATION', 'REVIEWER', 'OVERSEER', 'ASSURANCE', 'REQUIRES_AUDIT']);
+                this.reset();
+                this.responsibilityForm.responsibility_type = 1;
+            }
+            else {
+                this.reset();
+                this.hideElementsFromMoreOptions.emit(this.hiddenList);
+                this.responsibilityForm.responsibility_type = 0;
+            }
+            this.populateOption.emit([]);
+        };
         WorkflowComplianceComponent.prototype.filterListsAccordingToProgram = function (program_id) {
             this.unSubscribeProgram.next();
             this.unSubscribeProgram.complete();
@@ -3747,7 +3818,7 @@
             return data;
         };
         WorkflowComplianceComponent.prototype.returnIds = function (list, key) {
-            return list.map(function (ele) {
+            return list === null || list === void 0 ? void 0 : list.map(function (ele) {
                 if (ele[key]) {
                     return ele[key];
                 }
@@ -3991,6 +4062,15 @@
                         reviewCompleteDays: selectedItems.completeDays,
                         reviewNOtCompletedDays: selectedItems.notCompleted,
                     };
+                    break;
+                case 'system_responsibility':
+                    this.responsibilityForm.systemResponsibilities = [selectedItems];
+                    // if(this.invalidType == 'what' && this.responsibilityForm?.systemResponsibilities?.length) {
+                    //   this.invalidType = '';
+                    // }
+                    if (this.submitted) {
+                        this.validateResponsibility();
+                    }
             }
             this.activeDeselector();
         };
@@ -4115,6 +4195,9 @@
                     this.checkpointCount = 0;
                     this.checkpointCountUpdated.emit(this.checkpointCount);
                     break;
+                // Removing selected responsibility on clicking cross icon
+                case 'system_responsibility':
+                    this.responsibilityForm.systemResponsibilities = [];
             }
         };
         WorkflowComplianceComponent.prototype.entrustFramework = function (event) {
@@ -4207,7 +4290,6 @@
         };
         WorkflowComplianceComponent.prototype.assignFromFramework = function (freqObj) {
             var _a, _b, _c, _d, _e, _f, _g, _h;
-            console.log("frequuuuu", freqObj);
             if (freqObj.data) {
                 // this.reset();
                 this.activeDeselector();
@@ -4341,6 +4423,7 @@
          */
         WorkflowComplianceComponent.prototype.submitResponsibility = function () {
             var valid = this.validateResponsibility();
+            console.log('this is validation', valid);
             if (!valid) {
                 return false;
             }
@@ -4359,26 +4442,43 @@
          * then return false. Otherwise, return true.
          */
         WorkflowComplianceComponent.prototype.validateResponsibility = function () {
+            var _a, _b, _c, _d, _e, _f, _g;
             this.submitted = true;
-            if (this.responsibilityForm.assignors.enable && this.responsibilityForm.assignors.list.length === 0) {
-                this.invalidType = "whom";
-                return;
-            }
-            if (!this.responsibilityForm.responsibility.name || this.responsibilityForm.responsibility.name.trim() == '') {
-                this.invalidType = 'what';
-            }
-            else if (!this.responsibilityForm.assignees.list || this.responsibilityForm.assignees.list.length == 0) {
-                this.invalidType = 'who';
-            }
-            else if (!this.responsibilityForm.frequency || this.responsibilityForm.frequency == '' || this.responsibilityForm.frequency === '' || this.responsibilityForm.frequency === '5~0~0~0') {
-                this.invalidType = 'when';
-            }
-            else {
-                this.invalidType = '';
+            this.invalidType = '';
+            if (((_a = this.responsibilityForm) === null || _a === void 0 ? void 0 : _a.responsibility_type) == 0) {
+                if (this.responsibilityForm.assignors.enable && this.responsibilityForm.assignors.list.length === 0) {
+                    this.invalidType = "whom";
+                    return;
+                }
+                if (!this.responsibilityForm.responsibility.name || this.responsibilityForm.responsibility.name.trim() == '') {
+                    this.invalidType = 'what';
+                }
+                else if (!this.responsibilityForm.assignees.list || this.responsibilityForm.assignees.list.length == 0) {
+                    this.invalidType = 'who';
+                }
+                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') || this.responsibilityForm.assignees.list.length == 0) {
+                    return false;
+                }
+                else {
+                    return true;
+                }
+                // Validations for system Responsibility
             }
-            if (!this.responsibilityForm.responsibility.name || this.responsibilityForm.responsibility.name.trim() == ''
-                || (!this.responsibilityForm.frequency || this.responsibilityForm.frequency === '' || this.responsibilityForm.frequency === '5~0~0~0') || this.responsibilityForm.assignees.list.length == 0) {
-                return false;
+            else if (((_b = this.responsibilityForm) === null || _b === void 0 ? void 0 : _b.responsibility_type) == 1) {
+                if (((_d = (_c = this.responsibilityForm) === null || _c === void 0 ? void 0 : _c.systemResponsibilities) === null || _d === void 0 ? void 0 : _d.length) == 0) {
+                    this.invalidType = 'what';
+                }
+                else if (!((_e = this.responsibilityForm) === null || _e === void 0 ? void 0 : _e.frequency) || ((_f = this.responsibilityForm) === null || _f === void 0 ? void 0 : _f.frequency) === '' || ((_g = this.responsibilityForm) === null || _g === void 0 ? void 0 : _g.frequency) === '5~0~0~0') {
+                    this.invalidType = 'when';
+                }
+                return this.invalidType ? false : true;
             }
             else {
                 return true;
@@ -4386,12 +4486,12 @@
         };
         WorkflowComplianceComponent.prototype.entrustResponsibility = function (entrustForm) {
             var _this = this;
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
+            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;
             this.loader = true;
             this.uiKitService.isLoader = true;
             var startDate = moment__namespace(parseInt(entrustForm.startDate) * 1000).format("YYYY-MM-DD HH:mm:ss");
             startDate = moment__namespace(startDate.split(' ')[0] + " 00:00:00").format("YYYY-MM-DD HH:mm:ss");
-            var rcDetails = entrustForm.rc.length > 0 ? entrustForm.rc.map(function (rc) {
+            var rcDetails = ((_a = entrustForm.rc) === null || _a === void 0 ? void 0 : _a.length) > 0 ? entrustForm.rc.map(function (rc) {
                 if (rc) {
                     var rcDetailsArr = {
                         parent_rc_ids: rc.parent_rc_ids,
@@ -4402,7 +4502,7 @@
             }) : [];
             var moreOptions = this.moreOptions;
             var checkContinuousFailedValue = function (details) {
-                var frequencyType = parseInt(details.split('~')[0]);
+                var frequencyType = parseInt(details === null || details === void 0 ? void 0 : details.split('~')[0]);
                 if (frequencyType === 1 || frequencyType === 2 || frequencyType === 3) {
                     return true;
                 }
@@ -4412,7 +4512,7 @@
             };
             var linkedProgramIds = [];
             var linkedCategoryIds = [];
-            (_b = (_a = this.responsibilityForm) === null || _a === void 0 ? void 0 : _a.linkedProgram) === null || _b === void 0 ? void 0 : _b.forEach(function (ele) {
+            (_c = (_b = this.responsibilityForm) === null || _b === void 0 ? void 0 : _b.linkedProgram) === null || _c === void 0 ? void 0 : _c.forEach(function (ele) {
                 var _a, _b, _c;
                 if (((_b = (_a = _this.responsibilityForm) === null || _a === void 0 ? void 0 : _a.program[0]) === null || _b === void 0 ? void 0 : _b.category_id) !== (ele === null || ele === void 0 ? void 0 : ele.category_id)) {
                     var program = {
@@ -4428,20 +4528,20 @@
                 }
             });
             var categoryIdsExceptDefault = [];
-            categoryIdsExceptDefault = (_d = (_c = this.responsibilityForm) === null || _c === void 0 ? void 0 : _c.category) === null || _d === void 0 ? void 0 : _d.filter(function (el) {
+            categoryIdsExceptDefault = (_e = (_d = this.responsibilityForm) === null || _d === void 0 ? void 0 : _d.category) === null || _e === void 0 ? void 0 : _e.filter(function (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)));
             });
-            var remarks = (entrustForm.description.replace(/\&nbsp;/g, '').trim() !== '') ? entrustForm.description : '';
-            var objective = (entrustForm.objective.replace(/\&nbsp;/g, '').trim() !== '') ? entrustForm.objective : '';
+            var remarks = (((_f = entrustForm.description) === null || _f === void 0 ? void 0 : _f.replace(/\&nbsp;/g, '').trim()) !== '') ? entrustForm.description : '';
+            var objective = (((_g = entrustForm.objective) === null || _g === void 0 ? void 0 : _g.replace(/\&nbsp;/g, '').trim()) !== '') ? entrustForm.objective : '';
             var payload = {
                 app_association: [],
-                assigned_to: this.returnIds(entrustForm.assignees.list, 'employee_id').toString(),
-                program_cat_ids: ((_e = entrustForm === null || entrustForm === void 0 ? void 0 : entrustForm.program) === null || _e === void 0 ? void 0 : _e.length) ? [entrustForm.program[0].category_id] : [],
+                assigned_to: entrustForm.responsibility_type == 0 ? this.returnIds(entrustForm.assignees.list, 'employee_id').toString() : "0",
+                program_cat_ids: ((_h = entrustForm === null || entrustForm === void 0 ? void 0 : entrustForm.program) === null || _h === void 0 ? void 0 : _h.length) ? [entrustForm.program[0].category_id] : [],
                 linked_program_ids: linkedProgramIds,
                 linked_category_ids: this.getUniqueIds(__spreadArray(__spreadArray([], __read(categoryIdsExceptDefault)), __read(linkedCategoryIds))),
                 // category_id: (this.responsibilityForm?.program_selected_ids?.length > 0) ? this.responsibilityForm?.category_id : '',
-                category_id: (((_g = (_f = this.responsibilityForm) === null || _f === void 0 ? void 0 : _f.program_selected_ids) === null || _g === void 0 ? void 0 : _g.length) > 0) ? (_j = this.getUniqueIds(__spreadArray(__spreadArray(__spreadArray([], __read((_h = this.responsibilityForm) === null || _h === void 0 ? void 0 : _h.category)), __read(linkedCategoryIds)), [entrustForm.program[0].category_id]))) === null || _j === void 0 ? void 0 : _j.toString() : '',
+                category_id: (((_k = (_j = this.responsibilityForm) === null || _j === void 0 ? void 0 : _j.program_selected_ids) === null || _k === void 0 ? void 0 : _k.length) > 0) ? (_m = this.getUniqueIds(__spreadArray(__spreadArray(__spreadArray([], __read((_l = this.responsibilityForm) === null || _l === void 0 ? void 0 : _l.category)), __read(linkedCategoryIds)), [entrustForm.program[0].category_id]))) === null || _m === void 0 ? void 0 : _m.toString() : '',
                 cc_email: (moreOptions.OVERSEER) ? this.returnIds(entrustForm.overseers.list, 'employee_id').toString() : '',
                 checkpoint_description: (moreOptions.CHECKPOINTS) ? entrustForm.checkpointInstruction : '',
                 checkpoint_details: (moreOptions.CHECKPOINTS) ? JSON.stringify(this.responsibilityForm.checkpoints) : '',
@@ -4450,7 +4550,7 @@
                 comment: '',
                 continuous_failed_days: checkContinuousFailedValue(entrustForm.frequency) ? entrustForm.continuous_failed_days : 0,
                 cost_of_compliance: '',
-                created_by: ((_k = entrustForm.assignors.list) === null || _k === void 0 ? void 0 : _k.length) < 1 ? 0 : this.memberId,
+                created_by: ((_p = (_o = entrustForm.assignors) === null || _o === void 0 ? void 0 : _o.list) === null || _p === void 0 ? void 0 : _p.length) < 1 ? 0 : this.memberId,
                 creation_window: 0,
                 custom_tags: JSON.stringify(entrustForm.customTags),
                 entity_tree: (moreOptions.RC) ? rcDetails : [],
@@ -4459,18 +4559,18 @@
                 failed_time_utc: entrustForm.failed_time_utc,
                 failure_cc_email: (moreOptions.OVERSEER) ? this.returnIds(entrustForm.overseers.notifyList, 'employee_id').toString() : '',
                 frequency_details: entrustForm.frequency,
-                frequency_time: (_l = entrustForm.timeIn24Hr) !== null && _l !== void 0 ? _l : "23:59:00",
+                frequency_time: (_q = entrustForm.timeIn24Hr) !== null && _q !== void 0 ? _q : "23:59:00",
                 grc_object_id: 0,
                 grc_relationship: '',
                 if_testplan_failed: 0,
                 impact: '',
                 isGroupAssignTo: (entrustForm.assignees.whoCanComplete == 'ANY_ONE') ? 1 : 0,
-                is_key_compliance: entrustForm.responsibility.keyResponsibility ? 1 : 0,
+                is_key_compliance: ((_r = entrustForm.responsibility) === null || _r === void 0 ? void 0 : _r.keyResponsibility) ? 1 : 0,
                 library_report_id: 0,
-                lifecycle_details: (_m = entrustForm.lifecycleDetails) !== null && _m !== void 0 ? _m : '0000-00-00~~0',
+                lifecycle_details: (_s = entrustForm.lifecycleDetails) !== null && _s !== void 0 ? _s : '0000-00-00~~0',
                 link_for_details: (moreOptions.FORMATE_EVIDENCE) ? entrustForm.formatAndEvidence.formatLinks : [],
                 linkages: { compliance: [] },
-                member_id: this.returnIds(entrustForm.assignors.list, 'member_id').length > 0 ? this.returnIds(entrustForm.assignors.list, 'member_id')[0] : this.memberId,
+                member_id: ((_u = this.returnIds((_t = entrustForm.assignors) === null || _t === void 0 ? void 0 : _t.list, 'member_id')) === null || _u === void 0 ? void 0 : _u.length) > 0 ? this.returnIds((_v = entrustForm.assignors) === null || _v === void 0 ? void 0 : _v.list, 'member_id')[0] : this.memberId,
                 objective: (moreOptions.OBJECTIVE) ? objective : '',
                 on_completion_of: entrustForm.reportId ? [entrustForm.reportId] : [],
                 on_completion_of_type: 1,
@@ -4483,7 +4583,7 @@
                 reminder_before_days: entrustForm.reminder_before_days,
                 report_format: (moreOptions.FORMATE_EVIDENCE) ? entrustForm.formatAndEvidence.formatFiles : [],
                 report_format_link: '',
-                report_name: entrustForm.responsibility.name,
+                report_name: (entrustForm === null || entrustForm === void 0 ? void 0 : entrustForm.responsibility_type) == '0' ? (_w = entrustForm === null || entrustForm === void 0 ? void 0 : entrustForm.responsibility) === null || _w === void 0 ? void 0 : _w.name : (_x = entrustForm === null || entrustForm === void 0 ? void 0 : entrustForm.systemResponsibilities[0]) === null || _x === void 0 ? void 0 : _x.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,
@@ -4504,7 +4604,7 @@
                 test_required_flag: (moreOptions.ASSURANCE) ? (entrustForm.assuranceList.length > 0 ? 1 : 0) : 0,
                 testplan_category_id: (moreOptions.ASSURANCE) ? this.returnIds(entrustForm.assuranceList, 'category_id') : [],
                 testplan_category_manager: '',
-                audit_category_details: ((_p = (_o = this.responsibilityForm) === null || _o === void 0 ? void 0 : _o.audit_category_details) === null || _p === void 0 ? void 0 : _p.category_id) ? {
+                audit_category_details: ((_z = (_y = this.responsibilityForm) === null || _y === void 0 ? void 0 : _y.audit_category_details) === null || _z === void 0 ? void 0 : _z.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,
@@ -4518,11 +4618,12 @@
                     frequency_time: ''
                 },
                 assessment: {
-                    category_id: moreOptions.ASSESSMENT ? (_q = entrustForm === null || entrustForm === void 0 ? void 0 : entrustForm.assessment) === null || _q === void 0 ? void 0 : _q.category_id : '',
-                    assessment_id: moreOptions.ASSESSMENT ? (_r = entrustForm === null || entrustForm === void 0 ? void 0 : entrustForm.assessment) === null || _r === void 0 ? void 0 : _r.assessment_id : ''
+                    category_id: moreOptions.ASSESSMENT ? (_0 = entrustForm === null || entrustForm === void 0 ? void 0 : entrustForm.assessment) === null || _0 === void 0 ? void 0 : _0.category_id : '',
+                    assessment_id: moreOptions.ASSESSMENT ? (_1 = entrustForm === null || entrustForm === void 0 ? void 0 : entrustForm.assessment) === null || _1 === void 0 ? void 0 : _1.assessment_id : ''
                 },
                 assessment_checkpoint: moreOptions.CHECKPOINTS_NEW ? (Object.keys(entrustForm === null || entrustForm === void 0 ? void 0 : entrustForm.new_checkpoints).length > 0 ? entrustForm === null || entrustForm === void 0 ? void 0 : entrustForm.new_checkpoints : {}) : {},
-                questionnaire_type: moreOptions.CHECKPOINTS_NEW ? (Object.keys(entrustForm === null || entrustForm === void 0 ? void 0 : entrustForm.new_checkpoints).length > 0 ? 'assessment_checkpoint' : (moreOptions.ASSESSMENT && ((_s = entrustForm === null || entrustForm === void 0 ? void 0 : entrustForm.assessment) === null || _s === void 0 ? void 0 : _s.category_id) ? 'assessment' : (JSON.stringify(this.responsibilityForm.checkpoints) != '' && moreOptions.CHECKPOINTS ? 'checkpoint' : ''))) : ''
+                questionnaire_type: moreOptions.CHECKPOINTS_NEW ? (Object.keys(entrustForm === null || entrustForm === void 0 ? void 0 : entrustForm.new_checkpoints).length > 0 ? 'assessment_checkpoint' : (moreOptions.ASSESSMENT && ((_2 = entrustForm === null || entrustForm === void 0 ? void 0 : entrustForm.assessment) === null || _2 === void 0 ? void 0 : _2.category_id) ? 'assessment' : (JSON.stringify(this.responsibilityForm.checkpoints) != '' && moreOptions.CHECKPOINTS ? 'checkpoint' : ''))) : '',
+                linked_system_responsibility: (_3 = this.responsibilityForm) === null || _3 === void 0 ? void 0 : _3.systemResponsibilities.map(function (val) { return val === null || val === void 0 ? void 0 : val._id; }),
             };
             this.responsibilityPayload = payload;
             if (this.mode == 'CREATE' && !this.isDuplicateEntrust) {
@@ -4591,6 +4692,8 @@
                     list: []
                 },
                 frequency: '',
+                responsibility_type: 0,
+                systemResponsibilities: [],
                 description: '',
                 objective: '',
                 rc: [],
@@ -5324,7 +5427,7 @@
     WorkflowComplianceComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'app-workflow-compliance',
-                    template: "<div class=\"workflw-compliance\" *ngIf=\"!showSmiley\">\r\n\r\n    <div *ngIf=\"mode !== 'EDIT'\" class=\"form-group-row \" [class.active]=\"activeSelector === 'assignors'\"\r\n        [class.disabled]=\"activeSelector && activeSelector !== 'assignors' && sideSelectorElements.includes(activeSelector)\">\r\n        <div class=\"left\"\r\n            [class.checked]=\"responsibilityForm?.assignors?.list?.length>0 && activeSelector !== 'assignors'\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/im-creating.svg\" alt=\"im\"\r\n                *ngIf=\"responsibilityForm?.assignors?.list?.length==0 || activeSelector === 'assignors'\">\r\n\r\n            <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\"\r\n                *ngIf=\"responsibilityForm?.assignors?.list?.length>0 && activeSelector !== 'assignors'\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n            <div class=\"vx-form-group\">\r\n                <label class=\"vx-control-panel\">\r\n                    I am creating this responsibility on behalf of someone else\r\n                    <app-cs-switch [ngValue]=\"responsibilityForm.assignors.enable\"\r\n                        (ngValueChange)=\"responsibilityForm.assignors.enable = $event; responsibilityForm.assignors.list = [];\">\r\n                    </app-cs-switch>\r\n                </label>\r\n                <div class=\"select\"\r\n                    *ngIf=\"responsibilityForm?.assignors?.list?.length === 0 || activeSelector === 'assignors'\">\r\n                    <input type=\"text\" (click)=\"activateSelector('assignors',true)\"\r\n                        placeholder=\"Who is responsible for managing this responsibility?\" readonly\r\n                        [disabled]=\"!responsibilityForm?.assignors?.enable\">\r\n                </div>\r\n                <div class=\"selected\"\r\n                    *ngIf=\"responsibilityForm?.assignors?.list?.length > 0 && activeSelector !== 'assignors'\">\r\n                    <div class=\"chip-container\">\r\n                        <span class=\"chip\" *ngFor=\"let b_user of responsibilityForm?.assignors?.list?.slice(0,2)\"><i\r\n                                class=\"icons\" (click)=\"remove('assignors',b_user)\">&#xe90d;</i>\r\n                            {{b_user.member_name}}</span>\r\n                        <button class=\"count\" *ngIf=\"responsibilityForm?.assignors?.list?.length > 2\" type=\"button\"\r\n                            appPopover (click)=\"behalf.popover()\" placement=\"right\">+\r\n                            {{responsibilityForm?.assignors?.list?.slice(2).length}}</button>\r\n                    </div>\r\n                    <button *ngIf=\"activeSelector !== 'assignors'\" class=\"edit\" type=\"button\"\r\n                        (click)=\"activateSelector('assignors',true)\"><i class=\"icons\">&#xe9ba;</i>\r\n                        Edit</button>\r\n                </div>\r\n                <app-popover #behalf [dontCloseonClick]=\"true\">\r\n                    <div class=\"action-list\">\r\n                        <ul class=\"action-item\">\r\n                            <li *ngFor=\"let b_user of responsibilityForm?.assignors?.list | slice: 2; let j = index\">\r\n                                <div class=\"avatar-card\">\r\n                                    <span class=\"value\">\r\n                                        <i class=\"icons\" (click)=\"remove('assignors',b_user)\">&#xe90d;</i>\r\n                                        {{ b_user.member_name }}\r\n                                    </span>\r\n                                </div>\r\n                            </li>\r\n                        </ul>\r\n                    </div>\r\n                </app-popover>\r\n                <p *ngIf=\"invalidType === 'whom'\" [appScrollInView]=\"true\" class=\"error-message\">Please select the\r\n                    person responsible for managing this responsibility.\r\n                </p>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <!-- What -->\r\n\r\n    <div class=\"form-group-row\" [class.active]=\"activeSelector === 'framework'\"\r\n        [class.disabled]=\"activeSelector && activeSelector !== 'responsibilityName' && sideSelectorElements.includes(activeSelector)\">\r\n        <div class=\"left\"\r\n            [class.checked]=\"responsibilityForm?.responsibility?.name.trim() !== '' && !focus.responsibilityName\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/what.svg\" alt=\"im\"\r\n                *ngIf=\"(responsibilityForm?.responsibility?.name.trim() === '') || focus.responsibilityName\">\r\n\r\n            <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\"\r\n                *ngIf=\"responsibilityForm?.responsibility?.name.trim() !== '' && !focus.responsibilityName\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n            <div class=\"vx-form-group\">\r\n                <label class=\"vx-control-panel\">\r\n                    What? <span class=\"required\">*</span>\r\n                    <button *ngIf=\"isFrameworkAvailable && mode !== 'EDIT' && openedFrom !=='RISK_TREATMENT'\"\r\n                        (click)=\"activateSelector('framework',true)\" class=\"button\">Select From A framework</button>\r\n                </label>\r\n                <span *ngIf=\"responsibilityForm?.responsibility?.keyResponsibility\" class=\"indicator\"\r\n                    [appTooltip]=\"'This responsibility is marked as key responsibility.'\" placement=\"bottom\"\r\n                    type=\"black\" delay=\"0\" [tooltipMandatory]=\"true\">\r\n                    <i class=\"icons\">&#xea70;</i>\r\n                </span>\r\n                <input *ngIf=\"responsibilityForm?.responsibility?.name.trim() =='' || !isEditWhat\" type=\"text\"\r\n                    [ngModel]=\"responsibilityForm.responsibility.name\" placeholder=\"What is the responsibility?\"\r\n                    (change)=\"whatChanged($event)\" (focusin)=\"activateSelector('responsibilityName',true)\"\r\n                    (focusout)=\"activeDeselector()\" (clickOutside)=\"testFunction()\" #what>\r\n                <div class=\"selected\" *ngIf=\"responsibilityForm?.responsibility?.name.trim() !='' && isEditWhat\">\r\n                    <div class=\"chip-container\">\r\n                        <span class=\"value\">{{responsibilityForm.responsibility?.name}}</span>\r\n                    </div>\r\n                    <button class=\"edit\" type=\"button\" (click)=\"onEditWhat($event)\"><i class=\"icons\">&#xe9ba;</i>\r\n                        Edit</button>\r\n                </div>\r\n                <p *ngIf=\"invalidType === 'what'\" [appScrollInView]=\"true\" class=\"error-message\">Please enter a name for\r\n                    this responsibility.</p>\r\n                <div class=\"switch-row align-right\">\r\n                    <app-cs-switch [ngValue]=\"responsibilityForm.responsibility?.keyResponsibility\"\r\n                        (ngValueChange)=\"responsibilityForm.responsibility.keyResponsibility = $event\">Key\r\n                        Responsibility\r\n                    </app-cs-switch>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <!-- Who -->\r\n    <div class=\"form-group-row\" [class.active]=\"activeSelector === 'assignees'\"\r\n        [class.disabled]=\"activeSelector && activeSelector !== 'assignees' && sideSelectorElements.includes(activeSelector)\">\r\n        <div class=\"left\"\r\n            [class.checked]=\"responsibilityForm?.assignees?.list?.length>0 && activeSelector !== 'assignees'\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/who.svg\" alt=\"im\"\r\n                *ngIf=\"responsibilityForm?.assignees?.list?.length==0 || activeSelector === 'assignees'\">\r\n\r\n            <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\"\r\n                *ngIf=\"responsibilityForm?.assignees?.list?.length>0 && activeSelector !== 'assignees'\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n            <div class=\"vx-form-group\">\r\n                <label class=\"vx-control-panel\">Who? <span class=\"required\">*</span></label>\r\n\r\n                <div class=\"select\" *ngIf=\"responsibilityForm?.assignees?.list?.length == 0\">\r\n                    <input type=\"text\" (click)=\"activateSelector('assignees',true)\"\r\n                        placeholder=\"Who is responsible for completing the responsibility?\" readonly>\r\n                </div>\r\n                <div class=\"selected\" *ngIf=\"responsibilityForm?.assignees?.list?.length > 0\">\r\n                    <div class=\"chip-container\" [class.more-one]=\"responsibilityForm?.assignees?.length>1\"\r\n                        [class.plus]=\"responsibilityForm?.assignees?.length>2\">\r\n                        <span class=\"chip\" *ngFor=\"let e_user of responsibilityForm?.assignees?.list?.slice(0,2)\"><i\r\n                                class=\"icons\" (click)=\"remove('assignees',e_user)\">&#xe90d;</i>\r\n                            {{e_user.member_name}}</span>\r\n                        <button class=\"count\" *ngIf=\"responsibilityForm?.assignees?.list?.length > 2\" type=\"button\"\r\n                            appPopover (click)=\"assignees.popover()\" placement=\"right\">+\r\n                            {{responsibilityForm?.assignees?.list?.slice(2).length}}</button>\r\n                    </div>\r\n                    <button *ngIf=\"activeSelector !== 'assignees'\" class=\"edit\" type=\"button\"\r\n                        (click)=\"activateSelector('assignees',true)\"><i class=\"icons\">&#xe9ba;</i>\r\n                        Edit</button>\r\n                </div>\r\n                <p *ngIf=\"invalidType === 'who'\" [appScrollInView]=\"true\" class=\"error-message\">Please select the person\r\n                    responsible for completing this responsibility.</p>\r\n                    <ng-container *ngIf=\"!isGroupAssigned\">\r\n                      <app-cs-radio *ngIf=\"mode !== 'EDIT'\"\r\n                          (checkedEvent)=\"responsibilityForm.assignees.whoCanComplete = 'ALL'\"\r\n                          [checked]=\"responsibilityForm.assignees.whoCanComplete == 'ALL'\" [name]=\"'what'\">ALL SELECTED\r\n                          PERSONS NEED TO\r\n                          COMPLETE THIS<i class=\"icons\"\r\n                              [appTooltip]=\"'If selected, separate responsibilities will be created for each person.'\"\r\n                              placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=\"true\">&#xe91f;</i>\r\n                      </app-cs-radio>\r\n                      <app-cs-radio *ngIf=\"mode !== 'EDIT'\"\r\n                          (checkedEvent)=\"responsibilityForm.assignees.whoCanComplete = 'ANY_ONE'\"\r\n                          [checked]=\"responsibilityForm.assignees.whoCanComplete == 'ANY_ONE'\" [name]=\"'what'\">ANY SELECTED\r\n                          PERSON CAN COMPLETE\r\n                          THIS <i class=\"icons\" [appTooltip]=\"'If selected, only one responsibility will be created.'\"\r\n                              placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=\"true\">&#xe91f;</i>\r\n                      </app-cs-radio>\r\n\r\n                      <div class=\"switch-row align-right\" *ngIf=\"mode == 'EDIT'\">\r\n                        <app-cs-switch\r\n                            (ngValueChange)=\"openAssigneeChangeConfirmation($event)\" [ngValue]=\"responsibilityForm.assignees.whoCanComplete == 'ANY_ONE'\"> ANY SELECTED\r\n                            PERSON CAN COMPLETE\r\n                            THIS\r\n                        </app-cs-switch>\r\n                    </div>\r\n                    </ng-container>\r\n                <app-popover #assignees [dontCloseonClick]=\"true\">\r\n                    <div class=\"action-list\">\r\n                        <ul class=\"action-item\">\r\n                            <li *ngFor=\"let e_user of responsibilityForm?.assignees?.list | slice: 2; let j = index\">\r\n                                <div class=\"avatar-card\">\r\n                                    <span class=\"value\">\r\n                                        <i class=\"icons\" (click)=\"remove('assignees',e_user)\">&#xe90d;</i>\r\n                                        {{ e_user.member_name }}\r\n                                    </span>\r\n                                </div>\r\n                            </li>\r\n                        </ul>\r\n                    </div>\r\n                </app-popover>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <!-- When? -->\r\n    <div class=\"form-group-row\" [class.active]=\"activeSelector === 'frequency'\"\r\n        [class.disabled]=\"activeSelector && activeSelector !== 'frequency' && sideSelectorElements.includes(activeSelector)\">\r\n        <div class=\"left\" [class.checked]=\"(!responsibilityForm?.frequency || activeSelector === 'frequency')\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/when.svg\" alt=\"im\"\r\n                *ngIf=\"!responsibilityForm?.frequency || activeSelector === 'frequency'\">\r\n\r\n            <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\"\r\n                *ngIf=\"responsibilityForm?.frequency  && activeSelector !== 'frequency' && responsibilityForm?.frequency != '' && responsibilityForm?.frequency != '5~0~0~0'\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n            <div class=\"vx-form-group\">\r\n                <label class=\"vx-control-panel\">When? <span class=\"required\">*</span></label>\r\n                <div *ngIf=\"responsibilityForm?.frequency == '' || responsibilityForm?.frequency == '5~0~0~0'\"\r\n                    class=\"select button-sec\">\r\n                    <input type=\"text\" (click)=\"activateSelector('frequency',true)\" [placeholder]=\"frequencyPlaceholder\"\r\n                        readonly>\r\n                    <button (click)=\"activateSelector('frequency',true)\" type=\"button\">Set A frequency</button>\r\n                </div>\r\n                <div *ngIf=\"responsibilityForm?.frequency != '' && responsibilityForm?.frequency !== '5~0~0~0'\"\r\n                    class=\"selected button-sec\">\r\n                    <span class=\"chip\">{{frequencyPlaceholder}}</span>\r\n                    <button *ngIf=\"activeSelector !== 'frequency'\" type=\"button\" class=\"edit\"\r\n                        (click)=\"activateSelector('frequency',true)\">\r\n                        <i class=\"icons\">&#xe9ba;</i>Edit\r\n                    </button>\r\n                </div>\r\n                <p *ngIf=\"invalidType === 'when'\" [appScrollInView]=\"true\" class=\"error-message\">Please select the\r\n                    frequency of occurrence for this responsibility.</p>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <!-- Notes -->\r\n    <div class=\"form-group-row\" [class.active]=\"activeSelector === 'notes'\"\r\n        [class.disabled]=\"activeSelector && activeSelector !== 'notes' && sideSelectorElements.includes(activeSelector)\">\r\n        <div class=\"left\"\r\n            [class.checked]=\"checkBlank(responsibilityForm?.description).trim() !== '' && !focus.description\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/notes.svg\" alt=\"im\"\r\n                *ngIf=\"(checkBlank(responsibilityForm?.description).trim() === '') || focus.description\">\r\n\r\n            <svg class=\"checkIcon\"\r\n                *ngIf=\"checkBlank(responsibilityForm?.description).trim() !== '' && !focus.description\"\r\n                xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n            <div class=\"vx-form-group\">\r\n                <label class=\"vx-control-panel\">Notes</label>\r\n                <marx-editor [(ngModel)]=\"responsibilityForm.description\" [editorConfig]=\"{mode: 'prime',\r\n                colorPalette: true,\r\n                link: true,\r\n                id:'notes',\r\n                placeholder: 'Add more information about completing the responsibility'}\"></marx-editor>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <!-- Objective -->\r\n    <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.OBJECTIVE\"\r\n        [attr.id]=\"'OBJECTIVE'\" [class.active]=\"activeSelector === 'objective'\"\r\n        [class.disabled]=\"activeSelector && activeSelector !== 'objective' && sideSelectorElements.includes(activeSelector)\">\r\n        <div class=\"left\" [class.checked]=\"checkBlank(responsibilityForm?.objective).trim() !=='' && !focus.objective\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/objectives.svg\" alt=\"im\"\r\n                *ngIf=\"(checkBlank(responsibilityForm?.objective).trim() === '') || focus.objective\">\r\n\r\n            <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\"\r\n                *ngIf=\"(checkBlank(responsibilityForm?.objective).trim()  !== '') && !focus.objective\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n            <div class=\"vx-form-group\">\r\n                <label class=\"vx-control-panel\">Objective</label>\r\n                <marx-editor [(ngModel)]=\"responsibilityForm.objective\" [editorConfig]=\"{mode: 'prime',\r\n                colorPalette: true,\r\n                id:'objective',\r\n                link: true,\r\n                placeholder: 'This option lets you specify an objective for the responsibility.'}\"></marx-editor>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <!-- Responsibility Center -->\r\n    <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.RC\" [attr.id]=\"'RC'\"\r\n        [class.active]=\"activeSelector === 'rc'\"\r\n        [class.disabled]=\"activeSelector && activeSelector !== 'rc' && sideSelectorElements.includes(activeSelector)\">\r\n        <div class=\"left\" [class.checked]=\"responsibilityForm?.rc?.length>0 && activeSelector !== 'rc'\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/responsibility-center.svg\"\r\n                alt=\"\" *ngIf=\"responsibilityForm?.rc?.length==0 || activeSelector === 'rc'\">\r\n\r\n            <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\"\r\n                *ngIf=\"responsibilityForm?.rc?.length>0 && activeSelector !== 'rc'\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n            <div class=\"vx-form-group\">\r\n                <label class=\"vx-control-panel\">Responsibility Center </label>\r\n                <div class=\"select\" *ngIf=\"responsibilityForm?.rc?.length === 0\">\r\n                    <div class=\"custom-input\" (click)=\"activateSelector('rc',true)\"\r\n                        aria-placeholder=\"Select the responsibility center or the responsibility centers for this responsibility.\">\r\n                    </div>\r\n                    <!-- <input type=\"text\" (click)=\"activateSelector('rc',true)\" placeholder=\"Select Responsibility Center(s)\" readonly> -->\r\n                </div>\r\n                <div class=\"selected\" *ngIf=\"responsibilityForm?.rc?.length > 0\"\r\n                    [class.readOnly]=\"openedFrom === 'RISK_TREATMENT'\">\r\n                    <div class=\"chip-container\" [class.more-one]=\"responsibilityForm?.rc?.length>1\"\r\n                        [class.plus]=\"responsibilityForm?.rc?.length>2\">\r\n                        <span class=\"chip\" *ngFor=\"let rc of responsibilityForm?.rc?.slice(0,2)\"><i class=\"icons\"\r\n                                (click)=\"remove('rc',rc)\" *ngIf=\"openedFrom !== 'RISK_TREATMENT'\">&#xe90d;</i>\r\n                            {{rc?.item_name}}</span>\r\n                        <button class=\"count\" *ngIf=\"responsibilityForm?.rc?.length > 2\" type=\"button\" appPopover\r\n                            (click)=\"rc.popover()\" placement=\"right\" placement=\"right\">+\r\n                            {{responsibilityForm?.rc?.slice(2).length}}</button>\r\n                    </div>\r\n                    <button *ngIf=\"activeSelector !== 'rc' && openedFrom !== 'RISK_TREATMENT'\" class=\"edit\"\r\n                        type=\"button\" (click)=\"activateSelector('rc',true)\"><i class=\"icons\">&#xe9ba;</i>\r\n                        Edit</button>\r\n                </div>\r\n                <app-popover #rc [dontCloseonClick]=\"true\">\r\n                    <div class=\"action-list\">\r\n                        <ul class=\"action-item\">\r\n                            <li *ngFor=\"let rc of responsibilityForm?.rc | slice: 2; let j = index\">\r\n                                <div class=\"avatar-card\">\r\n                                    <span class=\"value\">\r\n                                        <i class=\"icons\" (click)=\"remove('rc',rc)\">&#xe90d;</i>\r\n                                        {{ rc.item_name }}\r\n                                    </span>\r\n                                </div>\r\n                            </li>\r\n                        </ul>\r\n                    </div>\r\n                </app-popover>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <!-- Program -->\r\n    <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.PROGRAM\" [attr.id]=\"'PROGRAM'\" [class.active]=\"activeSelector === 'program'\" [class.disabled]=\"activeSelector && activeSelector !== 'program' && sideSelectorElements.includes(activeSelector)\">\r\n        <div class=\"left\" [class.checked]=\"responsibilityForm?.program?.length>0 && activeSelector !== 'program'\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/category.svg\" alt=\"\" *ngIf=\"responsibilityForm?.program?.length==0 || activeSelector === 'program'\">\r\n\r\n            <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\"\r\n                *ngIf=\"responsibilityForm?.program?.length>0 && activeSelector !== 'program'\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n                <div class=\"vx-form-group\">\r\n                        <label class=\"vx-control-panel\">Program</label>\r\n                        <div class=\"select\" *ngIf=\"responsibilityForm?.program?.length ==0\">\r\n                            <div class=\"custom-input\" (click)=\"activateSelector('program',true)\" aria-placeholder=\"Select the Program or Program Categories that this responsibility relates to.\"></div>\r\n                            <!-- <input type=\"text\" (click)=\"activateSelector('program',true)\" placeholder=\"Select Responsibility program(s)\" readonly> -->\r\n                        </div>\r\n                        <div class=\"selected\" *ngIf=\"responsibilityForm?.program?.length > 0\">\r\n                            <div class=\"chip-container\" [class.more-one]=\"responsibilityForm?.program?.length>1\" [class.plus]=\"responsibilityForm?.program?.length>2\">\r\n                                <span class=\"chip\" *ngFor=\"let program of responsibilityForm?.program\"><i class=\"icons\" *ngIf=\"false\" (click)=\"remove('program',program)\">&#xe90d;</i> {{program?.name??'--'}}</span>\r\n                                <!-- <button *ngIf=\"responsibilityForm?.program?.length > 2\" class=\"count\" type=\"button\" appPopover (click)=\"program.popover()\" placement=\"right\">+ {{responsibilityForm?.program?.slice(2).length}}</button> -->\r\n                                <button *ngIf=\"responsibilityForm?.linkedProgram?.length > 1\" class=\"count\" type=\"button\" appPopover (click)=\"program.popover()\" placement=\"right\">+ {{responsibilityForm?.linkedProgram?.length - 1}}</button>\r\n                            </div>\r\n                            <button *ngIf=\"activeSelector !== 'program' && !hiddenList.includes('PROGRAM')\" class=\"edit\" type=\"button\" (click)=\"activateSelector('program',true)\"><i class=\"icons\">&#xe9ba;</i> Edit</button>\r\n                        </div>\r\n                    <app-popover #program [dontCloseonClick]=\"true\">\r\n                        <div class=\"action-list\">\r\n                            <ul class=\"action-item\">\r\n                                <li class=\"multiple-program\">\r\n                                <div class=\"avatar-card\">\r\n                                    <span class=\"value\" [appTooltip]=\"responsibilityForm?.program[0]?.name\" placement=\"bottom\"\r\n                                    type=\"black\" delay=\"0\" [tooltipMandatory]=\"false\">\r\n                                    <!-- <i class=\"icons\">&#xe90d;</i> -->\r\n                                    {{responsibilityForm?.program[0]?.name}}\r\n                                    </span>\r\n                                    <div class=\"primary-label\">PRIMARY</div>\r\n                                </div>\r\n                                </li>\r\n                                <li *ngFor=\"let program of responsibilityForm?.linkedProgram; let j = index\">\r\n                                    <div class=\"avatar-card\" *ngIf=\"program?.category_id !== responsibilityForm?.program[0]?.category_id\">\r\n                                        <span class=\"value\" [appTooltip]=\"program?.name\" placement=\"bottom\"\r\n                                        type=\"black\" delay=\"0\" [tooltipMandatory]=\"false\">\r\n                                            <i *ngIf=\"!hiddenList?.includes('PROGRAM') && !program?.isViewOnlyProgram\" class=\"icons\" (click)=\"remove('program',program)\">&#xe90d;</i>\r\n                                            {{ program?.name }}\r\n                                        </span>\r\n                                    </div>\r\n                                </li>\r\n                            </ul>\r\n                        </div>\r\n                    </app-popover>\r\n                    <div *ngIf=\"responsibilityForm?.customTags?.length >0\">\r\n                        <ng-container *ngFor=\" let tag of responsibilityForm?.customTags\">\r\n                            <label class=\"vx-control-panel\">{{tag.tag_name}}</label>\r\n                            <input type=\"text\" [(ngModel)]=\"tag.value\" placeholder=\"{{tag.tag_name}}\">\r\n                        </ng-container>\r\n                    </div>\r\n                </div>\r\n        </div>\r\n    </div>\r\n    <!-- Responsibility Category -->\r\n    <!-- <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.CATEGORY\" [attr.id]=\"'CATEGORY'\"\r\n        [class.active]=\"activeSelector === 'category'\"\r\n        [class.disabled]=\"activeSelector && activeSelector !== 'category' && sideSelectorElements.includes(activeSelector)\">\r\n        <div class=\"left\" [class.checked]=\"responsibilityForm?.category?.length>0 && activeSelector !== 'category'\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/category.svg\" alt=\"\"\r\n                *ngIf=\"responsibilityForm?.category?.length==0 || activeSelector === 'category'\">\r\n\r\n            <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\"\r\n                *ngIf=\"responsibilityForm?.category?.length>0 && activeSelector !== 'category'\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n            <div class=\"vx-form-group\">\r\n                <label class=\"vx-control-panel\">Responsibility Category </label>\r\n                <div class=\"select\" *ngIf=\"responsibilityForm?.category?.length ==0\">\r\n                    <div class=\"custom-input\" (click)=\"activateSelector('category',true)\"\r\n                        aria-placeholder=\"Select the responsibility category or categories that this responsibility relates to.\">\r\n                    </div>\r\n                </div>\r\n                <div class=\"selected\" *ngIf=\"responsibilityForm?.category?.length > 0\">\r\n                    <div class=\"chip-container\" [class.more-one]=\"responsibilityForm?.category?.length>1\"\r\n                        [class.plus]=\"responsibilityForm?.category?.length>2\">\r\n                        <span class=\"chip\" *ngFor=\"let category of responsibilityForm?.category?.slice(0,2)\"><i\r\n                                class=\"icons\" (click)=\"remove('category',category)\">&#xe90d;</i>\r\n                            {{category.item_name}}</span>\r\n                        <button class=\"count\" *ngIf=\"responsibilityForm?.category?.length > 2\" type=\"button\" appPopover\r\n                            (click)=\"category.popover()\" placement=\"right\">+\r\n                            {{responsibilityForm?.category?.slice(2).length}}</button>\r\n                    </div>\r\n                    <button *ngIf=\"activeSelector !== 'category'\" class=\"edit\" type=\"button\"\r\n                        (click)=\"activateSelector('category',true)\"><i class=\"icons\">&#xe9ba;</i>\r\n                        Edit</button>\r\n                </div>\r\n                <app-popover #category [dontCloseonClick]=\"true\">\r\n                    <div class=\"action-list\">\r\n                        <ul class=\"action-item\">\r\n                            <li *ngFor=\"let category of responsibilityForm?.category | slice: 2; let j = index\">\r\n                                <div class=\"avatar-card\">\r\n                                    <span class=\"value\">\r\n                                        <i class=\"icons\" (click)=\"remove('category',category)\">&#xe90d;</i>\r\n                                        {{ category.item_name }}\r\n                                    </span>\r\n                                </div>\r\n                            </li>\r\n                        </ul>\r\n                    </div>\r\n                </app-popover>\r\n                <div *ngIf=\"responsibilityForm?.customTags?.length >0\">\r\n                    <ng-container *ngFor=\" let tag of responsibilityForm?.customTags\">\r\n                        <label class=\"vx-control-panel\">{{tag.tag_name}}</label>\r\n                        <input type=\"text\" [(ngModel)]=\"tag.value\" placeholder=\"{{tag.tag_name}}\">\r\n                    </ng-container>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div> -->\r\n\r\n    <!-- Format & Evidence -->\r\n    <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.FORMATE_EVIDENCE\"\r\n        [attr.id]=\"'FORMATE_EVIDENCE'\" [class.active]=\"activeSelector === 'formate_evidence'\"\r\n        [class.disabled]=\"activeSelector && activeSelector !== 'formate_evidence' && sideSelectorElements.includes(activeSelector)\">\r\n        <div class=\"left\" [class.checked]=\"false\">\r\n            <img *ngIf=\"this.responsibilityForm.formatAndEvidence.evidenceRequired == false && this.responsibilityForm.formatAndEvidence.formatFiles.length == 0 && this.responsibilityForm.formatAndEvidence.formatLinks?.length == 0\"\r\n                src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/format-evidence.svg\" alt=\"im\">\r\n\r\n            <svg *ngIf=\"this.responsibilityForm.formatAndEvidence.evidenceRequired || this.responsibilityForm.formatAndEvidence.formatFiles.length || this.responsibilityForm.formatAndEvidence.formatLinks?.length\"\r\n                class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n            <app-format-and-evidence (updateFiles)=\"saveSelectedList('formate_evidence',$event)\"\r\n                [mode]=\"'responsibility'\" [formatEvidanceData]=\"responsibilityForm?.formatAndEvidence\">\r\n            </app-format-and-evidence>\r\n        </div>\r\n\r\n    </div>\r\n    <!-- Assessment -->\r\n    <div *ngIf=\"moreOptions?.ASSESSMENT\" [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\"\r\n        [attr.id]=\"'ASSESSMENT'\" [class.active]=\"false\" [class.disabled]=\"false\">\r\n        <div class=\"left\" [class.checked]=\"responsibilityForm.assessment?.assessment_id\">\r\n            <img *ngIf=\"!responsibilityForm.assessment?.assessment_id\"\r\n                src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/assessments.svg\" alt=\"im\">\r\n\r\n            <svg *ngIf=\"responsibilityForm.assessment?.assessment_id\" class=\"checkIcon\"\r\n                xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n            <div class=\"vx-form-group\">\r\n                <label class=\"vx-control-panel\">ASSESSMENTS</label>\r\n                <div *ngIf=\"!responsibilityForm.assessment?.assessment_id\" class=\"select\">\r\n                    <input type=\"text\" (click)=\"activateSelector('isAssessment',true);isAssessment = true\"\r\n                        placeholder=\"Select an assessment for this responsibility\"\r\n                        [disabled]=\"responsibilityForm.checkpoints?.length\" readonly>\r\n                </div>\r\n                <div class=\"selected\" *ngIf=\"responsibilityForm.assessment?.assessment_id\">\r\n                    <div class=\"chip-container\" [class.more-one]=\"false\" [class.plus]=\"false\">\r\n                        <span class=\"chip with-question\">\r\n                            <span class=\"value\"\r\n                                [appTooltip]=\"responsibilityForm.assessment?.assessmentDetails?.assessment_name\"\r\n                                placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\"><i\r\n                                    class=\"icons\"\r\n                                    (click)=\"remove('assessment',category)\">&#xe90d;</i>{{responsibilityForm.assessment?.assessmentDetails?.assessment_name}}</span>\r\n                            <span class=\"label\">{{responsibilityForm.assessment?.assessmentDetails?.questions}}\r\n                                {{responsibilityForm.assessment?.assessmentDetails?.questions > 1 ? 'Questions':\r\n                                'Question'}}</span>\r\n                        </span>\r\n                    </div>\r\n                    <button (click)=\"activateSelector('isAssessment',true);isAssessment = true\" class=\"edit\"\r\n                        type=\"button\">\r\n                        <i class=\"icons\">&#xe9ba;</i> Edit\r\n                    </button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n    </div>\r\n    <!-- Checkpoints -->\r\n    <!-- *ngIf=\"moreOptions.checkpoints\" -->\r\n    <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.CHECKPOINTS\"\r\n        [attr.id]=\"'CHECKPOINTS'\" [class.active]=\"activeSelector === 'checkpoints'\"\r\n        [class.disabled]=\"activeSelector && activeSelector !== 'checkpoints' && sideSelectorElements.includes(activeSelector)\">\r\n        <div class=\"left\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/checkpoints.svg\" alt=\"im\"\r\n                *ngIf=\"responsibilityForm?.checkpoints?.length==0 || activeSelector === 'checkpoints'\">\r\n\r\n            <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\"\r\n                *ngIf=\"responsibilityForm?.checkpoints?.length>0 && activeSelector !== 'checkpoints'\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n            <div class=\"vx-form-group\">\r\n                <label class=\"vx-control-panel\">\r\n                    <!-- {{responsibilityForm.checkpoints|json}}\r\n                  {{responsibilityForm.checkpointInstruction}} -->\r\n\r\n                    Checkpoints\r\n                    <!-- <button *ngIf=\"responsibilityForm?.checkpoints?.length === 0\" class=\"button\"\r\n                        (click)=\"activateSelector('checkpoints',true)\">+ Add Checkpoints</button> -->\r\n                </label>\r\n                <div class=\"select button-sec\" *ngIf=\"responsibilityForm?.checkpoints?.length === 0\">\r\n                    <input [disabled]=\"!responsibilityForm.checkpoints?.length\" type=\"text\"\r\n                        (click)=\"activateSelector('checkpoints',true)\"\r\n                        placeholder=\"Add checkpoints for this responsibility\" readonly>\r\n                    <button [disabled]=\"!responsibilityForm.checkpoints?.length\"\r\n                        (click)=\"activateSelector('checkpoints',true)\" type=\"button\">Add Checkpoints</button>\r\n                </div>\r\n                <div class=\"selected\" *ngIf=\"responsibilityForm.checkpoints?.length > 0\">\r\n                    <div class=\"chip-container checkpoints\" [class.more-one]=\"responsibilityForm.checkpoints?.length>1\"\r\n                        [class.plus]=\"responsibilityForm.checkpoints?.length>2\">\r\n                        <span class=\"chip\" *ngFor=\"let checkpoint of responsibilityForm.checkpoints?.slice(0,1)\">\r\n                            {{checkpoint?.label}}</span>\r\n                        <button class=\"count\" *ngIf=\"responsibilityForm.checkpoints?.length > 1\" type=\"button\"\r\n                            appPopover (click)=\"checkpoint.popover()\" placement=\"right\">+\r\n                            {{responsibilityForm.checkpoints?.length- 1}}</button>\r\n                    </div>\r\n                    <button *ngIf=\"activeSelector !== 'checkpoints'\" class=\"edit\" type=\"button\"\r\n                        (click)=\"activateSelector('checkpoints',true)\">\r\n                        <i class=\"icons\">&#xe9ba;</i> Edit\r\n                    </button>\r\n                </div>\r\n            </div>\r\n            <div *ngIf=\"this.responsibilityForm.checkpoints?.length\" class=\"assessment-text\">\r\n                <i class=\"icons alert-icon\">&#xe930;</i>\r\n                <span>You can now use the new <strong>Checkpoints </strong>or <strong>Assessments</strong> feature\r\n                    instead of the old checkpoints functionality to create analytical questions. <button\r\n                        class=\"remove-btn\" (click)=\"onRemoveCheckpoints('checkpoint')\">Remove Checkpoints</button> to\r\n                    continue.</span>\r\n            </div>\r\n            <app-popover #checkpoint [dontCloseonClick]=\"true\">\r\n                <div class=\"action-list\">\r\n                    <ul class=\"action-item\">\r\n                        <li *ngFor=\"let checkpoint of responsibilityForm.checkpoints | slice: 1; let j = index\">\r\n                            <div class=\"avatar-card\">\r\n                                <span class=\"value\">\r\n                                    {{ checkpoint?.label }}\r\n                                </span>\r\n                            </div>\r\n                        </li>\r\n                    </ul>\r\n                </div>\r\n            </app-popover>\r\n        </div>\r\n    </div>\r\n    <!-- New  Checkpoints -->\r\n    <!-- *ngIf=\"moreOptions.checkpoints\" -->\r\n    <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.CHECKPOINTS_NEW\"\r\n        [attr.id]=\"'CHECKPOINTS-NEW'\" [class.active]=\"activeSelector === 'checkpoints-new'\">\r\n        <div class=\"left\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/checkpoints.svg\" alt=\"im\"\r\n                *ngIf=\"responsibilityForm?.checkpoints?.length==0 || activeSelector === 'checkpoints'\">\r\n\r\n            <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\"\r\n                *ngIf=\"checkpointCount > 0 && activeSelector !== 'checkpoints'\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n            <div class=\"vx-form-group\">\r\n                <label class=\"vx-control-panel\">\r\n                    <!-- {{responsibilityForm.checkpoints|json}}\r\n                  {{responsibilityForm.checkpointInstruction}} -->\r\n\r\n                    Checkpoints\r\n                    <!-- <span class=\"checkpoint-version\"> V2.0</span> -->\r\n                    <!-- <button  class=\"button\"\r\n                        (click)=\"activateSelector('checkpoints-new',true)\">+ Add Checkpoints</button> -->\r\n                </label>\r\n                <div class=\"select button-sec\" *ngIf=\"checkpointCount === 0\">\r\n                    <input type=\"text\" (click)=\"activateSelector('checkpoints-new',true)\"\r\n                        placeholder=\"Add checkpoints for this responsibility\" readonly>\r\n                    <button (click)=\"activateSelector('checkpoints-new',true)\" type=\"button\">Add Checkpoints</button>\r\n                </div>\r\n                <div class=\"selected\" *ngIf=\"checkpointCount > 0\">\r\n                    <div class=\"chip-container checkpoints\" [class.more-one]=\"checkpointCount > 0\">\r\n                        <span class=\"chip\">\r\n                            <i class=\"icons\" (click)=\"onRemoveCheckpoints('new-checkpoints')\">&#xe90d;</i>\r\n                            {{checkpointCount}} {{checkpointCount > 1 ? 'Questions': 'Question'}}</span>\r\n                    </div>\r\n                    <button *ngIf=\"activeSelector !== 'checkpoints-new'\" class=\"edit\" type=\"button\"\r\n                        (click)=\"activateSelector('checkpoints-new',true)\">\r\n                        <i class=\"icons\">&#xe9ba;</i> Edit\r\n                    </button>\r\n                </div>\r\n            </div>\r\n            <app-popover #checkpoint [dontCloseonClick]=\"true\">\r\n                <div class=\"action-list\">\r\n                    <ul class=\"action-item\">\r\n                        <li *ngFor=\"let checkpoint of responsibilityForm.checkpoints | slice: 1; let j = index\">\r\n                            <div class=\"avatar-card\">\r\n                                <span class=\"value\">\r\n                                    {{ checkpoint?.label }}\r\n                                </span>\r\n                            </div>\r\n                        </li>\r\n                    </ul>\r\n                </div>\r\n            </app-popover>\r\n        </div>\r\n    </div>\r\n    <!-- Risk Classification -->\r\n    <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.RISK_CLASSIFICATION\"\r\n        [attr.id]=\"'RISK_CLASSIFICATION'\" [class.active]=\"activeSelector === 'riskCalculator'\"\r\n        [class.disabled]=\"activeSelector && activeSelector !== 'riskCalculator' && sideSelectorElements.includes(activeSelector)\">\r\n        <div class=\"left\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/risks.svg\" alt=\"im\">\r\n\r\n            <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n            <div class=\"vx-form-group\">\r\n                <label class=\"vx-control-panel\">\r\n                    Risk Classification\r\n                    <button (click)=\"activateSelector('riskCalculator',true)\" class=\"button\">+ Risk Calculator</button>\r\n                </label>\r\n\r\n                <div class=\"classification\">\r\n                    <label class=\"low\" *ngFor=\"let risk of riskClassification\" [ngClass]=\"[risk.class]\">\r\n                        <input type=\"radio\" name=\"classification\" [(ngModel)]=\"responsibilityForm.riskClass\"\r\n                            [value]=\"risk?.value\">\r\n                        <span>{{risk?.name}}</span>\r\n                    </label>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <!-- Reviewer -->\r\n    <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.REVIEWER\" [attr.id]=\"'REVIEWER'\"\r\n        [class.active]=\"activeSelector === 'reviewerFrequency'\"\r\n        [class.disabled]=\"activeSelector && activeSelector !== 'reviewer' && sideSelectorElements.includes(activeSelector)\">\r\n        <div class=\"left\" [class.checked]=\"false\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/reviewer.svg\" alt=\"\"\r\n                *ngIf=\"responsibilityForm?.reviewers?.list?.length==0 || activeSelector === 'reviewer'\">\r\n\r\n            <svg *ngIf=\"responsibilityForm?.reviewers?.list?.length>0 && activeSelector !== 'reviewer'\"\r\n                class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n            <div class=\"vx-form-group\">\r\n                <label class=\"vx-control-panel\">Reviewer</label>\r\n                <div class=\"select\" *ngIf=\"responsibilityForm?.reviewers?.list?.length == 0\">\r\n                    <input type=\"text\" (click)=\"activateSelector('reviewer',true)\" placeholder=\"Select Reviewer\"\r\n                        readonly>\r\n                </div>\r\n                <div class=\"selected\" *ngIf=\"responsibilityForm?.reviewers?.list?.length > 0\">\r\n                    <div class=\"chip-container\" [class.more-one]=\"responsibilityForm?.reviewers?.list?.length>1\"\r\n                        [class.plus]=\"responsibilityForm?.reviewers?.list?.length>2\">\r\n                        <span class=\"chip\" *ngFor=\"let reviewer of responsibilityForm?.reviewers?.list?.slice(0,2)\"><i\r\n                                class=\"icons\" (click)=\"remove('reviewer',reviewer)\">&#xe90d;</i>\r\n                            {{reviewer.member_name}}</span>\r\n                        <button class=\"count\" *ngIf=\"responsibilityForm?.reviewers?.list?.length > 2\" type=\"button\"\r\n                            appPopover (click)=\"reviewer.popover()\" placement=\"right\">+\r\n                            {{responsibilityForm?.reviewers?.list?.slice(2).length}}</button>\r\n                    </div>\r\n                    <button *ngIf=\"activeSelector !== 'reviewer'\" class=\"edit\" type=\"button\"\r\n                        (click)=\"activateSelector('reviewer',true)\"><i class=\"icons\">&#xe9ba;</i>\r\n                        Edit</button>\r\n                </div>\r\n                <app-cs-radio\r\n\r\n                    [checked]=\"responsibilityForm.reviewers.sequentialWorkflow\" [name]=\"'reviewer'\" (checkedEvent)=\"onReviewerWorkflowChange('sequential')\">\r\n                    SEQUENTIAL<i class=\"icons\"\r\n                        [appTooltip]=\"'The responsibility will be sent for review one at a time in the sequence defined by you.'\"\r\n                        placement=\"bottom-right\" delay=\"0\" type=\"white\" [tooltipMandatory]=\"true\">&#xe91f;</i>\r\n                </app-cs-radio>\r\n                <app-cs-radio\r\n                    [checked]=\"!responsibilityForm.reviewers.sequentialWorkflow\" [name]=\"'reviewer'\" (checkedEvent)=\"onReviewerWorkflowChange('anyReviewer')\">\r\n                    ANY REVIEWER CAN MARK THIS AS REVIEWED<i class=\"icons\"\r\n                        [appTooltip]=\"'The responsibility will be sent for review to all reviewers at the same time. If anyone of the reviewer reviews the responsibility, it will be considered as reviewed.'\"\r\n                        placement=\"bottom-right\" delay=\"0\" type=\"white\" [tooltipMandatory]=\"true\">&#xe91f;</i>\r\n                </app-cs-radio>\r\n                <app-popover #reviewer [dontCloseonClick]=\"true\">\r\n                    <div class=\"action-list\">\r\n                        <ul class=\"action-item\">\r\n                            <li *ngFor=\"let reviewer of responsibilityForm?.reviewers?.list | slice: 2; let j = index\">\r\n                                <div class=\"avatar-card\">\r\n                                    <span class=\"value\">\r\n                                        <i class=\"icons\" (click)=\"remove('reviewer',reviewer)\">&#xe90d;</i>\r\n                                        {{ reviewer.member_name }}\r\n                                    </span>\r\n                                </div>\r\n                            </li>\r\n                        </ul>\r\n                    </div>\r\n                </app-popover>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <!-- Overseer -->\r\n    <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.OVERSEER\" [attr.id]=\"'OVERSEER'\"\r\n        [class.active]=\" activeSelector === 'overseerNotify' ||  activeSelector === 'overseer'\"\r\n        [class.disabled]=\"activeSelector &&  !['overseerNotify','overseerNotify'].includes(activeSelector) && sideSelectorElements.includes(activeSelector)\">\r\n        <div class=\"left\" [class.checked]=\"false\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/oversight.svg\" alt=\"\"\r\n                *ngIf=\"(responsibilityForm?.overseers?.list?.length==0 && responsibilityForm?.overseers?.notifyList?.length == 0)|| activeSelector === 'overseerNotify' ||  activeSelector === 'overseer'\">\r\n            <svg class=\"checkIcon\" *ngIf=\"(responsibilityForm?.overseers?.list?.length>0 || responsibilityForm?.overseers?.notifyList?.length>0)\r\n                && !( activeSelector === 'overseerNotify' ||  activeSelector === 'overseer')\"\r\n                xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n            <div class=\"vx-form-group\">\r\n                <label class=\"vx-control-panel\">Overseer </label>\r\n                <div class=\"select\" *ngIf=\"responsibilityForm?.overseers?.list?.length == 0\">\r\n                    <input type=\"text\" (click)=\"activateSelector('overseer',true)\"\r\n                        placeholder=\"Who should have oversight of the responsibility?\" readonly>\r\n                </div>\r\n                <div class=\"selected\" *ngIf=\"responsibilityForm?.overseers?.list?.length > 0\">\r\n                    <div class=\"chip-container\" [class.more-one]=\"responsibilityForm?.overseers?.list?.length>1\"\r\n                        [class.plus]=\"responsibilityForm?.overseers?.list?.length>2\">\r\n                        <span class=\"chip\" *ngFor=\"let overseer of responsibilityForm?.overseers?.list?.slice(0,2)\"><i\r\n                                class=\"icons\" (click)=\"remove('overseer',overseer)\">&#xe90d;</i>\r\n                            {{overseer.member_name}}</span>\r\n                        <button class=\"count\" *ngIf=\"responsibilityForm?.overseers?.list?.length > 2\" type=\"button\"\r\n                            appPopover (click)=\"overseers.popover()\" placement=\"right\">+\r\n                            {{responsibilityForm?.overseers?.list?.slice(2).length}}</button>\r\n                    </div>\r\n                    <button *ngIf=\"activeSelector !== 'overseer'\" class=\"edit\" type=\"button\"\r\n                        (click)=\"activateSelector('overseer',true)\"><i class=\"icons\">&#xe9ba;</i>\r\n                        Edit</button>\r\n                </div>\r\n\r\n                <div class=\"select\" *ngIf=\"responsibilityForm?.overseers?.notifyList?.length == 0\">\r\n                    <input type=\"text\" (click)=\"activateSelector('overseerNotify',true)\"\r\n                        placeholder=\"Who should be notified if the responsibility is not complet...\" readonly\r\n                        [appTooltip]=\"'Who should be notified if the responsibility is not completed?'\"\r\n                        placement=\"bottom\" delay=\"0\" [tooltipMandatory]=\"true\">\r\n                </div>\r\n                <div class=\"selected\" *ngIf=\"responsibilityForm?.overseers?.notifyList?.length > 0\">\r\n                    <div class=\"chip-container\" [class.more-one]=\"responsibilityForm?.overseers?.notifyList?.length>1\"\r\n                        [class.plus]=\"responsibilityForm?.overseers?.notifyList?.length>2\">\r\n                        <span class=\"chip\"\r\n                            *ngFor=\"let overseer of responsibilityForm?.overseers?.notifyList?.slice(0,2)\"><i\r\n                                class=\"icons\" (click)=\"remove('overseerNotifyList',overseer)\">&#xe90d;</i>\r\n                            {{overseer.member_name}}</span>\r\n                        <button class=\"count\" *ngIf=\"responsibilityForm?.overseers?.notifyList?.length > 2\"\r\n                            type=\"button\" appPopover (click)=\"notify.popover()\" placement=\"right\">+\r\n                            {{responsibilityForm?.overseers?.notifyList?.slice(2).length}}</button>\r\n                    </div>\r\n                    <button *ngIf=\"activeSelector !== 'overseerNotify'\" class=\"edit\" type=\"button\"\r\n                        (click)=\"activateSelector('overseerNotify',true)\"><i class=\"icons\">&#xe9ba;</i>\r\n                        Edit</button>\r\n                </div>\r\n                <app-popover #overseers [dontCloseonClick]=\"true\">\r\n                    <div class=\"action-list\">\r\n                        <ul class=\"action-item\">\r\n                            <li *ngFor=\"let overseer of responsibilityForm?.overseers?.list | slice: 2; let j = index\">\r\n                                <div class=\"avatar-card\">\r\n                                    <span class=\"value\">\r\n                                        <i class=\"icons\" (click)=\"remove('overseer',overseer)\">&#xe90d;</i>\r\n                                        {{ overseer.member_name }}\r\n                                    </span>\r\n                                </div>\r\n                            </li>\r\n                        </ul>\r\n                    </div>\r\n                </app-popover>\r\n                <app-popover #notify [dontCloseonClick]=\"true\">\r\n                    <div class=\"action-list\">\r\n                        <ul class=\"action-item\">\r\n                            <li\r\n                                *ngFor=\"let overseer of responsibilityForm?.overseers?.notifyList | slice: 2; let j = index\">\r\n                                <div class=\"avatar-card\">\r\n                                    <span class=\"value\">\r\n                                        <i class=\"icons\" (click)=\"remove('overseerNotifyList',overseer)\">&#xe90d;</i>\r\n                                        {{ overseer.member_name }}\r\n                                    </span>\r\n                                </div>\r\n                            </li>\r\n                        </ul>\r\n                    </div>\r\n                </app-popover>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <!-- Assurance -->\r\n\r\n    <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.ASSURANCE\"\r\n        [attr.id]=\"'ASSURANCE'\" [class.active]=\"activeSelector === 'assurance'\"\r\n        [class.disabled]=\"activeSelector && activeSelector !== 'assurance' && sideSelectorElements.includes(activeSelector)\">\r\n        <div class=\"left\" [class.checked]=\"false\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/reviewer.svg\" alt=\"\"\r\n                *ngIf=\"responsibilityForm?.assuranceList?.length==0 || activeSelector === 'assurance'\">\r\n\r\n            <svg *ngIf=\"responsibilityForm?.assuranceList?.length>0 && activeSelector !== 'assurance'\" class=\"checkIcon\"\r\n                xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n            <div class=\"vx-form-group\">\r\n                <label class=\"vx-control-panel\">Assurance</label>\r\n                <div class=\"select\" *ngIf=\"responsibilityForm?.assuranceList?.length ==0\">\r\n                    <div class=\"custom-input\" (click)=\"activateSelector('assurance',true)\"\r\n                        aria-placeholder=\"Select the test plan categories that you would like to add this responsibility to.\">\r\n                    </div>\r\n                    <!-- <input type=\"text\" (click)=\"activateSelector('assurance',true)\"\r\n                        placeholder=\"Select the test plan categories that you would like to add...\"\r\n                        readonly [appTooltip]=\"'Select the test plan categories that you would like to add this responsibility to.'\" placement=\"bottom\" delay=\"0\" [tooltipMandatory]=\"true\"> -->\r\n                </div>\r\n                <div class=\"selected\" *ngIf=\"responsibilityForm?.assuranceList?.length > 0\">\r\n                    <div class=\"chip-container\" [class.more-one]=\"responsibilityForm?.assuranceList?.length>1\"\r\n                        [class.plus]=\"responsibilityForm?.assuranceList?.length>2\">\r\n                        <span class=\"chip\" *ngFor=\"let assurance of responsibilityForm?.assuranceList?.slice(0,2)\"><i\r\n                                class=\"icons\" (click)=\"remove('assurance',assurance)\">&#xe90d;</i>\r\n                            {{assurance.category_name}}</span>\r\n                        <button class=\"count\" *ngIf=\"responsibilityForm?.assuranceList?.length > 2\" type=\"button\"\r\n                            appPopover (click)=\"assurance.popover()\" placement=\"right\">+\r\n                            {{responsibilityForm?.assuranceList?.slice(2).length}}</button>\r\n                    </div>\r\n                    <button *ngIf=\"activeSelector !== 'assurance'\" class=\"edit\" type=\"button\"\r\n                        (click)=\"activateSelector('assurance',true)\"><i class=\"icons\">&#xe9ba;</i>\r\n                        Edit</button>\r\n                </div>\r\n                <app-popover #assurance [dontCloseonClick]=\"true\">\r\n                    <div class=\"action-list\">\r\n                        <ul class=\"action-item\">\r\n                            <li *ngFor=\"let assurance of responsibilityForm?.assuranceList | slice: 2; let j = index\">\r\n                                <div class=\"avatar-card\">\r\n                                    <span class=\"value\">\r\n                                        <i class=\"icons\" (click)=\"remove('assurance',assurance)\">&#xe90d;</i>\r\n                                        {{ assurance.category_name }}\r\n                                    </span>\r\n                                </div>\r\n                            </li>\r\n                        </ul>\r\n                    </div>\r\n                </app-popover>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\"\r\n        *ngIf=\"moreOptions?.REQUIRES_AUDIT && responsibilityForm.rc.length > 0\" [attr.id]=\"'REQUIRES_AUDIT'\"\r\n        [class.active]=\"activeSelector === 'requires_audit'\"\r\n        [class.disabled]=\"activeSelector && activeSelector !== 'requires_audit' && sideSelectorElements.includes(activeSelector)\">\r\n        <div class=\"left\" [class.checked]=\"false\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/audit.svg\" alt=\"\"\r\n                *ngIf=\"responsibilityForm?.requiresAuditList?.length==0 || activeSelector === 'requires_audit'\">\r\n\r\n            <svg *ngIf=\"responsibilityForm?.requiresAuditList?.length>0 && activeSelector !== 'requires_audit'\"\r\n                class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n            <div class=\"vx-form-group\">\r\n                <label class=\"vx-control-panel\">REQUIRES AUDIT?</label>\r\n                <div class=\"select\" *ngIf=\"responsibilityForm?.requiresAuditList?.length ==0\">\r\n                    <!-- <div class=\"custom-input\" (click)=\"activateSelector('assurance',true)\" aria-placeholder=\"Select the test plan categories that you would like to add this responsibility to.\"></div> -->\r\n                    <!-- <input type=\"text\" (click)=\"activateSelector('assurance',true)\"\r\n                        placeholder=\"Select the test plan categories that you would like to add...\"\r\n                        readonly [appTooltip]=\"'Select the test plan categories that you would like to add this responsibility to.'\" placement=\"bottom\" delay=\"0\" [tooltipMandatory]=\"true\"> -->\r\n\r\n                    <input type=\"text\" placeholder=\"If yes, select an Audit Category.\" readonly\r\n                        (click)=\"activateSelector('requires_audit',true)\">\r\n                </div>\r\n                <div class=\"selected\" *ngIf=\"responsibilityForm?.requiresAuditList?.length > 0\">\r\n                    <!-- <div class=\"chip-container\" [class.more-one]=\"responsibilityForm?.assuranceList?.length>1\" [class.plus]=\"responsibilityForm?.assuranceList?.length>2\">\r\n                        <span class=\"chip\" *ngFor=\"let assurance of responsibilityForm?.assuranceList?.slice(0,2)\"><i\r\n                                class=\"icons\" (click)=\"remove('assurance',assurance)\">&#xe90d;</i>\r\n                            {{assurance.category_name}}</span>\r\n                        <button class=\"count\" *ngIf=\"responsibilityForm?.assuranceList?.length > 2\" type=\"button\"\r\n                            appPopover (click)=\"assurance.popover()\" placement=\"right\">+\r\n                            {{responsibilityForm?.assuranceList?.slice(2).length}}</button>\r\n                    </div> -->\r\n                    <!-- <button *ngIf=\"activeSelector !== 'assurance'\" class=\"edit\" type=\"button\" (click)=\"activateSelector('assurance',true)\"><i\r\n                            class=\"icons\">&#xe90c;</i>\r\n                        Edit</button> -->\r\n\r\n                    <div class=\"chip-container\">\r\n                        <span class=\"chip\"><i class=\"icons\" (click)=\"remove('requires_audit',overseer)\">&#xe90d;</i>\r\n                            {{responsibilityForm?.requiresAuditList[0]?.category_name}}</span>\r\n                    </div>\r\n                    <button class=\"edit\" type=\"button\" (click)=\"activateSelector('requires_audit',true)\"><i\r\n                            class=\"icons\">&#xe90c;</i> Edit</button>\r\n                    <!-- class=\"icons\">&#xe9ba;</i>\r\n                        Edit</button> -->\r\n                </div>\r\n                <ng-container *ngIf=\"responsibilityForm?.requiresAuditList?.length\">\r\n                    <label class=\"vx-control-panel vx-mt-8\">\r\n                        SAMPLE SIZE\r\n                        <app-cs-switch [(ngValue)]=\"isSample\" (ngValueChange)=\"switchEnable($event)\"></app-cs-switch>\r\n                    </label>\r\n                    <div class=\"sample-part\" [class.disabled]=\"!isSample\">\r\n                        <app-cs-radio value=\"0\" class=\"sample-radio\" (click)=\"selectedSampleData(0)\"\r\n                            [checked]=\"selectedSample === 0\">\r\n                            <div class=\"name\">COUNT</div>\r\n                            <input type=\"number\" placeholder=\"--\" (keypress)=\"checkInputValue($event)\"\r\n                                [(ngModel)]=\"sampleValue\">\r\n                        </app-cs-radio>\r\n                        <div class=\"or\">OR</div>\r\n                        <app-cs-radio value=\"1\" class=\"sample-radio\" (click)=\"selectedSampleData(1)\"\r\n                            [checked]=\"selectedSample === 1\">\r\n                            <div class=\"name\">PERCENTAGE</div>\r\n                            <input type=\"number\" (keypress)=\"checkInputValue($event)\" [(ngModel)]=\"samplePercentage\"\r\n                                placeholder=\"--\">\r\n                        </app-cs-radio>\r\n                    </div>\r\n                    <label class=\"vx-control-panel vx-mt-8\">SET A REMINDER IF THE AUDIT PLAN IS NOT CREATED.</label>\r\n                    <div class=\"reminder-part\">\r\n                        Send reminder every <input type=\"number\" value=\"2\" [(ngModel)]=\"sendAuditRemindersValue\"> Day by\r\n                        <div class=\"picker-group\">\r\n                            <input class=\"time\" aria-label=\"12hr format\" [(ngModel)]=\"auditTime\"\r\n                                [ngxTimepicker]=\"dailyTime\" placeholder=\"auditTime.toUpperCase()\" type=\"text\"\r\n                                [min]=\"currentTime\" readonly>\r\n                            <i class=\"icons\">&#xe955;</i>\r\n                            <ngx-material-timepicker #dailyTime [defaultTime]=\"auditTime\">\r\n                            </ngx-material-timepicker>\r\n                        </div>\r\n                    </div>\r\n                </ng-container>\r\n                <!-- <app-popover #assurance [dontCloseonClick]=\"true\">\r\n                    <div class=\"action-list\">\r\n                        <ul class=\"action-item\">\r\n                            <li *ngFor=\"let assurance of responsibilityForm?.assuranceList | slice: 2; let j = index\">\r\n                                <div class=\"avatar-card\">\r\n                                    <span class=\"value\">\r\n                                        <i class=\"icons\" (click)=\"remove('assurance',assurance)\">&#xe90d;</i>\r\n                                        {{ assurance.category_name }}\r\n                                    </span>\r\n                                </div>\r\n                            </li>\r\n                        </ul>\r\n                    </div>\r\n                </app-popover> -->\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<app-users-radio-list *ngIf=\"activeSelector === 'assignors'\" [usersList]=\"assignorsList\"\r\n    [selectedUsers]=\"responsibilityForm.assignors.list\" [itemEmailKey]=\"'member_email'\" [userIdKey]=\"'member_id'\"\r\n    [itemNameKey]=\"'member_name'\" (saveSelectedList)=\"saveSelectedList('assignors',$event)\"\r\n    (closeUsersList)=\"activeDeselector()\">\r\n</app-users-radio-list>\r\n\r\n<ng-container *ngIf=\"activeSelector === 'assignees'\">\r\n  <app-group-users-list *ngIf=\"isEntrust || responsibilityForm.assignees.whoCanComplete === 'ANY_ONE'\" [openedFrom]=\"openedFrom\" [usersList]=\"assigneesList\"\r\n    [groupsList]=\"groupsList\" [selectedUsers]=\"responsibilityForm.assignees.list\" [userIdKey]=\"'my_member_id'\"\r\n    (saveSelectedList)=\"saveSelectedList('assignees',$event)\" (closeUsersList)=\"activeDeselector()\">\r\n  </app-group-users-list>\r\n  <app-users-radio-list *ngIf=\"!isEntrust && responsibilityForm.assignees.whoCanComplete !== 'ANY_ONE'\" [itemEmailKey]=\"'employee_email'\" [usersList]=\"assigneesList\"\r\n    [selectedUsers]=\"responsibilityForm.assignees.list\" [userIdKey]=\"'employee_id'\" [itemNameKey]=\"'employee_name'\"\r\n    (saveSelectedList)=\"saveSelectedList('assignees',$event)\" (closeUsersList)=\"activeDeselector()\">\r\n  </app-users-radio-list>\r\n</ng-container>\r\n\r\n\r\n\r\n<app-checkpoints *ngIf=\"activeSelector === 'checkpoints'\"\r\n    [checkpointInstruction]=\"responsibilityForm?.checkpointInstruction\"\r\n    [checkpointData]=\"responsibilityForm?.checkpoints\" (saveCheckPoint)=\"saveSelectedList('checkpoints',$event)\"\r\n    (closeCheckPoint)=\"activeDeselector()\"></app-checkpoints>\r\n<app-frequency-container *ngIf=\"activeSelector === 'frequency'\" [frequencyDetails]=\"frequencyDetails\"\r\n    (selectedFrequency)=\"frequencyData($event)\" [mode]=\"'responsibility'\" (closeFrequency)=\"activeDeselector()\">\r\n</app-frequency-container>\r\n\r\n<app-responsibility-centers-list *ngIf=\"activeSelector === 'rc'\" [responsibilityCentersList]=\"responsibilityCentersList\"\r\n    [radioSelection]=\"(mode == 'EDIT')?true:false\" [selectedResponsibilityCenters]=\"responsibilityForm.rc\"\r\n    [rcIdKey]=\"'item_id'\" (saveSelectedList)=\"saveSelectedList('rc',$event)\" (closeRcList)=\"activeDeselector()\">\r\n</app-responsibility-centers-list>\r\n\r\n<app-category-multi-select *ngIf=\"activeSelector === 'category'\" [categoryList]=\"categories\"\r\n    [allCategories]=\"allCategories\" [categoryIdKey]=\"'category_id'\" [selectedCategories]=\"responsibilityForm.category\"\r\n    (saveSelectedCategory)=\"saveSelectedList('category',$event)\" (closeCategoriesList)=\"activeDeselector()\">\r\n</app-category-multi-select>\r\n\r\n<!-- [hideProgramsList]=\"(selectedProgram  && !(this.selectedProgram?.programType === 0 && this.selectedProgram?.name?.toLowerCase() === 'uncategorized' )) ? true : false\" -->\r\n<app-program-listing *ngIf=\"activeSelector === 'program'\" [programsList]=\"programsList\"\r\n    [selectedCategories]=\"responsibilityForm.category | refDisconnect\" [selectedProgram]=\"responsibilityForm.program | refDisconnect\"\r\n    (saveSelectedProgram)=\"saveSelectedList('program',$event)\" (closeEvent)=\"activeDeselector()\" [linkedProgram]=\"responsibilityForm?.linkedProgram\" [mode]=\"(this.selectedProgram?.programType === 0 && this.selectedProgram?.name?.toLowerCase() === 'uncategorized' ) ? '' : mode\"\r\n    [openedFrom]=\"openedFrom\" [responsibilityId]=\"responsibilityId\"></app-program-listing>\r\n\r\n<app-owner-list *ngIf=\"activeSelector === 'reviewer'\" [listHeading]=\"'Select a Reviewer'\"\r\n    [singularText]=\"'User selected'\" [pluralText]=\"'Users selected'\" [usersList]=\"reviewersList\" [showWorkflow]=\"true\"\r\n    [selectedUsers]=\"responsibilityForm.reviewers.list\" [userIdKey]=\"'employee_id'\" [itemEmailKey]=\"'employee_email'\"\r\n    [itemNameKey]=\"'member_name'\"\r\n    (saveSelectedList)=\"saveSelectedList('reviewer',$event);activateSelector('reviewerFrequency',true)\"\r\n    (closeUsersList)=\"activeDeselector()\" [mode]=\"mode\"\r\n    [reviewerWorkflowType]=\"(responsibilityForm?.reviewers?.sequentialWorkflow) ? 'SEQUENTIAL' : 'ANY REVIEWER CAN MARK THIS AS REVIEWED'\"\r\n    (reviewerWorkflowTypeChange)=\"reviewerTypeChange($event)\">\r\n</app-owner-list>\r\n\r\n<app-owner-list *ngIf=\"activeSelector === 'overseer'\" [singularText]=\"'User selected'\" [pluralText]=\"'Users selected'\"\r\n    [usersList]=\"overseersList\" [selectedUsers]=\"responsibilityForm.overseers.list\" [userIdKey]=\"'employee_id'\"\r\n    [itemNameKey]=\"'member_name'\" (saveSelectedList)=\"saveSelectedList('overseer',$event)\"\r\n    (closeUsersList)=\"activeDeselector()\" [itemEmailKey]=\"'employee_email'\">\r\n</app-owner-list>\r\n\r\n<app-owner-list *ngIf=\"activeSelector ==='overseerNotify'\" [singularText]=\"'User selected'\"\r\n    [pluralText]=\"'Users selected'\" [usersList]=\"overseersList\"\r\n    [selectedUsers]=\"responsibilityForm.overseers.notifyList\" [userIdKey]=\"'employee_id'\" [itemNameKey]=\"'member_name'\"\r\n    (saveSelectedList)=\"saveSelectedList('overseerNotify',$event)\" (closeUsersList)=\"activeDeselector()\"\r\n    [itemEmailKey]=\"'employee_email'\"></app-owner-list>\r\n\r\n<app-owner-list *ngIf=\"activeSelector === 'assurance'\" [singularText]=\"'Test Category selected'\"\r\n    [pluralText]=\"'Test Categories selected'\" [searchPlaceholder]=\"'Search Test Category...'\"\r\n    [listHeading]=\"'Select Test Categories'\" [usersList]=\"assuranceCategoriesList\"\r\n    [noDataText]=\"'No Test Categories Found'\" [selectedUsers]=\"responsibilityForm.assuranceList\"\r\n    [userIdKey]=\"'category_id'\" [itemEmailKey]=\"'category_name'\" [itemNameKey]=\"'category_name'\"\r\n    (saveSelectedList)=\"saveSelectedList('assurance',$event)\" (closeUsersList)=\"activeDeselector()\"\r\n    [searchPlaceholder]=\"'Search Category'\">\r\n</app-owner-list>\r\n\r\n<app-audit-category-list *ngIf=\"activeSelector === 'requires_audit'\" (closeList)=\"activeDeselector()\"\r\n    [auditCategory]=\"assuranceRequiresAuditList\" (saveSelectedList)=\"saveSelectedList('requires_audit',$event)\"\r\n    [selectedData]=\"responsibilityForm?.requiresAuditList[0]\"></app-audit-category-list>\r\n\r\n<app-loader-inline *ngIf=\"loader\"></app-loader-inline>\r\n<app-framework-list *ngIf=\"activeSelector === 'framework'\"  (assignControl)=\"assignFromFramework($event)\"\r\n[previousSelectedValues]=\"selectedFrameworkValues\"\r\n    (closeFramework)=\"activeDeselector()\" (entrustFramework)=\"entrustFramework($event)\"></app-framework-list>\r\n\r\n<!-- risk-calculator here -->\r\n<app-risk-classification *ngIf=\"activeSelector === 'riskCalculator' \" [currentRiskValue]=\"responsibilityForm.riskClass\"\r\n    (saveList)=\"saveSelectedList('calculatedrisk',$event)\" (closeList)=\"activeDeselector()\">\r\n</app-risk-classification>\r\n\r\n<app-review-frequency *ngIf=\"activeSelector === 'reviewerFrequency'\"\r\n    [reviewCompleteDays]=\"responsibilityForm.reviewers.reviewFrequency.reviewCompleteDays\"\r\n    [reviewNOtCompletedDays]=\"responsibilityForm.reviewers.reviewFrequency.reviewNOtCompletedDays\"\r\n    (saveReviewFrequency)=\"saveSelectedList('reviewFrequency',$event)\"\r\n    (closeReviewFrequency)=\"activeDeselector();activateSelector('reviewer',false);responsibilityForm.reviewers.list = [];\"\r\n    (backToUserList)=\"activeDeselector();activateSelector('reviewer',true)\">\r\n</app-review-frequency>\r\n\r\n\r\n<app-assessment-list *ngIf=\"isAssessment\" [program_ids]=\"responsibilityForm.program[0]?._id\"\r\n    (cancelAssessment)=\"isAssessment = false; activateSelector('isAssessment', false)\"\r\n    [isEdit]=\"responsibilityForm?.assessment?.assessment_id ? true : false\"\r\n    [selectedAssessment]=\"responsibilityForm?.assessment\"\r\n    (onAssessmentSelect)=\"onAssessmentSelect($event);activateSelector('isAssessment', false)\"></app-assessment-list>\r\n\r\n<app-smiley-dialog-inline *ngIf=\"showSmiley\" [message]=\"smileyMessage\" [actionButtons]=\"actionButtons\"\r\n    (action)=\"action($event)\" (closeSmiley)=\"closeSmiley($event)\"></app-smiley-dialog-inline>\r\n\r\n<div class=\"import\" *ngIf=\"activeSelector === 'checkpoints-new'\">\r\n    <app-create-assessment-container #editor [openPortal]=\"'RESPONSIBILITY_CHECKPOINT'\"\r\n        (postAssessment)=\"postAssessment($event)\" (setIsUploaded)=\"setIsUploaded($event)\"\r\n        [checkpointJSON]=\"responsibilityForm.new_checkpoints\">\r\n    </app-create-assessment-container>\r\n</div>\r\n",
+                    template: "<div class=\"workflw-compliance\" *ngIf=\"!showSmiley\">\r\n\r\n     <!-- responsibility type -->\r\n     <div class=\"form-group-row\" *ngIf=\"true\"\r\n     [class.disabled]=\"activeSelector && sideSelectorElements.includes(activeSelector)\">\r\n        <div class=\"left\"\r\n            [class.checked]=\"true\">\r\n            <!-- <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/who.svg\" alt=\"im\"\r\n                *ngIf=\"responsibilityForm?.systemResponsibilies?.length==0 || activeSelector === 'what'\"> -->\r\n    \r\n            <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n            <div class=\"vx-form-group\">\r\n                <label class=\"vx-control-panel\">Responsibility type <span class=\"required\">*</span></label>\r\n                <selector ngDefaultControl (ngModelChange)=\"responsibilityTypeChange($event)\" [(ngModel)]=\"responsibilityForm.responsibility_type\" [displayArray]=\"responsibilityType\"></selector>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <!-- Creating on behalf of someone else -->\r\n    <div *ngIf=\"mode !== 'EDIT' && responsibilityForm.responsibility_type == 0\" class=\"form-group-row \" [class.active]=\"activeSelector === 'assignors'\"\r\n        [class.disabled]=\"activeSelector && activeSelector !== 'assignors' && sideSelectorElements.includes(activeSelector)\">\r\n        <div class=\"left\"\r\n            [class.checked]=\"responsibilityForm?.assignors?.list?.length>0 && activeSelector !== 'assignors'\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/im-creating.svg\" alt=\"im\"\r\n                *ngIf=\"responsibilityForm?.assignors?.list?.length==0 || activeSelector === 'assignors'\">\r\n\r\n            <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\"\r\n                *ngIf=\"responsibilityForm?.assignors?.list?.length>0 && activeSelector !== 'assignors'\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n            <div class=\"vx-form-group\">\r\n                <label class=\"vx-control-panel\">\r\n                    I am creating this responsibility on behalf of someone else\r\n                    <app-cs-switch [ngValue]=\"responsibilityForm.assignors.enable\"\r\n                        (ngValueChange)=\"responsibilityForm.assignors.enable = $event; responsibilityForm.assignors.list = [];\">\r\n                    </app-cs-switch>\r\n                </label>\r\n                <div class=\"select\"\r\n                    *ngIf=\"responsibilityForm?.assignors?.list?.length === 0 || activeSelector === 'assignors'\">\r\n                    <input type=\"text\" (click)=\"activateSelector('assignors',true)\"\r\n                        placeholder=\"Who is responsible for managing this responsibility?\" readonly\r\n                        [disabled]=\"!responsibilityForm?.assignors?.enable\">\r\n                </div>\r\n                <div class=\"selected\"\r\n                    *ngIf=\"responsibilityForm?.assignors?.list?.length > 0 && activeSelector !== 'assignors'\">\r\n                    <div class=\"chip-container\">\r\n                        <span class=\"chip\" *ngFor=\"let b_user of responsibilityForm?.assignors?.list?.slice(0,2)\"><i\r\n                                class=\"icons\" (click)=\"remove('assignors',b_user)\">&#xe90d;</i>\r\n                            {{b_user.member_name}}</span>\r\n                        <button class=\"count\" *ngIf=\"responsibilityForm?.assignors?.list?.length > 2\" type=\"button\"\r\n                            appPopover (click)=\"behalf.popover()\" placement=\"right\">+\r\n                            {{responsibilityForm?.assignors?.list?.slice(2).length}}</button>\r\n                    </div>\r\n                    <button *ngIf=\"activeSelector !== 'assignors'\" class=\"edit\" type=\"button\"\r\n                        (click)=\"activateSelector('assignors',true)\"><i class=\"icons\">&#xe9ba;</i>\r\n                        Edit</button>\r\n                </div>\r\n                <app-popover #behalf [dontCloseonClick]=\"true\">\r\n                    <div class=\"action-list\">\r\n                        <ul class=\"action-item\">\r\n                            <li *ngFor=\"let b_user of responsibilityForm?.assignors?.list | slice: 2; let j = index\">\r\n                                <div class=\"avatar-card\">\r\n                                    <span class=\"value\">\r\n                                        <i class=\"icons\" (click)=\"remove('assignors',b_user)\">&#xe90d;</i>\r\n                                        {{ b_user.member_name }}\r\n                                    </span>\r\n                                </div>\r\n                            </li>\r\n                        </ul>\r\n                    </div>\r\n                </app-popover>\r\n                <p *ngIf=\"invalidType === 'whom'\" [appScrollInView]=\"true\" class=\"error-message\">Please select the\r\n                    person responsible for managing this responsibility.\r\n                </p>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n\r\n    <!-- What -->\r\n\r\n    <div class=\"form-group-row\" [class.active]=\"['framework','what'].includes(activeSelector)\"\r\n        [class.disabled]=\"activeSelector && (activeSelector !== 'responsibilityName' || activeSelector !== 'what') && sideSelectorElements.includes(activeSelector)\">\r\n            <ng-container *ngIf=\"responsibilityForm?.responsibility_type == 0\">\r\n                <div class=\"left\"\r\n                    [class.checked]=\"responsibilityForm?.responsibility?.name.trim() !== '' && !focus.responsibilityName\">\r\n                    <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/what.svg\" alt=\"im\"\r\n                        *ngIf=\"(responsibilityForm?.responsibility?.name.trim() === '') || focus.responsibilityName\">\r\n\r\n                    <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\"\r\n                        *ngIf=\"responsibilityForm?.responsibility?.name.trim() !== '' && !focus.responsibilityName\">\r\n                        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                        <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                    </svg>\r\n                    \r\n                </div>\r\n                <div class=\"right\">\r\n                    <div class=\"vx-form-group\" *ngIf=\"responsibilityForm.responsibility_type == 0\">\r\n                        <label class=\"vx-control-panel\">\r\n                            What? <span class=\"required\">*</span>\r\n                            <button *ngIf=\"isFrameworkAvailable && mode !== 'EDIT' && openedFrom !=='RISK_TREATMENT'\"\r\n                                (click)=\"activateSelector('framework',true)\" class=\"button\">Select From A framework</button>\r\n                        </label>\r\n                        <span *ngIf=\"responsibilityForm?.responsibility?.keyResponsibility\" class=\"indicator\"\r\n                            [appTooltip]=\"'This responsibility is marked as key responsibility.'\" placement=\"bottom\"\r\n                            type=\"black\" delay=\"0\" [tooltipMandatory]=\"true\">\r\n                            <i class=\"icons\">&#xea70;</i>\r\n                        </span>\r\n                        <input *ngIf=\"responsibilityForm?.responsibility?.name.trim() =='' || !isEditWhat\" type=\"text\"\r\n                            ngDefaultControl [ngModel]=\"responsibilityForm.responsibility.name\" placeholder=\"What is the responsibility?\"\r\n                            (change)=\"whatChanged($event)\" (focusin)=\"activateSelector('responsibilityName',true)\"\r\n                            (focusout)=\"activeDeselector()\" (clickOutside)=\"testFunction()\" #what>\r\n                        <div class=\"selected\" *ngIf=\"responsibilityForm?.responsibility?.name.trim() !='' && isEditWhat\">\r\n                            <div class=\"chip-container\">\r\n                                <span class=\"value\">{{responsibilityForm.responsibility?.name}}</span>\r\n                            </div>\r\n                            <button class=\"edit\" type=\"button\" (click)=\"onEditWhat($event)\"><i class=\"icons\">&#xe9ba;</i>\r\n                                Edit</button>\r\n                        </div>\r\n                        <p *ngIf=\"invalidType === 'what'\" [appScrollInView]=\"true\" class=\"error-message\">Please enter a name for\r\n                            this responsibility.</p>\r\n                        <div class=\"switch-row align-right\">\r\n                            <app-cs-switch [ngValue]=\"responsibilityForm.responsibility?.keyResponsibility\"\r\n                                (ngValueChange)=\"responsibilityForm.responsibility.keyResponsibility = $event\">Key\r\n                                Responsibility\r\n                            </app-cs-switch>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n\r\n            <!-- What? for System genereated responsibilities -->\r\n            <ng-container *ngIf=\"responsibilityForm.responsibility_type == 1\">\r\n                <!-- <div class=\"left\" [class.active]=\"activeSelector == 'what'\" [class.disabled]=\"activeSelector && activeSelector !== 'what' && sideSelectorElements.includes(activeSelector)\" >\r\n                    <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/what.svg\" alt=\"im\"\r\n                    *ngIf=\"responsibilityForm?.systemResponsibilies?.length == 0 && responsibilityForm?.responsibility_type == 1\">\r\n\r\n                    <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\"\r\n                        *ngIf=\"responsibilityForm?.systemResponsibilies?.length >  0 && responsibilityForm?.responsibility_type == 1\">\r\n                        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                        <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                    </svg>\r\n                </div> -->\r\n                <div class=\"left\" [class.active]=\"activeSelector == 'what'\" [class.disabled]=\"activeSelector && activeSelector !== 'what' && sideSelectorElements.includes(activeSelector)\"\r\n                [class.checked]=\"responsibilityForm?.systemResponsibilities?.length > 0 \">\r\n                <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/what.svg\" alt=\"im\"\r\n                    *ngIf=\"(responsibilityForm?.systemResponsibilities?.length === 0  && responsibilityForm?.responsibility_type == 1)\">\r\n\r\n                <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\"\r\n                    *ngIf=\"responsibilityForm?.systemResponsibilities?.length > 0 &&  responsibilityForm?.responsibility_type == 1\">\r\n                    <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                    <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                </svg>\r\n                \r\n                </div>\r\n                <div class=\"right\">\r\n                    <div class=\"vx-form-group\">\r\n                        <label class=\"vx-control-panel\">What? <span class=\"required\">*</span></label>\r\n\r\n                    <div class=\"select\" *ngIf=\"responsibilityForm?.systemResponsibilities?.length == 0 \">\r\n                        <input id=\"what-input\" type=\"text\" (click)=\"activateSelector('what',true)\"\r\n                            placeholder=\"What is the responsibility?\" readonly>\r\n                    </div>\r\n                    \r\n                    <div class=\"selected\" *ngIf=\" responsibilityForm.systemResponsibilities?.length \">\r\n\r\n                        <div class=\"chip-container\" [class.more-one]=\"responsibilityForm?.systemResponsibilities?.length>1\"\r\n                            [class.plus]=\"responsibilityForm?.systemResponsibilities?.length>2\">\r\n                            <span class=\"chip\" *ngFor=\"let task of responsibilityForm?.systemResponsibilities?.slice(0,2)\">\r\n                                <i class=\"icons\" (click)=\"remove('system_responsibility',task)\">&#xe90d;</i>\r\n                                {{task.name}}</span>\r\n                            <!-- <button class=\"count\" *ngIf=\"responsibilityForm?.overseers?.list?.length > 2\" type=\"button\"\r\n                                appPopover (click)=\"overseers.popover()\" placement=\"right\">+\r\n                                {{responsibilityForm?.overseers?.list?.slice(2).length}}</button> -->\r\n                        </div>\r\n                        <button *ngIf=\"activeSelector !== 'what'\" class=\"edit\" type=\"button\"\r\n                            (click)=\"activateSelector('what',true)\"><i class=\"icons\">&#xe9ba;</i>\r\n                            Edit</button>\r\n\r\n                        <!-- <div class=\"chip-container\">\r\n                            <span class=\"value\">{{responsibilityForm.systemResponsibilities}}</span>\r\n                        </div>\r\n                        <button class=\"edit\" type=\"button\" (click)=\"onEditWhat($event)\"><i class=\"icons\">&#xe9ba;</i>\r\n                            Edit</button> -->\r\n                    </div>\r\n                    <p *ngIf=\"invalidType === 'what'\" [appScrollInView]=\"true\" class=\"error-message\">Please select a system responsibility.</p>\r\n                    <div class=\"switch-row align-right\">\r\n                        <app-cs-switch [ngValue]=\"responsibilityForm.responsibility?.keyResponsibility\"\r\n                            (ngValueChange)=\"responsibilityForm.responsibility.keyResponsibility = $event\">Key\r\n                            Responsibility\r\n                        </app-cs-switch>\r\n                    </div>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n    </div>\r\n\r\n    <!-- Who -->\r\n    <div   class=\"form-group-row\" [class.active]=\"activeSelector === 'assignees'\"\r\n        [class.disabled]=\"(activeSelector && activeSelector !== 'assignees' && sideSelectorElements.includes(activeSelector)) || responsibilityForm.responsibility_type === 1\">\r\n        <div class=\"left\"\r\n            [class.checked]=\"responsibilityForm?.assignees?.list?.length>0 && activeSelector !== 'assignees'\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/who.svg\" alt=\"im\"\r\n                *ngIf=\"responsibilityForm?.assignees?.list?.length==0 || activeSelector === 'assignees'\">\r\n\r\n            <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\"\r\n                *ngIf=\"responsibilityForm?.assignees?.list?.length>0 && activeSelector !== 'assignees'\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n            <div class=\"vx-form-group\">\r\n                <label class=\"vx-control-panel\">Who? <span *ngIf=\"responsibilityForm.responsibility_type == 0\" class=\"required\">*</span></label>\r\n\r\n                <div class=\"select\" *ngIf=\"responsibilityForm?.assignees?.list?.length == 0\">\r\n                    <input type=\"text\" (click)=\"activateSelector('assignees',true)\"\r\n                        placeholder=\"Who is responsible for completing the responsibility?\" readonly>\r\n                </div>\r\n                <div class=\"selected\" *ngIf=\"responsibilityForm?.assignees?.list?.length > 0\">\r\n                    <div class=\"chip-container\" [class.more-one]=\"responsibilityForm?.assignees?.length>1\"\r\n                        [class.plus]=\"responsibilityForm?.assignees?.length>2\">\r\n                        <span class=\"chip\" *ngFor=\"let e_user of responsibilityForm?.assignees?.list?.slice(0,2)\"><i\r\n                                class=\"icons\" (click)=\"remove('assignees',e_user)\">&#xe90d;</i>\r\n                            {{e_user.member_name}}</span>\r\n                        <button class=\"count\" *ngIf=\"responsibilityForm?.assignees?.list?.length > 2\" type=\"button\"\r\n                            appPopover (click)=\"assignees.popover()\" placement=\"right\">+\r\n                            {{responsibilityForm?.assignees?.list?.slice(2).length}}</button>\r\n                    </div>\r\n                    <button *ngIf=\"activeSelector !== 'assignees'\" class=\"edit\" type=\"button\"\r\n                        (click)=\"activateSelector('assignees',true)\"><i class=\"icons\">&#xe9ba;</i>\r\n                        Edit</button>\r\n                </div>\r\n                <p *ngIf=\"invalidType === 'who'\" [appScrollInView]=\"true\" class=\"error-message\">Please select the person\r\n                    responsible for completing this responsibility.</p>\r\n                    <ng-container *ngIf=\"!isGroupAssigned\">\r\n                      <app-cs-radio *ngIf=\"mode !== 'EDIT'\"\r\n                          (checkedEvent)=\"responsibilityForm.assignees.whoCanComplete = 'ALL'\"\r\n                          [checked]=\"responsibilityForm.assignees.whoCanComplete == 'ALL'\" [name]=\"'what'\">ALL SELECTED\r\n                          PERSONS NEED TO\r\n                          COMPLETE THIS<i class=\"icons\"\r\n                              [appTooltip]=\"'If selected, separate responsibilities will be created for each person.'\"\r\n                              placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=\"true\">&#xe91f;</i>\r\n                      </app-cs-radio>\r\n                      <app-cs-radio *ngIf=\"mode !== 'EDIT'\"\r\n                          (checkedEvent)=\"responsibilityForm.assignees.whoCanComplete = 'ANY_ONE'\"\r\n                          [checked]=\"responsibilityForm.assignees.whoCanComplete == 'ANY_ONE'\" [name]=\"'what'\">ANY SELECTED\r\n                          PERSON CAN COMPLETE\r\n                          THIS <i class=\"icons\" [appTooltip]=\"'If selected, only one responsibility will be created.'\"\r\n                              placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=\"true\">&#xe91f;</i>\r\n                      </app-cs-radio>\r\n\r\n                      <div class=\"switch-row align-right\" *ngIf=\"mode == 'EDIT'\">\r\n                        <app-cs-switch\r\n                            (ngValueChange)=\"openAssigneeChangeConfirmation($event)\" [ngValue]=\"responsibilityForm.assignees.whoCanComplete == 'ANY_ONE'\"> ANY SELECTED\r\n                            PERSON CAN COMPLETE\r\n                            THIS\r\n                        </app-cs-switch>\r\n                    </div>\r\n                    </ng-container>\r\n                <app-popover #assignees [dontCloseonClick]=\"true\">\r\n                    <div class=\"action-list\">\r\n                        <ul class=\"action-item\">\r\n                            <li *ngFor=\"let e_user of responsibilityForm?.assignees?.list | slice: 2; let j = index\">\r\n                                <div class=\"avatar-card\">\r\n                                    <span class=\"value\">\r\n                                        <i class=\"icons\" (click)=\"remove('assignees',e_user)\">&#xe90d;</i>\r\n                                        {{ e_user.member_name }}\r\n                                    </span>\r\n                                </div>\r\n                            </li>\r\n                        </ul>\r\n                    </div>\r\n                </app-popover>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <!-- When? -->\r\n    <div class=\"form-group-row\" [class.active]=\"activeSelector === 'frequency'\"\r\n        [class.disabled]=\"activeSelector && activeSelector !== 'frequency' && sideSelectorElements.includes(activeSelector)\">\r\n        <div class=\"left\" [class.checked]=\"(!responsibilityForm?.frequency || activeSelector === 'frequency')\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/when.svg\" alt=\"im\"\r\n                *ngIf=\"!responsibilityForm?.frequency || activeSelector === 'frequency'\">\r\n\r\n            <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\"\r\n                *ngIf=\"responsibilityForm?.frequency  && activeSelector !== 'frequency' && responsibilityForm?.frequency != '' && responsibilityForm?.frequency != '5~0~0~0'\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n            <div class=\"vx-form-group\">\r\n                <label class=\"vx-control-panel\">When? <span class=\"required\">*</span></label>\r\n                <div *ngIf=\"responsibilityForm?.frequency == '' || responsibilityForm?.frequency == '5~0~0~0'\"\r\n                    class=\"select button-sec\">\r\n                    <input type=\"text\" (click)=\"activateSelector('frequency',true)\" [placeholder]=\"frequencyPlaceholder\"\r\n                        readonly>\r\n                    <button (click)=\"activateSelector('frequency',true)\" type=\"button\">Set A frequency</button>\r\n                </div>\r\n                <div *ngIf=\"responsibilityForm?.frequency != '' && responsibilityForm?.frequency !== '5~0~0~0'\"\r\n                    class=\"selected button-sec\">\r\n                    <span class=\"chip\">{{frequencyPlaceholder}}</span>\r\n                    <button *ngIf=\"activeSelector !== 'frequency'\" type=\"button\" class=\"edit\"\r\n                        (click)=\"activateSelector('frequency',true)\">\r\n                        <i class=\"icons\">&#xe9ba;</i>Edit\r\n                    </button>\r\n                </div>\r\n                <p *ngIf=\"invalidType === 'when'\" [appScrollInView]=\"true\" class=\"error-message\">Please select the\r\n                    frequency of occurrence for this responsibility.</p>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <!-- Notes -->\r\n    <div class=\"form-group-row\" [class.active]=\"activeSelector === 'notes'\"\r\n        [class.disabled]=\"activeSelector && activeSelector !== 'notes' && sideSelectorElements.includes(activeSelector)\">\r\n        <div class=\"left\"\r\n            [class.checked]=\"checkBlank(responsibilityForm?.description).trim() !== '' && !focus.description\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/notes.svg\" alt=\"im\"\r\n                *ngIf=\"(checkBlank(responsibilityForm?.description).trim() === '') || focus.description\">\r\n\r\n            <svg class=\"checkIcon\"\r\n                *ngIf=\"checkBlank(responsibilityForm?.description).trim() !== '' && !focus.description\"\r\n                xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n            <div class=\"vx-form-group\">\r\n                <label class=\"vx-control-panel\">Notes</label>\r\n                <marx-editor ngDefaultControl [(ngModel)]=\"responsibilityForm.description\" [editorConfig]=\"{mode: 'prime',\r\n                colorPalette: true,\r\n                link: true,\r\n                id:'notes',\r\n                placeholder: 'Add more information about completing the responsibility'}\"></marx-editor>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <!-- Objective -->\r\n    <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.OBJECTIVE\"\r\n        [attr.id]=\"'OBJECTIVE'\" [class.active]=\"activeSelector === 'objective'\"\r\n        [class.disabled]=\"activeSelector && activeSelector !== 'objective' && sideSelectorElements.includes(activeSelector)\">\r\n        <div class=\"left\" [class.checked]=\"checkBlank(responsibilityForm?.objective).trim() !=='' && !focus.objective\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/objectives.svg\" alt=\"im\"\r\n                *ngIf=\"(checkBlank(responsibilityForm?.objective).trim() === '') || focus.objective\">\r\n\r\n            <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\"\r\n                *ngIf=\"(checkBlank(responsibilityForm?.objective).trim()  !== '') && !focus.objective\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n            <div class=\"vx-form-group\">\r\n                <label class=\"vx-control-panel\">Objective</label>\r\n                <marx-editor ngDefaultControl [(ngModel)]=\"responsibilityForm.objective\" [editorConfig]=\"{mode: 'prime',\r\n                colorPalette: true,\r\n                id:'objective',\r\n                link: true,\r\n                placeholder: 'This option lets you specify an objective for the responsibility.'}\"></marx-editor>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <!-- Responsibility Center -->\r\n    <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.RC\" [attr.id]=\"'RC'\"\r\n        [class.active]=\"activeSelector === 'rc'\"\r\n        [class.disabled]=\"activeSelector && activeSelector !== 'rc' && sideSelectorElements.includes(activeSelector)\">\r\n        <div class=\"left\" [class.checked]=\"responsibilityForm?.rc?.length>0 && activeSelector !== 'rc'\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/responsibility-center.svg\"\r\n                alt=\"\" *ngIf=\"responsibilityForm?.rc?.length==0 || activeSelector === 'rc'\">\r\n\r\n            <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\"\r\n                *ngIf=\"responsibilityForm?.rc?.length>0 && activeSelector !== 'rc'\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n            <div class=\"vx-form-group\">\r\n                <label class=\"vx-control-panel\">Responsibility Center </label>\r\n                <div class=\"select\" *ngIf=\"responsibilityForm?.rc?.length === 0\">\r\n                    <div class=\"custom-input\" (click)=\"activateSelector('rc',true)\"\r\n                        aria-placeholder=\"Select the responsibility center or the responsibility centers for this responsibility.\">\r\n                    </div>\r\n                    <!-- <input type=\"text\" (click)=\"activateSelector('rc',true)\" placeholder=\"Select Responsibility Center(s)\" readonly> -->\r\n                </div>\r\n                <div class=\"selected\" *ngIf=\"responsibilityForm?.rc?.length > 0\"\r\n                    [class.readOnly]=\"openedFrom === 'RISK_TREATMENT'\">\r\n                    <div class=\"chip-container\" [class.more-one]=\"responsibilityForm?.rc?.length>1\"\r\n                        [class.plus]=\"responsibilityForm?.rc?.length>2\">\r\n                        <span class=\"chip\" *ngFor=\"let rc of responsibilityForm?.rc?.slice(0,2)\"><i class=\"icons\"\r\n                                (click)=\"remove('rc',rc)\" *ngIf=\"openedFrom !== 'RISK_TREATMENT'\">&#xe90d;</i>\r\n                            {{rc?.item_name}}</span>\r\n                        <button class=\"count\" *ngIf=\"responsibilityForm?.rc?.length > 2\" type=\"button\" appPopover\r\n                            (click)=\"rc.popover()\" placement=\"right\" placement=\"right\">+\r\n                            {{responsibilityForm?.rc?.slice(2).length}}</button>\r\n                    </div>\r\n                    <button *ngIf=\"activeSelector !== 'rc' && openedFrom !== 'RISK_TREATMENT'\" class=\"edit\"\r\n                        type=\"button\" (click)=\"activateSelector('rc',true)\"><i class=\"icons\">&#xe9ba;</i>\r\n                        Edit</button>\r\n                </div>\r\n                <app-popover #rc [dontCloseonClick]=\"true\">\r\n                    <div class=\"action-list\">\r\n                        <ul class=\"action-item\">\r\n                            <li *ngFor=\"let rc of responsibilityForm?.rc | slice: 2; let j = index\">\r\n                                <div class=\"avatar-card\">\r\n                                    <span class=\"value\">\r\n                                        <i class=\"icons\" (click)=\"remove('rc',rc)\">&#xe90d;</i>\r\n                                        {{ rc.item_name }}\r\n                                    </span>\r\n                                </div>\r\n                            </li>\r\n                        </ul>\r\n                    </div>\r\n                </app-popover>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <!-- Program -->\r\n    <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.PROGRAM\" [attr.id]=\"'PROGRAM'\" [class.active]=\"activeSelector === 'program'\" [class.disabled]=\"activeSelector && activeSelector !== 'program' && sideSelectorElements.includes(activeSelector)\">\r\n        <div class=\"left\" [class.checked]=\"responsibilityForm?.program?.length>0 && activeSelector !== 'program'\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/category.svg\" alt=\"\" *ngIf=\"responsibilityForm?.program?.length==0 || activeSelector === 'program'\">\r\n\r\n            <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\"\r\n                *ngIf=\"responsibilityForm?.program?.length>0 && activeSelector !== 'program'\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n                <div class=\"vx-form-group\">\r\n                        <label class=\"vx-control-panel\">Program</label>\r\n                        <div class=\"select\" *ngIf=\"responsibilityForm?.program?.length ==0\">\r\n                            <div class=\"custom-input\" (click)=\"activateSelector('program',true)\" aria-placeholder=\"Select the Program or Program Categories that this responsibility relates to.\"></div>\r\n                            <!-- <input type=\"text\" (click)=\"activateSelector('program',true)\" placeholder=\"Select Responsibility program(s)\" readonly> -->\r\n                        </div>\r\n                        <div class=\"selected\" *ngIf=\"responsibilityForm?.program?.length > 0\">\r\n                            <div class=\"chip-container\" [class.more-one]=\"responsibilityForm?.program?.length>1\" [class.plus]=\"responsibilityForm?.program?.length>2\">\r\n                                <span class=\"chip\" *ngFor=\"let program of responsibilityForm?.program\"><i class=\"icons\" *ngIf=\"false\" (click)=\"remove('program',program)\">&#xe90d;</i> {{program?.name??'--'}}</span>\r\n                                <!-- <button *ngIf=\"responsibilityForm?.program?.length > 2\" class=\"count\" type=\"button\" appPopover (click)=\"program.popover()\" placement=\"right\">+ {{responsibilityForm?.program?.slice(2).length}}</button> -->\r\n                                <button *ngIf=\"responsibilityForm?.linkedProgram?.length > 1\" class=\"count\" type=\"button\" appPopover (click)=\"program.popover()\" placement=\"right\">+ {{responsibilityForm?.linkedProgram?.length - 1}}</button>\r\n                            </div>\r\n                            <button *ngIf=\"activeSelector !== 'program' && !hiddenList.includes('PROGRAM')\" class=\"edit\" type=\"button\" (click)=\"activateSelector('program',true)\"><i class=\"icons\">&#xe9ba;</i> Edit</button>\r\n                        </div>\r\n                    <app-popover #program [dontCloseonClick]=\"true\">\r\n                        <div class=\"action-list\">\r\n                            <ul class=\"action-item\">\r\n                                <li class=\"multiple-program\">\r\n                                <div class=\"avatar-card\">\r\n                                    <span class=\"value\" [appTooltip]=\"responsibilityForm?.program[0]?.name\" placement=\"bottom\"\r\n                                    type=\"black\" delay=\"0\" [tooltipMandatory]=\"false\">\r\n                                    <!-- <i class=\"icons\">&#xe90d;</i> -->\r\n                                    {{responsibilityForm?.program[0]?.name}}\r\n                                    </span>\r\n                                    <div class=\"primary-label\">PRIMARY</div>\r\n                                </div>\r\n                                </li>\r\n                                <li *ngFor=\"let program of responsibilityForm?.linkedProgram; let j = index\">\r\n                                    <div class=\"avatar-card\" *ngIf=\"program?.category_id !== responsibilityForm?.program[0]?.category_id\">\r\n                                        <span class=\"value\" [appTooltip]=\"program?.name\" placement=\"bottom\"\r\n                                        type=\"black\" delay=\"0\" [tooltipMandatory]=\"false\">\r\n                                            <i *ngIf=\"!hiddenList?.includes('PROGRAM') && !program?.isViewOnlyProgram\" class=\"icons\" (click)=\"remove('program',program)\">&#xe90d;</i>\r\n                                            {{ program?.name }}\r\n                                        </span>\r\n                                    </div>\r\n                                </li>\r\n                            </ul>\r\n                        </div>\r\n                    </app-popover>\r\n                    <div *ngIf=\"responsibilityForm?.customTags?.length >0\">\r\n                        <ng-container *ngFor=\" let tag of responsibilityForm?.customTags\">\r\n                            <label class=\"vx-control-panel\">{{tag.tag_name}}</label>\r\n                            <input type=\"text\" [(ngModel)]=\"tag.value\" placeholder=\"{{tag.tag_name}}\">\r\n                        </ng-container>\r\n                    </div>\r\n                </div>\r\n        </div>\r\n    </div>\r\n    <!-- Responsibility Category -->\r\n    <!-- <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.CATEGORY\" [attr.id]=\"'CATEGORY'\"\r\n        [class.active]=\"activeSelector === 'category'\"\r\n        [class.disabled]=\"activeSelector && activeSelector !== 'category' && sideSelectorElements.includes(activeSelector)\">\r\n        <div class=\"left\" [class.checked]=\"responsibilityForm?.category?.length>0 && activeSelector !== 'category'\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/category.svg\" alt=\"\"\r\n                *ngIf=\"responsibilityForm?.category?.length==0 || activeSelector === 'category'\">\r\n\r\n            <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\"\r\n                *ngIf=\"responsibilityForm?.category?.length>0 && activeSelector !== 'category'\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n            <div class=\"vx-form-group\">\r\n                <label class=\"vx-control-panel\">Responsibility Category </label>\r\n                <div class=\"select\" *ngIf=\"responsibilityForm?.category?.length ==0\">\r\n                    <div class=\"custom-input\" (click)=\"activateSelector('category',true)\"\r\n                        aria-placeholder=\"Select the responsibility category or categories that this responsibility relates to.\">\r\n                    </div>\r\n                </div>\r\n                <div class=\"selected\" *ngIf=\"responsibilityForm?.category?.length > 0\">\r\n                    <div class=\"chip-container\" [class.more-one]=\"responsibilityForm?.category?.length>1\"\r\n                        [class.plus]=\"responsibilityForm?.category?.length>2\">\r\n                        <span class=\"chip\" *ngFor=\"let category of responsibilityForm?.category?.slice(0,2)\"><i\r\n                                class=\"icons\" (click)=\"remove('category',category)\">&#xe90d;</i>\r\n                            {{category.item_name}}</span>\r\n                        <button class=\"count\" *ngIf=\"responsibilityForm?.category?.length > 2\" type=\"button\" appPopover\r\n                            (click)=\"category.popover()\" placement=\"right\">+\r\n                            {{responsibilityForm?.category?.slice(2).length}}</button>\r\n                    </div>\r\n                    <button *ngIf=\"activeSelector !== 'category'\" class=\"edit\" type=\"button\"\r\n                        (click)=\"activateSelector('category',true)\"><i class=\"icons\">&#xe9ba;</i>\r\n                        Edit</button>\r\n                </div>\r\n                <app-popover #category [dontCloseonClick]=\"true\">\r\n                    <div class=\"action-list\">\r\n                        <ul class=\"action-item\">\r\n                            <li *ngFor=\"let category of responsibilityForm?.category | slice: 2; let j = index\">\r\n                                <div class=\"avatar-card\">\r\n                                    <span class=\"value\">\r\n                                        <i class=\"icons\" (click)=\"remove('category',category)\">&#xe90d;</i>\r\n                                        {{ category.item_name }}\r\n                                    </span>\r\n                                </div>\r\n                            </li>\r\n                        </ul>\r\n                    </div>\r\n                </app-popover>\r\n                <div *ngIf=\"responsibilityForm?.customTags?.length >0\">\r\n                    <ng-container *ngFor=\" let tag of responsibilityForm?.customTags\">\r\n                        <label class=\"vx-control-panel\">{{tag.tag_name}}</label>\r\n                        <input type=\"text\" ngDefaultControl [(ngModel)]=\"tag.value\" placeholder=\"{{tag.tag_name}}\">\r\n                    </ng-container>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div> -->\r\n\r\n    <!-- Format & Evidence -->\r\n    <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.FORMATE_EVIDENCE\"\r\n        [attr.id]=\"'FORMATE_EVIDENCE'\" [class.active]=\"activeSelector === 'formate_evidence'\"\r\n        [class.disabled]=\"activeSelector && activeSelector !== 'formate_evidence' && sideSelectorElements.includes(activeSelector)\">\r\n        <div class=\"left\" [class.checked]=\"false\">\r\n            <img *ngIf=\"this.responsibilityForm.formatAndEvidence.evidenceRequired == false && this.responsibilityForm.formatAndEvidence.formatFiles.length == 0 && this.responsibilityForm.formatAndEvidence.formatLinks?.length == 0\"\r\n                src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/format-evidence.svg\" alt=\"im\">\r\n\r\n            <svg *ngIf=\"this.responsibilityForm.formatAndEvidence.evidenceRequired || this.responsibilityForm.formatAndEvidence.formatFiles.length || this.responsibilityForm.formatAndEvidence.formatLinks?.length\"\r\n                class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n            <app-format-and-evidence (updateFiles)=\"saveSelectedList('formate_evidence',$event)\"\r\n                [mode]=\"'responsibility'\" [formatEvidanceData]=\"responsibilityForm?.formatAndEvidence\">\r\n            </app-format-and-evidence>\r\n        </div>\r\n\r\n    </div>\r\n    <!-- Assessment -->\r\n    <div *ngIf=\"moreOptions?.ASSESSMENT\" [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\"\r\n        [attr.id]=\"'ASSESSMENT'\" [class.active]=\"false\" [class.disabled]=\"false\">\r\n        <div class=\"left\" [class.checked]=\"responsibilityForm.assessment?.assessment_id\">\r\n            <img *ngIf=\"!responsibilityForm.assessment?.assessment_id\"\r\n                src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/assessments.svg\" alt=\"im\">\r\n\r\n            <svg *ngIf=\"responsibilityForm.assessment?.assessment_id\" class=\"checkIcon\"\r\n                xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n            <div class=\"vx-form-group\">\r\n                <label class=\"vx-control-panel\">ASSESSMENTS</label>\r\n                <div *ngIf=\"!responsibilityForm.assessment?.assessment_id\" class=\"select\">\r\n                    <input type=\"text\" (click)=\"activateSelector('isAssessment',true);isAssessment = true\"\r\n                        placeholder=\"Select an assessment for this responsibility\"\r\n                        [disabled]=\"responsibilityForm.checkpoints?.length\" readonly>\r\n                </div>\r\n                <div class=\"selected\" *ngIf=\"responsibilityForm.assessment?.assessment_id\">\r\n                    <div class=\"chip-container\" [class.more-one]=\"false\" [class.plus]=\"false\">\r\n                        <span class=\"chip with-question\">\r\n                            <span class=\"value\"\r\n                                [appTooltip]=\"responsibilityForm.assessment?.assessmentDetails?.assessment_name\"\r\n                                placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\"><i\r\n                                    class=\"icons\"\r\n                                    (click)=\"remove('assessment',category)\">&#xe90d;</i>{{responsibilityForm.assessment?.assessmentDetails?.assessment_name}}</span>\r\n                            <span class=\"label\">{{responsibilityForm.assessment?.assessmentDetails?.questions}}\r\n                                {{responsibilityForm.assessment?.assessmentDetails?.questions > 1 ? 'Questions':\r\n                                'Question'}}</span>\r\n                        </span>\r\n                    </div>\r\n                    <button (click)=\"activateSelector('isAssessment',true);isAssessment = true\" class=\"edit\"\r\n                        type=\"button\">\r\n                        <i class=\"icons\">&#xe9ba;</i> Edit\r\n                    </button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n    </div>\r\n    <!-- Checkpoints -->\r\n    <!-- *ngIf=\"moreOptions.checkpoints\" -->\r\n    <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.CHECKPOINTS\"\r\n        [attr.id]=\"'CHECKPOINTS'\" [class.active]=\"activeSelector === 'checkpoints'\"\r\n        [class.disabled]=\"activeSelector && activeSelector !== 'checkpoints' && sideSelectorElements.includes(activeSelector)\">\r\n        <div class=\"left\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/checkpoints.svg\" alt=\"im\"\r\n                *ngIf=\"responsibilityForm?.checkpoints?.length==0 || activeSelector === 'checkpoints'\">\r\n\r\n            <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\"\r\n                *ngIf=\"responsibilityForm?.checkpoints?.length>0 && activeSelector !== 'checkpoints'\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n            <div class=\"vx-form-group\">\r\n                <label class=\"vx-control-panel\">\r\n                    <!-- {{responsibilityForm.checkpoints|json}}\r\n                  {{responsibilityForm.checkpointInstruction}} -->\r\n\r\n                    Checkpoints\r\n                    <!-- <button *ngIf=\"responsibilityForm?.checkpoints?.length === 0\" class=\"button\"\r\n                        (click)=\"activateSelector('checkpoints',true)\">+ Add Checkpoints</button> -->\r\n                </label>\r\n                <div class=\"select button-sec\" *ngIf=\"responsibilityForm?.checkpoints?.length === 0\">\r\n                    <input [disabled]=\"!responsibilityForm.checkpoints?.length\" type=\"text\"\r\n                        (click)=\"activateSelector('checkpoints',true)\"\r\n                        placeholder=\"Add checkpoints for this responsibility\" readonly>\r\n                    <button [disabled]=\"!responsibilityForm.checkpoints?.length\"\r\n                        (click)=\"activateSelector('checkpoints',true)\" type=\"button\">Add Checkpoints</button>\r\n                </div>\r\n                <div class=\"selected\" *ngIf=\"responsibilityForm.checkpoints?.length > 0\">\r\n                    <div class=\"chip-container checkpoints\" [class.more-one]=\"responsibilityForm.checkpoints?.length>1\"\r\n                        [class.plus]=\"responsibilityForm.checkpoints?.length>2\">\r\n                        <span class=\"chip\" *ngFor=\"let checkpoint of responsibilityForm.checkpoints?.slice(0,1)\">\r\n                            {{checkpoint?.label}}</span>\r\n                        <button class=\"count\" *ngIf=\"responsibilityForm.checkpoints?.length > 1\" type=\"button\"\r\n                            appPopover (click)=\"checkpoint.popover()\" placement=\"right\">+\r\n                            {{responsibilityForm.checkpoints?.length- 1}}</button>\r\n                    </div>\r\n                    <button *ngIf=\"activeSelector !== 'checkpoints'\" class=\"edit\" type=\"button\"\r\n                        (click)=\"activateSelector('checkpoints',true)\">\r\n                        <i class=\"icons\">&#xe9ba;</i> Edit\r\n                    </button>\r\n                </div>\r\n            </div>\r\n            <div *ngIf=\"this.responsibilityForm.checkpoints?.length\" class=\"assessment-text\">\r\n                <i class=\"icons alert-icon\">&#xe930;</i>\r\n                <span>You can now use the new <strong>Checkpoints </strong>or <strong>Assessments</strong> feature\r\n                    instead of the old checkpoints functionality to create analytical questions. <button\r\n                        class=\"remove-btn\" (click)=\"onRemoveCheckpoints('checkpoint')\">Remove Checkpoints</button> to\r\n                    continue.</span>\r\n            </div>\r\n            <app-popover #checkpoint [dontCloseonClick]=\"true\">\r\n                <div class=\"action-list\">\r\n                    <ul class=\"action-item\">\r\n                        <li *ngFor=\"let checkpoint of responsibilityForm.checkpoints | slice: 1; let j = index\">\r\n                            <div class=\"avatar-card\">\r\n                                <span class=\"value\">\r\n                                    {{ checkpoint?.label }}\r\n                                </span>\r\n                            </div>\r\n                        </li>\r\n                    </ul>\r\n                </div>\r\n            </app-popover>\r\n        </div>\r\n    </div>\r\n    <!-- New  Checkpoints -->\r\n    <!-- *ngIf=\"moreOptions.checkpoints\" -->\r\n    <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.CHECKPOINTS_NEW\"\r\n        [attr.id]=\"'CHECKPOINTS-NEW'\" [class.active]=\"activeSelector === 'checkpoints-new'\">\r\n        <div class=\"left\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/checkpoints.svg\" alt=\"im\"\r\n                *ngIf=\"responsibilityForm?.checkpoints?.length==0 || activeSelector === 'checkpoints'\">\r\n\r\n            <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\"\r\n                *ngIf=\"checkpointCount > 0 && activeSelector !== 'checkpoints'\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n            <div class=\"vx-form-group\">\r\n                <label class=\"vx-control-panel\">\r\n                    <!-- {{responsibilityForm.checkpoints|json}}\r\n                  {{responsibilityForm.checkpointInstruction}} -->\r\n\r\n                    Checkpoints\r\n                    <!-- <span class=\"checkpoint-version\"> V2.0</span> -->\r\n                    <!-- <button  class=\"button\"\r\n                        (click)=\"activateSelector('checkpoints-new',true)\">+ Add Checkpoints</button> -->\r\n                </label>\r\n                <div class=\"select button-sec\" *ngIf=\"checkpointCount === 0\">\r\n                    <input type=\"text\" (click)=\"activateSelector('checkpoints-new',true)\"\r\n                        placeholder=\"Add checkpoints for this responsibility\" readonly>\r\n                    <button (click)=\"activateSelector('checkpoints-new',true)\" type=\"button\">Add Checkpoints</button>\r\n                </div>\r\n                <div class=\"selected\" *ngIf=\"checkpointCount > 0\">\r\n                    <div class=\"chip-container checkpoints\" [class.more-one]=\"checkpointCount > 0\">\r\n                        <span class=\"chip\">\r\n                            <i class=\"icons\" (click)=\"onRemoveCheckpoints('new-checkpoints')\">&#xe90d;</i>\r\n                            {{checkpointCount}} {{checkpointCount > 1 ? 'Questions': 'Question'}}</span>\r\n                    </div>\r\n                    <button *ngIf=\"activeSelector !== 'checkpoints-new'\" class=\"edit\" type=\"button\"\r\n                        (click)=\"activateSelector('checkpoints-new',true)\">\r\n                        <i class=\"icons\">&#xe9ba;</i> Edit\r\n                    </button>\r\n                </div>\r\n            </div>\r\n            <app-popover #checkpoint [dontCloseonClick]=\"true\">\r\n                <div class=\"action-list\">\r\n                    <ul class=\"action-item\">\r\n                        <li *ngFor=\"let checkpoint of responsibilityForm.checkpoints | slice: 1; let j = index\">\r\n                            <div class=\"avatar-card\">\r\n                                <span class=\"value\">\r\n                                    {{ checkpoint?.label }}\r\n                                </span>\r\n                            </div>\r\n                        </li>\r\n                    </ul>\r\n                </div>\r\n            </app-popover>\r\n        </div>\r\n    </div>\r\n    <!-- Risk Classification -->\r\n    <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.RISK_CLASSIFICATION\"\r\n        [attr.id]=\"'RISK_CLASSIFICATION'\" [class.active]=\"activeSelector === 'riskCalculator'\"\r\n        [class.disabled]=\"activeSelector && activeSelector !== 'riskCalculator' && sideSelectorElements.includes(activeSelector)\">\r\n        <div class=\"left\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/risks.svg\" alt=\"im\">\r\n\r\n            <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n            <div class=\"vx-form-group\">\r\n                <label class=\"vx-control-panel\">\r\n                    Risk Classification\r\n                    <button (click)=\"activateSelector('riskCalculator',true)\" class=\"button\">+ Risk Calculator</button>\r\n                </label>\r\n\r\n                <div class=\"classification\">\r\n                    <label class=\"low\" *ngFor=\"let risk of riskClassification\" [ngClass]=\"[risk.class]\">\r\n                        <input type=\"radio\" name=\"classification\" ngDefaultControl [(ngModel)]=\"responsibilityForm.riskClass\"\r\n                            [value]=\"risk?.value\">\r\n                        <span>{{risk?.name}}</span>\r\n                    </label>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <!-- Reviewer -->\r\n    <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.REVIEWER\" [attr.id]=\"'REVIEWER'\"\r\n        [class.active]=\"activeSelector === 'reviewerFrequency'\"\r\n        [class.disabled]=\"activeSelector && activeSelector !== 'reviewer' && sideSelectorElements.includes(activeSelector)\">\r\n        <div class=\"left\" [class.checked]=\"false\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/reviewer.svg\" alt=\"\"\r\n                *ngIf=\"responsibilityForm?.reviewers?.list?.length==0 || activeSelector === 'reviewer'\">\r\n\r\n            <svg *ngIf=\"responsibilityForm?.reviewers?.list?.length>0 && activeSelector !== 'reviewer'\"\r\n                class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n            <div class=\"vx-form-group\">\r\n                <label class=\"vx-control-panel\">Reviewer</label>\r\n                <div class=\"select\" *ngIf=\"responsibilityForm?.reviewers?.list?.length == 0\">\r\n                    <input type=\"text\" (click)=\"activateSelector('reviewer',true)\" placeholder=\"Select Reviewer\"\r\n                        readonly>\r\n                </div>\r\n                <div class=\"selected\" *ngIf=\"responsibilityForm?.reviewers?.list?.length > 0\">\r\n                    <div class=\"chip-container\" [class.more-one]=\"responsibilityForm?.reviewers?.list?.length>1\"\r\n                        [class.plus]=\"responsibilityForm?.reviewers?.list?.length>2\">\r\n                        <span class=\"chip\" *ngFor=\"let reviewer of responsibilityForm?.reviewers?.list?.slice(0,2)\"><i\r\n                                class=\"icons\" (click)=\"remove('reviewer',reviewer)\">&#xe90d;</i>\r\n                            {{reviewer.member_name}}</span>\r\n                        <button class=\"count\" *ngIf=\"responsibilityForm?.reviewers?.list?.length > 2\" type=\"button\"\r\n                            appPopover (click)=\"reviewer.popover()\" placement=\"right\">+\r\n                            {{responsibilityForm?.reviewers?.list?.slice(2).length}}</button>\r\n                    </div>\r\n                    <button *ngIf=\"activeSelector !== 'reviewer'\" class=\"edit\" type=\"button\"\r\n                        (click)=\"activateSelector('reviewer',true)\"><i class=\"icons\">&#xe9ba;</i>\r\n                        Edit</button>\r\n                </div>\r\n                <app-cs-radio\r\n\r\n                    [checked]=\"responsibilityForm.reviewers.sequentialWorkflow\" [name]=\"'reviewer'\" (checkedEvent)=\"onReviewerWorkflowChange('sequential')\">\r\n                    SEQUENTIAL<i class=\"icons\"\r\n                        [appTooltip]=\"'The responsibility will be sent for review one at a time in the sequence defined by you.'\"\r\n                        placement=\"bottom-right\" delay=\"0\" type=\"white\" [tooltipMandatory]=\"true\">&#xe91f;</i>\r\n                </app-cs-radio>\r\n                <app-cs-radio\r\n                    [checked]=\"!responsibilityForm.reviewers.sequentialWorkflow\" [name]=\"'reviewer'\" (checkedEvent)=\"onReviewerWorkflowChange('anyReviewer')\">\r\n                    ANY REVIEWER CAN MARK THIS AS REVIEWED<i class=\"icons\"\r\n                        [appTooltip]=\"'The responsibility will be sent for review to all reviewers at the same time. If anyone of the reviewer reviews the responsibility, it will be considered as reviewed.'\"\r\n                        placement=\"bottom-right\" delay=\"0\" type=\"white\" [tooltipMandatory]=\"true\">&#xe91f;</i>\r\n                </app-cs-radio>\r\n                <app-popover #reviewer [dontCloseonClick]=\"true\">\r\n                    <div class=\"action-list\">\r\n                        <ul class=\"action-item\">\r\n                            <li *ngFor=\"let reviewer of responsibilityForm?.reviewers?.list | slice: 2; let j = index\">\r\n                                <div class=\"avatar-card\">\r\n                                    <span class=\"value\">\r\n                                        <i class=\"icons\" (click)=\"remove('reviewer',reviewer)\">&#xe90d;</i>\r\n                                        {{ reviewer.member_name }}\r\n                                    </span>\r\n                                </div>\r\n                            </li>\r\n                        </ul>\r\n                    </div>\r\n                </app-popover>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <!-- Overseer -->\r\n    <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.OVERSEER\" [attr.id]=\"'OVERSEER'\"\r\n        [class.active]=\" activeSelector === 'overseerNotify' ||  activeSelector === 'overseer'\"\r\n        [class.disabled]=\"activeSelector &&  !['overseerNotify','overseerNotify'].includes(activeSelector) && sideSelectorElements.includes(activeSelector)\">\r\n        <div class=\"left\" [class.checked]=\"false\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/oversight.svg\" alt=\"\"\r\n                *ngIf=\"(responsibilityForm?.overseers?.list?.length==0 && responsibilityForm?.overseers?.notifyList?.length == 0)|| activeSelector === 'overseerNotify' ||  activeSelector === 'overseer'\">\r\n            <svg class=\"checkIcon\" *ngIf=\"(responsibilityForm?.overseers?.list?.length>0 || responsibilityForm?.overseers?.notifyList?.length>0)\r\n                && !( activeSelector === 'overseerNotify' ||  activeSelector === 'overseer')\"\r\n                xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n            <div class=\"vx-form-group\">\r\n                <label class=\"vx-control-panel\">Overseer </label>\r\n                <div class=\"select\" *ngIf=\"responsibilityForm?.overseers?.list?.length == 0\">\r\n                    <input type=\"text\" (click)=\"activateSelector('overseer',true)\"\r\n                        placeholder=\"Who should have oversight of the responsibility?\" readonly>\r\n                </div>\r\n                <div class=\"selected\" *ngIf=\"responsibilityForm?.overseers?.list?.length > 0\">\r\n                    <div class=\"chip-container\" [class.more-one]=\"responsibilityForm?.overseers?.list?.length>1\"\r\n                        [class.plus]=\"responsibilityForm?.overseers?.list?.length>2\">\r\n                        <span class=\"chip\" *ngFor=\"let overseer of responsibilityForm?.overseers?.list?.slice(0,2)\"><i\r\n                                class=\"icons\" (click)=\"remove('overseer',overseer)\">&#xe90d;</i>\r\n                            {{overseer.member_name}}</span>\r\n                        <button class=\"count\" *ngIf=\"responsibilityForm?.overseers?.list?.length > 2\" type=\"button\"\r\n                            appPopover (click)=\"overseers.popover()\" placement=\"right\">+\r\n                            {{responsibilityForm?.overseers?.list?.slice(2).length}}</button>\r\n                    </div>\r\n                    <button *ngIf=\"activeSelector !== 'overseer'\" class=\"edit\" type=\"button\"\r\n                        (click)=\"activateSelector('overseer',true)\"><i class=\"icons\">&#xe9ba;</i>\r\n                        Edit</button>\r\n                </div>\r\n\r\n                <div class=\"select\" *ngIf=\"responsibilityForm?.overseers?.notifyList?.length == 0\">\r\n                    <input type=\"text\" (click)=\"activateSelector('overseerNotify',true)\"\r\n                        placeholder=\"Who should be notified if the responsibility is not complet...\" readonly\r\n                        [appTooltip]=\"'Who should be notified if the responsibility is not completed?'\"\r\n                        placement=\"bottom\" delay=\"0\" [tooltipMandatory]=\"true\">\r\n                </div>\r\n                <div class=\"selected\" *ngIf=\"responsibilityForm?.overseers?.notifyList?.length > 0\">\r\n                    <div class=\"chip-container\" [class.more-one]=\"responsibilityForm?.overseers?.notifyList?.length>1\"\r\n                        [class.plus]=\"responsibilityForm?.overseers?.notifyList?.length>2\">\r\n                        <span class=\"chip\"\r\n                            *ngFor=\"let overseer of responsibilityForm?.overseers?.notifyList?.slice(0,2)\"><i\r\n                                class=\"icons\" (click)=\"remove('overseerNotifyList',overseer)\">&#xe90d;</i>\r\n                            {{overseer.member_name}}</span>\r\n                        <button class=\"count\" *ngIf=\"responsibilityForm?.overseers?.notifyList?.length > 2\"\r\n                            type=\"button\" appPopover (click)=\"notify.popover()\" placement=\"right\">+\r\n                            {{responsibilityForm?.overseers?.notifyList?.slice(2).length}}</button>\r\n                    </div>\r\n                    <button *ngIf=\"activeSelector !== 'overseerNotify'\" class=\"edit\" type=\"button\"\r\n                        (click)=\"activateSelector('overseerNotify',true)\"><i class=\"icons\">&#xe9ba;</i>\r\n                        Edit</button>\r\n                </div>\r\n                <app-popover #overseers [dontCloseonClick]=\"true\">\r\n                    <div class=\"action-list\">\r\n                        <ul class=\"action-item\">\r\n                            <li *ngFor=\"let overseer of responsibilityForm?.overseers?.list | slice: 2; let j = index\">\r\n                                <div class=\"avatar-card\">\r\n                                    <span class=\"value\">\r\n                                        <i class=\"icons\" (click)=\"remove('overseer',overseer)\">&#xe90d;</i>\r\n                                        {{ overseer.member_name }}\r\n                                    </span>\r\n                                </div>\r\n                            </li>\r\n                        </ul>\r\n                    </div>\r\n                </app-popover>\r\n                <app-popover #notify [dontCloseonClick]=\"true\">\r\n                    <div class=\"action-list\">\r\n                        <ul class=\"action-item\">\r\n                            <li\r\n                                *ngFor=\"let overseer of responsibilityForm?.overseers?.notifyList | slice: 2; let j = index\">\r\n                                <div class=\"avatar-card\">\r\n                                    <span class=\"value\">\r\n                                        <i class=\"icons\" (click)=\"remove('overseerNotifyList',overseer)\">&#xe90d;</i>\r\n                                        {{ overseer.member_name }}\r\n                                    </span>\r\n                                </div>\r\n                            </li>\r\n                        </ul>\r\n                    </div>\r\n                </app-popover>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <!-- Assurance -->\r\n\r\n    <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\"\r\n    *ngIf=\"moreOptions?.REQUIRES_AUDIT && responsibilityForm.rc.length > 0\" [attr.id]=\"'REQUIRES_AUDIT'\"\r\n    [class.active]=\"activeSelector === 'requires_audit'\"\r\n    [class.disabled]=\"activeSelector && activeSelector !== 'requires_audit' && sideSelectorElements.includes(activeSelector)\">\r\n    <div class=\"left\" [class.checked]=\"false\">\r\n        <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/audit.svg\" alt=\"\"\r\n            *ngIf=\"responsibilityForm?.requiresAuditList?.length==0 || activeSelector === 'requires_audit'\">\r\n\r\n        <svg *ngIf=\"responsibilityForm?.requiresAuditList?.length>0 && activeSelector !== 'requires_audit'\"\r\n            class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n            <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n            <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n        </svg>\r\n    </div>\r\n    <div class=\"right\">\r\n        <div class=\"vx-form-group\">\r\n            <label class=\"vx-control-panel\">REQUIRES AUDIT?</label>\r\n            <div class=\"select\" *ngIf=\"responsibilityForm?.requiresAuditList?.length ==0\">\r\n                <!-- <div class=\"custom-input\" (click)=\"activateSelector('assurance',true)\" aria-placeholder=\"Select the test plan categories that you would like to add this responsibility to.\"></div> -->\r\n                <!-- <input type=\"text\" (click)=\"activateSelector('assurance',true)\"\r\n                    placeholder=\"Select the test plan categories that you would like to add...\"\r\n                    readonly [appTooltip]=\"'Select the test plan categories that you would like to add this responsibility to.'\" placement=\"bottom\" delay=\"0\" [tooltipMandatory]=\"true\"> -->\r\n\r\n                <input type=\"text\" placeholder=\"If yes, select an Audit Category.\" readonly\r\n                    (click)=\"activateSelector('requires_audit',true)\">\r\n            </div>\r\n            <div class=\"selected\" *ngIf=\"responsibilityForm?.requiresAuditList?.length > 0\">\r\n                <!-- <div class=\"chip-container\" [class.more-one]=\"responsibilityForm?.assuranceList?.length>1\" [class.plus]=\"responsibilityForm?.assuranceList?.length>2\">\r\n                    <span class=\"chip\" *ngFor=\"let assurance of responsibilityForm?.assuranceList?.slice(0,2)\"><i\r\n                            class=\"icons\" (click)=\"remove('assurance',assurance)\">&#xe90d;</i>\r\n                        {{assurance.category_name}}</span>\r\n                    <button class=\"count\" *ngIf=\"responsibilityForm?.assuranceList?.length > 2\" type=\"button\"\r\n                        appPopover (click)=\"assurance.popover()\" placement=\"right\">+\r\n                        {{responsibilityForm?.assuranceList?.slice(2).length}}</button>\r\n                </div> -->\r\n                <!-- <button *ngIf=\"activeSelector !== 'assurance'\" class=\"edit\" type=\"button\" (click)=\"activateSelector('assurance',true)\"><i\r\n                        class=\"icons\">&#xe90c;</i>\r\n                    Edit</button> -->\r\n\r\n                <div class=\"chip-container\">\r\n                    <span class=\"chip\"><i class=\"icons\" (click)=\"remove('requires_audit',overseer)\">&#xe90d;</i>\r\n                        {{responsibilityForm?.requiresAuditList[0]?.category_name}}</span>\r\n                </div>\r\n                <button class=\"edit\" type=\"button\" (click)=\"activateSelector('requires_audit',true)\"><i\r\n                        class=\"icons\">&#xe90c;</i> Edit</button>\r\n                <!-- class=\"icons\">&#xe9ba;</i>\r\n                    Edit</button> -->\r\n            </div>\r\n            <ng-container *ngIf=\"responsibilityForm?.requiresAuditList?.length\">\r\n                <label class=\"vx-control-panel vx-mt-8\">\r\n                    SAMPLE SIZE\r\n                    <app-cs-switch [(ngValue)]=\"isSample\" (ngValueChange)=\"switchEnable($event)\"></app-cs-switch>\r\n                </label>\r\n                <div class=\"sample-part\" [class.disabled]=\"!isSample\">\r\n                    <app-cs-radio value=\"0\" class=\"sample-radio\" (click)=\"selectedSampleData(0)\"\r\n                        [checked]=\"selectedSample === 0\">\r\n                        <div class=\"name\">COUNT</div>\r\n                        <input type=\"number\" placeholder=\"--\" (keypress)=\"checkInputValue($event)\"\r\n                            [(ngModel)]=\"sampleValue\">\r\n                    </app-cs-radio>\r\n                    <div class=\"or\">OR</div>\r\n                    <app-cs-radio value=\"1\" class=\"sample-radio\" (click)=\"selectedSampleData(1)\"\r\n                        [checked]=\"selectedSample === 1\">\r\n                        <div class=\"name\">PERCENTAGE</div>\r\n                        <input type=\"number\" (keypress)=\"checkInputValue($event)\" [(ngModel)]=\"samplePercentage\"\r\n                            placeholder=\"--\">\r\n                    </app-cs-radio>\r\n                </div>\r\n                <label class=\"vx-control-panel vx-mt-8\">SET A REMINDER IF THE AUDIT PLAN IS NOT CREATED.</label>\r\n                <div class=\"reminder-part\">\r\n                    Send reminder every <input type=\"number\" value=\"2\" [(ngModel)]=\"sendAuditRemindersValue\"> Day by\r\n                    <div class=\"picker-group\">\r\n                        <input class=\"time\" aria-label=\"12hr format\" [(ngModel)]=\"auditTime\"\r\n                            [ngxTimepicker]=\"dailyTime\" placeholder=\"auditTime.toUpperCase()\" type=\"text\"\r\n                            [min]=\"currentTime\" readonly>\r\n                        <i class=\"icons\">&#xe955;</i>\r\n                        <ngx-material-timepicker #dailyTime [defaultTime]=\"auditTime\">\r\n                        </ngx-material-timepicker>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n            <!-- <app-popover #assurance [dontCloseonClick]=\"true\">\r\n                <div class=\"action-list\">\r\n                    <ul class=\"action-item\">\r\n                        <li *ngFor=\"let assurance of responsibilityForm?.assuranceList | slice: 2; let j = index\">\r\n                            <div class=\"avatar-card\">\r\n                                <span class=\"value\">\r\n                                    <i class=\"icons\" (click)=\"remove('assurance',assurance)\">&#xe90d;</i>\r\n                                    {{ assurance.category_name }}\r\n                                </span>\r\n                            </div>\r\n                        </li>\r\n                    </ul>\r\n                </div>\r\n            </app-popover> -->\r\n        </div>\r\n    </div>\r\n</div>\r\n</div>\r\n\r\n\r\n<app-users-radio-list *ngIf=\"activeSelector === 'assignors'\" [usersList]=\"assignorsList\"\r\n    [selectedUsers]=\"responsibilityForm.assignors.list\" [itemEmailKey]=\"'member_email'\" [userIdKey]=\"'member_id'\"\r\n    [itemNameKey]=\"'member_name'\" (saveSelectedList)=\"saveSelectedList('assignors',$event)\"\r\n    (closeUsersList)=\"activeDeselector()\">\r\n</app-users-radio-list>\r\n\r\n<ng-container *ngIf=\"activeSelector === 'assignees'\">\r\n  <app-group-users-list *ngIf=\"isEntrust || responsibilityForm.assignees.whoCanComplete === 'ANY_ONE'\" [openedFrom]=\"openedFrom\" [usersList]=\"assigneesList\"\r\n    [groupsList]=\"groupsList\" [selectedUsers]=\"responsibilityForm.assignees.list\" [userIdKey]=\"'my_member_id'\"\r\n    (saveSelectedList)=\"saveSelectedList('assignees',$event)\" (closeUsersList)=\"activeDeselector()\">\r\n  </app-group-users-list>\r\n  <app-users-radio-list *ngIf=\"!isEntrust && responsibilityForm.assignees.whoCanComplete !== 'ANY_ONE'\" [itemEmailKey]=\"'employee_email'\" [usersList]=\"assigneesList\"\r\n    [selectedUsers]=\"responsibilityForm.assignees.list\" [userIdKey]=\"'employee_id'\" [itemNameKey]=\"'employee_name'\"\r\n    (saveSelectedList)=\"saveSelectedList('assignees',$event)\" (closeUsersList)=\"activeDeselector()\">\r\n  </app-users-radio-list>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"activeSelector === 'what' && responsibilityForm.responsibility_type == 1\">\r\n    <app-system-task-selector [systemResponsibilityList]=\"systemResponsibilityList?.data\" [selectedResponsibilities]=\"responsibilityForm.systemResponsibilies\"\r\n        [systemResponsibilityIdKey]=\"'_id'\" [responsibilityNameKey]=\"'name'\"\r\n        (saveSelectedList)=\"saveSelectedList('system_responsibility',$event)\" (closeResponsibilityList)=\"activeDeselector()\">\r\n    </app-system-task-selector>\r\n</ng-container>\r\n\r\n\r\n\r\n<app-checkpoints *ngIf=\"activeSelector === 'checkpoints'\"\r\n    [checkpointInstruction]=\"responsibilityForm?.checkpointInstruction\"\r\n    [checkpointData]=\"responsibilityForm?.checkpoints\" (saveCheckPoint)=\"saveSelectedList('checkpoints',$event)\"\r\n    (closeCheckPoint)=\"activeDeselector()\"></app-checkpoints>\r\n<app-frequency-container *ngIf=\"activeSelector === 'frequency' && (responsibilityForm.responsibility_type == 0 || responsibilityForm.responsibility_type == 1)\" [frequencyDetails]=\"frequencyDetails\" [responsibilityType]=\"responsibilityForm.responsibility_type\"\r\n    (selectedFrequency)=\"frequencyData($event)\" [mode]=\"'responsibility'\" (closeFrequency)=\"activeDeselector()\">\r\n</app-frequency-container>\r\n\r\n<app-responsibility-centers-list *ngIf=\"activeSelector === 'rc'\" [responsibilityCentersList]=\"responsibilityCentersList\"\r\n    [radioSelection]=\"(mode == 'EDIT')?true:false\" [selectedResponsibilityCenters]=\"responsibilityForm.rc\"\r\n    [rcIdKey]=\"'item_id'\" (saveSelectedList)=\"saveSelectedList('rc',$event)\" (closeRcList)=\"activeDeselector()\">\r\n</app-responsibility-centers-list>\r\n\r\n<app-category-multi-select *ngIf=\"activeSelector === 'category'\" [categoryList]=\"categories\"\r\n    [allCategories]=\"allCategories\" [categoryIdKey]=\"'category_id'\" [selectedCategories]=\"responsibilityForm.category\"\r\n    (saveSelectedCategory)=\"saveSelectedList('category',$event)\" (closeCategoriesList)=\"activeDeselector()\">\r\n</app-category-multi-select>\r\n\r\n<!-- [hideProgramsList]=\"(selectedProgram  && !(this.selectedProgram?.programType === 0 && this.selectedProgram?.name?.toLowerCase() === 'uncategorized' )) ? true : false\" -->\r\n<app-program-listing *ngIf=\"activeSelector === 'program'\" [programsList]=\"programsList\"\r\n    [selectedCategories]=\"responsibilityForm.category | refDisconnect\" [selectedProgram]=\"responsibilityForm.program | refDisconnect\"\r\n    (saveSelectedProgram)=\"saveSelectedList('program',$event)\" (closeEvent)=\"activeDeselector()\" [linkedProgram]=\"responsibilityForm?.linkedProgram\" [mode]=\"(this.selectedProgram?.programType === 0 && this.selectedProgram?.name?.toLowerCase() === 'uncategorized' ) ? '' : mode\"\r\n    [openedFrom]=\"openedFrom\" [responsibilityId]=\"responsibilityId\"></app-program-listing>\r\n\r\n<app-owner-list *ngIf=\"activeSelector === 'reviewer'\" [listHeading]=\"'Select a Reviewer'\"\r\n    [singularText]=\"'User selected'\" [pluralText]=\"'Users selected'\" [usersList]=\"reviewersList\" [showWorkflow]=\"true\"\r\n    [selectedUsers]=\"responsibilityForm.reviewers.list\" [userIdKey]=\"'employee_id'\" [itemEmailKey]=\"'employee_email'\"\r\n    [itemNameKey]=\"'member_name'\"\r\n    (saveSelectedList)=\"saveSelectedList('reviewer',$event);activateSelector('reviewerFrequency',true)\"\r\n    (closeUsersList)=\"activeDeselector()\" [mode]=\"mode\"\r\n    [reviewerWorkflowType]=\"(responsibilityForm?.reviewers?.sequentialWorkflow) ? 'SEQUENTIAL' : 'ANY REVIEWER CAN MARK THIS AS REVIEWED'\"\r\n    (reviewerWorkflowTypeChange)=\"reviewerTypeChange($event)\">\r\n</app-owner-list>\r\n\r\n<app-owner-list *ngIf=\"activeSelector === 'overseer'\" [singularText]=\"'User selected'\" [pluralText]=\"'Users selected'\"\r\n    [usersList]=\"overseersList\" [selectedUsers]=\"responsibilityForm.overseers.list\" [userIdKey]=\"'employee_id'\"\r\n    [itemNameKey]=\"'member_name'\" (saveSelectedList)=\"saveSelectedList('overseer',$event)\"\r\n    (closeUsersList)=\"activeDeselector()\" [itemEmailKey]=\"'employee_email'\">\r\n</app-owner-list>\r\n\r\n<app-owner-list *ngIf=\"activeSelector ==='overseerNotify'\" [singularText]=\"'User selected'\"\r\n    [pluralText]=\"'Users selected'\" [usersList]=\"overseersList\"\r\n    [selectedUsers]=\"responsibilityForm.overseers.notifyList\" [userIdKey]=\"'employee_id'\" [itemNameKey]=\"'member_name'\"\r\n    (saveSelectedList)=\"saveSelectedList('overseerNotify',$event)\" (closeUsersList)=\"activeDeselector()\"\r\n    [itemEmailKey]=\"'employee_email'\"></app-owner-list>\r\n\r\n<app-owner-list *ngIf=\"activeSelector === 'assurance'\" [singularText]=\"'Test Category selected'\"\r\n    [pluralText]=\"'Test Categories selected'\" [searchPlaceholder]=\"'Search Test Category...'\"\r\n    [listHeading]=\"'Select Test Categories'\" [usersList]=\"assuranceCategoriesList\"\r\n    [noDataText]=\"'No Test Categories Found'\" [selectedUsers]=\"responsibilityForm.assuranceList\"\r\n    [userIdKey]=\"'category_id'\" [itemEmailKey]=\"'category_name'\" [itemNameKey]=\"'category_name'\"\r\n    (saveSelectedList)=\"saveSelectedList('assurance',$event)\" (closeUsersList)=\"activeDeselector()\"\r\n    [searchPlaceholder]=\"'Search Category'\">\r\n</app-owner-list>\r\n\r\n<app-audit-category-list *ngIf=\"activeSelector === 'requires_audit'\" (closeList)=\"activeDeselector()\"\r\n    [auditCategory]=\"assuranceRequiresAuditList\" (saveSelectedList)=\"saveSelectedList('requires_audit',$event)\"\r\n    [selectedData]=\"responsibilityForm?.requiresAuditList[0]\"></app-audit-category-list>\r\n\r\n<app-loader-inline *ngIf=\"loader\"></app-loader-inline>\r\n<app-framework-list *ngIf=\"activeSelector === 'framework'\"  (assignControl)=\"assignFromFramework($event)\"\r\n[previousSelectedValues]=\"selectedFrameworkValues\"\r\n    (closeFramework)=\"activeDeselector()\" (entrustFramework)=\"entrustFramework($event)\"></app-framework-list>\r\n\r\n<!-- risk-calculator here -->\r\n<app-risk-classification *ngIf=\"activeSelector === 'riskCalculator' \" [currentRiskValue]=\"responsibilityForm.riskClass\"\r\n    (saveList)=\"saveSelectedList('calculatedrisk',$event)\" (closeList)=\"activeDeselector()\">\r\n</app-risk-classification>\r\n\r\n<app-review-frequency *ngIf=\"activeSelector === 'reviewerFrequency'\"\r\n    [reviewCompleteDays]=\"responsibilityForm.reviewers.reviewFrequency.reviewCompleteDays\"\r\n    [reviewNOtCompletedDays]=\"responsibilityForm.reviewers.reviewFrequency.reviewNOtCompletedDays\"\r\n    (saveReviewFrequency)=\"saveSelectedList('reviewFrequency',$event)\"\r\n    (closeReviewFrequency)=\"activeDeselector();activateSelector('reviewer',false);responsibilityForm.reviewers.list = [];\"\r\n    (backToUserList)=\"activeDeselector();activateSelector('reviewer',true)\">\r\n</app-review-frequency>\r\n\r\n\r\n<app-assessment-list *ngIf=\"isAssessment\" [program_ids]=\"responsibilityForm.program[0]?._id\"\r\n    (cancelAssessment)=\"isAssessment = false; activateSelector('isAssessment', false)\"\r\n    [isEdit]=\"responsibilityForm?.assessment?.assessment_id ? true : false\"\r\n    [selectedAssessment]=\"responsibilityForm?.assessment\"\r\n    (onAssessmentSelect)=\"onAssessmentSelect($event);activateSelector('isAssessment', false)\"></app-assessment-list>\r\n\r\n<app-smiley-dialog-inline *ngIf=\"showSmiley\" [message]=\"smileyMessage\" [actionButtons]=\"actionButtons\"\r\n    (action)=\"action($event)\" (closeSmiley)=\"closeSmiley($event)\"></app-smiley-dialog-inline>\r\n\r\n<div class=\"import\" *ngIf=\"activeSelector === 'checkpoints-new'\">\r\n    <app-create-assessment-container #editor [openPortal]=\"'RESPONSIBILITY_CHECKPOINT'\"\r\n        (postAssessment)=\"postAssessment($event)\" (setIsUploaded)=\"setIsUploaded($event)\"\r\n        [checkpointJSON]=\"responsibilityForm.new_checkpoints\">\r\n    </app-create-assessment-container>\r\n</div>\r\n",
                     styles: ["@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");::ng-deep .workflw-compliance{display:block;position:relative}::ng-deep .workflw-compliance marx-editor .editor-container{border-radius:4px}::ng-deep .workflw-compliance marx-editor .editor-container .editable-block{min-height:72px;padding:11px 15px;line-height:20px;font-size:14px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%}@media not all and (min-resolution:0.001dpcm){@supports (-webkit-appearance:none){::ng-deep .workflw-compliance marx-editor .editor-container .editable-block:before{opacity:.72}}}::ng-deep .workflw-compliance marx-editor .editor-container .editable-block ul{padding:0 0 0 10px;margin-top:0}::ng-deep .workflw-compliance marx-editor .editor-container .editable-block ul li{list-style:unset}::ng-deep .workflw-compliance marx-editor .editor-container .editable-block ol{padding:0 0 0 10px;margin-top:0}::ng-deep .workflw-compliance marx-editor .editor-container .editable-block ol li{list-style:decimal}::ng-deep .workflw-compliance marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button{height:22px!important;width:22px!important;padding:0 5px}::ng-deep .workflw-compliance marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg{height:22px;width:22px}::ng-deep .workflw-compliance marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit{width:80px!important;line-height:22px;justify-content:center}::ng-deep .workflw-compliance marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button{width:100%!important;height:auto!important}::ng-deep .workflw-compliance .sample-part{display:flex;align-items:center;margin-bottom:4px}::ng-deep .workflw-compliance .sample-part .sample-radio{width:100%}::ng-deep .workflw-compliance .sample-part .sample-radio .radio-item{position:relative;width:100%}::ng-deep .workflw-compliance .sample-part .sample-radio .radio-item .radio{position:absolute;left:12px;top:12px}::ng-deep .workflw-compliance .sample-part .sample-radio .radio-item .value{border:1px solid #dbdbdb;border-radius:4px;height:40px;padding:8px 8px 8px 36px;margin:0;max-width:100%;width:100%;display:flex;align-items:center;justify-content:space-between;pointer-events:none}::ng-deep .workflw-compliance .sample-part .sample-radio .radio-item .value .name{color:#747576;font-size:11px;font-weight:500;text-transform:uppercase}::ng-deep .workflw-compliance .sample-part .sample-radio .radio-item .value input{border:1px solid #dcdcdc;background:#fff;border-radius:4px;height:24px;width:64px;text-align:center;padding:4px;color:#747576;font-size:13px}::ng-deep .workflw-compliance .sample-part .sample-radio .radio-item .value input:focus{outline:none;box-shadow:none}::ng-deep .workflw-compliance .sample-part .sample-radio .radio-item input:checked~svg{position:absolute;left:12px;top:12px}::ng-deep .workflw-compliance .sample-part .sample-radio .radio-item input:checked~.value{border:1px solid #34aa44;background:#eefcf0;pointer-events:auto}::ng-deep .workflw-compliance .sample-part .or{color:#161b2f;font-size:9px;font-weight:500;text-transform:uppercase;margin:0 10px}::ng-deep .workflw-compliance .sample-part.disabled{pointer-events:none}::ng-deep .workflw-compliance .sample-part.disabled .sample-radio .radio-item .value{background:#fbfbfb;border:1px solid #f1f1f1}::ng-deep .workflw-compliance .reminder-part{border:1px solid #dbdbdb;border-radius:4px;height:40px;padding:4px 12px;color:#747576;font-size:12px;display:flex;align-items:center}::ng-deep .workflw-compliance .reminder-part input{width:30px;border-radius:0;border:none;border-bottom:1px solid #dbdbdb;text-align:center;color:#747576;font-size:13px;font-weight:500;margin:0 4px}::ng-deep .workflw-compliance .reminder-part input:focus{outline:none!important;box-shadow:none!important}::ng-deep .workflw-compliance .reminder-part .picker-group{position:relative}::ng-deep .workflw-compliance .reminder-part .picker-group input{border:1px solid #f1f1f1!important;border-radius:4px!important;width:104px!important;height:28px!important;margin-left:8px!important;padding:6px 8px!important;cursor:pointer;color:#747576!important;font-size:12px!important;font-weight:500!important;text-align:left!important}::ng-deep .workflw-compliance .reminder-part .picker-group input:focus,::ng-deep .workflw-compliance .reminder-part .picker-group input:hover{outline:none!important;box-shadow:none!important}::ng-deep .workflw-compliance .reminder-part .picker-group i{color:#1e5dd3;position:absolute;top:6px;right:10px;font-size:16px}.assessment-text{color:#747576;font-size:11px;display:flex;align-items:center;padding:0 8px;margin:-16px 0 20px}.assessment-text i.alert-icon{color:#f2bf19;font-size:16px;margin-right:8px}.assessment-text strong{font-weight:600}.assessment-text button.remove-btn{background:transparent;border-radius:0;border:none;color:#1e5dd3;font-size:10px;font-weight:600;padding:0;margin:0}.import{position:fixed;top:0;right:30px;bottom:0;left:0;z-index:-1;width:calc(100vw - 30px)}.action-list ul.action-item li.multiple-program{background:#f8f8f8}.action-list ul.action-item li.multiple-program .avatar-card{padding:2px 7.5px}.action-list ul.action-item li.multiple-program .avatar-card span.value{color:#747576;font-size:11px;font-weight:600;width:unset}.action-list ul.action-item li.multiple-program .avatar-card .primary-label{background:#7aa7f7;border-radius:2px;color:#fff;font-size:9px;font-weight:500;text-transform:uppercase;padding:0 4px;line-height:12px;margin:0 4px}", "@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");::-webkit-scrollbar-track{background-color:#f1f1f1;position:absolute}::-webkit-scrollbar{width:3px;height:3px;background-color:transparent;position:absolute}::-webkit-scrollbar-thumb{border-radius:3px;background-color:#dbdbdb;position:absolute}input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}button{font-family:Poppins,sans-serif}::ng-deep .vx-form-group{display:block;position:relative;margin-bottom:20px}::ng-deep .vx-form-group:after{content:\"\";display:block;clear:both}::ng-deep .vx-form-group .select{position:relative}::ng-deep .vx-form-group .select:after{border-left-color:#707070;border-bottom:1px solid #707070;border-right:1px solid #707070;border-top-color:#707070;content:\"\";display:inline-block;right:15px;position:absolute;top:calc(50% - 4px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .vx-form-group .select input{cursor:pointer;padding-right:30px!important}::ng-deep .vx-form-group .select .custom-input{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#fff;outline:none;padding:3px 12px;line-height:16px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;cursor:pointer}::ng-deep .vx-form-group .select .custom-input:empty:not(:focus):before{content:attr(aria-placeholder);line-height:16px;font-size:13px;width:94%;display:block;pointer-events:none;opacity:.8}::ng-deep .vx-form-group .select .custom-input:hover{border-color:#1e5dd3;box-shadow:0 0 5px rgba(30,93,211,.27)}::ng-deep .vx-form-group .select .custom-input.frequency-custom-input{padding-right:116px}::ng-deep .vx-form-group .select+app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .select+app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:5px;text-transform:uppercase}::ng-deep .vx-form-group .select+app-cs-radio{margin-top:8px!important}::ng-deep .vx-form-group .select~app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;font-weight:500;color:#707070}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group .select.button-sec:after{display:none}::ng-deep .vx-form-group .select.button-sec button{background:transparent;border:none;display:inline-flex;float:right;color:#1e5dd3;text-transform:uppercase;font-weight:600;cursor:pointer;font-size:11px;position:absolute;top:12px;right:8px;padding:0;margin:0}::ng-deep .vx-form-group .select+.vx-control-panel{margin-top:8px}::ng-deep .vx-form-group .select+.selected{margin-top:8px}::ng-deep .vx-form-group .select.select{margin-top:8px}::ng-deep .vx-form-group .upload-format{border:1px solid #dbdbdb;border-radius:4px;padding:8px 12px;display:block}::ng-deep .vx-form-group .upload-format span.text{line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;display:block;margin-bottom:6px}::ng-deep .vx-form-group .upload-format .radio-group{display:flex}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio{display:inline-block}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;margin-left:8px}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio+app-cs-radio{margin-left:12px}::ng-deep .vx-form-group .upload-format~.upload-format{margin-top:4px}::ng-deep .vx-form-group .form-tab{display:flex;justify-content:flex-start}::ng-deep .vx-form-group .form-tab button{background:transparent;color:#161b2f;font-size:11px;line-height:16px;text-transform:uppercase;cursor:pointer;padding:8px 8px 8px 0;border:none;outline:none;font-weight:500}::ng-deep .vx-form-group .form-tab button:disabled{opacity:.5;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}::ng-deep .vx-form-group .form-tab button+button{padding:8px}::ng-deep .vx-form-group .form-tab button.active{color:#1e5dd3}::ng-deep .vx-form-group .tab-group{border:1px solid #dbdbdb;border-radius:4px;padding:0;display:block;position:relative}::ng-deep .vx-form-group .tab-group .upload-file{padding:16px 24px;display:flex;align-items:center}::ng-deep .vx-form-group .tab-group .upload-file .image{width:80px;margin-right:20px}::ng-deep .vx-form-group .tab-group .upload-file .browse{display:flex;align-items:center;justify-content:center;width:calc(100% - 100px);text-align:center}::ng-deep .vx-form-group .tab-group .upload-file .browse span{display:inline-block;font-size:12px;color:#747576;line-height:16px;padding:0 4px}::ng-deep .vx-form-group .tab-group .upload-file .browse .label{font-size:11px;color:#1e5dd3;line-height:16px;font-weight:600;text-transform:uppercase;margin:0;padding:0}::ng-deep .vx-form-group .tab-group .upload-file .browse .label input{opacity:0;position:absolute;top:0;margin:0;padding:0;right:0;bottom:0;left:0;cursor:pointer;width:100%}::ng-deep .vx-form-group .tab-group.active{border-color:#1e5dd3}::ng-deep .vx-form-group .tab-group.uploaded{margin-top:4px}::ng-deep .vx-form-group .tab-group.uploaded .upload-file{padding:12px \u200B24px}::ng-deep .vx-form-group .tab-group.uploaded .upload-file .image{display:none}::ng-deep .vx-form-group .tab-group.uploaded .upload-file .browse{width:100%}::ng-deep .vx-form-group .tab-group+label.vx-form-group{margin-top:8px;margin-bottom:4px}::ng-deep .vx-form-group .file-list{background:#fbfbfb;border:1px solid #f1f1f1;border-radius:4px;padding:12px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;position:relative}::ng-deep .vx-form-group .file-list span.file-name{color:#747576;line-height:16px;font-size:11px;font-weight:400;cursor:pointer;max-width:calc(100% - 20px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep .vx-form-group .file-list .button-group{display:flex}::ng-deep .vx-form-group .file-list button{font-size:12px;color:#eb2424;cursor:pointer;display:flex;padding:0;border:none;outline:none;background:transparent}::ng-deep .vx-form-group .file-list button.edit{color:#1e5dd3}::ng-deep .vx-form-group .file-list button+button{margin-left:16px}::ng-deep .vx-form-group .file-list+.file-list{margin-top:4px}::ng-deep .vx-form-group .file-list .file-container{display:flex;justify-content:space-between;width:100%}::ng-deep .vx-form-group .file-list.policy{background:#fff}::ng-deep .vx-form-group .file-list cs-select{position:relative;margin-top:8px;width:100%}::ng-deep .vx-form-group .file-list cs-select .selection-wrap .input-group input.value{height:32px!important;font-size:11px!important}::ng-deep .vx-form-group .file-list cs-select .selection-wrap .input-group i{right:12px!important;top:12px!important}::ng-deep .vx-form-group .file-list app-line-loader{display:block;position:absolute;left:10px;right:10px;bottom:0}::ng-deep .vx-form-group label.vx-control-panel{color:#161b2f;font-size:11px;font-weight:500;line-height:16px;margin-bottom:8px;display:block;text-transform:uppercase;width:100%;margin-top:4px;text-align:left}::ng-deep .vx-form-group label.vx-control-panel.custom-tag{font-size:10px}::ng-deep .vx-form-group label.vx-control-panel.vx-mt-8{margin-top:8px}::ng-deep .vx-form-group label.vx-control-panel span.required{color:#eb2424;font-size:16px;font-weight:400;position:relative;top:-2px}::ng-deep .vx-form-group label.vx-control-panel .button{background:transparent;border:none;display:inline-flex;float:right;color:#1e5dd3;text-transform:uppercase;font-weight:600;cursor:pointer;font-size:11px;padding:0;margin:0}::ng-deep .vx-form-group label.vx-control-panel app-cs-switch{float:right;display:block}::ng-deep .vx-form-group label.vx-control-panel i{margin-left:8px;font-size:12px;color:#1e5dd3;cursor:pointer;position:relative;top:1px}::ng-deep .vx-form-group label.vx-control-panel i.depreciation-icon{color:#e4b700;font-size:16px;position:relative;top:3px}::ng-deep .vx-form-group label.vx-control-panel .checkpoint-version{background:#f1f1f1;border-radius:2px;color:#042e7d;font-size:10px;font-weight:600;line-height:14px;margin-left:4px;padding:0 2px}::ng-deep .vx-form-group .input,::ng-deep .vx-form-group input[type=text]{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#fff;outline:none;padding:8px 12px;line-height:20px;font-size:13px;color:#747576;transition:all .2s ease-in-out;width:100%;font-weight:400}::ng-deep .vx-form-group .input::-moz-placeholder,::ng-deep .vx-form-group input[type=text]::-moz-placeholder{color:#747576;font-weight:400}::ng-deep .vx-form-group .input:-ms-input-placeholder,::ng-deep .vx-form-group input[type=text]:-ms-input-placeholder{color:#747576;font-weight:400}::ng-deep .vx-form-group .input::placeholder,::ng-deep .vx-form-group input[type=text]::placeholder{color:#747576;font-weight:400}::ng-deep .vx-form-group .input:focus,::ng-deep .vx-form-group .input:hover,::ng-deep .vx-form-group input[type=text]:focus,::ng-deep .vx-form-group input[type=text]:hover{border-color:#1e5dd3;box-shadow:0 0 5px rgba(30,93,211,.27)}::ng-deep .vx-form-group .input.error,::ng-deep .vx-form-group input[type=text].error{border-color:#eb2424;color:#eb2424;margin-bottom:4px}::ng-deep .vx-form-group .input.error:focus,::ng-deep .vx-form-group input[type=text].error:focus{box-shadow:0 0 5px rgba(211,30,30,.27)}::ng-deep .vx-form-group .input:disabled,::ng-deep .vx-form-group input[type=text]:disabled{background:#f1f1f1;cursor:not-allowed;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}::ng-deep .vx-form-group .input:disabled:hover,::ng-deep .vx-form-group input[type=text]:disabled:hover{border-color:#dbdbdb;box-shadow:none}::ng-deep .vx-form-group .input span.text,::ng-deep .vx-form-group input[type=text] span.text{font-size:13px;color:#747576;font-weight:400;display:block;width:100%}::ng-deep .vx-form-group .input .input-group,::ng-deep .vx-form-group input[type=text] .input-group{display:flex;align-items:center}::ng-deep .vx-form-group .input .input-group.counter,::ng-deep .vx-form-group input[type=text] .input-group.counter{min-width:96px;width:96px}::ng-deep .vx-form-group .input .input-group.counter button,::ng-deep .vx-form-group input[type=text] .input-group.counter button{height:24px;width:24px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;color:#747576;font-size:8px;cursor:pointer;outline:none}::ng-deep .vx-form-group .input .input-group.counter input,::ng-deep .vx-form-group input[type=text] .input-group.counter input{-webkit-appearance:textfield;-moz-appearance:textfield;height:24px;width:calc(100% - 48px);border:1px solid #f1f1f1;outline:none;padding:0 6px;text-align:center}::ng-deep .vx-form-group .input .input-group.counter input::-webkit-inner-spin-button,::ng-deep .vx-form-group .input .input-group.counter input::-webkit-outer-spin-button,::ng-deep .vx-form-group input[type=text] .input-group.counter input::-webkit-inner-spin-button,::ng-deep .vx-form-group input[type=text] .input-group.counter input::-webkit-outer-spin-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0}::ng-deep .vx-form-group .input+.file-list,::ng-deep .vx-form-group input[type=text]+.file-list{margin-top:8px}::ng-deep .vx-form-group .input::-moz-placeholder,::ng-deep .vx-form-group input[type=text]::-moz-placeholder{font-size:13px}::ng-deep .vx-form-group .input::placeholder,::ng-deep .vx-form-group input[type=text]::placeholder{font-size:13px}::ng-deep .vx-form-group .input:-ms-input-placeholder,::ng-deep .vx-form-group input[type=text]:-ms-input-placeholder{font-size:13px}::ng-deep .vx-form-group .input::-ms-input-placeholder,::ng-deep .vx-form-group input[type=text]::-ms-input-placeholder{font-size:13px}::ng-deep .vx-form-group .classification{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#fff;padding:8px 12px;display:flex;justify-content:space-between}::ng-deep .vx-form-group .classification label{width:100%;position:relative;z-index:1;margin:0 4px 0 0}::ng-deep .vx-form-group .classification label span{display:block;width:100%;height:24px;border:1px solid #f1f1f1;border-radius:2px;line-height:24px;font-size:10px;text-align:center;color:#747576;font-weight:500;position:relative;text-transform:uppercase}::ng-deep .vx-form-group .classification label span:before{height:2px;content:\"\";top:0;right:0;left:0;border-radius:2px;position:absolute;transition:all .2s ease-in-out}::ng-deep .vx-form-group .classification label input{opacity:0;position:absolute;top:0;right:0;bottom:0;left:0;margin:0;padding:0;width:100%;height:100%;cursor:pointer;z-index:1}::ng-deep .vx-form-group .classification label input:checked+span{color:#fff}::ng-deep .vx-form-group .classification label input:checked+span:before{bottom:0;height:100%;z-index:-1}::ng-deep .vx-form-group .classification label.low span:before{background:#34aa44}::ng-deep .vx-form-group .classification label.low-med span:before{background:#f2bf19}::ng-deep .vx-form-group .classification label.med-high span:before{background:#f29619}::ng-deep .vx-form-group .classification label.high span:before{background:#eb2424}::ng-deep .vx-form-group .classification label:last-of-type{margin-right:0}::ng-deep .vx-form-group .input{display:flex;align-items:center}::ng-deep .vx-form-group .selected{height:40px;border-radius:4px;border:1px solid #f1f1f1;background:#fbfbfb;outline:none;padding:8px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;display:flex;align-items:center;position:relative;justify-content:space-between}::ng-deep .vx-form-group .selected.first-field{z-index:2}::ng-deep .vx-form-group .selected .chip-container{display:flex;width:calc(100% - 60px);align-items:center}::ng-deep .vx-form-group .selected .chip-container.checkpoints{width:calc(100% - 120px)}::ng-deep .vx-form-group .selected .chip-container span.chip{background:#fff;border-radius:2px;box-shadow:0 0 3px #1e5dd31a;height:24px;padding:0 8px;color:#1e5dd3;font-size:12px;display:block;width:auto;max-width:100%;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:24px}::ng-deep .vx-form-group .selected .chip-container span.chip.disabled{background:#f1f1f1;box-shadow:none;color:#747576;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}::ng-deep .vx-form-group .selected .chip-container span.chip i{font-weight:400;margin-right:8px;cursor:pointer;font-size:10px;position:relative;top:1px}::ng-deep .vx-form-group .selected .chip-container span.chip span.step{background:#1e5dd3;border-radius:2px;color:#fff;font-size:9px;line-height:14px;padding:0 4px;font-weight:400;text-align:center;min-width:auto;margin-right:4px}::ng-deep .vx-form-group .selected .chip-container span.chip+span.chip{margin-left:4px}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question{display:flex;align-items:center;justify-content:space-between;width:100%}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question span.value{color:#1e5dd3;font-size:12px;font-weight:400;line-height:24px;padding:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 80px)}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question span.label{background:#f1f1f1;border-radius:2px;color:#042e7d;font-size:9px;font-weight:600;text-transform:uppercase;padding-left:4px;padding-right:4px;line-height:12px;margin-left:8px}::ng-deep .vx-form-group .selected .chip-container span.value{color:#747576;font-size:13px;line-height:20px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 52px);padding:0 4px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text{color:#747576;font-size:10px;font-weight:500;padding:0 8px;width:122px;line-height:14px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text.first{position:relative;min-width:162px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text.first:before{background:#f1f1f1;content:\"\";position:absolute;top:0;right:0;height:calc(100% + 12px);width:1px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text .no{color:#1e5dd3}::ng-deep .vx-form-group .selected .chip-container.plus span.chip{max-width:calc(50% - 35px)}::ng-deep .vx-form-group .selected .chip-container.more-one span.chip{max-width:50%}::ng-deep .vx-form-group .selected .chip-container .chip-inner{background:#fff;border-radius:2px;box-shadow:0 2px 4px #1e5dd31a;line-height:24px;padding:0 4px 0 8px;display:flex;align-items:center}::ng-deep .vx-form-group .selected .chip-container .chip-inner .chip{background:transparent;border-radius:0;box-shadow:none;height:auto;line-height:unset;padding:0;color:#747576;max-width:300px}::ng-deep .vx-form-group .selected .chip-container .chip-inner button.count{border-radius:20px;height:16px;padding:0 6px;border:none;font-size:9px;line-height:16px;margin-left:4px;min-width:20px}::ng-deep .vx-form-group .selected .chip-container .chip-inner button.count.user{background:#34aa44}::ng-deep .vx-form-group .selected .chip-container .chip-inner i.cross{cursor:pointer}::ng-deep .vx-form-group .selected button.count{background:#1e5dd3;border-radius:2px;height:24px;padding:0 8px;border:1px solid #1e5dd3;cursor:pointer;outline:none;color:#fff;font:13px;font-weight:500;line-height:20px;white-space:nowrap;margin-left:8px}::ng-deep .vx-form-group .selected button.edit{border:1px solid #f1f1f1;border-radius:2px;background:#fff;outline:none;cursor:pointer;display:block;height:24px;padding:0 5px 0 4px;font-size:11px;font-weight:500;color:#1e5dd3;text-transform:uppercase;white-space:nowrap;margin-left:8px}::ng-deep .vx-form-group .selected button.edit i{font-weight:400;font-size:8px;margin-right:4px}::ng-deep .vx-form-group .selected button.close-btn{background:transparent;border:none;padding:0;margin-left:8px;font-size:10px;color:#c7381b;display:flex;align-items:center}::ng-deep .vx-form-group .selected .workflow-label{min-width:92px;padding:4px;text-align:center;margin-left:-8px;margin-right:8px;border-right:1px solid #f1f1f1}::ng-deep .vx-form-group .selected .workflow-label p{margin:0;display:block;text-transform:uppercase}::ng-deep .vx-form-group .selected .workflow-label p.title{font-size:9px;line-height:12px;color:#161b2f;font-weight:500}::ng-deep .vx-form-group .selected .workflow-label p.description{font-size:11px;line-height:16px;color:#161b2f;font-weight:600}::ng-deep .vx-form-group .selected .workflow-label+.chip-container{width:calc(100% - 148px)}::ng-deep .vx-form-group .selected+.selected{margin-top:8px}::ng-deep .vx-form-group .selected+app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .selected+app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:5px;text-transform:uppercase}::ng-deep .vx-form-group .selected+app-cs-switch.who-toggle label.cs-switch span.value{color:#747576}::ng-deep .vx-form-group .selected+app-cs-radio{margin-top:8px!important}::ng-deep .vx-form-group .selected~app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;font-weight:500;color:#707070}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group .selected.readOnly{pointer-events:none}::ng-deep .vx-form-group .selected span.chip{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .vx-form-group .select-list{position:absolute;background:#fff;box-shadow:0 0 5px #1e5dd3;top:100%;right:0;left:0;z-index:2}::ng-deep .vx-form-group .select-list .vx-radio-group label.vx-radio-item{width:100%;padding:12px 16px}::ng-deep .vx-form-group .select-list .vx-radio-group label.vx-radio-item:hover{background:#f8f8f8}::ng-deep .vx-form-group marx-editor{margin-top:8px;display:block}::ng-deep .vx-form-group marx-editor .editor-container{border-radius:4px;border:1px solid #dbdbdb}::ng-deep .vx-form-group marx-editor .editor-container .editable-block{min-height:60px;padding:11px 15px;max-height:100px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%}::ng-deep .vx-form-group marx-editor .editor-container .editable-block ul{padding:0 0 0 10px;margin-top:0}::ng-deep .vx-form-group marx-editor .editor-container .editable-block ul li{list-style:disc}::ng-deep .vx-form-group marx-editor .editor-container .editable-block ol{padding:0 0 0 10px;margin-top:0}::ng-deep .vx-form-group marx-editor .editor-container .editable-block ol li{list-style:decimal}::ng-deep .vx-form-group marx-editor .editor-container .editor-tools{z-index:1;border-top:1px solid #dbdbdb;transition:none;border-radius:0 0 3px 3px;position:static}::ng-deep .vx-form-group marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button{height:22px!important;width:22px!important;padding:0 5px}::ng-deep .vx-form-group marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg{height:22px;width:12px}::ng-deep .vx-form-group marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit{width:80px!important;line-height:22px;justify-content:center}::ng-deep .vx-form-group marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button{width:100%!important;height:auto!important}::ng-deep .vx-form-group marx-editor .editor-container:focus-within{border-color:#1e5dd3!important}::ng-deep .vx-form-group marx-editor .editor-container:focus-within .editor-tools{border-color:#1e5dd3!important}::ng-deep .vx-form-group marx-editor .editor-container:hover{border-color:#1e5dd3!important}::ng-deep .vx-form-group marx-editor .editor-container:hover .editor-tools{border-color:#1e5dd3!important}::ng-deep .vx-form-group marx-editor+app-cs-switch{margin-top:8px}::ng-deep .vx-form-group app-cs-switch label.cs-switch span.value{font-size:11px;color:#747576;text-transform:uppercase}::ng-deep .vx-form-group app-cs-switch+app-cs-switch{margin-top:8px}::ng-deep .vx-form-group .date-time-picker{display:flex;justify-content:space-between;height:40px;border-radius:4px;border:1px solid #dbdbdb;padding:11px 0}::ng-deep .vx-form-group .date-time-picker:focus-within{border-color:#1e5dd3;box-shadow:0 0 5px rgba(30,93,211,.27)}::ng-deep .vx-form-group .date-time-picker .picker-group{width:50%;position:relative;display:flex;align-items:center}::ng-deep .vx-form-group .date-time-picker .picker-group:first-of-type{border-right:1px solid #dbdbdb}::ng-deep .vx-form-group .date-time-picker .picker-group:only-of-type{border:none;width:100%}::ng-deep .vx-form-group .date-time-picker .picker-group input{height:38px;background:#fff;line-height:38px;font-size:13px;color:#747576;transition:all .2s ease-in-out;width:100%;font-weight:400;border:none;padding:0 12px 0 34px;outline:none}::ng-deep .vx-form-group .date-time-picker .picker-group input:focus,::ng-deep .vx-form-group .date-time-picker .picker-group input:hover{box-shadow:none;border:none}::ng-deep .vx-form-group .date-time-picker .picker-group input::-moz-placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group input::placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group input:-ms-input-placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group input::-ms-input-placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group i{display:flex;justify-content:center;align-items:center;height:16px;width:16px;position:absolute;left:12px;top:0;color:#bcbcbc;font-size:16px;pointer-events:none}::ng-deep .vx-form-group app-cs-radio.main-filed{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;color:#707070}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group .switch-row{display:flex}::ng-deep .vx-form-group .switch-row app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .switch-row app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:0;text-transform:uppercase;color:#747576!important}::ng-deep .vx-form-group .switch-row app-cs-switch label.cs-switch span.value i{display:inline-flex;font-size:11px;cursor:pointer;color:#1e5dd3;align-items:center;line-height:16px;margin:0 4px}::ng-deep .vx-form-group .switch-row app-cs-switch+app-cs-switch{margin-left:8px}::ng-deep .vx-form-group .switch-row.align-right{justify-content:flex-end}::ng-deep .vx-form-group .switch-row.align-right label.cs-switch span.value{margin-right:8px}::ng-deep .vx-form-group .risk-type-field{background:#f8f8f8;border:1px solid #dbdbdb;border-radius:4px;height:40px;display:flex;align-items:center;padding:4px;position:relative;z-index:1}::ng-deep .vx-form-group .risk-type-field .type-item{width:50%;position:relative}::ng-deep .vx-form-group .risk-type-field .type-item button{background:transparent;border:none;border-radius:0;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase;width:100%;height:32px;padding:0 12px;text-align:left}::ng-deep .vx-form-group .risk-type-field .type-item button.disabled{background:transparent!important;color:#dbdbdb!important;filter:unset!important;opacity:unset!important;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}::ng-deep .vx-form-group .risk-type-field .type-item .info{color:#1e5dd3;font-size:12px;position:absolute;top:10px;right:12px;cursor:pointer}::ng-deep .vx-form-group .risk-type-field .type-item.active button{color:#1e5dd3!important}::ng-deep .vx-form-group .risk-type-field .type-item:nth-child(2).active~.background-glider{transform:translate(100%)}::ng-deep .vx-form-group .risk-type-field .background-glider{background:#fff;border-radius:4px;box-shadow:0 1px 3px #161b2f26;position:absolute;display:flex;width:208px;height:32px;z-index:-1;transition:.25s ease-out}.left{width:36px;height:36px;margin-top:30px;margin-left:-58px;margin-right:20px;display:flex;justify-content:center;align-items:center;position:relative;z-index:10;border-radius:50%}.left.deadline-completed{margin-top:18px}.left.checked{background:transparent}.left img{width:36px}.left .checkIcon{width:32px;height:32px;background:#fff;border-radius:50%;stroke-width:4;stroke:#34aa44;stroke-miterlimit:10;box-shadow:inset 0 0 0 #34aa44;-webkit-animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin-top:0}.left .checkIcon__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;-webkit-animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}.left .checkIcon__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;-webkit-animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}.right{width:100%}.right span.indicator{position:absolute;top:36px;left:-16px;font-size:12px;color:#f0b819;cursor:pointer}.form-group-row{display:flex;position:relative;transition:all .2s ease-in-out}.form-group-row.disabled{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none;filter:grayscale(1);z-index:2}.form-group-row.disabled .left{position:relative}.form-group-row.disabled .left:before{content:\"\";position:absolute;top:2px;right:0;bottom:0;left:2px;background:#fff;opacity:.7;border-radius:50%;width:32px;height:32px}.form-group-row.disabled .right{opacity:.3}.form-group-row.active{pointer-events:none;filter:grayscale(0);z-index:2;opacity:1}.form-group-row.active .right .vx-form-group .custom-input,.form-group-row.active .right .vx-form-group input{border-color:#1e5dd3;box-shadow:0 0 5px rgba(30,93,211,.27)}::ng-deep .radio-group-selector app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .radio-group-selector app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .radio-group-selector app-cs-radio label.radio-item .radio,::ng-deep .radio-group-selector app-cs-radio label.radio-item .radiomark{position:absolute!important;top:9px;left:12px}::ng-deep .radio-group-selector app-cs-radio label.radio-item .value{font-size:11px!important;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0!important;max-width:100%!important;font-weight:500!important;color:#707070!important}::ng-deep .radio-group-selector app-cs-radio label.radio-item .value i{font-size:12px;color:#1e5dd3}::ng-deep .radio-group-selector app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}@-webkit-keyframes strokeCheck{to{stroke-dashoffset:0}}@keyframes strokeCheck{to{stroke-dashoffset:0}}@-webkit-keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #34aa44}}@keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #34aa44}}.action-list{width:220px}.action-list ul{padding:0;margin:0;-webkit-animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}.action-list ul.action-item{display:block}.action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}.action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}.action-list ul.action-item li button i{font-size:17px;margin-right:10px;color:#1c5bd1}.action-list ul.action-item li button:hover{background:#f3f3f3}.action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}.action-list ul.action-item li .avatar-card.within-con{display:block}.action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#4681ef;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}.action-list ul.action-item li .avatar-card .avatar img{width:100%}.action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}.action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;-moz-text-align-last:left;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}.action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#1c5bd1;cursor:pointer;margin-right:5px}.action-list ul.action-item li .avatar-card.no-image{display:block}.action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}.action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}.action-list ul.action-item li .chip-item i{margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}.action-list ul.action-item li .chip-item span{display:block;width:auto;max-width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}.action-list ul.action-item li .chip-item span.id{font-size:9px}.action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}.action-list ul.action-item li .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}.action-list ul.action-item li .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}.action-list ul.action-item li:first-child{-webkit-animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(2){-webkit-animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(3){-webkit-animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(4){-webkit-animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(5){-webkit-animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(6){-webkit-animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(7){-webkit-animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(8){-webkit-animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(9){-webkit-animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(10){-webkit-animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}@-webkit-keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}@keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}@-webkit-keyframes scale-up-center{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}@keyframes scale-up-center{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}p.error-message{font-size:11px;font-weight:400;color:#eb2424;line-height:16px;margin-top:8px;margin-bottom:0}.edit-loader{position:absolute;top:-3px;left:-3px;width:46px;height:46px;transform:rotate(180deg)}.circular-loader{-webkit-animation:rotate 2s linear infinite;animation:rotate 2s linear infinite;height:100%;transform-origin:center center;width:100%;position:absolute;top:0;left:0;margin:auto}.loader-path{stroke-dasharray:150,200;stroke-dashoffset:-10;-webkit-animation:dash 1.5s ease-in-out infinite;animation:dash 1.5s ease-in-out infinite;stroke-linecap:round}@-webkit-keyframes rotate{to{transform:rotate(1turn)}}@keyframes rotate{to{transform:rotate(1turn)}}@-webkit-keyframes dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35}to{stroke-dasharray:89,200;stroke-dashoffset:-124}}@keyframes dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35}to{stroke-dasharray:89,200;stroke-dashoffset:-124}}::ng-deep .dropdown{position:fixed;background:#fff;box-shadow:0 3px 6px #00000029;padding:24px 0;z-index:9;max-height:calc(100vh - 200px);overflow:auto}::ng-deep .dropdown ul.dropdown-list{padding:0 20px;margin:0;display:block}::ng-deep .dropdown ul.dropdown-list li{list-style:none}::ng-deep .dropdown ul.dropdown-list li app-cs-radio{display:flex}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item span.radio{position:absolute;top:12px;left:12px}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item span.value{padding:11px 12px 11px 32px;width:100%;border:1px solid #bcbcbc;border-radius:4px;margin-left:0;max-width:100%}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item svg{position:absolute;top:12px;left:12px}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item input[type=radio]:checked~span.value{background:#e8feeb;border-color:#34aa44}::ng-deep .dropdown ul.dropdown-list li+li{margin-top:8px}app-smiley-dialog{position:relative;z-index:10}app-smiley-dialog-inline{position:absolute;top:-3px;right:0;bottom:0;z-index:999;width:520px;height:calc(100vh + 3px)}::ng-deep .vx-overlay{position:fixed;z-index:3;top:0;right:0;bottom:0;left:0}dp-date-picker{width:100%;position:fixed!important;z-index:14;top:-40px;left:0}dp-date-picker input{width:100%;border:none;opacity:0;pointer-events:none}dp-date-picker input:focus{outline:none}dp-date-picker .dp-popup{width:412px;box-shadow:0 0 20px #161b2f26;background-color:#fff;border-radius:4px;-webkit-animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both}dp-date-picker .dp-popup dp-day-calendar,dp-date-picker .dp-popup dp-month-calendar{width:100%;pointer-events:auto}dp-date-picker .dp-popup dp-day-calendar button,dp-date-picker .dp-popup dp-month-calendar button{background:transparent;border:none;outline:none}dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left,dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right,dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left,dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right,dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:50%;font-size:14px}dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left:hover,dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right:hover,dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:hover,dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left:hover,dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right:hover,dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:hover{background-color:#f3f3f3}dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn{display:none}dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:before,dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:before{content:\"\";height:10px;width:10px;border-radius:50%;background:#000;display:inline-flex}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week,dp-date-picker .dp-popup dp-day-calendar .dp-weekdays,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays{display:flex;justify-content:space-around}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,dp-date-picker .dp-popup dp-day-calendar .dp-weekdays .dp-calendar-weekday,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week .dp-calendar-weekday,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays .dp-calendar-weekday{width:52px;border-left:none;border-bottom-color:#fff;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button,dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button{width:40px;height:40px;border-radius:50%;display:inline-flex;justify-content:center;align-items:center}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button:hover,dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button:hover,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button:hover,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button:hover{background-color:#f3f3f3}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-selected,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-selected,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-selected{background:#1e5dd3}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-current-day,dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-current-day,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-current-day,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-current-day{border:1px solid rgba(0,0,0,.38);color:#1e5dd3;background-color:#fff}dp-date-picker .dp-popup dp-day-calendar .dp-day-calendar-container,dp-date-picker .dp-popup dp-month-calendar .dp-day-calendar-container{padding:20px;border-radius:2px}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-nav-container{display:flex;margin:0 0 20px;border:none}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container .dp-nav-header button,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-nav-container .dp-nav-header button{color:#000;font-size:17px;font-weight:500;margin:0 0 0 12px;padding:0}dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container,dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container{width:80px;display:flex}dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button,dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button{margin:0!important}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-wrapper,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-wrapper{border:none}dp-date-picker .dp-open+div{position:fixed!important;top:0!important;right:0!important;bottom:0!important;left:0!important;display:flex;justify-content:center;align-items:center;z-index:99;pointer-events:none;background:rgba(0,0,0,.3)}@-webkit-keyframes slide-bottom{0%{transform:translateY(-100px)}to{transform:translateY(0)}}@keyframes slide-bottom{0%{transform:translateY(-100px)}to{transform:translateY(0)}}::ng-deep span.file{display:block;width:20px;min-width:20px;border-radius:0 0 2px 2px;position:relative;margin-right:5px;border:1px solid #747576;border-top:none;margin-top:5px;background:#fff}::ng-deep span.file.table{margin-right:8px;width:18px;min-width:18px}::ng-deep span.file.table i{font-size:8px}::ng-deep span.file.table .format{height:8px;font-size:7px;line-height:8px;font-weight:400}::ng-deep span.file:before{position:absolute;border-radius:0;top:-4px;right:-1px;content:\"\";height:4px;width:4px;display:block;background:linear-gradient(45deg,#747576,#747576 1%,#747576 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0));filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file:after{height:4px;left:-1px;right:3px;border-top:1px solid;border-right:none;border-left:1px solid;content:\"\";top:-4px;position:absolute;border-radius:2px 0 0 0;background:#fff}::ng-deep span.file .format{height:10px;font-size:6px;text-transform:uppercase;background:transparent;font-weight:600;text-align:center;display:block;line-height:10px}::ng-deep span.file i{font-size:10px;height:10px;display:flex;align-items:center;justify-content:center;color:#dbdbdb}::ng-deep span.file.docx{width:22px!important}::ng-deep span.file.pdf,::ng-deep span.file.template{border-color:#f31c39}::ng-deep span.file.pdf:before,::ng-deep span.file.template:before{background:linear-gradient(45deg,#f31c39,#f31c39 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0));filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#f31c39\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.pdf:after,::ng-deep span.file.template:after{border-color:#f31c39}::ng-deep span.file.pdf .format,::ng-deep span.file.template .format{color:#f31c39}::ng-deep span.file.css,::ng-deep span.file.less,::ng-deep span.file.scss,::ng-deep span.file.xls,::ng-deep span.file.xlsx{border-color:#34aa44}::ng-deep span.file.css:before,::ng-deep span.file.less:before,::ng-deep span.file.scss:before,::ng-deep span.file.xls:before,::ng-deep span.file.xlsx:before{background:linear-gradient(45deg,#34aa44,#34aa44 1%,#34aa44 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0));filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.css:after,::ng-deep span.file.less:after,::ng-deep span.file.scss:after,::ng-deep span.file.xls:after,::ng-deep span.file.xlsx:after{border-color:#34aa44;color:#34aa44}::ng-deep span.file.css .format,::ng-deep span.file.less .format,::ng-deep span.file.scss .format,::ng-deep span.file.xls .format,::ng-deep span.file.xlsx .format{color:#34aa44}::ng-deep span.file.doc,::ng-deep span.file.docx,::ng-deep span.file.psd{border-color:#1e5dd3}::ng-deep span.file.doc:before,::ng-deep span.file.docx:before,::ng-deep span.file.psd:before{background:linear-gradient(45deg,#1e5dd3,#1e5dd3 1%,#1e5dd3 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0));filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.doc:after,::ng-deep span.file.docx:after,::ng-deep span.file.psd:after{border-color:#1e5dd3}::ng-deep span.file.doc .format,::ng-deep span.file.docx .format,::ng-deep span.file.psd .format{color:#1e5dd3}::ng-deep span.file.ai,::ng-deep span.file.html,::ng-deep span.file.jpeg,::ng-deep span.file.jpg,::ng-deep span.file.png,::ng-deep span.file.ppt{border-color:#f6882f}::ng-deep span.file.ai:before,::ng-deep span.file.html:before,::ng-deep span.file.jpeg:before,::ng-deep span.file.jpg:before,::ng-deep span.file.png:before,::ng-deep span.file.ppt:before{background:linear-gradient(45deg,#f6882f,#f6882f 1%,#f6882f 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0));filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.ai:after,::ng-deep span.file.html:after,::ng-deep span.file.jpeg:after,::ng-deep span.file.jpg:after,::ng-deep span.file.png:after,::ng-deep span.file.ppt:after{border-color:#f6882f}::ng-deep span.file.ai .format,::ng-deep span.file.html .format,::ng-deep span.file.jpeg .format,::ng-deep span.file.jpg .format,::ng-deep span.file.png .format,::ng-deep span.file.ppt .format{color:#f6882f}::ng-deep span.file.php{border-color:#7aa6f7}::ng-deep span.file.php:before{background:linear-gradient(45deg,#7aa6f7,#7aa6f7 1%,#7aa6f7 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0));filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.php:after{border-color:#7aa6f7}::ng-deep span.file.php .format{color:#7aa6f7}::ng-deep ngx-material-timepicker-container .timepicker-backdrop-overlay{background-color:rgba(0,0,0,.05)!important;z-index:9999999999!important}::ng-deep ngx-material-timepicker-container .timepicker-overlay{z-index:9999999999!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker{width:232px!important;border-radius:2px!important;box-shadow:0 4px 30px #161b2f26!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header{background-color:#fff!important;padding:0!important;border-radius:2px 2px 0 0}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container{display:block!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time{color:#000!important;width:150px!important;margin:0 auto;line-height:60px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control .timepicker-dial__control{font-size:40px;background-color:transparent!important;color:#000!important;font-weight:600;text-align:right;caret-color:transparent;outline:none;font-family:Poppins;line-height:56px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control .timepicker-dial__control:focus,::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control .timepicker-dial__control:hover{background-color:transparent!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control:last-of-type .timepicker-dial__control{text-align:left}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time span{padding:0 8px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period{display:flex!important;width:182px;margin:0 auto!important;background:#f1f1f1;padding:4px 10px;border-radius:20px;position:relative}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period:before{background:#f1f1f1;content:\"\";position:absolute;top:15px;left:-25px;width:calc(100% + 50px);height:2px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period{flex-direction:unset!important;position:relative;z-index:1}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period:after{content:\"\";position:absolute;right:-12px;top:0;border-left:14px solid #f1f1f1;border-bottom:12px solid transparent;border-top:12px solid transparent;z-index:-1}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period:before{content:\"\";position:absolute;left:-18px;top:0;border-right:14px solid #f1f1f1;border-bottom:12px solid transparent;border-top:12px solid transparent;z-index:-1}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period button{font-size:11px;background-color:transparent;padding:0;border-radius:20px;color:#747576;font-weight:600;font-family:Poppins;width:84px;height:24px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period button.timepicker-dial__item_active{background:#fff!important;color:#1e5dd3!important;box-shadow:0 1px 2px #dbdbdb}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period button+button{margin-left:0!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face{width:200px!important;height:200px!important;padding:10px!important;background:transparent!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number--outer{height:calc(224px / 2 - 20px)!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number--outer span{color:#000}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number--outer span.active{color:#fff}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__clock-hand{height:80px!important;top:calc(50% - 80px)!important;background-color:#1e5dd3!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number>span.active{background-color:#1e5dd3!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__clock-hand_minute:before{border:4px solid #1e5dd3!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions{display:flex!important;padding:10px 0 0!important;background:#fff!important;justify-content:space-around!important;border-radius:0 0 2px 2px!important;overflow:hidden}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions div:first-child ngx-material-timepicker-button button.timepicker-button{background:#f8f8f8;color:#1e5dd3}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions div ngx-material-timepicker-button button.timepicker-button{line-height:28px!important;width:100%;background:#1e5dd3;color:#fff;border-radius:0!important;height:32px!important;width:116px!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions div ngx-material-timepicker-button button.timepicker-button span{font-weight:500!important;font-size:11px;font-family:Poppins}::ng-deep marx-modal .popup-modal-background{background-color:#161b2fcc!important}"]
                 },] }
     ];
@@ -6603,17 +6706,12 @@
             // this.checkForCreateDocuments();
             this.loader = false;
         };
-        WorkflowPolicyComponent.prototype.changeName = function (event) {
-            var text = event;
-            text = text.replace(/<(.*?)>/gi, '');
-            return text;
-        };
         return WorkflowPolicyComponent;
     }());
     WorkflowPolicyComponent.decorators = [
         { type: i0.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        <div class=\"form-group-row\"  [class.disabled]=\"activeSelector && activeSelector !== 'name'\">\r\n            <div class=\"left\" [class.checked]=\"policyForm?.policyName\">\r\n                <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/what.svg\" alt=\"name\"\r\n                    *ngIf=\"!policyForm?.policyName || activeSelector === 'name'\">\r\n\r\n                <svg *ngIf=\"policyForm?.policyName && activeSelector !== 'name'\" class=\"checkIcon\"\r\n                    xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                    <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                    <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                </svg>\r\n            </div>\r\n            <div class=\"right\">\r\n                <div class=\"vx-form-group\">\r\n                    <label class=\"vx-control-panel\">\r\n                        Policy Name <span class=\"required\">*</span>\r\n                    </label>\r\n                    <input  type=\"text\" (keydown)=\"activeSelector = 'name'\" (focusin)=\"activateSelector('name',true)\"  *ngIf=\"policyForm.policyName =='' || activeSelector === 'name'\"\r\n                        (focusout)=\"activateSelector('name',false)\" [ngModel]=\"policyForm.policyName\" (ngModelChange)=\"policyForm.policyName = changeName($event)\"\r\n                        placeholder=\"Name this policy\">\r\n                        <div class=\"selected\" *ngIf=\"policyForm.policyName.length && activeSelector !== 'name'\">\r\n                            <div class=\"chip-container\">\r\n                                <span class=\"value\">{{policyForm.policyName}}</span>\r\n                            </div>\r\n                            <button class=\"edit\" (click)=\"activateSelector('name',true)\" type=\"button\"><i\r\n                                    class=\"icons\">&#xe9ba;</i> Edit</button>\r\n                        </div>\r\n\r\n                    <p *ngIf=\"submitted && (!policyForm.policyName.trim()) \" [appScrollInView]=\"true\" class=\"error-message\">Please enter a name for this\r\n                        policy. </p>\r\n                    <marx-editor [(ngModel)]=\"policyForm.policyNotes\" [editorConfig]=\"description\"></marx-editor>\r\n                    <app-cs-switch [(ngValue)]=\"policyForm.availableOnPortal\"\r\n                        (ngValueChange)=\"availabilityOnPortal($event)\">\r\n                        Do you want this policy to be available on the portal? <i class=\"icons\"\r\n                        [appTooltip]=\"'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                         placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=\"true\">&#xe932;</i>\r\n                    </app-cs-switch>\r\n                    <app-cs-switch *ngIf=\"policyForm.availableOnPortal\" [(ngValue)]=\"policyForm.acceptSuggestions\">\r\n                        Accept\r\n                        suggestions <i class=\"icons\" [appTooltip]=\"'If enabled, users can provide improvement suggestions to the policies that are listed on the Policy Portal.'\" placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=\"true\">&#xe932;</i></app-cs-switch>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"form-group-row\" [class.active]=\"activeSelector === 'category'\"\r\n        [class.disabled]=\" activeSelector && activeSelector !== 'category' && sideSelectorElements.includes(activeSelector)\">\r\n            <div class=\"left\" [class.checked]=\"policyForm?.selectedCategories?.length>0\">\r\n                <img *ngIf=\"policyForm?.selectedCategories?.length==0 || activeSelector === 'category'\"\r\n                    src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/category.svg\" alt=\"\" />\r\n\r\n                <svg *ngIf=\"policyForm?.selectedCategories?.length>0 && activeSelector !== 'category'\" class=\"checkIcon\"\r\n                    xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                    <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                    <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                </svg>\r\n            </div>\r\n            <div class=\"right\">\r\n                <div class=\"vx-form-group\">\r\n                    <label class=\"vx-control-panel\">Policy Category <span class=\"required\">*</span> </label>\r\n                    <div class=\"select\" *ngIf=\"policyForm?.selectedCategories?.length==0\">\r\n                        <input type=\"text\" (click)=\"activateSelector('category',true)\"\r\n                            placeholder=\"Select a category for this policy.\" readonly>\r\n                    </div>\r\n\r\n                    <div class=\"selected\" *ngIf=\"policyForm?.selectedCategories?.length>0\">\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 *ngIf=\"activeSelector !== 'category'\" class=\"edit\" type=\"button\"\r\n                            (click)=\"activateSelector('category',true)\"><i class=\"icons\">&#xe9ba;</i>\r\n                            Edit</button>\r\n                    </div>\r\n                    <app-popover #category [dontCloseonClick]=\"true\">\r\n                        <div class=\"action-list\">\r\n                            <ul class=\"action-item\">\r\n                                <li *ngFor=\"let category of policyForm?.selectedCategories | slice: 2; let j = index\">\r\n                                    <div class=\"avatar-card\">\r\n                                        <span class=\"value\">\r\n                                            <i class=\"icons\" (click)=\"remove('category',category)\">&#xe90d;</i>\r\n                                            {{ category.item_name }}\r\n                                        </span>\r\n                                    </div>\r\n                                </li>\r\n                            </ul>\r\n                        </div>\r\n                    </app-popover>\r\n                    <p *ngIf=\"submitted && (policyForm?.selectedCategories?.length==0) \" [appScrollInView]=\"true\" class=\"error-message\">Please\r\n                        select\r\n                        the category for this policy.</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\">{{tag.tagname}}</label>\r\n                        <input type=\"text\" [(ngModel)]=\"tag.value\" placeholder=\"{{tag.tagname}}\">\r\n                    </ng-container>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"form-group-row\" [class.active]=\"activeSelector === 'approvers'\"\r\n        [class.disabled]=\" (activeSelector && activeSelector !== 'approvers' && sideSelectorElements.includes(activeSelector))\">\r\n            <div class=\"left\" [class.checked]=\"policyForm?.selectedApprovers?.length>0\">\r\n                <img *ngIf=\"policyForm?.selectedApprovers?.length==0 || activeSelector === 'approvers'\"\r\n                    src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/approval.svg\" alt=\"im\">\r\n\r\n                <svg *ngIf=\"policyForm?.selectedApprovers?.length>0 && activeSelector !== 'approvers'\" class=\"checkIcon\"\r\n                    xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                    <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                    <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                </svg>\r\n            </div>\r\n            <div class=\"right\">\r\n                <div class=\"vx-form-group approval-workflow\" [class.disabled]=\"(policyApprovalFlag!==0)\">\r\n                    <label class=\"vx-control-panel\">\r\n                        Approval workflow <span class=\"required\">*</span>\r\n                        <button (click)=\"activateSelector('approvers',true);addMoreLevels=true; workflowType = 'SEQUENTIAL' \"\r\n                            class=\"button\">Create a new Approval Workflow</button>\r\n                    </label>\r\n                    <div class=\"select\" [class.disabled]=\"approverWorkFlowList?.length==0\"\r\n                        *ngIf=\"policyForm?.selectedApprovers[0]?.approvers?.length==0 ||policyForm?.selectedApprovers.length==0 \">\r\n\r\n                        <cs-select [ngModel]=\"selectedApprovalWorkflow\"\r\n                            (ngModelChange)=\"selectedWorkflowChange($event)\"\r\n                            [placeholder]=\"'Select approval workflow for this policy'\" name=\"selectedApprovalWorkflow\"\r\n                            [setMaxWidth]=\"true\">\r\n                            <cs-option *ngFor=\"let data of approverWorkFlowList\" [value]=\"data\">\r\n                                {{data.workflow_name}}\r\n                            </cs-option>\r\n                            <cs-option [value]=\"-1\" (click)=\"activateSelector('approvers',true);addMoreLevels=true; workflowType = 'SEQUENTIAL' \"\r\n                             >Create a new approval workflow</cs-option>\r\n\r\n                        </cs-select>\r\n                    </div>\r\n                    <ng-container *ngIf=\" policyForm?.selectedApprovers[0]?.approvers?.length>0\">\r\n                        <div class=\"selected\" *ngFor=\"let level of policyForm?.selectedApprovers; let i = index\">\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 class=\"chip\" *ngFor=\"let approver of level.approvers.slice(0,1);let j=index\"><i class=\"icons\"\r\n                                            (click)=\"remove('approvers',approver,i)\">&#xe90d;</i> <span\r\n                                            class=\"step\" *ngIf=\"level.name=='SEQUENTIAL'\" >{{j+1}}</span>{{approver.member_name}}</span>\r\n\r\n\r\n                                    <button class=\"count\" *ngIf=\"level.approvers?.length > 1\" type=\"button\" appPopover\r\n                                        (click)=\"labelName.popover()\" placement=\"right\">+\r\n\r\n                                        {{level.approvers.slice(1).length}}\r\n\r\n                                    </button>\r\n                                    <app-popover #labelName [dontCloseonClick]=\"true\">\r\n                                        <div class=\"action-list\">\r\n                                            <ul class=\"action-item\">\r\n                                                <li *ngFor=\"let approver of level.approvers | slice: 1; let j = index\">\r\n                                                    <div class=\"avatar-card\">\r\n                                                        <span class=\"value\">\r\n                                                            <i class=\"icons\"\r\n                                                                (click)=\"remove('approvers',approver,i)\">&#xe90d;</i>\r\n                                                                <span class=\"step\" *ngIf=\"level.name=='SEQUENTIAL'\">\r\n                                                                    {{(j==level.approvers.slice(1).length-1)? 'Final' : (j+2) }}\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\r\n                                </div>\r\n                                <button class=\"edit\" type=\"button\"\r\n                                    (click)=\"activateSelector('approvers',true,level.name);approversListIndex = i\"><i\r\n                                        class=\"icons\">&#xe9ba;</i>Edit</button>\r\n                                <button class=\"close-btn\" (click)=\"remove('workflowLevel',level,i)\" >\r\n                                    <i class=\"icons\">&#xe90d;</i>\r\n                                </button>\r\n                            </div>\r\n\r\n\r\n\r\n                        </div>\r\n                    </ng-container>\r\n\r\n                    <p *ngIf=\"submitted && (policyForm?.selectedApprovers?.length==0) && (policyApprovalFlag === 0)\"  [appScrollInView]=\"true\" class=\"error-message\">\r\n                        Select or create an approval workflow for this policy.</p>\r\n\r\n                    <label class=\"vx-control-panel\" *ngIf=\"policyForm.selectedApprovers[0]?.approvers?.length>0\"><button\r\n                            class=\"button\"\r\n                            (click)=\"activateSelector('approvers',true);addMoreLevels=true; workflowType = 'SEQUENTIAL' \">+\r\n                            Add More Levels</button></label>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"form-group-row\" [class.active]=\"activeSelector === 'assignees'\"\r\n        [class.disabled]=\" activeSelector && activeSelector !== 'assignees' && sideSelectorElements.includes(activeSelector)\">\r\n            <div class=\"left\" [class.checked]=\"policyForm?.selectedAssignees?.length>0\">\r\n                <img *ngIf=\"policyForm?.selectedAssignees?.length==0 || activeSelector === 'assignees'\"\r\n                    src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/who.svg\" alt=\"im\">\r\n\r\n                <svg *ngIf=\"policyForm?.selectedAssignees?.length>0 && activeSelector !== 'assignees'\" class=\"checkIcon\"\r\n                    xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                    <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                    <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                </svg>\r\n            </div>\r\n            <div class=\"right\">\r\n                <div class=\"vx-form-group\">\r\n                    <label class=\"vx-control-panel\">Who?</label>\r\n                    <div class=\"select\" *ngIf=\"policyForm?.selectedAssignees?.length==0\">\r\n                        <input type=\"text\" (click)=\"activateSelector('assignees',true)\"\r\n                            placeholder=\"Select the persons responsible for attesting this policy.\" readonly>\r\n                    </div>\r\n                    <div class=\"selected\" *ngIf=\"policyForm?.selectedAssignees?.length > 0\">\r\n                        <div class=\"chip-container\">\r\n                            <span class=\"chip\" *ngFor=\"let assignee of policyForm?.selectedAssignees?.slice(0,2)\"><i\r\n                                    class=\"icons\" (click)=\"remove('assignees',assignee)\">&#xe90d;</i>\r\n                                {{assignee.employee_name}}</span>\r\n                            <button class=\"count\" *ngIf=\"policyForm?.selectedAssignees?.length > 2\" type=\"button\"\r\n                                appPopover (click)=\"assigneePopover.popover()\" placement=\"right\">+\r\n                                {{policyForm?.selectedAssignees?.slice(2).length}}</button>\r\n                        </div>\r\n                        <button class=\"edit\" type=\"button\" (click)=\"activateSelector('assignees',true)\">\r\n                            <i class=\"icons\">&#xe9ba;</i> Edit</button>\r\n                    </div>\r\n                    <p *ngIf=\"submitted && (policyForm?.selectedAssignees?.length==0 && policyForm?.frequency_details)\"\r\n                        class=\"error-message\"  [appScrollInView]=\"true\">Select the persons responsible for attesting this policy.</p>\r\n                    <app-cs-switch [(ngValue)]=\"policyForm.requiresSignatureForAttestation\"\r\n                    [class.disabled]=\"policyForm?.selectedAssignees?.length==0\" class=\"who-toggle\">THIS POLICY REQUIRES\r\n                        E-SIGNATURE\r\n                        FOR ATTESTATION <i class=\"icons\" [appTooltip]=\"'If selected, the readers will be required to attest this policy using their electronic signature.'\"  placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=\"true\">&#xe91f;</i></app-cs-switch>\r\n                    <app-popover #assigneePopover [dontCloseonClick]=\"true\">\r\n                        <div class=\"action-list\">\r\n                            <ul class=\"action-item\">\r\n                                <li *ngFor=\"let assignee of policyForm?.selectedAssignees | slice: 2; let j = index\">\r\n                                    <div class=\"avatar-card\">\r\n                                        <span class=\"value\">\r\n                                            <i class=\"icons\" (click)=\"remove('assignees',assignee)\">&#xe90d;</i>\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                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"form-group-row\" [class.active]=\"activeSelector === 'frequency'\"\r\n        [class.disabled]=\" activeSelector && activeSelector !== 'frequency' && sideSelectorElements.includes(activeSelector)\">\r\n            <div class=\"left\" [class.checked]=\"policyForm?.frequency_details\">\r\n                <img *ngIf=\"(!policyForm?.frequency_details) || activeSelector === 'frequency'\"\r\n                    src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/when.svg\" alt=\"im\">\r\n\r\n                <svg *ngIf=\"policyForm?.frequency_details && activeSelector !== 'frequency'\" class=\"checkIcon\"\r\n                    xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                    <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                    <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                </svg>\r\n            </div>\r\n            <div class=\"right\">\r\n                <div class=\"vx-form-group\">\r\n                    <label class=\"vx-control-panel\">When?</label>\r\n\r\n                    <div *ngIf=\"policyForm?.frequency_details == ''\" class=\"select button-sec\">\r\n                        <div class=\"custom-input frequency-custom-input\" (click)=\"activateSelector('frequency',true)\">{{frequencyPlaceholder}}</div>\r\n\r\n                        <button (click)=\"activateSelector('frequency',true)\" type=\"button\">Set A frequency</button>\r\n                    </div>\r\n                    <div *ngIf=\"policyForm?.frequency_details != ''\" class=\"selected button-sec\">\r\n                        <span class=\"chip\">{{frequencyPlaceholder}}</span>\r\n                        <button *ngIf=\"activeSelector !== 'frequency'\" type=\"button\" class=\"edit\"\r\n                            (click)=\"activateSelector('frequency',true)\">\r\n                            <i class=\"icons\">&#xe9ba;</i>Edit\r\n                        </button>\r\n                    </div>\r\n                    <p *ngIf=\"submitted && ((policyForm?.selectedAssignees?.length>0) && (!policyForm?.frequency_details))\"\r\n                        class=\"error-message\"  [appScrollInView]=\"true\">Select an attestation schedule for this policy.</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        <div class=\"form-group-row\" *ngIf=\"showRiskClassification\"\r\n            [class.disabled]=\"activeSelector  && activeSelector !== 'name'\">\r\n            <div class=\"left\" [class.checked]=\"policyForm.riskRating\">\r\n                <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/risks.svg\" alt=\"im\"\r\n                    *ngIf=\"!policyForm?.riskRating\">\r\n\r\n                <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\"\r\n                    *ngIf=\"policyForm?.riskRating\">\r\n                    <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                    <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                </svg>\r\n            </div>\r\n\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 class=\"low\" *ngFor=\" let class of riskClassification\" [ngClass]=\"[class.class]\">\r\n                            <input type=\"radio\" name=\"classification\" [value]=\"class.value\"\r\n                                [checked]=\"policyForm?.riskRating === class.value\" [(ngModel)]=\"policyForm.riskRating\">\r\n                            <span>{{class.name}}</span>\r\n                        </label>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div class=\"form-group-row\" [appScrollInView]=\"scrollToBottom\" *ngIf=\"policyForm.addResponsibilityCenters\"\r\n            [class.active]=\"activeSelector === 'rc'\"\r\n            [class.disabled]=\" activeSelector && activeSelector !== 'rc' && sideSelectorElements.includes(activeSelector)\">\r\n            <div class=\"left\" [class.checked]=\"policyForm?.selectedRCs?.length>0\">\r\n                <img *ngIf=\"policyForm?.selectedRCs?.length==0 || activeSelector === 'rc'\"\r\n                    src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/responsibility-center.svg\"\r\n                    alt=\"\">\r\n\r\n                <svg *ngIf=\"policyForm?.selectedRCs?.length>0 &&  activeSelector !== 'rc'\" class=\"checkIcon\"\r\n                    xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                    <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                    <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                </svg>\r\n            </div>\r\n            <div class=\"right\">\r\n                <div class=\"vx-form-group\">\r\n                    <label class=\"vx-control-panel\">Responsibility Center</label>\r\n                    <div class=\"select\" *ngIf=\"policyForm?.selectedRCs?.length==0\">\r\n                        <input type=\"text\" (click)=\"activateSelector('rc',true)\"\r\n                            placeholder=\"Select Responsibility Center(s) that this policy relates to.\" readonly>\r\n                    </div>\r\n                    <div class=\"selected\" *ngIf=\"policyForm?.selectedRCs?.length > 0\">\r\n                        <div class=\"chip-container\">\r\n                            <span class=\"chip\" *ngFor=\"let rc of policyForm?.selectedRCs?.slice(0,2)\"><i class=\"icons\"\r\n                                    (click)=\"remove('rc',rc)\">&#xe90d;</i>\r\n                                {{rc.item_name}}</span>\r\n                            <button class=\"count\" *ngIf=\"policyForm?.selectedRCs?.length > 2\" type=\"button\" appPopover\r\n                                (click)=\"rcPopover.popover()\" placement=\"right\">+\r\n                                {{policyForm?.selectedRCs?.slice(2).length}}</button>\r\n                        </div>\r\n                        <button class=\"edit\" type=\"button\" (click)=\"activateSelector('rc',true)\">\r\n                            <i class=\"icons\">&#xe9ba;</i> Edit</button>\r\n                    </div>\r\n                    <app-popover #rcPopover [dontCloseonClick]=\"true\">\r\n                        <div class=\"action-list\">\r\n                            <ul class=\"action-item\">\r\n                                <li *ngFor=\"let rc of policyForm?.selectedRCs | slice: 2; let j = index\">\r\n                                    <div class=\"avatar-card\">\r\n                                        <span class=\"value\">\r\n                                            <i class=\"icons\" (click)=\"remove('rc',rc)\">&#xe90d;</i>\r\n                                            {{ rc.item_name }}\r\n                                        </span>\r\n                                    </div>\r\n                                </li>\r\n                            </ul>\r\n                        </div>\r\n                    </app-popover>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"form-group-row\" [appScrollInView]=\"scrollToBottom\" *ngIf=\"policyForm.addReviewers\"\r\n            [class.active]=\"activeSelector === 'reviewer'\"\r\n            [class.disabled]=\"activeSelector && (activeSelector !== 'reviewer' && activeSelector !== 'reviewerFrequency' ) && sideSelectorElements.includes(activeSelector)\">\r\n            <div class=\"left\" [class.checked]=\"policyForm?.selectedReviewers?.length>0\">\r\n                <img *ngIf=\"policyForm?.selectedReviewers?.length==0 || activeSelector === 'reviewer'\"\r\n                    src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/reviewer.svg\" alt=\"\">\r\n\r\n                <svg *ngIf=\"policyForm?.selectedReviewers?.length>0 && activeSelector !== 'reviewer'\" class=\"checkIcon\"\r\n                    xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                    <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                    <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                </svg>\r\n            </div>\r\n            <div class=\"right\">\r\n                <div class=\"vx-form-group\">\r\n                    <label class=\"vx-control-panel\">Reviewer </label>\r\n                    <div class=\"select\" *ngIf=\"policyForm?.selectedReviewers?.length==0\">\r\n                        <input type=\"text\" (click)=\"activateSelector('reviewer',true)\" placeholder=\"Select the person responsible for reviewing this policy\"\r\n                            readonly>\r\n                    </div>\r\n\r\n                    <div class=\"selected\" *ngIf=\"policyForm?.selectedReviewers?.length > 0\">\r\n                        <div class=\"chip-container\">\r\n                            <span class=\"chip\" *ngFor=\"let reviewer of policyForm?.selectedReviewers\"><i class=\"icons\"\r\n                                    (click)=\"remove('reviewer',reviewer)\">&#xe90d;</i>\r\n                                {{reviewer.member_name}}</span>\r\n\r\n                        </div>\r\n                        <button class=\"edit\" type=\"button\" (click)=\"activateSelector('reviewer',true)\">\r\n                            <i class=\"icons\">&#xe9ba;</i> Edit</button>\r\n                    </div>\r\n                    <p *ngIf=\"submitted && (policyForm?.selectedReviewers?.length==0) && (policyForm?.review_frequency_details)\"\r\n                        class=\"error-message\"  [appScrollInView]=\"true\">Select a reviewer for this policy.</p>\r\n\r\n\r\n\r\n                    <label class=\"vx-control-panel\">When? </label>\r\n\r\n\r\n                    <div *ngIf=\"policyForm?.review_frequency_details == '' \" class=\"select button-sec\">\r\n                        <input type=\"text\" (click)=\"activateSelector('reviewerFrequency',true)\"\r\n                            [placeholder]=\"reviewerFrequencyPlaceholder\" readonly>\r\n                        <button (click)=\"activateSelector('reviewerFrequency',true)\" type=\"button\">Set A\r\n                            frequency</button>\r\n                    </div>\r\n                    <div *ngIf=\"policyForm?.review_frequency_details != '' \" class=\"selected button-sec\">\r\n                        <span class=\"chip\">{{reviewerFrequencyPlaceholder}}</span>\r\n                        <button *ngIf=\"activeSelector !== 'reviewerFrequency'\" type=\"button\" class=\"edit\"\r\n                            (click)=\"activateSelector('reviewerFrequency',true)\">\r\n                            <i class=\"icons\">&#xe9ba;</i>Edit\r\n                        </button>\r\n                    </div>\r\n                    <p *ngIf=\"submitted && (policyForm?.selectedReviewers?.length>0) && (!policyForm?.review_frequency_details)\"\r\n                        class=\"error-message\"  [appScrollInView]=\"true\">Select the review schedule for this policy.</p>\r\n\r\n                    <app-format-and-evidence (updateFiles)=\"saveSelectedList('reviewer_attachments',$event)\" #formatEvidence\r\n                        [mode]=\"'policyReviewer'\" [organization_id]=\"organization_id\" [formatEvidanceData]=\"policyForm?.documentsAndLinks\">\r\n                    </app-format-and-evidence>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"form-group-row\" [appScrollInView]=\"scrollToBottom\" *ngIf=\"policyForm.addCheckpoints\"\r\n        [class.active]=\"activeSelector === 'checkpoints'\"\r\n        [class.disabled]=\" activeSelector && activeSelector !== 'checkpoints' && sideSelectorElements.includes(activeSelector)\">\r\n            <div class=\"left\" [class.checked]=\"policyForm?.checkpointDetails?.length>0\">\r\n                <img *ngIf=\"policyForm?.checkpointDetails?.length==0 || activeSelector === 'checkpoints'\"\r\n                    src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/checkpoints.svg\" alt=\"im\">\r\n\r\n                <svg *ngIf=\"policyForm?.checkpointDetails?.length>0 && activeSelector !== 'checkpoints'\"\r\n                    class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                    <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                    <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                </svg>\r\n            </div>\r\n            <div class=\"right\">\r\n                <div class=\"vx-form-group\">\r\n                    <label class=\"vx-control-panel\">\r\n                        Checkpoints\r\n                        <button  *ngIf=\"policyForm?.checkpointDetails?.length===0\" class=\"button\" (click)=\"activateSelector('checkpoints',true)\">+ Add Checkpoints</button>\r\n                    </label>\r\n                    <div class=\"select\" *ngIf=\"policyForm?.checkpointDetails?.length===0\" (click)=\"activateSelector('checkpoints',true)\">\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 \">Set up a questionnaire to confirm the reader\u2019s<br>understanding of the policy.</div>\r\n                    </div>\r\n                    <div class=\"selected\" *ngIf=\"policyForm?.checkpointDetails?.length > 0\">\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                      </div>\r\n                      <button class=\"edit\" type=\"button\" (click)=\"activateSelector('checkpoints',true)\">\r\n                          <i class=\"icons\">&#xe9ba;</i> Edit</button>\r\n                  </div>\r\n                  <!-- <app-popover #checkpointPopOver [dontCloseonClick]=\"true\">\r\n                    <div class=\"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        <div class=\"form-group-row\" [appScrollInView]=\"scrollToBottom\" *ngIf=\"policyForm.addOverseers\"\r\n        [class.active]=\"activeSelector === 'ccEmail' ||activeSelector === 'ccFail'\"\r\n        [class.disabled]=\"activeSelector && ((activeSelector !== 'ccEmail' && activeSelector !== 'ccFail')) && sideSelectorElements.includes(activeSelector)\">\r\n            <div class=\"left\" [class.checked]=\"policyForm?.CCEmail?.length>0 || policyForm?.CCFailEmail?.length>0 \">\r\n                <img *ngIf=\"(policyForm?.CCFailEmail?.length==0 && policyForm?.CCEmail?.length==0 )|| (activeSelector === 'ccEmail' || activeSelector === 'ccFail' )\"\r\n                    src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/oversight.svg\" alt=\"im\">\r\n\r\n                <svg *ngIf=\"(policyForm?.CCFailEmail?.length>0 || policyForm?.CCEmail?.length>0 )&& (activeSelector !== 'ccEmail' && activeSelector !== 'ccFail' )\"\r\n                    class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                    <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                    <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                </svg>\r\n            </div>\r\n            <div class=\"right\">\r\n                <div class=\"vx-form-group\">\r\n                    <label class=\"vx-control-panel\">Overseer </label>\r\n                    <div class=\"select\" *ngIf=\"policyForm?.CCEmail?.length==0\">\r\n                        <input type=\"text\" (click)=\"activateSelector('ccEmail',true)\"\r\n                            placeholder=\"Who should have oversight of this policy?\" readonly>\r\n                    </div>\r\n                    <div class=\"selected\" *ngIf=\"policyForm?.CCEmail?.length > 0\">\r\n                        <div class=\"chip-container\">\r\n                            <span class=\"chip\" *ngFor=\"let ccEmail of policyForm?.CCEmail?.slice(0,2)\"><i class=\"icons\"\r\n                                    (click)=\"remove('ccEmail',ccEmail)\">&#xe90d;</i>\r\n                                {{ccEmail.employee_name}}</span>\r\n                            <button class=\"count\" *ngIf=\"policyForm?.CCEmail?.length > 2\" type=\"button\" appPopover\r\n                                (click)=\"ccEmailPopover.popover()\" placement=\"right\">+\r\n                                {{policyForm?.CCEmail?.slice(2).length}}</button>\r\n                        </div>\r\n                        <button class=\"edit\" type=\"button\" (click)=\"activateSelector('ccEmail',true)\">\r\n                            <i class=\"icons\">&#xe9ba;</i> Edit</button>\r\n                    </div>\r\n\r\n\r\n                    <div class=\"select\" *ngIf=\"policyForm?.CCFailEmail?.length==0\">\r\n                        <input type=\"text\" (click)=\"activateSelector('ccFail',true)\"\r\n                            placeholder=\"Who should be notified if the policy is not attested on time?\" readonly>\r\n                    </div>\r\n                    <div class=\"selected\" *ngIf=\"policyForm?.CCFailEmail?.length > 0\">\r\n                        <div class=\"chip-container\">\r\n                            <span class=\"chip\" *ngFor=\"let ccFail of policyForm?.CCFailEmail?.slice(0,2)\"><i\r\n                                    class=\"icons\" (click)=\"remove('ccFail',ccFail)\">&#xe90d;</i>\r\n                                {{ccFail.employee_name}}</span>\r\n                            <button class=\"count\" *ngIf=\"policyForm?.CCFailEmail?.length > 2\" type=\"button\" appPopover\r\n                                (click)=\"ccFailPopover.popover()\" placement=\"right\">+\r\n                                {{policyForm?.CCFailEmail?.slice(2).length}}</button>\r\n                        </div>\r\n                        <button class=\"edit\" type=\"button\" (click)=\"activateSelector('ccFail',true)\">\r\n                            <i class=\"icons\">&#xe9ba;</i> Edit</button>\r\n                    </div>\r\n                    <app-popover #ccEmailPopover [dontCloseonClick]=\"true\">\r\n                        <div class=\"action-list\">\r\n                            <ul class=\"action-item\">\r\n                                <li *ngFor=\"let ccEmail of policyForm?.CCEmail | slice: 2; let j = index\">\r\n                                    <div class=\"avatar-card\">\r\n                                        <span class=\"value\">\r\n                                            <i class=\"icons\" (click)=\"remove('ccEmail',ccEmail)\">&#xe90d;</i>\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=\"action-list\">\r\n                            <ul class=\"action-item\">\r\n                                <li *ngFor=\"let ccFail of policyForm?.CCFailEmail | slice: 2; let j = index\">\r\n                                    <div class=\"avatar-card\">\r\n                                        <span class=\"value\">\r\n                                            <i class=\"icons\" (click)=\"remove('ccFail',ccFail)\">&#xe90d;</i>\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        <div class=\"form-group-row\" [appScrollInView]=\"scrollToBottom\" *ngIf=\"policyForm.addAssociatedDocuments\"\r\n        [class.disabled]=\"activeSelector  && activeSelector !== 'name'\">\r\n            <div class=\"left\">\r\n                <img *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                <svg *ngIf=\"policyForm.associatedDocuments.formatFiles?.length>0 \"\r\n                 class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                  <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                  <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n              </svg>\r\n            </div>\r\n            <div class=\"right\">\r\n                <div class=\"vx-form-group\">\r\n                    <label class=\"vx-control-panel\">\r\n                        Associated Documents\r\n                    </label>\r\n                    <app-format-and-evidence (updateFiles)=\"saveSelectedList('associatedDocuments',$event)\"\r\n                    [mode]=\"'policy'\" [organization_id]=\"organization_id\" [formatEvidanceData]=\"policyForm?.associatedDocuments\"></app-format-and-evidence>\r\n                </div>\r\n\r\n            </div>\r\n\r\n        </div>\r\n\r\n    </div>\r\n\r\n\r\n    <app-checkbox-list [config]=\"categoryConfig\" [twoColumn]=\"false\" [itemsList]=\"categoryList\"\r\n        [selectedItems]=\"policyForm.selectedCategories\" [identifierKey]=\"'_id'\" [displayKey]=\"'item_name'\"\r\n        [tooltipKey]=\"'item_name'\" *ngIf=\"activeSelector==='category'\" (saveList)=\"saveSelectedList('category',$event)\"\r\n        (closeList)=\"disableSelector()\">\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 *ngIf=\"activeSelector === 'rc'\" [responsibilityCentersList]=\"rcList\"\r\n        [selectedResponsibilityCenters]=\"policyForm.selectedRCs\" [rcIdKey]=\"'item_id'\"\r\n        (saveSelectedList)=\"saveSelectedList('rc',$event)\" (closeRcList)=\"disableSelector()\">\r\n    </app-responsibility-centers-list>\r\n\r\n\r\n    <app-users-radio-list *ngIf=\"activeSelector === 'reviewer'\" [itemEmailKey]=\"'member_email'\"\r\n        [usersList]=\"allReviewers\" [selectedUsers]=\"policyForm.selectedReviewers\" [userIdKey]=\"'member_id'\"\r\n        [itemNameKey]=\"'member_name'\" (saveSelectedList)=\"saveSelectedList('reviewer',$event)\"\r\n        (closeUsersList)=\"disableSelector()\">\r\n    </app-users-radio-list>\r\n\r\n    <app-owner-list *ngIf=\"activeSelector === 'ccEmail'\" [usersList]=\"overseersList\" [singularText]=\"'User selected'\" [pluralText]=\"'Users selected'\"\r\n        [selectedUsers]=\"policyForm.CCEmail\" [userIdKey]=\"'employee_id'\" [itemNameKey]=\"'employee_name'\"\r\n        (saveSelectedList)=\"saveSelectedList('ccEmail',$event)\" (closeUsersList)=\"disableSelector()\">\r\n    </app-owner-list>\r\n\r\n    <app-owner-list *ngIf=\"activeSelector ==='ccFail'\" [usersList]=\"overseersList\" [singularText]=\"'User selected'\" [pluralText]=\"'Users selected'\"\r\n        [selectedUsers]=\"policyForm.CCFailEmail\" [userIdKey]=\"'employee_id'\" [itemNameKey]=\"'employee_name'\"\r\n        (saveSelectedList)=\"saveSelectedList('ccFail',$event)\" (closeUsersList)=\"disableSelector()\">\r\n    </app-owner-list>\r\n\r\n    <app-group-users-list *ngIf=\"activeSelector === 'assignees'\" [usersList]=\"assigneesList\" [groupsList]=\"groupsList\"\r\n        [selectedUsers]=\"policyForm.selectedAssignees\" [userIdKey]=\"'my_member_id'\"\r\n        (saveSelectedList)=\"saveSelectedList('assignees',$event)\" (closeUsersList)=\"disableSelector()\">\r\n    </app-group-users-list>\r\n\r\n    <app-owner-list *ngIf=\"activeSelector === 'approvers'\" [listHeading]=\"'Select Approvers'\"\r\n        [singularText]=\"'User selected'\" [pluralText]=\"'Users selected'\" [usersList]=\"allApprovers\"\r\n        [showWorkflow]=\"true\"\r\n        [selectedUsers]=\"addMoreLevels?[]: policyForm.selectedApprovers[approversListIndex].approvers\"\r\n        [userIdKey]=\"'member_id'\" [itemEmailKey]=\"'member_email'\" [itemNameKey]=\"'member_name'\"\r\n        (saveSelectedList)=\"saveSelectedList('approvers',$event)\" (closeUsersList)=\"disableSelector()\" [mode]=\"mode\"\r\n        [reviewerWorkflowType]=\"workflowType\" (reviewerWorkflowTypeChange)=\"reviewerTypeChange($event)\"\r\n        [workflowList]=\"workflowList\" [workflowText]=\"'Approval Workflow'\">\r\n    </app-owner-list>\r\n\r\n    <app-frequency-container *ngIf=\"activeSelector === 'frequency'\" [mode]=\"'policy'\"\r\n        [frequencyDetails]=\"frequencyDetails\" (selectedFrequency)=\"frequencyData($event)\"\r\n        (closeFrequency)=\"disableSelector()\"></app-frequency-container>\r\n\r\n    <app-frequency-container *ngIf=\"activeSelector === 'reviewerFrequency'\" [mode]=\"'reviewerFrequency'\"\r\n        [frequencyDetails]=\"reviewerFrequencyDetails\" (selectedFrequency)=\"reviewerFrequencyData($event)\"\r\n        (closeFrequency)=\"disableSelector()\"></app-frequency-container>\r\n    <app-checkpoints-policy-container (closeCheckPoint)=\"disableSelector()\" [checkpointData]=\"policyForm?.checkpointDetails\" [requiredPoint]=\"policyForm?.passingMarks\" *ngIf=\"activeSelector === 'checkpoints'\" (saveCheckPoint)=\"saveSelectedList('checkpoints',$event)\"></app-checkpoints-policy-container>\r\n    <app-loader-inline *ngIf=\"loader\"></app-loader-inline>\r\n\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 *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\r\n</ng-container>\r\n",
+                    template: "<!-- <p>workflow-policy works!</p> -->\r\n\r\n<ng-container *ngIf=\"!showCreateDocuments\">\r\n    <div class=\"workflow-policy\">\r\n        <div class=\"form-group-row\"  [class.disabled]=\"activeSelector && activeSelector !== 'name'\">\r\n            <div class=\"left\" [class.checked]=\"policyForm?.policyName\">\r\n                <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/what.svg\" alt=\"name\"\r\n                    *ngIf=\"!policyForm?.policyName || activeSelector === 'name'\">\r\n\r\n                <svg *ngIf=\"policyForm?.policyName && activeSelector !== 'name'\" class=\"checkIcon\"\r\n                    xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                    <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                    <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                </svg>\r\n            </div>\r\n            <div class=\"right\">\r\n                <div class=\"vx-form-group\">\r\n                    <label class=\"vx-control-panel\">\r\n                        Policy Name <span class=\"required\">*</span>\r\n                    </label>\r\n                    <input  type=\"text\" (keydown)=\"activeSelector = 'name'\" (focusin)=\"activateSelector('name',true)\"  *ngIf=\"policyForm.policyName =='' || activeSelector === 'name'\"\r\n                        (focusout)=\"activateSelector('name',false)\" [(ngModel)]=\"policyForm.policyName\"\r\n                        placeholder=\"Name this policy\">\r\n                        <div class=\"selected\" *ngIf=\"policyForm.policyName.length && activeSelector !== 'name'\">\r\n                            <div class=\"chip-container\">\r\n                                <span class=\"value\">{{policyForm.policyName}}</span>\r\n                            </div>\r\n                            <button class=\"edit\" (click)=\"activateSelector('name',true)\" type=\"button\"><i\r\n                                    class=\"icons\">&#xe9ba;</i> Edit</button>\r\n                        </div>\r\n\r\n                    <p *ngIf=\"submitted && (!policyForm.policyName.trim()) \" [appScrollInView]=\"true\" class=\"error-message\">Please enter a name for this\r\n                        policy. </p>\r\n                    <marx-editor [(ngModel)]=\"policyForm.policyNotes\" [editorConfig]=\"description\"></marx-editor>\r\n                    <app-cs-switch [(ngValue)]=\"policyForm.availableOnPortal\"\r\n                        (ngValueChange)=\"availabilityOnPortal($event)\">\r\n                        Do you want this policy to be available on the portal? <i class=\"icons\"\r\n                        [appTooltip]=\"'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                         placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=\"true\">&#xe932;</i>\r\n                    </app-cs-switch>\r\n                    <app-cs-switch *ngIf=\"policyForm.availableOnPortal\" [(ngValue)]=\"policyForm.acceptSuggestions\">\r\n                        Accept\r\n                        suggestions <i class=\"icons\" [appTooltip]=\"'If enabled, users can provide improvement suggestions to the policies that are listed on the Policy Portal.'\" placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=\"true\">&#xe932;</i></app-cs-switch>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"form-group-row\" [class.active]=\"activeSelector === 'category'\"\r\n        [class.disabled]=\" activeSelector && activeSelector !== 'category' && sideSelectorElements.includes(activeSelector)\">\r\n            <div class=\"left\" [class.checked]=\"policyForm?.selectedCategories?.length>0\">\r\n                <img *ngIf=\"policyForm?.selectedCategories?.length==0 || activeSelector === 'category'\"\r\n                    src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/category.svg\" alt=\"\" />\r\n\r\n                <svg *ngIf=\"policyForm?.selectedCategories?.length>0 && activeSelector !== 'category'\" class=\"checkIcon\"\r\n                    xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                    <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                    <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                </svg>\r\n            </div>\r\n            <div class=\"right\">\r\n                <div class=\"vx-form-group\">\r\n                    <label class=\"vx-control-panel\">Policy Category <span class=\"required\">*</span> </label>\r\n                    <div class=\"select\" *ngIf=\"policyForm?.selectedCategories?.length==0\">\r\n                        <input type=\"text\" (click)=\"activateSelector('category',true)\"\r\n                            placeholder=\"Select a category for this policy.\" readonly>\r\n                    </div>\r\n\r\n                    <div class=\"selected\" *ngIf=\"policyForm?.selectedCategories?.length>0\">\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 *ngIf=\"activeSelector !== 'category'\" class=\"edit\" type=\"button\"\r\n                            (click)=\"activateSelector('category',true)\"><i class=\"icons\">&#xe9ba;</i>\r\n                            Edit</button>\r\n                    </div>\r\n                    <app-popover #category [dontCloseonClick]=\"true\">\r\n                        <div class=\"action-list\">\r\n                            <ul class=\"action-item\">\r\n                                <li *ngFor=\"let category of policyForm?.selectedCategories | slice: 2; let j = index\">\r\n                                    <div class=\"avatar-card\">\r\n                                        <span class=\"value\">\r\n                                            <i class=\"icons\" (click)=\"remove('category',category)\">&#xe90d;</i>\r\n                                            {{ category.item_name }}\r\n                                        </span>\r\n                                    </div>\r\n                                </li>\r\n                            </ul>\r\n                        </div>\r\n                    </app-popover>\r\n                    <p *ngIf=\"submitted && (policyForm?.selectedCategories?.length==0) \" [appScrollInView]=\"true\" class=\"error-message\">Please\r\n                        select\r\n                        the category for this policy.</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\">{{tag.tagname}}</label>\r\n                        <input type=\"text\" [(ngModel)]=\"tag.value\" placeholder=\"{{tag.tagname}}\">\r\n                    </ng-container>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"form-group-row\" [class.active]=\"activeSelector === 'approvers'\"\r\n        [class.disabled]=\" (activeSelector && activeSelector !== 'approvers' && sideSelectorElements.includes(activeSelector))\">\r\n            <div class=\"left\" [class.checked]=\"policyForm?.selectedApprovers?.length>0\">\r\n                <img *ngIf=\"policyForm?.selectedApprovers?.length==0 || activeSelector === 'approvers'\"\r\n                    src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/approval.svg\" alt=\"im\">\r\n\r\n                <svg *ngIf=\"policyForm?.selectedApprovers?.length>0 && activeSelector !== 'approvers'\" class=\"checkIcon\"\r\n                    xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                    <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                    <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                </svg>\r\n            </div>\r\n            <div class=\"right\">\r\n                <div class=\"vx-form-group approval-workflow\" [class.disabled]=\"(policyApprovalFlag!==0)\">\r\n                    <label class=\"vx-control-panel\">\r\n                        Approval workflow <span class=\"required\">*</span>\r\n                        <button (click)=\"activateSelector('approvers',true);addMoreLevels=true; workflowType = 'SEQUENTIAL' \"\r\n                            class=\"button\">Create a new Approval Workflow</button>\r\n                    </label>\r\n                    <div class=\"select\" [class.disabled]=\"approverWorkFlowList?.length==0\"\r\n                        *ngIf=\"policyForm?.selectedApprovers[0]?.approvers?.length==0 ||policyForm?.selectedApprovers.length==0 \">\r\n\r\n                        <cs-select [ngModel]=\"selectedApprovalWorkflow\"\r\n                            (ngModelChange)=\"selectedWorkflowChange($event)\"\r\n                            [placeholder]=\"'Select approval workflow for this policy'\" name=\"selectedApprovalWorkflow\"\r\n                            [setMaxWidth]=\"true\">\r\n                            <cs-option *ngFor=\"let data of approverWorkFlowList\" [value]=\"data\">\r\n                                {{data.workflow_name}}\r\n                            </cs-option>\r\n                            <cs-option [value]=\"-1\" (click)=\"activateSelector('approvers',true);addMoreLevels=true; workflowType = 'SEQUENTIAL' \"\r\n                             >Create a new approval workflow</cs-option>\r\n\r\n                        </cs-select>\r\n                    </div>\r\n                    <ng-container *ngIf=\" policyForm?.selectedApprovers[0]?.approvers?.length>0\">\r\n                        <div class=\"selected\" *ngFor=\"let level of policyForm?.selectedApprovers; let i = index\">\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 class=\"chip\" *ngFor=\"let approver of level.approvers.slice(0,1);let j=index\"><i class=\"icons\"\r\n                                            (click)=\"remove('approvers',approver,i)\">&#xe90d;</i> <span\r\n                                            class=\"step\" *ngIf=\"level.name=='SEQUENTIAL'\" >{{j+1}}</span>{{approver.member_name}}</span>\r\n\r\n\r\n                                    <button class=\"count\" *ngIf=\"level.approvers?.length > 1\" type=\"button\" appPopover\r\n                                        (click)=\"labelName.popover()\" placement=\"right\">+\r\n\r\n                                        {{level.approvers.slice(1).length}}\r\n\r\n                                    </button>\r\n                                    <app-popover #labelName [dontCloseonClick]=\"true\">\r\n                                        <div class=\"action-list\">\r\n                                            <ul class=\"action-item\">\r\n                                                <li *ngFor=\"let approver of level.approvers | slice: 1; let j = index\">\r\n                                                    <div class=\"avatar-card\">\r\n                                                        <span class=\"value\">\r\n                                                            <i class=\"icons\"\r\n                                                                (click)=\"remove('approvers',approver,i)\">&#xe90d;</i>\r\n                                                                <span class=\"step\" *ngIf=\"level.name=='SEQUENTIAL'\">\r\n                                                                    {{(j==level.approvers.slice(1).length-1)? 'Final' : (j+2) }}\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\r\n                                </div>\r\n                                <button class=\"edit\" type=\"button\"\r\n                                    (click)=\"activateSelector('approvers',true,level.name);approversListIndex = i\"><i\r\n                                        class=\"icons\">&#xe9ba;</i>Edit</button>\r\n                                <button class=\"close-btn\" (click)=\"remove('workflowLevel',level,i)\" >\r\n                                    <i class=\"icons\">&#xe90d;</i>\r\n                                </button>\r\n                            </div>\r\n\r\n\r\n\r\n                        </div>\r\n                    </ng-container>\r\n\r\n                    <p *ngIf=\"submitted && (policyForm?.selectedApprovers?.length==0) && (policyApprovalFlag === 0)\"  [appScrollInView]=\"true\" class=\"error-message\">\r\n                        Select or create an approval workflow for this policy.</p>\r\n\r\n                    <label class=\"vx-control-panel\" *ngIf=\"policyForm.selectedApprovers[0]?.approvers?.length>0\"><button\r\n                            class=\"button\"\r\n                            (click)=\"activateSelector('approvers',true);addMoreLevels=true; workflowType = 'SEQUENTIAL' \">+\r\n                            Add More Levels</button></label>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"form-group-row\" [class.active]=\"activeSelector === 'assignees'\"\r\n        [class.disabled]=\" activeSelector && activeSelector !== 'assignees' && sideSelectorElements.includes(activeSelector)\">\r\n            <div class=\"left\" [class.checked]=\"policyForm?.selectedAssignees?.length>0\">\r\n                <img *ngIf=\"policyForm?.selectedAssignees?.length==0 || activeSelector === 'assignees'\"\r\n                    src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/who.svg\" alt=\"im\">\r\n\r\n                <svg *ngIf=\"policyForm?.selectedAssignees?.length>0 && activeSelector !== 'assignees'\" class=\"checkIcon\"\r\n                    xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                    <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                    <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                </svg>\r\n            </div>\r\n            <div class=\"right\">\r\n                <div class=\"vx-form-group\">\r\n                    <label class=\"vx-control-panel\">Who?</label>\r\n                    <div class=\"select\" *ngIf=\"policyForm?.selectedAssignees?.length==0\">\r\n                        <input type=\"text\" (click)=\"activateSelector('assignees',true)\"\r\n                            placeholder=\"Select the persons responsible for attesting this policy.\" readonly>\r\n                    </div>\r\n                    <div class=\"selected\" *ngIf=\"policyForm?.selectedAssignees?.length > 0\">\r\n                        <div class=\"chip-container\">\r\n                            <span class=\"chip\" *ngFor=\"let assignee of policyForm?.selectedAssignees?.slice(0,2)\"><i\r\n                                    class=\"icons\" (click)=\"remove('assignees',assignee)\">&#xe90d;</i>\r\n                                {{assignee.employee_name}}</span>\r\n                            <button class=\"count\" *ngIf=\"policyForm?.selectedAssignees?.length > 2\" type=\"button\"\r\n                                appPopover (click)=\"assigneePopover.popover()\" placement=\"right\">+\r\n                                {{policyForm?.selectedAssignees?.slice(2).length}}</button>\r\n                        </div>\r\n                        <button class=\"edit\" type=\"button\" (click)=\"activateSelector('assignees',true)\">\r\n                            <i class=\"icons\">&#xe9ba;</i> Edit</button>\r\n                    </div>\r\n                    <p *ngIf=\"submitted && (policyForm?.selectedAssignees?.length==0 && policyForm?.frequency_details)\"\r\n                        class=\"error-message\"  [appScrollInView]=\"true\">Select the persons responsible for attesting this policy.</p>\r\n                    <app-cs-switch [(ngValue)]=\"policyForm.requiresSignatureForAttestation\"\r\n                    [class.disabled]=\"policyForm?.selectedAssignees?.length==0\" class=\"who-toggle\">THIS POLICY REQUIRES\r\n                        E-SIGNATURE\r\n                        FOR ATTESTATION <i class=\"icons\" [appTooltip]=\"'If selected, the readers will be required to attest this policy using their electronic signature.'\"  placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=\"true\">&#xe91f;</i></app-cs-switch>\r\n                    <app-popover #assigneePopover [dontCloseonClick]=\"true\">\r\n                        <div class=\"action-list\">\r\n                            <ul class=\"action-item\">\r\n                                <li *ngFor=\"let assignee of policyForm?.selectedAssignees | slice: 2; let j = index\">\r\n                                    <div class=\"avatar-card\">\r\n                                        <span class=\"value\">\r\n                                            <i class=\"icons\" (click)=\"remove('assignees',assignee)\">&#xe90d;</i>\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                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"form-group-row\" [class.active]=\"activeSelector === 'frequency'\"\r\n        [class.disabled]=\" activeSelector && activeSelector !== 'frequency' && sideSelectorElements.includes(activeSelector)\">\r\n            <div class=\"left\" [class.checked]=\"policyForm?.frequency_details\">\r\n                <img *ngIf=\"(!policyForm?.frequency_details) || activeSelector === 'frequency'\"\r\n                    src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/when.svg\" alt=\"im\">\r\n\r\n                <svg *ngIf=\"policyForm?.frequency_details && activeSelector !== 'frequency'\" class=\"checkIcon\"\r\n                    xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                    <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                    <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                </svg>\r\n            </div>\r\n            <div class=\"right\">\r\n                <div class=\"vx-form-group\">\r\n                    <label class=\"vx-control-panel\">When?</label>\r\n\r\n                    <div *ngIf=\"policyForm?.frequency_details == ''\" class=\"select button-sec\">\r\n                        <div class=\"custom-input frequency-custom-input\" (click)=\"activateSelector('frequency',true)\">{{frequencyPlaceholder}}</div>\r\n\r\n                        <button (click)=\"activateSelector('frequency',true)\" type=\"button\">Set A frequency</button>\r\n                    </div>\r\n                    <div *ngIf=\"policyForm?.frequency_details != ''\" class=\"selected button-sec\">\r\n                        <span class=\"chip\">{{frequencyPlaceholder}}</span>\r\n                        <button *ngIf=\"activeSelector !== 'frequency'\" type=\"button\" class=\"edit\"\r\n                            (click)=\"activateSelector('frequency',true)\">\r\n                            <i class=\"icons\">&#xe9ba;</i>Edit\r\n                        </button>\r\n                    </div>\r\n                    <p *ngIf=\"submitted && ((policyForm?.selectedAssignees?.length>0) && (!policyForm?.frequency_details))\"\r\n                        class=\"error-message\"  [appScrollInView]=\"true\">Select an attestation schedule for this policy.</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        <div class=\"form-group-row\" *ngIf=\"showRiskClassification\"\r\n            [class.disabled]=\"activeSelector  && activeSelector !== 'name'\">\r\n            <div class=\"left\" [class.checked]=\"policyForm.riskRating\">\r\n                <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/risks.svg\" alt=\"im\"\r\n                    *ngIf=\"!policyForm?.riskRating\">\r\n\r\n                <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\"\r\n                    *ngIf=\"policyForm?.riskRating\">\r\n                    <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                    <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                </svg>\r\n            </div>\r\n\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 class=\"low\" *ngFor=\" let class of riskClassification\" [ngClass]=\"[class.class]\">\r\n                            <input type=\"radio\" name=\"classification\" [value]=\"class.value\"\r\n                                [checked]=\"policyForm?.riskRating === class.value\" [(ngModel)]=\"policyForm.riskRating\">\r\n                            <span>{{class.name}}</span>\r\n                        </label>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div class=\"form-group-row\" [appScrollInView]=\"scrollToBottom\" *ngIf=\"policyForm.addResponsibilityCenters\"\r\n            [class.active]=\"activeSelector === 'rc'\"\r\n            [class.disabled]=\" activeSelector && activeSelector !== 'rc' && sideSelectorElements.includes(activeSelector)\">\r\n            <div class=\"left\" [class.checked]=\"policyForm?.selectedRCs?.length>0\">\r\n                <img *ngIf=\"policyForm?.selectedRCs?.length==0 || activeSelector === 'rc'\"\r\n                    src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/responsibility-center.svg\"\r\n                    alt=\"\">\r\n\r\n                <svg *ngIf=\"policyForm?.selectedRCs?.length>0 &&  activeSelector !== 'rc'\" class=\"checkIcon\"\r\n                    xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                    <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                    <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                </svg>\r\n            </div>\r\n            <div class=\"right\">\r\n                <div class=\"vx-form-group\">\r\n                    <label class=\"vx-control-panel\">Responsibility Center</label>\r\n                    <div class=\"select\" *ngIf=\"policyForm?.selectedRCs?.length==0\">\r\n                        <input type=\"text\" (click)=\"activateSelector('rc',true)\"\r\n                            placeholder=\"Select Responsibility Center(s) that this policy relates to.\" readonly>\r\n                    </div>\r\n                    <div class=\"selected\" *ngIf=\"policyForm?.selectedRCs?.length > 0\">\r\n                        <div class=\"chip-container\">\r\n                            <span class=\"chip\" *ngFor=\"let rc of policyForm?.selectedRCs?.slice(0,2)\"><i class=\"icons\"\r\n                                    (click)=\"remove('rc',rc)\">&#xe90d;</i>\r\n                                {{rc.item_name}}</span>\r\n                            <button class=\"count\" *ngIf=\"policyForm?.selectedRCs?.length > 2\" type=\"button\" appPopover\r\n                                (click)=\"rcPopover.popover()\" placement=\"right\">+\r\n                                {{policyForm?.selectedRCs?.slice(2).length}}</button>\r\n                        </div>\r\n                        <button class=\"edit\" type=\"button\" (click)=\"activateSelector('rc',true)\">\r\n                            <i class=\"icons\">&#xe9ba;</i> Edit</button>\r\n                    </div>\r\n                    <app-popover #rcPopover [dontCloseonClick]=\"true\">\r\n                        <div class=\"action-list\">\r\n                            <ul class=\"action-item\">\r\n                                <li *ngFor=\"let rc of policyForm?.selectedRCs | slice: 2; let j = index\">\r\n                                    <div class=\"avatar-card\">\r\n                                        <span class=\"value\">\r\n                                            <i class=\"icons\" (click)=\"remove('rc',rc)\">&#xe90d;</i>\r\n                                            {{ rc.item_name }}\r\n                                        </span>\r\n                                    </div>\r\n                                </li>\r\n                            </ul>\r\n                        </div>\r\n                    </app-popover>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"form-group-row\" [appScrollInView]=\"scrollToBottom\" *ngIf=\"policyForm.addReviewers\"\r\n            [class.active]=\"activeSelector === 'reviewer'\"\r\n            [class.disabled]=\"activeSelector && (activeSelector !== 'reviewer' && activeSelector !== 'reviewerFrequency' ) && sideSelectorElements.includes(activeSelector)\">\r\n            <div class=\"left\" [class.checked]=\"policyForm?.selectedReviewers?.length>0\">\r\n                <img *ngIf=\"policyForm?.selectedReviewers?.length==0 || activeSelector === 'reviewer'\"\r\n                    src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/reviewer.svg\" alt=\"\">\r\n\r\n                <svg *ngIf=\"policyForm?.selectedReviewers?.length>0 && activeSelector !== 'reviewer'\" class=\"checkIcon\"\r\n                    xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                    <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                    <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                </svg>\r\n            </div>\r\n            <div class=\"right\">\r\n                <div class=\"vx-form-group\">\r\n                    <label class=\"vx-control-panel\">Reviewer </label>\r\n                    <div class=\"select\" *ngIf=\"policyForm?.selectedReviewers?.length==0\">\r\n                        <input type=\"text\" (click)=\"activateSelector('reviewer',true)\" placeholder=\"Select the person responsible for reviewing this policy\"\r\n                            readonly>\r\n                    </div>\r\n\r\n                    <div class=\"selected\" *ngIf=\"policyForm?.selectedReviewers?.length > 0\">\r\n                        <div class=\"chip-container\">\r\n                            <span class=\"chip\" *ngFor=\"let reviewer of policyForm?.selectedReviewers\"><i class=\"icons\"\r\n                                    (click)=\"remove('reviewer',reviewer)\">&#xe90d;</i>\r\n                                {{reviewer.member_name}}</span>\r\n\r\n                        </div>\r\n                        <button class=\"edit\" type=\"button\" (click)=\"activateSelector('reviewer',true)\">\r\n                            <i class=\"icons\">&#xe9ba;</i> Edit</button>\r\n                    </div>\r\n                    <p *ngIf=\"submitted && (policyForm?.selectedReviewers?.length==0) && (policyForm?.review_frequency_details)\"\r\n                        class=\"error-message\"  [appScrollInView]=\"true\">Select a reviewer for this policy.</p>\r\n\r\n\r\n\r\n                    <label class=\"vx-control-panel\">When? </label>\r\n\r\n\r\n                    <div *ngIf=\"policyForm?.review_frequency_details == '' \" class=\"select button-sec\">\r\n                        <input type=\"text\" (click)=\"activateSelector('reviewerFrequency',true)\"\r\n                            [placeholder]=\"reviewerFrequencyPlaceholder\" readonly>\r\n                        <button (click)=\"activateSelector('reviewerFrequency',true)\" type=\"button\">Set A\r\n                            frequency</button>\r\n                    </div>\r\n                    <div *ngIf=\"policyForm?.review_frequency_details != '' \" class=\"selected button-sec\">\r\n                        <span class=\"chip\">{{reviewerFrequencyPlaceholder}}</span>\r\n                        <button *ngIf=\"activeSelector !== 'reviewerFrequency'\" type=\"button\" class=\"edit\"\r\n                            (click)=\"activateSelector('reviewerFrequency',true)\">\r\n                            <i class=\"icons\">&#xe9ba;</i>Edit\r\n                        </button>\r\n                    </div>\r\n                    <p *ngIf=\"submitted && (policyForm?.selectedReviewers?.length>0) && (!policyForm?.review_frequency_details)\"\r\n                        class=\"error-message\"  [appScrollInView]=\"true\">Select the review schedule for this policy.</p>\r\n\r\n                    <app-format-and-evidence (updateFiles)=\"saveSelectedList('reviewer_attachments',$event)\" #formatEvidence\r\n                        [mode]=\"'policyReviewer'\" [organization_id]=\"organization_id\" [formatEvidanceData]=\"policyForm?.documentsAndLinks\">\r\n                    </app-format-and-evidence>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"form-group-row\" [appScrollInView]=\"scrollToBottom\" *ngIf=\"policyForm.addCheckpoints\"\r\n        [class.active]=\"activeSelector === 'checkpoints'\"\r\n        [class.disabled]=\" activeSelector && activeSelector !== 'checkpoints' && sideSelectorElements.includes(activeSelector)\">\r\n            <div class=\"left\" [class.checked]=\"policyForm?.checkpointDetails?.length>0\">\r\n                <img *ngIf=\"policyForm?.checkpointDetails?.length==0 || activeSelector === 'checkpoints'\"\r\n                    src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/checkpoints.svg\" alt=\"im\">\r\n\r\n                <svg *ngIf=\"policyForm?.checkpointDetails?.length>0 && activeSelector !== 'checkpoints'\"\r\n                    class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                    <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                    <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                </svg>\r\n            </div>\r\n            <div class=\"right\">\r\n                <div class=\"vx-form-group\">\r\n                    <label class=\"vx-control-panel\">\r\n                        Checkpoints\r\n                        <button  *ngIf=\"policyForm?.checkpointDetails?.length===0\" class=\"button\" (click)=\"activateSelector('checkpoints',true)\">+ Add Checkpoints</button>\r\n                    </label>\r\n                    <div class=\"select\" *ngIf=\"policyForm?.checkpointDetails?.length===0\" (click)=\"activateSelector('checkpoints',true)\">\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 \">Set up a questionnaire to confirm the reader\u2019s<br>understanding of the policy.</div>\r\n                    </div>\r\n                    <div class=\"selected\" *ngIf=\"policyForm?.checkpointDetails?.length > 0\">\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                      </div>\r\n                      <button class=\"edit\" type=\"button\" (click)=\"activateSelector('checkpoints',true)\">\r\n                          <i class=\"icons\">&#xe9ba;</i> Edit</button>\r\n                  </div>\r\n                  <!-- <app-popover #checkpointPopOver [dontCloseonClick]=\"true\">\r\n                    <div class=\"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        <div class=\"form-group-row\" [appScrollInView]=\"scrollToBottom\" *ngIf=\"policyForm.addOverseers\"\r\n        [class.active]=\"activeSelector === 'ccEmail' ||activeSelector === 'ccFail'\"\r\n        [class.disabled]=\"activeSelector && ((activeSelector !== 'ccEmail' && activeSelector !== 'ccFail')) && sideSelectorElements.includes(activeSelector)\">\r\n            <div class=\"left\" [class.checked]=\"policyForm?.CCEmail?.length>0 || policyForm?.CCFailEmail?.length>0 \">\r\n                <img *ngIf=\"(policyForm?.CCFailEmail?.length==0 && policyForm?.CCEmail?.length==0 )|| (activeSelector === 'ccEmail' || activeSelector === 'ccFail' )\"\r\n                    src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/oversight.svg\" alt=\"im\">\r\n\r\n                <svg *ngIf=\"(policyForm?.CCFailEmail?.length>0 || policyForm?.CCEmail?.length>0 )&& (activeSelector !== 'ccEmail' && activeSelector !== 'ccFail' )\"\r\n                    class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                    <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                    <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                </svg>\r\n            </div>\r\n            <div class=\"right\">\r\n                <div class=\"vx-form-group\">\r\n                    <label class=\"vx-control-panel\">Overseer </label>\r\n                    <div class=\"select\" *ngIf=\"policyForm?.CCEmail?.length==0\">\r\n                        <input type=\"text\" (click)=\"activateSelector('ccEmail',true)\"\r\n                            placeholder=\"Who should have oversight of this policy?\" readonly>\r\n                    </div>\r\n                    <div class=\"selected\" *ngIf=\"policyForm?.CCEmail?.length > 0\">\r\n                        <div class=\"chip-container\">\r\n                            <span class=\"chip\" *ngFor=\"let ccEmail of policyForm?.CCEmail?.slice(0,2)\"><i class=\"icons\"\r\n                                    (click)=\"remove('ccEmail',ccEmail)\">&#xe90d;</i>\r\n                                {{ccEmail.employee_name}}</span>\r\n                            <button class=\"count\" *ngIf=\"policyForm?.CCEmail?.length > 2\" type=\"button\" appPopover\r\n                                (click)=\"ccEmailPopover.popover()\" placement=\"right\">+\r\n                                {{policyForm?.CCEmail?.slice(2).length}}</button>\r\n                        </div>\r\n                        <button class=\"edit\" type=\"button\" (click)=\"activateSelector('ccEmail',true)\">\r\n                            <i class=\"icons\">&#xe9ba;</i> Edit</button>\r\n                    </div>\r\n\r\n\r\n                    <div class=\"select\" *ngIf=\"policyForm?.CCFailEmail?.length==0\">\r\n                        <input type=\"text\" (click)=\"activateSelector('ccFail',true)\"\r\n                            placeholder=\"Who should be notified if the policy is not attested on time?\" readonly>\r\n                    </div>\r\n                    <div class=\"selected\" *ngIf=\"policyForm?.CCFailEmail?.length > 0\">\r\n                        <div class=\"chip-container\">\r\n                            <span class=\"chip\" *ngFor=\"let ccFail of policyForm?.CCFailEmail?.slice(0,2)\"><i\r\n                                    class=\"icons\" (click)=\"remove('ccFail',ccFail)\">&#xe90d;</i>\r\n                                {{ccFail.employee_name}}</span>\r\n                            <button class=\"count\" *ngIf=\"policyForm?.CCFailEmail?.length > 2\" type=\"button\" appPopover\r\n                                (click)=\"ccFailPopover.popover()\" placement=\"right\">+\r\n                                {{policyForm?.CCFailEmail?.slice(2).length}}</button>\r\n                        </div>\r\n                        <button class=\"edit\" type=\"button\" (click)=\"activateSelector('ccFail',true)\">\r\n                            <i class=\"icons\">&#xe9ba;</i> Edit</button>\r\n                    </div>\r\n                    <app-popover #ccEmailPopover [dontCloseonClick]=\"true\">\r\n                        <div class=\"action-list\">\r\n                            <ul class=\"action-item\">\r\n                                <li *ngFor=\"let ccEmail of policyForm?.CCEmail | slice: 2; let j = index\">\r\n                                    <div class=\"avatar-card\">\r\n                                        <span class=\"value\">\r\n                                            <i class=\"icons\" (click)=\"remove('ccEmail',ccEmail)\">&#xe90d;</i>\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=\"action-list\">\r\n                            <ul class=\"action-item\">\r\n                                <li *ngFor=\"let ccFail of policyForm?.CCFailEmail | slice: 2; let j = index\">\r\n                                    <div class=\"avatar-card\">\r\n                                        <span class=\"value\">\r\n                                            <i class=\"icons\" (click)=\"remove('ccFail',ccFail)\">&#xe90d;</i>\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        <div class=\"form-group-row\" [appScrollInView]=\"scrollToBottom\" *ngIf=\"policyForm.addAssociatedDocuments\"\r\n        [class.disabled]=\"activeSelector  && activeSelector !== 'name'\">\r\n            <div class=\"left\">\r\n                <img *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                <svg *ngIf=\"policyForm.associatedDocuments.formatFiles?.length>0 \"\r\n                 class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                  <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                  <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n              </svg>\r\n            </div>\r\n            <div class=\"right\">\r\n                <div class=\"vx-form-group\">\r\n                    <label class=\"vx-control-panel\">\r\n                        Associated Documents\r\n                    </label>\r\n                    <app-format-and-evidence (updateFiles)=\"saveSelectedList('associatedDocuments',$event)\"\r\n                    [mode]=\"'policy'\" [organization_id]=\"organization_id\" [formatEvidanceData]=\"policyForm?.associatedDocuments\"></app-format-and-evidence>\r\n                </div>\r\n\r\n            </div>\r\n\r\n        </div>\r\n\r\n    </div>\r\n\r\n\r\n    <app-checkbox-list [config]=\"categoryConfig\" [twoColumn]=\"false\" [itemsList]=\"categoryList\"\r\n        [selectedItems]=\"policyForm.selectedCategories\" [identifierKey]=\"'_id'\" [displayKey]=\"'item_name'\"\r\n        [tooltipKey]=\"'item_name'\" *ngIf=\"activeSelector==='category'\" (saveList)=\"saveSelectedList('category',$event)\"\r\n        (closeList)=\"disableSelector()\">\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 *ngIf=\"activeSelector === 'rc'\" [responsibilityCentersList]=\"rcList\"\r\n        [selectedResponsibilityCenters]=\"policyForm.selectedRCs\" [rcIdKey]=\"'item_id'\"\r\n        (saveSelectedList)=\"saveSelectedList('rc',$event)\" (closeRcList)=\"disableSelector()\">\r\n    </app-responsibility-centers-list>\r\n\r\n\r\n    <app-users-radio-list *ngIf=\"activeSelector === 'reviewer'\" [itemEmailKey]=\"'member_email'\"\r\n        [usersList]=\"allReviewers\" [selectedUsers]=\"policyForm.selectedReviewers\" [userIdKey]=\"'member_id'\"\r\n        [itemNameKey]=\"'member_name'\" (saveSelectedList)=\"saveSelectedList('reviewer',$event)\"\r\n        (closeUsersList)=\"disableSelector()\">\r\n    </app-users-radio-list>\r\n\r\n    <app-owner-list *ngIf=\"activeSelector === 'ccEmail'\" [usersList]=\"overseersList\" [singularText]=\"'User selected'\" [pluralText]=\"'Users selected'\"\r\n        [selectedUsers]=\"policyForm.CCEmail\" [userIdKey]=\"'employee_id'\" [itemNameKey]=\"'employee_name'\"\r\n        (saveSelectedList)=\"saveSelectedList('ccEmail',$event)\" (closeUsersList)=\"disableSelector()\">\r\n    </app-owner-list>\r\n\r\n    <app-owner-list *ngIf=\"activeSelector ==='ccFail'\" [usersList]=\"overseersList\" [singularText]=\"'User selected'\" [pluralText]=\"'Users selected'\"\r\n        [selectedUsers]=\"policyForm.CCFailEmail\" [userIdKey]=\"'employee_id'\" [itemNameKey]=\"'employee_name'\"\r\n        (saveSelectedList)=\"saveSelectedList('ccFail',$event)\" (closeUsersList)=\"disableSelector()\">\r\n    </app-owner-list>\r\n\r\n    <app-group-users-list *ngIf=\"activeSelector === 'assignees'\" [usersList]=\"assigneesList\" [groupsList]=\"groupsList\"\r\n        [selectedUsers]=\"policyForm.selectedAssignees\" [userIdKey]=\"'my_member_id'\"\r\n        (saveSelectedList)=\"saveSelectedList('assignees',$event)\" (closeUsersList)=\"disableSelector()\">\r\n    </app-group-users-list>\r\n\r\n    <app-owner-list *ngIf=\"activeSelector === 'approvers'\" [listHeading]=\"'Select Approvers'\"\r\n        [singularText]=\"'User selected'\" [pluralText]=\"'Users selected'\" [usersList]=\"allApprovers\"\r\n        [showWorkflow]=\"true\"\r\n        [selectedUsers]=\"addMoreLevels?[]: policyForm.selectedApprovers[approversListIndex].approvers\"\r\n        [userIdKey]=\"'member_id'\" [itemEmailKey]=\"'member_email'\" [itemNameKey]=\"'member_name'\"\r\n        (saveSelectedList)=\"saveSelectedList('approvers',$event)\" (closeUsersList)=\"disableSelector()\" [mode]=\"mode\"\r\n        [reviewerWorkflowType]=\"workflowType\" (reviewerWorkflowTypeChange)=\"reviewerTypeChange($event)\"\r\n        [workflowList]=\"workflowList\" [workflowText]=\"'Approval Workflow'\">\r\n    </app-owner-list>\r\n\r\n    <app-frequency-container *ngIf=\"activeSelector === 'frequency'\" [mode]=\"'policy'\"\r\n        [frequencyDetails]=\"frequencyDetails\" (selectedFrequency)=\"frequencyData($event)\"\r\n        (closeFrequency)=\"disableSelector()\"></app-frequency-container>\r\n\r\n    <app-frequency-container *ngIf=\"activeSelector === 'reviewerFrequency'\" [mode]=\"'reviewerFrequency'\"\r\n        [frequencyDetails]=\"reviewerFrequencyDetails\" (selectedFrequency)=\"reviewerFrequencyData($event)\"\r\n        (closeFrequency)=\"disableSelector()\"></app-frequency-container>\r\n    <app-checkpoints-policy-container (closeCheckPoint)=\"disableSelector()\" [checkpointData]=\"policyForm?.checkpointDetails\" [requiredPoint]=\"policyForm?.passingMarks\" *ngIf=\"activeSelector === 'checkpoints'\" (saveCheckPoint)=\"saveSelectedList('checkpoints',$event)\"></app-checkpoints-policy-container>\r\n    <app-loader-inline *ngIf=\"loader\"></app-loader-inline>\r\n\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 *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\r\n</ng-container>\r\n",
                     styles: ["@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");@import url(\"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{justify-content:flex-end!important;line-height:16px}::ng-deep .workflow-policy app-cs-switch label.cs-switch span.value i{display:inline-flex;font-size:12px;cursor:pointer;color:#4681ef;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}.disabled{opacity:.5;pointer-events:none}", "@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");::-webkit-scrollbar-track{background-color:#f1f1f1;position:absolute}::-webkit-scrollbar{width:3px;height:3px;background-color:transparent;position:absolute}::-webkit-scrollbar-thumb{border-radius:3px;background-color:#dbdbdb;position:absolute}input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}button{font-family:Poppins,sans-serif}::ng-deep .vx-form-group{display:block;position:relative;margin-bottom:20px}::ng-deep .vx-form-group:after{content:\"\";display:block;clear:both}::ng-deep .vx-form-group .select{position:relative}::ng-deep .vx-form-group .select:after{border-left-color:#707070;border-bottom:1px solid #707070;border-right:1px solid #707070;border-top-color:#707070;content:\"\";display:inline-block;right:15px;position:absolute;top:calc(50% - 4px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .vx-form-group .select input{cursor:pointer;padding-right:30px!important}::ng-deep .vx-form-group .select .custom-input{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#fff;outline:none;padding:3px 12px;line-height:16px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;cursor:pointer}::ng-deep .vx-form-group .select .custom-input:empty:not(:focus):before{content:attr(aria-placeholder);line-height:16px;font-size:13px;width:94%;display:block;pointer-events:none;opacity:.8}::ng-deep .vx-form-group .select .custom-input:hover{border-color:#1e5dd3;box-shadow:0 0 5px rgba(30,93,211,.27)}::ng-deep .vx-form-group .select .custom-input.frequency-custom-input{padding-right:116px}::ng-deep .vx-form-group .select+app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .select+app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:5px;text-transform:uppercase}::ng-deep .vx-form-group .select+app-cs-radio{margin-top:8px!important}::ng-deep .vx-form-group .select~app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;font-weight:500;color:#707070}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group .select.button-sec:after{display:none}::ng-deep .vx-form-group .select.button-sec button{background:transparent;border:none;display:inline-flex;float:right;color:#1e5dd3;text-transform:uppercase;font-weight:600;cursor:pointer;font-size:11px;position:absolute;top:12px;right:8px;padding:0;margin:0}::ng-deep .vx-form-group .select+.vx-control-panel{margin-top:8px}::ng-deep .vx-form-group .select+.selected{margin-top:8px}::ng-deep .vx-form-group .select.select{margin-top:8px}::ng-deep .vx-form-group .upload-format{border:1px solid #dbdbdb;border-radius:4px;padding:8px 12px;display:block}::ng-deep .vx-form-group .upload-format span.text{line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;display:block;margin-bottom:6px}::ng-deep .vx-form-group .upload-format .radio-group{display:flex}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio{display:inline-block}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;margin-left:8px}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio+app-cs-radio{margin-left:12px}::ng-deep .vx-form-group .upload-format~.upload-format{margin-top:4px}::ng-deep .vx-form-group .form-tab{display:flex;justify-content:flex-start}::ng-deep .vx-form-group .form-tab button{background:transparent;color:#161b2f;font-size:11px;line-height:16px;text-transform:uppercase;cursor:pointer;padding:8px 8px 8px 0;border:none;outline:none;font-weight:500}::ng-deep .vx-form-group .form-tab button:disabled{opacity:.5;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}::ng-deep .vx-form-group .form-tab button+button{padding:8px}::ng-deep .vx-form-group .form-tab button.active{color:#1e5dd3}::ng-deep .vx-form-group .tab-group{border:1px solid #dbdbdb;border-radius:4px;padding:0;display:block;position:relative}::ng-deep .vx-form-group .tab-group .upload-file{padding:16px 24px;display:flex;align-items:center}::ng-deep .vx-form-group .tab-group .upload-file .image{width:80px;margin-right:20px}::ng-deep .vx-form-group .tab-group .upload-file .browse{display:flex;align-items:center;justify-content:center;width:calc(100% - 100px);text-align:center}::ng-deep .vx-form-group .tab-group .upload-file .browse span{display:inline-block;font-size:12px;color:#747576;line-height:16px;padding:0 4px}::ng-deep .vx-form-group .tab-group .upload-file .browse .label{font-size:11px;color:#1e5dd3;line-height:16px;font-weight:600;text-transform:uppercase;margin:0;padding:0}::ng-deep .vx-form-group .tab-group .upload-file .browse .label input{opacity:0;position:absolute;top:0;margin:0;padding:0;right:0;bottom:0;left:0;cursor:pointer;width:100%}::ng-deep .vx-form-group .tab-group.active{border-color:#1e5dd3}::ng-deep .vx-form-group .tab-group.uploaded{margin-top:4px}::ng-deep .vx-form-group .tab-group.uploaded .upload-file{padding:12px \u200B24px}::ng-deep .vx-form-group .tab-group.uploaded .upload-file .image{display:none}::ng-deep .vx-form-group .tab-group.uploaded .upload-file .browse{width:100%}::ng-deep .vx-form-group .tab-group+label.vx-form-group{margin-top:8px;margin-bottom:4px}::ng-deep .vx-form-group .file-list{background:#fbfbfb;border:1px solid #f1f1f1;border-radius:4px;padding:12px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;position:relative}::ng-deep .vx-form-group .file-list span.file-name{color:#747576;line-height:16px;font-size:11px;font-weight:400;cursor:pointer;max-width:calc(100% - 20px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep .vx-form-group .file-list .button-group{display:flex}::ng-deep .vx-form-group .file-list button{font-size:12px;color:#eb2424;cursor:pointer;display:flex;padding:0;border:none;outline:none;background:transparent}::ng-deep .vx-form-group .file-list button.edit{color:#1e5dd3}::ng-deep .vx-form-group .file-list button+button{margin-left:16px}::ng-deep .vx-form-group .file-list+.file-list{margin-top:4px}::ng-deep .vx-form-group .file-list .file-container{display:flex;justify-content:space-between;width:100%}::ng-deep .vx-form-group .file-list.policy{background:#fff}::ng-deep .vx-form-group .file-list cs-select{position:relative;margin-top:8px;width:100%}::ng-deep .vx-form-group .file-list cs-select .selection-wrap .input-group input.value{height:32px!important;font-size:11px!important}::ng-deep .vx-form-group .file-list cs-select .selection-wrap .input-group i{right:12px!important;top:12px!important}::ng-deep .vx-form-group .file-list app-line-loader{display:block;position:absolute;left:10px;right:10px;bottom:0}::ng-deep .vx-form-group label.vx-control-panel{color:#161b2f;font-size:11px;font-weight:500;line-height:16px;margin-bottom:8px;display:block;text-transform:uppercase;width:100%;margin-top:4px;text-align:left}::ng-deep .vx-form-group label.vx-control-panel.custom-tag{font-size:10px}::ng-deep .vx-form-group label.vx-control-panel.vx-mt-8{margin-top:8px}::ng-deep .vx-form-group label.vx-control-panel span.required{color:#eb2424;font-size:16px;font-weight:400;position:relative;top:-2px}::ng-deep .vx-form-group label.vx-control-panel .button{background:transparent;border:none;display:inline-flex;float:right;color:#1e5dd3;text-transform:uppercase;font-weight:600;cursor:pointer;font-size:11px;padding:0;margin:0}::ng-deep .vx-form-group label.vx-control-panel app-cs-switch{float:right;display:block}::ng-deep .vx-form-group label.vx-control-panel i{margin-left:8px;font-size:12px;color:#1e5dd3;cursor:pointer;position:relative;top:1px}::ng-deep .vx-form-group label.vx-control-panel i.depreciation-icon{color:#e4b700;font-size:16px;position:relative;top:3px}::ng-deep .vx-form-group label.vx-control-panel .checkpoint-version{background:#f1f1f1;border-radius:2px;color:#042e7d;font-size:10px;font-weight:600;line-height:14px;margin-left:4px;padding:0 2px}::ng-deep .vx-form-group .input,::ng-deep .vx-form-group input[type=text]{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#fff;outline:none;padding:8px 12px;line-height:20px;font-size:13px;color:#747576;transition:all .2s ease-in-out;width:100%;font-weight:400}::ng-deep .vx-form-group .input::-moz-placeholder,::ng-deep .vx-form-group input[type=text]::-moz-placeholder{color:#747576;font-weight:400}::ng-deep .vx-form-group .input:-ms-input-placeholder,::ng-deep .vx-form-group input[type=text]:-ms-input-placeholder{color:#747576;font-weight:400}::ng-deep .vx-form-group .input::placeholder,::ng-deep .vx-form-group input[type=text]::placeholder{color:#747576;font-weight:400}::ng-deep .vx-form-group .input:focus,::ng-deep .vx-form-group .input:hover,::ng-deep .vx-form-group input[type=text]:focus,::ng-deep .vx-form-group input[type=text]:hover{border-color:#1e5dd3;box-shadow:0 0 5px rgba(30,93,211,.27)}::ng-deep .vx-form-group .input.error,::ng-deep .vx-form-group input[type=text].error{border-color:#eb2424;color:#eb2424;margin-bottom:4px}::ng-deep .vx-form-group .input.error:focus,::ng-deep .vx-form-group input[type=text].error:focus{box-shadow:0 0 5px rgba(211,30,30,.27)}::ng-deep .vx-form-group .input:disabled,::ng-deep .vx-form-group input[type=text]:disabled{background:#f1f1f1;cursor:not-allowed;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}::ng-deep .vx-form-group .input:disabled:hover,::ng-deep .vx-form-group input[type=text]:disabled:hover{border-color:#dbdbdb;box-shadow:none}::ng-deep .vx-form-group .input span.text,::ng-deep .vx-form-group input[type=text] span.text{font-size:13px;color:#747576;font-weight:400;display:block;width:100%}::ng-deep .vx-form-group .input .input-group,::ng-deep .vx-form-group input[type=text] .input-group{display:flex;align-items:center}::ng-deep .vx-form-group .input .input-group.counter,::ng-deep .vx-form-group input[type=text] .input-group.counter{min-width:96px;width:96px}::ng-deep .vx-form-group .input .input-group.counter button,::ng-deep .vx-form-group input[type=text] .input-group.counter button{height:24px;width:24px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;color:#747576;font-size:8px;cursor:pointer;outline:none}::ng-deep .vx-form-group .input .input-group.counter input,::ng-deep .vx-form-group input[type=text] .input-group.counter input{-webkit-appearance:textfield;-moz-appearance:textfield;height:24px;width:calc(100% - 48px);border:1px solid #f1f1f1;outline:none;padding:0 6px;text-align:center}::ng-deep .vx-form-group .input .input-group.counter input::-webkit-inner-spin-button,::ng-deep .vx-form-group .input .input-group.counter input::-webkit-outer-spin-button,::ng-deep .vx-form-group input[type=text] .input-group.counter input::-webkit-inner-spin-button,::ng-deep .vx-form-group input[type=text] .input-group.counter input::-webkit-outer-spin-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0}::ng-deep .vx-form-group .input+.file-list,::ng-deep .vx-form-group input[type=text]+.file-list{margin-top:8px}::ng-deep .vx-form-group .input::-moz-placeholder,::ng-deep .vx-form-group input[type=text]::-moz-placeholder{font-size:13px}::ng-deep .vx-form-group .input::placeholder,::ng-deep .vx-form-group input[type=text]::placeholder{font-size:13px}::ng-deep .vx-form-group .input:-ms-input-placeholder,::ng-deep .vx-form-group input[type=text]:-ms-input-placeholder{font-size:13px}::ng-deep .vx-form-group .input::-ms-input-placeholder,::ng-deep .vx-form-group input[type=text]::-ms-input-placeholder{font-size:13px}::ng-deep .vx-form-group .classification{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#fff;padding:8px 12px;display:flex;justify-content:space-between}::ng-deep .vx-form-group .classification label{width:100%;position:relative;z-index:1;margin:0 4px 0 0}::ng-deep .vx-form-group .classification label span{display:block;width:100%;height:24px;border:1px solid #f1f1f1;border-radius:2px;line-height:24px;font-size:10px;text-align:center;color:#747576;font-weight:500;position:relative;text-transform:uppercase}::ng-deep .vx-form-group .classification label span:before{height:2px;content:\"\";top:0;right:0;left:0;border-radius:2px;position:absolute;transition:all .2s ease-in-out}::ng-deep .vx-form-group .classification label input{opacity:0;position:absolute;top:0;right:0;bottom:0;left:0;margin:0;padding:0;width:100%;height:100%;cursor:pointer;z-index:1}::ng-deep .vx-form-group .classification label input:checked+span{color:#fff}::ng-deep .vx-form-group .classification label input:checked+span:before{bottom:0;height:100%;z-index:-1}::ng-deep .vx-form-group .classification label.low span:before{background:#34aa44}::ng-deep .vx-form-group .classification label.low-med span:before{background:#f2bf19}::ng-deep .vx-form-group .classification label.med-high span:before{background:#f29619}::ng-deep .vx-form-group .classification label.high span:before{background:#eb2424}::ng-deep .vx-form-group .classification label:last-of-type{margin-right:0}::ng-deep .vx-form-group .input{display:flex;align-items:center}::ng-deep .vx-form-group .selected{height:40px;border-radius:4px;border:1px solid #f1f1f1;background:#fbfbfb;outline:none;padding:8px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;display:flex;align-items:center;position:relative;justify-content:space-between}::ng-deep .vx-form-group .selected.first-field{z-index:2}::ng-deep .vx-form-group .selected .chip-container{display:flex;width:calc(100% - 60px);align-items:center}::ng-deep .vx-form-group .selected .chip-container.checkpoints{width:calc(100% - 120px)}::ng-deep .vx-form-group .selected .chip-container span.chip{background:#fff;border-radius:2px;box-shadow:0 0 3px #1e5dd31a;height:24px;padding:0 8px;color:#1e5dd3;font-size:12px;display:block;width:auto;max-width:100%;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:24px}::ng-deep .vx-form-group .selected .chip-container span.chip.disabled{background:#f1f1f1;box-shadow:none;color:#747576;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}::ng-deep .vx-form-group .selected .chip-container span.chip i{font-weight:400;margin-right:8px;cursor:pointer;font-size:10px;position:relative;top:1px}::ng-deep .vx-form-group .selected .chip-container span.chip span.step{background:#1e5dd3;border-radius:2px;color:#fff;font-size:9px;line-height:14px;padding:0 4px;font-weight:400;text-align:center;min-width:auto;margin-right:4px}::ng-deep .vx-form-group .selected .chip-container span.chip+span.chip{margin-left:4px}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question{display:flex;align-items:center;justify-content:space-between;width:100%}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question span.value{color:#1e5dd3;font-size:12px;font-weight:400;line-height:24px;padding:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 80px)}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question span.label{background:#f1f1f1;border-radius:2px;color:#042e7d;font-size:9px;font-weight:600;text-transform:uppercase;padding-left:4px;padding-right:4px;line-height:12px;margin-left:8px}::ng-deep .vx-form-group .selected .chip-container span.value{color:#747576;font-size:13px;line-height:20px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 52px);padding:0 4px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text{color:#747576;font-size:10px;font-weight:500;padding:0 8px;width:122px;line-height:14px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text.first{position:relative;min-width:162px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text.first:before{background:#f1f1f1;content:\"\";position:absolute;top:0;right:0;height:calc(100% + 12px);width:1px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text .no{color:#1e5dd3}::ng-deep .vx-form-group .selected .chip-container.plus span.chip{max-width:calc(50% - 35px)}::ng-deep .vx-form-group .selected .chip-container.more-one span.chip{max-width:50%}::ng-deep .vx-form-group .selected .chip-container .chip-inner{background:#fff;border-radius:2px;box-shadow:0 2px 4px #1e5dd31a;line-height:24px;padding:0 4px 0 8px;display:flex;align-items:center}::ng-deep .vx-form-group .selected .chip-container .chip-inner .chip{background:transparent;border-radius:0;box-shadow:none;height:auto;line-height:unset;padding:0;color:#747576;max-width:300px}::ng-deep .vx-form-group .selected .chip-container .chip-inner button.count{border-radius:20px;height:16px;padding:0 6px;border:none;font-size:9px;line-height:16px;margin-left:4px;min-width:20px}::ng-deep .vx-form-group .selected .chip-container .chip-inner button.count.user{background:#34aa44}::ng-deep .vx-form-group .selected .chip-container .chip-inner i.cross{cursor:pointer}::ng-deep .vx-form-group .selected button.count{background:#1e5dd3;border-radius:2px;height:24px;padding:0 8px;border:1px solid #1e5dd3;cursor:pointer;outline:none;color:#fff;font:13px;font-weight:500;line-height:20px;white-space:nowrap;margin-left:8px}::ng-deep .vx-form-group .selected button.edit{border:1px solid #f1f1f1;border-radius:2px;background:#fff;outline:none;cursor:pointer;display:block;height:24px;padding:0 5px 0 4px;font-size:11px;font-weight:500;color:#1e5dd3;text-transform:uppercase;white-space:nowrap;margin-left:8px}::ng-deep .vx-form-group .selected button.edit i{font-weight:400;font-size:8px;margin-right:4px}::ng-deep .vx-form-group .selected button.close-btn{background:transparent;border:none;padding:0;margin-left:8px;font-size:10px;color:#c7381b;display:flex;align-items:center}::ng-deep .vx-form-group .selected .workflow-label{min-width:92px;padding:4px;text-align:center;margin-left:-8px;margin-right:8px;border-right:1px solid #f1f1f1}::ng-deep .vx-form-group .selected .workflow-label p{margin:0;display:block;text-transform:uppercase}::ng-deep .vx-form-group .selected .workflow-label p.title{font-size:9px;line-height:12px;color:#161b2f;font-weight:500}::ng-deep .vx-form-group .selected .workflow-label p.description{font-size:11px;line-height:16px;color:#161b2f;font-weight:600}::ng-deep .vx-form-group .selected .workflow-label+.chip-container{width:calc(100% - 148px)}::ng-deep .vx-form-group .selected+.selected{margin-top:8px}::ng-deep .vx-form-group .selected+app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .selected+app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:5px;text-transform:uppercase}::ng-deep .vx-form-group .selected+app-cs-switch.who-toggle label.cs-switch span.value{color:#747576}::ng-deep .vx-form-group .selected+app-cs-radio{margin-top:8px!important}::ng-deep .vx-form-group .selected~app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;font-weight:500;color:#707070}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group .selected.readOnly{pointer-events:none}::ng-deep .vx-form-group .selected span.chip{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .vx-form-group .select-list{position:absolute;background:#fff;box-shadow:0 0 5px #1e5dd3;top:100%;right:0;left:0;z-index:2}::ng-deep .vx-form-group .select-list .vx-radio-group label.vx-radio-item{width:100%;padding:12px 16px}::ng-deep .vx-form-group .select-list .vx-radio-group label.vx-radio-item:hover{background:#f8f8f8}::ng-deep .vx-form-group marx-editor{margin-top:8px;display:block}::ng-deep .vx-form-group marx-editor .editor-container{border-radius:4px;border:1px solid #dbdbdb}::ng-deep .vx-form-group marx-editor .editor-container .editable-block{min-height:60px;padding:11px 15px;max-height:100px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%}::ng-deep .vx-form-group marx-editor .editor-container .editable-block ul{padding:0 0 0 10px;margin-top:0}::ng-deep .vx-form-group marx-editor .editor-container .editable-block ul li{list-style:disc}::ng-deep .vx-form-group marx-editor .editor-container .editable-block ol{padding:0 0 0 10px;margin-top:0}::ng-deep .vx-form-group marx-editor .editor-container .editable-block ol li{list-style:decimal}::ng-deep .vx-form-group marx-editor .editor-container .editor-tools{z-index:1;border-top:1px solid #dbdbdb;transition:none;border-radius:0 0 3px 3px;position:static}::ng-deep .vx-form-group marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button{height:22px!important;width:22px!important;padding:0 5px}::ng-deep .vx-form-group marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg{height:22px;width:12px}::ng-deep .vx-form-group marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit{width:80px!important;line-height:22px;justify-content:center}::ng-deep .vx-form-group marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button{width:100%!important;height:auto!important}::ng-deep .vx-form-group marx-editor .editor-container:focus-within{border-color:#1e5dd3!important}::ng-deep .vx-form-group marx-editor .editor-container:focus-within .editor-tools{border-color:#1e5dd3!important}::ng-deep .vx-form-group marx-editor .editor-container:hover{border-color:#1e5dd3!important}::ng-deep .vx-form-group marx-editor .editor-container:hover .editor-tools{border-color:#1e5dd3!important}::ng-deep .vx-form-group marx-editor+app-cs-switch{margin-top:8px}::ng-deep .vx-form-group app-cs-switch label.cs-switch span.value{font-size:11px;color:#747576;text-transform:uppercase}::ng-deep .vx-form-group app-cs-switch+app-cs-switch{margin-top:8px}::ng-deep .vx-form-group .date-time-picker{display:flex;justify-content:space-between;height:40px;border-radius:4px;border:1px solid #dbdbdb;padding:11px 0}::ng-deep .vx-form-group .date-time-picker:focus-within{border-color:#1e5dd3;box-shadow:0 0 5px rgba(30,93,211,.27)}::ng-deep .vx-form-group .date-time-picker .picker-group{width:50%;position:relative;display:flex;align-items:center}::ng-deep .vx-form-group .date-time-picker .picker-group:first-of-type{border-right:1px solid #dbdbdb}::ng-deep .vx-form-group .date-time-picker .picker-group:only-of-type{border:none;width:100%}::ng-deep .vx-form-group .date-time-picker .picker-group input{height:38px;background:#fff;line-height:38px;font-size:13px;color:#747576;transition:all .2s ease-in-out;width:100%;font-weight:400;border:none;padding:0 12px 0 34px;outline:none}::ng-deep .vx-form-group .date-time-picker .picker-group input:focus,::ng-deep .vx-form-group .date-time-picker .picker-group input:hover{box-shadow:none;border:none}::ng-deep .vx-form-group .date-time-picker .picker-group input::-moz-placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group input::placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group input:-ms-input-placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group input::-ms-input-placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group i{display:flex;justify-content:center;align-items:center;height:16px;width:16px;position:absolute;left:12px;top:0;color:#bcbcbc;font-size:16px;pointer-events:none}::ng-deep .vx-form-group app-cs-radio.main-filed{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;color:#707070}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group .switch-row{display:flex}::ng-deep .vx-form-group .switch-row app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .switch-row app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:0;text-transform:uppercase;color:#747576!important}::ng-deep .vx-form-group .switch-row app-cs-switch label.cs-switch span.value i{display:inline-flex;font-size:11px;cursor:pointer;color:#1e5dd3;align-items:center;line-height:16px;margin:0 4px}::ng-deep .vx-form-group .switch-row app-cs-switch+app-cs-switch{margin-left:8px}::ng-deep .vx-form-group .switch-row.align-right{justify-content:flex-end}::ng-deep .vx-form-group .switch-row.align-right label.cs-switch span.value{margin-right:8px}::ng-deep .vx-form-group .risk-type-field{background:#f8f8f8;border:1px solid #dbdbdb;border-radius:4px;height:40px;display:flex;align-items:center;padding:4px;position:relative;z-index:1}::ng-deep .vx-form-group .risk-type-field .type-item{width:50%;position:relative}::ng-deep .vx-form-group .risk-type-field .type-item button{background:transparent;border:none;border-radius:0;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase;width:100%;height:32px;padding:0 12px;text-align:left}::ng-deep .vx-form-group .risk-type-field .type-item button.disabled{background:transparent!important;color:#dbdbdb!important;filter:unset!important;opacity:unset!important;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}::ng-deep .vx-form-group .risk-type-field .type-item .info{color:#1e5dd3;font-size:12px;position:absolute;top:10px;right:12px;cursor:pointer}::ng-deep .vx-form-group .risk-type-field .type-item.active button{color:#1e5dd3!important}::ng-deep .vx-form-group .risk-type-field .type-item:nth-child(2).active~.background-glider{transform:translate(100%)}::ng-deep .vx-form-group .risk-type-field .background-glider{background:#fff;border-radius:4px;box-shadow:0 1px 3px #161b2f26;position:absolute;display:flex;width:208px;height:32px;z-index:-1;transition:.25s ease-out}.left{width:36px;height:36px;margin-top:30px;margin-left:-58px;margin-right:20px;display:flex;justify-content:center;align-items:center;position:relative;z-index:10;border-radius:50%}.left.deadline-completed{margin-top:18px}.left.checked{background:transparent}.left img{width:36px}.left .checkIcon{width:32px;height:32px;background:#fff;border-radius:50%;stroke-width:4;stroke:#34aa44;stroke-miterlimit:10;box-shadow:inset 0 0 0 #34aa44;-webkit-animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin-top:0}.left .checkIcon__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;-webkit-animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}.left .checkIcon__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;-webkit-animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}.right{width:100%}.right span.indicator{position:absolute;top:36px;left:-16px;font-size:12px;color:#f0b819;cursor:pointer}.form-group-row{display:flex;position:relative;transition:all .2s ease-in-out}.form-group-row.disabled{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none;filter:grayscale(1);z-index:2}.form-group-row.disabled .left{position:relative}.form-group-row.disabled .left:before{content:\"\";position:absolute;top:2px;right:0;bottom:0;left:2px;background:#fff;opacity:.7;border-radius:50%;width:32px;height:32px}.form-group-row.disabled .right{opacity:.3}.form-group-row.active{pointer-events:none;filter:grayscale(0);z-index:2;opacity:1}.form-group-row.active .right .vx-form-group .custom-input,.form-group-row.active .right .vx-form-group input{border-color:#1e5dd3;box-shadow:0 0 5px rgba(30,93,211,.27)}::ng-deep .radio-group-selector app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .radio-group-selector app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .radio-group-selector app-cs-radio label.radio-item .radio,::ng-deep .radio-group-selector app-cs-radio label.radio-item .radiomark{position:absolute!important;top:9px;left:12px}::ng-deep .radio-group-selector app-cs-radio label.radio-item .value{font-size:11px!important;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0!important;max-width:100%!important;font-weight:500!important;color:#707070!important}::ng-deep .radio-group-selector app-cs-radio label.radio-item .value i{font-size:12px;color:#1e5dd3}::ng-deep .radio-group-selector app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}@-webkit-keyframes strokeCheck{to{stroke-dashoffset:0}}@keyframes strokeCheck{to{stroke-dashoffset:0}}@-webkit-keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #34aa44}}@keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #34aa44}}.action-list{width:220px}.action-list ul{padding:0;margin:0;-webkit-animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}.action-list ul.action-item{display:block}.action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}.action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}.action-list ul.action-item li button i{font-size:17px;margin-right:10px;color:#1c5bd1}.action-list ul.action-item li button:hover{background:#f3f3f3}.action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}.action-list ul.action-item li .avatar-card.within-con{display:block}.action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#4681ef;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}.action-list ul.action-item li .avatar-card .avatar img{width:100%}.action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}.action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;-moz-text-align-last:left;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}.action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#1c5bd1;cursor:pointer;margin-right:5px}.action-list ul.action-item li .avatar-card.no-image{display:block}.action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}.action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}.action-list ul.action-item li .chip-item i{margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}.action-list ul.action-item li .chip-item span{display:block;width:auto;max-width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}.action-list ul.action-item li .chip-item span.id{font-size:9px}.action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}.action-list ul.action-item li .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}.action-list ul.action-item li .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}.action-list ul.action-item li:first-child{-webkit-animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(2){-webkit-animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(3){-webkit-animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(4){-webkit-animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(5){-webkit-animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(6){-webkit-animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(7){-webkit-animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(8){-webkit-animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(9){-webkit-animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(10){-webkit-animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}@-webkit-keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}@keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}@-webkit-keyframes scale-up-center{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}@keyframes scale-up-center{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}p.error-message{font-size:11px;font-weight:400;color:#eb2424;line-height:16px;margin-top:8px;margin-bottom:0}.edit-loader{position:absolute;top:-3px;left:-3px;width:46px;height:46px;transform:rotate(180deg)}.circular-loader{-webkit-animation:rotate 2s linear infinite;animation:rotate 2s linear infinite;height:100%;transform-origin:center center;width:100%;position:absolute;top:0;left:0;margin:auto}.loader-path{stroke-dasharray:150,200;stroke-dashoffset:-10;-webkit-animation:dash 1.5s ease-in-out infinite;animation:dash 1.5s ease-in-out infinite;stroke-linecap:round}@-webkit-keyframes rotate{to{transform:rotate(1turn)}}@keyframes rotate{to{transform:rotate(1turn)}}@-webkit-keyframes dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35}to{stroke-dasharray:89,200;stroke-dashoffset:-124}}@keyframes dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35}to{stroke-dasharray:89,200;stroke-dashoffset:-124}}::ng-deep .dropdown{position:fixed;background:#fff;box-shadow:0 3px 6px #00000029;padding:24px 0;z-index:9;max-height:calc(100vh - 200px);overflow:auto}::ng-deep .dropdown ul.dropdown-list{padding:0 20px;margin:0;display:block}::ng-deep .dropdown ul.dropdown-list li{list-style:none}::ng-deep .dropdown ul.dropdown-list li app-cs-radio{display:flex}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item span.radio{position:absolute;top:12px;left:12px}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item span.value{padding:11px 12px 11px 32px;width:100%;border:1px solid #bcbcbc;border-radius:4px;margin-left:0;max-width:100%}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item svg{position:absolute;top:12px;left:12px}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item input[type=radio]:checked~span.value{background:#e8feeb;border-color:#34aa44}::ng-deep .dropdown ul.dropdown-list li+li{margin-top:8px}app-smiley-dialog{position:relative;z-index:10}app-smiley-dialog-inline{position:absolute;top:-3px;right:0;bottom:0;z-index:999;width:520px;height:calc(100vh + 3px)}::ng-deep .vx-overlay{position:fixed;z-index:3;top:0;right:0;bottom:0;left:0}dp-date-picker{width:100%;position:fixed!important;z-index:14;top:-40px;left:0}dp-date-picker input{width:100%;border:none;opacity:0;pointer-events:none}dp-date-picker input:focus{outline:none}dp-date-picker .dp-popup{width:412px;box-shadow:0 0 20px #161b2f26;background-color:#fff;border-radius:4px;-webkit-animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both}dp-date-picker .dp-popup dp-day-calendar,dp-date-picker .dp-popup dp-month-calendar{width:100%;pointer-events:auto}dp-date-picker .dp-popup dp-day-calendar button,dp-date-picker .dp-popup dp-month-calendar button{background:transparent;border:none;outline:none}dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left,dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right,dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left,dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right,dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:50%;font-size:14px}dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left:hover,dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right:hover,dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:hover,dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left:hover,dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right:hover,dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:hover{background-color:#f3f3f3}dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn{display:none}dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:before,dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:before{content:\"\";height:10px;width:10px;border-radius:50%;background:#000;display:inline-flex}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week,dp-date-picker .dp-popup dp-day-calendar .dp-weekdays,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays{display:flex;justify-content:space-around}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,dp-date-picker .dp-popup dp-day-calendar .dp-weekdays .dp-calendar-weekday,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week .dp-calendar-weekday,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays .dp-calendar-weekday{width:52px;border-left:none;border-bottom-color:#fff;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button,dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button{width:40px;height:40px;border-radius:50%;display:inline-flex;justify-content:center;align-items:center}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button:hover,dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button:hover,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button:hover,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button:hover{background-color:#f3f3f3}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-selected,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-selected,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-selected{background:#1e5dd3}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-current-day,dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-current-day,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-current-day,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-current-day{border:1px solid rgba(0,0,0,.38);color:#1e5dd3;background-color:#fff}dp-date-picker .dp-popup dp-day-calendar .dp-day-calendar-container,dp-date-picker .dp-popup dp-month-calendar .dp-day-calendar-container{padding:20px;border-radius:2px}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-nav-container{display:flex;margin:0 0 20px;border:none}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container .dp-nav-header button,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-nav-container .dp-nav-header button{color:#000;font-size:17px;font-weight:500;margin:0 0 0 12px;padding:0}dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container,dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container{width:80px;display:flex}dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button,dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button{margin:0!important}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-wrapper,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-wrapper{border:none}dp-date-picker .dp-open+div{position:fixed!important;top:0!important;right:0!important;bottom:0!important;left:0!important;display:flex;justify-content:center;align-items:center;z-index:99;pointer-events:none;background:rgba(0,0,0,.3)}@-webkit-keyframes slide-bottom{0%{transform:translateY(-100px)}to{transform:translateY(0)}}@keyframes slide-bottom{0%{transform:translateY(-100px)}to{transform:translateY(0)}}::ng-deep span.file{display:block;width:20px;min-width:20px;border-radius:0 0 2px 2px;position:relative;margin-right:5px;border:1px solid #747576;border-top:none;margin-top:5px;background:#fff}::ng-deep span.file.table{margin-right:8px;width:18px;min-width:18px}::ng-deep span.file.table i{font-size:8px}::ng-deep span.file.table .format{height:8px;font-size:7px;line-height:8px;font-weight:400}::ng-deep span.file:before{position:absolute;border-radius:0;top:-4px;right:-1px;content:\"\";height:4px;width:4px;display:block;background:linear-gradient(45deg,#747576,#747576 1%,#747576 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0));filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file:after{height:4px;left:-1px;right:3px;border-top:1px solid;border-right:none;border-left:1px solid;content:\"\";top:-4px;position:absolute;border-radius:2px 0 0 0;background:#fff}::ng-deep span.file .format{height:10px;font-size:6px;text-transform:uppercase;background:transparent;font-weight:600;text-align:center;display:block;line-height:10px}::ng-deep span.file i{font-size:10px;height:10px;display:flex;align-items:center;justify-content:center;color:#dbdbdb}::ng-deep span.file.docx{width:22px!important}::ng-deep span.file.pdf,::ng-deep span.file.template{border-color:#f31c39}::ng-deep span.file.pdf:before,::ng-deep span.file.template:before{background:linear-gradient(45deg,#f31c39,#f31c39 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0));filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#f31c39\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.pdf:after,::ng-deep span.file.template:after{border-color:#f31c39}::ng-deep span.file.pdf .format,::ng-deep span.file.template .format{color:#f31c39}::ng-deep span.file.css,::ng-deep span.file.less,::ng-deep span.file.scss,::ng-deep span.file.xls,::ng-deep span.file.xlsx{border-color:#34aa44}::ng-deep span.file.css:before,::ng-deep span.file.less:before,::ng-deep span.file.scss:before,::ng-deep span.file.xls:before,::ng-deep span.file.xlsx:before{background:linear-gradient(45deg,#34aa44,#34aa44 1%,#34aa44 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0));filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.css:after,::ng-deep span.file.less:after,::ng-deep span.file.scss:after,::ng-deep span.file.xls:after,::ng-deep span.file.xlsx:after{border-color:#34aa44;color:#34aa44}::ng-deep span.file.css .format,::ng-deep span.file.less .format,::ng-deep span.file.scss .format,::ng-deep span.file.xls .format,::ng-deep span.file.xlsx .format{color:#34aa44}::ng-deep span.file.doc,::ng-deep span.file.docx,::ng-deep span.file.psd{border-color:#1e5dd3}::ng-deep span.file.doc:before,::ng-deep span.file.docx:before,::ng-deep span.file.psd:before{background:linear-gradient(45deg,#1e5dd3,#1e5dd3 1%,#1e5dd3 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0));filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.doc:after,::ng-deep span.file.docx:after,::ng-deep span.file.psd:after{border-color:#1e5dd3}::ng-deep span.file.doc .format,::ng-deep span.file.docx .format,::ng-deep span.file.psd .format{color:#1e5dd3}::ng-deep span.file.ai,::ng-deep span.file.html,::ng-deep span.file.jpeg,::ng-deep span.file.jpg,::ng-deep span.file.png,::ng-deep span.file.ppt{border-color:#f6882f}::ng-deep span.file.ai:before,::ng-deep span.file.html:before,::ng-deep span.file.jpeg:before,::ng-deep span.file.jpg:before,::ng-deep span.file.png:before,::ng-deep span.file.ppt:before{background:linear-gradient(45deg,#f6882f,#f6882f 1%,#f6882f 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0));filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.ai:after,::ng-deep span.file.html:after,::ng-deep span.file.jpeg:after,::ng-deep span.file.jpg:after,::ng-deep span.file.png:after,::ng-deep span.file.ppt:after{border-color:#f6882f}::ng-deep span.file.ai .format,::ng-deep span.file.html .format,::ng-deep span.file.jpeg .format,::ng-deep span.file.jpg .format,::ng-deep span.file.png .format,::ng-deep span.file.ppt .format{color:#f6882f}::ng-deep span.file.php{border-color:#7aa6f7}::ng-deep span.file.php:before{background:linear-gradient(45deg,#7aa6f7,#7aa6f7 1%,#7aa6f7 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0));filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.php:after{border-color:#7aa6f7}::ng-deep span.file.php .format{color:#7aa6f7}::ng-deep ngx-material-timepicker-container .timepicker-backdrop-overlay{background-color:rgba(0,0,0,.05)!important;z-index:9999999999!important}::ng-deep ngx-material-timepicker-container .timepicker-overlay{z-index:9999999999!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker{width:232px!important;border-radius:2px!important;box-shadow:0 4px 30px #161b2f26!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header{background-color:#fff!important;padding:0!important;border-radius:2px 2px 0 0}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container{display:block!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time{color:#000!important;width:150px!important;margin:0 auto;line-height:60px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control .timepicker-dial__control{font-size:40px;background-color:transparent!important;color:#000!important;font-weight:600;text-align:right;caret-color:transparent;outline:none;font-family:Poppins;line-height:56px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control .timepicker-dial__control:focus,::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control .timepicker-dial__control:hover{background-color:transparent!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control:last-of-type .timepicker-dial__control{text-align:left}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time span{padding:0 8px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period{display:flex!important;width:182px;margin:0 auto!important;background:#f1f1f1;padding:4px 10px;border-radius:20px;position:relative}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period:before{background:#f1f1f1;content:\"\";position:absolute;top:15px;left:-25px;width:calc(100% + 50px);height:2px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period{flex-direction:unset!important;position:relative;z-index:1}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period:after{content:\"\";position:absolute;right:-12px;top:0;border-left:14px solid #f1f1f1;border-bottom:12px solid transparent;border-top:12px solid transparent;z-index:-1}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period:before{content:\"\";position:absolute;left:-18px;top:0;border-right:14px solid #f1f1f1;border-bottom:12px solid transparent;border-top:12px solid transparent;z-index:-1}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period button{font-size:11px;background-color:transparent;padding:0;border-radius:20px;color:#747576;font-weight:600;font-family:Poppins;width:84px;height:24px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period button.timepicker-dial__item_active{background:#fff!important;color:#1e5dd3!important;box-shadow:0 1px 2px #dbdbdb}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period button+button{margin-left:0!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face{width:200px!important;height:200px!important;padding:10px!important;background:transparent!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number--outer{height:calc(224px / 2 - 20px)!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number--outer span{color:#000}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number--outer span.active{color:#fff}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__clock-hand{height:80px!important;top:calc(50% - 80px)!important;background-color:#1e5dd3!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number>span.active{background-color:#1e5dd3!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__clock-hand_minute:before{border:4px solid #1e5dd3!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions{display:flex!important;padding:10px 0 0!important;background:#fff!important;justify-content:space-around!important;border-radius:0 0 2px 2px!important;overflow:hidden}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions div:first-child ngx-material-timepicker-button button.timepicker-button{background:#f8f8f8;color:#1e5dd3}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions div ngx-material-timepicker-button button.timepicker-button{line-height:28px!important;width:100%;background:#1e5dd3;color:#fff;border-radius:0!important;height:32px!important;width:116px!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions div ngx-material-timepicker-button button.timepicker-button span{font-weight:500!important;font-size:11px;font-family:Poppins}::ng-deep marx-modal .popup-modal-background{background-color:#161b2fcc!important}"]
                 },] }
     ];
@@ -9505,6 +9603,13 @@
                     _this.frequencyList.splice(index, 1);
                 });
             }
+            var hideElements3 = ['random', 'onCompletionOf', 'ongoing'];
+            if (this.responsibilityType === 1) {
+                hideElements3.forEach(function (element) {
+                    var index = _this.frequencyList.findIndex(function (elementIndex) { return elementIndex.type == element; });
+                    _this.frequencyList.splice(index, 1);
+                });
+            }
         };
         FrequencyContainerComponent.prototype.ngOnChanges = function () {
             this.selectedFrequencyData = Object.assign(Object.assign({}, this.frequencyDetails));
@@ -9690,7 +9795,7 @@
     FrequencyContainerComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'app-frequency-container',
-                    template: "<!-- <p>frequency-container works!</p> -->\r\n<div class=\"frequency\">\r\n    <div class=\"frequency-head\">\r\n        <h3 class=\"frequency-title\">Set a Frequency</h3>\r\n    </div>\r\n    <div class=\"frequency-body\">\r\n        <div class=\"frequency-container\">\r\n\r\n            <div class=\"frequency-tab\" [ngSwitch]=\"frequencyTab\">\r\n                <div class=\"frequency-tab-head\">\r\n                    <ul class=\"navigation\">\r\n                        <li *ngFor=\"let frequencyType of frequencyList; let i = index;\">\r\n                            <button\r\n                            [class.active]=\"frequencyType?.type == frequencyTab\"\r\n                            (click)=\"changeFrequencyTab(frequencyType)\"> {{frequencyType?.name}} </button>\r\n                        </li>\r\n                    </ul>\r\n                </div>\r\n                <div class=\"frequency-tab-body\">\r\n                    <app-frequency-daily\r\n                        *ngSwitchCase=\"'daily'\"\r\n                        [mode]=\"mode\"\r\n                        (frequencyDetails)=\"onFrequencySelected($event)\"\r\n                        [frequencyData]=\"frequencyDetails\"\r\n                    ></app-frequency-daily>\r\n                    <app-frequency-weekly\r\n                        *ngSwitchCase=\"'weekly'\"\r\n                        [mode]=\"mode\"\r\n                        (frequencyDetails)=\"onFrequencySelected($event)\"\r\n                        [frequencyData]=\"frequencyDetails\"\r\n                    ></app-frequency-weekly>\r\n                    <app-frequency-monthly\r\n                        *ngSwitchCase=\"'monthly'\"\r\n                        [mode]=\"mode\"\r\n                        (frequencyDetails)=\"onFrequencySelected($event)\"\r\n                        [frequencyData]=\"frequencyDetails\"\r\n                    ></app-frequency-monthly>\r\n                    <app-frequency-quarterly\r\n                        *ngSwitchCase=\"'quarterly'\"\r\n                        [mode]=\"mode\"\r\n                        (frequencyDetails)=\"onFrequencySelected($event)\"\r\n                        [frequencyData]=\"frequencyDetails\"\r\n                    ></app-frequency-quarterly>\r\n                    <app-frequency-biannual\r\n                        *ngSwitchCase=\"'biannual'\"\r\n                        [mode]=\"mode\"\r\n                        (frequencyDetails)=\"onFrequencySelected($event)\"\r\n                        [frequencyData]=\"frequencyDetails\"\r\n                    ></app-frequency-biannual>\r\n                    <app-frequency-annual\r\n                        *ngSwitchCase=\"'annual'\"\r\n                        [mode]=\"mode\"\r\n                        (frequencyDetails)=\"onFrequencySelected($event)\"\r\n                        [frequencyData]=\"frequencyDetails\"\r\n                    ></app-frequency-annual>\r\n                    <app-frequency-one-time\r\n                        *ngSwitchCase=\"'oneTime'\"\r\n                        [mode]=\"mode\"\r\n                        (frequencyDetails)=\"onFrequencySelected($event)\"\r\n                        [frequencyData]=\"frequencyDetails\"\r\n                    ></app-frequency-one-time>\r\n                    <app-frequency-random\r\n                        *ngSwitchCase=\"'random'\"\r\n                        [mode]=\"mode\"\r\n                        (frequencyDetails)=\"onFrequencySelected($event)\"\r\n                        [frequencyData]=\"frequencyDetails\"\r\n                    ></app-frequency-random>\r\n                    <app-frequency-on-completion-of\r\n                        *ngSwitchCase=\"'onCompletionOf'\"\r\n                        [mode]=\"mode\"\r\n                        (frequencyDetails)=\"onFrequencySelected($event)\"\r\n                        [frequencyData]=\"frequencyDetails\"\r\n                    ></app-frequency-on-completion-of>\r\n                    <app-frequency-ongoing\r\n                    *ngSwitchCase=\"'ongoing'\"\r\n                    (frequencyDetails)=\"onFrequencySelected($event)\"\r\n                    [frequencyData]=\"frequencyDetails\"\r\n                    ></app-frequency-ongoing>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div> \r\n    <div class=\"frequency-footer\">\r\n        <app-floating-bar\r\n        [showFrequencyText]=\"true\"\r\n        [currentFrequency]=\"currentTabName\"\r\n        [isDisabled]=\"isNextDisabled\"\r\n        (closeEvent)=\"save()\"\r\n        (closeList)=\"close()\"\r\n        ></app-floating-bar>\r\n    </div>\r\n</div>\r\n",
+                    template: "<!-- <p>frequency-container works!</p> -->\r\n<div class=\"frequency\">\r\n    <div class=\"frequency-head\">\r\n        <h3 class=\"frequency-title\">Set a Frequency</h3>\r\n    </div>\r\n    <div class=\"frequency-body\">\r\n        <div class=\"frequency-container\">\r\n\r\n            <div class=\"frequency-tab\" [ngSwitch]=\"frequencyTab\">\r\n                <div class=\"frequency-tab-head\">\r\n                    <ul class=\"navigation\">\r\n                        <li *ngFor=\"let frequencyType of frequencyList; let i = index;\">\r\n                            <button\r\n                            [class.active]=\"frequencyType?.type == frequencyTab\"\r\n                            (click)=\"changeFrequencyTab(frequencyType)\"> {{frequencyType?.name}} </button>\r\n                        </li>\r\n                    </ul>\r\n                </div>\r\n                <div class=\"frequency-tab-body\">\r\n                    <app-frequency-daily\r\n                        *ngSwitchCase=\"'daily'\"\r\n                        [mode]=\"mode\"\r\n                        (frequencyDetails)=\"onFrequencySelected($event)\"\r\n                        [frequencyData]=\"frequencyDetails\"\r\n                        [responsibilityType]=\"responsibilityType\"\r\n                    ></app-frequency-daily>\r\n                    <app-frequency-weekly\r\n                        *ngSwitchCase=\"'weekly'\"\r\n                        [mode]=\"mode\"\r\n                        (frequencyDetails)=\"onFrequencySelected($event)\"\r\n                        [frequencyData]=\"frequencyDetails\"\r\n                        [responsibilityType]=\"responsibilityType\"\r\n                    ></app-frequency-weekly>\r\n                    <app-frequency-monthly\r\n                        *ngSwitchCase=\"'monthly'\"\r\n                        [mode]=\"mode\"\r\n                        (frequencyDetails)=\"onFrequencySelected($event)\"\r\n                        [frequencyData]=\"frequencyDetails\"\r\n                        [responsibilityType]=\"responsibilityType\"\r\n                    ></app-frequency-monthly>\r\n                    <app-frequency-quarterly\r\n                        *ngSwitchCase=\"'quarterly'\"\r\n                        [mode]=\"mode\"\r\n                        (frequencyDetails)=\"onFrequencySelected($event)\"\r\n                        [frequencyData]=\"frequencyDetails\"\r\n                        [responsibilityType]=\"responsibilityType\"\r\n                    ></app-frequency-quarterly>\r\n                    <app-frequency-biannual\r\n                        *ngSwitchCase=\"'biannual'\"\r\n                        [mode]=\"mode\"\r\n                        (frequencyDetails)=\"onFrequencySelected($event)\"\r\n                        [frequencyData]=\"frequencyDetails\"\r\n                        [responsibilityType]=\"responsibilityType\"\r\n                    ></app-frequency-biannual>\r\n                    <app-frequency-annual\r\n                        *ngSwitchCase=\"'annual'\"\r\n                        [mode]=\"mode\"\r\n                        (frequencyDetails)=\"onFrequencySelected($event)\"\r\n                        [frequencyData]=\"frequencyDetails\"\r\n                        [responsibilityType]=\"responsibilityType\"\r\n                    ></app-frequency-annual>\r\n                    <app-frequency-one-time\r\n                        *ngSwitchCase=\"'oneTime'\"\r\n                        [mode]=\"mode\"\r\n                        (frequencyDetails)=\"onFrequencySelected($event)\"\r\n                        [frequencyData]=\"frequencyDetails\"\r\n                        [responsibilityType]=\"responsibilityType\"\r\n                    ></app-frequency-one-time>\r\n                    <app-frequency-random\r\n                        *ngSwitchCase=\"'random'\"\r\n                        [mode]=\"mode\"\r\n                        (frequencyDetails)=\"onFrequencySelected($event)\"\r\n                        [frequencyData]=\"frequencyDetails\"\r\n                    ></app-frequency-random>\r\n                    <app-frequency-on-completion-of\r\n                        *ngSwitchCase=\"'onCompletionOf'\"\r\n                        [mode]=\"mode\"\r\n                        (frequencyDetails)=\"onFrequencySelected($event)\"\r\n                        [frequencyData]=\"frequencyDetails\"\r\n                    ></app-frequency-on-completion-of>\r\n                    <app-frequency-ongoing\r\n                    *ngSwitchCase=\"'ongoing'\"\r\n                    (frequencyDetails)=\"onFrequencySelected($event)\"\r\n                    [frequencyData]=\"frequencyDetails\"\r\n                    ></app-frequency-ongoing>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div> \r\n    <div class=\"frequency-footer\">\r\n        <app-floating-bar\r\n        [showFrequencyText]=\"true\"\r\n        [currentFrequency]=\"currentTabName\"\r\n        [isDisabled]=\"isNextDisabled\"\r\n        (closeEvent)=\"save()\"\r\n        (closeList)=\"close()\"\r\n        ></app-floating-bar>\r\n    </div>\r\n</div>\r\n",
                     styles: [".frequency{position:fixed;top:0;right:500px;bottom:0;left:0;border-top:3px solid #1e5dd3;z-index:11}.frequency-container{position:relative;width:800px;margin:0 auto;box-shadow:0 10px 20px rgba(30,93,211,.1);border-radius:2px}.frequency-head{background:#fbfbfb;height:44px;padding:0 12px;display:flex;align-items:center}.frequency-title{color:#161b2f;font-size:14px;margin:0;padding:0;line-height:20px;font-weight:500}.frequency-body{padding:60px 0;height:calc(100vh - 110px);overflow:auto}.frequency-tab{position:relative;border-right:1px solid #f1f1f1;border-bottom:1px solid #f1f1f1;border-left:1px solid #f1f1f1;border-radius:2px}.frequency-tab-head{background:#fbfbfb;border-top:1px solid #f1f1f1;border-radius:2px 2px 0 0}.frequency-tab-head ul{padding:0;margin:0}.frequency-tab-head ul.navigation{display:flex;border-radius:2px 2px 0 0}.frequency-tab-head ul.navigation li{list-style:none;width:100%;padding:0 4px;display:flex;justify-content:center}.frequency-tab-head ul.navigation li button{font-size:11px;line-height:32px;position:relative;display:block;color:#747576;font-weight:500;text-transform:uppercase;background:transparent;border:none;white-space:nowrap;cursor:pointer}.frequency-tab-head ul.navigation li button:after{position:absolute;right:0;bottom:-1px;left:0;height:2px;content:\"\"}.frequency-tab-head ul.navigation li button.active{color:#1e5dd3}.frequency-tab-head ul.navigation li button.active:after{background:#1e5dd3}.frequency-tab-body{background:#fff;border-top:1px solid #f1f1f1}.frequency-footer{display:block}"]
                 },] }
     ];
@@ -9700,6 +9805,7 @@
     ]; };
     FrequencyContainerComponent.propDecorators = {
         frequencyDetails: [{ type: i0.Input }],
+        responsibilityType: [{ type: i0.Input }],
         selectedFrequency: [{ type: i0.Output }],
         closeFrequency: [{ type: i0.Output }],
         mode: [{ type: i0.Input }]
@@ -9837,7 +9943,7 @@
     FrequencyDailyComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'app-frequency-daily',
-                    template: "<!-- <p>frequency-daily works!</p> -->\r\n<div class=\"frequency-daily\">\r\n    <app-frequency-top \r\n        [id]=\"0\"\r\n        [inputTime]=\"dailyInterval\"\r\n        [occurrenceFirst]=\"dailyInput\"\r\n        [frequencyType]=\"0\"\r\n        (timeChanged)=\"onTimeChanged($event, 'dailyInterval')\"\r\n        (valueChangedFirst)=\"valueChangedFirst($event)\"\r\n    ></app-frequency-top>\r\n    <app-frequency-lifecycle *ngIf=\"mode=='responsibility'\"\r\n        [id]=\"0\"\r\n        [startDate]=\"dailyLifeCycleStart\"\r\n        [endDate]=\"dailyLifeCycleEndTime\"\r\n        [occurrance]=\"dailyLifecycleOccurance\"\r\n        [selectedLifecycleType]=\"dailySeletedLifecycleType\"\r\n        (selectedOccurance)=\"lifecycleChange($event)\"\r\n    ></app-frequency-lifecycle>\r\n    <app-frequency-due-date\r\n        [pageName]=\"'daily'\"\r\n        [id]=\"0\"\r\n        [mode]=\"mode\"\r\n        [notCompletedValue]=\"dailyFailed\"\r\n        [deactivateValue]=\"dailyDeactivatedValue\"\r\n        [isDeactivated]=\"true\"\r\n        [completedRequired]=\"false\"\r\n        (valueChange)=\"onValueChange($event)\"\r\n    ></app-frequency-due-date>\r\n</div>",
+                    template: "<!-- <p>frequency-daily works!</p> -->\r\n<div class=\"frequency-daily\">\r\n    <app-frequency-top \r\n        [id]=\"0\"\r\n        [inputTime]=\"dailyInterval\"\r\n        [occurrenceFirst]=\"dailyInput\"\r\n        [frequencyType]=\"0\"\r\n        (timeChanged)=\"onTimeChanged($event, 'dailyInterval')\"\r\n        (valueChangedFirst)=\"valueChangedFirst($event)\"\r\n    ></app-frequency-top>\r\n    <app-frequency-lifecycle *ngIf=\"mode=='responsibility' && responsibilityType !== 1\"\r\n        [id]=\"0\"\r\n        [startDate]=\"dailyLifeCycleStart\"\r\n        [endDate]=\"dailyLifeCycleEndTime\"\r\n        [occurrance]=\"dailyLifecycleOccurance\"\r\n        [selectedLifecycleType]=\"dailySeletedLifecycleType\"\r\n        (selectedOccurance)=\"lifecycleChange($event)\"\r\n    ></app-frequency-lifecycle>\r\n    <app-frequency-due-date\r\n        *ngIf = \"responsibilityType !== 1\"\r\n        [pageName]=\"'daily'\"\r\n        [id]=\"0\"\r\n        [mode]=\"mode\"\r\n        [notCompletedValue]=\"dailyFailed\"\r\n        [deactivateValue]=\"dailyDeactivatedValue\"\r\n        [isDeactivated]=\"true\"\r\n        [completedRequired]=\"false\"\r\n        (valueChange)=\"onValueChange($event)\"\r\n    ></app-frequency-due-date>\r\n</div>",
                     styles: ["@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");.top-part{display:flex;justify-content:flex-start;padding:12px 20px;align-items:center}.top-part span{font-size:14px;color:#161b2f;width:auto;display:block}.top-part .day-counter{-moz-appearance:textfield;width:40px;margin:0 8px;padding:4px;text-align:center;border:none;border-bottom:2px solid #dcdcdc;line-height:26px;color:#161b2f;font-weight:400;outline:none}.top-part .day-counter::-webkit-inner-spin-button,.top-part .day-counter::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.top-part .time-picker{width:120px;margin-left:8px;position:relative}.top-part .time-picker input{color:#161b2f;font-weight:400;line-height:34px;border:1px solid #f1f1f1;border-radius:2px;height:36px;width:100%;outline:none;padding:0 28px 0 8px;cursor:pointer}.top-part .time-picker i{display:flex;justify-content:center;align-items:center;height:36px;width:28px;position:absolute;right:0;top:0;color:#1e5dd3;font-size:16px;pointer-events:none}"]
                 },] }
     ];
@@ -9847,6 +9953,7 @@
     FrequencyDailyComponent.propDecorators = {
         datePicker: [{ type: i0.ViewChild, args: ['datePicker',] }],
         mode: [{ type: i0.Input }],
+        responsibilityType: [{ type: i0.Input }],
         frequencyData: [{ type: i0.Input }],
         startDate: [{ type: i0.Input }],
         frequencyDetails: [{ type: i0.Output }]
@@ -10017,7 +10124,7 @@
     FrequencyWeeklyComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'app-frequency-weekly',
-                    template: "<!-- <p>frequency-weekly works!</p> -->\r\n<div class=\"frequency-weekly\">\r\n    <app-frequency-top\r\n        [id]=\"1\"\r\n        [inputTime]=\"weeklyInterval\"\r\n        [occurrenceFirst]=\"weeklyInput\"\r\n        [frequencyType]=\"1\"\r\n        (timeChanged)=\"onTimeChanged($event)\"\r\n        (valueChangedFirst)=\"valueChangedFirst($event)\"\r\n    ></app-frequency-top>\r\n    <app-frequency-checkbox-list\r\n        [id]=\"1\"\r\n        [listArray]=\"dayArray\"\r\n        [selectedIndex]=\"selectedWeekly\"\r\n        (selectedCheckbox)=\"onDaySelected($event)\"\r\n    ></app-frequency-checkbox-list>\r\n    <app-frequency-lifecycle  *ngIf=\"mode=='responsibility'\"\r\n        [id]=\"1\"\r\n        [startDate]=\"weeklyLifeCycleStart\"\r\n        [endDate]=\"weeklyLifeCycleEndTime\"\r\n        [occurrance]=\"weeklyLifecycleOccurance\"\r\n        [selectedLifecycleType]=\"weeklySeletedLifecycleType\"\r\n        (selectedOccurance)=\"lifecycleChange($event)\"\r\n    ></app-frequency-lifecycle>\r\n    <app-frequency-due-date\r\n        [id] = '1'\r\n        [mode]=\"mode\"\r\n        [pageName]=\"'weekly'\"\r\n        [deactivateValue]=\"weeklyDeactivatedValue\"\r\n        [isDeactivated]=\"true\"\r\n        [completedValue]=\"weeklyWindow\"\r\n        [notCompletedValue]=\"weeklyFailed\"\r\n        (valueChange)=\"onValueChange($event)\"\r\n    ></app-frequency-due-date>\r\n</div>",
+                    template: "<!-- <p>frequency-weekly works!</p> -->\r\n<div class=\"frequency-weekly\">\r\n    <app-frequency-top\r\n        [id]=\"1\"\r\n        [inputTime]=\"weeklyInterval\"\r\n        [occurrenceFirst]=\"weeklyInput\"\r\n        [frequencyType]=\"1\"\r\n        (timeChanged)=\"onTimeChanged($event)\"\r\n        (valueChangedFirst)=\"valueChangedFirst($event)\"\r\n    ></app-frequency-top>\r\n    <app-frequency-checkbox-list\r\n        [id]=\"1\"\r\n        [listArray]=\"dayArray\"\r\n        [selectedIndex]=\"selectedWeekly\"\r\n        (selectedCheckbox)=\"onDaySelected($event)\"\r\n    ></app-frequency-checkbox-list>\r\n    <app-frequency-lifecycle  *ngIf=\"mode=='responsibility' && responsibilityType !== 1\"\r\n        [id]=\"1\"\r\n        [startDate]=\"weeklyLifeCycleStart\"\r\n        [endDate]=\"weeklyLifeCycleEndTime\"\r\n        [occurrance]=\"weeklyLifecycleOccurance\"\r\n        [selectedLifecycleType]=\"weeklySeletedLifecycleType\"\r\n        (selectedOccurance)=\"lifecycleChange($event)\"\r\n    ></app-frequency-lifecycle>\r\n    <app-frequency-due-date\r\n        *ngIf = \"responsibilityType !== 1\"\r\n        [id] = '1'\r\n        [mode]=\"mode\"\r\n        [pageName]=\"'weekly'\"\r\n        [deactivateValue]=\"weeklyDeactivatedValue\"\r\n        [isDeactivated]=\"true\"\r\n        [completedValue]=\"weeklyWindow\"\r\n        [notCompletedValue]=\"weeklyFailed\"\r\n        (valueChange)=\"onValueChange($event)\"\r\n    ></app-frequency-due-date>\r\n</div>",
                     styles: [".frequency-weekly{position:relative}"]
                 },] }
     ];
@@ -10026,6 +10133,7 @@
     ]; };
     FrequencyWeeklyComponent.propDecorators = {
         mode: [{ type: i0.Input }],
+        responsibilityType: [{ type: i0.Input }],
         startDate: [{ type: i0.Input }],
         frequencyData: [{ type: i0.Input }],
         frequencyDetails: [{ type: i0.Output }]
@@ -10208,7 +10316,7 @@
     FrequencyMonthlyComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'app-frequency-monthly',
-                    template: "<!-- <p>frequency-monthly works!</p> -->\r\n<div class=\"frequency-monthly\">\r\n    <app-frequency-top\r\n        [id]=\"2\"\r\n        [inputTime]=\"monthlyInterval\"\r\n        [occurrenceFirst]=\"monthlyInput\"\r\n        [frequencyType]=\"3\"\r\n        (timeChanged)=\"onTimeChanged($event)\"\r\n        (valueChangedFirst)=\"valueChangedFirst($event)\"\r\n    ></app-frequency-top>\r\n    <app-frequency-checkbox-list\r\n        [id]=\"2\"\r\n        [listArray]=\"monthNameArray\"\r\n        [selectedIndex]=\"selectedMonthly\"\r\n        (selectedCheckbox)=\"onMonthSelected($event)\"\r\n    ></app-frequency-checkbox-list>\r\n    <app-frequency-lifecycle  *ngIf=\"mode=='responsibility'\"\r\n        [id]=\"2\"\r\n        [startDate]=\"monthlyLifeCycleStart\"\r\n        [endDate]=\"monthlyLifeCycleEndTime\"\r\n        [occurrance]=\"monthlyLifecycleOccurance\"\r\n        [selectedLifecycleType]=\"monthlySeletedLifecycleType\"\r\n        (selectedOccurance)=\"lifecycleChange($event)\"\r\n    ></app-frequency-lifecycle>\r\n    <app-frequency-due-date\r\n        [id] = '2'\r\n        [mode]=\"mode\"\r\n        [pageName]=\"'monthly'\"\r\n        [deactivateValue]=\"monthlyDeactivatedValue\"\r\n        [isDeactivated]=\"true\"\r\n        [completedValue]=\"monthlyWindow\"\r\n        [notCompletedValue]=\"monthlyFailed\"\r\n        (valueChange)=\"onValueChange($event)\"\r\n    ></app-frequency-due-date>\r\n</div>\r\n",
+                    template: "<!-- <p>frequency-monthly works!</p> -->\r\n<div class=\"frequency-monthly\">\r\n    <app-frequency-top\r\n        [id]=\"2\"\r\n        [inputTime]=\"monthlyInterval\"\r\n        [occurrenceFirst]=\"monthlyInput\"\r\n        [frequencyType]=\"3\"\r\n        (timeChanged)=\"onTimeChanged($event)\"\r\n        (valueChangedFirst)=\"valueChangedFirst($event)\"\r\n    ></app-frequency-top>\r\n    <app-frequency-checkbox-list\r\n        [id]=\"2\"\r\n        [listArray]=\"monthNameArray\"\r\n        [selectedIndex]=\"selectedMonthly\"\r\n        (selectedCheckbox)=\"onMonthSelected($event)\"\r\n    ></app-frequency-checkbox-list>\r\n    <app-frequency-lifecycle  *ngIf=\"mode=='responsibility' && responsibilityType !== 1\"\r\n        [id]=\"2\"\r\n        [startDate]=\"monthlyLifeCycleStart\"\r\n        [endDate]=\"monthlyLifeCycleEndTime\"\r\n        [occurrance]=\"monthlyLifecycleOccurance\"\r\n        [selectedLifecycleType]=\"monthlySeletedLifecycleType\"\r\n        (selectedOccurance)=\"lifecycleChange($event)\"\r\n    ></app-frequency-lifecycle>\r\n    <app-frequency-due-date\r\n        *ngIf = \"responsibilityType !== 1\"\r\n        [id] = '2'\r\n        [mode]=\"mode\"\r\n        [pageName]=\"'monthly'\"\r\n        [deactivateValue]=\"monthlyDeactivatedValue\"\r\n        [isDeactivated]=\"true\"\r\n        [completedValue]=\"monthlyWindow\"\r\n        [notCompletedValue]=\"monthlyFailed\"\r\n        (valueChange)=\"onValueChange($event)\"\r\n    ></app-frequency-due-date>\r\n</div>\r\n",
                     styles: [".frequency-monthly{position:relative}"]
                 },] }
     ];
@@ -10217,6 +10325,7 @@
     ]; };
     FrequencyMonthlyComponent.propDecorators = {
         mode: [{ type: i0.Input }],
+        responsibilityType: [{ type: i0.Input }],
         startDate: [{ type: i0.Input }],
         frequencyData: [{ type: i0.Input }],
         frequencyDetails: [{ type: i0.Output }]
@@ -10384,7 +10493,7 @@
     FrequencyQuarterlyComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'app-frequency-quarterly',
-                    template: "<!-- <p>frequency-quarterly works!</p> -->\r\n<div class=\"frequency-quarterly\">\r\n    <app-frequency-top\r\n        [id]=\"3\"\r\n        [inputTime]=\"quarterlyInterval\"\r\n        [occurrenceFirst]=\"quarterlyInput\"\r\n        [frequencyType]=\"3\"\r\n        (timeChanged)=\"onTimeChanged($event)\"\r\n        (valueChangedFirst)=\"valueChangedFirst($event)\"\r\n    ></app-frequency-top>\r\n    <app-frequency-radio-list\r\n        [radioList]=\"quarterlyArray\" \r\n        [selectedIndex]=\"selectedQuarterly\" \r\n        (selectedRadio)=\"selectedMonth($event)\"\r\n        [name]=\"'quarter'\"\r\n    ></app-frequency-radio-list>\r\n    <app-frequency-lifecycle  *ngIf=\"mode=='responsibility'\"\r\n        [id]=\"1\"\r\n        [startDate]=\"quarterlyLifeCycleStart\"\r\n        [endDate]=\"quarterlyLifeCycleEndTime\"\r\n        [occurrance]=\"quarterlyLifecycleOccurance\"\r\n        [selectedLifecycleType]=\"quarterlySeletedLifecycleType\"\r\n        (selectedOccurance)=\"lifecycleChange($event)\"\r\n    ></app-frequency-lifecycle>\r\n    <app-frequency-due-date\r\n        [id] = '3'\r\n        [mode]=\"mode\"\r\n        [pageName]=\"'quarterly'\"\r\n        [isDeactivated]=\"false\"\r\n        [completedValue]=\"quarterlyWindow\"\r\n        [notCompletedValue]=\"quarterlyFailed\"\r\n        (valueChange)=\"onValueChange($event)\"\r\n    ></app-frequency-due-date>\r\n</div>\r\n",
+                    template: "<!-- <p>frequency-quarterly works!</p> -->\r\n<div class=\"frequency-quarterly\">\r\n    <app-frequency-top\r\n        [id]=\"3\"\r\n        [inputTime]=\"quarterlyInterval\"\r\n        [occurrenceFirst]=\"quarterlyInput\"\r\n        [frequencyType]=\"3\"\r\n        (timeChanged)=\"onTimeChanged($event)\"\r\n        (valueChangedFirst)=\"valueChangedFirst($event)\"\r\n    ></app-frequency-top>\r\n    <app-frequency-radio-list\r\n        [radioList]=\"quarterlyArray\" \r\n        [selectedIndex]=\"selectedQuarterly\" \r\n        (selectedRadio)=\"selectedMonth($event)\"\r\n        [name]=\"'quarter'\"\r\n    ></app-frequency-radio-list>\r\n    <app-frequency-lifecycle  *ngIf=\"mode=='responsibility' && responsibilityType !== 1\"\r\n        [id]=\"1\"\r\n        [startDate]=\"quarterlyLifeCycleStart\"\r\n        [endDate]=\"quarterlyLifeCycleEndTime\"\r\n        [occurrance]=\"quarterlyLifecycleOccurance\"\r\n        [selectedLifecycleType]=\"quarterlySeletedLifecycleType\"\r\n        (selectedOccurance)=\"lifecycleChange($event)\"\r\n    ></app-frequency-lifecycle>\r\n    <app-frequency-due-date\r\n        *ngIf = \"responsibilityType !== 1\"\r\n        [id] = '3'\r\n        [mode]=\"mode\"\r\n        [pageName]=\"'quarterly'\"\r\n        [isDeactivated]=\"false\"\r\n        [completedValue]=\"quarterlyWindow\"\r\n        [notCompletedValue]=\"quarterlyFailed\"\r\n        (valueChange)=\"onValueChange($event)\"\r\n    ></app-frequency-due-date>\r\n</div>\r\n",
                     styles: [".frequency-quarterly{position:relative}"]
                 },] }
     ];
@@ -10393,6 +10502,7 @@
     ]; };
     FrequencyQuarterlyComponent.propDecorators = {
         mode: [{ type: i0.Input }],
+        responsibilityType: [{ type: i0.Input }],
         startDate: [{ type: i0.Input }],
         frequencyData: [{ type: i0.Input }],
         frequencyDetails: [{ type: i0.Output }]
@@ -10567,7 +10677,7 @@
     FrequencyBiannualComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'app-frequency-biannual',
-                    template: "<!-- <p>frequency-biannual works!</p> -->\r\n<div class=\"frequency-biannual\">\r\n    <app-frequency-top \r\n        [id]=\"4\"\r\n        [inputTime]=\"biannualInterval\"\r\n        [occurrenceFirst]=\"biannualInput\"\r\n        [frequencyType]=\"4\"\r\n        (timeChanged)=\"onTimeChanged($event)\"\r\n        (valueChangedFirst)=\"valueChangedFirst($event)\"\r\n    ></app-frequency-top>\r\n    <app-frequency-checkbox-list\r\n        [id]=\"4\"\r\n        [listArray]=\"monthNameArray\"\r\n        [selectedIndex]=\"biannualSelected\"\r\n        (selectedCheckbox)=\"onMonthSelected($event)\"\r\n    ></app-frequency-checkbox-list>\r\n    <app-frequency-lifecycle  *ngIf=\"mode=='responsibility'\"\r\n        [id]=\"4\"\r\n        [startDate]=\"biannualLifeCycleStart\"\r\n        [endDate]=\"biannualLifeCycleEndTime\"\r\n        [occurrance]=\"biannualLifecycleOccurance\"\r\n        [selectedLifecycleType]=\"biannualSeletedLifecycleType\"\r\n        (selectedOccurance)=\"lifecycleChange($event)\"\r\n    ></app-frequency-lifecycle>\r\n    <app-frequency-due-date\r\n        [pageName]=\"'biannual'\"\r\n        [mode]=\"mode\"\r\n        [id]=\"4\"\r\n        [completedValue]=\"biannualWindow\"\r\n        [notCompletedValue]=\"biannualFailed\"\r\n        (valueChange)=\"onValueChange($event)\"\r\n    ></app-frequency-due-date>\r\n</div>\r\n",
+                    template: "<!-- <p>frequency-biannual works!</p> -->\r\n<div class=\"frequency-biannual\">\r\n    <app-frequency-top \r\n        [id]=\"4\"\r\n        [inputTime]=\"biannualInterval\"\r\n        [occurrenceFirst]=\"biannualInput\"\r\n        [frequencyType]=\"4\"\r\n        (timeChanged)=\"onTimeChanged($event)\"\r\n        (valueChangedFirst)=\"valueChangedFirst($event)\"\r\n    ></app-frequency-top>\r\n    <app-frequency-checkbox-list\r\n        [id]=\"4\"\r\n        [listArray]=\"monthNameArray\"\r\n        [selectedIndex]=\"biannualSelected\"\r\n        (selectedCheckbox)=\"onMonthSelected($event)\"\r\n    ></app-frequency-checkbox-list>\r\n    <app-frequency-lifecycle  *ngIf=\"mode=='responsibility' && responsibilityType !== 1\"\r\n        [id]=\"4\"\r\n        [startDate]=\"biannualLifeCycleStart\"\r\n        [endDate]=\"biannualLifeCycleEndTime\"\r\n        [occurrance]=\"biannualLifecycleOccurance\"\r\n        [selectedLifecycleType]=\"biannualSeletedLifecycleType\"\r\n        (selectedOccurance)=\"lifecycleChange($event)\"\r\n    ></app-frequency-lifecycle>\r\n    <app-frequency-due-date\r\n        *ngIf = \"responsibilityType !== 1\"\r\n        [pageName]=\"'biannual'\"\r\n        [mode]=\"mode\"\r\n        [id]=\"4\"\r\n        [completedValue]=\"biannualWindow\"\r\n        [notCompletedValue]=\"biannualFailed\"\r\n        (valueChange)=\"onValueChange($event)\"\r\n    ></app-frequency-due-date>\r\n</div>\r\n",
                     styles: [".frequency-biannual{position:relative}"]
                 },] }
     ];
@@ -10576,6 +10686,7 @@
     ]; };
     FrequencyBiannualComponent.propDecorators = {
         mode: [{ type: i0.Input }],
+        responsibilityType: [{ type: i0.Input }],
         startDate: [{ type: i0.Input }],
         frequencyData: [{ type: i0.Input }],
         frequencyDetails: [{ type: i0.Output }]
@@ -10774,7 +10885,7 @@
     FrequencyAnnualComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'app-frequency-annual',
-                    template: "<!-- <p>frequency-annual works!</p> -->\r\n<div class=\"frequency-annual\">\r\n    <app-frequency-top\r\n        [id]=\"5\"\r\n        [inputTime]=\"yearlyInterval\"\r\n        [occurrenceFirst]=\"yearlyInput\"\r\n        [yearlyDay]=\"yearlyDay\"\r\n        [frequencyType]=\"2\"\r\n        (timeChanged)=\"onTimeChanged($event)\"\r\n        (valueChangedFirst)=\"valueChangedFirst($event)\"\r\n        (yearlyDateChanged)=\"dateChange($event)\"\r\n    ></app-frequency-top>\r\n    <app-frequency-radio-list \r\n        [radioList]=\"monthList\" \r\n        [selectedIndex]=\"yearlySelected\" \r\n        (selectedRadio)=\"selectedMonth($event)\">\r\n    </app-frequency-radio-list>\r\n    <app-frequency-lifecycle  *ngIf=\"mode=='responsibility'\"\r\n        [id]=\"5\"\r\n        [startDate]=\"yearlyLifeCycleStart\"\r\n        [endDate]=\"yearlyLifeCycleEndTime\"\r\n        [occurrance]=\"yearlyLifecycleOccurance\"\r\n        [selectedLifecycleType]=\"yearlySeletedLifecycleType\"\r\n        (selectedOccurance)=\"lifecycleChange($event)\"\r\n    ></app-frequency-lifecycle>\r\n    <app-frequency-due-date\r\n        [pageName]=\"'yearly'\"\r\n        [mode]=\"mode\"\r\n        [id]=\"5\"\r\n        [completedValue]=\"yearlyWindow\"\r\n        [notCompletedValue]=\"yearlyFailed\"\r\n        (valueChange)=\"onValueChange($event)\"\r\n    ></app-frequency-due-date>\r\n</div>\r\n",
+                    template: "<!-- <p>frequency-annual works!</p> -->\r\n<div class=\"frequency-annual\">\r\n    <app-frequency-top\r\n        [id]=\"5\"\r\n        [inputTime]=\"yearlyInterval\"\r\n        [occurrenceFirst]=\"yearlyInput\"\r\n        [yearlyDay]=\"yearlyDay\"\r\n        [frequencyType]=\"2\"\r\n        (timeChanged)=\"onTimeChanged($event)\"\r\n        (valueChangedFirst)=\"valueChangedFirst($event)\"\r\n        (yearlyDateChanged)=\"dateChange($event)\"\r\n    ></app-frequency-top>\r\n    <app-frequency-radio-list \r\n        [radioList]=\"monthList\" \r\n        [selectedIndex]=\"yearlySelected\" \r\n        (selectedRadio)=\"selectedMonth($event)\">\r\n    </app-frequency-radio-list>\r\n    <app-frequency-lifecycle  *ngIf=\"mode=='responsibility' &&  responsibilityType !== 1\"\r\n        [id]=\"5\"\r\n        [startDate]=\"yearlyLifeCycleStart\"\r\n        [endDate]=\"yearlyLifeCycleEndTime\"\r\n        [occurrance]=\"yearlyLifecycleOccurance\"\r\n        [selectedLifecycleType]=\"yearlySeletedLifecycleType\"\r\n        (selectedOccurance)=\"lifecycleChange($event)\"\r\n    ></app-frequency-lifecycle>\r\n    <app-frequency-due-date\r\n        *ngIf = \" responsibilityType !== 1\"\r\n        [pageName]=\"'yearly'\"\r\n        [mode]=\"mode\"\r\n        [id]=\"5\"\r\n        [completedValue]=\"yearlyWindow\"\r\n        [notCompletedValue]=\"yearlyFailed\"\r\n        (valueChange)=\"onValueChange($event)\"\r\n    ></app-frequency-due-date>\r\n</div>\r\n",
                     styles: [".frequency-annual{position:relative}"]
                 },] }
     ];
@@ -10784,6 +10895,7 @@
     FrequencyAnnualComponent.propDecorators = {
         frequencyData: [{ type: i0.Input }],
         mode: [{ type: i0.Input }],
+        responsibilityType: [{ type: i0.Input }],
         startDate: [{ type: i0.Input }],
         frequencyDetails: [{ type: i0.Output }]
     };
@@ -10905,7 +11017,7 @@
     FrequencyOneTimeComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'app-frequency-one-time',
-                    template: "<!-- <p>frequency-one-time works!</p> -->\r\n<div class=\"frequency-one-time\">\r\n    <div class=\"frequency-one-time-row\">\r\n        <div class=\"date\">\r\n            <i class=\"icons\">&#xe92d;</i>\r\n            <input type=\"text\" [value]=\"todayDate | date: 'dd MMM yyyy'\" [placeholder]=\"todayDate | date: 'dd MMM yyyy'\" (click)=\"openDatePicker()\" readonly>\r\n          \r\n        </div>\r\n        <div class=\"time\">\r\n            <input type=\"text\" readonly aria-label=\"12hr format\" [(ngModel)]=\"oneTimeStartTime\" [ngxTimepicker]=\"dailyTime\" placeholder=\"Select Time\">\r\n            <i class=\"icons\">&#xe955;</i>\r\n            <ngx-material-timepicker (timeChanged)=\"onTimeChanged($event)\" #dailyTime></ngx-material-timepicker>\r\n        </div>\r\n    </div>\r\n    <app-frequency-due-date \r\n         [id] = '6'\r\n         [mode]=\"mode\"\r\n        [pageName]=\"'one-time'\"\r\n        [isDeactivated]=\"false\"\r\n        [completedValue]=\"oneTimeWindow\"\r\n        [notCompletedValue]=\"oneTimeFailed\"\r\n        (valueChange)=\"onValueChange($event)\"\r\n    ></app-frequency-due-date>\r\n</div>\r\n\r\n<dp-date-picker #datePicker \r\n    [id]=\"'start-date-' + 6\"\r\n    [placeholder]=\"todayDate | date: 'dd MMM yyyy'\"\r\n    [(ngModel)]=\"selectedDate\"\r\n    [config]=\"dateConfig\"\r\n    (onSelect)=\"openDatePicker();dateChange($event); showDateError = false; datepickerOverlay = false\"\r\n></dp-date-picker>\r\n<div class=\"vx-overlay\" (click)=\"closeDatepicker()\" *ngIf=\"datepickerOverlay\"></div>",
+                    template: "<!-- <p>frequency-one-time works!</p> -->\r\n<div class=\"frequency-one-time\">\r\n    <div class=\"frequency-one-time-row\">\r\n        <div class=\"date\">\r\n            <i class=\"icons\">&#xe92d;</i>\r\n            <input type=\"text\" [value]=\"todayDate | date: 'dd MMM yyyy'\" [placeholder]=\"todayDate | date: 'dd MMM yyyy'\" (click)=\"openDatePicker()\" readonly>\r\n          \r\n        </div>\r\n        <div class=\"time\">\r\n            <input type=\"text\" readonly aria-label=\"12hr format\" [(ngModel)]=\"oneTimeStartTime\" [ngxTimepicker]=\"dailyTime\" placeholder=\"Select Time\">\r\n            <i class=\"icons\">&#xe955;</i>\r\n            <ngx-material-timepicker (timeChanged)=\"onTimeChanged($event)\" #dailyTime></ngx-material-timepicker>\r\n        </div>\r\n    </div>\r\n    <app-frequency-due-date \r\n        *ngIf = \" responsibilityType !== 1\"\r\n        [id] = '6'\r\n        [mode]=\"mode\"\r\n        [pageName]=\"'one-time'\"\r\n        [isDeactivated]=\"false\"\r\n        [completedValue]=\"oneTimeWindow\"\r\n        [notCompletedValue]=\"oneTimeFailed\"\r\n        (valueChange)=\"onValueChange($event)\"\r\n    ></app-frequency-due-date>\r\n</div>\r\n\r\n<dp-date-picker #datePicker \r\n    [id]=\"'start-date-' + 6\"\r\n    [placeholder]=\"todayDate | date: 'dd MMM yyyy'\"\r\n    [(ngModel)]=\"selectedDate\"\r\n    [config]=\"dateConfig\"\r\n    (onSelect)=\"openDatePicker();dateChange($event); showDateError = false; datepickerOverlay = false\"\r\n></dp-date-picker>\r\n<div class=\"vx-overlay\" (click)=\"closeDatepicker()\" *ngIf=\"datepickerOverlay\"></div>",
                     styles: ["@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");::ng-deep .frequency-one-time{position:relative}::ng-deep .frequency-one-time-row{display:flex;justify-content:space-between;padding:12px 20px}::ng-deep .frequency-one-time .date{width:calc(100% - 132px);position:relative}::ng-deep .frequency-one-time .date input{color:#161b2f;font-weight:400;line-height:34px;border:1px solid #f1f1f1;border-radius:4px;height:40px;width:100%;outline:none;padding:0 8px 0 40px;cursor:pointer;font-size:14px}::ng-deep .frequency-one-time .date i{display:flex;justify-content:center;align-items:center;height:39px;width:28px;position:absolute;left:8px;top:0;color:#1e5dd3;font-size:16px;pointer-events:none;z-index:1}::ng-deep .frequency-one-time .time{width:120px;position:relative}::ng-deep .frequency-one-time .time input{color:#161b2f;font-weight:400;line-height:34px;border:1px solid #f1f1f1;border-radius:4px;height:40px;width:100%;outline:none;padding:0 28px 0 8px;cursor:pointer;font-size:14px}::ng-deep .frequency-one-time .time i{display:flex;justify-content:center;align-items:center;height:40px;width:28px;position:absolute;right:0;top:0;color:#1e5dd3;font-size:16px;pointer-events:none}dp-date-picker{width:100%;position:fixed!important;z-index:14;top:-40px;left:0}dp-date-picker input{width:100%;border:none;opacity:0;pointer-events:none}dp-date-picker input:focus{outline:none}dp-date-picker .dp-popup{width:412px;box-shadow:0 0 20px #161b2f26;background-color:#fff;border-radius:4px;-webkit-animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both}dp-date-picker .dp-popup dp-day-calendar,dp-date-picker .dp-popup dp-month-calendar{width:100%;pointer-events:auto}dp-date-picker .dp-popup dp-day-calendar button,dp-date-picker .dp-popup dp-month-calendar button{background:transparent;border:none;outline:none}dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left,dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right,dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left,dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right,dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:50%;font-size:14px}dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left:hover,dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right:hover,dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:hover,dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left:hover,dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right:hover,dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:hover{background-color:#f3f3f3}dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn{display:none}dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:before,dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:before{content:\"\";height:10px;width:10px;border-radius:50%;background:#000;display:inline-flex}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week,dp-date-picker .dp-popup dp-day-calendar .dp-weekdays,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays{display:flex;justify-content:space-around}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,dp-date-picker .dp-popup dp-day-calendar .dp-weekdays .dp-calendar-weekday,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week .dp-calendar-weekday,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays .dp-calendar-weekday{width:52px;border-left:none;border-bottom-color:#fff;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button,dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button{width:40px;height:40px;border-radius:50%;display:inline-flex;justify-content:center;align-items:center}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button:hover,dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button:hover,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button:hover,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button:hover{background-color:#f3f3f3}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-selected,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-selected,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-selected{background:#1e5dd3}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-current-day,dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-current-day,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-current-day,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-current-day{border:1px solid rgba(0,0,0,.38);color:#1e5dd3;background-color:#fff}dp-date-picker .dp-popup dp-day-calendar .dp-day-calendar-container,dp-date-picker .dp-popup dp-month-calendar .dp-day-calendar-container{padding:20px;border-radius:2px}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-nav-container{display:flex;margin:0 0 20px;border:none}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container .dp-nav-header button,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-nav-container .dp-nav-header button{color:#000;font-size:17px;font-weight:500;margin:0 0 0 12px;padding:0}dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container,dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container{width:80px;display:flex}dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button,dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button{margin:0!important}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-wrapper,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-wrapper{border:none}dp-date-picker .dp-open+div{position:fixed!important;top:0!important;right:0!important;bottom:0!important;left:0!important;display:flex;justify-content:center;align-items:center;z-index:99;pointer-events:none;background:rgba(0,0,0,.3)}@-webkit-keyframes slide-bottom{0%{transform:translateY(-100px)}to{transform:translateY(0)}}@keyframes slide-bottom{0%{transform:translateY(-100px)}to{transform:translateY(0)}}.vx-overlay{position:fixed;z-index:1;top:0;right:0;bottom:0;left:0}"]
                 },] }
     ];
@@ -10916,6 +11028,7 @@
         datePicker: [{ type: i0.ViewChild, args: ['datePicker',] }],
         frequencyData: [{ type: i0.Input }],
         mode: [{ type: i0.Input }],
+        responsibilityType: [{ type: i0.Input }],
         frequencyDetails: [{ type: i0.Output }]
     };
 
@@ -26873,12 +26986,12 @@
     ];
     RolesListComponent.ctorParameters = function () { return []; };
 
-    var SELECTOR_VALUE_ACCESSOR = {
+    var SELECTOR_VALUE_ACCESSOR$1 = {
         provide: forms.NG_VALUE_ACCESSOR,
-        useExisting: i0.forwardRef(function () { return TabSelector; }),
+        useExisting: i0.forwardRef(function () { return TabSelector$1; }),
         multi: true,
     };
-    var TabSelector = /** @class */ (function () {
+    var TabSelector$1 = /** @class */ (function () {
         function TabSelector() {
             this.selectedItem = 1;
             this.onChanged = function (value) { };
@@ -26903,11 +27016,11 @@
         };
         return TabSelector;
     }());
-    TabSelector.decorators = [
+    TabSelector$1.decorators = [
         { type: i0.Component, args: [{
                     selector: 'tab-selector',
                     template: "<div class=\"type-field \"  [ngClass]=\"{'two': displayArray?.length === 2, 'four': displayArray?.length === 4}\">\r\n    <div class=\"type-item\" *ngFor=\"let item of displayArray\" [class.active]=\"selectedItem === item?.value\">\r\n        <button (click)=\"valueChanged(item?.value)\">{{item?.label}}</button>\r\n    </div>\r\n    <span class=\"background-glider\"></span>\r\n</div>",
-                    providers: [SELECTOR_VALUE_ACCESSOR],
+                    providers: [SELECTOR_VALUE_ACCESSOR$1],
                     inputs: ['disabled', 'selectedItem', 'displayArray'],
                     styles: ["@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");@import url(\"https://cdn.v-comply.com/design-system/css/display/display.css\");@import url(\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\");@import url(\"https://cdn.v-comply.com/design-system/css/text/text.css\");@import url(\"https://cdn.v-comply.com/design-system/css/color/color.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\");.type-field{background:#f8f8f8;border:1px solid #dbdbdb;border-radius:4px;height:40px;display:flex;align-items:center;justify-content:space-between;padding:4px;position:relative;z-index:1}.type-field.four .type-item:first-of-type{width:6.25rem}.type-field.four .type-item:nth-child(2){width:5.75rem}.type-field.four .type-item:nth-child(2).active~.background-glider{transform:translate(6.4375rem);width:5.75rem}.type-field.four .type-item:nth-child(3){width:8.625rem}.type-field.four .type-item:nth-child(3).active~.background-glider{transform:translate(12.375rem);width:8.625rem}.type-field.four .type-item:last-of-type{width:5.25rem}.type-field.four .type-item:last-of-type.active~.background-glider{transform:translate(21.1875rem);width:5.25rem}.type-field.four .background-glider{width:6.25rem}.type-field.two .type-item{width:50%}.type-field.two .type-item:nth-child(2).active~.background-glider{transform:translate(100%)}.type-field.two .background-glider{width:13rem}.type-field .type-item{position:relative}.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:center}.type-field .type-item button.disabled{background:transparent!important;color:#dbdbdb!important;filter:unset!important;opacity:unset!important;pointer-events:none}.type-field .type-item .info{color:#1e5dd3;font-size:12px;position:absolute;top:10px;right:12px;cursor:pointer}.type-field .type-item.active button{color:#1e5dd3!important}.type-field .background-glider{background:#fff;border-radius:4px;box-shadow:0 1px 3px #161b2f26;position:absolute;display:flex;height:32px;z-index:-1;transition:.25s ease-out}"]
                 },] }
@@ -28983,7 +29096,7 @@
     CreateProgramUiModule.decorators = [
         { type: i0.NgModule, args: [{
                     declarations: [
-                        TabSelector,
+                        TabSelector$1,
                         TickMarkComponent,
                         FormFieldComponent,
                         FilePillComponent,
@@ -29025,7 +29138,7 @@
                         // AssessmentListModule,
                     ],
                     exports: [
-                        TabSelector,
+                        TabSelector$1,
                         TickMarkComponent,
                         FormFieldComponent,
                         FilePillComponent,
@@ -29189,6 +29302,102 @@
                 },] }
     ];
 
+    var SELECTOR_VALUE_ACCESSOR = {
+        provide: forms.NG_VALUE_ACCESSOR,
+        useExisting: i0.forwardRef(function () { return TabSelector; }),
+        multi: true,
+    };
+    var TabSelector = /** @class */ (function () {
+        function TabSelector() {
+            this.selectedItem = 1;
+            this.onChanged = function (value) { };
+            this.onTouched = function () { };
+        }
+        TabSelector.prototype.writeValue = function (value) {
+            this.selectedItem = value !== null && value !== void 0 ? value : 1;
+        };
+        TabSelector.prototype.registerOnChange = function (fn) {
+            this.onChanged = fn;
+        };
+        TabSelector.prototype.registerOnTouched = function (fn) {
+            this.onTouched = fn;
+        };
+        TabSelector.prototype.setDisabledState = function (isDisabled) {
+            this.disabled = isDisabled;
+        };
+        TabSelector.prototype.valueChanged = function (value) {
+            this.selectedItem = value;
+            this.onChanged(this.selectedItem);
+            this.onTouched();
+        };
+        return TabSelector;
+    }());
+    TabSelector.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'selector',
+                    template: "<div class=\"type-field \"  [ngClass]=\"{'two': displayArray?.length === 2, 'four': displayArray?.length === 4}\">\n    <div class=\"type-item\" *ngFor=\"let item of displayArray\" [class.active]=\"selectedItem === item?.value\">\n        <button (click)=\"valueChanged(item?.value)\">{{item?.label}}</button>\n    </div>\n    <span class=\"background-glider\"></span>\n</div>",
+                    providers: [SELECTOR_VALUE_ACCESSOR],
+                    inputs: ['disabled', 'selectedItem', 'displayArray'],
+                    styles: ["@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");@import url(\"https://cdn.v-comply.com/design-system/css/display/display.css\");@import url(\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\");@import url(\"https://cdn.v-comply.com/design-system/css/text/text.css\");@import url(\"https://cdn.v-comply.com/design-system/css/color/color.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\");.type-field{background:#f8f8f8;border:1px solid #dbdbdb;border-radius:4px;height:40px;display:flex;align-items:center;justify-content:space-between;padding:4px;position:relative;z-index:1}.type-field.four .type-item:first-of-type{width:6.25rem}.type-field.four .type-item:nth-child(2){width:5.75rem}.type-field.four .type-item:nth-child(2).active~.background-glider{transform:translate(6.4375rem);width:5.75rem}.type-field.four .type-item:nth-child(3){width:8.625rem}.type-field.four .type-item:nth-child(3).active~.background-glider{transform:translate(12.375rem);width:8.625rem}.type-field.four .type-item:last-of-type{width:5.25rem}.type-field.four .type-item:last-of-type.active~.background-glider{transform:translate(21.1875rem);width:5.25rem}.type-field.four .background-glider{width:6.25rem}.type-field.two .type-item{width:50%}.type-field.two .type-item:nth-child(2).active~.background-glider{transform:translate(100%)}.type-field.two .background-glider{width:13rem}.type-field .type-item{position:relative}.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:center}.type-field .type-item button.disabled{background:transparent!important;color:#dbdbdb!important;filter:unset!important;opacity:unset!important;pointer-events:none}.type-field .type-item .info{color:#1e5dd3;font-size:12px;position:absolute;top:10px;right:12px;cursor:pointer}.type-field .type-item.active button{color:#1e5dd3!important}.type-field .background-glider{background:#fff;border-radius:4px;box-shadow:0 1px 3px #161b2f26;position:absolute;display:flex;height:32px;z-index:-1;transition:.25s ease-out}"]
+                },] }
+    ];
+
+    var SystemTaskSelectorComponent = /** @class */ (function () {
+        function SystemTaskSelectorComponent() {
+            this.systemResponsibilityList = [];
+            this.selectedResponsibilities = '';
+            this.systemResponsibilityIdKey = '';
+            this.responsibilityNameKey = '';
+            this.saveSelectedList = new i0.EventEmitter();
+            this.closeResponsibilityList = new i0.EventEmitter();
+            this.search = '';
+            this.animation = false;
+        }
+        SystemTaskSelectorComponent.prototype.ngOnChanges = function () {
+            var _a;
+            if (((_a = this.selectedResponsibilities) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+                this.selectedResponsibility = this.selectedResponsibilities[0];
+            }
+        };
+        SystemTaskSelectorComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this.animation = true;
+            setTimeout(function () {
+                _this.animation = false;
+            }, 300);
+        };
+        SystemTaskSelectorComponent.prototype.selectResponsibility = function (resp) {
+            console.log("uuuuu", resp);
+            this.selectedResponsibility = resp;
+        };
+        SystemTaskSelectorComponent.prototype.deleteEvent = function (event) {
+            this.selectedResponsibility = '';
+        };
+        SystemTaskSelectorComponent.prototype.save = function () {
+            this.saveSelectedList.emit(this.selectedResponsibility);
+        };
+        SystemTaskSelectorComponent.prototype.close = function () {
+            this.closeResponsibilityList.emit();
+        };
+        return SystemTaskSelectorComponent;
+    }());
+    SystemTaskSelectorComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'app-system-task-selector',
+                    template: "<div class=\"add-risk-user-radio-list\" [class.animate]=\"animation\">\r\n    <div class=\"add-risk-user-radio-list-head\">\r\n        <h3 class=\"add-risk-user-radio-list-title\">Select System Responsibility</h3>\r\n        <!-- <button class=\"add-risk-user-radio-list-close\" (click)=\"close()\">\r\n            <i class=\"icons\">&#xe90d;</i>\r\n        </button> -->\r\n    </div>\r\n    <div *ngIf=\"systemResponsibilityList.length > 0\" class=\"add-risk-user-radio-list-body\">\r\n        <!-- Responsible of showing the search bar -->\r\n        <div class=\"search-block\">\r\n            <i class=\"icons\">&#xe90b;</i>\r\n            <input type=\"text\" [(ngModel)]=\"search\" placeholder=\"Search Responsibility\" />\r\n        </div>\r\n\r\n        <!-- Responsible of showing the table content -->\r\n        <ng-container *ngIf=\"(systemResponsibilityList | filter:search) as searchList\">\r\n            <ul class=\"user-radio-list\" [class.full-height]=\"false\" *ngIf=\"searchList?.length >0 \">\r\n                <li *ngFor=\"let responsibility of systemResponsibilityList | filter:search\">\r\n                    <app-cs-radio (checkedEvent)=\"selectResponsibility(responsibility)\" [name]=\"'category'\"\r\n                        [checked]=\"selectedResponsibility && (selectedResponsibility[systemResponsibilityIdKey] == responsibility[systemResponsibilityIdKey])\">\r\n                        <span class=\"name\" placement=\"bottom-left\" type=\"black\"\r\n                            delay=\"0\" [tooltipMandatory]=\"false\" [appTooltip]=\"responsibility[responsibilityNameKey]\">\r\n                            {{responsibility[responsibilityNameKey]}}</span>\r\n                    </app-cs-radio>\r\n                </li>\r\n            </ul>\r\n            <app-no-data *ngIf=\"searchList?.length === 0\"\r\n                [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\"\r\n                [noDataText]=\"'No Responsibility Found'\"></app-no-data>\r\n\r\n        </ng-container>\r\n    </div>\r\n    <div  class=\"add-risk-user-radio-list-body\" *ngIf=\"systemResponsibilityList?.length === 0\">\r\n        <app-no-data \r\n        [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\"\r\n        [noDataText]=\"'No Responsibility Found'\"></app-no-data>\r\n    </div>\r\n\r\n    <!-- To show the selected selected responsibilities in the floating bar component  -->\r\n    <app-floating-bar [selectedData]=\"selectedResponsibility ? [selectedResponsibility]:[]\" [displayElementKey]=\"responsibilityNameKey\"\r\n        [elementId]=\"systemResponsibilityIdKey\" [singularText]=\"'Responsibility selected'\" [pluralText]=\"'Responsibilities selected'\" (closeEvent)=\"save()\"\r\n        (closeList)=\"close()\" (deleteEvent)=\"deleteEvent($event)\"\r\n        [isDisabled]=\"systemResponsibilityList.length === 0 || (selectedResponsibility ? [selectedResponsibility]:[]).length === 0\">\r\n    </app-floating-bar>\r\n\r\n\r\n</div>",
+                    styles: ["@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");::ng-deep .add-risk-user-radio-list{border-top:3px solid #1e5dd3;position:fixed;top:0;right:500px;bottom:0;left:0}::ng-deep .add-risk-user-radio-list-head{background:#fbfbfb;height:42px;padding:0 18px;display:flex;justify-content:space-between;align-items:center;border:1px solid #f1f1f1;border-right:none}::ng-deep .add-risk-user-radio-list-title{color:#161b2f;font-size:15px;font-weight:500;margin:0!important;padding:0;line-height:21px}::ng-deep .add-risk-user-radio-list-close{background:transparent;border:none;outline:none;cursor:pointer;color:#000;font-size:12px;display:inline-block;padding:0}::ng-deep .add-risk-user-radio-list-body{padding:24px 40px 24px 36px;height:calc(100vh - 112px)}::ng-deep .add-risk-user-radio-list-body.have-user{height:calc(100vh - 110px)}::ng-deep .add-risk-user-radio-list-body .search-block{position:relative}::ng-deep .add-risk-user-radio-list-body .search-block input{height:44px;line-height:24px;padding:10px 15px 10px 40px;outline:none;border:1px solid #7475763f;border-radius:4px;width:100%;font-size:14px;color:#747576}::ng-deep .add-risk-user-radio-list-body .search-block input:focus{border-color:#1e5dd3}::ng-deep .add-risk-user-radio-list-body .search-block i{position:absolute;left:17px;font-size:12px;font-weight:400;top:17px;pointer-events:none;color:#f1f1f1}::ng-deep .add-risk-user-radio-list-body .body-top{display:flex;justify-content:space-between;padding:16px 0 0}::ng-deep .add-risk-user-radio-list-body .body-top app-cs-checkbox{display:flex}::ng-deep .add-risk-user-radio-list-body .body-top app-cs-checkbox label span.value strong{color:#161b2f;font-size:14px;font-weight:600;white-space:nowrap}::ng-deep .add-risk-user-radio-list-body ul{padding:0;margin:0}::ng-deep .add-risk-user-radio-list-body ul.user-radio-list{display:flex;align-items:flex-start;flex-wrap:wrap;max-height:calc(100vh - 240px);overflow:auto;padding:16px 0 0}::ng-deep .add-risk-user-radio-list-body ul.user-radio-list.full-height{max-height:calc(100vh - 180px)}::ng-deep .add-risk-user-radio-list-body ul.user-radio-list li{width:50%;padding:8px 0;list-style:none}::ng-deep .add-risk-user-radio-list-body ul.user-radio-list li app-cs-checkbox,::ng-deep .add-risk-user-radio-list-body ul.user-radio-list li app-cs-radio{display:flex}::ng-deep .add-risk-user-radio-list-body ul.user-radio-list li app-cs-checkbox label,::ng-deep .add-risk-user-radio-list-body ul.user-radio-list li app-cs-radio label{width:100%}::ng-deep .add-risk-user-radio-list-body ul.user-radio-list li app-cs-checkbox label span.value,::ng-deep .add-risk-user-radio-list-body ul.user-radio-list li app-cs-radio label span.value{width:auto;justify-content:flex-start;flex-wrap:wrap}::ng-deep .add-risk-user-radio-list-body ul.user-radio-list li app-cs-checkbox label span.value span.name,::ng-deep .add-risk-user-radio-list-body ul.user-radio-list li app-cs-radio label span.value span.name{color:#161b2f;font-weight:400;line-height:20px;display:block;width:100%;font-size:13px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;padding-right:24px}::ng-deep .add-risk-user-radio-list-body ul.user-radio-list li app-cs-checkbox label span.value span.position,::ng-deep .add-risk-user-radio-list-body ul.user-radio-list li app-cs-radio label span.value span.position{border-radius:2px;display:inline-flex;height:12px;align-items:center;padding:0 2px;text-transform:uppercase;font-size:9px;line-height:12px;font-weight:500}::ng-deep .add-risk-user-radio-list-body ul.user-radio-list li app-cs-checkbox label span.value span.position.admin,::ng-deep .add-risk-user-radio-list-body ul.user-radio-list li app-cs-radio label span.value span.position.admin{background:#fff9e6;color:#f2bf19}::ng-deep .add-risk-user-radio-list-body ul.user-radio-list li app-cs-checkbox label span.value span.position.key-admin,::ng-deep .add-risk-user-radio-list-body ul.user-radio-list li app-cs-radio label span.value span.position.key-admin{background:#dff2e1;color:#34aa44}::ng-deep .add-risk-user-radio-list-body ul.user-radio-list li app-cs-checkbox label span.value span.position.manager,::ng-deep .add-risk-user-radio-list-body ul.user-radio-list li app-cs-radio label span.value span.position.manager{color:#4681ef;background:#d4e2fc}::ng-deep .add-risk-user-radio-list-body ul.user-radio-list li app-cs-checkbox label span.value span.position.executive,::ng-deep .add-risk-user-radio-list-body ul.user-radio-list li app-cs-radio label span.value span.position.executive{color:#747576;background:#f1f1f1}::ng-deep .add-risk-user-radio-list-body app-no-data{display:block;height:calc(100% - 100px)}::ng-deep .add-risk-user-radio-list.animate{-webkit-animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;z-index:-1}@-webkit-keyframes animate-right{0%{transform:translateX(100%)}to{transform:translateX(0)}}@keyframes animate-right{0%{transform:translateX(100%)}to{transform:translateX(0)}}"]
+                },] }
+    ];
+    SystemTaskSelectorComponent.ctorParameters = function () { return []; };
+    SystemTaskSelectorComponent.propDecorators = {
+        systemResponsibilityList: [{ type: i0.Input }],
+        selectedResponsibilities: [{ type: i0.Input }],
+        systemResponsibilityIdKey: [{ type: i0.Input }],
+        responsibilityNameKey: [{ type: i0.Input }],
+        saveSelectedList: [{ type: i0.Output }],
+        closeResponsibilityList: [{ type: i0.Output }]
+    };
+
     var VComplyWorkflowEngineModule = /** @class */ (function () {
         function VComplyWorkflowEngineModule() {
         }
@@ -29292,7 +29501,9 @@
                         FrameworkResponsibilityTableComponent,
                         FrameworkTableLoaderComponent,
                         ArrayConcatPipe,
-                        SpaceTrimPipe
+                        SpaceTrimPipe,
+                        TabSelector,
+                        SystemTaskSelectorComponent
                     ],
                     imports: [
                         forms.ReactiveFormsModule,
@@ -29415,201 +29626,203 @@
     exports.ɵds = FrameworkTableLoaderComponent;
     exports.ɵdt = ArrayConcatPipe;
     exports.ɵdu = SpaceTrimPipe;
-    exports.ɵdv = CreateAssessmentModule;
-    exports.ɵdw = CreateAssessmentContainerComponent;
-    exports.ɵdx = EditorService;
-    exports.ɵdy = DialogService;
-    exports.ɵdz = DialogModule;
+    exports.ɵdv = TabSelector;
+    exports.ɵdw = SystemTaskSelectorComponent;
+    exports.ɵdx = CreateAssessmentModule;
+    exports.ɵdy = CreateAssessmentContainerComponent;
+    exports.ɵdz = EditorService;
     exports.ɵe = Configurations;
-    exports.ɵea = DialogComponent;
-    exports.ɵeb = InsertionDirective;
-    exports.ɵec = DialogRef;
-    exports.ɵed = DialogConfig;
-    exports.ɵee = QuestionTypeComponent;
-    exports.ɵef = AddPageDetailsComponent;
-    exports.ɵeg = AssessmentSettingsComponent;
-    exports.ɵeh = ResultCriteriaService;
-    exports.ɵei = AddSegmentPopupComponent;
-    exports.ɵej = AddResponseSetPopupComponent;
-    exports.ɵek = EditorWrapperComponent;
-    exports.ɵel = ValidatorService;
-    exports.ɵem = QuickSettingsComponent;
-    exports.ɵen = SingleLineEditorComponent;
-    exports.ɵeo = ResponseSelectorComponent;
-    exports.ɵep = MoveComponent;
-    exports.ɵeq = LogicComponent;
-    exports.ɵer = AddLogicComponent;
-    exports.ɵes = ToolkitComponent;
-    exports.ɵet = ErrorMessagePipe;
-    exports.ɵeu = QuestionFilterPipe;
-    exports.ɵev = QuestionParserPipe;
-    exports.ɵew = FormatterPipe;
-    exports.ɵex = SettingAnonymousComponent;
-    exports.ɵey = SettingResponseSegmentComponent;
-    exports.ɵez = PageHeaderComponent;
+    exports.ɵea = DialogService;
+    exports.ɵeb = DialogModule;
+    exports.ɵec = DialogComponent;
+    exports.ɵed = InsertionDirective;
+    exports.ɵee = DialogRef;
+    exports.ɵef = DialogConfig;
+    exports.ɵeg = QuestionTypeComponent;
+    exports.ɵeh = AddPageDetailsComponent;
+    exports.ɵei = AssessmentSettingsComponent;
+    exports.ɵej = ResultCriteriaService;
+    exports.ɵek = AddSegmentPopupComponent;
+    exports.ɵel = AddResponseSetPopupComponent;
+    exports.ɵem = EditorWrapperComponent;
+    exports.ɵen = ValidatorService;
+    exports.ɵeo = QuickSettingsComponent;
+    exports.ɵep = SingleLineEditorComponent;
+    exports.ɵeq = ResponseSelectorComponent;
+    exports.ɵer = MoveComponent;
+    exports.ɵes = LogicComponent;
+    exports.ɵet = AddLogicComponent;
+    exports.ɵeu = ToolkitComponent;
+    exports.ɵev = ErrorMessagePipe;
+    exports.ɵew = QuestionFilterPipe;
+    exports.ɵex = QuestionParserPipe;
+    exports.ɵey = FormatterPipe;
+    exports.ɵez = SettingAnonymousComponent;
     exports.ɵf = WorkflowRiskComponent;
-    exports.ɵfa = WelcomeThankyouComponent;
-    exports.ɵfb = CurrentPageQuestionPipe;
-    exports.ɵfc = QuestionPageFilterPipe;
-    exports.ɵfd = TypeOfPipe;
-    exports.ɵfe = TooltipModule;
-    exports.ɵff = ToolTipDirective;
-    exports.ɵfg = PopoverModule;
-    exports.ɵfh = PopoverComponent;
-    exports.ɵfi = PopoverService;
-    exports.ɵfj = PopoverDirective;
-    exports.ɵfk = PopoverEventDirective;
-    exports.ɵfl = PopoverLongpressDirective;
-    exports.ɵfm = FormgroupModule$1;
-    exports.ɵfn = CsCheckboxComponent$1;
-    exports.ɵfo = CsRadioComponent$1;
-    exports.ɵfp = CsSwitchComponent$1;
-    exports.ɵfq = CsRadioGroupComponent$1;
-    exports.ɵfr = CsSelectComponent$2;
-    exports.ɵfs = PascalPipe$1;
-    exports.ɵft = CsCheckboxIndeterminateComponent$1;
-    exports.ɵfu = NoDataModule$1;
-    exports.ɵfv = NoDataComponent$1;
-    exports.ɵfw = BuildModule;
-    exports.ɵfx = MultipleChoiceComponent;
-    exports.ɵfy = CheckboxComponent$1;
-    exports.ɵfz = ImageChoiceComponent;
+    exports.ɵfa = SettingResponseSegmentComponent;
+    exports.ɵfb = PageHeaderComponent;
+    exports.ɵfc = WelcomeThankyouComponent;
+    exports.ɵfd = CurrentPageQuestionPipe;
+    exports.ɵfe = QuestionPageFilterPipe;
+    exports.ɵff = TypeOfPipe;
+    exports.ɵfg = TooltipModule;
+    exports.ɵfh = ToolTipDirective;
+    exports.ɵfi = PopoverModule;
+    exports.ɵfj = PopoverComponent;
+    exports.ɵfk = PopoverService;
+    exports.ɵfl = PopoverDirective;
+    exports.ɵfm = PopoverEventDirective;
+    exports.ɵfn = PopoverLongpressDirective;
+    exports.ɵfo = FormgroupModule$1;
+    exports.ɵfp = CsCheckboxComponent$1;
+    exports.ɵfq = CsRadioComponent$1;
+    exports.ɵfr = CsSwitchComponent$1;
+    exports.ɵfs = CsRadioGroupComponent$1;
+    exports.ɵft = CsSelectComponent$2;
+    exports.ɵfu = PascalPipe$1;
+    exports.ɵfv = CsCheckboxIndeterminateComponent$1;
+    exports.ɵfw = NoDataModule$1;
+    exports.ɵfx = NoDataComponent$1;
+    exports.ɵfy = BuildModule;
+    exports.ɵfz = MultipleChoiceComponent;
     exports.ɵg = AddRiskService;
-    exports.ɵga = StarRatingComponent;
-    exports.ɵgb = MatrixDropdownComponent;
-    exports.ɵgc = DropdownComponent;
-    exports.ɵgd = MatrixRatingScaleComponent;
-    exports.ɵge = RankingComponent;
-    exports.ɵgf = SliderComponent;
-    exports.ɵgg = MultipleTextboxComponent;
-    exports.ɵgh = DateTimeComponent;
-    exports.ɵgi = ChoiceSettingsPanelComponent;
-    exports.ɵgj = WelcomeComponent$1;
-    exports.ɵgk = ThankYouComponent$1;
-    exports.ɵgl = WeightageSelectorComponent;
-    exports.ɵgm = FormgroupModule;
-    exports.ɵgn = CsCheckboxComponent;
-    exports.ɵgo = CsRadioComponent;
-    exports.ɵgp = CsSwitchComponent;
-    exports.ɵgq = CsRadioGroupComponent;
-    exports.ɵgr = CsSelectComponent;
-    exports.ɵgs = PascalPipe;
-    exports.ɵgt = SearchMultiSelectPipe;
-    exports.ɵgu = ClickOutsideDirective;
-    exports.ɵgv = CsCheckboxIndeterminateComponent;
-    exports.ɵgw = PreviewModule;
-    exports.ɵgx = PreviewWrapperComponent;
-    exports.ɵgy = PreviewMultipleChoiceComponent;
-    exports.ɵgz = PreviewCheckboxComponent;
+    exports.ɵga = CheckboxComponent$1;
+    exports.ɵgb = ImageChoiceComponent;
+    exports.ɵgc = StarRatingComponent;
+    exports.ɵgd = MatrixDropdownComponent;
+    exports.ɵge = DropdownComponent;
+    exports.ɵgf = MatrixRatingScaleComponent;
+    exports.ɵgg = RankingComponent;
+    exports.ɵgh = SliderComponent;
+    exports.ɵgi = MultipleTextboxComponent;
+    exports.ɵgj = DateTimeComponent;
+    exports.ɵgk = ChoiceSettingsPanelComponent;
+    exports.ɵgl = WelcomeComponent$1;
+    exports.ɵgm = ThankYouComponent$1;
+    exports.ɵgn = WeightageSelectorComponent;
+    exports.ɵgo = FormgroupModule;
+    exports.ɵgp = CsCheckboxComponent;
+    exports.ɵgq = CsRadioComponent;
+    exports.ɵgr = CsSwitchComponent;
+    exports.ɵgs = CsRadioGroupComponent;
+    exports.ɵgt = CsSelectComponent;
+    exports.ɵgu = PascalPipe;
+    exports.ɵgv = SearchMultiSelectPipe;
+    exports.ɵgw = ClickOutsideDirective;
+    exports.ɵgx = CsCheckboxIndeterminateComponent;
+    exports.ɵgy = PreviewModule;
+    exports.ɵgz = PreviewWrapperComponent;
     exports.ɵh = WorkflowComplianceComponent;
-    exports.ɵha = PreviewImageChoiceComponent;
-    exports.ɵhb = PreviewStarRatingComponent;
-    exports.ɵhc = PreviewSingleTextboxComponent;
-    exports.ɵhd = PreviewCommentBoxComponent;
-    exports.ɵhe = PreviewMatrixDropdownComponent;
-    exports.ɵhf = PreviewDropdownComponent;
-    exports.ɵhg = PreviewMatrixRatingScaleComponent;
-    exports.ɵhh = PreviewRankingComponent;
-    exports.ɵhi = PreviewSliderComponent;
-    exports.ɵhj = PreviewMultipleTextboxComponent;
-    exports.ɵhk = PreviewDateTimeComponent;
-    exports.ɵhl = PreviewFileUploadComponent;
-    exports.ɵhm = WelcomeComponent;
-    exports.ɵhn = ThankYouComponent;
-    exports.ɵho = SelectModule;
-    exports.ɵhp = CsSelectComponent$1;
-    exports.ɵhq = SelectService;
-    exports.ɵhr = CsOptionComponent;
-    exports.ɵhs = AssessmentPreviewModule;
-    exports.ɵht = CheckboxQuestionComponent;
-    exports.ɵhu = DateTimeComponent$1;
-    exports.ɵhv = DeviceComponent;
-    exports.ɵhw = FileUploadComponent;
-    exports.ɵhx = PreviewComponent;
-    exports.ɵhy = PreviewContainerComponent;
-    exports.ɵhz = QuickSettingsComponent$1;
+    exports.ɵha = PreviewMultipleChoiceComponent;
+    exports.ɵhb = PreviewCheckboxComponent;
+    exports.ɵhc = PreviewImageChoiceComponent;
+    exports.ɵhd = PreviewStarRatingComponent;
+    exports.ɵhe = PreviewSingleTextboxComponent;
+    exports.ɵhf = PreviewCommentBoxComponent;
+    exports.ɵhg = PreviewMatrixDropdownComponent;
+    exports.ɵhh = PreviewDropdownComponent;
+    exports.ɵhi = PreviewMatrixRatingScaleComponent;
+    exports.ɵhj = PreviewRankingComponent;
+    exports.ɵhk = PreviewSliderComponent;
+    exports.ɵhl = PreviewMultipleTextboxComponent;
+    exports.ɵhm = PreviewDateTimeComponent;
+    exports.ɵhn = PreviewFileUploadComponent;
+    exports.ɵho = WelcomeComponent;
+    exports.ɵhp = ThankYouComponent;
+    exports.ɵhq = SelectModule;
+    exports.ɵhr = CsSelectComponent$1;
+    exports.ɵhs = SelectService;
+    exports.ɵht = CsOptionComponent;
+    exports.ɵhu = AssessmentPreviewModule;
+    exports.ɵhv = CheckboxQuestionComponent;
+    exports.ɵhw = DateTimeComponent$1;
+    exports.ɵhx = DeviceComponent;
+    exports.ɵhy = FileUploadComponent;
+    exports.ɵhz = PreviewComponent;
     exports.ɵi = ResponsibilityService;
-    exports.ɵia = RadioQuestionComponent;
-    exports.ɵib = SelectQuestionComponent;
-    exports.ɵic = SingleTextboxComponent;
-    exports.ɵid = PageHeaderComponent$1;
-    exports.ɵie = WelcomeComponent$2;
-    exports.ɵif = LogicQuestionsModule;
-    exports.ɵig = LogicMultipleChoiceComponent;
-    exports.ɵih = LogicCheckboxComponent;
-    exports.ɵii = LogicImageChoiceComponent;
-    exports.ɵij = LogicStarRatingComponent;
-    exports.ɵik = LogicSingleTextboxComponent;
-    exports.ɵil = LogicCommentBoxComponent;
-    exports.ɵim = LogicDropdownComponent;
-    exports.ɵin = LogicRankingComponent;
-    exports.ɵio = LogicSliderComponent;
-    exports.ɵip = LogicMultipleTextboxComponent;
-    exports.ɵiq = LogicDateTimeComponent;
-    exports.ɵir = EditorLoaderModule;
-    exports.ɵis = EditorLoaderComponent;
-    exports.ɵit = LineLoaderModule;
-    exports.ɵiu = LineLoaderComponent;
-    exports.ɵiv = VLoaderModule;
-    exports.ɵiw = LoaderComponent$1;
-    exports.ɵix = LoaderInlineComponent;
-    exports.ɵiy = SmileyDialogModule;
-    exports.ɵiz = SmileyDialogComponent;
+    exports.ɵia = PreviewContainerComponent;
+    exports.ɵib = QuickSettingsComponent$1;
+    exports.ɵic = RadioQuestionComponent;
+    exports.ɵid = SelectQuestionComponent;
+    exports.ɵie = SingleTextboxComponent;
+    exports.ɵif = PageHeaderComponent$1;
+    exports.ɵig = WelcomeComponent$2;
+    exports.ɵih = LogicQuestionsModule;
+    exports.ɵii = LogicMultipleChoiceComponent;
+    exports.ɵij = LogicCheckboxComponent;
+    exports.ɵik = LogicImageChoiceComponent;
+    exports.ɵil = LogicStarRatingComponent;
+    exports.ɵim = LogicSingleTextboxComponent;
+    exports.ɵin = LogicCommentBoxComponent;
+    exports.ɵio = LogicDropdownComponent;
+    exports.ɵip = LogicRankingComponent;
+    exports.ɵiq = LogicSliderComponent;
+    exports.ɵir = LogicMultipleTextboxComponent;
+    exports.ɵis = LogicDateTimeComponent;
+    exports.ɵit = EditorLoaderModule;
+    exports.ɵiu = EditorLoaderComponent;
+    exports.ɵiv = LineLoaderModule;
+    exports.ɵiw = LineLoaderComponent;
+    exports.ɵix = VLoaderModule;
+    exports.ɵiy = LoaderComponent$1;
+    exports.ɵiz = LoaderInlineComponent;
     exports.ɵj = FrequencyService;
-    exports.ɵja = SnackBarModule;
-    exports.ɵjb = SnackBarComponent;
-    exports.ɵjc = SmileyDialogInlineModule;
-    exports.ɵjd = SmileyDialogInlineComponent;
-    exports.ɵje = ClickOutsideModule;
-    exports.ɵjf = ClickOutsideDirective$1;
-    exports.ɵjg = PopoverHoverModule;
-    exports.ɵjh = PopoverHoverComponent;
-    exports.ɵji = PopoverHoverService;
-    exports.ɵjj = PopoverHoverDirective;
-    exports.ɵjk = PaginationModule$1;
-    exports.ɵjl = PaginationComponent$1;
-    exports.ɵjm = ActionDialogModule;
-    exports.ɵjn = DeleteComponent;
-    exports.ɵjo = DeactivateComponent;
-    exports.ɵjp = ActiveComponent;
-    exports.ɵjq = DuplicateComponent;
-    exports.ɵjr = CreateProgramUiModule;
-    exports.ɵjs = TabSelector;
-    exports.ɵjt = TickMarkComponent;
-    exports.ɵju = FormFieldComponent;
-    exports.ɵjv = FilePillComponent;
-    exports.ɵjw = InputWithPillComponent;
-    exports.ɵjx = SwitchComponent;
-    exports.ɵjy = InputTrimDirective;
-    exports.ɵjz = RoleListComponent;
+    exports.ɵja = SmileyDialogModule;
+    exports.ɵjb = SmileyDialogComponent;
+    exports.ɵjc = SnackBarModule;
+    exports.ɵjd = SnackBarComponent;
+    exports.ɵje = SmileyDialogInlineModule;
+    exports.ɵjf = SmileyDialogInlineComponent;
+    exports.ɵjg = ClickOutsideModule;
+    exports.ɵjh = ClickOutsideDirective$1;
+    exports.ɵji = PopoverHoverModule;
+    exports.ɵjj = PopoverHoverComponent;
+    exports.ɵjk = PopoverHoverService;
+    exports.ɵjl = PopoverHoverDirective;
+    exports.ɵjm = PaginationModule$1;
+    exports.ɵjn = PaginationComponent$1;
+    exports.ɵjo = ActionDialogModule;
+    exports.ɵjp = DeleteComponent;
+    exports.ɵjq = DeactivateComponent;
+    exports.ɵjr = ActiveComponent;
+    exports.ɵjs = DuplicateComponent;
+    exports.ɵjt = CreateProgramUiModule;
+    exports.ɵju = TabSelector$1;
+    exports.ɵjv = TickMarkComponent;
+    exports.ɵjw = FormFieldComponent;
+    exports.ɵjx = FilePillComponent;
+    exports.ɵjy = InputWithPillComponent;
+    exports.ɵjz = SwitchComponent;
     exports.ɵk = ProgramsService;
-    exports.ɵka = CheckboxComponent;
-    exports.ɵkb = VuiFloatingBarComponent;
-    exports.ɵkc = SearchPipe;
-    exports.ɵkd = UserGroupListComponent;
-    exports.ɵke = ListToIdPipe;
-    exports.ɵkf = RefDisconnectPipe;
-    exports.ɵkg = AssessmentPickerComponent;
-    exports.ɵkh = AssessmentService;
-    exports.ɵki = AssessmentLoaderComponent;
-    exports.ɵkj = AssessmentSubLoaderComponent;
-    exports.ɵkk = Pagination;
-    exports.ɵkl = DefineFrameworkListingComponent;
-    exports.ɵkm = FrameworkService;
-    exports.ɵkn = CustomFieldComponent;
-    exports.ɵko = LoaderComponent;
-    exports.ɵkp = LoaderFrameworkComponent;
-    exports.ɵkq = PagerPipe;
-    exports.ɵkr = CategoryAllSelectPipe;
-    exports.ɵks = SubCatIndeterPipe;
-    exports.ɵkt = SearchNewPipe;
-    exports.ɵku = SelectedAssessmentPipe;
-    exports.ɵkv = AssessmentResolverPipe;
-    exports.ɵkw = PaginationModule;
-    exports.ɵkx = PaginationComponent;
-    exports.ɵky = NoDataModule;
-    exports.ɵkz = NoDataComponent;
+    exports.ɵka = InputTrimDirective;
+    exports.ɵkb = RoleListComponent;
+    exports.ɵkc = CheckboxComponent;
+    exports.ɵkd = VuiFloatingBarComponent;
+    exports.ɵke = SearchPipe;
+    exports.ɵkf = UserGroupListComponent;
+    exports.ɵkg = ListToIdPipe;
+    exports.ɵkh = RefDisconnectPipe;
+    exports.ɵki = AssessmentPickerComponent;
+    exports.ɵkj = AssessmentService;
+    exports.ɵkk = AssessmentLoaderComponent;
+    exports.ɵkl = AssessmentSubLoaderComponent;
+    exports.ɵkm = Pagination;
+    exports.ɵkn = DefineFrameworkListingComponent;
+    exports.ɵko = FrameworkService;
+    exports.ɵkp = CustomFieldComponent;
+    exports.ɵkq = LoaderComponent;
+    exports.ɵkr = LoaderFrameworkComponent;
+    exports.ɵks = PagerPipe;
+    exports.ɵkt = CategoryAllSelectPipe;
+    exports.ɵku = SubCatIndeterPipe;
+    exports.ɵkv = SearchNewPipe;
+    exports.ɵkw = SelectedAssessmentPipe;
+    exports.ɵkx = AssessmentResolverPipe;
+    exports.ɵky = PaginationModule;
+    exports.ɵkz = PaginationComponent;
     exports.ɵl = WorkflowPolicyComponent;
+    exports.ɵla = NoDataModule;
+    exports.ɵlb = NoDataComponent;
     exports.ɵm = PolicyService;
     exports.ɵn = MoreOptionComponent;
     exports.ɵo = OwnerListComponent;