vcomply-workflow-engine 2.6.168 → 2.6.171

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

@@ -365,6 +365,7 @@
             this.auth = auth;
             this.isHostRefreshActive = true;
             this.isRCSelected = false;
+            this.featureFlag_groups = false;
             this.workflowType = '';
             this.mode = 'CREATE';
             this.id = '';
@@ -476,6 +477,7 @@
             this.fetchOrganizationDetails();
             console.log("addToProgramDetails ===>", this.addToProgramDetails);
             this.programSimplifyFlag = this.feature.isFeatureEnabled('ff_program_simplify');
+            this.featureFlag_groups = this.feature.isFeatureEnabled('ff_responsibility_groups');
         };
         WorkflowEngineContainerComponent.prototype.setNetworkListner = function () {
             var _this = this;
@@ -630,7 +632,10 @@
                     case 'assigneeTypeChange':
                         this.compliance.responsibilityForm.assignees.whoCanComplete = 'ALL';
                         this.compliance.responsibilityForm.assignees.list = this.compliance.setList(this.compliance.assigneesList, this.compliance.originalAssignee, 'employee_id');
-                        this.compliance.responsibilityForm.assigneeGroups.list = [];
+                        console.log("this.compliance.responsibilityForm ==>", this.compliance.responsibilityForm);
+                        if (this.featureFlag_groups) {
+                            this.compliance['responsibilityForm']['assigneeGroups']['list'] = [];
+                        }
                         break;
                     case 'sequential':
                         this.compliance['responsibilityForm']['reviewers']['sequentialWorkflow'] = true;
@@ -8061,8 +8066,9 @@
         FloatingBarComponent.prototype.ngOnInit = function () {
         };
         FloatingBarComponent.prototype.next = function () {
+            var _a;
             var selectedData;
-            if (this.selectedGroups.length > 0) {
+            if (((_a = this.selectedGroups) === null || _a === void 0 ? void 0 : _a.length) > 0) {
                 selectedData = { users: this.selectedData, groups: this.selectedGroups };
             }
             else {
@@ -13308,10 +13314,11 @@
             this.responsibilityType = 'singleTab';
             this.finalResponsibilities = 0;
             this.isConfirmClickable = false;
+            this.responsibilityMultiTabBulkUpload = [];
         }
         BulkResponsibilityViewComponent.prototype.ngOnChanges = function () {
             var _this = this;
-            var _a, _b, _c, _d, _e, _f, _g, _h;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
             if (this.responsibilityBulkUpload) {
                 this.finalResponsibilities = 0;
                 (_a = this.responsibilityBulkUpload) === null || _a === void 0 ? void 0 : _a.reports.forEach(function (risk) {
@@ -13320,9 +13327,19 @@
                     }
                 });
             }
+            // if(this.responsibilityType === 'multiTab') {
+            //   let responsibilityBulkUpload = this.bulkUpload?.frequency?.reports?.concat(this.bulkUpload?.ongoing?.reports , this.bulkUpload?.onCompletion?.reports);
+            //   this.isConfirmClickable = responsibilityBulkUpload?.some((responsibility: any) => responsibility.isValid); 
+            // }
             if (this.responsibilityType === 'multiTab') {
-                var responsibilityBulkUpload = (_d = (_c = (_b = this.bulkUpload) === null || _b === void 0 ? void 0 : _b.frequency) === null || _c === void 0 ? void 0 : _c.reports) === null || _d === void 0 ? void 0 : _d.concat((_f = (_e = this.bulkUpload) === null || _e === void 0 ? void 0 : _e.ongoing) === null || _f === void 0 ? void 0 : _f.reports, (_h = (_g = this.bulkUpload) === null || _g === void 0 ? void 0 : _g.onCompletion) === null || _h === void 0 ? void 0 : _h.reports);
-                this.isConfirmClickable = responsibilityBulkUpload === null || responsibilityBulkUpload === void 0 ? void 0 : responsibilityBulkUpload.some(function (responsibility) { return responsibility.isValid; });
+                this.responsibilityMultiTabBulkUpload = (_d = (_c = (_b = this.bulkUpload) === null || _b === void 0 ? void 0 : _b.frequency) === null || _c === void 0 ? void 0 : _c.reports) === null || _d === void 0 ? void 0 : _d.concat((_f = (_e = this.bulkUpload) === null || _e === void 0 ? void 0 : _e.ongoing) === null || _f === void 0 ? void 0 : _f.reports, (_h = (_g = this.bulkUpload) === null || _g === void 0 ? void 0 : _g.onCompletion) === null || _h === void 0 ? void 0 : _h.reports);
+                this.isConfirmClickable = (_j = this.responsibilityMultiTabBulkUpload) === null || _j === void 0 ? void 0 : _j.some(function (responsibility) { return responsibility.isValid; });
+                this.finalResponsibilities = 0;
+                (_k = this.responsibilityMultiTabBulkUpload) === null || _k === void 0 ? void 0 : _k.forEach(function (risk) {
+                    if (risk.isValid) {
+                        _this.finalResponsibilities += 1;
+                    }
+                });
             }
         };
         BulkResponsibilityViewComponent.prototype.ngOnInit = function () {
@@ -13339,7 +13356,7 @@
     BulkResponsibilityViewComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'app-bulk-responsibility-view',
-                    template: "\r\n<ng-container *ngIf=\"responsibilityType === 'singleTab'\">\r\n<div class=\"bulk-view\">\r\n    <div class=\"bulk-view-head\">\r\n        <h2 class=\"bulk-view-title\">\r\n            {{fileName}}\r\n        </h2>\r\n    </div>\r\n    <div class=\"bulk-view-body\">\r\n        <div class=\"exel-view\">\r\n            <div class=\"exel-view-row head\">\r\n                <div class=\"exel-view-column sl-no\">#</div>\r\n                <div class=\"exel-view-column\" *ngFor=\"let heading of responsibilityBulkUpload?.header\"\r\n                    [class.large]=\"heading && heading.startsWith('Inherent')\">\r\n                    <ng-container *ngIf=\"heading && !(heading.startsWith('Due')) && !(heading.startsWith('Oversight'))\">\r\n                        {{(heading.includes('*')? heading.replace('*', '') : heading)}}\r\n                        <span *ngIf=\"heading.includes('*')\" class=\"required\">*</span>\r\n                    </ng-container>\r\n                    <ng-container *ngIf=\"heading && heading.startsWith('Due')\">\r\n                        <div class=\"exel-view-row\">\r\n                            <div class=\"exel-view-column large\">Due Date</div>\r\n                        </div>\r\n                        <div class=\"exel-view-row multi-column\">\r\n                            <div class=\"exel-view-column\">Day</div>\r\n                            <div class=\"exel-view-column\">Month</div>\r\n                        </div>\r\n                    </ng-container>\r\n                    <ng-container *ngIf=\"heading && heading.startsWith('Oversight')\">\r\n                        <div class=\"exel-view-row\">\r\n                            <div class=\"exel-view-column large\">Oversight </div>\r\n                        </div>\r\n                        <div class=\"exel-view-row multi-column\">\r\n                            <div class=\"exel-view-column\">Always Notify</div>\r\n                            <div class=\"exel-view-column\">Notify on Failure</div>\r\n                        </div>\r\n                    </ng-container>\r\n                </div>\r\n\r\n            </div>\r\n            <div class=\"exel-view-row\" *ngFor=\"let report of responsibilityBulkUpload?.reports; let i = index\">\r\n                <div class=\"exel-view-column sl-no\" [class.error]=\"!report.isValid\">{{i+1}}</div>\r\n\r\n                <div class=\"exel-view-column\" [class.error]=\"!report.responsibilityName\">{{report?.responsibilityName}}\r\n                    <i *ngIf=\"!report?.responsibilityName\" class=\"icons\"\r\n                        [appTooltip]=\"'Enter a name for this responsibility.'\" placement=\"bottom-right\" type=\"white\"\r\n                        delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                </div>\r\n                <div class=\"exel-view-column\" [class.error]=\"report?.assignor && ((report?.assignor == report?.alwaysNotify) || (report?.assignor == report?.notifyOnFailure))\">\r\n                    {{report?.assignor}}\r\n                    <i *ngIf=\"((report?.assignor) && (report?.notifyOnFailure == report?.assignor||report?.alwaysNotify == report?.assignor))\"\r\n                        class=\"icons\"\r\n                        [appTooltip]=\"'The Overseer cannot also be the Assignor of this responsibility. Select another user as the Assignor.'\"\r\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                    </i>\r\n<!--\r\n                    <i *ngIf=\"((report?.assignor) && (report?.reviewer == report?.assignor))\"\r\n                        class=\"icons\"\r\n                        [appTooltip]=\"'The Reviewer cannot also be the Assignor of this responsibility. Select another user as the Assignor.'\"\r\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                    </i>     -->\r\n                </div>\r\n                <div class=\"exel-view-column\" [class.error]=\"!report?.assignee || ((report?.assignee == report?.reviewer)\r\n                || (report?.assignee == report?.alwaysNotify) || (report?.assignee == report?.notifyOnFailure)) || (!report?.isValidUser)\">\r\n                    {{report?.assignee}}\r\n\r\n                    <i *ngIf=\"((report?.assignee) && (report?.notifyOnFailure == report?.assignee||report?.alwaysNotify == report?.assignee))\"\r\n                        class=\"icons\"\r\n                        [appTooltip]=\"'The Overseer cannot also be the Assignee of this responsibility. Select another user as the Assignee.'\"\r\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                    </i>\r\n\r\n                    <i *ngIf=\"((report?.assignee) && (report?.reviewer == report?.assignee))\"\r\n                        class=\"icons\"\r\n                        [appTooltip]=\"'The Reviewer cannot also be the Assignee of this responsibility. Select another user as the Assignee.'\"\r\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                    </i>\r\n                    <i *ngIf=\"(!report?.assignee) || (!report?.isValidUser)\"\r\n                    class=\"icons\"\r\n                    [appTooltip]=\"'Select the user responsible for completing this responsibility. '\"\r\n                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                    </i>\r\n                </div>\r\n                <div class=\"exel-view-column\" id=\"resCategory\" *ngIf=\"report?.responsibilityCategory!==null\">{{report?.responsibilityCategory}}</div>\r\n                <div class=\"exel-view-column\" [class.error]=\"!report.frequency\">{{report?.frequency}}\r\n                    <i *ngIf=\"!report?.frequency\" class=\"icons\" [appTooltip]=\"'Select a frequency for this responsibility.'\"\r\n                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                </div>\r\n                <div class=\"exel-view-column multi-column\">\r\n                    <div class=\"exel-view-row\">\r\n                        <div class=\"exel-view-column\" [class.error]=\"!report.isValidDueDate\">{{report?.day}}\r\n                            <i *ngIf=\"!report?.isValidDueDate\" class=\"icons\" [appTooltip]=\"'Invalid Due Date.'\"\r\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                            <i *ngIf=\"report?.isPastDate\" class=\"icons\" [appTooltip]=\"'This date occurs in the past. Select a future date.'\"\r\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                        </div>\r\n                        <div class=\"exel-view-column\" [class.error]=\"!report.isValidDueDate\">{{report?.month}}\r\n                            <i *ngIf=\"!report?.isValidDueDate\" class=\"icons\" [appTooltip]=\"'Invalid Due Date.'\"\r\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                            <i *ngIf=\"report?.isPastDate\" class=\"icons\" [appTooltip]=\"'This date occurs in the past. Select a future date.'\"\r\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"exel-view-column\">{{report?.responsibilityWindow}}</div>\r\n                <div class=\"exel-view-column\">{{report?.failedAfter}}</div>\r\n                <div class=\"exel-view-column\">{{report?.reportClass}}</div>\r\n                <div class=\"exel-view-column\">{{report?.responsibilityCenter}}</div>\r\n                <div class=\"exel-view-column\"\r\n                    [class.error]=\"report?.reviewer && ((report?.reviewer == report?.alwaysNotify) ||  (report?.reviewer == report?.notifyOnFailure)\r\n                      || (report?.reviewer == report?.assignee) )\">\r\n                    {{report?.reviewer}}\r\n\r\n                    <i *ngIf=\"(report?.reviewer) && ((report?.reviewer == report?.alwaysNotify) || (report?.reviewer == report?.notifyOnFailure))\"\r\n                        class=\"icons\"\r\n                        [appTooltip]=\"'The Overseer cannot also be the Reviewer of this responsibility. Select another user as the Reviewer'\"\r\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                    </i>\r\n\r\n                    <i *ngIf=\"report?.reviewer && (report?.reviewer == report?.assignee)\" class=\"icons\"\r\n                        [appTooltip]=\"'The Assignee cannot also be the Reviewer of this responsibility. Select another user as the Reviewer.'\"\r\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                    </i>\r\n                    <!-- <i *ngIf=\"(report?.reviewer && report?.assignor)\"\r\n                        class=\"icons\"\r\n                        [appTooltip]=\"((report?.assignor)?'The Assignor cannot also be the Reviewer of this responsibility.':'You cannot be a Reviewer of this responsibility since you are the assignor. ') +'Select another user as the Reviewer'\"\r\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                    </i> -->\r\n                </div>\r\n                <div class=\"exel-view-column\">{{report?.reviewToBeCompletedWithin}}</div>\r\n                <div class=\"exel-view-column\">{{report?.reviewWillBeFailedAfter}}</div>\r\n                <div class=\"exel-view-column\">{{report?.formatForResponsibility}}</div>\r\n                <div class=\"exel-view-column\">{{report?.notes}}</div>\r\n                <div class=\"exel-view-column\">{{report?.documentEvidenceRequired}}</div>\r\n                <div class=\"exel-view-column multi-column\">\r\n                    <div class=\"exel-view-row\">\r\n                        <div class=\"exel-view-column\" [class.error]=\"report?.alwaysNotify && ((report?.alwaysNotify == report?.reviewer)\r\n                        || (report?.alwaysNotify == report?.assignor) || (report?.alwaysNotify == report?.assignee) ||\r\n                        ((!report?.assignor)&&(report?.alwaysNotify == defaultOwner)))\">\r\n                            {{report?.alwaysNotify}}\r\n                            <i *ngIf=\"(report?.alwaysNotify) && ((report?.reviewer == report?.alwaysNotify))\"\r\n                                class=\"icons\"\r\n                                [appTooltip]=\"'The Reviewer cannot also be the Overseer of this responsibility. Select another user as the Overseer.'\"\r\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                            </i>\r\n\r\n                            <i *ngIf=\"report?.alwaysNotify && (report?.alwaysNotify == report?.assignee)\" class=\"icons\"\r\n                                [appTooltip]=\"'The Assignee cannot also be the Overseer of this responsibility. Select another user as the Overseer'\"\r\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                            </i>\r\n                            <i *ngIf=\"((report?.alwaysNotify && report?.assignor) && (report?.alwaysNotify == report?.assignor)) ||((report?.alwaysNotify && (!report?.assignor)) && (report?.alwaysNotify == defaultOwner))\"\r\n                                class=\"icons\"\r\n                                [appTooltip]=\"((report?.assignor)?'The Assignor cannot also be the Overseer of this responsibility. ':'You cannot be an Overseer of this responsibility since you are the Assignor. ') +'Select another user as the Overseer.'\"\r\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                            </i>\r\n                        </div>\r\n                        <div class=\"exel-view-column\" [class.error]=\"report?.notifyOnFailure && ((report?.notifyOnFailure == report?.reviewer)\r\n                        || (report?.notifyOnFailure == report?.assignor) || (report?.notifyOnFailure == report?.assignee) ||\r\n                        ((!report?.assignor)&&(report?.notifyOnFailure == defaultOwner)))\">\r\n                            {{report?.notifyOnFailure}}\r\n                            <i *ngIf=\"(report?.notifyOnFailure) && ((report?.reviewer == report?.notifyOnFailure))\"\r\n                            class=\"icons\"\r\n                            [appTooltip]=\"'The Reviewer cannot also be the Overseer of this responsibility. Select another user as the Overseer.'\"\r\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                        </i>\r\n\r\n                        <i *ngIf=\"report?.notifyOnFailure && (report?.notifyOnFailure == report?.assignee)\" class=\"icons\"\r\n                            [appTooltip]=\"'The Assignee cannot also be the Overseer of this responsibility. Select another user as the Overseer'\"\r\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                        </i>\r\n                        <i *ngIf=\"((report?.notifyOnFailure && report?.assignor) && (report?.notifyOnFailure == report?.assignor)) ||((report?.notifyOnFailure && (!report?.assignor)) && (report?.notifyOnFailure == defaultOwner))\"\r\n                            class=\"icons\"\r\n                            [appTooltip]=\"((report?.assignor)?'The Assignor cannot also be the Overseer of this responsibility. ':'You cannot be an Overseer of this responsibility since you are the Assignor. ') +'Select another user as the Overseer.'\"\r\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                        </i>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n\r\n\r\n                <div class=\"exel-view-column\">{{report?.keyResponsibility}}</div>\r\n                <div class=\"exel-view-column\">{{report?.objective}}</div>\r\n\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"bulk-view-footer\">\r\n        <div class=\"left\">\r\n            <p>{{finalResponsibilities}} out of {{responsibilityBulkUpload?.reports?.length}} responsibilities will be\r\n                uploaded.</p>\r\n        </div>\r\n        <div class=\"right\">\r\n            <button (click)=\"close()\">Cancel</button>\r\n            <button (click)=\"submit()\" [disabled]=\"finalResponsibilities<1\" class=\"blue\">Confirm</button>\r\n        </div>\r\n    </div>\r\n</div>\r\n<app-loader  *ngIf=\"loader\"></app-loader>\r\n\r\n</ng-container>\r\n\r\n<!-- --------------------------------------------------------------------upward is new one-------------------- -->\r\n<app-loader  *ngIf=\"loader\"></app-loader>\r\n\r\n\r\n\r\n\r\n\r\n\r\n<!-- HTML for multiple tabs -->\r\n<ng-container *ngIf=\"responsibilityType === 'multiTab'\">\r\n    <div class=\"bulk-view\">\r\n        <div class=\"bulk-view-head\">\r\n            <h2 class=\"bulk-view-title\">\r\n                {{fileName}}\r\n            </h2>\r\n        </div>\r\n        <div class=\"bulk-view-body bulk\">\r\n            <div class=\"exel-view\">\r\n                <div class=\"exel-view-row head\">\r\n                    <div class=\"exel-view-column sl-no\">#</div>\r\n                    <div class=\"exel-view-column\">Responsibility Name <span class=\"required\">*</span></div>\r\n                    <div class=\"exel-view-column\" *ngIf=\"responsibilityBulkUpload?.header.includes('Program')\" [class.three-column]=\"true\">\r\n                        <div class=\"exel-view-row\">\r\n                            <div class=\"exel-view-column large\">Program</div>\r\n                        </div>\r\n                        <div class=\"exel-view-row multi-column\" [class.three-column]=\"true\">\r\n                            <div class=\"exel-view-column\">Program Type</div>\r\n                            <div class=\"exel-view-column\">Program</div>\r\n                            <div class=\"exel-view-column\">Program Category</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"exel-view-column\">Entrusted By</div>\r\n                    <div class=\"exel-view-column\" [class.two-column]=\"true\">\r\n                        <div class=\"exel-view-row\">\r\n                            <div class=\"exel-view-column large\">Entrust To <span class=\"required\">*</span></div>\r\n                        </div>\r\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\r\n                            <div class=\"exel-view-column\">Person<span class=\"required\">*</span></div>\r\n                            <div class=\"exel-view-column\">All or Any Persons</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"exel-view-column\">Key Responsibility?</div>\r\n                    <div class=\"exel-view-column\" [class.five-column]=\"tabType === 'frequency' || tabType === 'onCompletion'\" [class.three-column]=\"tabType === 'ongoing'\">\r\n                        <div class=\"exel-view-row\">\r\n                            <!-- <div class=\"exel-view-column large\">Frequency of Occurrence and Completion Window <span class=\"required\">*</span></div> -->\r\n                            <div class=\"exel-view-column large\">{{responsibilityBulkUpload?.header.includes('Program') ? responsibilityBulkUpload?.header[8]?.slice(0, -1) : responsibilityBulkUpload?.header[5]?.slice(0, -1)}}<span class=\"required\">*</span></div>\r\n                        </div>\r\n                        <div class=\"exel-view-row multi-column\" [class.five-column]=\"tabType === 'frequency' || tabType === 'onCompletion'\" [class.three-column]=\"tabType === 'ongoing'\">\r\n                            <ng-container *ngIf=\"tabType === 'frequency'\">\r\n                                <div class=\"exel-view-column\">Frequency <span class=\"required\">*</span></div>\r\n                                <div class=\"exel-view-column\">Due Date <span class=\"info-text\">(Day)</span></div>\r\n                                <div class=\"exel-view-column\">Due Date <span class=\"info-text\">(Month)</span></div>\r\n                                <div class=\"exel-view-column\">Start <span class=\"info-text\">(No. of days before the due date)</span></div>\r\n                                <div class=\"exel-view-column\">Fail <span class=\"info-text\" appTooltip=\"(No. of days after the due date. Select '0' if the responsibility must be completed on the due date)\" placement=\"bottom\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">(No. of days after the due date. Select \"0\" if the responsibility must be completed on the due date)</span></div>\r\n                            </ng-container>\r\n                            <ng-container *ngIf=\"tabType === 'ongoing'\">\r\n                                <div class=\"exel-view-column\">Ongoing Frequency <span class=\"required\">*</span></div>\r\n                                <div class=\"exel-view-column\">Set a Reminder?</div>\r\n                                <div class=\"exel-view-column\">Frequency of Reminder</div>\r\n                            </ng-container>\r\n                            <ng-container *ngIf=\"tabType === 'onCompletion'\">\r\n                                <div class=\"exel-view-column\">On Completion of Frequency <span class=\"required\">*</span></div>\r\n                                <div class=\"exel-view-column\">Parent Responsibility<span class=\"info-text\">(Day)</span></div>\r\n                                <div class=\"exel-view-column\">Due Date <span class=\"info-text\" appTooltip=\"(No. of days after completion of the Parent Responsibility)\" placement=\"bottom\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">(No. of days after completion of the Parent Responsibility)</span></div>\r\n                                <div class=\"exel-view-column\">Start <span class=\"info-text\" appTooltip=\"(No. of days before the due date)\" placement=\"bottom\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">(No. of days before the due date)</span></div>\r\n                                <div class=\"exel-view-column\">Fail <span class=\"info-text\" appTooltip=\"(No. of days after the due date. Select '0' if the responsibility must be completed on the due date)\" placement=\"bottom\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">(No. of days after the due date. Select \"0\" if the responsibility must be completed on the due date)</span></div>\r\n                            </ng-container>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"exel-view-column\">Responsibility Centre</div>\r\n                    <div class=\"exel-view-column\">Risk Class</div>\r\n                    <div class=\"exel-view-column\">Objective</div>\r\n                    <div class=\"exel-view-column\">Notes</div>\r\n                    <div class=\"exel-view-column\" [class.two-column]=\"true\">\r\n                        <div class=\"exel-view-row\">\r\n                            <div class=\"exel-view-column large\">Format & Evidence</div>\r\n                        </div>\r\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\" [class.three-column]=\"false\">\r\n                            <div class=\"exel-view-column\" [class.small-column]=\"true\">Format</div>\r\n                            <div class=\"exel-view-column\">Format For Responsibility (link)</div>\r\n                            <div class=\"exel-view-column\" [class.small-column]=\"true\">Evidence</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"exel-view-column\">Assessments or Checkpoints</div>\r\n                    <div class=\"exel-view-column\" [class.two-column]=\"true\">\r\n                        <div class=\"exel-view-row\">\r\n                            <div class=\"exel-view-column large\">Review of Responsibility</div>\r\n                        </div>\r\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\r\n                            <div class=\"exel-view-column\">Reviewer</div>\r\n                            <div class=\"exel-view-column\">Review Period (Days)</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"exel-view-column\" [class.two-column]=\"true\">\r\n                        <div class=\"exel-view-row\">\r\n                            <div class=\"exel-view-column large\">Overseer</div>\r\n                        </div>\r\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\r\n                            <div class=\"exel-view-column\">Always Notify</div>\r\n                            <div class=\"exel-view-column\">Notify on Failure</div>\r\n                        </div>\r\n                    </div>\r\n                    <!-- <div class=\"exel-view-column\">Overseer</div> -->\r\n    \r\n                </div>\r\n                <div class=\"exel-view-row\" *ngFor=\"let report of responsibilityBulkUpload?.reports; let i = index\">\r\n                    <div class=\"exel-view-column sl-no\" [class.error]=\"!report?.isValid\">{{i+1}}</div>\r\n                    <div class=\"exel-view-column\" [class.error]=\"!report.responsibilityName\">{{report?.responsibilityName}} <i *ngIf=\"!report.responsibilityName\" class=\"icons\" [appTooltip]=\"'Enter a name for this responsibility.'\"  placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i></div>\r\n                    <div class=\"exel-view-column multi-column\" *ngIf=\"responsibilityBulkUpload?.header.includes('Program')\" [class.error]=\"false\" [class.three-column]=\"true\">\r\n                        <div class=\"exel-view-row multi-column\" [class.three-column]=\"true\">\r\n                            <div class=\"exel-view-column\">{{report?.programType}}</div>\r\n                            <div class=\"exel-view-column\">{{report?.program}}</div>\r\n                            <div class=\"exel-view-column\">{{report?.programCategory}}</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"exel-view-column\" [class.error]=\"report?.assignor && (report?.notifyOnFailure == report?.assignor || report?.assignor == report?.overseer)\">{{report?.assignor}}\r\n                        <i *ngIf=\"((report?.assignor) && (report?.overseer == report?.assignor || report?.notifyOnFailure == report?.assignor))\"\r\n                            class=\"icons\"\r\n                            [appTooltip]=\"'The Overseer cannot also be the Assignor of this responsibility. Select another user as the Assignor.'\"\r\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                        </i>\r\n                        <!-- <i *ngIf=\"((report?.assignor) && (report?.reviewer === report?.assignor))\"\r\n                            class=\"icons\"\r\n                            [appTooltip]=\"'The Reviewer cannot also be the Assignor of this responsibility. Select another user as the Assignor.'\"\r\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                        </i> -->\r\n                    </div>\r\n                    <div class=\"exel-view-column multi-column\" [class.two-column]=\"true\">\r\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\r\n                            <div class=\"exel-view-column\" [class.error]=\"!report?.assignee || report?.assignee == report?.reviewer || !report?.userValidateWithProgram?.isValidAssignee || report?.overseer === report?.assignee  || (!report?.isValidUser)\">{{report?.assignee}}\r\n                                <!-- || (!report?.isValidUser) -->\r\n                                <i *ngIf=\"((report?.assignee) && (report?.overseer == report?.assignee))\"\r\n                                    class=\"icons\"\r\n                                    [appTooltip]=\"'The Overseer cannot also be the Assignee of this responsibility. Select another user as the Assignee.'\"\r\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                                </i>\r\n                                <i *ngIf=\"((report?.assignee) && (report?.reviewer == report?.assignee))\"\r\n                                    class=\"icons\"\r\n                                    [appTooltip]=\"'The Reviewer cannot also be the Assignee of this responsibility. Select another user as the Assignee.'\"\r\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                                </i>\r\n                                <i *ngIf=\"(!report?.assignee) || (!report?.isValidUser)\"\r\n                                    class=\"icons\"\r\n                                    [appTooltip]=\"'Select the user responsible for completing this responsibility. '\"\r\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                                </i>\r\n                                <i *ngIf=\"(report?.assignee) && !report?.userValidateWithProgram?.isValidAssignee\"\r\n                                    class=\"icons\"\r\n                                    [appTooltip]=\"'This user is not associated with the selected Program.'\"\r\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                                </i>\r\n                            </div>\r\n                            <div class=\"exel-view-column\">{{report?.assigneeType}}</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"exel-view-column\">{{report?.keyResponsibility}}</div>\r\n                    <div class=\"exel-view-column multi-column\" [class.five-column]=\"tabType === 'frequency' || tabType === 'onCompletion'\" [class.three-column]=\"tabType === 'ongoing'\">\r\n                        <ng-container *ngIf=\"tabType === 'frequency'\">\r\n                            <div class=\"exel-view-row multi-column\" [class.five-column]=\"true\">\r\n                                <div class=\"exel-view-column\" [class.error]=\"!report?.frequency\">{{report?.frequency}}\r\n                                    <i *ngIf=\"!report?.frequency\" class=\"icons\" [appTooltip]=\"'Select a frequency for this responsibility.'\"\r\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                                </div>\r\n                                <div class=\"exel-view-column\" [class.error]=\"!report?.validDate || report?.isPastDate\">{{report?.day}}\r\n                                    <i *ngIf=\"!report?.validDate\" class=\"icons\" [appTooltip]=\"'Invalid Due Date.'\"\r\n                                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                                    <i *ngIf=\"report?.isPastDate\" class=\"icons\" [appTooltip]=\"'This date occurs in the past. Select a future date.'\"\r\n                                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                                </div>\r\n                                <div class=\"exel-view-column\" [class.error]=\"!report?.validDate || report?.isPastDate\">{{report?.month}}\r\n                                    <i *ngIf=\"!report?.validDate\" class=\"icons\" [appTooltip]=\"'Invalid Due Date.'\"\r\n                                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                                    <i *ngIf=\"report?.isPastDate\" class=\"icons\" [appTooltip]=\"'This date occurs in the past. Select a future date.'\"\r\n                                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                                </div>\r\n                                <div class=\"exel-view-column\">{{report?.responsibilityWindow}}</div>\r\n                                <div class=\"exel-view-column\">{{report?.failedAfter}}</div>\r\n                            </div>\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"tabType === 'ongoing'\">\r\n                            <div class=\"exel-view-row multi-column\" [class.three-column]=\"true\">\r\n                                <div class=\"exel-view-column\" [class.error]=\"!report?.frequency\">{{report?.frequency}}\r\n                                    <i *ngIf=\"!report?.frequency\" class=\"icons\" [appTooltip]=\"'Select a frequency for this responsibility.'\"\r\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                                </div>\r\n                                <div class=\"exel-view-column\">{{report?.setReminder}}</div>\r\n                                <div class=\"exel-view-column\">{{report?.frequencyReminder}}</div>\r\n                            </div>\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"tabType === 'onCompletion'\">\r\n                            <div class=\"exel-view-row multi-column\" [class.five-column]=\"true\">\r\n                                <div class=\"exel-view-column\" [class.error]=\"!report?.frequency\">{{report?.frequency}}\r\n                                    <i *ngIf=\"!report?.frequency\" class=\"icons\" [appTooltip]=\"'Select a frequency for this responsibility.'\"\r\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                                </div>\r\n                                <div class=\"exel-view-column\" [class.error]=\"!report?.parentResponsibility\">{{report?.parentResponsibility}}\r\n                                    <i *ngIf=\"!report?.parentResponsibility\" class=\"icons\" [appTooltip]=\"'Select a parent responsibility on whose completion this responsibility will become active.'\"\r\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                                </div>\r\n                                <div class=\"exel-view-column\">{{report?.dueDate}}</div>\r\n                                <div class=\"exel-view-column\">{{report?.responsibilityWindow}}</div>\r\n                                <div class=\"exel-view-column\">{{report?.failedAfter}}</div>\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                    <div class=\"exel-view-column\">{{report?.responsibilityCenter}}</div>\r\n                    <div class=\"exel-view-column\">{{report?.reportClass}}</div>\r\n                    <div class=\"exel-view-column\">{{report?.objective}}</div>\r\n                    <div class=\"exel-view-column\">{{report?.notes}}</div>\r\n                    <div class=\"exel-view-column multi-column\" [class.two-column]=\"true\">\r\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\r\n                            <div class=\"exel-view-column multi-column\">\r\n                                <div class=\"exel-view-row multi-column\">\r\n                                    <div class=\"exel-view-column\" [class.small-column]=\"true\">{{report?.isFormat}}</div>\r\n                                    <div class=\"exel-view-column\">{{report?.formatForResponsibility}}</div>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"exel-view-column\" [class.small-column]=\"true\">{{report?.documentEvidenceRequired}}</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"exel-view-column\">{{report?.assessments}}</div>\r\n                    <div class=\"exel-view-column multi-column\" [class.two-column]=\"true\">\r\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\r\n                            <div class=\"exel-view-column\" [class.error]=\"report?.reviewer && ((report?.reviewer === report?.overseer)\r\n                            || (report?.reviewer === report?.assignee) || !report?.userValidateWithProgram?.isValidReviewer )\">{{report?.reviewer}}\r\n                        <i *ngIf=\"(report?.reviewer) && ((report?.reviewer === report?.overseer))\"\r\n                            class=\"icons\"\r\n                            [appTooltip]=\"'The Overseer cannot also be the Reviewer of this responsibility. Select another user as the Reviewer'\"\r\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                        </i>\r\n    \r\n                        <i *ngIf=\"report?.reviewer && (report?.reviewer === report?.assignee)\" class=\"icons\"\r\n                            [appTooltip]=\"'The Assignee cannot also be the Reviewer of this responsibility. Select another user as the Reviewer.'\"\r\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                        </i>\r\n                        <!-- <i *ngIf=\"(report?.reviewer && report?.reviewer === report?.assignor)\"\r\n                            class=\"icons\"\r\n                            [appTooltip]=\"((report?.assignor)?'The Assignor cannot also be the Reviewer of this responsibility.':'You cannot be a Reviewer of this responsibility since you are the assignor. ') +'Select another user as the Reviewer'\"\r\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                        </i> -->\r\n                        <i *ngIf=\"report?.reviewer && !report?.userValidateWithProgram?.isValidReviewer\"\r\n                            class=\"icons\"\r\n                            [appTooltip]=\"'This user is not associated with the selected Program.'\"\r\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                        </i>\r\n                            </div>\r\n                            <div class=\"exel-view-column\">{{report?.reviewToBeCompletedWithin}}</div>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <div class=\"exel-view-column multi-column\" [class.two-column]=\"true\">\r\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\r\n                            <div class=\"exel-view-column\" [class.error]=\"report?.overseer && ((report?.reviewer === report?.overseer)\r\n                            || (report?.overseer === report?.assignee) || (report?.overseer === report?.assignor) || !report?.userValidateWithProgram?.isValidOverseer )\">\r\n                            {{report?.overseer}}\r\n                                <i *ngIf=\"(report?.overseer) && ((report?.reviewer === report?.overseer))\"\r\n                                class=\"icons\"\r\n                                [appTooltip]=\"'The Reviewer cannot also be the Overseer of this responsibility. Select another user as the Overseer.'\"\r\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                                </i>\r\n\r\n                                <i *ngIf=\"report?.overseer && (report?.overseer === report?.assignee)\" class=\"icons\"\r\n                                    [appTooltip]=\"'The Assignee cannot also be the Overseer of this responsibility. Select another user as the Overseer'\"\r\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                                </i>\r\n                                <i *ngIf=\"((report?.overseer && report?.assignor) && (report?.overseer == report?.assignor)) ||((report?.overseer && (!report?.assignor)) && (report?.overseer == defaultOwner))\"\r\n                                    class=\"icons\"\r\n                                    [appTooltip]=\"((report?.assignor)?'The Assignor cannot also be the Overseer of this responsibility. ':'You cannot be an Overseer of this responsibility since you are the Assignor. ') +'Select another user as the Overseer.'\"\r\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                                </i>\r\n                                <i *ngIf=\"(report?.overseer) && !report?.userValidateWithProgram?.isValidOverseer\"\r\n                                    class=\"icons\"\r\n                                    [appTooltip]=\"'This user is not associated with the selected Program.'\"\r\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                                </i>\r\n                            </div>\r\n                            <div class=\"exel-view-column\" [class.error]=\"report?.notifyOnFailure && ((report?.reviewer === report?.notifyOnFailure)\r\n                            || (report?.notifyOnFailure === report?.assignee) || ((report?.notifyOnFailure && report?.assignor) && (report?.notifyOnFailure == report?.assignor)) ||((report?.notifyOnFailure && (!report?.assignor)) && (report?.notifyOnFailure == defaultOwner)) || !report?.userValidateWithProgram?.isValidNotifyOnFailure )\">\r\n                                {{report?.notifyOnFailure}}\r\n                                <i *ngIf=\"(report?.notifyOnFailure) && ((report?.reviewer === report?.notifyOnFailure))\"\r\n                                    class=\"icons\"\r\n                                    [appTooltip]=\"'The Reviewer cannot also be the Overseer of this responsibility. Select another user as the Overseer.'\"\r\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                                </i>\r\n\r\n                                <i *ngIf=\"report?.notifyOnFailure && (report?.notifyOnFailure === report?.assignee)\" class=\"icons\"\r\n                                    [appTooltip]=\"'The Assignee cannot also be the Overseer of this responsibility. Select another user as the Overseer'\"\r\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                                </i>\r\n                                <i *ngIf=\"((report?.notifyOnFailure && report?.assignor) && (report?.notifyOnFailure == report?.assignor)) ||((report?.notifyOnFailure && (!report?.assignor)) && (report?.notifyOnFailure == defaultOwner))\"\r\n                                    class=\"icons\"\r\n                                    [appTooltip]=\"((report?.assignor)?'The Assignor cannot also be the Overseer of this responsibility. ':'You cannot be an Overseer of this responsibility since you are the Assignor. ') +'Select another user as the Overseer.'\"\r\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                                </i>\r\n                                <i *ngIf=\"(report?.notifyOnFailure) && !report?.userValidateWithProgram?.isValidNotifyOnFailure\"\r\n                                    class=\"icons\"\r\n                                    [appTooltip]=\"'This user is not associated with the selected Program.'\"\r\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                                </i>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    \r\n                    <!-- <div class=\"exel-view-column\" [class.error]=\"(report?.overseer) && ((report?.overseer === report?.assignee) ||(report?.reviewer === report?.overseer) || (report?.overseer == report?.assignor) || (!report?.userValidateWithProgram?.isValidOverseer))\">\r\n                        {{report?.overseer}}\r\n                        <i *ngIf=\"(report?.overseer) && ((report?.reviewer === report?.overseer))\"\r\n                            class=\"icons\"\r\n                            [appTooltip]=\"'The Reviewer cannot also be the Overseer of this responsibility. Select another user as the Overseer.'\"\r\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                        </i>\r\n\r\n                        <i *ngIf=\"report?.overseer && (report?.overseer === report?.assignee)\" class=\"icons\"\r\n                            [appTooltip]=\"'The Assignee cannot also be the Overseer of this responsibility. Select another user as the Overseer'\"\r\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                        </i>\r\n                        <i *ngIf=\"((report?.overseer) && (report?.overseer == report?.assignor))\"\r\n                            class=\"icons\"\r\n                            [appTooltip]=\"((report?.assignor)?'The Assignor cannot also be the Overseer of this responsibility. ':'You cannot be an Overseer of this responsibility since you are the Assignor. ') +'Select another user as the Overseer.'\"\r\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                        </i>\r\n                        <i *ngIf=\"!report?.userValidateWithProgram?.isValidOverseer\"\r\n                            class=\"icons\"\r\n                            [appTooltip]=\"'Selected user is not a valid overseer for selected program.'\"\r\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                        </i>\r\n                    </div> -->\r\n                </div>\r\n    \r\n    \r\n    \r\n    \r\n    \r\n    \r\n                <!-- ------------------------------------------------old code dynamic------------------------------------------------- -->\r\n    \r\n                <!-- *ngFor=\"let report of responsibilityBulkUpload?.reports; let i = index\" -->\r\n            </div>\r\n        </div>\r\n        <div class=\"bulk-view-option\">\r\n            <button *ngIf=\"bulkUpload?.frequency?.reports?.length\" [class.active]=\"tabType === 'frequency'\" (click)=\"selectedTab.emit('frequency')\">Frequency Responsibilities</button>\r\n            <button *ngIf=\"bulkUpload?.ongoing?.reports?.length\" [class.active]=\"tabType === 'ongoing'\" (click)=\"selectedTab.emit('ongoing')\">Ongoing Responsibilities</button>\r\n            <button *ngIf=\"bulkUpload?.onCompletion?.reports?.length\" [class.active]=\"tabType === 'onCompletion'\" (click)=\"selectedTab.emit('onCompletion')\">On Completion Responsibilities</button>\r\n        </div>\r\n        <div class=\"bulk-view-footer\">\r\n            <div class=\"left\">\r\n                <p>{{finalResponsibilities}} out of {{responsibilityBulkUpload?.reports?.length}} responsibilities will be\r\n                    uploaded.</p>\r\n            </div>\r\n            <div class=\"right\">\r\n                <button (click)=\"close()\">Cancel</button>\r\n                <button (click)=\"submit()\" [disabled]=\"!isConfirmClickable\" class=\"blue\">Confirm</button>\r\n                <!-- finalResponsibilities < 1 -->\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <app-loader  *ngIf=\"loader\"></app-loader>\r\n    \r\n</ng-container>\r\n    \r\n    <!-- --------------------------------------------------------------------upward is new one-------------------- -->",
+                    template: "\r\n<ng-container *ngIf=\"responsibilityType === 'singleTab'\">\r\n<div class=\"bulk-view\">\r\n    <div class=\"bulk-view-head\">\r\n        <h2 class=\"bulk-view-title\">\r\n            {{fileName}}\r\n        </h2>\r\n    </div>\r\n    <div class=\"bulk-view-body\">\r\n        <div class=\"exel-view\">\r\n            <div class=\"exel-view-row head\">\r\n                <div class=\"exel-view-column sl-no\">#</div>\r\n                <div class=\"exel-view-column\" *ngFor=\"let heading of responsibilityBulkUpload?.header\"\r\n                    [class.large]=\"heading && heading.startsWith('Inherent')\">\r\n                    <ng-container *ngIf=\"heading && !(heading.startsWith('Due')) && !(heading.startsWith('Oversight'))\">\r\n                        {{(heading.includes('*')? heading.replace('*', '') : heading)}}\r\n                        <span *ngIf=\"heading.includes('*')\" class=\"required\">*</span>\r\n                    </ng-container>\r\n                    <ng-container *ngIf=\"heading && heading.startsWith('Due')\">\r\n                        <div class=\"exel-view-row\">\r\n                            <div class=\"exel-view-column large\">Due Date</div>\r\n                        </div>\r\n                        <div class=\"exel-view-row multi-column\">\r\n                            <div class=\"exel-view-column\">Day</div>\r\n                            <div class=\"exel-view-column\">Month</div>\r\n                        </div>\r\n                    </ng-container>\r\n                    <ng-container *ngIf=\"heading && heading.startsWith('Oversight')\">\r\n                        <div class=\"exel-view-row\">\r\n                            <div class=\"exel-view-column large\">Oversight </div>\r\n                        </div>\r\n                        <div class=\"exel-view-row multi-column\">\r\n                            <div class=\"exel-view-column\">Always Notify</div>\r\n                            <div class=\"exel-view-column\">Notify on Failure</div>\r\n                        </div>\r\n                    </ng-container>\r\n                </div>\r\n\r\n            </div>\r\n            <div class=\"exel-view-row\" *ngFor=\"let report of responsibilityBulkUpload?.reports; let i = index\">\r\n                <div class=\"exel-view-column sl-no\" [class.error]=\"!report.isValid\">{{i+1}}</div>\r\n\r\n                <div class=\"exel-view-column\" [class.error]=\"!report.responsibilityName\">{{report?.responsibilityName}}\r\n                    <i *ngIf=\"!report?.responsibilityName\" class=\"icons\"\r\n                        [appTooltip]=\"'Enter a name for this responsibility.'\" placement=\"bottom-right\" type=\"white\"\r\n                        delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                </div>\r\n                <div class=\"exel-view-column\" [class.error]=\"report?.assignor && ((report?.assignor == report?.alwaysNotify) || (report?.assignor == report?.notifyOnFailure))\">\r\n                    {{report?.assignor}}\r\n                    <i *ngIf=\"((report?.assignor) && (report?.notifyOnFailure == report?.assignor||report?.alwaysNotify == report?.assignor))\"\r\n                        class=\"icons\"\r\n                        [appTooltip]=\"'The Overseer cannot also be the Assignor of this responsibility. Select another user as the Assignor.'\"\r\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                    </i>\r\n<!--\r\n                    <i *ngIf=\"((report?.assignor) && (report?.reviewer == report?.assignor))\"\r\n                        class=\"icons\"\r\n                        [appTooltip]=\"'The Reviewer cannot also be the Assignor of this responsibility. Select another user as the Assignor.'\"\r\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                    </i>     -->\r\n                </div>\r\n                <div class=\"exel-view-column\" [class.error]=\"!report?.assignee || ((report?.assignee == report?.reviewer)\r\n                || (report?.assignee == report?.alwaysNotify) || (report?.assignee == report?.notifyOnFailure)) || (!report?.isValidUser)\">\r\n                    {{report?.assignee}}\r\n\r\n                    <i *ngIf=\"((report?.assignee) && (report?.notifyOnFailure == report?.assignee||report?.alwaysNotify == report?.assignee))\"\r\n                        class=\"icons\"\r\n                        [appTooltip]=\"'The Overseer cannot also be the Assignee of this responsibility. Select another user as the Assignee.'\"\r\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                    </i>\r\n\r\n                    <i *ngIf=\"((report?.assignee) && (report?.reviewer == report?.assignee))\"\r\n                        class=\"icons\"\r\n                        [appTooltip]=\"'The Reviewer cannot also be the Assignee of this responsibility. Select another user as the Assignee.'\"\r\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                    </i>\r\n                    <i *ngIf=\"(!report?.assignee) || (!report?.isValidUser)\"\r\n                    class=\"icons\"\r\n                    [appTooltip]=\"'Select the user responsible for completing this responsibility. '\"\r\n                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                    </i>\r\n                </div>\r\n                <div class=\"exel-view-column\" id=\"resCategory\" *ngIf=\"report?.responsibilityCategory!==null\">{{report?.responsibilityCategory}}</div>\r\n                <div class=\"exel-view-column\" [class.error]=\"!report.frequency\">{{report?.frequency}}\r\n                    <i *ngIf=\"!report?.frequency\" class=\"icons\" [appTooltip]=\"'Select a frequency for this responsibility.'\"\r\n                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                </div>\r\n                <div class=\"exel-view-column multi-column\">\r\n                    <div class=\"exel-view-row\">\r\n                        <div class=\"exel-view-column\" [class.error]=\"!report.isValidDueDate\">{{report?.day}}\r\n                            <i *ngIf=\"!report?.isValidDueDate\" class=\"icons\" [appTooltip]=\"'Invalid Due Date.'\"\r\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                            <i *ngIf=\"report?.isPastDate\" class=\"icons\" [appTooltip]=\"'This date occurs in the past. Select a future date.'\"\r\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                        </div>\r\n                        <div class=\"exel-view-column\" [class.error]=\"!report.isValidDueDate\">{{report?.month}}\r\n                            <i *ngIf=\"!report?.isValidDueDate\" class=\"icons\" [appTooltip]=\"'Invalid Due Date.'\"\r\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                            <i *ngIf=\"report?.isPastDate\" class=\"icons\" [appTooltip]=\"'This date occurs in the past. Select a future date.'\"\r\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"exel-view-column\">{{report?.responsibilityWindow}}</div>\r\n                <div class=\"exel-view-column\">{{report?.failedAfter}}</div>\r\n                <div class=\"exel-view-column\">{{report?.reportClass}}</div>\r\n                <div class=\"exel-view-column\">{{report?.responsibilityCenter}}</div>\r\n                <div class=\"exel-view-column\"\r\n                    [class.error]=\"report?.reviewer && ((report?.reviewer == report?.alwaysNotify) ||  (report?.reviewer == report?.notifyOnFailure)\r\n                      || (report?.reviewer == report?.assignee) )\">\r\n                    {{report?.reviewer}}\r\n\r\n                    <i *ngIf=\"(report?.reviewer) && ((report?.reviewer == report?.alwaysNotify) || (report?.reviewer == report?.notifyOnFailure))\"\r\n                        class=\"icons\"\r\n                        [appTooltip]=\"'The Overseer cannot also be the Reviewer of this responsibility. Select another user as the Reviewer'\"\r\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                    </i>\r\n\r\n                    <i *ngIf=\"report?.reviewer && (report?.reviewer == report?.assignee)\" class=\"icons\"\r\n                        [appTooltip]=\"'The Assignee cannot also be the Reviewer of this responsibility. Select another user as the Reviewer.'\"\r\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                    </i>\r\n                    <!-- <i *ngIf=\"(report?.reviewer && report?.assignor)\"\r\n                        class=\"icons\"\r\n                        [appTooltip]=\"((report?.assignor)?'The Assignor cannot also be the Reviewer of this responsibility.':'You cannot be a Reviewer of this responsibility since you are the assignor. ') +'Select another user as the Reviewer'\"\r\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                    </i> -->\r\n                </div>\r\n                <div class=\"exel-view-column\">{{report?.reviewToBeCompletedWithin}}</div>\r\n                <div class=\"exel-view-column\">{{report?.reviewWillBeFailedAfter}}</div>\r\n                <div class=\"exel-view-column\">{{report?.formatForResponsibility}}</div>\r\n                <div class=\"exel-view-column\">{{report?.notes}}</div>\r\n                <div class=\"exel-view-column\">{{report?.documentEvidenceRequired}}</div>\r\n                <div class=\"exel-view-column multi-column\">\r\n                    <div class=\"exel-view-row\">\r\n                        <div class=\"exel-view-column\" [class.error]=\"report?.alwaysNotify && ((report?.alwaysNotify == report?.reviewer)\r\n                        || (report?.alwaysNotify == report?.assignor) || (report?.alwaysNotify == report?.assignee) ||\r\n                        ((!report?.assignor)&&(report?.alwaysNotify == defaultOwner)))\">\r\n                            {{report?.alwaysNotify}}\r\n                            <i *ngIf=\"(report?.alwaysNotify) && ((report?.reviewer == report?.alwaysNotify))\"\r\n                                class=\"icons\"\r\n                                [appTooltip]=\"'The Reviewer cannot also be the Overseer of this responsibility. Select another user as the Overseer.'\"\r\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                            </i>\r\n\r\n                            <i *ngIf=\"report?.alwaysNotify && (report?.alwaysNotify == report?.assignee)\" class=\"icons\"\r\n                                [appTooltip]=\"'The Assignee cannot also be the Overseer of this responsibility. Select another user as the Overseer'\"\r\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                            </i>\r\n                            <i *ngIf=\"((report?.alwaysNotify && report?.assignor) && (report?.alwaysNotify == report?.assignor)) ||((report?.alwaysNotify && (!report?.assignor)) && (report?.alwaysNotify == defaultOwner))\"\r\n                                class=\"icons\"\r\n                                [appTooltip]=\"((report?.assignor)?'The Assignor cannot also be the Overseer of this responsibility. ':'You cannot be an Overseer of this responsibility since you are the Assignor. ') +'Select another user as the Overseer.'\"\r\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                            </i>\r\n                        </div>\r\n                        <div class=\"exel-view-column\" [class.error]=\"report?.notifyOnFailure && ((report?.notifyOnFailure == report?.reviewer)\r\n                        || (report?.notifyOnFailure == report?.assignor) || (report?.notifyOnFailure == report?.assignee) ||\r\n                        ((!report?.assignor)&&(report?.notifyOnFailure == defaultOwner)))\">\r\n                            {{report?.notifyOnFailure}}\r\n                            <i *ngIf=\"(report?.notifyOnFailure) && ((report?.reviewer == report?.notifyOnFailure))\"\r\n                            class=\"icons\"\r\n                            [appTooltip]=\"'The Reviewer cannot also be the Overseer of this responsibility. Select another user as the Overseer.'\"\r\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                        </i>\r\n\r\n                        <i *ngIf=\"report?.notifyOnFailure && (report?.notifyOnFailure == report?.assignee)\" class=\"icons\"\r\n                            [appTooltip]=\"'The Assignee cannot also be the Overseer of this responsibility. Select another user as the Overseer'\"\r\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                        </i>\r\n                        <i *ngIf=\"((report?.notifyOnFailure && report?.assignor) && (report?.notifyOnFailure == report?.assignor)) ||((report?.notifyOnFailure && (!report?.assignor)) && (report?.notifyOnFailure == defaultOwner))\"\r\n                            class=\"icons\"\r\n                            [appTooltip]=\"((report?.assignor)?'The Assignor cannot also be the Overseer of this responsibility. ':'You cannot be an Overseer of this responsibility since you are the Assignor. ') +'Select another user as the Overseer.'\"\r\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                        </i>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n\r\n\r\n                <div class=\"exel-view-column\">{{report?.keyResponsibility}}</div>\r\n                <div class=\"exel-view-column\">{{report?.objective}}</div>\r\n\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"bulk-view-footer\">\r\n        <div class=\"left\">\r\n            <p>{{finalResponsibilities}} out of {{responsibilityBulkUpload?.reports?.length}} responsibilities will be\r\n                uploaded.</p>\r\n        </div>\r\n        <div class=\"right\">\r\n            <button (click)=\"close()\">Cancel</button>\r\n            <button (click)=\"submit()\" [disabled]=\"finalResponsibilities<1\" class=\"blue\">Confirm</button>\r\n        </div>\r\n    </div>\r\n</div>\r\n<app-loader  *ngIf=\"loader\"></app-loader>\r\n\r\n</ng-container>\r\n\r\n<!-- --------------------------------------------------------------------upward is new one-------------------- -->\r\n<app-loader  *ngIf=\"loader\"></app-loader>\r\n\r\n\r\n\r\n\r\n\r\n\r\n<!-- HTML for multiple tabs -->\r\n<ng-container *ngIf=\"responsibilityType === 'multiTab'\">\r\n    <div class=\"bulk-view\">\r\n        <div class=\"bulk-view-head\">\r\n            <h2 class=\"bulk-view-title\">\r\n                {{fileName}}\r\n            </h2>\r\n        </div>\r\n        <div class=\"bulk-view-body bulk\">\r\n            <div class=\"exel-view\">\r\n                <div class=\"exel-view-row head\">\r\n                    <div class=\"exel-view-column sl-no\">#</div>\r\n                    <div class=\"exel-view-column\">Responsibility Name <span class=\"required\">*</span></div>\r\n                    <div class=\"exel-view-column\" *ngIf=\"responsibilityBulkUpload?.header.includes('Program')\" [class.three-column]=\"true\">\r\n                        <div class=\"exel-view-row\">\r\n                            <div class=\"exel-view-column large\">Program</div>\r\n                        </div>\r\n                        <div class=\"exel-view-row multi-column\" [class.three-column]=\"true\">\r\n                            <div class=\"exel-view-column\">Program Type</div>\r\n                            <div class=\"exel-view-column\">Program</div>\r\n                            <div class=\"exel-view-column\">Program Category</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"exel-view-column\">Entrusted By</div>\r\n                    <div class=\"exel-view-column\" [class.two-column]=\"true\">\r\n                        <div class=\"exel-view-row\">\r\n                            <div class=\"exel-view-column large\">Entrust To <span class=\"required\">*</span></div>\r\n                        </div>\r\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\r\n                            <div class=\"exel-view-column\">Person or Group<span class=\"required\">*</span></div>\r\n                            <div class=\"exel-view-column\">All or Any Persons</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"exel-view-column\">Key Responsibility?</div>\r\n                    <div class=\"exel-view-column\" [class.five-column]=\"tabType === 'frequency' || tabType === 'onCompletion'\" [class.three-column]=\"tabType === 'ongoing'\">\r\n                        <div class=\"exel-view-row\">\r\n                            <!-- <div class=\"exel-view-column large\">Frequency of Occurrence and Completion Window <span class=\"required\">*</span></div> -->\r\n                            <div class=\"exel-view-column large\">{{responsibilityBulkUpload?.header.includes('Program') ? responsibilityBulkUpload?.header[8]?.slice(0, -1) : responsibilityBulkUpload?.header[5]?.slice(0, -1)}}<span class=\"required\">*</span></div>\r\n                        </div>\r\n                        <div class=\"exel-view-row multi-column\" [class.five-column]=\"tabType === 'frequency' || tabType === 'onCompletion'\" [class.three-column]=\"tabType === 'ongoing'\">\r\n                            <ng-container *ngIf=\"tabType === 'frequency'\">\r\n                                <div class=\"exel-view-column\">Frequency <span class=\"required\">*</span></div>\r\n                                <div class=\"exel-view-column\">Due Date <span class=\"info-text\">(Day)</span></div>\r\n                                <div class=\"exel-view-column\">Due Date <span class=\"info-text\">(Month)</span></div>\r\n                                <div class=\"exel-view-column\">Start <span class=\"info-text\">(No. of days before the due date)</span></div>\r\n                                <div class=\"exel-view-column\">Fail <span class=\"info-text\" appTooltip=\"(No. of days after the due date. Select '0' if the responsibility must be completed on the due date)\" placement=\"bottom\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">(No. of days after the due date. Select \"0\" if the responsibility must be completed on the due date)</span></div>\r\n                            </ng-container>\r\n                            <ng-container *ngIf=\"tabType === 'ongoing'\">\r\n                                <div class=\"exel-view-column\">Ongoing Frequency <span class=\"required\">*</span></div>\r\n                                <div class=\"exel-view-column\">Set a Reminder?</div>\r\n                                <div class=\"exel-view-column\">Frequency of Reminder</div>\r\n                            </ng-container>\r\n                            <ng-container *ngIf=\"tabType === 'onCompletion'\">\r\n                                <div class=\"exel-view-column\">On Completion of Frequency <span class=\"required\">*</span></div>\r\n                                <div class=\"exel-view-column\">Parent Responsibility<span class=\"info-text\">(Day)</span></div>\r\n                                <div class=\"exel-view-column\">Due Date <span class=\"info-text\" appTooltip=\"(No. of days after completion of the Parent Responsibility)\" placement=\"bottom\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">(No. of days after completion of the Parent Responsibility)</span></div>\r\n                                <div class=\"exel-view-column\">Start <span class=\"info-text\" appTooltip=\"(No. of days before the due date)\" placement=\"bottom\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">(No. of days before the due date)</span></div>\r\n                                <div class=\"exel-view-column\">Fail <span class=\"info-text\" appTooltip=\"(No. of days after the due date. Select '0' if the responsibility must be completed on the due date)\" placement=\"bottom\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">(No. of days after the due date. Select \"0\" if the responsibility must be completed on the due date)</span></div>\r\n                            </ng-container>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"exel-view-column\">Responsibility Centre</div>\r\n                    <div class=\"exel-view-column\">Risk Class</div>\r\n                    <div class=\"exel-view-column\">Objective</div>\r\n                    <div class=\"exel-view-column\">Notes</div>\r\n                    <div class=\"exel-view-column\" [class.two-column]=\"true\">\r\n                        <div class=\"exel-view-row\">\r\n                            <div class=\"exel-view-column large\">Format & Evidence</div>\r\n                        </div>\r\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\" [class.three-column]=\"false\">\r\n                            <div class=\"exel-view-column\" [class.small-column]=\"true\">Format</div>\r\n                            <div class=\"exel-view-column\">Format For Responsibility (link)</div>\r\n                            <div class=\"exel-view-column\" [class.small-column]=\"true\">Evidence</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"exel-view-column\">Assessments or Checkpoints</div>\r\n                    <div class=\"exel-view-column\" [class.two-column]=\"true\">\r\n                        <div class=\"exel-view-row\">\r\n                            <div class=\"exel-view-column large\">Review of Responsibility</div>\r\n                        </div>\r\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\r\n                            <div class=\"exel-view-column\">Reviewer</div>\r\n                            <div class=\"exel-view-column\">Review Period (Days)</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"exel-view-column\" [class.two-column]=\"true\">\r\n                        <div class=\"exel-view-row\">\r\n                            <div class=\"exel-view-column large\">Overseer</div>\r\n                        </div>\r\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\r\n                            <div class=\"exel-view-column\">Always Notify</div>\r\n                            <div class=\"exel-view-column\">Notify on Failure</div>\r\n                        </div>\r\n                    </div>\r\n                    <!-- <div class=\"exel-view-column\">Overseer</div> -->\r\n    \r\n                </div>\r\n                <div class=\"exel-view-row\" *ngFor=\"let report of responsibilityBulkUpload?.reports; let i = index\">\r\n                    <div class=\"exel-view-column sl-no\" [class.error]=\"!report?.isValid\">{{i+1}}</div>\r\n                    <div class=\"exel-view-column\" [class.error]=\"!report.responsibilityName\">{{report?.responsibilityName}} <i *ngIf=\"!report.responsibilityName\" class=\"icons\" [appTooltip]=\"'Enter a name for this responsibility.'\"  placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i></div>\r\n                    <div class=\"exel-view-column multi-column\" *ngIf=\"responsibilityBulkUpload?.header.includes('Program')\" [class.error]=\"false\" [class.three-column]=\"true\">\r\n                        <div class=\"exel-view-row multi-column\" [class.three-column]=\"true\">\r\n                            <div class=\"exel-view-column\">{{report?.programType}}</div>\r\n                            <div class=\"exel-view-column\">{{report?.program}}</div>\r\n                            <div class=\"exel-view-column\">{{report?.programCategory}}</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"exel-view-column\" [class.error]=\"report?.assignor && (report?.notifyOnFailure == report?.assignor || report?.assignor == report?.overseer)\">{{report?.assignor}}\r\n                        <i *ngIf=\"((report?.assignor) && (report?.overseer == report?.assignor || report?.notifyOnFailure == report?.assignor))\"\r\n                            class=\"icons\"\r\n                            [appTooltip]=\"'The Overseer cannot also be the Assignor of this responsibility. Select another user as the Assignor.'\"\r\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                        </i>\r\n                        <!-- <i *ngIf=\"((report?.assignor) && (report?.reviewer === report?.assignor))\"\r\n                            class=\"icons\"\r\n                            [appTooltip]=\"'The Reviewer cannot also be the Assignor of this responsibility. Select another user as the Assignor.'\"\r\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                        </i> -->\r\n                    </div>\r\n                    <div class=\"exel-view-column multi-column\" [class.two-column]=\"true\">\r\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\r\n                            <div class=\"exel-view-column\" [class.error]=\"!report?.assignee || report?.assignee == report?.reviewer || !report?.userValidateWithProgram?.isValidAssignee || report?.overseer === report?.assignee  || (!report?.isValidUser)\">{{report?.assignee}}\r\n                                <!-- || (!report?.isValidUser) -->\r\n                                <i *ngIf=\"((report?.assignee) && (report?.overseer == report?.assignee))\"\r\n                                    class=\"icons\"\r\n                                    [appTooltip]=\"'The Overseer cannot also be the Assignee of this responsibility. Select another user as the Assignee.'\"\r\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                                </i>\r\n                                <i *ngIf=\"((report?.assignee) && (report?.reviewer == report?.assignee))\"\r\n                                    class=\"icons\"\r\n                                    [appTooltip]=\"'The Reviewer cannot also be the Assignee of this responsibility. Select another user as the Assignee.'\"\r\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                                </i>\r\n                                <i *ngIf=\"(!report?.assignee) || (!report?.isValidUser)\"\r\n                                    class=\"icons\"\r\n                                    [appTooltip]=\"'Select the user responsible for completing this responsibility. '\"\r\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                                </i>\r\n                                <i *ngIf=\"(report?.assignee) && !report?.userValidateWithProgram?.isValidAssignee\"\r\n                                    class=\"icons\"\r\n                                    [appTooltip]=\"'This user is not associated with the selected Program.'\"\r\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                                </i>\r\n                            </div>\r\n                            <div class=\"exel-view-column\">{{report?.assigneeType}}</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"exel-view-column\">{{report?.keyResponsibility}}</div>\r\n                    <div class=\"exel-view-column multi-column\" [class.five-column]=\"tabType === 'frequency' || tabType === 'onCompletion'\" [class.three-column]=\"tabType === 'ongoing'\">\r\n                        <ng-container *ngIf=\"tabType === 'frequency'\">\r\n                            <div class=\"exel-view-row multi-column\" [class.five-column]=\"true\">\r\n                                <div class=\"exel-view-column\" [class.error]=\"!report?.frequency\">{{report?.frequency}}\r\n                                    <i *ngIf=\"!report?.frequency\" class=\"icons\" [appTooltip]=\"'Select a frequency for this responsibility.'\"\r\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                                </div>\r\n                                <div class=\"exel-view-column\" [class.error]=\"!report?.validDate || report?.isPastDate\">{{report?.day}}\r\n                                    <i *ngIf=\"!report?.validDate\" class=\"icons\" [appTooltip]=\"'Invalid Due Date.'\"\r\n                                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                                    <i *ngIf=\"report?.isPastDate\" class=\"icons\" [appTooltip]=\"'This date occurs in the past. Select a future date.'\"\r\n                                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                                </div>\r\n                                <div class=\"exel-view-column\" [class.error]=\"!report?.validDate || report?.isPastDate\">{{report?.month}}\r\n                                    <i *ngIf=\"!report?.validDate\" class=\"icons\" [appTooltip]=\"'Invalid Due Date.'\"\r\n                                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                                    <i *ngIf=\"report?.isPastDate\" class=\"icons\" [appTooltip]=\"'This date occurs in the past. Select a future date.'\"\r\n                                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                                </div>\r\n                                <div class=\"exel-view-column\">{{report?.responsibilityWindow}}</div>\r\n                                <div class=\"exel-view-column\">{{report?.failedAfter}}</div>\r\n                            </div>\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"tabType === 'ongoing'\">\r\n                            <div class=\"exel-view-row multi-column\" [class.three-column]=\"true\">\r\n                                <div class=\"exel-view-column\" [class.error]=\"!report?.frequency\">{{report?.frequency}}\r\n                                    <i *ngIf=\"!report?.frequency\" class=\"icons\" [appTooltip]=\"'Select a frequency for this responsibility.'\"\r\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                                </div>\r\n                                <div class=\"exel-view-column\">{{report?.setReminder}}</div>\r\n                                <div class=\"exel-view-column\">{{report?.frequencyReminder}}</div>\r\n                            </div>\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"tabType === 'onCompletion'\">\r\n                            <div class=\"exel-view-row multi-column\" [class.five-column]=\"true\">\r\n                                <div class=\"exel-view-column\" [class.error]=\"!report?.frequency\">{{report?.frequency}}\r\n                                    <i *ngIf=\"!report?.frequency\" class=\"icons\" [appTooltip]=\"'Select a frequency for this responsibility.'\"\r\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                                </div>\r\n                                <div class=\"exel-view-column\" [class.error]=\"!report?.parentResponsibility\">{{report?.parentResponsibility}}\r\n                                    <i *ngIf=\"!report?.parentResponsibility\" class=\"icons\" [appTooltip]=\"'Select a parent responsibility on whose completion this responsibility will become active.'\"\r\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                                </div>\r\n                                <div class=\"exel-view-column\">{{report?.dueDate}}</div>\r\n                                <div class=\"exel-view-column\">{{report?.responsibilityWindow}}</div>\r\n                                <div class=\"exel-view-column\">{{report?.failedAfter}}</div>\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                    <div class=\"exel-view-column\">{{report?.responsibilityCenter}}</div>\r\n                    <div class=\"exel-view-column\">{{report?.reportClass}}</div>\r\n                    <div class=\"exel-view-column\">{{report?.objective}}</div>\r\n                    <div class=\"exel-view-column\">{{report?.notes}}</div>\r\n                    <div class=\"exel-view-column multi-column\" [class.two-column]=\"true\">\r\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\r\n                            <div class=\"exel-view-column multi-column\">\r\n                                <div class=\"exel-view-row multi-column\">\r\n                                    <div class=\"exel-view-column\" [class.small-column]=\"true\">{{report?.isFormat}}</div>\r\n                                    <div class=\"exel-view-column\">{{report?.formatForResponsibility}}</div>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"exel-view-column\" [class.small-column]=\"true\">{{report?.documentEvidenceRequired}}</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"exel-view-column\">{{report?.assessments}}</div>\r\n                    <div class=\"exel-view-column multi-column\" [class.two-column]=\"true\">\r\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\r\n                            <div class=\"exel-view-column\" [class.error]=\"report?.reviewer && ((report?.reviewer === report?.overseer)\r\n                            || (report?.reviewer === report?.assignee) || !report?.userValidateWithProgram?.isValidReviewer )\">{{report?.reviewer}}\r\n                        <i *ngIf=\"(report?.reviewer) && ((report?.reviewer === report?.overseer))\"\r\n                            class=\"icons\"\r\n                            [appTooltip]=\"'The Overseer cannot also be the Reviewer of this responsibility. Select another user as the Reviewer'\"\r\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                        </i>\r\n    \r\n                        <i *ngIf=\"report?.reviewer && (report?.reviewer === report?.assignee)\" class=\"icons\"\r\n                            [appTooltip]=\"'The Assignee cannot also be the Reviewer of this responsibility. Select another user as the Reviewer.'\"\r\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                        </i>\r\n                        <!-- <i *ngIf=\"(report?.reviewer && report?.reviewer === report?.assignor)\"\r\n                            class=\"icons\"\r\n                            [appTooltip]=\"((report?.assignor)?'The Assignor cannot also be the Reviewer of this responsibility.':'You cannot be a Reviewer of this responsibility since you are the assignor. ') +'Select another user as the Reviewer'\"\r\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                        </i> -->\r\n                        <i *ngIf=\"report?.reviewer && !report?.userValidateWithProgram?.isValidReviewer\"\r\n                            class=\"icons\"\r\n                            [appTooltip]=\"'This user is not associated with the selected Program.'\"\r\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                        </i>\r\n                            </div>\r\n                            <div class=\"exel-view-column\">{{report?.reviewToBeCompletedWithin}}</div>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <div class=\"exel-view-column multi-column\" [class.two-column]=\"true\">\r\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\r\n                            <div class=\"exel-view-column\" [class.error]=\"report?.overseer && ((report?.reviewer === report?.overseer)\r\n                            || (report?.overseer === report?.assignee) || (report?.overseer === report?.assignor) || !report?.userValidateWithProgram?.isValidOverseer )\">\r\n                            {{report?.overseer}}\r\n                                <i *ngIf=\"(report?.overseer) && ((report?.reviewer === report?.overseer))\"\r\n                                class=\"icons\"\r\n                                [appTooltip]=\"'The Reviewer cannot also be the Overseer of this responsibility. Select another user as the Overseer.'\"\r\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                                </i>\r\n\r\n                                <i *ngIf=\"report?.overseer && (report?.overseer === report?.assignee)\" class=\"icons\"\r\n                                    [appTooltip]=\"'The Assignee cannot also be the Overseer of this responsibility. Select another user as the Overseer'\"\r\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                                </i>\r\n                                <i *ngIf=\"((report?.overseer && report?.assignor) && (report?.overseer == report?.assignor)) ||((report?.overseer && (!report?.assignor)) && (report?.overseer == defaultOwner))\"\r\n                                    class=\"icons\"\r\n                                    [appTooltip]=\"((report?.assignor)?'The Assignor cannot also be the Overseer of this responsibility. ':'You cannot be an Overseer of this responsibility since you are the Assignor. ') +'Select another user as the Overseer.'\"\r\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                                </i>\r\n                                <i *ngIf=\"(report?.overseer) && !report?.userValidateWithProgram?.isValidOverseer\"\r\n                                    class=\"icons\"\r\n                                    [appTooltip]=\"'This user is not associated with the selected Program.'\"\r\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                                </i>\r\n                            </div>\r\n                            <div class=\"exel-view-column\" [class.error]=\"report?.notifyOnFailure && ((report?.reviewer === report?.notifyOnFailure)\r\n                            || (report?.notifyOnFailure === report?.assignee) || ((report?.notifyOnFailure && report?.assignor) && (report?.notifyOnFailure == report?.assignor)) ||((report?.notifyOnFailure && (!report?.assignor)) && (report?.notifyOnFailure == defaultOwner)) || !report?.userValidateWithProgram?.isValidNotifyOnFailure )\">\r\n                                {{report?.notifyOnFailure}}\r\n                                <i *ngIf=\"(report?.notifyOnFailure) && ((report?.reviewer === report?.notifyOnFailure))\"\r\n                                    class=\"icons\"\r\n                                    [appTooltip]=\"'The Reviewer cannot also be the Overseer of this responsibility. Select another user as the Overseer.'\"\r\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                                </i>\r\n\r\n                                <i *ngIf=\"report?.notifyOnFailure && (report?.notifyOnFailure === report?.assignee)\" class=\"icons\"\r\n                                    [appTooltip]=\"'The Assignee cannot also be the Overseer of this responsibility. Select another user as the Overseer'\"\r\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                                </i>\r\n                                <i *ngIf=\"((report?.notifyOnFailure && report?.assignor) && (report?.notifyOnFailure == report?.assignor)) ||((report?.notifyOnFailure && (!report?.assignor)) && (report?.notifyOnFailure == defaultOwner))\"\r\n                                    class=\"icons\"\r\n                                    [appTooltip]=\"((report?.assignor)?'The Assignor cannot also be the Overseer of this responsibility. ':'You cannot be an Overseer of this responsibility since you are the Assignor. ') +'Select another user as the Overseer.'\"\r\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                                </i>\r\n                                <i *ngIf=\"(report?.notifyOnFailure) && !report?.userValidateWithProgram?.isValidNotifyOnFailure\"\r\n                                    class=\"icons\"\r\n                                    [appTooltip]=\"'This user is not associated with the selected Program.'\"\r\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                                </i>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    \r\n                    <!-- <div class=\"exel-view-column\" [class.error]=\"(report?.overseer) && ((report?.overseer === report?.assignee) ||(report?.reviewer === report?.overseer) || (report?.overseer == report?.assignor) || (!report?.userValidateWithProgram?.isValidOverseer))\">\r\n                        {{report?.overseer}}\r\n                        <i *ngIf=\"(report?.overseer) && ((report?.reviewer === report?.overseer))\"\r\n                            class=\"icons\"\r\n                            [appTooltip]=\"'The Reviewer cannot also be the Overseer of this responsibility. Select another user as the Overseer.'\"\r\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                        </i>\r\n\r\n                        <i *ngIf=\"report?.overseer && (report?.overseer === report?.assignee)\" class=\"icons\"\r\n                            [appTooltip]=\"'The Assignee cannot also be the Overseer of this responsibility. Select another user as the Overseer'\"\r\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                        </i>\r\n                        <i *ngIf=\"((report?.overseer) && (report?.overseer == report?.assignor))\"\r\n                            class=\"icons\"\r\n                            [appTooltip]=\"((report?.assignor)?'The Assignor cannot also be the Overseer of this responsibility. ':'You cannot be an Overseer of this responsibility since you are the Assignor. ') +'Select another user as the Overseer.'\"\r\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                        </i>\r\n                        <i *ngIf=\"!report?.userValidateWithProgram?.isValidOverseer\"\r\n                            class=\"icons\"\r\n                            [appTooltip]=\"'Selected user is not a valid overseer for selected program.'\"\r\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                        </i>\r\n                    </div> -->\r\n                </div>\r\n    \r\n    \r\n    \r\n    \r\n    \r\n    \r\n                <!-- ------------------------------------------------old code dynamic------------------------------------------------- -->\r\n    \r\n                <!-- *ngFor=\"let report of responsibilityBulkUpload?.reports; let i = index\" -->\r\n            </div>\r\n        </div>\r\n        <div class=\"bulk-view-option\">\r\n            <button *ngIf=\"bulkUpload?.frequency?.reports?.length\" [class.active]=\"tabType === 'frequency'\" (click)=\"selectedTab.emit('frequency')\">Frequency Responsibilities</button>\r\n            <button *ngIf=\"bulkUpload?.ongoing?.reports?.length\" [class.active]=\"tabType === 'ongoing'\" (click)=\"selectedTab.emit('ongoing')\">Ongoing Responsibilities</button>\r\n            <button *ngIf=\"bulkUpload?.onCompletion?.reports?.length\" [class.active]=\"tabType === 'onCompletion'\" (click)=\"selectedTab.emit('onCompletion')\">On Completion Responsibilities</button>\r\n        </div>\r\n        <div class=\"bulk-view-footer\">\r\n            <!-- <div class=\"left\">\r\n                <p>{{finalResponsibilities}} out of {{responsibilityBulkUpload?.reports?.length}} responsibilities will be\r\n                    uploaded.</p>\r\n            </div> -->\r\n            <div class=\"left\">\r\n                <p>{{finalResponsibilities}} out of {{responsibilityMultiTabBulkUpload?.length}} {{responsibilityMultiTabBulkUpload?.length > 1 ? 'responsibilities' : 'responsibility'}} will be\r\n                    uploaded.</p>\r\n            </div>\r\n            <div class=\"right\">\r\n                <button (click)=\"close()\">Cancel</button>\r\n                <button (click)=\"submit()\" [disabled]=\"!isConfirmClickable\" class=\"blue\">Confirm</button>\r\n                <!-- finalResponsibilities < 1 -->\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <app-loader  *ngIf=\"loader\"></app-loader>\r\n    \r\n</ng-container>\r\n    \r\n    <!-- --------------------------------------------------------------------upward is new one-------------------- -->",
                     styles: ["@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");::-webkit-scrollbar-thumb,::-webkit-scrollbar-thumb:hover{background:#747576;border-radius:16px}::-webkit-scrollbar{height:15px}.bulk-view{position:fixed;top:0;right:0;bottom:0;left:0;z-index:11}.bulk-view-head{height:60px;padding:20px 24px;background:#161b2f;display:flex;justify-content:flex-start}.bulk-view-title{font-size:16px;line-height:20px;font-weight:400;margin:0;color:#fff}.bulk-view-body{height:calc(100vh - 110px);overflow:auto;width:100%;background:#fff}.bulk-view-body .exel-view{display:block}.bulk-view-body .exel-view-row{display:flex;width:100%}.bulk-view-body .exel-view-row.head .exel-view-column{font-weight:500;font-size:14px;min-height:26px;background:#f1f1f1;padding:0;word-break:unset}.bulk-view-body .exel-view-row.multi-column .exel-view-column{width:140px;min-width:140px}.bulk-view-body .exel-view-column{width:300px;min-width:300px;padding:0 10px;border-right:1px solid #dcdcdc;border-bottom:1px solid #dcdcdc;display:flex;align-items:center;justify-content:center;text-align:center;word-break:break-all;line-height:16px;font-size:12px;color:#161b2f;flex-wrap:wrap;position:relative}.bulk-view-body .exel-view-column i.icons{position:absolute;top:8px;right:10px;cursor:pointer;color:#d93b41}.bulk-view-body .exel-view-column.large{width:100%;min-width:auto}.bulk-view-body .exel-view-column.error{border:1px solid #eb2424!important;padding-right:24px}.bulk-view-body .exel-view-column.error+.error{border-left:none!important}.bulk-view-body .exel-view-column span.required{color:#eb2424;display:contents}.bulk-view-body .exel-view-column .exel-view-row .exel-view-column{width:100%}.bulk-view-body .exel-view-column.sl-no{background:#f1f1f1;width:60px;min-width:60px;min-height:30px;font-weight:400}.bulk-view-body .exel-view-column.sl-no.error{background:#eb242424;padding-right:10px;border:none;border-bottom:1px solid #dcdcdc}.bulk-view-body .exel-view-column.multi-column{padding:0;border:none}.bulk-view-body .exel-view-column.multi-column .exel-view-row{height:100%}.bulk-view-body .exel-view-column.multi-column .exel-view-column{width:50%;min-width:50%}.bulk-view-body .exel-view-column.multi-column .exel-view-column+.exel-view-column{border-left:none}.bulk-view-body.bulk{height:calc(100vh - 142px)}.bulk-view-body.bulk .exel-view-row.head{position:sticky;top:0;z-index:1}.bulk-view-body.bulk .exel-view-row.head .exel-view-column{min-height:34px}.bulk-view-body.bulk .exel-view-row.head .exel-view-column .info-text{font-size:10px;display:block;width:100%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;padding:0 8px}.bulk-view-body.bulk .exel-view-row.two-column .exel-view-column{min-width:250px!important}.bulk-view-body.bulk .exel-view-row.five-column .exel-view-column,.bulk-view-body.bulk .exel-view-row.three-column .exel-view-column{width:200px;min-width:200px!important}.bulk-view-body.bulk .exel-view-column .exel-view-row .exel-view-column.small-column{width:120px;min-width:120px!important}.bulk-view-body.bulk .exel-view-column.multi-column .exel-view-column{min-width:unset}.bulk-view-body.bulk .exel-view-column.two-column{width:500px;min-width:500px!important}.bulk-view-body.bulk .exel-view-column.three-column{width:600px;min-width:600px!important}.bulk-view-body.bulk .exel-view-column.five-column{width:1000px;min-width:1000px!important}.bulk-view-option{background:#fff;border-top:1px solid #f1f1f1;padding:0 20px;position:fixed;width:100%;bottom:50px;display:flex;align-items:center}.bulk-view-option button{background:transparent;border-radius:0;border:none;border-left:1px solid #f1f1f1;color:#747576;font-size:11px;font-weight:500;padding:0 .5rem;margin:0;height:2rem;position:relative}.bulk-view-option button:last-of-type{border-right:1px solid #f1f1f1}.bulk-view-option button.active{color:#1e5dd3}.bulk-view-option button.active:before{background:#fff;content:\"\";position:absolute;top:-1px;left:0;height:1px;width:100%}.bulk-view-footer{height:50px;box-shadow:0 0 15px rgba(30,93,210,.35);padding:10px 20px;position:fixed;width:100%;bottom:0;display:flex;align-items:center;justify-content:space-between;background:#fff}.bulk-view-footer .left p{color:#747576;font-size:13px;font-weight:500;margin:0}.bulk-view-footer .right button{font-size:12px;background:#fff;border:1px solid #dcdcdc;color:#747576;border-radius:2px;padding:8px 18px;cursor:pointer;text-transform:uppercase}.bulk-view-footer .right button+button{margin-left:4px}.bulk-view-footer .right button.blue{color:#fff;background:#1e5dd3}.bulk-view-footer .right button:disabled{background:#f1f1f1;border-color:#f1f1f1;pointer-events:none;cursor:not-allowed;color:#747576}"]
                 },] }
     ];
@@ -30106,7 +30123,7 @@
                 header: 1, raw: false,
             });
             var header = lodashEs.cloneDeep(listData[headerIndex]);
-            if (headerIndex === 4) {
+            if (headerIndex === 2) {
                 return header[0] === 'Responsibility Name*' ? true : false;
             }
             else if (headerIndex === 0) {
@@ -30202,18 +30219,18 @@
                     var wb = XLSX__namespace.read(bstr, { type: 'binary' });
                     var sheetData = '';
                     if (((_a = wb === null || wb === void 0 ? void 0 : wb.SheetNames) === null || _a === void 0 ? void 0 : _a.length) > 2) {
-                        var sheetData_1 = wb.SheetNames[3];
+                        var sheetData_1 = wb.SheetNames[4];
                         var tempData = wb.Sheets[sheetData_1];
                         var tData = XLSX__namespace.utils.sheet_to_json(tempData, { header: 1 });
                         var tempList = tData.filter(function (dataElement) { return dataElement.length > 0; });
-                        var excelSheetName1 = wb.SheetNames[0];
+                        var excelSheetName1 = wb.SheetNames[1];
                         var excelData1 = wb.Sheets[excelSheetName1];
-                        var excelSheetName2 = wb.SheetNames[1];
+                        var excelSheetName2 = wb.SheetNames[2];
                         var excelData2 = wb.Sheets[excelSheetName2];
-                        var excelSheetName3 = wb.SheetNames[2];
+                        var excelSheetName3 = wb.SheetNames[3];
                         var excelData3 = wb.Sheets[excelSheetName3];
                         isEmpty_1 = (_this.bulkUploadService.hasDataInList(excelData1, 7) && _this.bulkUploadService.hasDataInList(excelData2, 7) && _this.bulkUploadService.hasDataInList(excelData3, 7));
-                        isCorrectFile_1 = (_this.bulkUploadService.checkCorrectFile(excelData1, 4) || _this.bulkUploadService.checkCorrectFile(excelData2, 4) || _this.bulkUploadService.checkCorrectFile(excelData3, 4));
+                        isCorrectFile_1 = (_this.bulkUploadService.checkCorrectFile(excelData1, 2) || _this.bulkUploadService.checkCorrectFile(excelData2, 2) || _this.bulkUploadService.checkCorrectFile(excelData3, 2));
                         templateInfo_1.memberId = tempList[0][18];
                     }
                     else {
@@ -30285,7 +30302,7 @@
     AddMultipleResponsibilityContainerComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'lib-add-multiple-responsibility-container',
-                    template: "<div class=\"add-multiple-risk\" [attr.id]=\"'scrollReference'\" >\r\n    <!-- main container starts here -->\r\n    <div class=\"add-multiple-risk-body\">\r\n        <div class=\"add-multiple-risk-container\">\r\n            <div class=\"image\">\r\n                <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/spreadsheet-multiple-category.svg\" alt=\"\" />\r\n            </div>\r\n            <h4>You can entrust multiple responsibilities in just two easy steps:</h4>\r\n            <ul class=\"list\">\r\n                <li>Download the template and fill in the details.</li>\r\n                <li>Upload the .xlsx file and you\u2019re good to go!</li>\r\n            </ul>\r\n\r\n            <div class=\"download-btn\" *ngIf=\"bulkUploadFlag\">\r\n                <button class=\"download\" *ngIf=\"downloadStatus === 'NOT_DOWNLOADING'\"\r\n                (click)=\"downloadTemplate()\" type=\"button\"><i class=\"icons\">&#xe91b;</i> Download Existing Template</button>\r\n                <div *ngIf=\"downloadStatus === 'DOWNLOADING'\" class=\"bulk-btn-progress\">\r\n                    Download in Progress\r\n                    <app-line-loader [loaderHeight]=\"'2'\"></app-line-loader>\r\n                </div>\r\n                <!-- <div *ngIf=\"downloadStatus === 'DOWNLOADED'\" class=\"bulk-btn-progress complete\"><i class=\"icons\">&#xe91c;</i>Download Complete -&nbsp;<button (click)=\"downloadTemplate()\">Retry Download</button></div> -->\r\n                <ng-container *ngIf=\"downloadStatus === 'DOWNLOADED'\">\r\n                    <div class=\"bulk-btn-progress\"><i class=\"icons\">&#xe91c;</i>Download Complete</div>\r\n                    <div class=\"bulk-btn-again\">\r\n                        Is the file not downloaded?\r\n                        <button (click)=\"downloadTemplate()\">Retry Download</button>\r\n                    </div>\r\n                </ng-container>\r\n\r\n                <div class=\"orDiv\">OR</div>\r\n\r\n                <button class=\"download\" *ngIf=\"downloadStatusV2 === 'NOT_DOWNLOADING'\"\r\n                (click)=\"downloadTemplate('v2')\" type=\"button\"><i class=\"icons\">&#xe91b;</i> Download New Template</button>\r\n                <div *ngIf=\"downloadStatusV2 === 'DOWNLOADING'\" class=\"bulk-btn-progress\">\r\n                    Download in Progress\r\n                    <app-line-loader [loaderHeight]=\"'2'\"></app-line-loader>\r\n                </div>\r\n                <!-- <div *ngIf=\"downloadStatusV2 === 'DOWNLOADED'\" class=\"bulk-btn-progress complete\"><i class=\"icons\">&#xe91c;</i>Download Complete -&nbsp;<button (click)=\"downloadTemplate('v2')\">Retry Download</button></div> -->\r\n                <ng-container *ngIf=\"downloadStatusV2 === 'DOWNLOADED'\">\r\n                    <div class=\"bulk-btn-progress\"><i class=\"icons\">&#xe91c;</i>Download Complete</div>\r\n                    <div class=\"bulk-btn-again\">\r\n                        Is the file not downloaded?\r\n                        <button (click)=\"downloadTemplate('v2')\">Retry Download</button>\r\n                    </div>\r\n                </ng-container>\r\n            </div>\r\n\r\n            <div class=\"download-btn\" *ngIf=\"!bulkUploadFlag\">\r\n                <button class=\"download\" *ngIf=\"downloadStatus === 'NOT_DOWNLOADING'\"\r\n                (click)=\"downloadTemplate()\" type=\"button\"><i class=\"icons\">&#xe91b;</i> Download Template</button>\r\n                <div class=\"bulk-btn-progress\" *ngIf=\"downloadStatus === 'DOWNLOADING'\">\r\n                    Download in Progress\r\n                    <app-line-loader [loaderHeight]=\"'2'\"></app-line-loader>\r\n                </div>\r\n                <ng-container *ngIf=\"downloadStatus === 'DOWNLOADED'\">\r\n                    <div class=\"bulk-btn-progress\"><i class=\"icons\">&#xe91c;</i>Download Complete</div>\r\n                    <div class=\"bulk-btn-again\">\r\n                        Is the file not downloaded?\r\n                        <button (click)=\"downloadTemplate()\">Retry Download</button>\r\n                    </div>\r\n                </ng-container>\r\n            </div>\r\n            <p class=\"error-message\" *ngIf=\"isWrongFile || isWrongFormat|| isFileEmpty\"\r\n            >{{errorMessage}}</p>  \r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<input type=\"file\" [(ngModel)]=\"fileValue\" id=\"fileInput\" class=\"hidden-input\" accept=\".xlsx\" (change)=\"uploadedFile($event)\" multiple />\r\n<app-smiley-dialog-inline *ngIf=\"showSmiley\" [message]=\"smileyMessage\" [actionButtons]=\"actionButtons\" (action)=\"action($event)\" (closeSmiley)=\"closeSmiley($event)\"></app-smiley-dialog-inline>\r\n\r\n<app-add-multiple-responsibility *ngIf=\"singleTabResponsibility\" [uploadedFile]=\"uploadedFileData\" (closeAddMultipleResponsibility)=\"closeAddMultipleResponsibility($event)\"></app-add-multiple-responsibility>\r\n<lib-add-multiple-responsibility-with-tab *ngIf=\"multiTabResponsibility\" [orgDetails]=\"orgDetails\" [uploadedFile]=\"uploadedFileData\" (closeAddMultipleResponsibility)=\"closeAddMultipleResponsibility($event)\"></lib-add-multiple-responsibility-with-tab>\r\n",
+                    template: "<div class=\"add-multiple-risk\" [attr.id]=\"'scrollReference'\" >\r\n    <!-- main container starts here -->\r\n    <div class=\"add-multiple-risk-body\">\r\n        <div class=\"add-multiple-risk-container\">\r\n            <div class=\"image\">\r\n                <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/spreadsheet-multiple-category.svg\" alt=\"\" />\r\n            </div>\r\n            <h4>You can entrust multiple responsibilities in just two easy steps:</h4>\r\n            <ul class=\"list\">\r\n                <li>Download the template and fill in the details.</li>\r\n                <li>Upload the .xlsx file and you\u2019re good to go!</li>\r\n            </ul>\r\n\r\n            <!-- both old and new template -->\r\n            <div class=\"download-btn\" *ngIf=\"(feature.isFeatureEnabled('ff_both_bulk_responsibility') && !feature.isFeatureEnabled('ff_bulk_responsibility'))\">\r\n                <button class=\"download\" *ngIf=\"downloadStatus === 'NOT_DOWNLOADING'\"\r\n                (click)=\"downloadTemplate()\" type=\"button\"><i class=\"icons\">&#xe91b;</i> Download Existing Template</button>\r\n                <div *ngIf=\"downloadStatus === 'DOWNLOADING'\" class=\"bulk-btn-progress\">\r\n                    Download in Progress\r\n                    <app-line-loader [loaderHeight]=\"'2'\"></app-line-loader>\r\n                </div>\r\n                <!-- <div *ngIf=\"downloadStatus === 'DOWNLOADED'\" class=\"bulk-btn-progress complete\"><i class=\"icons\">&#xe91c;</i>Download Complete -&nbsp;<button (click)=\"downloadTemplate()\">Retry Download</button></div> -->\r\n                <ng-container *ngIf=\"downloadStatus === 'DOWNLOADED'\">\r\n                    <div class=\"bulk-btn-progress\"><i class=\"icons\">&#xe91c;</i>Download Complete</div>\r\n                    <div class=\"bulk-btn-again\">\r\n                        Is the file not downloaded?\r\n                        <button (click)=\"downloadTemplate()\">Retry Download</button>\r\n                    </div>\r\n                </ng-container>\r\n\r\n                <div class=\"orDiv\">OR</div>\r\n\r\n                <button class=\"download\" *ngIf=\"downloadStatusV2 === 'NOT_DOWNLOADING'\"\r\n                (click)=\"downloadTemplate('v2')\" type=\"button\"><i class=\"icons\">&#xe91b;</i> Download New Template</button>\r\n                <div *ngIf=\"downloadStatusV2 === 'DOWNLOADING'\" class=\"bulk-btn-progress\">\r\n                    Download in Progress\r\n                    <app-line-loader [loaderHeight]=\"'2'\"></app-line-loader>\r\n                </div>\r\n                <!-- <div *ngIf=\"downloadStatusV2 === 'DOWNLOADED'\" class=\"bulk-btn-progress complete\"><i class=\"icons\">&#xe91c;</i>Download Complete -&nbsp;<button (click)=\"downloadTemplate('v2')\">Retry Download</button></div> -->\r\n                <ng-container *ngIf=\"downloadStatusV2 === 'DOWNLOADED'\">\r\n                    <div class=\"bulk-btn-progress\"><i class=\"icons\">&#xe91c;</i>Download Complete</div>\r\n                    <div class=\"bulk-btn-again\">\r\n                        Is the file not downloaded?\r\n                        <button (click)=\"downloadTemplate('v2')\">Retry Download</button>\r\n                    </div>\r\n                </ng-container>\r\n            </div>\r\n\r\n            <!-- only for new template -->\r\n            <div class=\"download-btn\" *ngIf=\"(feature.isFeatureEnabled('ff_bulk_responsibility') && !feature.isFeatureEnabled('ff_both_bulk_responsibility')) || (feature.isFeatureEnabled('ff_bulk_responsibility') && feature.isFeatureEnabled('ff_both_bulk_responsibility'))\">\r\n                <button class=\"download\" *ngIf=\"downloadStatusV2 === 'NOT_DOWNLOADING'\"\r\n                (click)=\"downloadTemplate('v2')\" type=\"button\"><i class=\"icons\">&#xe91b;</i> Download Template</button>\r\n                <div *ngIf=\"downloadStatusV2 === 'DOWNLOADING'\" class=\"bulk-btn-progress\">\r\n                    Download in Progress\r\n                    <app-line-loader [loaderHeight]=\"'2'\"></app-line-loader>\r\n                </div>\r\n                <!-- <div *ngIf=\"downloadStatusV2 === 'DOWNLOADED'\" class=\"bulk-btn-progress complete\"><i class=\"icons\">&#xe91c;</i>Download Complete -&nbsp;<button (click)=\"downloadTemplate('v2')\">Retry Download</button></div> -->\r\n                <ng-container *ngIf=\"downloadStatusV2 === 'DOWNLOADED'\">\r\n                    <div class=\"bulk-btn-progress\"><i class=\"icons\">&#xe91c;</i>Download Complete</div>\r\n                    <div class=\"bulk-btn-again\">\r\n                        Is the file not downloaded?\r\n                        <button (click)=\"downloadTemplate('v2')\">Retry Download</button>\r\n                    </div>\r\n                </ng-container>\r\n            </div>\r\n\r\n            <!-- only for old template -->\r\n            <div class=\"download-btn\" *ngIf=\"(!feature.isFeatureEnabled('ff_bulk_responsibility') && !feature.isFeatureEnabled('ff_both_bulk_responsibility'))\">\r\n                <button class=\"download\" *ngIf=\"downloadStatus === 'NOT_DOWNLOADING'\"\r\n                (click)=\"downloadTemplate()\" type=\"button\"><i class=\"icons\">&#xe91b;</i> Download Template</button>\r\n                <div class=\"bulk-btn-progress\" *ngIf=\"downloadStatus === 'DOWNLOADING'\">\r\n                    Download in Progress\r\n                    <app-line-loader [loaderHeight]=\"'2'\"></app-line-loader>\r\n                </div>\r\n                <ng-container *ngIf=\"downloadStatus === 'DOWNLOADED'\">\r\n                    <div class=\"bulk-btn-progress\"><i class=\"icons\">&#xe91c;</i>Download Complete</div>\r\n                    <div class=\"bulk-btn-again\">\r\n                        Is the file not downloaded?\r\n                        <button (click)=\"downloadTemplate()\">Retry Download</button>\r\n                    </div>\r\n                </ng-container>\r\n            </div>\r\n            <p class=\"error-message\" *ngIf=\"isWrongFile || isWrongFormat|| isFileEmpty\"\r\n            >{{errorMessage}}</p>  \r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<input type=\"file\" [(ngModel)]=\"fileValue\" id=\"fileInput\" class=\"hidden-input\" accept=\".xlsx\" (change)=\"uploadedFile($event)\" multiple />\r\n<app-smiley-dialog-inline *ngIf=\"showSmiley\" [message]=\"smileyMessage\" [actionButtons]=\"actionButtons\" (action)=\"action($event)\" (closeSmiley)=\"closeSmiley($event)\"></app-smiley-dialog-inline>\r\n\r\n<app-add-multiple-responsibility *ngIf=\"singleTabResponsibility\" [uploadedFile]=\"uploadedFileData\" (closeAddMultipleResponsibility)=\"closeAddMultipleResponsibility($event)\"></app-add-multiple-responsibility>\r\n<lib-add-multiple-responsibility-with-tab *ngIf=\"multiTabResponsibility\" [orgDetails]=\"orgDetails\" [uploadedFile]=\"uploadedFileData\" (closeAddMultipleResponsibility)=\"closeAddMultipleResponsibility($event)\"></lib-add-multiple-responsibility-with-tab>\r\n",
                     styles: ["@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");::ng-deep .add-multiple-risk{background:#fff;position:relative;z-index:1}@media only screen and (min-width:1920px){::ng-deep .add-multiple-risk{height:calc(100vh - 200px);display:flex;align-items:center}}::ng-deep .add-multiple-risk-body{padding:0;display:block}::ng-deep .add-multiple-risk-container{display:block;text-align:center}::ng-deep .add-multiple-risk-container .image{width:300px;margin:0 auto 24px}::ng-deep .add-multiple-risk-container h4{font-size:20px;line-height:30px;margin:0 0 20px;font-weight:500}::ng-deep .add-multiple-risk-container ul.list{padding:0;margin:0 0 40px;display:block;counter-reset:my-awesome-counter}::ng-deep .add-multiple-risk-container ul.list li{text-align:left;color:#747576;font-size:15px;line-height:38px;font-weight:400;list-style:none;counter-increment:my-awesome-counter;background:#fbfbfb;border:1px solid #f1f1f1;border-radius:4px;padding:0 12px}::ng-deep .add-multiple-risk-container ul.list li:before{content:counter(my-awesome-counter) \". \"}::ng-deep .add-multiple-risk-container ul.list li+li{margin-top:4px}::ng-deep .add-multiple-risk-container .download-btn button.download{background:#fff;height:36px;border-radius:2px;cursor:pointer;border:1px solid #1e5dd3;color:#1e5dd3;text-transform:uppercase;padding:0 8px;font-weight:500;font-size:11px;width:208px;display:block;margin:0 auto}::ng-deep .add-multiple-risk-container .download-btn .orDiv{color:#161b2f;font-size:12px;font-weight:500;text-transform:uppercase;margin:.75rem 0;text-align:center}::ng-deep .add-multiple-risk-container .bulk-btn-progress{background:#f8f8f8;height:36px;border-radius:2px;cursor:pointer;border:1px solid #f8f8f8;color:#747576;text-transform:uppercase;padding:0 12px;font-weight:500;font-size:11px;position:relative;display:inline-block;line-height:34px;min-width:208px}::ng-deep .add-multiple-risk-container .bulk-btn-progress.complete{display:inline-flex;align-items:center;justify-content:center}::ng-deep .add-multiple-risk-container .bulk-btn-progress i{color:#34aa44;font-size:14px;position:relative;margin:0 10px 0 0;font-weight:400}::ng-deep .add-multiple-risk-container .bulk-btn-progress span.progress{height:3px;position:absolute;bottom:0;left:0;width:100%;background:#1e5dd3}::ng-deep .add-multiple-risk-container .bulk-btn-progress button{background:transparent;border:none;padding:0;font-size:11px;color:#1e5dd3;font-weight:500;text-decoration:underline;cursor:pointer;text-transform:uppercase;display:inline-block}::ng-deep .add-multiple-risk-container .bulk-btn-again{color:#161b2f;font-size:11px;margin-top:10px}::ng-deep .add-multiple-risk-container .bulk-btn-again button{background:transparent;border:none;padding:0;font-size:11px;color:#1e5dd3;font-weight:500;text-decoration:underline;cursor:pointer;text-transform:uppercase;display:inline-block}.hidden-input{opacity:0}", "@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");::-webkit-scrollbar-track{background-color:#f1f1f1;position:absolute}::-webkit-scrollbar{width:3px;height:3px;background-color:transparent;position:absolute}::-webkit-scrollbar-thumb{border-radius:3px;background-color:#dbdbdb;position:absolute}input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}button{font-family:Poppins,sans-serif}::ng-deep .vx-form-group{display:block;position:relative;margin-bottom:20px}::ng-deep .vx-form-group:after{content:\"\";display:block;clear:both}::ng-deep .vx-form-group .select{position:relative}::ng-deep .vx-form-group .select:after{border-left-color:#707070;border-bottom:1px solid #707070;border-right:1px solid #707070;border-top-color:#707070;content:\"\";display:inline-block;right:15px;position:absolute;top:calc(50% - 4px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .vx-form-group .select input{cursor:pointer;padding-right:30px!important}::ng-deep .vx-form-group .select .custom-input{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#fff;outline:none;padding:3px 12px;line-height:16px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;cursor:pointer}::ng-deep .vx-form-group .select .custom-input:empty:not(:focus):before{content:attr(aria-placeholder);line-height:16px;font-size:13px;width:94%;display:block;pointer-events:none;opacity:.8}::ng-deep .vx-form-group .select .custom-input:hover{border-color:#1e5dd3;box-shadow:0 0 5px rgba(30,93,211,.27)}::ng-deep .vx-form-group .select .custom-input.frequency-custom-input{padding-right:116px}::ng-deep .vx-form-group .select+app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .select+app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:5px;text-transform:uppercase}::ng-deep .vx-form-group .select+app-cs-radio{margin-top:8px!important}::ng-deep .vx-form-group .select~app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;font-weight:500;color:#707070}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group .select.button-sec:after{display:none}::ng-deep .vx-form-group .select.button-sec button{background:transparent;border:none;display:inline-flex;float:right;color:#1e5dd3;text-transform:uppercase;font-weight:600;cursor:pointer;font-size:11px;position:absolute;top:12px;right:8px;padding:0;margin:0}::ng-deep .vx-form-group .select+.vx-control-panel{margin-top:8px}::ng-deep .vx-form-group .select+.selected{margin-top:8px}::ng-deep .vx-form-group .select.select{margin-top:8px}::ng-deep .vx-form-group .upload-format{border:1px solid #dbdbdb;border-radius:4px;padding:8px 12px;display:block}::ng-deep .vx-form-group .upload-format span.text{line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;display:block;margin-bottom:6px}::ng-deep .vx-form-group .upload-format .radio-group{display:flex}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio{display:inline-block}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;margin-left:8px}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio+app-cs-radio{margin-left:12px}::ng-deep .vx-form-group .upload-format~.upload-format{margin-top:4px}::ng-deep .vx-form-group .form-tab{display:flex;justify-content:flex-start}::ng-deep .vx-form-group .form-tab button{background:transparent;color:#161b2f;font-size:11px;line-height:16px;text-transform:uppercase;cursor:pointer;padding:8px 8px 8px 0;border:none;outline:none;font-weight:500}::ng-deep .vx-form-group .form-tab button:disabled{opacity:.5;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}::ng-deep .vx-form-group .form-tab button+button{padding:8px}::ng-deep .vx-form-group .form-tab button.active{color:#1e5dd3}::ng-deep .vx-form-group .tab-group{border:1px solid #dbdbdb;border-radius:4px;padding:0;display:block;position:relative}::ng-deep .vx-form-group .tab-group .upload-file{padding:16px 24px;display:flex;align-items:center}::ng-deep .vx-form-group .tab-group .upload-file .image{width:80px;margin-right:20px}::ng-deep .vx-form-group .tab-group .upload-file .browse{display:flex;align-items:center;justify-content:center;width:calc(100% - 100px);text-align:center}::ng-deep .vx-form-group .tab-group .upload-file .browse span{display:inline-block;font-size:12px;color:#747576;line-height:16px;padding:0 4px}::ng-deep .vx-form-group .tab-group .upload-file .browse .label{font-size:11px;color:#1e5dd3;line-height:16px;font-weight:600;text-transform:uppercase;margin:0;padding:0}::ng-deep .vx-form-group .tab-group .upload-file .browse .label input{opacity:0;position:absolute;top:0;margin:0;padding:0;right:0;bottom:0;left:0;cursor:pointer;width:100%}::ng-deep .vx-form-group .tab-group.active{border-color:#1e5dd3}::ng-deep .vx-form-group .tab-group.uploaded{margin-top:4px}::ng-deep .vx-form-group .tab-group.uploaded .upload-file{padding:12px \u200B24px}::ng-deep .vx-form-group .tab-group.uploaded .upload-file .image{display:none}::ng-deep .vx-form-group .tab-group.uploaded .upload-file .browse{width:100%}::ng-deep .vx-form-group .tab-group+label.vx-form-group{margin-top:8px;margin-bottom:4px}::ng-deep .vx-form-group .file-list{background:#fbfbfb;border:1px solid #f1f1f1;border-radius:4px;padding:12px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;position:relative}::ng-deep .vx-form-group .file-list span.file-name{color:#747576;line-height:16px;font-size:11px;font-weight:400;cursor:pointer;max-width:calc(100% - 20px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep .vx-form-group .file-list .button-group{display:flex}::ng-deep .vx-form-group .file-list button{font-size:12px;color:#eb2424;cursor:pointer;display:flex;padding:0;border:none;outline:none;background:transparent}::ng-deep .vx-form-group .file-list button.edit{color:#1e5dd3}::ng-deep .vx-form-group .file-list button+button{margin-left:16px}::ng-deep .vx-form-group .file-list+.file-list{margin-top:4px}::ng-deep .vx-form-group .file-list .file-container{display:flex;justify-content:space-between;width:100%}::ng-deep .vx-form-group .file-list.policy{background:#fff}::ng-deep .vx-form-group .file-list cs-select{position:relative;margin-top:8px;width:100%}::ng-deep .vx-form-group .file-list cs-select .selection-wrap .input-group input.value{height:32px!important;font-size:11px!important}::ng-deep .vx-form-group .file-list cs-select .selection-wrap .input-group i{right:12px!important;top:12px!important}::ng-deep .vx-form-group .file-list app-line-loader{display:block;position:absolute;left:10px;right:10px;bottom:0}::ng-deep .vx-form-group label.vx-control-panel{color:#161b2f;font-size:11px;font-weight:500;line-height:16px;margin-bottom:8px;display:block;text-transform:uppercase;width:100%;margin-top:4px;text-align:left}::ng-deep .vx-form-group label.vx-control-panel.custom-tag{font-size:10px}::ng-deep .vx-form-group label.vx-control-panel.vx-mt-8{margin-top:8px}::ng-deep .vx-form-group label.vx-control-panel span.required{color:#eb2424;font-size:16px;font-weight:400;position:relative;top:-2px}::ng-deep .vx-form-group label.vx-control-panel .button{background:transparent;border:none;display:inline-flex;float:right;color:#1e5dd3;text-transform:uppercase;font-weight:600;cursor:pointer;font-size:11px;padding:0;margin:0}::ng-deep .vx-form-group label.vx-control-panel app-cs-switch{float:right;display:block}::ng-deep .vx-form-group label.vx-control-panel i{margin-left:8px;font-size:12px;color:#1e5dd3;cursor:pointer;position:relative;top:1px}::ng-deep .vx-form-group label.vx-control-panel i.depreciation-icon{color:#e4b700;font-size:16px;position:relative;top:3px}::ng-deep .vx-form-group label.vx-control-panel .checkpoint-version{background:#f1f1f1;border-radius:2px;color:#042e7d;font-size:10px;font-weight:600;line-height:14px;margin-left:4px;padding:0 2px}::ng-deep .vx-form-group .input,::ng-deep .vx-form-group input[type=text]{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#fff;outline:none;padding:8px 12px;line-height:20px;font-size:13px;color:#747576;transition:all .2s ease-in-out;width:100%;font-weight:400}::ng-deep .vx-form-group .input::-moz-placeholder,::ng-deep .vx-form-group input[type=text]::-moz-placeholder{color:#747576;font-weight:400}::ng-deep .vx-form-group .input:-ms-input-placeholder,::ng-deep .vx-form-group input[type=text]:-ms-input-placeholder{color:#747576;font-weight:400}::ng-deep .vx-form-group .input::placeholder,::ng-deep .vx-form-group input[type=text]::placeholder{color:#747576;font-weight:400}::ng-deep .vx-form-group .input:focus,::ng-deep .vx-form-group .input:hover,::ng-deep .vx-form-group input[type=text]:focus,::ng-deep .vx-form-group input[type=text]:hover{border-color:#1e5dd3;box-shadow:0 0 5px rgba(30,93,211,.27)}::ng-deep .vx-form-group .input.error,::ng-deep .vx-form-group input[type=text].error{border-color:#eb2424;color:#eb2424;margin-bottom:4px}::ng-deep .vx-form-group .input.error:focus,::ng-deep .vx-form-group input[type=text].error:focus{box-shadow:0 0 5px rgba(211,30,30,.27)}::ng-deep .vx-form-group .input:disabled,::ng-deep .vx-form-group input[type=text]:disabled{background:#f1f1f1;cursor:not-allowed;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}::ng-deep .vx-form-group .input:disabled:hover,::ng-deep .vx-form-group input[type=text]:disabled:hover{border-color:#dbdbdb;box-shadow:none}::ng-deep .vx-form-group .input span.text,::ng-deep .vx-form-group input[type=text] span.text{font-size:13px;color:#747576;font-weight:400;display:block;width:100%}::ng-deep .vx-form-group .input .input-group,::ng-deep .vx-form-group input[type=text] .input-group{display:flex;align-items:center}::ng-deep .vx-form-group .input .input-group.counter,::ng-deep .vx-form-group input[type=text] .input-group.counter{min-width:96px;width:96px}::ng-deep .vx-form-group .input .input-group.counter button,::ng-deep .vx-form-group input[type=text] .input-group.counter button{height:24px;width:24px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;color:#747576;font-size:8px;cursor:pointer;outline:none}::ng-deep .vx-form-group .input .input-group.counter input,::ng-deep .vx-form-group input[type=text] .input-group.counter input{-webkit-appearance:textfield;-moz-appearance:textfield;height:24px;width:calc(100% - 48px);border:1px solid #f1f1f1;outline:none;padding:0 6px;text-align:center}::ng-deep .vx-form-group .input .input-group.counter input::-webkit-inner-spin-button,::ng-deep .vx-form-group .input .input-group.counter input::-webkit-outer-spin-button,::ng-deep .vx-form-group input[type=text] .input-group.counter input::-webkit-inner-spin-button,::ng-deep .vx-form-group input[type=text] .input-group.counter input::-webkit-outer-spin-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0}::ng-deep .vx-form-group .input+.file-list,::ng-deep .vx-form-group input[type=text]+.file-list{margin-top:8px}::ng-deep .vx-form-group .input::-moz-placeholder,::ng-deep .vx-form-group input[type=text]::-moz-placeholder{font-size:13px}::ng-deep .vx-form-group .input::placeholder,::ng-deep .vx-form-group input[type=text]::placeholder{font-size:13px}::ng-deep .vx-form-group .input:-ms-input-placeholder,::ng-deep .vx-form-group input[type=text]:-ms-input-placeholder{font-size:13px}::ng-deep .vx-form-group .input::-ms-input-placeholder,::ng-deep .vx-form-group input[type=text]::-ms-input-placeholder{font-size:13px}::ng-deep .vx-form-group .classification{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#fff;padding:8px 12px;display:flex;justify-content:space-between}::ng-deep .vx-form-group .classification label{width:100%;position:relative;z-index:1;margin:0 4px 0 0}::ng-deep .vx-form-group .classification label span{display:block;width:100%;height:24px;border:1px solid #f1f1f1;border-radius:2px;line-height:24px;font-size:10px;text-align:center;color:#747576;font-weight:500;position:relative;text-transform:uppercase}::ng-deep .vx-form-group .classification label span:before{height:2px;content:\"\";top:0;right:0;left:0;border-radius:2px;position:absolute;transition:all .2s ease-in-out}::ng-deep .vx-form-group .classification label input{opacity:0;position:absolute;top:0;right:0;bottom:0;left:0;margin:0;padding:0;width:100%;height:100%;cursor:pointer;z-index:1}::ng-deep .vx-form-group .classification label input:checked+span{color:#fff}::ng-deep .vx-form-group .classification label input:checked+span:before{bottom:0;height:100%;z-index:-1}::ng-deep .vx-form-group .classification label.low span:before{background:#34aa44}::ng-deep .vx-form-group .classification label.low-med span:before{background:#f2bf19}::ng-deep .vx-form-group .classification label.med-high span:before{background:#f29619}::ng-deep .vx-form-group .classification label.high span:before{background:#eb2424}::ng-deep .vx-form-group .classification label:last-of-type{margin-right:0}::ng-deep .vx-form-group .input{display:flex;align-items:center}::ng-deep .vx-form-group .selected{height:40px;border-radius:4px;border:1px solid #f1f1f1;background:#fbfbfb;outline:none;padding:8px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;display:flex;align-items:center;position:relative;justify-content:space-between}::ng-deep .vx-form-group .selected.first-field{z-index:2}::ng-deep .vx-form-group .selected .chip-container{display:flex;width:calc(100% - 60px);align-items:center}::ng-deep .vx-form-group .selected .chip-container.checkpoints{width:calc(100% - 120px)}::ng-deep .vx-form-group .selected .chip-container span.chip{background:#fff;border-radius:2px;box-shadow:0 0 3px #1e5dd31a;height:24px;padding:0 8px;color:#1e5dd3;font-size:12px;display:block;width:auto;max-width:100%;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:24px}::ng-deep .vx-form-group .selected .chip-container span.chip.disabled{background:#f1f1f1;box-shadow:none;color:#747576;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}::ng-deep .vx-form-group .selected .chip-container span.chip i{font-weight:400;margin-right:8px;cursor:pointer;font-size:10px;position:relative;top:1px}::ng-deep .vx-form-group .selected .chip-container span.chip span.step{background:#1e5dd3;border-radius:2px;color:#fff;font-size:9px;line-height:14px;padding:0 4px;font-weight:400;text-align:center;min-width:auto;margin-right:4px}::ng-deep .vx-form-group .selected .chip-container span.chip+span.chip{margin-left:4px}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question{display:flex;align-items:center;justify-content:space-between;width:100%}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question span.value{color:#1e5dd3;font-size:12px;font-weight:400;line-height:24px;padding:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 80px)}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question span.label{background:#f1f1f1;border-radius:2px;color:#042e7d;font-size:9px;font-weight:600;text-transform:uppercase;padding-left:4px;padding-right:4px;line-height:12px;margin-left:8px}::ng-deep .vx-form-group .selected .chip-container span.value{color:#747576;font-size:13px;line-height:20px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 52px);padding:0 4px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text{color:#747576;font-size:10px;font-weight:500;padding:0 8px;width:122px;line-height:14px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text.first{position:relative;min-width:162px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text.first:before{background:#f1f1f1;content:\"\";position:absolute;top:0;right:0;height:calc(100% + 12px);width:1px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text .no{color:#1e5dd3}::ng-deep .vx-form-group .selected .chip-container.plus span.chip{max-width:calc(50% - 35px)}::ng-deep .vx-form-group .selected .chip-container.more-one span.chip{max-width:50%}::ng-deep .vx-form-group .selected .chip-container .chip-inner{background:#fff;border-radius:2px;box-shadow:0 2px 4px #1e5dd31a;line-height:24px;padding:0 4px 0 8px;display:flex;align-items:center}::ng-deep .vx-form-group .selected .chip-container .chip-inner .chip{background:transparent;border-radius:0;box-shadow:none;height:auto;line-height:unset;padding:0;color:#747576;max-width:300px}::ng-deep .vx-form-group .selected .chip-container .chip-inner button.count{border-radius:20px;height:16px;padding:0 6px;border:none;font-size:9px;line-height:16px;margin-left:4px;min-width:20px}::ng-deep .vx-form-group .selected .chip-container .chip-inner button.count.user{background:#34aa44}::ng-deep .vx-form-group .selected .chip-container .chip-inner i.cross{cursor:pointer}::ng-deep .vx-form-group .selected button.count{background:#1e5dd3;border-radius:2px;height:24px;padding:0 8px;border:1px solid #1e5dd3;cursor:pointer;outline:none;color:#fff;font:13px;font-weight:500;line-height:20px;white-space:nowrap;margin-left:8px}::ng-deep .vx-form-group .selected button.edit{border:1px solid #f1f1f1;border-radius:2px;background:#fff;outline:none;cursor:pointer;display:block;height:24px;padding:0 5px 0 4px;font-size:11px;font-weight:500;color:#1e5dd3;text-transform:uppercase;white-space:nowrap;margin-left:8px}::ng-deep .vx-form-group .selected button.edit i{font-weight:400;font-size:8px;margin-right:4px}::ng-deep .vx-form-group .selected button.close-btn{background:transparent;border:none;padding:0;margin-left:8px;font-size:10px;color:#c7381b;display:flex;align-items:center}::ng-deep .vx-form-group .selected .workflow-label{min-width:92px;padding:4px;text-align:center;margin-left:-8px;margin-right:8px;border-right:1px solid #f1f1f1}::ng-deep .vx-form-group .selected .workflow-label p{margin:0;display:block;text-transform:uppercase}::ng-deep .vx-form-group .selected .workflow-label p.title{font-size:9px;line-height:12px;color:#161b2f;font-weight:500}::ng-deep .vx-form-group .selected .workflow-label p.description{font-size:11px;line-height:16px;color:#161b2f;font-weight:600}::ng-deep .vx-form-group .selected .workflow-label+.chip-container{width:calc(100% - 148px)}::ng-deep .vx-form-group .selected+.selected{margin-top:8px}::ng-deep .vx-form-group .selected+app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .selected+app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:5px;text-transform:uppercase}::ng-deep .vx-form-group .selected+app-cs-switch.who-toggle label.cs-switch span.value{color:#747576}::ng-deep .vx-form-group .selected+app-cs-radio{margin-top:8px!important}::ng-deep .vx-form-group .selected~app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;font-weight:500;color:#707070}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group .selected.readOnly{pointer-events:none}::ng-deep .vx-form-group .selected span.chip{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .vx-form-group .select-list{position:absolute;background:#fff;box-shadow:0 0 5px #1e5dd3;top:100%;right:0;left:0;z-index:2}::ng-deep .vx-form-group .select-list .vx-radio-group label.vx-radio-item{width:100%;padding:12px 16px}::ng-deep .vx-form-group .select-list .vx-radio-group label.vx-radio-item:hover{background:#f8f8f8}::ng-deep .vx-form-group marx-editor{margin-top:8px;display:block}::ng-deep .vx-form-group marx-editor .editor-container{border-radius:4px;border:1px solid #dbdbdb}::ng-deep .vx-form-group marx-editor .editor-container .editable-block{min-height:60px;padding:11px 15px;max-height:100px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%}::ng-deep .vx-form-group marx-editor .editor-container .editable-block ul{padding:0 0 0 10px;margin-top:0}::ng-deep .vx-form-group marx-editor .editor-container .editable-block ul li{list-style:disc}::ng-deep .vx-form-group marx-editor .editor-container .editable-block ol{padding:0 0 0 10px;margin-top:0}::ng-deep .vx-form-group marx-editor .editor-container .editable-block ol li{list-style:decimal}::ng-deep .vx-form-group marx-editor .editor-container .editor-tools{z-index:1;border-top:1px solid #dbdbdb;transition:none;border-radius:0 0 3px 3px;position:static}::ng-deep .vx-form-group marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button{height:22px!important;width:22px!important;padding:0 5px}::ng-deep .vx-form-group marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg{height:22px;width:12px}::ng-deep .vx-form-group marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit{width:80px!important;line-height:22px;justify-content:center}::ng-deep .vx-form-group marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button{width:100%!important;height:auto!important}::ng-deep .vx-form-group marx-editor .editor-container:focus-within{border-color:#1e5dd3!important}::ng-deep .vx-form-group marx-editor .editor-container:focus-within .editor-tools{border-color:#1e5dd3!important}::ng-deep .vx-form-group marx-editor .editor-container:hover{border-color:#1e5dd3!important}::ng-deep .vx-form-group marx-editor .editor-container:hover .editor-tools{border-color:#1e5dd3!important}::ng-deep .vx-form-group marx-editor+app-cs-switch{margin-top:8px}::ng-deep .vx-form-group app-cs-switch label.cs-switch span.value{font-size:11px;color:#747576;text-transform:uppercase}::ng-deep .vx-form-group app-cs-switch+app-cs-switch{margin-top:8px}::ng-deep .vx-form-group .date-time-picker{display:flex;justify-content:space-between;height:40px;border-radius:4px;border:1px solid #dbdbdb;padding:11px 0}::ng-deep .vx-form-group .date-time-picker:focus-within{border-color:#1e5dd3;box-shadow:0 0 5px rgba(30,93,211,.27)}::ng-deep .vx-form-group .date-time-picker .picker-group{width:50%;position:relative;display:flex;align-items:center}::ng-deep .vx-form-group .date-time-picker .picker-group:first-of-type{border-right:1px solid #dbdbdb}::ng-deep .vx-form-group .date-time-picker .picker-group:only-of-type{border:none;width:100%}::ng-deep .vx-form-group .date-time-picker .picker-group input{height:38px;background:#fff;line-height:38px;font-size:13px;color:#747576;transition:all .2s ease-in-out;width:100%;font-weight:400;border:none;padding:0 12px 0 34px;outline:none}::ng-deep .vx-form-group .date-time-picker .picker-group input:focus,::ng-deep .vx-form-group .date-time-picker .picker-group input:hover{box-shadow:none;border:none}::ng-deep .vx-form-group .date-time-picker .picker-group input::-moz-placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group input::placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group input:-ms-input-placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group input::-ms-input-placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group i{display:flex;justify-content:center;align-items:center;height:16px;width:16px;position:absolute;left:12px;top:0;color:#bcbcbc;font-size:16px;pointer-events:none}::ng-deep .vx-form-group app-cs-radio.main-filed{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;color:#707070}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group app-cs-radio.disabled{pointer-events:none;opacity:.5;filter:grayscale(1);background:#f1f1f1}::ng-deep .vx-form-group .switch-row{display:flex}::ng-deep .vx-form-group .switch-row app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .switch-row app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:0;text-transform:uppercase;color:#747576!important}::ng-deep .vx-form-group .switch-row app-cs-switch label.cs-switch span.value i{display:inline-flex;font-size:11px;cursor:pointer;color:#1e5dd3;align-items:center;line-height:16px;margin:0 4px}::ng-deep .vx-form-group .switch-row app-cs-switch+app-cs-switch{margin-left:8px}::ng-deep .vx-form-group .switch-row.align-right{justify-content:flex-end}::ng-deep .vx-form-group .switch-row.align-right label.cs-switch span.value{margin-right:8px}::ng-deep .vx-form-group .risk-type-field{background:#f8f8f8;border:1px solid #dbdbdb;border-radius:4px;height:40px;display:flex;align-items:center;padding:4px;position:relative;z-index:1}::ng-deep .vx-form-group .risk-type-field .type-item{width:50%;position:relative}::ng-deep .vx-form-group .risk-type-field .type-item button{background:transparent;border:none;border-radius:0;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase;width:100%;height:32px;padding:0 12px;text-align:left}::ng-deep .vx-form-group .risk-type-field .type-item button.disabled{background:transparent!important;color:#dbdbdb!important;filter:unset!important;opacity:unset!important;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}::ng-deep .vx-form-group .risk-type-field .type-item .info{color:#1e5dd3;font-size:12px;position:absolute;top:10px;right:12px;cursor:pointer}::ng-deep .vx-form-group .risk-type-field .type-item.active button{color:#1e5dd3!important}::ng-deep .vx-form-group .risk-type-field .type-item:nth-child(2).active~.background-glider{transform:translate(100%)}::ng-deep .vx-form-group .risk-type-field .background-glider{background:#fff;border-radius:4px;box-shadow:0 1px 3px #161b2f26;position:absolute;display:flex;width:208px;height:32px;z-index:-1;transition:.25s ease-out}.left{width:36px;height:36px;margin-top:30px;margin-left:-58px;margin-right:20px;display:flex;justify-content:center;align-items:center;position:relative;z-index:10;border-radius:50%}.left.deadline-completed{margin-top:18px}.left.checked{background:transparent}.left img{width:36px}.left .checkIcon{width:32px;height:32px;background:#fff;border-radius:50%;stroke-width:4;stroke:#34aa44;stroke-miterlimit:10;box-shadow:inset 0 0 0 #34aa44;-webkit-animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin-top:0}.left .checkIcon__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;-webkit-animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}.left .checkIcon__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;-webkit-animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}.right{width:100%}.right span.indicator{position:absolute;top:36px;left:-16px;font-size:12px;color:#f0b819;cursor:pointer}.form-group-row{display:flex;position:relative;transition:all .2s ease-in-out}.form-group-row.disabled{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none;filter:grayscale(1);z-index:2}.form-group-row.disabled .left{position:relative}.form-group-row.disabled .left:before{content:\"\";position:absolute;top:2px;right:0;bottom:0;left:2px;background:#fff;opacity:.7;border-radius:50%;width:32px;height:32px}.form-group-row.disabled .right{opacity:.3}.form-group-row.active{pointer-events:none;filter:grayscale(0);z-index:2;opacity:1}.form-group-row.active .right .vx-form-group .custom-input,.form-group-row.active .right .vx-form-group input{border-color:#1e5dd3;box-shadow:0 0 5px rgba(30,93,211,.27)}::ng-deep .radio-group-selector app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .radio-group-selector app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .radio-group-selector app-cs-radio label.radio-item .radio,::ng-deep .radio-group-selector app-cs-radio label.radio-item .radiomark{position:absolute!important;top:9px;left:12px}::ng-deep .radio-group-selector app-cs-radio label.radio-item .value{font-size:11px!important;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0!important;max-width:100%!important;font-weight:500!important;color:#707070!important}::ng-deep .radio-group-selector app-cs-radio label.radio-item .value i{font-size:12px;color:#1e5dd3}::ng-deep .radio-group-selector app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}@-webkit-keyframes strokeCheck{to{stroke-dashoffset:0}}@keyframes strokeCheck{to{stroke-dashoffset:0}}@-webkit-keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #34aa44}}@keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #34aa44}}.action-list{width:220px}.action-list ul{padding:0;margin:0;-webkit-animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}.action-list ul.action-item{display:block}.action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}.action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}.action-list ul.action-item li button i{font-size:17px;margin-right:10px;color:#1c5bd1}.action-list ul.action-item li button:hover{background:#f3f3f3}.action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}.action-list ul.action-item li .avatar-card.within-con{display:block}.action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#4681ef;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}.action-list ul.action-item li .avatar-card .avatar img{width:100%}.action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}.action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;-moz-text-align-last:left;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}.action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#1c5bd1;cursor:pointer;margin-right:5px}.action-list ul.action-item li .avatar-card.no-image{display:block}.action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}.action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}.action-list ul.action-item li .chip-item i{margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}.action-list ul.action-item li .chip-item span{display:block;width:auto;max-width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}.action-list ul.action-item li .chip-item span.id{font-size:9px}.action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}.action-list ul.action-item li .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}.action-list ul.action-item li .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}.action-list ul.action-item li:first-child{-webkit-animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(2){-webkit-animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(3){-webkit-animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(4){-webkit-animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(5){-webkit-animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(6){-webkit-animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(7){-webkit-animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(8){-webkit-animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(9){-webkit-animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(10){-webkit-animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}@-webkit-keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}@keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}@-webkit-keyframes scale-up-center{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}@keyframes scale-up-center{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}p.error-message{font-size:11px;font-weight:400;color:#eb2424;line-height:16px;margin-top:8px;margin-bottom:0}.edit-loader{position:absolute;top:-3px;left:-3px;width:46px;height:46px;transform:rotate(180deg)}.circular-loader{-webkit-animation:rotate 2s linear infinite;animation:rotate 2s linear infinite;height:100%;transform-origin:center center;width:100%;position:absolute;top:0;left:0;margin:auto}.loader-path{stroke-dasharray:150,200;stroke-dashoffset:-10;-webkit-animation:dash 1.5s ease-in-out infinite;animation:dash 1.5s ease-in-out infinite;stroke-linecap:round}@-webkit-keyframes rotate{to{transform:rotate(1turn)}}@keyframes rotate{to{transform:rotate(1turn)}}@-webkit-keyframes dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35}to{stroke-dasharray:89,200;stroke-dashoffset:-124}}@keyframes dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35}to{stroke-dasharray:89,200;stroke-dashoffset:-124}}::ng-deep .dropdown{position:fixed;background:#fff;box-shadow:0 3px 6px #00000029;padding:24px 0;z-index:9;max-height:calc(100vh - 200px);overflow:auto}::ng-deep .dropdown ul.dropdown-list{padding:0 20px;margin:0;display:block}::ng-deep .dropdown ul.dropdown-list li{list-style:none}::ng-deep .dropdown ul.dropdown-list li app-cs-radio{display:flex}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item span.radio{position:absolute;top:12px;left:12px}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item span.value{padding:11px 12px 11px 32px;width:100%;border:1px solid #bcbcbc;border-radius:4px;margin-left:0;max-width:100%}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item svg{position:absolute;top:12px;left:12px}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item input[type=radio]:checked~span.value{background:#e8feeb;border-color:#34aa44}::ng-deep .dropdown ul.dropdown-list li+li{margin-top:8px}app-smiley-dialog{position:relative;z-index:10}app-smiley-dialog-inline{position:absolute;top:-3px;right:0;bottom:0;z-index:999;width:520px;height:calc(100vh + 3px)}::ng-deep .vx-overlay{position:fixed;z-index:3;top:0;right:0;bottom:0;left:0}dp-date-picker{width:100%;position:fixed!important;z-index:14;top:-40px;left:0}dp-date-picker input{width:100%;border:none;opacity:0;pointer-events:none}dp-date-picker input:focus{outline:none}dp-date-picker .dp-popup{width:412px;box-shadow:0 0 20px #161b2f26;background-color:#fff;border-radius:4px;-webkit-animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both}dp-date-picker .dp-popup dp-day-calendar,dp-date-picker .dp-popup dp-month-calendar{width:100%;pointer-events:auto}dp-date-picker .dp-popup dp-day-calendar button,dp-date-picker .dp-popup dp-month-calendar button{background:transparent;border:none;outline:none}dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left,dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right,dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left,dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right,dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:50%;font-size:14px}dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left:hover,dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right:hover,dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:hover,dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left:hover,dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right:hover,dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:hover{background-color:#f3f3f3}dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn{display:none}dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:before,dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:before{content:\"\";height:10px;width:10px;border-radius:50%;background:#000;display:inline-flex}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week,dp-date-picker .dp-popup dp-day-calendar .dp-weekdays,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays{display:flex;justify-content:space-around}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,dp-date-picker .dp-popup dp-day-calendar .dp-weekdays .dp-calendar-weekday,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week .dp-calendar-weekday,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays .dp-calendar-weekday{width:52px;border-left:none;border-bottom-color:#fff;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button,dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button{width:40px;height:40px;border-radius:50%;display:inline-flex;justify-content:center;align-items:center}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button:hover,dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button:hover,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button:hover,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button:hover{background-color:#f3f3f3}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-selected,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-selected,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-selected{background:#1e5dd3}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-current-day,dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-current-day,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-current-day,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-current-day{border:1px solid rgba(0,0,0,.38);color:#1e5dd3;background-color:#fff}dp-date-picker .dp-popup dp-day-calendar .dp-day-calendar-container,dp-date-picker .dp-popup dp-month-calendar .dp-day-calendar-container{padding:20px;border-radius:2px}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-nav-container{display:flex;margin:0 0 20px;border:none}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container .dp-nav-header button,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-nav-container .dp-nav-header button{color:#000;font-size:17px;font-weight:500;margin:0 0 0 12px;padding:0}dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container,dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container{width:80px;display:flex}dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button,dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button{margin:0!important}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-wrapper,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-wrapper{border:none}dp-date-picker .dp-open+div{position:fixed!important;top:0!important;right:0!important;bottom:0!important;left:0!important;display:flex;justify-content:center;align-items:center;z-index:99;pointer-events:none;background:rgba(0,0,0,.3)}@-webkit-keyframes slide-bottom{0%{transform:translateY(-100px)}to{transform:translateY(0)}}@keyframes slide-bottom{0%{transform:translateY(-100px)}to{transform:translateY(0)}}::ng-deep span.file{display:block;width:20px;min-width:20px;border-radius:0 0 2px 2px;position:relative;margin-right:5px;border:1px solid #747576;border-top:none;margin-top:5px;background:#fff}::ng-deep span.file.table{margin-right:8px;width:18px;min-width:18px}::ng-deep span.file.table i{font-size:8px}::ng-deep span.file.table .format{height:8px;font-size:7px;line-height:8px;font-weight:400}::ng-deep span.file:before{position:absolute;border-radius:0;top:-4px;right:-1px;content:\"\";height:4px;width:4px;display:block;background:linear-gradient(45deg,#747576,#747576 1%,#747576 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0));filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file:after{height:4px;left:-1px;right:3px;border-top:1px solid;border-right:none;border-left:1px solid;content:\"\";top:-4px;position:absolute;border-radius:2px 0 0 0;background:#fff}::ng-deep span.file .format{height:10px;font-size:6px;text-transform:uppercase;background:transparent;font-weight:600;text-align:center;display:block;line-height:10px}::ng-deep span.file i{font-size:10px;height:10px;display:flex;align-items:center;justify-content:center;color:#dbdbdb}::ng-deep span.file.docx{width:22px!important}::ng-deep span.file.pdf,::ng-deep span.file.template{border-color:#f31c39}::ng-deep span.file.pdf:before,::ng-deep span.file.template:before{background:linear-gradient(45deg,#f31c39,#f31c39 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0));filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#f31c39\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.pdf:after,::ng-deep span.file.template:after{border-color:#f31c39}::ng-deep span.file.pdf .format,::ng-deep span.file.template .format{color:#f31c39}::ng-deep span.file.css,::ng-deep span.file.less,::ng-deep span.file.scss,::ng-deep span.file.xls,::ng-deep span.file.xlsx{border-color:#34aa44}::ng-deep span.file.css:before,::ng-deep span.file.less:before,::ng-deep span.file.scss:before,::ng-deep span.file.xls:before,::ng-deep span.file.xlsx:before{background:linear-gradient(45deg,#34aa44,#34aa44 1%,#34aa44 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0));filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.css:after,::ng-deep span.file.less:after,::ng-deep span.file.scss:after,::ng-deep span.file.xls:after,::ng-deep span.file.xlsx:after{border-color:#34aa44;color:#34aa44}::ng-deep span.file.css .format,::ng-deep span.file.less .format,::ng-deep span.file.scss .format,::ng-deep span.file.xls .format,::ng-deep span.file.xlsx .format{color:#34aa44}::ng-deep span.file.doc,::ng-deep span.file.docx,::ng-deep span.file.psd{border-color:#1e5dd3}::ng-deep span.file.doc:before,::ng-deep span.file.docx:before,::ng-deep span.file.psd:before{background:linear-gradient(45deg,#1e5dd3,#1e5dd3 1%,#1e5dd3 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0));filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.doc:after,::ng-deep span.file.docx:after,::ng-deep span.file.psd:after{border-color:#1e5dd3}::ng-deep span.file.doc .format,::ng-deep span.file.docx .format,::ng-deep span.file.psd .format{color:#1e5dd3}::ng-deep span.file.ai,::ng-deep span.file.html,::ng-deep span.file.jpeg,::ng-deep span.file.jpg,::ng-deep span.file.png,::ng-deep span.file.ppt{border-color:#f6882f}::ng-deep span.file.ai:before,::ng-deep span.file.html:before,::ng-deep span.file.jpeg:before,::ng-deep span.file.jpg:before,::ng-deep span.file.png:before,::ng-deep span.file.ppt:before{background:linear-gradient(45deg,#f6882f,#f6882f 1%,#f6882f 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0));filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.ai:after,::ng-deep span.file.html:after,::ng-deep span.file.jpeg:after,::ng-deep span.file.jpg:after,::ng-deep span.file.png:after,::ng-deep span.file.ppt:after{border-color:#f6882f}::ng-deep span.file.ai .format,::ng-deep span.file.html .format,::ng-deep span.file.jpeg .format,::ng-deep span.file.jpg .format,::ng-deep span.file.png .format,::ng-deep span.file.ppt .format{color:#f6882f}::ng-deep span.file.php{border-color:#7aa6f7}::ng-deep span.file.php:before{background:linear-gradient(45deg,#7aa6f7,#7aa6f7 1%,#7aa6f7 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0));filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.php:after{border-color:#7aa6f7}::ng-deep span.file.php .format{color:#7aa6f7}::ng-deep ngx-material-timepicker-container .timepicker-backdrop-overlay{background-color:rgba(0,0,0,.05)!important;z-index:9999999999!important}::ng-deep ngx-material-timepicker-container .timepicker-overlay{z-index:9999999999!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker{width:232px!important;border-radius:2px!important;box-shadow:0 4px 30px #161b2f26!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header{background-color:#fff!important;padding:0!important;border-radius:2px 2px 0 0}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container{display:block!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time{color:#000!important;width:150px!important;margin:0 auto;line-height:60px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control .timepicker-dial__control{font-size:40px;background-color:transparent!important;color:#000!important;font-weight:600;text-align:right;caret-color:transparent;outline:none;font-family:Poppins;line-height:56px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control .timepicker-dial__control:focus,::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control .timepicker-dial__control:hover{background-color:transparent!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control:last-of-type .timepicker-dial__control{text-align:left}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time span{padding:0 8px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period{display:flex!important;width:182px;margin:0 auto!important;background:#f1f1f1;padding:4px 10px;border-radius:20px;position:relative}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period:before{background:#f1f1f1;content:\"\";position:absolute;top:15px;left:-25px;width:calc(100% + 50px);height:2px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period{flex-direction:unset!important;position:relative;z-index:1}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period:after{content:\"\";position:absolute;right:-12px;top:0;border-left:14px solid #f1f1f1;border-bottom:12px solid transparent;border-top:12px solid transparent;z-index:-1}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period:before{content:\"\";position:absolute;left:-18px;top:0;border-right:14px solid #f1f1f1;border-bottom:12px solid transparent;border-top:12px solid transparent;z-index:-1}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period button{font-size:11px;background-color:transparent;padding:0;border-radius:20px;color:#747576;font-weight:600;font-family:Poppins;width:84px;height:24px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period button.timepicker-dial__item_active{background:#fff!important;color:#1e5dd3!important;box-shadow:0 1px 2px #dbdbdb}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period button+button{margin-left:0!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face{width:200px!important;height:200px!important;padding:10px!important;background:transparent!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number--outer{height:calc(224px / 2 - 20px)!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number--outer span{color:#000}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number--outer span.active{color:#fff}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__clock-hand{height:80px!important;top:calc(50% - 80px)!important;background-color:#1e5dd3!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number>span.active{background-color:#1e5dd3!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__clock-hand_minute:before{border:4px solid #1e5dd3!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions{display:flex!important;padding:10px 0 0!important;background:#fff!important;justify-content:space-around!important;border-radius:0 0 2px 2px!important;overflow:hidden}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions div:first-child ngx-material-timepicker-button button.timepicker-button{background:#f8f8f8;color:#1e5dd3}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions div ngx-material-timepicker-button button.timepicker-button{line-height:28px!important;width:100%;background:#1e5dd3;color:#fff;border-radius:0!important;height:32px!important;width:116px!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions div ngx-material-timepicker-button button.timepicker-button span{font-weight:500!important;font-size:11px;font-family:Poppins}::ng-deep marx-modal .popup-modal-background{background-color:#161b2fcc!important}"]
                 },] }
     ];
@@ -30345,6 +30362,7 @@
                 rcList: [],
                 assignorsList: [],
                 assigneesList: [],
+                reviewerList: [],
                 parentResponsibility: [],
                 memberId: ''
             };
@@ -30419,6 +30437,7 @@
                     rcList: [],
                     assignorsList: [],
                     assigneesList: [],
+                    reviewerList: [],
                     parentResponsibility: [],
                     memberId: ''
                 };
