vcomply-workflow-engine 8.0.9 → 8.0.11

package/fesm2022/vcomply-workflow-engine.mjs

@@ -20196,6 +20196,10 @@ const VALIDATION_MESSAGES = {
     DAY: 'Invalid day selection. Select a valid day from the drop-down list in the template.',
     DATE_FORMAT: 'Invalid date format. Select a valid date from the drop-down list in the template.',
     DUE_DATE: 'Invalid Due Date.',
+    START_DATE: 'Invalid Start Date.',
+    START_DATE_PAST: 'Start date cannot be less than the current date.',
+    START_DATE_AFTER_DUE_DATE: 'Start date cannot be greater than the due date.',
+    START_MONTH: 'Invalid month selection. Select a valid month from the drop-down list in the template.',
 };
 const RESPONSIBILITY_VALIDATION_MESSAGES = {
     WHO_MANAGING: 'Please select the person responsible for managing this responsibility.',
@@ -46928,11 +46932,11 @@ class BulkResponsibilityViewComponent {
         this.cancel.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: BulkResponsibilityViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.21", type: BulkResponsibilityViewComponent, isStandalone: false, 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                </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                    \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                            \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                    \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                    \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                        \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]=\"report?.isDayInvalid ? VALIDATION_MESSAGES.DAY : VALIDATION_MESSAGES.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]=\"report?.isDateFormatInvalid ? VALIDATION_MESSAGES.DATE_FORMAT : VALIDATION_MESSAGES.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                    \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                        \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                    \n                </div>\n\n\n\n\n\n\n                <!-- ------------------------------------------------old code dynamic------------------------------------------------- -->\n\n                \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            \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-multi\">Cancel</button>\n                <button (click)=\"submit()\" id=\"bulk-resp-confirm-multi\" [disabled]=\"!isConfirmClickable\" class=\"blue\">Confirm</button>\n                \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" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.21", type: BulkResponsibilityViewComponent, isStandalone: false, 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                </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                    \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.seven-column]=\"tabType === 'frequency'\" [class.five-column]=\"tabType === 'onCompletion'\" [class.three-column]=\"tabType === 'ongoing'\">\n                        <div class=\"exel-view-row\">\n                            \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.seven-column]=\"tabType === 'frequency'\" [class.five-column]=\"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                                <div class=\"exel-view-column\">Start Date <span class=\"info-text\">(Day)</span></div>\n                                <div class=\"exel-view-column\">Start Date <span class=\"info-text\">(Month)</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                    \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                    \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                        \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.seven-column]=\"tabType === 'frequency'\" [class.five-column]=\"tabType === 'onCompletion'\" [class.three-column]=\"tabType === 'ongoing'\">\n                        <ng-container *ngIf=\"tabType === 'frequency'\">\n                            <div class=\"exel-view-row multi-column\" [class.seven-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]=\"report?.isDayInvalid ? VALIDATION_MESSAGES.DAY : VALIDATION_MESSAGES.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]=\"report?.isDateFormatInvalid ? VALIDATION_MESSAGES.DATE_FORMAT : VALIDATION_MESSAGES.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 class=\"exel-view-column\" [class.error]=\"!report?.validStartDate || report?.isStartPastDate || !report?.isValidTimeLine\">{{report?.startDay}}\n                                    <i *ngIf=\"!report?.validStartDate && !report?.isStartPastDate\" class=\"icons\" [appTooltip]=\"VALIDATION_MESSAGES.START_DATE\"\n                                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                                    <i *ngIf=\"report?.isStartPastDate\" class=\"icons\" [appTooltip]=\"VALIDATION_MESSAGES.START_DATE_PAST\"\n                                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                                    <i *ngIf=\"report?.validStartDate && !report?.isStartPastDate && !report?.isValidTimeLine\" class=\"icons\" [appTooltip]=\"VALIDATION_MESSAGES.START_DATE_AFTER_DUE_DATE\"\n                                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                                </div>\n                                <div class=\"exel-view-column\" [class.error]=\"!report?.validStartDate || report?.isStartPastDate || !report?.isValidTimeLine\">{{report?.startMonth}}\n                                    <i *ngIf=\"!report?.validStartDate && !report?.isStartPastDate\" class=\"icons\" [appTooltip]=\"VALIDATION_MESSAGES.DATE_FORMAT\"\n                                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                                    <i *ngIf=\"report?.isStartPastDate\" class=\"icons\" [appTooltip]=\"VALIDATION_MESSAGES.START_DATE_PAST\"\n                                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                                    <i *ngIf=\"report?.validStartDate && !report?.isStartPastDate && !report?.isValidTimeLine\" class=\"icons\" [appTooltip]=\"VALIDATION_MESSAGES.START_DATE_AFTER_DUE_DATE\"\n                                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                                </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                    \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                        \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                    \n                </div>\n\n\n\n\n\n\n                <!-- ------------------------------------------------old code dynamic------------------------------------------------- -->\n\n                \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            \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-multi\">Cancel</button>\n                <button (click)=\"submit()\" id=\"bulk-resp-confirm-multi\" [disabled]=\"!isConfirmClickable\" class=\"blue\">Confirm</button>\n                \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,.bulk-view-body.bulk .exel-view-row.seven-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-body.bulk .exel-view-column.seven-column{width:1400px;min-width:1400px!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: "20.3.21", ngImport: i0, type: BulkResponsibilityViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-bulk-responsibility-view', standalone: false, 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                </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                    \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                            \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                    \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                    \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                        \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]=\"report?.isDayInvalid ? VALIDATION_MESSAGES.DAY : VALIDATION_MESSAGES.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]=\"report?.isDateFormatInvalid ? VALIDATION_MESSAGES.DATE_FORMAT : VALIDATION_MESSAGES.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                    \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                        \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                    \n                </div>\n\n\n\n\n\n\n                <!-- ------------------------------------------------old code dynamic------------------------------------------------- -->\n\n                \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            \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-multi\">Cancel</button>\n                <button (click)=\"submit()\" id=\"bulk-resp-confirm-multi\" [disabled]=\"!isConfirmClickable\" class=\"blue\">Confirm</button>\n                \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', standalone: false, 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                </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                    \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.seven-column]=\"tabType === 'frequency'\" [class.five-column]=\"tabType === 'onCompletion'\" [class.three-column]=\"tabType === 'ongoing'\">\n                        <div class=\"exel-view-row\">\n                            \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.seven-column]=\"tabType === 'frequency'\" [class.five-column]=\"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                                <div class=\"exel-view-column\">Start Date <span class=\"info-text\">(Day)</span></div>\n                                <div class=\"exel-view-column\">Start Date <span class=\"info-text\">(Month)</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                    \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                    \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                        \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.seven-column]=\"tabType === 'frequency'\" [class.five-column]=\"tabType === 'onCompletion'\" [class.three-column]=\"tabType === 'ongoing'\">\n                        <ng-container *ngIf=\"tabType === 'frequency'\">\n                            <div class=\"exel-view-row multi-column\" [class.seven-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]=\"report?.isDayInvalid ? VALIDATION_MESSAGES.DAY : VALIDATION_MESSAGES.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]=\"report?.isDateFormatInvalid ? VALIDATION_MESSAGES.DATE_FORMAT : VALIDATION_MESSAGES.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 class=\"exel-view-column\" [class.error]=\"!report?.validStartDate || report?.isStartPastDate || !report?.isValidTimeLine\">{{report?.startDay}}\n                                    <i *ngIf=\"!report?.validStartDate && !report?.isStartPastDate\" class=\"icons\" [appTooltip]=\"VALIDATION_MESSAGES.START_DATE\"\n                                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                                    <i *ngIf=\"report?.isStartPastDate\" class=\"icons\" [appTooltip]=\"VALIDATION_MESSAGES.START_DATE_PAST\"\n                                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                                    <i *ngIf=\"report?.validStartDate && !report?.isStartPastDate && !report?.isValidTimeLine\" class=\"icons\" [appTooltip]=\"VALIDATION_MESSAGES.START_DATE_AFTER_DUE_DATE\"\n                                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                                </div>\n                                <div class=\"exel-view-column\" [class.error]=\"!report?.validStartDate || report?.isStartPastDate || !report?.isValidTimeLine\">{{report?.startMonth}}\n                                    <i *ngIf=\"!report?.validStartDate && !report?.isStartPastDate\" class=\"icons\" [appTooltip]=\"VALIDATION_MESSAGES.DATE_FORMAT\"\n                                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                                    <i *ngIf=\"report?.isStartPastDate\" class=\"icons\" [appTooltip]=\"VALIDATION_MESSAGES.START_DATE_PAST\"\n                                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                                    <i *ngIf=\"report?.validStartDate && !report?.isStartPastDate && !report?.isValidTimeLine\" class=\"icons\" [appTooltip]=\"VALIDATION_MESSAGES.START_DATE_AFTER_DUE_DATE\"\n                                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                                </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                    \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                        \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                    \n                </div>\n\n\n\n\n\n\n                <!-- ------------------------------------------------old code dynamic------------------------------------------------- -->\n\n                \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            \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-multi\">Cancel</button>\n                <button (click)=\"submit()\" id=\"bulk-resp-confirm-multi\" [disabled]=\"!isConfirmClickable\" class=\"blue\">Confirm</button>\n                \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,.bulk-view-body.bulk .exel-view-row.seven-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-body.bulk .exel-view-column.seven-column{width:1400px;min-width:1400px!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: [{
@@ -48262,6 +48266,33 @@ class AddMultipleResponsibilityWithTabComponent {
             }
         }
     }
