@skysoftware-co/bayan-hr-widgets-ui 2.0.18 → 2.0.20

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

@@ -0,0 +1,78 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component, OnInit, inject, input, output, signal } from '@angular/core';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { faBolt, faPhone } from '@fortawesome/pro-light-svg-icons';
+import { HRTranslatePipe } from '../../shared/pipes/translate.pipe';
+import { SkyEmptyDesignCardComponent, SkySectionDividerComponent } from '@skysoftware-co/sky-components-ui';
+import { PersonalInfoContactDetails } 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-contact-widget',
+  standalone: true,
+  imports: [
+    CommonModule,
+    FontAwesomeModule,
+    HRTranslatePipe,
+    SkySectionDividerComponent,
+    SkyEmptyDesignCardComponent,
+    HRInfoFieldComponent,
+  ],
+  templateUrl: './my-profile-contact-widget.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MyProfileContactWidgetComponent implements OnInit {
+  readonly employeePersonalInfoContactDetails = signal<PersonalInfoContactDetails | 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-4');
+  readonly responsiveTopSpacingColumnClass = input<string>('col-6 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 emergencyContactLabelClass = input<string>('fs-14 fw-semibold');
+  readonly emergencyContactColumnClass = input<string>('col-md-4 col-6');
+  readonly emergencyContactResponsiveColumnClass = input<string>('col-md-4 col-6 mt-md-0 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 contactIcon = input(faPhone);
+  readonly emergencyContactIcon = input(faBolt);
+  readonly sectionTitle = input('contact');
+  readonly showEmergencyContact = input(true);
+  readonly emergencyContactRowClass = input('row mt-3 mb-4');
+  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.getPersonalInfoContactDetails(this.baseUrl()).subscribe({
+      next: response => {
+        this.isLoading.set(false);
+        this.isLoadingChanged.emit(false);
+        this.employeePersonalInfoContactDetails.set(response);
+      },
+      error: error => {
+        this.isLoading.set(false);
+        this.isLoadingChanged.emit(false);
+        this.employeePersonalInfoContactDetails.set(null);
+        this.errorOccurred.emit(error.error.ResponseData.Errors[0].Message);
+      },
+    });
+  }
+}

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

@@ -0,0 +1,63 @@
+<sky-section-divider
+  [fontAwesomeIcon]="contractIcon()"
+  [text]="sectionTitle() | translate | uppercase"
+  [iconClass]="headerIconClass()"
+  [textClass]="headerTextClass()"
+  [dividerClass]="headerDividerClass()"
+></sky-section-divider>
+
+@if (jobInformationContract()) {
+  <div [ngClass]="rowClass()">
+    <div [ngClass]="columnClass()">
+      <hr-info-field
+        [labelKey]="'ContractType'"
+        [value]="jobInformationContract()!.ContractTypeName"
+        [labelClass]="labelClass()"
+        [valueClass]="valueClass()"
+      ></hr-info-field>
+    </div>
+    <div [ngClass]="columnClass()">
+      <hr-info-field
+        [labelKey]="'ContractStartDate'"
+        [value]="jobInformationContract()!.ContractStartDate ? (jobInformationContract()!.ContractStartDate | date: 'dd/MM/yyyy') : null"
+        [labelClass]="labelClass()"
+        [valueClass]="valueClass()"
+      ></hr-info-field>
+    </div>
+    <div [ngClass]="responsiveTopSpacingColumnClass()">
+      <hr-info-field
+        [labelKey]="'ContractEndDate'"
+        [value]="jobInformationContract()!.ContractEndDate ? (jobInformationContract()!.ContractEndDate | date: 'dd/MM/yyyy') : null"
+        [labelClass]="labelClass()"
+        [valueClass]="valueClass()"
+      ></hr-info-field>
+    </div>
+
+    <div [ngClass]="topSpacingBottomMdSpacingColumnClass()">
+      <hr-info-field
+        [labelKey]="'ContractMaritalStatus'"
+        [value]="jobInformationContract()!.ContractMaritalStateName"
+        [labelClass]="labelClass()"
+        [valueClass]="valueClass()"
+      ></hr-info-field>
+    </div>
+    <div [ngClass]="topSpacingBottomSpacingColumnClass()">
+      <hr-info-field
+        [labelKey]="'ContractDependentsCount'"
+        [value]="jobInformationContract()!.ContractDependentsCount?.toString()"
+        [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) : ('ThereIsNoJobContractYet' | translate)"
+  ></sky-empty-design-card>
+}

