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

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

@@ -0,0 +1,50 @@
+import { CommonModule } from '@angular/common';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { FontAwesomeModule, IconDefinition } from '@fortawesome/angular-fontawesome';
+import { faFolderArrowDown } from '@fortawesome/pro-light-svg-icons';
+import { faEye } from '@fortawesome/pro-regular-svg-icons';
+import { HRTranslatePipe } from '../../../../shared/pipes/translate.pipe';
+import { HRDocumentRowComponent } from '../document-row/document-row.component';
+import { DocumentRow } from '../../../../shared/types/common';
+
+@Component({
+  selector: 'hr-document-card',
+  standalone: true,
+  imports: [CommonModule, FontAwesomeModule, HRTranslatePipe, HRDocumentRowComponent],
+  templateUrl: './document-card.component.html',
+})
+export class HRDocumentCardComponent {
+  @Input() title: string = '';
+  @Input() documents: DocumentRow[] = [];
+  @Input() titleContainerClass: string = 'mb-3';
+  @Input() titleClass: string = 'text-dark fs-16 mb-0';
+  @Input() valueClass: string = 'text-dark-gray fs-14';
+  @Input() viewIcon: IconDefinition = faEye;
+  @Input() downloadIcon: IconDefinition = faFolderArrowDown;
+  @Input() viewIconClass: string = 'fs-15 text-dark cursor-pointer';
+  @Input() downloadIconClass: string = 'fs-15 text-dark cursor-pointer';
+  @Input() labelClass: string = 'field-secondary-label-sm mb-1';
+  @Input() rowClass: string = 'row';
+  @Input() dataColClass: string = 'col-10';
+  @Input() dataColSpacingClass: string = 'mt-2';
+  @Input() dataRowClass: string = 'row align-items-center py-1 gx-0';
+  @Input() typeColClass: string = 'col-3';
+  @Input() numberColClass: string = 'col-3';
+  @Input() issueDateColClass: string = 'col-3';
+  @Input() expiryDateColClass: string = 'col-3';
+  @Input() actionsColClass: string = 'col-2 d-flex align-items-center';
+  @Input() actionsWrapperClass: string = 'd-flex align-items-center gap-2';
+  @Input() downloadContainerClass: string =
+    'bg-light-gray rounded-3 d-flex align-items-center justify-content-center px-1 cursor-pointer';
+
+  @Output() attachmentView = new EventEmitter<DocumentRow>();
+  @Output() download = new EventEmitter<DocumentRow>();
+
+  onAttachmentView(doc: DocumentRow): void {
+    this.attachmentView.emit(doc);
+  }
+
+  onDownload(doc: DocumentRow): void {
+    this.download.emit(doc);
+  }
+}

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

@@ -0,0 +1,48 @@
+<div [class]="rowClass">
+  <div [class]="dataColClass + ' ' + dataColSpacingClass">
+    <div [class]="dataRowClass">
+      <div [class]="typeColClass">
+        <p [class]="valueClass + ' mb-0 text-ellipsis-one-line'" [title]="doc.DocumentTypeName">
+          {{ doc.DocumentTypeName }}
+        </p>
+      </div>
+
+      <div [class]="numberColClass">
+        <p [class]="valueClass + ' mb-0'">
+          {{ doc.DocumentNumber || '—' }}
+        </p>
+      </div>
+
+      <div [class]="issueDateColClass">
+        <p [class]="valueClass + ' mb-0'">
+          {{ doc.IssueDate ? (doc.IssueDate | date: 'dd/MM/yyyy') : '—' }}
+        </p>
+      </div>
+
+      <div [class]="expiryDateColClass">
+        <p [class]="valueClass + ' mb-0'">
+          {{ doc.ExpiryDate ? (doc.ExpiryDate | date: 'dd/MM/yyyy') : '—' }}
+        </p>
+      </div>
+    </div>
+  </div>
+
+  <div [class]="actionsColClass">
+    @if (doc.Attachments?.length) {
+      <div [class]="actionsWrapperClass">
+        @if (doc.Attachments.length === 1) {
+          <fa-icon [icon]="viewIcon" [class]="viewIconClass" (click)="onAttachmentView()"></fa-icon>
+        } @else {
+          <div class="invisible">
+            <fa-icon [icon]="viewIcon"></fa-icon>
+          </div>
+        }
+
+        <div [class]="downloadContainerClass" (click)="onDownload()">
+          <fa-icon [icon]="downloadIcon" [class]="downloadIconClass"></fa-icon>
+          <span class="ps-1">{{ doc.Attachments.length }}</span>
+        </div>
+      </div>
+    }
+  </div>
+</div>