+    /**
+     * Converts bulk-upload day/month values (e.g. 15 and "June'26") into a moment date.
+     * Used when comparing Start Date against Due Date during frequency responsibility validation.
+     */
+    parseBulkUploadDate(day, month) {
+        if (!(day && month)) {
+            return null;
+        }
+        const monthAndYear = month.split("'");
+        const parsedDate = moment$1(day + '-' + monthAndYear[0] + '-' + 20 + monthAndYear[1] + ' 00:00:00', 'DD-MMMM-YYYY HH:mm:ss');
+        return parsedDate.isValid() ? parsedDate : null;
+    }
+    /**
+     * Ensures the responsibility Start Date does not fall after the Due Date.
+     * Returns true when Start Date is omitted, or when it is on/before the Due Date.
+     */
+    validateTimeLine(startDay, startMonth, day, month) {
+        if (!(startDay || startMonth)) {
+            return true;
+        }
+        const startDate = this.parseBulkUploadDate(startDay, startMonth);
+        const dueDate = this.parseBulkUploadDate(day, month);
+        if (!startDate || !dueDate) {
+            return false;
+        }
+        return startDate.isSameOrBefore(dueDate, 'day');
+    }
     downloadTemplate() {
         this.downloadStatus = 'DOWNLOADING';
         this.downloadPercent = 0;
@@ -48917,18 +48948,20 @@ class AddMultipleResponsibilityWithTabComponent {
                         month: report[10],
                         responsibilityWindow: report[11],
                         failedAfter: report[12],
-                        responsibilityCenter: report[13],
-                        reportClass: report[14],
-                        objective: report[15],
-                        notes: report[16],
-                        isFormat: report[17],
-                        formatForResponsibility: report[18],
-                        documentEvidenceRequired: report[19],
-                        reviewer: report[20],
-                        reviewToBeCompletedWithin: report[21],
-                        reviewWillBeFailedAfter: report[22],
-                        overseer: report[23],
-                        notifyOnFailure: report[24],
+                        startDay: report[13],
+                        startMonth: report[14],
+                        responsibilityCenter: report[15],
+                        reportClass: report[16],
+                        objective: report[17],
+                        notes: report[18],
+                        isFormat: report[19],
+                        formatForResponsibility: report[20],
+                        documentEvidenceRequired: report[21],
+                        reviewer: report[22],
+                        reviewToBeCompletedWithin: report[23],
+                        reviewWillBeFailedAfter: report[24],
+                        overseer: report[25],
+                        notifyOnFailure: report[26],
                     };
                     obj['isValidData'] = this.isValidData(obj);
                     obj['isValidUser'] = this.returnIds(obj?.assignee, 'entrusted_to')
@@ -48939,10 +48972,16 @@ class AddMultipleResponsibilityWithTabComponent {
                     obj['isDateFormatInvalid'] = this.isDateFormatInvalid;
                     obj['isDayInvalid'] = this.isDayInvalid;
                     obj['isPastDate'] = this.isPastDate(obj?.day, obj?.month);
+                    obj['validStartDate'] = this.compareWithCurrentDate(obj?.startDay, obj?.startMonth);
+                    obj['isStartPastDate'] = this.isPastDate(obj?.startDay, obj?.startMonth);
+                    obj['isValidTimeLine'] = this.validateTimeLine(obj?.startDay, obj?.startMonth, obj?.day, obj?.month);
                     obj['isValid'] =
                         obj['isValidData'] &&
                             obj['validDate'] &&
                             !obj['isPastDate'] &&
+                            obj['validStartDate'] &&
+                            !obj['isStartPastDate'] &&
+                            obj['isValidTimeLine'] &&
                             obj?.frequency?.length &&
                             !Object.values(obj['userValidateWithProgram']).includes(false) &&
                             obj['isValidUser'] &&
@@ -48962,18 +49001,20 @@ class AddMultipleResponsibilityWithTabComponent {
                         month: report[7],
                         responsibilityWindow: report[8],
                         failedAfter: report[9],
-                        responsibilityCenter: report[10],
-                        reportClass: report[11],
-                        objective: report[12],
-                        notes: report[13],
-                        isFormat: report[14],
-                        formatForResponsibility: report[15],
-                        documentEvidenceRequired: report[16],
-                        reviewer: report[17],
-                        reviewToBeCompletedWithin: report[18],
-                        reviewWillBeFailedAfter: report[19],
-                        overseer: report[20],
-                        notifyOnFailure: report[21],
+                        startDay: report[10],
+                        startMonth: report[11],
+                        responsibilityCenter: report[12],
+                        reportClass: report[13],
+                        objective: report[14],
+                        notes: report[15],
+                        isFormat: report[16],
+                        formatForResponsibility: report[17],
+                        documentEvidenceRequired: report[18],
+                        reviewer: report[19],
+                        reviewToBeCompletedWithin: report[20],
+                        reviewWillBeFailedAfter: report[21],
+                        overseer: report[22],
+                        notifyOnFailure: report[23],
                     };
                     obj['isValidData'] = this.isValidData(obj);
                     obj['userValidateWithProgram'] = this.validateDataWithProgram(obj);
@@ -48982,10 +49023,16 @@ class AddMultipleResponsibilityWithTabComponent {
                         : false;
                     obj['validDate'] = this.compareWithCurrentDate(obj?.day, obj?.month);
                     obj['isPastDate'] = this.isPastDate(obj?.day, obj?.month);
+                    obj['validStartDate'] = this.compareWithCurrentDate(obj?.startDay, obj?.startMonth);
+                    obj['isStartPastDate'] = this.isPastDate(obj?.startDay, obj?.startMonth);
+                    obj['isValidTimeLine'] = this.validateTimeLine(obj?.startDay, obj?.startMonth, obj?.day, obj?.month);
                     obj['isValid'] =
                         obj['isValidData'] &&
                             obj['validDate'] &&
                             !obj['isPastDate'] &&
+                            obj['validStartDate'] &&
+                            !obj['isStartPastDate'] &&
+                            obj['isValidTimeLine'] &&
                             obj?.frequency?.length &&
                             obj['isValidUser'] &&
                             this.isValidRiskClass(obj?.reportClass);