@skysoftware-co/bayan-hr-widgets-ui 1.0.17 → 1.0.18

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

@@ -7,7 +7,7 @@ import { NgClass, DecimalPipe, DatePipe, LowerCasePipe, CommonModule } from '@an
 import * as i1$2 from '@fortawesome/angular-fontawesome';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { BayanEmployeeBadgeComponent } from '@skysoftware-co/bayan-components-ui';
-import { SkyShortcutIconComponent, SkySectionDividerComponent, SkyWidgetSectionItemComponent } from '@skysoftware-co/sky-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';
@@ -176,6 +176,7 @@ var Employee$2 = "Employee";
 var StartDate$2 = "Start date";
 var EndDate$2 = "End date";
 var ReturnDate$2 = "Return date";
+var JobInformation$2 = "Job information";
 var en = {
 	ReportingTo: ReportingTo$2,
 	NotAnknown: NotAnknown$2,
@@ -284,7 +285,8 @@ var en = {
 	StartDate: StartDate$2,
 	EndDate: EndDate$2,
 	ReturnDate: ReturnDate$2,
-	"Search...": "Search..."
+	"Search...": "Search...",
+	JobInformation: JobInformation$2
 };
 
 var ReportingTo$1 = "مفوض الى";
@@ -392,6 +394,7 @@ var Employee$1 = "الموظف";
 var StartDate$1 = "تاريخ البداية";
 var EndDate$1 = "تاريخ النهاية";
 var ReturnDate$1 = "تاريخ العودة";
+var JobInformation$1 = "معلومات الوظيفة";
 var ar = {
 	ReportingTo: ReportingTo$1,
 	NotAnknown: NotAnknown$1,
@@ -499,7 +502,8 @@ var ar = {
 	StartDate: StartDate$1,
 	EndDate: EndDate$1,
 	ReturnDate: ReturnDate$1,
-	"Search...": "بحث..."
+	"Search...": "بحث...",
+	JobInformation: JobInformation$1
 };
 
 var ReportingTo = "Rapport à";
@@ -608,6 +612,7 @@ var Employee = "Employé";
 var StartDate = "Date de début";
 var EndDate = "Date de fin";
 var ReturnDate = "Date de retour";
+var JobInformation = "Informations sur l'emploi";
 var fr = {
 	ReportingTo: ReportingTo,
 	NotAnknown: NotAnknown,
@@ -716,7 +721,8 @@ var fr = {
 	StartDate: StartDate,
 	EndDate: EndDate,
 	ReturnDate: ReturnDate,
-	"Search...": "Rechercher..."
+	"Search...": "Rechercher...",
+	JobInformation: JobInformation
 };
 
 const BUILT_IN_LEXICONS = { en, ar, fr };
@@ -818,6 +824,63 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                 }]
         }] });
 