package/src/lib/my-profile/documents-widgets/components/document-row/document-row.component.ts

@@ -0,0 +1,44 @@
+import { CommonModule } from '@angular/common';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { FontAwesomeModule, IconDefinition } from '@fortawesome/angular-fontawesome';
+import { faFolderArrowDown } from '@fortawesome/pro-light-svg-icons';
+import { faEye } from '@fortawesome/pro-regular-svg-icons';
+import { DocumentRow } from '../../../../shared/types/common';
+
+@Component({
+  selector: 'hr-document-row',
+  standalone: true,
+  imports: [CommonModule, FontAwesomeModule],
+  templateUrl: './document-row.component.html',
+})
+export class HRDocumentRowComponent {
+  @Input() doc!: DocumentRow;
+  @Input() valueClass: string = 'text-dark-gray fs-14';
+  @Input() viewIcon: IconDefinition = faEye;
+  @Input() downloadIcon: IconDefinition = faFolderArrowDown;
+  @Input() viewIconClass: string = 'fs-15 text-dark cursor-pointer';
+  @Input() downloadIconClass: string = 'fs-15 text-dark cursor-pointer';
+  @Input() rowClass: string = 'row';
+  @Input() dataColClass: string = 'col-10';
+  @Input() dataColSpacingClass: string = 'mt-2';
+  @Input() dataRowClass: string = 'row align-items-center py-1 gx-0';
+  @Input() typeColClass: string = 'col-3';
+  @Input() numberColClass: string = 'col-3';
+  @Input() issueDateColClass: string = 'col-3';
+  @Input() expiryDateColClass: string = 'col-3';
+  @Input() actionsColClass: string = 'col-2 d-flex align-items-center';
+  @Input() actionsWrapperClass: string = 'd-flex align-items-center gap-2';
+  @Input() downloadContainerClass: string =
+    'bg-light-gray rounded-3 d-flex align-items-center justify-content-center px-1 cursor-pointer';
+
+  @Output() attachmentView = new EventEmitter<DocumentRow>();
+  @Output() download = new EventEmitter<DocumentRow>();
+
+  onAttachmentView(): void {
+    this.attachmentView.emit(this.doc);
+  }
+
+  onDownload(): void {
+    this.download.emit(this.doc);
+  }
+}

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

