@skysoftware-co/bayan-hr-widgets-ui 1.1.0 → 1.2.0

package/README.md

@@ -1,6 +1,8 @@
-# shared-ui
+# shared-ui
 
-This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 19.2.15.
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 21.0.6.
+
+**Requires:** Angular `^21.0.0` · TypeScript `~5.9.x` · Node.js `22.x (LTS)`
 
 ## Code scaffolding
 
@@ -32,26 +34,26 @@ components:
 2. My Upcoming Events Widget
 3. My Calendar Widget
 4. My Next Week Vacation Insights Widget
-5. Profile Personal Info Main Widget
-6. Profile Personal Info Contact Widget
-7. Profile Personal Info Address Widget
-8. Profile Personal Info Languages Widget
-9. Profile Personal Info Other Nationalities Widget
-10. Profile Experiences Widget
-11. Profile Degrees Widget
-12. Profile Bank Information Widget
-13. Profile Job Info Main Widget
-14. Profile Job Info Contract Widget
-15. Profile Job Info Salary Widget
-16. Profile Job Info Service Charge Widget
-17. Profile Employee Dependents Widget
-18. Profile Entitlements Vacations Widget
-19. Profile Entitlements Indemnity Widget
-20. Profile Entitlements Ticket Widget
-21. Profile Entitlements Medical Insurance Widget
-22. Profile Entitlements Others Widget
-23. Profile Employee Documents Widget
-24. Profile Dependents Documents Widget
+5. My Profile Personal Info Main Widget
+6. My Profile Personal Info Contact Widget
+7. My Profile Personal Info Address Widget
+8. My Profile Personal Info Languages Widget
+9. My Profile Personal Info Other Nationalities Widget
+10. My Profile Experiences Widget
+11. My Profile Degrees Widget
+12. My Profile Bank Information Widget
+13. My Profile Job Info Main Widget
+14. My Profile Job Info Contract Widget
+15. My Profile Job Info Salary Widget
+16. My Profile Job Info Service Charge Widget
+17. My Profile Employee Dependents Widget
+18. My Profile Entitlements Vacations Widget
+19. My Profile Entitlements Indemnity Widget
+20. My Profile Entitlements Ticket Widget
+21. My Profile Entitlements Medical Insurance Widget
+22. My Profile Entitlements Others Widget
+23. My Profile Employee Documents Widget
+24. My Profile Dependents Documents Widget
 
 ## Dependencies
 This library depends on `@skysoftware-co/bayan-components-ui` package which provides:
@@ -62,27 +64,29 @@ use npm to install this package by command: @skysoftware-co/bayan-hr-widgets-ui
 
 ## Setup
 
-Before using any component, you need to configure the `HRTranslateService` and provide the `HRTranslatePipe` in your application.
+Before using any component, you need to configure translation using `TranslationService` from `@skysoftware-co/sky-components-ui` and `TranslateService` from `@ngx-translate/core`, then provide `TranslatePipe` in your application.
 
 ### 1. Set language and lexicon in your App Component
 
 ```typescript
 import { Component, inject, OnInit } from '@angular/core';
-import { HRTranslateService } from '@skysoftware-co/bayan-hr-widgets-ui';
+import { TranslateService } from '@ngx-translate/core';
+import { TranslationService } from '@skysoftware-co/sky-components-ui';
 
 @Component({
   selector: 'app-root',
   ...
 })
 export class AppComponent implements OnInit {
-  private hrTranslateService = inject(HRTranslateService);
+  private translateService = inject(TranslateService);
+  private translationService = inject(TranslationService);
 
   ngOnInit(): void {
-    // Set the active language (built-in: 'en', 'ar', 'fr')
-    this.hrTranslateService.setLanguage('en');
+    // Set the active language ('en', 'ar', 'fr')
+    this.translateService.use('en');
 
     // Optionally set a lexicon for additional or override translations
-    this.hrTranslateService.setLexicon({
+    this.translationService.setLexicon({
       'CustomKey': 'Custom Value',
       ...
     });
@@ -90,18 +94,18 @@ export class AppComponent implements OnInit {
 }
 ```
 
-### 2. Provide the HRTranslatePipe
+### 2. Provide the TranslatePipe
 
