@skysoftware-co/bayan-hr-widgets-ui 1.0.20 → 1.0.22

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

@@ -11,9 +11,9 @@ import { SkyShortcutIconComponent, SkySectionDividerComponent, SkyEmptyDesignCar
 import * as i1 from '@angular/common/http';
 import { HttpParams } from '@angular/common/http';
 import { map, shareReplay, catchError, throwError, lastValueFrom } from 'rxjs';
-import { faCakeCandles, faTreePalm, faCalendarStar, faMemoCircleInfo, faPhone, faBolt, faLanguage, faEarthAfrica, faHouse, faXmark } from '@fortawesome/pro-light-svg-icons';
+import { faCakeCandles, faTreePalm, faCalendarStar, faMoneyCheckDollarPen, faMemoCircleInfo, faPhone, faBolt, faLanguage, faEarthAfrica, faHouse, faFileSignature, faSackDollar, faEnvelopeOpenDollar, faXmark, faFolderArrowDown, faUsersRays, faFileCertificate } from '@fortawesome/pro-light-svg-icons';
 import * as i2 from 'devextreme-angular/core';
-import { faCircle, faCalendarDays } from '@fortawesome/pro-regular-svg-icons';
+import { faCircle, faCalendarDays, faEye } from '@fortawesome/pro-regular-svg-icons';
 import moment from 'moment';
 import { faPlaneDeparture, faPlaneArrival } from '@fortawesome/pro-solid-svg-icons';
 import CustomStore from 'devextreme/data/custom_store';
@@ -177,6 +177,17 @@ var StartDate$2 = "Start date";
 var EndDate$2 = "End date";
 var ReturnDate$2 = "Return date";
 var JobInformation$2 = "Job information";
+var Degrees$2 = "Degrees";
+var degrees$2 = "Degrees";
+var experiences$2 = "Experiences";
+var Country$2 = "Country";
+var Specialty$2 = "Specialty";
+var Institute$2 = "Institute";
+var Period$2 = "Period";
+var Employer$2 = "Employer";
+var TerminationReason$2 = "Termination reason";
+var ThereIsNoDegreesYet$2 = "There are no degrees yet";
+var ThereIsNoExperiencesYet$2 = "There are no experiences yet";
 var en = {
 	ReportingTo: ReportingTo$2,
 	NotAnknown: NotAnknown$2,
@@ -286,7 +297,19 @@ var en = {
 	EndDate: EndDate$2,
 	ReturnDate: ReturnDate$2,
 	"Search...": "Search...",
-	JobInformation: JobInformation$2
+	JobInformation: JobInformation$2,
+	Degrees: Degrees$2,
+	degrees: degrees$2,
+	experiences: experiences$2,
+	"Degree/Year": "Degree/Year",
+	Country: Country$2,
+	Specialty: Specialty$2,
+	Institute: Institute$2,
+	Period: Period$2,
+	Employer: Employer$2,
+	TerminationReason: TerminationReason$2,
+	ThereIsNoDegreesYet: ThereIsNoDegreesYet$2,
+	ThereIsNoExperiencesYet: ThereIsNoExperiencesYet$2
 };
 
 var ReportingTo$1 = "مفوض الى";
@@ -395,6 +418,17 @@ var StartDate$1 = "تاريخ البداية";
 var EndDate$1 = "تاريخ النهاية";
 var ReturnDate$1 = "تاريخ العودة";
 var JobInformation$1 = "معلومات الوظيفة";
+var Degrees$1 = "المؤهلات العلمية";
+var degrees$1 = "المؤهلات العلمية";
+var experiences$1 = "الخبرات";
+var Country$1 = "الدولة";
+var Specialty$1 = "التخصص";
+var Institute$1 = "المعهد";
+var Period$1 = "الفترة";
+var Employer$1 = "جهة العمل";
+var TerminationReason$1 = "سبب إنهاء الخدمة";
+var ThereIsNoDegreesYet$1 = "لا توجد مؤهلات علمية بعد";
+var ThereIsNoExperiencesYet$1 = "لا توجد خبرات بعد";
 var ar = {
 	ReportingTo: ReportingTo$1,
 	NotAnknown: NotAnknown$1,
@@ -503,7 +537,19 @@ var ar = {
 	EndDate: EndDate$1,
 	ReturnDate: ReturnDate$1,
 	"Search...": "بحث...",
-	JobInformation: JobInformation$1
+	JobInformation: JobInformation$1,
+	Degrees: Degrees$1,
+	degrees: degrees$1,
+	experiences: experiences$1,
+	"Degree/Year": "الدرجة / السنة",
+	Country: Country$1,
+	Specialty: Specialty$1,
+	Institute: Institute$1,
+	Period: Period$1,
+	Employer: Employer$1,
+	TerminationReason: TerminationReason$1,
+	ThereIsNoDegreesYet: ThereIsNoDegreesYet$1,
+	ThereIsNoExperiencesYet: ThereIsNoExperiencesYet$1
 };
 
 var ReportingTo = "Rapport à";
@@ -613,6 +659,17 @@ var StartDate = "Date de début";
 var EndDate = "Date de fin";
 var ReturnDate = "Date de retour";
 var JobInformation = "Informations sur l'emploi";
+var Degrees = "Diplomes";
+var degrees = "Diplomes";
+var experiences = "Experiences";
+var Country = "Pays";
+var Specialty = "Specialite";
+var Institute = "Institut";
+var Period = "Periode";
+var Employer = "Employeur";
+var TerminationReason = "Motif de fin de service";
+var ThereIsNoDegreesYet = "Il n'y a pas encore de diplomes";
+var ThereIsNoExperiencesYet = "Il n'y a pas encore d'experiences";
 var fr = {
 	ReportingTo: ReportingTo,
 	NotAnknown: NotAnknown,
@@ -722,7 +779,19 @@ var fr = {
 	EndDate: EndDate,
 	ReturnDate: ReturnDate,
 	"Search...": "Rechercher...",
-	JobInformation: JobInformation
+	JobInformation: JobInformation,
+	Degrees: Degrees,
+	degrees: degrees,
+	experiences: experiences,
+	"Degree/Year": "Diplome/Annee",
+	Country: Country,
+	Specialty: Specialty,
+	Institute: Institute,
+	Period: Period,
+	Employer: Employer,
+	TerminationReason: TerminationReason,
+	ThereIsNoDegreesYet: ThereIsNoDegreesYet,
+	ThereIsNoExperiencesYet: ThereIsNoExperiencesYet
 };
 
 const BUILT_IN_LEXICONS = { en, ar, fr };
@@ -2454,11 +2523,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|| 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" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: HRInfoFieldComponent, isStandalone: true, selector: "hr-info-field", inputs: { labelKey: "labelKey", value: "value", labelClass: "labelClass", valueClass: "valueClass", fallbackValue: "fallbackValue" }, ngImport: i0, template: "<div [ngClass]=\"labelClass\">{{labelKey | HRTranslate}}</div>\r\n<div [ngClass]=\"valueClass\">{{value || fallbackValue}}</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: HRTranslatePipe, name: "HRTranslate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: HRInfoFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'hr-info-field', standalone: true, imports: [CommonModule, HRTranslatePipe], template: "<div [ngClass]=\"labelClass\">{{labelKey | HRTranslate}}</div>\r\n<div [ngClass]=\"valueClass\" [title]=\"value|| fallbackValue\">{{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\">{{value || fallbackValue}}</div>\r\n" }]
         }], propDecorators: { labelKey: [{
                 type: Input,
                 args: [{ required: true }]
@@ -2472,6 +2541,130 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                 type: Input
             }] } });
 
