@skysoftware-co/bayan-hr-widgets-ui 1.0.35 → 1.0.37

package/README.md

@@ -25,13 +25,32 @@ Run `ng test shared-ui` to execute the unit tests via [Karma](https://karma-runn
 To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
 
 ## Sky Bayan HR Components
-
+ 
 This package contains shared HR components used in Bayan HR system, you can find in first installation the below
 components:
 1. My Main Details Widget
 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
+
 ## Dependencies
 This library depends on `@skysoftware-co/bayan-components-ui` package which provides:
 - Employee Badge Component
@@ -272,15 +291,15 @@ The component calls `GET {baseUrl}/hr/employee-portal/calendar` with query param
 - Header: `api-version: 2`
 
 
-## My Vacation Team Widget Component
+## My Next Week Vacation Insights Widget Component
 
 ### Usage
 ```html
-<hr-my-vacation-team-widget
+<hr-my-next-week-vacation-insights-widget
   [baseUrl]="environment.baseUrl"
   [showProperty]="true"
   (isLoadingChanged)="onLoadingChanged($event)">
-</hr-my-vacation-team-widget>
+</hr-my-next-week-vacation-insights-widget>
 ```
 
 This component displays a "Next Week Vacation Insights" card showing two badges: **Upcoming Vacations** and **Expected To Return** counts for team subordinates. Clicking a badge opens a popup with a paginated, searchable data grid listing the relevant employees. It uses `SkyWidgetSectionItemComponent` from `@skysoftware-co/sky-components-ui` for badge display and `BayanEmployeeBadgeComponent` from `@skysoftware-co/bayan-components-ui` for employee photos in the popup.
@@ -290,20 +309,22 @@ This component displays a "Next Week Vacation Insights" card showing two badges:
 |-------|------|---------------|-------------|
 | `baseUrl` | string | `''` | Base URL for API calls |
 | `showProperty` | boolean | `false` | Show employee property badge in the popup grid |
-| `cardClass` | string | `'card rounded rounded-4 card-shadow p-16 border-top-0 h-100 p-4'` | Card container CSS class |
-| `titleClass` | string | `'table-header-lg fw-meduim'` | Card title CSS class |
+| `cardClass` | string | `'card rounded rounded-4 card-shadow border-top-0 h-100 p-4'` | Card container CSS class |
+| `titleClass` | string | `'table-header-lg fw-meduim mb-3 mt-2'` | Card title CSS class |
 | `valueClass` | string | `'fs-24 mt-1 link-dark hover-primary text-decoration-none'` | Badge value CSS class (clickable) |
 | `disabledValueClass` | string | `'fs-24 mt-1 text-muted pe-none text-decoration-none'` | Badge value CSS class when count is 0 |
-| `upcomingContainerClass` | string | `'border-start border-5 mb-3'` | Upcoming vacations badge container CSS class |
+| `upcomingContainerClass` | string | `'border-start border-5 mb-4'` | Upcoming vacations badge container CSS class |
 | `expectedContainerClass` | string | `'border-start border-5'` | Expected to return badge container CSS class |
+| `firstRowClass` | string | `'mb-4'` | CSS class for the first badge row wrapper |
+| `secondRowClass` | string | `'mt-3'` | CSS class for the second badge row wrapper |
 
 ### Output Events
 - `isLoadingChanged: EventEmitter<boolean>` - Emitted when loading state changes
 
 ### API Endpoints
-- **Summary**: `GET {baseUrl}/hr/widgets/me/team/subordinates/vacations/summary?ShowDirectSubordinatesOnly=false`
-- **Upcoming list**: `GET {baseUrl}/hr/widgets/me/team/subordinates/vacations/upcoming`
-- **Expected to return list**: `GET {baseUrl}/hr/widgets/me/team/subordinates/vacations/expected-to-return`
+- **Summary**: `GET {baseUrl}/hr/widgets/me/team/next-week-vacation-insights/summary?ShowDirectSubordinatesOnly=false`
+- **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
 
@@ -449,13 +470,15 @@ The package also exports profile-focused widgets used in the employee profile pa
 | `headerTextClass` | string | `'fs-16 mt-2 text-secondary'` | Header text CSS class |
 | `headerDividerClass` | string | `'flex-grow-1 ms-2'` | Header divider CSS class |
 | `rowClass` | string | `'row mt-4'` | Row container CSS class |
-| `columnClass` | string | `'col-md-4 col-6'` | Column CSS class |
-| `responsiveTopSpacingColumnClass` | string | `'col-md-4 col-6 mt-md-0 mt-4'` | Responsive top spacing column CSS class |
+| `columnClass` | string | `'col-6'` | Column CSS class |
+| `responsiveTopSpacingColumnClass` | string | `'col-6 mt-4'` | Responsive top spacing column CSS class |
 | `topSpacingBottomMdSpacingColumnClass` | string | `'col-md-4 col-6 mt-4 mb-md-5'` | Top spacing + medium bottom spacing CSS class |
 | `topSpacingBottomSpacingColumnClass` | string | `'col-md-4 col-6 mt-4 mb-5'` | Top spacing + bottom spacing CSS class |
 | `labelClass` | string | `'field-secondary-label-sm'` | Label CSS class |
 | `valueClass` | string | `'fs-14 fw-medium'` | Value CSS class |
-| `emergencyContactLabelClass` | string | `'fs-14 fw-semi-bold'` | Emergency contact title CSS class |
+| `emergencyContactLabelClass` | string | `'fs-14 fw-semibold'` | Emergency contact title CSS class |
+| `emergencyContactColumnClass` | string | `'col-md-4 col-6'` | Emergency contact column CSS class |
+| `emergencyContactResponsiveColumnClass` | string | `'col-md-4 col-6 mt-md-0 mt-4'` | Emergency contact responsive column CSS class |
 | `emptyStateContainerClass` | string | `'d-flex flex-column justify-content-center align-items-center my-5'` | Empty/loading container CSS class |
 | `emptyStateTextClass` | string | `'field-secondary-label-md'` | Empty/loading text CSS class |
 | `contactIcon` | IconDefinition | `faPhone` | Header icon |
@@ -735,3 +758,204 @@ 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
+
+### Usage
+```html
+<hr-profile-dependents-widget
+  [baseUrl]="baseUrl"
+  (isLoadingChanged)="onDependentsLoadingChanged($event)">
+</hr-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.
+
+### Input Properties
+| Input | Type | Default Value | Description |
+|-------|------|---------------|-------------|
+| `baseUrl` | string | `''` | Base URL for API calls |
+| `sectionTitle` | string | `'Dependents'` | Section title translation key |
+| `icon` | IconDefinition | `faUsersLine` | Header icon |
+| `headerIconClass` | string | `'primary-icon-xl'` | Header icon CSS class |
+| `headerTextClass` | string | `'fs-16 mt-2 text-secondary'` | Header text CSS class |
+| `headerDividerClass` | string | `'flex-grow-1 ms-2'` | Header divider CSS class |
+| `emptyStateContainerClass` | string | `'d-flex flex-column justify-content-center align-items-center my-5'` | Empty/loading container CSS class |
+| `emptyStateTextClass` | string | `'field-secondary-label-md'` | Empty/loading text CSS class |
+
+### Output Events
+- `isLoadingChanged: EventEmitter<boolean>` - Emitted when loading state changes.
+
+## Profile Entitlement Widgets
+
+The package includes entitlement widgets for displaying employee benefits and entitlements in the profile page.
+
+## Profile Entitlements Vacations Widget
+
+### Usage
+```html
+<hr-profile-entitlements-vacations-widget
+  [baseUrl]="baseUrl"
+  (isLoadingChanged)="onVacationsLoadingChanged($event)">
+</hr-profile-entitlements-vacations-widget>
+```
+
+This component displays a list of vacation entitlements (vacation type name and entitlement days) in a two-column grid layout.
+
+### Input Properties
+| Input | Type | Default Value | Description |
+|-------|------|---------------|-------------|
+| `baseUrl` | string | `''` | Base URL for API calls (required) |
+| `sectionTitle` | string | `'Vacations'` | Section title translation key |
+| `vacationsIcon` | IconDefinition | `faIslandTropical` | Header icon |
+| `headerIconClass` | string | `'primary-icon-xl'` | Header icon CSS class |
+| `headerTextClass` | string | `'mt-2 field-secondary-label-lg'` | Header text CSS class |
+| `headerDividerClass` | string | `'flex-grow-1 ms-2'` | Header divider CSS class |
+| `rowClass` | string | `'row mt-4'` | Row container CSS class |
+| `labelClass` | string | `'field-secondary-label-sm'` | Label CSS class |
+| `valueClass` | string | `'fs-14 fw-meduim mt-2'` | Value CSS class |
+| `labelColumnClass` | string | `'col-6'` | Label column CSS class |
+| `valueColumnClass` | string | `'col-6'` | Value column CSS class |
+| `emptyStateContainerClass` | string | `'d-flex flex-column justify-content-center align-items-center my-5'` | Empty/loading container CSS class |
+| `emptyStateTextClass` | string | `'field-secondary-label-md'` | Empty/loading text CSS class |
+
+### Output Events
+- `isLoadingChanged: EventEmitter<boolean>` - Emitted when loading state changes.
+- `errorOccurred: EventEmitter<string>` - Emitted when API request fails.
+
+## Profile Entitlements Indemnity Widget
+
+### Usage
+```html
+<hr-profile-entitlements-indemnity-widget
+  [baseUrl]="baseUrl"
+  [currencyCode]="currencyCode"
+  (isLoadingChanged)="onIndemnityLoadingChanged($event)">
+</hr-profile-entitlements-indemnity-widget>
+```
+
+This component shows indemnity entitlement details including eligibility status, service years, and start date. Uses `hr-info-field` sub-components for layout.
+
+### Input Properties
+| Input | Type | Default Value | Description |
+|-------|------|---------------|-------------|
+| `baseUrl` | string | `''` | Base URL for API calls (required) |
+| `currencyCode` | string | `''` | Currency code for amount display |
+| `currencyDecimals` | number | `0` | Decimal precision for amount formatting |
+| `sectionTitle` | string | `'indemnity'` | Section title translation key |
+| `indemnityIcon` | IconDefinition | `faFileSignature` | Header icon |
+| `headerIconClass` | string | `'primary-icon-xl'` | Header icon CSS class |
+| `headerTextClass` | string | `'mt-2 field-secondary-label-lg'` | Header text CSS class |
+| `headerDividerClass` | string | `'flex-grow-1 ms-2'` | Header divider CSS class |
+| `rowClass` | string | `'row mt-4'` | Row container CSS class |
+| `columnClass` | string | `'col-6'` | Field column CSS class |
+| `topSpacingColumnClass` | string | `'col-6 mt-4'` | Field column with top spacing CSS class |
+| `labelClass` | string | `'field-secondary-label-sm'` | Label CSS class |
+| `valueClass` | string | `'fs-14 fw-meduim'` | Value CSS class |
+| `dateFormat` | string | `'dd/MM/yyyy'` | Date format for start date |
+| `emptyStateContainerClass` | string | `'d-flex flex-column justify-content-center align-items-center my-5'` | Empty/loading container CSS class |
+| `emptyStateTextClass` | string | `'field-secondary-label-md'` | Empty/loading text CSS class |
+
+### Output Events
+- `isLoadingChanged: EventEmitter<boolean>` - Emitted when loading state changes.
+- `errorOccurred: EventEmitter<string>` - Emitted when API request fails.
+
+## Profile Entitlements Ticket Widget
+
+### Usage
+```html
+<hr-profile-entitlements-ticket-widget
+  [baseUrl]="baseUrl"
+  (isLoadingChanged)="onTicketLoadingChanged($event)">
+</hr-profile-entitlements-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.
+
+### Input Properties
+| Input | Type | Default Value | Description |
+|-------|------|---------------|-------------|
+| `baseUrl` | string | `''` | Base URL for API calls (required) |
+| `sectionTitle` | string | `'tickets'` | Section title translation key |
+| `ticketsIcon` | IconDefinition | `faTicketsAirline` | Header icon |
+| `headerIconClass` | string | `'primary-icon-xl'` | Header icon CSS class |
+| `headerTextClass` | string | `'mt-2 field-secondary-label-lg'` | Header text CSS class |
+| `headerDividerClass` | string | `'flex-grow-1 ms-2'` | Header divider CSS class |
+| `columnClass` | string | `'col-lg-4 col-6 mt-4'` | Card column CSS class |
+| `cardHeight` | number | `135` | Card height in pixels |
+| `cardClass` | string | `'p-3 card-shadow border border-1 h-100 rounded rounded-2'` | Card CSS class |
+| `nameClass` | string | `'text-dark fs-16'` | Name text CSS class |
+| `subtitleClass` | string | `'field-secondary-label-sm mb-3'` | Subtitle CSS class |
+| `labelClass` | string | `'fs-12 text-secondary'` | Label CSS class |
+| `valueClass` | string | `'fs-12 text-dark-gray mx-1'` | Value CSS class |
+| `emptyStateContainerClass` | string | `'d-flex flex-column justify-content-center align-items-center my-5'` | Empty/loading container CSS class |
+| `emptyStateTextClass` | string | `'field-secondary-label-md'` | Empty/loading text CSS class |
+
+### Output Events
+- `isLoadingChanged: EventEmitter<boolean>` - Emitted when loading state changes.
+- `errorOccurred: EventEmitter<string>` - Emitted when API request fails.
+
+## Profile Entitlements Medical Insurance Widget
+
+### Usage
+```html
+<hr-profile-entitlements-medical-insurance-widget
+  [baseUrl]="baseUrl"
+  (isLoadingChanged)="onMedicalInsuranceLoadingChanged($event)">
+</hr-profile-entitlements-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.
+
+### Input Properties
+| Input | Type | Default Value | Description |
+|-------|------|---------------|-------------|
+| `baseUrl` | string | `''` | Base URL for API calls (required) |
+| `sectionTitle` | string | `'MedicalInsurance'` | Section title translation key |
+| `medicalInsuranceIcon` | IconDefinition | `faNotesMedical` | Header icon |
+| `headerIconClass` | string | `'primary-icon-xl'` | Header icon CSS class |
+| `headerTextClass` | string | `'mt-2 field-secondary-label-lg'` | Header text CSS class |
+| `headerDividerClass` | string | `'flex-grow-1 ms-2'` | Header divider CSS class |
+| `labelClass` | string | `'field-secondary-label-sm'` | Label CSS class |
+| `valueClass` | string | `'text-dark-gray mx-1'` | Value CSS class |
+| `columnClass` | string | `'col-lg-4 col-6 mt-4'` | Card column CSS class |
+| `cardHeight` | number | `185` | Card height in pixels |
+| `cardClass` | string | `'p-3 card-shadow h-100 border border-1 rounded rounded-2'` | Card CSS class |
+| `nameClass` | string | `'text-dark fs-16 mb-2'` | Name text CSS class |
+| `dateFormat` | string | `'dd/MM/yyyy'` | Date format for coverage date |
+| `emptyStateContainerClass` | string | `'d-flex flex-column justify-content-center align-items-center my-5'` | Empty/loading container CSS class |
+| `emptyStateTextClass` | string | `'field-secondary-label-md'` | Empty/loading text CSS class |
+
+### Output Events
+- `isLoadingChanged: EventEmitter<boolean>` - Emitted when loading state changes.
+- `errorOccurred: EventEmitter<string>` - Emitted when API request fails.
+
+## Profile Entitlements Others Widget
+
+### Usage
+```html
+<hr-profile-entitlements-others-widget
+  [baseUrl]="baseUrl"
+  (isLoadingChanged)="onOthersLoadingChanged($event)">
+</hr-profile-entitlements-others-widget>
+```
+
+This component displays two fields: overtime eligibility (Eligible/NotEligible) and social security membership (Member/NotMember). Fetches both values via `forkJoin`.
+
+### Input Properties
+| Input | Type | Default Value | Description |
+|-------|------|---------------|-------------|
+| `baseUrl` | string | `''` | Base URL for API calls (required) |
+| `sectionTitle` | string | `'Others'` | Section title translation key |
+| `othersIcon` | IconDefinition | `faGrid2Plus` | Header icon |
+| `headerIconClass` | string | `'primary-icon-xl'` | Header icon CSS class |
+| `headerTextClass` | string | `'mt-2 field-secondary-label-lg'` | Header text CSS class |
+| `headerDividerClass` | string | `'flex-grow-1 ms-2'` | Header divider CSS class |
+| `rowClass` | string | `'row mt-4 mb-5'` | Row container CSS class |
+| `columnClass` | string | `'col-md-4 col-6'` | Field column CSS class |
+| `labelClass` | string | `'field-secondary-label-sm'` | Label CSS class |
+| `valueClass` | string | `'fs-14 fw-meduim'` | Value CSS class |
+
+### Output Events
+- `isLoadingChanged: EventEmitter<boolean>` - Emitted when loading state changes.
+- `errorOccurred: EventEmitter<string>` - Emitted when API request fails.
+