@skysoftware-co/bayan-hr-widgets-ui 1.0.8 → 1.0.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -11,7 +11,7 @@ import { SkyShortcutIconComponent, SkySectionDividerComponent } from '@skysoftwa
11
11
  import * as i1 from '@angular/common/http';
12
12
  import { HttpParams } from '@angular/common/http';
13
13
  import { map, shareReplay, catchError, throwError } from 'rxjs';
14
- import { faCakeCandles, faTreePalm, faCalendarStar, faMoneyCheckDollarPen, faMemoCircleInfo, faPhone, faHouse, faLanguage, faEarthAfrica } from '@fortawesome/pro-light-svg-icons';
14
+ import { faCakeCandles, faTreePalm, faCalendarStar, faMoneyCheckDollarPen, faMemoCircleInfo, faPhone, faBolt, faHouse, faLanguage, faEarthAfrica } from '@fortawesome/pro-light-svg-icons';
15
15
  import * as i2 from 'devextreme-angular/core';
16
16
  import { faCircle, faCalendarDays } from '@fortawesome/pro-regular-svg-icons';
17
17
  import moment from 'moment';
@@ -96,6 +96,13 @@ var AccountNumber$2 = "Account number";
96
96
  var Beneficiary$2 = "Beneficiary";
97
97
  var TransferAmount$2 = "Transfer amount";
98
98
  var ThereIsNoBankYet$2 = "There is no bank yet";
99
+ var IsLoading$2 = "is loading...";
100
+ var ThereIsNoMainYet$2 = "There are no main details yet";
101
+ var ThereIsNoContactYet$2 = "There are no contact details yet";
102
+ var ThereIsNoAddressYet$2 = "There is no address yet";
103
+ var ThereIsNoLanguagesYet$2 = "There are no languages yet";
104
+ var UserInfoIsLoading$2 = "User information is loading...";
105
+ var ThereIsNoOtherNationalitiesYet$2 = "There are no other nationalities yet";
99
106
  var main$2 = "Main";
100
107
  var contact$2 = "Contact";
101
108
  var address$2 = "Address";
@@ -163,6 +170,13 @@ var en = {
163
170
  Beneficiary: Beneficiary$2,
164
171
  TransferAmount: TransferAmount$2,
165
172
  ThereIsNoBankYet: ThereIsNoBankYet$2,
173
+ IsLoading: IsLoading$2,
174
+ ThereIsNoMainYet: ThereIsNoMainYet$2,
175
+ ThereIsNoContactYet: ThereIsNoContactYet$2,
176
+ ThereIsNoAddressYet: ThereIsNoAddressYet$2,
177
+ ThereIsNoLanguagesYet: ThereIsNoLanguagesYet$2,
178
+ UserInfoIsLoading: UserInfoIsLoading$2,
179
+ ThereIsNoOtherNationalitiesYet: ThereIsNoOtherNationalitiesYet$2,
166
180
  main: main$2,
167
181
  contact: contact$2,
168
182
  address: address$2,
@@ -232,6 +246,13 @@ var AccountNumber$1 = "رقم الحساب";
232
246
  var Beneficiary$1 = "المستفيد";
233
247
  var TransferAmount$1 = "مبلغ التحويل";
234
248
  var ThereIsNoBankYet$1 = "لا يوجد بنك بعد";
249
+ var IsLoading$1 = "قيد التحميل...";
250
+ var ThereIsNoMainYet$1 = "لا توجد بيانات رئيسية بعد";
251
+ var ThereIsNoContactYet$1 = "لا توجد بيانات اتصال بعد";
252
+ var ThereIsNoAddressYet$1 = "لا يوجد عنوان بعد";
253
+ var ThereIsNoLanguagesYet$1 = "لا توجد لغات بعد";
254
+ var UserInfoIsLoading$1 = "جاري تحميل معلومات المستخدم...";
255
+ var ThereIsNoOtherNationalitiesYet$1 = "لا توجد جنسيات أخرى بعد";
235
256
  var main$1 = "البيانات الرئيسية";
236
257
  var contact$1 = "بيانات الاتصال";
237
258
  var address$1 = "العنوان";
@@ -299,6 +320,13 @@ var ar = {
299
320
  Beneficiary: Beneficiary$1,
300
321
  TransferAmount: TransferAmount$1,
301
322
  ThereIsNoBankYet: ThereIsNoBankYet$1,
323
+ IsLoading: IsLoading$1,
324
+ ThereIsNoMainYet: ThereIsNoMainYet$1,
325
+ ThereIsNoContactYet: ThereIsNoContactYet$1,
326
+ ThereIsNoAddressYet: ThereIsNoAddressYet$1,
327
+ ThereIsNoLanguagesYet: ThereIsNoLanguagesYet$1,
328
+ UserInfoIsLoading: UserInfoIsLoading$1,
329
+ ThereIsNoOtherNationalitiesYet: ThereIsNoOtherNationalitiesYet$1,
302
330
  main: main$1,
303
331
  contact: contact$1,
304
332
  address: address$1,
@@ -368,6 +396,13 @@ var AccountNumber = "Numéro de compte";
368
396
  var Beneficiary = "Bénéficiaire";
369
397
  var TransferAmount = "Montant du transfert";
370
398
  var ThereIsNoBankYet = "Il n'y a pas encore de banque";
399
+ var IsLoading = "est en cours de chargement...";
400
+ var ThereIsNoMainYet = "Il n'y a pas encore d'informations principales";
401
+ var ThereIsNoContactYet = "Il n'y a pas encore de coordonnées";
402
+ var ThereIsNoAddressYet = "Il n'y a pas encore d'adresse";
403
+ var ThereIsNoLanguagesYet = "Il n'y a pas encore de langues";
404
+ var UserInfoIsLoading = "Les informations de l'utilisateur sont en cours de chargement...";
405
+ var ThereIsNoOtherNationalitiesYet = "Il n'y a pas encore d'autres nationalités";
371
406
  var main = "Principal";
372
407
  var contact = "Contact";
373
408
  var address = "Adresse";
@@ -435,6 +470,13 @@ var fr = {
435
470
  Beneficiary: Beneficiary,
436
471
  TransferAmount: TransferAmount,
437
472
  ThereIsNoBankYet: ThereIsNoBankYet,
473
+ IsLoading: IsLoading,
474
+ ThereIsNoMainYet: ThereIsNoMainYet,
475
+ ThereIsNoContactYet: ThereIsNoContactYet,
476
+ ThereIsNoAddressYet: ThereIsNoAddressYet,
477
+ ThereIsNoLanguagesYet: ThereIsNoLanguagesYet,
478
+ UserInfoIsLoading: UserInfoIsLoading,
479
+ ThereIsNoOtherNationalitiesYet: ThereIsNoOtherNationalitiesYet,
438
480
  main: main,
439
481
  contact: contact,
440
482
  address: address,
@@ -1809,9 +1851,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
1809
1851
  type: Input
1810
1852
  }] } });
1811
1853
 