+class ProfileBankInfoWidgetComponent {
+    commonMethodsService;
+    hrSelfWidgetsService;
+    isLoading = true;
+    constructor(commonMethodsService, hrSelfWidgetsService) {
+        this.commonMethodsService = commonMethodsService;
+        this.hrSelfWidgetsService = hrSelfWidgetsService;
+    }
+    ngOnInit() {
+        this.isLoadingChanged.emit(true);
+        this.hrSelfWidgetsService.getBankInformation(this.baseUrl).subscribe({
+            next: (response) => {
+                this.isLoading = false;
+                this.employeeBankInformation = response ?? [];
+                this.isLoadingChanged.emit(false);
+            },
+            error: (error) => {
+                this.isLoading = false;
+                this.employeeBankInformation = [];
+                this.isLoadingChanged.emit(false);
+                this.errorOccurred.emit(error.error.ResponseData.Errors[0].Message);
+            }
+        });
+    }
+    employeeBankInformation = [];
+    currencyCode = '';
+    currencyDecimals = 2;
+    headerIconClass = 'primary-icon-xl';
+    headerTextClass = 'mt-2 field-secondary-label-lg';
+    headerDividerClass = 'flex-grow-1 ms-2';
+    cardClass = 'mt-4 card-shadow position-relative';
+    mainBadgeClass = 'position-absolute text-center top-0 mt-3 start-0 bg-primary status-badge';
+    mainBadgeTextClass = 'mx-1 fs-12 text-white';
+    triangleClass = 'position-absolute start-0 top-0';
+    rowClass = 'row px-4 pb-3';
+    rowMainPtClass = 'pt-5';
+    rowNormalPtClass = 'pt-3';
+    columnClass = 'col-md-4 col-6';
+    responsiveTopSpacingColClass = 'col-md-4 col-6 mt-md-0 mt-4';
+    topSpacingColClass = 'col-md-4 col-6 mt-4';
+    labelClass = 'field-secondary-label-sm';
+    valueClass = 'table-cell-md text-ellipsis-one-line';
+    emptyStateContainerClass = 'd-flex flex-column justify-content-center align-items-center my-5';
+    emptyStateTextClass = 'field-secondary-label-md';
+    bankInformationIcon = faMoneyCheckDollarPen;
+    sectionHeaderVisibility = true;
+    sectionTitle = 'BankInformation';
+    language = 'en';
+    baseUrl = '';
+    errorOccurred = new EventEmitter();
+    isRTL = this.language === 'ar';
+    isLoadingChanged = new EventEmitter();
+    ngOnChanges(changes) {
+        if (changes['language']) {
+            this.isRTL = this.language === 'ar';
+        }
+    }
+    formatAmount(value) {
+        if (value == null) {
+            return '-';
+        }
+        return this.commonMethodsService.currencyDecimalFormat(value, this.currencyDecimals) || '-';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: 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<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, 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: [{
+                type: Input
+            }], headerIconClass: [{
+                type: Input
+            }], headerTextClass: [{
+                type: Input
+            }], headerDividerClass: [{
+                type: Input
+            }], cardClass: [{
+                type: Input
+            }], mainBadgeClass: [{
+                type: Input
+            }], mainBadgeTextClass: [{
+                type: Input
+            }], triangleClass: [{
+                type: Input
+            }], rowClass: [{
+                type: Input
+            }], rowMainPtClass: [{
+                type: Input
+            }], rowNormalPtClass: [{
+                type: Input
+            }], columnClass: [{
+                type: Input
+            }], responsiveTopSpacingColClass: [{
+                type: Input
+            }], topSpacingColClass: [{
+                type: Input
+            }], labelClass: [{
+                type: Input
+            }], valueClass: [{
+                type: Input
+            }], emptyStateContainerClass: [{
+                type: Input
+            }], emptyStateTextClass: [{
+                type: Input
+            }], bankInformationIcon: [{
+                type: Input
+            }], sectionHeaderVisibility: [{
+                type: Input
+            }], sectionTitle: [{
+                type: Input
+            }], language: [{
+                type: Input
+            }], baseUrl: [{
+                type: Input,
+                args: [{ required: true }]
+            }], errorOccurred: [{
+                type: Output
+            }], isLoadingChanged: [{
+                type: Output
+            }] } });
+
 class ProfilePersonalInfoMainWidgetComponent {
     hrSelfWidgetsService;
     employeePersonalInformation = null;
@@ -2912,6 +3105,393 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                 type: Output
             }] } });
 