-Add `HRTranslatePipe` to the `providers` array in your App Component:
+Add `TranslatePipe` to the `providers` array in your App Component:
 
 ```typescript
-import { HRTranslatePipe } from '@skysoftware-co/bayan-hr-widgets-ui';
+import { TranslatePipe } from '@skysoftware-co/sky-components-ui';
 
 @Component({
   selector: 'app-root',
   standalone: true,
   imports: [...],
-  providers: [HRTranslatePipe],
+  providers: [TranslatePipe],
   ...
 })
 export class AppComponent { }
@@ -328,18 +332,18 @@ This component displays a "Next Week Vacation Insights" card showing two badges:
 - **Upcoming list**: `GET {baseUrl}/hr/widgets/me/team/next-week-vacation-insights/upcoming-vacations`
 - **Expected to return list**: `GET {baseUrl}/hr/widgets/me/team/next-week-vacation-insights/expected-to-return`
 
-## Profile Widgets
+## My Profile Widgets
 
 The package also exports profile-focused widgets used in the employee profile page.
 
-## Profile Personal Info Main Widget
+## My Profile Personal Info Main Widget
 
 ### Usage
 ```html
-<hr-profile-personal-info-main-widget
+<hr-my-profile-personal-info-main-widget
   [baseUrl]="baseUrl"
   (isLoadingChanged)="onMainLoadingChanged($event)">
-</hr-profile-personal-info-main-widget>
+</hr-my-profile-personal-info-main-widget>
 ```
 
 ### Input Properties
@@ -367,14 +371,14 @@ The package also exports profile-focused widgets used in the employee profile pa
 - `isLoadingChanged: EventEmitter<boolean>` - Emitted when loading state changes.
 - `errorOccurred: EventEmitter<string>` - Emitted when API request fails.
 
-## Profile Experiences Widget
+## My Profile Experiences Widget
 
 ### Usage
 ```html
-<hr-profile-experiences-widget
+<hr-my-profile-experiences-widget
   [baseUrl]="baseUrl"
   (isLoadingChanged)="onExperiencesLoadingChanged($event)">
-</hr-profile-experiences-widget>
+</hr-my-profile-experiences-widget>
 ```
 
 ### Input Properties
@@ -410,14 +414,14 @@ The package also exports profile-focused widgets used in the employee profile pa
 - `attachmentDownloaded: EventEmitter<any>` - Emitted when attachment download icon is clicked.
 - `errorOccurred: EventEmitter<string>` - Emitted when API request fails.
 
-## Profile Degrees Widget
+## My Profile Degrees Widget
 
 ### Usage
 ```html
-<hr-profile-degrees-widget
+<hr-my-profile-degrees-widget
   [baseUrl]="baseUrl"
   (isLoadingChanged)="onDegreesLoadingChanged($event)">
-</hr-profile-degrees-widget>
+</hr-my-profile-degrees-widget>
 ```
 
 ### Input Properties
@@ -453,15 +457,15 @@ The package also exports profile-focused widgets used in the employee profile pa
 - `attachmentDownloaded: EventEmitter<any>` - Emitted when attachment download icon is clicked.
 - `errorOccurred: EventEmitter<string>` - Emitted when API request fails.
 
-## Profile Personal Info Contact Widget
+## My Profile Personal Info Contact Widget
 
 ### Usage
 ```html
-<hr-profile-personal-info-contact-widget
+<hr-my-profile-contact-widget
   [baseUrl]="baseUrl"
   [showEmergencyContact]="true"
   (isLoadingChanged)="onContactLoadingChanged($event)">
-</hr-profile-personal-info-contact-widget>
+</hr-my-profile-contact-widget>
 ```
 
 ### Input Properties
@@ -493,14 +497,14 @@ The package also exports profile-focused widgets used in the employee profile pa
 - `isLoadingChanged: EventEmitter<boolean>` - Emitted when loading state changes.
 - `errorOccurred: EventEmitter<string>` - Emitted when API request fails.
 
-## Profile Personal Info Address Widget
+## My Profile Personal Info Address Widget
 
 ### Usage
 ```html
-<hr-profile-personal-info-address-widget
+<hr-my-profile-address-widget
   [baseUrl]="baseUrl"
   (isLoadingChanged)="onAddressLoadingChanged($event)">
-</hr-profile-personal-info-address-widget>
+</hr-my-profile-address-widget>
 ```
 
 ### Input Properties
@@ -525,15 +529,15 @@ The package also exports profile-focused widgets used in the employee profile pa
 - `isLoadingChanged: EventEmitter<boolean>` - Emitted when loading state changes.
 - `errorOccurred: EventEmitter<string>` - Emitted when API request fails.
 
-## Profile Personal Info Languages Widget
+## My Profile Personal Info Languages Widget
 
 ### Usage
 ```html
-<hr-profile-personal-info-languages-widget
+<hr-my-profile-languages-widget
   [baseUrl]="baseUrl"
   (hasDataChange)="onLanguagesDataChange($event)"
   (isLoadingChanged)="onLanguagesLoadingChanged($event)">
