@skysoftware-co/bayan-hr-widgets-ui 1.1.1 → 1.2.0

package/fesm2022/skysoftware-co-bayan-hr-widgets-ui.mjs

@@ -1,18 +1,20 @@
 import * as i0 from '@angular/core';
-import { Injectable, Pipe, EventEmitter, Input, Output, Component, inject, ViewChild } from '@angular/core';
+import { Injectable, EventEmitter, Input, Output, Component, inject, ViewChild } from '@angular/core';
 import * as i1$1 from 'devextreme-angular';
 import { DxTooltipModule, DxPopupModule, DxScrollViewModule, DxLoadPanelModule, DxCalendarModule, DxDataGridModule, DxTextBoxModule, DxDataGridComponent } from 'devextreme-angular';
-import * as i2$2 from '@angular/common';
+import * as i2$3 from '@angular/common';
 import { NgClass, DecimalPipe, DatePipe, LowerCasePipe, CommonModule } from '@angular/common';
-import * as i2 from '@fortawesome/angular-fontawesome';
+import * as i2$1 from '@fortawesome/angular-fontawesome';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { BayanEmployeeBadgeComponent } from '@skysoftware-co/bayan-components-ui';
-import { SkyShortcutIconComponent, SkySectionDividerComponent, SkyEmptyDesignCardComponent, SkyWidgetSectionItemComponent } from '@skysoftware-co/sky-components-ui';
+import * as i2 from '@skysoftware-co/sky-components-ui';
+import { SkyShortcutIconComponent, TranslatePipe, SkySectionDividerComponent, SkyEmptyDesignCardComponent, HighlightPipe, SkyWidgetSectionItemComponent } from '@skysoftware-co/sky-components-ui';
 import * as i1 from '@angular/common/http';
 import { HttpParams } from '@angular/common/http';
 import { map, shareReplay, catchError, throwError, lastValueFrom, forkJoin } from 'rxjs';
 import { faCakeCandles, faTreePalm, faCalendarStar, faMoneyCheckDollarPen, faMemoCircleInfo, faPhone, faBolt, faLanguage, faEarthAfrica, faHouse, faFileSignature, faSackDollar, faEnvelopeOpenDollar, faXmark, faFolderArrowDown, faUsersRays, faFileCertificate, faUsersLine, faIslandTropical, faTicketsAirline, faNotesMedical, faGrid2Plus, faFileLines } from '@fortawesome/pro-light-svg-icons';
-import * as i2$1 from 'devextreme-angular/core';
+import * as i2$2 from 'devextreme-angular/core';
+import * as i1$2 from '@ngx-translate/core';
 import { faCircle, faCalendarDays, faEye } from '@fortawesome/pro-regular-svg-icons';
 import moment from 'moment';
 import { faPlaneDeparture, faPlaneArrival } from '@fortawesome/pro-solid-svg-icons';
@@ -70,1026 +72,6 @@ var VacationPopupType;
     VacationPopupType[VacationPopupType["ExpectedToReturn"] = 2] = "ExpectedToReturn";
 })(VacationPopupType || (VacationPopupType = {}));
 
-var ReportingTo$2 = "Reporting to";
-var NotAnknown$2 = "N\\A";
-var ServiceYears$2 = "Service years";
-var More$2 = "More";
-var day$2 = "day";
-var days$2 = "days";
-var Years$2 = "Years";
-var Months$2 = "Months";
-var UpcomingEvents$2 = "Upcoming events";
-var Birthday$2 = "Birthday";
-var PublicHoliday$2 = "Public holiday";
-var During$2 = "during";
-var isIn$2 = "is in";
-var is$2 = "is";
-var In$2 = "in";
-var NoEvents$2 = "There are no events";
-var All$2 = "All";
-var ViewAll$2 = "View all";
-var WeekendDayNotDefined$2 = "Weekend day is not defined.";
-var Today$2 = "Today";
-var Tomorrow$2 = "Tomorrow";
-var TwoDays$2 = "2 days";
-var ThisWeek$2 = "This week";
-var NextWeek$2 = "Next week";
-var Profile$2 = "Profile";
-var PaySlip$2 = "Payslip";
-var Attendance$2 = "Attendance";
-var VacationStatement$2 = "Vacation statement";
-var Calendar$2 = "Calendar";
-var DayOff$2 = "Day off";
-var Events$2 = "Events";
-var ScheduledVacations$2 = "Scheduled vacations";
-var BankInformation$2 = "Bank information";
-var MainBank$2 = "Main bank";
-var Bank$2 = "Bank";
-var Branch$2 = "Branch";
-var IBAN$2 = "IBAN";
-var AccountNumber$2 = "Account number";
-var Beneficiary$2 = "Beneficiary";
-var TransferAmount$2 = "Transfer amount";
-var ThereIsNoBankYet$2 = "There is no bank yet";
-var IsLoading$2 = "is loading...";
-var ThereIsNoMainYet$2 = "There are no main details yet";
-var ThereIsNoContactYet$2 = "There are no contact details yet";
-var ThereIsNoAddressYet$2 = "There is no address yet";
-var ThereIsNoLanguagesYet$2 = "There are no languages yet";
-var UserInfoIsLoading$2 = "User information is loading...";
-var ThereIsNoOtherNationalitiesYet$2 = "There are no other nationalities yet";
-var main$2 = "Main";
-var contact$2 = "Contact";
-var address$2 = "Address";
-var languages$2 = "Languages";
-var otherNationalities$2 = "Other Nationalities";
-var Name$2 = "Name";
-var Nationality$2 = "Nationality";
-var NationalNumber$2 = "National number";
-var SocialSecurityNumber$2 = "Social security number";
-var MaritalStatus$2 = "Marital status";
-var BirthDate$2 = "Birth date";
-var BirthPlace$2 = "Birth place";
-var BloodType$2 = "Blood type";
-var Religion$2 = "Religion";
-var MinistryOfLaborNumber$2 = "Ministry of labor number";
-var MobileNumber$2 = "Mobile number";
-var HomePhone$2 = "Home phone";
-var EmergencyContact$2 = "Emergency contact";
-var BusinessEmail$2 = "Business email";
-var Email$2 = "Email";
-var Address$2 = "Address";
-var City$2 = "City";
-var PostalCode$2 = "Postal code";
-var Phone$2 = "Phone";
-var Relation$2 = "Relation";
-var jobMain$1 = "Job information";
-var jobContract$1 = "Contract";
-var jobSalary$1 = "Salary";
-var jobServiceCharge$1 = "Service charge";
-var AdminUnit$2 = "Admin unit";
-var Position$2 = "Position";
-var Grade$2 = "Grade";
-var JoiningDate$2 = "Joining date";
-var CorporateJoiningDate$2 = "Corporate joining date";
-var Sponsor$2 = "Sponsor";
-var ContractType$2 = "Contract type";
-var ContractStartDate$2 = "Contract start date";
-var ContractEndDate$2 = "Contract end date";
-var ContractMaritalStatus$2 = "Contract marital status";
-var ContractDependentsCount$2 = "Contract dependents count";
-var BasicSalary$2 = "Basic salary";
-var GrossSalary$2 = "Gross salary";
-var Points$2 = "Points";
-var SalaryRatio$2 = "Salary ratio";
-var FixedAmount$2 = "Fixed amount";
-var FixedRate$2 = "Fixed rate";
-var ServiceCharge$2 = "Service charge";
-var ThereIsNoJobMainYet$2 = "There is no job information yet";
-var ThereIsNoJobContractYet$2 = "There is no contract information yet";
-var ThereIsNoJobSalaryYet$2 = "There is no salary information yet";
-var ThereIsNoJobServiceChargeYet$2 = "There is no service charge information yet";
-var NextWeekVacationInsights$2 = "Next week vacation insights";
-var UpcomingVacations$2 = "Upcoming vacations";
-var ExpectedToReturn$2 = "Expected to return";
-var Employee$2 = "Employee";
-var StartDate$2 = "Start date";
-var EndDate$2 = "End date";
-var ReturnDate$2 = "Return date";
-var JobInformation$2 = "Job information";
-var Degrees$2 = "Degrees";
-var degrees$2 = "Degrees";
-var experiences$2 = "Experiences";
-var Country$2 = "Country";
-var Specialty$2 = "Specialty";
-var Institute$2 = "Institute";
-var Period$2 = "Period";
-var Employer$2 = "Employer";
-var TerminationReason$2 = "Termination reason";
-var ThereIsNoDegreesYet$2 = "There are no degrees yet";
-var ThereIsNoExperiencesYet$2 = "There are no experiences yet";
-var ThereIsNoDependentsYet$2 = "There are no dependents yet";
-var DependentTypeName$2 = "Dependent type";
-var Vacations$2 = "Vacations";
-var Indemnity$2 = "Indemnity";
-var MedicalInsurance$2 = "Medical insurance";
-var Tickets$2 = "Tickets";
-var Others$2 = "Others";
-var Type$2 = "Type";
-var Entitlement$2 = "Entitlement";
-var IndemnityEligibility$2 = "Indemnity eligibility";
-var OvertimeEligibility$2 = "Overtime eligibility";
-var SocialSecurityEligibility$2 = "Social security eligibility";
-var Class$2 = "Class";
-var Sector$2 = "Sector";
-var Me$2 = "Me";
-var Eligible$2 = "Eligible";
-var NotEligible$2 = "Not eligible";
-var Member$2 = "Member";
-var NotMember$2 = "Not member";
-var NotCoveredByMedicalInsurance$2 = "Not covered by medical insurance";
-var NoTicketEntitlement$2 = "No ticket entitlement";
-var CoverageDate$2 = "Coverage date";
-var TotalEmployeeShare$2 = "Total employee share";
-var TotalEmployerShare$2 = "Total employer share";
-var Dependents$2 = "Dependents";
-var NotEntitled$2 = "Not entitled";
-var ThereAreNoDependentsYet$2 = "There are no dependents yet";
-var ThereAreNoPersonalDocumentsYet$1 = "There are no personal documents yet";
-var ThereAreNoDependentsDocumentsYet$2 = "There are no dependents documents yet";
-var DependentsDocuments$2 = "Dependents Documents";
-var IssueDate$2 = "Issue Date";
-var ExpiryDate$2 = "Expiry Date";
-var DocumentNumber$2 = "Document Number";
-var EmployeeDocuments$2 = "Employee Documents";
-var ThereAreNoEmployeeDocumentsYet$2 = "There are no employee documents yet";
-var en = {
-	ReportingTo: ReportingTo$2,
-	NotAnknown: NotAnknown$2,
-	ServiceYears: ServiceYears$2,
-	More: More$2,
-	day: day$2,
-	days: days$2,
-	Years: Years$2,
-	Months: Months$2,
-	UpcomingEvents: UpcomingEvents$2,
-	Birthday: Birthday$2,
-	PublicHoliday: PublicHoliday$2,
-	During: During$2,
-	isIn: isIn$2,
-	is: is$2,
-	In: In$2,
-	NoEvents: NoEvents$2,
-	All: All$2,
-	ViewAll: ViewAll$2,
-	WeekendDayNotDefined: WeekendDayNotDefined$2,
-	Today: Today$2,
-	Tomorrow: Tomorrow$2,
-	TwoDays: TwoDays$2,
-	ThisWeek: ThisWeek$2,
-	NextWeek: NextWeek$2,
-	Profile: Profile$2,
-	PaySlip: PaySlip$2,
-	Attendance: Attendance$2,
-	VacationStatement: VacationStatement$2,
-	Calendar: Calendar$2,
-	DayOff: DayOff$2,
-	Events: Events$2,
-	ScheduledVacations: ScheduledVacations$2,
-	BankInformation: BankInformation$2,
-	MainBank: MainBank$2,
-	Bank: Bank$2,
-	Branch: Branch$2,
-	IBAN: IBAN$2,
-	AccountNumber: AccountNumber$2,
-	Beneficiary: Beneficiary$2,
-	TransferAmount: TransferAmount$2,
-	ThereIsNoBankYet: ThereIsNoBankYet$2,
-	IsLoading: IsLoading$2,
-	ThereIsNoMainYet: ThereIsNoMainYet$2,
-	ThereIsNoContactYet: ThereIsNoContactYet$2,
-	ThereIsNoAddressYet: ThereIsNoAddressYet$2,
-	ThereIsNoLanguagesYet: ThereIsNoLanguagesYet$2,
-	UserInfoIsLoading: UserInfoIsLoading$2,
-	ThereIsNoOtherNationalitiesYet: ThereIsNoOtherNationalitiesYet$2,
-	main: main$2,
-	contact: contact$2,
-	address: address$2,
-	languages: languages$2,
-	otherNationalities: otherNationalities$2,
-	Name: Name$2,
-	Nationality: Nationality$2,
-	NationalNumber: NationalNumber$2,
-	SocialSecurityNumber: SocialSecurityNumber$2,
-	MaritalStatus: MaritalStatus$2,
-	BirthDate: BirthDate$2,
-	BirthPlace: BirthPlace$2,
-	BloodType: BloodType$2,
-	Religion: Religion$2,
-	MinistryOfLaborNumber: MinistryOfLaborNumber$2,
-	MobileNumber: MobileNumber$2,
-	HomePhone: HomePhone$2,
-	EmergencyContact: EmergencyContact$2,
-	BusinessEmail: BusinessEmail$2,
-	Email: Email$2,
-	Address: Address$2,
-	City: City$2,
-	"P.OBox": "P.O. box",
-	PostalCode: PostalCode$2,
-	Phone: Phone$2,
-	Relation: Relation$2,
-	jobMain: jobMain$1,
-	jobContract: jobContract$1,
-	jobSalary: jobSalary$1,
-	jobServiceCharge: jobServiceCharge$1,
-	AdminUnit: AdminUnit$2,
-	Position: Position$2,
-	Grade: Grade$2,
-	JoiningDate: JoiningDate$2,
-	CorporateJoiningDate: CorporateJoiningDate$2,
-	Sponsor: Sponsor$2,
-	ContractType: ContractType$2,
-	ContractStartDate: ContractStartDate$2,
-	ContractEndDate: ContractEndDate$2,
-	ContractMaritalStatus: ContractMaritalStatus$2,
-	ContractDependentsCount: ContractDependentsCount$2,
-	BasicSalary: BasicSalary$2,
-	GrossSalary: GrossSalary$2,
-	Points: Points$2,
-	SalaryRatio: SalaryRatio$2,
-	FixedAmount: FixedAmount$2,
-	FixedRate: FixedRate$2,
-	ServiceCharge: ServiceCharge$2,
-	ThereIsNoJobMainYet: ThereIsNoJobMainYet$2,
-	ThereIsNoJobContractYet: ThereIsNoJobContractYet$2,
-	ThereIsNoJobSalaryYet: ThereIsNoJobSalaryYet$2,
-	ThereIsNoJobServiceChargeYet: ThereIsNoJobServiceChargeYet$2,
-	NextWeekVacationInsights: NextWeekVacationInsights$2,
-	UpcomingVacations: UpcomingVacations$2,
-	ExpectedToReturn: ExpectedToReturn$2,
-	Employee: Employee$2,
-	StartDate: StartDate$2,
-	EndDate: EndDate$2,
-	ReturnDate: ReturnDate$2,
-	"Search...": "Search...",
-	JobInformation: JobInformation$2,
-	Degrees: Degrees$2,
-	degrees: degrees$2,
-	experiences: experiences$2,
-	"Degree/Year": "Degree / Year",
-	Country: Country$2,
-	Specialty: Specialty$2,
-	Institute: Institute$2,
-	Period: Period$2,
-	Employer: Employer$2,
-	TerminationReason: TerminationReason$2,
-	ThereIsNoDegreesYet: ThereIsNoDegreesYet$2,
-	ThereIsNoExperiencesYet: ThereIsNoExperiencesYet$2,
-	ThereIsNoDependentsYet: ThereIsNoDependentsYet$2,
-	DependentTypeName: DependentTypeName$2,
-	Vacations: Vacations$2,
-	Indemnity: Indemnity$2,
-	MedicalInsurance: MedicalInsurance$2,
-	Tickets: Tickets$2,
-	Others: Others$2,
-	Type: Type$2,
-	Entitlement: Entitlement$2,
-	IndemnityEligibility: IndemnityEligibility$2,
-	OvertimeEligibility: OvertimeEligibility$2,
-	SocialSecurityEligibility: SocialSecurityEligibility$2,
-	Class: Class$2,
-	Sector: Sector$2,
-	Me: Me$2,
-	Eligible: Eligible$2,
-	NotEligible: NotEligible$2,
-	Member: Member$2,
-	NotMember: NotMember$2,
-	"There'sNoInformationInThisSectionYet": "There's no information in this section yet",
-	NotCoveredByMedicalInsurance: NotCoveredByMedicalInsurance$2,
-	NoTicketEntitlement: NoTicketEntitlement$2,
-	"Number": "Number",
-	CoverageDate: CoverageDate$2,
-	TotalEmployeeShare: TotalEmployeeShare$2,
-	TotalEmployerShare: TotalEmployerShare$2,
-	Dependents: Dependents$2,
-	NotEntitled: NotEntitled$2,
-	"TicketEvery{{value}}Months": "Ticket every {{value}} months",
-	"TicketEvery{{value}}Month": "Ticket every {{value}} month",
-	ThereAreNoDependentsYet: ThereAreNoDependentsYet$2,
-	ThereAreNoPersonalDocumentsYet: ThereAreNoPersonalDocumentsYet$1,
-	ThereAreNoDependentsDocumentsYet: ThereAreNoDependentsDocumentsYet$2,
-	DependentsDocuments: DependentsDocuments$2,
-	IssueDate: IssueDate$2,
-	ExpiryDate: ExpiryDate$2,
-	DocumentNumber: DocumentNumber$2,
-	EmployeeDocuments: EmployeeDocuments$2,
-	ThereAreNoEmployeeDocumentsYet: ThereAreNoEmployeeDocumentsYet$2
-};
-
-var ReportingTo$1 = "مفوض الى";
-var NotAnknown$1 = "غير معرف";
-var ServiceYears$1 = "سنوات الخدمة";
-var More$1 = "المزيد";
-var day$1 = "يوم";
-var days$1 = "أيام";
-var Years$1 = "سنوات";
-var Months$1 = "اشهر";
-var UpcomingEvents$1 = "الأحداث القادمة";
-var Birthday$1 = "عيد ميلاد";
-var PublicHoliday$1 = "اجازة عامة";
-var During$1 = "خلال";
-var isIn$1 = "هو في";
-var is$1 = "يكون";
-var In$1 = "في";
-var NoEvents$1 = "لا توجد أحداث";
-var All$1 = "الكل";
-var ViewAll$1 = "عرض الكل";
-var WeekendDayNotDefined$1 = "يوم عطلة نهاية الأسبوع غير محدد";
-var Today$1 = "اليوم";
-var Tomorrow$1 = "غداً";
-var TwoDays$1 = "يومين";
-var ThisWeek$1 = "هذا الأسبوع";
-var NextWeek$1 = "الأسبوع القادم";
-var Profile$1 = "الملف الشخصي";
-var PaySlip$1 = "كشف الراتب";
-var Attendance$1 = "الحضور";
-var VacationStatement$1 = "كشف الإجازة";
-var Calendar$1 = "التقويم";
-var DayOff$1 = "يوم اجازة";
-var Events$1 = "حدث";
-var ScheduledVacations$1 = "الإجازات المجدولة";
-var BankInformation$1 = "معلومات البنك";
-var MainBank$1 = "البنك الرئيسي";
-var Bank$1 = "البنك";
-var Branch$1 = "الفرع";
-var IBAN$1 = "IBAN";
-var AccountNumber$1 = "رقم الحساب";
-var Beneficiary$1 = "المستفيد";
-var TransferAmount$1 = "مبلغ التحويل";
-var ThereIsNoBankYet$1 = "لا يوجد بنك بعد";
-var IsLoading$1 = "قيد التحميل...";
-var ThereIsNoMainYet$1 = "لا توجد بيانات رئيسية بعد";
-var ThereIsNoContactYet$1 = "لا توجد بيانات اتصال بعد";
-var ThereIsNoAddressYet$1 = "لا يوجد عنوان بعد";
-var ThereIsNoLanguagesYet$1 = "لا توجد لغات بعد";
-var UserInfoIsLoading$1 = "جاري تحميل معلومات المستخدم...";
-var ThereIsNoOtherNationalitiesYet$1 = "لا توجد جنسيات أخرى بعد";
-var main$1 = "البيانات الرئيسية";
-var contact$1 = "بيانات الاتصال";
-var address$1 = "العنوان";
-var languages$1 = "اللغات";
-var otherNationalities$1 = "جنسيات أخرى";
-var Name$1 = "الاسم";
-var Nationality$1 = "الجنسية";
-var NationalNumber$1 = "الرقم الوطني";
-var SocialSecurityNumber$1 = "رقم الضمان الاجتماعي";
-var MaritalStatus$1 = "الحالة الاجتماعية";
-var BirthDate$1 = "تاريخ الميلاد";
-var BirthPlace$1 = "مكان الميلاد";
-var BloodType$1 = "فصيلة الدم";
-var Religion$1 = "الديانة";
-var MinistryOfLaborNumber$1 = "رقم وزارة العمل";
-var MobileNumber$1 = "رقم الجوال";
-var HomePhone$1 = "هاتف المنزل";
-var EmergencyContact$1 = "جهة اتصال للطوارئ";
-var BusinessEmail$1 = "البريد الإلكتروني للعمل";
-var Email$1 = "البريد الإلكتروني";
-var Address$1 = "العنوان";
-var City$1 = "المدينة";
-var PostalCode$1 = "الرمز البريدي";
-var Phone$1 = "الهاتف";
-var Relation$1 = "العلاقة";
-var Main = "المعلومات الوظيفية";
-var Contract = "العقد";
-var Salary = "الراتب";
-var AdminUnit$1 = "الوحدة الإدارية";
-var Position$1 = "المنصب";
-var Grade$1 = "الدرجة";
-var JoiningDate$1 = "تاريخ الالتحاق";
-var CorporateJoiningDate$1 = "تاريخ الالتحاق بالشركة";
-var Sponsor$1 = "الكفيل";
-var ContractType$1 = "نوع العقد";
-var ContractStartDate$1 = "تاريخ بداية العقد";
-var ContractEndDate$1 = "تاريخ نهاية العقد";
-var ContractMaritalStatus$1 = "الحالة الاجتماعية في العقد";
-var ContractDependentsCount$1 = "عدد المعالون في العقد";
-var BasicSalary$1 = "الراتب الأساسي";
-var GrossSalary$1 = "إجمالي الراتب";
-var Points$1 = "نقاط";
-var SalaryRatio$1 = "نسبة من الراتب";
-var FixedAmount$1 = "مبلغ ثابت";
-var FixedRate$1 = "نسبة ثابتة";
-var ServiceCharge$1 = "مستحقات نهاية الخدمة";
-var ThereIsNoJobMainYet$1 = "لا توجد معلومات وظيفية بعد";
-var ThereIsNoJobContractYet$1 = "لا توجد معلومات عقد بعد";
-var ThereIsNoJobSalaryYet$1 = "لا توجد معلومات راتب بعد";
-var ThereIsNoJobServiceChargeYet$1 = "لا توجد معلومات مستحقات نهاية الخدمة بعد";
-var NextWeekVacationInsights$1 = "ملخص إجازات الأسبوع القادم";
-var UpcomingVacations$1 = "الإجازات القادمة";
-var ExpectedToReturn$1 = "المتوقع عودتهم";
-var Employee$1 = "الموظف";
-var StartDate$1 = "تاريخ البداية";
-var EndDate$1 = "تاريخ النهاية";
-var ReturnDate$1 = "تاريخ العودة";
-var JobInformation$1 = "معلومات الوظيفة";
-var Degrees$1 = "المؤهلات العلمية";
-var degrees$1 = "المؤهلات العلمية";
-var experiences$1 = "الخبرات";
-var Country$1 = "الدولة";
-var Specialty$1 = "التخصص";
-var Institute$1 = "المعهد";
-var Period$1 = "الفترة";
-var Employer$1 = "جهة العمل";
-var TerminationReason$1 = "سبب إنهاء الخدمة";
-var ThereIsNoDegreesYet$1 = "لا توجد مؤهلات علمية بعد";
-var ThereIsNoExperiencesYet$1 = "لا توجد خبرات بعد";
-var ThereIsNoDependentsYet$1 = "لا يوجد معالون حتى الآن";
-var DependentTypeName$1 = "نوع المعال";
-var Vacations$1 = "الاجازات";
-var Indemnity$1 = "التعويض";
-var MedicalInsurance$1 = "التأمين الطبي";
-var Tickets$1 = "تذاكر";
-var Others$1 = "آخرين";
-var Type$1 = "النوع";
-var Entitlement$1 = "الاستحقاق";
-var IndemnityEligibility$1 = "أهلية التعويض";
-var OvertimeEligibility$1 = "أهلية العمل الإضافي";
-var SocialSecurityEligibility$1 = "أهلية الضمان الاجتماعي";
-var Class$1 = "الفئة";
-var Sector$1 = "القطاع";
-var Me$1 = "أنا";
-var Eligible$1 = "مؤهل";
-var NotEligible$1 = "غير مؤهل";
-var Member$1 = "عضو";
-var NotMember$1 = "ليس عضوًا";
-var NotCoveredByMedicalInsurance$1 = "غير مشمول بالتأمين الطبي";
-var NoTicketEntitlement$1 = "لا يوجد استحقاق تذكرة";
-var CoverageDate$1 = "تاريخ التغطية";
-var TotalEmployeeShare$1 = "إجمالي حصة الموظف";
-var TotalEmployerShare$1 = "إجمالي حصة صاحب العمل";
-var Dependents$1 = "المعالون";
-var NotEntitled$1 = "غير مستحق";
-var ThereAreNoDependentsYet$1 = "لا يوجد معالون حتى الآن";
-var ThereIsNoPersonalDocumentsYet = "لا توجد وثائق شخصية بعد";
-var ThereIsNoDependentsDocumentsYet = "لا توجد وثائق للمعالون بعد";
-var DependentsDocuments$1 = "وثائق المعالون";
-var ThereAreNoDependentsDocumentsYet$1 = "لا توجد وثائق للمعالون بعد";
-var IssueDate$1 = "تاريخ الإصدار";
-var ExpiryDate$1 = "تاريخ انتهاء الصلاحية";
-var DocumentNumber$1 = "رقم الوثيقة";
-var EmployeeDocuments$1 = "وثائق الموظف";
-var ThereAreNoEmployeeDocumentsYet$1 = "لا توجد وثائق للموظف بعد";
-var ar = {
-	ReportingTo: ReportingTo$1,
-	NotAnknown: NotAnknown$1,
-	ServiceYears: ServiceYears$1,
-	More: More$1,
-	day: day$1,
-	days: days$1,
-	Years: Years$1,
-	Months: Months$1,
-	UpcomingEvents: UpcomingEvents$1,
-	Birthday: Birthday$1,
-	PublicHoliday: PublicHoliday$1,
-	During: During$1,
-	isIn: isIn$1,
-	is: is$1,
-	In: In$1,
-	NoEvents: NoEvents$1,
-	All: All$1,
-	ViewAll: ViewAll$1,
-	WeekendDayNotDefined: WeekendDayNotDefined$1,
-	Today: Today$1,
-	Tomorrow: Tomorrow$1,
-	TwoDays: TwoDays$1,
-	ThisWeek: ThisWeek$1,
-	NextWeek: NextWeek$1,
-	Profile: Profile$1,
-	PaySlip: PaySlip$1,
-	Attendance: Attendance$1,
-	VacationStatement: VacationStatement$1,
-	Calendar: Calendar$1,
-	DayOff: DayOff$1,
-	Events: Events$1,
-	ScheduledVacations: ScheduledVacations$1,
-	BankInformation: BankInformation$1,
-	MainBank: MainBank$1,
-	Bank: Bank$1,
-	Branch: Branch$1,
-	IBAN: IBAN$1,
-	AccountNumber: AccountNumber$1,
-	Beneficiary: Beneficiary$1,
-	TransferAmount: TransferAmount$1,
-	ThereIsNoBankYet: ThereIsNoBankYet$1,
-	IsLoading: IsLoading$1,
-	ThereIsNoMainYet: ThereIsNoMainYet$1,
-	ThereIsNoContactYet: ThereIsNoContactYet$1,
-	ThereIsNoAddressYet: ThereIsNoAddressYet$1,
-	ThereIsNoLanguagesYet: ThereIsNoLanguagesYet$1,
-	UserInfoIsLoading: UserInfoIsLoading$1,
-	ThereIsNoOtherNationalitiesYet: ThereIsNoOtherNationalitiesYet$1,
-	main: main$1,
-	contact: contact$1,
-	address: address$1,
-	languages: languages$1,
-	otherNationalities: otherNationalities$1,
-	Name: Name$1,
-	Nationality: Nationality$1,
-	NationalNumber: NationalNumber$1,
-	SocialSecurityNumber: SocialSecurityNumber$1,
-	MaritalStatus: MaritalStatus$1,
-	BirthDate: BirthDate$1,
-	BirthPlace: BirthPlace$1,
-	BloodType: BloodType$1,
-	Religion: Religion$1,
-	MinistryOfLaborNumber: MinistryOfLaborNumber$1,
-	MobileNumber: MobileNumber$1,
-	HomePhone: HomePhone$1,
-	EmergencyContact: EmergencyContact$1,
-	BusinessEmail: BusinessEmail$1,
-	Email: Email$1,
-	Address: Address$1,
-	City: City$1,
-	"P.OBox": "صندوق البريد",
-	PostalCode: PostalCode$1,
-	Phone: Phone$1,
-	Relation: Relation$1,
-	Main: Main,
-	Contract: Contract,
-	Salary: Salary,
-	AdminUnit: AdminUnit$1,
-	Position: Position$1,
-	Grade: Grade$1,
-	JoiningDate: JoiningDate$1,
-	CorporateJoiningDate: CorporateJoiningDate$1,
-	Sponsor: Sponsor$1,
-	ContractType: ContractType$1,
-	ContractStartDate: ContractStartDate$1,
-	ContractEndDate: ContractEndDate$1,
-	ContractMaritalStatus: ContractMaritalStatus$1,
-	ContractDependentsCount: ContractDependentsCount$1,
-	BasicSalary: BasicSalary$1,
-	GrossSalary: GrossSalary$1,
-	Points: Points$1,
-	SalaryRatio: SalaryRatio$1,
-	FixedAmount: FixedAmount$1,
-	FixedRate: FixedRate$1,
-	ServiceCharge: ServiceCharge$1,
-	ThereIsNoJobMainYet: ThereIsNoJobMainYet$1,
-	ThereIsNoJobContractYet: ThereIsNoJobContractYet$1,
-	ThereIsNoJobSalaryYet: ThereIsNoJobSalaryYet$1,
-	ThereIsNoJobServiceChargeYet: ThereIsNoJobServiceChargeYet$1,
-	NextWeekVacationInsights: NextWeekVacationInsights$1,
-	UpcomingVacations: UpcomingVacations$1,
-	ExpectedToReturn: ExpectedToReturn$1,
-	Employee: Employee$1,
-	StartDate: StartDate$1,
-	EndDate: EndDate$1,
-	ReturnDate: ReturnDate$1,
-	"Search...": "بحث...",
-	JobInformation: JobInformation$1,
-	Degrees: Degrees$1,
-	degrees: degrees$1,
-	experiences: experiences$1,
-	"Degree/Year": "الدرجة / السنة",
-	Country: Country$1,
-	Specialty: Specialty$1,
-	Institute: Institute$1,
-	Period: Period$1,
-	Employer: Employer$1,
-	TerminationReason: TerminationReason$1,
-	ThereIsNoDegreesYet: ThereIsNoDegreesYet$1,
-	ThereIsNoExperiencesYet: ThereIsNoExperiencesYet$1,
-	ThereIsNoDependentsYet: ThereIsNoDependentsYet$1,
-	DependentTypeName: DependentTypeName$1,
-	Vacations: Vacations$1,
-	Indemnity: Indemnity$1,
-	MedicalInsurance: MedicalInsurance$1,
-	Tickets: Tickets$1,
-	Others: Others$1,
-	Type: Type$1,
-	Entitlement: Entitlement$1,
-	IndemnityEligibility: IndemnityEligibility$1,
-	OvertimeEligibility: OvertimeEligibility$1,
-	SocialSecurityEligibility: SocialSecurityEligibility$1,
-	Class: Class$1,
-	Sector: Sector$1,
-	Me: Me$1,
-	Eligible: Eligible$1,
-	NotEligible: NotEligible$1,
-	Member: Member$1,
-	NotMember: NotMember$1,
-	"There'sNoInformationInThisSectionYet": "لا توجد معلومات في هذا القسم حتى الآن",
-	NotCoveredByMedicalInsurance: NotCoveredByMedicalInsurance$1,
-	NoTicketEntitlement: NoTicketEntitlement$1,
-	"Number": "العدد",
-	CoverageDate: CoverageDate$1,
-	TotalEmployeeShare: TotalEmployeeShare$1,
-	TotalEmployerShare: TotalEmployerShare$1,
-	Dependents: Dependents$1,
-	NotEntitled: NotEntitled$1,
-	"TicketEvery{{value}}Months": "تذكرة كل {{value}} شهر",
-	"TicketEvery{{value}}Month": "تذكرة كل {{value}} شهر",
-	ThereAreNoDependentsYet: ThereAreNoDependentsYet$1,
-	ThereIsNoPersonalDocumentsYet: ThereIsNoPersonalDocumentsYet,
-	ThereIsNoDependentsDocumentsYet: ThereIsNoDependentsDocumentsYet,
-	DependentsDocuments: DependentsDocuments$1,
-	ThereAreNoDependentsDocumentsYet: ThereAreNoDependentsDocumentsYet$1,
-	IssueDate: IssueDate$1,
-	ExpiryDate: ExpiryDate$1,
-	DocumentNumber: DocumentNumber$1,
-	EmployeeDocuments: EmployeeDocuments$1,
-	ThereAreNoEmployeeDocumentsYet: ThereAreNoEmployeeDocumentsYet$1
-};
-
-var ReportingTo = "Rapport à";
-var NotAnknown = "N/A";
-var ServiceYears = "Années de service";
-var More = "Plus";
-var day = "jour";
-var days = "Jours";
-var Years = "Années";
-var Months = "Mois";
-var UpcomingEvents = "Événements à venir";
-var Birthday = "Anniversaire";
-var PublicHoliday = "Jour férié";
-var During = "Pendant";
-var isIn = "Est dans";
-var is = "est";
-var In = "Dans";
-var NoEvents = "Il n'y a pas d'événements";
-var All = "Toute";
-var ViewAll = "Tout voir";
-var WeekendDayNotDefined = "Le jour de week-end n'est pas défini.";
-var Today = "Aujourd'hui";
-var Tomorrow = "Demain";
-var TwoDays = "Dans 2 jours";
-var ThisWeek = "Cette semaine";
-var NextWeek = "La semaine prochaine";
-var Profile = "Profil";
-var PaySlip = "Fiche de paie";
-var Attendance = "Présence";
-var VacationStatement = "Déclaration de vacances";
-var Calendar = "Calendrier";
-var DayOff = "Jour de congé";
-var Events = "Événements";
-var ScheduledVacations = "Vacances programmées";
-var BankInformation = "Informations bancaires";
-var MainBank = "Banque principale";
-var Bank = "Banque";
-var Branch = "Succursale";
-var IBAN = "IBAN";
-var AccountNumber = "Numéro de compte";
-var Beneficiary = "Bénéficiaire";
-var TransferAmount = "Montant du transfert";
-var ThereIsNoBankYet = "Il n'y a pas encore de banque";
-var IsLoading = "est en cours de chargement...";
-var ThereIsNoMainYet = "Il n'y a pas encore d'informations principales";
-var ThereIsNoContactYet = "Il n'y a pas encore de coordonnées";
-var ThereIsNoAddressYet = "Il n'y a pas encore d'adresse";
-var ThereIsNoLanguagesYet = "Il n'y a pas encore de langues";
-var UserInfoIsLoading = "Les informations de l'utilisateur sont en cours de chargement...";
-var ThereIsNoOtherNationalitiesYet = "Il n'y a pas encore d'autres nationalités";
-var main = "Principal";
-var contact = "Contact";
-var address = "Adresse";
-var languages = "Langues";
-var otherNationalities = "Autres nationalités";
-var Name = "Nom";
-var Nationality = "Nationalité";
-var NationalNumber = "Numéro national";
-var SocialSecurityNumber = "Numéro de sécurité sociale";
-var MaritalStatus = "État civil";
-var BirthDate = "Date de naissance";
-var BirthPlace = "Lieu de naissance";
-var BloodType = "Groupe sanguin";
-var Religion = "Religion";
-var MinistryOfLaborNumber = "Numéro du ministère du travail";
-var MobileNumber = "Numéro de mobile";
-var HomePhone = "Téléphone domicile";
-var EmergencyContact = "Contact d'urgence";
-var BusinessEmail = "E-mail professionnel";
-var Email = "E-mail";
-var Address = "Adresse";
-var City = "Ville";
-var PostalCode = "Code postal";
-var Phone = "Téléphone";
-var Relation = "Relation";
-var jobMain = "Informations professionnelles";
-var jobContract = "Contrat";
-var jobSalary = "Salaire";
-var jobServiceCharge = "Indemnité de fin de service";
-var AdminUnit = "Unité administrative";
-var Position = "Poste";
-var Grade = "Grade";
-var JoiningDate = "Date d'embauche";
-var CorporateJoiningDate = "Date d'embauche dans l'entreprise";
-var Sponsor = "Parrainer";
-var ContractType = "Type de contrat";
-var ContractStartDate = "Date de début du contrat";
-var ContractEndDate = "Date de fin du contrat";
-var ContractMaritalStatus = "État civil du contrat";
-var ContractDependentsCount = "Nombre de personnes à charge du contrat";
-var BasicSalary = "Salaire de base";
-var GrossSalary = "Salaire brut";
-var Points = "Points";
-var SalaryRatio = "Ratio du salaire";
-var FixedAmount = "Montant fixe";
-var FixedRate = "Taux fixe";
-var ServiceCharge = "Indemnité de fin de service";
-var ThereIsNoJobMainYet = "Il n'y a pas encore d'informations professionnelles";
-var ThereIsNoJobContractYet = "Il n'y a pas encore d'informations de contrat";
-var ThereIsNoJobSalaryYet = "Il n'y a pas encore d'informations salariales";
-var ThereIsNoJobServiceChargeYet = "Il n'y a pas encore d'informations d'indemnité de fin de service";
-var NextWeekVacationInsights = "Aperçu des vacances de la semaine prochaine";
-var UpcomingVacations = "Vacances à venir";
-var ExpectedToReturn = "Retour prévu";
-var Employee = "Employé";
-var StartDate = "Date de début";
-var EndDate = "Date de fin";
-var ReturnDate = "Date de retour";
-var JobInformation = "Informations sur l'emploi";
-var Degrees = "Diplomes";
-var degrees = "Diplomes";
-var experiences = "Experiences";
-var Country = "Pays";
-var Specialty = "Specialite";
-var Institute = "Institut";
-var Period = "Periode";
-var Employer = "Employeur";
-var TerminationReason = "Motif de fin de service";
-var ThereIsNoDegreesYet = "Il n'y a pas encore de diplomes";
-var ThereIsNoExperiencesYet = "Il n'y a pas encore d'experiences";
-var ThereIsNoDependentsYet = "Il n'y a pas encore de personnes à charge";
-var DependentTypeName = "Type de personne à charge";
-var Vacations = "Vacances";
-var Indemnity = "Indemnité";
-var MedicalInsurance = "Assurance médicale";
-var Tickets = "Billets";
-var Others = "Autres";
-var Type = "Type";
-var Entitlement = "Droit";
-var IndemnityEligibility = "Admissibilité à l'indemnisation";
-var OvertimeEligibility = "Admissibilité aux heures supplémentaires";
-var SocialSecurityEligibility = "Admissibilité à la sécurité sociale";
-var Class = "Classe";
-var Sector = "Secteur";
-var Me = "Moi";
-var Eligible = "Admissible";
-var NotEligible = "Non éligible";
-var Member = "Membre";
-var NotMember = "Non membre";
-var NotCoveredByMedicalInsurance = "Non couvert par l'assurance médicale";
-var NoTicketEntitlement = "Aucun droit au billet";
-var CoverageDate = "Date de couverture";
-var TotalEmployeeShare = "Part totale des employés";
-var TotalEmployerShare = "Part totale de l'employeur";
-var Dependents = "Personnes à charge";
-var NotEntitled = "Non éligible au droit";
-var ThereAreNoDependentsYet = "Il n'y a pas encore de personnes à charge";
-var ThereAreNoPersonalDocumentsYet = "Il n'y a pas encore de documents personnels";
-var ThereAreNoDependentsDocumentsYet = "Il n'y a pas encore de documents pour les personnes à charge";
-var DependentsDocuments = "Documents des personnes à charge";
-var IssueDate = "Date d'émission";
-var ExpiryDate = "Date d'expiration";
-var DocumentNumber = "Numéro de document";
-var EmployeeDocuments = "Documents de l'employé";
-var ThereAreNoEmployeeDocumentsYet = "Il n'y a pas encore de documents de l'employé";
-var fr = {
-	ReportingTo: ReportingTo,
-	NotAnknown: NotAnknown,
-	ServiceYears: ServiceYears,
-	More: More,
-	day: day,
-	days: days,
-	Years: Years,
-	Months: Months,
-	UpcomingEvents: UpcomingEvents,
-	Birthday: Birthday,
-	PublicHoliday: PublicHoliday,
-	During: During,
-	isIn: isIn,
-	is: is,
-	In: In,
-	NoEvents: NoEvents,
-	All: All,
-	ViewAll: ViewAll,
-	WeekendDayNotDefined: WeekendDayNotDefined,
-	Today: Today,
-	Tomorrow: Tomorrow,
-	TwoDays: TwoDays,
-	ThisWeek: ThisWeek,
-	NextWeek: NextWeek,
-	Profile: Profile,
-	PaySlip: PaySlip,
-	Attendance: Attendance,
-	VacationStatement: VacationStatement,
-	Calendar: Calendar,
-	DayOff: DayOff,
-	Events: Events,
-	ScheduledVacations: ScheduledVacations,
-	BankInformation: BankInformation,
-	MainBank: MainBank,
-	Bank: Bank,
-	Branch: Branch,
-	IBAN: IBAN,
-	AccountNumber: AccountNumber,
-	Beneficiary: Beneficiary,
-	TransferAmount: TransferAmount,
-	ThereIsNoBankYet: ThereIsNoBankYet,
-	IsLoading: IsLoading,
-	ThereIsNoMainYet: ThereIsNoMainYet,
-	ThereIsNoContactYet: ThereIsNoContactYet,
-	ThereIsNoAddressYet: ThereIsNoAddressYet,
-	ThereIsNoLanguagesYet: ThereIsNoLanguagesYet,
-	UserInfoIsLoading: UserInfoIsLoading,
-	ThereIsNoOtherNationalitiesYet: ThereIsNoOtherNationalitiesYet,
-	main: main,
-	contact: contact,
-	address: address,
-	languages: languages,
-	otherNationalities: otherNationalities,
-	Name: Name,
-	Nationality: Nationality,
-	NationalNumber: NationalNumber,
-	SocialSecurityNumber: SocialSecurityNumber,
-	MaritalStatus: MaritalStatus,
-	BirthDate: BirthDate,
-	BirthPlace: BirthPlace,
-	BloodType: BloodType,
-	Religion: Religion,
-	MinistryOfLaborNumber: MinistryOfLaborNumber,
-	MobileNumber: MobileNumber,
-	HomePhone: HomePhone,
-	EmergencyContact: EmergencyContact,
-	BusinessEmail: BusinessEmail,
-	Email: Email,
-	Address: Address,
-	City: City,
-	"P.OBox": "Boîte postale",
-	PostalCode: PostalCode,
-	Phone: Phone,
-	Relation: Relation,
-	jobMain: jobMain,
-	jobContract: jobContract,
-	jobSalary: jobSalary,
-	jobServiceCharge: jobServiceCharge,
-	AdminUnit: AdminUnit,
-	Position: Position,
-	Grade: Grade,
-	JoiningDate: JoiningDate,
-	CorporateJoiningDate: CorporateJoiningDate,
-	Sponsor: Sponsor,
-	ContractType: ContractType,
-	ContractStartDate: ContractStartDate,
-	ContractEndDate: ContractEndDate,
-	ContractMaritalStatus: ContractMaritalStatus,
-	ContractDependentsCount: ContractDependentsCount,
-	BasicSalary: BasicSalary,
-	GrossSalary: GrossSalary,
-	Points: Points,
-	SalaryRatio: SalaryRatio,
-	FixedAmount: FixedAmount,
-	FixedRate: FixedRate,
-	ServiceCharge: ServiceCharge,
-	ThereIsNoJobMainYet: ThereIsNoJobMainYet,
-	ThereIsNoJobContractYet: ThereIsNoJobContractYet,
-	ThereIsNoJobSalaryYet: ThereIsNoJobSalaryYet,
-	ThereIsNoJobServiceChargeYet: ThereIsNoJobServiceChargeYet,
-	NextWeekVacationInsights: NextWeekVacationInsights,
-	UpcomingVacations: UpcomingVacations,
-	ExpectedToReturn: ExpectedToReturn,
-	Employee: Employee,
-	StartDate: StartDate,
-	EndDate: EndDate,
-	ReturnDate: ReturnDate,
-	"Search...": "Rechercher...",
-	JobInformation: JobInformation,
-	Degrees: Degrees,
-	degrees: degrees,
-	experiences: experiences,
-	"Degree/Year": "Diplome / Annee",
-	Country: Country,
-	Specialty: Specialty,
-	Institute: Institute,
-	Period: Period,
-	Employer: Employer,
-	TerminationReason: TerminationReason,
-	ThereIsNoDegreesYet: ThereIsNoDegreesYet,
-	ThereIsNoExperiencesYet: ThereIsNoExperiencesYet,
-	ThereIsNoDependentsYet: ThereIsNoDependentsYet,
-	DependentTypeName: DependentTypeName,
-	Vacations: Vacations,
-	Indemnity: Indemnity,
-	MedicalInsurance: MedicalInsurance,
-	Tickets: Tickets,
-	Others: Others,
-	Type: Type,
-	Entitlement: Entitlement,
-	IndemnityEligibility: IndemnityEligibility,
-	OvertimeEligibility: OvertimeEligibility,
-	SocialSecurityEligibility: SocialSecurityEligibility,
-	Class: Class,
-	Sector: Sector,
-	Me: Me,
-	Eligible: Eligible,
-	NotEligible: NotEligible,
-	Member: Member,
-	NotMember: NotMember,
-	"There'sNoInformationInThisSectionYet": "Il n'y a pas encore d'informations dans cette section",
-	NotCoveredByMedicalInsurance: NotCoveredByMedicalInsurance,
-	NoTicketEntitlement: NoTicketEntitlement,
-	"Number": "Nombre",
-	CoverageDate: CoverageDate,
-	TotalEmployeeShare: TotalEmployeeShare,
-	TotalEmployerShare: TotalEmployerShare,
-	Dependents: Dependents,
-	NotEntitled: NotEntitled,
-	"TicketEvery{{value}}Months": "Billet tous les {{value}} mois",
-	"TicketEvery{{value}}Month": "Billet tous les {{value}} mois",
-	ThereAreNoDependentsYet: ThereAreNoDependentsYet,
-	ThereAreNoPersonalDocumentsYet: ThereAreNoPersonalDocumentsYet,
-	ThereAreNoDependentsDocumentsYet: ThereAreNoDependentsDocumentsYet,
-	DependentsDocuments: DependentsDocuments,
-	IssueDate: IssueDate,
-	ExpiryDate: ExpiryDate,
-	DocumentNumber: DocumentNumber,
-	EmployeeDocuments: EmployeeDocuments,
-	ThereAreNoEmployeeDocumentsYet: ThereAreNoEmployeeDocumentsYet
-};
-
-const BUILT_IN_LEXICONS = { en, ar, fr };
-class HRTranslateService {
-    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: "19.2.21", ngImport: i0, type: HRTranslateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: HRTranslateService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: HRTranslateService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }] });
-
-class HRTranslatePipe {
-    translateService;
-    constructor(translateService) {
-        this.translateService = translateService;
-    }
-    transform(key) {
-        if (!key)
-            return '';
-        key = this.translateService.translateBuiltIn(key);
-        const lexicon = this.translateService.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: "19.2.21", ngImport: i0, type: HRTranslatePipe, deps: [{ token: HRTranslateService }], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.21", ngImport: i0, type: HRTranslatePipe, isStandalone: true, name: "HRTranslate" });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: HRTranslatePipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    standalone: true,
-                    name: 'HRTranslate'
-                }]
-        }], ctorParameters: () => [{ type: HRTranslateService }] });
-
 class BankInformationCacheService {
     bankInformationCache$ = null;
     bankInformationCacheBaseUrl = '';
@@ -1107,10 +89,10 @@ class BankInformationCacheService {
         this.bankInformationCache$ = null;
         this.bankInformationCacheBaseUrl = '';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: BankInformationCacheService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: BankInformationCacheService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: BankInformationCacheService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: BankInformationCacheService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: BankInformationCacheService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: BankInformationCacheService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1182,10 +164,10 @@ class EntitlementsCacheService {
         }
         this.baseUrl = baseUrl;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: EntitlementsCacheService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: EntitlementsCacheService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: EntitlementsCacheService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: EntitlementsCacheService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: EntitlementsCacheService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: EntitlementsCacheService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1239,10 +221,10 @@ class JobInformationCacheService {
         }
         this.baseUrl = baseUrl;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: JobInformationCacheService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: JobInformationCacheService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: JobInformationCacheService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: JobInformationCacheService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: JobInformationCacheService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: JobInformationCacheService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1305,10 +287,10 @@ class PersonalInformationCacheService {
         }
         this.baseUrl = baseUrl;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: PersonalInformationCacheService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: PersonalInformationCacheService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: PersonalInformationCacheService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: PersonalInformationCacheService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: PersonalInformationCacheService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: PersonalInformationCacheService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1344,10 +326,10 @@ class QualificationsCacheService {
         }
         this.baseUrl = baseUrl;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: QualificationsCacheService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: QualificationsCacheService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: QualificationsCacheService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: QualificationsCacheService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: QualificationsCacheService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: QualificationsCacheService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1373,10 +355,10 @@ class ProfileEmployeeDependentsCach {
     getDependents(baseUrl) {
         return this.baseUrl === baseUrl ? this.dependents$ : null;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ProfileEmployeeDependentsCach, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ProfileEmployeeDependentsCach, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ProfileEmployeeDependentsCach, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ProfileEmployeeDependentsCach, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ProfileEmployeeDependentsCach, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ProfileEmployeeDependentsCach, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1412,10 +394,10 @@ class ProfileDocumentsCacheService {
         }
         this.baseUrl = baseUrl;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ProfileDocumentsCacheService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ProfileDocumentsCacheService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ProfileDocumentsCacheService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ProfileDocumentsCacheService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ProfileDocumentsCacheService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ProfileDocumentsCacheService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1842,10 +824,10 @@ class HRSelfWidgetsService {
         this.profileDocumentsCacheService.setPersonalDocuments(baseUrl, request$);
         return request$;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: HRSelfWidgetsService, deps: [{ token: i1.HttpClient }, { token: BankInformationCacheService }, { token: EntitlementsCacheService }, { token: JobInformationCacheService }, { token: PersonalInformationCacheService }, { token: QualificationsCacheService }, { token: ProfileEmployeeDependentsCach }, { token: ProfileDocumentsCacheService }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: HRSelfWidgetsService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: HRSelfWidgetsService, deps: [{ token: i1.HttpClient }, { token: BankInformationCacheService }, { token: EntitlementsCacheService }, { token: JobInformationCacheService }, { token: PersonalInformationCacheService }, { token: QualificationsCacheService }, { token: ProfileEmployeeDependentsCach }, { token: ProfileDocumentsCacheService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: HRSelfWidgetsService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: HRSelfWidgetsService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: HRSelfWidgetsService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1858,10 +840,10 @@ class HRConstantsService {
     defaultPublicHolidayColor = '#249EA0';
     defaultDayOffColor = '#FCCF5A';
     defaultEventsColor = '#e67e0f';
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: HRConstantsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: HRConstantsService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: HRConstantsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: HRConstantsService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: HRConstantsService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: HRConstantsService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -1987,13 +969,13 @@ class MyMainDetailsWidgetComponent {
     getEmployeeMainDetails() {
         return this.selfWidgetsService.getMainDetails(this.baseUrl);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MyMainDetailsWidgetComponent, deps: [{ token: HRSelfWidgetsService }, { token: HRConstantsService }, { token: HRTranslatePipe }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: MyMainDetailsWidgetComponent, isStandalone: true, selector: "hr-my-main-details-widget", inputs: { badgeClass: "badgeClass", badgeImageClass: "badgeImageClass", badgeWidth: "badgeWidth", badgeHeight: "badgeHeight", employeeInfoContainerClass: "employeeInfoContainerClass", employeeDetailsClass: "employeeDetailsClass", employeeNameContainerClass: "employeeNameContainerClass", employeeNameClass: "employeeNameClass", employeePositionClass: "employeePositionClass", employeeGradeClass: "employeeGradeClass", containerClass: "containerClass", cardBodyClass: "cardBodyClass", headerRowClass: "headerRowClass", shortcutsContainerClass: "shortcutsContainerClass", shortcutItemClass: "shortcutItemClass", shortcutIconContainerClass: "shortcutIconContainerClass", shortcutIconClass: "shortcutIconClass", shortcutTextClass: "shortcutTextClass", detailsRowClass: "detailsRowClass", reportingBlockClass: "reportingBlockClass", captionLabelClasses: "captionLabelClasses", captionLabelValueClass: "captionLabelValueClass", vacationBalancesContainerClass: "vacationBalancesContainerClass", vacationBalanceItemClass: "vacationBalanceItemClass", vacationBalanceHeaderClass: "vacationBalanceHeaderClass", vacationColorDotClass: "vacationColorDotClass", vacationTypeNameClass: "vacationTypeNameClass", vacationBalanceValueRowClass: "vacationBalanceValueRowClass", vacationBalanceValueClass: "vacationBalanceValueClass", tooltipTriggerLinkClass: "tooltipTriggerLinkClass", tooltipTriggerTextClass: "tooltipTriggerTextClass", tooltipVacationRowClass: "tooltipVacationRowClass", tooltipVacationNameContainerClass: "tooltipVacationNameContainerClass", tooltipVacationNameClass: "tooltipVacationNameClass", defaultVacationBalanceColor: "defaultVacationBalanceColor", defaultVacationColor: "defaultVacationColor", baseUrl: "baseUrl", isMobile: "isMobile", isTablet: "isTablet", shortcuts: "shortcuts" }, outputs: { onShortcutClicked: "onShortcutClicked", isLoadingChanged: "isLoadingChanged" }, usesOnChanges: true, ngImport: i0, template: "<div [class]=\"containerClass\">\r\n  <div [class]=\"cardBodyClass\">\r\n    <div [class]=\"headerRowClass\">\r\n      <div>\r\n        @if(employeeMainInfo!=null){\r\n        <div [class]=\"employeeInfoContainerClass\">\r\n          <bayan-employee-badge [badge]=\"employeeBadge\"\r\n                                [badgeClass]=\"badgeClass\"\r\n                                [imageClass]=\"badgeImageClass\"\r\n                                [width]=\"badgeWidth\"\r\n                                [height]=\"badgeHeight\"\r\n                                (employeePhotoError)=\"handleEmployeePhotoError()\"></bayan-employee-badge>\r\n\r\n          <div [class]=\"employeeDetailsClass\">\r\n            <div [class]=\"employeeNameContainerClass\">\r\n              <div [class]=\"employeeNameClass\"\r\n                   data-bs-toggle=\"tooltip\" [title]=\"employeeMainInfo.EmployeeNumber+' | '+ employeeMainInfo.EmployeeName\">\r\n                {{employeeMainInfo.EmployeeNumber + ' | ' + employeeMainInfo.EmployeeName}}\r\n              </div>\r\n            </div>\r\n            @if(employeeMainInfo.PositionName != null && employeeMainInfo.PositionName != ''){\r\n            <div [class]=\"employeePositionClass\"\r\n                 data-bs-toggle=\"tooltip\"\r\n                 [title]=\"employeeMainInfo.PositionName\">\r\n              {{employeeMainInfo.PositionName}}\r\n            </div>\r\n            }\r\n            @if(employeeMainInfo.GradeName !=null){\r\n            <div [class]=\"employeeGradeClass\" [title]=\"employeeMainInfo.GradeName\">\r\n              {{employeeMainInfo.GradeName}}\r\n            </div>\r\n            }\r\n          </div>\r\n        </div>\r\n        }\r\n      </div>\r\n      <div [class]=\"shortcutsContainerClass\">\r\n        @for(Icon of shortcuts ; track Icon ; let i = $index;){\r\n        <sky-shortcut-icon [shortcut]=\"Icon\"\r\n                          [itemClass]=\"shortcutItemClass\"\r\n                          [iconContainerClass]=\"shortcutIconContainerClass\"\r\n                          [iconClass]=\"shortcutIconClass\"\r\n                          [textClass]=\"shortcutTextClass\"\r\n                          (onClicked)=\"shortcutClicked($event)\"></sky-shortcut-icon>\r\n        }\r\n      </div>\r\n    </div>\r\n    <div [class]=\"detailsRowClass\" [ngClass]=\"{'flex-wrap': isMobile || isTablet}\">\r\n      <div [class]=\"reportingBlockClass\" [ngClass]=\"{'mb-3': isMobile}\">\r\n        <div [class]=\"captionLabelClasses + ' me-5'\">\r\n          <div>\r\n            {{'ReportingTo' | HRTranslate}}\r\n          </div>\r\n          <div [class]=\"captionLabelValueClass\">\r\n            @if(employeeMainInfo?.ReportingTo){\r\n            {{employeeMainInfo?.ReportingTo}}\r\n            }@else{\r\n            {{'NotAnknown' | HRTranslate}}\r\n            }\r\n          </div>\r\n        </div>\r\n        <div [class]=\"captionLabelClasses\" [ngClass]=\"{'border-end border-1 pe-4': !isMobile}\">\r\n          <div>\r\n            {{'ServiceYears' | HRTranslate}}\r\n          </div>\r\n          <div [class]=\"captionLabelValueClass\">\r\n            {{employeeMainInfo?.ServiceYears}}\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"flex-grow-1\" [ngClass]=\"{' ms-4': !isMobile && !isTablet, 'w-100': isTablet}\">\r\n        <div [class]=\"vacationBalancesContainerClass\" [ngClass]=\"{'flex-wrap': isMobile,'w-100': isTablet}\">\r\n          @for(vacationBalance of employeeMainInfo?.VacationBalances ; track vacationBalance ; let i = $index;){\r\n          @if(i <= 2 || employeeMainInfo?.VacationBalances?.length == 4) {\r\n          <div [class]=\"vacationBalanceItemClass\" [ngClass]=\"{'mb-2 w-40': isMobile}\">\r\n            <div [class]=\"vacationBalanceHeaderClass\">\r\n              <div [class]=\"vacationColorDotClass\">\r\n                <div class=\"rounded rounded-circle\" style=\"height: 11px; width: 11px;\" [style.background-color]=\"vacationBalance.VacationTypeColor\"></div>\r\n              </div>\r\n              <div [class]=\"vacationTypeNameClass\">\r\n                {{vacationBalance.VacationTypeName}}\r\n              </div>\r\n            </div>\r\n            <div [class]=\"vacationBalanceValueRowClass\">\r\n              <div [class]=\"vacationColorDotClass\">\r\n                <div class=\"rounded rounded-circle invisible\" style=\"height: 11px; width: 11px;\"></div>\r\n              </div>\r\n              <div [class]=\"vacationBalanceValueClass\">{{vacationBalance.CurrentBalance | number:'1.2-2'}} {{(vacationBalance.CurrentBalance! == 1 ? 'day' : 'days') | HRTranslate}}</div>\r\n            </div>\r\n          </div>\r\n          }\r\n          }\r\n\r\n          @if(employeeMainInfo?.VacationBalances && employeeMainInfo!.VacationBalances!.length > 4){\r\n          <div [class]=\"vacationBalanceItemClass\">\r\n            <div [class]=\"tooltipTriggerLinkClass\" id=\"otherVacationBalances\">\r\n              <div [class]=\"vacationColorDotClass\">\r\n                <div class=\"rounded rounded-circle\" style=\"height: 11px; width: 11px;\" [style.background-color]=\"defaultVacationBalanceColor\"></div>\r\n              </div>\r\n              <div [class]=\"tooltipTriggerTextClass\">\r\n                +{{(employeeMainInfo!.VacationBalances!.length - 3)}} {{'More' | HRTranslate}}\r\n              </div>\r\n            </div>\r\n            <div [class]=\"vacationBalanceValueRowClass\" style=\"visibility: hidden\">\r\n              <div [class]=\"vacationColorDotClass\">\r\n                <div class=\"rounded rounded-circle\" style=\"height: 11px; width: 11px;\"></div>\r\n              </div>\r\n              <div class=\"mx-1 fw-medium fs-14 text-dark-gray\">{{'More' | HRTranslate}}</div>\r\n            </div>\r\n            <dx-tooltip [target]=\"'#otherVacationBalances'\"\r\n                        [showEvent]=\"'mouseenter'\"\r\n                        [hideEvent]=\"'mouseleave'\">\r\n              @for (vacationBalance of employeeMainInfo!.VacationBalances! ; track vacationBalance; let i = $index;){\r\n              @if(i > 2){\r\n              <div [class]=\"tooltipVacationRowClass\">\r\n                <div [class]=\"tooltipVacationNameContainerClass\">\r\n\r\n                  <div [class]=\"vacationColorDotClass\">\r\n                    <div class=\"rounded rounded-circle\" style=\"height: 11px; width: 11px;\" [style.background-color]=\"vacationBalance.VacationTypeColor\"></div>\r\n                  </div>\r\n                  <div [class]=\"tooltipVacationNameClass\">\r\n                    {{vacationBalance.VacationTypeName}}\r\n                  </div>\r\n                </div>\r\n                <div>{{vacationBalance.CurrentBalance | number:'1.2-2'}} {{(vacationBalance.CurrentBalance! == 1 ? 'day' : 'days') | HRTranslate}}</div>\r\n              </div>\r\n              }\r\n              }\r\n            </dx-tooltip>\r\n          </div>\r\n          }\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: DxTooltipModule }, { kind: "component", type: i1$1.DxTooltipComponent, selector: "dx-tooltip", inputs: ["animation", "closeOnOutsideClick", "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", "closeOnOutsideClickChange", "containerChange", "contentTemplateChange", "deferRenderingChange", "disabledChange", "heightChange", "hideEventChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showEventChange", "targetChange", "visibleChange", "widthChange", "wrapperAttrChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "component", type: BayanEmployeeBadgeComponent, selector: "bayan-employee-badge", inputs: ["badge", "width", "height", "imageClass", "badgeClass"], outputs: ["employeePhotoError"] }, { kind: "component", type: SkyShortcutIconComponent, selector: "sky-shortcut-icon", inputs: ["shortcut", "itemClass", "iconContainerClass", "iconClass", "textClass"], outputs: ["onClicked"] }, { kind: "pipe", type: HRTranslatePipe, name: "HRTranslate" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MyMainDetailsWidgetComponent, deps: [{ token: HRSelfWidgetsService }, { token: HRConstantsService }, { token: i2.TranslatePipe }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: MyMainDetailsWidgetComponent, isStandalone: true, selector: "hr-my-main-details-widget", inputs: { badgeClass: "badgeClass", badgeImageClass: "badgeImageClass", badgeWidth: "badgeWidth", badgeHeight: "badgeHeight", employeeInfoContainerClass: "employeeInfoContainerClass", employeeDetailsClass: "employeeDetailsClass", employeeNameContainerClass: "employeeNameContainerClass", employeeNameClass: "employeeNameClass", employeePositionClass: "employeePositionClass", employeeGradeClass: "employeeGradeClass", containerClass: "containerClass", cardBodyClass: "cardBodyClass", headerRowClass: "headerRowClass", shortcutsContainerClass: "shortcutsContainerClass", shortcutItemClass: "shortcutItemClass", shortcutIconContainerClass: "shortcutIconContainerClass", shortcutIconClass: "shortcutIconClass", shortcutTextClass: "shortcutTextClass", detailsRowClass: "detailsRowClass", reportingBlockClass: "reportingBlockClass", captionLabelClasses: "captionLabelClasses", captionLabelValueClass: "captionLabelValueClass", vacationBalancesContainerClass: "vacationBalancesContainerClass", vacationBalanceItemClass: "vacationBalanceItemClass", vacationBalanceHeaderClass: "vacationBalanceHeaderClass", vacationColorDotClass: "vacationColorDotClass", vacationTypeNameClass: "vacationTypeNameClass", vacationBalanceValueRowClass: "vacationBalanceValueRowClass", vacationBalanceValueClass: "vacationBalanceValueClass", tooltipTriggerLinkClass: "tooltipTriggerLinkClass", tooltipTriggerTextClass: "tooltipTriggerTextClass", tooltipVacationRowClass: "tooltipVacationRowClass", tooltipVacationNameContainerClass: "tooltipVacationNameContainerClass", tooltipVacationNameClass: "tooltipVacationNameClass", defaultVacationBalanceColor: "defaultVacationBalanceColor", defaultVacationColor: "defaultVacationColor", baseUrl: "baseUrl", isMobile: "isMobile", isTablet: "isTablet", shortcuts: "shortcuts" }, outputs: { onShortcutClicked: "onShortcutClicked", isLoadingChanged: "isLoadingChanged" }, usesOnChanges: true, ngImport: i0, template: "<div [class]=\"containerClass\">\r\n  <div [class]=\"cardBodyClass\">\r\n    <div [class]=\"headerRowClass\">\r\n      <div>\r\n        @if(employeeMainInfo!=null){\r\n        <div [class]=\"employeeInfoContainerClass\">\r\n          <bayan-employee-badge [badge]=\"employeeBadge\"\r\n                                [badgeClass]=\"badgeClass\"\r\n                                [imageClass]=\"badgeImageClass\"\r\n                                [width]=\"badgeWidth\"\r\n                                [height]=\"badgeHeight\"\r\n                                (employeePhotoError)=\"handleEmployeePhotoError()\"></bayan-employee-badge>\r\n\r\n          <div [class]=\"employeeDetailsClass\">\r\n            <div [class]=\"employeeNameContainerClass\">\r\n              <div [class]=\"employeeNameClass\"\r\n                   data-bs-toggle=\"tooltip\" [title]=\"employeeMainInfo.EmployeeNumber+' | '+ employeeMainInfo.EmployeeName\">\r\n                {{employeeMainInfo.EmployeeNumber + ' | ' + employeeMainInfo.EmployeeName}}\r\n              </div>\r\n            </div>\r\n            @if(employeeMainInfo.PositionName != null && employeeMainInfo.PositionName != ''){\r\n            <div [class]=\"employeePositionClass\"\r\n                 data-bs-toggle=\"tooltip\"\r\n                 [title]=\"employeeMainInfo.PositionName\">\r\n              {{employeeMainInfo.PositionName}}\r\n            </div>\r\n            }\r\n            @if(employeeMainInfo.GradeName !=null){\r\n            <div [class]=\"employeeGradeClass\" [title]=\"employeeMainInfo.GradeName\">\r\n              {{employeeMainInfo.GradeName}}\r\n            </div>\r\n            }\r\n          </div>\r\n        </div>\r\n        }\r\n      </div>\r\n      <div [class]=\"shortcutsContainerClass\">\r\n        @for(Icon of shortcuts ; track Icon ; let i = $index;){\r\n        <sky-shortcut-icon [shortcut]=\"Icon\"\r\n                          [itemClass]=\"shortcutItemClass\"\r\n                          [iconContainerClass]=\"shortcutIconContainerClass\"\r\n                          [iconClass]=\"shortcutIconClass\"\r\n                          [textClass]=\"shortcutTextClass\"\r\n                          (onClicked)=\"shortcutClicked($event)\"></sky-shortcut-icon>\r\n        }\r\n      </div>\r\n    </div>\r\n    <div [class]=\"detailsRowClass\" [ngClass]=\"{'flex-wrap': isMobile || isTablet}\">\r\n      <div [class]=\"reportingBlockClass\" [ngClass]=\"{'mb-3': isMobile}\">\r\n        <div [class]=\"captionLabelClasses + ' me-5'\">\r\n          <div>\r\n            {{'ReportingTo' | translate}}\r\n          </div>\r\n          <div [class]=\"captionLabelValueClass\">\r\n            @if(employeeMainInfo?.ReportingTo){\r\n            {{employeeMainInfo?.ReportingTo}}\r\n            }@else{\r\n            {{'NotAnknown' | translate}}\r\n            }\r\n          </div>\r\n        </div>\r\n        <div [class]=\"captionLabelClasses\" [ngClass]=\"{'border-end border-1 pe-4': !isMobile}\">\r\n          <div>\r\n            {{'ServiceYears' | translate}}\r\n          </div>\r\n          <div [class]=\"captionLabelValueClass\">\r\n            {{employeeMainInfo?.ServiceYears}}\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"flex-grow-1\" [ngClass]=\"{' ms-4': !isMobile && !isTablet, 'w-100': isTablet}\">\r\n        <div [class]=\"vacationBalancesContainerClass\" [ngClass]=\"{'flex-wrap': isMobile,'w-100': isTablet}\">\r\n          @for(vacationBalance of employeeMainInfo?.VacationBalances ; track vacationBalance ; let i = $index;){\r\n          @if(i <= 2 || employeeMainInfo?.VacationBalances?.length == 4) {\r\n          <div [class]=\"vacationBalanceItemClass\" [ngClass]=\"{'mb-2 w-40': isMobile}\">\r\n            <div [class]=\"vacationBalanceHeaderClass\">\r\n              <div [class]=\"vacationColorDotClass\">\r\n                <div class=\"rounded rounded-circle\" style=\"height: 11px; width: 11px;\" [style.background-color]=\"vacationBalance.VacationTypeColor\"></div>\r\n              </div>\r\n              <div [class]=\"vacationTypeNameClass\">\r\n                {{vacationBalance.VacationTypeName}}\r\n              </div>\r\n            </div>\r\n            <div [class]=\"vacationBalanceValueRowClass\">\r\n              <div [class]=\"vacationColorDotClass\">\r\n                <div class=\"rounded rounded-circle invisible\" style=\"height: 11px; width: 11px;\"></div>\r\n              </div>\r\n              <div [class]=\"vacationBalanceValueClass\">{{vacationBalance.CurrentBalance | number:'1.2-2'}} {{(vacationBalance.CurrentBalance! == 1 ? 'day' : 'days') | translate}}</div>\r\n            </div>\r\n          </div>\r\n          }\r\n          }\r\n\r\n          @if(employeeMainInfo?.VacationBalances && employeeMainInfo!.VacationBalances!.length > 4){\r\n          <div [class]=\"vacationBalanceItemClass\">\r\n            <div [class]=\"tooltipTriggerLinkClass\" id=\"otherVacationBalances\">\r\n              <div [class]=\"vacationColorDotClass\">\r\n                <div class=\"rounded rounded-circle\" style=\"height: 11px; width: 11px;\" [style.background-color]=\"defaultVacationBalanceColor\"></div>\r\n              </div>\r\n              <div [class]=\"tooltipTriggerTextClass\">\r\n                +{{(employeeMainInfo!.VacationBalances!.length - 3)}} {{'More' | translate}}\r\n              </div>\r\n            </div>\r\n            <div [class]=\"vacationBalanceValueRowClass\" style=\"visibility: hidden\">\r\n              <div [class]=\"vacationColorDotClass\">\r\n                <div class=\"rounded rounded-circle\" style=\"height: 11px; width: 11px;\"></div>\r\n              </div>\r\n              <div class=\"mx-1 fw-medium fs-14 text-dark-gray\">{{'More' | translate}}</div>\r\n            </div>\r\n            <dx-tooltip [target]=\"'#otherVacationBalances'\"\r\n                        [showEvent]=\"'mouseenter'\"\r\n                        [hideEvent]=\"'mouseleave'\">\r\n              @for (vacationBalance of employeeMainInfo!.VacationBalances! ; track vacationBalance; let i = $index;){\r\n              @if(i > 2){\r\n              <div [class]=\"tooltipVacationRowClass\">\r\n                <div [class]=\"tooltipVacationNameContainerClass\">\r\n\r\n                  <div [class]=\"vacationColorDotClass\">\r\n                    <div class=\"rounded rounded-circle\" style=\"height: 11px; width: 11px;\" [style.background-color]=\"vacationBalance.VacationTypeColor\"></div>\r\n                  </div>\r\n                  <div [class]=\"tooltipVacationNameClass\">\r\n                    {{vacationBalance.VacationTypeName}}\r\n                  </div>\r\n                </div>\r\n                <div>{{vacationBalance.CurrentBalance | number:'1.2-2'}} {{(vacationBalance.CurrentBalance! == 1 ? 'day' : 'days') | translate}}</div>\r\n              </div>\r\n              }\r\n              }\r\n            </dx-tooltip>\r\n          </div>\r\n          }\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: DxTooltipModule }, { kind: "component", type: i1$1.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: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: BayanEmployeeBadgeComponent, selector: "bayan-employee-badge", inputs: ["badge", "width", "height", "imageClass", "badgeClass"], outputs: ["employeePhotoError"] }, { kind: "component", type: SkyShortcutIconComponent, selector: "sky-shortcut-icon", inputs: ["shortcut", "itemClass", "iconContainerClass", "iconClass", "textClass"], outputs: ["onClicked"] }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MyMainDetailsWidgetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MyMainDetailsWidgetComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'hr-my-main-details-widget', standalone: true, imports: [DxTooltipModule, NgClass, FontAwesomeModule, DecimalPipe, BayanEmployeeBadgeComponent, SkyShortcutIconComponent, HRTranslatePipe], template: "<div [class]=\"containerClass\">\r\n  <div [class]=\"cardBodyClass\">\r\n    <div [class]=\"headerRowClass\">\r\n      <div>\r\n        @if(employeeMainInfo!=null){\r\n        <div [class]=\"employeeInfoContainerClass\">\r\n          <bayan-employee-badge [badge]=\"employeeBadge\"\r\n                                [badgeClass]=\"badgeClass\"\r\n                                [imageClass]=\"badgeImageClass\"\r\n                                [width]=\"badgeWidth\"\r\n                                [height]=\"badgeHeight\"\r\n                                (employeePhotoError)=\"handleEmployeePhotoError()\"></bayan-employee-badge>\r\n\r\n          <div [class]=\"employeeDetailsClass\">\r\n            <div [class]=\"employeeNameContainerClass\">\r\n              <div [class]=\"employeeNameClass\"\r\n                   data-bs-toggle=\"tooltip\" [title]=\"employeeMainInfo.EmployeeNumber+' | '+ employeeMainInfo.EmployeeName\">\r\n                {{employeeMainInfo.EmployeeNumber + ' | ' + employeeMainInfo.EmployeeName}}\r\n              </div>\r\n            </div>\r\n            @if(employeeMainInfo.PositionName != null && employeeMainInfo.PositionName != ''){\r\n            <div [class]=\"employeePositionClass\"\r\n                 data-bs-toggle=\"tooltip\"\r\n                 [title]=\"employeeMainInfo.PositionName\">\r\n              {{employeeMainInfo.PositionName}}\r\n            </div>\r\n            }\r\n            @if(employeeMainInfo.GradeName !=null){\r\n            <div [class]=\"employeeGradeClass\" [title]=\"employeeMainInfo.GradeName\">\r\n              {{employeeMainInfo.GradeName}}\r\n            </div>\r\n            }\r\n          </div>\r\n        </div>\r\n        }\r\n      </div>\r\n      <div [class]=\"shortcutsContainerClass\">\r\n        @for(Icon of shortcuts ; track Icon ; let i = $index;){\r\n        <sky-shortcut-icon [shortcut]=\"Icon\"\r\n                          [itemClass]=\"shortcutItemClass\"\r\n                          [iconContainerClass]=\"shortcutIconContainerClass\"\r\n                          [iconClass]=\"shortcutIconClass\"\r\n                          [textClass]=\"shortcutTextClass\"\r\n                          (onClicked)=\"shortcutClicked($event)\"></sky-shortcut-icon>\r\n        }\r\n      </div>\r\n    </div>\r\n    <div [class]=\"detailsRowClass\" [ngClass]=\"{'flex-wrap': isMobile || isTablet}\">\r\n      <div [class]=\"reportingBlockClass\" [ngClass]=\"{'mb-3': isMobile}\">\r\n        <div [class]=\"captionLabelClasses + ' me-5'\">\r\n          <div>\r\n            {{'ReportingTo' | HRTranslate}}\r\n          </div>\r\n          <div [class]=\"captionLabelValueClass\">\r\n            @if(employeeMainInfo?.ReportingTo){\r\n            {{employeeMainInfo?.ReportingTo}}\r\n            }@else{\r\n            {{'NotAnknown' | HRTranslate}}\r\n            }\r\n          </div>\r\n        </div>\r\n        <div [class]=\"captionLabelClasses\" [ngClass]=\"{'border-end border-1 pe-4': !isMobile}\">\r\n          <div>\r\n            {{'ServiceYears' | HRTranslate}}\r\n          </div>\r\n          <div [class]=\"captionLabelValueClass\">\r\n            {{employeeMainInfo?.ServiceYears}}\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"flex-grow-1\" [ngClass]=\"{' ms-4': !isMobile && !isTablet, 'w-100': isTablet}\">\r\n        <div [class]=\"vacationBalancesContainerClass\" [ngClass]=\"{'flex-wrap': isMobile,'w-100': isTablet}\">\r\n          @for(vacationBalance of employeeMainInfo?.VacationBalances ; track vacationBalance ; let i = $index;){\r\n          @if(i <= 2 || employeeMainInfo?.VacationBalances?.length == 4) {\r\n          <div [class]=\"vacationBalanceItemClass\" [ngClass]=\"{'mb-2 w-40': isMobile}\">\r\n            <div [class]=\"vacationBalanceHeaderClass\">\r\n              <div [class]=\"vacationColorDotClass\">\r\n                <div class=\"rounded rounded-circle\" style=\"height: 11px; width: 11px;\" [style.background-color]=\"vacationBalance.VacationTypeColor\"></div>\r\n              </div>\r\n              <div [class]=\"vacationTypeNameClass\">\r\n                {{vacationBalance.VacationTypeName}}\r\n              </div>\r\n            </div>\r\n            <div [class]=\"vacationBalanceValueRowClass\">\r\n              <div [class]=\"vacationColorDotClass\">\r\n                <div class=\"rounded rounded-circle invisible\" style=\"height: 11px; width: 11px;\"></div>\r\n              </div>\r\n              <div [class]=\"vacationBalanceValueClass\">{{vacationBalance.CurrentBalance | number:'1.2-2'}} {{(vacationBalance.CurrentBalance! == 1 ? 'day' : 'days') | HRTranslate}}</div>\r\n            </div>\r\n          </div>\r\n          }\r\n          }\r\n\r\n          @if(employeeMainInfo?.VacationBalances && employeeMainInfo!.VacationBalances!.length > 4){\r\n          <div [class]=\"vacationBalanceItemClass\">\r\n            <div [class]=\"tooltipTriggerLinkClass\" id=\"otherVacationBalances\">\r\n              <div [class]=\"vacationColorDotClass\">\r\n                <div class=\"rounded rounded-circle\" style=\"height: 11px; width: 11px;\" [style.background-color]=\"defaultVacationBalanceColor\"></div>\r\n              </div>\r\n              <div [class]=\"tooltipTriggerTextClass\">\r\n                +{{(employeeMainInfo!.VacationBalances!.length - 3)}} {{'More' | HRTranslate}}\r\n              </div>\r\n            </div>\r\n            <div [class]=\"vacationBalanceValueRowClass\" style=\"visibility: hidden\">\r\n              <div [class]=\"vacationColorDotClass\">\r\n                <div class=\"rounded rounded-circle\" style=\"height: 11px; width: 11px;\"></div>\r\n              </div>\r\n              <div class=\"mx-1 fw-medium fs-14 text-dark-gray\">{{'More' | HRTranslate}}</div>\r\n            </div>\r\n            <dx-tooltip [target]=\"'#otherVacationBalances'\"\r\n                        [showEvent]=\"'mouseenter'\"\r\n                        [hideEvent]=\"'mouseleave'\">\r\n              @for (vacationBalance of employeeMainInfo!.VacationBalances! ; track vacationBalance; let i = $index;){\r\n              @if(i > 2){\r\n              <div [class]=\"tooltipVacationRowClass\">\r\n                <div [class]=\"tooltipVacationNameContainerClass\">\r\n\r\n                  <div [class]=\"vacationColorDotClass\">\r\n                    <div class=\"rounded rounded-circle\" style=\"height: 11px; width: 11px;\" [style.background-color]=\"vacationBalance.VacationTypeColor\"></div>\r\n                  </div>\r\n                  <div [class]=\"tooltipVacationNameClass\">\r\n                    {{vacationBalance.VacationTypeName}}\r\n                  </div>\r\n                </div>\r\n                <div>{{vacationBalance.CurrentBalance | number:'1.2-2'}} {{(vacationBalance.CurrentBalance! == 1 ? 'day' : 'days') | HRTranslate}}</div>\r\n              </div>\r\n              }\r\n              }\r\n            </dx-tooltip>\r\n          </div>\r\n          }\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
-        }], ctorParameters: () => [{ type: HRSelfWidgetsService }, { type: HRConstantsService }, { type: HRTranslatePipe }], propDecorators: { onShortcutClicked: [{
+            args: [{ selector: 'hr-my-main-details-widget', standalone: true, imports: [DxTooltipModule, NgClass, FontAwesomeModule, DecimalPipe, BayanEmployeeBadgeComponent, SkyShortcutIconComponent, TranslatePipe], template: "<div [class]=\"containerClass\">\r\n  <div [class]=\"cardBodyClass\">\r\n    <div [class]=\"headerRowClass\">\r\n      <div>\r\n        @if(employeeMainInfo!=null){\r\n        <div [class]=\"employeeInfoContainerClass\">\r\n          <bayan-employee-badge [badge]=\"employeeBadge\"\r\n                                [badgeClass]=\"badgeClass\"\r\n                                [imageClass]=\"badgeImageClass\"\r\n                                [width]=\"badgeWidth\"\r\n                                [height]=\"badgeHeight\"\r\n                                (employeePhotoError)=\"handleEmployeePhotoError()\"></bayan-employee-badge>\r\n\r\n          <div [class]=\"employeeDetailsClass\">\r\n            <div [class]=\"employeeNameContainerClass\">\r\n              <div [class]=\"employeeNameClass\"\r\n                   data-bs-toggle=\"tooltip\" [title]=\"employeeMainInfo.EmployeeNumber+' | '+ employeeMainInfo.EmployeeName\">\r\n                {{employeeMainInfo.EmployeeNumber + ' | ' + employeeMainInfo.EmployeeName}}\r\n              </div>\r\n            </div>\r\n            @if(employeeMainInfo.PositionName != null && employeeMainInfo.PositionName != ''){\r\n            <div [class]=\"employeePositionClass\"\r\n                 data-bs-toggle=\"tooltip\"\r\n                 [title]=\"employeeMainInfo.PositionName\">\r\n              {{employeeMainInfo.PositionName}}\r\n            </div>\r\n            }\r\n            @if(employeeMainInfo.GradeName !=null){\r\n            <div [class]=\"employeeGradeClass\" [title]=\"employeeMainInfo.GradeName\">\r\n              {{employeeMainInfo.GradeName}}\r\n            </div>\r\n            }\r\n          </div>\r\n        </div>\r\n        }\r\n      </div>\r\n      <div [class]=\"shortcutsContainerClass\">\r\n        @for(Icon of shortcuts ; track Icon ; let i = $index;){\r\n        <sky-shortcut-icon [shortcut]=\"Icon\"\r\n                          [itemClass]=\"shortcutItemClass\"\r\n                          [iconContainerClass]=\"shortcutIconContainerClass\"\r\n                          [iconClass]=\"shortcutIconClass\"\r\n                          [textClass]=\"shortcutTextClass\"\r\n                          (onClicked)=\"shortcutClicked($event)\"></sky-shortcut-icon>\r\n        }\r\n      </div>\r\n    </div>\r\n    <div [class]=\"detailsRowClass\" [ngClass]=\"{'flex-wrap': isMobile || isTablet}\">\r\n      <div [class]=\"reportingBlockClass\" [ngClass]=\"{'mb-3': isMobile}\">\r\n        <div [class]=\"captionLabelClasses + ' me-5'\">\r\n          <div>\r\n            {{'ReportingTo' | translate}}\r\n          </div>\r\n          <div [class]=\"captionLabelValueClass\">\r\n            @if(employeeMainInfo?.ReportingTo){\r\n            {{employeeMainInfo?.ReportingTo}}\r\n            }@else{\r\n            {{'NotAnknown' | translate}}\r\n            }\r\n          </div>\r\n        </div>\r\n        <div [class]=\"captionLabelClasses\" [ngClass]=\"{'border-end border-1 pe-4': !isMobile}\">\r\n          <div>\r\n            {{'ServiceYears' | translate}}\r\n          </div>\r\n          <div [class]=\"captionLabelValueClass\">\r\n            {{employeeMainInfo?.ServiceYears}}\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"flex-grow-1\" [ngClass]=\"{' ms-4': !isMobile && !isTablet, 'w-100': isTablet}\">\r\n        <div [class]=\"vacationBalancesContainerClass\" [ngClass]=\"{'flex-wrap': isMobile,'w-100': isTablet}\">\r\n          @for(vacationBalance of employeeMainInfo?.VacationBalances ; track vacationBalance ; let i = $index;){\r\n          @if(i <= 2 || employeeMainInfo?.VacationBalances?.length == 4) {\r\n          <div [class]=\"vacationBalanceItemClass\" [ngClass]=\"{'mb-2 w-40': isMobile}\">\r\n            <div [class]=\"vacationBalanceHeaderClass\">\r\n              <div [class]=\"vacationColorDotClass\">\r\n                <div class=\"rounded rounded-circle\" style=\"height: 11px; width: 11px;\" [style.background-color]=\"vacationBalance.VacationTypeColor\"></div>\r\n              </div>\r\n              <div [class]=\"vacationTypeNameClass\">\r\n                {{vacationBalance.VacationTypeName}}\r\n              </div>\r\n            </div>\r\n            <div [class]=\"vacationBalanceValueRowClass\">\r\n              <div [class]=\"vacationColorDotClass\">\r\n                <div class=\"rounded rounded-circle invisible\" style=\"height: 11px; width: 11px;\"></div>\r\n              </div>\r\n              <div [class]=\"vacationBalanceValueClass\">{{vacationBalance.CurrentBalance | number:'1.2-2'}} {{(vacationBalance.CurrentBalance! == 1 ? 'day' : 'days') | translate}}</div>\r\n            </div>\r\n          </div>\r\n          }\r\n          }\r\n\r\n          @if(employeeMainInfo?.VacationBalances && employeeMainInfo!.VacationBalances!.length > 4){\r\n          <div [class]=\"vacationBalanceItemClass\">\r\n            <div [class]=\"tooltipTriggerLinkClass\" id=\"otherVacationBalances\">\r\n              <div [class]=\"vacationColorDotClass\">\r\n                <div class=\"rounded rounded-circle\" style=\"height: 11px; width: 11px;\" [style.background-color]=\"defaultVacationBalanceColor\"></div>\r\n              </div>\r\n              <div [class]=\"tooltipTriggerTextClass\">\r\n                +{{(employeeMainInfo!.VacationBalances!.length - 3)}} {{'More' | translate}}\r\n              </div>\r\n            </div>\r\n            <div [class]=\"vacationBalanceValueRowClass\" style=\"visibility: hidden\">\r\n              <div [class]=\"vacationColorDotClass\">\r\n                <div class=\"rounded rounded-circle\" style=\"height: 11px; width: 11px;\"></div>\r\n              </div>\r\n              <div class=\"mx-1 fw-medium fs-14 text-dark-gray\">{{'More' | translate}}</div>\r\n            </div>\r\n            <dx-tooltip [target]=\"'#otherVacationBalances'\"\r\n                        [showEvent]=\"'mouseenter'\"\r\n                        [hideEvent]=\"'mouseleave'\">\r\n              @for (vacationBalance of employeeMainInfo!.VacationBalances! ; track vacationBalance; let i = $index;){\r\n              @if(i > 2){\r\n              <div [class]=\"tooltipVacationRowClass\">\r\n                <div [class]=\"tooltipVacationNameContainerClass\">\r\n\r\n                  <div [class]=\"vacationColorDotClass\">\r\n                    <div class=\"rounded rounded-circle\" style=\"height: 11px; width: 11px;\" [style.background-color]=\"vacationBalance.VacationTypeColor\"></div>\r\n                  </div>\r\n                  <div [class]=\"tooltipVacationNameClass\">\r\n                    {{vacationBalance.VacationTypeName}}\r\n                  </div>\r\n                </div>\r\n                <div>{{vacationBalance.CurrentBalance | number:'1.2-2'}} {{(vacationBalance.CurrentBalance! == 1 ? 'day' : 'days') | translate}}</div>\r\n              </div>\r\n              }\r\n              }\r\n            </dx-tooltip>\r\n          </div>\r\n          }\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
+        }], ctorParameters: () => [{ type: HRSelfWidgetsService }, { type: HRConstantsService }, { type: i2.TranslatePipe }], propDecorators: { onShortcutClicked: [{
                 type: Output
             }], isLoadingChanged: [{
                 type: Output
@@ -2085,10 +1067,10 @@ class HRCardHeaderComponent {
     containerClass = 'd-flex align-items-center mb-2';
     iconClass = 'fs-6 text-primary pe-2';
     titleClass = 'text-center table-header-lg fw-medium';
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: HRCardHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.21", type: HRCardHeaderComponent, isStandalone: true, selector: "hr-card-header", inputs: { icon: "icon", title: "title", containerClass: "containerClass", iconClass: "iconClass", titleClass: "titleClass" }, ngImport: i0, template: "<div [class]=\"containerClass\">\r\n  <fa-icon [icon]=\"icon\" [class]=\"iconClass\"></fa-icon>\r\n  <span [class]=\"titleClass\">{{ title }}</span>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: HRCardHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.13", type: HRCardHeaderComponent, isStandalone: true, selector: "hr-card-header", inputs: { icon: "icon", title: "title", containerClass: "containerClass", iconClass: "iconClass", titleClass: "titleClass" }, ngImport: i0, template: "<div [class]=\"containerClass\">\r\n  <fa-icon [icon]=\"icon\" [class]=\"iconClass\"></fa-icon>\r\n  <span [class]=\"titleClass\">{{ title }}</span>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i2$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: HRCardHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: HRCardHeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'hr-card-header', standalone: true, imports: [FontAwesomeModule], template: "<div [class]=\"containerClass\">\r\n  <fa-icon [icon]=\"icon\" [class]=\"iconClass\"></fa-icon>\r\n  <span [class]=\"titleClass\">{{ title }}</span>\r\n</div>\r\n" }]
         }], propDecorators: { icon: [{
@@ -2123,12 +1105,12 @@ class HREventItemComponent {
     get isArabic() { return this.selectedLanguage === 'ar'; }
     isBirthday(event) { return event.EventType === EventTypeEnum.Birthdays; }
     hasPropertyBadge(event) { return this.showProperty && !!event.PropertySymbol; }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: HREventItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: HREventItemComponent, isStandalone: true, selector: "hr-event-item", inputs: { events: "events", showDates: "showDates", showProperty: "showProperty", selectedLanguage: "selectedLanguage", selectedEventType: "selectedEventType", weekendWarningDescription: "weekendWarningDescription", eventIconClass: "eventIconClass", eventNameBoldClass: "eventNameBoldClass", eventDescriptionClass: "eventDescriptionClass", propertyBadgeClass: "propertyBadgeClass", noEventsTextClass: "noEventsTextClass", warningTextClass: "warningTextClass", dateFormat: "dateFormat" }, ngImport: i0, template: "@if (events.length > 0) {\r\n<div>\r\n  @for (event of events; track event) {\r\n  <div [class]=\"'d-flex lh-base ' + (showDates ? 'my-3' : 'my-1')\">\r\n    <fa-icon [icon]=\"isBirthday(event) ? cakeCandles : treePalm\"\r\n             [class]=\"eventIconClass\"\r\n             [title]=\"isBirthday(event) ? ('Birthday' | HRTranslate) : ('PublicHoliday' | HRTranslate)\">\r\n    </fa-icon>\r\n\r\n    <div>\r\n      @if (isBirthday(event)) {\r\n        @if (hasPropertyBadge(event)) {\r\n        <span [class]=\"propertyBadgeClass\" [title]=\"event.PropertyName!\">{{ event.PropertySymbol }}</span>\r\n        }\r\n        @if (isArabic) {\r\n        <span>{{ 'Birthday' | HRTranslate }}</span>\r\n        <span [class]=\"eventNameBoldClass\">{{ ' ' + event.Name + ' ' }}</span>\r\n        @if (event.IsIn2Days) { <span>{{ 'During' | HRTranslate }} </span> }\r\n        } @else {\r\n        <span [class]=\"eventNameBoldClass\">{{ event.Name }}'s </span>\r\n        <span>{{ ('Birthday' | HRTranslate) + ' ' + ((event.IsIn2Days ? ('isIn' | HRTranslate) : ('is' | HRTranslate)) | lowercase) }} </span>\r\n        }\r\n      } @else {\r\n        @if (isArabic) {\r\n        <span [class]=\"eventNameBoldClass\">{{ event.Name }}</span> <span> {{ ('In' | HRTranslate) + ' ' }}</span>\r\n        } @else {\r\n        <span [class]=\"eventNameBoldClass\">{{ event.Name }} </span><span>{{ ' ' + (('is' | HRTranslate) | lowercase) }} </span>\r\n        }\r\n      }\r\n\r\n      <span [class]=\"eventDescriptionClass\">{{ event.Description | HRTranslate }}</span>\r\n\r\n      @if (!isBirthday(event) && showDates && event.StartDate && event.EndDate) {\r\n      <span>{{ ' (' + (event.StartDate | date:dateFormat) + ' - ' + (event.EndDate | date:dateFormat) + ')' }}</span>\r\n      }\r\n    </div>\r\n  </div>\r\n  }\r\n</div>\r\n} @else {\r\n@if (weekendWarningDescription) {\r\n<div [class]=\"warningTextClass + (showDates ? ' pt-5 my-5' : '')\">{{ weekendWarningDescription | HRTranslate }}</div>\r\n} @else {\r\n<div [class]=\"noEventsTextClass + (showDates ? ' pt-5 my-5' : '')\">{{ 'NoEvents' | HRTranslate }}</div>\r\n}\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: HRTranslatePipe, name: "HRTranslate" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: HREventItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: HREventItemComponent, isStandalone: true, selector: "hr-event-item", inputs: { events: "events", showDates: "showDates", showProperty: "showProperty", selectedLanguage: "selectedLanguage", selectedEventType: "selectedEventType", weekendWarningDescription: "weekendWarningDescription", eventIconClass: "eventIconClass", eventNameBoldClass: "eventNameBoldClass", eventDescriptionClass: "eventDescriptionClass", propertyBadgeClass: "propertyBadgeClass", noEventsTextClass: "noEventsTextClass", warningTextClass: "warningTextClass", dateFormat: "dateFormat" }, ngImport: i0, template: "@if (events.length > 0) {\r\n<div>\r\n  @for (event of events; track event) {\r\n  <div [class]=\"'d-flex lh-base ' + (showDates ? 'my-3' : 'my-1')\">\r\n    <fa-icon [icon]=\"isBirthday(event) ? cakeCandles : treePalm\"\r\n             [class]=\"eventIconClass\"\r\n             [title]=\"isBirthday(event) ? ('Birthday' | translate) : ('PublicHoliday' | translate)\">\r\n    </fa-icon>\r\n\r\n    <div>\r\n      @if (isBirthday(event)) {\r\n        @if (hasPropertyBadge(event)) {\r\n        <span [class]=\"propertyBadgeClass\" [title]=\"event.PropertyName!\">{{ event.PropertySymbol }}</span>\r\n        }\r\n        @if (isArabic) {\r\n        <span>{{ 'Birthday' | translate }}</span>\r\n        <span [class]=\"eventNameBoldClass\">{{ ' ' + event.Name + ' ' }}</span>\r\n        @if (event.IsIn2Days) { <span>{{ 'During' | translate }} </span> }\r\n        } @else {\r\n        <span [class]=\"eventNameBoldClass\">{{ event.Name }}'s </span>\r\n        <span>{{ ('Birthday' | translate) + ' ' + ((event.IsIn2Days ? ('isIn' | translate) : ('is' | translate)) | lowercase) }} </span>\r\n        }\r\n      } @else {\r\n        @if (isArabic) {\r\n        <span [class]=\"eventNameBoldClass\">{{ event.Name }}</span> <span> {{ ('In' | translate) + ' ' }}</span>\r\n        } @else {\r\n        <span [class]=\"eventNameBoldClass\">{{ event.Name }} </span><span>{{ ' ' + (('is' | translate) | lowercase) }} </span>\r\n        }\r\n      }\r\n\r\n      <span [class]=\"eventDescriptionClass\">{{ event.Description | translate }}</span>\r\n\r\n      @if (!isBirthday(event) && showDates && event.StartDate && event.EndDate) {\r\n      <span>{{ ' (' + (event.StartDate | date:dateFormat) + ' - ' + (event.EndDate | date:dateFormat) + ')' }}</span>\r\n      }\r\n    </div>\r\n  </div>\r\n  }\r\n</div>\r\n} @else {\r\n@if (weekendWarningDescription) {\r\n<div [class]=\"warningTextClass + (showDates ? ' pt-5 my-5' : '')\">{{ weekendWarningDescription | translate }}</div>\r\n} @else {\r\n<div [class]=\"noEventsTextClass + (showDates ? ' pt-5 my-5' : '')\">{{ 'NoEvents' | translate }}</div>\r\n}\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i2$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: HREventItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: HREventItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'hr-event-item', standalone: true, imports: [FontAwesomeModule, DatePipe, LowerCasePipe, HRTranslatePipe], template: "@if (events.length > 0) {\r\n<div>\r\n  @for (event of events; track event) {\r\n  <div [class]=\"'d-flex lh-base ' + (showDates ? 'my-3' : 'my-1')\">\r\n    <fa-icon [icon]=\"isBirthday(event) ? cakeCandles : treePalm\"\r\n             [class]=\"eventIconClass\"\r\n             [title]=\"isBirthday(event) ? ('Birthday' | HRTranslate) : ('PublicHoliday' | HRTranslate)\">\r\n    </fa-icon>\r\n\r\n    <div>\r\n      @if (isBirthday(event)) {\r\n        @if (hasPropertyBadge(event)) {\r\n        <span [class]=\"propertyBadgeClass\" [title]=\"event.PropertyName!\">{{ event.PropertySymbol }}</span>\r\n        }\r\n        @if (isArabic) {\r\n        <span>{{ 'Birthday' | HRTranslate }}</span>\r\n        <span [class]=\"eventNameBoldClass\">{{ ' ' + event.Name + ' ' }}</span>\r\n        @if (event.IsIn2Days) { <span>{{ 'During' | HRTranslate }} </span> }\r\n        } @else {\r\n        <span [class]=\"eventNameBoldClass\">{{ event.Name }}'s </span>\r\n        <span>{{ ('Birthday' | HRTranslate) + ' ' + ((event.IsIn2Days ? ('isIn' | HRTranslate) : ('is' | HRTranslate)) | lowercase) }} </span>\r\n        }\r\n      } @else {\r\n        @if (isArabic) {\r\n        <span [class]=\"eventNameBoldClass\">{{ event.Name }}</span> <span> {{ ('In' | HRTranslate) + ' ' }}</span>\r\n        } @else {\r\n        <span [class]=\"eventNameBoldClass\">{{ event.Name }} </span><span>{{ ' ' + (('is' | HRTranslate) | lowercase) }} </span>\r\n        }\r\n      }\r\n\r\n      <span [class]=\"eventDescriptionClass\">{{ event.Description | HRTranslate }}</span>\r\n\r\n      @if (!isBirthday(event) && showDates && event.StartDate && event.EndDate) {\r\n      <span>{{ ' (' + (event.StartDate | date:dateFormat) + ' - ' + (event.EndDate | date:dateFormat) + ')' }}</span>\r\n      }\r\n    </div>\r\n  </div>\r\n  }\r\n</div>\r\n} @else {\r\n@if (weekendWarningDescription) {\r\n<div [class]=\"warningTextClass + (showDates ? ' pt-5 my-5' : '')\">{{ weekendWarningDescription | HRTranslate }}</div>\r\n} @else {\r\n<div [class]=\"noEventsTextClass + (showDates ? ' pt-5 my-5' : '')\">{{ 'NoEvents' | HRTranslate }}</div>\r\n}\r\n}\r\n" }]
+            args: [{ selector: 'hr-event-item', standalone: true, imports: [FontAwesomeModule, DatePipe, LowerCasePipe, TranslatePipe], template: "@if (events.length > 0) {\r\n<div>\r\n  @for (event of events; track event) {\r\n  <div [class]=\"'d-flex lh-base ' + (showDates ? 'my-3' : 'my-1')\">\r\n    <fa-icon [icon]=\"isBirthday(event) ? cakeCandles : treePalm\"\r\n             [class]=\"eventIconClass\"\r\n             [title]=\"isBirthday(event) ? ('Birthday' | translate) : ('PublicHoliday' | translate)\">\r\n    </fa-icon>\r\n\r\n    <div>\r\n      @if (isBirthday(event)) {\r\n        @if (hasPropertyBadge(event)) {\r\n        <span [class]=\"propertyBadgeClass\" [title]=\"event.PropertyName!\">{{ event.PropertySymbol }}</span>\r\n        }\r\n        @if (isArabic) {\r\n        <span>{{ 'Birthday' | translate }}</span>\r\n        <span [class]=\"eventNameBoldClass\">{{ ' ' + event.Name + ' ' }}</span>\r\n        @if (event.IsIn2Days) { <span>{{ 'During' | translate }} </span> }\r\n        } @else {\r\n        <span [class]=\"eventNameBoldClass\">{{ event.Name }}'s </span>\r\n        <span>{{ ('Birthday' | translate) + ' ' + ((event.IsIn2Days ? ('isIn' | translate) : ('is' | translate)) | lowercase) }} </span>\r\n        }\r\n      } @else {\r\n        @if (isArabic) {\r\n        <span [class]=\"eventNameBoldClass\">{{ event.Name }}</span> <span> {{ ('In' | translate) + ' ' }}</span>\r\n        } @else {\r\n        <span [class]=\"eventNameBoldClass\">{{ event.Name }} </span><span>{{ ' ' + (('is' | translate) | lowercase) }} </span>\r\n        }\r\n      }\r\n\r\n      <span [class]=\"eventDescriptionClass\">{{ event.Description | translate }}</span>\r\n\r\n      @if (!isBirthday(event) && showDates && event.StartDate && event.EndDate) {\r\n      <span>{{ ' (' + (event.StartDate | date:dateFormat) + ' - ' + (event.EndDate | date:dateFormat) + ')' }}</span>\r\n      }\r\n    </div>\r\n  </div>\r\n  }\r\n</div>\r\n} @else {\r\n@if (weekendWarningDescription) {\r\n<div [class]=\"warningTextClass + (showDates ? ' pt-5 my-5' : '')\">{{ weekendWarningDescription | translate }}</div>\r\n} @else {\r\n<div [class]=\"noEventsTextClass + (showDates ? ' pt-5 my-5' : '')\">{{ 'NoEvents' | translate }}</div>\r\n}\r\n}\r\n" }]
         }], propDecorators: { events: [{
                 type: Input
             }], showDates: [{
@@ -2185,13 +1167,13 @@ class HREventTabBarComponent {
             return this.translatePipe.transform('Birthday');
         return this.translatePipe.transform('PublicHoliday');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: HREventTabBarComponent, deps: [{ token: HRTranslatePipe }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: HREventTabBarComponent, isStandalone: true, selector: "hr-event-tab-bar", inputs: { selectedType: "selectedType", selectedLanguage: "selectedLanguage", tabSelectedClass: "tabSelectedClass", tabNotSelectedClass: "tabNotSelectedClass", tabTextSelectedClass: "tabTextSelectedClass", tabTextNotSelectedClass: "tabTextNotSelectedClass", containerClass: "containerClass", tabItemClass: "tabItemClass", tabTextClass: "tabTextClass", tabIconClass: "tabIconClass" }, outputs: { tabSelected: "tabSelected" }, ngImport: i0, template: "<div [class]=\"containerClass\">\r\n  @for (tab of tabList; track tab) {\r\n  <div [class]=\"tabItemClass + ' ' + (selectedType == tab.id ? tabSelectedClass : tabNotSelectedClass)\"\r\n       [ngClass]=\"{'w-25': (selectedLanguage == 'fr' && !tab?.icon)}\"\r\n       (click)=\"tabSelected.emit(tab.id)\">\r\n    @if (!tab?.icon) {\r\n    <span [class]=\"tabTextClass + ' ' + (selectedType == tab.id ? tabTextSelectedClass : tabTextNotSelectedClass)\">{{ getTabText(tab) }}</span>\r\n    } @else {\r\n    <fa-icon [icon]=\"tab.icon!\" [class]=\"tabIconClass + ' ' + (selectedType == tab.id ? tabTextSelectedClass : tabTextNotSelectedClass)\" [title]=\"getTabText(tab)\"></fa-icon>\r\n    }\r\n  </div>\r\n  }\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: HREventTabBarComponent, deps: [{ token: i2.TranslatePipe }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: HREventTabBarComponent, isStandalone: true, selector: "hr-event-tab-bar", inputs: { selectedType: "selectedType", selectedLanguage: "selectedLanguage", tabSelectedClass: "tabSelectedClass", tabNotSelectedClass: "tabNotSelectedClass", tabTextSelectedClass: "tabTextSelectedClass", tabTextNotSelectedClass: "tabTextNotSelectedClass", containerClass: "containerClass", tabItemClass: "tabItemClass", tabTextClass: "tabTextClass", tabIconClass: "tabIconClass" }, outputs: { tabSelected: "tabSelected" }, ngImport: i0, template: "<div [class]=\"containerClass\">\r\n  @for (tab of tabList; track tab) {\r\n  <div [class]=\"tabItemClass + ' ' + (selectedType == tab.id ? tabSelectedClass : tabNotSelectedClass)\"\r\n       [ngClass]=\"{'w-25': (selectedLanguage == 'fr' && !tab?.icon)}\"\r\n       (click)=\"tabSelected.emit(tab.id)\">\r\n    @if (!tab?.icon) {\r\n    <span [class]=\"tabTextClass + ' ' + (selectedType == tab.id ? tabTextSelectedClass : tabTextNotSelectedClass)\">{{ getTabText(tab) }}</span>\r\n    } @else {\r\n    <fa-icon [icon]=\"tab.icon!\" [class]=\"tabIconClass + ' ' + (selectedType == tab.id ? tabTextSelectedClass : tabTextNotSelectedClass)\" [title]=\"getTabText(tab)\"></fa-icon>\r\n    }\r\n  </div>\r\n  }\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i2$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: HREventTabBarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: HREventTabBarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'hr-event-tab-bar', standalone: true, imports: [FontAwesomeModule, NgClass, HRTranslatePipe], template: "<div [class]=\"containerClass\">\r\n  @for (tab of tabList; track tab) {\r\n  <div [class]=\"tabItemClass + ' ' + (selectedType == tab.id ? tabSelectedClass : tabNotSelectedClass)\"\r\n       [ngClass]=\"{'w-25': (selectedLanguage == 'fr' && !tab?.icon)}\"\r\n       (click)=\"tabSelected.emit(tab.id)\">\r\n    @if (!tab?.icon) {\r\n    <span [class]=\"tabTextClass + ' ' + (selectedType == tab.id ? tabTextSelectedClass : tabTextNotSelectedClass)\">{{ getTabText(tab) }}</span>\r\n    } @else {\r\n    <fa-icon [icon]=\"tab.icon!\" [class]=\"tabIconClass + ' ' + (selectedType == tab.id ? tabTextSelectedClass : tabTextNotSelectedClass)\" [title]=\"getTabText(tab)\"></fa-icon>\r\n    }\r\n  </div>\r\n  }\r\n</div>\r\n" }]
-        }], ctorParameters: () => [{ type: HRTranslatePipe }], propDecorators: { selectedType: [{
+            args: [{ selector: 'hr-event-tab-bar', standalone: true, imports: [FontAwesomeModule, NgClass, TranslatePipe], template: "<div [class]=\"containerClass\">\r\n  @for (tab of tabList; track tab) {\r\n  <div [class]=\"tabItemClass + ' ' + (selectedType == tab.id ? tabSelectedClass : tabNotSelectedClass)\"\r\n       [ngClass]=\"{'w-25': (selectedLanguage == 'fr' && !tab?.icon)}\"\r\n       (click)=\"tabSelected.emit(tab.id)\">\r\n    @if (!tab?.icon) {\r\n    <span [class]=\"tabTextClass + ' ' + (selectedType == tab.id ? tabTextSelectedClass : tabTextNotSelectedClass)\">{{ getTabText(tab) }}</span>\r\n    } @else {\r\n    <fa-icon [icon]=\"tab.icon!\" [class]=\"tabIconClass + ' ' + (selectedType == tab.id ? tabTextSelectedClass : tabTextNotSelectedClass)\" [title]=\"getTabText(tab)\"></fa-icon>\r\n    }\r\n  </div>\r\n  }\r\n</div>\r\n" }]
+        }], ctorParameters: () => [{ type: i2.TranslatePipe }], propDecorators: { selectedType: [{
                 type: Input
             }], selectedLanguage: [{
                 type: Input
@@ -2250,12 +1232,12 @@ class HREventsPopupComponent {
     onPopupClose() {
         this.closed.emit();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: HREventsPopupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: HREventsPopupComponent, isStandalone: true, selector: "hr-upcoming-events-popup", inputs: { visible: "visible", events: "events", hasBirthdays: "hasBirthdays", hasHolidays: "hasHolidays", isLoading: "isLoading", selectedLanguage: "selectedLanguage", showProperty: "showProperty", weekendWarningDescription: "weekendWarningDescription", popupTitle: "popupTitle", selectedEventType: "selectedEventType", tabSelectedClass: "tabSelectedClass", tabNotSelectedClass: "tabNotSelectedClass", tabTextSelectedClass: "tabTextSelectedClass", tabTextNotSelectedClass: "tabTextNotSelectedClass", tabContainerClass: "tabContainerClass", tabItemClass: "tabItemClass", tabTextClass: "tabTextClass", tabIconClass: "tabIconClass", eventIconClass: "eventIconClass", eventNameBoldClass: "eventNameBoldClass", eventDescriptionClass: "eventDescriptionClass", propertyBadgeClass: "propertyBadgeClass", noEventsTextClass: "noEventsTextClass", warningTextClass: "warningTextClass", dateFormat: "dateFormat" }, outputs: { visibleChange: "visibleChange", tabSelected: "tabSelected", closed: "closed" }, ngImport: i0, template: "<dx-popup id=\"popup\"\r\n          [(visible)]=\"visible\"\r\n          [height]=\"'400'\"\r\n          [maxHeight]=\"400\"\r\n          [width]=\"'650'\"\r\n          shadingColor=\"rgba(0,0,0,0.4)\"\r\n          contentTemplate=\"popup-content\"\r\n          [showCloseButton]=\"true\"\r\n          [title]=\"popupTitle\"\r\n          (onHiding)=\"onPopupClose()\"\r\n          (visibleChange)=\"visibleChange.emit($event)\">\r\n\r\n  <div class=\"text-dark\" *dxTemplate=\"let data of 'popup-content'\">\r\n    <dx-scroll-view #upcomingEventsScrollView\r\n                    id=\"upcomingEventsScrollView\"\r\n                    [scrollByContent]=\"true\"\r\n                    [scrollByThumb]=\"true\"\r\n                    [showScrollbar]=\"'onScroll'\"\r\n                    [bounceEnabled]=\"false\">\r\n\r\n      @if (hasBirthdays || hasHolidays) {\r\n      <hr-event-tab-bar [selectedType]=\"selectedEventType\"\r\n                           [selectedLanguage]=\"selectedLanguage\"\r\n                           [tabSelectedClass]=\"tabSelectedClass\"\r\n                           [tabNotSelectedClass]=\"tabNotSelectedClass\"\r\n                           [tabTextSelectedClass]=\"tabTextSelectedClass\"\r\n                           [tabTextNotSelectedClass]=\"tabTextNotSelectedClass\"\r\n                           [containerClass]=\"tabContainerClass\"\r\n                           [tabItemClass]=\"tabItemClass\"\r\n                           [tabTextClass]=\"tabTextClass\"\r\n                           [tabIconClass]=\"tabIconClass\"\r\n                           (tabSelected)=\"onTabSelected($event)\">\r\n      </hr-event-tab-bar>\r\n\r\n      <hr-event-item [events]=\"events\"\r\n                        [showDates]=\"true\"\r\n                        [showProperty]=\"showProperty\"\r\n                        [selectedLanguage]=\"selectedLanguage\"\r\n                        [selectedEventType]=\"selectedEventType\"\r\n                        [weekendWarningDescription]=\"weekendWarningDescription\"\r\n                        [eventIconClass]=\"eventIconClass\"\r\n                        [eventNameBoldClass]=\"eventNameBoldClass\"\r\n                        [eventDescriptionClass]=\"eventDescriptionClass\"\r\n                        [propertyBadgeClass]=\"propertyBadgeClass\"\r\n                        [noEventsTextClass]=\"noEventsTextClass\"\r\n                        [warningTextClass]=\"warningTextClass\"\r\n                        [dateFormat]=\"dateFormat\">\r\n      </hr-event-item>\r\n      } @else {\r\n      <div [class]=\"noEventsTextClass\">{{ 'NoEvents' | HRTranslate }}</div>\r\n      }\r\n    </dx-scroll-view>\r\n  </div>\r\n</dx-popup>\r\n\r\n<dx-load-panel shadingColor=\"rgba(0,0,0,0.4)\"\r\n               [visible]=\"isLoading\"\r\n               [showIndicator]=\"true\" [showPane]=\"true\"\r\n               [shading]=\"true\" [hideOnOutsideClick]=\"false\">\r\n</dx-load-panel>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: DxPopupModule }, { kind: "component", type: i1$1.DxPopupComponent, selector: "dx-popup", inputs: ["accessKey", "animation", "closeOnOutsideClick", "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", "closeOnOutsideClickChange", "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$1.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { kind: "ngmodule", type: DxScrollViewModule }, { kind: "component", type: i1$1.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: "ngmodule", type: DxLoadPanelModule }, { kind: "component", type: i1$1.DxLoadPanelComponent, selector: "dx-load-panel", inputs: ["animation", "closeOnOutsideClick", "container", "deferRendering", "delay", "focusStateEnabled", "height", "hideOnOutsideClick", "hideOnParentScroll", "hint", "hoverStateEnabled", "indicatorSrc", "maxHeight", "maxWidth", "message", "minHeight", "minWidth", "position", "rtlEnabled", "shading", "shadingColor", "showIndicator", "showPane", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onShowing", "onShown", "animationChange", "closeOnOutsideClickChange", "containerChange", "deferRenderingChange", "delayChange", "focusStateEnabledChange", "heightChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "indicatorSrcChange", "maxHeightChange", "maxWidthChange", "messageChange", "minHeightChange", "minWidthChange", "positionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showIndicatorChange", "showPaneChange", "visibleChange", "widthChange", "wrapperAttrChange"] }, { kind: "component", type: HREventItemComponent, selector: "hr-event-item", inputs: ["events", "showDates", "showProperty", "selectedLanguage", "selectedEventType", "weekendWarningDescription", "eventIconClass", "eventNameBoldClass", "eventDescriptionClass", "propertyBadgeClass", "noEventsTextClass", "warningTextClass", "dateFormat"] }, { kind: "component", type: HREventTabBarComponent, selector: "hr-event-tab-bar", inputs: ["selectedType", "selectedLanguage", "tabSelectedClass", "tabNotSelectedClass", "tabTextSelectedClass", "tabTextNotSelectedClass", "containerClass", "tabItemClass", "tabTextClass", "tabIconClass"], outputs: ["tabSelected"] }, { kind: "pipe", type: HRTranslatePipe, name: "HRTranslate" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: HREventsPopupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: HREventsPopupComponent, isStandalone: true, selector: "hr-upcoming-events-popup", inputs: { visible: "visible", events: "events", hasBirthdays: "hasBirthdays", hasHolidays: "hasHolidays", isLoading: "isLoading", selectedLanguage: "selectedLanguage", showProperty: "showProperty", weekendWarningDescription: "weekendWarningDescription", popupTitle: "popupTitle", selectedEventType: "selectedEventType", tabSelectedClass: "tabSelectedClass", tabNotSelectedClass: "tabNotSelectedClass", tabTextSelectedClass: "tabTextSelectedClass", tabTextNotSelectedClass: "tabTextNotSelectedClass", tabContainerClass: "tabContainerClass", tabItemClass: "tabItemClass", tabTextClass: "tabTextClass", tabIconClass: "tabIconClass", eventIconClass: "eventIconClass", eventNameBoldClass: "eventNameBoldClass", eventDescriptionClass: "eventDescriptionClass", propertyBadgeClass: "propertyBadgeClass", noEventsTextClass: "noEventsTextClass", warningTextClass: "warningTextClass", dateFormat: "dateFormat" }, outputs: { visibleChange: "visibleChange", tabSelected: "tabSelected", closed: "closed" }, ngImport: i0, template: "<dx-popup id=\"popup\"\r\n          [(visible)]=\"visible\"\r\n          [height]=\"'400'\"\r\n          [maxHeight]=\"400\"\r\n          [width]=\"'650'\"\r\n          shadingColor=\"rgba(0,0,0,0.4)\"\r\n          contentTemplate=\"popup-content\"\r\n          [showCloseButton]=\"true\"\r\n          [title]=\"popupTitle\"\r\n          (onHiding)=\"onPopupClose()\"\r\n          (visibleChange)=\"visibleChange.emit($event)\">\r\n\r\n  <div class=\"text-dark\" *dxTemplate=\"let data of 'popup-content'\">\r\n    <dx-scroll-view #upcomingEventsScrollView\r\n                    id=\"upcomingEventsScrollView\"\r\n                    [scrollByContent]=\"true\"\r\n                    [scrollByThumb]=\"true\"\r\n                    [showScrollbar]=\"'onScroll'\"\r\n                    [bounceEnabled]=\"false\">\r\n\r\n      @if (hasBirthdays || hasHolidays) {\r\n      <hr-event-tab-bar [selectedType]=\"selectedEventType\"\r\n                           [selectedLanguage]=\"selectedLanguage\"\r\n                           [tabSelectedClass]=\"tabSelectedClass\"\r\n                           [tabNotSelectedClass]=\"tabNotSelectedClass\"\r\n                           [tabTextSelectedClass]=\"tabTextSelectedClass\"\r\n                           [tabTextNotSelectedClass]=\"tabTextNotSelectedClass\"\r\n                           [containerClass]=\"tabContainerClass\"\r\n                           [tabItemClass]=\"tabItemClass\"\r\n                           [tabTextClass]=\"tabTextClass\"\r\n                           [tabIconClass]=\"tabIconClass\"\r\n                           (tabSelected)=\"onTabSelected($event)\">\r\n      </hr-event-tab-bar>\r\n\r\n      <hr-event-item [events]=\"events\"\r\n                        [showDates]=\"true\"\r\n                        [showProperty]=\"showProperty\"\r\n                        [selectedLanguage]=\"selectedLanguage\"\r\n                        [selectedEventType]=\"selectedEventType\"\r\n                        [weekendWarningDescription]=\"weekendWarningDescription\"\r\n                        [eventIconClass]=\"eventIconClass\"\r\n                        [eventNameBoldClass]=\"eventNameBoldClass\"\r\n                        [eventDescriptionClass]=\"eventDescriptionClass\"\r\n                        [propertyBadgeClass]=\"propertyBadgeClass\"\r\n                        [noEventsTextClass]=\"noEventsTextClass\"\r\n                        [warningTextClass]=\"warningTextClass\"\r\n                        [dateFormat]=\"dateFormat\">\r\n      </hr-event-item>\r\n      } @else {\r\n      <div [class]=\"noEventsTextClass\">{{ 'NoEvents' | translate }}</div>\r\n      }\r\n    </dx-scroll-view>\r\n  </div>\r\n</dx-popup>\r\n\r\n<dx-load-panel shadingColor=\"rgba(0,0,0,0.4)\"\r\n               [visible]=\"isLoading\"\r\n               [showIndicator]=\"true\" [showPane]=\"true\"\r\n               [shading]=\"true\" [hideOnOutsideClick]=\"false\">\r\n</dx-load-panel>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: DxPopupModule }, { kind: "component", type: i1$1.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$2.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { kind: "ngmodule", type: DxScrollViewModule }, { kind: "component", type: i1$1.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: "ngmodule", type: DxLoadPanelModule }, { kind: "component", type: i1$1.DxLoadPanelComponent, selector: "dx-load-panel", inputs: ["animation", "container", "deferRendering", "delay", "focusStateEnabled", "height", "hideOnOutsideClick", "hideOnParentScroll", "hint", "hoverStateEnabled", "indicatorOptions", "indicatorSrc", "maxHeight", "maxWidth", "message", "minHeight", "minWidth", "position", "rtlEnabled", "shading", "shadingColor", "showIndicator", "showPane", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onShowing", "onShown", "animationChange", "containerChange", "deferRenderingChange", "delayChange", "focusStateEnabledChange", "heightChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "indicatorOptionsChange", "indicatorSrcChange", "maxHeightChange", "maxWidthChange", "messageChange", "minHeightChange", "minWidthChange", "positionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showIndicatorChange", "showPaneChange", "visibleChange", "widthChange", "wrapperAttrChange"] }, { kind: "component", type: HREventItemComponent, selector: "hr-event-item", inputs: ["events", "showDates", "showProperty", "selectedLanguage", "selectedEventType", "weekendWarningDescription", "eventIconClass", "eventNameBoldClass", "eventDescriptionClass", "propertyBadgeClass", "noEventsTextClass", "warningTextClass", "dateFormat"] }, { kind: "component", type: HREventTabBarComponent, selector: "hr-event-tab-bar", inputs: ["selectedType", "selectedLanguage", "tabSelectedClass", "tabNotSelectedClass", "tabTextSelectedClass", "tabTextNotSelectedClass", "containerClass", "tabItemClass", "tabTextClass", "tabIconClass"], outputs: ["tabSelected"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: HREventsPopupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: HREventsPopupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'hr-upcoming-events-popup', standalone: true, imports: [CommonModule, DxPopupModule, DxScrollViewModule, DxLoadPanelModule, HREventItemComponent, HREventTabBarComponent, HRTranslatePipe], template: "<dx-popup id=\"popup\"\r\n          [(visible)]=\"visible\"\r\n          [height]=\"'400'\"\r\n          [maxHeight]=\"400\"\r\n          [width]=\"'650'\"\r\n          shadingColor=\"rgba(0,0,0,0.4)\"\r\n          contentTemplate=\"popup-content\"\r\n          [showCloseButton]=\"true\"\r\n          [title]=\"popupTitle\"\r\n          (onHiding)=\"onPopupClose()\"\r\n          (visibleChange)=\"visibleChange.emit($event)\">\r\n\r\n  <div class=\"text-dark\" *dxTemplate=\"let data of 'popup-content'\">\r\n    <dx-scroll-view #upcomingEventsScrollView\r\n                    id=\"upcomingEventsScrollView\"\r\n                    [scrollByContent]=\"true\"\r\n                    [scrollByThumb]=\"true\"\r\n                    [showScrollbar]=\"'onScroll'\"\r\n                    [bounceEnabled]=\"false\">\r\n\r\n      @if (hasBirthdays || hasHolidays) {\r\n      <hr-event-tab-bar [selectedType]=\"selectedEventType\"\r\n                           [selectedLanguage]=\"selectedLanguage\"\r\n                           [tabSelectedClass]=\"tabSelectedClass\"\r\n                           [tabNotSelectedClass]=\"tabNotSelectedClass\"\r\n                           [tabTextSelectedClass]=\"tabTextSelectedClass\"\r\n                           [tabTextNotSelectedClass]=\"tabTextNotSelectedClass\"\r\n                           [containerClass]=\"tabContainerClass\"\r\n                           [tabItemClass]=\"tabItemClass\"\r\n                           [tabTextClass]=\"tabTextClass\"\r\n                           [tabIconClass]=\"tabIconClass\"\r\n                           (tabSelected)=\"onTabSelected($event)\">\r\n      </hr-event-tab-bar>\r\n\r\n      <hr-event-item [events]=\"events\"\r\n                        [showDates]=\"true\"\r\n                        [showProperty]=\"showProperty\"\r\n                        [selectedLanguage]=\"selectedLanguage\"\r\n                        [selectedEventType]=\"selectedEventType\"\r\n                        [weekendWarningDescription]=\"weekendWarningDescription\"\r\n                        [eventIconClass]=\"eventIconClass\"\r\n                        [eventNameBoldClass]=\"eventNameBoldClass\"\r\n                        [eventDescriptionClass]=\"eventDescriptionClass\"\r\n                        [propertyBadgeClass]=\"propertyBadgeClass\"\r\n                        [noEventsTextClass]=\"noEventsTextClass\"\r\n                        [warningTextClass]=\"warningTextClass\"\r\n                        [dateFormat]=\"dateFormat\">\r\n      </hr-event-item>\r\n      } @else {\r\n      <div [class]=\"noEventsTextClass\">{{ 'NoEvents' | HRTranslate }}</div>\r\n      }\r\n    </dx-scroll-view>\r\n  </div>\r\n</dx-popup>\r\n\r\n<dx-load-panel shadingColor=\"rgba(0,0,0,0.4)\"\r\n               [visible]=\"isLoading\"\r\n               [showIndicator]=\"true\" [showPane]=\"true\"\r\n               [shading]=\"true\" [hideOnOutsideClick]=\"false\">\r\n</dx-load-panel>\r\n" }]
+            args: [{ selector: 'hr-upcoming-events-popup', standalone: true, imports: [CommonModule, DxPopupModule, DxScrollViewModule, DxLoadPanelModule, HREventItemComponent, HREventTabBarComponent, TranslatePipe], template: "<dx-popup id=\"popup\"\r\n          [(visible)]=\"visible\"\r\n          [height]=\"'400'\"\r\n          [maxHeight]=\"400\"\r\n          [width]=\"'650'\"\r\n          shadingColor=\"rgba(0,0,0,0.4)\"\r\n          contentTemplate=\"popup-content\"\r\n          [showCloseButton]=\"true\"\r\n          [title]=\"popupTitle\"\r\n          (onHiding)=\"onPopupClose()\"\r\n          (visibleChange)=\"visibleChange.emit($event)\">\r\n\r\n  <div class=\"text-dark\" *dxTemplate=\"let data of 'popup-content'\">\r\n    <dx-scroll-view #upcomingEventsScrollView\r\n                    id=\"upcomingEventsScrollView\"\r\n                    [scrollByContent]=\"true\"\r\n                    [scrollByThumb]=\"true\"\r\n                    [showScrollbar]=\"'onScroll'\"\r\n                    [bounceEnabled]=\"false\">\r\n\r\n      @if (hasBirthdays || hasHolidays) {\r\n      <hr-event-tab-bar [selectedType]=\"selectedEventType\"\r\n                           [selectedLanguage]=\"selectedLanguage\"\r\n                           [tabSelectedClass]=\"tabSelectedClass\"\r\n                           [tabNotSelectedClass]=\"tabNotSelectedClass\"\r\n                           [tabTextSelectedClass]=\"tabTextSelectedClass\"\r\n                           [tabTextNotSelectedClass]=\"tabTextNotSelectedClass\"\r\n                           [containerClass]=\"tabContainerClass\"\r\n                           [tabItemClass]=\"tabItemClass\"\r\n                           [tabTextClass]=\"tabTextClass\"\r\n                           [tabIconClass]=\"tabIconClass\"\r\n                           (tabSelected)=\"onTabSelected($event)\">\r\n      </hr-event-tab-bar>\r\n\r\n      <hr-event-item [events]=\"events\"\r\n                        [showDates]=\"true\"\r\n                        [showProperty]=\"showProperty\"\r\n                        [selectedLanguage]=\"selectedLanguage\"\r\n                        [selectedEventType]=\"selectedEventType\"\r\n                        [weekendWarningDescription]=\"weekendWarningDescription\"\r\n                        [eventIconClass]=\"eventIconClass\"\r\n                        [eventNameBoldClass]=\"eventNameBoldClass\"\r\n                        [eventDescriptionClass]=\"eventDescriptionClass\"\r\n                        [propertyBadgeClass]=\"propertyBadgeClass\"\r\n                        [noEventsTextClass]=\"noEventsTextClass\"\r\n                        [warningTextClass]=\"warningTextClass\"\r\n                        [dateFormat]=\"dateFormat\">\r\n      </hr-event-item>\r\n      } @else {\r\n      <div [class]=\"noEventsTextClass\">{{ 'NoEvents' | translate }}</div>\r\n      }\r\n    </dx-scroll-view>\r\n  </div>\r\n</dx-popup>\r\n\r\n<dx-load-panel shadingColor=\"rgba(0,0,0,0.4)\"\r\n               [visible]=\"isLoading\"\r\n               [showIndicator]=\"true\" [showPane]=\"true\"\r\n               [shading]=\"true\" [hideOnOutsideClick]=\"false\">\r\n</dx-load-panel>\r\n" }]
         }], propDecorators: { visible: [{
                 type: Input
             }], events: [{
@@ -2451,12 +1433,12 @@ class MyUpcomingEventsWidgetComponent {
             Description: h.WeekContext.toString()
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MyUpcomingEventsWidgetComponent, deps: [{ token: HRSelfWidgetsService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: MyUpcomingEventsWidgetComponent, isStandalone: true, selector: "hr-my-upcoming-events-widget", inputs: { baseUrl: "baseUrl", weekendWarningDescription: "weekendWarningDescription", selectedLanguage: "selectedLanguage", showProperty: "showProperty", cardClass: "cardClass", noEventsTextClass: "noEventsTextClass", viewAllLinkClass: "viewAllLinkClass", viewAllContainerClass: "viewAllContainerClass", warningTextClass: "warningTextClass", tabSelectedClass: "tabSelectedClass", tabNotSelectedClass: "tabNotSelectedClass", tabTextSelectedClass: "tabTextSelectedClass", tabTextNotSelectedClass: "tabTextNotSelectedClass", tabContainerClass: "tabContainerClass", tabItemClass: "tabItemClass", tabTextClass: "tabTextClass", tabIconClass: "tabIconClass", eventIconClass: "eventIconClass", eventNameBoldClass: "eventNameBoldClass", eventDescriptionClass: "eventDescriptionClass", propertyBadgeClass: "propertyBadgeClass", dateFormat: "dateFormat", externalViewAll: "externalViewAll" }, outputs: { isLoadingChanged: "isLoadingChanged", viewAllClicked: "viewAllClicked" }, ngImport: i0, template: "<!-- Card View -->\r\n<div [class]=\"cardClass\">\r\n  <hr-card-header [icon]=\"calendarStar\" [title]=\"'UpcomingEvents' | HRTranslate\"></hr-card-header>\r\n\r\n  @if (birthdays.length > 0 || holidays.length > 0) {\r\n  <hr-event-tab-bar\r\n    [selectedType]=\"selectedEventType\"\r\n    [selectedLanguage]=\"selectedLanguage\"\r\n    [tabSelectedClass]=\"tabSelectedClass\"\r\n    [tabNotSelectedClass]=\"tabNotSelectedClass\"\r\n    [tabTextSelectedClass]=\"tabTextSelectedClass\"\r\n    [tabTextNotSelectedClass]=\"tabTextNotSelectedClass\"\r\n    [containerClass]=\"tabContainerClass\"\r\n    [tabItemClass]=\"tabItemClass\"\r\n    [tabTextClass]=\"tabTextClass\"\r\n    [tabIconClass]=\"tabIconClass\"\r\n    (tabSelected)=\"onTabClick($event)\">\r\n  </hr-event-tab-bar>\r\n\r\n  <hr-event-item\r\n    [events]=\"filteredEvents\"\r\n    [showDates]=\"false\"\r\n    [showProperty]=\"showProperty\"\r\n    [selectedLanguage]=\"selectedLanguage\"\r\n    [selectedEventType]=\"selectedEventType\"\r\n    [weekendWarningDescription]=\"weekendWarning\"\r\n    [eventIconClass]=\"eventIconClass\"\r\n    [eventNameBoldClass]=\"eventNameBoldClass\"\r\n    [eventDescriptionClass]=\"eventDescriptionClass\"\r\n    [propertyBadgeClass]=\"propertyBadgeClass\"\r\n    [noEventsTextClass]=\"noEventsTextClass\"\r\n    [warningTextClass]=\"warningTextClass\"\r\n    [dateFormat]=\"dateFormat\">\r\n  </hr-event-item>\r\n\r\n  <div [class]=\"viewAllContainerClass\">\r\n    <a [class]=\"viewAllLinkClass\" (click)=\"showPopup()\">{{ 'ViewAll' | HRTranslate }}</a>\r\n  </div>\r\n  } @else {\r\n  <div [class]=\"noEventsTextClass\">{{ 'NoEvents' | HRTranslate }}</div>\r\n  }\r\n</div>\r\n\r\n<!-- Popup -->\r\n<hr-upcoming-events-popup\r\n  [visible]=\"popupVisible\"\r\n  [events]=\"popupEvents\"\r\n  [hasBirthdays]=\"birthdays.length > 0\"\r\n  [hasHolidays]=\"holidays.length > 0\"\r\n  [isLoading]=\"false\"\r\n  [selectedLanguage]=\"selectedLanguage\"\r\n  [showProperty]=\"showProperty\"\r\n  [weekendWarningDescription]=\"weekendWarning\"\r\n  [popupTitle]=\"'UpcomingEvents' | HRTranslate\"\r\n  [selectedEventType]=\"selectedPopupEventType\"\r\n  [tabSelectedClass]=\"tabSelectedClass\"\r\n  [tabNotSelectedClass]=\"tabNotSelectedClass\"\r\n  [tabTextSelectedClass]=\"tabTextSelectedClass\"\r\n  [tabTextNotSelectedClass]=\"tabTextNotSelectedClass\"\r\n  [tabContainerClass]=\"tabContainerClass\"\r\n  [tabItemClass]=\"tabItemClass\"\r\n  [tabTextClass]=\"tabTextClass\"\r\n  [tabIconClass]=\"tabIconClass\"\r\n  [eventIconClass]=\"eventIconClass\"\r\n  [eventNameBoldClass]=\"eventNameBoldClass\"\r\n  [eventDescriptionClass]=\"eventDescriptionClass\"\r\n  [propertyBadgeClass]=\"propertyBadgeClass\"\r\n  [noEventsTextClass]=\"noEventsTextClass\"\r\n  [warningTextClass]=\"warningTextClass\"\r\n  [dateFormat]=\"dateFormat\"\r\n  (visibleChange)=\"popupVisible = $event\"\r\n  (tabSelected)=\"onPopupTabClick($event)\"\r\n  (closed)=\"onPopupClose()\">\r\n</hr-upcoming-events-popup>\r\n", dependencies: [{ kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: HRCardHeaderComponent, selector: "hr-card-header", inputs: ["icon", "title", "containerClass", "iconClass", "titleClass"] }, { kind: "component", type: HREventItemComponent, selector: "hr-event-item", inputs: ["events", "showDates", "showProperty", "selectedLanguage", "selectedEventType", "weekendWarningDescription", "eventIconClass", "eventNameBoldClass", "eventDescriptionClass", "propertyBadgeClass", "noEventsTextClass", "warningTextClass", "dateFormat"] }, { kind: "component", type: HREventTabBarComponent, selector: "hr-event-tab-bar", inputs: ["selectedType", "selectedLanguage", "tabSelectedClass", "tabNotSelectedClass", "tabTextSelectedClass", "tabTextNotSelectedClass", "containerClass", "tabItemClass", "tabTextClass", "tabIconClass"], outputs: ["tabSelected"] }, { kind: "component", type: HREventsPopupComponent, selector: "hr-upcoming-events-popup", inputs: ["visible", "events", "hasBirthdays", "hasHolidays", "isLoading", "selectedLanguage", "showProperty", "weekendWarningDescription", "popupTitle", "selectedEventType", "tabSelectedClass", "tabNotSelectedClass", "tabTextSelectedClass", "tabTextNotSelectedClass", "tabContainerClass", "tabItemClass", "tabTextClass", "tabIconClass", "eventIconClass", "eventNameBoldClass", "eventDescriptionClass", "propertyBadgeClass", "noEventsTextClass", "warningTextClass", "dateFormat"], outputs: ["visibleChange", "tabSelected", "closed"] }, { kind: "pipe", type: HRTranslatePipe, name: "HRTranslate" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MyUpcomingEventsWidgetComponent, deps: [{ token: HRSelfWidgetsService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: MyUpcomingEventsWidgetComponent, isStandalone: true, selector: "hr-my-upcoming-events-widget", inputs: { baseUrl: "baseUrl", weekendWarningDescription: "weekendWarningDescription", selectedLanguage: "selectedLanguage", showProperty: "showProperty", cardClass: "cardClass", noEventsTextClass: "noEventsTextClass", viewAllLinkClass: "viewAllLinkClass", viewAllContainerClass: "viewAllContainerClass", warningTextClass: "warningTextClass", tabSelectedClass: "tabSelectedClass", tabNotSelectedClass: "tabNotSelectedClass", tabTextSelectedClass: "tabTextSelectedClass", tabTextNotSelectedClass: "tabTextNotSelectedClass", tabContainerClass: "tabContainerClass", tabItemClass: "tabItemClass", tabTextClass: "tabTextClass", tabIconClass: "tabIconClass", eventIconClass: "eventIconClass", eventNameBoldClass: "eventNameBoldClass", eventDescriptionClass: "eventDescriptionClass", propertyBadgeClass: "propertyBadgeClass", dateFormat: "dateFormat", externalViewAll: "externalViewAll" }, outputs: { isLoadingChanged: "isLoadingChanged", viewAllClicked: "viewAllClicked" }, ngImport: i0, template: "<!-- Card View -->\r\n<div [class]=\"cardClass\">\r\n  <hr-card-header [icon]=\"calendarStar\" [title]=\"'UpcomingEvents' | translate\"></hr-card-header>\r\n\r\n  @if (birthdays.length > 0 || holidays.length > 0) {\r\n  <hr-event-tab-bar\r\n    [selectedType]=\"selectedEventType\"\r\n    [selectedLanguage]=\"selectedLanguage\"\r\n    [tabSelectedClass]=\"tabSelectedClass\"\r\n    [tabNotSelectedClass]=\"tabNotSelectedClass\"\r\n    [tabTextSelectedClass]=\"tabTextSelectedClass\"\r\n    [tabTextNotSelectedClass]=\"tabTextNotSelectedClass\"\r\n    [containerClass]=\"tabContainerClass\"\r\n    [tabItemClass]=\"tabItemClass\"\r\n    [tabTextClass]=\"tabTextClass\"\r\n    [tabIconClass]=\"tabIconClass\"\r\n    (tabSelected)=\"onTabClick($event)\">\r\n  </hr-event-tab-bar>\r\n\r\n  <hr-event-item\r\n    [events]=\"filteredEvents\"\r\n    [showDates]=\"false\"\r\n    [showProperty]=\"showProperty\"\r\n    [selectedLanguage]=\"selectedLanguage\"\r\n    [selectedEventType]=\"selectedEventType\"\r\n    [weekendWarningDescription]=\"weekendWarning\"\r\n    [eventIconClass]=\"eventIconClass\"\r\n    [eventNameBoldClass]=\"eventNameBoldClass\"\r\n    [eventDescriptionClass]=\"eventDescriptionClass\"\r\n    [propertyBadgeClass]=\"propertyBadgeClass\"\r\n    [noEventsTextClass]=\"noEventsTextClass\"\r\n    [warningTextClass]=\"warningTextClass\"\r\n    [dateFormat]=\"dateFormat\">\r\n  </hr-event-item>\r\n\r\n  <div [class]=\"viewAllContainerClass\">\r\n    <a [class]=\"viewAllLinkClass\" (click)=\"showPopup()\">{{ 'ViewAll' | translate }}</a>\r\n  </div>\r\n  } @else {\r\n  <div [class]=\"noEventsTextClass\">{{ 'NoEvents' | translate }}</div>\r\n  }\r\n</div>\r\n\r\n<!-- Popup -->\r\n<hr-upcoming-events-popup\r\n  [visible]=\"popupVisible\"\r\n  [events]=\"popupEvents\"\r\n  [hasBirthdays]=\"birthdays.length > 0\"\r\n  [hasHolidays]=\"holidays.length > 0\"\r\n  [isLoading]=\"false\"\r\n  [selectedLanguage]=\"selectedLanguage\"\r\n  [showProperty]=\"showProperty\"\r\n  [weekendWarningDescription]=\"weekendWarning\"\r\n  [popupTitle]=\"'UpcomingEvents' | translate\"\r\n  [selectedEventType]=\"selectedPopupEventType\"\r\n  [tabSelectedClass]=\"tabSelectedClass\"\r\n  [tabNotSelectedClass]=\"tabNotSelectedClass\"\r\n  [tabTextSelectedClass]=\"tabTextSelectedClass\"\r\n  [tabTextNotSelectedClass]=\"tabTextNotSelectedClass\"\r\n  [tabContainerClass]=\"tabContainerClass\"\r\n  [tabItemClass]=\"tabItemClass\"\r\n  [tabTextClass]=\"tabTextClass\"\r\n  [tabIconClass]=\"tabIconClass\"\r\n  [eventIconClass]=\"eventIconClass\"\r\n  [eventNameBoldClass]=\"eventNameBoldClass\"\r\n  [eventDescriptionClass]=\"eventDescriptionClass\"\r\n  [propertyBadgeClass]=\"propertyBadgeClass\"\r\n  [noEventsTextClass]=\"noEventsTextClass\"\r\n  [warningTextClass]=\"warningTextClass\"\r\n  [dateFormat]=\"dateFormat\"\r\n  (visibleChange)=\"popupVisible = $event\"\r\n  (tabSelected)=\"onPopupTabClick($event)\"\r\n  (closed)=\"onPopupClose()\">\r\n</hr-upcoming-events-popup>\r\n", dependencies: [{ kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: HRCardHeaderComponent, selector: "hr-card-header", inputs: ["icon", "title", "containerClass", "iconClass", "titleClass"] }, { kind: "component", type: HREventItemComponent, selector: "hr-event-item", inputs: ["events", "showDates", "showProperty", "selectedLanguage", "selectedEventType", "weekendWarningDescription", "eventIconClass", "eventNameBoldClass", "eventDescriptionClass", "propertyBadgeClass", "noEventsTextClass", "warningTextClass", "dateFormat"] }, { kind: "component", type: HREventTabBarComponent, selector: "hr-event-tab-bar", inputs: ["selectedType", "selectedLanguage", "tabSelectedClass", "tabNotSelectedClass", "tabTextSelectedClass", "tabTextNotSelectedClass", "containerClass", "tabItemClass", "tabTextClass", "tabIconClass"], outputs: ["tabSelected"] }, { kind: "component", type: HREventsPopupComponent, selector: "hr-upcoming-events-popup", inputs: ["visible", "events", "hasBirthdays", "hasHolidays", "isLoading", "selectedLanguage", "showProperty", "weekendWarningDescription", "popupTitle", "selectedEventType", "tabSelectedClass", "tabNotSelectedClass", "tabTextSelectedClass", "tabTextNotSelectedClass", "tabContainerClass", "tabItemClass", "tabTextClass", "tabIconClass", "eventIconClass", "eventNameBoldClass", "eventDescriptionClass", "propertyBadgeClass", "noEventsTextClass", "warningTextClass", "dateFormat"], outputs: ["visibleChange", "tabSelected", "closed"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MyUpcomingEventsWidgetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MyUpcomingEventsWidgetComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'hr-my-upcoming-events-widget', standalone: true, imports: [FontAwesomeModule, HRCardHeaderComponent, HREventItemComponent, HREventTabBarComponent, HREventsPopupComponent, HRTranslatePipe], template: "<!-- Card View -->\r\n<div [class]=\"cardClass\">\r\n  <hr-card-header [icon]=\"calendarStar\" [title]=\"'UpcomingEvents' | HRTranslate\"></hr-card-header>\r\n\r\n  @if (birthdays.length > 0 || holidays.length > 0) {\r\n  <hr-event-tab-bar\r\n    [selectedType]=\"selectedEventType\"\r\n    [selectedLanguage]=\"selectedLanguage\"\r\n    [tabSelectedClass]=\"tabSelectedClass\"\r\n    [tabNotSelectedClass]=\"tabNotSelectedClass\"\r\n    [tabTextSelectedClass]=\"tabTextSelectedClass\"\r\n    [tabTextNotSelectedClass]=\"tabTextNotSelectedClass\"\r\n    [containerClass]=\"tabContainerClass\"\r\n    [tabItemClass]=\"tabItemClass\"\r\n    [tabTextClass]=\"tabTextClass\"\r\n    [tabIconClass]=\"tabIconClass\"\r\n    (tabSelected)=\"onTabClick($event)\">\r\n  </hr-event-tab-bar>\r\n\r\n  <hr-event-item\r\n    [events]=\"filteredEvents\"\r\n    [showDates]=\"false\"\r\n    [showProperty]=\"showProperty\"\r\n    [selectedLanguage]=\"selectedLanguage\"\r\n    [selectedEventType]=\"selectedEventType\"\r\n    [weekendWarningDescription]=\"weekendWarning\"\r\n    [eventIconClass]=\"eventIconClass\"\r\n    [eventNameBoldClass]=\"eventNameBoldClass\"\r\n    [eventDescriptionClass]=\"eventDescriptionClass\"\r\n    [propertyBadgeClass]=\"propertyBadgeClass\"\r\n    [noEventsTextClass]=\"noEventsTextClass\"\r\n    [warningTextClass]=\"warningTextClass\"\r\n    [dateFormat]=\"dateFormat\">\r\n  </hr-event-item>\r\n\r\n  <div [class]=\"viewAllContainerClass\">\r\n    <a [class]=\"viewAllLinkClass\" (click)=\"showPopup()\">{{ 'ViewAll' | HRTranslate }}</a>\r\n  </div>\r\n  } @else {\r\n  <div [class]=\"noEventsTextClass\">{{ 'NoEvents' | HRTranslate }}</div>\r\n  }\r\n</div>\r\n\r\n<!-- Popup -->\r\n<hr-upcoming-events-popup\r\n  [visible]=\"popupVisible\"\r\n  [events]=\"popupEvents\"\r\n  [hasBirthdays]=\"birthdays.length > 0\"\r\n  [hasHolidays]=\"holidays.length > 0\"\r\n  [isLoading]=\"false\"\r\n  [selectedLanguage]=\"selectedLanguage\"\r\n  [showProperty]=\"showProperty\"\r\n  [weekendWarningDescription]=\"weekendWarning\"\r\n  [popupTitle]=\"'UpcomingEvents' | HRTranslate\"\r\n  [selectedEventType]=\"selectedPopupEventType\"\r\n  [tabSelectedClass]=\"tabSelectedClass\"\r\n  [tabNotSelectedClass]=\"tabNotSelectedClass\"\r\n  [tabTextSelectedClass]=\"tabTextSelectedClass\"\r\n  [tabTextNotSelectedClass]=\"tabTextNotSelectedClass\"\r\n  [tabContainerClass]=\"tabContainerClass\"\r\n  [tabItemClass]=\"tabItemClass\"\r\n  [tabTextClass]=\"tabTextClass\"\r\n  [tabIconClass]=\"tabIconClass\"\r\n  [eventIconClass]=\"eventIconClass\"\r\n  [eventNameBoldClass]=\"eventNameBoldClass\"\r\n  [eventDescriptionClass]=\"eventDescriptionClass\"\r\n  [propertyBadgeClass]=\"propertyBadgeClass\"\r\n  [noEventsTextClass]=\"noEventsTextClass\"\r\n  [warningTextClass]=\"warningTextClass\"\r\n  [dateFormat]=\"dateFormat\"\r\n  (visibleChange)=\"popupVisible = $event\"\r\n  (tabSelected)=\"onPopupTabClick($event)\"\r\n  (closed)=\"onPopupClose()\">\r\n</hr-upcoming-events-popup>\r\n" }]
+            args: [{ selector: 'hr-my-upcoming-events-widget', standalone: true, imports: [FontAwesomeModule, HRCardHeaderComponent, HREventItemComponent, HREventTabBarComponent, HREventsPopupComponent, TranslatePipe], template: "<!-- Card View -->\r\n<div [class]=\"cardClass\">\r\n  <hr-card-header [icon]=\"calendarStar\" [title]=\"'UpcomingEvents' | translate\"></hr-card-header>\r\n\r\n  @if (birthdays.length > 0 || holidays.length > 0) {\r\n  <hr-event-tab-bar\r\n    [selectedType]=\"selectedEventType\"\r\n    [selectedLanguage]=\"selectedLanguage\"\r\n    [tabSelectedClass]=\"tabSelectedClass\"\r\n    [tabNotSelectedClass]=\"tabNotSelectedClass\"\r\n    [tabTextSelectedClass]=\"tabTextSelectedClass\"\r\n    [tabTextNotSelectedClass]=\"tabTextNotSelectedClass\"\r\n    [containerClass]=\"tabContainerClass\"\r\n    [tabItemClass]=\"tabItemClass\"\r\n    [tabTextClass]=\"tabTextClass\"\r\n    [tabIconClass]=\"tabIconClass\"\r\n    (tabSelected)=\"onTabClick($event)\">\r\n  </hr-event-tab-bar>\r\n\r\n  <hr-event-item\r\n    [events]=\"filteredEvents\"\r\n    [showDates]=\"false\"\r\n    [showProperty]=\"showProperty\"\r\n    [selectedLanguage]=\"selectedLanguage\"\r\n    [selectedEventType]=\"selectedEventType\"\r\n    [weekendWarningDescription]=\"weekendWarning\"\r\n    [eventIconClass]=\"eventIconClass\"\r\n    [eventNameBoldClass]=\"eventNameBoldClass\"\r\n    [eventDescriptionClass]=\"eventDescriptionClass\"\r\n    [propertyBadgeClass]=\"propertyBadgeClass\"\r\n    [noEventsTextClass]=\"noEventsTextClass\"\r\n    [warningTextClass]=\"warningTextClass\"\r\n    [dateFormat]=\"dateFormat\">\r\n  </hr-event-item>\r\n\r\n  <div [class]=\"viewAllContainerClass\">\r\n    <a [class]=\"viewAllLinkClass\" (click)=\"showPopup()\">{{ 'ViewAll' | translate }}</a>\r\n  </div>\r\n  } @else {\r\n  <div [class]=\"noEventsTextClass\">{{ 'NoEvents' | translate }}</div>\r\n  }\r\n</div>\r\n\r\n<!-- Popup -->\r\n<hr-upcoming-events-popup\r\n  [visible]=\"popupVisible\"\r\n  [events]=\"popupEvents\"\r\n  [hasBirthdays]=\"birthdays.length > 0\"\r\n  [hasHolidays]=\"holidays.length > 0\"\r\n  [isLoading]=\"false\"\r\n  [selectedLanguage]=\"selectedLanguage\"\r\n  [showProperty]=\"showProperty\"\r\n  [weekendWarningDescription]=\"weekendWarning\"\r\n  [popupTitle]=\"'UpcomingEvents' | translate\"\r\n  [selectedEventType]=\"selectedPopupEventType\"\r\n  [tabSelectedClass]=\"tabSelectedClass\"\r\n  [tabNotSelectedClass]=\"tabNotSelectedClass\"\r\n  [tabTextSelectedClass]=\"tabTextSelectedClass\"\r\n  [tabTextNotSelectedClass]=\"tabTextNotSelectedClass\"\r\n  [tabContainerClass]=\"tabContainerClass\"\r\n  [tabItemClass]=\"tabItemClass\"\r\n  [tabTextClass]=\"tabTextClass\"\r\n  [tabIconClass]=\"tabIconClass\"\r\n  [eventIconClass]=\"eventIconClass\"\r\n  [eventNameBoldClass]=\"eventNameBoldClass\"\r\n  [eventDescriptionClass]=\"eventDescriptionClass\"\r\n  [propertyBadgeClass]=\"propertyBadgeClass\"\r\n  [noEventsTextClass]=\"noEventsTextClass\"\r\n  [warningTextClass]=\"warningTextClass\"\r\n  [dateFormat]=\"dateFormat\"\r\n  (visibleChange)=\"popupVisible = $event\"\r\n  (tabSelected)=\"onPopupTabClick($event)\"\r\n  (closed)=\"onPopupClose()\">\r\n</hr-upcoming-events-popup>\r\n" }]
         }], ctorParameters: () => [{ type: HRSelfWidgetsService }], propDecorators: { baseUrl: [{
                 type: Input
             }], weekendWarningDescription: [{
@@ -2509,28 +1491,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                 type: Input
             }] } });
 
-class HRHighlightPipe {
-    transform(value, args) {
-        if (args && value) {
-            let pattern = args.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, '\\$&');
-            const regex = new RegExp(pattern, 'gi');
-            return value.replace(regex, (match) => `<span class='highlight'>${match}</span>`);
-        }
-        else {
-            return value;
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: HRHighlightPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.21", ngImport: i0, type: HRHighlightPipe, isStandalone: true, name: "HRHighlight" });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: HRHighlightPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'HRHighlight',
-                    standalone: true
-                }]
-        }] });
-
 class HRCommonMethodsService {
     translateService;
     constructor(translateService) {
@@ -2548,22 +1508,22 @@ class HRCommonMethodsService {
     }
     currencyDecimalFormat(value, currencyDecimalsNumber) {
         const currencyDecimalsString = `1.${currencyDecimalsNumber}-${currencyDecimalsNumber}`;
-        const languageCode = this.translateService.getLanguage();
+        const languageCode = this.translateService.getCurrentLang() || 'en';
         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: "19.2.21", ngImport: i0, type: HRCommonMethodsService, deps: [{ token: HRTranslateService }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: HRCommonMethodsService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: HRCommonMethodsService, deps: [{ token: i1$2.TranslateService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: HRCommonMethodsService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: HRCommonMethodsService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: HRCommonMethodsService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: () => [{ type: HRTranslateService }] });
+        }], ctorParameters: () => [{ type: i1$2.TranslateService }] });
 
 class HREmployeeCalendarComponent {
     calendar;
@@ -2684,12 +1644,12 @@ class HREmployeeCalendarComponent {
     preventInteraction(event) {
         event.component.option('value', null);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: HREmployeeCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: HREmployeeCalendarComponent, isStandalone: true, selector: "hr-employee-calendar", inputs: { showEvents: "showEvents", showUpComingVacations: "showUpComingVacations", scheduleCalenderVacation: "scheduleCalenderVacation", minDate: "minDate", maxDate: "maxDate", legendContainerClass: "legendContainerClass", legendRowClass: "legendRowClass", legendItemClass: "legendItemClass", legendDotClass: "legendDotClass", legendLabelClass: "legendLabelClass", publicHolidayDotClass: "publicHolidayDotClass", dayOffDotClass: "dayOffDotClass", eventsDotClass: "eventsDotClass", vacationsContainerClass: "vacationsContainerClass", vacationsItemClass: "vacationsItemClass", vacationsIconClass: "vacationsIconClass", calendarContainerClass: "calendarContainerClass", calendarClass: "calendarClass" }, viewQueries: [{ propertyName: "calendar", first: true, predicate: ["calendar"], descendants: true }], ngImport: i0, template: "<div [class]=\"legendContainerClass\">\r\n  <div [class]=\"legendRowClass\">\r\n    <div [class]=\"legendItemClass + ' me-4'\">\r\n      <div [class]=\"legendDotClass + ' ' + publicHolidayDotClass\"></div>\r\n      <div [class]=\"legendLabelClass\"><p>{{'PublicHoliday' | HRTranslate}}</p></div>\r\n    </div>\r\n    <div [class]=\"legendItemClass\">\r\n      <div [class]=\"legendDotClass + ' ' + dayOffDotClass\"></div>\r\n      <div [class]=\"legendLabelClass\"><p>{{'DayOff' | HRTranslate}}</p></div>\r\n    </div>\r\n    @if(showEvents){\r\n    <div [class]=\"legendItemClass + ' ms-4'\">\r\n      <div [class]=\"legendDotClass + ' ' + eventsDotClass\"></div>\r\n      <div [class]=\"legendLabelClass\"><p>{{'Events' | HRTranslate}}</p></div>\r\n    </div>\r\n    }\r\n  </div>\r\n  @if(showUpComingVacations){\r\n  <div [class]=\"vacationsContainerClass\">\r\n    <div [class]=\"vacationsItemClass\">\r\n      <fa-icon [icon]=\"squreCheckIcon\" [class]=\"vacationsIconClass\"></fa-icon>\r\n      <div [class]=\"legendLabelClass\"><p>{{'ScheduledVacations' | HRTranslate}}</p></div>\r\n    </div>\r\n  </div>\r\n  }\r\n</div>\r\n\r\n  <div [class]=\"calendarContainerClass\">\r\n    <dx-calendar #calendar [class]=\"calendarClass\" [selectionMode]=\"'multiple'\"\r\n                 [cellTemplate]=\"customCellTemplate\"\r\n                 [showWeekNumbers]=\"false\"\r\n                 [min]=\"minDate\"\r\n                 [max]=\"maxDate\"\r\n                 (onValueChanged)=\"preventInteraction($event)\">\r\n    </dx-calendar>\r\n  </div>\r\n", dependencies: [{ kind: "ngmodule", type: DxCalendarModule }, { kind: "component", type: i1$1.DxCalendarComponent, selector: "dx-calendar", inputs: ["accessKey", "activeStateEnabled", "cellTemplate", "dateSerializationFormat", "disabled", "disabledDates", "elementAttr", "firstDayOfWeek", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "isDirty", "isValid", "max", "maxZoomLevel", "min", "minZoomLevel", "name", "readOnly", "rtlEnabled", "selectionMode", "selectWeekOnClick", "showTodayButton", "showWeekNumbers", "tabIndex", "validationError", "validationErrors", "validationMessageMode", "validationMessagePosition", "validationStatus", "value", "visible", "weekNumberRule", "width", "zoomLevel"], outputs: ["onDisposing", "onInitialized", "onOptionChanged", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "cellTemplateChange", "dateSerializationFormatChange", "disabledChange", "disabledDatesChange", "elementAttrChange", "firstDayOfWeekChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "isDirtyChange", "isValidChange", "maxChange", "maxZoomLevelChange", "minChange", "minZoomLevelChange", "nameChange", "readOnlyChange", "rtlEnabledChange", "selectionModeChange", "selectWeekOnClickChange", "showTodayButtonChange", "showWeekNumbersChange", "tabIndexChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationMessagePositionChange", "validationStatusChange", "valueChange", "visibleChange", "weekNumberRuleChange", "widthChange", "zoomLevelChange", "onBlur"] }, { kind: "pipe", type: HRTranslatePipe, name: "HRTranslate" }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: HREmployeeCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: HREmployeeCalendarComponent, isStandalone: true, selector: "hr-employee-calendar", inputs: { showEvents: "showEvents", showUpComingVacations: "showUpComingVacations", scheduleCalenderVacation: "scheduleCalenderVacation", minDate: "minDate", maxDate: "maxDate", legendContainerClass: "legendContainerClass", legendRowClass: "legendRowClass", legendItemClass: "legendItemClass", legendDotClass: "legendDotClass", legendLabelClass: "legendLabelClass", publicHolidayDotClass: "publicHolidayDotClass", dayOffDotClass: "dayOffDotClass", eventsDotClass: "eventsDotClass", vacationsContainerClass: "vacationsContainerClass", vacationsItemClass: "vacationsItemClass", vacationsIconClass: "vacationsIconClass", calendarContainerClass: "calendarContainerClass", calendarClass: "calendarClass" }, viewQueries: [{ propertyName: "calendar", first: true, predicate: ["calendar"], descendants: true }], ngImport: i0, template: "<div [class]=\"legendContainerClass\">\r\n  <div [class]=\"legendRowClass\">\r\n    <div [class]=\"legendItemClass + ' me-4'\">\r\n      <div [class]=\"legendDotClass + ' ' + publicHolidayDotClass\"></div>\r\n      <div [class]=\"legendLabelClass\"><p>{{'PublicHoliday' | translate}}</p></div>\r\n    </div>\r\n    <div [class]=\"legendItemClass\">\r\n      <div [class]=\"legendDotClass + ' ' + dayOffDotClass\"></div>\r\n      <div [class]=\"legendLabelClass\"><p>{{'DayOff' | translate}}</p></div>\r\n    </div>\r\n    @if(showEvents){\r\n    <div [class]=\"legendItemClass + ' ms-4'\">\r\n      <div [class]=\"legendDotClass + ' ' + eventsDotClass\"></div>\r\n      <div [class]=\"legendLabelClass\"><p>{{'Events' | translate}}</p></div>\r\n    </div>\r\n    }\r\n  </div>\r\n  @if(showUpComingVacations){\r\n  <div [class]=\"vacationsContainerClass\">\r\n    <div [class]=\"vacationsItemClass\">\r\n      <fa-icon [icon]=\"squreCheckIcon\" [class]=\"vacationsIconClass\"></fa-icon>\r\n      <div [class]=\"legendLabelClass\"><p>{{'ScheduledVacations' | translate}}</p></div>\r\n    </div>\r\n  </div>\r\n  }\r\n</div>\r\n\r\n  <div [class]=\"calendarContainerClass\">\r\n    <dx-calendar #calendar [class]=\"calendarClass\" [selectionMode]=\"'multiple'\"\r\n                 [cellTemplate]=\"customCellTemplate\"\r\n                 [showWeekNumbers]=\"false\"\r\n                 [min]=\"minDate\"\r\n                 [max]=\"maxDate\"\r\n                 (onValueChanged)=\"preventInteraction($event)\">\r\n    </dx-calendar>\r\n  </div>\r\n", dependencies: [{ kind: "ngmodule", type: DxCalendarModule }, { kind: "component", type: i1$1.DxCalendarComponent, selector: "dx-calendar", inputs: ["accessKey", "activeStateEnabled", "cellTemplate", "dateSerializationFormat", "disabled", "disabledDates", "elementAttr", "firstDayOfWeek", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "isDirty", "isValid", "max", "maxZoomLevel", "min", "minZoomLevel", "name", "readOnly", "rtlEnabled", "selectionMode", "selectWeekOnClick", "showTodayButton", "showWeekNumbers", "tabIndex", "todayButtonText", "validationError", "validationErrors", "validationMessageMode", "validationMessagePosition", "validationStatus", "value", "visible", "weekNumberRule", "width", "zoomLevel"], outputs: ["onDisposing", "onInitialized", "onOptionChanged", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "cellTemplateChange", "dateSerializationFormatChange", "disabledChange", "disabledDatesChange", "elementAttrChange", "firstDayOfWeekChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "isDirtyChange", "isValidChange", "maxChange", "maxZoomLevelChange", "minChange", "minZoomLevelChange", "nameChange", "readOnlyChange", "rtlEnabledChange", "selectionModeChange", "selectWeekOnClickChange", "showTodayButtonChange", "showWeekNumbersChange", "tabIndexChange", "todayButtonTextChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationMessagePositionChange", "validationStatusChange", "valueChange", "visibleChange", "weekNumberRuleChange", "widthChange", "zoomLevelChange", "onBlur"] }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i2$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: HREmployeeCalendarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: HREmployeeCalendarComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'hr-employee-calendar', imports: [DxCalendarModule, HRTranslatePipe, FontAwesomeModule], template: "<div [class]=\"legendContainerClass\">\r\n  <div [class]=\"legendRowClass\">\r\n    <div [class]=\"legendItemClass + ' me-4'\">\r\n      <div [class]=\"legendDotClass + ' ' + publicHolidayDotClass\"></div>\r\n      <div [class]=\"legendLabelClass\"><p>{{'PublicHoliday' | HRTranslate}}</p></div>\r\n    </div>\r\n    <div [class]=\"legendItemClass\">\r\n      <div [class]=\"legendDotClass + ' ' + dayOffDotClass\"></div>\r\n      <div [class]=\"legendLabelClass\"><p>{{'DayOff' | HRTranslate}}</p></div>\r\n    </div>\r\n    @if(showEvents){\r\n    <div [class]=\"legendItemClass + ' ms-4'\">\r\n      <div [class]=\"legendDotClass + ' ' + eventsDotClass\"></div>\r\n      <div [class]=\"legendLabelClass\"><p>{{'Events' | HRTranslate}}</p></div>\r\n    </div>\r\n    }\r\n  </div>\r\n  @if(showUpComingVacations){\r\n  <div [class]=\"vacationsContainerClass\">\r\n    <div [class]=\"vacationsItemClass\">\r\n      <fa-icon [icon]=\"squreCheckIcon\" [class]=\"vacationsIconClass\"></fa-icon>\r\n      <div [class]=\"legendLabelClass\"><p>{{'ScheduledVacations' | HRTranslate}}</p></div>\r\n    </div>\r\n  </div>\r\n  }\r\n</div>\r\n\r\n  <div [class]=\"calendarContainerClass\">\r\n    <dx-calendar #calendar [class]=\"calendarClass\" [selectionMode]=\"'multiple'\"\r\n                 [cellTemplate]=\"customCellTemplate\"\r\n                 [showWeekNumbers]=\"false\"\r\n                 [min]=\"minDate\"\r\n                 [max]=\"maxDate\"\r\n                 (onValueChanged)=\"preventInteraction($event)\">\r\n    </dx-calendar>\r\n  </div>\r\n" }]
+            args: [{ standalone: true, selector: 'hr-employee-calendar', imports: [DxCalendarModule, TranslatePipe, FontAwesomeModule], template: "<div [class]=\"legendContainerClass\">\r\n  <div [class]=\"legendRowClass\">\r\n    <div [class]=\"legendItemClass + ' me-4'\">\r\n      <div [class]=\"legendDotClass + ' ' + publicHolidayDotClass\"></div>\r\n      <div [class]=\"legendLabelClass\"><p>{{'PublicHoliday' | translate}}</p></div>\r\n    </div>\r\n    <div [class]=\"legendItemClass\">\r\n      <div [class]=\"legendDotClass + ' ' + dayOffDotClass\"></div>\r\n      <div [class]=\"legendLabelClass\"><p>{{'DayOff' | translate}}</p></div>\r\n    </div>\r\n    @if(showEvents){\r\n    <div [class]=\"legendItemClass + ' ms-4'\">\r\n      <div [class]=\"legendDotClass + ' ' + eventsDotClass\"></div>\r\n      <div [class]=\"legendLabelClass\"><p>{{'Events' | translate}}</p></div>\r\n    </div>\r\n    }\r\n  </div>\r\n  @if(showUpComingVacations){\r\n  <div [class]=\"vacationsContainerClass\">\r\n    <div [class]=\"vacationsItemClass\">\r\n      <fa-icon [icon]=\"squreCheckIcon\" [class]=\"vacationsIconClass\"></fa-icon>\r\n      <div [class]=\"legendLabelClass\"><p>{{'ScheduledVacations' | translate}}</p></div>\r\n    </div>\r\n  </div>\r\n  }\r\n</div>\r\n\r\n  <div [class]=\"calendarContainerClass\">\r\n    <dx-calendar #calendar [class]=\"calendarClass\" [selectionMode]=\"'multiple'\"\r\n                 [cellTemplate]=\"customCellTemplate\"\r\n                 [showWeekNumbers]=\"false\"\r\n                 [min]=\"minDate\"\r\n                 [max]=\"maxDate\"\r\n                 (onValueChanged)=\"preventInteraction($event)\">\r\n    </dx-calendar>\r\n  </div>\r\n" }]
         }], propDecorators: { calendar: [{
                 type: ViewChild,
                 args: ['calendar']
@@ -2752,7 +1712,7 @@ class MyCalendarWidgetComponent {
     calendarContainerClass = 'row mt-2 col-12';
     calendarClass = 'button-boeder-none';
     constants = inject(HRConstantsService);
-    translatePipe = inject(HRTranslatePipe);
+    translatePipe = inject(TranslatePipe);
     publicHolidayColor = this.constants.defaultPublicHolidayColor;
     dayOffColor = this.constants.defaultDayOffColor;
     eventsColor = this.constants.defaultEventsColor;
@@ -2883,12 +1843,12 @@ class MyCalendarWidgetComponent {
         });
         return result.sort((a, b) => new Date(a.VacationDays.StartDate).getTime() - new Date(b.VacationDays.StartDate).getTime());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MyCalendarWidgetComponent, deps: [{ token: HRSelfWidgetsService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.21", type: MyCalendarWidgetComponent, isStandalone: true, selector: "hr-my-calendar-widget", inputs: { baseUrl: "baseUrl", headerContainerClass: "headerContainerClass", datasource: "datasource", legendContainerClass: "legendContainerClass", legendRowClass: "legendRowClass", legendItemClass: "legendItemClass", legendDotClass: "legendDotClass", legendLabelClass: "legendLabelClass", publicHolidayDotClass: "publicHolidayDotClass", dayOffDotClass: "dayOffDotClass", eventsDotClass: "eventsDotClass", vacationsContainerClass: "vacationsContainerClass", vacationsItemClass: "vacationsItemClass", vacationsIconClass: "vacationsIconClass", calendarContainerClass: "calendarContainerClass", calendarClass: "calendarClass", publicHolidayColor: "publicHolidayColor", dayOffColor: "dayOffColor", eventsColor: "eventsColor" }, outputs: { isLoadingChanged: "isLoadingChanged" }, viewQueries: [{ propertyName: "hrCalendar", first: true, predicate: HREmployeeCalendarComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<hr-card-header\r\n  [icon]=\"calendarIcon\"\r\n  [title]=\"'Calendar' | HRTranslate\"\r\n  [containerClass]=\"'d-flex align-items-center mb-3 ' + headerContainerClass\">\r\n</hr-card-header>\r\n<hr-employee-calendar\r\n  [showEvents]=\"true\"\r\n  [showUpComingVacations]=\"true\"\r\n  [scheduleCalenderVacation]=\"scheduleCalenderVacation\"\r\n  [minDate]=\"minDate\"\r\n  [maxDate]=\"maxDate\"\r\n  [legendContainerClass]=\"legendContainerClass\"\r\n  [legendRowClass]=\"legendRowClass\"\r\n  [legendItemClass]=\"legendItemClass\"\r\n  [legendDotClass]=\"legendDotClass\"\r\n  [legendLabelClass]=\"legendLabelClass\"\r\n  [publicHolidayDotClass]=\"publicHolidayDotClass\"\r\n  [dayOffDotClass]=\"dayOffDotClass\"\r\n  [eventsDotClass]=\"eventsDotClass\"\r\n  [vacationsContainerClass]=\"vacationsContainerClass\"\r\n  [vacationsItemClass]=\"vacationsItemClass\"\r\n  [vacationsIconClass]=\"vacationsIconClass\"\r\n  [calendarContainerClass]=\"calendarContainerClass\"\r\n  [calendarClass]=\"calendarClass\">\r\n</hr-employee-calendar>\r\n", dependencies: [{ kind: "component", type: HREmployeeCalendarComponent, selector: "hr-employee-calendar", inputs: ["showEvents", "showUpComingVacations", "scheduleCalenderVacation", "minDate", "maxDate", "legendContainerClass", "legendRowClass", "legendItemClass", "legendDotClass", "legendLabelClass", "publicHolidayDotClass", "dayOffDotClass", "eventsDotClass", "vacationsContainerClass", "vacationsItemClass", "vacationsIconClass", "calendarContainerClass", "calendarClass"] }, { kind: "component", type: HRCardHeaderComponent, selector: "hr-card-header", inputs: ["icon", "title", "containerClass", "iconClass", "titleClass"] }, { kind: "pipe", type: HRTranslatePipe, name: "HRTranslate" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MyCalendarWidgetComponent, deps: [{ token: HRSelfWidgetsService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.13", type: MyCalendarWidgetComponent, isStandalone: true, selector: "hr-my-calendar-widget", inputs: { baseUrl: "baseUrl", headerContainerClass: "headerContainerClass", datasource: "datasource", legendContainerClass: "legendContainerClass", legendRowClass: "legendRowClass", legendItemClass: "legendItemClass", legendDotClass: "legendDotClass", legendLabelClass: "legendLabelClass", publicHolidayDotClass: "publicHolidayDotClass", dayOffDotClass: "dayOffDotClass", eventsDotClass: "eventsDotClass", vacationsContainerClass: "vacationsContainerClass", vacationsItemClass: "vacationsItemClass", vacationsIconClass: "vacationsIconClass", calendarContainerClass: "calendarContainerClass", calendarClass: "calendarClass", publicHolidayColor: "publicHolidayColor", dayOffColor: "dayOffColor", eventsColor: "eventsColor" }, outputs: { isLoadingChanged: "isLoadingChanged" }, viewQueries: [{ propertyName: "hrCalendar", first: true, predicate: HREmployeeCalendarComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<hr-card-header\r\n  [icon]=\"calendarIcon\"\r\n  [title]=\"'Calendar' | translate\"\r\n  [containerClass]=\"'d-flex align-items-center mb-3 ' + headerContainerClass\">\r\n</hr-card-header>\r\n<hr-employee-calendar\r\n  [showEvents]=\"true\"\r\n  [showUpComingVacations]=\"true\"\r\n  [scheduleCalenderVacation]=\"scheduleCalenderVacation\"\r\n  [minDate]=\"minDate\"\r\n  [maxDate]=\"maxDate\"\r\n  [legendContainerClass]=\"legendContainerClass\"\r\n  [legendRowClass]=\"legendRowClass\"\r\n  [legendItemClass]=\"legendItemClass\"\r\n  [legendDotClass]=\"legendDotClass\"\r\n  [legendLabelClass]=\"legendLabelClass\"\r\n  [publicHolidayDotClass]=\"publicHolidayDotClass\"\r\n  [dayOffDotClass]=\"dayOffDotClass\"\r\n  [eventsDotClass]=\"eventsDotClass\"\r\n  [vacationsContainerClass]=\"vacationsContainerClass\"\r\n  [vacationsItemClass]=\"vacationsItemClass\"\r\n  [vacationsIconClass]=\"vacationsIconClass\"\r\n  [calendarContainerClass]=\"calendarContainerClass\"\r\n  [calendarClass]=\"calendarClass\">\r\n</hr-employee-calendar>\r\n", dependencies: [{ kind: "component", type: HREmployeeCalendarComponent, selector: "hr-employee-calendar", inputs: ["showEvents", "showUpComingVacations", "scheduleCalenderVacation", "minDate", "maxDate", "legendContainerClass", "legendRowClass", "legendItemClass", "legendDotClass", "legendLabelClass", "publicHolidayDotClass", "dayOffDotClass", "eventsDotClass", "vacationsContainerClass", "vacationsItemClass", "vacationsIconClass", "calendarContainerClass", "calendarClass"] }, { kind: "component", type: HRCardHeaderComponent, selector: "hr-card-header", inputs: ["icon", "title", "containerClass", "iconClass", "titleClass"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MyCalendarWidgetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MyCalendarWidgetComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'hr-my-calendar-widget', imports: [HREmployeeCalendarComponent, HRCardHeaderComponent, HRTranslatePipe], template: "<hr-card-header\r\n  [icon]=\"calendarIcon\"\r\n  [title]=\"'Calendar' | HRTranslate\"\r\n  [containerClass]=\"'d-flex align-items-center mb-3 ' + headerContainerClass\">\r\n</hr-card-header>\r\n<hr-employee-calendar\r\n  [showEvents]=\"true\"\r\n  [showUpComingVacations]=\"true\"\r\n  [scheduleCalenderVacation]=\"scheduleCalenderVacation\"\r\n  [minDate]=\"minDate\"\r\n  [maxDate]=\"maxDate\"\r\n  [legendContainerClass]=\"legendContainerClass\"\r\n  [legendRowClass]=\"legendRowClass\"\r\n  [legendItemClass]=\"legendItemClass\"\r\n  [legendDotClass]=\"legendDotClass\"\r\n  [legendLabelClass]=\"legendLabelClass\"\r\n  [publicHolidayDotClass]=\"publicHolidayDotClass\"\r\n  [dayOffDotClass]=\"dayOffDotClass\"\r\n  [eventsDotClass]=\"eventsDotClass\"\r\n  [vacationsContainerClass]=\"vacationsContainerClass\"\r\n  [vacationsItemClass]=\"vacationsItemClass\"\r\n  [vacationsIconClass]=\"vacationsIconClass\"\r\n  [calendarContainerClass]=\"calendarContainerClass\"\r\n  [calendarClass]=\"calendarClass\">\r\n</hr-employee-calendar>\r\n" }]
+            args: [{ standalone: true, selector: 'hr-my-calendar-widget', imports: [HREmployeeCalendarComponent, HRCardHeaderComponent, TranslatePipe], template: "<hr-card-header\r\n  [icon]=\"calendarIcon\"\r\n  [title]=\"'Calendar' | translate\"\r\n  [containerClass]=\"'d-flex align-items-center mb-3 ' + headerContainerClass\">\r\n</hr-card-header>\r\n<hr-employee-calendar\r\n  [showEvents]=\"true\"\r\n  [showUpComingVacations]=\"true\"\r\n  [scheduleCalenderVacation]=\"scheduleCalenderVacation\"\r\n  [minDate]=\"minDate\"\r\n  [maxDate]=\"maxDate\"\r\n  [legendContainerClass]=\"legendContainerClass\"\r\n  [legendRowClass]=\"legendRowClass\"\r\n  [legendItemClass]=\"legendItemClass\"\r\n  [legendDotClass]=\"legendDotClass\"\r\n  [legendLabelClass]=\"legendLabelClass\"\r\n  [publicHolidayDotClass]=\"publicHolidayDotClass\"\r\n  [dayOffDotClass]=\"dayOffDotClass\"\r\n  [eventsDotClass]=\"eventsDotClass\"\r\n  [vacationsContainerClass]=\"vacationsContainerClass\"\r\n  [vacationsItemClass]=\"vacationsItemClass\"\r\n  [vacationsIconClass]=\"vacationsIconClass\"\r\n  [calendarContainerClass]=\"calendarContainerClass\"\r\n  [calendarClass]=\"calendarClass\">\r\n</hr-employee-calendar>\r\n" }]
         }], ctorParameters: () => [{ type: HRSelfWidgetsService }], propDecorators: { baseUrl: [{
                 type: Input
             }], headerContainerClass: [{
@@ -2940,12 +1900,12 @@ class HRInfoFieldComponent {
     labelClass = 'field-secondary-label-sm';
     valueClass = 'fs-14 fw-medium';
     fallbackValue = '—';
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: HRInfoFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.21", type: HRInfoFieldComponent, isStandalone: true, selector: "hr-info-field", inputs: { labelKey: "labelKey", value: "value", labelClass: "labelClass", valueClass: "valueClass", fallbackValue: "fallbackValue" }, ngImport: i0, template: "<div [ngClass]=\"labelClass\">{{labelKey | HRTranslate}}</div>\r\n<div [ngClass]=\"valueClass\" [title]=\"value|| fallbackValue\">{{value || fallbackValue}}</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: HRTranslatePipe, name: "HRTranslate" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: HRInfoFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.13", type: HRInfoFieldComponent, isStandalone: true, selector: "hr-info-field", inputs: { labelKey: "labelKey", value: "value", labelClass: "labelClass", valueClass: "valueClass", fallbackValue: "fallbackValue" }, ngImport: i0, template: "<div [ngClass]=\"labelClass\">{{labelKey | translate}}</div>\r\n<div [ngClass]=\"valueClass\" [title]=\"value|| fallbackValue\">{{value || fallbackValue}}</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: HRInfoFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: HRInfoFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'hr-info-field', standalone: true, imports: [CommonModule, HRTranslatePipe], template: "<div [ngClass]=\"labelClass\">{{labelKey | HRTranslate}}</div>\r\n<div [ngClass]=\"valueClass\" [title]=\"value|| fallbackValue\">{{value || fallbackValue}}</div>\r\n" }]
+            args: [{ selector: 'hr-info-field', standalone: true, imports: [CommonModule, TranslatePipe], template: "<div [ngClass]=\"labelClass\">{{labelKey | translate}}</div>\r\n<div [ngClass]=\"valueClass\" [title]=\"value|| fallbackValue\">{{value || fallbackValue}}</div>\r\n" }]
         }], propDecorators: { labelKey: [{
                 type: Input,
                 args: [{ required: true }]
@@ -3022,12 +1982,12 @@ class MyProfileBankInfoWidgetComponent {
         }
         return this.commonMethodsService.currencyDecimalFormat(value, this.currencyDecimals) || '-';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MyProfileBankInfoWidgetComponent, deps: [{ token: HRCommonMethodsService }, { token: HRSelfWidgetsService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: MyProfileBankInfoWidgetComponent, isStandalone: true, selector: "hr-my-profile-bank-info-widget", inputs: { currencyCode: "currencyCode", currencyDecimals: "currencyDecimals", headerIconClass: "headerIconClass", headerTextClass: "headerTextClass", headerDividerClass: "headerDividerClass", cardClass: "cardClass", mainBadgeClass: "mainBadgeClass", mainBadgeTextClass: "mainBadgeTextClass", triangleClass: "triangleClass", rowClass: "rowClass", rowMainPtClass: "rowMainPtClass", rowNormalPtClass: "rowNormalPtClass", columnClass: "columnClass", responsiveTopSpacingColClass: "responsiveTopSpacingColClass", topSpacingColClass: "topSpacingColClass", labelClass: "labelClass", valueClass: "valueClass", emptyStateContainerClass: "emptyStateContainerClass", emptyStateTextClass: "emptyStateTextClass", bankInformationIcon: "bankInformationIcon", sectionHeaderVisibility: "sectionHeaderVisibility", sectionTitle: "sectionTitle", language: "language", baseUrl: "baseUrl" }, outputs: { errorOccurred: "errorOccurred", isLoadingChanged: "isLoadingChanged" }, usesOnChanges: true, ngImport: i0, template: "@if(sectionHeaderVisibility){\r\n<sky-section-divider [fontAwesomeIcon]=\"bankInformationIcon\"\r\n                     [text]=\"(sectionTitle | HRTranslate|uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n}\r\n@if(employeeBankInformation.length > 0){\r\n@for (bankInfo of employeeBankInformation; track bankInfo){\r\n<div [class]=\"cardClass\">\r\n  @if(bankInfo.IsMainBank && employeeBankInformation.length > 1){\r\n  <div [class]=\"mainBadgeClass\"\r\n       style=\"padding-top: 2px\"\r\n       [style.margin-left]=\"!isRTL ? '-6px' : 'unset'\">\r\n    <span [class]=\"mainBadgeTextClass\">{{'MainBank' | HRTranslate}}</span>\r\n  </div>\r\n\r\n  <div [class]=\"triangleClass\"\r\n       [style.margin-left]=\"!isRTL ? '-6px' : 'unset'\"\r\n       [style.margin-right]=\"isRTL ? '-5px' : '20px'\"\r\n       [style.margin-top]=\"!isRTL ? '7px' : '4px'\">\r\n    <svg viewBox=\"4 2 16 16\" class=\"status-badge-triangle\" fill=\"#e67e0f\">\r\n      <path d=\"m3.86 8.753 5.482 4.796c.646.566 1.658.106 1.658-.753V3.204a1 1 0 0 0-1.659-.753l-5.48 4.796a1 1 0 0 0 0 1.506z\"></path>\r\n    </svg>\r\n  </div>\r\n  }\r\n\r\n  <div [ngClass]=\"[rowClass, bankInfo.IsMainBank ? rowMainPtClass : rowNormalPtClass]\">\r\n    <div [class]=\"columnClass\">\r\n      <hr-info-field [labelKey]=\"'Bank'\"\r\n                     [value]=\"bankInfo.BankName\"\r\n                     [labelClass]=\"labelClass\"\r\n                     [valueClass]=\"valueClass\">\r\n      </hr-info-field>\r\n    </div>\r\n\r\n    <div [class]=\"columnClass\">\r\n      <hr-info-field [labelKey]=\"'Branch'\"\r\n                     [value]=\"bankInfo.BranchName\"\r\n                     [labelClass]=\"labelClass\"\r\n                     [valueClass]=\"valueClass\">\r\n      </hr-info-field>\r\n    </div>\r\n\r\n    <div [class]=\"responsiveTopSpacingColClass\">\r\n      <hr-info-field [labelKey]=\"'IBAN'\"\r\n                     [value]=\"bankInfo.IBAN\"\r\n                     [labelClass]=\"labelClass\"\r\n                     [valueClass]=\"valueClass\">\r\n      </hr-info-field>\r\n    </div>\r\n\r\n    <div [class]=\"topSpacingColClass\">\r\n      <hr-info-field [labelKey]=\"'AccountNumber'\"\r\n                     [value]=\"bankInfo.AccountNumber\"\r\n                     [labelClass]=\"labelClass\"\r\n                     [valueClass]=\"valueClass\">\r\n      </hr-info-field>\r\n    </div>\r\n\r\n    <div [class]=\"topSpacingColClass\">\r\n      <hr-info-field [labelKey]=\"'Beneficiary'\"\r\n                     [value]=\"bankInfo.Beneficiary\"\r\n                     [labelClass]=\"labelClass\"\r\n                     [valueClass]=\"valueClass\">\r\n      </hr-info-field>\r\n    </div>\r\n\r\n    @if(bankInfo.TransferAmount != null){\r\n    <div [class]=\"topSpacingColClass\">\r\n      <hr-info-field [labelKey]=\"'TransferAmount'\"\r\n                     [value]=\"formatAmount(bankInfo.TransferAmount) + ' (' + currencyCode + ')'\"\r\n                     [labelClass]=\"labelClass\"\r\n                     [valueClass]=\"valueClass\">\r\n      </hr-info-field>\r\n    </div>\r\n    }\r\n  </div>\r\n</div>\r\n}\r\n}@else{\r\n<sky-empty-design-card [visibleIcon]=\"false\"\r\n                       [visibleQuickAction]=\"false\"\r\n                       [containerClass]=\"emptyStateContainerClass\"\r\n                       [cardBodyClass]=\"''\"\r\n                       [cardBodyContainerClass]=\"''\"\r\n                       [emptyTextClass]=\"emptyStateTextClass\"\r\n                       [emptyText]=\"isLoading ? ((sectionTitle | HRTranslate) + ' ' + ('IsLoading' | HRTranslate)) : ('ThereIsNoBankYet' | HRTranslate)\">\r\n</sky-empty-design-card>\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i2$2.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: HRTranslatePipe, name: "HRTranslate" }, { kind: "component", type: SkySectionDividerComponent, selector: "sky-section-divider", inputs: ["text", "fontAwesomeIcon", "textClass", "dividerClass", "iconClass"] }, { kind: "component", type: SkyEmptyDesignCardComponent, selector: "sky-empty-design-card", inputs: ["emptyIcon", "emptyIconClass", "emptyText", "emptyTextClass", "actionTitle", "actionIcon", "actionDisabled", "textColor", "disabledTitleClass", "activeTitleClass", "disabledIconClass", "activeIconClass", "actionClass", "containerClass", "cardBodyClass", "cardBodyContainerClass", "visibleIcon", "visibleQuickAction"], outputs: ["onActionClick"] }, { kind: "component", type: HRInfoFieldComponent, selector: "hr-info-field", inputs: ["labelKey", "value", "labelClass", "valueClass", "fallbackValue"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MyProfileBankInfoWidgetComponent, deps: [{ token: HRCommonMethodsService }, { token: HRSelfWidgetsService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: MyProfileBankInfoWidgetComponent, isStandalone: true, selector: "hr-my-profile-bank-info-widget", inputs: { currencyCode: "currencyCode", currencyDecimals: "currencyDecimals", headerIconClass: "headerIconClass", headerTextClass: "headerTextClass", headerDividerClass: "headerDividerClass", cardClass: "cardClass", mainBadgeClass: "mainBadgeClass", mainBadgeTextClass: "mainBadgeTextClass", triangleClass: "triangleClass", rowClass: "rowClass", rowMainPtClass: "rowMainPtClass", rowNormalPtClass: "rowNormalPtClass", columnClass: "columnClass", responsiveTopSpacingColClass: "responsiveTopSpacingColClass", topSpacingColClass: "topSpacingColClass", labelClass: "labelClass", valueClass: "valueClass", emptyStateContainerClass: "emptyStateContainerClass", emptyStateTextClass: "emptyStateTextClass", bankInformationIcon: "bankInformationIcon", sectionHeaderVisibility: "sectionHeaderVisibility", sectionTitle: "sectionTitle", language: "language", baseUrl: "baseUrl" }, outputs: { errorOccurred: "errorOccurred", isLoadingChanged: "isLoadingChanged" }, usesOnChanges: true, ngImport: i0, template: "@if(sectionHeaderVisibility){\r\n<sky-section-divider [fontAwesomeIcon]=\"bankInformationIcon\"\r\n                     [text]=\"(sectionTitle | translate|uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n}\r\n@if(employeeBankInformation.length > 0){\r\n@for (bankInfo of employeeBankInformation; track bankInfo){\r\n<div [class]=\"cardClass\">\r\n  @if(bankInfo.IsMainBank && employeeBankInformation.length > 1){\r\n  <div [class]=\"mainBadgeClass\"\r\n       style=\"padding-top: 2px\"\r\n       [style.margin-left]=\"!isRTL ? '-6px' : 'unset'\">\r\n    <span [class]=\"mainBadgeTextClass\">{{'MainBank' | translate}}</span>\r\n  </div>\r\n\r\n  <div [class]=\"triangleClass\"\r\n       [style.margin-left]=\"!isRTL ? '-6px' : 'unset'\"\r\n       [style.margin-right]=\"isRTL ? '-5px' : '20px'\"\r\n       [style.margin-top]=\"!isRTL ? '7px' : '4px'\">\r\n    <svg viewBox=\"4 2 16 16\" class=\"status-badge-triangle\" fill=\"#e67e0f\">\r\n      <path d=\"m3.86 8.753 5.482 4.796c.646.566 1.658.106 1.658-.753V3.204a1 1 0 0 0-1.659-.753l-5.48 4.796a1 1 0 0 0 0 1.506z\"></path>\r\n    </svg>\r\n  </div>\r\n  }\r\n\r\n  <div [ngClass]=\"[rowClass, bankInfo.IsMainBank ? rowMainPtClass : rowNormalPtClass]\">\r\n    <div [class]=\"columnClass\">\r\n      <hr-info-field [labelKey]=\"'Bank'\"\r\n                     [value]=\"bankInfo.BankName\"\r\n                     [labelClass]=\"labelClass\"\r\n                     [valueClass]=\"valueClass\">\r\n      </hr-info-field>\r\n    </div>\r\n\r\n    <div [class]=\"columnClass\">\r\n      <hr-info-field [labelKey]=\"'Branch'\"\r\n                     [value]=\"bankInfo.BranchName\"\r\n                     [labelClass]=\"labelClass\"\r\n                     [valueClass]=\"valueClass\">\r\n      </hr-info-field>\r\n    </div>\r\n\r\n    <div [class]=\"responsiveTopSpacingColClass\">\r\n      <hr-info-field [labelKey]=\"'IBAN'\"\r\n                     [value]=\"bankInfo.IBAN\"\r\n                     [labelClass]=\"labelClass\"\r\n                     [valueClass]=\"valueClass\">\r\n      </hr-info-field>\r\n    </div>\r\n\r\n    <div [class]=\"topSpacingColClass\">\r\n      <hr-info-field [labelKey]=\"'AccountNumber'\"\r\n                     [value]=\"bankInfo.AccountNumber\"\r\n                     [labelClass]=\"labelClass\"\r\n                     [valueClass]=\"valueClass\">\r\n      </hr-info-field>\r\n    </div>\r\n\r\n    <div [class]=\"topSpacingColClass\">\r\n      <hr-info-field [labelKey]=\"'Beneficiary'\"\r\n                     [value]=\"bankInfo.Beneficiary\"\r\n                     [labelClass]=\"labelClass\"\r\n                     [valueClass]=\"valueClass\">\r\n      </hr-info-field>\r\n    </div>\r\n\r\n    @if(bankInfo.TransferAmount != null){\r\n    <div [class]=\"topSpacingColClass\">\r\n      <hr-info-field [labelKey]=\"'TransferAmount'\"\r\n                     [value]=\"formatAmount(bankInfo.TransferAmount) + ' (' + currencyCode + ')'\"\r\n                     [labelClass]=\"labelClass\"\r\n                     [valueClass]=\"valueClass\">\r\n      </hr-info-field>\r\n    </div>\r\n    }\r\n  </div>\r\n</div>\r\n}\r\n}@else{\r\n<sky-empty-design-card [visibleIcon]=\"false\"\r\n                       [visibleQuickAction]=\"false\"\r\n                       [containerClass]=\"emptyStateContainerClass\"\r\n                       [cardBodyClass]=\"''\"\r\n                       [cardBodyContainerClass]=\"''\"\r\n                       [emptyTextClass]=\"emptyStateTextClass\"\r\n                       [emptyText]=\"isLoading ? ((sectionTitle | translate) + ' ' + ('IsLoading' | translate)) : ('ThereIsNoBankYet' | translate)\">\r\n</sky-empty-design-card>\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SkySectionDividerComponent, selector: "sky-section-divider", inputs: ["text", "fontAwesomeIcon", "textClass", "dividerClass", "iconClass"] }, { kind: "component", type: SkyEmptyDesignCardComponent, selector: "sky-empty-design-card", inputs: ["emptyIcon", "emptyIconClass", "emptyText", "emptyTextClass", "actionTitle", "actionIcon", "actionDisabled", "textColor", "disabledTitleClass", "activeTitleClass", "disabledIconClass", "activeIconClass", "actionClass", "containerClass", "cardBodyClass", "cardBodyContainerClass", "visibleIcon", "visibleQuickAction"], outputs: ["onActionClick"] }, { kind: "component", type: HRInfoFieldComponent, selector: "hr-info-field", inputs: ["labelKey", "value", "labelClass", "valueClass", "fallbackValue"] }, { kind: "pipe", type: i2$3.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MyProfileBankInfoWidgetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MyProfileBankInfoWidgetComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'hr-my-profile-bank-info-widget', standalone: true, imports: [CommonModule, HRTranslatePipe, SkySectionDividerComponent, SkyEmptyDesignCardComponent, HRInfoFieldComponent], template: "@if(sectionHeaderVisibility){\r\n<sky-section-divider [fontAwesomeIcon]=\"bankInformationIcon\"\r\n                     [text]=\"(sectionTitle | HRTranslate|uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n}\r\n@if(employeeBankInformation.length > 0){\r\n@for (bankInfo of employeeBankInformation; track bankInfo){\r\n<div [class]=\"cardClass\">\r\n  @if(bankInfo.IsMainBank && employeeBankInformation.length > 1){\r\n  <div [class]=\"mainBadgeClass\"\r\n       style=\"padding-top: 2px\"\r\n       [style.margin-left]=\"!isRTL ? '-6px' : 'unset'\">\r\n    <span [class]=\"mainBadgeTextClass\">{{'MainBank' | HRTranslate}}</span>\r\n  </div>\r\n\r\n  <div [class]=\"triangleClass\"\r\n       [style.margin-left]=\"!isRTL ? '-6px' : 'unset'\"\r\n       [style.margin-right]=\"isRTL ? '-5px' : '20px'\"\r\n       [style.margin-top]=\"!isRTL ? '7px' : '4px'\">\r\n    <svg viewBox=\"4 2 16 16\" class=\"status-badge-triangle\" fill=\"#e67e0f\">\r\n      <path d=\"m3.86 8.753 5.482 4.796c.646.566 1.658.106 1.658-.753V3.204a1 1 0 0 0-1.659-.753l-5.48 4.796a1 1 0 0 0 0 1.506z\"></path>\r\n    </svg>\r\n  </div>\r\n  }\r\n\r\n  <div [ngClass]=\"[rowClass, bankInfo.IsMainBank ? rowMainPtClass : rowNormalPtClass]\">\r\n    <div [class]=\"columnClass\">\r\n      <hr-info-field [labelKey]=\"'Bank'\"\r\n                     [value]=\"bankInfo.BankName\"\r\n                     [labelClass]=\"labelClass\"\r\n                     [valueClass]=\"valueClass\">\r\n      </hr-info-field>\r\n    </div>\r\n\r\n    <div [class]=\"columnClass\">\r\n      <hr-info-field [labelKey]=\"'Branch'\"\r\n                     [value]=\"bankInfo.BranchName\"\r\n                     [labelClass]=\"labelClass\"\r\n                     [valueClass]=\"valueClass\">\r\n      </hr-info-field>\r\n    </div>\r\n\r\n    <div [class]=\"responsiveTopSpacingColClass\">\r\n      <hr-info-field [labelKey]=\"'IBAN'\"\r\n                     [value]=\"bankInfo.IBAN\"\r\n                     [labelClass]=\"labelClass\"\r\n                     [valueClass]=\"valueClass\">\r\n      </hr-info-field>\r\n    </div>\r\n\r\n    <div [class]=\"topSpacingColClass\">\r\n      <hr-info-field [labelKey]=\"'AccountNumber'\"\r\n                     [value]=\"bankInfo.AccountNumber\"\r\n                     [labelClass]=\"labelClass\"\r\n                     [valueClass]=\"valueClass\">\r\n      </hr-info-field>\r\n    </div>\r\n\r\n    <div [class]=\"topSpacingColClass\">\r\n      <hr-info-field [labelKey]=\"'Beneficiary'\"\r\n                     [value]=\"bankInfo.Beneficiary\"\r\n                     [labelClass]=\"labelClass\"\r\n                     [valueClass]=\"valueClass\">\r\n      </hr-info-field>\r\n    </div>\r\n\r\n    @if(bankInfo.TransferAmount != null){\r\n    <div [class]=\"topSpacingColClass\">\r\n      <hr-info-field [labelKey]=\"'TransferAmount'\"\r\n                     [value]=\"formatAmount(bankInfo.TransferAmount) + ' (' + currencyCode + ')'\"\r\n                     [labelClass]=\"labelClass\"\r\n                     [valueClass]=\"valueClass\">\r\n      </hr-info-field>\r\n    </div>\r\n    }\r\n  </div>\r\n</div>\r\n}\r\n}@else{\r\n<sky-empty-design-card [visibleIcon]=\"false\"\r\n                       [visibleQuickAction]=\"false\"\r\n                       [containerClass]=\"emptyStateContainerClass\"\r\n                       [cardBodyClass]=\"''\"\r\n                       [cardBodyContainerClass]=\"''\"\r\n                       [emptyTextClass]=\"emptyStateTextClass\"\r\n                       [emptyText]=\"isLoading ? ((sectionTitle | HRTranslate) + ' ' + ('IsLoading' | HRTranslate)) : ('ThereIsNoBankYet' | HRTranslate)\">\r\n</sky-empty-design-card>\r\n}\r\n" }]
+            args: [{ selector: 'hr-my-profile-bank-info-widget', standalone: true, imports: [CommonModule, TranslatePipe, SkySectionDividerComponent, SkyEmptyDesignCardComponent, HRInfoFieldComponent], template: "@if(sectionHeaderVisibility){\r\n<sky-section-divider [fontAwesomeIcon]=\"bankInformationIcon\"\r\n                     [text]=\"(sectionTitle | translate|uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n}\r\n@if(employeeBankInformation.length > 0){\r\n@for (bankInfo of employeeBankInformation; track bankInfo){\r\n<div [class]=\"cardClass\">\r\n  @if(bankInfo.IsMainBank && employeeBankInformation.length > 1){\r\n  <div [class]=\"mainBadgeClass\"\r\n       style=\"padding-top: 2px\"\r\n       [style.margin-left]=\"!isRTL ? '-6px' : 'unset'\">\r\n    <span [class]=\"mainBadgeTextClass\">{{'MainBank' | translate}}</span>\r\n  </div>\r\n\r\n  <div [class]=\"triangleClass\"\r\n       [style.margin-left]=\"!isRTL ? '-6px' : 'unset'\"\r\n       [style.margin-right]=\"isRTL ? '-5px' : '20px'\"\r\n       [style.margin-top]=\"!isRTL ? '7px' : '4px'\">\r\n    <svg viewBox=\"4 2 16 16\" class=\"status-badge-triangle\" fill=\"#e67e0f\">\r\n      <path d=\"m3.86 8.753 5.482 4.796c.646.566 1.658.106 1.658-.753V3.204a1 1 0 0 0-1.659-.753l-5.48 4.796a1 1 0 0 0 0 1.506z\"></path>\r\n    </svg>\r\n  </div>\r\n  }\r\n\r\n  <div [ngClass]=\"[rowClass, bankInfo.IsMainBank ? rowMainPtClass : rowNormalPtClass]\">\r\n    <div [class]=\"columnClass\">\r\n      <hr-info-field [labelKey]=\"'Bank'\"\r\n                     [value]=\"bankInfo.BankName\"\r\n                     [labelClass]=\"labelClass\"\r\n                     [valueClass]=\"valueClass\">\r\n      </hr-info-field>\r\n    </div>\r\n\r\n    <div [class]=\"columnClass\">\r\n      <hr-info-field [labelKey]=\"'Branch'\"\r\n                     [value]=\"bankInfo.BranchName\"\r\n                     [labelClass]=\"labelClass\"\r\n                     [valueClass]=\"valueClass\">\r\n      </hr-info-field>\r\n    </div>\r\n\r\n    <div [class]=\"responsiveTopSpacingColClass\">\r\n      <hr-info-field [labelKey]=\"'IBAN'\"\r\n                     [value]=\"bankInfo.IBAN\"\r\n                     [labelClass]=\"labelClass\"\r\n                     [valueClass]=\"valueClass\">\r\n      </hr-info-field>\r\n    </div>\r\n\r\n    <div [class]=\"topSpacingColClass\">\r\n      <hr-info-field [labelKey]=\"'AccountNumber'\"\r\n                     [value]=\"bankInfo.AccountNumber\"\r\n                     [labelClass]=\"labelClass\"\r\n                     [valueClass]=\"valueClass\">\r\n      </hr-info-field>\r\n    </div>\r\n\r\n    <div [class]=\"topSpacingColClass\">\r\n      <hr-info-field [labelKey]=\"'Beneficiary'\"\r\n                     [value]=\"bankInfo.Beneficiary\"\r\n                     [labelClass]=\"labelClass\"\r\n                     [valueClass]=\"valueClass\">\r\n      </hr-info-field>\r\n    </div>\r\n\r\n    @if(bankInfo.TransferAmount != null){\r\n    <div [class]=\"topSpacingColClass\">\r\n      <hr-info-field [labelKey]=\"'TransferAmount'\"\r\n                     [value]=\"formatAmount(bankInfo.TransferAmount) + ' (' + currencyCode + ')'\"\r\n                     [labelClass]=\"labelClass\"\r\n                     [valueClass]=\"valueClass\">\r\n      </hr-info-field>\r\n    </div>\r\n    }\r\n  </div>\r\n</div>\r\n}\r\n}@else{\r\n<sky-empty-design-card [visibleIcon]=\"false\"\r\n                       [visibleQuickAction]=\"false\"\r\n                       [containerClass]=\"emptyStateContainerClass\"\r\n                       [cardBodyClass]=\"''\"\r\n                       [cardBodyContainerClass]=\"''\"\r\n                       [emptyTextClass]=\"emptyStateTextClass\"\r\n                       [emptyText]=\"isLoading ? ((sectionTitle | translate) + ' ' + ('IsLoading' | translate)) : ('ThereIsNoBankYet' | translate)\">\r\n</sky-empty-design-card>\r\n}\r\n" }]
         }], ctorParameters: () => [{ type: HRCommonMethodsService }, { type: HRSelfWidgetsService }], propDecorators: { currencyCode: [{
                 type: Input
             }], currencyDecimals: [{
@@ -3129,12 +2089,12 @@ class ProfilePersonalInfoMainWidgetComponent {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ProfilePersonalInfoMainWidgetComponent, deps: [{ token: HRSelfWidgetsService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: ProfilePersonalInfoMainWidgetComponent, isStandalone: true, selector: "hr-my-profile-personal-info-main-widget", inputs: { baseUrl: "baseUrl", alternateLanguage: "alternateLanguage", headerIconClass: "headerIconClass", headerTextClass: "headerTextClass", headerDividerClass: "headerDividerClass", rowClass: "rowClass", columnClass: "columnClass", hiddenSpacerColClass: "hiddenSpacerColClass", topSpacingColumnClass: "topSpacingColumnClass", topSpacingBottomMdSpacingColumnClass: "topSpacingBottomMdSpacingColumnClass", topSpacingBottomSpacingColumnClass: "topSpacingBottomSpacingColumnClass", labelClass: "labelClass", valueClass: "valueClass", emptyStateContainerClass: "emptyStateContainerClass", emptyStateTextClass: "emptyStateTextClass", mainIcon: "mainIcon", sectionTitle: "sectionTitle" }, outputs: { isLoadingChanged: "isLoadingChanged", errorOccurred: "errorOccurred" }, ngImport: i0, template: "<sky-section-divider [fontAwesomeIcon]=\"mainIcon\"\r\n                     [text]=\"(sectionTitle | HRTranslate | uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n@if(employeePersonalInformation){\r\n<div [ngClass]=\"rowClass\">\r\n  <div [ngClass]=\"columnClass\">\r\n    <hr-info-field [labelKey]=\"'Name'\"\r\n                   [value]=\"employeePersonalInformation.EmployeeName\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"columnClass\">\r\n    <div [ngClass]=\"labelClass\">{{'Name' | HRTranslate}} ({{alternateLanguage}})</div>\r\n    @if(employeePersonalInformation.EmployeeNameAlternate){\r\n    <div [ngClass]=\"valueClass\">{{employeePersonalInformation.EmployeeNameAlternate}}</div>\r\n    }@else{\r\n    <div [ngClass]=\"valueClass\">{{'\u2014'}}</div>\r\n    }\r\n  </div>\r\n\r\n  <div [ngClass]=\"hiddenSpacerColClass\"></div>\r\n\r\n  <div [ngClass]=\"topSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'Nationality'\"\r\n                   [value]=\"employeePersonalInformation.NationalityName\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"topSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'NationalNumber'\"\r\n                   [value]=\"employeePersonalInformation.NationalNumber\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"topSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'SocialSecurityNumber'\"\r\n                   [value]=\"employeePersonalInformation.SocialSecurityNumber\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n\r\n  <div [ngClass]=\"topSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'MaritalStatus'\"\r\n                   [value]=\"employeePersonalInformation.MaritalStateName\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"topSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'BirthDate'\"\r\n                   [value]=\"employeePersonalInformation.BirthDate ? (employeePersonalInformation.BirthDate | date: 'dd/MM/yyyy') : null\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"topSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'BirthPlace'\"\r\n                   [value]=\"employeePersonalInformation.BirthPlace\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n\r\n  <div [ngClass]=\"topSpacingBottomMdSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'BloodType'\"\r\n                   [value]=\"employeePersonalInformation.BloodTypeCode\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"topSpacingBottomMdSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'Religion'\"\r\n                   [value]=\"employeePersonalInformation.ReligionName\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"topSpacingBottomSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'MinistryOfLaborNumber'\"\r\n                   [value]=\"employeePersonalInformation.MinistryOfLaborNumber\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  </div>\r\n\r\n}\r\n@else {\r\n  <sky-empty-design-card [visibleIcon]=\"false\"\r\n                       [visibleQuickAction]=\"false\"\r\n                       [containerClass]=\"emptyStateContainerClass\"\r\n                       [cardBodyClass]=\"''\"\r\n                       [cardBodyContainerClass]=\"''\"\r\n                       [emptyTextClass]=\"emptyStateTextClass\"\r\n                       [emptyText]=\"isLoading ? ((sectionTitle | HRTranslate) + ' ' + ('IsLoading' | HRTranslate)) : ('ThereIsNoMainYet' | HRTranslate)\">\r\n</sky-empty-design-card>\r\n}\r\n\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i2$2.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i2$2.DatePipe, name: "date" }, { kind: "pipe", type: HRTranslatePipe, name: "HRTranslate" }, { kind: "component", type: SkySectionDividerComponent, selector: "sky-section-divider", inputs: ["text", "fontAwesomeIcon", "textClass", "dividerClass", "iconClass"] }, { kind: "component", type: SkyEmptyDesignCardComponent, selector: "sky-empty-design-card", inputs: ["emptyIcon", "emptyIconClass", "emptyText", "emptyTextClass", "actionTitle", "actionIcon", "actionDisabled", "textColor", "disabledTitleClass", "activeTitleClass", "disabledIconClass", "activeIconClass", "actionClass", "containerClass", "cardBodyClass", "cardBodyContainerClass", "visibleIcon", "visibleQuickAction"], outputs: ["onActionClick"] }, { kind: "component", type: HRInfoFieldComponent, selector: "hr-info-field", inputs: ["labelKey", "value", "labelClass", "valueClass", "fallbackValue"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ProfilePersonalInfoMainWidgetComponent, deps: [{ token: HRSelfWidgetsService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: ProfilePersonalInfoMainWidgetComponent, isStandalone: true, selector: "hr-my-profile-personal-info-main-widget", inputs: { baseUrl: "baseUrl", alternateLanguage: "alternateLanguage", headerIconClass: "headerIconClass", headerTextClass: "headerTextClass", headerDividerClass: "headerDividerClass", rowClass: "rowClass", columnClass: "columnClass", hiddenSpacerColClass: "hiddenSpacerColClass", topSpacingColumnClass: "topSpacingColumnClass", topSpacingBottomMdSpacingColumnClass: "topSpacingBottomMdSpacingColumnClass", topSpacingBottomSpacingColumnClass: "topSpacingBottomSpacingColumnClass", labelClass: "labelClass", valueClass: "valueClass", emptyStateContainerClass: "emptyStateContainerClass", emptyStateTextClass: "emptyStateTextClass", mainIcon: "mainIcon", sectionTitle: "sectionTitle" }, outputs: { isLoadingChanged: "isLoadingChanged", errorOccurred: "errorOccurred" }, ngImport: i0, template: "<sky-section-divider [fontAwesomeIcon]=\"mainIcon\"\r\n                     [text]=\"(sectionTitle | translate | uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n@if(employeePersonalInformation){\r\n<div [ngClass]=\"rowClass\">\r\n  <div [ngClass]=\"columnClass\">\r\n    <hr-info-field [labelKey]=\"'Name'\"\r\n                   [value]=\"employeePersonalInformation.EmployeeName\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"columnClass\">\r\n    <div [ngClass]=\"labelClass\">{{'Name' | translate}} ({{alternateLanguage}})</div>\r\n    @if(employeePersonalInformation.EmployeeNameAlternate){\r\n    <div [ngClass]=\"valueClass\">{{employeePersonalInformation.EmployeeNameAlternate}}</div>\r\n    }@else{\r\n    <div [ngClass]=\"valueClass\">{{'\u2014'}}</div>\r\n    }\r\n  </div>\r\n\r\n  <div [ngClass]=\"hiddenSpacerColClass\"></div>\r\n\r\n  <div [ngClass]=\"topSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'Nationality'\"\r\n                   [value]=\"employeePersonalInformation.NationalityName\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"topSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'NationalNumber'\"\r\n                   [value]=\"employeePersonalInformation.NationalNumber\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"topSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'SocialSecurityNumber'\"\r\n                   [value]=\"employeePersonalInformation.SocialSecurityNumber\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n\r\n  <div [ngClass]=\"topSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'MaritalStatus'\"\r\n                   [value]=\"employeePersonalInformation.MaritalStateName\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"topSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'BirthDate'\"\r\n                   [value]=\"employeePersonalInformation.BirthDate ? (employeePersonalInformation.BirthDate | date: 'dd/MM/yyyy') : null\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"topSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'BirthPlace'\"\r\n                   [value]=\"employeePersonalInformation.BirthPlace\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n\r\n  <div [ngClass]=\"topSpacingBottomMdSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'BloodType'\"\r\n                   [value]=\"employeePersonalInformation.BloodTypeCode\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"topSpacingBottomMdSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'Religion'\"\r\n                   [value]=\"employeePersonalInformation.ReligionName\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"topSpacingBottomSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'MinistryOfLaborNumber'\"\r\n                   [value]=\"employeePersonalInformation.MinistryOfLaborNumber\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  </div>\r\n\r\n}\r\n@else {\r\n  <sky-empty-design-card [visibleIcon]=\"false\"\r\n                       [visibleQuickAction]=\"false\"\r\n                       [containerClass]=\"emptyStateContainerClass\"\r\n                       [cardBodyClass]=\"''\"\r\n                       [cardBodyContainerClass]=\"''\"\r\n                       [emptyTextClass]=\"emptyStateTextClass\"\r\n                       [emptyText]=\"isLoading ? ((sectionTitle | translate) + ' ' + ('IsLoading' | translate)) : ('ThereIsNoMainYet' | translate)\">\r\n</sky-empty-design-card>\r\n}\r\n\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SkySectionDividerComponent, selector: "sky-section-divider", inputs: ["text", "fontAwesomeIcon", "textClass", "dividerClass", "iconClass"] }, { kind: "component", type: SkyEmptyDesignCardComponent, selector: "sky-empty-design-card", inputs: ["emptyIcon", "emptyIconClass", "emptyText", "emptyTextClass", "actionTitle", "actionIcon", "actionDisabled", "textColor", "disabledTitleClass", "activeTitleClass", "disabledIconClass", "activeIconClass", "actionClass", "containerClass", "cardBodyClass", "cardBodyContainerClass", "visibleIcon", "visibleQuickAction"], outputs: ["onActionClick"] }, { kind: "component", type: HRInfoFieldComponent, selector: "hr-info-field", inputs: ["labelKey", "value", "labelClass", "valueClass", "fallbackValue"] }, { kind: "pipe", type: i2$3.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i2$3.DatePipe, name: "date" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ProfilePersonalInfoMainWidgetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ProfilePersonalInfoMainWidgetComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'hr-my-profile-personal-info-main-widget', standalone: true, imports: [CommonModule, HRTranslatePipe, SkySectionDividerComponent, SkyEmptyDesignCardComponent, HRInfoFieldComponent], template: "<sky-section-divider [fontAwesomeIcon]=\"mainIcon\"\r\n                     [text]=\"(sectionTitle | HRTranslate | uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n@if(employeePersonalInformation){\r\n<div [ngClass]=\"rowClass\">\r\n  <div [ngClass]=\"columnClass\">\r\n    <hr-info-field [labelKey]=\"'Name'\"\r\n                   [value]=\"employeePersonalInformation.EmployeeName\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"columnClass\">\r\n    <div [ngClass]=\"labelClass\">{{'Name' | HRTranslate}} ({{alternateLanguage}})</div>\r\n    @if(employeePersonalInformation.EmployeeNameAlternate){\r\n    <div [ngClass]=\"valueClass\">{{employeePersonalInformation.EmployeeNameAlternate}}</div>\r\n    }@else{\r\n    <div [ngClass]=\"valueClass\">{{'\u2014'}}</div>\r\n    }\r\n  </div>\r\n\r\n  <div [ngClass]=\"hiddenSpacerColClass\"></div>\r\n\r\n  <div [ngClass]=\"topSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'Nationality'\"\r\n                   [value]=\"employeePersonalInformation.NationalityName\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"topSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'NationalNumber'\"\r\n                   [value]=\"employeePersonalInformation.NationalNumber\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"topSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'SocialSecurityNumber'\"\r\n                   [value]=\"employeePersonalInformation.SocialSecurityNumber\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n\r\n  <div [ngClass]=\"topSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'MaritalStatus'\"\r\n                   [value]=\"employeePersonalInformation.MaritalStateName\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"topSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'BirthDate'\"\r\n                   [value]=\"employeePersonalInformation.BirthDate ? (employeePersonalInformation.BirthDate | date: 'dd/MM/yyyy') : null\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"topSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'BirthPlace'\"\r\n                   [value]=\"employeePersonalInformation.BirthPlace\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n\r\n  <div [ngClass]=\"topSpacingBottomMdSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'BloodType'\"\r\n                   [value]=\"employeePersonalInformation.BloodTypeCode\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"topSpacingBottomMdSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'Religion'\"\r\n                   [value]=\"employeePersonalInformation.ReligionName\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"topSpacingBottomSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'MinistryOfLaborNumber'\"\r\n                   [value]=\"employeePersonalInformation.MinistryOfLaborNumber\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  </div>\r\n\r\n}\r\n@else {\r\n  <sky-empty-design-card [visibleIcon]=\"false\"\r\n                       [visibleQuickAction]=\"false\"\r\n                       [containerClass]=\"emptyStateContainerClass\"\r\n                       [cardBodyClass]=\"''\"\r\n                       [cardBodyContainerClass]=\"''\"\r\n                       [emptyTextClass]=\"emptyStateTextClass\"\r\n                       [emptyText]=\"isLoading ? ((sectionTitle | HRTranslate) + ' ' + ('IsLoading' | HRTranslate)) : ('ThereIsNoMainYet' | HRTranslate)\">\r\n</sky-empty-design-card>\r\n}\r\n\r\n" }]
+            args: [{ selector: 'hr-my-profile-personal-info-main-widget', standalone: true, imports: [CommonModule, TranslatePipe, SkySectionDividerComponent, SkyEmptyDesignCardComponent, HRInfoFieldComponent], template: "<sky-section-divider [fontAwesomeIcon]=\"mainIcon\"\r\n                     [text]=\"(sectionTitle | translate | uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n@if(employeePersonalInformation){\r\n<div [ngClass]=\"rowClass\">\r\n  <div [ngClass]=\"columnClass\">\r\n    <hr-info-field [labelKey]=\"'Name'\"\r\n                   [value]=\"employeePersonalInformation.EmployeeName\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"columnClass\">\r\n    <div [ngClass]=\"labelClass\">{{'Name' | translate}} ({{alternateLanguage}})</div>\r\n    @if(employeePersonalInformation.EmployeeNameAlternate){\r\n    <div [ngClass]=\"valueClass\">{{employeePersonalInformation.EmployeeNameAlternate}}</div>\r\n    }@else{\r\n    <div [ngClass]=\"valueClass\">{{'\u2014'}}</div>\r\n    }\r\n  </div>\r\n\r\n  <div [ngClass]=\"hiddenSpacerColClass\"></div>\r\n\r\n  <div [ngClass]=\"topSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'Nationality'\"\r\n                   [value]=\"employeePersonalInformation.NationalityName\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"topSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'NationalNumber'\"\r\n                   [value]=\"employeePersonalInformation.NationalNumber\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"topSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'SocialSecurityNumber'\"\r\n                   [value]=\"employeePersonalInformation.SocialSecurityNumber\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n\r\n  <div [ngClass]=\"topSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'MaritalStatus'\"\r\n                   [value]=\"employeePersonalInformation.MaritalStateName\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"topSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'BirthDate'\"\r\n                   [value]=\"employeePersonalInformation.BirthDate ? (employeePersonalInformation.BirthDate | date: 'dd/MM/yyyy') : null\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"topSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'BirthPlace'\"\r\n                   [value]=\"employeePersonalInformation.BirthPlace\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n\r\n  <div [ngClass]=\"topSpacingBottomMdSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'BloodType'\"\r\n                   [value]=\"employeePersonalInformation.BloodTypeCode\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"topSpacingBottomMdSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'Religion'\"\r\n                   [value]=\"employeePersonalInformation.ReligionName\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"topSpacingBottomSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'MinistryOfLaborNumber'\"\r\n                   [value]=\"employeePersonalInformation.MinistryOfLaborNumber\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  </div>\r\n\r\n}\r\n@else {\r\n  <sky-empty-design-card [visibleIcon]=\"false\"\r\n                       [visibleQuickAction]=\"false\"\r\n                       [containerClass]=\"emptyStateContainerClass\"\r\n                       [cardBodyClass]=\"''\"\r\n                       [cardBodyContainerClass]=\"''\"\r\n                       [emptyTextClass]=\"emptyStateTextClass\"\r\n                       [emptyText]=\"isLoading ? ((sectionTitle | translate) + ' ' + ('IsLoading' | translate)) : ('ThereIsNoMainYet' | translate)\">\r\n</sky-empty-design-card>\r\n}\r\n\r\n" }]
         }], ctorParameters: () => [{ type: HRSelfWidgetsService }], propDecorators: { baseUrl: [{
                 type: Input,
                 args: [{ required: true }]
@@ -3226,12 +2186,12 @@ class MyProfileContactWidgetComponent {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MyProfileContactWidgetComponent, deps: [{ token: HRSelfWidgetsService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: MyProfileContactWidgetComponent, isStandalone: true, selector: "hr-my-profile-contact-widget", inputs: { baseUrl: "baseUrl", headerIconClass: "headerIconClass", headerTextClass: "headerTextClass", headerDividerClass: "headerDividerClass", rowClass: "rowClass", columnClass: "columnClass", responsiveTopSpacingColumnClass: "responsiveTopSpacingColumnClass", topSpacingBottomMdSpacingColumnClass: "topSpacingBottomMdSpacingColumnClass", topSpacingBottomSpacingColumnClass: "topSpacingBottomSpacingColumnClass", labelClass: "labelClass", valueClass: "valueClass", emergencyContactLabelClass: "emergencyContactLabelClass", emergencyContactColumnClass: "emergencyContactColumnClass", emergencyContactResponsiveColumnClass: "emergencyContactResponsiveColumnClass", emptyStateContainerClass: "emptyStateContainerClass", emptyStateTextClass: "emptyStateTextClass", contactIcon: "contactIcon", emergencyContactIcon: "emergencyContactIcon", sectionTitle: "sectionTitle", showEmergencyContact: "showEmergencyContact", emergencyContactRowClass: "emergencyContactRowClass" }, outputs: { isLoadingChanged: "isLoadingChanged", errorOccurred: "errorOccurred" }, ngImport: i0, template: "<sky-section-divider [fontAwesomeIcon]=\"contactIcon\"\r\n                     [text]=\"(sectionTitle | HRTranslate|uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n@if(employeePersonalInfoContactDetails){\r\n<div [ngClass]=\"rowClass\">\r\n  <div [ngClass]=\"columnClass\">\r\n    <hr-info-field [labelKey]=\"'MobileNumber'\"\r\n                   [value]=\"employeePersonalInfoContactDetails.MobileNumber\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n    <div class=\"mt-4\">\r\n      <hr-info-field [labelKey]=\"'Email'\"\r\n                     [value]=\"employeePersonalInfoContactDetails.Email\"\r\n                     [labelClass]=\"labelClass\"\r\n                     [valueClass]=\"valueClass\">\r\n      </hr-info-field>\r\n    </div>\r\n  </div>\r\n  <div [ngClass]=\"columnClass\">\r\n    <hr-info-field [labelKey]=\"'HomePhone'\"\r\n                   [value]=\"employeePersonalInfoContactDetails.HomePhone\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n    <div class=\"mt-4\">\r\n      <hr-info-field [labelKey]=\"'BusinessEmail'\"\r\n                     [value]=\"employeePersonalInfoContactDetails.BusinessEmail\"\r\n                     [labelClass]=\"labelClass\"\r\n                     [valueClass]=\"valueClass\">\r\n      </hr-info-field>\r\n    </div>\r\n  </div>\r\n</div>\r\n@if(showEmergencyContact)\r\n{\r\n<div [ngClass]=\"rowClass\">\r\n  <div class=\"col-12\">\r\n    <div [ngClass]=\"emergencyContactLabelClass\">\r\n      &#x2022; {{'EmergencyContact' | HRTranslate}}\r\n    </div>\r\n  </div>\r\n</div>\r\n<div [ngClass]=\"emergencyContactRowClass\">\r\n  <div [ngClass]=\"emergencyContactColumnClass\">\r\n    <hr-info-field [labelKey]=\"'Name'\"\r\n                   [value]=\"employeePersonalInfoContactDetails.EmergencyContact?.Name || employeePersonalInfoContactDetails.EmergencyContactLegacy\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"emergencyContactColumnClass\">\r\n    <hr-info-field [labelKey]=\"'Relation'\"\r\n                   [value]=\"employeePersonalInfoContactDetails.EmergencyContact?.Relation\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"emergencyContactResponsiveColumnClass\">\r\n    <hr-info-field [labelKey]=\"'Phone'\"\r\n                   [value]=\"employeePersonalInfoContactDetails.EmergencyContact?.PhoneNumber\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n</div>\r\n}\r\n}@else{\r\n<sky-empty-design-card [containerClass]=\"emptyStateContainerClass\"\r\n                       [cardBodyClass]=\"''\"\r\n                       [cardBodyContainerClass]=\"''\"\r\n                       [visibleIcon]=\"false\"\r\n                       [visibleQuickAction]=\"false\"\r\n                       [emptyTextClass]=\"emptyStateTextClass\"\r\n                       [emptyText]=\"isLoading ? ((sectionTitle | HRTranslate) + ' ' + ('IsLoading' | HRTranslate)) : ('ThereIsNoContactYet' | HRTranslate)\">\r\n</sky-empty-design-card>\r\n}", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i2$2.UpperCasePipe, name: "uppercase" }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "pipe", type: HRTranslatePipe, name: "HRTranslate" }, { kind: "component", type: SkySectionDividerComponent, selector: "sky-section-divider", inputs: ["text", "fontAwesomeIcon", "textClass", "dividerClass", "iconClass"] }, { kind: "component", type: SkyEmptyDesignCardComponent, selector: "sky-empty-design-card", inputs: ["emptyIcon", "emptyIconClass", "emptyText", "emptyTextClass", "actionTitle", "actionIcon", "actionDisabled", "textColor", "disabledTitleClass", "activeTitleClass", "disabledIconClass", "activeIconClass", "actionClass", "containerClass", "cardBodyClass", "cardBodyContainerClass", "visibleIcon", "visibleQuickAction"], outputs: ["onActionClick"] }, { kind: "component", type: HRInfoFieldComponent, selector: "hr-info-field", inputs: ["labelKey", "value", "labelClass", "valueClass", "fallbackValue"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MyProfileContactWidgetComponent, deps: [{ token: HRSelfWidgetsService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: MyProfileContactWidgetComponent, isStandalone: true, selector: "hr-my-profile-contact-widget", inputs: { baseUrl: "baseUrl", headerIconClass: "headerIconClass", headerTextClass: "headerTextClass", headerDividerClass: "headerDividerClass", rowClass: "rowClass", columnClass: "columnClass", responsiveTopSpacingColumnClass: "responsiveTopSpacingColumnClass", topSpacingBottomMdSpacingColumnClass: "topSpacingBottomMdSpacingColumnClass", topSpacingBottomSpacingColumnClass: "topSpacingBottomSpacingColumnClass", labelClass: "labelClass", valueClass: "valueClass", emergencyContactLabelClass: "emergencyContactLabelClass", emergencyContactColumnClass: "emergencyContactColumnClass", emergencyContactResponsiveColumnClass: "emergencyContactResponsiveColumnClass", emptyStateContainerClass: "emptyStateContainerClass", emptyStateTextClass: "emptyStateTextClass", contactIcon: "contactIcon", emergencyContactIcon: "emergencyContactIcon", sectionTitle: "sectionTitle", showEmergencyContact: "showEmergencyContact", emergencyContactRowClass: "emergencyContactRowClass" }, outputs: { isLoadingChanged: "isLoadingChanged", errorOccurred: "errorOccurred" }, ngImport: i0, template: "<sky-section-divider [fontAwesomeIcon]=\"contactIcon\"\r\n                     [text]=\"(sectionTitle | translate|uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n@if(employeePersonalInfoContactDetails){\r\n<div [ngClass]=\"rowClass\">\r\n  <div [ngClass]=\"columnClass\">\r\n    <hr-info-field [labelKey]=\"'MobileNumber'\"\r\n                   [value]=\"employeePersonalInfoContactDetails.MobileNumber\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n    <div class=\"mt-4\">\r\n      <hr-info-field [labelKey]=\"'Email'\"\r\n                     [value]=\"employeePersonalInfoContactDetails.Email\"\r\n                     [labelClass]=\"labelClass\"\r\n                     [valueClass]=\"valueClass\">\r\n      </hr-info-field>\r\n    </div>\r\n  </div>\r\n  <div [ngClass]=\"columnClass\">\r\n    <hr-info-field [labelKey]=\"'HomePhone'\"\r\n                   [value]=\"employeePersonalInfoContactDetails.HomePhone\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n    <div class=\"mt-4\">\r\n      <hr-info-field [labelKey]=\"'BusinessEmail'\"\r\n                     [value]=\"employeePersonalInfoContactDetails.BusinessEmail\"\r\n                     [labelClass]=\"labelClass\"\r\n                     [valueClass]=\"valueClass\">\r\n      </hr-info-field>\r\n    </div>\r\n  </div>\r\n</div>\r\n@if(showEmergencyContact)\r\n{\r\n<div [ngClass]=\"rowClass\">\r\n  <div class=\"col-12\">\r\n    <div [ngClass]=\"emergencyContactLabelClass\">\r\n      &#x2022; {{'EmergencyContact' | translate}}\r\n    </div>\r\n  </div>\r\n</div>\r\n<div [ngClass]=\"emergencyContactRowClass\">\r\n  <div [ngClass]=\"emergencyContactColumnClass\">\r\n    <hr-info-field [labelKey]=\"'Name'\"\r\n                   [value]=\"employeePersonalInfoContactDetails.EmergencyContact?.Name || employeePersonalInfoContactDetails.EmergencyContactLegacy\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"emergencyContactColumnClass\">\r\n    <hr-info-field [labelKey]=\"'Relation'\"\r\n                   [value]=\"employeePersonalInfoContactDetails.EmergencyContact?.Relation\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"emergencyContactResponsiveColumnClass\">\r\n    <hr-info-field [labelKey]=\"'Phone'\"\r\n                   [value]=\"employeePersonalInfoContactDetails.EmergencyContact?.PhoneNumber\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n</div>\r\n}\r\n}@else{\r\n<sky-empty-design-card [containerClass]=\"emptyStateContainerClass\"\r\n                       [cardBodyClass]=\"''\"\r\n                       [cardBodyContainerClass]=\"''\"\r\n                       [visibleIcon]=\"false\"\r\n                       [visibleQuickAction]=\"false\"\r\n                       [emptyTextClass]=\"emptyStateTextClass\"\r\n                       [emptyText]=\"isLoading ? ((sectionTitle | translate) + ' ' + ('IsLoading' | translate)) : ('ThereIsNoContactYet' | translate)\">\r\n</sky-empty-design-card>\r\n}", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: SkySectionDividerComponent, selector: "sky-section-divider", inputs: ["text", "fontAwesomeIcon", "textClass", "dividerClass", "iconClass"] }, { kind: "component", type: SkyEmptyDesignCardComponent, selector: "sky-empty-design-card", inputs: ["emptyIcon", "emptyIconClass", "emptyText", "emptyTextClass", "actionTitle", "actionIcon", "actionDisabled", "textColor", "disabledTitleClass", "activeTitleClass", "disabledIconClass", "activeIconClass", "actionClass", "containerClass", "cardBodyClass", "cardBodyContainerClass", "visibleIcon", "visibleQuickAction"], outputs: ["onActionClick"] }, { kind: "component", type: HRInfoFieldComponent, selector: "hr-info-field", inputs: ["labelKey", "value", "labelClass", "valueClass", "fallbackValue"] }, { kind: "pipe", type: i2$3.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MyProfileContactWidgetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MyProfileContactWidgetComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'hr-my-profile-contact-widget', standalone: true, imports: [CommonModule, FontAwesomeModule, HRTranslatePipe, SkySectionDividerComponent, SkyEmptyDesignCardComponent, HRInfoFieldComponent], template: "<sky-section-divider [fontAwesomeIcon]=\"contactIcon\"\r\n                     [text]=\"(sectionTitle | HRTranslate|uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n@if(employeePersonalInfoContactDetails){\r\n<div [ngClass]=\"rowClass\">\r\n  <div [ngClass]=\"columnClass\">\r\n    <hr-info-field [labelKey]=\"'MobileNumber'\"\r\n                   [value]=\"employeePersonalInfoContactDetails.MobileNumber\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n    <div class=\"mt-4\">\r\n      <hr-info-field [labelKey]=\"'Email'\"\r\n                     [value]=\"employeePersonalInfoContactDetails.Email\"\r\n                     [labelClass]=\"labelClass\"\r\n                     [valueClass]=\"valueClass\">\r\n      </hr-info-field>\r\n    </div>\r\n  </div>\r\n  <div [ngClass]=\"columnClass\">\r\n    <hr-info-field [labelKey]=\"'HomePhone'\"\r\n                   [value]=\"employeePersonalInfoContactDetails.HomePhone\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n    <div class=\"mt-4\">\r\n      <hr-info-field [labelKey]=\"'BusinessEmail'\"\r\n                     [value]=\"employeePersonalInfoContactDetails.BusinessEmail\"\r\n                     [labelClass]=\"labelClass\"\r\n                     [valueClass]=\"valueClass\">\r\n      </hr-info-field>\r\n    </div>\r\n  </div>\r\n</div>\r\n@if(showEmergencyContact)\r\n{\r\n<div [ngClass]=\"rowClass\">\r\n  <div class=\"col-12\">\r\n    <div [ngClass]=\"emergencyContactLabelClass\">\r\n      &#x2022; {{'EmergencyContact' | HRTranslate}}\r\n    </div>\r\n  </div>\r\n</div>\r\n<div [ngClass]=\"emergencyContactRowClass\">\r\n  <div [ngClass]=\"emergencyContactColumnClass\">\r\n    <hr-info-field [labelKey]=\"'Name'\"\r\n                   [value]=\"employeePersonalInfoContactDetails.EmergencyContact?.Name || employeePersonalInfoContactDetails.EmergencyContactLegacy\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"emergencyContactColumnClass\">\r\n    <hr-info-field [labelKey]=\"'Relation'\"\r\n                   [value]=\"employeePersonalInfoContactDetails.EmergencyContact?.Relation\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"emergencyContactResponsiveColumnClass\">\r\n    <hr-info-field [labelKey]=\"'Phone'\"\r\n                   [value]=\"employeePersonalInfoContactDetails.EmergencyContact?.PhoneNumber\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n</div>\r\n}\r\n}@else{\r\n<sky-empty-design-card [containerClass]=\"emptyStateContainerClass\"\r\n                       [cardBodyClass]=\"''\"\r\n                       [cardBodyContainerClass]=\"''\"\r\n                       [visibleIcon]=\"false\"\r\n                       [visibleQuickAction]=\"false\"\r\n                       [emptyTextClass]=\"emptyStateTextClass\"\r\n                       [emptyText]=\"isLoading ? ((sectionTitle | HRTranslate) + ' ' + ('IsLoading' | HRTranslate)) : ('ThereIsNoContactYet' | HRTranslate)\">\r\n</sky-empty-design-card>\r\n}" }]
+            args: [{ selector: 'hr-my-profile-contact-widget', standalone: true, imports: [CommonModule, FontAwesomeModule, TranslatePipe, SkySectionDividerComponent, SkyEmptyDesignCardComponent, HRInfoFieldComponent], template: "<sky-section-divider [fontAwesomeIcon]=\"contactIcon\"\r\n                     [text]=\"(sectionTitle | translate|uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n@if(employeePersonalInfoContactDetails){\r\n<div [ngClass]=\"rowClass\">\r\n  <div [ngClass]=\"columnClass\">\r\n    <hr-info-field [labelKey]=\"'MobileNumber'\"\r\n                   [value]=\"employeePersonalInfoContactDetails.MobileNumber\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n    <div class=\"mt-4\">\r\n      <hr-info-field [labelKey]=\"'Email'\"\r\n                     [value]=\"employeePersonalInfoContactDetails.Email\"\r\n                     [labelClass]=\"labelClass\"\r\n                     [valueClass]=\"valueClass\">\r\n      </hr-info-field>\r\n    </div>\r\n  </div>\r\n  <div [ngClass]=\"columnClass\">\r\n    <hr-info-field [labelKey]=\"'HomePhone'\"\r\n                   [value]=\"employeePersonalInfoContactDetails.HomePhone\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n    <div class=\"mt-4\">\r\n      <hr-info-field [labelKey]=\"'BusinessEmail'\"\r\n                     [value]=\"employeePersonalInfoContactDetails.BusinessEmail\"\r\n                     [labelClass]=\"labelClass\"\r\n                     [valueClass]=\"valueClass\">\r\n      </hr-info-field>\r\n    </div>\r\n  </div>\r\n</div>\r\n@if(showEmergencyContact)\r\n{\r\n<div [ngClass]=\"rowClass\">\r\n  <div class=\"col-12\">\r\n    <div [ngClass]=\"emergencyContactLabelClass\">\r\n      &#x2022; {{'EmergencyContact' | translate}}\r\n    </div>\r\n  </div>\r\n</div>\r\n<div [ngClass]=\"emergencyContactRowClass\">\r\n  <div [ngClass]=\"emergencyContactColumnClass\">\r\n    <hr-info-field [labelKey]=\"'Name'\"\r\n                   [value]=\"employeePersonalInfoContactDetails.EmergencyContact?.Name || employeePersonalInfoContactDetails.EmergencyContactLegacy\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"emergencyContactColumnClass\">\r\n    <hr-info-field [labelKey]=\"'Relation'\"\r\n                   [value]=\"employeePersonalInfoContactDetails.EmergencyContact?.Relation\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"emergencyContactResponsiveColumnClass\">\r\n    <hr-info-field [labelKey]=\"'Phone'\"\r\n                   [value]=\"employeePersonalInfoContactDetails.EmergencyContact?.PhoneNumber\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n</div>\r\n}\r\n}@else{\r\n<sky-empty-design-card [containerClass]=\"emptyStateContainerClass\"\r\n                       [cardBodyClass]=\"''\"\r\n                       [cardBodyContainerClass]=\"''\"\r\n                       [visibleIcon]=\"false\"\r\n                       [visibleQuickAction]=\"false\"\r\n                       [emptyTextClass]=\"emptyStateTextClass\"\r\n                       [emptyText]=\"isLoading ? ((sectionTitle | translate) + ' ' + ('IsLoading' | translate)) : ('ThereIsNoContactYet' | translate)\">\r\n</sky-empty-design-card>\r\n}" }]
         }], ctorParameters: () => [{ type: HRSelfWidgetsService }], propDecorators: { baseUrl: [{
                 type: Input,
                 args: [{ required: true }]
@@ -3329,12 +2289,12 @@ class MyProfileLanguagesWidgetComponent {
     getLanguages() {
         return this.languages?.join(', ') || '-';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MyProfileLanguagesWidgetComponent, deps: [{ token: HRSelfWidgetsService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: MyProfileLanguagesWidgetComponent, isStandalone: true, selector: "hr-my-profile-languages-widget", inputs: { baseUrl: "baseUrl", headerIconClass: "headerIconClass", headerTextClass: "headerTextClass", headerDividerClass: "headerDividerClass", contentTextClass: "contentTextClass", emptyStateContainerClass: "emptyStateContainerClass", emptyStateTextClass: "emptyStateTextClass", languagesIcon: "languagesIcon", sectionTitle: "sectionTitle" }, outputs: { hasDataChange: "hasDataChange", isLoadingChanged: "isLoadingChanged", errorOccurred: "errorOccurred" }, ngImport: i0, template: "<sky-section-divider [fontAwesomeIcon]=\"languagesIcon\"\r\n                     [text]=\"(sectionTitle | HRTranslate | uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n@if((languages?.length ?? 0) > 0){\r\n<div [ngClass]=\"contentTextClass\">\r\n  {{getLanguages()}}\r\n</div>\r\n}@else{\r\n<sky-empty-design-card [visibleIcon]=\"false\"\r\n                       [visibleQuickAction]=\"false\"\r\n                       [containerClass]=\"emptyStateContainerClass\"\r\n                       [cardBodyClass]=\"''\"\r\n                       [cardBodyContainerClass]=\"''\"\r\n                       [emptyTextClass]=\"emptyStateTextClass\"\r\n                       [emptyText]=\"isLoading ? ((sectionTitle | HRTranslate) + ' ' + ('IsLoading' | HRTranslate)) : ('ThereIsNoLanguagesYet' | HRTranslate)\">\r\n</sky-empty-design-card>\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i2$2.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: HRTranslatePipe, name: "HRTranslate" }, { kind: "component", type: SkySectionDividerComponent, selector: "sky-section-divider", inputs: ["text", "fontAwesomeIcon", "textClass", "dividerClass", "iconClass"] }, { kind: "component", type: SkyEmptyDesignCardComponent, selector: "sky-empty-design-card", inputs: ["emptyIcon", "emptyIconClass", "emptyText", "emptyTextClass", "actionTitle", "actionIcon", "actionDisabled", "textColor", "disabledTitleClass", "activeTitleClass", "disabledIconClass", "activeIconClass", "actionClass", "containerClass", "cardBodyClass", "cardBodyContainerClass", "visibleIcon", "visibleQuickAction"], outputs: ["onActionClick"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MyProfileLanguagesWidgetComponent, deps: [{ token: HRSelfWidgetsService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: MyProfileLanguagesWidgetComponent, isStandalone: true, selector: "hr-my-profile-languages-widget", inputs: { baseUrl: "baseUrl", headerIconClass: "headerIconClass", headerTextClass: "headerTextClass", headerDividerClass: "headerDividerClass", contentTextClass: "contentTextClass", emptyStateContainerClass: "emptyStateContainerClass", emptyStateTextClass: "emptyStateTextClass", languagesIcon: "languagesIcon", sectionTitle: "sectionTitle" }, outputs: { hasDataChange: "hasDataChange", isLoadingChanged: "isLoadingChanged", errorOccurred: "errorOccurred" }, ngImport: i0, template: "<sky-section-divider [fontAwesomeIcon]=\"languagesIcon\"\r\n                     [text]=\"(sectionTitle | translate | uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n@if((languages?.length ?? 0) > 0){\r\n<div [ngClass]=\"contentTextClass\">\r\n  {{getLanguages()}}\r\n</div>\r\n}@else{\r\n<sky-empty-design-card [visibleIcon]=\"false\"\r\n                       [visibleQuickAction]=\"false\"\r\n                       [containerClass]=\"emptyStateContainerClass\"\r\n                       [cardBodyClass]=\"''\"\r\n                       [cardBodyContainerClass]=\"''\"\r\n                       [emptyTextClass]=\"emptyStateTextClass\"\r\n                       [emptyText]=\"isLoading ? ((sectionTitle | translate) + ' ' + ('IsLoading' | translate)) : ('ThereIsNoLanguagesYet' | translate)\">\r\n</sky-empty-design-card>\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SkySectionDividerComponent, selector: "sky-section-divider", inputs: ["text", "fontAwesomeIcon", "textClass", "dividerClass", "iconClass"] }, { kind: "component", type: SkyEmptyDesignCardComponent, selector: "sky-empty-design-card", inputs: ["emptyIcon", "emptyIconClass", "emptyText", "emptyTextClass", "actionTitle", "actionIcon", "actionDisabled", "textColor", "disabledTitleClass", "activeTitleClass", "disabledIconClass", "activeIconClass", "actionClass", "containerClass", "cardBodyClass", "cardBodyContainerClass", "visibleIcon", "visibleQuickAction"], outputs: ["onActionClick"] }, { kind: "pipe", type: i2$3.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MyProfileLanguagesWidgetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MyProfileLanguagesWidgetComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'hr-my-profile-languages-widget', standalone: true, imports: [CommonModule, HRTranslatePipe, SkySectionDividerComponent, SkyEmptyDesignCardComponent], template: "<sky-section-divider [fontAwesomeIcon]=\"languagesIcon\"\r\n                     [text]=\"(sectionTitle | HRTranslate | uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n@if((languages?.length ?? 0) > 0){\r\n<div [ngClass]=\"contentTextClass\">\r\n  {{getLanguages()}}\r\n</div>\r\n}@else{\r\n<sky-empty-design-card [visibleIcon]=\"false\"\r\n                       [visibleQuickAction]=\"false\"\r\n                       [containerClass]=\"emptyStateContainerClass\"\r\n                       [cardBodyClass]=\"''\"\r\n                       [cardBodyContainerClass]=\"''\"\r\n                       [emptyTextClass]=\"emptyStateTextClass\"\r\n                       [emptyText]=\"isLoading ? ((sectionTitle | HRTranslate) + ' ' + ('IsLoading' | HRTranslate)) : ('ThereIsNoLanguagesYet' | HRTranslate)\">\r\n</sky-empty-design-card>\r\n}\r\n" }]
+            args: [{ selector: 'hr-my-profile-languages-widget', standalone: true, imports: [CommonModule, TranslatePipe, SkySectionDividerComponent, SkyEmptyDesignCardComponent], template: "<sky-section-divider [fontAwesomeIcon]=\"languagesIcon\"\r\n                     [text]=\"(sectionTitle | translate | uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n@if((languages?.length ?? 0) > 0){\r\n<div [ngClass]=\"contentTextClass\">\r\n  {{getLanguages()}}\r\n</div>\r\n}@else{\r\n<sky-empty-design-card [visibleIcon]=\"false\"\r\n                       [visibleQuickAction]=\"false\"\r\n                       [containerClass]=\"emptyStateContainerClass\"\r\n                       [cardBodyClass]=\"''\"\r\n                       [cardBodyContainerClass]=\"''\"\r\n                       [emptyTextClass]=\"emptyStateTextClass\"\r\n                       [emptyText]=\"isLoading ? ((sectionTitle | translate) + ' ' + ('IsLoading' | translate)) : ('ThereIsNoLanguagesYet' | translate)\">\r\n</sky-empty-design-card>\r\n}\r\n" }]
         }], ctorParameters: () => [{ type: HRSelfWidgetsService }], propDecorators: { baseUrl: [{
                 type: Input
             }], headerIconClass: [{
@@ -3410,12 +2370,12 @@ class MyProfileOtherNationalitiesWidgetComponent {
     getOtherNationalities() {
         return this.personalInfo?.join(', ') || '-';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MyProfileOtherNationalitiesWidgetComponent, deps: [{ token: HRSelfWidgetsService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: MyProfileOtherNationalitiesWidgetComponent, isStandalone: true, selector: "hr-my-profile-other-nationalities-widget", inputs: { baseUrl: "baseUrl", headerIconClass: "headerIconClass", headerTextClass: "headerTextClass", headerDividerClass: "headerDividerClass", contentTextClass: "contentTextClass", emptyStateContainerClass: "emptyStateContainerClass", emptyStateTextClass: "emptyStateTextClass", emptyStateTextKey: "emptyStateTextKey", otherNationalitiesIcon: "otherNationalitiesIcon", sectionTitle: "sectionTitle" }, outputs: { hasDataChange: "hasDataChange", isLoadingChanged: "isLoadingChanged", errorOccurred: "errorOccurred" }, ngImport: i0, template: "<sky-section-divider [fontAwesomeIcon]=\"otherNationalitiesIcon\"\r\n                     [text]=\"( sectionTitle | HRTranslate |uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n@if((personalInfo?.length ?? 0) > 0){\r\n<div [ngClass]=\"contentTextClass\">\r\n  {{getOtherNationalities()}}\r\n</div>\r\n}@else{\r\n<sky-empty-design-card [visibleIcon]=\"false\"\r\n                       [visibleQuickAction]=\"false\"\r\n                       [containerClass]=\"emptyStateContainerClass\"\r\n                       [cardBodyClass]=\"''\"\r\n                       [cardBodyContainerClass]=\"''\"\r\n                       [emptyTextClass]=\"emptyStateTextClass\"\r\n                       [emptyText]=\"isLoading ? ((sectionTitle | HRTranslate) + ' ' + ('IsLoading' | HRTranslate)) : (emptyStateTextKey | HRTranslate)\">\r\n</sky-empty-design-card>\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i2$2.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: HRTranslatePipe, name: "HRTranslate" }, { kind: "component", type: SkySectionDividerComponent, selector: "sky-section-divider", inputs: ["text", "fontAwesomeIcon", "textClass", "dividerClass", "iconClass"] }, { kind: "component", type: SkyEmptyDesignCardComponent, selector: "sky-empty-design-card", inputs: ["emptyIcon", "emptyIconClass", "emptyText", "emptyTextClass", "actionTitle", "actionIcon", "actionDisabled", "textColor", "disabledTitleClass", "activeTitleClass", "disabledIconClass", "activeIconClass", "actionClass", "containerClass", "cardBodyClass", "cardBodyContainerClass", "visibleIcon", "visibleQuickAction"], outputs: ["onActionClick"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MyProfileOtherNationalitiesWidgetComponent, deps: [{ token: HRSelfWidgetsService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: MyProfileOtherNationalitiesWidgetComponent, isStandalone: true, selector: "hr-my-profile-other-nationalities-widget", inputs: { baseUrl: "baseUrl", headerIconClass: "headerIconClass", headerTextClass: "headerTextClass", headerDividerClass: "headerDividerClass", contentTextClass: "contentTextClass", emptyStateContainerClass: "emptyStateContainerClass", emptyStateTextClass: "emptyStateTextClass", emptyStateTextKey: "emptyStateTextKey", otherNationalitiesIcon: "otherNationalitiesIcon", sectionTitle: "sectionTitle" }, outputs: { hasDataChange: "hasDataChange", isLoadingChanged: "isLoadingChanged", errorOccurred: "errorOccurred" }, ngImport: i0, template: "<sky-section-divider [fontAwesomeIcon]=\"otherNationalitiesIcon\"\r\n                     [text]=\"( sectionTitle | translate |uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n@if((personalInfo?.length ?? 0) > 0){\r\n<div [ngClass]=\"contentTextClass\">\r\n  {{getOtherNationalities()}}\r\n</div>\r\n}@else{\r\n<sky-empty-design-card [visibleIcon]=\"false\"\r\n                       [visibleQuickAction]=\"false\"\r\n                       [containerClass]=\"emptyStateContainerClass\"\r\n                       [cardBodyClass]=\"''\"\r\n                       [cardBodyContainerClass]=\"''\"\r\n                       [emptyTextClass]=\"emptyStateTextClass\"\r\n                       [emptyText]=\"isLoading ? ((sectionTitle | translate) + ' ' + ('IsLoading' | translate)) : (emptyStateTextKey | translate)\">\r\n</sky-empty-design-card>\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SkySectionDividerComponent, selector: "sky-section-divider", inputs: ["text", "fontAwesomeIcon", "textClass", "dividerClass", "iconClass"] }, { kind: "component", type: SkyEmptyDesignCardComponent, selector: "sky-empty-design-card", inputs: ["emptyIcon", "emptyIconClass", "emptyText", "emptyTextClass", "actionTitle", "actionIcon", "actionDisabled", "textColor", "disabledTitleClass", "activeTitleClass", "disabledIconClass", "activeIconClass", "actionClass", "containerClass", "cardBodyClass", "cardBodyContainerClass", "visibleIcon", "visibleQuickAction"], outputs: ["onActionClick"] }, { kind: "pipe", type: i2$3.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MyProfileOtherNationalitiesWidgetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MyProfileOtherNationalitiesWidgetComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'hr-my-profile-other-nationalities-widget', standalone: true, imports: [CommonModule, HRTranslatePipe, SkySectionDividerComponent, SkyEmptyDesignCardComponent], template: "<sky-section-divider [fontAwesomeIcon]=\"otherNationalitiesIcon\"\r\n                     [text]=\"( sectionTitle | HRTranslate |uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n@if((personalInfo?.length ?? 0) > 0){\r\n<div [ngClass]=\"contentTextClass\">\r\n  {{getOtherNationalities()}}\r\n</div>\r\n}@else{\r\n<sky-empty-design-card [visibleIcon]=\"false\"\r\n                       [visibleQuickAction]=\"false\"\r\n                       [containerClass]=\"emptyStateContainerClass\"\r\n                       [cardBodyClass]=\"''\"\r\n                       [cardBodyContainerClass]=\"''\"\r\n                       [emptyTextClass]=\"emptyStateTextClass\"\r\n                       [emptyText]=\"isLoading ? ((sectionTitle | HRTranslate) + ' ' + ('IsLoading' | HRTranslate)) : (emptyStateTextKey | HRTranslate)\">\r\n</sky-empty-design-card>\r\n}\r\n" }]
+            args: [{ selector: 'hr-my-profile-other-nationalities-widget', standalone: true, imports: [CommonModule, TranslatePipe, SkySectionDividerComponent, SkyEmptyDesignCardComponent], template: "<sky-section-divider [fontAwesomeIcon]=\"otherNationalitiesIcon\"\r\n                     [text]=\"( sectionTitle | translate |uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n@if((personalInfo?.length ?? 0) > 0){\r\n<div [ngClass]=\"contentTextClass\">\r\n  {{getOtherNationalities()}}\r\n</div>\r\n}@else{\r\n<sky-empty-design-card [visibleIcon]=\"false\"\r\n                       [visibleQuickAction]=\"false\"\r\n                       [containerClass]=\"emptyStateContainerClass\"\r\n                       [cardBodyClass]=\"''\"\r\n                       [cardBodyContainerClass]=\"''\"\r\n                       [emptyTextClass]=\"emptyStateTextClass\"\r\n                       [emptyText]=\"isLoading ? ((sectionTitle | translate) + ' ' + ('IsLoading' | translate)) : (emptyStateTextKey | translate)\">\r\n</sky-empty-design-card>\r\n}\r\n" }]
         }], ctorParameters: () => [{ type: HRSelfWidgetsService }], propDecorators: { baseUrl: [{
                 type: Input,
                 args: [{ required: true }]
@@ -3488,12 +2448,12 @@ class MyProfileAddressWidgetComponent {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MyProfileAddressWidgetComponent, deps: [{ token: HRSelfWidgetsService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: MyProfileAddressWidgetComponent, isStandalone: true, selector: "hr-my-profile-address-widget", inputs: { baseUrl: "baseUrl", headerIconClass: "headerIconClass", headerTextClass: "headerTextClass", headerDividerClass: "headerDividerClass", rowClass: "rowClass", columnClass: "columnClass", responsiveTopSpacingColumnClass: "responsiveTopSpacingColumnClass", topSpacingBottomSpacingColumnClass: "topSpacingBottomSpacingColumnClass", labelClass: "labelClass", valueClass: "valueClass", emptyStateContainerClass: "emptyStateContainerClass", emptyStateTextClass: "emptyStateTextClass", addressIcon: "addressIcon", sectionTitle: "sectionTitle" }, outputs: { isLoadingChanged: "isLoadingChanged", errorOccurred: "errorOccurred" }, ngImport: i0, template: "<sky-section-divider [fontAwesomeIcon]=\"addressIcon\"\r\n                     [text]=\"( sectionTitle | HRTranslate | uppercase )\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n@if(personalInfoAddressDetails){\r\n<div [ngClass]=\"rowClass\">\r\n  <div [ngClass]=\"columnClass\">\r\n    <hr-info-field [labelKey]=\"'Address'\"\r\n                   [value]=\"personalInfoAddressDetails.Address\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n\r\n  <div [ngClass]=\"columnClass\">\r\n    <hr-info-field [labelKey]=\"'City'\"\r\n                   [value]=\"personalInfoAddressDetails.City\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n\r\n  <div [ngClass]=\"responsiveTopSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'P.OBox'\"\r\n                   [value]=\"personalInfoAddressDetails.POBox\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n\r\n  <div [ngClass]=\"topSpacingBottomSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'PostalCode'\"\r\n                   [value]=\"personalInfoAddressDetails.PostalCode\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n</div>\r\n}@else{\r\n<sky-empty-design-card [containerClass]=\"emptyStateContainerClass\"\r\n                       [cardBodyClass]=\"''\"\r\n                       [cardBodyContainerClass]=\"''\"\r\n                       [visibleIcon]=\"false\"\r\n                       [visibleQuickAction]=\"false\"\r\n                       [emptyTextClass]=\"emptyStateTextClass\"\r\n                       [emptyText]=\"isLoading ? ((sectionTitle | HRTranslate) + ' ' + ('IsLoading' | HRTranslate)) : ('ThereIsNoAddressYet' | HRTranslate)\">\r\n</sky-empty-design-card>\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i2$2.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: HRTranslatePipe, name: "HRTranslate" }, { kind: "component", type: SkySectionDividerComponent, selector: "sky-section-divider", inputs: ["text", "fontAwesomeIcon", "textClass", "dividerClass", "iconClass"] }, { kind: "component", type: SkyEmptyDesignCardComponent, selector: "sky-empty-design-card", inputs: ["emptyIcon", "emptyIconClass", "emptyText", "emptyTextClass", "actionTitle", "actionIcon", "actionDisabled", "textColor", "disabledTitleClass", "activeTitleClass", "disabledIconClass", "activeIconClass", "actionClass", "containerClass", "cardBodyClass", "cardBodyContainerClass", "visibleIcon", "visibleQuickAction"], outputs: ["onActionClick"] }, { kind: "component", type: HRInfoFieldComponent, selector: "hr-info-field", inputs: ["labelKey", "value", "labelClass", "valueClass", "fallbackValue"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MyProfileAddressWidgetComponent, deps: [{ token: HRSelfWidgetsService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: MyProfileAddressWidgetComponent, isStandalone: true, selector: "hr-my-profile-address-widget", inputs: { baseUrl: "baseUrl", headerIconClass: "headerIconClass", headerTextClass: "headerTextClass", headerDividerClass: "headerDividerClass", rowClass: "rowClass", columnClass: "columnClass", responsiveTopSpacingColumnClass: "responsiveTopSpacingColumnClass", topSpacingBottomSpacingColumnClass: "topSpacingBottomSpacingColumnClass", labelClass: "labelClass", valueClass: "valueClass", emptyStateContainerClass: "emptyStateContainerClass", emptyStateTextClass: "emptyStateTextClass", addressIcon: "addressIcon", sectionTitle: "sectionTitle" }, outputs: { isLoadingChanged: "isLoadingChanged", errorOccurred: "errorOccurred" }, ngImport: i0, template: "<sky-section-divider [fontAwesomeIcon]=\"addressIcon\"\r\n                     [text]=\"( sectionTitle | translate | uppercase )\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n@if(personalInfoAddressDetails){\r\n<div [ngClass]=\"rowClass\">\r\n  <div [ngClass]=\"columnClass\">\r\n    <hr-info-field [labelKey]=\"'Address'\"\r\n                   [value]=\"personalInfoAddressDetails.Address\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n\r\n  <div [ngClass]=\"columnClass\">\r\n    <hr-info-field [labelKey]=\"'City'\"\r\n                   [value]=\"personalInfoAddressDetails.City\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n\r\n  <div [ngClass]=\"responsiveTopSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'P.OBox'\"\r\n                   [value]=\"personalInfoAddressDetails.POBox\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n\r\n  <div [ngClass]=\"topSpacingBottomSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'PostalCode'\"\r\n                   [value]=\"personalInfoAddressDetails.PostalCode\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n</div>\r\n}@else{\r\n<sky-empty-design-card [containerClass]=\"emptyStateContainerClass\"\r\n                       [cardBodyClass]=\"''\"\r\n                       [cardBodyContainerClass]=\"''\"\r\n                       [visibleIcon]=\"false\"\r\n                       [visibleQuickAction]=\"false\"\r\n                       [emptyTextClass]=\"emptyStateTextClass\"\r\n                       [emptyText]=\"isLoading ? ((sectionTitle | translate) + ' ' + ('IsLoading' | translate)) : ('ThereIsNoAddressYet' | translate)\">\r\n</sky-empty-design-card>\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SkySectionDividerComponent, selector: "sky-section-divider", inputs: ["text", "fontAwesomeIcon", "textClass", "dividerClass", "iconClass"] }, { kind: "component", type: SkyEmptyDesignCardComponent, selector: "sky-empty-design-card", inputs: ["emptyIcon", "emptyIconClass", "emptyText", "emptyTextClass", "actionTitle", "actionIcon", "actionDisabled", "textColor", "disabledTitleClass", "activeTitleClass", "disabledIconClass", "activeIconClass", "actionClass", "containerClass", "cardBodyClass", "cardBodyContainerClass", "visibleIcon", "visibleQuickAction"], outputs: ["onActionClick"] }, { kind: "component", type: HRInfoFieldComponent, selector: "hr-info-field", inputs: ["labelKey", "value", "labelClass", "valueClass", "fallbackValue"] }, { kind: "pipe", type: i2$3.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MyProfileAddressWidgetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MyProfileAddressWidgetComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'hr-my-profile-address-widget', standalone: true, imports: [CommonModule, HRTranslatePipe, SkySectionDividerComponent, SkyEmptyDesignCardComponent, HRInfoFieldComponent], template: "<sky-section-divider [fontAwesomeIcon]=\"addressIcon\"\r\n                     [text]=\"( sectionTitle | HRTranslate | uppercase )\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n@if(personalInfoAddressDetails){\r\n<div [ngClass]=\"rowClass\">\r\n  <div [ngClass]=\"columnClass\">\r\n    <hr-info-field [labelKey]=\"'Address'\"\r\n                   [value]=\"personalInfoAddressDetails.Address\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n\r\n  <div [ngClass]=\"columnClass\">\r\n    <hr-info-field [labelKey]=\"'City'\"\r\n                   [value]=\"personalInfoAddressDetails.City\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n\r\n  <div [ngClass]=\"responsiveTopSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'P.OBox'\"\r\n                   [value]=\"personalInfoAddressDetails.POBox\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n\r\n  <div [ngClass]=\"topSpacingBottomSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'PostalCode'\"\r\n                   [value]=\"personalInfoAddressDetails.PostalCode\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n</div>\r\n}@else{\r\n<sky-empty-design-card [containerClass]=\"emptyStateContainerClass\"\r\n                       [cardBodyClass]=\"''\"\r\n                       [cardBodyContainerClass]=\"''\"\r\n                       [visibleIcon]=\"false\"\r\n                       [visibleQuickAction]=\"false\"\r\n                       [emptyTextClass]=\"emptyStateTextClass\"\r\n                       [emptyText]=\"isLoading ? ((sectionTitle | HRTranslate) + ' ' + ('IsLoading' | HRTranslate)) : ('ThereIsNoAddressYet' | HRTranslate)\">\r\n</sky-empty-design-card>\r\n}\r\n" }]
+            args: [{ selector: 'hr-my-profile-address-widget', standalone: true, imports: [CommonModule, TranslatePipe, SkySectionDividerComponent, SkyEmptyDesignCardComponent, HRInfoFieldComponent], template: "<sky-section-divider [fontAwesomeIcon]=\"addressIcon\"\r\n                     [text]=\"( sectionTitle | translate | uppercase )\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n@if(personalInfoAddressDetails){\r\n<div [ngClass]=\"rowClass\">\r\n  <div [ngClass]=\"columnClass\">\r\n    <hr-info-field [labelKey]=\"'Address'\"\r\n                   [value]=\"personalInfoAddressDetails.Address\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n\r\n  <div [ngClass]=\"columnClass\">\r\n    <hr-info-field [labelKey]=\"'City'\"\r\n                   [value]=\"personalInfoAddressDetails.City\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n\r\n  <div [ngClass]=\"responsiveTopSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'P.OBox'\"\r\n                   [value]=\"personalInfoAddressDetails.POBox\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n\r\n  <div [ngClass]=\"topSpacingBottomSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'PostalCode'\"\r\n                   [value]=\"personalInfoAddressDetails.PostalCode\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n</div>\r\n}@else{\r\n<sky-empty-design-card [containerClass]=\"emptyStateContainerClass\"\r\n                       [cardBodyClass]=\"''\"\r\n                       [cardBodyContainerClass]=\"''\"\r\n                       [visibleIcon]=\"false\"\r\n                       [visibleQuickAction]=\"false\"\r\n                       [emptyTextClass]=\"emptyStateTextClass\"\r\n                       [emptyText]=\"isLoading ? ((sectionTitle | translate) + ' ' + ('IsLoading' | translate)) : ('ThereIsNoAddressYet' | translate)\">\r\n</sky-empty-design-card>\r\n}\r\n" }]
         }], ctorParameters: () => [{ type: HRSelfWidgetsService }], propDecorators: { baseUrl: [{
                 type: Input,
                 args: [{ required: true }]
@@ -3573,12 +2533,12 @@ class MyProfileJobInfoWidgetComponent {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MyProfileJobInfoWidgetComponent, deps: [{ token: HRSelfWidgetsService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: MyProfileJobInfoWidgetComponent, isStandalone: true, selector: "hr-my-profile-job-info-widget", inputs: { baseUrl: "baseUrl", headerIconClass: "headerIconClass", headerTextClass: "headerTextClass", headerDividerClass: "headerDividerClass", rowClass: "rowClass", columnClass: "columnClass", responsiveTopSpacingColumnClass: "responsiveTopSpacingColumnClass", topSpacingBottomMdSpacingColumnClass: "topSpacingBottomMdSpacingColumnClass", topSpacingBottomSpacingColumnClass: "topSpacingBottomSpacingColumnClass", labelClass: "labelClass", valueClass: "valueClass", emptyStateContainerClass: "emptyStateContainerClass", emptyStateTextClass: "emptyStateTextClass", mainIcon: "mainIcon", sectionTitle: "sectionTitle" }, outputs: { isLoadingChanged: "isLoadingChanged", errorOccurred: "errorOccurred" }, ngImport: i0, template: "<sky-section-divider [fontAwesomeIcon]=\"mainIcon\"\r\n                     [text]=\"(sectionTitle | HRTranslate | uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n@if(jobInformationMain){\r\n<div [ngClass]=\"rowClass\">\r\n  <div [ngClass]=\"columnClass\">\r\n    <hr-info-field [labelKey]=\"'AdminUnit'\"\r\n                   [value]=\"jobInformationMain.AdminUnitName\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"columnClass\">\r\n    <hr-info-field [labelKey]=\"'Position'\"\r\n                   [value]=\"jobInformationMain.PositionName\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"responsiveTopSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'Grade'\"\r\n                   [value]=\"jobInformationMain.GradeName\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n\r\n  <div [ngClass]=\"topSpacingBottomMdSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'JoiningDate'\"\r\n                   [value]=\"jobInformationMain.JoiningDate ? (jobInformationMain.JoiningDate | date: 'dd/MM/yyyy') : null\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"topSpacingBottomMdSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'CorporateJoiningDate'\"\r\n                   [value]=\"jobInformationMain.CorporateJoiningDate ? (jobInformationMain.CorporateJoiningDate | date: 'dd/MM/yyyy') : null\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"topSpacingBottomSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'Sponsor'\"\r\n                   [value]=\"jobInformationMain.SponsorName\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n</div>\r\n}@else{\r\n<sky-empty-design-card [visibleIcon]=\"false\"\r\n                       [visibleQuickAction]=\"false\"\r\n                       [containerClass]=\"emptyStateContainerClass\"\r\n                       [cardBodyClass]=\"''\"\r\n                       [cardBodyContainerClass]=\"''\"\r\n                       [emptyTextClass]=\"emptyStateTextClass\"\r\n                       [emptyText]=\"isLoading ? ((sectionTitle | HRTranslate) + ' ' + ('IsLoading' | HRTranslate)) : ('ThereIsNoJobMainYet' | HRTranslate)\">\r\n</sky-empty-design-card>\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i2$2.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i2$2.DatePipe, name: "date" }, { kind: "pipe", type: HRTranslatePipe, name: "HRTranslate" }, { kind: "component", type: SkySectionDividerComponent, selector: "sky-section-divider", inputs: ["text", "fontAwesomeIcon", "textClass", "dividerClass", "iconClass"] }, { kind: "component", type: SkyEmptyDesignCardComponent, selector: "sky-empty-design-card", inputs: ["emptyIcon", "emptyIconClass", "emptyText", "emptyTextClass", "actionTitle", "actionIcon", "actionDisabled", "textColor", "disabledTitleClass", "activeTitleClass", "disabledIconClass", "activeIconClass", "actionClass", "containerClass", "cardBodyClass", "cardBodyContainerClass", "visibleIcon", "visibleQuickAction"], outputs: ["onActionClick"] }, { kind: "component", type: HRInfoFieldComponent, selector: "hr-info-field", inputs: ["labelKey", "value", "labelClass", "valueClass", "fallbackValue"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MyProfileJobInfoWidgetComponent, deps: [{ token: HRSelfWidgetsService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: MyProfileJobInfoWidgetComponent, isStandalone: true, selector: "hr-my-profile-job-info-widget", inputs: { baseUrl: "baseUrl", headerIconClass: "headerIconClass", headerTextClass: "headerTextClass", headerDividerClass: "headerDividerClass", rowClass: "rowClass", columnClass: "columnClass", responsiveTopSpacingColumnClass: "responsiveTopSpacingColumnClass", topSpacingBottomMdSpacingColumnClass: "topSpacingBottomMdSpacingColumnClass", topSpacingBottomSpacingColumnClass: "topSpacingBottomSpacingColumnClass", labelClass: "labelClass", valueClass: "valueClass", emptyStateContainerClass: "emptyStateContainerClass", emptyStateTextClass: "emptyStateTextClass", mainIcon: "mainIcon", sectionTitle: "sectionTitle" }, outputs: { isLoadingChanged: "isLoadingChanged", errorOccurred: "errorOccurred" }, ngImport: i0, template: "<sky-section-divider [fontAwesomeIcon]=\"mainIcon\"\r\n                     [text]=\"(sectionTitle | translate | uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n@if(jobInformationMain){\r\n<div [ngClass]=\"rowClass\">\r\n  <div [ngClass]=\"columnClass\">\r\n    <hr-info-field [labelKey]=\"'AdminUnit'\"\r\n                   [value]=\"jobInformationMain.AdminUnitName\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"columnClass\">\r\n    <hr-info-field [labelKey]=\"'Position'\"\r\n                   [value]=\"jobInformationMain.PositionName\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"responsiveTopSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'Grade'\"\r\n                   [value]=\"jobInformationMain.GradeName\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n\r\n  <div [ngClass]=\"topSpacingBottomMdSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'JoiningDate'\"\r\n                   [value]=\"jobInformationMain.JoiningDate ? (jobInformationMain.JoiningDate | date: 'dd/MM/yyyy') : null\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"topSpacingBottomMdSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'CorporateJoiningDate'\"\r\n                   [value]=\"jobInformationMain.CorporateJoiningDate ? (jobInformationMain.CorporateJoiningDate | date: 'dd/MM/yyyy') : null\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"topSpacingBottomSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'Sponsor'\"\r\n                   [value]=\"jobInformationMain.SponsorName\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n</div>\r\n}@else{\r\n<sky-empty-design-card [visibleIcon]=\"false\"\r\n                       [visibleQuickAction]=\"false\"\r\n                       [containerClass]=\"emptyStateContainerClass\"\r\n                       [cardBodyClass]=\"''\"\r\n                       [cardBodyContainerClass]=\"''\"\r\n                       [emptyTextClass]=\"emptyStateTextClass\"\r\n                       [emptyText]=\"isLoading ? ((sectionTitle | translate) + ' ' + ('IsLoading' | translate)) : ('ThereIsNoJobMainYet' | translate)\">\r\n</sky-empty-design-card>\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SkySectionDividerComponent, selector: "sky-section-divider", inputs: ["text", "fontAwesomeIcon", "textClass", "dividerClass", "iconClass"] }, { kind: "component", type: SkyEmptyDesignCardComponent, selector: "sky-empty-design-card", inputs: ["emptyIcon", "emptyIconClass", "emptyText", "emptyTextClass", "actionTitle", "actionIcon", "actionDisabled", "textColor", "disabledTitleClass", "activeTitleClass", "disabledIconClass", "activeIconClass", "actionClass", "containerClass", "cardBodyClass", "cardBodyContainerClass", "visibleIcon", "visibleQuickAction"], outputs: ["onActionClick"] }, { kind: "component", type: HRInfoFieldComponent, selector: "hr-info-field", inputs: ["labelKey", "value", "labelClass", "valueClass", "fallbackValue"] }, { kind: "pipe", type: i2$3.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i2$3.DatePipe, name: "date" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MyProfileJobInfoWidgetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MyProfileJobInfoWidgetComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'hr-my-profile-job-info-widget', standalone: true, imports: [CommonModule, HRTranslatePipe, SkySectionDividerComponent, SkyEmptyDesignCardComponent, HRInfoFieldComponent], template: "<sky-section-divider [fontAwesomeIcon]=\"mainIcon\"\r\n                     [text]=\"(sectionTitle | HRTranslate | uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n@if(jobInformationMain){\r\n<div [ngClass]=\"rowClass\">\r\n  <div [ngClass]=\"columnClass\">\r\n    <hr-info-field [labelKey]=\"'AdminUnit'\"\r\n                   [value]=\"jobInformationMain.AdminUnitName\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"columnClass\">\r\n    <hr-info-field [labelKey]=\"'Position'\"\r\n                   [value]=\"jobInformationMain.PositionName\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"responsiveTopSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'Grade'\"\r\n                   [value]=\"jobInformationMain.GradeName\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n\r\n  <div [ngClass]=\"topSpacingBottomMdSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'JoiningDate'\"\r\n                   [value]=\"jobInformationMain.JoiningDate ? (jobInformationMain.JoiningDate | date: 'dd/MM/yyyy') : null\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"topSpacingBottomMdSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'CorporateJoiningDate'\"\r\n                   [value]=\"jobInformationMain.CorporateJoiningDate ? (jobInformationMain.CorporateJoiningDate | date: 'dd/MM/yyyy') : null\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"topSpacingBottomSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'Sponsor'\"\r\n                   [value]=\"jobInformationMain.SponsorName\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n</div>\r\n}@else{\r\n<sky-empty-design-card [visibleIcon]=\"false\"\r\n                       [visibleQuickAction]=\"false\"\r\n                       [containerClass]=\"emptyStateContainerClass\"\r\n                       [cardBodyClass]=\"''\"\r\n                       [cardBodyContainerClass]=\"''\"\r\n                       [emptyTextClass]=\"emptyStateTextClass\"\r\n                       [emptyText]=\"isLoading ? ((sectionTitle | HRTranslate) + ' ' + ('IsLoading' | HRTranslate)) : ('ThereIsNoJobMainYet' | HRTranslate)\">\r\n</sky-empty-design-card>\r\n}\r\n" }]
+            args: [{ selector: 'hr-my-profile-job-info-widget', standalone: true, imports: [CommonModule, TranslatePipe, SkySectionDividerComponent, SkyEmptyDesignCardComponent, HRInfoFieldComponent], template: "<sky-section-divider [fontAwesomeIcon]=\"mainIcon\"\r\n                     [text]=\"(sectionTitle | translate | uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n@if(jobInformationMain){\r\n<div [ngClass]=\"rowClass\">\r\n  <div [ngClass]=\"columnClass\">\r\n    <hr-info-field [labelKey]=\"'AdminUnit'\"\r\n                   [value]=\"jobInformationMain.AdminUnitName\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"columnClass\">\r\n    <hr-info-field [labelKey]=\"'Position'\"\r\n                   [value]=\"jobInformationMain.PositionName\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"responsiveTopSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'Grade'\"\r\n                   [value]=\"jobInformationMain.GradeName\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n\r\n  <div [ngClass]=\"topSpacingBottomMdSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'JoiningDate'\"\r\n                   [value]=\"jobInformationMain.JoiningDate ? (jobInformationMain.JoiningDate | date: 'dd/MM/yyyy') : null\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"topSpacingBottomMdSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'CorporateJoiningDate'\"\r\n                   [value]=\"jobInformationMain.CorporateJoiningDate ? (jobInformationMain.CorporateJoiningDate | date: 'dd/MM/yyyy') : null\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"topSpacingBottomSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'Sponsor'\"\r\n                   [value]=\"jobInformationMain.SponsorName\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n</div>\r\n}@else{\r\n<sky-empty-design-card [visibleIcon]=\"false\"\r\n                       [visibleQuickAction]=\"false\"\r\n                       [containerClass]=\"emptyStateContainerClass\"\r\n                       [cardBodyClass]=\"''\"\r\n                       [cardBodyContainerClass]=\"''\"\r\n                       [emptyTextClass]=\"emptyStateTextClass\"\r\n                       [emptyText]=\"isLoading ? ((sectionTitle | translate) + ' ' + ('IsLoading' | translate)) : ('ThereIsNoJobMainYet' | translate)\">\r\n</sky-empty-design-card>\r\n}\r\n" }]
         }], ctorParameters: () => [{ type: HRSelfWidgetsService }], propDecorators: { baseUrl: [{
                 type: Input,
                 args: [{ required: true }]
@@ -3660,12 +2620,12 @@ class MyProfileContractWidgetComponent {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MyProfileContractWidgetComponent, deps: [{ token: HRSelfWidgetsService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: MyProfileContractWidgetComponent, isStandalone: true, selector: "hr-my-profile-contract-widget", inputs: { baseUrl: "baseUrl", headerIconClass: "headerIconClass", headerTextClass: "headerTextClass", headerDividerClass: "headerDividerClass", rowClass: "rowClass", columnClass: "columnClass", responsiveTopSpacingColumnClass: "responsiveTopSpacingColumnClass", topSpacingBottomMdSpacingColumnClass: "topSpacingBottomMdSpacingColumnClass", topSpacingBottomSpacingColumnClass: "topSpacingBottomSpacingColumnClass", labelClass: "labelClass", valueClass: "valueClass", emptyStateContainerClass: "emptyStateContainerClass", emptyStateTextClass: "emptyStateTextClass", contractIcon: "contractIcon", sectionTitle: "sectionTitle" }, outputs: { isLoadingChanged: "isLoadingChanged", errorOccurred: "errorOccurred" }, ngImport: i0, template: "<sky-section-divider [fontAwesomeIcon]=\"contractIcon\"\r\n                     [text]=\"(sectionTitle | HRTranslate | uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n@if(jobInformationContract){\r\n<div [ngClass]=\"rowClass\">\r\n  <div [ngClass]=\"columnClass\">\r\n    <hr-info-field [labelKey]=\"'ContractType'\"\r\n                   [value]=\"jobInformationContract.ContractTypeName\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"columnClass\">\r\n    <hr-info-field [labelKey]=\"'ContractStartDate'\"\r\n                   [value]=\"jobInformationContract.ContractStartDate ? (jobInformationContract.ContractStartDate | date: 'dd/MM/yyyy') : null\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"responsiveTopSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'ContractEndDate'\"\r\n                   [value]=\"jobInformationContract.ContractEndDate ? (jobInformationContract.ContractEndDate | date: 'dd/MM/yyyy') : null\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n\r\n  <div [ngClass]=\"topSpacingBottomMdSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'ContractMaritalStatus'\"\r\n                   [value]=\"jobInformationContract.ContractMaritalStateName\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"topSpacingBottomSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'ContractDependentsCount'\"\r\n                   [value]=\"jobInformationContract.ContractDependentsCount?.toString()\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n</div>\r\n}@else{\r\n<sky-empty-design-card [visibleIcon]=\"false\"\r\n                       [visibleQuickAction]=\"false\"\r\n                       [containerClass]=\"emptyStateContainerClass\"\r\n                       [cardBodyClass]=\"''\"\r\n                       [cardBodyContainerClass]=\"''\"\r\n                       [emptyTextClass]=\"emptyStateTextClass\"\r\n                       [emptyText]=\"isLoading ? ((sectionTitle | HRTranslate) + ' ' + ('IsLoading' | HRTranslate)) : ('ThereIsNoJobContractYet' | HRTranslate)\">\r\n</sky-empty-design-card>\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i2$2.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i2$2.DatePipe, name: "date" }, { kind: "pipe", type: HRTranslatePipe, name: "HRTranslate" }, { kind: "component", type: SkySectionDividerComponent, selector: "sky-section-divider", inputs: ["text", "fontAwesomeIcon", "textClass", "dividerClass", "iconClass"] }, { kind: "component", type: SkyEmptyDesignCardComponent, selector: "sky-empty-design-card", inputs: ["emptyIcon", "emptyIconClass", "emptyText", "emptyTextClass", "actionTitle", "actionIcon", "actionDisabled", "textColor", "disabledTitleClass", "activeTitleClass", "disabledIconClass", "activeIconClass", "actionClass", "containerClass", "cardBodyClass", "cardBodyContainerClass", "visibleIcon", "visibleQuickAction"], outputs: ["onActionClick"] }, { kind: "component", type: HRInfoFieldComponent, selector: "hr-info-field", inputs: ["labelKey", "value", "labelClass", "valueClass", "fallbackValue"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MyProfileContractWidgetComponent, deps: [{ token: HRSelfWidgetsService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: MyProfileContractWidgetComponent, isStandalone: true, selector: "hr-my-profile-contract-widget", inputs: { baseUrl: "baseUrl", headerIconClass: "headerIconClass", headerTextClass: "headerTextClass", headerDividerClass: "headerDividerClass", rowClass: "rowClass", columnClass: "columnClass", responsiveTopSpacingColumnClass: "responsiveTopSpacingColumnClass", topSpacingBottomMdSpacingColumnClass: "topSpacingBottomMdSpacingColumnClass", topSpacingBottomSpacingColumnClass: "topSpacingBottomSpacingColumnClass", labelClass: "labelClass", valueClass: "valueClass", emptyStateContainerClass: "emptyStateContainerClass", emptyStateTextClass: "emptyStateTextClass", contractIcon: "contractIcon", sectionTitle: "sectionTitle" }, outputs: { isLoadingChanged: "isLoadingChanged", errorOccurred: "errorOccurred" }, ngImport: i0, template: "<sky-section-divider [fontAwesomeIcon]=\"contractIcon\"\r\n                     [text]=\"(sectionTitle | translate | uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n@if(jobInformationContract){\r\n<div [ngClass]=\"rowClass\">\r\n  <div [ngClass]=\"columnClass\">\r\n    <hr-info-field [labelKey]=\"'ContractType'\"\r\n                   [value]=\"jobInformationContract.ContractTypeName\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"columnClass\">\r\n    <hr-info-field [labelKey]=\"'ContractStartDate'\"\r\n                   [value]=\"jobInformationContract.ContractStartDate ? (jobInformationContract.ContractStartDate | date: 'dd/MM/yyyy') : null\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"responsiveTopSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'ContractEndDate'\"\r\n                   [value]=\"jobInformationContract.ContractEndDate ? (jobInformationContract.ContractEndDate | date: 'dd/MM/yyyy') : null\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n\r\n  <div [ngClass]=\"topSpacingBottomMdSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'ContractMaritalStatus'\"\r\n                   [value]=\"jobInformationContract.ContractMaritalStateName\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"topSpacingBottomSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'ContractDependentsCount'\"\r\n                   [value]=\"jobInformationContract.ContractDependentsCount?.toString()\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n</div>\r\n}@else{\r\n<sky-empty-design-card [visibleIcon]=\"false\"\r\n                       [visibleQuickAction]=\"false\"\r\n                       [containerClass]=\"emptyStateContainerClass\"\r\n                       [cardBodyClass]=\"''\"\r\n                       [cardBodyContainerClass]=\"''\"\r\n                       [emptyTextClass]=\"emptyStateTextClass\"\r\n                       [emptyText]=\"isLoading ? ((sectionTitle | translate) + ' ' + ('IsLoading' | translate)) : ('ThereIsNoJobContractYet' | translate)\">\r\n</sky-empty-design-card>\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SkySectionDividerComponent, selector: "sky-section-divider", inputs: ["text", "fontAwesomeIcon", "textClass", "dividerClass", "iconClass"] }, { kind: "component", type: SkyEmptyDesignCardComponent, selector: "sky-empty-design-card", inputs: ["emptyIcon", "emptyIconClass", "emptyText", "emptyTextClass", "actionTitle", "actionIcon", "actionDisabled", "textColor", "disabledTitleClass", "activeTitleClass", "disabledIconClass", "activeIconClass", "actionClass", "containerClass", "cardBodyClass", "cardBodyContainerClass", "visibleIcon", "visibleQuickAction"], outputs: ["onActionClick"] }, { kind: "component", type: HRInfoFieldComponent, selector: "hr-info-field", inputs: ["labelKey", "value", "labelClass", "valueClass", "fallbackValue"] }, { kind: "pipe", type: i2$3.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i2$3.DatePipe, name: "date" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MyProfileContractWidgetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MyProfileContractWidgetComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'hr-my-profile-contract-widget', standalone: true, imports: [CommonModule, HRTranslatePipe, SkySectionDividerComponent, SkyEmptyDesignCardComponent, HRInfoFieldComponent], template: "<sky-section-divider [fontAwesomeIcon]=\"contractIcon\"\r\n                     [text]=\"(sectionTitle | HRTranslate | uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n@if(jobInformationContract){\r\n<div [ngClass]=\"rowClass\">\r\n  <div [ngClass]=\"columnClass\">\r\n    <hr-info-field [labelKey]=\"'ContractType'\"\r\n                   [value]=\"jobInformationContract.ContractTypeName\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"columnClass\">\r\n    <hr-info-field [labelKey]=\"'ContractStartDate'\"\r\n                   [value]=\"jobInformationContract.ContractStartDate ? (jobInformationContract.ContractStartDate | date: 'dd/MM/yyyy') : null\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"responsiveTopSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'ContractEndDate'\"\r\n                   [value]=\"jobInformationContract.ContractEndDate ? (jobInformationContract.ContractEndDate | date: 'dd/MM/yyyy') : null\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n\r\n  <div [ngClass]=\"topSpacingBottomMdSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'ContractMaritalStatus'\"\r\n                   [value]=\"jobInformationContract.ContractMaritalStateName\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"topSpacingBottomSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'ContractDependentsCount'\"\r\n                   [value]=\"jobInformationContract.ContractDependentsCount?.toString()\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n</div>\r\n}@else{\r\n<sky-empty-design-card [visibleIcon]=\"false\"\r\n                       [visibleQuickAction]=\"false\"\r\n                       [containerClass]=\"emptyStateContainerClass\"\r\n                       [cardBodyClass]=\"''\"\r\n                       [cardBodyContainerClass]=\"''\"\r\n                       [emptyTextClass]=\"emptyStateTextClass\"\r\n                       [emptyText]=\"isLoading ? ((sectionTitle | HRTranslate) + ' ' + ('IsLoading' | HRTranslate)) : ('ThereIsNoJobContractYet' | HRTranslate)\">\r\n</sky-empty-design-card>\r\n}\r\n" }]
+            args: [{ selector: 'hr-my-profile-contract-widget', standalone: true, imports: [CommonModule, TranslatePipe, SkySectionDividerComponent, SkyEmptyDesignCardComponent, HRInfoFieldComponent], template: "<sky-section-divider [fontAwesomeIcon]=\"contractIcon\"\r\n                     [text]=\"(sectionTitle | translate | uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n@if(jobInformationContract){\r\n<div [ngClass]=\"rowClass\">\r\n  <div [ngClass]=\"columnClass\">\r\n    <hr-info-field [labelKey]=\"'ContractType'\"\r\n                   [value]=\"jobInformationContract.ContractTypeName\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"columnClass\">\r\n    <hr-info-field [labelKey]=\"'ContractStartDate'\"\r\n                   [value]=\"jobInformationContract.ContractStartDate ? (jobInformationContract.ContractStartDate | date: 'dd/MM/yyyy') : null\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"responsiveTopSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'ContractEndDate'\"\r\n                   [value]=\"jobInformationContract.ContractEndDate ? (jobInformationContract.ContractEndDate | date: 'dd/MM/yyyy') : null\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n\r\n  <div [ngClass]=\"topSpacingBottomMdSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'ContractMaritalStatus'\"\r\n                   [value]=\"jobInformationContract.ContractMaritalStateName\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"topSpacingBottomSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'ContractDependentsCount'\"\r\n                   [value]=\"jobInformationContract.ContractDependentsCount?.toString()\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n</div>\r\n}@else{\r\n<sky-empty-design-card [visibleIcon]=\"false\"\r\n                       [visibleQuickAction]=\"false\"\r\n                       [containerClass]=\"emptyStateContainerClass\"\r\n                       [cardBodyClass]=\"''\"\r\n                       [cardBodyContainerClass]=\"''\"\r\n                       [emptyTextClass]=\"emptyStateTextClass\"\r\n                       [emptyText]=\"isLoading ? ((sectionTitle | translate) + ' ' + ('IsLoading' | translate)) : ('ThereIsNoJobContractYet' | translate)\">\r\n</sky-empty-design-card>\r\n}\r\n" }]
         }], ctorParameters: () => [{ type: HRSelfWidgetsService }], propDecorators: { baseUrl: [{
                 type: Input,
                 args: [{ required: true }]
@@ -3762,12 +2722,12 @@ class MyProfileSalaryWidgetComponent {
         }
         return this.commonMethodsService.currencyDecimalFormat(value, this.currencyDecimals) || '—';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MyProfileSalaryWidgetComponent, deps: [{ token: HRSelfWidgetsService }, { token: HRCommonMethodsService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: MyProfileSalaryWidgetComponent, isStandalone: true, selector: "hr-my-profile-salary-widget", inputs: { baseUrl: "baseUrl", currencyCode: "currencyCode", currencyDecimals: "currencyDecimals", headerIconClass: "headerIconClass", headerTextClass: "headerTextClass", headerDividerClass: "headerDividerClass", rowClass: "rowClass", columnClass: "columnClass", grossSalaryColumnClass: "grossSalaryColumnClass", labelClass: "labelClass", valueClass: "valueClass", currencyClass: "currencyClass", emptyStateContainerClass: "emptyStateContainerClass", emptyStateTextClass: "emptyStateTextClass", salaryIcon: "salaryIcon", sectionTitle: "sectionTitle" }, outputs: { isLoadingChanged: "isLoadingChanged", errorOccurred: "errorOccurred" }, ngImport: i0, template: "@if(jobInformationSalary){\r\n<sky-section-divider [fontAwesomeIcon]=\"salaryIcon\"\r\n                     [text]=\"(sectionTitle | HRTranslate | uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n<div [ngClass]=\"rowClass\">\r\n  <div [ngClass]=\"columnClass\">\r\n    <div [ngClass]=\"labelClass\">{{'BasicSalary' | HRTranslate}}</div>\r\n    <div [ngClass]=\"valueClass\">{{formatAmount(basicSalary)}} <span [ngClass]=\"currencyClass\">{{currencyCode}}</span></div>\r\n  </div>\r\n\r\n  @for(allowance of allowances; track allowance){\r\n  <div [ngClass]=\"columnClass\">\r\n    <div [ngClass]=\"labelClass\">{{allowance.AllowanceName}}</div>\r\n    <div [ngClass]=\"valueClass\">{{formatAmount(allowance.AllowanceAmount)}} <span [ngClass]=\"currencyClass\">{{currencyCode}}</span></div>\r\n  </div>\r\n  }\r\n\r\n  <div [ngClass]=\"grossSalaryColumnClass\">\r\n    <div [ngClass]=\"labelClass\">{{'GrossSalary' | HRTranslate}}</div>\r\n    <div [ngClass]=\"valueClass\">{{formatAmount(jobInformationSalary.GrossSalary)}} <span [ngClass]=\"currencyClass\">{{currencyCode}}</span></div>\r\n  </div>\r\n</div>\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i2$2.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: HRTranslatePipe, name: "HRTranslate" }, { kind: "component", type: SkySectionDividerComponent, selector: "sky-section-divider", inputs: ["text", "fontAwesomeIcon", "textClass", "dividerClass", "iconClass"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MyProfileSalaryWidgetComponent, deps: [{ token: HRSelfWidgetsService }, { token: HRCommonMethodsService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: MyProfileSalaryWidgetComponent, isStandalone: true, selector: "hr-my-profile-salary-widget", inputs: { baseUrl: "baseUrl", currencyCode: "currencyCode", currencyDecimals: "currencyDecimals", headerIconClass: "headerIconClass", headerTextClass: "headerTextClass", headerDividerClass: "headerDividerClass", rowClass: "rowClass", columnClass: "columnClass", grossSalaryColumnClass: "grossSalaryColumnClass", labelClass: "labelClass", valueClass: "valueClass", currencyClass: "currencyClass", emptyStateContainerClass: "emptyStateContainerClass", emptyStateTextClass: "emptyStateTextClass", salaryIcon: "salaryIcon", sectionTitle: "sectionTitle" }, outputs: { isLoadingChanged: "isLoadingChanged", errorOccurred: "errorOccurred" }, ngImport: i0, template: "@if(jobInformationSalary){\r\n<sky-section-divider [fontAwesomeIcon]=\"salaryIcon\"\r\n                     [text]=\"(sectionTitle | translate | uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n<div [ngClass]=\"rowClass\">\r\n  <div [ngClass]=\"columnClass\">\r\n    <div [ngClass]=\"labelClass\">{{'BasicSalary' | translate}}</div>\r\n    <div [ngClass]=\"valueClass\">{{formatAmount(basicSalary)}} <span [ngClass]=\"currencyClass\">{{currencyCode}}</span></div>\r\n  </div>\r\n\r\n  @for(allowance of allowances; track allowance){\r\n  <div [ngClass]=\"columnClass\">\r\n    <div [ngClass]=\"labelClass\">{{allowance.AllowanceName}}</div>\r\n    <div [ngClass]=\"valueClass\">{{formatAmount(allowance.AllowanceAmount)}} <span [ngClass]=\"currencyClass\">{{currencyCode}}</span></div>\r\n  </div>\r\n  }\r\n\r\n  <div [ngClass]=\"grossSalaryColumnClass\">\r\n    <div [ngClass]=\"labelClass\">{{'GrossSalary' | translate}}</div>\r\n    <div [ngClass]=\"valueClass\">{{formatAmount(jobInformationSalary.GrossSalary)}} <span [ngClass]=\"currencyClass\">{{currencyCode}}</span></div>\r\n  </div>\r\n</div>\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SkySectionDividerComponent, selector: "sky-section-divider", inputs: ["text", "fontAwesomeIcon", "textClass", "dividerClass", "iconClass"] }, { kind: "pipe", type: i2$3.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MyProfileSalaryWidgetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MyProfileSalaryWidgetComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'hr-my-profile-salary-widget', standalone: true, imports: [CommonModule, HRTranslatePipe, SkySectionDividerComponent], template: "@if(jobInformationSalary){\r\n<sky-section-divider [fontAwesomeIcon]=\"salaryIcon\"\r\n                     [text]=\"(sectionTitle | HRTranslate | uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n<div [ngClass]=\"rowClass\">\r\n  <div [ngClass]=\"columnClass\">\r\n    <div [ngClass]=\"labelClass\">{{'BasicSalary' | HRTranslate}}</div>\r\n    <div [ngClass]=\"valueClass\">{{formatAmount(basicSalary)}} <span [ngClass]=\"currencyClass\">{{currencyCode}}</span></div>\r\n  </div>\r\n\r\n  @for(allowance of allowances; track allowance){\r\n  <div [ngClass]=\"columnClass\">\r\n    <div [ngClass]=\"labelClass\">{{allowance.AllowanceName}}</div>\r\n    <div [ngClass]=\"valueClass\">{{formatAmount(allowance.AllowanceAmount)}} <span [ngClass]=\"currencyClass\">{{currencyCode}}</span></div>\r\n  </div>\r\n  }\r\n\r\n  <div [ngClass]=\"grossSalaryColumnClass\">\r\n    <div [ngClass]=\"labelClass\">{{'GrossSalary' | HRTranslate}}</div>\r\n    <div [ngClass]=\"valueClass\">{{formatAmount(jobInformationSalary.GrossSalary)}} <span [ngClass]=\"currencyClass\">{{currencyCode}}</span></div>\r\n  </div>\r\n</div>\r\n}\r\n" }]
+            args: [{ selector: 'hr-my-profile-salary-widget', standalone: true, imports: [CommonModule, TranslatePipe, SkySectionDividerComponent], template: "@if(jobInformationSalary){\r\n<sky-section-divider [fontAwesomeIcon]=\"salaryIcon\"\r\n                     [text]=\"(sectionTitle | translate | uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n<div [ngClass]=\"rowClass\">\r\n  <div [ngClass]=\"columnClass\">\r\n    <div [ngClass]=\"labelClass\">{{'BasicSalary' | translate}}</div>\r\n    <div [ngClass]=\"valueClass\">{{formatAmount(basicSalary)}} <span [ngClass]=\"currencyClass\">{{currencyCode}}</span></div>\r\n  </div>\r\n\r\n  @for(allowance of allowances; track allowance){\r\n  <div [ngClass]=\"columnClass\">\r\n    <div [ngClass]=\"labelClass\">{{allowance.AllowanceName}}</div>\r\n    <div [ngClass]=\"valueClass\">{{formatAmount(allowance.AllowanceAmount)}} <span [ngClass]=\"currencyClass\">{{currencyCode}}</span></div>\r\n  </div>\r\n  }\r\n\r\n  <div [ngClass]=\"grossSalaryColumnClass\">\r\n    <div [ngClass]=\"labelClass\">{{'GrossSalary' | translate}}</div>\r\n    <div [ngClass]=\"valueClass\">{{formatAmount(jobInformationSalary.GrossSalary)}} <span [ngClass]=\"currencyClass\">{{currencyCode}}</span></div>\r\n  </div>\r\n</div>\r\n}\r\n" }]
         }], ctorParameters: () => [{ type: HRSelfWidgetsService }, { type: HRCommonMethodsService }], propDecorators: { baseUrl: [{
                 type: Input,
                 args: [{ required: true }]
@@ -3877,12 +2837,12 @@ class MyProfileServiceChargeWidgetComponent {
         }
         return this.commonMethodsService.currencyDecimalFormat(data.ServiceChargeValue, 2) || '—';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MyProfileServiceChargeWidgetComponent, deps: [{ token: HRSelfWidgetsService }, { token: HRCommonMethodsService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: MyProfileServiceChargeWidgetComponent, isStandalone: true, selector: "hr-my-profile-charge-widget", inputs: { baseUrl: "baseUrl", currencyCode: "currencyCode", headerIconClass: "headerIconClass", headerTextClass: "headerTextClass", headerDividerClass: "headerDividerClass", rowClass: "rowClass", columnClass: "columnClass", labelClass: "labelClass", valueClass: "valueClass", emptyStateContainerClass: "emptyStateContainerClass", emptyStateTextClass: "emptyStateTextClass", serviceChargeIcon: "serviceChargeIcon", sectionTitle: "sectionTitle" }, outputs: { isLoadingChanged: "isLoadingChanged", errorOccurred: "errorOccurred" }, ngImport: i0, template: "@if(jobInformationServiceCharge){\r\n<sky-section-divider [fontAwesomeIcon]=\"serviceChargeIcon\"\r\n                     [text]=\"(sectionTitle | HRTranslate | uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n<div [ngClass]=\"rowClass\">\r\n  <div [ngClass]=\"columnClass\">\r\n    <div [ngClass]=\"labelClass\">{{modeLabelKey | HRTranslate}}</div>\r\n    <div [ngClass]=\"valueClass\">{{value}}</div>\r\n  </div>\r\n</div>\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i2$2.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: HRTranslatePipe, name: "HRTranslate" }, { kind: "component", type: SkySectionDividerComponent, selector: "sky-section-divider", inputs: ["text", "fontAwesomeIcon", "textClass", "dividerClass", "iconClass"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MyProfileServiceChargeWidgetComponent, deps: [{ token: HRSelfWidgetsService }, { token: HRCommonMethodsService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: MyProfileServiceChargeWidgetComponent, isStandalone: true, selector: "hr-my-profile-charge-widget", inputs: { baseUrl: "baseUrl", currencyCode: "currencyCode", headerIconClass: "headerIconClass", headerTextClass: "headerTextClass", headerDividerClass: "headerDividerClass", rowClass: "rowClass", columnClass: "columnClass", labelClass: "labelClass", valueClass: "valueClass", emptyStateContainerClass: "emptyStateContainerClass", emptyStateTextClass: "emptyStateTextClass", serviceChargeIcon: "serviceChargeIcon", sectionTitle: "sectionTitle" }, outputs: { isLoadingChanged: "isLoadingChanged", errorOccurred: "errorOccurred" }, ngImport: i0, template: "@if(jobInformationServiceCharge){\r\n<sky-section-divider [fontAwesomeIcon]=\"serviceChargeIcon\"\r\n                     [text]=\"(sectionTitle | translate | uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n<div [ngClass]=\"rowClass\">\r\n  <div [ngClass]=\"columnClass\">\r\n    <div [ngClass]=\"labelClass\">{{modeLabelKey | translate}}</div>\r\n    <div [ngClass]=\"valueClass\">{{value}}</div>\r\n  </div>\r\n</div>\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SkySectionDividerComponent, selector: "sky-section-divider", inputs: ["text", "fontAwesomeIcon", "textClass", "dividerClass", "iconClass"] }, { kind: "pipe", type: i2$3.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MyProfileServiceChargeWidgetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MyProfileServiceChargeWidgetComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'hr-my-profile-charge-widget', standalone: true, imports: [CommonModule, HRTranslatePipe, SkySectionDividerComponent], template: "@if(jobInformationServiceCharge){\r\n<sky-section-divider [fontAwesomeIcon]=\"serviceChargeIcon\"\r\n                     [text]=\"(sectionTitle | HRTranslate | uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n<div [ngClass]=\"rowClass\">\r\n  <div [ngClass]=\"columnClass\">\r\n    <div [ngClass]=\"labelClass\">{{modeLabelKey | HRTranslate}}</div>\r\n    <div [ngClass]=\"valueClass\">{{value}}</div>\r\n  </div>\r\n</div>\r\n}\r\n" }]
+            args: [{ selector: 'hr-my-profile-charge-widget', standalone: true, imports: [CommonModule, TranslatePipe, SkySectionDividerComponent], template: "@if(jobInformationServiceCharge){\r\n<sky-section-divider [fontAwesomeIcon]=\"serviceChargeIcon\"\r\n                     [text]=\"(sectionTitle | translate | uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n<div [ngClass]=\"rowClass\">\r\n  <div [ngClass]=\"columnClass\">\r\n    <div [ngClass]=\"labelClass\">{{modeLabelKey | translate}}</div>\r\n    <div [ngClass]=\"valueClass\">{{value}}</div>\r\n  </div>\r\n</div>\r\n}\r\n" }]
         }], ctorParameters: () => [{ type: HRSelfWidgetsService }, { type: HRCommonMethodsService }], propDecorators: { baseUrl: [{
                 type: Input,
                 args: [{ required: true }]
@@ -3988,13 +2948,13 @@ class HRNextWeekVacationInsightsPopupComponent {
     handleEmployeePhotoError(employee) {
         employee.FailedToLoadPhoto = true;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: HRNextWeekVacationInsightsPopupComponent, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: HRNextWeekVacationInsightsPopupComponent, isStandalone: true, selector: "hr-next-week-vacation-insights-popup", inputs: { popupVisible: "popupVisible", popupType: "popupType", baseUrl: "baseUrl", width: "width", height: "height", gridHeight: "gridHeight", pageSize: "pageSize", showProperty: "showProperty" }, outputs: { closePopupClickHandler: "closePopupClickHandler" }, viewQueries: [{ propertyName: "dataGrid", first: true, predicate: DxDataGridComponent, descendants: true }], ngImport: i0, template: "<dx-popup [visible]=\"popupVisible\"\r\n          [height]=\"height\"\r\n          [minHeight]=\"'40%'\"\r\n          [maxHeight]=\"'70%'\"\r\n          [width]=\"width\"\r\n          contentTemplate=\"popup-content\"\r\n          [showCloseButton]=\"false\"\r\n          shadingColor=\"rgba(0,0,0,0.4)\"\r\n          titleTemplate=\"title\"\r\n          [showTitle]=\"true\"\r\n          (onShown)=\"onShown()\"\r\n          (onHidden)=\"onHidden()\">\r\n\r\n  <div *dxTemplate=\"let data of 'title'\">\r\n    <div class=\"d-flex justify-content-between align-items-center my-0\">\r\n      <p class=\"mx-3 fs-16 fw-meduim text-ellipsis-one-line\">\r\n        <span class=\"text-dark-gray\">{{popupTitle ? (popupTitle | HRTranslate) : ('NextWeekVacationInsights' | HRTranslate)}}</span>\r\n        <span class=\"mx-2 text-primary\">({{getPopupTitle() | HRTranslate}})</span>\r\n      </p>\r\n      <div class=\"p-2\" (click)=\"onPopupClose()\">\r\n        <fa-icon [icon]=\"xMarkIcon\" class=\"fs-18 me-1 text-dark-gray cursor-pointer\"></fa-icon>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div *dxTemplate=\"let d of 'popup-content'\">\r\n    <div class=\"mb-2 d-flex justify-content-end\">\r\n      <dx-text-box [width]=\"'250px'\"\r\n                   mode=\"search\"\r\n                   [value]=\"searchValue\"\r\n                   [placeholder]=\"'Search...' | HRTranslate\"\r\n                   (onValueChanged)=\"onSearchValueChanged($event)\">\r\n      </dx-text-box>\r\n    </div>\r\n    @if(dataSource){\r\n    <dx-data-grid  class=\"popup-data-grid\"\r\n                  [dataSource]=\"dataSource\"\r\n                  [showBorders]=\"false\"\r\n                  [showRowLines]=\"false\"\r\n                  [showColumnLines]=\"false\"\r\n                  [columnAutoWidth]=\"true\"\r\n                  [wordWrapEnabled]=\"true\"\r\n                  [height]=\"gridHeight\"\r\n                  [allowColumnReordering]=\"false\"\r\n                  [remoteOperations]=\"{paging: true}\">\r\n\r\n      <dxo-sorting mode=\"none\"></dxo-sorting>\r\n\r\n      <dxo-scrolling mode=\"infinite\"\r\n                     [useNative]=\"false\"\r\n                     [scrollByContent]=\"true\"\r\n                     [scrollByThumb]=\"true\"\r\n                     showScrollbar=\"always\">\r\n      </dxo-scrolling>\r\n\r\n      <dxo-paging [enabled]=\"true\" [pageSize]=\"pageSize\"></dxo-paging>\r\n\r\n      <dxi-column caption=\"{{'Employee' | HRTranslate}}\"\r\n                  dataField=\"EmployeeName\"\r\n                  cellTemplate=\"employeeCellTemplate\"\r\n                  [minWidth]=\"250\">\r\n      </dxi-column>\r\n\r\n      @if(popupType === VacationPopupType.Upcoming){\r\n      <dxi-column caption=\"{{'StartDate' | HRTranslate}}\"\r\n                  dataField=\"VacationStartDate\"\r\n                  dataType=\"date\"\r\n                  format=\"dd/MM/yyyy\"\r\n                  [width]=\"120\"\r\n                  alignment=\"start\">\r\n      </dxi-column>\r\n      <dxi-column caption=\"{{'EndDate' | HRTranslate}}\"\r\n                  dataField=\"VacationEndDate\"\r\n                  dataType=\"date\"\r\n                  format=\"dd/MM/yyyy\"\r\n                  [width]=\"120\"\r\n                  alignment=\"start\">\r\n      </dxi-column>\r\n      }@else{\r\n      <dxi-column caption=\"{{'ReturnDate' | HRTranslate}}\"\r\n                  dataField=\"ReturnDate\"\r\n                  dataType=\"date\"\r\n                  format=\"dd/MM/yyyy\"\r\n                  [width]=\"120\"\r\n                  alignment=\"start\">\r\n      </dxi-column>\r\n      }\r\n\r\n      <div *dxTemplate=\"let cell of 'employeeCellTemplate'\">\r\n        <div class=\"d-flex align-items-center\">\r\n          <bayan-employee-badge\r\n            [badge]=\"getEmployeeBadge(cell.data)\"\r\n            badgeClass=\"badge employee-rounded-badge-xl fs-6\"\r\n            imageClass=\"rounded-circle\"\r\n            [width]=\"'40px'\"\r\n            [height]=\"'40px'\"\r\n            (employeePhotoError)=\"handleEmployeePhotoError(cell.data)\">\r\n          </bayan-employee-badge>\r\n          <div class=\"d-flex flex-column ms-1\">\r\n            <div class=\"d-flex flex-row ms-2\">\r\n              @if(showProperty){\r\n              <span class=\"property-badge cursor-pointer me-1\" [title]=\"cell.data.PropertyName\" [innerHTML]=\"cell.data.PropertySymbol\"></span>\r\n              }\r\n              <span class=\"text-ellipsis-one-line fs-14 text-dark-gray fw-normal\"\r\n                    [title]=\"cell.data.EmployeeNumber + ' | ' + cell.data.EmployeeName\"\r\n                    [innerHTML]=\"(cell.data.EmployeeNumber + ' | ' + cell.data.EmployeeName) | HRHighlight:searchValue\">\r\n              </span>\r\n            </div>\r\n            <p class=\"ms-2 mt-1 text-ellipsis-one-line fs-12 text-dark-gray fw-normal mb-0\"\r\n               [innerHTML]=\"cell.data.EmployeeAdminUnitName | HRHighlight:searchValue\">\r\n            </p>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n    </dx-data-grid>\r\n    }\r\n  </div>\r\n</dx-popup>\r\n", dependencies: [{ kind: "ngmodule", type: DxPopupModule }, { kind: "component", type: i1$1.DxPopupComponent, selector: "dx-popup", inputs: ["accessKey", "animation", "closeOnOutsideClick", "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", "closeOnOutsideClickChange", "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$1.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { kind: "pipe", type: HRTranslatePipe, name: "HRTranslate" }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }, { kind: "ngmodule", type: DxDataGridModule }, { kind: "component", type: i1$1.DxDataGridComponent, selector: "dx-data-grid", inputs: ["accessKey", "activeStateEnabled", "allowColumnReordering", "allowColumnResizing", "autoNavigateToFocusedRow", "cacheEnabled", "cellHintEnabled", "columnAutoWidth", "columnChooser", "columnFixing", "columnHidingEnabled", "columnMinWidth", "columnResizingMode", "columns", "columnWidth", "customizeColumns", "dataRowTemplate", "dataSource", "dateSerializationFormat", "disabled", "editing", "elementAttr", "errorRowEnabled", "export", "filterBuilder", "filterBuilderPopup", "filterPanel", "filterRow", "filterSyncEnabled", "filterValue", "focusedColumnIndex", "focusedRowEnabled", "focusedRowIndex", "focusedRowKey", "grouping", "groupPanel", "headerFilter", "height", "highlightChanges", "hint", "hoverStateEnabled", "keyboardNavigation", "keyExpr", "loadPanel", "masterDetail", "noDataText", "pager", "paging", "remoteOperations", "renderAsync", "repaintChangesOnly", "rowAlternationEnabled", "rowDragging", "rowTemplate", "rtlEnabled", "scrolling", "searchPanel", "selectedRowKeys", "selection", "selectionFilter", "showBorders", "showColumnHeaders", "showColumnLines", "showRowLines", "sortByGroupSummaryInfo", "sorting", "stateStoring", "summary", "syncLookupFilterValues", "tabIndex", "toolbar", "twoWayBindingEnabled", "visible", "width", "wordWrapEnabled"], outputs: ["onAdaptiveDetailRowPreparing", "onCellClick", "onCellDblClick", "onCellHoverChanged", "onCellPrepared", "onContentReady", "onContextMenuPreparing", "onDataErrorOccurred", "onDisposing", "onEditCanceled", "onEditCanceling", "onEditingStart", "onEditorPrepared", "onEditorPreparing", "onExporting", "onFocusedCellChanged", "onFocusedCellChanging", "onFocusedRowChanged", "onFocusedRowChanging", "onInitialized", "onInitNewRow", "onKeyDown", "onOptionChanged", "onRowClick", "onRowCollapsed", "onRowCollapsing", "onRowDblClick", "onRowExpanded", "onRowExpanding", "onRowInserted", "onRowInserting", "onRowPrepared", "onRowRemoved", "onRowRemoving", "onRowUpdated", "onRowUpdating", "onRowValidating", "onSaved", "onSaving", "onSelectionChanged", "onToolbarPreparing", "accessKeyChange", "activeStateEnabledChange", "allowColumnReorderingChange", "allowColumnResizingChange", "autoNavigateToFocusedRowChange", "cacheEnabledChange", "cellHintEnabledChange", "columnAutoWidthChange", "columnChooserChange", "columnFixingChange", "columnHidingEnabledChange", "columnMinWidthChange", "columnResizingModeChange", "columnsChange", "columnWidthChange", "customizeColumnsChange", "dataRowTemplateChange", "dataSourceChange", "dateSerializationFormatChange", "disabledChange", "editingChange", "elementAttrChange", "errorRowEnabledChange", "exportChange", "filterBuilderChange", "filterBuilderPopupChange", "filterPanelChange", "filterRowChange", "filterSyncEnabledChange", "filterValueChange", "focusedColumnIndexChange", "focusedRowEnabledChange", "focusedRowIndexChange", "focusedRowKeyChange", "groupingChange", "groupPanelChange", "headerFilterChange", "heightChange", "highlightChangesChange", "hintChange", "hoverStateEnabledChange", "keyboardNavigationChange", "keyExprChange", "loadPanelChange", "masterDetailChange", "noDataTextChange", "pagerChange", "pagingChange", "remoteOperationsChange", "renderAsyncChange", "repaintChangesOnlyChange", "rowAlternationEnabledChange", "rowDraggingChange", "rowTemplateChange", "rtlEnabledChange", "scrollingChange", "searchPanelChange", "selectedRowKeysChange", "selectionChange", "selectionFilterChange", "showBordersChange", "showColumnHeadersChange", "showColumnLinesChange", "showRowLinesChange", "sortByGroupSummaryInfoChange", "sortingChange", "stateStoringChange", "summaryChange", "syncLookupFilterValuesChange", "tabIndexChange", "toolbarChange", "twoWayBindingEnabledChange", "visibleChange", "widthChange", "wordWrapEnabledChange"] }, { kind: "component", type: i5.DxiColumnComponent, selector: "dxi-column", inputs: ["alignment", "allowEditing", "allowExporting", "allowFiltering", "allowFixing", "allowGrouping", "allowHeaderFiltering", "allowHiding", "allowReordering", "allowResizing", "allowSearch", "allowSorting", "autoExpandGroup", "buttons", "calculateCellValue", "calculateDisplayValue", "calculateFilterExpression", "calculateGroupValue", "calculateSortValue", "caption", "cellTemplate", "columns", "cssClass", "customizeText", "dataField", "dataType", "editCellTemplate", "editorOptions", "encodeHtml", "falseText", "filterOperations", "filterType", "filterValue", "filterValues", "fixed", "fixedPosition", "format", "formItem", "groupCellTemplate", "groupIndex", "headerCellTemplate", "headerFilter", "hidingPriority", "isBand", "lookup", "minWidth", "name", "ownerBand", "renderAsync", "selectedFilterOperation", "setCellValue", "showEditorAlways", "showInColumnChooser", "showWhenGrouped", "sortIndex", "sortingMethod", "sortOrder", "trueText", "type", "validationRules", "visible", "visibleIndex", "width"], outputs: ["filterValueChange", "filterValuesChange", "groupIndexChange", "selectedFilterOperationChange", "sortIndexChange", "sortOrderChange", "visibleChange", "visibleIndexChange"] }, { kind: "component", type: i5.DxoPagingComponent, selector: "dxo-paging", inputs: ["enabled", "pageIndex", "pageSize"], outputs: ["pageIndexChange", "pageSizeChange"] }, { kind: "component", type: i5.DxoScrollingComponent, selector: "dxo-scrolling", inputs: ["columnRenderingMode", "mode", "preloadEnabled", "renderAsync", "rowRenderingMode", "scrollByContent", "scrollByThumb", "showScrollbar", "useNative"] }, { kind: "component", type: i5.DxoSortingComponent, selector: "dxo-sorting", inputs: ["ascendingText", "clearText", "descendingText", "mode", "showSortIndexes"] }, { kind: "component", type: BayanEmployeeBadgeComponent, selector: "bayan-employee-badge", inputs: ["badge", "width", "height", "imageClass", "badgeClass"], outputs: ["employeePhotoError"] }, { kind: "ngmodule", type: DxTextBoxModule }, { kind: "component", type: i1$1.DxTextBoxComponent, selector: "dx-text-box", inputs: ["accessKey", "activeStateEnabled", "buttons", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "inputAttr", "isDirty", "isValid", "label", "labelMode", "mask", "maskChar", "maskInvalidMessage", "maskRules", "maxLength", "mode", "name", "placeholder", "readOnly", "rtlEnabled", "showClearButton", "showMaskMode", "spellcheck", "stylingMode", "tabIndex", "text", "useMaskedValue", "validationError", "validationErrors", "validationMessageMode", "validationMessagePosition", "validationStatus", "value", "valueChangeEvent", "visible", "width"], outputs: ["onChange", "onContentReady", "onCopy", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onKeyDown", "onKeyUp", "onOptionChanged", "onPaste", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "buttonsChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isDirtyChange", "isValidChange", "labelChange", "labelModeChange", "maskChange", "maskCharChange", "maskInvalidMessageChange", "maskRulesChange", "maxLengthChange", "modeChange", "nameChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "showClearButtonChange", "showMaskModeChange", "spellcheckChange", "stylingModeChange", "tabIndexChange", "textChange", "useMaskedValueChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationMessagePositionChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "visibleChange", "widthChange", "onBlur"] }, { kind: "pipe", type: HRHighlightPipe, name: "HRHighlight" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: HRNextWeekVacationInsightsPopupComponent, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: HRNextWeekVacationInsightsPopupComponent, isStandalone: true, selector: "hr-next-week-vacation-insights-popup", inputs: { popupVisible: "popupVisible", popupType: "popupType", baseUrl: "baseUrl", width: "width", height: "height", gridHeight: "gridHeight", pageSize: "pageSize", showProperty: "showProperty" }, outputs: { closePopupClickHandler: "closePopupClickHandler" }, viewQueries: [{ propertyName: "dataGrid", first: true, predicate: DxDataGridComponent, descendants: true }], ngImport: i0, template: "<dx-popup [visible]=\"popupVisible\"\r\n          [height]=\"height\"\r\n          [minHeight]=\"'40%'\"\r\n          [maxHeight]=\"'70%'\"\r\n          [width]=\"width\"\r\n          contentTemplate=\"popup-content\"\r\n          [showCloseButton]=\"false\"\r\n          shadingColor=\"rgba(0,0,0,0.4)\"\r\n          titleTemplate=\"title\"\r\n          [showTitle]=\"true\"\r\n          (onShown)=\"onShown()\"\r\n          (onHidden)=\"onHidden()\">\r\n\r\n  <div *dxTemplate=\"let data of 'title'\">\r\n    <div class=\"d-flex justify-content-between align-items-center my-0\">\r\n      <p class=\"mx-3 fs-16 fw-meduim text-ellipsis-one-line\">\r\n        <span class=\"text-dark-gray\">{{popupTitle ? (popupTitle | translate) : ('NextWeekVacationInsights' | translate)}}</span>\r\n        <span class=\"mx-2 text-primary\">({{getPopupTitle() | translate}})</span>\r\n      </p>\r\n      <div class=\"p-2\" (click)=\"onPopupClose()\">\r\n        <fa-icon [icon]=\"xMarkIcon\" class=\"fs-18 me-1 text-dark-gray cursor-pointer\"></fa-icon>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div *dxTemplate=\"let d of 'popup-content'\">\r\n    <div class=\"mb-2 d-flex justify-content-end\">\r\n      <dx-text-box [width]=\"'250px'\"\r\n                   mode=\"search\"\r\n                   [value]=\"searchValue\"\r\n                   [placeholder]=\"'Search...' | translate\"\r\n                   (onValueChanged)=\"onSearchValueChanged($event)\">\r\n      </dx-text-box>\r\n    </div>\r\n    @if(dataSource){\r\n    <dx-data-grid  class=\"popup-data-grid\"\r\n                  [dataSource]=\"dataSource\"\r\n                  [showBorders]=\"false\"\r\n                  [showRowLines]=\"false\"\r\n                  [showColumnLines]=\"false\"\r\n                  [columnAutoWidth]=\"true\"\r\n                  [wordWrapEnabled]=\"true\"\r\n                  [height]=\"gridHeight\"\r\n                  [allowColumnReordering]=\"false\"\r\n                  [remoteOperations]=\"{paging: true}\">\r\n\r\n      <dxo-sorting mode=\"none\"></dxo-sorting>\r\n\r\n      <dxo-scrolling mode=\"infinite\"\r\n                     [useNative]=\"false\"\r\n                     [scrollByContent]=\"true\"\r\n                     [scrollByThumb]=\"true\"\r\n                     showScrollbar=\"always\">\r\n      </dxo-scrolling>\r\n\r\n      <dxo-paging [enabled]=\"true\" [pageSize]=\"pageSize\"></dxo-paging>\r\n\r\n      <dxi-column caption=\"{{'Employee' | translate}}\"\r\n                  dataField=\"EmployeeName\"\r\n                  cellTemplate=\"employeeCellTemplate\"\r\n                  [minWidth]=\"250\">\r\n      </dxi-column>\r\n\r\n      @if(popupType === VacationPopupType.Upcoming){\r\n      <dxi-column caption=\"{{'StartDate' | translate}}\"\r\n                  dataField=\"VacationStartDate\"\r\n                  dataType=\"date\"\r\n                  format=\"dd/MM/yyyy\"\r\n                  [width]=\"120\"\r\n                  alignment=\"start\">\r\n      </dxi-column>\r\n      <dxi-column caption=\"{{'EndDate' | translate}}\"\r\n                  dataField=\"VacationEndDate\"\r\n                  dataType=\"date\"\r\n                  format=\"dd/MM/yyyy\"\r\n                  [width]=\"120\"\r\n                  alignment=\"start\">\r\n      </dxi-column>\r\n      }@else{\r\n      <dxi-column caption=\"{{'ReturnDate' | translate}}\"\r\n                  dataField=\"ReturnDate\"\r\n                  dataType=\"date\"\r\n                  format=\"dd/MM/yyyy\"\r\n                  [width]=\"120\"\r\n                  alignment=\"start\">\r\n      </dxi-column>\r\n      }\r\n\r\n      <div *dxTemplate=\"let cell of 'employeeCellTemplate'\">\r\n        <div class=\"d-flex align-items-center\">\r\n          <bayan-employee-badge\r\n            [badge]=\"getEmployeeBadge(cell.data)\"\r\n            badgeClass=\"badge employee-rounded-badge-xl fs-6\"\r\n            imageClass=\"rounded-circle\"\r\n            [width]=\"'40px'\"\r\n            [height]=\"'40px'\"\r\n            (employeePhotoError)=\"handleEmployeePhotoError(cell.data)\">\r\n          </bayan-employee-badge>\r\n          <div class=\"d-flex flex-column ms-1\">\r\n            <div class=\"d-flex flex-row ms-2\">\r\n              @if(showProperty){\r\n              <span class=\"property-badge cursor-pointer me-1\" [title]=\"cell.data.PropertyName\" [innerHTML]=\"cell.data.PropertySymbol\"></span>\r\n              }\r\n              <span class=\"text-ellipsis-one-line fs-14 text-dark-gray fw-normal\"\r\n                    [title]=\"cell.data.EmployeeNumber + ' | ' + cell.data.EmployeeName\"\r\n                    [innerHTML]=\"(cell.data.EmployeeNumber + ' | ' + cell.data.EmployeeName) | highlight:searchValue\">\r\n              </span>\r\n            </div>\r\n            <p class=\"ms-2 mt-1 text-ellipsis-one-line fs-12 text-dark-gray fw-normal mb-0\"\r\n               [innerHTML]=\"cell.data.EmployeeAdminUnitName | highlight:searchValue\">\r\n            </p>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n    </dx-data-grid>\r\n    }\r\n  </div>\r\n</dx-popup>\r\n", dependencies: [{ kind: "ngmodule", type: DxPopupModule }, { kind: "component", type: i1$1.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$2.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i2$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }, { kind: "ngmodule", type: DxDataGridModule }, { kind: "component", type: i1$1.DxDataGridComponent, selector: "dx-data-grid", inputs: ["accessKey", "activeStateEnabled", "aiIntegration", "allowColumnReordering", "allowColumnResizing", "autoNavigateToFocusedRow", "cacheEnabled", "cellHintEnabled", "columnAutoWidth", "columnChooser", "columnFixing", "columnHidingEnabled", "columnMinWidth", "columnResizingMode", "columns", "columnWidth", "customizeColumns", "dataRowTemplate", "dataSource", "dateSerializationFormat", "disabled", "editing", "elementAttr", "errorRowEnabled", "export", "filterBuilder", "filterBuilderPopup", "filterPanel", "filterRow", "filterSyncEnabled", "filterValue", "focusedColumnIndex", "focusedRowEnabled", "focusedRowIndex", "focusedRowKey", "grouping", "groupPanel", "headerFilter", "height", "highlightChanges", "hint", "hoverStateEnabled", "keyboardNavigation", "keyExpr", "loadPanel", "masterDetail", "noDataText", "pager", "paging", "remoteOperations", "renderAsync", "repaintChangesOnly", "rowAlternationEnabled", "rowDragging", "rowTemplate", "rtlEnabled", "scrolling", "searchPanel", "selectedRowKeys", "selection", "selectionFilter", "showBorders", "showColumnHeaders", "showColumnLines", "showRowLines", "sortByGroupSummaryInfo", "sorting", "stateStoring", "summary", "syncLookupFilterValues", "tabIndex", "toolbar", "twoWayBindingEnabled", "visible", "width", "wordWrapEnabled"], outputs: ["onAdaptiveDetailRowPreparing", "onAIColumnRequestCreating", "onCellClick", "onCellDblClick", "onCellHoverChanged", "onCellPrepared", "onContentReady", "onContextMenuPreparing", "onDataErrorOccurred", "onDisposing", "onEditCanceled", "onEditCanceling", "onEditingStart", "onEditorPrepared", "onEditorPreparing", "onExporting", "onFocusedCellChanged", "onFocusedCellChanging", "onFocusedRowChanged", "onFocusedRowChanging", "onInitialized", "onInitNewRow", "onKeyDown", "onOptionChanged", "onRowClick", "onRowCollapsed", "onRowCollapsing", "onRowDblClick", "onRowExpanded", "onRowExpanding", "onRowInserted", "onRowInserting", "onRowPrepared", "onRowRemoved", "onRowRemoving", "onRowUpdated", "onRowUpdating", "onRowValidating", "onSaved", "onSaving", "onSelectionChanged", "onToolbarPreparing", "accessKeyChange", "activeStateEnabledChange", "aiIntegrationChange", "allowColumnReorderingChange", "allowColumnResizingChange", "autoNavigateToFocusedRowChange", "cacheEnabledChange", "cellHintEnabledChange", "columnAutoWidthChange", "columnChooserChange", "columnFixingChange", "columnHidingEnabledChange", "columnMinWidthChange", "columnResizingModeChange", "columnsChange", "columnWidthChange", "customizeColumnsChange", "dataRowTemplateChange", "dataSourceChange", "dateSerializationFormatChange", "disabledChange", "editingChange", "elementAttrChange", "errorRowEnabledChange", "exportChange", "filterBuilderChange", "filterBuilderPopupChange", "filterPanelChange", "filterRowChange", "filterSyncEnabledChange", "filterValueChange", "focusedColumnIndexChange", "focusedRowEnabledChange", "focusedRowIndexChange", "focusedRowKeyChange", "groupingChange", "groupPanelChange", "headerFilterChange", "heightChange", "highlightChangesChange", "hintChange", "hoverStateEnabledChange", "keyboardNavigationChange", "keyExprChange", "loadPanelChange", "masterDetailChange", "noDataTextChange", "pagerChange", "pagingChange", "remoteOperationsChange", "renderAsyncChange", "repaintChangesOnlyChange", "rowAlternationEnabledChange", "rowDraggingChange", "rowTemplateChange", "rtlEnabledChange", "scrollingChange", "searchPanelChange", "selectedRowKeysChange", "selectionChange", "selectionFilterChange", "showBordersChange", "showColumnHeadersChange", "showColumnLinesChange", "showRowLinesChange", "sortByGroupSummaryInfoChange", "sortingChange", "stateStoringChange", "summaryChange", "syncLookupFilterValuesChange", "tabIndexChange", "toolbarChange", "twoWayBindingEnabledChange", "visibleChange", "widthChange", "wordWrapEnabledChange"] }, { kind: "component", type: i5.DxiColumnComponent, selector: "dxi-column", inputs: ["alignment", "allowEditing", "allowExporting", "allowFiltering", "allowFixing", "allowGrouping", "allowHeaderFiltering", "allowHiding", "allowReordering", "allowResizing", "allowSearch", "allowSorting", "autoExpandGroup", "buttons", "calculateCellValue", "calculateDisplayValue", "calculateFilterExpression", "calculateGroupValue", "calculateSortValue", "caption", "cellTemplate", "columns", "cssClass", "customizeText", "dataField", "dataType", "editCellTemplate", "editorOptions", "encodeHtml", "falseText", "filterOperations", "filterType", "filterValue", "filterValues", "fixed", "fixedPosition", "format", "formItem", "groupCellTemplate", "groupIndex", "headerCellTemplate", "headerFilter", "hidingPriority", "isBand", "lookup", "minWidth", "name", "ownerBand", "renderAsync", "selectedFilterOperation", "setCellValue", "showEditorAlways", "showInColumnChooser", "showWhenGrouped", "sortIndex", "sortingMethod", "sortOrder", "trueText", "type", "validationRules", "visible", "visibleIndex", "width"], outputs: ["filterValueChange", "filterValuesChange", "groupIndexChange", "selectedFilterOperationChange", "sortIndexChange", "sortOrderChange", "visibleChange", "visibleIndexChange"] }, { kind: "component", type: i5.DxoPagingComponent, selector: "dxo-paging", inputs: ["enabled", "pageIndex", "pageSize"], outputs: ["pageIndexChange", "pageSizeChange"] }, { kind: "component", type: i5.DxoScrollingComponent, selector: "dxo-scrolling", inputs: ["columnRenderingMode", "mode", "preloadEnabled", "renderAsync", "rowRenderingMode", "scrollByContent", "scrollByThumb", "showScrollbar", "useNative"] }, { kind: "component", type: i5.DxoSortingComponent, selector: "dxo-sorting", inputs: ["ascendingText", "clearText", "descendingText", "mode", "showSortIndexes"] }, { kind: "component", type: BayanEmployeeBadgeComponent, selector: "bayan-employee-badge", inputs: ["badge", "width", "height", "imageClass", "badgeClass"], outputs: ["employeePhotoError"] }, { kind: "ngmodule", type: DxTextBoxModule }, { kind: "component", type: i1$1.DxTextBoxComponent, selector: "dx-text-box", inputs: ["accessKey", "activeStateEnabled", "buttons", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "inputAttr", "isDirty", "isValid", "label", "labelMode", "mask", "maskChar", "maskInvalidMessage", "maskRules", "maxLength", "mode", "name", "placeholder", "readOnly", "rtlEnabled", "showClearButton", "showMaskMode", "spellcheck", "stylingMode", "tabIndex", "text", "useMaskedValue", "validationError", "validationErrors", "validationMessageMode", "validationMessagePosition", "validationStatus", "value", "valueChangeEvent", "visible", "width"], outputs: ["onChange", "onContentReady", "onCopy", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onKeyDown", "onKeyUp", "onOptionChanged", "onPaste", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "buttonsChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isDirtyChange", "isValidChange", "labelChange", "labelModeChange", "maskChange", "maskCharChange", "maskInvalidMessageChange", "maskRulesChange", "maxLengthChange", "modeChange", "nameChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "showClearButtonChange", "showMaskModeChange", "spellcheckChange", "stylingModeChange", "tabIndexChange", "textChange", "useMaskedValueChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationMessagePositionChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "visibleChange", "widthChange", "onBlur"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: HighlightPipe, name: "highlight" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: HRNextWeekVacationInsightsPopupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: HRNextWeekVacationInsightsPopupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'hr-next-week-vacation-insights-popup', standalone: true, imports: [DxPopupModule, HRTranslatePipe, CommonModule, FontAwesomeModule,
-                        DxDataGridModule, BayanEmployeeBadgeComponent, DxTextBoxModule, HRHighlightPipe], template: "<dx-popup [visible]=\"popupVisible\"\r\n          [height]=\"height\"\r\n          [minHeight]=\"'40%'\"\r\n          [maxHeight]=\"'70%'\"\r\n          [width]=\"width\"\r\n          contentTemplate=\"popup-content\"\r\n          [showCloseButton]=\"false\"\r\n          shadingColor=\"rgba(0,0,0,0.4)\"\r\n          titleTemplate=\"title\"\r\n          [showTitle]=\"true\"\r\n          (onShown)=\"onShown()\"\r\n          (onHidden)=\"onHidden()\">\r\n\r\n  <div *dxTemplate=\"let data of 'title'\">\r\n    <div class=\"d-flex justify-content-between align-items-center my-0\">\r\n      <p class=\"mx-3 fs-16 fw-meduim text-ellipsis-one-line\">\r\n        <span class=\"text-dark-gray\">{{popupTitle ? (popupTitle | HRTranslate) : ('NextWeekVacationInsights' | HRTranslate)}}</span>\r\n        <span class=\"mx-2 text-primary\">({{getPopupTitle() | HRTranslate}})</span>\r\n      </p>\r\n      <div class=\"p-2\" (click)=\"onPopupClose()\">\r\n        <fa-icon [icon]=\"xMarkIcon\" class=\"fs-18 me-1 text-dark-gray cursor-pointer\"></fa-icon>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div *dxTemplate=\"let d of 'popup-content'\">\r\n    <div class=\"mb-2 d-flex justify-content-end\">\r\n      <dx-text-box [width]=\"'250px'\"\r\n                   mode=\"search\"\r\n                   [value]=\"searchValue\"\r\n                   [placeholder]=\"'Search...' | HRTranslate\"\r\n                   (onValueChanged)=\"onSearchValueChanged($event)\">\r\n      </dx-text-box>\r\n    </div>\r\n    @if(dataSource){\r\n    <dx-data-grid  class=\"popup-data-grid\"\r\n                  [dataSource]=\"dataSource\"\r\n                  [showBorders]=\"false\"\r\n                  [showRowLines]=\"false\"\r\n                  [showColumnLines]=\"false\"\r\n                  [columnAutoWidth]=\"true\"\r\n                  [wordWrapEnabled]=\"true\"\r\n                  [height]=\"gridHeight\"\r\n                  [allowColumnReordering]=\"false\"\r\n                  [remoteOperations]=\"{paging: true}\">\r\n\r\n      <dxo-sorting mode=\"none\"></dxo-sorting>\r\n\r\n      <dxo-scrolling mode=\"infinite\"\r\n                     [useNative]=\"false\"\r\n                     [scrollByContent]=\"true\"\r\n                     [scrollByThumb]=\"true\"\r\n                     showScrollbar=\"always\">\r\n      </dxo-scrolling>\r\n\r\n      <dxo-paging [enabled]=\"true\" [pageSize]=\"pageSize\"></dxo-paging>\r\n\r\n      <dxi-column caption=\"{{'Employee' | HRTranslate}}\"\r\n                  dataField=\"EmployeeName\"\r\n                  cellTemplate=\"employeeCellTemplate\"\r\n                  [minWidth]=\"250\">\r\n      </dxi-column>\r\n\r\n      @if(popupType === VacationPopupType.Upcoming){\r\n      <dxi-column caption=\"{{'StartDate' | HRTranslate}}\"\r\n                  dataField=\"VacationStartDate\"\r\n                  dataType=\"date\"\r\n                  format=\"dd/MM/yyyy\"\r\n                  [width]=\"120\"\r\n                  alignment=\"start\">\r\n      </dxi-column>\r\n      <dxi-column caption=\"{{'EndDate' | HRTranslate}}\"\r\n                  dataField=\"VacationEndDate\"\r\n                  dataType=\"date\"\r\n                  format=\"dd/MM/yyyy\"\r\n                  [width]=\"120\"\r\n                  alignment=\"start\">\r\n      </dxi-column>\r\n      }@else{\r\n      <dxi-column caption=\"{{'ReturnDate' | HRTranslate}}\"\r\n                  dataField=\"ReturnDate\"\r\n                  dataType=\"date\"\r\n                  format=\"dd/MM/yyyy\"\r\n                  [width]=\"120\"\r\n                  alignment=\"start\">\r\n      </dxi-column>\r\n      }\r\n\r\n      <div *dxTemplate=\"let cell of 'employeeCellTemplate'\">\r\n        <div class=\"d-flex align-items-center\">\r\n          <bayan-employee-badge\r\n            [badge]=\"getEmployeeBadge(cell.data)\"\r\n            badgeClass=\"badge employee-rounded-badge-xl fs-6\"\r\n            imageClass=\"rounded-circle\"\r\n            [width]=\"'40px'\"\r\n            [height]=\"'40px'\"\r\n            (employeePhotoError)=\"handleEmployeePhotoError(cell.data)\">\r\n          </bayan-employee-badge>\r\n          <div class=\"d-flex flex-column ms-1\">\r\n            <div class=\"d-flex flex-row ms-2\">\r\n              @if(showProperty){\r\n              <span class=\"property-badge cursor-pointer me-1\" [title]=\"cell.data.PropertyName\" [innerHTML]=\"cell.data.PropertySymbol\"></span>\r\n              }\r\n              <span class=\"text-ellipsis-one-line fs-14 text-dark-gray fw-normal\"\r\n                    [title]=\"cell.data.EmployeeNumber + ' | ' + cell.data.EmployeeName\"\r\n                    [innerHTML]=\"(cell.data.EmployeeNumber + ' | ' + cell.data.EmployeeName) | HRHighlight:searchValue\">\r\n              </span>\r\n            </div>\r\n            <p class=\"ms-2 mt-1 text-ellipsis-one-line fs-12 text-dark-gray fw-normal mb-0\"\r\n               [innerHTML]=\"cell.data.EmployeeAdminUnitName | HRHighlight:searchValue\">\r\n            </p>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n    </dx-data-grid>\r\n    }\r\n  </div>\r\n</dx-popup>\r\n" }]
+            args: [{ selector: 'hr-next-week-vacation-insights-popup', standalone: true, imports: [DxPopupModule, TranslatePipe, CommonModule, FontAwesomeModule,
+                        DxDataGridModule, BayanEmployeeBadgeComponent, DxTextBoxModule, HighlightPipe], template: "<dx-popup [visible]=\"popupVisible\"\r\n          [height]=\"height\"\r\n          [minHeight]=\"'40%'\"\r\n          [maxHeight]=\"'70%'\"\r\n          [width]=\"width\"\r\n          contentTemplate=\"popup-content\"\r\n          [showCloseButton]=\"false\"\r\n          shadingColor=\"rgba(0,0,0,0.4)\"\r\n          titleTemplate=\"title\"\r\n          [showTitle]=\"true\"\r\n          (onShown)=\"onShown()\"\r\n          (onHidden)=\"onHidden()\">\r\n\r\n  <div *dxTemplate=\"let data of 'title'\">\r\n    <div class=\"d-flex justify-content-between align-items-center my-0\">\r\n      <p class=\"mx-3 fs-16 fw-meduim text-ellipsis-one-line\">\r\n        <span class=\"text-dark-gray\">{{popupTitle ? (popupTitle | translate) : ('NextWeekVacationInsights' | translate)}}</span>\r\n        <span class=\"mx-2 text-primary\">({{getPopupTitle() | translate}})</span>\r\n      </p>\r\n      <div class=\"p-2\" (click)=\"onPopupClose()\">\r\n        <fa-icon [icon]=\"xMarkIcon\" class=\"fs-18 me-1 text-dark-gray cursor-pointer\"></fa-icon>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div *dxTemplate=\"let d of 'popup-content'\">\r\n    <div class=\"mb-2 d-flex justify-content-end\">\r\n      <dx-text-box [width]=\"'250px'\"\r\n                   mode=\"search\"\r\n                   [value]=\"searchValue\"\r\n                   [placeholder]=\"'Search...' | translate\"\r\n                   (onValueChanged)=\"onSearchValueChanged($event)\">\r\n      </dx-text-box>\r\n    </div>\r\n    @if(dataSource){\r\n    <dx-data-grid  class=\"popup-data-grid\"\r\n                  [dataSource]=\"dataSource\"\r\n                  [showBorders]=\"false\"\r\n                  [showRowLines]=\"false\"\r\n                  [showColumnLines]=\"false\"\r\n                  [columnAutoWidth]=\"true\"\r\n                  [wordWrapEnabled]=\"true\"\r\n                  [height]=\"gridHeight\"\r\n                  [allowColumnReordering]=\"false\"\r\n                  [remoteOperations]=\"{paging: true}\">\r\n\r\n      <dxo-sorting mode=\"none\"></dxo-sorting>\r\n\r\n      <dxo-scrolling mode=\"infinite\"\r\n                     [useNative]=\"false\"\r\n                     [scrollByContent]=\"true\"\r\n                     [scrollByThumb]=\"true\"\r\n                     showScrollbar=\"always\">\r\n      </dxo-scrolling>\r\n\r\n      <dxo-paging [enabled]=\"true\" [pageSize]=\"pageSize\"></dxo-paging>\r\n\r\n      <dxi-column caption=\"{{'Employee' | translate}}\"\r\n                  dataField=\"EmployeeName\"\r\n                  cellTemplate=\"employeeCellTemplate\"\r\n                  [minWidth]=\"250\">\r\n      </dxi-column>\r\n\r\n      @if(popupType === VacationPopupType.Upcoming){\r\n      <dxi-column caption=\"{{'StartDate' | translate}}\"\r\n                  dataField=\"VacationStartDate\"\r\n                  dataType=\"date\"\r\n                  format=\"dd/MM/yyyy\"\r\n                  [width]=\"120\"\r\n                  alignment=\"start\">\r\n      </dxi-column>\r\n      <dxi-column caption=\"{{'EndDate' | translate}}\"\r\n                  dataField=\"VacationEndDate\"\r\n                  dataType=\"date\"\r\n                  format=\"dd/MM/yyyy\"\r\n                  [width]=\"120\"\r\n                  alignment=\"start\">\r\n      </dxi-column>\r\n      }@else{\r\n      <dxi-column caption=\"{{'ReturnDate' | translate}}\"\r\n                  dataField=\"ReturnDate\"\r\n                  dataType=\"date\"\r\n                  format=\"dd/MM/yyyy\"\r\n                  [width]=\"120\"\r\n                  alignment=\"start\">\r\n      </dxi-column>\r\n      }\r\n\r\n      <div *dxTemplate=\"let cell of 'employeeCellTemplate'\">\r\n        <div class=\"d-flex align-items-center\">\r\n          <bayan-employee-badge\r\n            [badge]=\"getEmployeeBadge(cell.data)\"\r\n            badgeClass=\"badge employee-rounded-badge-xl fs-6\"\r\n            imageClass=\"rounded-circle\"\r\n            [width]=\"'40px'\"\r\n            [height]=\"'40px'\"\r\n            (employeePhotoError)=\"handleEmployeePhotoError(cell.data)\">\r\n          </bayan-employee-badge>\r\n          <div class=\"d-flex flex-column ms-1\">\r\n            <div class=\"d-flex flex-row ms-2\">\r\n              @if(showProperty){\r\n              <span class=\"property-badge cursor-pointer me-1\" [title]=\"cell.data.PropertyName\" [innerHTML]=\"cell.data.PropertySymbol\"></span>\r\n              }\r\n              <span class=\"text-ellipsis-one-line fs-14 text-dark-gray fw-normal\"\r\n                    [title]=\"cell.data.EmployeeNumber + ' | ' + cell.data.EmployeeName\"\r\n                    [innerHTML]=\"(cell.data.EmployeeNumber + ' | ' + cell.data.EmployeeName) | highlight:searchValue\">\r\n              </span>\r\n            </div>\r\n            <p class=\"ms-2 mt-1 text-ellipsis-one-line fs-12 text-dark-gray fw-normal mb-0\"\r\n               [innerHTML]=\"cell.data.EmployeeAdminUnitName | highlight:searchValue\">\r\n            </p>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n    </dx-data-grid>\r\n    }\r\n  </div>\r\n</dx-popup>\r\n" }]
         }], ctorParameters: () => [{ type: i1.HttpClient }], propDecorators: { dataGrid: [{
                 type: ViewChild,
                 args: [DxDataGridComponent, { static: false }]
@@ -4090,13 +3050,13 @@ class MyNextWeekVacationInsightsWidgetComponent {
             Icon: faPlaneArrival
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MyNextWeekVacationInsightsWidgetComponent, deps: [{ token: HRSelfWidgetsService }, { token: HRTranslatePipe }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.21", type: MyNextWeekVacationInsightsWidgetComponent, isStandalone: true, selector: "hr-my-next-week-vacation-insights-widget", inputs: { baseUrl: "baseUrl", showProperty: "showProperty", cardClass: "cardClass", titleClass: "titleClass", valueClass: "valueClass", disabledValueClass: "disabledValueClass", upcomingContainerClass: "upcomingContainerClass", expectedContainerClass: "expectedContainerClass", firstRowClass: "firstRowClass", secondRowClass: "secondRowClass" }, outputs: { isLoadingChanged: "isLoadingChanged" }, ngImport: i0, template: "<div [class]=\"cardClass\">\r\n  <div class=\"card-body d-flex flex-column p-0 mb-3\">\r\n    <div [class]=\"titleClass\">\r\n      {{'NextWeekVacationInsights' | HRTranslate | uppercase}}\r\n    </div>\r\n    <div class=\"d-flex flex-column mt-3\">\r\n      <div [ngClass]=\"firstRowClass\">\r\n      <sky-widget-section-item\r\n        [data]=\"upcomingVacationsBadge\"\r\n        [containerClass]=\"upcomingContainerClass\"\r\n        [valueClass]=\"upcomingVacationsBadge?.Value === 0 ? disabledValueClass : valueClass\"\r\n        [ngClass]=\"{'pe-none': upcomingVacationsBadge?.Value === 0}\"\r\n        (OnWidgetSectionClick)=\"openPopup(VacationPopupType.Upcoming)\">\r\n      </sky-widget-section-item>\r\n      </div>\r\n      <div [ngClass]=\"secondRowClass\">\r\n      <sky-widget-section-item\r\n        [data]=\"expectedToReturnBadge\"\r\n        [containerClass]=\"expectedContainerClass\"\r\n        [valueClass]=\"expectedToReturnBadge?.Value === 0 ? disabledValueClass : valueClass\"\r\n        [ngClass]=\"{'pe-none': expectedToReturnBadge?.Value === 0}\"\r\n        (OnWidgetSectionClick)=\"openPopup(VacationPopupType.ExpectedToReturn)\">\r\n      </sky-widget-section-item>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<hr-next-week-vacation-insights-popup\r\n  [popupVisible]=\"popupVisible\"\r\n  [popupType]=\"popupType\"\r\n  [baseUrl]=\"popupBaseUrl\"\r\n  [showProperty]=\"showProperty\"\r\n  (closePopupClickHandler)=\"closePopup()\">\r\n</hr-next-week-vacation-insights-popup>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i2$2.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: HRTranslatePipe, name: "HRTranslate" }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: SkyWidgetSectionItemComponent, selector: "sky-widget-section-item", inputs: ["data", "iconContainerClass", "iconClass", "iconSize", "iconWidth", "iconHeight", "buttonClass", "titleClass", "valueClass", "containerClass", "borderColorClass"], outputs: ["OnWidgetSectionClick"] }, { kind: "component", type: HRNextWeekVacationInsightsPopupComponent, selector: "hr-next-week-vacation-insights-popup", inputs: ["popupVisible", "popupType", "baseUrl", "width", "height", "gridHeight", "pageSize", "showProperty"], outputs: ["closePopupClickHandler"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MyNextWeekVacationInsightsWidgetComponent, deps: [{ token: HRSelfWidgetsService }, { token: i2.TranslatePipe }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.13", type: MyNextWeekVacationInsightsWidgetComponent, isStandalone: true, selector: "hr-my-next-week-vacation-insights-widget", inputs: { baseUrl: "baseUrl", showProperty: "showProperty", cardClass: "cardClass", titleClass: "titleClass", valueClass: "valueClass", disabledValueClass: "disabledValueClass", upcomingContainerClass: "upcomingContainerClass", expectedContainerClass: "expectedContainerClass", firstRowClass: "firstRowClass", secondRowClass: "secondRowClass" }, outputs: { isLoadingChanged: "isLoadingChanged" }, ngImport: i0, template: "<div [class]=\"cardClass\">\r\n  <div class=\"card-body d-flex flex-column p-0 mb-3\">\r\n    <div [class]=\"titleClass\">\r\n      {{'NextWeekVacationInsights' | translate | uppercase}}\r\n    </div>\r\n    <div class=\"d-flex flex-column mt-3\">\r\n      <div [ngClass]=\"firstRowClass\">\r\n      <sky-widget-section-item\r\n        [data]=\"upcomingVacationsBadge\"\r\n        [containerClass]=\"upcomingContainerClass\"\r\n        [valueClass]=\"upcomingVacationsBadge?.Value === 0 ? disabledValueClass : valueClass\"\r\n        [ngClass]=\"{'pe-none': upcomingVacationsBadge?.Value === 0}\"\r\n        (OnWidgetSectionClick)=\"openPopup(VacationPopupType.Upcoming)\">\r\n      </sky-widget-section-item>\r\n      </div>\r\n      <div [ngClass]=\"secondRowClass\">\r\n      <sky-widget-section-item\r\n        [data]=\"expectedToReturnBadge\"\r\n        [containerClass]=\"expectedContainerClass\"\r\n        [valueClass]=\"expectedToReturnBadge?.Value === 0 ? disabledValueClass : valueClass\"\r\n        [ngClass]=\"{'pe-none': expectedToReturnBadge?.Value === 0}\"\r\n        (OnWidgetSectionClick)=\"openPopup(VacationPopupType.ExpectedToReturn)\">\r\n      </sky-widget-section-item>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<hr-next-week-vacation-insights-popup\r\n  [popupVisible]=\"popupVisible\"\r\n  [popupType]=\"popupType\"\r\n  [baseUrl]=\"popupBaseUrl\"\r\n  [showProperty]=\"showProperty\"\r\n  (closePopupClickHandler)=\"closePopup()\">\r\n</hr-next-week-vacation-insights-popup>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: SkyWidgetSectionItemComponent, selector: "sky-widget-section-item", inputs: ["data", "iconContainerClass", "iconClass", "iconSize", "iconWidth", "iconHeight", "buttonClass", "titleClass", "valueClass", "containerClass", "borderColorClass"], outputs: ["OnWidgetSectionClick"] }, { kind: "component", type: HRNextWeekVacationInsightsPopupComponent, selector: "hr-next-week-vacation-insights-popup", inputs: ["popupVisible", "popupType", "baseUrl", "width", "height", "gridHeight", "pageSize", "showProperty"], outputs: ["closePopupClickHandler"] }, { kind: "pipe", type: i2$3.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MyNextWeekVacationInsightsWidgetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MyNextWeekVacationInsightsWidgetComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'hr-my-next-week-vacation-insights-widget', standalone: true, imports: [CommonModule, HRTranslatePipe, FontAwesomeModule, SkyWidgetSectionItemComponent, HRNextWeekVacationInsightsPopupComponent], template: "<div [class]=\"cardClass\">\r\n  <div class=\"card-body d-flex flex-column p-0 mb-3\">\r\n    <div [class]=\"titleClass\">\r\n      {{'NextWeekVacationInsights' | HRTranslate | uppercase}}\r\n    </div>\r\n    <div class=\"d-flex flex-column mt-3\">\r\n      <div [ngClass]=\"firstRowClass\">\r\n      <sky-widget-section-item\r\n        [data]=\"upcomingVacationsBadge\"\r\n        [containerClass]=\"upcomingContainerClass\"\r\n        [valueClass]=\"upcomingVacationsBadge?.Value === 0 ? disabledValueClass : valueClass\"\r\n        [ngClass]=\"{'pe-none': upcomingVacationsBadge?.Value === 0}\"\r\n        (OnWidgetSectionClick)=\"openPopup(VacationPopupType.Upcoming)\">\r\n      </sky-widget-section-item>\r\n      </div>\r\n      <div [ngClass]=\"secondRowClass\">\r\n      <sky-widget-section-item\r\n        [data]=\"expectedToReturnBadge\"\r\n        [containerClass]=\"expectedContainerClass\"\r\n        [valueClass]=\"expectedToReturnBadge?.Value === 0 ? disabledValueClass : valueClass\"\r\n        [ngClass]=\"{'pe-none': expectedToReturnBadge?.Value === 0}\"\r\n        (OnWidgetSectionClick)=\"openPopup(VacationPopupType.ExpectedToReturn)\">\r\n      </sky-widget-section-item>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<hr-next-week-vacation-insights-popup\r\n  [popupVisible]=\"popupVisible\"\r\n  [popupType]=\"popupType\"\r\n  [baseUrl]=\"popupBaseUrl\"\r\n  [showProperty]=\"showProperty\"\r\n  (closePopupClickHandler)=\"closePopup()\">\r\n</hr-next-week-vacation-insights-popup>\r\n" }]
-        }], ctorParameters: () => [{ type: HRSelfWidgetsService }, { type: HRTranslatePipe }], propDecorators: { baseUrl: [{
+            args: [{ selector: 'hr-my-next-week-vacation-insights-widget', standalone: true, imports: [CommonModule, TranslatePipe, FontAwesomeModule, SkyWidgetSectionItemComponent, HRNextWeekVacationInsightsPopupComponent], template: "<div [class]=\"cardClass\">\r\n  <div class=\"card-body d-flex flex-column p-0 mb-3\">\r\n    <div [class]=\"titleClass\">\r\n      {{'NextWeekVacationInsights' | translate | uppercase}}\r\n    </div>\r\n    <div class=\"d-flex flex-column mt-3\">\r\n      <div [ngClass]=\"firstRowClass\">\r\n      <sky-widget-section-item\r\n        [data]=\"upcomingVacationsBadge\"\r\n        [containerClass]=\"upcomingContainerClass\"\r\n        [valueClass]=\"upcomingVacationsBadge?.Value === 0 ? disabledValueClass : valueClass\"\r\n        [ngClass]=\"{'pe-none': upcomingVacationsBadge?.Value === 0}\"\r\n        (OnWidgetSectionClick)=\"openPopup(VacationPopupType.Upcoming)\">\r\n      </sky-widget-section-item>\r\n      </div>\r\n      <div [ngClass]=\"secondRowClass\">\r\n      <sky-widget-section-item\r\n        [data]=\"expectedToReturnBadge\"\r\n        [containerClass]=\"expectedContainerClass\"\r\n        [valueClass]=\"expectedToReturnBadge?.Value === 0 ? disabledValueClass : valueClass\"\r\n        [ngClass]=\"{'pe-none': expectedToReturnBadge?.Value === 0}\"\r\n        (OnWidgetSectionClick)=\"openPopup(VacationPopupType.ExpectedToReturn)\">\r\n      </sky-widget-section-item>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<hr-next-week-vacation-insights-popup\r\n  [popupVisible]=\"popupVisible\"\r\n  [popupType]=\"popupType\"\r\n  [baseUrl]=\"popupBaseUrl\"\r\n  [showProperty]=\"showProperty\"\r\n  (closePopupClickHandler)=\"closePopup()\">\r\n</hr-next-week-vacation-insights-popup>\r\n" }]
+        }], ctorParameters: () => [{ type: HRSelfWidgetsService }, { type: i2.TranslatePipe }], propDecorators: { baseUrl: [{
                 type: Input
             }], showProperty: [{
                 type: Input
@@ -4190,13 +3150,13 @@ class MyProfileExperiencesWidgetComponent {
         }
         return classes.join(' ');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MyProfileExperiencesWidgetComponent, deps: [{ token: HRSelfWidgetsService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: MyProfileExperiencesWidgetComponent, isStandalone: true, selector: "hr-my-profile-experiences-widget", inputs: { baseUrl: "baseUrl", sectionTitle: "sectionTitle", viewIcon: "viewIcon", downloadIcon: "downloadIcon", experienceIcon: "experienceIcon", headerIconClass: "headerIconClass", headerTextClass: "headerTextClass", headerDividerClass: "headerDividerClass", rowClass: "rowClass", headerRowClass: "headerRowClass", actionsSpacerClass: "actionsSpacerClass", labelClass: "labelClass", valueClass: "valueClass", viewIconClass: "viewIconClass", downloadIconClass: "downloadIconClass", emptyStateContainerClass: "emptyStateContainerClass", emptyStateTextClass: "emptyStateTextClass", itemRowClass: "itemRowClass", itemColumnsWrapperClass: "itemColumnsWrapperClass", itemColumnClass: "itemColumnClass", actionsColumnClass: "actionsColumnClass", rowMarginBottomClass: "rowMarginBottomClass", rowMarginBottomEmptyClass: "rowMarginBottomEmptyClass" }, outputs: { isLoadingChanged: "isLoadingChanged", attachmentViewed: "attachmentViewed", attachmentDownloaded: "attachmentDownloaded", errorOccurred: "errorOccurred" }, ngImport: i0, template: "<sky-section-divider [fontAwesomeIcon]=\"experienceIcon\"\r\n                     [text]=\"(sectionTitle | HRTranslate | uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n<div [class]=\"wrapperClass\">\r\n\r\n  @if(experiences.length > 0){\r\n\r\n  <div class=\"row\">\r\n    <div [class]=\"headerRowClass\">\r\n      <div [class]=\"itemColumnClass\">\r\n        <p [class]=\"labelClass\">{{'Period' | HRTranslate}}</p>\r\n      </div>\r\n\r\n      <div [class]=\"itemColumnClass\">\r\n        <p [class]=\"labelClass\">{{'Employer' | HRTranslate}}</p>\r\n      </div>\r\n\r\n      <div [class]=\"itemColumnClass\">\r\n        <p [class]=\"labelClass\">{{'Position' | HRTranslate}}</p>\r\n      </div>\r\n\r\n      <div [class]=\"itemColumnClass\">\r\n        <p [class]=\"labelClass\">{{'TerminationReason' | HRTranslate}}</p>\r\n      </div>\r\n    </div>\r\n\r\n    <div [class]=\"actionsSpacerClass\"></div>\r\n\r\n    @for (experience of experiences; track experience){\r\n    <div [class]=\"itemColumnsWrapperClass\">\r\n      <div [class]=\"itemColumnClass\">\r\n        <p [class]=\"valueClass\" [title]=\"(experience.StartDate | date:'dd/MM/yyyy') + ' - ' + (experience.EndDate | date:'dd/MM/yyyy')\">{{(experience.StartDate | date:'dd/MM/yyyy') + ' - ' + (experience.EndDate | date:'dd/MM/yyyy')}}</p>\r\n      </div>\r\n\r\n      <div [class]=\"itemColumnClass\">\r\n        <p [class]=\"valueClass\" [title]=\"experience.Employer ? experience.Employer : ''\">\r\n          @if(experience.Employer){\r\n          {{experience.Employer}}\r\n          }@else{\r\n          {{'\u2014'}}\r\n          }\r\n        </p>\r\n      </div>\r\n\r\n      <div [class]=\"itemColumnClass\">\r\n        <p [class]=\"valueClass\" [title]=\"experience.Position ? experience.Position : ''\">\r\n          @if(experience.Position){\r\n          {{experience.Position}}\r\n          }@else{\r\n          {{'\u2014'}}\r\n          }\r\n        </p>\r\n      </div>\r\n\r\n      <div [class]=\"itemColumnClass\">\r\n        <p [class]=\"valueClass\" [title]=\"experience.TerminationReason ? experience.TerminationReason : ''\">\r\n          @if(experience.TerminationReason){\r\n          {{experience.TerminationReason}}\r\n          }@else{\r\n          {{'\u2014'}}\r\n          }\r\n        </p>\r\n      </div>\r\n    </div>\r\n\r\n      @if(experience.Document){\r\n      <div [class]=\"actionsColumnClass\">\r\n        <fa-icon [icon]=\"viewIcon\" [class]=\"viewIconClass\" (click)=\"onAttachmentView(experience.Document)\"></fa-icon>\r\n        <fa-icon [icon]=\"downloadIcon\" [class]=\"downloadIconClass\" (click)=\"onAttachmentDownload(experience.Document)\"></fa-icon>\r\n      </div>\r\n      }\r\n\r\n    }\r\n\r\n  </div>\r\n  }@else{\r\n\r\n  <sky-empty-design-card [containerClass]=\"emptyStateContainerClass\"\r\n                         [cardBodyClass]=\"''\"\r\n                         [cardBodyContainerClass]=\"''\"\r\n                         [visibleIcon]=\"false\"\r\n                         [visibleQuickAction]=\"false\"\r\n                         [emptyTextClass]=\"emptyStateTextClass\"\r\n                         [emptyText]=\"isLoading ? ((sectionTitle | HRTranslate) + ' ' + ('IsLoading' | HRTranslate)) : ('ThereIsNoExperiencesYet' | HRTranslate)\">\r\n</sky-empty-design-card>\r\n\r\n  }\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i2$2.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i2$2.DatePipe, name: "date" }, { kind: "component", type: SkySectionDividerComponent, selector: "sky-section-divider", inputs: ["text", "fontAwesomeIcon", "textClass", "dividerClass", "iconClass"] }, { kind: "pipe", type: HRTranslatePipe, name: "HRTranslate" }, { kind: "component", type: SkyEmptyDesignCardComponent, selector: "sky-empty-design-card", inputs: ["emptyIcon", "emptyIconClass", "emptyText", "emptyTextClass", "actionTitle", "actionIcon", "actionDisabled", "textColor", "disabledTitleClass", "activeTitleClass", "disabledIconClass", "activeIconClass", "actionClass", "containerClass", "cardBodyClass", "cardBodyContainerClass", "visibleIcon", "visibleQuickAction"], outputs: ["onActionClick"] }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MyProfileExperiencesWidgetComponent, deps: [{ token: HRSelfWidgetsService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: MyProfileExperiencesWidgetComponent, isStandalone: true, selector: "hr-my-profile-experiences-widget", inputs: { baseUrl: "baseUrl", sectionTitle: "sectionTitle", viewIcon: "viewIcon", downloadIcon: "downloadIcon", experienceIcon: "experienceIcon", headerIconClass: "headerIconClass", headerTextClass: "headerTextClass", headerDividerClass: "headerDividerClass", rowClass: "rowClass", headerRowClass: "headerRowClass", actionsSpacerClass: "actionsSpacerClass", labelClass: "labelClass", valueClass: "valueClass", viewIconClass: "viewIconClass", downloadIconClass: "downloadIconClass", emptyStateContainerClass: "emptyStateContainerClass", emptyStateTextClass: "emptyStateTextClass", itemRowClass: "itemRowClass", itemColumnsWrapperClass: "itemColumnsWrapperClass", itemColumnClass: "itemColumnClass", actionsColumnClass: "actionsColumnClass", rowMarginBottomClass: "rowMarginBottomClass", rowMarginBottomEmptyClass: "rowMarginBottomEmptyClass" }, outputs: { isLoadingChanged: "isLoadingChanged", attachmentViewed: "attachmentViewed", attachmentDownloaded: "attachmentDownloaded", errorOccurred: "errorOccurred" }, ngImport: i0, template: "<sky-section-divider [fontAwesomeIcon]=\"experienceIcon\"\r\n                     [text]=\"(sectionTitle | translate | uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n<div [class]=\"wrapperClass\">\r\n\r\n  @if(experiences.length > 0){\r\n\r\n  <div class=\"row\">\r\n    <div [class]=\"headerRowClass\">\r\n      <div [class]=\"itemColumnClass\">\r\n        <p [class]=\"labelClass\">{{'Period' | translate}}</p>\r\n      </div>\r\n\r\n      <div [class]=\"itemColumnClass\">\r\n        <p [class]=\"labelClass\">{{'Employer' | translate}}</p>\r\n      </div>\r\n\r\n      <div [class]=\"itemColumnClass\">\r\n        <p [class]=\"labelClass\">{{'Position' | translate}}</p>\r\n      </div>\r\n\r\n      <div [class]=\"itemColumnClass\">\r\n        <p [class]=\"labelClass\">{{'TerminationReason' | translate}}</p>\r\n      </div>\r\n    </div>\r\n\r\n    <div [class]=\"actionsSpacerClass\"></div>\r\n\r\n    @for (experience of experiences; track experience){\r\n    <div [class]=\"itemColumnsWrapperClass\">\r\n      <div [class]=\"itemColumnClass\">\r\n        <p [class]=\"valueClass\" [title]=\"(experience.StartDate | date:'dd/MM/yyyy') + ' - ' + (experience.EndDate | date:'dd/MM/yyyy')\">{{(experience.StartDate | date:'dd/MM/yyyy') + ' - ' + (experience.EndDate | date:'dd/MM/yyyy')}}</p>\r\n      </div>\r\n\r\n      <div [class]=\"itemColumnClass\">\r\n        <p [class]=\"valueClass\" [title]=\"experience.Employer ? experience.Employer : ''\">\r\n          @if(experience.Employer){\r\n          {{experience.Employer}}\r\n          }@else{\r\n          {{'\u2014'}}\r\n          }\r\n        </p>\r\n      </div>\r\n\r\n      <div [class]=\"itemColumnClass\">\r\n        <p [class]=\"valueClass\" [title]=\"experience.Position ? experience.Position : ''\">\r\n          @if(experience.Position){\r\n          {{experience.Position}}\r\n          }@else{\r\n          {{'\u2014'}}\r\n          }\r\n        </p>\r\n      </div>\r\n\r\n      <div [class]=\"itemColumnClass\">\r\n        <p [class]=\"valueClass\" [title]=\"experience.TerminationReason ? experience.TerminationReason : ''\">\r\n          @if(experience.TerminationReason){\r\n          {{experience.TerminationReason}}\r\n          }@else{\r\n          {{'\u2014'}}\r\n          }\r\n        </p>\r\n      </div>\r\n    </div>\r\n\r\n      @if(experience.Document){\r\n      <div [class]=\"actionsColumnClass\">\r\n        <fa-icon [icon]=\"viewIcon\" [class]=\"viewIconClass\" (click)=\"onAttachmentView(experience.Document)\"></fa-icon>\r\n        <fa-icon [icon]=\"downloadIcon\" [class]=\"downloadIconClass\" (click)=\"onAttachmentDownload(experience.Document)\"></fa-icon>\r\n      </div>\r\n      }\r\n\r\n    }\r\n\r\n  </div>\r\n  }@else{\r\n\r\n  <sky-empty-design-card [containerClass]=\"emptyStateContainerClass\"\r\n                         [cardBodyClass]=\"''\"\r\n                         [cardBodyContainerClass]=\"''\"\r\n                         [visibleIcon]=\"false\"\r\n                         [visibleQuickAction]=\"false\"\r\n                         [emptyTextClass]=\"emptyStateTextClass\"\r\n                         [emptyText]=\"isLoading ? ((sectionTitle | translate) + ' ' + ('IsLoading' | translate)) : ('ThereIsNoExperiencesYet' | translate)\">\r\n</sky-empty-design-card>\r\n\r\n  }\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: SkySectionDividerComponent, selector: "sky-section-divider", inputs: ["text", "fontAwesomeIcon", "textClass", "dividerClass", "iconClass"] }, { kind: "component", type: SkyEmptyDesignCardComponent, selector: "sky-empty-design-card", inputs: ["emptyIcon", "emptyIconClass", "emptyText", "emptyTextClass", "actionTitle", "actionIcon", "actionDisabled", "textColor", "disabledTitleClass", "activeTitleClass", "disabledIconClass", "activeIconClass", "actionClass", "containerClass", "cardBodyClass", "cardBodyContainerClass", "visibleIcon", "visibleQuickAction"], outputs: ["onActionClick"] }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i2$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }, { kind: "pipe", type: i2$3.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i2$3.DatePipe, name: "date" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MyProfileExperiencesWidgetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MyProfileExperiencesWidgetComponent, decorators: [{
             type: Component,
             args: [{ selector: 'hr-my-profile-experiences-widget', standalone: true, imports: [CommonModule, SkySectionDividerComponent,
-                        HRTranslatePipe, SkyEmptyDesignCardComponent, FontAwesomeModule], template: "<sky-section-divider [fontAwesomeIcon]=\"experienceIcon\"\r\n                     [text]=\"(sectionTitle | HRTranslate | uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n<div [class]=\"wrapperClass\">\r\n\r\n  @if(experiences.length > 0){\r\n\r\n  <div class=\"row\">\r\n    <div [class]=\"headerRowClass\">\r\n      <div [class]=\"itemColumnClass\">\r\n        <p [class]=\"labelClass\">{{'Period' | HRTranslate}}</p>\r\n      </div>\r\n\r\n      <div [class]=\"itemColumnClass\">\r\n        <p [class]=\"labelClass\">{{'Employer' | HRTranslate}}</p>\r\n      </div>\r\n\r\n      <div [class]=\"itemColumnClass\">\r\n        <p [class]=\"labelClass\">{{'Position' | HRTranslate}}</p>\r\n      </div>\r\n\r\n      <div [class]=\"itemColumnClass\">\r\n        <p [class]=\"labelClass\">{{'TerminationReason' | HRTranslate}}</p>\r\n      </div>\r\n    </div>\r\n\r\n    <div [class]=\"actionsSpacerClass\"></div>\r\n\r\n    @for (experience of experiences; track experience){\r\n    <div [class]=\"itemColumnsWrapperClass\">\r\n      <div [class]=\"itemColumnClass\">\r\n        <p [class]=\"valueClass\" [title]=\"(experience.StartDate | date:'dd/MM/yyyy') + ' - ' + (experience.EndDate | date:'dd/MM/yyyy')\">{{(experience.StartDate | date:'dd/MM/yyyy') + ' - ' + (experience.EndDate | date:'dd/MM/yyyy')}}</p>\r\n      </div>\r\n\r\n      <div [class]=\"itemColumnClass\">\r\n        <p [class]=\"valueClass\" [title]=\"experience.Employer ? experience.Employer : ''\">\r\n          @if(experience.Employer){\r\n          {{experience.Employer}}\r\n          }@else{\r\n          {{'\u2014'}}\r\n          }\r\n        </p>\r\n      </div>\r\n\r\n      <div [class]=\"itemColumnClass\">\r\n        <p [class]=\"valueClass\" [title]=\"experience.Position ? experience.Position : ''\">\r\n          @if(experience.Position){\r\n          {{experience.Position}}\r\n          }@else{\r\n          {{'\u2014'}}\r\n          }\r\n        </p>\r\n      </div>\r\n\r\n      <div [class]=\"itemColumnClass\">\r\n        <p [class]=\"valueClass\" [title]=\"experience.TerminationReason ? experience.TerminationReason : ''\">\r\n          @if(experience.TerminationReason){\r\n          {{experience.TerminationReason}}\r\n          }@else{\r\n          {{'\u2014'}}\r\n          }\r\n        </p>\r\n      </div>\r\n    </div>\r\n\r\n      @if(experience.Document){\r\n      <div [class]=\"actionsColumnClass\">\r\n        <fa-icon [icon]=\"viewIcon\" [class]=\"viewIconClass\" (click)=\"onAttachmentView(experience.Document)\"></fa-icon>\r\n        <fa-icon [icon]=\"downloadIcon\" [class]=\"downloadIconClass\" (click)=\"onAttachmentDownload(experience.Document)\"></fa-icon>\r\n      </div>\r\n      }\r\n\r\n    }\r\n\r\n  </div>\r\n  }@else{\r\n\r\n  <sky-empty-design-card [containerClass]=\"emptyStateContainerClass\"\r\n                         [cardBodyClass]=\"''\"\r\n                         [cardBodyContainerClass]=\"''\"\r\n                         [visibleIcon]=\"false\"\r\n                         [visibleQuickAction]=\"false\"\r\n                         [emptyTextClass]=\"emptyStateTextClass\"\r\n                         [emptyText]=\"isLoading ? ((sectionTitle | HRTranslate) + ' ' + ('IsLoading' | HRTranslate)) : ('ThereIsNoExperiencesYet' | HRTranslate)\">\r\n</sky-empty-design-card>\r\n\r\n  }\r\n</div>\r\n" }]
+                        TranslatePipe, SkyEmptyDesignCardComponent, FontAwesomeModule], template: "<sky-section-divider [fontAwesomeIcon]=\"experienceIcon\"\r\n                     [text]=\"(sectionTitle | translate | uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n<div [class]=\"wrapperClass\">\r\n\r\n  @if(experiences.length > 0){\r\n\r\n  <div class=\"row\">\r\n    <div [class]=\"headerRowClass\">\r\n      <div [class]=\"itemColumnClass\">\r\n        <p [class]=\"labelClass\">{{'Period' | translate}}</p>\r\n      </div>\r\n\r\n      <div [class]=\"itemColumnClass\">\r\n        <p [class]=\"labelClass\">{{'Employer' | translate}}</p>\r\n      </div>\r\n\r\n      <div [class]=\"itemColumnClass\">\r\n        <p [class]=\"labelClass\">{{'Position' | translate}}</p>\r\n      </div>\r\n\r\n      <div [class]=\"itemColumnClass\">\r\n        <p [class]=\"labelClass\">{{'TerminationReason' | translate}}</p>\r\n      </div>\r\n    </div>\r\n\r\n    <div [class]=\"actionsSpacerClass\"></div>\r\n\r\n    @for (experience of experiences; track experience){\r\n    <div [class]=\"itemColumnsWrapperClass\">\r\n      <div [class]=\"itemColumnClass\">\r\n        <p [class]=\"valueClass\" [title]=\"(experience.StartDate | date:'dd/MM/yyyy') + ' - ' + (experience.EndDate | date:'dd/MM/yyyy')\">{{(experience.StartDate | date:'dd/MM/yyyy') + ' - ' + (experience.EndDate | date:'dd/MM/yyyy')}}</p>\r\n      </div>\r\n\r\n      <div [class]=\"itemColumnClass\">\r\n        <p [class]=\"valueClass\" [title]=\"experience.Employer ? experience.Employer : ''\">\r\n          @if(experience.Employer){\r\n          {{experience.Employer}}\r\n          }@else{\r\n          {{'\u2014'}}\r\n          }\r\n        </p>\r\n      </div>\r\n\r\n      <div [class]=\"itemColumnClass\">\r\n        <p [class]=\"valueClass\" [title]=\"experience.Position ? experience.Position : ''\">\r\n          @if(experience.Position){\r\n          {{experience.Position}}\r\n          }@else{\r\n          {{'\u2014'}}\r\n          }\r\n        </p>\r\n      </div>\r\n\r\n      <div [class]=\"itemColumnClass\">\r\n        <p [class]=\"valueClass\" [title]=\"experience.TerminationReason ? experience.TerminationReason : ''\">\r\n          @if(experience.TerminationReason){\r\n          {{experience.TerminationReason}}\r\n          }@else{\r\n          {{'\u2014'}}\r\n          }\r\n        </p>\r\n      </div>\r\n    </div>\r\n\r\n      @if(experience.Document){\r\n      <div [class]=\"actionsColumnClass\">\r\n        <fa-icon [icon]=\"viewIcon\" [class]=\"viewIconClass\" (click)=\"onAttachmentView(experience.Document)\"></fa-icon>\r\n        <fa-icon [icon]=\"downloadIcon\" [class]=\"downloadIconClass\" (click)=\"onAttachmentDownload(experience.Document)\"></fa-icon>\r\n      </div>\r\n      }\r\n\r\n    }\r\n\r\n  </div>\r\n  }@else{\r\n\r\n  <sky-empty-design-card [containerClass]=\"emptyStateContainerClass\"\r\n                         [cardBodyClass]=\"''\"\r\n                         [cardBodyContainerClass]=\"''\"\r\n                         [visibleIcon]=\"false\"\r\n                         [visibleQuickAction]=\"false\"\r\n                         [emptyTextClass]=\"emptyStateTextClass\"\r\n                         [emptyText]=\"isLoading ? ((sectionTitle | translate) + ' ' + ('IsLoading' | translate)) : ('ThereIsNoExperiencesYet' | translate)\">\r\n</sky-empty-design-card>\r\n\r\n  }\r\n</div>\r\n" }]
         }], ctorParameters: () => [{ type: HRSelfWidgetsService }], propDecorators: { baseUrl: [{
                 type: Input
             }], sectionTitle: [{
@@ -4323,12 +3283,12 @@ class MyProfileDegreesWidgetComponent {
     onAttachmentDownload(file) {
         this.attachmentDownloaded.emit(file);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MyProfileDegreesWidgetComponent, deps: [{ token: HRSelfWidgetsService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: MyProfileDegreesWidgetComponent, isStandalone: true, selector: "hr-my-profile-degrees-widget", inputs: { baseUrl: "baseUrl", sectionTitle: "sectionTitle", degreesIcon: "degreesIcon", viewIcon: "viewIcon", downloadIcon: "downloadIcon", headerIconClass: "headerIconClass", headerTextClass: "headerTextClass", headerDividerClass: "headerDividerClass", rowClass: "rowClass", rowMarginBottomClass: "rowMarginBottomClass", rowMarginBottomEmptyClass: "rowMarginBottomEmptyClass", headerRowClass: "headerRowClass", actionsSpacerClass: "actionsSpacerClass", labelClass: "labelClass", valueClass: "valueClass", viewIconClass: "viewIconClass", downloadIconClass: "downloadIconClass", emptyStateContainerClass: "emptyStateContainerClass", emptyStateTextClass: "emptyStateTextClass", itemRowClass: "itemRowClass", itemColumnsWrapperClass: "itemColumnsWrapperClass", itemColumnClass: "itemColumnClass", actionsColumnClass: "actionsColumnClass" }, outputs: { isLoadingChanged: "isLoadingChanged", attachmentViewed: "attachmentViewed", attachmentDownloaded: "attachmentDownloaded", errorOccurred: "errorOccurred" }, ngImport: i0, template: "<sky-section-divider [fontAwesomeIcon]=\"degreesIcon\"\r\n                     [text]=\"(sectionTitle | HRTranslate | uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n<div [class]=\"wrapperClass\">\r\n\r\n  @if(degrees.length > 0){\r\n\r\n  <div class=\"row\">\r\n    <div [class]=\"headerRowClass\">\r\n      <div [class]=\"itemColumnClass\">\r\n        <p [class]=\"labelClass\">{{'Degree/Year' | HRTranslate}}</p>\r\n      </div>\r\n\r\n      <div [class]=\"itemColumnClass\">\r\n        <p [class]=\"labelClass\">{{'Country' | HRTranslate}}</p>\r\n      </div>\r\n\r\n      <div [class]=\"itemColumnClass\">\r\n        <p [class]=\"labelClass\">{{'Specialty' | HRTranslate}}</p>\r\n      </div>\r\n\r\n      <div [class]=\"itemColumnClass\">\r\n        <p [class]=\"labelClass\">{{'Institute' | HRTranslate}}</p>\r\n      </div>\r\n    </div>\r\n\r\n    <div [class]=\"actionsSpacerClass\"></div>\r\n\r\n    @for (qualification of degrees; track qualification){\r\n    <div [class]=\"itemColumnsWrapperClass\">\r\n      <div [class]=\"itemColumnClass\">\r\n        <p [class]=\"valueClass\" [title]=\"qualification.DegreeName + ' / ' + qualification.DegreeYear\">{{qualification.DegreeName + ' / ' + qualification.DegreeYear}}</p>\r\n      </div>\r\n\r\n      <div [class]=\"itemColumnClass\">\r\n        <p [class]=\"valueClass\" [title]=\"qualification.CountryName ? qualification.CountryName : ''\">{{qualification.CountryName}}</p>\r\n      </div>\r\n\r\n      <div [class]=\"itemColumnClass\">\r\n        <p [class]=\"valueClass\" [title]=\"qualification.Specialty ? qualification.Specialty : ''\">\r\n          @if(qualification.Specialty){\r\n          {{qualification.Specialty}}\r\n          }@else{\r\n          {{'\u2014'}}\r\n          }\r\n        </p>\r\n      </div>\r\n\r\n      <div [class]=\"itemColumnClass\">\r\n        <p [class]=\"valueClass\" [title]=\"qualification.Institute ? qualification.Institute : ''\">\r\n          @if(qualification.Institute){\r\n          {{qualification.Institute}}\r\n          }@else{\r\n          {{'\u2014'}}\r\n          }\r\n        </p>\r\n      </div>\r\n    </div>\r\n\r\n      @if(qualification.Document){\r\n      <div [class]=\"actionsColumnClass\">\r\n        <fa-icon [icon]=\"viewIcon\" [class]=\"viewIconClass\" (click)=\"onAttachmentView(qualification.Document)\"></fa-icon>\r\n        <fa-icon [icon]=\"downloadIcon\" [class]=\"downloadIconClass\" (click)=\"onAttachmentDownload(qualification.Document)\"></fa-icon>\r\n      </div>\r\n      }\r\n    }\r\n  </div>\r\n  }@else{\r\n\r\n  <sky-empty-design-card [containerClass]=\"emptyStateContainerClass\"\r\n                         [cardBodyClass]=\"''\"\r\n                         [cardBodyContainerClass]=\"''\"\r\n                         [visibleIcon]=\"false\"\r\n                         [visibleQuickAction]=\"false\"\r\n                         [emptyTextClass]=\"emptyStateTextClass\"\r\n                         [emptyText]=\"isLoading ? ((sectionTitle | HRTranslate) + ' ' + ('IsLoading' | HRTranslate)) : ('ThereIsNoDegreesYet' | HRTranslate)\">\r\n</sky-empty-design-card>\r\n\r\n  }\r\n\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i2$2.UpperCasePipe, name: "uppercase" }, { kind: "component", type: SkySectionDividerComponent, selector: "sky-section-divider", inputs: ["text", "fontAwesomeIcon", "textClass", "dividerClass", "iconClass"] }, { kind: "pipe", type: HRTranslatePipe, name: "HRTranslate" }, { kind: "component", type: SkyEmptyDesignCardComponent, selector: "sky-empty-design-card", inputs: ["emptyIcon", "emptyIconClass", "emptyText", "emptyTextClass", "actionTitle", "actionIcon", "actionDisabled", "textColor", "disabledTitleClass", "activeTitleClass", "disabledIconClass", "activeIconClass", "actionClass", "containerClass", "cardBodyClass", "cardBodyContainerClass", "visibleIcon", "visibleQuickAction"], outputs: ["onActionClick"] }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MyProfileDegreesWidgetComponent, deps: [{ token: HRSelfWidgetsService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: MyProfileDegreesWidgetComponent, isStandalone: true, selector: "hr-my-profile-degrees-widget", inputs: { baseUrl: "baseUrl", sectionTitle: "sectionTitle", degreesIcon: "degreesIcon", viewIcon: "viewIcon", downloadIcon: "downloadIcon", headerIconClass: "headerIconClass", headerTextClass: "headerTextClass", headerDividerClass: "headerDividerClass", rowClass: "rowClass", rowMarginBottomClass: "rowMarginBottomClass", rowMarginBottomEmptyClass: "rowMarginBottomEmptyClass", headerRowClass: "headerRowClass", actionsSpacerClass: "actionsSpacerClass", labelClass: "labelClass", valueClass: "valueClass", viewIconClass: "viewIconClass", downloadIconClass: "downloadIconClass", emptyStateContainerClass: "emptyStateContainerClass", emptyStateTextClass: "emptyStateTextClass", itemRowClass: "itemRowClass", itemColumnsWrapperClass: "itemColumnsWrapperClass", itemColumnClass: "itemColumnClass", actionsColumnClass: "actionsColumnClass" }, outputs: { isLoadingChanged: "isLoadingChanged", attachmentViewed: "attachmentViewed", attachmentDownloaded: "attachmentDownloaded", errorOccurred: "errorOccurred" }, ngImport: i0, template: "<sky-section-divider [fontAwesomeIcon]=\"degreesIcon\"\r\n                     [text]=\"(sectionTitle | translate | uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n<div [class]=\"wrapperClass\">\r\n\r\n  @if(degrees.length > 0){\r\n\r\n  <div class=\"row\">\r\n    <div [class]=\"headerRowClass\">\r\n      <div [class]=\"itemColumnClass\">\r\n        <p [class]=\"labelClass\">{{'Degree/Year' | translate}}</p>\r\n      </div>\r\n\r\n      <div [class]=\"itemColumnClass\">\r\n        <p [class]=\"labelClass\">{{'Country' | translate}}</p>\r\n      </div>\r\n\r\n      <div [class]=\"itemColumnClass\">\r\n        <p [class]=\"labelClass\">{{'Specialty' | translate}}</p>\r\n      </div>\r\n\r\n      <div [class]=\"itemColumnClass\">\r\n        <p [class]=\"labelClass\">{{'Institute' | translate}}</p>\r\n      </div>\r\n    </div>\r\n\r\n    <div [class]=\"actionsSpacerClass\"></div>\r\n\r\n    @for (qualification of degrees; track qualification){\r\n    <div [class]=\"itemColumnsWrapperClass\">\r\n      <div [class]=\"itemColumnClass\">\r\n        <p [class]=\"valueClass\" [title]=\"qualification.DegreeName + ' / ' + qualification.DegreeYear\">{{qualification.DegreeName + ' / ' + qualification.DegreeYear}}</p>\r\n      </div>\r\n\r\n      <div [class]=\"itemColumnClass\">\r\n        <p [class]=\"valueClass\" [title]=\"qualification.CountryName ? qualification.CountryName : ''\">{{qualification.CountryName}}</p>\r\n      </div>\r\n\r\n      <div [class]=\"itemColumnClass\">\r\n        <p [class]=\"valueClass\" [title]=\"qualification.Specialty ? qualification.Specialty : ''\">\r\n          @if(qualification.Specialty){\r\n          {{qualification.Specialty}}\r\n          }@else{\r\n          {{'\u2014'}}\r\n          }\r\n        </p>\r\n      </div>\r\n\r\n      <div [class]=\"itemColumnClass\">\r\n        <p [class]=\"valueClass\" [title]=\"qualification.Institute ? qualification.Institute : ''\">\r\n          @if(qualification.Institute){\r\n          {{qualification.Institute}}\r\n          }@else{\r\n          {{'\u2014'}}\r\n          }\r\n        </p>\r\n      </div>\r\n    </div>\r\n\r\n      @if(qualification.Document){\r\n      <div [class]=\"actionsColumnClass\">\r\n        <fa-icon [icon]=\"viewIcon\" [class]=\"viewIconClass\" (click)=\"onAttachmentView(qualification.Document)\"></fa-icon>\r\n        <fa-icon [icon]=\"downloadIcon\" [class]=\"downloadIconClass\" (click)=\"onAttachmentDownload(qualification.Document)\"></fa-icon>\r\n      </div>\r\n      }\r\n    }\r\n  </div>\r\n  }@else{\r\n\r\n  <sky-empty-design-card [containerClass]=\"emptyStateContainerClass\"\r\n                         [cardBodyClass]=\"''\"\r\n                         [cardBodyContainerClass]=\"''\"\r\n                         [visibleIcon]=\"false\"\r\n                         [visibleQuickAction]=\"false\"\r\n                         [emptyTextClass]=\"emptyStateTextClass\"\r\n                         [emptyText]=\"isLoading ? ((sectionTitle | translate) + ' ' + ('IsLoading' | translate)) : ('ThereIsNoDegreesYet' | translate)\">\r\n</sky-empty-design-card>\r\n\r\n  }\r\n\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: SkySectionDividerComponent, selector: "sky-section-divider", inputs: ["text", "fontAwesomeIcon", "textClass", "dividerClass", "iconClass"] }, { kind: "component", type: SkyEmptyDesignCardComponent, selector: "sky-empty-design-card", inputs: ["emptyIcon", "emptyIconClass", "emptyText", "emptyTextClass", "actionTitle", "actionIcon", "actionDisabled", "textColor", "disabledTitleClass", "activeTitleClass", "disabledIconClass", "activeIconClass", "actionClass", "containerClass", "cardBodyClass", "cardBodyContainerClass", "visibleIcon", "visibleQuickAction"], outputs: ["onActionClick"] }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i2$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }, { kind: "pipe", type: i2$3.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MyProfileDegreesWidgetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MyProfileDegreesWidgetComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'hr-my-profile-degrees-widget', standalone: true, imports: [CommonModule, SkySectionDividerComponent, HRTranslatePipe, SkyEmptyDesignCardComponent, FontAwesomeModule], template: "<sky-section-divider [fontAwesomeIcon]=\"degreesIcon\"\r\n                     [text]=\"(sectionTitle | HRTranslate | uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n<div [class]=\"wrapperClass\">\r\n\r\n  @if(degrees.length > 0){\r\n\r\n  <div class=\"row\">\r\n    <div [class]=\"headerRowClass\">\r\n      <div [class]=\"itemColumnClass\">\r\n        <p [class]=\"labelClass\">{{'Degree/Year' | HRTranslate}}</p>\r\n      </div>\r\n\r\n      <div [class]=\"itemColumnClass\">\r\n        <p [class]=\"labelClass\">{{'Country' | HRTranslate}}</p>\r\n      </div>\r\n\r\n      <div [class]=\"itemColumnClass\">\r\n        <p [class]=\"labelClass\">{{'Specialty' | HRTranslate}}</p>\r\n      </div>\r\n\r\n      <div [class]=\"itemColumnClass\">\r\n        <p [class]=\"labelClass\">{{'Institute' | HRTranslate}}</p>\r\n      </div>\r\n    </div>\r\n\r\n    <div [class]=\"actionsSpacerClass\"></div>\r\n\r\n    @for (qualification of degrees; track qualification){\r\n    <div [class]=\"itemColumnsWrapperClass\">\r\n      <div [class]=\"itemColumnClass\">\r\n        <p [class]=\"valueClass\" [title]=\"qualification.DegreeName + ' / ' + qualification.DegreeYear\">{{qualification.DegreeName + ' / ' + qualification.DegreeYear}}</p>\r\n      </div>\r\n\r\n      <div [class]=\"itemColumnClass\">\r\n        <p [class]=\"valueClass\" [title]=\"qualification.CountryName ? qualification.CountryName : ''\">{{qualification.CountryName}}</p>\r\n      </div>\r\n\r\n      <div [class]=\"itemColumnClass\">\r\n        <p [class]=\"valueClass\" [title]=\"qualification.Specialty ? qualification.Specialty : ''\">\r\n          @if(qualification.Specialty){\r\n          {{qualification.Specialty}}\r\n          }@else{\r\n          {{'\u2014'}}\r\n          }\r\n        </p>\r\n      </div>\r\n\r\n      <div [class]=\"itemColumnClass\">\r\n        <p [class]=\"valueClass\" [title]=\"qualification.Institute ? qualification.Institute : ''\">\r\n          @if(qualification.Institute){\r\n          {{qualification.Institute}}\r\n          }@else{\r\n          {{'\u2014'}}\r\n          }\r\n        </p>\r\n      </div>\r\n    </div>\r\n\r\n      @if(qualification.Document){\r\n      <div [class]=\"actionsColumnClass\">\r\n        <fa-icon [icon]=\"viewIcon\" [class]=\"viewIconClass\" (click)=\"onAttachmentView(qualification.Document)\"></fa-icon>\r\n        <fa-icon [icon]=\"downloadIcon\" [class]=\"downloadIconClass\" (click)=\"onAttachmentDownload(qualification.Document)\"></fa-icon>\r\n      </div>\r\n      }\r\n    }\r\n  </div>\r\n  }@else{\r\n\r\n  <sky-empty-design-card [containerClass]=\"emptyStateContainerClass\"\r\n                         [cardBodyClass]=\"''\"\r\n                         [cardBodyContainerClass]=\"''\"\r\n                         [visibleIcon]=\"false\"\r\n                         [visibleQuickAction]=\"false\"\r\n                         [emptyTextClass]=\"emptyStateTextClass\"\r\n                         [emptyText]=\"isLoading ? ((sectionTitle | HRTranslate) + ' ' + ('IsLoading' | HRTranslate)) : ('ThereIsNoDegreesYet' | HRTranslate)\">\r\n</sky-empty-design-card>\r\n\r\n  }\r\n\r\n</div>\r\n" }]
+            args: [{ selector: 'hr-my-profile-degrees-widget', standalone: true, imports: [CommonModule, SkySectionDividerComponent, TranslatePipe, SkyEmptyDesignCardComponent, FontAwesomeModule], template: "<sky-section-divider [fontAwesomeIcon]=\"degreesIcon\"\r\n                     [text]=\"(sectionTitle | translate | uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n<div [class]=\"wrapperClass\">\r\n\r\n  @if(degrees.length > 0){\r\n\r\n  <div class=\"row\">\r\n    <div [class]=\"headerRowClass\">\r\n      <div [class]=\"itemColumnClass\">\r\n        <p [class]=\"labelClass\">{{'Degree/Year' | translate}}</p>\r\n      </div>\r\n\r\n      <div [class]=\"itemColumnClass\">\r\n        <p [class]=\"labelClass\">{{'Country' | translate}}</p>\r\n      </div>\r\n\r\n      <div [class]=\"itemColumnClass\">\r\n        <p [class]=\"labelClass\">{{'Specialty' | translate}}</p>\r\n      </div>\r\n\r\n      <div [class]=\"itemColumnClass\">\r\n        <p [class]=\"labelClass\">{{'Institute' | translate}}</p>\r\n      </div>\r\n    </div>\r\n\r\n    <div [class]=\"actionsSpacerClass\"></div>\r\n\r\n    @for (qualification of degrees; track qualification){\r\n    <div [class]=\"itemColumnsWrapperClass\">\r\n      <div [class]=\"itemColumnClass\">\r\n        <p [class]=\"valueClass\" [title]=\"qualification.DegreeName + ' / ' + qualification.DegreeYear\">{{qualification.DegreeName + ' / ' + qualification.DegreeYear}}</p>\r\n      </div>\r\n\r\n      <div [class]=\"itemColumnClass\">\r\n        <p [class]=\"valueClass\" [title]=\"qualification.CountryName ? qualification.CountryName : ''\">{{qualification.CountryName}}</p>\r\n      </div>\r\n\r\n      <div [class]=\"itemColumnClass\">\r\n        <p [class]=\"valueClass\" [title]=\"qualification.Specialty ? qualification.Specialty : ''\">\r\n          @if(qualification.Specialty){\r\n          {{qualification.Specialty}}\r\n          }@else{\r\n          {{'\u2014'}}\r\n          }\r\n        </p>\r\n      </div>\r\n\r\n      <div [class]=\"itemColumnClass\">\r\n        <p [class]=\"valueClass\" [title]=\"qualification.Institute ? qualification.Institute : ''\">\r\n          @if(qualification.Institute){\r\n          {{qualification.Institute}}\r\n          }@else{\r\n          {{'\u2014'}}\r\n          }\r\n        </p>\r\n      </div>\r\n    </div>\r\n\r\n      @if(qualification.Document){\r\n      <div [class]=\"actionsColumnClass\">\r\n        <fa-icon [icon]=\"viewIcon\" [class]=\"viewIconClass\" (click)=\"onAttachmentView(qualification.Document)\"></fa-icon>\r\n        <fa-icon [icon]=\"downloadIcon\" [class]=\"downloadIconClass\" (click)=\"onAttachmentDownload(qualification.Document)\"></fa-icon>\r\n      </div>\r\n      }\r\n    }\r\n  </div>\r\n  }@else{\r\n\r\n  <sky-empty-design-card [containerClass]=\"emptyStateContainerClass\"\r\n                         [cardBodyClass]=\"''\"\r\n                         [cardBodyContainerClass]=\"''\"\r\n                         [visibleIcon]=\"false\"\r\n                         [visibleQuickAction]=\"false\"\r\n                         [emptyTextClass]=\"emptyStateTextClass\"\r\n                         [emptyText]=\"isLoading ? ((sectionTitle | translate) + ' ' + ('IsLoading' | translate)) : ('ThereIsNoDegreesYet' | translate)\">\r\n</sky-empty-design-card>\r\n\r\n  }\r\n\r\n</div>\r\n" }]
         }], ctorParameters: () => [{ type: HRSelfWidgetsService }], propDecorators: { baseUrl: [{
                 type: Input
             }], sectionTitle: [{
@@ -4390,10 +3350,10 @@ class WidgetCardComponent {
     height = 110;
     contentTemplate;
     context;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: WidgetCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.21", type: WidgetCardComponent, isStandalone: true, selector: "hr-widget-card", inputs: { cardClass: "cardClass", height: "height", contentTemplate: "contentTemplate", context: "context" }, ngImport: i0, template: "<div [class]=\"cardClass\" [style.height.px]=\"height\" style=\"overflow: hidden;\">\n  <ng-container *ngTemplateOutlet=\"contentTemplate; context: context\">\n  </ng-container>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: WidgetCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.13", type: WidgetCardComponent, isStandalone: true, selector: "hr-widget-card", inputs: { cardClass: "cardClass", height: "height", contentTemplate: "contentTemplate", context: "context" }, ngImport: i0, template: "<div [class]=\"cardClass\" [style.height.px]=\"height\" style=\"overflow: hidden;\">\n  <ng-container *ngTemplateOutlet=\"contentTemplate; context: context\">\n  </ng-container>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: WidgetCardComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: WidgetCardComponent, decorators: [{
             type: Component,
             args: [{ selector: 'hr-widget-card', standalone: true, imports: [CommonModule], template: "<div [class]=\"cardClass\" [style.height.px]=\"height\" style=\"overflow: hidden;\">\n  <ng-container *ngTemplateOutlet=\"contentTemplate; context: context\">\n  </ng-container>\n</div>\n" }]
         }], propDecorators: { cardClass: [{
@@ -4441,12 +3401,12 @@ class MyDependentsWidgetComponent {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MyDependentsWidgetComponent, deps: [{ token: HRSelfWidgetsService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: MyDependentsWidgetComponent, isStandalone: true, selector: "hr-my-profile-dependents-widget", inputs: { baseUrl: "baseUrl", sectionTitle: "sectionTitle", icon: "icon", headerIconClass: "headerIconClass", headerTextClass: "headerTextClass", headerDividerClass: "headerDividerClass", emptyStateContainerClass: "emptyStateContainerClass", emptyStateTextClass: "emptyStateTextClass" }, outputs: { isLoadingChanged: "isLoadingChanged" }, ngImport: i0, template: "<sky-section-divider [fontAwesomeIcon]=\"icon\"\r\n                     [text]=\"(sectionTitle | HRTranslate | uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n<div class=\"mt-4\">\r\n  <div class=\"row mb-5\">\r\n    @if(dependents.length){\r\n    @for(d of dependents; track d){\r\n    <div class=\"col-lg-4 col-6 mt-4\">\r\n\r\n      <hr-widget-card [contentTemplate]=\"dependentTemplate\"\r\n                       [context]=\"{ d: d }\"\r\n                       [height]=\"110\">\r\n      </hr-widget-card>\r\n\r\n    </div> \r\n    }\r\n    }\r\n    @else {\r\n\r\n    <sky-empty-design-card [containerClass]=\"emptyStateContainerClass\"\r\n                           [cardBodyClass]=\"''\"\r\n                           [cardBodyContainerClass]=\"''\"\r\n                           [visibleIcon]=\"false\"\r\n                           [visibleQuickAction]=\"false\"\r\n                           [emptyTextClass]=\"emptyStateTextClass\"\r\n                           [emptyText]=\"isLoading ? ((sectionTitle | HRTranslate) + ' ' + ('IsLoading' | HRTranslate)) : ('ThereAreNoDependentsYet' | HRTranslate)\">\r\n    </sky-empty-design-card>\r\n\r\n\r\n    }\r\n  </div>\r\n</div>\r\n\r\n<ng-template #dependentTemplate let-d=\"d\"> \r\n  <p class=\"text-dark fs-16 mb-2 d-flex\">\r\n    <span class=\"text-truncate cursor-pointer\" [title]=\"d.DependentName\">\r\n      {{ d.DependentName }}\r\n    </span>\r\n    <span class=\"mx-1\">({{ d.DependentTypeName }})</span>\r\n  </p>\r\n  <p class=\"mb-2 fs-12\">\r\n    <span class=\"text-muted\">{{'BirthDate'|HRTranslate}}: </span>\r\n    <span class=\"text-secondary mx-1\">{{ d.BirthDate | date:'dd/MM/yyyy' }}</span>\r\n  </p>\r\n  <p class=\"mb-0 fs-12\">\r\n    <span class=\"text-muted\">{{'NationalNumber'|HRTranslate }}: </span>\r\n    @if(d.NationalNumber){\r\n    <span class=\"text-secondary mx-1\">{{ d.NationalNumber }}</span>\r\n    } @else {\r\n    <span class=\"text-secondary mx-1\">\u2014</span>\r\n    }\r\n  </p>\r\n</ng-template>\r\n\r\n\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i2$2.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i2$2.DatePipe, name: "date" }, { kind: "component", type: WidgetCardComponent, selector: "hr-widget-card", inputs: ["cardClass", "height", "contentTemplate", "context"] }, { kind: "pipe", type: HRTranslatePipe, name: "HRTranslate" }, { kind: "component", type: SkyEmptyDesignCardComponent, selector: "sky-empty-design-card", inputs: ["emptyIcon", "emptyIconClass", "emptyText", "emptyTextClass", "actionTitle", "actionIcon", "actionDisabled", "textColor", "disabledTitleClass", "activeTitleClass", "disabledIconClass", "activeIconClass", "actionClass", "containerClass", "cardBodyClass", "cardBodyContainerClass", "visibleIcon", "visibleQuickAction"], outputs: ["onActionClick"] }, { kind: "component", type: SkySectionDividerComponent, selector: "sky-section-divider", inputs: ["text", "fontAwesomeIcon", "textClass", "dividerClass", "iconClass"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MyDependentsWidgetComponent, deps: [{ token: HRSelfWidgetsService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: MyDependentsWidgetComponent, isStandalone: true, selector: "hr-my-profile-dependents-widget", inputs: { baseUrl: "baseUrl", sectionTitle: "sectionTitle", icon: "icon", headerIconClass: "headerIconClass", headerTextClass: "headerTextClass", headerDividerClass: "headerDividerClass", emptyStateContainerClass: "emptyStateContainerClass", emptyStateTextClass: "emptyStateTextClass" }, outputs: { isLoadingChanged: "isLoadingChanged" }, ngImport: i0, template: "<sky-section-divider [fontAwesomeIcon]=\"icon\"\r\n                     [text]=\"(sectionTitle | translate | uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n<div class=\"mt-4\">\r\n  <div class=\"row mb-5\">\r\n    @if(dependents.length){\r\n    @for(d of dependents; track d){\r\n    <div class=\"col-lg-4 col-6 mt-4\">\r\n\r\n      <hr-widget-card [contentTemplate]=\"dependentTemplate\"\r\n                       [context]=\"{ d: d }\"\r\n                       [height]=\"110\">\r\n      </hr-widget-card>\r\n\r\n    </div>\r\n    }\r\n    }\r\n    @else {\r\n\r\n    <sky-empty-design-card [containerClass]=\"emptyStateContainerClass\"\r\n                           [cardBodyClass]=\"''\"\r\n                           [cardBodyContainerClass]=\"''\"\r\n                           [visibleIcon]=\"false\"\r\n                           [visibleQuickAction]=\"false\"\r\n                           [emptyTextClass]=\"emptyStateTextClass\"\r\n                           [emptyText]=\"isLoading ? ((sectionTitle | translate) + ' ' + ('IsLoading' | translate)) : ('ThereAreNoDependentsYet' | translate)\">\r\n    </sky-empty-design-card>\r\n\r\n\r\n    }\r\n  </div>\r\n</div>\r\n\r\n<ng-template #dependentTemplate let-d=\"d\">\r\n  <p class=\"text-dark fs-16 mb-2 d-flex\">\r\n    <span class=\"text-truncate cursor-pointer\" [title]=\"d.DependentName\">\r\n      {{ d.DependentName }}\r\n    </span>\r\n    <span class=\"mx-1\">({{ d.DependentTypeName }})</span>\r\n  </p>\r\n  <p class=\"mb-2 fs-12\">\r\n    <span class=\"text-muted\">{{'BirthDate'| translate}}: </span>\r\n    <span class=\"text-secondary mx-1\">{{ d.BirthDate | date:'dd/MM/yyyy' }}</span>\r\n  </p>\r\n  <p class=\"mb-0 fs-12\">\r\n    <span class=\"text-muted\">{{'NationalNumber'| translate }}: </span>\r\n    @if(d.NationalNumber){\r\n    <span class=\"text-secondary mx-1\">{{ d.NationalNumber }}</span>\r\n    } @else {\r\n    <span class=\"text-secondary mx-1\">\u2014</span>\r\n    }\r\n  </p>\r\n</ng-template>\r\n\r\n\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: WidgetCardComponent, selector: "hr-widget-card", inputs: ["cardClass", "height", "contentTemplate", "context"] }, { kind: "component", type: SkyEmptyDesignCardComponent, selector: "sky-empty-design-card", inputs: ["emptyIcon", "emptyIconClass", "emptyText", "emptyTextClass", "actionTitle", "actionIcon", "actionDisabled", "textColor", "disabledTitleClass", "activeTitleClass", "disabledIconClass", "activeIconClass", "actionClass", "containerClass", "cardBodyClass", "cardBodyContainerClass", "visibleIcon", "visibleQuickAction"], outputs: ["onActionClick"] }, { kind: "component", type: SkySectionDividerComponent, selector: "sky-section-divider", inputs: ["text", "fontAwesomeIcon", "textClass", "dividerClass", "iconClass"] }, { kind: "pipe", type: i2$3.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i2$3.DatePipe, name: "date" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MyDependentsWidgetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MyDependentsWidgetComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'hr-my-profile-dependents-widget', standalone: true, imports: [CommonModule, WidgetCardComponent, HRTranslatePipe, SkyEmptyDesignCardComponent, SkySectionDividerComponent], template: "<sky-section-divider [fontAwesomeIcon]=\"icon\"\r\n                     [text]=\"(sectionTitle | HRTranslate | uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n<div class=\"mt-4\">\r\n  <div class=\"row mb-5\">\r\n    @if(dependents.length){\r\n    @for(d of dependents; track d){\r\n    <div class=\"col-lg-4 col-6 mt-4\">\r\n\r\n      <hr-widget-card [contentTemplate]=\"dependentTemplate\"\r\n                       [context]=\"{ d: d }\"\r\n                       [height]=\"110\">\r\n      </hr-widget-card>\r\n\r\n    </div> \r\n    }\r\n    }\r\n    @else {\r\n\r\n    <sky-empty-design-card [containerClass]=\"emptyStateContainerClass\"\r\n                           [cardBodyClass]=\"''\"\r\n                           [cardBodyContainerClass]=\"''\"\r\n                           [visibleIcon]=\"false\"\r\n                           [visibleQuickAction]=\"false\"\r\n                           [emptyTextClass]=\"emptyStateTextClass\"\r\n                           [emptyText]=\"isLoading ? ((sectionTitle | HRTranslate) + ' ' + ('IsLoading' | HRTranslate)) : ('ThereAreNoDependentsYet' | HRTranslate)\">\r\n    </sky-empty-design-card>\r\n\r\n\r\n    }\r\n  </div>\r\n</div>\r\n\r\n<ng-template #dependentTemplate let-d=\"d\"> \r\n  <p class=\"text-dark fs-16 mb-2 d-flex\">\r\n    <span class=\"text-truncate cursor-pointer\" [title]=\"d.DependentName\">\r\n      {{ d.DependentName }}\r\n    </span>\r\n    <span class=\"mx-1\">({{ d.DependentTypeName }})</span>\r\n  </p>\r\n  <p class=\"mb-2 fs-12\">\r\n    <span class=\"text-muted\">{{'BirthDate'|HRTranslate}}: </span>\r\n    <span class=\"text-secondary mx-1\">{{ d.BirthDate | date:'dd/MM/yyyy' }}</span>\r\n  </p>\r\n  <p class=\"mb-0 fs-12\">\r\n    <span class=\"text-muted\">{{'NationalNumber'|HRTranslate }}: </span>\r\n    @if(d.NationalNumber){\r\n    <span class=\"text-secondary mx-1\">{{ d.NationalNumber }}</span>\r\n    } @else {\r\n    <span class=\"text-secondary mx-1\">\u2014</span>\r\n    }\r\n  </p>\r\n</ng-template>\r\n\r\n\r\n" }]
+            args: [{ selector: 'hr-my-profile-dependents-widget', standalone: true, imports: [CommonModule, WidgetCardComponent, TranslatePipe, SkyEmptyDesignCardComponent, SkySectionDividerComponent], template: "<sky-section-divider [fontAwesomeIcon]=\"icon\"\r\n                     [text]=\"(sectionTitle | translate | uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n<div class=\"mt-4\">\r\n  <div class=\"row mb-5\">\r\n    @if(dependents.length){\r\n    @for(d of dependents; track d){\r\n    <div class=\"col-lg-4 col-6 mt-4\">\r\n\r\n      <hr-widget-card [contentTemplate]=\"dependentTemplate\"\r\n                       [context]=\"{ d: d }\"\r\n                       [height]=\"110\">\r\n      </hr-widget-card>\r\n\r\n    </div>\r\n    }\r\n    }\r\n    @else {\r\n\r\n    <sky-empty-design-card [containerClass]=\"emptyStateContainerClass\"\r\n                           [cardBodyClass]=\"''\"\r\n                           [cardBodyContainerClass]=\"''\"\r\n                           [visibleIcon]=\"false\"\r\n                           [visibleQuickAction]=\"false\"\r\n                           [emptyTextClass]=\"emptyStateTextClass\"\r\n                           [emptyText]=\"isLoading ? ((sectionTitle | translate) + ' ' + ('IsLoading' | translate)) : ('ThereAreNoDependentsYet' | translate)\">\r\n    </sky-empty-design-card>\r\n\r\n\r\n    }\r\n  </div>\r\n</div>\r\n\r\n<ng-template #dependentTemplate let-d=\"d\">\r\n  <p class=\"text-dark fs-16 mb-2 d-flex\">\r\n    <span class=\"text-truncate cursor-pointer\" [title]=\"d.DependentName\">\r\n      {{ d.DependentName }}\r\n    </span>\r\n    <span class=\"mx-1\">({{ d.DependentTypeName }})</span>\r\n  </p>\r\n  <p class=\"mb-2 fs-12\">\r\n    <span class=\"text-muted\">{{'BirthDate'| translate}}: </span>\r\n    <span class=\"text-secondary mx-1\">{{ d.BirthDate | date:'dd/MM/yyyy' }}</span>\r\n  </p>\r\n  <p class=\"mb-0 fs-12\">\r\n    <span class=\"text-muted\">{{'NationalNumber'| translate }}: </span>\r\n    @if(d.NationalNumber){\r\n    <span class=\"text-secondary mx-1\">{{ d.NationalNumber }}</span>\r\n    } @else {\r\n    <span class=\"text-secondary mx-1\">\u2014</span>\r\n    }\r\n  </p>\r\n</ng-template>\r\n\r\n\r\n" }]
         }], ctorParameters: () => [{ type: HRSelfWidgetsService }], propDecorators: { baseUrl: [{
                 type: Input
             }], sectionTitle: [{
@@ -4512,12 +3472,12 @@ class MyProfileVacationsWidgetComponent {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MyProfileVacationsWidgetComponent, deps: [{ token: HRSelfWidgetsService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: MyProfileVacationsWidgetComponent, isStandalone: true, selector: "hr-my-profile-vacations-widget", inputs: { baseUrl: "baseUrl", sectionTitle: "sectionTitle", vacationsIcon: "vacationsIcon", headerIconClass: "headerIconClass", headerTextClass: "headerTextClass", headerDividerClass: "headerDividerClass", rowClass: "rowClass", labelClass: "labelClass", valueClass: "valueClass", labelColumnClass: "labelColumnClass", valueColumnClass: "valueColumnClass", emptyStateContainerClass: "emptyStateContainerClass", emptyStateTextClass: "emptyStateTextClass" }, outputs: { isLoadingChanged: "isLoadingChanged", errorOccurred: "errorOccurred" }, ngImport: i0, template: "<sky-section-divider [fontAwesomeIcon]=\"vacationsIcon\"\r\n                     [text]=\"(sectionTitle | HRTranslate | uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n@if(vacationEntitlements.length > 0){\r\n<div [class]=\"rowClass\">\r\n  <div [class]=\"labelClass\" [ngClass]=\"labelColumnClass\">{{'Type' | HRTranslate}}</div>\r\n  <div [class]=\"labelClass\" [ngClass]=\"valueColumnClass\">{{'Entitlement' | HRTranslate}}</div>\r\n  @for (vacationEntitlement of vacationEntitlements; track vacationEntitlement;){\r\n  <div [class]=\"valueClass\" [ngClass]=\"labelColumnClass\">\r\n    {{vacationEntitlement.VacationTypeName}}\r\n  </div>\r\n  <div [class]=\"valueClass\" [ngClass]=\"valueColumnClass\">\r\n    {{vacationEntitlement.EntitlementDays}}\r\n  </div>\r\n  }\r\n</div>\r\n}@else{\r\n<sky-empty-design-card [containerClass]=\"emptyStateContainerClass\"\r\n                       [cardBodyClass]=\"''\"\r\n                       [cardBodyContainerClass]=\"''\"\r\n                       [visibleIcon]=\"false\"\r\n                       [visibleQuickAction]=\"false\"\r\n                       [emptyTextClass]=\"emptyStateTextClass\"\r\n                       [emptyText]=\"isLoading ? ((sectionTitle | HRTranslate) + ' ' + ('IsLoading' | HRTranslate)) : ('There\\'sNoInformationInThisSectionYet' | HRTranslate)\">\r\n</sky-empty-design-card>\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i2$2.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: HRTranslatePipe, name: "HRTranslate" }, { kind: "component", type: SkySectionDividerComponent, selector: "sky-section-divider", inputs: ["text", "fontAwesomeIcon", "textClass", "dividerClass", "iconClass"] }, { kind: "component", type: SkyEmptyDesignCardComponent, selector: "sky-empty-design-card", inputs: ["emptyIcon", "emptyIconClass", "emptyText", "emptyTextClass", "actionTitle", "actionIcon", "actionDisabled", "textColor", "disabledTitleClass", "activeTitleClass", "disabledIconClass", "activeIconClass", "actionClass", "containerClass", "cardBodyClass", "cardBodyContainerClass", "visibleIcon", "visibleQuickAction"], outputs: ["onActionClick"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MyProfileVacationsWidgetComponent, deps: [{ token: HRSelfWidgetsService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: MyProfileVacationsWidgetComponent, isStandalone: true, selector: "hr-my-profile-vacations-widget", inputs: { baseUrl: "baseUrl", sectionTitle: "sectionTitle", vacationsIcon: "vacationsIcon", headerIconClass: "headerIconClass", headerTextClass: "headerTextClass", headerDividerClass: "headerDividerClass", rowClass: "rowClass", labelClass: "labelClass", valueClass: "valueClass", labelColumnClass: "labelColumnClass", valueColumnClass: "valueColumnClass", emptyStateContainerClass: "emptyStateContainerClass", emptyStateTextClass: "emptyStateTextClass" }, outputs: { isLoadingChanged: "isLoadingChanged", errorOccurred: "errorOccurred" }, ngImport: i0, template: "<sky-section-divider [fontAwesomeIcon]=\"vacationsIcon\"\r\n                     [text]=\"(sectionTitle | translate | uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n@if(vacationEntitlements.length > 0){\r\n<div [class]=\"rowClass\">\r\n  <div [class]=\"labelClass\" [ngClass]=\"labelColumnClass\">{{'Type' | translate}}</div>\r\n  <div [class]=\"labelClass\" [ngClass]=\"valueColumnClass\">{{'Entitlement' | translate}}</div>\r\n  @for (vacationEntitlement of vacationEntitlements; track vacationEntitlement;){\r\n  <div [class]=\"valueClass\" [ngClass]=\"labelColumnClass\">\r\n    {{vacationEntitlement.VacationTypeName}}\r\n  </div>\r\n  <div [class]=\"valueClass\" [ngClass]=\"valueColumnClass\">\r\n    {{vacationEntitlement.EntitlementDays}}\r\n  </div>\r\n  }\r\n</div>\r\n}@else{\r\n<sky-empty-design-card [containerClass]=\"emptyStateContainerClass\"\r\n                       [cardBodyClass]=\"''\"\r\n                       [cardBodyContainerClass]=\"''\"\r\n                       [visibleIcon]=\"false\"\r\n                       [visibleQuickAction]=\"false\"\r\n                       [emptyTextClass]=\"emptyStateTextClass\"\r\n                       [emptyText]=\"isLoading ? ((sectionTitle | translate) + ' ' + ('IsLoading' | translate)) : ('There\\'sNoInformationInThisSectionYet' | translate)\">\r\n</sky-empty-design-card>\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SkySectionDividerComponent, selector: "sky-section-divider", inputs: ["text", "fontAwesomeIcon", "textClass", "dividerClass", "iconClass"] }, { kind: "component", type: SkyEmptyDesignCardComponent, selector: "sky-empty-design-card", inputs: ["emptyIcon", "emptyIconClass", "emptyText", "emptyTextClass", "actionTitle", "actionIcon", "actionDisabled", "textColor", "disabledTitleClass", "activeTitleClass", "disabledIconClass", "activeIconClass", "actionClass", "containerClass", "cardBodyClass", "cardBodyContainerClass", "visibleIcon", "visibleQuickAction"], outputs: ["onActionClick"] }, { kind: "pipe", type: i2$3.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MyProfileVacationsWidgetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MyProfileVacationsWidgetComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'hr-my-profile-vacations-widget', standalone: true, imports: [CommonModule, HRTranslatePipe, SkySectionDividerComponent, SkyEmptyDesignCardComponent], template: "<sky-section-divider [fontAwesomeIcon]=\"vacationsIcon\"\r\n                     [text]=\"(sectionTitle | HRTranslate | uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n@if(vacationEntitlements.length > 0){\r\n<div [class]=\"rowClass\">\r\n  <div [class]=\"labelClass\" [ngClass]=\"labelColumnClass\">{{'Type' | HRTranslate}}</div>\r\n  <div [class]=\"labelClass\" [ngClass]=\"valueColumnClass\">{{'Entitlement' | HRTranslate}}</div>\r\n  @for (vacationEntitlement of vacationEntitlements; track vacationEntitlement;){\r\n  <div [class]=\"valueClass\" [ngClass]=\"labelColumnClass\">\r\n    {{vacationEntitlement.VacationTypeName}}\r\n  </div>\r\n  <div [class]=\"valueClass\" [ngClass]=\"valueColumnClass\">\r\n    {{vacationEntitlement.EntitlementDays}}\r\n  </div>\r\n  }\r\n</div>\r\n}@else{\r\n<sky-empty-design-card [containerClass]=\"emptyStateContainerClass\"\r\n                       [cardBodyClass]=\"''\"\r\n                       [cardBodyContainerClass]=\"''\"\r\n                       [visibleIcon]=\"false\"\r\n                       [visibleQuickAction]=\"false\"\r\n                       [emptyTextClass]=\"emptyStateTextClass\"\r\n                       [emptyText]=\"isLoading ? ((sectionTitle | HRTranslate) + ' ' + ('IsLoading' | HRTranslate)) : ('There\\'sNoInformationInThisSectionYet' | HRTranslate)\">\r\n</sky-empty-design-card>\r\n}\r\n" }]
+            args: [{ selector: 'hr-my-profile-vacations-widget', standalone: true, imports: [CommonModule, TranslatePipe, SkySectionDividerComponent, SkyEmptyDesignCardComponent], template: "<sky-section-divider [fontAwesomeIcon]=\"vacationsIcon\"\r\n                     [text]=\"(sectionTitle | translate | uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n@if(vacationEntitlements.length > 0){\r\n<div [class]=\"rowClass\">\r\n  <div [class]=\"labelClass\" [ngClass]=\"labelColumnClass\">{{'Type' | translate}}</div>\r\n  <div [class]=\"labelClass\" [ngClass]=\"valueColumnClass\">{{'Entitlement' | translate}}</div>\r\n  @for (vacationEntitlement of vacationEntitlements; track vacationEntitlement;){\r\n  <div [class]=\"valueClass\" [ngClass]=\"labelColumnClass\">\r\n    {{vacationEntitlement.VacationTypeName}}\r\n  </div>\r\n  <div [class]=\"valueClass\" [ngClass]=\"valueColumnClass\">\r\n    {{vacationEntitlement.EntitlementDays}}\r\n  </div>\r\n  }\r\n</div>\r\n}@else{\r\n<sky-empty-design-card [containerClass]=\"emptyStateContainerClass\"\r\n                       [cardBodyClass]=\"''\"\r\n                       [cardBodyContainerClass]=\"''\"\r\n                       [visibleIcon]=\"false\"\r\n                       [visibleQuickAction]=\"false\"\r\n                       [emptyTextClass]=\"emptyStateTextClass\"\r\n                       [emptyText]=\"isLoading ? ((sectionTitle | translate) + ' ' + ('IsLoading' | translate)) : ('There\\'sNoInformationInThisSectionYet' | translate)\">\r\n</sky-empty-design-card>\r\n}\r\n" }]
         }], ctorParameters: () => [{ type: HRSelfWidgetsService }], propDecorators: { baseUrl: [{
                 type: Input,
                 args: [{ required: true }]
@@ -4602,12 +3562,12 @@ class MyProfileIndemnityWidgetComponent {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MyProfileIndemnityWidgetComponent, deps: [{ token: HRSelfWidgetsService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: MyProfileIndemnityWidgetComponent, isStandalone: true, selector: "hr-my-profile-indemnity-widget", inputs: { baseUrl: "baseUrl", currencyCode: "currencyCode", currencyDecimals: "currencyDecimals", sectionTitle: "sectionTitle", indemnityIcon: "indemnityIcon", headerIconClass: "headerIconClass", headerTextClass: "headerTextClass", headerDividerClass: "headerDividerClass", rowClass: "rowClass", columnClass: "columnClass", topSpacingColumnClass: "topSpacingColumnClass", labelClass: "labelClass", valueClass: "valueClass", dateFormat: "dateFormat", emptyStateContainerClass: "emptyStateContainerClass", emptyStateTextClass: "emptyStateTextClass" }, outputs: { isLoadingChanged: "isLoadingChanged", errorOccurred: "errorOccurred", hasDataChanged: "hasDataChanged" }, ngImport: i0, template: "<sky-section-divider [fontAwesomeIcon]=\"indemnityIcon\"\r\n                     [text]=\"(sectionTitle | HRTranslate | uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n@if(indemnityDetails){\r\n<div [class]=\"rowClass\">\r\n  <div [class]=\"columnClass\">\r\n    <hr-info-field labelKey=\"IndemnityEligibility\"\r\n                   [value]=\"(indemnityDetails.IsEligibleForIndemnity ? 'Eligible' : 'NotEligible') | HRTranslate\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [class]=\"columnClass\">\r\n    <hr-info-field labelKey=\"ServiceYears\"\r\n                   [value]=\"'' + (indemnityDetails.IndemnityServiceYears ?? '')\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n\r\n  <div [class]=\"topSpacingColumnClass\">\r\n    <hr-info-field labelKey=\"StartDate\"\r\n                   [value]=\"indemnityDetails.IndemnityStartDate | date: dateFormat\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n</div>\r\n}@else{\r\n<sky-empty-design-card [containerClass]=\"emptyStateContainerClass\"\r\n                       [cardBodyClass]=\"''\"\r\n                       [cardBodyContainerClass]=\"''\"\r\n                       [visibleIcon]=\"false\"\r\n                       [visibleQuickAction]=\"false\"\r\n                       [emptyTextClass]=\"emptyStateTextClass\"\r\n                       [emptyText]=\"isLoading ? ((sectionTitle | HRTranslate) + ' ' + ('IsLoading' | HRTranslate)) : ('There\\'sNoInformationInThisSectionYet' | HRTranslate)\">\r\n</sky-empty-design-card>\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i2$2.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i2$2.DatePipe, name: "date" }, { kind: "pipe", type: HRTranslatePipe, name: "HRTranslate" }, { kind: "component", type: SkySectionDividerComponent, selector: "sky-section-divider", inputs: ["text", "fontAwesomeIcon", "textClass", "dividerClass", "iconClass"] }, { kind: "component", type: SkyEmptyDesignCardComponent, selector: "sky-empty-design-card", inputs: ["emptyIcon", "emptyIconClass", "emptyText", "emptyTextClass", "actionTitle", "actionIcon", "actionDisabled", "textColor", "disabledTitleClass", "activeTitleClass", "disabledIconClass", "activeIconClass", "actionClass", "containerClass", "cardBodyClass", "cardBodyContainerClass", "visibleIcon", "visibleQuickAction"], outputs: ["onActionClick"] }, { kind: "component", type: HRInfoFieldComponent, selector: "hr-info-field", inputs: ["labelKey", "value", "labelClass", "valueClass", "fallbackValue"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MyProfileIndemnityWidgetComponent, deps: [{ token: HRSelfWidgetsService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: MyProfileIndemnityWidgetComponent, isStandalone: true, selector: "hr-my-profile-indemnity-widget", inputs: { baseUrl: "baseUrl", currencyCode: "currencyCode", currencyDecimals: "currencyDecimals", sectionTitle: "sectionTitle", indemnityIcon: "indemnityIcon", headerIconClass: "headerIconClass", headerTextClass: "headerTextClass", headerDividerClass: "headerDividerClass", rowClass: "rowClass", columnClass: "columnClass", topSpacingColumnClass: "topSpacingColumnClass", labelClass: "labelClass", valueClass: "valueClass", dateFormat: "dateFormat", emptyStateContainerClass: "emptyStateContainerClass", emptyStateTextClass: "emptyStateTextClass" }, outputs: { isLoadingChanged: "isLoadingChanged", errorOccurred: "errorOccurred", hasDataChanged: "hasDataChanged" }, ngImport: i0, template: "<sky-section-divider [fontAwesomeIcon]=\"indemnityIcon\"\r\n                     [text]=\"(sectionTitle | translate | uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n@if(indemnityDetails){\r\n<div [class]=\"rowClass\">\r\n  <div [class]=\"columnClass\">\r\n    <hr-info-field labelKey=\"IndemnityEligibility\"\r\n                   [value]=\"(indemnityDetails.IsEligibleForIndemnity ? 'Eligible' : 'NotEligible') | translate\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [class]=\"columnClass\">\r\n    <hr-info-field labelKey=\"ServiceYears\"\r\n                   [value]=\"'' + (indemnityDetails.IndemnityServiceYears ?? '')\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n\r\n  <div [class]=\"topSpacingColumnClass\">\r\n    <hr-info-field labelKey=\"StartDate\"\r\n                   [value]=\"indemnityDetails.IndemnityStartDate | date: dateFormat\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n</div>\r\n}@else{\r\n<sky-empty-design-card [containerClass]=\"emptyStateContainerClass\"\r\n                       [cardBodyClass]=\"''\"\r\n                       [cardBodyContainerClass]=\"''\"\r\n                       [visibleIcon]=\"false\"\r\n                       [visibleQuickAction]=\"false\"\r\n                       [emptyTextClass]=\"emptyStateTextClass\"\r\n                       [emptyText]=\"isLoading ? ((sectionTitle | translate) + ' ' + ('IsLoading' | translate)) : ('There\\'sNoInformationInThisSectionYet' | translate)\">\r\n</sky-empty-design-card>\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: SkySectionDividerComponent, selector: "sky-section-divider", inputs: ["text", "fontAwesomeIcon", "textClass", "dividerClass", "iconClass"] }, { kind: "component", type: SkyEmptyDesignCardComponent, selector: "sky-empty-design-card", inputs: ["emptyIcon", "emptyIconClass", "emptyText", "emptyTextClass", "actionTitle", "actionIcon", "actionDisabled", "textColor", "disabledTitleClass", "activeTitleClass", "disabledIconClass", "activeIconClass", "actionClass", "containerClass", "cardBodyClass", "cardBodyContainerClass", "visibleIcon", "visibleQuickAction"], outputs: ["onActionClick"] }, { kind: "component", type: HRInfoFieldComponent, selector: "hr-info-field", inputs: ["labelKey", "value", "labelClass", "valueClass", "fallbackValue"] }, { kind: "pipe", type: i2$3.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i2$3.DatePipe, name: "date" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MyProfileIndemnityWidgetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MyProfileIndemnityWidgetComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'hr-my-profile-indemnity-widget', standalone: true, imports: [CommonModule, HRTranslatePipe, SkySectionDividerComponent, SkyEmptyDesignCardComponent, HRInfoFieldComponent], template: "<sky-section-divider [fontAwesomeIcon]=\"indemnityIcon\"\r\n                     [text]=\"(sectionTitle | HRTranslate | uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n@if(indemnityDetails){\r\n<div [class]=\"rowClass\">\r\n  <div [class]=\"columnClass\">\r\n    <hr-info-field labelKey=\"IndemnityEligibility\"\r\n                   [value]=\"(indemnityDetails.IsEligibleForIndemnity ? 'Eligible' : 'NotEligible') | HRTranslate\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [class]=\"columnClass\">\r\n    <hr-info-field labelKey=\"ServiceYears\"\r\n                   [value]=\"'' + (indemnityDetails.IndemnityServiceYears ?? '')\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n\r\n  <div [class]=\"topSpacingColumnClass\">\r\n    <hr-info-field labelKey=\"StartDate\"\r\n                   [value]=\"indemnityDetails.IndemnityStartDate | date: dateFormat\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n</div>\r\n}@else{\r\n<sky-empty-design-card [containerClass]=\"emptyStateContainerClass\"\r\n                       [cardBodyClass]=\"''\"\r\n                       [cardBodyContainerClass]=\"''\"\r\n                       [visibleIcon]=\"false\"\r\n                       [visibleQuickAction]=\"false\"\r\n                       [emptyTextClass]=\"emptyStateTextClass\"\r\n                       [emptyText]=\"isLoading ? ((sectionTitle | HRTranslate) + ' ' + ('IsLoading' | HRTranslate)) : ('There\\'sNoInformationInThisSectionYet' | HRTranslate)\">\r\n</sky-empty-design-card>\r\n}\r\n" }]
+            args: [{ selector: 'hr-my-profile-indemnity-widget', standalone: true, imports: [CommonModule, TranslatePipe, SkySectionDividerComponent, SkyEmptyDesignCardComponent, HRInfoFieldComponent], template: "<sky-section-divider [fontAwesomeIcon]=\"indemnityIcon\"\r\n                     [text]=\"(sectionTitle | translate | uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n@if(indemnityDetails){\r\n<div [class]=\"rowClass\">\r\n  <div [class]=\"columnClass\">\r\n    <hr-info-field labelKey=\"IndemnityEligibility\"\r\n                   [value]=\"(indemnityDetails.IsEligibleForIndemnity ? 'Eligible' : 'NotEligible') | translate\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [class]=\"columnClass\">\r\n    <hr-info-field labelKey=\"ServiceYears\"\r\n                   [value]=\"'' + (indemnityDetails.IndemnityServiceYears ?? '')\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n\r\n  <div [class]=\"topSpacingColumnClass\">\r\n    <hr-info-field labelKey=\"StartDate\"\r\n                   [value]=\"indemnityDetails.IndemnityStartDate | date: dateFormat\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n</div>\r\n}@else{\r\n<sky-empty-design-card [containerClass]=\"emptyStateContainerClass\"\r\n                       [cardBodyClass]=\"''\"\r\n                       [cardBodyContainerClass]=\"''\"\r\n                       [visibleIcon]=\"false\"\r\n                       [visibleQuickAction]=\"false\"\r\n                       [emptyTextClass]=\"emptyStateTextClass\"\r\n                       [emptyText]=\"isLoading ? ((sectionTitle | translate) + ' ' + ('IsLoading' | translate)) : ('There\\'sNoInformationInThisSectionYet' | translate)\">\r\n</sky-empty-design-card>\r\n}\r\n" }]
         }], ctorParameters: () => [{ type: HRSelfWidgetsService }], propDecorators: { baseUrl: [{
                 type: Input,
                 args: [{ required: true }]
@@ -4662,12 +3622,12 @@ class HRTicketCardComponent {
     subtitleClass = 'field-secondary-label-sm mb-3';
     labelClass = 'text-secondary';
     valueClass = 'text-dark-gray mx-1';
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: HRTicketCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: HRTicketCardComponent, isStandalone: true, selector: "hr-ticket-card", inputs: { name: "name", typeName: "typeName", entitlementText: "entitlementText", ticketClassName: "ticketClassName", ticketSectorName: "ticketSectorName", isDependent: "isDependent", cardClass: "cardClass", cardHeight: "cardHeight", nameClass: "nameClass", subtitleClass: "subtitleClass", labelClass: "labelClass", valueClass: "valueClass" }, ngImport: i0, template: "<hr-widget-card [cardClass]=\"cardClass\" [height]=\"cardHeight\" [contentTemplate]=\"cardContent\">\r\n</hr-widget-card>\r\n\r\n<ng-template #cardContent>\r\n  <p [class]=\"nameClass\" [ngClass]=\"isDependent ? 'd-flex' : ''\">\r\n    @if(isDependent){\r\n    <span class=\"text-ellipsis-one-line cursor-pointer\" [title]=\"name\">{{name}}</span>\r\n    <span class=\"mx-1\">({{typeName}})</span>\r\n    }@else{\r\n    {{name}} ({{'Me' | HRTranslate}})\r\n    }\r\n  </p>\r\n  <p [class]=\"subtitleClass\">{{entitlementText}}</p>\r\n  @if(!isDependent){\r\n  <p class=\"fs-12 mb-2\"><span [class]=\"labelClass\">{{'Class' | HRTranslate}}:</span> <span [class]=\"valueClass\">{{ticketClassName}}</span></p>\r\n  <p class=\"fs-12\"><span [class]=\"labelClass\">{{'Sector' | HRTranslate}}:</span> <span [class]=\"valueClass\">{{ticketSectorName}}</span></p>\r\n  }\r\n</ng-template>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: HRTranslatePipe, name: "HRTranslate" }, { kind: "component", type: WidgetCardComponent, selector: "hr-widget-card", inputs: ["cardClass", "height", "contentTemplate", "context"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: HRTicketCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: HRTicketCardComponent, isStandalone: true, selector: "hr-ticket-card", inputs: { name: "name", typeName: "typeName", entitlementText: "entitlementText", ticketClassName: "ticketClassName", ticketSectorName: "ticketSectorName", isDependent: "isDependent", cardClass: "cardClass", cardHeight: "cardHeight", nameClass: "nameClass", subtitleClass: "subtitleClass", labelClass: "labelClass", valueClass: "valueClass" }, ngImport: i0, template: "<hr-widget-card [cardClass]=\"cardClass\" [height]=\"cardHeight\" [contentTemplate]=\"cardContent\">\r\n</hr-widget-card>\r\n\r\n<ng-template #cardContent>\r\n  <p [class]=\"nameClass\" [ngClass]=\"isDependent ? 'd-flex' : ''\">\r\n    @if(isDependent){\r\n    <span class=\"text-ellipsis-one-line cursor-pointer\" [title]=\"name\">{{name}}</span>\r\n    <span class=\"mx-1\">({{typeName}})</span>\r\n    }@else{\r\n    {{name}} ({{'Me' | translate}})\r\n    }\r\n  </p>\r\n  <p [class]=\"subtitleClass\">{{entitlementText}}</p>\r\n  @if(!isDependent){\r\n  <p class=\"fs-12 mb-2\"><span [class]=\"labelClass\">{{'Class' | translate}}:</span> <span [class]=\"valueClass\">{{ticketClassName}}</span></p>\r\n  <p class=\"fs-12\"><span [class]=\"labelClass\">{{'Sector' | translate}}:</span> <span [class]=\"valueClass\">{{ticketSectorName}}</span></p>\r\n  }\r\n</ng-template>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: WidgetCardComponent, selector: "hr-widget-card", inputs: ["cardClass", "height", "contentTemplate", "context"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: HRTicketCardComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: HRTicketCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'hr-ticket-card', standalone: true, imports: [CommonModule, HRTranslatePipe, WidgetCardComponent], template: "<hr-widget-card [cardClass]=\"cardClass\" [height]=\"cardHeight\" [contentTemplate]=\"cardContent\">\r\n</hr-widget-card>\r\n\r\n<ng-template #cardContent>\r\n  <p [class]=\"nameClass\" [ngClass]=\"isDependent ? 'd-flex' : ''\">\r\n    @if(isDependent){\r\n    <span class=\"text-ellipsis-one-line cursor-pointer\" [title]=\"name\">{{name}}</span>\r\n    <span class=\"mx-1\">({{typeName}})</span>\r\n    }@else{\r\n    {{name}} ({{'Me' | HRTranslate}})\r\n    }\r\n  </p>\r\n  <p [class]=\"subtitleClass\">{{entitlementText}}</p>\r\n  @if(!isDependent){\r\n  <p class=\"fs-12 mb-2\"><span [class]=\"labelClass\">{{'Class' | HRTranslate}}:</span> <span [class]=\"valueClass\">{{ticketClassName}}</span></p>\r\n  <p class=\"fs-12\"><span [class]=\"labelClass\">{{'Sector' | HRTranslate}}:</span> <span [class]=\"valueClass\">{{ticketSectorName}}</span></p>\r\n  }\r\n</ng-template>\r\n" }]
+            args: [{ selector: 'hr-ticket-card', standalone: true, imports: [CommonModule, TranslatePipe, WidgetCardComponent], template: "<hr-widget-card [cardClass]=\"cardClass\" [height]=\"cardHeight\" [contentTemplate]=\"cardContent\">\r\n</hr-widget-card>\r\n\r\n<ng-template #cardContent>\r\n  <p [class]=\"nameClass\" [ngClass]=\"isDependent ? 'd-flex' : ''\">\r\n    @if(isDependent){\r\n    <span class=\"text-ellipsis-one-line cursor-pointer\" [title]=\"name\">{{name}}</span>\r\n    <span class=\"mx-1\">({{typeName}})</span>\r\n    }@else{\r\n    {{name}} ({{'Me' | translate}})\r\n    }\r\n  </p>\r\n  <p [class]=\"subtitleClass\">{{entitlementText}}</p>\r\n  @if(!isDependent){\r\n  <p class=\"fs-12 mb-2\"><span [class]=\"labelClass\">{{'Class' | translate}}:</span> <span [class]=\"valueClass\">{{ticketClassName}}</span></p>\r\n  <p class=\"fs-12\"><span [class]=\"labelClass\">{{'Sector' | translate}}:</span> <span [class]=\"valueClass\">{{ticketSectorName}}</span></p>\r\n  }\r\n</ng-template>\r\n" }]
         }], propDecorators: { name: [{
                 type: Input,
                 args: [{ required: true }]
@@ -4761,13 +3721,13 @@ class MyProfileTicketWidgetComponent {
         else
             return this.translatePipe.transform('NotEntitled');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MyProfileTicketWidgetComponent, deps: [{ token: HRSelfWidgetsService }, { token: HRTranslatePipe }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: MyProfileTicketWidgetComponent, isStandalone: true, selector: "hr-my-profile-ticket-widget", inputs: { baseUrl: "baseUrl", sectionTitle: "sectionTitle", ticketsIcon: "ticketsIcon", headerIconClass: "headerIconClass", headerTextClass: "headerTextClass", headerDividerClass: "headerDividerClass", emptyStateContainerClass: "emptyStateContainerClass", emptyStateTextClass: "emptyStateTextClass", columnClass: "columnClass", cardHeight: "cardHeight", cardClass: "cardClass", nameClass: "nameClass", subtitleClass: "subtitleClass", labelClass: "labelClass", valueClass: "valueClass" }, outputs: { isLoadingChanged: "isLoadingChanged", errorOccurred: "errorOccurred" }, ngImport: i0, template: "@if(hasData){\r\n<sky-section-divider [fontAwesomeIcon]=\"ticketsIcon\"\r\n                     [text]=\"(sectionTitle | HRTranslate | uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n@if(ticketDetails){\r\n@if(!ticketDetails.EmployeeTicketDetails && ticketDetails.DependentTicketDetails?.length == 0){\r\n<sky-empty-design-card [containerClass]=\"emptyStateContainerClass\"\r\n                       [cardBodyClass]=\"''\"\r\n                       [cardBodyContainerClass]=\"''\"\r\n                       [visibleIcon]=\"false\"\r\n                       [visibleQuickAction]=\"false\"\r\n                       [emptyTextClass]=\"emptyStateTextClass\"\r\n                       [emptyText]=\"'NoTicketEntitlement' | HRTranslate\">\r\n</sky-empty-design-card>\r\n}@else{\r\n<div class=\"row mb-5\">\r\n  @if(ticketDetails.EmployeeTicketDetails){\r\n  <div [class]=\"columnClass\" [style.height.px]=\"cardHeight\">\r\n    <hr-ticket-card [name]=\"ticketDetails.EmployeeTicketDetails.EmployeeFirstName\"\r\n                     [entitlementText]=\"getMonthsPerTicketEntitlement(ticketDetails.EmployeeTicketDetails.MonthsPerTicketEntitlement)\"\r\n                     [ticketClassName]=\"ticketDetails.EmployeeTicketDetails.TicketClassName\"\r\n                     [ticketSectorName]=\"ticketDetails.EmployeeTicketDetails.TicketSectorName\"\r\n                     [cardClass]=\"cardClass\"\r\n                     [cardHeight]=\"cardHeight\"\r\n                     [nameClass]=\"nameClass\"\r\n                     [subtitleClass]=\"subtitleClass\"\r\n                     [labelClass]=\"labelClass\"\r\n                     [valueClass]=\"valueClass\">\r\n    </hr-ticket-card>\r\n  </div>\r\n  }\r\n  @for (dependent of ticketDetails.DependentTicketDetails; track dependent;){\r\n  <div [class]=\"columnClass\" [style.height.px]=\"cardHeight\">\r\n    <hr-ticket-card [name]=\"dependent.DependentName\"\r\n                     [typeName]=\"dependent.DependentTypeName\"\r\n                     [entitlementText]=\"getMonthsPerTicketEntitlement(dependent.MonthsPerTicketEntitlement)\"\r\n                     [isDependent]=\"true\"\r\n                     [cardClass]=\"cardClass\"\r\n                     [cardHeight]=\"cardHeight\"\r\n                     [nameClass]=\"nameClass\"\r\n                     [subtitleClass]=\"subtitleClass\">\r\n    </hr-ticket-card>\r\n  </div>\r\n  }\r\n</div>\r\n}\r\n}@else{\r\n<sky-empty-design-card [containerClass]=\"emptyStateContainerClass\"\r\n                       [cardBodyClass]=\"''\"\r\n                       [cardBodyContainerClass]=\"''\"\r\n                       [visibleIcon]=\"false\"\r\n                       [visibleQuickAction]=\"false\"\r\n                       [emptyTextClass]=\"emptyStateTextClass\"\r\n                       [emptyText]=\"isLoading ? ((sectionTitle | HRTranslate) + ' ' + ('IsLoading' | HRTranslate)) : ('NoTicketEntitlement' | HRTranslate)\">\r\n</sky-empty-design-card>\r\n}\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i2$2.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: HRTranslatePipe, name: "HRTranslate" }, { kind: "component", type: SkySectionDividerComponent, selector: "sky-section-divider", inputs: ["text", "fontAwesomeIcon", "textClass", "dividerClass", "iconClass"] }, { kind: "component", type: SkyEmptyDesignCardComponent, selector: "sky-empty-design-card", inputs: ["emptyIcon", "emptyIconClass", "emptyText", "emptyTextClass", "actionTitle", "actionIcon", "actionDisabled", "textColor", "disabledTitleClass", "activeTitleClass", "disabledIconClass", "activeIconClass", "actionClass", "containerClass", "cardBodyClass", "cardBodyContainerClass", "visibleIcon", "visibleQuickAction"], outputs: ["onActionClick"] }, { kind: "component", type: HRTicketCardComponent, selector: "hr-ticket-card", inputs: ["name", "typeName", "entitlementText", "ticketClassName", "ticketSectorName", "isDependent", "cardClass", "cardHeight", "nameClass", "subtitleClass", "labelClass", "valueClass"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MyProfileTicketWidgetComponent, deps: [{ token: HRSelfWidgetsService }, { token: i2.TranslatePipe }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: MyProfileTicketWidgetComponent, isStandalone: true, selector: "hr-my-profile-ticket-widget", inputs: { baseUrl: "baseUrl", sectionTitle: "sectionTitle", ticketsIcon: "ticketsIcon", headerIconClass: "headerIconClass", headerTextClass: "headerTextClass", headerDividerClass: "headerDividerClass", emptyStateContainerClass: "emptyStateContainerClass", emptyStateTextClass: "emptyStateTextClass", columnClass: "columnClass", cardHeight: "cardHeight", cardClass: "cardClass", nameClass: "nameClass", subtitleClass: "subtitleClass", labelClass: "labelClass", valueClass: "valueClass" }, outputs: { isLoadingChanged: "isLoadingChanged", errorOccurred: "errorOccurred" }, ngImport: i0, template: "@if(hasData){\r\n<sky-section-divider [fontAwesomeIcon]=\"ticketsIcon\"\r\n                     [text]=\"(sectionTitle | translate | uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n@if(ticketDetails){\r\n@if(!ticketDetails.EmployeeTicketDetails && ticketDetails.DependentTicketDetails?.length == 0){\r\n<sky-empty-design-card [containerClass]=\"emptyStateContainerClass\"\r\n                       [cardBodyClass]=\"''\"\r\n                       [cardBodyContainerClass]=\"''\"\r\n                       [visibleIcon]=\"false\"\r\n                       [visibleQuickAction]=\"false\"\r\n                       [emptyTextClass]=\"emptyStateTextClass\"\r\n                       [emptyText]=\"'NoTicketEntitlement' | translate\">\r\n</sky-empty-design-card>\r\n}@else{\r\n<div class=\"row mb-5\">\r\n  @if(ticketDetails.EmployeeTicketDetails){\r\n  <div [class]=\"columnClass\" [style.height.px]=\"cardHeight\">\r\n    <hr-ticket-card [name]=\"ticketDetails.EmployeeTicketDetails.EmployeeFirstName\"\r\n                     [entitlementText]=\"getMonthsPerTicketEntitlement(ticketDetails.EmployeeTicketDetails.MonthsPerTicketEntitlement)\"\r\n                     [ticketClassName]=\"ticketDetails.EmployeeTicketDetails.TicketClassName\"\r\n                     [ticketSectorName]=\"ticketDetails.EmployeeTicketDetails.TicketSectorName\"\r\n                     [cardClass]=\"cardClass\"\r\n                     [cardHeight]=\"cardHeight\"\r\n                     [nameClass]=\"nameClass\"\r\n                     [subtitleClass]=\"subtitleClass\"\r\n                     [labelClass]=\"labelClass\"\r\n                     [valueClass]=\"valueClass\">\r\n    </hr-ticket-card>\r\n  </div>\r\n  }\r\n  @for (dependent of ticketDetails.DependentTicketDetails; track dependent;){\r\n  <div [class]=\"columnClass\" [style.height.px]=\"cardHeight\">\r\n    <hr-ticket-card [name]=\"dependent.DependentName\"\r\n                     [typeName]=\"dependent.DependentTypeName\"\r\n                     [entitlementText]=\"getMonthsPerTicketEntitlement(dependent.MonthsPerTicketEntitlement)\"\r\n                     [isDependent]=\"true\"\r\n                     [cardClass]=\"cardClass\"\r\n                     [cardHeight]=\"cardHeight\"\r\n                     [nameClass]=\"nameClass\"\r\n                     [subtitleClass]=\"subtitleClass\">\r\n    </hr-ticket-card>\r\n  </div>\r\n  }\r\n</div>\r\n}\r\n}@else{\r\n<sky-empty-design-card [containerClass]=\"emptyStateContainerClass\"\r\n                       [cardBodyClass]=\"''\"\r\n                       [cardBodyContainerClass]=\"''\"\r\n                       [visibleIcon]=\"false\"\r\n                       [visibleQuickAction]=\"false\"\r\n                       [emptyTextClass]=\"emptyStateTextClass\"\r\n                       [emptyText]=\"isLoading ? ((sectionTitle | translate) + ' ' + ('IsLoading' | translate)) : ('NoTicketEntitlement' | translate)\">\r\n</sky-empty-design-card>\r\n}\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: SkySectionDividerComponent, selector: "sky-section-divider", inputs: ["text", "fontAwesomeIcon", "textClass", "dividerClass", "iconClass"] }, { kind: "component", type: SkyEmptyDesignCardComponent, selector: "sky-empty-design-card", inputs: ["emptyIcon", "emptyIconClass", "emptyText", "emptyTextClass", "actionTitle", "actionIcon", "actionDisabled", "textColor", "disabledTitleClass", "activeTitleClass", "disabledIconClass", "activeIconClass", "actionClass", "containerClass", "cardBodyClass", "cardBodyContainerClass", "visibleIcon", "visibleQuickAction"], outputs: ["onActionClick"] }, { kind: "component", type: HRTicketCardComponent, selector: "hr-ticket-card", inputs: ["name", "typeName", "entitlementText", "ticketClassName", "ticketSectorName", "isDependent", "cardClass", "cardHeight", "nameClass", "subtitleClass", "labelClass", "valueClass"] }, { kind: "pipe", type: i2$3.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MyProfileTicketWidgetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MyProfileTicketWidgetComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'hr-my-profile-ticket-widget', standalone: true, imports: [CommonModule, HRTranslatePipe, SkySectionDividerComponent, SkyEmptyDesignCardComponent, HRTicketCardComponent], template: "@if(hasData){\r\n<sky-section-divider [fontAwesomeIcon]=\"ticketsIcon\"\r\n                     [text]=\"(sectionTitle | HRTranslate | uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n@if(ticketDetails){\r\n@if(!ticketDetails.EmployeeTicketDetails && ticketDetails.DependentTicketDetails?.length == 0){\r\n<sky-empty-design-card [containerClass]=\"emptyStateContainerClass\"\r\n                       [cardBodyClass]=\"''\"\r\n                       [cardBodyContainerClass]=\"''\"\r\n                       [visibleIcon]=\"false\"\r\n                       [visibleQuickAction]=\"false\"\r\n                       [emptyTextClass]=\"emptyStateTextClass\"\r\n                       [emptyText]=\"'NoTicketEntitlement' | HRTranslate\">\r\n</sky-empty-design-card>\r\n}@else{\r\n<div class=\"row mb-5\">\r\n  @if(ticketDetails.EmployeeTicketDetails){\r\n  <div [class]=\"columnClass\" [style.height.px]=\"cardHeight\">\r\n    <hr-ticket-card [name]=\"ticketDetails.EmployeeTicketDetails.EmployeeFirstName\"\r\n                     [entitlementText]=\"getMonthsPerTicketEntitlement(ticketDetails.EmployeeTicketDetails.MonthsPerTicketEntitlement)\"\r\n                     [ticketClassName]=\"ticketDetails.EmployeeTicketDetails.TicketClassName\"\r\n                     [ticketSectorName]=\"ticketDetails.EmployeeTicketDetails.TicketSectorName\"\r\n                     [cardClass]=\"cardClass\"\r\n                     [cardHeight]=\"cardHeight\"\r\n                     [nameClass]=\"nameClass\"\r\n                     [subtitleClass]=\"subtitleClass\"\r\n                     [labelClass]=\"labelClass\"\r\n                     [valueClass]=\"valueClass\">\r\n    </hr-ticket-card>\r\n  </div>\r\n  }\r\n  @for (dependent of ticketDetails.DependentTicketDetails; track dependent;){\r\n  <div [class]=\"columnClass\" [style.height.px]=\"cardHeight\">\r\n    <hr-ticket-card [name]=\"dependent.DependentName\"\r\n                     [typeName]=\"dependent.DependentTypeName\"\r\n                     [entitlementText]=\"getMonthsPerTicketEntitlement(dependent.MonthsPerTicketEntitlement)\"\r\n                     [isDependent]=\"true\"\r\n                     [cardClass]=\"cardClass\"\r\n                     [cardHeight]=\"cardHeight\"\r\n                     [nameClass]=\"nameClass\"\r\n                     [subtitleClass]=\"subtitleClass\">\r\n    </hr-ticket-card>\r\n  </div>\r\n  }\r\n</div>\r\n}\r\n}@else{\r\n<sky-empty-design-card [containerClass]=\"emptyStateContainerClass\"\r\n                       [cardBodyClass]=\"''\"\r\n                       [cardBodyContainerClass]=\"''\"\r\n                       [visibleIcon]=\"false\"\r\n                       [visibleQuickAction]=\"false\"\r\n                       [emptyTextClass]=\"emptyStateTextClass\"\r\n                       [emptyText]=\"isLoading ? ((sectionTitle | HRTranslate) + ' ' + ('IsLoading' | HRTranslate)) : ('NoTicketEntitlement' | HRTranslate)\">\r\n</sky-empty-design-card>\r\n}\r\n}\r\n" }]
-        }], ctorParameters: () => [{ type: HRSelfWidgetsService }, { type: HRTranslatePipe }], propDecorators: { baseUrl: [{
+            args: [{ selector: 'hr-my-profile-ticket-widget', standalone: true, imports: [CommonModule, TranslatePipe, SkySectionDividerComponent, SkyEmptyDesignCardComponent, HRTicketCardComponent], template: "@if(hasData){\r\n<sky-section-divider [fontAwesomeIcon]=\"ticketsIcon\"\r\n                     [text]=\"(sectionTitle | translate | uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n@if(ticketDetails){\r\n@if(!ticketDetails.EmployeeTicketDetails && ticketDetails.DependentTicketDetails?.length == 0){\r\n<sky-empty-design-card [containerClass]=\"emptyStateContainerClass\"\r\n                       [cardBodyClass]=\"''\"\r\n                       [cardBodyContainerClass]=\"''\"\r\n                       [visibleIcon]=\"false\"\r\n                       [visibleQuickAction]=\"false\"\r\n                       [emptyTextClass]=\"emptyStateTextClass\"\r\n                       [emptyText]=\"'NoTicketEntitlement' | translate\">\r\n</sky-empty-design-card>\r\n}@else{\r\n<div class=\"row mb-5\">\r\n  @if(ticketDetails.EmployeeTicketDetails){\r\n  <div [class]=\"columnClass\" [style.height.px]=\"cardHeight\">\r\n    <hr-ticket-card [name]=\"ticketDetails.EmployeeTicketDetails.EmployeeFirstName\"\r\n                     [entitlementText]=\"getMonthsPerTicketEntitlement(ticketDetails.EmployeeTicketDetails.MonthsPerTicketEntitlement)\"\r\n                     [ticketClassName]=\"ticketDetails.EmployeeTicketDetails.TicketClassName\"\r\n                     [ticketSectorName]=\"ticketDetails.EmployeeTicketDetails.TicketSectorName\"\r\n                     [cardClass]=\"cardClass\"\r\n                     [cardHeight]=\"cardHeight\"\r\n                     [nameClass]=\"nameClass\"\r\n                     [subtitleClass]=\"subtitleClass\"\r\n                     [labelClass]=\"labelClass\"\r\n                     [valueClass]=\"valueClass\">\r\n    </hr-ticket-card>\r\n  </div>\r\n  }\r\n  @for (dependent of ticketDetails.DependentTicketDetails; track dependent;){\r\n  <div [class]=\"columnClass\" [style.height.px]=\"cardHeight\">\r\n    <hr-ticket-card [name]=\"dependent.DependentName\"\r\n                     [typeName]=\"dependent.DependentTypeName\"\r\n                     [entitlementText]=\"getMonthsPerTicketEntitlement(dependent.MonthsPerTicketEntitlement)\"\r\n                     [isDependent]=\"true\"\r\n                     [cardClass]=\"cardClass\"\r\n                     [cardHeight]=\"cardHeight\"\r\n                     [nameClass]=\"nameClass\"\r\n                     [subtitleClass]=\"subtitleClass\">\r\n    </hr-ticket-card>\r\n  </div>\r\n  }\r\n</div>\r\n}\r\n}@else{\r\n<sky-empty-design-card [containerClass]=\"emptyStateContainerClass\"\r\n                       [cardBodyClass]=\"''\"\r\n                       [cardBodyContainerClass]=\"''\"\r\n                       [visibleIcon]=\"false\"\r\n                       [visibleQuickAction]=\"false\"\r\n                       [emptyTextClass]=\"emptyStateTextClass\"\r\n                       [emptyText]=\"isLoading ? ((sectionTitle | translate) + ' ' + ('IsLoading' | translate)) : ('NoTicketEntitlement' | translate)\">\r\n</sky-empty-design-card>\r\n}\r\n}\r\n" }]
+        }], ctorParameters: () => [{ type: HRSelfWidgetsService }, { type: i2.TranslatePipe }], propDecorators: { baseUrl: [{
                 type: Input,
                 args: [{ required: true }]
             }], sectionTitle: [{
@@ -4814,12 +3774,12 @@ class HRMedicalInsuranceCardComponent {
     nameClass = 'text-dark fs-16 mb-2';
     labelClass = 'field-secondary-label-sm';
     valueClass = 'text-dark-gray mx-1';
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: HRMedicalInsuranceCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: HRMedicalInsuranceCardComponent, isStandalone: true, selector: "hr-medical-insurance-card", inputs: { name: "name", typeName: "typeName", isDependent: "isDependent", fields: "fields", cardClass: "cardClass", cardHeight: "cardHeight", nameClass: "nameClass", labelClass: "labelClass", valueClass: "valueClass" }, ngImport: i0, template: "<hr-widget-card [cardClass]=\"cardClass\" [height]=\"cardHeight\" [contentTemplate]=\"cardContent\">\r\n</hr-widget-card>\r\n\r\n<ng-template #cardContent>\r\n  <p [class]=\"nameClass\" [ngClass]=\"isDependent ? 'd-flex' : ''\">\r\n    @if(isDependent){\r\n    <span class=\"text-ellipsis-one-line cursor-pointer\" [title]=\"name\">{{name}}</span>\r\n    <span class=\"mx-1\">({{typeName}})</span>\r\n    }@else{\r\n    {{name}} ({{'Me' | HRTranslate}})\r\n    }\r\n  </p>\r\n  @for (field of fields; track field.labelKey; let last = $last){\r\n  <p [class.mb-2]=\"!last\">\r\n    <span [class]=\"labelClass\">{{field.labelKey | HRTranslate}}:</span>\r\n    <span [class]=\"valueClass\">{{field.value || (field.fallbackValue ?? '\u2014')}}</span>\r\n  </p>\r\n  }\r\n</ng-template>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: HRTranslatePipe, name: "HRTranslate" }, { kind: "component", type: WidgetCardComponent, selector: "hr-widget-card", inputs: ["cardClass", "height", "contentTemplate", "context"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: HRMedicalInsuranceCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: HRMedicalInsuranceCardComponent, isStandalone: true, selector: "hr-medical-insurance-card", inputs: { name: "name", typeName: "typeName", isDependent: "isDependent", fields: "fields", cardClass: "cardClass", cardHeight: "cardHeight", nameClass: "nameClass", labelClass: "labelClass", valueClass: "valueClass" }, ngImport: i0, template: "<hr-widget-card [cardClass]=\"cardClass\" [height]=\"cardHeight\" [contentTemplate]=\"cardContent\">\r\n</hr-widget-card>\r\n\r\n<ng-template #cardContent>\r\n  <p [class]=\"nameClass\" [ngClass]=\"isDependent ? 'd-flex' : ''\">\r\n    @if(isDependent){\r\n    <span class=\"text-ellipsis-one-line cursor-pointer\" [title]=\"name\">{{name}}</span>\r\n    <span class=\"mx-1\">({{typeName}})</span>\r\n    }@else{\r\n    {{name}} ({{'Me' | translate}})\r\n    }\r\n  </p>\r\n  @for (field of fields; track field.labelKey; let last = $last){\r\n  <p [class.mb-2]=\"!last\">\r\n    <span [class]=\"labelClass\">{{field.labelKey | translate}}:</span>\r\n    <span [class]=\"valueClass\">{{field.value || (field.fallbackValue ?? '\u2014')}}</span>\r\n  </p>\r\n  }\r\n</ng-template>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: WidgetCardComponent, selector: "hr-widget-card", inputs: ["cardClass", "height", "contentTemplate", "context"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: HRMedicalInsuranceCardComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: HRMedicalInsuranceCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'hr-medical-insurance-card', standalone: true, imports: [CommonModule, HRTranslatePipe, WidgetCardComponent], template: "<hr-widget-card [cardClass]=\"cardClass\" [height]=\"cardHeight\" [contentTemplate]=\"cardContent\">\r\n</hr-widget-card>\r\n\r\n<ng-template #cardContent>\r\n  <p [class]=\"nameClass\" [ngClass]=\"isDependent ? 'd-flex' : ''\">\r\n    @if(isDependent){\r\n    <span class=\"text-ellipsis-one-line cursor-pointer\" [title]=\"name\">{{name}}</span>\r\n    <span class=\"mx-1\">({{typeName}})</span>\r\n    }@else{\r\n    {{name}} ({{'Me' | HRTranslate}})\r\n    }\r\n  </p>\r\n  @for (field of fields; track field.labelKey; let last = $last){\r\n  <p [class.mb-2]=\"!last\">\r\n    <span [class]=\"labelClass\">{{field.labelKey | HRTranslate}}:</span>\r\n    <span [class]=\"valueClass\">{{field.value || (field.fallbackValue ?? '\u2014')}}</span>\r\n  </p>\r\n  }\r\n</ng-template>\r\n" }]
+            args: [{ selector: 'hr-medical-insurance-card', standalone: true, imports: [CommonModule, TranslatePipe, WidgetCardComponent], template: "<hr-widget-card [cardClass]=\"cardClass\" [height]=\"cardHeight\" [contentTemplate]=\"cardContent\">\r\n</hr-widget-card>\r\n\r\n<ng-template #cardContent>\r\n  <p [class]=\"nameClass\" [ngClass]=\"isDependent ? 'd-flex' : ''\">\r\n    @if(isDependent){\r\n    <span class=\"text-ellipsis-one-line cursor-pointer\" [title]=\"name\">{{name}}</span>\r\n    <span class=\"mx-1\">({{typeName}})</span>\r\n    }@else{\r\n    {{name}} ({{'Me' | translate}})\r\n    }\r\n  </p>\r\n  @for (field of fields; track field.labelKey; let last = $last){\r\n  <p [class.mb-2]=\"!last\">\r\n    <span [class]=\"labelClass\">{{field.labelKey | translate}}:</span>\r\n    <span [class]=\"valueClass\">{{field.value || (field.fallbackValue ?? '\u2014')}}</span>\r\n  </p>\r\n  }\r\n</ng-template>\r\n" }]
         }], propDecorators: { name: [{
                 type: Input,
                 args: [{ required: true }]
@@ -4910,12 +3870,12 @@ class MyProfileMedicalInsuranceWidgetComponent {
             { labelKey: 'CoverageDate', value: this.datePipe.transform(dependent.CoverageDate, this.dateFormat) }
         ];
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MyProfileMedicalInsuranceWidgetComponent, deps: [{ token: HRSelfWidgetsService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: MyProfileMedicalInsuranceWidgetComponent, isStandalone: true, selector: "hr-my-profile-medical-insurance-widget", inputs: { baseUrl: "baseUrl", sectionTitle: "sectionTitle", medicalInsuranceIcon: "medicalInsuranceIcon", headerIconClass: "headerIconClass", headerTextClass: "headerTextClass", headerDividerClass: "headerDividerClass", labelClass: "labelClass", valueClass: "valueClass", columnClass: "columnClass", cardHeight: "cardHeight", cardClass: "cardClass", nameClass: "nameClass", dateFormat: "dateFormat", emptyStateContainerClass: "emptyStateContainerClass", emptyStateTextClass: "emptyStateTextClass" }, outputs: { isLoadingChanged: "isLoadingChanged", errorOccurred: "errorOccurred" }, ngImport: i0, template: "<sky-section-divider [fontAwesomeIcon]=\"medicalInsuranceIcon\"\r\n                     [text]=\"(sectionTitle | HRTranslate | uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n@if(medicalInsuranceDetails){\r\n<div class=\"row mb-5\">\r\n  @if(medicalInsuranceDetails.EmployeeMedicalInsurance){\r\n  <div [class]=\"columnClass\"  [style.height.px]=\"cardHeight\">\r\n    <hr-medical-insurance-card [name]=\"medicalInsuranceDetails.EmployeeMedicalInsurance.EmployeeFirstName\"\r\n                                [fields]=\"employeeFields\"\r\n                                [cardClass]=\"cardClass\"\r\n                                [cardHeight]=\"cardHeight\"\r\n                                [nameClass]=\"nameClass\"\r\n                                [labelClass]=\"labelClass\"\r\n                                [valueClass]=\"valueClass\">\r\n    </hr-medical-insurance-card>\r\n  </div>\r\n  }\r\n  @for (dependent of medicalInsuranceDetails.DependentsMedicalInsurance; track dependent){\r\n  <div [class]=\"columnClass\"  [style.height.px]=\"cardHeight\">\r\n    <hr-medical-insurance-card [name]=\"dependent.DependentName\"\r\n                                [typeName]=\"dependent.DependentTypeName\"\r\n                                [isDependent]=\"true\"\r\n                                [fields]=\"getDependentFields(dependent)\"\r\n                                [cardClass]=\"cardClass\"\r\n                                [cardHeight]=\"cardHeight\"\r\n                                [nameClass]=\"nameClass\"\r\n                                [labelClass]=\"labelClass\"\r\n                                [valueClass]=\"valueClass\">\r\n    </hr-medical-insurance-card>\r\n  </div>\r\n  }\r\n</div>\r\n}@else{\r\n<sky-empty-design-card [containerClass]=\"emptyStateContainerClass\"\r\n                       [cardBodyClass]=\"''\"\r\n                       [cardBodyContainerClass]=\"''\"\r\n                       [visibleIcon]=\"false\"\r\n                       [visibleQuickAction]=\"false\"\r\n                       [emptyTextClass]=\"emptyStateTextClass\"\r\n                       [emptyText]=\"isLoading ? ((sectionTitle | HRTranslate) + ' ' + ('IsLoading' | HRTranslate)) : ('NotCoveredByMedicalInsurance' | HRTranslate)\">\r\n</sky-empty-design-card>\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i2$2.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: HRTranslatePipe, name: "HRTranslate" }, { kind: "component", type: SkySectionDividerComponent, selector: "sky-section-divider", inputs: ["text", "fontAwesomeIcon", "textClass", "dividerClass", "iconClass"] }, { kind: "component", type: SkyEmptyDesignCardComponent, selector: "sky-empty-design-card", inputs: ["emptyIcon", "emptyIconClass", "emptyText", "emptyTextClass", "actionTitle", "actionIcon", "actionDisabled", "textColor", "disabledTitleClass", "activeTitleClass", "disabledIconClass", "activeIconClass", "actionClass", "containerClass", "cardBodyClass", "cardBodyContainerClass", "visibleIcon", "visibleQuickAction"], outputs: ["onActionClick"] }, { kind: "component", type: HRMedicalInsuranceCardComponent, selector: "hr-medical-insurance-card", inputs: ["name", "typeName", "isDependent", "fields", "cardClass", "cardHeight", "nameClass", "labelClass", "valueClass"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MyProfileMedicalInsuranceWidgetComponent, deps: [{ token: HRSelfWidgetsService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: MyProfileMedicalInsuranceWidgetComponent, isStandalone: true, selector: "hr-my-profile-medical-insurance-widget", inputs: { baseUrl: "baseUrl", sectionTitle: "sectionTitle", medicalInsuranceIcon: "medicalInsuranceIcon", headerIconClass: "headerIconClass", headerTextClass: "headerTextClass", headerDividerClass: "headerDividerClass", labelClass: "labelClass", valueClass: "valueClass", columnClass: "columnClass", cardHeight: "cardHeight", cardClass: "cardClass", nameClass: "nameClass", dateFormat: "dateFormat", emptyStateContainerClass: "emptyStateContainerClass", emptyStateTextClass: "emptyStateTextClass" }, outputs: { isLoadingChanged: "isLoadingChanged", errorOccurred: "errorOccurred" }, ngImport: i0, template: "<sky-section-divider [fontAwesomeIcon]=\"medicalInsuranceIcon\"\r\n                     [text]=\"(sectionTitle | translate | uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n@if(medicalInsuranceDetails){\r\n<div class=\"row mb-5\">\r\n  @if(medicalInsuranceDetails.EmployeeMedicalInsurance){\r\n  <div [class]=\"columnClass\"  [style.height.px]=\"cardHeight\">\r\n    <hr-medical-insurance-card [name]=\"medicalInsuranceDetails.EmployeeMedicalInsurance.EmployeeFirstName\"\r\n                                [fields]=\"employeeFields\"\r\n                                [cardClass]=\"cardClass\"\r\n                                [cardHeight]=\"cardHeight\"\r\n                                [nameClass]=\"nameClass\"\r\n                                [labelClass]=\"labelClass\"\r\n                                [valueClass]=\"valueClass\">\r\n    </hr-medical-insurance-card>\r\n  </div>\r\n  }\r\n  @for (dependent of medicalInsuranceDetails.DependentsMedicalInsurance; track dependent){\r\n  <div [class]=\"columnClass\"  [style.height.px]=\"cardHeight\">\r\n    <hr-medical-insurance-card [name]=\"dependent.DependentName\"\r\n                                [typeName]=\"dependent.DependentTypeName\"\r\n                                [isDependent]=\"true\"\r\n                                [fields]=\"getDependentFields(dependent)\"\r\n                                [cardClass]=\"cardClass\"\r\n                                [cardHeight]=\"cardHeight\"\r\n                                [nameClass]=\"nameClass\"\r\n                                [labelClass]=\"labelClass\"\r\n                                [valueClass]=\"valueClass\">\r\n    </hr-medical-insurance-card>\r\n  </div>\r\n  }\r\n</div>\r\n}@else{\r\n<sky-empty-design-card [containerClass]=\"emptyStateContainerClass\"\r\n                       [cardBodyClass]=\"''\"\r\n                       [cardBodyContainerClass]=\"''\"\r\n                       [visibleIcon]=\"false\"\r\n                       [visibleQuickAction]=\"false\"\r\n                       [emptyTextClass]=\"emptyStateTextClass\"\r\n                       [emptyText]=\"isLoading ? ((sectionTitle | translate) + ' ' + ('IsLoading' | translate)) : ('NotCoveredByMedicalInsurance' | translate)\">\r\n</sky-empty-design-card>\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: SkySectionDividerComponent, selector: "sky-section-divider", inputs: ["text", "fontAwesomeIcon", "textClass", "dividerClass", "iconClass"] }, { kind: "component", type: SkyEmptyDesignCardComponent, selector: "sky-empty-design-card", inputs: ["emptyIcon", "emptyIconClass", "emptyText", "emptyTextClass", "actionTitle", "actionIcon", "actionDisabled", "textColor", "disabledTitleClass", "activeTitleClass", "disabledIconClass", "activeIconClass", "actionClass", "containerClass", "cardBodyClass", "cardBodyContainerClass", "visibleIcon", "visibleQuickAction"], outputs: ["onActionClick"] }, { kind: "component", type: HRMedicalInsuranceCardComponent, selector: "hr-medical-insurance-card", inputs: ["name", "typeName", "isDependent", "fields", "cardClass", "cardHeight", "nameClass", "labelClass", "valueClass"] }, { kind: "pipe", type: i2$3.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MyProfileMedicalInsuranceWidgetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MyProfileMedicalInsuranceWidgetComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'hr-my-profile-medical-insurance-widget', standalone: true, imports: [CommonModule, HRTranslatePipe, SkySectionDividerComponent, SkyEmptyDesignCardComponent, HRMedicalInsuranceCardComponent], template: "<sky-section-divider [fontAwesomeIcon]=\"medicalInsuranceIcon\"\r\n                     [text]=\"(sectionTitle | HRTranslate | uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n@if(medicalInsuranceDetails){\r\n<div class=\"row mb-5\">\r\n  @if(medicalInsuranceDetails.EmployeeMedicalInsurance){\r\n  <div [class]=\"columnClass\"  [style.height.px]=\"cardHeight\">\r\n    <hr-medical-insurance-card [name]=\"medicalInsuranceDetails.EmployeeMedicalInsurance.EmployeeFirstName\"\r\n                                [fields]=\"employeeFields\"\r\n                                [cardClass]=\"cardClass\"\r\n                                [cardHeight]=\"cardHeight\"\r\n                                [nameClass]=\"nameClass\"\r\n                                [labelClass]=\"labelClass\"\r\n                                [valueClass]=\"valueClass\">\r\n    </hr-medical-insurance-card>\r\n  </div>\r\n  }\r\n  @for (dependent of medicalInsuranceDetails.DependentsMedicalInsurance; track dependent){\r\n  <div [class]=\"columnClass\"  [style.height.px]=\"cardHeight\">\r\n    <hr-medical-insurance-card [name]=\"dependent.DependentName\"\r\n                                [typeName]=\"dependent.DependentTypeName\"\r\n                                [isDependent]=\"true\"\r\n                                [fields]=\"getDependentFields(dependent)\"\r\n                                [cardClass]=\"cardClass\"\r\n                                [cardHeight]=\"cardHeight\"\r\n                                [nameClass]=\"nameClass\"\r\n                                [labelClass]=\"labelClass\"\r\n                                [valueClass]=\"valueClass\">\r\n    </hr-medical-insurance-card>\r\n  </div>\r\n  }\r\n</div>\r\n}@else{\r\n<sky-empty-design-card [containerClass]=\"emptyStateContainerClass\"\r\n                       [cardBodyClass]=\"''\"\r\n                       [cardBodyContainerClass]=\"''\"\r\n                       [visibleIcon]=\"false\"\r\n                       [visibleQuickAction]=\"false\"\r\n                       [emptyTextClass]=\"emptyStateTextClass\"\r\n                       [emptyText]=\"isLoading ? ((sectionTitle | HRTranslate) + ' ' + ('IsLoading' | HRTranslate)) : ('NotCoveredByMedicalInsurance' | HRTranslate)\">\r\n</sky-empty-design-card>\r\n}\r\n" }]
+            args: [{ selector: 'hr-my-profile-medical-insurance-widget', standalone: true, imports: [CommonModule, TranslatePipe, SkySectionDividerComponent, SkyEmptyDesignCardComponent, HRMedicalInsuranceCardComponent], template: "<sky-section-divider [fontAwesomeIcon]=\"medicalInsuranceIcon\"\r\n                     [text]=\"(sectionTitle | translate | uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n@if(medicalInsuranceDetails){\r\n<div class=\"row mb-5\">\r\n  @if(medicalInsuranceDetails.EmployeeMedicalInsurance){\r\n  <div [class]=\"columnClass\"  [style.height.px]=\"cardHeight\">\r\n    <hr-medical-insurance-card [name]=\"medicalInsuranceDetails.EmployeeMedicalInsurance.EmployeeFirstName\"\r\n                                [fields]=\"employeeFields\"\r\n                                [cardClass]=\"cardClass\"\r\n                                [cardHeight]=\"cardHeight\"\r\n                                [nameClass]=\"nameClass\"\r\n                                [labelClass]=\"labelClass\"\r\n                                [valueClass]=\"valueClass\">\r\n    </hr-medical-insurance-card>\r\n  </div>\r\n  }\r\n  @for (dependent of medicalInsuranceDetails.DependentsMedicalInsurance; track dependent){\r\n  <div [class]=\"columnClass\"  [style.height.px]=\"cardHeight\">\r\n    <hr-medical-insurance-card [name]=\"dependent.DependentName\"\r\n                                [typeName]=\"dependent.DependentTypeName\"\r\n                                [isDependent]=\"true\"\r\n                                [fields]=\"getDependentFields(dependent)\"\r\n                                [cardClass]=\"cardClass\"\r\n                                [cardHeight]=\"cardHeight\"\r\n                                [nameClass]=\"nameClass\"\r\n                                [labelClass]=\"labelClass\"\r\n                                [valueClass]=\"valueClass\">\r\n    </hr-medical-insurance-card>\r\n  </div>\r\n  }\r\n</div>\r\n}@else{\r\n<sky-empty-design-card [containerClass]=\"emptyStateContainerClass\"\r\n                       [cardBodyClass]=\"''\"\r\n                       [cardBodyContainerClass]=\"''\"\r\n                       [visibleIcon]=\"false\"\r\n                       [visibleQuickAction]=\"false\"\r\n                       [emptyTextClass]=\"emptyStateTextClass\"\r\n                       [emptyText]=\"isLoading ? ((sectionTitle | translate) + ' ' + ('IsLoading' | translate)) : ('NotCoveredByMedicalInsurance' | translate)\">\r\n</sky-empty-design-card>\r\n}\r\n" }]
         }], ctorParameters: () => [{ type: HRSelfWidgetsService }], propDecorators: { baseUrl: [{
                 type: Input,
                 args: [{ required: true }]
@@ -4999,12 +3959,12 @@ class MyProfileEntitlementsOthersWidgetComponent {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MyProfileEntitlementsOthersWidgetComponent, deps: [{ token: HRSelfWidgetsService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.21", type: MyProfileEntitlementsOthersWidgetComponent, isStandalone: true, selector: "hr-my-profile-entitlements-others-widget", inputs: { baseUrl: "baseUrl", sectionTitle: "sectionTitle", othersIcon: "othersIcon", headerIconClass: "headerIconClass", headerTextClass: "headerTextClass", headerDividerClass: "headerDividerClass", rowClass: "rowClass", columnClass: "columnClass", labelClass: "labelClass", valueClass: "valueClass" }, outputs: { isLoadingChanged: "isLoadingChanged", errorOccurred: "errorOccurred" }, ngImport: i0, template: "<sky-section-divider [fontAwesomeIcon]=\"othersIcon\"\r\n                     [text]=\"(sectionTitle | HRTranslate | uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n<div [class]=\"rowClass\">\r\n  <div [class]=\"columnClass\">\r\n    <hr-info-field labelKey=\"OvertimeEligibility\"\r\n                   [value]=\"(isEligibleForOvertime ? 'Eligible' : 'NotEligible') | HRTranslate\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [class]=\"columnClass\">\r\n    <hr-info-field labelKey=\"SocialSecurityEligibility\"\r\n                   [value]=\"(isSocialSecurityMember ? 'Member' : 'NotMember') | HRTranslate\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i2$2.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: HRTranslatePipe, name: "HRTranslate" }, { kind: "component", type: SkySectionDividerComponent, selector: "sky-section-divider", inputs: ["text", "fontAwesomeIcon", "textClass", "dividerClass", "iconClass"] }, { kind: "component", type: HRInfoFieldComponent, selector: "hr-info-field", inputs: ["labelKey", "value", "labelClass", "valueClass", "fallbackValue"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MyProfileEntitlementsOthersWidgetComponent, deps: [{ token: HRSelfWidgetsService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.13", type: MyProfileEntitlementsOthersWidgetComponent, isStandalone: true, selector: "hr-my-profile-entitlements-others-widget", inputs: { baseUrl: "baseUrl", sectionTitle: "sectionTitle", othersIcon: "othersIcon", headerIconClass: "headerIconClass", headerTextClass: "headerTextClass", headerDividerClass: "headerDividerClass", rowClass: "rowClass", columnClass: "columnClass", labelClass: "labelClass", valueClass: "valueClass" }, outputs: { isLoadingChanged: "isLoadingChanged", errorOccurred: "errorOccurred" }, ngImport: i0, template: "<sky-section-divider [fontAwesomeIcon]=\"othersIcon\"\r\n                     [text]=\"(sectionTitle | translate | uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n<div [class]=\"rowClass\">\r\n  <div [class]=\"columnClass\">\r\n    <hr-info-field labelKey=\"OvertimeEligibility\"\r\n                   [value]=\"(isEligibleForOvertime ? 'Eligible' : 'NotEligible') | translate\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [class]=\"columnClass\">\r\n    <hr-info-field labelKey=\"SocialSecurityEligibility\"\r\n                   [value]=\"(isSocialSecurityMember ? 'Member' : 'NotMember') | translate\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: SkySectionDividerComponent, selector: "sky-section-divider", inputs: ["text", "fontAwesomeIcon", "textClass", "dividerClass", "iconClass"] }, { kind: "component", type: HRInfoFieldComponent, selector: "hr-info-field", inputs: ["labelKey", "value", "labelClass", "valueClass", "fallbackValue"] }, { kind: "pipe", type: i2$3.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MyProfileEntitlementsOthersWidgetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MyProfileEntitlementsOthersWidgetComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'hr-my-profile-entitlements-others-widget', standalone: true, imports: [CommonModule, HRTranslatePipe, SkySectionDividerComponent, HRInfoFieldComponent], template: "<sky-section-divider [fontAwesomeIcon]=\"othersIcon\"\r\n                     [text]=\"(sectionTitle | HRTranslate | uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n<div [class]=\"rowClass\">\r\n  <div [class]=\"columnClass\">\r\n    <hr-info-field labelKey=\"OvertimeEligibility\"\r\n                   [value]=\"(isEligibleForOvertime ? 'Eligible' : 'NotEligible') | HRTranslate\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [class]=\"columnClass\">\r\n    <hr-info-field labelKey=\"SocialSecurityEligibility\"\r\n                   [value]=\"(isSocialSecurityMember ? 'Member' : 'NotMember') | HRTranslate\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n</div>\r\n" }]
+            args: [{ selector: 'hr-my-profile-entitlements-others-widget', standalone: true, imports: [CommonModule, TranslatePipe, SkySectionDividerComponent, HRInfoFieldComponent], template: "<sky-section-divider [fontAwesomeIcon]=\"othersIcon\"\r\n                     [text]=\"(sectionTitle | translate | uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n<div [class]=\"rowClass\">\r\n  <div [class]=\"columnClass\">\r\n    <hr-info-field labelKey=\"OvertimeEligibility\"\r\n                   [value]=\"(isEligibleForOvertime ? 'Eligible' : 'NotEligible') | translate\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [class]=\"columnClass\">\r\n    <hr-info-field labelKey=\"SocialSecurityEligibility\"\r\n                   [value]=\"(isSocialSecurityMember ? 'Member' : 'NotMember') | translate\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n</div>\r\n" }]
         }], ctorParameters: () => [{ type: HRSelfWidgetsService }], propDecorators: { baseUrl: [{
                 type: Input,
                 args: [{ required: true }]
@@ -5058,10 +4018,10 @@ class HRDocumentRowComponent {
     onDownload() {
         this.download.emit(this.doc);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: HRDocumentRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: HRDocumentRowComponent, isStandalone: true, selector: "hr-document-row", inputs: { doc: "doc", valueClass: "valueClass", viewIcon: "viewIcon", downloadIcon: "downloadIcon", viewIconClass: "viewIconClass", downloadIconClass: "downloadIconClass", rowClass: "rowClass", dataColClass: "dataColClass", dataColSpacingClass: "dataColSpacingClass", dataRowClass: "dataRowClass", typeColClass: "typeColClass", numberColClass: "numberColClass", issueDateColClass: "issueDateColClass", expiryDateColClass: "expiryDateColClass", actionsColClass: "actionsColClass", actionsWrapperClass: "actionsWrapperClass", downloadContainerClass: "downloadContainerClass" }, outputs: { attachmentView: "attachmentView", download: "download" }, ngImport: i0, template: "<div [class]=\"rowClass\">\r\n\r\n  <div [class]=\"dataColClass + ' ' + dataColSpacingClass\">\r\n    <div [class]=\"dataRowClass\">\r\n\r\n      <div [class]=\"typeColClass\">\r\n        <p [class]=\"valueClass + ' mb-0 text-ellipsis-one-line'\"\r\n           [title]=\"doc.DocumentTypeName\">\r\n          {{ doc.DocumentTypeName }}\r\n        </p>\r\n      </div>\r\n\r\n      <div [class]=\"numberColClass\">\r\n        <p [class]=\"valueClass + ' mb-0'\">\r\n          {{ doc.DocumentNumber || '\u2014' }}\r\n        </p>\r\n      </div>\r\n\r\n      <div [class]=\"issueDateColClass\">\r\n        <p [class]=\"valueClass + ' mb-0'\">\r\n          {{ doc.IssueDate ? (doc.IssueDate | date:'dd/MM/yyyy') : '\u2014' }}\r\n        </p>\r\n      </div>\r\n\r\n      <div [class]=\"expiryDateColClass\">\r\n        <p [class]=\"valueClass + ' mb-0'\">\r\n          {{ doc.ExpiryDate ? (doc.ExpiryDate | date:'dd/MM/yyyy') : '\u2014' }}\r\n        </p>\r\n      </div>\r\n\r\n    </div>\r\n  </div>\r\n\r\n  <div [class]=\"actionsColClass\">\r\n\r\n    @if(doc.Attachments?.length) {\r\n\r\n    <div [class]=\"actionsWrapperClass\">\r\n\r\n      @if(doc.Attachments.length === 1) {\r\n      <fa-icon [icon]=\"viewIcon\"\r\n               [class]=\"viewIconClass\"\r\n               (click)=\"onAttachmentView()\">\r\n      </fa-icon>\r\n      } @else {\r\n      <div class=\"invisible\">\r\n        <fa-icon [icon]=\"viewIcon\"></fa-icon>\r\n      </div>\r\n      }\r\n\r\n      <div [class]=\"downloadContainerClass\"\r\n           (click)=\"onDownload()\">\r\n        <fa-icon [icon]=\"downloadIcon\"\r\n                 [class]=\"downloadIconClass\">\r\n        </fa-icon>\r\n        <span class=\"ps-1\">{{ doc.Attachments.length }}</span>\r\n      </div>\r\n\r\n    </div>\r\n\r\n    }\r\n\r\n  </div>\r\n\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i2$2.DatePipe, name: "date" }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: HRDocumentRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: HRDocumentRowComponent, isStandalone: true, selector: "hr-document-row", inputs: { doc: "doc", valueClass: "valueClass", viewIcon: "viewIcon", downloadIcon: "downloadIcon", viewIconClass: "viewIconClass", downloadIconClass: "downloadIconClass", rowClass: "rowClass", dataColClass: "dataColClass", dataColSpacingClass: "dataColSpacingClass", dataRowClass: "dataRowClass", typeColClass: "typeColClass", numberColClass: "numberColClass", issueDateColClass: "issueDateColClass", expiryDateColClass: "expiryDateColClass", actionsColClass: "actionsColClass", actionsWrapperClass: "actionsWrapperClass", downloadContainerClass: "downloadContainerClass" }, outputs: { attachmentView: "attachmentView", download: "download" }, ngImport: i0, template: "<div [class]=\"rowClass\">\r\n\r\n  <div [class]=\"dataColClass + ' ' + dataColSpacingClass\">\r\n    <div [class]=\"dataRowClass\">\r\n\r\n      <div [class]=\"typeColClass\">\r\n        <p [class]=\"valueClass + ' mb-0 text-ellipsis-one-line'\"\r\n           [title]=\"doc.DocumentTypeName\">\r\n          {{ doc.DocumentTypeName }}\r\n        </p>\r\n      </div>\r\n\r\n      <div [class]=\"numberColClass\">\r\n        <p [class]=\"valueClass + ' mb-0'\">\r\n          {{ doc.DocumentNumber || '\u2014' }}\r\n        </p>\r\n      </div>\r\n\r\n      <div [class]=\"issueDateColClass\">\r\n        <p [class]=\"valueClass + ' mb-0'\">\r\n          {{ doc.IssueDate ? (doc.IssueDate | date:'dd/MM/yyyy') : '\u2014' }}\r\n        </p>\r\n      </div>\r\n\r\n      <div [class]=\"expiryDateColClass\">\r\n        <p [class]=\"valueClass + ' mb-0'\">\r\n          {{ doc.ExpiryDate ? (doc.ExpiryDate | date:'dd/MM/yyyy') : '\u2014' }}\r\n        </p>\r\n      </div>\r\n\r\n    </div>\r\n  </div>\r\n\r\n  <div [class]=\"actionsColClass\">\r\n\r\n    @if(doc.Attachments?.length) {\r\n\r\n    <div [class]=\"actionsWrapperClass\">\r\n\r\n      @if(doc.Attachments.length === 1) {\r\n      <fa-icon [icon]=\"viewIcon\"\r\n               [class]=\"viewIconClass\"\r\n               (click)=\"onAttachmentView()\">\r\n      </fa-icon>\r\n      } @else {\r\n      <div class=\"invisible\">\r\n        <fa-icon [icon]=\"viewIcon\"></fa-icon>\r\n      </div>\r\n      }\r\n\r\n      <div [class]=\"downloadContainerClass\"\r\n           (click)=\"onDownload()\">\r\n        <fa-icon [icon]=\"downloadIcon\"\r\n                 [class]=\"downloadIconClass\">\r\n        </fa-icon>\r\n        <span class=\"ps-1\">{{ doc.Attachments.length }}</span>\r\n      </div>\r\n\r\n    </div>\r\n\r\n    }\r\n\r\n  </div>\r\n\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i2$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }, { kind: "pipe", type: i2$3.DatePipe, name: "date" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: HRDocumentRowComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: HRDocumentRowComponent, decorators: [{
             type: Component,
             args: [{ selector: 'hr-document-row', standalone: true, imports: [CommonModule, FontAwesomeModule], template: "<div [class]=\"rowClass\">\r\n\r\n  <div [class]=\"dataColClass + ' ' + dataColSpacingClass\">\r\n    <div [class]=\"dataRowClass\">\r\n\r\n      <div [class]=\"typeColClass\">\r\n        <p [class]=\"valueClass + ' mb-0 text-ellipsis-one-line'\"\r\n           [title]=\"doc.DocumentTypeName\">\r\n          {{ doc.DocumentTypeName }}\r\n        </p>\r\n      </div>\r\n\r\n      <div [class]=\"numberColClass\">\r\n        <p [class]=\"valueClass + ' mb-0'\">\r\n          {{ doc.DocumentNumber || '\u2014' }}\r\n        </p>\r\n      </div>\r\n\r\n      <div [class]=\"issueDateColClass\">\r\n        <p [class]=\"valueClass + ' mb-0'\">\r\n          {{ doc.IssueDate ? (doc.IssueDate | date:'dd/MM/yyyy') : '\u2014' }}\r\n        </p>\r\n      </div>\r\n\r\n      <div [class]=\"expiryDateColClass\">\r\n        <p [class]=\"valueClass + ' mb-0'\">\r\n          {{ doc.ExpiryDate ? (doc.ExpiryDate | date:'dd/MM/yyyy') : '\u2014' }}\r\n        </p>\r\n      </div>\r\n\r\n    </div>\r\n  </div>\r\n\r\n  <div [class]=\"actionsColClass\">\r\n\r\n    @if(doc.Attachments?.length) {\r\n\r\n    <div [class]=\"actionsWrapperClass\">\r\n\r\n      @if(doc.Attachments.length === 1) {\r\n      <fa-icon [icon]=\"viewIcon\"\r\n               [class]=\"viewIconClass\"\r\n               (click)=\"onAttachmentView()\">\r\n      </fa-icon>\r\n      } @else {\r\n      <div class=\"invisible\">\r\n        <fa-icon [icon]=\"viewIcon\"></fa-icon>\r\n      </div>\r\n      }\r\n\r\n      <div [class]=\"downloadContainerClass\"\r\n           (click)=\"onDownload()\">\r\n        <fa-icon [icon]=\"downloadIcon\"\r\n                 [class]=\"downloadIconClass\">\r\n        </fa-icon>\r\n        <span class=\"ps-1\">{{ doc.Attachments.length }}</span>\r\n      </div>\r\n\r\n    </div>\r\n\r\n    }\r\n\r\n  </div>\r\n\r\n</div>\r\n" }]
         }], propDecorators: { doc: [{
@@ -5134,12 +4094,12 @@ class HRDocumentCardComponent {
     onDownload(doc) {
         this.download.emit(doc);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: HRDocumentCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: HRDocumentCardComponent, isStandalone: true, selector: "hr-document-card", inputs: { title: "title", documents: "documents", titleContainerClass: "titleContainerClass", titleClass: "titleClass", valueClass: "valueClass", viewIcon: "viewIcon", downloadIcon: "downloadIcon", viewIconClass: "viewIconClass", downloadIconClass: "downloadIconClass", labelClass: "labelClass", rowClass: "rowClass", dataColClass: "dataColClass", dataColSpacingClass: "dataColSpacingClass", dataRowClass: "dataRowClass", typeColClass: "typeColClass", numberColClass: "numberColClass", issueDateColClass: "issueDateColClass", expiryDateColClass: "expiryDateColClass", actionsColClass: "actionsColClass", actionsWrapperClass: "actionsWrapperClass", downloadContainerClass: "downloadContainerClass" }, outputs: { attachmentView: "attachmentView", download: "download" }, ngImport: i0, template: "@if(title) {\r\n<div [class]=\"titleContainerClass\">\r\n  <p [class]=\"titleClass\">{{ title }}</p>\r\n</div>\r\n}\r\n\r\n<div [class]=\"rowClass\">\r\n  <div [class]=\"dataColClass\">\r\n    <div class=\"row g-1\">\r\n\r\n      <div [class]=\"typeColClass\">\r\n        <p [class]=\"labelClass\">{{ 'Type' | HRTranslate }}</p>\r\n      </div>\r\n\r\n      <div [class]=\"numberColClass\">\r\n        <p [class]=\"labelClass\">{{ 'DocumentNumber' | HRTranslate }}</p>\r\n      </div>\r\n\r\n      <div [class]=\"issueDateColClass\">\r\n        <p [class]=\"labelClass\">{{ 'IssueDate' | HRTranslate }}</p>\r\n      </div>\r\n\r\n      <div [class]=\"expiryDateColClass\">\r\n        <p [class]=\"labelClass\">{{ 'ExpiryDate' | HRTranslate }}</p>\r\n      </div>\r\n\r\n    </div>\r\n  </div>\r\n\r\n  <div [class]=\"actionsColClass\"></div>\r\n</div>\r\n\r\n@for(doc of documents; track doc) {\r\n\r\n<hr-document-row [doc]=\"doc\"\r\n                 [valueClass]=\"valueClass\"\r\n                 [viewIcon]=\"viewIcon\"\r\n                 [downloadIcon]=\"downloadIcon\"\r\n                 [viewIconClass]=\"viewIconClass\"\r\n                 [downloadIconClass]=\"downloadIconClass\"\r\n                 [rowClass]=\"rowClass\"\r\n                 [dataColClass]=\"dataColClass\"\r\n                 [dataColSpacingClass]=\"dataColSpacingClass\"\r\n                 [dataRowClass]=\"dataRowClass\"\r\n                 [typeColClass]=\"typeColClass\"\r\n                 [numberColClass]=\"numberColClass\"\r\n                 [issueDateColClass]=\"issueDateColClass\"\r\n                 [expiryDateColClass]=\"expiryDateColClass\"\r\n                 [actionsColClass]=\"actionsColClass\"\r\n                 [actionsWrapperClass]=\"actionsWrapperClass\"\r\n                 [downloadContainerClass]=\"downloadContainerClass\"\r\n                 (attachmentView)=\"onAttachmentView($event)\"\r\n                 (download)=\"onDownload($event)\">\r\n</hr-document-row>\r\n\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "pipe", type: HRTranslatePipe, name: "HRTranslate" }, { kind: "component", type: HRDocumentRowComponent, selector: "hr-document-row", inputs: ["doc", "valueClass", "viewIcon", "downloadIcon", "viewIconClass", "downloadIconClass", "rowClass", "dataColClass", "dataColSpacingClass", "dataRowClass", "typeColClass", "numberColClass", "issueDateColClass", "expiryDateColClass", "actionsColClass", "actionsWrapperClass", "downloadContainerClass"], outputs: ["attachmentView", "download"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: HRDocumentCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: HRDocumentCardComponent, isStandalone: true, selector: "hr-document-card", inputs: { title: "title", documents: "documents", titleContainerClass: "titleContainerClass", titleClass: "titleClass", valueClass: "valueClass", viewIcon: "viewIcon", downloadIcon: "downloadIcon", viewIconClass: "viewIconClass", downloadIconClass: "downloadIconClass", labelClass: "labelClass", rowClass: "rowClass", dataColClass: "dataColClass", dataColSpacingClass: "dataColSpacingClass", dataRowClass: "dataRowClass", typeColClass: "typeColClass", numberColClass: "numberColClass", issueDateColClass: "issueDateColClass", expiryDateColClass: "expiryDateColClass", actionsColClass: "actionsColClass", actionsWrapperClass: "actionsWrapperClass", downloadContainerClass: "downloadContainerClass" }, outputs: { attachmentView: "attachmentView", download: "download" }, ngImport: i0, template: "@if(title) {\r\n<div [class]=\"titleContainerClass\">\r\n  <p [class]=\"titleClass\">{{ title }}</p>\r\n</div>\r\n}\r\n\r\n<div [class]=\"rowClass\">\r\n  <div [class]=\"dataColClass\">\r\n    <div class=\"row g-1\">\r\n\r\n      <div [class]=\"typeColClass\">\r\n        <p [class]=\"labelClass\">{{ 'Type' | translate }}</p>\r\n      </div>\r\n\r\n      <div [class]=\"numberColClass\">\r\n        <p [class]=\"labelClass\">{{ 'DocumentNumber' | translate }}</p>\r\n      </div>\r\n\r\n      <div [class]=\"issueDateColClass\">\r\n        <p [class]=\"labelClass\">{{ 'IssueDate' | translate }}</p>\r\n      </div>\r\n\r\n      <div [class]=\"expiryDateColClass\">\r\n        <p [class]=\"labelClass\">{{ 'ExpiryDate' | translate }}</p>\r\n      </div>\r\n\r\n    </div>\r\n  </div>\r\n\r\n  <div [class]=\"actionsColClass\"></div>\r\n</div>\r\n\r\n@for(doc of documents; track doc) {\r\n\r\n<hr-document-row [doc]=\"doc\"\r\n                 [valueClass]=\"valueClass\"\r\n                 [viewIcon]=\"viewIcon\"\r\n                 [downloadIcon]=\"downloadIcon\"\r\n                 [viewIconClass]=\"viewIconClass\"\r\n                 [downloadIconClass]=\"downloadIconClass\"\r\n                 [rowClass]=\"rowClass\"\r\n                 [dataColClass]=\"dataColClass\"\r\n                 [dataColSpacingClass]=\"dataColSpacingClass\"\r\n                 [dataRowClass]=\"dataRowClass\"\r\n                 [typeColClass]=\"typeColClass\"\r\n                 [numberColClass]=\"numberColClass\"\r\n                 [issueDateColClass]=\"issueDateColClass\"\r\n                 [expiryDateColClass]=\"expiryDateColClass\"\r\n                 [actionsColClass]=\"actionsColClass\"\r\n                 [actionsWrapperClass]=\"actionsWrapperClass\"\r\n                 [downloadContainerClass]=\"downloadContainerClass\"\r\n                 (attachmentView)=\"onAttachmentView($event)\"\r\n                 (download)=\"onDownload($event)\">\r\n</hr-document-row>\r\n\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: HRDocumentRowComponent, selector: "hr-document-row", inputs: ["doc", "valueClass", "viewIcon", "downloadIcon", "viewIconClass", "downloadIconClass", "rowClass", "dataColClass", "dataColSpacingClass", "dataRowClass", "typeColClass", "numberColClass", "issueDateColClass", "expiryDateColClass", "actionsColClass", "actionsWrapperClass", "downloadContainerClass"], outputs: ["attachmentView", "download"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: HRDocumentCardComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: HRDocumentCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'hr-document-card', standalone: true, imports: [CommonModule, FontAwesomeModule, HRTranslatePipe, HRDocumentRowComponent], template: "@if(title) {\r\n<div [class]=\"titleContainerClass\">\r\n  <p [class]=\"titleClass\">{{ title }}</p>\r\n</div>\r\n}\r\n\r\n<div [class]=\"rowClass\">\r\n  <div [class]=\"dataColClass\">\r\n    <div class=\"row g-1\">\r\n\r\n      <div [class]=\"typeColClass\">\r\n        <p [class]=\"labelClass\">{{ 'Type' | HRTranslate }}</p>\r\n      </div>\r\n\r\n      <div [class]=\"numberColClass\">\r\n        <p [class]=\"labelClass\">{{ 'DocumentNumber' | HRTranslate }}</p>\r\n      </div>\r\n\r\n      <div [class]=\"issueDateColClass\">\r\n        <p [class]=\"labelClass\">{{ 'IssueDate' | HRTranslate }}</p>\r\n      </div>\r\n\r\n      <div [class]=\"expiryDateColClass\">\r\n        <p [class]=\"labelClass\">{{ 'ExpiryDate' | HRTranslate }}</p>\r\n      </div>\r\n\r\n    </div>\r\n  </div>\r\n\r\n  <div [class]=\"actionsColClass\"></div>\r\n</div>\r\n\r\n@for(doc of documents; track doc) {\r\n\r\n<hr-document-row [doc]=\"doc\"\r\n                 [valueClass]=\"valueClass\"\r\n                 [viewIcon]=\"viewIcon\"\r\n                 [downloadIcon]=\"downloadIcon\"\r\n                 [viewIconClass]=\"viewIconClass\"\r\n                 [downloadIconClass]=\"downloadIconClass\"\r\n                 [rowClass]=\"rowClass\"\r\n                 [dataColClass]=\"dataColClass\"\r\n                 [dataColSpacingClass]=\"dataColSpacingClass\"\r\n                 [dataRowClass]=\"dataRowClass\"\r\n                 [typeColClass]=\"typeColClass\"\r\n                 [numberColClass]=\"numberColClass\"\r\n                 [issueDateColClass]=\"issueDateColClass\"\r\n                 [expiryDateColClass]=\"expiryDateColClass\"\r\n                 [actionsColClass]=\"actionsColClass\"\r\n                 [actionsWrapperClass]=\"actionsWrapperClass\"\r\n                 [downloadContainerClass]=\"downloadContainerClass\"\r\n                 (attachmentView)=\"onAttachmentView($event)\"\r\n                 (download)=\"onDownload($event)\">\r\n</hr-document-row>\r\n\r\n}\r\n" }]
+            args: [{ selector: 'hr-document-card', standalone: true, imports: [CommonModule, FontAwesomeModule, TranslatePipe, HRDocumentRowComponent], template: "@if(title) {\r\n<div [class]=\"titleContainerClass\">\r\n  <p [class]=\"titleClass\">{{ title }}</p>\r\n</div>\r\n}\r\n\r\n<div [class]=\"rowClass\">\r\n  <div [class]=\"dataColClass\">\r\n    <div class=\"row g-1\">\r\n\r\n      <div [class]=\"typeColClass\">\r\n        <p [class]=\"labelClass\">{{ 'Type' | translate }}</p>\r\n      </div>\r\n\r\n      <div [class]=\"numberColClass\">\r\n        <p [class]=\"labelClass\">{{ 'DocumentNumber' | translate }}</p>\r\n      </div>\r\n\r\n      <div [class]=\"issueDateColClass\">\r\n        <p [class]=\"labelClass\">{{ 'IssueDate' | translate }}</p>\r\n      </div>\r\n\r\n      <div [class]=\"expiryDateColClass\">\r\n        <p [class]=\"labelClass\">{{ 'ExpiryDate' | translate }}</p>\r\n      </div>\r\n\r\n    </div>\r\n  </div>\r\n\r\n  <div [class]=\"actionsColClass\"></div>\r\n</div>\r\n\r\n@for(doc of documents; track doc) {\r\n\r\n<hr-document-row [doc]=\"doc\"\r\n                 [valueClass]=\"valueClass\"\r\n                 [viewIcon]=\"viewIcon\"\r\n                 [downloadIcon]=\"downloadIcon\"\r\n                 [viewIconClass]=\"viewIconClass\"\r\n                 [downloadIconClass]=\"downloadIconClass\"\r\n                 [rowClass]=\"rowClass\"\r\n                 [dataColClass]=\"dataColClass\"\r\n                 [dataColSpacingClass]=\"dataColSpacingClass\"\r\n                 [dataRowClass]=\"dataRowClass\"\r\n                 [typeColClass]=\"typeColClass\"\r\n                 [numberColClass]=\"numberColClass\"\r\n                 [issueDateColClass]=\"issueDateColClass\"\r\n                 [expiryDateColClass]=\"expiryDateColClass\"\r\n                 [actionsColClass]=\"actionsColClass\"\r\n                 [actionsWrapperClass]=\"actionsWrapperClass\"\r\n                 [downloadContainerClass]=\"downloadContainerClass\"\r\n                 (attachmentView)=\"onAttachmentView($event)\"\r\n                 (download)=\"onDownload($event)\">\r\n</hr-document-row>\r\n\r\n}\r\n" }]
         }], propDecorators: { title: [{
                 type: Input
             }], documents: [{
@@ -5215,12 +4175,12 @@ class HrDocumentTabletCardComponent {
     onDownload() {
         this.download.emit(this.doc);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: HrDocumentTabletCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: HrDocumentTabletCardComponent, isStandalone: true, selector: "hr-document-tablet-card", inputs: { doc: "doc", isOdd: "isOdd", downloadIcon: "downloadIcon", viewIcon: "viewIcon", cardHeight: "cardHeight", labelClass: "labelClass", valueClass: "valueClass", downloadIconClass: "downloadIconClass", downloadContainerClass: "downloadContainerClass", downloadCountClass: "downloadCountClass", tabletContainerClass: "tabletContainerClass", tabletCardClass: "tabletCardClass", tabletColWithAttachmentClass: "tabletColWithAttachmentClass", tabletColWithoutAttachmentClass: "tabletColWithoutAttachmentClass", tabletActionsColClass: "tabletActionsColClass", tabletBottomRowSpacingClass: "tabletBottomRowSpacingClass" }, outputs: { view: "view", download: "download" }, ngImport: i0, template: "<div [class]=\"tabletContainerClass\">\r\n<div [class]=\"tabletCardClass\" [style.height]=\"cardHeight\"\r\n       [ngClass]=\"{'me-1': !isOdd, 'ms-1': isOdd}\">\r\n \r\n    <div [ngClass]=\"doc.Attachments?.length ? tabletColWithAttachmentClass : tabletColWithoutAttachmentClass\">\r\n<p [class]=\"labelClass\">{{ 'Type' | HRTranslate }}</p>\r\n<p [class]=\"valueClass\">{{ doc.DocumentTypeName }}</p>\r\n</div>\r\n \r\n    <div [ngClass]=\"doc.Attachments?.length ? tabletColWithAttachmentClass : tabletColWithoutAttachmentClass\">\r\n<p [class]=\"labelClass\">{{ 'Number' | HRTranslate }}</p>\r\n<p [class]=\"valueClass\">\r\n        {{ doc.DocumentNumber || '\u2014' }}\r\n</p>\r\n</div>\r\n \r\n    @if(doc.Attachments?.length) {\r\n<div [class]=\"tabletActionsColClass\"> \r\n \r\n      <div [class]=\"downloadContainerClass\"\r\n           (click)=\"onDownload()\">\r\n<fa-icon [icon]=\"downloadIcon\" [class]=\"downloadIconClass\"></fa-icon>\r\n<span [class]=\"downloadCountClass\">\r\n          {{ doc.Attachments.length }}\r\n</span>\r\n</div>\r\n \r\n    </div>\r\n    }\r\n \r\n    <div [class]=\"tabletBottomRowSpacingClass\"\r\n         [ngClass]=\"doc.Attachments?.length ? tabletColWithAttachmentClass : tabletColWithoutAttachmentClass\">\r\n<p [class]=\"labelClass\">{{ 'IssueDate' | HRTranslate }}</p>\r\n<p [class]=\"valueClass\">\r\n        {{ doc.IssueDate ? (doc.IssueDate | date:'dd/MM/yyyy') : '\u2014' }}\r\n</p>\r\n</div>\r\n \r\n    <div [class]=\"tabletBottomRowSpacingClass\"\r\n         [ngClass]=\"doc.Attachments?.length ? tabletColWithAttachmentClass : tabletColWithoutAttachmentClass\">\r\n<p [class]=\"labelClass\">{{ 'ExpiryDate' | HRTranslate }}</p>\r\n<p [class]=\"valueClass\">\r\n        {{ doc.ExpiryDate ? (doc.ExpiryDate | date:'dd/MM/yyyy') : '\u2014' }}\r\n</p>\r\n</div>\r\n \r\n  </div>\r\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i2$2.DatePipe, name: "date" }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }, { kind: "pipe", type: HRTranslatePipe, name: "HRTranslate" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: HrDocumentTabletCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: HrDocumentTabletCardComponent, isStandalone: true, selector: "hr-document-tablet-card", inputs: { doc: "doc", isOdd: "isOdd", downloadIcon: "downloadIcon", viewIcon: "viewIcon", cardHeight: "cardHeight", labelClass: "labelClass", valueClass: "valueClass", downloadIconClass: "downloadIconClass", downloadContainerClass: "downloadContainerClass", downloadCountClass: "downloadCountClass", tabletContainerClass: "tabletContainerClass", tabletCardClass: "tabletCardClass", tabletColWithAttachmentClass: "tabletColWithAttachmentClass", tabletColWithoutAttachmentClass: "tabletColWithoutAttachmentClass", tabletActionsColClass: "tabletActionsColClass", tabletBottomRowSpacingClass: "tabletBottomRowSpacingClass" }, outputs: { view: "view", download: "download" }, ngImport: i0, template: "<div [class]=\"tabletContainerClass\">\r\n<div [class]=\"tabletCardClass\" [style.height]=\"cardHeight\"\r\n       [ngClass]=\"{'me-1': !isOdd, 'ms-1': isOdd}\">\r\n \r\n    <div [ngClass]=\"doc.Attachments?.length ? tabletColWithAttachmentClass : tabletColWithoutAttachmentClass\">\r\n<p [class]=\"labelClass\">{{ 'Type' | translate }}</p>\r\n<p [class]=\"valueClass\">{{ doc.DocumentTypeName }}</p>\r\n</div>\r\n \r\n    <div [ngClass]=\"doc.Attachments?.length ? tabletColWithAttachmentClass : tabletColWithoutAttachmentClass\">\r\n<p [class]=\"labelClass\">{{ 'Number' | translate }}</p>\r\n<p [class]=\"valueClass\">\r\n        {{ doc.DocumentNumber || '\u2014' }}\r\n</p>\r\n</div>\r\n \r\n    @if(doc.Attachments?.length) {\r\n<div [class]=\"tabletActionsColClass\"> \r\n \r\n      <div [class]=\"downloadContainerClass\"\r\n           (click)=\"onDownload()\">\r\n<fa-icon [icon]=\"downloadIcon\" [class]=\"downloadIconClass\"></fa-icon>\r\n<span [class]=\"downloadCountClass\">\r\n          {{ doc.Attachments.length }}\r\n</span>\r\n</div>\r\n \r\n    </div>\r\n    }\r\n \r\n    <div [class]=\"tabletBottomRowSpacingClass\"\r\n         [ngClass]=\"doc.Attachments?.length ? tabletColWithAttachmentClass : tabletColWithoutAttachmentClass\">\r\n<p [class]=\"labelClass\">{{ 'IssueDate' | translate }}</p>\r\n<p [class]=\"valueClass\">\r\n        {{ doc.IssueDate ? (doc.IssueDate | date:'dd/MM/yyyy') : '\u2014' }}\r\n</p>\r\n</div>\r\n \r\n    <div [class]=\"tabletBottomRowSpacingClass\"\r\n         [ngClass]=\"doc.Attachments?.length ? tabletColWithAttachmentClass : tabletColWithoutAttachmentClass\">\r\n<p [class]=\"labelClass\">{{ 'ExpiryDate' | translate }}</p>\r\n<p [class]=\"valueClass\">\r\n        {{ doc.ExpiryDate ? (doc.ExpiryDate | date:'dd/MM/yyyy') : '\u2014' }}\r\n</p>\r\n</div>\r\n \r\n  </div>\r\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i2$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }, { kind: "pipe", type: i2$3.DatePipe, name: "date" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: HrDocumentTabletCardComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: HrDocumentTabletCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'hr-document-tablet-card', standalone: true, imports: [CommonModule, FontAwesomeModule, HRTranslatePipe], template: "<div [class]=\"tabletContainerClass\">\r\n<div [class]=\"tabletCardClass\" [style.height]=\"cardHeight\"\r\n       [ngClass]=\"{'me-1': !isOdd, 'ms-1': isOdd}\">\r\n \r\n    <div [ngClass]=\"doc.Attachments?.length ? tabletColWithAttachmentClass : tabletColWithoutAttachmentClass\">\r\n<p [class]=\"labelClass\">{{ 'Type' | HRTranslate }}</p>\r\n<p [class]=\"valueClass\">{{ doc.DocumentTypeName }}</p>\r\n</div>\r\n \r\n    <div [ngClass]=\"doc.Attachments?.length ? tabletColWithAttachmentClass : tabletColWithoutAttachmentClass\">\r\n<p [class]=\"labelClass\">{{ 'Number' | HRTranslate }}</p>\r\n<p [class]=\"valueClass\">\r\n        {{ doc.DocumentNumber || '\u2014' }}\r\n</p>\r\n</div>\r\n \r\n    @if(doc.Attachments?.length) {\r\n<div [class]=\"tabletActionsColClass\"> \r\n \r\n      <div [class]=\"downloadContainerClass\"\r\n           (click)=\"onDownload()\">\r\n<fa-icon [icon]=\"downloadIcon\" [class]=\"downloadIconClass\"></fa-icon>\r\n<span [class]=\"downloadCountClass\">\r\n          {{ doc.Attachments.length }}\r\n</span>\r\n</div>\r\n \r\n    </div>\r\n    }\r\n \r\n    <div [class]=\"tabletBottomRowSpacingClass\"\r\n         [ngClass]=\"doc.Attachments?.length ? tabletColWithAttachmentClass : tabletColWithoutAttachmentClass\">\r\n<p [class]=\"labelClass\">{{ 'IssueDate' | HRTranslate }}</p>\r\n<p [class]=\"valueClass\">\r\n        {{ doc.IssueDate ? (doc.IssueDate | date:'dd/MM/yyyy') : '\u2014' }}\r\n</p>\r\n</div>\r\n \r\n    <div [class]=\"tabletBottomRowSpacingClass\"\r\n         [ngClass]=\"doc.Attachments?.length ? tabletColWithAttachmentClass : tabletColWithoutAttachmentClass\">\r\n<p [class]=\"labelClass\">{{ 'ExpiryDate' | HRTranslate }}</p>\r\n<p [class]=\"valueClass\">\r\n        {{ doc.ExpiryDate ? (doc.ExpiryDate | date:'dd/MM/yyyy') : '\u2014' }}\r\n</p>\r\n</div>\r\n \r\n  </div>\r\n</div>" }]
+            args: [{ selector: 'hr-document-tablet-card', standalone: true, imports: [CommonModule, FontAwesomeModule, TranslatePipe], template: "<div [class]=\"tabletContainerClass\">\r\n<div [class]=\"tabletCardClass\" [style.height]=\"cardHeight\"\r\n       [ngClass]=\"{'me-1': !isOdd, 'ms-1': isOdd}\">\r\n \r\n    <div [ngClass]=\"doc.Attachments?.length ? tabletColWithAttachmentClass : tabletColWithoutAttachmentClass\">\r\n<p [class]=\"labelClass\">{{ 'Type' | translate }}</p>\r\n<p [class]=\"valueClass\">{{ doc.DocumentTypeName }}</p>\r\n</div>\r\n \r\n    <div [ngClass]=\"doc.Attachments?.length ? tabletColWithAttachmentClass : tabletColWithoutAttachmentClass\">\r\n<p [class]=\"labelClass\">{{ 'Number' | translate }}</p>\r\n<p [class]=\"valueClass\">\r\n        {{ doc.DocumentNumber || '\u2014' }}\r\n</p>\r\n</div>\r\n \r\n    @if(doc.Attachments?.length) {\r\n<div [class]=\"tabletActionsColClass\"> \r\n \r\n      <div [class]=\"downloadContainerClass\"\r\n           (click)=\"onDownload()\">\r\n<fa-icon [icon]=\"downloadIcon\" [class]=\"downloadIconClass\"></fa-icon>\r\n<span [class]=\"downloadCountClass\">\r\n          {{ doc.Attachments.length }}\r\n</span>\r\n</div>\r\n \r\n    </div>\r\n    }\r\n \r\n    <div [class]=\"tabletBottomRowSpacingClass\"\r\n         [ngClass]=\"doc.Attachments?.length ? tabletColWithAttachmentClass : tabletColWithoutAttachmentClass\">\r\n<p [class]=\"labelClass\">{{ 'IssueDate' | translate }}</p>\r\n<p [class]=\"valueClass\">\r\n        {{ doc.IssueDate ? (doc.IssueDate | date:'dd/MM/yyyy') : '\u2014' }}\r\n</p>\r\n</div>\r\n \r\n    <div [class]=\"tabletBottomRowSpacingClass\"\r\n         [ngClass]=\"doc.Attachments?.length ? tabletColWithAttachmentClass : tabletColWithoutAttachmentClass\">\r\n<p [class]=\"labelClass\">{{ 'ExpiryDate' | translate }}</p>\r\n<p [class]=\"valueClass\">\r\n        {{ doc.ExpiryDate ? (doc.ExpiryDate | date:'dd/MM/yyyy') : '\u2014' }}\r\n</p>\r\n</div>\r\n \r\n  </div>\r\n</div>" }]
         }], propDecorators: { doc: [{
                 type: Input
             }], isOdd: [{
@@ -5343,12 +4303,12 @@ class MyProfileDependentsDocumentsWidgetComponent {
             return;
         this.attachmentDownloaded.emit(attachments);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MyProfileDependentsDocumentsWidgetComponent, deps: [{ token: HRSelfWidgetsService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: MyProfileDependentsDocumentsWidgetComponent, isStandalone: true, selector: "hr-my-profile-dependents-documents-widget", inputs: { baseUrl: "baseUrl", sectionTitle: "sectionTitle", icon: "icon", viewIcon: "viewIcon", downloadIcon: "downloadIcon", headerIconClass: "headerIconClass", headerTextClass: "headerTextClass", headerDividerClass: "headerDividerClass", valueClass: "valueClass", viewIconClass: "viewIconClass", downloadIconClass: "downloadIconClass", emptyStateContainerClass: "emptyStateContainerClass", emptyStateTextClass: "emptyStateTextClass", cardClass: "cardClass", topSpacingColClass: "topSpacingColClass", titleContainerClass: "titleContainerClass", titleClass: "titleClass", labelClass: "labelClass", actionsColumnClass: "actionsColumnClass", rowClass: "rowClass", dataColClass: "dataColClass", dataColSpacingClass: "dataColSpacingClass", dataRowClass: "dataRowClass", typeColClass: "typeColClass", numberColClass: "numberColClass", issueDateColClass: "issueDateColClass", expiryDateColClass: "expiryDateColClass", actionsColClass: "actionsColClass", actionsWrapperClass: "actionsWrapperClass", downloadContainerClass: "downloadContainerClass", tabletContainerClass: "tabletContainerClass", tabletCardClass: "tabletCardClass", tabletCardHeight: "tabletCardHeight", tabletColWithAttachmentClass: "tabletColWithAttachmentClass", tabletColWithoutAttachmentClass: "tabletColWithoutAttachmentClass", tabletActionsColClass: "tabletActionsColClass", tabletBottomRowSpacingClass: "tabletBottomRowSpacingClass", tabletDownloadCountClass: "tabletDownloadCountClass", isMobile: "isMobile", isTablet: "isTablet" }, outputs: { isLoadingChanged: "isLoadingChanged", attachmentViewed: "attachmentViewed", attachmentDownloaded: "attachmentDownloaded", errorOccurred: "errorOccurred" }, ngImport: i0, template: "<sky-section-divider [fontAwesomeIcon]=\"icon\"\r\n                     [text]=\"(sectionTitle | HRTranslate | uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n<div class=\"mt-4\">\r\n\r\n  @if(groups.length) {\r\n\r\n  @for(group of groups; track group; let first = $first) {\r\n\r\n  <div [class]=\"!(isTablet || isMobile) ? cardClass : ''\" [class.mt-3]=\"!first\">\r\n\r\n    @if(!(isTablet || isMobile)) {\r\n\r\n    <hr-document-card [title]=\"group.DependentName + ' (' + group.DependentTypeName + ')'\"\r\n                      [documents]=\"group.Documents\"\r\n                      [valueClass]=\"valueClass\"\r\n                      [viewIcon]=\"viewIcon\"\r\n                      [downloadIcon]=\"downloadIcon\"\r\n                      [viewIconClass]=\"viewIconClass\"\r\n                      [downloadIconClass]=\"downloadIconClass\"\r\n                      [titleContainerClass]=\"titleContainerClass\"\r\n                      [titleClass]=\"titleClass\"\r\n                      [labelClass]=\"labelClass\"\r\n                      [rowClass]=\"rowClass\"\r\n                      [dataColClass]=\"dataColClass\"\r\n                      [dataColSpacingClass]=\"dataColSpacingClass\"\r\n                      [dataRowClass]=\"dataRowClass\"\r\n                      [typeColClass]=\"typeColClass\"\r\n                      [numberColClass]=\"numberColClass\"\r\n                      [issueDateColClass]=\"issueDateColClass\"\r\n                      [expiryDateColClass]=\"expiryDateColClass\"\r\n                      [actionsColClass]=\"actionsColClass\"\r\n                      [actionsWrapperClass]=\"actionsWrapperClass\"\r\n                      [downloadContainerClass]=\"downloadContainerClass\"\r\n                      (attachmentView)=\"onAttachmentView($event)\"\r\n                      (download)=\"onDownload($event)\">\r\n    </hr-document-card>\r\n    }\r\n    @else{\r\n    <div [class]=\"titleContainerClass\">\r\n      <p [class]=\"titleClass\">\r\n        {{ group.DependentName }} ({{ group.DependentTypeName }})\r\n      </p>\r\n    </div>\r\n    <div class=\"row  mx-1\">\r\n      @for(doc of group.Documents; track doc; let odd = $odd) {\r\n      <div class=\"col-6 mb-2\">\r\n        <hr-document-tablet-card [doc]=\"doc\"\r\n                                 [isOdd]=\"odd\"\r\n                                 [viewIcon]=\"viewIcon\"\r\n                                 [downloadIcon]=\"downloadIcon\"\r\n                                 [labelClass]=\"labelClass\"\r\n                                 [valueClass]=\"valueClass\"\r\n                                 [downloadIconClass]=\"downloadIconClass\"\r\n                                 [downloadContainerClass]=\"downloadContainerClass\"\r\n                                 [downloadCountClass]=\"tabletDownloadCountClass\"\r\n                                 [tabletContainerClass]=\"tabletContainerClass\"\r\n                                 [tabletCardClass]=\"tabletCardClass\"\r\n                                 [cardHeight]=\"tabletCardHeight\"\r\n                                 [tabletColWithAttachmentClass]=\"tabletColWithAttachmentClass\"\r\n                                 [tabletColWithoutAttachmentClass]=\"tabletColWithoutAttachmentClass\"\r\n                                 [tabletActionsColClass]=\"tabletActionsColClass\"\r\n                                 [tabletBottomRowSpacingClass]=\"tabletBottomRowSpacingClass\"\r\n                                 (view)=\"onAttachmentView(doc)\"\r\n                                 (download)=\"onDownload(doc)\">\r\n        </hr-document-tablet-card>\r\n      </div>\r\n      }\r\n    </div>\r\n    }\r\n  </div>\r\n\r\n  }\r\n\r\n  } @else {\r\n  <sky-empty-design-card [visibleIcon]=\"false\"\r\n                         [visibleQuickAction]=\"false\"\r\n                         [containerClass]=\"emptyStateContainerClass\"\r\n                         [emptyTextClass]=\"emptyStateTextClass\"\r\n                         [emptyText]=\"isLoading ? ((sectionTitle | HRTranslate) + ' ' + ('IsLoading' | HRTranslate)) : ('ThereAreNoDependentsDocumentsYet' | HRTranslate)\">\r\n  </sky-empty-design-card>\r\n\r\n  }\r\n\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i2$2.UpperCasePipe, name: "uppercase" }, { kind: "component", type: SkySectionDividerComponent, selector: "sky-section-divider", inputs: ["text", "fontAwesomeIcon", "textClass", "dividerClass", "iconClass"] }, { kind: "pipe", type: HRTranslatePipe, name: "HRTranslate" }, { kind: "component", type: SkyEmptyDesignCardComponent, selector: "sky-empty-design-card", inputs: ["emptyIcon", "emptyIconClass", "emptyText", "emptyTextClass", "actionTitle", "actionIcon", "actionDisabled", "textColor", "disabledTitleClass", "activeTitleClass", "disabledIconClass", "activeIconClass", "actionClass", "containerClass", "cardBodyClass", "cardBodyContainerClass", "visibleIcon", "visibleQuickAction"], outputs: ["onActionClick"] }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: HRDocumentCardComponent, selector: "hr-document-card", inputs: ["title", "documents", "titleContainerClass", "titleClass", "valueClass", "viewIcon", "downloadIcon", "viewIconClass", "downloadIconClass", "labelClass", "rowClass", "dataColClass", "dataColSpacingClass", "dataRowClass", "typeColClass", "numberColClass", "issueDateColClass", "expiryDateColClass", "actionsColClass", "actionsWrapperClass", "downloadContainerClass"], outputs: ["attachmentView", "download"] }, { kind: "component", type: HrDocumentTabletCardComponent, selector: "hr-document-tablet-card", inputs: ["doc", "isOdd", "downloadIcon", "viewIcon", "cardHeight", "labelClass", "valueClass", "downloadIconClass", "downloadContainerClass", "downloadCountClass", "tabletContainerClass", "tabletCardClass", "tabletColWithAttachmentClass", "tabletColWithoutAttachmentClass", "tabletActionsColClass", "tabletBottomRowSpacingClass"], outputs: ["view", "download"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MyProfileDependentsDocumentsWidgetComponent, deps: [{ token: HRSelfWidgetsService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: MyProfileDependentsDocumentsWidgetComponent, isStandalone: true, selector: "hr-my-profile-dependents-documents-widget", inputs: { baseUrl: "baseUrl", sectionTitle: "sectionTitle", icon: "icon", viewIcon: "viewIcon", downloadIcon: "downloadIcon", headerIconClass: "headerIconClass", headerTextClass: "headerTextClass", headerDividerClass: "headerDividerClass", valueClass: "valueClass", viewIconClass: "viewIconClass", downloadIconClass: "downloadIconClass", emptyStateContainerClass: "emptyStateContainerClass", emptyStateTextClass: "emptyStateTextClass", cardClass: "cardClass", topSpacingColClass: "topSpacingColClass", titleContainerClass: "titleContainerClass", titleClass: "titleClass", labelClass: "labelClass", actionsColumnClass: "actionsColumnClass", rowClass: "rowClass", dataColClass: "dataColClass", dataColSpacingClass: "dataColSpacingClass", dataRowClass: "dataRowClass", typeColClass: "typeColClass", numberColClass: "numberColClass", issueDateColClass: "issueDateColClass", expiryDateColClass: "expiryDateColClass", actionsColClass: "actionsColClass", actionsWrapperClass: "actionsWrapperClass", downloadContainerClass: "downloadContainerClass", tabletContainerClass: "tabletContainerClass", tabletCardClass: "tabletCardClass", tabletCardHeight: "tabletCardHeight", tabletColWithAttachmentClass: "tabletColWithAttachmentClass", tabletColWithoutAttachmentClass: "tabletColWithoutAttachmentClass", tabletActionsColClass: "tabletActionsColClass", tabletBottomRowSpacingClass: "tabletBottomRowSpacingClass", tabletDownloadCountClass: "tabletDownloadCountClass", isMobile: "isMobile", isTablet: "isTablet" }, outputs: { isLoadingChanged: "isLoadingChanged", attachmentViewed: "attachmentViewed", attachmentDownloaded: "attachmentDownloaded", errorOccurred: "errorOccurred" }, ngImport: i0, template: "<sky-section-divider [fontAwesomeIcon]=\"icon\"\r\n                     [text]=\"(sectionTitle | translate | uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n<div class=\"mt-4\">\r\n\r\n  @if(groups.length) {\r\n\r\n  @for(group of groups; track group; let first = $first) {\r\n\r\n  <div [class]=\"!(isTablet || isMobile) ? cardClass : ''\" [class.mt-3]=\"!first\">\r\n\r\n    @if(!(isTablet || isMobile)) {\r\n\r\n    <hr-document-card [title]=\"group.DependentName + ' (' + group.DependentTypeName + ')'\"\r\n                      [documents]=\"group.Documents\"\r\n                      [valueClass]=\"valueClass\"\r\n                      [viewIcon]=\"viewIcon\"\r\n                      [downloadIcon]=\"downloadIcon\"\r\n                      [viewIconClass]=\"viewIconClass\"\r\n                      [downloadIconClass]=\"downloadIconClass\"\r\n                      [titleContainerClass]=\"titleContainerClass\"\r\n                      [titleClass]=\"titleClass\"\r\n                      [labelClass]=\"labelClass\"\r\n                      [rowClass]=\"rowClass\"\r\n                      [dataColClass]=\"dataColClass\"\r\n                      [dataColSpacingClass]=\"dataColSpacingClass\"\r\n                      [dataRowClass]=\"dataRowClass\"\r\n                      [typeColClass]=\"typeColClass\"\r\n                      [numberColClass]=\"numberColClass\"\r\n                      [issueDateColClass]=\"issueDateColClass\"\r\n                      [expiryDateColClass]=\"expiryDateColClass\"\r\n                      [actionsColClass]=\"actionsColClass\"\r\n                      [actionsWrapperClass]=\"actionsWrapperClass\"\r\n                      [downloadContainerClass]=\"downloadContainerClass\"\r\n                      (attachmentView)=\"onAttachmentView($event)\"\r\n                      (download)=\"onDownload($event)\">\r\n    </hr-document-card>\r\n    }\r\n    @else{\r\n    <div [class]=\"titleContainerClass\">\r\n      <p [class]=\"titleClass\">\r\n        {{ group.DependentName }} ({{ group.DependentTypeName }})\r\n      </p>\r\n    </div>\r\n    <div class=\"row  mx-1\">\r\n      @for(doc of group.Documents; track doc; let odd = $odd) {\r\n      <div class=\"col-6 mb-2\">\r\n        <hr-document-tablet-card [doc]=\"doc\"\r\n                                 [isOdd]=\"odd\"\r\n                                 [viewIcon]=\"viewIcon\"\r\n                                 [downloadIcon]=\"downloadIcon\"\r\n                                 [labelClass]=\"labelClass\"\r\n                                 [valueClass]=\"valueClass\"\r\n                                 [downloadIconClass]=\"downloadIconClass\"\r\n                                 [downloadContainerClass]=\"downloadContainerClass\"\r\n                                 [downloadCountClass]=\"tabletDownloadCountClass\"\r\n                                 [tabletContainerClass]=\"tabletContainerClass\"\r\n                                 [tabletCardClass]=\"tabletCardClass\"\r\n                                 [cardHeight]=\"tabletCardHeight\"\r\n                                 [tabletColWithAttachmentClass]=\"tabletColWithAttachmentClass\"\r\n                                 [tabletColWithoutAttachmentClass]=\"tabletColWithoutAttachmentClass\"\r\n                                 [tabletActionsColClass]=\"tabletActionsColClass\"\r\n                                 [tabletBottomRowSpacingClass]=\"tabletBottomRowSpacingClass\"\r\n                                 (view)=\"onAttachmentView(doc)\"\r\n                                 (download)=\"onDownload(doc)\">\r\n        </hr-document-tablet-card>\r\n      </div>\r\n      }\r\n    </div>\r\n    }\r\n  </div>\r\n\r\n  }\r\n\r\n  } @else {\r\n  <sky-empty-design-card [visibleIcon]=\"false\"\r\n                         [visibleQuickAction]=\"false\"\r\n                         [containerClass]=\"emptyStateContainerClass\"\r\n                         [emptyTextClass]=\"emptyStateTextClass\"\r\n                         [emptyText]=\"isLoading ? ((sectionTitle | translate) + ' ' + ('IsLoading' | translate)) : ('ThereAreNoDependentsDocumentsYet' | translate)\">\r\n  </sky-empty-design-card>\r\n\r\n  }\r\n\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: SkySectionDividerComponent, selector: "sky-section-divider", inputs: ["text", "fontAwesomeIcon", "textClass", "dividerClass", "iconClass"] }, { kind: "component", type: SkyEmptyDesignCardComponent, selector: "sky-empty-design-card", inputs: ["emptyIcon", "emptyIconClass", "emptyText", "emptyTextClass", "actionTitle", "actionIcon", "actionDisabled", "textColor", "disabledTitleClass", "activeTitleClass", "disabledIconClass", "activeIconClass", "actionClass", "containerClass", "cardBodyClass", "cardBodyContainerClass", "visibleIcon", "visibleQuickAction"], outputs: ["onActionClick"] }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: HRDocumentCardComponent, selector: "hr-document-card", inputs: ["title", "documents", "titleContainerClass", "titleClass", "valueClass", "viewIcon", "downloadIcon", "viewIconClass", "downloadIconClass", "labelClass", "rowClass", "dataColClass", "dataColSpacingClass", "dataRowClass", "typeColClass", "numberColClass", "issueDateColClass", "expiryDateColClass", "actionsColClass", "actionsWrapperClass", "downloadContainerClass"], outputs: ["attachmentView", "download"] }, { kind: "component", type: HrDocumentTabletCardComponent, selector: "hr-document-tablet-card", inputs: ["doc", "isOdd", "downloadIcon", "viewIcon", "cardHeight", "labelClass", "valueClass", "downloadIconClass", "downloadContainerClass", "downloadCountClass", "tabletContainerClass", "tabletCardClass", "tabletColWithAttachmentClass", "tabletColWithoutAttachmentClass", "tabletActionsColClass", "tabletBottomRowSpacingClass"], outputs: ["view", "download"] }, { kind: "pipe", type: i2$3.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MyProfileDependentsDocumentsWidgetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MyProfileDependentsDocumentsWidgetComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'hr-my-profile-dependents-documents-widget', standalone: true, imports: [CommonModule, SkySectionDividerComponent, HRTranslatePipe, SkyEmptyDesignCardComponent, FontAwesomeModule, HRInfoFieldComponent, HRDocumentCardComponent, HrDocumentTabletCardComponent], template: "<sky-section-divider [fontAwesomeIcon]=\"icon\"\r\n                     [text]=\"(sectionTitle | HRTranslate | uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n<div class=\"mt-4\">\r\n\r\n  @if(groups.length) {\r\n\r\n  @for(group of groups; track group; let first = $first) {\r\n\r\n  <div [class]=\"!(isTablet || isMobile) ? cardClass : ''\" [class.mt-3]=\"!first\">\r\n\r\n    @if(!(isTablet || isMobile)) {\r\n\r\n    <hr-document-card [title]=\"group.DependentName + ' (' + group.DependentTypeName + ')'\"\r\n                      [documents]=\"group.Documents\"\r\n                      [valueClass]=\"valueClass\"\r\n                      [viewIcon]=\"viewIcon\"\r\n                      [downloadIcon]=\"downloadIcon\"\r\n                      [viewIconClass]=\"viewIconClass\"\r\n                      [downloadIconClass]=\"downloadIconClass\"\r\n                      [titleContainerClass]=\"titleContainerClass\"\r\n                      [titleClass]=\"titleClass\"\r\n                      [labelClass]=\"labelClass\"\r\n                      [rowClass]=\"rowClass\"\r\n                      [dataColClass]=\"dataColClass\"\r\n                      [dataColSpacingClass]=\"dataColSpacingClass\"\r\n                      [dataRowClass]=\"dataRowClass\"\r\n                      [typeColClass]=\"typeColClass\"\r\n                      [numberColClass]=\"numberColClass\"\r\n                      [issueDateColClass]=\"issueDateColClass\"\r\n                      [expiryDateColClass]=\"expiryDateColClass\"\r\n                      [actionsColClass]=\"actionsColClass\"\r\n                      [actionsWrapperClass]=\"actionsWrapperClass\"\r\n                      [downloadContainerClass]=\"downloadContainerClass\"\r\n                      (attachmentView)=\"onAttachmentView($event)\"\r\n                      (download)=\"onDownload($event)\">\r\n    </hr-document-card>\r\n    }\r\n    @else{\r\n    <div [class]=\"titleContainerClass\">\r\n      <p [class]=\"titleClass\">\r\n        {{ group.DependentName }} ({{ group.DependentTypeName }})\r\n      </p>\r\n    </div>\r\n    <div class=\"row  mx-1\">\r\n      @for(doc of group.Documents; track doc; let odd = $odd) {\r\n      <div class=\"col-6 mb-2\">\r\n        <hr-document-tablet-card [doc]=\"doc\"\r\n                                 [isOdd]=\"odd\"\r\n                                 [viewIcon]=\"viewIcon\"\r\n                                 [downloadIcon]=\"downloadIcon\"\r\n                                 [labelClass]=\"labelClass\"\r\n                                 [valueClass]=\"valueClass\"\r\n                                 [downloadIconClass]=\"downloadIconClass\"\r\n                                 [downloadContainerClass]=\"downloadContainerClass\"\r\n                                 [downloadCountClass]=\"tabletDownloadCountClass\"\r\n                                 [tabletContainerClass]=\"tabletContainerClass\"\r\n                                 [tabletCardClass]=\"tabletCardClass\"\r\n                                 [cardHeight]=\"tabletCardHeight\"\r\n                                 [tabletColWithAttachmentClass]=\"tabletColWithAttachmentClass\"\r\n                                 [tabletColWithoutAttachmentClass]=\"tabletColWithoutAttachmentClass\"\r\n                                 [tabletActionsColClass]=\"tabletActionsColClass\"\r\n                                 [tabletBottomRowSpacingClass]=\"tabletBottomRowSpacingClass\"\r\n                                 (view)=\"onAttachmentView(doc)\"\r\n                                 (download)=\"onDownload(doc)\">\r\n        </hr-document-tablet-card>\r\n      </div>\r\n      }\r\n    </div>\r\n    }\r\n  </div>\r\n\r\n  }\r\n\r\n  } @else {\r\n  <sky-empty-design-card [visibleIcon]=\"false\"\r\n                         [visibleQuickAction]=\"false\"\r\n                         [containerClass]=\"emptyStateContainerClass\"\r\n                         [emptyTextClass]=\"emptyStateTextClass\"\r\n                         [emptyText]=\"isLoading ? ((sectionTitle | HRTranslate) + ' ' + ('IsLoading' | HRTranslate)) : ('ThereAreNoDependentsDocumentsYet' | HRTranslate)\">\r\n  </sky-empty-design-card>\r\n\r\n  }\r\n\r\n</div>\r\n" }]
+            args: [{ selector: 'hr-my-profile-dependents-documents-widget', standalone: true, imports: [CommonModule, SkySectionDividerComponent, TranslatePipe, SkyEmptyDesignCardComponent, FontAwesomeModule, HRInfoFieldComponent, HRDocumentCardComponent, HrDocumentTabletCardComponent], template: "<sky-section-divider [fontAwesomeIcon]=\"icon\"\r\n                     [text]=\"(sectionTitle | translate | uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n<div class=\"mt-4\">\r\n\r\n  @if(groups.length) {\r\n\r\n  @for(group of groups; track group; let first = $first) {\r\n\r\n  <div [class]=\"!(isTablet || isMobile) ? cardClass : ''\" [class.mt-3]=\"!first\">\r\n\r\n    @if(!(isTablet || isMobile)) {\r\n\r\n    <hr-document-card [title]=\"group.DependentName + ' (' + group.DependentTypeName + ')'\"\r\n                      [documents]=\"group.Documents\"\r\n                      [valueClass]=\"valueClass\"\r\n                      [viewIcon]=\"viewIcon\"\r\n                      [downloadIcon]=\"downloadIcon\"\r\n                      [viewIconClass]=\"viewIconClass\"\r\n                      [downloadIconClass]=\"downloadIconClass\"\r\n                      [titleContainerClass]=\"titleContainerClass\"\r\n                      [titleClass]=\"titleClass\"\r\n                      [labelClass]=\"labelClass\"\r\n                      [rowClass]=\"rowClass\"\r\n                      [dataColClass]=\"dataColClass\"\r\n                      [dataColSpacingClass]=\"dataColSpacingClass\"\r\n                      [dataRowClass]=\"dataRowClass\"\r\n                      [typeColClass]=\"typeColClass\"\r\n                      [numberColClass]=\"numberColClass\"\r\n                      [issueDateColClass]=\"issueDateColClass\"\r\n                      [expiryDateColClass]=\"expiryDateColClass\"\r\n                      [actionsColClass]=\"actionsColClass\"\r\n                      [actionsWrapperClass]=\"actionsWrapperClass\"\r\n                      [downloadContainerClass]=\"downloadContainerClass\"\r\n                      (attachmentView)=\"onAttachmentView($event)\"\r\n                      (download)=\"onDownload($event)\">\r\n    </hr-document-card>\r\n    }\r\n    @else{\r\n    <div [class]=\"titleContainerClass\">\r\n      <p [class]=\"titleClass\">\r\n        {{ group.DependentName }} ({{ group.DependentTypeName }})\r\n      </p>\r\n    </div>\r\n    <div class=\"row  mx-1\">\r\n      @for(doc of group.Documents; track doc; let odd = $odd) {\r\n      <div class=\"col-6 mb-2\">\r\n        <hr-document-tablet-card [doc]=\"doc\"\r\n                                 [isOdd]=\"odd\"\r\n                                 [viewIcon]=\"viewIcon\"\r\n                                 [downloadIcon]=\"downloadIcon\"\r\n                                 [labelClass]=\"labelClass\"\r\n                                 [valueClass]=\"valueClass\"\r\n                                 [downloadIconClass]=\"downloadIconClass\"\r\n                                 [downloadContainerClass]=\"downloadContainerClass\"\r\n                                 [downloadCountClass]=\"tabletDownloadCountClass\"\r\n                                 [tabletContainerClass]=\"tabletContainerClass\"\r\n                                 [tabletCardClass]=\"tabletCardClass\"\r\n                                 [cardHeight]=\"tabletCardHeight\"\r\n                                 [tabletColWithAttachmentClass]=\"tabletColWithAttachmentClass\"\r\n                                 [tabletColWithoutAttachmentClass]=\"tabletColWithoutAttachmentClass\"\r\n                                 [tabletActionsColClass]=\"tabletActionsColClass\"\r\n                                 [tabletBottomRowSpacingClass]=\"tabletBottomRowSpacingClass\"\r\n                                 (view)=\"onAttachmentView(doc)\"\r\n                                 (download)=\"onDownload(doc)\">\r\n        </hr-document-tablet-card>\r\n      </div>\r\n      }\r\n    </div>\r\n    }\r\n  </div>\r\n\r\n  }\r\n\r\n  } @else {\r\n  <sky-empty-design-card [visibleIcon]=\"false\"\r\n                         [visibleQuickAction]=\"false\"\r\n                         [containerClass]=\"emptyStateContainerClass\"\r\n                         [emptyTextClass]=\"emptyStateTextClass\"\r\n                         [emptyText]=\"isLoading ? ((sectionTitle | translate) + ' ' + ('IsLoading' | translate)) : ('ThereAreNoDependentsDocumentsYet' | translate)\">\r\n  </sky-empty-design-card>\r\n\r\n  }\r\n\r\n</div>\r\n" }]
         }], ctorParameters: () => [{ type: HRSelfWidgetsService }], propDecorators: { baseUrl: [{
                 type: Input
             }], sectionTitle: [{
@@ -5522,12 +4482,12 @@ class MyProfilePersonalDocumentsWidgetComponent {
             return;
         this.attachmentDownloaded.emit(attachments);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MyProfilePersonalDocumentsWidgetComponent, deps: [{ token: HRSelfWidgetsService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: MyProfilePersonalDocumentsWidgetComponent, isStandalone: true, selector: "hr-my-profile-personal-documents-widget", inputs: { baseUrl: "baseUrl", employeeName: "employeeName", sectionTitle: "sectionTitle", icon: "icon", viewIcon: "viewIcon", downloadIcon: "downloadIcon", headerIconClass: "headerIconClass", headerTextClass: "headerTextClass", headerDividerClass: "headerDividerClass", valueClass: "valueClass", viewIconClass: "viewIconClass", downloadIconClass: "downloadIconClass", emptyStateContainerClass: "emptyStateContainerClass", emptyStateTextClass: "emptyStateTextClass", cardClass: "cardClass", topSpacingColClass: "topSpacingColClass", titleContainerClass: "titleContainerClass", titleClass: "titleClass", labelClass: "labelClass", actionsColumnClass: "actionsColumnClass", rowClass: "rowClass", dataColClass: "dataColClass", dataColSpacingClass: "dataColSpacingClass", dataRowClass: "dataRowClass", typeColClass: "typeColClass", numberColClass: "numberColClass", issueDateColClass: "issueDateColClass", expiryDateColClass: "expiryDateColClass", actionsColClass: "actionsColClass", actionsWrapperClass: "actionsWrapperClass", downloadContainerClass: "downloadContainerClass", tabletContainerClass: "tabletContainerClass", tabletCardClass: "tabletCardClass", tabletCardHeight: "tabletCardHeight", tabletColWithAttachmentClass: "tabletColWithAttachmentClass", tabletColWithoutAttachmentClass: "tabletColWithoutAttachmentClass", tabletActionsColClass: "tabletActionsColClass", tabletBottomRowSpacingClass: "tabletBottomRowSpacingClass", tabletDownloadCountClass: "tabletDownloadCountClass", isMobile: "isMobile", isTablet: "isTablet" }, outputs: { isLoadingChanged: "isLoadingChanged", attachmentViewed: "attachmentViewed", attachmentDownloaded: "attachmentDownloaded", errorOccurred: "errorOccurred" }, ngImport: i0, template: "<sky-section-divider [fontAwesomeIcon]=\"icon\"\r\n                     [text]=\"(sectionTitle | HRTranslate | uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n<div class=\"mt-4\">\r\n\r\n  @if(documents.length) {\r\n\r\n  <div [class]=\"!(isTablet || isMobile) ? cardClass : ''\">\r\n    @if(!(isTablet || isMobile)) {\r\n\r\n    <hr-document-card [title]=\"employeeName + ' (' + ('Me' | HRTranslate) + ')'\"\r\n                      [documents]=\"documents\"\r\n                      [valueClass]=\"valueClass\"\r\n                      [viewIcon]=\"viewIcon\"\r\n                      [downloadIcon]=\"downloadIcon\"\r\n                      [viewIconClass]=\"viewIconClass\"\r\n                      [downloadIconClass]=\"downloadIconClass\"\r\n                      [titleContainerClass]=\"titleContainerClass\"\r\n                      [titleClass]=\"titleClass\"\r\n                      [labelClass]=\"labelClass\"\r\n                      [rowClass]=\"rowClass\"\r\n                      [dataColClass]=\"dataColClass\"\r\n                      [dataColSpacingClass]=\"dataColSpacingClass\"\r\n                      [dataRowClass]=\"dataRowClass\"\r\n                      [typeColClass]=\"typeColClass\"\r\n                      [numberColClass]=\"numberColClass\"\r\n                      [issueDateColClass]=\"issueDateColClass\"\r\n                      [expiryDateColClass]=\"expiryDateColClass\"\r\n                      [actionsColClass]=\"actionsColClass\"\r\n                      [actionsWrapperClass]=\"actionsWrapperClass\"\r\n                      [downloadContainerClass]=\"downloadContainerClass\"\r\n                      (attachmentView)=\"onAttachmentView($event)\"\r\n                      (download)=\"onDownload($event)\">\r\n    </hr-document-card>\r\n    }\r\n    @else {\r\n    <div [class]=\"titleContainerClass\">\r\n      <p [class]=\"titleClass\">\r\n        {{ employeeName }} ({{ 'Me' | HRTranslate}})\r\n      </p>\r\n    </div>\r\n\r\n    <div class=\"row mx-1\">\r\n      @for(doc of documents; track doc; let odd = $odd) {\r\n      <div class=\"col-6 mb-2\">\r\n        <hr-document-tablet-card [doc]=\"doc\"\r\n                                 [isOdd]=\"odd\"\r\n                                 [viewIcon]=\"viewIcon\"\r\n                                 [downloadIcon]=\"downloadIcon\"\r\n                                 [labelClass]=\"labelClass\"\r\n                                 [valueClass]=\"valueClass\"\r\n                                 [downloadIconClass]=\"downloadIconClass\"\r\n                                 [downloadContainerClass]=\"downloadContainerClass\"\r\n                                 [downloadCountClass]=\"tabletDownloadCountClass\"\r\n                                 [tabletContainerClass]=\"tabletContainerClass\"\r\n                                 [tabletCardClass]=\"tabletCardClass\"\r\n                                 [cardHeight]=\"tabletCardHeight\"\r\n                                 [tabletColWithAttachmentClass]=\"tabletColWithAttachmentClass\"\r\n                                 [tabletColWithoutAttachmentClass]=\"tabletColWithoutAttachmentClass\"\r\n                                 [tabletActionsColClass]=\"tabletActionsColClass\"\r\n                                 [tabletBottomRowSpacingClass]=\"tabletBottomRowSpacingClass\"\r\n                                 (view)=\"onAttachmentView(doc)\"\r\n                                 (download)=\"onDownload(doc)\">\r\n        </hr-document-tablet-card>\r\n      </div>\r\n      }\r\n    </div>\r\n\r\n    }\r\n  </div>\r\n\r\n\r\n  } @else {\r\n  <sky-empty-design-card [visibleIcon]=\"false\"\r\n                         [visibleQuickAction]=\"false\"\r\n                         [containerClass]=\"emptyStateContainerClass\"\r\n                         [emptyTextClass]=\"emptyStateTextClass\"\r\n                         [emptyText]=\"isLoading ? ((sectionTitle | HRTranslate) + ' ' + ('IsLoading' | HRTranslate)) : ('ThereAreNoEmployeeDocumentsYet' | HRTranslate)\">\r\n  </sky-empty-design-card>\r\n  }\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i2$2.UpperCasePipe, name: "uppercase" }, { kind: "component", type: SkySectionDividerComponent, selector: "sky-section-divider", inputs: ["text", "fontAwesomeIcon", "textClass", "dividerClass", "iconClass"] }, { kind: "pipe", type: HRTranslatePipe, name: "HRTranslate" }, { kind: "component", type: SkyEmptyDesignCardComponent, selector: "sky-empty-design-card", inputs: ["emptyIcon", "emptyIconClass", "emptyText", "emptyTextClass", "actionTitle", "actionIcon", "actionDisabled", "textColor", "disabledTitleClass", "activeTitleClass", "disabledIconClass", "activeIconClass", "actionClass", "containerClass", "cardBodyClass", "cardBodyContainerClass", "visibleIcon", "visibleQuickAction"], outputs: ["onActionClick"] }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: HRDocumentCardComponent, selector: "hr-document-card", inputs: ["title", "documents", "titleContainerClass", "titleClass", "valueClass", "viewIcon", "downloadIcon", "viewIconClass", "downloadIconClass", "labelClass", "rowClass", "dataColClass", "dataColSpacingClass", "dataRowClass", "typeColClass", "numberColClass", "issueDateColClass", "expiryDateColClass", "actionsColClass", "actionsWrapperClass", "downloadContainerClass"], outputs: ["attachmentView", "download"] }, { kind: "component", type: HrDocumentTabletCardComponent, selector: "hr-document-tablet-card", inputs: ["doc", "isOdd", "downloadIcon", "viewIcon", "cardHeight", "labelClass", "valueClass", "downloadIconClass", "downloadContainerClass", "downloadCountClass", "tabletContainerClass", "tabletCardClass", "tabletColWithAttachmentClass", "tabletColWithoutAttachmentClass", "tabletActionsColClass", "tabletBottomRowSpacingClass"], outputs: ["view", "download"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MyProfilePersonalDocumentsWidgetComponent, deps: [{ token: HRSelfWidgetsService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: MyProfilePersonalDocumentsWidgetComponent, isStandalone: true, selector: "hr-my-profile-personal-documents-widget", inputs: { baseUrl: "baseUrl", employeeName: "employeeName", sectionTitle: "sectionTitle", icon: "icon", viewIcon: "viewIcon", downloadIcon: "downloadIcon", headerIconClass: "headerIconClass", headerTextClass: "headerTextClass", headerDividerClass: "headerDividerClass", valueClass: "valueClass", viewIconClass: "viewIconClass", downloadIconClass: "downloadIconClass", emptyStateContainerClass: "emptyStateContainerClass", emptyStateTextClass: "emptyStateTextClass", cardClass: "cardClass", topSpacingColClass: "topSpacingColClass", titleContainerClass: "titleContainerClass", titleClass: "titleClass", labelClass: "labelClass", actionsColumnClass: "actionsColumnClass", rowClass: "rowClass", dataColClass: "dataColClass", dataColSpacingClass: "dataColSpacingClass", dataRowClass: "dataRowClass", typeColClass: "typeColClass", numberColClass: "numberColClass", issueDateColClass: "issueDateColClass", expiryDateColClass: "expiryDateColClass", actionsColClass: "actionsColClass", actionsWrapperClass: "actionsWrapperClass", downloadContainerClass: "downloadContainerClass", tabletContainerClass: "tabletContainerClass", tabletCardClass: "tabletCardClass", tabletCardHeight: "tabletCardHeight", tabletColWithAttachmentClass: "tabletColWithAttachmentClass", tabletColWithoutAttachmentClass: "tabletColWithoutAttachmentClass", tabletActionsColClass: "tabletActionsColClass", tabletBottomRowSpacingClass: "tabletBottomRowSpacingClass", tabletDownloadCountClass: "tabletDownloadCountClass", isMobile: "isMobile", isTablet: "isTablet" }, outputs: { isLoadingChanged: "isLoadingChanged", attachmentViewed: "attachmentViewed", attachmentDownloaded: "attachmentDownloaded", errorOccurred: "errorOccurred" }, ngImport: i0, template: "<sky-section-divider [fontAwesomeIcon]=\"icon\"\r\n                     [text]=\"(sectionTitle | translate | uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n<div class=\"mt-4\">\r\n\r\n  @if(documents.length) {\r\n\r\n  <div [class]=\"!(isTablet || isMobile) ? cardClass : ''\">\r\n    @if(!(isTablet || isMobile)) {\r\n\r\n    <hr-document-card [title]=\"employeeName + ' (' + ('Me' | translate) + ')'\"\r\n                      [documents]=\"documents\"\r\n                      [valueClass]=\"valueClass\"\r\n                      [viewIcon]=\"viewIcon\"\r\n                      [downloadIcon]=\"downloadIcon\"\r\n                      [viewIconClass]=\"viewIconClass\"\r\n                      [downloadIconClass]=\"downloadIconClass\"\r\n                      [titleContainerClass]=\"titleContainerClass\"\r\n                      [titleClass]=\"titleClass\"\r\n                      [labelClass]=\"labelClass\"\r\n                      [rowClass]=\"rowClass\"\r\n                      [dataColClass]=\"dataColClass\"\r\n                      [dataColSpacingClass]=\"dataColSpacingClass\"\r\n                      [dataRowClass]=\"dataRowClass\"\r\n                      [typeColClass]=\"typeColClass\"\r\n                      [numberColClass]=\"numberColClass\"\r\n                      [issueDateColClass]=\"issueDateColClass\"\r\n                      [expiryDateColClass]=\"expiryDateColClass\"\r\n                      [actionsColClass]=\"actionsColClass\"\r\n                      [actionsWrapperClass]=\"actionsWrapperClass\"\r\n                      [downloadContainerClass]=\"downloadContainerClass\"\r\n                      (attachmentView)=\"onAttachmentView($event)\"\r\n                      (download)=\"onDownload($event)\">\r\n    </hr-document-card>\r\n    }\r\n    @else {\r\n    <div [class]=\"titleContainerClass\">\r\n      <p [class]=\"titleClass\">\r\n        {{ employeeName }} ({{ 'Me' | translate}})\r\n      </p>\r\n    </div>\r\n\r\n    <div class=\"row mx-1\">\r\n      @for(doc of documents; track doc; let odd = $odd) {\r\n      <div class=\"col-6 mb-2\">\r\n        <hr-document-tablet-card [doc]=\"doc\"\r\n                                 [isOdd]=\"odd\"\r\n                                 [viewIcon]=\"viewIcon\"\r\n                                 [downloadIcon]=\"downloadIcon\"\r\n                                 [labelClass]=\"labelClass\"\r\n                                 [valueClass]=\"valueClass\"\r\n                                 [downloadIconClass]=\"downloadIconClass\"\r\n                                 [downloadContainerClass]=\"downloadContainerClass\"\r\n                                 [downloadCountClass]=\"tabletDownloadCountClass\"\r\n                                 [tabletContainerClass]=\"tabletContainerClass\"\r\n                                 [tabletCardClass]=\"tabletCardClass\"\r\n                                 [cardHeight]=\"tabletCardHeight\"\r\n                                 [tabletColWithAttachmentClass]=\"tabletColWithAttachmentClass\"\r\n                                 [tabletColWithoutAttachmentClass]=\"tabletColWithoutAttachmentClass\"\r\n                                 [tabletActionsColClass]=\"tabletActionsColClass\"\r\n                                 [tabletBottomRowSpacingClass]=\"tabletBottomRowSpacingClass\"\r\n                                 (view)=\"onAttachmentView(doc)\"\r\n                                 (download)=\"onDownload(doc)\">\r\n        </hr-document-tablet-card>\r\n      </div>\r\n      }\r\n    </div>\r\n\r\n    }\r\n  </div>\r\n\r\n\r\n  } @else {\r\n  <sky-empty-design-card [visibleIcon]=\"false\"\r\n                         [visibleQuickAction]=\"false\"\r\n                         [containerClass]=\"emptyStateContainerClass\"\r\n                         [emptyTextClass]=\"emptyStateTextClass\"\r\n                         [emptyText]=\"isLoading ? ((sectionTitle | translate) + ' ' + ('IsLoading' | translate)) : ('ThereAreNoEmployeeDocumentsYet' | translate)\">\r\n  </sky-empty-design-card>\r\n  }\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: SkySectionDividerComponent, selector: "sky-section-divider", inputs: ["text", "fontAwesomeIcon", "textClass", "dividerClass", "iconClass"] }, { kind: "component", type: SkyEmptyDesignCardComponent, selector: "sky-empty-design-card", inputs: ["emptyIcon", "emptyIconClass", "emptyText", "emptyTextClass", "actionTitle", "actionIcon", "actionDisabled", "textColor", "disabledTitleClass", "activeTitleClass", "disabledIconClass", "activeIconClass", "actionClass", "containerClass", "cardBodyClass", "cardBodyContainerClass", "visibleIcon", "visibleQuickAction"], outputs: ["onActionClick"] }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: HRDocumentCardComponent, selector: "hr-document-card", inputs: ["title", "documents", "titleContainerClass", "titleClass", "valueClass", "viewIcon", "downloadIcon", "viewIconClass", "downloadIconClass", "labelClass", "rowClass", "dataColClass", "dataColSpacingClass", "dataRowClass", "typeColClass", "numberColClass", "issueDateColClass", "expiryDateColClass", "actionsColClass", "actionsWrapperClass", "downloadContainerClass"], outputs: ["attachmentView", "download"] }, { kind: "component", type: HrDocumentTabletCardComponent, selector: "hr-document-tablet-card", inputs: ["doc", "isOdd", "downloadIcon", "viewIcon", "cardHeight", "labelClass", "valueClass", "downloadIconClass", "downloadContainerClass", "downloadCountClass", "tabletContainerClass", "tabletCardClass", "tabletColWithAttachmentClass", "tabletColWithoutAttachmentClass", "tabletActionsColClass", "tabletBottomRowSpacingClass"], outputs: ["view", "download"] }, { kind: "pipe", type: i2$3.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MyProfilePersonalDocumentsWidgetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MyProfilePersonalDocumentsWidgetComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'hr-my-profile-personal-documents-widget', standalone: true, imports: [CommonModule, SkySectionDividerComponent, HRTranslatePipe, SkyEmptyDesignCardComponent, FontAwesomeModule, HRInfoFieldComponent, HRDocumentCardComponent, HrDocumentTabletCardComponent], template: "<sky-section-divider [fontAwesomeIcon]=\"icon\"\r\n                     [text]=\"(sectionTitle | HRTranslate | uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n<div class=\"mt-4\">\r\n\r\n  @if(documents.length) {\r\n\r\n  <div [class]=\"!(isTablet || isMobile) ? cardClass : ''\">\r\n    @if(!(isTablet || isMobile)) {\r\n\r\n    <hr-document-card [title]=\"employeeName + ' (' + ('Me' | HRTranslate) + ')'\"\r\n                      [documents]=\"documents\"\r\n                      [valueClass]=\"valueClass\"\r\n                      [viewIcon]=\"viewIcon\"\r\n                      [downloadIcon]=\"downloadIcon\"\r\n                      [viewIconClass]=\"viewIconClass\"\r\n                      [downloadIconClass]=\"downloadIconClass\"\r\n                      [titleContainerClass]=\"titleContainerClass\"\r\n                      [titleClass]=\"titleClass\"\r\n                      [labelClass]=\"labelClass\"\r\n                      [rowClass]=\"rowClass\"\r\n                      [dataColClass]=\"dataColClass\"\r\n                      [dataColSpacingClass]=\"dataColSpacingClass\"\r\n                      [dataRowClass]=\"dataRowClass\"\r\n                      [typeColClass]=\"typeColClass\"\r\n                      [numberColClass]=\"numberColClass\"\r\n                      [issueDateColClass]=\"issueDateColClass\"\r\n                      [expiryDateColClass]=\"expiryDateColClass\"\r\n                      [actionsColClass]=\"actionsColClass\"\r\n                      [actionsWrapperClass]=\"actionsWrapperClass\"\r\n                      [downloadContainerClass]=\"downloadContainerClass\"\r\n                      (attachmentView)=\"onAttachmentView($event)\"\r\n                      (download)=\"onDownload($event)\">\r\n    </hr-document-card>\r\n    }\r\n    @else {\r\n    <div [class]=\"titleContainerClass\">\r\n      <p [class]=\"titleClass\">\r\n        {{ employeeName }} ({{ 'Me' | HRTranslate}})\r\n      </p>\r\n    </div>\r\n\r\n    <div class=\"row mx-1\">\r\n      @for(doc of documents; track doc; let odd = $odd) {\r\n      <div class=\"col-6 mb-2\">\r\n        <hr-document-tablet-card [doc]=\"doc\"\r\n                                 [isOdd]=\"odd\"\r\n                                 [viewIcon]=\"viewIcon\"\r\n                                 [downloadIcon]=\"downloadIcon\"\r\n                                 [labelClass]=\"labelClass\"\r\n                                 [valueClass]=\"valueClass\"\r\n                                 [downloadIconClass]=\"downloadIconClass\"\r\n                                 [downloadContainerClass]=\"downloadContainerClass\"\r\n                                 [downloadCountClass]=\"tabletDownloadCountClass\"\r\n                                 [tabletContainerClass]=\"tabletContainerClass\"\r\n                                 [tabletCardClass]=\"tabletCardClass\"\r\n                                 [cardHeight]=\"tabletCardHeight\"\r\n                                 [tabletColWithAttachmentClass]=\"tabletColWithAttachmentClass\"\r\n                                 [tabletColWithoutAttachmentClass]=\"tabletColWithoutAttachmentClass\"\r\n                                 [tabletActionsColClass]=\"tabletActionsColClass\"\r\n                                 [tabletBottomRowSpacingClass]=\"tabletBottomRowSpacingClass\"\r\n                                 (view)=\"onAttachmentView(doc)\"\r\n                                 (download)=\"onDownload(doc)\">\r\n        </hr-document-tablet-card>\r\n      </div>\r\n      }\r\n    </div>\r\n\r\n    }\r\n  </div>\r\n\r\n\r\n  } @else {\r\n  <sky-empty-design-card [visibleIcon]=\"false\"\r\n                         [visibleQuickAction]=\"false\"\r\n                         [containerClass]=\"emptyStateContainerClass\"\r\n                         [emptyTextClass]=\"emptyStateTextClass\"\r\n                         [emptyText]=\"isLoading ? ((sectionTitle | HRTranslate) + ' ' + ('IsLoading' | HRTranslate)) : ('ThereAreNoEmployeeDocumentsYet' | HRTranslate)\">\r\n  </sky-empty-design-card>\r\n  }\r\n</div>\r\n" }]
+            args: [{ selector: 'hr-my-profile-personal-documents-widget', standalone: true, imports: [CommonModule, SkySectionDividerComponent, TranslatePipe, SkyEmptyDesignCardComponent, FontAwesomeModule, HRInfoFieldComponent, HRDocumentCardComponent, HrDocumentTabletCardComponent], template: "<sky-section-divider [fontAwesomeIcon]=\"icon\"\r\n                     [text]=\"(sectionTitle | translate | uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n<div class=\"mt-4\">\r\n\r\n  @if(documents.length) {\r\n\r\n  <div [class]=\"!(isTablet || isMobile) ? cardClass : ''\">\r\n    @if(!(isTablet || isMobile)) {\r\n\r\n    <hr-document-card [title]=\"employeeName + ' (' + ('Me' | translate) + ')'\"\r\n                      [documents]=\"documents\"\r\n                      [valueClass]=\"valueClass\"\r\n                      [viewIcon]=\"viewIcon\"\r\n                      [downloadIcon]=\"downloadIcon\"\r\n                      [viewIconClass]=\"viewIconClass\"\r\n                      [downloadIconClass]=\"downloadIconClass\"\r\n                      [titleContainerClass]=\"titleContainerClass\"\r\n                      [titleClass]=\"titleClass\"\r\n                      [labelClass]=\"labelClass\"\r\n                      [rowClass]=\"rowClass\"\r\n                      [dataColClass]=\"dataColClass\"\r\n                      [dataColSpacingClass]=\"dataColSpacingClass\"\r\n                      [dataRowClass]=\"dataRowClass\"\r\n                      [typeColClass]=\"typeColClass\"\r\n                      [numberColClass]=\"numberColClass\"\r\n                      [issueDateColClass]=\"issueDateColClass\"\r\n                      [expiryDateColClass]=\"expiryDateColClass\"\r\n                      [actionsColClass]=\"actionsColClass\"\r\n                      [actionsWrapperClass]=\"actionsWrapperClass\"\r\n                      [downloadContainerClass]=\"downloadContainerClass\"\r\n                      (attachmentView)=\"onAttachmentView($event)\"\r\n                      (download)=\"onDownload($event)\">\r\n    </hr-document-card>\r\n    }\r\n    @else {\r\n    <div [class]=\"titleContainerClass\">\r\n      <p [class]=\"titleClass\">\r\n        {{ employeeName }} ({{ 'Me' | translate}})\r\n      </p>\r\n    </div>\r\n\r\n    <div class=\"row mx-1\">\r\n      @for(doc of documents; track doc; let odd = $odd) {\r\n      <div class=\"col-6 mb-2\">\r\n        <hr-document-tablet-card [doc]=\"doc\"\r\n                                 [isOdd]=\"odd\"\r\n                                 [viewIcon]=\"viewIcon\"\r\n                                 [downloadIcon]=\"downloadIcon\"\r\n                                 [labelClass]=\"labelClass\"\r\n                                 [valueClass]=\"valueClass\"\r\n                                 [downloadIconClass]=\"downloadIconClass\"\r\n                                 [downloadContainerClass]=\"downloadContainerClass\"\r\n                                 [downloadCountClass]=\"tabletDownloadCountClass\"\r\n                                 [tabletContainerClass]=\"tabletContainerClass\"\r\n                                 [tabletCardClass]=\"tabletCardClass\"\r\n                                 [cardHeight]=\"tabletCardHeight\"\r\n                                 [tabletColWithAttachmentClass]=\"tabletColWithAttachmentClass\"\r\n                                 [tabletColWithoutAttachmentClass]=\"tabletColWithoutAttachmentClass\"\r\n                                 [tabletActionsColClass]=\"tabletActionsColClass\"\r\n                                 [tabletBottomRowSpacingClass]=\"tabletBottomRowSpacingClass\"\r\n                                 (view)=\"onAttachmentView(doc)\"\r\n                                 (download)=\"onDownload(doc)\">\r\n        </hr-document-tablet-card>\r\n      </div>\r\n      }\r\n    </div>\r\n\r\n    }\r\n  </div>\r\n\r\n\r\n  } @else {\r\n  <sky-empty-design-card [visibleIcon]=\"false\"\r\n                         [visibleQuickAction]=\"false\"\r\n                         [containerClass]=\"emptyStateContainerClass\"\r\n                         [emptyTextClass]=\"emptyStateTextClass\"\r\n                         [emptyText]=\"isLoading ? ((sectionTitle | translate) + ' ' + ('IsLoading' | translate)) : ('ThereAreNoEmployeeDocumentsYet' | translate)\">\r\n  </sky-empty-design-card>\r\n  }\r\n</div>\r\n" }]
         }], ctorParameters: () => [{ type: HRSelfWidgetsService }], propDecorators: { baseUrl: [{
                 type: Input
             }], employeeName: [{
@@ -5628,5 +4588,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { EventOption, EventTypeEnum, HRCardHeaderComponent, HRConstantsService, HREmployeeCalendarComponent, HRHighlightPipe, HRTranslatePipe, HRTranslateService, MainWidgetShortcut, MyCalendarWidgetComponent, MyDependentsWidgetComponent, MyMainDetailsWidgetComponent, MyNextWeekVacationInsightsWidgetComponent, MyProfileAddressWidgetComponent, MyProfileBankInfoWidgetComponent, MyProfileContactWidgetComponent, MyProfileContractWidgetComponent, MyProfileDegreesWidgetComponent, MyProfileDependentsDocumentsWidgetComponent, MyProfileEntitlementsOthersWidgetComponent, MyProfileExperiencesWidgetComponent, MyProfileIndemnityWidgetComponent, MyProfileJobInfoWidgetComponent, MyProfileLanguagesWidgetComponent, MyProfileMedicalInsuranceWidgetComponent, MyProfileOtherNationalitiesWidgetComponent, MyProfilePersonalDocumentsWidgetComponent, MyProfileSalaryWidgetComponent, MyProfileServiceChargeWidgetComponent, MyProfileTicketWidgetComponent, MyProfileVacationsWidgetComponent, MyUpcomingEventsWidgetComponent, ProfilePersonalInfoMainWidgetComponent, PublicHolidayWeekContext, RelativeDay, ScheduleVacationTypes, ServiceChargeEntitlementMode, VacationPopupType };
+export { EventOption, EventTypeEnum, HRCardHeaderComponent, HRConstantsService, HREmployeeCalendarComponent, MainWidgetShortcut, MyCalendarWidgetComponent, MyDependentsWidgetComponent, MyMainDetailsWidgetComponent, MyNextWeekVacationInsightsWidgetComponent, MyProfileAddressWidgetComponent, MyProfileBankInfoWidgetComponent, MyProfileContactWidgetComponent, MyProfileContractWidgetComponent, MyProfileDegreesWidgetComponent, MyProfileDependentsDocumentsWidgetComponent, MyProfileEntitlementsOthersWidgetComponent, MyProfileExperiencesWidgetComponent, MyProfileIndemnityWidgetComponent, MyProfileJobInfoWidgetComponent, MyProfileLanguagesWidgetComponent, MyProfileMedicalInsuranceWidgetComponent, MyProfileOtherNationalitiesWidgetComponent, MyProfilePersonalDocumentsWidgetComponent, MyProfileSalaryWidgetComponent, MyProfileServiceChargeWidgetComponent, MyProfileTicketWidgetComponent, MyProfileVacationsWidgetComponent, MyUpcomingEventsWidgetComponent, ProfilePersonalInfoMainWidgetComponent, PublicHolidayWeekContext, RelativeDay, ScheduleVacationTypes, ServiceChargeEntitlementMode, VacationPopupType };
 //# sourceMappingURL=skysoftware-co-bayan-hr-widgets-ui.mjs.map