vcomply-workflow-engine 7.3.8 → 7.4.0

package/fesm2022/vcomply-workflow-engine.mjs

@@ -32015,7 +32015,6 @@ class WorkflowComplianceComponent {
     }
     getInitialData() {
         this.isDuplicate = this.responsibilityDetails?.duplicate ?? false;
-        this.hiddenList.push('ASSESSMENT');
         this.hiddenList.push('ASSURANCE');
         this.getAssigneesList();
         this.checkWhetherAllListsLoaded();
@@ -32040,7 +32039,7 @@ class WorkflowComplianceComponent {
         this.getOrgDetails();
         this.getSubscriptionDetail();
         this.setResponsibilityName();
-        this.hideElementsFromMoreOptions.emit(this.hiddenList);
+        this.hideOptionFromMoreOptions();
     }
     checkCustomFields() {
         if (!this.customFields.length) {
@@ -32055,10 +32054,6 @@ class WorkflowComplianceComponent {
         this.organizationCommonService?.getOrgDetailsInfo()?.subscribe({
             next: (res) => {
                 this.isRiskEnable = res?.enable_riskclass ? true : false;
-                if (!res?.enable_riskclass) {
-                    this.hiddenList.push('RISK_CLASSIFICATION');
-                    this.hideElementsFromMoreOptions.emit(this.hiddenList);
-                }
             },
             error: (err) => {
                 console.error(err);
@@ -32077,15 +32072,9 @@ class WorkflowComplianceComponent {
         });
     }
     hideOptionFromMoreOptions() {
-        const visibleOptions = [];
-        if (this.subscriptionDetails[0]?.assessment_flag) {
-            visibleOptions.push('ASSESSMENT');
-        }
-        if (this.subscriptionDetails[0]?.assurance_flag) {
-            visibleOptions.push('ASSURANCE');
-        }
-        this.hiddenList = this.hiddenList?.filter((ele) => !visibleOptions.includes(ele));
-        this.hideElementsFromMoreOptions.emit(this.hiddenList);
+        setTimeout(() => {
+            this.hideElementsFromMoreOptions.emit(this.hiddenList);
+        }, 0);
     }
     activateSelector(type, event) {
         this.activeSelector = event ? type : '';
@@ -32129,9 +32118,6 @@ class WorkflowComplianceComponent {
             };
             this.setAssessmentData([this.assessmentDetails], payload, 'assessment');
             this.whatChanged(assessmentData);
-            this.hiddenList.push('CHECKPOINTS');
-            this.hiddenList.push('CHECKPOINTS_NEW');
-            this.hideElementsFromMoreOptions.emit(this.hiddenList);
         }
     }
     whatChanged(event) {
@@ -46882,11 +46868,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }], ctorParameters: function () { return []; } });
 
 const RISK_CLASS_LIST = ['high', 'low-medium', 'low', 'medium-high'];
+const FULL_MONTH_NAMES = [
+    'January',
+    'February',
+    'March',
+    'April',
+    'May',
+    'June',
+    'July',
+    'August',
+    'September',
+    'October',
+    'November',
+    'December',
+];
 const VALIDATION_MESSAGES = {
     RISK_CLASS: 'Invalid risk class. Select a valid option from the drop-down list.',
     DAY: 'Invalid day selection. Select a valid day from the drop-down list in the template.',
     DATE_FORMAT: 'Invalid date format. Select a valid date from the drop-down list in the template.',
     DUE_DATE: 'Invalid Due Date.',
+    DUE_TIME: "This value does not match the VComply template's format. Use the correct value from the drop-downs in the template.",
+    ENDS_AFTER_OCCURRENCES_GREATER_THAN_ZERO: 'Must be greater than 0',
+    ENDS_AFTER_OCCURRENCES_NUMERIC: 'Must be numeric value',
+    ENDS_BY_DATE_INVALID_VALUE: 'The data added in this field is not valid. Select from the dropdown provided in the template.',
+    ENDS_BY_DATE_INCOMPLETE: 'Ends By Date requires both a day and a month. Please complete both fields or clear both to leave the end date unset.',
+    ENDS_BY_DATE_PAST: 'The Ends By Date is in the past. This responsibility will be created with no future occurrences.',
+    ENDS_BY_DATE_CONFLICT: "You have provided values for both 'Ends After Occurrences' and 'Ends By Date'. Fill in only one, or leave both blank if the responsibility will always be active.",
 };
 
 class BulkResponsibilityViewComponent {
@@ -46900,8 +46907,15 @@ class BulkResponsibilityViewComponent {
         this.responsibilityType = 'singleTab';
         this.finalResponsibilities = 0;
         this.isConfirmClickable = false;
+        this.isHorizontallyScrolled = false;
         this.responsibilityMultiTabBulkUpload = [];
     }
+    get hasExtendedFrequencyColumns() {
+        return !!this.responsibilityBulkUpload?.hasExtendedFrequencyColumns;
+    }
+    get hasProgramColumn() {
+        return !!this.responsibilityBulkUpload?.header?.includes('Program');
+    }
     ngOnChanges() {
         if (this.responsibilityBulkUpload) {
             this.finalResponsibilities = 0;
@@ -46923,6 +46937,10 @@ class BulkResponsibilityViewComponent {
             });
         }
     }
+    onGridScroll(event) {
+        const scrollLeft = event.target?.scrollLeft ?? 0;
+        this.isHorizontallyScrolled = scrollLeft > 0;
+    }
     submit() {
         this.submitResponsibilityBulkUpload.emit();
     }
@@ -46930,11 +46948,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-------------------- -->\r\n<app-loader *ngIf=\"loader\"></app-loader>\r\n\r\n\r\n\r\n\r\n\r\n\r\n<!-- HTML for multiple tabs -->\r\n<ng-container *ngIf=\"responsibilityType === 'multiTab'\">\r\n    <div class=\"bulk-view\">\r\n        <div class=\"bulk-view-head\">\r\n            <h2 class=\"bulk-view-title\">\r\n                {{fileName}}\r\n            </h2>\r\n        </div>\r\n        <div class=\"bulk-view-body bulk\">\r\n            <div class=\"exel-view\">\r\n                <div class=\"exel-view-row head\">\r\n                    <div class=\"exel-view-column sl-no\">#</div>\r\n                    <div class=\"exel-view-column\">Responsibility Name <span class=\"required\">*</span></div>\r\n                    <div class=\"exel-view-column\" *ngIf=\"responsibilityBulkUpload?.header.includes('Program')\"\r\n                        [class.three-column]=\"true\">\r\n                        <div class=\"exel-view-row\">\r\n                            <div class=\"exel-view-column large\">Program</div>\r\n                        </div>\r\n                        <div class=\"exel-view-row multi-column\" [class.three-column]=\"true\">\r\n                            <div class=\"exel-view-column\">Program Type</div>\r\n                            <div class=\"exel-view-column\">Program</div>\r\n                            <div class=\"exel-view-column\">Program Category</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"exel-view-column\">Entrusted By</div>\r\n                    <div class=\"exel-view-column\" [class.two-column]=\"true\">\r\n                        <div class=\"exel-view-row\">\r\n                            <div class=\"exel-view-column large\">Entrust To <span class=\"required\">*</span></div>\r\n                        </div>\r\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\r\n                            <div class=\"exel-view-column\">Person or Group<span class=\"required\">*</span></div>\r\n                            <div class=\"exel-view-column\">All or Any Persons</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"exel-view-column\">Key Responsibility?</div>\r\n                    <div class=\"exel-view-column\" *ngIf=\"tabType === 'frequency'\"\r\n                        [class.five-column]=\"tabType === 'frequency' || tabType === 'onCompletion'\"\r\n                        [class.three-column]=\"tabType === 'ongoing'\">\r\n                        <div class=\"exel-view-row\">\r\n                            <!-- <div class=\"exel-view-column large\">Frequency of Occurrence and Completion Window <span class=\"required\">*</span></div> -->\r\n                            <div class=\"exel-view-column large\">{{responsibilityBulkUpload?.header.includes('Program') ?\r\n                                responsibilityBulkUpload?.header[8]?.slice(0, -1) :\r\n                                responsibilityBulkUpload?.header[5]?.slice(0, -1)}}<span class=\"required\">*</span></div>\r\n                        </div>\r\n                        <div class=\"exel-view-row multi-column\"\r\n                            [class.five-column]=\"tabType === 'frequency' || tabType === 'onCompletion'\"\r\n                            [class.three-column]=\"tabType === 'ongoing'\">\r\n                            <ng-container *ngIf=\"tabType === 'frequency'\">\r\n                                <div class=\"exel-view-column\">Frequency <span class=\"required\">*</span></div>\r\n                                <div class=\"exel-view-column\">Due Date <span class=\"info-text\">(Day)</span></div>\r\n                                <div class=\"exel-view-column\">Due Date <span class=\"info-text\">(Month)</span></div>\r\n                                <div class=\"exel-view-column\">Start <span class=\"info-text\">(No. of days before the due\r\n                                        date)</span></div>\r\n                                <div class=\"exel-view-column\">Fail <span class=\"info-text\"\r\n                                        appTooltip=\"(No. of days after the due date. Select '0' if the responsibility must be completed on the due date)\"\r\n                                        placement=\"bottom\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">(No. of\r\n                                        days after the due date. Select \"0\" if the responsibility must be completed on\r\n                                        the due date)</span></div>\r\n                            </ng-container>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"exel-view-column two-column\">\r\n                        <div class=\"exel-view-row\">\r\n                            <div class=\"exel-view-column large\">Responsibility Centre</div>\r\n                        </div>\r\n                        <div class=\"exel-view-row multi-column two-column\">\r\n                            <div class=\"exel-view-column\">Responsibility Centre Name</div>\r\n                            <div class=\"exel-view-column\">Responsibility Centre Type</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"exel-view-column\">Risk Class</div>\r\n                    <div class=\"exel-view-column\">Objective</div>\r\n                    <div class=\"exel-view-column\">Notes</div>\r\n                    <div class=\"exel-view-column\" [class.two-column]=\"true\">\r\n                        <div class=\"exel-view-row\">\r\n                            <div class=\"exel-view-column large\">Format & Evidence</div>\r\n                        </div>\r\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\" [class.three-column]=\"false\">\r\n                            <div class=\"exel-view-column\" [class.small-column]=\"true\">Format</div>\r\n                            <div class=\"exel-view-column\">Format For Responsibility (link)</div>\r\n                            <div class=\"exel-view-column\" [class.small-column]=\"true\">Evidence</div>\r\n                        </div>\r\n                    </div>\r\n                    <!-- <div class=\"exel-view-column\">Assessments or Checkpoints</div> -->\r\n                    <div class=\"exel-view-column four-column\">\r\n                        <div class=\"exel-view-row\">\r\n                            <div class=\"exel-view-column large\">Review of Responsibility</div>\r\n                        </div>\r\n                        <div class=\"exel-view-row multi-column\" [class.four-column]=\"true\">\r\n                            <div class=\"exel-view-column\">Reviewer</div>\r\n                            <div class=\"exel-view-column\">Reviewer Type\r\n                                <span class=\"info-text\">(Specify the type of reviewer flow)</span>\r\n\r\n                            </div>\r\n\r\n                            <div class=\"exel-view-column\">Review Start <span class=\"info-text\">(No. of days before the\r\n                                    due date)</span></div>\r\n                            <div class=\"exel-view-column\">Review Fail <span class=\"info-text\"\r\n                                    appTooltip=\"(No. of days after the due date. Select '0' if the responsibility must be reviewed on the due date)\"\r\n                                    placement=\"bottom\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">(No. of days\r\n                                    after the due date. Select \"0\" if the responsibility must be reviewed on the due\r\n                                    date)</span></div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"exel-view-column\" [class.two-column]=\"true\">\r\n                        <div class=\"exel-view-row\">\r\n                            <div class=\"exel-view-column large\">Overseer</div>\r\n                        </div>\r\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\r\n                            <div class=\"exel-view-column\">Always Notify</div>\r\n                            <div class=\"exel-view-column\">Notify on Failure</div>\r\n                        </div>\r\n                    </div>\r\n                    <!-- <div class=\"exel-view-column\">Overseer</div> -->\r\n\r\n                    <!-- Collaborator -->\r\n                    <div class=\"exel-view-column\">Collaborator</div>\r\n\r\n                </div>\r\n                <div class=\"exel-view-row\" *ngFor=\"let report of responsibilityBulkUpload?.reports; let i = index\">\r\n                    <div class=\"exel-view-column sl-no\" [class.error]=\"!report?.isValid\">{{i+1}}</div>\r\n                    <div class=\"exel-view-column\" [class.error]=\"!report.responsibilityName\">\r\n                        {{report?.responsibilityName}} <i *ngIf=\"!report.responsibilityName\" class=\"icons\"\r\n                            [appTooltip]=\"'Enter a name for this responsibility.'\" placement=\"bottom-right\" type=\"white\"\r\n                            delay=\"0\" [tooltipMandatory]=true>&#xe932;</i></div>\r\n                    <div class=\"exel-view-column multi-column\"\r\n                        *ngIf=\"responsibilityBulkUpload?.header.includes('Program')\" [class.error]=\"false\"\r\n                        [class.three-column]=\"true\">\r\n                        <div class=\"exel-view-row multi-column\" [class.three-column]=\"true\">\r\n                            <div class=\"exel-view-column\">{{report?.programType}}</div>\r\n                            <div class=\"exel-view-column\">{{report?.program}}</div>\r\n                            <div class=\"exel-view-column\">{{report?.programCategory}}</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"exel-view-column\">{{report?.assignor}}\r\n                    </div>\r\n                    <div class=\"exel-view-column multi-column\" [class.two-column]=\"true\">\r\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\r\n                            <div class=\"exel-view-column\"\r\n                                [class.error]=\"!report?.assignee || !report?.userValidateWithProgram?.isValidAssignee || (!report?.isValidUser)\">\r\n                                {{report?.assignee}}\r\n                                <!-- || (!report?.isValidUser) -->\r\n                                <i *ngIf=\"(!report?.assignee) || (!report?.isValidUser)\" class=\"icons\"\r\n                                    [appTooltip]=\"'Select the user responsible for completing this responsibility. '\"\r\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                                </i>\r\n                                <i *ngIf=\"(report?.assignee) && !report?.userValidateWithProgram?.isValidAssignee\"\r\n                                    class=\"icons\"\r\n                                    [appTooltip]=\"'This user is not associated with the selected Program.'\"\r\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                                </i>\r\n                            </div>\r\n                            <div class=\"exel-view-column\">{{report?.assigneeType}}</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"exel-view-column\">{{report?.keyResponsibility}}</div>\r\n                    <div class=\"exel-view-column multi-column five-column\" *ngIf=\"tabType === 'frequency'\">\r\n\r\n                        <div class=\"exel-view-row multi-column five-column\">\r\n                            <div class=\"exel-view-column\" [class.error]=\"!report?.frequency\">{{report?.frequency}}\r\n                                <i *ngIf=\"!report?.frequency\" class=\"icons\"\r\n                                    [appTooltip]=\"'Select a frequency for this responsibility.'\"\r\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                            </div>\r\n                            <div class=\"exel-view-column\" [class.error]=\"!report?.validDate || report?.isPastDate\">\r\n                                {{report?.day}}\r\n                                <i *ngIf=\"!report?.validDate\" class=\"icons\" [appTooltip]=\"'Invalid Due Date.'\"\r\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                                <i *ngIf=\"report?.isPastDate\" class=\"icons\"\r\n                                    [appTooltip]=\"'This date occurs in the past. Select a future date.'\"\r\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                            </div>\r\n                            <div class=\"exel-view-column\" [class.error]=\"!report?.validDate || report?.isPastDate\">\r\n                                {{report?.month}}\r\n                                <i *ngIf=\"!report?.validDate\" class=\"icons\" [appTooltip]=\"'Invalid Due Date.'\"\r\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                                <i *ngIf=\"report?.isPastDate\" class=\"icons\"\r\n                                    [appTooltip]=\"'This date occurs in the past. Select a future date.'\"\r\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                            </div>\r\n                            <div class=\"exel-view-column\">{{report?.responsibilityWindow}}</div>\r\n                            <div class=\"exel-view-column\">{{report?.failedAfter}}</div>\r\n                        </div>\r\n\r\n                    </div>\r\n                    <div class=\"exel-view-column multi-column two-column\">\r\n                        <div class=\"exel-view-row multi-column two-column\">\r\n                            <div class=\"exel-view-column\">{{report?.responsibilityCenter}}</div>\r\n                            <div class=\"exel-view-column\">{{report?.responsibilityCenterType}}</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"exel-view-column\">{{report?.reportClass}}</div>\r\n                    <div class=\"exel-view-column\">{{report?.objective}}</div>\r\n                    <div class=\"exel-view-column\">{{report?.notes}}</div>\r\n                    <div class=\"exel-view-column multi-column\" [class.two-column]=\"true\">\r\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\r\n                            <div class=\"exel-view-column multi-column\">\r\n                                <div class=\"exel-view-row multi-column\">\r\n                                    <div class=\"exel-view-column\" [class.small-column]=\"true\">{{report?.isFormat}}</div>\r\n                                    <a class=\"exel-view-column external-link\" [href]=\"report?.formatForResponsibility\"\r\n                                        target=\"_blank\">{{report?.formatForResponsibility}}</a>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"exel-view-column\" [class.small-column]=\"true\">\r\n                                {{report?.documentEvidenceRequired}}</div>\r\n                        </div>\r\n                    </div>\r\n                    <!-- <div class=\"exel-view-column\">{{report?.assessments}}</div> -->\r\n                    <div class=\"exel-view-column multi-column\" [class.four-column]=\"true\">\r\n                        <div class=\"exel-view-row multi-column\" [class.four-column]=\"true\">\r\n                            <div class=\"exel-view-column\" [class.error]=\"report?.reviewer && (\r\n                              !report?.userValidateWithProgram?.isValidReviewer )\">{{report?.reviewer}}\r\n\r\n                                <!-- <i *ngIf=\"(report?.reviewer && report?.reviewer === report?.assignor)\"\r\n                            class=\"icons\"\r\n                            [appTooltip]=\"((report?.assignor)?'The Assignor cannot also be the Reviewer of this responsibility.':'You cannot be a Reviewer of this responsibility since you are the assignor. ') +'Select another user as the Reviewer'\"\r\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                        </i> -->\r\n                                <i *ngIf=\"report?.reviewer && !report?.userValidateWithProgram?.isValidReviewer\"\r\n                                    class=\"icons\"\r\n                                    [appTooltip]=\"'This user is not associated with the selected Program.'\"\r\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                                </i>\r\n                            </div>\r\n                            <div class=\"exel-view-column\">{{report?.reviewerType}}</div>\r\n                            <div class=\"exel-view-column\">{{report?.reviewToBeCompletedWithin}}</div>\r\n                            <div class=\"exel-view-column\">{{report?.reviewWillBeFailedAfter}}</div>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <div class=\"exel-view-column multi-column\" [class.two-column]=\"true\">\r\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\r\n                            <div class=\"exel-view-column\" [class.error]=\"report?.overseer && (\r\n                              !report?.userValidateWithProgram?.isValidOverseer )\">\r\n                                {{report?.overseer}}\r\n\r\n                                <i *ngIf=\"(report?.overseer) && !report?.userValidateWithProgram?.isValidOverseer\"\r\n                                    class=\"icons\"\r\n                                    [appTooltip]=\"'This user is not associated with the selected Program.'\"\r\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                                </i>\r\n                            </div>\r\n                            <div class=\"exel-view-column\" [class.error]=\"report?.notifyOnFailure && (\r\n                            !report?.userValidateWithProgram?.isValidNotifyOnFailure )\">\r\n                                {{report?.notifyOnFailure}}\r\n\r\n                                <i *ngIf=\"(report?.notifyOnFailure) && !report?.userValidateWithProgram?.isValidNotifyOnFailure\"\r\n                                    class=\"icons\"\r\n                                    [appTooltip]=\"'This user is not associated with the selected Program.'\"\r\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                                </i>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <div class=\"exel-view-column\">{{report?.collaborator}}\r\n                    </div>\r\n\r\n                    <!-- <div class=\"exel-view-column\" [class.error]=\"(report?.overseer) && ((report?.overseer === report?.assignee) ||(report?.reviewer === report?.overseer) || (report?.overseer == report?.assignor) || (!report?.userValidateWithProgram?.isValidOverseer))\">\r\n                        {{report?.overseer}}\r\n                        <i *ngIf=\"(report?.overseer) && ((report?.reviewer === report?.overseer))\"\r\n                            class=\"icons\"\r\n                            [appTooltip]=\"'The Reviewer cannot also be the Overseer of this responsibility. Select another user as the Overseer.'\"\r\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                        </i>\r\n\r\n                        <i *ngIf=\"report?.overseer && (report?.overseer === report?.assignee)\" class=\"icons\"\r\n                            [appTooltip]=\"'The Assignee cannot also be the Overseer of this responsibility. Select another user as the Overseer'\"\r\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                        </i>\r\n                        <i *ngIf=\"((report?.overseer) && (report?.overseer == report?.assignor))\"\r\n                            class=\"icons\"\r\n                            [appTooltip]=\"((report?.assignor)?'The Assignor cannot also be the Overseer of this responsibility. ':'You cannot be an Overseer of this responsibility since you are the Assignor. ') +'Select another user as the Overseer.'\"\r\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                        </i>\r\n                        <i *ngIf=\"!report?.userValidateWithProgram?.isValidOverseer\"\r\n                            class=\"icons\"\r\n                            [appTooltip]=\"'Selected user is not a valid overseer for selected program.'\"\r\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                        </i>\r\n                    </div> -->\r\n                </div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n                <!-- ------------------------------------------------old code dynamic------------------------------------------------- -->\r\n\r\n                <!-- *ngFor=\"let report of responsibilityBulkUpload?.reports; let i = index\" -->\r\n            </div>\r\n        </div>\r\n        <div class=\"bulk-view-option\">\r\n            <button *ngIf=\"bulkUpload?.frequency?.reports?.length\" [class.active]=\"tabType === 'frequency'\"\r\n                (click)=\"selectedTab.emit('frequency')\">Frequency Responsibilities</button>\r\n            <button *ngIf=\"bulkUpload?.ongoing?.reports?.length\" [class.active]=\"tabType === 'ongoing'\"\r\n                (click)=\"selectedTab.emit('ongoing')\">Ongoing Responsibilities</button>\r\n            <button *ngIf=\"bulkUpload?.onCompletion?.reports?.length\" [class.active]=\"tabType === 'onCompletion'\"\r\n                (click)=\"selectedTab.emit('onCompletion')\">On Completion Responsibilities</button>\r\n        </div>\r\n        <div class=\"bulk-view-footer\">\r\n            <!-- <div class=\"left\">\r\n                <p>{{finalResponsibilities}} out of {{responsibilityBulkUpload?.reports?.length}} responsibilities will be\r\n                    uploaded.</p>\r\n            </div> -->\r\n            <div class=\"left\">\r\n                <p>{{finalResponsibilities}} out of {{responsibilityMultiTabBulkUpload?.length}}\r\n                    {{responsibilityMultiTabBulkUpload?.length > 1 ? 'responsibilities' : 'responsibility'}} will be\r\n                    uploaded.</p>\r\n            </div>\r\n            <div class=\"right\">\r\n                <button (click)=\"close()\" id=\"bulk-resp-cancel\">Cancel</button>\r\n                <button (click)=\"submit()\" id=\"bulk-resp-confirm\" [disabled]=\"!isConfirmClickable\"\r\n                    class=\"blue\">Confirm</button>\r\n                <!-- finalResponsibilities < 1 -->\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <app-loader *ngIf=\"loader\"></app-loader>\r\n\r\n</ng-container>\r\n\r\n<!-- --------------------------------------------------------------------upward is new one-------------------- -->", styles: ["@import\"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-------------------- -->\r\n<app-loader *ngIf=\"loader\"></app-loader>\r\n\r\n\r\n\r\n\r\n\r\n\r\n<!-- HTML for multiple tabs -->\r\n<ng-container *ngIf=\"responsibilityType === 'multiTab'\">\r\n    <div class=\"bulk-view\">\r\n        <div class=\"bulk-view-head\">\r\n            <h2 class=\"bulk-view-title\">\r\n                {{fileName}}\r\n            </h2>\r\n        </div>\r\n        <div class=\"bulk-view-body bulk\" [class.is-horizontally-scrolled]=\"isHorizontallyScrolled\"\r\n            (scroll)=\"onGridScroll($event)\">\r\n            <div class=\"exel-view\">\r\n                <div class=\"exel-view-row head\">\r\n                    <div class=\"exel-view-column sl-no sticky-col sticky-col-index\">#</div>\r\n                    <div class=\"exel-view-column sticky-col sticky-col-name\">Responsibility Name <span class=\"required\">*</span></div>\r\n                    <div class=\"exel-view-column\" *ngIf=\"responsibilityBulkUpload?.header.includes('Program')\"\r\n                        [class.three-column]=\"true\">\r\n                        <div class=\"exel-view-row\">\r\n                            <div class=\"exel-view-column large\">Program</div>\r\n                        </div>\r\n                        <div class=\"exel-view-row multi-column\" [class.three-column]=\"true\">\r\n                            <div class=\"exel-view-column\">Program Type</div>\r\n                            <div class=\"exel-view-column\">Program</div>\r\n                            <div class=\"exel-view-column\">Program Category</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"exel-view-column\">Entrusted By</div>\r\n                    <div class=\"exel-view-column\" [class.two-column]=\"true\">\r\n                        <div class=\"exel-view-row\">\r\n                            <div class=\"exel-view-column large\">Entrust To <span class=\"required\">*</span></div>\r\n                        </div>\r\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\r\n                            <div class=\"exel-view-column\">Person or Group<span class=\"required\">*</span></div>\r\n                            <div class=\"exel-view-column\">All or Any Persons</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"exel-view-column\">Key Responsibility?</div>\r\n                    <div class=\"exel-view-column\" *ngIf=\"tabType === 'frequency'\"\r\n                        [class.five-column]=\"!hasExtendedFrequencyColumns\"\r\n                        [class.nine-column]=\"hasExtendedFrequencyColumns\">\r\n                        <div class=\"exel-view-row\">\r\n                            <!-- <div class=\"exel-view-column large\">Frequency of Occurrence and Completion Window <span class=\"required\">*</span></div> -->\r\n                            <div class=\"exel-view-column large\">{{responsibilityBulkUpload?.header.includes('Program') ?\r\n                                responsibilityBulkUpload?.header[8]?.slice(0, -1) :\r\n                                responsibilityBulkUpload?.header[5]?.slice(0, -1)}}<span class=\"required\">*</span></div>\r\n                        </div>\r\n                        <div class=\"exel-view-row multi-column\"\r\n                            [class.five-column]=\"!hasExtendedFrequencyColumns\"\r\n                            [class.nine-column]=\"hasExtendedFrequencyColumns\">\r\n                            <ng-container *ngIf=\"tabType === 'frequency'\">\r\n                                <div class=\"exel-view-column\">Frequency <span class=\"required\">*</span></div>\r\n                                <div class=\"exel-view-column\">Due Date <span class=\"info-text\">(Day)</span></div>\r\n                                <div class=\"exel-view-column\">Due Date <span class=\"info-text\">(Month)</span></div>\r\n                                <div class=\"exel-view-column\" *ngIf=\"hasExtendedFrequencyColumns\">Due Time</div>\r\n                                <div class=\"exel-view-column\">Start <span class=\"info-text\">(No. of days before the due\r\n                                        date)</span></div>\r\n                                <div class=\"exel-view-column\">Fail <span class=\"info-text\"\r\n                                        appTooltip=\"(No. of days after the due date. Select '0' if the responsibility must be completed on the due date)\"\r\n                                        placement=\"bottom\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">(No. of\r\n                                        days after the due date. Select \"0\" if the responsibility must be completed on\r\n                                        the due date)</span></div>\r\n                                <ng-container *ngIf=\"hasExtendedFrequencyColumns\">\r\n                                    <div class=\"exel-view-column\">Responsibility Ends After Occurences <span\r\n                                            class=\"info-text\">(Number of occurrences)</span></div>\r\n                                    <div class=\"exel-view-column\">Responsibility Ends By Date <span\r\n                                            class=\"info-text\">(Day)</span></div>\r\n                                    <div class=\"exel-view-column\">Responsibility Ends By Date <span\r\n                                            class=\"info-text\">(Month)</span></div>\r\n                                </ng-container>\r\n                            </ng-container>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"exel-view-column two-column\">\r\n                        <div class=\"exel-view-row\">\r\n                            <div class=\"exel-view-column large\">Responsibility Centre</div>\r\n                        </div>\r\n                        <div class=\"exel-view-row multi-column two-column\">\r\n                            <div class=\"exel-view-column\">Responsibility Centre Name</div>\r\n                            <div class=\"exel-view-column\">Responsibility Centre Type</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"exel-view-column\">Risk Class</div>\r\n                    <div class=\"exel-view-column\">Objective</div>\r\n                    <div class=\"exel-view-column\">Notes</div>\r\n                    <div class=\"exel-view-column\" [class.two-column]=\"true\">\r\n                        <div class=\"exel-view-row\">\r\n                            <div class=\"exel-view-column large\">Format & Evidence</div>\r\n                        </div>\r\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\" [class.three-column]=\"false\">\r\n                            <div class=\"exel-view-column\" [class.small-column]=\"true\">Format</div>\r\n                            <div class=\"exel-view-column\">Format For Responsibility (link)</div>\r\n                            <div class=\"exel-view-column\" [class.small-column]=\"true\">Evidence</div>\r\n                        </div>\r\n                    </div>\r\n                    <!-- <div class=\"exel-view-column\">Assessments or Checkpoints</div> -->\r\n                    <div class=\"exel-view-column four-column\">\r\n                        <div class=\"exel-view-row\">\r\n                            <div class=\"exel-view-column large\">Review of Responsibility</div>\r\n                        </div>\r\n                        <div class=\"exel-view-row multi-column\" [class.four-column]=\"true\">\r\n                            <div class=\"exel-view-column\">Reviewer</div>\r\n                            <div class=\"exel-view-column\">Reviewer Type\r\n                                <span class=\"info-text\">(Specify the type of reviewer flow)</span>\r\n\r\n                            </div>\r\n\r\n                            <div class=\"exel-view-column\">Review Start <span class=\"info-text\">(No. of days before the\r\n                                    due date)</span></div>\r\n                            <div class=\"exel-view-column\">Review Fail <span class=\"info-text\"\r\n                                    appTooltip=\"(No. of days after the due date. Select '0' if the responsibility must be reviewed on the due date)\"\r\n                                    placement=\"bottom\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">(No. of days\r\n                                    after the due date. Select \"0\" if the responsibility must be reviewed on the due\r\n                                    date)</span></div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"exel-view-column\" [class.two-column]=\"true\">\r\n                        <div class=\"exel-view-row\">\r\n                            <div class=\"exel-view-column large\">Overseer</div>\r\n                        </div>\r\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\r\n                            <div class=\"exel-view-column\">Always Notify</div>\r\n                            <div class=\"exel-view-column\">Notify on Failure</div>\r\n                        </div>\r\n                    </div>\r\n                    <!-- <div class=\"exel-view-column\">Overseer</div> -->\r\n\r\n                    <!-- Collaborator -->\r\n                    <div class=\"exel-view-column\">Collaborator</div>\r\n\r\n                </div>\r\n                <div class=\"exel-view-row\" *ngFor=\"let report of responsibilityBulkUpload?.reports; let i = index\">\r\n                    <div class=\"exel-view-column sl-no sticky-col sticky-col-index\" [class.error]=\"!report?.isValid\">{{i+1}}</div>\r\n                    <div class=\"exel-view-column sticky-col sticky-col-name\" [class.error]=\"!report.responsibilityName\">\r\n                        {{report?.responsibilityName}} <i *ngIf=\"!report.responsibilityName\" class=\"icons\"\r\n                            [appTooltip]=\"'Enter a name for this responsibility.'\" placement=\"bottom-right\" type=\"white\"\r\n                            delay=\"0\" [tooltipMandatory]=true>&#xe932;</i></div>\r\n                    <div class=\"exel-view-column multi-column\"\r\n                        *ngIf=\"responsibilityBulkUpload?.header.includes('Program')\" [class.error]=\"false\"\r\n                        [class.three-column]=\"true\">\r\n                        <div class=\"exel-view-row multi-column\" [class.three-column]=\"true\">\r\n                            <div class=\"exel-view-column\">{{report?.programType}}</div>\r\n                            <div class=\"exel-view-column\">{{report?.program}}</div>\r\n                            <div class=\"exel-view-column\">{{report?.programCategory}}</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"exel-view-column\">{{report?.assignor}}\r\n                    </div>\r\n                    <div class=\"exel-view-column multi-column\" [class.two-column]=\"true\">\r\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\r\n                            <div class=\"exel-view-column\"\r\n                                [class.error]=\"!report?.assignee || !report?.userValidateWithProgram?.isValidAssignee || (!report?.isValidUser)\">\r\n                                {{report?.assignee}}\r\n                                <!-- || (!report?.isValidUser) -->\r\n                                <i *ngIf=\"(!report?.assignee) || (!report?.isValidUser)\" class=\"icons\"\r\n                                    [appTooltip]=\"'Select the user responsible for completing this responsibility. '\"\r\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                                </i>\r\n                                <i *ngIf=\"(report?.assignee) && !report?.userValidateWithProgram?.isValidAssignee\"\r\n                                    class=\"icons\"\r\n                                    [appTooltip]=\"'This user is not associated with the selected Program.'\"\r\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                                </i>\r\n                            </div>\r\n                            <div class=\"exel-view-column\">{{report?.assigneeType}}</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"exel-view-column\">{{report?.keyResponsibility}}</div>\r\n                    <div class=\"exel-view-column multi-column\"\r\n                        [class.five-column]=\"!hasExtendedFrequencyColumns\"\r\n                        [class.nine-column]=\"hasExtendedFrequencyColumns\"\r\n                        *ngIf=\"tabType === 'frequency'\">\r\n\r\n                        <div class=\"exel-view-row multi-column\"\r\n                            [class.five-column]=\"!hasExtendedFrequencyColumns\"\r\n                            [class.nine-column]=\"hasExtendedFrequencyColumns\">\r\n                            <div class=\"exel-view-column\" [class.error]=\"!report?.frequency\">{{report?.frequency}}\r\n                                <i *ngIf=\"!report?.frequency\" class=\"icons\"\r\n                                    [appTooltip]=\"'Select a frequency for this responsibility.'\"\r\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                            </div>\r\n                            <div class=\"exel-view-column\" [class.error]=\"!report?.validDate || report?.isPastDate\">\r\n                                {{report?.day}}\r\n                                <i *ngIf=\"!report?.validDate\" class=\"icons\" [appTooltip]=\"'Invalid Due Date.'\"\r\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                                <i *ngIf=\"report?.isPastDate\" class=\"icons\"\r\n                                    [appTooltip]=\"'This date occurs in the past. Select a future date.'\"\r\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                            </div>\r\n                            <div class=\"exel-view-column\" [class.error]=\"!report?.validDate || report?.isPastDate\">\r\n                                {{report?.month}}\r\n                                <i *ngIf=\"!report?.validDate\" class=\"icons\" [appTooltip]=\"'Invalid Due Date.'\"\r\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                                <i *ngIf=\"report?.isPastDate\" class=\"icons\"\r\n                                    [appTooltip]=\"'This date occurs in the past. Select a future date.'\"\r\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                            </div>\r\n                            <div class=\"exel-view-column\" *ngIf=\"hasExtendedFrequencyColumns\"\r\n                                [class.error]=\"!report?.isValidDueTime\">{{report?.dueTime}}\r\n                                <i *ngIf=\"!report?.isValidDueTime\" class=\"icons\"\r\n                                    [appTooltip]=\"VALIDATION_MESSAGES.DUE_TIME\"\r\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                            </div>\r\n                            <div class=\"exel-view-column\">{{report?.responsibilityWindow}}</div>\r\n                            <div class=\"exel-view-column\">{{report?.failedAfter}}</div>\r\n                            <ng-container *ngIf=\"hasExtendedFrequencyColumns\">\r\n                                <div class=\"exel-view-column\"\r\n                                    [class.error]=\"!report?.isValidEndsAfterOccurrences\">{{report?.endsAfterOccurrences}}\r\n                                    <i *ngIf=\"!report?.isValidEndsAfterOccurrences\" class=\"icons\"\r\n                                        [appTooltip]=\"report?.endsAfterOccurrencesError\"\r\n                                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                                </div>\r\n                                <div class=\"exel-view-column\"\r\n                                    [class.error]=\"!report?.isValidEndsByDateDay\">{{report?.endsByDateDay}}\r\n                                    <i *ngIf=\"!report?.isValidEndsByDateDay\" class=\"icons\"\r\n                                        [appTooltip]=\"report?.endsByDateDayError\"\r\n                                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                                </div>\r\n                                <div class=\"exel-view-column\"\r\n                                    [class.error]=\"!report?.isValidEndsByDateMonth\">{{report?.endsByDateMonth}}\r\n                                    <i *ngIf=\"!report?.isValidEndsByDateMonth\" class=\"icons\"\r\n                                        [appTooltip]=\"report?.endsByDateMonthError\"\r\n                                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                                </div>\r\n                            </ng-container>\r\n                        </div>\r\n\r\n                    </div>\r\n                    <div class=\"exel-view-column multi-column two-column\">\r\n                        <div class=\"exel-view-row multi-column two-column\">\r\n                            <div class=\"exel-view-column\">{{report?.responsibilityCenter}}</div>\r\n                            <div class=\"exel-view-column\">{{report?.responsibilityCenterType}}</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"exel-view-column\">{{report?.reportClass}}</div>\r\n                    <div class=\"exel-view-column\">{{report?.objective}}</div>\r\n                    <div class=\"exel-view-column\">{{report?.notes}}</div>\r\n                    <div class=\"exel-view-column multi-column\" [class.two-column]=\"true\">\r\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\r\n                            <div class=\"exel-view-column multi-column\">\r\n                                <div class=\"exel-view-row multi-column\">\r\n                                    <div class=\"exel-view-column\" [class.small-column]=\"true\">{{report?.isFormat}}</div>\r\n                                    <a class=\"exel-view-column external-link\" [href]=\"report?.formatForResponsibility\"\r\n                                        target=\"_blank\">{{report?.formatForResponsibility}}</a>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"exel-view-column\" [class.small-column]=\"true\">\r\n                                {{report?.documentEvidenceRequired}}</div>\r\n                        </div>\r\n                    </div>\r\n                    <!-- <div class=\"exel-view-column\">{{report?.assessments}}</div> -->\r\n                    <div class=\"exel-view-column multi-column\" [class.four-column]=\"true\">\r\n                        <div class=\"exel-view-row multi-column\" [class.four-column]=\"true\">\r\n                            <div class=\"exel-view-column\" [class.error]=\"report?.reviewer && (\r\n                              !report?.userValidateWithProgram?.isValidReviewer )\">{{report?.reviewer}}\r\n\r\n                                <!-- <i *ngIf=\"(report?.reviewer && report?.reviewer === report?.assignor)\"\r\n                            class=\"icons\"\r\n                            [appTooltip]=\"((report?.assignor)?'The Assignor cannot also be the Reviewer of this responsibility.':'You cannot be a Reviewer of this responsibility since you are the assignor. ') +'Select another user as the Reviewer'\"\r\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                        </i> -->\r\n                                <i *ngIf=\"report?.reviewer && !report?.userValidateWithProgram?.isValidReviewer\"\r\n                                    class=\"icons\"\r\n                                    [appTooltip]=\"'This user is not associated with the selected Program.'\"\r\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                                </i>\r\n                            </div>\r\n                            <div class=\"exel-view-column\">{{report?.reviewerType}}</div>\r\n                            <div class=\"exel-view-column\">{{report?.reviewToBeCompletedWithin}}</div>\r\n                            <div class=\"exel-view-column\">{{report?.reviewWillBeFailedAfter}}</div>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <div class=\"exel-view-column multi-column\" [class.two-column]=\"true\">\r\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\r\n                            <div class=\"exel-view-column\" [class.error]=\"report?.overseer && (\r\n                              !report?.userValidateWithProgram?.isValidOverseer )\">\r\n                                {{report?.overseer}}\r\n\r\n                                <i *ngIf=\"(report?.overseer) && !report?.userValidateWithProgram?.isValidOverseer\"\r\n                                    class=\"icons\"\r\n                                    [appTooltip]=\"'This user is not associated with the selected Program.'\"\r\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                                </i>\r\n                            </div>\r\n                            <div class=\"exel-view-column\" [class.error]=\"report?.notifyOnFailure && (\r\n                            !report?.userValidateWithProgram?.isValidNotifyOnFailure )\">\r\n                                {{report?.notifyOnFailure}}\r\n\r\n                                <i *ngIf=\"(report?.notifyOnFailure) && !report?.userValidateWithProgram?.isValidNotifyOnFailure\"\r\n                                    class=\"icons\"\r\n                                    [appTooltip]=\"'This user is not associated with the selected Program.'\"\r\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                                </i>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <div class=\"exel-view-column\">{{report?.collaborator}}\r\n                    </div>\r\n\r\n                    <!-- <div class=\"exel-view-column\" [class.error]=\"(report?.overseer) && ((report?.overseer === report?.assignee) ||(report?.reviewer === report?.overseer) || (report?.overseer == report?.assignor) || (!report?.userValidateWithProgram?.isValidOverseer))\">\r\n                        {{report?.overseer}}\r\n                        <i *ngIf=\"(report?.overseer) && ((report?.reviewer === report?.overseer))\"\r\n                            class=\"icons\"\r\n                            [appTooltip]=\"'The Reviewer cannot also be the Overseer of this responsibility. Select another user as the Overseer.'\"\r\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                        </i>\r\n\r\n                        <i *ngIf=\"report?.overseer && (report?.overseer === report?.assignee)\" class=\"icons\"\r\n                            [appTooltip]=\"'The Assignee cannot also be the Overseer of this responsibility. Select another user as the Overseer'\"\r\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                        </i>\r\n                        <i *ngIf=\"((report?.overseer) && (report?.overseer == report?.assignor))\"\r\n                            class=\"icons\"\r\n                            [appTooltip]=\"((report?.assignor)?'The Assignor cannot also be the Overseer of this responsibility. ':'You cannot be an Overseer of this responsibility since you are the Assignor. ') +'Select another user as the Overseer.'\"\r\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                        </i>\r\n                        <i *ngIf=\"!report?.userValidateWithProgram?.isValidOverseer\"\r\n                            class=\"icons\"\r\n                            [appTooltip]=\"'Selected user is not a valid overseer for selected program.'\"\r\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                        </i>\r\n                    </div> -->\r\n                </div>\r\n\r\n                <div class=\"exel-view-row empty-fill-row\" aria-hidden=\"true\">\r\n                    <div class=\"exel-view-column sl-no sticky-col sticky-col-index\"></div>\r\n                    <div class=\"exel-view-column sticky-col sticky-col-name\"></div>\r\n                    <div class=\"exel-view-column multi-column three-column\" *ngIf=\"hasProgramColumn\">\r\n                        <div class=\"exel-view-row multi-column three-column\">\r\n                            <div class=\"exel-view-column\"></div>\r\n                            <div class=\"exel-view-column\"></div>\r\n                            <div class=\"exel-view-column\"></div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"exel-view-column\"></div>\r\n                    <div class=\"exel-view-column multi-column two-column\">\r\n                        <div class=\"exel-view-row multi-column two-column\">\r\n                            <div class=\"exel-view-column\"></div>\r\n                            <div class=\"exel-view-column\"></div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"exel-view-column\"></div>\r\n                    <div class=\"exel-view-column multi-column\"\r\n                        [class.five-column]=\"!hasExtendedFrequencyColumns\"\r\n                        [class.nine-column]=\"hasExtendedFrequencyColumns\"\r\n                        *ngIf=\"tabType === 'frequency'\">\r\n                        <div class=\"exel-view-row multi-column\"\r\n                            [class.five-column]=\"!hasExtendedFrequencyColumns\"\r\n                            [class.nine-column]=\"hasExtendedFrequencyColumns\">\r\n                            <div class=\"exel-view-column\"></div>\r\n                            <div class=\"exel-view-column\"></div>\r\n                            <div class=\"exel-view-column\"></div>\r\n                            <div class=\"exel-view-column\" *ngIf=\"hasExtendedFrequencyColumns\"></div>\r\n                            <div class=\"exel-view-column\"></div>\r\n                            <div class=\"exel-view-column\"></div>\r\n                            <ng-container *ngIf=\"hasExtendedFrequencyColumns\">\r\n                                <div class=\"exel-view-column\"></div>\r\n                                <div class=\"exel-view-column\"></div>\r\n                                <div class=\"exel-view-column\"></div>\r\n                            </ng-container>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"exel-view-column multi-column two-column\">\r\n                        <div class=\"exel-view-row multi-column two-column\">\r\n                            <div class=\"exel-view-column\"></div>\r\n                            <div class=\"exel-view-column\"></div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"exel-view-column\"></div>\r\n                    <div class=\"exel-view-column\"></div>\r\n                    <div class=\"exel-view-column\"></div>\r\n                    <div class=\"exel-view-column multi-column two-column\">\r\n                        <div class=\"exel-view-row multi-column two-column\">\r\n                            <div class=\"exel-view-column multi-column\">\r\n                                <div class=\"exel-view-row multi-column\">\r\n                                    <div class=\"exel-view-column small-column\"></div>\r\n                                    <div class=\"exel-view-column\"></div>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"exel-view-column small-column\"></div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"exel-view-column multi-column four-column\">\r\n                        <div class=\"exel-view-row multi-column four-column\">\r\n                            <div class=\"exel-view-column\"></div>\r\n                            <div class=\"exel-view-column\"></div>\r\n                            <div class=\"exel-view-column\"></div>\r\n                            <div class=\"exel-view-column\"></div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"exel-view-column multi-column two-column\">\r\n                        <div class=\"exel-view-row multi-column two-column\">\r\n                            <div class=\"exel-view-column\"></div>\r\n                            <div class=\"exel-view-column\"></div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"exel-view-column\"></div>\r\n                </div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n                <!-- ------------------------------------------------old code dynamic------------------------------------------------- -->\r\n\r\n                <!-- *ngFor=\"let report of responsibilityBulkUpload?.reports; let i = index\" -->\r\n            </div>\r\n        </div>\r\n        <div class=\"bulk-view-option\">\r\n            <button *ngIf=\"bulkUpload?.frequency?.reports?.length\" [class.active]=\"tabType === 'frequency'\"\r\n                (click)=\"selectedTab.emit('frequency')\">Frequency Responsibilities</button>\r\n            <button *ngIf=\"bulkUpload?.ongoing?.reports?.length\" [class.active]=\"tabType === 'ongoing'\"\r\n                (click)=\"selectedTab.emit('ongoing')\">Ongoing Responsibilities</button>\r\n            <button *ngIf=\"bulkUpload?.onCompletion?.reports?.length\" [class.active]=\"tabType === 'onCompletion'\"\r\n                (click)=\"selectedTab.emit('onCompletion')\">On Completion Responsibilities</button>\r\n        </div>\r\n        <div class=\"bulk-view-footer\">\r\n            <!-- <div class=\"left\">\r\n                <p>{{finalResponsibilities}} out of {{responsibilityBulkUpload?.reports?.length}} responsibilities will be\r\n                    uploaded.</p>\r\n            </div> -->\r\n            <div class=\"left\">\r\n                <p>{{finalResponsibilities}} out of {{responsibilityMultiTabBulkUpload?.length}}\r\n                    {{responsibilityMultiTabBulkUpload?.length > 1 ? 'responsibilities' : 'responsibility'}} will be\r\n                    uploaded.</p>\r\n            </div>\r\n            <div class=\"right\">\r\n                <button (click)=\"close()\" id=\"bulk-resp-cancel\">Cancel</button>\r\n                <button (click)=\"submit()\" id=\"bulk-resp-confirm\" [disabled]=\"!isConfirmClickable\"\r\n                    class=\"blue\">Confirm</button>\r\n                <!-- finalResponsibilities < 1 -->\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <app-loader *ngIf=\"loader\"></app-loader>\r\n\r\n</ng-container>\r\n\r\n<!-- --------------------------------------------------------------------upward is new one-------------------- -->", styles: ["@import\"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.sticky-col{position:sticky;z-index:2;background:#fff}.bulk-view-body .exel-view-column.sticky-col-index{left:0;z-index:3;background:#f1f1f1}.bulk-view-body .exel-view-column.sticky-col-name{left:60px}.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:#f5d6d7;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.is-horizontally-scrolled .sticky-col-name{box-shadow:6px 0 8px -4px #161b2f29}.bulk-view-body.bulk .exel-view{display:flex;flex-direction:column;width:max-content;min-width:100%;min-height:100%}.bulk-view-body.bulk .exel-view-row{width:max-content;min-width:100%}.bulk-view-body.bulk .exel-view-row.head{position:sticky;top:0;z-index:4}.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.sticky-col{background:#f1f1f1;z-index:5}.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,.bulk-view-body.bulk .exel-view-row.nine-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-body.bulk .exel-view-column.nine-column{width:1800px;min-width:1800px!important}.bulk-view-body.bulk .exel-view .empty-fill-row{flex:1 1 auto;min-height:32px;align-items:stretch}.bulk-view-body.bulk .exel-view .empty-fill-row .exel-view-column{min-height:100%;background-color:#fff;background-image:repeating-linear-gradient(to bottom,#fff 0 31px,#dcdcdc 31px 32px);background-repeat:repeat-y;background-size:100% 32px}.bulk-view-body.bulk .exel-view .empty-fill-row .exel-view-column.multi-column{background-image:none;background-color:transparent}.bulk-view-body.bulk .exel-view .empty-fill-row .exel-view-column.sticky-col-index,.bulk-view-body.bulk .exel-view .empty-fill-row .exel-view-column.sl-no{background-color:#f1f1f1;background-image:repeating-linear-gradient(to bottom,#f1f1f1 0 31px,#dcdcdc 31px 32px)}.bulk-view-body.bulk .exel-view .empty-fill-row .exel-view-row{height:100%;align-items:stretch}.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-------------------- -->\r\n<app-loader *ngIf=\"loader\"></app-loader>\r\n\r\n\r\n\r\n\r\n\r\n\r\n<!-- HTML for multiple tabs -->\r\n<ng-container *ngIf=\"responsibilityType === 'multiTab'\">\r\n    <div class=\"bulk-view\">\r\n        <div class=\"bulk-view-head\">\r\n            <h2 class=\"bulk-view-title\">\r\n                {{fileName}}\r\n            </h2>\r\n        </div>\r\n        <div class=\"bulk-view-body bulk\">\r\n            <div class=\"exel-view\">\r\n                <div class=\"exel-view-row head\">\r\n                    <div class=\"exel-view-column sl-no\">#</div>\r\n                    <div class=\"exel-view-column\">Responsibility Name <span class=\"required\">*</span></div>\r\n                    <div class=\"exel-view-column\" *ngIf=\"responsibilityBulkUpload?.header.includes('Program')\"\r\n                        [class.three-column]=\"true\">\r\n                        <div class=\"exel-view-row\">\r\n                            <div class=\"exel-view-column large\">Program</div>\r\n                        </div>\r\n                        <div class=\"exel-view-row multi-column\" [class.three-column]=\"true\">\r\n                            <div class=\"exel-view-column\">Program Type</div>\r\n                            <div class=\"exel-view-column\">Program</div>\r\n                            <div class=\"exel-view-column\">Program Category</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"exel-view-column\">Entrusted By</div>\r\n                    <div class=\"exel-view-column\" [class.two-column]=\"true\">\r\n                        <div class=\"exel-view-row\">\r\n                            <div class=\"exel-view-column large\">Entrust To <span class=\"required\">*</span></div>\r\n                        </div>\r\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\r\n                            <div class=\"exel-view-column\">Person or Group<span class=\"required\">*</span></div>\r\n                            <div class=\"exel-view-column\">All or Any Persons</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"exel-view-column\">Key Responsibility?</div>\r\n                    <div class=\"exel-view-column\" *ngIf=\"tabType === 'frequency'\"\r\n                        [class.five-column]=\"tabType === 'frequency' || tabType === 'onCompletion'\"\r\n                        [class.three-column]=\"tabType === 'ongoing'\">\r\n                        <div class=\"exel-view-row\">\r\n                            <!-- <div class=\"exel-view-column large\">Frequency of Occurrence and Completion Window <span class=\"required\">*</span></div> -->\r\n                            <div class=\"exel-view-column large\">{{responsibilityBulkUpload?.header.includes('Program') ?\r\n                                responsibilityBulkUpload?.header[8]?.slice(0, -1) :\r\n                                responsibilityBulkUpload?.header[5]?.slice(0, -1)}}<span class=\"required\">*</span></div>\r\n                        </div>\r\n                        <div class=\"exel-view-row multi-column\"\r\n                            [class.five-column]=\"tabType === 'frequency' || tabType === 'onCompletion'\"\r\n                            [class.three-column]=\"tabType === 'ongoing'\">\r\n                            <ng-container *ngIf=\"tabType === 'frequency'\">\r\n                                <div class=\"exel-view-column\">Frequency <span class=\"required\">*</span></div>\r\n                                <div class=\"exel-view-column\">Due Date <span class=\"info-text\">(Day)</span></div>\r\n                                <div class=\"exel-view-column\">Due Date <span class=\"info-text\">(Month)</span></div>\r\n                                <div class=\"exel-view-column\">Start <span class=\"info-text\">(No. of days before the due\r\n                                        date)</span></div>\r\n                                <div class=\"exel-view-column\">Fail <span class=\"info-text\"\r\n                                        appTooltip=\"(No. of days after the due date. Select '0' if the responsibility must be completed on the due date)\"\r\n                                        placement=\"bottom\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">(No. of\r\n                                        days after the due date. Select \"0\" if the responsibility must be completed on\r\n                                        the due date)</span></div>\r\n                            </ng-container>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"exel-view-column two-column\">\r\n                        <div class=\"exel-view-row\">\r\n                            <div class=\"exel-view-column large\">Responsibility Centre</div>\r\n                        </div>\r\n                        <div class=\"exel-view-row multi-column two-column\">\r\n                            <div class=\"exel-view-column\">Responsibility Centre Name</div>\r\n                            <div class=\"exel-view-column\">Responsibility Centre Type</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"exel-view-column\">Risk Class</div>\r\n                    <div class=\"exel-view-column\">Objective</div>\r\n                    <div class=\"exel-view-column\">Notes</div>\r\n                    <div class=\"exel-view-column\" [class.two-column]=\"true\">\r\n                        <div class=\"exel-view-row\">\r\n                            <div class=\"exel-view-column large\">Format & Evidence</div>\r\n                        </div>\r\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\" [class.three-column]=\"false\">\r\n                            <div class=\"exel-view-column\" [class.small-column]=\"true\">Format</div>\r\n                            <div class=\"exel-view-column\">Format For Responsibility (link)</div>\r\n                            <div class=\"exel-view-column\" [class.small-column]=\"true\">Evidence</div>\r\n                        </div>\r\n                    </div>\r\n                    <!-- <div class=\"exel-view-column\">Assessments or Checkpoints</div> -->\r\n                    <div class=\"exel-view-column four-column\">\r\n                        <div class=\"exel-view-row\">\r\n                            <div class=\"exel-view-column large\">Review of Responsibility</div>\r\n                        </div>\r\n                        <div class=\"exel-view-row multi-column\" [class.four-column]=\"true\">\r\n                            <div class=\"exel-view-column\">Reviewer</div>\r\n                            <div class=\"exel-view-column\">Reviewer Type\r\n                                <span class=\"info-text\">(Specify the type of reviewer flow)</span>\r\n\r\n                            </div>\r\n\r\n                            <div class=\"exel-view-column\">Review Start <span class=\"info-text\">(No. of days before the\r\n                                    due date)</span></div>\r\n                            <div class=\"exel-view-column\">Review Fail <span class=\"info-text\"\r\n                                    appTooltip=\"(No. of days after the due date. Select '0' if the responsibility must be reviewed on the due date)\"\r\n                                    placement=\"bottom\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">(No. of days\r\n                                    after the due date. Select \"0\" if the responsibility must be reviewed on the due\r\n                                    date)</span></div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"exel-view-column\" [class.two-column]=\"true\">\r\n                        <div class=\"exel-view-row\">\r\n                            <div class=\"exel-view-column large\">Overseer</div>\r\n                        </div>\r\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\r\n                            <div class=\"exel-view-column\">Always Notify</div>\r\n                            <div class=\"exel-view-column\">Notify on Failure</div>\r\n                        </div>\r\n                    </div>\r\n                    <!-- <div class=\"exel-view-column\">Overseer</div> -->\r\n\r\n                    <!-- Collaborator -->\r\n                    <div class=\"exel-view-column\">Collaborator</div>\r\n\r\n                </div>\r\n                <div class=\"exel-view-row\" *ngFor=\"let report of responsibilityBulkUpload?.reports; let i = index\">\r\n                    <div class=\"exel-view-column sl-no\" [class.error]=\"!report?.isValid\">{{i+1}}</div>\r\n                    <div class=\"exel-view-column\" [class.error]=\"!report.responsibilityName\">\r\n                        {{report?.responsibilityName}} <i *ngIf=\"!report.responsibilityName\" class=\"icons\"\r\n                            [appTooltip]=\"'Enter a name for this responsibility.'\" placement=\"bottom-right\" type=\"white\"\r\n                            delay=\"0\" [tooltipMandatory]=true>&#xe932;</i></div>\r\n                    <div class=\"exel-view-column multi-column\"\r\n                        *ngIf=\"responsibilityBulkUpload?.header.includes('Program')\" [class.error]=\"false\"\r\n                        [class.three-column]=\"true\">\r\n                        <div class=\"exel-view-row multi-column\" [class.three-column]=\"true\">\r\n                            <div class=\"exel-view-column\">{{report?.programType}}</div>\r\n                            <div class=\"exel-view-column\">{{report?.program}}</div>\r\n                            <div class=\"exel-view-column\">{{report?.programCategory}}</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"exel-view-column\">{{report?.assignor}}\r\n                    </div>\r\n                    <div class=\"exel-view-column multi-column\" [class.two-column]=\"true\">\r\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\r\n                            <div class=\"exel-view-column\"\r\n                                [class.error]=\"!report?.assignee || !report?.userValidateWithProgram?.isValidAssignee || (!report?.isValidUser)\">\r\n                                {{report?.assignee}}\r\n                                <!-- || (!report?.isValidUser) -->\r\n                                <i *ngIf=\"(!report?.assignee) || (!report?.isValidUser)\" class=\"icons\"\r\n                                    [appTooltip]=\"'Select the user responsible for completing this responsibility. '\"\r\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                                </i>\r\n                                <i *ngIf=\"(report?.assignee) && !report?.userValidateWithProgram?.isValidAssignee\"\r\n                                    class=\"icons\"\r\n                                    [appTooltip]=\"'This user is not associated with the selected Program.'\"\r\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                                </i>\r\n                            </div>\r\n                            <div class=\"exel-view-column\">{{report?.assigneeType}}</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"exel-view-column\">{{report?.keyResponsibility}}</div>\r\n                    <div class=\"exel-view-column multi-column five-column\" *ngIf=\"tabType === 'frequency'\">\r\n\r\n                        <div class=\"exel-view-row multi-column five-column\">\r\n                            <div class=\"exel-view-column\" [class.error]=\"!report?.frequency\">{{report?.frequency}}\r\n                                <i *ngIf=\"!report?.frequency\" class=\"icons\"\r\n                                    [appTooltip]=\"'Select a frequency for this responsibility.'\"\r\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                            </div>\r\n                            <div class=\"exel-view-column\" [class.error]=\"!report?.validDate || report?.isPastDate\">\r\n                                {{report?.day}}\r\n                                <i *ngIf=\"!report?.validDate\" class=\"icons\" [appTooltip]=\"'Invalid Due Date.'\"\r\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                                <i *ngIf=\"report?.isPastDate\" class=\"icons\"\r\n                                    [appTooltip]=\"'This date occurs in the past. Select a future date.'\"\r\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                            </div>\r\n                            <div class=\"exel-view-column\" [class.error]=\"!report?.validDate || report?.isPastDate\">\r\n                                {{report?.month}}\r\n                                <i *ngIf=\"!report?.validDate\" class=\"icons\" [appTooltip]=\"'Invalid Due Date.'\"\r\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                                <i *ngIf=\"report?.isPastDate\" class=\"icons\"\r\n                                    [appTooltip]=\"'This date occurs in the past. Select a future date.'\"\r\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                            </div>\r\n                            <div class=\"exel-view-column\">{{report?.responsibilityWindow}}</div>\r\n                            <div class=\"exel-view-column\">{{report?.failedAfter}}</div>\r\n                        </div>\r\n\r\n                    </div>\r\n                    <div class=\"exel-view-column multi-column two-column\">\r\n                        <div class=\"exel-view-row multi-column two-column\">\r\n                            <div class=\"exel-view-column\">{{report?.responsibilityCenter}}</div>\r\n                            <div class=\"exel-view-column\">{{report?.responsibilityCenterType}}</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"exel-view-column\">{{report?.reportClass}}</div>\r\n                    <div class=\"exel-view-column\">{{report?.objective}}</div>\r\n                    <div class=\"exel-view-column\">{{report?.notes}}</div>\r\n                    <div class=\"exel-view-column multi-column\" [class.two-column]=\"true\">\r\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\r\n                            <div class=\"exel-view-column multi-column\">\r\n                                <div class=\"exel-view-row multi-column\">\r\n                                    <div class=\"exel-view-column\" [class.small-column]=\"true\">{{report?.isFormat}}</div>\r\n                                    <a class=\"exel-view-column external-link\" [href]=\"report?.formatForResponsibility\"\r\n                                        target=\"_blank\">{{report?.formatForResponsibility}}</a>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"exel-view-column\" [class.small-column]=\"true\">\r\n                                {{report?.documentEvidenceRequired}}</div>\r\n                        </div>\r\n                    </div>\r\n                    <!-- <div class=\"exel-view-column\">{{report?.assessments}}</div> -->\r\n                    <div class=\"exel-view-column multi-column\" [class.four-column]=\"true\">\r\n                        <div class=\"exel-view-row multi-column\" [class.four-column]=\"true\">\r\n                            <div class=\"exel-view-column\" [class.error]=\"report?.reviewer && (\r\n                              !report?.userValidateWithProgram?.isValidReviewer )\">{{report?.reviewer}}\r\n\r\n                                <!-- <i *ngIf=\"(report?.reviewer && report?.reviewer === report?.assignor)\"\r\n                            class=\"icons\"\r\n                            [appTooltip]=\"((report?.assignor)?'The Assignor cannot also be the Reviewer of this responsibility.':'You cannot be a Reviewer of this responsibility since you are the assignor. ') +'Select another user as the Reviewer'\"\r\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                        </i> -->\r\n                                <i *ngIf=\"report?.reviewer && !report?.userValidateWithProgram?.isValidReviewer\"\r\n                                    class=\"icons\"\r\n                                    [appTooltip]=\"'This user is not associated with the selected Program.'\"\r\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                                </i>\r\n                            </div>\r\n                            <div class=\"exel-view-column\">{{report?.reviewerType}}</div>\r\n                            <div class=\"exel-view-column\">{{report?.reviewToBeCompletedWithin}}</div>\r\n                            <div class=\"exel-view-column\">{{report?.reviewWillBeFailedAfter}}</div>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <div class=\"exel-view-column multi-column\" [class.two-column]=\"true\">\r\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\r\n                            <div class=\"exel-view-column\" [class.error]=\"report?.overseer && (\r\n                              !report?.userValidateWithProgram?.isValidOverseer )\">\r\n                                {{report?.overseer}}\r\n\r\n                                <i *ngIf=\"(report?.overseer) && !report?.userValidateWithProgram?.isValidOverseer\"\r\n                                    class=\"icons\"\r\n                                    [appTooltip]=\"'This user is not associated with the selected Program.'\"\r\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                                </i>\r\n                            </div>\r\n                            <div class=\"exel-view-column\" [class.error]=\"report?.notifyOnFailure && (\r\n                            !report?.userValidateWithProgram?.isValidNotifyOnFailure )\">\r\n                                {{report?.notifyOnFailure}}\r\n\r\n                                <i *ngIf=\"(report?.notifyOnFailure) && !report?.userValidateWithProgram?.isValidNotifyOnFailure\"\r\n                                    class=\"icons\"\r\n                                    [appTooltip]=\"'This user is not associated with the selected Program.'\"\r\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                                </i>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <div class=\"exel-view-column\">{{report?.collaborator}}\r\n                    </div>\r\n\r\n                    <!-- <div class=\"exel-view-column\" [class.error]=\"(report?.overseer) && ((report?.overseer === report?.assignee) ||(report?.reviewer === report?.overseer) || (report?.overseer == report?.assignor) || (!report?.userValidateWithProgram?.isValidOverseer))\">\r\n                        {{report?.overseer}}\r\n                        <i *ngIf=\"(report?.overseer) && ((report?.reviewer === report?.overseer))\"\r\n                            class=\"icons\"\r\n                            [appTooltip]=\"'The Reviewer cannot also be the Overseer of this responsibility. Select another user as the Overseer.'\"\r\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                        </i>\r\n\r\n                        <i *ngIf=\"report?.overseer && (report?.overseer === report?.assignee)\" class=\"icons\"\r\n                            [appTooltip]=\"'The Assignee cannot also be the Overseer of this responsibility. Select another user as the Overseer'\"\r\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                        </i>\r\n                        <i *ngIf=\"((report?.overseer) && (report?.overseer == report?.assignor))\"\r\n                            class=\"icons\"\r\n                            [appTooltip]=\"((report?.assignor)?'The Assignor cannot also be the Overseer of this responsibility. ':'You cannot be an Overseer of this responsibility since you are the Assignor. ') +'Select another user as the Overseer.'\"\r\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                        </i>\r\n                        <i *ngIf=\"!report?.userValidateWithProgram?.isValidOverseer\"\r\n                            class=\"icons\"\r\n                            [appTooltip]=\"'Selected user is not a valid overseer for selected program.'\"\r\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                        </i>\r\n                    </div> -->\r\n                </div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n                <!-- ------------------------------------------------old code dynamic------------------------------------------------- -->\r\n\r\n                <!-- *ngFor=\"let report of responsibilityBulkUpload?.reports; let i = index\" -->\r\n            </div>\r\n        </div>\r\n        <div class=\"bulk-view-option\">\r\n            <button *ngIf=\"bulkUpload?.frequency?.reports?.length\" [class.active]=\"tabType === 'frequency'\"\r\n                (click)=\"selectedTab.emit('frequency')\">Frequency Responsibilities</button>\r\n            <button *ngIf=\"bulkUpload?.ongoing?.reports?.length\" [class.active]=\"tabType === 'ongoing'\"\r\n                (click)=\"selectedTab.emit('ongoing')\">Ongoing Responsibilities</button>\r\n            <button *ngIf=\"bulkUpload?.onCompletion?.reports?.length\" [class.active]=\"tabType === 'onCompletion'\"\r\n                (click)=\"selectedTab.emit('onCompletion')\">On Completion Responsibilities</button>\r\n        </div>\r\n        <div class=\"bulk-view-footer\">\r\n            <!-- <div class=\"left\">\r\n                <p>{{finalResponsibilities}} out of {{responsibilityBulkUpload?.reports?.length}} responsibilities will be\r\n                    uploaded.</p>\r\n            </div> -->\r\n            <div class=\"left\">\r\n                <p>{{finalResponsibilities}} out of {{responsibilityMultiTabBulkUpload?.length}}\r\n                    {{responsibilityMultiTabBulkUpload?.length > 1 ? 'responsibilities' : 'responsibility'}} will be\r\n                    uploaded.</p>\r\n            </div>\r\n            <div class=\"right\">\r\n                <button (click)=\"close()\" id=\"bulk-resp-cancel\">Cancel</button>\r\n                <button (click)=\"submit()\" id=\"bulk-resp-confirm\" [disabled]=\"!isConfirmClickable\"\r\n                    class=\"blue\">Confirm</button>\r\n                <!-- finalResponsibilities < 1 -->\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <app-loader *ngIf=\"loader\"></app-loader>\r\n\r\n</ng-container>\r\n\r\n<!-- --------------------------------------------------------------------upward is new one-------------------- -->", styles: ["@import\"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-------------------- -->\r\n<app-loader *ngIf=\"loader\"></app-loader>\r\n\r\n\r\n\r\n\r\n\r\n\r\n<!-- HTML for multiple tabs -->\r\n<ng-container *ngIf=\"responsibilityType === 'multiTab'\">\r\n    <div class=\"bulk-view\">\r\n        <div class=\"bulk-view-head\">\r\n            <h2 class=\"bulk-view-title\">\r\n                {{fileName}}\r\n            </h2>\r\n        </div>\r\n        <div class=\"bulk-view-body bulk\" [class.is-horizontally-scrolled]=\"isHorizontallyScrolled\"\r\n            (scroll)=\"onGridScroll($event)\">\r\n            <div class=\"exel-view\">\r\n                <div class=\"exel-view-row head\">\r\n                    <div class=\"exel-view-column sl-no sticky-col sticky-col-index\">#</div>\r\n                    <div class=\"exel-view-column sticky-col sticky-col-name\">Responsibility Name <span class=\"required\">*</span></div>\r\n                    <div class=\"exel-view-column\" *ngIf=\"responsibilityBulkUpload?.header.includes('Program')\"\r\n                        [class.three-column]=\"true\">\r\n                        <div class=\"exel-view-row\">\r\n                            <div class=\"exel-view-column large\">Program</div>\r\n                        </div>\r\n                        <div class=\"exel-view-row multi-column\" [class.three-column]=\"true\">\r\n                            <div class=\"exel-view-column\">Program Type</div>\r\n                            <div class=\"exel-view-column\">Program</div>\r\n                            <div class=\"exel-view-column\">Program Category</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"exel-view-column\">Entrusted By</div>\r\n                    <div class=\"exel-view-column\" [class.two-column]=\"true\">\r\n                        <div class=\"exel-view-row\">\r\n                            <div class=\"exel-view-column large\">Entrust To <span class=\"required\">*</span></div>\r\n                        </div>\r\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\r\n                            <div class=\"exel-view-column\">Person or Group<span class=\"required\">*</span></div>\r\n                            <div class=\"exel-view-column\">All or Any Persons</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"exel-view-column\">Key Responsibility?</div>\r\n                    <div class=\"exel-view-column\" *ngIf=\"tabType === 'frequency'\"\r\n                        [class.five-column]=\"!hasExtendedFrequencyColumns\"\r\n                        [class.nine-column]=\"hasExtendedFrequencyColumns\">\r\n                        <div class=\"exel-view-row\">\r\n                            <!-- <div class=\"exel-view-column large\">Frequency of Occurrence and Completion Window <span class=\"required\">*</span></div> -->\r\n                            <div class=\"exel-view-column large\">{{responsibilityBulkUpload?.header.includes('Program') ?\r\n                                responsibilityBulkUpload?.header[8]?.slice(0, -1) :\r\n                                responsibilityBulkUpload?.header[5]?.slice(0, -1)}}<span class=\"required\">*</span></div>\r\n                        </div>\r\n                        <div class=\"exel-view-row multi-column\"\r\n                            [class.five-column]=\"!hasExtendedFrequencyColumns\"\r\n                            [class.nine-column]=\"hasExtendedFrequencyColumns\">\r\n                            <ng-container *ngIf=\"tabType === 'frequency'\">\r\n                                <div class=\"exel-view-column\">Frequency <span class=\"required\">*</span></div>\r\n                                <div class=\"exel-view-column\">Due Date <span class=\"info-text\">(Day)</span></div>\r\n                                <div class=\"exel-view-column\">Due Date <span class=\"info-text\">(Month)</span></div>\r\n                                <div class=\"exel-view-column\" *ngIf=\"hasExtendedFrequencyColumns\">Due Time</div>\r\n                                <div class=\"exel-view-column\">Start <span class=\"info-text\">(No. of days before the due\r\n                                        date)</span></div>\r\n                                <div class=\"exel-view-column\">Fail <span class=\"info-text\"\r\n                                        appTooltip=\"(No. of days after the due date. Select '0' if the responsibility must be completed on the due date)\"\r\n                                        placement=\"bottom\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">(No. of\r\n                                        days after the due date. Select \"0\" if the responsibility must be completed on\r\n                                        the due date)</span></div>\r\n                                <ng-container *ngIf=\"hasExtendedFrequencyColumns\">\r\n                                    <div class=\"exel-view-column\">Responsibility Ends After Occurences <span\r\n                                            class=\"info-text\">(Number of occurrences)</span></div>\r\n                                    <div class=\"exel-view-column\">Responsibility Ends By Date <span\r\n                                            class=\"info-text\">(Day)</span></div>\r\n                                    <div class=\"exel-view-column\">Responsibility Ends By Date <span\r\n                                            class=\"info-text\">(Month)</span></div>\r\n                                </ng-container>\r\n                            </ng-container>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"exel-view-column two-column\">\r\n                        <div class=\"exel-view-row\">\r\n                            <div class=\"exel-view-column large\">Responsibility Centre</div>\r\n                        </div>\r\n                        <div class=\"exel-view-row multi-column two-column\">\r\n                            <div class=\"exel-view-column\">Responsibility Centre Name</div>\r\n                            <div class=\"exel-view-column\">Responsibility Centre Type</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"exel-view-column\">Risk Class</div>\r\n                    <div class=\"exel-view-column\">Objective</div>\r\n                    <div class=\"exel-view-column\">Notes</div>\r\n                    <div class=\"exel-view-column\" [class.two-column]=\"true\">\r\n                        <div class=\"exel-view-row\">\r\n                            <div class=\"exel-view-column large\">Format & Evidence</div>\r\n                        </div>\r\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\" [class.three-column]=\"false\">\r\n                            <div class=\"exel-view-column\" [class.small-column]=\"true\">Format</div>\r\n                            <div class=\"exel-view-column\">Format For Responsibility (link)</div>\r\n                            <div class=\"exel-view-column\" [class.small-column]=\"true\">Evidence</div>\r\n                        </div>\r\n                    </div>\r\n                    <!-- <div class=\"exel-view-column\">Assessments or Checkpoints</div> -->\r\n                    <div class=\"exel-view-column four-column\">\r\n                        <div class=\"exel-view-row\">\r\n                            <div class=\"exel-view-column large\">Review of Responsibility</div>\r\n                        </div>\r\n                        <div class=\"exel-view-row multi-column\" [class.four-column]=\"true\">\r\n                            <div class=\"exel-view-column\">Reviewer</div>\r\n                            <div class=\"exel-view-column\">Reviewer Type\r\n                                <span class=\"info-text\">(Specify the type of reviewer flow)</span>\r\n\r\n                            </div>\r\n\r\n                            <div class=\"exel-view-column\">Review Start <span class=\"info-text\">(No. of days before the\r\n                                    due date)</span></div>\r\n                            <div class=\"exel-view-column\">Review Fail <span class=\"info-text\"\r\n                                    appTooltip=\"(No. of days after the due date. Select '0' if the responsibility must be reviewed on the due date)\"\r\n                                    placement=\"bottom\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">(No. of days\r\n                                    after the due date. Select \"0\" if the responsibility must be reviewed on the due\r\n                                    date)</span></div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"exel-view-column\" [class.two-column]=\"true\">\r\n                        <div class=\"exel-view-row\">\r\n                            <div class=\"exel-view-column large\">Overseer</div>\r\n                        </div>\r\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\r\n                            <div class=\"exel-view-column\">Always Notify</div>\r\n                            <div class=\"exel-view-column\">Notify on Failure</div>\r\n                        </div>\r\n                    </div>\r\n                    <!-- <div class=\"exel-view-column\">Overseer</div> -->\r\n\r\n                    <!-- Collaborator -->\r\n                    <div class=\"exel-view-column\">Collaborator</div>\r\n\r\n                </div>\r\n                <div class=\"exel-view-row\" *ngFor=\"let report of responsibilityBulkUpload?.reports; let i = index\">\r\n                    <div class=\"exel-view-column sl-no sticky-col sticky-col-index\" [class.error]=\"!report?.isValid\">{{i+1}}</div>\r\n                    <div class=\"exel-view-column sticky-col sticky-col-name\" [class.error]=\"!report.responsibilityName\">\r\n                        {{report?.responsibilityName}} <i *ngIf=\"!report.responsibilityName\" class=\"icons\"\r\n                            [appTooltip]=\"'Enter a name for this responsibility.'\" placement=\"bottom-right\" type=\"white\"\r\n                            delay=\"0\" [tooltipMandatory]=true>&#xe932;</i></div>\r\n                    <div class=\"exel-view-column multi-column\"\r\n                        *ngIf=\"responsibilityBulkUpload?.header.includes('Program')\" [class.error]=\"false\"\r\n                        [class.three-column]=\"true\">\r\n                        <div class=\"exel-view-row multi-column\" [class.three-column]=\"true\">\r\n                            <div class=\"exel-view-column\">{{report?.programType}}</div>\r\n                            <div class=\"exel-view-column\">{{report?.program}}</div>\r\n                            <div class=\"exel-view-column\">{{report?.programCategory}}</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"exel-view-column\">{{report?.assignor}}\r\n                    </div>\r\n                    <div class=\"exel-view-column multi-column\" [class.two-column]=\"true\">\r\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\r\n                            <div class=\"exel-view-column\"\r\n                                [class.error]=\"!report?.assignee || !report?.userValidateWithProgram?.isValidAssignee || (!report?.isValidUser)\">\r\n                                {{report?.assignee}}\r\n                                <!-- || (!report?.isValidUser) -->\r\n                                <i *ngIf=\"(!report?.assignee) || (!report?.isValidUser)\" class=\"icons\"\r\n                                    [appTooltip]=\"'Select the user responsible for completing this responsibility. '\"\r\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                                </i>\r\n                                <i *ngIf=\"(report?.assignee) && !report?.userValidateWithProgram?.isValidAssignee\"\r\n                                    class=\"icons\"\r\n                                    [appTooltip]=\"'This user is not associated with the selected Program.'\"\r\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                                </i>\r\n                            </div>\r\n                            <div class=\"exel-view-column\">{{report?.assigneeType}}</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"exel-view-column\">{{report?.keyResponsibility}}</div>\r\n                    <div class=\"exel-view-column multi-column\"\r\n                        [class.five-column]=\"!hasExtendedFrequencyColumns\"\r\n                        [class.nine-column]=\"hasExtendedFrequencyColumns\"\r\n                        *ngIf=\"tabType === 'frequency'\">\r\n\r\n                        <div class=\"exel-view-row multi-column\"\r\n                            [class.five-column]=\"!hasExtendedFrequencyColumns\"\r\n                            [class.nine-column]=\"hasExtendedFrequencyColumns\">\r\n                            <div class=\"exel-view-column\" [class.error]=\"!report?.frequency\">{{report?.frequency}}\r\n                                <i *ngIf=\"!report?.frequency\" class=\"icons\"\r\n                                    [appTooltip]=\"'Select a frequency for this responsibility.'\"\r\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                            </div>\r\n                            <div class=\"exel-view-column\" [class.error]=\"!report?.validDate || report?.isPastDate\">\r\n                                {{report?.day}}\r\n                                <i *ngIf=\"!report?.validDate\" class=\"icons\" [appTooltip]=\"'Invalid Due Date.'\"\r\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                                <i *ngIf=\"report?.isPastDate\" class=\"icons\"\r\n                                    [appTooltip]=\"'This date occurs in the past. Select a future date.'\"\r\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                            </div>\r\n                            <div class=\"exel-view-column\" [class.error]=\"!report?.validDate || report?.isPastDate\">\r\n                                {{report?.month}}\r\n                                <i *ngIf=\"!report?.validDate\" class=\"icons\" [appTooltip]=\"'Invalid Due Date.'\"\r\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                                <i *ngIf=\"report?.isPastDate\" class=\"icons\"\r\n                                    [appTooltip]=\"'This date occurs in the past. Select a future date.'\"\r\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                            </div>\r\n                            <div class=\"exel-view-column\" *ngIf=\"hasExtendedFrequencyColumns\"\r\n                                [class.error]=\"!report?.isValidDueTime\">{{report?.dueTime}}\r\n                                <i *ngIf=\"!report?.isValidDueTime\" class=\"icons\"\r\n                                    [appTooltip]=\"VALIDATION_MESSAGES.DUE_TIME\"\r\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                            </div>\r\n                            <div class=\"exel-view-column\">{{report?.responsibilityWindow}}</div>\r\n                            <div class=\"exel-view-column\">{{report?.failedAfter}}</div>\r\n                            <ng-container *ngIf=\"hasExtendedFrequencyColumns\">\r\n                                <div class=\"exel-view-column\"\r\n                                    [class.error]=\"!report?.isValidEndsAfterOccurrences\">{{report?.endsAfterOccurrences}}\r\n                                    <i *ngIf=\"!report?.isValidEndsAfterOccurrences\" class=\"icons\"\r\n                                        [appTooltip]=\"report?.endsAfterOccurrencesError\"\r\n                                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                                </div>\r\n                                <div class=\"exel-view-column\"\r\n                                    [class.error]=\"!report?.isValidEndsByDateDay\">{{report?.endsByDateDay}}\r\n                                    <i *ngIf=\"!report?.isValidEndsByDateDay\" class=\"icons\"\r\n                                        [appTooltip]=\"report?.endsByDateDayError\"\r\n                                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                                </div>\r\n                                <div class=\"exel-view-column\"\r\n                                    [class.error]=\"!report?.isValidEndsByDateMonth\">{{report?.endsByDateMonth}}\r\n                                    <i *ngIf=\"!report?.isValidEndsByDateMonth\" class=\"icons\"\r\n                                        [appTooltip]=\"report?.endsByDateMonthError\"\r\n                                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                                </div>\r\n                            </ng-container>\r\n                        </div>\r\n\r\n                    </div>\r\n                    <div class=\"exel-view-column multi-column two-column\">\r\n                        <div class=\"exel-view-row multi-column two-column\">\r\n                            <div class=\"exel-view-column\">{{report?.responsibilityCenter}}</div>\r\n                            <div class=\"exel-view-column\">{{report?.responsibilityCenterType}}</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"exel-view-column\">{{report?.reportClass}}</div>\r\n                    <div class=\"exel-view-column\">{{report?.objective}}</div>\r\n                    <div class=\"exel-view-column\">{{report?.notes}}</div>\r\n                    <div class=\"exel-view-column multi-column\" [class.two-column]=\"true\">\r\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\r\n                            <div class=\"exel-view-column multi-column\">\r\n                                <div class=\"exel-view-row multi-column\">\r\n                                    <div class=\"exel-view-column\" [class.small-column]=\"true\">{{report?.isFormat}}</div>\r\n                                    <a class=\"exel-view-column external-link\" [href]=\"report?.formatForResponsibility\"\r\n                                        target=\"_blank\">{{report?.formatForResponsibility}}</a>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"exel-view-column\" [class.small-column]=\"true\">\r\n                                {{report?.documentEvidenceRequired}}</div>\r\n                        </div>\r\n                    </div>\r\n                    <!-- <div class=\"exel-view-column\">{{report?.assessments}}</div> -->\r\n                    <div class=\"exel-view-column multi-column\" [class.four-column]=\"true\">\r\n                        <div class=\"exel-view-row multi-column\" [class.four-column]=\"true\">\r\n                            <div class=\"exel-view-column\" [class.error]=\"report?.reviewer && (\r\n                              !report?.userValidateWithProgram?.isValidReviewer )\">{{report?.reviewer}}\r\n\r\n                                <!-- <i *ngIf=\"(report?.reviewer && report?.reviewer === report?.assignor)\"\r\n                            class=\"icons\"\r\n                            [appTooltip]=\"((report?.assignor)?'The Assignor cannot also be the Reviewer of this responsibility.':'You cannot be a Reviewer of this responsibility since you are the assignor. ') +'Select another user as the Reviewer'\"\r\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                        </i> -->\r\n                                <i *ngIf=\"report?.reviewer && !report?.userValidateWithProgram?.isValidReviewer\"\r\n                                    class=\"icons\"\r\n                                    [appTooltip]=\"'This user is not associated with the selected Program.'\"\r\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                                </i>\r\n                            </div>\r\n                            <div class=\"exel-view-column\">{{report?.reviewerType}}</div>\r\n                            <div class=\"exel-view-column\">{{report?.reviewToBeCompletedWithin}}</div>\r\n                            <div class=\"exel-view-column\">{{report?.reviewWillBeFailedAfter}}</div>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <div class=\"exel-view-column multi-column\" [class.two-column]=\"true\">\r\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\r\n                            <div class=\"exel-view-column\" [class.error]=\"report?.overseer && (\r\n                              !report?.userValidateWithProgram?.isValidOverseer )\">\r\n                                {{report?.overseer}}\r\n\r\n                                <i *ngIf=\"(report?.overseer) && !report?.userValidateWithProgram?.isValidOverseer\"\r\n                                    class=\"icons\"\r\n                                    [appTooltip]=\"'This user is not associated with the selected Program.'\"\r\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                                </i>\r\n                            </div>\r\n                            <div class=\"exel-view-column\" [class.error]=\"report?.notifyOnFailure && (\r\n                            !report?.userValidateWithProgram?.isValidNotifyOnFailure )\">\r\n                                {{report?.notifyOnFailure}}\r\n\r\n                                <i *ngIf=\"(report?.notifyOnFailure) && !report?.userValidateWithProgram?.isValidNotifyOnFailure\"\r\n                                    class=\"icons\"\r\n                                    [appTooltip]=\"'This user is not associated with the selected Program.'\"\r\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                                </i>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <div class=\"exel-view-column\">{{report?.collaborator}}\r\n                    </div>\r\n\r\n                    <!-- <div class=\"exel-view-column\" [class.error]=\"(report?.overseer) && ((report?.overseer === report?.assignee) ||(report?.reviewer === report?.overseer) || (report?.overseer == report?.assignor) || (!report?.userValidateWithProgram?.isValidOverseer))\">\r\n                        {{report?.overseer}}\r\n                        <i *ngIf=\"(report?.overseer) && ((report?.reviewer === report?.overseer))\"\r\n                            class=\"icons\"\r\n                            [appTooltip]=\"'The Reviewer cannot also be the Overseer of this responsibility. Select another user as the Overseer.'\"\r\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                        </i>\r\n\r\n                        <i *ngIf=\"report?.overseer && (report?.overseer === report?.assignee)\" class=\"icons\"\r\n                            [appTooltip]=\"'The Assignee cannot also be the Overseer of this responsibility. Select another user as the Overseer'\"\r\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                        </i>\r\n                        <i *ngIf=\"((report?.overseer) && (report?.overseer == report?.assignor))\"\r\n                            class=\"icons\"\r\n                            [appTooltip]=\"((report?.assignor)?'The Assignor cannot also be the Overseer of this responsibility. ':'You cannot be an Overseer of this responsibility since you are the Assignor. ') +'Select another user as the Overseer.'\"\r\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                        </i>\r\n                        <i *ngIf=\"!report?.userValidateWithProgram?.isValidOverseer\"\r\n                            class=\"icons\"\r\n                            [appTooltip]=\"'Selected user is not a valid overseer for selected program.'\"\r\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                        </i>\r\n                    </div> -->\r\n                </div>\r\n\r\n                <div class=\"exel-view-row empty-fill-row\" aria-hidden=\"true\">\r\n                    <div class=\"exel-view-column sl-no sticky-col sticky-col-index\"></div>\r\n                    <div class=\"exel-view-column sticky-col sticky-col-name\"></div>\r\n                    <div class=\"exel-view-column multi-column three-column\" *ngIf=\"hasProgramColumn\">\r\n                        <div class=\"exel-view-row multi-column three-column\">\r\n                            <div class=\"exel-view-column\"></div>\r\n                            <div class=\"exel-view-column\"></div>\r\n                            <div class=\"exel-view-column\"></div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"exel-view-column\"></div>\r\n                    <div class=\"exel-view-column multi-column two-column\">\r\n                        <div class=\"exel-view-row multi-column two-column\">\r\n                            <div class=\"exel-view-column\"></div>\r\n                            <div class=\"exel-view-column\"></div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"exel-view-column\"></div>\r\n                    <div class=\"exel-view-column multi-column\"\r\n                        [class.five-column]=\"!hasExtendedFrequencyColumns\"\r\n                        [class.nine-column]=\"hasExtendedFrequencyColumns\"\r\n                        *ngIf=\"tabType === 'frequency'\">\r\n                        <div class=\"exel-view-row multi-column\"\r\n                            [class.five-column]=\"!hasExtendedFrequencyColumns\"\r\n                            [class.nine-column]=\"hasExtendedFrequencyColumns\">\r\n                            <div class=\"exel-view-column\"></div>\r\n                            <div class=\"exel-view-column\"></div>\r\n                            <div class=\"exel-view-column\"></div>\r\n                            <div class=\"exel-view-column\" *ngIf=\"hasExtendedFrequencyColumns\"></div>\r\n                            <div class=\"exel-view-column\"></div>\r\n                            <div class=\"exel-view-column\"></div>\r\n                            <ng-container *ngIf=\"hasExtendedFrequencyColumns\">\r\n                                <div class=\"exel-view-column\"></div>\r\n                                <div class=\"exel-view-column\"></div>\r\n                                <div class=\"exel-view-column\"></div>\r\n                            </ng-container>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"exel-view-column multi-column two-column\">\r\n                        <div class=\"exel-view-row multi-column two-column\">\r\n                            <div class=\"exel-view-column\"></div>\r\n                            <div class=\"exel-view-column\"></div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"exel-view-column\"></div>\r\n                    <div class=\"exel-view-column\"></div>\r\n                    <div class=\"exel-view-column\"></div>\r\n                    <div class=\"exel-view-column multi-column two-column\">\r\n                        <div class=\"exel-view-row multi-column two-column\">\r\n                            <div class=\"exel-view-column multi-column\">\r\n                                <div class=\"exel-view-row multi-column\">\r\n                                    <div class=\"exel-view-column small-column\"></div>\r\n                                    <div class=\"exel-view-column\"></div>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"exel-view-column small-column\"></div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"exel-view-column multi-column four-column\">\r\n                        <div class=\"exel-view-row multi-column four-column\">\r\n                            <div class=\"exel-view-column\"></div>\r\n                            <div class=\"exel-view-column\"></div>\r\n                            <div class=\"exel-view-column\"></div>\r\n                            <div class=\"exel-view-column\"></div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"exel-view-column multi-column two-column\">\r\n                        <div class=\"exel-view-row multi-column two-column\">\r\n                            <div class=\"exel-view-column\"></div>\r\n                            <div class=\"exel-view-column\"></div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"exel-view-column\"></div>\r\n                </div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n                <!-- ------------------------------------------------old code dynamic------------------------------------------------- -->\r\n\r\n                <!-- *ngFor=\"let report of responsibilityBulkUpload?.reports; let i = index\" -->\r\n            </div>\r\n        </div>\r\n        <div class=\"bulk-view-option\">\r\n            <button *ngIf=\"bulkUpload?.frequency?.reports?.length\" [class.active]=\"tabType === 'frequency'\"\r\n                (click)=\"selectedTab.emit('frequency')\">Frequency Responsibilities</button>\r\n            <button *ngIf=\"bulkUpload?.ongoing?.reports?.length\" [class.active]=\"tabType === 'ongoing'\"\r\n                (click)=\"selectedTab.emit('ongoing')\">Ongoing Responsibilities</button>\r\n            <button *ngIf=\"bulkUpload?.onCompletion?.reports?.length\" [class.active]=\"tabType === 'onCompletion'\"\r\n                (click)=\"selectedTab.emit('onCompletion')\">On Completion Responsibilities</button>\r\n        </div>\r\n        <div class=\"bulk-view-footer\">\r\n            <!-- <div class=\"left\">\r\n                <p>{{finalResponsibilities}} out of {{responsibilityBulkUpload?.reports?.length}} responsibilities will be\r\n                    uploaded.</p>\r\n            </div> -->\r\n            <div class=\"left\">\r\n                <p>{{finalResponsibilities}} out of {{responsibilityMultiTabBulkUpload?.length}}\r\n                    {{responsibilityMultiTabBulkUpload?.length > 1 ? 'responsibilities' : 'responsibility'}} will be\r\n                    uploaded.</p>\r\n            </div>\r\n            <div class=\"right\">\r\n                <button (click)=\"close()\" id=\"bulk-resp-cancel\">Cancel</button>\r\n                <button (click)=\"submit()\" id=\"bulk-resp-confirm\" [disabled]=\"!isConfirmClickable\"\r\n                    class=\"blue\">Confirm</button>\r\n                <!-- finalResponsibilities < 1 -->\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <app-loader *ngIf=\"loader\"></app-loader>\r\n\r\n</ng-container>\r\n\r\n<!-- --------------------------------------------------------------------upward is new one-------------------- -->", styles: ["@import\"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.sticky-col{position:sticky;z-index:2;background:#fff}.bulk-view-body .exel-view-column.sticky-col-index{left:0;z-index:3;background:#f1f1f1}.bulk-view-body .exel-view-column.sticky-col-name{left:60px}.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:#f5d6d7;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.is-horizontally-scrolled .sticky-col-name{box-shadow:6px 0 8px -4px #161b2f29}.bulk-view-body.bulk .exel-view{display:flex;flex-direction:column;width:max-content;min-width:100%;min-height:100%}.bulk-view-body.bulk .exel-view-row{width:max-content;min-width:100%}.bulk-view-body.bulk .exel-view-row.head{position:sticky;top:0;z-index:4}.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.sticky-col{background:#f1f1f1;z-index:5}.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,.bulk-view-body.bulk .exel-view-row.nine-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-body.bulk .exel-view-column.nine-column{width:1800px;min-width:1800px!important}.bulk-view-body.bulk .exel-view .empty-fill-row{flex:1 1 auto;min-height:32px;align-items:stretch}.bulk-view-body.bulk .exel-view .empty-fill-row .exel-view-column{min-height:100%;background-color:#fff;background-image:repeating-linear-gradient(to bottom,#fff 0 31px,#dcdcdc 31px 32px);background-repeat:repeat-y;background-size:100% 32px}.bulk-view-body.bulk .exel-view .empty-fill-row .exel-view-column.multi-column{background-image:none;background-color:transparent}.bulk-view-body.bulk .exel-view .empty-fill-row .exel-view-column.sticky-col-index,.bulk-view-body.bulk .exel-view .empty-fill-row .exel-view-column.sl-no{background-color:#f1f1f1;background-image:repeating-linear-gradient(to bottom,#f1f1f1 0 31px,#dcdcdc 31px 32px)}.bulk-view-body.bulk .exel-view .empty-fill-row .exel-view-row{height:100%;align-items:stretch}.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: [{
@@ -47703,6 +47721,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 const REGEX = {
     MONTH: /^[A-Za-z]+'\d{2}$/,
+    DUE_TIME: /^(1[0-2]|[1-9]):(00|30) (AM|PM)$/,
+    ENDS_BY_DATE_MONTH: /^(January|February|March|April|May|June|July|August|September|October|November|December)'(\d{2})$/,
 };
 
 class AddMultipleResponsibilityWithTabComponent {
@@ -47936,6 +47956,9 @@ class AddMultipleResponsibilityWithTabComponent {
         }
         responsibilityBulkUpload.header = cloneDeep$1(data[2]);
         responsibilityBulkUpload.subHeading = cloneDeep$1(data[3]);
+        const hasExtendedFrequencyColumns = this.detectExtendedFrequencyColumns(responsibilityBulkUpload.header, responsibilityBulkUpload.subHeading);
+        responsibilityBulkUpload.hasExtendedFrequencyColumns =
+            hasExtendedFrequencyColumns;
         data = data.slice(5);
         if (this.member_obj_id != this.templateInfo.memberId) {
             this.errorMessage =
@@ -47958,11 +47981,13 @@ class AddMultipleResponsibilityWithTabComponent {
             }
             /* Pushing the report details into the bulkUpload object as per tab tabs */
             if (sheet?.toLowerCase() === 'frequency responsibilities') {
-                responsibilityBulkUpload.reports.push(this.setReportDetails(report, 'frequency', responsibilityBulkUpload.header[1] === 'Program' ? true : false));
+                responsibilityBulkUpload.reports.push(this.setReportDetails(report, 'frequency', responsibilityBulkUpload.header[1] === 'Program' ? true : false, hasExtendedFrequencyColumns));
                 this.bulkUpload.frequency.header = responsibilityBulkUpload?.header;
                 this.bulkUpload.frequency.subHeading =
                     responsibilityBulkUpload?.subHeading;
                 this.bulkUpload.frequency.reports = responsibilityBulkUpload?.reports;
+                this.bulkUpload.frequency.hasExtendedFrequencyColumns =
+                    hasExtendedFrequencyColumns;
             }
             if (sheet?.toLowerCase() === 'ongoing responsibilities') {
                 responsibilityBulkUpload.reports.push(this.setReportDetails(report, 'ongoing', responsibilityBulkUpload.header[1] === 'Program' ? true : false));
@@ -48536,6 +48561,73 @@ class AddMultipleResponsibilityWithTabComponent {
                 break;
         }
     }
+    /**
+     * Detects the four frequency columns added to the latest xlsx template:
+     * Due Time, Ends After Occurrences, Ends By Date (Day), Ends By Date (Month).
+     * Older templates without these columns keep the original column mapping.
+     */
+    detectExtendedFrequencyColumns(header = [], subHeading = []) {
+        const cells = [...(header || []), ...(subHeading || [])];
+        return cells.some((cell) => {
+            if (typeof cell !== 'string') {
+                return false;
+            }
+            const normalized = cell.toLowerCase().replace(/\s+/g, ' ');
+            return (normalized.includes('due time') ||
+                normalized.includes('responsibility ends after') ||
+                normalized.includes('responsibility ends by date'));
+        });
+    }
+    /**
+     * Remaps frequency columns when the uploaded file includes the four new fields,
+     * so later columns (RC, reviewer, etc.) stay aligned. Ongoing/onCompletion are unchanged.
+     */
+    applyExtendedFrequencyColumns(obj, report, isProgram) {
+        if (isProgram) {
+            obj.dueTime = report[11];
+            obj.responsibilityWindow = report[12];
+            obj.failedAfter = report[13];
+            obj.endsAfterOccurrences = report[14];
+            obj.endsByDateDay = report[15];
+            obj.endsByDateMonth = report[16];
+            obj.responsibilityCenter = report[17];
+            obj.responsibilityCenterType = report[18];
+            obj.reportClass = report[19];
+            obj.objective = report[20];
+            obj.notes = report[21];
+            obj.isFormat = report[22];
+            obj.formatForResponsibility = report[23];
+            obj.documentEvidenceRequired = report[24];
+            obj.reviewer = report[25];
+            obj.reviewerType = report[26];
+            obj.reviewToBeCompletedWithin = report[27];
+            obj.reviewWillBeFailedAfter = report[28];
+            obj.overseer = report[29];
+            obj.notifyOnFailure = report[30];
+            obj.collaborator = report[31];
+        }
+        else {
+            obj.dueTime = report[8];
+            obj.responsibilityWindow = report[9];
+            obj.failedAfter = report[10];
+            obj.endsAfterOccurrences = report[11];
+            obj.endsByDateDay = report[12];
+            obj.endsByDateMonth = report[13];
+            obj.responsibilityCenter = report[14];
+            obj.reportClass = report[15];
+            obj.objective = report[16];
+            obj.notes = report[17];
+            obj.isFormat = report[18];
+            obj.formatForResponsibility = report[19];
+            obj.documentEvidenceRequired = report[20];
+            obj.reviewer = report[21];
+            obj.reviewToBeCompletedWithin = report[22];
+            obj.reviewWillBeFailedAfter = report[23];
+            obj.overseer = report[24];
+            obj.notifyOnFailure = report[25];
+            obj.collaborator = report[26];
+        }
+    }
     /**
      * It takes in a report, a tab type, and a boolean value. It then returns an object with a bunch of
      * properties.
@@ -48543,9 +48635,10 @@ class AddMultipleResponsibilityWithTabComponent {
      * @param {any} report - any =&gt; the array of data
      * @param {string} tabType - string - this is the type of tab that is selected.
      * @param {boolean} isProgram - boolean
+     * @param {boolean} hasExtendedFrequencyColumns - whether the xlsx includes the four new frequency columns
      * @returns An object with the following properties:
      */
-    setReportDetails(report, tabType, isProgram) {
+    setReportDetails(report, tabType, isProgram, hasExtendedFrequencyColumns = false) {
         let obj;
         switch (tabType) {
             case 'frequency': {
@@ -48583,6 +48676,9 @@ class AddMultipleResponsibilityWithTabComponent {
                         notifyOnFailure: report[26],
                         collaborator: report[27],
                     };
+                    if (hasExtendedFrequencyColumns) {
+                        this.applyExtendedFrequencyColumns(obj, report, true);
+                    }
                     obj['isValidData'] = this.isValidData(obj);
                     obj['isValidUser'] = this.returnIds(obj?.assignee, 'entrusted_to')
                         ? true
@@ -48592,6 +48688,10 @@ class AddMultipleResponsibilityWithTabComponent {
                     obj['isDateFormatInvalid'] = this.isDateFormatInvalid;
                     obj['isDayInvalid'] = this.isDayInvalid;
                     obj['isPastDate'] = this.isPastDate(obj?.day, obj?.month);
+                    obj['isValidDueTime'] = this.isValidDueTime(obj?.dueTime, hasExtendedFrequencyColumns);
+                    obj['endsAfterOccurrencesError'] = this.getEndsAfterOccurrencesError(obj?.endsAfterOccurrences, hasExtendedFrequencyColumns);
+                    obj['isValidEndsAfterOccurrences'] = !obj['endsAfterOccurrencesError'];
+                    this.applyEndsByDateValidation(obj, hasExtendedFrequencyColumns);
                     obj['isValid'] =
                         obj['isValidData'] &&
                             obj['validDate'] &&
@@ -48599,7 +48699,10 @@ class AddMultipleResponsibilityWithTabComponent {
                             obj?.frequency?.length &&
                             !Object.values(obj['userValidateWithProgram']).includes(false) &&
                             obj['isValidUser'] &&
-                            this.isValidRiskClass(obj?.reportClass);
+                            this.isValidRiskClass(obj?.reportClass) &&
+                            obj['isValidDueTime'] &&
+                            obj['isValidEndsAfterOccurrences'] &&
+                            obj['isValidEndsByDate'];
                     return obj;
                 }
                 else {
@@ -48631,6 +48734,9 @@ class AddMultipleResponsibilityWithTabComponent {
                         notifyOnFailure: report[21],
                         collaborator: report[22],
                     };
+                    if (hasExtendedFrequencyColumns) {
+                        this.applyExtendedFrequencyColumns(obj, report, false);
+                    }
                     obj['isValidData'] = this.isValidData(obj);
                     obj['userValidateWithProgram'] = this.validateDataWithProgram(obj);
                     obj['isValidUser'] = this.returnIds(obj?.assignee, 'entrusted_to')
@@ -48638,13 +48744,20 @@ class AddMultipleResponsibilityWithTabComponent {
                         : false;
                     obj['validDate'] = this.compareWithCurrentDate(obj?.day, obj?.month);
                     obj['isPastDate'] = this.isPastDate(obj?.day, obj?.month);
+                    obj['isValidDueTime'] = this.isValidDueTime(obj?.dueTime, hasExtendedFrequencyColumns);
+                    obj['endsAfterOccurrencesError'] = this.getEndsAfterOccurrencesError(obj?.endsAfterOccurrences, hasExtendedFrequencyColumns);
+                    obj['isValidEndsAfterOccurrences'] = !obj['endsAfterOccurrencesError'];
+                    this.applyEndsByDateValidation(obj, hasExtendedFrequencyColumns);
                     obj['isValid'] =
                         obj['isValidData'] &&
                             obj['validDate'] &&
                             !obj['isPastDate'] &&
                             obj?.frequency?.length &&
                             obj['isValidUser'] &&
-                            this.isValidRiskClass(obj?.reportClass);
+                            this.isValidRiskClass(obj?.reportClass) &&
+                            obj['isValidDueTime'] &&
+                            obj['isValidEndsAfterOccurrences'] &&
+                            obj['isValidEndsByDate'];
                     return obj;
                 }
                 break;
@@ -48823,6 +48936,162 @@ class AddMultipleResponsibilityWithTabComponent {
             return true;
         return RISK_CLASS_LIST.includes(riskClass?.toLowerCase());
     }
+    isValidDueTime(dueTime, hasExtendedFrequencyColumns = false) {
+        if (!hasExtendedFrequencyColumns) {
+            return true;
+        }
+        const value = this.normalizeDueTime(dueTime);
+        if (!value) {
+            return true;
+        }
+        return REGEX.DUE_TIME.test(value);
+    }
+    /**
+     * Optional field. When filled, the value must be numeric and greater than 0.
+     */
+    getEndsAfterOccurrencesError(value, hasExtendedFrequencyColumns = false) {
+        if (!hasExtendedFrequencyColumns) {
+            return '';
+        }
+        if (value == null || String(value).trim() === '') {
+            return '';
+        }
+        const normalized = String(value).trim();
+        if (!/^-?\d+(\.\d+)?$/.test(normalized)) {
+            return VALIDATION_MESSAGES.ENDS_AFTER_OCCURRENCES_NUMERIC;
+        }
+        if (Number(normalized) <= 0) {
+            return VALIDATION_MESSAGES.ENDS_AFTER_OCCURRENCES_GREATER_THAN_ZERO;
+        }
+        return '';
+    }
+    applyEndsByDateValidation(obj, hasExtendedFrequencyColumns = false) {
+        const validation = this.getEndsByDateValidation(obj?.endsByDateDay, obj?.endsByDateMonth, hasExtendedFrequencyColumns, obj?.endsAfterOccurrences);
+        obj['endsByDateDayError'] = validation.dayError;
+        obj['endsByDateMonthError'] = validation.monthError;
+        obj['isValidEndsByDateDay'] = !validation.dayError;
+        obj['isValidEndsByDateMonth'] = !validation.monthError;
+        obj['isValidEndsByDate'] = validation.isValid;
+    }
+    hasValue(value) {
+        return value != null && String(value).trim() !== '';
+    }
+    /**
+     * Optional unless either day or month is filled. Cannot be used together with Ends After Occurrences.
+     * Day must be numeric, greater than 0, and at most 31. Month must be full month name + ' + two-digit
+     * year (January'28). Combined date must exist, including leap-year February 29.
+     */
+    getEndsByDateValidation(day, month, hasExtendedFrequencyColumns = false, endsAfterOccurrences) {
+        const valid = { isValid: true, dayError: '', monthError: '' };
+        if (!hasExtendedFrequencyColumns) {
+            return valid;
+        }
+        const dayValue = day == null ? '' : String(day).trim();
+        const monthValue = month == null ? '' : String(month).trim();
+        if (!dayValue && !monthValue) {
+            return valid;
+        }
+        if (this.hasValue(endsAfterOccurrences) && (dayValue || monthValue)) {
+            return {
+                isValid: false,
+                dayError: dayValue ? VALIDATION_MESSAGES.ENDS_BY_DATE_CONFLICT : '',
+                monthError: monthValue ? VALIDATION_MESSAGES.ENDS_BY_DATE_CONFLICT : '',
+            };
+        }
+        if (!dayValue || !monthValue) {
+            return {
+                isValid: false,
+                dayError: VALIDATION_MESSAGES.ENDS_BY_DATE_INCOMPLETE,
+                monthError: VALIDATION_MESSAGES.ENDS_BY_DATE_INCOMPLETE,
+            };
+        }
+        const dayError = this.getEndsByDateDayError(dayValue);
+        const monthError = this.getEndsByDateMonthError(monthValue);
+        if (dayError || monthError) {
+            return {
+                isValid: false,
+                dayError,
+                monthError,
+            };
+        }
+        if (!this.isValidEndsByCalendarDate(dayValue, monthValue)) {
+            return {
+                isValid: false,
+                dayError: VALIDATION_MESSAGES.ENDS_BY_DATE_INVALID_VALUE,
+                monthError: VALIDATION_MESSAGES.ENDS_BY_DATE_INVALID_VALUE,
+            };
+        }
+        if (this.isEndsByDateInPast(dayValue, monthValue)) {
+            return {
+                isValid: false,
+                dayError: VALIDATION_MESSAGES.ENDS_BY_DATE_PAST,
+                monthError: VALIDATION_MESSAGES.ENDS_BY_DATE_PAST,
+            };
+        }
+        return valid;
+    }
+    getEndsByDateDayError(day) {
+        if (!/^-?\d+(\.\d+)?$/.test(day)) {
+            return VALIDATION_MESSAGES.ENDS_BY_DATE_INVALID_VALUE;
+        }
+        const dayNumber = Number(day);
+        if (dayNumber <= 0 || dayNumber > 31) {
+            return VALIDATION_MESSAGES.ENDS_BY_DATE_INVALID_VALUE;
+        }
+        return '';
+    }
+    getEndsByDateMonthError(month) {
+        if (!REGEX.ENDS_BY_DATE_MONTH.test(month)) {
+            return VALIDATION_MESSAGES.ENDS_BY_DATE_INVALID_VALUE;
+        }
+        return '';
+    }
+    isValidEndsByCalendarDate(day, month) {
+        const monthMatch = month.match(REGEX.ENDS_BY_DATE_MONTH);
+        if (!monthMatch) {
+            return false;
+        }
+        const monthIndex = FULL_MONTH_NAMES.indexOf(monthMatch[1]);
+        const year = 2000 + Number(monthMatch[2]);
+        const dayNumber = Number(day);
+        if (!Number.isInteger(dayNumber)) {
+            return false;
+        }
+        const date = new Date(year, monthIndex, dayNumber);
+        return (date.getFullYear() === year &&
+            date.getMonth() === monthIndex &&
+            date.getDate() === dayNumber);
+    }
+    isEndsByDateInPast(day, month) {
+        const monthMatch = month.match(REGEX.ENDS_BY_DATE_MONTH);
+        if (!monthMatch) {
+            return false;
+        }
+        const monthIndex = FULL_MONTH_NAMES.indexOf(monthMatch[1]);
+        const year = 2000 + Number(monthMatch[2]);
+        const dayNumber = Number(day);
+        const endsByDate = new Date(year, monthIndex, dayNumber);
+        endsByDate.setHours(0, 0, 0, 0);
+        const today = new Date();
+        today.setHours(0, 0, 0, 0);
+        return endsByDate < today;
+    }
+    normalizeDueTime(dueTime) {
+        if (dueTime == null || dueTime === '') {
+            return '';
+        }
+        let value = String(dueTime).trim().replace(/\s+/g, ' ');
+        value = value.replace(/^(\d{1,2}):(\d{2}):\d{2}\s*(AM|PM)$/i, '$1:$2 $3');
+        const match = value.match(/^(\d{1,2}):(\d{2})\s*(AM|PM)$/i);
+        if (!match) {
+            return value;
+        }
+        let hour = Number(match[1]);
+        if (hour === 0) {
+            hour = 12;
+        }
+        return `${hour}:${match[2]} ${match[3].toUpperCase()}`;
+    }
     /**
      * It takes a string, removes all whitespace, and returns the string
      * @param {any} name - the name of the responsibility