@osama_amireh/bayan-payroll-widgets-ui 2.0.6

package/fesm2022/osama_amireh-bayan-payroll-widgets-ui.mjs

@@ -0,0 +1,1659 @@
+import * as i0 from '@angular/core';
+import { Injectable, Pipe, input, ChangeDetectionStrategy, Component, output, computed, signal, inject, effect, ViewChild } from '@angular/core';
+import * as i1 from '@angular/common';
+import { CommonModule, DecimalPipe, DatePipe } from '@angular/common';
+import * as i1$2 from 'devextreme-angular';
+import { DxPopupModule, DxScrollViewModule, DxScrollViewComponent, DxTooltipModule } from 'devextreme-angular';
+import { finalize } from 'rxjs';
+import * as i1$1 from '@angular/common/http';
+import { faMoneyCheckDollarPen, faSitemap, faUserTie, faMedal, faCalendarAlt, faFileSignature, faUniversity, faCreditCard, faIslandTropical, faUser } from '@fortawesome/pro-light-svg-icons';
+import * as i1$3 from '@fortawesome/angular-fontawesome';
+import { FontAwesomeModule, FaIconComponent } from '@fortawesome/angular-fontawesome';
+import { faCircleInfo, faChevronDown, faChevronUp } from '@fortawesome/pro-solid-svg-icons';
+import { SkySectionDividerComponent, SkyScreenService, SkyDoughnutChartComponent } from '@skysoftware-co/sky-components-ui';
+import * as i2 from 'devextreme-angular/core';
+
+var Loans$2 = "Loans";
+var InstallmentStartEndDate$2 = "Installment start / end date";
+var JobInformation$2 = "Job information";
+var AdminUnit$2 = "Admin unit";
+var Position$2 = "Position";
+var Grade$2 = "Grade";
+var JoiningDate$2 = "Joining date";
+var BankInformation$2 = "Bank information";
+var Bank$2 = "Bank";
+var IBAN$2 = "IBAN";
+var AC$2 = "Account";
+var VacationBalance$2 = "Vacation balance";
+var TicketBalance$2 = "Ticket balance";
+var Tickets$2 = "Tickets";
+var Indemnity$2 = "Indemnity";
+var IndemnityDays$2 = "Indemnity days";
+var IndemnityAmount$2 = "Indemnity amount";
+var Adult$1 = "Adult";
+var TotalAmount$2 = "Total amount";
+var InstallmentAmount$2 = "Installment amount";
+var TotalPaid$2 = "Total paid";
+var RemainingAmount$2 = "Remaining amount";
+var Salary$2 = "Salary";
+var GrossSalary$2 = "Gross salary";
+var Basic$2 = "Basic";
+var ActualBasicSalary$2 = "Actual basic salary";
+var UnpaidVacations$2 = "Unpaid vacations";
+var Allowances$2 = "Allowances";
+var Deductions$2 = "Deductions";
+var ViewDetails$2 = "View details";
+var ActualBasicDetails$2 = "Actual basic details";
+var Attendance$2 = "Attendance";
+var PayMonth$2 = "Pay month";
+var SelectPayMonth$2 = "Select pay month";
+var PreviewPayslip$2 = "Preview payslip";
+var Export$2 = "Export";
+var Days$2 = "Days";
+var Day$2 = "Day";
+var Amount$2 = "Amount";
+var NetSalary$2 = "Net salary";
+var WorkingDays$2 = "Working days";
+var NoPayslipAvailableYet$2 = "No payslip available yet";
+var YouAreNotAllowedToViewThePayslip$2 = "You are not allowed to view the payslip";
+var AccountNumber$2 = "Account Number";
+var SalaryTransferDetails$2 = "Salary transfer details";
+var BankName$2 = "Bank name";
+var ExploreSalaryTransferDetails$2 = "Explore salary transfer details";
+var ViewMore$2 = "View more";
+var ViewLess$2 = "View less";
+var VacationTypeName$2 = "Vacation type";
+var Balance$2 = "Balance";
+var en = {
+	Loans: Loans$2,
+	InstallmentStartEndDate: InstallmentStartEndDate$2,
+	JobInformation: JobInformation$2,
+	AdminUnit: AdminUnit$2,
+	Position: Position$2,
+	Grade: Grade$2,
+	JoiningDate: JoiningDate$2,
+	BankInformation: BankInformation$2,
+	Bank: Bank$2,
+	IBAN: IBAN$2,
+	AC: AC$2,
+	VacationBalance: VacationBalance$2,
+	TicketBalance: TicketBalance$2,
+	Tickets: Tickets$2,
+	Indemnity: Indemnity$2,
+	IndemnityDays: IndemnityDays$2,
+	IndemnityAmount: IndemnityAmount$2,
+	Adult: Adult$1,
+	TotalAmount: TotalAmount$2,
+	InstallmentAmount: InstallmentAmount$2,
+	TotalPaid: TotalPaid$2,
+	RemainingAmount: RemainingAmount$2,
+	"Installments{{Value}}": "{{value}} installments",
+	Salary: Salary$2,
+	GrossSalary: GrossSalary$2,
+	Basic: Basic$2,
+	ActualBasicSalary: ActualBasicSalary$2,
+	UnpaidVacations: UnpaidVacations$2,
+	Allowances: Allowances$2,
+	Deductions: Deductions$2,
+	ViewDetails: ViewDetails$2,
+	ActualBasicDetails: ActualBasicDetails$2,
+	Attendance: Attendance$2,
+	PayMonth: PayMonth$2,
+	SelectPayMonth: SelectPayMonth$2,
+	PreviewPayslip: PreviewPayslip$2,
+	Export: Export$2,
+	Days: Days$2,
+	Day: Day$2,
+	Amount: Amount$2,
+	NetSalary: NetSalary$2,
+	WorkingDays: WorkingDays$2,
+	NoPayslipAvailableYet: NoPayslipAvailableYet$2,
+	YouAreNotAllowedToViewThePayslip: YouAreNotAllowedToViewThePayslip$2,
+	"PleaseContactYourAdminForAnyHelp.": "Please contact your admin for any help.",
+	AccountNumber: AccountNumber$2,
+	SalaryTransferDetails: SalaryTransferDetails$2,
+	BankName: BankName$2,
+	ExploreSalaryTransferDetails: ExploreSalaryTransferDetails$2,
+	ViewMore: ViewMore$2,
+	ViewLess: ViewLess$2,
+	VacationTypeName: VacationTypeName$2,
+	Balance: Balance$2
+};
+
+var AccountNumber$1 = "رقم الحساب";
+var SalaryTransferDetails$1 = "تفاصيل تحويل الراتب";
+var BankName$1 = "اسم البنك";
+var IBAN$1 = "رقم حساب البنك الدولي";
+var AC$1 = "الحساب";
+var AdminUnit$1 = "الوحدة الإدارية";
+var Position$1 = "الوظيفة";
+var Grade$1 = "الدرجة";
+var JoiningDate$1 = "تاريخ الانضمام";
+var JobInformation$1 = "معلومات الوظيفة";
+var BankInformation$1 = "معلومات البنك";
+var Bank$1 = "البنك";
+var ExploreSalaryTransferDetails$1 = "استعراض تفاصيل تحويل الراتب";
+var VacationBalance$1 = "أرصدة الإجازات";
+var ViewMore$1 = "عرض المزيد";
+var ViewLess$1 = "عرض أقل";
+var VacationTypeName$1 = "نوع الإجازة";
+var TicketBalance$1 = " أرصدة التذاكر";
+var Tickets$1 = "التذاكر";
+var Balance$1 = "الرصيد";
+var Indemnity$1 = "التعويض";
+var IndemnityDays$1 = "أيام التعويض";
+var IndemnityAmount$1 = "مبلغ التعويض";
+var Loans$1 = "القروض";
+var InstallmentStartEndDate$1 = "تاريخ بداية / ونهاية القسط";
+var TotalAmount$1 = "إجمالي المبلغ";
+var InstallmentAmount$1 = "مبلغ القسط";
+var TotalPaid$1 = "إجمالي المدفوع";
+var RemainingAmount$1 = "المبلغ المتبقي";
+var Salary$1 = "الراتب";
+var GrossSalary$1 = "الراتب الإجمالي";
+var Basic$1 = "الأساسي";
+var ActualBasicSalary$1 = "الراتب الفعلي";
+var UnpaidVacations$1 = "الإجازات غير المدفوعة";
+var Allowances$1 = "العلاوات";
+var Deductions$1 = "الاقتطاعات";
+var ViewDetails$1 = "عرض التفاصيل";
+var ActualBasicDetails$1 = "تفاصيل الأساسي الفعلي";
+var Attendance$1 = "الحضور";
+var PayMonth$1 = "شهر الراتب";
+var SelectPayMonth$1 = "اختر شهر الراتب";
+var PreviewPayslip$1 = "معاينة قسيمة الراتب";
+var Export$1 = "تصدير";
+var Days$1 = "الأيام";
+var Day$1 = "يوم";
+var Amount$1 = "المبلغ";
+var NetSalary$1 = "صافي الراتب";
+var WorkingDays$1 = "أيام العمل";
+var NoPayslipAvailableYet$1 = "لا توجد قسيمة راتب متاحة بعد";
+var YouAreNotAllowedToViewThePayslip$1 = "غير مسموح لك بعرض قسيمة الراتب";
+var BankBranch$1 = "فرع البنك";
+var ar = {
+	AccountNumber: AccountNumber$1,
+	SalaryTransferDetails: SalaryTransferDetails$1,
+	BankName: BankName$1,
+	IBAN: IBAN$1,
+	AC: AC$1,
+	AdminUnit: AdminUnit$1,
+	Position: Position$1,
+	Grade: Grade$1,
+	JoiningDate: JoiningDate$1,
+	JobInformation: JobInformation$1,
+	BankInformation: BankInformation$1,
+	Bank: Bank$1,
+	ExploreSalaryTransferDetails: ExploreSalaryTransferDetails$1,
+	VacationBalance: VacationBalance$1,
+	ViewMore: ViewMore$1,
+	ViewLess: ViewLess$1,
+	VacationTypeName: VacationTypeName$1,
+	TicketBalance: TicketBalance$1,
+	Tickets: Tickets$1,
+	Balance: Balance$1,
+	Indemnity: Indemnity$1,
+	IndemnityDays: IndemnityDays$1,
+	IndemnityAmount: IndemnityAmount$1,
+	Loans: Loans$1,
+	InstallmentStartEndDate: InstallmentStartEndDate$1,
+	TotalAmount: TotalAmount$1,
+	InstallmentAmount: InstallmentAmount$1,
+	TotalPaid: TotalPaid$1,
+	RemainingAmount: RemainingAmount$1,
+	"Installments{{value}}": "{{value}} اقساط",
+	Salary: Salary$1,
+	GrossSalary: GrossSalary$1,
+	Basic: Basic$1,
+	ActualBasicSalary: ActualBasicSalary$1,
+	UnpaidVacations: UnpaidVacations$1,
+	Allowances: Allowances$1,
+	Deductions: Deductions$1,
+	ViewDetails: ViewDetails$1,
+	ActualBasicDetails: ActualBasicDetails$1,
+	Attendance: Attendance$1,
+	PayMonth: PayMonth$1,
+	SelectPayMonth: SelectPayMonth$1,
+	PreviewPayslip: PreviewPayslip$1,
+	Export: Export$1,
+	Days: Days$1,
+	Day: Day$1,
+	Amount: Amount$1,
+	NetSalary: NetSalary$1,
+	WorkingDays: WorkingDays$1,
+	NoPayslipAvailableYet: NoPayslipAvailableYet$1,
+	YouAreNotAllowedToViewThePayslip: YouAreNotAllowedToViewThePayslip$1,
+	"PleaseContactYourAdminForAnyHelp.": "يرجى التواصل مع مسؤول النظام لأي مساعدة.",
+	BankBranch: BankBranch$1
+};
+
+var Loans = "Prets";
+var InstallmentStartEndDate = "Date de debut / fin de versement";
+var TotalAmount = "Montant total";
+var InstallmentAmount = "Montant du versement";
+var TotalPaid = "Total paye";
+var RemainingAmount = "Montant restant";
+var JobInformation = "Informations du poste";
+var AdminUnit = "Unite administrative";
+var Position = "Poste";
+var Grade = "Grade";
+var JoiningDate = "Date d'embauche";
+var BankInformation = "Informations bancaires";
+var Bank = "Banque";
+var IBAN = "IBAN";
+var AC = "Compte";
+var VacationBalance = "Solde de conges";
+var TicketBalance = "Solde des billets";
+var Tickets = "Billets";
+var Indemnity = "Indemnite";
+var IndemnityDays = "Jours d'indemnite";
+var IndemnityAmount = "Montant de l'indemnite";
+var Adult = "Adulte";
+var Salary = "Salaire";
+var GrossSalary = "Salaire brut";
+var Basic = "Basique";
+var ActualBasicSalary = "Salaire de base réel";
+var UnpaidVacations = "Congés non payés";
+var Allowances = "Allocations";
+var Deductions = "Déductions";
+var ViewDetails = "Voir les détails";
+var ActualBasicDetails = "Détails du salaire de base réel";
+var Attendance = "Présence";
+var PayMonth = "Mois de paie";
+var SelectPayMonth = "Selectionner le mois de paie";
+var PreviewPayslip = "Aperçu de la fiche de paie";
+var Export = "Exporter";
+var Days = "Jours";
+var Day = "Jour";
+var Amount = "Montant";
+var NetSalary = "Salaire net";
+var WorkingDays = "Jours de travail";
+var NoPayslipAvailableYet = "Aucune fiche de paie disponible pour le momentt";
+var YouAreNotAllowedToViewThePayslip = "Vous n'êtes pas autorisé à consulter la fiche de paie !";
+var AccountNumber = "Numéro de compte";
+var SalaryTransferDetails = "Détails du transfert de salaire";
+var BankName = "Nom de la banque";
+var ExploreSalaryTransferDetails = "Explorer les détails du transfert de salaire";
+var ViewMore = "Voir plus";
+var ViewLess = "Voir moins";
+var VacationTypeName = "Type de congé";
+var Balance = "Solde";
+var BankBranch = "Agence bancaire";
+var fr = {
+	Loans: Loans,
+	InstallmentStartEndDate: InstallmentStartEndDate,
+	TotalAmount: TotalAmount,
+	InstallmentAmount: InstallmentAmount,
+	TotalPaid: TotalPaid,
+	RemainingAmount: RemainingAmount,
+	"Installments{{value}}": "{{value}} versements",
+	JobInformation: JobInformation,
+	AdminUnit: AdminUnit,
+	Position: Position,
+	Grade: Grade,
+	JoiningDate: JoiningDate,
+	BankInformation: BankInformation,
+	Bank: Bank,
+	IBAN: IBAN,
+	AC: AC,
+	VacationBalance: VacationBalance,
+	TicketBalance: TicketBalance,
+	Tickets: Tickets,
+	Indemnity: Indemnity,
+	IndemnityDays: IndemnityDays,
+	IndemnityAmount: IndemnityAmount,
+	Adult: Adult,
+	Salary: Salary,
+	GrossSalary: GrossSalary,
+	Basic: Basic,
+	ActualBasicSalary: ActualBasicSalary,
+	UnpaidVacations: UnpaidVacations,
+	Allowances: Allowances,
+	Deductions: Deductions,
+	ViewDetails: ViewDetails,
+	ActualBasicDetails: ActualBasicDetails,
+	Attendance: Attendance,
+	PayMonth: PayMonth,
+	SelectPayMonth: SelectPayMonth,
+	PreviewPayslip: PreviewPayslip,
+	Export: Export,
+	Days: Days,
+	Day: Day,
+	Amount: Amount,
+	NetSalary: NetSalary,
+	WorkingDays: WorkingDays,
+	NoPayslipAvailableYet: NoPayslipAvailableYet,
+	YouAreNotAllowedToViewThePayslip: YouAreNotAllowedToViewThePayslip,
+	"PleaseContactYourAdminForAnyHelp.": "Veuillez contacter votre administrateur pour toute aide.",
+	AccountNumber: AccountNumber,
+	SalaryTransferDetails: SalaryTransferDetails,
+	BankName: BankName,
+	ExploreSalaryTransferDetails: ExploreSalaryTransferDetails,
+	ViewMore: ViewMore,
+	ViewLess: ViewLess,
+	VacationTypeName: VacationTypeName,
+	Balance: Balance,
+	BankBranch: BankBranch
+};
+
+const BUILT_IN_LEXICONS = { en, ar, fr };
+class PayrollTranslateService {
+    currentLanguage = 'en';
+    lexicon = {};
+    setLanguage(language) {
+        this.currentLanguage = language;
+    }
+    getLanguage() {
+        return this.currentLanguage;
+    }
+    setLexicon(lexicon) {
+        this.lexicon = lexicon;
+    }
+    getLexicon() {
+        return this.lexicon;
+    }
+    translateBuiltIn(key) {
+        if (!key)
+            return '';
+        const builtIn = BUILT_IN_LEXICONS[this.currentLanguage] || {};
+        const foundKey = Object.keys(builtIn).find(k => k.toLowerCase() === key.toLowerCase());
+        return foundKey ? builtIn[foundKey] : key;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: PayrollTranslateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: PayrollTranslateService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: PayrollTranslateService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class PayrollTranslatePipe {
+    payrollTranslateService;
+    constructor(payrollTranslateService) {
+        this.payrollTranslateService = payrollTranslateService;
+    }
+    transform(key) {
+        if (!key)
+            return '';
+        key = this.payrollTranslateService.translateBuiltIn(key);
+        const lexicon = this.payrollTranslateService.getLexicon();
+        let foundKey = Object.keys(lexicon).find(k => k.toLowerCase() === key.toLowerCase());
+        if (foundKey)
+            return lexicon[foundKey];
+        const arrKey = key.split(' ');
+        let keyValue = '';
+        for (let i = 0; i < arrKey.length; i++) {
+            if (i !== 0)
+                keyValue += ' ';
+            foundKey = Object.keys(lexicon).find(k => k.toLowerCase() === arrKey[i].toLowerCase());
+            if (foundKey) {
+                keyValue += lexicon[foundKey];
+            }
+            else {
+                keyValue += arrKey[i];
+            }
+        }
+        return keyValue;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: PayrollTranslatePipe, deps: [{ token: PayrollTranslateService }], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.17", ngImport: i0, type: PayrollTranslatePipe, isStandalone: true, name: "PayrollTranslate" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: PayrollTranslatePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'PayrollTranslate',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: PayrollTranslateService }] });
+
+class LoanCardComponent {
+    loan = input.required(...(ngDevMode ? [{ debugName: "loan" }] : /* istanbul ignore next */ []));
+    currencyCode = input('', ...(ngDevMode ? [{ debugName: "currencyCode" }] : /* istanbul ignore next */ []));
+    cardContainerClass = input('p-3 card-shadow h-100 border border-1 rounded-2', ...(ngDevMode ? [{ debugName: "cardContainerClass" }] : /* istanbul ignore next */ []));
+    installRangeLabelClass = input('field-secondary-label-sm', ...(ngDevMode ? [{ debugName: "installRangeLabelClass" }] : /* istanbul ignore next */ []));
+    lineClass = input('fs-12 mb-2', ...(ngDevMode ? [{ debugName: "lineClass" }] : /* istanbul ignore next */ []));
+    amountLabelClass = input('field-secondary-label-sm', ...(ngDevMode ? [{ debugName: "amountLabelClass" }] : /* istanbul ignore next */ []));
+    currencyCodeClass = input('text-secondary fs-10', ...(ngDevMode ? [{ debugName: "currencyCodeClass" }] : /* istanbul ignore next */ []));
+    amountValueClass = input('text-dark-gray mx-1 fs-14', ...(ngDevMode ? [{ debugName: "amountValueClass" }] : /* istanbul ignore next */ []));
+    totalPaidClass = input('text-success fs-12', ...(ngDevMode ? [{ debugName: "totalPaidClass" }] : /* istanbul ignore next */ []));
+    remainingInstallmentClass = input('field-secondary-label-sm', ...(ngDevMode ? [{ debugName: "remainingInstallmentClass" }] : /* istanbul ignore next */ []));
+    loanTitleClass = input('text-dark fs-20 mb-2', ...(ngDevMode ? [{ debugName: "loanTitleClass" }] : /* istanbul ignore next */ []));
+    formatAmount = input((value) => value.toString(), ...(ngDevMode ? [{ debugName: "formatAmount" }] : /* istanbul ignore next */ []));
+    remainingInstallmentsText = input((count) => count.toString(), ...(ngDevMode ? [{ debugName: "remainingInstallmentsText" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoanCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: LoanCardComponent, isStandalone: true, selector: "payroll-loan-card", inputs: { loan: { classPropertyName: "loan", publicName: "loan", isSignal: true, isRequired: true, transformFunction: null }, currencyCode: { classPropertyName: "currencyCode", publicName: "currencyCode", isSignal: true, isRequired: false, transformFunction: null }, cardContainerClass: { classPropertyName: "cardContainerClass", publicName: "cardContainerClass", isSignal: true, isRequired: false, transformFunction: null }, installRangeLabelClass: { classPropertyName: "installRangeLabelClass", publicName: "installRangeLabelClass", isSignal: true, isRequired: false, transformFunction: null }, lineClass: { classPropertyName: "lineClass", publicName: "lineClass", isSignal: true, isRequired: false, transformFunction: null }, amountLabelClass: { classPropertyName: "amountLabelClass", publicName: "amountLabelClass", isSignal: true, isRequired: false, transformFunction: null }, currencyCodeClass: { classPropertyName: "currencyCodeClass", publicName: "currencyCodeClass", isSignal: true, isRequired: false, transformFunction: null }, amountValueClass: { classPropertyName: "amountValueClass", publicName: "amountValueClass", isSignal: true, isRequired: false, transformFunction: null }, totalPaidClass: { classPropertyName: "totalPaidClass", publicName: "totalPaidClass", isSignal: true, isRequired: false, transformFunction: null }, remainingInstallmentClass: { classPropertyName: "remainingInstallmentClass", publicName: "remainingInstallmentClass", isSignal: true, isRequired: false, transformFunction: null }, loanTitleClass: { classPropertyName: "loanTitleClass", publicName: "loanTitleClass", isSignal: true, isRequired: false, transformFunction: null }, formatAmount: { classPropertyName: "formatAmount", publicName: "formatAmount", isSignal: true, isRequired: false, transformFunction: null }, remainingInstallmentsText: { classPropertyName: "remainingInstallmentsText", publicName: "remainingInstallmentsText", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div [class]=\"cardContainerClass()\">\n  <p [class]=\"loanTitleClass()\">{{ loan().LoanTypeName }}</p>\n\n  <p [class]=\"lineClass()\">\n    <span [class]=\"installRangeLabelClass()\">{{ 'InstallmentStartEndDate' | PayrollTranslate }}:</span>\n    <span class=\"text-dark-gray mx-1 fs-14\">{{ loan().FirstInstallmentMonth }} - {{ loan().LastInstallmentMonth }}</span>\n  </p>\n\n  <p [class]=\"lineClass()\">\n    <span [class]=\"amountLabelClass()\">{{ 'TotalAmount' | PayrollTranslate }}</span>\n    <span [class]=\"currencyCodeClass()\">({{ currencyCode() }}):</span>\n    <span [class]=\"amountValueClass()\">{{ formatAmount()(loan().LoanAmount) }}</span>\n  </p>\n\n  <p [class]=\"lineClass()\">\n    <span [class]=\"amountLabelClass()\">{{ 'InstallmentAmount' | PayrollTranslate }}</span>\n    <span [class]=\"currencyCodeClass()\">({{ currencyCode() }}):</span>\n    <span [class]=\"amountValueClass()\">{{ formatAmount()(loan().InstallmentAmount) }}</span>\n    <span [class]=\"totalPaidClass()\">({{ 'TotalPaid' | PayrollTranslate }}: {{ formatAmount()(loan().PaidAmount) }})</span>\n  </p>\n\n  <p [class]=\"lineClass()\">\n    <span [class]=\"amountLabelClass()\">{{ 'RemainingAmount' | PayrollTranslate }}</span>\n    <span [class]=\"currencyCodeClass()\">({{ currencyCode() }}):</span>\n    <span [class]=\"amountValueClass()\">{{ formatAmount()(loan().RemainingAmount) }}</span>\n    <span [class]=\"remainingInstallmentClass()\">({{ remainingInstallmentsText()(loan().RemainingInstallmentsCount) }})</span>\n  </p>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: PayrollTranslatePipe, name: "PayrollTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoanCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'payroll-loan-card', standalone: true, imports: [CommonModule, PayrollTranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"cardContainerClass()\">\n  <p [class]=\"loanTitleClass()\">{{ loan().LoanTypeName }}</p>\n\n  <p [class]=\"lineClass()\">\n    <span [class]=\"installRangeLabelClass()\">{{ 'InstallmentStartEndDate' | PayrollTranslate }}:</span>\n    <span class=\"text-dark-gray mx-1 fs-14\">{{ loan().FirstInstallmentMonth }} - {{ loan().LastInstallmentMonth }}</span>\n  </p>\n\n  <p [class]=\"lineClass()\">\n    <span [class]=\"amountLabelClass()\">{{ 'TotalAmount' | PayrollTranslate }}</span>\n    <span [class]=\"currencyCodeClass()\">({{ currencyCode() }}):</span>\n    <span [class]=\"amountValueClass()\">{{ formatAmount()(loan().LoanAmount) }}</span>\n  </p>\n\n  <p [class]=\"lineClass()\">\n    <span [class]=\"amountLabelClass()\">{{ 'InstallmentAmount' | PayrollTranslate }}</span>\n    <span [class]=\"currencyCodeClass()\">({{ currencyCode() }}):</span>\n    <span [class]=\"amountValueClass()\">{{ formatAmount()(loan().InstallmentAmount) }}</span>\n    <span [class]=\"totalPaidClass()\">({{ 'TotalPaid' | PayrollTranslate }}: {{ formatAmount()(loan().PaidAmount) }})</span>\n  </p>\n\n  <p [class]=\"lineClass()\">\n    <span [class]=\"amountLabelClass()\">{{ 'RemainingAmount' | PayrollTranslate }}</span>\n    <span [class]=\"currencyCodeClass()\">({{ currencyCode() }}):</span>\n    <span [class]=\"amountValueClass()\">{{ formatAmount()(loan().RemainingAmount) }}</span>\n    <span [class]=\"remainingInstallmentClass()\">({{ remainingInstallmentsText()(loan().RemainingInstallmentsCount) }})</span>\n  </p>\n</div>\n" }]
+        }], propDecorators: { loan: [{ type: i0.Input, args: [{ isSignal: true, alias: "loan", required: true }] }], currencyCode: [{ type: i0.Input, args: [{ isSignal: true, alias: "currencyCode", required: false }] }], cardContainerClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "cardContainerClass", required: false }] }], installRangeLabelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "installRangeLabelClass", required: false }] }], lineClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "lineClass", required: false }] }], amountLabelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "amountLabelClass", required: false }] }], currencyCodeClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "currencyCodeClass", required: false }] }], amountValueClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "amountValueClass", required: false }] }], totalPaidClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalPaidClass", required: false }] }], remainingInstallmentClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "remainingInstallmentClass", required: false }] }], loanTitleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "loanTitleClass", required: false }] }], formatAmount: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatAmount", required: false }] }], remainingInstallmentsText: [{ type: i0.Input, args: [{ isSignal: true, alias: "remainingInstallmentsText", required: false }] }] } });
+
+class LoanPaginationComponent {
+    totalPages = input(0, ...(ngDevMode ? [{ debugName: "totalPages" }] : /* istanbul ignore next */ []));
+    currentPage = input(0, ...(ngDevMode ? [{ debugName: "currentPage" }] : /* istanbul ignore next */ []));
+    navContainerClass = input('d-flex justify-content-center mt-3', ...(ngDevMode ? [{ debugName: "navContainerClass" }] : /* istanbul ignore next */ []));
+    navListClass = input('pagination mb-1', ...(ngDevMode ? [{ debugName: "navListClass" }] : /* istanbul ignore next */ []));
+    pageItemClass = input('page-item page-number mx-3', ...(ngDevMode ? [{ debugName: "pageItemClass" }] : /* istanbul ignore next */ []));
+    arrowItemClass = input('page-item arrow', ...(ngDevMode ? [{ debugName: "arrowItemClass" }] : /* istanbul ignore next */ []));
+    pageLinkClass = input('page-link rounded-circle', ...(ngDevMode ? [{ debugName: "pageLinkClass" }] : /* istanbul ignore next */ []));
+    arrowActiveClass = input('text-primary', ...(ngDevMode ? [{ debugName: "arrowActiveClass" }] : /* istanbul ignore next */ []));
+    previousClicked = output();
+    nextClicked = output();
+    pageClicked = output();
+    blurButton(event) {
+        event.target.closest('button')?.blur();
+    }
+    onPreviousClick(event) {
+        this.blurButton(event);
+        this.previousClicked.emit();
+    }
+    onNextClick(event) {
+        this.blurButton(event);
+        this.nextClicked.emit();
+    }
+    onPageClick(page, event) {
+        this.blurButton(event);
+        this.pageClicked.emit(page);
+    }
+    pages = computed(() => {
+        const half = Math.floor(5 / 2);
+        let start = Math.max(0, this.currentPage() - half);
+        let end = start + 4;
+        if (end >= this.totalPages()) {
+            end = this.totalPages() - 1;
+            start = Math.max(0, end - 4);
+        }
+        return Array.from({ length: end - start + 1 }, (_, i) => start + i);
+    }, ...(ngDevMode ? [{ debugName: "pages" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoanPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LoanPaginationComponent, isStandalone: true, selector: "payroll-loan-pagination", inputs: { totalPages: { classPropertyName: "totalPages", publicName: "totalPages", isSignal: true, isRequired: false, transformFunction: null }, currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: false, transformFunction: null }, navContainerClass: { classPropertyName: "navContainerClass", publicName: "navContainerClass", isSignal: true, isRequired: false, transformFunction: null }, navListClass: { classPropertyName: "navListClass", publicName: "navListClass", isSignal: true, isRequired: false, transformFunction: null }, pageItemClass: { classPropertyName: "pageItemClass", publicName: "pageItemClass", isSignal: true, isRequired: false, transformFunction: null }, arrowItemClass: { classPropertyName: "arrowItemClass", publicName: "arrowItemClass", isSignal: true, isRequired: false, transformFunction: null }, pageLinkClass: { classPropertyName: "pageLinkClass", publicName: "pageLinkClass", isSignal: true, isRequired: false, transformFunction: null }, arrowActiveClass: { classPropertyName: "arrowActiveClass", publicName: "arrowActiveClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { previousClicked: "previousClicked", nextClicked: "nextClicked", pageClicked: "pageClicked" }, ngImport: i0, template: "@if (totalPages() > 1) {\n  <div [class]=\"navContainerClass()\">\n    <nav aria-label=\"Loan pagination\">\n      <ul [class]=\"navListClass()\">\n        <li [class]=\"arrowItemClass()\">\n          <button\n            type=\"button\"\n            [ngClass]=\"[pageLinkClass(), currentPage() === 0 ? 'disabled' : arrowActiveClass()]\"\n            [disabled]=\"currentPage() === 0\"\n            (click)=\"onPreviousClick($event)\"\n          >\n            <span aria-hidden=\"true\" class=\"text-center\">&lt;</span>\n          </button>\n        </li>\n\n        @for (page of pages(); track page) {\n          <li [class]=\"pageItemClass()\" [class.active]=\"currentPage() === page\">\n            <button type=\"button\" [class]=\"pageLinkClass()\" (click)=\"onPageClick(page, $event)\">{{ page + 1 }}</button>\n          </li>\n        }\n\n        <li [class]=\"arrowItemClass()\">\n          <button\n            type=\"button\"\n            [ngClass]=\"[pageLinkClass(), currentPage() === totalPages() - 1 ? 'disabled' : arrowActiveClass()]\"\n            [disabled]=\"currentPage() === totalPages() - 1\"\n            (click)=\"onNextClick($event)\"\n          >\n            <span aria-hidden=\"true\" class=\"text-center\">&gt;</span>\n          </button>\n        </li>\n      </ul>\n    </nav>\n  </div>\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoanPaginationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'payroll-loan-pagination', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (totalPages() > 1) {\n  <div [class]=\"navContainerClass()\">\n    <nav aria-label=\"Loan pagination\">\n      <ul [class]=\"navListClass()\">\n        <li [class]=\"arrowItemClass()\">\n          <button\n            type=\"button\"\n            [ngClass]=\"[pageLinkClass(), currentPage() === 0 ? 'disabled' : arrowActiveClass()]\"\n            [disabled]=\"currentPage() === 0\"\n            (click)=\"onPreviousClick($event)\"\n          >\n            <span aria-hidden=\"true\" class=\"text-center\">&lt;</span>\n          </button>\n        </li>\n\n        @for (page of pages(); track page) {\n          <li [class]=\"pageItemClass()\" [class.active]=\"currentPage() === page\">\n            <button type=\"button\" [class]=\"pageLinkClass()\" (click)=\"onPageClick(page, $event)\">{{ page + 1 }}</button>\n          </li>\n        }\n\n        <li [class]=\"arrowItemClass()\">\n          <button\n            type=\"button\"\n            [ngClass]=\"[pageLinkClass(), currentPage() === totalPages() - 1 ? 'disabled' : arrowActiveClass()]\"\n            [disabled]=\"currentPage() === totalPages() - 1\"\n            (click)=\"onNextClick($event)\"\n          >\n            <span aria-hidden=\"true\" class=\"text-center\">&gt;</span>\n          </button>\n        </li>\n      </ul>\n    </nav>\n  </div>\n}\n" }]
+        }], propDecorators: { totalPages: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalPages", required: false }] }], currentPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPage", required: false }] }], navContainerClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "navContainerClass", required: false }] }], navListClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "navListClass", required: false }] }], pageItemClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageItemClass", required: false }] }], arrowItemClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "arrowItemClass", required: false }] }], pageLinkClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageLinkClass", required: false }] }], arrowActiveClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "arrowActiveClass", required: false }] }], previousClicked: [{ type: i0.Output, args: ["previousClicked"] }], nextClicked: [{ type: i0.Output, args: ["nextClicked"] }], pageClicked: [{ type: i0.Output, args: ["pageClicked"] }] } });
+
+class CommonMethods {
+    translateService;
+    constructor(translateService) {
+        this.translateService = translateService;
+    }
+    currencyDecimalFormat(value, currencyDecimalsNumber) {
+        const currencyDecimalsString = `1.${currencyDecimalsNumber}-${currencyDecimalsNumber}`;
+        const languageCode = this.translateService.getLanguage();
+        const decimalPipe = new DecimalPipe(languageCode === 'fr' ? 'fr-FR' : 'en-US');
+        if (languageCode === 'fr') {
+            return decimalPipe.transform(value, currencyDecimalsString, 'fr-FR');
+        }
+        return decimalPipe.transform(value, currencyDecimalsString);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: CommonMethods, deps: [{ token: PayrollTranslateService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: CommonMethods, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: CommonMethods, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: PayrollTranslateService }] });
+
+class PayrollSelfWidgetsService {
+    http;
+    constructor(http) {
+        this.http = http;
+    }
+    headers = { 'api-version': '1' };
+    getLoans(baseUrl) {
+        return this.http.get(`${baseUrl}/payroll/widgets/me/loans`, {
+            headers: this.headers,
+        });
+    }
+    getPayslipJobInfo(baseUrl, payMonth) {
+        return this.http.get(`${baseUrl}/payroll/widgets/me/payslip/${payMonth}/job-information`, {
+            headers: this.headers,
+        });
+    }
+    getPayslipBankInformation(baseUrl, payMonth) {
+        return this.http.get(`${baseUrl}/payroll/widgets/me/payslip/${payMonth}/bank-transfers`, {
+            headers: this.headers,
+        });
+    }
+    getPayslipVacationBalances(baseUrl, payMonth) {
+        return this.http.get(`${baseUrl}/payroll/widgets/me/payslip/${payMonth}/vacation-balances`, {
+            headers: this.headers,
+        });
+    }
+    getPayslipTicketBalances(baseUrl, payMonth) {
+        return this.http.get(`${baseUrl}/payroll/widgets/me/payslip/${payMonth}/ticket-balances`, {
+            headers: this.headers,
+        });
+    }
+    getPayslipIndemnity(baseUrl, payMonth) {
+        return this.http.get(`${baseUrl}/payroll/widgets/me/payslip/${payMonth}/indemnity`, {
+            headers: this.headers,
+        });
+    }
+    getPayslipDetails(baseUrl, payMonth) {
+        return this.http.get(`${baseUrl}/payroll/widgets/me/payslip/${payMonth}`, {
+            headers: this.headers,
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: PayrollSelfWidgetsService, deps: [{ token: i1$1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: PayrollSelfWidgetsService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: PayrollSelfWidgetsService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: i1$1.HttpClient }] });
+
+class MyLoansPopupWidgetComponent {
+    popupVisible = input(false, ...(ngDevMode ? [{ debugName: "popupVisible" }] : /* istanbul ignore next */ []));
+    internalPopupVisible = signal(false, ...(ngDevMode ? [{ debugName: "internalPopupVisible" }] : /* istanbul ignore next */ []));
+    loanDetails = signal([], ...(ngDevMode ? [{ debugName: "loanDetails" }] : /* istanbul ignore next */ []));
+    baseUrl = input('', ...(ngDevMode ? [{ debugName: "baseUrl" }] : /* istanbul ignore next */ []));
+    currencyCode = input('', ...(ngDevMode ? [{ debugName: "currencyCode" }] : /* istanbul ignore next */ []));
+    currencyDecimals = input(2, ...(ngDevMode ? [{ debugName: "currencyDecimals" }] : /* istanbul ignore next */ []));
+    popupWidth = input(580, ...(ngDevMode ? [{ debugName: "popupWidth" }] : /* istanbul ignore next */ []));
+    popupHeight = input('auto', ...(ngDevMode ? [{ debugName: "popupHeight" }] : /* istanbul ignore next */ []));
+    popupTitleKey = input('Loans', ...(ngDevMode ? [{ debugName: "popupTitleKey" }] : /* istanbul ignore next */ []));
+    popupDragEnabled = input(false, ...(ngDevMode ? [{ debugName: "popupDragEnabled" }] : /* istanbul ignore next */ []));
+    popupShadingColor = input('rgba(0,0,0,0.4)', ...(ngDevMode ? [{ debugName: "popupShadingColor" }] : /* istanbul ignore next */ []));
+    contentContainerClass = input('mx-4 mt-2', ...(ngDevMode ? [{ debugName: "contentContainerClass" }] : /* istanbul ignore next */ []));
+    noPaginationContainerClass = input('mb-2', ...(ngDevMode ? [{ debugName: "noPaginationContainerClass" }] : /* istanbul ignore next */ []));
+    // Loan Card Classes
+    cardContainerClass = input('p-3 card-shadow h-100 border border-1 rounded-2', ...(ngDevMode ? [{ debugName: "cardContainerClass" }] : /* istanbul ignore next */ []));
+    loanTitleClass = input('text-dark fs-20 mb-2', ...(ngDevMode ? [{ debugName: "loanTitleClass" }] : /* istanbul ignore next */ []));
+    installRangeLabelClass = input('field-secondary-label-sm', ...(ngDevMode ? [{ debugName: "installRangeLabelClass" }] : /* istanbul ignore next */ []));
+    lineClass = input('fs-12 mb-2', ...(ngDevMode ? [{ debugName: "lineClass" }] : /* istanbul ignore next */ []));
+    amountLabelClass = input('field-secondary-label-sm', ...(ngDevMode ? [{ debugName: "amountLabelClass" }] : /* istanbul ignore next */ []));
+    currencyCodeClass = input('text-secondary fs-10', ...(ngDevMode ? [{ debugName: "currencyCodeClass" }] : /* istanbul ignore next */ []));
+    amountValueClass = input('text-dark-gray mx-1 fs-14', ...(ngDevMode ? [{ debugName: "amountValueClass" }] : /* istanbul ignore next */ []));
+    totalPaidClass = input('text-success fs-12', ...(ngDevMode ? [{ debugName: "totalPaidClass" }] : /* istanbul ignore next */ []));
+    remainingInstallmentClass = input('field-secondary-label-sm', ...(ngDevMode ? [{ debugName: "remainingInstallmentClass" }] : /* istanbul ignore next */ []));
+    // Loan Pagination Classes
+    navContainerClass = input('d-flex justify-content-center mt-3', ...(ngDevMode ? [{ debugName: "navContainerClass" }] : /* istanbul ignore next */ []));
+    navListClass = input('pagination mb-1', ...(ngDevMode ? [{ debugName: "navListClass" }] : /* istanbul ignore next */ []));
+    pageItemClass = input('page-item page-number mx-3', ...(ngDevMode ? [{ debugName: "pageItemClass" }] : /* istanbul ignore next */ []));
+    arrowItemClass = input('page-item arrow', ...(ngDevMode ? [{ debugName: "arrowItemClass" }] : /* istanbul ignore next */ []));
+    pageLinkClass = input('page-link rounded-circle', ...(ngDevMode ? [{ debugName: "pageLinkClass" }] : /* istanbul ignore next */ []));
+    popupVisibleChange = output();
+    closePopupClickHandler = output();
+    isLoadingChanged = output();
+    currentPage = signal(0, ...(ngDevMode ? [{ debugName: "currentPage" }] : /* istanbul ignore next */ []));
+    pageSize = 1;
+    hasLoadedLoans = false;
+    isLoading = false;
+    pendingOpen = false;
+    employeeLoans = computed(() => {
+        const startIndex = this.currentPage() * this.pageSize;
+        return this.loanDetails().slice(startIndex, startIndex + this.pageSize);
+    }, ...(ngDevMode ? [{ debugName: "employeeLoans" }] : /* istanbul ignore next */ []));
+    translateService = inject(PayrollTranslatePipe);
+    commonMethods = inject(CommonMethods);
+    payrollWidgetsService = inject(PayrollSelfWidgetsService);
+    constructor() {
+        effect(() => {
+            const visible = this.popupVisible();
+            if (!visible) {
+                this.pendingOpen = false;
+                this.internalPopupVisible.set(false);
+                return;
+            }
+            this.requestOpenPopup();
+        });
+    }
+    onPopupClose() {
+        this.pendingOpen = false;
+        this.internalPopupVisible.set(false);
+        this.popupVisibleChange.emit(false);
+        this.closePopupClickHandler.emit();
+        this.currentPage.set(0);
+    }
+    requestOpenPopup() {
+        this.pendingOpen = true;
+        if (this.loanDetails().length > 0 || this.hasLoadedLoans) {
+            this.internalPopupVisible.set(true);
+            return;
+        }
+        if (this.isLoading || !this.baseUrl()) {
+            return;
+        }
+        this.isLoading = true;
+        this.isLoadingChanged.emit(true);
+        this.payrollWidgetsService
+            .getLoans(this.baseUrl())
+            .pipe(finalize(() => {
+            this.isLoading = false;
+            this.isLoadingChanged.emit(false);
+            if (this.pendingOpen && this.hasLoadedLoans) {
+                this.internalPopupVisible.set(true);
+            }
+        }))
+            .subscribe({
+            next: (response) => {
+                this.loanDetails.set(response.ResponseData ?? []);
+                this.hasLoadedLoans = true;
+            },
+            error: () => {
+                this.pendingOpen = false;
+                this.loanDetails.set([]);
+            },
+        });
+    }
+    goToPage(pageIndex) {
+        if (pageIndex >= 0 && pageIndex < this.loanDetails().length) {
+            this.currentPage.set(pageIndex);
+        }
+    }
+    goToPreviousPage() {
+        if (this.currentPage() > 0) {
+            this.currentPage.update(value => value - 1);
+        }
+    }
+    goToNextPage() {
+        if (this.currentPage() < this.loanDetails().length - 1) {
+            this.currentPage.update(value => value + 1);
+        }
+    }
+    currencyFormat(value) {
+        return this.commonMethods.currencyDecimalFormat(value, this.currencyDecimals()) ?? '0';
+    }
+    getRemainingInstallment(installmentValue) {
+        const translated = this.translateService.transform('Installments{{value}}');
+        return translated.replace('{{value}}', `${String(installmentValue)}`);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: MyLoansPopupWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: MyLoansPopupWidgetComponent, isStandalone: true, selector: "payroll-my-loans-popup", inputs: { popupVisible: { classPropertyName: "popupVisible", publicName: "popupVisible", isSignal: true, isRequired: false, transformFunction: null }, baseUrl: { classPropertyName: "baseUrl", publicName: "baseUrl", isSignal: true, isRequired: false, transformFunction: null }, currencyCode: { classPropertyName: "currencyCode", publicName: "currencyCode", isSignal: true, isRequired: false, transformFunction: null }, currencyDecimals: { classPropertyName: "currencyDecimals", publicName: "currencyDecimals", isSignal: true, isRequired: false, transformFunction: null }, popupWidth: { classPropertyName: "popupWidth", publicName: "popupWidth", isSignal: true, isRequired: false, transformFunction: null }, popupHeight: { classPropertyName: "popupHeight", publicName: "popupHeight", isSignal: true, isRequired: false, transformFunction: null }, popupTitleKey: { classPropertyName: "popupTitleKey", publicName: "popupTitleKey", isSignal: true, isRequired: false, transformFunction: null }, popupDragEnabled: { classPropertyName: "popupDragEnabled", publicName: "popupDragEnabled", isSignal: true, isRequired: false, transformFunction: null }, popupShadingColor: { classPropertyName: "popupShadingColor", publicName: "popupShadingColor", isSignal: true, isRequired: false, transformFunction: null }, contentContainerClass: { classPropertyName: "contentContainerClass", publicName: "contentContainerClass", isSignal: true, isRequired: false, transformFunction: null }, noPaginationContainerClass: { classPropertyName: "noPaginationContainerClass", publicName: "noPaginationContainerClass", isSignal: true, isRequired: false, transformFunction: null }, cardContainerClass: { classPropertyName: "cardContainerClass", publicName: "cardContainerClass", isSignal: true, isRequired: false, transformFunction: null }, loanTitleClass: { classPropertyName: "loanTitleClass", publicName: "loanTitleClass", isSignal: true, isRequired: false, transformFunction: null }, installRangeLabelClass: { classPropertyName: "installRangeLabelClass", publicName: "installRangeLabelClass", isSignal: true, isRequired: false, transformFunction: null }, lineClass: { classPropertyName: "lineClass", publicName: "lineClass", isSignal: true, isRequired: false, transformFunction: null }, amountLabelClass: { classPropertyName: "amountLabelClass", publicName: "amountLabelClass", isSignal: true, isRequired: false, transformFunction: null }, currencyCodeClass: { classPropertyName: "currencyCodeClass", publicName: "currencyCodeClass", isSignal: true, isRequired: false, transformFunction: null }, amountValueClass: { classPropertyName: "amountValueClass", publicName: "amountValueClass", isSignal: true, isRequired: false, transformFunction: null }, totalPaidClass: { classPropertyName: "totalPaidClass", publicName: "totalPaidClass", isSignal: true, isRequired: false, transformFunction: null }, remainingInstallmentClass: { classPropertyName: "remainingInstallmentClass", publicName: "remainingInstallmentClass", isSignal: true, isRequired: false, transformFunction: null }, navContainerClass: { classPropertyName: "navContainerClass", publicName: "navContainerClass", isSignal: true, isRequired: false, transformFunction: null }, navListClass: { classPropertyName: "navListClass", publicName: "navListClass", isSignal: true, isRequired: false, transformFunction: null }, pageItemClass: { classPropertyName: "pageItemClass", publicName: "pageItemClass", isSignal: true, isRequired: false, transformFunction: null }, arrowItemClass: { classPropertyName: "arrowItemClass", publicName: "arrowItemClass", isSignal: true, isRequired: false, transformFunction: null }, pageLinkClass: { classPropertyName: "pageLinkClass", publicName: "pageLinkClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { popupVisibleChange: "popupVisibleChange", closePopupClickHandler: "closePopupClickHandler", isLoadingChanged: "isLoadingChanged" }, ngImport: i0, template: "<dx-popup\n  id=\"employeeLoanPopup\"\n  [visible]=\"internalPopupVisible()\"\n  (visibleChange)=\"internalPopupVisible.set($event)\"\n  [width]=\"popupWidth()\"\n  [height]=\"popupHeight()\"\n  [showCloseButton]=\"true\"\n  [showTitle]=\"true\"\n  [shadingColor]=\"popupShadingColor()\"\n  [dragEnabled]=\"popupDragEnabled()\"\n  [title]=\"popupTitleKey() | PayrollTranslate\"\n  (onHiding)=\"onPopupClose()\"\n>\n  <div [ngClass]=\"[contentContainerClass(), loanDetails().length <= 1 ? noPaginationContainerClass() : '']\">\n    @for (loan of employeeLoans(); track $index) {\n      <payroll-loan-card\n        [loan]=\"loan\"\n        [currencyCode]=\"currencyCode()\"\n        [cardContainerClass]=\"cardContainerClass()\"\n        [loanTitleClass]=\"loanTitleClass()\"\n        [installRangeLabelClass]=\"installRangeLabelClass()\"\n        [lineClass]=\"lineClass()\"\n        [amountLabelClass]=\"amountLabelClass()\"\n        [currencyCodeClass]=\"currencyCodeClass()\"\n        [amountValueClass]=\"amountValueClass()\"\n        [totalPaidClass]=\"totalPaidClass()\"\n        [remainingInstallmentClass]=\"remainingInstallmentClass()\"\n        [formatAmount]=\"currencyFormat.bind(this)\"\n        [remainingInstallmentsText]=\"getRemainingInstallment.bind(this)\"\n      ></payroll-loan-card>\n    }\n  </div>\n\n  <payroll-loan-pagination\n    [totalPages]=\"loanDetails().length\"\n    [currentPage]=\"currentPage()\"\n    [navContainerClass]=\"navContainerClass()\"\n    [navListClass]=\"navListClass()\"\n    [pageItemClass]=\"pageItemClass()\"\n    [arrowItemClass]=\"arrowItemClass()\"\n    [pageLinkClass]=\"pageLinkClass()\"\n    (previousClicked)=\"goToPreviousPage()\"\n    (nextClicked)=\"goToNextPage()\"\n    (pageClicked)=\"goToPage($event)\"\n  ></payroll-loan-pagination>\n</dx-popup>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: DxPopupModule }, { kind: "component", type: i1$2.DxPopupComponent, selector: "dx-popup", inputs: ["accessKey", "animation", "container", "contentTemplate", "deferRendering", "disabled", "dragAndResizeArea", "dragEnabled", "dragOutsideBoundary", "enableBodyScroll", "focusStateEnabled", "fullScreen", "height", "hideOnOutsideClick", "hideOnParentScroll", "hint", "hoverStateEnabled", "maxHeight", "maxWidth", "minHeight", "minWidth", "position", "resizeEnabled", "restorePosition", "rtlEnabled", "shading", "shadingColor", "showCloseButton", "showTitle", "tabIndex", "title", "titleTemplate", "toolbarItems", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onResize", "onResizeEnd", "onResizeStart", "onShowing", "onShown", "onTitleRendered", "accessKeyChange", "animationChange", "containerChange", "contentTemplateChange", "deferRenderingChange", "disabledChange", "dragAndResizeAreaChange", "dragEnabledChange", "dragOutsideBoundaryChange", "enableBodyScrollChange", "focusStateEnabledChange", "fullScreenChange", "heightChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "resizeEnabledChange", "restorePositionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showCloseButtonChange", "showTitleChange", "tabIndexChange", "titleChange", "titleTemplateChange", "toolbarItemsChange", "visibleChange", "widthChange", "wrapperAttrChange"] }, { kind: "component", type: LoanCardComponent, selector: "payroll-loan-card", inputs: ["loan", "currencyCode", "cardContainerClass", "installRangeLabelClass", "lineClass", "amountLabelClass", "currencyCodeClass", "amountValueClass", "totalPaidClass", "remainingInstallmentClass", "loanTitleClass", "formatAmount", "remainingInstallmentsText"] }, { kind: "component", type: LoanPaginationComponent, selector: "payroll-loan-pagination", inputs: ["totalPages", "currentPage", "navContainerClass", "navListClass", "pageItemClass", "arrowItemClass", "pageLinkClass", "arrowActiveClass"], outputs: ["previousClicked", "nextClicked", "pageClicked"] }, { kind: "pipe", type: PayrollTranslatePipe, name: "PayrollTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: MyLoansPopupWidgetComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'payroll-my-loans-popup', standalone: true, imports: [CommonModule, DxPopupModule, PayrollTranslatePipe, LoanCardComponent, LoanPaginationComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<dx-popup\n  id=\"employeeLoanPopup\"\n  [visible]=\"internalPopupVisible()\"\n  (visibleChange)=\"internalPopupVisible.set($event)\"\n  [width]=\"popupWidth()\"\n  [height]=\"popupHeight()\"\n  [showCloseButton]=\"true\"\n  [showTitle]=\"true\"\n  [shadingColor]=\"popupShadingColor()\"\n  [dragEnabled]=\"popupDragEnabled()\"\n  [title]=\"popupTitleKey() | PayrollTranslate\"\n  (onHiding)=\"onPopupClose()\"\n>\n  <div [ngClass]=\"[contentContainerClass(), loanDetails().length <= 1 ? noPaginationContainerClass() : '']\">\n    @for (loan of employeeLoans(); track $index) {\n      <payroll-loan-card\n        [loan]=\"loan\"\n        [currencyCode]=\"currencyCode()\"\n        [cardContainerClass]=\"cardContainerClass()\"\n        [loanTitleClass]=\"loanTitleClass()\"\n        [installRangeLabelClass]=\"installRangeLabelClass()\"\n        [lineClass]=\"lineClass()\"\n        [amountLabelClass]=\"amountLabelClass()\"\n        [currencyCodeClass]=\"currencyCodeClass()\"\n        [amountValueClass]=\"amountValueClass()\"\n        [totalPaidClass]=\"totalPaidClass()\"\n        [remainingInstallmentClass]=\"remainingInstallmentClass()\"\n        [formatAmount]=\"currencyFormat.bind(this)\"\n        [remainingInstallmentsText]=\"getRemainingInstallment.bind(this)\"\n      ></payroll-loan-card>\n    }\n  </div>\n\n  <payroll-loan-pagination\n    [totalPages]=\"loanDetails().length\"\n    [currentPage]=\"currentPage()\"\n    [navContainerClass]=\"navContainerClass()\"\n    [navListClass]=\"navListClass()\"\n    [pageItemClass]=\"pageItemClass()\"\n    [arrowItemClass]=\"arrowItemClass()\"\n    [pageLinkClass]=\"pageLinkClass()\"\n    (previousClicked)=\"goToPreviousPage()\"\n    (nextClicked)=\"goToNextPage()\"\n    (pageClicked)=\"goToPage($event)\"\n  ></payroll-loan-pagination>\n</dx-popup>\n" }]
+        }], ctorParameters: () => [], propDecorators: { popupVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupVisible", required: false }] }], baseUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "baseUrl", required: false }] }], currencyCode: [{ type: i0.Input, args: [{ isSignal: true, alias: "currencyCode", required: false }] }], currencyDecimals: [{ type: i0.Input, args: [{ isSignal: true, alias: "currencyDecimals", required: false }] }], popupWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupWidth", required: false }] }], popupHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupHeight", required: false }] }], popupTitleKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupTitleKey", required: false }] }], popupDragEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupDragEnabled", required: false }] }], popupShadingColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupShadingColor", required: false }] }], contentContainerClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentContainerClass", required: false }] }], noPaginationContainerClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "noPaginationContainerClass", required: false }] }], cardContainerClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "cardContainerClass", required: false }] }], loanTitleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "loanTitleClass", required: false }] }], installRangeLabelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "installRangeLabelClass", required: false }] }], lineClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "lineClass", required: false }] }], amountLabelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "amountLabelClass", required: false }] }], currencyCodeClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "currencyCodeClass", required: false }] }], amountValueClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "amountValueClass", required: false }] }], totalPaidClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalPaidClass", required: false }] }], remainingInstallmentClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "remainingInstallmentClass", required: false }] }], navContainerClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "navContainerClass", required: false }] }], navListClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "navListClass", required: false }] }], pageItemClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageItemClass", required: false }] }], arrowItemClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "arrowItemClass", required: false }] }], pageLinkClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageLinkClass", required: false }] }], popupVisibleChange: [{ type: i0.Output, args: ["popupVisibleChange"] }], closePopupClickHandler: [{ type: i0.Output, args: ["closePopupClickHandler"] }], isLoadingChanged: [{ type: i0.Output, args: ["isLoadingChanged"] }] } });
+
+class ActualBasicDetailsPopupComponent {
+    popupVisible = input(false, ...(ngDevMode ? [{ debugName: "popupVisible" }] : /* istanbul ignore next */ []));
+    currencyCode = input('', ...(ngDevMode ? [{ debugName: "currencyCode" }] : /* istanbul ignore next */ []));
+    currencyDecimals = input(0, ...(ngDevMode ? [{ debugName: "currencyDecimals" }] : /* istanbul ignore next */ []));
+    actualBasicSalaryDetails = input([], ...(ngDevMode ? [{ debugName: "actualBasicSalaryDetails" }] : /* istanbul ignore next */ []));
+    popupWidth = input(600, ...(ngDevMode ? [{ debugName: "popupWidth" }] : /* istanbul ignore next */ []));
+    popupMaxHeight = input(400, ...(ngDevMode ? [{ debugName: "popupMaxHeight" }] : /* istanbul ignore next */ []));
+    popupShadingColor = input('rgba(0,0,0,0.4)', ...(ngDevMode ? [{ debugName: "popupShadingColor" }] : /* istanbul ignore next */ []));
+    popupTitleKey = input('ActualBasicDetails', ...(ngDevMode ? [{ debugName: "popupTitleKey" }] : /* istanbul ignore next */ []));
+    popupHeaderRowClass = input('row mb-3 table-cell-sm', ...(ngDevMode ? [{ debugName: "popupHeaderRowClass" }] : /* istanbul ignore next */ []));
+    popupRowClass = input('row mb-3 table-cell-md', ...(ngDevMode ? [{ debugName: "popupRowClass" }] : /* istanbul ignore next */ []));
+    closePopupClickHandler = output();
+    popupVisibleState = signal(false, ...(ngDevMode ? [{ debugName: "popupVisibleState" }] : /* istanbul ignore next */ []));
+    scrollView;
+    commonMethods = inject(CommonMethods);
+    constructor() {
+        effect(() => {
+            this.popupVisibleState.set(this.popupVisible());
+        });
+    }
+    onPopupClose() {
+        this.scrollView?.instance.scrollTo(0);
+        this.closePopupClickHandler.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ActualBasicDetailsPopupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ActualBasicDetailsPopupComponent, isStandalone: true, selector: "payroll-actual-basic-details-popup", inputs: { popupVisible: { classPropertyName: "popupVisible", publicName: "popupVisible", isSignal: true, isRequired: false, transformFunction: null }, currencyCode: { classPropertyName: "currencyCode", publicName: "currencyCode", isSignal: true, isRequired: false, transformFunction: null }, currencyDecimals: { classPropertyName: "currencyDecimals", publicName: "currencyDecimals", isSignal: true, isRequired: false, transformFunction: null }, actualBasicSalaryDetails: { classPropertyName: "actualBasicSalaryDetails", publicName: "actualBasicSalaryDetails", isSignal: true, isRequired: false, transformFunction: null }, popupWidth: { classPropertyName: "popupWidth", publicName: "popupWidth", isSignal: true, isRequired: false, transformFunction: null }, popupMaxHeight: { classPropertyName: "popupMaxHeight", publicName: "popupMaxHeight", isSignal: true, isRequired: false, transformFunction: null }, popupShadingColor: { classPropertyName: "popupShadingColor", publicName: "popupShadingColor", isSignal: true, isRequired: false, transformFunction: null }, popupTitleKey: { classPropertyName: "popupTitleKey", publicName: "popupTitleKey", isSignal: true, isRequired: false, transformFunction: null }, popupHeaderRowClass: { classPropertyName: "popupHeaderRowClass", publicName: "popupHeaderRowClass", isSignal: true, isRequired: false, transformFunction: null }, popupRowClass: { classPropertyName: "popupRowClass", publicName: "popupRowClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closePopupClickHandler: "closePopupClickHandler" }, viewQueries: [{ propertyName: "scrollView", first: true, predicate: DxScrollViewComponent, descendants: true }], ngImport: i0, template: "<dx-popup\n  [visible]=\"popupVisibleState()\"\n  (visibleChange)=\"popupVisibleState.set($event)\"\n  [height]=\"'auto'\"\n  [maxHeight]=\"popupMaxHeight()\"\n  [width]=\"popupWidth()\"\n  [shadingColor]=\"popupShadingColor()\"\n  contentTemplate=\"popup-content\"\n  [showCloseButton]=\"true\"\n  [title]=\"popupTitleKey() | PayrollTranslate\"\n  (onHiding)=\"onPopupClose()\"\n>\n  <div *dxTemplate=\"let data of 'popup-content'\">\n    <dx-scroll-view\n      #actualBasicDetailsScrollView\n      id=\"actualBasicDetailsScrollView\"\n      [scrollByContent]=\"true\"\n      [scrollByThumb]=\"true\"\n      [showScrollbar]=\"'onScroll'\"\n      [bounceEnabled]=\"false\"\n    >\n      <div [class]=\"popupHeaderRowClass()\">\n        <div class=\"col-5\">{{ 'Attendance' | PayrollTranslate }}</div>\n        <div class=\"col-3\">{{ 'Days' | PayrollTranslate }}</div>\n        <div class=\"col-4\">\n          {{ 'Amount' | PayrollTranslate }}\n          <span class=\"fs-10\">({{ currencyCode() }})</span>\n        </div>\n      </div>\n\n      @for (basicSalaryDetails of actualBasicSalaryDetails(); track $index) {\n        <div [class]=\"popupRowClass()\">\n          <div class=\"col-5\">{{ basicSalaryDetails.Attendance }}</div>\n          <div class=\"col-3\">{{ basicSalaryDetails.AllowanceDays }}</div>\n          <div class=\"col-4\">\n            {{ commonMethods.currencyDecimalFormat(basicSalaryDetails.Amount, currencyDecimals()) }}\n          </div>\n        </div>\n      }\n    </dx-scroll-view>\n  </div>\n</dx-popup>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: DxPopupModule }, { kind: "component", type: i1$2.DxPopupComponent, selector: "dx-popup", inputs: ["accessKey", "animation", "container", "contentTemplate", "deferRendering", "disabled", "dragAndResizeArea", "dragEnabled", "dragOutsideBoundary", "enableBodyScroll", "focusStateEnabled", "fullScreen", "height", "hideOnOutsideClick", "hideOnParentScroll", "hint", "hoverStateEnabled", "maxHeight", "maxWidth", "minHeight", "minWidth", "position", "resizeEnabled", "restorePosition", "rtlEnabled", "shading", "shadingColor", "showCloseButton", "showTitle", "tabIndex", "title", "titleTemplate", "toolbarItems", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onResize", "onResizeEnd", "onResizeStart", "onShowing", "onShown", "onTitleRendered", "accessKeyChange", "animationChange", "containerChange", "contentTemplateChange", "deferRenderingChange", "disabledChange", "dragAndResizeAreaChange", "dragEnabledChange", "dragOutsideBoundaryChange", "enableBodyScrollChange", "focusStateEnabledChange", "fullScreenChange", "heightChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "resizeEnabledChange", "restorePositionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showCloseButtonChange", "showTitleChange", "tabIndexChange", "titleChange", "titleTemplateChange", "toolbarItemsChange", "visibleChange", "widthChange", "wrapperAttrChange"] }, { kind: "directive", type: i2.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { kind: "ngmodule", type: DxScrollViewModule }, { kind: "component", type: i1$2.DxScrollViewComponent, selector: "dx-scroll-view", inputs: ["bounceEnabled", "direction", "disabled", "elementAttr", "height", "pulledDownText", "pullingDownText", "reachBottomText", "refreshingText", "rtlEnabled", "scrollByContent", "scrollByThumb", "showScrollbar", "useNative", "width"], outputs: ["onDisposing", "onInitialized", "onOptionChanged", "onPullDown", "onReachBottom", "onScroll", "onUpdated", "bounceEnabledChange", "directionChange", "disabledChange", "elementAttrChange", "heightChange", "pulledDownTextChange", "pullingDownTextChange", "reachBottomTextChange", "refreshingTextChange", "rtlEnabledChange", "scrollByContentChange", "scrollByThumbChange", "showScrollbarChange", "useNativeChange", "widthChange"] }, { kind: "pipe", type: PayrollTranslatePipe, name: "PayrollTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ActualBasicDetailsPopupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'payroll-actual-basic-details-popup', standalone: true, imports: [CommonModule, DxPopupModule, DxScrollViewModule, PayrollTranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<dx-popup\n  [visible]=\"popupVisibleState()\"\n  (visibleChange)=\"popupVisibleState.set($event)\"\n  [height]=\"'auto'\"\n  [maxHeight]=\"popupMaxHeight()\"\n  [width]=\"popupWidth()\"\n  [shadingColor]=\"popupShadingColor()\"\n  contentTemplate=\"popup-content\"\n  [showCloseButton]=\"true\"\n  [title]=\"popupTitleKey() | PayrollTranslate\"\n  (onHiding)=\"onPopupClose()\"\n>\n  <div *dxTemplate=\"let data of 'popup-content'\">\n    <dx-scroll-view\n      #actualBasicDetailsScrollView\n      id=\"actualBasicDetailsScrollView\"\n      [scrollByContent]=\"true\"\n      [scrollByThumb]=\"true\"\n      [showScrollbar]=\"'onScroll'\"\n      [bounceEnabled]=\"false\"\n    >\n      <div [class]=\"popupHeaderRowClass()\">\n        <div class=\"col-5\">{{ 'Attendance' | PayrollTranslate }}</div>\n        <div class=\"col-3\">{{ 'Days' | PayrollTranslate }}</div>\n        <div class=\"col-4\">\n          {{ 'Amount' | PayrollTranslate }}\n          <span class=\"fs-10\">({{ currencyCode() }})</span>\n        </div>\n      </div>\n\n      @for (basicSalaryDetails of actualBasicSalaryDetails(); track $index) {\n        <div [class]=\"popupRowClass()\">\n          <div class=\"col-5\">{{ basicSalaryDetails.Attendance }}</div>\n          <div class=\"col-3\">{{ basicSalaryDetails.AllowanceDays }}</div>\n          <div class=\"col-4\">\n            {{ commonMethods.currencyDecimalFormat(basicSalaryDetails.Amount, currencyDecimals()) }}\n          </div>\n        </div>\n      }\n    </dx-scroll-view>\n  </div>\n</dx-popup>\n" }]
+        }], ctorParameters: () => [], propDecorators: { popupVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupVisible", required: false }] }], currencyCode: [{ type: i0.Input, args: [{ isSignal: true, alias: "currencyCode", required: false }] }], currencyDecimals: [{ type: i0.Input, args: [{ isSignal: true, alias: "currencyDecimals", required: false }] }], actualBasicSalaryDetails: [{ type: i0.Input, args: [{ isSignal: true, alias: "actualBasicSalaryDetails", required: false }] }], popupWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupWidth", required: false }] }], popupMaxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupMaxHeight", required: false }] }], popupShadingColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupShadingColor", required: false }] }], popupTitleKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupTitleKey", required: false }] }], popupHeaderRowClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupHeaderRowClass", required: false }] }], popupRowClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupRowClass", required: false }] }], closePopupClickHandler: [{ type: i0.Output, args: ["closePopupClickHandler"] }], scrollView: [{
+                type: ViewChild,
+                args: [DxScrollViewComponent, { static: false }]
+            }] } });
+
+class PayslipSalaryTableComponent {
+    employeeDetails = input.required(...(ngDevMode ? [{ debugName: "employeeDetails" }] : /* istanbul ignore next */ []));
+    sectionClass = input('mb-4', ...(ngDevMode ? [{ debugName: "sectionClass" }] : /* istanbul ignore next */ []));
+    salaryTableRowClass = input('row', ...(ngDevMode ? [{ debugName: "salaryTableRowClass" }] : /* istanbul ignore next */ []));
+    labelColumnClass = input('col-5 text-start', ...(ngDevMode ? [{ debugName: "labelColumnClass" }] : /* istanbul ignore next */ []));
+    daysColumnClass = input('col-2 text-end fw-light mb-2', ...(ngDevMode ? [{ debugName: "daysColumnClass" }] : /* istanbul ignore next */ []));
+    daysHeaderClass = input('text-ellipsis-one-line mb-2 table-cell-md', ...(ngDevMode ? [{ debugName: "daysHeaderClass" }] : /* istanbul ignore next */ []));
+    amountColumnClass = input('offset-1 col-4 text-start', ...(ngDevMode ? [{ debugName: "amountColumnClass" }] : /* istanbul ignore next */ []));
+    tablePrimaryLabelClass = input('fw-normal mb-2 table-cell-md text-ellipsis-one-line', ...(ngDevMode ? [{ debugName: "tablePrimaryLabelClass" }] : /* istanbul ignore next */ []));
+    tableLabelClass = input('fw-normal mb-2 table-cell-sm text-ellipsis-one-line', ...(ngDevMode ? [{ debugName: "tableLabelClass" }] : /* istanbul ignore next */ []));
+    tableValueClass = input('fw-medium mb-2 table-cell-sm text-ellipsis-one-line', ...(ngDevMode ? [{ debugName: "tableValueClass" }] : /* istanbul ignore next */ []));
+    tableSecondaryValueClass = input('text-ellipsis-one-line mb-2 table-cell-sm', ...(ngDevMode ? [{ debugName: "tableSecondaryValueClass" }] : /* istanbul ignore next */ []));
+    currencyCodeClass = input('fs-10', ...(ngDevMode ? [{ debugName: "currencyCodeClass" }] : /* istanbul ignore next */ []));
+    viewDetailsLinkClass = input('text-primary fw-normal ms-1', ...(ngDevMode ? [{ debugName: "viewDetailsLinkClass" }] : /* istanbul ignore next */ []));
+    viewActualBasicSalaryDetailsClick = output();
+    commonMethod = inject(CommonMethods);
+    onViewActualBasicSalaryDetialsClick() {
+        this.viewActualBasicSalaryDetailsClick.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: PayslipSalaryTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: PayslipSalaryTableComponent, isStandalone: true, selector: "payroll-payslip-salary-table", inputs: { employeeDetails: { classPropertyName: "employeeDetails", publicName: "employeeDetails", isSignal: true, isRequired: true, transformFunction: null }, sectionClass: { classPropertyName: "sectionClass", publicName: "sectionClass", isSignal: true, isRequired: false, transformFunction: null }, salaryTableRowClass: { classPropertyName: "salaryTableRowClass", publicName: "salaryTableRowClass", isSignal: true, isRequired: false, transformFunction: null }, labelColumnClass: { classPropertyName: "labelColumnClass", publicName: "labelColumnClass", isSignal: true, isRequired: false, transformFunction: null }, daysColumnClass: { classPropertyName: "daysColumnClass", publicName: "daysColumnClass", isSignal: true, isRequired: false, transformFunction: null }, daysHeaderClass: { classPropertyName: "daysHeaderClass", publicName: "daysHeaderClass", isSignal: true, isRequired: false, transformFunction: null }, amountColumnClass: { classPropertyName: "amountColumnClass", publicName: "amountColumnClass", isSignal: true, isRequired: false, transformFunction: null }, tablePrimaryLabelClass: { classPropertyName: "tablePrimaryLabelClass", publicName: "tablePrimaryLabelClass", isSignal: true, isRequired: false, transformFunction: null }, tableLabelClass: { classPropertyName: "tableLabelClass", publicName: "tableLabelClass", isSignal: true, isRequired: false, transformFunction: null }, tableValueClass: { classPropertyName: "tableValueClass", publicName: "tableValueClass", isSignal: true, isRequired: false, transformFunction: null }, tableSecondaryValueClass: { classPropertyName: "tableSecondaryValueClass", publicName: "tableSecondaryValueClass", isSignal: true, isRequired: false, transformFunction: null }, currencyCodeClass: { classPropertyName: "currencyCodeClass", publicName: "currencyCodeClass", isSignal: true, isRequired: false, transformFunction: null }, viewDetailsLinkClass: { classPropertyName: "viewDetailsLinkClass", publicName: "viewDetailsLinkClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { viewActualBasicSalaryDetailsClick: "viewActualBasicSalaryDetailsClick" }, ngImport: i0, template: "<div [class]=\"sectionClass()\">\n  <div [class]=\"salaryTableRowClass()\">\n    <div [class]=\"labelColumnClass()\">\n      <div [class]=\"tablePrimaryLabelClass()\">{{ 'Salary' | PayrollTranslate }}</div>\n      <div [class]=\"tableLabelClass()\">{{ 'Basic' | PayrollTranslate }}</div>\n      <div [class]=\"tableLabelClass()\">{{ 'ActualBasicSalary' | PayrollTranslate }}</div>\n      <div [class]=\"tableLabelClass()\">{{ 'UnpaidVacations' | PayrollTranslate }}</div>\n    </div>\n\n    <div [class]=\"daysColumnClass()\">\n      <div [class]=\"daysHeaderClass()\">{{ 'Days' | PayrollTranslate }}</div>\n      <div [class]=\"tableSecondaryValueClass()\">{{ employeeDetails().TotalDays }}</div>\n      <div [class]=\"tableSecondaryValueClass()\">{{ employeeDetails().PaidDays }}</div>\n      <div [class]=\"tableSecondaryValueClass()\">{{ employeeDetails().UnpaidVacationDays }}</div>\n    </div>\n\n    <div [class]=\"amountColumnClass()\">\n      <div [class]=\"tablePrimaryLabelClass()\">\n        {{ 'Amount' | PayrollTranslate }}\n        <span [class]=\"currencyCodeClass()\">({{ employeeDetails().CurrencyCode }})</span>\n      </div>\n      <div [class]=\"tableValueClass()\">\n        {{ commonMethod.currencyDecimalFormat(employeeDetails().BasicSalary, employeeDetails().CurrencyDecimals) }}\n      </div>\n      <div [class]=\"tableValueClass()\">\n        {{ commonMethod.currencyDecimalFormat(employeeDetails().ActualBasicSalary, employeeDetails().CurrencyDecimals) }}\n        <a [class]=\"viewDetailsLinkClass()\" (click)=\"onViewActualBasicSalaryDetialsClick()\">\n          {{ 'ViewDetails' | PayrollTranslate }}\n        </a>\n      </div>\n      <div [class]=\"tableValueClass()\">\n        {{ commonMethod.currencyDecimalFormat(employeeDetails().UnpaidVacationDaysCost, employeeDetails().CurrencyDecimals) }}\n      </div>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: PayrollTranslatePipe, name: "PayrollTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: PayslipSalaryTableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'payroll-payslip-salary-table', standalone: true, imports: [CommonModule, PayrollTranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"sectionClass()\">\n  <div [class]=\"salaryTableRowClass()\">\n    <div [class]=\"labelColumnClass()\">\n      <div [class]=\"tablePrimaryLabelClass()\">{{ 'Salary' | PayrollTranslate }}</div>\n      <div [class]=\"tableLabelClass()\">{{ 'Basic' | PayrollTranslate }}</div>\n      <div [class]=\"tableLabelClass()\">{{ 'ActualBasicSalary' | PayrollTranslate }}</div>\n      <div [class]=\"tableLabelClass()\">{{ 'UnpaidVacations' | PayrollTranslate }}</div>\n    </div>\n\n    <div [class]=\"daysColumnClass()\">\n      <div [class]=\"daysHeaderClass()\">{{ 'Days' | PayrollTranslate }}</div>\n      <div [class]=\"tableSecondaryValueClass()\">{{ employeeDetails().TotalDays }}</div>\n      <div [class]=\"tableSecondaryValueClass()\">{{ employeeDetails().PaidDays }}</div>\n      <div [class]=\"tableSecondaryValueClass()\">{{ employeeDetails().UnpaidVacationDays }}</div>\n    </div>\n\n    <div [class]=\"amountColumnClass()\">\n      <div [class]=\"tablePrimaryLabelClass()\">\n        {{ 'Amount' | PayrollTranslate }}\n        <span [class]=\"currencyCodeClass()\">({{ employeeDetails().CurrencyCode }})</span>\n      </div>\n      <div [class]=\"tableValueClass()\">\n        {{ commonMethod.currencyDecimalFormat(employeeDetails().BasicSalary, employeeDetails().CurrencyDecimals) }}\n      </div>\n      <div [class]=\"tableValueClass()\">\n        {{ commonMethod.currencyDecimalFormat(employeeDetails().ActualBasicSalary, employeeDetails().CurrencyDecimals) }}\n        <a [class]=\"viewDetailsLinkClass()\" (click)=\"onViewActualBasicSalaryDetialsClick()\">\n          {{ 'ViewDetails' | PayrollTranslate }}\n        </a>\n      </div>\n      <div [class]=\"tableValueClass()\">\n        {{ commonMethod.currencyDecimalFormat(employeeDetails().UnpaidVacationDaysCost, employeeDetails().CurrencyDecimals) }}\n      </div>\n    </div>\n  </div>\n</div>\n" }]
+        }], propDecorators: { employeeDetails: [{ type: i0.Input, args: [{ isSignal: true, alias: "employeeDetails", required: true }] }], sectionClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "sectionClass", required: false }] }], salaryTableRowClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "salaryTableRowClass", required: false }] }], labelColumnClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelColumnClass", required: false }] }], daysColumnClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "daysColumnClass", required: false }] }], daysHeaderClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "daysHeaderClass", required: false }] }], amountColumnClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "amountColumnClass", required: false }] }], tablePrimaryLabelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "tablePrimaryLabelClass", required: false }] }], tableLabelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableLabelClass", required: false }] }], tableValueClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableValueClass", required: false }] }], tableSecondaryValueClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableSecondaryValueClass", required: false }] }], currencyCodeClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "currencyCodeClass", required: false }] }], viewDetailsLinkClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewDetailsLinkClass", required: false }] }], viewActualBasicSalaryDetailsClick: [{ type: i0.Output, args: ["viewActualBasicSalaryDetailsClick"] }] } });
+
+class PayslipAllowancesTableComponent {
+    employeeDetails = input.required(...(ngDevMode ? [{ debugName: "employeeDetails" }] : /* istanbul ignore next */ []));
+    sectionClass = input('mb-4', ...(ngDevMode ? [{ debugName: "sectionClass" }] : /* istanbul ignore next */ []));
+    allowancesRowClass = input('row align-items-start', ...(ngDevMode ? [{ debugName: "allowancesRowClass" }] : /* istanbul ignore next */ []));
+    labelColumnClass = input('col-5 text-start', ...(ngDevMode ? [{ debugName: "labelColumnClass" }] : /* istanbul ignore next */ []));
+    totalsColumnClass = input('offset-3 col-4 text-start', ...(ngDevMode ? [{ debugName: "totalsColumnClass" }] : /* istanbul ignore next */ []));
+    sectionTitleClass = input('fs-14 fw-bold mb-2 text-primary', ...(ngDevMode ? [{ debugName: "sectionTitleClass" }] : /* istanbul ignore next */ []));
+    tableLabelClass = input('fw-normal mb-2 table-cell-sm text-ellipsis-one-line', ...(ngDevMode ? [{ debugName: "tableLabelClass" }] : /* istanbul ignore next */ []));
+    allowanceDaysClass = input('col-2 text-end table-cell-sm fw-light', ...(ngDevMode ? [{ debugName: "allowanceDaysClass" }] : /* istanbul ignore next */ []));
+    amountColumnClass = input('offset-1 col-3 text-start', ...(ngDevMode ? [{ debugName: "amountColumnClass" }] : /* istanbul ignore next */ []));
+    allowanceAmountWrapperClass = input('d-flex align-items-center justify-content-between fs-12 fw-medium mb-2 text-dark-gray', ...(ngDevMode ? [{ debugName: "allowanceAmountWrapperClass" }] : /* istanbul ignore next */ []));
+    allowanceAmountTextClass = input('w-30 text-nowrap', ...(ngDevMode ? [{ debugName: "allowanceAmountTextClass" }] : /* istanbul ignore next */ []));
+    infoIconClass = input('light-info ms-1 cursor-pointer', ...(ngDevMode ? [{ debugName: "infoIconClass" }] : /* istanbul ignore next */ []));
+    tooltipContainerClass = input('text-white rounded overflow-hidden', ...(ngDevMode ? [{ debugName: "tooltipContainerClass" }] : /* istanbul ignore next */ []));
+    tooltipTextClass = input('text-ellipsis-one-line fs-12', ...(ngDevMode ? [{ debugName: "tooltipTextClass" }] : /* istanbul ignore next */ []));
+    tooltipCurrencyClass = input('fs-10', ...(ngDevMode ? [{ debugName: "tooltipCurrencyClass" }] : /* istanbul ignore next */ []));
+    tooltipAmountClass = input('fs-14 ms-1', ...(ngDevMode ? [{ debugName: "tooltipAmountClass" }] : /* istanbul ignore next */ []));
+    infoIcon = faCircleInfo;
+    commonMethod = inject(CommonMethods);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: PayslipAllowancesTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: PayslipAllowancesTableComponent, isStandalone: true, selector: "payroll-payslip-allowances-table", inputs: { employeeDetails: { classPropertyName: "employeeDetails", publicName: "employeeDetails", isSignal: true, isRequired: true, transformFunction: null }, sectionClass: { classPropertyName: "sectionClass", publicName: "sectionClass", isSignal: true, isRequired: false, transformFunction: null }, allowancesRowClass: { classPropertyName: "allowancesRowClass", publicName: "allowancesRowClass", isSignal: true, isRequired: false, transformFunction: null }, labelColumnClass: { classPropertyName: "labelColumnClass", publicName: "labelColumnClass", isSignal: true, isRequired: false, transformFunction: null }, totalsColumnClass: { classPropertyName: "totalsColumnClass", publicName: "totalsColumnClass", isSignal: true, isRequired: false, transformFunction: null }, sectionTitleClass: { classPropertyName: "sectionTitleClass", publicName: "sectionTitleClass", isSignal: true, isRequired: false, transformFunction: null }, tableLabelClass: { classPropertyName: "tableLabelClass", publicName: "tableLabelClass", isSignal: true, isRequired: false, transformFunction: null }, allowanceDaysClass: { classPropertyName: "allowanceDaysClass", publicName: "allowanceDaysClass", isSignal: true, isRequired: false, transformFunction: null }, amountColumnClass: { classPropertyName: "amountColumnClass", publicName: "amountColumnClass", isSignal: true, isRequired: false, transformFunction: null }, allowanceAmountWrapperClass: { classPropertyName: "allowanceAmountWrapperClass", publicName: "allowanceAmountWrapperClass", isSignal: true, isRequired: false, transformFunction: null }, allowanceAmountTextClass: { classPropertyName: "allowanceAmountTextClass", publicName: "allowanceAmountTextClass", isSignal: true, isRequired: false, transformFunction: null }, infoIconClass: { classPropertyName: "infoIconClass", publicName: "infoIconClass", isSignal: true, isRequired: false, transformFunction: null }, tooltipContainerClass: { classPropertyName: "tooltipContainerClass", publicName: "tooltipContainerClass", isSignal: true, isRequired: false, transformFunction: null }, tooltipTextClass: { classPropertyName: "tooltipTextClass", publicName: "tooltipTextClass", isSignal: true, isRequired: false, transformFunction: null }, tooltipCurrencyClass: { classPropertyName: "tooltipCurrencyClass", publicName: "tooltipCurrencyClass", isSignal: true, isRequired: false, transformFunction: null }, tooltipAmountClass: { classPropertyName: "tooltipAmountClass", publicName: "tooltipAmountClass", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div [class]=\"sectionClass()\">\n  <div [class]=\"allowancesRowClass()\">\n    <div [class]=\"labelColumnClass()\">\n      <div [class]=\"sectionTitleClass()\">{{ 'Allowances' | PayrollTranslate }}</div>\n    </div>\n    <div [class]=\"totalsColumnClass()\">\n      <div [class]=\"sectionTitleClass()\">\n        {{ commonMethod.currencyDecimalFormat(employeeDetails().TotalCashAllowances, employeeDetails().CurrencyDecimals) }}\n      </div>\n    </div>\n\n    @for (allowance of employeeDetails().CashAllowances ?? []; track $index; let index = $index) {\n      <div [class]=\"labelColumnClass()\">\n        <div [class]=\"tableLabelClass()\">{{ allowance.AllowanceName }}</div>\n      </div>\n      <div [class]=\"allowanceDaysClass()\">{{ allowance.AllowanceDays ?? '-' }}</div>\n      <div [class]=\"amountColumnClass()\">\n        <div [class]=\"allowanceAmountWrapperClass()\">\n          <div [class]=\"allowanceAmountTextClass()\">\n            {{ commonMethod.currencyDecimalFormat(allowance.TotalAmount, employeeDetails().CurrencyDecimals) }}\n          </div>\n          @if (allowance.TotalAmount !== allowance.OriginalAmount && allowance.OriginalAmount != null) {\n            <fa-icon [icon]=\"infoIcon\" [class]=\"infoIconClass()\" [id]=\"'allowance-original-' + index\"></fa-icon>\n          }\n        </div>\n        @if (allowance.TotalAmount !== allowance.OriginalAmount && allowance.OriginalAmount != null) {\n          <dx-tooltip [target]=\"'#' + 'allowance-original-' + index\" [showEvent]=\"'mouseenter'\" [hideEvent]=\"'mouseleave'\" [width]=\"'auto'\">\n            <div [class]=\"tooltipContainerClass()\">\n              <div [class]=\"tooltipTextClass()\">\n                {{ 'TotalAmount' | PayrollTranslate }}\n                <span [class]=\"tooltipCurrencyClass()\">({{ employeeDetails().CurrencyCode }}):</span>\n                <span [class]=\"tooltipAmountClass()\">\n                  {{ commonMethod.currencyDecimalFormat(allowance.OriginalAmount, employeeDetails().CurrencyDecimals) }}\n                </span>\n              </div>\n            </div>\n          </dx-tooltip>\n        }\n      </div>\n    }\n\n    @if (employeeDetails().TotalCashAllowances === 0 && employeeDetails().TotalDeductions === 0) {\n      <div [class]=\"labelColumnClass()\">\n        <div [class]=\"sectionTitleClass()\">{{ 'Deductions' | PayrollTranslate }}</div>\n      </div>\n      <div [class]=\"totalsColumnClass()\">\n        <div [class]=\"sectionTitleClass()\">\n          {{ commonMethod.currencyDecimalFormat(employeeDetails().TotalDeductions, employeeDetails().CurrencyDecimals) }}\n        </div>\n      </div>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i1$3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }, { kind: "ngmodule", type: DxTooltipModule }, { kind: "component", type: i1$2.DxTooltipComponent, selector: "dx-tooltip", inputs: ["animation", "container", "contentTemplate", "deferRendering", "disabled", "height", "hideEvent", "hideOnOutsideClick", "hideOnParentScroll", "hint", "hoverStateEnabled", "maxHeight", "maxWidth", "minHeight", "minWidth", "position", "rtlEnabled", "shading", "shadingColor", "showEvent", "target", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onShowing", "onShown", "animationChange", "containerChange", "contentTemplateChange", "deferRenderingChange", "disabledChange", "heightChange", "hideEventChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showEventChange", "targetChange", "visibleChange", "widthChange", "wrapperAttrChange"] }, { kind: "pipe", type: PayrollTranslatePipe, name: "PayrollTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: PayslipAllowancesTableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'payroll-payslip-allowances-table', standalone: true, imports: [CommonModule, FontAwesomeModule, DxTooltipModule, PayrollTranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"sectionClass()\">\n  <div [class]=\"allowancesRowClass()\">\n    <div [class]=\"labelColumnClass()\">\n      <div [class]=\"sectionTitleClass()\">{{ 'Allowances' | PayrollTranslate }}</div>\n    </div>\n    <div [class]=\"totalsColumnClass()\">\n      <div [class]=\"sectionTitleClass()\">\n        {{ commonMethod.currencyDecimalFormat(employeeDetails().TotalCashAllowances, employeeDetails().CurrencyDecimals) }}\n      </div>\n    </div>\n\n    @for (allowance of employeeDetails().CashAllowances ?? []; track $index; let index = $index) {\n      <div [class]=\"labelColumnClass()\">\n        <div [class]=\"tableLabelClass()\">{{ allowance.AllowanceName }}</div>\n      </div>\n      <div [class]=\"allowanceDaysClass()\">{{ allowance.AllowanceDays ?? '-' }}</div>\n      <div [class]=\"amountColumnClass()\">\n        <div [class]=\"allowanceAmountWrapperClass()\">\n          <div [class]=\"allowanceAmountTextClass()\">\n            {{ commonMethod.currencyDecimalFormat(allowance.TotalAmount, employeeDetails().CurrencyDecimals) }}\n          </div>\n          @if (allowance.TotalAmount !== allowance.OriginalAmount && allowance.OriginalAmount != null) {\n            <fa-icon [icon]=\"infoIcon\" [class]=\"infoIconClass()\" [id]=\"'allowance-original-' + index\"></fa-icon>\n          }\n        </div>\n        @if (allowance.TotalAmount !== allowance.OriginalAmount && allowance.OriginalAmount != null) {\n          <dx-tooltip [target]=\"'#' + 'allowance-original-' + index\" [showEvent]=\"'mouseenter'\" [hideEvent]=\"'mouseleave'\" [width]=\"'auto'\">\n            <div [class]=\"tooltipContainerClass()\">\n              <div [class]=\"tooltipTextClass()\">\n                {{ 'TotalAmount' | PayrollTranslate }}\n                <span [class]=\"tooltipCurrencyClass()\">({{ employeeDetails().CurrencyCode }}):</span>\n                <span [class]=\"tooltipAmountClass()\">\n                  {{ commonMethod.currencyDecimalFormat(allowance.OriginalAmount, employeeDetails().CurrencyDecimals) }}\n                </span>\n              </div>\n            </div>\n          </dx-tooltip>\n        }\n      </div>\n    }\n\n    @if (employeeDetails().TotalCashAllowances === 0 && employeeDetails().TotalDeductions === 0) {\n      <div [class]=\"labelColumnClass()\">\n        <div [class]=\"sectionTitleClass()\">{{ 'Deductions' | PayrollTranslate }}</div>\n      </div>\n      <div [class]=\"totalsColumnClass()\">\n        <div [class]=\"sectionTitleClass()\">\n          {{ commonMethod.currencyDecimalFormat(employeeDetails().TotalDeductions, employeeDetails().CurrencyDecimals) }}\n        </div>\n      </div>\n    }\n  </div>\n</div>\n" }]
+        }], propDecorators: { employeeDetails: [{ type: i0.Input, args: [{ isSignal: true, alias: "employeeDetails", required: true }] }], sectionClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "sectionClass", required: false }] }], allowancesRowClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowancesRowClass", required: false }] }], labelColumnClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelColumnClass", required: false }] }], totalsColumnClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalsColumnClass", required: false }] }], sectionTitleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "sectionTitleClass", required: false }] }], tableLabelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableLabelClass", required: false }] }], allowanceDaysClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowanceDaysClass", required: false }] }], amountColumnClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "amountColumnClass", required: false }] }], allowanceAmountWrapperClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowanceAmountWrapperClass", required: false }] }], allowanceAmountTextClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowanceAmountTextClass", required: false }] }], infoIconClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "infoIconClass", required: false }] }], tooltipContainerClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipContainerClass", required: false }] }], tooltipTextClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipTextClass", required: false }] }], tooltipCurrencyClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipCurrencyClass", required: false }] }], tooltipAmountClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipAmountClass", required: false }] }] } });
+
+class PayslipDeductionsTableComponent {
+    employeeDetails = input.required(...(ngDevMode ? [{ debugName: "employeeDetails" }] : /* istanbul ignore next */ []));
+    dividerRowClass = input('row', ...(ngDevMode ? [{ debugName: "dividerRowClass" }] : /* istanbul ignore next */ []));
+    dividerColumnClass = input('col-12', ...(ngDevMode ? [{ debugName: "dividerColumnClass" }] : /* istanbul ignore next */ []));
+    deductionsSectionRowClass = input('row mt-4', ...(ngDevMode ? [{ debugName: "deductionsSectionRowClass" }] : /* istanbul ignore next */ []));
+    deductionsSectionColumnClass = input('col-xl-6 col-md-12', ...(ngDevMode ? [{ debugName: "deductionsSectionColumnClass" }] : /* istanbul ignore next */ []));
+    deductionsInnerRowClass = input('row', ...(ngDevMode ? [{ debugName: "deductionsInnerRowClass" }] : /* istanbul ignore next */ []));
+    labelColumnClass = input('col-5 text-start', ...(ngDevMode ? [{ debugName: "labelColumnClass" }] : /* istanbul ignore next */ []));
+    sectionTitleClass = input('fs-14 fw-bold mb-2 text-primary', ...(ngDevMode ? [{ debugName: "sectionTitleClass" }] : /* istanbul ignore next */ []));
+    totalsColumnClass = input('offset-3 col-4 text-start', ...(ngDevMode ? [{ debugName: "totalsColumnClass" }] : /* istanbul ignore next */ []));
+    tableLabelClass = input('fw-normal mb-2 table-cell-sm text-ellipsis-one-line', ...(ngDevMode ? [{ debugName: "tableLabelClass" }] : /* istanbul ignore next */ []));
+    deductionDaysClass = input('col-2 text-end table-cell-sm fw-light', ...(ngDevMode ? [{ debugName: "deductionDaysClass" }] : /* istanbul ignore next */ []));
+    amountColumnClass = input('offset-1 col-4 text-start', ...(ngDevMode ? [{ debugName: "amountColumnClass" }] : /* istanbul ignore next */ []));
+    deductionAmountTextClass = input('fw-normal mb-2 table-cell-sm text-nowrap', ...(ngDevMode ? [{ debugName: "deductionAmountTextClass" }] : /* istanbul ignore next */ []));
+    commonMethod = inject(CommonMethods);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: PayslipDeductionsTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: PayslipDeductionsTableComponent, isStandalone: true, selector: "payroll-payslip-deductions-table", inputs: { employeeDetails: { classPropertyName: "employeeDetails", publicName: "employeeDetails", isSignal: true, isRequired: true, transformFunction: null }, dividerRowClass: { classPropertyName: "dividerRowClass", publicName: "dividerRowClass", isSignal: true, isRequired: false, transformFunction: null }, dividerColumnClass: { classPropertyName: "dividerColumnClass", publicName: "dividerColumnClass", isSignal: true, isRequired: false, transformFunction: null }, deductionsSectionRowClass: { classPropertyName: "deductionsSectionRowClass", publicName: "deductionsSectionRowClass", isSignal: true, isRequired: false, transformFunction: null }, deductionsSectionColumnClass: { classPropertyName: "deductionsSectionColumnClass", publicName: "deductionsSectionColumnClass", isSignal: true, isRequired: false, transformFunction: null }, deductionsInnerRowClass: { classPropertyName: "deductionsInnerRowClass", publicName: "deductionsInnerRowClass", isSignal: true, isRequired: false, transformFunction: null }, labelColumnClass: { classPropertyName: "labelColumnClass", publicName: "labelColumnClass", isSignal: true, isRequired: false, transformFunction: null }, sectionTitleClass: { classPropertyName: "sectionTitleClass", publicName: "sectionTitleClass", isSignal: true, isRequired: false, transformFunction: null }, totalsColumnClass: { classPropertyName: "totalsColumnClass", publicName: "totalsColumnClass", isSignal: true, isRequired: false, transformFunction: null }, tableLabelClass: { classPropertyName: "tableLabelClass", publicName: "tableLabelClass", isSignal: true, isRequired: false, transformFunction: null }, deductionDaysClass: { classPropertyName: "deductionDaysClass", publicName: "deductionDaysClass", isSignal: true, isRequired: false, transformFunction: null }, amountColumnClass: { classPropertyName: "amountColumnClass", publicName: "amountColumnClass", isSignal: true, isRequired: false, transformFunction: null }, deductionAmountTextClass: { classPropertyName: "deductionAmountTextClass", publicName: "deductionAmountTextClass", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (employeeDetails().TotalCashAllowances > 0 || employeeDetails().TotalDeductions > 0) {\n  <div [class]=\"dividerRowClass()\">\n    <div [class]=\"dividerColumnClass()\">\n      <sky-section-divider></sky-section-divider>\n    </div>\n  </div>\n\n  <div [class]=\"deductionsSectionRowClass()\">\n    <div [class]=\"deductionsSectionColumnClass()\">\n      <div [class]=\"deductionsInnerRowClass()\">\n        @if ((employeeDetails().Deductions ?? []).length > 0) {\n          <div [class]=\"labelColumnClass()\">\n            <div [class]=\"sectionTitleClass()\">{{ 'Deductions' | PayrollTranslate }}</div>\n          </div>\n          <div [class]=\"totalsColumnClass()\">\n            <div [class]=\"sectionTitleClass()\">\n              {{ commonMethod.currencyDecimalFormat(employeeDetails().TotalDeductions, employeeDetails().CurrencyDecimals) }}\n            </div>\n          </div>\n\n          @for (deduction of employeeDetails().Deductions ?? []; track $index) {\n            <div [class]=\"labelColumnClass()\">\n              <div [class]=\"tableLabelClass()\">{{ deduction.DeductionName }}</div>\n            </div>\n            <div [class]=\"deductionDaysClass()\">{{ deduction.DeductionDays ?? '-' }}</div>\n            <div [class]=\"amountColumnClass()\">\n              <div [class]=\"deductionAmountTextClass()\">\n                {{ commonMethod.currencyDecimalFormat(deduction.TotalAmount, employeeDetails().CurrencyDecimals) }}\n              </div>\n            </div>\n          }\n        }\n      </div>\n    </div>\n  </div>\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: SkySectionDividerComponent, selector: "sky-section-divider", inputs: ["text", "fontAwesomeIcon", "textClass", "dividerClass", "iconClass"] }, { kind: "pipe", type: PayrollTranslatePipe, name: "PayrollTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: PayslipDeductionsTableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'payroll-payslip-deductions-table', standalone: true, imports: [CommonModule, PayrollTranslatePipe, SkySectionDividerComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (employeeDetails().TotalCashAllowances > 0 || employeeDetails().TotalDeductions > 0) {\n  <div [class]=\"dividerRowClass()\">\n    <div [class]=\"dividerColumnClass()\">\n      <sky-section-divider></sky-section-divider>\n    </div>\n  </div>\n\n  <div [class]=\"deductionsSectionRowClass()\">\n    <div [class]=\"deductionsSectionColumnClass()\">\n      <div [class]=\"deductionsInnerRowClass()\">\n        @if ((employeeDetails().Deductions ?? []).length > 0) {\n          <div [class]=\"labelColumnClass()\">\n            <div [class]=\"sectionTitleClass()\">{{ 'Deductions' | PayrollTranslate }}</div>\n          </div>\n          <div [class]=\"totalsColumnClass()\">\n            <div [class]=\"sectionTitleClass()\">\n              {{ commonMethod.currencyDecimalFormat(employeeDetails().TotalDeductions, employeeDetails().CurrencyDecimals) }}\n            </div>\n          </div>\n\n          @for (deduction of employeeDetails().Deductions ?? []; track $index) {\n            <div [class]=\"labelColumnClass()\">\n              <div [class]=\"tableLabelClass()\">{{ deduction.DeductionName }}</div>\n            </div>\n            <div [class]=\"deductionDaysClass()\">{{ deduction.DeductionDays ?? '-' }}</div>\n            <div [class]=\"amountColumnClass()\">\n              <div [class]=\"deductionAmountTextClass()\">\n                {{ commonMethod.currencyDecimalFormat(deduction.TotalAmount, employeeDetails().CurrencyDecimals) }}\n              </div>\n            </div>\n          }\n        }\n      </div>\n    </div>\n  </div>\n}\n" }]
+        }], propDecorators: { employeeDetails: [{ type: i0.Input, args: [{ isSignal: true, alias: "employeeDetails", required: true }] }], dividerRowClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "dividerRowClass", required: false }] }], dividerColumnClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "dividerColumnClass", required: false }] }], deductionsSectionRowClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "deductionsSectionRowClass", required: false }] }], deductionsSectionColumnClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "deductionsSectionColumnClass", required: false }] }], deductionsInnerRowClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "deductionsInnerRowClass", required: false }] }], labelColumnClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelColumnClass", required: false }] }], sectionTitleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "sectionTitleClass", required: false }] }], totalsColumnClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalsColumnClass", required: false }] }], tableLabelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableLabelClass", required: false }] }], deductionDaysClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "deductionDaysClass", required: false }] }], amountColumnClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "amountColumnClass", required: false }] }], deductionAmountTextClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "deductionAmountTextClass", required: false }] }] } });
+
+class PayslipDetailsCardComponent {
+    employeeDetails = input.required(...(ngDevMode ? [{ debugName: "employeeDetails" }] : /* istanbul ignore next */ []));
+    payMonthDate = input(null, ...(ngDevMode ? [{ debugName: "payMonthDate" }] : /* istanbul ignore next */ []));
+    pieDataSource = input([], ...(ngDevMode ? [{ debugName: "pieDataSource" }] : /* istanbul ignore next */ []));
+    actualBasicSalaryDetails = input([], ...(ngDevMode ? [{ debugName: "actualBasicSalaryDetails" }] : /* istanbul ignore next */ []));
+    cardContainerClass = input('card shadow-sm border-0 rounded-3 p-4', ...(ngDevMode ? [{ debugName: "cardContainerClass" }] : /* istanbul ignore next */ []));
+    contentRowClass = input('row g-4', ...(ngDevMode ? [{ debugName: "contentRowClass" }] : /* istanbul ignore next */ []));
+    detailsColumnClass = input('col-xl-6 col-md-12 order-2 order-xl-1', ...(ngDevMode ? [{ debugName: "detailsColumnClass" }] : /* istanbul ignore next */ []));
+    chartColumnClass = input('col-xl-6 col-md-12 d-flex align-items-start justify-content-center justify-content-xl-end order-1 order-xl-2 m-0', ...(ngDevMode ? [{ debugName: "chartColumnClass" }] : /* istanbul ignore next */ []));
+    isMobile = input(false, ...(ngDevMode ? [{ debugName: "isMobile" }] : /* istanbul ignore next */ []));
+    titleRowClass = input('d-flex align-items-center mb-4', ...(ngDevMode ? [{ debugName: "titleRowClass" }] : /* istanbul ignore next */ []));
+    salaryIconClass = input('text-primary fs-28 me-2', ...(ngDevMode ? [{ debugName: "salaryIconClass" }] : /* istanbul ignore next */ []));
+    titleClass = input('fw-medium fs-16 text-uppercase text-dark-gray', ...(ngDevMode ? [{ debugName: "titleClass" }] : /* istanbul ignore next */ []));
+    titleMonthClass = input('fw-normal text-capitalize', ...(ngDevMode ? [{ debugName: "titleMonthClass" }] : /* istanbul ignore next */ []));
+    sectionClass = input('mb-4', ...(ngDevMode ? [{ debugName: "sectionClass" }] : /* istanbul ignore next */ []));
+    sectionTitleClass = input('fs-14 fw-bold mb-2 text-primary', ...(ngDevMode ? [{ debugName: "sectionTitleClass" }] : /* istanbul ignore next */ []));
+    tableLabelClass = input('fw-normal mb-2 table-cell-sm text-ellipsis-one-line', ...(ngDevMode ? [{ debugName: "tableLabelClass" }] : /* istanbul ignore next */ []));
+    tablePrimaryLabelClass = input('fw-normal mb-2 table-cell-md text-ellipsis-one-line', ...(ngDevMode ? [{ debugName: "tablePrimaryLabelClass" }] : /* istanbul ignore next */ []));
+    tableValueClass = input('fw-medium mb-2 table-cell-sm text-ellipsis-one-line', ...(ngDevMode ? [{ debugName: "tableValueClass" }] : /* istanbul ignore next */ []));
+    tableSecondaryValueClass = input('text-ellipsis-one-line mb-2 table-cell-sm', ...(ngDevMode ? [{ debugName: "tableSecondaryValueClass" }] : /* istanbul ignore next */ []));
+    currencyCodeClass = input('fs-10', ...(ngDevMode ? [{ debugName: "currencyCodeClass" }] : /* istanbul ignore next */ []));
+    infoIconClass = input('light-info ms-1 cursor-pointer', ...(ngDevMode ? [{ debugName: "infoIconClass" }] : /* istanbul ignore next */ []));
+    popupWidth = input(600, ...(ngDevMode ? [{ debugName: "popupWidth" }] : /* istanbul ignore next */ []));
+    popupMaxHeight = input(400, ...(ngDevMode ? [{ debugName: "popupMaxHeight" }] : /* istanbul ignore next */ []));
+    popupShadingColor = input('rgba(0,0,0,0.4)', ...(ngDevMode ? [{ debugName: "popupShadingColor" }] : /* istanbul ignore next */ []));
+    popupHeaderRowClass = input('row mb-3 table-cell-sm', ...(ngDevMode ? [{ debugName: "popupHeaderRowClass" }] : /* istanbul ignore next */ []));
+    popupRowClass = input('row mb-3 table-cell-md', ...(ngDevMode ? [{ debugName: "popupRowClass" }] : /* istanbul ignore next */ []));
+    mobileChartWrapperClass = input('d-flex align-items-start justify-content-start', ...(ngDevMode ? [{ debugName: "mobileChartWrapperClass" }] : /* istanbul ignore next */ []));
+    negativePaletteColors = input(['#F78204', '#dee2e6'], ...(ngDevMode ? [{ debugName: "negativePaletteColors" }] : /* istanbul ignore next */ []));
+    positivePaletteColors = input(['#F78204', '#F7820480'], ...(ngDevMode ? [{ debugName: "positivePaletteColors" }] : /* istanbul ignore next */ []));
+    salaryTableRowClass = input('row', ...(ngDevMode ? [{ debugName: "salaryTableRowClass" }] : /* istanbul ignore next */ []));
+    labelColumnClass = input('col-5 text-start', ...(ngDevMode ? [{ debugName: "labelColumnClass" }] : /* istanbul ignore next */ []));
+    daysColumnClass = input('col-2 text-end fw-light mb-2', ...(ngDevMode ? [{ debugName: "daysColumnClass" }] : /* istanbul ignore next */ []));
+    daysHeaderClass = input('text-ellipsis-one-line mb-2 table-cell-md', ...(ngDevMode ? [{ debugName: "daysHeaderClass" }] : /* istanbul ignore next */ []));
+    amountColumnClass = input('offset-1 col-4 text-start', ...(ngDevMode ? [{ debugName: "amountColumnClass" }] : /* istanbul ignore next */ []));
+    salaryAmountColumnClass = input('offset-1 col-4 text-start', ...(ngDevMode ? [{ debugName: "salaryAmountColumnClass" }] : /* istanbul ignore next */ []));
+    allowanceAmountColumnClass = input('offset-1 col-3 text-start', ...(ngDevMode ? [{ debugName: "allowanceAmountColumnClass" }] : /* istanbul ignore next */ []));
+    totalsColumnClass = input('offset-3 col-4 text-start', ...(ngDevMode ? [{ debugName: "totalsColumnClass" }] : /* istanbul ignore next */ []));
+    viewDetailsLinkClass = input('text-primary fw-normal ms-1', ...(ngDevMode ? [{ debugName: "viewDetailsLinkClass" }] : /* istanbul ignore next */ []));
+    allowancesRowClass = input('row align-items-start', ...(ngDevMode ? [{ debugName: "allowancesRowClass" }] : /* istanbul ignore next */ []));
+    allowanceDaysClass = input('col-2 text-end table-cell-sm fw-light', ...(ngDevMode ? [{ debugName: "allowanceDaysClass" }] : /* istanbul ignore next */ []));
+    allowanceAmountWrapperClass = input('d-flex align-items-center fs-12 fw-medium mb-2 text-dark-gray', ...(ngDevMode ? [{ debugName: "allowanceAmountWrapperClass" }] : /* istanbul ignore next */ []));
+    allowanceAmountTextClass = input('w-30 text-nowrap', ...(ngDevMode ? [{ debugName: "allowanceAmountTextClass" }] : /* istanbul ignore next */ []));
+    tooltipContainerClass = input('text-white rounded overflow-hidden', ...(ngDevMode ? [{ debugName: "tooltipContainerClass" }] : /* istanbul ignore next */ []));
+    tooltipTextClass = input('text-ellipsis-one-line fs-12', ...(ngDevMode ? [{ debugName: "tooltipTextClass" }] : /* istanbul ignore next */ []));
+    tooltipCurrencyClass = input('fs-10', ...(ngDevMode ? [{ debugName: "tooltipCurrencyClass" }] : /* istanbul ignore next */ []));
+    tooltipAmountClass = input('fs-14 ms-1', ...(ngDevMode ? [{ debugName: "tooltipAmountClass" }] : /* istanbul ignore next */ []));
+    dividerRowClass = input('row', ...(ngDevMode ? [{ debugName: "dividerRowClass" }] : /* istanbul ignore next */ []));
+    dividerColumnClass = input('col-12', ...(ngDevMode ? [{ debugName: "dividerColumnClass" }] : /* istanbul ignore next */ []));
+    deductionsSectionRowClass = input('row mt-4', ...(ngDevMode ? [{ debugName: "deductionsSectionRowClass" }] : /* istanbul ignore next */ []));
+    deductionsSectionColumnClass = input('col-xl-6 col-md-12', ...(ngDevMode ? [{ debugName: "deductionsSectionColumnClass" }] : /* istanbul ignore next */ []));
+    deductionsInnerRowClass = input('row', ...(ngDevMode ? [{ debugName: "deductionsInnerRowClass" }] : /* istanbul ignore next */ []));
+    deductionDaysClass = input('col-2 text-end table-cell-sm fw-light', ...(ngDevMode ? [{ debugName: "deductionDaysClass" }] : /* istanbul ignore next */ []));
+    deductionAmountTextClass = input('fw-normal mb-2 table-cell-sm text-nowrap', ...(ngDevMode ? [{ debugName: "deductionAmountTextClass" }] : /* istanbul ignore next */ []));
+    salaryIcon = faMoneyCheckDollarPen;
+    infoIcon = faCircleInfo;
+    popupVisible = signal(false, ...(ngDevMode ? [{ debugName: "popupVisible" }] : /* istanbul ignore next */ []));
+    chartPaletteColors = computed(() => this.employeeDetails().NetSalary < 0 ? this.negativePaletteColors() : this.positivePaletteColors(), ...(ngDevMode ? [{ debugName: "chartPaletteColors" }] : /* istanbul ignore next */ []));
+    commonMethod = inject(CommonMethods);
+    screen = inject(SkyScreenService);
+    doughnutChartInfo = computed(() => ({
+        data: this.pieDataSource().map((item) => ({
+            name: item.Text,
+            value: item.Value,
+            extra: { formattedValue: item.FormattedValue, valueColor: item.ValueColor },
+        })),
+        colors: this.chartPaletteColors(),
+        innerRadius: 0.8,
+        height: 200,
+    }), ...(ngDevMode ? [{ debugName: "doughnutChartInfo" }] : /* istanbul ignore next */ []));
+    useMobileChart = computed(() => this.isMobile() || this.screen.isXSmallScreen() || this.screen.isSmallScreen() || this.screen.isMediumScreen(), ...(ngDevMode ? [{ debugName: "useMobileChart" }] : /* istanbul ignore next */ []));
+    onCloseActualBasicSalaryDetailsPopupHandler() {
+        this.popupVisible.set(false);
+    }
+    onViewActualBasicSalaryDetailsClick() {
+        this.popupVisible.set(true);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: PayslipDetailsCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: PayslipDetailsCardComponent, isStandalone: true, selector: "payroll-payslip-details-card", inputs: { employeeDetails: { classPropertyName: "employeeDetails", publicName: "employeeDetails", isSignal: true, isRequired: true, transformFunction: null }, payMonthDate: { classPropertyName: "payMonthDate", publicName: "payMonthDate", isSignal: true, isRequired: false, transformFunction: null }, pieDataSource: { classPropertyName: "pieDataSource", publicName: "pieDataSource", isSignal: true, isRequired: false, transformFunction: null }, actualBasicSalaryDetails: { classPropertyName: "actualBasicSalaryDetails", publicName: "actualBasicSalaryDetails", isSignal: true, isRequired: false, transformFunction: null }, cardContainerClass: { classPropertyName: "cardContainerClass", publicName: "cardContainerClass", isSignal: true, isRequired: false, transformFunction: null }, contentRowClass: { classPropertyName: "contentRowClass", publicName: "contentRowClass", isSignal: true, isRequired: false, transformFunction: null }, detailsColumnClass: { classPropertyName: "detailsColumnClass", publicName: "detailsColumnClass", isSignal: true, isRequired: false, transformFunction: null }, chartColumnClass: { classPropertyName: "chartColumnClass", publicName: "chartColumnClass", isSignal: true, isRequired: false, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null }, titleRowClass: { classPropertyName: "titleRowClass", publicName: "titleRowClass", isSignal: true, isRequired: false, transformFunction: null }, salaryIconClass: { classPropertyName: "salaryIconClass", publicName: "salaryIconClass", isSignal: true, isRequired: false, transformFunction: null }, titleClass: { classPropertyName: "titleClass", publicName: "titleClass", isSignal: true, isRequired: false, transformFunction: null }, titleMonthClass: { classPropertyName: "titleMonthClass", publicName: "titleMonthClass", isSignal: true, isRequired: false, transformFunction: null }, sectionClass: { classPropertyName: "sectionClass", publicName: "sectionClass", isSignal: true, isRequired: false, transformFunction: null }, sectionTitleClass: { classPropertyName: "sectionTitleClass", publicName: "sectionTitleClass", isSignal: true, isRequired: false, transformFunction: null }, tableLabelClass: { classPropertyName: "tableLabelClass", publicName: "tableLabelClass", isSignal: true, isRequired: false, transformFunction: null }, tablePrimaryLabelClass: { classPropertyName: "tablePrimaryLabelClass", publicName: "tablePrimaryLabelClass", isSignal: true, isRequired: false, transformFunction: null }, tableValueClass: { classPropertyName: "tableValueClass", publicName: "tableValueClass", isSignal: true, isRequired: false, transformFunction: null }, tableSecondaryValueClass: { classPropertyName: "tableSecondaryValueClass", publicName: "tableSecondaryValueClass", isSignal: true, isRequired: false, transformFunction: null }, currencyCodeClass: { classPropertyName: "currencyCodeClass", publicName: "currencyCodeClass", isSignal: true, isRequired: false, transformFunction: null }, infoIconClass: { classPropertyName: "infoIconClass", publicName: "infoIconClass", isSignal: true, isRequired: false, transformFunction: null }, popupWidth: { classPropertyName: "popupWidth", publicName: "popupWidth", isSignal: true, isRequired: false, transformFunction: null }, popupMaxHeight: { classPropertyName: "popupMaxHeight", publicName: "popupMaxHeight", isSignal: true, isRequired: false, transformFunction: null }, popupShadingColor: { classPropertyName: "popupShadingColor", publicName: "popupShadingColor", isSignal: true, isRequired: false, transformFunction: null }, popupHeaderRowClass: { classPropertyName: "popupHeaderRowClass", publicName: "popupHeaderRowClass", isSignal: true, isRequired: false, transformFunction: null }, popupRowClass: { classPropertyName: "popupRowClass", publicName: "popupRowClass", isSignal: true, isRequired: false, transformFunction: null }, mobileChartWrapperClass: { classPropertyName: "mobileChartWrapperClass", publicName: "mobileChartWrapperClass", isSignal: true, isRequired: false, transformFunction: null }, negativePaletteColors: { classPropertyName: "negativePaletteColors", publicName: "negativePaletteColors", isSignal: true, isRequired: false, transformFunction: null }, positivePaletteColors: { classPropertyName: "positivePaletteColors", publicName: "positivePaletteColors", isSignal: true, isRequired: false, transformFunction: null }, salaryTableRowClass: { classPropertyName: "salaryTableRowClass", publicName: "salaryTableRowClass", isSignal: true, isRequired: false, transformFunction: null }, labelColumnClass: { classPropertyName: "labelColumnClass", publicName: "labelColumnClass", isSignal: true, isRequired: false, transformFunction: null }, daysColumnClass: { classPropertyName: "daysColumnClass", publicName: "daysColumnClass", isSignal: true, isRequired: false, transformFunction: null }, daysHeaderClass: { classPropertyName: "daysHeaderClass", publicName: "daysHeaderClass", isSignal: true, isRequired: false, transformFunction: null }, amountColumnClass: { classPropertyName: "amountColumnClass", publicName: "amountColumnClass", isSignal: true, isRequired: false, transformFunction: null }, salaryAmountColumnClass: { classPropertyName: "salaryAmountColumnClass", publicName: "salaryAmountColumnClass", isSignal: true, isRequired: false, transformFunction: null }, allowanceAmountColumnClass: { classPropertyName: "allowanceAmountColumnClass", publicName: "allowanceAmountColumnClass", isSignal: true, isRequired: false, transformFunction: null }, totalsColumnClass: { classPropertyName: "totalsColumnClass", publicName: "totalsColumnClass", isSignal: true, isRequired: false, transformFunction: null }, viewDetailsLinkClass: { classPropertyName: "viewDetailsLinkClass", publicName: "viewDetailsLinkClass", isSignal: true, isRequired: false, transformFunction: null }, allowancesRowClass: { classPropertyName: "allowancesRowClass", publicName: "allowancesRowClass", isSignal: true, isRequired: false, transformFunction: null }, allowanceDaysClass: { classPropertyName: "allowanceDaysClass", publicName: "allowanceDaysClass", isSignal: true, isRequired: false, transformFunction: null }, allowanceAmountWrapperClass: { classPropertyName: "allowanceAmountWrapperClass", publicName: "allowanceAmountWrapperClass", isSignal: true, isRequired: false, transformFunction: null }, allowanceAmountTextClass: { classPropertyName: "allowanceAmountTextClass", publicName: "allowanceAmountTextClass", isSignal: true, isRequired: false, transformFunction: null }, tooltipContainerClass: { classPropertyName: "tooltipContainerClass", publicName: "tooltipContainerClass", isSignal: true, isRequired: false, transformFunction: null }, tooltipTextClass: { classPropertyName: "tooltipTextClass", publicName: "tooltipTextClass", isSignal: true, isRequired: false, transformFunction: null }, tooltipCurrencyClass: { classPropertyName: "tooltipCurrencyClass", publicName: "tooltipCurrencyClass", isSignal: true, isRequired: false, transformFunction: null }, tooltipAmountClass: { classPropertyName: "tooltipAmountClass", publicName: "tooltipAmountClass", isSignal: true, isRequired: false, transformFunction: null }, dividerRowClass: { classPropertyName: "dividerRowClass", publicName: "dividerRowClass", isSignal: true, isRequired: false, transformFunction: null }, dividerColumnClass: { classPropertyName: "dividerColumnClass", publicName: "dividerColumnClass", isSignal: true, isRequired: false, transformFunction: null }, deductionsSectionRowClass: { classPropertyName: "deductionsSectionRowClass", publicName: "deductionsSectionRowClass", isSignal: true, isRequired: false, transformFunction: null }, deductionsSectionColumnClass: { classPropertyName: "deductionsSectionColumnClass", publicName: "deductionsSectionColumnClass", isSignal: true, isRequired: false, transformFunction: null }, deductionsInnerRowClass: { classPropertyName: "deductionsInnerRowClass", publicName: "deductionsInnerRowClass", isSignal: true, isRequired: false, transformFunction: null }, deductionDaysClass: { classPropertyName: "deductionDaysClass", publicName: "deductionDaysClass", isSignal: true, isRequired: false, transformFunction: null }, deductionAmountTextClass: { classPropertyName: "deductionAmountTextClass", publicName: "deductionAmountTextClass", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div [class]=\"cardContainerClass()\">\n  <div [class]=\"contentRowClass()\">\n    <div [class]=\"detailsColumnClass()\">\n      <div [class]=\"titleRowClass()\">\n        <fa-icon [icon]=\"salaryIcon\" [class]=\"salaryIconClass()\"></fa-icon>\n        <h5 [class]=\"titleClass()\">\n          {{ 'Salary' | PayrollTranslate }}\n          <span [class]=\"titleMonthClass()\">({{ payMonthDate() | date: 'MMM yyyy' }})</span>\n        </h5>\n      </div>\n\n      @if (useMobileChart()) {\n        <div [class]=\"mobileChartWrapperClass()\">\n          <sky-doughnut-chart [info]=\"doughnutChartInfo()\" [hasBorder]=\"false\">\n            <ng-template #centerContent>\n              <div class=\"d-flex flex-column align-items-center text-center lh-sm\">\n                <span class=\"fs-12 fw-normal\">{{ 'GrossSalary' | PayrollTranslate }}</span>\n                <span class=\"fs-16 fw-bold\">\n                  {{ commonMethod.currencyDecimalFormat(employeeDetails().GrossSalary, employeeDetails().CurrencyDecimals) }}\n                </span>\n                <span class=\"fs-10 fw-normal\">{{ employeeDetails().CurrencyCode }}</span>\n              </div>\n            </ng-template>\n            <ng-template #legendItem let-item>\n              <div class=\"d-flex flex-column fs-12 text-dark-gray\">\n                <span class=\"fw-normal\">{{ item.name }}</span>\n                <b [style.color]=\"item.extra?.valueColor\">{{ item.extra?.formattedValue }}</b>\n              </div>\n            </ng-template>\n          </sky-doughnut-chart>\n        </div>\n      }\n      <payroll-payslip-salary-table\n        [employeeDetails]=\"employeeDetails()\"\n        [sectionClass]=\"sectionClass()\"\n        [salaryTableRowClass]=\"salaryTableRowClass()\"\n        [labelColumnClass]=\"labelColumnClass()\"\n        [daysColumnClass]=\"daysColumnClass()\"\n        [daysHeaderClass]=\"daysHeaderClass()\"\n        [amountColumnClass]=\"salaryAmountColumnClass()\"\n        [tablePrimaryLabelClass]=\"tablePrimaryLabelClass()\"\n        [tableLabelClass]=\"tableLabelClass()\"\n        [tableValueClass]=\"tableValueClass()\"\n        [tableSecondaryValueClass]=\"tableSecondaryValueClass()\"\n        [currencyCodeClass]=\"currencyCodeClass()\"\n        [viewDetailsLinkClass]=\"viewDetailsLinkClass()\"\n        (viewActualBasicSalaryDetailsClick)=\"onViewActualBasicSalaryDetailsClick()\"\n      ></payroll-payslip-salary-table>\n\n      <payroll-payslip-allowances-table\n        [employeeDetails]=\"employeeDetails()\"\n        [sectionClass]=\"sectionClass()\"\n        [allowancesRowClass]=\"allowancesRowClass()\"\n        [labelColumnClass]=\"labelColumnClass()\"\n        [totalsColumnClass]=\"totalsColumnClass()\"\n        [sectionTitleClass]=\"sectionTitleClass()\"\n        [tableLabelClass]=\"tableLabelClass()\"\n        [allowanceDaysClass]=\"allowanceDaysClass()\"\n        [amountColumnClass]=\"allowanceAmountColumnClass()\"\n        [allowanceAmountWrapperClass]=\"allowanceAmountWrapperClass()\"\n        [allowanceAmountTextClass]=\"allowanceAmountTextClass()\"\n        [infoIconClass]=\"infoIconClass()\"\n        [tooltipContainerClass]=\"tooltipContainerClass()\"\n        [tooltipTextClass]=\"tooltipTextClass()\"\n        [tooltipCurrencyClass]=\"tooltipCurrencyClass()\"\n        [tooltipAmountClass]=\"tooltipAmountClass()\"\n      ></payroll-payslip-allowances-table>\n    </div>\n\n    @if (!useMobileChart()) {\n      <div [class]=\"chartColumnClass()\">\n        <sky-doughnut-chart [info]=\"doughnutChartInfo()\" [hasBorder]=\"false\">\n          <ng-template #centerContent>\n            <div class=\"d-flex flex-column align-items-center text-center lh-sm\">\n              <span class=\"fs-12 fw-normal\">{{ 'GrossSalary' | PayrollTranslate }}</span>\n              <span class=\"fs-16 fw-bold\">\n                {{ commonMethod.currencyDecimalFormat(employeeDetails().GrossSalary, employeeDetails().CurrencyDecimals) }}\n              </span>\n              <span class=\"fs-10 fw-normal\">{{ employeeDetails().CurrencyCode }}</span>\n            </div>\n          </ng-template>\n          <ng-template #legendItem let-item>\n            <div class=\"d-flex flex-column fs-12 text-dark-gray\">\n              <span class=\"fw-normal\">{{ item.name }}</span>\n              <b [style.color]=\"item.extra?.valueColor\">{{ item.extra?.formattedValue }}</b>\n            </div>\n          </ng-template>\n        </sky-doughnut-chart>\n      </div>\n    }\n  </div>\n\n  <payroll-payslip-deductions-table\n    [employeeDetails]=\"employeeDetails()\"\n    [dividerRowClass]=\"dividerRowClass()\"\n    [dividerColumnClass]=\"dividerColumnClass()\"\n    [deductionsSectionRowClass]=\"deductionsSectionRowClass()\"\n    [deductionsSectionColumnClass]=\"deductionsSectionColumnClass()\"\n    [deductionsInnerRowClass]=\"deductionsInnerRowClass()\"\n    [labelColumnClass]=\"labelColumnClass()\"\n    [sectionTitleClass]=\"sectionTitleClass()\"\n    [totalsColumnClass]=\"totalsColumnClass()\"\n    [tableLabelClass]=\"tableLabelClass()\"\n    [deductionDaysClass]=\"deductionDaysClass()\"\n    [amountColumnClass]=\"amountColumnClass()\"\n    [deductionAmountTextClass]=\"deductionAmountTextClass()\"\n  ></payroll-payslip-deductions-table>\n</div>\n\n<payroll-actual-basic-details-popup\n  [currencyCode]=\"employeeDetails().CurrencyCode\"\n  [currencyDecimals]=\"employeeDetails().CurrencyDecimals\"\n  [actualBasicSalaryDetails]=\"actualBasicSalaryDetails()\"\n  [popupVisible]=\"popupVisible()\"\n  [popupWidth]=\"popupWidth()\"\n  [popupMaxHeight]=\"popupMaxHeight()\"\n  [popupShadingColor]=\"popupShadingColor()\"\n  [popupHeaderRowClass]=\"popupHeaderRowClass()\"\n  [popupRowClass]=\"popupRowClass()\"\n  (closePopupClickHandler)=\"onCloseActualBasicSalaryDetailsPopupHandler()\"\n></payroll-actual-basic-details-popup>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i1$3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }, { kind: "component", type: SkyDoughnutChartComponent, selector: "sky-doughnut-chart", inputs: ["info", "rootWrapperClass", "chartColumnWrapperClass", "hasBorder", "chartItemPaddingClass", "chartFrameWrapperClass", "tooltipBadgeClass", "chartOverlayWrapperClass", "legendColumnWrapperClass", "legendListWrapperClass", "legendItemWrapperClass", "legendItemDotClass", "chartId", "chartType", "tooltipColor", "tooltipBorder", "tooltipShadow", "tooltipFormatType", "tooltipFormatPrecision", "seriesArgumentField", "seriesValueField", "seriesLabelVisible", "legendVisible", "seriesBorderVisible"] }, { kind: "component", type: ActualBasicDetailsPopupComponent, selector: "payroll-actual-basic-details-popup", inputs: ["popupVisible", "currencyCode", "currencyDecimals", "actualBasicSalaryDetails", "popupWidth", "popupMaxHeight", "popupShadingColor", "popupTitleKey", "popupHeaderRowClass", "popupRowClass"], outputs: ["closePopupClickHandler"] }, { kind: "component", type: PayslipSalaryTableComponent, selector: "payroll-payslip-salary-table", inputs: ["employeeDetails", "sectionClass", "salaryTableRowClass", "labelColumnClass", "daysColumnClass", "daysHeaderClass", "amountColumnClass", "tablePrimaryLabelClass", "tableLabelClass", "tableValueClass", "tableSecondaryValueClass", "currencyCodeClass", "viewDetailsLinkClass"], outputs: ["viewActualBasicSalaryDetailsClick"] }, { kind: "component", type: PayslipAllowancesTableComponent, selector: "payroll-payslip-allowances-table", inputs: ["employeeDetails", "sectionClass", "allowancesRowClass", "labelColumnClass", "totalsColumnClass", "sectionTitleClass", "tableLabelClass", "allowanceDaysClass", "amountColumnClass", "allowanceAmountWrapperClass", "allowanceAmountTextClass", "infoIconClass", "tooltipContainerClass", "tooltipTextClass", "tooltipCurrencyClass", "tooltipAmountClass"] }, { kind: "component", type: PayslipDeductionsTableComponent, selector: "payroll-payslip-deductions-table", inputs: ["employeeDetails", "dividerRowClass", "dividerColumnClass", "deductionsSectionRowClass", "deductionsSectionColumnClass", "deductionsInnerRowClass", "labelColumnClass", "sectionTitleClass", "totalsColumnClass", "tableLabelClass", "deductionDaysClass", "amountColumnClass", "deductionAmountTextClass"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "pipe", type: PayrollTranslatePipe, name: "PayrollTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: PayslipDetailsCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'payroll-payslip-details-card', standalone: true, imports: [
+                        CommonModule,
+                        FontAwesomeModule,
+                        SkyDoughnutChartComponent,
+                        PayrollTranslatePipe,
+                        ActualBasicDetailsPopupComponent,
+                        PayslipSalaryTableComponent,
+                        PayslipAllowancesTableComponent,
+                        PayslipDeductionsTableComponent,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"cardContainerClass()\">\n  <div [class]=\"contentRowClass()\">\n    <div [class]=\"detailsColumnClass()\">\n      <div [class]=\"titleRowClass()\">\n        <fa-icon [icon]=\"salaryIcon\" [class]=\"salaryIconClass()\"></fa-icon>\n        <h5 [class]=\"titleClass()\">\n          {{ 'Salary' | PayrollTranslate }}\n          <span [class]=\"titleMonthClass()\">({{ payMonthDate() | date: 'MMM yyyy' }})</span>\n        </h5>\n      </div>\n\n      @if (useMobileChart()) {\n        <div [class]=\"mobileChartWrapperClass()\">\n          <sky-doughnut-chart [info]=\"doughnutChartInfo()\" [hasBorder]=\"false\">\n            <ng-template #centerContent>\n              <div class=\"d-flex flex-column align-items-center text-center lh-sm\">\n                <span class=\"fs-12 fw-normal\">{{ 'GrossSalary' | PayrollTranslate }}</span>\n                <span class=\"fs-16 fw-bold\">\n                  {{ commonMethod.currencyDecimalFormat(employeeDetails().GrossSalary, employeeDetails().CurrencyDecimals) }}\n                </span>\n                <span class=\"fs-10 fw-normal\">{{ employeeDetails().CurrencyCode }}</span>\n              </div>\n            </ng-template>\n            <ng-template #legendItem let-item>\n              <div class=\"d-flex flex-column fs-12 text-dark-gray\">\n                <span class=\"fw-normal\">{{ item.name }}</span>\n                <b [style.color]=\"item.extra?.valueColor\">{{ item.extra?.formattedValue }}</b>\n              </div>\n            </ng-template>\n          </sky-doughnut-chart>\n        </div>\n      }\n      <payroll-payslip-salary-table\n        [employeeDetails]=\"employeeDetails()\"\n        [sectionClass]=\"sectionClass()\"\n        [salaryTableRowClass]=\"salaryTableRowClass()\"\n        [labelColumnClass]=\"labelColumnClass()\"\n        [daysColumnClass]=\"daysColumnClass()\"\n        [daysHeaderClass]=\"daysHeaderClass()\"\n        [amountColumnClass]=\"salaryAmountColumnClass()\"\n        [tablePrimaryLabelClass]=\"tablePrimaryLabelClass()\"\n        [tableLabelClass]=\"tableLabelClass()\"\n        [tableValueClass]=\"tableValueClass()\"\n        [tableSecondaryValueClass]=\"tableSecondaryValueClass()\"\n        [currencyCodeClass]=\"currencyCodeClass()\"\n        [viewDetailsLinkClass]=\"viewDetailsLinkClass()\"\n        (viewActualBasicSalaryDetailsClick)=\"onViewActualBasicSalaryDetailsClick()\"\n      ></payroll-payslip-salary-table>\n\n      <payroll-payslip-allowances-table\n        [employeeDetails]=\"employeeDetails()\"\n        [sectionClass]=\"sectionClass()\"\n        [allowancesRowClass]=\"allowancesRowClass()\"\n        [labelColumnClass]=\"labelColumnClass()\"\n        [totalsColumnClass]=\"totalsColumnClass()\"\n        [sectionTitleClass]=\"sectionTitleClass()\"\n        [tableLabelClass]=\"tableLabelClass()\"\n        [allowanceDaysClass]=\"allowanceDaysClass()\"\n        [amountColumnClass]=\"allowanceAmountColumnClass()\"\n        [allowanceAmountWrapperClass]=\"allowanceAmountWrapperClass()\"\n        [allowanceAmountTextClass]=\"allowanceAmountTextClass()\"\n        [infoIconClass]=\"infoIconClass()\"\n        [tooltipContainerClass]=\"tooltipContainerClass()\"\n        [tooltipTextClass]=\"tooltipTextClass()\"\n        [tooltipCurrencyClass]=\"tooltipCurrencyClass()\"\n        [tooltipAmountClass]=\"tooltipAmountClass()\"\n      ></payroll-payslip-allowances-table>\n    </div>\n\n    @if (!useMobileChart()) {\n      <div [class]=\"chartColumnClass()\">\n        <sky-doughnut-chart [info]=\"doughnutChartInfo()\" [hasBorder]=\"false\">\n          <ng-template #centerContent>\n            <div class=\"d-flex flex-column align-items-center text-center lh-sm\">\n              <span class=\"fs-12 fw-normal\">{{ 'GrossSalary' | PayrollTranslate }}</span>\n              <span class=\"fs-16 fw-bold\">\n                {{ commonMethod.currencyDecimalFormat(employeeDetails().GrossSalary, employeeDetails().CurrencyDecimals) }}\n              </span>\n              <span class=\"fs-10 fw-normal\">{{ employeeDetails().CurrencyCode }}</span>\n            </div>\n          </ng-template>\n          <ng-template #legendItem let-item>\n            <div class=\"d-flex flex-column fs-12 text-dark-gray\">\n              <span class=\"fw-normal\">{{ item.name }}</span>\n              <b [style.color]=\"item.extra?.valueColor\">{{ item.extra?.formattedValue }}</b>\n            </div>\n          </ng-template>\n        </sky-doughnut-chart>\n      </div>\n    }\n  </div>\n\n  <payroll-payslip-deductions-table\n    [employeeDetails]=\"employeeDetails()\"\n    [dividerRowClass]=\"dividerRowClass()\"\n    [dividerColumnClass]=\"dividerColumnClass()\"\n    [deductionsSectionRowClass]=\"deductionsSectionRowClass()\"\n    [deductionsSectionColumnClass]=\"deductionsSectionColumnClass()\"\n    [deductionsInnerRowClass]=\"deductionsInnerRowClass()\"\n    [labelColumnClass]=\"labelColumnClass()\"\n    [sectionTitleClass]=\"sectionTitleClass()\"\n    [totalsColumnClass]=\"totalsColumnClass()\"\n    [tableLabelClass]=\"tableLabelClass()\"\n    [deductionDaysClass]=\"deductionDaysClass()\"\n    [amountColumnClass]=\"amountColumnClass()\"\n    [deductionAmountTextClass]=\"deductionAmountTextClass()\"\n  ></payroll-payslip-deductions-table>\n</div>\n\n<payroll-actual-basic-details-popup\n  [currencyCode]=\"employeeDetails().CurrencyCode\"\n  [currencyDecimals]=\"employeeDetails().CurrencyDecimals\"\n  [actualBasicSalaryDetails]=\"actualBasicSalaryDetails()\"\n  [popupVisible]=\"popupVisible()\"\n  [popupWidth]=\"popupWidth()\"\n  [popupMaxHeight]=\"popupMaxHeight()\"\n  [popupShadingColor]=\"popupShadingColor()\"\n  [popupHeaderRowClass]=\"popupHeaderRowClass()\"\n  [popupRowClass]=\"popupRowClass()\"\n  (closePopupClickHandler)=\"onCloseActualBasicSalaryDetailsPopupHandler()\"\n></payroll-actual-basic-details-popup>\n" }]
+        }], propDecorators: { employeeDetails: [{ type: i0.Input, args: [{ isSignal: true, alias: "employeeDetails", required: true }] }], payMonthDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "payMonthDate", required: false }] }], pieDataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "pieDataSource", required: false }] }], actualBasicSalaryDetails: [{ type: i0.Input, args: [{ isSignal: true, alias: "actualBasicSalaryDetails", required: false }] }], cardContainerClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "cardContainerClass", required: false }] }], contentRowClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentRowClass", required: false }] }], detailsColumnClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "detailsColumnClass", required: false }] }], chartColumnClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "chartColumnClass", required: false }] }], isMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMobile", required: false }] }], titleRowClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleRowClass", required: false }] }], salaryIconClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "salaryIconClass", required: false }] }], titleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleClass", required: false }] }], titleMonthClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleMonthClass", required: false }] }], sectionClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "sectionClass", required: false }] }], sectionTitleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "sectionTitleClass", required: false }] }], tableLabelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableLabelClass", required: false }] }], tablePrimaryLabelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "tablePrimaryLabelClass", required: false }] }], tableValueClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableValueClass", required: false }] }], tableSecondaryValueClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableSecondaryValueClass", required: false }] }], currencyCodeClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "currencyCodeClass", required: false }] }], infoIconClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "infoIconClass", required: false }] }], popupWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupWidth", required: false }] }], popupMaxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupMaxHeight", required: false }] }], popupShadingColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupShadingColor", required: false }] }], popupHeaderRowClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupHeaderRowClass", required: false }] }], popupRowClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupRowClass", required: false }] }], mobileChartWrapperClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileChartWrapperClass", required: false }] }], negativePaletteColors: [{ type: i0.Input, args: [{ isSignal: true, alias: "negativePaletteColors", required: false }] }], positivePaletteColors: [{ type: i0.Input, args: [{ isSignal: true, alias: "positivePaletteColors", required: false }] }], salaryTableRowClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "salaryTableRowClass", required: false }] }], labelColumnClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelColumnClass", required: false }] }], daysColumnClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "daysColumnClass", required: false }] }], daysHeaderClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "daysHeaderClass", required: false }] }], amountColumnClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "amountColumnClass", required: false }] }], salaryAmountColumnClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "salaryAmountColumnClass", required: false }] }], allowanceAmountColumnClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowanceAmountColumnClass", required: false }] }], totalsColumnClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalsColumnClass", required: false }] }], viewDetailsLinkClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewDetailsLinkClass", required: false }] }], allowancesRowClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowancesRowClass", required: false }] }], allowanceDaysClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowanceDaysClass", required: false }] }], allowanceAmountWrapperClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowanceAmountWrapperClass", required: false }] }], allowanceAmountTextClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowanceAmountTextClass", required: false }] }], tooltipContainerClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipContainerClass", required: false }] }], tooltipTextClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipTextClass", required: false }] }], tooltipCurrencyClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipCurrencyClass", required: false }] }], tooltipAmountClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipAmountClass", required: false }] }], dividerRowClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "dividerRowClass", required: false }] }], dividerColumnClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "dividerColumnClass", required: false }] }], deductionsSectionRowClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "deductionsSectionRowClass", required: false }] }], deductionsSectionColumnClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "deductionsSectionColumnClass", required: false }] }], deductionsInnerRowClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "deductionsInnerRowClass", required: false }] }], deductionDaysClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "deductionDaysClass", required: false }] }], deductionAmountTextClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "deductionAmountTextClass", required: false }] }] } });
+
+class EmptyPayslipCardComponent {
+    hidePayslip = input(false, ...(ngDevMode ? [{ debugName: "hidePayslip" }] : /* istanbul ignore next */ []));
+    cardContainerClass = input('card border shadow-sm rounded-3', ...(ngDevMode ? [{ debugName: "cardContainerClass" }] : /* istanbul ignore next */ []));
+    cardBodyClass = input('card-body text-center py-5', ...(ngDevMode ? [{ debugName: "cardBodyClass" }] : /* istanbul ignore next */ []));
+    iconClass = input('fs-28 me-2 light-info mb-3', ...(ngDevMode ? [{ debugName: "iconClass" }] : /* istanbul ignore next */ []));
+    messageClass = input('fs-20 fw-400 mb-2 text-dark', ...(ngDevMode ? [{ debugName: "messageClass" }] : /* istanbul ignore next */ []));
+    helpTextClass = input('fs-16 fw-400 mb-0 text-dark', ...(ngDevMode ? [{ debugName: "helpTextClass" }] : /* istanbul ignore next */ []));
+    accessDeniedMessage = input('YouAreNotAllowedToViewThePayslip', ...(ngDevMode ? [{ debugName: "accessDeniedMessage" }] : /* istanbul ignore next */ []));
+    noPayslipMessage = input('NoPayslipAvailableYet', ...(ngDevMode ? [{ debugName: "noPayslipMessage" }] : /* istanbul ignore next */ []));
+    helpText = input('PleaseContactYourAdminForAnyHelp.', ...(ngDevMode ? [{ debugName: "helpText" }] : /* istanbul ignore next */ []));
+    accessDeniedIcon = input(faMoneyCheckDollarPen, ...(ngDevMode ? [{ debugName: "accessDeniedIcon" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: EmptyPayslipCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: EmptyPayslipCardComponent, isStandalone: true, selector: "payroll-empty-payslip-card", inputs: { hidePayslip: { classPropertyName: "hidePayslip", publicName: "hidePayslip", isSignal: true, isRequired: false, transformFunction: null }, cardContainerClass: { classPropertyName: "cardContainerClass", publicName: "cardContainerClass", isSignal: true, isRequired: false, transformFunction: null }, cardBodyClass: { classPropertyName: "cardBodyClass", publicName: "cardBodyClass", isSignal: true, isRequired: false, transformFunction: null }, iconClass: { classPropertyName: "iconClass", publicName: "iconClass", isSignal: true, isRequired: false, transformFunction: null }, messageClass: { classPropertyName: "messageClass", publicName: "messageClass", isSignal: true, isRequired: false, transformFunction: null }, helpTextClass: { classPropertyName: "helpTextClass", publicName: "helpTextClass", isSignal: true, isRequired: false, transformFunction: null }, accessDeniedMessage: { classPropertyName: "accessDeniedMessage", publicName: "accessDeniedMessage", isSignal: true, isRequired: false, transformFunction: null }, noPayslipMessage: { classPropertyName: "noPayslipMessage", publicName: "noPayslipMessage", isSignal: true, isRequired: false, transformFunction: null }, helpText: { classPropertyName: "helpText", publicName: "helpText", isSignal: true, isRequired: false, transformFunction: null }, accessDeniedIcon: { classPropertyName: "accessDeniedIcon", publicName: "accessDeniedIcon", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div [class]=\"cardContainerClass()\">\n  <div [class]=\"cardBodyClass()\">\n    <fa-icon [icon]=\"accessDeniedIcon()\" [class]=\"iconClass()\"></fa-icon>\n    <p [class]=\"messageClass()\">{{ (hidePayslip() ? accessDeniedMessage() : noPayslipMessage()) | PayrollTranslate }}!</p>\n\n    @if (hidePayslip()) {\n      <p [class]=\"helpTextClass()\">{{ helpText() | PayrollTranslate }}</p>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i1$3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }, { kind: "pipe", type: PayrollTranslatePipe, name: "PayrollTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: EmptyPayslipCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'payroll-empty-payslip-card', standalone: true, imports: [CommonModule, FontAwesomeModule, PayrollTranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"cardContainerClass()\">\n  <div [class]=\"cardBodyClass()\">\n    <fa-icon [icon]=\"accessDeniedIcon()\" [class]=\"iconClass()\"></fa-icon>\n    <p [class]=\"messageClass()\">{{ (hidePayslip() ? accessDeniedMessage() : noPayslipMessage()) | PayrollTranslate }}!</p>\n\n    @if (hidePayslip()) {\n      <p [class]=\"helpTextClass()\">{{ helpText() | PayrollTranslate }}</p>\n    }\n  </div>\n</div>\n" }]
+        }], propDecorators: { hidePayslip: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidePayslip", required: false }] }], cardContainerClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "cardContainerClass", required: false }] }], cardBodyClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "cardBodyClass", required: false }] }], iconClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconClass", required: false }] }], messageClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "messageClass", required: false }] }], helpTextClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "helpTextClass", required: false }] }], accessDeniedMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "accessDeniedMessage", required: false }] }], noPayslipMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "noPayslipMessage", required: false }] }], helpText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helpText", required: false }] }], accessDeniedIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "accessDeniedIcon", required: false }] }] } });
+
+class MyPayslipWidgetComponent {
+    baseUrl = input('', ...(ngDevMode ? [{ debugName: "baseUrl" }] : /* istanbul ignore next */ []));
+    payMonth = input(null, ...(ngDevMode ? [{ debugName: "payMonth" }] : /* istanbul ignore next */ []));
+    cardContainerClass = input('card shadow-sm border-0 rounded-3 p-4', ...(ngDevMode ? [{ debugName: "cardContainerClass" }] : /* istanbul ignore next */ []));
+    contentRowClass = input('row g-4', ...(ngDevMode ? [{ debugName: "contentRowClass" }] : /* istanbul ignore next */ []));
+    detailsColumnClass = input('col-xl-6 col-md-12 order-2 order-xl-1', ...(ngDevMode ? [{ debugName: "detailsColumnClass" }] : /* istanbul ignore next */ []));
+    chartColumnClass = input('col-xl-6 col-md-12 d-flex align-items-start justify-content-center justify-content-xl-end order-1 order-xl-2 m-0', ...(ngDevMode ? [{ debugName: "chartColumnClass" }] : /* istanbul ignore next */ []));
+    titleRowClass = input('d-flex align-items-center mb-4', ...(ngDevMode ? [{ debugName: "titleRowClass" }] : /* istanbul ignore next */ []));
+    salaryIconClass = input('text-primary fs-28 me-2', ...(ngDevMode ? [{ debugName: "salaryIconClass" }] : /* istanbul ignore next */ []));
+    titleClass = input('fw-medium fs-16 text-uppercase text-dark-gray', ...(ngDevMode ? [{ debugName: "titleClass" }] : /* istanbul ignore next */ []));
+    titleMonthClass = input('fw-normal text-capitalize', ...(ngDevMode ? [{ debugName: "titleMonthClass" }] : /* istanbul ignore next */ []));
+    sectionClass = input('mb-4', ...(ngDevMode ? [{ debugName: "sectionClass" }] : /* istanbul ignore next */ []));
+    sectionTitleClass = input('fs-14 fw-bold mb-2 text-primary', ...(ngDevMode ? [{ debugName: "sectionTitleClass" }] : /* istanbul ignore next */ []));
+    tableLabelClass = input('fw-normal mb-2 table-cell-sm text-ellipsis-one-line', ...(ngDevMode ? [{ debugName: "tableLabelClass" }] : /* istanbul ignore next */ []));
+    tablePrimaryLabelClass = input('fw-normal mb-2 table-cell-md text-ellipsis-one-line', ...(ngDevMode ? [{ debugName: "tablePrimaryLabelClass" }] : /* istanbul ignore next */ []));
+    tableValueClass = input('fw-medium mb-2 table-cell-sm text-ellipsis-one-line', ...(ngDevMode ? [{ debugName: "tableValueClass" }] : /* istanbul ignore next */ []));
+    tableSecondaryValueClass = input('text-ellipsis-one-line mb-2 table-cell-sm', ...(ngDevMode ? [{ debugName: "tableSecondaryValueClass" }] : /* istanbul ignore next */ []));
+    currencyCodeClass = input('fs-10', ...(ngDevMode ? [{ debugName: "currencyCodeClass" }] : /* istanbul ignore next */ []));
+    infoIconClass = input('light-info ms-1 cursor-pointer', ...(ngDevMode ? [{ debugName: "infoIconClass" }] : /* istanbul ignore next */ []));
+    popupWidth = input(600, ...(ngDevMode ? [{ debugName: "popupWidth" }] : /* istanbul ignore next */ []));
+    popupMaxHeight = input(400, ...(ngDevMode ? [{ debugName: "popupMaxHeight" }] : /* istanbul ignore next */ []));
+    popupShadingColor = input('rgba(0,0,0,0.4)', ...(ngDevMode ? [{ debugName: "popupShadingColor" }] : /* istanbul ignore next */ []));
+    popupHeaderRowClass = input('row mb-3 table-cell-sm', ...(ngDevMode ? [{ debugName: "popupHeaderRowClass" }] : /* istanbul ignore next */ []));
+    popupRowClass = input('row mb-3 table-cell-md', ...(ngDevMode ? [{ debugName: "popupRowClass" }] : /* istanbul ignore next */ []));
+    mobileChartWrapperClass = input('d-flex align-items-start justify-content-start', ...(ngDevMode ? [{ debugName: "mobileChartWrapperClass" }] : /* istanbul ignore next */ []));
+    salaryTableRowClass = input('row', ...(ngDevMode ? [{ debugName: "salaryTableRowClass" }] : /* istanbul ignore next */ []));
+    labelColumnClass = input('col-5 text-start', ...(ngDevMode ? [{ debugName: "labelColumnClass" }] : /* istanbul ignore next */ []));
+    daysColumnClass = input('col-2 text-end fw-light mb-2', ...(ngDevMode ? [{ debugName: "daysColumnClass" }] : /* istanbul ignore next */ []));
+    daysHeaderClass = input('text-ellipsis-one-line mb-2 table-cell-md', ...(ngDevMode ? [{ debugName: "daysHeaderClass" }] : /* istanbul ignore next */ []));
+    amountColumnClass = input('offset-1 col-3 text-start', ...(ngDevMode ? [{ debugName: "amountColumnClass" }] : /* istanbul ignore next */ []));
+    totalsColumnClass = input('offset-3 col-4 text-start', ...(ngDevMode ? [{ debugName: "totalsColumnClass" }] : /* istanbul ignore next */ []));
+    viewDetailsLinkClass = input('text-primary fw-normal ms-1', ...(ngDevMode ? [{ debugName: "viewDetailsLinkClass" }] : /* istanbul ignore next */ []));
+    allowancesRowClass = input('row align-items-start', ...(ngDevMode ? [{ debugName: "allowancesRowClass" }] : /* istanbul ignore next */ []));
+    allowanceDaysClass = input('col-2 text-end table-cell-sm fw-light', ...(ngDevMode ? [{ debugName: "allowanceDaysClass" }] : /* istanbul ignore next */ []));
+    allowanceAmountWrapperClass = input('d-flex align-items-center justify-content-between fs-12 fw-medium mb-2 text-dark-gray', ...(ngDevMode ? [{ debugName: "allowanceAmountWrapperClass" }] : /* istanbul ignore next */ []));
+    allowanceAmountTextClass = input('w-30 text-nowrap', ...(ngDevMode ? [{ debugName: "allowanceAmountTextClass" }] : /* istanbul ignore next */ []));
+    tooltipContainerClass = input('text-white rounded overflow-hidden', ...(ngDevMode ? [{ debugName: "tooltipContainerClass" }] : /* istanbul ignore next */ []));
+    tooltipTextClass = input('text-ellipsis-one-line fs-12', ...(ngDevMode ? [{ debugName: "tooltipTextClass" }] : /* istanbul ignore next */ []));
+    tooltipCurrencyClass = input('fs-10', ...(ngDevMode ? [{ debugName: "tooltipCurrencyClass" }] : /* istanbul ignore next */ []));
+    tooltipAmountClass = input('fs-14 ms-1', ...(ngDevMode ? [{ debugName: "tooltipAmountClass" }] : /* istanbul ignore next */ []));
+    dividerRowClass = input('row', ...(ngDevMode ? [{ debugName: "dividerRowClass" }] : /* istanbul ignore next */ []));
+    dividerColumnClass = input('col-12', ...(ngDevMode ? [{ debugName: "dividerColumnClass" }] : /* istanbul ignore next */ []));
+    deductionsSectionRowClass = input('row mt-4', ...(ngDevMode ? [{ debugName: "deductionsSectionRowClass" }] : /* istanbul ignore next */ []));
+    deductionsSectionColumnClass = input('col-xl-6 col-md-12', ...(ngDevMode ? [{ debugName: "deductionsSectionColumnClass" }] : /* istanbul ignore next */ []));
+    deductionsInnerRowClass = input('row', ...(ngDevMode ? [{ debugName: "deductionsInnerRowClass" }] : /* istanbul ignore next */ []));
+    deductionDaysClass = input('col-2 text-end table-cell-sm fw-light', ...(ngDevMode ? [{ debugName: "deductionDaysClass" }] : /* istanbul ignore next */ []));
+    deductionAmountTextClass = input('fw-normal mb-2 table-cell-sm text-nowrap', ...(ngDevMode ? [{ debugName: "deductionAmountTextClass" }] : /* istanbul ignore next */ []));
+    emptyCardContainerClass = input('card border shadow-sm rounded-3', ...(ngDevMode ? [{ debugName: "emptyCardContainerClass" }] : /* istanbul ignore next */ []));
+    emptyCardBodyClass = input('card-body text-center py-5', ...(ngDevMode ? [{ debugName: "emptyCardBodyClass" }] : /* istanbul ignore next */ []));
+    emptyIconClass = input('fs-28 me-2 light-info mb-3', ...(ngDevMode ? [{ debugName: "emptyIconClass" }] : /* istanbul ignore next */ []));
+    emptyMessageClass = input('fs-20 fw-400 mb-2 text-dark', ...(ngDevMode ? [{ debugName: "emptyMessageClass" }] : /* istanbul ignore next */ []));
+    emptyHelpTextClass = input('fs-16 fw-400 mb-0 text-dark', ...(ngDevMode ? [{ debugName: "emptyHelpTextClass" }] : /* istanbul ignore next */ []));
+    isMobile = input(false, ...(ngDevMode ? [{ debugName: "isMobile" }] : /* istanbul ignore next */ []));
+    hidePayslip = input(false, ...(ngDevMode ? [{ debugName: "hidePayslip" }] : /* istanbul ignore next */ []));
+    isFirstMonth = input(false, ...(ngDevMode ? [{ debugName: "isFirstMonth" }] : /* istanbul ignore next */ []));
+    accessDeniedMessage = input('YouAreNotAllowedToViewThePayslip', ...(ngDevMode ? [{ debugName: "accessDeniedMessage" }] : /* istanbul ignore next */ []));
+    noPayslipMessage = input('NoPayslipAvailableYet', ...(ngDevMode ? [{ debugName: "noPayslipMessage" }] : /* istanbul ignore next */ []));
+    helpText = input('PleaseContactYourAdminForAnyHelp.', ...(ngDevMode ? [{ debugName: "helpText" }] : /* istanbul ignore next */ []));
+    accessDeniedIcon = input(faMoneyCheckDollarPen, ...(ngDevMode ? [{ debugName: "accessDeniedIcon" }] : /* istanbul ignore next */ []));
+    isLoadingChanged = output();
+    errorOccurred = output();
+    salaryIcon = faMoneyCheckDollarPen;
+    employeeDetails = signal(null, ...(ngDevMode ? [{ debugName: "employeeDetails" }] : /* istanbul ignore next */ []));
+    actualBasicSalaryDetails = signal([], ...(ngDevMode ? [{ debugName: "actualBasicSalaryDetails" }] : /* istanbul ignore next */ []));
+    pieDataSource = signal([], ...(ngDevMode ? [{ debugName: "pieDataSource" }] : /* istanbul ignore next */ []));
+    selectedPayMonth = signal(null, ...(ngDevMode ? [{ debugName: "selectedPayMonth" }] : /* istanbul ignore next */ []));
+    isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []));
+    commonMethod = inject(CommonMethods);
+    translatePipe = inject(PayrollTranslatePipe);
+    payrollWidgetsService = inject(PayrollSelfWidgetsService);
+    constructor() {
+        effect(() => {
+            const baseUrl = this.baseUrl();
+            const payMonth = this.payMonth();
+            if (!baseUrl) {
+                this.resetState();
+                return;
+            }
+            if (!this.hidePayslip() && payMonth) {
+                this.selectedPayMonth.set(payMonth);
+                this.loadEmployeePayslip(payMonth);
+                return;
+            }
+            this.resetDataOnly();
+        });
+    }
+    payMonthDate = computed(() => {
+        const selectedPayMonth = this.selectedPayMonth();
+        if (!selectedPayMonth) {
+            return null;
+        }
+        const dashParts = selectedPayMonth.split('-');
+        if (dashParts.length === 2) {
+            const year = Number(dashParts[0]);
+            const month = Number(dashParts[1]) - 1;
+            if (!Number.isNaN(month) && !Number.isNaN(year)) {
+                return new Date(year, month, 1);
+            }
+        }
+        const slashParts = selectedPayMonth.split('/');
+        if (slashParts.length !== 2) {
+            return null;
+        }
+        const month = Number(slashParts[0]) - 1;
+        const year = Number(slashParts[1]);
+        if (Number.isNaN(month) || Number.isNaN(year)) {
+            return null;
+        }
+        return new Date(year, month, 1);
+    }, ...(ngDevMode ? [{ debugName: "payMonthDate" }] : /* istanbul ignore next */ []));
+    loadEmployeePayslip(payMonth, emitLoading = true) {
+        if (emitLoading) {
+            this.setLoading(true);
+        }
+        this.payrollWidgetsService
+            .getPayslipDetails(this.baseUrl(), payMonth)
+            .pipe(finalize(() => {
+            this.setLoading(false);
+        }))
+            .subscribe({
+            next: (response) => {
+                const payload = response?.ResponseData ?? null;
+                this.employeeDetails.set(payload);
+                if (this.hidePayslip() || !payload) {
+                    this.actualBasicSalaryDetails.set([]);
+                    this.pieDataSource.set([]);
+                    return;
+                }
+                this.actualBasicSalaryDetails.set(this.buildActualBasicSalaryDetails(payload));
+                this.pieDataSource.set(this.buildPieDataSource(payload));
+            },
+            error: (error) => {
+                this.errorOccurred.emit(error.error.ResponseData.Errors[0].Message);
+                this.resetDataOnly();
+            },
+        });
+    }
+    buildActualBasicSalaryDetails(employeeDetails) {
+        const details = [
+            {
+                Attendance: this.translatePipe.transform('WorkingDays'),
+                AllowanceDays: employeeDetails.WorkingDays,
+                Amount: employeeDetails.WorkingDaysCost,
+            },
+        ];
+        for (const paidVacation of employeeDetails.PaidVacations ?? []) {
+            details.push({
+                Attendance: paidVacation.VacationTypeName,
+                AllowanceDays: paidVacation.VacationDays,
+                Amount: paidVacation.VacationDaysCost,
+            });
+        }
+        return details;
+    }
+    buildPieDataSource(employeeDetails) {
+        const decimals = employeeDetails.CurrencyDecimals ?? 0;
+        const netSalary = employeeDetails.NetSalary ?? 0;
+        const netSalaryColor = netSalary < 0 ? 'var(--bs-danger)' : 'var(--bs-bg-dark-gray)';
+        return [
+            {
+                Text: this.translatePipe.transform('NetSalary'),
+                Value: netSalary < 0 ? 0 : netSalary,
+                FormattedValue: this.commonMethod.currencyDecimalFormat(netSalary, decimals) ?? '',
+                ValueColor: netSalaryColor,
+            },
+            {
+                Text: this.translatePipe.transform('Deductions'),
+                Value: employeeDetails.TotalDeductions ?? 0,
+                FormattedValue: this.commonMethod.currencyDecimalFormat(employeeDetails.TotalDeductions ?? 0, decimals) ?? '',
+                ValueColor: 'var(--bs-danger)',
+            },
+        ];
+    }
+    resetState() {
+        this.resetDataOnly();
+        this.setLoading(false);
+    }
+    resetDataOnly() {
+        this.employeeDetails.set(null);
+        this.actualBasicSalaryDetails.set([]);
+        this.pieDataSource.set([]);
+        this.selectedPayMonth.set(null);
+    }
+    setLoading(isLoading) {
+        this.isLoading.set(isLoading);
+        this.isLoadingChanged.emit(isLoading);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: MyPayslipWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: MyPayslipWidgetComponent, isStandalone: true, selector: "payroll-my-payslip-widget", inputs: { baseUrl: { classPropertyName: "baseUrl", publicName: "baseUrl", isSignal: true, isRequired: false, transformFunction: null }, payMonth: { classPropertyName: "payMonth", publicName: "payMonth", isSignal: true, isRequired: false, transformFunction: null }, cardContainerClass: { classPropertyName: "cardContainerClass", publicName: "cardContainerClass", isSignal: true, isRequired: false, transformFunction: null }, contentRowClass: { classPropertyName: "contentRowClass", publicName: "contentRowClass", isSignal: true, isRequired: false, transformFunction: null }, detailsColumnClass: { classPropertyName: "detailsColumnClass", publicName: "detailsColumnClass", isSignal: true, isRequired: false, transformFunction: null }, chartColumnClass: { classPropertyName: "chartColumnClass", publicName: "chartColumnClass", isSignal: true, isRequired: false, transformFunction: null }, titleRowClass: { classPropertyName: "titleRowClass", publicName: "titleRowClass", isSignal: true, isRequired: false, transformFunction: null }, salaryIconClass: { classPropertyName: "salaryIconClass", publicName: "salaryIconClass", isSignal: true, isRequired: false, transformFunction: null }, titleClass: { classPropertyName: "titleClass", publicName: "titleClass", isSignal: true, isRequired: false, transformFunction: null }, titleMonthClass: { classPropertyName: "titleMonthClass", publicName: "titleMonthClass", isSignal: true, isRequired: false, transformFunction: null }, sectionClass: { classPropertyName: "sectionClass", publicName: "sectionClass", isSignal: true, isRequired: false, transformFunction: null }, sectionTitleClass: { classPropertyName: "sectionTitleClass", publicName: "sectionTitleClass", isSignal: true, isRequired: false, transformFunction: null }, tableLabelClass: { classPropertyName: "tableLabelClass", publicName: "tableLabelClass", isSignal: true, isRequired: false, transformFunction: null }, tablePrimaryLabelClass: { classPropertyName: "tablePrimaryLabelClass", publicName: "tablePrimaryLabelClass", isSignal: true, isRequired: false, transformFunction: null }, tableValueClass: { classPropertyName: "tableValueClass", publicName: "tableValueClass", isSignal: true, isRequired: false, transformFunction: null }, tableSecondaryValueClass: { classPropertyName: "tableSecondaryValueClass", publicName: "tableSecondaryValueClass", isSignal: true, isRequired: false, transformFunction: null }, currencyCodeClass: { classPropertyName: "currencyCodeClass", publicName: "currencyCodeClass", isSignal: true, isRequired: false, transformFunction: null }, infoIconClass: { classPropertyName: "infoIconClass", publicName: "infoIconClass", isSignal: true, isRequired: false, transformFunction: null }, popupWidth: { classPropertyName: "popupWidth", publicName: "popupWidth", isSignal: true, isRequired: false, transformFunction: null }, popupMaxHeight: { classPropertyName: "popupMaxHeight", publicName: "popupMaxHeight", isSignal: true, isRequired: false, transformFunction: null }, popupShadingColor: { classPropertyName: "popupShadingColor", publicName: "popupShadingColor", isSignal: true, isRequired: false, transformFunction: null }, popupHeaderRowClass: { classPropertyName: "popupHeaderRowClass", publicName: "popupHeaderRowClass", isSignal: true, isRequired: false, transformFunction: null }, popupRowClass: { classPropertyName: "popupRowClass", publicName: "popupRowClass", isSignal: true, isRequired: false, transformFunction: null }, mobileChartWrapperClass: { classPropertyName: "mobileChartWrapperClass", publicName: "mobileChartWrapperClass", isSignal: true, isRequired: false, transformFunction: null }, salaryTableRowClass: { classPropertyName: "salaryTableRowClass", publicName: "salaryTableRowClass", isSignal: true, isRequired: false, transformFunction: null }, labelColumnClass: { classPropertyName: "labelColumnClass", publicName: "labelColumnClass", isSignal: true, isRequired: false, transformFunction: null }, daysColumnClass: { classPropertyName: "daysColumnClass", publicName: "daysColumnClass", isSignal: true, isRequired: false, transformFunction: null }, daysHeaderClass: { classPropertyName: "daysHeaderClass", publicName: "daysHeaderClass", isSignal: true, isRequired: false, transformFunction: null }, amountColumnClass: { classPropertyName: "amountColumnClass", publicName: "amountColumnClass", isSignal: true, isRequired: false, transformFunction: null }, totalsColumnClass: { classPropertyName: "totalsColumnClass", publicName: "totalsColumnClass", isSignal: true, isRequired: false, transformFunction: null }, viewDetailsLinkClass: { classPropertyName: "viewDetailsLinkClass", publicName: "viewDetailsLinkClass", isSignal: true, isRequired: false, transformFunction: null }, allowancesRowClass: { classPropertyName: "allowancesRowClass", publicName: "allowancesRowClass", isSignal: true, isRequired: false, transformFunction: null }, allowanceDaysClass: { classPropertyName: "allowanceDaysClass", publicName: "allowanceDaysClass", isSignal: true, isRequired: false, transformFunction: null }, allowanceAmountWrapperClass: { classPropertyName: "allowanceAmountWrapperClass", publicName: "allowanceAmountWrapperClass", isSignal: true, isRequired: false, transformFunction: null }, allowanceAmountTextClass: { classPropertyName: "allowanceAmountTextClass", publicName: "allowanceAmountTextClass", isSignal: true, isRequired: false, transformFunction: null }, tooltipContainerClass: { classPropertyName: "tooltipContainerClass", publicName: "tooltipContainerClass", isSignal: true, isRequired: false, transformFunction: null }, tooltipTextClass: { classPropertyName: "tooltipTextClass", publicName: "tooltipTextClass", isSignal: true, isRequired: false, transformFunction: null }, tooltipCurrencyClass: { classPropertyName: "tooltipCurrencyClass", publicName: "tooltipCurrencyClass", isSignal: true, isRequired: false, transformFunction: null }, tooltipAmountClass: { classPropertyName: "tooltipAmountClass", publicName: "tooltipAmountClass", isSignal: true, isRequired: false, transformFunction: null }, dividerRowClass: { classPropertyName: "dividerRowClass", publicName: "dividerRowClass", isSignal: true, isRequired: false, transformFunction: null }, dividerColumnClass: { classPropertyName: "dividerColumnClass", publicName: "dividerColumnClass", isSignal: true, isRequired: false, transformFunction: null }, deductionsSectionRowClass: { classPropertyName: "deductionsSectionRowClass", publicName: "deductionsSectionRowClass", isSignal: true, isRequired: false, transformFunction: null }, deductionsSectionColumnClass: { classPropertyName: "deductionsSectionColumnClass", publicName: "deductionsSectionColumnClass", isSignal: true, isRequired: false, transformFunction: null }, deductionsInnerRowClass: { classPropertyName: "deductionsInnerRowClass", publicName: "deductionsInnerRowClass", isSignal: true, isRequired: false, transformFunction: null }, deductionDaysClass: { classPropertyName: "deductionDaysClass", publicName: "deductionDaysClass", isSignal: true, isRequired: false, transformFunction: null }, deductionAmountTextClass: { classPropertyName: "deductionAmountTextClass", publicName: "deductionAmountTextClass", isSignal: true, isRequired: false, transformFunction: null }, emptyCardContainerClass: { classPropertyName: "emptyCardContainerClass", publicName: "emptyCardContainerClass", isSignal: true, isRequired: false, transformFunction: null }, emptyCardBodyClass: { classPropertyName: "emptyCardBodyClass", publicName: "emptyCardBodyClass", isSignal: true, isRequired: false, transformFunction: null }, emptyIconClass: { classPropertyName: "emptyIconClass", publicName: "emptyIconClass", isSignal: true, isRequired: false, transformFunction: null }, emptyMessageClass: { classPropertyName: "emptyMessageClass", publicName: "emptyMessageClass", isSignal: true, isRequired: false, transformFunction: null }, emptyHelpTextClass: { classPropertyName: "emptyHelpTextClass", publicName: "emptyHelpTextClass", isSignal: true, isRequired: false, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null }, hidePayslip: { classPropertyName: "hidePayslip", publicName: "hidePayslip", isSignal: true, isRequired: false, transformFunction: null }, isFirstMonth: { classPropertyName: "isFirstMonth", publicName: "isFirstMonth", isSignal: true, isRequired: false, transformFunction: null }, accessDeniedMessage: { classPropertyName: "accessDeniedMessage", publicName: "accessDeniedMessage", isSignal: true, isRequired: false, transformFunction: null }, noPayslipMessage: { classPropertyName: "noPayslipMessage", publicName: "noPayslipMessage", isSignal: true, isRequired: false, transformFunction: null }, helpText: { classPropertyName: "helpText", publicName: "helpText", isSignal: true, isRequired: false, transformFunction: null }, accessDeniedIcon: { classPropertyName: "accessDeniedIcon", publicName: "accessDeniedIcon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isLoadingChanged: "isLoadingChanged", errorOccurred: "errorOccurred" }, ngImport: i0, template: "@if (employeeDetails(); as employeeDetailsData) {\n  @if (!hidePayslip() && !isFirstMonth()) {\n    <payroll-payslip-details-card\n      [employeeDetails]=\"employeeDetailsData\"\n      [payMonthDate]=\"payMonthDate()\"\n      [pieDataSource]=\"pieDataSource()\"\n      [actualBasicSalaryDetails]=\"actualBasicSalaryDetails()\"\n      [cardContainerClass]=\"cardContainerClass()\"\n      [contentRowClass]=\"contentRowClass()\"\n      [detailsColumnClass]=\"detailsColumnClass()\"\n      [chartColumnClass]=\"chartColumnClass()\"\n      [titleRowClass]=\"titleRowClass()\"\n      [salaryIconClass]=\"salaryIconClass()\"\n      [titleClass]=\"titleClass()\"\n      [titleMonthClass]=\"titleMonthClass()\"\n      [sectionClass]=\"sectionClass()\"\n      [sectionTitleClass]=\"sectionTitleClass()\"\n      [tableLabelClass]=\"tableLabelClass()\"\n      [tablePrimaryLabelClass]=\"tablePrimaryLabelClass()\"\n      [tableValueClass]=\"tableValueClass()\"\n      [tableSecondaryValueClass]=\"tableSecondaryValueClass()\"\n      [currencyCodeClass]=\"currencyCodeClass()\"\n      [infoIconClass]=\"infoIconClass()\"\n      [popupWidth]=\"popupWidth()\"\n      [popupMaxHeight]=\"popupMaxHeight()\"\n      [popupShadingColor]=\"popupShadingColor()\"\n      [popupHeaderRowClass]=\"popupHeaderRowClass()\"\n      [popupRowClass]=\"popupRowClass()\"\n      [mobileChartWrapperClass]=\"mobileChartWrapperClass()\"\n      [salaryTableRowClass]=\"salaryTableRowClass()\"\n      [labelColumnClass]=\"labelColumnClass()\"\n      [daysColumnClass]=\"daysColumnClass()\"\n      [daysHeaderClass]=\"daysHeaderClass()\"\n      [amountColumnClass]=\"amountColumnClass()\"\n      [totalsColumnClass]=\"totalsColumnClass()\"\n      [viewDetailsLinkClass]=\"viewDetailsLinkClass()\"\n      [allowancesRowClass]=\"allowancesRowClass()\"\n      [allowanceDaysClass]=\"allowanceDaysClass()\"\n      [allowanceAmountWrapperClass]=\"allowanceAmountWrapperClass()\"\n      [allowanceAmountTextClass]=\"allowanceAmountTextClass()\"\n      [tooltipContainerClass]=\"tooltipContainerClass()\"\n      [tooltipTextClass]=\"tooltipTextClass()\"\n      [tooltipCurrencyClass]=\"tooltipCurrencyClass()\"\n      [tooltipAmountClass]=\"tooltipAmountClass()\"\n      [dividerRowClass]=\"dividerRowClass()\"\n      [dividerColumnClass]=\"dividerColumnClass()\"\n      [deductionsSectionRowClass]=\"deductionsSectionRowClass()\"\n      [deductionsSectionColumnClass]=\"deductionsSectionColumnClass()\"\n      [deductionsInnerRowClass]=\"deductionsInnerRowClass()\"\n      [deductionDaysClass]=\"deductionDaysClass()\"\n      [deductionAmountTextClass]=\"deductionAmountTextClass()\"\n      [isMobile]=\"isMobile()\"\n    ></payroll-payslip-details-card>\n  } @else {\n    <payroll-empty-payslip-card\n      [hidePayslip]=\"hidePayslip()\"\n      [cardContainerClass]=\"emptyCardContainerClass()\"\n      [cardBodyClass]=\"emptyCardBodyClass()\"\n      [iconClass]=\"emptyIconClass()\"\n      [messageClass]=\"emptyMessageClass()\"\n      [helpTextClass]=\"emptyHelpTextClass()\"\n      [accessDeniedIcon]=\"accessDeniedIcon()\"\n      [accessDeniedMessage]=\"accessDeniedMessage()\"\n      [noPayslipMessage]=\"noPayslipMessage()\"\n      [helpText]=\"helpText()\"\n    ></payroll-empty-payslip-card>\n  }\n} @else {\n  <payroll-empty-payslip-card\n    [hidePayslip]=\"hidePayslip()\"\n    [cardContainerClass]=\"emptyCardContainerClass()\"\n    [cardBodyClass]=\"emptyCardBodyClass()\"\n    [iconClass]=\"emptyIconClass()\"\n    [messageClass]=\"emptyMessageClass()\"\n    [helpTextClass]=\"emptyHelpTextClass()\"\n    [accessDeniedIcon]=\"accessDeniedIcon()\"\n    [accessDeniedMessage]=\"accessDeniedMessage()\"\n    [noPayslipMessage]=\"noPayslipMessage()\"\n    [helpText]=\"helpText()\"\n  ></payroll-empty-payslip-card>\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: EmptyPayslipCardComponent, selector: "payroll-empty-payslip-card", inputs: ["hidePayslip", "cardContainerClass", "cardBodyClass", "iconClass", "messageClass", "helpTextClass", "accessDeniedMessage", "noPayslipMessage", "helpText", "accessDeniedIcon"] }, { kind: "component", type: PayslipDetailsCardComponent, selector: "payroll-payslip-details-card", inputs: ["employeeDetails", "payMonthDate", "pieDataSource", "actualBasicSalaryDetails", "cardContainerClass", "contentRowClass", "detailsColumnClass", "chartColumnClass", "isMobile", "titleRowClass", "salaryIconClass", "titleClass", "titleMonthClass", "sectionClass", "sectionTitleClass", "tableLabelClass", "tablePrimaryLabelClass", "tableValueClass", "tableSecondaryValueClass", "currencyCodeClass", "infoIconClass", "popupWidth", "popupMaxHeight", "popupShadingColor", "popupHeaderRowClass", "popupRowClass", "mobileChartWrapperClass", "negativePaletteColors", "positivePaletteColors", "salaryTableRowClass", "labelColumnClass", "daysColumnClass", "daysHeaderClass", "amountColumnClass", "salaryAmountColumnClass", "allowanceAmountColumnClass", "totalsColumnClass", "viewDetailsLinkClass", "allowancesRowClass", "allowanceDaysClass", "allowanceAmountWrapperClass", "allowanceAmountTextClass", "tooltipContainerClass", "tooltipTextClass", "tooltipCurrencyClass", "tooltipAmountClass", "dividerRowClass", "dividerColumnClass", "deductionsSectionRowClass", "deductionsSectionColumnClass", "deductionsInnerRowClass", "deductionDaysClass", "deductionAmountTextClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: MyPayslipWidgetComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'payroll-my-payslip-widget', standalone: true, imports: [CommonModule, EmptyPayslipCardComponent, PayslipDetailsCardComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (employeeDetails(); as employeeDetailsData) {\n  @if (!hidePayslip() && !isFirstMonth()) {\n    <payroll-payslip-details-card\n      [employeeDetails]=\"employeeDetailsData\"\n      [payMonthDate]=\"payMonthDate()\"\n      [pieDataSource]=\"pieDataSource()\"\n      [actualBasicSalaryDetails]=\"actualBasicSalaryDetails()\"\n      [cardContainerClass]=\"cardContainerClass()\"\n      [contentRowClass]=\"contentRowClass()\"\n      [detailsColumnClass]=\"detailsColumnClass()\"\n      [chartColumnClass]=\"chartColumnClass()\"\n      [titleRowClass]=\"titleRowClass()\"\n      [salaryIconClass]=\"salaryIconClass()\"\n      [titleClass]=\"titleClass()\"\n      [titleMonthClass]=\"titleMonthClass()\"\n      [sectionClass]=\"sectionClass()\"\n      [sectionTitleClass]=\"sectionTitleClass()\"\n      [tableLabelClass]=\"tableLabelClass()\"\n      [tablePrimaryLabelClass]=\"tablePrimaryLabelClass()\"\n      [tableValueClass]=\"tableValueClass()\"\n      [tableSecondaryValueClass]=\"tableSecondaryValueClass()\"\n      [currencyCodeClass]=\"currencyCodeClass()\"\n      [infoIconClass]=\"infoIconClass()\"\n      [popupWidth]=\"popupWidth()\"\n      [popupMaxHeight]=\"popupMaxHeight()\"\n      [popupShadingColor]=\"popupShadingColor()\"\n      [popupHeaderRowClass]=\"popupHeaderRowClass()\"\n      [popupRowClass]=\"popupRowClass()\"\n      [mobileChartWrapperClass]=\"mobileChartWrapperClass()\"\n      [salaryTableRowClass]=\"salaryTableRowClass()\"\n      [labelColumnClass]=\"labelColumnClass()\"\n      [daysColumnClass]=\"daysColumnClass()\"\n      [daysHeaderClass]=\"daysHeaderClass()\"\n      [amountColumnClass]=\"amountColumnClass()\"\n      [totalsColumnClass]=\"totalsColumnClass()\"\n      [viewDetailsLinkClass]=\"viewDetailsLinkClass()\"\n      [allowancesRowClass]=\"allowancesRowClass()\"\n      [allowanceDaysClass]=\"allowanceDaysClass()\"\n      [allowanceAmountWrapperClass]=\"allowanceAmountWrapperClass()\"\n      [allowanceAmountTextClass]=\"allowanceAmountTextClass()\"\n      [tooltipContainerClass]=\"tooltipContainerClass()\"\n      [tooltipTextClass]=\"tooltipTextClass()\"\n      [tooltipCurrencyClass]=\"tooltipCurrencyClass()\"\n      [tooltipAmountClass]=\"tooltipAmountClass()\"\n      [dividerRowClass]=\"dividerRowClass()\"\n      [dividerColumnClass]=\"dividerColumnClass()\"\n      [deductionsSectionRowClass]=\"deductionsSectionRowClass()\"\n      [deductionsSectionColumnClass]=\"deductionsSectionColumnClass()\"\n      [deductionsInnerRowClass]=\"deductionsInnerRowClass()\"\n      [deductionDaysClass]=\"deductionDaysClass()\"\n      [deductionAmountTextClass]=\"deductionAmountTextClass()\"\n      [isMobile]=\"isMobile()\"\n    ></payroll-payslip-details-card>\n  } @else {\n    <payroll-empty-payslip-card\n      [hidePayslip]=\"hidePayslip()\"\n      [cardContainerClass]=\"emptyCardContainerClass()\"\n      [cardBodyClass]=\"emptyCardBodyClass()\"\n      [iconClass]=\"emptyIconClass()\"\n      [messageClass]=\"emptyMessageClass()\"\n      [helpTextClass]=\"emptyHelpTextClass()\"\n      [accessDeniedIcon]=\"accessDeniedIcon()\"\n      [accessDeniedMessage]=\"accessDeniedMessage()\"\n      [noPayslipMessage]=\"noPayslipMessage()\"\n      [helpText]=\"helpText()\"\n    ></payroll-empty-payslip-card>\n  }\n} @else {\n  <payroll-empty-payslip-card\n    [hidePayslip]=\"hidePayslip()\"\n    [cardContainerClass]=\"emptyCardContainerClass()\"\n    [cardBodyClass]=\"emptyCardBodyClass()\"\n    [iconClass]=\"emptyIconClass()\"\n    [messageClass]=\"emptyMessageClass()\"\n    [helpTextClass]=\"emptyHelpTextClass()\"\n    [accessDeniedIcon]=\"accessDeniedIcon()\"\n    [accessDeniedMessage]=\"accessDeniedMessage()\"\n    [noPayslipMessage]=\"noPayslipMessage()\"\n    [helpText]=\"helpText()\"\n  ></payroll-empty-payslip-card>\n}\n" }]
+        }], ctorParameters: () => [], propDecorators: { baseUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "baseUrl", required: false }] }], payMonth: [{ type: i0.Input, args: [{ isSignal: true, alias: "payMonth", required: false }] }], cardContainerClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "cardContainerClass", required: false }] }], contentRowClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentRowClass", required: false }] }], detailsColumnClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "detailsColumnClass", required: false }] }], chartColumnClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "chartColumnClass", required: false }] }], titleRowClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleRowClass", required: false }] }], salaryIconClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "salaryIconClass", required: false }] }], titleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleClass", required: false }] }], titleMonthClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleMonthClass", required: false }] }], sectionClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "sectionClass", required: false }] }], sectionTitleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "sectionTitleClass", required: false }] }], tableLabelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableLabelClass", required: false }] }], tablePrimaryLabelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "tablePrimaryLabelClass", required: false }] }], tableValueClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableValueClass", required: false }] }], tableSecondaryValueClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableSecondaryValueClass", required: false }] }], currencyCodeClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "currencyCodeClass", required: false }] }], infoIconClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "infoIconClass", required: false }] }], popupWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupWidth", required: false }] }], popupMaxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupMaxHeight", required: false }] }], popupShadingColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupShadingColor", required: false }] }], popupHeaderRowClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupHeaderRowClass", required: false }] }], popupRowClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupRowClass", required: false }] }], mobileChartWrapperClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileChartWrapperClass", required: false }] }], salaryTableRowClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "salaryTableRowClass", required: false }] }], labelColumnClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelColumnClass", required: false }] }], daysColumnClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "daysColumnClass", required: false }] }], daysHeaderClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "daysHeaderClass", required: false }] }], amountColumnClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "amountColumnClass", required: false }] }], totalsColumnClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalsColumnClass", required: false }] }], viewDetailsLinkClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewDetailsLinkClass", required: false }] }], allowancesRowClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowancesRowClass", required: false }] }], allowanceDaysClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowanceDaysClass", required: false }] }], allowanceAmountWrapperClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowanceAmountWrapperClass", required: false }] }], allowanceAmountTextClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowanceAmountTextClass", required: false }] }], tooltipContainerClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipContainerClass", required: false }] }], tooltipTextClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipTextClass", required: false }] }], tooltipCurrencyClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipCurrencyClass", required: false }] }], tooltipAmountClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipAmountClass", required: false }] }], dividerRowClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "dividerRowClass", required: false }] }], dividerColumnClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "dividerColumnClass", required: false }] }], deductionsSectionRowClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "deductionsSectionRowClass", required: false }] }], deductionsSectionColumnClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "deductionsSectionColumnClass", required: false }] }], deductionsInnerRowClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "deductionsInnerRowClass", required: false }] }], deductionDaysClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "deductionDaysClass", required: false }] }], deductionAmountTextClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "deductionAmountTextClass", required: false }] }], emptyCardContainerClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyCardContainerClass", required: false }] }], emptyCardBodyClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyCardBodyClass", required: false }] }], emptyIconClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyIconClass", required: false }] }], emptyMessageClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessageClass", required: false }] }], emptyHelpTextClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyHelpTextClass", required: false }] }], isMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMobile", required: false }] }], hidePayslip: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidePayslip", required: false }] }], isFirstMonth: [{ type: i0.Input, args: [{ isSignal: true, alias: "isFirstMonth", required: false }] }], accessDeniedMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "accessDeniedMessage", required: false }] }], noPayslipMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "noPayslipMessage", required: false }] }], helpText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helpText", required: false }] }], accessDeniedIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "accessDeniedIcon", required: false }] }], isLoadingChanged: [{ type: i0.Output, args: ["isLoadingChanged"] }], errorOccurred: [{ type: i0.Output, args: ["errorOccurred"] }] } });
+
+class MyPayslipJobInfoWidgetComponent {
+    adminUnitIcon = input(faSitemap, ...(ngDevMode ? [{ debugName: "adminUnitIcon" }] : /* istanbul ignore next */ []));
+    positionIcon = input(faUserTie, ...(ngDevMode ? [{ debugName: "positionIcon" }] : /* istanbul ignore next */ []));
+    gradeIcon = input(faMedal, ...(ngDevMode ? [{ debugName: "gradeIcon" }] : /* istanbul ignore next */ []));
+    joiningDateIcon = input(faCalendarAlt, ...(ngDevMode ? [{ debugName: "joiningDateIcon" }] : /* istanbul ignore next */ []));
+    titleClass = input('fw-medium mb-2 table-cell-md', ...(ngDevMode ? [{ debugName: "titleClass" }] : /* istanbul ignore next */ []));
+    desktopContainerClass = input('d-flex flex-column justify-content-start align-items-start mx-4 my-2', ...(ngDevMode ? [{ debugName: "desktopContainerClass" }] : /* istanbul ignore next */ []));
+    mobileContainerClass = input('d-flex align-items-center justify-content-center w-100', ...(ngDevMode ? [{ debugName: "mobileContainerClass" }] : /* istanbul ignore next */ []));
+    mobileCardClass = input('p-3 h-50 card-shadow rounded-1 mb-3 mt-3 w-90 mh-150 mx-3', ...(ngDevMode ? [{ debugName: "mobileCardClass" }] : /* istanbul ignore next */ []));
+    iconClass = input('fs-16 me-2 text-gray', ...(ngDevMode ? [{ debugName: "iconClass" }] : /* istanbul ignore next */ []));
+    rowClass = input('d-flex align-items-center my-1 w-100', ...(ngDevMode ? [{ debugName: "rowClass" }] : /* istanbul ignore next */ []));
+    labelClass = input('fw-light fs-12 text-light-dark', ...(ngDevMode ? [{ debugName: "labelClass" }] : /* istanbul ignore next */ []));
+    valueClass = input('fw-400 ms-1 text-light-dark fs-12', ...(ngDevMode ? [{ debugName: "valueClass" }] : /* istanbul ignore next */ []));
+    title = input('JobInformation', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    baseUrl = input('', ...(ngDevMode ? [{ debugName: "baseUrl" }] : /* istanbul ignore next */ []));
+    payMonth = input(null, ...(ngDevMode ? [{ debugName: "payMonth" }] : /* istanbul ignore next */ []));
+    isMobile = input(false, ...(ngDevMode ? [{ debugName: "isMobile" }] : /* istanbul ignore next */ []));
+    isPayslipAvailable = input(true, ...(ngDevMode ? [{ debugName: "isPayslipAvailable" }] : /* istanbul ignore next */ []));
+    isLoadingChanged = output();
+    errorOccurred = output();
+    jobInfo = signal(null, ...(ngDevMode ? [{ debugName: "jobInfo" }] : /* istanbul ignore next */ []));
+    isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []));
+    payrollWidgetsService = inject(PayrollSelfWidgetsService);
+    datePipe = inject(DatePipe);
+    constructor() {
+        effect(() => {
+            if (this.baseUrl() && this.payMonth()) {
+                this.loadJobInfo();
+            }
+        });
+    }
+    loadJobInfo() {
+        const payMonth = this.payMonth();
+        if (!this.isPayslipAvailable() || !payMonth) {
+            this.jobInfo.set(null);
+            return;
+        }
+        this.isLoading.set(true);
+        this.isLoadingChanged.emit(true);
+        this.payrollWidgetsService.getPayslipJobInfo(this.baseUrl(), payMonth).subscribe({
+            next: res => {
+                this.jobInfo.set(res?.ResponseData ?? null);
+                this.isLoadingChanged.emit(false);
+                this.isLoading.set(false);
+            },
+            error: (error) => {
+                this.errorOccurred.emit(error.error.ResponseData.Errors[0].Message);
+                this.isLoadingChanged.emit(false);
+                this.isLoading.set(false);
+            },
+        });
+    }
+    display(value) {
+        if (this.isLoading() || !this.isPayslipAvailable() || value == null) {
+            return '-';
+        }
+        return `${value}`;
+    }
+    formatDate(date) {
+        if (this.isLoading() || !this.isPayslipAvailable() || !date) {
+            return '-';
+        }
+        return this.datePipe.transform(date, 'dd/MM/yyyy') || '-';
+    }
+    items = computed(() => {
+        return [
+            {
+                label: 'AdminUnit',
+                icon: this.adminUnitIcon(),
+                value: this.display(this.jobInfo()?.AdminUnitName),
+            },
+            {
+                label: 'Position',
+                icon: this.positionIcon(),
+                value: this.display(this.jobInfo()?.PositionName),
+            },
+            {
+                label: 'Grade',
+                icon: this.gradeIcon(),
+                value: this.display(this.jobInfo()?.GradeName),
+            },
+            {
+                label: 'JoiningDate',
+                icon: this.joiningDateIcon(),
+                value: this.formatDate(this.jobInfo()?.JoiningDate),
+            },
+        ];
+    }, ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: MyPayslipJobInfoWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: MyPayslipJobInfoWidgetComponent, isStandalone: true, selector: "payroll-my-payslip-job-info-widget", inputs: { adminUnitIcon: { classPropertyName: "adminUnitIcon", publicName: "adminUnitIcon", isSignal: true, isRequired: false, transformFunction: null }, positionIcon: { classPropertyName: "positionIcon", publicName: "positionIcon", isSignal: true, isRequired: false, transformFunction: null }, gradeIcon: { classPropertyName: "gradeIcon", publicName: "gradeIcon", isSignal: true, isRequired: false, transformFunction: null }, joiningDateIcon: { classPropertyName: "joiningDateIcon", publicName: "joiningDateIcon", isSignal: true, isRequired: false, transformFunction: null }, titleClass: { classPropertyName: "titleClass", publicName: "titleClass", isSignal: true, isRequired: false, transformFunction: null }, desktopContainerClass: { classPropertyName: "desktopContainerClass", publicName: "desktopContainerClass", isSignal: true, isRequired: false, transformFunction: null }, mobileContainerClass: { classPropertyName: "mobileContainerClass", publicName: "mobileContainerClass", isSignal: true, isRequired: false, transformFunction: null }, mobileCardClass: { classPropertyName: "mobileCardClass", publicName: "mobileCardClass", isSignal: true, isRequired: false, transformFunction: null }, iconClass: { classPropertyName: "iconClass", publicName: "iconClass", isSignal: true, isRequired: false, transformFunction: null }, rowClass: { classPropertyName: "rowClass", publicName: "rowClass", isSignal: true, isRequired: false, transformFunction: null }, labelClass: { classPropertyName: "labelClass", publicName: "labelClass", isSignal: true, isRequired: false, transformFunction: null }, valueClass: { classPropertyName: "valueClass", publicName: "valueClass", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, baseUrl: { classPropertyName: "baseUrl", publicName: "baseUrl", isSignal: true, isRequired: false, transformFunction: null }, payMonth: { classPropertyName: "payMonth", publicName: "payMonth", isSignal: true, isRequired: false, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null }, isPayslipAvailable: { classPropertyName: "isPayslipAvailable", publicName: "isPayslipAvailable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isLoadingChanged: "isLoadingChanged", errorOccurred: "errorOccurred" }, ngImport: i0, template: "<ng-template #titleTemplate>\n  <div [class]=\"titleClass()\">\n    {{ title() | PayrollTranslate }}\n  </div>\n</ng-template>\n\n<ng-template #rowsTemplate>\n  @for (item of items(); track $index) {\n    <div [class]=\"rowClass()\">\n      <fa-icon [icon]=\"item.icon\" [class]=\"iconClass()\"></fa-icon>\n      <div class=\"flex-grow-1\">\n        <span [class]=\"labelClass()\">{{ item.label | PayrollTranslate }}:</span>\n        <span [class]=\"valueClass()\">\n          {{ item.value }}\n        </span>\n      </div>\n    </div>\n  }\n</ng-template>\n\n@if (!isMobile()) {\n  <div [class]=\"desktopContainerClass()\">\n    <ng-container *ngTemplateOutlet=\"titleTemplate\" />\n    <ng-container *ngTemplateOutlet=\"rowsTemplate\" />\n  </div>\n} @else {\n  <div [class]=\"mobileContainerClass()\">\n    <div [class]=\"mobileCardClass()\">\n      <ng-container *ngTemplateOutlet=\"titleTemplate\" />\n      <ng-container *ngTemplateOutlet=\"rowsTemplate\" />\n    </div>\n  </div>\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }, { kind: "pipe", type: PayrollTranslatePipe, name: "PayrollTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: MyPayslipJobInfoWidgetComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'payroll-my-payslip-job-info-widget', standalone: true, imports: [CommonModule, PayrollTranslatePipe, FaIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #titleTemplate>\n  <div [class]=\"titleClass()\">\n    {{ title() | PayrollTranslate }}\n  </div>\n</ng-template>\n\n<ng-template #rowsTemplate>\n  @for (item of items(); track $index) {\n    <div [class]=\"rowClass()\">\n      <fa-icon [icon]=\"item.icon\" [class]=\"iconClass()\"></fa-icon>\n      <div class=\"flex-grow-1\">\n        <span [class]=\"labelClass()\">{{ item.label | PayrollTranslate }}:</span>\n        <span [class]=\"valueClass()\">\n          {{ item.value }}\n        </span>\n      </div>\n    </div>\n  }\n</ng-template>\n\n@if (!isMobile()) {\n  <div [class]=\"desktopContainerClass()\">\n    <ng-container *ngTemplateOutlet=\"titleTemplate\" />\n    <ng-container *ngTemplateOutlet=\"rowsTemplate\" />\n  </div>\n} @else {\n  <div [class]=\"mobileContainerClass()\">\n    <div [class]=\"mobileCardClass()\">\n      <ng-container *ngTemplateOutlet=\"titleTemplate\" />\n      <ng-container *ngTemplateOutlet=\"rowsTemplate\" />\n    </div>\n  </div>\n}\n" }]
+        }], ctorParameters: () => [], propDecorators: { adminUnitIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "adminUnitIcon", required: false }] }], positionIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "positionIcon", required: false }] }], gradeIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "gradeIcon", required: false }] }], joiningDateIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "joiningDateIcon", required: false }] }], titleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleClass", required: false }] }], desktopContainerClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "desktopContainerClass", required: false }] }], mobileContainerClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileContainerClass", required: false }] }], mobileCardClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileCardClass", required: false }] }], iconClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconClass", required: false }] }], rowClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowClass", required: false }] }], labelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelClass", required: false }] }], valueClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueClass", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], baseUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "baseUrl", required: false }] }], payMonth: [{ type: i0.Input, args: [{ isSignal: true, alias: "payMonth", required: false }] }], isMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMobile", required: false }] }], isPayslipAvailable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isPayslipAvailable", required: false }] }], isLoadingChanged: [{ type: i0.Output, args: ["isLoadingChanged"] }], errorOccurred: [{ type: i0.Output, args: ["errorOccurred"] }] } });
+
+class MyPayslipIndemnityWidgetComponent {
+    amountIcon = input(faFileSignature, ...(ngDevMode ? [{ debugName: "amountIcon" }] : /* istanbul ignore next */ []));
+    titleClass = input('fw-medium table-cell-md mb-2', ...(ngDevMode ? [{ debugName: "titleClass" }] : /* istanbul ignore next */ []));
+    desktopContainerClass = input('d-flex flex-column justify-content-start align-items-start mx-4 my-2', ...(ngDevMode ? [{ debugName: "desktopContainerClass" }] : /* istanbul ignore next */ []));
+    mobileContainerClass = input('d-flex align-items-center justify-content-center w-100', ...(ngDevMode ? [{ debugName: "mobileContainerClass" }] : /* istanbul ignore next */ []));
+    mobileCardClass = input('p-3 h-50 card-shadow rounded-1 mb-3 mt-3 w-90 mh-150 mx-3', ...(ngDevMode ? [{ debugName: "mobileCardClass" }] : /* istanbul ignore next */ []));
+    iconClass = input('fs-16 me-2 text-gray', ...(ngDevMode ? [{ debugName: "iconClass" }] : /* istanbul ignore next */ []));
+    rowClass = input('d-flex align-items-center my-1 w-100', ...(ngDevMode ? [{ debugName: "rowClass" }] : /* istanbul ignore next */ []));
+    labelClass = input('fw-light fs-12 text-light-dark', ...(ngDevMode ? [{ debugName: "labelClass" }] : /* istanbul ignore next */ []));
+    valueClass = input('fw-400 ms-1 text-light-dark fs-12', ...(ngDevMode ? [{ debugName: "valueClass" }] : /* istanbul ignore next */ []));
+    currencyCodeClass = input('text-secondary fs-10', ...(ngDevMode ? [{ debugName: "currencyCodeClass" }] : /* istanbul ignore next */ []));
+    title = input('Indemnity', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    indemnityDaysLabel = input('IndemnityDays', ...(ngDevMode ? [{ debugName: "indemnityDaysLabel" }] : /* istanbul ignore next */ []));
+    indemnityAmountLabel = input('IndemnityAmount', ...(ngDevMode ? [{ debugName: "indemnityAmountLabel" }] : /* istanbul ignore next */ []));
+    days = input('Days', ...(ngDevMode ? [{ debugName: "days" }] : /* istanbul ignore next */ []));
+    baseUrl = input('', ...(ngDevMode ? [{ debugName: "baseUrl" }] : /* istanbul ignore next */ []));
+    payMonth = input(null, ...(ngDevMode ? [{ debugName: "payMonth" }] : /* istanbul ignore next */ []));
+    isMobile = input(false, ...(ngDevMode ? [{ debugName: "isMobile" }] : /* istanbul ignore next */ []));
+    isPayslipAvailable = input(true, ...(ngDevMode ? [{ debugName: "isPayslipAvailable" }] : /* istanbul ignore next */ []));
+    indemnity = signal(null, ...(ngDevMode ? [{ debugName: "indemnity" }] : /* istanbul ignore next */ []));
+    errorOccurred = output();
+    isLoadingChanged = output();
+    isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []));
+    balanceKey = 'Balance';
+    payrollWidgetsService = inject(PayrollSelfWidgetsService);
+    commonMethods = inject(CommonMethods);
+    constructor() {
+        effect(() => {
+            if (this.baseUrl() && this.payMonth()) {
+                this.loadIndemnity();
+            }
+        });
+    }
+    loadIndemnity() {
+        const payMonth = this.payMonth();
+        if (!this.isPayslipAvailable() || !payMonth) {
+            this.indemnity.set(null);
+            return;
+        }
+        this.isLoading.set(true);
+        this.isLoadingChanged.emit(true);
+        this.payrollWidgetsService
+            .getPayslipIndemnity(this.baseUrl(), payMonth)
+            .pipe(finalize(() => {
+            this.isLoading.set(false);
+            this.isLoadingChanged.emit(false);
+        }))
+            .subscribe({
+            next: res => {
+                this.indemnity.set(res?.ResponseData ?? null);
+            },
+            error: () => {
+                this.indemnity.set(null);
+            },
+        });
+    }
+    indemnityItems = computed(() => {
+        return [
+            {
+                label: this.indemnityDaysLabel(),
+                value: this.indemnity()?.IndemnityDays,
+                suffixKey: this.days(),
+                showSuffix: this.shouldShowValue(this.indemnity()?.IndemnityDays),
+            },
+            {
+                label: this.indemnityAmountLabel(),
+                icon: this.amountIcon(),
+                value: this.displayAmount(this.indemnity()?.IndemnityAmount),
+            },
+        ];
+    }, ...(ngDevMode ? [{ debugName: "indemnityItems" }] : /* istanbul ignore next */ []));
+    displayAmount(value) {
+        if (this.isLoading() || !this.isPayslipAvailable() || value == null) {
+            return '-';
+        }
+        return this.commonMethods.currencyDecimalFormat(value, this.currencyDecimals()) ?? `${value}`;
+    }
+    shouldShowValue(value) {
+        return !this.isLoading() && this.isPayslipAvailable() && value != null;
+    }
+    currencyDecimals = computed(() => this.indemnity()?.CurrencyDecimals ?? 2, ...(ngDevMode ? [{ debugName: "currencyDecimals" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: MyPayslipIndemnityWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: MyPayslipIndemnityWidgetComponent, isStandalone: true, selector: "payroll-my-payslip-indemnity-widget", inputs: { amountIcon: { classPropertyName: "amountIcon", publicName: "amountIcon", isSignal: true, isRequired: false, transformFunction: null }, titleClass: { classPropertyName: "titleClass", publicName: "titleClass", isSignal: true, isRequired: false, transformFunction: null }, desktopContainerClass: { classPropertyName: "desktopContainerClass", publicName: "desktopContainerClass", isSignal: true, isRequired: false, transformFunction: null }, mobileContainerClass: { classPropertyName: "mobileContainerClass", publicName: "mobileContainerClass", isSignal: true, isRequired: false, transformFunction: null }, mobileCardClass: { classPropertyName: "mobileCardClass", publicName: "mobileCardClass", isSignal: true, isRequired: false, transformFunction: null }, iconClass: { classPropertyName: "iconClass", publicName: "iconClass", isSignal: true, isRequired: false, transformFunction: null }, rowClass: { classPropertyName: "rowClass", publicName: "rowClass", isSignal: true, isRequired: false, transformFunction: null }, labelClass: { classPropertyName: "labelClass", publicName: "labelClass", isSignal: true, isRequired: false, transformFunction: null }, valueClass: { classPropertyName: "valueClass", publicName: "valueClass", isSignal: true, isRequired: false, transformFunction: null }, currencyCodeClass: { classPropertyName: "currencyCodeClass", publicName: "currencyCodeClass", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, indemnityDaysLabel: { classPropertyName: "indemnityDaysLabel", publicName: "indemnityDaysLabel", isSignal: true, isRequired: false, transformFunction: null }, indemnityAmountLabel: { classPropertyName: "indemnityAmountLabel", publicName: "indemnityAmountLabel", isSignal: true, isRequired: false, transformFunction: null }, days: { classPropertyName: "days", publicName: "days", isSignal: true, isRequired: false, transformFunction: null }, baseUrl: { classPropertyName: "baseUrl", publicName: "baseUrl", isSignal: true, isRequired: false, transformFunction: null }, payMonth: { classPropertyName: "payMonth", publicName: "payMonth", isSignal: true, isRequired: false, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null }, isPayslipAvailable: { classPropertyName: "isPayslipAvailable", publicName: "isPayslipAvailable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { errorOccurred: "errorOccurred", isLoadingChanged: "isLoadingChanged" }, ngImport: i0, template: "<ng-template #indemnityTitleTemplate>\n  <div [class]=\"titleClass()\">{{ title() | PayrollTranslate }}</div>\n</ng-template>\n\n<ng-template #indemnityRowsTemplate>\n  <div [class]=\"rowClass()\">\n    <fa-icon [icon]=\"amountIcon()\" [class]=\"iconClass()\"></fa-icon>\n\n    <div class=\"flex-grow-1\">\n      <span [class]=\"labelClass()\">{{ 'Balance' | PayrollTranslate }}:</span>\n\n      <span [class]=\"valueClass()\">\n        {{ displayAmount(indemnity()?.IndemnityAmount) }}\n        @if (!isLoading() && isPayslipAvailable() && indemnity()?.IndemnityDays != null && indemnity()?.IndemnityDays != undefined) {\n          (\n          {{ indemnity()?.IndemnityDays }}\n          @if ((indemnity()?.IndemnityDays ?? 0) > 1) {\n            {{ 'Days' | PayrollTranslate }}\n          } @else {\n            {{ 'Day' | PayrollTranslate }}\n          }\n          )\n        }\n      </span>\n    </div>\n  </div>\n</ng-template>\n\n@if (!isMobile()) {\n  <div [class]=\"desktopContainerClass()\">\n    <ng-container *ngTemplateOutlet=\"indemnityTitleTemplate\" />\n    <ng-container *ngTemplateOutlet=\"indemnityRowsTemplate\" />\n  </div>\n} @else {\n  <div [class]=\"mobileContainerClass()\">\n    <div [class]=\"mobileCardClass()\">\n      <ng-container *ngTemplateOutlet=\"indemnityTitleTemplate\" />\n      <ng-container *ngTemplateOutlet=\"indemnityRowsTemplate\" />\n    </div>\n  </div>\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }, { kind: "pipe", type: PayrollTranslatePipe, name: "PayrollTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: MyPayslipIndemnityWidgetComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'payroll-my-payslip-indemnity-widget', standalone: true, imports: [CommonModule, FaIconComponent, PayrollTranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #indemnityTitleTemplate>\n  <div [class]=\"titleClass()\">{{ title() | PayrollTranslate }}</div>\n</ng-template>\n\n<ng-template #indemnityRowsTemplate>\n  <div [class]=\"rowClass()\">\n    <fa-icon [icon]=\"amountIcon()\" [class]=\"iconClass()\"></fa-icon>\n\n    <div class=\"flex-grow-1\">\n      <span [class]=\"labelClass()\">{{ 'Balance' | PayrollTranslate }}:</span>\n\n      <span [class]=\"valueClass()\">\n        {{ displayAmount(indemnity()?.IndemnityAmount) }}\n        @if (!isLoading() && isPayslipAvailable() && indemnity()?.IndemnityDays != null && indemnity()?.IndemnityDays != undefined) {\n          (\n          {{ indemnity()?.IndemnityDays }}\n          @if ((indemnity()?.IndemnityDays ?? 0) > 1) {\n            {{ 'Days' | PayrollTranslate }}\n          } @else {\n            {{ 'Day' | PayrollTranslate }}\n          }\n          )\n        }\n      </span>\n    </div>\n  </div>\n</ng-template>\n\n@if (!isMobile()) {\n  <div [class]=\"desktopContainerClass()\">\n    <ng-container *ngTemplateOutlet=\"indemnityTitleTemplate\" />\n    <ng-container *ngTemplateOutlet=\"indemnityRowsTemplate\" />\n  </div>\n} @else {\n  <div [class]=\"mobileContainerClass()\">\n    <div [class]=\"mobileCardClass()\">\n      <ng-container *ngTemplateOutlet=\"indemnityTitleTemplate\" />\n      <ng-container *ngTemplateOutlet=\"indemnityRowsTemplate\" />\n    </div>\n  </div>\n}\n" }]
+        }], ctorParameters: () => [], propDecorators: { amountIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "amountIcon", required: false }] }], titleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleClass", required: false }] }], desktopContainerClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "desktopContainerClass", required: false }] }], mobileContainerClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileContainerClass", required: false }] }], mobileCardClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileCardClass", required: false }] }], iconClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconClass", required: false }] }], rowClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowClass", required: false }] }], labelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelClass", required: false }] }], valueClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueClass", required: false }] }], currencyCodeClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "currencyCodeClass", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], indemnityDaysLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "indemnityDaysLabel", required: false }] }], indemnityAmountLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "indemnityAmountLabel", required: false }] }], days: [{ type: i0.Input, args: [{ isSignal: true, alias: "days", required: false }] }], baseUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "baseUrl", required: false }] }], payMonth: [{ type: i0.Input, args: [{ isSignal: true, alias: "payMonth", required: false }] }], isMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMobile", required: false }] }], isPayslipAvailable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isPayslipAvailable", required: false }] }], errorOccurred: [{ type: i0.Output, args: ["errorOccurred"] }], isLoadingChanged: [{ type: i0.Output, args: ["isLoadingChanged"] }] } });
+
+class SalaryTransferPopupComponent {
+    bankInformationDataSource = input([], ...(ngDevMode ? [{ debugName: "bankInformationDataSource" }] : /* istanbul ignore next */ []));
+    visibleSalaryTransferPopup = input(false, ...(ngDevMode ? [{ debugName: "visibleSalaryTransferPopup" }] : /* istanbul ignore next */ []));
+    currencyCode = input('', ...(ngDevMode ? [{ debugName: "currencyCode" }] : /* istanbul ignore next */ []));
+    currencyDecimals = input(2, ...(ngDevMode ? [{ debugName: "currencyDecimals" }] : /* istanbul ignore next */ []));
+    popupHeight = input('auto', ...(ngDevMode ? [{ debugName: "popupHeight" }] : /* istanbul ignore next */ []));
+    popupMaxWidth = input('800px', ...(ngDevMode ? [{ debugName: "popupMaxWidth" }] : /* istanbul ignore next */ []));
+    popupMinWidth = input('auto', ...(ngDevMode ? [{ debugName: "popupMinWidth" }] : /* istanbul ignore next */ []));
+    containerClass = input('', ...(ngDevMode ? [{ debugName: "containerClass" }] : /* istanbul ignore next */ []));
+    headerRowClass = input('fw-bold text-secondary pb-2 d-flex', ...(ngDevMode ? [{ debugName: "headerRowClass" }] : /* istanbul ignore next */ []));
+    headerCell1Class = input('w-35 text-dark-gray fs-12 fw-400', ...(ngDevMode ? [{ debugName: "headerCell1Class" }] : /* istanbul ignore next */ []));
+    headerCell2Class = input('w-20 text-start text-dark-gray fs-12 fw-400', ...(ngDevMode ? [{ debugName: "headerCell2Class" }] : /* istanbul ignore next */ []));
+    headerCell3Class = input('w-45 text-dark-gray fs-12 fw-400', ...(ngDevMode ? [{ debugName: "headerCell3Class" }] : /* istanbul ignore next */ []));
+    dataRowClass = input('py-2 d-flex', ...(ngDevMode ? [{ debugName: "dataRowClass" }] : /* istanbul ignore next */ []));
+    dataCell1Class = input('w-35 text-dark-gray fs-14 fw-400', ...(ngDevMode ? [{ debugName: "dataCell1Class" }] : /* istanbul ignore next */ []));
+    dataCell2Class = input('w-20 text-start text-dark-gray fs-14 fw-400', ...(ngDevMode ? [{ debugName: "dataCell2Class" }] : /* istanbul ignore next */ []));
+    dataCell3Class = input('w-45 text-start text-dark-gray fs-14 fw-400', ...(ngDevMode ? [{ debugName: "dataCell3Class" }] : /* istanbul ignore next */ []));
+    openSalaryTransferPopupChange = output();
+    visibleSalaryTransferPopupState = signal(false, ...(ngDevMode ? [{ debugName: "visibleSalaryTransferPopupState" }] : /* istanbul ignore next */ []));
+    commonMethods = inject(CommonMethods);
+    constructor() {
+        effect(() => {
+            this.visibleSalaryTransferPopupState.set(this.visibleSalaryTransferPopup());
+        });
+    }
+    onVisibilityChange(visible) {
+        this.visibleSalaryTransferPopupState.set(visible);
+        this.openSalaryTransferPopupChange.emit(visible);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SalaryTransferPopupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SalaryTransferPopupComponent, isStandalone: true, selector: "payroll-salary-transfer-popup", inputs: { bankInformationDataSource: { classPropertyName: "bankInformationDataSource", publicName: "bankInformationDataSource", isSignal: true, isRequired: false, transformFunction: null }, visibleSalaryTransferPopup: { classPropertyName: "visibleSalaryTransferPopup", publicName: "visibleSalaryTransferPopup", isSignal: true, isRequired: false, transformFunction: null }, currencyCode: { classPropertyName: "currencyCode", publicName: "currencyCode", isSignal: true, isRequired: false, transformFunction: null }, currencyDecimals: { classPropertyName: "currencyDecimals", publicName: "currencyDecimals", isSignal: true, isRequired: false, transformFunction: null }, popupHeight: { classPropertyName: "popupHeight", publicName: "popupHeight", isSignal: true, isRequired: false, transformFunction: null }, popupMaxWidth: { classPropertyName: "popupMaxWidth", publicName: "popupMaxWidth", isSignal: true, isRequired: false, transformFunction: null }, popupMinWidth: { classPropertyName: "popupMinWidth", publicName: "popupMinWidth", isSignal: true, isRequired: false, transformFunction: null }, containerClass: { classPropertyName: "containerClass", publicName: "containerClass", isSignal: true, isRequired: false, transformFunction: null }, headerRowClass: { classPropertyName: "headerRowClass", publicName: "headerRowClass", isSignal: true, isRequired: false, transformFunction: null }, headerCell1Class: { classPropertyName: "headerCell1Class", publicName: "headerCell1Class", isSignal: true, isRequired: false, transformFunction: null }, headerCell2Class: { classPropertyName: "headerCell2Class", publicName: "headerCell2Class", isSignal: true, isRequired: false, transformFunction: null }, headerCell3Class: { classPropertyName: "headerCell3Class", publicName: "headerCell3Class", isSignal: true, isRequired: false, transformFunction: null }, dataRowClass: { classPropertyName: "dataRowClass", publicName: "dataRowClass", isSignal: true, isRequired: false, transformFunction: null }, dataCell1Class: { classPropertyName: "dataCell1Class", publicName: "dataCell1Class", isSignal: true, isRequired: false, transformFunction: null }, dataCell2Class: { classPropertyName: "dataCell2Class", publicName: "dataCell2Class", isSignal: true, isRequired: false, transformFunction: null }, dataCell3Class: { classPropertyName: "dataCell3Class", publicName: "dataCell3Class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openSalaryTransferPopupChange: "openSalaryTransferPopupChange" }, ngImport: i0, template: "<dx-popup\n  [title]=\"'SalaryTransferDetails' | PayrollTranslate\"\n  [showTitle]=\"true\"\n  [visible]=\"visibleSalaryTransferPopupState()\"\n  [showCloseButton]=\"true\"\n  [height]=\"popupHeight()\"\n  [maxWidth]=\"popupMaxWidth()\"\n  [minWidth]=\"popupMinWidth()\"\n  shadingColor=\"rgba(0,0,0,0.4)\"\n  (visibleChange)=\"onVisibilityChange($event)\"\n>\n  <div [class]=\"containerClass()\">\n    <div [class]=\"headerRowClass()\">\n      <div [class]=\"headerCell1Class()\">{{ 'BankName' | PayrollTranslate }}</div>\n      <div [class]=\"headerCell2Class()\">{{ 'Amount' | PayrollTranslate }} ({{ currencyCode() }})</div>\n      <div [class]=\"headerCell3Class()\">{{ 'IBAN' | PayrollTranslate }} / {{ 'AccountNumber' | PayrollTranslate }}</div>\n    </div>\n\n    @for (transfer of bankInformationDataSource(); track $index) {\n      <div [class]=\"dataRowClass()\">\n        <div [class]=\"dataCell1Class()\">{{ transfer.BankBranchName || transfer.BankName }}</div>\n        <div [class]=\"dataCell2Class()\">\n          {{ commonMethods.currencyDecimalFormat(transfer.TransferAmount, currencyDecimals()) }}\n        </div>\n        <div [class]=\"dataCell3Class()\">\n          {{\n            transfer.IBAN\n              ? ('IBAN' | PayrollTranslate) + ': ' + transfer.IBAN\n              : ('AC' | PayrollTranslate) + ': ' + transfer.BankAccountNumber\n          }}\n        </div>\n      </div>\n    }\n  </div>\n</dx-popup>\n", dependencies: [{ kind: "ngmodule", type: DxPopupModule }, { kind: "component", type: i1$2.DxPopupComponent, selector: "dx-popup", inputs: ["accessKey", "animation", "container", "contentTemplate", "deferRendering", "disabled", "dragAndResizeArea", "dragEnabled", "dragOutsideBoundary", "enableBodyScroll", "focusStateEnabled", "fullScreen", "height", "hideOnOutsideClick", "hideOnParentScroll", "hint", "hoverStateEnabled", "maxHeight", "maxWidth", "minHeight", "minWidth", "position", "resizeEnabled", "restorePosition", "rtlEnabled", "shading", "shadingColor", "showCloseButton", "showTitle", "tabIndex", "title", "titleTemplate", "toolbarItems", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onResize", "onResizeEnd", "onResizeStart", "onShowing", "onShown", "onTitleRendered", "accessKeyChange", "animationChange", "containerChange", "contentTemplateChange", "deferRenderingChange", "disabledChange", "dragAndResizeAreaChange", "dragEnabledChange", "dragOutsideBoundaryChange", "enableBodyScrollChange", "focusStateEnabledChange", "fullScreenChange", "heightChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "resizeEnabledChange", "restorePositionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showCloseButtonChange", "showTitleChange", "tabIndexChange", "titleChange", "titleTemplateChange", "toolbarItemsChange", "visibleChange", "widthChange", "wrapperAttrChange"] }, { kind: "pipe", type: PayrollTranslatePipe, name: "PayrollTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SalaryTransferPopupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'payroll-salary-transfer-popup', standalone: true, imports: [DxPopupModule, PayrollTranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<dx-popup\n  [title]=\"'SalaryTransferDetails' | PayrollTranslate\"\n  [showTitle]=\"true\"\n  [visible]=\"visibleSalaryTransferPopupState()\"\n  [showCloseButton]=\"true\"\n  [height]=\"popupHeight()\"\n  [maxWidth]=\"popupMaxWidth()\"\n  [minWidth]=\"popupMinWidth()\"\n  shadingColor=\"rgba(0,0,0,0.4)\"\n  (visibleChange)=\"onVisibilityChange($event)\"\n>\n  <div [class]=\"containerClass()\">\n    <div [class]=\"headerRowClass()\">\n      <div [class]=\"headerCell1Class()\">{{ 'BankName' | PayrollTranslate }}</div>\n      <div [class]=\"headerCell2Class()\">{{ 'Amount' | PayrollTranslate }} ({{ currencyCode() }})</div>\n      <div [class]=\"headerCell3Class()\">{{ 'IBAN' | PayrollTranslate }} / {{ 'AccountNumber' | PayrollTranslate }}</div>\n    </div>\n\n    @for (transfer of bankInformationDataSource(); track $index) {\n      <div [class]=\"dataRowClass()\">\n        <div [class]=\"dataCell1Class()\">{{ transfer.BankBranchName || transfer.BankName }}</div>\n        <div [class]=\"dataCell2Class()\">\n          {{ commonMethods.currencyDecimalFormat(transfer.TransferAmount, currencyDecimals()) }}\n        </div>\n        <div [class]=\"dataCell3Class()\">\n          {{\n            transfer.IBAN\n              ? ('IBAN' | PayrollTranslate) + ': ' + transfer.IBAN\n              : ('AC' | PayrollTranslate) + ': ' + transfer.BankAccountNumber\n          }}\n        </div>\n      </div>\n    }\n  </div>\n</dx-popup>\n" }]
+        }], ctorParameters: () => [], propDecorators: { bankInformationDataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "bankInformationDataSource", required: false }] }], visibleSalaryTransferPopup: [{ type: i0.Input, args: [{ isSignal: true, alias: "visibleSalaryTransferPopup", required: false }] }], currencyCode: [{ type: i0.Input, args: [{ isSignal: true, alias: "currencyCode", required: false }] }], currencyDecimals: [{ type: i0.Input, args: [{ isSignal: true, alias: "currencyDecimals", required: false }] }], popupHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupHeight", required: false }] }], popupMaxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupMaxWidth", required: false }] }], popupMinWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupMinWidth", required: false }] }], containerClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "containerClass", required: false }] }], headerRowClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerRowClass", required: false }] }], headerCell1Class: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerCell1Class", required: false }] }], headerCell2Class: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerCell2Class", required: false }] }], headerCell3Class: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerCell3Class", required: false }] }], dataRowClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataRowClass", required: false }] }], dataCell1Class: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataCell1Class", required: false }] }], dataCell2Class: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataCell2Class", required: false }] }], dataCell3Class: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataCell3Class", required: false }] }], openSalaryTransferPopupChange: [{ type: i0.Output, args: ["openSalaryTransferPopupChange"] }] } });
+
+class MyPayslipBankInfoWidgetComponent {
+    bankIcon = input(faUniversity, ...(ngDevMode ? [{ debugName: "bankIcon" }] : /* istanbul ignore next */ []));
+    accountIcon = input(faCreditCard, ...(ngDevMode ? [{ debugName: "accountIcon" }] : /* istanbul ignore next */ []));
+    titleClass = input('fw-medium mb-2 table-cell-md', ...(ngDevMode ? [{ debugName: "titleClass" }] : /* istanbul ignore next */ []));
+    desktopContainerClass = input('d-flex flex-column justify-content-start align-items-start mx-4 my-2', ...(ngDevMode ? [{ debugName: "desktopContainerClass" }] : /* istanbul ignore next */ []));
+    mobileContainerClass = input('d-flex align-items-center justify-content-between w-100', ...(ngDevMode ? [{ debugName: "mobileContainerClass" }] : /* istanbul ignore next */ []));
+    mobileCardClass = input('p-3 h-50 card-shadow rounded-1 mb-3 mt-3 w-90 mh-150 mx-3', ...(ngDevMode ? [{ debugName: "mobileCardClass" }] : /* istanbul ignore next */ []));
+    iconClass = input('fs-16 me-2 text-gray', ...(ngDevMode ? [{ debugName: "iconClass" }] : /* istanbul ignore next */ []));
+    rowClass = input('d-flex align-items-center my-1 w-100', ...(ngDevMode ? [{ debugName: "rowClass" }] : /* istanbul ignore next */ []));
+    labelClass = input('fw-light fs-12 text-light-dark', ...(ngDevMode ? [{ debugName: "labelClass" }] : /* istanbul ignore next */ []));
+    valueClass = input('fw-400 ms-1 text-light-dark fs-12', ...(ngDevMode ? [{ debugName: "valueClass" }] : /* istanbul ignore next */ []));
+    actionClass = input('mt-2 fs-12 text-primary fw-400 cursor-pointer text-decoration-underline', ...(ngDevMode ? [{ debugName: "actionClass" }] : /* istanbul ignore next */ []));
+    exploreDetailsKey = input('ExploreSalaryTransferDetails', ...(ngDevMode ? [{ debugName: "exploreDetailsKey" }] : /* istanbul ignore next */ []));
+    popupHeight = input('auto', ...(ngDevMode ? [{ debugName: "popupHeight" }] : /* istanbul ignore next */ []));
+    popupMaxWidth = input('800px', ...(ngDevMode ? [{ debugName: "popupMaxWidth" }] : /* istanbul ignore next */ []));
+    popupMinWidth = input('auto', ...(ngDevMode ? [{ debugName: "popupMinWidth" }] : /* istanbul ignore next */ []));
+    popupContainerClass = input('', ...(ngDevMode ? [{ debugName: "popupContainerClass" }] : /* istanbul ignore next */ []));
+    popupHeaderRowClass = input('fw-bold text-secondary pb-2 d-flex', ...(ngDevMode ? [{ debugName: "popupHeaderRowClass" }] : /* istanbul ignore next */ []));
+    popupHeaderCell1Class = input('w-35 text-dark-gray fs-12 fw-400', ...(ngDevMode ? [{ debugName: "popupHeaderCell1Class" }] : /* istanbul ignore next */ []));
+    popupHeaderCell2Class = input('w-20 text-start text-dark-gray fs-12 fw-400', ...(ngDevMode ? [{ debugName: "popupHeaderCell2Class" }] : /* istanbul ignore next */ []));
+    popupHeaderCell3Class = input('w-45 text-dark-gray fs-12 fw-400', ...(ngDevMode ? [{ debugName: "popupHeaderCell3Class" }] : /* istanbul ignore next */ []));
+    popupDataRowClass = input('py-2 d-flex', ...(ngDevMode ? [{ debugName: "popupDataRowClass" }] : /* istanbul ignore next */ []));
+    popupDataCell1Class = input('w-35 text-dark-gray fs-14 fw-400', ...(ngDevMode ? [{ debugName: "popupDataCell1Class" }] : /* istanbul ignore next */ []));
+    popupDataCell2Class = input('w-20 text-start text-dark-gray fs-14 fw-400', ...(ngDevMode ? [{ debugName: "popupDataCell2Class" }] : /* istanbul ignore next */ []));
+    popupDataCell3Class = input('w-45 text-start text-dark-gray fs-14 fw-400', ...(ngDevMode ? [{ debugName: "popupDataCell3Class" }] : /* istanbul ignore next */ []));
+    title = input('BankInformation', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    baseUrl = input('', ...(ngDevMode ? [{ debugName: "baseUrl" }] : /* istanbul ignore next */ []));
+    payMonth = input('', ...(ngDevMode ? [{ debugName: "payMonth" }] : /* istanbul ignore next */ []));
+    isMobile = input(false, ...(ngDevMode ? [{ debugName: "isMobile" }] : /* istanbul ignore next */ []));
+    errorOccurred = output();
+    isLoadingChanged = output();
+    isPayslipAvailable = input(true, ...(ngDevMode ? [{ debugName: "isPayslipAvailable" }] : /* istanbul ignore next */ []));
+    bankInformation = signal(null, ...(ngDevMode ? [{ debugName: "bankInformation" }] : /* istanbul ignore next */ []));
+    isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []));
+    visibleSalaryTransferPopup = signal(false, ...(ngDevMode ? [{ debugName: "visibleSalaryTransferPopup" }] : /* istanbul ignore next */ []));
+    exploreDetailsClick = output();
+    payrollWidgetsService = inject(PayrollSelfWidgetsService);
+    constructor() {
+        effect(() => {
+            if (this.baseUrl() && this.payMonth()) {
+                this.loadBankInformation();
+            }
+        });
+    }
+    loadBankInformation() {
+        if (!this.isPayslipAvailable()) {
+            this.bankInformation.set([]);
+            return;
+        }
+        this.isLoading.set(true);
+        this.isLoadingChanged.emit(true);
+        this.payrollWidgetsService
+            .getPayslipBankInformation(this.baseUrl(), this.payMonth())
+            .pipe(finalize(() => {
+            this.isLoading.set(false);
+            this.isLoadingChanged.emit(false);
+        }))
+            .subscribe({
+            next: res => {
+                this.bankInformation.set(res?.ResponseData ?? []);
+            },
+            error: (error) => {
+                this.isLoadingChanged.emit(false);
+                this.errorOccurred.emit(error.error.ResponseData.Errors[0].Message);
+                this.bankInformation.set([]);
+            },
+        });
+    }
+    mainBank = computed(() => this.bankInformation()?.find(bank => bank.IsMainBank) ?? this.bankInformation()?.[0] ?? null, ...(ngDevMode ? [{ debugName: "mainBank" }] : /* istanbul ignore next */ []));
+    display(value) {
+        if (this.isLoading() || !this.isPayslipAvailable() || value == null) {
+            return '-';
+        }
+        return `${value}`;
+    }
+    accountLabel(bank) {
+        return bank?.BankAccountNumber != null ? (bank?.IBAN != null ? 'IBAN' : 'AC') : 'IBAN';
+    }
+    bankItems = computed(() => {
+        const bank = this.mainBank();
+        return [
+            {
+                key: 'Bank',
+                label: 'Bank',
+                icon: this.bankIcon(),
+                value: this.display(bank?.BankName),
+            },
+            {
+                key: this.accountLabel(bank),
+                label: this.accountLabel(bank),
+                icon: this.accountIcon(),
+                value: this.display(bank?.IBAN || bank?.BankAccountNumber),
+            },
+        ];
+    }, ...(ngDevMode ? [{ debugName: "bankItems" }] : /* istanbul ignore next */ []));
+    showExploreLink = computed(() => !!this.bankInformation()?.length && this.isPayslipAvailable(), ...(ngDevMode ? [{ debugName: "showExploreLink" }] : /* istanbul ignore next */ []));
+    onExploreDetailsClick() {
+        const hasObservedSubscribers = this.exploreDetailsClick.observed === true;
+        if (hasObservedSubscribers) {
+            this.exploreDetailsClick.emit();
+            return;
+        }
+        this.visibleSalaryTransferPopup.set(true);
+    }
+    onSalaryTransferVisibilityChanged(visible) {
+        this.visibleSalaryTransferPopup.set(visible);
+    }
+    currencyCode = computed(() => this.mainBank()?.CurrencyCode ?? '', ...(ngDevMode ? [{ debugName: "currencyCode" }] : /* istanbul ignore next */ []));
+    currencyDecimals = computed(() => this.mainBank()?.CurrencyDecimals ?? 2, ...(ngDevMode ? [{ debugName: "currencyDecimals" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: MyPayslipBankInfoWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: MyPayslipBankInfoWidgetComponent, isStandalone: true, selector: "payroll-my-payslip-bank-info-widget", inputs: { bankIcon: { classPropertyName: "bankIcon", publicName: "bankIcon", isSignal: true, isRequired: false, transformFunction: null }, accountIcon: { classPropertyName: "accountIcon", publicName: "accountIcon", isSignal: true, isRequired: false, transformFunction: null }, titleClass: { classPropertyName: "titleClass", publicName: "titleClass", isSignal: true, isRequired: false, transformFunction: null }, desktopContainerClass: { classPropertyName: "desktopContainerClass", publicName: "desktopContainerClass", isSignal: true, isRequired: false, transformFunction: null }, mobileContainerClass: { classPropertyName: "mobileContainerClass", publicName: "mobileContainerClass", isSignal: true, isRequired: false, transformFunction: null }, mobileCardClass: { classPropertyName: "mobileCardClass", publicName: "mobileCardClass", isSignal: true, isRequired: false, transformFunction: null }, iconClass: { classPropertyName: "iconClass", publicName: "iconClass", isSignal: true, isRequired: false, transformFunction: null }, rowClass: { classPropertyName: "rowClass", publicName: "rowClass", isSignal: true, isRequired: false, transformFunction: null }, labelClass: { classPropertyName: "labelClass", publicName: "labelClass", isSignal: true, isRequired: false, transformFunction: null }, valueClass: { classPropertyName: "valueClass", publicName: "valueClass", isSignal: true, isRequired: false, transformFunction: null }, actionClass: { classPropertyName: "actionClass", publicName: "actionClass", isSignal: true, isRequired: false, transformFunction: null }, exploreDetailsKey: { classPropertyName: "exploreDetailsKey", publicName: "exploreDetailsKey", isSignal: true, isRequired: false, transformFunction: null }, popupHeight: { classPropertyName: "popupHeight", publicName: "popupHeight", isSignal: true, isRequired: false, transformFunction: null }, popupMaxWidth: { classPropertyName: "popupMaxWidth", publicName: "popupMaxWidth", isSignal: true, isRequired: false, transformFunction: null }, popupMinWidth: { classPropertyName: "popupMinWidth", publicName: "popupMinWidth", isSignal: true, isRequired: false, transformFunction: null }, popupContainerClass: { classPropertyName: "popupContainerClass", publicName: "popupContainerClass", isSignal: true, isRequired: false, transformFunction: null }, popupHeaderRowClass: { classPropertyName: "popupHeaderRowClass", publicName: "popupHeaderRowClass", isSignal: true, isRequired: false, transformFunction: null }, popupHeaderCell1Class: { classPropertyName: "popupHeaderCell1Class", publicName: "popupHeaderCell1Class", isSignal: true, isRequired: false, transformFunction: null }, popupHeaderCell2Class: { classPropertyName: "popupHeaderCell2Class", publicName: "popupHeaderCell2Class", isSignal: true, isRequired: false, transformFunction: null }, popupHeaderCell3Class: { classPropertyName: "popupHeaderCell3Class", publicName: "popupHeaderCell3Class", isSignal: true, isRequired: false, transformFunction: null }, popupDataRowClass: { classPropertyName: "popupDataRowClass", publicName: "popupDataRowClass", isSignal: true, isRequired: false, transformFunction: null }, popupDataCell1Class: { classPropertyName: "popupDataCell1Class", publicName: "popupDataCell1Class", isSignal: true, isRequired: false, transformFunction: null }, popupDataCell2Class: { classPropertyName: "popupDataCell2Class", publicName: "popupDataCell2Class", isSignal: true, isRequired: false, transformFunction: null }, popupDataCell3Class: { classPropertyName: "popupDataCell3Class", publicName: "popupDataCell3Class", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, baseUrl: { classPropertyName: "baseUrl", publicName: "baseUrl", isSignal: true, isRequired: false, transformFunction: null }, payMonth: { classPropertyName: "payMonth", publicName: "payMonth", isSignal: true, isRequired: false, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null }, isPayslipAvailable: { classPropertyName: "isPayslipAvailable", publicName: "isPayslipAvailable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { errorOccurred: "errorOccurred", isLoadingChanged: "isLoadingChanged", exploreDetailsClick: "exploreDetailsClick" }, ngImport: i0, template: "<ng-template #bankTitleTemplate>\n  <div [class]=\"titleClass()\">{{ title() | PayrollTranslate }}</div>\n</ng-template>\n\n<ng-template #bankRowsTemplate>\n  @for (item of bankItems(); track $index) {\n    <div [class]=\"rowClass()\">\n      <fa-icon [icon]=\"item.icon\" [class]=\"iconClass()\"></fa-icon>\n      <div class=\"flex-grow-1\">\n        <span [class]=\"labelClass()\">{{ item.label | PayrollTranslate }}:</span>\n        <span [class]=\"valueClass()\">{{ item.value }}</span>\n      </div>\n    </div>\n  }\n</ng-template>\n\n<ng-template #bankExploreLinkTemplate>\n  @if (showExploreLink()) {\n    <a href=\"javascript:void(0)\" [class]=\"actionClass()\" (click)=\"onExploreDetailsClick()\">\n      {{ exploreDetailsKey() | PayrollTranslate }}\n    </a>\n  }\n</ng-template>\n\n@if (!isMobile()) {\n  <div [class]=\"desktopContainerClass()\">\n    <ng-container *ngTemplateOutlet=\"bankTitleTemplate\" />\n    <ng-container *ngTemplateOutlet=\"bankRowsTemplate\" />\n    <ng-container *ngTemplateOutlet=\"bankExploreLinkTemplate\" />\n  </div>\n} @else {\n  <div [class]=\"mobileContainerClass()\">\n    <div [class]=\"mobileCardClass()\">\n      <ng-container *ngTemplateOutlet=\"bankTitleTemplate\" />\n      <ng-container *ngTemplateOutlet=\"bankRowsTemplate\" />\n      <ng-container *ngTemplateOutlet=\"bankExploreLinkTemplate\" />\n    </div>\n  </div>\n}\n\n<payroll-salary-transfer-popup\n  [visibleSalaryTransferPopup]=\"visibleSalaryTransferPopup()\"\n  [bankInformationDataSource]=\"bankInformation() ?? []\"\n  [currencyCode]=\"currencyCode()\"\n  [currencyDecimals]=\"currencyDecimals()\"\n  [popupHeight]=\"popupHeight()\"\n  [popupMaxWidth]=\"popupMaxWidth()\"\n  [popupMinWidth]=\"popupMinWidth()\"\n  [containerClass]=\"popupContainerClass()\"\n  [headerRowClass]=\"popupHeaderRowClass()\"\n  [headerCell1Class]=\"popupHeaderCell1Class()\"\n  [headerCell2Class]=\"popupHeaderCell2Class()\"\n  [headerCell3Class]=\"popupHeaderCell3Class()\"\n  [dataRowClass]=\"popupDataRowClass()\"\n  [dataCell1Class]=\"popupDataCell1Class()\"\n  [dataCell2Class]=\"popupDataCell2Class()\"\n  [dataCell3Class]=\"popupDataCell3Class()\"\n  (openSalaryTransferPopupChange)=\"onSalaryTransferVisibilityChanged($event)\"\n></payroll-salary-transfer-popup>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }, { kind: "component", type: SalaryTransferPopupComponent, selector: "payroll-salary-transfer-popup", inputs: ["bankInformationDataSource", "visibleSalaryTransferPopup", "currencyCode", "currencyDecimals", "popupHeight", "popupMaxWidth", "popupMinWidth", "containerClass", "headerRowClass", "headerCell1Class", "headerCell2Class", "headerCell3Class", "dataRowClass", "dataCell1Class", "dataCell2Class", "dataCell3Class"], outputs: ["openSalaryTransferPopupChange"] }, { kind: "pipe", type: PayrollTranslatePipe, name: "PayrollTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: MyPayslipBankInfoWidgetComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'payroll-my-payslip-bank-info-widget', standalone: true, imports: [CommonModule, FaIconComponent, PayrollTranslatePipe, SalaryTransferPopupComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #bankTitleTemplate>\n  <div [class]=\"titleClass()\">{{ title() | PayrollTranslate }}</div>\n</ng-template>\n\n<ng-template #bankRowsTemplate>\n  @for (item of bankItems(); track $index) {\n    <div [class]=\"rowClass()\">\n      <fa-icon [icon]=\"item.icon\" [class]=\"iconClass()\"></fa-icon>\n      <div class=\"flex-grow-1\">\n        <span [class]=\"labelClass()\">{{ item.label | PayrollTranslate }}:</span>\n        <span [class]=\"valueClass()\">{{ item.value }}</span>\n      </div>\n    </div>\n  }\n</ng-template>\n\n<ng-template #bankExploreLinkTemplate>\n  @if (showExploreLink()) {\n    <a href=\"javascript:void(0)\" [class]=\"actionClass()\" (click)=\"onExploreDetailsClick()\">\n      {{ exploreDetailsKey() | PayrollTranslate }}\n    </a>\n  }\n</ng-template>\n\n@if (!isMobile()) {\n  <div [class]=\"desktopContainerClass()\">\n    <ng-container *ngTemplateOutlet=\"bankTitleTemplate\" />\n    <ng-container *ngTemplateOutlet=\"bankRowsTemplate\" />\n    <ng-container *ngTemplateOutlet=\"bankExploreLinkTemplate\" />\n  </div>\n} @else {\n  <div [class]=\"mobileContainerClass()\">\n    <div [class]=\"mobileCardClass()\">\n      <ng-container *ngTemplateOutlet=\"bankTitleTemplate\" />\n      <ng-container *ngTemplateOutlet=\"bankRowsTemplate\" />\n      <ng-container *ngTemplateOutlet=\"bankExploreLinkTemplate\" />\n    </div>\n  </div>\n}\n\n<payroll-salary-transfer-popup\n  [visibleSalaryTransferPopup]=\"visibleSalaryTransferPopup()\"\n  [bankInformationDataSource]=\"bankInformation() ?? []\"\n  [currencyCode]=\"currencyCode()\"\n  [currencyDecimals]=\"currencyDecimals()\"\n  [popupHeight]=\"popupHeight()\"\n  [popupMaxWidth]=\"popupMaxWidth()\"\n  [popupMinWidth]=\"popupMinWidth()\"\n  [containerClass]=\"popupContainerClass()\"\n  [headerRowClass]=\"popupHeaderRowClass()\"\n  [headerCell1Class]=\"popupHeaderCell1Class()\"\n  [headerCell2Class]=\"popupHeaderCell2Class()\"\n  [headerCell3Class]=\"popupHeaderCell3Class()\"\n  [dataRowClass]=\"popupDataRowClass()\"\n  [dataCell1Class]=\"popupDataCell1Class()\"\n  [dataCell2Class]=\"popupDataCell2Class()\"\n  [dataCell3Class]=\"popupDataCell3Class()\"\n  (openSalaryTransferPopupChange)=\"onSalaryTransferVisibilityChanged($event)\"\n></payroll-salary-transfer-popup>\n" }]
+        }], ctorParameters: () => [], propDecorators: { bankIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "bankIcon", required: false }] }], accountIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "accountIcon", required: false }] }], titleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleClass", required: false }] }], desktopContainerClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "desktopContainerClass", required: false }] }], mobileContainerClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileContainerClass", required: false }] }], mobileCardClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileCardClass", required: false }] }], iconClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconClass", required: false }] }], rowClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowClass", required: false }] }], labelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelClass", required: false }] }], valueClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueClass", required: false }] }], actionClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionClass", required: false }] }], exploreDetailsKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "exploreDetailsKey", required: false }] }], popupHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupHeight", required: false }] }], popupMaxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupMaxWidth", required: false }] }], popupMinWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupMinWidth", required: false }] }], popupContainerClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupContainerClass", required: false }] }], popupHeaderRowClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupHeaderRowClass", required: false }] }], popupHeaderCell1Class: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupHeaderCell1Class", required: false }] }], popupHeaderCell2Class: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupHeaderCell2Class", required: false }] }], popupHeaderCell3Class: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupHeaderCell3Class", required: false }] }], popupDataRowClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupDataRowClass", required: false }] }], popupDataCell1Class: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupDataCell1Class", required: false }] }], popupDataCell2Class: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupDataCell2Class", required: false }] }], popupDataCell3Class: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupDataCell3Class", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], baseUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "baseUrl", required: false }] }], payMonth: [{ type: i0.Input, args: [{ isSignal: true, alias: "payMonth", required: false }] }], isMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMobile", required: false }] }], errorOccurred: [{ type: i0.Output, args: ["errorOccurred"] }], isLoadingChanged: [{ type: i0.Output, args: ["isLoadingChanged"] }], isPayslipAvailable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isPayslipAvailable", required: false }] }], exploreDetailsClick: [{ type: i0.Output, args: ["exploreDetailsClick"] }] } });
+
+class MyPayslipVacationBalanceWidgetComponent {
+    vacationIcon = input(faIslandTropical, ...(ngDevMode ? [{ debugName: "vacationIcon" }] : /* istanbul ignore next */ []));
+    titleClass = input('fw-medium mb-2 table-cell-md', ...(ngDevMode ? [{ debugName: "titleClass" }] : /* istanbul ignore next */ []));
+    desktopContainerClass = input('d-flex flex-column justify-content-start align-items-start mx-4 my-2', ...(ngDevMode ? [{ debugName: "desktopContainerClass" }] : /* istanbul ignore next */ []));
+    mobileContainerClass = input('d-flex align-items-center justify-content-center w-100', ...(ngDevMode ? [{ debugName: "mobileContainerClass" }] : /* istanbul ignore next */ []));
+    mobileCardClass = input('p-3 h-50 card-shadow rounded-1 mb-3 mt-3 w-90 mh-150 mx-3', ...(ngDevMode ? [{ debugName: "mobileCardClass" }] : /* istanbul ignore next */ []));
+    iconClass = input('fs-16 me-2 text-gray', ...(ngDevMode ? [{ debugName: "iconClass" }] : /* istanbul ignore next */ []));
+    rowClass = input('d-flex align-items-center my-1 w-100', ...(ngDevMode ? [{ debugName: "rowClass" }] : /* istanbul ignore next */ []));
+    labelClass = input('fw-light fs-12 text-light-dark', ...(ngDevMode ? [{ debugName: "labelClass" }] : /* istanbul ignore next */ []));
+    valueClass = input('fw-400 ms-1 text-light-dark fs-12', ...(ngDevMode ? [{ debugName: "valueClass" }] : /* istanbul ignore next */ []));
+    viewMoreLabel = input('ViewMore', ...(ngDevMode ? [{ debugName: "viewMoreLabel" }] : /* istanbul ignore next */ []));
+    viewLessLabel = input('ViewLess', ...(ngDevMode ? [{ debugName: "viewLessLabel" }] : /* istanbul ignore next */ []));
+    expandIcon = input(faChevronDown, ...(ngDevMode ? [{ debugName: "expandIcon" }] : /* istanbul ignore next */ []));
+    collapseIcon = input(faChevronUp, ...(ngDevMode ? [{ debugName: "collapseIcon" }] : /* istanbul ignore next */ []));
+    actionIconClass = input('fs-10 ms-1', ...(ngDevMode ? [{ debugName: "actionIconClass" }] : /* istanbul ignore next */ []));
+    actionButtonClass = input('mt-2 fs-12 text-primary fw-400 cursor-pointer text-decoration-underline bg-transparent border-0 p-0', ...(ngDevMode ? [{ debugName: "actionButtonClass" }] : /* istanbul ignore next */ []));
+    title = input('VacationBalance', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    daysLabel = input('Days', ...(ngDevMode ? [{ debugName: "daysLabel" }] : /* istanbul ignore next */ []));
+    baseUrl = input('', ...(ngDevMode ? [{ debugName: "baseUrl" }] : /* istanbul ignore next */ []));
+    payMonth = input(null, ...(ngDevMode ? [{ debugName: "payMonth" }] : /* istanbul ignore next */ []));
+    isMobile = input(false, ...(ngDevMode ? [{ debugName: "isMobile" }] : /* istanbul ignore next */ []));
+    isPayslipAvailable = input(true, ...(ngDevMode ? [{ debugName: "isPayslipAvailable" }] : /* istanbul ignore next */ []));
+    isExpanded = signal(false, ...(ngDevMode ? [{ debugName: "isExpanded" }] : /* istanbul ignore next */ []));
+    collapsedItemsCount = input(2, ...(ngDevMode ? [{ debugName: "collapsedItemsCount" }] : /* istanbul ignore next */ []));
+    isLoadingChanged = output();
+    errorOccurred = output();
+    vacationBalances = signal(null, ...(ngDevMode ? [{ debugName: "vacationBalances" }] : /* istanbul ignore next */ []));
+    isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []));
+    payrollWidgetsService = inject(PayrollSelfWidgetsService);
+    constructor() {
+        effect(() => {
+            if (this.baseUrl() && this.payMonth()) {
+                this.loadVacationBalances();
+            }
+        });
+    }
+    loadVacationBalances() {
+        const payMonth = this.payMonth();
+        if (!this.isPayslipAvailable() || !payMonth) {
+            this.vacationBalances.set([]);
+            return;
+        }
+        this.isLoading.set(true);
+        this.isLoadingChanged.emit(true);
+        this.payrollWidgetsService
+            .getPayslipVacationBalances(this.baseUrl(), payMonth)
+            .pipe(finalize(() => {
+            this.isLoading.set(false);
+            this.isLoadingChanged.emit(false);
+        }))
+            .subscribe({
+            next: res => {
+                this.vacationBalances.set(res?.ResponseData ?? []);
+            },
+            error: (error) => {
+                this.vacationBalances.set([]);
+                this.errorOccurred.emit(error.error.ResponseData.Errors[0].Message);
+            },
+        });
+    }
+    vacationItems = computed(() => {
+        if ((!this.isPayslipAvailable() || this.isLoading()) && !this.vacationBalances()?.length) {
+            return [
+                {
+                    label: this.title(),
+                    value: '-',
+                    showDays: false,
+                },
+            ];
+        }
+        if (!this.isPayslipAvailable() && !this.vacationBalances()?.length) {
+            return [
+                {
+                    label: this.title(),
+                    value: '-',
+                    showDays: false,
+                },
+            ];
+        }
+        return (this.vacationBalances() ?? []).map(vacationBalance => ({
+            label: this.getVacationTypeName(vacationBalance),
+            value: this.getVacationBalance(vacationBalance.VacationBalance),
+            showDays: this.showDaysLabel(vacationBalance.VacationBalance),
+        }));
+    }, ...(ngDevMode ? [{ debugName: "vacationItems" }] : /* istanbul ignore next */ []));
+    visibleVacationBalances = computed(() => {
+        const balances = this.vacationItems() ?? [];
+        if (this.isExpanded()) {
+            return balances;
+        }
+        return balances.slice(0, this.collapsedItemsCount());
+    }, ...(ngDevMode ? [{ debugName: "visibleVacationBalances" }] : /* istanbul ignore next */ []));
+    showViewMoreButton = computed(() => !!this.vacationBalances() && this.vacationBalances().length > this.collapsedItemsCount(), ...(ngDevMode ? [{ debugName: "showViewMoreButton" }] : /* istanbul ignore next */ []));
+    expandButtonlabel = computed(() => (this.isExpanded() ? this.viewLessLabel() : this.viewMoreLabel()), ...(ngDevMode ? [{ debugName: "expandButtonlabel" }] : /* istanbul ignore next */ []));
+    toggleExpanded() {
+        this.isExpanded.update(value => !value);
+    }
+    getVacationTypeName(vacationBalance) {
+        if (this.isLoading() || !this.isPayslipAvailable())
+            return '-';
+        return vacationBalance.VacationTypeName || '-';
+    }
+    getVacationBalance(value) {
+        if (this.isLoading() || !this.isPayslipAvailable() || value == null)
+            return '-';
+        return value.toFixed(2);
+    }
+    showDaysLabel(value) {
+        const balance = this.getVacationBalance(value);
+        return balance !== '-';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: MyPayslipVacationBalanceWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: MyPayslipVacationBalanceWidgetComponent, isStandalone: true, selector: "payroll-my-payslip-vacation-balance-widget", inputs: { vacationIcon: { classPropertyName: "vacationIcon", publicName: "vacationIcon", isSignal: true, isRequired: false, transformFunction: null }, titleClass: { classPropertyName: "titleClass", publicName: "titleClass", isSignal: true, isRequired: false, transformFunction: null }, desktopContainerClass: { classPropertyName: "desktopContainerClass", publicName: "desktopContainerClass", isSignal: true, isRequired: false, transformFunction: null }, mobileContainerClass: { classPropertyName: "mobileContainerClass", publicName: "mobileContainerClass", isSignal: true, isRequired: false, transformFunction: null }, mobileCardClass: { classPropertyName: "mobileCardClass", publicName: "mobileCardClass", isSignal: true, isRequired: false, transformFunction: null }, iconClass: { classPropertyName: "iconClass", publicName: "iconClass", isSignal: true, isRequired: false, transformFunction: null }, rowClass: { classPropertyName: "rowClass", publicName: "rowClass", isSignal: true, isRequired: false, transformFunction: null }, labelClass: { classPropertyName: "labelClass", publicName: "labelClass", isSignal: true, isRequired: false, transformFunction: null }, valueClass: { classPropertyName: "valueClass", publicName: "valueClass", isSignal: true, isRequired: false, transformFunction: null }, viewMoreLabel: { classPropertyName: "viewMoreLabel", publicName: "viewMoreLabel", isSignal: true, isRequired: false, transformFunction: null }, viewLessLabel: { classPropertyName: "viewLessLabel", publicName: "viewLessLabel", isSignal: true, isRequired: false, transformFunction: null }, expandIcon: { classPropertyName: "expandIcon", publicName: "expandIcon", isSignal: true, isRequired: false, transformFunction: null }, collapseIcon: { classPropertyName: "collapseIcon", publicName: "collapseIcon", isSignal: true, isRequired: false, transformFunction: null }, actionIconClass: { classPropertyName: "actionIconClass", publicName: "actionIconClass", isSignal: true, isRequired: false, transformFunction: null }, actionButtonClass: { classPropertyName: "actionButtonClass", publicName: "actionButtonClass", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, daysLabel: { classPropertyName: "daysLabel", publicName: "daysLabel", isSignal: true, isRequired: false, transformFunction: null }, baseUrl: { classPropertyName: "baseUrl", publicName: "baseUrl", isSignal: true, isRequired: false, transformFunction: null }, payMonth: { classPropertyName: "payMonth", publicName: "payMonth", isSignal: true, isRequired: false, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null }, isPayslipAvailable: { classPropertyName: "isPayslipAvailable", publicName: "isPayslipAvailable", isSignal: true, isRequired: false, transformFunction: null }, collapsedItemsCount: { classPropertyName: "collapsedItemsCount", publicName: "collapsedItemsCount", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isLoadingChanged: "isLoadingChanged", errorOccurred: "errorOccurred" }, ngImport: i0, template: "<ng-template #vacationTitleTemplate>\n  <div [class]=\"titleClass()\">{{ title() | PayrollTranslate }}</div>\n</ng-template>\n\n<ng-template #vacationRowsTemplate>\n  @for (vacationBalance of visibleVacationBalances(); track $index) {\n    <div [class]=\"rowClass()\">\n      <fa-icon [icon]=\"vacationIcon()\" [class]=\"iconClass()\"></fa-icon>\n      <div class=\"flex-grow-1\">\n        <span [class]=\"labelClass()\">{{ vacationBalance.label | PayrollTranslate }}:</span>\n        <span [class]=\"valueClass()\">\n          {{ vacationBalance.value }}\n        </span>\n      </div>\n    </div>\n  }\n</ng-template>\n\n<ng-template #viewMoreTemplate>\n  @if (showViewMoreButton()) {\n    <button type=\"button\" [class]=\"actionButtonClass()\" (click)=\"toggleExpanded()\">\n      {{ expandButtonlabel() | PayrollTranslate }}\n    </button>\n  }\n</ng-template>\n\n@if (!isMobile()) {\n  <div [class]=\"desktopContainerClass()\">\n    <ng-container *ngTemplateOutlet=\"vacationTitleTemplate\" />\n    <ng-container *ngTemplateOutlet=\"vacationRowsTemplate\" />\n    <ng-container *ngTemplateOutlet=\"viewMoreTemplate\" />\n  </div>\n} @else {\n  <div [class]=\"mobileContainerClass()\">\n    <div [class]=\"mobileCardClass()\">\n      <ng-container *ngTemplateOutlet=\"vacationTitleTemplate\" />\n      <ng-container *ngTemplateOutlet=\"vacationRowsTemplate\" />\n      <ng-container *ngTemplateOutlet=\"viewMoreTemplate\" />\n    </div>\n  </div>\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }, { kind: "pipe", type: PayrollTranslatePipe, name: "PayrollTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: MyPayslipVacationBalanceWidgetComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'payroll-my-payslip-vacation-balance-widget', standalone: true, imports: [CommonModule, FaIconComponent, PayrollTranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #vacationTitleTemplate>\n  <div [class]=\"titleClass()\">{{ title() | PayrollTranslate }}</div>\n</ng-template>\n\n<ng-template #vacationRowsTemplate>\n  @for (vacationBalance of visibleVacationBalances(); track $index) {\n    <div [class]=\"rowClass()\">\n      <fa-icon [icon]=\"vacationIcon()\" [class]=\"iconClass()\"></fa-icon>\n      <div class=\"flex-grow-1\">\n        <span [class]=\"labelClass()\">{{ vacationBalance.label | PayrollTranslate }}:</span>\n        <span [class]=\"valueClass()\">\n          {{ vacationBalance.value }}\n        </span>\n      </div>\n    </div>\n  }\n</ng-template>\n\n<ng-template #viewMoreTemplate>\n  @if (showViewMoreButton()) {\n    <button type=\"button\" [class]=\"actionButtonClass()\" (click)=\"toggleExpanded()\">\n      {{ expandButtonlabel() | PayrollTranslate }}\n    </button>\n  }\n</ng-template>\n\n@if (!isMobile()) {\n  <div [class]=\"desktopContainerClass()\">\n    <ng-container *ngTemplateOutlet=\"vacationTitleTemplate\" />\n    <ng-container *ngTemplateOutlet=\"vacationRowsTemplate\" />\n    <ng-container *ngTemplateOutlet=\"viewMoreTemplate\" />\n  </div>\n} @else {\n  <div [class]=\"mobileContainerClass()\">\n    <div [class]=\"mobileCardClass()\">\n      <ng-container *ngTemplateOutlet=\"vacationTitleTemplate\" />\n      <ng-container *ngTemplateOutlet=\"vacationRowsTemplate\" />\n      <ng-container *ngTemplateOutlet=\"viewMoreTemplate\" />\n    </div>\n  </div>\n}\n" }]
+        }], ctorParameters: () => [], propDecorators: { vacationIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "vacationIcon", required: false }] }], titleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleClass", required: false }] }], desktopContainerClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "desktopContainerClass", required: false }] }], mobileContainerClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileContainerClass", required: false }] }], mobileCardClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileCardClass", required: false }] }], iconClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconClass", required: false }] }], rowClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowClass", required: false }] }], labelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelClass", required: false }] }], valueClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueClass", required: false }] }], viewMoreLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMoreLabel", required: false }] }], viewLessLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewLessLabel", required: false }] }], expandIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandIcon", required: false }] }], collapseIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapseIcon", required: false }] }], actionIconClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionIconClass", required: false }] }], actionButtonClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionButtonClass", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], daysLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "daysLabel", required: false }] }], baseUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "baseUrl", required: false }] }], payMonth: [{ type: i0.Input, args: [{ isSignal: true, alias: "payMonth", required: false }] }], isMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMobile", required: false }] }], isPayslipAvailable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isPayslipAvailable", required: false }] }], collapsedItemsCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsedItemsCount", required: false }] }], isLoadingChanged: [{ type: i0.Output, args: ["isLoadingChanged"] }], errorOccurred: [{ type: i0.Output, args: ["errorOccurred"] }] } });
+
+class MyPayslipTicketBalanceWidgetComponent {
+    ticketIcon = input(faUser, ...(ngDevMode ? [{ debugName: "ticketIcon" }] : /* istanbul ignore next */ []));
+    titleClass = input('fw-medium mb-2 table-cell-md', ...(ngDevMode ? [{ debugName: "titleClass" }] : /* istanbul ignore next */ []));
+    desktopContainerClass = input('d-flex flex-column justify-content-start align-items-start mx-4 my-2', ...(ngDevMode ? [{ debugName: "desktopContainerClass" }] : /* istanbul ignore next */ []));
+    mobileCardClass = input('p-3 h-50 card-shadow rounded-1 mb-3 mt-3 w-90 mh-150 mx-3', ...(ngDevMode ? [{ debugName: "mobileCardClass" }] : /* istanbul ignore next */ []));
+    mobileContainerClass = input('d-flex align-items-center justify-content-center w-100', ...(ngDevMode ? [{ debugName: "mobileContainerClass" }] : /* istanbul ignore next */ []));
+    iconClass = input('fs-16 me-2 text-gray', ...(ngDevMode ? [{ debugName: "iconClass" }] : /* istanbul ignore next */ []));
+    rowClass = input('d-flex align-items-center my-1 w-100', ...(ngDevMode ? [{ debugName: "rowClass" }] : /* istanbul ignore next */ []));
+    labelClass = input('fw-light fs-12 text-light-dark', ...(ngDevMode ? [{ debugName: "labelClass" }] : /* istanbul ignore next */ []));
+    valueClass = input('fw-400 ms-1 text-light-dark fs-12', ...(ngDevMode ? [{ debugName: "valueClass" }] : /* istanbul ignore next */ []));
+    title = input('TicketBalance', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    tickets = input('Tickets', ...(ngDevMode ? [{ debugName: "tickets" }] : /* istanbul ignore next */ []));
+    baseUrl = input('', ...(ngDevMode ? [{ debugName: "baseUrl" }] : /* istanbul ignore next */ []));
+    payMonth = input(null, ...(ngDevMode ? [{ debugName: "payMonth" }] : /* istanbul ignore next */ []));
+    isMobile = input(false, ...(ngDevMode ? [{ debugName: "isMobile" }] : /* istanbul ignore next */ []));
+    isPayslipAvailable = input(true, ...(ngDevMode ? [{ debugName: "isPayslipAvailable" }] : /* istanbul ignore next */ []));
+    isLoadingChanged = output();
+    errorOccurred = output();
+    ticketBalances = signal(null, ...(ngDevMode ? [{ debugName: "ticketBalances" }] : /* istanbul ignore next */ []));
+    isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []));
+    payrollWidgetsService = inject(PayrollSelfWidgetsService);
+    constructor() {
+        effect(() => {
+            if (this.baseUrl() && this.payMonth()) {
+                this.loadTicketBalances();
+            }
+        });
+    }
+    loadTicketBalances() {
+        const payMonth = this.payMonth();
+        if (!this.isPayslipAvailable() || !payMonth) {
+            this.ticketBalances.set([]);
+            return;
+        }
+        this.isLoading.set(true);
+        this.isLoadingChanged.emit(true);
+        this.payrollWidgetsService
+            .getPayslipTicketBalances(this.baseUrl(), payMonth)
+            .pipe(finalize(() => {
+            this.isLoading.set(false);
+            this.isLoadingChanged.emit(false);
+        }))
+            .subscribe({
+            next: res => {
+                this.ticketBalances.set(res?.ResponseData ?? []);
+            },
+            error: (error) => {
+                this.errorOccurred.emit(error.error.ResponseData.Errors[0].Message);
+                this.ticketBalances.set([]);
+            },
+        });
+    }
+    ticketItems = computed(() => {
+        if ((!this.isPayslipAvailable() || this.isLoading()) && !this.ticketBalances()?.length) {
+            return [
+                {
+                    label: this.tickets(),
+                    value: '-',
+                    showTickets: false,
+                },
+            ];
+        }
+        return (this.ticketBalances() ?? []).map(ticketBalance => ({
+            label: this.displayLabel(ticketBalance.AgeGroupName || ticketBalance.AgeGroup),
+            value: this.displayNumber(ticketBalance.TicketBalance),
+            showTickets: this.showTicketsLabel(ticketBalance.TicketBalance),
+        }));
+    }, ...(ngDevMode ? [{ debugName: "ticketItems" }] : /* istanbul ignore next */ []));
+    display(value) {
+        if (this.isLoading() || !this.isPayslipAvailable() || value == null) {
+            return '-';
+        }
+        return `${value}`;
+    }
+    displayLabel(value) {
+        if (this.isLoading() || !this.isPayslipAvailable() || value == null) {
+            return '-';
+        }
+        return `${value}`;
+    }
+    displayNumber(value) {
+        if (this.isLoading() || !this.isPayslipAvailable() || value == null) {
+            return '-';
+        }
+        return Number(value).toFixed(2);
+    }
+    showTicketsLabel(value) {
+        return !this.isLoading() && this.isPayslipAvailable() && value != null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: MyPayslipTicketBalanceWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: MyPayslipTicketBalanceWidgetComponent, isStandalone: true, selector: "payroll-my-payslip-ticket-balance-widget", inputs: { ticketIcon: { classPropertyName: "ticketIcon", publicName: "ticketIcon", isSignal: true, isRequired: false, transformFunction: null }, titleClass: { classPropertyName: "titleClass", publicName: "titleClass", isSignal: true, isRequired: false, transformFunction: null }, desktopContainerClass: { classPropertyName: "desktopContainerClass", publicName: "desktopContainerClass", isSignal: true, isRequired: false, transformFunction: null }, mobileCardClass: { classPropertyName: "mobileCardClass", publicName: "mobileCardClass", isSignal: true, isRequired: false, transformFunction: null }, mobileContainerClass: { classPropertyName: "mobileContainerClass", publicName: "mobileContainerClass", isSignal: true, isRequired: false, transformFunction: null }, iconClass: { classPropertyName: "iconClass", publicName: "iconClass", isSignal: true, isRequired: false, transformFunction: null }, rowClass: { classPropertyName: "rowClass", publicName: "rowClass", isSignal: true, isRequired: false, transformFunction: null }, labelClass: { classPropertyName: "labelClass", publicName: "labelClass", isSignal: true, isRequired: false, transformFunction: null }, valueClass: { classPropertyName: "valueClass", publicName: "valueClass", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, tickets: { classPropertyName: "tickets", publicName: "tickets", isSignal: true, isRequired: false, transformFunction: null }, baseUrl: { classPropertyName: "baseUrl", publicName: "baseUrl", isSignal: true, isRequired: false, transformFunction: null }, payMonth: { classPropertyName: "payMonth", publicName: "payMonth", isSignal: true, isRequired: false, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null }, isPayslipAvailable: { classPropertyName: "isPayslipAvailable", publicName: "isPayslipAvailable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isLoadingChanged: "isLoadingChanged", errorOccurred: "errorOccurred" }, ngImport: i0, template: "<ng-template #ticketTitleTemplate>\n  <div [class]=\"titleClass()\">{{ title() | PayrollTranslate }}</div>\n</ng-template>\n\n<ng-template #ticketRowsTemplate>\n  @for (item of ticketItems(); track $index) {\n    <div [class]=\"rowClass()\">\n      <fa-icon [icon]=\"ticketIcon()\" [class]=\"iconClass()\"></fa-icon>\n      <div class=\"flex-grow-1\">\n        <span [class]=\"labelClass()\">{{ item.label | PayrollTranslate }}:</span>\n        <span [class]=\"valueClass()\">\n          {{ item.value }}\n        </span>\n      </div>\n    </div>\n  }\n</ng-template>\n\n@if (!isMobile()) {\n  <div [class]=\"desktopContainerClass()\">\n    <ng-container *ngTemplateOutlet=\"ticketTitleTemplate\" />\n    <ng-container *ngTemplateOutlet=\"ticketRowsTemplate\" />\n  </div>\n} @else {\n  <div [class]=\"mobileContainerClass()\">\n    <div [class]=\"mobileCardClass()\">\n      <ng-container *ngTemplateOutlet=\"ticketTitleTemplate\" />\n      <ng-container *ngTemplateOutlet=\"ticketRowsTemplate\" />\n    </div>\n  </div>\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }, { kind: "pipe", type: PayrollTranslatePipe, name: "PayrollTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: MyPayslipTicketBalanceWidgetComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'payroll-my-payslip-ticket-balance-widget', standalone: true, imports: [CommonModule, FaIconComponent, PayrollTranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #ticketTitleTemplate>\n  <div [class]=\"titleClass()\">{{ title() | PayrollTranslate }}</div>\n</ng-template>\n\n<ng-template #ticketRowsTemplate>\n  @for (item of ticketItems(); track $index) {\n    <div [class]=\"rowClass()\">\n      <fa-icon [icon]=\"ticketIcon()\" [class]=\"iconClass()\"></fa-icon>\n      <div class=\"flex-grow-1\">\n        <span [class]=\"labelClass()\">{{ item.label | PayrollTranslate }}:</span>\n        <span [class]=\"valueClass()\">\n          {{ item.value }}\n        </span>\n      </div>\n    </div>\n  }\n</ng-template>\n\n@if (!isMobile()) {\n  <div [class]=\"desktopContainerClass()\">\n    <ng-container *ngTemplateOutlet=\"ticketTitleTemplate\" />\n    <ng-container *ngTemplateOutlet=\"ticketRowsTemplate\" />\n  </div>\n} @else {\n  <div [class]=\"mobileContainerClass()\">\n    <div [class]=\"mobileCardClass()\">\n      <ng-container *ngTemplateOutlet=\"ticketTitleTemplate\" />\n      <ng-container *ngTemplateOutlet=\"ticketRowsTemplate\" />\n    </div>\n  </div>\n}\n" }]
+        }], ctorParameters: () => [], propDecorators: { ticketIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "ticketIcon", required: false }] }], titleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleClass", required: false }] }], desktopContainerClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "desktopContainerClass", required: false }] }], mobileCardClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileCardClass", required: false }] }], mobileContainerClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileContainerClass", required: false }] }], iconClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconClass", required: false }] }], rowClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowClass", required: false }] }], labelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelClass", required: false }] }], valueClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueClass", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], tickets: [{ type: i0.Input, args: [{ isSignal: true, alias: "tickets", required: false }] }], baseUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "baseUrl", required: false }] }], payMonth: [{ type: i0.Input, args: [{ isSignal: true, alias: "payMonth", required: false }] }], isMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMobile", required: false }] }], isPayslipAvailable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isPayslipAvailable", required: false }] }], isLoadingChanged: [{ type: i0.Output, args: ["isLoadingChanged"] }], errorOccurred: [{ type: i0.Output, args: ["errorOccurred"] }] } });
+
+/*
+ * Public API Surface of payroll-ui
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MyLoansPopupWidgetComponent, MyPayslipBankInfoWidgetComponent, MyPayslipIndemnityWidgetComponent, MyPayslipJobInfoWidgetComponent, MyPayslipTicketBalanceWidgetComponent, MyPayslipVacationBalanceWidgetComponent, MyPayslipWidgetComponent, PayrollTranslatePipe, PayrollTranslateService };
+//# sourceMappingURL=osama_amireh-bayan-payroll-widgets-ui.mjs.map