@@ -30440,10 +30459,10 @@
                 reader.onload = function (e) {
                     var bstr = e.target.result;
                     var wb = XLSX__namespace.read(bstr, { type: 'binary' });
-                    var wsname = wb.SheetNames[0];
-                    var sheet2 = wb.SheetNames[1];
-                    var sheet3 = wb.SheetNames[2];
-                    var wsname1 = wb.SheetNames[3];
+                    var wsname = wb.SheetNames[1];
+                    var sheet2 = wb.SheetNames[2];
+                    var sheet3 = wb.SheetNames[3];
+                    var wsname1 = wb.SheetNames[4];
                     var ws = wb.Sheets[wsname];
                     var sheetReport2 = wb.Sheets[sheet2];
                     var sheetReport3 = wb.Sheets[sheet3];
@@ -30495,7 +30514,7 @@
                 res.forEach(function (el) {
                     isUndefined = isUndefined + el;
                 });
-                if (sheetValue[4][1] === 'Program') {
+                if (sheetValue[2] && sheetValue[2][1] === 'Program') {
                     return !((res === null || res === void 0 ? void 0 : res.length) === 9 && res[8] === '' && !isUndefined.length);
                 }
                 else {
@@ -30507,9 +30526,9 @@
                 this.isWrongFile = true;
                 return;
             }
-            responsibilityBulkUpload.header = lodashEs.cloneDeep(data[4]);
-            responsibilityBulkUpload.subHeading = lodashEs.cloneDeep(data[5]);
-            data = data.slice(7);
+            responsibilityBulkUpload.header = lodashEs.cloneDeep(data[2]);
+            responsibilityBulkUpload.subHeading = lodashEs.cloneDeep(data[3]);
+            data = data.slice(5);
             if ((this.member_obj_id != this.templateInfo.memberId)) {
                 this.errorMessage = 'The incorrect file has been uploaded. Please upload the template which you downloaded from here.' + ' RETRY';
                 this.isWrongFile = true;
@@ -30721,7 +30740,7 @@
             var responsibilityBulkUpload = (_c = (_b = (_a = this.bulkUpload) === null || _a === void 0 ? void 0 : _a.frequency) === null || _b === void 0 ? void 0 : _b.reports) === null || _c === void 0 ? void 0 : _c.concat((_e = (_d = this.bulkUpload) === null || _d === void 0 ? void 0 : _d.ongoing) === null || _e === void 0 ? void 0 : _e.reports, (_g = (_f = this.bulkUpload) === null || _f === void 0 ? void 0 : _f.onCompletion) === null || _g === void 0 ? void 0 : _g.reports);
             // this.responsibilityBulkUpload.reports.forEach((report: any) => {
             responsibilityBulkUpload.forEach(function (report) {
-                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
+                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2;
                 if (report.isValid) {
                     if ((report === null || report === void 0 ? void 0 : report.responsibilityCategory) === null) {
                         report.responsibilityCategory = '';
@@ -30769,27 +30788,34 @@
                         created_by: (assignorDetails) ? _this.memberId : 0,
                         report_name: (_g = report === null || report === void 0 ? void 0 : report.responsibilityName) !== null && _g !== void 0 ? _g : '',
                         entrusted_to: (_j = (_h = report === null || report === void 0 ? void 0 : report.assignee) === null || _h === void 0 ? void 0 : _h.split(' (')[0]) !== null && _j !== void 0 ? _j : '',
-                        entrusted_to_id: _this.returnIds(report === null || report === void 0 ? void 0 : report.assignee, 'entrusted_to'),
-                        email_address: (_m = (_l = (_k = report === null || report === void 0 ? void 0 : report.assignee) === null || _k === void 0 ? void 0 : _k.split(' (')[1]) === null || _l === void 0 ? void 0 : _l.replace(')', '')) !== null && _m !== void 0 ? _m : '',
-                        isGroupAssignTo: ((_o = report === null || report === void 0 ? void 0 : report.assigneeType) === null || _o === void 0 ? void 0 : _o.includes('Any')) ? 1 : 0,
+                        entrusted_to_id: _this.isGroupSelected(report === null || report === void 0 ? void 0 : report.assignee) ? _this.getEmployeeIdFromGroup(report === null || report === void 0 ? void 0 : report.assignee) : (_l = (_k = _this.returnIds(report === null || report === void 0 ? void 0 : report.assignee, 'entrusted_to')) === null || _k === void 0 ? void 0 : _k.toString()) !== null && _l !== void 0 ? _l : '',
+                        email_address: !_this.isGroupSelected(report === null || report === void 0 ? void 0 : report.assignee) ? ((_p = (_o = (_m = report === null || report === void 0 ? void 0 : report.assignee) === null || _m === void 0 ? void 0 : _m.split(' (')[1]) === null || _o === void 0 ? void 0 : _o.replace(')', '')) !== null && _p !== void 0 ? _p : '') : '',
+                        isGroupAssignTo: ((_q = report === null || report === void 0 ? void 0 : report.assigneeType) === null || _q === void 0 ? void 0 : _q.includes('Any')) ? 1 : 0,
                         // category_name: categoryName,
                         category_name_with_tree: '',
-                        category_id: (_q = (_p = _this.getProgramId(report === null || report === void 0 ? void 0 : report.program, report === null || report === void 0 ? void 0 : report.programCategory).categoryId) === null || _p === void 0 ? void 0 : _p.toString()) !== null && _q !== void 0 ? _q : '',
-                        program_cat_ids: ((_r = _this.getProgramId(report === null || report === void 0 ? void 0 : report.program, report === null || report === void 0 ? void 0 : report.programCategory)) === null || _r === void 0 ? void 0 : _r.childProgramId) ? [(_s = _this.getProgramId(report === null || report === void 0 ? void 0 : report.program, report === null || report === void 0 ? void 0 : report.programCategory)) === null || _s === void 0 ? void 0 : _s.childProgramId] : [],
+                        category_id: (_s = (_r = _this.getProgramId(report === null || report === void 0 ? void 0 : report.program, report === null || report === void 0 ? void 0 : report.programCategory).categoryId) === null || _r === void 0 ? void 0 : _r.toString()) !== null && _s !== void 0 ? _s : '',
+                        program_cat_ids: ((_t = _this.getProgramId(report === null || report === void 0 ? void 0 : report.program, report === null || report === void 0 ? void 0 : report.programCategory)) === null || _t === void 0 ? void 0 : _t.childProgramId) ? [(_u = _this.getProgramId(report === null || report === void 0 ? void 0 : report.program, report === null || report === void 0 ? void 0 : report.programCategory)) === null || _u === void 0 ? void 0 : _u.childProgramId] : [],
                         rc_name: rcDetails ? rcDetails === null || rcDetails === void 0 ? void 0 : rcDetails.name : '',
                         rc_id: rcDetails ? rcDetails === null || rcDetails === void 0 ? void 0 : rcDetails.rcId : 0,
                         entity_tree: (rcDetails && (rcDetails === null || rcDetails === void 0 ? void 0 : rcDetails.rcId)) ? [{
                                 parent_rc_ids: rcDetails ? rcDetails === null || rcDetails === void 0 ? void 0 : rcDetails.parentIds : [],
                                 rc_id: rcDetails ? rcDetails === null || rcDetails === void 0 ? void 0 : rcDetails.rcId : 0
                             }] : [],
+                        userGroupIds: {
+                            assigneeAllGroupIds: (!((_v = report === null || report === void 0 ? void 0 : report.assigneeType) === null || _v === void 0 ? void 0 : _v.includes('Any')) && _this.isGroupSelected(report === null || report === void 0 ? void 0 : report.assignee)) ? [_this.returnIds(report === null || report === void 0 ? void 0 : report.assignee, 'entrusted_to')] : [],
+                            assigneeAnyoneGroupIds: (((_w = report === null || report === void 0 ? void 0 : report.assigneeType) === null || _w === void 0 ? void 0 : _w.includes('Any')) && _this.isGroupSelected(report === null || report === void 0 ? void 0 : report.assignee)) ? [_this.returnIds(report === null || report === void 0 ? void 0 : report.assignee, 'entrusted_to')] : [],
+                            ccEmailGroupIds: [],
+                            failureCCEmailGroupIds: [],
+                            reviewerGroupIds: []
+                        },
                         frequency_handler: frequencyValue,
                         compliance_type: frequencyValue === null || frequencyValue === void 0 ? void 0 : frequencyValue.split('~')[0],
                         frequency_description: report === null || report === void 0 ? void 0 : report.frequency,
                         start_date: (report === null || report === void 0 ? void 0 : report.day) ? startDate : currentDate + ' 00:00:00',
-                        risk_class: (_t = report === null || report === void 0 ? void 0 : report.reportClass) !== null && _t !== void 0 ? _t : '',
+                        risk_class: (_x = report === null || report === void 0 ? void 0 : report.reportClass) !== null && _x !== void 0 ? _x : '',
                         risk_classId: (report === null || report === void 0 ? void 0 : report.reportClass) ? _this.returnIds(report === null || report === void 0 ? void 0 : report.reportClass, 'risk_class') : ((_this.riskClassEnabled) ? 1 : 2),
                         doc_utc: 0,
-                        comment: (_u = report === null || report === void 0 ? void 0 : report.notes) !== null && _u !== void 0 ? _u : '',
+                        comment: (_y = report === null || report === void 0 ? void 0 : report.notes) !== null && _y !== void 0 ? _y : '',
                         cc_mail: ccDetails ? ccDetails === null || ccDetails === void 0 ? void 0 : ccDetails.email : '',
                         cc_mail_id: ccDetails ? ccDetails === null || ccDetails === void 0 ? void 0 : ccDetails.employeeId : '',
                         cc_failed_mail: ccFailureDetails ? ccFailureDetails === null || ccFailureDetails === void 0 ? void 0 : ccFailureDetails.email : '',
@@ -30798,7 +30824,7 @@
                         responsibilityWindow: (frequencyType === '1') ? 0 : completeDays,
                         failed_after: notCompleteDays,
                         excel_sheet_name: "",
-                        report_upload_flag: (((report === null || report === void 0 ? void 0 : report.isFormat) === 'Yes') && ((_v = report === null || report === void 0 ? void 0 : report.formatForResponsibility) === null || _v === void 0 ? void 0 : _v.length)) ? 1 : 0,
+                        report_upload_flag: (((report === null || report === void 0 ? void 0 : report.isFormat) === 'Yes') && ((_z = report === null || report === void 0 ? void 0 : report.formatForResponsibility) === null || _z === void 0 ? void 0 : _z.length)) ? 1 : 0,
                         report_id: 0,
                         is_assigned_flag: 0,
                         private_library_id: 0,
@@ -30818,14 +30844,14 @@
                         reviewerFailure: ((report === null || report === void 0 ? void 0 : report.reviewWillBeFailedAfter) && (report === null || report === void 0 ? void 0 : report.reviewWillBeFailedAfter) !== '') ? report === null || report === void 0 ? void 0 : report.reviewWillBeFailedAfter : 2,
                         reviewer_email: reviewerDetails ? reviewerDetails === null || reviewerDetails === void 0 ? void 0 : reviewerDetails.email : '',
                         formatForResponsibility: (report === null || report === void 0 ? void 0 : report.formatForResponsibility) ? report.formatForResponsibility : '',
-                        documentaryEvidence: (_w = report === null || report === void 0 ? void 0 : report.evidenceNotes) !== null && _w !== void 0 ? _w : '',
+                        documentaryEvidence: (_0 = report === null || report === void 0 ? void 0 : report.evidenceNotes) !== null && _0 !== void 0 ? _0 : '',
                         isdocumentaryEvidence: (report.documentEvidenceRequired === 'Yes') ? 1 : 0,
-                        objective: (_x = report.objective) !== null && _x !== void 0 ? _x : '',
+                        objective: (_1 = report.objective) !== null && _1 !== void 0 ? _1 : '',
                         excel_sheet_info: _this.fileResponse,
                         showList: false,
                         custom_tags: '[]',
                         questionnaire_type: '',
-                        on_completion_of_type: ((report === null || report === void 0 ? void 0 : report.frequency) === 'On Completion of' || ((_y = report === null || report === void 0 ? void 0 : report.frequency) === null || _y === void 0 ? void 0 : _y.toLowerCase()) === 'ongoing') ? 1 : 0,
+                        on_completion_of_type: ((report === null || report === void 0 ? void 0 : report.frequency) === 'On Completion of' || ((_2 = report === null || report === void 0 ? void 0 : report.frequency) === null || _2 === void 0 ? void 0 : _2.toLowerCase()) === 'ongoing') ? 1 : 0,
                         on_completion_of: _this.returnIds(report === null || report === void 0 ? void 0 : report.parentResponsibility, 'parentResponsibility') ? [_this.returnIds(report === null || report === void 0 ? void 0 : report.parentResponsibility, 'parentResponsibility')] : [],
                     };
                     payload.push(obj);
@@ -30845,6 +30871,7 @@
             });
         };
         AddMultipleResponsibilityWithTabComponent.prototype.returnIds = function (item, key) {
+            var _a, _b, _c;
             switch (key) {
                 case 'rc_id':
                     var rcObj_1 = { name: '', rcId: 0, parentIds: [] };
@@ -30864,7 +30891,7 @@
                     break;
                 case 'reviewer':
                     var reviewerObj_1 = { name: '', employeeId: 0, email: '' };
-                    this.templateInfo.assigneesList.forEach(function (reviewerElement) {
+                    (_a = this.templateInfo) === null || _a === void 0 ? void 0 : _a.reviewerList.forEach(function (reviewerElement) {
                         if (reviewerElement.nameAndEmail == item) {
                             reviewerObj_1 = {
                                 name: reviewerElement.name,
@@ -30890,7 +30917,7 @@
                     break;
                 case 'cc':
                     var ccObj_1 = { name: '', employeeId: 0, email: '' };
-                    this.templateInfo.assigneesList.forEach(function (ccElement) {
+                    (_b = this.templateInfo) === null || _b === void 0 ? void 0 : _b.reviewerList.forEach(function (ccElement) {
                         if (ccElement.nameAndEmail == item) {
                             ccObj_1 = {
                                 name: ccElement.name,
@@ -30903,7 +30930,7 @@
                     break;
                 case 'ccFailure':
                     var ccfObj_1 = { name: '', employeeId: 0, email: '' };
-                    this.templateInfo.assigneesList.forEach(function (ccfElement) {
+                    (_c = this.templateInfo) === null || _c === void 0 ? void 0 : _c.reviewerList.forEach(function (ccfElement) {
                         if (ccfElement.nameAndEmail == item) {
                             ccfObj_1 = {
                                 name: ccfElement.name,
@@ -30978,6 +31005,7 @@
                 rcList: [],
                 assignorsList: [],
                 assigneesList: [],
+                reviewerList: [],
                 memberId: ''
             };
             this.isFileEmpty = false;
@@ -31113,8 +31141,19 @@
                 }
                 /* Checking if the element[2] is not empty and not equal to space. If it is not empty and not
                 equal to space, then it is pushing the assignee object to the assigneesList array. */
-                if (element[2] && element[2] != ' ') {
+                if (element[19] && element[19] != ' ') {
                     var assignee = {
+                        nameAndEmail: element[19],
+                        // name: element[11].split(' (')[0],
+                        name: element[19],
+                        email: element[19],
+                        employee_id: element[20],
+                        my_member_id: JSON.parse(element[21])
+                    };
+                    _this.templateInfo.assigneesList.push(assignee);
+                }
+                if (element[2] && element[2] != ' ') {
+                    var reviewer = {
                         nameAndEmail: element[2],
                         // name: element[11].split(' (')[0],
                         name: element[0],
@@ -31122,7 +31161,7 @@
                         employee_id: element[3],
                         my_member_id: element[4]
                     };
-                    _this.templateInfo.assigneesList.push(assignee);
+                    _this.templateInfo.reviewerList.push(reviewer);
                 }
                 /* Checking if the element[2] is not empty and not equal to space. If it is not empty and not
                 equal to space, it will create an object and push it to the assignorsList array. */
@@ -31156,7 +31195,7 @@
                         var childCategory = [];
                         /* Creating a list of child categories. */
                         for (var j = 1; true; j++) {
-                            if (tempList[j][index]) {
+                            if (tempList[j] && tempList[j][index]) {
                                 var category_1 = {
                                     name: tempList[j][index - 1],
                                     id: tempList[j][index],
@@ -31512,9 +31551,9 @@
             var program = (_b = (_a = this.templateInfo) === null || _a === void 0 ? void 0 : _a.categoryList) === null || _b === void 0 ? void 0 : _b.filter(function (program) { return (program === null || program === void 0 ? void 0 : program.programName) === (data === null || data === void 0 ? void 0 : data.program); });
             var selectedAssignee = (_d = (_c = this.templateInfo) === null || _c === void 0 ? void 0 : _c.assigneesList) === null || _d === void 0 ? void 0 : _d.filter(function (assignee) { return (assignee === null || assignee === void 0 ? void 0 : assignee.nameAndEmail) === (data === null || data === void 0 ? void 0 : data.assignee); });
             var selectedAssignor = (_f = (_e = this.templateInfo) === null || _e === void 0 ? void 0 : _e.assignorsList) === null || _f === void 0 ? void 0 : _f.filter(function (assignor) { return (assignor === null || assignor === void 0 ? void 0 : assignor.nameAndEmail) === (data === null || data === void 0 ? void 0 : data.assignor); });
-            var selectedReviewer = (_h = (_g = this.templateInfo) === null || _g === void 0 ? void 0 : _g.assigneesList) === null || _h === void 0 ? void 0 : _h.filter(function (reviewer) { return (reviewer === null || reviewer === void 0 ? void 0 : reviewer.nameAndEmail) === (data === null || data === void 0 ? void 0 : data.reviewer); });
-            var selectedOverseer = (_k = (_j = this.templateInfo) === null || _j === void 0 ? void 0 : _j.assigneesList) === null || _k === void 0 ? void 0 : _k.filter(function (overseer) { return (overseer === null || overseer === void 0 ? void 0 : overseer.nameAndEmail) === (data === null || data === void 0 ? void 0 : data.overseer); });
-            var selectedNotifyOnFailure = (_m = (_l = this.templateInfo) === null || _l === void 0 ? void 0 : _l.assigneesList) === null || _m === void 0 ? void 0 : _m.filter(function (notifyOnFailure) { return (notifyOnFailure === null || notifyOnFailure === void 0 ? void 0 : notifyOnFailure.nameAndEmail) === (data === null || data === void 0 ? void 0 : data.notifyOnFailure); });
+            var selectedReviewer = (_h = (_g = this.templateInfo) === null || _g === void 0 ? void 0 : _g.reviewerList) === null || _h === void 0 ? void 0 : _h.filter(function (reviewer) { return (reviewer === null || reviewer === void 0 ? void 0 : reviewer.nameAndEmail) === (data === null || data === void 0 ? void 0 : data.reviewer); });
+            var selectedOverseer = (_k = (_j = this.templateInfo) === null || _j === void 0 ? void 0 : _j.reviewerList) === null || _k === void 0 ? void 0 : _k.filter(function (overseer) { return (overseer === null || overseer === void 0 ? void 0 : overseer.nameAndEmail) === (data === null || data === void 0 ? void 0 : data.overseer); });
+            var selectedNotifyOnFailure = (_m = (_l = this.templateInfo) === null || _l === void 0 ? void 0 : _l.reviewerList) === null || _m === void 0 ? void 0 : _m.filter(function (notifyOnFailure) { return (notifyOnFailure === null || notifyOnFailure === void 0 ? void 0 : notifyOnFailure.nameAndEmail) === (data === null || data === void 0 ? void 0 : data.notifyOnFailure); });
             var isValidAssignee = true;
             var isValidAssignor = true;
             var isValidReviewer = true;
@@ -31574,6 +31613,46 @@
                 categoryId: categoryId,
             };
         };
+        /**
+         * It takes a string as an argument and returns a string.
+         * @param {any} item - this is the name of the group that is selected from the dropdown.
+         * it will return employee id in this form '1234,2345'.
+         */
+        AddMultipleResponsibilityWithTabComponent.prototype.getEmployeeIdFromGroup = function (item) {
+            var _this = this;
+            var _a, _b;
+            var empId = [];
+            var employee_id = [];
+            (_b = (_a = this.templateInfo) === null || _a === void 0 ? void 0 : _a.assigneesList) === null || _b === void 0 ? void 0 : _b.forEach(function (enElement) {
+                if ((enElement === null || enElement === void 0 ? void 0 : enElement.nameAndEmail) == item) {
+                    empId = enElement === null || enElement === void 0 ? void 0 : enElement.my_member_id;
+                }
+            });
+            if (empId === null || empId === void 0 ? void 0 : empId.length) {
+                empId === null || empId === void 0 ? void 0 : empId.forEach(function (id) {
+                    var _a;
+                    (_a = _this.templateInfo) === null || _a === void 0 ? void 0 : _a.reviewerList.forEach(function (user) {
+                        if ((user === null || user === void 0 ? void 0 : user.my_member_id) == id) {
+                            employee_id === null || employee_id === void 0 ? void 0 : employee_id.push(user === null || user === void 0 ? void 0 : user.employee_id);
+                        }
+                    });
+                });
+            }
+            return employee_id === null || employee_id === void 0 ? void 0 : employee_id.toString();
+        };
+        /**
+         * If the item is a group, return true, otherwise return false.
+         * @param {any} item - any - the item that is being checked
+         */
+        AddMultipleResponsibilityWithTabComponent.prototype.isGroupSelected = function (item) {
+            var isGroup = false;
+            this.templateInfo.assigneesList.forEach(function (enElement) {
+                if (enElement.nameAndEmail == item && ((item === null || item === void 0 ? void 0 : item.includes('Users)')) || (item === null || item === void 0 ? void 0 : item.includes('User)'))) && typeof (enElement === null || enElement === void 0 ? void 0 : enElement.my_member_id) == 'object') {
+                    isGroup = true;
+                }
+            });
+            return isGroup;
+        };
         return AddMultipleResponsibilityWithTabComponent;
     }());
     AddMultipleResponsibilityWithTabComponent.decorators = [