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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,102 +0,0 @@
-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(' ');
-  }
-}