1812
- class MyBankInformationWidgetComponent {
1854
+ class ProfileBankInformationWidgetComponent {
1813
1855
  commonMethodsService;
1814
1856
  hrSelfWidgetsService;
1857
+ isLoading = true;
1815
1858
  constructor(commonMethodsService, hrSelfWidgetsService) {
1816
1859
  this.commonMethodsService = commonMethodsService;
1817
1860
  this.hrSelfWidgetsService = hrSelfWidgetsService;
@@ -1820,10 +1863,12 @@ class MyBankInformationWidgetComponent {
1820
1863
  this.isLoadingChanged.emit(true);
1821
1864
  this.hrSelfWidgetsService.getBankInformation(this.baseUrl).subscribe({
1822
1865
  next: (response) => {
1866
+ this.isLoading = false;
1823
1867
  this.employeeBankInformation = response ?? [];
1824
1868
  this.isLoadingChanged.emit(false);
1825
1869
  },
1826
1870
  error: () => {
1871
+ this.isLoading = false;
1827
1872
  this.employeeBankInformation = [];
1828
1873
  this.isLoadingChanged.emit(false);
1829
1874
  }
@@ -1834,7 +1879,7 @@ class MyBankInformationWidgetComponent {
1834
1879
  currencyDecimals = 2;
1835
1880
  headerIconClass = 'primary-icon-xl';
1836
1881
  headerTextClass = 'mt-2 field-secondary-label-lg';
1837
- headerDividerClass = 'flex-grow-1 mb-3';
1882
+ headerDividerClass = 'flex-grow-1 ms-2';
1838
1883
  cardClass = 'mt-4 card-shadow position-relative';
1839
1884
  mainBadgeClass = 'position-absolute text-center top-0 mt-3 start-0 bg-primary status-badge';
1840
1885
  mainBadgeTextClass = 'mx-1 fs-12 text-white';
@@ -1862,12 +1907,12 @@ class MyBankInformationWidgetComponent {
1862
1907
  }
1863
1908
  return this.commonMethodsService.currencyDecimalFormat(value, this.currencyDecimals) || '-';
1864
1909
  }
1865
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: MyBankInformationWidgetComponent, deps: [{ token: HRCommonMethodsService }, { token: HRSelfWidgetsService }], target: i0.ɵɵFactoryTarget.Component });
1866
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: MyBankInformationWidgetComponent, isStandalone: true, selector: "hr-my-bank-information-widget", inputs: { currencyCode: "currencyCode", currencyDecimals: "currencyDecimals", headerIconClass: "headerIconClass", headerTextClass: "headerTextClass", headerDividerClass: "headerDividerClass", cardClass: "cardClass", mainBadgeClass: "mainBadgeClass", mainBadgeTextClass: "mainBadgeTextClass", triangleClass: "triangleClass", rowClass: "rowClass", rowMainPtClass: "rowMainPtClass", rowNormalPtClass: "rowNormalPtClass", columnClass: "columnClass", responsiveTopSpacingColClass: "responsiveTopSpacingColClass", topSpacingColClass: "topSpacingColClass", labelClass: "labelClass", valueClass: "valueClass", emptyStateContainerClass: "emptyStateContainerClass", emptyStateTextClass: "emptyStateTextClass", bankInformationIcon: "bankInformationIcon", sectionHeaderVisibility: "sectionHeaderVisibility", sectionTitle: "sectionTitle", language: "language", baseUrl: "baseUrl" }, outputs: { isLoadingChanged: "isLoadingChanged" }, ngImport: i0, template: "@if(sectionHeaderVisibility){\r\n<sky-section-divider [fontAwesomeIcon]=\"bankInformationIcon\"\r\n [text]=\"(sectionTitle | HRTranslate)\"\r\n [iconClass]=\"headerIconClass\"\r\n [textClass]=\"headerTextClass\"\r\n [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n}\r\n@if(employeeBankInformation.length > 0){\r\n@for (bankInfo of employeeBankInformation; track bankInfo){\r\n<div [class]=\"cardClass\">\r\n @if(bankInfo.IsMainBank && employeeBankInformation.length > 1){\r\n <div [class]=\"mainBadgeClass\"\r\n style=\"padding-top: 2px\"\r\n [style.margin-left]=\"!isRTL ? '-6px' : 'unset'\">\r\n <span [class]=\"mainBadgeTextClass\">{{'MainBank' | HRTranslate}}</span>\r\n </div>\r\n\r\n <div [class]=\"triangleClass\"\r\n [style.margin-left]=\"!isRTL ? '-6px' : 'unset'\"\r\n [style.margin-right]=\"isRTL ? '-5px' : '20px'\"\r\n [style.margin-top]=\"!isRTL ? '7px' : '4px'\">\r\n <svg viewBox=\"4 2 16 16\" class=\"status-badge-triangle\" fill=\"#e67e0f\">\r\n <path d=\"m3.86 8.753 5.482 4.796c.646.566 1.658.106 1.658-.753V3.204a1 1 0 0 0-1.659-.753l-5.48 4.796a1 1 0 0 0 0 1.506z\"></path>\r\n </svg>\r\n </div>\r\n }\r\n\r\n <div [ngClass]=\"[rowClass, bankInfo.IsMainBank ? rowMainPtClass : rowNormalPtClass]\">\r\n <div [class]=\"columnClass\">\r\n <hr-info-field [labelKey]=\"'Bank'\"\r\n [value]=\"bankInfo.BankName\"\r\n [labelClass]=\"labelClass\"\r\n [valueClass]=\"valueClass\">\r\n </hr-info-field>\r\n </div>\r\n\r\n <div [class]=\"columnClass\">\r\n <hr-info-field [labelKey]=\"'Branch'\"\r\n [value]=\"bankInfo.BranchName\"\r\n [labelClass]=\"labelClass\"\r\n [valueClass]=\"valueClass\">\r\n </hr-info-field>\r\n </div>\r\n\r\n <div [class]=\"responsiveTopSpacingColClass\">\r\n <hr-info-field [labelKey]=\"'IBAN'\"\r\n [value]=\"bankInfo.IBAN\"\r\n [labelClass]=\"labelClass\"\r\n [valueClass]=\"valueClass\">\r\n </hr-info-field>\r\n </div>\r\n\r\n <div [class]=\"topSpacingColClass\">\r\n <hr-info-field [labelKey]=\"'AccountNumber'\"\r\n [value]=\"bankInfo.AccountNumber\"\r\n [labelClass]=\"labelClass\"\r\n [valueClass]=\"valueClass\">\r\n </hr-info-field>\r\n </div>\r\n\r\n <div [class]=\"topSpacingColClass\">\r\n <hr-info-field [labelKey]=\"'Beneficiary'\"\r\n [value]=\"bankInfo.Beneficiary\"\r\n [labelClass]=\"labelClass\"\r\n [valueClass]=\"valueClass\">\r\n </hr-info-field>\r\n </div>\r\n\r\n @if(bankInfo.TransferAmount != null){\r\n <div [class]=\"topSpacingColClass\">\r\n <hr-info-field [labelKey]=\"'TransferAmount'\"\r\n [value]=\"formatAmount(bankInfo.TransferAmount) + ' (' + currencyCode + ')'\"\r\n [labelClass]=\"labelClass\"\r\n [valueClass]=\"valueClass\">\r\n </hr-info-field>\r\n </div>\r\n }\r\n </div>\r\n</div>\r\n}\r\n}@else{\r\n<div [class]=\"emptyStateContainerClass\">\r\n <p [class]=\"emptyStateTextClass\">{{'ThereIsNoBankYet' | HRTranslate}}</p>\r\n</div>\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: HRTranslatePipe, name: "HRTranslate" }, { kind: "component", type: SkySectionDividerComponent, selector: "sky-section-divider", inputs: ["text", "fontAwesomeIcon", "textClass", "dividerClass", "iconClass"] }, { kind: "component", type: HRInfoFieldComponent, selector: "hr-info-field", inputs: ["labelKey", "value", "labelClass", "valueClass", "fallbackValue"] }] });
1910
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ProfileBankInformationWidgetComponent, deps: [{ token: HRCommonMethodsService }, { token: HRSelfWidgetsService }], target: i0.ɵɵFactoryTarget.Component });
1911
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: ProfileBankInformationWidgetComponent, isStandalone: true, selector: "hr-profile-bank-information-widget", inputs: { currencyCode: "currencyCode", currencyDecimals: "currencyDecimals", headerIconClass: "headerIconClass", headerTextClass: "headerTextClass", headerDividerClass: "headerDividerClass", cardClass: "cardClass", mainBadgeClass: "mainBadgeClass", mainBadgeTextClass: "mainBadgeTextClass", triangleClass: "triangleClass", rowClass: "rowClass", rowMainPtClass: "rowMainPtClass", rowNormalPtClass: "rowNormalPtClass", columnClass: "columnClass", responsiveTopSpacingColClass: "responsiveTopSpacingColClass", topSpacingColClass: "topSpacingColClass", labelClass: "labelClass", valueClass: "valueClass", emptyStateContainerClass: "emptyStateContainerClass", emptyStateTextClass: "emptyStateTextClass", bankInformationIcon: "bankInformationIcon", sectionHeaderVisibility: "sectionHeaderVisibility", sectionTitle: "sectionTitle", language: "language", baseUrl: "baseUrl" }, outputs: { isLoadingChanged: "isLoadingChanged" }, ngImport: i0, template: "@if(sectionHeaderVisibility){\r\n<sky-section-divider [fontAwesomeIcon]=\"bankInformationIcon\"\r\n [text]=\"(sectionTitle | HRTranslate|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"] }] });
1867
1912
  }
