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

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

@@ -0,0 +1,49 @@
+<sky-section-divider
+  [fontAwesomeIcon]="indemnityIcon()"
+  [text]="sectionTitle() | translate | uppercase"
+  [iconClass]="headerIconClass()"
+  [textClass]="headerTextClass()"
+  [dividerClass]="headerDividerClass()"
+></sky-section-divider>
+
+@if (indemnityDetails()) {
+  <div [class]="rowClass()">
+    <div [class]="columnClass()">
+      <hr-info-field
+        labelKey="IndemnityEligibility"
+        [value]="(indemnityDetails()!.IsEligibleForIndemnity ? 'Eligible' : 'NotEligible') | translate"
+        [labelClass]="labelClass()"
+        [valueClass]="valueClass()"
+      ></hr-info-field>
+    </div>
+    <div [class]="columnClass()">
+      <hr-info-field
+        labelKey="ServiceYears"
+        [value]="'' + (indemnityDetails()!.IndemnityServiceYears ?? '')"
+        [labelClass]="labelClass()"
+        [valueClass]="valueClass()"
+      ></hr-info-field>
+    </div>
+
+    <div [class]="topSpacingColumnClass()">
+      <hr-info-field
+        labelKey="StartDate"
+        [value]="indemnityDetails()!.IndemnityStartDate | date: dateFormat()"
+        [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) : ('There\'sNoInformationInThisSectionYet' | translate)
+    "
+  ></sky-empty-design-card>
+}

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

