vcomply-workflow-engine 6.0.85 → 6.0.87

package/fesm2022/vcomply-workflow-engine.mjs

@@ -30954,6 +30954,12 @@ class WorkflowComplianceComponent {
         this.setFeatureFlags();
         this.pickerChanged.emit(false);
         this.getInitialData();
+        this.populateRCList();
+    }
+    populateRCList() {
+        if (this.openedFrom === 'RISK_TREATMENT' && this.mode === 'CREATE') {
+            this.getRCList();
+        }
     }
     setFeatureFlags() {
         this.featureFlag_groups = this.feature.isFeatureEnabled('ff_responsibility_groups');
@@ -30970,6 +30976,9 @@ class WorkflowComplianceComponent {
         this.getOrganizationDetails();
         this.getUserDetails();
         this.shortMonth = this.frequencyService.monthArray.map((month) => month.substring(0, 3));
+        if (this.openedFrom === 'RISK_TREATMENT') {
+            this.getRCDetailsinRiskTreatment();
+        }
         if (this.mode === 'CREATE') {
             this.organizationId = this.authService.getOrganizationId();
             this.memberId = this.authService.getMemberId();
@@ -30988,6 +30997,10 @@ class WorkflowComplianceComponent {
         this.setResponsibilityName();
         this.hideElementsFromMoreOptions.emit(this.hiddenList);
     }
+    getRCDetailsinRiskTreatment() {
+        this.responsibilityForm.rc = this.setList(this.responsibilityCentersList, [this.selectedRC], 'item_id');
+        this.moreOptions.RC = true;
+    }
     getOrgDetails() {
         this.organizationCommonService?.getOrgDetailsInfo()?.subscribe({
             next: (res) => {
@@ -46651,8 +46664,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }], ctorParameters: function () { return []; } });
 
+const RISK_CLASS_LIST = ['high', 'low-medium', 'low', 'medium-high'];
+const VALIDATION_MESSAGES = {
+    RISK_CLASS: 'Invalid Risk Classification',
+};
+
+class RiskClassPipe {
+    transform(value) {
+        return RISK_CLASS_LIST.includes(value?.toLowerCase());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RiskClassPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: RiskClassPipe, name: "riskClass" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RiskClassPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'riskClass',
+                }]
+        }] });
+
 class BulkResponsibilityViewComponent {
     constructor() {
+        this.VALIDATION_MESSAGES = VALIDATION_MESSAGES;
         this.loader = false;
         this.tabType = 'frequency';
         this.submitResponsibilityBulkUpload = new EventEmitter();
@@ -46691,11 +46724,11 @@ class BulkResponsibilityViewComponent {
         this.cancel.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BulkResponsibilityViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: BulkResponsibilityViewComponent, selector: "app-bulk-responsibility-view", inputs: { responsibilityBulkUpload: "responsibilityBulkUpload", fileName: "fileName", defaultOwner: "defaultOwner", loader: "loader", tabType: "tabType", bulkUpload: "bulkUpload", responsibilityType: "responsibilityType" }, outputs: { submitResponsibilityBulkUpload: "submitResponsibilityBulkUpload", cancel: "cancel", selectedTab: "selectedTab" }, usesOnChanges: true, ngImport: i0, template: "\n<ng-container *ngIf=\"responsibilityType === 'singleTab'\">\n<div class=\"bulk-view\">\n    <div class=\"bulk-view-head\">\n        <h2 class=\"bulk-view-title\">\n            {{fileName}}\n        </h2>\n    </div>\n    <div class=\"bulk-view-body\">\n        <div class=\"exel-view\">\n            <div class=\"exel-view-row head\">\n                <div class=\"exel-view-column sl-no\">#</div>\n                <div class=\"exel-view-column\" *ngFor=\"let heading of responsibilityBulkUpload?.header\"\n                    [class.large]=\"heading && heading.startsWith('Inherent')\">\n                    <ng-container *ngIf=\"heading && !(heading.startsWith('Due')) && !(heading.startsWith('Oversight'))\">\n                        {{(heading.includes('*')? heading.replace('*', '') : heading)}}\n                        <span *ngIf=\"heading.includes('*')\" class=\"required\">*</span>\n                    </ng-container>\n                    <ng-container *ngIf=\"heading && heading.startsWith('Due')\">\n                        <div class=\"exel-view-row\">\n                            <div class=\"exel-view-column large\">Due Date</div>\n                        </div>\n                        <div class=\"exel-view-row multi-column\">\n                            <div class=\"exel-view-column\">Day</div>\n                            <div class=\"exel-view-column\">Month</div>\n                        </div>\n                    </ng-container>\n                    <ng-container *ngIf=\"heading && heading.startsWith('Oversight')\">\n                        <div class=\"exel-view-row\">\n                            <div class=\"exel-view-column large\">Oversight </div>\n                        </div>\n                        <div class=\"exel-view-row multi-column\">\n                            <div class=\"exel-view-column\">Always Notify</div>\n                            <div class=\"exel-view-column\">Notify on Failure</div>\n                        </div>\n                    </ng-container>\n                </div>\n\n            </div>\n            <div class=\"exel-view-row\" *ngFor=\"let report of responsibilityBulkUpload?.reports; let i = index\">\n                <div class=\"exel-view-column sl-no\">{{i+1}}</div>\n\n                <div class=\"exel-view-column\" [class.error]=\"!report.responsibilityName\">{{report?.responsibilityName}}\n                    <i *ngIf=\"!report?.responsibilityName\" class=\"icons\"\n                        [appTooltip]=\"'Enter a name for this responsibility.'\" placement=\"bottom-right\" type=\"white\"\n                        delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                </div>\n                <div class=\"exel-view-column\">\n                    {{report?.assignor}}\n                    <i *ngIf=\"((report?.assignor) && (report?.notifyOnFailure == report?.assignor||report?.alwaysNotify == report?.assignor))\"\n                        class=\"icons\"\n                        [appTooltip]=\"'The Overseer cannot also be the Assignor of this responsibility. Select another user as the Assignor.'\"\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                    </i>\n<!--\n                    <i *ngIf=\"((report?.assignor) && (report?.reviewer == report?.assignor))\"\n                        class=\"icons\"\n                        [appTooltip]=\"'The Reviewer cannot also be the Assignor of this responsibility. Select another user as the Assignor.'\"\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                    </i>     -->\n                </div>\n                <div class=\"exel-view-column\">\n                    {{report?.assignee}}\n\n                    <i *ngIf=\"((report?.assignee) && (report?.notifyOnFailure == report?.assignee||report?.alwaysNotify == report?.assignee))\"\n                        class=\"icons\"\n                        [appTooltip]=\"'The Overseer cannot also be the Assignee of this responsibility. Select another user as the Assignee.'\"\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                    </i>\n\n                    <i *ngIf=\"((report?.assignee) && (report?.reviewer == report?.assignee))\"\n                        class=\"icons\"\n                        [appTooltip]=\"'The Reviewer cannot also be the Assignee of this responsibility. Select another user as the Assignee.'\"\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                    </i>\n                    <i *ngIf=\"(!report?.assignee) || (!report?.isValidUser)\"\n                    class=\"icons\"\n                    [appTooltip]=\"'Select the user responsible for completing this responsibility. '\"\n                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                    </i>\n                </div>\n                <div class=\"exel-view-column\" id=\"resCategory\" *ngIf=\"report?.responsibilityCategory!==null\">{{report?.responsibilityCategory}}</div>\n                <div class=\"exel-view-column\" [class.error]=\"!report.frequency\">{{report?.frequency}}\n                    <i *ngIf=\"!report?.frequency\" class=\"icons\" [appTooltip]=\"'Select a frequency for this responsibility.'\"\n                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                </div>\n                <div class=\"exel-view-column multi-column\">\n                    <div class=\"exel-view-row\">\n                        <div class=\"exel-view-column\" [class.error]=\"!report.isValidDueDate\">{{report?.day}}\n                            <i *ngIf=\"!report?.isValidDueDate\" class=\"icons\" [appTooltip]=\"'Invalid Due Date.'\"\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                            <i *ngIf=\"report?.isPastDate\" class=\"icons\" [appTooltip]=\"'This date occurs in the past. Select a future date.'\"\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                        </div>\n                        <div class=\"exel-view-column\" [class.error]=\"!report.isValidDueDate\">{{report?.month}}\n                            <i *ngIf=\"!report?.isValidDueDate\" class=\"icons\" [appTooltip]=\"'Invalid Due Date.'\"\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                            <i *ngIf=\"report?.isPastDate\" class=\"icons\" [appTooltip]=\"'This date occurs in the past. Select a future date.'\"\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"exel-view-column\">{{report?.responsibilityWindow}}</div>\n                <div class=\"exel-view-column\">{{report?.failedAfter}}</div>\n                <div class=\"exel-view-column\">{{report?.reportClass}}</div>\n                <div class=\"exel-view-column\">{{report?.responsibilityCenter}}</div>\n                <div class=\"exel-view-column\">\n                    {{report?.reviewer}}\n\n                    <i *ngIf=\"(report?.reviewer) && ((report?.reviewer == report?.alwaysNotify) || (report?.reviewer == report?.notifyOnFailure))\"\n                        class=\"icons\"\n                        [appTooltip]=\"'The Overseer cannot also be the Reviewer of this responsibility. Select another user as the Reviewer'\"\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                    </i>\n\n                    <i *ngIf=\"report?.reviewer && (report?.reviewer == report?.assignee)\" class=\"icons\"\n                        [appTooltip]=\"'The Assignee cannot also be the Reviewer of this responsibility. Select another user as the Reviewer.'\"\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                    </i>\n                    <!-- <i *ngIf=\"(report?.reviewer && report?.assignor)\"\n                        class=\"icons\"\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'\"\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                    </i> -->\n                </div>\n                <div class=\"exel-view-column\">{{report?.reviewToBeCompletedWithin}}</div>\n                <div class=\"exel-view-column\">{{report?.reviewWillBeFailedAfter}}</div>\n                <div class=\"exel-view-column\">{{report?.formatForResponsibility}}</div>\n                <div class=\"exel-view-column\">{{report?.notes}}</div>\n                <div class=\"exel-view-column\">{{report?.documentEvidenceRequired}}</div>\n                <div class=\"exel-view-column multi-column\">\n                    <div class=\"exel-view-row\">\n                        <div class=\"exel-view-column\">\n                            {{report?.alwaysNotify}}\n                            <i *ngIf=\"(report?.alwaysNotify) && ((report?.reviewer == report?.alwaysNotify))\"\n                                class=\"icons\"\n                                [appTooltip]=\"'The Reviewer cannot also be the Overseer of this responsibility. Select another user as the Overseer.'\"\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                            </i>\n\n                            <i *ngIf=\"report?.alwaysNotify && (report?.alwaysNotify == report?.assignee)\" class=\"icons\"\n                                [appTooltip]=\"'The Assignee cannot also be the Overseer of this responsibility. Select another user as the Overseer'\"\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                            </i>\n                            <i *ngIf=\"((report?.alwaysNotify && report?.assignor) && (report?.alwaysNotify == report?.assignor)) ||((report?.alwaysNotify && (!report?.assignor)) && (report?.alwaysNotify == defaultOwner))\"\n                                class=\"icons\"\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.'\"\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                            </i>\n                        </div>\n                        <div class=\"exel-view-column\">\n                            {{report?.notifyOnFailure}}\n                            <i *ngIf=\"(report?.notifyOnFailure) && ((report?.reviewer == report?.notifyOnFailure))\"\n                            class=\"icons\"\n                            [appTooltip]=\"'The Reviewer cannot also be the Overseer of this responsibility. Select another user as the Overseer.'\"\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                        </i>\n\n                        <i *ngIf=\"report?.notifyOnFailure && (report?.notifyOnFailure == report?.assignee)\" class=\"icons\"\n                            [appTooltip]=\"'The Assignee cannot also be the Overseer of this responsibility. Select another user as the Overseer'\"\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                        </i>\n                        <i *ngIf=\"((report?.notifyOnFailure && report?.assignor) && (report?.notifyOnFailure == report?.assignor)) ||((report?.notifyOnFailure && (!report?.assignor)) && (report?.notifyOnFailure == defaultOwner))\"\n                            class=\"icons\"\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.'\"\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                        </i>\n                        </div>\n                    </div>\n                </div>\n\n\n                <div class=\"exel-view-column\">{{report?.keyResponsibility}}</div>\n                <div class=\"exel-view-column\">{{report?.objective}}</div>\n\n            </div>\n        </div>\n    </div>\n    <div class=\"bulk-view-footer\">\n        <div class=\"left\">\n            <p>{{finalResponsibilities}} out of {{responsibilityBulkUpload?.reports?.length}} responsibilities will be\n                uploaded.</p>\n        </div>\n        <div class=\"right\">\n            <button (click)=\"close()\" id=\"bulk-resp-cancel\" >Cancel</button>\n            <button (click)=\"submit()\" id=\"bulk-resp-confirm\" [disabled]=\"finalResponsibilities<1\" class=\"blue\">Confirm</button>\n        </div>\n    </div>\n</div>\n<app-loader  *ngIf=\"loader\"></app-loader>\n\n</ng-container>\n\n<!-- --------------------------------------------------------------------upward is new one-------------------- -->\n<app-loader  *ngIf=\"loader\"></app-loader>\n\n\n\n\n\n\n<!-- HTML for multiple tabs -->\n<ng-container *ngIf=\"responsibilityType === 'multiTab'\">\n    <div class=\"bulk-view\">\n        <div class=\"bulk-view-head\">\n            <h2 class=\"bulk-view-title\">\n                {{fileName}}\n            </h2>\n        </div>\n        <div class=\"bulk-view-body bulk\">\n            <div class=\"exel-view\">\n                <div class=\"exel-view-row head\">\n                    <div class=\"exel-view-column sl-no\">#</div>\n                    <div class=\"exel-view-column\">Responsibility Name <span class=\"required\">*</span></div>\n                    <div class=\"exel-view-column\" *ngIf=\"responsibilityBulkUpload?.header.includes('Program')\" [class.three-column]=\"true\">\n                        <div class=\"exel-view-row\">\n                            <div class=\"exel-view-column large\">Program</div>\n                        </div>\n                        <div class=\"exel-view-row multi-column\" [class.three-column]=\"true\">\n                            <div class=\"exel-view-column\">Program Type</div>\n                            <div class=\"exel-view-column\">Program</div>\n                            <div class=\"exel-view-column\">Program Category</div>\n                        </div>\n                    </div>\n                    <div class=\"exel-view-column\">Entrusted By</div>\n                    <div class=\"exel-view-column\" [class.two-column]=\"true\">\n                        <div class=\"exel-view-row\">\n                            <div class=\"exel-view-column large\">Entrust To <span class=\"required\">*</span></div>\n                        </div>\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\n                            <div class=\"exel-view-column\">Person or Group<span class=\"required\">*</span></div>\n                            <div class=\"exel-view-column\">All or Any Persons</div>\n                        </div>\n                    </div>\n                    <div class=\"exel-view-column\">Key Responsibility?</div>\n                    <div class=\"exel-view-column\" [class.five-column]=\"tabType === 'frequency' || tabType === 'onCompletion'\" [class.three-column]=\"tabType === 'ongoing'\">\n                        <div class=\"exel-view-row\">\n                            <!-- <div class=\"exel-view-column large\">Frequency of Occurrence and Completion Window <span class=\"required\">*</span></div> -->\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>\n                        </div>\n                        <div class=\"exel-view-row multi-column\" [class.five-column]=\"tabType === 'frequency' || tabType === 'onCompletion'\" [class.three-column]=\"tabType === 'ongoing'\">\n                            <ng-container *ngIf=\"tabType === 'frequency'\">\n                                <div class=\"exel-view-column\">Frequency <span class=\"required\">*</span></div>\n                                <div class=\"exel-view-column\">Due Date <span class=\"info-text\">(Day)</span></div>\n                                <div class=\"exel-view-column\">Due Date <span class=\"info-text\">(Month)</span></div>\n                                <div class=\"exel-view-column\">Start <span class=\"info-text\">(No. of days before the due date)</span></div>\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>\n                            </ng-container>\n                            <ng-container *ngIf=\"tabType === 'ongoing'\">\n                                <div class=\"exel-view-column\">Ongoing Frequency <span class=\"required\">*</span></div>\n                                <div class=\"exel-view-column\">Set a Reminder?</div>\n                                <div class=\"exel-view-column\">Frequency of Reminder</div>\n                            </ng-container>\n                            <ng-container *ngIf=\"tabType === 'onCompletion'\">\n                                <div class=\"exel-view-column\">On Completion of Frequency <span class=\"required\">*</span></div>\n                                <div class=\"exel-view-column\">Parent Responsibility<span class=\"info-text\">(Day)</span></div>\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>\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>\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>\n                            </ng-container>\n                        </div>\n                    </div>\n                    <div class=\"exel-view-column\">Responsibility Centre</div>\n                    <div class=\"exel-view-column\">Risk Class</div>\n                    <div class=\"exel-view-column\">Objective</div>\n                    <div class=\"exel-view-column\">Notes</div>\n                    <div class=\"exel-view-column\" [class.two-column]=\"true\">\n                        <div class=\"exel-view-row\">\n                            <div class=\"exel-view-column large\">Format & Evidence</div>\n                        </div>\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\" [class.three-column]=\"false\">\n                            <div class=\"exel-view-column\" [class.small-column]=\"true\">Format</div>\n                            <div class=\"exel-view-column\">Format For Responsibility (link)</div>\n                            <div class=\"exel-view-column\" [class.small-column]=\"true\">Evidence</div>\n                        </div>\n                    </div>\n                    <!-- <div class=\"exel-view-column\">Assessments or Checkpoints</div> -->\n                    <div class=\"exel-view-column\" [class.three-column]=\"true\">\n                        <div class=\"exel-view-row\">\n                            <div class=\"exel-view-column large\">Review of Responsibility</div>\n                        </div>\n                        <div class=\"exel-view-row multi-column\" [class.three-column]=\"true\">\n                            <div class=\"exel-view-column\">Reviewer</div>\n                            <div class=\"exel-view-column\">Review Start <span class=\"info-text\">(No. of days before the due date)</span></div>\n                            <div class=\"exel-view-column\">Review Fail <span class=\"info-text\" appTooltip=\"(No. of days after the due date. Select '0' if the responsibility must be reviewed 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 reviewed on the due date)</span></div>\n                        </div>\n                    </div>\n                    <div class=\"exel-view-column\" [class.two-column]=\"true\">\n                        <div class=\"exel-view-row\">\n                            <div class=\"exel-view-column large\">Overseer</div>\n                        </div>\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\n                            <div class=\"exel-view-column\">Always Notify</div>\n                            <div class=\"exel-view-column\">Notify on Failure</div>\n                        </div>\n                    </div>\n                    <!-- <div class=\"exel-view-column\">Overseer</div> -->\n\n                </div>\n                <div class=\"exel-view-row\" *ngFor=\"let report of responsibilityBulkUpload?.reports; let i = index\">\n                    <div class=\"exel-view-column sl-no\" [class.error]=\"!report?.isValid\">{{i+1}}</div>\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>\n                    <div class=\"exel-view-column multi-column\" *ngIf=\"responsibilityBulkUpload?.header.includes('Program')\" [class.error]=\"false\" [class.three-column]=\"true\">\n                        <div class=\"exel-view-row multi-column\" [class.three-column]=\"true\">\n                            <div class=\"exel-view-column\">{{report?.programType}}</div>\n                            <div class=\"exel-view-column\">{{report?.program}}</div>\n                            <div class=\"exel-view-column\">{{report?.programCategory}}</div>\n                        </div>\n                    </div>\n                    <div class=\"exel-view-column\">{{report?.assignor}}\n                        <!-- <i *ngIf=\"((report?.assignor) && (report?.reviewer === report?.assignor))\"\n                            class=\"icons\"\n                            [appTooltip]=\"'The Reviewer cannot also be the Assignor of this responsibility. Select another user as the Assignor.'\"\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                        </i> -->\n                    </div>\n                    <div class=\"exel-view-column multi-column\" [class.two-column]=\"true\">\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\n                            <div class=\"exel-view-column\" [class.error]=\"!report?.assignee || !report?.userValidateWithProgram?.isValidAssignee || (!report?.isValidUser)\">{{report?.assignee}}\n                                <!-- || (!report?.isValidUser) -->\n                                <i *ngIf=\"(!report?.assignee) || (!report?.isValidUser)\"\n                                    class=\"icons\"\n                                    [appTooltip]=\"'Select the user responsible for completing this responsibility. '\"\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                                </i>\n                                <i *ngIf=\"(report?.assignee) && !report?.userValidateWithProgram?.isValidAssignee\"\n                                    class=\"icons\"\n                                    [appTooltip]=\"'This user is not associated with the selected Program.'\"\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                                </i>\n                            </div>\n                            <div class=\"exel-view-column\">{{report?.assigneeType}}</div>\n                        </div>\n                    </div>\n                    <div class=\"exel-view-column\">{{report?.keyResponsibility}}</div>\n                    <div class=\"exel-view-column multi-column\" [class.five-column]=\"tabType === 'frequency' || tabType === 'onCompletion'\" [class.three-column]=\"tabType === 'ongoing'\">\n                        <ng-container *ngIf=\"tabType === 'frequency'\">\n                            <div class=\"exel-view-row multi-column\" [class.five-column]=\"true\">\n                                <div class=\"exel-view-column\" [class.error]=\"!report?.frequency\">{{report?.frequency}}\n                                    <i *ngIf=\"!report?.frequency\" class=\"icons\" [appTooltip]=\"'Select a frequency for this responsibility.'\"\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                                </div>\n                                <div class=\"exel-view-column\" [class.error]=\"!report?.validDate || report?.isPastDate\">{{report?.day}}\n                                    <i *ngIf=\"!report?.validDate\" class=\"icons\" [appTooltip]=\"'Invalid Due Date.'\"\n                                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                                    <i *ngIf=\"report?.isPastDate\" class=\"icons\" [appTooltip]=\"'This date occurs in the past. Select a future date.'\"\n                                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                                </div>\n                                <div class=\"exel-view-column\" [class.error]=\"!report?.validDate || report?.isPastDate\">{{report?.month}}\n                                    <i *ngIf=\"!report?.validDate\" class=\"icons\" [appTooltip]=\"'Invalid Due Date.'\"\n                                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                                    <i *ngIf=\"report?.isPastDate\" class=\"icons\" [appTooltip]=\"'This date occurs in the past. Select a future date.'\"\n                                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                                </div>\n                                <div class=\"exel-view-column\">{{report?.responsibilityWindow}}</div>\n                                <div class=\"exel-view-column\">{{report?.failedAfter}}</div>\n                            </div>\n                        </ng-container>\n                        <ng-container *ngIf=\"tabType === 'ongoing'\">\n                            <div class=\"exel-view-row multi-column\" [class.three-column]=\"true\">\n                                <div class=\"exel-view-column\" [class.error]=\"!report?.frequency\">{{report?.frequency}}\n                                    <i *ngIf=\"!report?.frequency\" class=\"icons\" [appTooltip]=\"'Select a frequency for this responsibility.'\"\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                                </div>\n                                <div class=\"exel-view-column\">{{report?.setReminder}}</div>\n                                <div class=\"exel-view-column\">{{report?.frequencyReminder}}</div>\n                            </div>\n                        </ng-container>\n                        <ng-container *ngIf=\"tabType === 'onCompletion'\">\n                            <div class=\"exel-view-row multi-column\" [class.five-column]=\"true\">\n                                <div class=\"exel-view-column\" [class.error]=\"!report?.frequency\">{{report?.frequency}}\n                                    <i *ngIf=\"!report?.frequency\" class=\"icons\" [appTooltip]=\"'Select a frequency for this responsibility.'\"\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                                </div>\n                                <div class=\"exel-view-column\" [class.error]=\"!report?.parentResponsibility\">{{report?.parentResponsibility}}\n                                    <i *ngIf=\"!report?.parentResponsibility\" class=\"icons\" [appTooltip]=\"'Select a parent responsibility on whose completion this responsibility will become active.'\"\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                                </div>\n                                <div class=\"exel-view-column\">{{report?.dueDate}}</div>\n                                <div class=\"exel-view-column\">{{report?.responsibilityWindow}}</div>\n                                <div class=\"exel-view-column\">{{report?.failedAfter}}</div>\n                            </div>\n                        </ng-container>\n                    </div>\n                    <div class=\"exel-view-column\">{{report?.responsibilityCenter}}</div>\n                    <div class=\"exel-view-column\">{{report?.reportClass}}</div>\n                    <div class=\"exel-view-column\">{{report?.objective}}</div>\n                    <div class=\"exel-view-column\">{{report?.notes}}</div>\n                    <div class=\"exel-view-column multi-column\" [class.two-column]=\"true\">\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\n                            <div class=\"exel-view-column multi-column\">\n                                <div class=\"exel-view-row multi-column\">\n                                    <div class=\"exel-view-column\" [class.small-column]=\"true\">{{report?.isFormat}}</div>\n                                    <div class=\"exel-view-column\">{{report?.formatForResponsibility}}</div>\n                                </div>\n                            </div>\n                            <div class=\"exel-view-column\" [class.small-column]=\"true\">{{report?.documentEvidenceRequired}}</div>\n                        </div>\n                    </div>\n                    <!-- <div class=\"exel-view-column\">{{report?.assessments}}</div> -->\n                    <div class=\"exel-view-column multi-column\" [class.three-column]=\"true\">\n                        <div class=\"exel-view-row multi-column\" [class.three-column]=\"true\">\n                            <div class=\"exel-view-column\" [class.error]=\"report?.reviewer && (\n                              !report?.userValidateWithProgram?.isValidReviewer )\">{{report?.reviewer}}\n\n                        <!-- <i *ngIf=\"(report?.reviewer && report?.reviewer === report?.assignor)\"\n                            class=\"icons\"\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'\"\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                        </i> -->\n                        <i *ngIf=\"report?.reviewer && !report?.userValidateWithProgram?.isValidReviewer\"\n                            class=\"icons\"\n                            [appTooltip]=\"'This user is not associated with the selected Program.'\"\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                        </i>\n                            </div>\n                            <div class=\"exel-view-column\">{{report?.reviewToBeCompletedWithin}}</div>\n                            <div class=\"exel-view-column\">{{report?.reviewWillBeFailedAfter}}</div>\n                        </div>\n                    </div>\n\n                    <div class=\"exel-view-column multi-column\" [class.two-column]=\"true\">\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\n                            <div class=\"exel-view-column\" [class.error]=\"report?.overseer && (\n                              !report?.userValidateWithProgram?.isValidOverseer )\">\n                            {{report?.overseer}}\n\n                                <i *ngIf=\"(report?.overseer) && !report?.userValidateWithProgram?.isValidOverseer\"\n                                    class=\"icons\"\n                                    [appTooltip]=\"'This user is not associated with the selected Program.'\"\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                                </i>\n                            </div>\n                            <div class=\"exel-view-column\" [class.error]=\"report?.notifyOnFailure && (\n                            !report?.userValidateWithProgram?.isValidNotifyOnFailure )\">\n                                {{report?.notifyOnFailure}}\n\n                                <i *ngIf=\"(report?.notifyOnFailure) && !report?.userValidateWithProgram?.isValidNotifyOnFailure\"\n                                    class=\"icons\"\n                                    [appTooltip]=\"'This user is not associated with the selected Program.'\"\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                                </i>\n                            </div>\n                        </div>\n                    </div>\n\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))\">\n                        {{report?.overseer}}\n                        <i *ngIf=\"(report?.overseer) && ((report?.reviewer === report?.overseer))\"\n                            class=\"icons\"\n                            [appTooltip]=\"'The Reviewer cannot also be the Overseer of this responsibility. Select another user as the Overseer.'\"\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                        </i>\n\n                        <i *ngIf=\"report?.overseer && (report?.overseer === report?.assignee)\" class=\"icons\"\n                            [appTooltip]=\"'The Assignee cannot also be the Overseer of this responsibility. Select another user as the Overseer'\"\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                        </i>\n                        <i *ngIf=\"((report?.overseer) && (report?.overseer == report?.assignor))\"\n                            class=\"icons\"\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.'\"\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                        </i>\n                        <i *ngIf=\"!report?.userValidateWithProgram?.isValidOverseer\"\n                            class=\"icons\"\n                            [appTooltip]=\"'Selected user is not a valid overseer for selected program.'\"\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                        </i>\n                    </div> -->\n                </div>\n\n\n\n\n\n\n                <!-- ------------------------------------------------old code dynamic------------------------------------------------- -->\n\n                <!-- *ngFor=\"let report of responsibilityBulkUpload?.reports; let i = index\" -->\n            </div>\n        </div>\n        <div class=\"bulk-view-option\">\n            <button *ngIf=\"bulkUpload?.frequency?.reports?.length\" [class.active]=\"tabType === 'frequency'\" (click)=\"selectedTab.emit('frequency')\">Frequency Responsibilities</button>\n            <button *ngIf=\"bulkUpload?.ongoing?.reports?.length\" [class.active]=\"tabType === 'ongoing'\" (click)=\"selectedTab.emit('ongoing')\">Ongoing Responsibilities</button>\n            <button *ngIf=\"bulkUpload?.onCompletion?.reports?.length\" [class.active]=\"tabType === 'onCompletion'\" (click)=\"selectedTab.emit('onCompletion')\">On Completion Responsibilities</button>\n        </div>\n        <div class=\"bulk-view-footer\">\n            <!-- <div class=\"left\">\n                <p>{{finalResponsibilities}} out of {{responsibilityBulkUpload?.reports?.length}} responsibilities will be\n                    uploaded.</p>\n            </div> -->\n            <div class=\"left\">\n                <p>{{finalResponsibilities}} out of {{responsibilityMultiTabBulkUpload?.length}} {{responsibilityMultiTabBulkUpload?.length > 1 ? 'responsibilities' : 'responsibility'}} will be\n                    uploaded.</p>\n            </div>\n            <div class=\"right\">\n                <button (click)=\"close()\" id=\"bulk-resp-cancel\">Cancel</button>\n                <button (click)=\"submit()\" id=\"bulk-resp-confirm\" [disabled]=\"!isConfirmClickable\" class=\"blue\">Confirm</button>\n                <!-- finalResponsibilities < 1 -->\n            </div>\n        </div>\n    </div>\n    <app-loader  *ngIf=\"loader\"></app-loader>\n\n</ng-container>\n\n    <!-- --------------------------------------------------------------------upward is new one-------------------- -->\n", styles: ["@import\"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;inset: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;border:none;padding-right:10px;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.three-column .exel-view-column,.bulk-view-body.bulk .exel-view-row.five-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 #1e03d259;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}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ToolTipDirective, selector: "[appTooltip]", inputs: ["appTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: LoaderComponent$1, selector: "app-loader" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: BulkResponsibilityViewComponent, selector: "app-bulk-responsibility-view", inputs: { responsibilityBulkUpload: "responsibilityBulkUpload", fileName: "fileName", defaultOwner: "defaultOwner", loader: "loader", tabType: "tabType", bulkUpload: "bulkUpload", responsibilityType: "responsibilityType" }, outputs: { submitResponsibilityBulkUpload: "submitResponsibilityBulkUpload", cancel: "cancel", selectedTab: "selectedTab" }, usesOnChanges: true, ngImport: i0, template: "\n<ng-container *ngIf=\"responsibilityType === 'singleTab'\">\n<div class=\"bulk-view\">\n    <div class=\"bulk-view-head\">\n        <h2 class=\"bulk-view-title\">\n            {{fileName}}\n        </h2>\n    </div>\n    <div class=\"bulk-view-body\">\n        <div class=\"exel-view\">\n            <div class=\"exel-view-row head\">\n                <div class=\"exel-view-column sl-no\">#</div>\n                <div class=\"exel-view-column\" *ngFor=\"let heading of responsibilityBulkUpload?.header\"\n                    [class.large]=\"heading && heading.startsWith('Inherent')\">\n                    <ng-container *ngIf=\"heading && !(heading.startsWith('Due')) && !(heading.startsWith('Oversight'))\">\n                        {{(heading.includes('*')? heading.replace('*', '') : heading)}}\n                        <span *ngIf=\"heading.includes('*')\" class=\"required\">*</span>\n                    </ng-container>\n                    <ng-container *ngIf=\"heading && heading.startsWith('Due')\">\n                        <div class=\"exel-view-row\">\n                            <div class=\"exel-view-column large\">Due Date</div>\n                        </div>\n                        <div class=\"exel-view-row multi-column\">\n                            <div class=\"exel-view-column\">Day</div>\n                            <div class=\"exel-view-column\">Month</div>\n                        </div>\n                    </ng-container>\n                    <ng-container *ngIf=\"heading && heading.startsWith('Oversight')\">\n                        <div class=\"exel-view-row\">\n                            <div class=\"exel-view-column large\">Oversight </div>\n                        </div>\n                        <div class=\"exel-view-row multi-column\">\n                            <div class=\"exel-view-column\">Always Notify</div>\n                            <div class=\"exel-view-column\">Notify on Failure</div>\n                        </div>\n                    </ng-container>\n                </div>\n\n            </div>\n            <div class=\"exel-view-row\" *ngFor=\"let report of responsibilityBulkUpload?.reports; let i = index\">\n                <div class=\"exel-view-column sl-no\">{{i+1}}</div>\n\n                <div class=\"exel-view-column\" [class.error]=\"!report.responsibilityName\">{{report?.responsibilityName}}\n                    <i *ngIf=\"!report?.responsibilityName\" class=\"icons\"\n                        [appTooltip]=\"'Enter a name for this responsibility.'\" placement=\"bottom-right\" type=\"white\"\n                        delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                </div>\n                <div class=\"exel-view-column\">\n                    {{report?.assignor}}\n                    <i *ngIf=\"((report?.assignor) && (report?.notifyOnFailure == report?.assignor||report?.alwaysNotify == report?.assignor))\"\n                        class=\"icons\"\n                        [appTooltip]=\"'The Overseer cannot also be the Assignor of this responsibility. Select another user as the Assignor.'\"\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                    </i>\n<!--\n                    <i *ngIf=\"((report?.assignor) && (report?.reviewer == report?.assignor))\"\n                        class=\"icons\"\n                        [appTooltip]=\"'The Reviewer cannot also be the Assignor of this responsibility. Select another user as the Assignor.'\"\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                    </i>     -->\n                </div>\n                <div class=\"exel-view-column\">\n                    {{report?.assignee}}\n\n                    <i *ngIf=\"((report?.assignee) && (report?.notifyOnFailure == report?.assignee||report?.alwaysNotify == report?.assignee))\"\n                        class=\"icons\"\n                        [appTooltip]=\"'The Overseer cannot also be the Assignee of this responsibility. Select another user as the Assignee.'\"\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                    </i>\n\n                    <i *ngIf=\"((report?.assignee) && (report?.reviewer == report?.assignee))\"\n                        class=\"icons\"\n                        [appTooltip]=\"'The Reviewer cannot also be the Assignee of this responsibility. Select another user as the Assignee.'\"\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                    </i>\n                    <i *ngIf=\"(!report?.assignee) || (!report?.isValidUser)\"\n                    class=\"icons\"\n                    [appTooltip]=\"'Select the user responsible for completing this responsibility. '\"\n                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                    </i>\n                </div>\n                <div class=\"exel-view-column\" id=\"resCategory\" *ngIf=\"report?.responsibilityCategory!==null\">{{report?.responsibilityCategory}}</div>\n                <div class=\"exel-view-column\" [class.error]=\"!report.frequency\">{{report?.frequency}}\n                    <i *ngIf=\"!report?.frequency\" class=\"icons\" [appTooltip]=\"'Select a frequency for this responsibility.'\"\n                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                </div>\n                <div class=\"exel-view-column multi-column\">\n                    <div class=\"exel-view-row\">\n                        <div class=\"exel-view-column\" [class.error]=\"!report.isValidDueDate\">{{report?.day}}\n                            <i *ngIf=\"!report?.isValidDueDate\" class=\"icons\" [appTooltip]=\"'Invalid Due Date.'\"\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                            <i *ngIf=\"report?.isPastDate\" class=\"icons\" [appTooltip]=\"'This date occurs in the past. Select a future date.'\"\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                        </div>\n                        <div class=\"exel-view-column\" [class.error]=\"!report.isValidDueDate\">{{report?.month}}\n                            <i *ngIf=\"!report?.isValidDueDate\" class=\"icons\" [appTooltip]=\"'Invalid Due Date.'\"\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                            <i *ngIf=\"report?.isPastDate\" class=\"icons\" [appTooltip]=\"'This date occurs in the past. Select a future date.'\"\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"exel-view-column\">{{report?.responsibilityWindow}}</div>\n                <div class=\"exel-view-column\">{{report?.failedAfter}}</div>\n                <div class=\"exel-view-column\">{{report?.reportClass}}</div>\n                <div class=\"exel-view-column\">{{report?.responsibilityCenter}}</div>\n                <div class=\"exel-view-column\">\n                    {{report?.reviewer}}\n\n                    <i *ngIf=\"(report?.reviewer) && ((report?.reviewer == report?.alwaysNotify) || (report?.reviewer == report?.notifyOnFailure))\"\n                        class=\"icons\"\n                        [appTooltip]=\"'The Overseer cannot also be the Reviewer of this responsibility. Select another user as the Reviewer'\"\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                    </i>\n\n                    <i *ngIf=\"report?.reviewer && (report?.reviewer == report?.assignee)\" class=\"icons\"\n                        [appTooltip]=\"'The Assignee cannot also be the Reviewer of this responsibility. Select another user as the Reviewer.'\"\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                    </i>\n                    <!-- <i *ngIf=\"(report?.reviewer && report?.assignor)\"\n                        class=\"icons\"\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'\"\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                    </i> -->\n                </div>\n                <div class=\"exel-view-column\">{{report?.reviewToBeCompletedWithin}}</div>\n                <div class=\"exel-view-column\">{{report?.reviewWillBeFailedAfter}}</div>\n                <div class=\"exel-view-column\">{{report?.formatForResponsibility}}</div>\n                <div class=\"exel-view-column\">{{report?.notes}}</div>\n                <div class=\"exel-view-column\">{{report?.documentEvidenceRequired}}</div>\n                <div class=\"exel-view-column multi-column\">\n                    <div class=\"exel-view-row\">\n                        <div class=\"exel-view-column\">\n                            {{report?.alwaysNotify}}\n                            <i *ngIf=\"(report?.alwaysNotify) && ((report?.reviewer == report?.alwaysNotify))\"\n                                class=\"icons\"\n                                [appTooltip]=\"'The Reviewer cannot also be the Overseer of this responsibility. Select another user as the Overseer.'\"\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                            </i>\n\n                            <i *ngIf=\"report?.alwaysNotify && (report?.alwaysNotify == report?.assignee)\" class=\"icons\"\n                                [appTooltip]=\"'The Assignee cannot also be the Overseer of this responsibility. Select another user as the Overseer'\"\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                            </i>\n                            <i *ngIf=\"((report?.alwaysNotify && report?.assignor) && (report?.alwaysNotify == report?.assignor)) ||((report?.alwaysNotify && (!report?.assignor)) && (report?.alwaysNotify == defaultOwner))\"\n                                class=\"icons\"\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.'\"\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                            </i>\n                        </div>\n                        <div class=\"exel-view-column\">\n                            {{report?.notifyOnFailure}}\n                            <i *ngIf=\"(report?.notifyOnFailure) && ((report?.reviewer == report?.notifyOnFailure))\"\n                            class=\"icons\"\n                            [appTooltip]=\"'The Reviewer cannot also be the Overseer of this responsibility. Select another user as the Overseer.'\"\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                        </i>\n\n                        <i *ngIf=\"report?.notifyOnFailure && (report?.notifyOnFailure == report?.assignee)\" class=\"icons\"\n                            [appTooltip]=\"'The Assignee cannot also be the Overseer of this responsibility. Select another user as the Overseer'\"\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                        </i>\n                        <i *ngIf=\"((report?.notifyOnFailure && report?.assignor) && (report?.notifyOnFailure == report?.assignor)) ||((report?.notifyOnFailure && (!report?.assignor)) && (report?.notifyOnFailure == defaultOwner))\"\n                            class=\"icons\"\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.'\"\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                        </i>\n                        </div>\n                    </div>\n                </div>\n\n\n                <div class=\"exel-view-column\">{{report?.keyResponsibility}}</div>\n                <div class=\"exel-view-column\">{{report?.objective}}</div>\n\n            </div>\n        </div>\n    </div>\n    <div class=\"bulk-view-footer\">\n        <div class=\"left\">\n            <p>{{finalResponsibilities}} out of {{responsibilityBulkUpload?.reports?.length}} responsibilities will be\n                uploaded.</p>\n        </div>\n        <div class=\"right\">\n            <button (click)=\"close()\" id=\"bulk-resp-cancel\" >Cancel</button>\n            <button (click)=\"submit()\" id=\"bulk-resp-confirm\" [disabled]=\"finalResponsibilities<1\" class=\"blue\">Confirm</button>\n        </div>\n    </div>\n</div>\n<app-loader  *ngIf=\"loader\"></app-loader>\n\n</ng-container>\n\n<!-- --------------------------------------------------------------------upward is new one-------------------- -->\n<app-loader  *ngIf=\"loader\"></app-loader>\n\n\n\n\n\n\n<!-- HTML for multiple tabs -->\n<ng-container *ngIf=\"responsibilityType === 'multiTab'\">\n    <div class=\"bulk-view\">\n        <div class=\"bulk-view-head\">\n            <h2 class=\"bulk-view-title\">\n                {{fileName}}\n            </h2>\n        </div>\n        <div class=\"bulk-view-body bulk\">\n            <div class=\"exel-view\">\n                <div class=\"exel-view-row head\">\n                    <div class=\"exel-view-column sl-no\">#</div>\n                    <div class=\"exel-view-column\">Responsibility Name <span class=\"required\">*</span></div>\n                    <div class=\"exel-view-column\" *ngIf=\"responsibilityBulkUpload?.header.includes('Program')\" [class.three-column]=\"true\">\n                        <div class=\"exel-view-row\">\n                            <div class=\"exel-view-column large\">Program</div>\n                        </div>\n                        <div class=\"exel-view-row multi-column\" [class.three-column]=\"true\">\n                            <div class=\"exel-view-column\">Program Type</div>\n                            <div class=\"exel-view-column\">Program</div>\n                            <div class=\"exel-view-column\">Program Category</div>\n                        </div>\n                    </div>\n                    <div class=\"exel-view-column\">Entrusted By</div>\n                    <div class=\"exel-view-column\" [class.two-column]=\"true\">\n                        <div class=\"exel-view-row\">\n                            <div class=\"exel-view-column large\">Entrust To <span class=\"required\">*</span></div>\n                        </div>\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\n                            <div class=\"exel-view-column\">Person or Group<span class=\"required\">*</span></div>\n                            <div class=\"exel-view-column\">All or Any Persons</div>\n                        </div>\n                    </div>\n                    <div class=\"exel-view-column\">Key Responsibility?</div>\n                    <div class=\"exel-view-column\" [class.five-column]=\"tabType === 'frequency' || tabType === 'onCompletion'\" [class.three-column]=\"tabType === 'ongoing'\">\n                        <div class=\"exel-view-row\">\n                            <!-- <div class=\"exel-view-column large\">Frequency of Occurrence and Completion Window <span class=\"required\">*</span></div> -->\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>\n                        </div>\n                        <div class=\"exel-view-row multi-column\" [class.five-column]=\"tabType === 'frequency' || tabType === 'onCompletion'\" [class.three-column]=\"tabType === 'ongoing'\">\n                            <ng-container *ngIf=\"tabType === 'frequency'\">\n                                <div class=\"exel-view-column\">Frequency <span class=\"required\">*</span></div>\n                                <div class=\"exel-view-column\">Due Date <span class=\"info-text\">(Day)</span></div>\n                                <div class=\"exel-view-column\">Due Date <span class=\"info-text\">(Month)</span></div>\n                                <div class=\"exel-view-column\">Start <span class=\"info-text\">(No. of days before the due date)</span></div>\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>\n                            </ng-container>\n                            <ng-container *ngIf=\"tabType === 'ongoing'\">\n                                <div class=\"exel-view-column\">Ongoing Frequency <span class=\"required\">*</span></div>\n                                <div class=\"exel-view-column\">Set a Reminder?</div>\n                                <div class=\"exel-view-column\">Frequency of Reminder</div>\n                            </ng-container>\n                            <ng-container *ngIf=\"tabType === 'onCompletion'\">\n                                <div class=\"exel-view-column\">On Completion of Frequency <span class=\"required\">*</span></div>\n                                <div class=\"exel-view-column\">Parent Responsibility<span class=\"info-text\">(Day)</span></div>\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>\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>\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>\n                            </ng-container>\n                        </div>\n                    </div>\n                    <div class=\"exel-view-column\">Responsibility Centre</div>\n                    <div class=\"exel-view-column\">Risk Class</div>\n                    <div class=\"exel-view-column\">Objective</div>\n                    <div class=\"exel-view-column\">Notes</div>\n                    <div class=\"exel-view-column\" [class.two-column]=\"true\">\n                        <div class=\"exel-view-row\">\n                            <div class=\"exel-view-column large\">Format & Evidence</div>\n                        </div>\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\" [class.three-column]=\"false\">\n                            <div class=\"exel-view-column\" [class.small-column]=\"true\">Format</div>\n                            <div class=\"exel-view-column\">Format For Responsibility (link)</div>\n                            <div class=\"exel-view-column\" [class.small-column]=\"true\">Evidence</div>\n                        </div>\n                    </div>\n                    <!-- <div class=\"exel-view-column\">Assessments or Checkpoints</div> -->\n                    <div class=\"exel-view-column\" [class.three-column]=\"true\">\n                        <div class=\"exel-view-row\">\n                            <div class=\"exel-view-column large\">Review of Responsibility</div>\n                        </div>\n                        <div class=\"exel-view-row multi-column\" [class.three-column]=\"true\">\n                            <div class=\"exel-view-column\">Reviewer</div>\n                            <div class=\"exel-view-column\">Review Start <span class=\"info-text\">(No. of days before the due date)</span></div>\n                            <div class=\"exel-view-column\">Review Fail <span class=\"info-text\" appTooltip=\"(No. of days after the due date. Select '0' if the responsibility must be reviewed 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 reviewed on the due date)</span></div>\n                        </div>\n                    </div>\n                    <div class=\"exel-view-column\" [class.two-column]=\"true\">\n                        <div class=\"exel-view-row\">\n                            <div class=\"exel-view-column large\">Overseer</div>\n                        </div>\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\n                            <div class=\"exel-view-column\">Always Notify</div>\n                            <div class=\"exel-view-column\">Notify on Failure</div>\n                        </div>\n                    </div>\n                    <!-- <div class=\"exel-view-column\">Overseer</div> -->\n\n                </div>\n                <div class=\"exel-view-row\" *ngFor=\"let report of responsibilityBulkUpload?.reports; let i = index\">\n                    <div class=\"exel-view-column sl-no\" [class.error]=\"!report?.isValid\">{{i+1}}</div>\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>\n                    <div class=\"exel-view-column multi-column\" *ngIf=\"responsibilityBulkUpload?.header.includes('Program')\" [class.error]=\"false\" [class.three-column]=\"true\">\n                        <div class=\"exel-view-row multi-column\" [class.three-column]=\"true\">\n                            <div class=\"exel-view-column\">{{report?.programType}}</div>\n                            <div class=\"exel-view-column\">{{report?.program}}</div>\n                            <div class=\"exel-view-column\">{{report?.programCategory}}</div>\n                        </div>\n                    </div>\n                    <div class=\"exel-view-column\">{{report?.assignor}}\n                        <!-- <i *ngIf=\"((report?.assignor) && (report?.reviewer === report?.assignor))\"\n                            class=\"icons\"\n                            [appTooltip]=\"'The Reviewer cannot also be the Assignor of this responsibility. Select another user as the Assignor.'\"\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                        </i> -->\n                    </div>\n                    <div class=\"exel-view-column multi-column\" [class.two-column]=\"true\">\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\n                            <div class=\"exel-view-column\" [class.error]=\"!report?.assignee || !report?.userValidateWithProgram?.isValidAssignee || (!report?.isValidUser)\">{{report?.assignee}}\n                                <!-- || (!report?.isValidUser) -->\n                                <i *ngIf=\"(!report?.assignee) || (!report?.isValidUser)\"\n                                    class=\"icons\"\n                                    [appTooltip]=\"'Select the user responsible for completing this responsibility. '\"\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                                </i>\n                                <i *ngIf=\"(report?.assignee) && !report?.userValidateWithProgram?.isValidAssignee\"\n                                    class=\"icons\"\n                                    [appTooltip]=\"'This user is not associated with the selected Program.'\"\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                                </i>\n                            </div>\n                            <div class=\"exel-view-column\">{{report?.assigneeType}}</div>\n                        </div>\n                    </div>\n                    <div class=\"exel-view-column\">{{report?.keyResponsibility}}</div>\n                    <div class=\"exel-view-column multi-column\" [class.five-column]=\"tabType === 'frequency' || tabType === 'onCompletion'\" [class.three-column]=\"tabType === 'ongoing'\">\n                        <ng-container *ngIf=\"tabType === 'frequency'\">\n                            <div class=\"exel-view-row multi-column\" [class.five-column]=\"true\">\n                                <div class=\"exel-view-column\" [class.error]=\"!report?.frequency\">{{report?.frequency}}\n                                    <i *ngIf=\"!report?.frequency\" class=\"icons\" [appTooltip]=\"'Select a frequency for this responsibility.'\"\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                                </div>\n                                <div class=\"exel-view-column\" [class.error]=\"!report?.validDate || report?.isPastDate\">{{report?.day}}\n                                    <i *ngIf=\"!report?.validDate\" class=\"icons\" [appTooltip]=\"'Invalid Due Date.'\"\n                                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                                    <i *ngIf=\"report?.isPastDate\" class=\"icons\" [appTooltip]=\"'This date occurs in the past. Select a future date.'\"\n                                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                                </div>\n                                <div class=\"exel-view-column\" [class.error]=\"!report?.validDate || report?.isPastDate\">{{report?.month}}\n                                    <i *ngIf=\"!report?.validDate\" class=\"icons\" [appTooltip]=\"'Invalid Due Date.'\"\n                                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                                    <i *ngIf=\"report?.isPastDate\" class=\"icons\" [appTooltip]=\"'This date occurs in the past. Select a future date.'\"\n                                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                                </div>\n                                <div class=\"exel-view-column\">{{report?.responsibilityWindow}}</div>\n                                <div class=\"exel-view-column\">{{report?.failedAfter}}</div>\n                            </div>\n                        </ng-container>\n                        <ng-container *ngIf=\"tabType === 'ongoing'\">\n                            <div class=\"exel-view-row multi-column\" [class.three-column]=\"true\">\n                                <div class=\"exel-view-column\" [class.error]=\"!report?.frequency\">{{report?.frequency}}\n                                    <i *ngIf=\"!report?.frequency\" class=\"icons\" [appTooltip]=\"'Select a frequency for this responsibility.'\"\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                                </div>\n                                <div class=\"exel-view-column\">{{report?.setReminder}}</div>\n                                <div class=\"exel-view-column\">{{report?.frequencyReminder}}</div>\n                            </div>\n                        </ng-container>\n                        <ng-container *ngIf=\"tabType === 'onCompletion'\">\n                            <div class=\"exel-view-row multi-column\" [class.five-column]=\"true\">\n                                <div class=\"exel-view-column\" [class.error]=\"!report?.frequency\">{{report?.frequency}}\n                                    <i *ngIf=\"!report?.frequency\" class=\"icons\" [appTooltip]=\"'Select a frequency for this responsibility.'\"\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                                </div>\n                                <div class=\"exel-view-column\" [class.error]=\"!report?.parentResponsibility\">{{report?.parentResponsibility}}\n                                    <i *ngIf=\"!report?.parentResponsibility\" class=\"icons\" [appTooltip]=\"'Select a parent responsibility on whose completion this responsibility will become active.'\"\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                                </div>\n                                <div class=\"exel-view-column\">{{report?.dueDate}}</div>\n                                <div class=\"exel-view-column\">{{report?.responsibilityWindow}}</div>\n                                <div class=\"exel-view-column\">{{report?.failedAfter}}</div>\n                            </div>\n                        </ng-container>\n                    </div>  \n                    <div class=\"exel-view-column\">{{report?.responsibilityCenter}}</div>\n                    <div class=\"exel-view-column\" [class.error]=\"!(report?.reportClass | riskClass)\">{{report?.reportClass}}\n                        <i *ngIf=\"!(report?.reportClass | riskClass)\" class=\"icons\" [appTooltip]=\"VALIDATION_MESSAGES.RISK_CLASS\"\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                    </div>\n                    <div class=\"exel-view-column\">{{report?.objective}}</div>\n                    <div class=\"exel-view-column\">{{report?.notes}}</div>\n                    <div class=\"exel-view-column multi-column\" [class.two-column]=\"true\">\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\n                            <div class=\"exel-view-column multi-column\">\n                                <div class=\"exel-view-row multi-column\">\n                                    <div class=\"exel-view-column\" [class.small-column]=\"true\">{{report?.isFormat}}</div>\n                                    <div class=\"exel-view-column\">{{report?.formatForResponsibility}}</div>\n                                </div>\n                            </div>\n                            <div class=\"exel-view-column\" [class.small-column]=\"true\">{{report?.documentEvidenceRequired}}</div>\n                        </div>\n                    </div>\n                    <!-- <div class=\"exel-view-column\">{{report?.assessments}}</div> -->\n                    <div class=\"exel-view-column multi-column\" [class.three-column]=\"true\">\n                        <div class=\"exel-view-row multi-column\" [class.three-column]=\"true\">\n                            <div class=\"exel-view-column\" [class.error]=\"report?.reviewer && (\n                              !report?.userValidateWithProgram?.isValidReviewer )\">{{report?.reviewer}}\n\n                        <!-- <i *ngIf=\"(report?.reviewer && report?.reviewer === report?.assignor)\"\n                            class=\"icons\"\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'\"\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                        </i> -->\n                        <i *ngIf=\"report?.reviewer && !report?.userValidateWithProgram?.isValidReviewer\"\n                            class=\"icons\"\n                            [appTooltip]=\"'This user is not associated with the selected Program.'\"\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                        </i>\n                            </div>\n                            <div class=\"exel-view-column\">{{report?.reviewToBeCompletedWithin}}</div>\n                            <div class=\"exel-view-column\">{{report?.reviewWillBeFailedAfter}}</div>\n                        </div>\n                    </div>\n\n                    <div class=\"exel-view-column multi-column\" [class.two-column]=\"true\">\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\n                            <div class=\"exel-view-column\" [class.error]=\"report?.overseer && (\n                              !report?.userValidateWithProgram?.isValidOverseer )\">\n                            {{report?.overseer}}\n\n                                <i *ngIf=\"(report?.overseer) && !report?.userValidateWithProgram?.isValidOverseer\"\n                                    class=\"icons\"\n                                    [appTooltip]=\"'This user is not associated with the selected Program.'\"\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                                </i>\n                            </div>\n                            <div class=\"exel-view-column\" [class.error]=\"report?.notifyOnFailure && (\n                            !report?.userValidateWithProgram?.isValidNotifyOnFailure )\">\n                                {{report?.notifyOnFailure}}\n\n                                <i *ngIf=\"(report?.notifyOnFailure) && !report?.userValidateWithProgram?.isValidNotifyOnFailure\"\n                                    class=\"icons\"\n                                    [appTooltip]=\"'This user is not associated with the selected Program.'\"\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                                </i>\n                            </div>\n                        </div>\n                    </div>\n\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))\">\n                        {{report?.overseer}}\n                        <i *ngIf=\"(report?.overseer) && ((report?.reviewer === report?.overseer))\"\n                            class=\"icons\"\n                            [appTooltip]=\"'The Reviewer cannot also be the Overseer of this responsibility. Select another user as the Overseer.'\"\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                        </i>\n\n                        <i *ngIf=\"report?.overseer && (report?.overseer === report?.assignee)\" class=\"icons\"\n                            [appTooltip]=\"'The Assignee cannot also be the Overseer of this responsibility. Select another user as the Overseer'\"\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                        </i>\n                        <i *ngIf=\"((report?.overseer) && (report?.overseer == report?.assignor))\"\n                            class=\"icons\"\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.'\"\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                        </i>\n                        <i *ngIf=\"!report?.userValidateWithProgram?.isValidOverseer\"\n                            class=\"icons\"\n                            [appTooltip]=\"'Selected user is not a valid overseer for selected program.'\"\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                        </i>\n                    </div> -->\n                </div>\n\n\n\n\n\n\n                <!-- ------------------------------------------------old code dynamic------------------------------------------------- -->\n\n                <!-- *ngFor=\"let report of responsibilityBulkUpload?.reports; let i = index\" -->\n            </div>\n        </div>\n        <div class=\"bulk-view-option\">\n            <button *ngIf=\"bulkUpload?.frequency?.reports?.length\" [class.active]=\"tabType === 'frequency'\" (click)=\"selectedTab.emit('frequency')\">Frequency Responsibilities</button>\n            <button *ngIf=\"bulkUpload?.ongoing?.reports?.length\" [class.active]=\"tabType === 'ongoing'\" (click)=\"selectedTab.emit('ongoing')\">Ongoing Responsibilities</button>\n            <button *ngIf=\"bulkUpload?.onCompletion?.reports?.length\" [class.active]=\"tabType === 'onCompletion'\" (click)=\"selectedTab.emit('onCompletion')\">On Completion Responsibilities</button>\n        </div>\n        <div class=\"bulk-view-footer\">\n            <!-- <div class=\"left\">\n                <p>{{finalResponsibilities}} out of {{responsibilityBulkUpload?.reports?.length}} responsibilities will be\n                    uploaded.</p>\n            </div> -->\n            <div class=\"left\">\n                <p>{{finalResponsibilities}} out of {{responsibilityMultiTabBulkUpload?.length}} {{responsibilityMultiTabBulkUpload?.length > 1 ? 'responsibilities' : 'responsibility'}} will be\n                    uploaded.</p>\n            </div>\n            <div class=\"right\">\n                <button (click)=\"close()\" id=\"bulk-resp-cancel\">Cancel</button>\n                <button (click)=\"submit()\" id=\"bulk-resp-confirm\" [disabled]=\"!isConfirmClickable\" class=\"blue\">Confirm</button>\n                <!-- finalResponsibilities < 1 -->\n            </div>\n        </div>\n    </div>\n    <app-loader  *ngIf=\"loader\"></app-loader>\n\n</ng-container>\n\n    <!-- --------------------------------------------------------------------upward is new one-------------------- -->\n", styles: ["@import\"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;inset: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;border:none;padding-right:10px;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.three-column .exel-view-column,.bulk-view-body.bulk .exel-view-row.five-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 #1e03d259;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}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ToolTipDirective, selector: "[appTooltip]", inputs: ["appTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: LoaderComponent$1, selector: "app-loader" }, { kind: "pipe", type: RiskClassPipe, name: "riskClass" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BulkResponsibilityViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-bulk-responsibility-view', template: "\n<ng-container *ngIf=\"responsibilityType === 'singleTab'\">\n<div class=\"bulk-view\">\n    <div class=\"bulk-view-head\">\n        <h2 class=\"bulk-view-title\">\n            {{fileName}}\n        </h2>\n    </div>\n    <div class=\"bulk-view-body\">\n        <div class=\"exel-view\">\n            <div class=\"exel-view-row head\">\n                <div class=\"exel-view-column sl-no\">#</div>\n                <div class=\"exel-view-column\" *ngFor=\"let heading of responsibilityBulkUpload?.header\"\n                    [class.large]=\"heading && heading.startsWith('Inherent')\">\n                    <ng-container *ngIf=\"heading && !(heading.startsWith('Due')) && !(heading.startsWith('Oversight'))\">\n                        {{(heading.includes('*')? heading.replace('*', '') : heading)}}\n                        <span *ngIf=\"heading.includes('*')\" class=\"required\">*</span>\n                    </ng-container>\n                    <ng-container *ngIf=\"heading && heading.startsWith('Due')\">\n                        <div class=\"exel-view-row\">\n                            <div class=\"exel-view-column large\">Due Date</div>\n                        </div>\n                        <div class=\"exel-view-row multi-column\">\n                            <div class=\"exel-view-column\">Day</div>\n                            <div class=\"exel-view-column\">Month</div>\n                        </div>\n                    </ng-container>\n                    <ng-container *ngIf=\"heading && heading.startsWith('Oversight')\">\n                        <div class=\"exel-view-row\">\n                            <div class=\"exel-view-column large\">Oversight </div>\n                        </div>\n                        <div class=\"exel-view-row multi-column\">\n                            <div class=\"exel-view-column\">Always Notify</div>\n                            <div class=\"exel-view-column\">Notify on Failure</div>\n                        </div>\n                    </ng-container>\n                </div>\n\n            </div>\n            <div class=\"exel-view-row\" *ngFor=\"let report of responsibilityBulkUpload?.reports; let i = index\">\n                <div class=\"exel-view-column sl-no\">{{i+1}}</div>\n\n                <div class=\"exel-view-column\" [class.error]=\"!report.responsibilityName\">{{report?.responsibilityName}}\n                    <i *ngIf=\"!report?.responsibilityName\" class=\"icons\"\n                        [appTooltip]=\"'Enter a name for this responsibility.'\" placement=\"bottom-right\" type=\"white\"\n                        delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                </div>\n                <div class=\"exel-view-column\">\n                    {{report?.assignor}}\n                    <i *ngIf=\"((report?.assignor) && (report?.notifyOnFailure == report?.assignor||report?.alwaysNotify == report?.assignor))\"\n                        class=\"icons\"\n                        [appTooltip]=\"'The Overseer cannot also be the Assignor of this responsibility. Select another user as the Assignor.'\"\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                    </i>\n<!--\n                    <i *ngIf=\"((report?.assignor) && (report?.reviewer == report?.assignor))\"\n                        class=\"icons\"\n                        [appTooltip]=\"'The Reviewer cannot also be the Assignor of this responsibility. Select another user as the Assignor.'\"\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                    </i>     -->\n                </div>\n                <div class=\"exel-view-column\">\n                    {{report?.assignee}}\n\n                    <i *ngIf=\"((report?.assignee) && (report?.notifyOnFailure == report?.assignee||report?.alwaysNotify == report?.assignee))\"\n                        class=\"icons\"\n                        [appTooltip]=\"'The Overseer cannot also be the Assignee of this responsibility. Select another user as the Assignee.'\"\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                    </i>\n\n                    <i *ngIf=\"((report?.assignee) && (report?.reviewer == report?.assignee))\"\n                        class=\"icons\"\n                        [appTooltip]=\"'The Reviewer cannot also be the Assignee of this responsibility. Select another user as the Assignee.'\"\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                    </i>\n                    <i *ngIf=\"(!report?.assignee) || (!report?.isValidUser)\"\n                    class=\"icons\"\n                    [appTooltip]=\"'Select the user responsible for completing this responsibility. '\"\n                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                    </i>\n                </div>\n                <div class=\"exel-view-column\" id=\"resCategory\" *ngIf=\"report?.responsibilityCategory!==null\">{{report?.responsibilityCategory}}</div>\n                <div class=\"exel-view-column\" [class.error]=\"!report.frequency\">{{report?.frequency}}\n                    <i *ngIf=\"!report?.frequency\" class=\"icons\" [appTooltip]=\"'Select a frequency for this responsibility.'\"\n                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                </div>\n                <div class=\"exel-view-column multi-column\">\n                    <div class=\"exel-view-row\">\n                        <div class=\"exel-view-column\" [class.error]=\"!report.isValidDueDate\">{{report?.day}}\n                            <i *ngIf=\"!report?.isValidDueDate\" class=\"icons\" [appTooltip]=\"'Invalid Due Date.'\"\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                            <i *ngIf=\"report?.isPastDate\" class=\"icons\" [appTooltip]=\"'This date occurs in the past. Select a future date.'\"\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                        </div>\n                        <div class=\"exel-view-column\" [class.error]=\"!report.isValidDueDate\">{{report?.month}}\n                            <i *ngIf=\"!report?.isValidDueDate\" class=\"icons\" [appTooltip]=\"'Invalid Due Date.'\"\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                            <i *ngIf=\"report?.isPastDate\" class=\"icons\" [appTooltip]=\"'This date occurs in the past. Select a future date.'\"\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"exel-view-column\">{{report?.responsibilityWindow}}</div>\n                <div class=\"exel-view-column\">{{report?.failedAfter}}</div>\n                <div class=\"exel-view-column\">{{report?.reportClass}}</div>\n                <div class=\"exel-view-column\">{{report?.responsibilityCenter}}</div>\n                <div class=\"exel-view-column\">\n                    {{report?.reviewer}}\n\n                    <i *ngIf=\"(report?.reviewer) && ((report?.reviewer == report?.alwaysNotify) || (report?.reviewer == report?.notifyOnFailure))\"\n                        class=\"icons\"\n                        [appTooltip]=\"'The Overseer cannot also be the Reviewer of this responsibility. Select another user as the Reviewer'\"\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                    </i>\n\n                    <i *ngIf=\"report?.reviewer && (report?.reviewer == report?.assignee)\" class=\"icons\"\n                        [appTooltip]=\"'The Assignee cannot also be the Reviewer of this responsibility. Select another user as the Reviewer.'\"\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                    </i>\n                    <!-- <i *ngIf=\"(report?.reviewer && report?.assignor)\"\n                        class=\"icons\"\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'\"\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                    </i> -->\n                </div>\n                <div class=\"exel-view-column\">{{report?.reviewToBeCompletedWithin}}</div>\n                <div class=\"exel-view-column\">{{report?.reviewWillBeFailedAfter}}</div>\n                <div class=\"exel-view-column\">{{report?.formatForResponsibility}}</div>\n                <div class=\"exel-view-column\">{{report?.notes}}</div>\n                <div class=\"exel-view-column\">{{report?.documentEvidenceRequired}}</div>\n                <div class=\"exel-view-column multi-column\">\n                    <div class=\"exel-view-row\">\n                        <div class=\"exel-view-column\">\n                            {{report?.alwaysNotify}}\n                            <i *ngIf=\"(report?.alwaysNotify) && ((report?.reviewer == report?.alwaysNotify))\"\n                                class=\"icons\"\n                                [appTooltip]=\"'The Reviewer cannot also be the Overseer of this responsibility. Select another user as the Overseer.'\"\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                            </i>\n\n                            <i *ngIf=\"report?.alwaysNotify && (report?.alwaysNotify == report?.assignee)\" class=\"icons\"\n                                [appTooltip]=\"'The Assignee cannot also be the Overseer of this responsibility. Select another user as the Overseer'\"\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                            </i>\n                            <i *ngIf=\"((report?.alwaysNotify && report?.assignor) && (report?.alwaysNotify == report?.assignor)) ||((report?.alwaysNotify && (!report?.assignor)) && (report?.alwaysNotify == defaultOwner))\"\n                                class=\"icons\"\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.'\"\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                            </i>\n                        </div>\n                        <div class=\"exel-view-column\">\n                            {{report?.notifyOnFailure}}\n                            <i *ngIf=\"(report?.notifyOnFailure) && ((report?.reviewer == report?.notifyOnFailure))\"\n                            class=\"icons\"\n                            [appTooltip]=\"'The Reviewer cannot also be the Overseer of this responsibility. Select another user as the Overseer.'\"\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                        </i>\n\n                        <i *ngIf=\"report?.notifyOnFailure && (report?.notifyOnFailure == report?.assignee)\" class=\"icons\"\n                            [appTooltip]=\"'The Assignee cannot also be the Overseer of this responsibility. Select another user as the Overseer'\"\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                        </i>\n                        <i *ngIf=\"((report?.notifyOnFailure && report?.assignor) && (report?.notifyOnFailure == report?.assignor)) ||((report?.notifyOnFailure && (!report?.assignor)) && (report?.notifyOnFailure == defaultOwner))\"\n                            class=\"icons\"\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.'\"\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                        </i>\n                        </div>\n                    </div>\n                </div>\n\n\n                <div class=\"exel-view-column\">{{report?.keyResponsibility}}</div>\n                <div class=\"exel-view-column\">{{report?.objective}}</div>\n\n            </div>\n        </div>\n    </div>\n    <div class=\"bulk-view-footer\">\n        <div class=\"left\">\n            <p>{{finalResponsibilities}} out of {{responsibilityBulkUpload?.reports?.length}} responsibilities will be\n                uploaded.</p>\n        </div>\n        <div class=\"right\">\n            <button (click)=\"close()\" id=\"bulk-resp-cancel\" >Cancel</button>\n            <button (click)=\"submit()\" id=\"bulk-resp-confirm\" [disabled]=\"finalResponsibilities<1\" class=\"blue\">Confirm</button>\n        </div>\n    </div>\n</div>\n<app-loader  *ngIf=\"loader\"></app-loader>\n\n</ng-container>\n\n<!-- --------------------------------------------------------------------upward is new one-------------------- -->\n<app-loader  *ngIf=\"loader\"></app-loader>\n\n\n\n\n\n\n<!-- HTML for multiple tabs -->\n<ng-container *ngIf=\"responsibilityType === 'multiTab'\">\n    <div class=\"bulk-view\">\n        <div class=\"bulk-view-head\">\n            <h2 class=\"bulk-view-title\">\n                {{fileName}}\n            </h2>\n        </div>\n        <div class=\"bulk-view-body bulk\">\n            <div class=\"exel-view\">\n                <div class=\"exel-view-row head\">\n                    <div class=\"exel-view-column sl-no\">#</div>\n                    <div class=\"exel-view-column\">Responsibility Name <span class=\"required\">*</span></div>\n                    <div class=\"exel-view-column\" *ngIf=\"responsibilityBulkUpload?.header.includes('Program')\" [class.three-column]=\"true\">\n                        <div class=\"exel-view-row\">\n                            <div class=\"exel-view-column large\">Program</div>\n                        </div>\n                        <div class=\"exel-view-row multi-column\" [class.three-column]=\"true\">\n                            <div class=\"exel-view-column\">Program Type</div>\n                            <div class=\"exel-view-column\">Program</div>\n                            <div class=\"exel-view-column\">Program Category</div>\n                        </div>\n                    </div>\n                    <div class=\"exel-view-column\">Entrusted By</div>\n                    <div class=\"exel-view-column\" [class.two-column]=\"true\">\n                        <div class=\"exel-view-row\">\n                            <div class=\"exel-view-column large\">Entrust To <span class=\"required\">*</span></div>\n                        </div>\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\n                            <div class=\"exel-view-column\">Person or Group<span class=\"required\">*</span></div>\n                            <div class=\"exel-view-column\">All or Any Persons</div>\n                        </div>\n                    </div>\n                    <div class=\"exel-view-column\">Key Responsibility?</div>\n                    <div class=\"exel-view-column\" [class.five-column]=\"tabType === 'frequency' || tabType === 'onCompletion'\" [class.three-column]=\"tabType === 'ongoing'\">\n                        <div class=\"exel-view-row\">\n                            <!-- <div class=\"exel-view-column large\">Frequency of Occurrence and Completion Window <span class=\"required\">*</span></div> -->\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>\n                        </div>\n                        <div class=\"exel-view-row multi-column\" [class.five-column]=\"tabType === 'frequency' || tabType === 'onCompletion'\" [class.three-column]=\"tabType === 'ongoing'\">\n                            <ng-container *ngIf=\"tabType === 'frequency'\">\n                                <div class=\"exel-view-column\">Frequency <span class=\"required\">*</span></div>\n                                <div class=\"exel-view-column\">Due Date <span class=\"info-text\">(Day)</span></div>\n                                <div class=\"exel-view-column\">Due Date <span class=\"info-text\">(Month)</span></div>\n                                <div class=\"exel-view-column\">Start <span class=\"info-text\">(No. of days before the due date)</span></div>\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>\n                            </ng-container>\n                            <ng-container *ngIf=\"tabType === 'ongoing'\">\n                                <div class=\"exel-view-column\">Ongoing Frequency <span class=\"required\">*</span></div>\n                                <div class=\"exel-view-column\">Set a Reminder?</div>\n                                <div class=\"exel-view-column\">Frequency of Reminder</div>\n                            </ng-container>\n                            <ng-container *ngIf=\"tabType === 'onCompletion'\">\n                                <div class=\"exel-view-column\">On Completion of Frequency <span class=\"required\">*</span></div>\n                                <div class=\"exel-view-column\">Parent Responsibility<span class=\"info-text\">(Day)</span></div>\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>\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>\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>\n                            </ng-container>\n                        </div>\n                    </div>\n                    <div class=\"exel-view-column\">Responsibility Centre</div>\n                    <div class=\"exel-view-column\">Risk Class</div>\n                    <div class=\"exel-view-column\">Objective</div>\n                    <div class=\"exel-view-column\">Notes</div>\n                    <div class=\"exel-view-column\" [class.two-column]=\"true\">\n                        <div class=\"exel-view-row\">\n                            <div class=\"exel-view-column large\">Format & Evidence</div>\n                        </div>\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\" [class.three-column]=\"false\">\n                            <div class=\"exel-view-column\" [class.small-column]=\"true\">Format</div>\n                            <div class=\"exel-view-column\">Format For Responsibility (link)</div>\n                            <div class=\"exel-view-column\" [class.small-column]=\"true\">Evidence</div>\n                        </div>\n                    </div>\n                    <!-- <div class=\"exel-view-column\">Assessments or Checkpoints</div> -->\n                    <div class=\"exel-view-column\" [class.three-column]=\"true\">\n                        <div class=\"exel-view-row\">\n                            <div class=\"exel-view-column large\">Review of Responsibility</div>\n                        </div>\n                        <div class=\"exel-view-row multi-column\" [class.three-column]=\"true\">\n                            <div class=\"exel-view-column\">Reviewer</div>\n                            <div class=\"exel-view-column\">Review Start <span class=\"info-text\">(No. of days before the due date)</span></div>\n                            <div class=\"exel-view-column\">Review Fail <span class=\"info-text\" appTooltip=\"(No. of days after the due date. Select '0' if the responsibility must be reviewed 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 reviewed on the due date)</span></div>\n                        </div>\n                    </div>\n                    <div class=\"exel-view-column\" [class.two-column]=\"true\">\n                        <div class=\"exel-view-row\">\n                            <div class=\"exel-view-column large\">Overseer</div>\n                        </div>\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\n                            <div class=\"exel-view-column\">Always Notify</div>\n                            <div class=\"exel-view-column\">Notify on Failure</div>\n                        </div>\n                    </div>\n                    <!-- <div class=\"exel-view-column\">Overseer</div> -->\n\n                </div>\n                <div class=\"exel-view-row\" *ngFor=\"let report of responsibilityBulkUpload?.reports; let i = index\">\n                    <div class=\"exel-view-column sl-no\" [class.error]=\"!report?.isValid\">{{i+1}}</div>\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>\n                    <div class=\"exel-view-column multi-column\" *ngIf=\"responsibilityBulkUpload?.header.includes('Program')\" [class.error]=\"false\" [class.three-column]=\"true\">\n                        <div class=\"exel-view-row multi-column\" [class.three-column]=\"true\">\n                            <div class=\"exel-view-column\">{{report?.programType}}</div>\n                            <div class=\"exel-view-column\">{{report?.program}}</div>\n                            <div class=\"exel-view-column\">{{report?.programCategory}}</div>\n                        </div>\n                    </div>\n                    <div class=\"exel-view-column\">{{report?.assignor}}\n                        <!-- <i *ngIf=\"((report?.assignor) && (report?.reviewer === report?.assignor))\"\n                            class=\"icons\"\n                            [appTooltip]=\"'The Reviewer cannot also be the Assignor of this responsibility. Select another user as the Assignor.'\"\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                        </i> -->\n                    </div>\n                    <div class=\"exel-view-column multi-column\" [class.two-column]=\"true\">\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\n                            <div class=\"exel-view-column\" [class.error]=\"!report?.assignee || !report?.userValidateWithProgram?.isValidAssignee || (!report?.isValidUser)\">{{report?.assignee}}\n                                <!-- || (!report?.isValidUser) -->\n                                <i *ngIf=\"(!report?.assignee) || (!report?.isValidUser)\"\n                                    class=\"icons\"\n                                    [appTooltip]=\"'Select the user responsible for completing this responsibility. '\"\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                                </i>\n                                <i *ngIf=\"(report?.assignee) && !report?.userValidateWithProgram?.isValidAssignee\"\n                                    class=\"icons\"\n                                    [appTooltip]=\"'This user is not associated with the selected Program.'\"\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                                </i>\n                            </div>\n                            <div class=\"exel-view-column\">{{report?.assigneeType}}</div>\n                        </div>\n                    </div>\n                    <div class=\"exel-view-column\">{{report?.keyResponsibility}}</div>\n                    <div class=\"exel-view-column multi-column\" [class.five-column]=\"tabType === 'frequency' || tabType === 'onCompletion'\" [class.three-column]=\"tabType === 'ongoing'\">\n                        <ng-container *ngIf=\"tabType === 'frequency'\">\n                            <div class=\"exel-view-row multi-column\" [class.five-column]=\"true\">\n                                <div class=\"exel-view-column\" [class.error]=\"!report?.frequency\">{{report?.frequency}}\n                                    <i *ngIf=\"!report?.frequency\" class=\"icons\" [appTooltip]=\"'Select a frequency for this responsibility.'\"\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                                </div>\n                                <div class=\"exel-view-column\" [class.error]=\"!report?.validDate || report?.isPastDate\">{{report?.day}}\n                                    <i *ngIf=\"!report?.validDate\" class=\"icons\" [appTooltip]=\"'Invalid Due Date.'\"\n                                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                                    <i *ngIf=\"report?.isPastDate\" class=\"icons\" [appTooltip]=\"'This date occurs in the past. Select a future date.'\"\n                                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                                </div>\n                                <div class=\"exel-view-column\" [class.error]=\"!report?.validDate || report?.isPastDate\">{{report?.month}}\n                                    <i *ngIf=\"!report?.validDate\" class=\"icons\" [appTooltip]=\"'Invalid Due Date.'\"\n                                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                                    <i *ngIf=\"report?.isPastDate\" class=\"icons\" [appTooltip]=\"'This date occurs in the past. Select a future date.'\"\n                                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                                </div>\n                                <div class=\"exel-view-column\">{{report?.responsibilityWindow}}</div>\n                                <div class=\"exel-view-column\">{{report?.failedAfter}}</div>\n                            </div>\n                        </ng-container>\n                        <ng-container *ngIf=\"tabType === 'ongoing'\">\n                            <div class=\"exel-view-row multi-column\" [class.three-column]=\"true\">\n                                <div class=\"exel-view-column\" [class.error]=\"!report?.frequency\">{{report?.frequency}}\n                                    <i *ngIf=\"!report?.frequency\" class=\"icons\" [appTooltip]=\"'Select a frequency for this responsibility.'\"\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                                </div>\n                                <div class=\"exel-view-column\">{{report?.setReminder}}</div>\n                                <div class=\"exel-view-column\">{{report?.frequencyReminder}}</div>\n                            </div>\n                        </ng-container>\n                        <ng-container *ngIf=\"tabType === 'onCompletion'\">\n                            <div class=\"exel-view-row multi-column\" [class.five-column]=\"true\">\n                                <div class=\"exel-view-column\" [class.error]=\"!report?.frequency\">{{report?.frequency}}\n                                    <i *ngIf=\"!report?.frequency\" class=\"icons\" [appTooltip]=\"'Select a frequency for this responsibility.'\"\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                                </div>\n                                <div class=\"exel-view-column\" [class.error]=\"!report?.parentResponsibility\">{{report?.parentResponsibility}}\n                                    <i *ngIf=\"!report?.parentResponsibility\" class=\"icons\" [appTooltip]=\"'Select a parent responsibility on whose completion this responsibility will become active.'\"\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                                </div>\n                                <div class=\"exel-view-column\">{{report?.dueDate}}</div>\n                                <div class=\"exel-view-column\">{{report?.responsibilityWindow}}</div>\n                                <div class=\"exel-view-column\">{{report?.failedAfter}}</div>\n                            </div>\n                        </ng-container>\n                    </div>\n                    <div class=\"exel-view-column\">{{report?.responsibilityCenter}}</div>\n                    <div class=\"exel-view-column\">{{report?.reportClass}}</div>\n                    <div class=\"exel-view-column\">{{report?.objective}}</div>\n                    <div class=\"exel-view-column\">{{report?.notes}}</div>\n                    <div class=\"exel-view-column multi-column\" [class.two-column]=\"true\">\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\n                            <div class=\"exel-view-column multi-column\">\n                                <div class=\"exel-view-row multi-column\">\n                                    <div class=\"exel-view-column\" [class.small-column]=\"true\">{{report?.isFormat}}</div>\n                                    <div class=\"exel-view-column\">{{report?.formatForResponsibility}}</div>\n                                </div>\n                            </div>\n                            <div class=\"exel-view-column\" [class.small-column]=\"true\">{{report?.documentEvidenceRequired}}</div>\n                        </div>\n                    </div>\n                    <!-- <div class=\"exel-view-column\">{{report?.assessments}}</div> -->\n                    <div class=\"exel-view-column multi-column\" [class.three-column]=\"true\">\n                        <div class=\"exel-view-row multi-column\" [class.three-column]=\"true\">\n                            <div class=\"exel-view-column\" [class.error]=\"report?.reviewer && (\n                              !report?.userValidateWithProgram?.isValidReviewer )\">{{report?.reviewer}}\n\n                        <!-- <i *ngIf=\"(report?.reviewer && report?.reviewer === report?.assignor)\"\n                            class=\"icons\"\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'\"\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                        </i> -->\n                        <i *ngIf=\"report?.reviewer && !report?.userValidateWithProgram?.isValidReviewer\"\n                            class=\"icons\"\n                            [appTooltip]=\"'This user is not associated with the selected Program.'\"\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                        </i>\n                            </div>\n                            <div class=\"exel-view-column\">{{report?.reviewToBeCompletedWithin}}</div>\n                            <div class=\"exel-view-column\">{{report?.reviewWillBeFailedAfter}}</div>\n                        </div>\n                    </div>\n\n                    <div class=\"exel-view-column multi-column\" [class.two-column]=\"true\">\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\n                            <div class=\"exel-view-column\" [class.error]=\"report?.overseer && (\n                              !report?.userValidateWithProgram?.isValidOverseer )\">\n                            {{report?.overseer}}\n\n                                <i *ngIf=\"(report?.overseer) && !report?.userValidateWithProgram?.isValidOverseer\"\n                                    class=\"icons\"\n                                    [appTooltip]=\"'This user is not associated with the selected Program.'\"\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                                </i>\n                            </div>\n                            <div class=\"exel-view-column\" [class.error]=\"report?.notifyOnFailure && (\n                            !report?.userValidateWithProgram?.isValidNotifyOnFailure )\">\n                                {{report?.notifyOnFailure}}\n\n                                <i *ngIf=\"(report?.notifyOnFailure) && !report?.userValidateWithProgram?.isValidNotifyOnFailure\"\n                                    class=\"icons\"\n                                    [appTooltip]=\"'This user is not associated with the selected Program.'\"\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                                </i>\n                            </div>\n                        </div>\n                    </div>\n\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))\">\n                        {{report?.overseer}}\n                        <i *ngIf=\"(report?.overseer) && ((report?.reviewer === report?.overseer))\"\n                            class=\"icons\"\n                            [appTooltip]=\"'The Reviewer cannot also be the Overseer of this responsibility. Select another user as the Overseer.'\"\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                        </i>\n\n                        <i *ngIf=\"report?.overseer && (report?.overseer === report?.assignee)\" class=\"icons\"\n                            [appTooltip]=\"'The Assignee cannot also be the Overseer of this responsibility. Select another user as the Overseer'\"\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                        </i>\n                        <i *ngIf=\"((report?.overseer) && (report?.overseer == report?.assignor))\"\n                            class=\"icons\"\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.'\"\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                        </i>\n                        <i *ngIf=\"!report?.userValidateWithProgram?.isValidOverseer\"\n                            class=\"icons\"\n                            [appTooltip]=\"'Selected user is not a valid overseer for selected program.'\"\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                        </i>\n                    </div> -->\n                </div>\n\n\n\n\n\n\n                <!-- ------------------------------------------------old code dynamic------------------------------------------------- -->\n\n                <!-- *ngFor=\"let report of responsibilityBulkUpload?.reports; let i = index\" -->\n            </div>\n        </div>\n        <div class=\"bulk-view-option\">\n            <button *ngIf=\"bulkUpload?.frequency?.reports?.length\" [class.active]=\"tabType === 'frequency'\" (click)=\"selectedTab.emit('frequency')\">Frequency Responsibilities</button>\n            <button *ngIf=\"bulkUpload?.ongoing?.reports?.length\" [class.active]=\"tabType === 'ongoing'\" (click)=\"selectedTab.emit('ongoing')\">Ongoing Responsibilities</button>\n            <button *ngIf=\"bulkUpload?.onCompletion?.reports?.length\" [class.active]=\"tabType === 'onCompletion'\" (click)=\"selectedTab.emit('onCompletion')\">On Completion Responsibilities</button>\n        </div>\n        <div class=\"bulk-view-footer\">\n            <!-- <div class=\"left\">\n                <p>{{finalResponsibilities}} out of {{responsibilityBulkUpload?.reports?.length}} responsibilities will be\n                    uploaded.</p>\n            </div> -->\n            <div class=\"left\">\n                <p>{{finalResponsibilities}} out of {{responsibilityMultiTabBulkUpload?.length}} {{responsibilityMultiTabBulkUpload?.length > 1 ? 'responsibilities' : 'responsibility'}} will be\n                    uploaded.</p>\n            </div>\n            <div class=\"right\">\n                <button (click)=\"close()\" id=\"bulk-resp-cancel\">Cancel</button>\n                <button (click)=\"submit()\" id=\"bulk-resp-confirm\" [disabled]=\"!isConfirmClickable\" class=\"blue\">Confirm</button>\n                <!-- finalResponsibilities < 1 -->\n            </div>\n        </div>\n    </div>\n    <app-loader  *ngIf=\"loader\"></app-loader>\n\n</ng-container>\n\n    <!-- --------------------------------------------------------------------upward is new one-------------------- -->\n", styles: ["@import\"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;inset: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;border:none;padding-right:10px;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.three-column .exel-view-column,.bulk-view-body.bulk .exel-view-row.five-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 #1e03d259;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}\n"] }]
+            args: [{ selector: 'app-bulk-responsibility-view', template: "\n<ng-container *ngIf=\"responsibilityType === 'singleTab'\">\n<div class=\"bulk-view\">\n    <div class=\"bulk-view-head\">\n        <h2 class=\"bulk-view-title\">\n            {{fileName}}\n        </h2>\n    </div>\n    <div class=\"bulk-view-body\">\n        <div class=\"exel-view\">\n            <div class=\"exel-view-row head\">\n                <div class=\"exel-view-column sl-no\">#</div>\n                <div class=\"exel-view-column\" *ngFor=\"let heading of responsibilityBulkUpload?.header\"\n                    [class.large]=\"heading && heading.startsWith('Inherent')\">\n                    <ng-container *ngIf=\"heading && !(heading.startsWith('Due')) && !(heading.startsWith('Oversight'))\">\n                        {{(heading.includes('*')? heading.replace('*', '') : heading)}}\n                        <span *ngIf=\"heading.includes('*')\" class=\"required\">*</span>\n                    </ng-container>\n                    <ng-container *ngIf=\"heading && heading.startsWith('Due')\">\n                        <div class=\"exel-view-row\">\n                            <div class=\"exel-view-column large\">Due Date</div>\n                        </div>\n                        <div class=\"exel-view-row multi-column\">\n                            <div class=\"exel-view-column\">Day</div>\n                            <div class=\"exel-view-column\">Month</div>\n                        </div>\n                    </ng-container>\n                    <ng-container *ngIf=\"heading && heading.startsWith('Oversight')\">\n                        <div class=\"exel-view-row\">\n                            <div class=\"exel-view-column large\">Oversight </div>\n                        </div>\n                        <div class=\"exel-view-row multi-column\">\n                            <div class=\"exel-view-column\">Always Notify</div>\n                            <div class=\"exel-view-column\">Notify on Failure</div>\n                        </div>\n                    </ng-container>\n                </div>\n\n            </div>\n            <div class=\"exel-view-row\" *ngFor=\"let report of responsibilityBulkUpload?.reports; let i = index\">\n                <div class=\"exel-view-column sl-no\">{{i+1}}</div>\n\n                <div class=\"exel-view-column\" [class.error]=\"!report.responsibilityName\">{{report?.responsibilityName}}\n                    <i *ngIf=\"!report?.responsibilityName\" class=\"icons\"\n                        [appTooltip]=\"'Enter a name for this responsibility.'\" placement=\"bottom-right\" type=\"white\"\n                        delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                </div>\n                <div class=\"exel-view-column\">\n                    {{report?.assignor}}\n                    <i *ngIf=\"((report?.assignor) && (report?.notifyOnFailure == report?.assignor||report?.alwaysNotify == report?.assignor))\"\n                        class=\"icons\"\n                        [appTooltip]=\"'The Overseer cannot also be the Assignor of this responsibility. Select another user as the Assignor.'\"\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                    </i>\n<!--\n                    <i *ngIf=\"((report?.assignor) && (report?.reviewer == report?.assignor))\"\n                        class=\"icons\"\n                        [appTooltip]=\"'The Reviewer cannot also be the Assignor of this responsibility. Select another user as the Assignor.'\"\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                    </i>     -->\n                </div>\n                <div class=\"exel-view-column\">\n                    {{report?.assignee}}\n\n                    <i *ngIf=\"((report?.assignee) && (report?.notifyOnFailure == report?.assignee||report?.alwaysNotify == report?.assignee))\"\n                        class=\"icons\"\n                        [appTooltip]=\"'The Overseer cannot also be the Assignee of this responsibility. Select another user as the Assignee.'\"\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                    </i>\n\n                    <i *ngIf=\"((report?.assignee) && (report?.reviewer == report?.assignee))\"\n                        class=\"icons\"\n                        [appTooltip]=\"'The Reviewer cannot also be the Assignee of this responsibility. Select another user as the Assignee.'\"\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                    </i>\n                    <i *ngIf=\"(!report?.assignee) || (!report?.isValidUser)\"\n                    class=\"icons\"\n                    [appTooltip]=\"'Select the user responsible for completing this responsibility. '\"\n                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                    </i>\n                </div>\n                <div class=\"exel-view-column\" id=\"resCategory\" *ngIf=\"report?.responsibilityCategory!==null\">{{report?.responsibilityCategory}}</div>\n                <div class=\"exel-view-column\" [class.error]=\"!report.frequency\">{{report?.frequency}}\n                    <i *ngIf=\"!report?.frequency\" class=\"icons\" [appTooltip]=\"'Select a frequency for this responsibility.'\"\n                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                </div>\n                <div class=\"exel-view-column multi-column\">\n                    <div class=\"exel-view-row\">\n                        <div class=\"exel-view-column\" [class.error]=\"!report.isValidDueDate\">{{report?.day}}\n                            <i *ngIf=\"!report?.isValidDueDate\" class=\"icons\" [appTooltip]=\"'Invalid Due Date.'\"\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                            <i *ngIf=\"report?.isPastDate\" class=\"icons\" [appTooltip]=\"'This date occurs in the past. Select a future date.'\"\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                        </div>\n                        <div class=\"exel-view-column\" [class.error]=\"!report.isValidDueDate\">{{report?.month}}\n                            <i *ngIf=\"!report?.isValidDueDate\" class=\"icons\" [appTooltip]=\"'Invalid Due Date.'\"\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                            <i *ngIf=\"report?.isPastDate\" class=\"icons\" [appTooltip]=\"'This date occurs in the past. Select a future date.'\"\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"exel-view-column\">{{report?.responsibilityWindow}}</div>\n                <div class=\"exel-view-column\">{{report?.failedAfter}}</div>\n                <div class=\"exel-view-column\">{{report?.reportClass}}</div>\n                <div class=\"exel-view-column\">{{report?.responsibilityCenter}}</div>\n                <div class=\"exel-view-column\">\n                    {{report?.reviewer}}\n\n                    <i *ngIf=\"(report?.reviewer) && ((report?.reviewer == report?.alwaysNotify) || (report?.reviewer == report?.notifyOnFailure))\"\n                        class=\"icons\"\n                        [appTooltip]=\"'The Overseer cannot also be the Reviewer of this responsibility. Select another user as the Reviewer'\"\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                    </i>\n\n                    <i *ngIf=\"report?.reviewer && (report?.reviewer == report?.assignee)\" class=\"icons\"\n                        [appTooltip]=\"'The Assignee cannot also be the Reviewer of this responsibility. Select another user as the Reviewer.'\"\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                    </i>\n                    <!-- <i *ngIf=\"(report?.reviewer && report?.assignor)\"\n                        class=\"icons\"\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'\"\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                    </i> -->\n                </div>\n                <div class=\"exel-view-column\">{{report?.reviewToBeCompletedWithin}}</div>\n                <div class=\"exel-view-column\">{{report?.reviewWillBeFailedAfter}}</div>\n                <div class=\"exel-view-column\">{{report?.formatForResponsibility}}</div>\n                <div class=\"exel-view-column\">{{report?.notes}}</div>\n                <div class=\"exel-view-column\">{{report?.documentEvidenceRequired}}</div>\n                <div class=\"exel-view-column multi-column\">\n                    <div class=\"exel-view-row\">\n                        <div class=\"exel-view-column\">\n                            {{report?.alwaysNotify}}\n                            <i *ngIf=\"(report?.alwaysNotify) && ((report?.reviewer == report?.alwaysNotify))\"\n                                class=\"icons\"\n                                [appTooltip]=\"'The Reviewer cannot also be the Overseer of this responsibility. Select another user as the Overseer.'\"\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                            </i>\n\n                            <i *ngIf=\"report?.alwaysNotify && (report?.alwaysNotify == report?.assignee)\" class=\"icons\"\n                                [appTooltip]=\"'The Assignee cannot also be the Overseer of this responsibility. Select another user as the Overseer'\"\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                            </i>\n                            <i *ngIf=\"((report?.alwaysNotify && report?.assignor) && (report?.alwaysNotify == report?.assignor)) ||((report?.alwaysNotify && (!report?.assignor)) && (report?.alwaysNotify == defaultOwner))\"\n                                class=\"icons\"\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.'\"\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                            </i>\n                        </div>\n                        <div class=\"exel-view-column\">\n                            {{report?.notifyOnFailure}}\n                            <i *ngIf=\"(report?.notifyOnFailure) && ((report?.reviewer == report?.notifyOnFailure))\"\n                            class=\"icons\"\n                            [appTooltip]=\"'The Reviewer cannot also be the Overseer of this responsibility. Select another user as the Overseer.'\"\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                        </i>\n\n                        <i *ngIf=\"report?.notifyOnFailure && (report?.notifyOnFailure == report?.assignee)\" class=\"icons\"\n                            [appTooltip]=\"'The Assignee cannot also be the Overseer of this responsibility. Select another user as the Overseer'\"\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                        </i>\n                        <i *ngIf=\"((report?.notifyOnFailure && report?.assignor) && (report?.notifyOnFailure == report?.assignor)) ||((report?.notifyOnFailure && (!report?.assignor)) && (report?.notifyOnFailure == defaultOwner))\"\n                            class=\"icons\"\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.'\"\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                        </i>\n                        </div>\n                    </div>\n                </div>\n\n\n                <div class=\"exel-view-column\">{{report?.keyResponsibility}}</div>\n                <div class=\"exel-view-column\">{{report?.objective}}</div>\n\n            </div>\n        </div>\n    </div>\n    <div class=\"bulk-view-footer\">\n        <div class=\"left\">\n            <p>{{finalResponsibilities}} out of {{responsibilityBulkUpload?.reports?.length}} responsibilities will be\n                uploaded.</p>\n        </div>\n        <div class=\"right\">\n            <button (click)=\"close()\" id=\"bulk-resp-cancel\" >Cancel</button>\n            <button (click)=\"submit()\" id=\"bulk-resp-confirm\" [disabled]=\"finalResponsibilities<1\" class=\"blue\">Confirm</button>\n        </div>\n    </div>\n</div>\n<app-loader  *ngIf=\"loader\"></app-loader>\n\n</ng-container>\n\n<!-- --------------------------------------------------------------------upward is new one-------------------- -->\n<app-loader  *ngIf=\"loader\"></app-loader>\n\n\n\n\n\n\n<!-- HTML for multiple tabs -->\n<ng-container *ngIf=\"responsibilityType === 'multiTab'\">\n    <div class=\"bulk-view\">\n        <div class=\"bulk-view-head\">\n            <h2 class=\"bulk-view-title\">\n                {{fileName}}\n            </h2>\n        </div>\n        <div class=\"bulk-view-body bulk\">\n            <div class=\"exel-view\">\n                <div class=\"exel-view-row head\">\n                    <div class=\"exel-view-column sl-no\">#</div>\n                    <div class=\"exel-view-column\">Responsibility Name <span class=\"required\">*</span></div>\n                    <div class=\"exel-view-column\" *ngIf=\"responsibilityBulkUpload?.header.includes('Program')\" [class.three-column]=\"true\">\n                        <div class=\"exel-view-row\">\n                            <div class=\"exel-view-column large\">Program</div>\n                        </div>\n                        <div class=\"exel-view-row multi-column\" [class.three-column]=\"true\">\n                            <div class=\"exel-view-column\">Program Type</div>\n                            <div class=\"exel-view-column\">Program</div>\n                            <div class=\"exel-view-column\">Program Category</div>\n                        </div>\n                    </div>\n                    <div class=\"exel-view-column\">Entrusted By</div>\n                    <div class=\"exel-view-column\" [class.two-column]=\"true\">\n                        <div class=\"exel-view-row\">\n                            <div class=\"exel-view-column large\">Entrust To <span class=\"required\">*</span></div>\n                        </div>\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\n                            <div class=\"exel-view-column\">Person or Group<span class=\"required\">*</span></div>\n                            <div class=\"exel-view-column\">All or Any Persons</div>\n                        </div>\n                    </div>\n                    <div class=\"exel-view-column\">Key Responsibility?</div>\n                    <div class=\"exel-view-column\" [class.five-column]=\"tabType === 'frequency' || tabType === 'onCompletion'\" [class.three-column]=\"tabType === 'ongoing'\">\n                        <div class=\"exel-view-row\">\n                            <!-- <div class=\"exel-view-column large\">Frequency of Occurrence and Completion Window <span class=\"required\">*</span></div> -->\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>\n                        </div>\n                        <div class=\"exel-view-row multi-column\" [class.five-column]=\"tabType === 'frequency' || tabType === 'onCompletion'\" [class.three-column]=\"tabType === 'ongoing'\">\n                            <ng-container *ngIf=\"tabType === 'frequency'\">\n                                <div class=\"exel-view-column\">Frequency <span class=\"required\">*</span></div>\n                                <div class=\"exel-view-column\">Due Date <span class=\"info-text\">(Day)</span></div>\n                                <div class=\"exel-view-column\">Due Date <span class=\"info-text\">(Month)</span></div>\n                                <div class=\"exel-view-column\">Start <span class=\"info-text\">(No. of days before the due date)</span></div>\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>\n                            </ng-container>\n                            <ng-container *ngIf=\"tabType === 'ongoing'\">\n                                <div class=\"exel-view-column\">Ongoing Frequency <span class=\"required\">*</span></div>\n                                <div class=\"exel-view-column\">Set a Reminder?</div>\n                                <div class=\"exel-view-column\">Frequency of Reminder</div>\n                            </ng-container>\n                            <ng-container *ngIf=\"tabType === 'onCompletion'\">\n                                <div class=\"exel-view-column\">On Completion of Frequency <span class=\"required\">*</span></div>\n                                <div class=\"exel-view-column\">Parent Responsibility<span class=\"info-text\">(Day)</span></div>\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>\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>\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>\n                            </ng-container>\n                        </div>\n                    </div>\n                    <div class=\"exel-view-column\">Responsibility Centre</div>\n                    <div class=\"exel-view-column\">Risk Class</div>\n                    <div class=\"exel-view-column\">Objective</div>\n                    <div class=\"exel-view-column\">Notes</div>\n                    <div class=\"exel-view-column\" [class.two-column]=\"true\">\n                        <div class=\"exel-view-row\">\n                            <div class=\"exel-view-column large\">Format & Evidence</div>\n                        </div>\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\" [class.three-column]=\"false\">\n                            <div class=\"exel-view-column\" [class.small-column]=\"true\">Format</div>\n                            <div class=\"exel-view-column\">Format For Responsibility (link)</div>\n                            <div class=\"exel-view-column\" [class.small-column]=\"true\">Evidence</div>\n                        </div>\n                    </div>\n                    <!-- <div class=\"exel-view-column\">Assessments or Checkpoints</div> -->\n                    <div class=\"exel-view-column\" [class.three-column]=\"true\">\n                        <div class=\"exel-view-row\">\n                            <div class=\"exel-view-column large\">Review of Responsibility</div>\n                        </div>\n                        <div class=\"exel-view-row multi-column\" [class.three-column]=\"true\">\n                            <div class=\"exel-view-column\">Reviewer</div>\n                            <div class=\"exel-view-column\">Review Start <span class=\"info-text\">(No. of days before the due date)</span></div>\n                            <div class=\"exel-view-column\">Review Fail <span class=\"info-text\" appTooltip=\"(No. of days after the due date. Select '0' if the responsibility must be reviewed 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 reviewed on the due date)</span></div>\n                        </div>\n                    </div>\n                    <div class=\"exel-view-column\" [class.two-column]=\"true\">\n                        <div class=\"exel-view-row\">\n                            <div class=\"exel-view-column large\">Overseer</div>\n                        </div>\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\n                            <div class=\"exel-view-column\">Always Notify</div>\n                            <div class=\"exel-view-column\">Notify on Failure</div>\n                        </div>\n                    </div>\n                    <!-- <div class=\"exel-view-column\">Overseer</div> -->\n\n                </div>\n                <div class=\"exel-view-row\" *ngFor=\"let report of responsibilityBulkUpload?.reports; let i = index\">\n                    <div class=\"exel-view-column sl-no\" [class.error]=\"!report?.isValid\">{{i+1}}</div>\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>\n                    <div class=\"exel-view-column multi-column\" *ngIf=\"responsibilityBulkUpload?.header.includes('Program')\" [class.error]=\"false\" [class.three-column]=\"true\">\n                        <div class=\"exel-view-row multi-column\" [class.three-column]=\"true\">\n                            <div class=\"exel-view-column\">{{report?.programType}}</div>\n                            <div class=\"exel-view-column\">{{report?.program}}</div>\n                            <div class=\"exel-view-column\">{{report?.programCategory}}</div>\n                        </div>\n                    </div>\n                    <div class=\"exel-view-column\">{{report?.assignor}}\n                        <!-- <i *ngIf=\"((report?.assignor) && (report?.reviewer === report?.assignor))\"\n                            class=\"icons\"\n                            [appTooltip]=\"'The Reviewer cannot also be the Assignor of this responsibility. Select another user as the Assignor.'\"\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                        </i> -->\n                    </div>\n                    <div class=\"exel-view-column multi-column\" [class.two-column]=\"true\">\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\n                            <div class=\"exel-view-column\" [class.error]=\"!report?.assignee || !report?.userValidateWithProgram?.isValidAssignee || (!report?.isValidUser)\">{{report?.assignee}}\n                                <!-- || (!report?.isValidUser) -->\n                                <i *ngIf=\"(!report?.assignee) || (!report?.isValidUser)\"\n                                    class=\"icons\"\n                                    [appTooltip]=\"'Select the user responsible for completing this responsibility. '\"\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                                </i>\n                                <i *ngIf=\"(report?.assignee) && !report?.userValidateWithProgram?.isValidAssignee\"\n                                    class=\"icons\"\n                                    [appTooltip]=\"'This user is not associated with the selected Program.'\"\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                                </i>\n                            </div>\n                            <div class=\"exel-view-column\">{{report?.assigneeType}}</div>\n                        </div>\n                    </div>\n                    <div class=\"exel-view-column\">{{report?.keyResponsibility}}</div>\n                    <div class=\"exel-view-column multi-column\" [class.five-column]=\"tabType === 'frequency' || tabType === 'onCompletion'\" [class.three-column]=\"tabType === 'ongoing'\">\n                        <ng-container *ngIf=\"tabType === 'frequency'\">\n                            <div class=\"exel-view-row multi-column\" [class.five-column]=\"true\">\n                                <div class=\"exel-view-column\" [class.error]=\"!report?.frequency\">{{report?.frequency}}\n                                    <i *ngIf=\"!report?.frequency\" class=\"icons\" [appTooltip]=\"'Select a frequency for this responsibility.'\"\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                                </div>\n                                <div class=\"exel-view-column\" [class.error]=\"!report?.validDate || report?.isPastDate\">{{report?.day}}\n                                    <i *ngIf=\"!report?.validDate\" class=\"icons\" [appTooltip]=\"'Invalid Due Date.'\"\n                                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                                    <i *ngIf=\"report?.isPastDate\" class=\"icons\" [appTooltip]=\"'This date occurs in the past. Select a future date.'\"\n                                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                                </div>\n                                <div class=\"exel-view-column\" [class.error]=\"!report?.validDate || report?.isPastDate\">{{report?.month}}\n                                    <i *ngIf=\"!report?.validDate\" class=\"icons\" [appTooltip]=\"'Invalid Due Date.'\"\n                                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                                    <i *ngIf=\"report?.isPastDate\" class=\"icons\" [appTooltip]=\"'This date occurs in the past. Select a future date.'\"\n                                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                                </div>\n                                <div class=\"exel-view-column\">{{report?.responsibilityWindow}}</div>\n                                <div class=\"exel-view-column\">{{report?.failedAfter}}</div>\n                            </div>\n                        </ng-container>\n                        <ng-container *ngIf=\"tabType === 'ongoing'\">\n                            <div class=\"exel-view-row multi-column\" [class.three-column]=\"true\">\n                                <div class=\"exel-view-column\" [class.error]=\"!report?.frequency\">{{report?.frequency}}\n                                    <i *ngIf=\"!report?.frequency\" class=\"icons\" [appTooltip]=\"'Select a frequency for this responsibility.'\"\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                                </div>\n                                <div class=\"exel-view-column\">{{report?.setReminder}}</div>\n                                <div class=\"exel-view-column\">{{report?.frequencyReminder}}</div>\n                            </div>\n                        </ng-container>\n                        <ng-container *ngIf=\"tabType === 'onCompletion'\">\n                            <div class=\"exel-view-row multi-column\" [class.five-column]=\"true\">\n                                <div class=\"exel-view-column\" [class.error]=\"!report?.frequency\">{{report?.frequency}}\n                                    <i *ngIf=\"!report?.frequency\" class=\"icons\" [appTooltip]=\"'Select a frequency for this responsibility.'\"\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                                </div>\n                                <div class=\"exel-view-column\" [class.error]=\"!report?.parentResponsibility\">{{report?.parentResponsibility}}\n                                    <i *ngIf=\"!report?.parentResponsibility\" class=\"icons\" [appTooltip]=\"'Select a parent responsibility on whose completion this responsibility will become active.'\"\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                                </div>\n                                <div class=\"exel-view-column\">{{report?.dueDate}}</div>\n                                <div class=\"exel-view-column\">{{report?.responsibilityWindow}}</div>\n                                <div class=\"exel-view-column\">{{report?.failedAfter}}</div>\n                            </div>\n                        </ng-container>\n                    </div>  \n                    <div class=\"exel-view-column\">{{report?.responsibilityCenter}}</div>\n                    <div class=\"exel-view-column\" [class.error]=\"!(report?.reportClass | riskClass)\">{{report?.reportClass}}\n                        <i *ngIf=\"!(report?.reportClass | riskClass)\" class=\"icons\" [appTooltip]=\"VALIDATION_MESSAGES.RISK_CLASS\"\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                    </div>\n                    <div class=\"exel-view-column\">{{report?.objective}}</div>\n                    <div class=\"exel-view-column\">{{report?.notes}}</div>\n                    <div class=\"exel-view-column multi-column\" [class.two-column]=\"true\">\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\n                            <div class=\"exel-view-column multi-column\">\n                                <div class=\"exel-view-row multi-column\">\n                                    <div class=\"exel-view-column\" [class.small-column]=\"true\">{{report?.isFormat}}</div>\n                                    <div class=\"exel-view-column\">{{report?.formatForResponsibility}}</div>\n                                </div>\n                            </div>\n                            <div class=\"exel-view-column\" [class.small-column]=\"true\">{{report?.documentEvidenceRequired}}</div>\n                        </div>\n                    </div>\n                    <!-- <div class=\"exel-view-column\">{{report?.assessments}}</div> -->\n                    <div class=\"exel-view-column multi-column\" [class.three-column]=\"true\">\n                        <div class=\"exel-view-row multi-column\" [class.three-column]=\"true\">\n                            <div class=\"exel-view-column\" [class.error]=\"report?.reviewer && (\n                              !report?.userValidateWithProgram?.isValidReviewer )\">{{report?.reviewer}}\n\n                        <!-- <i *ngIf=\"(report?.reviewer && report?.reviewer === report?.assignor)\"\n                            class=\"icons\"\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'\"\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                        </i> -->\n                        <i *ngIf=\"report?.reviewer && !report?.userValidateWithProgram?.isValidReviewer\"\n                            class=\"icons\"\n                            [appTooltip]=\"'This user is not associated with the selected Program.'\"\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                        </i>\n                            </div>\n                            <div class=\"exel-view-column\">{{report?.reviewToBeCompletedWithin}}</div>\n                            <div class=\"exel-view-column\">{{report?.reviewWillBeFailedAfter}}</div>\n                        </div>\n                    </div>\n\n                    <div class=\"exel-view-column multi-column\" [class.two-column]=\"true\">\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\n                            <div class=\"exel-view-column\" [class.error]=\"report?.overseer && (\n                              !report?.userValidateWithProgram?.isValidOverseer )\">\n                            {{report?.overseer}}\n\n                                <i *ngIf=\"(report?.overseer) && !report?.userValidateWithProgram?.isValidOverseer\"\n                                    class=\"icons\"\n                                    [appTooltip]=\"'This user is not associated with the selected Program.'\"\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                                </i>\n                            </div>\n                            <div class=\"exel-view-column\" [class.error]=\"report?.notifyOnFailure && (\n                            !report?.userValidateWithProgram?.isValidNotifyOnFailure )\">\n                                {{report?.notifyOnFailure}}\n\n                                <i *ngIf=\"(report?.notifyOnFailure) && !report?.userValidateWithProgram?.isValidNotifyOnFailure\"\n                                    class=\"icons\"\n                                    [appTooltip]=\"'This user is not associated with the selected Program.'\"\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                                </i>\n                            </div>\n                        </div>\n                    </div>\n\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))\">\n                        {{report?.overseer}}\n                        <i *ngIf=\"(report?.overseer) && ((report?.reviewer === report?.overseer))\"\n                            class=\"icons\"\n                            [appTooltip]=\"'The Reviewer cannot also be the Overseer of this responsibility. Select another user as the Overseer.'\"\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                        </i>\n\n                        <i *ngIf=\"report?.overseer && (report?.overseer === report?.assignee)\" class=\"icons\"\n                            [appTooltip]=\"'The Assignee cannot also be the Overseer of this responsibility. Select another user as the Overseer'\"\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                        </i>\n                        <i *ngIf=\"((report?.overseer) && (report?.overseer == report?.assignor))\"\n                            class=\"icons\"\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.'\"\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                        </i>\n                        <i *ngIf=\"!report?.userValidateWithProgram?.isValidOverseer\"\n                            class=\"icons\"\n                            [appTooltip]=\"'Selected user is not a valid overseer for selected program.'\"\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                        </i>\n                    </div> -->\n                </div>\n\n\n\n\n\n\n                <!-- ------------------------------------------------old code dynamic------------------------------------------------- -->\n\n                <!-- *ngFor=\"let report of responsibilityBulkUpload?.reports; let i = index\" -->\n            </div>\n        </div>\n        <div class=\"bulk-view-option\">\n            <button *ngIf=\"bulkUpload?.frequency?.reports?.length\" [class.active]=\"tabType === 'frequency'\" (click)=\"selectedTab.emit('frequency')\">Frequency Responsibilities</button>\n            <button *ngIf=\"bulkUpload?.ongoing?.reports?.length\" [class.active]=\"tabType === 'ongoing'\" (click)=\"selectedTab.emit('ongoing')\">Ongoing Responsibilities</button>\n            <button *ngIf=\"bulkUpload?.onCompletion?.reports?.length\" [class.active]=\"tabType === 'onCompletion'\" (click)=\"selectedTab.emit('onCompletion')\">On Completion Responsibilities</button>\n        </div>\n        <div class=\"bulk-view-footer\">\n            <!-- <div class=\"left\">\n                <p>{{finalResponsibilities}} out of {{responsibilityBulkUpload?.reports?.length}} responsibilities will be\n                    uploaded.</p>\n            </div> -->\n            <div class=\"left\">\n                <p>{{finalResponsibilities}} out of {{responsibilityMultiTabBulkUpload?.length}} {{responsibilityMultiTabBulkUpload?.length > 1 ? 'responsibilities' : 'responsibility'}} will be\n                    uploaded.</p>\n            </div>\n            <div class=\"right\">\n                <button (click)=\"close()\" id=\"bulk-resp-cancel\">Cancel</button>\n                <button (click)=\"submit()\" id=\"bulk-resp-confirm\" [disabled]=\"!isConfirmClickable\" class=\"blue\">Confirm</button>\n                <!-- finalResponsibilities < 1 -->\n            </div>\n        </div>\n    </div>\n    <app-loader  *ngIf=\"loader\"></app-loader>\n\n</ng-container>\n\n    <!-- --------------------------------------------------------------------upward is new one-------------------- -->\n", styles: ["@import\"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;inset: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;border:none;padding-right:10px;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.three-column .exel-view-column,.bulk-view-body.bulk .exel-view-row.five-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 #1e03d259;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}\n"] }]
         }], propDecorators: { responsibilityBulkUpload: [{
                 type: Input
             }], fileName: [{
@@ -47610,6 +47643,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }] } });
 