-</hr-profile-personal-info-languages-widget>
+</hr-my-profile-languages-widget>
 ```
 
 ### Input Properties
@@ -554,15 +558,15 @@ The package also exports profile-focused widgets used in the employee profile pa
 - `isLoadingChanged: EventEmitter<boolean>` - Emitted when loading state changes.
 - `errorOccurred: EventEmitter<string>` - Emitted when API request fails.
 
-## Profile Personal Info Other Nationalities Widget
+## My Profile Personal Info Other Nationalities Widget
 
 ### Usage
 ```html
-<hr-profile-personal-info-other-nationalities-widget
+<hr-my-profile-other-nationalities-widget
   [baseUrl]="baseUrl"
   (hasDataChange)="onOtherNationalitiesDataChange($event)"
   (isLoadingChanged)="onOtherNationalitiesLoadingChanged($event)">
-</hr-profile-personal-info-other-nationalities-widget>
+</hr-my-profile-other-nationalities-widget>
 ```
 
 ### Input Properties
@@ -584,16 +588,16 @@ The package also exports profile-focused widgets used in the employee profile pa
 - `isLoadingChanged: EventEmitter<boolean>` - Emitted when loading state changes.
 - `errorOccurred: EventEmitter<string>` - Emitted when API request fails.
 
-## Profile Bank Information Widget
+## My Profile Bank Information Widget
 
 ### Usage
 ```html
-<hr-profile-bank-info-widget
+<hr-my-profile-bank-info-widget
   [baseUrl]="baseUrl"
   [currencyCode]="currencyCode"
   [currencyDecimals]="currencyDecimals"
   (isLoadingChanged)="onBankLoadingChanged($event)">
-</hr-profile-bank-info-widget>
+</hr-my-profile-bank-info-widget>
 ```
 
 ### Input Properties
@@ -628,16 +632,16 @@ The package also exports profile-focused widgets used in the employee profile pa
 - `isLoadingChanged: EventEmitter<boolean>` - Emitted when loading state changes.
 - `errorOccurred: EventEmitter<string>` - Emitted when API request fails.
 
-## Profile Job Information Widgets
+## My Profile Job Information Widgets
 
-## Profile Job Info Main Widget
+## My Profile Job Info Main Widget
 
 ### Usage
 ```html
-<hr-profile-job-info-main-widget
+<hr-my-profile-job-info-widget
   [baseUrl]="baseUrl"
   (isLoadingChanged)="onJobMainLoadingChanged($event)">
-</hr-profile-job-info-main-widget>
+</hr-my-profile-job-info-widget>
 ```
 
 ### Input Properties
@@ -662,14 +666,14 @@ The package also exports profile-focused widgets used in the employee profile pa
 - `isLoadingChanged: EventEmitter<boolean>` - Emitted when loading state changes.
 - `errorOccurred: EventEmitter<string>` - Emitted when API request fails.
 
-## Profile Job Info Contract Widget
+## My Profile Job Info Contract Widget
 
 ### Usage
 ```html
-<hr-profile-job-info-contract-widget
+<hr-my-profile-contract-widget
   [baseUrl]="baseUrl"
   (isLoadingChanged)="onJobContractLoadingChanged($event)">
-</hr-profile-job-info-contract-widget>
+</hr-my-profile-contract-widget>
 ```
 
 ### Input Properties
@@ -694,16 +698,16 @@ The package also exports profile-focused widgets used in the employee profile pa
 - `isLoadingChanged: EventEmitter<boolean>` - Emitted when loading state changes.
 - `errorOccurred: EventEmitter<string>` - Emitted when API request fails.
 
-## Profile Job Info Salary Widget
+## My Profile Job Info Salary Widget
 
 ### Usage
 ```html
-<hr-profile-job-info-salary-widget
+<hr-my-profile-salary-widget
   [baseUrl]="baseUrl"
   [currencyCode]="currencyCode"
   [currencyDecimals]="currencyDecimals"
   (isLoadingChanged)="onJobSalaryLoadingChanged($event)">
-</hr-profile-job-info-salary-widget>
+</hr-my-profile-salary-widget>
 ```
 
 ### Input Properties
@@ -729,15 +733,15 @@ The package also exports profile-focused widgets used in the employee profile pa
 - `isLoadingChanged: EventEmitter<boolean>` - Emitted when loading state changes.
 - `errorOccurred: EventEmitter<string>` - Emitted when API request fails.
 
-## Profile Job Info Service Charge Widget
+## My Profile Job Info Service Charge Widget
 
 ### Usage
 ```html
