@skysoftware-co/bayan-hr-widgets-ui 1.0.7 → 1.0.10

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

@@ -2,14 +2,16 @@ import * as i0 from '@angular/core';
 import { Injectable, Pipe, EventEmitter, Input, Output, Component, inject, ViewChild } from '@angular/core';
 import * as i1$1 from 'devextreme-angular';
 import { DxTooltipModule, DxPopupModule, DxScrollViewModule, DxLoadPanelModule, DxCalendarModule } from 'devextreme-angular';
+import * as i2$1 from '@angular/common';
 import { NgClass, DecimalPipe, DatePipe, LowerCasePipe, CommonModule } from '@angular/common';
 import * as i1$2 from '@fortawesome/angular-fontawesome';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { BayanEmployeeBadgeComponent } from '@skysoftware-co/bayan-components-ui';
-import { SkyShortcutIconComponent } from '@skysoftware-co/sky-components-ui';
+import { SkyShortcutIconComponent, SkySectionDividerComponent } from '@skysoftware-co/sky-components-ui';
 import * as i1 from '@angular/common/http';
 import { HttpParams } from '@angular/common/http';
-import { faCakeCandles, faTreePalm, faCalendarStar } from '@fortawesome/pro-light-svg-icons';
+import { map, shareReplay, catchError, throwError } from 'rxjs';
+import { faCakeCandles, faTreePalm, faCalendarStar, faMoneyCheckDollarPen, faMemoCircleInfo, faPhone, faBolt, faHouse, faLanguage, faEarthAfrica } from '@fortawesome/pro-light-svg-icons';
 import * as i2 from 'devextreme-angular/core';
 import { faCircle, faCalendarDays } from '@fortawesome/pro-regular-svg-icons';
 import moment from 'moment';
