@rangertechnologies/fusion-ui 0.1.7 → 0.1.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -5908,7 +5908,16 @@ var DataTableComponent = class DataTableComponent {
|
|
|
5908
5908
|
return this._filterColumns;
|
|
5909
5909
|
}
|
|
5910
5910
|
tableSaveButton = false;
|
|
5911
|
-
|
|
5911
|
+
_stickyColumn = false;
|
|
5912
|
+
set stickyColumn(val) {
|
|
5913
|
+
if (Array.isArray(val)) {
|
|
5914
|
+
this.stickyColumns = val;
|
|
5915
|
+
this._stickyColumn = val.length > 0;
|
|
5916
|
+
} else this._stickyColumn = !!val;
|
|
5917
|
+
}
|
|
5918
|
+
get stickyColumn() {
|
|
5919
|
+
return this.stickyColumns?.length > 0 ? this.stickyColumns : this._stickyColumn;
|
|
5920
|
+
}
|
|
5912
5921
|
tableWidth = "100%";
|
|
5913
5922
|
actionColumHeader = "APP.ACTION";
|
|
5914
5923
|
multipleFilter;
|
|
@@ -5981,6 +5990,7 @@ var DataTableComponent = class DataTableComponent {
|
|
|
5981
5990
|
return this.tableSaveButton;
|
|
5982
5991
|
}
|
|
5983
5992
|
isAttendanceTable = false;
|
|
5993
|
+
isLoading = false;
|
|
5984
5994
|
dateEmit = new EventEmitter();
|
|
5985
5995
|
selectedValues = new EventEmitter();
|
|
5986
5996
|
tableRowClick = new EventEmitter();
|
|
@@ -6060,7 +6070,13 @@ var DataTableComponent = class DataTableComponent {
|
|
|
6060
6070
|
infoData;
|
|
6061
6071
|
infoSidescreen = false;
|
|
6062
6072
|
prevSearch;
|
|
6063
|
-
|
|
6073
|
+
loaderLoadingStates = {};
|
|
6074
|
+
get isTableLoading() {
|
|
6075
|
+
if (this.isLoading === true) return true;
|
|
6076
|
+
if (this.tableId && this.loaderLoadingStates?.[this.tableId]?.length > 0) return true;
|
|
6077
|
+
if (this.tableId && typeof this.isLoading === "object" && this.isLoading?.[this.tableId]?.length > 0) return true;
|
|
6078
|
+
return false;
|
|
6079
|
+
}
|
|
6064
6080
|
activeColumn = null;
|
|
6065
6081
|
scrollSubscription;
|
|
6066
6082
|
tablePageSubscription;
|
|
@@ -6091,7 +6107,7 @@ var DataTableComponent = class DataTableComponent {
|
|
|
6091
6107
|
this.timeColumns = Array.isArray(this.timeColumns) ? this.timeColumns : [];
|
|
6092
6108
|
this.sideScreenColumn = Array.isArray(this.sideScreenColumn) ? this.sideScreenColumn : [];
|
|
6093
6109
|
this.objectColumns = Array.isArray(this.objectColumns) ? this.objectColumns : [];
|
|
6094
|
-
if (changes["buttonLoadingSpinner"] || changes["tableSaveLoadingSpinner"]) this.cdr.markForCheck();
|
|
6110
|
+
if (changes["buttonLoadingSpinner"] || changes["tableSaveLoadingSpinner"] || changes["isLoading"]) this.cdr.markForCheck();
|
|
6095
6111
|
if (changes["month"]?.currentValue) this.selectedMonth = this.getMonthNumber(changes["month"]?.currentValue);
|
|
6096
6112
|
if (changes["year"]?.currentValue) this.selectedYear = Number(changes["year"]?.currentValue) || this.selectedYear;
|
|
6097
6113
|
if (changes["headerLabels"] || changes["displayedColumns"]) this.updateDateLookups();
|
|
@@ -6146,7 +6162,8 @@ var DataTableComponent = class DataTableComponent {
|
|
|
6146
6162
|
if (position > 0) this.searchFilter = false;
|
|
6147
6163
|
});
|
|
6148
6164
|
this.loaderService.loading.subscribe((loadingStates) => {
|
|
6149
|
-
this.
|
|
6165
|
+
this.loaderLoadingStates = loadingStates;
|
|
6166
|
+
if (typeof this.isLoading === "object") this.isLoading = loadingStates;
|
|
6150
6167
|
this.cdr.markForCheck();
|
|
6151
6168
|
});
|
|
6152
6169
|
this.dataSource = new MatTableDataSource(this.data);
|
|
@@ -6796,6 +6813,7 @@ var DataTableComponent = class DataTableComponent {
|
|
|
6796
6813
|
defaultWorkingHours: "defaultWorkingHours",
|
|
6797
6814
|
saveLOP: "saveLOP",
|
|
6798
6815
|
isAttendanceTable: "isAttendanceTable",
|
|
6816
|
+
isLoading: "isLoading",
|
|
6799
6817
|
exportButtonLoadingSpinner: "exportButtonLoadingSpinner",
|
|
6800
6818
|
pageTotal: "pageTotal",
|
|
6801
6819
|
deleteModal: "deleteModal"
|
|
@@ -6881,7 +6899,7 @@ var DataTableComponent = class DataTableComponent {
|
|
|
6881
6899
|
],
|
|
6882
6900
|
usesOnChanges: true,
|
|
6883
6901
|
ngImport: i0,
|
|
6884
|
-
template: "<div class=\"table-layout\" [id]=\"tableId\" style=\"padding-top: 1px;\">\n <div>\n <!-- SK30JAN25 title added -->\n <div class=\"d-flex justify-content-center table-title align-text-center\">\n {{title}}\n </div>\n \n <div class=\"flex justify-content-between\" style=\"padding-bottom: 5px;\">\n <div class=\"d-flex align-items-center\">\n <!-- MR 09NOV26 table-toolbar-left projection slot -->\n <ng-content select=\"[table-toolbar-left]\"></ng-content>\n\n <!-- MR 09NOV26 Month / Year Picker -->\n <div class=\"picker-container\" *ngIf=\"monthArray && monthArray.length > 0\">\n <i class=\"arrow-btn fusion-icon fusion-icon-size-lg fusion-icon-arrow-left-1 nav-icon\"\n (click)=\"prevMonth()\" style=\"color: var(--fc-text-color-dark, #000000) !important;\"></i>\n <span class=\"month-label\" (click)=\"togglePopup()\">\n {{ months[selectedMonth] }} {{ selectedYear }}\n </span>\n <i class=\"arrow-btn fusion-icon fusion-icon-size-lg fusion-icon-arrow-right-1 nav-icon\"\n (click)=\"nextMonth()\" style=\"color: var(--fc-text-color-dark, #000000) !important;\"></i>\n </div>\n <div class=\"popup\" *ngIf=\"popupOpen\">\n <div class=\"year-section\">\n <i class=\"fusion-icon fusion-icon-size-lg fusion-icon-arrow-left-1 nav-icon\" (click)=\"changeYear(-1)\"\n style=\"color: var(--fc-text-color-dark, #000000) !important;\"></i>\n <span>{{ selectedYear }}</span>\n <i class=\"fusion-icon fusion-icon-size-lg fusion-icon-arrow-right-1 nav-icon\" (click)=\"changeYear(1)\"\n style=\"color: var(--fc-text-color-dark, #000000) !important;\"></i>\n </div>\n\n <div class=\"month-grid\">\n <div class=\"month-item\" *ngFor=\"let m of (monthArray || months); let i = index\" [class.active]=\"i === selectedMonth\"\n (click)=\"selectMonth(i)\">\n {{ m | slice:0:3 }}\n </div>\n </div>\n </div>\n\n <div *ngIf=\"dateDropdown \">\n <app-drop-down class=\"field-input\" [lists]='dropdownLists' dropDownHeight=\"38px\" dropDownWidth=\"200px\"\n (dataEmit)=\"dropdownEmitFunction($event)\" [selectedData]=\"dropdownSelectedData\"></app-drop-down>\n </div>\n <!-- SC11NOV2025 if isDatePicker is true then show the date picker -->\n <div *ngIf=\"isDatePicker\">\n <app-drop-down [lists]='list' [selectedData]=\"selectedData\" dropDownHeight=\"42px\" dropFontWeight=\"500\"\n dropFontSize=\"12px\" dropFontColor=\"#434555\" dropBorderRadius=\"5px\" dropDownWidth=\"200px\"\n (dataEmit)=\"dateFilter($event)\"></app-drop-down>\n </div>\n </div>\n <!-- SKS24JAN25 show Nos in table -->\n <!-- <div style=\"display: flex; align-items: center;\">\n <p *ngIf=\"totalRecords || totalCount\" style=\"font-weight: var(--fw-500); margin-right: 5px; margin-bottom: 0px;\">{{'APP.NOS' | customTranslate : 'Nos'}} </p> <span style=\"color: var(--fc-primary-color, rgb(43, 87, 249));\">{{totalRecords || totalCount}}</span>\n </div> -->\n <!-- SKS24JAN25 search bar config and nonconfig -->\n <div style=\"margin-left:auto;\">\n <div class=\"flex\" style=\"align-items: center;\">\n <!-- MR 09NOV26 table-toolbar-right projection slot -->\n <ng-content select=\"[table-toolbar-right]\"></ng-content>\n\n <!-- MR 09NOV26 Sandwich leave check button -->\n <button *ngIf=\"isSandwichLeave && isCheckButton !== false\" class=\"btn btn-primary me-2\"\n (click)=\"confirmModal = true\">\n {{ 'APP_HRM_ATTENDANCE.CHECK' | customTranslate : 'Check' }}\n </button>\n\n <div class=\"search\">\n <div class=\"search-bar\">\n <img class=\"card-btn\" src=\"../assets/images/icons/general/Search.svg\">\n <input type=\"text\" placeholder=\"{{ 'APP.SEARCH' | customTranslate : 'Search' }}\" matInput\n (keyup)=\"searchConfigs ? emptySearch($event) : applyFilter($event)\"\n [value]=\" (searchConfigs || searchTextValue) ? searchBoxValue || '' : '' \" #input\n style=\"font-size: 13px !important;\">\n <img *ngIf=\"searchConfigs && searchBar\" (click)=\"onSearch(input.value)\"\n src=\"../assets/images/icons/general/configSearch.svg\" class=\"configSearch\">\n </div>\n </div>\n\n <!-- MR 09NOV26 Single toolbar button support from second-data-table -->\n <div class=\"flex\" *ngIf=\"button\">\n <app-fusion-button class=\"data-table-fsbtn ms-2 me-2\" (buttonClickEmit)=\"commonButtonClick($event, button)\"\n [buttonType]=\"button?.class || button?.buttonType\" [buttonValue]=\"button?.namePath || button?.labelPath || button?.name | customTranslate : button?.label || button?.name\"\n [buttonConfig]=\"button?.buttonConfig\" [type]=\"button?.type\" [fcBtnIconLeftSrc]=\"button?.btnIconLeftSrc || button?.fcBtnIconLeftSrc\"\n [isImageSvg]=\"button?.isImageSvg\">\n </app-fusion-button>\n </div>\n\n <!-- SKS24JAN25 single, group and dropdown dynamic buttons -->\n <div class=\"flex\" *ngIf=\"isButtons\" style=\"padding-left: 7px;\">\n <div class=\"flex\" *ngFor=\"let button of buttonArray\">\n <app-fusion-button class=\"data-table-fsbtn\" [buttonDisable]=\"button.buttonDisable\"\n [buttonLoadingSpinner]=\"buttonLoadingSpinner\" (buttonClickEmit)=\"commonButtonClick($event,button)\"\n [buttonType]=\"button.label === 'Export' ? 'grey-border rounded-3 bg-white text-dark' : button.class\"\n [buttonValue]=\"button.labelPath || button.namePath || button.name | customTranslate : button.label || button.name\"\n [buttonConfig]=\"button.buttonConfig\" [type]=\"button.type\" class=\"ms-2 me-2\"\n [fcBtnIconLeftSrc]=\"button.label === 'Export' ? '../assets/images/icons/general/upload-icon.svg' : button.fcBtnIconLeftSrc\" [isImageSvg]=\"button.label === 'Export' ? true : button.isImageSvg\">\n <!--SKS25OCT24 If the value is 'Import' or 'Export', this button does not work-->\n </app-fusion-button>\n </div>\n </div>\n \n </div>\n\n <!-- SK23FEB24 for adding new record in table -->\n <div class=\"flex cursor-pointer\" *ngIf=\"addInlineRecord\" (click)=\"addTableRecord(inlineElement)\"\n [matTooltip]=\"'APP.ADD_NEW_RECORD' | customTranslate : 'Add New Record'\">\n <div class=\"ms-1 me-1\">\n <!-- MR 30OCT26 Refactor inline html template styling to theme tokens -->\n <i class=\"fusion-icon fusion-icon-size-lg fusion-icon-add-square nav-icon\"\n style=\"color: var(--fb-text-primary, #0f172a) !important;\"></i>\n </div>\n </div>\n </div>\n </div>\n\n <!-- MR 09NOV26 Migration of Datatables and Tier 1 Primitives to fusion-ui: Attendance Top Legend Bar -->\n <div class=\"d-flex justify-content-between align-items-center top-legend-bar\" *ngIf=\"isAttendanceTable || displayedColumns.includes('employeeDetail') || (monthArray && monthArray.length > 0)\">\n <div class=\"d-flex align-items-center gap-3 flex-wrap\">\n <div class=\"d-flex align-items-center gap-1\">\n <span class=\"attendance-chip attendance-present\">✓</span>\n <span class=\"legend-text\">{{ 'APP_HRM_ATTENDANCE_TABLE.PREsENT' | customTranslate : 'Present' }}</span>\n </div>\n <div class=\"d-flex align-items-center gap-1\">\n <span class=\"attendance-chip attendance-absent\">✕</span>\n <span class=\"legend-text\">{{ 'APP_HRM_ATTENDANCE_TABLE.ABSENT' | customTranslate : 'Absent' }}</span>\n </div>\n <div class=\"d-flex align-items-center gap-1\">\n <span class=\"attendance-chip attendance-half\">½</span>\n <span class=\"legend-text\">{{ 'APP_HRM_ATTENDANCE_TABLE.HALF_DAY' | customTranslate : 'Half day' }}</span>\n </div>\n <div class=\"d-flex align-items-center gap-1\">\n <span class=\"attendance-chip attendance-holiday\">H</span>\n <span class=\"legend-text\">{{ 'APP_HRM_ATTENDANCE_TABLE.HOLIDAY' | customTranslate : 'Holiday' }}</span>\n </div>\n <div class=\"d-flex align-items-center gap-1\">\n <span class=\"attendance-chip attendance-weekoff\">-</span>\n <span class=\"legend-text\">{{ 'APP_HRM_ATTENDANCE_TABLE.WEEK_OFF' | customTranslate : 'Week Off' }}</span>\n </div>\n </div>\n <div class=\"table-subtitle\" *ngIf=\"titleOn && title\">\n {{ title | customTranslate : title }}\n </div>\n </div>\n\n <div class=\"table-margin\">\n <div class=\"table-container\" cdkScrollable> <!-- SKS3FEB25 The search filter closes when scrolling the table-->\n <!-- MSM28JAN25 skeleton loader condition --> \n <ng-container *ngIf=\"!isLoading[tableId] || isLoading[tableId]?.length === 0; else loadingTemplate\">\n <table mat-table [dataSource]=\"dataSource || []\" [ngStyle]=\"{ width: tableWidth }\" matSort>\n <!-- Checkbox Columns -->\n <ng-container [sticky]=\"true\" class=\"checkboxCol\" *ngIf=\"withCheckBox\" matColumnDef=\"select\" sticky>\n <th mat-header-cell *matHeaderCellDef class=\"sticky-column head-color\" style=\"border-left: 1px solid var(--fb-border-default, #e2e8f0);\">\n <input type=\"checkbox\" (click)=\"$event.stopPropagation()\" (change)=\"masterToggle()\"\n [checked]=\"selection?.hasValue()\" [indeterminate]=\"selection?.hasValue() && !isAllSelected()\"\n class=\"custom-checkbox\" />\n </th>\n <td mat-cell *matCellDef=\"let row\" class=\"body-color\" >\n <!-- SK18OCT24 check payroll Inprogress/Completed from backend data -->\n <input type=\"checkbox\" class=\"custom-checkbox\"\n [title]=\"(fromWhere === 'payrollTable' || fromWhere === 'paySlip') ? (row?.payProcessComment || '') : ''\"\n (click)=\"$event.stopPropagation()\" (change)=\"separateRowSelect(row)\"\n [checked]=\"selection.isSelected(row)\"\n [disabled]=\"(fromWhere === 'payrollTable' && row.isPayProcessed === true) || (fromWhere === 'paySlip' && row.isPayProcessed === false)\" />\n </td>\n <td mat-footer-cell *matFooterCellDef>\n {{ \"\" }}\n </td>\n </ng-container>\n\n <!-- data Columns -->\n <!-- set the matColumnDef attribute to the column name and use interpolation to dynamically generate the mat-header-cell and mat-cell elements based on the column name-->\n <ng-container *ngFor=\"let column of displayedColumns; let i=index\" [matColumnDef]=\"column\"\n [stickyEnd]=\"i === (stickyCondition - 1) ? true : false\" [sticky]=\"stickyColumns.includes(column)\">\n <th mat-header-cell *matHeaderCellDef mat-sort-header\n style=\"border-right: 1px solid var(--fb-border-default, #e2e8f0);\" class=\"head-color ms-2 ps-2 pe-2\" \n [ngClass]=\"{'sticky-column': i === (stickyCondition - 1),'active-column': activeColumn === column,'first-header-border': i === 0}\"\n (click)=\"$event.stopPropagation(); onColumnClick(column)\">\n <span [class]=\"fromWhere === 'payrollTable' || fromWhere === 'paySlip' ? 'table-width' : '' \">{{\n (\n translatePath && translatePath[displayedColumns.indexOf(column)]\n ? translatePath[displayedColumns.indexOf(column)]\n : headerLabels[displayedColumns.indexOf(column)]\n )\n | customTranslate : headerLabels[displayedColumns.indexOf(column)]\n }}\n </span>\n <div (click)=\"$event.stopPropagation()\" class=\"position-relative\" cdk-overlay-origin\n #trigger=\"cdkOverlayOrigin\">\n <img class=\"ms-1\" *ngIf=\"filterColumns.includes(column)\" style=\"margin-bottom: 2px;\"\n (click)=\"filter(column)\" src=\"../assets/images/icons/general/filter-icon.svg\">\n </div>\n <ng-template cdk-connected-overlay [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"searchFilter === true && column === selectedFilter\"\n [cdkConnectedOverlayScrollStrategy]=\"createScrollStrategy()\"\n (overlayOutsideClick)=\"searchFilter = false\" (detach)=\"searchFilter = false\">\n <app-search-filter class=\"search-component position-absolute\"\n [class]=\"searchFilter === true && column === selectedFilter ? 'd-block' : 'd-none'\"\n [filterItems]=\"filterArray\" (emitValues)=\"filteredData($event)\" (click)=\"$event.stopPropagation()\">\n </app-search-filter>\n </ng-template>\n </th>\n <ng-container *ngIf=\"dataSource.data.length > 0\">\n <td mat-cell class=\"body-color ps-2 pe-2\" *matCellDef=\"let element; let j = index\"\n [class.active-column]=\"activeColumn === column\">\n <!-- SK29OCT25 employee detail column -->\n <div *ngIf=\"column === 'employeeDetail'\">\n <div class=\"d-flex flex-row\" style=\"left:0;\">\n <div *ngIf=\"element['employeeName'] || element['name']\"\n [class]=\"hyperLinkColumns.includes(column) ? 'hyper-link' : '' \"\n style=\"font-size: var(--fs-small);color: var(--fb-text-primary, #0f172a);font-weight: var(--fw-600);\">\n {{element[\"employeeName\"] || element[\"name\"] || ''}}</div>\n <div *ngIf=\"element['employeeId']\"\n style=\"font-size: 11px;color: var(--fb-text-secondary, #64748b);font-weight: var(--fw-400);\" class=\"ms-1\">\n [{{element[\"employeeId\"] || ''}}]</div>\n </div>\n <div class=\"d-flex flex-row\" *ngIf=\"element['designation'] && element['designation'] !== ''\">\n <div style=\"font-size: 10px;color: var(--fb-text-secondary, #64748b);font-weight: var(--fw-600);\">\n {{element[\"designation\"] || ''}}\n </div>\n <div *ngIf=\"element['designation'] && element['designation'] !== '' && element['location'] && element['location'] !== ''\"\n style=\"font-size: 10px;color: var(--fb-text-secondary, #64748b);font-weight: var(--fw-600);\">,</div>\n <div *ngIf=\"element['location'] && element['location'] !== ''\" style=\"font-size: 10px;color: var(--fb-text-secondary, #64748b);font-weight: var(--fw-600);\">\n {{element[\"location\"] || ''}}\n </div>\n </div>\n </div>\n <div *ngIf=\"column !== 'combinedColumn' && column !== 'employeeDetail' && fromWhere !== 'leaveMaster' && (column !== 'active' && (fromWhere === 'hrmTaxComponent' || fromWhere === 'payrollSettingComponent' || fromWhere === 'hrm' || fromWhere === 'compensation'|| fromWhere === 'payrollTable'|| fromWhere === 'payrollCompare'|| fromWhere === 'paySlip' || fromWhere === 'approval' || fromWhere === 'leave' || fromWhere === 'expense' || fromWhere === 'expenseApproval' || fromWhere === 'leaveAllocation' ||fromWhere === 'parkingApp' ||(fromWhere === 'common' && column != 'signature')))\">\n <!-- SK10APR24 getting the table values using pipe instead of function to increase performance-->\n <div *ngIf=\" ('-' | editColumnCheck: column : editColumn) === ('') \">\n <span class=\"font-size-13 {{checkHyperlinkCheck(column) || fromWhere === 'hrm' || fromWhere === 'compensation' || fromWhere === 'parkingApp' ? ' hyper-link clickable ' : ''}} {{fromWhere === 'payrollTable' || fromWhere === 'paySlip' ? 'table-width' : '' }}\"\n *ngIf=\"hyperLinkColumns.includes(column) || isFirstCell(column)\"\n (click)=\"tableClick(element); onClickHyperlink(column,element, j, checkHyperlinkCheck(column))\">\n <!--SKS21NOV24 Use customDateTime Pipe for both Date and Time -->\n <ng-container *ngIf=\"isDateColumn(column)\">\n {{ element[column] | customDate }}\n </ng-container>\n\n <ng-container *ngIf=\"isTimeColumn(column)\">\n {{ element[column] | customTime }}\n </ng-container>\n\n <!--SKS21NOV24 For other columns, display raw value -->\n <ng-container *ngIf=\"!isDateColumn(column) && !isTimeColumn(column)\">\n {{ '-' | getValue: element : column }}\n </ng-container>\n <!--SKS27NOV24 Check if the current column is in buttonColumn array -->\n <ng-container *ngIf=\"sideScreenColumn?.includes(column)\">\n <img class=\"ms-2\" src=\"../assets/images/icons/general/info.svg\"\n (click)=\"onInfoClick(element, column, j)\">\n </ng-container>\n <!--SKS9JAN25 rightnav column -->\n <ng-container *ngIf=\"objectColumns?.includes(column)\">\n <img class=\"ms-2\" src=\"../assets/images/icons/general/info.svg\"\n (click)=\"onSideNavInfoClick(element, column, j)\">\n </ng-container>\n </span>\n <div *ngIf=\"!isFirstCell(column) && !editColumn.includes(column) && column != 'receipt'\"\n [class]=\"fromWhere === 'payrollTable' || fromWhere === 'paySlip' ? 'table-width' : '' \">\n <div *ngIf=\"!checkHyperlinkCheck(column)\" class=\"font-size-13\">\n <!--SKS21NOV24 Use customDateTime Pipe for both Date and Time -->\n <ng-container *ngIf=\"isDateColumn(column)\">\n {{ element[column] | customDate }}\n </ng-container>\n\n <ng-container *ngIf=\"isTimeColumn(column)\">\n {{ element[column] | customTime }}\n </ng-container>\n\n <!--SKS21NOV24 For other columns, display raw value -->\n <ng-container *ngIf=\"!isDateColumn(column) && !isTimeColumn(column)\">\n {{ '-' | getValue: element : column }}\n </ng-container>\n <!--SKS27NOV24 Check if the current column is in buttonColumn array -->\n <ng-container *ngIf=\"sideScreenColumn?.includes(column)\">\n <img class=\"ms-2\" src=\"../assets/images/icons/general/info.svg\"\n (click)=\"onInfoClick(element, column, j)\">\n </ng-container>\n <!--SKS9JAN25 rightnav column -->\n <ng-container *ngIf=\"objectColumns?.includes(column)\">\n <img class=\"ms-2\" src=\"../assets/images/icons/general/info.svg\"\n (click)=\"onSideNavInfoClick(element, column, j)\">\n </ng-container>\n </div>\n </div>\n </div>\n <!-- SK27FEB24 added input box for inline edit input-->\n <div *ngIf=\"editColumn.length > 0\">\n <div *ngIf=\" ('-' | editColumnCheck: column : editColumn) === ('string') \" class=\"on-edit d-flex\">\n <input #editColElement class=\"lop-input table-width\" [class]=\"element?.editRow ? 'input-box' : '' \"\n matInput [placeholder]=\"'APP.ENTER' | customTranslate : 'Enter'\" [value]=\"element[column]\"\n [(ngModel)]=\"element[column]\" [readOnly]=\"element?.editRow ? false : true\">\n </div>\n <!-- SK10APR24 In table, like text input, added drop down and time inputs as well -->\n <div *ngIf=\" ('-' | editColumnCheck: column : editColumn) === ('object') \" class=\"on-edit d-flex\">\n <input *ngIf=\" ('-' | editColumnType: column : editColumn) === ('text') \" #editColElement\n class=\"lop-input table-width\" [class]=\"element?.editRow ? 'input-box' : '' \" matInput\n [placeholder]=\"'APP.ENTER' | customTranslate : 'Enter'\" [value]=\"element[column]\"\n [(ngModel)]=\"element[column]\" [readOnly]=\"element?.editRow ? false : true\">\n <input *ngIf=\" ('-' | editColumnType: column : editColumn) === ('time') \" type=\"time\"\n class=\"lop-input table-width\" matInput [class]=\"element?.editRow ? 'input-box' : '' \"\n placeholder=\"HH:mm:ss\" [(ngModel)]=\"element[column]\"\n [disabled]=\"element?.editRow ? false : true\" />\n <div *ngIf=\" ('-' | editColumnType: column : editColumn) === ('dropdown') \">\n <select type=\"dropdown\" *ngIf=\"element?.editRow\" class=\"lop-input table-width\" matInput\n [class]=\"element?.editRow ? 'input-box' : '' \" [(ngModel)]=\"element[column]\">\n <option [disabled]=\"element?.editRow ? false : true\"\n *ngFor=\"let data of [] | editColumnDropdown: column : editColumn \"\n [value]=\"data.value || data.name\">{{data.name}}</option>\n </select>\n <input *ngIf=\"!element?.editRow\" #editColElement class=\"lop-input table-width\"\n [class]=\"element?.editRow ? 'input-box' : '' \" matInput\n [placeholder]=\"'APP.ENTER' | customTranslate : 'Enter'\" [value]=\"element[column]\"\n [(ngModel)]=\"element[column]\" [readOnly]=\"true\">\n </div>\n\n </div>\n </div>\n <app-popover\n *ngIf=\"column === 'receipt' && !editColumn.includes(column) && receiptImg == true && element[column] && element[column].length != 0\"\n [isBootstrap]=\"false\" [dynamicPopover]=\"'Popover string comes here'\">\n <div class=\"hover-base\">\n <img class=\"ms-1\" src=\"../../../assets/images/icons/general/file-attach.svg\">\n </div>\n <div class=\"hover-content\">\n <div class=\"expenseCon\">\n <div *ngFor=\"let data of element[column] || []\">\n <div class=\"cursor-pointer expense-file\" (click)=\"expenseAttachment(data,element)\">{{data?.name}}\n <!-- SK20FEB26 loader in expense list-->\n <svg *ngIf=\"data?.loader\"\n class=\"svg-spinner card-icon color\"\n width=\"22\" height=\"22\" viewBox=\"0 0 50 50\"\n style=\"cursor: wait;\">\n <circle class=\"path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke-width=\"4\"></circle>\n </svg>\n </div>\n </div>\n </div>\n </div>\n </app-popover>\n </div>\n <div *ngIf=\"fromWhere === 'leaveMaster' && column !== 'employeeDetail' \">\n <div [class]=\"(element[column]) === 'Week Off' ? 'weekoff-color' : '' \" class=\"font-size-13\">{{\n (column == 'default' || column == 'active' || column == 'paidLeave') ? '' : element[column] }}</div>\n <input *ngIf=\"(column === 'default' || column === 'active' || column === 'paidLeave')\"\n class=\"custom-checkbox\" [checked]=\"element[column] == true\" type=\"checkbox\" disabled>\n </div>\n <div *ngIf=\"fromWhere === 'payrollSettingComponent' && column === 'combinedColumn'\">\n <!-- for the Payroll Settings Component ( Side Screen Component )-->\n <!-- Since the last column is a combination of data and it is also conditional based on the paytype and calculation type we are using this div-->\n <!-- if Component type is Earnings and\n calculationType is 'flat' then output should be => \"'payType\": Flat, Amount of 'amount'\"\n calculationType is 'percentage' then output should be => \"'payType': 'amount' % of Basic \"\n calculationType is 'fixed' then output should be => \"'payType': 'calculationType'\" -->\n <!-- SK20JUN25 to display in table -->\n <ng-container *ngIf=\"\n element?.calculationType === 'flat' ||\n element?.calculationType === 'percentage' ||\n element?.calculationType === 'basicAndDA' ||\n element?.calculationType === 'fixed' ||\n element?.calculationType === 'ctc';\n else noCalculation\n \">\n <span class=\"spanFontSize\" *ngIf=\"element['calculationType'] == 'flat' && element['isVariablePay']\"\n [class]=\"'calculationType-'+element['calculationType']\">{{'APP_HRM_PAYROLL_SETTINGS.VARIABLE_FLAT_AMOUNT'\n | customTranslate : 'Variable: Flat Amount: ' }}{{ (element['amount'] || 0)}}</span>\n <span class=\"spanFontSize\" *ngIf=\"element['calculationType'] == 'flat' && !element['isVariablePay']\"\n [class]=\"'calculationType-'+element['calculationType']\">{{'APP_HRM_PAYROLL_SETTINGS.FIXED_FLAT_AMOUNT'\n | customTranslate : 'Fixed: Flat Amount: ' }}{{ (element['amount'] || 0)}}</span>\n\n <span class=\"spanFontSize\"\n *ngIf=\"element['calculationType'] == 'percentage' && element['isVariablePay']\"\n [class]=\"'calculationType-'+element['calculationType']\">{{'APP_HRM_PAYROLL_SETTINGS.VARIABLE' |\n customTranslate : 'Variable: ' }}{{element['amount']}}{{ 'APP_HRM_PAYROLL_SETTINGS.PER_OF_BASIC' |\n customTranslate : '% of Basic'}}</span>\n <span class=\"spanFontSize\"\n *ngIf=\"element['calculationType'] == 'percentage' && !element['isVariablePay']\"\n [class]=\"'calculationType-'+element['calculationType']\">{{'APP_HRM_PAYROLL_SETTINGS.FIXED' |\n customTranslate : 'Fixed: ' }}{{ element['amount']}}{{ 'APP_HRM_PAYROLL_SETTINGS.PER_OF_BASIC' |\n customTranslate : '% of Basic'}}</span>\n\n <span class=\"spanFontSize\"\n *ngIf=\"element['calculationType'] == 'basicAndDA' && element['isVariablePay']\"\n [class]=\"'calculationType-'+element['calculationType']\">{{'APP_HRM_PAYROLL_SETTINGS.VARIABLE' |\n customTranslate : 'Variable: ' }}{{ element['amount']}}{{\n 'APP_HRM_PAYROLL_SETTINGS.PER_OF_BASIC_AND_DA' | customTranslate : '% of Basic and DA'}}</span>\n <span class=\"spanFontSize\"\n *ngIf=\"element['calculationType'] == 'basicAndDA' && !element['isVariablePay']\"\n [class]=\"'calculationType-'+element['calculationType']\">{{'APP_HRM_PAYROLL_SETTINGS.FIXED' |\n customTranslate : 'Fixed: ' }}{{ element['amount']}}{{\n 'APP_HRM_PAYROLL_SETTINGS.PER_OF_BASIC_AND_DA' | customTranslate : '% of Basic and DA'}}</span>\n\n <span class=\"spanFontSize\" *ngIf=\"element['calculationType'] == 'fixed' && element['isVariablePay']\"\n [class]=\"'calculationType-'+element['calculationType']\">{{'APP_HRM_PAYROLL_SETTINGS.VARIABLE' |\n customTranslate : 'Variable: ' }}{{ element['amount']}}{{ 'APP_HRM_PAYROLL_SETTINGS.PER_OF_GROSS'\n | customTranslate : '% of Gross'}}</span>\n <span class=\"spanFontSize\"\n *ngIf=\"element['calculationType'] == 'fixed' && !element['isVariablePay']\"\n [class]=\"'calculationType-'+element['calculationType']\">{{'APP_HRM_PAYROLL_SETTINGS.FIXED' |\n customTranslate : 'Fixed: ' }}{{ element['amount']}}{{ 'APP_HRM_PAYROLL_SETTINGS.PER_OF_GROSS' |\n customTranslate : '% of Gross'}}</span>\n\n <span class=\"spanFontSize\" *ngIf=\"element['calculationType'] == 'ctc' && !element['isVariablePay']\"\n [class]=\"'calculationType-'+element['calculationType']\"> {{'APP_HRM_PAYROLL_SETTINGS.FIXED' |\n customTranslate : 'Fixed: ' }} {{ element['amount'] }} {{\n 'APP_HRM_PAYROLL_SETTINGS.PER_OF_FIXED_CTC' | customTranslate : '% of Fixed CTC'}}</span>\n <span class=\"spanFontSize\" *ngIf=\"element['calculationType'] == 'ctc' && element['isVariablePay']\"\n [class]=\"'calculationType-'+element['calculationType']\">{{'APP_HRM_PAYROLL_SETTINGS.VARIABLE' |\n customTranslate : 'Variable: ' }}{{ element['amount'] }}{{\n 'APP_HRM_PAYROLL_SETTINGS.PER_OF_VARIABLE_CTC' | customTranslate : '% of Variable CTC'}}</span>\n </ng-container>\n\n <ng-template #noCalculation>\n <span class=\"spanFontSize\">-</span>\n </ng-template>\n </div>\n <div *ngIf=\"fromWhere === 'payrollSettingComponent' && column === 'active'\">\n <div class=\"form-check form-switch\">\n <input class=\"custom-checkbox\" type=\"checkbox\" [checked]=\"(element != null && element['active'] === true) ? true : false\"\n (click)=\"element[column]=!element[column]; onToggleChange.emit(fromWhere === 'payrollSettingComponent' ? element : '')\">\n </div>\n </div>\n </td>\n </ng-container>\n <!-- SK16JUL24 to get the sum of column data -->\n <td class=\"ps-2 pe-2 \" mat-footer-cell *matFooterCellDef=\"let element; let j = index\">\n {{ '-' | totalColumSum: data : cumulativeDataColumns : column }}\n </td>\n </ng-container>\n <!-- action button Columns -->\n <!-- SK19MAR25 \"action\" key is changed to \"tableAction\" wherever used, since, it has duplicate error -->\n <ng-container [stickyEnd]=\"true\" *ngIf=\"actionButton || isDeleteRow || isEditRow\"\n matColumnDef=\"tableAction\">\n <th mat-header-cell *matHeaderCellDef\n class=\"head-color action-size sticky-column actionCol text-center\" style=\"border-right: 1px solid var(--border-color, rgba(0, 0, 0, 0.12));\">{{ actionColumHeader |\n customTranslate : 'Action'}}</th>\n <td mat-cell *matCellDef=\"let element; let i=index\" class=\"body-color actionCol\">\n <!-- SKS25DEC24 clone button -->\n <div class=\"d-flex flex-row actionButton\"\n [style.justify-content]=\"conditionSendButton ? 'none' : 'center'\">\n <div *ngIf=\"(!conditionCloneButton) && cloneButton\" class=\"imgBtnDiv\">\n <img style=\"padding: 0px;\" (click)=\"onClone(element , i)\"\n src=\"../assets/images/icons/general/clone.svg\" class=\"imgBtn\" data-bs-toggle=\"modal\">\n </div>\n <div *ngIf=\"(conditionCloneButton) && isConditionMet(element, conditionCloneButton.conditions)\"\n class=\"ms-2 imgBtnDiv\" style=\"margin-top: 6px;\">\n <img style=\"padding: 0px;\" (click)=\"onClone(element , i)\"\n src=\"../assets/images/icons/general/clone.svg\" class=\"imgBtn\" data-bs-toggle=\"modal\">\n </div>\n <!-- SK20FEB26 Expense edit on Pending status -->\n <div *ngIf=\"element?.status === 'Rejected'|| fromWhere === 'leaveMaster' || fromWhere === 'payrollSettingComponent' || fromWhere === 'hrmTaxComponent' || isEditRow || (fromWhere == 'expense' && element?.status === 'Pending' )\">\n <app-fusion-button *ngIf=\"fromWhere == 'leave'\" [buttonType]=\"'text-only'\"\n [buttonValue]=\"'APP.COMMENTS' | customTranslate : 'comments' \"\n (buttonClickEmit)=\"onEdit(element?.rejectionReason, i, element?.status)\" data-bs-toggle=\"modal\"\n data-bs-target=\"#rejectInfoModal\">\n </app-fusion-button>\n <div class=\"imgBtnDiv\"\n *ngIf=\"((!conditionEditButton)&& ((fromWhere == 'expense' ) || fromWhere === 'leaveMaster' || fromWhere === 'payrollSettingComponent' || fromWhere === 'hrmTaxComponent' || isEditRow)) || (conditionEditButton && isConditionMet(element, conditionEditButton.conditions))\">\n <!-- MY 23OCT26 Disable edit action when expense is already Approved -->\n <i *ngIf=\"(!conditionEditButton)&& ((fromWhere == 'expense' ) || fromWhere === 'leaveMaster' || fromWhere === 'payrollSettingComponent' || fromWhere === 'hrmTaxComponent' || isEditRow)\"\n (click)=\"(fromWhere === 'expense' && element?.status?.toLowerCase() === 'approved') ? null : onEdit(fromWhere === 'payrollSettingComponent' || isEditRow ? element : element?._id, i, element?.status)\"\n [matTooltip]=\"(fromWhere === 'expense' && element?.status?.toLowerCase() === 'approved') ? ('APP_EXPENSE.CANNOT_EDIT_APPROVED' | customTranslate : 'Approved expenses cannot be edited') : ('APP.EDIT' | customTranslate : 'Edit')\"\n [style.opacity]=\"(fromWhere === 'expense' && element?.status?.toLowerCase() === 'approved') ? '0.35' : '1'\"\n [style.cursor]=\"(fromWhere === 'expense' && element?.status?.toLowerCase() === 'approved') ? 'not-allowed' : 'pointer'\"\n class=\"fusion-icon nav-icon fusion-icon-edit_pencil\" style=\"margin: 0px !important; font-size: var(--fs-normal, 16px) !important; color: var(--fc-sub-lite, #787486);\">\n </i>\n <i *ngIf=\"conditionEditButton && isConditionMet(element, conditionEditButton.conditions)\"\n [matTooltip]=\"(fromWhere === 'expense' && element?.status?.toLowerCase() === 'approved') ? ('APP_EXPENSE.CANNOT_EDIT_APPROVED' | customTranslate : 'Approved expenses cannot be edited') : ('APP.EDIT' | customTranslate : 'Edit')\"\n [style.opacity]=\"(fromWhere === 'expense' && element?.status?.toLowerCase() === 'approved') ? '0.35' : '1'\"\n [style.cursor]=\"(fromWhere === 'expense' && element?.status?.toLowerCase() === 'approved') ? 'not-allowed' : 'pointer'\"\n (click)=\"(fromWhere === 'expense' && element?.status?.toLowerCase() === 'approved') ? null : onEdit(fromWhere === 'payrollSettingComponent' || isEditRow ? element : element?._id, i)\"\n class=\"fusion-icon nav-icon fusion-icon-edit_pencil\" style=\"margin: 0px !important; font-size: var(--fs-normal, 16px) !important; color: var(--fc-sub-lite, #787486);\">\n </i>\n </div>\n <!-- <img *ngIf=\"fromWhere == 'expense'\" (click)=\"delete(element?._id)\" src=\"../assets/images/icons/Vectordelete.svg\"> -->\n </div>\n <div *ngIf=\"element?.leaveStatus === 'New' || element?.status === 'New' || element?.status === 'Pending' || element?.leaveStatus === 'Pending' || fromWhere === 'leaveMaster' || fromWhere === 'payrollSettingComponent' || fromWhere === 'hrmTaxComponent' || fromWhere == 'expenseApproval' || isDeleteRow\">\n <app-fusion-button *ngIf=\"fromWhere == 'leave'\" [buttonType]=\"'text-only'\"\n [buttonValue]=\"'APP.CANCEL' | customTranslate : 'Cancel'\" (buttonClickEmit)=\"delete(element, i)\"\n data-bs-toggle=\"modal\" data-bs-target=\"#cancelLeave\"></app-fusion-button>\n <!-- SKS21NOV24 Conditional rendering of delete icon based on various conditions -->\n <!-- Show the delete icon if 'conditionDeleteButton' is false and 'fromWhere' matches specific components or 'isDeleteRow' is true -->\n <div class=\"imgBtnDiv\"\n *ngIf=\"((!conditionDeleteButton)&&(fromWhere == 'expense' || fromWhere === 'leaveMaster' || fromWhere === 'payrollSettingComponent' || fromWhere === 'hrmTaxComponent' || isDeleteRow) )|| (conditionDeleteButton && isConditionMet(element, conditionDeleteButton.conditions))\">\n <img\n *ngIf=\"(!conditionDeleteButton)&&(fromWhere == 'expense' || fromWhere === 'leaveMaster' || fromWhere === 'payrollSettingComponent' || fromWhere === 'hrmTaxComponent' || isDeleteRow)\"\n class=\"imgBtn\" [matTooltip]=\"'APP.DELETE_RECORD' | customTranslate : 'Delete Record'\"\n (click)=\"deleteRecord(fromWhere === 'payrollSettingComponent' || isDeleteRow ? element : element?._id, i)\"\n src=\"../assets/images/icons/Vectordelete.svg\">\n <img *ngIf=\"conditionDeleteButton && isConditionMet(element, conditionDeleteButton.conditions)\"\n [matTooltip]=\"'APP.DELETE_RECORD' | customTranslate : 'Delete Record'\"\n (click)=\"deleteRecord(isDeleteRow ? element : element?._id, i)\" class=\"imgBtn\"\n src=\"../assets/images/icons/Vectordelete.svg\">\n </div>\n <div *ngIf=\"fromWhere == 'approval' || fromWhere == 'expenseApproval'\" class=\"flex imgBtnDiv\">\n <img\n *ngIf=\"(fromWhere === 'expenseApproval' && element?.status === 'Approved'&& element?.reImbursed !== 'Reimbursed') || fromWhere == 'approval'\"\n class=\"approval-image me-2\" style=\"padding: 0px; width: 24px !important;\"\n (click)=\"onApprove( element?.employeeId, element?._id, element?.reImbursed )\"\n src=\"../assets/images/icons/general/Approved.svg\">\n <img *ngIf=\"fromWhere !== 'expenseApproval'\" class=\"approval-image\"\n style=\"padding: 0px; width: 24px !important;\"\n (click)=\"onReject( element?.employeeId, element?._id )\"\n src=\"../assets/images/icons/general/Declined.svg\" class=\"\" data-bs-toggle=\"modal\"\n data-bs-target=\"#approvalReject\">\n </div>\n </div>\n <!-- SK02APR24 added preview and download icons -->\n <div *ngIf=\"viewIcon\" class=\"ms-2 imgBtnDiv\">\n <!-- <img [src]=\"('post.svg' | svgIcon:'#000000') | async\" class=\"card-icon color\" title=\"preview\" (click)=\"viewIconClick(element)\" style=\"cursor: pointer;\" /> -->\n <i class=\"fusion-icon fusion-icon-size-lg fusion-icon-eye nav-icon\" matTooltip=\"Preview\"\n matTooltipPosition=\"above\" style=\"color: var(--fc-text-color-light) !important; cursor: pointer;\"\n (click)=\"viewIconClick(element)\"></i>\n\n </div>\n <div *ngIf=\"downloadIcon\" class=\"ms-2 imgBtnDiv\">\n <i class=\"fusion-icon fusion-icon-size-lg fusion-icon-document-download card-icon color imgBtn\"\n matTooltip=\"Download\" matTooltipPosition=\"above\"\n style=\"cursor: pointer; color: var(--fc-text-color-light) !important;\"\n (click)=\"downloadIconClick(element)\">\n </i>\n </div>\n <!-- SKS25DEC24 send button -->\n <div *ngIf=\"(!conditionSendButton) && sendButton\" class=\"ms-2 imgBtnDiv\" style=\"margin-top: 6px;\">\n <i class=\"fusion-icon fusion-icon-size-lg fusion-icon-send-2 card-icon color imgBtn\"\n style=\"cursor: pointer\" (click)=\"onSend(element, i)\"\n [matTooltip]=\"'APP.SEND' | customTranslate : 'Send'\"></i>\n </div>\n <div\n *ngIf=\"(conditionSendButton) && isConditionMet(element, conditionSendButton.conditions) && sendButton\"\n class=\"ms-2 imgBtnDiv\" style=\"margin-top: 6px;\">\n <i class=\"fusion-icon fusion-icon-size-lg fusion-icon-send-2 card-icon color imgBtn\"\n style=\"cursor: pointer\" (click)=\"onSend(element, i)\"\n [matTooltip]=\"'APP.SEND' | customTranslate : 'Send'\"></i>\n </div>\n <!-- SKS25DEC24 active button -->\n <div *ngIf=\"(!conditionActivateButton) && activeButton\" class=\"ms-2 imgBtnDiv\"\n style=\"margin-top: 10px;\">\n <i class=\"fusion-icon fusion-icon-size-lg fusion-icon-group nav-icon\" style=\"color: var(--comp-bg-color, #ffffff);\"></i>\n </div>\n <div\n *ngIf=\"(conditionActivateButton) && isConditionMet(element, conditionActivateButton.conditions) && activeButton\"\n class=\"ms-2 imgBtnDiv\" style=\"margin-top: 10px;\">\n <i class=\"fusion-icon fusion-icon-size-lg fusion-icon-group nav-icon\" style=\"color: var(--comp-bg-color, #ffffff);\"></i>\n </div>\n <!-- SKS25DEC24 deactive button -->\n <div *ngIf=\"(!conditionDeactivateButton) && deactiveButton\" class=\"ms-2 imgBtnDiv\"\n style=\"margin-top: 10px;\">\n <i class=\"fusion-icon fusion-icon-size-lg fusion-icon-group nav-icon\" style=\"color: var(--comp-bg-color, #ffffff);\"></i>\n </div>\n <div\n *ngIf=\"(conditionDeactivateButton) && isConditionMet(element, conditionDeactivateButton.conditions) && deactiveButton\"\n class=\"ms-2 imgBtnDiv\" style=\"margin-top: 10px;\">\n <i class=\"fusion-icon fusion-icon-size-lg fusion-icon-group nav-icon\" style=\"color: var(--comp-bg-color, #ffffff);\"></i>\n </div>\n </div>\n <div>\n\n <app-fusion-button *ngIf=\"fromWhere == 'document-icons'\" [buttonType]=\"'custom-btn'\"\n [fcBtnIconLeftSrc]=\"'../assets/images/icons/general/downloadfile.svg'\"\n (buttonClickEmit)=\"downloadPdf(element)\"></app-fusion-button>\n <app-fusion-button *ngIf=\"fromWhere == 'document-icons'\" [buttonType]=\"'custom-btn'\"\n [fcBtnIconLeftSrc]=\"'../assets/images/icons/general/pencil-icon.svg'\"\n (buttonClickEmit)=\"delete(element, i)\" data-bs-toggle=\"modal\"\n data-bs-target=\"#documentsInfoModal\"></app-fusion-button>\n <app-fusion-button *ngIf=\"fromWhere == 'document-icons'\" [buttonType]=\"'custom-btn'\"\n [fcBtnIconLeftSrc]=\"'../assets/images/icons/Vectordelete.svg'\"\n (buttonClickEmit)=\"delete(element, i)\" data-bs-toggle=\"modal\"\n data-bs-target=\"#deleteDocModal\"></app-fusion-button>\n </div>\n </td>\n <td mat-footer-cell *matFooterCellDef=\"let element; let i=index\">{{ \"\" }}\n </td>\n </ng-container>\n\n <!-- total Row -->\n <ng-container [sticky]=\"true\" matColumnDef=\"total\">\n <th mat-header-cell *matHeaderCellDef class=\"sticky-column head-color\">\n </th>\n <td mat-cell *matCellDef=\"let row\" class=\"body-color\">\n </td>\n <!-- RS27AUG24 -->\n <!-- Used the translate pipe to successfully implement the translation -->\n <td mat-footer-cell *matFooterCellDef >{{'APP.TOTAL' | customTranslate : 'Total' }}\n </td>\n </ng-container>\n\n <!-- Render the columns -->\n <!-- SK16JUL24 adding the cumulative data row as footer -->\n <!-- <ng-container *ngIf=\"dataSource?.data?.length !== 0\"> -->\n <div [ngSwitch]=\"renderColumns\">\n <div *ngSwitchCase=\"'select'\">\n <tr mat-header-row *matHeaderRowDef=\"['select'].concat(displayedColumns) sticky: true\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: ['select'].concat(displayedColumns);\"></tr>\n <!-- SK19JUL24 table total update -->\n <tr\n [class]=\"cumulativeDataColumns != undefined && cumulativeDataColumns.length !== 0 ? '' : 'border border-white' \"\n mat-footer-row\n *matFooterRowDef=\"cumulativeDataColumns != undefined && cumulativeDataColumns.length !== 0 ? ['total'].concat(displayedColumns) : null \">\n </tr>\n </div>\n <div *ngSwitchCase=\"'tableAction'\">\n <tr mat-header-row\n *matHeaderRowDef=\" displayedColumns ? displayedColumns.concat(['tableAction']) : [] ;sticky: true\">\n </tr>\n <tr mat-row\n *matRowDef=\"let row; columns: displayedColumns ? displayedColumns.concat(['tableAction']) : []; \">\n </tr>\n <ng-container *ngIf=\"cumulativeDataColumns\">\n <tr\n [class]=\"cumulativeDataColumns != undefined && cumulativeDataColumns.length !== 0 ? '' : 'border border-white' \"\n mat-footer-row\n *matFooterRowDef=\"cumulativeDataColumns != undefined && cumulativeDataColumns.length !== 0 ? ['total'].concat(displayedColumns).concat('tableAction') : null\">\n </tr>\n </ng-container>\n </div>\n <!-- 30JAN24 for both checkbox and action columns-->\n <div *ngSwitchCase=\"'both'\">\n <tr mat-header-row\n *matHeaderRowDef=\"['select'].concat(displayedColumns).concat('tableAction') sticky: true\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: ['select'].concat(displayedColumns).concat('tableAction')\"\n (click)=\"tableClick(row)\"></tr>\n <ng-container *ngIf=\"cumulativeDataColumns\">\n <tr\n [class]=\"cumulativeDataColumns != undefined && cumulativeDataColumns.length !== 0 ? '' : 'border border-white' \"\n mat-footer-row\n *matFooterRowDef=\"cumulativeDataColumns != undefined && cumulativeDataColumns.length !== 0 ? ['total'].concat(displayedColumns).concat('tableAction') : null\">\n </tr>\n </ng-container>\n </div>\n <div *ngSwitchDefault>\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns sticky: true\"></tr>\n <tr mat-row *matRowDef=\"let row;let i =index; columns: displayedColumns;\"></tr>\n <ng-container *ngIf=\"cumulativeDataColumns\">\n <tr\n [class]=\"cumulativeDataColumns != undefined && cumulativeDataColumns.length !== 0 ? 'd-block' : 'border border-white' \"\n mat-footer-row\n *matFooterRowDef=\"cumulativeDataColumns != undefined && cumulativeDataColumns.length !== 0 ? ['total'].concat(displayedColumns) : null\">\n </tr>\n </ng-container>\n </div>\n </div>\n <!-- </ng-container> -->\n <!-- <tr class=\"mat-row \" *matNoDataRow> -->\n <!-- SK9JAN24 Removed attr.colspan since it throws undefined error -->\n <!-- <td class=\"mat-cell \">\n {{'APP.NO_RECORDS' | customTranslate : 'No records/data found.' }}\n </td>\n </tr> -->\n\n </table>\n <div class=\"no-data-cell text-center my-3 \" *ngIf=\"!dataSource || !dataSource.data || dataSource.data.length === 0\">\n {{ 'APP.NO_RECORDS' | customTranslate : 'No records/data found.' }}\n </div>\n </ng-container>\n <!-- MSM28JAN25 skeleton loader template -->\n <ng-template #loadingTemplate>\n <table>\n <tr style=\"height: 40px;\" *ngFor=\"let _ of [1, 2, 3, 4,5,6]\">\n <td colspan=\"3\" class=\"skeleton-card\">\n <div class=\"title\" data-title>\n <div class=\"skeleton skeleton-text\"></div>\n <div class=\"skeleton skeleton-text\"></div>\n </div>\n </td>\n </tr>\n </table>\n </ng-template>\n </div>\n <!-- SK23FEB24 table input save button changes -->\n <div class=\"d-flex justify-content-end\">\n <div class=\"flex mt-4 me-2 cursor-pointer\" *ngIf=\"addInlineRecord \" (click)=\"addTableRecord(inlineElement)\"\n [matTooltip]=\"'APP.ADD_NEW_RECORD' | customTranslate : 'Add New Record'\">\n <div class=\"ms-1 me-1\">\n <i class=\"fusion-icon fusion-icon-size-lg fusion-icon-add-square nav-icon\"\n style=\"color: var(--fc-text-color-dark, #000000) !important;\"></i>\n </div>\n </div>\n <!-- SK27FEB24 removed button disable logic, SK13MAR24 added another condition for button showing-->\n <!-- SR06JAN2025 button disable logic for not select any employee-->\n <div class=\"d-flex justify-content-between align-items-end\">\n <div class=\"px-2\">\n {{notes}}</div>\n\n <app-fusion-button [buttonLoadingSpinner]=\"tableSaveLoadingSpinner\"\n *ngIf=\"editColumn.length > 0 || tableSaveButton\" buttonType=\"btn btn-primary mt-4 me-2\"\n [buttonDisable]=\"selection?.selected?.length === 0\" (buttonClickEmit)=\"saveButton()\"\n buttonValue=\"{{ 'APP.SAVE' | customTranslate : 'Save' }}\"></app-fusion-button>\n </div>\n </div>\n <!-- SKS24JAN25 custom paginator -->\n <app-pagination #paginator [pageSizeOptions]=\"itemsPerPage\" [collectionSize]=\"totalCount\" [pageSize]=\"pageSize\"\n [currentPage]=\"pageIndex\" [firstLastButtons]=\"true\" (event)=\"pageParams($event)\" >\n </app-pagination>\n </div>\n </div>\n</div>\n\n<!-- SK03OCT24 while clicking export button, side screen will be displayed, with fields selection and filter boxes -->\n<app-common-screen *ngIf=\"exportSidescreen\" headerTitle=\"{{'APP.EXPORT_DATA' | customTranslate : 'Export Data'}}\"\n (sideScreenEmittedEvent)=\"exportSidescreen = false\">\n <div class=\"side-main-content\">\n <!-- MY 15OCT26 export file button loader -->\n <div\n class=\"d-flex align-items-center flex-row p-3 justify-content-center cursor-pointer short-button-white-bg button-hov\"\n [class.disabled]=\"exportButtonLoadingSpinner\"\n (click)=\"!exportButtonLoadingSpinner ? exportButtonSideNav() : null\">\n <div *ngIf=\"exportButtonLoadingSpinner\" class=\"spinner-grow spinner-grow-sm me-2\" role=\"status\" aria-hidden=\"true\"></div>\n <i *ngIf=\"!exportButtonLoadingSpinner\" class=\"fusion-icon fusion-icon-size-lg fusion-icon-document-upload card-icon color me-1\"></i>\n <div>{{ exportButtonLoadingSpinner ? (('APP_SETTINGS_APPS.LOADING' | customTranslate : 'Loading') + '...') : ('APP.EXPORT_FILE' | customTranslate : 'Export File') }}</div>\n </div>\n <!-- SK03OCT24 displaying components from parent (multipleCheckBox/multipleFilter) -->\n <div *ngFor=\"let type of filterScreenConfigs\">\n <!-- MY 15OCT26 pass button loader state to multi-checkbox and multiple-filter -->\n <app-multi-checkbox *ngIf=\"type.type === 'multipleCheckBox' \" class=\"ms-2 me-2\"\n [label]=\"type?.labelPath || type?.label | customTranslate : type?.label\" [cardSize]=\"type?.cardSize\"\n [cardInlineSize]=\"type?.cardInlineSize\" [checkboxList]=\"type?.checkboxList\"\n [activeCheckboxList]=\"type?.activeCheckboxList\" [buttonList]=\"type?.buttons\"\n [displayValues]=\"type?.displayValues\" [componentData]=\"type\" [checkBoxStyles]=\"type?.checkBoxStyles\"\n [isButtonLoadingSpinner]=\"type?.isButtonLoadingSpinner || false\"\n (compDataEmit)=\"exportFieldsButtonEmit($event)\">\n </app-multi-checkbox>\n <app-multiple-filter *ngIf=\"type.type === 'multipleFilter' \" class=\"ms-2 me-2\"\n [isDateFilter]=\"type?.isDateFilter || false\"\n [label]=\"type?.labelPath || type?.label | customTranslate : type?.label\" [cardSize]=\"type?.cardSize\"\n [cardInlineSize]=\"type?.cardInlineSize\" [buttonList]=\"type?.buttons\" [displayValues]=\"type?.displayValues\"\n [componentData]=\"type\" [checkBoxStyles]=\"type?.checkBoxStyles\" [selectionData]=\"type?.selectionData\"\n [isButtonLoadingSpinner]=\"type?.isButtonLoadingSpinner || false\"\n (compDataEmit)=\"exportFilterButtonEmit($event)\" (selectedValuesEmit)=\"selectedValuesEmit($event)\"\n (filterDateEmit)=\"filterDateEmit($event)\">\n </app-multiple-filter>\n </div>\n </div>\n</app-common-screen>\n<!-- SKS15DEC25 bulk upload -->\n<app-file-upload [id]=\"'uploadEmployee'\" [headerName]=\"moudleName\" [showFileModal]=\"uploadModal\"\n (closeEmit)=\"uploadModal = false\"\n [bodyHeaderName]=\"('APP.STEPS_TO_UPLOAD' | customTranslate : 'Steps to upload')+moudleName\" [isTemplate]=true\n [templateContent]=\"('APP.DOWNLOAD_THE' | customTranslate : 'Download the')+ moudleName +('APP.TEMPLATE' | customTranslate : 'template')\"\n (templateDownload)=\"downloadTemplate()\"\n [bodyContent]=\"[(('APP.FILL_THE_APPROP' | customTranslate : 'Fill the appropriate')+moudleName+('APP.DETAILS_AND_UPLOAD_ITS_BELOW' | customTranslate : 'Details and upload it below'))]\"\n [fileRestrictions]=\"{\n allowedTypes: ['.csv', '.xlsx', '.xls'],\n maxFileSize: 10,\n maxFiles: 1\n }\" [uploadedFiles]=\"[]\" [saveButtonName]=\"'APP.UPLOAD' | customTranslate : 'Upload'\"\n (upload)=\"uploadRecordsFile($event)\">\n</app-file-upload>\n<!-- SK06NOV24 alert on deleting record -->\n<div *ngIf=\"deleteModal\" class=\"modal modal-backdrop show d-block\" id=\"deleteRecord\" tabindex=\"-1\"\n aria-labelledby=\"deleteRecordLabel\" [attr.aria-hidden]=\"!deleteModal\">\n <div class=\"modal-dialog\">\n <div class=\"modal-content\">\n <div class=\"modal-header\">\n <b class=\"modal-title fs-5\" id=\"deleteRecordLabel\">{{'APP.DELETE_RECORD' | customTranslate : 'Delete Record'}}</b>\n <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"\n (click)=\"deleteModal = false\"></button>\n </div>\n <div class=\"modal-body\">\n {{'APP.ARE_YOU_SURE_YOU_WANT_TO_DELETE_THE_REC' | customTranslate : 'Are you sure want to delete the record'}} ?\n </div>\n <div class=\"modal-footer\">\n <button type=\"button\" class=\"btn btn-primary\" data-bs-dismiss=\"modal\" aria-label=\"Close\"\n (click)=\"!buttonLoadingSpinner ? deleteRecordData() : null\">\n <!-- SK04SEP25 button loader -->\n <span class=\"{{ buttonLoadingSpinner ? 'spinner-grow' : '' }} spinner-grow-sm\" role=\"buttonValue\"\n aria-hidden=\"true\"></span>\n <span>{{ buttonLoadingSpinner ? ('APP_SETTINGS_APPS.LOADING' | customTranslate : 'Loading') + '...' :\n ('APP.YES' | customTranslate : 'Yes') }}\n </span>\n </button>\n <button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\" (click)=\"deleteModal = false\">{{'APP.NO'\n | customTranslate : 'No'}}</button>\n </div>\n </div>\n </div>\n</div>\n\n<app-common-screen *ngIf=\"infoSidescreen\" [headerTitle]=\"'APP.APPROVAL_DETAILS' | customTranslate : 'Approval Details'\"\n (sideScreenEmittedEvent)=\"infoSidescreen = false\">\n <div class=\"side-main-content container\">\n <div class=\"row\">\n <div class=\"col-md-12\">\n <!-- Approval Info -->\n <div class=\"row mb-3\">\n <div class=\"col-6 text-start\">{{'APP.NAME' | customTranslate : 'Name'}}:</div>\n <div class=\"col-6 text-start\">{{ infoData.name || ''}}</div>\n </div>\n <div class=\"row mb-3\">\n <div class=\"col-6 text-start\">{{'APP.STATUS' | customTranslate : 'Status'}}:</div>\n <div class=\"col-6 text-start\">\n <span\n *ngIf=\"infoData.status === 'Approved' || infoData.status === 'Pending' || infoData.status === 'Rejected' \"\n class=\"badge custom-badge\" [ngClass]=\"{\n 'bg-success': infoData.status === 'Approved', \n 'bg-warning': infoData.status === 'Pending',\n 'bg-danger': infoData.status === 'Rejected'}\">\n {{ infoData.status }}</span>\n <span\n *ngIf=\"infoData.status !== 'Approved' && infoData.status !== 'Pending' && infoData.status !== 'Rejected' \">{{\n infoData.status || '' }}</span>\n </div>\n </div>\n <div class=\"row mb-3\">\n <!-- SK21DEC24 to add Approval status in side screen-->\n <div class=\"col-6 text-start\">{{'APP.APPROVAL_STATUS' | customTranslate : 'Approval Status'}}:</div>\n <div class=\"col-6 text-start\">\n <span\n *ngIf=\"infoData.leaveStatus === 'Approved' || infoData.leaveStatus === 'Pending' || infoData.leaveStatus === 'Rejected'\"\n class=\"badge custom-badge\" [ngClass]=\"{\n 'bg-success': infoData.leaveStatus === 'Approved', \n 'bg-warning': infoData.leaveStatus === 'Pending',\n 'bg-danger': infoData.leaveStatus === 'Rejected'}\">\n {{ infoData.leaveStatus || '' }}</span>\n <span\n *ngIf=\"infoData.leaveStatus !== 'Approved' && infoData.leaveStatus !== 'Pending' && infoData.leaveStatus !== 'Rejected'\">{{\n infoData.leaveStatus || '' }}</span>\n </div>\n </div>\n <div class=\"row mb-3\">\n <div class=\"col-6 text-start\">{{'APP.REASON' | customTranslate : 'Reason'}}:</div>\n <div class=\"col-6 text-start\">{{ infoData.reason || '' }}</div>\n </div>\n <div class=\"row mb-3\">\n <div class=\"col-6 text-start\">{{'APP.TYPE' | customTranslate : 'Type'}}:</div>\n <div class=\"col-6 text-start\">{{ infoData.type || ''}}</div>\n </div>\n <div class=\"row mb-3\">\n <div class=\"col-6 text-start\">{{'APP.APPLIED_ON' | customTranslate : 'Applied On'}}:</div>\n <div class=\"col-6 text-start\">{{ (infoData.appliedOn | date:'short') || '' }}</div>\n </div>\n <div class=\"row mb-3\">\n <div class=\"col-6 text-start\">{{'APP.APPROVED_COUNT' | customTranslate : 'Approved Count'}}:</div>\n <div class=\"col-6 text-start\">{{ infoData.approvedCount || '' }}</div>\n </div>\n </div>\n </div>\n <!-- Approval Managers -->\n <!-- SK03DEC24 show approval managers list only if applicable -->\n <h3 *ngIf=\"infoData.approvalManagers != undefined && infoData.approvalManagers.length > 0\" class=\"text-center mb-3\">\n {{'APP.APPROVAL_MANAGERS' | customTranslate : 'Approval Managers'}}</h3>\n <ul *ngIf=\"infoData.approvalManagers != undefined && infoData.approvalManagers.length > 0\" class=\"list-group\">\n <li *ngFor=\"let manager of infoData.approvalManagers\" class=\"list-group-item\">\n <div class=\"row mb-3\">\n <div class=\"col-6 text-start\">{{'APP.EMPLOYEE_ID' | customTranslate : 'Employee ID'}}:</div>\n <div class=\"col-6 text-start\">{{ manager.employeeId || ''}}</div>\n </div>\n <div class=\"row mb-3\">\n <!-- SK10DEC24 to show manager name -->\n <div class=\"col-6 text-start\">{{'APP.EMPLOYEE_NAME' | customTranslate : 'Employee Name'}}:</div>\n <div class=\"col-6 text-start\">{{ manager.name || '' }}</div>\n </div>\n <div class=\"row mb-3\">\n <div class=\"col-6 text-start\">{{'APP.APPROVAL_ORDER' | customTranslate : 'Approval Order'}}:</div>\n <div class=\"col-6 text-start\">{{ manager.approvalOrder || '' }}</div>\n </div>\n <div class=\"row mb-3\">\n <div class=\"col-6 text-start\">{{'APP.STATUS' | customTranslate : 'Status'}}:</div>\n <div class=\"col-6 text-start\">\n <span *ngIf=\"manager.status === 'Approved' || manager.status === 'Pending' || manager.status === 'Rejected'\"\n class=\"badge custom-badge\" [ngClass]=\"{\n 'bg-success': manager.status === 'Approved', \n 'bg-warning': manager.status === 'Pending',\n 'bg-danger': manager.status === 'Rejected'}\">\n {{ manager.status || '' }}\n </span>\n <span\n *ngIf=\"manager.status !== 'Approved' && manager.status !== 'Pending' && manager.status !== 'Rejected'\"> {{\n manager.status || '' }}</span>\n </div>\n </div>\n <div class=\"row mb-3\" *ngIf=\"manager.viewedOn\">\n <div class=\"col-6 text-start\">{{'APP.VIEWED_ON' | customTranslate : 'Viewed On'}}:</div>\n <div class=\"col-6 text-start\">{{ (manager.viewedOn | date:'short') || '' }}</div>\n </div>\n <div class=\"row mb-3\">\n <div class=\"col-6 text-start\">{{'APP.IS_OPTIONAL' | customTranslate : 'Is Optional'}}:</div>\n <div class=\"col-6 text-start\">{{ manager.isOptional ? \"Yes\" : \"No\" }}</div>\n </div>\n <div class=\"row mb-3\">\n <div class=\"col-6 text-start\">{{'APP.COMMENTS' | customTranslate : 'Comments'}}:</div>\n <div class=\"col-6 text-start\">{{ manager.rejectionReason || '' }}</div>\n </div>\n </li>\n </ul>\n </div>\n</app-common-screen>\n\n<!-- MR 09NOV26 Sandwich Leave Confirmation Modal -->\n<div *ngIf=\"confirmModal\" class=\"custom-modal-overlay\">\n <div class=\"custom-modal\">\n <div class=\"custom-modal-header\">\n <b>{{ 'APP_HRM_ATTENDANCE.CHECK_ATTENDANCE' | customTranslate : 'Check Attendance' }}</b>\n <button class=\"close-button\" (click)=\"confirmModal = false\">×</button>\n </div>\n <div class=\"custom-modal-body\">\n {{ 'APP_HRM_ATTENDANCE.CONFIRM_CHECK' | customTranslate : 'Are you sure you want to run attendance check?' }}\n </div>\n <div class=\"custom-modal-footer\">\n <button class=\"btn btn-primary\" (click)=\"checkButtonClicked(); confirmModal = false\">{{ 'APP.YES' | customTranslate : 'Yes' }}</button>\n <button class=\"btn btn-secondary ms-2\" (click)=\"confirmModal = false\">{{ 'APP.NO' | customTranslate : 'No' }}</button>\n </div>\n </div>\n</div>",
|
|
6902
|
+
template: "<div class=\"table-layout\" [id]=\"tableId\" style=\"padding-top: 1px;\">\n <div>\n <!-- SK30JAN25 title added -->\n <div class=\"d-flex justify-content-center table-title align-text-center\">\n {{title}}\n </div>\n \n <div class=\"flex justify-content-between\" style=\"padding-bottom: 5px;\">\n <div class=\"d-flex align-items-center\">\n <!-- MR 09NOV26 table-toolbar-left projection slot -->\n <ng-content select=\"[table-toolbar-left]\"></ng-content>\n\n <!-- MR 09NOV26 Month / Year Picker -->\n <div class=\"picker-container\" *ngIf=\"monthArray && monthArray.length > 0\">\n <i class=\"arrow-btn fusion-icon fusion-icon-size-lg fusion-icon-arrow-left-1 nav-icon\"\n (click)=\"prevMonth()\" style=\"color: var(--fc-text-color-dark, #000000) !important;\"></i>\n <span class=\"month-label\" (click)=\"togglePopup()\">\n {{ months[selectedMonth] }} {{ selectedYear }}\n </span>\n <i class=\"arrow-btn fusion-icon fusion-icon-size-lg fusion-icon-arrow-right-1 nav-icon\"\n (click)=\"nextMonth()\" style=\"color: var(--fc-text-color-dark, #000000) !important;\"></i>\n </div>\n <div class=\"popup\" *ngIf=\"popupOpen\">\n <div class=\"year-section\">\n <i class=\"fusion-icon fusion-icon-size-lg fusion-icon-arrow-left-1 nav-icon\" (click)=\"changeYear(-1)\"\n style=\"color: var(--fc-text-color-dark, #000000) !important;\"></i>\n <span>{{ selectedYear }}</span>\n <i class=\"fusion-icon fusion-icon-size-lg fusion-icon-arrow-right-1 nav-icon\" (click)=\"changeYear(1)\"\n style=\"color: var(--fc-text-color-dark, #000000) !important;\"></i>\n </div>\n\n <div class=\"month-grid\">\n <div class=\"month-item\" *ngFor=\"let m of (monthArray || months); let i = index\" [class.active]=\"i === selectedMonth\"\n (click)=\"selectMonth(i)\">\n {{ m | slice:0:3 }}\n </div>\n </div>\n </div>\n\n <div *ngIf=\"dateDropdown \">\n <app-drop-down class=\"field-input\" [lists]='dropdownLists' dropDownHeight=\"38px\" dropDownWidth=\"200px\"\n (dataEmit)=\"dropdownEmitFunction($event)\" [selectedData]=\"dropdownSelectedData\"></app-drop-down>\n </div>\n <!-- SC11NOV2025 if isDatePicker is true then show the date picker -->\n <div *ngIf=\"isDatePicker\">\n <app-drop-down [lists]='list' [selectedData]=\"selectedData\" dropDownHeight=\"42px\" dropFontWeight=\"500\"\n dropFontSize=\"12px\" dropFontColor=\"#434555\" dropBorderRadius=\"5px\" dropDownWidth=\"200px\"\n (dataEmit)=\"dateFilter($event)\"></app-drop-down>\n </div>\n </div>\n <!-- SKS24JAN25 show Nos in table -->\n <!-- <div style=\"display: flex; align-items: center;\">\n <p *ngIf=\"totalRecords || totalCount\" style=\"font-weight: var(--fw-500); margin-right: 5px; margin-bottom: 0px;\">{{'APP.NOS' | customTranslate : 'Nos'}} </p> <span style=\"color: var(--fc-primary-color, rgb(43, 87, 249));\">{{totalRecords || totalCount}}</span>\n </div> -->\n <!-- SKS24JAN25 search bar config and nonconfig -->\n <div style=\"margin-left:auto;\">\n <div class=\"flex\" style=\"align-items: center;\">\n <!-- MR 09NOV26 table-toolbar-right projection slot -->\n <ng-content select=\"[table-toolbar-right]\"></ng-content>\n\n <!-- MR 09NOV26 Sandwich leave check button -->\n <button *ngIf=\"isSandwichLeave && isCheckButton !== false\" class=\"btn btn-primary me-2\"\n (click)=\"confirmModal = true\">\n {{ 'APP_HRM_ATTENDANCE.CHECK' | customTranslate : 'Check' }}\n </button>\n\n <div class=\"search\">\n <div class=\"search-bar\">\n <img class=\"card-btn\" src=\"../assets/images/icons/general/Search.svg\">\n <input type=\"text\" placeholder=\"{{ 'APP.SEARCH' | customTranslate : 'Search' }}\" matInput\n (keyup)=\"searchConfigs ? emptySearch($event) : applyFilter($event)\"\n [value]=\" (searchConfigs || searchTextValue) ? searchBoxValue || '' : '' \" #input\n style=\"font-size: 13px !important;\">\n <img *ngIf=\"searchConfigs && searchBar\" (click)=\"onSearch(input.value)\"\n src=\"../assets/images/icons/general/configSearch.svg\" class=\"configSearch\">\n </div>\n </div>\n\n <!-- MR 09NOV26 Single toolbar button support from second-data-table -->\n <div class=\"flex\" *ngIf=\"button\">\n <app-fusion-button class=\"data-table-fsbtn ms-2 me-2\" (buttonClickEmit)=\"commonButtonClick($event, button)\"\n [buttonType]=\"button?.class || button?.buttonType\" [buttonValue]=\"button?.namePath || button?.labelPath || button?.name | customTranslate : button?.label || button?.name\"\n [buttonConfig]=\"button?.buttonConfig\" [type]=\"button?.type\" [fcBtnIconLeftSrc]=\"button?.btnIconLeftSrc || button?.fcBtnIconLeftSrc\"\n [isImageSvg]=\"button?.isImageSvg\">\n </app-fusion-button>\n </div>\n\n <!-- SKS24JAN25 single, group and dropdown dynamic buttons -->\n <div class=\"flex\" *ngIf=\"isButtons\" style=\"padding-left: 7px;\">\n <div class=\"flex\" *ngFor=\"let button of buttonArray\">\n <app-fusion-button class=\"data-table-fsbtn\" [buttonDisable]=\"button.buttonDisable\"\n [buttonLoadingSpinner]=\"buttonLoadingSpinner\" (buttonClickEmit)=\"commonButtonClick($event,button)\"\n [buttonType]=\"button.label === 'Export' ? 'grey-border rounded-3 bg-white text-dark' : button.class\"\n [buttonValue]=\"button.labelPath || button.namePath || button.name | customTranslate : button.label || button.name\"\n [buttonConfig]=\"button.buttonConfig\" [type]=\"button.type\" class=\"ms-2 me-2\"\n [fcBtnIconLeftSrc]=\"button.label === 'Export' ? '../assets/images/icons/general/upload-icon.svg' : button.fcBtnIconLeftSrc\" [isImageSvg]=\"button.label === 'Export' ? true : button.isImageSvg\">\n <!--SKS25OCT24 If the value is 'Import' or 'Export', this button does not work-->\n </app-fusion-button>\n </div>\n </div>\n \n </div>\n\n <!-- SK23FEB24 for adding new record in table -->\n <div class=\"flex cursor-pointer\" *ngIf=\"addInlineRecord\" (click)=\"addTableRecord(inlineElement)\"\n [matTooltip]=\"'APP.ADD_NEW_RECORD' | customTranslate : 'Add New Record'\">\n <div class=\"ms-1 me-1\">\n <!-- MR 30OCT26 Refactor inline html template styling to theme tokens -->\n <i class=\"fusion-icon fusion-icon-size-lg fusion-icon-add-square nav-icon\"\n style=\"color: var(--fb-text-primary, #0f172a) !important;\"></i>\n </div>\n </div>\n </div>\n </div>\n\n <!-- MR 09NOV26 Migration of Datatables and Tier 1 Primitives to fusion-ui: Attendance Top Legend Bar -->\n <div class=\"d-flex justify-content-between align-items-center top-legend-bar\" *ngIf=\"isAttendanceTable || displayedColumns.includes('employeeDetail') || (monthArray && monthArray.length > 0)\">\n <div class=\"d-flex align-items-center gap-3 flex-wrap\">\n <div class=\"d-flex align-items-center gap-1\">\n <span class=\"attendance-chip attendance-present\">✓</span>\n <span class=\"legend-text\">{{ 'APP_HRM_ATTENDANCE_TABLE.PREsENT' | customTranslate : 'Present' }}</span>\n </div>\n <div class=\"d-flex align-items-center gap-1\">\n <span class=\"attendance-chip attendance-absent\">✕</span>\n <span class=\"legend-text\">{{ 'APP_HRM_ATTENDANCE_TABLE.ABSENT' | customTranslate : 'Absent' }}</span>\n </div>\n <div class=\"d-flex align-items-center gap-1\">\n <span class=\"attendance-chip attendance-half\">½</span>\n <span class=\"legend-text\">{{ 'APP_HRM_ATTENDANCE_TABLE.HALF_DAY' | customTranslate : 'Half day' }}</span>\n </div>\n <div class=\"d-flex align-items-center gap-1\">\n <span class=\"attendance-chip attendance-holiday\">H</span>\n <span class=\"legend-text\">{{ 'APP_HRM_ATTENDANCE_TABLE.HOLIDAY' | customTranslate : 'Holiday' }}</span>\n </div>\n <div class=\"d-flex align-items-center gap-1\">\n <span class=\"attendance-chip attendance-weekoff\">-</span>\n <span class=\"legend-text\">{{ 'APP_HRM_ATTENDANCE_TABLE.WEEK_OFF' | customTranslate : 'Week Off' }}</span>\n </div>\n </div>\n <div class=\"table-subtitle\" *ngIf=\"titleOn && title\">\n {{ title | customTranslate : title }}\n </div>\n </div>\n\n <div class=\"table-margin\">\n <div class=\"table-container\" cdkScrollable> <!-- SKS3FEB25 The search filter closes when scrolling the table-->\n <!-- MSM28JAN25 MR 09NOV26 skeleton loader condition using isTableLoading --> \n <ng-container *ngIf=\"!isTableLoading; else loadingTemplate\">\n <table mat-table [dataSource]=\"dataSource || []\" [ngStyle]=\"{ width: tableWidth }\" matSort>\n <!-- Checkbox Columns -->\n <ng-container [sticky]=\"true\" class=\"checkboxCol\" *ngIf=\"withCheckBox\" matColumnDef=\"select\" sticky>\n <th mat-header-cell *matHeaderCellDef class=\"sticky-column head-color\" style=\"border-left: 1px solid var(--fb-border-default, #e2e8f0);\">\n <input type=\"checkbox\" (click)=\"$event.stopPropagation()\" (change)=\"masterToggle()\"\n [checked]=\"selection?.hasValue()\" [indeterminate]=\"selection?.hasValue() && !isAllSelected()\"\n class=\"custom-checkbox\" />\n </th>\n <td mat-cell *matCellDef=\"let row\" class=\"body-color\" >\n <!-- SK18OCT24 check payroll Inprogress/Completed from backend data -->\n <input type=\"checkbox\" class=\"custom-checkbox\"\n [title]=\"(fromWhere === 'payrollTable' || fromWhere === 'paySlip') ? (row?.payProcessComment || '') : ''\"\n (click)=\"$event.stopPropagation()\" (change)=\"separateRowSelect(row)\"\n [checked]=\"selection.isSelected(row)\"\n [disabled]=\"(fromWhere === 'payrollTable' && row.isPayProcessed === true) || (fromWhere === 'paySlip' && row.isPayProcessed === false)\" />\n </td>\n <td mat-footer-cell *matFooterCellDef>\n {{ \"\" }}\n </td>\n </ng-container>\n\n <!-- data Columns -->\n <!-- set the matColumnDef attribute to the column name and use interpolation to dynamically generate the mat-header-cell and mat-cell elements based on the column name-->\n <ng-container *ngFor=\"let column of displayedColumns; let i=index\" [matColumnDef]=\"column\"\n [stickyEnd]=\"i === (stickyCondition - 1) ? true : false\" [sticky]=\"stickyColumns.includes(column)\">\n <th mat-header-cell *matHeaderCellDef mat-sort-header\n style=\"border-right: 1px solid var(--fb-border-default, #e2e8f0);\" class=\"head-color ms-2 ps-2 pe-2\" \n [ngClass]=\"{'sticky-column': i === (stickyCondition - 1),'active-column': activeColumn === column,'first-header-border': i === 0}\"\n (click)=\"$event.stopPropagation(); onColumnClick(column)\">\n <span [class]=\"fromWhere === 'payrollTable' || fromWhere === 'paySlip' ? 'table-width' : '' \">{{\n (\n translatePath && translatePath[displayedColumns.indexOf(column)]\n ? translatePath[displayedColumns.indexOf(column)]\n : headerLabels[displayedColumns.indexOf(column)]\n )\n | customTranslate : headerLabels[displayedColumns.indexOf(column)]\n }}\n </span>\n <div (click)=\"$event.stopPropagation()\" class=\"position-relative\" cdk-overlay-origin\n #trigger=\"cdkOverlayOrigin\">\n <img class=\"ms-1\" *ngIf=\"filterColumns.includes(column)\" style=\"margin-bottom: 2px;\"\n (click)=\"filter(column)\" src=\"../assets/images/icons/general/filter-icon.svg\">\n </div>\n <ng-template cdk-connected-overlay [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"searchFilter === true && column === selectedFilter\"\n [cdkConnectedOverlayScrollStrategy]=\"createScrollStrategy()\"\n (overlayOutsideClick)=\"searchFilter = false\" (detach)=\"searchFilter = false\">\n <app-search-filter class=\"search-component position-absolute\"\n [class]=\"searchFilter === true && column === selectedFilter ? 'd-block' : 'd-none'\"\n [filterItems]=\"filterArray\" (emitValues)=\"filteredData($event)\" (click)=\"$event.stopPropagation()\">\n </app-search-filter>\n </ng-template>\n </th>\n <ng-container *ngIf=\"dataSource.data.length > 0\">\n <td mat-cell class=\"body-color ps-2 pe-2\" *matCellDef=\"let element; let j = index\"\n [class.active-column]=\"activeColumn === column\">\n <!-- SK29OCT25 employee detail column -->\n <div *ngIf=\"column === 'employeeDetail'\">\n <div class=\"d-flex flex-row\" style=\"left:0;\">\n <div *ngIf=\"element['employeeName'] || element['name']\"\n [class]=\"hyperLinkColumns.includes(column) ? 'hyper-link' : '' \"\n style=\"font-size: var(--fs-small);color: var(--fb-text-primary, #0f172a);font-weight: var(--fw-600);\">\n {{element[\"employeeName\"] || element[\"name\"] || ''}}</div>\n <div *ngIf=\"element['employeeId']\"\n style=\"font-size: 11px;color: var(--fb-text-secondary, #64748b);font-weight: var(--fw-400);\" class=\"ms-1\">\n [{{element[\"employeeId\"] || ''}}]</div>\n </div>\n <div class=\"d-flex flex-row\" *ngIf=\"element['designation'] && element['designation'] !== ''\">\n <div style=\"font-size: 10px;color: var(--fb-text-secondary, #64748b);font-weight: var(--fw-600);\">\n {{element[\"designation\"] || ''}}\n </div>\n <div *ngIf=\"element['designation'] && element['designation'] !== '' && element['location'] && element['location'] !== ''\"\n style=\"font-size: 10px;color: var(--fb-text-secondary, #64748b);font-weight: var(--fw-600);\">,</div>\n <div *ngIf=\"element['location'] && element['location'] !== ''\" style=\"font-size: 10px;color: var(--fb-text-secondary, #64748b);font-weight: var(--fw-600);\">\n {{element[\"location\"] || ''}}\n </div>\n </div>\n </div>\n <div *ngIf=\"column !== 'combinedColumn' && column !== 'employeeDetail' && fromWhere !== 'leaveMaster' && (column !== 'active' && (fromWhere === 'hrmTaxComponent' || fromWhere === 'payrollSettingComponent' || fromWhere === 'hrm' || fromWhere === 'compensation'|| fromWhere === 'payrollTable'|| fromWhere === 'payrollCompare'|| fromWhere === 'paySlip' || fromWhere === 'approval' || fromWhere === 'leave' || fromWhere === 'expense' || fromWhere === 'expenseApproval' || fromWhere === 'leaveAllocation' ||fromWhere === 'parkingApp' ||(fromWhere === 'common' && column != 'signature')))\">\n <!-- SK10APR24 getting the table values using pipe instead of function to increase performance-->\n <div *ngIf=\" ('-' | editColumnCheck: column : editColumn) === ('') \">\n <span class=\"font-size-13 {{checkHyperlinkCheck(column) || fromWhere === 'hrm' || fromWhere === 'compensation' || fromWhere === 'parkingApp' ? ' hyper-link clickable ' : ''}} {{fromWhere === 'payrollTable' || fromWhere === 'paySlip' ? 'table-width' : '' }}\"\n *ngIf=\"hyperLinkColumns.includes(column) || isFirstCell(column)\"\n (click)=\"tableClick(element); onClickHyperlink(column,element, j, checkHyperlinkCheck(column))\">\n <!--SKS21NOV24 Use customDateTime Pipe for both Date and Time -->\n <ng-container *ngIf=\"isDateColumn(column)\">\n {{ element[column] | customDate }}\n </ng-container>\n\n <ng-container *ngIf=\"isTimeColumn(column)\">\n {{ element[column] | customTime }}\n </ng-container>\n\n <!--SKS21NOV24 For other columns, display raw value -->\n <ng-container *ngIf=\"!isDateColumn(column) && !isTimeColumn(column)\">\n {{ '-' | getValue: element : column }}\n </ng-container>\n <!--SKS27NOV24 Check if the current column is in buttonColumn array -->\n <ng-container *ngIf=\"sideScreenColumn?.includes(column)\">\n <img class=\"ms-2\" src=\"../assets/images/icons/general/info.svg\"\n (click)=\"onInfoClick(element, column, j)\">\n </ng-container>\n <!--SKS9JAN25 rightnav column -->\n <ng-container *ngIf=\"objectColumns?.includes(column)\">\n <img class=\"ms-2\" src=\"../assets/images/icons/general/info.svg\"\n (click)=\"onSideNavInfoClick(element, column, j)\">\n </ng-container>\n </span>\n <div *ngIf=\"!isFirstCell(column) && !editColumn.includes(column) && column != 'receipt'\"\n [class]=\"fromWhere === 'payrollTable' || fromWhere === 'paySlip' ? 'table-width' : '' \">\n <div *ngIf=\"!checkHyperlinkCheck(column)\" class=\"font-size-13\">\n <!--SKS21NOV24 Use customDateTime Pipe for both Date and Time -->\n <ng-container *ngIf=\"isDateColumn(column)\">\n {{ element[column] | customDate }}\n </ng-container>\n\n <ng-container *ngIf=\"isTimeColumn(column)\">\n {{ element[column] | customTime }}\n </ng-container>\n\n <!--SKS21NOV24 For other columns, display raw value -->\n <ng-container *ngIf=\"!isDateColumn(column) && !isTimeColumn(column)\">\n {{ '-' | getValue: element : column }}\n </ng-container>\n <!--SKS27NOV24 Check if the current column is in buttonColumn array -->\n <ng-container *ngIf=\"sideScreenColumn?.includes(column)\">\n <img class=\"ms-2\" src=\"../assets/images/icons/general/info.svg\"\n (click)=\"onInfoClick(element, column, j)\">\n </ng-container>\n <!--SKS9JAN25 rightnav column -->\n <ng-container *ngIf=\"objectColumns?.includes(column)\">\n <img class=\"ms-2\" src=\"../assets/images/icons/general/info.svg\"\n (click)=\"onSideNavInfoClick(element, column, j)\">\n </ng-container>\n </div>\n </div>\n </div>\n <!-- SK27FEB24 added input box for inline edit input-->\n <div *ngIf=\"editColumn.length > 0\">\n <div *ngIf=\" ('-' | editColumnCheck: column : editColumn) === ('string') \" class=\"on-edit d-flex\">\n <input #editColElement class=\"lop-input table-width\" [class]=\"element?.editRow ? 'input-box' : '' \"\n matInput [placeholder]=\"'APP.ENTER' | customTranslate : 'Enter'\" [value]=\"element[column]\"\n [(ngModel)]=\"element[column]\" [readOnly]=\"element?.editRow ? false : true\">\n </div>\n <!-- SK10APR24 In table, like text input, added drop down and time inputs as well -->\n <div *ngIf=\" ('-' | editColumnCheck: column : editColumn) === ('object') \" class=\"on-edit d-flex\">\n <input *ngIf=\" ('-' | editColumnType: column : editColumn) === ('text') \" #editColElement\n class=\"lop-input table-width\" [class]=\"element?.editRow ? 'input-box' : '' \" matInput\n [placeholder]=\"'APP.ENTER' | customTranslate : 'Enter'\" [value]=\"element[column]\"\n [(ngModel)]=\"element[column]\" [readOnly]=\"element?.editRow ? false : true\">\n <input *ngIf=\" ('-' | editColumnType: column : editColumn) === ('time') \" type=\"time\"\n class=\"lop-input table-width\" matInput [class]=\"element?.editRow ? 'input-box' : '' \"\n placeholder=\"HH:mm:ss\" [(ngModel)]=\"element[column]\"\n [disabled]=\"element?.editRow ? false : true\" />\n <div *ngIf=\" ('-' | editColumnType: column : editColumn) === ('dropdown') \">\n <select type=\"dropdown\" *ngIf=\"element?.editRow\" class=\"lop-input table-width\" matInput\n [class]=\"element?.editRow ? 'input-box' : '' \" [(ngModel)]=\"element[column]\">\n <option [disabled]=\"element?.editRow ? false : true\"\n *ngFor=\"let data of [] | editColumnDropdown: column : editColumn \"\n [value]=\"data.value || data.name\">{{data.name}}</option>\n </select>\n <input *ngIf=\"!element?.editRow\" #editColElement class=\"lop-input table-width\"\n [class]=\"element?.editRow ? 'input-box' : '' \" matInput\n [placeholder]=\"'APP.ENTER' | customTranslate : 'Enter'\" [value]=\"element[column]\"\n [(ngModel)]=\"element[column]\" [readOnly]=\"true\">\n </div>\n\n </div>\n </div>\n <app-popover\n *ngIf=\"column === 'receipt' && !editColumn.includes(column) && receiptImg == true && element[column] && element[column].length != 0\"\n [isBootstrap]=\"false\" [dynamicPopover]=\"'Popover string comes here'\">\n <div class=\"hover-base\">\n <img class=\"ms-1\" src=\"../../../assets/images/icons/general/file-attach.svg\">\n </div>\n <div class=\"hover-content\">\n <div class=\"expenseCon\">\n <div *ngFor=\"let data of element[column] || []\">\n <div class=\"cursor-pointer expense-file\" (click)=\"expenseAttachment(data,element)\">{{data?.name}}\n <!-- SK20FEB26 loader in expense list-->\n <svg *ngIf=\"data?.loader\"\n class=\"svg-spinner card-icon color\"\n width=\"22\" height=\"22\" viewBox=\"0 0 50 50\"\n style=\"cursor: wait;\">\n <circle class=\"path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke-width=\"4\"></circle>\n </svg>\n </div>\n </div>\n </div>\n </div>\n </app-popover>\n </div>\n <div *ngIf=\"fromWhere === 'leaveMaster' && column !== 'employeeDetail' \">\n <div [class]=\"(element[column]) === 'Week Off' ? 'weekoff-color' : '' \" class=\"font-size-13\">{{\n (column == 'default' || column == 'active' || column == 'paidLeave') ? '' : element[column] }}</div>\n <input *ngIf=\"(column === 'default' || column === 'active' || column === 'paidLeave')\"\n class=\"custom-checkbox\" [checked]=\"element[column] == true\" type=\"checkbox\" disabled>\n </div>\n <div *ngIf=\"fromWhere === 'payrollSettingComponent' && column === 'combinedColumn'\">\n <!-- for the Payroll Settings Component ( Side Screen Component )-->\n <!-- Since the last column is a combination of data and it is also conditional based on the paytype and calculation type we are using this div-->\n <!-- if Component type is Earnings and\n calculationType is 'flat' then output should be => \"'payType\": Flat, Amount of 'amount'\"\n calculationType is 'percentage' then output should be => \"'payType': 'amount' % of Basic \"\n calculationType is 'fixed' then output should be => \"'payType': 'calculationType'\" -->\n <!-- SK20JUN25 to display in table -->\n <ng-container *ngIf=\"\n element?.calculationType === 'flat' ||\n element?.calculationType === 'percentage' ||\n element?.calculationType === 'basicAndDA' ||\n element?.calculationType === 'fixed' ||\n element?.calculationType === 'ctc';\n else noCalculation\n \">\n <span class=\"spanFontSize\" *ngIf=\"element['calculationType'] == 'flat' && element['isVariablePay']\"\n [class]=\"'calculationType-'+element['calculationType']\">{{'APP_HRM_PAYROLL_SETTINGS.VARIABLE_FLAT_AMOUNT'\n | customTranslate : 'Variable: Flat Amount: ' }}{{ (element['amount'] || 0)}}</span>\n <span class=\"spanFontSize\" *ngIf=\"element['calculationType'] == 'flat' && !element['isVariablePay']\"\n [class]=\"'calculationType-'+element['calculationType']\">{{'APP_HRM_PAYROLL_SETTINGS.FIXED_FLAT_AMOUNT'\n | customTranslate : 'Fixed: Flat Amount: ' }}{{ (element['amount'] || 0)}}</span>\n\n <span class=\"spanFontSize\"\n *ngIf=\"element['calculationType'] == 'percentage' && element['isVariablePay']\"\n [class]=\"'calculationType-'+element['calculationType']\">{{'APP_HRM_PAYROLL_SETTINGS.VARIABLE' |\n customTranslate : 'Variable: ' }}{{element['amount']}}{{ 'APP_HRM_PAYROLL_SETTINGS.PER_OF_BASIC' |\n customTranslate : '% of Basic'}}</span>\n <span class=\"spanFontSize\"\n *ngIf=\"element['calculationType'] == 'percentage' && !element['isVariablePay']\"\n [class]=\"'calculationType-'+element['calculationType']\">{{'APP_HRM_PAYROLL_SETTINGS.FIXED' |\n customTranslate : 'Fixed: ' }}{{ element['amount']}}{{ 'APP_HRM_PAYROLL_SETTINGS.PER_OF_BASIC' |\n customTranslate : '% of Basic'}}</span>\n\n <span class=\"spanFontSize\"\n *ngIf=\"element['calculationType'] == 'basicAndDA' && element['isVariablePay']\"\n [class]=\"'calculationType-'+element['calculationType']\">{{'APP_HRM_PAYROLL_SETTINGS.VARIABLE' |\n customTranslate : 'Variable: ' }}{{ element['amount']}}{{\n 'APP_HRM_PAYROLL_SETTINGS.PER_OF_BASIC_AND_DA' | customTranslate : '% of Basic and DA'}}</span>\n <span class=\"spanFontSize\"\n *ngIf=\"element['calculationType'] == 'basicAndDA' && !element['isVariablePay']\"\n [class]=\"'calculationType-'+element['calculationType']\">{{'APP_HRM_PAYROLL_SETTINGS.FIXED' |\n customTranslate : 'Fixed: ' }}{{ element['amount']}}{{\n 'APP_HRM_PAYROLL_SETTINGS.PER_OF_BASIC_AND_DA' | customTranslate : '% of Basic and DA'}}</span>\n\n <span class=\"spanFontSize\" *ngIf=\"element['calculationType'] == 'fixed' && element['isVariablePay']\"\n [class]=\"'calculationType-'+element['calculationType']\">{{'APP_HRM_PAYROLL_SETTINGS.VARIABLE' |\n customTranslate : 'Variable: ' }}{{ element['amount']}}{{ 'APP_HRM_PAYROLL_SETTINGS.PER_OF_GROSS'\n | customTranslate : '% of Gross'}}</span>\n <span class=\"spanFontSize\"\n *ngIf=\"element['calculationType'] == 'fixed' && !element['isVariablePay']\"\n [class]=\"'calculationType-'+element['calculationType']\">{{'APP_HRM_PAYROLL_SETTINGS.FIXED' |\n customTranslate : 'Fixed: ' }}{{ element['amount']}}{{ 'APP_HRM_PAYROLL_SETTINGS.PER_OF_GROSS' |\n customTranslate : '% of Gross'}}</span>\n\n <span class=\"spanFontSize\" *ngIf=\"element['calculationType'] == 'ctc' && !element['isVariablePay']\"\n [class]=\"'calculationType-'+element['calculationType']\"> {{'APP_HRM_PAYROLL_SETTINGS.FIXED' |\n customTranslate : 'Fixed: ' }} {{ element['amount'] }} {{\n 'APP_HRM_PAYROLL_SETTINGS.PER_OF_FIXED_CTC' | customTranslate : '% of Fixed CTC'}}</span>\n <span class=\"spanFontSize\" *ngIf=\"element['calculationType'] == 'ctc' && element['isVariablePay']\"\n [class]=\"'calculationType-'+element['calculationType']\">{{'APP_HRM_PAYROLL_SETTINGS.VARIABLE' |\n customTranslate : 'Variable: ' }}{{ element['amount'] }}{{\n 'APP_HRM_PAYROLL_SETTINGS.PER_OF_VARIABLE_CTC' | customTranslate : '% of Variable CTC'}}</span>\n </ng-container>\n\n <ng-template #noCalculation>\n <span class=\"spanFontSize\">-</span>\n </ng-template>\n </div>\n <div *ngIf=\"fromWhere === 'payrollSettingComponent' && column === 'active'\">\n <div class=\"form-check form-switch\">\n <input class=\"custom-checkbox\" type=\"checkbox\" [checked]=\"(element != null && element['active'] === true) ? true : false\"\n (click)=\"element[column]=!element[column]; onToggleChange.emit(fromWhere === 'payrollSettingComponent' ? element : '')\">\n </div>\n </div>\n </td>\n </ng-container>\n <!-- SK16JUL24 to get the sum of column data -->\n <td class=\"ps-2 pe-2 \" mat-footer-cell *matFooterCellDef=\"let element; let j = index\">\n {{ '-' | totalColumSum: data : cumulativeDataColumns : column }}\n </td>\n </ng-container>\n <!-- action button Columns -->\n <!-- SK19MAR25 \"action\" key is changed to \"tableAction\" wherever used, since, it has duplicate error -->\n <ng-container [stickyEnd]=\"true\" *ngIf=\"actionButton || isDeleteRow || isEditRow\"\n matColumnDef=\"tableAction\">\n <th mat-header-cell *matHeaderCellDef\n class=\"head-color action-size sticky-column actionCol text-center\" style=\"border-right: 1px solid var(--border-color, rgba(0, 0, 0, 0.12));\">{{ actionColumHeader |\n customTranslate : 'Action'}}</th>\n <td mat-cell *matCellDef=\"let element; let i=index\" class=\"body-color actionCol\">\n <!-- SKS25DEC24 clone button -->\n <div class=\"d-flex flex-row actionButton\"\n [style.justify-content]=\"conditionSendButton ? 'none' : 'center'\">\n <div *ngIf=\"(!conditionCloneButton) && cloneButton\" class=\"imgBtnDiv\">\n <img style=\"padding: 0px;\" (click)=\"onClone(element , i)\"\n src=\"../assets/images/icons/general/clone.svg\" class=\"imgBtn\" data-bs-toggle=\"modal\">\n </div>\n <div *ngIf=\"(conditionCloneButton) && isConditionMet(element, conditionCloneButton.conditions)\"\n class=\"ms-2 imgBtnDiv\" style=\"margin-top: 6px;\">\n <img style=\"padding: 0px;\" (click)=\"onClone(element , i)\"\n src=\"../assets/images/icons/general/clone.svg\" class=\"imgBtn\" data-bs-toggle=\"modal\">\n </div>\n <!-- SK20FEB26 Expense edit on Pending status -->\n <div *ngIf=\"element?.status === 'Rejected'|| fromWhere === 'leaveMaster' || fromWhere === 'payrollSettingComponent' || fromWhere === 'hrmTaxComponent' || isEditRow || (fromWhere == 'expense' && element?.status === 'Pending' )\">\n <app-fusion-button *ngIf=\"fromWhere == 'leave'\" [buttonType]=\"'text-only'\"\n [buttonValue]=\"'APP.COMMENTS' | customTranslate : 'comments' \"\n (buttonClickEmit)=\"onEdit(element?.rejectionReason, i, element?.status)\" data-bs-toggle=\"modal\"\n data-bs-target=\"#rejectInfoModal\">\n </app-fusion-button>\n <div class=\"imgBtnDiv\"\n *ngIf=\"((!conditionEditButton)&& ((fromWhere == 'expense' ) || fromWhere === 'leaveMaster' || fromWhere === 'payrollSettingComponent' || fromWhere === 'hrmTaxComponent' || isEditRow)) || (conditionEditButton && isConditionMet(element, conditionEditButton.conditions))\">\n <!-- MY 23OCT26 Disable edit action when expense is already Approved -->\n <i *ngIf=\"(!conditionEditButton)&& ((fromWhere == 'expense' ) || fromWhere === 'leaveMaster' || fromWhere === 'payrollSettingComponent' || fromWhere === 'hrmTaxComponent' || isEditRow)\"\n (click)=\"(fromWhere === 'expense' && element?.status?.toLowerCase() === 'approved') ? null : onEdit(fromWhere === 'payrollSettingComponent' || isEditRow ? element : element?._id, i, element?.status)\"\n [matTooltip]=\"(fromWhere === 'expense' && element?.status?.toLowerCase() === 'approved') ? ('APP_EXPENSE.CANNOT_EDIT_APPROVED' | customTranslate : 'Approved expenses cannot be edited') : ('APP.EDIT' | customTranslate : 'Edit')\"\n [style.opacity]=\"(fromWhere === 'expense' && element?.status?.toLowerCase() === 'approved') ? '0.35' : '1'\"\n [style.cursor]=\"(fromWhere === 'expense' && element?.status?.toLowerCase() === 'approved') ? 'not-allowed' : 'pointer'\"\n class=\"fusion-icon nav-icon fusion-icon-edit_pencil\" style=\"margin: 0px !important; font-size: var(--fs-normal, 16px) !important; color: var(--fc-sub-lite, #787486);\">\n </i>\n <i *ngIf=\"conditionEditButton && isConditionMet(element, conditionEditButton.conditions)\"\n [matTooltip]=\"(fromWhere === 'expense' && element?.status?.toLowerCase() === 'approved') ? ('APP_EXPENSE.CANNOT_EDIT_APPROVED' | customTranslate : 'Approved expenses cannot be edited') : ('APP.EDIT' | customTranslate : 'Edit')\"\n [style.opacity]=\"(fromWhere === 'expense' && element?.status?.toLowerCase() === 'approved') ? '0.35' : '1'\"\n [style.cursor]=\"(fromWhere === 'expense' && element?.status?.toLowerCase() === 'approved') ? 'not-allowed' : 'pointer'\"\n (click)=\"(fromWhere === 'expense' && element?.status?.toLowerCase() === 'approved') ? null : onEdit(fromWhere === 'payrollSettingComponent' || isEditRow ? element : element?._id, i)\"\n class=\"fusion-icon nav-icon fusion-icon-edit_pencil\" style=\"margin: 0px !important; font-size: var(--fs-normal, 16px) !important; color: var(--fc-sub-lite, #787486);\">\n </i>\n </div>\n <!-- <img *ngIf=\"fromWhere == 'expense'\" (click)=\"delete(element?._id)\" src=\"../assets/images/icons/Vectordelete.svg\"> -->\n </div>\n <div *ngIf=\"element?.leaveStatus === 'New' || element?.status === 'New' || element?.status === 'Pending' || element?.leaveStatus === 'Pending' || fromWhere === 'leaveMaster' || fromWhere === 'payrollSettingComponent' || fromWhere === 'hrmTaxComponent' || fromWhere == 'expenseApproval' || isDeleteRow\">\n <app-fusion-button *ngIf=\"fromWhere == 'leave'\" [buttonType]=\"'text-only'\"\n [buttonValue]=\"'APP.CANCEL' | customTranslate : 'Cancel'\" (buttonClickEmit)=\"delete(element, i)\"\n data-bs-toggle=\"modal\" data-bs-target=\"#cancelLeave\"></app-fusion-button>\n <!-- SKS21NOV24 Conditional rendering of delete icon based on various conditions -->\n <!-- Show the delete icon if 'conditionDeleteButton' is false and 'fromWhere' matches specific components or 'isDeleteRow' is true -->\n <div class=\"imgBtnDiv\"\n *ngIf=\"((!conditionDeleteButton)&&(fromWhere == 'expense' || fromWhere === 'leaveMaster' || fromWhere === 'payrollSettingComponent' || fromWhere === 'hrmTaxComponent' || isDeleteRow) )|| (conditionDeleteButton && isConditionMet(element, conditionDeleteButton.conditions))\">\n <img\n *ngIf=\"(!conditionDeleteButton)&&(fromWhere == 'expense' || fromWhere === 'leaveMaster' || fromWhere === 'payrollSettingComponent' || fromWhere === 'hrmTaxComponent' || isDeleteRow)\"\n class=\"imgBtn\" [matTooltip]=\"'APP.DELETE_RECORD' | customTranslate : 'Delete Record'\"\n (click)=\"deleteRecord(fromWhere === 'payrollSettingComponent' || isDeleteRow ? element : element?._id, i)\"\n src=\"../assets/images/icons/Vectordelete.svg\">\n <img *ngIf=\"conditionDeleteButton && isConditionMet(element, conditionDeleteButton.conditions)\"\n [matTooltip]=\"'APP.DELETE_RECORD' | customTranslate : 'Delete Record'\"\n (click)=\"deleteRecord(isDeleteRow ? element : element?._id, i)\" class=\"imgBtn\"\n src=\"../assets/images/icons/Vectordelete.svg\">\n </div>\n <div *ngIf=\"fromWhere == 'approval' || fromWhere == 'expenseApproval'\" class=\"flex imgBtnDiv\">\n <img\n *ngIf=\"(fromWhere === 'expenseApproval' && element?.status === 'Approved'&& element?.reImbursed !== 'Reimbursed') || fromWhere == 'approval'\"\n class=\"approval-image me-2\" style=\"padding: 0px; width: 24px !important;\"\n (click)=\"onApprove( element?.employeeId, element?._id, element?.reImbursed )\"\n src=\"../assets/images/icons/general/Approved.svg\">\n <img *ngIf=\"fromWhere !== 'expenseApproval'\" class=\"approval-image\"\n style=\"padding: 0px; width: 24px !important;\"\n (click)=\"onReject( element?.employeeId, element?._id )\"\n src=\"../assets/images/icons/general/Declined.svg\" class=\"\" data-bs-toggle=\"modal\"\n data-bs-target=\"#approvalReject\">\n </div>\n </div>\n <!-- SK02APR24 added preview and download icons -->\n <div *ngIf=\"viewIcon\" class=\"ms-2 imgBtnDiv\">\n <!-- <img [src]=\"('post.svg' | svgIcon:'#000000') | async\" class=\"card-icon color\" title=\"preview\" (click)=\"viewIconClick(element)\" style=\"cursor: pointer;\" /> -->\n <i class=\"fusion-icon fusion-icon-size-lg fusion-icon-eye nav-icon\" matTooltip=\"Preview\"\n matTooltipPosition=\"above\" style=\"color: var(--fc-text-color-light) !important; cursor: pointer;\"\n (click)=\"viewIconClick(element)\"></i>\n\n </div>\n <div *ngIf=\"downloadIcon\" class=\"ms-2 imgBtnDiv\">\n <i class=\"fusion-icon fusion-icon-size-lg fusion-icon-document-download card-icon color imgBtn\"\n matTooltip=\"Download\" matTooltipPosition=\"above\"\n style=\"cursor: pointer; color: var(--fc-text-color-light) !important;\"\n (click)=\"downloadIconClick(element)\">\n </i>\n </div>\n <!-- SKS25DEC24 send button -->\n <div *ngIf=\"(!conditionSendButton) && sendButton\" class=\"ms-2 imgBtnDiv\" style=\"margin-top: 6px;\">\n <i class=\"fusion-icon fusion-icon-size-lg fusion-icon-send-2 card-icon color imgBtn\"\n style=\"cursor: pointer\" (click)=\"onSend(element, i)\"\n [matTooltip]=\"'APP.SEND' | customTranslate : 'Send'\"></i>\n </div>\n <div\n *ngIf=\"(conditionSendButton) && isConditionMet(element, conditionSendButton.conditions) && sendButton\"\n class=\"ms-2 imgBtnDiv\" style=\"margin-top: 6px;\">\n <i class=\"fusion-icon fusion-icon-size-lg fusion-icon-send-2 card-icon color imgBtn\"\n style=\"cursor: pointer\" (click)=\"onSend(element, i)\"\n [matTooltip]=\"'APP.SEND' | customTranslate : 'Send'\"></i>\n </div>\n <!-- SKS25DEC24 active button -->\n <div *ngIf=\"(!conditionActivateButton) && activeButton\" class=\"ms-2 imgBtnDiv\"\n style=\"margin-top: 10px;\">\n <i class=\"fusion-icon fusion-icon-size-lg fusion-icon-group nav-icon\" style=\"color: var(--comp-bg-color, #ffffff);\"></i>\n </div>\n <div\n *ngIf=\"(conditionActivateButton) && isConditionMet(element, conditionActivateButton.conditions) && activeButton\"\n class=\"ms-2 imgBtnDiv\" style=\"margin-top: 10px;\">\n <i class=\"fusion-icon fusion-icon-size-lg fusion-icon-group nav-icon\" style=\"color: var(--comp-bg-color, #ffffff);\"></i>\n </div>\n <!-- SKS25DEC24 deactive button -->\n <div *ngIf=\"(!conditionDeactivateButton) && deactiveButton\" class=\"ms-2 imgBtnDiv\"\n style=\"margin-top: 10px;\">\n <i class=\"fusion-icon fusion-icon-size-lg fusion-icon-group nav-icon\" style=\"color: var(--comp-bg-color, #ffffff);\"></i>\n </div>\n <div\n *ngIf=\"(conditionDeactivateButton) && isConditionMet(element, conditionDeactivateButton.conditions) && deactiveButton\"\n class=\"ms-2 imgBtnDiv\" style=\"margin-top: 10px;\">\n <i class=\"fusion-icon fusion-icon-size-lg fusion-icon-group nav-icon\" style=\"color: var(--comp-bg-color, #ffffff);\"></i>\n </div>\n </div>\n <div>\n\n <app-fusion-button *ngIf=\"fromWhere == 'document-icons'\" [buttonType]=\"'custom-btn'\"\n [fcBtnIconLeftSrc]=\"'../assets/images/icons/general/downloadfile.svg'\"\n (buttonClickEmit)=\"downloadPdf(element)\"></app-fusion-button>\n <app-fusion-button *ngIf=\"fromWhere == 'document-icons'\" [buttonType]=\"'custom-btn'\"\n [fcBtnIconLeftSrc]=\"'../assets/images/icons/general/pencil-icon.svg'\"\n (buttonClickEmit)=\"delete(element, i)\" data-bs-toggle=\"modal\"\n data-bs-target=\"#documentsInfoModal\"></app-fusion-button>\n <app-fusion-button *ngIf=\"fromWhere == 'document-icons'\" [buttonType]=\"'custom-btn'\"\n [fcBtnIconLeftSrc]=\"'../assets/images/icons/Vectordelete.svg'\"\n (buttonClickEmit)=\"delete(element, i)\" data-bs-toggle=\"modal\"\n data-bs-target=\"#deleteDocModal\"></app-fusion-button>\n </div>\n </td>\n <td mat-footer-cell *matFooterCellDef=\"let element; let i=index\">{{ \"\" }}\n </td>\n </ng-container>\n\n <!-- total Row -->\n <ng-container [sticky]=\"true\" matColumnDef=\"total\">\n <th mat-header-cell *matHeaderCellDef class=\"sticky-column head-color\">\n </th>\n <td mat-cell *matCellDef=\"let row\" class=\"body-color\">\n </td>\n <!-- RS27AUG24 -->\n <!-- Used the translate pipe to successfully implement the translation -->\n <td mat-footer-cell *matFooterCellDef >{{'APP.TOTAL' | customTranslate : 'Total' }}\n </td>\n </ng-container>\n\n <!-- Render the columns -->\n <!-- SK16JUL24 adding the cumulative data row as footer -->\n <!-- <ng-container *ngIf=\"dataSource?.data?.length !== 0\"> -->\n <div [ngSwitch]=\"renderColumns\">\n <div *ngSwitchCase=\"'select'\">\n <tr mat-header-row *matHeaderRowDef=\"['select'].concat(displayedColumns) sticky: true\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: ['select'].concat(displayedColumns);\"></tr>\n <!-- SK19JUL24 table total update -->\n <tr\n [class]=\"cumulativeDataColumns != undefined && cumulativeDataColumns.length !== 0 ? '' : 'border border-white' \"\n mat-footer-row\n *matFooterRowDef=\"cumulativeDataColumns != undefined && cumulativeDataColumns.length !== 0 ? ['total'].concat(displayedColumns) : null \">\n </tr>\n </div>\n <div *ngSwitchCase=\"'tableAction'\">\n <tr mat-header-row\n *matHeaderRowDef=\" displayedColumns ? displayedColumns.concat(['tableAction']) : [] ;sticky: true\">\n </tr>\n <tr mat-row\n *matRowDef=\"let row; columns: displayedColumns ? displayedColumns.concat(['tableAction']) : []; \">\n </tr>\n <ng-container *ngIf=\"cumulativeDataColumns\">\n <tr\n [class]=\"cumulativeDataColumns != undefined && cumulativeDataColumns.length !== 0 ? '' : 'border border-white' \"\n mat-footer-row\n *matFooterRowDef=\"cumulativeDataColumns != undefined && cumulativeDataColumns.length !== 0 ? ['total'].concat(displayedColumns).concat('tableAction') : null\">\n </tr>\n </ng-container>\n </div>\n <!-- 30JAN24 for both checkbox and action columns-->\n <div *ngSwitchCase=\"'both'\">\n <tr mat-header-row\n *matHeaderRowDef=\"['select'].concat(displayedColumns).concat('tableAction') sticky: true\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: ['select'].concat(displayedColumns).concat('tableAction')\"\n (click)=\"tableClick(row)\"></tr>\n <ng-container *ngIf=\"cumulativeDataColumns\">\n <tr\n [class]=\"cumulativeDataColumns != undefined && cumulativeDataColumns.length !== 0 ? '' : 'border border-white' \"\n mat-footer-row\n *matFooterRowDef=\"cumulativeDataColumns != undefined && cumulativeDataColumns.length !== 0 ? ['total'].concat(displayedColumns).concat('tableAction') : null\">\n </tr>\n </ng-container>\n </div>\n <div *ngSwitchDefault>\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns sticky: true\"></tr>\n <tr mat-row *matRowDef=\"let row;let i =index; columns: displayedColumns;\"></tr>\n <ng-container *ngIf=\"cumulativeDataColumns\">\n <tr\n [class]=\"cumulativeDataColumns != undefined && cumulativeDataColumns.length !== 0 ? 'd-block' : 'border border-white' \"\n mat-footer-row\n *matFooterRowDef=\"cumulativeDataColumns != undefined && cumulativeDataColumns.length !== 0 ? ['total'].concat(displayedColumns) : null\">\n </tr>\n </ng-container>\n </div>\n </div>\n <!-- </ng-container> -->\n <!-- <tr class=\"mat-row \" *matNoDataRow> -->\n <!-- SK9JAN24 Removed attr.colspan since it throws undefined error -->\n <!-- <td class=\"mat-cell \">\n {{'APP.NO_RECORDS' | customTranslate : 'No records/data found.' }}\n </td>\n </tr> -->\n\n </table>\n <div class=\"no-data-cell text-center my-3 \" *ngIf=\"!dataSource || !dataSource.data || dataSource.data.length === 0\">\n {{ 'APP.NO_RECORDS' | customTranslate : 'No records/data found.' }}\n </div>\n </ng-container>\n <!-- MSM28JAN25 skeleton loader template -->\n <ng-template #loadingTemplate>\n <table>\n <tr style=\"height: 40px;\" *ngFor=\"let _ of [1, 2, 3, 4,5,6]\">\n <td colspan=\"3\" class=\"skeleton-card\">\n <div class=\"title\" data-title>\n <div class=\"skeleton skeleton-text\"></div>\n <div class=\"skeleton skeleton-text\"></div>\n </div>\n </td>\n </tr>\n </table>\n </ng-template>\n </div>\n <!-- SK23FEB24 table input save button changes -->\n <div class=\"d-flex justify-content-end\">\n <div class=\"flex mt-4 me-2 cursor-pointer\" *ngIf=\"addInlineRecord \" (click)=\"addTableRecord(inlineElement)\"\n [matTooltip]=\"'APP.ADD_NEW_RECORD' | customTranslate : 'Add New Record'\">\n <div class=\"ms-1 me-1\">\n <i class=\"fusion-icon fusion-icon-size-lg fusion-icon-add-square nav-icon\"\n style=\"color: var(--fc-text-color-dark, #000000) !important;\"></i>\n </div>\n </div>\n <!-- SK27FEB24 removed button disable logic, SK13MAR24 added another condition for button showing-->\n <!-- SR06JAN2025 button disable logic for not select any employee-->\n <div class=\"d-flex justify-content-between align-items-end\">\n <div class=\"px-2\">\n {{notes}}</div>\n\n <app-fusion-button [buttonLoadingSpinner]=\"tableSaveLoadingSpinner\"\n *ngIf=\"editColumn.length > 0 || tableSaveButton\" buttonType=\"btn btn-primary mt-4 me-2\"\n [buttonDisable]=\"selection?.selected?.length === 0\" (buttonClickEmit)=\"saveButton()\"\n buttonValue=\"{{ 'APP.SAVE' | customTranslate : 'Save' }}\"></app-fusion-button>\n </div>\n </div>\n <!-- SKS24JAN25 custom paginator -->\n <app-pagination #paginator [pageSizeOptions]=\"itemsPerPage\" [collectionSize]=\"totalCount\" [pageSize]=\"pageSize\"\n [currentPage]=\"pageIndex\" [firstLastButtons]=\"true\" (event)=\"pageParams($event)\" >\n </app-pagination>\n </div>\n </div>\n</div>\n\n<!-- SK03OCT24 while clicking export button, side screen will be displayed, with fields selection and filter boxes -->\n<app-common-screen *ngIf=\"exportSidescreen\" headerTitle=\"{{'APP.EXPORT_DATA' | customTranslate : 'Export Data'}}\"\n (sideScreenEmittedEvent)=\"exportSidescreen = false\">\n <div class=\"side-main-content\">\n <!-- MY 15OCT26 export file button loader -->\n <div\n class=\"d-flex align-items-center flex-row p-3 justify-content-center cursor-pointer short-button-white-bg button-hov\"\n [class.disabled]=\"exportButtonLoadingSpinner\"\n (click)=\"!exportButtonLoadingSpinner ? exportButtonSideNav() : null\">\n <div *ngIf=\"exportButtonLoadingSpinner\" class=\"spinner-grow spinner-grow-sm me-2\" role=\"status\" aria-hidden=\"true\"></div>\n <i *ngIf=\"!exportButtonLoadingSpinner\" class=\"fusion-icon fusion-icon-size-lg fusion-icon-document-upload card-icon color me-1\"></i>\n <div>{{ exportButtonLoadingSpinner ? (('APP_SETTINGS_APPS.LOADING' | customTranslate : 'Loading') + '...') : ('APP.EXPORT_FILE' | customTranslate : 'Export File') }}</div>\n </div>\n <!-- SK03OCT24 displaying components from parent (multipleCheckBox/multipleFilter) -->\n <div *ngFor=\"let type of filterScreenConfigs\">\n <!-- MY 15OCT26 pass button loader state to multi-checkbox and multiple-filter -->\n <app-multi-checkbox *ngIf=\"type.type === 'multipleCheckBox' \" class=\"ms-2 me-2\"\n [label]=\"type?.labelPath || type?.label | customTranslate : type?.label\" [cardSize]=\"type?.cardSize\"\n [cardInlineSize]=\"type?.cardInlineSize\" [checkboxList]=\"type?.checkboxList\"\n [activeCheckboxList]=\"type?.activeCheckboxList\" [buttonList]=\"type?.buttons\"\n [displayValues]=\"type?.displayValues\" [componentData]=\"type\" [checkBoxStyles]=\"type?.checkBoxStyles\"\n [isButtonLoadingSpinner]=\"type?.isButtonLoadingSpinner || false\"\n (compDataEmit)=\"exportFieldsButtonEmit($event)\">\n </app-multi-checkbox>\n <app-multiple-filter *ngIf=\"type.type === 'multipleFilter' \" class=\"ms-2 me-2\"\n [isDateFilter]=\"type?.isDateFilter || false\"\n [label]=\"type?.labelPath || type?.label | customTranslate : type?.label\" [cardSize]=\"type?.cardSize\"\n [cardInlineSize]=\"type?.cardInlineSize\" [buttonList]=\"type?.buttons\" [displayValues]=\"type?.displayValues\"\n [componentData]=\"type\" [checkBoxStyles]=\"type?.checkBoxStyles\" [selectionData]=\"type?.selectionData\"\n [isButtonLoadingSpinner]=\"type?.isButtonLoadingSpinner || false\"\n (compDataEmit)=\"exportFilterButtonEmit($event)\" (selectedValuesEmit)=\"selectedValuesEmit($event)\"\n (filterDateEmit)=\"filterDateEmit($event)\">\n </app-multiple-filter>\n </div>\n </div>\n</app-common-screen>\n<!-- SKS15DEC25 bulk upload -->\n<app-file-upload [id]=\"'uploadEmployee'\" [headerName]=\"moudleName\" [showFileModal]=\"uploadModal\"\n (closeEmit)=\"uploadModal = false\"\n [bodyHeaderName]=\"('APP.STEPS_TO_UPLOAD' | customTranslate : 'Steps to upload')+moudleName\" [isTemplate]=true\n [templateContent]=\"('APP.DOWNLOAD_THE' | customTranslate : 'Download the')+ moudleName +('APP.TEMPLATE' | customTranslate : 'template')\"\n (templateDownload)=\"downloadTemplate()\"\n [bodyContent]=\"[(('APP.FILL_THE_APPROP' | customTranslate : 'Fill the appropriate')+moudleName+('APP.DETAILS_AND_UPLOAD_ITS_BELOW' | customTranslate : 'Details and upload it below'))]\"\n [fileRestrictions]=\"{\n allowedTypes: ['.csv', '.xlsx', '.xls'],\n maxFileSize: 10,\n maxFiles: 1\n }\" [uploadedFiles]=\"[]\" [saveButtonName]=\"'APP.UPLOAD' | customTranslate : 'Upload'\"\n (upload)=\"uploadRecordsFile($event)\">\n</app-file-upload>\n<!-- SK06NOV24 alert on deleting record -->\n<div *ngIf=\"deleteModal\" class=\"modal modal-backdrop show d-block\" id=\"deleteRecord\" tabindex=\"-1\"\n aria-labelledby=\"deleteRecordLabel\" [attr.aria-hidden]=\"!deleteModal\">\n <div class=\"modal-dialog\">\n <div class=\"modal-content\">\n <div class=\"modal-header\">\n <b class=\"modal-title fs-5\" id=\"deleteRecordLabel\">{{'APP.DELETE_RECORD' | customTranslate : 'Delete Record'}}</b>\n <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"\n (click)=\"deleteModal = false\"></button>\n </div>\n <div class=\"modal-body\">\n {{'APP.ARE_YOU_SURE_YOU_WANT_TO_DELETE_THE_REC' | customTranslate : 'Are you sure want to delete the record'}} ?\n </div>\n <div class=\"modal-footer\">\n <button type=\"button\" class=\"btn btn-primary\" data-bs-dismiss=\"modal\" aria-label=\"Close\"\n (click)=\"!buttonLoadingSpinner ? deleteRecordData() : null\">\n <!-- SK04SEP25 button loader -->\n <span class=\"{{ buttonLoadingSpinner ? 'spinner-grow' : '' }} spinner-grow-sm\" role=\"buttonValue\"\n aria-hidden=\"true\"></span>\n <span>{{ buttonLoadingSpinner ? ('APP_SETTINGS_APPS.LOADING' | customTranslate : 'Loading') + '...' :\n ('APP.YES' | customTranslate : 'Yes') }}\n </span>\n </button>\n <button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\" (click)=\"deleteModal = false\">{{'APP.NO'\n | customTranslate : 'No'}}</button>\n </div>\n </div>\n </div>\n</div>\n\n<app-common-screen *ngIf=\"infoSidescreen\" [headerTitle]=\"'APP.APPROVAL_DETAILS' | customTranslate : 'Approval Details'\"\n (sideScreenEmittedEvent)=\"infoSidescreen = false\">\n <div class=\"side-main-content container\">\n <div class=\"row\">\n <div class=\"col-md-12\">\n <!-- Approval Info -->\n <div class=\"row mb-3\">\n <div class=\"col-6 text-start\">{{'APP.NAME' | customTranslate : 'Name'}}:</div>\n <div class=\"col-6 text-start\">{{ infoData.name || ''}}</div>\n </div>\n <div class=\"row mb-3\">\n <div class=\"col-6 text-start\">{{'APP.STATUS' | customTranslate : 'Status'}}:</div>\n <div class=\"col-6 text-start\">\n <span\n *ngIf=\"infoData.status === 'Approved' || infoData.status === 'Pending' || infoData.status === 'Rejected' \"\n class=\"badge custom-badge\" [ngClass]=\"{\n 'bg-success': infoData.status === 'Approved', \n 'bg-warning': infoData.status === 'Pending',\n 'bg-danger': infoData.status === 'Rejected'}\">\n {{ infoData.status }}</span>\n <span\n *ngIf=\"infoData.status !== 'Approved' && infoData.status !== 'Pending' && infoData.status !== 'Rejected' \">{{\n infoData.status || '' }}</span>\n </div>\n </div>\n <div class=\"row mb-3\">\n <!-- SK21DEC24 to add Approval status in side screen-->\n <div class=\"col-6 text-start\">{{'APP.APPROVAL_STATUS' | customTranslate : 'Approval Status'}}:</div>\n <div class=\"col-6 text-start\">\n <span\n *ngIf=\"infoData.leaveStatus === 'Approved' || infoData.leaveStatus === 'Pending' || infoData.leaveStatus === 'Rejected'\"\n class=\"badge custom-badge\" [ngClass]=\"{\n 'bg-success': infoData.leaveStatus === 'Approved', \n 'bg-warning': infoData.leaveStatus === 'Pending',\n 'bg-danger': infoData.leaveStatus === 'Rejected'}\">\n {{ infoData.leaveStatus || '' }}</span>\n <span\n *ngIf=\"infoData.leaveStatus !== 'Approved' && infoData.leaveStatus !== 'Pending' && infoData.leaveStatus !== 'Rejected'\">{{\n infoData.leaveStatus || '' }}</span>\n </div>\n </div>\n <div class=\"row mb-3\">\n <div class=\"col-6 text-start\">{{'APP.REASON' | customTranslate : 'Reason'}}:</div>\n <div class=\"col-6 text-start\">{{ infoData.reason || '' }}</div>\n </div>\n <div class=\"row mb-3\">\n <div class=\"col-6 text-start\">{{'APP.TYPE' | customTranslate : 'Type'}}:</div>\n <div class=\"col-6 text-start\">{{ infoData.type || ''}}</div>\n </div>\n <div class=\"row mb-3\">\n <div class=\"col-6 text-start\">{{'APP.APPLIED_ON' | customTranslate : 'Applied On'}}:</div>\n <div class=\"col-6 text-start\">{{ (infoData.appliedOn | date:'short') || '' }}</div>\n </div>\n <div class=\"row mb-3\">\n <div class=\"col-6 text-start\">{{'APP.APPROVED_COUNT' | customTranslate : 'Approved Count'}}:</div>\n <div class=\"col-6 text-start\">{{ infoData.approvedCount || '' }}</div>\n </div>\n </div>\n </div>\n <!-- Approval Managers -->\n <!-- SK03DEC24 show approval managers list only if applicable -->\n <h3 *ngIf=\"infoData.approvalManagers != undefined && infoData.approvalManagers.length > 0\" class=\"text-center mb-3\">\n {{'APP.APPROVAL_MANAGERS' | customTranslate : 'Approval Managers'}}</h3>\n <ul *ngIf=\"infoData.approvalManagers != undefined && infoData.approvalManagers.length > 0\" class=\"list-group\">\n <li *ngFor=\"let manager of infoData.approvalManagers\" class=\"list-group-item\">\n <div class=\"row mb-3\">\n <div class=\"col-6 text-start\">{{'APP.EMPLOYEE_ID' | customTranslate : 'Employee ID'}}:</div>\n <div class=\"col-6 text-start\">{{ manager.employeeId || ''}}</div>\n </div>\n <div class=\"row mb-3\">\n <!-- SK10DEC24 to show manager name -->\n <div class=\"col-6 text-start\">{{'APP.EMPLOYEE_NAME' | customTranslate : 'Employee Name'}}:</div>\n <div class=\"col-6 text-start\">{{ manager.name || '' }}</div>\n </div>\n <div class=\"row mb-3\">\n <div class=\"col-6 text-start\">{{'APP.APPROVAL_ORDER' | customTranslate : 'Approval Order'}}:</div>\n <div class=\"col-6 text-start\">{{ manager.approvalOrder || '' }}</div>\n </div>\n <div class=\"row mb-3\">\n <div class=\"col-6 text-start\">{{'APP.STATUS' | customTranslate : 'Status'}}:</div>\n <div class=\"col-6 text-start\">\n <span *ngIf=\"manager.status === 'Approved' || manager.status === 'Pending' || manager.status === 'Rejected'\"\n class=\"badge custom-badge\" [ngClass]=\"{\n 'bg-success': manager.status === 'Approved', \n 'bg-warning': manager.status === 'Pending',\n 'bg-danger': manager.status === 'Rejected'}\">\n {{ manager.status || '' }}\n </span>\n <span\n *ngIf=\"manager.status !== 'Approved' && manager.status !== 'Pending' && manager.status !== 'Rejected'\"> {{\n manager.status || '' }}</span>\n </div>\n </div>\n <div class=\"row mb-3\" *ngIf=\"manager.viewedOn\">\n <div class=\"col-6 text-start\">{{'APP.VIEWED_ON' | customTranslate : 'Viewed On'}}:</div>\n <div class=\"col-6 text-start\">{{ (manager.viewedOn | date:'short') || '' }}</div>\n </div>\n <div class=\"row mb-3\">\n <div class=\"col-6 text-start\">{{'APP.IS_OPTIONAL' | customTranslate : 'Is Optional'}}:</div>\n <div class=\"col-6 text-start\">{{ manager.isOptional ? \"Yes\" : \"No\" }}</div>\n </div>\n <div class=\"row mb-3\">\n <div class=\"col-6 text-start\">{{'APP.COMMENTS' | customTranslate : 'Comments'}}:</div>\n <div class=\"col-6 text-start\">{{ manager.rejectionReason || '' }}</div>\n </div>\n </li>\n </ul>\n </div>\n</app-common-screen>\n\n<!-- MR 09NOV26 Sandwich Leave Confirmation Modal -->\n<div *ngIf=\"confirmModal\" class=\"custom-modal-overlay\">\n <div class=\"custom-modal\">\n <div class=\"custom-modal-header\">\n <b>{{ 'APP_HRM_ATTENDANCE.CHECK_ATTENDANCE' | customTranslate : 'Check Attendance' }}</b>\n <button class=\"close-button\" (click)=\"confirmModal = false\">×</button>\n </div>\n <div class=\"custom-modal-body\">\n {{ 'APP_HRM_ATTENDANCE.CONFIRM_CHECK' | customTranslate : 'Are you sure you want to run attendance check?' }}\n </div>\n <div class=\"custom-modal-footer\">\n <button class=\"btn btn-primary\" (click)=\"checkButtonClicked(); confirmModal = false\">{{ 'APP.YES' | customTranslate : 'Yes' }}</button>\n <button class=\"btn btn-secondary ms-2\" (click)=\"confirmModal = false\">{{ 'APP.NO' | customTranslate : 'No' }}</button>\n </div>\n </div>\n</div>",
|
|
6885
6903
|
styles: [".table-wrapper{overflow-x:auto;max-width:100%}.table-container{border-top:1px solid var(--fb-border-default, #e2e8f0);min-height:100px;overflow:auto;width:100%;max-height:62vh}.table-layout{background:var(--fb-surface, #ffffff);border-radius:8px}.th{border-bottom:1px solid var(--fb-border-default, #e2e8f0);font-weight:var(--fw-600);font-size:var(--fs-medium);line-height:21px;color:var(--fb-text-primary, #0f172a)}.head-color{background-color:var(--fb-action-surface, #e0f2fe)!important;color:var(--fb-text-primary, #0f172a)!important}.body-color{color:var(--fb-text-primary, #0f172a);cursor:default}.search{display:flex;align-items:center;border:1px solid var(--border-color, #b1b1b1);background:var(--comp-bg-color, #ffffff);border-radius:var(--radius-medium, 7px);padding:4px 8px}.search-bar{display:flex;align-items:center;width:100%;gap:6px;margin:0}.search-bar input{background:transparent!important;border:none!important;outline:none!important;box-shadow:none!important;width:100%;font-size:13px;color:var(--fc-text-color, #1e293b);padding:2px 4px}th.mat-header-cell:last-of-type{padding:0;font-weight:var(--fw-600);font-size:var(--fs-medium);color:var(--fb-text-primary, #0f172a)}td.mat-cell:last-of-type{padding:8px;font-weight:var(--fw-400);font-size:var(--fs-medium);color:var(--fb-text-primary, #0f172a)}.table-title{font-weight:var(--fw-600);color:var(--fb-text-primary, #0f172a)}.sticky-column{background:var(--fb-surface, #ffffff)}.mat-sort-header-container{margin-left:5px}.body-color img{cursor:pointer}.head-color.action-size{color:var(--fb-text-primary, #0f172a);font-size:var(--fs-primary);font-weight:var(--fw-600)}.lop-input{border-radius:5px;color:var(--fb-text-primary, #0f172a);background-color:var(--fb-surface, #ffffff);font-weight:var(--fw-400);font-size:var(--fs-medium);transition:all .2s}::ng-deep [dir=rtl] .body-color img{margin-left:4px!important}@media screen and (min-width:600px){mat-table{font-weight:var(--fw-400);font-size:var(--fs-medium);color:var(--fb-text-primary, #0f172a)}}@media screen and (max-width:882px){mat-table{font-weight:var(--fw-400);font-size:var(--fs-medium);color:var(--fb-text-primary, #0f172a)}.mat-cell{padding:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mat-header-cell{padding:0}}th.mat-header-cell:first-of-type,td.mat-cell:first-of-type,td.mat-footer-cell:first-of-type{padding-right:24px}::ng-deep [dir=rtl] th.mat-header-cell:last-of-type:not(:only-of-type){padding-right:10px!important;padding-left:unset!important}.mat-sort-header-container.mat-focus-indicator.ng-tns-c139-34{margin-left:5px}.expense-file{font-size:var(--fs-small)}.expense-file:hover{font-style:italic;text-decoration:underline;color:var(--fb-action-hover, #00284d)}.expenseCon{background-color:var(--fb-surface-elevated, #ffffff);border:1px solid var(--fb-border-default, #e2e8f0);padding:5px;border-radius:3px}.hyper-link{text-decoration:none}.hyper-link:hover{color:var(--fb-action, #003566);text-decoration:underline}.clickable{cursor:pointer}.font-size-13{font-size:var(--fs-normal)}.weekoff-color{color:var(--fb-error, #ef4444)}.table-width{width:max-content}.on-edit:hover .edit-icon{visibility:visible}.edit-icon{visibility:hidden}.input-box{border:solid}.button-hov:hover{background:var(--fb-action, #003566);color:var(--fb-text-on-action, #ffffff)}.delete-icon{justify-content:center}.side-main-content{border-radius:10px}h2{font-size:28px}.list-group-item{margin-bottom:10px;padding:15px}.list-group-item p{margin-bottom:5px}.custom-badge{display:inline-block;width:50%;text-align:center;padding:.3em 0;margin-top:0!important}.bg-success{--bs-bg-opacity: 1;background-color:var(--fb-success-surface, #e6f4ea)!important;color:var(--fb-success-text, #137333)!important}.custom-search-button{background-color:var(--fb-action, #003566);color:var(--fb-text-on-action, #ffffff);border-radius:5px;font-size:var(--fs-normal);border:none}.custom-search-button:hover{background-color:var(--fb-action-hover, #00284d)}.custom-search-button:active{transform:translateY(0)}.table{border-top:1px solid var(--fb-border-default, #e2e8f0)}th,td{vertical-align:middle}.configSearch{height:22px;padding:3px;margin:10p;background-color:var(--fb-action, #003566);border-radius:4px}::ng-deep .table>:not(caption)>*>*{background-color:none!important;--bs-table-bg: var(--fb-surface, #ffffff) !important}.imgBtn{background-color:var(--fb-surface-secondary, #f8fafc);border-radius:var(--radius-small, 6px)}.imgBtnDiv{line-height:0px;padding:4px;border-radius:5px;border:1px solid var(--fb-border-default, #e2e8f0)}input::placeholder{font-size:var(--fs-small);font-weight:var(--fw-400);color:var(--fb-placeholder-text, #94a3b8)}::ng-deep .modal-backdrop{background-color:var(--fb-backdrop, #00000073)!important}::ng-deep .modal-backdrop.show{background-color:var(--fb-backdrop, #00000073)!important;opacity:1!important}::ng-deep .mat-sort-header-container .mat-sort-header-content span{color:var(--fb-text-primary, #0f172a)!important;font-weight:var(--fw-600)!important;font-size:var(--fs-primary)!important}::ng-deep .mat-mdc-cell{color:var(--fb-text-primary, #0f172a)!important;font-weight:var(--fw-400)!important;font-size:var(--fs-primary)!important;min-width:20px!important}.active-column{color:var(--fb-text-primary, #0f172a)!important;font-weight:var(--fw-600)!important;font-size:var(--fs-primary)!important}.hover-content{background:var(--fb-surface-elevated, #ffffff)}.position-relative{position:relative;display:inline-block}.filter-popup{position:absolute;top:100%;left:0;z-index:9998;background-color:var(--fb-surface-elevated, #ffffff);border:1px solid var(--fb-border-default, #e2e8f0);box-shadow:0 4px 12px var(--fb-backdrop, rgba(0, 0, 0, .08));padding:10px;min-width:200px}.spanFontSize{font-size:var(--fs-normal)}.mat-column-employees{width:200px;min-width:200px;padding-left:8px;height:57px;left:0!important}.text-start{font-size:var(--fs-normal)}.first-header-border{border-left:1px solid var(--fb-border-default, #e2e8f0)}tr{height:45px!important;text-wrap:nowrap!important}.field-input{width:min(220px,98%);min-height:50px}.svg-spinner{animation:rotate 1s linear infinite}.svg-spinner .path{stroke:var(--fb-action, #003566);stroke-linecap:round;stroke-dasharray:80 150;stroke-width:4}@keyframes rotate{to{transform:rotate(360deg)}}img{max-width:none!important;vertical-align:middle}::ng-deep .mat-mdc-row:hover{background-color:var(--fb-row-hover, #f8fafc)!important}::ng-deep .mat-mdc-row:nth-child(2n){background-color:var(--fb-row-alternate, #fcfdfe)}.top-legend-bar{border-top:1px solid var(--fb-border-default, #e2e8f0);padding:8px 12px;font-size:var(--fs-small, 12px);background:var(--fb-surface, #ffffff)}.legend-text{font-size:var(--fs-small, 12px);color:var(--fc-text-color-dark, #0f172a);font-weight:var(--fw-500, 500)}.attendance-chip{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:4px;font-size:11px;font-weight:600}.attendance-present{background:#dcfce7;color:#15803d}.attendance-absent{background:#fee2e2;color:#b91c1c}.attendance-half{background:#fef3c7;color:#b45309}.attendance-holiday{background:#e0e7ff;color:#4338ca}.attendance-weekoff{background:#f1f5f9;color:#64748b}.picker-container{display:flex;align-items:center;gap:8px;padding:4px 8px;border:1px solid var(--fb-border-default, #e2e8f0);border-radius:6px;background:var(--fb-surface, #ffffff);margin-right:8px}.picker-container .arrow-btn{cursor:pointer;font-size:14px}.picker-container .month-label{cursor:pointer;font-weight:var(--fw-600, 600);font-size:13px;min-width:100px;text-align:center}.popup{position:absolute;z-index:1000;background:var(--comp-bg-color, #ffffff);border:1px solid var(--border-color, #e2e8f0);border-radius:8px;box-shadow:0 4px 12px #0000001a;padding:12px;width:220px}.year-section{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-weight:600}.year-section i{cursor:pointer}.month-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.month-item{padding:6px;text-align:center;cursor:pointer;border-radius:4px;font-size:12px}.month-item:hover,.month-item.active{background:var(--fb-action, #003566);color:#fff}.custom-modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#0006;display:flex;align-items:center;justify-content:center;z-index:1050}.custom-modal{background:var(--comp-bg-color, #ffffff);border-radius:8px;width:450px;max-width:90%;box-shadow:0 5px 15px #0003;overflow:hidden}.custom-modal-header{padding:12px 16px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border-color, #e2e8f0)}.custom-modal-body{padding:16px;font-size:14px}.custom-modal-footer{padding:12px 16px;display:flex;justify-content:flex-end;border-top:1px solid var(--border-color, #e2e8f0)}.close-button{background:none;border:none;font-size:1.25rem;cursor:pointer}\n"],
|
|
6886
6904
|
dependencies: [
|
|
6887
6905
|
{
|
|
@@ -7469,7 +7487,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
7469
7487
|
provide: MatPaginatorIntl,
|
|
7470
7488
|
useClass: CustomPaginatorIntl
|
|
7471
7489
|
}],
|
|
7472
|
-
template: "<div class=\"table-layout\" [id]=\"tableId\" style=\"padding-top: 1px;\">\n <div>\n <!-- SK30JAN25 title added -->\n <div class=\"d-flex justify-content-center table-title align-text-center\">\n {{title}}\n </div>\n \n <div class=\"flex justify-content-between\" style=\"padding-bottom: 5px;\">\n <div class=\"d-flex align-items-center\">\n <!-- MR 09NOV26 table-toolbar-left projection slot -->\n <ng-content select=\"[table-toolbar-left]\"></ng-content>\n\n <!-- MR 09NOV26 Month / Year Picker -->\n <div class=\"picker-container\" *ngIf=\"monthArray && monthArray.length > 0\">\n <i class=\"arrow-btn fusion-icon fusion-icon-size-lg fusion-icon-arrow-left-1 nav-icon\"\n (click)=\"prevMonth()\" style=\"color: var(--fc-text-color-dark, #000000) !important;\"></i>\n <span class=\"month-label\" (click)=\"togglePopup()\">\n {{ months[selectedMonth] }} {{ selectedYear }}\n </span>\n <i class=\"arrow-btn fusion-icon fusion-icon-size-lg fusion-icon-arrow-right-1 nav-icon\"\n (click)=\"nextMonth()\" style=\"color: var(--fc-text-color-dark, #000000) !important;\"></i>\n </div>\n <div class=\"popup\" *ngIf=\"popupOpen\">\n <div class=\"year-section\">\n <i class=\"fusion-icon fusion-icon-size-lg fusion-icon-arrow-left-1 nav-icon\" (click)=\"changeYear(-1)\"\n style=\"color: var(--fc-text-color-dark, #000000) !important;\"></i>\n <span>{{ selectedYear }}</span>\n <i class=\"fusion-icon fusion-icon-size-lg fusion-icon-arrow-right-1 nav-icon\" (click)=\"changeYear(1)\"\n style=\"color: var(--fc-text-color-dark, #000000) !important;\"></i>\n </div>\n\n <div class=\"month-grid\">\n <div class=\"month-item\" *ngFor=\"let m of (monthArray || months); let i = index\" [class.active]=\"i === selectedMonth\"\n (click)=\"selectMonth(i)\">\n {{ m | slice:0:3 }}\n </div>\n </div>\n </div>\n\n <div *ngIf=\"dateDropdown \">\n <app-drop-down class=\"field-input\" [lists]='dropdownLists' dropDownHeight=\"38px\" dropDownWidth=\"200px\"\n (dataEmit)=\"dropdownEmitFunction($event)\" [selectedData]=\"dropdownSelectedData\"></app-drop-down>\n </div>\n <!-- SC11NOV2025 if isDatePicker is true then show the date picker -->\n <div *ngIf=\"isDatePicker\">\n <app-drop-down [lists]='list' [selectedData]=\"selectedData\" dropDownHeight=\"42px\" dropFontWeight=\"500\"\n dropFontSize=\"12px\" dropFontColor=\"#434555\" dropBorderRadius=\"5px\" dropDownWidth=\"200px\"\n (dataEmit)=\"dateFilter($event)\"></app-drop-down>\n </div>\n </div>\n <!-- SKS24JAN25 show Nos in table -->\n <!-- <div style=\"display: flex; align-items: center;\">\n <p *ngIf=\"totalRecords || totalCount\" style=\"font-weight: var(--fw-500); margin-right: 5px; margin-bottom: 0px;\">{{'APP.NOS' | customTranslate : 'Nos'}} </p> <span style=\"color: var(--fc-primary-color, rgb(43, 87, 249));\">{{totalRecords || totalCount}}</span>\n </div> -->\n <!-- SKS24JAN25 search bar config and nonconfig -->\n <div style=\"margin-left:auto;\">\n <div class=\"flex\" style=\"align-items: center;\">\n <!-- MR 09NOV26 table-toolbar-right projection slot -->\n <ng-content select=\"[table-toolbar-right]\"></ng-content>\n\n <!-- MR 09NOV26 Sandwich leave check button -->\n <button *ngIf=\"isSandwichLeave && isCheckButton !== false\" class=\"btn btn-primary me-2\"\n (click)=\"confirmModal = true\">\n {{ 'APP_HRM_ATTENDANCE.CHECK' | customTranslate : 'Check' }}\n </button>\n\n <div class=\"search\">\n <div class=\"search-bar\">\n <img class=\"card-btn\" src=\"../assets/images/icons/general/Search.svg\">\n <input type=\"text\" placeholder=\"{{ 'APP.SEARCH' | customTranslate : 'Search' }}\" matInput\n (keyup)=\"searchConfigs ? emptySearch($event) : applyFilter($event)\"\n [value]=\" (searchConfigs || searchTextValue) ? searchBoxValue || '' : '' \" #input\n style=\"font-size: 13px !important;\">\n <img *ngIf=\"searchConfigs && searchBar\" (click)=\"onSearch(input.value)\"\n src=\"../assets/images/icons/general/configSearch.svg\" class=\"configSearch\">\n </div>\n </div>\n\n <!-- MR 09NOV26 Single toolbar button support from second-data-table -->\n <div class=\"flex\" *ngIf=\"button\">\n <app-fusion-button class=\"data-table-fsbtn ms-2 me-2\" (buttonClickEmit)=\"commonButtonClick($event, button)\"\n [buttonType]=\"button?.class || button?.buttonType\" [buttonValue]=\"button?.namePath || button?.labelPath || button?.name | customTranslate : button?.label || button?.name\"\n [buttonConfig]=\"button?.buttonConfig\" [type]=\"button?.type\" [fcBtnIconLeftSrc]=\"button?.btnIconLeftSrc || button?.fcBtnIconLeftSrc\"\n [isImageSvg]=\"button?.isImageSvg\">\n </app-fusion-button>\n </div>\n\n <!-- SKS24JAN25 single, group and dropdown dynamic buttons -->\n <div class=\"flex\" *ngIf=\"isButtons\" style=\"padding-left: 7px;\">\n <div class=\"flex\" *ngFor=\"let button of buttonArray\">\n <app-fusion-button class=\"data-table-fsbtn\" [buttonDisable]=\"button.buttonDisable\"\n [buttonLoadingSpinner]=\"buttonLoadingSpinner\" (buttonClickEmit)=\"commonButtonClick($event,button)\"\n [buttonType]=\"button.label === 'Export' ? 'grey-border rounded-3 bg-white text-dark' : button.class\"\n [buttonValue]=\"button.labelPath || button.namePath || button.name | customTranslate : button.label || button.name\"\n [buttonConfig]=\"button.buttonConfig\" [type]=\"button.type\" class=\"ms-2 me-2\"\n [fcBtnIconLeftSrc]=\"button.label === 'Export' ? '../assets/images/icons/general/upload-icon.svg' : button.fcBtnIconLeftSrc\" [isImageSvg]=\"button.label === 'Export' ? true : button.isImageSvg\">\n <!--SKS25OCT24 If the value is 'Import' or 'Export', this button does not work-->\n </app-fusion-button>\n </div>\n </div>\n \n </div>\n\n <!-- SK23FEB24 for adding new record in table -->\n <div class=\"flex cursor-pointer\" *ngIf=\"addInlineRecord\" (click)=\"addTableRecord(inlineElement)\"\n [matTooltip]=\"'APP.ADD_NEW_RECORD' | customTranslate : 'Add New Record'\">\n <div class=\"ms-1 me-1\">\n <!-- MR 30OCT26 Refactor inline html template styling to theme tokens -->\n <i class=\"fusion-icon fusion-icon-size-lg fusion-icon-add-square nav-icon\"\n style=\"color: var(--fb-text-primary, #0f172a) !important;\"></i>\n </div>\n </div>\n </div>\n </div>\n\n <!-- MR 09NOV26 Migration of Datatables and Tier 1 Primitives to fusion-ui: Attendance Top Legend Bar -->\n <div class=\"d-flex justify-content-between align-items-center top-legend-bar\" *ngIf=\"isAttendanceTable || displayedColumns.includes('employeeDetail') || (monthArray && monthArray.length > 0)\">\n <div class=\"d-flex align-items-center gap-3 flex-wrap\">\n <div class=\"d-flex align-items-center gap-1\">\n <span class=\"attendance-chip attendance-present\">✓</span>\n <span class=\"legend-text\">{{ 'APP_HRM_ATTENDANCE_TABLE.PREsENT' | customTranslate : 'Present' }}</span>\n </div>\n <div class=\"d-flex align-items-center gap-1\">\n <span class=\"attendance-chip attendance-absent\">✕</span>\n <span class=\"legend-text\">{{ 'APP_HRM_ATTENDANCE_TABLE.ABSENT' | customTranslate : 'Absent' }}</span>\n </div>\n <div class=\"d-flex align-items-center gap-1\">\n <span class=\"attendance-chip attendance-half\">½</span>\n <span class=\"legend-text\">{{ 'APP_HRM_ATTENDANCE_TABLE.HALF_DAY' | customTranslate : 'Half day' }}</span>\n </div>\n <div class=\"d-flex align-items-center gap-1\">\n <span class=\"attendance-chip attendance-holiday\">H</span>\n <span class=\"legend-text\">{{ 'APP_HRM_ATTENDANCE_TABLE.HOLIDAY' | customTranslate : 'Holiday' }}</span>\n </div>\n <div class=\"d-flex align-items-center gap-1\">\n <span class=\"attendance-chip attendance-weekoff\">-</span>\n <span class=\"legend-text\">{{ 'APP_HRM_ATTENDANCE_TABLE.WEEK_OFF' | customTranslate : 'Week Off' }}</span>\n </div>\n </div>\n <div class=\"table-subtitle\" *ngIf=\"titleOn && title\">\n {{ title | customTranslate : title }}\n </div>\n </div>\n\n <div class=\"table-margin\">\n <div class=\"table-container\" cdkScrollable> <!-- SKS3FEB25 The search filter closes when scrolling the table-->\n <!-- MSM28JAN25 skeleton loader condition --> \n <ng-container *ngIf=\"!isLoading[tableId] || isLoading[tableId]?.length === 0; else loadingTemplate\">\n <table mat-table [dataSource]=\"dataSource || []\" [ngStyle]=\"{ width: tableWidth }\" matSort>\n <!-- Checkbox Columns -->\n <ng-container [sticky]=\"true\" class=\"checkboxCol\" *ngIf=\"withCheckBox\" matColumnDef=\"select\" sticky>\n <th mat-header-cell *matHeaderCellDef class=\"sticky-column head-color\" style=\"border-left: 1px solid var(--fb-border-default, #e2e8f0);\">\n <input type=\"checkbox\" (click)=\"$event.stopPropagation()\" (change)=\"masterToggle()\"\n [checked]=\"selection?.hasValue()\" [indeterminate]=\"selection?.hasValue() && !isAllSelected()\"\n class=\"custom-checkbox\" />\n </th>\n <td mat-cell *matCellDef=\"let row\" class=\"body-color\" >\n <!-- SK18OCT24 check payroll Inprogress/Completed from backend data -->\n <input type=\"checkbox\" class=\"custom-checkbox\"\n [title]=\"(fromWhere === 'payrollTable' || fromWhere === 'paySlip') ? (row?.payProcessComment || '') : ''\"\n (click)=\"$event.stopPropagation()\" (change)=\"separateRowSelect(row)\"\n [checked]=\"selection.isSelected(row)\"\n [disabled]=\"(fromWhere === 'payrollTable' && row.isPayProcessed === true) || (fromWhere === 'paySlip' && row.isPayProcessed === false)\" />\n </td>\n <td mat-footer-cell *matFooterCellDef>\n {{ \"\" }}\n </td>\n </ng-container>\n\n <!-- data Columns -->\n <!-- set the matColumnDef attribute to the column name and use interpolation to dynamically generate the mat-header-cell and mat-cell elements based on the column name-->\n <ng-container *ngFor=\"let column of displayedColumns; let i=index\" [matColumnDef]=\"column\"\n [stickyEnd]=\"i === (stickyCondition - 1) ? true : false\" [sticky]=\"stickyColumns.includes(column)\">\n <th mat-header-cell *matHeaderCellDef mat-sort-header\n style=\"border-right: 1px solid var(--fb-border-default, #e2e8f0);\" class=\"head-color ms-2 ps-2 pe-2\" \n [ngClass]=\"{'sticky-column': i === (stickyCondition - 1),'active-column': activeColumn === column,'first-header-border': i === 0}\"\n (click)=\"$event.stopPropagation(); onColumnClick(column)\">\n <span [class]=\"fromWhere === 'payrollTable' || fromWhere === 'paySlip' ? 'table-width' : '' \">{{\n (\n translatePath && translatePath[displayedColumns.indexOf(column)]\n ? translatePath[displayedColumns.indexOf(column)]\n : headerLabels[displayedColumns.indexOf(column)]\n )\n | customTranslate : headerLabels[displayedColumns.indexOf(column)]\n }}\n </span>\n <div (click)=\"$event.stopPropagation()\" class=\"position-relative\" cdk-overlay-origin\n #trigger=\"cdkOverlayOrigin\">\n <img class=\"ms-1\" *ngIf=\"filterColumns.includes(column)\" style=\"margin-bottom: 2px;\"\n (click)=\"filter(column)\" src=\"../assets/images/icons/general/filter-icon.svg\">\n </div>\n <ng-template cdk-connected-overlay [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"searchFilter === true && column === selectedFilter\"\n [cdkConnectedOverlayScrollStrategy]=\"createScrollStrategy()\"\n (overlayOutsideClick)=\"searchFilter = false\" (detach)=\"searchFilter = false\">\n <app-search-filter class=\"search-component position-absolute\"\n [class]=\"searchFilter === true && column === selectedFilter ? 'd-block' : 'd-none'\"\n [filterItems]=\"filterArray\" (emitValues)=\"filteredData($event)\" (click)=\"$event.stopPropagation()\">\n </app-search-filter>\n </ng-template>\n </th>\n <ng-container *ngIf=\"dataSource.data.length > 0\">\n <td mat-cell class=\"body-color ps-2 pe-2\" *matCellDef=\"let element; let j = index\"\n [class.active-column]=\"activeColumn === column\">\n <!-- SK29OCT25 employee detail column -->\n <div *ngIf=\"column === 'employeeDetail'\">\n <div class=\"d-flex flex-row\" style=\"left:0;\">\n <div *ngIf=\"element['employeeName'] || element['name']\"\n [class]=\"hyperLinkColumns.includes(column) ? 'hyper-link' : '' \"\n style=\"font-size: var(--fs-small);color: var(--fb-text-primary, #0f172a);font-weight: var(--fw-600);\">\n {{element[\"employeeName\"] || element[\"name\"] || ''}}</div>\n <div *ngIf=\"element['employeeId']\"\n style=\"font-size: 11px;color: var(--fb-text-secondary, #64748b);font-weight: var(--fw-400);\" class=\"ms-1\">\n [{{element[\"employeeId\"] || ''}}]</div>\n </div>\n <div class=\"d-flex flex-row\" *ngIf=\"element['designation'] && element['designation'] !== ''\">\n <div style=\"font-size: 10px;color: var(--fb-text-secondary, #64748b);font-weight: var(--fw-600);\">\n {{element[\"designation\"] || ''}}\n </div>\n <div *ngIf=\"element['designation'] && element['designation'] !== '' && element['location'] && element['location'] !== ''\"\n style=\"font-size: 10px;color: var(--fb-text-secondary, #64748b);font-weight: var(--fw-600);\">,</div>\n <div *ngIf=\"element['location'] && element['location'] !== ''\" style=\"font-size: 10px;color: var(--fb-text-secondary, #64748b);font-weight: var(--fw-600);\">\n {{element[\"location\"] || ''}}\n </div>\n </div>\n </div>\n <div *ngIf=\"column !== 'combinedColumn' && column !== 'employeeDetail' && fromWhere !== 'leaveMaster' && (column !== 'active' && (fromWhere === 'hrmTaxComponent' || fromWhere === 'payrollSettingComponent' || fromWhere === 'hrm' || fromWhere === 'compensation'|| fromWhere === 'payrollTable'|| fromWhere === 'payrollCompare'|| fromWhere === 'paySlip' || fromWhere === 'approval' || fromWhere === 'leave' || fromWhere === 'expense' || fromWhere === 'expenseApproval' || fromWhere === 'leaveAllocation' ||fromWhere === 'parkingApp' ||(fromWhere === 'common' && column != 'signature')))\">\n <!-- SK10APR24 getting the table values using pipe instead of function to increase performance-->\n <div *ngIf=\" ('-' | editColumnCheck: column : editColumn) === ('') \">\n <span class=\"font-size-13 {{checkHyperlinkCheck(column) || fromWhere === 'hrm' || fromWhere === 'compensation' || fromWhere === 'parkingApp' ? ' hyper-link clickable ' : ''}} {{fromWhere === 'payrollTable' || fromWhere === 'paySlip' ? 'table-width' : '' }}\"\n *ngIf=\"hyperLinkColumns.includes(column) || isFirstCell(column)\"\n (click)=\"tableClick(element); onClickHyperlink(column,element, j, checkHyperlinkCheck(column))\">\n <!--SKS21NOV24 Use customDateTime Pipe for both Date and Time -->\n <ng-container *ngIf=\"isDateColumn(column)\">\n {{ element[column] | customDate }}\n </ng-container>\n\n <ng-container *ngIf=\"isTimeColumn(column)\">\n {{ element[column] | customTime }}\n </ng-container>\n\n <!--SKS21NOV24 For other columns, display raw value -->\n <ng-container *ngIf=\"!isDateColumn(column) && !isTimeColumn(column)\">\n {{ '-' | getValue: element : column }}\n </ng-container>\n <!--SKS27NOV24 Check if the current column is in buttonColumn array -->\n <ng-container *ngIf=\"sideScreenColumn?.includes(column)\">\n <img class=\"ms-2\" src=\"../assets/images/icons/general/info.svg\"\n (click)=\"onInfoClick(element, column, j)\">\n </ng-container>\n <!--SKS9JAN25 rightnav column -->\n <ng-container *ngIf=\"objectColumns?.includes(column)\">\n <img class=\"ms-2\" src=\"../assets/images/icons/general/info.svg\"\n (click)=\"onSideNavInfoClick(element, column, j)\">\n </ng-container>\n </span>\n <div *ngIf=\"!isFirstCell(column) && !editColumn.includes(column) && column != 'receipt'\"\n [class]=\"fromWhere === 'payrollTable' || fromWhere === 'paySlip' ? 'table-width' : '' \">\n <div *ngIf=\"!checkHyperlinkCheck(column)\" class=\"font-size-13\">\n <!--SKS21NOV24 Use customDateTime Pipe for both Date and Time -->\n <ng-container *ngIf=\"isDateColumn(column)\">\n {{ element[column] | customDate }}\n </ng-container>\n\n <ng-container *ngIf=\"isTimeColumn(column)\">\n {{ element[column] | customTime }}\n </ng-container>\n\n <!--SKS21NOV24 For other columns, display raw value -->\n <ng-container *ngIf=\"!isDateColumn(column) && !isTimeColumn(column)\">\n {{ '-' | getValue: element : column }}\n </ng-container>\n <!--SKS27NOV24 Check if the current column is in buttonColumn array -->\n <ng-container *ngIf=\"sideScreenColumn?.includes(column)\">\n <img class=\"ms-2\" src=\"../assets/images/icons/general/info.svg\"\n (click)=\"onInfoClick(element, column, j)\">\n </ng-container>\n <!--SKS9JAN25 rightnav column -->\n <ng-container *ngIf=\"objectColumns?.includes(column)\">\n <img class=\"ms-2\" src=\"../assets/images/icons/general/info.svg\"\n (click)=\"onSideNavInfoClick(element, column, j)\">\n </ng-container>\n </div>\n </div>\n </div>\n <!-- SK27FEB24 added input box for inline edit input-->\n <div *ngIf=\"editColumn.length > 0\">\n <div *ngIf=\" ('-' | editColumnCheck: column : editColumn) === ('string') \" class=\"on-edit d-flex\">\n <input #editColElement class=\"lop-input table-width\" [class]=\"element?.editRow ? 'input-box' : '' \"\n matInput [placeholder]=\"'APP.ENTER' | customTranslate : 'Enter'\" [value]=\"element[column]\"\n [(ngModel)]=\"element[column]\" [readOnly]=\"element?.editRow ? false : true\">\n </div>\n <!-- SK10APR24 In table, like text input, added drop down and time inputs as well -->\n <div *ngIf=\" ('-' | editColumnCheck: column : editColumn) === ('object') \" class=\"on-edit d-flex\">\n <input *ngIf=\" ('-' | editColumnType: column : editColumn) === ('text') \" #editColElement\n class=\"lop-input table-width\" [class]=\"element?.editRow ? 'input-box' : '' \" matInput\n [placeholder]=\"'APP.ENTER' | customTranslate : 'Enter'\" [value]=\"element[column]\"\n [(ngModel)]=\"element[column]\" [readOnly]=\"element?.editRow ? false : true\">\n <input *ngIf=\" ('-' | editColumnType: column : editColumn) === ('time') \" type=\"time\"\n class=\"lop-input table-width\" matInput [class]=\"element?.editRow ? 'input-box' : '' \"\n placeholder=\"HH:mm:ss\" [(ngModel)]=\"element[column]\"\n [disabled]=\"element?.editRow ? false : true\" />\n <div *ngIf=\" ('-' | editColumnType: column : editColumn) === ('dropdown') \">\n <select type=\"dropdown\" *ngIf=\"element?.editRow\" class=\"lop-input table-width\" matInput\n [class]=\"element?.editRow ? 'input-box' : '' \" [(ngModel)]=\"element[column]\">\n <option [disabled]=\"element?.editRow ? false : true\"\n *ngFor=\"let data of [] | editColumnDropdown: column : editColumn \"\n [value]=\"data.value || data.name\">{{data.name}}</option>\n </select>\n <input *ngIf=\"!element?.editRow\" #editColElement class=\"lop-input table-width\"\n [class]=\"element?.editRow ? 'input-box' : '' \" matInput\n [placeholder]=\"'APP.ENTER' | customTranslate : 'Enter'\" [value]=\"element[column]\"\n [(ngModel)]=\"element[column]\" [readOnly]=\"true\">\n </div>\n\n </div>\n </div>\n <app-popover\n *ngIf=\"column === 'receipt' && !editColumn.includes(column) && receiptImg == true && element[column] && element[column].length != 0\"\n [isBootstrap]=\"false\" [dynamicPopover]=\"'Popover string comes here'\">\n <div class=\"hover-base\">\n <img class=\"ms-1\" src=\"../../../assets/images/icons/general/file-attach.svg\">\n </div>\n <div class=\"hover-content\">\n <div class=\"expenseCon\">\n <div *ngFor=\"let data of element[column] || []\">\n <div class=\"cursor-pointer expense-file\" (click)=\"expenseAttachment(data,element)\">{{data?.name}}\n <!-- SK20FEB26 loader in expense list-->\n <svg *ngIf=\"data?.loader\"\n class=\"svg-spinner card-icon color\"\n width=\"22\" height=\"22\" viewBox=\"0 0 50 50\"\n style=\"cursor: wait;\">\n <circle class=\"path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke-width=\"4\"></circle>\n </svg>\n </div>\n </div>\n </div>\n </div>\n </app-popover>\n </div>\n <div *ngIf=\"fromWhere === 'leaveMaster' && column !== 'employeeDetail' \">\n <div [class]=\"(element[column]) === 'Week Off' ? 'weekoff-color' : '' \" class=\"font-size-13\">{{\n (column == 'default' || column == 'active' || column == 'paidLeave') ? '' : element[column] }}</div>\n <input *ngIf=\"(column === 'default' || column === 'active' || column === 'paidLeave')\"\n class=\"custom-checkbox\" [checked]=\"element[column] == true\" type=\"checkbox\" disabled>\n </div>\n <div *ngIf=\"fromWhere === 'payrollSettingComponent' && column === 'combinedColumn'\">\n <!-- for the Payroll Settings Component ( Side Screen Component )-->\n <!-- Since the last column is a combination of data and it is also conditional based on the paytype and calculation type we are using this div-->\n <!-- if Component type is Earnings and\n calculationType is 'flat' then output should be => \"'payType\": Flat, Amount of 'amount'\"\n calculationType is 'percentage' then output should be => \"'payType': 'amount' % of Basic \"\n calculationType is 'fixed' then output should be => \"'payType': 'calculationType'\" -->\n <!-- SK20JUN25 to display in table -->\n <ng-container *ngIf=\"\n element?.calculationType === 'flat' ||\n element?.calculationType === 'percentage' ||\n element?.calculationType === 'basicAndDA' ||\n element?.calculationType === 'fixed' ||\n element?.calculationType === 'ctc';\n else noCalculation\n \">\n <span class=\"spanFontSize\" *ngIf=\"element['calculationType'] == 'flat' && element['isVariablePay']\"\n [class]=\"'calculationType-'+element['calculationType']\">{{'APP_HRM_PAYROLL_SETTINGS.VARIABLE_FLAT_AMOUNT'\n | customTranslate : 'Variable: Flat Amount: ' }}{{ (element['amount'] || 0)}}</span>\n <span class=\"spanFontSize\" *ngIf=\"element['calculationType'] == 'flat' && !element['isVariablePay']\"\n [class]=\"'calculationType-'+element['calculationType']\">{{'APP_HRM_PAYROLL_SETTINGS.FIXED_FLAT_AMOUNT'\n | customTranslate : 'Fixed: Flat Amount: ' }}{{ (element['amount'] || 0)}}</span>\n\n <span class=\"spanFontSize\"\n *ngIf=\"element['calculationType'] == 'percentage' && element['isVariablePay']\"\n [class]=\"'calculationType-'+element['calculationType']\">{{'APP_HRM_PAYROLL_SETTINGS.VARIABLE' |\n customTranslate : 'Variable: ' }}{{element['amount']}}{{ 'APP_HRM_PAYROLL_SETTINGS.PER_OF_BASIC' |\n customTranslate : '% of Basic'}}</span>\n <span class=\"spanFontSize\"\n *ngIf=\"element['calculationType'] == 'percentage' && !element['isVariablePay']\"\n [class]=\"'calculationType-'+element['calculationType']\">{{'APP_HRM_PAYROLL_SETTINGS.FIXED' |\n customTranslate : 'Fixed: ' }}{{ element['amount']}}{{ 'APP_HRM_PAYROLL_SETTINGS.PER_OF_BASIC' |\n customTranslate : '% of Basic'}}</span>\n\n <span class=\"spanFontSize\"\n *ngIf=\"element['calculationType'] == 'basicAndDA' && element['isVariablePay']\"\n [class]=\"'calculationType-'+element['calculationType']\">{{'APP_HRM_PAYROLL_SETTINGS.VARIABLE' |\n customTranslate : 'Variable: ' }}{{ element['amount']}}{{\n 'APP_HRM_PAYROLL_SETTINGS.PER_OF_BASIC_AND_DA' | customTranslate : '% of Basic and DA'}}</span>\n <span class=\"spanFontSize\"\n *ngIf=\"element['calculationType'] == 'basicAndDA' && !element['isVariablePay']\"\n [class]=\"'calculationType-'+element['calculationType']\">{{'APP_HRM_PAYROLL_SETTINGS.FIXED' |\n customTranslate : 'Fixed: ' }}{{ element['amount']}}{{\n 'APP_HRM_PAYROLL_SETTINGS.PER_OF_BASIC_AND_DA' | customTranslate : '% of Basic and DA'}}</span>\n\n <span class=\"spanFontSize\" *ngIf=\"element['calculationType'] == 'fixed' && element['isVariablePay']\"\n [class]=\"'calculationType-'+element['calculationType']\">{{'APP_HRM_PAYROLL_SETTINGS.VARIABLE' |\n customTranslate : 'Variable: ' }}{{ element['amount']}}{{ 'APP_HRM_PAYROLL_SETTINGS.PER_OF_GROSS'\n | customTranslate : '% of Gross'}}</span>\n <span class=\"spanFontSize\"\n *ngIf=\"element['calculationType'] == 'fixed' && !element['isVariablePay']\"\n [class]=\"'calculationType-'+element['calculationType']\">{{'APP_HRM_PAYROLL_SETTINGS.FIXED' |\n customTranslate : 'Fixed: ' }}{{ element['amount']}}{{ 'APP_HRM_PAYROLL_SETTINGS.PER_OF_GROSS' |\n customTranslate : '% of Gross'}}</span>\n\n <span class=\"spanFontSize\" *ngIf=\"element['calculationType'] == 'ctc' && !element['isVariablePay']\"\n [class]=\"'calculationType-'+element['calculationType']\"> {{'APP_HRM_PAYROLL_SETTINGS.FIXED' |\n customTranslate : 'Fixed: ' }} {{ element['amount'] }} {{\n 'APP_HRM_PAYROLL_SETTINGS.PER_OF_FIXED_CTC' | customTranslate : '% of Fixed CTC'}}</span>\n <span class=\"spanFontSize\" *ngIf=\"element['calculationType'] == 'ctc' && element['isVariablePay']\"\n [class]=\"'calculationType-'+element['calculationType']\">{{'APP_HRM_PAYROLL_SETTINGS.VARIABLE' |\n customTranslate : 'Variable: ' }}{{ element['amount'] }}{{\n 'APP_HRM_PAYROLL_SETTINGS.PER_OF_VARIABLE_CTC' | customTranslate : '% of Variable CTC'}}</span>\n </ng-container>\n\n <ng-template #noCalculation>\n <span class=\"spanFontSize\">-</span>\n </ng-template>\n </div>\n <div *ngIf=\"fromWhere === 'payrollSettingComponent' && column === 'active'\">\n <div class=\"form-check form-switch\">\n <input class=\"custom-checkbox\" type=\"checkbox\" [checked]=\"(element != null && element['active'] === true) ? true : false\"\n (click)=\"element[column]=!element[column]; onToggleChange.emit(fromWhere === 'payrollSettingComponent' ? element : '')\">\n </div>\n </div>\n </td>\n </ng-container>\n <!-- SK16JUL24 to get the sum of column data -->\n <td class=\"ps-2 pe-2 \" mat-footer-cell *matFooterCellDef=\"let element; let j = index\">\n {{ '-' | totalColumSum: data : cumulativeDataColumns : column }}\n </td>\n </ng-container>\n <!-- action button Columns -->\n <!-- SK19MAR25 \"action\" key is changed to \"tableAction\" wherever used, since, it has duplicate error -->\n <ng-container [stickyEnd]=\"true\" *ngIf=\"actionButton || isDeleteRow || isEditRow\"\n matColumnDef=\"tableAction\">\n <th mat-header-cell *matHeaderCellDef\n class=\"head-color action-size sticky-column actionCol text-center\" style=\"border-right: 1px solid var(--border-color, rgba(0, 0, 0, 0.12));\">{{ actionColumHeader |\n customTranslate : 'Action'}}</th>\n <td mat-cell *matCellDef=\"let element; let i=index\" class=\"body-color actionCol\">\n <!-- SKS25DEC24 clone button -->\n <div class=\"d-flex flex-row actionButton\"\n [style.justify-content]=\"conditionSendButton ? 'none' : 'center'\">\n <div *ngIf=\"(!conditionCloneButton) && cloneButton\" class=\"imgBtnDiv\">\n <img style=\"padding: 0px;\" (click)=\"onClone(element , i)\"\n src=\"../assets/images/icons/general/clone.svg\" class=\"imgBtn\" data-bs-toggle=\"modal\">\n </div>\n <div *ngIf=\"(conditionCloneButton) && isConditionMet(element, conditionCloneButton.conditions)\"\n class=\"ms-2 imgBtnDiv\" style=\"margin-top: 6px;\">\n <img style=\"padding: 0px;\" (click)=\"onClone(element , i)\"\n src=\"../assets/images/icons/general/clone.svg\" class=\"imgBtn\" data-bs-toggle=\"modal\">\n </div>\n <!-- SK20FEB26 Expense edit on Pending status -->\n <div *ngIf=\"element?.status === 'Rejected'|| fromWhere === 'leaveMaster' || fromWhere === 'payrollSettingComponent' || fromWhere === 'hrmTaxComponent' || isEditRow || (fromWhere == 'expense' && element?.status === 'Pending' )\">\n <app-fusion-button *ngIf=\"fromWhere == 'leave'\" [buttonType]=\"'text-only'\"\n [buttonValue]=\"'APP.COMMENTS' | customTranslate : 'comments' \"\n (buttonClickEmit)=\"onEdit(element?.rejectionReason, i, element?.status)\" data-bs-toggle=\"modal\"\n data-bs-target=\"#rejectInfoModal\">\n </app-fusion-button>\n <div class=\"imgBtnDiv\"\n *ngIf=\"((!conditionEditButton)&& ((fromWhere == 'expense' ) || fromWhere === 'leaveMaster' || fromWhere === 'payrollSettingComponent' || fromWhere === 'hrmTaxComponent' || isEditRow)) || (conditionEditButton && isConditionMet(element, conditionEditButton.conditions))\">\n <!-- MY 23OCT26 Disable edit action when expense is already Approved -->\n <i *ngIf=\"(!conditionEditButton)&& ((fromWhere == 'expense' ) || fromWhere === 'leaveMaster' || fromWhere === 'payrollSettingComponent' || fromWhere === 'hrmTaxComponent' || isEditRow)\"\n (click)=\"(fromWhere === 'expense' && element?.status?.toLowerCase() === 'approved') ? null : onEdit(fromWhere === 'payrollSettingComponent' || isEditRow ? element : element?._id, i, element?.status)\"\n [matTooltip]=\"(fromWhere === 'expense' && element?.status?.toLowerCase() === 'approved') ? ('APP_EXPENSE.CANNOT_EDIT_APPROVED' | customTranslate : 'Approved expenses cannot be edited') : ('APP.EDIT' | customTranslate : 'Edit')\"\n [style.opacity]=\"(fromWhere === 'expense' && element?.status?.toLowerCase() === 'approved') ? '0.35' : '1'\"\n [style.cursor]=\"(fromWhere === 'expense' && element?.status?.toLowerCase() === 'approved') ? 'not-allowed' : 'pointer'\"\n class=\"fusion-icon nav-icon fusion-icon-edit_pencil\" style=\"margin: 0px !important; font-size: var(--fs-normal, 16px) !important; color: var(--fc-sub-lite, #787486);\">\n </i>\n <i *ngIf=\"conditionEditButton && isConditionMet(element, conditionEditButton.conditions)\"\n [matTooltip]=\"(fromWhere === 'expense' && element?.status?.toLowerCase() === 'approved') ? ('APP_EXPENSE.CANNOT_EDIT_APPROVED' | customTranslate : 'Approved expenses cannot be edited') : ('APP.EDIT' | customTranslate : 'Edit')\"\n [style.opacity]=\"(fromWhere === 'expense' && element?.status?.toLowerCase() === 'approved') ? '0.35' : '1'\"\n [style.cursor]=\"(fromWhere === 'expense' && element?.status?.toLowerCase() === 'approved') ? 'not-allowed' : 'pointer'\"\n (click)=\"(fromWhere === 'expense' && element?.status?.toLowerCase() === 'approved') ? null : onEdit(fromWhere === 'payrollSettingComponent' || isEditRow ? element : element?._id, i)\"\n class=\"fusion-icon nav-icon fusion-icon-edit_pencil\" style=\"margin: 0px !important; font-size: var(--fs-normal, 16px) !important; color: var(--fc-sub-lite, #787486);\">\n </i>\n </div>\n <!-- <img *ngIf=\"fromWhere == 'expense'\" (click)=\"delete(element?._id)\" src=\"../assets/images/icons/Vectordelete.svg\"> -->\n </div>\n <div *ngIf=\"element?.leaveStatus === 'New' || element?.status === 'New' || element?.status === 'Pending' || element?.leaveStatus === 'Pending' || fromWhere === 'leaveMaster' || fromWhere === 'payrollSettingComponent' || fromWhere === 'hrmTaxComponent' || fromWhere == 'expenseApproval' || isDeleteRow\">\n <app-fusion-button *ngIf=\"fromWhere == 'leave'\" [buttonType]=\"'text-only'\"\n [buttonValue]=\"'APP.CANCEL' | customTranslate : 'Cancel'\" (buttonClickEmit)=\"delete(element, i)\"\n data-bs-toggle=\"modal\" data-bs-target=\"#cancelLeave\"></app-fusion-button>\n <!-- SKS21NOV24 Conditional rendering of delete icon based on various conditions -->\n <!-- Show the delete icon if 'conditionDeleteButton' is false and 'fromWhere' matches specific components or 'isDeleteRow' is true -->\n <div class=\"imgBtnDiv\"\n *ngIf=\"((!conditionDeleteButton)&&(fromWhere == 'expense' || fromWhere === 'leaveMaster' || fromWhere === 'payrollSettingComponent' || fromWhere === 'hrmTaxComponent' || isDeleteRow) )|| (conditionDeleteButton && isConditionMet(element, conditionDeleteButton.conditions))\">\n <img\n *ngIf=\"(!conditionDeleteButton)&&(fromWhere == 'expense' || fromWhere === 'leaveMaster' || fromWhere === 'payrollSettingComponent' || fromWhere === 'hrmTaxComponent' || isDeleteRow)\"\n class=\"imgBtn\" [matTooltip]=\"'APP.DELETE_RECORD' | customTranslate : 'Delete Record'\"\n (click)=\"deleteRecord(fromWhere === 'payrollSettingComponent' || isDeleteRow ? element : element?._id, i)\"\n src=\"../assets/images/icons/Vectordelete.svg\">\n <img *ngIf=\"conditionDeleteButton && isConditionMet(element, conditionDeleteButton.conditions)\"\n [matTooltip]=\"'APP.DELETE_RECORD' | customTranslate : 'Delete Record'\"\n (click)=\"deleteRecord(isDeleteRow ? element : element?._id, i)\" class=\"imgBtn\"\n src=\"../assets/images/icons/Vectordelete.svg\">\n </div>\n <div *ngIf=\"fromWhere == 'approval' || fromWhere == 'expenseApproval'\" class=\"flex imgBtnDiv\">\n <img\n *ngIf=\"(fromWhere === 'expenseApproval' && element?.status === 'Approved'&& element?.reImbursed !== 'Reimbursed') || fromWhere == 'approval'\"\n class=\"approval-image me-2\" style=\"padding: 0px; width: 24px !important;\"\n (click)=\"onApprove( element?.employeeId, element?._id, element?.reImbursed )\"\n src=\"../assets/images/icons/general/Approved.svg\">\n <img *ngIf=\"fromWhere !== 'expenseApproval'\" class=\"approval-image\"\n style=\"padding: 0px; width: 24px !important;\"\n (click)=\"onReject( element?.employeeId, element?._id )\"\n src=\"../assets/images/icons/general/Declined.svg\" class=\"\" data-bs-toggle=\"modal\"\n data-bs-target=\"#approvalReject\">\n </div>\n </div>\n <!-- SK02APR24 added preview and download icons -->\n <div *ngIf=\"viewIcon\" class=\"ms-2 imgBtnDiv\">\n <!-- <img [src]=\"('post.svg' | svgIcon:'#000000') | async\" class=\"card-icon color\" title=\"preview\" (click)=\"viewIconClick(element)\" style=\"cursor: pointer;\" /> -->\n <i class=\"fusion-icon fusion-icon-size-lg fusion-icon-eye nav-icon\" matTooltip=\"Preview\"\n matTooltipPosition=\"above\" style=\"color: var(--fc-text-color-light) !important; cursor: pointer;\"\n (click)=\"viewIconClick(element)\"></i>\n\n </div>\n <div *ngIf=\"downloadIcon\" class=\"ms-2 imgBtnDiv\">\n <i class=\"fusion-icon fusion-icon-size-lg fusion-icon-document-download card-icon color imgBtn\"\n matTooltip=\"Download\" matTooltipPosition=\"above\"\n style=\"cursor: pointer; color: var(--fc-text-color-light) !important;\"\n (click)=\"downloadIconClick(element)\">\n </i>\n </div>\n <!-- SKS25DEC24 send button -->\n <div *ngIf=\"(!conditionSendButton) && sendButton\" class=\"ms-2 imgBtnDiv\" style=\"margin-top: 6px;\">\n <i class=\"fusion-icon fusion-icon-size-lg fusion-icon-send-2 card-icon color imgBtn\"\n style=\"cursor: pointer\" (click)=\"onSend(element, i)\"\n [matTooltip]=\"'APP.SEND' | customTranslate : 'Send'\"></i>\n </div>\n <div\n *ngIf=\"(conditionSendButton) && isConditionMet(element, conditionSendButton.conditions) && sendButton\"\n class=\"ms-2 imgBtnDiv\" style=\"margin-top: 6px;\">\n <i class=\"fusion-icon fusion-icon-size-lg fusion-icon-send-2 card-icon color imgBtn\"\n style=\"cursor: pointer\" (click)=\"onSend(element, i)\"\n [matTooltip]=\"'APP.SEND' | customTranslate : 'Send'\"></i>\n </div>\n <!-- SKS25DEC24 active button -->\n <div *ngIf=\"(!conditionActivateButton) && activeButton\" class=\"ms-2 imgBtnDiv\"\n style=\"margin-top: 10px;\">\n <i class=\"fusion-icon fusion-icon-size-lg fusion-icon-group nav-icon\" style=\"color: var(--comp-bg-color, #ffffff);\"></i>\n </div>\n <div\n *ngIf=\"(conditionActivateButton) && isConditionMet(element, conditionActivateButton.conditions) && activeButton\"\n class=\"ms-2 imgBtnDiv\" style=\"margin-top: 10px;\">\n <i class=\"fusion-icon fusion-icon-size-lg fusion-icon-group nav-icon\" style=\"color: var(--comp-bg-color, #ffffff);\"></i>\n </div>\n <!-- SKS25DEC24 deactive button -->\n <div *ngIf=\"(!conditionDeactivateButton) && deactiveButton\" class=\"ms-2 imgBtnDiv\"\n style=\"margin-top: 10px;\">\n <i class=\"fusion-icon fusion-icon-size-lg fusion-icon-group nav-icon\" style=\"color: var(--comp-bg-color, #ffffff);\"></i>\n </div>\n <div\n *ngIf=\"(conditionDeactivateButton) && isConditionMet(element, conditionDeactivateButton.conditions) && deactiveButton\"\n class=\"ms-2 imgBtnDiv\" style=\"margin-top: 10px;\">\n <i class=\"fusion-icon fusion-icon-size-lg fusion-icon-group nav-icon\" style=\"color: var(--comp-bg-color, #ffffff);\"></i>\n </div>\n </div>\n <div>\n\n <app-fusion-button *ngIf=\"fromWhere == 'document-icons'\" [buttonType]=\"'custom-btn'\"\n [fcBtnIconLeftSrc]=\"'../assets/images/icons/general/downloadfile.svg'\"\n (buttonClickEmit)=\"downloadPdf(element)\"></app-fusion-button>\n <app-fusion-button *ngIf=\"fromWhere == 'document-icons'\" [buttonType]=\"'custom-btn'\"\n [fcBtnIconLeftSrc]=\"'../assets/images/icons/general/pencil-icon.svg'\"\n (buttonClickEmit)=\"delete(element, i)\" data-bs-toggle=\"modal\"\n data-bs-target=\"#documentsInfoModal\"></app-fusion-button>\n <app-fusion-button *ngIf=\"fromWhere == 'document-icons'\" [buttonType]=\"'custom-btn'\"\n [fcBtnIconLeftSrc]=\"'../assets/images/icons/Vectordelete.svg'\"\n (buttonClickEmit)=\"delete(element, i)\" data-bs-toggle=\"modal\"\n data-bs-target=\"#deleteDocModal\"></app-fusion-button>\n </div>\n </td>\n <td mat-footer-cell *matFooterCellDef=\"let element; let i=index\">{{ \"\" }}\n </td>\n </ng-container>\n\n <!-- total Row -->\n <ng-container [sticky]=\"true\" matColumnDef=\"total\">\n <th mat-header-cell *matHeaderCellDef class=\"sticky-column head-color\">\n </th>\n <td mat-cell *matCellDef=\"let row\" class=\"body-color\">\n </td>\n <!-- RS27AUG24 -->\n <!-- Used the translate pipe to successfully implement the translation -->\n <td mat-footer-cell *matFooterCellDef >{{'APP.TOTAL' | customTranslate : 'Total' }}\n </td>\n </ng-container>\n\n <!-- Render the columns -->\n <!-- SK16JUL24 adding the cumulative data row as footer -->\n <!-- <ng-container *ngIf=\"dataSource?.data?.length !== 0\"> -->\n <div [ngSwitch]=\"renderColumns\">\n <div *ngSwitchCase=\"'select'\">\n <tr mat-header-row *matHeaderRowDef=\"['select'].concat(displayedColumns) sticky: true\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: ['select'].concat(displayedColumns);\"></tr>\n <!-- SK19JUL24 table total update -->\n <tr\n [class]=\"cumulativeDataColumns != undefined && cumulativeDataColumns.length !== 0 ? '' : 'border border-white' \"\n mat-footer-row\n *matFooterRowDef=\"cumulativeDataColumns != undefined && cumulativeDataColumns.length !== 0 ? ['total'].concat(displayedColumns) : null \">\n </tr>\n </div>\n <div *ngSwitchCase=\"'tableAction'\">\n <tr mat-header-row\n *matHeaderRowDef=\" displayedColumns ? displayedColumns.concat(['tableAction']) : [] ;sticky: true\">\n </tr>\n <tr mat-row\n *matRowDef=\"let row; columns: displayedColumns ? displayedColumns.concat(['tableAction']) : []; \">\n </tr>\n <ng-container *ngIf=\"cumulativeDataColumns\">\n <tr\n [class]=\"cumulativeDataColumns != undefined && cumulativeDataColumns.length !== 0 ? '' : 'border border-white' \"\n mat-footer-row\n *matFooterRowDef=\"cumulativeDataColumns != undefined && cumulativeDataColumns.length !== 0 ? ['total'].concat(displayedColumns).concat('tableAction') : null\">\n </tr>\n </ng-container>\n </div>\n <!-- 30JAN24 for both checkbox and action columns-->\n <div *ngSwitchCase=\"'both'\">\n <tr mat-header-row\n *matHeaderRowDef=\"['select'].concat(displayedColumns).concat('tableAction') sticky: true\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: ['select'].concat(displayedColumns).concat('tableAction')\"\n (click)=\"tableClick(row)\"></tr>\n <ng-container *ngIf=\"cumulativeDataColumns\">\n <tr\n [class]=\"cumulativeDataColumns != undefined && cumulativeDataColumns.length !== 0 ? '' : 'border border-white' \"\n mat-footer-row\n *matFooterRowDef=\"cumulativeDataColumns != undefined && cumulativeDataColumns.length !== 0 ? ['total'].concat(displayedColumns).concat('tableAction') : null\">\n </tr>\n </ng-container>\n </div>\n <div *ngSwitchDefault>\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns sticky: true\"></tr>\n <tr mat-row *matRowDef=\"let row;let i =index; columns: displayedColumns;\"></tr>\n <ng-container *ngIf=\"cumulativeDataColumns\">\n <tr\n [class]=\"cumulativeDataColumns != undefined && cumulativeDataColumns.length !== 0 ? 'd-block' : 'border border-white' \"\n mat-footer-row\n *matFooterRowDef=\"cumulativeDataColumns != undefined && cumulativeDataColumns.length !== 0 ? ['total'].concat(displayedColumns) : null\">\n </tr>\n </ng-container>\n </div>\n </div>\n <!-- </ng-container> -->\n <!-- <tr class=\"mat-row \" *matNoDataRow> -->\n <!-- SK9JAN24 Removed attr.colspan since it throws undefined error -->\n <!-- <td class=\"mat-cell \">\n {{'APP.NO_RECORDS' | customTranslate : 'No records/data found.' }}\n </td>\n </tr> -->\n\n </table>\n <div class=\"no-data-cell text-center my-3 \" *ngIf=\"!dataSource || !dataSource.data || dataSource.data.length === 0\">\n {{ 'APP.NO_RECORDS' | customTranslate : 'No records/data found.' }}\n </div>\n </ng-container>\n <!-- MSM28JAN25 skeleton loader template -->\n <ng-template #loadingTemplate>\n <table>\n <tr style=\"height: 40px;\" *ngFor=\"let _ of [1, 2, 3, 4,5,6]\">\n <td colspan=\"3\" class=\"skeleton-card\">\n <div class=\"title\" data-title>\n <div class=\"skeleton skeleton-text\"></div>\n <div class=\"skeleton skeleton-text\"></div>\n </div>\n </td>\n </tr>\n </table>\n </ng-template>\n </div>\n <!-- SK23FEB24 table input save button changes -->\n <div class=\"d-flex justify-content-end\">\n <div class=\"flex mt-4 me-2 cursor-pointer\" *ngIf=\"addInlineRecord \" (click)=\"addTableRecord(inlineElement)\"\n [matTooltip]=\"'APP.ADD_NEW_RECORD' | customTranslate : 'Add New Record'\">\n <div class=\"ms-1 me-1\">\n <i class=\"fusion-icon fusion-icon-size-lg fusion-icon-add-square nav-icon\"\n style=\"color: var(--fc-text-color-dark, #000000) !important;\"></i>\n </div>\n </div>\n <!-- SK27FEB24 removed button disable logic, SK13MAR24 added another condition for button showing-->\n <!-- SR06JAN2025 button disable logic for not select any employee-->\n <div class=\"d-flex justify-content-between align-items-end\">\n <div class=\"px-2\">\n {{notes}}</div>\n\n <app-fusion-button [buttonLoadingSpinner]=\"tableSaveLoadingSpinner\"\n *ngIf=\"editColumn.length > 0 || tableSaveButton\" buttonType=\"btn btn-primary mt-4 me-2\"\n [buttonDisable]=\"selection?.selected?.length === 0\" (buttonClickEmit)=\"saveButton()\"\n buttonValue=\"{{ 'APP.SAVE' | customTranslate : 'Save' }}\"></app-fusion-button>\n </div>\n </div>\n <!-- SKS24JAN25 custom paginator -->\n <app-pagination #paginator [pageSizeOptions]=\"itemsPerPage\" [collectionSize]=\"totalCount\" [pageSize]=\"pageSize\"\n [currentPage]=\"pageIndex\" [firstLastButtons]=\"true\" (event)=\"pageParams($event)\" >\n </app-pagination>\n </div>\n </div>\n</div>\n\n<!-- SK03OCT24 while clicking export button, side screen will be displayed, with fields selection and filter boxes -->\n<app-common-screen *ngIf=\"exportSidescreen\" headerTitle=\"{{'APP.EXPORT_DATA' | customTranslate : 'Export Data'}}\"\n (sideScreenEmittedEvent)=\"exportSidescreen = false\">\n <div class=\"side-main-content\">\n <!-- MY 15OCT26 export file button loader -->\n <div\n class=\"d-flex align-items-center flex-row p-3 justify-content-center cursor-pointer short-button-white-bg button-hov\"\n [class.disabled]=\"exportButtonLoadingSpinner\"\n (click)=\"!exportButtonLoadingSpinner ? exportButtonSideNav() : null\">\n <div *ngIf=\"exportButtonLoadingSpinner\" class=\"spinner-grow spinner-grow-sm me-2\" role=\"status\" aria-hidden=\"true\"></div>\n <i *ngIf=\"!exportButtonLoadingSpinner\" class=\"fusion-icon fusion-icon-size-lg fusion-icon-document-upload card-icon color me-1\"></i>\n <div>{{ exportButtonLoadingSpinner ? (('APP_SETTINGS_APPS.LOADING' | customTranslate : 'Loading') + '...') : ('APP.EXPORT_FILE' | customTranslate : 'Export File') }}</div>\n </div>\n <!-- SK03OCT24 displaying components from parent (multipleCheckBox/multipleFilter) -->\n <div *ngFor=\"let type of filterScreenConfigs\">\n <!-- MY 15OCT26 pass button loader state to multi-checkbox and multiple-filter -->\n <app-multi-checkbox *ngIf=\"type.type === 'multipleCheckBox' \" class=\"ms-2 me-2\"\n [label]=\"type?.labelPath || type?.label | customTranslate : type?.label\" [cardSize]=\"type?.cardSize\"\n [cardInlineSize]=\"type?.cardInlineSize\" [checkboxList]=\"type?.checkboxList\"\n [activeCheckboxList]=\"type?.activeCheckboxList\" [buttonList]=\"type?.buttons\"\n [displayValues]=\"type?.displayValues\" [componentData]=\"type\" [checkBoxStyles]=\"type?.checkBoxStyles\"\n [isButtonLoadingSpinner]=\"type?.isButtonLoadingSpinner || false\"\n (compDataEmit)=\"exportFieldsButtonEmit($event)\">\n </app-multi-checkbox>\n <app-multiple-filter *ngIf=\"type.type === 'multipleFilter' \" class=\"ms-2 me-2\"\n [isDateFilter]=\"type?.isDateFilter || false\"\n [label]=\"type?.labelPath || type?.label | customTranslate : type?.label\" [cardSize]=\"type?.cardSize\"\n [cardInlineSize]=\"type?.cardInlineSize\" [buttonList]=\"type?.buttons\" [displayValues]=\"type?.displayValues\"\n [componentData]=\"type\" [checkBoxStyles]=\"type?.checkBoxStyles\" [selectionData]=\"type?.selectionData\"\n [isButtonLoadingSpinner]=\"type?.isButtonLoadingSpinner || false\"\n (compDataEmit)=\"exportFilterButtonEmit($event)\" (selectedValuesEmit)=\"selectedValuesEmit($event)\"\n (filterDateEmit)=\"filterDateEmit($event)\">\n </app-multiple-filter>\n </div>\n </div>\n</app-common-screen>\n<!-- SKS15DEC25 bulk upload -->\n<app-file-upload [id]=\"'uploadEmployee'\" [headerName]=\"moudleName\" [showFileModal]=\"uploadModal\"\n (closeEmit)=\"uploadModal = false\"\n [bodyHeaderName]=\"('APP.STEPS_TO_UPLOAD' | customTranslate : 'Steps to upload')+moudleName\" [isTemplate]=true\n [templateContent]=\"('APP.DOWNLOAD_THE' | customTranslate : 'Download the')+ moudleName +('APP.TEMPLATE' | customTranslate : 'template')\"\n (templateDownload)=\"downloadTemplate()\"\n [bodyContent]=\"[(('APP.FILL_THE_APPROP' | customTranslate : 'Fill the appropriate')+moudleName+('APP.DETAILS_AND_UPLOAD_ITS_BELOW' | customTranslate : 'Details and upload it below'))]\"\n [fileRestrictions]=\"{\n allowedTypes: ['.csv', '.xlsx', '.xls'],\n maxFileSize: 10,\n maxFiles: 1\n }\" [uploadedFiles]=\"[]\" [saveButtonName]=\"'APP.UPLOAD' | customTranslate : 'Upload'\"\n (upload)=\"uploadRecordsFile($event)\">\n</app-file-upload>\n<!-- SK06NOV24 alert on deleting record -->\n<div *ngIf=\"deleteModal\" class=\"modal modal-backdrop show d-block\" id=\"deleteRecord\" tabindex=\"-1\"\n aria-labelledby=\"deleteRecordLabel\" [attr.aria-hidden]=\"!deleteModal\">\n <div class=\"modal-dialog\">\n <div class=\"modal-content\">\n <div class=\"modal-header\">\n <b class=\"modal-title fs-5\" id=\"deleteRecordLabel\">{{'APP.DELETE_RECORD' | customTranslate : 'Delete Record'}}</b>\n <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"\n (click)=\"deleteModal = false\"></button>\n </div>\n <div class=\"modal-body\">\n {{'APP.ARE_YOU_SURE_YOU_WANT_TO_DELETE_THE_REC' | customTranslate : 'Are you sure want to delete the record'}} ?\n </div>\n <div class=\"modal-footer\">\n <button type=\"button\" class=\"btn btn-primary\" data-bs-dismiss=\"modal\" aria-label=\"Close\"\n (click)=\"!buttonLoadingSpinner ? deleteRecordData() : null\">\n <!-- SK04SEP25 button loader -->\n <span class=\"{{ buttonLoadingSpinner ? 'spinner-grow' : '' }} spinner-grow-sm\" role=\"buttonValue\"\n aria-hidden=\"true\"></span>\n <span>{{ buttonLoadingSpinner ? ('APP_SETTINGS_APPS.LOADING' | customTranslate : 'Loading') + '...' :\n ('APP.YES' | customTranslate : 'Yes') }}\n </span>\n </button>\n <button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\" (click)=\"deleteModal = false\">{{'APP.NO'\n | customTranslate : 'No'}}</button>\n </div>\n </div>\n </div>\n</div>\n\n<app-common-screen *ngIf=\"infoSidescreen\" [headerTitle]=\"'APP.APPROVAL_DETAILS' | customTranslate : 'Approval Details'\"\n (sideScreenEmittedEvent)=\"infoSidescreen = false\">\n <div class=\"side-main-content container\">\n <div class=\"row\">\n <div class=\"col-md-12\">\n <!-- Approval Info -->\n <div class=\"row mb-3\">\n <div class=\"col-6 text-start\">{{'APP.NAME' | customTranslate : 'Name'}}:</div>\n <div class=\"col-6 text-start\">{{ infoData.name || ''}}</div>\n </div>\n <div class=\"row mb-3\">\n <div class=\"col-6 text-start\">{{'APP.STATUS' | customTranslate : 'Status'}}:</div>\n <div class=\"col-6 text-start\">\n <span\n *ngIf=\"infoData.status === 'Approved' || infoData.status === 'Pending' || infoData.status === 'Rejected' \"\n class=\"badge custom-badge\" [ngClass]=\"{\n 'bg-success': infoData.status === 'Approved', \n 'bg-warning': infoData.status === 'Pending',\n 'bg-danger': infoData.status === 'Rejected'}\">\n {{ infoData.status }}</span>\n <span\n *ngIf=\"infoData.status !== 'Approved' && infoData.status !== 'Pending' && infoData.status !== 'Rejected' \">{{\n infoData.status || '' }}</span>\n </div>\n </div>\n <div class=\"row mb-3\">\n <!-- SK21DEC24 to add Approval status in side screen-->\n <div class=\"col-6 text-start\">{{'APP.APPROVAL_STATUS' | customTranslate : 'Approval Status'}}:</div>\n <div class=\"col-6 text-start\">\n <span\n *ngIf=\"infoData.leaveStatus === 'Approved' || infoData.leaveStatus === 'Pending' || infoData.leaveStatus === 'Rejected'\"\n class=\"badge custom-badge\" [ngClass]=\"{\n 'bg-success': infoData.leaveStatus === 'Approved', \n 'bg-warning': infoData.leaveStatus === 'Pending',\n 'bg-danger': infoData.leaveStatus === 'Rejected'}\">\n {{ infoData.leaveStatus || '' }}</span>\n <span\n *ngIf=\"infoData.leaveStatus !== 'Approved' && infoData.leaveStatus !== 'Pending' && infoData.leaveStatus !== 'Rejected'\">{{\n infoData.leaveStatus || '' }}</span>\n </div>\n </div>\n <div class=\"row mb-3\">\n <div class=\"col-6 text-start\">{{'APP.REASON' | customTranslate : 'Reason'}}:</div>\n <div class=\"col-6 text-start\">{{ infoData.reason || '' }}</div>\n </div>\n <div class=\"row mb-3\">\n <div class=\"col-6 text-start\">{{'APP.TYPE' | customTranslate : 'Type'}}:</div>\n <div class=\"col-6 text-start\">{{ infoData.type || ''}}</div>\n </div>\n <div class=\"row mb-3\">\n <div class=\"col-6 text-start\">{{'APP.APPLIED_ON' | customTranslate : 'Applied On'}}:</div>\n <div class=\"col-6 text-start\">{{ (infoData.appliedOn | date:'short') || '' }}</div>\n </div>\n <div class=\"row mb-3\">\n <div class=\"col-6 text-start\">{{'APP.APPROVED_COUNT' | customTranslate : 'Approved Count'}}:</div>\n <div class=\"col-6 text-start\">{{ infoData.approvedCount || '' }}</div>\n </div>\n </div>\n </div>\n <!-- Approval Managers -->\n <!-- SK03DEC24 show approval managers list only if applicable -->\n <h3 *ngIf=\"infoData.approvalManagers != undefined && infoData.approvalManagers.length > 0\" class=\"text-center mb-3\">\n {{'APP.APPROVAL_MANAGERS' | customTranslate : 'Approval Managers'}}</h3>\n <ul *ngIf=\"infoData.approvalManagers != undefined && infoData.approvalManagers.length > 0\" class=\"list-group\">\n <li *ngFor=\"let manager of infoData.approvalManagers\" class=\"list-group-item\">\n <div class=\"row mb-3\">\n <div class=\"col-6 text-start\">{{'APP.EMPLOYEE_ID' | customTranslate : 'Employee ID'}}:</div>\n <div class=\"col-6 text-start\">{{ manager.employeeId || ''}}</div>\n </div>\n <div class=\"row mb-3\">\n <!-- SK10DEC24 to show manager name -->\n <div class=\"col-6 text-start\">{{'APP.EMPLOYEE_NAME' | customTranslate : 'Employee Name'}}:</div>\n <div class=\"col-6 text-start\">{{ manager.name || '' }}</div>\n </div>\n <div class=\"row mb-3\">\n <div class=\"col-6 text-start\">{{'APP.APPROVAL_ORDER' | customTranslate : 'Approval Order'}}:</div>\n <div class=\"col-6 text-start\">{{ manager.approvalOrder || '' }}</div>\n </div>\n <div class=\"row mb-3\">\n <div class=\"col-6 text-start\">{{'APP.STATUS' | customTranslate : 'Status'}}:</div>\n <div class=\"col-6 text-start\">\n <span *ngIf=\"manager.status === 'Approved' || manager.status === 'Pending' || manager.status === 'Rejected'\"\n class=\"badge custom-badge\" [ngClass]=\"{\n 'bg-success': manager.status === 'Approved', \n 'bg-warning': manager.status === 'Pending',\n 'bg-danger': manager.status === 'Rejected'}\">\n {{ manager.status || '' }}\n </span>\n <span\n *ngIf=\"manager.status !== 'Approved' && manager.status !== 'Pending' && manager.status !== 'Rejected'\"> {{\n manager.status || '' }}</span>\n </div>\n </div>\n <div class=\"row mb-3\" *ngIf=\"manager.viewedOn\">\n <div class=\"col-6 text-start\">{{'APP.VIEWED_ON' | customTranslate : 'Viewed On'}}:</div>\n <div class=\"col-6 text-start\">{{ (manager.viewedOn | date:'short') || '' }}</div>\n </div>\n <div class=\"row mb-3\">\n <div class=\"col-6 text-start\">{{'APP.IS_OPTIONAL' | customTranslate : 'Is Optional'}}:</div>\n <div class=\"col-6 text-start\">{{ manager.isOptional ? \"Yes\" : \"No\" }}</div>\n </div>\n <div class=\"row mb-3\">\n <div class=\"col-6 text-start\">{{'APP.COMMENTS' | customTranslate : 'Comments'}}:</div>\n <div class=\"col-6 text-start\">{{ manager.rejectionReason || '' }}</div>\n </div>\n </li>\n </ul>\n </div>\n</app-common-screen>\n\n<!-- MR 09NOV26 Sandwich Leave Confirmation Modal -->\n<div *ngIf=\"confirmModal\" class=\"custom-modal-overlay\">\n <div class=\"custom-modal\">\n <div class=\"custom-modal-header\">\n <b>{{ 'APP_HRM_ATTENDANCE.CHECK_ATTENDANCE' | customTranslate : 'Check Attendance' }}</b>\n <button class=\"close-button\" (click)=\"confirmModal = false\">×</button>\n </div>\n <div class=\"custom-modal-body\">\n {{ 'APP_HRM_ATTENDANCE.CONFIRM_CHECK' | customTranslate : 'Are you sure you want to run attendance check?' }}\n </div>\n <div class=\"custom-modal-footer\">\n <button class=\"btn btn-primary\" (click)=\"checkButtonClicked(); confirmModal = false\">{{ 'APP.YES' | customTranslate : 'Yes' }}</button>\n <button class=\"btn btn-secondary ms-2\" (click)=\"confirmModal = false\">{{ 'APP.NO' | customTranslate : 'No' }}</button>\n </div>\n </div>\n</div>",
|
|
7490
|
+
template: "<div class=\"table-layout\" [id]=\"tableId\" style=\"padding-top: 1px;\">\n <div>\n <!-- SK30JAN25 title added -->\n <div class=\"d-flex justify-content-center table-title align-text-center\">\n {{title}}\n </div>\n \n <div class=\"flex justify-content-between\" style=\"padding-bottom: 5px;\">\n <div class=\"d-flex align-items-center\">\n <!-- MR 09NOV26 table-toolbar-left projection slot -->\n <ng-content select=\"[table-toolbar-left]\"></ng-content>\n\n <!-- MR 09NOV26 Month / Year Picker -->\n <div class=\"picker-container\" *ngIf=\"monthArray && monthArray.length > 0\">\n <i class=\"arrow-btn fusion-icon fusion-icon-size-lg fusion-icon-arrow-left-1 nav-icon\"\n (click)=\"prevMonth()\" style=\"color: var(--fc-text-color-dark, #000000) !important;\"></i>\n <span class=\"month-label\" (click)=\"togglePopup()\">\n {{ months[selectedMonth] }} {{ selectedYear }}\n </span>\n <i class=\"arrow-btn fusion-icon fusion-icon-size-lg fusion-icon-arrow-right-1 nav-icon\"\n (click)=\"nextMonth()\" style=\"color: var(--fc-text-color-dark, #000000) !important;\"></i>\n </div>\n <div class=\"popup\" *ngIf=\"popupOpen\">\n <div class=\"year-section\">\n <i class=\"fusion-icon fusion-icon-size-lg fusion-icon-arrow-left-1 nav-icon\" (click)=\"changeYear(-1)\"\n style=\"color: var(--fc-text-color-dark, #000000) !important;\"></i>\n <span>{{ selectedYear }}</span>\n <i class=\"fusion-icon fusion-icon-size-lg fusion-icon-arrow-right-1 nav-icon\" (click)=\"changeYear(1)\"\n style=\"color: var(--fc-text-color-dark, #000000) !important;\"></i>\n </div>\n\n <div class=\"month-grid\">\n <div class=\"month-item\" *ngFor=\"let m of (monthArray || months); let i = index\" [class.active]=\"i === selectedMonth\"\n (click)=\"selectMonth(i)\">\n {{ m | slice:0:3 }}\n </div>\n </div>\n </div>\n\n <div *ngIf=\"dateDropdown \">\n <app-drop-down class=\"field-input\" [lists]='dropdownLists' dropDownHeight=\"38px\" dropDownWidth=\"200px\"\n (dataEmit)=\"dropdownEmitFunction($event)\" [selectedData]=\"dropdownSelectedData\"></app-drop-down>\n </div>\n <!-- SC11NOV2025 if isDatePicker is true then show the date picker -->\n <div *ngIf=\"isDatePicker\">\n <app-drop-down [lists]='list' [selectedData]=\"selectedData\" dropDownHeight=\"42px\" dropFontWeight=\"500\"\n dropFontSize=\"12px\" dropFontColor=\"#434555\" dropBorderRadius=\"5px\" dropDownWidth=\"200px\"\n (dataEmit)=\"dateFilter($event)\"></app-drop-down>\n </div>\n </div>\n <!-- SKS24JAN25 show Nos in table -->\n <!-- <div style=\"display: flex; align-items: center;\">\n <p *ngIf=\"totalRecords || totalCount\" style=\"font-weight: var(--fw-500); margin-right: 5px; margin-bottom: 0px;\">{{'APP.NOS' | customTranslate : 'Nos'}} </p> <span style=\"color: var(--fc-primary-color, rgb(43, 87, 249));\">{{totalRecords || totalCount}}</span>\n </div> -->\n <!-- SKS24JAN25 search bar config and nonconfig -->\n <div style=\"margin-left:auto;\">\n <div class=\"flex\" style=\"align-items: center;\">\n <!-- MR 09NOV26 table-toolbar-right projection slot -->\n <ng-content select=\"[table-toolbar-right]\"></ng-content>\n\n <!-- MR 09NOV26 Sandwich leave check button -->\n <button *ngIf=\"isSandwichLeave && isCheckButton !== false\" class=\"btn btn-primary me-2\"\n (click)=\"confirmModal = true\">\n {{ 'APP_HRM_ATTENDANCE.CHECK' | customTranslate : 'Check' }}\n </button>\n\n <div class=\"search\">\n <div class=\"search-bar\">\n <img class=\"card-btn\" src=\"../assets/images/icons/general/Search.svg\">\n <input type=\"text\" placeholder=\"{{ 'APP.SEARCH' | customTranslate : 'Search' }}\" matInput\n (keyup)=\"searchConfigs ? emptySearch($event) : applyFilter($event)\"\n [value]=\" (searchConfigs || searchTextValue) ? searchBoxValue || '' : '' \" #input\n style=\"font-size: 13px !important;\">\n <img *ngIf=\"searchConfigs && searchBar\" (click)=\"onSearch(input.value)\"\n src=\"../assets/images/icons/general/configSearch.svg\" class=\"configSearch\">\n </div>\n </div>\n\n <!-- MR 09NOV26 Single toolbar button support from second-data-table -->\n <div class=\"flex\" *ngIf=\"button\">\n <app-fusion-button class=\"data-table-fsbtn ms-2 me-2\" (buttonClickEmit)=\"commonButtonClick($event, button)\"\n [buttonType]=\"button?.class || button?.buttonType\" [buttonValue]=\"button?.namePath || button?.labelPath || button?.name | customTranslate : button?.label || button?.name\"\n [buttonConfig]=\"button?.buttonConfig\" [type]=\"button?.type\" [fcBtnIconLeftSrc]=\"button?.btnIconLeftSrc || button?.fcBtnIconLeftSrc\"\n [isImageSvg]=\"button?.isImageSvg\">\n </app-fusion-button>\n </div>\n\n <!-- SKS24JAN25 single, group and dropdown dynamic buttons -->\n <div class=\"flex\" *ngIf=\"isButtons\" style=\"padding-left: 7px;\">\n <div class=\"flex\" *ngFor=\"let button of buttonArray\">\n <app-fusion-button class=\"data-table-fsbtn\" [buttonDisable]=\"button.buttonDisable\"\n [buttonLoadingSpinner]=\"buttonLoadingSpinner\" (buttonClickEmit)=\"commonButtonClick($event,button)\"\n [buttonType]=\"button.label === 'Export' ? 'grey-border rounded-3 bg-white text-dark' : button.class\"\n [buttonValue]=\"button.labelPath || button.namePath || button.name | customTranslate : button.label || button.name\"\n [buttonConfig]=\"button.buttonConfig\" [type]=\"button.type\" class=\"ms-2 me-2\"\n [fcBtnIconLeftSrc]=\"button.label === 'Export' ? '../assets/images/icons/general/upload-icon.svg' : button.fcBtnIconLeftSrc\" [isImageSvg]=\"button.label === 'Export' ? true : button.isImageSvg\">\n <!--SKS25OCT24 If the value is 'Import' or 'Export', this button does not work-->\n </app-fusion-button>\n </div>\n </div>\n \n </div>\n\n <!-- SK23FEB24 for adding new record in table -->\n <div class=\"flex cursor-pointer\" *ngIf=\"addInlineRecord\" (click)=\"addTableRecord(inlineElement)\"\n [matTooltip]=\"'APP.ADD_NEW_RECORD' | customTranslate : 'Add New Record'\">\n <div class=\"ms-1 me-1\">\n <!-- MR 30OCT26 Refactor inline html template styling to theme tokens -->\n <i class=\"fusion-icon fusion-icon-size-lg fusion-icon-add-square nav-icon\"\n style=\"color: var(--fb-text-primary, #0f172a) !important;\"></i>\n </div>\n </div>\n </div>\n </div>\n\n <!-- MR 09NOV26 Migration of Datatables and Tier 1 Primitives to fusion-ui: Attendance Top Legend Bar -->\n <div class=\"d-flex justify-content-between align-items-center top-legend-bar\" *ngIf=\"isAttendanceTable || displayedColumns.includes('employeeDetail') || (monthArray && monthArray.length > 0)\">\n <div class=\"d-flex align-items-center gap-3 flex-wrap\">\n <div class=\"d-flex align-items-center gap-1\">\n <span class=\"attendance-chip attendance-present\">✓</span>\n <span class=\"legend-text\">{{ 'APP_HRM_ATTENDANCE_TABLE.PREsENT' | customTranslate : 'Present' }}</span>\n </div>\n <div class=\"d-flex align-items-center gap-1\">\n <span class=\"attendance-chip attendance-absent\">✕</span>\n <span class=\"legend-text\">{{ 'APP_HRM_ATTENDANCE_TABLE.ABSENT' | customTranslate : 'Absent' }}</span>\n </div>\n <div class=\"d-flex align-items-center gap-1\">\n <span class=\"attendance-chip attendance-half\">½</span>\n <span class=\"legend-text\">{{ 'APP_HRM_ATTENDANCE_TABLE.HALF_DAY' | customTranslate : 'Half day' }}</span>\n </div>\n <div class=\"d-flex align-items-center gap-1\">\n <span class=\"attendance-chip attendance-holiday\">H</span>\n <span class=\"legend-text\">{{ 'APP_HRM_ATTENDANCE_TABLE.HOLIDAY' | customTranslate : 'Holiday' }}</span>\n </div>\n <div class=\"d-flex align-items-center gap-1\">\n <span class=\"attendance-chip attendance-weekoff\">-</span>\n <span class=\"legend-text\">{{ 'APP_HRM_ATTENDANCE_TABLE.WEEK_OFF' | customTranslate : 'Week Off' }}</span>\n </div>\n </div>\n <div class=\"table-subtitle\" *ngIf=\"titleOn && title\">\n {{ title | customTranslate : title }}\n </div>\n </div>\n\n <div class=\"table-margin\">\n <div class=\"table-container\" cdkScrollable> <!-- SKS3FEB25 The search filter closes when scrolling the table-->\n <!-- MSM28JAN25 MR 09NOV26 skeleton loader condition using isTableLoading --> \n <ng-container *ngIf=\"!isTableLoading; else loadingTemplate\">\n <table mat-table [dataSource]=\"dataSource || []\" [ngStyle]=\"{ width: tableWidth }\" matSort>\n <!-- Checkbox Columns -->\n <ng-container [sticky]=\"true\" class=\"checkboxCol\" *ngIf=\"withCheckBox\" matColumnDef=\"select\" sticky>\n <th mat-header-cell *matHeaderCellDef class=\"sticky-column head-color\" style=\"border-left: 1px solid var(--fb-border-default, #e2e8f0);\">\n <input type=\"checkbox\" (click)=\"$event.stopPropagation()\" (change)=\"masterToggle()\"\n [checked]=\"selection?.hasValue()\" [indeterminate]=\"selection?.hasValue() && !isAllSelected()\"\n class=\"custom-checkbox\" />\n </th>\n <td mat-cell *matCellDef=\"let row\" class=\"body-color\" >\n <!-- SK18OCT24 check payroll Inprogress/Completed from backend data -->\n <input type=\"checkbox\" class=\"custom-checkbox\"\n [title]=\"(fromWhere === 'payrollTable' || fromWhere === 'paySlip') ? (row?.payProcessComment || '') : ''\"\n (click)=\"$event.stopPropagation()\" (change)=\"separateRowSelect(row)\"\n [checked]=\"selection.isSelected(row)\"\n [disabled]=\"(fromWhere === 'payrollTable' && row.isPayProcessed === true) || (fromWhere === 'paySlip' && row.isPayProcessed === false)\" />\n </td>\n <td mat-footer-cell *matFooterCellDef>\n {{ \"\" }}\n </td>\n </ng-container>\n\n <!-- data Columns -->\n <!-- set the matColumnDef attribute to the column name and use interpolation to dynamically generate the mat-header-cell and mat-cell elements based on the column name-->\n <ng-container *ngFor=\"let column of displayedColumns; let i=index\" [matColumnDef]=\"column\"\n [stickyEnd]=\"i === (stickyCondition - 1) ? true : false\" [sticky]=\"stickyColumns.includes(column)\">\n <th mat-header-cell *matHeaderCellDef mat-sort-header\n style=\"border-right: 1px solid var(--fb-border-default, #e2e8f0);\" class=\"head-color ms-2 ps-2 pe-2\" \n [ngClass]=\"{'sticky-column': i === (stickyCondition - 1),'active-column': activeColumn === column,'first-header-border': i === 0}\"\n (click)=\"$event.stopPropagation(); onColumnClick(column)\">\n <span [class]=\"fromWhere === 'payrollTable' || fromWhere === 'paySlip' ? 'table-width' : '' \">{{\n (\n translatePath && translatePath[displayedColumns.indexOf(column)]\n ? translatePath[displayedColumns.indexOf(column)]\n : headerLabels[displayedColumns.indexOf(column)]\n )\n | customTranslate : headerLabels[displayedColumns.indexOf(column)]\n }}\n </span>\n <div (click)=\"$event.stopPropagation()\" class=\"position-relative\" cdk-overlay-origin\n #trigger=\"cdkOverlayOrigin\">\n <img class=\"ms-1\" *ngIf=\"filterColumns.includes(column)\" style=\"margin-bottom: 2px;\"\n (click)=\"filter(column)\" src=\"../assets/images/icons/general/filter-icon.svg\">\n </div>\n <ng-template cdk-connected-overlay [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"searchFilter === true && column === selectedFilter\"\n [cdkConnectedOverlayScrollStrategy]=\"createScrollStrategy()\"\n (overlayOutsideClick)=\"searchFilter = false\" (detach)=\"searchFilter = false\">\n <app-search-filter class=\"search-component position-absolute\"\n [class]=\"searchFilter === true && column === selectedFilter ? 'd-block' : 'd-none'\"\n [filterItems]=\"filterArray\" (emitValues)=\"filteredData($event)\" (click)=\"$event.stopPropagation()\">\n </app-search-filter>\n </ng-template>\n </th>\n <ng-container *ngIf=\"dataSource.data.length > 0\">\n <td mat-cell class=\"body-color ps-2 pe-2\" *matCellDef=\"let element; let j = index\"\n [class.active-column]=\"activeColumn === column\">\n <!-- SK29OCT25 employee detail column -->\n <div *ngIf=\"column === 'employeeDetail'\">\n <div class=\"d-flex flex-row\" style=\"left:0;\">\n <div *ngIf=\"element['employeeName'] || element['name']\"\n [class]=\"hyperLinkColumns.includes(column) ? 'hyper-link' : '' \"\n style=\"font-size: var(--fs-small);color: var(--fb-text-primary, #0f172a);font-weight: var(--fw-600);\">\n {{element[\"employeeName\"] || element[\"name\"] || ''}}</div>\n <div *ngIf=\"element['employeeId']\"\n style=\"font-size: 11px;color: var(--fb-text-secondary, #64748b);font-weight: var(--fw-400);\" class=\"ms-1\">\n [{{element[\"employeeId\"] || ''}}]</div>\n </div>\n <div class=\"d-flex flex-row\" *ngIf=\"element['designation'] && element['designation'] !== ''\">\n <div style=\"font-size: 10px;color: var(--fb-text-secondary, #64748b);font-weight: var(--fw-600);\">\n {{element[\"designation\"] || ''}}\n </div>\n <div *ngIf=\"element['designation'] && element['designation'] !== '' && element['location'] && element['location'] !== ''\"\n style=\"font-size: 10px;color: var(--fb-text-secondary, #64748b);font-weight: var(--fw-600);\">,</div>\n <div *ngIf=\"element['location'] && element['location'] !== ''\" style=\"font-size: 10px;color: var(--fb-text-secondary, #64748b);font-weight: var(--fw-600);\">\n {{element[\"location\"] || ''}}\n </div>\n </div>\n </div>\n <div *ngIf=\"column !== 'combinedColumn' && column !== 'employeeDetail' && fromWhere !== 'leaveMaster' && (column !== 'active' && (fromWhere === 'hrmTaxComponent' || fromWhere === 'payrollSettingComponent' || fromWhere === 'hrm' || fromWhere === 'compensation'|| fromWhere === 'payrollTable'|| fromWhere === 'payrollCompare'|| fromWhere === 'paySlip' || fromWhere === 'approval' || fromWhere === 'leave' || fromWhere === 'expense' || fromWhere === 'expenseApproval' || fromWhere === 'leaveAllocation' ||fromWhere === 'parkingApp' ||(fromWhere === 'common' && column != 'signature')))\">\n <!-- SK10APR24 getting the table values using pipe instead of function to increase performance-->\n <div *ngIf=\" ('-' | editColumnCheck: column : editColumn) === ('') \">\n <span class=\"font-size-13 {{checkHyperlinkCheck(column) || fromWhere === 'hrm' || fromWhere === 'compensation' || fromWhere === 'parkingApp' ? ' hyper-link clickable ' : ''}} {{fromWhere === 'payrollTable' || fromWhere === 'paySlip' ? 'table-width' : '' }}\"\n *ngIf=\"hyperLinkColumns.includes(column) || isFirstCell(column)\"\n (click)=\"tableClick(element); onClickHyperlink(column,element, j, checkHyperlinkCheck(column))\">\n <!--SKS21NOV24 Use customDateTime Pipe for both Date and Time -->\n <ng-container *ngIf=\"isDateColumn(column)\">\n {{ element[column] | customDate }}\n </ng-container>\n\n <ng-container *ngIf=\"isTimeColumn(column)\">\n {{ element[column] | customTime }}\n </ng-container>\n\n <!--SKS21NOV24 For other columns, display raw value -->\n <ng-container *ngIf=\"!isDateColumn(column) && !isTimeColumn(column)\">\n {{ '-' | getValue: element : column }}\n </ng-container>\n <!--SKS27NOV24 Check if the current column is in buttonColumn array -->\n <ng-container *ngIf=\"sideScreenColumn?.includes(column)\">\n <img class=\"ms-2\" src=\"../assets/images/icons/general/info.svg\"\n (click)=\"onInfoClick(element, column, j)\">\n </ng-container>\n <!--SKS9JAN25 rightnav column -->\n <ng-container *ngIf=\"objectColumns?.includes(column)\">\n <img class=\"ms-2\" src=\"../assets/images/icons/general/info.svg\"\n (click)=\"onSideNavInfoClick(element, column, j)\">\n </ng-container>\n </span>\n <div *ngIf=\"!isFirstCell(column) && !editColumn.includes(column) && column != 'receipt'\"\n [class]=\"fromWhere === 'payrollTable' || fromWhere === 'paySlip' ? 'table-width' : '' \">\n <div *ngIf=\"!checkHyperlinkCheck(column)\" class=\"font-size-13\">\n <!--SKS21NOV24 Use customDateTime Pipe for both Date and Time -->\n <ng-container *ngIf=\"isDateColumn(column)\">\n {{ element[column] | customDate }}\n </ng-container>\n\n <ng-container *ngIf=\"isTimeColumn(column)\">\n {{ element[column] | customTime }}\n </ng-container>\n\n <!--SKS21NOV24 For other columns, display raw value -->\n <ng-container *ngIf=\"!isDateColumn(column) && !isTimeColumn(column)\">\n {{ '-' | getValue: element : column }}\n </ng-container>\n <!--SKS27NOV24 Check if the current column is in buttonColumn array -->\n <ng-container *ngIf=\"sideScreenColumn?.includes(column)\">\n <img class=\"ms-2\" src=\"../assets/images/icons/general/info.svg\"\n (click)=\"onInfoClick(element, column, j)\">\n </ng-container>\n <!--SKS9JAN25 rightnav column -->\n <ng-container *ngIf=\"objectColumns?.includes(column)\">\n <img class=\"ms-2\" src=\"../assets/images/icons/general/info.svg\"\n (click)=\"onSideNavInfoClick(element, column, j)\">\n </ng-container>\n </div>\n </div>\n </div>\n <!-- SK27FEB24 added input box for inline edit input-->\n <div *ngIf=\"editColumn.length > 0\">\n <div *ngIf=\" ('-' | editColumnCheck: column : editColumn) === ('string') \" class=\"on-edit d-flex\">\n <input #editColElement class=\"lop-input table-width\" [class]=\"element?.editRow ? 'input-box' : '' \"\n matInput [placeholder]=\"'APP.ENTER' | customTranslate : 'Enter'\" [value]=\"element[column]\"\n [(ngModel)]=\"element[column]\" [readOnly]=\"element?.editRow ? false : true\">\n </div>\n <!-- SK10APR24 In table, like text input, added drop down and time inputs as well -->\n <div *ngIf=\" ('-' | editColumnCheck: column : editColumn) === ('object') \" class=\"on-edit d-flex\">\n <input *ngIf=\" ('-' | editColumnType: column : editColumn) === ('text') \" #editColElement\n class=\"lop-input table-width\" [class]=\"element?.editRow ? 'input-box' : '' \" matInput\n [placeholder]=\"'APP.ENTER' | customTranslate : 'Enter'\" [value]=\"element[column]\"\n [(ngModel)]=\"element[column]\" [readOnly]=\"element?.editRow ? false : true\">\n <input *ngIf=\" ('-' | editColumnType: column : editColumn) === ('time') \" type=\"time\"\n class=\"lop-input table-width\" matInput [class]=\"element?.editRow ? 'input-box' : '' \"\n placeholder=\"HH:mm:ss\" [(ngModel)]=\"element[column]\"\n [disabled]=\"element?.editRow ? false : true\" />\n <div *ngIf=\" ('-' | editColumnType: column : editColumn) === ('dropdown') \">\n <select type=\"dropdown\" *ngIf=\"element?.editRow\" class=\"lop-input table-width\" matInput\n [class]=\"element?.editRow ? 'input-box' : '' \" [(ngModel)]=\"element[column]\">\n <option [disabled]=\"element?.editRow ? false : true\"\n *ngFor=\"let data of [] | editColumnDropdown: column : editColumn \"\n [value]=\"data.value || data.name\">{{data.name}}</option>\n </select>\n <input *ngIf=\"!element?.editRow\" #editColElement class=\"lop-input table-width\"\n [class]=\"element?.editRow ? 'input-box' : '' \" matInput\n [placeholder]=\"'APP.ENTER' | customTranslate : 'Enter'\" [value]=\"element[column]\"\n [(ngModel)]=\"element[column]\" [readOnly]=\"true\">\n </div>\n\n </div>\n </div>\n <app-popover\n *ngIf=\"column === 'receipt' && !editColumn.includes(column) && receiptImg == true && element[column] && element[column].length != 0\"\n [isBootstrap]=\"false\" [dynamicPopover]=\"'Popover string comes here'\">\n <div class=\"hover-base\">\n <img class=\"ms-1\" src=\"../../../assets/images/icons/general/file-attach.svg\">\n </div>\n <div class=\"hover-content\">\n <div class=\"expenseCon\">\n <div *ngFor=\"let data of element[column] || []\">\n <div class=\"cursor-pointer expense-file\" (click)=\"expenseAttachment(data,element)\">{{data?.name}}\n <!-- SK20FEB26 loader in expense list-->\n <svg *ngIf=\"data?.loader\"\n class=\"svg-spinner card-icon color\"\n width=\"22\" height=\"22\" viewBox=\"0 0 50 50\"\n style=\"cursor: wait;\">\n <circle class=\"path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke-width=\"4\"></circle>\n </svg>\n </div>\n </div>\n </div>\n </div>\n </app-popover>\n </div>\n <div *ngIf=\"fromWhere === 'leaveMaster' && column !== 'employeeDetail' \">\n <div [class]=\"(element[column]) === 'Week Off' ? 'weekoff-color' : '' \" class=\"font-size-13\">{{\n (column == 'default' || column == 'active' || column == 'paidLeave') ? '' : element[column] }}</div>\n <input *ngIf=\"(column === 'default' || column === 'active' || column === 'paidLeave')\"\n class=\"custom-checkbox\" [checked]=\"element[column] == true\" type=\"checkbox\" disabled>\n </div>\n <div *ngIf=\"fromWhere === 'payrollSettingComponent' && column === 'combinedColumn'\">\n <!-- for the Payroll Settings Component ( Side Screen Component )-->\n <!-- Since the last column is a combination of data and it is also conditional based on the paytype and calculation type we are using this div-->\n <!-- if Component type is Earnings and\n calculationType is 'flat' then output should be => \"'payType\": Flat, Amount of 'amount'\"\n calculationType is 'percentage' then output should be => \"'payType': 'amount' % of Basic \"\n calculationType is 'fixed' then output should be => \"'payType': 'calculationType'\" -->\n <!-- SK20JUN25 to display in table -->\n <ng-container *ngIf=\"\n element?.calculationType === 'flat' ||\n element?.calculationType === 'percentage' ||\n element?.calculationType === 'basicAndDA' ||\n element?.calculationType === 'fixed' ||\n element?.calculationType === 'ctc';\n else noCalculation\n \">\n <span class=\"spanFontSize\" *ngIf=\"element['calculationType'] == 'flat' && element['isVariablePay']\"\n [class]=\"'calculationType-'+element['calculationType']\">{{'APP_HRM_PAYROLL_SETTINGS.VARIABLE_FLAT_AMOUNT'\n | customTranslate : 'Variable: Flat Amount: ' }}{{ (element['amount'] || 0)}}</span>\n <span class=\"spanFontSize\" *ngIf=\"element['calculationType'] == 'flat' && !element['isVariablePay']\"\n [class]=\"'calculationType-'+element['calculationType']\">{{'APP_HRM_PAYROLL_SETTINGS.FIXED_FLAT_AMOUNT'\n | customTranslate : 'Fixed: Flat Amount: ' }}{{ (element['amount'] || 0)}}</span>\n\n <span class=\"spanFontSize\"\n *ngIf=\"element['calculationType'] == 'percentage' && element['isVariablePay']\"\n [class]=\"'calculationType-'+element['calculationType']\">{{'APP_HRM_PAYROLL_SETTINGS.VARIABLE' |\n customTranslate : 'Variable: ' }}{{element['amount']}}{{ 'APP_HRM_PAYROLL_SETTINGS.PER_OF_BASIC' |\n customTranslate : '% of Basic'}}</span>\n <span class=\"spanFontSize\"\n *ngIf=\"element['calculationType'] == 'percentage' && !element['isVariablePay']\"\n [class]=\"'calculationType-'+element['calculationType']\">{{'APP_HRM_PAYROLL_SETTINGS.FIXED' |\n customTranslate : 'Fixed: ' }}{{ element['amount']}}{{ 'APP_HRM_PAYROLL_SETTINGS.PER_OF_BASIC' |\n customTranslate : '% of Basic'}}</span>\n\n <span class=\"spanFontSize\"\n *ngIf=\"element['calculationType'] == 'basicAndDA' && element['isVariablePay']\"\n [class]=\"'calculationType-'+element['calculationType']\">{{'APP_HRM_PAYROLL_SETTINGS.VARIABLE' |\n customTranslate : 'Variable: ' }}{{ element['amount']}}{{\n 'APP_HRM_PAYROLL_SETTINGS.PER_OF_BASIC_AND_DA' | customTranslate : '% of Basic and DA'}}</span>\n <span class=\"spanFontSize\"\n *ngIf=\"element['calculationType'] == 'basicAndDA' && !element['isVariablePay']\"\n [class]=\"'calculationType-'+element['calculationType']\">{{'APP_HRM_PAYROLL_SETTINGS.FIXED' |\n customTranslate : 'Fixed: ' }}{{ element['amount']}}{{\n 'APP_HRM_PAYROLL_SETTINGS.PER_OF_BASIC_AND_DA' | customTranslate : '% of Basic and DA'}}</span>\n\n <span class=\"spanFontSize\" *ngIf=\"element['calculationType'] == 'fixed' && element['isVariablePay']\"\n [class]=\"'calculationType-'+element['calculationType']\">{{'APP_HRM_PAYROLL_SETTINGS.VARIABLE' |\n customTranslate : 'Variable: ' }}{{ element['amount']}}{{ 'APP_HRM_PAYROLL_SETTINGS.PER_OF_GROSS'\n | customTranslate : '% of Gross'}}</span>\n <span class=\"spanFontSize\"\n *ngIf=\"element['calculationType'] == 'fixed' && !element['isVariablePay']\"\n [class]=\"'calculationType-'+element['calculationType']\">{{'APP_HRM_PAYROLL_SETTINGS.FIXED' |\n customTranslate : 'Fixed: ' }}{{ element['amount']}}{{ 'APP_HRM_PAYROLL_SETTINGS.PER_OF_GROSS' |\n customTranslate : '% of Gross'}}</span>\n\n <span class=\"spanFontSize\" *ngIf=\"element['calculationType'] == 'ctc' && !element['isVariablePay']\"\n [class]=\"'calculationType-'+element['calculationType']\"> {{'APP_HRM_PAYROLL_SETTINGS.FIXED' |\n customTranslate : 'Fixed: ' }} {{ element['amount'] }} {{\n 'APP_HRM_PAYROLL_SETTINGS.PER_OF_FIXED_CTC' | customTranslate : '% of Fixed CTC'}}</span>\n <span class=\"spanFontSize\" *ngIf=\"element['calculationType'] == 'ctc' && element['isVariablePay']\"\n [class]=\"'calculationType-'+element['calculationType']\">{{'APP_HRM_PAYROLL_SETTINGS.VARIABLE' |\n customTranslate : 'Variable: ' }}{{ element['amount'] }}{{\n 'APP_HRM_PAYROLL_SETTINGS.PER_OF_VARIABLE_CTC' | customTranslate : '% of Variable CTC'}}</span>\n </ng-container>\n\n <ng-template #noCalculation>\n <span class=\"spanFontSize\">-</span>\n </ng-template>\n </div>\n <div *ngIf=\"fromWhere === 'payrollSettingComponent' && column === 'active'\">\n <div class=\"form-check form-switch\">\n <input class=\"custom-checkbox\" type=\"checkbox\" [checked]=\"(element != null && element['active'] === true) ? true : false\"\n (click)=\"element[column]=!element[column]; onToggleChange.emit(fromWhere === 'payrollSettingComponent' ? element : '')\">\n </div>\n </div>\n </td>\n </ng-container>\n <!-- SK16JUL24 to get the sum of column data -->\n <td class=\"ps-2 pe-2 \" mat-footer-cell *matFooterCellDef=\"let element; let j = index\">\n {{ '-' | totalColumSum: data : cumulativeDataColumns : column }}\n </td>\n </ng-container>\n <!-- action button Columns -->\n <!-- SK19MAR25 \"action\" key is changed to \"tableAction\" wherever used, since, it has duplicate error -->\n <ng-container [stickyEnd]=\"true\" *ngIf=\"actionButton || isDeleteRow || isEditRow\"\n matColumnDef=\"tableAction\">\n <th mat-header-cell *matHeaderCellDef\n class=\"head-color action-size sticky-column actionCol text-center\" style=\"border-right: 1px solid var(--border-color, rgba(0, 0, 0, 0.12));\">{{ actionColumHeader |\n customTranslate : 'Action'}}</th>\n <td mat-cell *matCellDef=\"let element; let i=index\" class=\"body-color actionCol\">\n <!-- SKS25DEC24 clone button -->\n <div class=\"d-flex flex-row actionButton\"\n [style.justify-content]=\"conditionSendButton ? 'none' : 'center'\">\n <div *ngIf=\"(!conditionCloneButton) && cloneButton\" class=\"imgBtnDiv\">\n <img style=\"padding: 0px;\" (click)=\"onClone(element , i)\"\n src=\"../assets/images/icons/general/clone.svg\" class=\"imgBtn\" data-bs-toggle=\"modal\">\n </div>\n <div *ngIf=\"(conditionCloneButton) && isConditionMet(element, conditionCloneButton.conditions)\"\n class=\"ms-2 imgBtnDiv\" style=\"margin-top: 6px;\">\n <img style=\"padding: 0px;\" (click)=\"onClone(element , i)\"\n src=\"../assets/images/icons/general/clone.svg\" class=\"imgBtn\" data-bs-toggle=\"modal\">\n </div>\n <!-- SK20FEB26 Expense edit on Pending status -->\n <div *ngIf=\"element?.status === 'Rejected'|| fromWhere === 'leaveMaster' || fromWhere === 'payrollSettingComponent' || fromWhere === 'hrmTaxComponent' || isEditRow || (fromWhere == 'expense' && element?.status === 'Pending' )\">\n <app-fusion-button *ngIf=\"fromWhere == 'leave'\" [buttonType]=\"'text-only'\"\n [buttonValue]=\"'APP.COMMENTS' | customTranslate : 'comments' \"\n (buttonClickEmit)=\"onEdit(element?.rejectionReason, i, element?.status)\" data-bs-toggle=\"modal\"\n data-bs-target=\"#rejectInfoModal\">\n </app-fusion-button>\n <div class=\"imgBtnDiv\"\n *ngIf=\"((!conditionEditButton)&& ((fromWhere == 'expense' ) || fromWhere === 'leaveMaster' || fromWhere === 'payrollSettingComponent' || fromWhere === 'hrmTaxComponent' || isEditRow)) || (conditionEditButton && isConditionMet(element, conditionEditButton.conditions))\">\n <!-- MY 23OCT26 Disable edit action when expense is already Approved -->\n <i *ngIf=\"(!conditionEditButton)&& ((fromWhere == 'expense' ) || fromWhere === 'leaveMaster' || fromWhere === 'payrollSettingComponent' || fromWhere === 'hrmTaxComponent' || isEditRow)\"\n (click)=\"(fromWhere === 'expense' && element?.status?.toLowerCase() === 'approved') ? null : onEdit(fromWhere === 'payrollSettingComponent' || isEditRow ? element : element?._id, i, element?.status)\"\n [matTooltip]=\"(fromWhere === 'expense' && element?.status?.toLowerCase() === 'approved') ? ('APP_EXPENSE.CANNOT_EDIT_APPROVED' | customTranslate : 'Approved expenses cannot be edited') : ('APP.EDIT' | customTranslate : 'Edit')\"\n [style.opacity]=\"(fromWhere === 'expense' && element?.status?.toLowerCase() === 'approved') ? '0.35' : '1'\"\n [style.cursor]=\"(fromWhere === 'expense' && element?.status?.toLowerCase() === 'approved') ? 'not-allowed' : 'pointer'\"\n class=\"fusion-icon nav-icon fusion-icon-edit_pencil\" style=\"margin: 0px !important; font-size: var(--fs-normal, 16px) !important; color: var(--fc-sub-lite, #787486);\">\n </i>\n <i *ngIf=\"conditionEditButton && isConditionMet(element, conditionEditButton.conditions)\"\n [matTooltip]=\"(fromWhere === 'expense' && element?.status?.toLowerCase() === 'approved') ? ('APP_EXPENSE.CANNOT_EDIT_APPROVED' | customTranslate : 'Approved expenses cannot be edited') : ('APP.EDIT' | customTranslate : 'Edit')\"\n [style.opacity]=\"(fromWhere === 'expense' && element?.status?.toLowerCase() === 'approved') ? '0.35' : '1'\"\n [style.cursor]=\"(fromWhere === 'expense' && element?.status?.toLowerCase() === 'approved') ? 'not-allowed' : 'pointer'\"\n (click)=\"(fromWhere === 'expense' && element?.status?.toLowerCase() === 'approved') ? null : onEdit(fromWhere === 'payrollSettingComponent' || isEditRow ? element : element?._id, i)\"\n class=\"fusion-icon nav-icon fusion-icon-edit_pencil\" style=\"margin: 0px !important; font-size: var(--fs-normal, 16px) !important; color: var(--fc-sub-lite, #787486);\">\n </i>\n </div>\n <!-- <img *ngIf=\"fromWhere == 'expense'\" (click)=\"delete(element?._id)\" src=\"../assets/images/icons/Vectordelete.svg\"> -->\n </div>\n <div *ngIf=\"element?.leaveStatus === 'New' || element?.status === 'New' || element?.status === 'Pending' || element?.leaveStatus === 'Pending' || fromWhere === 'leaveMaster' || fromWhere === 'payrollSettingComponent' || fromWhere === 'hrmTaxComponent' || fromWhere == 'expenseApproval' || isDeleteRow\">\n <app-fusion-button *ngIf=\"fromWhere == 'leave'\" [buttonType]=\"'text-only'\"\n [buttonValue]=\"'APP.CANCEL' | customTranslate : 'Cancel'\" (buttonClickEmit)=\"delete(element, i)\"\n data-bs-toggle=\"modal\" data-bs-target=\"#cancelLeave\"></app-fusion-button>\n <!-- SKS21NOV24 Conditional rendering of delete icon based on various conditions -->\n <!-- Show the delete icon if 'conditionDeleteButton' is false and 'fromWhere' matches specific components or 'isDeleteRow' is true -->\n <div class=\"imgBtnDiv\"\n *ngIf=\"((!conditionDeleteButton)&&(fromWhere == 'expense' || fromWhere === 'leaveMaster' || fromWhere === 'payrollSettingComponent' || fromWhere === 'hrmTaxComponent' || isDeleteRow) )|| (conditionDeleteButton && isConditionMet(element, conditionDeleteButton.conditions))\">\n <img\n *ngIf=\"(!conditionDeleteButton)&&(fromWhere == 'expense' || fromWhere === 'leaveMaster' || fromWhere === 'payrollSettingComponent' || fromWhere === 'hrmTaxComponent' || isDeleteRow)\"\n class=\"imgBtn\" [matTooltip]=\"'APP.DELETE_RECORD' | customTranslate : 'Delete Record'\"\n (click)=\"deleteRecord(fromWhere === 'payrollSettingComponent' || isDeleteRow ? element : element?._id, i)\"\n src=\"../assets/images/icons/Vectordelete.svg\">\n <img *ngIf=\"conditionDeleteButton && isConditionMet(element, conditionDeleteButton.conditions)\"\n [matTooltip]=\"'APP.DELETE_RECORD' | customTranslate : 'Delete Record'\"\n (click)=\"deleteRecord(isDeleteRow ? element : element?._id, i)\" class=\"imgBtn\"\n src=\"../assets/images/icons/Vectordelete.svg\">\n </div>\n <div *ngIf=\"fromWhere == 'approval' || fromWhere == 'expenseApproval'\" class=\"flex imgBtnDiv\">\n <img\n *ngIf=\"(fromWhere === 'expenseApproval' && element?.status === 'Approved'&& element?.reImbursed !== 'Reimbursed') || fromWhere == 'approval'\"\n class=\"approval-image me-2\" style=\"padding: 0px; width: 24px !important;\"\n (click)=\"onApprove( element?.employeeId, element?._id, element?.reImbursed )\"\n src=\"../assets/images/icons/general/Approved.svg\">\n <img *ngIf=\"fromWhere !== 'expenseApproval'\" class=\"approval-image\"\n style=\"padding: 0px; width: 24px !important;\"\n (click)=\"onReject( element?.employeeId, element?._id )\"\n src=\"../assets/images/icons/general/Declined.svg\" class=\"\" data-bs-toggle=\"modal\"\n data-bs-target=\"#approvalReject\">\n </div>\n </div>\n <!-- SK02APR24 added preview and download icons -->\n <div *ngIf=\"viewIcon\" class=\"ms-2 imgBtnDiv\">\n <!-- <img [src]=\"('post.svg' | svgIcon:'#000000') | async\" class=\"card-icon color\" title=\"preview\" (click)=\"viewIconClick(element)\" style=\"cursor: pointer;\" /> -->\n <i class=\"fusion-icon fusion-icon-size-lg fusion-icon-eye nav-icon\" matTooltip=\"Preview\"\n matTooltipPosition=\"above\" style=\"color: var(--fc-text-color-light) !important; cursor: pointer;\"\n (click)=\"viewIconClick(element)\"></i>\n\n </div>\n <div *ngIf=\"downloadIcon\" class=\"ms-2 imgBtnDiv\">\n <i class=\"fusion-icon fusion-icon-size-lg fusion-icon-document-download card-icon color imgBtn\"\n matTooltip=\"Download\" matTooltipPosition=\"above\"\n style=\"cursor: pointer; color: var(--fc-text-color-light) !important;\"\n (click)=\"downloadIconClick(element)\">\n </i>\n </div>\n <!-- SKS25DEC24 send button -->\n <div *ngIf=\"(!conditionSendButton) && sendButton\" class=\"ms-2 imgBtnDiv\" style=\"margin-top: 6px;\">\n <i class=\"fusion-icon fusion-icon-size-lg fusion-icon-send-2 card-icon color imgBtn\"\n style=\"cursor: pointer\" (click)=\"onSend(element, i)\"\n [matTooltip]=\"'APP.SEND' | customTranslate : 'Send'\"></i>\n </div>\n <div\n *ngIf=\"(conditionSendButton) && isConditionMet(element, conditionSendButton.conditions) && sendButton\"\n class=\"ms-2 imgBtnDiv\" style=\"margin-top: 6px;\">\n <i class=\"fusion-icon fusion-icon-size-lg fusion-icon-send-2 card-icon color imgBtn\"\n style=\"cursor: pointer\" (click)=\"onSend(element, i)\"\n [matTooltip]=\"'APP.SEND' | customTranslate : 'Send'\"></i>\n </div>\n <!-- SKS25DEC24 active button -->\n <div *ngIf=\"(!conditionActivateButton) && activeButton\" class=\"ms-2 imgBtnDiv\"\n style=\"margin-top: 10px;\">\n <i class=\"fusion-icon fusion-icon-size-lg fusion-icon-group nav-icon\" style=\"color: var(--comp-bg-color, #ffffff);\"></i>\n </div>\n <div\n *ngIf=\"(conditionActivateButton) && isConditionMet(element, conditionActivateButton.conditions) && activeButton\"\n class=\"ms-2 imgBtnDiv\" style=\"margin-top: 10px;\">\n <i class=\"fusion-icon fusion-icon-size-lg fusion-icon-group nav-icon\" style=\"color: var(--comp-bg-color, #ffffff);\"></i>\n </div>\n <!-- SKS25DEC24 deactive button -->\n <div *ngIf=\"(!conditionDeactivateButton) && deactiveButton\" class=\"ms-2 imgBtnDiv\"\n style=\"margin-top: 10px;\">\n <i class=\"fusion-icon fusion-icon-size-lg fusion-icon-group nav-icon\" style=\"color: var(--comp-bg-color, #ffffff);\"></i>\n </div>\n <div\n *ngIf=\"(conditionDeactivateButton) && isConditionMet(element, conditionDeactivateButton.conditions) && deactiveButton\"\n class=\"ms-2 imgBtnDiv\" style=\"margin-top: 10px;\">\n <i class=\"fusion-icon fusion-icon-size-lg fusion-icon-group nav-icon\" style=\"color: var(--comp-bg-color, #ffffff);\"></i>\n </div>\n </div>\n <div>\n\n <app-fusion-button *ngIf=\"fromWhere == 'document-icons'\" [buttonType]=\"'custom-btn'\"\n [fcBtnIconLeftSrc]=\"'../assets/images/icons/general/downloadfile.svg'\"\n (buttonClickEmit)=\"downloadPdf(element)\"></app-fusion-button>\n <app-fusion-button *ngIf=\"fromWhere == 'document-icons'\" [buttonType]=\"'custom-btn'\"\n [fcBtnIconLeftSrc]=\"'../assets/images/icons/general/pencil-icon.svg'\"\n (buttonClickEmit)=\"delete(element, i)\" data-bs-toggle=\"modal\"\n data-bs-target=\"#documentsInfoModal\"></app-fusion-button>\n <app-fusion-button *ngIf=\"fromWhere == 'document-icons'\" [buttonType]=\"'custom-btn'\"\n [fcBtnIconLeftSrc]=\"'../assets/images/icons/Vectordelete.svg'\"\n (buttonClickEmit)=\"delete(element, i)\" data-bs-toggle=\"modal\"\n data-bs-target=\"#deleteDocModal\"></app-fusion-button>\n </div>\n </td>\n <td mat-footer-cell *matFooterCellDef=\"let element; let i=index\">{{ \"\" }}\n </td>\n </ng-container>\n\n <!-- total Row -->\n <ng-container [sticky]=\"true\" matColumnDef=\"total\">\n <th mat-header-cell *matHeaderCellDef class=\"sticky-column head-color\">\n </th>\n <td mat-cell *matCellDef=\"let row\" class=\"body-color\">\n </td>\n <!-- RS27AUG24 -->\n <!-- Used the translate pipe to successfully implement the translation -->\n <td mat-footer-cell *matFooterCellDef >{{'APP.TOTAL' | customTranslate : 'Total' }}\n </td>\n </ng-container>\n\n <!-- Render the columns -->\n <!-- SK16JUL24 adding the cumulative data row as footer -->\n <!-- <ng-container *ngIf=\"dataSource?.data?.length !== 0\"> -->\n <div [ngSwitch]=\"renderColumns\">\n <div *ngSwitchCase=\"'select'\">\n <tr mat-header-row *matHeaderRowDef=\"['select'].concat(displayedColumns) sticky: true\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: ['select'].concat(displayedColumns);\"></tr>\n <!-- SK19JUL24 table total update -->\n <tr\n [class]=\"cumulativeDataColumns != undefined && cumulativeDataColumns.length !== 0 ? '' : 'border border-white' \"\n mat-footer-row\n *matFooterRowDef=\"cumulativeDataColumns != undefined && cumulativeDataColumns.length !== 0 ? ['total'].concat(displayedColumns) : null \">\n </tr>\n </div>\n <div *ngSwitchCase=\"'tableAction'\">\n <tr mat-header-row\n *matHeaderRowDef=\" displayedColumns ? displayedColumns.concat(['tableAction']) : [] ;sticky: true\">\n </tr>\n <tr mat-row\n *matRowDef=\"let row; columns: displayedColumns ? displayedColumns.concat(['tableAction']) : []; \">\n </tr>\n <ng-container *ngIf=\"cumulativeDataColumns\">\n <tr\n [class]=\"cumulativeDataColumns != undefined && cumulativeDataColumns.length !== 0 ? '' : 'border border-white' \"\n mat-footer-row\n *matFooterRowDef=\"cumulativeDataColumns != undefined && cumulativeDataColumns.length !== 0 ? ['total'].concat(displayedColumns).concat('tableAction') : null\">\n </tr>\n </ng-container>\n </div>\n <!-- 30JAN24 for both checkbox and action columns-->\n <div *ngSwitchCase=\"'both'\">\n <tr mat-header-row\n *matHeaderRowDef=\"['select'].concat(displayedColumns).concat('tableAction') sticky: true\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: ['select'].concat(displayedColumns).concat('tableAction')\"\n (click)=\"tableClick(row)\"></tr>\n <ng-container *ngIf=\"cumulativeDataColumns\">\n <tr\n [class]=\"cumulativeDataColumns != undefined && cumulativeDataColumns.length !== 0 ? '' : 'border border-white' \"\n mat-footer-row\n *matFooterRowDef=\"cumulativeDataColumns != undefined && cumulativeDataColumns.length !== 0 ? ['total'].concat(displayedColumns).concat('tableAction') : null\">\n </tr>\n </ng-container>\n </div>\n <div *ngSwitchDefault>\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns sticky: true\"></tr>\n <tr mat-row *matRowDef=\"let row;let i =index; columns: displayedColumns;\"></tr>\n <ng-container *ngIf=\"cumulativeDataColumns\">\n <tr\n [class]=\"cumulativeDataColumns != undefined && cumulativeDataColumns.length !== 0 ? 'd-block' : 'border border-white' \"\n mat-footer-row\n *matFooterRowDef=\"cumulativeDataColumns != undefined && cumulativeDataColumns.length !== 0 ? ['total'].concat(displayedColumns) : null\">\n </tr>\n </ng-container>\n </div>\n </div>\n <!-- </ng-container> -->\n <!-- <tr class=\"mat-row \" *matNoDataRow> -->\n <!-- SK9JAN24 Removed attr.colspan since it throws undefined error -->\n <!-- <td class=\"mat-cell \">\n {{'APP.NO_RECORDS' | customTranslate : 'No records/data found.' }}\n </td>\n </tr> -->\n\n </table>\n <div class=\"no-data-cell text-center my-3 \" *ngIf=\"!dataSource || !dataSource.data || dataSource.data.length === 0\">\n {{ 'APP.NO_RECORDS' | customTranslate : 'No records/data found.' }}\n </div>\n </ng-container>\n <!-- MSM28JAN25 skeleton loader template -->\n <ng-template #loadingTemplate>\n <table>\n <tr style=\"height: 40px;\" *ngFor=\"let _ of [1, 2, 3, 4,5,6]\">\n <td colspan=\"3\" class=\"skeleton-card\">\n <div class=\"title\" data-title>\n <div class=\"skeleton skeleton-text\"></div>\n <div class=\"skeleton skeleton-text\"></div>\n </div>\n </td>\n </tr>\n </table>\n </ng-template>\n </div>\n <!-- SK23FEB24 table input save button changes -->\n <div class=\"d-flex justify-content-end\">\n <div class=\"flex mt-4 me-2 cursor-pointer\" *ngIf=\"addInlineRecord \" (click)=\"addTableRecord(inlineElement)\"\n [matTooltip]=\"'APP.ADD_NEW_RECORD' | customTranslate : 'Add New Record'\">\n <div class=\"ms-1 me-1\">\n <i class=\"fusion-icon fusion-icon-size-lg fusion-icon-add-square nav-icon\"\n style=\"color: var(--fc-text-color-dark, #000000) !important;\"></i>\n </div>\n </div>\n <!-- SK27FEB24 removed button disable logic, SK13MAR24 added another condition for button showing-->\n <!-- SR06JAN2025 button disable logic for not select any employee-->\n <div class=\"d-flex justify-content-between align-items-end\">\n <div class=\"px-2\">\n {{notes}}</div>\n\n <app-fusion-button [buttonLoadingSpinner]=\"tableSaveLoadingSpinner\"\n *ngIf=\"editColumn.length > 0 || tableSaveButton\" buttonType=\"btn btn-primary mt-4 me-2\"\n [buttonDisable]=\"selection?.selected?.length === 0\" (buttonClickEmit)=\"saveButton()\"\n buttonValue=\"{{ 'APP.SAVE' | customTranslate : 'Save' }}\"></app-fusion-button>\n </div>\n </div>\n <!-- SKS24JAN25 custom paginator -->\n <app-pagination #paginator [pageSizeOptions]=\"itemsPerPage\" [collectionSize]=\"totalCount\" [pageSize]=\"pageSize\"\n [currentPage]=\"pageIndex\" [firstLastButtons]=\"true\" (event)=\"pageParams($event)\" >\n </app-pagination>\n </div>\n </div>\n</div>\n\n<!-- SK03OCT24 while clicking export button, side screen will be displayed, with fields selection and filter boxes -->\n<app-common-screen *ngIf=\"exportSidescreen\" headerTitle=\"{{'APP.EXPORT_DATA' | customTranslate : 'Export Data'}}\"\n (sideScreenEmittedEvent)=\"exportSidescreen = false\">\n <div class=\"side-main-content\">\n <!-- MY 15OCT26 export file button loader -->\n <div\n class=\"d-flex align-items-center flex-row p-3 justify-content-center cursor-pointer short-button-white-bg button-hov\"\n [class.disabled]=\"exportButtonLoadingSpinner\"\n (click)=\"!exportButtonLoadingSpinner ? exportButtonSideNav() : null\">\n <div *ngIf=\"exportButtonLoadingSpinner\" class=\"spinner-grow spinner-grow-sm me-2\" role=\"status\" aria-hidden=\"true\"></div>\n <i *ngIf=\"!exportButtonLoadingSpinner\" class=\"fusion-icon fusion-icon-size-lg fusion-icon-document-upload card-icon color me-1\"></i>\n <div>{{ exportButtonLoadingSpinner ? (('APP_SETTINGS_APPS.LOADING' | customTranslate : 'Loading') + '...') : ('APP.EXPORT_FILE' | customTranslate : 'Export File') }}</div>\n </div>\n <!-- SK03OCT24 displaying components from parent (multipleCheckBox/multipleFilter) -->\n <div *ngFor=\"let type of filterScreenConfigs\">\n <!-- MY 15OCT26 pass button loader state to multi-checkbox and multiple-filter -->\n <app-multi-checkbox *ngIf=\"type.type === 'multipleCheckBox' \" class=\"ms-2 me-2\"\n [label]=\"type?.labelPath || type?.label | customTranslate : type?.label\" [cardSize]=\"type?.cardSize\"\n [cardInlineSize]=\"type?.cardInlineSize\" [checkboxList]=\"type?.checkboxList\"\n [activeCheckboxList]=\"type?.activeCheckboxList\" [buttonList]=\"type?.buttons\"\n [displayValues]=\"type?.displayValues\" [componentData]=\"type\" [checkBoxStyles]=\"type?.checkBoxStyles\"\n [isButtonLoadingSpinner]=\"type?.isButtonLoadingSpinner || false\"\n (compDataEmit)=\"exportFieldsButtonEmit($event)\">\n </app-multi-checkbox>\n <app-multiple-filter *ngIf=\"type.type === 'multipleFilter' \" class=\"ms-2 me-2\"\n [isDateFilter]=\"type?.isDateFilter || false\"\n [label]=\"type?.labelPath || type?.label | customTranslate : type?.label\" [cardSize]=\"type?.cardSize\"\n [cardInlineSize]=\"type?.cardInlineSize\" [buttonList]=\"type?.buttons\" [displayValues]=\"type?.displayValues\"\n [componentData]=\"type\" [checkBoxStyles]=\"type?.checkBoxStyles\" [selectionData]=\"type?.selectionData\"\n [isButtonLoadingSpinner]=\"type?.isButtonLoadingSpinner || false\"\n (compDataEmit)=\"exportFilterButtonEmit($event)\" (selectedValuesEmit)=\"selectedValuesEmit($event)\"\n (filterDateEmit)=\"filterDateEmit($event)\">\n </app-multiple-filter>\n </div>\n </div>\n</app-common-screen>\n<!-- SKS15DEC25 bulk upload -->\n<app-file-upload [id]=\"'uploadEmployee'\" [headerName]=\"moudleName\" [showFileModal]=\"uploadModal\"\n (closeEmit)=\"uploadModal = false\"\n [bodyHeaderName]=\"('APP.STEPS_TO_UPLOAD' | customTranslate : 'Steps to upload')+moudleName\" [isTemplate]=true\n [templateContent]=\"('APP.DOWNLOAD_THE' | customTranslate : 'Download the')+ moudleName +('APP.TEMPLATE' | customTranslate : 'template')\"\n (templateDownload)=\"downloadTemplate()\"\n [bodyContent]=\"[(('APP.FILL_THE_APPROP' | customTranslate : 'Fill the appropriate')+moudleName+('APP.DETAILS_AND_UPLOAD_ITS_BELOW' | customTranslate : 'Details and upload it below'))]\"\n [fileRestrictions]=\"{\n allowedTypes: ['.csv', '.xlsx', '.xls'],\n maxFileSize: 10,\n maxFiles: 1\n }\" [uploadedFiles]=\"[]\" [saveButtonName]=\"'APP.UPLOAD' | customTranslate : 'Upload'\"\n (upload)=\"uploadRecordsFile($event)\">\n</app-file-upload>\n<!-- SK06NOV24 alert on deleting record -->\n<div *ngIf=\"deleteModal\" class=\"modal modal-backdrop show d-block\" id=\"deleteRecord\" tabindex=\"-1\"\n aria-labelledby=\"deleteRecordLabel\" [attr.aria-hidden]=\"!deleteModal\">\n <div class=\"modal-dialog\">\n <div class=\"modal-content\">\n <div class=\"modal-header\">\n <b class=\"modal-title fs-5\" id=\"deleteRecordLabel\">{{'APP.DELETE_RECORD' | customTranslate : 'Delete Record'}}</b>\n <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"\n (click)=\"deleteModal = false\"></button>\n </div>\n <div class=\"modal-body\">\n {{'APP.ARE_YOU_SURE_YOU_WANT_TO_DELETE_THE_REC' | customTranslate : 'Are you sure want to delete the record'}} ?\n </div>\n <div class=\"modal-footer\">\n <button type=\"button\" class=\"btn btn-primary\" data-bs-dismiss=\"modal\" aria-label=\"Close\"\n (click)=\"!buttonLoadingSpinner ? deleteRecordData() : null\">\n <!-- SK04SEP25 button loader -->\n <span class=\"{{ buttonLoadingSpinner ? 'spinner-grow' : '' }} spinner-grow-sm\" role=\"buttonValue\"\n aria-hidden=\"true\"></span>\n <span>{{ buttonLoadingSpinner ? ('APP_SETTINGS_APPS.LOADING' | customTranslate : 'Loading') + '...' :\n ('APP.YES' | customTranslate : 'Yes') }}\n </span>\n </button>\n <button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\" (click)=\"deleteModal = false\">{{'APP.NO'\n | customTranslate : 'No'}}</button>\n </div>\n </div>\n </div>\n</div>\n\n<app-common-screen *ngIf=\"infoSidescreen\" [headerTitle]=\"'APP.APPROVAL_DETAILS' | customTranslate : 'Approval Details'\"\n (sideScreenEmittedEvent)=\"infoSidescreen = false\">\n <div class=\"side-main-content container\">\n <div class=\"row\">\n <div class=\"col-md-12\">\n <!-- Approval Info -->\n <div class=\"row mb-3\">\n <div class=\"col-6 text-start\">{{'APP.NAME' | customTranslate : 'Name'}}:</div>\n <div class=\"col-6 text-start\">{{ infoData.name || ''}}</div>\n </div>\n <div class=\"row mb-3\">\n <div class=\"col-6 text-start\">{{'APP.STATUS' | customTranslate : 'Status'}}:</div>\n <div class=\"col-6 text-start\">\n <span\n *ngIf=\"infoData.status === 'Approved' || infoData.status === 'Pending' || infoData.status === 'Rejected' \"\n class=\"badge custom-badge\" [ngClass]=\"{\n 'bg-success': infoData.status === 'Approved', \n 'bg-warning': infoData.status === 'Pending',\n 'bg-danger': infoData.status === 'Rejected'}\">\n {{ infoData.status }}</span>\n <span\n *ngIf=\"infoData.status !== 'Approved' && infoData.status !== 'Pending' && infoData.status !== 'Rejected' \">{{\n infoData.status || '' }}</span>\n </div>\n </div>\n <div class=\"row mb-3\">\n <!-- SK21DEC24 to add Approval status in side screen-->\n <div class=\"col-6 text-start\">{{'APP.APPROVAL_STATUS' | customTranslate : 'Approval Status'}}:</div>\n <div class=\"col-6 text-start\">\n <span\n *ngIf=\"infoData.leaveStatus === 'Approved' || infoData.leaveStatus === 'Pending' || infoData.leaveStatus === 'Rejected'\"\n class=\"badge custom-badge\" [ngClass]=\"{\n 'bg-success': infoData.leaveStatus === 'Approved', \n 'bg-warning': infoData.leaveStatus === 'Pending',\n 'bg-danger': infoData.leaveStatus === 'Rejected'}\">\n {{ infoData.leaveStatus || '' }}</span>\n <span\n *ngIf=\"infoData.leaveStatus !== 'Approved' && infoData.leaveStatus !== 'Pending' && infoData.leaveStatus !== 'Rejected'\">{{\n infoData.leaveStatus || '' }}</span>\n </div>\n </div>\n <div class=\"row mb-3\">\n <div class=\"col-6 text-start\">{{'APP.REASON' | customTranslate : 'Reason'}}:</div>\n <div class=\"col-6 text-start\">{{ infoData.reason || '' }}</div>\n </div>\n <div class=\"row mb-3\">\n <div class=\"col-6 text-start\">{{'APP.TYPE' | customTranslate : 'Type'}}:</div>\n <div class=\"col-6 text-start\">{{ infoData.type || ''}}</div>\n </div>\n <div class=\"row mb-3\">\n <div class=\"col-6 text-start\">{{'APP.APPLIED_ON' | customTranslate : 'Applied On'}}:</div>\n <div class=\"col-6 text-start\">{{ (infoData.appliedOn | date:'short') || '' }}</div>\n </div>\n <div class=\"row mb-3\">\n <div class=\"col-6 text-start\">{{'APP.APPROVED_COUNT' | customTranslate : 'Approved Count'}}:</div>\n <div class=\"col-6 text-start\">{{ infoData.approvedCount || '' }}</div>\n </div>\n </div>\n </div>\n <!-- Approval Managers -->\n <!-- SK03DEC24 show approval managers list only if applicable -->\n <h3 *ngIf=\"infoData.approvalManagers != undefined && infoData.approvalManagers.length > 0\" class=\"text-center mb-3\">\n {{'APP.APPROVAL_MANAGERS' | customTranslate : 'Approval Managers'}}</h3>\n <ul *ngIf=\"infoData.approvalManagers != undefined && infoData.approvalManagers.length > 0\" class=\"list-group\">\n <li *ngFor=\"let manager of infoData.approvalManagers\" class=\"list-group-item\">\n <div class=\"row mb-3\">\n <div class=\"col-6 text-start\">{{'APP.EMPLOYEE_ID' | customTranslate : 'Employee ID'}}:</div>\n <div class=\"col-6 text-start\">{{ manager.employeeId || ''}}</div>\n </div>\n <div class=\"row mb-3\">\n <!-- SK10DEC24 to show manager name -->\n <div class=\"col-6 text-start\">{{'APP.EMPLOYEE_NAME' | customTranslate : 'Employee Name'}}:</div>\n <div class=\"col-6 text-start\">{{ manager.name || '' }}</div>\n </div>\n <div class=\"row mb-3\">\n <div class=\"col-6 text-start\">{{'APP.APPROVAL_ORDER' | customTranslate : 'Approval Order'}}:</div>\n <div class=\"col-6 text-start\">{{ manager.approvalOrder || '' }}</div>\n </div>\n <div class=\"row mb-3\">\n <div class=\"col-6 text-start\">{{'APP.STATUS' | customTranslate : 'Status'}}:</div>\n <div class=\"col-6 text-start\">\n <span *ngIf=\"manager.status === 'Approved' || manager.status === 'Pending' || manager.status === 'Rejected'\"\n class=\"badge custom-badge\" [ngClass]=\"{\n 'bg-success': manager.status === 'Approved', \n 'bg-warning': manager.status === 'Pending',\n 'bg-danger': manager.status === 'Rejected'}\">\n {{ manager.status || '' }}\n </span>\n <span\n *ngIf=\"manager.status !== 'Approved' && manager.status !== 'Pending' && manager.status !== 'Rejected'\"> {{\n manager.status || '' }}</span>\n </div>\n </div>\n <div class=\"row mb-3\" *ngIf=\"manager.viewedOn\">\n <div class=\"col-6 text-start\">{{'APP.VIEWED_ON' | customTranslate : 'Viewed On'}}:</div>\n <div class=\"col-6 text-start\">{{ (manager.viewedOn | date:'short') || '' }}</div>\n </div>\n <div class=\"row mb-3\">\n <div class=\"col-6 text-start\">{{'APP.IS_OPTIONAL' | customTranslate : 'Is Optional'}}:</div>\n <div class=\"col-6 text-start\">{{ manager.isOptional ? \"Yes\" : \"No\" }}</div>\n </div>\n <div class=\"row mb-3\">\n <div class=\"col-6 text-start\">{{'APP.COMMENTS' | customTranslate : 'Comments'}}:</div>\n <div class=\"col-6 text-start\">{{ manager.rejectionReason || '' }}</div>\n </div>\n </li>\n </ul>\n </div>\n</app-common-screen>\n\n<!-- MR 09NOV26 Sandwich Leave Confirmation Modal -->\n<div *ngIf=\"confirmModal\" class=\"custom-modal-overlay\">\n <div class=\"custom-modal\">\n <div class=\"custom-modal-header\">\n <b>{{ 'APP_HRM_ATTENDANCE.CHECK_ATTENDANCE' | customTranslate : 'Check Attendance' }}</b>\n <button class=\"close-button\" (click)=\"confirmModal = false\">×</button>\n </div>\n <div class=\"custom-modal-body\">\n {{ 'APP_HRM_ATTENDANCE.CONFIRM_CHECK' | customTranslate : 'Are you sure you want to run attendance check?' }}\n </div>\n <div class=\"custom-modal-footer\">\n <button class=\"btn btn-primary\" (click)=\"checkButtonClicked(); confirmModal = false\">{{ 'APP.YES' | customTranslate : 'Yes' }}</button>\n <button class=\"btn btn-secondary ms-2\" (click)=\"confirmModal = false\">{{ 'APP.NO' | customTranslate : 'No' }}</button>\n </div>\n </div>\n</div>",
|
|
7473
7491
|
styles: [".table-wrapper{overflow-x:auto;max-width:100%}.table-container{border-top:1px solid var(--fb-border-default, #e2e8f0);min-height:100px;overflow:auto;width:100%;max-height:62vh}.table-layout{background:var(--fb-surface, #ffffff);border-radius:8px}.th{border-bottom:1px solid var(--fb-border-default, #e2e8f0);font-weight:var(--fw-600);font-size:var(--fs-medium);line-height:21px;color:var(--fb-text-primary, #0f172a)}.head-color{background-color:var(--fb-action-surface, #e0f2fe)!important;color:var(--fb-text-primary, #0f172a)!important}.body-color{color:var(--fb-text-primary, #0f172a);cursor:default}.search{display:flex;align-items:center;border:1px solid var(--border-color, #b1b1b1);background:var(--comp-bg-color, #ffffff);border-radius:var(--radius-medium, 7px);padding:4px 8px}.search-bar{display:flex;align-items:center;width:100%;gap:6px;margin:0}.search-bar input{background:transparent!important;border:none!important;outline:none!important;box-shadow:none!important;width:100%;font-size:13px;color:var(--fc-text-color, #1e293b);padding:2px 4px}th.mat-header-cell:last-of-type{padding:0;font-weight:var(--fw-600);font-size:var(--fs-medium);color:var(--fb-text-primary, #0f172a)}td.mat-cell:last-of-type{padding:8px;font-weight:var(--fw-400);font-size:var(--fs-medium);color:var(--fb-text-primary, #0f172a)}.table-title{font-weight:var(--fw-600);color:var(--fb-text-primary, #0f172a)}.sticky-column{background:var(--fb-surface, #ffffff)}.mat-sort-header-container{margin-left:5px}.body-color img{cursor:pointer}.head-color.action-size{color:var(--fb-text-primary, #0f172a);font-size:var(--fs-primary);font-weight:var(--fw-600)}.lop-input{border-radius:5px;color:var(--fb-text-primary, #0f172a);background-color:var(--fb-surface, #ffffff);font-weight:var(--fw-400);font-size:var(--fs-medium);transition:all .2s}::ng-deep [dir=rtl] .body-color img{margin-left:4px!important}@media screen and (min-width:600px){mat-table{font-weight:var(--fw-400);font-size:var(--fs-medium);color:var(--fb-text-primary, #0f172a)}}@media screen and (max-width:882px){mat-table{font-weight:var(--fw-400);font-size:var(--fs-medium);color:var(--fb-text-primary, #0f172a)}.mat-cell{padding:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mat-header-cell{padding:0}}th.mat-header-cell:first-of-type,td.mat-cell:first-of-type,td.mat-footer-cell:first-of-type{padding-right:24px}::ng-deep [dir=rtl] th.mat-header-cell:last-of-type:not(:only-of-type){padding-right:10px!important;padding-left:unset!important}.mat-sort-header-container.mat-focus-indicator.ng-tns-c139-34{margin-left:5px}.expense-file{font-size:var(--fs-small)}.expense-file:hover{font-style:italic;text-decoration:underline;color:var(--fb-action-hover, #00284d)}.expenseCon{background-color:var(--fb-surface-elevated, #ffffff);border:1px solid var(--fb-border-default, #e2e8f0);padding:5px;border-radius:3px}.hyper-link{text-decoration:none}.hyper-link:hover{color:var(--fb-action, #003566);text-decoration:underline}.clickable{cursor:pointer}.font-size-13{font-size:var(--fs-normal)}.weekoff-color{color:var(--fb-error, #ef4444)}.table-width{width:max-content}.on-edit:hover .edit-icon{visibility:visible}.edit-icon{visibility:hidden}.input-box{border:solid}.button-hov:hover{background:var(--fb-action, #003566);color:var(--fb-text-on-action, #ffffff)}.delete-icon{justify-content:center}.side-main-content{border-radius:10px}h2{font-size:28px}.list-group-item{margin-bottom:10px;padding:15px}.list-group-item p{margin-bottom:5px}.custom-badge{display:inline-block;width:50%;text-align:center;padding:.3em 0;margin-top:0!important}.bg-success{--bs-bg-opacity: 1;background-color:var(--fb-success-surface, #e6f4ea)!important;color:var(--fb-success-text, #137333)!important}.custom-search-button{background-color:var(--fb-action, #003566);color:var(--fb-text-on-action, #ffffff);border-radius:5px;font-size:var(--fs-normal);border:none}.custom-search-button:hover{background-color:var(--fb-action-hover, #00284d)}.custom-search-button:active{transform:translateY(0)}.table{border-top:1px solid var(--fb-border-default, #e2e8f0)}th,td{vertical-align:middle}.configSearch{height:22px;padding:3px;margin:10p;background-color:var(--fb-action, #003566);border-radius:4px}::ng-deep .table>:not(caption)>*>*{background-color:none!important;--bs-table-bg: var(--fb-surface, #ffffff) !important}.imgBtn{background-color:var(--fb-surface-secondary, #f8fafc);border-radius:var(--radius-small, 6px)}.imgBtnDiv{line-height:0px;padding:4px;border-radius:5px;border:1px solid var(--fb-border-default, #e2e8f0)}input::placeholder{font-size:var(--fs-small);font-weight:var(--fw-400);color:var(--fb-placeholder-text, #94a3b8)}::ng-deep .modal-backdrop{background-color:var(--fb-backdrop, #00000073)!important}::ng-deep .modal-backdrop.show{background-color:var(--fb-backdrop, #00000073)!important;opacity:1!important}::ng-deep .mat-sort-header-container .mat-sort-header-content span{color:var(--fb-text-primary, #0f172a)!important;font-weight:var(--fw-600)!important;font-size:var(--fs-primary)!important}::ng-deep .mat-mdc-cell{color:var(--fb-text-primary, #0f172a)!important;font-weight:var(--fw-400)!important;font-size:var(--fs-primary)!important;min-width:20px!important}.active-column{color:var(--fb-text-primary, #0f172a)!important;font-weight:var(--fw-600)!important;font-size:var(--fs-primary)!important}.hover-content{background:var(--fb-surface-elevated, #ffffff)}.position-relative{position:relative;display:inline-block}.filter-popup{position:absolute;top:100%;left:0;z-index:9998;background-color:var(--fb-surface-elevated, #ffffff);border:1px solid var(--fb-border-default, #e2e8f0);box-shadow:0 4px 12px var(--fb-backdrop, rgba(0, 0, 0, .08));padding:10px;min-width:200px}.spanFontSize{font-size:var(--fs-normal)}.mat-column-employees{width:200px;min-width:200px;padding-left:8px;height:57px;left:0!important}.text-start{font-size:var(--fs-normal)}.first-header-border{border-left:1px solid var(--fb-border-default, #e2e8f0)}tr{height:45px!important;text-wrap:nowrap!important}.field-input{width:min(220px,98%);min-height:50px}.svg-spinner{animation:rotate 1s linear infinite}.svg-spinner .path{stroke:var(--fb-action, #003566);stroke-linecap:round;stroke-dasharray:80 150;stroke-width:4}@keyframes rotate{to{transform:rotate(360deg)}}img{max-width:none!important;vertical-align:middle}::ng-deep .mat-mdc-row:hover{background-color:var(--fb-row-hover, #f8fafc)!important}::ng-deep .mat-mdc-row:nth-child(2n){background-color:var(--fb-row-alternate, #fcfdfe)}.top-legend-bar{border-top:1px solid var(--fb-border-default, #e2e8f0);padding:8px 12px;font-size:var(--fs-small, 12px);background:var(--fb-surface, #ffffff)}.legend-text{font-size:var(--fs-small, 12px);color:var(--fc-text-color-dark, #0f172a);font-weight:var(--fw-500, 500)}.attendance-chip{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:4px;font-size:11px;font-weight:600}.attendance-present{background:#dcfce7;color:#15803d}.attendance-absent{background:#fee2e2;color:#b91c1c}.attendance-half{background:#fef3c7;color:#b45309}.attendance-holiday{background:#e0e7ff;color:#4338ca}.attendance-weekoff{background:#f1f5f9;color:#64748b}.picker-container{display:flex;align-items:center;gap:8px;padding:4px 8px;border:1px solid var(--fb-border-default, #e2e8f0);border-radius:6px;background:var(--fb-surface, #ffffff);margin-right:8px}.picker-container .arrow-btn{cursor:pointer;font-size:14px}.picker-container .month-label{cursor:pointer;font-weight:var(--fw-600, 600);font-size:13px;min-width:100px;text-align:center}.popup{position:absolute;z-index:1000;background:var(--comp-bg-color, #ffffff);border:1px solid var(--border-color, #e2e8f0);border-radius:8px;box-shadow:0 4px 12px #0000001a;padding:12px;width:220px}.year-section{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-weight:600}.year-section i{cursor:pointer}.month-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.month-item{padding:6px;text-align:center;cursor:pointer;border-radius:4px;font-size:12px}.month-item:hover,.month-item.active{background:var(--fb-action, #003566);color:#fff}.custom-modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#0006;display:flex;align-items:center;justify-content:center;z-index:1050}.custom-modal{background:var(--comp-bg-color, #ffffff);border-radius:8px;width:450px;max-width:90%;box-shadow:0 5px 15px #0003;overflow:hidden}.custom-modal-header{padding:12px 16px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border-color, #e2e8f0)}.custom-modal-body{padding:16px;font-size:14px}.custom-modal-footer{padding:12px 16px;display:flex;justify-content:flex-end;border-top:1px solid var(--border-color, #e2e8f0)}.close-button{background:none;border:none;font-size:1.25rem;cursor:pointer}\n"]
|
|
7474
7492
|
}]
|
|
7475
7493
|
}],
|
|
@@ -7557,6 +7575,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
7557
7575
|
defaultWorkingHours: [{ type: Input }],
|
|
7558
7576
|
saveLOP: [{ type: Input }],
|
|
7559
7577
|
isAttendanceTable: [{ type: Input }],
|
|
7578
|
+
isLoading: [{ type: Input }],
|
|
7560
7579
|
dateEmit: [{ type: Output }],
|
|
7561
7580
|
selectedValues: [{ type: Output }],
|
|
7562
7581
|
tableRowClick: [{ type: Output }],
|