1868
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: MyBankInformationWidgetComponent, decorators: [{
1913
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ProfileBankInformationWidgetComponent, decorators: [{
1869
1914
  type: Component,
1870
- args: [{ selector: 'hr-my-bank-information-widget', standalone: true, imports: [CommonModule, HRTranslatePipe, SkySectionDividerComponent, HRInfoFieldComponent], template: "@if(sectionHeaderVisibility){\r\n<sky-section-divider [fontAwesomeIcon]=\"bankInformationIcon\"\r\n [text]=\"(sectionTitle | HRTranslate)\"\r\n [iconClass]=\"headerIconClass\"\r\n [textClass]=\"headerTextClass\"\r\n [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n}\r\n@if(employeeBankInformation.length > 0){\r\n@for (bankInfo of employeeBankInformation; track bankInfo){\r\n<div [class]=\"cardClass\">\r\n @if(bankInfo.IsMainBank && employeeBankInformation.length > 1){\r\n <div [class]=\"mainBadgeClass\"\r\n style=\"padding-top: 2px\"\r\n [style.margin-left]=\"!isRTL ? '-6px' : 'unset'\">\r\n <span [class]=\"mainBadgeTextClass\">{{'MainBank' | HRTranslate}}</span>\r\n </div>\r\n\r\n <div [class]=\"triangleClass\"\r\n [style.margin-left]=\"!isRTL ? '-6px' : 'unset'\"\r\n [style.margin-right]=\"isRTL ? '-5px' : '20px'\"\r\n [style.margin-top]=\"!isRTL ? '7px' : '4px'\">\r\n <svg viewBox=\"4 2 16 16\" class=\"status-badge-triangle\" fill=\"#e67e0f\">\r\n <path d=\"m3.86 8.753 5.482 4.796c.646.566 1.658.106 1.658-.753V3.204a1 1 0 0 0-1.659-.753l-5.48 4.796a1 1 0 0 0 0 1.506z\"></path>\r\n </svg>\r\n </div>\r\n }\r\n\r\n <div [ngClass]=\"[rowClass, bankInfo.IsMainBank ? rowMainPtClass : rowNormalPtClass]\">\r\n <div [class]=\"columnClass\">\r\n <hr-info-field [labelKey]=\"'Bank'\"\r\n [value]=\"bankInfo.BankName\"\r\n [labelClass]=\"labelClass\"\r\n [valueClass]=\"valueClass\">\r\n </hr-info-field>\r\n </div>\r\n\r\n <div [class]=\"columnClass\">\r\n <hr-info-field [labelKey]=\"'Branch'\"\r\n [value]=\"bankInfo.BranchName\"\r\n [labelClass]=\"labelClass\"\r\n [valueClass]=\"valueClass\">\r\n </hr-info-field>\r\n </div>\r\n\r\n <div [class]=\"responsiveTopSpacingColClass\">\r\n <hr-info-field [labelKey]=\"'IBAN'\"\r\n [value]=\"bankInfo.IBAN\"\r\n [labelClass]=\"labelClass\"\r\n [valueClass]=\"valueClass\">\r\n </hr-info-field>\r\n </div>\r\n\r\n <div [class]=\"topSpacingColClass\">\r\n <hr-info-field [labelKey]=\"'AccountNumber'\"\r\n [value]=\"bankInfo.AccountNumber\"\r\n [labelClass]=\"labelClass\"\r\n [valueClass]=\"valueClass\">\r\n </hr-info-field>\r\n </div>\r\n\r\n <div [class]=\"topSpacingColClass\">\r\n <hr-info-field [labelKey]=\"'Beneficiary'\"\r\n [value]=\"bankInfo.Beneficiary\"\r\n [labelClass]=\"labelClass\"\r\n [valueClass]=\"valueClass\">\r\n </hr-info-field>\r\n </div>\r\n\r\n @if(bankInfo.TransferAmount != null){\r\n <div [class]=\"topSpacingColClass\">\r\n <hr-info-field [labelKey]=\"'TransferAmount'\"\r\n [value]=\"formatAmount(bankInfo.TransferAmount) + ' (' + currencyCode + ')'\"\r\n [labelClass]=\"labelClass\"\r\n [valueClass]=\"valueClass\">\r\n </hr-info-field>\r\n </div>\r\n }\r\n </div>\r\n</div>\r\n}\r\n}@else{\r\n<div [class]=\"emptyStateContainerClass\">\r\n <p [class]=\"emptyStateTextClass\">{{'ThereIsNoBankYet' | HRTranslate}}</p>\r\n</div>\r\n}\r\n" }]
1915
+ args: [{ selector: 'hr-profile-bank-information-widget', standalone: true, imports: [CommonModule, HRTranslatePipe, SkySectionDividerComponent, HRInfoFieldComponent], template: "@if(sectionHeaderVisibility){\r\n<sky-section-divider [fontAwesomeIcon]=\"bankInformationIcon\"\r\n [text]=\"(sectionTitle | HRTranslate|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" }]
1871
1916
  }], ctorParameters: () => [{ type: HRCommonMethodsService }, { type: HRSelfWidgetsService }], propDecorators: { currencyCode: [{
1872
1917
  type: Input
1873
1918
  }], currencyDecimals: [{
@@ -1915,19 +1960,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
1915
1960
  }], language: [{
1916
1961
  type: Input
1917
1962
  }], baseUrl: [{
1918
- type: Input
1963
+ type: Input,
1964
+ args: [{ required: true }]
1919
1965
  }], isLoadingChanged: [{
1920
1966
  type: Output
1921
1967
  }] } });
1922
1968
 
1923
- class PersonalInfoMainWidgetComponent {
1969
+ class ProfilePersonalInfoMainWidgetComponent {
1924
1970
  hrSelfWidgetsService;
1925
1971
  employeePersonalInformation = null;
1972
+ isLoading = true;
1926
1973
  baseUrl = '';
1927
1974
  alternateLanguage = 'English';
1928
1975
  headerIconClass = 'primary-icon-xl';
1929
1976
  headerTextClass = 'mt-2 field-secondary-label-lg';
1930
- headerDividerClass = 'flex-grow-1 mb-3';
1977
+ headerDividerClass = 'flex-grow-1 ms-2';
1931
1978
  rowClass = 'row mt-4';
1932
1979
  columnClass = 'col-md-4 col-6';
1933
1980
  hiddenSpacerColClass = 'col-md-4 col-6 d-md-block d-none';
@@ -1936,6 +1983,8 @@ class PersonalInfoMainWidgetComponent {
1936
1983
  topSpacingBottomSpacingColumnClass = 'col-md-4 col-6 mt-4 mb-5';
1937
1984
  labelClass = 'field-secondary-label-sm';
1938
1985
  valueClass = 'fs-14 fw-medium';
1986
+ emptyStateContainerClass = 'd-flex flex-column justify-content-center align-items-center my-5';
1987
+ emptyStateTextClass = 'field-secondary-label-md';
1939
1988
  mainIcon = faMemoCircleInfo;
1940
1989
  sectionTitle = 'main';
1941
1990
  isLoadingChanged = new EventEmitter();
@@ -1943,29 +1992,33 @@ class PersonalInfoMainWidgetComponent {
1943
1992
  this.hrSelfWidgetsService = hrSelfWidgetsService;
1944
1993
  }
1945
1994
  ngOnInit() {
1946
- if (this.employeePersonalInformation || !this.baseUrl) {
1995
+ if (!this.baseUrl) {
1996
+ this.isLoading = false;
1947
1997
  return;
1948
1998
  }
1949
1999
  this.isLoadingChanged.emit(true);
1950
2000
  this.hrSelfWidgetsService.getPersonalInfoMainDetails(this.baseUrl).subscribe({
1951
2001
  next: (response) => {
2002
+ this.isLoading = false;
1952
2003
  this.isLoadingChanged.emit(false);
1953
2004
  this.employeePersonalInformation = response;
1954
2005
  },
1955
2006
  error: () => {
2007
+ this.isLoading = false;
1956
2008
  this.isLoadingChanged.emit(false);
1957
2009
  this.employeePersonalInformation = null;
1958
2010
  }
1959
2011
  });
1960
2012
  }
1961
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: PersonalInfoMainWidgetComponent, deps: [{ token: HRSelfWidgetsService }], target: i0.ɵɵFactoryTarget.Component });
1962
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: PersonalInfoMainWidgetComponent, isStandalone: true, selector: "hr-personal-info-main-widget", inputs: { baseUrl: "baseUrl", alternateLanguage: "alternateLanguage", headerIconClass: "headerIconClass", headerTextClass: "headerTextClass", headerDividerClass: "headerDividerClass", rowClass: "rowClass", columnClass: "columnClass", hiddenSpacerColClass: "hiddenSpacerColClass", topSpacingColumnClass: "topSpacingColumnClass", topSpacingBottomMdSpacingColumnClass: "topSpacingBottomMdSpacingColumnClass", topSpacingBottomSpacingColumnClass: "topSpacingBottomSpacingColumnClass", labelClass: "labelClass", valueClass: "valueClass", mainIcon: "mainIcon", sectionTitle: "sectionTitle" }, outputs: { isLoadingChanged: "isLoadingChanged" }, ngImport: i0, template: "<sky-section-divider [fontAwesomeIcon]=\"mainIcon\"\r\n [text]=\"(sectionTitle | HRTranslate | uppercase)\"\r\n [iconClass]=\"headerIconClass\"\r\n [textClass]=\"headerTextClass\"\r\n [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n<div [ngClass]=\"rowClass\">\r\n <div [ngClass]=\"columnClass\">\r\n <hr-info-field [labelKey]=\"'Name'\"\r\n [value]=\"employeePersonalInformation?.EmployeeName\"\r\n [labelClass]=\"labelClass\"\r\n [valueClass]=\"valueClass\">\r\n </hr-info-field>\r\n </div>\r\n <div [ngClass]=\"columnClass\">\r\n <div [ngClass]=\"labelClass\">{{'Name' | HRTranslate}} ({{alternateLanguage}})</div>\r\n @if(employeePersonalInformation?.EmployeeNameAltarnate){\r\n <div [ngClass]=\"valueClass\">{{employeePersonalInformation?.EmployeeNameAltarnate}}</div>\r\n }@else{\r\n <div [ngClass]=\"valueClass\">{{'\u2014'}}</div>\r\n }\r\n </div>\r\n\r\n <div [ngClass]=\"hiddenSpacerColClass\"></div>\r\n\r\n <div [ngClass]=\"topSpacingColumnClass\">\r\n <hr-info-field [labelKey]=\"'Nationality'\"\r\n [value]=\"employeePersonalInformation?.NationalityName\"\r\n [labelClass]=\"labelClass\"\r\n [valueClass]=\"valueClass\">\r\n </hr-info-field>\r\n </div>\r\n <div [ngClass]=\"topSpacingColumnClass\">\r\n <hr-info-field [labelKey]=\"'NationalNumber'\"\r\n [value]=\"employeePersonalInformation?.NationalNumber\"\r\n [labelClass]=\"labelClass\"\r\n [valueClass]=\"valueClass\">\r\n </hr-info-field>\r\n </div>\r\n <div [ngClass]=\"topSpacingColumnClass\">\r\n <hr-info-field [labelKey]=\"'SocialSecurityNumber'\"\r\n [value]=\"employeePersonalInformation?.SocialSecurityNumber\"\r\n [labelClass]=\"labelClass\"\r\n [valueClass]=\"valueClass\">\r\n </hr-info-field>\r\n </div>\r\n\r\n <div [ngClass]=\"topSpacingColumnClass\">\r\n <hr-info-field [labelKey]=\"'MaritalStatus'\"\r\n [value]=\"employeePersonalInformation?.MaritalStateName\"\r\n [labelClass]=\"labelClass\"\r\n [valueClass]=\"valueClass\">\r\n </hr-info-field>\r\n </div>\r\n <div [ngClass]=\"topSpacingColumnClass\">\r\n <hr-info-field [labelKey]=\"'BirthDate'\"\r\n [value]=\"employeePersonalInformation?.BirthDate ? (employeePersonalInformation?.BirthDate | date: 'dd/MM/yyyy') : null\"\r\n [labelClass]=\"labelClass\"\r\n [valueClass]=\"valueClass\">\r\n </hr-info-field>\r\n </div>\r\n <div [ngClass]=\"topSpacingColumnClass\">\r\n <hr-info-field [labelKey]=\"'BirthPlace'\"\r\n [value]=\"employeePersonalInformation?.BirthPlace\"\r\n [labelClass]=\"labelClass\"\r\n [valueClass]=\"valueClass\">\r\n </hr-info-field>\r\n </div>\r\n\r\n <div [ngClass]=\"topSpacingBottomMdSpacingColumnClass\">\r\n <hr-info-field [labelKey]=\"'BloodType'\"\r\n [value]=\"employeePersonalInformation?.BloodTypeCode\"\r\n [labelClass]=\"labelClass\"\r\n [valueClass]=\"valueClass\">\r\n </hr-info-field>\r\n </div>\r\n <div [ngClass]=\"topSpacingBottomMdSpacingColumnClass\">\r\n <hr-info-field [labelKey]=\"'Religion'\"\r\n [value]=\"employeePersonalInformation?.ReligionName\"\r\n [labelClass]=\"labelClass\"\r\n [valueClass]=\"valueClass\">\r\n </hr-info-field>\r\n </div>\r\n <div [ngClass]=\"topSpacingBottomSpacingColumnClass\">\r\n <hr-info-field [labelKey]=\"'MinistryOfLaborNumber'\"\r\n [value]=\"employeePersonalInformation?.MinistryOfLaborNumber\"\r\n [labelClass]=\"labelClass\"\r\n [valueClass]=\"valueClass\">\r\n </hr-info-field>\r\n </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i2$1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i2$1.DatePipe, name: "date" }, { kind: "pipe", type: HRTranslatePipe, name: "HRTranslate" }, { kind: "component", type: SkySectionDividerComponent, selector: "sky-section-divider", inputs: ["text", "fontAwesomeIcon", "textClass", "dividerClass", "iconClass"] }, { kind: "component", type: HRInfoFieldComponent, selector: "hr-info-field", inputs: ["labelKey", "value", "labelClass", "valueClass", "fallbackValue"] }] });
2013
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ProfilePersonalInfoMainWidgetComponent, deps: [{ token: HRSelfWidgetsService }], target: i0.ɵɵFactoryTarget.Component });
2014
+ 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" }, 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.EmployeeNameAltarnate){\r\n <div [ngClass]=\"valueClass\">{{employeePersonalInformation.EmployeeNameAltarnate}}</div>\r\n }@else{\r\n <div [ngClass]=\"valueClass\">{{'\u2014'}}</div>\r\n }\r\n </div>\r\n\r\n <div [ngClass]=\"hiddenSpacerColClass\"></div>\r\n\r\n <div [ngClass]=\"topSpacingColumnClass\">\r\n <hr-info-field [labelKey]=\"'Nationality'\"\r\n [value]=\"employeePersonalInformation.NationalityName\"\r\n [labelClass]=\"labelClass\"\r\n [valueClass]=\"valueClass\">\r\n </hr-info-field>\r\n </div>\r\n <div [ngClass]=\"topSpacingColumnClass\">\r\n <hr-info-field [labelKey]=\"'NationalNumber'\"\r\n [value]=\"employeePersonalInformation.NationalNumber\"\r\n [labelClass]=\"labelClass\"\r\n [valueClass]=\"valueClass\">\r\n </hr-info-field>\r\n </div>\r\n <div [ngClass]=\"topSpacingColumnClass\">\r\n <hr-info-field [labelKey]=\"'SocialSecurityNumber'\"\r\n [value]=\"employeePersonalInformation.SocialSecurityNumber\"\r\n [labelClass]=\"labelClass\"\r\n [valueClass]=\"valueClass\">\r\n </hr-info-field>\r\n </div>\r\n\r\n <div [ngClass]=\"topSpacingColumnClass\">\r\n <hr-info-field [labelKey]=\"'MaritalStatus'\"\r\n [value]=\"employeePersonalInformation.MaritalStateName\"\r\n [labelClass]=\"labelClass\"\r\n [valueClass]=\"valueClass\">\r\n </hr-info-field>\r\n </div>\r\n <div [ngClass]=\"topSpacingColumnClass\">\r\n <hr-info-field [labelKey]=\"'BirthDate'\"\r\n [value]=\"employeePersonalInformation.BirthDate ? (employeePersonalInformation.BirthDate | date: 'dd/MM/yyyy') : null\"\r\n [labelClass]=\"labelClass\"\r\n [valueClass]=\"valueClass\">\r\n </hr-info-field>\r\n </div>\r\n <div [ngClass]=\"topSpacingColumnClass\">\r\n <hr-info-field [labelKey]=\"'BirthPlace'\"\r\n [value]=\"employeePersonalInformation.BirthPlace\"\r\n [labelClass]=\"labelClass\"\r\n [valueClass]=\"valueClass\">\r\n </hr-info-field>\r\n </div>\r\n\r\n <div [ngClass]=\"topSpacingBottomMdSpacingColumnClass\">\r\n <hr-info-field [labelKey]=\"'BloodType'\"\r\n [value]=\"employeePersonalInformation.BloodTypeCode\"\r\n [labelClass]=\"labelClass\"\r\n [valueClass]=\"valueClass\">\r\n </hr-info-field>\r\n </div>\r\n <div [ngClass]=\"topSpacingBottomMdSpacingColumnClass\">\r\n <hr-info-field [labelKey]=\"'Religion'\"\r\n [value]=\"employeePersonalInformation.ReligionName\"\r\n [labelClass]=\"labelClass\"\r\n [valueClass]=\"valueClass\">\r\n </hr-info-field>\r\n </div>\r\n <div [ngClass]=\"topSpacingBottomSpacingColumnClass\">\r\n <hr-info-field [labelKey]=\"'MinistryOfLaborNumber'\"\r\n [value]=\"employeePersonalInformation.MinistryOfLaborNumber\"\r\n [labelClass]=\"labelClass\"\r\n [valueClass]=\"valueClass\">\r\n </hr-info-field>\r\n </div>\r\n</div>\r\n}@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"] }] });
1963
2015
  }