@@ -85,6 +87,40 @@ 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 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 en = {
 	ReportingTo: ReportingTo$2,
 	NotAnknown: NotAnknown$2,
@@ -117,7 +153,42 @@ var en = {
 	Calendar: Calendar$2,
 	DayOff: DayOff$2,
 	Events: Events$2,
-	ScheduledVacations: ScheduledVacations$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,
+	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
 };
 
 var ReportingTo$1 = "مفوض الى";
@@ -152,6 +223,40 @@ 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 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 ar = {
 	ReportingTo: ReportingTo$1,
 	NotAnknown: NotAnknown$1,
@@ -184,7 +289,42 @@ var ar = {
 	Calendar: Calendar$1,
 	DayOff: DayOff$1,
 	Events: Events$1,
-	ScheduledVacations: ScheduledVacations$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,
+	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
 };
 
 var ReportingTo = "Rapport à";
@@ -219,6 +359,40 @@ 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 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 fr = {
 	ReportingTo: ReportingTo,
 	NotAnknown: NotAnknown,
@@ -251,7 +425,42 @@ var fr = {
 	Calendar: Calendar,
 	DayOff: DayOff,
 	Events: Events,
-	ScheduledVacations: ScheduledVacations
+	ScheduledVacations: ScheduledVacations,
+	BankInformation: BankInformation,
+	MainBank: MainBank,
+	Bank: Bank,
+	Branch: Branch,
+	IBAN: IBAN,
+	AccountNumber: AccountNumber,
+	Beneficiary: Beneficiary,
+	TransferAmount: TransferAmount,
+	ThereIsNoBankYet: ThereIsNoBankYet,
+	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
 };
 
 const BUILT_IN_LEXICONS = { en, ar, fr };
@@ -277,10 +486,10 @@ class HRTranslateService {
         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' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: HRTranslateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: HRTranslateService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: HRTranslateService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: HRTranslateService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -315,10 +524,10 @@ class HRTranslatePipe {
         }
         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" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: HRTranslatePipe, deps: [{ token: HRTranslateService }], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.20", ngImport: i0, type: HRTranslatePipe, isStandalone: true, name: "HRTranslate" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: HRTranslatePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: HRTranslatePipe, decorators: [{
             type: Pipe,
             args: [{
                     standalone: true,
@@ -326,11 +535,108 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                 }]
         }], ctorParameters: () => [{ type: HRTranslateService }] });
 
+class BankInformationCacheService {
+    bankInformationCache$ = null;
+    bankInformationCacheBaseUrl = '';
+    get(baseUrl) {
+        if (this.bankInformationCacheBaseUrl !== baseUrl) {
+            return null;
+        }
+        return this.bankInformationCache$;
+    }
+    set(baseUrl, value) {
+        this.bankInformationCacheBaseUrl = baseUrl;
+        this.bankInformationCache$ = value;
+    }
+    clear() {
+        this.bankInformationCache$ = null;
+        this.bankInformationCacheBaseUrl = '';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: BankInformationCacheService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: BankInformationCacheService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: BankInformationCacheService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class PersonalInformationCacheService {
+    baseUrl = '';
+    mainDetails$ = null;
+    contactDetails$ = null;
+    addressDetails$ = null;
+    languages$ = null;
+    otherNationalities$ = null;
+    getMainDetails(baseUrl) {
+        return this.baseUrl === baseUrl ? this.mainDetails$ : null;
+    }
+    setMainDetails(baseUrl, value) {
+        this.ensureBaseUrl(baseUrl);
+        this.mainDetails$ = value;
+    }
+    getContactDetails(baseUrl) {
+        return this.baseUrl === baseUrl ? this.contactDetails$ : null;
+    }
+    setContactDetails(baseUrl, value) {
+        this.ensureBaseUrl(baseUrl);
+        this.contactDetails$ = value;
+    }
+    getAddressDetails(baseUrl) {
+        return this.baseUrl === baseUrl ? this.addressDetails$ : null;
+    }
+    setAddressDetails(baseUrl, value) {
+        this.ensureBaseUrl(baseUrl);
+        this.addressDetails$ = value;
+    }
+    getLanguages(baseUrl) {
+        return this.baseUrl === baseUrl ? this.languages$ : null;
+    }
+    setLanguages(baseUrl, value) {
+        this.ensureBaseUrl(baseUrl);
+        this.languages$ = value;
+    }
+    getOtherNationalities(baseUrl) {
+        return this.baseUrl === baseUrl ? this.otherNationalities$ : null;
+    }
+    setOtherNationalities(baseUrl, value) {
+        this.ensureBaseUrl(baseUrl);
+        this.otherNationalities$ = value;
+    }
+    clear() {
+        this.baseUrl = '';
+        this.mainDetails$ = null;
+        this.contactDetails$ = null;
+        this.addressDetails$ = null;
+        this.languages$ = null;
+        this.otherNationalities$ = null;
+    }
+    ensureBaseUrl(baseUrl) {
+        if (this.baseUrl && this.baseUrl !== baseUrl) {
+            this.clear();
+        }
+        this.baseUrl = baseUrl;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: PersonalInformationCacheService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: PersonalInformationCacheService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: PersonalInformationCacheService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
 class HRSelfWidgetsService {
     http;
+    bankInformationCacheService;
+    personalInformationCacheService;
     headers = { 'api-version': '1' };
-    constructor(http) {
+    constructor(http, bankInformationCacheService, personalInformationCacheService) {
         this.http = http;
+        this.bankInformationCacheService = bankInformationCacheService;
+        this.personalInformationCacheService = personalInformationCacheService;
     }
     getMainDetails(baseUrl) {
         return this.http.get(`${baseUrl}/hr/widgets/me/main-details`, {
@@ -354,15 +660,126 @@ class HRSelfWidgetsService {
             headers: this.headers
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: HRSelfWidgetsService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: HRSelfWidgetsService, providedIn: 'root' });
+    getBankInformation(baseUrl, forceRefresh = false) {
+        if (!forceRefresh) {
+            const cachedRequest$ = this.bankInformationCacheService.get(baseUrl);
+            if (cachedRequest$) {
+                return cachedRequest$;
+            }
+        }
+        const request$ = this.http
+            .get(`${baseUrl}/hr/widgets/me/profile/banks`, {
+            headers: this.headers
+        })
+            .pipe(map((response) => response?.ResponseData ?? []), shareReplay(1), catchError((error) => {
+            this.bankInformationCacheService.clear();
+            return throwError(() => error);
+        }));
+        this.bankInformationCacheService.set(baseUrl, request$);
+        return request$;
+    }
+    getPersonalInfoMainDetails(baseUrl, forceRefresh = false) {
+        if (!forceRefresh) {
+            const cachedRequest$ = this.personalInformationCacheService.getMainDetails(baseUrl);
+            if (cachedRequest$) {
+                return cachedRequest$;
+            }
+        }
+        const request$ = this.http
+            .get(`${baseUrl}/hr/widgets/me/profile/personal-information/main`, {
+            headers: this.headers
+        })
+            .pipe(map((response) => response?.ResponseData ?? response), shareReplay(1), catchError((error) => {
+            this.personalInformationCacheService.clear();
+            return throwError(() => error);
+        }));
+        this.personalInformationCacheService.setMainDetails(baseUrl, request$);
+        return request$;
+    }
+    getPersonalInfoContactDetails(baseUrl, forceRefresh = false) {
+        if (!forceRefresh) {
+            const cachedRequest$ = this.personalInformationCacheService.getContactDetails(baseUrl);
+            if (cachedRequest$) {
+                return cachedRequest$;
+            }
+        }
+        const request$ = this.http
+            .get(`${baseUrl}/hr/widgets/me/profile/personal-information/contact`, {
+            headers: this.headers
+        })
+            .pipe(map((response) => response?.ResponseData ?? response), shareReplay(1), catchError((error) => {
+            this.personalInformationCacheService.clear();
+            return throwError(() => error);
+        }));
+        this.personalInformationCacheService.setContactDetails(baseUrl, request$);
+        return request$;
+    }
+    getPersonalInfoAddressDetails(baseUrl, forceRefresh = false) {
+        if (!forceRefresh) {
+            const cachedRequest$ = this.personalInformationCacheService.getAddressDetails(baseUrl);
+            if (cachedRequest$) {
+                return cachedRequest$;
+            }
+        }
+        const request$ = this.http
+            .get(`${baseUrl}/hr/widgets/me/profile/personal-information/address`, {
+            headers: this.headers
+        })
+            .pipe(map((response) => response?.ResponseData ?? response), shareReplay(1), catchError((error) => {
+            this.personalInformationCacheService.clear();
+            return throwError(() => error);
+        }));
+        this.personalInformationCacheService.setAddressDetails(baseUrl, request$);
+        return request$;
+    }
+    getPersonalInfoLanguages(baseUrl, forceRefresh = false) {
+        if (!forceRefresh) {
+            const cachedRequest$ = this.personalInformationCacheService.getLanguages(baseUrl);
+            if (cachedRequest$) {
+                return cachedRequest$;
+            }
+        }
+        const request$ = this.http
+            .get(`${baseUrl}/hr/widgets/me/profile/personal-information/languages`, {
+            headers: this.headers
+        })
+            .pipe(map((response) => response?.ResponseData ?? response ?? []), shareReplay(1), catchError((error) => {
+            this.personalInformationCacheService.clear();
+            return throwError(() => error);
+        }));
+        this.personalInformationCacheService.setLanguages(baseUrl, request$);
+        return request$;
+    }
+    getPersonalInfoOtherNationalities(baseUrl, forceRefresh = false) {
+        if (!forceRefresh) {
+            const cachedRequest$ = this.personalInformationCacheService.getOtherNationalities(baseUrl);
+            if (cachedRequest$) {
+                return cachedRequest$;
+            }
+        }
+        const request$ = this.http
+            .get(`${baseUrl}/hr/widgets/me/profile/personal-information/other-nationalities`, {
+            headers: this.headers
+        })
+            .pipe(map((response) => response?.ResponseData ?? response ?? []), shareReplay(1), catchError((error) => {
+            this.personalInformationCacheService.clear();
+            return throwError(() => error);
+        }));
+        this.personalInformationCacheService.setOtherNationalities(baseUrl, request$);
+        return request$;
+    }
+    clearPersonalInformationCache() {
+        this.personalInformationCacheService.clear();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: HRSelfWidgetsService, deps: [{ token: i1.HttpClient }, { token: BankInformationCacheService }, { token: PersonalInformationCacheService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.20", 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: "19.2.20", ngImport: i0, type: HRSelfWidgetsService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i1.HttpClient }] });
+        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: BankInformationCacheService }, { type: PersonalInformationCacheService }] });
 
 class HRConstantsService {
     defaultVacationBalanceColor = '#727070';
@@ -370,10 +787,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: "19.2.20", ngImport: i0, type: HRConstantsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.20", 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: "19.2.20", ngImport: i0, type: HRConstantsService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -499,10 +916,10 @@ 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: "19.2.20", 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.20", 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" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MyMainDetailsWidgetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", 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: [{
@@ -597,10 +1014,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: i1$2.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: "19.2.20", ngImport: i0, type: HRCardHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", 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: i1$2.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: "19.2.20", 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: [{
@@ -635,10 +1052,10 @@ 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: i1$2.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: "19.2.20", ngImport: i0, type: HREventItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", 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: i1$2.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" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: HREventItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", 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" }]
         }], propDecorators: { events: [{
@@ -697,10 +1114,10 @@ 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: i1$2.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: "19.2.20", ngImport: i0, type: HREventTabBarComponent, deps: [{ token: HRTranslatePipe }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", 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: i1$2.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: "19.2.20", 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: [{
@@ -762,10 +1179,10 @@ 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.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: "19.2.20", ngImport: i0, type: HREventsPopupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", 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.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" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: HREventsPopupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", 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" }]
         }], propDecorators: { visible: [{
@@ -963,10 +1380,10 @@ 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: "19.2.20", ngImport: i0, type: MyUpcomingEventsWidgetComponent, deps: [{ token: HRSelfWidgetsService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", 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" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MyUpcomingEventsWidgetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", 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" }]
         }], ctorParameters: () => [{ type: HRSelfWidgetsService }], propDecorators: { baseUrl: [{
@@ -1022,6 +1439,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
             }] } });
 
 class HRCommonMethodsService {
+    translateService;
+    constructor(translateService) {
+        this.translateService = translateService;
+    }
     calculateDaysDifference(dateOne, dateTwo) {
         const resetTime = (inputDate) => {
             const newDate = new Date(inputDate);
@@ -1032,15 +1453,24 @@ class HRCommonMethodsService {
         const secondDate = resetTime(new Date(dateTwo));
         return (firstDate.getTime() - secondDate.getTime()) / (1000 * 60 * 60 * 24);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: HRCommonMethodsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: HRCommonMethodsService, providedIn: 'root' });
+    currencyDecimalFormat(value, currencyDecimalsNumber) {
+        const currencyDecimalsString = `1.${currencyDecimalsNumber}-${currencyDecimalsNumber}`;
+        const languageCode = this.translateService.getLanguage();
+        const decimalPipe = new DecimalPipe(languageCode === 'fr' ? 'fr-FR' : 'en-US');
+        if (languageCode === 'fr') {
+            return decimalPipe.transform(value, currencyDecimalsString, 'fr-FR');
+        }
+        return decimalPipe.transform(value, currencyDecimalsString);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: HRCommonMethodsService, deps: [{ token: HRTranslateService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.20", 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: "19.2.20", ngImport: i0, type: HRCommonMethodsService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
-        }] });
+        }], ctorParameters: () => [{ type: HRTranslateService }] });
 
 class HREmployeeCalendarComponent {
     calendar;
@@ -1161,10 +1591,10 @@ 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: i1$2.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: "19.2.20", ngImport: i0, type: HREmployeeCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", 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: i1$2.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: HREmployeeCalendarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", 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" }]
         }], propDecorators: { calendar: [{
@@ -1305,10 +1735,10 @@ class MyCalendarWidgetComponent {
             }
         }, 100);
     }
-    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", 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 }], 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: "19.2.20", ngImport: i0, type: MyCalendarWidgetComponent, deps: [{ token: HRSelfWidgetsService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: MyCalendarWidgetComponent, isStandalone: true, selector: "hr-my-calendar-widget", inputs: { baseUrl: "baseUrl", headerContainerClass: "headerContainerClass", 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 }], 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" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MyCalendarWidgetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", 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" }]
         }], ctorParameters: () => [{ type: HRSelfWidgetsService }], propDecorators: { baseUrl: [{
@@ -1354,6 +1784,513 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                 args: [HREmployeeCalendarComponent]
             }] } });
 
