@skysoftware-co/bayan-hr-widgets-ui 1.0.34 → 1.0.36

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

@@ -10,8 +10,8 @@ import { BayanEmployeeBadgeComponent } from '@skysoftware-co/bayan-components-ui
 import { SkyShortcutIconComponent, SkySectionDividerComponent, SkyEmptyDesignCardComponent, SkyWidgetSectionItemComponent } from '@skysoftware-co/sky-components-ui';
 import * as i1 from '@angular/common/http';
 import { HttpParams } from '@angular/common/http';
-import { map, shareReplay, catchError, throwError, lastValueFrom } from 'rxjs';
-import { faCakeCandles, faTreePalm, faCalendarStar, faMoneyCheckDollarPen, faMemoCircleInfo, faPhone, faBolt, faLanguage, faEarthAfrica, faHouse, faFileSignature, faSackDollar, faEnvelopeOpenDollar, faXmark, faFolderArrowDown, faUsersRays, faFileCertificate } from '@fortawesome/pro-light-svg-icons';
+import { map, shareReplay, catchError, throwError, lastValueFrom, forkJoin } from 'rxjs';
+import { faCakeCandles, faTreePalm, faCalendarStar, faMoneyCheckDollarPen, faMemoCircleInfo, faPhone, faBolt, faLanguage, faEarthAfrica, faHouse, faFileSignature, faSackDollar, faEnvelopeOpenDollar, faXmark, faFolderArrowDown, faUsersRays, faFileCertificate, faUsersLine, faIslandTropical, faTicketsAirline, faNotesMedical, faGrid2Plus } from '@fortawesome/pro-light-svg-icons';
 import * as i2 from 'devextreme-angular/core';
 import { faCircle, faCalendarDays, faEye } from '@fortawesome/pro-regular-svg-icons';
 import moment from 'moment';
@@ -82,9 +82,9 @@ var UpcomingEvents$2 = "Upcoming events";
 var Birthday$2 = "Birthday";
 var PublicHoliday$2 = "Public holiday";
 var During$2 = "during";
-var isIn$2 = "Is in";
-var is$2 = "Is";
-var In$2 = "In";
+var isIn$2 = "is in";
+var is$2 = "is";
+var In$2 = "in";
 var NoEvents$2 = "There are no events";
 var All$2 = "All";
 var ViewAll$2 = "View all";
@@ -189,7 +189,30 @@ var TerminationReason$2 = "Termination reason";
 var ThereIsNoDegreesYet$2 = "There are no degrees yet";
 var ThereIsNoExperiencesYet$2 = "There are no experiences yet";
 var ThereIsNoDependentsYet$2 = "There are no dependents yet";
