@rangertechnologies/fusion-ui 0.1.4 → 0.1.6

package/fesm2022/rangertechnologies-fusion-ui.mjs

@@ -1,31 +1,47 @@
-import * as i1$3 from "@angular/common";
+import * as i1$4 from "@angular/common";
 import { CommonModule, DatePipe } from "@angular/common";
 import * as i0 from "@angular/core";
-import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, HostListener, Injectable, Input, Optional, Output, Pipe, ViewChild, ViewChildren } from "@angular/core";
+import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, HostListener, Inject, Injectable, InjectionToken, Input, Optional, Output, Pipe, ViewChild, ViewChildren } from "@angular/core";
 import { AngularSvgIconModule } from "angular-svg-icon";
-import * as i1$4 from "@ngx-translate/core";
+import * as i1$5 from "@ngx-translate/core";
 import { TranslateModule } from "@ngx-translate/core";
-import * as i3$1 from "@angular/forms";
-import { FormsModule, ReactiveFormsModule, Validators } from "@angular/forms";
-import { BehaviorSubject, Subject, catchError, firstValueFrom, shareReplay, throwError } from "rxjs";
-import * as i1$2 from "@angular/common/http";
-import * as i3 from "@angular/material/checkbox";
+import * as i3$2 from "@angular/forms";
+import { FormControl, FormsModule, ReactiveFormsModule, Validators } from "@angular/forms";
+import { BehaviorSubject, Subject, Subscription, catchError, firstValueFrom, shareReplay, throwError } from "rxjs";
+import * as i1$3 from "@angular/common/http";
+import * as i3$1 from "@angular/material/checkbox";
 import { MatCheckboxModule } from "@angular/material/checkbox";
 import { SelectionModel } from "@angular/cdk/collections";
 import { Modal, Popover } from "bootstrap";
-import * as i1$1 from "@angular/cdk/overlay";
+import * as i1$2 from "@angular/cdk/overlay";
 import { OverlayModule } from "@angular/cdk/overlay";
 import * as i10$1 from "@rangertechnologies/ngnxt";
 import { NxtAppModule, NxtButtonComponent, NxtFileUpload } from "@rangertechnologies/ngnxt";
-import * as i4 from "@angular/material/tooltip";
+import * as i4$1 from "@angular/material/tooltip";
 import { MatTooltipModule } from "@angular/material/tooltip";
 import { saveAs } from "file-saver";
-import * as i1 from "@angular/router";
-import * as i9 from "@angular/material/table";
+import * as i1$1 from "@angular/router";
+import * as i9$1 from "@angular/material/table";
 import { MatTableDataSource, MatTableModule } from "@angular/material/table";
 import { MatPaginatorIntl, MatPaginatorModule } from "@angular/material/paginator";
 import * as i10 from "@angular/material/sort";
 import { MatSort, MatSortModule } from "@angular/material/sort";
+import * as i1 from "@angular/platform-browser";
+import * as i2 from "@angular/material/form-field";
+import { MatFormFieldModule } from "@angular/material/form-field";
+import * as i3 from "@angular/material/select";
+import { MatSelectModule } from "@angular/material/select";
+import * as i9 from "@angular/material/chips";
+import { MatChipsModule } from "@angular/material/chips";
+import * as i6 from "@angular/material/icon";
+import { MatIconModule } from "@angular/material/icon";
+import * as i4 from "@angular/material/input";
+import { MatInputModule } from "@angular/material/input";
+import * as i5 from "@angular/material/button";
+import { MatButtonModule } from "@angular/material/button";
+import * as i8 from "@angular/material/core";
+import { MatRippleModule } from "@angular/material/core";
+import { takeUntil } from "rxjs/operators";
 import * as numberToWords from "number-to-words";
 var CustomTranslatePipe = class CustomTranslatePipe {
 	translate;
@@ -42,7 +58,7 @@ var CustomTranslatePipe = class CustomTranslatePipe {
 		version: "22.2.4",
 		ngImport: i0,
 		type: CustomTranslatePipe,
-		deps: [{ token: i1$4.TranslateService }],
+		deps: [{ token: i1$5.TranslateService }],
 		target: i0.ɵɵFactoryTarget.Pipe
 	});
 	static ɵpipe = i0.ɵɵngDeclarePipe({
@@ -66,7 +82,7 @@ i0.ɵɵngDeclareClassMetadata({
 			standalone: true
 		}]
 	}],