1964
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: PersonalInfoMainWidgetComponent, decorators: [{
2016
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ProfilePersonalInfoMainWidgetComponent, decorators: [{
1965
2017
  type: Component,
1966
- args: [{ selector: 'hr-personal-info-main-widget', standalone: true, imports: [CommonModule, HRTranslatePipe, SkySectionDividerComponent, HRInfoFieldComponent], template: "<sky-section-divider [fontAwesomeIcon]=\"mainIcon\"\r\n [text]=\"(sectionTitle | HRTranslate | uppercase)\"\r\n [iconClass]=\"headerIconClass\"\r\n [textClass]=\"headerTextClass\"\r\n [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n<div [ngClass]=\"rowClass\">\r\n <div [ngClass]=\"columnClass\">\r\n <hr-info-field [labelKey]=\"'Name'\"\r\n [value]=\"employeePersonalInformation?.EmployeeName\"\r\n [labelClass]=\"labelClass\"\r\n [valueClass]=\"valueClass\">\r\n </hr-info-field>\r\n </div>\r\n <div [ngClass]=\"columnClass\">\r\n <div [ngClass]=\"labelClass\">{{'Name' | HRTranslate}} ({{alternateLanguage}})</div>\r\n @if(employeePersonalInformation?.EmployeeNameAltarnate){\r\n <div [ngClass]=\"valueClass\">{{employeePersonalInformation?.EmployeeNameAltarnate}}</div>\r\n }@else{\r\n <div [ngClass]=\"valueClass\">{{'\u2014'}}</div>\r\n }\r\n </div>\r\n\r\n <div [ngClass]=\"hiddenSpacerColClass\"></div>\r\n\r\n <div [ngClass]=\"topSpacingColumnClass\">\r\n <hr-info-field [labelKey]=\"'Nationality'\"\r\n [value]=\"employeePersonalInformation?.NationalityName\"\r\n [labelClass]=\"labelClass\"\r\n [valueClass]=\"valueClass\">\r\n </hr-info-field>\r\n </div>\r\n <div [ngClass]=\"topSpacingColumnClass\">\r\n <hr-info-field [labelKey]=\"'NationalNumber'\"\r\n [value]=\"employeePersonalInformation?.NationalNumber\"\r\n [labelClass]=\"labelClass\"\r\n [valueClass]=\"valueClass\">\r\n </hr-info-field>\r\n </div>\r\n <div [ngClass]=\"topSpacingColumnClass\">\r\n <hr-info-field [labelKey]=\"'SocialSecurityNumber'\"\r\n [value]=\"employeePersonalInformation?.SocialSecurityNumber\"\r\n [labelClass]=\"labelClass\"\r\n [valueClass]=\"valueClass\">\r\n </hr-info-field>\r\n </div>\r\n\r\n <div [ngClass]=\"topSpacingColumnClass\">\r\n <hr-info-field [labelKey]=\"'MaritalStatus'\"\r\n [value]=\"employeePersonalInformation?.MaritalStateName\"\r\n [labelClass]=\"labelClass\"\r\n [valueClass]=\"valueClass\">\r\n </hr-info-field>\r\n </div>\r\n <div [ngClass]=\"topSpacingColumnClass\">\r\n <hr-info-field [labelKey]=\"'BirthDate'\"\r\n [value]=\"employeePersonalInformation?.BirthDate ? (employeePersonalInformation?.BirthDate | date: 'dd/MM/yyyy') : null\"\r\n [labelClass]=\"labelClass\"\r\n [valueClass]=\"valueClass\">\r\n </hr-info-field>\r\n </div>\r\n <div [ngClass]=\"topSpacingColumnClass\">\r\n <hr-info-field [labelKey]=\"'BirthPlace'\"\r\n [value]=\"employeePersonalInformation?.BirthPlace\"\r\n [labelClass]=\"labelClass\"\r\n [valueClass]=\"valueClass\">\r\n </hr-info-field>\r\n </div>\r\n\r\n <div [ngClass]=\"topSpacingBottomMdSpacingColumnClass\">\r\n <hr-info-field [labelKey]=\"'BloodType'\"\r\n [value]=\"employeePersonalInformation?.BloodTypeCode\"\r\n [labelClass]=\"labelClass\"\r\n [valueClass]=\"valueClass\">\r\n </hr-info-field>\r\n </div>\r\n <div [ngClass]=\"topSpacingBottomMdSpacingColumnClass\">\r\n <hr-info-field [labelKey]=\"'Religion'\"\r\n [value]=\"employeePersonalInformation?.ReligionName\"\r\n [labelClass]=\"labelClass\"\r\n [valueClass]=\"valueClass\">\r\n </hr-info-field>\r\n </div>\r\n <div [ngClass]=\"topSpacingBottomSpacingColumnClass\">\r\n <hr-info-field [labelKey]=\"'MinistryOfLaborNumber'\"\r\n [value]=\"employeePersonalInformation?.MinistryOfLaborNumber\"\r\n [labelClass]=\"labelClass\"\r\n [valueClass]=\"valueClass\">\r\n </hr-info-field>\r\n </div>\r\n</div>\r\n" }]
2018
+ 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.EmployeeNameAltarnate){\r\n <div [ngClass]=\"valueClass\">{{employeePersonalInformation.EmployeeNameAltarnate}}</div>\r\n }@else{\r\n <div [ngClass]=\"valueClass\">{{'\u2014'}}</div>\r\n }\r\n </div>\r\n\r\n <div [ngClass]=\"hiddenSpacerColClass\"></div>\r\n\r\n <div [ngClass]=\"topSpacingColumnClass\">\r\n <hr-info-field [labelKey]=\"'Nationality'\"\r\n [value]=\"employeePersonalInformation.NationalityName\"\r\n [labelClass]=\"labelClass\"\r\n [valueClass]=\"valueClass\">\r\n </hr-info-field>\r\n </div>\r\n <div [ngClass]=\"topSpacingColumnClass\">\r\n <hr-info-field [labelKey]=\"'NationalNumber'\"\r\n [value]=\"employeePersonalInformation.NationalNumber\"\r\n [labelClass]=\"labelClass\"\r\n [valueClass]=\"valueClass\">\r\n </hr-info-field>\r\n </div>\r\n <div [ngClass]=\"topSpacingColumnClass\">\r\n <hr-info-field [labelKey]=\"'SocialSecurityNumber'\"\r\n [value]=\"employeePersonalInformation.SocialSecurityNumber\"\r\n [labelClass]=\"labelClass\"\r\n [valueClass]=\"valueClass\">\r\n </hr-info-field>\r\n </div>\r\n\r\n <div [ngClass]=\"topSpacingColumnClass\">\r\n <hr-info-field [labelKey]=\"'MaritalStatus'\"\r\n [value]=\"employeePersonalInformation.MaritalStateName\"\r\n [labelClass]=\"labelClass\"\r\n [valueClass]=\"valueClass\">\r\n </hr-info-field>\r\n </div>\r\n <div [ngClass]=\"topSpacingColumnClass\">\r\n <hr-info-field [labelKey]=\"'BirthDate'\"\r\n [value]=\"employeePersonalInformation.BirthDate ? (employeePersonalInformation.BirthDate | date: 'dd/MM/yyyy') : null\"\r\n [labelClass]=\"labelClass\"\r\n [valueClass]=\"valueClass\">\r\n </hr-info-field>\r\n </div>\r\n <div [ngClass]=\"topSpacingColumnClass\">\r\n <hr-info-field [labelKey]=\"'BirthPlace'\"\r\n [value]=\"employeePersonalInformation.BirthPlace\"\r\n [labelClass]=\"labelClass\"\r\n [valueClass]=\"valueClass\">\r\n </hr-info-field>\r\n </div>\r\n\r\n <div [ngClass]=\"topSpacingBottomMdSpacingColumnClass\">\r\n <hr-info-field [labelKey]=\"'BloodType'\"\r\n [value]=\"employeePersonalInformation.BloodTypeCode\"\r\n [labelClass]=\"labelClass\"\r\n [valueClass]=\"valueClass\">\r\n </hr-info-field>\r\n </div>\r\n <div [ngClass]=\"topSpacingBottomMdSpacingColumnClass\">\r\n <hr-info-field [labelKey]=\"'Religion'\"\r\n [value]=\"employeePersonalInformation.ReligionName\"\r\n [labelClass]=\"labelClass\"\r\n [valueClass]=\"valueClass\">\r\n </hr-info-field>\r\n </div>\r\n <div [ngClass]=\"topSpacingBottomSpacingColumnClass\">\r\n <hr-info-field [labelKey]=\"'MinistryOfLaborNumber'\"\r\n [value]=\"employeePersonalInformation.MinistryOfLaborNumber\"\r\n [labelClass]=\"labelClass\"\r\n [valueClass]=\"valueClass\">\r\n </hr-info-field>\r\n </div>\r\n</div>\r\n}@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" }]
1967
2019
  }], ctorParameters: () => [{ type: HRSelfWidgetsService }], propDecorators: { baseUrl: [{
1968
- type: Input
2020
+ type: Input,
2021
+ args: [{ required: true }]
1969
2022
  }], alternateLanguage: [{
1970
2023
  type: Input
1971
2024
  }], headerIconClass: [{
@@ -1990,6 +2043,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
1990
2043
  type: Input
1991
2044
  }], valueClass: [{
1992
2045
  type: Input
2046
+ }], emptyStateContainerClass: [{
2047
+ type: Input
2048
+ }], emptyStateTextClass: [{
2049
+ type: Input
1993
2050
  }], mainIcon: [{
1994
2051
  type: Input
1995
2052
  }], sectionTitle: [{
@@ -1998,13 +2055,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
1998
2055
  type: Output
1999
2056
  }] } });
