import { Component, EventEmitter, Input, Output } from '@angular/core';
import { VALIDATION_MESSAGES } from '../../constants/responsibility';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "../../ui-kit/tooltip/tooltip.directive";
import * as i3 from "../v-loader/loader/loader.component";
import * as i4 from "../pipes/risk-class.pipe";
export class BulkResponsibilityViewComponent {
    constructor() {
        this.VALIDATION_MESSAGES = VALIDATION_MESSAGES;
        this.loader = false;
        this.tabType = 'frequency';
        this.submitResponsibilityBulkUpload = new EventEmitter();
        this.cancel = new EventEmitter();
        this.selectedTab = new EventEmitter();
        this.responsibilityType = 'singleTab';
        this.finalResponsibilities = 0;
        this.isConfirmClickable = false;
        this.responsibilityMultiTabBulkUpload = [];
    }
    ngOnChanges() {
        if (this.responsibilityBulkUpload) {
            this.finalResponsibilities = 0;
            this.responsibilityBulkUpload?.reports.forEach((risk) => {
                if (risk.isValid) {
                    this.finalResponsibilities += 1;
                }
            });
        }
        if (this.responsibilityType === 'multiTab') {
            this.responsibilityMultiTabBulkUpload =
                this.bulkUpload?.frequency?.reports?.concat(this.bulkUpload?.ongoing?.reports, this.bulkUpload?.onCompletion?.reports);
            this.isConfirmClickable = this.responsibilityMultiTabBulkUpload?.some((responsibility) => responsibility.isValid);
            this.finalResponsibilities = 0;
            this.responsibilityMultiTabBulkUpload?.forEach((risk) => {
                if (risk.isValid) {
                    this.finalResponsibilities += 1;
                }
            });
        }
    }
    submit() {
        this.submitResponsibilityBulkUpload.emit();
    }
    close() {
        this.cancel.emit();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BulkResponsibilityViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: BulkResponsibilityViewComponent, selector: "app-bulk-responsibility-view", inputs: { responsibilityBulkUpload: "responsibilityBulkUpload", fileName: "fileName", defaultOwner: "defaultOwner", loader: "loader", tabType: "tabType", bulkUpload: "bulkUpload", responsibilityType: "responsibilityType" }, outputs: { submitResponsibilityBulkUpload: "submitResponsibilityBulkUpload", cancel: "cancel", selectedTab: "selectedTab" }, usesOnChanges: true, ngImport: i0, template: "\n<ng-container *ngIf=\"responsibilityType === 'singleTab'\">\n<div class=\"bulk-view\">\n    <div class=\"bulk-view-head\">\n        <h2 class=\"bulk-view-title\">\n            {{fileName}}\n        </h2>\n    </div>\n    <div class=\"bulk-view-body\">\n        <div class=\"exel-view\">\n            <div class=\"exel-view-row head\">\n                <div class=\"exel-view-column sl-no\">#</div>\n                <div class=\"exel-view-column\" *ngFor=\"let heading of responsibilityBulkUpload?.header\"\n                    [class.large]=\"heading && heading.startsWith('Inherent')\">\n                    <ng-container *ngIf=\"heading && !(heading.startsWith('Due')) && !(heading.startsWith('Oversight'))\">\n                        {{(heading.includes('*')? heading.replace('*', '') : heading)}}\n                        <span *ngIf=\"heading.includes('*')\" class=\"required\">*</span>\n                    </ng-container>\n                    <ng-container *ngIf=\"heading && heading.startsWith('Due')\">\n                        <div class=\"exel-view-row\">\n                            <div class=\"exel-view-column large\">Due Date</div>\n                        </div>\n                        <div class=\"exel-view-row multi-column\">\n                            <div class=\"exel-view-column\">Day</div>\n                            <div class=\"exel-view-column\">Month</div>\n                        </div>\n                    </ng-container>\n                    <ng-container *ngIf=\"heading && heading.startsWith('Oversight')\">\n                        <div class=\"exel-view-row\">\n                            <div class=\"exel-view-column large\">Oversight </div>\n                        </div>\n                        <div class=\"exel-view-row multi-column\">\n                            <div class=\"exel-view-column\">Always Notify</div>\n                            <div class=\"exel-view-column\">Notify on Failure</div>\n                        </div>\n                    </ng-container>\n                </div>\n\n            </div>\n            <div class=\"exel-view-row\" *ngFor=\"let report of responsibilityBulkUpload?.reports; let i = index\">\n                <div class=\"exel-view-column sl-no\">{{i+1}}</div>\n\n                <div class=\"exel-view-column\" [class.error]=\"!report.responsibilityName\">{{report?.responsibilityName}}\n                    <i *ngIf=\"!report?.responsibilityName\" class=\"icons\"\n                        [appTooltip]=\"'Enter a name for this responsibility.'\" placement=\"bottom-right\" type=\"white\"\n                        delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                </div>\n                <div class=\"exel-view-column\">\n                    {{report?.assignor}}\n                    <i *ngIf=\"((report?.assignor) && (report?.notifyOnFailure == report?.assignor||report?.alwaysNotify == report?.assignor))\"\n                        class=\"icons\"\n                        [appTooltip]=\"'The Overseer cannot also be the Assignor of this responsibility. Select another user as the Assignor.'\"\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                    </i>\n<!--\n                    <i *ngIf=\"((report?.assignor) && (report?.reviewer == report?.assignor))\"\n                        class=\"icons\"\n                        [appTooltip]=\"'The Reviewer cannot also be the Assignor of this responsibility. Select another user as the Assignor.'\"\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                    </i>     -->\n                </div>\n                <div class=\"exel-view-column\">\n                    {{report?.assignee}}\n\n                    <i *ngIf=\"((report?.assignee) && (report?.notifyOnFailure == report?.assignee||report?.alwaysNotify == report?.assignee))\"\n                        class=\"icons\"\n                        [appTooltip]=\"'The Overseer cannot also be the Assignee of this responsibility. Select another user as the Assignee.'\"\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                    </i>\n\n                    <i *ngIf=\"((report?.assignee) && (report?.reviewer == report?.assignee))\"\n                        class=\"icons\"\n                        [appTooltip]=\"'The Reviewer cannot also be the Assignee of this responsibility. Select another user as the Assignee.'\"\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                    </i>\n                    <i *ngIf=\"(!report?.assignee) || (!report?.isValidUser)\"\n                    class=\"icons\"\n                    [appTooltip]=\"'Select the user responsible for completing this responsibility. '\"\n                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                    </i>\n                </div>\n                <div class=\"exel-view-column\" id=\"resCategory\" *ngIf=\"report?.responsibilityCategory!==null\">{{report?.responsibilityCategory}}</div>\n                <div class=\"exel-view-column\" [class.error]=\"!report.frequency\">{{report?.frequency}}\n                    <i *ngIf=\"!report?.frequency\" class=\"icons\" [appTooltip]=\"'Select a frequency for this responsibility.'\"\n                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                </div>\n                <div class=\"exel-view-column multi-column\">\n                    <div class=\"exel-view-row\">\n                        <div class=\"exel-view-column\" [class.error]=\"!report.isValidDueDate\">{{report?.day}}\n                            <i *ngIf=\"!report?.isValidDueDate\" class=\"icons\" [appTooltip]=\"'Invalid Due Date.'\"\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                            <i *ngIf=\"report?.isPastDate\" class=\"icons\" [appTooltip]=\"'This date occurs in the past. Select a future date.'\"\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                        </div>\n                        <div class=\"exel-view-column\" [class.error]=\"!report.isValidDueDate\">{{report?.month}}\n                            <i *ngIf=\"!report?.isValidDueDate\" class=\"icons\" [appTooltip]=\"'Invalid Due Date.'\"\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                            <i *ngIf=\"report?.isPastDate\" class=\"icons\" [appTooltip]=\"'This date occurs in the past. Select a future date.'\"\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"exel-view-column\">{{report?.responsibilityWindow}}</div>\n                <div class=\"exel-view-column\">{{report?.failedAfter}}</div>\n                <div class=\"exel-view-column\">{{report?.reportClass}}</div>\n                <div class=\"exel-view-column\">{{report?.responsibilityCenter}}</div>\n                <div class=\"exel-view-column\">\n                    {{report?.reviewer}}\n\n                    <i *ngIf=\"(report?.reviewer) && ((report?.reviewer == report?.alwaysNotify) || (report?.reviewer == report?.notifyOnFailure))\"\n                        class=\"icons\"\n                        [appTooltip]=\"'The Overseer cannot also be the Reviewer of this responsibility. Select another user as the Reviewer'\"\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                    </i>\n\n                    <i *ngIf=\"report?.reviewer && (report?.reviewer == report?.assignee)\" class=\"icons\"\n                        [appTooltip]=\"'The Assignee cannot also be the Reviewer of this responsibility. Select another user as the Reviewer.'\"\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                    </i>\n                    <!-- <i *ngIf=\"(report?.reviewer && report?.assignor)\"\n                        class=\"icons\"\n                        [appTooltip]=\"((report?.assignor)?'The Assignor cannot also be the Reviewer of this responsibility.':'You cannot be a Reviewer of this responsibility since you are the assignor. ') +'Select another user as the Reviewer'\"\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                    </i> -->\n                </div>\n                <div class=\"exel-view-column\">{{report?.reviewToBeCompletedWithin}}</div>\n                <div class=\"exel-view-column\">{{report?.reviewWillBeFailedAfter}}</div>\n                <div class=\"exel-view-column\">{{report?.formatForResponsibility}}</div>\n                <div class=\"exel-view-column\">{{report?.notes}}</div>\n                <div class=\"exel-view-column\">{{report?.documentEvidenceRequired}}</div>\n                <div class=\"exel-view-column multi-column\">\n                    <div class=\"exel-view-row\">\n                        <div class=\"exel-view-column\">\n                            {{report?.alwaysNotify}}\n                            <i *ngIf=\"(report?.alwaysNotify) && ((report?.reviewer == report?.alwaysNotify))\"\n                                class=\"icons\"\n                                [appTooltip]=\"'The Reviewer cannot also be the Overseer of this responsibility. Select another user as the Overseer.'\"\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                            </i>\n\n                            <i *ngIf=\"report?.alwaysNotify && (report?.alwaysNotify == report?.assignee)\" class=\"icons\"\n                                [appTooltip]=\"'The Assignee cannot also be the Overseer of this responsibility. Select another user as the Overseer'\"\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                            </i>\n                            <i *ngIf=\"((report?.alwaysNotify && report?.assignor) && (report?.alwaysNotify == report?.assignor)) ||((report?.alwaysNotify && (!report?.assignor)) && (report?.alwaysNotify == defaultOwner))\"\n                                class=\"icons\"\n                                [appTooltip]=\"((report?.assignor)?'The Assignor cannot also be the Overseer of this responsibility. ':'You cannot be an Overseer of this responsibility since you are the Assignor. ') +'Select another user as the Overseer.'\"\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                            </i>\n                        </div>\n                        <div class=\"exel-view-column\">\n                            {{report?.notifyOnFailure}}\n                            <i *ngIf=\"(report?.notifyOnFailure) && ((report?.reviewer == report?.notifyOnFailure))\"\n                            class=\"icons\"\n                            [appTooltip]=\"'The Reviewer cannot also be the Overseer of this responsibility. Select another user as the Overseer.'\"\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                        </i>\n\n                        <i *ngIf=\"report?.notifyOnFailure && (report?.notifyOnFailure == report?.assignee)\" class=\"icons\"\n                            [appTooltip]=\"'The Assignee cannot also be the Overseer of this responsibility. Select another user as the Overseer'\"\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                        </i>\n                        <i *ngIf=\"((report?.notifyOnFailure && report?.assignor) && (report?.notifyOnFailure == report?.assignor)) ||((report?.notifyOnFailure && (!report?.assignor)) && (report?.notifyOnFailure == defaultOwner))\"\n                            class=\"icons\"\n                            [appTooltip]=\"((report?.assignor)?'The Assignor cannot also be the Overseer of this responsibility. ':'You cannot be an Overseer of this responsibility since you are the Assignor. ') +'Select another user as the Overseer.'\"\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                        </i>\n                        </div>\n                    </div>\n                </div>\n\n\n                <div class=\"exel-view-column\">{{report?.keyResponsibility}}</div>\n                <div class=\"exel-view-column\">{{report?.objective}}</div>\n\n            </div>\n        </div>\n    </div>\n    <div class=\"bulk-view-footer\">\n        <div class=\"left\">\n            <p>{{finalResponsibilities}} out of {{responsibilityBulkUpload?.reports?.length}} responsibilities will be\n                uploaded.</p>\n        </div>\n        <div class=\"right\">\n            <button (click)=\"close()\" id=\"bulk-resp-cancel\" >Cancel</button>\n            <button (click)=\"submit()\" id=\"bulk-resp-confirm\" [disabled]=\"finalResponsibilities<1\" class=\"blue\">Confirm</button>\n        </div>\n    </div>\n</div>\n<app-loader  *ngIf=\"loader\"></app-loader>\n\n</ng-container>\n\n<!-- --------------------------------------------------------------------upward is new one-------------------- -->\n<app-loader  *ngIf=\"loader\"></app-loader>\n\n\n\n\n\n\n<!-- HTML for multiple tabs -->\n<ng-container *ngIf=\"responsibilityType === 'multiTab'\">\n    <div class=\"bulk-view\">\n        <div class=\"bulk-view-head\">\n            <h2 class=\"bulk-view-title\">\n                {{fileName}}\n            </h2>\n        </div>\n        <div class=\"bulk-view-body bulk\">\n            <div class=\"exel-view\">\n                <div class=\"exel-view-row head\">\n                    <div class=\"exel-view-column sl-no\">#</div>\n                    <div class=\"exel-view-column\">Responsibility Name <span class=\"required\">*</span></div>\n                    <div class=\"exel-view-column\" *ngIf=\"responsibilityBulkUpload?.header.includes('Program')\" [class.three-column]=\"true\">\n                        <div class=\"exel-view-row\">\n                            <div class=\"exel-view-column large\">Program</div>\n                        </div>\n                        <div class=\"exel-view-row multi-column\" [class.three-column]=\"true\">\n                            <div class=\"exel-view-column\">Program Type</div>\n                            <div class=\"exel-view-column\">Program</div>\n                            <div class=\"exel-view-column\">Program Category</div>\n                        </div>\n                    </div>\n                    <div class=\"exel-view-column\">Entrusted By</div>\n                    <div class=\"exel-view-column\" [class.two-column]=\"true\">\n                        <div class=\"exel-view-row\">\n                            <div class=\"exel-view-column large\">Entrust To <span class=\"required\">*</span></div>\n                        </div>\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\n                            <div class=\"exel-view-column\">Person or Group<span class=\"required\">*</span></div>\n                            <div class=\"exel-view-column\">All or Any Persons</div>\n                        </div>\n                    </div>\n                    <div class=\"exel-view-column\">Key Responsibility?</div>\n                    <div class=\"exel-view-column\" [class.five-column]=\"tabType === 'frequency' || tabType === 'onCompletion'\" [class.three-column]=\"tabType === 'ongoing'\">\n                        <div class=\"exel-view-row\">\n                            <!-- <div class=\"exel-view-column large\">Frequency of Occurrence and Completion Window <span class=\"required\">*</span></div> -->\n                            <div class=\"exel-view-column large\">{{responsibilityBulkUpload?.header.includes('Program') ? responsibilityBulkUpload?.header[8]?.slice(0, -1) : responsibilityBulkUpload?.header[5]?.slice(0, -1)}}<span class=\"required\">*</span></div>\n                        </div>\n                        <div class=\"exel-view-row multi-column\" [class.five-column]=\"tabType === 'frequency' || tabType === 'onCompletion'\" [class.three-column]=\"tabType === 'ongoing'\">\n                            <ng-container *ngIf=\"tabType === 'frequency'\">\n                                <div class=\"exel-view-column\">Frequency <span class=\"required\">*</span></div>\n                                <div class=\"exel-view-column\">Due Date <span class=\"info-text\">(Day)</span></div>\n                                <div class=\"exel-view-column\">Due Date <span class=\"info-text\">(Month)</span></div>\n                                <div class=\"exel-view-column\">Start <span class=\"info-text\">(No. of days before the due date)</span></div>\n                                <div class=\"exel-view-column\">Fail <span class=\"info-text\" appTooltip=\"(No. of days after the due date. Select '0' if the responsibility must be completed on the due date)\" placement=\"bottom\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">(No. of days after the due date. Select \"0\" if the responsibility must be completed on the due date)</span></div>\n                            </ng-container>\n                            <ng-container *ngIf=\"tabType === 'ongoing'\">\n                                <div class=\"exel-view-column\">Ongoing Frequency <span class=\"required\">*</span></div>\n                                <div class=\"exel-view-column\">Set a Reminder?</div>\n                                <div class=\"exel-view-column\">Frequency of Reminder</div>\n                            </ng-container>\n                            <ng-container *ngIf=\"tabType === 'onCompletion'\">\n                                <div class=\"exel-view-column\">On Completion of Frequency <span class=\"required\">*</span></div>\n                                <div class=\"exel-view-column\">Parent Responsibility<span class=\"info-text\">(Day)</span></div>\n                                <div class=\"exel-view-column\">Due Date <span class=\"info-text\" appTooltip=\"(No. of days after completion of the Parent Responsibility)\" placement=\"bottom\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">(No. of days after completion of the Parent Responsibility)</span></div>\n                                <div class=\"exel-view-column\">Start <span class=\"info-text\" appTooltip=\"(No. of days before the due date)\" placement=\"bottom\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">(No. of days before the due date)</span></div>\n                                <div class=\"exel-view-column\">Fail <span class=\"info-text\" appTooltip=\"(No. of days after the due date. Select '0' if the responsibility must be completed on the due date)\" placement=\"bottom\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">(No. of days after the due date. Select \"0\" if the responsibility must be completed on the due date)</span></div>\n                            </ng-container>\n                        </div>\n                    </div>\n                    <div class=\"exel-view-column\">Responsibility Centre</div>\n                    <div class=\"exel-view-column\">Risk Class</div>\n                    <div class=\"exel-view-column\">Objective</div>\n                    <div class=\"exel-view-column\">Notes</div>\n                    <div class=\"exel-view-column\" [class.two-column]=\"true\">\n                        <div class=\"exel-view-row\">\n                            <div class=\"exel-view-column large\">Format & Evidence</div>\n                        </div>\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\" [class.three-column]=\"false\">\n                            <div class=\"exel-view-column\" [class.small-column]=\"true\">Format</div>\n                            <div class=\"exel-view-column\">Format For Responsibility (link)</div>\n                            <div class=\"exel-view-column\" [class.small-column]=\"true\">Evidence</div>\n                        </div>\n                    </div>\n                    <!-- <div class=\"exel-view-column\">Assessments or Checkpoints</div> -->\n                    <div class=\"exel-view-column\" [class.three-column]=\"true\">\n                        <div class=\"exel-view-row\">\n                            <div class=\"exel-view-column large\">Review of Responsibility</div>\n                        </div>\n                        <div class=\"exel-view-row multi-column\" [class.three-column]=\"true\">\n                            <div class=\"exel-view-column\">Reviewer</div>\n                            <div class=\"exel-view-column\">Review Start <span class=\"info-text\">(No. of days before the due date)</span></div>\n                            <div class=\"exel-view-column\">Review Fail <span class=\"info-text\" appTooltip=\"(No. of days after the due date. Select '0' if the responsibility must be reviewed on the due date)\" placement=\"bottom\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">(No. of days after the due date. Select \"0\" if the responsibility must be reviewed on the due date)</span></div>\n                        </div>\n                    </div>\n                    <div class=\"exel-view-column\" [class.two-column]=\"true\">\n                        <div class=\"exel-view-row\">\n                            <div class=\"exel-view-column large\">Overseer</div>\n                        </div>\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\n                            <div class=\"exel-view-column\">Always Notify</div>\n                            <div class=\"exel-view-column\">Notify on Failure</div>\n                        </div>\n                    </div>\n                    <!-- <div class=\"exel-view-column\">Overseer</div> -->\n\n                </div>\n                <div class=\"exel-view-row\" *ngFor=\"let report of responsibilityBulkUpload?.reports; let i = index\">\n                    <div class=\"exel-view-column sl-no\" [class.error]=\"!report?.isValid\">{{i+1}}</div>\n                    <div class=\"exel-view-column\" [class.error]=\"!report.responsibilityName\">{{report?.responsibilityName}} <i *ngIf=\"!report.responsibilityName\" class=\"icons\" [appTooltip]=\"'Enter a name for this responsibility.'\"  placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i></div>\n                    <div class=\"exel-view-column multi-column\" *ngIf=\"responsibilityBulkUpload?.header.includes('Program')\" [class.error]=\"false\" [class.three-column]=\"true\">\n                        <div class=\"exel-view-row multi-column\" [class.three-column]=\"true\">\n                            <div class=\"exel-view-column\">{{report?.programType}}</div>\n                            <div class=\"exel-view-column\">{{report?.program}}</div>\n                            <div class=\"exel-view-column\">{{report?.programCategory}}</div>\n                        </div>\n                    </div>\n                    <div class=\"exel-view-column\">{{report?.assignor}}\n                        <!-- <i *ngIf=\"((report?.assignor) && (report?.reviewer === report?.assignor))\"\n                            class=\"icons\"\n                            [appTooltip]=\"'The Reviewer cannot also be the Assignor of this responsibility. Select another user as the Assignor.'\"\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                        </i> -->\n                    </div>\n                    <div class=\"exel-view-column multi-column\" [class.two-column]=\"true\">\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\n                            <div class=\"exel-view-column\" [class.error]=\"!report?.assignee || !report?.userValidateWithProgram?.isValidAssignee || (!report?.isValidUser)\">{{report?.assignee}}\n                                <!-- || (!report?.isValidUser) -->\n                                <i *ngIf=\"(!report?.assignee) || (!report?.isValidUser)\"\n                                    class=\"icons\"\n                                    [appTooltip]=\"'Select the user responsible for completing this responsibility. '\"\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                                </i>\n                                <i *ngIf=\"(report?.assignee) && !report?.userValidateWithProgram?.isValidAssignee\"\n                                    class=\"icons\"\n                                    [appTooltip]=\"'This user is not associated with the selected Program.'\"\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                                </i>\n                            </div>\n                            <div class=\"exel-view-column\">{{report?.assigneeType}}</div>\n                        </div>\n                    </div>\n                    <div class=\"exel-view-column\">{{report?.keyResponsibility}}</div>\n                    <div class=\"exel-view-column multi-column\" [class.five-column]=\"tabType === 'frequency' || tabType === 'onCompletion'\" [class.three-column]=\"tabType === 'ongoing'\">\n                        <ng-container *ngIf=\"tabType === 'frequency'\">\n                            <div class=\"exel-view-row multi-column\" [class.five-column]=\"true\">\n                                <div class=\"exel-view-column\" [class.error]=\"!report?.frequency\">{{report?.frequency}}\n                                    <i *ngIf=\"!report?.frequency\" class=\"icons\" [appTooltip]=\"'Select a frequency for this responsibility.'\"\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                                </div>\n                                <div class=\"exel-view-column\" [class.error]=\"!report?.validDate || report?.isPastDate\">{{report?.day}}\n                                    <i *ngIf=\"!report?.validDate\" class=\"icons\" [appTooltip]=\"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                    <!-- <div class=\"exel-view-column\">{{report?.assessments}}</div> -->\n                    <div class=\"exel-view-column multi-column\" [class.three-column]=\"true\">\n                        <div class=\"exel-view-row multi-column\" [class.three-column]=\"true\">\n                            <div class=\"exel-view-column\" [class.error]=\"report?.reviewer && (\n                              !report?.userValidateWithProgram?.isValidReviewer )\">{{report?.reviewer}}\n\n                        <!-- <i *ngIf=\"(report?.reviewer && report?.reviewer === report?.assignor)\"\n                            class=\"icons\"\n                            [appTooltip]=\"((report?.assignor)?'The Assignor cannot also be the Reviewer of this responsibility.':'You cannot be a Reviewer of this responsibility since you are the assignor. ') +'Select another user as the Reviewer'\"\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                        </i> -->\n                        <i *ngIf=\"report?.reviewer && !report?.userValidateWithProgram?.isValidReviewer\"\n                            class=\"icons\"\n                            [appTooltip]=\"'This user is not associated with the selected Program.'\"\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                        </i>\n                            </div>\n                            <div class=\"exel-view-column\">{{report?.reviewToBeCompletedWithin}}</div>\n                            <div class=\"exel-view-column\">{{report?.reviewWillBeFailedAfter}}</div>\n                        </div>\n                    </div>\n\n                    <div class=\"exel-view-column multi-column\" [class.two-column]=\"true\">\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\n                            <div class=\"exel-view-column\" [class.error]=\"report?.overseer && (\n                              !report?.userValidateWithProgram?.isValidOverseer )\">\n                            {{report?.overseer}}\n\n                                <i *ngIf=\"(report?.overseer) && !report?.userValidateWithProgram?.isValidOverseer\"\n                                    class=\"icons\"\n                                    [appTooltip]=\"'This user is not associated with the selected Program.'\"\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                                </i>\n                            </div>\n                            <div class=\"exel-view-column\" [class.error]=\"report?.notifyOnFailure && (\n                            !report?.userValidateWithProgram?.isValidNotifyOnFailure )\">\n                                {{report?.notifyOnFailure}}\n\n                                <i *ngIf=\"(report?.notifyOnFailure) && !report?.userValidateWithProgram?.isValidNotifyOnFailure\"\n                                    class=\"icons\"\n                                    [appTooltip]=\"'This user is not associated with the selected Program.'\"\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                                </i>\n                            </div>\n                        </div>\n                    </div>\n\n                    <!-- <div class=\"exel-view-column\" [class.error]=\"(report?.overseer) && ((report?.overseer === report?.assignee) ||(report?.reviewer === report?.overseer) || (report?.overseer == report?.assignor) || (!report?.userValidateWithProgram?.isValidOverseer))\">\n                        {{report?.overseer}}\n                        <i *ngIf=\"(report?.overseer) && ((report?.reviewer === report?.overseer))\"\n                            class=\"icons\"\n                            [appTooltip]=\"'The Reviewer cannot also be the Overseer of this responsibility. Select another user as the Overseer.'\"\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                        </i>\n\n                        <i *ngIf=\"report?.overseer && (report?.overseer === report?.assignee)\" class=\"icons\"\n                            [appTooltip]=\"'The Assignee cannot also be the Overseer of this responsibility. Select another user as the Overseer'\"\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                        </i>\n                        <i *ngIf=\"((report?.overseer) && (report?.overseer == report?.assignor))\"\n                            class=\"icons\"\n                            [appTooltip]=\"((report?.assignor)?'The Assignor cannot also be the Overseer of this responsibility. ':'You cannot be an Overseer of this responsibility since you are the Assignor. ') +'Select another user as the Overseer.'\"\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                        </i>\n                        <i *ngIf=\"!report?.userValidateWithProgram?.isValidOverseer\"\n                            class=\"icons\"\n                            [appTooltip]=\"'Selected user is not a valid overseer for selected program.'\"\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                        </i>\n                    </div> -->\n                </div>\n\n\n\n\n\n\n                <!-- ------------------------------------------------old code dynamic------------------------------------------------- -->\n\n                <!-- *ngFor=\"let report of responsibilityBulkUpload?.reports; let i = index\" -->\n            </div>\n        </div>\n        <div class=\"bulk-view-option\">\n            <button *ngIf=\"bulkUpload?.frequency?.reports?.length\" [class.active]=\"tabType === 'frequency'\" (click)=\"selectedTab.emit('frequency')\">Frequency Responsibilities</button>\n            <button *ngIf=\"bulkUpload?.ongoing?.reports?.length\" [class.active]=\"tabType === 'ongoing'\" (click)=\"selectedTab.emit('ongoing')\">Ongoing Responsibilities</button>\n            <button *ngIf=\"bulkUpload?.onCompletion?.reports?.length\" [class.active]=\"tabType === 'onCompletion'\" (click)=\"selectedTab.emit('onCompletion')\">On Completion Responsibilities</button>\n        </div>\n        <div class=\"bulk-view-footer\">\n            <!-- <div class=\"left\">\n                <p>{{finalResponsibilities}} out of {{responsibilityBulkUpload?.reports?.length}} responsibilities will be\n                    uploaded.</p>\n            </div> -->\n            <div class=\"left\">\n                <p>{{finalResponsibilities}} out of {{responsibilityMultiTabBulkUpload?.length}} {{responsibilityMultiTabBulkUpload?.length > 1 ? 'responsibilities' : 'responsibility'}} will be\n                    uploaded.</p>\n            </div>\n            <div class=\"right\">\n                <button (click)=\"close()\" id=\"bulk-resp-cancel\">Cancel</button>\n                <button (click)=\"submit()\" id=\"bulk-resp-confirm\" [disabled]=\"!isConfirmClickable\" class=\"blue\">Confirm</button>\n                <!-- finalResponsibilities < 1 -->\n            </div>\n        </div>\n    </div>\n    <app-loader  *ngIf=\"loader\"></app-loader>\n\n</ng-container>\n\n    <!-- --------------------------------------------------------------------upward is new one-------------------- -->\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";::-webkit-scrollbar-thumb,::-webkit-scrollbar-thumb:hover{background:#747576;border-radius:16px}::-webkit-scrollbar{height:15px}.bulk-view{position:fixed;inset:0;z-index:11}.bulk-view-head{height:60px;padding:20px 24px;background:#161b2f;display:flex;justify-content:flex-start}.bulk-view-title{font-size:16px;line-height:20px;font-weight:400;margin:0;color:#fff}.bulk-view-body{height:calc(100vh - 110px);overflow:auto;width:100%;background:#fff}.bulk-view-body .exel-view{display:block}.bulk-view-body .exel-view-row{display:flex;width:100%}.bulk-view-body .exel-view-row.head .exel-view-column{font-weight:500;font-size:14px;min-height:26px;background:#f1f1f1;padding:0;word-break:unset}.bulk-view-body .exel-view-row.multi-column .exel-view-column{width:140px;min-width:140px}.bulk-view-body .exel-view-column{width:300px;min-width:300px;padding:0 10px;border-right:1px solid #dcdcdc;border-bottom:1px solid #dcdcdc;display:flex;align-items:center;justify-content:center;text-align:center;word-break:break-all;line-height:16px;font-size:12px;color:#161b2f;flex-wrap:wrap;position:relative}.bulk-view-body .exel-view-column i.icons{position:absolute;top:8px;right:10px;cursor:pointer;color:#d93b41}.bulk-view-body .exel-view-column.large{width:100%;min-width:auto}.bulk-view-body .exel-view-column.error{border:1px solid #EB2424!important;padding-right:24px}.bulk-view-body .exel-view-column.error+.error{border-left:none!important}.bulk-view-body .exel-view-column span.required{color:#eb2424;display:contents}.bulk-view-body .exel-view-column .exel-view-row .exel-view-column{width:100%}.bulk-view-body .exel-view-column.sl-no{background:#f1f1f1;width:60px;min-width:60px;min-height:30px;font-weight:400}.bulk-view-body .exel-view-column.sl-no.error{background:#eb242424;border:none;padding-right:10px;border-bottom:1px solid #dcdcdc}.bulk-view-body .exel-view-column.multi-column{padding:0;border:none}.bulk-view-body .exel-view-column.multi-column .exel-view-row{height:100%}.bulk-view-body .exel-view-column.multi-column .exel-view-column{width:50%;min-width:50%}.bulk-view-body .exel-view-column.multi-column .exel-view-column+.exel-view-column{border-left:none}.bulk-view-body.bulk{height:calc(100vh - 142px)}.bulk-view-body.bulk .exel-view-row.head{position:sticky;top:0;z-index:1}.bulk-view-body.bulk .exel-view-row.head .exel-view-column{min-height:34px}.bulk-view-body.bulk .exel-view-row.head .exel-view-column .info-text{font-size:10px;display:block;width:100%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;padding:0 8px}.bulk-view-body.bulk .exel-view-row.two-column .exel-view-column{min-width:250px!important}.bulk-view-body.bulk .exel-view-row.three-column .exel-view-column,.bulk-view-body.bulk .exel-view-row.five-column .exel-view-column{width:200px;min-width:200px!important}.bulk-view-body.bulk .exel-view-column .exel-view-row .exel-view-column.small-column{width:120px;min-width:120px!important}.bulk-view-body.bulk .exel-view-column.multi-column .exel-view-column{min-width:unset}.bulk-view-body.bulk .exel-view-column.two-column{width:500px;min-width:500px!important}.bulk-view-body.bulk .exel-view-column.three-column{width:600px;min-width:600px!important}.bulk-view-body.bulk .exel-view-column.five-column{width:1000px;min-width:1000px!important}.bulk-view-option{background:#fff;border-top:1px solid #f1f1f1;padding:0 20px;position:fixed;width:100%;bottom:50px;display:flex;align-items:center}.bulk-view-option button{background:transparent;border-radius:0;border:none;border-left:1px solid #f1f1f1;color:#747576;font-size:11px;font-weight:500;padding:0 .5rem;margin:0;height:2rem;position:relative}.bulk-view-option button:last-of-type{border-right:1px solid #f1f1f1}.bulk-view-option button.active{color:#1e5dd3}.bulk-view-option button.active:before{background:#fff;content:\"\";position:absolute;top:-1px;left:0;height:1px;width:100%}.bulk-view-footer{height:50px;box-shadow:0 0 15px #1e03d259;padding:10px 20px;position:fixed;width:100%;bottom:0;display:flex;align-items:center;justify-content:space-between;background:#fff}.bulk-view-footer .left p{color:#747576;font-size:13px;font-weight:500;margin:0}.bulk-view-footer .right button{font-size:12px;background:#fff;border:1px solid #dcdcdc;color:#747576;border-radius:2px;padding:8px 18px;cursor:pointer;text-transform:uppercase}.bulk-view-footer .right button+button{margin-left:4px}.bulk-view-footer .right button.blue{color:#fff;background:#1e5dd3}.bulk-view-footer .right button:disabled{background:#f1f1f1;border-color:#f1f1f1;pointer-events:none;cursor:not-allowed;color:#747576}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ToolTipDirective, selector: "[appTooltip]", inputs: ["appTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: i3.LoaderComponent, selector: "app-loader" }, { kind: "pipe", type: i4.RiskClassPipe, name: "riskClass" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BulkResponsibilityViewComponent, decorators: [{
            type: Component,
            args: [{ selector: 'app-bulk-responsibility-view', template: "\n<ng-container *ngIf=\"responsibilityType === 'singleTab'\">\n<div class=\"bulk-view\">\n    <div class=\"bulk-view-head\">\n        <h2 class=\"bulk-view-title\">\n            {{fileName}}\n        </h2>\n    </div>\n    <div class=\"bulk-view-body\">\n        <div class=\"exel-view\">\n            <div class=\"exel-view-row head\">\n                <div class=\"exel-view-column sl-no\">#</div>\n                <div class=\"exel-view-column\" *ngFor=\"let heading of responsibilityBulkUpload?.header\"\n                    [class.large]=\"heading && heading.startsWith('Inherent')\">\n                    <ng-container *ngIf=\"heading && !(heading.startsWith('Due')) && !(heading.startsWith('Oversight'))\">\n                        {{(heading.includes('*')? heading.replace('*', '') : heading)}}\n                        <span *ngIf=\"heading.includes('*')\" class=\"required\">*</span>\n                    </ng-container>\n                    <ng-container *ngIf=\"heading && heading.startsWith('Due')\">\n                        <div class=\"exel-view-row\">\n                            <div class=\"exel-view-column large\">Due Date</div>\n                        </div>\n                        <div class=\"exel-view-row multi-column\">\n                            <div class=\"exel-view-column\">Day</div>\n                            <div class=\"exel-view-column\">Month</div>\n                        </div>\n                    </ng-container>\n                    <ng-container *ngIf=\"heading && heading.startsWith('Oversight')\">\n                        <div class=\"exel-view-row\">\n                            <div class=\"exel-view-column large\">Oversight </div>\n                        </div>\n                        <div class=\"exel-view-row multi-column\">\n                            <div class=\"exel-view-column\">Always Notify</div>\n                            <div class=\"exel-view-column\">Notify on Failure</div>\n                        </div>\n                    </ng-container>\n                </div>\n\n            </div>\n            <div class=\"exel-view-row\" *ngFor=\"let report of responsibilityBulkUpload?.reports; let i = index\">\n                <div class=\"exel-view-column sl-no\">{{i+1}}</div>\n\n                <div class=\"exel-view-column\" [class.error]=\"!report.responsibilityName\">{{report?.responsibilityName}}\n                    <i *ngIf=\"!report?.responsibilityName\" class=\"icons\"\n                        [appTooltip]=\"'Enter a name for this responsibility.'\" placement=\"bottom-right\" type=\"white\"\n                        delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                </div>\n                <div class=\"exel-view-column\">\n                    {{report?.assignor}}\n                    <i *ngIf=\"((report?.assignor) && (report?.notifyOnFailure == report?.assignor||report?.alwaysNotify == report?.assignor))\"\n                        class=\"icons\"\n                        [appTooltip]=\"'The Overseer cannot also be the Assignor of this responsibility. Select another user as the Assignor.'\"\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                    </i>\n<!--\n                    <i *ngIf=\"((report?.assignor) && (report?.reviewer == report?.assignor))\"\n                        class=\"icons\"\n                        [appTooltip]=\"'The Reviewer cannot also be the Assignor of this responsibility. Select another user as the Assignor.'\"\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                    </i>     -->\n                </div>\n                <div class=\"exel-view-column\">\n                    {{report?.assignee}}\n\n                    <i *ngIf=\"((report?.assignee) && (report?.notifyOnFailure == report?.assignee||report?.alwaysNotify == report?.assignee))\"\n                        class=\"icons\"\n                        [appTooltip]=\"'The Overseer cannot also be the Assignee of this responsibility. Select another user as the Assignee.'\"\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                    </i>\n\n                    <i *ngIf=\"((report?.assignee) && (report?.reviewer == report?.assignee))\"\n                        class=\"icons\"\n                        [appTooltip]=\"'The Reviewer cannot also be the Assignee of this responsibility. Select another user as the Assignee.'\"\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                    </i>\n                    <i *ngIf=\"(!report?.assignee) || (!report?.isValidUser)\"\n                    class=\"icons\"\n                    [appTooltip]=\"'Select the user responsible for completing this responsibility. '\"\n                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                    </i>\n                </div>\n                <div class=\"exel-view-column\" id=\"resCategory\" *ngIf=\"report?.responsibilityCategory!==null\">{{report?.responsibilityCategory}}</div>\n                <div class=\"exel-view-column\" [class.error]=\"!report.frequency\">{{report?.frequency}}\n                    <i *ngIf=\"!report?.frequency\" class=\"icons\" [appTooltip]=\"'Select a frequency for this responsibility.'\"\n                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                </div>\n                <div class=\"exel-view-column multi-column\">\n                    <div class=\"exel-view-row\">\n                        <div class=\"exel-view-column\" [class.error]=\"!report.isValidDueDate\">{{report?.day}}\n                            <i *ngIf=\"!report?.isValidDueDate\" class=\"icons\" [appTooltip]=\"'Invalid Due Date.'\"\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                            <i *ngIf=\"report?.isPastDate\" class=\"icons\" [appTooltip]=\"'This date occurs in the past. Select a future date.'\"\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                        </div>\n                        <div class=\"exel-view-column\" [class.error]=\"!report.isValidDueDate\">{{report?.month}}\n                            <i *ngIf=\"!report?.isValidDueDate\" class=\"icons\" [appTooltip]=\"'Invalid Due Date.'\"\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                            <i *ngIf=\"report?.isPastDate\" class=\"icons\" [appTooltip]=\"'This date occurs in the past. Select a future date.'\"\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"exel-view-column\">{{report?.responsibilityWindow}}</div>\n                <div class=\"exel-view-column\">{{report?.failedAfter}}</div>\n                <div class=\"exel-view-column\">{{report?.reportClass}}</div>\n                <div class=\"exel-view-column\">{{report?.responsibilityCenter}}</div>\n                <div class=\"exel-view-column\">\n                    {{report?.reviewer}}\n\n                    <i *ngIf=\"(report?.reviewer) && ((report?.reviewer == report?.alwaysNotify) || (report?.reviewer == report?.notifyOnFailure))\"\n                        class=\"icons\"\n                        [appTooltip]=\"'The Overseer cannot also be the Reviewer of this responsibility. Select another user as the Reviewer'\"\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                    </i>\n\n                    <i *ngIf=\"report?.reviewer && (report?.reviewer == report?.assignee)\" class=\"icons\"\n                        [appTooltip]=\"'The Assignee cannot also be the Reviewer of this responsibility. Select another user as the Reviewer.'\"\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                    </i>\n                    <!-- <i *ngIf=\"(report?.reviewer && report?.assignor)\"\n                        class=\"icons\"\n                        [appTooltip]=\"((report?.assignor)?'The Assignor cannot also be the Reviewer of this responsibility.':'You cannot be a Reviewer of this responsibility since you are the assignor. ') +'Select another user as the Reviewer'\"\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                    </i> -->\n                </div>\n                <div class=\"exel-view-column\">{{report?.reviewToBeCompletedWithin}}</div>\n                <div class=\"exel-view-column\">{{report?.reviewWillBeFailedAfter}}</div>\n                <div class=\"exel-view-column\">{{report?.formatForResponsibility}}</div>\n                <div class=\"exel-view-column\">{{report?.notes}}</div>\n                <div class=\"exel-view-column\">{{report?.documentEvidenceRequired}}</div>\n                <div class=\"exel-view-column multi-column\">\n                    <div class=\"exel-view-row\">\n                        <div class=\"exel-view-column\">\n                            {{report?.alwaysNotify}}\n                            <i *ngIf=\"(report?.alwaysNotify) && ((report?.reviewer == report?.alwaysNotify))\"\n                                class=\"icons\"\n                                [appTooltip]=\"'The Reviewer cannot also be the Overseer of this responsibility. Select another user as the Overseer.'\"\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                            </i>\n\n                            <i *ngIf=\"report?.alwaysNotify && (report?.alwaysNotify == report?.assignee)\" class=\"icons\"\n                                [appTooltip]=\"'The Assignee cannot also be the Overseer of this responsibility. Select another user as the Overseer'\"\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                            </i>\n                            <i *ngIf=\"((report?.alwaysNotify && report?.assignor) && (report?.alwaysNotify == report?.assignor)) ||((report?.alwaysNotify && (!report?.assignor)) && (report?.alwaysNotify == defaultOwner))\"\n                                class=\"icons\"\n                                [appTooltip]=\"((report?.assignor)?'The Assignor cannot also be the Overseer of this responsibility. ':'You cannot be an Overseer of this responsibility since you are the Assignor. ') +'Select another user as the Overseer.'\"\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                            </i>\n                        </div>\n                        <div class=\"exel-view-column\">\n                            {{report?.notifyOnFailure}}\n                            <i *ngIf=\"(report?.notifyOnFailure) && ((report?.reviewer == report?.notifyOnFailure))\"\n                            class=\"icons\"\n                            [appTooltip]=\"'The Reviewer cannot also be the Overseer of this responsibility. Select another user as the Overseer.'\"\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                        </i>\n\n                        <i *ngIf=\"report?.notifyOnFailure && (report?.notifyOnFailure == report?.assignee)\" class=\"icons\"\n                            [appTooltip]=\"'The Assignee cannot also be the Overseer of this responsibility. Select another user as the Overseer'\"\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                        </i>\n                        <i *ngIf=\"((report?.notifyOnFailure && report?.assignor) && (report?.notifyOnFailure == report?.assignor)) ||((report?.notifyOnFailure && (!report?.assignor)) && (report?.notifyOnFailure == defaultOwner))\"\n                            class=\"icons\"\n                            [appTooltip]=\"((report?.assignor)?'The Assignor cannot also be the Overseer of this responsibility. ':'You cannot be an Overseer of this responsibility since you are the Assignor. ') +'Select another user as the Overseer.'\"\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                        </i>\n                        </div>\n                    </div>\n                </div>\n\n\n                <div class=\"exel-view-column\">{{report?.keyResponsibility}}</div>\n                <div class=\"exel-view-column\">{{report?.objective}}</div>\n\n            </div>\n        </div>\n    </div>\n    <div class=\"bulk-view-footer\">\n        <div class=\"left\">\n            <p>{{finalResponsibilities}} out of {{responsibilityBulkUpload?.reports?.length}} responsibilities will be\n                uploaded.</p>\n        </div>\n        <div class=\"right\">\n            <button (click)=\"close()\" id=\"bulk-resp-cancel\" >Cancel</button>\n            <button (click)=\"submit()\" id=\"bulk-resp-confirm\" [disabled]=\"finalResponsibilities<1\" class=\"blue\">Confirm</button>\n        </div>\n    </div>\n</div>\n<app-loader  *ngIf=\"loader\"></app-loader>\n\n</ng-container>\n\n<!-- --------------------------------------------------------------------upward is new one-------------------- -->\n<app-loader  *ngIf=\"loader\"></app-loader>\n\n\n\n\n\n\n<!-- HTML for multiple tabs -->\n<ng-container *ngIf=\"responsibilityType === 'multiTab'\">\n    <div class=\"bulk-view\">\n        <div class=\"bulk-view-head\">\n            <h2 class=\"bulk-view-title\">\n                {{fileName}}\n            </h2>\n        </div>\n        <div class=\"bulk-view-body bulk\">\n            <div class=\"exel-view\">\n                <div class=\"exel-view-row head\">\n                    <div class=\"exel-view-column sl-no\">#</div>\n                    <div class=\"exel-view-column\">Responsibility Name <span class=\"required\">*</span></div>\n                    <div class=\"exel-view-column\" *ngIf=\"responsibilityBulkUpload?.header.includes('Program')\" [class.three-column]=\"true\">\n                        <div class=\"exel-view-row\">\n                            <div class=\"exel-view-column large\">Program</div>\n                        </div>\n                        <div class=\"exel-view-row multi-column\" [class.three-column]=\"true\">\n                            <div class=\"exel-view-column\">Program Type</div>\n                            <div class=\"exel-view-column\">Program</div>\n                            <div class=\"exel-view-column\">Program Category</div>\n                        </div>\n                    </div>\n                    <div class=\"exel-view-column\">Entrusted By</div>\n                    <div class=\"exel-view-column\" [class.two-column]=\"true\">\n                        <div class=\"exel-view-row\">\n                            <div class=\"exel-view-column large\">Entrust To <span class=\"required\">*</span></div>\n                        </div>\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\n                            <div class=\"exel-view-column\">Person or Group<span class=\"required\">*</span></div>\n                            <div class=\"exel-view-column\">All or Any Persons</div>\n                        </div>\n                    </div>\n                    <div class=\"exel-view-column\">Key Responsibility?</div>\n                    <div class=\"exel-view-column\" [class.five-column]=\"tabType === 'frequency' || tabType === 'onCompletion'\" [class.three-column]=\"tabType === 'ongoing'\">\n                        <div class=\"exel-view-row\">\n                            <!-- <div class=\"exel-view-column large\">Frequency of Occurrence and Completion Window <span class=\"required\">*</span></div> -->\n                            <div class=\"exel-view-column large\">{{responsibilityBulkUpload?.header.includes('Program') ? responsibilityBulkUpload?.header[8]?.slice(0, -1) : responsibilityBulkUpload?.header[5]?.slice(0, -1)}}<span class=\"required\">*</span></div>\n                        </div>\n                        <div class=\"exel-view-row multi-column\" [class.five-column]=\"tabType === 'frequency' || tabType === 'onCompletion'\" [class.three-column]=\"tabType === 'ongoing'\">\n                            <ng-container *ngIf=\"tabType === 'frequency'\">\n                                <div class=\"exel-view-column\">Frequency <span class=\"required\">*</span></div>\n                                <div class=\"exel-view-column\">Due Date <span class=\"info-text\">(Day)</span></div>\n                                <div class=\"exel-view-column\">Due Date <span class=\"info-text\">(Month)</span></div>\n                                <div class=\"exel-view-column\">Start <span class=\"info-text\">(No. of days before the due date)</span></div>\n                                <div class=\"exel-view-column\">Fail <span class=\"info-text\" appTooltip=\"(No. of days after the due date. Select '0' if the responsibility must be completed on the due date)\" placement=\"bottom\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">(No. of days after the due date. Select \"0\" if the responsibility must be completed on the due date)</span></div>\n                            </ng-container>\n                            <ng-container *ngIf=\"tabType === 'ongoing'\">\n                                <div class=\"exel-view-column\">Ongoing Frequency <span class=\"required\">*</span></div>\n                                <div class=\"exel-view-column\">Set a Reminder?</div>\n                                <div class=\"exel-view-column\">Frequency of Reminder</div>\n                            </ng-container>\n                            <ng-container *ngIf=\"tabType === 'onCompletion'\">\n                                <div class=\"exel-view-column\">On Completion of Frequency <span class=\"required\">*</span></div>\n                                <div class=\"exel-view-column\">Parent Responsibility<span class=\"info-text\">(Day)</span></div>\n                                <div class=\"exel-view-column\">Due Date <span class=\"info-text\" appTooltip=\"(No. of days after completion of the Parent Responsibility)\" placement=\"bottom\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">(No. of days after completion of the Parent Responsibility)</span></div>\n                                <div class=\"exel-view-column\">Start <span class=\"info-text\" appTooltip=\"(No. of days before the due date)\" placement=\"bottom\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">(No. of days before the due date)</span></div>\n                                <div class=\"exel-view-column\">Fail <span class=\"info-text\" appTooltip=\"(No. of days after the due date. Select '0' if the responsibility must be completed on the due date)\" placement=\"bottom\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">(No. of days after the due date. Select \"0\" if the responsibility must be completed on the due date)</span></div>\n                            </ng-container>\n                        </div>\n                    </div>\n                    <div class=\"exel-view-column\">Responsibility Centre</div>\n                    <div class=\"exel-view-column\">Risk Class</div>\n                    <div class=\"exel-view-column\">Objective</div>\n                    <div class=\"exel-view-column\">Notes</div>\n                    <div class=\"exel-view-column\" [class.two-column]=\"true\">\n                        <div class=\"exel-view-row\">\n                            <div class=\"exel-view-column large\">Format & Evidence</div>\n                        </div>\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\" [class.three-column]=\"false\">\n                            <div class=\"exel-view-column\" [class.small-column]=\"true\">Format</div>\n                            <div class=\"exel-view-column\">Format For Responsibility (link)</div>\n                            <div class=\"exel-view-column\" [class.small-column]=\"true\">Evidence</div>\n                        </div>\n                    </div>\n                    <!-- <div class=\"exel-view-column\">Assessments or Checkpoints</div> -->\n                    <div class=\"exel-view-column\" [class.three-column]=\"true\">\n                        <div class=\"exel-view-row\">\n                            <div class=\"exel-view-column large\">Review of Responsibility</div>\n                        </div>\n                        <div class=\"exel-view-row multi-column\" [class.three-column]=\"true\">\n                            <div class=\"exel-view-column\">Reviewer</div>\n                            <div class=\"exel-view-column\">Review Start <span class=\"info-text\">(No. of days before the due date)</span></div>\n                            <div class=\"exel-view-column\">Review Fail <span class=\"info-text\" appTooltip=\"(No. of days after the due date. Select '0' if the responsibility must be reviewed on the due date)\" placement=\"bottom\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">(No. of days after the due date. Select \"0\" if the responsibility must be reviewed on the due date)</span></div>\n                        </div>\n                    </div>\n                    <div class=\"exel-view-column\" [class.two-column]=\"true\">\n                        <div class=\"exel-view-row\">\n                            <div class=\"exel-view-column large\">Overseer</div>\n                        </div>\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\n                            <div class=\"exel-view-column\">Always Notify</div>\n                            <div class=\"exel-view-column\">Notify on Failure</div>\n                        </div>\n                    </div>\n                    <!-- <div class=\"exel-view-column\">Overseer</div> -->\n\n                </div>\n                <div class=\"exel-view-row\" *ngFor=\"let report of responsibilityBulkUpload?.reports; let i = index\">\n                    <div class=\"exel-view-column sl-no\" [class.error]=\"!report?.isValid\">{{i+1}}</div>\n                    <div class=\"exel-view-column\" [class.error]=\"!report.responsibilityName\">{{report?.responsibilityName}} <i *ngIf=\"!report.responsibilityName\" class=\"icons\" [appTooltip]=\"'Enter a name for this responsibility.'\"  placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i></div>\n                    <div class=\"exel-view-column multi-column\" *ngIf=\"responsibilityBulkUpload?.header.includes('Program')\" [class.error]=\"false\" [class.three-column]=\"true\">\n                        <div class=\"exel-view-row multi-column\" [class.three-column]=\"true\">\n                            <div class=\"exel-view-column\">{{report?.programType}}</div>\n                            <div class=\"exel-view-column\">{{report?.program}}</div>\n                            <div class=\"exel-view-column\">{{report?.programCategory}}</div>\n                        </div>\n                    </div>\n                    <div class=\"exel-view-column\">{{report?.assignor}}\n                        <!-- <i *ngIf=\"((report?.assignor) && (report?.reviewer === report?.assignor))\"\n                            class=\"icons\"\n                            [appTooltip]=\"'The Reviewer cannot also be the Assignor of this responsibility. Select another user as the Assignor.'\"\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                        </i> -->\n                    </div>\n                    <div class=\"exel-view-column multi-column\" [class.two-column]=\"true\">\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\n                            <div class=\"exel-view-column\" [class.error]=\"!report?.assignee || !report?.userValidateWithProgram?.isValidAssignee || (!report?.isValidUser)\">{{report?.assignee}}\n                                <!-- || (!report?.isValidUser) -->\n                                <i *ngIf=\"(!report?.assignee) || (!report?.isValidUser)\"\n                                    class=\"icons\"\n                                    [appTooltip]=\"'Select the user responsible for completing this responsibility. '\"\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                                </i>\n                                <i *ngIf=\"(report?.assignee) && !report?.userValidateWithProgram?.isValidAssignee\"\n                                    class=\"icons\"\n                                    [appTooltip]=\"'This user is not associated with the selected Program.'\"\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                                </i>\n                            </div>\n                            <div class=\"exel-view-column\">{{report?.assigneeType}}</div>\n                        </div>\n                    </div>\n                    <div class=\"exel-view-column\">{{report?.keyResponsibility}}</div>\n                    <div class=\"exel-view-column multi-column\" [class.five-column]=\"tabType === 'frequency' || tabType === 'onCompletion'\" [class.three-column]=\"tabType === 'ongoing'\">\n                        <ng-container *ngIf=\"tabType === 'frequency'\">\n                            <div class=\"exel-view-row multi-column\" [class.five-column]=\"true\">\n                                <div class=\"exel-view-column\" [class.error]=\"!report?.frequency\">{{report?.frequency}}\n                                    <i *ngIf=\"!report?.frequency\" class=\"icons\" [appTooltip]=\"'Select a frequency for this responsibility.'\"\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                                </div>\n                                <div class=\"exel-view-column\" [class.error]=\"!report?.validDate || report?.isPastDate\">{{report?.day}}\n                                    <i *ngIf=\"!report?.validDate\" class=\"icons\" [appTooltip]=\"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                    <!-- <div class=\"exel-view-column\">{{report?.assessments}}</div> -->\n                    <div class=\"exel-view-column multi-column\" [class.three-column]=\"true\">\n                        <div class=\"exel-view-row multi-column\" [class.three-column]=\"true\">\n                            <div class=\"exel-view-column\" [class.error]=\"report?.reviewer && (\n                              !report?.userValidateWithProgram?.isValidReviewer )\">{{report?.reviewer}}\n\n                        <!-- <i *ngIf=\"(report?.reviewer && report?.reviewer === report?.assignor)\"\n                            class=\"icons\"\n                            [appTooltip]=\"((report?.assignor)?'The Assignor cannot also be the Reviewer of this responsibility.':'You cannot be a Reviewer of this responsibility since you are the assignor. ') +'Select another user as the Reviewer'\"\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                        </i> -->\n                        <i *ngIf=\"report?.reviewer && !report?.userValidateWithProgram?.isValidReviewer\"\n                            class=\"icons\"\n                            [appTooltip]=\"'This user is not associated with the selected Program.'\"\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                        </i>\n                            </div>\n                            <div class=\"exel-view-column\">{{report?.reviewToBeCompletedWithin}}</div>\n                            <div class=\"exel-view-column\">{{report?.reviewWillBeFailedAfter}}</div>\n                        </div>\n                    </div>\n\n                    <div class=\"exel-view-column multi-column\" [class.two-column]=\"true\">\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\n                            <div class=\"exel-view-column\" [class.error]=\"report?.overseer && (\n                              !report?.userValidateWithProgram?.isValidOverseer )\">\n                            {{report?.overseer}}\n\n                                <i *ngIf=\"(report?.overseer) && !report?.userValidateWithProgram?.isValidOverseer\"\n                                    class=\"icons\"\n                                    [appTooltip]=\"'This user is not associated with the selected Program.'\"\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                                </i>\n                            </div>\n                            <div class=\"exel-view-column\" [class.error]=\"report?.notifyOnFailure && (\n                            !report?.userValidateWithProgram?.isValidNotifyOnFailure )\">\n                                {{report?.notifyOnFailure}}\n\n                                <i *ngIf=\"(report?.notifyOnFailure) && !report?.userValidateWithProgram?.isValidNotifyOnFailure\"\n                                    class=\"icons\"\n                                    [appTooltip]=\"'This user is not associated with the selected Program.'\"\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                                </i>\n                            </div>\n                        </div>\n                    </div>\n\n                    <!-- <div class=\"exel-view-column\" [class.error]=\"(report?.overseer) && ((report?.overseer === report?.assignee) ||(report?.reviewer === report?.overseer) || (report?.overseer == report?.assignor) || (!report?.userValidateWithProgram?.isValidOverseer))\">\n                        {{report?.overseer}}\n                        <i *ngIf=\"(report?.overseer) && ((report?.reviewer === report?.overseer))\"\n                            class=\"icons\"\n                            [appTooltip]=\"'The Reviewer cannot also be the Overseer of this responsibility. Select another user as the Overseer.'\"\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                        </i>\n\n                        <i *ngIf=\"report?.overseer && (report?.overseer === report?.assignee)\" class=\"icons\"\n                            [appTooltip]=\"'The Assignee cannot also be the Overseer of this responsibility. Select another user as the Overseer'\"\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                        </i>\n                        <i *ngIf=\"((report?.overseer) && (report?.overseer == report?.assignor))\"\n                            class=\"icons\"\n                            [appTooltip]=\"((report?.assignor)?'The Assignor cannot also be the Overseer of this responsibility. ':'You cannot be an Overseer of this responsibility since you are the Assignor. ') +'Select another user as the Overseer.'\"\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                        </i>\n                        <i *ngIf=\"!report?.userValidateWithProgram?.isValidOverseer\"\n                            class=\"icons\"\n                            [appTooltip]=\"'Selected user is not a valid overseer for selected program.'\"\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                        </i>\n                    </div> -->\n                </div>\n\n\n\n\n\n\n                <!-- ------------------------------------------------old code dynamic------------------------------------------------- -->\n\n                <!-- *ngFor=\"let report of responsibilityBulkUpload?.reports; let i = index\" -->\n            </div>\n        </div>\n        <div class=\"bulk-view-option\">\n            <button *ngIf=\"bulkUpload?.frequency?.reports?.length\" [class.active]=\"tabType === 'frequency'\" (click)=\"selectedTab.emit('frequency')\">Frequency Responsibilities</button>\n            <button *ngIf=\"bulkUpload?.ongoing?.reports?.length\" [class.active]=\"tabType === 'ongoing'\" (click)=\"selectedTab.emit('ongoing')\">Ongoing Responsibilities</button>\n            <button *ngIf=\"bulkUpload?.onCompletion?.reports?.length\" [class.active]=\"tabType === 'onCompletion'\" (click)=\"selectedTab.emit('onCompletion')\">On Completion Responsibilities</button>\n        </div>\n        <div class=\"bulk-view-footer\">\n            <!-- <div class=\"left\">\n                <p>{{finalResponsibilities}} out of {{responsibilityBulkUpload?.reports?.length}} responsibilities will be\n                    uploaded.</p>\n            </div> -->\n            <div class=\"left\">\n                <p>{{finalResponsibilities}} out of {{responsibilityMultiTabBulkUpload?.length}} {{responsibilityMultiTabBulkUpload?.length > 1 ? 'responsibilities' : 'responsibility'}} will be\n                    uploaded.</p>\n            </div>\n            <div class=\"right\">\n                <button (click)=\"close()\" id=\"bulk-resp-cancel\">Cancel</button>\n                <button (click)=\"submit()\" id=\"bulk-resp-confirm\" [disabled]=\"!isConfirmClickable\" class=\"blue\">Confirm</button>\n                <!-- finalResponsibilities < 1 -->\n            </div>\n        </div>\n    </div>\n    <app-loader  *ngIf=\"loader\"></app-loader>\n\n</ng-container>\n\n    <!-- --------------------------------------------------------------------upward is new one-------------------- -->\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";::-webkit-scrollbar-thumb,::-webkit-scrollbar-thumb:hover{background:#747576;border-radius:16px}::-webkit-scrollbar{height:15px}.bulk-view{position:fixed;inset:0;z-index:11}.bulk-view-head{height:60px;padding:20px 24px;background:#161b2f;display:flex;justify-content:flex-start}.bulk-view-title{font-size:16px;line-height:20px;font-weight:400;margin:0;color:#fff}.bulk-view-body{height:calc(100vh - 110px);overflow:auto;width:100%;background:#fff}.bulk-view-body .exel-view{display:block}.bulk-view-body .exel-view-row{display:flex;width:100%}.bulk-view-body .exel-view-row.head .exel-view-column{font-weight:500;font-size:14px;min-height:26px;background:#f1f1f1;padding:0;word-break:unset}.bulk-view-body .exel-view-row.multi-column .exel-view-column{width:140px;min-width:140px}.bulk-view-body .exel-view-column{width:300px;min-width:300px;padding:0 10px;border-right:1px solid #dcdcdc;border-bottom:1px solid #dcdcdc;display:flex;align-items:center;justify-content:center;text-align:center;word-break:break-all;line-height:16px;font-size:12px;color:#161b2f;flex-wrap:wrap;position:relative}.bulk-view-body .exel-view-column i.icons{position:absolute;top:8px;right:10px;cursor:pointer;color:#d93b41}.bulk-view-body .exel-view-column.large{width:100%;min-width:auto}.bulk-view-body .exel-view-column.error{border:1px solid #EB2424!important;padding-right:24px}.bulk-view-body .exel-view-column.error+.error{border-left:none!important}.bulk-view-body .exel-view-column span.required{color:#eb2424;display:contents}.bulk-view-body .exel-view-column .exel-view-row .exel-view-column{width:100%}.bulk-view-body .exel-view-column.sl-no{background:#f1f1f1;width:60px;min-width:60px;min-height:30px;font-weight:400}.bulk-view-body .exel-view-column.sl-no.error{background:#eb242424;border:none;padding-right:10px;border-bottom:1px solid #dcdcdc}.bulk-view-body .exel-view-column.multi-column{padding:0;border:none}.bulk-view-body .exel-view-column.multi-column .exel-view-row{height:100%}.bulk-view-body .exel-view-column.multi-column .exel-view-column{width:50%;min-width:50%}.bulk-view-body .exel-view-column.multi-column .exel-view-column+.exel-view-column{border-left:none}.bulk-view-body.bulk{height:calc(100vh - 142px)}.bulk-view-body.bulk .exel-view-row.head{position:sticky;top:0;z-index:1}.bulk-view-body.bulk .exel-view-row.head .exel-view-column{min-height:34px}.bulk-view-body.bulk .exel-view-row.head .exel-view-column .info-text{font-size:10px;display:block;width:100%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;padding:0 8px}.bulk-view-body.bulk .exel-view-row.two-column .exel-view-column{min-width:250px!important}.bulk-view-body.bulk .exel-view-row.three-column .exel-view-column,.bulk-view-body.bulk .exel-view-row.five-column .exel-view-column{width:200px;min-width:200px!important}.bulk-view-body.bulk .exel-view-column .exel-view-row .exel-view-column.small-column{width:120px;min-width:120px!important}.bulk-view-body.bulk .exel-view-column.multi-column .exel-view-column{min-width:unset}.bulk-view-body.bulk .exel-view-column.two-column{width:500px;min-width:500px!important}.bulk-view-body.bulk .exel-view-column.three-column{width:600px;min-width:600px!important}.bulk-view-body.bulk .exel-view-column.five-column{width:1000px;min-width:1000px!important}.bulk-view-option{background:#fff;border-top:1px solid #f1f1f1;padding:0 20px;position:fixed;width:100%;bottom:50px;display:flex;align-items:center}.bulk-view-option button{background:transparent;border-radius:0;border:none;border-left:1px solid #f1f1f1;color:#747576;font-size:11px;font-weight:500;padding:0 .5rem;margin:0;height:2rem;position:relative}.bulk-view-option button:last-of-type{border-right:1px solid #f1f1f1}.bulk-view-option button.active{color:#1e5dd3}.bulk-view-option button.active:before{background:#fff;content:\"\";position:absolute;top:-1px;left:0;height:1px;width:100%}.bulk-view-footer{height:50px;box-shadow:0 0 15px #1e03d259;padding:10px 20px;position:fixed;width:100%;bottom:0;display:flex;align-items:center;justify-content:space-between;background:#fff}.bulk-view-footer .left p{color:#747576;font-size:13px;font-weight:500;margin:0}.bulk-view-footer .right button{font-size:12px;background:#fff;border:1px solid #dcdcdc;color:#747576;border-radius:2px;padding:8px 18px;cursor:pointer;text-transform:uppercase}.bulk-view-footer .right button+button{margin-left:4px}.bulk-view-footer .right button.blue{color:#fff;background:#1e5dd3}.bulk-view-footer .right button:disabled{background:#f1f1f1;border-color:#f1f1f1;pointer-events:none;cursor:not-allowed;color:#747576}\n"] }]
        }], propDecorators: { responsibilityBulkUpload: [{
                type: Input
            }], fileName: [{
                type: Input
            }], defaultOwner: [{
                type: Input
            }], loader: [{
                type: Input
            }], tabType: [{
                type: Input
            }], bulkUpload: [{
                type: Input
            }], submitResponsibilityBulkUpload: [{
                type: Output
            }], cancel: [{
                type: Output
            }], selectedTab: [{
                type: Output
            }], responsibilityType: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 