@@ -0,0 +1,46 @@
+<div [class]="tabletContainerClass">
+  <div [class]="tabletCardClass" [style.height]="cardHeight" [ngClass]="{ 'me-1': !isOdd, 'ms-1': isOdd }">
+    <div [ngClass]="doc.Attachments?.length ? tabletColWithAttachmentClass : tabletColWithoutAttachmentClass">
+      <p [class]="labelClass">{{ 'Type' | translate }}</p>
+      <p [class]="valueClass">{{ doc.DocumentTypeName }}</p>
+    </div>
+
+    <div [ngClass]="doc.Attachments?.length ? tabletColWithAttachmentClass : tabletColWithoutAttachmentClass">
+      <p [class]="labelClass">{{ 'Number' | translate }}</p>
+      <p [class]="valueClass">
+        {{ doc.DocumentNumber || '—' }}
+      </p>
+    </div>
+
+    @if (doc.Attachments?.length) {
+      <div [class]="tabletActionsColClass">
+        <div [class]="downloadContainerClass" (click)="onDownload()">
+          <fa-icon [icon]="downloadIcon" [class]="downloadIconClass"></fa-icon>
+          <span [class]="downloadCountClass">
+            {{ doc.Attachments.length }}
+          </span>
+        </div>
+      </div>
+    }
+
+    <div
+      [class]="tabletBottomRowSpacingClass"
+      [ngClass]="doc.Attachments?.length ? tabletColWithAttachmentClass : tabletColWithoutAttachmentClass"
+    >
+      <p [class]="labelClass">{{ 'IssueDate' | translate }}</p>
+      <p [class]="valueClass">
+        {{ doc.IssueDate ? (doc.IssueDate | date: 'dd/MM/yyyy') : '—' }}
+      </p>
+    </div>
+
+    <div
+      [class]="tabletBottomRowSpacingClass"
+      [ngClass]="doc.Attachments?.length ? tabletColWithAttachmentClass : tabletColWithoutAttachmentClass"
+    >
+      <p [class]="labelClass">{{ 'ExpiryDate' | translate }}</p>
+      <p [class]="valueClass">
+        {{ doc.ExpiryDate ? (doc.ExpiryDate | date: 'dd/MM/yyyy') : '—' }}
+      </p>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,47 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { HRTranslatePipe } from '../../../../shared/pipes/translate.pipe';
+import { DocumentRow } from '../../../../shared/types/common';
+
+@Component({
+  selector: 'hr-document-tablet-card',
+  standalone: true,
+  imports: [CommonModule, FontAwesomeModule, HRTranslatePipe],
+  templateUrl: './document-tablet-card.component.html',
+})
+export class HrDocumentTabletCardComponent {
+  @Input() doc!: DocumentRow;
+  @Input() isOdd: boolean = false;
+
+  @Input() downloadIcon: any;
+  @Input() viewIcon: any;
+  @Input() cardHeight = '175px';
+
+  // Shared classes (same as large screen)
+  @Input() labelClass: string = 'field-secondary-label-sm';
+  @Input() valueClass: string = 'table-cell-md text-break';
+  @Input() downloadIconClass: string = 'fs-6 text-dark';
+  @Input() downloadContainerClass: string =
+    'bg-light-gray rounded-3 d-flex justify-content-center align-items-center cursor-pointer px-2';
+  @Input() downloadCountClass: string = 'text-dark fs-12 fw-bold ps-2';
+
+  // Tablet-specific classes
+  @Input() tabletContainerClass: string = 'mt-3';
+  @Input() tabletCardClass: string = 'row px-4 py-3 card-shadow';
+  @Input() tabletColWithAttachmentClass: string = 'col-5';
+  @Input() tabletColWithoutAttachmentClass: string = 'col-6';
+  @Input() tabletActionsColClass: string = 'col-1 d-flex align-items-center';
+  @Input() tabletBottomRowSpacingClass: string = 'mt-4';
+
+  @Output() view = new EventEmitter<DocumentRow>();
+  @Output() download = new EventEmitter<DocumentRow>();
+
+  onView() {
+    this.view.emit(this.doc);
+  }
+
+  onDownload() {
+    this.download.emit(this.doc);
+  }
+}

package/src/lib/my-profile/employee-dependents-widget/my-profile-employee-dependents-component.html

@@ -0,0 +1,50 @@
+<sky-section-divider
+  [fontAwesomeIcon]="icon()"
+  [text]="sectionTitle() | translate | uppercase"
+  [iconClass]="headerIconClass()"
+  [textClass]="headerTextClass()"
+  [dividerClass]="headerDividerClass()"
+></sky-section-divider>
+
+<div class="mt-4">
+  <div class="row mb-5">
+    @if (dependents().length) {
+      @for (d of dependents(); track d) {
+        <div class="col-lg-4 col-6 mt-4">
+          <hr-widget-card [contentTemplate]="dependentTemplate" [context]="{ d: d }" [height]="110"></hr-widget-card>
+        </div>
+      }
+    } @else {
+      <sky-empty-design-card
+        [containerClass]="emptyStateContainerClass()"
+        [cardBodyClass]="''"
+        [cardBodyContainerClass]="''"
+        [visibleIcon]="false"
+        [visibleQuickAction]="false"
+        [emptyTextClass]="emptyStateTextClass()"
+        [emptyText]="isLoading() ? (sectionTitle() | translate) + ' ' + ('IsLoading' | translate) : ('ThereAreNoDependentsYet' | translate)"
+      ></sky-empty-design-card>
+    }
+  </div>
+</div>
+
+<ng-template #dependentTemplate let-d="d">
+  <p class="text-dark fs-16 mb-2 d-flex">
+    <span class="text-truncate cursor-pointer" [title]="d.DependentName">
+      {{ d.DependentName }}
+    </span>
+    <span class="mx-1">({{ d.DependentTypeName }})</span>
+  </p>
+  <p class="mb-2 fs-12">
+    <span class="text-muted">{{ 'BirthDate' | translate }}:</span>
+    <span class="text-secondary mx-1">{{ d.BirthDate | date: 'dd/MM/yyyy' }}</span>
+  </p>
+  <p class="mb-0 fs-12">
+    <span class="text-muted">{{ 'NationalNumber' | translate }}:</span>
+    @if (d.NationalNumber) {
+      <span class="text-secondary mx-1">{{ d.NationalNumber }}</span>
+    } @else {
+      <span class="text-secondary mx-1">—</span>
+    }
+  </p>
+</ng-template>