+class ProfileJobInfoMainWidgetComponent {
+    hrSelfWidgetsService;
+    jobInformationMain = null;
+    isLoading = true;
+    baseUrl = '';
+    headerIconClass = 'primary-icon-xl';
+    headerTextClass = 'mt-2 field-secondary-label-lg';
+    headerDividerClass = 'flex-grow-1 ms-2';
+    rowClass = 'row mt-4';
+    columnClass = 'col-md-4 col-6';
+    responsiveTopSpacingColumnClass = 'col-md-4 col-6 mt-md-0 mt-4';
+    topSpacingBottomMdSpacingColumnClass = 'col-md-4 col-6 mt-4 mb-md-5';
+    topSpacingBottomSpacingColumnClass = 'col-md-4 col-6 mt-4 mb-5';
+    labelClass = 'field-secondary-label-sm';
+    valueClass = 'fs-14 fw-medium text-ellipsis-one-line';
+    emptyStateContainerClass = 'd-flex flex-column justify-content-center align-items-center my-5';
+    emptyStateTextClass = 'field-secondary-label-md';
+    mainIcon = faFileSignature;
+    sectionTitle = 'JobInformation';
+    isLoadingChanged = new EventEmitter();
+    errorOccurred = new EventEmitter();
+    constructor(hrSelfWidgetsService) {
+        this.hrSelfWidgetsService = hrSelfWidgetsService;
+    }
+    ngOnInit() {
+        if (!this.baseUrl) {
+            this.isLoading = false;
+            return;
+        }
+        this.isLoadingChanged.emit(true);
+        this.hrSelfWidgetsService.getJobInformationMain(this.baseUrl).subscribe({
+            next: (response) => {
+                this.isLoading = false;
+                this.jobInformationMain = response;
+                this.isLoadingChanged.emit(false);
+            },
+            error: (error) => {
+                this.isLoading = false;
+                this.jobInformationMain = null;
+                this.isLoadingChanged.emit(false);
+                this.errorOccurred.emit(error.error.ResponseData.Errors[0].Message);
+            }
+        });
+    }
+    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<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, 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 }]
+            }], headerIconClass: [{
+                type: Input
+            }], headerTextClass: [{
+                type: Input
+            }], headerDividerClass: [{
+                type: Input
+            }], rowClass: [{
+                type: Input
+            }], columnClass: [{
+                type: Input
+            }], responsiveTopSpacingColumnClass: [{
+                type: Input
+            }], topSpacingBottomMdSpacingColumnClass: [{
+                type: Input
+            }], topSpacingBottomSpacingColumnClass: [{
+                type: Input
+            }], labelClass: [{
+                type: Input
+            }], valueClass: [{
+                type: Input
+            }], emptyStateContainerClass: [{
+                type: Input
+            }], emptyStateTextClass: [{
+                type: Input
+            }], mainIcon: [{
+                type: Input
+            }], sectionTitle: [{
+                type: Input
+            }], isLoadingChanged: [{
+                type: Output
+            }], errorOccurred: [{
+                type: Output
+            }] } });
+
+class ProfileJobInfoContractWidgetComponent {
+    hrSelfWidgetsService;
+    jobInformationContract = null;
+    isLoading = true;
+    baseUrl = '';
+    headerIconClass = 'primary-icon-xl';
+    headerTextClass = 'mt-2 field-secondary-label-lg';
+    headerDividerClass = 'flex-grow-1 ms-2';
+    rowClass = 'row mt-4';
+    columnClass = 'col-md-4 col-6';
+    responsiveTopSpacingColumnClass = 'col-md-4 col-6 mt-md-0 mt-4';
+    topSpacingBottomMdSpacingColumnClass = 'col-md-4 col-6 mt-4 mb-md-5';
+    topSpacingBottomSpacingColumnClass = 'col-md-4 col-6 mt-4 mb-5';
+    labelClass = 'field-secondary-label-sm';
+    valueClass = 'fs-14 fw-medium text-ellipsis-one-line';
+    emptyStateContainerClass = 'd-flex flex-column justify-content-center align-items-center my-5';
+    emptyStateTextClass = 'field-secondary-label-md';
+    contractIcon = faFileSignature;
+    sectionTitle = 'Contract';
+    isLoadingChanged = new EventEmitter();
+    errorOccurred = new EventEmitter();
+    constructor(hrSelfWidgetsService) {
+        this.hrSelfWidgetsService = hrSelfWidgetsService;
+    }
+    ngOnInit() {
+        if (!this.baseUrl) {
+            this.isLoading = false;
+            return;
+        }
+        this.isLoadingChanged.emit(true);
+        this.hrSelfWidgetsService.getJobInformationContract(this.baseUrl).subscribe({
+            next: (response) => {
+                this.isLoading = false;
+                this.jobInformationContract = response;
+                this.isLoadingChanged.emit(false);
+            },
+            error: (error) => {
+                this.isLoading = false;
+                this.jobInformationContract = null;
+                this.isLoadingChanged.emit(false);
+                this.errorOccurred.emit(error.error.ResponseData.Errors[0].Message);
+            }
+        });
+    }
+    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<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, 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 }]
+            }], headerIconClass: [{
+                type: Input
+            }], headerTextClass: [{
+                type: Input
+            }], headerDividerClass: [{
+                type: Input
+            }], rowClass: [{
+                type: Input
+            }], columnClass: [{
+                type: Input
+            }], responsiveTopSpacingColumnClass: [{
+                type: Input
+            }], topSpacingBottomMdSpacingColumnClass: [{
+                type: Input
+            }], topSpacingBottomSpacingColumnClass: [{
+                type: Input
+            }], labelClass: [{
+                type: Input
+            }], valueClass: [{
+                type: Input
+            }], emptyStateContainerClass: [{
+                type: Input
+            }], emptyStateTextClass: [{
+                type: Input
+            }], contractIcon: [{
+                type: Input
+            }], sectionTitle: [{
+                type: Input
+            }], isLoadingChanged: [{
+                type: Output
+            }], errorOccurred: [{
+                type: Output
+            }] } });
+
+class ProfileJobInfoSalaryWidgetComponent {
+    hrSelfWidgetsService;
+    commonMethodsService;
+    jobInformationSalary = null;
+    isLoading = true;
+    baseUrl = '';
+    currencyCode = '';
+    currencyDecimals = 2;
+    headerIconClass = 'primary-icon-xl';
+    headerTextClass = 'mt-2 field-secondary-label-lg';
+    headerDividerClass = 'flex-grow-1 ms-2';
+    rowClass = 'row mt-4';
+    columnClass = 'col-md-4 col-6 mt-4';
+    grossSalaryColumnClass = 'col-md-4 col-6 my-4';
+    labelClass = 'field-secondary-label-sm';
+    valueClass = 'fs-14 fw-medium text-ellipsis-one-line';
+    currencyClass = 'fs-10 text-secondary fw-light';
+    emptyStateContainerClass = 'd-flex flex-column justify-content-center align-items-center my-5';
+    emptyStateTextClass = 'field-secondary-label-md';
+    salaryIcon = faSackDollar;
+    sectionTitle = 'Salary';
+    isLoadingChanged = new EventEmitter();
+    errorOccurred = new EventEmitter();
+    constructor(hrSelfWidgetsService, commonMethodsService) {
+        this.hrSelfWidgetsService = hrSelfWidgetsService;
+        this.commonMethodsService = commonMethodsService;
+    }
+    ngOnInit() {
+        if (!this.baseUrl) {
+            this.isLoading = false;
+            return;
+        }
+        this.isLoadingChanged.emit(true);
+        this.hrSelfWidgetsService.getJobInformationSalary(this.baseUrl).subscribe({
+            next: (response) => {
+                this.isLoading = false;
+                this.jobInformationSalary = response;
+                this.isLoadingChanged.emit(false);
+            },
+            error: (error) => {
+                this.isLoading = false;
+                this.jobInformationSalary = null;
+                this.isLoadingChanged.emit(false);
+                this.errorOccurred.emit(error.error.ResponseData.Errors[0].Message);
+            }
+        });
+    }
+    get basicSalary() {
+        return this.jobInformationSalary?.BasicSalary ?? this.jobInformationSalary?.CurrentBasicSalary ?? null;
+    }
+    get allowances() {
+        return this.jobInformationSalary?.Allowances ?? [];
+    }
+    formatAmount(value) {
+        if (value == null) {
+            return '—';
+        }
+        return this.commonMethodsService.currencyDecimalFormat(value, this.currencyDecimals) || '—';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: 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: "@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: "@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 }]
+            }], currencyCode: [{
+                type: Input
+            }], currencyDecimals: [{
+                type: Input
+            }], headerIconClass: [{
+                type: Input
+            }], headerTextClass: [{
+                type: Input
+            }], headerDividerClass: [{
+                type: Input
+            }], rowClass: [{
+                type: Input
+            }], columnClass: [{
+                type: Input
+            }], grossSalaryColumnClass: [{
+                type: Input
+            }], labelClass: [{
+                type: Input
+            }], valueClass: [{
+                type: Input
+            }], currencyClass: [{
+                type: Input
+            }], emptyStateContainerClass: [{
+                type: Input
+            }], emptyStateTextClass: [{
+                type: Input
+            }], salaryIcon: [{
+                type: Input
+            }], sectionTitle: [{
+                type: Input
+            }], isLoadingChanged: [{
+                type: Output
+            }], errorOccurred: [{
+                type: Output
+            }] } });
+
+class ProfileJobInfoServiceChargeWidgetComponent {
+    hrSelfWidgetsService;
+    commonMethodsService;
+    jobInformationServiceCharge = null;
+    isLoading = true;
+    baseUrl = '';
+    currencyCode = '';
+    headerIconClass = 'primary-icon-xl';
+    headerTextClass = 'mt-2 field-secondary-label-lg';
+    headerDividerClass = 'flex-grow-1 ms-2';
+    rowClass = 'row mt-4 mb-5';
+    columnClass = 'col-md-4 col-6';
+    labelClass = 'field-secondary-label-sm';
+    valueClass = 'fs-14 fw-medium text-ellipsis-one-line';
+    emptyStateContainerClass = 'd-flex flex-column justify-content-center align-items-center my-5';
+    emptyStateTextClass = 'field-secondary-label-md';
+    serviceChargeIcon = faEnvelopeOpenDollar;
+    sectionTitle = 'ServiceCharge';
+    isLoadingChanged = new EventEmitter();
+    errorOccurred = new EventEmitter();
+    constructor(hrSelfWidgetsService, commonMethodsService) {
+        this.hrSelfWidgetsService = hrSelfWidgetsService;
+        this.commonMethodsService = commonMethodsService;
+    }
+    ngOnInit() {
+        if (!this.baseUrl) {
+            this.isLoading = false;
+            return;
+        }
+        this.isLoadingChanged.emit(true);
+        this.hrSelfWidgetsService.getJobInformationServiceCharge(this.baseUrl).subscribe({
+            next: (response) => {
+                this.isLoading = false;
+                this.jobInformationServiceCharge = response;
+                this.isLoadingChanged.emit(false);
+            },
+            error: (error) => {
+                this.isLoading = false;
+                this.jobInformationServiceCharge = null;
+                this.isLoadingChanged.emit(false);
+                this.errorOccurred.emit(error.error.ResponseData.Errors[0].Message);
+            }
+        });
+    }
+    get modeLabelKey() {
+        const mode = this.jobInformationServiceCharge?.ServiceChargeEntitlementMode;
+        switch (ServiceChargeEntitlementMode[mode]) {
+            case ServiceChargeEntitlementMode.Points:
+                return 'Points';
+            case ServiceChargeEntitlementMode.SalaryRatio:
+                return 'SalaryRatio';
+            case ServiceChargeEntitlementMode.FixedAmount:
+                return 'FixedAmount';
+            case ServiceChargeEntitlementMode.FixedRate:
+                return 'FixedRate';
+            default:
+                return 'ServiceCharge';
+        }
+    }
+    get value() {
+        const data = this.jobInformationServiceCharge;
+        if (!data || data.ServiceChargeValue == null) {
+            return '—';
+        }
+        if (ServiceChargeEntitlementMode[data.ServiceChargeEntitlementMode] ===
+            ServiceChargeEntitlementMode.FixedAmount) {
+            return `${this.commonMethodsService.currencyDecimalFormat(data.ServiceChargeValue, 4)} (${this.currencyCode})`;
+        }
+        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: "@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: "@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 }]
+            }], currencyCode: [{
+                type: Input
+            }], headerIconClass: [{
+                type: Input
+            }], headerTextClass: [{
+                type: Input
+            }], headerDividerClass: [{
+                type: Input
+            }], rowClass: [{
+                type: Input
+            }], columnClass: [{
+                type: Input
+            }], labelClass: [{
+                type: Input
+            }], valueClass: [{
+                type: Input
+            }], emptyStateContainerClass: [{
+                type: Input
+            }], emptyStateTextClass: [{
+                type: Input
+            }], serviceChargeIcon: [{
+                type: Input
+            }], sectionTitle: [{
+                type: Input
+            }], isLoadingChanged: [{
+                type: Output
+            }], errorOccurred: [{
+                type: Output
+            }] } });
+
 class HRVacationSubordinatesPopupComponent {
     http;
     dataGrid;
@@ -3110,6 +3690,224 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                 type: Output
             }] } });
 