-	ctorParameters: () => [{ type: i1$4.TranslateService }]
+	ctorParameters: () => [{ type: i1$5.TranslateService }]
 });
 var FusionButtonComponent = class FusionButtonComponent {
 	elementRef;
@@ -179,7 +195,7 @@ var FusionButtonComponent = class FusionButtonComponent {
 			},
 			{
 				kind: "directive",
-				type: i1$3.NgForOf,
+				type: i1$4.NgForOf,
 				selector: "[ngFor][ngForOf]",
 				inputs: [
 					"ngForOf",
@@ -189,7 +205,7 @@ var FusionButtonComponent = class FusionButtonComponent {
 			},
 			{
 				kind: "directive",
-				type: i1$3.NgIf,
+				type: i1$4.NgIf,
 				selector: "[ngIf]",
 				inputs: [
 					"ngIf",
@@ -199,7 +215,7 @@ var FusionButtonComponent = class FusionButtonComponent {
 			},
 			{
 				kind: "directive",
-				type: i1$3.NgStyle,
+				type: i1$4.NgStyle,
 				selector: "[ngStyle]",
 				inputs: ["ngStyle"]
 			},
@@ -314,8 +330,8 @@ var ConfigService = class ConfigService {
 	http;
 	config;
 	static runtimeConfig;
-	defaultApiUrl = "http://localhost:3000";
-	hostContractGlobal = "__FUSION_HOST_RUNTIME_CONTRACT__";
+	defaultApiUrl = "https://dev-api.rangerfusion.com";
+	static hostContractGlobal = "__FUSION_HOST_RUNTIME_CONTRACT__";
 	constructor(http) {
 		this.http = http;
 	}
@@ -359,30 +375,44 @@ var ConfigService = class ConfigService {
 		return ConfigService.runtimeConfig?.serviceConfig?.[key];
 	}
 	getApiUrl() {
+		const hostContract = this.getHostContract();
+		if (hostContract?.apiUrl) return hostContract.apiUrl;
 		return this.config?.serviceConfig?.apiUrl || this.config?.serviceConfig?.API_URL || this.defaultApiUrl;
 	}
 	static getApiUrl() {
+		const hostContract = ConfigService.getHostContract();
+		if (hostContract?.apiUrl) return hostContract.apiUrl;
 		const serviceConfig = ConfigService.runtimeConfig?.serviceConfig;
 		return serviceConfig?.API_URL || serviceConfig?.apiUrl;
 	}
+	getAppUrl() {
+		const hostContract = this.getHostContract();
+		if (hostContract?.appUrl) return hostContract.appUrl;
+		return this.config?.serviceConfig?.appUrl || this.config?.serviceConfig?.APP_URL;
+	}
 	static getAppUrl() {
+		const hostContract = ConfigService.getHostContract();
+		if (hostContract?.appUrl) return hostContract.appUrl;
 		const serviceConfig = ConfigService.runtimeConfig?.serviceConfig;
 		return serviceConfig?.APP_URL || serviceConfig?.appUrl;
 	}
 	isSplitUserBootstrap() {
 		return Boolean(this.getServiceConfig("splitUserBootstrap"));
 	}
-	getHostContract() {
+	static getHostContract() {
 		if (typeof window === "undefined") return null;
-		const contract = window[this.hostContractGlobal];
+		const contract = window[ConfigService.hostContractGlobal];
 		return contract?.apiUrl ? contract : null;
 	}
+	getHostContract() {
+		return ConfigService.getHostContract();
+	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
 		version: "22.2.4",
 		ngImport: i0,
 		type: ConfigService,
-		deps: [{ token: i1$2.HttpClient }],
+		deps: [{ token: i1$3.HttpClient }],
 		target: i0.ɵɵFactoryTarget.Injectable
 	});
 	static ɵprov = i0.ɵɵngDeclareInjectable({
@@ -402,7 +432,7 @@ i0.ɵɵngDeclareClassMetadata({
 		type: Injectable,
 		args: [{ providedIn: "root" }]
 	}],
-	ctorParameters: () => [{ type: i1$2.HttpClient }]
+	ctorParameters: () => [{ type: i1$3.HttpClient }]
 });
 var ApiService = class ApiService {
 	http;
@@ -491,7 +521,7 @@ var ApiService = class ApiService {
 		version: "22.2.4",
 		ngImport: i0,
 		type: ApiService,
-		deps: [{ token: i1$2.HttpClient }, { token: ConfigService }],
+		deps: [{ token: i1$3.HttpClient }, { token: ConfigService }],
 		target: i0.ɵɵFactoryTarget.Injectable
 	});
 	static ɵprov = i0.ɵɵngDeclareInjectable({
@@ -511,7 +541,7 @@ i0.ɵɵngDeclareClassMetadata({
 		type: Injectable,
 		args: [{ providedIn: "root" }]
 	}],
-	ctorParameters: () => [{ type: i1$2.HttpClient }, { type: ConfigService }]
+	ctorParameters: () => [{ type: i1$3.HttpClient }, { type: ConfigService }]
 });
 var GlobalValuesService = class GlobalValuesService {
 	apiService;
@@ -820,7 +850,7 @@ var SearchFilterComponent = class SearchFilterComponent {
 			},
 			{
 				kind: "directive",
-				type: i1$3.NgForOf,
+				type: i1$4.NgForOf,
 				selector: "[ngFor][ngForOf]",
 				inputs: [
 					"ngForOf",
@@ -830,7 +860,7 @@ var SearchFilterComponent = class SearchFilterComponent {
 			},
 			{
 				kind: "directive",
-				type: i1$3.NgIf,
+				type: i1$4.NgIf,
 				selector: "[ngIf]",
 				inputs: [
 					"ngIf",
@@ -844,12 +874,12 @@ var SearchFilterComponent = class SearchFilterComponent {
 			},
 			{
 				kind: "directive",
-				type: i3$1.DefaultValueAccessor,
+				type: i3$2.DefaultValueAccessor,
 				selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]"
 			},
 			{
 				kind: "directive",
-				type: i3$1.NgControlStatus,
+				type: i3$2.NgControlStatus,
 				selector: "[formControlName],[ngModel],[formControl]"
 			},
 			{
@@ -858,7 +888,7 @@ var SearchFilterComponent = class SearchFilterComponent {
 			},
 			{
 				kind: "directive",
-				type: i3$1.NgModel,
+				type: i3$2.NgModel,
 				selector: "[ngModel]:not([formControlName]):not([formControl])",
 				inputs: [
 					"name",
@@ -1054,7 +1084,7 @@ var MultiCheckboxComponent = class MultiCheckboxComponent {
 			},
 			{
 				kind: "directive",
-				type: i1$3.NgForOf,
+				type: i1$4.NgForOf,
 				selector: "[ngFor][ngForOf]",
 				inputs: [
 					"ngForOf",
@@ -1064,7 +1094,7 @@ var MultiCheckboxComponent = class MultiCheckboxComponent {
 			},
 			{
 				kind: "directive",
-				type: i1$3.NgIf,
+				type: i1$4.NgIf,
 				selector: "[ngIf]",
 				inputs: [
 					"ngIf",
@@ -1078,7 +1108,7 @@ var MultiCheckboxComponent = class MultiCheckboxComponent {
 			},
 			{
 				kind: "component",
-				type: i3.MatCheckbox,
+				type: i3$1.MatCheckbox,
 				selector: "mat-checkbox",
 				inputs: [
 					"aria-label",
@@ -1139,17 +1169,17 @@ var MultiCheckboxComponent = class MultiCheckboxComponent {
 			},
 			{
 				kind: "directive",
-				type: i3$1.DefaultValueAccessor,
+				type: i3$2.DefaultValueAccessor,
 				selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]"
 			},
 			{
 				kind: "directive",
-				type: i3$1.NgControlStatus,
+				type: i3$2.NgControlStatus,
 				selector: "[formControlName],[ngModel],[formControl]"
 			},
 			{
 				kind: "directive",
-				type: i3$1.NgModel,
+				type: i3$2.NgModel,
 				selector: "[ngModel]:not([formControlName]):not([formControl])",
 				inputs: [
 					"name",
@@ -1393,7 +1423,7 @@ var DropDownComponent = class DropDownComponent {
 			},
 			{
 				kind: "directive",
-				type: i1$3.NgForOf,
+				type: i1$4.NgForOf,
 				selector: "[ngFor][ngForOf]",
 				inputs: [
 					"ngForOf",
@@ -1403,7 +1433,7 @@ var DropDownComponent = class DropDownComponent {
 			},
 			{
 				kind: "directive",
-				type: i1$3.NgIf,
+				type: i1$4.NgIf,
 				selector: "[ngIf]",
 				inputs: [
 					"ngIf",
@@ -1421,17 +1451,17 @@ var DropDownComponent = class DropDownComponent {
 			},
 			{
 				kind: "directive",
-				type: i3$1.DefaultValueAccessor,
+				type: i3$2.DefaultValueAccessor,
 				selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]"
 			},
 			{
 				kind: "directive",
-				type: i3$1.NgControlStatus,
+				type: i3$2.NgControlStatus,
 				selector: "[formControlName],[ngModel],[formControl]"
 			},
 			{
 				kind: "directive",
-				type: i3$1.NgModel,
+				type: i3$2.NgModel,
 				selector: "[ngModel]:not([formControlName]):not([formControl])",
 				inputs: [
 					"name",
@@ -1614,7 +1644,7 @@ var MultipleFilterComponent = class MultipleFilterComponent {
 			},
 			{
 				kind: "directive",
-				type: i1$3.NgForOf,
+				type: i1$4.NgForOf,
 				selector: "[ngFor][ngForOf]",
 				inputs: [
 					"ngForOf",
@@ -1624,7 +1654,7 @@ var MultipleFilterComponent = class MultipleFilterComponent {
 			},
 			{
 				kind: "directive",
-				type: i1$3.NgIf,
+				type: i1$4.NgIf,
 				selector: "[ngIf]",
 				inputs: [
 					"ngIf",
@@ -1672,17 +1702,17 @@ var MultipleFilterComponent = class MultipleFilterComponent {
 			},
 			{
 				kind: "directive",
-				type: i3$1.DefaultValueAccessor,
+				type: i3$2.DefaultValueAccessor,
 				selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]"
 			},
 			{
 				kind: "directive",
-				type: i3$1.NgControlStatus,
+				type: i3$2.NgControlStatus,
 				selector: "[formControlName],[ngModel],[formControl]"
 			},
 			{
 				kind: "directive",
-				type: i3$1.NgModel,
+				type: i3$2.NgModel,
 				selector: "[ngModel]:not([formControlName]):not([formControl])",
 				inputs: [
 					"name",
@@ -1879,7 +1909,7 @@ var PaginationComponent = class PaginationComponent {
 			},
 			{
 				kind: "directive",
-				type: i1$3.NgForOf,
+				type: i1$4.NgForOf,
 				selector: "[ngFor][ngForOf]",
 				inputs: [
 					"ngForOf",
@@ -1889,7 +1919,7 @@ var PaginationComponent = class PaginationComponent {
 			},
 			{
 				kind: "directive",
-				type: i1$3.NgIf,
+				type: i1$4.NgIf,
 				selector: "[ngIf]",
 				inputs: [
 					"ngIf",
@@ -1903,30 +1933,30 @@ var PaginationComponent = class PaginationComponent {
 			},
 			{
 				kind: "directive",
-				type: i3$1.NgSelectOption,
+				type: i3$2.NgSelectOption,
 				selector: "option",
 				inputs: ["ngValue", "value"]
 			},
 			{
 				kind: "directive",
-				type: i3$1.ɵNgSelectMultipleOption,
+				type: i3$2.ɵNgSelectMultipleOption,
 				selector: "option",
 				inputs: ["ngValue", "value"]
 			},
 			{
 				kind: "directive",
-				type: i3$1.SelectControlValueAccessor,
+				type: i3$2.SelectControlValueAccessor,
 				selector: "select:not([multiple]):not([ngNoCva])[formControlName],select:not([multiple]):not([ngNoCva])[formControl],select:not([multiple]):not([ngNoCva])[ngModel]",
 				inputs: ["compareWith"]
 			},
 			{
 				kind: "directive",
-				type: i3$1.NgControlStatus,
+				type: i3$2.NgControlStatus,
 				selector: "[formControlName],[ngModel],[formControl]"
 			},
 			{
 				kind: "directive",
-				type: i3$1.NgModel,
+				type: i3$2.NgModel,
 				selector: "[ngModel]:not([formControlName]):not([formControl])",
 				inputs: [
 					"name",
@@ -2035,7 +2065,7 @@ var PopoverComponent = class PopoverComponent {
 		version: "22.2.4",
 		ngImport: i0,
 		type: PopoverComponent,
-		deps: [{ token: i1$1.Overlay }, { token: i0.ChangeDetectorRef }],
+		deps: [{ token: i1$2.Overlay }, { token: i0.ChangeDetectorRef }],
 		target: i0.ɵɵFactoryTarget.Component
 	});
 	static ɵcmp = i0.ɵɵngDeclareComponent({
@@ -2059,7 +2089,7 @@ var PopoverComponent = class PopoverComponent {
 			},
 			{
 				kind: "directive",
-				type: i1$3.NgIf,
+				type: i1$4.NgIf,
 				selector: "[ngIf]",
 				inputs: [
 					"ngIf",
@@ -2069,7 +2099,7 @@ var PopoverComponent = class PopoverComponent {
 			},
 			{
 				kind: "directive",
-				type: i1$3.NgTemplateOutlet,
+				type: i1$4.NgTemplateOutlet,
 				selector: "[ngTemplateOutlet]",
 				inputs: [
 					"ngTemplateOutletContext",
@@ -2087,7 +2117,7 @@ var PopoverComponent = class PopoverComponent {
 			},
 			{
 				kind: "directive",
-				type: i1$1.CdkConnectedOverlay,
+				type: i1$2.CdkConnectedOverlay,
 				selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]",
 				inputs: [
 					"cdkConnectedOverlayOrigin",
@@ -2128,7 +2158,7 @@ var PopoverComponent = class PopoverComponent {
 			},
 			{
 				kind: "directive",
-				type: i1$1.CdkOverlayOrigin,
+				type: i1$2.CdkOverlayOrigin,
 				selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]",
 				exportAs: ["cdkOverlayOrigin"]
 			}
@@ -2156,7 +2186,7 @@ i0.ɵɵngDeclareClassMetadata({
 			styles: [".fusion-popover{position:relative}.popover-content{display:none;position:fixed;z-index:1000;right:0;border:1px solid var(--border-color);background-color:var(--comp-bg-color);border-radius:4px}.popover-base{padding-left:10px}.popover-base:hover>.popover-content{display:block}.popover-content:has(.white-parent){border-radius:8px;background:var(--comp-bg-color);box-shadow:0 0 16px var(--box-shadow-color)}\n"]
 		}]
 	}],
-	ctorParameters: () => [{ type: i1$1.Overlay }, { type: i0.ChangeDetectorRef }],
+	ctorParameters: () => [{ type: i1$2.Overlay }, { type: i0.ChangeDetectorRef }],
 	propDecorators: {
 		isBootstrap: [{ type: Input }],
 		dynamicPopover: [{ type: Input }],
@@ -2243,13 +2273,13 @@ var ModalComponent = class ModalComponent {
 			},
 			{
 				kind: "directive",
-				type: i1$3.NgClass,
+				type: i1$4.NgClass,
 				selector: "[ngClass]",
 				inputs: ["class", "ngClass"]
 			},
 			{
 				kind: "directive",
-				type: i1$3.NgIf,
+				type: i1$4.NgIf,
 				selector: "[ngIf]",
 				inputs: [
 					"ngIf",
@@ -2428,7 +2458,7 @@ var FileUploadComponent = class FileUploadComponent {
 			},
 			{
 				kind: "directive",
-				type: i1$3.NgForOf,
+				type: i1$4.NgForOf,
 				selector: "[ngFor][ngForOf]",
 				inputs: [
 					"ngForOf",
@@ -2438,7 +2468,7 @@ var FileUploadComponent = class FileUploadComponent {
 			},
 			{
 				kind: "directive",
-				type: i1$3.NgIf,
+				type: i1$4.NgIf,
 				selector: "[ngIf]",
 				inputs: [
 					"ngIf",
@@ -3254,7 +3284,7 @@ var SideScreenComponent = class SideScreenComponent {
 		version: "22.2.4",
 		ngImport: i0,
 		type: SideScreenComponent,
-		deps: [{ token: i3$1.FormBuilder }],
+		deps: [{ token: i3$2.FormBuilder }],
 		target: i0.ɵɵFactoryTarget.Component
 	});
 	static ɵcmp = i0.ɵɵngDeclareComponent({
@@ -3318,13 +3348,13 @@ var SideScreenComponent = class SideScreenComponent {
 			},
 			{
 				kind: "directive",
-				type: i1$3.NgClass,
+				type: i1$4.NgClass,
 				selector: "[ngClass]",
 				inputs: ["class", "ngClass"]
 			},
 			{
 				kind: "directive",
-				type: i1$3.NgIf,
+				type: i1$4.NgIf,
 				selector: "[ngIf]",
 				inputs: [
 					"ngIf",
@@ -3338,22 +3368,22 @@ var SideScreenComponent = class SideScreenComponent {
 			},
 			{
 				kind: "directive",
-				type: i3$1.ɵNgNoValidate,
+				type: i3$2.ɵNgNoValidate,
 				selector: "form:not([ngNoForm]):not([ngNativeValidate])"
 			},
 			{
 				kind: "directive",
-				type: i3$1.DefaultValueAccessor,
+				type: i3$2.DefaultValueAccessor,
 				selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]"
 			},
 			{
 				kind: "directive",
-				type: i3$1.NumberValueAccessor,
+				type: i3$2.NumberValueAccessor,
 				selector: "input[type=number]:not([ngNoCva])[formControlName],input[type=number]:not([ngNoCva])[formControl],input[type=number]:not([ngNoCva])[ngModel]"
 			},
 			{
 				kind: "directive",
-				type: i3$1.RadioControlValueAccessor,
+				type: i3$2.RadioControlValueAccessor,
 				selector: "input[type=radio]:not([ngNoCva])[formControlName],input[type=radio]:not([ngNoCva])[formControl],input[type=radio]:not([ngNoCva])[ngModel]",
 				inputs: [
 					"name",
@@ -3363,17 +3393,17 @@ var SideScreenComponent = class SideScreenComponent {
 			},
 			{
 				kind: "directive",
-				type: i3$1.NgControlStatus,
+				type: i3$2.NgControlStatus,
 				selector: "[formControlName],[ngModel],[formControl]"
 			},
 			{
 				kind: "directive",
-				type: i3$1.NgControlStatusGroup,
+				type: i3$2.NgControlStatusGroup,
 				selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]"
 			},
 			{
 				kind: "directive",
-				type: i3$1.FormGroupDirective,
+				type: i3$2.FormGroupDirective,
 				selector: "[formGroup]",
 				inputs: ["formGroup"],
 				outputs: ["ngSubmit"],
@@ -3381,7 +3411,7 @@ var SideScreenComponent = class SideScreenComponent {
 			},
 			{
 				kind: "directive",
-				type: i3$1.FormControlName,
+				type: i3$2.FormControlName,
 				selector: "[formControlName]",
 				inputs: [
 					"formControlName",
@@ -3396,7 +3426,7 @@ var SideScreenComponent = class SideScreenComponent {
 			},
 			{
 				kind: "component",
-				type: i3.MatCheckbox,
+				type: i3$1.MatCheckbox,
 				selector: "mat-checkbox",
 				inputs: [
 					"aria-label",
@@ -3461,7 +3491,7 @@ var SideScreenComponent = class SideScreenComponent {
 			},
 			{
 				kind: "directive",
-				type: i4.MatTooltip,
+				type: i4$1.MatTooltip,
 				selector: "[matTooltip]",
 				inputs: [
 					"matTooltipPosition",
@@ -3508,7 +3538,7 @@ i0.ɵɵngDeclareClassMetadata({
 			styles: [".side-screen{background:var(--comp-bg-color);max-width:415px;width:100%;position:absolute;right:0;top:0;height:100%;z-index:105;max-height:100vh;overflow:hidden;box-shadow:-1px 0 3px 1px var(--box-shadow-color)}.side-header{padding:12px 20px;border-bottom:1px solid var(--border-color)}.side-header .close-icon svg{transform:scale(1.5)}.side-content{padding-top:10px}.scrollable-content{max-height:calc(100vh - 190px);overflow:hidden;overflow-y:auto}.tiny-info-text{font-size:var(--fs-small);color:color-mix(in srgb,var(--fc-text-color-dark),rgb(0,0,0) 80%);font-weight:var(--fw-600)}.label-txt.increase-text,.side-content .form-control,.radio-text{font-size:var(--fs-small)}.error-fields{font-size:10px;color:red;padding:0;margin:0}.radio-text{margin-inline:5px;cursor:pointer}.addPayRollComponent .button-wrapper{margin-top:50px}\n"]
 		}]
 	}],
-	ctorParameters: () => [{ type: i3$1.FormBuilder }],
+	ctorParameters: () => [{ type: i3$2.FormBuilder }],
 	propDecorators: {
 		headerTitle: [{ type: Input }],
 		onLoadData: [{ type: Input }],
@@ -3592,7 +3622,7 @@ var ApprovalScreenComponent = class ApprovalScreenComponent {
 		ngImport: i0,
 		type: ApprovalScreenComponent,
 		deps: [{
-			token: i1$3.DatePipe,
+			token: i1$4.DatePipe,
 			optional: true
 		}],
 		target: i0.ɵɵFactoryTarget.Component
@@ -3626,13 +3656,13 @@ var ApprovalScreenComponent = class ApprovalScreenComponent {
 			},
 			{
 				kind: "directive",
-				type: i1$3.NgClass,
+				type: i1$4.NgClass,
 				selector: "[ngClass]",
 				inputs: ["class", "ngClass"]
 			},
 			{
 				kind: "directive",
-				type: i1$3.NgForOf,
+				type: i1$4.NgForOf,
 				selector: "[ngFor][ngForOf]",
 				inputs: [
 					"ngForOf",
@@ -3642,7 +3672,7 @@ var ApprovalScreenComponent = class ApprovalScreenComponent {
 			},
 			{
 				kind: "directive",
-				type: i1$3.NgIf,
+				type: i1$4.NgIf,
 				selector: "[ngIf]",
 				inputs: [
 					"ngIf",
@@ -3652,7 +3682,7 @@ var ApprovalScreenComponent = class ApprovalScreenComponent {
 			},
 			{
 				kind: "pipe",
-				type: i1$3.DatePipe,
+				type: i1$4.DatePipe,
 				name: "date"
 			},
 			{
@@ -3683,7 +3713,7 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}],
 	ctorParameters: () => [{
-		type: i1$3.DatePipe,
+		type: i1$4.DatePipe,
 		decorators: [{ type: Optional }]
 	}],
 	propDecorators: {
@@ -3772,7 +3802,7 @@ var BrowseComponent = class BrowseComponent {
 			type: CommonModule
 		}, {
 			kind: "directive",
-			type: i1$3.NgIf,
+			type: i1$4.NgIf,
 			selector: "[ngIf]",
 			inputs: [
 				"ngIf",
@@ -3956,7 +3986,7 @@ var AlertService = class AlertService {
 		version: "22.2.4",
 		ngImport: i0,
 		type: AlertService,
-		deps: [{ token: i1$4.TranslateService }],
+		deps: [{ token: i1$5.TranslateService }],
 		target: i0.ɵɵFactoryTarget.Injectable
 	});
 	static ɵprov = i0.ɵɵngDeclareInjectable({
@@ -3976,7 +4006,7 @@ i0.ɵɵngDeclareClassMetadata({
 		type: Injectable,
 		args: [{ providedIn: "root" }]
 	}],
-	ctorParameters: () => [{ type: i1$4.TranslateService }]
+	ctorParameters: () => [{ type: i1$5.TranslateService }]
 });
 var ErrorHandlerService = class ErrorHandlerService {
 	router;
@@ -4093,7 +4123,7 @@ var ErrorHandlerService = class ErrorHandlerService {
 		version: "22.2.4",
 		ngImport: i0,
 		type: ErrorHandlerService,
-		deps: [{ token: i1.Router }, { token: AlertService }],
+		deps: [{ token: i1$1.Router }, { token: AlertService }],
 		target: i0.ɵɵFactoryTarget.Injectable
 	});
 	static ɵprov = i0.ɵɵngDeclareInjectable({
@@ -4113,7 +4143,7 @@ i0.ɵɵngDeclareClassMetadata({
 		type: Injectable,
 		args: [{ providedIn: "root" }]
 	}],
-	ctorParameters: () => [{ type: i1.Router }, { type: AlertService }]
+	ctorParameters: () => [{ type: i1$1.Router }, { type: AlertService }]
 });
 var TabDataService = class TabDataService {
 	cache = /* @__PURE__ */ new Map();
@@ -5112,10 +5142,10 @@ var FormsComponent = class FormsComponent {
 		type: FormsComponent,
 		deps: [
 			{ token: LoaderService },
-			{ token: i1$4.TranslateService },
+			{ token: i1$5.TranslateService },
 			{ token: GlobalValuesService },
 			{ token: ApiService },
-			{ token: i1$3.DatePipe },
+			{ token: i1$4.DatePipe },
 			{ token: AlertService },
 			{ token: ErrorHandlerService },
 			{ token: GlobalValuesService },
@@ -5142,7 +5172,7 @@ var FormsComponent = class FormsComponent {
 			},
 			{
 				kind: "directive",
-				type: i1$3.NgForOf,
+				type: i1$4.NgForOf,
 				selector: "[ngFor][ngForOf]",
 				inputs: [
 					"ngForOf",
@@ -5152,7 +5182,7 @@ var FormsComponent = class FormsComponent {
 			},
 			{
 				kind: "directive",
-				type: i1$3.NgIf,
+				type: i1$4.NgIf,
 				selector: "[ngIf]",
 				inputs: [
 					"ngIf",
@@ -5429,10 +5459,10 @@ i0.ɵɵngDeclareClassMetadata({
 	}],
 	ctorParameters: () => [
 		{ type: LoaderService },
-		{ type: i1$4.TranslateService },
+		{ type: i1$5.TranslateService },
 		{ type: GlobalValuesService },
 		{ type: ApiService },
-		{ type: i1$3.DatePipe },
+		{ type: i1$4.DatePipe },
 		{ type: AlertService },
 		{ type: ErrorHandlerService },
 		{ type: GlobalValuesService },
@@ -5700,7 +5730,7 @@ var CustomPaginatorIntl = class CustomPaginatorIntl extends MatPaginatorIntl {
 		version: "22.2.4",
 		ngImport: i0,
 		type: CustomPaginatorIntl,
-		deps: [{ token: i1$4.TranslateService }, { token: i0.ChangeDetectorRef }],
+		deps: [{ token: i1$5.TranslateService }, { token: i0.ChangeDetectorRef }],
 		target: i0.ɵɵFactoryTarget.Injectable
 	});
 	static ɵprov = i0.ɵɵngDeclareInjectable({
@@ -5720,7 +5750,7 @@ i0.ɵɵngDeclareClassMetadata({
 		type: Injectable,
 		args: [{ providedIn: "root" }]
 	}],
-	ctorParameters: () => [{ type: i1$4.TranslateService }, { type: i0.ChangeDetectorRef }]
+	ctorParameters: () => [{ type: i1$5.TranslateService }, { type: i0.ChangeDetectorRef }]
 });
 var CustomDatePipe = class CustomDatePipe {
 	transform(value, type = "date") {
@@ -5935,11 +5965,29 @@ var DataTableComponent = class DataTableComponent {
 	dropdownLists;
 	dateDropdown = false;
 	from;
+	isSandwichLeave = false;
+	isCheckButton = false;
+	monthArray;
+	yearArray;
+	year;
+	month;
+	button;
+	exportDisable = true;
+	defaultWorkingHours = -1;
+	set saveLOP(val) {
+		this.tableSaveButton = val;
+	}
+	get saveLOP() {
+		return this.tableSaveButton;
+	}
+	isAttendanceTable = false;
 	dateEmit = new EventEmitter();
 	selectedValues = new EventEmitter();
 	tableRowClick = new EventEmitter();
+	rowClick = new EventEmitter();
 	filteredArray = new EventEmitter();
 	searchFilterData = new EventEmitter();
+	searchValueChange = new EventEmitter();
 	onEditData = new EventEmitter();
 	onCloneData = new EventEmitter();
 	onSendData = new EventEmitter();
@@ -5966,6 +6014,13 @@ var DataTableComponent = class DataTableComponent {
 	sideNavEmit = new EventEmitter();
 	searchText = new EventEmitter();
 	dropdownDataEmit = new EventEmitter();
+	checkClicked = new EventEmitter();
+	yearDataEmit = new EventEmitter();
+	selectedValueEmit = new EventEmitter();
+	monthDataEmit = new EventEmitter();
+	doubleClickEmit = new EventEmitter();
+	hyperLinkClickEmit = new EventEmitter();
+	tableParamsChange = new EventEmitter();
 	paginator;
 	sort;
 	editInput;
@@ -6037,6 +6092,9 @@ var DataTableComponent = class DataTableComponent {
 		this.sideScreenColumn = Array.isArray(this.sideScreenColumn) ? this.sideScreenColumn : [];
 		this.objectColumns = Array.isArray(this.objectColumns) ? this.objectColumns : [];
 		if (changes["buttonLoadingSpinner"] || changes["tableSaveLoadingSpinner"]) this.cdr.markForCheck();
+		if (changes["month"]?.currentValue) this.selectedMonth = this.getMonthNumber(changes["month"]?.currentValue);
+		if (changes["year"]?.currentValue) this.selectedYear = Number(changes["year"]?.currentValue) || this.selectedYear;
+		if (changes["headerLabels"] || changes["displayedColumns"]) this.updateDateLookups();
 		this.dataSource = new MatTableDataSource(this.data);
 		this.selection = new SelectionModel(true, []);
 		this.filterCheckBox = new SelectionModel(true, []);
@@ -6168,8 +6226,10 @@ var DataTableComponent = class DataTableComponent {
 		this.dataSource.filter = filterValue.trim().toLowerCase();
 		this.searchFilterData.emit(this.dataSource.filteredData);
 		this.searchText.emit(filterValue);
+		this.searchValueChange.emit(filterValue);
 		this.totalCount = this.dataSource.filteredData.length;
 		if (this.dataSource.paginator) this.dataSource.paginator.firstPage();
+		this.cdr.markForCheck();
 	}
 	isAllSelected() {
 		return this.selection.selected.length === this.dataSource.data.length;
@@ -6203,6 +6263,7 @@ var DataTableComponent = class DataTableComponent {
 	}
 	tableClick(data) {
 		this.tableRowClick.emit(data);
+		this.rowClick.emit(data);
 	}
 	filteredData(filterItems) {
 		const arr = [this.selectedFilterColumn.toLocaleString(), filterItems];
@@ -6488,6 +6549,156 @@ var DataTableComponent = class DataTableComponent {
 	onColumnClick(column) {
 		this.activeColumn = column;
 	}
+	selectedMonth = 0;
+	selectedYear = (/* @__PURE__ */ new Date()).getFullYear();
+	popupOpen = false;
+	confirmModal = false;
+	months = [
+		"January",
+		"February",
+		"March",
+		"April",
+		"May",
+		"June",
+		"July",
+		"August",
+		"September",
+		"October",
+		"November",
+		"December"
+	];
+	weekendColumnsSet = /* @__PURE__ */ new Set();
+	futureColumnsSet = /* @__PURE__ */ new Set();
+	todayColumn = null;
+	leaveTypeSet = /* @__PURE__ */ new Set([
+		"casual leave",
+		"sick leave",
+		"earned leave",
+		"lop",
+		"loss of pay",
+		"maternity leave",
+		"paternity leave",
+		"compensatory off",
+		"comp off"
+	]);
+	updateDateLookups() {
+		this.weekendColumnsSet.clear();
+		this.futureColumnsSet.clear();
+		this.todayColumn = null;
+		if (!this.headerLabels || !this.displayedColumns) return;
+		const now = /* @__PURE__ */ new Date();
+		const todayZero = new Date(now.getFullYear(), now.getMonth(), now.getDate()).getTime();
+		const todayDate = now.getDate();
+		const todayMonth = now.getMonth() + 1;
+		const todayYear = now.getFullYear();
+		for (let i = 0; i < this.displayedColumns.length; i++) {
+			const col = this.displayedColumns[i];
+			const header = this.headerLabels[i];
+			if (header && header.year && header.month && header.date) {
+				const d = new Date(header.year, header.month - 1, header.date);
+				const dayOfWeek = d.getDay();
+				if (dayOfWeek === 0 || dayOfWeek === 6) this.weekendColumnsSet.add(col);
+				if (d.getTime() > todayZero) this.futureColumnsSet.add(col);
+				if (header.date === todayDate && header.month === todayMonth && header.year === todayYear) this.todayColumn = col;
+			}
+		}
+	}
+	isWeekend(column) {
+		return this.weekendColumnsSet.has(column);
+	}
+	isToday(column) {
+		return this.todayColumn === column;
+	}
+	isFutureDate(column) {
+		return this.futureColumnsSet.has(column);
+	}
+	getInitials(name) {
+		if (!name || typeof name !== "string") return "";
+		const parts = name.trim().split(/\s+/);
+		if (parts.length === 1) return parts[0].substring(0, 2).toUpperCase();
+		return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
+	}
+	isNearTarget(workingDays, totalDays) {
+		const w = Number(workingDays);
+		const t = Number(totalDays);
+		if (!t || t <= 0) return false;
+		return w / t >= .8;
+	}
+	isLeaveType(status) {
+		if (!status || typeof status !== "string") return false;
+		const s = status.toLowerCase().trim();
+		return s === "absent" || this.leaveTypeSet.has(s);
+	}
+	prevMonth() {
+		if (this.selectedMonth === 0) {
+			this.selectedMonth = 11;
+			this.selectedYear--;
+		} else this.selectedMonth--;
+		this.emitSelection();
+		this.cdr.markForCheck();
+	}
+	nextMonth() {
+		if (this.selectedMonth === 11) {
+			this.selectedMonth = 0;
+			this.selectedYear++;
+		} else this.selectedMonth++;
+		this.emitSelection();
+		this.cdr.markForCheck();
+	}
+	togglePopup() {
+		this.popupOpen = !this.popupOpen;
+		this.cdr.markForCheck();
+	}
+	selectMonth(monthIndex) {
+		this.selectedMonth = monthIndex;
+		this.emitSelection();
+		this.togglePopup();
+	}
+	changeYear(step) {
+		this.selectedYear += step;
+		this.emitSelection();
+		this.cdr.markForCheck();
+	}
+	emitSelection() {
+		const monthVal = this.monthArray ? this.monthArray[this.selectedMonth] : this.months[this.selectedMonth];
+		this.monthDataEmit.emit(monthVal);
+		this.yearDataEmit.emit(this.selectedYear);
+		this.selectedValueEmit.emit({
+			month: monthVal,
+			year: this.selectedYear
+		});
+	}
+	checkButtonClicked() {
+		this.checkClicked.emit();
+	}
+	doubleClickFunction(element, data, presentData) {
+		if (element?.isSkeleton) return;
+		this.doubleClickEmit.emit({
+			employeeDetail: element.employeeDetail,
+			date: data,
+			data: presentData
+		});
+	}
+	getMonthNumber(month) {
+		if (typeof month === "number") return month;
+		if (!month) return 0;
+		const mStr = String(month).toLowerCase().slice(0, 3);
+		const idx = [
+			"jan",
+			"feb",
+			"mar",
+			"apr",
+			"may",
+			"jun",
+			"jul",
+			"aug",
+			"sep",
+			"oct",
+			"nov",
+			"dec"
+		].indexOf(mStr);
+		return idx >= 0 ? idx : 0;
+	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
 		version: "22.2.4",
@@ -6495,7 +6706,7 @@ var DataTableComponent = class DataTableComponent {
 		type: DataTableComponent,
 		deps: [
 			{ token: ScrollService },
-			{ token: i1$1.Overlay },
+			{ token: i1$2.Overlay },
 			{ token: GlobalValuesService },
 			{ token: ApiService },
 			{ token: AlertService },
@@ -6510,7 +6721,7 @@ var DataTableComponent = class DataTableComponent {
 		version: "22.2.4",
 		type: DataTableComponent,
 		isStandalone: true,
-		selector: "app-data-table",
+		selector: "app-data-table, app-data-table-two",
 		inputs: {
 			data: "data",
 			displayedColumns: "displayedColumns",
@@ -6574,6 +6785,17 @@ var DataTableComponent = class DataTableComponent {
 			dropdownLists: "dropdownLists",
 			dateDropdown: "dateDropdown",
 			from: "from",
+			isSandwichLeave: "isSandwichLeave",
+			isCheckButton: "isCheckButton",
+			monthArray: "monthArray",
+			yearArray: "yearArray",
+			year: "year",
+			month: "month",
+			button: "button",
+			exportDisable: "exportDisable",
+			defaultWorkingHours: "defaultWorkingHours",
+			saveLOP: "saveLOP",
+			isAttendanceTable: "isAttendanceTable",
 			exportButtonLoadingSpinner: "exportButtonLoadingSpinner",
 			pageTotal: "pageTotal",
 			deleteModal: "deleteModal"
@@ -6582,8 +6804,10 @@ var DataTableComponent = class DataTableComponent {
 			dateEmit: "dateEmit",
 			selectedValues: "selectedValues",
 			tableRowClick: "tableRowClick",
+			rowClick: "rowClick",
 			filteredArray: "filteredArray",
 			searchFilterData: "searchFilterData",
+			searchValueChange: "searchValueChange",
 			onEditData: "onEditData",
 			onCloneData: "onCloneData",
 			onSendData: "onSendData",
@@ -6609,7 +6833,14 @@ var DataTableComponent = class DataTableComponent {
 			filterDateEmitEvt: "filterDateEmitEvt",
 			sideNavEmit: "sideNavEmit",
 			searchText: "searchText",
-			dropdownDataEmit: "dropdownDataEmit"
+			dropdownDataEmit: "dropdownDataEmit",
+			checkClicked: "checkClicked",
+			yearDataEmit: "yearDataEmit",
+			selectedValueEmit: "selectedValueEmit",
+			monthDataEmit: "monthDataEmit",
+			doubleClickEmit: "doubleClickEmit",
+			hyperLinkClickEmit: "hyperLinkClickEmit",
+			tableParamsChange: "tableParamsChange"
 		},
 		host: { listeners: { "document:click": "onDocumentClick($event)" } },
 		providers: [{
@@ -6650,8 +6881,8 @@ var DataTableComponent = class DataTableComponent {
 		],
 		usesOnChanges: true,
 		ngImport: i0,
-		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>\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        <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        <!-- 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    <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>",
-		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;justify-content:space-between;border:1px solid var(--fb-border-default, #e2e8f0);background:var(--fb-surface, #ffffff);border-radius:7px;align-self:center;padding:0}.search-bar{width:100%;margin: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)}\n"],
+		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\">&#10003;</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\">&#10005;</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>",
+		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"],
 		dependencies: [
 			{
 				kind: "ngmodule",
@@ -6659,13 +6890,13 @@ var DataTableComponent = class DataTableComponent {
 			},
 			{
 				kind: "directive",
-				type: i1$3.NgClass,
+				type: i1$4.NgClass,
 				selector: "[ngClass]",
 				inputs: ["class", "ngClass"]
 			},
 			{
 				kind: "directive",
-				type: i1$3.NgForOf,
+				type: i1$4.NgForOf,
 				selector: "[ngFor][ngForOf]",
 				inputs: [
 					"ngForOf",
@@ -6675,7 +6906,7 @@ var DataTableComponent = class DataTableComponent {
 			},
 			{
 				kind: "directive",
-				type: i1$3.NgIf,
+				type: i1$4.NgIf,
 				selector: "[ngIf]",
 				inputs: [
 					"ngIf",
@@ -6685,25 +6916,25 @@ var DataTableComponent = class DataTableComponent {
 			},
 			{
 				kind: "directive",
-				type: i1$3.NgStyle,
+				type: i1$4.NgStyle,
 				selector: "[ngStyle]",
 				inputs: ["ngStyle"]
 			},
 			{
 				kind: "directive",
-				type: i1$3.NgSwitch,
+				type: i1$4.NgSwitch,
 				selector: "[ngSwitch]",
 				inputs: ["ngSwitch"]
 			},
 			{
 				kind: "directive",
-				type: i1$3.NgSwitchCase,
+				type: i1$4.NgSwitchCase,
 				selector: "[ngSwitchCase]",
 				inputs: ["ngSwitchCase"]
 			},
 			{
 				kind: "directive",
-				type: i1$3.NgSwitchDefault,
+				type: i1$4.NgSwitchDefault,
 				selector: "[ngSwitchDefault]"
 			},
 			{
@@ -6712,79 +6943,79 @@ var DataTableComponent = class DataTableComponent {
 			},
 			{
 				kind: "component",
-				type: i9.MatTable,
+				type: i9$1.MatTable,
 				selector: "mat-table, table[mat-table]",
 				exportAs: ["matTable"]
 			},
 			{
 				kind: "directive",
-				type: i9.MatHeaderCellDef,
+				type: i9$1.MatHeaderCellDef,
 				selector: "[matHeaderCellDef]"
 			},
 			{
 				kind: "directive",
-				type: i9.MatHeaderRowDef,
+				type: i9$1.MatHeaderRowDef,
 				selector: "[matHeaderRowDef]",
 				inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"]
 			},
 			{
 				kind: "directive",
-				type: i9.MatColumnDef,
+				type: i9$1.MatColumnDef,
 				selector: "[matColumnDef]",
 				inputs: ["matColumnDef"]
 			},
 			{
 				kind: "directive",
-				type: i9.MatCellDef,
+				type: i9$1.MatCellDef,
 				selector: "[matCellDef]"
 			},
 			{
 				kind: "directive",
-				type: i9.MatRowDef,
+				type: i9$1.MatRowDef,
 				selector: "[matRowDef]",
 				inputs: ["matRowDefColumns", "matRowDefWhen"]
 			},
 			{
 				kind: "directive",
-				type: i9.MatFooterCellDef,
+				type: i9$1.MatFooterCellDef,
 				selector: "[matFooterCellDef]"
 			},
 			{
 				kind: "directive",
-				type: i9.MatFooterRowDef,
+				type: i9$1.MatFooterRowDef,
 				selector: "[matFooterRowDef]",
 				inputs: ["matFooterRowDef", "matFooterRowDefSticky"]
 			},
 			{
 				kind: "directive",
-				type: i9.MatHeaderCell,
+				type: i9$1.MatHeaderCell,
 				selector: "mat-header-cell, th[mat-header-cell]"
 			},
 			{
 				kind: "directive",
-				type: i9.MatCell,
+				type: i9$1.MatCell,
 				selector: "mat-cell, td[mat-cell]"
 			},
 			{
 				kind: "directive",
-				type: i9.MatFooterCell,
+				type: i9$1.MatFooterCell,
 				selector: "mat-footer-cell, td[mat-footer-cell]"
 			},
 			{
 				kind: "component",
-				type: i9.MatHeaderRow,
+				type: i9$1.MatHeaderRow,
 				selector: "mat-header-row, tr[mat-header-row]",
 				exportAs: ["matHeaderRow"]
 			},
 			{
 				kind: "component",
-				type: i9.MatRow,
+				type: i9$1.MatRow,
 				selector: "mat-row, tr[mat-row]",
 				exportAs: ["matRow"]
 			},
 			{
 				kind: "component",
-				type: i9.MatFooterRow,
+				type: i9$1.MatFooterRow,
 				selector: "mat-footer-row, tr[mat-footer-row]",
 				exportAs: ["matFooterRow"]
 			},
@@ -6824,36 +7055,40 @@ var DataTableComponent = class DataTableComponent {
 				],
 				exportAs: ["matSortHeader"]
 			},
+			{
+				kind: "ngmodule",
+				type: MatCheckboxModule
+			},
 			{
 				kind: "ngmodule",
 				type: ReactiveFormsModule
 			},
 			{
 				kind: "directive",
-				type: i3$1.NgSelectOption,
+				type: i3$2.NgSelectOption,
 				selector: "option",
 				inputs: ["ngValue", "value"]
 			},
 			{
 				kind: "directive",
-				type: i3$1.ɵNgSelectMultipleOption,
+				type: i3$2.ɵNgSelectMultipleOption,
 				selector: "option",
 				inputs: ["ngValue", "value"]
 			},
 			{
 				kind: "directive",
-				type: i3$1.DefaultValueAccessor,
+				type: i3$2.DefaultValueAccessor,
 				selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]"
 			},
 			{
 				kind: "directive",
-				type: i3$1.SelectControlValueAccessor,
+				type: i3$2.SelectControlValueAccessor,
 				selector: "select:not([multiple]):not([ngNoCva])[formControlName],select:not([multiple]):not([ngNoCva])[formControl],select:not([multiple]):not([ngNoCva])[ngModel]",
 				inputs: ["compareWith"]
 			},
 			{
 				kind: "directive",
-				type: i3$1.NgControlStatus,
+				type: i3$2.NgControlStatus,
 				selector: "[formControlName],[ngModel],[formControl]"
 			},
 			{
@@ -6862,7 +7097,7 @@ var DataTableComponent = class DataTableComponent {
 			},
 			{
 				kind: "directive",
-				type: i3$1.NgModel,
+				type: i3$2.NgModel,
 				selector: "[ngModel]:not([formControlName]):not([formControl])",
 				inputs: [
 					"name",
@@ -6926,7 +7161,7 @@ var DataTableComponent = class DataTableComponent {
 			},
 			{
 				kind: "directive",
-				type: i4.MatTooltip,
+				type: i4$1.MatTooltip,
 				selector: "[matTooltip]",
 				inputs: [
 					"matTooltipPosition",
@@ -6942,7 +7177,7 @@ var DataTableComponent = class DataTableComponent {
 			},
 			{
 				kind: "directive",
-				type: i1$1.CdkScrollable,
+				type: i1$2.CdkScrollable,
 				selector: "[cdk-scrollable], [cdkScrollable]"
 			},
 			{
@@ -7040,7 +7275,7 @@ var DataTableComponent = class DataTableComponent {
 			},
 			{
 				kind: "directive",
-				type: i1$1.CdkConnectedOverlay,
+				type: i1$2.CdkConnectedOverlay,
 				selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]",
 				inputs: [
 					"cdkConnectedOverlayOrigin",
@@ -7081,7 +7316,7 @@ var DataTableComponent = class DataTableComponent {
 			},
 			{
 				kind: "directive",
-				type: i1$1.CdkOverlayOrigin,
+				type: i1$2.CdkOverlayOrigin,
 				selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]",
 				exportAs: ["cdkOverlayOrigin"]
 			},
@@ -7138,7 +7373,12 @@ var DataTableComponent = class DataTableComponent {
 			},
 			{
 				kind: "pipe",
-				type: i1$3.DatePipe,
+				type: i1$4.SlicePipe,
+				name: "slice"
+			},
+			{
+				kind: "pipe",
+				type: i1$4.DatePipe,
 				name: "date"
 			},
 			{
@@ -7181,7 +7421,8 @@ var DataTableComponent = class DataTableComponent {
 				type: CustomTimePipe,
 				name: "customTime"
 			}
-		]
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
 	});
 };
 i0.ɵɵngDeclareClassMetadata({
@@ -7192,12 +7433,13 @@ i0.ɵɵngDeclareClassMetadata({
 	decorators: [{
 		type: Component,
 		args: [{
-			selector: "app-data-table",
+			selector: "app-data-table, app-data-table-two",
 			imports: [
 				CommonModule,
 				MatTableModule,
 				MatPaginatorModule,
 				MatSortModule,
+				MatCheckboxModule,
 				ReactiveFormsModule,
 				FormsModule,
 				SearchFilterComponent,
@@ -7222,17 +7464,18 @@ i0.ɵɵngDeclareClassMetadata({
 				DropDownComponent
 			],
 			standalone: true,
+			changeDetection: ChangeDetectionStrategy.OnPush,
 			providers: [{
 				provide: MatPaginatorIntl,
 				useClass: CustomPaginatorIntl
 			}],
-			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>\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        <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        <!-- 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    <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>",
-			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;justify-content:space-between;border:1px solid var(--fb-border-default, #e2e8f0);background:var(--fb-surface, #ffffff);border-radius:7px;align-self:center;padding:0}.search-bar{width:100%;margin: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)}\n"]
+			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\">&#10003;</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\">&#10005;</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>",
+			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"]
 		}]
 	}],
 	ctorParameters: () => [
 		{ type: ScrollService },
-		{ type: i1$1.Overlay },
+		{ type: i1$2.Overlay },
 		{ type: GlobalValuesService },
 		{ type: ApiService },
 		{ type: AlertService },
@@ -7303,11 +7546,24 @@ i0.ɵɵngDeclareClassMetadata({
 		dropdownLists: [{ type: Input }],
 		dateDropdown: [{ type: Input }],
 		from: [{ type: Input }],
+		isSandwichLeave: [{ type: Input }],
+		isCheckButton: [{ type: Input }],
+		monthArray: [{ type: Input }],
+		yearArray: [{ type: Input }],
+		year: [{ type: Input }],
+		month: [{ type: Input }],
+		button: [{ type: Input }],
+		exportDisable: [{ type: Input }],
+		defaultWorkingHours: [{ type: Input }],
+		saveLOP: [{ type: Input }],
+		isAttendanceTable: [{ type: Input }],
 		dateEmit: [{ type: Output }],
 		selectedValues: [{ type: Output }],
 		tableRowClick: [{ type: Output }],
+		rowClick: [{ type: Output }],
 		filteredArray: [{ type: Output }],
 		searchFilterData: [{ type: Output }],
+		searchValueChange: [{ type: Output }],
 		onEditData: [{ type: Output }],
 		onCloneData: [{ type: Output }],
 		onSendData: [{ type: Output }],
@@ -7334,6 +7590,13 @@ i0.ɵɵngDeclareClassMetadata({
 		sideNavEmit: [{ type: Output }],
 		searchText: [{ type: Output }],
 		dropdownDataEmit: [{ type: Output }],
+		checkClicked: [{ type: Output }],
+		yearDataEmit: [{ type: Output }],
+		selectedValueEmit: [{ type: Output }],
+		monthDataEmit: [{ type: Output }],
+		doubleClickEmit: [{ type: Output }],
+		hyperLinkClickEmit: [{ type: Output }],
+		tableParamsChange: [{ type: Output }],
 		paginator: [{
 			type: ViewChild,
 			args: ["paginator"]
@@ -7363,6 +7626,1163 @@ i0.ɵɵngDeclareClassMetadata({
 		deleteModal: [{ type: Input }]
 	}
 });
+var FusionCardComponent = class FusionCardComponent {
+	sanitizer;
+	renderer;
+	apiService;
+	datePipe;
+	loaderService;
+	cdr;
+	_cardData = [];
+	set cardData(data) {
+		if (Array.isArray(data)) {
+			this._cardData = data;
+			this.calculateCardMarginTop();
+		} else this._cardData = [];
+		this.cdr.markForCheck();
+	}
+	get cardData() {
+		return this._cardData;
+	}
+	from;
+	comp = {};
+	cardButtonEmit = new EventEmitter();
+	deleteModal = false;
+	deleteData;
+	currentOpenIndex = null;
+	clickListener;
+	modalDirect;
+	safeSrc = null;
+	isLoading = [];
+	isViewLoading = [];
+	popupTitle;
+	file;
+	isCardLoading;
+	constructor(sanitizer, renderer, apiService, datePipe, loaderService, cdr) {
+		this.sanitizer = sanitizer;
+		this.renderer = renderer;
+		this.apiService = apiService;
+		this.datePipe = datePipe;
+		this.loaderService = loaderService;
+		this.cdr = cdr;
+	}
+	ngOnInit() {
+		this.loaderService.loading.subscribe((loadingStates) => {
+			this.isCardLoading = loadingStates;
+			this.cdr.markForCheck();
+		});
+	}
+	calculateCardMarginTop() {
+		let total = 0;
+		for (const card of this._cardData) {
+			const size = Number(card?.cardSize?.split("-")?.[2]);
+			total += size;
+			card.marginTop = total < 13 ? "0px" : "10px";
+		}
+	}
+	deleteRecord(data) {
+		this.deleteData = data;
+		this.deleteModal = true;
+	}
+	deleteRecordData() {
+		this.cardButtonEmit.emit(this.deleteData);
+		this.deleteModal = false;
+	}
+	actionButtonClicked(event, card) {
+		if (event.type === "delete") this.deleteRecord({
+			event,
+			card
+		});
+		else this.cardButtonEmit.emit({
+			event,
+			card
+		});
+	}
+	isConditionMet(element, conditions) {
+		if (conditions !== void 0) {
+			const { andConditionList, orConditionList } = conditions;
+			const isAndConditionMet = andConditionList ? andConditionList.every((cond) => Array.isArray(cond.condition) ? cond.condition.includes(element[cond.column]) : cond.condition === element[cond.column]) : true;
+			const isOrConditionMet = orConditionList ? orConditionList.some((cond) => Array.isArray(cond.condition) ? cond.condition.includes(element[cond.column]) : cond.condition === element[cond.column]) : true;
+			return isAndConditionMet && isOrConditionMet;
+		} else return true;
+	}
+	toggleDropdown(index) {
+		this.currentOpenIndex = this.currentOpenIndex === index ? null : index;
+		this.addClickOutsideListener();
+	}
+	addClickOutsideListener() {
+		if (!this.clickListener) this.clickListener = this.renderer.listen("document", "click", (event) => {
+			if (!event.target.closest(".dropdown")) {
+				this.currentOpenIndex = null;
+				this.removeClickListener();
+			}
+		});
+	}
+	removeClickListener() {
+		if (this.clickListener) {
+			this.clickListener();
+			this.clickListener = null;
+		}
+	}
+	onMouseEnter(event, styleName, color) {
+		event.target.style[styleName] = styleName === "border" ? `1px solid ${color}` : color;
+	}
+	onMouseLeave(event, styleName, color) {
+		event.target.style[styleName] = styleName === "border" ? `1px solid ${color}` : color;
+	}
+	fileClick(evt, index) {
+		this.isViewLoading[index] = true;
+		this.cdr.markForCheck();
+		let event = evt?.file || evt;
+		const fileId = evt?.id || evt?._id || evt?.fileID || evt?.fileId;
+		if (fileId) this.apiService.fetchData("/file?id=" + fileId).subscribe({
+			next: (file) => {
+				this.popupTitle = file.name || evt?.name || "File Preview";
+				const buffer = new Uint8Array(file.content.data);
+				const blob = new Blob([buffer], { type: file?.type || evt?.fileType || "application/pdf" });
+				const reader = new FileReader();
+				reader.onload = (e) => {
+					const fileOutput = e.target.result;
+					this.safeSrc = this.sanitizer.bypassSecurityTrustResourceUrl(fileOutput);
+					if (this.file?.nativeElement) {
+						this.modalDirect = new Modal(this.file.nativeElement, { backdrop: "static" });
+						this.modalDirect.show();
+					}
+					this.stopViewLoader(index);
+					this.cdr.markForCheck();
+				};
+				reader.readAsDataURL(blob);
+			},
+			error: () => this.stopViewLoader(index)
+		});
+		else {
+			const request = new XMLHttpRequest();
+			request.open("GET", event, true);
+			request.responseType = "blob";
+			request.onload = () => {
+				this.popupTitle = evt?.name || "File Preview";
+				const blob = request.response;
+				const reader = new FileReader();
+				reader.onload = (e) => {
+					const fileOutput = e.target.result;
+					this.safeSrc = this.sanitizer.bypassSecurityTrustResourceUrl(fileOutput);
+					if (this.file?.nativeElement) {
+						this.modalDirect = new Modal(this.file.nativeElement, { backdrop: "static" });
+						this.modalDirect.show();
+					}
+					this.stopViewLoader(index);
+					this.cdr.markForCheck();
+				};
+				reader.readAsDataURL(blob);
+			};
+			request.onerror = () => this.stopViewLoader(index);
+			request.send();
+		}
+	}
+	closeModal() {
+		this.safeSrc = null;
+		this.popupTitle = "";
+		this.cdr.markForCheck();
+	}
+	stopViewLoader(index) {
+		setTimeout(() => {
+			this.isViewLoading[index] = false;
+			this.cdr.markForCheck();
+		}, 300);
+	}
+	downloadFile(evt, index) {
+		this.isLoading[index] = true;
+		this.cdr.markForCheck();
+		const fileId = evt?.id || evt?._id || evt?.fileID || evt?.fileId;
+		if (fileId) this.apiService.fetchData("/file?id=" + fileId).subscribe({
+			next: (file) => {
+				const buffer = new Uint8Array(file.content.data);
+				const blob = new Blob([buffer], { type: file?.type || evt?.fileType });
+				const url = window.URL.createObjectURL(blob);
+				this.triggerDownload(url, evt.name || file.name);
+				this.stopLoader(index);
+			},
+			error: () => this.stopLoader(index)
+		});
+		else {
+			const request = new XMLHttpRequest();
+			request.open("GET", evt?.file || evt, true);
+			request.responseType = "blob";
+			request.onload = () => {
+				const url = window.URL.createObjectURL(request.response);
+				this.triggerDownload(url, evt.name);
+				this.stopLoader(index);
+			};
+			request.onerror = () => this.stopLoader(index);
+			request.send();
+		}
+	}
+	triggerDownload(url, name) {
+		const a = document.createElement("a");
+		a.href = url;
+		a.download = name || "downloaded-file";
+		document.body.appendChild(a);
+		a.click();
+		document.body.removeChild(a);
+		URL.revokeObjectURL(url);
+	}
+	stopLoader(index) {
+		setTimeout(() => {
+			this.isLoading[index] = false;
+			this.cdr.markForCheck();
+		}, 400);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.4",
+		ngImport: i0,
+		type: FusionCardComponent,
+		deps: [
+			{ token: i1.DomSanitizer },
+			{ token: i0.Renderer2 },
+			{ token: ApiService },
+			{ token: i1$4.DatePipe },
+			{ token: LoaderService },
+			{ token: i0.ChangeDetectorRef }
+		],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "14.0.0",
+		version: "22.2.4",
+		type: FusionCardComponent,
+		isStandalone: true,
+		selector: "fusion-card",
+		inputs: {
+			cardData: "cardData",
+			from: "from",
+			comp: "comp"
+		},
+		outputs: { cardButtonEmit: "cardButtonEmit" },
+		providers: [DatePipe],
+		viewQueries: [{
+			propertyName: "file",
+			first: true,
+			predicate: ["file"],
+			descendants: true
+		}],
+		ngImport: i0,
+		template: "<!-- MR 09NOV26 Migration of Datatables and Tier 1 Primitives to fusion-ui -->\n<div *ngIf=\"!(isCardLoading?.[comp?._id]?.length > 0) && (!cardData || cardData.length === 0)\" class=\"no-records-container\">\n    <div class=\"text-center p-4\">\n        <div class=\"no-records-message\">\n            <div class=\"mt-3 mb-2\">{{'APP.NO_RECORDS_AVAILABLE' | customTranslate : 'No Records Available'}}</div>\n        </div>\n    </div>\n</div>\n<div *ngIf=\"isCardLoading?.[comp?._id]?.length > 0; else viewCard\">\n    <div class=\"card fc-card fc-card-light skeleton-card\" style=\"height: 200px; border: none;\">\n        <div *ngFor=\"let n of [1, 2]\" class=\"flex\" style=\"padding: 25px 0px;\">\n            <div *ngFor=\"let e of [1, 2]\" style=\"width: 50%; padding: 5px;\">\n            <div class=\"\" style=\"height: 25px;\">\n                <div class=\"title\" data-title>\n                    <div class=\"skeleton skeleton-text\" style=\"width: 95%;\"></div>\n                    <div class=\"skeleton skeleton-text\" style=\"width: 65%;\"></div>\n                </div>\n            </div>\n            </div>\n        </div>\n    </div>\n</div>\n<ng-template #viewCard>\n    <div *ngIf=\"cardData && cardData.length > 0\" [class.col-md-12]=\"cardData.length > 0\" [class.dashboard-card-grid]=\"from === 'dashboard'\" style=\"height: 100%;\">\n        <div class=\"row\" [ngClass]=\"{\n            'g-2': cardData.length > 1 && from !== 'dashboard',\n            'gutter-remove': from === 'dashboard'\n            }\">\n            <div *ngFor=\"let card of cardData; let i = index\" class=\"{{card.cardSize}} inside-card\" [ngClass]=\"{'no-padding-margin':from ==='dashboard' ? cardData.length === 1 : false, 'multy-card':from ==='dashboard' ? cardData.length > 1 : false}\" style=\"height: 100%;\" [ngStyle]=\"{'margin-top': card.marginTop}\">\n                <div *ngIf=\"card?.config?.details\" style=\"height: 100%;\">\n                    <div class=\"width-100\" [ngClass]=\"{'static-width-for-card': from === 'dashboard' ? cardData.length != 1 : true}\" [style.border]=\"(from === 'dashboard' && cardData.length === 1 ) ? 'none' : ''\" style=\"height: 100%;\" [ngStyle]=\"from === 'dashboard' && cardData.length === 1 \n                    ? {\n                        position: 'absolute',\n                        top: '50%',\n                        left: '50%',\n                        transform: 'translate(-50%, -50%)'\n                      } \n                    : null\">\n                        <div *ngIf=\"card.isTitleHide ? card.isTitleHide === 'true' ? false : true : true\" class=\"header-section flex content-space-between\" style=\"align-items: center;\">\n                            <div class=\"section-title\">{{card.labelPath || card.label | customTranslate : card.label}}</div>\n                            <div class=\"actionButton\" style=\"display: flex; align-items: center;\">\n                                <div *ngFor=\"let button of card?.actionButton?.buttonArray; let i = index\">\n                                    <div *ngIf=\"i < card?.actionButton?.size\"\n                                        style=\"margin-left: 3px; margin-right: 3px;\">\n                                        <div *ngIf=\"isConditionMet(card, button.conditions)\"\n                                            [matTooltip]=\"button.tooltipPath || button.tooltip | customTranslate : button.tooltip\"\n                                            (click)=\"actionButtonClicked(button,card)\"\n                                            (mouseenter)=\"onMouseEnter($event,'border', button.hoverBorderColor)\"\n                                            (mouseleave)=\"onMouseLeave($event,'border', button.borderColor)\"\n                                            style=\"padding: 2px; border-radius: {{button.borderRadius}}px; border: 1px solid {{button.borderColor}};\">\n                                            <div (mouseenter)=\"onMouseEnter($event,'backgroundColor', button.hoverBackgroundColor)\"\n                                                (mouseleave)=\"onMouseLeave($event,'backgroundColor', button.backgroundColor)\"\n                                                style=\"padding: {{button.padding}}px; border-radius: {{button.borderRadius}}px; background-color: {{button.backgroundColor}}; display: flex; gap: 2px; align-items: center;\">\n                                                <img *ngIf=\"button.iconSrc && (button.iconSrc?.startsWith('data:') || button.iconSrc?.startsWith('http'))\"\n                                                    #imgElement\n                                                    [src]=\"button.iconSrc\"\n                                                    style=\"cursor: pointer;\"\n                                                    (mouseenter)=\"imgElement.src = button.hoverIconSrc || button.iconSrc\"\n                                                    (mouseleave)=\"imgElement.src = button.iconSrc\"/>\n                                                <i *ngIf=\"!(button.iconSrc?.startsWith('data:') || button.iconSrc?.startsWith('http'))\"\n                                                    class=\"fusion-icon nav-icon\"\n                                                    [ngClass]=\"button.iconSrc\"\n                                                    style=\"margin: 0px !important; font-size: var(--fs-normal, 16px) !important; color: var(--fc-sub-lite, #787486);\">\n                                                </i>\n                                                <div *ngIf=\"button.isLabel\" style=\"color: {{button.labelColor}}; font-size: 12px;\"> {{button.label || button.tooltip | customTranslate : button.label || button.tooltip}}</div>\n                                            </div>\n                                        </div>\n                                    </div>\n                                </div>\n                                <div *ngIf=\"card?.actionButton?.buttonArray && card?.actionButton?.buttonArray?.length > 0 && card?.actionButton?.buttonArray?.slice(card?.actionButton?.size) && card?.actionButton?.buttonArray?.slice(card?.actionButton?.size).length > 0\"\n                                    class=\"dropdown\">\n                                    <div class=\"clickable-img\" (click)=\"toggleDropdown(i)\"\n                                        style=\"margin-left: 3px; margin-right: 3px;\">\n                                        <div style=\"background-color: var(--comp-bg-secondary, #f5f5f5); padding: 2px 2px; border-radius: var(--radius-small, 5px);\">\n                                            <i class=\"fusion-icon fusion-icon-size-lg fusion-icon-arrow-square-down nav-icon\" style=\"background-color: var(--comp-bg-secondary, #f5f5f5); border-radius: var(--radius-small, 5px); border: 1px solid var(--border-color, #6c757d);\"></i>\n                                        </div>\n                                    </div>\n\n                                    <div class=\"dropdown-menu\"\n                                        [style.right]=\"(((card?.actionButton?.size ?? 0) - (card?.actionButton?.buttonArray?.size ?? 0) + ((card?.actionButton?.buttonArray?.slice(card?.actionButton?.size)?.length ?? 0) > 0 ? 1 : 0)) * 100) + '%'\"\n                                        *ngIf=\"currentOpenIndex === i\">\n                                        <div *ngFor=\"let btn of card?.actionButton?.buttonArray?.slice(card?.actionButton?.size)\">\n                                            <button *ngIf=\"isConditionMet(card, btn.conditions)\" \n                                            style=\"display: flex;\" type=\"button\"\n                                            class=\"btn btn-icon {{btn.buttonType}} tooltip-container\"\n                                            [matTooltip]=\"btn.tooltipPath || btn.tooltip | customTranslate : btn.tooltip\" [disabled]=\"btn.buttonDisable\"\n                                            (click)=\"actionButtonClicked(btn,card)\">\n                                                <img *ngIf=\"btn.iconSrc\" [src]=\"btn.iconSrc\">\n                                                <div class=\"fc-btn-text\" style=\"padding-left: 10px;\">\n                                                    {{btn.labelPath || btn.namePath || btn.name | customTranslate : btn.label || btn.name}}</div>\n                                            </button>\n                                        </div>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                        <div class=\"body-section card-text\" style=\"height: 100%;\" [ngStyle]=\"{ padding: card?.config?.padding || null }\">\n                            <div class=\"flex w-100\" [ngClass]=\"{\n                                    'row': card?.config?.details?.length > 1,\n                                    'gutter-remove': from === 'dashboard' && card?.config?.details?.length > 1\n                                }\" style=\"height: 100%;\">\n                                <ng-container *ngFor=\"let detail of card?.config?.details\">\n                                    <div *ngIf=\"!detail?.hideFromCard\" class=\"{{detail.size || card.cardInlineSize}} card-detail d-flex flex-column\" [ngClass]=\"detail.alignment\">\n                                        <div *ngIf=\"detail.iconSrc && detail.iconPosition !== 'end'\" class=\"icon-container d-flex\">\n                                            <div class=\"icon-wrapper\" [style.border]=\"'4px solid gray'\">\n                                                <img [src]=\"detail.iconSrc\" alt=\"Icon\">\n                                            </div>\n                                        </div>\n\n                                        <div *ngIf=\"!detail.isLabelHide && detail?.type !== 'image'\" class=\"label-head\" [ngClass]=\"detail.labelFont\">{{detail.labelPath || detail.label | customTranslate : detail.label}}</div>\n\n                                        <div [ngClass]=\"detail?.type !== 'image' && detail?.type !== 'file' ? 'flex-column' : ''\" [class.detail-value-wrapper]=\"detail?.type !== 'image' && detail.truncate\">\n                                            <div *ngIf=\"detail?.type !== 'date' && detail?.type !== 'time' && detail?.type !== 'datetime' && detail?.type !== 'label' && detail?.type !== 'image' && detail?.type !== 'file'\" class=\"label-sub\" [ngClass]=\"detail.valueFont\" [class.truncate]=\"detail.truncate\">\n                                                {{\n                                                    (detail?.type === 'boolean' || (detail?.value === true || detail?.value === false))\n                                                    ? (detail?.value === true ? 'True' : 'False')\n                                                    : (detail?.value || detail.value === 0)\n                                                        ? detail.value\n                                                        : '-'\n                                                }}\n                                            </div>\n                                            <div *ngIf=\"detail?.type === 'date'\" class=\"label-sub\" [ngClass]=\"detail.valueFont\" [class.truncate]=\"detail.truncate\">{{ (detail?.value | customDate) || '-' }}</div>\n                                            <div *ngIf=\"detail?.type === 'datetime'\" class=\"label-sub\" [ngClass]=\"detail.valueFont\" [class.truncate]=\"detail.truncate\">{{ (detail?.value | customDate : 'datetime') || '-' }}</div>\n                                            <div *ngIf=\"detail?.type === 'time'\" class=\"label-sub\" [ngClass]=\"detail.valueFont\" [class.truncate]=\"detail.truncate\">{{ (detail?.value | customDate : 'time') || '-' }}</div>\n                                            <div *ngIf=\"detail?.type === 'link'\" class=\"ms-2\">\n                                                <a *ngIf=\"detail?.redirectOnClick\"\n                                                    [href]=\"'//'+detail?.value\"\n                                                    [target]=\"detail?.openInNewTab ? '_blank' : '_self'\"\n                                                    class=\"form-label label-head\">\n                                                    <img [src]=\"detail?.srcImg\" />\n                                                </a>\n                                            </div>\n                                            <div *ngIf=\"detail?.type === 'image'\">\n                                                <img [style.height.%]=\"detail.imgHeight\" [src]=\"(detail?.value || detail?.defaultValue)\" style=\"width: 100%; max-height: 100%; object-fit: contain;\"/>\n                                            </div>\n                                            <div *ngIf=\"detail?.type === 'file'\">\n                                                <div class=\"cursor-pointer label-sub\" [ngClass]=\"detail.valueFont\" [class.truncate]=\"detail.truncate\" (click)=\"fileClick(detail.value, i)\">{{detail?.isLabel ? detail.value.name : ''}}</div>\n                                                <div class=\"flex\" *ngIf=\"detail?.value\">\n                                                    <img *ngIf=\"detail?.type === 'file' && !isLoading[i]\"\n                                                        src=\"../assets/images/icons/general/download-icon.svg\"\n                                                        class=\"card-icon color\"\n                                                        title=\"download\"\n                                                        (click)=\"downloadFile(detail.value, i)\"\n                                                        style=\"cursor: pointer; width:17px\">\n                                                    <svg *ngIf=\"detail?.type === 'file' && isLoading[i]\"\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                                                    <img *ngIf=\"detail?.isView && !isViewLoading[i]\"\n                                                        src=\"../assets/images/icons/general/preview.svg\"\n                                                        class=\"card-icon color\"\n                                                        title=\"preview\"\n                                                        (click)=\"fileClick(detail.value, i)\"\n                                                        style=\"cursor: pointer; width:20px\">\n                                                    <svg *ngIf=\"detail?.isView && isViewLoading[i]\"\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 *ngIf=\"detail.iconSrc && detail.iconPosition === 'end'\" class=\"icon-container d-flex\">\n                                            <div class=\"icon-wrapper\" [style.border]=\"'4px solid gray'\">\n                                                <img [src]=\"detail.iconSrc\" alt=\"Icon\">\n                                            </div>\n                                        </div>\n                                    </div>\n                                </ng-container>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</ng-template>\n\n<div *ngIf=\"deleteModal\" class=\"custom-modal-overlay\">\n    <div class=\"custom-modal\">\n        <div class=\"custom-modal-header\">\n            <b>{{ 'APP.DELETE_RECORD'| customTranslate : 'Delete Record'}}</b>\n            <button class=\"close-button\" (click)=\"deleteModal = false\">×</button>\n        </div>\n        <div class=\"custom-modal-body\">\n            {{ 'APP.ARE_YOU_SURE_YOU_WANT_TO_DELETE_THE_REC'| customTranslate : 'Are you sure you want to delete the record'}} ?\n        </div>\n        <div class=\"custom-modal-footer\">\n            <button class=\"confirm-button\" (click)=\"deleteRecordData()\">{{ 'APP.YES'| customTranslate : 'Yes'}}</button>\n            <button class=\"cancel-button\" (click)=\"deleteModal = false\">{{ 'APP.NO'| customTranslate : 'No'}}</button>\n        </div>\n    </div>\n</div>\n\n<div class=\"modal fade container-sm\" id=\"file\" aria-labelledby=\"file\" \naria-hidden=\"true\" #file>\n    <div class=\"modal-dialog modal-lg\">\n        <div class=\"modal-content\">\n            <div class=\"modal-header\">\n                <div class=\"modal-title fs-5\" id=\"expenseReceiptModelLabel\">{{popupTitle}}</div>\n                <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" (click)=\"closeModal()\" aria-label=\"Close\"></button>\n            </div>\n            <div class=\"modal-body\">\n                <iframe class=\"receipt-view\" *ngIf=\"safeSrc\" [src]=\"safeSrc\" style=\"width: 100%; height: 500px; border: none;\"></iframe>\n            </div>\n        </div>\n    </div>\n</div>\n\n",
+		styles: [".dropdown-menu{left:unset!important;right:300%;top:12.5px;background-color:var(--comp-bg-color, #ffffff);border:1px solid var(--border-color, #e2e8f0);border-radius:var(--radius-small, 4px);box-shadow:0 4px 8px var(--box-shadow-color, rgba(0, 0, 0, .1))}.dropdown .dropdown-menu{display:block}.dropdown-menu .btn{display:block;padding:10px;width:100%;text-align:left;background:transparent;border:none;cursor:pointer}.clickable-img{position:relative;cursor:pointer;padding:2px;border:1px solid var(--border-color, #e2e8f0);border-radius:5px}.clickable-img:hover{border:1px solid var(--fc-primary-color, rgb(31, 105, 255));border-radius:var(--radius-small, 5px)}.card-icon.color path{fill:var(--fc-primary-color, #2563eb)}.card-icon.color{margin-left:15px}.custom-modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--box-shadow-color, rgba(0, 0, 0, .4));display:flex;align-items:start;justify-content:center;z-index:1050}.custom-modal{background:var(--comp-bg-color, #ffffff);border-radius:8px;width:550px;max-width:90%;margin-top:30px;box-shadow:0 5px 15px var(--box-shadow-color, rgba(0, 0, 0, .2));overflow:hidden}.custom-modal-header{border-bottom:solid .5px var(--border-color, #e2e8f0)}.custom-modal-footer{border-top:solid .5px var(--border-color, #e2e8f0)}.custom-modal-header,.custom-modal-footer{padding:.7rem;display:flex;justify-content:space-between;align-items:center}.custom-modal-body{padding:1rem;font-size:1rem}.close-button{background:none;border:none;font-size:1.25rem;cursor:pointer}.cancel-button,.confirm-button{padding:.5rem 1rem;border:none;border-radius:4px;cursor:pointer}.cancel-button{background:var(--comp-bg-color, #ffffff);color:var(--fc-text-color-dark, #000000)}.confirm-button{background:var(--clr-error, #d9534f);color:var(--comp-bg-color, #ffffff)}.text-center{text-align:center!important;border:solid .5px var(--border-color, #94a3b8);border-radius:var(--radius-medium, 10px);margin:10px 0;color:var(--fc-text-color-light, #94a3b8)}.receipt-view{width:100%;height:600px}.icon-container{position:relative;margin-top:100px;z-index:1}.card-detail{margin-top:5px;margin-bottom:5px;min-width:0;overflow:hidden}.svg-spinner{animation:rotate 1s linear infinite}.svg-spinner .path{stroke:var(--fc-primary-color, #2563eb);stroke-linecap:round;stroke-dasharray:80 150;stroke-width:4}@keyframes rotate{to{transform:rotate(360deg)}}.no-padding-margin{margin:0!important;padding:0!important}.static-width-for-card{border:1px solid var(--border-color, #e2e8f0);border-radius:8px}.header-section{padding:8px 8px 0}.section-title{font-size:var(--fs-primary, 14px);font-weight:500}.body-section{padding:8px}.label-sub{white-space:normal;overflow-wrap:anywhere}.row.gutter-remove{--bs-gutter-x: 0rem !important;margin-top:0!important}.row{--bs-gutter-y: 0 !important}.inside-card.multy-card{margin-top:5px!important}.detail-value-wrapper{min-width:0;overflow:hidden;width:100%}.row>[class*=col]{min-width:0}.label-sub.truncate{white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;overflow-wrap:unset!important;display:block;max-width:100%}\n"],
+		dependencies: [
+			{
+				kind: "ngmodule",
+				type: CommonModule
+			},
+			{
+				kind: "directive",
+				type: i1$4.NgClass,
+				selector: "[ngClass]",
+				inputs: ["class", "ngClass"]
+			},
+			{
+				kind: "directive",
+				type: i1$4.NgForOf,
+				selector: "[ngFor][ngForOf]",
+				inputs: [
+					"ngForOf",
+					"ngForTrackBy",
+					"ngForTemplate"
+				]
+			},
+			{
+				kind: "directive",
+				type: i1$4.NgIf,
+				selector: "[ngIf]",
+				inputs: [
+					"ngIf",
+					"ngIfThen",
+					"ngIfElse"
+				]
+			},
+			{
+				kind: "directive",
+				type: i1$4.NgStyle,
+				selector: "[ngStyle]",
+				inputs: ["ngStyle"]
+			},
+			{
+				kind: "ngmodule",
+				type: MatTooltipModule
+			},
+			{
+				kind: "directive",
+				type: i4$1.MatTooltip,
+				selector: "[matTooltip]",
+				inputs: [
+					"matTooltipPosition",
+					"matTooltipPositionAtOrigin",
+					"matTooltipDisabled",
+					"matTooltipShowDelay",
+					"matTooltipHideDelay",
+					"matTooltipTouchGestures",
+					"matTooltip",
+					"matTooltipClass"
+				],
+				exportAs: ["matTooltip"]
+			},
+			{
+				kind: "pipe",
+				type: CustomTranslatePipe,
+				name: "customTranslate"
+			},
+			{
+				kind: "pipe",
+				type: CustomDatePipe,
+				name: "customDate"
+			}
+		]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: FusionCardComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "fusion-card",
+			standalone: true,
+			imports: [
+				CommonModule,
+				CustomTranslatePipe,
+				MatTooltipModule,
+				CustomDatePipe
+			],
+			providers: [DatePipe],
+			template: "<!-- MR 09NOV26 Migration of Datatables and Tier 1 Primitives to fusion-ui -->\n<div *ngIf=\"!(isCardLoading?.[comp?._id]?.length > 0) && (!cardData || cardData.length === 0)\" class=\"no-records-container\">\n    <div class=\"text-center p-4\">\n        <div class=\"no-records-message\">\n            <div class=\"mt-3 mb-2\">{{'APP.NO_RECORDS_AVAILABLE' | customTranslate : 'No Records Available'}}</div>\n        </div>\n    </div>\n</div>\n<div *ngIf=\"isCardLoading?.[comp?._id]?.length > 0; else viewCard\">\n    <div class=\"card fc-card fc-card-light skeleton-card\" style=\"height: 200px; border: none;\">\n        <div *ngFor=\"let n of [1, 2]\" class=\"flex\" style=\"padding: 25px 0px;\">\n            <div *ngFor=\"let e of [1, 2]\" style=\"width: 50%; padding: 5px;\">\n            <div class=\"\" style=\"height: 25px;\">\n                <div class=\"title\" data-title>\n                    <div class=\"skeleton skeleton-text\" style=\"width: 95%;\"></div>\n                    <div class=\"skeleton skeleton-text\" style=\"width: 65%;\"></div>\n                </div>\n            </div>\n            </div>\n        </div>\n    </div>\n</div>\n<ng-template #viewCard>\n    <div *ngIf=\"cardData && cardData.length > 0\" [class.col-md-12]=\"cardData.length > 0\" [class.dashboard-card-grid]=\"from === 'dashboard'\" style=\"height: 100%;\">\n        <div class=\"row\" [ngClass]=\"{\n            'g-2': cardData.length > 1 && from !== 'dashboard',\n            'gutter-remove': from === 'dashboard'\n            }\">\n            <div *ngFor=\"let card of cardData; let i = index\" class=\"{{card.cardSize}} inside-card\" [ngClass]=\"{'no-padding-margin':from ==='dashboard' ? cardData.length === 1 : false, 'multy-card':from ==='dashboard' ? cardData.length > 1 : false}\" style=\"height: 100%;\" [ngStyle]=\"{'margin-top': card.marginTop}\">\n                <div *ngIf=\"card?.config?.details\" style=\"height: 100%;\">\n                    <div class=\"width-100\" [ngClass]=\"{'static-width-for-card': from === 'dashboard' ? cardData.length != 1 : true}\" [style.border]=\"(from === 'dashboard' && cardData.length === 1 ) ? 'none' : ''\" style=\"height: 100%;\" [ngStyle]=\"from === 'dashboard' && cardData.length === 1 \n                    ? {\n                        position: 'absolute',\n                        top: '50%',\n                        left: '50%',\n                        transform: 'translate(-50%, -50%)'\n                      } \n                    : null\">\n                        <div *ngIf=\"card.isTitleHide ? card.isTitleHide === 'true' ? false : true : true\" class=\"header-section flex content-space-between\" style=\"align-items: center;\">\n                            <div class=\"section-title\">{{card.labelPath || card.label | customTranslate : card.label}}</div>\n                            <div class=\"actionButton\" style=\"display: flex; align-items: center;\">\n                                <div *ngFor=\"let button of card?.actionButton?.buttonArray; let i = index\">\n                                    <div *ngIf=\"i < card?.actionButton?.size\"\n                                        style=\"margin-left: 3px; margin-right: 3px;\">\n                                        <div *ngIf=\"isConditionMet(card, button.conditions)\"\n                                            [matTooltip]=\"button.tooltipPath || button.tooltip | customTranslate : button.tooltip\"\n                                            (click)=\"actionButtonClicked(button,card)\"\n                                            (mouseenter)=\"onMouseEnter($event,'border', button.hoverBorderColor)\"\n                                            (mouseleave)=\"onMouseLeave($event,'border', button.borderColor)\"\n                                            style=\"padding: 2px; border-radius: {{button.borderRadius}}px; border: 1px solid {{button.borderColor}};\">\n                                            <div (mouseenter)=\"onMouseEnter($event,'backgroundColor', button.hoverBackgroundColor)\"\n                                                (mouseleave)=\"onMouseLeave($event,'backgroundColor', button.backgroundColor)\"\n                                                style=\"padding: {{button.padding}}px; border-radius: {{button.borderRadius}}px; background-color: {{button.backgroundColor}}; display: flex; gap: 2px; align-items: center;\">\n                                                <img *ngIf=\"button.iconSrc && (button.iconSrc?.startsWith('data:') || button.iconSrc?.startsWith('http'))\"\n                                                    #imgElement\n                                                    [src]=\"button.iconSrc\"\n                                                    style=\"cursor: pointer;\"\n                                                    (mouseenter)=\"imgElement.src = button.hoverIconSrc || button.iconSrc\"\n                                                    (mouseleave)=\"imgElement.src = button.iconSrc\"/>\n                                                <i *ngIf=\"!(button.iconSrc?.startsWith('data:') || button.iconSrc?.startsWith('http'))\"\n                                                    class=\"fusion-icon nav-icon\"\n                                                    [ngClass]=\"button.iconSrc\"\n                                                    style=\"margin: 0px !important; font-size: var(--fs-normal, 16px) !important; color: var(--fc-sub-lite, #787486);\">\n                                                </i>\n                                                <div *ngIf=\"button.isLabel\" style=\"color: {{button.labelColor}}; font-size: 12px;\"> {{button.label || button.tooltip | customTranslate : button.label || button.tooltip}}</div>\n                                            </div>\n                                        </div>\n                                    </div>\n                                </div>\n                                <div *ngIf=\"card?.actionButton?.buttonArray && card?.actionButton?.buttonArray?.length > 0 && card?.actionButton?.buttonArray?.slice(card?.actionButton?.size) && card?.actionButton?.buttonArray?.slice(card?.actionButton?.size).length > 0\"\n                                    class=\"dropdown\">\n                                    <div class=\"clickable-img\" (click)=\"toggleDropdown(i)\"\n                                        style=\"margin-left: 3px; margin-right: 3px;\">\n                                        <div style=\"background-color: var(--comp-bg-secondary, #f5f5f5); padding: 2px 2px; border-radius: var(--radius-small, 5px);\">\n                                            <i class=\"fusion-icon fusion-icon-size-lg fusion-icon-arrow-square-down nav-icon\" style=\"background-color: var(--comp-bg-secondary, #f5f5f5); border-radius: var(--radius-small, 5px); border: 1px solid var(--border-color, #6c757d);\"></i>\n                                        </div>\n                                    </div>\n\n                                    <div class=\"dropdown-menu\"\n                                        [style.right]=\"(((card?.actionButton?.size ?? 0) - (card?.actionButton?.buttonArray?.size ?? 0) + ((card?.actionButton?.buttonArray?.slice(card?.actionButton?.size)?.length ?? 0) > 0 ? 1 : 0)) * 100) + '%'\"\n                                        *ngIf=\"currentOpenIndex === i\">\n                                        <div *ngFor=\"let btn of card?.actionButton?.buttonArray?.slice(card?.actionButton?.size)\">\n                                            <button *ngIf=\"isConditionMet(card, btn.conditions)\" \n                                            style=\"display: flex;\" type=\"button\"\n                                            class=\"btn btn-icon {{btn.buttonType}} tooltip-container\"\n                                            [matTooltip]=\"btn.tooltipPath || btn.tooltip | customTranslate : btn.tooltip\" [disabled]=\"btn.buttonDisable\"\n                                            (click)=\"actionButtonClicked(btn,card)\">\n                                                <img *ngIf=\"btn.iconSrc\" [src]=\"btn.iconSrc\">\n                                                <div class=\"fc-btn-text\" style=\"padding-left: 10px;\">\n                                                    {{btn.labelPath || btn.namePath || btn.name | customTranslate : btn.label || btn.name}}</div>\n                                            </button>\n                                        </div>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                        <div class=\"body-section card-text\" style=\"height: 100%;\" [ngStyle]=\"{ padding: card?.config?.padding || null }\">\n                            <div class=\"flex w-100\" [ngClass]=\"{\n                                    'row': card?.config?.details?.length > 1,\n                                    'gutter-remove': from === 'dashboard' && card?.config?.details?.length > 1\n                                }\" style=\"height: 100%;\">\n                                <ng-container *ngFor=\"let detail of card?.config?.details\">\n                                    <div *ngIf=\"!detail?.hideFromCard\" class=\"{{detail.size || card.cardInlineSize}} card-detail d-flex flex-column\" [ngClass]=\"detail.alignment\">\n                                        <div *ngIf=\"detail.iconSrc && detail.iconPosition !== 'end'\" class=\"icon-container d-flex\">\n                                            <div class=\"icon-wrapper\" [style.border]=\"'4px solid gray'\">\n                                                <img [src]=\"detail.iconSrc\" alt=\"Icon\">\n                                            </div>\n                                        </div>\n\n                                        <div *ngIf=\"!detail.isLabelHide && detail?.type !== 'image'\" class=\"label-head\" [ngClass]=\"detail.labelFont\">{{detail.labelPath || detail.label | customTranslate : detail.label}}</div>\n\n                                        <div [ngClass]=\"detail?.type !== 'image' && detail?.type !== 'file' ? 'flex-column' : ''\" [class.detail-value-wrapper]=\"detail?.type !== 'image' && detail.truncate\">\n                                            <div *ngIf=\"detail?.type !== 'date' && detail?.type !== 'time' && detail?.type !== 'datetime' && detail?.type !== 'label' && detail?.type !== 'image' && detail?.type !== 'file'\" class=\"label-sub\" [ngClass]=\"detail.valueFont\" [class.truncate]=\"detail.truncate\">\n                                                {{\n                                                    (detail?.type === 'boolean' || (detail?.value === true || detail?.value === false))\n                                                    ? (detail?.value === true ? 'True' : 'False')\n                                                    : (detail?.value || detail.value === 0)\n                                                        ? detail.value\n                                                        : '-'\n                                                }}\n                                            </div>\n                                            <div *ngIf=\"detail?.type === 'date'\" class=\"label-sub\" [ngClass]=\"detail.valueFont\" [class.truncate]=\"detail.truncate\">{{ (detail?.value | customDate) || '-' }}</div>\n                                            <div *ngIf=\"detail?.type === 'datetime'\" class=\"label-sub\" [ngClass]=\"detail.valueFont\" [class.truncate]=\"detail.truncate\">{{ (detail?.value | customDate : 'datetime') || '-' }}</div>\n                                            <div *ngIf=\"detail?.type === 'time'\" class=\"label-sub\" [ngClass]=\"detail.valueFont\" [class.truncate]=\"detail.truncate\">{{ (detail?.value | customDate : 'time') || '-' }}</div>\n                                            <div *ngIf=\"detail?.type === 'link'\" class=\"ms-2\">\n                                                <a *ngIf=\"detail?.redirectOnClick\"\n                                                    [href]=\"'//'+detail?.value\"\n                                                    [target]=\"detail?.openInNewTab ? '_blank' : '_self'\"\n                                                    class=\"form-label label-head\">\n                                                    <img [src]=\"detail?.srcImg\" />\n                                                </a>\n                                            </div>\n                                            <div *ngIf=\"detail?.type === 'image'\">\n                                                <img [style.height.%]=\"detail.imgHeight\" [src]=\"(detail?.value || detail?.defaultValue)\" style=\"width: 100%; max-height: 100%; object-fit: contain;\"/>\n                                            </div>\n                                            <div *ngIf=\"detail?.type === 'file'\">\n                                                <div class=\"cursor-pointer label-sub\" [ngClass]=\"detail.valueFont\" [class.truncate]=\"detail.truncate\" (click)=\"fileClick(detail.value, i)\">{{detail?.isLabel ? detail.value.name : ''}}</div>\n                                                <div class=\"flex\" *ngIf=\"detail?.value\">\n                                                    <img *ngIf=\"detail?.type === 'file' && !isLoading[i]\"\n                                                        src=\"../assets/images/icons/general/download-icon.svg\"\n                                                        class=\"card-icon color\"\n                                                        title=\"download\"\n                                                        (click)=\"downloadFile(detail.value, i)\"\n                                                        style=\"cursor: pointer; width:17px\">\n                                                    <svg *ngIf=\"detail?.type === 'file' && isLoading[i]\"\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                                                    <img *ngIf=\"detail?.isView && !isViewLoading[i]\"\n                                                        src=\"../assets/images/icons/general/preview.svg\"\n                                                        class=\"card-icon color\"\n                                                        title=\"preview\"\n                                                        (click)=\"fileClick(detail.value, i)\"\n                                                        style=\"cursor: pointer; width:20px\">\n                                                    <svg *ngIf=\"detail?.isView && isViewLoading[i]\"\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 *ngIf=\"detail.iconSrc && detail.iconPosition === 'end'\" class=\"icon-container d-flex\">\n                                            <div class=\"icon-wrapper\" [style.border]=\"'4px solid gray'\">\n                                                <img [src]=\"detail.iconSrc\" alt=\"Icon\">\n                                            </div>\n                                        </div>\n                                    </div>\n                                </ng-container>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</ng-template>\n\n<div *ngIf=\"deleteModal\" class=\"custom-modal-overlay\">\n    <div class=\"custom-modal\">\n        <div class=\"custom-modal-header\">\n            <b>{{ 'APP.DELETE_RECORD'| customTranslate : 'Delete Record'}}</b>\n            <button class=\"close-button\" (click)=\"deleteModal = false\">×</button>\n        </div>\n        <div class=\"custom-modal-body\">\n            {{ 'APP.ARE_YOU_SURE_YOU_WANT_TO_DELETE_THE_REC'| customTranslate : 'Are you sure you want to delete the record'}} ?\n        </div>\n        <div class=\"custom-modal-footer\">\n            <button class=\"confirm-button\" (click)=\"deleteRecordData()\">{{ 'APP.YES'| customTranslate : 'Yes'}}</button>\n            <button class=\"cancel-button\" (click)=\"deleteModal = false\">{{ 'APP.NO'| customTranslate : 'No'}}</button>\n        </div>\n    </div>\n</div>\n\n<div class=\"modal fade container-sm\" id=\"file\" aria-labelledby=\"file\" \naria-hidden=\"true\" #file>\n    <div class=\"modal-dialog modal-lg\">\n        <div class=\"modal-content\">\n            <div class=\"modal-header\">\n                <div class=\"modal-title fs-5\" id=\"expenseReceiptModelLabel\">{{popupTitle}}</div>\n                <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" (click)=\"closeModal()\" aria-label=\"Close\"></button>\n            </div>\n            <div class=\"modal-body\">\n                <iframe class=\"receipt-view\" *ngIf=\"safeSrc\" [src]=\"safeSrc\" style=\"width: 100%; height: 500px; border: none;\"></iframe>\n            </div>\n        </div>\n    </div>\n</div>\n\n",
+			styles: [".dropdown-menu{left:unset!important;right:300%;top:12.5px;background-color:var(--comp-bg-color, #ffffff);border:1px solid var(--border-color, #e2e8f0);border-radius:var(--radius-small, 4px);box-shadow:0 4px 8px var(--box-shadow-color, rgba(0, 0, 0, .1))}.dropdown .dropdown-menu{display:block}.dropdown-menu .btn{display:block;padding:10px;width:100%;text-align:left;background:transparent;border:none;cursor:pointer}.clickable-img{position:relative;cursor:pointer;padding:2px;border:1px solid var(--border-color, #e2e8f0);border-radius:5px}.clickable-img:hover{border:1px solid var(--fc-primary-color, rgb(31, 105, 255));border-radius:var(--radius-small, 5px)}.card-icon.color path{fill:var(--fc-primary-color, #2563eb)}.card-icon.color{margin-left:15px}.custom-modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--box-shadow-color, rgba(0, 0, 0, .4));display:flex;align-items:start;justify-content:center;z-index:1050}.custom-modal{background:var(--comp-bg-color, #ffffff);border-radius:8px;width:550px;max-width:90%;margin-top:30px;box-shadow:0 5px 15px var(--box-shadow-color, rgba(0, 0, 0, .2));overflow:hidden}.custom-modal-header{border-bottom:solid .5px var(--border-color, #e2e8f0)}.custom-modal-footer{border-top:solid .5px var(--border-color, #e2e8f0)}.custom-modal-header,.custom-modal-footer{padding:.7rem;display:flex;justify-content:space-between;align-items:center}.custom-modal-body{padding:1rem;font-size:1rem}.close-button{background:none;border:none;font-size:1.25rem;cursor:pointer}.cancel-button,.confirm-button{padding:.5rem 1rem;border:none;border-radius:4px;cursor:pointer}.cancel-button{background:var(--comp-bg-color, #ffffff);color:var(--fc-text-color-dark, #000000)}.confirm-button{background:var(--clr-error, #d9534f);color:var(--comp-bg-color, #ffffff)}.text-center{text-align:center!important;border:solid .5px var(--border-color, #94a3b8);border-radius:var(--radius-medium, 10px);margin:10px 0;color:var(--fc-text-color-light, #94a3b8)}.receipt-view{width:100%;height:600px}.icon-container{position:relative;margin-top:100px;z-index:1}.card-detail{margin-top:5px;margin-bottom:5px;min-width:0;overflow:hidden}.svg-spinner{animation:rotate 1s linear infinite}.svg-spinner .path{stroke:var(--fc-primary-color, #2563eb);stroke-linecap:round;stroke-dasharray:80 150;stroke-width:4}@keyframes rotate{to{transform:rotate(360deg)}}.no-padding-margin{margin:0!important;padding:0!important}.static-width-for-card{border:1px solid var(--border-color, #e2e8f0);border-radius:8px}.header-section{padding:8px 8px 0}.section-title{font-size:var(--fs-primary, 14px);font-weight:500}.body-section{padding:8px}.label-sub{white-space:normal;overflow-wrap:anywhere}.row.gutter-remove{--bs-gutter-x: 0rem !important;margin-top:0!important}.row{--bs-gutter-y: 0 !important}.inside-card.multy-card{margin-top:5px!important}.detail-value-wrapper{min-width:0;overflow:hidden;width:100%}.row>[class*=col]{min-width:0}.label-sub.truncate{white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;overflow-wrap:unset!important;display:block;max-width:100%}\n"]
+		}]
+	}],
+	ctorParameters: () => [
+		{ type: i1.DomSanitizer },
+		{ type: i0.Renderer2 },
+		{ type: ApiService },
+		{ type: i1$4.DatePipe },
+		{ type: LoaderService },
+		{ type: i0.ChangeDetectorRef }
+	],
+	propDecorators: {
+		cardData: [{ type: Input }],
+		from: [{ type: Input }],
+		comp: [{ type: Input }],
+		cardButtonEmit: [{ type: Output }],
+		file: [{
+			type: ViewChild,
+			args: ["file"]
+		}]
+	}
+});
+const TOAST_GLOBAL_CONFIG = new InjectionToken("TOAST_GLOBAL_CONFIG");
+function provideToastConfig(config) {
+	return [{
+		provide: TOAST_GLOBAL_CONFIG,
+		useValue: config
+	}];
+}
+function generateToastId() {
+	return Math.random().toString(36).slice(2, 9);
+}
+var ToastService = class ToastService {
+	_toasts$ = new BehaviorSubject([]);
+	toasts$ = this._toasts$.asObservable();
+	global = {};
+	removalTimers = /* @__PURE__ */ new Map();
+	constructor(cfg) {
+		this.global = cfg || {};
+	}
+	get toasts() {
+		return this._toasts$.value;
+	}
+	emit(toasts) {
+		this._toasts$.next([...toasts]);
+	}
+	scheduleRemoval(t) {
+		if (!t.duration || t.duration <= 0) return;
+		const handle = setTimeout(() => this.startLeavingAndRemove(t.id), t.duration);
+		this.removalTimers.set(t.id, handle);
+	}
+	clearRemovalTimer(id) {
+		const h = this.removalTimers.get(id);
+		if (h) {
+			clearTimeout(h);
+			this.removalTimers.delete(id);
+		}
+	}
+	show(cfg) {
+		const toast = {
+			id: generateToastId(),
+			type: "info",
+			duration: this.global.defaultDuration ?? 5e3,
+			...cfg
+		};
+		const list = [toast, ...this.toasts];
+		if (this.global.maxToasts && list.length > this.global.maxToasts) list.splice(this.global.maxToasts);
+		this.emit(list);
+		this.scheduleRemoval(toast);
+		return toast.id;
+	}
+	showSuccess(message, title, opts) {
+		return this.show({
+			message,
+			title,
+			type: "success",
+			...opts
+		});
+	}
+	showError(message, title, opts) {
+		return this.show({
+			message,
+			title,
+			type: "error",
+			...opts
+		});
+	}
+	showInfo(message, title, opts) {
+		return this.show({
+			message,
+			title,
+			type: "info",
+			...opts
+		});
+	}
+	showWarning(message, title, opts) {
+		return this.show({
+			message,
+			title,
+			type: "warning",
+			...opts
+		});
+	}
+	startLeavingAndRemove(id) {
+		const list = this.toasts.map((t) => t.id === id ? {
+			...t,
+			_leaving: true
+		} : t);
+		this.emit(list);
+		setTimeout(() => this.remove(id), 220);
+		this.clearRemovalTimer(id);
+	}
+	remove(id) {
+		this.clearRemovalTimer(id);
+		this.emit(this.toasts.filter((t) => t.id !== id));
+	}
+	clear() {
+		this.removalTimers.forEach((h) => clearTimeout(h));
+		this.removalTimers.clear();
+		this.emit([]);
+	}
+	pause(id) {
+		this.clearRemovalTimer(id);
+	}
+	resume(id, remaining) {
+		const t = this.toasts.find((x) => x.id === id);
+		if (t) {
+			const dur = remaining ?? t.duration ?? this.global.defaultDuration ?? 5e3;
+			this.scheduleRemoval({
+				...t,
+				duration: dur
+			});
+		}
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.4",
+		ngImport: i0,
+		type: ToastService,
+		deps: [{
+			token: TOAST_GLOBAL_CONFIG,
+			optional: true
+		}],
+		target: i0.ɵɵFactoryTarget.Injectable
+	});
+	static ɵprov = i0.ɵɵngDeclareInjectable({
+		minVersion: "12.0.0",
+		version: "22.2.4",
+		ngImport: i0,
+		type: ToastService,
+		providedIn: "root"
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: ToastService,
+	decorators: [{
+		type: Injectable,
+		args: [{ providedIn: "root" }]
+	}],
+	ctorParameters: () => [{
+		type: void 0,
+		decorators: [{ type: Optional }, {
+			type: Inject,
+			args: [TOAST_GLOBAL_CONFIG]
+		}]
+	}]
+});
+var ToastComponent = class ToastComponent {
+	toastService;
+	el;
+	cdr;
+	globalCfg;
+	toasts = [];
+	sub = new Subscription();
+	position;
+	enableAnimation;
+	pauseOnHover;
+	defaultDuration = 5e3;
+	positionClass = "top-right";
+	constructor(toastService, el, cdr, globalCfg) {
+		this.toastService = toastService;
+		this.el = el;
+		this.cdr = cdr;
+		this.globalCfg = globalCfg;
+	}
+	ngOnInit() {
+		const merged = {
+			...this.globalCfg || {},
+			position: this.position ?? this.globalCfg?.position,
+			enableAnimation: this.enableAnimation ?? this.globalCfg?.enableAnimation,
+			pauseOnHover: this.pauseOnHover ?? this.globalCfg?.pauseOnHover,
+			defaultDuration: this.defaultDuration ?? this.globalCfg?.defaultDuration
+		};
+		this.positionClass = merged.position ?? "top-right";
+		this.defaultDuration = merged.defaultDuration ?? 5e3;
+		this.sub.add(this.toastService.toasts$.subscribe((list) => {
+			this.toasts = list;
+			this.cdr.markForCheck();
+		}));
+	}
+	ngOnDestroy() {
+		this.sub.unsubscribe();
+	}
+	trackById(_, t) {
+		return t.id;
+	}
+	dismiss(id) {
+		if (id) this.toastService.startLeavingAndRemove(id);
+	}
+	onMouseEnter(t, e) {
+		if (this.pauseOnHover ?? this.globalCfg?.pauseOnHover) {
+			e.currentTarget.style.setProperty("--toast-playstate", "paused");
+			this.toastService.pause(t.id);
+		}
+	}
+	onMouseLeave(t, e) {
+		if (this.pauseOnHover ?? this.globalCfg?.pauseOnHover) {
+			e.currentTarget.style.setProperty("--toast-playstate", "running");
+			this.toastService.resume(t.id, t.duration);
+		}
+	}
+	progressState() {
+		return "var(--toast-playstate, running)";
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.4",
+		ngImport: i0,
+		type: ToastComponent,
+		deps: [
+			{ token: ToastService },
+			{ token: i0.ElementRef },
+			{ token: i0.ChangeDetectorRef },
+			{
+				token: TOAST_GLOBAL_CONFIG,
+				optional: true
+			}
+		],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.4",
+		type: ToastComponent,
+		isStandalone: true,
+		selector: "app-toast, fusion-toast",
+		inputs: {
+			position: "position",
+			enableAnimation: "enableAnimation",
+			pauseOnHover: "pauseOnHover",
+			defaultDuration: "defaultDuration"
+		},
+		ngImport: i0,
+		template: "<!-- MR 09NOV26 Migration of Datatables and Tier 1 Primitives to fusion-ui -->\n<div class=\"toast-container\" [class]=\"positionClass\">\n  <div\n    class=\"toast\"\n    *ngFor=\"let t of toasts; trackBy: trackById\"\n    [class.leaving]=\"t._leaving\"\n    [attr.data-type]=\"t.type\"\n    [style.background]=\"t.background || ''\"\n    [style.color]=\"t.textColor || ''\"\n    (mouseenter)=\"onMouseEnter(t, $event)\"\n    (mouseleave)=\"onMouseLeave(t, $event)\"\n  >\n    <div style=\"display: flex; width: 100%; align-items: center;\">\n      <div class=\"toast-left\">\n        <i *ngIf=\"t.icon\" class=\"fusion-icon fusion-icon-size-lg {{t.icon}} nav-icon icon\" style=\"color: var(--fc-text-color-dark, #000000) !important;\"></i>\n        <div class=\"icon default\" *ngIf=\"!t.icon\">\n          @switch (t.type) {\n            @case ('success') {\n              <svg viewBox=\"0 0 24 24\" class=\"default-svg\">\n                <path fill=\"currentColor\" d=\"M9 16.2l-3.5-3.5L4 14l5 5 12-12-1.5-1.5z\"/>\n              </svg>\n            }\n            @case ('error') {\n              <svg viewBox=\"0 0 24 24\" class=\"default-svg\">\n                <path fill=\"currentColor\" d=\"M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm5 13.6L13.6 17 12 15.4 10.4 17 7 13.6 8.6 12 7 10.4 10.4 7 12 8.6 13.6 7 17 10.4 15.4 12 17 13.6z\"/>\n              </svg>\n            }\n            @case ('warning') {\n              <svg viewBox=\"0 0 24 24\" class=\"default-svg\">\n                <path fill=\"currentColor\" d=\"M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z\"/>\n              </svg>\n            }\n            @default {\n              <svg viewBox=\"0 0 24 24\" class=\"default-svg\">\n                <path fill=\"currentColor\" d=\"M12 2v20M2 12h20\"/>\n              </svg>\n            }\n          }\n        </div>\n      </div>\n\n      <div class=\"toast-body\">\n        <div class=\"title\" *ngIf=\"t.title\">{{ t.title }}</div>\n        <div class=\"message\">{{ t.message }}</div>\n      </div>\n\n      <button class=\"close\" (click)=\"dismiss(t.id)\" aria-label=\"Close\">×</button>\n    </div>\n\n    <div class=\"progress\" *ngIf=\"t.duration && t.duration > 0\">\n      <div class=\"bar\" [style.--toast-duration]=\"t.duration + 'ms'\" [style.animation-play-state]=\"progressState()\"></div>\n    </div>\n  </div>\n</div>\n\n",
+		styles: [":host{display:block}.toast-container{position:fixed;width:360px;display:flex;flex-direction:column;gap:12px;z-index:1100;pointer-events:none}.toast-container.top-right{inset:65px 16px auto auto}.toast-container.top-left{inset:16px auto auto 16px}.toast-container.bottom-right{inset:auto 16px 16px auto}.toast-container.bottom-left{inset:auto auto 16px 16px}.toast{pointer-events:auto;display:flex;flex-direction:column;gap:12px;padding:12px;border-radius:var(--radius-large, 12px);box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;background:var(--comp-bg-color, #ffffff);color:var(--fc-text-color-dark, #0f172a);overflow:hidden;border:1px solid var(--border-color, #e2e8f0);position:relative;transform:translate(8px);opacity:0;animation:toast-in .22s cubic-bezier(.2,.9,.2,1) forwards}.toast.leaving{animation:toast-out .18s ease-in forwards}@keyframes toast-in{0%{opacity:0;transform:translateY(-8px) translate(8px)}to{opacity:1;transform:translateY(0) translate(0)}}@keyframes toast-out{0%{opacity:1;transform:translateY(0) translate(0)}to{opacity:0;transform:translateY(-6px) translate(6px)}}.toast[data-type=success]{border-left:6px solid var(--clr-success, #22c55e)}.toast[data-type=error]{border-left:6px solid var(--clr-error, #ef4444)}.toast[data-type=warning]{border-left:6px solid var(--clr-warning, #f59e0b)}.toast[data-type=info]{border-left:6px solid var(--clr-info, #3b82f6)}.toast-left{display:flex;align-items:center}.icon{width:36px;height:36px;display:flex;align-items:center;justify-content:center}.icon svg{width:22px;height:22px}.default-svg{opacity:.95}.toast-body{flex:1;min-width:0;padding:0 8px}.title{font-weight:700;font-size:14px;margin-bottom:4px}.message{font-size:13px;color:inherit;opacity:.88;word-break:break-word}.close{background:none;border:0;font-size:18px;line-height:1;padding:4px 6px;cursor:pointer;color:inherit}.progress{position:absolute;left:0;right:0;bottom:0;height:4px;background:#0000000d}.progress .bar{height:100%;width:100%;background:var(--fc-primary-color, #3b82f6);transform-origin:left;animation-name:progress-shrink;animation-timing-function:linear;animation-duration:var(--toast-duration, 5s);animation-play-state:var(--toast-playstate, running)}@keyframes progress-shrink{0%{transform:scaleX(1)}to{transform:scaleX(0)}}@media(max-width:420px){.toast-container{width:calc(100% - 32px);left:16px;right:16px}}\n"],
+		dependencies: [
+			{
+				kind: "ngmodule",
+				type: CommonModule
+			},
+			{
+				kind: "directive",
+				type: i1$4.NgForOf,
+				selector: "[ngFor][ngForOf]",
+				inputs: [
+					"ngForOf",
+					"ngForTrackBy",
+					"ngForTemplate"
+				]
+			},
+			{
+				kind: "directive",
+				type: i1$4.NgIf,
+				selector: "[ngIf]",
+				inputs: [
+					"ngIf",
+					"ngIfThen",
+					"ngIfElse"
+				]
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: ToastComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "app-toast, fusion-toast",
+			standalone: true,
+			imports: [CommonModule],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<!-- MR 09NOV26 Migration of Datatables and Tier 1 Primitives to fusion-ui -->\n<div class=\"toast-container\" [class]=\"positionClass\">\n  <div\n    class=\"toast\"\n    *ngFor=\"let t of toasts; trackBy: trackById\"\n    [class.leaving]=\"t._leaving\"\n    [attr.data-type]=\"t.type\"\n    [style.background]=\"t.background || ''\"\n    [style.color]=\"t.textColor || ''\"\n    (mouseenter)=\"onMouseEnter(t, $event)\"\n    (mouseleave)=\"onMouseLeave(t, $event)\"\n  >\n    <div style=\"display: flex; width: 100%; align-items: center;\">\n      <div class=\"toast-left\">\n        <i *ngIf=\"t.icon\" class=\"fusion-icon fusion-icon-size-lg {{t.icon}} nav-icon icon\" style=\"color: var(--fc-text-color-dark, #000000) !important;\"></i>\n        <div class=\"icon default\" *ngIf=\"!t.icon\">\n          @switch (t.type) {\n            @case ('success') {\n              <svg viewBox=\"0 0 24 24\" class=\"default-svg\">\n                <path fill=\"currentColor\" d=\"M9 16.2l-3.5-3.5L4 14l5 5 12-12-1.5-1.5z\"/>\n              </svg>\n            }\n            @case ('error') {\n              <svg viewBox=\"0 0 24 24\" class=\"default-svg\">\n                <path fill=\"currentColor\" d=\"M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm5 13.6L13.6 17 12 15.4 10.4 17 7 13.6 8.6 12 7 10.4 10.4 7 12 8.6 13.6 7 17 10.4 15.4 12 17 13.6z\"/>\n              </svg>\n            }\n            @case ('warning') {\n              <svg viewBox=\"0 0 24 24\" class=\"default-svg\">\n                <path fill=\"currentColor\" d=\"M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z\"/>\n              </svg>\n            }\n            @default {\n              <svg viewBox=\"0 0 24 24\" class=\"default-svg\">\n                <path fill=\"currentColor\" d=\"M12 2v20M2 12h20\"/>\n              </svg>\n            }\n          }\n        </div>\n      </div>\n\n      <div class=\"toast-body\">\n        <div class=\"title\" *ngIf=\"t.title\">{{ t.title }}</div>\n        <div class=\"message\">{{ t.message }}</div>\n      </div>\n\n      <button class=\"close\" (click)=\"dismiss(t.id)\" aria-label=\"Close\">×</button>\n    </div>\n\n    <div class=\"progress\" *ngIf=\"t.duration && t.duration > 0\">\n      <div class=\"bar\" [style.--toast-duration]=\"t.duration + 'ms'\" [style.animation-play-state]=\"progressState()\"></div>\n    </div>\n  </div>\n</div>\n\n",
+			styles: [":host{display:block}.toast-container{position:fixed;width:360px;display:flex;flex-direction:column;gap:12px;z-index:1100;pointer-events:none}.toast-container.top-right{inset:65px 16px auto auto}.toast-container.top-left{inset:16px auto auto 16px}.toast-container.bottom-right{inset:auto 16px 16px auto}.toast-container.bottom-left{inset:auto auto 16px 16px}.toast{pointer-events:auto;display:flex;flex-direction:column;gap:12px;padding:12px;border-radius:var(--radius-large, 12px);box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;background:var(--comp-bg-color, #ffffff);color:var(--fc-text-color-dark, #0f172a);overflow:hidden;border:1px solid var(--border-color, #e2e8f0);position:relative;transform:translate(8px);opacity:0;animation:toast-in .22s cubic-bezier(.2,.9,.2,1) forwards}.toast.leaving{animation:toast-out .18s ease-in forwards}@keyframes toast-in{0%{opacity:0;transform:translateY(-8px) translate(8px)}to{opacity:1;transform:translateY(0) translate(0)}}@keyframes toast-out{0%{opacity:1;transform:translateY(0) translate(0)}to{opacity:0;transform:translateY(-6px) translate(6px)}}.toast[data-type=success]{border-left:6px solid var(--clr-success, #22c55e)}.toast[data-type=error]{border-left:6px solid var(--clr-error, #ef4444)}.toast[data-type=warning]{border-left:6px solid var(--clr-warning, #f59e0b)}.toast[data-type=info]{border-left:6px solid var(--clr-info, #3b82f6)}.toast-left{display:flex;align-items:center}.icon{width:36px;height:36px;display:flex;align-items:center;justify-content:center}.icon svg{width:22px;height:22px}.default-svg{opacity:.95}.toast-body{flex:1;min-width:0;padding:0 8px}.title{font-weight:700;font-size:14px;margin-bottom:4px}.message{font-size:13px;color:inherit;opacity:.88;word-break:break-word}.close{background:none;border:0;font-size:18px;line-height:1;padding:4px 6px;cursor:pointer;color:inherit}.progress{position:absolute;left:0;right:0;bottom:0;height:4px;background:#0000000d}.progress .bar{height:100%;width:100%;background:var(--fc-primary-color, #3b82f6);transform-origin:left;animation-name:progress-shrink;animation-timing-function:linear;animation-duration:var(--toast-duration, 5s);animation-play-state:var(--toast-playstate, running)}@keyframes progress-shrink{0%{transform:scaleX(1)}to{transform:scaleX(0)}}@media(max-width:420px){.toast-container{width:calc(100% - 32px);left:16px;right:16px}}\n"]
+		}]
+	}],
+	ctorParameters: () => [
+		{ type: ToastService },
+		{ type: i0.ElementRef },
+		{ type: i0.ChangeDetectorRef },
+		{
+			type: void 0,
+			decorators: [{ type: Optional }, {
+				type: Inject,
+				args: [TOAST_GLOBAL_CONFIG]
+			}]
+		}
+	],
+	propDecorators: {
+		position: [{ type: Input }],
+		enableAnimation: [{ type: Input }],
+		pauseOnHover: [{ type: Input }],
+		defaultDuration: [{ type: Input }]
+	}
+});
+var MultiSelectDropdownComponent = class MultiSelectDropdownComponent {
+	cdr;
+	label = "Select";
+	list = [];
+	isAll = false;
+	shareCheckedList = new EventEmitter();
+	control = new FormControl([]);
+	filteredItemList = [];
+	selectedItemList = [];
+	value = "";
+	destroy$ = new Subject();
+	constructor(cdr) {
+		this.cdr = cdr;
+	}
+	ngOnChanges(changes) {
+		if (changes["list"]) {
+			this.filteredItemList = [...this.list || []];
+			this.cdr.markForCheck();
+		}
+	}
+	ngOnInit() {
+		this.control.valueChanges.pipe(takeUntil(this.destroy$)).subscribe((selected) => {
+			this.selectedItemList = selected || [];
+			this.emitSelectedIds();
+			this.cdr.markForCheck();
+		});
+	}
+	ngOnDestroy() {
+		this.destroy$.next();
+		this.destroy$.complete();
+	}
+	compareItems(o1, o2) {
+		return o1 && o2 ? o1._id === o2._id : o1 === o2;
+	}
+	toggleSelectAll() {
+		if (this.isAllSelected()) {
+			this.control.setValue([], { emitEvent: false });
+			this.selectedItemList = [];
+		} else {
+			this.control.setValue([...this.filteredItemList], { emitEvent: false });
+			this.selectedItemList = [...this.filteredItemList];
+		}
+		this.emitSelectedIds();
+		this.cdr.markForCheck();
+	}
+	isAllSelected() {
+		return this.filteredItemList.length > 0 && this.filteredItemList.every((item) => this.control.value?.some((selected) => selected._id === item._id));
+	}
+	onFilterChange(event) {
+		const lower = event?.toLowerCase() || "";
+		this.filteredItemList = (this.list || []).filter((option) => option?._id?.toString().toLowerCase().includes(lower) || option?.label?.toLowerCase().includes(lower));
+		this.cdr.markForCheck();
+	}
+	clearFilter() {
+		this.value = "";
+		this.filteredItemList = [...this.list || []];
+		this.cdr.markForCheck();
+	}
+	removeChip(item) {
+		const updated = this.control.value?.filter((i) => i._id !== item._id) || [];
+		this.control.setValue(updated, { emitEvent: false });
+		this.selectedItemList = updated;
+		this.emitSelectedIds();
+		this.cdr.markForCheck();
+	}
+	emitSelectedIds() {
+		const ids = this.selectedItemList.map((i) => i._id);
+		this.shareCheckedList.emit(ids);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.4",
+		ngImport: i0,
+		type: MultiSelectDropdownComponent,
+		deps: [{ token: i0.ChangeDetectorRef }],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.4",
+		type: MultiSelectDropdownComponent,
+		isStandalone: true,
+		selector: "app-multi-select-dropdown, fusion-multi-select-dropdown",
+		inputs: {
+			label: "label",
+			list: "list",
+			isAll: "isAll"
+		},
+		outputs: { shareCheckedList: "shareCheckedList" },
+		usesOnChanges: true,
+		ngImport: i0,
+		template: "<!-- MR 09NOV26 Migration of Datatables and Tier 1 Primitives to fusion-ui -->\n<mat-form-field style=\"width: 100%;\">\n  <mat-label>{{ label }}</mat-label>\n\n  <div style=\"margin-bottom: 5px;\">\n    @for (selectedItem of selectedItemList; track selectedItem) {\n      <mat-chip style=\"margin: 5px;\" [removable]=\"true\" (removed)=\"removeChip(selectedItem)\">\n        {{ selectedItem._id }} ({{ selectedItem.label }})\n        <mat-icon matChipRemove>cancel</mat-icon>\n      </mat-chip>\n    }\n  </div>\n\n  <mat-select [formControl]=\"control\" multiple [compareWith]=\"compareItems\">\n    <mat-select-trigger></mat-select-trigger>\n\n    <mat-form-field style=\"width: 100%;\" appearance=\"outline\">\n      <mat-label>Search {{ label }}</mat-label>\n      <input matInput type=\"text\" [(ngModel)]=\"value\" (ngModelChange)=\"onFilterChange($event)\" />\n      @if (value) {\n        <button style=\"position: absolute; right: -10px; top: 5px;\" mat-icon-button aria-label=\"Clear\"\n          (click)=\"clearFilter()\">\n          <mat-icon>close</mat-icon>\n        </button>\n      }\n    </mat-form-field>\n\n    @if (filteredItemList.length > 0 && isAll) {\n      <mat-checkbox color=\"primary\" style=\"user-select: none; width: 100%; cursor: pointer; padding: 5px;\" matRipple\n        [checked]=\"isAllSelected()\" (click)=\"toggleSelectAll()\">\n        <span [style.color]=\"isAllSelected() ? 'var(--fc-primary-color, #0070d2)' : 'inherit'\" style=\"font-size: var(--fs-normal, 16px);\">All</span>\n      </mat-checkbox>\n    }\n\n    @for (item of filteredItemList; track item) {\n      <mat-option [value]=\"item\">\n        {{ item._id }} ({{ item.label }})\n      </mat-option>\n    }\n\n    @if (filteredItemList.length == 0) {\n      <div style=\"padding: 5px 10px;\">No results found!</div>\n    }\n  </mat-select>\n</mat-form-field>\n\n",
+		styles: ["::ng-deep mat-checkbox:hover{background-color:var(--mat-option-focus-state-layer-color, rgba(0, 0, 0, .04))}::ng-deep mat-option span{white-space:nowrap;text-overflow:ellipsis;max-width:100%;overflow:hidden}.selected-option{background-color:#0070d21f!important;color:var(--fc-primary-color, #0070d2)!important}\n"],
+		dependencies: [
+			{
+				kind: "ngmodule",
+				type: CommonModule
+			},
+			{
+				kind: "ngmodule",
+				type: FormsModule
+			},
+			{
+				kind: "directive",
+				type: i3$2.DefaultValueAccessor,
+				selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]"
+			},
+			{
+				kind: "directive",
+				type: i3$2.NgControlStatus,
+				selector: "[formControlName],[ngModel],[formControl]"
+			},
+			{
+				kind: "directive",
+				type: i3$2.NgModel,
+				selector: "[ngModel]:not([formControlName]):not([formControl])",
+				inputs: [
+					"name",
+					"disabled",
+					"ngModel",
+					"ngModelOptions"
+				],
+				outputs: ["ngModelChange"],
+				exportAs: ["ngModel"]
+			},
+			{
+				kind: "ngmodule",
+				type: ReactiveFormsModule
+			},
+			{
+				kind: "directive",
+				type: i3$2.FormControlDirective,
+				selector: "[formControl]",
+				inputs: [
+					"formControl",
+					"disabled",
+					"ngModel"
+				],
+				outputs: ["ngModelChange"],
+				exportAs: ["ngForm"]
+			},
+			{
+				kind: "ngmodule",
+				type: MatFormFieldModule
+			},
+			{
+				kind: "component",
+				type: i2.MatFormField,
+				selector: "mat-form-field",
+				inputs: [
+					"hideRequiredMarker",
+					"color",
+					"floatLabel",
+					"appearance",
+					"subscriptSizing",
+					"hintLabel"
+				],
+				exportAs: ["matFormField"]
+			},
+			{
+				kind: "directive",
+				type: i2.MatLabel,
+				selector: "mat-label"
+			},
+			{
+				kind: "ngmodule",
+				type: MatSelectModule
+			},
+			{
+				kind: "component",
+				type: i3.MatSelect,
+				selector: "mat-select",
+				inputs: [
+					"aria-describedby",
+					"panelClass",
+					"disabled",
+					"disableRipple",
+					"tabIndex",
+					"hideSingleSelectionIndicator",
+					"placeholder",
+					"required",
+					"multiple",
+					"disableOptionCentering",
+					"compareWith",
+					"value",
+					"aria-label",
+					"aria-labelledby",
+					"errorStateMatcher",
+					"typeaheadDebounceInterval",
+					"sortComparator",
+					"id",
+					"panelWidth",
+					"canSelectNullableOptions"
+				],
+				outputs: [
+					"openedChange",
+					"opened",
+					"closed",
+					"selectionChange",
+					"valueChange"
+				],
+				exportAs: ["matSelect"]
+			},
+			{
+				kind: "directive",
+				type: i3.MatSelectTrigger,
+				selector: "mat-select-trigger"
+			},
+			{
+				kind: "component",
+				type: i3.MatOption,
+				selector: "mat-option",
+				inputs: [
+					"value",
+					"id",
+					"disabled"
+				],
+				outputs: ["onSelectionChange"],
+				exportAs: ["matOption"]
+			},
+			{
+				kind: "ngmodule",
+				type: MatInputModule
+			},
+			{
+				kind: "directive",
+				type: i4.MatInput,
+				selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]",
+				inputs: [
+					"disabled",
+					"id",
+					"placeholder",
+					"name",
+					"required",
+					"type",
+					"errorStateMatcher",
+					"aria-describedby",
+					"value",
+					"readonly",
+					"disabledInteractive"
+				],
+				exportAs: ["matInput"]
+			},
+			{
+				kind: "ngmodule",
+				type: MatButtonModule
+			},
+			{
+				kind: "component",
+				type: i5.MatIconButton,
+				selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]",
+				exportAs: ["matButton", "matAnchor"]
+			},
+			{
+				kind: "ngmodule",
+				type: MatIconModule
+			},
+			{
+				kind: "component",
+				type: i6.MatIcon,
+				selector: "mat-icon",
+				inputs: [
+					"color",
+					"inline",
+					"svgIcon",
+					"fontSet",
+					"fontIcon"
+				],
+				exportAs: ["matIcon"]
+			},
+			{
+				kind: "ngmodule",
+				type: MatCheckboxModule
+			},
+			{
+				kind: "component",
+				type: i3$1.MatCheckbox,
+				selector: "mat-checkbox",
+				inputs: [
+					"aria-label",
+					"aria-labelledby",
+					"aria-describedby",
+					"aria-expanded",
+					"aria-controls",
+					"aria-owns",
+					"id",
+					"required",
+					"labelPosition",
+					"name",
+					"value",
+					"disableRipple",
+					"tabIndex",
+					"color",
+					"disabledInteractive",
+					"checked",
+					"disabled",
+					"indeterminate"
+				],
+				outputs: ["change", "indeterminateChange"],
+				exportAs: ["matCheckbox"]
+			},
+			{
+				kind: "ngmodule",
+				type: MatRippleModule
+			},
+			{
+				kind: "directive",
+				type: i8.MatRipple,
+				selector: "[mat-ripple], [matRipple]",
+				inputs: [
+					"matRippleColor",
+					"matRippleUnbounded",
+					"matRippleCentered",
+					"matRippleRadius",
+					"matRippleAnimation",
+					"matRippleDisabled",
+					"matRippleTrigger"
+				],
+				exportAs: ["matRipple"]
+			},
+			{
+				kind: "ngmodule",
+				type: MatChipsModule
+			},
+			{
+				kind: "component",
+				type: i9.MatChip,
+				selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]",
+				inputs: [
+					"role",
+					"id",
+					"aria-label",
+					"aria-description",
+					"value",
+					"color",
+					"removable",
+					"highlighted",
+					"disableRipple",
+					"disabled"
+				],
+				outputs: ["removed", "destroyed"],
+				exportAs: ["matChip"]
+			},
+			{
+				kind: "directive",
+				type: i9.MatChipRemove,
+				selector: "[matChipRemove]"
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: MultiSelectDropdownComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "app-multi-select-dropdown, fusion-multi-select-dropdown",
+			standalone: true,
+			imports: [
+				CommonModule,
+				FormsModule,
+				ReactiveFormsModule,
+				MatFormFieldModule,
+				MatSelectModule,
+				MatInputModule,
+				MatButtonModule,
+				MatIconModule,
+				MatCheckboxModule,
+				MatRippleModule,
+				MatChipsModule
+			],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<!-- MR 09NOV26 Migration of Datatables and Tier 1 Primitives to fusion-ui -->\n<mat-form-field style=\"width: 100%;\">\n  <mat-label>{{ label }}</mat-label>\n\n  <div style=\"margin-bottom: 5px;\">\n    @for (selectedItem of selectedItemList; track selectedItem) {\n      <mat-chip style=\"margin: 5px;\" [removable]=\"true\" (removed)=\"removeChip(selectedItem)\">\n        {{ selectedItem._id }} ({{ selectedItem.label }})\n        <mat-icon matChipRemove>cancel</mat-icon>\n      </mat-chip>\n    }\n  </div>\n\n  <mat-select [formControl]=\"control\" multiple [compareWith]=\"compareItems\">\n    <mat-select-trigger></mat-select-trigger>\n\n    <mat-form-field style=\"width: 100%;\" appearance=\"outline\">\n      <mat-label>Search {{ label }}</mat-label>\n      <input matInput type=\"text\" [(ngModel)]=\"value\" (ngModelChange)=\"onFilterChange($event)\" />\n      @if (value) {\n        <button style=\"position: absolute; right: -10px; top: 5px;\" mat-icon-button aria-label=\"Clear\"\n          (click)=\"clearFilter()\">\n          <mat-icon>close</mat-icon>\n        </button>\n      }\n    </mat-form-field>\n\n    @if (filteredItemList.length > 0 && isAll) {\n      <mat-checkbox color=\"primary\" style=\"user-select: none; width: 100%; cursor: pointer; padding: 5px;\" matRipple\n        [checked]=\"isAllSelected()\" (click)=\"toggleSelectAll()\">\n        <span [style.color]=\"isAllSelected() ? 'var(--fc-primary-color, #0070d2)' : 'inherit'\" style=\"font-size: var(--fs-normal, 16px);\">All</span>\n      </mat-checkbox>\n    }\n\n    @for (item of filteredItemList; track item) {\n      <mat-option [value]=\"item\">\n        {{ item._id }} ({{ item.label }})\n      </mat-option>\n    }\n\n    @if (filteredItemList.length == 0) {\n      <div style=\"padding: 5px 10px;\">No results found!</div>\n    }\n  </mat-select>\n</mat-form-field>\n\n",
+			styles: ["::ng-deep mat-checkbox:hover{background-color:var(--mat-option-focus-state-layer-color, rgba(0, 0, 0, .04))}::ng-deep mat-option span{white-space:nowrap;text-overflow:ellipsis;max-width:100%;overflow:hidden}.selected-option{background-color:#0070d21f!important;color:var(--fc-primary-color, #0070d2)!important}\n"]
+		}]
+	}],
+	ctorParameters: () => [{ type: i0.ChangeDetectorRef }],
+	propDecorators: {
+		label: [{ type: Input }],
+		list: [{ type: Input }],
+		isAll: [{ type: Input }],
+		shareCheckedList: [{ type: Output }]
+	}
+});
+var AlertMessageComponent = class AlertMessageComponent {
+	cdr;
+	alertService;
+	type = "info";
+	message = "";
+	dismissible = true;
+	autoSubscribeAlertService = false;
+	dismiss = new EventEmitter();
+	visible = true;
+	sub;
+	constructor(cdr, alertService) {
+		this.cdr = cdr;
+		this.alertService = alertService;
+	}
+	ngOnInit() {
+		if (this.autoSubscribeAlertService && this.alertService) this.sub = this.alertService.passAlertType$.subscribe((data) => {
+			if (data) {
+				this.type = data.type === "failure" || data.type === "error" ? "error" : data.type || "info";
+				this.message = data.message || "";
+				this.visible = true;
+				this.cdr.markForCheck();
+			}
+		});
+	}
+	ngOnDestroy() {
+		this.sub?.unsubscribe();
+	}
+	onDismiss() {
+		this.visible = false;
+		this.dismiss.emit();
+		this.cdr.markForCheck();
+	}
+	get normalizedType() {
+		if (this.type === "failure" || this.type === "error") return "failure";
+		return this.type || "info";
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.4",
+		ngImport: i0,
+		type: AlertMessageComponent,
+		deps: [{ token: i0.ChangeDetectorRef }, {
+			token: AlertService,
+			optional: true
+		}],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.4",
+		type: AlertMessageComponent,
+		isStandalone: true,
+		selector: "fusion-alert, app-success-failure-message",
+		inputs: {
+			type: "type",
+			message: "message",
+			dismissible: "dismissible",
+			autoSubscribeAlertService: "autoSubscribeAlertService"
+		},
+		outputs: { dismiss: "dismiss" },
+		ngImport: i0,
+		template: "<!-- MR 09NOV26 Migration of Datatables and Tier 1 Primitives to fusion-ui -->\n<div *ngIf=\"visible && (message || true)\" class=\"alert alert-dismissible fade show form-submission-message\" [ngClass]=\"normalizedType\" role=\"alert\">\n  <div class=\"info\">\n    <div class=\"alert-icon\">\n      <ng-content select=\"[alert-icon]\">\n        @switch (normalizedType) {\n          @case ('success') {\n            <svg class=\"icon-svg\" viewBox=\"0 0 24 24\">\n              <path fill=\"currentColor\" d=\"M9 16.2l-3.5-3.5L4 14l5 5 12-12-1.5-1.5z\"/>\n            </svg>\n          }\n          @case ('failure') {\n            <svg class=\"icon-svg\" viewBox=\"0 0 24 24\">\n              <path fill=\"currentColor\" d=\"M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm5 13.6L13.6 17 12 15.4 10.4 17 7 13.6 8.6 12 7 10.4 10.4 7 12 8.6 13.6 7 17 10.4 15.4 12 17 13.6z\"/>\n            </svg>\n          }\n          @case ('warning') {\n            <svg class=\"icon-svg\" viewBox=\"0 0 24 24\">\n              <path fill=\"currentColor\" d=\"M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z\"/>\n            </svg>\n          }\n          @default {\n            <svg class=\"icon-svg\" viewBox=\"0 0 24 24\">\n              <path fill=\"currentColor\" d=\"M12 2v20M2 12h20\"/>\n            </svg>\n          }\n        }\n      </ng-content>\n    </div>\n\n    <div class=\"alert-content\">\n      <ng-content>{{ message }}</ng-content>\n    </div>\n\n    <button *ngIf=\"dismissible\" type=\"button\" class=\"close-btn\" (click)=\"onDismiss()\" aria-label=\"Close\">\n      <svg viewBox=\"0 0 24 24\" class=\"cross-icon\">\n        <path fill=\"currentColor\" d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"/>\n      </svg>\n    </button>\n  </div>\n</div>\n\n",
+		styles: [":host{display:block}.form-submission-message{margin:8px 0;padding:10px 14px;border-radius:var(--radius-medium, 8px);position:relative;border:1px solid transparent}.form-submission-message.success{background-color:var(--fb-action-surface, #e0f2fe);color:var(--fb-action, #003566);border-color:#bae6fd}.form-submission-message.failure{background-color:#fee2e2;color:#991b1b;border-color:#fecaca}.form-submission-message.warning{background-color:#fef3c7;color:#92400e;border-color:#fde68a}.form-submission-message.info{background-color:#f1f5f9;color:#1e293b;border-color:#e2e8f0}.info{display:flex;align-items:center;gap:10px;width:100%}.alert-icon{display:flex;align-items:center;flex-shrink:0}.icon-svg{width:20px;height:20px}.alert-content{flex:1;font-size:13px;font-weight:500;line-height:1.4}.close-btn{background:transparent;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;color:inherit;opacity:.7}.close-btn:hover{opacity:1}.cross-icon{width:16px;height:16px}\n"],
+		dependencies: [
+			{
+				kind: "ngmodule",
+				type: CommonModule
+			},
+			{
+				kind: "directive",
+				type: i1$4.NgClass,
+				selector: "[ngClass]",
+				inputs: ["class", "ngClass"]
+			},
+			{
+				kind: "directive",
+				type: i1$4.NgIf,
+				selector: "[ngIf]",
+				inputs: [
+					"ngIf",
+					"ngIfThen",
+					"ngIfElse"
+				]
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: AlertMessageComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "fusion-alert, app-success-failure-message",
+			standalone: true,
+			imports: [CommonModule],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<!-- MR 09NOV26 Migration of Datatables and Tier 1 Primitives to fusion-ui -->\n<div *ngIf=\"visible && (message || true)\" class=\"alert alert-dismissible fade show form-submission-message\" [ngClass]=\"normalizedType\" role=\"alert\">\n  <div class=\"info\">\n    <div class=\"alert-icon\">\n      <ng-content select=\"[alert-icon]\">\n        @switch (normalizedType) {\n          @case ('success') {\n            <svg class=\"icon-svg\" viewBox=\"0 0 24 24\">\n              <path fill=\"currentColor\" d=\"M9 16.2l-3.5-3.5L4 14l5 5 12-12-1.5-1.5z\"/>\n            </svg>\n          }\n          @case ('failure') {\n            <svg class=\"icon-svg\" viewBox=\"0 0 24 24\">\n              <path fill=\"currentColor\" d=\"M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm5 13.6L13.6 17 12 15.4 10.4 17 7 13.6 8.6 12 7 10.4 10.4 7 12 8.6 13.6 7 17 10.4 15.4 12 17 13.6z\"/>\n            </svg>\n          }\n          @case ('warning') {\n            <svg class=\"icon-svg\" viewBox=\"0 0 24 24\">\n              <path fill=\"currentColor\" d=\"M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z\"/>\n            </svg>\n          }\n          @default {\n            <svg class=\"icon-svg\" viewBox=\"0 0 24 24\">\n              <path fill=\"currentColor\" d=\"M12 2v20M2 12h20\"/>\n            </svg>\n          }\n        }\n      </ng-content>\n    </div>\n\n    <div class=\"alert-content\">\n      <ng-content>{{ message }}</ng-content>\n    </div>\n\n    <button *ngIf=\"dismissible\" type=\"button\" class=\"close-btn\" (click)=\"onDismiss()\" aria-label=\"Close\">\n      <svg viewBox=\"0 0 24 24\" class=\"cross-icon\">\n        <path fill=\"currentColor\" d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"/>\n      </svg>\n    </button>\n  </div>\n</div>\n\n",
+			styles: [":host{display:block}.form-submission-message{margin:8px 0;padding:10px 14px;border-radius:var(--radius-medium, 8px);position:relative;border:1px solid transparent}.form-submission-message.success{background-color:var(--fb-action-surface, #e0f2fe);color:var(--fb-action, #003566);border-color:#bae6fd}.form-submission-message.failure{background-color:#fee2e2;color:#991b1b;border-color:#fecaca}.form-submission-message.warning{background-color:#fef3c7;color:#92400e;border-color:#fde68a}.form-submission-message.info{background-color:#f1f5f9;color:#1e293b;border-color:#e2e8f0}.info{display:flex;align-items:center;gap:10px;width:100%}.alert-icon{display:flex;align-items:center;flex-shrink:0}.icon-svg{width:20px;height:20px}.alert-content{flex:1;font-size:13px;font-weight:500;line-height:1.4}.close-btn{background:transparent;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;color:inherit;opacity:.7}.close-btn:hover{opacity:1}.cross-icon{width:16px;height:16px}\n"]
+		}]
+	}],
+	ctorParameters: () => [{ type: i0.ChangeDetectorRef }, {
+		type: AlertService,
+		decorators: [{ type: Optional }]
+	}],
+	propDecorators: {
+		type: [{ type: Input }],
+		message: [{ type: Input }],
+		dismissible: [{ type: Input }],
+		autoSubscribeAlertService: [{ type: Input }],
+		dismiss: [{ type: Output }]
+	}
+});
 var PdfFontService = class PdfFontService {
 	fontLoadedPromise = null;
 	configurePdfMake(pdfMakeInstance) {
@@ -7469,6 +8889,6 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}]
 });
-export { AlertService, AmountToWordsPipe, ApiService, ApprovalScreenComponent, CommonScreenComponent, ConfigService, Constants, CustomDatePipe, CustomPaginatorIntl, CustomTimePipe, CustomTranslatePipe, DataTableComponent, DropDownComponent, EditColumnCheckPipe, EditColumnDropdownPipe, EditColumnTypePipe, ErrorHandlerService, FileUploadComponent, FormsComponent, FusionButtonComponent, GetValuePipe, GlobalValuesService, LoaderService, ModalComponent, MultiCheckboxComponent, MultipleFilterComponent, PaginationComponent, PdfFontService, PopoverComponent, ScrollService, SearchFilterComponent, SearchFilterPipe, SideScreenComponent, TabDataService, TotalColumSumPipe };
+export { AlertMessageComponent, AlertService, AmountToWordsPipe, ApiService, ApprovalScreenComponent, CommonScreenComponent, ConfigService, Constants, CustomDatePipe, CustomPaginatorIntl, CustomTimePipe, CustomTranslatePipe, DataTableComponent, DropDownComponent, EditColumnCheckPipe, EditColumnDropdownPipe, EditColumnTypePipe, ErrorHandlerService, FileUploadComponent, FormsComponent, FusionButtonComponent, FusionCardComponent, GetValuePipe, GlobalValuesService, LoaderService, ModalComponent, MultiCheckboxComponent, MultiSelectDropdownComponent, MultipleFilterComponent, PaginationComponent, PdfFontService, PopoverComponent, ScrollService, SearchFilterComponent, SearchFilterPipe, SideScreenComponent, TOAST_GLOBAL_CONFIG, TabDataService, ToastComponent, ToastService, TotalColumSumPipe, provideToastConfig };
 
 //# sourceMappingURL=rangertechnologies-fusion-ui.mjs.map