package/src/lib/my-profile/employee-dependents-widget/my-profile-employee-dependents-component.ts

@@ -0,0 +1,63 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component, OnInit, inject, input, output, signal } from '@angular/core';
+import { Dependent } from '../../shared/types/common';
+import { HRSelfWidgetsService } from '../../services/hr-self-widgets.service';
+import { HRTranslatePipe } from '../../shared/pipes/translate.pipe';
+import { WidgetCardComponent } from '../../shared/components/widget-card/widget-card-component';
+import { SkyEmptyDesignCardComponent, SkySectionDividerComponent } from '@skysoftware-co/sky-components-ui';
+import { faUsersLine } from '@fortawesome/pro-light-svg-icons';
+
+@Component({
+  selector: 'hr-my-profile-dependents-widget',
+  standalone: true,
+  imports: [
+    CommonModule,
+    WidgetCardComponent,
+    HRTranslatePipe,
+    SkyEmptyDesignCardComponent,
+    SkySectionDividerComponent,
+  ],
+  templateUrl: './my-profile-employee-dependents-component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MyDependentsWidgetComponent implements OnInit {
+  readonly baseUrl = input<string>('');
+  readonly sectionTitle = input<string>('Dependents');
+  readonly icon = input(faUsersLine);
+  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 emptyStateContainerClass = input<string>(
+    'd-flex flex-column justify-content-center align-items-center my-5',
+  );
+  readonly emptyStateTextClass = input<string>('field-secondary-label-md');
+
+  readonly dependents = signal<Dependent[]>([]);
+  readonly isLoading = signal(true);
+
+  readonly isLoadingChanged = output<boolean>();
+
+  private readonly service = inject(HRSelfWidgetsService);
+
+  ngOnInit(): void {
+    if (!this.baseUrl()) {
+      this.isLoading.set(false);
+      return;
+    }
+
+    this.isLoadingChanged.emit(true);
+
+    this.service.getEmployeeDependents(this.baseUrl()).subscribe({
+      next: res => {
+        this.dependents.set(res ?? []);
+        this.isLoading.set(false);
+        this.isLoadingChanged.emit(false);
+      },
+      error: () => {
+        this.dependents.set([]);
+        this.isLoading.set(false);
+        this.isLoadingChanged.emit(false);
+      },
+    });
+  }
+}

package/src/lib/my-profile/entitlements-others-widget/my-profile-entitlements-others-widget.component.html

@@ -0,0 +1,26 @@
+<sky-section-divider
+  [fontAwesomeIcon]="othersIcon()"
+  [text]="sectionTitle() | translate | uppercase"
+  [iconClass]="headerIconClass()"
+  [textClass]="headerTextClass()"
+  [dividerClass]="headerDividerClass()"
+></sky-section-divider>
+
+<div [class]="rowClass()">
+  <div [class]="columnClass()">
+    <hr-info-field
+      labelKey="OvertimeEligibility"
+      [value]="(isEligibleForOvertime() ? 'Eligible' : 'NotEligible') | translate"
+      [labelClass]="labelClass()"
+      [valueClass]="valueClass()"
+    ></hr-info-field>
+  </div>
+  <div [class]="columnClass()">
+    <hr-info-field
+      labelKey="SocialSecurityEligibility"
+      [value]="(isSocialSecurityMember() ? 'Member' : 'NotMember') | translate"
+      [labelClass]="labelClass()"
+      [valueClass]="valueClass()"
+    ></hr-info-field>
+  </div>
+</div>

package/src/lib/my-profile/entitlements-others-widget/my-profile-entitlements-others-widget.component.ts

@@ -0,0 +1,66 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component, OnInit, inject, input, output, signal } from '@angular/core';
+import { HRTranslatePipe } from '../../shared/pipes/translate.pipe';
+import { faGrid2Plus } from '@fortawesome/pro-light-svg-icons';
+import { 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 { forkJoin } from 'rxjs';
+
+@Component({
+  selector: 'hr-my-profile-entitlements-others-widget',
+  standalone: true,
+  imports: [CommonModule, HRTranslatePipe, SkySectionDividerComponent, HRInfoFieldComponent],
+  templateUrl: './my-profile-entitlements-others-widget.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MyProfileEntitlementsOthersWidgetComponent implements OnInit {
+  readonly baseUrl = input.required<string>();
+  readonly sectionTitle = input<string>('Others');
+  readonly othersIcon = input(faGrid2Plus);
+
+  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 mb-5');
+  readonly columnClass = input<string>('col-md-4 col-6');
+  readonly labelClass = input<string>('field-secondary-label-sm');
+  readonly valueClass = input<string>('fs-14 fw-meduim');
+
+  readonly isLoadingChanged = output<boolean>();
+  readonly errorOccurred = output<string>();
+
+  readonly isEligibleForOvertime = signal(false);
+  readonly isSocialSecurityMember = signal(false);
+  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);
+    forkJoin({
+      overtime: this.selfWidgetsService.getEntitlementsOvertime(this.baseUrl()),
+      socialSecurity: this.selfWidgetsService.getEntitlementsSocialSecurity(this.baseUrl()),
+    }).subscribe({
+      next: responses => {
+        this.isEligibleForOvertime.set(responses.overtime.ResponseData?.IsEligibleForOvertime ?? false);
+        this.isSocialSecurityMember.set(responses.socialSecurity.ResponseData?.IsSocialSecurityMember ?? false);
+        this.isLoading.set(false);
+        this.isLoadingChanged.emit(false);
+      },
+      error: error => {
+        this.isLoading.set(false);
+        this.errorOccurred.emit(error?.error?.ResponseData?.Errors?.[0]?.Message);
+        this.isLoadingChanged.emit(false);
+      },
+    });
+  }
+}

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