-var DependentTypeName$2 = "Dependent Type";
+var DependentTypeName$2 = "Dependent type";
+var Vacations$2 = "Vacations";
+var Indemnity$2 = "Indemnity";
+var MedicalInsurance$2 = "Medical insurance";
+var Tickets$2 = "Tickets";
+var Others$2 = "Others";
+var Type$2 = "Type";
+var Entitlement$2 = "Entitlement";
+var IndemnityEligibility$2 = "Indemnity eligibility";
+var OvertimeEligibility$2 = "Overtime eligibility";
+var SocialSecurityEligibility$2 = "Social security eligibility";
+var Class$2 = "Class";
+var Sector$2 = "Sector";
+var Me$2 = "Me";
+var Eligible$2 = "Eligible";
+var NotEligible$2 = "Not eligible";
+var Member$2 = "Member";
+var NotMember$2 = "Not member";
+var NotCoveredByMedicalInsurance$2 = "Not covered by medical insurance";
+var NoTicketEntitlement$2 = "No ticket entitlement";
+var CoverageDate$2 = "Coverage date";
+var TotalEmployeeShare$2 = "Total employee share";
+var TotalEmployerShare$2 = "Total employer share";
+var Dependents$2 = "Dependents";
 var en = {
 	ReportingTo: ReportingTo$2,
 	NotAnknown: NotAnknown$2,
@@ -313,7 +336,32 @@ var en = {
 	ThereIsNoDegreesYet: ThereIsNoDegreesYet$2,
 	ThereIsNoExperiencesYet: ThereIsNoExperiencesYet$2,
 	ThereIsNoDependentsYet: ThereIsNoDependentsYet$2,
-	DependentTypeName: DependentTypeName$2
+	DependentTypeName: DependentTypeName$2,
+	Vacations: Vacations$2,
+	Indemnity: Indemnity$2,
+	MedicalInsurance: MedicalInsurance$2,
+	Tickets: Tickets$2,
+	Others: Others$2,
+	Type: Type$2,
+	Entitlement: Entitlement$2,
+	IndemnityEligibility: IndemnityEligibility$2,
+	OvertimeEligibility: OvertimeEligibility$2,
+	SocialSecurityEligibility: SocialSecurityEligibility$2,
+	Class: Class$2,
+	Sector: Sector$2,
+	Me: Me$2,
+	Eligible: Eligible$2,
+	NotEligible: NotEligible$2,
+	Member: Member$2,
+	NotMember: NotMember$2,
+	"There'sNoInformationInThisSectionYet": "There's no information in this section yet",
+	NotCoveredByMedicalInsurance: NotCoveredByMedicalInsurance$2,
+	NoTicketEntitlement: NoTicketEntitlement$2,
+	"Number": "Number",
+	CoverageDate: CoverageDate$2,
+	TotalEmployeeShare: TotalEmployeeShare$2,
+	TotalEmployerShare: TotalEmployerShare$2,
+	Dependents: Dependents$2
 };
 
 var ReportingTo$1 = "مفوض الى";
@@ -435,6 +483,29 @@ var ThereIsNoDegreesYet$1 = "لا توجد مؤهلات علمية بعد";
 var ThereIsNoExperiencesYet$1 = "لا توجد خبرات بعد";
 var ThereIsNoDependentsYet$1 = "لا يوجد معالين حتى الآن";
 var DependentTypeName$1 = "نوع المعال";
+var Vacations$1 = "الاجازات";
+var Indemnity$1 = "التعويض";
+var MedicalInsurance$1 = "التأمين الطبي";
+var Tickets$1 = "تذاكر";
+var Others$1 = "آخرين";
+var Type$1 = "النوع";
+var Entitlement$1 = "الاستحقاق";
+var IndemnityEligibility$1 = "أهلية التعويض";
+var OvertimeEligibility$1 = "أهلية العمل الإضافي";
+var SocialSecurityEligibility$1 = "أهلية الضمان الاجتماعي";
+var Class$1 = "الفئة";
+var Sector$1 = "القطاع";
+var Me$1 = "أنا";
+var Eligible$1 = "مؤهل";
+var NotEligible$1 = "غير مؤهل";
+var Member$1 = "عضو";
+var NotMember$1 = "ليس عضوًا";
+var NotCoveredByMedicalInsurance$1 = "غير مشمول بالتأمين الطبي";
+var NoTicketEntitlement$1 = "لا يوجد استحقاق تذكرة";
+var CoverageDate$1 = "تاريخ التغطية";
+var TotalEmployeeShare$1 = "إجمالي حصة الموظف";
+var TotalEmployerShare$1 = "إجمالي حصة صاحب العمل";
+var Dependents$1 = "المعالين";
 var ar = {
 	ReportingTo: ReportingTo$1,
 	NotAnknown: NotAnknown$1,
@@ -557,7 +628,32 @@ var ar = {
 	ThereIsNoDegreesYet: ThereIsNoDegreesYet$1,
 	ThereIsNoExperiencesYet: ThereIsNoExperiencesYet$1,
 	ThereIsNoDependentsYet: ThereIsNoDependentsYet$1,
-	DependentTypeName: DependentTypeName$1
+	DependentTypeName: DependentTypeName$1,
+	Vacations: Vacations$1,
+	Indemnity: Indemnity$1,
+	MedicalInsurance: MedicalInsurance$1,
+	Tickets: Tickets$1,
+	Others: Others$1,
+	Type: Type$1,
+	Entitlement: Entitlement$1,
+	IndemnityEligibility: IndemnityEligibility$1,
+	OvertimeEligibility: OvertimeEligibility$1,
+	SocialSecurityEligibility: SocialSecurityEligibility$1,
+	Class: Class$1,
+	Sector: Sector$1,
+	Me: Me$1,
+	Eligible: Eligible$1,
+	NotEligible: NotEligible$1,
+	Member: Member$1,
+	NotMember: NotMember$1,
+	"There'sNoInformationInThisSectionYet": "لا توجد معلومات في هذا القسم حتى الآن",
+	NotCoveredByMedicalInsurance: NotCoveredByMedicalInsurance$1,
+	NoTicketEntitlement: NoTicketEntitlement$1,
+	"Number": "العدد",
+	CoverageDate: CoverageDate$1,
+	TotalEmployeeShare: TotalEmployeeShare$1,
+	TotalEmployerShare: TotalEmployerShare$1,
+	Dependents: Dependents$1
 };
 
 var ReportingTo = "Rapport à";
@@ -680,6 +776,29 @@ var ThereIsNoDegreesYet = "Il n'y a pas encore de diplomes";
 var ThereIsNoExperiencesYet = "Il n'y a pas encore d'experiences";
 var ThereIsNoDependentsYet = "Il n'y a pas encore de personnes à charge";
 var DependentTypeName = "Type de personne à charge";
+var Vacations = "Vacances";
+var Indemnity = "Indemnité";
+var MedicalInsurance = "Assurance médicale";
+var Tickets = "Billets";
+var Others = "Autres";
+var Type = "Type";
+var Entitlement = "Droit";
+var IndemnityEligibility = "Admissibilité à l'indemnisation";
+var OvertimeEligibility = "Admissibilité aux heures supplémentaires";
+var SocialSecurityEligibility = "Admissibilité à la sécurité sociale";
+var Class = "Classe";
+var Sector = "Secteur";
+var Me = "Moi";
+var Eligible = "Admissible";
+var NotEligible = "Non éligible";
+var Member = "Membre";
+var NotMember = "Non membre";
+var NotCoveredByMedicalInsurance = "Non couvert par l'assurance médicale";
+var NoTicketEntitlement = "Aucun droit au billet";
+var CoverageDate = "Date de couverture";
+var TotalEmployeeShare = "Part totale des employés";
+var TotalEmployerShare = "Part totale de l'employeur";
+var Dependents = "Personnes à charge";
 var fr = {
 	ReportingTo: ReportingTo,
 	NotAnknown: NotAnknown,
@@ -803,7 +922,32 @@ var fr = {
 	ThereIsNoDegreesYet: ThereIsNoDegreesYet,
 	ThereIsNoExperiencesYet: ThereIsNoExperiencesYet,
 	ThereIsNoDependentsYet: ThereIsNoDependentsYet,
-	DependentTypeName: DependentTypeName
+	DependentTypeName: DependentTypeName,
+	Vacations: Vacations,
+	Indemnity: Indemnity,
+	MedicalInsurance: MedicalInsurance,
+	Tickets: Tickets,
+	Others: Others,
+	Type: Type,
+	Entitlement: Entitlement,
+	IndemnityEligibility: IndemnityEligibility,
+	OvertimeEligibility: OvertimeEligibility,
+	SocialSecurityEligibility: SocialSecurityEligibility,
+	Class: Class,
+	Sector: Sector,
+	Me: Me,
+	Eligible: Eligible,
+	NotEligible: NotEligible,
+	Member: Member,
+	NotMember: NotMember,
+	"There'sNoInformationInThisSectionYet": "Il n'y a pas encore d'informations dans cette section",
+	NotCoveredByMedicalInsurance: NotCoveredByMedicalInsurance,
+	NoTicketEntitlement: NoTicketEntitlement,
+	"Number": "Nombre",
+	CoverageDate: CoverageDate,
+	TotalEmployeeShare: TotalEmployeeShare,
+	TotalEmployerShare: TotalEmployerShare,
+	Dependents: Dependents
 };
 
 const BUILT_IN_LEXICONS = { en, ar, fr };
@@ -911,6 +1055,8 @@ class EntitlementsCacheService {
     indemnityDetails$ = null;
     ticketDetails$ = null;
     medicalInsuranceDetails$ = null;
+    overtimeDetails$ = null;
+    socialSecurityDetails$ = null;
     getVacationDetails(baseUrl) {
         return this.baseUrl === baseUrl ? this.vacationDetails$ : null;
     }
@@ -939,12 +1085,28 @@ class EntitlementsCacheService {
         this.ensureBaseUrl(baseUrl);
         this.medicalInsuranceDetails$ = value;
     }
+    getOvertimeDetails(baseUrl) {
+        return this.baseUrl === baseUrl ? this.overtimeDetails$ : null;
+    }
+    setOvertimeDetails(baseUrl, value) {
+        this.ensureBaseUrl(baseUrl);
+        this.overtimeDetails$ = value;
+    }
+    getSocialSecurityDetails(baseUrl) {
+        return this.baseUrl === baseUrl ? this.socialSecurityDetails$ : null;
+    }
+    setSocialSecurityDetails(baseUrl, value) {
+        this.ensureBaseUrl(baseUrl);
+        this.socialSecurityDetails$ = value;
+    }
     clear() {
         this.baseUrl = '';
         this.vacationDetails$ = null;
         this.indemnityDetails$ = null;
         this.ticketDetails$ = null;
         this.medicalInsuranceDetails$ = null;
+        this.overtimeDetails$ = null;
+        this.socialSecurityDetails$ = null;
     }
     ensureBaseUrl(baseUrl) {
         if (this.baseUrl && this.baseUrl !== baseUrl) {
@@ -1458,6 +1620,42 @@ class HRSelfWidgetsService {
         this.entitlementsCacheService.setMedicalInsuranceDetails(baseUrl, request$);
         return request$;
     }
+    getEntitlementsOvertime(baseUrl, forceRefresh = false) {
+        if (!forceRefresh) {
+            const cachedRequest$ = this.entitlementsCacheService.getOvertimeDetails(baseUrl);
+            if (cachedRequest$) {
+                return cachedRequest$;
+            }
+        }
+        const request$ = this.http
+            .get(`${baseUrl}/hr/widgets/me/profile/entitlements/overtime`, {
+            headers: this.headers
+        })
+            .pipe(shareReplay(1), catchError((error) => {
+            this.entitlementsCacheService.clear();
+            return throwError(() => error);
+        }));
+        this.entitlementsCacheService.setOvertimeDetails(baseUrl, request$);
+        return request$;
+    }
+    getEntitlementsSocialSecurity(baseUrl, forceRefresh = false) {
+        if (!forceRefresh) {
+            const cachedRequest$ = this.entitlementsCacheService.getSocialSecurityDetails(baseUrl);
+            if (cachedRequest$) {
+                return cachedRequest$;
+            }
+        }
+        const request$ = this.http
+            .get(`${baseUrl}/hr/widgets/me/profile/entitlements/social-security`, {
+            headers: this.headers
+        })
+            .pipe(shareReplay(1), catchError((error) => {
+            this.entitlementsCacheService.clear();
+            return throwError(() => error);
+        }));
+        this.entitlementsCacheService.setSocialSecurityDetails(baseUrl, request$);
+        return request$;
+    }
     getEmployeeDegrees(baseUrl, forceRefresh = false) {
         if (!forceRefresh) {
             const cachedRequest$ = this.qualificationsCacheService.getDegrees(baseUrl);
@@ -2848,8 +3046,8 @@ class ProfilePersonalInfoContactWidgetComponent {
     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';
+    columnClass = 'col-6';
+    responsiveTopSpacingColumnClass = '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';
@@ -2888,11 +3086,11 @@ class ProfilePersonalInfoContactWidgetComponent {
         });
     }
     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", emptyStateContainerClass: "emptyStateContainerClass", emptyStateTextClass: "emptyStateTextClass", contactIcon: "contactIcon", emergencyContactIcon: "emergencyContactIcon", sectionTitle: "sectionTitle", showEmergencyContact: "showEmergencyContact", emergencyContactRowClass: "emergencyContactRowClass" }, outputs: { isLoadingChanged: "isLoadingChanged", errorOccurred: "errorOccurred" }, ngImport: i0, template: "<sky-section-divider [fontAwesomeIcon]=\"contactIcon\"\r\n                     [text]=\"(sectionTitle | HRTranslate|uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n@if(employeePersonalInfoContactDetails){\r\n<div [ngClass]=\"rowClass\">\r\n  <div [ngClass]=\"columnClass\">\r\n    <hr-info-field [labelKey]=\"'MobileNumber'\"\r\n                   [value]=\"employeePersonalInfoContactDetails.MobileNumber\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\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]=\"emergencyContactLabelClass\">\r\n      &#x2022; {{'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}\r\n}@else{\r\n<sky-empty-design-card [containerClass]=\"emptyStateContainerClass\"\r\n                       [cardBodyClass]=\"''\"\r\n                       [cardBodyContainerClass]=\"''\"\r\n                       [visibleIcon]=\"false\"\r\n                       [visibleQuickAction]=\"false\"\r\n                       [emptyTextClass]=\"emptyStateTextClass\"\r\n                       [emptyText]=\"isLoading ? ((sectionTitle | HRTranslate) + ' ' + ('IsLoading' | HRTranslate)) : ('ThereIsNoContactYet' | HRTranslate)\">\r\n</sky-empty-design-card>\r\n}", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i2$1.UpperCasePipe, name: "uppercase" }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "pipe", type: HRTranslatePipe, name: "HRTranslate" }, { kind: "component", type: SkySectionDividerComponent, selector: "sky-section-divider", inputs: ["text", "fontAwesomeIcon", "textClass", "dividerClass", "iconClass"] }, { kind: "component", type: SkyEmptyDesignCardComponent, selector: "sky-empty-design-card", inputs: ["emptyIcon", "emptyIconClass", "emptyText", "emptyTextClass", "actionTitle", "actionIcon", "actionDisabled", "textColor", "disabledTitleClass", "activeTitleClass", "disabledIconClass", "activeIconClass", "actionClass", "containerClass", "cardBodyClass", "cardBodyContainerClass", "visibleIcon", "visibleQuickAction"], outputs: ["onActionClick"] }, { kind: "component", type: HRInfoFieldComponent, selector: "hr-info-field", inputs: ["labelKey", "value", "labelClass", "valueClass", "fallbackValue"] }] });
+    static ɵ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", emptyStateContainerClass: "emptyStateContainerClass", emptyStateTextClass: "emptyStateTextClass", contactIcon: "contactIcon", emergencyContactIcon: "emergencyContactIcon", sectionTitle: "sectionTitle", showEmergencyContact: "showEmergencyContact", emergencyContactRowClass: "emergencyContactRowClass" }, outputs: { isLoadingChanged: "isLoadingChanged", errorOccurred: "errorOccurred" }, ngImport: i0, template: "<sky-section-divider [fontAwesomeIcon]=\"contactIcon\"\r\n                     [text]=\"(sectionTitle | HRTranslate|uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n@if(employeePersonalInfoContactDetails){\r\n<div [ngClass]=\"rowClass\">\r\n  <div [ngClass]=\"columnClass\">\r\n    <hr-info-field [labelKey]=\"'MobileNumber'\"\r\n                   [value]=\"employeePersonalInfoContactDetails.MobileNumber\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\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  <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 [ngClass]=\"responsiveTopSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'BusinessEmail'\"\r\n                   [value]=\"employeePersonalInfoContactDetails.BusinessEmail\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n</div>\r\n@if(showEmergencyContact)\r\n{\r\n<div [ngClass]=\"rowClass\">\r\n  <div class=\"col-12\">\r\n    <div [ngClass]=\"emergencyContactLabelClass\">\r\n      &#x2022; {{'EmergencyContact' | HRTranslate}}\r\n    </div>\r\n  </div>\r\n</div>\r\n<div [ngClass]=\"emergencyContactRowClass\">\r\n  <div [ngClass]=\"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}\r\n}@else{\r\n<sky-empty-design-card [containerClass]=\"emptyStateContainerClass\"\r\n                       [cardBodyClass]=\"''\"\r\n                       [cardBodyContainerClass]=\"''\"\r\n                       [visibleIcon]=\"false\"\r\n                       [visibleQuickAction]=\"false\"\r\n                       [emptyTextClass]=\"emptyStateTextClass\"\r\n                       [emptyText]=\"isLoading ? ((sectionTitle | HRTranslate) + ' ' + ('IsLoading' | HRTranslate)) : ('ThereIsNoContactYet' | HRTranslate)\">\r\n</sky-empty-design-card>\r\n}", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i2$1.UpperCasePipe, name: "uppercase" }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "pipe", type: HRTranslatePipe, name: "HRTranslate" }, { kind: "component", type: SkySectionDividerComponent, selector: "sky-section-divider", inputs: ["text", "fontAwesomeIcon", "textClass", "dividerClass", "iconClass"] }, { kind: "component", type: SkyEmptyDesignCardComponent, selector: "sky-empty-design-card", inputs: ["emptyIcon", "emptyIconClass", "emptyText", "emptyTextClass", "actionTitle", "actionIcon", "actionDisabled", "textColor", "disabledTitleClass", "activeTitleClass", "disabledIconClass", "activeIconClass", "actionClass", "containerClass", "cardBodyClass", "cardBodyContainerClass", "visibleIcon", "visibleQuickAction"], outputs: ["onActionClick"] }, { kind: "component", type: HRInfoFieldComponent, selector: "hr-info-field", inputs: ["labelKey", "value", "labelClass", "valueClass", "fallbackValue"] }] });
 }
 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, SkyEmptyDesignCardComponent, HRInfoFieldComponent], template: "<sky-section-divider [fontAwesomeIcon]=\"contactIcon\"\r\n                     [text]=\"(sectionTitle | HRTranslate|uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n@if(employeePersonalInfoContactDetails){\r\n<div [ngClass]=\"rowClass\">\r\n  <div [ngClass]=\"columnClass\">\r\n    <hr-info-field [labelKey]=\"'MobileNumber'\"\r\n                   [value]=\"employeePersonalInfoContactDetails.MobileNumber\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\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]=\"emergencyContactLabelClass\">\r\n      &#x2022; {{'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}\r\n}@else{\r\n<sky-empty-design-card [containerClass]=\"emptyStateContainerClass\"\r\n                       [cardBodyClass]=\"''\"\r\n                       [cardBodyContainerClass]=\"''\"\r\n                       [visibleIcon]=\"false\"\r\n                       [visibleQuickAction]=\"false\"\r\n                       [emptyTextClass]=\"emptyStateTextClass\"\r\n                       [emptyText]=\"isLoading ? ((sectionTitle | HRTranslate) + ' ' + ('IsLoading' | HRTranslate)) : ('ThereIsNoContactYet' | HRTranslate)\">\r\n</sky-empty-design-card>\r\n}" }]