-<hr-profile-job-info-service-charge-widget
+<hr-my-profile-charge-widget
   [baseUrl]="baseUrl"
   [currencyCode]="currencyCode"
   (isLoadingChanged)="onJobServiceChargeLoadingChanged($event)">
-</hr-profile-job-info-service-charge-widget>
+</hr-my-profile-charge-widget>
 ```
 
 ### Input Properties
@@ -760,14 +764,14 @@ The package also exports profile-focused widgets used in the employee profile pa
 - `isLoadingChanged: EventEmitter<boolean>` - Emitted when loading state changes.
 - `errorOccurred: EventEmitter<string>` - Emitted when API request fails.
 
-## Profile Employee Dependents Widget
+## My Profile Employee Dependents Widget
 
 ### Usage
 ```html
-<hr-profile-dependents-widget
+<hr-my-profile-dependents-widget
   [baseUrl]="baseUrl"
   (isLoadingChanged)="onDependentsLoadingChanged($event)">
-</hr-profile-dependents-widget>
+</hr-my-profile-dependents-widget>
 ```
 
 This component displays employee dependents as cards (3 per row on large screens). Each card shows the dependent's name, type, birth date, and national number. It uses the shared `hr-widget-card` component for card rendering.
@@ -787,18 +791,18 @@ This component displays employee dependents as cards (3 per row on large screens
 ### Output Events
 - `isLoadingChanged: EventEmitter<boolean>` - Emitted when loading state changes.
 
-## Profile Entitlement Widgets
+## My Profile Entitlement Widgets
 
 The package includes entitlement widgets for displaying employee benefits and entitlements in the profile page.
 
-## Profile Entitlements Vacations Widget
+## My Profile Entitlements Vacations Widget
 
 ### Usage
 ```html
-<hr-profile-entitlements-vacations-widget
+<hr-my-profile-vacations-widget
   [baseUrl]="baseUrl"
   (isLoadingChanged)="onVacationsLoadingChanged($event)">
-</hr-profile-entitlements-vacations-widget>
+</hr-my-profile-vacations-widget>
 ```
 
 This component displays a list of vacation entitlements (vacation type name and entitlement days) in a two-column grid layout.
@@ -824,15 +828,15 @@ This component displays a list of vacation entitlements (vacation type name and
 - `isLoadingChanged: EventEmitter<boolean>` - Emitted when loading state changes.
 - `errorOccurred: EventEmitter<string>` - Emitted when API request fails.
 
-## Profile Entitlements Indemnity Widget
+## My Profile Entitlements Indemnity Widget
 
 ### Usage
 ```html
-<hr-profile-entitlements-indemnity-widget
+<hr-my-profile-indemnity-widget
   [baseUrl]="baseUrl"
   [currencyCode]="currencyCode"
   (isLoadingChanged)="onIndemnityLoadingChanged($event)">
-</hr-profile-entitlements-indemnity-widget>
+</hr-my-profile-indemnity-widget>
 ```
 
 This component shows indemnity entitlement details including eligibility status, service years, and start date. Uses `hr-info-field` sub-components for layout.
@@ -862,17 +866,17 @@ This component shows indemnity entitlement details including eligibility status,
 - `errorOccurred: EventEmitter<string>` - Emitted when API request fails.
 - `hasDataChanged: EventEmitter<boolean>` - Emitted when data availability changes after loading.
 
-## Profile Entitlements Ticket Widget
+## My Profile Entitlements Ticket Widget
 
 ### Usage
 ```html
-<hr-profile-entitlements-ticket-widget
+<hr-my-profile-ticket-widget
   [baseUrl]="baseUrl"
   (isLoadingChanged)="onTicketLoadingChanged($event)">
-</hr-profile-entitlements-ticket-widget>
+</hr-my-profile-ticket-widget>
 ```
 
-This component displays ticket entitlements as cards — one for the employee and one per dependent. Each card shows name, ticket class, sector, and entitlement frequency. Uses `hr-ticket-card` sub-component with `hr-widget-card` for card rendering.
+This component displays ticket entitlements as cards — one for the employee and one per dependent. Each card shows name, ticket class, sector, and entitlement frequency. Uses `hr-ticket-card` sub-component with `hr-widget-card` for card rendering.
 
 ### Input Properties
 | Input | Type | Default Value | Description |
@@ -897,17 +901,17 @@ This component displays ticket entitlements as cards — one for the employee an
 - `isLoadingChanged: EventEmitter<boolean>` - Emitted when loading state changes.
 - `errorOccurred: EventEmitter<string>` - Emitted when API request fails.
 
-## Profile Entitlements Medical Insurance Widget
+## My Profile Entitlements Medical Insurance Widget
 
 ### Usage
 ```html