package/src/lib/my-profile/contract-widget/my-profile-contract-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 { JobInformationContract } from '../../shared/types/common';
+import { HRInfoFieldComponent } from '../../shared/components/info-field/info-field.component';
+
+@Component({
+  selector: 'hr-my-profile-contract-widget',
+  standalone: true,
+  imports: [
+    CommonModule,
+    HRTranslatePipe,
+    SkySectionDividerComponent,
+    SkyEmptyDesignCardComponent,
+    HRInfoFieldComponent,
+  ],
+  templateUrl: './my-profile-contract-widget.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MyProfileContractWidgetComponent implements OnInit {
+  readonly jobInformationContract = signal<JobInformationContract | 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 contractIcon = input(faFileSignature);
+  readonly sectionTitle = input('Contract');
+
+  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.getJobInformationContract(this.baseUrl()).subscribe({
+      next: response => {
+        this.isLoading.set(false);
+        this.jobInformationContract.set(response);
+        this.isLoadingChanged.emit(false);
+      },
+      error: error => {
+        this.isLoading.set(false);
+        this.jobInformationContract.set(null);
+        this.isLoadingChanged.emit(false);
+        this.errorOccurred.emit(error.error.ResponseData.Errors[0].Message);
+      },
+    });
+  }
+}

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

@@ -0,0 +1,86 @@
+<sky-section-divider
+  [fontAwesomeIcon]="degreesIcon()"
+  [text]="sectionTitle() | translate | uppercase"
+  [iconClass]="headerIconClass()"
+  [textClass]="headerTextClass()"
+  [dividerClass]="headerDividerClass()"
+></sky-section-divider>
+
+<div [class]="wrapperClass">
+  @if (degrees().length > 0) {
+    <div class="row">
+      <div [class]="headerRowClass()">
+        <div [class]="itemColumnClass()">
+          <p [class]="labelClass()">{{ 'Degree/Year' | translate }}</p>
+        </div>
+
+        <div [class]="itemColumnClass()">
+          <p [class]="labelClass()">{{ 'Country' | translate }}</p>
+        </div>
+
+        <div [class]="itemColumnClass()">
+          <p [class]="labelClass()">{{ 'Specialty' | translate }}</p>
+        </div>
+
+        <div [class]="itemColumnClass()">
+          <p [class]="labelClass()">{{ 'Institute' | translate }}</p>
+        </div>
+      </div>
+
+      <div [class]="actionsSpacerClass()"></div>
+
+      @for (qualification of degrees(); track qualification) {
+        <div [class]="itemColumnsWrapperClass()">
+          <div [class]="itemColumnClass()">
+            <p [class]="valueClass()" [title]="qualification.DegreeName + ' / ' + qualification.DegreeYear">
+              {{ qualification.DegreeName + ' / ' + qualification.DegreeYear }}
+            </p>
+          </div>
+
+          <div [class]="itemColumnClass()">
+            <p [class]="valueClass()" [title]="qualification.CountryName ? qualification.CountryName : ''">
+              {{ qualification.CountryName }}
+            </p>
+          </div>
+
+          <div [class]="itemColumnClass()">
+            <p [class]="valueClass()" [title]="qualification.Specialty ? qualification.Specialty : ''">
+              @if (qualification.Specialty) {
+                {{ qualification.Specialty }}
+              } @else {
+                {{ '—' }}
+              }
+            </p>
+          </div>
+
+          <div [class]="itemColumnClass()">
+            <p [class]="valueClass()" [title]="qualification.Institute ? qualification.Institute : ''">
+              @if (qualification.Institute) {
+                {{ qualification.Institute }}
+              } @else {
+                {{ '—' }}
+              }
+            </p>
+          </div>
+        </div>
+
+        @if (qualification.Document) {
+          <div [class]="actionsColumnClass()">
+            <fa-icon [icon]="viewIcon()" [class]="viewIconClass()" (click)="onAttachmentView(qualification.Document)"></fa-icon>
+            <fa-icon [icon]="downloadIcon()" [class]="downloadIconClass()" (click)="onAttachmentDownload(qualification.Document)"></fa-icon>
+          </div>
+        }
+      }
+    </div>
+  } @else {
+    <sky-empty-design-card
+      [containerClass]="emptyStateContainerClass()"
+      [cardBodyClass]="''"
+      [cardBodyContainerClass]="''"
+      [visibleIcon]="false"
+      [visibleQuickAction]="false"
+      [emptyTextClass]="emptyStateTextClass()"
+      [emptyText]="isLoading() ? (sectionTitle() | translate) + ' ' + ('IsLoading' | translate) : ('ThereIsNoDegreesYet' | translate)"
+    ></sky-empty-design-card>
+  }
+</div>

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