2000
2057
 
2001
- class PersonalInfoContactWidgetComponent {
2058
+ class ProfilePersonalInfoContactWidgetComponent {
2002
2059
  hrSelfWidgetsService;
2003
2060
  employeePersonalInfoContactDetails = null;
2061
+ isLoading = true;
2004
2062
  baseUrl = '';
2005
2063
  headerIconClass = 'primary-icon-xl';
2006
2064
  headerTextClass = 'fs-16 mt-2 text-secondary';
2007
- headerDividerClass = 'flex-grow-1 mb-3';
2065
+ headerDividerClass = 'flex-grow-1 ms-2';
2008
2066
  rowClass = 'row mt-4';
2009
2067
  columnClass = 'col-md-4 col-6';
2010
2068
  responsiveTopSpacingColumnClass = 'col-md-4 col-6 mt-md-0 mt-4';
@@ -2012,38 +2070,46 @@ class PersonalInfoContactWidgetComponent {
2012
2070
  topSpacingBottomSpacingColumnClass = 'col-md-4 col-6 mt-4 mb-5';
2013
2071
  labelClass = 'field-secondary-label-sm';
2014
2072
  valueClass = 'fs-14 fw-medium';
2015
- emergencyContactLabelClass = 'fs-16 fw-medium';
2073
+ emergencyContactLabelClass = 'fs-14 fw-semi-bold';
2074
+ emptyStateContainerClass = 'd-flex flex-column justify-content-center align-items-center my-5';
2075
+ emptyStateTextClass = 'field-secondary-label-md';
2016
2076
  contactIcon = faPhone;
2077
+ emergencyContactIcon = faBolt;
2017
2078
  sectionTitle = "contact";
2018
2079
  showEmergencyContact = true;
2080
+ emergencyContactRowClass = 'row mt-3 mb-4';
2019
2081
  isLoadingChanged = new EventEmitter();
2020
2082
  constructor(hrSelfWidgetsService) {
2021
2083
  this.hrSelfWidgetsService = hrSelfWidgetsService;
2022
2084
  }
2023
2085
  ngOnInit() {
2024
- if (this.employeePersonalInfoContactDetails || !this.baseUrl) {
2086
+ if (!this.baseUrl) {
2087
+ this.isLoading = false;
2025
2088
  return;
2026
2089
  }
2027
2090
  this.isLoadingChanged.emit(true);
2028
2091
  this.hrSelfWidgetsService.getPersonalInfoContactDetails(this.baseUrl).subscribe({
2029
2092
  next: (response) => {
2093
+ this.isLoading = false;
2030
2094
  this.isLoadingChanged.emit(false);
2031
2095
  this.employeePersonalInfoContactDetails = response;
2032
2096
  },
2033
2097
  error: () => {
2098
+ this.isLoading = false;
2034
2099
  this.isLoadingChanged.emit(false);
2035
2100
  this.employeePersonalInfoContactDetails = null;
2036
2101
  }
2037
2102
  });
2038
2103
  }
2039
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: PersonalInfoContactWidgetComponent, deps: [{ token: HRSelfWidgetsService }], target: i0.ɵɵFactoryTarget.Component });
2040
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: PersonalInfoContactWidgetComponent, isStandalone: true, selector: "hr-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", contactIcon: "contactIcon", sectionTitle: "sectionTitle", showEmergencyContact: "showEmergencyContact" }, outputs: { isLoadingChanged: "isLoadingChanged" }, ngImport: i0, template: "<sky-section-divider [fontAwesomeIcon]=\"contactIcon\"\r\n [text]=\"(sectionTitle | HRTranslate|uppercase)\"\r\n [iconClass]=\"headerIconClass\"\r\n [textClass]=\"headerTextClass\"\r\n [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n<div [ngClass]=\"rowClass\">\r\n <div [ngClass]=\"columnClass\">\r\n <hr-info-field [labelKey]=\"'MobileNumber'\"\r\n [value]=\"employeePersonalInfoContactDetails?.MobileNumber\"\r\n [labelClass]=\"labelClass\"\r\n [valueClass]=\"valueClass\">\r\n </hr-info-field>\r\n </div>\r\n <div [ngClass]=\"columnClass\">\r\n <hr-info-field [labelKey]=\"'HomePhone'\"\r\n [value]=\"employeePersonalInfoContactDetails?.HomePhone\"\r\n [labelClass]=\"labelClass\"\r\n [valueClass]=\"valueClass\">\r\n </hr-info-field>\r\n </div>\r\n \r\n <div [ngClass]=\"responsiveTopSpacingColumnClass\">\r\n <hr-info-field [labelKey]=\"'Email'\"\r\n [value]=\"employeePersonalInfoContactDetails?.Email\"\r\n [labelClass]=\"labelClass\"\r\n [valueClass]=\"valueClass\">\r\n </hr-info-field>\r\n </div>\r\n</div>\r\n@if(showEmergencyContact)\r\n{\r\n<div [ngClass]=\"rowClass\">\r\n <div class=\"col-12\">\r\n <div [ngClass]=\"emergencyContactLabelClass\">{{'EmergencyContact' | HRTranslate}}</div>\r\n </div>\r\n</div>\r\n<div [ngClass]=\"rowClass\">\r\n <div [ngClass]=\"columnClass\">\r\n <hr-info-field [labelKey]=\"'Name'\"\r\n [value]=\"employeePersonalInfoContactDetails?.EmergencyContact?.Name || employeePersonalInfoContactDetails?.EmergencyContactLegacy\"\r\n [labelClass]=\"labelClass\"\r\n [valueClass]=\"valueClass\">\r\n </hr-info-field>\r\n </div>\r\n <div [ngClass]=\"columnClass\">\r\n <hr-info-field [labelKey]=\"'Relation'\"\r\n [value]=\"employeePersonalInfoContactDetails?.EmergencyContact?.Relation\"\r\n [labelClass]=\"labelClass\"\r\n [valueClass]=\"valueClass\">\r\n </hr-info-field>\r\n </div>\r\n <div [ngClass]=\"responsiveTopSpacingColumnClass\">\r\n <hr-info-field [labelKey]=\"'Phone'\"\r\n [value]=\"employeePersonalInfoContactDetails?.EmergencyContact?.PhoneNumber\"\r\n [labelClass]=\"labelClass\"\r\n [valueClass]=\"valueClass\">\r\n </hr-info-field>\r\n </div>\r\n</div>\r\n}", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i2$1.UpperCasePipe, name: "uppercase" }, { kind: "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"] }] });
2104
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ProfilePersonalInfoContactWidgetComponent, deps: [{ token: HRSelfWidgetsService }], target: i0.ɵɵFactoryTarget.Component });
2105
+ 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" }, 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"] }] });
2041
2106
  }