@@ -0,0 +1,79 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component, OnInit, inject, input, output, signal } from '@angular/core';
+import { HRTranslatePipe } from '../../shared/pipes/translate.pipe';
+import { faFileSignature } from '@fortawesome/pro-light-svg-icons';
+import { SkyEmptyDesignCardComponent, SkySectionDividerComponent } from '@skysoftware-co/sky-components-ui';
+import { HRSelfWidgetsService } from '../../services/hr-self-widgets.service';
+import { HRInfoFieldComponent } from '../../shared/components/info-field/info-field.component';
+import { EntitlementsIndemnity } from '../../shared/types/common';
+
+@Component({
+  selector: 'hr-my-profile-indemnity-widget',
+  standalone: true,
+  imports: [
+    CommonModule,
+    HRTranslatePipe,
+    SkySectionDividerComponent,
+    SkyEmptyDesignCardComponent,
+    HRInfoFieldComponent,
+  ],
+  templateUrl: './my-profile-indemnity-widget.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MyProfileIndemnityWidgetComponent implements OnInit {
+  readonly baseUrl = input.required<string>();
+  readonly currencyCode = input<string>('');
+  readonly currencyDecimals = input<number>(0);
+  readonly sectionTitle = input<string>('Indemnity');
+  readonly indemnityIcon = input(faFileSignature);
+
+  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 rowClass = input<string>('row mt-4');
+  readonly columnClass = input<string>('col-6');
+  readonly topSpacingColumnClass = input<string>('col-6 mt-4');
+  readonly labelClass = input<string>('field-secondary-label-sm');
+  readonly valueClass = input<string>('fs-14 fw-meduim');
+  readonly dateFormat = input<string>('dd/MM/yyyy');
+  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 isLoadingChanged = output<boolean>();
+  readonly errorOccurred = output<string>();
+  readonly hasDataChanged = output<boolean>();
+
+  readonly indemnityDetails = signal<EntitlementsIndemnity | null>(null);
+  readonly isLoading = signal(true);
+
+  private readonly selfWidgetsService = inject(HRSelfWidgetsService);
+
+  ngOnInit(): void {
+    if (!this.baseUrl()) {
+      this.isLoading.set(false);
+      return;
+    }
+    this.loadData();
+  }
+
+  private loadData(): void {
+    this.isLoadingChanged.emit(true);
+    this.selfWidgetsService.getEntitlementsIndemnity(this.baseUrl()).subscribe({
+      next: data => {
+        this.indemnityDetails.set(data);
+        this.isLoading.set(false);
+        this.hasDataChanged.emit(!!this.indemnityDetails());
+        this.isLoadingChanged.emit(false);
+      },
+      error: error => {
+        this.indemnityDetails.set(null);
+        this.isLoading.set(false);
+        this.hasDataChanged.emit(false);
+        this.errorOccurred.emit(error?.error?.ResponseData?.Errors?.[0]?.Message);
+        this.isLoadingChanged.emit(false);
+      },
+    });
+  }
+}

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

@@ -0,0 +1,71 @@
+<sky-section-divider
+  [fontAwesomeIcon]="mainIcon()"
+  [text]="sectionTitle() | translate | uppercase"
+  [iconClass]="headerIconClass()"
+  [textClass]="headerTextClass()"
+  [dividerClass]="headerDividerClass()"
+></sky-section-divider>
+
+@if (jobInformationMain()) {
+  <div [ngClass]="rowClass()">
+    <div [ngClass]="columnClass()">
+      <hr-info-field
+        [labelKey]="'AdminUnit'"
+        [value]="jobInformationMain()!.AdminUnitName"
+        [labelClass]="labelClass()"
+        [valueClass]="valueClass()"
+      ></hr-info-field>
+    </div>
+    <div [ngClass]="columnClass()">
+      <hr-info-field
+        [labelKey]="'Position'"
+        [value]="jobInformationMain()!.PositionName"
+        [labelClass]="labelClass()"
+        [valueClass]="valueClass()"
+      ></hr-info-field>
+    </div>
+    <div [ngClass]="responsiveTopSpacingColumnClass()">
+      <hr-info-field
+        [labelKey]="'Grade'"
+        [value]="jobInformationMain()!.GradeName"
+        [labelClass]="labelClass()"
+        [valueClass]="valueClass()"
+      ></hr-info-field>
+    </div>
+
+    <div [ngClass]="topSpacingBottomMdSpacingColumnClass()">
+      <hr-info-field
+        [labelKey]="'JoiningDate'"
+        [value]="jobInformationMain()!.JoiningDate ? (jobInformationMain()!.JoiningDate | date: 'dd/MM/yyyy') : null"
+        [labelClass]="labelClass()"
+        [valueClass]="valueClass()"
+      ></hr-info-field>
+    </div>
+    <div [ngClass]="topSpacingBottomMdSpacingColumnClass()">
+      <hr-info-field
+        [labelKey]="'CorporateJoiningDate'"
+        [value]="jobInformationMain()!.CorporateJoiningDate ? (jobInformationMain()!.CorporateJoiningDate | date: 'dd/MM/yyyy') : null"
+        [labelClass]="labelClass()"
+        [valueClass]="valueClass()"
+      ></hr-info-field>
+    </div>
+    <div [ngClass]="topSpacingBottomSpacingColumnClass()">
+      <hr-info-field
+        [labelKey]="'Sponsor'"
+        [value]="jobInformationMain()!.SponsorName"
+        [labelClass]="labelClass()"
+        [valueClass]="valueClass()"
+      ></hr-info-field>
+    </div>
+  </div>
+} @else {
+  <sky-empty-design-card
+    [visibleIcon]="false"
+    [visibleQuickAction]="false"
+    [containerClass]="emptyStateContainerClass()"
+    [cardBodyClass]="''"
+    [cardBodyContainerClass]="''"
+    [emptyTextClass]="emptyStateTextClass()"
+    [emptyText]="isLoading() ? (sectionTitle() | translate) + ' ' + ('IsLoading' | translate) : ('ThereIsNoJobMainYet' | translate)"
+  ></sky-empty-design-card>
+}

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

@@ -0,0 +1,73 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component, OnInit, inject, input, output, signal } from '@angular/core';
+import { faFileSignature } from '@fortawesome/pro-light-svg-icons';
+import { SkyEmptyDesignCardComponent, SkySectionDividerComponent } from '@skysoftware-co/sky-components-ui';
+import { HRSelfWidgetsService } from '../../services/hr-self-widgets.service';
+import { HRTranslatePipe } from '../../shared/pipes/translate.pipe';
+import { JobInformationMain } from '../../shared/types/common';
+import { HRInfoFieldComponent } from '../../shared/components/info-field/info-field.component';
+
+@Component({
+  selector: 'hr-my-profile-job-info-widget',
+  standalone: true,
+  imports: [
+    CommonModule,
+    HRTranslatePipe,
+    SkySectionDividerComponent,
+    SkyEmptyDesignCardComponent,
+    HRInfoFieldComponent,
+  ],
+  templateUrl: './my-profile-job-info-widget.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MyProfileJobInfoWidgetComponent implements OnInit {
+  readonly jobInformationMain = signal<JobInformationMain | null>(null);
+  readonly isLoading = signal(true);
+
+  readonly baseUrl = input.required<string>();
+  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 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 topSpacingBottomMdSpacingColumnClass = input<string>('col-md-4 col-6 mt-4 mb-md-5');
+  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 mainIcon = input(faFileSignature);
+  readonly sectionTitle = input('JobInformation');
+
+  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.getJobInformationMain(this.baseUrl()).subscribe({
+      next: response => {
+        this.isLoading.set(false);
+        this.jobInformationMain.set(response);
+        this.isLoadingChanged.emit(false);
+      },
+      error: error => {
+        this.isLoading.set(false);
+        this.jobInformationMain.set(null);
+        this.isLoadingChanged.emit(false);
+        this.errorOccurred.emit(error.error.ResponseData.Errors[0].Message);
+      },
+    });
+  }
+}

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