@@ -0,0 +1,93 @@
+<sky-section-divider
+  [fontAwesomeIcon]="experienceIcon()"
+  [text]="sectionTitle() | translate | uppercase"
+  [iconClass]="headerIconClass()"
+  [textClass]="headerTextClass()"
+  [dividerClass]="headerDividerClass()"
+></sky-section-divider>
+
+<div [class]="wrapperClass">
+  @if (experiences().length > 0) {
+    <div class="row">
+      <div [class]="headerRowClass()">
+        <div [class]="itemColumnClass()">
+          <p [class]="labelClass()">{{ 'Period' | translate }}</p>
+        </div>
+
+        <div [class]="itemColumnClass()">
+          <p [class]="labelClass()">{{ 'Employer' | translate }}</p>
+        </div>
+
+        <div [class]="itemColumnClass()">
+          <p [class]="labelClass()">{{ 'Position' | translate }}</p>
+        </div>
+
+        <div [class]="itemColumnClass()">
+          <p [class]="labelClass()">{{ 'TerminationReason' | translate }}</p>
+        </div>
+      </div>
+
+      <div [class]="actionsSpacerClass()"></div>
+
+      @for (experience of experiences(); track experience) {
+        <div [class]="itemColumnsWrapperClass()">
+          <div [class]="itemColumnClass()">
+            <p
+              [class]="valueClass()"
+              [title]="(experience.StartDate | date: 'dd/MM/yyyy') + ' - ' + (experience.EndDate | date: 'dd/MM/yyyy')"
+            >
+              {{ (experience.StartDate | date: 'dd/MM/yyyy') + ' - ' + (experience.EndDate | date: 'dd/MM/yyyy') }}
+            </p>
+          </div>
+
+          <div [class]="itemColumnClass()">
+            <p [class]="valueClass()" [title]="experience.Employer ? experience.Employer : ''">
+              @if (experience.Employer) {
+                {{ experience.Employer }}
+              } @else {
+                {{ '—' }}
+              }
+            </p>
+          </div>
+
+          <div [class]="itemColumnClass()">
+            <p [class]="valueClass()" [title]="experience.Position ? experience.Position : ''">
+              @if (experience.Position) {
+                {{ experience.Position }}
+              } @else {
+                {{ '—' }}
+              }
+            </p>
+          </div>
+
+          <div [class]="itemColumnClass()">
+            <p [class]="valueClass()" [title]="experience.TerminationReason ? experience.TerminationReason : ''">
+              @if (experience.TerminationReason) {
+                {{ experience.TerminationReason }}
+              } @else {
+                {{ '—' }}
+              }
+            </p>
+          </div>
+        </div>
+
+        @if (experience.Document) {
+          <div [class]="actionsColumnClass()">
+            <fa-icon [icon]="viewIcon()" [class]="viewIconClass()" (click)="onAttachmentView(experience.Document)"></fa-icon>
+            <fa-icon [icon]="downloadIcon()" [class]="downloadIconClass()" (click)="onAttachmentDownload(experience.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) : ('ThereIsNoExperiencesYet' | translate)"
+    ></sky-empty-design-card>
+  }
+</div>

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

@@ -0,0 +1,102 @@
+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 { faEye } from '@fortawesome/pro-regular-svg-icons';
+import { faUsersRays, faFolderArrowDown } from '@fortawesome/pro-light-svg-icons';
+import { HRSelfWidgetsService } from '../../services/hr-self-widgets.service';
+import { HRTranslatePipe } from '../../shared/pipes/translate.pipe';
+import { IconDefinition } from '@fortawesome/angular-fontawesome';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { Experience } from '../../shared/types/common';
+
+@Component({
+  selector: 'hr-my-profile-experiences-widget',
+  standalone: true,
+  imports: [CommonModule, SkySectionDividerComponent, HRTranslatePipe, SkyEmptyDesignCardComponent, FontAwesomeModule],
+  templateUrl: './my-profile-experiences-widget-component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MyProfileExperiencesWidgetComponent implements OnInit {
+  readonly experiences = signal<Experience[]>([]);
+  readonly isLoading = signal(true);
+
+  readonly baseUrl = input<string>('');
+  readonly sectionTitle = input<string>('experiences');
+
+  readonly viewIcon = input<IconDefinition>(faEye);
+  readonly downloadIcon = input(faFolderArrowDown);
+  readonly experienceIcon = input(faUsersRays);
+
+  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 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 rowMarginBottomClass = input<string>('mb-5');
+  readonly rowMarginBottomEmptyClass = input<string>('mb-4');
+
+  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.getEmployeeExperiences(this.baseUrl()).subscribe({
+      next: res => {
+        this.experiences.set(res ?? []);
+        this.isLoading.set(false);
+
+        this.isLoadingChanged.emit(false);
+      },
+      error: error => {
+        this.experiences.set([]);
+        this.isLoading.set(false);
+        this.errorOccurred.emit(error.error.ResponseData.Errors[0].Message);
+        this.isLoadingChanged.emit(false);
+      },
+    });
+  }
+
+  onAttachmentView(file: any) {
+    this.attachmentViewed.emit(file);
+  }
+
+  onAttachmentDownload(file: any) {
+    this.attachmentDownloaded.emit(file);
+  }
+
+  get wrapperClass(): string {
+    const classes = [this.rowClass()];
+    if (this.experiences().length > 0) {
+      classes.push(this.rowMarginBottomClass());
+    } else {
+      classes.push(this.rowMarginBottomEmptyClass());
+    }
+    return classes.join(' ');
+  }
+}