+class EntitlementsCacheService {
+    baseUrl = '';
+    vacationDetails$ = null;
+    indemnityDetails$ = null;
+    ticketDetails$ = null;
+    medicalInsuranceDetails$ = null;
+    getVacationDetails(baseUrl) {
+        return this.baseUrl === baseUrl ? this.vacationDetails$ : null;
+    }
+    setVacationDetails(baseUrl, value) {
+        this.ensureBaseUrl(baseUrl);
+        this.vacationDetails$ = value;
+    }
+    getIndemnityDetails(baseUrl) {
+        return this.baseUrl === baseUrl ? this.indemnityDetails$ : null;
+    }
+    setIndemnityDetails(baseUrl, value) {
+        this.ensureBaseUrl(baseUrl);
+        this.indemnityDetails$ = value;
+    }
+    getTicketDetails(baseUrl) {
+        return this.baseUrl === baseUrl ? this.ticketDetails$ : null;
+    }
+    setTicketDetails(baseUrl, value) {
+        this.ensureBaseUrl(baseUrl);
+        this.ticketDetails$ = value;
+    }
+    getMedicalInsuranceDetails(baseUrl) {
+        return this.baseUrl === baseUrl ? this.medicalInsuranceDetails$ : null;
+    }
+    setMedicalInsuranceDetails(baseUrl, value) {
+        this.ensureBaseUrl(baseUrl);
+        this.medicalInsuranceDetails$ = value;
+    }
+    clear() {
+        this.baseUrl = '';
+        this.vacationDetails$ = null;
+        this.indemnityDetails$ = null;
+        this.ticketDetails$ = null;
+        this.medicalInsuranceDetails$ = null;
+    }
+    ensureBaseUrl(baseUrl) {
+        if (this.baseUrl && this.baseUrl !== baseUrl) {
+            this.clear();
+        }
+        this.baseUrl = baseUrl;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EntitlementsCacheService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EntitlementsCacheService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EntitlementsCacheService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
 class JobInformationCacheService {
     baseUrl = '';
     mainDetails$ = null;
@@ -944,12 +1007,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
 class HRSelfWidgetsService {
     http;
     bankInformationCacheService;
+    entitlementsCacheService;
     jobInformationCacheService;
     personalInformationCacheService;
     headers = { 'api-version': '1' };
-    constructor(http, bankInformationCacheService, jobInformationCacheService, personalInformationCacheService) {
+    constructor(http, bankInformationCacheService, entitlementsCacheService, jobInformationCacheService, personalInformationCacheService) {
         this.http = http;
         this.bankInformationCacheService = bankInformationCacheService;
+        this.entitlementsCacheService = entitlementsCacheService;
         this.jobInformationCacheService = jobInformationCacheService;
         this.personalInformationCacheService = personalInformationCacheService;
     }
@@ -1168,7 +1233,79 @@ class HRSelfWidgetsService {
             headers: this.headers
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: HRSelfWidgetsService, deps: [{ token: i1.HttpClient }, { token: BankInformationCacheService }, { token: JobInformationCacheService }, { token: PersonalInformationCacheService }], target: i0.ɵɵFactoryTarget.Injectable });
+    getEntitlementsVacation(baseUrl, forceRefresh = false) {
+        if (!forceRefresh) {
+            const cachedRequest$ = this.entitlementsCacheService.getVacationDetails(baseUrl);
+            if (cachedRequest$) {
+                return cachedRequest$;
+            }
+        }
+        const request$ = this.http
+            .get(`${baseUrl}/hr/widgets/me/profile/entitlements/vacations`, {
+            headers: this.headers
+        })
+            .pipe(map((response) => response?.ResponseData ?? null), shareReplay(1), catchError((error) => {
+            this.entitlementsCacheService.clear();
+            return throwError(() => error);
+        }));
+        this.entitlementsCacheService.setVacationDetails(baseUrl, request$);
+        return request$;
+    }
+    getEntitlementsIndemnity(baseUrl, forceRefresh = false) {
+        if (!forceRefresh) {
+            const cachedRequest$ = this.entitlementsCacheService.getIndemnityDetails(baseUrl);
+            if (cachedRequest$) {
+                return cachedRequest$;
+            }
+        }
+        const request$ = this.http
+            .get(`${baseUrl}/hr/widgets/me/profile/entitlements/indemnity`, {
+            headers: this.headers
+        })
+            .pipe(map((response) => response?.ResponseData ?? null), shareReplay(1), catchError((error) => {
+            this.entitlementsCacheService.clear();
+            return throwError(() => error);
+        }));
+        this.entitlementsCacheService.setIndemnityDetails(baseUrl, request$);
+        return request$;
+    }
+    getEntitlementsTicket(baseUrl, forceRefresh = false) {
+        if (!forceRefresh) {
+            const cachedRequest$ = this.entitlementsCacheService.getTicketDetails(baseUrl);
+            if (cachedRequest$) {
+                return cachedRequest$;
+            }
+        }
+        const request$ = this.http
+            .get(`${baseUrl}/hr/widgets/me/profile/entitlements/ticket`, {
+            headers: this.headers
+        })
+            .pipe(map((response) => response?.ResponseData ?? null), shareReplay(1), catchError((error) => {
+            this.entitlementsCacheService.clear();
+            return throwError(() => error);
+        }));
+        this.entitlementsCacheService.setTicketDetails(baseUrl, request$);
+        return request$;
+    }
+    getEntitlementsMedicalInsurance(baseUrl, forceRefresh = false) {
+        if (!forceRefresh) {
+            const cachedRequest$ = this.entitlementsCacheService.getMedicalInsuranceDetails(baseUrl);
+            if (cachedRequest$) {
+                return cachedRequest$;
+            }
+        }
+        const request$ = this.http
+            .get(`${baseUrl}/hr/widgets/me/profile/entitlements/medical-insurance`, {
+            headers: this.headers
+        })
+            .pipe(map((response) => response?.ResponseData ?? null), shareReplay(1), catchError((error) => {
+            this.entitlementsCacheService.clear();
+            return throwError(() => error);
+        }));
+        this.entitlementsCacheService.setMedicalInsuranceDetails(baseUrl, request$);
+        return request$;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: HRSelfWidgetsService, deps: [{ token: i1.HttpClient }, { token: BankInformationCacheService }, { token: EntitlementsCacheService }, { token: JobInformationCacheService }, { token: PersonalInformationCacheService }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: HRSelfWidgetsService, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: HRSelfWidgetsService, decorators: [{
@@ -1176,7 +1313,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: BankInformationCacheService }, { type: JobInformationCacheService }, { type: PersonalInformationCacheService }] });
+        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: BankInformationCacheService }, { type: EntitlementsCacheService }, { type: JobInformationCacheService }, { type: PersonalInformationCacheService }] });
 
 class HRConstantsService {
     defaultVacationBalanceColor = '#727070';
@@ -2188,11 +2325,11 @@ class HRInfoFieldComponent {
     valueClass = 'fs-14 fw-medium';
     fallbackValue = '—';
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: HRInfoFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: HRInfoFieldComponent, isStandalone: true, selector: "hr-info-field", inputs: { labelKey: "labelKey", value: "value", labelClass: "labelClass", valueClass: "valueClass", fallbackValue: "fallbackValue" }, ngImport: i0, template: "<div [ngClass]=\"labelClass\">{{labelKey | HRTranslate}}</div>\r\n<div [ngClass]=\"valueClass\" [title]=\"value\">{{value || fallbackValue}}</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: HRTranslatePipe, name: "HRTranslate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: HRInfoFieldComponent, isStandalone: true, selector: "hr-info-field", inputs: { labelKey: "labelKey", value: "value", labelClass: "labelClass", valueClass: "valueClass", fallbackValue: "fallbackValue" }, ngImport: i0, template: "<div [ngClass]=\"labelClass\">{{labelKey | HRTranslate}}</div>\r\n<div [ngClass]=\"valueClass\" [title]=\"value|| fallbackValue\">{{value || fallbackValue}}</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: HRTranslatePipe, name: "HRTranslate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: HRInfoFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'hr-info-field', standalone: true, imports: [CommonModule, HRTranslatePipe], template: "<div [ngClass]=\"labelClass\">{{labelKey | HRTranslate}}</div>\r\n<div [ngClass]=\"valueClass\" [title]=\"value\">{{value || fallbackValue}}</div>\r\n" }]
+            args: [{ selector: 'hr-info-field', standalone: true, imports: [CommonModule, HRTranslatePipe], template: "<div [ngClass]=\"labelClass\">{{labelKey | HRTranslate}}</div>\r\n<div [ngClass]=\"valueClass\" [title]=\"value|| fallbackValue\">{{value || fallbackValue}}</div>\r\n" }]
         }], propDecorators: { labelKey: [{
                 type: Input,
                 args: [{ required: true }]
@@ -2270,11 +2407,11 @@ class ProfileBankInfoWidgetComponent {
         return this.commonMethodsService.currencyDecimalFormat(value, this.currencyDecimals) || '-';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ProfileBankInfoWidgetComponent, deps: [{ token: HRCommonMethodsService }, { token: HRSelfWidgetsService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: ProfileBankInfoWidgetComponent, isStandalone: true, selector: "hr-profile-bank-info-widget", inputs: { currencyCode: "currencyCode", currencyDecimals: "currencyDecimals", headerIconClass: "headerIconClass", headerTextClass: "headerTextClass", headerDividerClass: "headerDividerClass", cardClass: "cardClass", mainBadgeClass: "mainBadgeClass", mainBadgeTextClass: "mainBadgeTextClass", triangleClass: "triangleClass", rowClass: "rowClass", rowMainPtClass: "rowMainPtClass", rowNormalPtClass: "rowNormalPtClass", columnClass: "columnClass", responsiveTopSpacingColClass: "responsiveTopSpacingColClass", topSpacingColClass: "topSpacingColClass", labelClass: "labelClass", valueClass: "valueClass", emptyStateContainerClass: "emptyStateContainerClass", emptyStateTextClass: "emptyStateTextClass", bankInformationIcon: "bankInformationIcon", sectionHeaderVisibility: "sectionHeaderVisibility", sectionTitle: "sectionTitle", language: "language", baseUrl: "baseUrl" }, outputs: { errorOccurred: "errorOccurred", isLoadingChanged: "isLoadingChanged" }, usesOnChanges: true, ngImport: i0, template: "@if(sectionHeaderVisibility){\r\n<sky-section-divider [fontAwesomeIcon]=\"bankInformationIcon\"\r\n                     [text]=\"(sectionTitle | HRTranslate|uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n}\r\n@if(employeeBankInformation.length > 0){\r\n@for (bankInfo of employeeBankInformation; track bankInfo){\r\n<div [class]=\"cardClass\">\r\n  @if(bankInfo.IsMainBank && employeeBankInformation.length > 1){\r\n  <div [class]=\"mainBadgeClass\"\r\n       style=\"padding-top: 2px\"\r\n       [style.margin-left]=\"!isRTL ? '-6px' : 'unset'\">\r\n    <span [class]=\"mainBadgeTextClass\">{{'MainBank' | HRTranslate}}</span>\r\n  </div>\r\n\r\n  <div [class]=\"triangleClass\"\r\n       [style.margin-left]=\"!isRTL ? '-6px' : 'unset'\"\r\n       [style.margin-right]=\"isRTL ? '-5px' : '20px'\"\r\n       [style.margin-top]=\"!isRTL ? '7px' : '4px'\">\r\n    <svg viewBox=\"4 2 16 16\" class=\"status-badge-triangle\" fill=\"#e67e0f\">\r\n      <path d=\"m3.86 8.753 5.482 4.796c.646.566 1.658.106 1.658-.753V3.204a1 1 0 0 0-1.659-.753l-5.48 4.796a1 1 0 0 0 0 1.506z\"></path>\r\n    </svg>\r\n  </div>\r\n  }\r\n\r\n  <div [ngClass]=\"[rowClass, bankInfo.IsMainBank ? rowMainPtClass : rowNormalPtClass]\">\r\n    <div [class]=\"columnClass\">\r\n      <hr-info-field [labelKey]=\"'Bank'\"\r\n                     [value]=\"bankInfo.BankName\"\r\n                     [labelClass]=\"labelClass\"\r\n                     [valueClass]=\"valueClass\">\r\n      </hr-info-field>\r\n    </div>\r\n\r\n    <div [class]=\"columnClass\">\r\n      <hr-info-field [labelKey]=\"'Branch'\"\r\n                     [value]=\"bankInfo.BranchName\"\r\n                     [labelClass]=\"labelClass\"\r\n                     [valueClass]=\"valueClass\">\r\n      </hr-info-field>\r\n    </div>\r\n\r\n    <div [class]=\"responsiveTopSpacingColClass\">\r\n      <hr-info-field [labelKey]=\"'IBAN'\"\r\n                     [value]=\"bankInfo.IBAN\"\r\n                     [labelClass]=\"labelClass\"\r\n                     [valueClass]=\"valueClass\">\r\n      </hr-info-field>\r\n    </div>\r\n\r\n    <div [class]=\"topSpacingColClass\">\r\n      <hr-info-field [labelKey]=\"'AccountNumber'\"\r\n                     [value]=\"bankInfo.AccountNumber\"\r\n                     [labelClass]=\"labelClass\"\r\n                     [valueClass]=\"valueClass\">\r\n      </hr-info-field>\r\n    </div>\r\n\r\n    <div [class]=\"topSpacingColClass\">\r\n      <hr-info-field [labelKey]=\"'Beneficiary'\"\r\n                     [value]=\"bankInfo.Beneficiary\"\r\n                     [labelClass]=\"labelClass\"\r\n                     [valueClass]=\"valueClass\">\r\n      </hr-info-field>\r\n    </div>\r\n\r\n    @if(bankInfo.TransferAmount != null){\r\n    <div [class]=\"topSpacingColClass\">\r\n      <hr-info-field [labelKey]=\"'TransferAmount'\"\r\n                     [value]=\"formatAmount(bankInfo.TransferAmount) + ' (' + currencyCode + ')'\"\r\n                     [labelClass]=\"labelClass\"\r\n                     [valueClass]=\"valueClass\">\r\n      </hr-info-field>\r\n    </div>\r\n    }\r\n  </div>\r\n</div>\r\n}\r\n}@else{\r\n<div [class]=\"emptyStateContainerClass\">\r\n  <p [class]=\"emptyStateTextClass\">{{isLoading ? ((sectionTitle | HRTranslate) + ' ' + ('IsLoading' | HRTranslate)) : ('ThereIsNoBankYet' | HRTranslate)}}</p>\r\n</div>\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: 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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: ProfileBankInfoWidgetComponent, isStandalone: true, selector: "hr-profile-bank-info-widget", inputs: { currencyCode: "currencyCode", currencyDecimals: "currencyDecimals", headerIconClass: "headerIconClass", headerTextClass: "headerTextClass", headerDividerClass: "headerDividerClass", cardClass: "cardClass", mainBadgeClass: "mainBadgeClass", mainBadgeTextClass: "mainBadgeTextClass", triangleClass: "triangleClass", rowClass: "rowClass", rowMainPtClass: "rowMainPtClass", rowNormalPtClass: "rowNormalPtClass", columnClass: "columnClass", responsiveTopSpacingColClass: "responsiveTopSpacingColClass", topSpacingColClass: "topSpacingColClass", labelClass: "labelClass", valueClass: "valueClass", emptyStateContainerClass: "emptyStateContainerClass", emptyStateTextClass: "emptyStateTextClass", bankInformationIcon: "bankInformationIcon", sectionHeaderVisibility: "sectionHeaderVisibility", sectionTitle: "sectionTitle", language: "language", baseUrl: "baseUrl" }, outputs: { errorOccurred: "errorOccurred", isLoadingChanged: "isLoadingChanged" }, usesOnChanges: true, ngImport: i0, template: "@if(sectionHeaderVisibility){\r\n<sky-section-divider [fontAwesomeIcon]=\"bankInformationIcon\"\r\n                     [text]=\"(sectionTitle | HRTranslate|uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n}\r\n@if(employeeBankInformation.length > 0){\r\n@for (bankInfo of employeeBankInformation; track bankInfo){\r\n<div [class]=\"cardClass\">\r\n  @if(bankInfo.IsMainBank && employeeBankInformation.length > 1){\r\n  <div [class]=\"mainBadgeClass\"\r\n       style=\"padding-top: 2px\"\r\n       [style.margin-left]=\"!isRTL ? '-6px' : 'unset'\">\r\n    <span [class]=\"mainBadgeTextClass\">{{'MainBank' | HRTranslate}}</span>\r\n  </div>\r\n\r\n  <div [class]=\"triangleClass\"\r\n       [style.margin-left]=\"!isRTL ? '-6px' : 'unset'\"\r\n       [style.margin-right]=\"isRTL ? '-5px' : '20px'\"\r\n       [style.margin-top]=\"!isRTL ? '7px' : '4px'\">\r\n    <svg viewBox=\"4 2 16 16\" class=\"status-badge-triangle\" fill=\"#e67e0f\">\r\n      <path d=\"m3.86 8.753 5.482 4.796c.646.566 1.658.106 1.658-.753V3.204a1 1 0 0 0-1.659-.753l-5.48 4.796a1 1 0 0 0 0 1.506z\"></path>\r\n    </svg>\r\n  </div>\r\n  }\r\n\r\n  <div [ngClass]=\"[rowClass, bankInfo.IsMainBank ? rowMainPtClass : rowNormalPtClass]\">\r\n    <div [class]=\"columnClass\">\r\n      <hr-info-field [labelKey]=\"'Bank'\"\r\n                     [value]=\"bankInfo.BankName\"\r\n                     [labelClass]=\"labelClass\"\r\n                     [valueClass]=\"valueClass\">\r\n      </hr-info-field>\r\n    </div>\r\n\r\n    <div [class]=\"columnClass\">\r\n      <hr-info-field [labelKey]=\"'Branch'\"\r\n                     [value]=\"bankInfo.BranchName\"\r\n                     [labelClass]=\"labelClass\"\r\n                     [valueClass]=\"valueClass\">\r\n      </hr-info-field>\r\n    </div>\r\n\r\n    <div [class]=\"responsiveTopSpacingColClass\">\r\n      <hr-info-field [labelKey]=\"'IBAN'\"\r\n                     [value]=\"bankInfo.IBAN\"\r\n                     [labelClass]=\"labelClass\"\r\n                     [valueClass]=\"valueClass\">\r\n      </hr-info-field>\r\n    </div>\r\n\r\n    <div [class]=\"topSpacingColClass\">\r\n      <hr-info-field [labelKey]=\"'AccountNumber'\"\r\n                     [value]=\"bankInfo.AccountNumber\"\r\n                     [labelClass]=\"labelClass\"\r\n                     [valueClass]=\"valueClass\">\r\n      </hr-info-field>\r\n    </div>\r\n\r\n    <div [class]=\"topSpacingColClass\">\r\n      <hr-info-field [labelKey]=\"'Beneficiary'\"\r\n                     [value]=\"bankInfo.Beneficiary\"\r\n                     [labelClass]=\"labelClass\"\r\n                     [valueClass]=\"valueClass\">\r\n      </hr-info-field>\r\n    </div>\r\n\r\n    @if(bankInfo.TransferAmount != null){\r\n    <div [class]=\"topSpacingColClass\">\r\n      <hr-info-field [labelKey]=\"'TransferAmount'\"\r\n                     [value]=\"formatAmount(bankInfo.TransferAmount) + ' (' + currencyCode + ')'\"\r\n                     [labelClass]=\"labelClass\"\r\n                     [valueClass]=\"valueClass\">\r\n      </hr-info-field>\r\n    </div>\r\n    }\r\n  </div>\r\n</div>\r\n}\r\n}@else{\r\n<sky-empty-design-card [visibleIcon]=\"false\"\r\n                       [visibleQuickAction]=\"false\"\r\n                       [containerClass]=\"emptyStateContainerClass\"\r\n                       [cardBodyClass]=\"''\"\r\n                       [cardBodyContainerClass]=\"''\"\r\n                       [emptyTextClass]=\"emptyStateTextClass\"\r\n                       [emptyText]=\"isLoading ? ((sectionTitle | HRTranslate) + ' ' + ('IsLoading' | HRTranslate)) : ('ThereIsNoBankYet' | HRTranslate)\">\r\n</sky-empty-design-card>\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$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"] }, { 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: ProfileBankInfoWidgetComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'hr-profile-bank-info-widget', standalone: true, imports: [CommonModule, HRTranslatePipe, SkySectionDividerComponent, HRInfoFieldComponent], template: "@if(sectionHeaderVisibility){\r\n<sky-section-divider [fontAwesomeIcon]=\"bankInformationIcon\"\r\n                     [text]=\"(sectionTitle | HRTranslate|uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n}\r\n@if(employeeBankInformation.length > 0){\r\n@for (bankInfo of employeeBankInformation; track bankInfo){\r\n<div [class]=\"cardClass\">\r\n  @if(bankInfo.IsMainBank && employeeBankInformation.length > 1){\r\n  <div [class]=\"mainBadgeClass\"\r\n       style=\"padding-top: 2px\"\r\n       [style.margin-left]=\"!isRTL ? '-6px' : 'unset'\">\r\n    <span [class]=\"mainBadgeTextClass\">{{'MainBank' | HRTranslate}}</span>\r\n  </div>\r\n\r\n  <div [class]=\"triangleClass\"\r\n       [style.margin-left]=\"!isRTL ? '-6px' : 'unset'\"\r\n       [style.margin-right]=\"isRTL ? '-5px' : '20px'\"\r\n       [style.margin-top]=\"!isRTL ? '7px' : '4px'\">\r\n    <svg viewBox=\"4 2 16 16\" class=\"status-badge-triangle\" fill=\"#e67e0f\">\r\n      <path d=\"m3.86 8.753 5.482 4.796c.646.566 1.658.106 1.658-.753V3.204a1 1 0 0 0-1.659-.753l-5.48 4.796a1 1 0 0 0 0 1.506z\"></path>\r\n    </svg>\r\n  </div>\r\n  }\r\n\r\n  <div [ngClass]=\"[rowClass, bankInfo.IsMainBank ? rowMainPtClass : rowNormalPtClass]\">\r\n    <div [class]=\"columnClass\">\r\n      <hr-info-field [labelKey]=\"'Bank'\"\r\n                     [value]=\"bankInfo.BankName\"\r\n                     [labelClass]=\"labelClass\"\r\n                     [valueClass]=\"valueClass\">\r\n      </hr-info-field>\r\n    </div>\r\n\r\n    <div [class]=\"columnClass\">\r\n      <hr-info-field [labelKey]=\"'Branch'\"\r\n                     [value]=\"bankInfo.BranchName\"\r\n                     [labelClass]=\"labelClass\"\r\n                     [valueClass]=\"valueClass\">\r\n      </hr-info-field>\r\n    </div>\r\n\r\n    <div [class]=\"responsiveTopSpacingColClass\">\r\n      <hr-info-field [labelKey]=\"'IBAN'\"\r\n                     [value]=\"bankInfo.IBAN\"\r\n                     [labelClass]=\"labelClass\"\r\n                     [valueClass]=\"valueClass\">\r\n      </hr-info-field>\r\n    </div>\r\n\r\n    <div [class]=\"topSpacingColClass\">\r\n      <hr-info-field [labelKey]=\"'AccountNumber'\"\r\n                     [value]=\"bankInfo.AccountNumber\"\r\n                     [labelClass]=\"labelClass\"\r\n                     [valueClass]=\"valueClass\">\r\n      </hr-info-field>\r\n    </div>\r\n\r\n    <div [class]=\"topSpacingColClass\">\r\n      <hr-info-field [labelKey]=\"'Beneficiary'\"\r\n                     [value]=\"bankInfo.Beneficiary\"\r\n                     [labelClass]=\"labelClass\"\r\n                     [valueClass]=\"valueClass\">\r\n      </hr-info-field>\r\n    </div>\r\n\r\n    @if(bankInfo.TransferAmount != null){\r\n    <div [class]=\"topSpacingColClass\">\r\n      <hr-info-field [labelKey]=\"'TransferAmount'\"\r\n                     [value]=\"formatAmount(bankInfo.TransferAmount) + ' (' + currencyCode + ')'\"\r\n                     [labelClass]=\"labelClass\"\r\n                     [valueClass]=\"valueClass\">\r\n      </hr-info-field>\r\n    </div>\r\n    }\r\n  </div>\r\n</div>\r\n}\r\n}@else{\r\n<div [class]=\"emptyStateContainerClass\">\r\n  <p [class]=\"emptyStateTextClass\">{{isLoading ? ((sectionTitle | HRTranslate) + ' ' + ('IsLoading' | HRTranslate)) : ('ThereIsNoBankYet' | HRTranslate)}}</p>\r\n</div>\r\n}\r\n" }]
+            args: [{ selector: 'hr-profile-bank-info-widget', standalone: true, imports: [CommonModule, HRTranslatePipe, SkySectionDividerComponent, SkyEmptyDesignCardComponent, HRInfoFieldComponent], template: "@if(sectionHeaderVisibility){\r\n<sky-section-divider [fontAwesomeIcon]=\"bankInformationIcon\"\r\n                     [text]=\"(sectionTitle | HRTranslate|uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n}\r\n@if(employeeBankInformation.length > 0){\r\n@for (bankInfo of employeeBankInformation; track bankInfo){\r\n<div [class]=\"cardClass\">\r\n  @if(bankInfo.IsMainBank && employeeBankInformation.length > 1){\r\n  <div [class]=\"mainBadgeClass\"\r\n       style=\"padding-top: 2px\"\r\n       [style.margin-left]=\"!isRTL ? '-6px' : 'unset'\">\r\n    <span [class]=\"mainBadgeTextClass\">{{'MainBank' | HRTranslate}}</span>\r\n  </div>\r\n\r\n  <div [class]=\"triangleClass\"\r\n       [style.margin-left]=\"!isRTL ? '-6px' : 'unset'\"\r\n       [style.margin-right]=\"isRTL ? '-5px' : '20px'\"\r\n       [style.margin-top]=\"!isRTL ? '7px' : '4px'\">\r\n    <svg viewBox=\"4 2 16 16\" class=\"status-badge-triangle\" fill=\"#e67e0f\">\r\n      <path d=\"m3.86 8.753 5.482 4.796c.646.566 1.658.106 1.658-.753V3.204a1 1 0 0 0-1.659-.753l-5.48 4.796a1 1 0 0 0 0 1.506z\"></path>\r\n    </svg>\r\n  </div>\r\n  }\r\n\r\n  <div [ngClass]=\"[rowClass, bankInfo.IsMainBank ? rowMainPtClass : rowNormalPtClass]\">\r\n    <div [class]=\"columnClass\">\r\n      <hr-info-field [labelKey]=\"'Bank'\"\r\n                     [value]=\"bankInfo.BankName\"\r\n                     [labelClass]=\"labelClass\"\r\n                     [valueClass]=\"valueClass\">\r\n      </hr-info-field>\r\n    </div>\r\n\r\n    <div [class]=\"columnClass\">\r\n      <hr-info-field [labelKey]=\"'Branch'\"\r\n                     [value]=\"bankInfo.BranchName\"\r\n                     [labelClass]=\"labelClass\"\r\n                     [valueClass]=\"valueClass\">\r\n      </hr-info-field>\r\n    </div>\r\n\r\n    <div [class]=\"responsiveTopSpacingColClass\">\r\n      <hr-info-field [labelKey]=\"'IBAN'\"\r\n                     [value]=\"bankInfo.IBAN\"\r\n                     [labelClass]=\"labelClass\"\r\n                     [valueClass]=\"valueClass\">\r\n      </hr-info-field>\r\n    </div>\r\n\r\n    <div [class]=\"topSpacingColClass\">\r\n      <hr-info-field [labelKey]=\"'AccountNumber'\"\r\n                     [value]=\"bankInfo.AccountNumber\"\r\n                     [labelClass]=\"labelClass\"\r\n                     [valueClass]=\"valueClass\">\r\n      </hr-info-field>\r\n    </div>\r\n\r\n    <div [class]=\"topSpacingColClass\">\r\n      <hr-info-field [labelKey]=\"'Beneficiary'\"\r\n                     [value]=\"bankInfo.Beneficiary\"\r\n                     [labelClass]=\"labelClass\"\r\n                     [valueClass]=\"valueClass\">\r\n      </hr-info-field>\r\n    </div>\r\n\r\n    @if(bankInfo.TransferAmount != null){\r\n    <div [class]=\"topSpacingColClass\">\r\n      <hr-info-field [labelKey]=\"'TransferAmount'\"\r\n                     [value]=\"formatAmount(bankInfo.TransferAmount) + ' (' + currencyCode + ')'\"\r\n                     [labelClass]=\"labelClass\"\r\n                     [valueClass]=\"valueClass\">\r\n      </hr-info-field>\r\n    </div>\r\n    }\r\n  </div>\r\n</div>\r\n}\r\n}@else{\r\n<sky-empty-design-card [visibleIcon]=\"false\"\r\n                       [visibleQuickAction]=\"false\"\r\n                       [containerClass]=\"emptyStateContainerClass\"\r\n                       [cardBodyClass]=\"''\"\r\n                       [cardBodyContainerClass]=\"''\"\r\n                       [emptyTextClass]=\"emptyStateTextClass\"\r\n                       [emptyText]=\"isLoading ? ((sectionTitle | HRTranslate) + ' ' + ('IsLoading' | HRTranslate)) : ('ThereIsNoBankYet' | HRTranslate)\">\r\n</sky-empty-design-card>\r\n}\r\n" }]
         }], ctorParameters: () => [{ type: HRCommonMethodsService }, { type: HRSelfWidgetsService }], propDecorators: { currencyCode: [{
                 type: Input
             }], currencyDecimals: [{
@@ -2377,11 +2514,11 @@ class ProfilePersonalInfoMainWidgetComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ProfilePersonalInfoMainWidgetComponent, deps: [{ token: HRSelfWidgetsService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: ProfilePersonalInfoMainWidgetComponent, isStandalone: true, selector: "hr-profile-personal-info-main-widget", inputs: { baseUrl: "baseUrl", alternateLanguage: "alternateLanguage", headerIconClass: "headerIconClass", headerTextClass: "headerTextClass", headerDividerClass: "headerDividerClass", rowClass: "rowClass", columnClass: "columnClass", hiddenSpacerColClass: "hiddenSpacerColClass", topSpacingColumnClass: "topSpacingColumnClass", topSpacingBottomMdSpacingColumnClass: "topSpacingBottomMdSpacingColumnClass", topSpacingBottomSpacingColumnClass: "topSpacingBottomSpacingColumnClass", labelClass: "labelClass", valueClass: "valueClass", emptyStateContainerClass: "emptyStateContainerClass", emptyStateTextClass: "emptyStateTextClass", mainIcon: "mainIcon", sectionTitle: "sectionTitle" }, outputs: { isLoadingChanged: "isLoadingChanged", errorOccurred: "errorOccurred" }, ngImport: i0, template: "<sky-section-divider [fontAwesomeIcon]=\"mainIcon\"\r\n                     [text]=\"(sectionTitle | HRTranslate | uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n@if(employeePersonalInformation){\r\n<div [ngClass]=\"rowClass\">\r\n  <div [ngClass]=\"columnClass\">\r\n    <hr-info-field [labelKey]=\"'Name'\"\r\n                   [value]=\"employeePersonalInformation.EmployeeName\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"columnClass\">\r\n    <div [ngClass]=\"labelClass\">{{'Name' | HRTranslate}} ({{alternateLanguage}})</div>\r\n    @if(employeePersonalInformation.EmployeeNameAlternate){\r\n    <div [ngClass]=\"valueClass\">{{employeePersonalInformation.EmployeeNameAlternate}}</div>\r\n    }@else{\r\n    <div [ngClass]=\"valueClass\">{{'\u2014'}}</div>\r\n    }\r\n  </div>\r\n\r\n  <div [ngClass]=\"hiddenSpacerColClass\"></div>\r\n\r\n  <div [ngClass]=\"topSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'Nationality'\"\r\n                   [value]=\"employeePersonalInformation.NationalityName\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"topSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'NationalNumber'\"\r\n                   [value]=\"employeePersonalInformation.NationalNumber\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"topSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'SocialSecurityNumber'\"\r\n                   [value]=\"employeePersonalInformation.SocialSecurityNumber\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n\r\n  <div [ngClass]=\"topSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'MaritalStatus'\"\r\n                   [value]=\"employeePersonalInformation.MaritalStateName\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"topSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'BirthDate'\"\r\n                   [value]=\"employeePersonalInformation.BirthDate ? (employeePersonalInformation.BirthDate | date: 'dd/MM/yyyy') : null\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"topSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'BirthPlace'\"\r\n                   [value]=\"employeePersonalInformation.BirthPlace\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n\r\n  <div [ngClass]=\"topSpacingBottomMdSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'BloodType'\"\r\n                   [value]=\"employeePersonalInformation.BloodTypeCode\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"topSpacingBottomMdSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'Religion'\"\r\n                   [value]=\"employeePersonalInformation.ReligionName\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"topSpacingBottomSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'MinistryOfLaborNumber'\"\r\n                   [value]=\"employeePersonalInformation.MinistryOfLaborNumber\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n</div>\r\n}@else{\r\n<div [class]=\"emptyStateContainerClass\">\r\n  <p [class]=\"emptyStateTextClass\">{{isLoading ? ((sectionTitle | HRTranslate) + ' ' + ('IsLoading' | HRTranslate)) : ('ThereIsNoMainYet' | HRTranslate)}}</p>\r\n</div>\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i2$1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i2$1.DatePipe, name: "date" }, { kind: "pipe", type: HRTranslatePipe, name: "HRTranslate" }, { kind: "component", type: SkySectionDividerComponent, selector: "sky-section-divider", inputs: ["text", "fontAwesomeIcon", "textClass", "dividerClass", "iconClass"] }, { kind: "component", type: HRInfoFieldComponent, selector: "hr-info-field", inputs: ["labelKey", "value", "labelClass", "valueClass", "fallbackValue"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: ProfilePersonalInfoMainWidgetComponent, isStandalone: true, selector: "hr-profile-personal-info-main-widget", inputs: { baseUrl: "baseUrl", alternateLanguage: "alternateLanguage", headerIconClass: "headerIconClass", headerTextClass: "headerTextClass", headerDividerClass: "headerDividerClass", rowClass: "rowClass", columnClass: "columnClass", hiddenSpacerColClass: "hiddenSpacerColClass", topSpacingColumnClass: "topSpacingColumnClass", topSpacingBottomMdSpacingColumnClass: "topSpacingBottomMdSpacingColumnClass", topSpacingBottomSpacingColumnClass: "topSpacingBottomSpacingColumnClass", labelClass: "labelClass", valueClass: "valueClass", emptyStateContainerClass: "emptyStateContainerClass", emptyStateTextClass: "emptyStateTextClass", mainIcon: "mainIcon", sectionTitle: "sectionTitle" }, outputs: { isLoadingChanged: "isLoadingChanged", errorOccurred: "errorOccurred" }, ngImport: i0, template: "<sky-section-divider [fontAwesomeIcon]=\"mainIcon\"\r\n                     [text]=\"(sectionTitle | HRTranslate | uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n@if(employeePersonalInformation){\r\n<div [ngClass]=\"rowClass\">\r\n  <div [ngClass]=\"columnClass\">\r\n    <hr-info-field [labelKey]=\"'Name'\"\r\n                   [value]=\"employeePersonalInformation.EmployeeName\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"columnClass\">\r\n    <div [ngClass]=\"labelClass\">{{'Name' | HRTranslate}} ({{alternateLanguage}})</div>\r\n    @if(employeePersonalInformation.EmployeeNameAlternate){\r\n    <div [ngClass]=\"valueClass\">{{employeePersonalInformation.EmployeeNameAlternate}}</div>\r\n    }@else{\r\n    <div [ngClass]=\"valueClass\">{{'\u2014'}}</div>\r\n    }\r\n  </div>\r\n\r\n  <div [ngClass]=\"hiddenSpacerColClass\"></div>\r\n\r\n  <div [ngClass]=\"topSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'Nationality'\"\r\n                   [value]=\"employeePersonalInformation.NationalityName\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"topSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'NationalNumber'\"\r\n                   [value]=\"employeePersonalInformation.NationalNumber\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"topSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'SocialSecurityNumber'\"\r\n                   [value]=\"employeePersonalInformation.SocialSecurityNumber\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n\r\n  <div [ngClass]=\"topSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'MaritalStatus'\"\r\n                   [value]=\"employeePersonalInformation.MaritalStateName\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"topSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'BirthDate'\"\r\n                   [value]=\"employeePersonalInformation.BirthDate ? (employeePersonalInformation.BirthDate | date: 'dd/MM/yyyy') : null\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"topSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'BirthPlace'\"\r\n                   [value]=\"employeePersonalInformation.BirthPlace\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n\r\n  <div [ngClass]=\"topSpacingBottomMdSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'BloodType'\"\r\n                   [value]=\"employeePersonalInformation.BloodTypeCode\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"topSpacingBottomMdSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'Religion'\"\r\n                   [value]=\"employeePersonalInformation.ReligionName\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"topSpacingBottomSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'MinistryOfLaborNumber'\"\r\n                   [value]=\"employeePersonalInformation.MinistryOfLaborNumber\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  </div>\r\n\r\n}\r\n@else {\r\n  <sky-empty-design-card [visibleIcon]=\"false\"\r\n                       [visibleQuickAction]=\"false\"\r\n                       [containerClass]=\"emptyStateContainerClass\"\r\n                       [cardBodyClass]=\"''\"\r\n                       [cardBodyContainerClass]=\"''\"\r\n                       [emptyTextClass]=\"emptyStateTextClass\"\r\n                       [emptyText]=\"isLoading ? ((sectionTitle | HRTranslate) + ' ' + ('IsLoading' | HRTranslate)) : ('ThereIsNoMainYet' | HRTranslate)\">\r\n</sky-empty-design-card>\r\n}\r\n\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i2$1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i2$1.DatePipe, name: "date" }, { kind: "pipe", type: HRTranslatePipe, name: "HRTranslate" }, { kind: "component", type: SkySectionDividerComponent, selector: "sky-section-divider", inputs: ["text", "fontAwesomeIcon", "textClass", "dividerClass", "iconClass"] }, { kind: "component", type: 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: ProfilePersonalInfoMainWidgetComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'hr-profile-personal-info-main-widget', standalone: true, imports: [CommonModule, HRTranslatePipe, SkySectionDividerComponent, HRInfoFieldComponent], template: "<sky-section-divider [fontAwesomeIcon]=\"mainIcon\"\r\n                     [text]=\"(sectionTitle | HRTranslate | uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n@if(employeePersonalInformation){\r\n<div [ngClass]=\"rowClass\">\r\n  <div [ngClass]=\"columnClass\">\r\n    <hr-info-field [labelKey]=\"'Name'\"\r\n                   [value]=\"employeePersonalInformation.EmployeeName\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"columnClass\">\r\n    <div [ngClass]=\"labelClass\">{{'Name' | HRTranslate}} ({{alternateLanguage}})</div>\r\n    @if(employeePersonalInformation.EmployeeNameAlternate){\r\n    <div [ngClass]=\"valueClass\">{{employeePersonalInformation.EmployeeNameAlternate}}</div>\r\n    }@else{\r\n    <div [ngClass]=\"valueClass\">{{'\u2014'}}</div>\r\n    }\r\n  </div>\r\n\r\n  <div [ngClass]=\"hiddenSpacerColClass\"></div>\r\n\r\n  <div [ngClass]=\"topSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'Nationality'\"\r\n                   [value]=\"employeePersonalInformation.NationalityName\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"topSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'NationalNumber'\"\r\n                   [value]=\"employeePersonalInformation.NationalNumber\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"topSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'SocialSecurityNumber'\"\r\n                   [value]=\"employeePersonalInformation.SocialSecurityNumber\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n\r\n  <div [ngClass]=\"topSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'MaritalStatus'\"\r\n                   [value]=\"employeePersonalInformation.MaritalStateName\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"topSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'BirthDate'\"\r\n                   [value]=\"employeePersonalInformation.BirthDate ? (employeePersonalInformation.BirthDate | date: 'dd/MM/yyyy') : null\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"topSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'BirthPlace'\"\r\n                   [value]=\"employeePersonalInformation.BirthPlace\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n\r\n  <div [ngClass]=\"topSpacingBottomMdSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'BloodType'\"\r\n                   [value]=\"employeePersonalInformation.BloodTypeCode\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"topSpacingBottomMdSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'Religion'\"\r\n                   [value]=\"employeePersonalInformation.ReligionName\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"topSpacingBottomSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'MinistryOfLaborNumber'\"\r\n                   [value]=\"employeePersonalInformation.MinistryOfLaborNumber\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n</div>\r\n}@else{\r\n<div [class]=\"emptyStateContainerClass\">\r\n  <p [class]=\"emptyStateTextClass\">{{isLoading ? ((sectionTitle | HRTranslate) + ' ' + ('IsLoading' | HRTranslate)) : ('ThereIsNoMainYet' | HRTranslate)}}</p>\r\n</div>\r\n}\r\n" }]
+            args: [{ selector: 'hr-profile-personal-info-main-widget', standalone: true, imports: [CommonModule, HRTranslatePipe, SkySectionDividerComponent, SkyEmptyDesignCardComponent, HRInfoFieldComponent], template: "<sky-section-divider [fontAwesomeIcon]=\"mainIcon\"\r\n                     [text]=\"(sectionTitle | HRTranslate | uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n@if(employeePersonalInformation){\r\n<div [ngClass]=\"rowClass\">\r\n  <div [ngClass]=\"columnClass\">\r\n    <hr-info-field [labelKey]=\"'Name'\"\r\n                   [value]=\"employeePersonalInformation.EmployeeName\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"columnClass\">\r\n    <div [ngClass]=\"labelClass\">{{'Name' | HRTranslate}} ({{alternateLanguage}})</div>\r\n    @if(employeePersonalInformation.EmployeeNameAlternate){\r\n    <div [ngClass]=\"valueClass\">{{employeePersonalInformation.EmployeeNameAlternate}}</div>\r\n    }@else{\r\n    <div [ngClass]=\"valueClass\">{{'\u2014'}}</div>\r\n    }\r\n  </div>\r\n\r\n  <div [ngClass]=\"hiddenSpacerColClass\"></div>\r\n\r\n  <div [ngClass]=\"topSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'Nationality'\"\r\n                   [value]=\"employeePersonalInformation.NationalityName\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"topSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'NationalNumber'\"\r\n                   [value]=\"employeePersonalInformation.NationalNumber\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"topSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'SocialSecurityNumber'\"\r\n                   [value]=\"employeePersonalInformation.SocialSecurityNumber\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n\r\n  <div [ngClass]=\"topSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'MaritalStatus'\"\r\n                   [value]=\"employeePersonalInformation.MaritalStateName\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"topSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'BirthDate'\"\r\n                   [value]=\"employeePersonalInformation.BirthDate ? (employeePersonalInformation.BirthDate | date: 'dd/MM/yyyy') : null\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"topSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'BirthPlace'\"\r\n                   [value]=\"employeePersonalInformation.BirthPlace\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n\r\n  <div [ngClass]=\"topSpacingBottomMdSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'BloodType'\"\r\n                   [value]=\"employeePersonalInformation.BloodTypeCode\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"topSpacingBottomMdSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'Religion'\"\r\n                   [value]=\"employeePersonalInformation.ReligionName\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"topSpacingBottomSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'MinistryOfLaborNumber'\"\r\n                   [value]=\"employeePersonalInformation.MinistryOfLaborNumber\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  </div>\r\n\r\n}\r\n@else {\r\n  <sky-empty-design-card [visibleIcon]=\"false\"\r\n                       [visibleQuickAction]=\"false\"\r\n                       [containerClass]=\"emptyStateContainerClass\"\r\n                       [cardBodyClass]=\"''\"\r\n                       [cardBodyContainerClass]=\"''\"\r\n                       [emptyTextClass]=\"emptyStateTextClass\"\r\n                       [emptyText]=\"isLoading ? ((sectionTitle | HRTranslate) + ' ' + ('IsLoading' | HRTranslate)) : ('ThereIsNoMainYet' | HRTranslate)\">\r\n</sky-empty-design-card>\r\n}\r\n\r\n" }]
         }], ctorParameters: () => [{ type: HRSelfWidgetsService }], propDecorators: { baseUrl: [{
                 type: Input,
                 args: [{ required: true }]
@@ -2472,11 +2609,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<div [class]=\"emptyStateContainerClass\">\r\n  <p [class]=\"emptyStateTextClass\">{{isLoading ? ((sectionTitle | HRTranslate) + ' ' + ('IsLoading' | HRTranslate)) : ('ThereIsNoContactYet' | HRTranslate)}}</p>\r\n</div>\r\n}", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i2$1.UpperCasePipe, name: "uppercase" }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "pipe", type: HRTranslatePipe, name: "HRTranslate" }, { kind: "component", type: SkySectionDividerComponent, selector: "sky-section-divider", inputs: ["text", "fontAwesomeIcon", "textClass", "dividerClass", "iconClass"] }, { kind: "component", type: HRInfoFieldComponent, selector: "hr-info-field", inputs: ["labelKey", "value", "labelClass", "valueClass", "fallbackValue"] }] });
+    static ɵ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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ProfilePersonalInfoContactWidgetComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'hr-profile-personal-info-contact-widget', standalone: true, imports: [CommonModule, FontAwesomeModule, HRTranslatePipe, SkySectionDividerComponent, HRInfoFieldComponent], template: "<sky-section-divider [fontAwesomeIcon]=\"contactIcon\"\r\n                     [text]=\"(sectionTitle | HRTranslate|uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n@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<div [class]=\"emptyStateContainerClass\">\r\n  <p [class]=\"emptyStateTextClass\">{{isLoading ? ((sectionTitle | HRTranslate) + ' ' + ('IsLoading' | HRTranslate)) : ('ThereIsNoContactYet' | HRTranslate)}}</p>\r\n</div>\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  \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}" }]
         }], ctorParameters: () => [{ type: HRSelfWidgetsService }], propDecorators: { baseUrl: [{
                 type: Input,
                 args: [{ required: true }]
@@ -2571,11 +2708,11 @@ class ProfilePersonalInfoLanguagesWidgetComponent {
         return this.languages?.join(', ') || '-';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ProfilePersonalInfoLanguagesWidgetComponent, deps: [{ token: HRSelfWidgetsService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: ProfilePersonalInfoLanguagesWidgetComponent, isStandalone: true, selector: "hr-profile-personal-info-languages-widget", inputs: { baseUrl: "baseUrl", headerIconClass: "headerIconClass", headerTextClass: "headerTextClass", headerDividerClass: "headerDividerClass", contentTextClass: "contentTextClass", emptyStateContainerClass: "emptyStateContainerClass", emptyStateTextClass: "emptyStateTextClass", languagesIcon: "languagesIcon", sectionTitle: "sectionTitle" }, outputs: { hasDataChange: "hasDataChange", isLoadingChanged: "isLoadingChanged", errorOccurred: "errorOccurred" }, ngImport: i0, template: "<sky-section-divider [fontAwesomeIcon]=\"languagesIcon\"\r\n                     [text]=\"(sectionTitle | HRTranslate | uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n@if((languages?.length ?? 0) > 0){\r\n<div [ngClass]=\"contentTextClass\">\r\n  {{getLanguages()}}\r\n</div>\r\n}@else{\r\n<div [class]=\"emptyStateContainerClass\">\r\n  <p [class]=\"emptyStateTextClass\">{{isLoading ? ((sectionTitle | HRTranslate) + ' ' + ('IsLoading' | HRTranslate)) : ('ThereIsNoLanguagesYet' | HRTranslate)}}</p>\r\n</div>\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: 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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: ProfilePersonalInfoLanguagesWidgetComponent, isStandalone: true, selector: "hr-profile-personal-info-languages-widget", inputs: { baseUrl: "baseUrl", headerIconClass: "headerIconClass", headerTextClass: "headerTextClass", headerDividerClass: "headerDividerClass", contentTextClass: "contentTextClass", emptyStateContainerClass: "emptyStateContainerClass", emptyStateTextClass: "emptyStateTextClass", languagesIcon: "languagesIcon", sectionTitle: "sectionTitle" }, outputs: { hasDataChange: "hasDataChange", isLoadingChanged: "isLoadingChanged", errorOccurred: "errorOccurred" }, ngImport: i0, template: "<sky-section-divider [fontAwesomeIcon]=\"languagesIcon\"\r\n                     [text]=\"(sectionTitle | HRTranslate | uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n@if((languages?.length ?? 0) > 0){\r\n<div [ngClass]=\"contentTextClass\">\r\n  {{getLanguages()}}\r\n</div>\r\n}@else{\r\n<sky-empty-design-card [visibleIcon]=\"false\"\r\n                       [visibleQuickAction]=\"false\"\r\n                       [containerClass]=\"emptyStateContainerClass\"\r\n                       [cardBodyClass]=\"''\"\r\n                       [cardBodyContainerClass]=\"''\"\r\n                       [emptyTextClass]=\"emptyStateTextClass\"\r\n                       [emptyText]=\"isLoading ? ((sectionTitle | HRTranslate) + ' ' + ('IsLoading' | HRTranslate)) : ('ThereIsNoLanguagesYet' | HRTranslate)\">\r\n</sky-empty-design-card>\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$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: ProfilePersonalInfoLanguagesWidgetComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'hr-profile-personal-info-languages-widget', standalone: true, imports: [CommonModule, HRTranslatePipe, SkySectionDividerComponent], template: "<sky-section-divider [fontAwesomeIcon]=\"languagesIcon\"\r\n                     [text]=\"(sectionTitle | HRTranslate | uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n@if((languages?.length ?? 0) > 0){\r\n<div [ngClass]=\"contentTextClass\">\r\n  {{getLanguages()}}\r\n</div>\r\n}@else{\r\n<div [class]=\"emptyStateContainerClass\">\r\n  <p [class]=\"emptyStateTextClass\">{{isLoading ? ((sectionTitle | HRTranslate) + ' ' + ('IsLoading' | HRTranslate)) : ('ThereIsNoLanguagesYet' | HRTranslate)}}</p>\r\n</div>\r\n}\r\n" }]
+            args: [{ selector: 'hr-profile-personal-info-languages-widget', standalone: true, imports: [CommonModule, HRTranslatePipe, SkySectionDividerComponent, SkyEmptyDesignCardComponent], template: "<sky-section-divider [fontAwesomeIcon]=\"languagesIcon\"\r\n                     [text]=\"(sectionTitle | HRTranslate | uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n@if((languages?.length ?? 0) > 0){\r\n<div [ngClass]=\"contentTextClass\">\r\n  {{getLanguages()}}\r\n</div>\r\n}@else{\r\n<sky-empty-design-card [visibleIcon]=\"false\"\r\n                       [visibleQuickAction]=\"false\"\r\n                       [containerClass]=\"emptyStateContainerClass\"\r\n                       [cardBodyClass]=\"''\"\r\n                       [cardBodyContainerClass]=\"''\"\r\n                       [emptyTextClass]=\"emptyStateTextClass\"\r\n                       [emptyText]=\"isLoading ? ((sectionTitle | HRTranslate) + ' ' + ('IsLoading' | HRTranslate)) : ('ThereIsNoLanguagesYet' | HRTranslate)\">\r\n</sky-empty-design-card>\r\n}\r\n" }]
         }], ctorParameters: () => [{ type: HRSelfWidgetsService }], propDecorators: { baseUrl: [{
                 type: Input
             }], headerIconClass: [{
@@ -2652,11 +2789,11 @@ class ProfilePersonalInfoOtherNationalitiesWidgetComponent {
         return this.personalInfo?.join(', ') || '-';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ProfilePersonalInfoOtherNationalitiesWidgetComponent, deps: [{ token: HRSelfWidgetsService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: ProfilePersonalInfoOtherNationalitiesWidgetComponent, isStandalone: true, selector: "hr-profile-personal-info-other-nationalities-widget", inputs: { baseUrl: "baseUrl", headerIconClass: "headerIconClass", headerTextClass: "headerTextClass", headerDividerClass: "headerDividerClass", contentTextClass: "contentTextClass", emptyStateContainerClass: "emptyStateContainerClass", emptyStateTextClass: "emptyStateTextClass", emptyStateTextKey: "emptyStateTextKey", otherNationalitiesIcon: "otherNationalitiesIcon", sectionTitle: "sectionTitle" }, outputs: { hasDataChange: "hasDataChange", isLoadingChanged: "isLoadingChanged", errorOccurred: "errorOccurred" }, ngImport: i0, template: "<sky-section-divider [fontAwesomeIcon]=\"otherNationalitiesIcon\"\r\n                     [text]=\"( sectionTitle | HRTranslate |uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n@if((personalInfo?.length ?? 0) > 0){\r\n<div [ngClass]=\"contentTextClass\">\r\n  {{getOtherNationalities()}}\r\n</div>\r\n}@else{\r\n<div [class]=\"emptyStateContainerClass\">\r\n  <p [class]=\"emptyStateTextClass\">{{isLoading ? ((sectionTitle | HRTranslate) + ' ' + ('IsLoading' | HRTranslate)) : (emptyStateTextKey | HRTranslate)}}</p>\r\n</div>\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: 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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: ProfilePersonalInfoOtherNationalitiesWidgetComponent, isStandalone: true, selector: "hr-profile-personal-info-other-nationalities-widget", inputs: { baseUrl: "baseUrl", headerIconClass: "headerIconClass", headerTextClass: "headerTextClass", headerDividerClass: "headerDividerClass", contentTextClass: "contentTextClass", emptyStateContainerClass: "emptyStateContainerClass", emptyStateTextClass: "emptyStateTextClass", emptyStateTextKey: "emptyStateTextKey", otherNationalitiesIcon: "otherNationalitiesIcon", sectionTitle: "sectionTitle" }, outputs: { hasDataChange: "hasDataChange", isLoadingChanged: "isLoadingChanged", errorOccurred: "errorOccurred" }, ngImport: i0, template: "<sky-section-divider [fontAwesomeIcon]=\"otherNationalitiesIcon\"\r\n                     [text]=\"( sectionTitle | HRTranslate |uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n@if((personalInfo?.length ?? 0) > 0){\r\n<div [ngClass]=\"contentTextClass\">\r\n  {{getOtherNationalities()}}\r\n</div>\r\n}@else{\r\n<sky-empty-design-card [visibleIcon]=\"false\"\r\n                       [visibleQuickAction]=\"false\"\r\n                       [containerClass]=\"emptyStateContainerClass\"\r\n                       [cardBodyClass]=\"''\"\r\n                       [cardBodyContainerClass]=\"''\"\r\n                       [emptyTextClass]=\"emptyStateTextClass\"\r\n                       [emptyText]=\"isLoading ? ((sectionTitle | HRTranslate) + ' ' + ('IsLoading' | HRTranslate)) : (emptyStateTextKey | HRTranslate)\">\r\n</sky-empty-design-card>\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$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: ProfilePersonalInfoOtherNationalitiesWidgetComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'hr-profile-personal-info-other-nationalities-widget', standalone: true, imports: [CommonModule, HRTranslatePipe, SkySectionDividerComponent], template: "<sky-section-divider [fontAwesomeIcon]=\"otherNationalitiesIcon\"\r\n                     [text]=\"( sectionTitle | HRTranslate |uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n@if((personalInfo?.length ?? 0) > 0){\r\n<div [ngClass]=\"contentTextClass\">\r\n  {{getOtherNationalities()}}\r\n</div>\r\n}@else{\r\n<div [class]=\"emptyStateContainerClass\">\r\n  <p [class]=\"emptyStateTextClass\">{{isLoading ? ((sectionTitle | HRTranslate) + ' ' + ('IsLoading' | HRTranslate)) : (emptyStateTextKey | HRTranslate)}}</p>\r\n</div>\r\n}\r\n" }]
+            args: [{ selector: 'hr-profile-personal-info-other-nationalities-widget', standalone: true, imports: [CommonModule, HRTranslatePipe, SkySectionDividerComponent, SkyEmptyDesignCardComponent], template: "<sky-section-divider [fontAwesomeIcon]=\"otherNationalitiesIcon\"\r\n                     [text]=\"( sectionTitle | HRTranslate |uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n@if((personalInfo?.length ?? 0) > 0){\r\n<div [ngClass]=\"contentTextClass\">\r\n  {{getOtherNationalities()}}\r\n</div>\r\n}@else{\r\n<sky-empty-design-card [visibleIcon]=\"false\"\r\n                       [visibleQuickAction]=\"false\"\r\n                       [containerClass]=\"emptyStateContainerClass\"\r\n                       [cardBodyClass]=\"''\"\r\n                       [cardBodyContainerClass]=\"''\"\r\n                       [emptyTextClass]=\"emptyStateTextClass\"\r\n                       [emptyText]=\"isLoading ? ((sectionTitle | HRTranslate) + ' ' + ('IsLoading' | HRTranslate)) : (emptyStateTextKey | HRTranslate)\">\r\n</sky-empty-design-card>\r\n}\r\n" }]
         }], ctorParameters: () => [{ type: HRSelfWidgetsService }], propDecorators: { baseUrl: [{
                 type: Input,
                 args: [{ required: true }]
@@ -2730,11 +2867,11 @@ class ProfilePersonalInfoAddressWidgetComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ProfilePersonalInfoAddressWidgetComponent, deps: [{ token: HRSelfWidgetsService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: ProfilePersonalInfoAddressWidgetComponent, isStandalone: true, selector: "hr-profile-personal-info-address-widget", inputs: { baseUrl: "baseUrl", headerIconClass: "headerIconClass", headerTextClass: "headerTextClass", headerDividerClass: "headerDividerClass", rowClass: "rowClass", columnClass: "columnClass", responsiveTopSpacingColumnClass: "responsiveTopSpacingColumnClass", topSpacingBottomSpacingColumnClass: "topSpacingBottomSpacingColumnClass", labelClass: "labelClass", valueClass: "valueClass", emptyStateContainerClass: "emptyStateContainerClass", emptyStateTextClass: "emptyStateTextClass", addressIcon: "addressIcon", sectionTitle: "sectionTitle" }, outputs: { isLoadingChanged: "isLoadingChanged", errorOccurred: "errorOccurred" }, ngImport: i0, template: "<sky-section-divider [fontAwesomeIcon]=\"addressIcon\"\r\n                     [text]=\"( sectionTitle | HRTranslate | uppercase )\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n@if(personalInfoAddressDetails){\r\n<div [ngClass]=\"rowClass\">\r\n  <div [ngClass]=\"columnClass\">\r\n    <hr-info-field [labelKey]=\"'Address'\"\r\n                   [value]=\"personalInfoAddressDetails.Address\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n\r\n  <div [ngClass]=\"columnClass\">\r\n    <hr-info-field [labelKey]=\"'City'\"\r\n                   [value]=\"personalInfoAddressDetails.City\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n\r\n  <div [ngClass]=\"responsiveTopSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'P.OBox'\"\r\n                   [value]=\"personalInfoAddressDetails.POBox\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n\r\n  <div [ngClass]=\"topSpacingBottomSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'PostalCode'\"\r\n                   [value]=\"personalInfoAddressDetails.PostalCode\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n</div>\r\n}@else{\r\n<div [class]=\"emptyStateContainerClass\">\r\n  <p [class]=\"emptyStateTextClass\">{{isLoading ? ((sectionTitle | HRTranslate) + ' ' + ('IsLoading' | HRTranslate)) : ('ThereIsNoAddressYet' | HRTranslate)}}</p>\r\n</div>\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: 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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: ProfilePersonalInfoAddressWidgetComponent, isStandalone: true, selector: "hr-profile-personal-info-address-widget", inputs: { baseUrl: "baseUrl", headerIconClass: "headerIconClass", headerTextClass: "headerTextClass", headerDividerClass: "headerDividerClass", rowClass: "rowClass", columnClass: "columnClass", responsiveTopSpacingColumnClass: "responsiveTopSpacingColumnClass", topSpacingBottomSpacingColumnClass: "topSpacingBottomSpacingColumnClass", labelClass: "labelClass", valueClass: "valueClass", emptyStateContainerClass: "emptyStateContainerClass", emptyStateTextClass: "emptyStateTextClass", addressIcon: "addressIcon", sectionTitle: "sectionTitle" }, outputs: { isLoadingChanged: "isLoadingChanged", errorOccurred: "errorOccurred" }, ngImport: i0, template: "<sky-section-divider [fontAwesomeIcon]=\"addressIcon\"\r\n                     [text]=\"( sectionTitle | HRTranslate | uppercase )\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n@if(personalInfoAddressDetails){\r\n<div [ngClass]=\"rowClass\">\r\n  <div [ngClass]=\"columnClass\">\r\n    <hr-info-field [labelKey]=\"'Address'\"\r\n                   [value]=\"personalInfoAddressDetails.Address\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n\r\n  <div [ngClass]=\"columnClass\">\r\n    <hr-info-field [labelKey]=\"'City'\"\r\n                   [value]=\"personalInfoAddressDetails.City\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n\r\n  <div [ngClass]=\"responsiveTopSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'P.OBox'\"\r\n                   [value]=\"personalInfoAddressDetails.POBox\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n\r\n  <div [ngClass]=\"topSpacingBottomSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'PostalCode'\"\r\n                   [value]=\"personalInfoAddressDetails.PostalCode\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n</div>\r\n}@else{\r\n<sky-empty-design-card [containerClass]=\"emptyStateContainerClass\"\r\n                       [cardBodyClass]=\"''\"\r\n                       [cardBodyContainerClass]=\"''\"\r\n                       [visibleIcon]=\"false\"\r\n                       [visibleQuickAction]=\"false\"\r\n                       [emptyTextClass]=\"emptyStateTextClass\"\r\n                       [emptyText]=\"isLoading ? ((sectionTitle | HRTranslate) + ' ' + ('IsLoading' | HRTranslate)) : ('ThereIsNoAddressYet' | HRTranslate)\">\r\n</sky-empty-design-card>\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$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"] }, { kind: "component", type: HRInfoFieldComponent, selector: "hr-info-field", inputs: ["labelKey", "value", "labelClass", "valueClass", "fallbackValue"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ProfilePersonalInfoAddressWidgetComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'hr-profile-personal-info-address-widget', standalone: true, imports: [CommonModule, HRTranslatePipe, SkySectionDividerComponent, HRInfoFieldComponent], template: "<sky-section-divider [fontAwesomeIcon]=\"addressIcon\"\r\n                     [text]=\"( sectionTitle | HRTranslate | uppercase )\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n@if(personalInfoAddressDetails){\r\n<div [ngClass]=\"rowClass\">\r\n  <div [ngClass]=\"columnClass\">\r\n    <hr-info-field [labelKey]=\"'Address'\"\r\n                   [value]=\"personalInfoAddressDetails.Address\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n\r\n  <div [ngClass]=\"columnClass\">\r\n    <hr-info-field [labelKey]=\"'City'\"\r\n                   [value]=\"personalInfoAddressDetails.City\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n\r\n  <div [ngClass]=\"responsiveTopSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'P.OBox'\"\r\n                   [value]=\"personalInfoAddressDetails.POBox\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n\r\n  <div [ngClass]=\"topSpacingBottomSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'PostalCode'\"\r\n                   [value]=\"personalInfoAddressDetails.PostalCode\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n</div>\r\n}@else{\r\n<div [class]=\"emptyStateContainerClass\">\r\n  <p [class]=\"emptyStateTextClass\">{{isLoading ? ((sectionTitle | HRTranslate) + ' ' + ('IsLoading' | HRTranslate)) : ('ThereIsNoAddressYet' | HRTranslate)}}</p>\r\n</div>\r\n}\r\n" }]
+            args: [{ selector: 'hr-profile-personal-info-address-widget', standalone: true, imports: [CommonModule, HRTranslatePipe, SkySectionDividerComponent, SkyEmptyDesignCardComponent, HRInfoFieldComponent], template: "<sky-section-divider [fontAwesomeIcon]=\"addressIcon\"\r\n                     [text]=\"( sectionTitle | HRTranslate | uppercase )\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n@if(personalInfoAddressDetails){\r\n<div [ngClass]=\"rowClass\">\r\n  <div [ngClass]=\"columnClass\">\r\n    <hr-info-field [labelKey]=\"'Address'\"\r\n                   [value]=\"personalInfoAddressDetails.Address\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n\r\n  <div [ngClass]=\"columnClass\">\r\n    <hr-info-field [labelKey]=\"'City'\"\r\n                   [value]=\"personalInfoAddressDetails.City\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n\r\n  <div [ngClass]=\"responsiveTopSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'P.OBox'\"\r\n                   [value]=\"personalInfoAddressDetails.POBox\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n\r\n  <div [ngClass]=\"topSpacingBottomSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'PostalCode'\"\r\n                   [value]=\"personalInfoAddressDetails.PostalCode\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n</div>\r\n}@else{\r\n<sky-empty-design-card [containerClass]=\"emptyStateContainerClass\"\r\n                       [cardBodyClass]=\"''\"\r\n                       [cardBodyContainerClass]=\"''\"\r\n                       [visibleIcon]=\"false\"\r\n                       [visibleQuickAction]=\"false\"\r\n                       [emptyTextClass]=\"emptyStateTextClass\"\r\n                       [emptyText]=\"isLoading ? ((sectionTitle | HRTranslate) + ' ' + ('IsLoading' | HRTranslate)) : ('ThereIsNoAddressYet' | HRTranslate)\">\r\n</sky-empty-design-card>\r\n}\r\n" }]
         }], ctorParameters: () => [{ type: HRSelfWidgetsService }], propDecorators: { baseUrl: [{
                 type: Input,
                 args: [{ required: true }]
@@ -2788,7 +2925,7 @@ class ProfileJobInfoMainWidgetComponent {
     emptyStateContainerClass = 'd-flex flex-column justify-content-center align-items-center my-5';
     emptyStateTextClass = 'field-secondary-label-md';
     mainIcon = faFileSignature;
-    sectionTitle = 'Main';
+    sectionTitle = 'JobInformation';
     isLoadingChanged = new EventEmitter();
     errorOccurred = new EventEmitter();
     constructor(hrSelfWidgetsService) {
@@ -2815,11 +2952,11 @@ class ProfileJobInfoMainWidgetComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ProfileJobInfoMainWidgetComponent, deps: [{ token: HRSelfWidgetsService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: ProfileJobInfoMainWidgetComponent, isStandalone: true, selector: "hr-profile-job-info-main-widget", inputs: { baseUrl: "baseUrl", headerIconClass: "headerIconClass", headerTextClass: "headerTextClass", headerDividerClass: "headerDividerClass", rowClass: "rowClass", columnClass: "columnClass", responsiveTopSpacingColumnClass: "responsiveTopSpacingColumnClass", topSpacingBottomMdSpacingColumnClass: "topSpacingBottomMdSpacingColumnClass", topSpacingBottomSpacingColumnClass: "topSpacingBottomSpacingColumnClass", labelClass: "labelClass", valueClass: "valueClass", emptyStateContainerClass: "emptyStateContainerClass", emptyStateTextClass: "emptyStateTextClass", mainIcon: "mainIcon", sectionTitle: "sectionTitle" }, outputs: { isLoadingChanged: "isLoadingChanged", errorOccurred: "errorOccurred" }, ngImport: i0, template: "<sky-section-divider [fontAwesomeIcon]=\"mainIcon\"\r\n                     [text]=\"(sectionTitle | HRTranslate | uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n@if(jobInformationMain){\r\n<div [ngClass]=\"rowClass\">\r\n  <div [ngClass]=\"columnClass\">\r\n    <hr-info-field [labelKey]=\"'AdminUnit'\"\r\n                   [value]=\"jobInformationMain.AdminUnitName\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"columnClass\">\r\n    <hr-info-field [labelKey]=\"'Position'\"\r\n                   [value]=\"jobInformationMain.PositionName\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"responsiveTopSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'Grade'\"\r\n                   [value]=\"jobInformationMain.GradeName\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n\r\n  <div [ngClass]=\"topSpacingBottomMdSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'JoiningDate'\"\r\n                   [value]=\"jobInformationMain.JoiningDate ? (jobInformationMain.JoiningDate | date: 'dd/MM/yyyy') : null\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"topSpacingBottomMdSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'CorporateJoiningDate'\"\r\n                   [value]=\"jobInformationMain.CorporateJoiningDate ? (jobInformationMain.CorporateJoiningDate | date: 'dd/MM/yyyy') : null\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"topSpacingBottomSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'Sponsor'\"\r\n                   [value]=\"jobInformationMain.SponsorName\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n</div>\r\n}@else{\r\n<div [class]=\"emptyStateContainerClass\">\r\n  <p [class]=\"emptyStateTextClass\">{{isLoading ? ((sectionTitle | HRTranslate) + ' ' + ('IsLoading' | HRTranslate)) : ('ThereIsNoJobMainYet' | HRTranslate)}}</p>\r\n</div>\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i2$1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i2$1.DatePipe, name: "date" }, { kind: "pipe", type: HRTranslatePipe, name: "HRTranslate" }, { kind: "component", type: SkySectionDividerComponent, selector: "sky-section-divider", inputs: ["text", "fontAwesomeIcon", "textClass", "dividerClass", "iconClass"] }, { kind: "component", type: HRInfoFieldComponent, selector: "hr-info-field", inputs: ["labelKey", "value", "labelClass", "valueClass", "fallbackValue"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: ProfileJobInfoMainWidgetComponent, isStandalone: true, selector: "hr-profile-job-info-main-widget", inputs: { baseUrl: "baseUrl", headerIconClass: "headerIconClass", headerTextClass: "headerTextClass", headerDividerClass: "headerDividerClass", rowClass: "rowClass", columnClass: "columnClass", responsiveTopSpacingColumnClass: "responsiveTopSpacingColumnClass", topSpacingBottomMdSpacingColumnClass: "topSpacingBottomMdSpacingColumnClass", topSpacingBottomSpacingColumnClass: "topSpacingBottomSpacingColumnClass", labelClass: "labelClass", valueClass: "valueClass", emptyStateContainerClass: "emptyStateContainerClass", emptyStateTextClass: "emptyStateTextClass", mainIcon: "mainIcon", sectionTitle: "sectionTitle" }, outputs: { isLoadingChanged: "isLoadingChanged", errorOccurred: "errorOccurred" }, ngImport: i0, template: "<sky-section-divider [fontAwesomeIcon]=\"mainIcon\"\r\n                     [text]=\"(sectionTitle | HRTranslate | uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n@if(jobInformationMain){\r\n<div [ngClass]=\"rowClass\">\r\n  <div [ngClass]=\"columnClass\">\r\n    <hr-info-field [labelKey]=\"'AdminUnit'\"\r\n                   [value]=\"jobInformationMain.AdminUnitName\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"columnClass\">\r\n    <hr-info-field [labelKey]=\"'Position'\"\r\n                   [value]=\"jobInformationMain.PositionName\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"responsiveTopSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'Grade'\"\r\n                   [value]=\"jobInformationMain.GradeName\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n\r\n  <div [ngClass]=\"topSpacingBottomMdSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'JoiningDate'\"\r\n                   [value]=\"jobInformationMain.JoiningDate ? (jobInformationMain.JoiningDate | date: 'dd/MM/yyyy') : null\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"topSpacingBottomMdSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'CorporateJoiningDate'\"\r\n                   [value]=\"jobInformationMain.CorporateJoiningDate ? (jobInformationMain.CorporateJoiningDate | date: 'dd/MM/yyyy') : null\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"topSpacingBottomSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'Sponsor'\"\r\n                   [value]=\"jobInformationMain.SponsorName\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n</div>\r\n}@else{\r\n<sky-empty-design-card [visibleIcon]=\"false\"\r\n                       [visibleQuickAction]=\"false\"\r\n                       [containerClass]=\"emptyStateContainerClass\"\r\n                       [cardBodyClass]=\"''\"\r\n                       [cardBodyContainerClass]=\"''\"\r\n                       [emptyTextClass]=\"emptyStateTextClass\"\r\n                       [emptyText]=\"isLoading ? ((sectionTitle | HRTranslate) + ' ' + ('IsLoading' | HRTranslate)) : ('ThereIsNoJobMainYet' | HRTranslate)\">\r\n</sky-empty-design-card>\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i2$1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i2$1.DatePipe, name: "date" }, { kind: "pipe", type: HRTranslatePipe, name: "HRTranslate" }, { kind: "component", type: SkySectionDividerComponent, selector: "sky-section-divider", inputs: ["text", "fontAwesomeIcon", "textClass", "dividerClass", "iconClass"] }, { kind: "component", type: 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: ProfileJobInfoMainWidgetComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'hr-profile-job-info-main-widget', standalone: true, imports: [CommonModule, HRTranslatePipe, SkySectionDividerComponent, HRInfoFieldComponent], template: "<sky-section-divider [fontAwesomeIcon]=\"mainIcon\"\r\n                     [text]=\"(sectionTitle | HRTranslate | uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n@if(jobInformationMain){\r\n<div [ngClass]=\"rowClass\">\r\n  <div [ngClass]=\"columnClass\">\r\n    <hr-info-field [labelKey]=\"'AdminUnit'\"\r\n                   [value]=\"jobInformationMain.AdminUnitName\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"columnClass\">\r\n    <hr-info-field [labelKey]=\"'Position'\"\r\n                   [value]=\"jobInformationMain.PositionName\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"responsiveTopSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'Grade'\"\r\n                   [value]=\"jobInformationMain.GradeName\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n\r\n  <div [ngClass]=\"topSpacingBottomMdSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'JoiningDate'\"\r\n                   [value]=\"jobInformationMain.JoiningDate ? (jobInformationMain.JoiningDate | date: 'dd/MM/yyyy') : null\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"topSpacingBottomMdSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'CorporateJoiningDate'\"\r\n                   [value]=\"jobInformationMain.CorporateJoiningDate ? (jobInformationMain.CorporateJoiningDate | date: 'dd/MM/yyyy') : null\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"topSpacingBottomSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'Sponsor'\"\r\n                   [value]=\"jobInformationMain.SponsorName\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n</div>\r\n}@else{\r\n<div [class]=\"emptyStateContainerClass\">\r\n  <p [class]=\"emptyStateTextClass\">{{isLoading ? ((sectionTitle | HRTranslate) + ' ' + ('IsLoading' | HRTranslate)) : ('ThereIsNoJobMainYet' | HRTranslate)}}</p>\r\n</div>\r\n}\r\n" }]
+            args: [{ selector: 'hr-profile-job-info-main-widget', standalone: true, imports: [CommonModule, HRTranslatePipe, SkySectionDividerComponent, SkyEmptyDesignCardComponent, HRInfoFieldComponent], template: "<sky-section-divider [fontAwesomeIcon]=\"mainIcon\"\r\n                     [text]=\"(sectionTitle | HRTranslate | uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n@if(jobInformationMain){\r\n<div [ngClass]=\"rowClass\">\r\n  <div [ngClass]=\"columnClass\">\r\n    <hr-info-field [labelKey]=\"'AdminUnit'\"\r\n                   [value]=\"jobInformationMain.AdminUnitName\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"columnClass\">\r\n    <hr-info-field [labelKey]=\"'Position'\"\r\n                   [value]=\"jobInformationMain.PositionName\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"responsiveTopSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'Grade'\"\r\n                   [value]=\"jobInformationMain.GradeName\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n\r\n  <div [ngClass]=\"topSpacingBottomMdSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'JoiningDate'\"\r\n                   [value]=\"jobInformationMain.JoiningDate ? (jobInformationMain.JoiningDate | date: 'dd/MM/yyyy') : null\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"topSpacingBottomMdSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'CorporateJoiningDate'\"\r\n                   [value]=\"jobInformationMain.CorporateJoiningDate ? (jobInformationMain.CorporateJoiningDate | date: 'dd/MM/yyyy') : null\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"topSpacingBottomSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'Sponsor'\"\r\n                   [value]=\"jobInformationMain.SponsorName\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n</div>\r\n}@else{\r\n<sky-empty-design-card [visibleIcon]=\"false\"\r\n                       [visibleQuickAction]=\"false\"\r\n                       [containerClass]=\"emptyStateContainerClass\"\r\n                       [cardBodyClass]=\"''\"\r\n                       [cardBodyContainerClass]=\"''\"\r\n                       [emptyTextClass]=\"emptyStateTextClass\"\r\n                       [emptyText]=\"isLoading ? ((sectionTitle | HRTranslate) + ' ' + ('IsLoading' | HRTranslate)) : ('ThereIsNoJobMainYet' | HRTranslate)\">\r\n</sky-empty-design-card>\r\n}\r\n" }]
         }], ctorParameters: () => [{ type: HRSelfWidgetsService }], propDecorators: { baseUrl: [{
                 type: Input,
                 args: [{ required: true }]
@@ -2902,11 +3039,11 @@ class ProfileJobInfoContractWidgetComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ProfileJobInfoContractWidgetComponent, deps: [{ token: HRSelfWidgetsService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: ProfileJobInfoContractWidgetComponent, isStandalone: true, selector: "hr-profile-job-info-contract-widget", inputs: { baseUrl: "baseUrl", headerIconClass: "headerIconClass", headerTextClass: "headerTextClass", headerDividerClass: "headerDividerClass", rowClass: "rowClass", columnClass: "columnClass", responsiveTopSpacingColumnClass: "responsiveTopSpacingColumnClass", topSpacingBottomMdSpacingColumnClass: "topSpacingBottomMdSpacingColumnClass", topSpacingBottomSpacingColumnClass: "topSpacingBottomSpacingColumnClass", labelClass: "labelClass", valueClass: "valueClass", emptyStateContainerClass: "emptyStateContainerClass", emptyStateTextClass: "emptyStateTextClass", contractIcon: "contractIcon", sectionTitle: "sectionTitle" }, outputs: { isLoadingChanged: "isLoadingChanged", errorOccurred: "errorOccurred" }, ngImport: i0, template: "<sky-section-divider [fontAwesomeIcon]=\"contractIcon\"\r\n                     [text]=\"(sectionTitle | HRTranslate | uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n@if(jobInformationContract){\r\n<div [ngClass]=\"rowClass\">\r\n  <div [ngClass]=\"columnClass\">\r\n    <hr-info-field [labelKey]=\"'ContractType'\"\r\n                   [value]=\"jobInformationContract.ContractTypeName\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"columnClass\">\r\n    <hr-info-field [labelKey]=\"'ContractStartDate'\"\r\n                   [value]=\"jobInformationContract.ContractStartDate ? (jobInformationContract.ContractStartDate | date: 'dd/MM/yyyy') : null\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"responsiveTopSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'ContractEndDate'\"\r\n                   [value]=\"jobInformationContract.ContractEndDate ? (jobInformationContract.ContractEndDate | date: 'dd/MM/yyyy') : null\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n\r\n  <div [ngClass]=\"topSpacingBottomMdSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'ContractMaritalStatus'\"\r\n                   [value]=\"jobInformationContract.ContractMaritalStateName\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"topSpacingBottomSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'ContractDependentsCount'\"\r\n                   [value]=\"jobInformationContract.ContractDependentsCount?.toString()\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n</div>\r\n}@else{\r\n<div [class]=\"emptyStateContainerClass\">\r\n  <p [class]=\"emptyStateTextClass\">{{isLoading ? ((sectionTitle | HRTranslate) + ' ' + ('IsLoading' | HRTranslate)) : ('ThereIsNoJobContractYet' | HRTranslate)}}</p>\r\n</div>\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i2$1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i2$1.DatePipe, name: "date" }, { kind: "pipe", type: HRTranslatePipe, name: "HRTranslate" }, { kind: "component", type: SkySectionDividerComponent, selector: "sky-section-divider", inputs: ["text", "fontAwesomeIcon", "textClass", "dividerClass", "iconClass"] }, { kind: "component", type: HRInfoFieldComponent, selector: "hr-info-field", inputs: ["labelKey", "value", "labelClass", "valueClass", "fallbackValue"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: ProfileJobInfoContractWidgetComponent, isStandalone: true, selector: "hr-profile-job-info-contract-widget", inputs: { baseUrl: "baseUrl", headerIconClass: "headerIconClass", headerTextClass: "headerTextClass", headerDividerClass: "headerDividerClass", rowClass: "rowClass", columnClass: "columnClass", responsiveTopSpacingColumnClass: "responsiveTopSpacingColumnClass", topSpacingBottomMdSpacingColumnClass: "topSpacingBottomMdSpacingColumnClass", topSpacingBottomSpacingColumnClass: "topSpacingBottomSpacingColumnClass", labelClass: "labelClass", valueClass: "valueClass", emptyStateContainerClass: "emptyStateContainerClass", emptyStateTextClass: "emptyStateTextClass", contractIcon: "contractIcon", sectionTitle: "sectionTitle" }, outputs: { isLoadingChanged: "isLoadingChanged", errorOccurred: "errorOccurred" }, ngImport: i0, template: "<sky-section-divider [fontAwesomeIcon]=\"contractIcon\"\r\n                     [text]=\"(sectionTitle | HRTranslate | uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n@if(jobInformationContract){\r\n<div [ngClass]=\"rowClass\">\r\n  <div [ngClass]=\"columnClass\">\r\n    <hr-info-field [labelKey]=\"'ContractType'\"\r\n                   [value]=\"jobInformationContract.ContractTypeName\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"columnClass\">\r\n    <hr-info-field [labelKey]=\"'ContractStartDate'\"\r\n                   [value]=\"jobInformationContract.ContractStartDate ? (jobInformationContract.ContractStartDate | date: 'dd/MM/yyyy') : null\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"responsiveTopSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'ContractEndDate'\"\r\n                   [value]=\"jobInformationContract.ContractEndDate ? (jobInformationContract.ContractEndDate | date: 'dd/MM/yyyy') : null\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n\r\n  <div [ngClass]=\"topSpacingBottomMdSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'ContractMaritalStatus'\"\r\n                   [value]=\"jobInformationContract.ContractMaritalStateName\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"topSpacingBottomSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'ContractDependentsCount'\"\r\n                   [value]=\"jobInformationContract.ContractDependentsCount?.toString()\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n</div>\r\n}@else{\r\n<sky-empty-design-card [visibleIcon]=\"false\"\r\n                       [visibleQuickAction]=\"false\"\r\n                       [containerClass]=\"emptyStateContainerClass\"\r\n                       [cardBodyClass]=\"''\"\r\n                       [cardBodyContainerClass]=\"''\"\r\n                       [emptyTextClass]=\"emptyStateTextClass\"\r\n                       [emptyText]=\"isLoading ? ((sectionTitle | HRTranslate) + ' ' + ('IsLoading' | HRTranslate)) : ('ThereIsNoJobContractYet' | HRTranslate)\">\r\n</sky-empty-design-card>\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i2$1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i2$1.DatePipe, name: "date" }, { kind: "pipe", type: HRTranslatePipe, name: "HRTranslate" }, { kind: "component", type: SkySectionDividerComponent, selector: "sky-section-divider", inputs: ["text", "fontAwesomeIcon", "textClass", "dividerClass", "iconClass"] }, { kind: "component", type: 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: ProfileJobInfoContractWidgetComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'hr-profile-job-info-contract-widget', standalone: true, imports: [CommonModule, HRTranslatePipe, SkySectionDividerComponent, HRInfoFieldComponent], template: "<sky-section-divider [fontAwesomeIcon]=\"contractIcon\"\r\n                     [text]=\"(sectionTitle | HRTranslate | uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n@if(jobInformationContract){\r\n<div [ngClass]=\"rowClass\">\r\n  <div [ngClass]=\"columnClass\">\r\n    <hr-info-field [labelKey]=\"'ContractType'\"\r\n                   [value]=\"jobInformationContract.ContractTypeName\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"columnClass\">\r\n    <hr-info-field [labelKey]=\"'ContractStartDate'\"\r\n                   [value]=\"jobInformationContract.ContractStartDate ? (jobInformationContract.ContractStartDate | date: 'dd/MM/yyyy') : null\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"responsiveTopSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'ContractEndDate'\"\r\n                   [value]=\"jobInformationContract.ContractEndDate ? (jobInformationContract.ContractEndDate | date: 'dd/MM/yyyy') : null\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n\r\n  <div [ngClass]=\"topSpacingBottomMdSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'ContractMaritalStatus'\"\r\n                   [value]=\"jobInformationContract.ContractMaritalStateName\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"topSpacingBottomSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'ContractDependentsCount'\"\r\n                   [value]=\"jobInformationContract.ContractDependentsCount?.toString()\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n</div>\r\n}@else{\r\n<div [class]=\"emptyStateContainerClass\">\r\n  <p [class]=\"emptyStateTextClass\">{{isLoading ? ((sectionTitle | HRTranslate) + ' ' + ('IsLoading' | HRTranslate)) : ('ThereIsNoJobContractYet' | HRTranslate)}}</p>\r\n</div>\r\n}\r\n" }]
+            args: [{ selector: 'hr-profile-job-info-contract-widget', standalone: true, imports: [CommonModule, HRTranslatePipe, SkySectionDividerComponent, SkyEmptyDesignCardComponent, HRInfoFieldComponent], template: "<sky-section-divider [fontAwesomeIcon]=\"contractIcon\"\r\n                     [text]=\"(sectionTitle | HRTranslate | uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n@if(jobInformationContract){\r\n<div [ngClass]=\"rowClass\">\r\n  <div [ngClass]=\"columnClass\">\r\n    <hr-info-field [labelKey]=\"'ContractType'\"\r\n                   [value]=\"jobInformationContract.ContractTypeName\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"columnClass\">\r\n    <hr-info-field [labelKey]=\"'ContractStartDate'\"\r\n                   [value]=\"jobInformationContract.ContractStartDate ? (jobInformationContract.ContractStartDate | date: 'dd/MM/yyyy') : null\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"responsiveTopSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'ContractEndDate'\"\r\n                   [value]=\"jobInformationContract.ContractEndDate ? (jobInformationContract.ContractEndDate | date: 'dd/MM/yyyy') : null\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n\r\n  <div [ngClass]=\"topSpacingBottomMdSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'ContractMaritalStatus'\"\r\n                   [value]=\"jobInformationContract.ContractMaritalStateName\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n  <div [ngClass]=\"topSpacingBottomSpacingColumnClass\">\r\n    <hr-info-field [labelKey]=\"'ContractDependentsCount'\"\r\n                   [value]=\"jobInformationContract.ContractDependentsCount?.toString()\"\r\n                   [labelClass]=\"labelClass\"\r\n                   [valueClass]=\"valueClass\">\r\n    </hr-info-field>\r\n  </div>\r\n</div>\r\n}@else{\r\n<sky-empty-design-card [visibleIcon]=\"false\"\r\n                       [visibleQuickAction]=\"false\"\r\n                       [containerClass]=\"emptyStateContainerClass\"\r\n                       [cardBodyClass]=\"''\"\r\n                       [cardBodyContainerClass]=\"''\"\r\n                       [emptyTextClass]=\"emptyStateTextClass\"\r\n                       [emptyText]=\"isLoading ? ((sectionTitle | HRTranslate) + ' ' + ('IsLoading' | HRTranslate)) : ('ThereIsNoJobContractYet' | HRTranslate)\">\r\n</sky-empty-design-card>\r\n}\r\n" }]
         }], ctorParameters: () => [{ type: HRSelfWidgetsService }], propDecorators: { baseUrl: [{
                 type: Input,
                 args: [{ required: true }]
@@ -3004,11 +3141,11 @@ class ProfileJobInfoSalaryWidgetComponent {
         return this.commonMethodsService.currencyDecimalFormat(value, this.currencyDecimals) || '—';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ProfileJobInfoSalaryWidgetComponent, deps: [{ token: HRSelfWidgetsService }, { token: HRCommonMethodsService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: ProfileJobInfoSalaryWidgetComponent, isStandalone: true, selector: "hr-profile-job-info-salary-widget", inputs: { baseUrl: "baseUrl", currencyCode: "currencyCode", currencyDecimals: "currencyDecimals", headerIconClass: "headerIconClass", headerTextClass: "headerTextClass", headerDividerClass: "headerDividerClass", rowClass: "rowClass", columnClass: "columnClass", grossSalaryColumnClass: "grossSalaryColumnClass", labelClass: "labelClass", valueClass: "valueClass", currencyClass: "currencyClass", emptyStateContainerClass: "emptyStateContainerClass", emptyStateTextClass: "emptyStateTextClass", salaryIcon: "salaryIcon", sectionTitle: "sectionTitle" }, outputs: { isLoadingChanged: "isLoadingChanged", errorOccurred: "errorOccurred" }, ngImport: i0, template: "<sky-section-divider [fontAwesomeIcon]=\"salaryIcon\"\r\n                     [text]=\"(sectionTitle | HRTranslate | uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n@if(jobInformationSalary){\r\n<div [ngClass]=\"rowClass\">\r\n  <div [ngClass]=\"columnClass\">\r\n    <div [ngClass]=\"labelClass\">{{'BasicSalary' | HRTranslate}}</div>\r\n    <div [ngClass]=\"valueClass\">{{formatAmount(basicSalary)}} <span [ngClass]=\"currencyClass\">{{currencyCode}}</span></div>\r\n  </div>\r\n\r\n  @for(allowance of allowances; track allowance){\r\n  <div [ngClass]=\"columnClass\">\r\n    <div [ngClass]=\"labelClass\">{{allowance.AllowanceName}}</div>\r\n    <div [ngClass]=\"valueClass\">{{formatAmount(allowance.AllowanceAmount)}} <span [ngClass]=\"currencyClass\">{{currencyCode}}</span></div>\r\n  </div>\r\n  }\r\n\r\n  <div [ngClass]=\"grossSalaryColumnClass\">\r\n    <div [ngClass]=\"labelClass\">{{'GrossSalary' | HRTranslate}}</div>\r\n    <div [ngClass]=\"valueClass\">{{formatAmount(jobInformationSalary.GrossSalary)}} <span [ngClass]=\"currencyClass\">{{currencyCode}}</span></div>\r\n  </div>\r\n</div>\r\n}@else{\r\n<div [class]=\"emptyStateContainerClass\">\r\n  <p [class]=\"emptyStateTextClass\">{{isLoading ? ((sectionTitle | HRTranslate) + ' ' + ('IsLoading' | HRTranslate)) : ('ThereIsNoJobSalaryYet' | HRTranslate)}}</p>\r\n</div>\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: 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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: ProfileJobInfoSalaryWidgetComponent, isStandalone: true, selector: "hr-profile-job-info-salary-widget", inputs: { baseUrl: "baseUrl", currencyCode: "currencyCode", currencyDecimals: "currencyDecimals", headerIconClass: "headerIconClass", headerTextClass: "headerTextClass", headerDividerClass: "headerDividerClass", rowClass: "rowClass", columnClass: "columnClass", grossSalaryColumnClass: "grossSalaryColumnClass", labelClass: "labelClass", valueClass: "valueClass", currencyClass: "currencyClass", emptyStateContainerClass: "emptyStateContainerClass", emptyStateTextClass: "emptyStateTextClass", salaryIcon: "salaryIcon", sectionTitle: "sectionTitle" }, outputs: { isLoadingChanged: "isLoadingChanged", errorOccurred: "errorOccurred" }, ngImport: i0, template: "@if(jobInformationSalary){\r\n<sky-section-divider [fontAwesomeIcon]=\"salaryIcon\"\r\n                     [text]=\"(sectionTitle | HRTranslate | uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n<div [ngClass]=\"rowClass\">\r\n  <div [ngClass]=\"columnClass\">\r\n    <div [ngClass]=\"labelClass\">{{'BasicSalary' | HRTranslate}}</div>\r\n    <div [ngClass]=\"valueClass\">{{formatAmount(basicSalary)}} <span [ngClass]=\"currencyClass\">{{currencyCode}}</span></div>\r\n  </div>\r\n\r\n  @for(allowance of allowances; track allowance){\r\n  <div [ngClass]=\"columnClass\">\r\n    <div [ngClass]=\"labelClass\">{{allowance.AllowanceName}}</div>\r\n    <div [ngClass]=\"valueClass\">{{formatAmount(allowance.AllowanceAmount)}} <span [ngClass]=\"currencyClass\">{{currencyCode}}</span></div>\r\n  </div>\r\n  }\r\n\r\n  <div [ngClass]=\"grossSalaryColumnClass\">\r\n    <div [ngClass]=\"labelClass\">{{'GrossSalary' | HRTranslate}}</div>\r\n    <div [ngClass]=\"valueClass\">{{formatAmount(jobInformationSalary.GrossSalary)}} <span [ngClass]=\"currencyClass\">{{currencyCode}}</span></div>\r\n  </div>\r\n</div>\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i2$1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: HRTranslatePipe, name: "HRTranslate" }, { kind: "component", type: SkySectionDividerComponent, selector: "sky-section-divider", inputs: ["text", "fontAwesomeIcon", "textClass", "dividerClass", "iconClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ProfileJobInfoSalaryWidgetComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'hr-profile-job-info-salary-widget', standalone: true, imports: [CommonModule, HRTranslatePipe, SkySectionDividerComponent], template: "<sky-section-divider [fontAwesomeIcon]=\"salaryIcon\"\r\n                     [text]=\"(sectionTitle | HRTranslate | uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n@if(jobInformationSalary){\r\n<div [ngClass]=\"rowClass\">\r\n  <div [ngClass]=\"columnClass\">\r\n    <div [ngClass]=\"labelClass\">{{'BasicSalary' | HRTranslate}}</div>\r\n    <div [ngClass]=\"valueClass\">{{formatAmount(basicSalary)}} <span [ngClass]=\"currencyClass\">{{currencyCode}}</span></div>\r\n  </div>\r\n\r\n  @for(allowance of allowances; track allowance){\r\n  <div [ngClass]=\"columnClass\">\r\n    <div [ngClass]=\"labelClass\">{{allowance.AllowanceName}}</div>\r\n    <div [ngClass]=\"valueClass\">{{formatAmount(allowance.AllowanceAmount)}} <span [ngClass]=\"currencyClass\">{{currencyCode}}</span></div>\r\n  </div>\r\n  }\r\n\r\n  <div [ngClass]=\"grossSalaryColumnClass\">\r\n    <div [ngClass]=\"labelClass\">{{'GrossSalary' | HRTranslate}}</div>\r\n    <div [ngClass]=\"valueClass\">{{formatAmount(jobInformationSalary.GrossSalary)}} <span [ngClass]=\"currencyClass\">{{currencyCode}}</span></div>\r\n  </div>\r\n</div>\r\n}@else{\r\n<div [class]=\"emptyStateContainerClass\">\r\n  <p [class]=\"emptyStateTextClass\">{{isLoading ? ((sectionTitle | HRTranslate) + ' ' + ('IsLoading' | HRTranslate)) : ('ThereIsNoJobSalaryYet' | HRTranslate)}}</p>\r\n</div>\r\n}\r\n" }]
+            args: [{ selector: 'hr-profile-job-info-salary-widget', standalone: true, imports: [CommonModule, HRTranslatePipe, SkySectionDividerComponent], template: "@if(jobInformationSalary){\r\n<sky-section-divider [fontAwesomeIcon]=\"salaryIcon\"\r\n                     [text]=\"(sectionTitle | HRTranslate | uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n<div [ngClass]=\"rowClass\">\r\n  <div [ngClass]=\"columnClass\">\r\n    <div [ngClass]=\"labelClass\">{{'BasicSalary' | HRTranslate}}</div>\r\n    <div [ngClass]=\"valueClass\">{{formatAmount(basicSalary)}} <span [ngClass]=\"currencyClass\">{{currencyCode}}</span></div>\r\n  </div>\r\n\r\n  @for(allowance of allowances; track allowance){\r\n  <div [ngClass]=\"columnClass\">\r\n    <div [ngClass]=\"labelClass\">{{allowance.AllowanceName}}</div>\r\n    <div [ngClass]=\"valueClass\">{{formatAmount(allowance.AllowanceAmount)}} <span [ngClass]=\"currencyClass\">{{currencyCode}}</span></div>\r\n  </div>\r\n  }\r\n\r\n  <div [ngClass]=\"grossSalaryColumnClass\">\r\n    <div [ngClass]=\"labelClass\">{{'GrossSalary' | HRTranslate}}</div>\r\n    <div [ngClass]=\"valueClass\">{{formatAmount(jobInformationSalary.GrossSalary)}} <span [ngClass]=\"currencyClass\">{{currencyCode}}</span></div>\r\n  </div>\r\n</div>\r\n}\r\n" }]
         }], ctorParameters: () => [{ type: HRSelfWidgetsService }, { type: HRCommonMethodsService }], propDecorators: { baseUrl: [{
                 type: Input,
                 args: [{ required: true }]
@@ -3119,11 +3256,11 @@ class ProfileJobInfoServiceChargeWidgetComponent {
         return this.commonMethodsService.currencyDecimalFormat(data.ServiceChargeValue, 2) || '—';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ProfileJobInfoServiceChargeWidgetComponent, deps: [{ token: HRSelfWidgetsService }, { token: HRCommonMethodsService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: ProfileJobInfoServiceChargeWidgetComponent, isStandalone: true, selector: "hr-profile-job-info-service-charge-widget", inputs: { baseUrl: "baseUrl", currencyCode: "currencyCode", headerIconClass: "headerIconClass", headerTextClass: "headerTextClass", headerDividerClass: "headerDividerClass", rowClass: "rowClass", columnClass: "columnClass", labelClass: "labelClass", valueClass: "valueClass", emptyStateContainerClass: "emptyStateContainerClass", emptyStateTextClass: "emptyStateTextClass", serviceChargeIcon: "serviceChargeIcon", sectionTitle: "sectionTitle" }, outputs: { isLoadingChanged: "isLoadingChanged", errorOccurred: "errorOccurred" }, ngImport: i0, template: "<sky-section-divider [fontAwesomeIcon]=\"serviceChargeIcon\"\r\n                     [text]=\"(sectionTitle | HRTranslate | uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n@if(jobInformationServiceCharge){\r\n<div [ngClass]=\"rowClass\">\r\n  <div [ngClass]=\"columnClass\">\r\n    <div [ngClass]=\"labelClass\">{{modeLabelKey | HRTranslate}}</div>\r\n    <div [ngClass]=\"valueClass\">{{value}}</div>\r\n  </div>\r\n</div>\r\n}@else{\r\n<div [class]=\"emptyStateContainerClass\">\r\n  <p [class]=\"emptyStateTextClass\">{{isLoading ? ((sectionTitle | HRTranslate) + ' ' + ('IsLoading' | HRTranslate)) : ('ThereIsNoJobServiceChargeYet' | HRTranslate)}}</p>\r\n</div>\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: 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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: ProfileJobInfoServiceChargeWidgetComponent, isStandalone: true, selector: "hr-profile-job-info-service-charge-widget", inputs: { baseUrl: "baseUrl", currencyCode: "currencyCode", headerIconClass: "headerIconClass", headerTextClass: "headerTextClass", headerDividerClass: "headerDividerClass", rowClass: "rowClass", columnClass: "columnClass", labelClass: "labelClass", valueClass: "valueClass", emptyStateContainerClass: "emptyStateContainerClass", emptyStateTextClass: "emptyStateTextClass", serviceChargeIcon: "serviceChargeIcon", sectionTitle: "sectionTitle" }, outputs: { isLoadingChanged: "isLoadingChanged", errorOccurred: "errorOccurred" }, ngImport: i0, template: "@if(jobInformationServiceCharge){\r\n<sky-section-divider [fontAwesomeIcon]=\"serviceChargeIcon\"\r\n                     [text]=\"(sectionTitle | HRTranslate | uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n<div [ngClass]=\"rowClass\">\r\n  <div [ngClass]=\"columnClass\">\r\n    <div [ngClass]=\"labelClass\">{{modeLabelKey | HRTranslate}}</div>\r\n    <div [ngClass]=\"valueClass\">{{value}}</div>\r\n  </div>\r\n</div>\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i2$1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: HRTranslatePipe, name: "HRTranslate" }, { kind: "component", type: SkySectionDividerComponent, selector: "sky-section-divider", inputs: ["text", "fontAwesomeIcon", "textClass", "dividerClass", "iconClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ProfileJobInfoServiceChargeWidgetComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'hr-profile-job-info-service-charge-widget', standalone: true, imports: [CommonModule, HRTranslatePipe, SkySectionDividerComponent], template: "<sky-section-divider [fontAwesomeIcon]=\"serviceChargeIcon\"\r\n                     [text]=\"(sectionTitle | HRTranslate | uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n@if(jobInformationServiceCharge){\r\n<div [ngClass]=\"rowClass\">\r\n  <div [ngClass]=\"columnClass\">\r\n    <div [ngClass]=\"labelClass\">{{modeLabelKey | HRTranslate}}</div>\r\n    <div [ngClass]=\"valueClass\">{{value}}</div>\r\n  </div>\r\n</div>\r\n}@else{\r\n<div [class]=\"emptyStateContainerClass\">\r\n  <p [class]=\"emptyStateTextClass\">{{isLoading ? ((sectionTitle | HRTranslate) + ' ' + ('IsLoading' | HRTranslate)) : ('ThereIsNoJobServiceChargeYet' | HRTranslate)}}</p>\r\n</div>\r\n}\r\n" }]
+            args: [{ selector: 'hr-profile-job-info-service-charge-widget', standalone: true, imports: [CommonModule, HRTranslatePipe, SkySectionDividerComponent], template: "@if(jobInformationServiceCharge){\r\n<sky-section-divider [fontAwesomeIcon]=\"serviceChargeIcon\"\r\n                     [text]=\"(sectionTitle | HRTranslate | uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n<div [ngClass]=\"rowClass\">\r\n  <div [ngClass]=\"columnClass\">\r\n    <div [ngClass]=\"labelClass\">{{modeLabelKey | HRTranslate}}</div>\r\n    <div [ngClass]=\"valueClass\">{{value}}</div>\r\n  </div>\r\n</div>\r\n}\r\n" }]
         }], ctorParameters: () => [{ type: HRSelfWidgetsService }, { type: HRCommonMethodsService }], propDecorators: { baseUrl: [{
                 type: Input,
                 args: [{ required: true }]