2042
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: PersonalInfoContactWidgetComponent, decorators: [{
2107
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ProfilePersonalInfoContactWidgetComponent, decorators: [{
2043
2108
  type: Component,
2044
- args: [{ selector: 'hr-personal-info-contact-widget', standalone: true, imports: [CommonModule, HRTranslatePipe, SkySectionDividerComponent, HRInfoFieldComponent], template: "<sky-section-divider [fontAwesomeIcon]=\"contactIcon\"\r\n [text]=\"(sectionTitle | HRTranslate|uppercase)\"\r\n [iconClass]=\"headerIconClass\"\r\n [textClass]=\"headerTextClass\"\r\n [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n<div [ngClass]=\"rowClass\">\r\n <div [ngClass]=\"columnClass\">\r\n <hr-info-field [labelKey]=\"'MobileNumber'\"\r\n [value]=\"employeePersonalInfoContactDetails?.MobileNumber\"\r\n [labelClass]=\"labelClass\"\r\n [valueClass]=\"valueClass\">\r\n </hr-info-field>\r\n </div>\r\n <div [ngClass]=\"columnClass\">\r\n <hr-info-field [labelKey]=\"'HomePhone'\"\r\n [value]=\"employeePersonalInfoContactDetails?.HomePhone\"\r\n [labelClass]=\"labelClass\"\r\n [valueClass]=\"valueClass\">\r\n </hr-info-field>\r\n </div>\r\n \r\n <div [ngClass]=\"responsiveTopSpacingColumnClass\">\r\n <hr-info-field [labelKey]=\"'Email'\"\r\n [value]=\"employeePersonalInfoContactDetails?.Email\"\r\n [labelClass]=\"labelClass\"\r\n [valueClass]=\"valueClass\">\r\n </hr-info-field>\r\n </div>\r\n</div>\r\n@if(showEmergencyContact)\r\n{\r\n<div [ngClass]=\"rowClass\">\r\n <div class=\"col-12\">\r\n <div [ngClass]=\"emergencyContactLabelClass\">{{'EmergencyContact' | HRTranslate}}</div>\r\n </div>\r\n</div>\r\n<div [ngClass]=\"rowClass\">\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}" }]
2109
+ 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}" }]
2045
2110
  }], ctorParameters: () => [{ type: HRSelfWidgetsService }], propDecorators: { baseUrl: [{
2046
- type: Input
2111
+ type: Input,
2112
+ args: [{ required: true }]
2047
2113
  }], headerIconClass: [{
2048
2114
  type: Input
2049
2115
  }], headerTextClass: [{
@@ -2066,29 +2132,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
2066
2132
  type: Input
2067
2133
  }], emergencyContactLabelClass: [{
2068
2134
  type: Input
2135
+ }], emptyStateContainerClass: [{
2136
+ type: Input
2137
+ }], emptyStateTextClass: [{
2138
+ type: Input
2069
2139
  }], contactIcon: [{
2070
2140
  type: Input
2141
+ }], emergencyContactIcon: [{
2142
+ type: Input
2071
2143
  }], sectionTitle: [{
2072
2144
  type: Input
2073
2145
  }], showEmergencyContact: [{
2074
2146
  type: Input
2147
+ }], emergencyContactRowClass: [{
2148
+ type: Input
2075
2149
  }], isLoadingChanged: [{
2076
2150
  type: Output
2077
2151
  }] } });
2078
2152
 