+            args: [{ selector: 'hr-profile-personal-info-contact-widget', standalone: true, imports: [CommonModule, FontAwesomeModule, HRTranslatePipe, SkySectionDividerComponent, SkyEmptyDesignCardComponent, HRInfoFieldComponent], template: "<sky-section-divider [fontAwesomeIcon]=\"contactIcon\"\r\n                     [text]=\"(sectionTitle | HRTranslate|uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n@if(employeePersonalInfoContactDetails){\r\n<div [ngClass]=\"rowClass\">\r\n  <div [ngClass]=\"columnClass\">\r\n    <hr-info-field [labelKey]=\"'MobileNumber'\"\r\n                   [value]=\"employeePersonalInfoContactDetails.MobileNumber\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\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  <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 [ngClass]=\"responsiveTopSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'BusinessEmail'\"\r\n                   [value]=\"employeePersonalInfoContactDetails.BusinessEmail\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n</div>\r\n@if(showEmergencyContact)\r\n{\r\n<div [ngClass]=\"rowClass\">\r\n  <div class=\"col-12\">\r\n    <div [ngClass]=\"emergencyContactLabelClass\">\r\n      &#x2022; {{'EmergencyContact' | HRTranslate}}\r\n    </div>\r\n  </div>\r\n</div>\r\n<div [ngClass]=\"emergencyContactRowClass\">\r\n  <div [ngClass]=\"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}\r\n}@else{\r\n<sky-empty-design-card [containerClass]=\"emptyStateContainerClass\"\r\n                       [cardBodyClass]=\"''\"\r\n                       [cardBodyContainerClass]=\"''\"\r\n                       [visibleIcon]=\"false\"\r\n                       [visibleQuickAction]=\"false\"\r\n                       [emptyTextClass]=\"emptyStateTextClass\"\r\n                       [emptyText]=\"isLoading ? ((sectionTitle | HRTranslate) + ' ' + ('IsLoading' | HRTranslate)) : ('ThereIsNoContactYet' | HRTranslate)\">\r\n</sky-empty-design-card>\r\n}" }]
         }], ctorParameters: () => [{ type: HRSelfWidgetsService }], propDecorators: { baseUrl: [{
                 type: Input,
                 args: [{ required: true }]
@@ -4042,6 +4240,645 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                 type: Output
             }] } });
 