+const REGIX = {
+    MONTH: /^[A-Za-z]+'\d{2}$/,
+};
+
 class AddMultipleResponsibilityWithTabComponent {
     set uploadedFileData(data) {
         this.uploadedFile(data);
@@ -47976,6 +48013,9 @@ class AddMultipleResponsibilityWithTabComponent {
             return false;
         }
         else {
+            const monthFormatRegex = REGIX.MONTH;
+            if (!monthFormatRegex.test(month))
+                return false;
             const monthAndYear = month.split("'");
             const startDate = moment(day + '-' + monthAndYear[0] + '-' + 20 + monthAndYear[1] + ' 00:00:00', 'DD-MMMM-YYYY HH:mm:ss').format('YYYY-MM-DD HH:mm:ss');
             if (startDate == 'Invalid date') {
@@ -48745,7 +48785,8 @@ class AddMultipleResponsibilityWithTabComponent {
                             !obj['isPastDate'] &&
                             obj?.frequency?.length &&
                             !Object.values(obj['userValidateWithProgram']).includes(false) &&
-                            obj['isValidUser'];
+                            obj['isValidUser'] &&
+                            this.isValidRiskClass(obj?.reportClass);
                     return obj;
                 }
                 else {
@@ -48788,7 +48829,8 @@ class AddMultipleResponsibilityWithTabComponent {
                             obj['validDate'] &&
                             !obj['isPastDate'] &&
                             obj?.frequency?.length &&
-                            obj['isValidUser'];
+                            obj['isValidUser'] &&
+                            this.isValidRiskClass(obj?.reportClass);
                     return obj;
                 }
                 break;
@@ -48831,7 +48873,8 @@ class AddMultipleResponsibilityWithTabComponent {
                     obj['isValid'] =
                         obj['isValidData'] &&
                             !Object.values(obj['userValidateWithProgram']).includes(false) &&
-                            obj['isValidUser'];
+                            obj['isValidUser'] &&
+                            this.isValidRiskClass(obj?.reportClass);
                     return obj;
                 }
                 else {
@@ -48865,7 +48908,8 @@ class AddMultipleResponsibilityWithTabComponent {
                     obj['isValidUser'] = this.returnIds(obj?.assignee, 'entrusted_to')
                         ? true
                         : false;
-                    obj['isValid'] = obj['isValidData'] && obj['isValidUser'];
+                    obj['isValid'] = obj['isValidData'] && obj['isValidUser'] &&
+                        this.isValidRiskClass(obj?.reportClass);
                     return obj;
                 }
             }
@@ -48910,7 +48954,8 @@ class AddMultipleResponsibilityWithTabComponent {
                         obj['isValidData'] &&
                             !Object.values(obj['userValidateWithProgram']).includes(false) &&
                             obj?.parentResponsibility?.length &&
-                            obj['isValidUser'];
+                            obj['isValidUser'] &&
+                            this.isValidRiskClass(obj?.reportClass);
                     return obj;
                 }
                 else {
@@ -48949,7 +48994,8 @@ class AddMultipleResponsibilityWithTabComponent {
                     obj['isValid'] =
                         obj['isValidData'] &&
                             obj?.parentResponsibility?.length &&
-                            obj['isValidUser'];
+                            obj['isValidUser'] &&
+                            this.isValidRiskClass(obj?.reportClass);
                     return obj;
                 }
             }
@@ -48957,6 +49003,9 @@ class AddMultipleResponsibilityWithTabComponent {
             }
         }
     }
+    isValidRiskClass(riskClass) {
+        return RISK_CLASS_LIST.includes(riskClass?.toLowerCase());
+    }
     /**
      * It takes a string, removes all whitespace, and returns the string
      * @param {any} name - the name of the responsibility
@@ -52566,7 +52615,8 @@ class VComplyWorkflowEngineModule {
             ApprovalCreateFormComponent,
             LinkProgramComponent,
             TooltipValidationPipe,
-            LinkRelatedPoliciesComponent], imports: [ReactiveFormsModule,
+            LinkRelatedPoliciesComponent,
+            RiskClassPipe], imports: [ReactiveFormsModule,
             CreateAssessmentModule,
             // MarxEditorModule,
             VcomplyEditorModule,
@@ -52748,7 +52798,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         ApprovalCreateFormComponent,
                         LinkProgramComponent,
                         TooltipValidationPipe,
-                        LinkRelatedPoliciesComponent
+                        LinkRelatedPoliciesComponent,
+                        RiskClassPipe
                     ],
                     imports: [
                         ReactiveFormsModule,