@@ -0,0 +1,23 @@
+<sky-section-divider
+  [fontAwesomeIcon]="languagesIcon()"
+  [text]="sectionTitle() | translate | uppercase"
+  [iconClass]="headerIconClass()"
+  [textClass]="headerTextClass()"
+  [dividerClass]="headerDividerClass()"
+></sky-section-divider>
+
+@if ((languages()?.length ?? 0) > 0) {
+  <div [ngClass]="contentTextClass()">
+    {{ getLanguages() }}
+  </div>
+} @else {
+  <sky-empty-design-card
+    [visibleIcon]="false"
+    [visibleQuickAction]="false"
+    [containerClass]="emptyStateContainerClass()"
+    [cardBodyClass]="''"
+    [cardBodyContainerClass]="''"
+    [emptyTextClass]="emptyStateTextClass()"
+    [emptyText]="isLoading() ? (sectionTitle() | translate) + ' ' + ('IsLoading' | translate) : ('ThereIsNoLanguagesYet' | translate)"
+  ></sky-empty-design-card>
+}

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

@@ -0,0 +1,70 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component, OnInit, inject, input, output, signal } from '@angular/core';
+import { faLanguage } from '@fortawesome/pro-light-svg-icons';
+import { HRTranslatePipe } from '../../shared/pipes/translate.pipe';
+import { SkyEmptyDesignCardComponent, SkySectionDividerComponent } from '@skysoftware-co/sky-components-ui';
+import { HRSelfWidgetsService } from '../../services/hr-self-widgets.service';
+
+@Component({
+  selector: 'hr-my-profile-languages-widget',
+  standalone: true,
+  imports: [CommonModule, HRTranslatePipe, SkySectionDividerComponent, SkyEmptyDesignCardComponent],
+  templateUrl: './my-profile-languages-widget.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MyProfileLanguagesWidgetComponent implements OnInit {
+  readonly languages = signal<string[] | null>(null);
+  readonly isLoading = signal(true);
+  readonly baseUrl = input<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 contentTextClass = input<string>('text-dark-gray fs-14 fw-medium mt-4');
+  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 hasDataChange = output<boolean>();
+
+  readonly languagesIcon = input(faLanguage);
+  readonly sectionTitle = input('languages');
+
+  readonly isLoadingChanged = output<boolean>();
+  readonly errorOccurred = output<string>();
+
+  private readonly hrSelfWidgetsService = inject(HRSelfWidgetsService);
+
+  ngOnInit(): void {
+    if (!this.baseUrl()) {
+      this.isLoading.set(false);
+      this.emitHasData();
+      return;
+    }
+
+    this.isLoadingChanged.emit(true);
+
+    this.hrSelfWidgetsService.getPersonalInfoLanguages(this.baseUrl()).subscribe({
+      next: response => {
+        this.isLoading.set(false);
+        this.isLoadingChanged.emit(false);
+        this.languages.set(response ?? []);
+        this.emitHasData();
+      },
+      error: error => {
+        this.isLoading.set(false);
+        this.languages.set([]);
+        this.emitHasData();
+        this.isLoadingChanged.emit(false);
+        this.errorOccurred.emit(error.error.ResponseData.Errors[0].Message);
+      },
+    });
+  }
+
+  private emitHasData(): void {
+    this.hasDataChange.emit((this.languages()?.length ?? 0) > 0);
+  }
+
+  getLanguages(): string {
+    return this.languages()?.join(', ') || '-';
+  }
+}

package/src/lib/my-profile/medical-insurance-widget/components/medical-insurance-card/medical-insurance-card.component.html

@@ -0,0 +1,18 @@
+<hr-widget-card [cardClass]="cardClass" [height]="cardHeight" [contentTemplate]="cardContent"></hr-widget-card>
+
+<ng-template #cardContent>
+  <p [class]="nameClass" [ngClass]="isDependent ? 'd-flex' : ''">
+    @if (isDependent) {
+      <span class="text-ellipsis-one-line cursor-pointer" [title]="name">{{ name }}</span>
+      <span class="mx-1">({{ typeName }})</span>
+    } @else {
+      {{ name }} ({{ 'Me' | translate }})
+    }
+  </p>
+  @for (field of fields; track field.labelKey; let last = $last) {
+    <p [class.mb-2]="!last">
+      <span [class]="labelClass">{{ field.labelKey | translate }}:</span>
+      <span [class]="valueClass">{{ field.value || (field.fallbackValue ?? '—') }}</span>
+    </p>
+  }
+</ng-template>

package/src/lib/my-profile/medical-insurance-widget/components/medical-insurance-card/medical-insurance-card.component.ts

@@ -0,0 +1,29 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input } from '@angular/core';
+import { HRTranslatePipe } from '../../../../shared/pipes/translate.pipe';
+import { WidgetCardComponent } from '../../../../shared/components/widget-card/widget-card-component';
+
+export interface MedicalInsuranceField {
+  labelKey: string;
+  value: any;
+  fallbackValue?: string;
+}
+
+@Component({
+  selector: 'hr-medical-insurance-card',
+  standalone: true,
+  imports: [CommonModule, HRTranslatePipe, WidgetCardComponent],
+  templateUrl: './medical-insurance-card.component.html',
+})
+export class HRMedicalInsuranceCardComponent {
+  @Input({ required: true }) name: string | null = '';
+  @Input() typeName: string | null = '';
+  @Input() isDependent: boolean = false;
+  @Input() fields: MedicalInsuranceField[] = [];
+
+  @Input() cardClass: string = 'p-3 card-shadow h-100 border border-1 rounded rounded-2';
+  @Input() cardHeight: number = 185;
+  @Input() nameClass: string = 'text-dark fs-16 mb-2';
+  @Input() labelClass: string = 'field-secondary-label-sm';
+  @Input() valueClass: string = 'text-dark-gray mx-1';
+}