@@ -0,0 +1,98 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component, OnInit, inject, input, output, signal } from '@angular/core';
+import { SkyEmptyDesignCardComponent, SkySectionDividerComponent } from '@skysoftware-co/sky-components-ui';
+import { faFileCertificate, faFolderArrowDown } from '@fortawesome/pro-light-svg-icons';
+import { faEye } from '@fortawesome/pro-regular-svg-icons';
+import { HRTranslatePipe } from '../../shared/pipes/translate.pipe';
+import { HRSelfWidgetsService } from '../../services/hr-self-widgets.service';
+import { IconDefinition } from '@fortawesome/angular-fontawesome';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { Degree } from '../../shared/types/common';
+
+@Component({
+  selector: 'hr-my-profile-degrees-widget',
+  standalone: true,
+  imports: [CommonModule, SkySectionDividerComponent, HRTranslatePipe, SkyEmptyDesignCardComponent, FontAwesomeModule],
+  templateUrl: './my-profile-degrees-widget-component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MyProfileDegreesWidgetComponent implements OnInit {
+  readonly degrees = signal<Degree[]>([]);
+  readonly isLoading = signal(true);
+
+  readonly baseUrl = input<string>('');
+  readonly sectionTitle = input<string>('Degrees');
+
+  readonly degreesIcon = input(faFileCertificate);
+  readonly viewIcon = input<IconDefinition>(faEye);
+  readonly downloadIcon = input(faFolderArrowDown);
+
+  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>('mt-4');
+  readonly rowMarginBottomClass = input<string>('mb-5');
+  readonly rowMarginBottomEmptyClass = input<string>('mb-4');
+  readonly headerRowClass = input<string>('row col-10');
+  readonly actionsSpacerClass = input<string>('col-2');
+  readonly labelClass = input<string>('field-secondary-label-sm text-ellipsis-one-line');
+  readonly valueClass = input<string>('text-dark-gray fs-14 text-ellipsis-one-line');
+  readonly viewIconClass = input<string>('fs-15 text-dark cursor-pointer');
+  readonly downloadIconClass = input<string>('fs-15 mx-3 text-dark cursor-pointer');
+  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 itemRowClass = input<string>('row');
+  readonly itemColumnsWrapperClass = input<string>('row col-10 mt-3');
+  readonly itemColumnClass = input<string>('col-3');
+  readonly actionsColumnClass = input<string>('col-2 align-items-end mt-3');
+
+  readonly isLoadingChanged = output<boolean>();
+  readonly attachmentViewed = output<any>();
+  readonly attachmentDownloaded = output<any>();
+  readonly errorOccurred = output<string>();
+  private readonly service = inject(HRSelfWidgetsService);
+
+  ngOnInit(): void {
+    if (!this.baseUrl()) {
+      this.isLoading.set(false);
+      return;
+    }
+
+    this.isLoadingChanged.emit(true);
+
+    this.service.getEmployeeDegrees(this.baseUrl()).subscribe({
+      next: res => {
+        this.degrees.set(res ?? []);
+        this.isLoading.set(false);
+        this.isLoadingChanged.emit(false);
+      },
+      error: error => {
+        this.degrees.set([]);
+        this.isLoading.set(false);
+        this.errorOccurred.emit(error.error.ResponseData.Errors[0].Message);
+        this.isLoadingChanged.emit(false);
+      },
+    });
+  }
+
+  get wrapperClass(): string {
+    const classes = [this.rowClass()];
+    if (this.degrees().length > 0) {
+      classes.push(this.rowMarginBottomClass());
+    } else {
+      classes.push(this.rowMarginBottomEmptyClass());
+    }
+    return classes.join(' ');
+  }
+
+  onAttachmentView(file: any) {
+    this.attachmentViewed.emit(file);
+  }
+
+  onAttachmentDownload(file: any) {
+    this.attachmentDownloaded.emit(file);
+  }
+}

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

@@ -0,0 +1,83 @@
+<sky-section-divider
+  [fontAwesomeIcon]="icon()"
+  [text]="sectionTitle() | translate | uppercase"
+  [iconClass]="headerIconClass()"
+  [textClass]="headerTextClass()"
+  [dividerClass]="headerDividerClass()"
+></sky-section-divider>
+
+<div class="mt-4">
+  @if (groups().length) {
+    @for (group of groups(); track group; let first = $first) {
+      <div [class]="!(isTablet() || isMobile()) ? cardClass() : ''" [class.mt-3]="!first">
+        @if (!(isTablet() || isMobile())) {
+          <hr-document-card
+            [title]="group.DependentName + ' (' + group.DependentTypeName + ')'"
+            [documents]="group.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()">{{ group.DependentName }} ({{ group.DependentTypeName }})</p>
+          </div>
+          <div class="row mx-1">
+            @for (doc of group.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) : ('ThereAreNoDependentsDocumentsYet' | translate)
+      "
+    ></sky-empty-design-card>
+  }
+</div>

package/src/lib/my-profile/dependents-documents-widget/my-profile-dependents-documents-widget.ts

@@ -0,0 +1,126 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component, OnInit, inject, input, output, signal } from '@angular/core';
+import { SkyEmptyDesignCardComponent, SkySectionDividerComponent } from '@skysoftware-co/sky-components-ui';
+import { faFileLines, faFolderArrowDown } from '@fortawesome/pro-light-svg-icons';
+import { faEye } from '@fortawesome/pro-regular-svg-icons';
+import { HRSelfWidgetsService } from '../../services/hr-self-widgets.service';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { IconDefinition } from '@fortawesome/angular-fontawesome';
+import { HRDocumentCardComponent } from '../documents-widgets/components/document-card/document-card.component';
+import { HrDocumentTabletCardComponent } from '../documents-widgets/components/document-tablet-card/document-tablet-card.component';
+import { HRTranslatePipe } from '../../shared/pipes/translate.pipe';
+import { DependentDocumentGroup } from '../../shared/types/common';
+
+@Component({
+  selector: 'hr-my-profile-dependents-documents-widget',
+  standalone: true,
+  imports: [
+    CommonModule,
+    SkySectionDividerComponent,
+    HRTranslatePipe,
+    SkyEmptyDesignCardComponent,
+    FontAwesomeModule,
+    HRDocumentCardComponent,
+    HrDocumentTabletCardComponent,
+  ],
+  templateUrl: './my-profile-dependents-documents-widget.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MyProfileDependentsDocumentsWidgetComponent implements OnInit {
+  documents: DependentDocumentGroup[] = [];
+  groupedDocuments: DependentDocumentGroup[] = [];
+  readonly isLoading = signal(true);
+
+  readonly baseUrl = input<string>('');
+  readonly sectionTitle = input<string>('DependentsDocuments');
+  readonly icon = input(faFileLines);
+  readonly viewIcon = input<IconDefinition>(faEye);
+  readonly downloadIcon = input(faFolderArrowDown);
+  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 valueClass = input<string>('text-dark-gray fs-14 text-break');
+  readonly viewIconClass = input<string>('fs-15 text-dark cursor-pointer');
+  readonly downloadIconClass = input<string>('fs-15 text-dark cursor-pointer');
+  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 cardClass = input<string>('mt-4 card-shadow position-relative p-4');
+  readonly topSpacingColClass = input<string>('col-md-3 col-6 mt-4');
+  readonly titleContainerClass = input<string>('mb-3');
+  readonly titleClass = input<string>('text-dark fs-16 mb-0');
+  readonly labelClass = input<string>('field-secondary-label-sm mb-1');
+  readonly actionsColumnClass = input<string>('col-2 d-flex flex-column mt-3');
+  readonly rowClass = input<string>('row');
+  readonly dataColClass = input<string>('col-10');
+  readonly dataColSpacingClass = input<string>('mt-2');
+  readonly dataRowClass = input<string>('row align-items-center py-1 gx-0');
+  readonly typeColClass = input<string>('col-3');
+  readonly numberColClass = input<string>('col-3');
+  readonly issueDateColClass = input<string>('col-3');
+  readonly expiryDateColClass = input<string>('col-3');
+  readonly actionsColClass = input<string>('col-2 d-flex align-items-center');
+  readonly actionsWrapperClass = input<string>('d-flex align-items-center gap-2');
+  readonly downloadContainerClass = input<string>(
+    'bg-light-gray rounded-3 d-flex align-items-center justify-content-center px-1 cursor-pointer',
+  );
+
+  readonly tabletContainerClass = input<string>('mt-3');
+  readonly tabletCardClass = input<string>('row px-4 py-3 card-shadow');
+  readonly tabletCardHeight = input<string>('175px');
+  readonly tabletColWithAttachmentClass = input<string>('col-5');
+  readonly tabletColWithoutAttachmentClass = input<string>('col-6');
+  readonly tabletActionsColClass = input<string>('col-1 d-flex align-items-center');
+  readonly tabletBottomRowSpacingClass = input<string>('mt-4');
+  readonly tabletDownloadCountClass = input<string>('text-dark fs-12 fw-bold ps-2');
+
+  readonly isMobile = input<boolean>(false);
+  readonly isTablet = input<boolean>(false);
+
+  readonly isLoadingChanged = output<boolean>();
+  readonly attachmentViewed = output<any>();
+  readonly attachmentDownloaded = output<any>();
+  readonly errorOccurred = output<string>();
+
+  private readonly service = inject(HRSelfWidgetsService);
+
+  readonly groups = signal<any[]>([]);
+
+  ngOnInit(): void {
+    if (!this.baseUrl()) {
+      this.isLoading.set(false);
+      return;
+    }
+
+    this.isLoadingChanged.emit(true);
+
+    this.service.getDependentDocuments(this.baseUrl()).subscribe({
+      next: (res: any) => {
+        this.groups.set(res ?? []);
+        this.isLoading.set(false);
+        this.isLoadingChanged.emit(false);
+      },
+      error: (error: any) => {
+        this.groups.set([]);
+        this.isLoading.set(false);
+        this.errorOccurred.emit(error.error.ResponseData.Errors[0].Message);
+        this.isLoadingChanged.emit(false);
+      },
+    });
+  }
+
+  onAttachmentView(doc: any): void {
+    if (doc.Attachments?.length) {
+      this.attachmentViewed.emit(doc.Attachments[0]);
+    }
+  }
+
+  onDownload(group: any): void {
+    const attachments = group.Attachments;
+
+    if (!attachments.length) return;
+
+    this.attachmentDownloaded.emit(attachments);
+  }
+}

package/src/lib/my-profile/documents-widgets/components/document-card/document-card.component.html

@@ -0,0 +1,53 @@
+@if (title) {
+  <div [class]="titleContainerClass">
+    <p [class]="titleClass">{{ title }}</p>
+  </div>
+}
+
+<div [class]="rowClass">
+  <div [class]="dataColClass">
+    <div class="row g-1">
+      <div [class]="typeColClass">
+        <p [class]="labelClass">{{ 'Type' | translate }}</p>
+      </div>
+
+      <div [class]="numberColClass">
+        <p [class]="labelClass">{{ 'DocumentNumber' | translate }}</p>
+      </div>
+
+      <div [class]="issueDateColClass">
+        <p [class]="labelClass">{{ 'IssueDate' | translate }}</p>
+      </div>
+
+      <div [class]="expiryDateColClass">
+        <p [class]="labelClass">{{ 'ExpiryDate' | translate }}</p>
+      </div>
+    </div>
+  </div>
+
+  <div [class]="actionsColClass"></div>
+</div>
+
+@for (doc of documents; track doc) {
+  <hr-document-row
+    [doc]="doc"
+    [valueClass]="valueClass"
+    [viewIcon]="viewIcon"
+    [downloadIcon]="downloadIcon"
+    [viewIconClass]="viewIconClass"
+    [downloadIconClass]="downloadIconClass"
+    [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-row>
+}