@skysoftware-co/bayan-hr-widgets-ui 2.0.26 → 2.0.27

package/src/lib/my-next-week-vacation-insights-widget/components/next-week-vacation-insights-popup/next-week-vacation-insights-popup.component.ts

@@ -0,0 +1,119 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component, ViewChild, effect, inject, input, output, signal } from '@angular/core';
+import { HRTranslatePipe } from '../../../shared/pipes/translate.pipe';
+import { DxDataGridComponent, DxDataGridModule, DxPopupModule, DxTextBoxModule } from 'devextreme-angular';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { faXmark } from '@fortawesome/pro-light-svg-icons';
+import { BayanEmployeeBadgeComponent, BayanEmployeeBadgeDTO } from '@skysoftware-co/bayan-components-ui';
+import { HttpClient, HttpParams } from '@angular/common/http';
+import CustomStore from 'devextreme/data/custom_store';
+import { lastValueFrom } from 'rxjs';
+import { VacationPopupType } from '../../../shared/types/common';
+import { HighlightPipe } from '@skysoftware-co/sky-components-ui';
+
+@Component({
+  selector: 'hr-next-week-vacation-insights-popup',
+  standalone: true,
+  imports: [
+    DxPopupModule,
+    HRTranslatePipe,
+    CommonModule,
+    FontAwesomeModule,
+    DxDataGridModule,
+    BayanEmployeeBadgeComponent,
+    DxTextBoxModule,
+    HighlightPipe,
+  ],
+  templateUrl: './next-week-vacation-insights-popup.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class HRNextWeekVacationInsightsPopupComponent {
+  @ViewChild(DxDataGridComponent, { static: false }) dataGrid!: DxDataGridComponent;
+
+  readonly popupVisible = input<boolean>(false);
+  readonly popupType = input<VacationPopupType>(VacationPopupType.Upcoming);
+  readonly baseUrl = input<string>('');
+  readonly width = input<string>('700px');
+  readonly height = input<string>('480px');
+  readonly gridHeight = input<string>('320px');
+  readonly pageSize = input<number>(20);
+  readonly showProperty = input<boolean>(false);
+
+  readonly closePopupClickHandler = output<void>();
+
+  popupTitle: string = '';
+  popupSubTitle: string = '';
+  keyExpr = 'EmployeeNumber';
+  VacationPopupType = VacationPopupType;
+  readonly dataSource = signal<CustomStore | null>(null);
+  xMarkIcon = faXmark;
+  readonly searchValue = signal('');
+
+  private readonly http = inject(HttpClient);
+
+  private readonly initDataSourceEffect = effect(() => {
+    if (this.popupVisible()) {
+      this.initDataSource();
+    }
+  });
+
+  private initDataSource(): void {
+    this.dataSource.set(
+      new CustomStore({
+        key: this.keyExpr,
+        load: loadOptions => {
+          const skip = loadOptions.skip ?? 0;
+          const pageIndex = Math.floor(skip / this.pageSize()) + 1;
+
+          let params = new HttpParams()
+            .set('ShowDirectSubordinatesOnly', 'false')
+            .set('LoadOptions.PageIndex', pageIndex.toString())
+            .set('LoadOptions.PageSize', this.pageSize().toString());
+
+          if (this.searchValue()) {
+            params = params.set('LoadOptions.SearchValue', this.searchValue());
+          }
+
+          return lastValueFrom(this.http.get<any>(this.baseUrl(), { params })).then((response: any) => {
+            const items = response.ResponseData?.Data ?? [];
+            const totalCount = response.ResponseData?.TotalCount ?? 0;
+            return { data: items, totalCount };
+          });
+        },
+      }),
+    );
+  }
+
+  onSearchValueChanged(e: any): void {
+    this.searchValue.set(e.value ?? '');
+    this.initDataSource();
+  }
+
+  getPopupTitle(): string {
+    return (
+      this.popupSubTitle || (this.popupType() === VacationPopupType.Upcoming ? 'UpcomingVacations' : 'ExpectedToReturn')
+    );
+  }
+
+  onPopupClose() {
+    this.searchValue.set('');
+    this.dataSource.set(null);
+    this.closePopupClickHandler.emit();
+  }
+
+  onHidden() {
+    this.onPopupClose();
+  }
+
+  getEmployeeBadge(item: any): BayanEmployeeBadgeDTO {
+    return {
+      EmployeePhotoKey: item.PhotoPath || null,
+      EmployeePhotoFailed: item.FailedToLoadPhoto || false,
+      EmployeeNameInitials: item.EmployeeNameInitials || '',
+    };
+  }
+
+  handleEmployeePhotoError(employee: any) {
+    employee.FailedToLoadPhoto = true;
+  }
+}

package/src/lib/my-next-week-vacation-insights-widget/my-next-week-vacation-insights-widget.component.html

@@ -0,0 +1,35 @@
+<div [class]="cardClass()">
+  <div class="card-body d-flex flex-column p-0 mb-3">
+    <div [class]="titleClass()">
+      {{ 'NextWeekVacationInsights' | translate | uppercase }}
+    </div>
+    <div class="d-flex flex-column mt-3">
+      <div [ngClass]="firstRowClass()">
+        <sky-widget-section-item
+          [data]="upcomingVacationsBadge()"
+          [containerClass]="upcomingContainerClass()"
+          [valueClass]="upcomingVacationsBadge().Value === 0 ? disabledValueClass() : valueClass()"
+          [ngClass]="{ 'pe-none': upcomingVacationsBadge().Value === 0 }"
+          (OnWidgetSectionClick)="openPopup(VacationPopupType.Upcoming)"
+        ></sky-widget-section-item>
+      </div>
+      <div [ngClass]="secondRowClass()">
+        <sky-widget-section-item
+          [data]="expectedToReturnBadge()"
+          [containerClass]="expectedContainerClass()"
+          [valueClass]="expectedToReturnBadge().Value === 0 ? disabledValueClass() : valueClass()"
+          [ngClass]="{ 'pe-none': expectedToReturnBadge().Value === 0 }"
+          (OnWidgetSectionClick)="openPopup(VacationPopupType.ExpectedToReturn)"
+        ></sky-widget-section-item>
+      </div>
+    </div>
+  </div>
+</div>
+
+<hr-next-week-vacation-insights-popup
+  [popupVisible]="popupVisible()"
+  [popupType]="popupType()"
+  [baseUrl]="popupBaseUrl()"
+  [showProperty]="showProperty()"
+  (closePopupClickHandler)="closePopup()"
+></hr-next-week-vacation-insights-popup>

package/src/lib/my-next-week-vacation-insights-widget/my-next-week-vacation-insights-widget.component.ts

@@ -0,0 +1,110 @@
+import { ChangeDetectionStrategy, Component, effect, inject, input, output, signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { HRTranslatePipe } from '../shared/pipes/translate.pipe';
+import { SkyWidgetSectionItemComponent, SkyWidgetSectionItem } from '@skysoftware-co/sky-components-ui';
+import { faPlaneDeparture, faPlaneArrival } from '@fortawesome/pro-solid-svg-icons';
+import { HRSelfWidgetsService } from '../services/hr-self-widgets.service';
+import { HRNextWeekVacationInsightsPopupComponent } from './components/next-week-vacation-insights-popup/next-week-vacation-insights-popup.component';
+import { VacationPopupType } from '../shared/types/common';
+
+@Component({
+  selector: 'hr-my-next-week-vacation-insights-widget',
+  standalone: true,
+  imports: [
+    CommonModule,
+    HRTranslatePipe,
+    FontAwesomeModule,
+    SkyWidgetSectionItemComponent,
+    HRNextWeekVacationInsightsPopupComponent,
+  ],
+  providers: [HRTranslatePipe],
+  templateUrl: './my-next-week-vacation-insights-widget.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MyNextWeekVacationInsightsWidgetComponent {
+  readonly baseUrl = input<string>('');
+  readonly showProperty = input<boolean>(false);
+  readonly cardClass = input<string>('card rounded rounded-4 card-shadow border-top-0 h-100 p-4');
+  readonly titleClass = input<string>('table-header-lg fw-meduim mb-3 mt-2');
+  readonly valueClass = input<string>('fs-24 mt-1 link-dark hover-primary text-decoration-none');
+  readonly disabledValueClass = input<string>('fs-24 mt-1 text-muted pe-none text-decoration-none');
+  readonly upcomingContainerClass = input<string>('border-start border-5 mb-4');
+  readonly expectedContainerClass = input<string>('border-start border-5');
+  readonly firstRowClass = input<string>('mb-4');
+  readonly secondRowClass = input<string>('mt-3');
+  readonly isLoadingChanged = output<boolean>();
+
+  readonly popupVisible = signal(false);
+  readonly popupType = signal<VacationPopupType>(VacationPopupType.Upcoming);
+  readonly popupBaseUrl = signal('');
+  VacationPopupType = VacationPopupType;
+
+  readonly upcomingVacationsBadge = signal<SkyWidgetSectionItem>({
+    Id: 1,
+    Title: '',
+    Value: 0,
+    Icon: faPlaneDeparture,
+  });
+  readonly expectedToReturnBadge = signal<SkyWidgetSectionItem>({
+    Id: 2,
+    Title: '',
+    Value: 0,
+    Icon: faPlaneArrival,
+  });
+
+  private readonly selfWidgetsService = inject(HRSelfWidgetsService);
+  private readonly translatePipe = inject(HRTranslatePipe);
+
+  private readonly loadVacationSummaryEffect = effect(() => {
+    const baseUrl = this.baseUrl();
+    this.initBadges(0, 0);
+    this.loadVacationSummary(baseUrl);
+  });
+
+  private loadVacationSummary(baseUrl: string): void {
+    this.isLoadingChanged.emit(true);
+    this.selfWidgetsService.getVacationSummary(baseUrl).subscribe({
+      next: response => {
+        const data = response.ResponseData;
+        this.initBadges(data.UpcomingVacationsCount, data.ExpectedToReturnCount);
+        this.isLoadingChanged.emit(false);
+      },
+      error: () => {
+        this.isLoadingChanged.emit(false);
+      },
+    });
+  }
+
+  openPopup(type: VacationPopupType): void {
+    if (type === VacationPopupType.Upcoming && this.upcomingVacationsBadge()?.Value === 0) return;
+    if (type === VacationPopupType.ExpectedToReturn && this.expectedToReturnBadge()?.Value === 0) return;
+
+    this.popupType.set(type);
+    if (type === VacationPopupType.Upcoming) {
+      this.popupBaseUrl.set(`${this.baseUrl()}/hr/widgets/me/team/next-week-vacation-insights/upcoming-vacations`);
+    } else {
+      this.popupBaseUrl.set(`${this.baseUrl()}/hr/widgets/me/team/next-week-vacation-insights/expected-to-return`);
+    }
+    this.popupVisible.set(true);
+  }
+
+  closePopup(): void {
+    this.popupVisible.set(false);
+  }
+
+  private initBadges(upcomingVacations: number, expectedToReturn: number): void {
+    this.upcomingVacationsBadge.set({
+      Id: 1,
+      Title: this.translatePipe.transform('UpcomingVacations'),
+      Value: upcomingVacations,
+      Icon: faPlaneDeparture,
+    });
+    this.expectedToReturnBadge.set({
+      Id: 2,
+      Title: this.translatePipe.transform('ExpectedToReturn'),
+      Value: expectedToReturn,
+      Icon: faPlaneArrival,
+    });
+  }
+}

package/src/lib/my-profile/address-widget/my-profile-address-widget.component.html

@@ -0,0 +1,57 @@
+<sky-section-divider
+  [fontAwesomeIcon]="addressIcon()"
+  [text]="sectionTitle() | translate | uppercase"
+  [iconClass]="headerIconClass()"
+  [textClass]="headerTextClass()"
+  [dividerClass]="headerDividerClass()"
+></sky-section-divider>
+
+@if (personalInfoAddressDetails()) {
+  <div [ngClass]="rowClass()">
+    <div [ngClass]="columnClass()">
+      <hr-info-field
+        [labelKey]="'Address'"
+        [value]="personalInfoAddressDetails()!.Address"
+        [labelClass]="labelClass()"
+        [valueClass]="valueClass()"
+      ></hr-info-field>
+    </div>
+
+    <div [ngClass]="columnClass()">
+      <hr-info-field
+        [labelKey]="'City'"
+        [value]="personalInfoAddressDetails()!.City"
+        [labelClass]="labelClass()"
+        [valueClass]="valueClass()"
+      ></hr-info-field>
+    </div>
+
+    <div [ngClass]="responsiveTopSpacingColumnClass()">
+      <hr-info-field
+        [labelKey]="'P.OBox'"
+        [value]="personalInfoAddressDetails()!.POBox"
+        [labelClass]="labelClass()"
+        [valueClass]="valueClass()"
+      ></hr-info-field>
+    </div>
+
+    <div [ngClass]="topSpacingBottomSpacingColumnClass()">
+      <hr-info-field
+        [labelKey]="'PostalCode'"
+        [value]="personalInfoAddressDetails()!.PostalCode"
+        [labelClass]="labelClass()"
+        [valueClass]="valueClass()"
+      ></hr-info-field>
+    </div>
+  </div>
+} @else {
+  <sky-empty-design-card
+    [containerClass]="emptyStateContainerClass()"
+    [cardBodyClass]="''"
+    [cardBodyContainerClass]="''"
+    [visibleIcon]="false"
+    [visibleQuickAction]="false"
+    [emptyTextClass]="emptyStateTextClass()"
+    [emptyText]="isLoading() ? (sectionTitle() | translate) + ' ' + ('IsLoading' | translate) : ('ThereIsNoAddressYet' | translate)"
+  ></sky-empty-design-card>
+}

package/src/lib/my-profile/address-widget/my-profile-address-widget.component.ts

@@ -0,0 +1,70 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component, OnInit, inject, input, output, signal } from '@angular/core';
+import { faHouse } from '@fortawesome/pro-light-svg-icons';
+import { HRTranslatePipe } from '../../shared/pipes/translate.pipe';
+import { SkyEmptyDesignCardComponent, SkySectionDividerComponent } from '@skysoftware-co/sky-components-ui';
+import { PersonalInfoAddressDetails } from '../../shared/types/common';
+import { HRSelfWidgetsService } from '../../services/hr-self-widgets.service';
+import { HRInfoFieldComponent } from '../../shared/components/info-field/info-field.component';
+
+@Component({
+  selector: 'hr-my-profile-address-widget',
+  standalone: true,
+  imports: [
+    CommonModule,
+    HRTranslatePipe,
+    SkySectionDividerComponent,
+    SkyEmptyDesignCardComponent,
+    HRInfoFieldComponent,
+  ],
+  templateUrl: './my-profile-address-widget.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MyProfileAddressWidgetComponent implements OnInit {
+  readonly personalInfoAddressDetails = signal<PersonalInfoAddressDetails | null>(null);
+  readonly isLoading = signal(true);
+  readonly baseUrl = input.required<string>();
+  readonly headerIconClass = input<string>('primary-icon-xl');
+  readonly headerTextClass = input<string>('fs-16 mt-2 text-secondary');
+  readonly headerDividerClass = input<string>('flex-grow-1 ms-2');
+  readonly rowClass = input<string>('row mt-4');
+  readonly columnClass = input<string>('col-md-4 col-6');
+  readonly responsiveTopSpacingColumnClass = input<string>('col-md-4 col-6 mt-md-0 mt-4');
+  readonly topSpacingBottomSpacingColumnClass = input<string>('col-md-4 col-6 mt-4 mb-5');
+  readonly labelClass = input<string>('field-secondary-label-sm');
+  readonly valueClass = input<string>('fs-14 fw-medium text-ellipsis-one-line');
+  readonly emptyStateContainerClass = input<string>(
+    'd-flex flex-column justify-content-center align-items-center my-5',
+  );
+  readonly emptyStateTextClass = input<string>('field-secondary-label-md');
+
+  readonly addressIcon = input(faHouse);
+  readonly sectionTitle = input('address');
+  readonly isLoadingChanged = output<boolean>();
+  readonly errorOccurred = output<string>();
+
+  private readonly hrSelfWidgetsService = inject(HRSelfWidgetsService);
+
+  ngOnInit(): void {
+    if (!this.baseUrl()) {
+      this.isLoading.set(false);
+      return;
+    }
+
+    this.isLoadingChanged.emit(true);
+
+    this.hrSelfWidgetsService.getPersonalInfoAddressDetails(this.baseUrl()).subscribe({
+      next: response => {
+        this.isLoading.set(false);
+        this.isLoadingChanged.emit(false);
+        this.personalInfoAddressDetails.set(response);
+      },
+      error: error => {
+        this.isLoading.set(false);
+        this.isLoadingChanged.emit(false);
+        this.personalInfoAddressDetails.set(null);
+        this.errorOccurred.emit(error.error.ResponseData.Errors[0].Message);
+      },
+    });
+  }
+}

package/src/lib/my-profile/bank-info-widget/my-profile-bank-info-widget.component.html

@@ -0,0 +1,101 @@
+@if (sectionHeaderVisibility()) {
+  <sky-section-divider
+    [fontAwesomeIcon]="bankInformationIcon()"
+    [text]="sectionTitle() | translate | uppercase"
+    [iconClass]="headerIconClass()"
+    [textClass]="headerTextClass()"
+    [dividerClass]="headerDividerClass()"
+  ></sky-section-divider>
+}
+@if (employeeBankInformation().length > 0) {
+  @for (bankInfo of employeeBankInformation(); track bankInfo) {
+    <div [class]="cardClass()">
+      @if (bankInfo.IsMainBank && employeeBankInformation().length > 1) {
+        <div [class]="mainBadgeClass()" style="padding-top: 2px" [style.margin-left]="!isRTL() ? '-6px' : 'unset'">
+          <span [class]="mainBadgeTextClass()">{{ 'MainBank' | translate }}</span>
+        </div>
+
+        <div
+          [class]="triangleClass()"
+          [style.margin-left]="!isRTL() ? '-6px' : 'unset'"
+          [style.margin-right]="isRTL() ? '-5px' : '20px'"
+          [style.margin-top]="!isRTL() ? '7px' : '4px'"
+        >
+          <svg viewBox="4 2 16 16" class="status-badge-triangle" fill="#e67e0f">
+            <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>
+          </svg>
+        </div>
+      }
+
+      <div [ngClass]="[rowClass(), bankInfo.IsMainBank ? rowMainPtClass() : rowNormalPtClass()]">
+        <div [class]="columnClass()">
+          <hr-info-field
+            [labelKey]="'Bank'"
+            [value]="bankInfo.BankName"
+            [labelClass]="labelClass()"
+            [valueClass]="valueClass()"
+          ></hr-info-field>
+        </div>
+
+        <div [class]="columnClass()">
+          <hr-info-field
+            [labelKey]="'Branch'"
+            [value]="bankInfo.BranchName"
+            [labelClass]="labelClass()"
+            [valueClass]="valueClass()"
+          ></hr-info-field>
+        </div>
+
+        <div [class]="responsiveTopSpacingColClass()">
+          <hr-info-field
+            [labelKey]="'IBAN'"
+            [value]="bankInfo.IBAN"
+            [labelClass]="labelClass()"
+            [valueClass]="valueClass()"
+          ></hr-info-field>
+        </div>
+
+        <div [class]="topSpacingColClass()">
+          <hr-info-field
+            [labelKey]="'AccountNumber'"
+            [value]="bankInfo.AccountNumber"
+            [labelClass]="labelClass()"
+            [valueClass]="valueClass()"
+          ></hr-info-field>
+        </div>
+
+        <div [class]="topSpacingColClass()">
+          <hr-info-field
+            [labelKey]="'Beneficiary'"
+            [value]="bankInfo.Beneficiary"
+            [labelClass]="labelClass()"
+            [valueClass]="valueClass()"
+          ></hr-info-field>
+        </div>
+
+        @if (bankInfo.TransferAmount != null) {
+          <div [class]="topSpacingColClass()">
+            <hr-info-field
+              [labelKey]="'TransferAmount'"
+              [value]="formatAmount(bankInfo.TransferAmount) + ' (' + currencyCode() + ')'"
+              [labelClass]="labelClass()"
+              [valueClass]="valueClass()"
+            ></hr-info-field>
+          </div>
+        }
+      </div>
+    </div>
+  }
+} @else {
+  <sky-empty-design-card
+    [visibleIcon]="false"
+    [visibleQuickAction]="false"
+    [containerClass]="emptyStateContainerClass()"
+    [cardBodyClass]="''"
+    [cardBodyContainerClass]="''"
+    [emptyTextClass]="emptyStateTextClass()"
+    [emptyText]="isLoading() ? (sectionTitle() | translate) + ' ' + ('IsLoading' | translate) : ('ThereIsNoBankYet' | translate)"
+  ></sky-empty-design-card>
+}

package/src/lib/my-profile/bank-info-widget/my-profile-bank-info-widget.component.ts

@@ -0,0 +1,89 @@
+import { ChangeDetectionStrategy, Component, OnInit, computed, inject, input, output, signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { faMoneyCheckDollarPen } from '@fortawesome/pro-light-svg-icons';
+import { MyBankInfo } from '../../shared/types/common';
+import { HRTranslatePipe } from '../../shared/pipes/translate.pipe';
+import { SkyEmptyDesignCardComponent, SkySectionDividerComponent } from '@skysoftware-co/sky-components-ui';
+import { HRCommonMethodsService } from '../../shared/services/common-methods.service';
+import { HRSelfWidgetsService } from '../../services/hr-self-widgets.service';
+import { HRInfoFieldComponent } from '../../shared/components/info-field/info-field.component';
+
+@Component({
+  selector: 'hr-my-profile-bank-info-widget',
+  standalone: true,
+  imports: [
+    CommonModule,
+    HRTranslatePipe,
+    SkySectionDividerComponent,
+    SkyEmptyDesignCardComponent,
+    HRInfoFieldComponent,
+  ],
+  templateUrl: './my-profile-bank-info-widget.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MyProfileBankInfoWidgetComponent implements OnInit {
+  readonly isLoading = signal(true);
+
+  private readonly commonMethodsService = inject(HRCommonMethodsService);
+  private readonly hrSelfWidgetsService = inject(HRSelfWidgetsService);
+
+  ngOnInit(): void {
+    this.isLoadingChanged.emit(true);
+    this.hrSelfWidgetsService.getBankInformation(this.baseUrl()).subscribe({
+      next: response => {
+        this.isLoading.set(false);
+        this.employeeBankInformation.set(response ?? []);
+        this.isLoadingChanged.emit(false);
+      },
+      error: error => {
+        this.isLoading.set(false);
+        this.employeeBankInformation.set([]);
+        this.isLoadingChanged.emit(false);
+        this.errorOccurred.emit(error.error.ResponseData.Errors[0].Message);
+      },
+    });
+  }
+  readonly employeeBankInformation = signal<MyBankInfo[]>([]);
+  readonly currencyCode = input<string>('');
+  readonly currencyDecimals = input<number>(2);
+
+  readonly headerIconClass = input<string>('primary-icon-xl');
+  readonly headerTextClass = input<string>('mt-2 field-secondary-label-lg');
+  readonly headerDividerClass = input<string>('flex-grow-1 ms-2');
+
+  readonly cardClass = input<string>('mt-4 card-shadow position-relative');
+  readonly mainBadgeClass = input<string>('position-absolute text-center top-0 mt-3 start-0 bg-primary status-badge');
+  readonly mainBadgeTextClass = input<string>('mx-1 fs-12 text-white');
+  readonly triangleClass = input<string>('position-absolute start-0 top-0');
+  readonly rowClass = input<string>('row px-4 pb-3');
+  readonly rowMainPtClass = input<string>('pt-5');
+  readonly rowNormalPtClass = input<string>('pt-3');
+  readonly columnClass = input<string>('col-md-4 col-6');
+  readonly responsiveTopSpacingColClass = input<string>('col-md-4 col-6 mt-md-0 mt-4');
+  readonly topSpacingColClass = input<string>('col-md-4 col-6 mt-4');
+  readonly labelClass = input<string>('field-secondary-label-sm');
+  readonly valueClass = input<string>('table-cell-md text-ellipsis-one-line');
+  readonly emptyStateContainerClass = input<string>(
+    'd-flex flex-column justify-content-center align-items-center my-5',
+  );
+  readonly emptyStateTextClass = input<string>('field-secondary-label-md');
+
+  readonly bankInformationIcon = input(faMoneyCheckDollarPen);
+  readonly sectionHeaderVisibility = input(true);
+  readonly sectionTitle = input('BankInformation');
+  readonly language = input('en');
+  readonly baseUrl = input.required<string>();
+
+  readonly errorOccurred = output<string>();
+
+  readonly isRTL = computed(() => this.language() === 'ar');
+
+  readonly isLoadingChanged = output<boolean>();
+
+  formatAmount(value: number | null | undefined): string {
+    if (value == null) {
+      return '-';
+    }
+    return this.commonMethodsService.currencyDecimalFormat(value, this.currencyDecimals()) || '-';
+  }
+}

package/src/lib/my-profile/contact-widget/my-profile-contact-widget.component.html

@@ -0,0 +1,89 @@
+<sky-section-divider
+  [fontAwesomeIcon]="contactIcon()"
+  [text]="sectionTitle() | translate | uppercase"
+  [iconClass]="headerIconClass()"
+  [textClass]="headerTextClass()"
+  [dividerClass]="headerDividerClass()"
+></sky-section-divider>
+
+@if (employeePersonalInfoContactDetails()) {
+  <div [ngClass]="rowClass()">
+    <div [ngClass]="columnClass()">
+      <hr-info-field
+        [labelKey]="'MobileNumber'"
+        [value]="employeePersonalInfoContactDetails()!.MobileNumber"
+        [labelClass]="labelClass()"
+        [valueClass]="valueClass()"
+      ></hr-info-field>
+      <div class="mt-4">
+        <hr-info-field
+          [labelKey]="'Email'"
+          [value]="employeePersonalInfoContactDetails()!.Email"
+          [labelClass]="labelClass()"
+          [valueClass]="valueClass()"
+        ></hr-info-field>
+      </div>
+    </div>
+    <div [ngClass]="columnClass()">
+      <hr-info-field
+        [labelKey]="'HomePhone'"
+        [value]="employeePersonalInfoContactDetails()!.HomePhone"
+        [labelClass]="labelClass()"
+        [valueClass]="valueClass()"
+      ></hr-info-field>
+      <div class="mt-4">
+        <hr-info-field
+          [labelKey]="'BusinessEmail'"
+          [value]="employeePersonalInfoContactDetails()!.BusinessEmail"
+          [labelClass]="labelClass()"
+          [valueClass]="valueClass()"
+        ></hr-info-field>
+      </div>
+    </div>
+  </div>
+  @if (showEmergencyContact()) {
+    <div [ngClass]="rowClass()">
+      <div class="col-12">
+        <div [ngClass]="emergencyContactLabelClass()">&#x2022; {{ 'EmergencyContact' | translate }}</div>
+      </div>
+    </div>
+    <div [ngClass]="emergencyContactRowClass()">
+      <div [ngClass]="emergencyContactColumnClass()">
+        <hr-info-field
+          [labelKey]="'Name'"
+          [value]="
+            employeePersonalInfoContactDetails()!.EmergencyContact?.Name || employeePersonalInfoContactDetails()!.EmergencyContactLegacy
+          "
+          [labelClass]="labelClass()"
+          [valueClass]="valueClass()"
+        ></hr-info-field>
+      </div>
+      <div [ngClass]="emergencyContactColumnClass()">
+        <hr-info-field
+          [labelKey]="'Relation'"
+          [value]="employeePersonalInfoContactDetails()!.EmergencyContact?.Relation"
+          [labelClass]="labelClass()"
+          [valueClass]="valueClass()"
+        ></hr-info-field>
+      </div>
+      <div [ngClass]="emergencyContactResponsiveColumnClass()">
+        <hr-info-field
+          [labelKey]="'Phone'"
+          [value]="employeePersonalInfoContactDetails()!.EmergencyContact?.PhoneNumber"
+          [labelClass]="labelClass()"
+          [valueClass]="valueClass()"
+        ></hr-info-field>
+      </div>
+    </div>
+  }
+} @else {
+  <sky-empty-design-card
+    [containerClass]="emptyStateContainerClass()"
+    [cardBodyClass]="''"
+    [cardBodyContainerClass]="''"
+    [visibleIcon]="false"
+    [visibleQuickAction]="false"
+    [emptyTextClass]="emptyStateTextClass()"
+    [emptyText]="isLoading() ? (sectionTitle() | translate) + ' ' + ('IsLoading' | translate) : ('ThereIsNoContactYet' | translate)"
+  ></sky-empty-design-card>
+}