package/src/lib/my-profile/medical-insurance-widget/my-profile-medical-insurance-widget.component.html

@@ -0,0 +1,52 @@
+<sky-section-divider
+  [fontAwesomeIcon]="medicalInsuranceIcon()"
+  [text]="sectionTitle() | translate | uppercase"
+  [iconClass]="headerIconClass()"
+  [textClass]="headerTextClass()"
+  [dividerClass]="headerDividerClass()"
+></sky-section-divider>
+
+@if (medicalInsuranceDetails()) {
+  <div class="row mb-5">
+    @if (medicalInsuranceDetails()!.EmployeeMedicalInsurance) {
+      <div [class]="columnClass()" [style.height.px]="cardHeight()">
+        <hr-medical-insurance-card
+          [name]="medicalInsuranceDetails()?.EmployeeMedicalInsurance?.EmployeeFirstName || ''"
+          [fields]="employeeFields()"
+          [cardClass]="cardClass()"
+          [cardHeight]="cardHeight()"
+          [nameClass]="nameClass()"
+          [labelClass]="labelClass()"
+          [valueClass]="valueClass()"
+        ></hr-medical-insurance-card>
+      </div>
+    }
+    @for (dependent of medicalInsuranceDetails()!.DependentsMedicalInsurance; track dependent) {
+      <div [class]="columnClass()" [style.height.px]="cardHeight()">
+        <hr-medical-insurance-card
+          [name]="dependent.DependentName"
+          [typeName]="dependent.DependentTypeName"
+          [isDependent]="true"
+          [fields]="getDependentFields(dependent)"
+          [cardClass]="cardClass()"
+          [cardHeight]="cardHeight()"
+          [nameClass]="nameClass()"
+          [labelClass]="labelClass()"
+          [valueClass]="valueClass()"
+        ></hr-medical-insurance-card>
+      </div>
+    }
+  </div>
+} @else {
+  <sky-empty-design-card
+    [containerClass]="emptyStateContainerClass()"
+    [cardBodyClass]="''"
+    [cardBodyContainerClass]="''"
+    [visibleIcon]="false"
+    [visibleQuickAction]="false"
+    [emptyTextClass]="emptyStateTextClass()"
+    [emptyText]="
+      isLoading() ? (sectionTitle() | translate) + ' ' + ('IsLoading' | translate) : ('NotCoveredByMedicalInsurance' | translate)
+    "
+  ></sky-empty-design-card>
+}

