vcomply-workflow-engine 7.2.8 → 7.2.9

package/fesm2022/vcomply-workflow-engine.mjs

@@ -2143,25 +2143,19 @@ class ResponsibilityService {
         return payload;
     }
     getOverseer(event) {
-        const { cc_member_email: ccEmail, failure_cc_member_email: failureCcEmail, userGroupIds, } = event;
-        const ccGroupIds = userGroupIds?.ccEmailGroupIds;
-        const failureCcGroupIds = userGroupIds?.failureCCEmailGroupIds;
-        if (!ccEmail?.length &&
-            !failureCcEmail?.length &&
-            !ccGroupIds?.length &&
-            !failureCcGroupIds?.length) {
-            return undefined;
+        if (event.cc_member_email?.length || event.failure_cc_member_email?.length) {
+            return {
+                success: {
+                    userId: event.cc_member_email?.split(',')?.filter(Boolean),
+                    userGroupId: event.userGroupIds?.ccEmailGroupIds
+                },
+                fail: {
+                    userId: event.failure_cc_member_email?.split(',')?.filter(Boolean),
+                    userGroupId: event.userGroupIds?.failureCCEmailGroupIds
+                }
+            };
         }
-        return {
-            success: {
-                userId: ccEmail?.split(',').filter(Boolean) ?? [],
-                userGroupId: ccGroupIds ?? [],
-            },
-            fail: {
-                userId: failureCcEmail?.split(',').filter(Boolean) ?? [],
-                userGroupId: failureCcGroupIds ?? [],
-            },
-        };
+        return undefined;
     }
     transformData(input) {
         let result = {};
@@ -46957,11 +46951,11 @@ class BulkResponsibilityViewComponent {
         this.cancel.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BulkResponsibilityViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: BulkResponsibilityViewComponent, selector: "app-bulk-responsibility-view", inputs: { responsibilityBulkUpload: "responsibilityBulkUpload", fileName: "fileName", defaultOwner: "defaultOwner", loader: "loader", tabType: "tabType", bulkUpload: "bulkUpload", responsibilityType: "responsibilityType" }, outputs: { submitResponsibilityBulkUpload: "submitResponsibilityBulkUpload", cancel: "cancel", selectedTab: "selectedTab" }, usesOnChanges: true, ngImport: i0, template: "<!-- --------------------------------------------------------------------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')\"\n                        [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\" *ngIf=\"tabType === 'frequency'\"\n                        [class.five-column]=\"tabType === 'frequency' || tabType === 'onCompletion'\"\n                        [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') ?\n                                responsibilityBulkUpload?.header[8]?.slice(0, -1) :\n                                responsibilityBulkUpload?.header[5]?.slice(0, -1)}}<span class=\"required\">*</span></div>\n                        </div>\n                        <div class=\"exel-view-row multi-column\"\n                            [class.five-column]=\"tabType === 'frequency' || tabType === 'onCompletion'\"\n                            [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\n                                        date)</span></div>\n                                <div class=\"exel-view-column\">Fail <span class=\"info-text\"\n                                        appTooltip=\"(No. of days after the due date. Select '0' if the responsibility must be completed on the due date)\"\n                                        placement=\"bottom\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">(No. of\n                                        days after the due date. Select \"0\" if the responsibility must be completed on\n                                        the due date)</span></div>\n                            </ng-container>\n                        </div>\n                    </div>\n                    <div class=\"exel-view-column two-column\">\n                        <div class=\"exel-view-row\">\n                            <div class=\"exel-view-column large\">Responsibility Centre</div>\n                        </div>\n                        <div class=\"exel-view-row multi-column two-column\">\n                            <div class=\"exel-view-column\">Responsibility Centre Name</div>\n                            <div class=\"exel-view-column\">Responsibility Centre Type</div>\n                        </div>\n                    </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 four-column\">\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.four-column]=\"true\">\n                            <div class=\"exel-view-column\">Reviewer</div>\n                            <div class=\"exel-view-column\">Reviewer Type\n                                <span class=\"info-text\">(Specify the type of reviewer flow)</span>\n\n                            </div>\n\n                            <div class=\"exel-view-column\">Review Start <span class=\"info-text\">(No. of days before the\n                                    due date)</span></div>\n                            <div class=\"exel-view-column\">Review Fail <span class=\"info-text\"\n                                    appTooltip=\"(No. of days after the due date. Select '0' if the responsibility must be reviewed on the due date)\"\n                                    placement=\"bottom\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">(No. of days\n                                    after the due date. Select \"0\" if the responsibility must be reviewed on the due\n                                    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\">\n                        {{report?.responsibilityName}} <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></div>\n                    <div class=\"exel-view-column multi-column\"\n                        *ngIf=\"responsibilityBulkUpload?.header.includes('Program')\" [class.error]=\"false\"\n                        [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\"\n                                [class.error]=\"!report?.assignee || !report?.userValidateWithProgram?.isValidAssignee || (!report?.isValidUser)\">\n                                {{report?.assignee}}\n                                <!-- || (!report?.isValidUser) -->\n                                <i *ngIf=\"(!report?.assignee) || (!report?.isValidUser)\" 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 five-column\" *ngIf=\"tabType === 'frequency'\">\n\n                        <div class=\"exel-view-row multi-column five-column\">\n                            <div class=\"exel-view-column\" [class.error]=\"!report?.frequency\">{{report?.frequency}}\n                                <i *ngIf=\"!report?.frequency\" class=\"icons\"\n                                    [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\">\n                                {{report?.day}}\n                                <i *ngIf=\"!report?.validDate\" class=\"icons\" [appTooltip]=\"'Invalid Due Date.'\"\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                                <i *ngIf=\"report?.isPastDate\" class=\"icons\"\n                                    [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\">\n                                {{report?.month}}\n                                <i *ngIf=\"!report?.validDate\" class=\"icons\" [appTooltip]=\"'Invalid Due Date.'\"\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                                <i *ngIf=\"report?.isPastDate\" class=\"icons\"\n                                    [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\n                    </div>\n                    <div class=\"exel-view-column multi-column two-column\">\n                        <div class=\"exel-view-row multi-column two-column\">\n                            <div class=\"exel-view-column\">{{report?.responsibilityCenter}}</div>\n                            <div class=\"exel-view-column\">{{report?.responsibilityCenterType}}</div>\n                        </div>\n                    </div>\n                    <div class=\"exel-view-column\">{{report?.reportClass}}</div>\n                    <div class=\"exel-view-column\">{{report?.objective}}</div>\n                    <div class=\"exel-view-column\">{{report?.notes}}</div>\n                    <div class=\"exel-view-column multi-column\" [class.two-column]=\"true\">\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\n                            <div class=\"exel-view-column multi-column\">\n                                <div class=\"exel-view-row multi-column\">\n                                    <div class=\"exel-view-column\" [class.small-column]=\"true\">{{report?.isFormat}}</div>\n                                    <a class=\"exel-view-column external-link\" [href]=\"report?.formatForResponsibility\"\n                                        target=\"_blank\">{{report?.formatForResponsibility}}</a>\n                                </div>\n                            </div>\n                            <div class=\"exel-view-column\" [class.small-column]=\"true\">\n                                {{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.four-column]=\"true\">\n                        <div class=\"exel-view-row multi-column\" [class.four-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?.reviewerType}}</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'\"\n                (click)=\"selectedTab.emit('frequency')\">Frequency Responsibilities</button>\n            <button *ngIf=\"bulkUpload?.ongoing?.reports?.length\" [class.active]=\"tabType === 'ongoing'\"\n                (click)=\"selectedTab.emit('ongoing')\">Ongoing Responsibilities</button>\n            <button *ngIf=\"bulkUpload?.onCompletion?.reports?.length\" [class.active]=\"tabType === 'onCompletion'\"\n                (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}}\n                    {{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\"\n                    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-------------------- -->", 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-row.multi-column .external-link{color:#1e5dd3;text-decoration:none}.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.four-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.four-column{width:800px;min-width:800px!important}.bulk-view-body.bulk .exel-view-column.five-column{width:1000px;min-width:1000px!important}.bulk-view-option{background:#fff;border-top:1px solid #f1f1f1;padding:0 20px;position:fixed;width:100%;bottom:50px;display:flex;align-items:center}.bulk-view-option button{background:transparent;border-radius:0;border:none;border-left:1px solid #f1f1f1;color:#747576;font-size:11px;font-weight:500;padding:0 .5rem;margin:0;height:2rem;position:relative}.bulk-view-option button:last-of-type{border-right:1px solid #f1f1f1}.bulk-view-option button.active{color:#1e5dd3}.bulk-view-option button.active:before{background:#fff;content:\"\";position:absolute;top:-1px;left:0;height:1px;width:100%}.bulk-view-footer{height:50px;box-shadow:0 0 15px #1e03d259;padding:10px 20px;position:fixed;width:100%;bottom:0;display:flex;align-items:center;justify-content:space-between;background:#fff}.bulk-view-footer .left p{color:#747576;font-size:13px;font-weight:500;margin:0}.bulk-view-footer .right button{font-size:12px;background:#fff;border:1px solid #dcdcdc;color:#747576;border-radius:2px;padding:8px 18px;cursor:pointer;text-transform:uppercase}.bulk-view-footer .right button+button{margin-left:4px}.bulk-view-footer .right button.blue{color:#fff;background:#1e5dd3}.bulk-view-footer .right button:disabled{background:#f1f1f1;border-color:#f1f1f1;pointer-events:none;cursor:not-allowed;color:#747576}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ToolTipDirective, selector: "[appTooltip]", inputs: ["appTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: LoaderComponent$1, selector: "app-loader" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: BulkResponsibilityViewComponent, selector: "app-bulk-responsibility-view", inputs: { responsibilityBulkUpload: "responsibilityBulkUpload", fileName: "fileName", defaultOwner: "defaultOwner", loader: "loader", tabType: "tabType", bulkUpload: "bulkUpload", responsibilityType: "responsibilityType" }, outputs: { submitResponsibilityBulkUpload: "submitResponsibilityBulkUpload", cancel: "cancel", selectedTab: "selectedTab" }, usesOnChanges: true, ngImport: i0, template: "<!-- --------------------------------------------------------------------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')\"\n                        [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\" *ngIf=\"tabType === 'frequency'\"\n                        [class.five-column]=\"tabType === 'frequency' || tabType === 'onCompletion'\"\n                        [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') ?\n                                responsibilityBulkUpload?.header[8]?.slice(0, -1) :\n                                responsibilityBulkUpload?.header[5]?.slice(0, -1)}}<span class=\"required\">*</span></div>\n                        </div>\n                        <div class=\"exel-view-row multi-column\"\n                            [class.five-column]=\"tabType === 'frequency' || tabType === 'onCompletion'\"\n                            [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\n                                        date)</span></div>\n                                <div class=\"exel-view-column\">Fail <span class=\"info-text\"\n                                        appTooltip=\"(No. of days after the due date. Select '0' if the responsibility must be completed on the due date)\"\n                                        placement=\"bottom\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">(No. of\n                                        days after the due date. Select \"0\" if the responsibility must be completed on\n                                        the due date)</span></div>\n                            </ng-container>\n                        </div>\n                    </div>\n                    <div class=\"exel-view-column two-column\">\n                        <div class=\"exel-view-row\">\n                            <div class=\"exel-view-column large\">Responsibility Centre</div>\n                        </div>\n                        <div class=\"exel-view-row multi-column two-column\">\n                            <div class=\"exel-view-column\">Responsibility Centre Name</div>\n                            <div class=\"exel-view-column\">Responsibility Centre Type</div>\n                        </div>\n                    </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 four-column\">\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.four-column]=\"true\">\n                            <div class=\"exel-view-column\">Reviewer</div>\n                            <div class=\"exel-view-column\">Reviewer Type\n                                <span class=\"info-text\">(Specify the type of reviewer flow)</span>\n\n                            </div>\n\n                            <div class=\"exel-view-column\">Review Start <span class=\"info-text\">(No. of days before the\n                                    due date)</span></div>\n                            <div class=\"exel-view-column\">Review Fail <span class=\"info-text\"\n                                    appTooltip=\"(No. of days after the due date. Select '0' if the responsibility must be reviewed on the due date)\"\n                                    placement=\"bottom\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">(No. of days\n                                    after the due date. Select \"0\" if the responsibility must be reviewed on the due\n                                    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                    <!-- Collaborator -->\n                    <div class=\"exel-view-column\">Collaborator</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\">\n                        {{report?.responsibilityName}} <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></div>\n                    <div class=\"exel-view-column multi-column\"\n                        *ngIf=\"responsibilityBulkUpload?.header.includes('Program')\" [class.error]=\"false\"\n                        [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                    </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\"\n                                [class.error]=\"!report?.assignee || !report?.userValidateWithProgram?.isValidAssignee || (!report?.isValidUser)\">\n                                {{report?.assignee}}\n                                <!-- || (!report?.isValidUser) -->\n                                <i *ngIf=\"(!report?.assignee) || (!report?.isValidUser)\" 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 five-column\" *ngIf=\"tabType === 'frequency'\">\n\n                        <div class=\"exel-view-row multi-column five-column\">\n                            <div class=\"exel-view-column\" [class.error]=\"!report?.frequency\">{{report?.frequency}}\n                                <i *ngIf=\"!report?.frequency\" class=\"icons\"\n                                    [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\">\n                                {{report?.day}}\n                                <i *ngIf=\"!report?.validDate\" class=\"icons\" [appTooltip]=\"'Invalid Due Date.'\"\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                                <i *ngIf=\"report?.isPastDate\" class=\"icons\"\n                                    [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>assignor\n                            <div class=\"exel-view-column\" [class.error]=\"!report?.validDate || report?.isPastDate\">\n                                {{report?.month}}\n                                <i *ngIf=\"!report?.validDate\" class=\"icons\" [appTooltip]=\"'Invalid Due Date.'\"\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                                <i *ngIf=\"report?.isPastDate\" class=\"icons\"\n                                    [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\n                    </div>\n                    <div class=\"exel-view-column multi-column two-column\">\n                        <div class=\"exel-view-row multi-column two-column\">\n                            <div class=\"exel-view-column\">{{report?.responsibilityCenter}}</div>\n                            <div class=\"exel-view-column\">{{report?.responsibilityCenterType}}</div>\n                        </div>\n                    </div>\n                    <div class=\"exel-view-column\">{{report?.reportClass}}</div>\n                    <div class=\"exel-view-column\">{{report?.objective}}</div>\n                    <div class=\"exel-view-column\">{{report?.notes}}</div>\n                    <div class=\"exel-view-column multi-column\" [class.two-column]=\"true\">\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\n                            <div class=\"exel-view-column multi-column\">\n                                <div class=\"exel-view-row multi-column\">\n                                    <div class=\"exel-view-column\" [class.small-column]=\"true\">{{report?.isFormat}}</div>\n                                    <a class=\"exel-view-column external-link\" [href]=\"report?.formatForResponsibility\"\n                                        target=\"_blank\">{{report?.formatForResponsibility}}</a>\n                                </div>\n                            </div>\n                            <div class=\"exel-view-column\" [class.small-column]=\"true\">\n                                {{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.four-column]=\"true\">\n                        <div class=\"exel-view-row multi-column\" [class.four-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?.reviewerType}}</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\">{{report?.collaborator}}\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'\"\n                (click)=\"selectedTab.emit('frequency')\">Frequency Responsibilities</button>\n            <button *ngIf=\"bulkUpload?.ongoing?.reports?.length\" [class.active]=\"tabType === 'ongoing'\"\n                (click)=\"selectedTab.emit('ongoing')\">Ongoing Responsibilities</button>\n            <button *ngIf=\"bulkUpload?.onCompletion?.reports?.length\" [class.active]=\"tabType === 'onCompletion'\"\n                (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}}\n                    {{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\"\n                    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-------------------- -->", 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-row.multi-column .external-link{color:#1e5dd3;text-decoration:none}.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.four-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.four-column{width:800px;min-width:800px!important}.bulk-view-body.bulk .exel-view-column.five-column{width:1000px;min-width:1000px!important}.bulk-view-option{background:#fff;border-top:1px solid #f1f1f1;padding:0 20px;position:fixed;width:100%;bottom:50px;display:flex;align-items:center}.bulk-view-option button{background:transparent;border-radius:0;border:none;border-left:1px solid #f1f1f1;color:#747576;font-size:11px;font-weight:500;padding:0 .5rem;margin:0;height:2rem;position:relative}.bulk-view-option button:last-of-type{border-right:1px solid #f1f1f1}.bulk-view-option button.active{color:#1e5dd3}.bulk-view-option button.active:before{background:#fff;content:\"\";position:absolute;top:-1px;left:0;height:1px;width:100%}.bulk-view-footer{height:50px;box-shadow:0 0 15px #1e03d259;padding:10px 20px;position:fixed;width:100%;bottom:0;display:flex;align-items:center;justify-content:space-between;background:#fff}.bulk-view-footer .left p{color:#747576;font-size:13px;font-weight:500;margin:0}.bulk-view-footer .right button{font-size:12px;background:#fff;border:1px solid #dcdcdc;color:#747576;border-radius:2px;padding:8px 18px;cursor:pointer;text-transform:uppercase}.bulk-view-footer .right button+button{margin-left:4px}.bulk-view-footer .right button.blue{color:#fff;background:#1e5dd3}.bulk-view-footer .right button:disabled{background:#f1f1f1;border-color:#f1f1f1;pointer-events:none;cursor:not-allowed;color:#747576}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ToolTipDirective, selector: "[appTooltip]", inputs: ["appTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: LoaderComponent$1, selector: "app-loader" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BulkResponsibilityViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-bulk-responsibility-view', template: "<!-- --------------------------------------------------------------------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')\"\n                        [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\" *ngIf=\"tabType === 'frequency'\"\n                        [class.five-column]=\"tabType === 'frequency' || tabType === 'onCompletion'\"\n                        [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') ?\n                                responsibilityBulkUpload?.header[8]?.slice(0, -1) :\n                                responsibilityBulkUpload?.header[5]?.slice(0, -1)}}<span class=\"required\">*</span></div>\n                        </div>\n                        <div class=\"exel-view-row multi-column\"\n                            [class.five-column]=\"tabType === 'frequency' || tabType === 'onCompletion'\"\n                            [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\n                                        date)</span></div>\n                                <div class=\"exel-view-column\">Fail <span class=\"info-text\"\n                                        appTooltip=\"(No. of days after the due date. Select '0' if the responsibility must be completed on the due date)\"\n                                        placement=\"bottom\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">(No. of\n                                        days after the due date. Select \"0\" if the responsibility must be completed on\n                                        the due date)</span></div>\n                            </ng-container>\n                        </div>\n                    </div>\n                    <div class=\"exel-view-column two-column\">\n                        <div class=\"exel-view-row\">\n                            <div class=\"exel-view-column large\">Responsibility Centre</div>\n                        </div>\n                        <div class=\"exel-view-row multi-column two-column\">\n                            <div class=\"exel-view-column\">Responsibility Centre Name</div>\n                            <div class=\"exel-view-column\">Responsibility Centre Type</div>\n                        </div>\n                    </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 four-column\">\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.four-column]=\"true\">\n                            <div class=\"exel-view-column\">Reviewer</div>\n                            <div class=\"exel-view-column\">Reviewer Type\n                                <span class=\"info-text\">(Specify the type of reviewer flow)</span>\n\n                            </div>\n\n                            <div class=\"exel-view-column\">Review Start <span class=\"info-text\">(No. of days before the\n                                    due date)</span></div>\n                            <div class=\"exel-view-column\">Review Fail <span class=\"info-text\"\n                                    appTooltip=\"(No. of days after the due date. Select '0' if the responsibility must be reviewed on the due date)\"\n                                    placement=\"bottom\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">(No. of days\n                                    after the due date. Select \"0\" if the responsibility must be reviewed on the due\n                                    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\">\n                        {{report?.responsibilityName}} <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></div>\n                    <div class=\"exel-view-column multi-column\"\n                        *ngIf=\"responsibilityBulkUpload?.header.includes('Program')\" [class.error]=\"false\"\n                        [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\"\n                                [class.error]=\"!report?.assignee || !report?.userValidateWithProgram?.isValidAssignee || (!report?.isValidUser)\">\n                                {{report?.assignee}}\n                                <!-- || (!report?.isValidUser) -->\n                                <i *ngIf=\"(!report?.assignee) || (!report?.isValidUser)\" 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 five-column\" *ngIf=\"tabType === 'frequency'\">\n\n                        <div class=\"exel-view-row multi-column five-column\">\n                            <div class=\"exel-view-column\" [class.error]=\"!report?.frequency\">{{report?.frequency}}\n                                <i *ngIf=\"!report?.frequency\" class=\"icons\"\n                                    [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\">\n                                {{report?.day}}\n                                <i *ngIf=\"!report?.validDate\" class=\"icons\" [appTooltip]=\"'Invalid Due Date.'\"\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                                <i *ngIf=\"report?.isPastDate\" class=\"icons\"\n                                    [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\">\n                                {{report?.month}}\n                                <i *ngIf=\"!report?.validDate\" class=\"icons\" [appTooltip]=\"'Invalid Due Date.'\"\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                                <i *ngIf=\"report?.isPastDate\" class=\"icons\"\n                                    [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\n                    </div>\n                    <div class=\"exel-view-column multi-column two-column\">\n                        <div class=\"exel-view-row multi-column two-column\">\n                            <div class=\"exel-view-column\">{{report?.responsibilityCenter}}</div>\n                            <div class=\"exel-view-column\">{{report?.responsibilityCenterType}}</div>\n                        </div>\n                    </div>\n                    <div class=\"exel-view-column\">{{report?.reportClass}}</div>\n                    <div class=\"exel-view-column\">{{report?.objective}}</div>\n                    <div class=\"exel-view-column\">{{report?.notes}}</div>\n                    <div class=\"exel-view-column multi-column\" [class.two-column]=\"true\">\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\n                            <div class=\"exel-view-column multi-column\">\n                                <div class=\"exel-view-row multi-column\">\n                                    <div class=\"exel-view-column\" [class.small-column]=\"true\">{{report?.isFormat}}</div>\n                                    <a class=\"exel-view-column external-link\" [href]=\"report?.formatForResponsibility\"\n                                        target=\"_blank\">{{report?.formatForResponsibility}}</a>\n                                </div>\n                            </div>\n                            <div class=\"exel-view-column\" [class.small-column]=\"true\">\n                                {{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.four-column]=\"true\">\n                        <div class=\"exel-view-row multi-column\" [class.four-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?.reviewerType}}</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'\"\n                (click)=\"selectedTab.emit('frequency')\">Frequency Responsibilities</button>\n            <button *ngIf=\"bulkUpload?.ongoing?.reports?.length\" [class.active]=\"tabType === 'ongoing'\"\n                (click)=\"selectedTab.emit('ongoing')\">Ongoing Responsibilities</button>\n            <button *ngIf=\"bulkUpload?.onCompletion?.reports?.length\" [class.active]=\"tabType === 'onCompletion'\"\n                (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}}\n                    {{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\"\n                    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-------------------- -->", 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-row.multi-column .external-link{color:#1e5dd3;text-decoration:none}.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.four-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.four-column{width:800px;min-width:800px!important}.bulk-view-body.bulk .exel-view-column.five-column{width:1000px;min-width:1000px!important}.bulk-view-option{background:#fff;border-top:1px solid #f1f1f1;padding:0 20px;position:fixed;width:100%;bottom:50px;display:flex;align-items:center}.bulk-view-option button{background:transparent;border-radius:0;border:none;border-left:1px solid #f1f1f1;color:#747576;font-size:11px;font-weight:500;padding:0 .5rem;margin:0;height:2rem;position:relative}.bulk-view-option button:last-of-type{border-right:1px solid #f1f1f1}.bulk-view-option button.active{color:#1e5dd3}.bulk-view-option button.active:before{background:#fff;content:\"\";position:absolute;top:-1px;left:0;height:1px;width:100%}.bulk-view-footer{height:50px;box-shadow:0 0 15px #1e03d259;padding:10px 20px;position:fixed;width:100%;bottom:0;display:flex;align-items:center;justify-content:space-between;background:#fff}.bulk-view-footer .left p{color:#747576;font-size:13px;font-weight:500;margin:0}.bulk-view-footer .right button{font-size:12px;background:#fff;border:1px solid #dcdcdc;color:#747576;border-radius:2px;padding:8px 18px;cursor:pointer;text-transform:uppercase}.bulk-view-footer .right button+button{margin-left:4px}.bulk-view-footer .right button.blue{color:#fff;background:#1e5dd3}.bulk-view-footer .right button:disabled{background:#f1f1f1;border-color:#f1f1f1;pointer-events:none;cursor:not-allowed;color:#747576}\n"] }]
+            args: [{ selector: 'app-bulk-responsibility-view', template: "<!-- --------------------------------------------------------------------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')\"\n                        [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\" *ngIf=\"tabType === 'frequency'\"\n                        [class.five-column]=\"tabType === 'frequency' || tabType === 'onCompletion'\"\n                        [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') ?\n                                responsibilityBulkUpload?.header[8]?.slice(0, -1) :\n                                responsibilityBulkUpload?.header[5]?.slice(0, -1)}}<span class=\"required\">*</span></div>\n                        </div>\n                        <div class=\"exel-view-row multi-column\"\n                            [class.five-column]=\"tabType === 'frequency' || tabType === 'onCompletion'\"\n                            [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\n                                        date)</span></div>\n                                <div class=\"exel-view-column\">Fail <span class=\"info-text\"\n                                        appTooltip=\"(No. of days after the due date. Select '0' if the responsibility must be completed on the due date)\"\n                                        placement=\"bottom\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">(No. of\n                                        days after the due date. Select \"0\" if the responsibility must be completed on\n                                        the due date)</span></div>\n                            </ng-container>\n                        </div>\n                    </div>\n                    <div class=\"exel-view-column two-column\">\n                        <div class=\"exel-view-row\">\n                            <div class=\"exel-view-column large\">Responsibility Centre</div>\n                        </div>\n                        <div class=\"exel-view-row multi-column two-column\">\n                            <div class=\"exel-view-column\">Responsibility Centre Name</div>\n                            <div class=\"exel-view-column\">Responsibility Centre Type</div>\n                        </div>\n                    </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 four-column\">\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.four-column]=\"true\">\n                            <div class=\"exel-view-column\">Reviewer</div>\n                            <div class=\"exel-view-column\">Reviewer Type\n                                <span class=\"info-text\">(Specify the type of reviewer flow)</span>\n\n                            </div>\n\n                            <div class=\"exel-view-column\">Review Start <span class=\"info-text\">(No. of days before the\n                                    due date)</span></div>\n                            <div class=\"exel-view-column\">Review Fail <span class=\"info-text\"\n                                    appTooltip=\"(No. of days after the due date. Select '0' if the responsibility must be reviewed on the due date)\"\n                                    placement=\"bottom\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">(No. of days\n                                    after the due date. Select \"0\" if the responsibility must be reviewed on the due\n                                    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                    <!-- Collaborator -->\n                    <div class=\"exel-view-column\">Collaborator</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\">\n                        {{report?.responsibilityName}} <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></div>\n                    <div class=\"exel-view-column multi-column\"\n                        *ngIf=\"responsibilityBulkUpload?.header.includes('Program')\" [class.error]=\"false\"\n                        [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                    </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\"\n                                [class.error]=\"!report?.assignee || !report?.userValidateWithProgram?.isValidAssignee || (!report?.isValidUser)\">\n                                {{report?.assignee}}\n                                <!-- || (!report?.isValidUser) -->\n                                <i *ngIf=\"(!report?.assignee) || (!report?.isValidUser)\" 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 five-column\" *ngIf=\"tabType === 'frequency'\">\n\n                        <div class=\"exel-view-row multi-column five-column\">\n                            <div class=\"exel-view-column\" [class.error]=\"!report?.frequency\">{{report?.frequency}}\n                                <i *ngIf=\"!report?.frequency\" class=\"icons\"\n                                    [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\">\n                                {{report?.day}}\n                                <i *ngIf=\"!report?.validDate\" class=\"icons\" [appTooltip]=\"'Invalid Due Date.'\"\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                                <i *ngIf=\"report?.isPastDate\" class=\"icons\"\n                                    [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>assignor\n                            <div class=\"exel-view-column\" [class.error]=\"!report?.validDate || report?.isPastDate\">\n                                {{report?.month}}\n                                <i *ngIf=\"!report?.validDate\" class=\"icons\" [appTooltip]=\"'Invalid Due Date.'\"\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                                <i *ngIf=\"report?.isPastDate\" class=\"icons\"\n                                    [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\n                    </div>\n                    <div class=\"exel-view-column multi-column two-column\">\n                        <div class=\"exel-view-row multi-column two-column\">\n                            <div class=\"exel-view-column\">{{report?.responsibilityCenter}}</div>\n                            <div class=\"exel-view-column\">{{report?.responsibilityCenterType}}</div>\n                        </div>\n                    </div>\n                    <div class=\"exel-view-column\">{{report?.reportClass}}</div>\n                    <div class=\"exel-view-column\">{{report?.objective}}</div>\n                    <div class=\"exel-view-column\">{{report?.notes}}</div>\n                    <div class=\"exel-view-column multi-column\" [class.two-column]=\"true\">\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\n                            <div class=\"exel-view-column multi-column\">\n                                <div class=\"exel-view-row multi-column\">\n                                    <div class=\"exel-view-column\" [class.small-column]=\"true\">{{report?.isFormat}}</div>\n                                    <a class=\"exel-view-column external-link\" [href]=\"report?.formatForResponsibility\"\n                                        target=\"_blank\">{{report?.formatForResponsibility}}</a>\n                                </div>\n                            </div>\n                            <div class=\"exel-view-column\" [class.small-column]=\"true\">\n                                {{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.four-column]=\"true\">\n                        <div class=\"exel-view-row multi-column\" [class.four-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?.reviewerType}}</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\">{{report?.collaborator}}\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'\"\n                (click)=\"selectedTab.emit('frequency')\">Frequency Responsibilities</button>\n            <button *ngIf=\"bulkUpload?.ongoing?.reports?.length\" [class.active]=\"tabType === 'ongoing'\"\n                (click)=\"selectedTab.emit('ongoing')\">Ongoing Responsibilities</button>\n            <button *ngIf=\"bulkUpload?.onCompletion?.reports?.length\" [class.active]=\"tabType === 'onCompletion'\"\n                (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}}\n                    {{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\"\n                    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-------------------- -->", 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-row.multi-column .external-link{color:#1e5dd3;text-decoration:none}.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.four-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.four-column{width:800px;min-width:800px!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: [{
@@ -48608,6 +48602,7 @@ class AddMultipleResponsibilityWithTabComponent {
                         reviewWillBeFailedAfter: report[24],
                         overseer: report[25],
                         notifyOnFailure: report[26],
+                        collaborator: report[27],
                     };
                     obj['isValidData'] = this.isValidData(obj);
                     obj['isValidUser'] = this.returnIds(obj?.assignee, 'entrusted_to')
@@ -48655,6 +48650,7 @@ class AddMultipleResponsibilityWithTabComponent {
                         reviewWillBeFailedAfter: report[19],
                         overseer: report[20],
                         notifyOnFailure: report[21],
+                        collaborator: report[22],
                     };
                     obj['isValidData'] = this.isValidData(obj);
                     obj['userValidateWithProgram'] = this.validateDataWithProgram(obj);
@@ -48700,6 +48696,7 @@ class AddMultipleResponsibilityWithTabComponent {
                         overseer: report[20],
                         notifyOnFailure: report[21],
                         frequency: 'Ongoing',
+                        collaborator: report[22],
                     };
                     obj['isValidData'] = this.isValidData(obj);
                     obj['userValidateWithProgram'] = this.validateDataWithProgram(obj);
@@ -48739,6 +48736,7 @@ class AddMultipleResponsibilityWithTabComponent {
                         reviewWillBeFailedAfter: report[17],
                         overseer: report[18],
                         notifyOnFailure: report[19],
+                        collaborator: report[20],
                     };
                     obj['isValidData'] = this.isValidData(obj);
                     obj['userValidateWithProgram'] = this.validateDataWithProgram(obj);