+class ProfileExperiencesWidgetComponent {
+    service;
+    experiences = [];
+    isLoading = true;
+    baseUrl = '';
+    sectionTitle = 'experiences';
+    viewIcon = faEye;
+    downloadIcon = faFolderArrowDown;
+    experienceIcon = faUsersRays;
+    headerIconClass = 'primary-icon-xl';
+    headerTextClass = 'fs-16 mt-2 text-secondary';
+    headerDividerClass = 'flex-grow-1 ms-2';
+    rowClass = 'row mt-4';
+    itemRowClass = 'row col-10 mt-3';
+    itemColumnClass = 'col-3';
+    labelClass = 'field-secondary-label-sm';
+    valueClass = 'text-dark-gray fs-14 text-ellipsis-one-line cursor-pointer';
+    actionsColumnClass = 'col-2 mt-3';
+    viewIconClass = 'fs-15 text-dark cursor-pointer';
+    downloadIconClass = 'fs-15 text-dark cursor-pointer mx-2';
+    emptyStateContainerClass = 'd-flex flex-column justify-content-center align-items-center my-5';
+    emptyStateTextClass = 'field-secondary-label-md';
+    isLoadingChanged = new EventEmitter();
+    attachmentViewed = new EventEmitter();
+    attachmentDownloaded = new EventEmitter();
+    errorOccurred = new EventEmitter();
+    constructor(service) {
+        this.service = service;
+    }
+    ngOnInit() {
+        if (!this.baseUrl) {
+            this.isLoading = false;
+            return;
+        }
+        this.isLoadingChanged.emit(true);
+        this.service.getEmployeeExperiences(this.baseUrl).subscribe({
+            next: (res) => {
+                this.experiences = res ?? [];
+                this.isLoading = false;
+                this.isLoadingChanged.emit(false);
+            },
+            error: (error) => {
+                this.experiences = [];
+                this.isLoading = false;
+                this.errorOccurred.emit(error.error.ResponseData.Errors[0].Message);
+                this.isLoadingChanged.emit(false);
+            }
+        });
+    }
+    onAttachmentView(file) {
+        this.attachmentViewed.emit(file);
+    }
+    onAttachmentDownload(file) {
+        this.attachmentDownloaded.emit(file);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ProfileExperiencesWidgetComponent, deps: [{ token: HRSelfWidgetsService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: ProfileExperiencesWidgetComponent, isStandalone: true, selector: "hr-profile-experiences-widget", inputs: { baseUrl: "baseUrl", sectionTitle: "sectionTitle", viewIcon: "viewIcon", downloadIcon: "downloadIcon", experienceIcon: "experienceIcon", headerIconClass: "headerIconClass", headerTextClass: "headerTextClass", headerDividerClass: "headerDividerClass", rowClass: "rowClass", itemRowClass: "itemRowClass", itemColumnClass: "itemColumnClass", labelClass: "labelClass", valueClass: "valueClass", actionsColumnClass: "actionsColumnClass", viewIconClass: "viewIconClass", downloadIconClass: "downloadIconClass", emptyStateContainerClass: "emptyStateContainerClass", emptyStateTextClass: "emptyStateTextClass" }, outputs: { isLoadingChanged: "isLoadingChanged", attachmentViewed: "attachmentViewed", attachmentDownloaded: "attachmentDownloaded", errorOccurred: "errorOccurred" }, ngImport: i0, template: "<sky-section-divider [fontAwesomeIcon]=\"experienceIcon\"\r\n                     [text]=\"(sectionTitle | HRTranslate | uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n@if(experiences.length > 0){\r\n\r\n<div [class]=\"rowClass\">\r\n\r\n  @for (experience of experiences; track experience){\r\n\r\n  <div [class]=\"itemRowClass\">\r\n\r\n    <div [class]=\"itemColumnClass\">\r\n      <hr-info-field labelKey=\"Period\"\r\n                     [value]=\"(experience.StartDate | date:'dd/MM/yyyy') + ' - ' + (experience.EndDate | date:'dd/MM/yyyy')\"\r\n                     [labelClass]=\"labelClass\"\r\n                     [valueClass]=\"valueClass\">\r\n      </hr-info-field>\r\n    </div>\r\n\r\n    <div [class]=\"itemColumnClass\">\r\n      <hr-info-field labelKey=\"Employer\"\r\n                     [value]=\"experience.Employer\"\r\n                     [labelClass]=\"labelClass\"\r\n                     [valueClass]=\"valueClass\">\r\n      </hr-info-field>\r\n    </div>\r\n\r\n    <div [class]=\"itemColumnClass\">\r\n      <hr-info-field labelKey=\"Position\"\r\n                     [value]=\"experience.Position\"\r\n                     [labelClass]=\"labelClass\"\r\n                     [valueClass]=\"valueClass\">\r\n      </hr-info-field>\r\n    </div>\r\n\r\n    <div [class]=\"itemColumnClass\">\r\n      <hr-info-field labelKey=\"TerminationReason\"\r\n                     [value]=\"experience.TerminationReason\"\r\n                     [labelClass]=\"labelClass\"\r\n                     [valueClass]=\"valueClass\">\r\n      </hr-info-field>\r\n    </div>\r\n\r\n  </div>\r\n\r\n  @if(experience.Document){\r\n  <div [class]=\"actionsColumnClass\">\r\n    <fa-icon [icon]=\"viewIcon\" [class]=\"viewIconClass\" (click)=\"onAttachmentView(experience.Document)\"></fa-icon>\r\n    <fa-icon [icon]=\"downloadIcon\" [class]=\"downloadIconClass\" (click)=\"onAttachmentDownload(experience.Document)\"></fa-icon>\r\n  </div>\r\n  }\r\n\r\n  }\r\n\r\n</div>\r\n\r\n}@else{\r\n\r\n\r\n<sky-empty-design-card [containerClass]=\"emptyStateContainerClass\"\r\n                       [cardBodyClass]=\"''\"\r\n                       [cardBodyContainerClass]=\"''\"\r\n                       [visibleIcon]=\"false\"\r\n                       [visibleQuickAction]=\"false\"\r\n                       [emptyTextClass]=\"emptyStateTextClass\"\r\n                       [emptyText]=\"isLoading ? ((sectionTitle | HRTranslate) + ' ' + ('IsLoading' | HRTranslate)) : ('ThereIsNoExperiencesYet' | HRTranslate)\">\r\n</sky-empty-design-card>\r\n\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i2$1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i2$1.DatePipe, name: "date" }, { kind: "component", type: SkySectionDividerComponent, selector: "sky-section-divider", inputs: ["text", "fontAwesomeIcon", "textClass", "dividerClass", "iconClass"] }, { kind: "pipe", type: HRTranslatePipe, name: "HRTranslate" }, { kind: "component", type: SkyEmptyDesignCardComponent, selector: "sky-empty-design-card", inputs: ["emptyIcon", "emptyIconClass", "emptyText", "emptyTextClass", "actionTitle", "actionIcon", "actionDisabled", "textColor", "disabledTitleClass", "activeTitleClass", "disabledIconClass", "activeIconClass", "actionClass", "containerClass", "cardBodyClass", "cardBodyContainerClass", "visibleIcon", "visibleQuickAction"], outputs: ["onActionClick"] }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i1$2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }, { 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: ProfileExperiencesWidgetComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'hr-profile-experiences-widget', standalone: true, imports: [CommonModule, SkySectionDividerComponent,
+                        HRTranslatePipe, SkyEmptyDesignCardComponent, FontAwesomeModule, HRInfoFieldComponent], template: "<sky-section-divider [fontAwesomeIcon]=\"experienceIcon\"\r\n                     [text]=\"(sectionTitle | HRTranslate | uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n@if(experiences.length > 0){\r\n\r\n<div [class]=\"rowClass\">\r\n\r\n  @for (experience of experiences; track experience){\r\n\r\n  <div [class]=\"itemRowClass\">\r\n\r\n    <div [class]=\"itemColumnClass\">\r\n      <hr-info-field labelKey=\"Period\"\r\n                     [value]=\"(experience.StartDate | date:'dd/MM/yyyy') + ' - ' + (experience.EndDate | date:'dd/MM/yyyy')\"\r\n                     [labelClass]=\"labelClass\"\r\n                     [valueClass]=\"valueClass\">\r\n      </hr-info-field>\r\n    </div>\r\n\r\n    <div [class]=\"itemColumnClass\">\r\n      <hr-info-field labelKey=\"Employer\"\r\n                     [value]=\"experience.Employer\"\r\n                     [labelClass]=\"labelClass\"\r\n                     [valueClass]=\"valueClass\">\r\n      </hr-info-field>\r\n    </div>\r\n\r\n    <div [class]=\"itemColumnClass\">\r\n      <hr-info-field labelKey=\"Position\"\r\n                     [value]=\"experience.Position\"\r\n                     [labelClass]=\"labelClass\"\r\n                     [valueClass]=\"valueClass\">\r\n      </hr-info-field>\r\n    </div>\r\n\r\n    <div [class]=\"itemColumnClass\">\r\n      <hr-info-field labelKey=\"TerminationReason\"\r\n                     [value]=\"experience.TerminationReason\"\r\n                     [labelClass]=\"labelClass\"\r\n                     [valueClass]=\"valueClass\">\r\n      </hr-info-field>\r\n    </div>\r\n\r\n  </div>\r\n\r\n  @if(experience.Document){\r\n  <div [class]=\"actionsColumnClass\">\r\n    <fa-icon [icon]=\"viewIcon\" [class]=\"viewIconClass\" (click)=\"onAttachmentView(experience.Document)\"></fa-icon>\r\n    <fa-icon [icon]=\"downloadIcon\" [class]=\"downloadIconClass\" (click)=\"onAttachmentDownload(experience.Document)\"></fa-icon>\r\n  </div>\r\n  }\r\n\r\n  }\r\n\r\n</div>\r\n\r\n}@else{\r\n\r\n\r\n<sky-empty-design-card [containerClass]=\"emptyStateContainerClass\"\r\n                       [cardBodyClass]=\"''\"\r\n                       [cardBodyContainerClass]=\"''\"\r\n                       [visibleIcon]=\"false\"\r\n                       [visibleQuickAction]=\"false\"\r\n                       [emptyTextClass]=\"emptyStateTextClass\"\r\n                       [emptyText]=\"isLoading ? ((sectionTitle | HRTranslate) + ' ' + ('IsLoading' | HRTranslate)) : ('ThereIsNoExperiencesYet' | HRTranslate)\">\r\n</sky-empty-design-card>\r\n\r\n}\r\n" }]
+        }], ctorParameters: () => [{ type: HRSelfWidgetsService }], propDecorators: { baseUrl: [{
+                type: Input
+            }], sectionTitle: [{
+                type: Input
+            }], viewIcon: [{
+                type: Input
+            }], downloadIcon: [{
+                type: Input
+            }], experienceIcon: [{
+                type: Input
+            }], headerIconClass: [{
+                type: Input
+            }], headerTextClass: [{
+                type: Input
+            }], headerDividerClass: [{
+                type: Input
+            }], rowClass: [{
+                type: Input
+            }], itemRowClass: [{
+                type: Input
+            }], itemColumnClass: [{
+                type: Input
+            }], labelClass: [{
+                type: Input
+            }], valueClass: [{
+                type: Input
+            }], actionsColumnClass: [{
+                type: Input
+            }], viewIconClass: [{
+                type: Input
+            }], downloadIconClass: [{
+                type: Input
+            }], emptyStateContainerClass: [{
+                type: Input
+            }], emptyStateTextClass: [{
+                type: Input
+            }], isLoadingChanged: [{
+                type: Output
+            }], attachmentViewed: [{
+                type: Output
+            }], attachmentDownloaded: [{
+                type: Output
+            }], errorOccurred: [{
+                type: Output
+            }] } });
+
+class ProfileDegreesWidgetComponent {
+    service;
+    degrees = [];
+    isLoading = true;
+    baseUrl = '';
+    sectionTitle = 'Degrees';
+    degreesIcon = faFileCertificate;
+    viewIcon = faEye;
+    downloadIcon = faFolderArrowDown;
+    headerIconClass = 'primary-icon-xl';
+    headerTextClass = 'fs-16 mt-2 text-secondary';
+    headerDividerClass = 'flex-grow-1 ms-2';
+    rowClass = 'row mt-4';
+    itemRowClass = 'row col-10 mt-3';
+    itemColumnClass = 'col-3';
+    labelClass = 'field-secondary-label-sm';
+    valueClass = 'text-dark-gray fs-14';
+    valueEllipsisClass = 'text-dark-gray fs-14 text-ellipsis-one-line cursor-pointer';
+    actionsColumnClass = 'col-2 align-items-end mt-3';
+    viewIconClass = 'fs-15 text-dark cursor-pointer';
+    downloadIconClass = 'fs-15 mx-3 text-dark cursor-pointer';
+    emptyStateContainerClass = 'd-flex flex-column justify-content-center align-items-center my-5';
+    emptyStateTextClass = 'field-secondary-label-md';
+    isLoadingChanged = new EventEmitter();
+    attachmentViewed = new EventEmitter();
+    attachmentDownloaded = new EventEmitter();
+    errorOccurred = new EventEmitter();
+    constructor(service) {
+        this.service = service;
+    }
+    ngOnInit() {
+        if (!this.baseUrl) {
+            this.isLoading = false;
+            return;
+        }
+        this.isLoadingChanged.emit(true);
+        this.service.getEmployeeDegrees(this.baseUrl).subscribe({
+            next: (res) => {
+                this.degrees = res ?? [];
+                this.isLoading = false;
+                this.isLoadingChanged.emit(false);
+            },
+            error: (error) => {
+                this.degrees = [];
+                this.isLoading = false;
+                this.errorOccurred.emit(error.error.ResponseData.Errors[0].Message);
+                this.isLoadingChanged.emit(false);
+            }
+        });
+    }
+    onAttachmentView(file) {
+        this.attachmentViewed.emit(file);
+    }
+    onAttachmentDownload(file) {
+        this.attachmentDownloaded.emit(file);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ProfileDegreesWidgetComponent, deps: [{ token: HRSelfWidgetsService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: ProfileDegreesWidgetComponent, isStandalone: true, selector: "hr-profile-degrees-widget", inputs: { baseUrl: "baseUrl", sectionTitle: "sectionTitle", degreesIcon: "degreesIcon", viewIcon: "viewIcon", downloadIcon: "downloadIcon", headerIconClass: "headerIconClass", headerTextClass: "headerTextClass", headerDividerClass: "headerDividerClass", rowClass: "rowClass", itemRowClass: "itemRowClass", itemColumnClass: "itemColumnClass", labelClass: "labelClass", valueClass: "valueClass", valueEllipsisClass: "valueEllipsisClass", actionsColumnClass: "actionsColumnClass", viewIconClass: "viewIconClass", downloadIconClass: "downloadIconClass", emptyStateContainerClass: "emptyStateContainerClass", emptyStateTextClass: "emptyStateTextClass" }, outputs: { isLoadingChanged: "isLoadingChanged", attachmentViewed: "attachmentViewed", attachmentDownloaded: "attachmentDownloaded", errorOccurred: "errorOccurred" }, ngImport: i0, template: "<sky-section-divider [fontAwesomeIcon]=\"degreesIcon\"\r\n                     [text]=\"(sectionTitle | HRTranslate | uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n@if(degrees.length > 0){\r\n\r\n<div [class]=\"rowClass\">\r\n\r\n  @for (qualification of degrees; track qualification){\r\n\r\n  <div [class]=\"itemRowClass\">\r\n\r\n    <div [class]=\"itemColumnClass\">\r\n      <hr-info-field labelKey=\"Degree/Year\"\r\n                     [value]=\"(qualification.DegreeName + ' / ' + qualification.DegreeYear)\"\r\n                     [labelClass]=\"labelClass\"\r\n                     [valueClass]=\"valueClass\">\r\n      </hr-info-field>\r\n    </div>\r\n\r\n    <div [class]=\"itemColumnClass\">\r\n      <hr-info-field labelKey=\"Country\"\r\n                     [value]=\"qualification.CountryName\"\r\n                     [labelClass]=\"labelClass\"\r\n                     [valueClass]=\"valueEllipsisClass\">\r\n      </hr-info-field>\r\n    </div>\r\n\r\n    <div [class]=\"itemColumnClass\">\r\n      <hr-info-field labelKey=\"Specialty\"\r\n                     [value]=\"qualification.Specialty\"\r\n                     [labelClass]=\"labelClass\"\r\n                     [valueClass]=\"valueEllipsisClass\">\r\n      </hr-info-field>\r\n    </div>\r\n\r\n    <div [class]=\"itemColumnClass\">\r\n      <hr-info-field labelKey=\"Institute\"\r\n                     [value]=\"qualification.Institute\"\r\n                     [labelClass]=\"labelClass\"\r\n                     [valueClass]=\"valueEllipsisClass\">\r\n      </hr-info-field>\r\n    </div>\r\n\r\n  </div>\r\n\r\n  @if(qualification.Document){\r\n  <div [class]=\"actionsColumnClass\">\r\n    <fa-icon [icon]=\"viewIcon\" [class]=\"viewIconClass\" (click)=\"onAttachmentView(qualification.Document)\"></fa-icon>\r\n    <fa-icon [icon]=\"downloadIcon\" [class]=\"downloadIconClass\" (click)=\"onAttachmentDownload(qualification.Document)\"></fa-icon>\r\n  </div>\r\n  }\r\n\r\n  }\r\n\r\n</div>\r\n}@else{\r\n\r\n  <sky-empty-design-card [containerClass]=\"emptyStateContainerClass\"\r\n                         [cardBodyClass]=\"''\"\r\n                         [cardBodyContainerClass]=\"''\"\r\n                         [visibleIcon]=\"false\"\r\n                         [visibleQuickAction]=\"false\"\r\n                         [emptyTextClass]=\"emptyStateTextClass\"\r\n                         [emptyText]=\"isLoading ? ((sectionTitle | HRTranslate) + ' ' + ('IsLoading' | HRTranslate)) : ('ThereIsNoDegreesYet' | HRTranslate)\">\r\n  </sky-empty-design-card>\r\n\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i2$1.UpperCasePipe, name: "uppercase" }, { kind: "component", type: SkySectionDividerComponent, selector: "sky-section-divider", inputs: ["text", "fontAwesomeIcon", "textClass", "dividerClass", "iconClass"] }, { kind: "pipe", type: HRTranslatePipe, name: "HRTranslate" }, { kind: "component", type: SkyEmptyDesignCardComponent, selector: "sky-empty-design-card", inputs: ["emptyIcon", "emptyIconClass", "emptyText", "emptyTextClass", "actionTitle", "actionIcon", "actionDisabled", "textColor", "disabledTitleClass", "activeTitleClass", "disabledIconClass", "activeIconClass", "actionClass", "containerClass", "cardBodyClass", "cardBodyContainerClass", "visibleIcon", "visibleQuickAction"], outputs: ["onActionClick"] }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i1$2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }, { 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: ProfileDegreesWidgetComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'hr-profile-degrees-widget', standalone: true, imports: [CommonModule, SkySectionDividerComponent, HRTranslatePipe, SkyEmptyDesignCardComponent, FontAwesomeModule, HRInfoFieldComponent], template: "<sky-section-divider [fontAwesomeIcon]=\"degreesIcon\"\r\n                     [text]=\"(sectionTitle | HRTranslate | uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n@if(degrees.length > 0){\r\n\r\n<div [class]=\"rowClass\">\r\n\r\n  @for (qualification of degrees; track qualification){\r\n\r\n  <div [class]=\"itemRowClass\">\r\n\r\n    <div [class]=\"itemColumnClass\">\r\n      <hr-info-field labelKey=\"Degree/Year\"\r\n                     [value]=\"(qualification.DegreeName + ' / ' + qualification.DegreeYear)\"\r\n                     [labelClass]=\"labelClass\"\r\n                     [valueClass]=\"valueClass\">\r\n      </hr-info-field>\r\n    </div>\r\n\r\n    <div [class]=\"itemColumnClass\">\r\n      <hr-info-field labelKey=\"Country\"\r\n                     [value]=\"qualification.CountryName\"\r\n                     [labelClass]=\"labelClass\"\r\n                     [valueClass]=\"valueEllipsisClass\">\r\n      </hr-info-field>\r\n    </div>\r\n\r\n    <div [class]=\"itemColumnClass\">\r\n      <hr-info-field labelKey=\"Specialty\"\r\n                     [value]=\"qualification.Specialty\"\r\n                     [labelClass]=\"labelClass\"\r\n                     [valueClass]=\"valueEllipsisClass\">\r\n      </hr-info-field>\r\n    </div>\r\n\r\n    <div [class]=\"itemColumnClass\">\r\n      <hr-info-field labelKey=\"Institute\"\r\n                     [value]=\"qualification.Institute\"\r\n                     [labelClass]=\"labelClass\"\r\n                     [valueClass]=\"valueEllipsisClass\">\r\n      </hr-info-field>\r\n    </div>\r\n\r\n  </div>\r\n\r\n  @if(qualification.Document){\r\n  <div [class]=\"actionsColumnClass\">\r\n    <fa-icon [icon]=\"viewIcon\" [class]=\"viewIconClass\" (click)=\"onAttachmentView(qualification.Document)\"></fa-icon>\r\n    <fa-icon [icon]=\"downloadIcon\" [class]=\"downloadIconClass\" (click)=\"onAttachmentDownload(qualification.Document)\"></fa-icon>\r\n  </div>\r\n  }\r\n\r\n  }\r\n\r\n</div>\r\n}@else{\r\n\r\n  <sky-empty-design-card [containerClass]=\"emptyStateContainerClass\"\r\n                         [cardBodyClass]=\"''\"\r\n                         [cardBodyContainerClass]=\"''\"\r\n                         [visibleIcon]=\"false\"\r\n                         [visibleQuickAction]=\"false\"\r\n                         [emptyTextClass]=\"emptyStateTextClass\"\r\n                         [emptyText]=\"isLoading ? ((sectionTitle | HRTranslate) + ' ' + ('IsLoading' | HRTranslate)) : ('ThereIsNoDegreesYet' | HRTranslate)\">\r\n  </sky-empty-design-card>\r\n\r\n}\r\n" }]
+        }], ctorParameters: () => [{ type: HRSelfWidgetsService }], propDecorators: { baseUrl: [{
+                type: Input
+            }], sectionTitle: [{
+                type: Input
+            }], degreesIcon: [{
+                type: Input
+            }], viewIcon: [{
+                type: Input
+            }], downloadIcon: [{
+                type: Input
+            }], headerIconClass: [{
+                type: Input
+            }], headerTextClass: [{
+                type: Input
+            }], headerDividerClass: [{
+                type: Input
+            }], rowClass: [{
+                type: Input
+            }], itemRowClass: [{
+                type: Input
+            }], itemColumnClass: [{
+                type: Input
+            }], labelClass: [{
+                type: Input
+            }], valueClass: [{
+                type: Input
+            }], valueEllipsisClass: [{
+                type: Input
+            }], actionsColumnClass: [{
+                type: Input
+            }], viewIconClass: [{
+                type: Input
+            }], downloadIconClass: [{
+                type: Input
+            }], emptyStateContainerClass: [{
+                type: Input
+            }], emptyStateTextClass: [{
+                type: Input
+            }], isLoadingChanged: [{
+                type: Output
+            }], attachmentViewed: [{
+                type: Output
+            }], attachmentDownloaded: [{
+                type: Output
+            }], errorOccurred: [{
+                type: Output
+            }] } });
+
 /*
  * Public API Surface of shared-ui
  */