package/src/lib/my-profile/medical-insurance-widget/my-profile-medical-insurance-widget.component.ts

@@ -0,0 +1,103 @@
+import { CommonModule, DatePipe } from '@angular/common';
+import { ChangeDetectionStrategy, Component, OnInit, inject, input, output, signal } from '@angular/core';
+import { HRTranslatePipe } from '../../shared/pipes/translate.pipe';
+import { faNotesMedical } from '@fortawesome/pro-light-svg-icons';
+import { SkyEmptyDesignCardComponent, SkySectionDividerComponent } from '@skysoftware-co/sky-components-ui';
+import { HRSelfWidgetsService } from '../../services/hr-self-widgets.service';
+import {
+  HRMedicalInsuranceCardComponent,
+  MedicalInsuranceField,
+} from './components/medical-insurance-card/medical-insurance-card.component';
+import { EntitlementsMedicalInsurance, DependentsMedicalInsurance } from '../../shared/types/common';
+
+@Component({
+  selector: 'hr-my-profile-medical-insurance-widget',
+  standalone: true,
+  imports: [
+    CommonModule,
+    HRTranslatePipe,
+    SkySectionDividerComponent,
+    SkyEmptyDesignCardComponent,
+    HRMedicalInsuranceCardComponent,
+  ],
+  templateUrl: './my-profile-medical-insurance-widget.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MyProfileMedicalInsuranceWidgetComponent implements OnInit {
+  readonly baseUrl = input.required<string>();
+  readonly sectionTitle = input<string>('MedicalInsurance');
+  readonly medicalInsuranceIcon = input(faNotesMedical);
+
+  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 labelClass = input<string>('field-secondary-label-sm');
+  readonly valueClass = input<string>('text-dark-gray mx-1');
+  readonly columnClass = input<string>('col-lg-4 col-6 mt-4');
+  readonly cardHeight = input<number>(185);
+  readonly cardClass = input<string>('p-3 card-shadow h-100 border border-1 rounded rounded-2');
+  readonly nameClass = input<string>('text-dark fs-16 mb-2');
+  readonly dateFormat = input<string>('dd/MM/yyyy');
+  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 isLoadingChanged = output<boolean>();
+  readonly errorOccurred = output<string>();
+
+  readonly medicalInsuranceDetails = signal<EntitlementsMedicalInsurance | null>(null);
+  readonly isLoading = signal(true);
+  readonly employeeFields = signal<MedicalInsuranceField[]>([]);
+
+  private datePipe = new DatePipe('en-US');
+
+  private readonly selfWidgetsService = inject(HRSelfWidgetsService);
+
+  ngOnInit(): void {
+    if (!this.baseUrl()) {
+      this.isLoading.set(false);
+      return;
+    }
+    this.loadData();
+  }
+
+  private loadData(): void {
+    this.isLoadingChanged.emit(true);
+    this.selfWidgetsService.getEntitlementsMedicalInsurance(this.baseUrl()).subscribe({
+      next: data => {
+        this.medicalInsuranceDetails.set(data);
+        this.buildEmployeeFields();
+        this.isLoading.set(false);
+        this.isLoadingChanged.emit(false);
+      },
+      error: error => {
+        this.medicalInsuranceDetails.set(null);
+        this.isLoading.set(false);
+        this.errorOccurred.emit(error?.error?.ResponseData?.Errors?.[0]?.Message);
+        this.isLoadingChanged.emit(false);
+      },
+    });
+  }
+
+  private buildEmployeeFields(): void {
+    const details = this.medicalInsuranceDetails();
+    if (!details?.EmployeeMedicalInsurance) return;
+    const emp = details.EmployeeMedicalInsurance;
+    this.employeeFields.set([
+      { labelKey: 'Class', value: emp.MedicalInsuranceClassName },
+      { labelKey: 'Number', value: emp.MedicalInsuranceNumber },
+      { labelKey: 'CoverageDate', value: this.datePipe.transform(emp.CoverageDate, this.dateFormat()) },
+      { labelKey: 'TotalEmployeeShare', value: details.TotalEmployeeShare },
+      { labelKey: 'TotalEmployerShare', value: details.TotalEmployerShare },
+    ]);
+  }
+
+  getDependentFields(dependent: DependentsMedicalInsurance): MedicalInsuranceField[] {
+    return [
+      { labelKey: 'Class', value: dependent.MedicalInsuranceClassName },
+      { labelKey: 'Number', value: dependent.MedicalInsuranceNumber },
+      { labelKey: 'CoverageDate', value: this.datePipe.transform(dependent.CoverageDate, this.dateFormat()) },
+    ];
+  }
+}

package/src/lib/my-profile/official-documents-widget/my-profile-official-documents-widget.html

@@ -0,0 +1,82 @@
+<sky-section-divider
+  [fontAwesomeIcon]="icon()"
+  [text]="sectionTitle() | translate | uppercase"
+  [iconClass]="headerIconClass()"
+  [textClass]="headerTextClass()"
+  [dividerClass]="headerDividerClass()"
+></sky-section-divider>
+
+<div class="mt-4">
+  @if (documents().length) {
+    <div [class]="!(isTablet() || isMobile()) ? cardClass() : ''">
+      @if (!(isTablet() || isMobile())) {
+        <hr-document-card
+          [title]="employeeName() + ' (' + ('Me' | translate) + ')'"
+          [documents]="documents()"
+          [valueClass]="valueClass()"
+          [viewIcon]="viewIcon()"
+          [downloadIcon]="downloadIcon()"
+          [viewIconClass]="viewIconClass()"
+          [downloadIconClass]="downloadIconClass()"
+          [titleContainerClass]="titleContainerClass()"
+          [titleClass]="titleClass()"
+          [labelClass]="labelClass()"
+          [rowClass]="rowClass()"
+          [dataColClass]="dataColClass()"
+          [dataColSpacingClass]="dataColSpacingClass()"
+          [dataRowClass]="dataRowClass()"
+          [typeColClass]="typeColClass()"
+          [numberColClass]="numberColClass()"
+          [issueDateColClass]="issueDateColClass()"
+          [expiryDateColClass]="expiryDateColClass()"
+          [actionsColClass]="actionsColClass()"
+          [actionsWrapperClass]="actionsWrapperClass()"
+          [downloadContainerClass]="downloadContainerClass()"
+          (attachmentView)="onAttachmentView($event)"
+          (download)="onDownload($event)"
+        ></hr-document-card>
+      } @else {
+        <div [class]="titleContainerClass()">
+          <p [class]="titleClass()">{{ employeeName() }} ({{ 'Me' | translate }})</p>
+        </div>
+
+        <div class="row mx-1">
+          @for (doc of documents(); track doc; let odd = $odd) {
+            <div class="col-6 mb-2">
+              <hr-document-tablet-card
+                [doc]="doc"
+                [isOdd]="odd"
+                [viewIcon]="viewIcon()"
+                [downloadIcon]="downloadIcon()"
+                [labelClass]="labelClass()"
+                [valueClass]="valueClass()"
+                [downloadIconClass]="downloadIconClass()"
+                [downloadContainerClass]="downloadContainerClass()"
+                [downloadCountClass]="tabletDownloadCountClass()"
+                [tabletContainerClass]="tabletContainerClass()"
+                [tabletCardClass]="tabletCardClass()"
+                [cardHeight]="tabletCardHeight()"
+                [tabletColWithAttachmentClass]="tabletColWithAttachmentClass()"
+                [tabletColWithoutAttachmentClass]="tabletColWithoutAttachmentClass()"
+                [tabletActionsColClass]="tabletActionsColClass()"
+                [tabletBottomRowSpacingClass]="tabletBottomRowSpacingClass()"
+                (view)="onAttachmentView(doc)"
+                (download)="onDownload(doc)"
+              ></hr-document-tablet-card>
+            </div>
+          }
+        </div>
+      }
+    </div>
+  } @else {
+    <sky-empty-design-card
+      [visibleIcon]="false"
+      [visibleQuickAction]="false"
+      [containerClass]="emptyStateContainerClass()"
+      [emptyTextClass]="emptyStateTextClass()"
+      [emptyText]="
+        isLoading() ? (sectionTitle() | translate) + ' ' + ('IsLoading' | translate) : ('ThereAreNoEmployeeDocumentsYet' | translate)
+      "
+    ></sky-empty-design-card>
+  }
+</div>