+class WidgetCardComponent {
+    cardClass = 'bg-white shadow-sm p-3 border-1 border';
+    height = 110;
+    contentTemplate;
+    context;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: WidgetCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: WidgetCardComponent, isStandalone: true, selector: "hr-widget-card", inputs: { cardClass: "cardClass", height: "height", contentTemplate: "contentTemplate", context: "context" }, ngImport: i0, template: "<div [class]=\"cardClass\" [style.height.px]=\"height\" style=\"overflow: hidden;\">\n  <ng-container *ngTemplateOutlet=\"contentTemplate; context: context\">\n  </ng-container>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: WidgetCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'hr-widget-card', standalone: true, imports: [CommonModule], template: "<div [class]=\"cardClass\" [style.height.px]=\"height\" style=\"overflow: hidden;\">\n  <ng-container *ngTemplateOutlet=\"contentTemplate; context: context\">\n  </ng-container>\n</div>\n" }]
+        }], propDecorators: { cardClass: [{
+                type: Input
+            }], height: [{
+                type: Input
+            }], contentTemplate: [{
+                type: Input
+            }], context: [{
+                type: Input
+            }] } });
+
+class DependentsWidgetComponent {
+    service;
+    baseUrl = '';
+    sectionTitle = 'Dependents';
+    icon = faUsersLine;
+    headerIconClass = 'primary-icon-xl';
+    headerTextClass = 'fs-16 mt-2 text-secondary';
+    headerDividerClass = 'flex-grow-1 ms-2';
+    emptyStateContainerClass = 'd-flex flex-column justify-content-center align-items-center my-5';
+    emptyStateTextClass = 'field-secondary-label-md';
+    dependents = [];
+    isLoading = true;
+    isLoadingChanged = new EventEmitter();
+    constructor(service) {
+        this.service = service;
+    }
+    ngOnInit() {
+        if (!this.baseUrl) {
+            this.isLoading = false;
+            return;
+        }
+        this.isLoadingChanged.emit(true);
+        this.service.getEmployeeDependents(this.baseUrl).subscribe({
+            next: (res) => {
+                this.dependents = res ?? [];
+                this.isLoading = false;
+                this.isLoadingChanged.emit(false);
+            },
+            error: () => {
+                this.dependents = [];
+                this.isLoading = false;
+                this.isLoadingChanged.emit(false);
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: DependentsWidgetComponent, deps: [{ token: HRSelfWidgetsService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: DependentsWidgetComponent, isStandalone: true, selector: "hr-profile-dependents-widget", inputs: { baseUrl: "baseUrl", sectionTitle: "sectionTitle", icon: "icon", headerIconClass: "headerIconClass", headerTextClass: "headerTextClass", headerDividerClass: "headerDividerClass", emptyStateContainerClass: "emptyStateContainerClass", emptyStateTextClass: "emptyStateTextClass" }, outputs: { isLoadingChanged: "isLoadingChanged" }, ngImport: i0, template: "<sky-section-divider [fontAwesomeIcon]=\"icon\"\r\n                     [text]=\"(sectionTitle | HRTranslate | uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n<div class=\"mt-4\">\r\n  <div class=\"row mb-5\">\r\n    @if(dependents.length){\r\n    @for(d of dependents; track d){\r\n    <div class=\"col-lg-4 col-6 mt-4\">\r\n\r\n      <hr-widget-card [contentTemplate]=\"dependentTemplate\"\r\n                       [context]=\"{ d: d }\"\r\n                       [height]=\"110\">\r\n      </hr-widget-card>\r\n\r\n    </div>\r\n    }\r\n    }\r\n    @else {\r\n\r\n    <sky-empty-design-card [containerClass]=\"emptyStateContainerClass\"\r\n                           [cardBodyClass]=\"''\"\r\n                           [cardBodyContainerClass]=\"''\"\r\n                           [visibleIcon]=\"false\"\r\n                           [visibleQuickAction]=\"false\"\r\n                           [emptyTextClass]=\"emptyStateTextClass\"\r\n                           [emptyText]=\"isLoading ? ((sectionTitle | HRTranslate) + ' ' + ('IsLoading' | HRTranslate)) : ('ThereIsNoDependentsYet' | HRTranslate)\">\r\n    </sky-empty-design-card>\r\n\r\n\r\n    }\r\n  </div>\r\n</div>\r\n\r\n<ng-template #dependentTemplate let-d=\"d\">\r\n  <p class=\"text-dark fs-16 mb-2 d-flex\">\r\n    <span class=\"text-truncate cursor-pointer\" [title]=\"d.DependantName\">\r\n      {{ d.DependentName }}\r\n    </span>\r\n    <span class=\"mx-1\">({{ d.DependentTypeName }})</span>\r\n  </p>\r\n  <p class=\"mb-2 fs-12\">\r\n    <span class=\"text-muted\">{{'BirthDate'|HRTranslate}}: </span>\r\n    <span class=\"text-secondary mx-1\">{{ d.BirthDate | date:'dd/MM/yyyy' }}</span>\r\n  </p>\r\n  <p class=\"mb-0 fs-12\">\r\n    <span class=\"text-muted\">{{'NationalNumber'|HRTranslate }}: </span>\r\n    @if(d.NationalNumber){\r\n    <span class=\"text-secondary mx-1\">{{ d.NationalNumber }}</span>\r\n    } @else {\r\n    <span class=\"text-secondary mx-1\">\u2014</span>\r\n    }\r\n  </p>\r\n</ng-template>\r\n\r\n\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i2$1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i2$1.DatePipe, name: "date" }, { kind: "component", type: WidgetCardComponent, selector: "hr-widget-card", inputs: ["cardClass", "height", "contentTemplate", "context"] }, { kind: "pipe", type: HRTranslatePipe, name: "HRTranslate" }, { kind: "component", type: SkyEmptyDesignCardComponent, selector: "sky-empty-design-card", inputs: ["emptyIcon", "emptyIconClass", "emptyText", "emptyTextClass", "actionTitle", "actionIcon", "actionDisabled", "textColor", "disabledTitleClass", "activeTitleClass", "disabledIconClass", "activeIconClass", "actionClass", "containerClass", "cardBodyClass", "cardBodyContainerClass", "visibleIcon", "visibleQuickAction"], outputs: ["onActionClick"] }, { kind: "component", type: SkySectionDividerComponent, selector: "sky-section-divider", inputs: ["text", "fontAwesomeIcon", "textClass", "dividerClass", "iconClass"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: DependentsWidgetComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'hr-profile-dependents-widget', standalone: true, imports: [CommonModule, WidgetCardComponent, HRTranslatePipe, SkyEmptyDesignCardComponent, SkySectionDividerComponent], template: "<sky-section-divider [fontAwesomeIcon]=\"icon\"\r\n                     [text]=\"(sectionTitle | HRTranslate | uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n<div class=\"mt-4\">\r\n  <div class=\"row mb-5\">\r\n    @if(dependents.length){\r\n    @for(d of dependents; track d){\r\n    <div class=\"col-lg-4 col-6 mt-4\">\r\n\r\n      <hr-widget-card [contentTemplate]=\"dependentTemplate\"\r\n                       [context]=\"{ d: d }\"\r\n                       [height]=\"110\">\r\n      </hr-widget-card>\r\n\r\n    </div>\r\n    }\r\n    }\r\n    @else {\r\n\r\n    <sky-empty-design-card [containerClass]=\"emptyStateContainerClass\"\r\n                           [cardBodyClass]=\"''\"\r\n                           [cardBodyContainerClass]=\"''\"\r\n                           [visibleIcon]=\"false\"\r\n                           [visibleQuickAction]=\"false\"\r\n                           [emptyTextClass]=\"emptyStateTextClass\"\r\n                           [emptyText]=\"isLoading ? ((sectionTitle | HRTranslate) + ' ' + ('IsLoading' | HRTranslate)) : ('ThereIsNoDependentsYet' | HRTranslate)\">\r\n    </sky-empty-design-card>\r\n\r\n\r\n    }\r\n  </div>\r\n</div>\r\n\r\n<ng-template #dependentTemplate let-d=\"d\">\r\n  <p class=\"text-dark fs-16 mb-2 d-flex\">\r\n    <span class=\"text-truncate cursor-pointer\" [title]=\"d.DependantName\">\r\n      {{ d.DependentName }}\r\n    </span>\r\n    <span class=\"mx-1\">({{ d.DependentTypeName }})</span>\r\n  </p>\r\n  <p class=\"mb-2 fs-12\">\r\n    <span class=\"text-muted\">{{'BirthDate'|HRTranslate}}: </span>\r\n    <span class=\"text-secondary mx-1\">{{ d.BirthDate | date:'dd/MM/yyyy' }}</span>\r\n  </p>\r\n  <p class=\"mb-0 fs-12\">\r\n    <span class=\"text-muted\">{{'NationalNumber'|HRTranslate }}: </span>\r\n    @if(d.NationalNumber){\r\n    <span class=\"text-secondary mx-1\">{{ d.NationalNumber }}</span>\r\n    } @else {\r\n    <span class=\"text-secondary mx-1\">\u2014</span>\r\n    }\r\n  </p>\r\n</ng-template>\r\n\r\n\r\n" }]
+        }], ctorParameters: () => [{ type: HRSelfWidgetsService }], propDecorators: { baseUrl: [{
+                type: Input
+            }], sectionTitle: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], headerIconClass: [{
+                type: Input
+            }], headerTextClass: [{
+                type: Input
+            }], headerDividerClass: [{
+                type: Input
+            }], emptyStateContainerClass: [{
+                type: Input
+            }], emptyStateTextClass: [{
+                type: Input
+            }], isLoadingChanged: [{
+                type: Output
+            }] } });
+
+class ProfileEntitlementsVacationsWidgetComponent {
+    selfWidgetsService;
+    baseUrl = '';
+    sectionTitle = 'Vacations';
+    vacationsIcon = faIslandTropical;
+    headerIconClass = 'primary-icon-xl';
+    headerTextClass = 'mt-2 field-secondary-label-lg';
+    headerDividerClass = 'flex-grow-1 ms-2';
+    rowClass = 'row mt-4';
+    labelClass = 'field-secondary-label-sm';
+    valueClass = 'fs-14 fw-meduim mt-2';
+    labelColumnClass = 'col-6';
+    valueColumnClass = 'col-6';
+    emptyStateContainerClass = 'd-flex flex-column justify-content-center align-items-center my-5';
+    emptyStateTextClass = 'field-secondary-label-md';
+    isLoadingChanged = new EventEmitter();
+    errorOccurred = new EventEmitter();
+    vacationEntitlements = [];
+    isLoading = true;
+    constructor(selfWidgetsService) {
+        this.selfWidgetsService = selfWidgetsService;
+    }
+    ngOnInit() {
+        if (!this.baseUrl) {
+            this.isLoading = false;
+            return;
+        }
+        this.loadData();
+    }
+    loadData() {
+        this.isLoadingChanged.emit(true);
+        this.selfWidgetsService.getEntitlementsVacations(this.baseUrl).subscribe({
+            next: (data) => {
+                this.vacationEntitlements = data ?? [];
+                this.isLoading = false;
+                this.isLoadingChanged.emit(false);
+            },
+            error: (error) => {
+                this.vacationEntitlements = [];
+                this.isLoading = false;
+                this.errorOccurred.emit(error?.error?.ResponseData?.Errors?.[0]?.Message);
+                this.isLoadingChanged.emit(false);
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ProfileEntitlementsVacationsWidgetComponent, deps: [{ token: HRSelfWidgetsService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: ProfileEntitlementsVacationsWidgetComponent, isStandalone: true, selector: "hr-profile-entitlements-vacations-widget", inputs: { baseUrl: "baseUrl", sectionTitle: "sectionTitle", vacationsIcon: "vacationsIcon", headerIconClass: "headerIconClass", headerTextClass: "headerTextClass", headerDividerClass: "headerDividerClass", rowClass: "rowClass", labelClass: "labelClass", valueClass: "valueClass", labelColumnClass: "labelColumnClass", valueColumnClass: "valueColumnClass", emptyStateContainerClass: "emptyStateContainerClass", emptyStateTextClass: "emptyStateTextClass" }, outputs: { isLoadingChanged: "isLoadingChanged", errorOccurred: "errorOccurred" }, ngImport: i0, template: "<sky-section-divider [fontAwesomeIcon]=\"vacationsIcon\"\r\n                     [text]=\"(sectionTitle | HRTranslate | uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n@if(vacationEntitlements.length > 0){\r\n<div [class]=\"rowClass\">\r\n  <div [class]=\"labelClass\" [ngClass]=\"labelColumnClass\">{{'Type' | HRTranslate}}</div>\r\n  <div [class]=\"labelClass\" [ngClass]=\"valueColumnClass\">{{'Entitlement' | HRTranslate}}</div>\r\n  @for (vacationEntitlement of vacationEntitlements; track vacationEntitlement;){\r\n  <div [class]=\"valueClass\" [ngClass]=\"labelColumnClass\">\r\n    {{vacationEntitlement.VacationTypeName}}\r\n  </div>\r\n  <div [class]=\"valueClass\" [ngClass]=\"valueColumnClass\">\r\n    {{vacationEntitlement.EntitlementDays}}\r\n  </div>\r\n  }\r\n</div>\r\n}@else{\r\n<sky-empty-design-card [containerClass]=\"emptyStateContainerClass\"\r\n                       [cardBodyClass]=\"''\"\r\n                       [cardBodyContainerClass]=\"''\"\r\n                       [visibleIcon]=\"false\"\r\n                       [visibleQuickAction]=\"false\"\r\n                       [emptyTextClass]=\"emptyStateTextClass\"\r\n                       [emptyText]=\"isLoading ? ((sectionTitle | HRTranslate) + ' ' + ('IsLoading' | HRTranslate)) : ('There\\'sNoInformationInThisSectionYet' | HRTranslate)\">\r\n</sky-empty-design-card>\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$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: SkyEmptyDesignCardComponent, selector: "sky-empty-design-card", inputs: ["emptyIcon", "emptyIconClass", "emptyText", "emptyTextClass", "actionTitle", "actionIcon", "actionDisabled", "textColor", "disabledTitleClass", "activeTitleClass", "disabledIconClass", "activeIconClass", "actionClass", "containerClass", "cardBodyClass", "cardBodyContainerClass", "visibleIcon", "visibleQuickAction"], outputs: ["onActionClick"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ProfileEntitlementsVacationsWidgetComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'hr-profile-entitlements-vacations-widget', standalone: true, imports: [CommonModule, HRTranslatePipe, SkySectionDividerComponent, SkyEmptyDesignCardComponent], template: "<sky-section-divider [fontAwesomeIcon]=\"vacationsIcon\"\r\n                     [text]=\"(sectionTitle | HRTranslate | uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n@if(vacationEntitlements.length > 0){\r\n<div [class]=\"rowClass\">\r\n  <div [class]=\"labelClass\" [ngClass]=\"labelColumnClass\">{{'Type' | HRTranslate}}</div>\r\n  <div [class]=\"labelClass\" [ngClass]=\"valueColumnClass\">{{'Entitlement' | HRTranslate}}</div>\r\n  @for (vacationEntitlement of vacationEntitlements; track vacationEntitlement;){\r\n  <div [class]=\"valueClass\" [ngClass]=\"labelColumnClass\">\r\n    {{vacationEntitlement.VacationTypeName}}\r\n  </div>\r\n  <div [class]=\"valueClass\" [ngClass]=\"valueColumnClass\">\r\n    {{vacationEntitlement.EntitlementDays}}\r\n  </div>\r\n  }\r\n</div>\r\n}@else{\r\n<sky-empty-design-card [containerClass]=\"emptyStateContainerClass\"\r\n                       [cardBodyClass]=\"''\"\r\n                       [cardBodyContainerClass]=\"''\"\r\n                       [visibleIcon]=\"false\"\r\n                       [visibleQuickAction]=\"false\"\r\n                       [emptyTextClass]=\"emptyStateTextClass\"\r\n                       [emptyText]=\"isLoading ? ((sectionTitle | HRTranslate) + ' ' + ('IsLoading' | HRTranslate)) : ('There\\'sNoInformationInThisSectionYet' | HRTranslate)\">\r\n</sky-empty-design-card>\r\n}\r\n" }]
+        }], ctorParameters: () => [{ type: HRSelfWidgetsService }], propDecorators: { baseUrl: [{
+                type: Input,
+                args: [{ required: true }]
+            }], sectionTitle: [{
+                type: Input
+            }], vacationsIcon: [{
+                type: Input
+            }], headerIconClass: [{
+                type: Input
+            }], headerTextClass: [{
+                type: Input
+            }], headerDividerClass: [{
+                type: Input
+            }], rowClass: [{
+                type: Input
+            }], labelClass: [{
+                type: Input
+            }], valueClass: [{
+                type: Input
+            }], labelColumnClass: [{
+                type: Input
+            }], valueColumnClass: [{
+                type: Input
+            }], emptyStateContainerClass: [{
+                type: Input
+            }], emptyStateTextClass: [{
+                type: Input
+            }], isLoadingChanged: [{
+                type: Output
+            }], errorOccurred: [{
+                type: Output
+            }] } });
+
+class ProfileEntitlementsIndemnityWidgetComponent {
+    selfWidgetsService;
+    baseUrl = '';
+    currencyCode = '';
+    currencyDecimals = 0;
+    sectionTitle = 'Indemnity';
+    indemnityIcon = faFileSignature;
+    headerIconClass = 'primary-icon-xl';
+    headerTextClass = 'mt-2 field-secondary-label-lg';
+    headerDividerClass = 'flex-grow-1 ms-2';
+    rowClass = 'row mt-4';
+    columnClass = 'col-6';
+    topSpacingColumnClass = 'col-6 mt-4';
+    labelClass = 'field-secondary-label-sm';
+    valueClass = 'fs-14 fw-meduim';
+    dateFormat = 'dd/MM/yyyy';
+    emptyStateContainerClass = 'd-flex flex-column justify-content-center align-items-center my-5';
+    emptyStateTextClass = 'field-secondary-label-md';
+    isLoadingChanged = new EventEmitter();
+    errorOccurred = new EventEmitter();
+    indemnityDetails = null;
+    isLoading = true;
+    constructor(selfWidgetsService) {
+        this.selfWidgetsService = selfWidgetsService;
+    }
+    ngOnInit() {
+        if (!this.baseUrl) {
+            this.isLoading = false;
+            return;
+        }
+        this.loadData();
+    }
+    loadData() {
+        this.isLoadingChanged.emit(true);
+        this.selfWidgetsService.getEntitlementsIndemnity(this.baseUrl).subscribe({
+            next: (data) => {
+                this.indemnityDetails = data;
+                this.isLoading = false;
+                this.isLoadingChanged.emit(false);
+            },
+            error: (error) => {
+                this.indemnityDetails = null;
+                this.isLoading = false;
+                this.errorOccurred.emit(error?.error?.ResponseData?.Errors?.[0]?.Message);
+                this.isLoadingChanged.emit(false);
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ProfileEntitlementsIndemnityWidgetComponent, deps: [{ token: HRSelfWidgetsService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: ProfileEntitlementsIndemnityWidgetComponent, isStandalone: true, selector: "hr-profile-entitlements-indemnity-widget", inputs: { baseUrl: "baseUrl", currencyCode: "currencyCode", currencyDecimals: "currencyDecimals", sectionTitle: "sectionTitle", indemnityIcon: "indemnityIcon", headerIconClass: "headerIconClass", headerTextClass: "headerTextClass", headerDividerClass: "headerDividerClass", rowClass: "rowClass", columnClass: "columnClass", topSpacingColumnClass: "topSpacingColumnClass", labelClass: "labelClass", valueClass: "valueClass", dateFormat: "dateFormat", emptyStateContainerClass: "emptyStateContainerClass", emptyStateTextClass: "emptyStateTextClass" }, outputs: { isLoadingChanged: "isLoadingChanged", errorOccurred: "errorOccurred" }, ngImport: i0, template: "<sky-section-divider [fontAwesomeIcon]=\"indemnityIcon\"\r\n                     [text]=\"(sectionTitle | HRTranslate | uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n@if(indemnityDetails){\r\n<div [class]=\"rowClass\">\r\n  <div [class]=\"columnClass\">\r\n    <hr-info-field labelKey=\"IndemnityEligibility\"\r\n                   [value]=\"(indemnityDetails.IsEligibleForIndemnity ? 'Eligible' : 'NotEligible') | HRTranslate\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [class]=\"columnClass\">\r\n    <hr-info-field labelKey=\"ServiceYears\"\r\n                   [value]=\"'' + (indemnityDetails.IndemnityServiceYears ?? '')\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n\r\n  <div [class]=\"topSpacingColumnClass\">\r\n    <hr-info-field labelKey=\"StartDate\"\r\n                   [value]=\"indemnityDetails.IndemnityStartDate | date: dateFormat\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n</div>\r\n}@else{\r\n<sky-empty-design-card [containerClass]=\"emptyStateContainerClass\"\r\n                       [cardBodyClass]=\"''\"\r\n                       [cardBodyContainerClass]=\"''\"\r\n                       [visibleIcon]=\"false\"\r\n                       [visibleQuickAction]=\"false\"\r\n                       [emptyTextClass]=\"emptyStateTextClass\"\r\n                       [emptyText]=\"isLoading ? ((sectionTitle | HRTranslate) + ' ' + ('IsLoading' | HRTranslate)) : ('There\\'sNoInformationInThisSectionYet' | HRTranslate)\">\r\n</sky-empty-design-card>\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i2$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: SkyEmptyDesignCardComponent, selector: "sky-empty-design-card", inputs: ["emptyIcon", "emptyIconClass", "emptyText", "emptyTextClass", "actionTitle", "actionIcon", "actionDisabled", "textColor", "disabledTitleClass", "activeTitleClass", "disabledIconClass", "activeIconClass", "actionClass", "containerClass", "cardBodyClass", "cardBodyContainerClass", "visibleIcon", "visibleQuickAction"], outputs: ["onActionClick"] }, { kind: "component", type: HRInfoFieldComponent, selector: "hr-info-field", inputs: ["labelKey", "value", "labelClass", "valueClass", "fallbackValue"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ProfileEntitlementsIndemnityWidgetComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'hr-profile-entitlements-indemnity-widget', standalone: true, imports: [CommonModule, HRTranslatePipe, SkySectionDividerComponent, SkyEmptyDesignCardComponent, HRInfoFieldComponent], template: "<sky-section-divider [fontAwesomeIcon]=\"indemnityIcon\"\r\n                     [text]=\"(sectionTitle | HRTranslate | uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n@if(indemnityDetails){\r\n<div [class]=\"rowClass\">\r\n  <div [class]=\"columnClass\">\r\n    <hr-info-field labelKey=\"IndemnityEligibility\"\r\n                   [value]=\"(indemnityDetails.IsEligibleForIndemnity ? 'Eligible' : 'NotEligible') | HRTranslate\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [class]=\"columnClass\">\r\n    <hr-info-field labelKey=\"ServiceYears\"\r\n                   [value]=\"'' + (indemnityDetails.IndemnityServiceYears ?? '')\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n\r\n  <div [class]=\"topSpacingColumnClass\">\r\n    <hr-info-field labelKey=\"StartDate\"\r\n                   [value]=\"indemnityDetails.IndemnityStartDate | date: dateFormat\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n</div>\r\n}@else{\r\n<sky-empty-design-card [containerClass]=\"emptyStateContainerClass\"\r\n                       [cardBodyClass]=\"''\"\r\n                       [cardBodyContainerClass]=\"''\"\r\n                       [visibleIcon]=\"false\"\r\n                       [visibleQuickAction]=\"false\"\r\n                       [emptyTextClass]=\"emptyStateTextClass\"\r\n                       [emptyText]=\"isLoading ? ((sectionTitle | HRTranslate) + ' ' + ('IsLoading' | HRTranslate)) : ('There\\'sNoInformationInThisSectionYet' | HRTranslate)\">\r\n</sky-empty-design-card>\r\n}\r\n" }]
+        }], ctorParameters: () => [{ type: HRSelfWidgetsService }], propDecorators: { baseUrl: [{
+                type: Input,
+                args: [{ required: true }]
+            }], currencyCode: [{
+                type: Input
+            }], currencyDecimals: [{
+                type: Input
+            }], sectionTitle: [{
+                type: Input
+            }], indemnityIcon: [{
+                type: Input
+            }], headerIconClass: [{
+                type: Input
+            }], headerTextClass: [{
+                type: Input
+            }], headerDividerClass: [{
+                type: Input
+            }], rowClass: [{
+                type: Input
+            }], columnClass: [{
+                type: Input
+            }], topSpacingColumnClass: [{
+                type: Input
+            }], labelClass: [{
+                type: Input
+            }], valueClass: [{
+                type: Input
+            }], dateFormat: [{
+                type: Input
+            }], emptyStateContainerClass: [{
+                type: Input
+            }], emptyStateTextClass: [{
+                type: Input
+            }], isLoadingChanged: [{
+                type: Output
+            }], errorOccurred: [{
+                type: Output
+            }] } });
+
+class HRTicketCardComponent {
+    name = '';
+    typeName = '';
+    entitlementText = '';
+    ticketClassName = '';
+    ticketSectorName = '';
+    isDependent = false;
+    cardClass = 'p-3 card-shadow border border-1 h-100 rounded rounded-2';
+    cardHeight = 135;
+    nameClass = 'text-dark fs-16';
+    subtitleClass = 'field-secondary-label-sm mb-3';
+    labelClass = 'text-secondary';
+    valueClass = 'text-dark-gray mx-1';
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: HRTicketCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: HRTicketCardComponent, isStandalone: true, selector: "hr-ticket-card", inputs: { name: "name", typeName: "typeName", entitlementText: "entitlementText", ticketClassName: "ticketClassName", ticketSectorName: "ticketSectorName", isDependent: "isDependent", cardClass: "cardClass", cardHeight: "cardHeight", nameClass: "nameClass", subtitleClass: "subtitleClass", labelClass: "labelClass", valueClass: "valueClass" }, ngImport: i0, template: "<hr-widget-card [cardClass]=\"cardClass\" [height]=\"cardHeight\" [contentTemplate]=\"cardContent\">\r\n</hr-widget-card>\r\n\r\n<ng-template #cardContent>\r\n  <p [class]=\"nameClass\" [ngClass]=\"isDependent ? 'd-flex' : ''\">\r\n    @if(isDependent){\r\n    <span class=\"text-ellipsis-one-line cursor-pointer\" [title]=\"name\">{{name}}</span>\r\n    <span class=\"mx-1\">({{typeName}})</span>\r\n    }@else{\r\n    {{name}} ({{'Me' | HRTranslate}})\r\n    }\r\n  </p>\r\n  <p [class]=\"subtitleClass\">{{entitlementText}}</p>\r\n  @if(!isDependent){\r\n  <p class=\"fs-12 mb-2\"><span [class]=\"labelClass\">{{'Class' | HRTranslate}}:</span> <span [class]=\"valueClass\">{{ticketClassName}}</span></p>\r\n  <p class=\"fs-12\"><span [class]=\"labelClass\">{{'Sector' | HRTranslate}}:</span> <span [class]=\"valueClass\">{{ticketSectorName}}</span></p>\r\n  }\r\n</ng-template>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: HRTranslatePipe, name: "HRTranslate" }, { kind: "component", type: WidgetCardComponent, selector: "hr-widget-card", inputs: ["cardClass", "height", "contentTemplate", "context"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: HRTicketCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'hr-ticket-card', standalone: true, imports: [CommonModule, HRTranslatePipe, WidgetCardComponent], template: "<hr-widget-card [cardClass]=\"cardClass\" [height]=\"cardHeight\" [contentTemplate]=\"cardContent\">\r\n</hr-widget-card>\r\n\r\n<ng-template #cardContent>\r\n  <p [class]=\"nameClass\" [ngClass]=\"isDependent ? 'd-flex' : ''\">\r\n    @if(isDependent){\r\n    <span class=\"text-ellipsis-one-line cursor-pointer\" [title]=\"name\">{{name}}</span>\r\n    <span class=\"mx-1\">({{typeName}})</span>\r\n    }@else{\r\n    {{name}} ({{'Me' | HRTranslate}})\r\n    }\r\n  </p>\r\n  <p [class]=\"subtitleClass\">{{entitlementText}}</p>\r\n  @if(!isDependent){\r\n  <p class=\"fs-12 mb-2\"><span [class]=\"labelClass\">{{'Class' | HRTranslate}}:</span> <span [class]=\"valueClass\">{{ticketClassName}}</span></p>\r\n  <p class=\"fs-12\"><span [class]=\"labelClass\">{{'Sector' | HRTranslate}}:</span> <span [class]=\"valueClass\">{{ticketSectorName}}</span></p>\r\n  }\r\n</ng-template>\r\n" }]
+        }], propDecorators: { name: [{
+                type: Input,
+                args: [{ required: true }]
+            }], typeName: [{
+                type: Input
+            }], entitlementText: [{
+                type: Input
+            }], ticketClassName: [{
+                type: Input
+            }], ticketSectorName: [{
+                type: Input
+            }], isDependent: [{
+                type: Input
+            }], cardClass: [{
+                type: Input
+            }], cardHeight: [{
+                type: Input
+            }], nameClass: [{
+                type: Input
+            }], subtitleClass: [{
+                type: Input
+            }], labelClass: [{
+                type: Input
+            }], valueClass: [{
+                type: Input
+            }] } });
+
+class ProfileEntitlementsTicketWidgetComponent {
+    selfWidgetsService;
+    translatePipe;
+    baseUrl = '';
+    sectionTitle = 'Tickets';
+    ticketsIcon = faTicketsAirline;
+    headerIconClass = 'primary-icon-xl';
+    headerTextClass = 'mt-2 field-secondary-label-lg';
+    headerDividerClass = 'flex-grow-1 ms-2';
+    emptyStateContainerClass = 'd-flex flex-column justify-content-center align-items-center my-5';
+    emptyStateTextClass = 'field-secondary-label-md';
+    columnClass = 'col-lg-4 col-6 mt-4';
+    cardHeight = 135;
+    cardClass = 'p-3 card-shadow border border-1 h-100 rounded rounded-2';
+    nameClass = 'text-dark fs-16';
+    subtitleClass = 'field-secondary-label-sm mb-3';
+    labelClass = 'fs-12 text-secondary';
+    valueClass = 'fs-12 text-dark-gray mx-1';
+    isLoadingChanged = new EventEmitter();
+    errorOccurred = new EventEmitter();
+    ticketDetails = null;
+    isLoading = true;
+    constructor(selfWidgetsService, translatePipe) {
+        this.selfWidgetsService = selfWidgetsService;
+        this.translatePipe = translatePipe;
+    }
+    ngOnInit() {
+        if (!this.baseUrl) {
+            this.isLoading = false;
+            return;
+        }
+        this.loadData();
+    }
+    loadData() {
+        this.isLoadingChanged.emit(true);
+        this.selfWidgetsService.getEntitlementsTicket(this.baseUrl).subscribe({
+            next: (data) => {
+                this.ticketDetails = data;
+                this.isLoading = false;
+                this.isLoadingChanged.emit(false);
+            },
+            error: (error) => {
+                this.ticketDetails = null;
+                this.isLoading = false;
+                this.errorOccurred.emit(error?.error?.ResponseData?.Errors?.[0]?.Message);
+                this.isLoadingChanged.emit(false);
+            }
+        });
+    }
+    getMonthsPerTicketEntitlement(monthsPerTicketEntitlement) {
+        if (monthsPerTicketEntitlement != null && monthsPerTicketEntitlement != 0) {
+            if (monthsPerTicketEntitlement > 1) {
+                const template = this.translatePipe.transform('TicketEvery{{value}}Months');
+                return template.replace('{{value}}', String(monthsPerTicketEntitlement));
+            }
+            else {
+                const template = this.translatePipe.transform('TicketEvery{{value}}Month');
+                return template.replace('{{value}}', String(monthsPerTicketEntitlement));
+            }
+        }
+        else
+            return this.translatePipe.transform('NotEntitled');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ProfileEntitlementsTicketWidgetComponent, deps: [{ token: HRSelfWidgetsService }, { token: HRTranslatePipe }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: ProfileEntitlementsTicketWidgetComponent, isStandalone: true, selector: "hr-profile-entitlements-ticket-widget", inputs: { baseUrl: "baseUrl", sectionTitle: "sectionTitle", ticketsIcon: "ticketsIcon", headerIconClass: "headerIconClass", headerTextClass: "headerTextClass", headerDividerClass: "headerDividerClass", emptyStateContainerClass: "emptyStateContainerClass", emptyStateTextClass: "emptyStateTextClass", columnClass: "columnClass", cardHeight: "cardHeight", cardClass: "cardClass", nameClass: "nameClass", subtitleClass: "subtitleClass", labelClass: "labelClass", valueClass: "valueClass" }, outputs: { isLoadingChanged: "isLoadingChanged", errorOccurred: "errorOccurred" }, ngImport: i0, template: "<sky-section-divider [fontAwesomeIcon]=\"ticketsIcon\"\r\n                     [text]=\"(sectionTitle | HRTranslate | uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n@if(ticketDetails){\r\n@if(!ticketDetails.EmployeeTicketDetails && ticketDetails.DependentTicketDetails?.length == 0){\r\n<sky-empty-design-card [containerClass]=\"emptyStateContainerClass\"\r\n                       [cardBodyClass]=\"''\"\r\n                       [cardBodyContainerClass]=\"''\"\r\n                       [visibleIcon]=\"false\"\r\n                       [visibleQuickAction]=\"false\"\r\n                       [emptyTextClass]=\"emptyStateTextClass\"\r\n                       [emptyText]=\"'NoTicketEntitlement' | HRTranslate\">\r\n</sky-empty-design-card>\r\n}@else{\r\n<div class=\"row mb-5\">\r\n  @if(ticketDetails.EmployeeTicketDetails){\r\n  <div [class]=\"columnClass\">\r\n    <hr-ticket-card [name]=\"ticketDetails.EmployeeTicketDetails.EmployeeFirstName\"\r\n                     [entitlementText]=\"getMonthsPerTicketEntitlement(ticketDetails.EmployeeTicketDetails.MonthsPerTicketEntitlement)\"\r\n                     [ticketClassName]=\"ticketDetails.EmployeeTicketDetails.TicketClassName\"\r\n                     [ticketSectorName]=\"ticketDetails.EmployeeTicketDetails.TicketSectorName\"\r\n                     [cardClass]=\"cardClass\"\r\n                     [cardHeight]=\"cardHeight\"\r\n                     [nameClass]=\"nameClass\"\r\n                     [subtitleClass]=\"subtitleClass\"\r\n                     [labelClass]=\"labelClass\"\r\n                     [valueClass]=\"valueClass\">\r\n    </hr-ticket-card>\r\n  </div>\r\n  }\r\n  @for (dependent of ticketDetails.DependentTicketDetails; track dependent;){\r\n  <div [class]=\"columnClass\">\r\n    <hr-ticket-card [name]=\"dependent.DependentName\"\r\n                     [typeName]=\"dependent.DependentTypeName\"\r\n                     [entitlementText]=\"getMonthsPerTicketEntitlement(dependent.MonthsPerTicketEntitlement)\"\r\n                     [isDependent]=\"true\"\r\n                     [cardClass]=\"cardClass\"\r\n                     [cardHeight]=\"cardHeight\"\r\n                     [nameClass]=\"nameClass\"\r\n                     [subtitleClass]=\"subtitleClass\">\r\n    </hr-ticket-card>\r\n  </div>\r\n  }\r\n</div>\r\n}\r\n}@else{\r\n<sky-empty-design-card [containerClass]=\"emptyStateContainerClass\"\r\n                       [cardBodyClass]=\"''\"\r\n                       [cardBodyContainerClass]=\"''\"\r\n                       [visibleIcon]=\"false\"\r\n                       [visibleQuickAction]=\"false\"\r\n                       [emptyTextClass]=\"emptyStateTextClass\"\r\n                       [emptyText]=\"isLoading ? ((sectionTitle | HRTranslate) + ' ' + ('IsLoading' | HRTranslate)) : ('NoTicketEntitlement' | HRTranslate)\">\r\n</sky-empty-design-card>\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: SkyEmptyDesignCardComponent, selector: "sky-empty-design-card", inputs: ["emptyIcon", "emptyIconClass", "emptyText", "emptyTextClass", "actionTitle", "actionIcon", "actionDisabled", "textColor", "disabledTitleClass", "activeTitleClass", "disabledIconClass", "activeIconClass", "actionClass", "containerClass", "cardBodyClass", "cardBodyContainerClass", "visibleIcon", "visibleQuickAction"], outputs: ["onActionClick"] }, { kind: "component", type: HRTicketCardComponent, selector: "hr-ticket-card", inputs: ["name", "typeName", "entitlementText", "ticketClassName", "ticketSectorName", "isDependent", "cardClass", "cardHeight", "nameClass", "subtitleClass", "labelClass", "valueClass"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ProfileEntitlementsTicketWidgetComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'hr-profile-entitlements-ticket-widget', standalone: true, imports: [CommonModule, HRTranslatePipe, SkySectionDividerComponent, SkyEmptyDesignCardComponent, HRTicketCardComponent], template: "<sky-section-divider [fontAwesomeIcon]=\"ticketsIcon\"\r\n                     [text]=\"(sectionTitle | HRTranslate | uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n@if(ticketDetails){\r\n@if(!ticketDetails.EmployeeTicketDetails && ticketDetails.DependentTicketDetails?.length == 0){\r\n<sky-empty-design-card [containerClass]=\"emptyStateContainerClass\"\r\n                       [cardBodyClass]=\"''\"\r\n                       [cardBodyContainerClass]=\"''\"\r\n                       [visibleIcon]=\"false\"\r\n                       [visibleQuickAction]=\"false\"\r\n                       [emptyTextClass]=\"emptyStateTextClass\"\r\n                       [emptyText]=\"'NoTicketEntitlement' | HRTranslate\">\r\n</sky-empty-design-card>\r\n}@else{\r\n<div class=\"row mb-5\">\r\n  @if(ticketDetails.EmployeeTicketDetails){\r\n  <div [class]=\"columnClass\">\r\n    <hr-ticket-card [name]=\"ticketDetails.EmployeeTicketDetails.EmployeeFirstName\"\r\n                     [entitlementText]=\"getMonthsPerTicketEntitlement(ticketDetails.EmployeeTicketDetails.MonthsPerTicketEntitlement)\"\r\n                     [ticketClassName]=\"ticketDetails.EmployeeTicketDetails.TicketClassName\"\r\n                     [ticketSectorName]=\"ticketDetails.EmployeeTicketDetails.TicketSectorName\"\r\n                     [cardClass]=\"cardClass\"\r\n                     [cardHeight]=\"cardHeight\"\r\n                     [nameClass]=\"nameClass\"\r\n                     [subtitleClass]=\"subtitleClass\"\r\n                     [labelClass]=\"labelClass\"\r\n                     [valueClass]=\"valueClass\">\r\n    </hr-ticket-card>\r\n  </div>\r\n  }\r\n  @for (dependent of ticketDetails.DependentTicketDetails; track dependent;){\r\n  <div [class]=\"columnClass\">\r\n    <hr-ticket-card [name]=\"dependent.DependentName\"\r\n                     [typeName]=\"dependent.DependentTypeName\"\r\n                     [entitlementText]=\"getMonthsPerTicketEntitlement(dependent.MonthsPerTicketEntitlement)\"\r\n                     [isDependent]=\"true\"\r\n                     [cardClass]=\"cardClass\"\r\n                     [cardHeight]=\"cardHeight\"\r\n                     [nameClass]=\"nameClass\"\r\n                     [subtitleClass]=\"subtitleClass\">\r\n    </hr-ticket-card>\r\n  </div>\r\n  }\r\n</div>\r\n}\r\n}@else{\r\n<sky-empty-design-card [containerClass]=\"emptyStateContainerClass\"\r\n                       [cardBodyClass]=\"''\"\r\n                       [cardBodyContainerClass]=\"''\"\r\n                       [visibleIcon]=\"false\"\r\n                       [visibleQuickAction]=\"false\"\r\n                       [emptyTextClass]=\"emptyStateTextClass\"\r\n                       [emptyText]=\"isLoading ? ((sectionTitle | HRTranslate) + ' ' + ('IsLoading' | HRTranslate)) : ('NoTicketEntitlement' | HRTranslate)\">\r\n</sky-empty-design-card>\r\n}\r\n" }]
+        }], ctorParameters: () => [{ type: HRSelfWidgetsService }, { type: HRTranslatePipe }], propDecorators: { baseUrl: [{
+                type: Input,
+                args: [{ required: true }]
+            }], sectionTitle: [{
+                type: Input
+            }], ticketsIcon: [{
+                type: Input
+            }], headerIconClass: [{
+                type: Input
+            }], headerTextClass: [{
+                type: Input
+            }], headerDividerClass: [{
+                type: Input
+            }], emptyStateContainerClass: [{
+                type: Input
+            }], emptyStateTextClass: [{
+                type: Input
+            }], columnClass: [{
+                type: Input
+            }], cardHeight: [{
+                type: Input
+            }], cardClass: [{
+                type: Input
+            }], nameClass: [{
+                type: Input
+            }], subtitleClass: [{
+                type: Input
+            }], labelClass: [{
+                type: Input
+            }], valueClass: [{
+                type: Input
+            }], isLoadingChanged: [{
+                type: Output
+            }], errorOccurred: [{
+                type: Output
+            }] } });
+
+class HRMedicalInsuranceCardComponent {
+    name = '';
+    typeName = '';
+    isDependent = false;
+    fields = [];
+    cardClass = 'p-3 card-shadow h-100 border border-1 rounded rounded-2';
+    cardHeight = 185;
+    nameClass = 'text-dark fs-16 mb-2';
+    labelClass = 'field-secondary-label-sm';
+    valueClass = 'text-dark-gray mx-1';
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: HRMedicalInsuranceCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: HRMedicalInsuranceCardComponent, isStandalone: true, selector: "hr-medical-insurance-card", inputs: { name: "name", typeName: "typeName", isDependent: "isDependent", fields: "fields", cardClass: "cardClass", cardHeight: "cardHeight", nameClass: "nameClass", labelClass: "labelClass", valueClass: "valueClass" }, ngImport: i0, template: "<hr-widget-card [cardClass]=\"cardClass\" [height]=\"cardHeight\" [contentTemplate]=\"cardContent\">\r\n</hr-widget-card>\r\n\r\n<ng-template #cardContent>\r\n  <p [class]=\"nameClass\" [ngClass]=\"isDependent ? 'd-flex' : ''\">\r\n    @if(isDependent){\r\n    <span class=\"text-ellipsis-one-line cursor-pointer\" [title]=\"name\">{{name}}</span>\r\n    <span class=\"mx-1\">({{typeName}})</span>\r\n    }@else{\r\n    {{name}} ({{'Me' | HRTranslate}})\r\n    }\r\n  </p>\r\n  @for (field of fields; track field.labelKey; let last = $last){\r\n  <p [class.mb-2]=\"!last\">\r\n    <span [class]=\"labelClass\">{{field.labelKey | HRTranslate}}:</span>\r\n    <span [class]=\"valueClass\">{{field.value || (field.fallbackValue ?? '\u2014')}}</span>\r\n  </p>\r\n  }\r\n</ng-template>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: HRTranslatePipe, name: "HRTranslate" }, { kind: "component", type: WidgetCardComponent, selector: "hr-widget-card", inputs: ["cardClass", "height", "contentTemplate", "context"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: HRMedicalInsuranceCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'hr-medical-insurance-card', standalone: true, imports: [CommonModule, HRTranslatePipe, WidgetCardComponent], template: "<hr-widget-card [cardClass]=\"cardClass\" [height]=\"cardHeight\" [contentTemplate]=\"cardContent\">\r\n</hr-widget-card>\r\n\r\n<ng-template #cardContent>\r\n  <p [class]=\"nameClass\" [ngClass]=\"isDependent ? 'd-flex' : ''\">\r\n    @if(isDependent){\r\n    <span class=\"text-ellipsis-one-line cursor-pointer\" [title]=\"name\">{{name}}</span>\r\n    <span class=\"mx-1\">({{typeName}})</span>\r\n    }@else{\r\n    {{name}} ({{'Me' | HRTranslate}})\r\n    }\r\n  </p>\r\n  @for (field of fields; track field.labelKey; let last = $last){\r\n  <p [class.mb-2]=\"!last\">\r\n    <span [class]=\"labelClass\">{{field.labelKey | HRTranslate}}:</span>\r\n    <span [class]=\"valueClass\">{{field.value || (field.fallbackValue ?? '\u2014')}}</span>\r\n  </p>\r\n  }\r\n</ng-template>\r\n" }]
+        }], propDecorators: { name: [{
+                type: Input,
+                args: [{ required: true }]
+            }], typeName: [{
+                type: Input
+            }], isDependent: [{
+                type: Input
+            }], fields: [{
+                type: Input
+            }], cardClass: [{
+                type: Input
+            }], cardHeight: [{
+                type: Input
+            }], nameClass: [{
+                type: Input
+            }], labelClass: [{
+                type: Input
+            }], valueClass: [{
+                type: Input
+            }] } });
+
+class ProfileEntitlementsMedicalInsuranceWidgetComponent {
+    selfWidgetsService;
+    baseUrl = '';
+    sectionTitle = 'MedicalInsurance';
+    medicalInsuranceIcon = faNotesMedical;
+    headerIconClass = 'primary-icon-xl';
+    headerTextClass = 'mt-2 field-secondary-label-lg';
+    headerDividerClass = 'flex-grow-1 ms-2';
+    labelClass = 'field-secondary-label-sm';
+    valueClass = 'text-dark-gray mx-1';
+    columnClass = 'col-lg-4 col-6 mt-4';
+    cardHeight = 185;
+    cardClass = 'p-3 card-shadow h-100 border border-1 rounded rounded-2';
+    nameClass = 'text-dark fs-16 mb-2';
+    dateFormat = 'dd/MM/yyyy';
+    emptyStateContainerClass = 'd-flex flex-column justify-content-center align-items-center my-5';
+    emptyStateTextClass = 'field-secondary-label-md';
+    isLoadingChanged = new EventEmitter();
+    errorOccurred = new EventEmitter();
+    medicalInsuranceDetails = null;
+    isLoading = true;
+    employeeFields = [];
+    datePipe = new DatePipe('en-US');
+    constructor(selfWidgetsService) {
+        this.selfWidgetsService = selfWidgetsService;
+    }
+    ngOnInit() {
+        if (!this.baseUrl) {
+            this.isLoading = false;
+            return;
+        }
+        this.loadData();
+    }
+    loadData() {
+        this.isLoadingChanged.emit(true);
+        this.selfWidgetsService.getEntitlementsMedicalInsurance(this.baseUrl).subscribe({
+            next: (data) => {
+                this.medicalInsuranceDetails = data;
+                this.buildEmployeeFields();
+                this.isLoading = false;
+                this.isLoadingChanged.emit(false);
+            },
+            error: (error) => {
+                this.medicalInsuranceDetails = null;
+                this.isLoading = false;
+                this.errorOccurred.emit(error?.error?.ResponseData?.Errors?.[0]?.Message);
+                this.isLoadingChanged.emit(false);
+            }
+        });
+    }
+    buildEmployeeFields() {
+        if (!this.medicalInsuranceDetails?.EmployeeMedicalInsurance)
+            return;
+        const emp = this.medicalInsuranceDetails.EmployeeMedicalInsurance;
+        this.employeeFields = [
+            { labelKey: 'Class', value: emp.MedicalInsuranceClassName },
+            { labelKey: 'Number', value: emp.MedicalInsuranceNumber },
+            { labelKey: 'CoverageDate', value: this.datePipe.transform(emp.CoverageDate, this.dateFormat) },
+            { labelKey: 'TotalEmployeeShare', value: this.medicalInsuranceDetails.TotalEmployeeShare },
+            { labelKey: 'TotalEmployerShare', value: this.medicalInsuranceDetails.TotalEmployerShare }
+        ];
+    }
+    getDependentFields(dependent) {
+        return [
+            { labelKey: 'Class', value: dependent.MedicalInsuranceClassName },
+            { labelKey: 'Number', value: dependent.MedicalInsuranceNumber },
+            { labelKey: 'CoverageDate', value: this.datePipe.transform(dependent.CoverageDate, this.dateFormat) }
+        ];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ProfileEntitlementsMedicalInsuranceWidgetComponent, deps: [{ token: HRSelfWidgetsService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: ProfileEntitlementsMedicalInsuranceWidgetComponent, isStandalone: true, selector: "hr-profile-entitlements-medical-insurance-widget", inputs: { baseUrl: "baseUrl", sectionTitle: "sectionTitle", medicalInsuranceIcon: "medicalInsuranceIcon", headerIconClass: "headerIconClass", headerTextClass: "headerTextClass", headerDividerClass: "headerDividerClass", labelClass: "labelClass", valueClass: "valueClass", columnClass: "columnClass", cardHeight: "cardHeight", cardClass: "cardClass", nameClass: "nameClass", dateFormat: "dateFormat", emptyStateContainerClass: "emptyStateContainerClass", emptyStateTextClass: "emptyStateTextClass" }, outputs: { isLoadingChanged: "isLoadingChanged", errorOccurred: "errorOccurred" }, ngImport: i0, template: "<sky-section-divider [fontAwesomeIcon]=\"medicalInsuranceIcon\"\r\n                     [text]=\"(sectionTitle | HRTranslate | uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n@if(medicalInsuranceDetails){\r\n<div class=\"row mb-5\">\r\n  @if(medicalInsuranceDetails.EmployeeMedicalInsurance){\r\n  <div [class]=\"columnClass\">\r\n    <hr-medical-insurance-card [name]=\"medicalInsuranceDetails.EmployeeMedicalInsurance.EmployeeFirstName\"\r\n                                [fields]=\"employeeFields\"\r\n                                [cardClass]=\"cardClass\"\r\n                                [cardHeight]=\"cardHeight\"\r\n                                [nameClass]=\"nameClass\"\r\n                                [labelClass]=\"labelClass\"\r\n                                [valueClass]=\"valueClass\">\r\n    </hr-medical-insurance-card>\r\n  </div>\r\n  }\r\n  @for (dependent of medicalInsuranceDetails.DependentsMedicalInsurance; track dependent){\r\n  <div [class]=\"columnClass\">\r\n    <hr-medical-insurance-card [name]=\"dependent.DependentName\"\r\n                                [typeName]=\"dependent.DependentTypeName\"\r\n                                [isDependent]=\"true\"\r\n                                [fields]=\"getDependentFields(dependent)\"\r\n                                [cardClass]=\"cardClass\"\r\n                                [cardHeight]=\"cardHeight\"\r\n                                [nameClass]=\"nameClass\"\r\n                                [labelClass]=\"labelClass\"\r\n                                [valueClass]=\"valueClass\">\r\n    </hr-medical-insurance-card>\r\n  </div>\r\n  }\r\n</div>\r\n}@else{\r\n<sky-empty-design-card [containerClass]=\"emptyStateContainerClass\"\r\n                       [cardBodyClass]=\"''\"\r\n                       [cardBodyContainerClass]=\"''\"\r\n                       [visibleIcon]=\"false\"\r\n                       [visibleQuickAction]=\"false\"\r\n                       [emptyTextClass]=\"emptyStateTextClass\"\r\n                       [emptyText]=\"isLoading ? ((sectionTitle | HRTranslate) + ' ' + ('IsLoading' | HRTranslate)) : ('NotCoveredByMedicalInsurance' | HRTranslate)\">\r\n</sky-empty-design-card>\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i2$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: SkyEmptyDesignCardComponent, selector: "sky-empty-design-card", inputs: ["emptyIcon", "emptyIconClass", "emptyText", "emptyTextClass", "actionTitle", "actionIcon", "actionDisabled", "textColor", "disabledTitleClass", "activeTitleClass", "disabledIconClass", "activeIconClass", "actionClass", "containerClass", "cardBodyClass", "cardBodyContainerClass", "visibleIcon", "visibleQuickAction"], outputs: ["onActionClick"] }, { kind: "component", type: HRMedicalInsuranceCardComponent, selector: "hr-medical-insurance-card", inputs: ["name", "typeName", "isDependent", "fields", "cardClass", "cardHeight", "nameClass", "labelClass", "valueClass"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ProfileEntitlementsMedicalInsuranceWidgetComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'hr-profile-entitlements-medical-insurance-widget', standalone: true, imports: [CommonModule, HRTranslatePipe, SkySectionDividerComponent, SkyEmptyDesignCardComponent, HRMedicalInsuranceCardComponent], template: "<sky-section-divider [fontAwesomeIcon]=\"medicalInsuranceIcon\"\r\n                     [text]=\"(sectionTitle | HRTranslate | uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n@if(medicalInsuranceDetails){\r\n<div class=\"row mb-5\">\r\n  @if(medicalInsuranceDetails.EmployeeMedicalInsurance){\r\n  <div [class]=\"columnClass\">\r\n    <hr-medical-insurance-card [name]=\"medicalInsuranceDetails.EmployeeMedicalInsurance.EmployeeFirstName\"\r\n                                [fields]=\"employeeFields\"\r\n                                [cardClass]=\"cardClass\"\r\n                                [cardHeight]=\"cardHeight\"\r\n                                [nameClass]=\"nameClass\"\r\n                                [labelClass]=\"labelClass\"\r\n                                [valueClass]=\"valueClass\">\r\n    </hr-medical-insurance-card>\r\n  </div>\r\n  }\r\n  @for (dependent of medicalInsuranceDetails.DependentsMedicalInsurance; track dependent){\r\n  <div [class]=\"columnClass\">\r\n    <hr-medical-insurance-card [name]=\"dependent.DependentName\"\r\n                                [typeName]=\"dependent.DependentTypeName\"\r\n                                [isDependent]=\"true\"\r\n                                [fields]=\"getDependentFields(dependent)\"\r\n                                [cardClass]=\"cardClass\"\r\n                                [cardHeight]=\"cardHeight\"\r\n                                [nameClass]=\"nameClass\"\r\n                                [labelClass]=\"labelClass\"\r\n                                [valueClass]=\"valueClass\">\r\n    </hr-medical-insurance-card>\r\n  </div>\r\n  }\r\n</div>\r\n}@else{\r\n<sky-empty-design-card [containerClass]=\"emptyStateContainerClass\"\r\n                       [cardBodyClass]=\"''\"\r\n                       [cardBodyContainerClass]=\"''\"\r\n                       [visibleIcon]=\"false\"\r\n                       [visibleQuickAction]=\"false\"\r\n                       [emptyTextClass]=\"emptyStateTextClass\"\r\n                       [emptyText]=\"isLoading ? ((sectionTitle | HRTranslate) + ' ' + ('IsLoading' | HRTranslate)) : ('NotCoveredByMedicalInsurance' | HRTranslate)\">\r\n</sky-empty-design-card>\r\n}\r\n" }]
+        }], ctorParameters: () => [{ type: HRSelfWidgetsService }], propDecorators: { baseUrl: [{
+                type: Input,
+                args: [{ required: true }]
+            }], sectionTitle: [{
+                type: Input
+            }], medicalInsuranceIcon: [{
+                type: Input
+            }], headerIconClass: [{
+                type: Input
+            }], headerTextClass: [{
+                type: Input
+            }], headerDividerClass: [{
+                type: Input
+            }], labelClass: [{
+                type: Input
+            }], valueClass: [{
+                type: Input
+            }], columnClass: [{
+                type: Input
+            }], cardHeight: [{
+                type: Input
+            }], cardClass: [{
+                type: Input
+            }], nameClass: [{
+                type: Input
+            }], dateFormat: [{
+                type: Input
+            }], emptyStateContainerClass: [{
+                type: Input
+            }], emptyStateTextClass: [{
+                type: Input
+            }], isLoadingChanged: [{
+                type: Output
+            }], errorOccurred: [{
+                type: Output
+            }] } });
+
+class ProfileEntitlementsOthersWidgetComponent {
+    selfWidgetsService;
+    baseUrl = '';
+    sectionTitle = 'Others';
+    othersIcon = faGrid2Plus;
+    headerIconClass = 'primary-icon-xl';
+    headerTextClass = 'mt-2 field-secondary-label-lg';
+    headerDividerClass = 'flex-grow-1 ms-2';
+    rowClass = 'row mt-4 mb-5';
+    columnClass = 'col-md-4 col-6';
+    labelClass = 'field-secondary-label-sm';
+    valueClass = 'fs-14 fw-meduim';
+    isLoadingChanged = new EventEmitter();
+    errorOccurred = new EventEmitter();
+    isEligibleForOvertime = false;
+    isSocialSecurityMember = false;
+    isLoading = true;
+    constructor(selfWidgetsService) {
+        this.selfWidgetsService = selfWidgetsService;
+    }
+    ngOnInit() {
+        if (!this.baseUrl) {
+            this.isLoading = false;
+            return;
+        }
+        this.loadData();
+    }
+    loadData() {
+        this.isLoadingChanged.emit(true);
+        forkJoin({
+            overtime: this.selfWidgetsService.getEntitlementsOvertime(this.baseUrl),
+            socialSecurity: this.selfWidgetsService.getEntitlementsSocialSecurity(this.baseUrl)
+        }).subscribe({
+            next: (responses) => {
+                this.isEligibleForOvertime = responses.overtime.ResponseData?.IsEligibleForOvertime ?? false;
+                this.isSocialSecurityMember = responses.socialSecurity.ResponseData?.IsSocialSecurityMember ?? false;
+                this.isLoading = false;
+                this.isLoadingChanged.emit(false);
+            },
+            error: (error) => {
+                this.isLoading = false;
+                this.errorOccurred.emit(error?.error?.ResponseData?.Errors?.[0]?.Message);
+                this.isLoadingChanged.emit(false);
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ProfileEntitlementsOthersWidgetComponent, deps: [{ token: HRSelfWidgetsService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: ProfileEntitlementsOthersWidgetComponent, isStandalone: true, selector: "hr-profile-entitlements-others-widget", inputs: { baseUrl: "baseUrl", sectionTitle: "sectionTitle", othersIcon: "othersIcon", headerIconClass: "headerIconClass", headerTextClass: "headerTextClass", headerDividerClass: "headerDividerClass", rowClass: "rowClass", columnClass: "columnClass", labelClass: "labelClass", valueClass: "valueClass" }, outputs: { isLoadingChanged: "isLoadingChanged", errorOccurred: "errorOccurred" }, ngImport: i0, template: "<sky-section-divider [fontAwesomeIcon]=\"othersIcon\"\r\n                     [text]=\"(sectionTitle | HRTranslate | uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n<div [class]=\"rowClass\">\r\n  <div [class]=\"columnClass\">\r\n    <hr-info-field labelKey=\"OvertimeEligibility\"\r\n                   [value]=\"(isEligibleForOvertime ? 'Eligible' : 'NotEligible') | HRTranslate\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [class]=\"columnClass\">\r\n    <hr-info-field labelKey=\"SocialSecurityEligibility\"\r\n                   [value]=\"(isSocialSecurityMember ? 'Member' : 'NotMember') | HRTranslate\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i2$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: ProfileEntitlementsOthersWidgetComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'hr-profile-entitlements-others-widget', standalone: true, imports: [CommonModule, HRTranslatePipe, SkySectionDividerComponent, HRInfoFieldComponent], template: "<sky-section-divider [fontAwesomeIcon]=\"othersIcon\"\r\n                     [text]=\"(sectionTitle | HRTranslate | uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n<div [class]=\"rowClass\">\r\n  <div [class]=\"columnClass\">\r\n    <hr-info-field labelKey=\"OvertimeEligibility\"\r\n                   [value]=\"(isEligibleForOvertime ? 'Eligible' : 'NotEligible') | HRTranslate\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [class]=\"columnClass\">\r\n    <hr-info-field labelKey=\"SocialSecurityEligibility\"\r\n                   [value]=\"(isSocialSecurityMember ? 'Member' : 'NotMember') | HRTranslate\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n</div>\r\n" }]
+        }], ctorParameters: () => [{ type: HRSelfWidgetsService }], propDecorators: { baseUrl: [{
+                type: Input,
+                args: [{ required: true }]
+            }], sectionTitle: [{
+                type: Input
+            }], othersIcon: [{
+                type: Input
+            }], headerIconClass: [{
+                type: Input
+            }], headerTextClass: [{
+                type: Input
+            }], headerDividerClass: [{
+                type: Input
+            }], rowClass: [{
+                type: Input
+            }], columnClass: [{
+                type: Input
+            }], labelClass: [{
+                type: Input
+            }], valueClass: [{
+                type: Input
+            }], isLoadingChanged: [{
+                type: Output
+            }], errorOccurred: [{
+                type: Output
+            }] } });
+
 /*
  * Public API Surface of shared-ui
  */
@@ -4050,5 +4887,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { EventOption, EventTypeEnum, HRCardHeaderComponent, HRConstantsService, HREmployeeCalendarComponent, HRHighlightPipe, HRTranslatePipe, HRTranslateService, MainWidgetShortcut, MyCalendarWidgetComponent, MyMainDetailsWidgetComponent, MyNextWeekVacationInsightsWidgetComponent, MyUpcomingEventsWidgetComponent, ProfileBankInfoWidgetComponent, ProfileDegreesWidgetComponent, ProfileExperiencesWidgetComponent, ProfileJobInfoContractWidgetComponent, ProfileJobInfoMainWidgetComponent, ProfileJobInfoSalaryWidgetComponent, ProfileJobInfoServiceChargeWidgetComponent, ProfilePersonalInfoAddressWidgetComponent, ProfilePersonalInfoContactWidgetComponent, ProfilePersonalInfoLanguagesWidgetComponent, ProfilePersonalInfoMainWidgetComponent, ProfilePersonalInfoOtherNationalitiesWidgetComponent, PublicHolidayWeekContext, RelativeDay, ScheduleVacationTypes, ServiceChargeEntitlementMode, VacationPopupType };
+export { DependentsWidgetComponent, EventOption, EventTypeEnum, HRCardHeaderComponent, HRConstantsService, HREmployeeCalendarComponent, HRHighlightPipe, HRMedicalInsuranceCardComponent, HRTranslatePipe, HRTranslateService, MainWidgetShortcut, MyCalendarWidgetComponent, MyMainDetailsWidgetComponent, MyNextWeekVacationInsightsWidgetComponent, MyUpcomingEventsWidgetComponent, ProfileBankInfoWidgetComponent, ProfileDegreesWidgetComponent, ProfileEntitlementsIndemnityWidgetComponent, ProfileEntitlementsMedicalInsuranceWidgetComponent, ProfileEntitlementsOthersWidgetComponent, ProfileEntitlementsTicketWidgetComponent, ProfileEntitlementsVacationsWidgetComponent, ProfileExperiencesWidgetComponent, ProfileJobInfoContractWidgetComponent, ProfileJobInfoMainWidgetComponent, ProfileJobInfoSalaryWidgetComponent, ProfileJobInfoServiceChargeWidgetComponent, ProfilePersonalInfoAddressWidgetComponent, ProfilePersonalInfoContactWidgetComponent, ProfilePersonalInfoLanguagesWidgetComponent, ProfilePersonalInfoMainWidgetComponent, ProfilePersonalInfoOtherNationalitiesWidgetComponent, PublicHolidayWeekContext, RelativeDay, ScheduleVacationTypes, ServiceChargeEntitlementMode, VacationPopupType };
 //# sourceMappingURL=skysoftware-co-bayan-hr-widgets-ui.mjs.map