@@ -3118,5 +3916,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { EventOption, EventTypeEnum, HRCardHeaderComponent, HRConstantsService, HREmployeeCalendarComponent, HRTranslatePipe, HRTranslateService, MainWidgetShortcut, MyCalendarWidgetComponent, MyMainDetailsWidgetComponent, MyUpcomingEventsWidgetComponent, MyVacationTeamWidgetComponent, ProfilePersonalInfoAddressWidgetComponent, ProfilePersonalInfoContactWidgetComponent, ProfilePersonalInfoLanguagesWidgetComponent, ProfilePersonalInfoMainWidgetComponent, ProfilePersonalInfoOtherNationalitiesWidgetComponent, PublicHolidayWeekContext, RelativeDay, ScheduleVacationTypes, ServiceChargeEntitlementMode, VacationPopupType };
+export { EventOption, EventTypeEnum, HRCardHeaderComponent, HRConstantsService, HREmployeeCalendarComponent, HRTranslatePipe, HRTranslateService, MainWidgetShortcut, MyCalendarWidgetComponent, MyMainDetailsWidgetComponent, MyUpcomingEventsWidgetComponent, MyVacationTeamWidgetComponent, ProfileBankInfoWidgetComponent, ProfileDegreesWidgetComponent, ProfileExperiencesWidgetComponent, ProfileJobInfoContractWidgetComponent, ProfileJobInfoMainWidgetComponent, ProfileJobInfoSalaryWidgetComponent, ProfileJobInfoServiceChargeWidgetComponent, ProfilePersonalInfoAddressWidgetComponent, ProfilePersonalInfoContactWidgetComponent, ProfilePersonalInfoLanguagesWidgetComponent, ProfilePersonalInfoMainWidgetComponent, ProfilePersonalInfoOtherNationalitiesWidgetComponent, PublicHolidayWeekContext, RelativeDay, ScheduleVacationTypes, ServiceChargeEntitlementMode, VacationPopupType };
 //# sourceMappingURL=skysoftware-co-bayan-hr-widgets-ui.mjs.map