2079
- class PersonalInfoAddressWidgetComponent {
2153
+ class ProfilePersonalInfoAddressWidgetComponent {
2080
2154
  hrSelfWidgetsService;
2081
2155
  personalInfoAddressDetails = null;
2156
+ isLoading = true;
2082
2157
  baseUrl = '';
2083
2158
  headerIconClass = 'primary-icon-xl';
2084
2159
  headerTextClass = 'fs-16 mt-2 text-secondary';
2085
- headerDividerClass = 'flex-grow-1 mb-3';
2160
+ headerDividerClass = 'flex-grow-1 ms-2';
2086
2161
  rowClass = 'row mt-4';
2087
2162
  columnClass = 'col-md-4 col-6';
2088
2163
  responsiveTopSpacingColumnClass = 'col-md-4 col-6 mt-md-0 mt-4';
2089
2164
  topSpacingBottomSpacingColumnClass = 'col-md-4 col-6 mt-4 mb-5';
2090
2165
  labelClass = 'field-secondary-label-sm';
2091
2166
  valueClass = 'fs-14 fw-medium';
2167
+ emptyStateContainerClass = 'd-flex flex-column justify-content-center align-items-center my-5';
2168
+ emptyStateTextClass = 'field-secondary-label-md';
2092
2169
  addressIcon = faHouse;
2093
2170
  sectionTitle = 'address';
2094
2171
  isLoadingChanged = new EventEmitter();
@@ -2096,29 +2173,33 @@ class PersonalInfoAddressWidgetComponent {
2096
2173
  this.hrSelfWidgetsService = hrSelfWidgetsService;
2097
2174
  }
2098
2175
  ngOnInit() {
2099
- if (this.personalInfoAddressDetails || !this.baseUrl) {
2176
+ if (!this.baseUrl) {
2177
+ this.isLoading = false;
2100
2178
  return;
2101
2179
  }
2102
2180
  this.isLoadingChanged.emit(true);
2103
2181
  this.hrSelfWidgetsService.getPersonalInfoAddressDetails(this.baseUrl).subscribe({
2104
2182
  next: (response) => {
2183
+ this.isLoading = false;
2105
2184
  this.isLoadingChanged.emit(false);
2106
2185
  this.personalInfoAddressDetails = response;
2107
2186
  },
2108
2187
  error: () => {
2188
+ this.isLoading = false;
2109
2189
  this.isLoadingChanged.emit(false);
2110
2190
  this.personalInfoAddressDetails = null;
2111
2191
  }
2112
2192
  });
2113
2193
  }
2114
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: PersonalInfoAddressWidgetComponent, deps: [{ token: HRSelfWidgetsService }], target: i0.ɵɵFactoryTarget.Component });
2115
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: PersonalInfoAddressWidgetComponent, isStandalone: true, selector: "hr-personal-info-address-widget", inputs: { baseUrl: "baseUrl", headerIconClass: "headerIconClass", headerTextClass: "headerTextClass", headerDividerClass: "headerDividerClass", rowClass: "rowClass", columnClass: "columnClass", responsiveTopSpacingColumnClass: "responsiveTopSpacingColumnClass", topSpacingBottomSpacingColumnClass: "topSpacingBottomSpacingColumnClass", labelClass: "labelClass", valueClass: "valueClass", addressIcon: "addressIcon", sectionTitle: "sectionTitle" }, outputs: { isLoadingChanged: "isLoadingChanged" }, ngImport: i0, template: "<sky-section-divider [fontAwesomeIcon]=\"addressIcon\"\r\n [text]=\"( sectionTitle | HRTranslate | uppercase )\"\r\n [iconClass]=\"headerIconClass\"\r\n [textClass]=\"headerTextClass\"\r\n [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n<div [ngClass]=\"rowClass\">\r\n <div [ngClass]=\"columnClass\">\r\n <hr-info-field [labelKey]=\"'Address'\"\r\n [value]=\"personalInfoAddressDetails?.Address\"\r\n [labelClass]=\"labelClass\"\r\n [valueClass]=\"valueClass\">\r\n </hr-info-field>\r\n </div>\r\n\r\n <div [ngClass]=\"columnClass\">\r\n <hr-info-field [labelKey]=\"'City'\"\r\n [value]=\"personalInfoAddressDetails?.City\"\r\n [labelClass]=\"labelClass\"\r\n [valueClass]=\"valueClass\">\r\n </hr-info-field>\r\n </div>\r\n\r\n <div [ngClass]=\"responsiveTopSpacingColumnClass\">\r\n <hr-info-field [labelKey]=\"'P.OBox'\"\r\n [value]=\"personalInfoAddressDetails?.POBox\"\r\n [labelClass]=\"labelClass\"\r\n [valueClass]=\"valueClass\">\r\n </hr-info-field>\r\n </div>\r\n\r\n <div [ngClass]=\"topSpacingBottomSpacingColumnClass\">\r\n <hr-info-field [labelKey]=\"'PostalCode'\"\r\n [value]=\"personalInfoAddressDetails?.PostalCode\"\r\n [labelClass]=\"labelClass\"\r\n [valueClass]=\"valueClass\">\r\n </hr-info-field>\r\n </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i2$1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: HRTranslatePipe, name: "HRTranslate" }, { kind: "component", type: SkySectionDividerComponent, selector: "sky-section-divider", inputs: ["text", "fontAwesomeIcon", "textClass", "dividerClass", "iconClass"] }, { kind: "component", type: HRInfoFieldComponent, selector: "hr-info-field", inputs: ["labelKey", "value", "labelClass", "valueClass", "fallbackValue"] }] });
2194
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ProfilePersonalInfoAddressWidgetComponent, deps: [{ token: HRSelfWidgetsService }], target: i0.ɵɵFactoryTarget.Component });
2195
+ 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" }, 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"] }] });
2116
2196
  }
2117
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: PersonalInfoAddressWidgetComponent, decorators: [{
2197
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ProfilePersonalInfoAddressWidgetComponent, decorators: [{
2118
2198
  type: Component,
2119
- args: [{ selector: 'hr-personal-info-address-widget', standalone: true, imports: [CommonModule, HRTranslatePipe, SkySectionDividerComponent, HRInfoFieldComponent], template: "<sky-section-divider [fontAwesomeIcon]=\"addressIcon\"\r\n [text]=\"( sectionTitle | HRTranslate | uppercase )\"\r\n [iconClass]=\"headerIconClass\"\r\n [textClass]=\"headerTextClass\"\r\n [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n<div [ngClass]=\"rowClass\">\r\n <div [ngClass]=\"columnClass\">\r\n <hr-info-field [labelKey]=\"'Address'\"\r\n [value]=\"personalInfoAddressDetails?.Address\"\r\n [labelClass]=\"labelClass\"\r\n [valueClass]=\"valueClass\">\r\n </hr-info-field>\r\n </div>\r\n\r\n <div [ngClass]=\"columnClass\">\r\n <hr-info-field [labelKey]=\"'City'\"\r\n [value]=\"personalInfoAddressDetails?.City\"\r\n [labelClass]=\"labelClass\"\r\n [valueClass]=\"valueClass\">\r\n </hr-info-field>\r\n </div>\r\n\r\n <div [ngClass]=\"responsiveTopSpacingColumnClass\">\r\n <hr-info-field [labelKey]=\"'P.OBox'\"\r\n [value]=\"personalInfoAddressDetails?.POBox\"\r\n [labelClass]=\"labelClass\"\r\n [valueClass]=\"valueClass\">\r\n </hr-info-field>\r\n </div>\r\n\r\n <div [ngClass]=\"topSpacingBottomSpacingColumnClass\">\r\n <hr-info-field [labelKey]=\"'PostalCode'\"\r\n [value]=\"personalInfoAddressDetails?.PostalCode\"\r\n [labelClass]=\"labelClass\"\r\n [valueClass]=\"valueClass\">\r\n </hr-info-field>\r\n </div>\r\n</div>\r\n" }]
2199
+ 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" }]
2120
2200
  }], ctorParameters: () => [{ type: HRSelfWidgetsService }], propDecorators: { baseUrl: [{
2121
- type: Input
2201
+ type: Input,
2202
+ args: [{ required: true }]
2122
2203
  }], headerIconClass: [{
2123
2204
  type: Input
2124
2205
  }], headerTextClass: [{
@@ -2137,6 +2218,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
2137
2218
  type: Input
2138
2219
  }], valueClass: [{
2139
2220
  type: Input
2221
+ }], emptyStateContainerClass: [{
2222
+ type: Input
2223
+ }], emptyStateTextClass: [{
2224
+ type: Input
2140
2225
  }], addressIcon: [{
2141
2226
  type: Input
2142
2227
  }], sectionTitle: [{
@@ -2145,14 +2230,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
2145
2230
  type: Output
2146
2231
  }] } });
2147
2232
 
2148
- class PersonalInfoLanguagesWidgetComponent {
2233
+ class ProfilePersonalInfoLanguagesWidgetComponent {
2149
2234
  hrSelfWidgetsService;
2150
2235
  languages = null;
2236
+ isLoading = true;
2151
2237
  baseUrl = '';
2152
2238
  headerIconClass = 'primary-icon-xl';
2153
2239
  headerTextClass = 'fs-16 mt-2 text-secondary';
2154
- headerDividerClass = 'flex-grow-1 mb-3';
2240
+ headerDividerClass = 'flex-grow-1 ms-2';
2155
2241
  contentTextClass = 'text-dark-gray fs-14 fw-medium mt-4';
2242
+ emptyStateContainerClass = 'd-flex flex-column justify-content-center align-items-center my-5';
2243
+ emptyStateTextClass = 'field-secondary-label-md';
2156
2244
  hasDataChange = new EventEmitter();
2157
2245
  languagesIcon = faLanguage;
2158
2246
  sectionTitle = "languages";
@@ -2161,18 +2249,21 @@ class PersonalInfoLanguagesWidgetComponent {
2161
2249
  this.hrSelfWidgetsService = hrSelfWidgetsService;
2162
2250
  }
2163
2251
  ngOnInit() {
2164
- if (this.languages || !this.baseUrl) {
2252
+ if (!this.baseUrl) {
2253
+ this.isLoading = false;
2165
2254
  this.emitHasData();
2166
2255
  return;
2167
2256
  }
2168
2257
  this.isLoadingChanged.emit(true);
2169
2258
  this.hrSelfWidgetsService.getPersonalInfoLanguages(this.baseUrl).subscribe({
2170
2259
  next: (response) => {
2260
+ this.isLoading = false;
2171
2261
  this.isLoadingChanged.emit(false);
2172
2262
  this.languages = response ?? [];
2173
2263
  this.emitHasData();
2174
2264
  },
2175
2265
  error: () => {
2266
+ this.isLoading = false;
2176
2267
  this.languages = [];
2177
2268
  this.emitHasData();
2178
2269
  this.isLoadingChanged.emit(false);
@@ -2185,12 +2276,12 @@ class PersonalInfoLanguagesWidgetComponent {
2185
2276
  getLanguages() {
2186
2277
  return this.languages?.join(', ') || '-';
2187
2278
  }
2188
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: PersonalInfoLanguagesWidgetComponent, deps: [{ token: HRSelfWidgetsService }], target: i0.ɵɵFactoryTarget.Component });
2189
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: PersonalInfoLanguagesWidgetComponent, isStandalone: true, selector: "hr-personal-info-languages-widget", inputs: { baseUrl: "baseUrl", headerIconClass: "headerIconClass", headerTextClass: "headerTextClass", headerDividerClass: "headerDividerClass", contentTextClass: "contentTextClass", languagesIcon: "languagesIcon", sectionTitle: "sectionTitle" }, outputs: { hasDataChange: "hasDataChange", isLoadingChanged: "isLoadingChanged" }, ngImport: i0, template: "<sky-section-divider [fontAwesomeIcon]=\"languagesIcon\"\r\n [text]=\"(sectionTitle | HRTranslate | uppercase)\"\r\n [iconClass]=\"headerIconClass\"\r\n [textClass]=\"headerTextClass\"\r\n [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n<div [ngClass]=\"contentTextClass\">\r\n {{getLanguages()}}\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i2$1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: HRTranslatePipe, name: "HRTranslate" }, { kind: "component", type: SkySectionDividerComponent, selector: "sky-section-divider", inputs: ["text", "fontAwesomeIcon", "textClass", "dividerClass", "iconClass"] }] });
2279
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ProfilePersonalInfoLanguagesWidgetComponent, deps: [{ token: HRSelfWidgetsService }], target: i0.ɵɵFactoryTarget.Component });
2280
+ 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" }, 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"] }] });
2190
2281
  }