-<hr-profile-entitlements-medical-insurance-widget
+<hr-my-profile-medical-insurance-widget
   [baseUrl]="baseUrl"
   (isLoadingChanged)="onMedicalInsuranceLoadingChanged($event)">
-</hr-profile-entitlements-medical-insurance-widget>
+</hr-my-profile-medical-insurance-widget>
 ```
 
-This component displays medical insurance information as cards — the employee card shows class, number, coverage date, total employee/employer share; dependent cards show class, number, and coverage date. Uses `hr-medical-insurance-card` sub-component with `hr-widget-card` for card rendering.
+This component displays medical insurance information as cards — the employee card shows class, number, coverage date, total employee/employer share; dependent cards show class, number, and coverage date. Uses `hr-medical-insurance-card` sub-component with `hr-widget-card` for card rendering.
 
 ### Input Properties
 | Input | Type | Default Value | Description |
@@ -932,14 +936,14 @@ This component displays medical insurance information as cards — the employee
 - `isLoadingChanged: EventEmitter<boolean>` - Emitted when loading state changes.
 - `errorOccurred: EventEmitter<string>` - Emitted when API request fails.
 
-## Profile Entitlements Others Widget
+## My Profile Entitlements Others Widget
 
 ### Usage
 ```html
-<hr-profile-entitlements-others-widget
+<hr-my-profile-entitlements-others-widget
   [baseUrl]="baseUrl"
   (isLoadingChanged)="onOthersLoadingChanged($event)">
-</hr-profile-entitlements-others-widget>
+</hr-my-profile-entitlements-others-widget>
 ```
 
 This component displays two fields: overtime eligibility (Eligible/NotEligible) and social security membership (Member/NotMember). Fetches both values via `forkJoin`.
@@ -962,17 +966,17 @@ This component displays two fields: overtime eligibility (Eligible/NotEligible)
 - `isLoadingChanged: EventEmitter<boolean>` - Emitted when loading state changes.
 - `errorOccurred: EventEmitter<string>` - Emitted when API request fails.
 
-## Profile Employee Documents Widget
+## My Profile Employee Documents Widget
 
 ### Usage
 ```html
-<hr-profile-personal-documents-widget
+<hr-my-profile-personal-documents-widget
   [baseUrl]="baseUrl"
   [employeeName]="employeeName"
   (isLoadingChanged)="onLoadingChanged($event)"
   (attachmentViewed)="onAttachmentViewed($event)"
   (attachmentDownloaded)="onAttachmentDownloaded($event)">
-</hr-profile-personal-documents-widget>
+</hr-my-profile-personal-documents-widget>
 ```
 
 This component displays employee personal/official documents in a table layout (desktop) or card grid layout (tablet/mobile). Each document shows type, number, issue date, expiry date, and attachment actions. Uses shared `hr-document-card` and `hr-document-tablet-card` sub-components.
@@ -1028,16 +1032,16 @@ This component displays employee personal/official documents in a table layout (
 - `attachmentDownloaded: EventEmitter<any>` - Emitted when attachment download icon is clicked.
 - `errorOccurred: EventEmitter<string>` - Emitted when API request fails.
 
-## Profile Dependents Documents Widget
+## My Profile Dependents Documents Widget
 
 ### Usage
 ```html
-<hr-profile-dependents-documents-widget
+<hr-my-profile-dependents-documents-widget
   [baseUrl]="baseUrl"
   (isLoadingChanged)="onLoadingChanged($event)"
   (attachmentViewed)="onAttachmentViewed($event)"
   (attachmentDownloaded)="onAttachmentDownloaded($event)">
-</hr-profile-dependents-documents-widget>
+</hr-my-profile-dependents-documents-widget>
 ```
 
 This component displays dependent documents grouped by dependent. Each group shows the dependent name and type as a title, followed by document rows (desktop) or card grid (tablet/mobile). Uses shared `hr-document-card` and `hr-document-tablet-card` sub-components.
@@ -1091,3 +1095,4 @@ This component displays dependent documents grouped by dependent. Each group sho
 - `attachmentViewed: EventEmitter<any>` - Emitted when attachment view icon is clicked.
 - `attachmentDownloaded: EventEmitter<any>` - Emitted when attachment download icon is clicked.
 - `errorOccurred: EventEmitter<string>` - Emitted when API request fails.
+