+class HRInfoFieldComponent {
+    labelKey;
+    value = null;
+    labelClass = 'field-secondary-label-sm';
+    valueClass = 'fs-14 fw-medium';
+    fallbackValue = '—';
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: HRInfoFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", 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\">{{value || fallbackValue}}</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: HRTranslatePipe, name: "HRTranslate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", 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\">{{value || fallbackValue}}</div>\r\n" }]
+        }], propDecorators: { labelKey: [{
+                type: Input,
+                args: [{ required: true }]
+            }], value: [{
+                type: Input
+            }], labelClass: [{
+                type: Input
+            }], valueClass: [{
+                type: Input
+            }], fallbackValue: [{
+                type: Input
+            }] } });
+
+class ProfileBankInformationWidgetComponent {
+    commonMethodsService;
+    hrSelfWidgetsService;
+    constructor(commonMethodsService, hrSelfWidgetsService) {
+        this.commonMethodsService = commonMethodsService;
+        this.hrSelfWidgetsService = hrSelfWidgetsService;
+    }
+    ngOnInit() {
+        this.isLoadingChanged.emit(true);
+        this.hrSelfWidgetsService.getBankInformation(this.baseUrl).subscribe({
+            next: (response) => {
+                this.employeeBankInformation = response ?? [];
+                this.isLoadingChanged.emit(false);
+            },
+            error: () => {
+                this.employeeBankInformation = [];
+                this.isLoadingChanged.emit(false);
+            }
+        });
+    }
+    employeeBankInformation = [];
+    currencyCode = '';
+    currencyDecimals = 2;
+    headerIconClass = 'primary-icon-xl';
+    headerTextClass = 'mt-2 field-secondary-label-lg';
+    headerDividerClass = 'flex-grow-1 ms-2';
+    cardClass = 'mt-4 card-shadow position-relative';
+    mainBadgeClass = 'position-absolute text-center top-0 mt-3 start-0 bg-primary status-badge';
+    mainBadgeTextClass = 'mx-1 fs-12 text-white';
+    triangleClass = 'position-absolute start-0 top-0';
+    rowClass = 'row px-4 pb-3';
+    rowMainPtClass = 'pt-5';
+    rowNormalPtClass = 'pt-3';
+    columnClass = 'col-md-4 col-6';
+    responsiveTopSpacingColClass = 'col-md-4 col-6 mt-md-0 mt-4';
+    topSpacingColClass = 'col-md-4 col-6 mt-4';
+    labelClass = 'field-secondary-label-sm';
+    valueClass = 'table-cell-md';
+    emptyStateContainerClass = 'd-flex flex-column justify-content-center align-items-center my-5';
+    emptyStateTextClass = 'field-secondary-label-md';
+    bankInformationIcon = faMoneyCheckDollarPen;
+    sectionHeaderVisibility = true;
+    sectionTitle = 'BankInformation';
+    language = 'en';
+    baseUrl = '';
+    isRTL = this.language === 'ar';
+    isLoadingChanged = new EventEmitter();
+    formatAmount(value) {
+        if (value == null) {
+            return '-';
+        }
+        return this.commonMethodsService.currencyDecimalFormat(value, this.currencyDecimals) || '-';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ProfileBankInformationWidgetComponent, deps: [{ token: HRCommonMethodsService }, { token: HRSelfWidgetsService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: ProfileBankInformationWidgetComponent, isStandalone: true, selector: "hr-profile-bank-information-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: { isLoadingChanged: "isLoadingChanged" }, ngImport: i0, template: "@if(sectionHeaderVisibility){\r\n<sky-section-divider [fontAwesomeIcon]=\"bankInformationIcon\"\r\n                     [text]=\"(sectionTitle | HRTranslate)\"\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<div [class]=\"emptyStateContainerClass\">\r\n  <p [class]=\"emptyStateTextClass\">{{'ThereIsNoBankYet' | HRTranslate}}</p>\r\n</div>\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ProfileBankInformationWidgetComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'hr-profile-bank-information-widget', standalone: true, imports: [CommonModule, HRTranslatePipe, SkySectionDividerComponent, HRInfoFieldComponent], template: "@if(sectionHeaderVisibility){\r\n<sky-section-divider [fontAwesomeIcon]=\"bankInformationIcon\"\r\n                     [text]=\"(sectionTitle | HRTranslate)\"\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<div [class]=\"emptyStateContainerClass\">\r\n  <p [class]=\"emptyStateTextClass\">{{'ThereIsNoBankYet' | HRTranslate}}</p>\r\n</div>\r\n}\r\n" }]
+        }], ctorParameters: () => [{ type: HRCommonMethodsService }, { type: HRSelfWidgetsService }], propDecorators: { currencyCode: [{
+                type: Input
+            }], currencyDecimals: [{
+                type: Input
+            }], headerIconClass: [{
+                type: Input
+            }], headerTextClass: [{
+                type: Input
+            }], headerDividerClass: [{
+                type: Input
+            }], cardClass: [{
+                type: Input
+            }], mainBadgeClass: [{
+                type: Input
+            }], mainBadgeTextClass: [{
+                type: Input
+            }], triangleClass: [{
+                type: Input
+            }], rowClass: [{
+                type: Input
+            }], rowMainPtClass: [{
+                type: Input
+            }], rowNormalPtClass: [{
+                type: Input
+            }], columnClass: [{
+                type: Input
+            }], responsiveTopSpacingColClass: [{
+                type: Input
+            }], topSpacingColClass: [{
+                type: Input
+            }], labelClass: [{
+                type: Input
+            }], valueClass: [{
+                type: Input
+            }], emptyStateContainerClass: [{
+                type: Input
+            }], emptyStateTextClass: [{
+                type: Input
+            }], bankInformationIcon: [{
+                type: Input
+            }], sectionHeaderVisibility: [{
+                type: Input
+            }], sectionTitle: [{
+                type: Input
+            }], language: [{
+                type: Input
+            }], baseUrl: [{
+                type: Input,
+                args: [{ required: true }]
+            }], isLoadingChanged: [{
+                type: Output
+            }] } });
+
+class ProfilePersonalInfoMainWidgetComponent {
+    hrSelfWidgetsService;
+    employeePersonalInformation = null;
+    baseUrl = '';
+    alternateLanguage = 'English';
+    headerIconClass = 'primary-icon-xl';
+    headerTextClass = 'mt-2 field-secondary-label-lg';
+    headerDividerClass = 'flex-grow-1 ms-2';
+    rowClass = 'row mt-4';
+    columnClass = 'col-md-4 col-6';
+    hiddenSpacerColClass = 'col-md-4 col-6 d-md-block d-none';
+    topSpacingColumnClass = 'col-md-4 col-6 mt-4';
+    topSpacingBottomMdSpacingColumnClass = 'col-md-4 col-6 mt-4 mb-md-5';
+    topSpacingBottomSpacingColumnClass = 'col-md-4 col-6 mt-4 mb-5';
+    labelClass = 'field-secondary-label-sm';
+    valueClass = 'fs-14 fw-medium';
+    mainIcon = faMemoCircleInfo;
+    sectionTitle = 'main';
+    isLoadingChanged = new EventEmitter();
+    constructor(hrSelfWidgetsService) {
+        this.hrSelfWidgetsService = hrSelfWidgetsService;
+    }
+    ngOnInit() {
+        if (!this.baseUrl) {
+            return;
+        }
+        this.isLoadingChanged.emit(true);
+        this.hrSelfWidgetsService.getPersonalInfoMainDetails(this.baseUrl).subscribe({
+            next: (response) => {
+                this.isLoadingChanged.emit(false);
+                this.employeePersonalInformation = response;
+            },
+            error: () => {
+                this.isLoadingChanged.emit(false);
+                this.employeePersonalInformation = null;
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ProfilePersonalInfoMainWidgetComponent, deps: [{ token: HRSelfWidgetsService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: ProfilePersonalInfoMainWidgetComponent, isStandalone: true, selector: "hr-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", mainIcon: "mainIcon", sectionTitle: "sectionTitle" }, outputs: { isLoadingChanged: "isLoadingChanged" }, 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<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?.EmployeeNameAltarnate){\r\n    <div [ngClass]=\"valueClass\">{{employeePersonalInformation?.EmployeeNameAltarnate}}</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", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i2$1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i2$1.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: HRInfoFieldComponent, selector: "hr-info-field", inputs: ["labelKey", "value", "labelClass", "valueClass", "fallbackValue"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ProfilePersonalInfoMainWidgetComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'hr-profile-personal-info-main-widget', standalone: true, imports: [CommonModule, HRTranslatePipe, SkySectionDividerComponent, 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<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?.EmployeeNameAltarnate){\r\n    <div [ngClass]=\"valueClass\">{{employeePersonalInformation?.EmployeeNameAltarnate}}</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" }]
+        }], ctorParameters: () => [{ type: HRSelfWidgetsService }], propDecorators: { baseUrl: [{
+                type: Input,
+                args: [{ required: true }]
+            }], alternateLanguage: [{
+                type: Input
+            }], headerIconClass: [{
+                type: Input
+            }], headerTextClass: [{
+                type: Input
+            }], headerDividerClass: [{
+                type: Input
+            }], rowClass: [{
+                type: Input
+            }], columnClass: [{
+                type: Input
+            }], hiddenSpacerColClass: [{
+                type: Input
+            }], topSpacingColumnClass: [{
+                type: Input
+            }], topSpacingBottomMdSpacingColumnClass: [{
+                type: Input
+            }], topSpacingBottomSpacingColumnClass: [{
+                type: Input
+            }], labelClass: [{
+                type: Input
+            }], valueClass: [{
+                type: Input
+            }], mainIcon: [{
+                type: Input
+            }], sectionTitle: [{
+                type: Input
+            }], isLoadingChanged: [{
+                type: Output
+            }] } });
+
+class ProfilePersonalInfoContactWidgetComponent {
+    hrSelfWidgetsService;
+    employeePersonalInfoContactDetails = null;
+    baseUrl = '';
+    headerIconClass = 'primary-icon-xl';
+    headerTextClass = 'fs-16 mt-2 text-secondary';
+    headerDividerClass = 'flex-grow-1 ms-2';
+    rowClass = 'row mt-4';
+    columnClass = 'col-md-4 col-6';
+    responsiveTopSpacingColumnClass = 'col-md-4 col-6 mt-md-0 mt-4';
+    topSpacingBottomMdSpacingColumnClass = 'col-md-4 col-6 mt-4 mb-md-5';
+    topSpacingBottomSpacingColumnClass = 'col-md-4 col-6 mt-4 mb-5';
+    labelClass = 'field-secondary-label-sm';
+    valueClass = 'fs-14 fw-medium';
+    emergencyContactLabelClass = 'fs-16 fw-medium';
+    emergencyContactIconClass = 'me-2';
+    contactIcon = faPhone;
+    emergencyContactIcon = faBolt;
+    sectionTitle = "contact";
+    showEmergencyContact = true;
+    emergencyContactRowClass = 'row mt-3 mb-4';
+    isLoadingChanged = new EventEmitter();
+    constructor(hrSelfWidgetsService) {
+        this.hrSelfWidgetsService = hrSelfWidgetsService;
+    }
+    ngOnInit() {
+        if (!this.baseUrl) {
+            return;
+        }
+        this.isLoadingChanged.emit(true);
+        this.hrSelfWidgetsService.getPersonalInfoContactDetails(this.baseUrl).subscribe({
+            next: (response) => {
+                this.isLoadingChanged.emit(false);
+                this.employeePersonalInfoContactDetails = response;
+            },
+            error: () => {
+                this.isLoadingChanged.emit(false);
+                this.employeePersonalInfoContactDetails = null;
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ProfilePersonalInfoContactWidgetComponent, deps: [{ token: HRSelfWidgetsService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: ProfilePersonalInfoContactWidgetComponent, isStandalone: true, selector: "hr-profile-personal-info-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", emergencyContactIconClass: "emergencyContactIconClass", contactIcon: "contactIcon", emergencyContactIcon: "emergencyContactIcon", sectionTitle: "sectionTitle", showEmergencyContact: "showEmergencyContact", emergencyContactRowClass: "emergencyContactRowClass" }, outputs: { isLoadingChanged: "isLoadingChanged" }, 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<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>\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>\r\n  \r\n  <div [ngClass]=\"responsiveTopSpacingColumnClass\">\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@if(showEmergencyContact)\r\n{\r\n<div [ngClass]=\"rowClass\">\r\n  <div class=\"col-12\">\r\n    <div [ngClass]=\"valueClass\">\r\n      <fa-icon [icon]=\"emergencyContactIcon\" [ngClass]=\"emergencyContactIconClass\"></fa-icon>\r\n      {{'EmergencyContact' | HRTranslate}}\r\n    </div>\r\n  </div>\r\n</div>\r\n<div [ngClass]=\"emergencyContactRowClass\">\r\n  <div [ngClass]=\"columnClass\">\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]=\"columnClass\">\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]=\"responsiveTopSpacingColumnClass\">\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}", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i2$1.UpperCasePipe, name: "uppercase" }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i1$2.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" }, { 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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ProfilePersonalInfoContactWidgetComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'hr-profile-personal-info-contact-widget', standalone: true, imports: [CommonModule, FontAwesomeModule, HRTranslatePipe, SkySectionDividerComponent, 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<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>\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>\r\n  \r\n  <div [ngClass]=\"responsiveTopSpacingColumnClass\">\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@if(showEmergencyContact)\r\n{\r\n<div [ngClass]=\"rowClass\">\r\n  <div class=\"col-12\">\r\n    <div [ngClass]=\"valueClass\">\r\n      <fa-icon [icon]=\"emergencyContactIcon\" [ngClass]=\"emergencyContactIconClass\"></fa-icon>\r\n      {{'EmergencyContact' | HRTranslate}}\r\n    </div>\r\n  </div>\r\n</div>\r\n<div [ngClass]=\"emergencyContactRowClass\">\r\n  <div [ngClass]=\"columnClass\">\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]=\"columnClass\">\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]=\"responsiveTopSpacingColumnClass\">\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}" }]
+        }], ctorParameters: () => [{ type: HRSelfWidgetsService }], propDecorators: { baseUrl: [{
+                type: Input,
+                args: [{ required: true }]
+            }], headerIconClass: [{
+                type: Input
+            }], headerTextClass: [{
+                type: Input
+            }], headerDividerClass: [{
+                type: Input
+            }], rowClass: [{
+                type: Input
+            }], columnClass: [{
+                type: Input
+            }], responsiveTopSpacingColumnClass: [{
+                type: Input
+            }], topSpacingBottomMdSpacingColumnClass: [{
+                type: Input
+            }], topSpacingBottomSpacingColumnClass: [{
+                type: Input
+            }], labelClass: [{
+                type: Input
+            }], valueClass: [{
+                type: Input
+            }], emergencyContactLabelClass: [{
+                type: Input
+            }], emergencyContactIconClass: [{
+                type: Input
+            }], contactIcon: [{
+                type: Input
+            }], emergencyContactIcon: [{
+                type: Input
+            }], sectionTitle: [{
+                type: Input
+            }], showEmergencyContact: [{
+                type: Input
+            }], emergencyContactRowClass: [{
+                type: Input
+            }], isLoadingChanged: [{
+                type: Output
+            }] } });
+
+class ProfilePersonalInfoAddressWidgetComponent {
+    hrSelfWidgetsService;
+    personalInfoAddressDetails = null;
+    baseUrl = '';
+    headerIconClass = 'primary-icon-xl';
+    headerTextClass = 'fs-16 mt-2 text-secondary';
+    headerDividerClass = 'flex-grow-1 ms-2';
+    rowClass = 'row mt-4';
+    columnClass = 'col-md-4 col-6';
+    responsiveTopSpacingColumnClass = 'col-md-4 col-6 mt-md-0 mt-4';
+    topSpacingBottomSpacingColumnClass = 'col-md-4 col-6 mt-4 mb-5';
+    labelClass = 'field-secondary-label-sm';
+    valueClass = 'fs-14 fw-medium';
+    addressIcon = faHouse;
+    sectionTitle = 'address';
+    isLoadingChanged = new EventEmitter();
+    constructor(hrSelfWidgetsService) {
+        this.hrSelfWidgetsService = hrSelfWidgetsService;
+    }
+    ngOnInit() {
+        if (!this.baseUrl) {
+            return;
+        }
+        this.isLoadingChanged.emit(true);
+        this.hrSelfWidgetsService.getPersonalInfoAddressDetails(this.baseUrl).subscribe({
+            next: (response) => {
+                this.isLoadingChanged.emit(false);
+                this.personalInfoAddressDetails = response;
+            },
+            error: () => {
+                this.isLoadingChanged.emit(false);
+                this.personalInfoAddressDetails = null;
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ProfilePersonalInfoAddressWidgetComponent, deps: [{ token: HRSelfWidgetsService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: ProfilePersonalInfoAddressWidgetComponent, isStandalone: true, selector: "hr-profile-personal-info-address-widget", inputs: { baseUrl: "baseUrl", headerIconClass: "headerIconClass", headerTextClass: "headerTextClass", headerDividerClass: "headerDividerClass", rowClass: "rowClass", columnClass: "columnClass", responsiveTopSpacingColumnClass: "responsiveTopSpacingColumnClass", topSpacingBottomSpacingColumnClass: "topSpacingBottomSpacingColumnClass", labelClass: "labelClass", valueClass: "valueClass", addressIcon: "addressIcon", sectionTitle: "sectionTitle" }, outputs: { isLoadingChanged: "isLoadingChanged" }, 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<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", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i2$1.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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ProfilePersonalInfoAddressWidgetComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'hr-profile-personal-info-address-widget', standalone: true, imports: [CommonModule, HRTranslatePipe, SkySectionDividerComponent, 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<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" }]
+        }], ctorParameters: () => [{ type: HRSelfWidgetsService }], propDecorators: { baseUrl: [{
+                type: Input,
+                args: [{ required: true }]
+            }], headerIconClass: [{
+                type: Input
+            }], headerTextClass: [{
+                type: Input
+            }], headerDividerClass: [{
+                type: Input
+            }], rowClass: [{
+                type: Input
+            }], columnClass: [{
+                type: Input
+            }], responsiveTopSpacingColumnClass: [{
+                type: Input
+            }], topSpacingBottomSpacingColumnClass: [{
+                type: Input
+            }], labelClass: [{
+                type: Input
+            }], valueClass: [{
+                type: Input
+            }], addressIcon: [{
+                type: Input
+            }], sectionTitle: [{
+                type: Input
+            }], isLoadingChanged: [{
+                type: Output
+            }] } });
+
+class ProfilePersonalInfoLanguagesWidgetComponent {
+    hrSelfWidgetsService;
+    languages = null;
+    baseUrl = '';
+    headerIconClass = 'primary-icon-xl';
+    headerTextClass = 'fs-16 mt-2 text-secondary';
+    headerDividerClass = 'flex-grow-1 ms-2';
+    contentTextClass = 'text-dark-gray fs-14 fw-medium mt-4';
+    hasDataChange = new EventEmitter();
+    languagesIcon = faLanguage;
+    sectionTitle = "languages";
+    isLoadingChanged = new EventEmitter();
+    constructor(hrSelfWidgetsService) {
+        this.hrSelfWidgetsService = hrSelfWidgetsService;
+    }
+    ngOnInit() {
+        if (!this.baseUrl) {
+            this.emitHasData();
+            return;
+        }
+        this.isLoadingChanged.emit(true);
+        this.hrSelfWidgetsService.getPersonalInfoLanguages(this.baseUrl).subscribe({
+            next: (response) => {
+                this.isLoadingChanged.emit(false);
+                this.languages = response ?? [];
+                this.emitHasData();
+            },
+            error: () => {
+                this.languages = [];
+                this.emitHasData();
+                this.isLoadingChanged.emit(false);
+            }
+        });
+    }
+    emitHasData() {
+        this.hasDataChange.emit((this.languages?.length ?? 0) > 0);
+    }
+    getLanguages() {
+        return this.languages?.join(', ') || '-';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ProfilePersonalInfoLanguagesWidgetComponent, deps: [{ token: HRSelfWidgetsService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: ProfilePersonalInfoLanguagesWidgetComponent, isStandalone: true, selector: "hr-profile-personal-info-languages-widget", inputs: { baseUrl: "baseUrl", headerIconClass: "headerIconClass", headerTextClass: "headerTextClass", headerDividerClass: "headerDividerClass", contentTextClass: "contentTextClass", languagesIcon: "languagesIcon", sectionTitle: "sectionTitle" }, outputs: { hasDataChange: "hasDataChange", isLoadingChanged: "isLoadingChanged" }, 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<div [ngClass]=\"contentTextClass\">\r\n  {{getLanguages()}}\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i2$1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: HRTranslatePipe, name: "HRTranslate" }, { kind: "component", type: SkySectionDividerComponent, selector: "sky-section-divider", inputs: ["text", "fontAwesomeIcon", "textClass", "dividerClass", "iconClass"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ProfilePersonalInfoLanguagesWidgetComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'hr-profile-personal-info-languages-widget', standalone: true, imports: [CommonModule, HRTranslatePipe, SkySectionDividerComponent], 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<div [ngClass]=\"contentTextClass\">\r\n  {{getLanguages()}}\r\n</div>\r\n" }]
+        }], ctorParameters: () => [{ type: HRSelfWidgetsService }], propDecorators: { baseUrl: [{
+                type: Input
+            }], headerIconClass: [{
+                type: Input
+            }], headerTextClass: [{
+                type: Input
+            }], headerDividerClass: [{
+                type: Input
+            }], contentTextClass: [{
+                type: Input
+            }], hasDataChange: [{
+                type: Output
+            }], languagesIcon: [{
+                type: Input
+            }], sectionTitle: [{
+                type: Input
+            }], isLoadingChanged: [{
+                type: Output
+            }] } });
+
+class ProfilePersonalInfoOtherNationalitiesWidgetComponent {
+    hrSelfWidgetsService;
+    personalInfo = null;
+    baseUrl = '';
+    headerIconClass = 'primary-icon-xl';
+    headerTextClass = 'fs-16 mt-2 text-secondary';
+    headerDividerClass = 'flex-grow-1 ms-2';
+    contentTextClass = 'text-dark-gray fs-14 fw-medium mt-4';
+    hasDataChange = new EventEmitter();
+    isLoadingChanged = new EventEmitter();
+    otherNationalitiesIcon = faEarthAfrica;
+    sectionTitle = 'otherNationalities';
+    constructor(hrSelfWidgetsService) {
+        this.hrSelfWidgetsService = hrSelfWidgetsService;
+    }
+    ngOnInit() {
+        if (!this.baseUrl) {
+            this.emitHasData();
+            return;
+        }
+        this.isLoadingChanged.emit(true);
+        this.hrSelfWidgetsService.getPersonalInfoOtherNationalities(this.baseUrl).subscribe({
+            next: (response) => {
+                this.isLoadingChanged.emit(false);
+                this.personalInfo = response ?? [];
+                this.emitHasData();
+            },
+            error: () => {
+                this.isLoadingChanged.emit(false);
+                this.personalInfo = [];
+                this.emitHasData();
+            }
+        });
+    }
+    emitHasData() {
+        this.hasDataChange.emit((this.personalInfo?.length ?? 0) > 0);
+    }
+    getOtherNationalities() {
+        return this.personalInfo?.join(', ') || '-';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ProfilePersonalInfoOtherNationalitiesWidgetComponent, deps: [{ token: HRSelfWidgetsService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: ProfilePersonalInfoOtherNationalitiesWidgetComponent, isStandalone: true, selector: "hr-profile-personal-info-other-nationalities-widget", inputs: { baseUrl: "baseUrl", headerIconClass: "headerIconClass", headerTextClass: "headerTextClass", headerDividerClass: "headerDividerClass", contentTextClass: "contentTextClass", otherNationalitiesIcon: "otherNationalitiesIcon", sectionTitle: "sectionTitle" }, outputs: { hasDataChange: "hasDataChange", isLoadingChanged: "isLoadingChanged" }, ngImport: i0, template: "<sky-section-divider [fontAwesomeIcon]=\"otherNationalitiesIcon\"\r\n                     [text]=\"( sectionTitle | HRTranslate)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n<div [ngClass]=\"contentTextClass\">\r\n  {{getOtherNationalities()}}\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: HRTranslatePipe, name: "HRTranslate" }, { kind: "component", type: SkySectionDividerComponent, selector: "sky-section-divider", inputs: ["text", "fontAwesomeIcon", "textClass", "dividerClass", "iconClass"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ProfilePersonalInfoOtherNationalitiesWidgetComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'hr-profile-personal-info-other-nationalities-widget', standalone: true, imports: [CommonModule, HRTranslatePipe, SkySectionDividerComponent], template: "<sky-section-divider [fontAwesomeIcon]=\"otherNationalitiesIcon\"\r\n                     [text]=\"( sectionTitle | HRTranslate)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n<div [ngClass]=\"contentTextClass\">\r\n  {{getOtherNationalities()}}\r\n</div>\r\n" }]
+        }], ctorParameters: () => [{ type: HRSelfWidgetsService }], propDecorators: { baseUrl: [{
+                type: Input,
+                args: [{ required: true }]
+            }], headerIconClass: [{
+                type: Input
+            }], headerTextClass: [{
+                type: Input
+            }], headerDividerClass: [{
+                type: Input
+            }], contentTextClass: [{
+                type: Input
+            }], hasDataChange: [{
+                type: Output
+            }], isLoadingChanged: [{
+                type: Output
+            }], otherNationalitiesIcon: [{
+                type: Input
+            }], sectionTitle: [{
+                type: Input
+            }] } });
+
 /*
  * Public API Surface of shared-ui
  */
@@ -1362,5 +2299,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { EventOption, EventTypeEnum, HRCardHeaderComponent, HRConstantsService, HREmployeeCalendarComponent, HRTranslatePipe, HRTranslateService, MainWidgetShortcut, MyCalendarWidgetComponent, MyMainDetailsWidgetComponent, MyUpcomingEventsWidgetComponent, PublicHolidayWeekContext, RelativeDay, ScheduleVacationTypes };
+export { EventOption, EventTypeEnum, HRCardHeaderComponent, HRConstantsService, HREmployeeCalendarComponent, HRTranslatePipe, HRTranslateService, MainWidgetShortcut, MyCalendarWidgetComponent, MyMainDetailsWidgetComponent, MyUpcomingEventsWidgetComponent, ProfileBankInformationWidgetComponent, ProfilePersonalInfoAddressWidgetComponent, ProfilePersonalInfoContactWidgetComponent, ProfilePersonalInfoLanguagesWidgetComponent, ProfilePersonalInfoMainWidgetComponent, ProfilePersonalInfoOtherNationalitiesWidgetComponent, PublicHolidayWeekContext, RelativeDay, ScheduleVacationTypes };
 //# sourceMappingURL=skysoftware-co-bayan-hr-widgets-ui.mjs.map