2191
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: PersonalInfoLanguagesWidgetComponent, decorators: [{
2282
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ProfilePersonalInfoLanguagesWidgetComponent, decorators: [{
2192
2283
  type: Component,
2193
- args: [{ selector: 'hr-personal-info-languages-widget', standalone: true, imports: [CommonModule, HRTranslatePipe, SkySectionDividerComponent], template: "<sky-section-divider [fontAwesomeIcon]=\"languagesIcon\"\r\n [text]=\"(sectionTitle | HRTranslate | uppercase)\"\r\n [iconClass]=\"headerIconClass\"\r\n [textClass]=\"headerTextClass\"\r\n [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n<div [ngClass]=\"contentTextClass\">\r\n {{getLanguages()}}\r\n</div>\r\n" }]
2284
+ 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" }]
2194
2285
  }], ctorParameters: () => [{ type: HRSelfWidgetsService }], propDecorators: { baseUrl: [{
2195
2286
  type: Input
2196
2287
  }], headerIconClass: [{
@@ -2201,6 +2292,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
2201
2292
  type: Input
2202
2293
  }], contentTextClass: [{
2203
2294
  type: Input
2295
+ }], emptyStateContainerClass: [{
2296
+ type: Input
2297
+ }], emptyStateTextClass: [{
2298
+ type: Input
2204
2299
  }], hasDataChange: [{
2205
2300
  type: Output
2206
2301
  }], languagesIcon: [{
@@ -2211,14 +2306,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
2211
2306
  type: Output
2212
2307
  }] } });
2213
2308
 
2214
- class PersonalInfoOtherNationalitiesWidgetComponent {
2309
+ class ProfilePersonalInfoOtherNationalitiesWidgetComponent {
2215
2310
  hrSelfWidgetsService;
2216
2311
  personalInfo = null;
2312
+ isLoading = true;
2217
2313
  baseUrl = '';
2218
2314
  headerIconClass = 'primary-icon-xl';
2219
2315
  headerTextClass = 'fs-16 mt-2 text-secondary';
2220
- headerDividerClass = 'flex-grow-1 mb-3';
2316
+ headerDividerClass = 'flex-grow-1 ms-2';
2221
2317
  contentTextClass = 'text-dark-gray fs-14 fw-medium mt-4';
2318
+ emptyStateContainerClass = 'd-flex flex-column justify-content-center align-items-center my-5';
2319
+ emptyStateTextClass = 'field-secondary-label-md';
2320
+ emptyStateTextKey = 'ThereIsNoOtherNationalitiesYet';
2222
2321
  hasDataChange = new EventEmitter();
2223
2322
  isLoadingChanged = new EventEmitter();
2224
2323
  otherNationalitiesIcon = faEarthAfrica;
@@ -2227,16 +2326,22 @@ class PersonalInfoOtherNationalitiesWidgetComponent {
2227
2326
  this.hrSelfWidgetsService = hrSelfWidgetsService;
2228
2327
  }
2229
2328
  ngOnInit() {
2230
- if (this.personalInfo || !this.baseUrl) {
2329
+ if (!this.baseUrl) {
2330
+ this.isLoading = false;
2231
2331
  this.emitHasData();
2232
2332
  return;
2233
2333
  }
2334
+ this.isLoadingChanged.emit(true);
2234
2335
  this.hrSelfWidgetsService.getPersonalInfoOtherNationalities(this.baseUrl).subscribe({
2235
2336
  next: (response) => {
2337
+ this.isLoading = false;
2338
+ this.isLoadingChanged.emit(false);
2236
2339
  this.personalInfo = response ?? [];
2237
2340
  this.emitHasData();
2238
2341
  },
2239
2342
  error: () => {
2343
+ this.isLoading = false;
2344
+ this.isLoadingChanged.emit(false);
2240
2345
  this.personalInfo = [];
2241
2346
  this.emitHasData();
2242
2347
  }
@@ -2248,14 +2353,15 @@ class PersonalInfoOtherNationalitiesWidgetComponent {
2248
2353
  getOtherNationalities() {
2249
2354
  return this.personalInfo?.join(', ') || '-';
2250
2355
  }
2251
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: PersonalInfoOtherNationalitiesWidgetComponent, deps: [{ token: HRSelfWidgetsService }], target: i0.ɵɵFactoryTarget.Component });
2252
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: PersonalInfoOtherNationalitiesWidgetComponent, isStandalone: true, selector: "hr-personal-info-other-nationalities-widget", inputs: { baseUrl: "baseUrl", headerIconClass: "headerIconClass", headerTextClass: "headerTextClass", headerDividerClass: "headerDividerClass", contentTextClass: "contentTextClass", otherNationalitiesIcon: "otherNationalitiesIcon", sectionTitle: "sectionTitle" }, outputs: { hasDataChange: "hasDataChange", isLoadingChanged: "isLoadingChanged" }, ngImport: i0, template: "<sky-section-divider [fontAwesomeIcon]=\"otherNationalitiesIcon\"\r\n [text]=\"( sectionTitle | HRTranslate)\"\r\n [iconClass]=\"headerIconClass\"\r\n [textClass]=\"headerTextClass\"\r\n [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n<div [ngClass]=\"contentTextClass\">\r\n {{getOtherNationalities()}}\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: HRTranslatePipe, name: "HRTranslate" }, { kind: "component", type: SkySectionDividerComponent, selector: "sky-section-divider", inputs: ["text", "fontAwesomeIcon", "textClass", "dividerClass", "iconClass"] }] });
2356
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ProfilePersonalInfoOtherNationalitiesWidgetComponent, deps: [{ token: HRSelfWidgetsService }], target: i0.ɵɵFactoryTarget.Component });
2357
+ 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" }, 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"] }] });
2253
2358
  }
2254
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: PersonalInfoOtherNationalitiesWidgetComponent, decorators: [{
2359
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ProfilePersonalInfoOtherNationalitiesWidgetComponent, decorators: [{
2255
2360
  type: Component,
2256
- args: [{ selector: 'hr-personal-info-other-nationalities-widget', standalone: true, imports: [CommonModule, HRTranslatePipe, SkySectionDividerComponent], template: "<sky-section-divider [fontAwesomeIcon]=\"otherNationalitiesIcon\"\r\n [text]=\"( sectionTitle | HRTranslate)\"\r\n [iconClass]=\"headerIconClass\"\r\n [textClass]=\"headerTextClass\"\r\n [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n<div [ngClass]=\"contentTextClass\">\r\n {{getOtherNationalities()}}\r\n</div>\r\n" }]
2361
+ 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" }]
2257
2362
  }], ctorParameters: () => [{ type: HRSelfWidgetsService }], propDecorators: { baseUrl: [{
2258
- type: Input
2363
+ type: Input,
2364
+ args: [{ required: true }]
2259
2365
  }], headerIconClass: [{
2260
2366
  type: Input
2261
2367
  }], headerTextClass: [{
@@ -2264,6 +2370,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
2264
2370
  type: Input
2265
2371
  }], contentTextClass: [{
2266
2372
  type: Input
2373
+ }], emptyStateContainerClass: [{
2374
+ type: Input
2375
+ }], emptyStateTextClass: [{
2376
+ type: Input
2377
+ }], emptyStateTextKey: [{
2378
+ type: Input
2267
2379
  }], hasDataChange: [{
2268
2380
  type: Output
2269
2381
  }], isLoadingChanged: [{
@@ -2282,5 +2394,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
2282
2394
  * Generated bundle index. Do not edit.
2283
2395
  */
2284
2396
 
2285
- export { EventOption, EventTypeEnum, HRCardHeaderComponent, HRConstantsService, HREmployeeCalendarComponent, HRTranslatePipe, HRTranslateService, MainWidgetShortcut, MyBankInformationWidgetComponent, MyCalendarWidgetComponent, MyMainDetailsWidgetComponent, MyUpcomingEventsWidgetComponent, PersonalInfoAddressWidgetComponent, PersonalInfoContactWidgetComponent, PersonalInfoLanguagesWidgetComponent, PersonalInfoMainWidgetComponent, PersonalInfoOtherNationalitiesWidgetComponent, PublicHolidayWeekContext, RelativeDay, ScheduleVacationTypes };
2397
+ export { EventOption, EventTypeEnum, HRCardHeaderComponent, HRConstantsService, HREmployeeCalendarComponent, HRTranslatePipe, HRTranslateService, MainWidgetShortcut, MyCalendarWidgetComponent, MyMainDetailsWidgetComponent, MyUpcomingEventsWidgetComponent, ProfileBankInformationWidgetComponent, ProfilePersonalInfoAddressWidgetComponent, ProfilePersonalInfoContactWidgetComponent, ProfilePersonalInfoLanguagesWidgetComponent, ProfilePersonalInfoMainWidgetComponent, ProfilePersonalInfoOtherNationalitiesWidgetComponent, PublicHolidayWeekContext, RelativeDay, ScheduleVacationTypes };
2286
2398
  //# sourceMappingURL=skysoftware-co-bayan-hr-widgets-ui.mjs.map