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

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

@@ -1,119 +0,0 @@
-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

@@ -1,35 +0,0 @@
-<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

@@ -1,110 +0,0 @@
-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

@@ -1,57 +0,0 @@
-<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

@@ -1,70 +0,0 @@
-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

@@ -1,101 +0,0 @@
-@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

@@ -1,89 +0,0 @@
-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

@@ -1,89 +0,0 @@
-<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>
-}