@skysoftware-co/bayan-hr-widgets-ui 2.0.14 → 2.0.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/README.md +1246 -1152
  2. package/fesm2022/skysoftware-co-bayan-hr-widgets-ui.mjs +2853 -4005
  3. package/fesm2022/skysoftware-co-bayan-hr-widgets-ui.mjs.map +1 -1
  4. package/package.json +1 -1
  5. package/types/skysoftware-co-bayan-hr-widgets-ui.d.ts +746 -941
package/README.md CHANGED
@@ -1,1152 +1,1246 @@
1
- # shared-ui
2
-
3
- This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 21.2.11.
4
-
5
- ## Code scaffolding
6
-
7
- Run `ng generate component component-name --project shared-ui` to generate a new component.
8
- You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project shared-ui`.
9
- > Note: Don't forget to add `--project shared-ui` or else it will be added to the default project in your `angular.json` file.
10
-
11
- ## Build
12
-
13
- Run `ng build HRComponents` to build the project. The build artifacts will be stored in the `dist/` directory.
14
-
15
- ## Publishing
16
-
17
- After building your library with `ng build HRComponents`, go to the dist folder `cd dist/shared-ui` and run `npm publish`.
18
-
19
- ## Running unit tests
20
-
21
- Run `ng test shared-ui` to execute the unit tests via [Karma](https://karma-runner.github.io).
22
-
23
- ## Further help
24
-
25
- 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.
26
-
27
- ## Sky Bayan HR Components
28
-
29
- This package contains shared HR components used in Bayan HR system, you can find in first installation the below
30
- components:
31
- 1. My Main Details Widget
32
- 2. My Upcoming Events Widget
33
- 3. My Calendar Widget
34
- 4. My Next Week Vacation Insights Widget
35
- 5. My Profile Personal Info Main Widget
36
- 6. My Profile Personal Info Contact Widget
37
- 7. My Profile Personal Info Address Widget
38
- 8. My Profile Personal Info Languages Widget
39
- 9. My Profile Personal Info Other Nationalities Widget
40
- 10. My Profile Experiences Widget
41
- 11. My Profile Degrees Widget
42
- 12. My Profile Bank Information Widget
43
- 13. My Profile Job Info Main Widget
44
- 14. My Profile Job Info Contract Widget
45
- 15. My Profile Job Info Salary Widget
46
- 16. My Profile Job Info Service Charge Widget
47
- 17. My Profile Employee Dependents Widget
48
- 18. My Profile Entitlements Vacations Widget
49
- 19. My Profile Entitlements Indemnity Widget
50
- 20. My Profile Entitlements Ticket Widget
51
- 21. My Profile Entitlements Medical Insurance Widget
52
- 22. My Profile Entitlements Others Widget
53
- 23. My Profile Employee Documents Widget
54
- 24. My Profile Dependents Documents Widget
55
- 25. My Team Subordinates Popup Widget
56
-
57
- ## Dependencies
58
- This library depends on `@skysoftware-co/bayan-components-ui` package which provides:
59
- - Employee Badge Component
60
-
61
- ## Installation
62
- use npm to install this package by command: @skysoftware-co/bayan-hr-widgets-ui
63
-
64
- ## Setup
65
-
66
- 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.
67
-
68
- ### 1. Set language and lexicon in your App Component
69
-
70
- ```typescript
71
- import { Component, inject, OnInit } from '@angular/core';
72
- import { TranslateService } from '@ngx-translate/core';
73
- import { TranslationService } from '@skysoftware-co/sky-components-ui';
74
-
75
- @Component({
76
- selector: 'app-root',
77
- ...
78
- })
79
- export class AppComponent implements OnInit {
80
- private translateService = inject(TranslateService);
81
- private translationService = inject(TranslationService);
82
-
83
- ngOnInit(): void {
84
- // Set the active language ('en', 'ar', 'fr')
85
- this.translateService.use('en');
86
-
87
- // Optionally set a lexicon for additional or override translations
88
- this.translationService.setLexicon({
89
- 'CustomKey': 'Custom Value',
90
- ...
91
- });
92
- }
93
- }
94
- ```
95
-
96
- ### 2. Provide the TranslatePipe
97
-
98
- Add `TranslatePipe` to the `providers` array in your App Component:
99
-
100
- ```typescript
101
- import { TranslatePipe } from '@skysoftware-co/sky-components-ui';
102
-
103
- @Component({
104
- selector: 'app-root',
105
- standalone: true,
106
- imports: [...],
107
- providers: [TranslatePipe],
108
- ...
109
- })
110
- export class AppComponent { }
111
- ```
112
-
113
- ## Constants Service
114
-
115
- ### Usage
116
- ```typescript
117
- import { HRConstantsService } from '@skysoftware-co/bayan-hr-widgets-ui';
118
- ```
119
-
120
- This service provides default constant values used across HR components, you can override them at runtime.
121
-
122
- ### Properties
123
- | Property | Type | Default Value | Description |
124
- |----------|------|---------------|-------------|
125
- | `defaultVacationBalanceColor` | string | `'#727070'` | Default color for vacation balance indicator |
126
- | `defaultVacationColor` | string | `'#DCDCDC'` | Default color for vacation type when no color is assigned |
127
- | `defaultPublicHolidayColor` | string | `'#249EA0'` | Default color for public holidays in calendar |
128
- | `defaultDayOffColor` | string | `'#FCCF5A'` | Default color for days off in calendar |
129
- | `defaultEventsColor` | string | `'#e67e0f'` | Default color for events in calendar |
130
-
131
-
132
- ## My Main Details Widget Component
133
-
134
- ### Usage
135
- ```html
136
- <hr-my-main-details-widget></hr-my-main-details-widget>
137
- ```
138
-
139
- This component is used in Bayan HR system to show the employee main information widget in the employee portal home page. It displays employee info, shortcuts, reporting info, service years and vacation balances. This component uses `<bayan-employee-badge>` from `@skysoftware-co/bayan-components-ui` package.
140
-
141
- ### Input Properties
142
- | Input | Type | Default Value | Description |
143
- |-------|------|---------------|-------------|
144
- | `badgeClass` | string | `'badge employee-rounded-badge-xl fs-5'` | Badge CSS class |
145
- | `badgeImageClass` | string | `'rounded-circle shadow-lg'` | Badge image CSS class |
146
- | `badgeWidth` | string | `'50px'` | Badge width |
147
- | `badgeHeight` | string | `'50px'` | Badge height |
148
- | `employeeInfoContainerClass` | string | `'d-flex align-content-center'` | Employee info container CSS class |
149
- | `employeeDetailsClass` | string | `'ms-3'` | Employee details CSS class |
150
- | `employeeNameContainerClass` | string | `'d-flex align-items-center'` | Employee name container CSS class |
151
- | `employeeNameClass` | string | `'fs-14 text-dark-gray fw-medium text-ellipsis-one-line'` | Employee name CSS class |
152
- | `employeePositionClass` | string | `'fs-12 fw-normal text-dark-gray text-ellipsis-one-line mb-1'` | Employee position CSS class |
153
- | `employeeGradeClass` | string | `'fs-12 text-dark-gray'` | Employee grade CSS class |
154
- | `containerClass` | string | `'card rounded rounded-4 card-shadow p-16 border-top-0 mb-4'` | Main container CSS class |
155
- | `cardBodyClass` | string | `'card-body p-4'` | Card body CSS class |
156
- | `headerRowClass` | string | `'d-md-flex justify-content-between align-items-center mt-2 mb-3'` | Header row CSS class |
157
- | `shortcutsContainerClass` | string | `'d-flex justify-content-md-end justify-content-sm-start fs-12 fw-normal text-secondary mt-3 mt-md-0'` | Shortcuts container CSS class |
158
- | `shortcutItemClass` | string | `'d-flex flex-column align-items-center mx-2 wp-60'` | Shortcut item CSS class |
159
- | `shortcutIconContainerClass` | string | `'d-flex justify-content-center align-items-center rounded-circle-40 cursor-pointer'` | Shortcut icon container CSS class |
160
- | `shortcutIconClass` | string | `'fs-4'` | Shortcut icon CSS class |
161
- | `shortcutTextClass` | string | `'text-center mt-1'` | Shortcut text CSS class |
162
- | `detailsRowClass` | string | `'d-flex mt-4'` | Details row CSS class |
163
- | `reportingBlockClass` | string | `'d-flex text-secondary align-items-center mb-2 mx-2'` | Reporting block CSS class |
164
- | `captionLabelClasses` | string | `'d-flex flex-column align-self-start fs-14 text-dark-gray'` | Caption label CSS class |
165
- | `captionLabelValueClass` | string | `'fw-medium mt-2'` | Caption label value CSS class |
166
- | `vacationBalancesContainerClass` | string | `'d-flex text-secondary align-items-center mb-2'` | Vacation balances container CSS class |
167
- | `vacationBalanceItemClass` | string | `'d-flex flex-column me-4'` | Vacation balance item CSS class |
168
- | `vacationBalanceHeaderClass` | string | `'d-flex align-items-center'` | Vacation balance header CSS class |
169
- | `vacationColorDotClass` | string | `'vacation-color-container-sm'` | Vacation color dot CSS class |
170
- | `vacationTypeNameClass` | string | `'mx-2 fs-14 fw-normal text-dark-gray'` | Vacation type name CSS class |
171
- | `vacationBalanceValueRowClass` | string | `'d-flex mt-2'` | Vacation balance value row CSS class |
172
- | `vacationBalanceValueClass` | string | `'mx-2 fw-medium fs-14 text-dark-gray'` | Vacation balance value CSS class |
173
- | `tooltipTriggerLinkClass` | string | `'d-flex align-items-center cursor-pointer'` | Tooltip trigger link CSS class |
174
- | `tooltipTriggerTextClass` | string | `'mx-2 fs-14 text-dark-gray'` | Tooltip trigger text CSS class |
175
- | `tooltipVacationRowClass` | string | `'d-flex align-items-center justify-content-around fs-12 mb-2'` | Tooltip vacation row CSS class |
176
- | `tooltipVacationNameContainerClass` | string | `'d-flex flex-grow-1 align-items-center me-5'` | Tooltip vacation name container CSS class |
177
- | `tooltipVacationNameClass` | string | `'mx-2'` | Tooltip vacation name CSS class |
178
- | `reportingToLabel` | string | `'ReportingTo'` | Reporting to label text |
179
- | `emptyReportingToLabel` | string | `'NotAnknown'` | Empty reporting to label text |
180
- | `serviceYearsLabel` | string | `'ServiceYears'` | Service years label text |
181
- | `moreLabel` | string | `'More'` | More label text |
182
- | `dayLabel` | string | `'day'` | Day label text |
183
- | `daysLabel` | string | `'days'` | Days label text |
184
- | `yearsLabel` | string | `'Years'` | Years label text |
185
- | `monthsLabel` | string | `'Months'` | Months label text |
186
- | `defaultVacationBalanceColor` | string | from `HRConstantsService`: `'#727070'` | Default vacation balance color indicator |
187
- | `defaultVacationColor` | string | from `HRConstantsService`: `'#DCDCDC'` | Default vacation type color when no color assigned |
188
- | `baseUrl` | string | `''` | Base URL for API calls |
189
- | `isMobile` | boolean | `false` | Mobile responsive mode |
190
- | `isTablet` | boolean | `false` | Tablet responsive mode |
191
- | `shortcuts` | MainWidgetShortcutItem[] | `[]` | List of shortcut items to display |
192
-
193
- ### Output Events
194
- - `onShortcutClicked: EventEmitter<MainWidgetShortcutItem>` - Emitted when the shortcut is clicked and has no navigation URL
195
- - `isLoadingChanged: EventEmitter<boolean>` - When loading state changes
196
-
197
-
198
- ## My Upcoming Events Widget Component
199
-
200
- ### Usage
201
- ```html
202
- <hr-my-upcoming-events-widget></hr-my-upcoming-events-widget>
203
- ```
204
-
205
- This component displays upcoming events (birthdays and public holidays) in a card view with tab filtering and a popup for viewing all events. It uses `SkyAlertToastService` from `@skysoftware-co/sky-components-ui` for error notifications.
206
-
207
- ### Input Properties
208
- | Input | Type | Default Value | Description |
209
- |-------|------|---------------|-------------|
210
- | `baseUrl` | string | `''` | Base URL for API calls |
211
- | `weekendWarningDescription` | string | `'WeekendDayNotDefined'` | Warning text when weekend is not configured |
212
- | `selectedLanguage` | string | `'en'` | Selected language (`'en'`, `'ar'`, `'fr'`) |
213
- | `showProperty` | boolean | `true` | Show employee property badge on birthday events |
214
- | `externalViewAll` | boolean | `false` | When true, emits `viewAllClicked` instead of opening popup |
215
- | `cardClass` | string | `'bg-light-gray border-0 card p-3 card-shadow rounded rounded-4 mt-3'` | Card container CSS class |
216
- | `noEventsTextClass` | string | `'text-center my-3 text-light-gray'` | No events text CSS class |
217
- | `viewAllLinkClass` | string | `'fs-14 mt-2'` | View all link CSS class |
218
- | `viewAllContainerClass` | string | `'d-flex justify-content-end cursor-pointer'` | View all container CSS class |
219
- | `warningTextClass` | string | `'text-center my-2 text-light-gray'` | Warning text CSS class |
220
- | `tabSelectedClass` | string | `'selected-event-option'` | Selected tab CSS class |
221
- | `tabNotSelectedClass` | string | `'not-selected-event-option'` | Not selected tab CSS class |
222
- | `tabTextSelectedClass` | string | `'text-white'` | Selected tab text CSS class |
223
- | `tabTextNotSelectedClass` | string | `'text-primary'` | Not selected tab text CSS class |
224
- | `tabContainerClass` | string | `'d-flex gap-2 mb-3'` | Tab bar container CSS class |
225
- | `tabItemClass` | string | `'col-1 align-items-center rounded rounded-3 cursor-pointer text-center d-flex justify-content-center py-2 px-3'` | Tab item CSS class |
226
- | `tabTextClass` | string | `'fs-16'` | Tab text CSS class |
227
- | `tabIconClass` | string | `'fs-6'` | Tab icon CSS class |
228
- | `eventIconClass` | string | `'fs-6 text-primary pe-2'` | Event icon CSS class |
229
- | `eventNameBoldClass` | string | `'fw-medium'` | Event name bold CSS class |
230
- | `eventDescriptionClass` | string | `'text-primary fw-medium'` | Event description CSS class |
231
- | `propertyBadgeClass` | string | `'property-badge cursor-pointer me-1'` | Property badge CSS class |
232
- | `dateFormat` | string | `'dd/MM/yyyy'` | Date format for event dates |
233
- | `labels` | UpcomingEventsLabels | *(see below)* | Localization labels |
234
-
235
- ### Labels Default Values
236
- | Label | Default |
237
- |-------|---------|
238
- | `upcomingEvents` | `'Upcoming Events'` |
239
- | `birthday` | `'Birthday'` |
240
- | `publicHoliday` | `'Public Holiday'` |
241
- | `during` | `'During'` |
242
- | `isIn` | `'is in'` |
243
- | `is` | `'is'` |
244
- | `in` | `'In'` |
245
- | `noEvents` | `'There are no events'` |
246
- | `all` | `'All'` |
247
- | `viewAll` | `'View All'` |
248
-
249
- ### Output Events
250
- - `isLoadingChanged: EventEmitter<boolean>` - Emitted when loading state changes
251
- - `viewAllClicked: EventEmitter<void>` - Emitted when view all is clicked (only when `externalViewAll` is true)
252
-
253
-
254
- ## My Calendar Widget Component
255
-
256
- ### Usage
257
- ```html
258
- <hr-my-calendar-widget
259
- [baseUrl]="environment.baseUrl">
260
- </hr-my-calendar-widget>
261
- ```
262
-
263
- This component displays an employee calendar showing vacations, public holidays, days off, and events. It uses DevExtreme Calendar (`DxCalendarModule`) with custom cell templates to render color-coded date ranges. The calendar loads 12 months of data starting from one month before the current date.
264
-
265
- ### Input Properties
266
- | Input | Type | Default Value | Description |
267
- |-------|------|---------------|-------------|
268
- | `baseUrl` | string | `''` | Base URL for API calls |
269
- | `headerContainerClass` | string | `''` | Additional CSS class for the header container |
270
- | `datasource` | `ScheduleRequestsResponse \| null` | `null` | External datasource for pending requests. When provided, pending vacation requests are merged with calendar vacations (consecutive same-type vacations are combined), and pending event requests are added as events. The calendar reactively updates whenever this input changes after the initial calendar data has loaded. |
271
- | `publicHolidayColor` | string | from `HRConstantsService`: `'#249EA0'` | Color for public holidays |
272
- | `dayOffColor` | string | from `HRConstantsService`: `'#FCCF5A'` | Color for days off |
273
- | `eventsColor` | string | from `HRConstantsService`: `'#e67e0f'` | Color for events |
274
- | `legendContainerClass` | string | `'row mb-2'` | Legend container CSS class |
275
- | `legendRowClass` | string | `'d-flex'` | Legend row CSS class |
276
- | `legendItemClass` | string | `'d-flex align-items-center'` | Legend item CSS class |
277
- | `legendDotClass` | string | `'me-1 circle-sm'` | Legend dot CSS class |
278
- | `legendLabelClass` | string | `'me-1 fs-12'` | Legend label CSS class |
279
- | `publicHolidayDotClass` | string | `'bg-accent'` | Public holiday dot CSS class |
280
- | `dayOffDotClass` | string | `'bg-yellow'` | Day off dot CSS class |
281
- | `eventsDotClass` | string | `'bg-primary'` | Events dot CSS class |
282
- | `vacationsContainerClass` | string | `'d-flex mt-3'` | Vacations legend container CSS class |
283
- | `vacationsItemClass` | string | `'d-flex align-items-center'` | Vacations legend item CSS class |
284
- | `vacationsIconClass` | string | `'fs-8 me-1'` | Vacations icon CSS class |
285
- | `calendarContainerClass` | string | `'row mt-2 col-12'` | Calendar container CSS class |
286
- | `calendarClass` | string | `'button-boeder-none'` | Calendar CSS class |
287
-
288
- ### Output Events
289
- - `isLoadingChanged: EventEmitter<boolean>` - Emitted when loading state changes
290
-
291
- ### API Endpoint
292
- The component calls `GET {baseUrl}/hr/employee-portal/calendar` with query parameters:
293
- - `Month` - Starting month
294
- - `Year` - Starting year
295
- - `MonthsCount` - Number of months to load (default: 12)
296
- - Header: `api-version: 2`
297
-
298
-
299
- ## My Next Week Vacation Insights Widget Component
300
-
301
- ### Usage
302
- ```html
303
- <hr-my-next-week-vacation-insights-widget
304
- [baseUrl]="environment.baseUrl"
305
- [showProperty]="true"
306
- (isLoadingChanged)="onLoadingChanged($event)">
307
- </hr-my-next-week-vacation-insights-widget>
308
- ```
309
-
310
- 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.
311
-
312
- ### Input Properties
313
- | Input | Type | Default Value | Description |
314
- |-------|------|---------------|-------------|
315
- | `baseUrl` | string | `''` | Base URL for API calls |
316
- | `showProperty` | boolean | `false` | Show employee property badge in the popup grid |
317
- | `cardClass` | string | `'card rounded rounded-4 card-shadow border-top-0 h-100 p-4'` | Card container CSS class |
318
- | `titleClass` | string | `'table-header-lg fw-meduim mb-3 mt-2'` | Card title CSS class |
319
- | `valueClass` | string | `'fs-24 mt-1 link-dark hover-primary text-decoration-none'` | Badge value CSS class (clickable) |
320
- | `disabledValueClass` | string | `'fs-24 mt-1 text-muted pe-none text-decoration-none'` | Badge value CSS class when count is 0 |
321
- | `upcomingContainerClass` | string | `'border-start border-5 mb-4'` | Upcoming vacations badge container CSS class |
322
- | `expectedContainerClass` | string | `'border-start border-5'` | Expected to return badge container CSS class |
323
- | `firstRowClass` | string | `'mb-4'` | CSS class for the first badge row wrapper |
324
- | `secondRowClass` | string | `'mt-3'` | CSS class for the second badge row wrapper |
325
-
326
- ### Output Events
327
- - `isLoadingChanged: EventEmitter<boolean>` - Emitted when loading state changes
328
-
329
- ### API Endpoints
330
- - **Summary**: `GET {baseUrl}/hr/widgets/me/team/next-week-vacation-insights/summary?ShowDirectSubordinatesOnly=false`
331
- - **Upcoming list**: `GET {baseUrl}/hr/widgets/me/team/next-week-vacation-insights/upcoming-vacations`
332
- - **Expected to return list**: `GET {baseUrl}/hr/widgets/me/team/next-week-vacation-insights/expected-to-return`
333
-
334
- ### My Team Subordinates Popup
335
-
336
- ### Usage
337
- ```html
338
- <hr-my-team-subordinates-popup
339
- [baseUrl]="environment.baseUrl"
340
- (isLoadingChanged)="onLoadingChanged($event)"
341
- (errorOccurred)="onError($event)">
342
- </hr-my-team-subordinates-popup>
343
- ```
344
-
345
- Programmatic open helper:
346
-
347
- ```ts
348
- import { openMyTeamSubordinatesPopup } from '@skysoftware-co/bayan-hr-widgets-ui';
349
-
350
- openMyTeamSubordinatesPopup();
351
- ```
352
-
353
- This popup component displays grouped subordinate employees with search, infinite scrolling, and a toggle between direct subordinates and all subordinates.
354
-
355
- ### Input Properties
356
- | Input | Type | Default Value | Description |
357
- |-------|------|---------------|-------------|
358
- | `baseUrl` | string | required | Base URL for API calls |
359
- | `pageSize` | number | `100` | Number of records loaded per page |
360
- | `showGrade` | boolean | `false` | Shows employee grade row in the main info card |
361
- | `showPropertySymbol` | boolean | `true` | Shows employee property symbol in the main info card |
362
- | `phoneIcon` | IconDefinition | `faPhone` | Icon used for phone row |
363
- | `emailIcon` | IconDefinition | `faEnvelope` | Icon used for email row |
364
- | `employeeCardClass` | string | `'bg-light-gray rounded p-2 mb-2 d-flex align-items-center justify-content-between border-start border-4 border-start-primary'` | Employee card container CSS classes |
365
- | `employeeCardHeight` | number | `96` | Fixed employee card height in pixels |
366
-
367
- ### Output Events
368
- - `isLoadingChanged: EventEmitter<boolean>` - Emitted when initial/reset loading state changes.
369
- - `errorOccurred: EventEmitter<string>` - Emitted when API request fails.
370
-
371
- ### API Endpoint
372
- - `GET {baseUrl}/hr/widgets/me/team/subordinates`
373
-
374
- ### Employee Main Info Card
375
-
376
- Usage in template:
377
-
378
- ```html
379
- <app-employee-main-info-card
380
- [employeeMainInfo]="employeeInfo"
381
- [searchValue]="searchValue"
382
- [showGrade]="false"
383
- [showPropertySymbol]="true">
384
- </app-employee-main-info-card>
385
- ```
386
-
387
- This component renders the subordinate basic profile header (name, position, property, badge image/initials) and supports text highlighting.
388
-
389
- ## My Profile Widgets
390
-
391
- The package also exports profile-focused widgets used in the employee profile page.
392
-
393
- ## My Profile Personal Info Main Widget
394
-
395
- ### Usage
396
- ```html
397
- <hr-my-profile-personal-info-main-widget
398
- [baseUrl]="baseUrl"
399
- (isLoadingChanged)="onMainLoadingChanged($event)">
400
- </hr-my-profile-personal-info-main-widget>
401
- ```
402
-
403
- ### Input Properties
404
- | Input | Type | Default Value | Description |
405
- |-------|------|---------------|-------------|
406
- | `baseUrl` | string | `''` | Base URL for API calls (required) |
407
- | `alternateLanguage` | string | `'English'` | Alternate language label next to employee alternate name |
408
- | `headerIconClass` | string | `'primary-icon-xl'` | Header icon CSS class |
409
- | `headerTextClass` | string | `'mt-2 field-secondary-label-lg'` | Header text CSS class |
410
- | `headerDividerClass` | string | `'flex-grow-1 ms-2'` | Header divider CSS class |
411
- | `rowClass` | string | `'row mt-4'` | Row container CSS class |
412
- | `columnClass` | string | `'col-md-4 col-6'` | Column CSS class |
413
- | `hiddenSpacerColClass` | string | `'col-md-4 col-6 d-md-block d-none'` | Hidden spacer column CSS class |
414
- | `topSpacingColumnClass` | string | `'col-md-4 col-6 mt-4'` | Top spacing column CSS class |
415
- | `topSpacingBottomMdSpacingColumnClass` | string | `'col-md-4 col-6 mt-4 mb-md-5'` | Top spacing + medium bottom spacing CSS class |
416
- | `topSpacingBottomSpacingColumnClass` | string | `'col-md-4 col-6 mt-4 mb-5'` | Top spacing + bottom spacing CSS class |
417
- | `labelClass` | string | `'field-secondary-label-sm'` | Label CSS class |
418
- | `valueClass` | string | `'fs-14 fw-medium'` | Value CSS class |
419
- | `mainIcon` | IconDefinition | `faMemoCircleInfo` | Header icon |
420
- | `sectionTitle` | string | `'main'` | Section title translation key |
421
- | `emptyStateContainerClass` | string | `'d-flex flex-column justify-content-center align-items-center my-5'` | Empty/loading container CSS class |
422
- | `emptyStateTextClass` | string | `'field-secondary-label-md'` | Empty/loading text CSS class |
423
-
424
- ### Output Events
425
- - `isLoadingChanged: EventEmitter<boolean>` - Emitted when loading state changes.
426
- - `errorOccurred: EventEmitter<string>` - Emitted when API request fails.
427
-
428
- ## My Profile Experiences Widget
429
-
430
- ### Usage
431
- ```html
432
- <hr-my-profile-experiences-widget
433
- [baseUrl]="baseUrl"
434
- (isLoadingChanged)="onExperiencesLoadingChanged($event)">
435
- </hr-my-profile-experiences-widget>
436
- ```
437
-
438
- ### Input Properties
439
- | Input | Type | Default Value | Description |
440
- |-------|------|---------------|-------------|
441
- | `baseUrl` | string | `''` | Base URL for API calls. |
442
- | `sectionTitle` | string | `'experiences'` | Section title translation key. |
443
- | `experienceIcon` | IconDefinition | `faUsersRays` | Header icon. |
444
- | `viewIcon` | IconDefinition | `faEye` | Attachment view icon. |
445
- | `downloadIcon` | IconDefinition | `faFolderArrowDown` | Attachment download icon. |
446
- | `headerIconClass` | string | `'primary-icon-xl'` | Header icon CSS class. |
447
- | `headerTextClass` | string | `'fs-16 mt-2 text-secondary'` | Header text CSS class. |
448
- | `headerDividerClass` | string | `'flex-grow-1 ms-2'` | Header divider CSS class. |
449
- | `rowClass` | string | `'mt-4'` | Main row CSS class. |
450
- | `rowMarginBottomClass` | string | `'mb-5'` | Bottom spacing class when experiences exist. |
451
- | `rowMarginBottomEmptyClass` | string | `'mb-4'` | Bottom spacing class when list is empty. |
452
- | `headerRowClass` | string | `'row col-10'` | Header labels row CSS class. |
453
- | `actionsSpacerClass` | string | `'col-2'` | Spacer column class between labels and actions area. |
454
- | `itemRowClass` | string | `'row'` | Backward-compatible row class input (not used in current template loop). |
455
- | `itemColumnsWrapperClass` | string | `'row col-10 mt-3'` | Per-item columns wrapper CSS class. |
456
- | `itemColumnClass` | string | `'col-3'` | Column CSS class. |
457
- | `labelClass` | string | `'field-secondary-label-sm text-ellipsis-one-line'` | Header label CSS class. |
458
- | `valueClass` | string | `'text-dark-gray fs-14 text-ellipsis-one-line'` | Value text CSS class. |
459
- | `actionsColumnClass` | string | `'col-2 align-items-end mt-3'` | Attachment action column CSS class. |
460
- | `viewIconClass` | string | `'fs-15 text-dark cursor-pointer'` | View icon CSS class. |
461
- | `downloadIconClass` | string | `'fs-15 mx-3 text-dark cursor-pointer'` | Download icon CSS class. |
462
- | `emptyStateContainerClass` | string | `'d-flex flex-column justify-content-center align-items-center my-5'` | Empty/loading container CSS class. |
463
- | `emptyStateTextClass` | string | `'field-secondary-label-md'` | Empty/loading text CSS class. |
464
-
465
- ### Output Events
466
- - `isLoadingChanged: EventEmitter<boolean>` - Emitted when loading state changes.
467
- - `attachmentViewed: EventEmitter<any>` - Emitted when attachment view icon is clicked.
468
- - `attachmentDownloaded: EventEmitter<any>` - Emitted when attachment download icon is clicked.
469
- - `errorOccurred: EventEmitter<string>` - Emitted when API request fails.
470
-
471
- ## My Profile Degrees Widget
472
-
473
- ### Usage
474
- ```html
475
- <hr-my-profile-degrees-widget
476
- [baseUrl]="baseUrl"
477
- (isLoadingChanged)="onDegreesLoadingChanged($event)">
478
- </hr-my-profile-degrees-widget>
479
- ```
480
-
481
- ### Input Properties
482
- | Input | Type | Default Value | Description |
483
- |-------|------|---------------|-------------|
484
- | `baseUrl` | string | `''` | Base URL for API calls. |
485
- | `sectionTitle` | string | `'Degrees'` | Section title translation key. |
486
- | `degreesIcon` | IconDefinition | `faFileCertificate` | Header icon. |
487
- | `viewIcon` | IconDefinition | `faEye` | Attachment view icon. |
488
- | `downloadIcon` | IconDefinition | `faFolderArrowDown` | Attachment download icon. |
489
- | `headerIconClass` | string | `'primary-icon-xl'` | Header icon CSS class. |
490
- | `headerTextClass` | string | `'fs-16 mt-2 text-secondary'` | Header text CSS class. |
491
- | `headerDividerClass` | string | `'flex-grow-1 ms-2'` | Header divider CSS class. |
492
- | `rowClass` | string | `'mt-4'` | Main row CSS class. |
493
- | `rowMarginBottomClass` | string | `'mb-5'` | Bottom spacing class when degrees exist. |
494
- | `rowMarginBottomEmptyClass` | string | `'mb-4'` | Bottom spacing class when list is empty. |
495
- | `headerRowClass` | string | `'row col-10'` | Header labels row CSS class. |
496
- | `actionsSpacerClass` | string | `'col-2'` | Spacer column class between labels and actions area. |
497
- | `itemRowClass` | string | `'row'` | Backward-compatible row class input (not used in current template loop). |
498
- | `itemColumnsWrapperClass` | string | `'row col-10 mt-3'` | Per-item columns wrapper CSS class. |
499
- | `itemColumnClass` | string | `'col-3'` | Column CSS class. |
500
- | `labelClass` | string | `'field-secondary-label-sm text-ellipsis-one-line'` | Header label CSS class. |
501
- | `valueClass` | string | `'text-dark-gray fs-14 text-ellipsis-one-line'` | Value text CSS class. |
502
- | `actionsColumnClass` | string | `'col-2 align-items-end mt-3'` | Attachment action column CSS class. |
503
- | `viewIconClass` | string | `'fs-15 text-dark cursor-pointer'` | View icon CSS class. |
504
- | `downloadIconClass` | string | `'fs-15 mx-3 text-dark cursor-pointer'` | Download icon CSS class. |
505
- | `emptyStateContainerClass` | string | `'d-flex flex-column justify-content-center align-items-center my-5'` | Empty/loading container CSS class. |
506
- | `emptyStateTextClass` | string | `'field-secondary-label-md'` | Empty/loading text CSS class. |
507
-
508
- ### Output Events
509
- - `isLoadingChanged: EventEmitter<boolean>` - Emitted when loading state changes.
510
- - `attachmentViewed: EventEmitter<any>` - Emitted when attachment view icon is clicked.
511
- - `attachmentDownloaded: EventEmitter<any>` - Emitted when attachment download icon is clicked.
512
- - `errorOccurred: EventEmitter<string>` - Emitted when API request fails.
513
-
514
- ## My Profile Personal Info Contact Widget
515
-
516
- ### Usage
517
- ```html
518
- <hr-my-profile-contact-widget
519
- [baseUrl]="baseUrl"
520
- [showEmergencyContact]="true"
521
- (isLoadingChanged)="onContactLoadingChanged($event)">
522
- </hr-my-profile-contact-widget>
523
- ```
524
-
525
- ### Input Properties
526
- | Input | Type | Default Value | Description |
527
- |-------|------|---------------|-------------|
528
- | `baseUrl` | string | `''` | Base URL for API calls (required) |
529
- | `headerIconClass` | string | `'primary-icon-xl'` | Header icon CSS class |
530
- | `headerTextClass` | string | `'mt-2 field-secondary-label-lg'` | Header text CSS class |
531
- | `headerDividerClass` | string | `'flex-grow-1 ms-2'` | Header divider CSS class |
532
- | `rowClass` | string | `'row mt-4'` | Row container CSS class |
533
- | `columnClass` | string | `'col-4'` | Column CSS class |
534
- | `responsiveTopSpacingColumnClass` | string | `'col-6 mt-4'` | Responsive top spacing column CSS class |
535
- | `topSpacingBottomMdSpacingColumnClass` | string | `'col-md-4 col-6 mt-4 mb-md-5'` | Top spacing + medium bottom spacing CSS class |
536
- | `topSpacingBottomSpacingColumnClass` | string | `'col-md-4 col-6 mt-4 mb-5'` | Top spacing + bottom spacing CSS class |
537
- | `labelClass` | string | `'field-secondary-label-sm'` | Label CSS class |
538
- | `valueClass` | string | `'fs-14 fw-medium text-ellipsis-one-line'` | Value CSS class |
539
- | `emergencyContactLabelClass` | string | `'fs-14 fw-semibold'` | Emergency contact title CSS class |
540
- | `emergencyContactColumnClass` | string | `'col-md-4 col-6'` | Emergency contact column CSS class |
541
- | `emergencyContactResponsiveColumnClass` | string | `'col-md-4 col-6 mt-md-0 mt-4'` | Emergency contact responsive column CSS class |
542
- | `emptyStateContainerClass` | string | `'d-flex flex-column justify-content-center align-items-center my-5'` | Empty/loading container CSS class |
543
- | `emptyStateTextClass` | string | `'field-secondary-label-md'` | Empty/loading text CSS class |
544
- | `contactIcon` | IconDefinition | `faPhone` | Header icon |
545
- | `emergencyContactIcon` | IconDefinition | `faBolt` | Emergency contact icon |
546
- | `sectionTitle` | string | `'contact'` | Section title translation key |
547
- | `showEmergencyContact` | boolean | `true` | Show emergency contact block |
548
- | `emergencyContactRowClass` | string | `'row mt-3 mb-4'` | Emergency contact row CSS class |
549
-
550
- ### Output Events
551
- - `isLoadingChanged: EventEmitter<boolean>` - Emitted when loading state changes.
552
- - `errorOccurred: EventEmitter<string>` - Emitted when API request fails.
553
-
554
- ## My Profile Personal Info Address Widget
555
-
556
- ### Usage
557
- ```html
558
- <hr-my-profile-address-widget
559
- [baseUrl]="baseUrl"
560
- (isLoadingChanged)="onAddressLoadingChanged($event)">
561
- </hr-my-profile-address-widget>
562
- ```
563
-
564
- ### Input Properties
565
- | Input | Type | Default Value | Description |
566
- |-------|------|---------------|-------------|
567
- | `baseUrl` | string | `''` | Base URL for API calls (required) |
568
- | `headerIconClass` | string | `'primary-icon-xl'` | Header icon CSS class |
569
- | `headerTextClass` | string | `'fs-16 mt-2 text-secondary'` | Header text CSS class |
570
- | `headerDividerClass` | string | `'flex-grow-1 ms-2'` | Header divider CSS class |
571
- | `rowClass` | string | `'row mt-4'` | Row container CSS class |
572
- | `columnClass` | string | `'col-md-4 col-6'` | Column CSS class |
573
- | `responsiveTopSpacingColumnClass` | string | `'col-md-4 col-6 mt-md-0 mt-4'` | Responsive top spacing column CSS class |
574
- | `topSpacingBottomSpacingColumnClass` | string | `'col-md-4 col-6 mt-4 mb-5'` | Top spacing + bottom spacing CSS class |
575
- | `labelClass` | string | `'field-secondary-label-sm'` | Label CSS class |
576
- | `valueClass` | string | `'fs-14 fw-medium'` | Value CSS class |
577
- | `addressIcon` | IconDefinition | `faHouse` | Header icon |
578
- | `sectionTitle` | string | `'address'` | Section title translation key |
579
- | `emptyStateContainerClass` | string | `'d-flex flex-column justify-content-center align-items-center my-5'` | Empty/loading container CSS class |
580
- | `emptyStateTextClass` | string | `'field-secondary-label-md'` | Empty/loading text CSS class |
581
-
582
- ### Output Events
583
- - `isLoadingChanged: EventEmitter<boolean>` - Emitted when loading state changes.
584
- - `errorOccurred: EventEmitter<string>` - Emitted when API request fails.
585
-
586
- ## My Profile Personal Info Languages Widget
587
-
588
- ### Usage
589
- ```html
590
- <hr-my-profile-languages-widget
591
- [baseUrl]="baseUrl"
592
- (hasDataChange)="onLanguagesDataChange($event)"
593
- (isLoadingChanged)="onLanguagesLoadingChanged($event)">
594
- </hr-my-profile-languages-widget>
595
- ```
596
-
597
- ### Input Properties
598
- | Input | Type | Default Value | Description |
599
- |-------|------|---------------|-------------|
600
- | `baseUrl` | string | `''` | Base URL for API calls |
601
- | `headerIconClass` | string | `'primary-icon-xl'` | Header icon CSS class |
602
- | `headerTextClass` | string | `'fs-16 mt-2 text-secondary'` | Header text CSS class |
603
- | `headerDividerClass` | string | `'flex-grow-1 ms-2'` | Header divider CSS class |
604
- | `contentTextClass` | string | `'text-dark-gray fs-14 fw-medium mt-4'` | Content text CSS class |
605
- | `emptyStateContainerClass` | string | `'d-flex flex-column justify-content-center align-items-center my-5'` | Empty/loading container CSS class |
606
- | `emptyStateTextClass` | string | `'field-secondary-label-md'` | Empty/loading text CSS class |
607
- | `languagesIcon` | IconDefinition | `faLanguage` | Header icon |
608
- | `sectionTitle` | string | `'languages'` | Section title translation key |
609
-
610
- ### Output Events
611
- - `hasDataChange: EventEmitter<boolean>` - Emitted when language list has data or not.
612
- - `isLoadingChanged: EventEmitter<boolean>` - Emitted when loading state changes.
613
- - `errorOccurred: EventEmitter<string>` - Emitted when API request fails.
614
-
615
- ## My Profile Personal Info Other Nationalities Widget
616
-
617
- ### Usage
618
- ```html
619
- <hr-my-profile-other-nationalities-widget
620
- [baseUrl]="baseUrl"
621
- (hasDataChange)="onOtherNationalitiesDataChange($event)"
622
- (isLoadingChanged)="onOtherNationalitiesLoadingChanged($event)">
623
- </hr-my-profile-other-nationalities-widget>
624
- ```
625
-
626
- ### Input Properties
627
- | Input | Type | Default Value | Description |
628
- |-------|------|---------------|-------------|
629
- | `baseUrl` | string | `''` | Base URL for API calls (required) |
630
- | `headerIconClass` | string | `'primary-icon-xl'` | Header icon CSS class |
631
- | `headerTextClass` | string | `'fs-16 mt-2 text-secondary'` | Header text CSS class |
632
- | `headerDividerClass` | string | `'flex-grow-1 ms-2'` | Header divider CSS class |
633
- | `contentTextClass` | string | `'text-dark-gray fs-14 fw-medium mt-4'` | Content text CSS class |
634
- | `emptyStateContainerClass` | string | `'d-flex flex-column justify-content-center align-items-center my-5'` | Empty/loading container CSS class |
635
- | `emptyStateTextClass` | string | `'field-secondary-label-md'` | Empty/loading text CSS class |
636
- | `otherNationalitiesIcon` | IconDefinition | `faEarthAfrica` | Header icon |
637
- | `sectionTitle` | string | `'otherNationalities'` | Section title translation key |
638
- | `emptyStateTextKey` | string | `'ThereIsNoOtherNationalitiesYet'` | Empty state translation key |
639
-
640
- ### Output Events
641
- - `hasDataChange: EventEmitter<boolean>` - Emitted when other nationalities list has data or not.
642
- - `isLoadingChanged: EventEmitter<boolean>` - Emitted when loading state changes.
643
- - `errorOccurred: EventEmitter<string>` - Emitted when API request fails.
644
-
645
- ## My Profile Bank Information Widget
646
-
647
- ### Usage
648
- ```html
649
- <hr-my-profile-bank-info-widget
650
- [baseUrl]="baseUrl"
651
- [currencyCode]="currencyCode"
652
- [currencyDecimals]="currencyDecimals"
653
- (isLoadingChanged)="onBankLoadingChanged($event)">
654
- </hr-my-profile-bank-info-widget>
655
- ```
656
-
657
- ### Input Properties
658
- | Input | Type | Default Value | Description |
659
- |-------|------|---------------|-------------|
660
- | `baseUrl` | string | `''` | Base URL for API calls (required) |
661
- | `currencyCode` | string | `''` | Currency code shown with transfer amount |
662
- | `currencyDecimals` | number | `2` | Decimal precision for transfer amount formatting |
663
- | `headerIconClass` | string | `'primary-icon-xl'` | Header icon CSS class |
664
- | `headerTextClass` | string | `'mt-2 field-secondary-label-lg'` | Header text CSS class |
665
- | `headerDividerClass` | string | `'flex-grow-1 ms-2'` | Header divider CSS class |
666
- | `cardClass` | string | `'mt-4 card-shadow position-relative'` | Bank card container CSS class |
667
- | `mainBadgeClass` | string | `'position-absolute text-center top-0 mt-3 start-0 bg-primary status-badge'` | Main bank badge CSS class |
668
- | `mainBadgeTextClass` | string | `'mx-1 fs-12 text-white'` | Main bank badge text CSS class |
669
- | `triangleClass` | string | `'position-absolute start-0 top-0'` | Main bank badge triangle CSS class |
670
- | `rowClass` | string | `'row px-4 pb-3'` | Bank details row CSS class |
671
- | `rowMainPtClass` | string | `'pt-5'` | Top padding class for main bank row |
672
- | `rowNormalPtClass` | string | `'pt-3'` | Top padding class for normal bank row |
673
- | `columnClass` | string | `'col-md-4 col-6'` | Column CSS class |
674
- | `responsiveTopSpacingColClass` | string | `'col-md-4 col-6 mt-md-0 mt-4'` | Responsive top spacing column CSS class |
675
- | `topSpacingColClass` | string | `'col-md-4 col-6 mt-4'` | Top spacing column CSS class |
676
- | `labelClass` | string | `'field-secondary-label-sm'` | Label CSS class |
677
- | `valueClass` | string | `'table-cell-md'` | Value CSS class |
678
- | `emptyStateContainerClass` | string | `'d-flex flex-column justify-content-center align-items-center my-5'` | Empty/loading container CSS class |
679
- | `emptyStateTextClass` | string | `'field-secondary-label-md'` | Empty/loading text CSS class |
680
- | `bankInformationIcon` | IconDefinition | `faMoneyCheckDollarPen` | Header icon |
681
- | `sectionHeaderVisibility` | boolean | `true` | Show or hide the section header |
682
- | `sectionTitle` | string | `'BankInformation'` | Section title translation key |
683
- | `language` | string | `'en'` | Language used for RTL behavior (`'ar'` enables RTL) |
684
-
685
- ### Output Events
686
- - `isLoadingChanged: EventEmitter<boolean>` - Emitted when loading state changes.
687
- - `errorOccurred: EventEmitter<string>` - Emitted when API request fails.
688
-
689
- ## My Profile Job Information Widgets
690
-
691
- ## My Profile Job Info Main Widget
692
-
693
- ### Usage
694
- ```html
695
- <hr-my-profile-job-info-widget
696
- [baseUrl]="baseUrl"
697
- (isLoadingChanged)="onJobMainLoadingChanged($event)">
698
- </hr-my-profile-job-info-widget>
699
- ```
700
-
701
- ### Input Properties
702
- | Input | Type | Default Value | Description |
703
- |-------|------|---------------|-------------|
704
- | `baseUrl` | string | `''` | Base URL for API calls (required) |
705
- | `headerIconClass` | string | `'primary-icon-xl'` | Header icon CSS class |
706
- | `headerTextClass` | string | `'mt-2 field-secondary-label-lg'` | Header text CSS class |
707
- | `headerDividerClass` | string | `'flex-grow-1 ms-2'` | Header divider CSS class |
708
- | `rowClass` | string | `'row mt-4'` | Row container CSS class |
709
- | `columnClass` | string | `'col-md-4 col-6'` | Column CSS class |
710
- | `responsiveTopSpacingColumnClass` | string | `'col-md-4 col-6 mt-md-0 mt-4'` | Responsive top spacing column CSS class |
711
- | `topSpacingBottomMdSpacingColumnClass` | string | `'col-md-4 col-6 mt-4 mb-md-5'` | Top spacing + medium bottom spacing CSS class |
712
- | `topSpacingBottomSpacingColumnClass` | string | `'col-md-4 col-6 mt-4 mb-5'` | Top spacing + bottom spacing CSS class |
713
- | `labelClass` | string | `'field-secondary-label-sm'` | Label CSS class |
714
- | `valueClass` | string | `'fs-14 fw-medium'` | Value CSS class |
715
- | `emptyStateContainerClass` | string | `'d-flex flex-column justify-content-center align-items-center my-5'` | Empty/loading container CSS class |
716
- | `emptyStateTextClass` | string | `'field-secondary-label-md'` | Empty/loading text CSS class |
717
- | `sectionTitle` | string | `'Main'` | Section title translation key |
718
-
719
- ### Output Events
720
- - `isLoadingChanged: EventEmitter<boolean>` - Emitted when loading state changes.
721
- - `errorOccurred: EventEmitter<string>` - Emitted when API request fails.
722
-
723
- ## My Profile Job Info Contract Widget
724
-
725
- ### Usage
726
- ```html
727
- <hr-my-profile-contract-widget
728
- [baseUrl]="baseUrl"
729
- (isLoadingChanged)="onJobContractLoadingChanged($event)">
730
- </hr-my-profile-contract-widget>
731
- ```
732
-
733
- ### Input Properties
734
- | Input | Type | Default Value | Description |
735
- |-------|------|---------------|-------------|
736
- | `baseUrl` | string | `''` | Base URL for API calls (required) |
737
- | `headerIconClass` | string | `'primary-icon-xl'` | Header icon CSS class |
738
- | `headerTextClass` | string | `'mt-2 field-secondary-label-lg'` | Header text CSS class |
739
- | `headerDividerClass` | string | `'flex-grow-1 ms-2'` | Header divider CSS class |
740
- | `rowClass` | string | `'row mt-4'` | Row container CSS class |
741
- | `columnClass` | string | `'col-md-4 col-6'` | Column CSS class |
742
- | `responsiveTopSpacingColumnClass` | string | `'col-md-4 col-6 mt-md-0 mt-4'` | Responsive top spacing column CSS class |
743
- | `topSpacingBottomMdSpacingColumnClass` | string | `'col-md-4 col-6 mt-4 mb-md-5'` | Top spacing + medium bottom spacing CSS class |
744
- | `topSpacingBottomSpacingColumnClass` | string | `'col-md-4 col-6 mt-4 mb-5'` | Top spacing + bottom spacing CSS class |
745
- | `labelClass` | string | `'field-secondary-label-sm'` | Label CSS class |
746
- | `valueClass` | string | `'fs-14 fw-medium text-ellipsis-one-line'` | Value CSS class |
747
- | `emptyStateContainerClass` | string | `'d-flex flex-column justify-content-center align-items-center my-5'` | Empty/loading container CSS class |
748
- | `emptyStateTextClass` | string | `'field-secondary-label-md'` | Empty/loading text CSS class |
749
- | `sectionTitle` | string | `'Contract'` | Section title translation key |
750
-
751
- ### Output Events
752
- - `isLoadingChanged: EventEmitter<boolean>` - Emitted when loading state changes.
753
- - `errorOccurred: EventEmitter<string>` - Emitted when API request fails.
754
-
755
- ## My Profile Job Info Salary Widget
756
-
757
- ### Usage
758
- ```html
759
- <hr-my-profile-salary-widget
760
- [baseUrl]="baseUrl"
761
- [currencyCode]="currencyCode"
762
- [currencyDecimals]="currencyDecimals"
763
- (isLoadingChanged)="onJobSalaryLoadingChanged($event)">
764
- </hr-my-profile-salary-widget>
765
- ```
766
-
767
- ### Input Properties
768
- | Input | Type | Default Value | Description |
769
- |-------|------|---------------|-------------|
770
- | `baseUrl` | string | `''` | Base URL for API calls (required) |
771
- | `currencyCode` | string | `''` | Currency code shown with salary amounts |
772
- | `currencyDecimals` | number | `2` | Decimal precision for salary amount formatting |
773
- | `headerIconClass` | string | `'primary-icon-xl'` | Header icon CSS class |
774
- | `headerTextClass` | string | `'mt-2 field-secondary-label-lg'` | Header text CSS class |
775
- | `headerDividerClass` | string | `'flex-grow-1 ms-2'` | Header divider CSS class |
776
- | `rowClass` | string | `'row mt-4'` | Row container CSS class |
777
- | `columnClass` | string | `'col-md-4 col-6 mt-4'` | Column CSS class |
778
- | `grossSalaryColumnClass` | string | `'col-md-4 col-6 my-4'` | Gross salary column CSS class |
779
- | `labelClass` | string | `'field-secondary-label-sm'` | Label CSS class |
780
- | `valueClass` | string | `'fs-14 fw-medium'` | Value CSS class |
781
- | `currencyClass` | string | `'fs-10 text-secondary fw-light'` | Currency text CSS class |
782
- | `emptyStateContainerClass` | string | `'d-flex flex-column justify-content-center align-items-center my-5'` | Empty/loading container CSS class |
783
- | `emptyStateTextClass` | string | `'field-secondary-label-md'` | Empty/loading text CSS class |
784
- | `sectionTitle` | string | `'Salary'` | Section title translation key |
785
-
786
- ### Output Events
787
- - `isLoadingChanged: EventEmitter<boolean>` - Emitted when loading state changes.
788
- - `errorOccurred: EventEmitter<string>` - Emitted when API request fails.
789
-
790
- ## My Profile Job Info Service Charge Widget
791
-
792
- ### Usage
793
- ```html
794
- <hr-my-profile-charge-widget
795
- [baseUrl]="baseUrl"
796
- [currencyCode]="currencyCode"
797
- (isLoadingChanged)="onJobServiceChargeLoadingChanged($event)">
798
- </hr-my-profile-charge-widget>
799
- ```
800
-
801
- ### Input Properties
802
- | Input | Type | Default Value | Description |
803
- |-------|------|---------------|-------------|
804
- | `baseUrl` | string | `''` | Base URL for API calls (required) |
805
- | `currencyCode` | string | `''` | Currency code shown when entitlement mode is fixed amount |
806
- | `headerIconClass` | string | `'primary-icon-xl'` | Header icon CSS class |
807
- | `headerTextClass` | string | `'mt-2 field-secondary-label-lg'` | Header text CSS class |
808
- | `headerDividerClass` | string | `'flex-grow-1 ms-2'` | Header divider CSS class |
809
- | `rowClass` | string | `'row mt-4 mb-5'` | Row container CSS class |
810
- | `columnClass` | string | `'col-md-4 col-6'` | Column CSS class |
811
- | `labelClass` | string | `'field-secondary-label-sm'` | Label CSS class |
812
- | `valueClass` | string | `'fs-14 fw-medium'` | Value CSS class |
813
- | `emptyStateContainerClass` | string | `'d-flex flex-column justify-content-center align-items-center my-5'` | Empty/loading container CSS class |
814
- | `emptyStateTextClass` | string | `'field-secondary-label-md'` | Empty/loading text CSS class |
815
- | `sectionTitle` | string | `'ServiceCharge'` | Section title translation key |
816
-
817
- ### Output Events
818
- - `isLoadingChanged: EventEmitter<boolean>` - Emitted when loading state changes.
819
- - `errorOccurred: EventEmitter<string>` - Emitted when API request fails.
820
-
821
- ## My Profile Employee Dependents Widget
822
-
823
- ### Usage
824
- ```html
825
- <hr-my-profile-dependents-widget
826
- [baseUrl]="baseUrl"
827
- (isLoadingChanged)="onDependentsLoadingChanged($event)">
828
- </hr-my-profile-dependents-widget>
829
- ```
830
-
831
- 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.
832
-
833
- ### Input Properties
834
- | Input | Type | Default Value | Description |
835
- |-------|------|---------------|-------------|
836
- | `baseUrl` | string | `''` | Base URL for API calls |
837
- | `sectionTitle` | string | `'Dependents'` | Section title translation key |
838
- | `icon` | IconDefinition | `faUsersLine` | Header icon |
839
- | `headerIconClass` | string | `'primary-icon-xl'` | Header icon CSS class |
840
- | `headerTextClass` | string | `'fs-16 mt-2 text-secondary'` | Header text CSS class |
841
- | `headerDividerClass` | string | `'flex-grow-1 ms-2'` | Header divider CSS class |
842
- | `emptyStateContainerClass` | string | `'d-flex flex-column justify-content-center align-items-center my-5'` | Empty/loading container CSS class |
843
- | `emptyStateTextClass` | string | `'field-secondary-label-md'` | Empty/loading text CSS class |
844
-
845
- ### Output Events
846
- - `isLoadingChanged: EventEmitter<boolean>` - Emitted when loading state changes.
847
-
848
- ## My Profile Entitlement Widgets
849
-
850
- The package includes entitlement widgets for displaying employee benefits and entitlements in the profile page.
851
-
852
- ## My Profile Entitlements Vacations Widget
853
-
854
- ### Usage
855
- ```html
856
- <hr-my-profile-vacations-widget
857
- [baseUrl]="baseUrl"
858
- (isLoadingChanged)="onVacationsLoadingChanged($event)">
859
- </hr-my-profile-vacations-widget>
860
- ```
861
-
862
- This component displays a list of vacation entitlements (vacation type name and entitlement days) in a two-column grid layout.
863
-
864
- ### Input Properties
865
- | Input | Type | Default Value | Description |
866
- |-------|------|---------------|-------------|
867
- | `baseUrl` | string | `''` | Base URL for API calls (required) |
868
- | `sectionTitle` | string | `'Vacations'` | Section title translation key |
869
- | `vacationsIcon` | IconDefinition | `faIslandTropical` | Header icon |
870
- | `headerIconClass` | string | `'primary-icon-xl'` | Header icon CSS class |
871
- | `headerTextClass` | string | `'mt-2 field-secondary-label-lg'` | Header text CSS class |
872
- | `headerDividerClass` | string | `'flex-grow-1 ms-2'` | Header divider CSS class |
873
- | `rowClass` | string | `'row mt-4'` | Row container CSS class |
874
- | `labelClass` | string | `'field-secondary-label-sm'` | Label CSS class |
875
- | `valueClass` | string | `'fs-14 fw-meduim mt-2'` | Value CSS class |
876
- | `labelColumnClass` | string | `'col-6'` | Label column CSS class |
877
- | `valueColumnClass` | string | `'col-6'` | Value column CSS class |
878
- | `emptyStateContainerClass` | string | `'d-flex flex-column justify-content-center align-items-center my-5'` | Empty/loading container CSS class |
879
- | `emptyStateTextClass` | string | `'field-secondary-label-md'` | Empty/loading text CSS class |
880
-
881
- ### Output Events
882
- - `isLoadingChanged: EventEmitter<boolean>` - Emitted when loading state changes.
883
- - `errorOccurred: EventEmitter<string>` - Emitted when API request fails.
884
-
885
- ## My Profile Entitlements Indemnity Widget
886
-
887
- ### Usage
888
- ```html
889
- <hr-my-profile-indemnity-widget
890
- [baseUrl]="baseUrl"
891
- [currencyCode]="currencyCode"
892
- (isLoadingChanged)="onIndemnityLoadingChanged($event)">
893
- </hr-my-profile-indemnity-widget>
894
- ```
895
-
896
- This component shows indemnity entitlement details including eligibility status, service years, and start date. Uses `hr-info-field` sub-components for layout.
897
-
898
- ### Input Properties
899
- | Input | Type | Default Value | Description |
900
- |-------|------|---------------|-------------|
901
- | `baseUrl` | string | `''` | Base URL for API calls (required) |
902
- | `currencyCode` | string | `''` | Currency code for amount display |
903
- | `currencyDecimals` | number | `0` | Decimal precision for amount formatting |
904
- | `sectionTitle` | string | `'indemnity'` | Section title translation key |
905
- | `indemnityIcon` | IconDefinition | `faFileSignature` | Header icon |
906
- | `headerIconClass` | string | `'primary-icon-xl'` | Header icon CSS class |
907
- | `headerTextClass` | string | `'mt-2 field-secondary-label-lg'` | Header text CSS class |
908
- | `headerDividerClass` | string | `'flex-grow-1 ms-2'` | Header divider CSS class |
909
- | `rowClass` | string | `'row mt-4'` | Row container CSS class |
910
- | `columnClass` | string | `'col-6'` | Field column CSS class |
911
- | `topSpacingColumnClass` | string | `'col-6 mt-4'` | Field column with top spacing CSS class |
912
- | `labelClass` | string | `'field-secondary-label-sm'` | Label CSS class |
913
- | `valueClass` | string | `'fs-14 fw-meduim'` | Value CSS class |
914
- | `dateFormat` | string | `'dd/MM/yyyy'` | Date format for start date |
915
- | `emptyStateContainerClass` | string | `'d-flex flex-column justify-content-center align-items-center my-5'` | Empty/loading container CSS class |
916
- | `emptyStateTextClass` | string | `'field-secondary-label-md'` | Empty/loading text CSS class |
917
-
918
- ### Output Events
919
- - `isLoadingChanged: EventEmitter<boolean>` - Emitted when loading state changes.
920
- - `errorOccurred: EventEmitter<string>` - Emitted when API request fails.
921
- - `hasDataChanged: EventEmitter<boolean>` - Emitted when data availability changes after loading.
922
-
923
- ## My Profile Entitlements Ticket Widget
924
-
925
- ### Usage
926
- ```html
927
- <hr-my-profile-ticket-widget
928
- [baseUrl]="baseUrl"
929
- (isLoadingChanged)="onTicketLoadingChanged($event)">
930
- </hr-my-profile-ticket-widget>
931
- ```
932
-
933
- 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.
934
-
935
- ### Input Properties
936
- | Input | Type | Default Value | Description |
937
- |-------|------|---------------|-------------|
938
- | `baseUrl` | string | `''` | Base URL for API calls (required) |
939
- | `sectionTitle` | string | `'tickets'` | Section title translation key |
940
- | `ticketsIcon` | IconDefinition | `faTicketsAirline` | Header icon |
941
- | `headerIconClass` | string | `'primary-icon-xl'` | Header icon CSS class |
942
- | `headerTextClass` | string | `'mt-2 field-secondary-label-lg'` | Header text CSS class |
943
- | `headerDividerClass` | string | `'flex-grow-1 ms-2'` | Header divider CSS class |
944
- | `columnClass` | string | `'col-lg-4 col-6 mt-4'` | Card column CSS class |
945
- | `cardHeight` | number | `135` | Card height in pixels |
946
- | `cardClass` | string | `'p-3 card-shadow border border-1 h-100 rounded rounded-2'` | Card CSS class |
947
- | `nameClass` | string | `'text-dark fs-16'` | Name text CSS class |
948
- | `subtitleClass` | string | `'field-secondary-label-sm mb-3'` | Subtitle CSS class |
949
- | `labelClass` | string | `'fs-12 text-secondary'` | Label CSS class |
950
- | `valueClass` | string | `'fs-12 text-dark-gray mx-1'` | Value CSS class |
951
- | `emptyStateContainerClass` | string | `'d-flex flex-column justify-content-center align-items-center my-5'` | Empty/loading container CSS class |
952
- | `emptyStateTextClass` | string | `'field-secondary-label-md'` | Empty/loading text CSS class |
953
-
954
- ### Output Events
955
- - `isLoadingChanged: EventEmitter<boolean>` - Emitted when loading state changes.
956
- - `errorOccurred: EventEmitter<string>` - Emitted when API request fails.
957
-
958
- ## My Profile Entitlements Medical Insurance Widget
959
-
960
- ### Usage
961
- ```html
962
- <hr-my-profile-medical-insurance-widget
963
- [baseUrl]="baseUrl"
964
- (isLoadingChanged)="onMedicalInsuranceLoadingChanged($event)">
965
- </hr-my-profile-medical-insurance-widget>
966
- ```
967
-
968
- 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.
969
-
970
- ### Input Properties
971
- | Input | Type | Default Value | Description |
972
- |-------|------|---------------|-------------|
973
- | `baseUrl` | string | `''` | Base URL for API calls (required) |
974
- | `sectionTitle` | string | `'MedicalInsurance'` | Section title translation key |
975
- | `medicalInsuranceIcon` | IconDefinition | `faNotesMedical` | Header icon |
976
- | `headerIconClass` | string | `'primary-icon-xl'` | Header icon CSS class |
977
- | `headerTextClass` | string | `'mt-2 field-secondary-label-lg'` | Header text CSS class |
978
- | `headerDividerClass` | string | `'flex-grow-1 ms-2'` | Header divider CSS class |
979
- | `labelClass` | string | `'field-secondary-label-sm'` | Label CSS class |
980
- | `valueClass` | string | `'text-dark-gray mx-1'` | Value CSS class |
981
- | `columnClass` | string | `'col-lg-4 col-6 mt-4'` | Card column CSS class |
982
- | `cardHeight` | number | `185` | Card height in pixels |
983
- | `cardClass` | string | `'p-3 card-shadow h-100 border border-1 rounded rounded-2'` | Card CSS class |
984
- | `nameClass` | string | `'text-dark fs-16 mb-2'` | Name text CSS class |
985
- | `dateFormat` | string | `'dd/MM/yyyy'` | Date format for coverage date |
986
- | `emptyStateContainerClass` | string | `'d-flex flex-column justify-content-center align-items-center my-5'` | Empty/loading container CSS class |
987
- | `emptyStateTextClass` | string | `'field-secondary-label-md'` | Empty/loading text CSS class |
988
-
989
- ### Output Events
990
- - `isLoadingChanged: EventEmitter<boolean>` - Emitted when loading state changes.
991
- - `errorOccurred: EventEmitter<string>` - Emitted when API request fails.
992
-
993
- ## My Profile Entitlements Others Widget
994
-
995
- ### Usage
996
- ```html
997
- <hr-my-profile-entitlements-others-widget
998
- [baseUrl]="baseUrl"
999
- (isLoadingChanged)="onOthersLoadingChanged($event)">
1000
- </hr-my-profile-entitlements-others-widget>
1001
- ```
1002
-
1003
- This component displays two fields: overtime eligibility (Eligible/NotEligible) and social security membership (Member/NotMember). Fetches both values via `forkJoin`.
1004
-
1005
- ### Input Properties
1006
- | Input | Type | Default Value | Description |
1007
- |-------|------|---------------|-------------|
1008
- | `baseUrl` | string | `''` | Base URL for API calls (required) |
1009
- | `sectionTitle` | string | `'Others'` | Section title translation key |
1010
- | `othersIcon` | IconDefinition | `faGrid2Plus` | Header icon |
1011
- | `headerIconClass` | string | `'primary-icon-xl'` | Header icon CSS class |
1012
- | `headerTextClass` | string | `'mt-2 field-secondary-label-lg'` | Header text CSS class |
1013
- | `headerDividerClass` | string | `'flex-grow-1 ms-2'` | Header divider CSS class |
1014
- | `rowClass` | string | `'row mt-4 mb-5'` | Row container CSS class |
1015
- | `columnClass` | string | `'col-md-4 col-6'` | Field column CSS class |
1016
- | `labelClass` | string | `'field-secondary-label-sm'` | Label CSS class |
1017
- | `valueClass` | string | `'fs-14 fw-meduim'` | Value CSS class |
1018
-
1019
- ### Output Events
1020
- - `isLoadingChanged: EventEmitter<boolean>` - Emitted when loading state changes.
1021
- - `errorOccurred: EventEmitter<string>` - Emitted when API request fails.
1022
-
1023
- ## My Profile Employee Documents Widget
1024
-
1025
- ### Usage
1026
- ```html
1027
- <hr-my-profile-personal-documents-widget
1028
- [baseUrl]="baseUrl"
1029
- [employeeName]="employeeName"
1030
- (isLoadingChanged)="onLoadingChanged($event)"
1031
- (attachmentViewed)="onAttachmentViewed($event)"
1032
- (attachmentDownloaded)="onAttachmentDownloaded($event)">
1033
- </hr-my-profile-personal-documents-widget>
1034
- ```
1035
-
1036
- 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.
1037
-
1038
- ### Input Properties
1039
- | Input | Type | Default Value | Description |
1040
- |-------|------|---------------|-------------|
1041
- | `baseUrl` | string | `''` | Base URL for API calls (required) |
1042
- | `employeeName` | string | `''` | Employee name displayed as card title |
1043
- | `sectionTitle` | string | `'EmployeeDocuments'` | Section title translation key |
1044
- | `icon` | IconDefinition | `faFileLines` | Header icon |
1045
- | `viewIcon` | IconDefinition | `faEye` | Attachment view icon |
1046
- | `downloadIcon` | IconDefinition | `faFolderArrowDown` | Attachment download icon |
1047
- | `headerIconClass` | string | `'primary-icon-xl'` | Header icon CSS class |
1048
- | `headerTextClass` | string | `'fs-16 mt-2 text-secondary'` | Header text CSS class |
1049
- | `headerDividerClass` | string | `'flex-grow-1 ms-2'` | Header divider CSS class |
1050
- | `valueClass` | string | `'text-dark-gray fs-14'` | Value text CSS class |
1051
- | `viewIconClass` | string | `'fs-15 text-dark cursor-pointer'` | View icon CSS class |
1052
- | `downloadIconClass` | string | `'fs-15 text-dark cursor-pointer'` | Download icon CSS class |
1053
- | `emptyStateContainerClass` | string | `'d-flex flex-column justify-content-center align-items-center my-5'` | Empty/loading container CSS class |
1054
- | `emptyStateTextClass` | string | `'field-secondary-label-md'` | Empty/loading text CSS class |
1055
- | `cardClass` | string | `'mt-4 card-shadow position-relative p-4'` | Card container CSS class (desktop only) |
1056
- | `topSpacingColClass` | string | `'col-md-3 col-6 mt-4'` | Top spacing column CSS class |
1057
- | `titleContainerClass` | string | `'mb-3'` | Title container CSS class |
1058
- | `titleClass` | string | `'text-dark fs-16 mb-0'` | Title text CSS class |
1059
- | `labelClass` | string | `'field-secondary-label-sm mb-1'` | Label CSS class |
1060
- | `actionsColumnClass` | string | `'col-2 d-flex flex-column mt-3'` | Actions column CSS class |
1061
- | `rowClass` | string | `'row'` | Row CSS class |
1062
- | `dataColClass` | string | `'col-10'` | Data column CSS class |
1063
- | `dataColSpacingClass` | string | `'mt-2'` | Data column spacing CSS class |
1064
- | `dataRowClass` | string | `'row align-items-center py-1 gx-0'` | Data row CSS class |
1065
- | `typeColClass` | string | `'col-3'` | Type column CSS class |
1066
- | `numberColClass` | string | `'col-3'` | Number column CSS class |
1067
- | `issueDateColClass` | string | `'col-3'` | Issue date column CSS class |
1068
- | `expiryDateColClass` | string | `'col-3'` | Expiry date column CSS class |
1069
- | `actionsColClass` | string | `'col-2 d-flex align-items-center'` | Actions column CSS class |
1070
- | `actionsWrapperClass` | string | `'d-flex align-items-center gap-2'` | Actions wrapper CSS class |
1071
- | `downloadContainerClass` | string | `'bg-light-gray rounded-3 d-flex align-items-center justify-content-center px-1 cursor-pointer'` | Download container CSS class |
1072
- | `tabletContainerClass` | string | `'mt-3'` | Tablet card container CSS class |
1073
- | `tabletCardClass` | string | `'row px-4 py-3 card-shadow'` | Tablet card CSS class |
1074
- | `tabletCardHeight` | string | `'175px'` | Tablet card fixed height |
1075
- | `tabletColWithAttachmentClass` | string | `'col-5'` | Tablet column class when attachments exist |
1076
- | `tabletColWithoutAttachmentClass` | string | `'col-6'` | Tablet column class when no attachments |
1077
- | `tabletActionsColClass` | string | `'col-1 d-flex align-items-center'` | Tablet actions column CSS class |
1078
- | `tabletBottomRowSpacingClass` | string | `'mt-4'` | Tablet bottom row spacing CSS class |
1079
- | `tabletDownloadCountClass` | string | `'text-dark fs-12 fw-bold ps-2'` | Tablet download count CSS class |
1080
- | `isMobile` | boolean | `false` | Mobile responsive mode |
1081
- | `isTablet` | boolean | `false` | Tablet responsive mode |
1082
-
1083
- ### Output Events
1084
- - `isLoadingChanged: EventEmitter<boolean>` - Emitted when loading state changes.
1085
- - `attachmentViewed: EventEmitter<any>` - Emitted when attachment view icon is clicked.
1086
- - `attachmentDownloaded: EventEmitter<any>` - Emitted when attachment download icon is clicked.
1087
- - `errorOccurred: EventEmitter<string>` - Emitted when API request fails.
1088
-
1089
- ## My Profile Dependents Documents Widget
1090
-
1091
- ### Usage
1092
- ```html
1093
- <hr-my-profile-dependents-documents-widget
1094
- [baseUrl]="baseUrl"
1095
- (isLoadingChanged)="onLoadingChanged($event)"
1096
- (attachmentViewed)="onAttachmentViewed($event)"
1097
- (attachmentDownloaded)="onAttachmentDownloaded($event)">
1098
- </hr-my-profile-dependents-documents-widget>
1099
- ```
1100
-
1101
- 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.
1102
-
1103
- ### Input Properties
1104
- | Input | Type | Default Value | Description |
1105
- |-------|------|---------------|-------------|
1106
- | `baseUrl` | string | `''` | Base URL for API calls (required) |
1107
- | `sectionTitle` | string | `'DependentsDocuments'` | Section title translation key |
1108
- | `icon` | IconDefinition | `faFileLines` | Header icon |
1109
- | `viewIcon` | IconDefinition | `faEye` | Attachment view icon |
1110
- | `downloadIcon` | IconDefinition | `faFolderArrowDown` | Attachment download icon |
1111
- | `headerIconClass` | string | `'primary-icon-xl'` | Header icon CSS class |
1112
- | `headerTextClass` | string | `'fs-16 mt-2 text-secondary'` | Header text CSS class |
1113
- | `headerDividerClass` | string | `'flex-grow-1 ms-2'` | Header divider CSS class |
1114
- | `valueClass` | string | `'text-dark-gray fs-14'` | Value text CSS class |
1115
- | `viewIconClass` | string | `'fs-15 text-dark cursor-pointer'` | View icon CSS class |
1116
- | `downloadIconClass` | string | `'fs-15 text-dark cursor-pointer'` | Download icon CSS class |
1117
- | `emptyStateContainerClass` | string | `'d-flex flex-column justify-content-center align-items-center my-5'` | Empty/loading container CSS class |
1118
- | `emptyStateTextClass` | string | `'field-secondary-label-md'` | Empty/loading text CSS class |
1119
- | `cardClass` | string | `'mt-4 card-shadow position-relative p-4'` | Card container CSS class (desktop only) |
1120
- | `topSpacingColClass` | string | `'col-md-3 col-6 mt-4'` | Top spacing column CSS class |
1121
- | `titleContainerClass` | string | `'mb-3'` | Title container CSS class |
1122
- | `titleClass` | string | `'text-dark fs-16 mb-0'` | Title text CSS class |
1123
- | `labelClass` | string | `'field-secondary-label-sm mb-1'` | Label CSS class |
1124
- | `actionsColumnClass` | string | `'col-2 d-flex flex-column mt-3'` | Actions column CSS class |
1125
- | `rowClass` | string | `'row'` | Row CSS class |
1126
- | `dataColClass` | string | `'col-10'` | Data column CSS class |
1127
- | `dataColSpacingClass` | string | `'mt-2'` | Data column spacing CSS class |
1128
- | `dataRowClass` | string | `'row align-items-center py-1 gx-0'` | Data row CSS class |
1129
- | `typeColClass` | string | `'col-3'` | Type column CSS class |
1130
- | `numberColClass` | string | `'col-3'` | Number column CSS class |
1131
- | `issueDateColClass` | string | `'col-3'` | Issue date column CSS class |
1132
- | `expiryDateColClass` | string | `'col-3'` | Expiry date column CSS class |
1133
- | `actionsColClass` | string | `'col-2 d-flex align-items-center'` | Actions column CSS class |
1134
- | `actionsWrapperClass` | string | `'d-flex align-items-center gap-2'` | Actions wrapper CSS class |
1135
- | `downloadContainerClass` | string | `'bg-light-gray rounded-3 d-flex align-items-center justify-content-center px-1 cursor-pointer'` | Download container CSS class |
1136
- | `tabletContainerClass` | string | `'mt-3'` | Tablet card container CSS class |
1137
- | `tabletCardClass` | string | `'row px-4 py-3 card-shadow'` | Tablet card CSS class |
1138
- | `tabletCardHeight` | string | `'175px'` | Tablet card fixed height |
1139
- | `tabletColWithAttachmentClass` | string | `'col-5'` | Tablet column class when attachments exist |
1140
- | `tabletColWithoutAttachmentClass` | string | `'col-6'` | Tablet column class when no attachments |
1141
- | `tabletActionsColClass` | string | `'col-1 d-flex align-items-center'` | Tablet actions column CSS class |
1142
- | `tabletBottomRowSpacingClass` | string | `'mt-4'` | Tablet bottom row spacing CSS class |
1143
- | `tabletDownloadCountClass` | string | `'text-dark fs-12 fw-bold ps-2'` | Tablet download count CSS class |
1144
- | `isMobile` | boolean | `false` | Mobile responsive mode |
1145
- | `isTablet` | boolean | `false` | Tablet responsive mode |
1146
-
1147
- ### Output Events
1148
- - `isLoadingChanged: EventEmitter<boolean>` - Emitted when loading state changes.
1149
- - `attachmentViewed: EventEmitter<any>` - Emitted when attachment view icon is clicked.
1150
- - `attachmentDownloaded: EventEmitter<any>` - Emitted when attachment download icon is clicked.
1151
- - `errorOccurred: EventEmitter<string>` - Emitted when API request fails.
1152
-
1
+ # shared-ui
2
+
3
+ This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 21.2.11.
4
+
5
+ ## Code scaffolding
6
+
7
+ Run `ng generate component component-name --project shared-ui` to generate a new component.
8
+ You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project shared-ui`.
9
+
10
+ > Note: Don't forget to add `--project shared-ui` or else it will be added to the default project in your `angular.json` file.
11
+
12
+ ## Build
13
+
14
+ Run `ng build HRComponents` to build the project. The build artifacts will be stored in the `dist/` directory.
15
+
16
+ ## Publishing
17
+
18
+ After building your library with `ng build HRComponents`, go to the dist folder `cd dist/shared-ui` and run `npm publish`.
19
+
20
+ ## Running unit tests
21
+
22
+ Run `ng test shared-ui` to execute the unit tests via [Karma](https://karma-runner.github.io).
23
+
24
+ ## Further help
25
+
26
+ 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.
27
+
28
+ ## Sky Bayan HR Components
29
+
30
+ This package contains shared HR components used in Bayan HR system, you can find in first installation the below
31
+ components:
32
+
33
+ 1. My Main Details Widget
34
+ 2. My Upcoming Events Widget
35
+ 3. My Calendar Widget
36
+ 4. My Next Week Vacation Insights Widget
37
+ 5. My Profile Personal Info Main Widget
38
+ 6. My Profile Personal Info Contact Widget
39
+ 7. My Profile Personal Info Address Widget
40
+ 8. My Profile Personal Info Languages Widget
41
+ 9. My Profile Personal Info Other Nationalities Widget
42
+ 10. My Profile Experiences Widget
43
+ 11. My Profile Degrees Widget
44
+ 12. My Profile Bank Information Widget
45
+ 13. My Profile Job Info Main Widget
46
+ 14. My Profile Job Info Contract Widget
47
+ 15. My Profile Job Info Salary Widget
48
+ 16. My Profile Job Info Service Charge Widget
49
+ 17. My Profile Employee Dependents Widget
50
+ 18. My Profile Entitlements Vacations Widget
51
+ 19. My Profile Entitlements Indemnity Widget
52
+ 20. My Profile Entitlements Ticket Widget
53
+ 21. My Profile Entitlements Medical Insurance Widget
54
+ 22. My Profile Entitlements Others Widget
55
+ 23. My Profile Employee Documents Widget
56
+ 24. My Profile Dependents Documents Widget
57
+ 25. My Team Subordinates Popup Widget
58
+
59
+ ## Dependencies
60
+
61
+ This library depends on `@skysoftware-co/bayan-components-ui` package which provides:
62
+
63
+ - Employee Badge Component
64
+
65
+ ## Installation
66
+
67
+ use npm to install this package by command: @skysoftware-co/bayan-hr-widgets-ui
68
+
69
+ ## Setup
70
+
71
+ 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.
72
+
73
+ ### 1. Set language and lexicon in your App Component
74
+
75
+ ```typescript
76
+ import { Component, inject, OnInit } from '@angular/core';
77
+ import { TranslateService } from '@ngx-translate/core';
78
+ import { TranslationService } from '@skysoftware-co/sky-components-ui';
79
+
80
+ @Component({
81
+ selector: 'app-root',
82
+ ...
83
+ })
84
+ export class AppComponent implements OnInit {
85
+ private translateService = inject(TranslateService);
86
+ private translationService = inject(TranslationService);
87
+
88
+ ngOnInit(): void {
89
+ // Set the active language ('en', 'ar', 'fr')
90
+ this.translateService.use('en');
91
+
92
+ // Optionally set a lexicon for additional or override translations
93
+ this.translationService.setLexicon({
94
+ 'CustomKey': 'Custom Value',
95
+ ...
96
+ });
97
+ }
98
+ }
99
+ ```
100
+
101
+ ### 2. Provide the TranslatePipe
102
+
103
+ Add `TranslatePipe` to the `providers` array in your App Component:
104
+
105
+ ```typescript
106
+ import { TranslatePipe } from '@skysoftware-co/sky-components-ui';
107
+
108
+ @Component({
109
+ selector: 'app-root',
110
+ standalone: true,
111
+ imports: [...],
112
+ providers: [TranslatePipe],
113
+ ...
114
+ })
115
+ export class AppComponent { }
116
+ ```
117
+
118
+ ## Constants Service
119
+
120
+ ### Usage
121
+
122
+ ```typescript
123
+ import { HRConstantsService } from '@skysoftware-co/bayan-hr-widgets-ui';
124
+ ```
125
+
126
+ This service provides default constant values used across HR components, you can override them at runtime.
127
+
128
+ ### Properties
129
+
130
+ | Property | Type | Default Value | Description |
131
+ | ----------------------------- | ------ | ------------- | --------------------------------------------------------- |
132
+ | `defaultVacationBalanceColor` | string | `'#727070'` | Default color for vacation balance indicator |
133
+ | `defaultVacationColor` | string | `'#DCDCDC'` | Default color for vacation type when no color is assigned |
134
+ | `defaultPublicHolidayColor` | string | `'#249EA0'` | Default color for public holidays in calendar |
135
+ | `defaultDayOffColor` | string | `'#FCCF5A'` | Default color for days off in calendar |
136
+ | `defaultEventsColor` | string | `'#e67e0f'` | Default color for events in calendar |
137
+
138
+ ## My Main Details Widget Component
139
+
140
+ ### Usage
141
+
142
+ ```html
143
+ <hr-my-main-details-widget></hr-my-main-details-widget>
144
+ ```
145
+
146
+ This component is used in Bayan HR system to show the employee main information widget in the employee portal home page. It displays employee info, shortcuts, reporting info, service years and vacation balances. This component uses `<bayan-employee-badge>` from `@skysoftware-co/bayan-components-ui` package.
147
+
148
+ ### Input Properties
149
+
150
+ | Input | Type | Default Value | Description |
151
+ | ----------------------------------- | ------------------------ | ------------------------------------------------------------------------------------------------------ | -------------------------------------------------- |
152
+ | `badgeClass` | string | `'badge employee-rounded-badge-xl fs-5'` | Badge CSS class |
153
+ | `badgeImageClass` | string | `'rounded-circle shadow-lg'` | Badge image CSS class |
154
+ | `badgeWidth` | string | `'50px'` | Badge width |
155
+ | `badgeHeight` | string | `'50px'` | Badge height |
156
+ | `employeeInfoContainerClass` | string | `'d-flex align-content-center'` | Employee info container CSS class |
157
+ | `employeeDetailsClass` | string | `'ms-3'` | Employee details CSS class |
158
+ | `employeeNameContainerClass` | string | `'d-flex align-items-center'` | Employee name container CSS class |
159
+ | `employeeNameClass` | string | `'fs-14 text-dark-gray fw-medium text-ellipsis-one-line'` | Employee name CSS class |
160
+ | `employeePositionClass` | string | `'fs-12 fw-normal text-dark-gray text-ellipsis-one-line mb-1'` | Employee position CSS class |
161
+ | `employeeGradeClass` | string | `'fs-12 text-dark-gray'` | Employee grade CSS class |
162
+ | `containerClass` | string | `'card rounded rounded-4 card-shadow p-16 border-top-0 mb-4'` | Main container CSS class |
163
+ | `cardBodyClass` | string | `'card-body p-4'` | Card body CSS class |
164
+ | `headerRowClass` | string | `'d-md-flex justify-content-between align-items-center mt-2 mb-3'` | Header row CSS class |
165
+ | `shortcutsContainerClass` | string | `'d-flex justify-content-md-end justify-content-sm-start fs-12 fw-normal text-secondary mt-3 mt-md-0'` | Shortcuts container CSS class |
166
+ | `shortcutItemClass` | string | `'d-flex flex-column align-items-center mx-2 wp-60'` | Shortcut item CSS class |
167
+ | `shortcutIconContainerClass` | string | `'d-flex justify-content-center align-items-center rounded-circle-40 cursor-pointer'` | Shortcut icon container CSS class |
168
+ | `shortcutIconClass` | string | `'fs-4'` | Shortcut icon CSS class |
169
+ | `shortcutTextClass` | string | `'text-center mt-1'` | Shortcut text CSS class |
170
+ | `detailsRowClass` | string | `'d-flex mt-4'` | Details row CSS class |
171
+ | `reportingBlockClass` | string | `'d-flex text-secondary align-items-center mb-2 mx-2'` | Reporting block CSS class |
172
+ | `captionLabelClasses` | string | `'d-flex flex-column align-self-start fs-14 text-dark-gray'` | Caption label CSS class |
173
+ | `captionLabelValueClass` | string | `'fw-medium mt-2'` | Caption label value CSS class |
174
+ | `vacationBalancesContainerClass` | string | `'d-flex text-secondary align-items-center mb-2'` | Vacation balances container CSS class |
175
+ | `vacationBalanceItemClass` | string | `'d-flex flex-column me-4'` | Vacation balance item CSS class |
176
+ | `vacationBalanceHeaderClass` | string | `'d-flex align-items-center'` | Vacation balance header CSS class |
177
+ | `vacationColorDotClass` | string | `'vacation-color-container-sm'` | Vacation color dot CSS class |
178
+ | `vacationTypeNameClass` | string | `'mx-2 fs-14 fw-normal text-dark-gray'` | Vacation type name CSS class |
179
+ | `vacationBalanceValueRowClass` | string | `'d-flex mt-2'` | Vacation balance value row CSS class |
180
+ | `vacationBalanceValueClass` | string | `'mx-2 fw-medium fs-14 text-dark-gray'` | Vacation balance value CSS class |
181
+ | `tooltipTriggerLinkClass` | string | `'d-flex align-items-center cursor-pointer'` | Tooltip trigger link CSS class |
182
+ | `tooltipTriggerTextClass` | string | `'mx-2 fs-14 text-dark-gray'` | Tooltip trigger text CSS class |
183
+ | `tooltipVacationRowClass` | string | `'d-flex align-items-center justify-content-around fs-12 mb-2'` | Tooltip vacation row CSS class |
184
+ | `tooltipVacationNameContainerClass` | string | `'d-flex flex-grow-1 align-items-center me-5'` | Tooltip vacation name container CSS class |
185
+ | `tooltipVacationNameClass` | string | `'mx-2'` | Tooltip vacation name CSS class |
186
+ | `reportingToLabel` | string | `'ReportingTo'` | Reporting to label text |
187
+ | `emptyReportingToLabel` | string | `'NotAnknown'` | Empty reporting to label text |
188
+ | `serviceYearsLabel` | string | `'ServiceYears'` | Service years label text |
189
+ | `moreLabel` | string | `'More'` | More label text |
190
+ | `dayLabel` | string | `'day'` | Day label text |
191
+ | `daysLabel` | string | `'days'` | Days label text |
192
+ | `yearsLabel` | string | `'Years'` | Years label text |
193
+ | `monthsLabel` | string | `'Months'` | Months label text |
194
+ | `defaultVacationBalanceColor` | string | from `HRConstantsService`: `'#727070'` | Default vacation balance color indicator |
195
+ | `defaultVacationColor` | string | from `HRConstantsService`: `'#DCDCDC'` | Default vacation type color when no color assigned |
196
+ | `baseUrl` | string | `''` | Base URL for API calls |
197
+ | `isMobile` | boolean | `false` | Mobile responsive mode |
198
+ | `isTablet` | boolean | `false` | Tablet responsive mode |
199
+ | `shortcuts` | MainWidgetShortcutItem[] | `[]` | List of shortcut items to display |
200
+
201
+ ### Output Events
202
+
203
+ - `onShortcutClicked: EventEmitter<MainWidgetShortcutItem>` - Emitted when the shortcut is clicked and has no navigation URL
204
+ - `isLoadingChanged: EventEmitter<boolean>` - When loading state changes
205
+
206
+ ## My Upcoming Events Widget Component
207
+
208
+ ### Usage
209
+
210
+ ```html
211
+ <hr-my-upcoming-events-widget></hr-my-upcoming-events-widget>
212
+ ```
213
+
214
+ This component displays upcoming events (birthdays and public holidays) in a card view with tab filtering and a popup for viewing all events. It uses `SkyAlertToastService` from `@skysoftware-co/sky-components-ui` for error notifications.
215
+
216
+ ### Input Properties
217
+
218
+ | Input | Type | Default Value | Description |
219
+ | --------------------------- | -------------------- | ----------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------- |
220
+ | `baseUrl` | string | `''` | Base URL for API calls |
221
+ | `weekendWarningDescription` | string | `'WeekendDayNotDefined'` | Warning text when weekend is not configured |
222
+ | `selectedLanguage` | string | `'en'` | Selected language (`'en'`, `'ar'`, `'fr'`) |
223
+ | `showProperty` | boolean | `true` | Show employee property badge on birthday events |
224
+ | `externalViewAll` | boolean | `false` | When true, emits `viewAllClicked` instead of opening popup |
225
+ | `cardClass` | string | `'bg-light-gray border-0 card p-3 card-shadow rounded rounded-4 mt-3'` | Card container CSS class |
226
+ | `noEventsTextClass` | string | `'text-center my-3 text-light-gray'` | No events text CSS class |
227
+ | `viewAllLinkClass` | string | `'fs-14 mt-2'` | View all link CSS class |
228
+ | `viewAllContainerClass` | string | `'d-flex justify-content-end cursor-pointer'` | View all container CSS class |
229
+ | `warningTextClass` | string | `'text-center my-2 text-light-gray'` | Warning text CSS class |
230
+ | `tabSelectedClass` | string | `'selected-event-option'` | Selected tab CSS class |
231
+ | `tabNotSelectedClass` | string | `'not-selected-event-option'` | Not selected tab CSS class |
232
+ | `tabTextSelectedClass` | string | `'text-white'` | Selected tab text CSS class |
233
+ | `tabTextNotSelectedClass` | string | `'text-primary'` | Not selected tab text CSS class |
234
+ | `tabContainerClass` | string | `'d-flex gap-2 mb-3'` | Tab bar container CSS class |
235
+ | `tabItemClass` | string | `'col-1 align-items-center rounded rounded-3 cursor-pointer text-center d-flex justify-content-center py-2 px-3'` | Tab item CSS class |
236
+ | `tabTextClass` | string | `'fs-16'` | Tab text CSS class |
237
+ | `tabIconClass` | string | `'fs-6'` | Tab icon CSS class |
238
+ | `eventIconClass` | string | `'fs-6 text-primary pe-2'` | Event icon CSS class |
239
+ | `eventNameBoldClass` | string | `'fw-medium'` | Event name bold CSS class |
240
+ | `eventDescriptionClass` | string | `'text-primary fw-medium'` | Event description CSS class |
241
+ | `propertyBadgeClass` | string | `'property-badge cursor-pointer me-1'` | Property badge CSS class |
242
+ | `dateFormat` | string | `'dd/MM/yyyy'` | Date format for event dates |
243
+ | `labels` | UpcomingEventsLabels | _(see below)_ | Localization labels |
244
+
245
+ ### Labels Default Values
246
+
247
+ | Label | Default |
248
+ | ---------------- | ----------------------- |
249
+ | `upcomingEvents` | `'Upcoming Events'` |
250
+ | `birthday` | `'Birthday'` |
251
+ | `publicHoliday` | `'Public Holiday'` |
252
+ | `during` | `'During'` |
253
+ | `isIn` | `'is in'` |
254
+ | `is` | `'is'` |
255
+ | `in` | `'In'` |
256
+ | `noEvents` | `'There are no events'` |
257
+ | `all` | `'All'` |
258
+ | `viewAll` | `'View All'` |
259
+
260
+ ### Output Events
261
+
262
+ - `isLoadingChanged: EventEmitter<boolean>` - Emitted when loading state changes
263
+ - `viewAllClicked: EventEmitter<void>` - Emitted when view all is clicked (only when `externalViewAll` is true)
264
+
265
+ ## My Calendar Widget Component
266
+
267
+ ### Usage
268
+
269
+ ```html
270
+ <hr-my-calendar-widget [baseUrl]="environment.baseUrl"> </hr-my-calendar-widget>
271
+ ```
272
+
273
+ This component displays an employee calendar showing vacations, public holidays, days off, and events. It uses DevExtreme Calendar (`DxCalendarModule`) with custom cell templates to render color-coded date ranges. The calendar loads 12 months of data starting from one month before the current date.
274
+
275
+ ### Input Properties
276
+
277
+ | Input | Type | Default Value | Description |
278
+ | ------------------------- | ---------------------------------- | -------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
279
+ | `baseUrl` | string | `''` | Base URL for API calls |
280
+ | `headerContainerClass` | string | `''` | Additional CSS class for the header container |
281
+ | `datasource` | `ScheduleRequestsResponse \| null` | `null` | External datasource for pending requests. When provided, pending vacation requests are merged with calendar vacations (consecutive same-type vacations are combined), and pending event requests are added as events. The calendar reactively updates whenever this input changes after the initial calendar data has loaded. |
282
+ | `publicHolidayColor` | string | from `HRConstantsService`: `'#249EA0'` | Color for public holidays |
283
+ | `dayOffColor` | string | from `HRConstantsService`: `'#FCCF5A'` | Color for days off |
284
+ | `eventsColor` | string | from `HRConstantsService`: `'#e67e0f'` | Color for events |
285
+ | `legendContainerClass` | string | `'row mb-2'` | Legend container CSS class |
286
+ | `legendRowClass` | string | `'d-flex'` | Legend row CSS class |
287
+ | `legendItemClass` | string | `'d-flex align-items-center'` | Legend item CSS class |
288
+ | `legendDotClass` | string | `'me-1 circle-sm'` | Legend dot CSS class |
289
+ | `legendLabelClass` | string | `'me-1 fs-12'` | Legend label CSS class |
290
+ | `publicHolidayDotClass` | string | `'bg-accent'` | Public holiday dot CSS class |
291
+ | `dayOffDotClass` | string | `'bg-yellow'` | Day off dot CSS class |
292
+ | `eventsDotClass` | string | `'bg-primary'` | Events dot CSS class |
293
+ | `vacationsContainerClass` | string | `'d-flex mt-3'` | Vacations legend container CSS class |
294
+ | `vacationsItemClass` | string | `'d-flex align-items-center'` | Vacations legend item CSS class |
295
+ | `vacationsIconClass` | string | `'fs-8 me-1'` | Vacations icon CSS class |
296
+ | `calendarContainerClass` | string | `'row mt-2 col-12'` | Calendar container CSS class |
297
+ | `calendarClass` | string | `'button-boeder-none'` | Calendar CSS class |
298
+
299
+ ### Output Events
300
+
301
+ - `isLoadingChanged: EventEmitter<boolean>` - Emitted when loading state changes
302
+
303
+ ### API Endpoint
304
+
305
+ The component calls `GET {baseUrl}/hr/employee-portal/calendar` with query parameters:
306
+
307
+ - `Month` - Starting month
308
+ - `Year` - Starting year
309
+ - `MonthsCount` - Number of months to load (default: 12)
310
+ - Header: `api-version: 2`
311
+
312
+ ## My Next Week Vacation Insights Widget Component
313
+
314
+ ### Usage
315
+
316
+ ```html
317
+ <hr-my-next-week-vacation-insights-widget
318
+ [baseUrl]="environment.baseUrl"
319
+ [showProperty]="true"
320
+ (isLoadingChanged)="onLoadingChanged($event)"
321
+ >
322
+ </hr-my-next-week-vacation-insights-widget>
323
+ ```
324
+
325
+ 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.
326
+
327
+ ### Input Properties
328
+
329
+ | Input | Type | Default Value | Description |
330
+ | ------------------------ | ------- | ------------------------------------------------------------- | ---------------------------------------------- |
331
+ | `baseUrl` | string | `''` | Base URL for API calls |
332
+ | `showProperty` | boolean | `false` | Show employee property badge in the popup grid |
333
+ | `cardClass` | string | `'card rounded rounded-4 card-shadow border-top-0 h-100 p-4'` | Card container CSS class |
334
+ | `titleClass` | string | `'table-header-lg fw-meduim mb-3 mt-2'` | Card title CSS class |
335
+ | `valueClass` | string | `'fs-24 mt-1 link-dark hover-primary text-decoration-none'` | Badge value CSS class (clickable) |
336
+ | `disabledValueClass` | string | `'fs-24 mt-1 text-muted pe-none text-decoration-none'` | Badge value CSS class when count is 0 |
337
+ | `upcomingContainerClass` | string | `'border-start border-5 mb-4'` | Upcoming vacations badge container CSS class |
338
+ | `expectedContainerClass` | string | `'border-start border-5'` | Expected to return badge container CSS class |
339
+ | `firstRowClass` | string | `'mb-4'` | CSS class for the first badge row wrapper |
340
+ | `secondRowClass` | string | `'mt-3'` | CSS class for the second badge row wrapper |
341
+
342
+ ### Output Events
343
+
344
+ - `isLoadingChanged: EventEmitter<boolean>` - Emitted when loading state changes
345
+
346
+ ### API Endpoints
347
+
348
+ - **Summary**: `GET {baseUrl}/hr/widgets/me/team/next-week-vacation-insights/summary?ShowDirectSubordinatesOnly=false`
349
+ - **Upcoming list**: `GET {baseUrl}/hr/widgets/me/team/next-week-vacation-insights/upcoming-vacations`
350
+ - **Expected to return list**: `GET {baseUrl}/hr/widgets/me/team/next-week-vacation-insights/expected-to-return`
351
+
352
+ ### My Team Subordinates Popup
353
+
354
+ ### Usage
355
+
356
+ ```html
357
+ <hr-my-team-popup
358
+ [baseUrl]="environment.baseUrl"
359
+ [showGrade]="false"
360
+ [showPropertySymbol]="true"
361
+ [pageSize]="100"
362
+ (isLoadingChanged)="onLoadingChanged($event)"
363
+ (errorOccurred)="onError($event)"
364
+ >
365
+ </hr-my-team-popup>
366
+ ```
367
+
368
+ Programmatic open helper:
369
+
370
+ ```ts
371
+ import { openMyTeamSubordinatesPopup } from '@skysoftware-co/bayan-hr-widgets-ui';
372
+
373
+ openMyTeamSubordinatesPopup();
374
+ ```
375
+
376
+ This popup component displays grouped subordinate employees with search, infinite scrolling, and a toggle between direct subordinates and all subordinates.
377
+
378
+ ### Input Properties
379
+
380
+ | Input | Type | Default Value | Description |
381
+ | ------------------------- | -------------- | ------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------- |
382
+ | `baseUrl` | string | required | Base URL for API calls |
383
+ | `pageSize` | number | `100` | Number of records loaded per page |
384
+ | `showGrade` | boolean | `false` | Shows employee grade row in the main info card |
385
+ | `showPropertySymbol` | boolean | `true` | Shows employee property symbol in the main info card |
386
+ | `phoneIcon` | IconDefinition | `faPhone` | Icon used for phone row |
387
+ | `emailIcon` | IconDefinition | `faEnvelope` | Icon used for email row |
388
+ | `headerRowClass` | string | `'d-flex justify-content-between align-items-center mb-2 pe-2'` | Header row container class |
389
+ | `switchContainerClass` | string | `'form-check form-switch d-flex align-items-center custom-switch-dark ps-0'` | Toggle switch wrapper class |
390
+ | `switchInputClass` | string | `'form-check-input text-dark ms-0'` | Toggle input class |
391
+ | `switchLabelClass` | string | `'form-check-label mx-2 fs-13'` | Toggle label class |
392
+ | `scrollViewClass` | string | `'position-relative'` | Scroll view host class |
393
+ | `emptyStateClass` | string | `'position-absolute top-50 start-50 translate-middle w-100 text-center text-dark-gray fs-14'` | Empty state container class |
394
+ | `groupHeaderClass` | string | `'fs-13 text-dark pt-2 pb-1'` | Admin unit group title class |
395
+ | `employeeCardClass` | string | `'bg-light-gray rounded p-2 mb-2 d-flex align-items-center justify-content-between border-start border-4 border-start-primary'` | Employee card container CSS classes |
396
+ | `employeeCardHeight` | string | `'100px'` | Fixed employee card height |
397
+ | `contactContainerClass` | string | `'d-flex flex-column gap-1 border-start border-2 ps-3 w-100'` | Contact section container class |
398
+ | `contactTitleClass` | string | `'fs-10 fw-medium mb-1 text-dark'` | Contact section title class |
399
+ | `contactRowClass` | string | `'d-flex align-items-center gap-2 fs-12 fw-normal lh-21 text-dark'` | Contact row class |
400
+ | `contactIconClass` | string | `'fs-10 text-light-gray'` | Contact icon class |
401
+ | `emailTextClass` | string | `'d-inline-block flex-grow-1 text-ellipsis-one-line'` | Email text class |
402
+ | `groupedListClass` | string | `'d-flex flex-column gap-2 pb-2'` | Grouped list wrapper class |
403
+ | `loadingContainerClass` | string | `'d-flex justify-content-center py-2'` | Loading container class |
404
+ | `loadingIndicatorClass` | string | `'w-30 h-30'` | Loading indicator class |
405
+ | `employeeRowClass` | string | `'row g-0 w-100 align-items-center flex-nowrap'` | Employee row layout class |
406
+ | `employeeInfoColumnClass` | string | `'col-8 overflow-hidden pe-2'` | Employee info column class |
407
+ | `contactColumnClass` | string | `'col-4 d-flex justify-content-end'` | Contact column class |
408
+
409
+ ### Output Events
410
+
411
+ - `isLoadingChanged: EventEmitter<boolean>` - Emitted when initial/reset loading state changes.
412
+ - `errorOccurred: EventEmitter<string>` - Emitted when API request fails.
413
+
414
+ ### API Endpoint
415
+
416
+ - `GET {baseUrl}/hr/widgets/me/team/subordinates`
417
+
418
+ ### Employee Main Info Card
419
+
420
+ Usage in template:
421
+
422
+ ```html
423
+ <app-employee-main-info-card
424
+ [employeeMainInfo]="employeeInfo"
425
+ [searchValue]="searchValue"
426
+ [showGrade]="false"
427
+ [showPropertySymbol]="true"
428
+ >
429
+ </app-employee-main-info-card>
430
+ ```
431
+
432
+ This component renders the subordinate basic profile header (name, position, property, badge image/initials) and supports text highlighting.
433
+
434
+ ## My Profile Widgets
435
+
436
+ The package also exports profile-focused widgets used in the employee profile page.
437
+
438
+ ## My Profile Personal Info Main Widget
439
+
440
+ ### Usage
441
+
442
+ ```html
443
+ <hr-my-profile-personal-info-main-widget [baseUrl]="baseUrl" (isLoadingChanged)="onMainLoadingChanged($event)">
444
+ </hr-my-profile-personal-info-main-widget>
445
+ ```
446
+
447
+ ### Input Properties
448
+
449
+ | Input | Type | Default Value | Description |
450
+ | -------------------------------------- | -------------- | --------------------------------------------------------------------- | -------------------------------------------------------- |
451
+ | `baseUrl` | string | `''` | Base URL for API calls (required) |
452
+ | `alternateLanguage` | string | `'English'` | Alternate language label next to employee alternate name |
453
+ | `headerIconClass` | string | `'primary-icon-xl'` | Header icon CSS class |
454
+ | `headerTextClass` | string | `'mt-2 field-secondary-label-lg'` | Header text CSS class |
455
+ | `headerDividerClass` | string | `'flex-grow-1 ms-2'` | Header divider CSS class |
456
+ | `rowClass` | string | `'row mt-4'` | Row container CSS class |
457
+ | `columnClass` | string | `'col-md-4 col-6'` | Column CSS class |
458
+ | `hiddenSpacerColClass` | string | `'col-md-4 col-6 d-md-block d-none'` | Hidden spacer column CSS class |
459
+ | `topSpacingColumnClass` | string | `'col-md-4 col-6 mt-4'` | Top spacing column CSS class |
460
+ | `topSpacingBottomMdSpacingColumnClass` | string | `'col-md-4 col-6 mt-4 mb-md-5'` | Top spacing + medium bottom spacing CSS class |
461
+ | `topSpacingBottomSpacingColumnClass` | string | `'col-md-4 col-6 mt-4 mb-5'` | Top spacing + bottom spacing CSS class |
462
+ | `labelClass` | string | `'field-secondary-label-sm'` | Label CSS class |
463
+ | `valueClass` | string | `'fs-14 fw-medium'` | Value CSS class |
464
+ | `mainIcon` | IconDefinition | `faMemoCircleInfo` | Header icon |
465
+ | `sectionTitle` | string | `'main'` | Section title translation key |
466
+ | `emptyStateContainerClass` | string | `'d-flex flex-column justify-content-center align-items-center my-5'` | Empty/loading container CSS class |
467
+ | `emptyStateTextClass` | string | `'field-secondary-label-md'` | Empty/loading text CSS class |
468
+
469
+ ### Output Events
470
+
471
+ - `isLoadingChanged: EventEmitter<boolean>` - Emitted when loading state changes.
472
+ - `errorOccurred: EventEmitter<string>` - Emitted when API request fails.
473
+
474
+ ## My Profile Experiences Widget
475
+
476
+ ### Usage
477
+
478
+ ```html
479
+ <hr-my-profile-experiences-widget [baseUrl]="baseUrl" (isLoadingChanged)="onExperiencesLoadingChanged($event)">
480
+ </hr-my-profile-experiences-widget>
481
+ ```
482
+
483
+ ### Input Properties
484
+
485
+ | Input | Type | Default Value | Description |
486
+ | --------------------------- | -------------- | --------------------------------------------------------------------- | ------------------------------------------------------------------------ |
487
+ | `baseUrl` | string | `''` | Base URL for API calls. |
488
+ | `sectionTitle` | string | `'experiences'` | Section title translation key. |
489
+ | `experienceIcon` | IconDefinition | `faUsersRays` | Header icon. |
490
+ | `viewIcon` | IconDefinition | `faEye` | Attachment view icon. |
491
+ | `downloadIcon` | IconDefinition | `faFolderArrowDown` | Attachment download icon. |
492
+ | `headerIconClass` | string | `'primary-icon-xl'` | Header icon CSS class. |
493
+ | `headerTextClass` | string | `'fs-16 mt-2 text-secondary'` | Header text CSS class. |
494
+ | `headerDividerClass` | string | `'flex-grow-1 ms-2'` | Header divider CSS class. |
495
+ | `rowClass` | string | `'mt-4'` | Main row CSS class. |
496
+ | `rowMarginBottomClass` | string | `'mb-5'` | Bottom spacing class when experiences exist. |
497
+ | `rowMarginBottomEmptyClass` | string | `'mb-4'` | Bottom spacing class when list is empty. |
498
+ | `headerRowClass` | string | `'row col-10'` | Header labels row CSS class. |
499
+ | `actionsSpacerClass` | string | `'col-2'` | Spacer column class between labels and actions area. |
500
+ | `itemRowClass` | string | `'row'` | Backward-compatible row class input (not used in current template loop). |
501
+ | `itemColumnsWrapperClass` | string | `'row col-10 mt-3'` | Per-item columns wrapper CSS class. |
502
+ | `itemColumnClass` | string | `'col-3'` | Column CSS class. |
503
+ | `labelClass` | string | `'field-secondary-label-sm text-ellipsis-one-line'` | Header label CSS class. |
504
+ | `valueClass` | string | `'text-dark-gray fs-14 text-ellipsis-one-line'` | Value text CSS class. |
505
+ | `actionsColumnClass` | string | `'col-2 align-items-end mt-3'` | Attachment action column CSS class. |
506
+ | `viewIconClass` | string | `'fs-15 text-dark cursor-pointer'` | View icon CSS class. |
507
+ | `downloadIconClass` | string | `'fs-15 mx-3 text-dark cursor-pointer'` | Download icon CSS class. |
508
+ | `emptyStateContainerClass` | string | `'d-flex flex-column justify-content-center align-items-center my-5'` | Empty/loading container CSS class. |
509
+ | `emptyStateTextClass` | string | `'field-secondary-label-md'` | Empty/loading text CSS class. |
510
+
511
+ ### Output Events
512
+
513
+ - `isLoadingChanged: EventEmitter<boolean>` - Emitted when loading state changes.
514
+ - `attachmentViewed: EventEmitter<any>` - Emitted when attachment view icon is clicked.
515
+ - `attachmentDownloaded: EventEmitter<any>` - Emitted when attachment download icon is clicked.
516
+ - `errorOccurred: EventEmitter<string>` - Emitted when API request fails.
517
+
518
+ ## My Profile Degrees Widget
519
+
520
+ ### Usage
521
+
522
+ ```html
523
+ <hr-my-profile-degrees-widget [baseUrl]="baseUrl" (isLoadingChanged)="onDegreesLoadingChanged($event)">
524
+ </hr-my-profile-degrees-widget>
525
+ ```
526
+
527
+ ### Input Properties
528
+
529
+ | Input | Type | Default Value | Description |
530
+ | --------------------------- | -------------- | --------------------------------------------------------------------- | ------------------------------------------------------------------------ |
531
+ | `baseUrl` | string | `''` | Base URL for API calls. |
532
+ | `sectionTitle` | string | `'Degrees'` | Section title translation key. |
533
+ | `degreesIcon` | IconDefinition | `faFileCertificate` | Header icon. |
534
+ | `viewIcon` | IconDefinition | `faEye` | Attachment view icon. |
535
+ | `downloadIcon` | IconDefinition | `faFolderArrowDown` | Attachment download icon. |
536
+ | `headerIconClass` | string | `'primary-icon-xl'` | Header icon CSS class. |
537
+ | `headerTextClass` | string | `'fs-16 mt-2 text-secondary'` | Header text CSS class. |
538
+ | `headerDividerClass` | string | `'flex-grow-1 ms-2'` | Header divider CSS class. |
539
+ | `rowClass` | string | `'mt-4'` | Main row CSS class. |
540
+ | `rowMarginBottomClass` | string | `'mb-5'` | Bottom spacing class when degrees exist. |
541
+ | `rowMarginBottomEmptyClass` | string | `'mb-4'` | Bottom spacing class when list is empty. |
542
+ | `headerRowClass` | string | `'row col-10'` | Header labels row CSS class. |
543
+ | `actionsSpacerClass` | string | `'col-2'` | Spacer column class between labels and actions area. |
544
+ | `itemRowClass` | string | `'row'` | Backward-compatible row class input (not used in current template loop). |
545
+ | `itemColumnsWrapperClass` | string | `'row col-10 mt-3'` | Per-item columns wrapper CSS class. |
546
+ | `itemColumnClass` | string | `'col-3'` | Column CSS class. |
547
+ | `labelClass` | string | `'field-secondary-label-sm text-ellipsis-one-line'` | Header label CSS class. |
548
+ | `valueClass` | string | `'text-dark-gray fs-14 text-ellipsis-one-line'` | Value text CSS class. |
549
+ | `actionsColumnClass` | string | `'col-2 align-items-end mt-3'` | Attachment action column CSS class. |
550
+ | `viewIconClass` | string | `'fs-15 text-dark cursor-pointer'` | View icon CSS class. |
551
+ | `downloadIconClass` | string | `'fs-15 mx-3 text-dark cursor-pointer'` | Download icon CSS class. |
552
+ | `emptyStateContainerClass` | string | `'d-flex flex-column justify-content-center align-items-center my-5'` | Empty/loading container CSS class. |
553
+ | `emptyStateTextClass` | string | `'field-secondary-label-md'` | Empty/loading text CSS class. |
554
+
555
+ ### Output Events
556
+
557
+ - `isLoadingChanged: EventEmitter<boolean>` - Emitted when loading state changes.
558
+ - `attachmentViewed: EventEmitter<any>` - Emitted when attachment view icon is clicked.
559
+ - `attachmentDownloaded: EventEmitter<any>` - Emitted when attachment download icon is clicked.
560
+ - `errorOccurred: EventEmitter<string>` - Emitted when API request fails.
561
+
562
+ ## My Profile Personal Info Contact Widget
563
+
564
+ ### Usage
565
+
566
+ ```html
567
+ <hr-my-profile-contact-widget
568
+ [baseUrl]="baseUrl"
569
+ [showEmergencyContact]="true"
570
+ (isLoadingChanged)="onContactLoadingChanged($event)"
571
+ >
572
+ </hr-my-profile-contact-widget>
573
+ ```
574
+
575
+ ### Input Properties
576
+
577
+ | Input | Type | Default Value | Description |
578
+ | --------------------------------------- | -------------- | --------------------------------------------------------------------- | --------------------------------------------- |
579
+ | `baseUrl` | string | `''` | Base URL for API calls (required) |
580
+ | `headerIconClass` | string | `'primary-icon-xl'` | Header icon CSS class |
581
+ | `headerTextClass` | string | `'mt-2 field-secondary-label-lg'` | Header text CSS class |
582
+ | `headerDividerClass` | string | `'flex-grow-1 ms-2'` | Header divider CSS class |
583
+ | `rowClass` | string | `'row mt-4'` | Row container CSS class |
584
+ | `columnClass` | string | `'col-4'` | Column CSS class |
585
+ | `responsiveTopSpacingColumnClass` | string | `'col-6 mt-4'` | Responsive top spacing column CSS class |
586
+ | `topSpacingBottomMdSpacingColumnClass` | string | `'col-md-4 col-6 mt-4 mb-md-5'` | Top spacing + medium bottom spacing CSS class |
587
+ | `topSpacingBottomSpacingColumnClass` | string | `'col-md-4 col-6 mt-4 mb-5'` | Top spacing + bottom spacing CSS class |
588
+ | `labelClass` | string | `'field-secondary-label-sm'` | Label CSS class |
589
+ | `valueClass` | string | `'fs-14 fw-medium text-ellipsis-one-line'` | Value CSS class |
590
+ | `emergencyContactLabelClass` | string | `'fs-14 fw-semibold'` | Emergency contact title CSS class |
591
+ | `emergencyContactColumnClass` | string | `'col-md-4 col-6'` | Emergency contact column CSS class |
592
+ | `emergencyContactResponsiveColumnClass` | string | `'col-md-4 col-6 mt-md-0 mt-4'` | Emergency contact responsive column CSS class |
593
+ | `emptyStateContainerClass` | string | `'d-flex flex-column justify-content-center align-items-center my-5'` | Empty/loading container CSS class |
594
+ | `emptyStateTextClass` | string | `'field-secondary-label-md'` | Empty/loading text CSS class |
595
+ | `contactIcon` | IconDefinition | `faPhone` | Header icon |
596
+ | `emergencyContactIcon` | IconDefinition | `faBolt` | Emergency contact icon |
597
+ | `sectionTitle` | string | `'contact'` | Section title translation key |
598
+ | `showEmergencyContact` | boolean | `true` | Show emergency contact block |
599
+ | `emergencyContactRowClass` | string | `'row mt-3 mb-4'` | Emergency contact row CSS class |
600
+
601
+ ### Output Events
602
+
603
+ - `isLoadingChanged: EventEmitter<boolean>` - Emitted when loading state changes.
604
+ - `errorOccurred: EventEmitter<string>` - Emitted when API request fails.
605
+
606
+ ## My Profile Personal Info Address Widget
607
+
608
+ ### Usage
609
+
610
+ ```html
611
+ <hr-my-profile-address-widget [baseUrl]="baseUrl" (isLoadingChanged)="onAddressLoadingChanged($event)">
612
+ </hr-my-profile-address-widget>
613
+ ```
614
+
615
+ ### Input Properties
616
+
617
+ | Input | Type | Default Value | Description |
618
+ | ------------------------------------ | -------------- | --------------------------------------------------------------------- | --------------------------------------- |
619
+ | `baseUrl` | string | `''` | Base URL for API calls (required) |
620
+ | `headerIconClass` | string | `'primary-icon-xl'` | Header icon CSS class |
621
+ | `headerTextClass` | string | `'fs-16 mt-2 text-secondary'` | Header text CSS class |
622
+ | `headerDividerClass` | string | `'flex-grow-1 ms-2'` | Header divider CSS class |
623
+ | `rowClass` | string | `'row mt-4'` | Row container CSS class |
624
+ | `columnClass` | string | `'col-md-4 col-6'` | Column CSS class |
625
+ | `responsiveTopSpacingColumnClass` | string | `'col-md-4 col-6 mt-md-0 mt-4'` | Responsive top spacing column CSS class |
626
+ | `topSpacingBottomSpacingColumnClass` | string | `'col-md-4 col-6 mt-4 mb-5'` | Top spacing + bottom spacing CSS class |
627
+ | `labelClass` | string | `'field-secondary-label-sm'` | Label CSS class |
628
+ | `valueClass` | string | `'fs-14 fw-medium'` | Value CSS class |
629
+ | `addressIcon` | IconDefinition | `faHouse` | Header icon |
630
+ | `sectionTitle` | string | `'address'` | Section title translation key |
631
+ | `emptyStateContainerClass` | string | `'d-flex flex-column justify-content-center align-items-center my-5'` | Empty/loading container CSS class |
632
+ | `emptyStateTextClass` | string | `'field-secondary-label-md'` | Empty/loading text CSS class |
633
+
634
+ ### Output Events
635
+
636
+ - `isLoadingChanged: EventEmitter<boolean>` - Emitted when loading state changes.
637
+ - `errorOccurred: EventEmitter<string>` - Emitted when API request fails.
638
+
639
+ ## My Profile Personal Info Languages Widget
640
+
641
+ ### Usage
642
+
643
+ ```html
644
+ <hr-my-profile-languages-widget
645
+ [baseUrl]="baseUrl"
646
+ (hasDataChange)="onLanguagesDataChange($event)"
647
+ (isLoadingChanged)="onLanguagesLoadingChanged($event)"
648
+ >
649
+ </hr-my-profile-languages-widget>
650
+ ```
651
+
652
+ ### Input Properties
653
+
654
+ | Input | Type | Default Value | Description |
655
+ | -------------------------- | -------------- | --------------------------------------------------------------------- | --------------------------------- |
656
+ | `baseUrl` | string | `''` | Base URL for API calls |
657
+ | `headerIconClass` | string | `'primary-icon-xl'` | Header icon CSS class |
658
+ | `headerTextClass` | string | `'fs-16 mt-2 text-secondary'` | Header text CSS class |
659
+ | `headerDividerClass` | string | `'flex-grow-1 ms-2'` | Header divider CSS class |
660
+ | `contentTextClass` | string | `'text-dark-gray fs-14 fw-medium mt-4'` | Content text CSS class |
661
+ | `emptyStateContainerClass` | string | `'d-flex flex-column justify-content-center align-items-center my-5'` | Empty/loading container CSS class |
662
+ | `emptyStateTextClass` | string | `'field-secondary-label-md'` | Empty/loading text CSS class |
663
+ | `languagesIcon` | IconDefinition | `faLanguage` | Header icon |
664
+ | `sectionTitle` | string | `'languages'` | Section title translation key |
665
+
666
+ ### Output Events
667
+
668
+ - `hasDataChange: EventEmitter<boolean>` - Emitted when language list has data or not.
669
+ - `isLoadingChanged: EventEmitter<boolean>` - Emitted when loading state changes.
670
+ - `errorOccurred: EventEmitter<string>` - Emitted when API request fails.
671
+
672
+ ## My Profile Personal Info Other Nationalities Widget
673
+
674
+ ### Usage
675
+
676
+ ```html
677
+ <hr-my-profile-other-nationalities-widget
678
+ [baseUrl]="baseUrl"
679
+ (hasDataChange)="onOtherNationalitiesDataChange($event)"
680
+ (isLoadingChanged)="onOtherNationalitiesLoadingChanged($event)"
681
+ >
682
+ </hr-my-profile-other-nationalities-widget>
683
+ ```
684
+
685
+ ### Input Properties
686
+
687
+ | Input | Type | Default Value | Description |
688
+ | -------------------------- | -------------- | --------------------------------------------------------------------- | --------------------------------- |
689
+ | `baseUrl` | string | `''` | Base URL for API calls (required) |
690
+ | `headerIconClass` | string | `'primary-icon-xl'` | Header icon CSS class |
691
+ | `headerTextClass` | string | `'fs-16 mt-2 text-secondary'` | Header text CSS class |
692
+ | `headerDividerClass` | string | `'flex-grow-1 ms-2'` | Header divider CSS class |
693
+ | `contentTextClass` | string | `'text-dark-gray fs-14 fw-medium mt-4'` | Content text CSS class |
694
+ | `emptyStateContainerClass` | string | `'d-flex flex-column justify-content-center align-items-center my-5'` | Empty/loading container CSS class |
695
+ | `emptyStateTextClass` | string | `'field-secondary-label-md'` | Empty/loading text CSS class |
696
+ | `otherNationalitiesIcon` | IconDefinition | `faEarthAfrica` | Header icon |
697
+ | `sectionTitle` | string | `'otherNationalities'` | Section title translation key |
698
+ | `emptyStateTextKey` | string | `'ThereIsNoOtherNationalitiesYet'` | Empty state translation key |
699
+
700
+ ### Output Events
701
+
702
+ - `hasDataChange: EventEmitter<boolean>` - Emitted when other nationalities list has data or not.
703
+ - `isLoadingChanged: EventEmitter<boolean>` - Emitted when loading state changes.
704
+ - `errorOccurred: EventEmitter<string>` - Emitted when API request fails.
705
+
706
+ ## My Profile Bank Information Widget
707
+
708
+ ### Usage
709
+
710
+ ```html
711
+ <hr-my-profile-bank-info-widget
712
+ [baseUrl]="baseUrl"
713
+ [currencyCode]="currencyCode"
714
+ [currencyDecimals]="currencyDecimals"
715
+ (isLoadingChanged)="onBankLoadingChanged($event)"
716
+ >
717
+ </hr-my-profile-bank-info-widget>
718
+ ```
719
+
720
+ ### Input Properties
721
+
722
+ | Input | Type | Default Value | Description |
723
+ | ------------------------------ | -------------- | ---------------------------------------------------------------------------- | --------------------------------------------------- |
724
+ | `baseUrl` | string | `''` | Base URL for API calls (required) |
725
+ | `currencyCode` | string | `''` | Currency code shown with transfer amount |
726
+ | `currencyDecimals` | number | `2` | Decimal precision for transfer amount formatting |
727
+ | `headerIconClass` | string | `'primary-icon-xl'` | Header icon CSS class |
728
+ | `headerTextClass` | string | `'mt-2 field-secondary-label-lg'` | Header text CSS class |
729
+ | `headerDividerClass` | string | `'flex-grow-1 ms-2'` | Header divider CSS class |
730
+ | `cardClass` | string | `'mt-4 card-shadow position-relative'` | Bank card container CSS class |
731
+ | `mainBadgeClass` | string | `'position-absolute text-center top-0 mt-3 start-0 bg-primary status-badge'` | Main bank badge CSS class |
732
+ | `mainBadgeTextClass` | string | `'mx-1 fs-12 text-white'` | Main bank badge text CSS class |
733
+ | `triangleClass` | string | `'position-absolute start-0 top-0'` | Main bank badge triangle CSS class |
734
+ | `rowClass` | string | `'row px-4 pb-3'` | Bank details row CSS class |
735
+ | `rowMainPtClass` | string | `'pt-5'` | Top padding class for main bank row |
736
+ | `rowNormalPtClass` | string | `'pt-3'` | Top padding class for normal bank row |
737
+ | `columnClass` | string | `'col-md-4 col-6'` | Column CSS class |
738
+ | `responsiveTopSpacingColClass` | string | `'col-md-4 col-6 mt-md-0 mt-4'` | Responsive top spacing column CSS class |
739
+ | `topSpacingColClass` | string | `'col-md-4 col-6 mt-4'` | Top spacing column CSS class |
740
+ | `labelClass` | string | `'field-secondary-label-sm'` | Label CSS class |
741
+ | `valueClass` | string | `'table-cell-md'` | Value CSS class |
742
+ | `emptyStateContainerClass` | string | `'d-flex flex-column justify-content-center align-items-center my-5'` | Empty/loading container CSS class |
743
+ | `emptyStateTextClass` | string | `'field-secondary-label-md'` | Empty/loading text CSS class |
744
+ | `bankInformationIcon` | IconDefinition | `faMoneyCheckDollarPen` | Header icon |
745
+ | `sectionHeaderVisibility` | boolean | `true` | Show or hide the section header |
746
+ | `sectionTitle` | string | `'BankInformation'` | Section title translation key |
747
+ | `language` | string | `'en'` | Language used for RTL behavior (`'ar'` enables RTL) |
748
+
749
+ ### Output Events
750
+
751
+ - `isLoadingChanged: EventEmitter<boolean>` - Emitted when loading state changes.
752
+ - `errorOccurred: EventEmitter<string>` - Emitted when API request fails.
753
+
754
+ ## My Profile Job Information Widgets
755
+
756
+ ## My Profile Job Info Main Widget
757
+
758
+ ### Usage
759
+
760
+ ```html
761
+ <hr-my-profile-job-info-widget [baseUrl]="baseUrl" (isLoadingChanged)="onJobMainLoadingChanged($event)">
762
+ </hr-my-profile-job-info-widget>
763
+ ```
764
+
765
+ ### Input Properties
766
+
767
+ | Input | Type | Default Value | Description |
768
+ | -------------------------------------- | ------ | --------------------------------------------------------------------- | --------------------------------------------- |
769
+ | `baseUrl` | string | `''` | Base URL for API calls (required) |
770
+ | `headerIconClass` | string | `'primary-icon-xl'` | Header icon CSS class |
771
+ | `headerTextClass` | string | `'mt-2 field-secondary-label-lg'` | Header text CSS class |
772
+ | `headerDividerClass` | string | `'flex-grow-1 ms-2'` | Header divider CSS class |
773
+ | `rowClass` | string | `'row mt-4'` | Row container CSS class |
774
+ | `columnClass` | string | `'col-md-4 col-6'` | Column CSS class |
775
+ | `responsiveTopSpacingColumnClass` | string | `'col-md-4 col-6 mt-md-0 mt-4'` | Responsive top spacing column CSS class |
776
+ | `topSpacingBottomMdSpacingColumnClass` | string | `'col-md-4 col-6 mt-4 mb-md-5'` | Top spacing + medium bottom spacing CSS class |
777
+ | `topSpacingBottomSpacingColumnClass` | string | `'col-md-4 col-6 mt-4 mb-5'` | Top spacing + bottom spacing CSS class |
778
+ | `labelClass` | string | `'field-secondary-label-sm'` | Label CSS class |
779
+ | `valueClass` | string | `'fs-14 fw-medium'` | Value CSS class |
780
+ | `emptyStateContainerClass` | string | `'d-flex flex-column justify-content-center align-items-center my-5'` | Empty/loading container CSS class |
781
+ | `emptyStateTextClass` | string | `'field-secondary-label-md'` | Empty/loading text CSS class |
782
+ | `sectionTitle` | string | `'Main'` | Section title translation key |
783
+
784
+ ### Output Events
785
+
786
+ - `isLoadingChanged: EventEmitter<boolean>` - Emitted when loading state changes.
787
+ - `errorOccurred: EventEmitter<string>` - Emitted when API request fails.
788
+
789
+ ## My Profile Job Info Contract Widget
790
+
791
+ ### Usage
792
+
793
+ ```html
794
+ <hr-my-profile-contract-widget [baseUrl]="baseUrl" (isLoadingChanged)="onJobContractLoadingChanged($event)">
795
+ </hr-my-profile-contract-widget>
796
+ ```
797
+
798
+ ### Input Properties
799
+
800
+ | Input | Type | Default Value | Description |
801
+ | -------------------------------------- | ------ | --------------------------------------------------------------------- | --------------------------------------------- |
802
+ | `baseUrl` | string | `''` | Base URL for API calls (required) |
803
+ | `headerIconClass` | string | `'primary-icon-xl'` | Header icon CSS class |
804
+ | `headerTextClass` | string | `'mt-2 field-secondary-label-lg'` | Header text CSS class |
805
+ | `headerDividerClass` | string | `'flex-grow-1 ms-2'` | Header divider CSS class |
806
+ | `rowClass` | string | `'row mt-4'` | Row container CSS class |
807
+ | `columnClass` | string | `'col-md-4 col-6'` | Column CSS class |
808
+ | `responsiveTopSpacingColumnClass` | string | `'col-md-4 col-6 mt-md-0 mt-4'` | Responsive top spacing column CSS class |
809
+ | `topSpacingBottomMdSpacingColumnClass` | string | `'col-md-4 col-6 mt-4 mb-md-5'` | Top spacing + medium bottom spacing CSS class |
810
+ | `topSpacingBottomSpacingColumnClass` | string | `'col-md-4 col-6 mt-4 mb-5'` | Top spacing + bottom spacing CSS class |
811
+ | `labelClass` | string | `'field-secondary-label-sm'` | Label CSS class |
812
+ | `valueClass` | string | `'fs-14 fw-medium text-ellipsis-one-line'` | Value CSS class |
813
+ | `emptyStateContainerClass` | string | `'d-flex flex-column justify-content-center align-items-center my-5'` | Empty/loading container CSS class |
814
+ | `emptyStateTextClass` | string | `'field-secondary-label-md'` | Empty/loading text CSS class |
815
+ | `sectionTitle` | string | `'Contract'` | Section title translation key |
816
+
817
+ ### Output Events
818
+
819
+ - `isLoadingChanged: EventEmitter<boolean>` - Emitted when loading state changes.
820
+ - `errorOccurred: EventEmitter<string>` - Emitted when API request fails.
821
+
822
+ ## My Profile Job Info Salary Widget
823
+
824
+ ### Usage
825
+
826
+ ```html
827
+ <hr-my-profile-salary-widget
828
+ [baseUrl]="baseUrl"
829
+ [currencyCode]="currencyCode"
830
+ [currencyDecimals]="currencyDecimals"
831
+ (isLoadingChanged)="onJobSalaryLoadingChanged($event)"
832
+ >
833
+ </hr-my-profile-salary-widget>
834
+ ```
835
+
836
+ ### Input Properties
837
+
838
+ | Input | Type | Default Value | Description |
839
+ | -------------------------- | ------ | --------------------------------------------------------------------- | ---------------------------------------------- |
840
+ | `baseUrl` | string | `''` | Base URL for API calls (required) |
841
+ | `currencyCode` | string | `''` | Currency code shown with salary amounts |
842
+ | `currencyDecimals` | number | `2` | Decimal precision for salary amount formatting |
843
+ | `headerIconClass` | string | `'primary-icon-xl'` | Header icon CSS class |
844
+ | `headerTextClass` | string | `'mt-2 field-secondary-label-lg'` | Header text CSS class |
845
+ | `headerDividerClass` | string | `'flex-grow-1 ms-2'` | Header divider CSS class |
846
+ | `rowClass` | string | `'row mt-4'` | Row container CSS class |
847
+ | `columnClass` | string | `'col-md-4 col-6 mt-4'` | Column CSS class |
848
+ | `grossSalaryColumnClass` | string | `'col-md-4 col-6 my-4'` | Gross salary column CSS class |
849
+ | `labelClass` | string | `'field-secondary-label-sm'` | Label CSS class |
850
+ | `valueClass` | string | `'fs-14 fw-medium'` | Value CSS class |
851
+ | `currencyClass` | string | `'fs-10 text-secondary fw-light'` | Currency text CSS class |
852
+ | `emptyStateContainerClass` | string | `'d-flex flex-column justify-content-center align-items-center my-5'` | Empty/loading container CSS class |
853
+ | `emptyStateTextClass` | string | `'field-secondary-label-md'` | Empty/loading text CSS class |
854
+ | `sectionTitle` | string | `'Salary'` | Section title translation key |
855
+
856
+ ### Output Events
857
+
858
+ - `isLoadingChanged: EventEmitter<boolean>` - Emitted when loading state changes.
859
+ - `errorOccurred: EventEmitter<string>` - Emitted when API request fails.
860
+
861
+ ## My Profile Job Info Service Charge Widget
862
+
863
+ ### Usage
864
+
865
+ ```html
866
+ <hr-my-profile-charge-widget
867
+ [baseUrl]="baseUrl"
868
+ [currencyCode]="currencyCode"
869
+ (isLoadingChanged)="onJobServiceChargeLoadingChanged($event)"
870
+ >
871
+ </hr-my-profile-charge-widget>
872
+ ```
873
+
874
+ ### Input Properties
875
+
876
+ | Input | Type | Default Value | Description |
877
+ | -------------------------- | ------ | --------------------------------------------------------------------- | --------------------------------------------------------- |
878
+ | `baseUrl` | string | `''` | Base URL for API calls (required) |
879
+ | `currencyCode` | string | `''` | Currency code shown when entitlement mode is fixed amount |
880
+ | `headerIconClass` | string | `'primary-icon-xl'` | Header icon CSS class |
881
+ | `headerTextClass` | string | `'mt-2 field-secondary-label-lg'` | Header text CSS class |
882
+ | `headerDividerClass` | string | `'flex-grow-1 ms-2'` | Header divider CSS class |
883
+ | `rowClass` | string | `'row mt-4 mb-5'` | Row container CSS class |
884
+ | `columnClass` | string | `'col-md-4 col-6'` | Column CSS class |
885
+ | `labelClass` | string | `'field-secondary-label-sm'` | Label CSS class |
886
+ | `valueClass` | string | `'fs-14 fw-medium'` | Value CSS class |
887
+ | `emptyStateContainerClass` | string | `'d-flex flex-column justify-content-center align-items-center my-5'` | Empty/loading container CSS class |
888
+ | `emptyStateTextClass` | string | `'field-secondary-label-md'` | Empty/loading text CSS class |
889
+ | `sectionTitle` | string | `'ServiceCharge'` | Section title translation key |
890
+
891
+ ### Output Events
892
+
893
+ - `isLoadingChanged: EventEmitter<boolean>` - Emitted when loading state changes.
894
+ - `errorOccurred: EventEmitter<string>` - Emitted when API request fails.
895
+
896
+ ## My Profile Employee Dependents Widget
897
+
898
+ ### Usage
899
+
900
+ ```html
901
+ <hr-my-profile-dependents-widget [baseUrl]="baseUrl" (isLoadingChanged)="onDependentsLoadingChanged($event)">
902
+ </hr-my-profile-dependents-widget>
903
+ ```
904
+
905
+ 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.
906
+
907
+ ### Input Properties
908
+
909
+ | Input | Type | Default Value | Description |
910
+ | -------------------------- | -------------- | --------------------------------------------------------------------- | --------------------------------- |
911
+ | `baseUrl` | string | `''` | Base URL for API calls |
912
+ | `sectionTitle` | string | `'Dependents'` | Section title translation key |
913
+ | `icon` | IconDefinition | `faUsersLine` | Header icon |
914
+ | `headerIconClass` | string | `'primary-icon-xl'` | Header icon CSS class |
915
+ | `headerTextClass` | string | `'fs-16 mt-2 text-secondary'` | Header text CSS class |
916
+ | `headerDividerClass` | string | `'flex-grow-1 ms-2'` | Header divider CSS class |
917
+ | `emptyStateContainerClass` | string | `'d-flex flex-column justify-content-center align-items-center my-5'` | Empty/loading container CSS class |
918
+ | `emptyStateTextClass` | string | `'field-secondary-label-md'` | Empty/loading text CSS class |
919
+
920
+ ### Output Events
921
+
922
+ - `isLoadingChanged: EventEmitter<boolean>` - Emitted when loading state changes.
923
+
924
+ ## My Profile Entitlement Widgets
925
+
926
+ The package includes entitlement widgets for displaying employee benefits and entitlements in the profile page.
927
+
928
+ ## My Profile Entitlements Vacations Widget
929
+
930
+ ### Usage
931
+
932
+ ```html
933
+ <hr-my-profile-vacations-widget [baseUrl]="baseUrl" (isLoadingChanged)="onVacationsLoadingChanged($event)">
934
+ </hr-my-profile-vacations-widget>
935
+ ```
936
+
937
+ This component displays a list of vacation entitlements (vacation type name and entitlement days) in a two-column grid layout.
938
+
939
+ ### Input Properties
940
+
941
+ | Input | Type | Default Value | Description |
942
+ | -------------------------- | -------------- | --------------------------------------------------------------------- | --------------------------------- |
943
+ | `baseUrl` | string | `''` | Base URL for API calls (required) |
944
+ | `sectionTitle` | string | `'Vacations'` | Section title translation key |
945
+ | `vacationsIcon` | IconDefinition | `faIslandTropical` | Header icon |
946
+ | `headerIconClass` | string | `'primary-icon-xl'` | Header icon CSS class |
947
+ | `headerTextClass` | string | `'mt-2 field-secondary-label-lg'` | Header text CSS class |
948
+ | `headerDividerClass` | string | `'flex-grow-1 ms-2'` | Header divider CSS class |
949
+ | `rowClass` | string | `'row mt-4'` | Row container CSS class |
950
+ | `labelClass` | string | `'field-secondary-label-sm'` | Label CSS class |
951
+ | `valueClass` | string | `'fs-14 fw-meduim mt-2'` | Value CSS class |
952
+ | `labelColumnClass` | string | `'col-6'` | Label column CSS class |
953
+ | `valueColumnClass` | string | `'col-6'` | Value column CSS class |
954
+ | `emptyStateContainerClass` | string | `'d-flex flex-column justify-content-center align-items-center my-5'` | Empty/loading container CSS class |
955
+ | `emptyStateTextClass` | string | `'field-secondary-label-md'` | Empty/loading text CSS class |
956
+
957
+ ### Output Events
958
+
959
+ - `isLoadingChanged: EventEmitter<boolean>` - Emitted when loading state changes.
960
+ - `errorOccurred: EventEmitter<string>` - Emitted when API request fails.
961
+
962
+ ## My Profile Entitlements Indemnity Widget
963
+
964
+ ### Usage
965
+
966
+ ```html
967
+ <hr-my-profile-indemnity-widget
968
+ [baseUrl]="baseUrl"
969
+ [currencyCode]="currencyCode"
970
+ (isLoadingChanged)="onIndemnityLoadingChanged($event)"
971
+ >
972
+ </hr-my-profile-indemnity-widget>
973
+ ```
974
+
975
+ This component shows indemnity entitlement details including eligibility status, service years, and start date. Uses `hr-info-field` sub-components for layout.
976
+
977
+ ### Input Properties
978
+
979
+ | Input | Type | Default Value | Description |
980
+ | -------------------------- | -------------- | --------------------------------------------------------------------- | --------------------------------------- |
981
+ | `baseUrl` | string | `''` | Base URL for API calls (required) |
982
+ | `currencyCode` | string | `''` | Currency code for amount display |
983
+ | `currencyDecimals` | number | `0` | Decimal precision for amount formatting |
984
+ | `sectionTitle` | string | `'indemnity'` | Section title translation key |
985
+ | `indemnityIcon` | IconDefinition | `faFileSignature` | Header icon |
986
+ | `headerIconClass` | string | `'primary-icon-xl'` | Header icon CSS class |
987
+ | `headerTextClass` | string | `'mt-2 field-secondary-label-lg'` | Header text CSS class |
988
+ | `headerDividerClass` | string | `'flex-grow-1 ms-2'` | Header divider CSS class |
989
+ | `rowClass` | string | `'row mt-4'` | Row container CSS class |
990
+ | `columnClass` | string | `'col-6'` | Field column CSS class |
991
+ | `topSpacingColumnClass` | string | `'col-6 mt-4'` | Field column with top spacing CSS class |
992
+ | `labelClass` | string | `'field-secondary-label-sm'` | Label CSS class |
993
+ | `valueClass` | string | `'fs-14 fw-meduim'` | Value CSS class |
994
+ | `dateFormat` | string | `'dd/MM/yyyy'` | Date format for start date |
995
+ | `emptyStateContainerClass` | string | `'d-flex flex-column justify-content-center align-items-center my-5'` | Empty/loading container CSS class |
996
+ | `emptyStateTextClass` | string | `'field-secondary-label-md'` | Empty/loading text CSS class |
997
+
998
+ ### Output Events
999
+
1000
+ - `isLoadingChanged: EventEmitter<boolean>` - Emitted when loading state changes.
1001
+ - `errorOccurred: EventEmitter<string>` - Emitted when API request fails.
1002
+ - `hasDataChanged: EventEmitter<boolean>` - Emitted when data availability changes after loading.
1003
+
1004
+ ## My Profile Entitlements Ticket Widget
1005
+
1006
+ ### Usage
1007
+
1008
+ ```html
1009
+ <hr-my-profile-ticket-widget [baseUrl]="baseUrl" (isLoadingChanged)="onTicketLoadingChanged($event)">
1010
+ </hr-my-profile-ticket-widget>
1011
+ ```
1012
+
1013
+ 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.
1014
+
1015
+ ### Input Properties
1016
+
1017
+ | Input | Type | Default Value | Description |
1018
+ | -------------------------- | -------------- | --------------------------------------------------------------------- | --------------------------------- |
1019
+ | `baseUrl` | string | `''` | Base URL for API calls (required) |
1020
+ | `sectionTitle` | string | `'tickets'` | Section title translation key |
1021
+ | `ticketsIcon` | IconDefinition | `faTicketsAirline` | Header icon |
1022
+ | `headerIconClass` | string | `'primary-icon-xl'` | Header icon CSS class |
1023
+ | `headerTextClass` | string | `'mt-2 field-secondary-label-lg'` | Header text CSS class |
1024
+ | `headerDividerClass` | string | `'flex-grow-1 ms-2'` | Header divider CSS class |
1025
+ | `columnClass` | string | `'col-lg-4 col-6 mt-4'` | Card column CSS class |
1026
+ | `cardHeight` | number | `135` | Card height in pixels |
1027
+ | `cardClass` | string | `'p-3 card-shadow border border-1 h-100 rounded rounded-2'` | Card CSS class |
1028
+ | `nameClass` | string | `'text-dark fs-16'` | Name text CSS class |
1029
+ | `subtitleClass` | string | `'field-secondary-label-sm mb-3'` | Subtitle CSS class |
1030
+ | `labelClass` | string | `'fs-12 text-secondary'` | Label CSS class |
1031
+ | `valueClass` | string | `'fs-12 text-dark-gray mx-1'` | Value CSS class |
1032
+ | `emptyStateContainerClass` | string | `'d-flex flex-column justify-content-center align-items-center my-5'` | Empty/loading container CSS class |
1033
+ | `emptyStateTextClass` | string | `'field-secondary-label-md'` | Empty/loading text CSS class |
1034
+
1035
+ ### Output Events
1036
+
1037
+ - `isLoadingChanged: EventEmitter<boolean>` - Emitted when loading state changes.
1038
+ - `errorOccurred: EventEmitter<string>` - Emitted when API request fails.
1039
+
1040
+ ## My Profile Entitlements Medical Insurance Widget
1041
+
1042
+ ### Usage
1043
+
1044
+ ```html
1045
+ <hr-my-profile-medical-insurance-widget
1046
+ [baseUrl]="baseUrl"
1047
+ (isLoadingChanged)="onMedicalInsuranceLoadingChanged($event)"
1048
+ >
1049
+ </hr-my-profile-medical-insurance-widget>
1050
+ ```
1051
+
1052
+ 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.
1053
+
1054
+ ### Input Properties
1055
+
1056
+ | Input | Type | Default Value | Description |
1057
+ | -------------------------- | -------------- | --------------------------------------------------------------------- | --------------------------------- |
1058
+ | `baseUrl` | string | `''` | Base URL for API calls (required) |
1059
+ | `sectionTitle` | string | `'MedicalInsurance'` | Section title translation key |
1060
+ | `medicalInsuranceIcon` | IconDefinition | `faNotesMedical` | Header icon |
1061
+ | `headerIconClass` | string | `'primary-icon-xl'` | Header icon CSS class |
1062
+ | `headerTextClass` | string | `'mt-2 field-secondary-label-lg'` | Header text CSS class |
1063
+ | `headerDividerClass` | string | `'flex-grow-1 ms-2'` | Header divider CSS class |
1064
+ | `labelClass` | string | `'field-secondary-label-sm'` | Label CSS class |
1065
+ | `valueClass` | string | `'text-dark-gray mx-1'` | Value CSS class |
1066
+ | `columnClass` | string | `'col-lg-4 col-6 mt-4'` | Card column CSS class |
1067
+ | `cardHeight` | number | `185` | Card height in pixels |
1068
+ | `cardClass` | string | `'p-3 card-shadow h-100 border border-1 rounded rounded-2'` | Card CSS class |
1069
+ | `nameClass` | string | `'text-dark fs-16 mb-2'` | Name text CSS class |
1070
+ | `dateFormat` | string | `'dd/MM/yyyy'` | Date format for coverage date |
1071
+ | `emptyStateContainerClass` | string | `'d-flex flex-column justify-content-center align-items-center my-5'` | Empty/loading container CSS class |
1072
+ | `emptyStateTextClass` | string | `'field-secondary-label-md'` | Empty/loading text CSS class |
1073
+
1074
+ ### Output Events
1075
+
1076
+ - `isLoadingChanged: EventEmitter<boolean>` - Emitted when loading state changes.
1077
+ - `errorOccurred: EventEmitter<string>` - Emitted when API request fails.
1078
+
1079
+ ## My Profile Entitlements Others Widget
1080
+
1081
+ ### Usage
1082
+
1083
+ ```html
1084
+ <hr-my-profile-entitlements-others-widget [baseUrl]="baseUrl" (isLoadingChanged)="onOthersLoadingChanged($event)">
1085
+ </hr-my-profile-entitlements-others-widget>
1086
+ ```
1087
+
1088
+ This component displays two fields: overtime eligibility (Eligible/NotEligible) and social security membership (Member/NotMember). Fetches both values via `forkJoin`.
1089
+
1090
+ ### Input Properties
1091
+
1092
+ | Input | Type | Default Value | Description |
1093
+ | -------------------- | -------------- | --------------------------------- | --------------------------------- |
1094
+ | `baseUrl` | string | `''` | Base URL for API calls (required) |
1095
+ | `sectionTitle` | string | `'Others'` | Section title translation key |
1096
+ | `othersIcon` | IconDefinition | `faGrid2Plus` | Header icon |
1097
+ | `headerIconClass` | string | `'primary-icon-xl'` | Header icon CSS class |
1098
+ | `headerTextClass` | string | `'mt-2 field-secondary-label-lg'` | Header text CSS class |
1099
+ | `headerDividerClass` | string | `'flex-grow-1 ms-2'` | Header divider CSS class |
1100
+ | `rowClass` | string | `'row mt-4 mb-5'` | Row container CSS class |
1101
+ | `columnClass` | string | `'col-md-4 col-6'` | Field column CSS class |
1102
+ | `labelClass` | string | `'field-secondary-label-sm'` | Label CSS class |
1103
+ | `valueClass` | string | `'fs-14 fw-meduim'` | Value CSS class |
1104
+
1105
+ ### Output Events
1106
+
1107
+ - `isLoadingChanged: EventEmitter<boolean>` - Emitted when loading state changes.
1108
+ - `errorOccurred: EventEmitter<string>` - Emitted when API request fails.
1109
+
1110
+ ## My Profile Employee Documents Widget
1111
+
1112
+ ### Usage
1113
+
1114
+ ```html
1115
+ <hr-my-profile-personal-documents-widget
1116
+ [baseUrl]="baseUrl"
1117
+ [employeeName]="employeeName"
1118
+ (isLoadingChanged)="onLoadingChanged($event)"
1119
+ (attachmentViewed)="onAttachmentViewed($event)"
1120
+ (attachmentDownloaded)="onAttachmentDownloaded($event)"
1121
+ >
1122
+ </hr-my-profile-personal-documents-widget>
1123
+ ```
1124
+
1125
+ 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.
1126
+
1127
+ ### Input Properties
1128
+
1129
+ | Input | Type | Default Value | Description |
1130
+ | --------------------------------- | -------------- | ------------------------------------------------------------------------------------------------ | ------------------------------------------ |
1131
+ | `baseUrl` | string | `''` | Base URL for API calls (required) |
1132
+ | `employeeName` | string | `''` | Employee name displayed as card title |
1133
+ | `sectionTitle` | string | `'EmployeeDocuments'` | Section title translation key |
1134
+ | `icon` | IconDefinition | `faFileLines` | Header icon |
1135
+ | `viewIcon` | IconDefinition | `faEye` | Attachment view icon |
1136
+ | `downloadIcon` | IconDefinition | `faFolderArrowDown` | Attachment download icon |
1137
+ | `headerIconClass` | string | `'primary-icon-xl'` | Header icon CSS class |
1138
+ | `headerTextClass` | string | `'fs-16 mt-2 text-secondary'` | Header text CSS class |
1139
+ | `headerDividerClass` | string | `'flex-grow-1 ms-2'` | Header divider CSS class |
1140
+ | `valueClass` | string | `'text-dark-gray fs-14'` | Value text CSS class |
1141
+ | `viewIconClass` | string | `'fs-15 text-dark cursor-pointer'` | View icon CSS class |
1142
+ | `downloadIconClass` | string | `'fs-15 text-dark cursor-pointer'` | Download icon CSS class |
1143
+ | `emptyStateContainerClass` | string | `'d-flex flex-column justify-content-center align-items-center my-5'` | Empty/loading container CSS class |
1144
+ | `emptyStateTextClass` | string | `'field-secondary-label-md'` | Empty/loading text CSS class |
1145
+ | `cardClass` | string | `'mt-4 card-shadow position-relative p-4'` | Card container CSS class (desktop only) |
1146
+ | `topSpacingColClass` | string | `'col-md-3 col-6 mt-4'` | Top spacing column CSS class |
1147
+ | `titleContainerClass` | string | `'mb-3'` | Title container CSS class |
1148
+ | `titleClass` | string | `'text-dark fs-16 mb-0'` | Title text CSS class |
1149
+ | `labelClass` | string | `'field-secondary-label-sm mb-1'` | Label CSS class |
1150
+ | `actionsColumnClass` | string | `'col-2 d-flex flex-column mt-3'` | Actions column CSS class |
1151
+ | `rowClass` | string | `'row'` | Row CSS class |
1152
+ | `dataColClass` | string | `'col-10'` | Data column CSS class |
1153
+ | `dataColSpacingClass` | string | `'mt-2'` | Data column spacing CSS class |
1154
+ | `dataRowClass` | string | `'row align-items-center py-1 gx-0'` | Data row CSS class |
1155
+ | `typeColClass` | string | `'col-3'` | Type column CSS class |
1156
+ | `numberColClass` | string | `'col-3'` | Number column CSS class |
1157
+ | `issueDateColClass` | string | `'col-3'` | Issue date column CSS class |
1158
+ | `expiryDateColClass` | string | `'col-3'` | Expiry date column CSS class |
1159
+ | `actionsColClass` | string | `'col-2 d-flex align-items-center'` | Actions column CSS class |
1160
+ | `actionsWrapperClass` | string | `'d-flex align-items-center gap-2'` | Actions wrapper CSS class |
1161
+ | `downloadContainerClass` | string | `'bg-light-gray rounded-3 d-flex align-items-center justify-content-center px-1 cursor-pointer'` | Download container CSS class |
1162
+ | `tabletContainerClass` | string | `'mt-3'` | Tablet card container CSS class |
1163
+ | `tabletCardClass` | string | `'row px-4 py-3 card-shadow'` | Tablet card CSS class |
1164
+ | `tabletCardHeight` | string | `'175px'` | Tablet card fixed height |
1165
+ | `tabletColWithAttachmentClass` | string | `'col-5'` | Tablet column class when attachments exist |
1166
+ | `tabletColWithoutAttachmentClass` | string | `'col-6'` | Tablet column class when no attachments |
1167
+ | `tabletActionsColClass` | string | `'col-1 d-flex align-items-center'` | Tablet actions column CSS class |
1168
+ | `tabletBottomRowSpacingClass` | string | `'mt-4'` | Tablet bottom row spacing CSS class |
1169
+ | `tabletDownloadCountClass` | string | `'text-dark fs-12 fw-bold ps-2'` | Tablet download count CSS class |
1170
+ | `isMobile` | boolean | `false` | Mobile responsive mode |
1171
+ | `isTablet` | boolean | `false` | Tablet responsive mode |
1172
+
1173
+ ### Output Events
1174
+
1175
+ - `isLoadingChanged: EventEmitter<boolean>` - Emitted when loading state changes.
1176
+ - `attachmentViewed: EventEmitter<any>` - Emitted when attachment view icon is clicked.
1177
+ - `attachmentDownloaded: EventEmitter<any>` - Emitted when attachment download icon is clicked.
1178
+ - `errorOccurred: EventEmitter<string>` - Emitted when API request fails.
1179
+
1180
+ ## My Profile Dependents Documents Widget
1181
+
1182
+ ### Usage
1183
+
1184
+ ```html
1185
+ <hr-my-profile-dependents-documents-widget
1186
+ [baseUrl]="baseUrl"
1187
+ (isLoadingChanged)="onLoadingChanged($event)"
1188
+ (attachmentViewed)="onAttachmentViewed($event)"
1189
+ (attachmentDownloaded)="onAttachmentDownloaded($event)"
1190
+ >
1191
+ </hr-my-profile-dependents-documents-widget>
1192
+ ```
1193
+
1194
+ 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.
1195
+
1196
+ ### Input Properties
1197
+
1198
+ | Input | Type | Default Value | Description |
1199
+ | --------------------------------- | -------------- | ------------------------------------------------------------------------------------------------ | ------------------------------------------ |
1200
+ | `baseUrl` | string | `''` | Base URL for API calls (required) |
1201
+ | `sectionTitle` | string | `'DependentsDocuments'` | Section title translation key |
1202
+ | `icon` | IconDefinition | `faFileLines` | Header icon |
1203
+ | `viewIcon` | IconDefinition | `faEye` | Attachment view icon |
1204
+ | `downloadIcon` | IconDefinition | `faFolderArrowDown` | Attachment download icon |
1205
+ | `headerIconClass` | string | `'primary-icon-xl'` | Header icon CSS class |
1206
+ | `headerTextClass` | string | `'fs-16 mt-2 text-secondary'` | Header text CSS class |
1207
+ | `headerDividerClass` | string | `'flex-grow-1 ms-2'` | Header divider CSS class |
1208
+ | `valueClass` | string | `'text-dark-gray fs-14'` | Value text CSS class |
1209
+ | `viewIconClass` | string | `'fs-15 text-dark cursor-pointer'` | View icon CSS class |
1210
+ | `downloadIconClass` | string | `'fs-15 text-dark cursor-pointer'` | Download icon CSS class |
1211
+ | `emptyStateContainerClass` | string | `'d-flex flex-column justify-content-center align-items-center my-5'` | Empty/loading container CSS class |
1212
+ | `emptyStateTextClass` | string | `'field-secondary-label-md'` | Empty/loading text CSS class |
1213
+ | `cardClass` | string | `'mt-4 card-shadow position-relative p-4'` | Card container CSS class (desktop only) |
1214
+ | `topSpacingColClass` | string | `'col-md-3 col-6 mt-4'` | Top spacing column CSS class |
1215
+ | `titleContainerClass` | string | `'mb-3'` | Title container CSS class |
1216
+ | `titleClass` | string | `'text-dark fs-16 mb-0'` | Title text CSS class |
1217
+ | `labelClass` | string | `'field-secondary-label-sm mb-1'` | Label CSS class |
1218
+ | `actionsColumnClass` | string | `'col-2 d-flex flex-column mt-3'` | Actions column CSS class |
1219
+ | `rowClass` | string | `'row'` | Row CSS class |
1220
+ | `dataColClass` | string | `'col-10'` | Data column CSS class |
1221
+ | `dataColSpacingClass` | string | `'mt-2'` | Data column spacing CSS class |
1222
+ | `dataRowClass` | string | `'row align-items-center py-1 gx-0'` | Data row CSS class |
1223
+ | `typeColClass` | string | `'col-3'` | Type column CSS class |
1224
+ | `numberColClass` | string | `'col-3'` | Number column CSS class |
1225
+ | `issueDateColClass` | string | `'col-3'` | Issue date column CSS class |
1226
+ | `expiryDateColClass` | string | `'col-3'` | Expiry date column CSS class |
1227
+ | `actionsColClass` | string | `'col-2 d-flex align-items-center'` | Actions column CSS class |
1228
+ | `actionsWrapperClass` | string | `'d-flex align-items-center gap-2'` | Actions wrapper CSS class |
1229
+ | `downloadContainerClass` | string | `'bg-light-gray rounded-3 d-flex align-items-center justify-content-center px-1 cursor-pointer'` | Download container CSS class |
1230
+ | `tabletContainerClass` | string | `'mt-3'` | Tablet card container CSS class |
1231
+ | `tabletCardClass` | string | `'row px-4 py-3 card-shadow'` | Tablet card CSS class |
1232
+ | `tabletCardHeight` | string | `'175px'` | Tablet card fixed height |
1233
+ | `tabletColWithAttachmentClass` | string | `'col-5'` | Tablet column class when attachments exist |
1234
+ | `tabletColWithoutAttachmentClass` | string | `'col-6'` | Tablet column class when no attachments |
1235
+ | `tabletActionsColClass` | string | `'col-1 d-flex align-items-center'` | Tablet actions column CSS class |
1236
+ | `tabletBottomRowSpacingClass` | string | `'mt-4'` | Tablet bottom row spacing CSS class |
1237
+ | `tabletDownloadCountClass` | string | `'text-dark fs-12 fw-bold ps-2'` | Tablet download count CSS class |
1238
+ | `isMobile` | boolean | `false` | Mobile responsive mode |
1239
+ | `isTablet` | boolean | `false` | Tablet responsive mode |
1240
+
1241
+ ### Output Events
1242
+
1243
+ - `isLoadingChanged: EventEmitter<boolean>` - Emitted when loading state changes.
1244
+ - `attachmentViewed: EventEmitter<any>` - Emitted when attachment view icon is clicked.
1245
+ - `attachmentDownloaded: EventEmitter<any>` - Emitted when attachment download icon is clicked.
1246
+ - `errorOccurred: EventEmitter<string>` - Emitted when API request fails.