@skysoftware-co/bayan-hr-widgets-ui 2.0.15 → 2.0.17

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 -1173
  2. package/fesm2022/skysoftware-co-bayan-hr-widgets-ui.mjs +546 -581
  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 +34 -30
package/README.md CHANGED
@@ -1,1173 +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-popup
339
- [baseUrl]="environment.baseUrl"
340
- [showGrade]="false"
341
- [showPropertySymbol]="true"
342
- [pageSize]="100"
343
- (isLoadingChanged)="onLoadingChanged($event)"
344
- (errorOccurred)="onError($event)">
345
- </hr-my-team-popup>
346
- ```
347
-
348
- Programmatic open helper:
349
-
350
- ```ts
351
- import { openMyTeamSubordinatesPopup } from '@skysoftware-co/bayan-hr-widgets-ui';
352
-
353
- openMyTeamSubordinatesPopup();
354
- ```
355
-
356
- This popup component displays grouped subordinate employees with search, infinite scrolling, and a toggle between direct subordinates and all subordinates.
357
-
358
- ### Input Properties
359
- | Input | Type | Default Value | Description |
360
- |-------|------|---------------|-------------|
361
- | `baseUrl` | string | required | Base URL for API calls |
362
- | `pageSize` | number | `100` | Number of records loaded per page |
363
- | `showGrade` | boolean | `false` | Shows employee grade row in the main info card |
364
- | `showPropertySymbol` | boolean | `true` | Shows employee property symbol in the main info card |
365
- | `phoneIcon` | IconDefinition | `faPhone` | Icon used for phone row |
366
- | `emailIcon` | IconDefinition | `faEnvelope` | Icon used for email row |
367
- | `headerRowClass` | string | `'d-flex justify-content-between align-items-center mb-2 pe-2'` | Header row container class |
368
- | `switchContainerClass` | string | `'form-check form-switch d-flex align-items-center custom-switch-dark ps-0'` | Toggle switch wrapper class |
369
- | `switchInputClass` | string | `'form-check-input text-dark ms-0'` | Toggle input class |
370
- | `switchLabelClass` | string | `'form-check-label mx-2 fs-13'` | Toggle label class |
371
- | `scrollViewClass` | string | `'position-relative'` | Scroll view host class |
372
- | `emptyStateClass` | string | `'position-absolute top-50 start-50 translate-middle w-100 text-center text-dark-gray fs-14'` | Empty state container class |
373
- | `groupHeaderClass` | string | `'fs-13 text-dark pt-2 pb-1'` | Admin unit group title class |
374
- | `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 |
375
- | `employeeCardHeight` | string | `'100px'` | Fixed employee card height |
376
- | `contactContainerClass` | string | `'d-flex flex-column gap-1 border-start border-2 ps-3 w-100'` | Contact section container class |
377
- | `contactTitleClass` | string | `'fs-10 fw-medium mb-1 text-dark'` | Contact section title class |
378
- | `contactRowClass` | string | `'d-flex align-items-center gap-2 fs-12 fw-normal lh-21 text-dark'` | Contact row class |
379
- | `contactIconClass` | string | `'fs-10 text-light-gray'` | Contact icon class |
380
- | `emailTextClass` | string | `'d-inline-block flex-grow-1 text-ellipsis-one-line'` | Email text class |
381
- | `groupedListClass` | string | `'d-flex flex-column gap-2 pb-2'` | Grouped list wrapper class |
382
- | `loadingContainerClass` | string | `'d-flex justify-content-center py-2'` | Loading container class |
383
- | `loadingIndicatorClass` | string | `'w-30 h-30'` | Loading indicator class |
384
- | `employeeRowClass` | string | `'row g-0 w-100 align-items-center flex-nowrap'` | Employee row layout class |
385
- | `employeeInfoColumnClass` | string | `'col-8 overflow-hidden pe-2'` | Employee info column class |
386
- | `contactColumnClass` | string | `'col-4 d-flex justify-content-end'` | Contact column class |
387
-
388
- ### Output Events
389
- - `isLoadingChanged: EventEmitter<boolean>` - Emitted when initial/reset loading state changes.
390
- - `errorOccurred: EventEmitter<string>` - Emitted when API request fails.
391
-
392
- ### API Endpoint
393
- - `GET {baseUrl}/hr/widgets/me/team/subordinates`
394
-
395
- ### Employee Main Info Card
396
-
397
- Usage in template:
398
-
399
- ```html
400
- <app-employee-main-info-card
401
- [employeeMainInfo]="employeeInfo"
402
- [searchValue]="searchValue"
403
- [showGrade]="false"
404
- [showPropertySymbol]="true">
405
- </app-employee-main-info-card>
406
- ```
407
-
408
- This component renders the subordinate basic profile header (name, position, property, badge image/initials) and supports text highlighting.
409
-
410
- ## My Profile Widgets
411
-
412
- The package also exports profile-focused widgets used in the employee profile page.
413
-
414
- ## My Profile Personal Info Main Widget
415
-
416
- ### Usage
417
- ```html
418
- <hr-my-profile-personal-info-main-widget
419
- [baseUrl]="baseUrl"
420
- (isLoadingChanged)="onMainLoadingChanged($event)">
421
- </hr-my-profile-personal-info-main-widget>
422
- ```
423
-
424
- ### Input Properties
425
- | Input | Type | Default Value | Description |
426
- |-------|------|---------------|-------------|
427
- | `baseUrl` | string | `''` | Base URL for API calls (required) |
428
- | `alternateLanguage` | string | `'English'` | Alternate language label next to employee alternate name |
429
- | `headerIconClass` | string | `'primary-icon-xl'` | Header icon CSS class |
430
- | `headerTextClass` | string | `'mt-2 field-secondary-label-lg'` | Header text CSS class |
431
- | `headerDividerClass` | string | `'flex-grow-1 ms-2'` | Header divider CSS class |
432
- | `rowClass` | string | `'row mt-4'` | Row container CSS class |
433
- | `columnClass` | string | `'col-md-4 col-6'` | Column CSS class |
434
- | `hiddenSpacerColClass` | string | `'col-md-4 col-6 d-md-block d-none'` | Hidden spacer column CSS class |
435
- | `topSpacingColumnClass` | string | `'col-md-4 col-6 mt-4'` | Top spacing column CSS class |
436
- | `topSpacingBottomMdSpacingColumnClass` | string | `'col-md-4 col-6 mt-4 mb-md-5'` | Top spacing + medium bottom spacing CSS class |
437
- | `topSpacingBottomSpacingColumnClass` | string | `'col-md-4 col-6 mt-4 mb-5'` | Top spacing + bottom spacing CSS class |
438
- | `labelClass` | string | `'field-secondary-label-sm'` | Label CSS class |
439
- | `valueClass` | string | `'fs-14 fw-medium'` | Value CSS class |
440
- | `mainIcon` | IconDefinition | `faMemoCircleInfo` | Header icon |
441
- | `sectionTitle` | string | `'main'` | Section title translation key |
442
- | `emptyStateContainerClass` | string | `'d-flex flex-column justify-content-center align-items-center my-5'` | Empty/loading container CSS class |
443
- | `emptyStateTextClass` | string | `'field-secondary-label-md'` | Empty/loading text CSS class |
444
-
445
- ### Output Events
446
- - `isLoadingChanged: EventEmitter<boolean>` - Emitted when loading state changes.
447
- - `errorOccurred: EventEmitter<string>` - Emitted when API request fails.
448
-
449
- ## My Profile Experiences Widget
450
-
451
- ### Usage
452
- ```html
453
- <hr-my-profile-experiences-widget
454
- [baseUrl]="baseUrl"
455
- (isLoadingChanged)="onExperiencesLoadingChanged($event)">
456
- </hr-my-profile-experiences-widget>
457
- ```
458
-
459
- ### Input Properties
460
- | Input | Type | Default Value | Description |
461
- |-------|------|---------------|-------------|
462
- | `baseUrl` | string | `''` | Base URL for API calls. |
463
- | `sectionTitle` | string | `'experiences'` | Section title translation key. |
464
- | `experienceIcon` | IconDefinition | `faUsersRays` | Header icon. |
465
- | `viewIcon` | IconDefinition | `faEye` | Attachment view icon. |
466
- | `downloadIcon` | IconDefinition | `faFolderArrowDown` | Attachment download icon. |
467
- | `headerIconClass` | string | `'primary-icon-xl'` | Header icon CSS class. |
468
- | `headerTextClass` | string | `'fs-16 mt-2 text-secondary'` | Header text CSS class. |
469
- | `headerDividerClass` | string | `'flex-grow-1 ms-2'` | Header divider CSS class. |
470
- | `rowClass` | string | `'mt-4'` | Main row CSS class. |
471
- | `rowMarginBottomClass` | string | `'mb-5'` | Bottom spacing class when experiences exist. |
472
- | `rowMarginBottomEmptyClass` | string | `'mb-4'` | Bottom spacing class when list is empty. |
473
- | `headerRowClass` | string | `'row col-10'` | Header labels row CSS class. |
474
- | `actionsSpacerClass` | string | `'col-2'` | Spacer column class between labels and actions area. |
475
- | `itemRowClass` | string | `'row'` | Backward-compatible row class input (not used in current template loop). |
476
- | `itemColumnsWrapperClass` | string | `'row col-10 mt-3'` | Per-item columns wrapper CSS class. |
477
- | `itemColumnClass` | string | `'col-3'` | Column CSS class. |
478
- | `labelClass` | string | `'field-secondary-label-sm text-ellipsis-one-line'` | Header label CSS class. |
479
- | `valueClass` | string | `'text-dark-gray fs-14 text-ellipsis-one-line'` | Value text CSS class. |
480
- | `actionsColumnClass` | string | `'col-2 align-items-end mt-3'` | Attachment action column CSS class. |
481
- | `viewIconClass` | string | `'fs-15 text-dark cursor-pointer'` | View icon CSS class. |
482
- | `downloadIconClass` | string | `'fs-15 mx-3 text-dark cursor-pointer'` | Download icon CSS class. |
483
- | `emptyStateContainerClass` | string | `'d-flex flex-column justify-content-center align-items-center my-5'` | Empty/loading container CSS class. |
484
- | `emptyStateTextClass` | string | `'field-secondary-label-md'` | Empty/loading text CSS class. |
485
-
486
- ### Output Events
487
- - `isLoadingChanged: EventEmitter<boolean>` - Emitted when loading state changes.
488
- - `attachmentViewed: EventEmitter<any>` - Emitted when attachment view icon is clicked.
489
- - `attachmentDownloaded: EventEmitter<any>` - Emitted when attachment download icon is clicked.
490
- - `errorOccurred: EventEmitter<string>` - Emitted when API request fails.
491
-
492
- ## My Profile Degrees Widget
493
-
494
- ### Usage
495
- ```html
496
- <hr-my-profile-degrees-widget
497
- [baseUrl]="baseUrl"
498
- (isLoadingChanged)="onDegreesLoadingChanged($event)">
499
- </hr-my-profile-degrees-widget>
500
- ```
501
-
502
- ### Input Properties
503
- | Input | Type | Default Value | Description |
504
- |-------|------|---------------|-------------|
505
- | `baseUrl` | string | `''` | Base URL for API calls. |
506
- | `sectionTitle` | string | `'Degrees'` | Section title translation key. |
507
- | `degreesIcon` | IconDefinition | `faFileCertificate` | Header icon. |
508
- | `viewIcon` | IconDefinition | `faEye` | Attachment view icon. |
509
- | `downloadIcon` | IconDefinition | `faFolderArrowDown` | Attachment download icon. |
510
- | `headerIconClass` | string | `'primary-icon-xl'` | Header icon CSS class. |
511
- | `headerTextClass` | string | `'fs-16 mt-2 text-secondary'` | Header text CSS class. |
512
- | `headerDividerClass` | string | `'flex-grow-1 ms-2'` | Header divider CSS class. |
513
- | `rowClass` | string | `'mt-4'` | Main row CSS class. |
514
- | `rowMarginBottomClass` | string | `'mb-5'` | Bottom spacing class when degrees exist. |
515
- | `rowMarginBottomEmptyClass` | string | `'mb-4'` | Bottom spacing class when list is empty. |
516
- | `headerRowClass` | string | `'row col-10'` | Header labels row CSS class. |
517
- | `actionsSpacerClass` | string | `'col-2'` | Spacer column class between labels and actions area. |
518
- | `itemRowClass` | string | `'row'` | Backward-compatible row class input (not used in current template loop). |
519
- | `itemColumnsWrapperClass` | string | `'row col-10 mt-3'` | Per-item columns wrapper CSS class. |
520
- | `itemColumnClass` | string | `'col-3'` | Column CSS class. |
521
- | `labelClass` | string | `'field-secondary-label-sm text-ellipsis-one-line'` | Header label CSS class. |
522
- | `valueClass` | string | `'text-dark-gray fs-14 text-ellipsis-one-line'` | Value text CSS class. |
523
- | `actionsColumnClass` | string | `'col-2 align-items-end mt-3'` | Attachment action column CSS class. |
524
- | `viewIconClass` | string | `'fs-15 text-dark cursor-pointer'` | View icon CSS class. |
525
- | `downloadIconClass` | string | `'fs-15 mx-3 text-dark cursor-pointer'` | Download icon CSS class. |
526
- | `emptyStateContainerClass` | string | `'d-flex flex-column justify-content-center align-items-center my-5'` | Empty/loading container CSS class. |
527
- | `emptyStateTextClass` | string | `'field-secondary-label-md'` | Empty/loading text CSS class. |
528
-
529
- ### Output Events
530
- - `isLoadingChanged: EventEmitter<boolean>` - Emitted when loading state changes.
531
- - `attachmentViewed: EventEmitter<any>` - Emitted when attachment view icon is clicked.
532
- - `attachmentDownloaded: EventEmitter<any>` - Emitted when attachment download icon is clicked.
533
- - `errorOccurred: EventEmitter<string>` - Emitted when API request fails.
534
-
535
- ## My Profile Personal Info Contact Widget
536
-
537
- ### Usage
538
- ```html
539
- <hr-my-profile-contact-widget
540
- [baseUrl]="baseUrl"
541
- [showEmergencyContact]="true"
542
- (isLoadingChanged)="onContactLoadingChanged($event)">
543
- </hr-my-profile-contact-widget>
544
- ```
545
-
546
- ### Input Properties
547
- | Input | Type | Default Value | Description |
548
- |-------|------|---------------|-------------|
549
- | `baseUrl` | string | `''` | Base URL for API calls (required) |
550
- | `headerIconClass` | string | `'primary-icon-xl'` | Header icon CSS class |
551
- | `headerTextClass` | string | `'mt-2 field-secondary-label-lg'` | Header text CSS class |
552
- | `headerDividerClass` | string | `'flex-grow-1 ms-2'` | Header divider CSS class |
553
- | `rowClass` | string | `'row mt-4'` | Row container CSS class |
554
- | `columnClass` | string | `'col-4'` | Column CSS class |
555
- | `responsiveTopSpacingColumnClass` | string | `'col-6 mt-4'` | Responsive top spacing column CSS class |
556
- | `topSpacingBottomMdSpacingColumnClass` | string | `'col-md-4 col-6 mt-4 mb-md-5'` | Top spacing + medium bottom spacing CSS class |
557
- | `topSpacingBottomSpacingColumnClass` | string | `'col-md-4 col-6 mt-4 mb-5'` | Top spacing + bottom spacing CSS class |
558
- | `labelClass` | string | `'field-secondary-label-sm'` | Label CSS class |
559
- | `valueClass` | string | `'fs-14 fw-medium text-ellipsis-one-line'` | Value CSS class |
560
- | `emergencyContactLabelClass` | string | `'fs-14 fw-semibold'` | Emergency contact title CSS class |
561
- | `emergencyContactColumnClass` | string | `'col-md-4 col-6'` | Emergency contact column CSS class |
562
- | `emergencyContactResponsiveColumnClass` | string | `'col-md-4 col-6 mt-md-0 mt-4'` | Emergency contact responsive column CSS class |
563
- | `emptyStateContainerClass` | string | `'d-flex flex-column justify-content-center align-items-center my-5'` | Empty/loading container CSS class |
564
- | `emptyStateTextClass` | string | `'field-secondary-label-md'` | Empty/loading text CSS class |
565
- | `contactIcon` | IconDefinition | `faPhone` | Header icon |
566
- | `emergencyContactIcon` | IconDefinition | `faBolt` | Emergency contact icon |
567
- | `sectionTitle` | string | `'contact'` | Section title translation key |
568
- | `showEmergencyContact` | boolean | `true` | Show emergency contact block |
569
- | `emergencyContactRowClass` | string | `'row mt-3 mb-4'` | Emergency contact row CSS class |
570
-
571
- ### Output Events
572
- - `isLoadingChanged: EventEmitter<boolean>` - Emitted when loading state changes.
573
- - `errorOccurred: EventEmitter<string>` - Emitted when API request fails.
574
-
575
- ## My Profile Personal Info Address Widget
576
-
577
- ### Usage
578
- ```html
579
- <hr-my-profile-address-widget
580
- [baseUrl]="baseUrl"
581
- (isLoadingChanged)="onAddressLoadingChanged($event)">
582
- </hr-my-profile-address-widget>
583
- ```
584
-
585
- ### Input Properties
586
- | Input | Type | Default Value | Description |
587
- |-------|------|---------------|-------------|
588
- | `baseUrl` | string | `''` | Base URL for API calls (required) |
589
- | `headerIconClass` | string | `'primary-icon-xl'` | Header icon CSS class |
590
- | `headerTextClass` | string | `'fs-16 mt-2 text-secondary'` | Header text CSS class |
591
- | `headerDividerClass` | string | `'flex-grow-1 ms-2'` | Header divider CSS class |
592
- | `rowClass` | string | `'row mt-4'` | Row container CSS class |
593
- | `columnClass` | string | `'col-md-4 col-6'` | Column CSS class |
594
- | `responsiveTopSpacingColumnClass` | string | `'col-md-4 col-6 mt-md-0 mt-4'` | Responsive top spacing column CSS class |
595
- | `topSpacingBottomSpacingColumnClass` | string | `'col-md-4 col-6 mt-4 mb-5'` | Top spacing + bottom spacing CSS class |
596
- | `labelClass` | string | `'field-secondary-label-sm'` | Label CSS class |
597
- | `valueClass` | string | `'fs-14 fw-medium'` | Value CSS class |
598
- | `addressIcon` | IconDefinition | `faHouse` | Header icon |
599
- | `sectionTitle` | string | `'address'` | Section title translation key |
600
- | `emptyStateContainerClass` | string | `'d-flex flex-column justify-content-center align-items-center my-5'` | Empty/loading container CSS class |
601
- | `emptyStateTextClass` | string | `'field-secondary-label-md'` | Empty/loading text CSS class |
602
-
603
- ### Output Events
604
- - `isLoadingChanged: EventEmitter<boolean>` - Emitted when loading state changes.
605
- - `errorOccurred: EventEmitter<string>` - Emitted when API request fails.
606
-
607
- ## My Profile Personal Info Languages Widget
608
-
609
- ### Usage
610
- ```html
611
- <hr-my-profile-languages-widget
612
- [baseUrl]="baseUrl"
613
- (hasDataChange)="onLanguagesDataChange($event)"
614
- (isLoadingChanged)="onLanguagesLoadingChanged($event)">
615
- </hr-my-profile-languages-widget>
616
- ```
617
-
618
- ### Input Properties
619
- | Input | Type | Default Value | Description |
620
- |-------|------|---------------|-------------|
621
- | `baseUrl` | string | `''` | Base URL for API calls |
622
- | `headerIconClass` | string | `'primary-icon-xl'` | Header icon CSS class |
623
- | `headerTextClass` | string | `'fs-16 mt-2 text-secondary'` | Header text CSS class |
624
- | `headerDividerClass` | string | `'flex-grow-1 ms-2'` | Header divider CSS class |
625
- | `contentTextClass` | string | `'text-dark-gray fs-14 fw-medium mt-4'` | Content text CSS class |
626
- | `emptyStateContainerClass` | string | `'d-flex flex-column justify-content-center align-items-center my-5'` | Empty/loading container CSS class |
627
- | `emptyStateTextClass` | string | `'field-secondary-label-md'` | Empty/loading text CSS class |
628
- | `languagesIcon` | IconDefinition | `faLanguage` | Header icon |
629
- | `sectionTitle` | string | `'languages'` | Section title translation key |
630
-
631
- ### Output Events
632
- - `hasDataChange: EventEmitter<boolean>` - Emitted when language list has data or not.
633
- - `isLoadingChanged: EventEmitter<boolean>` - Emitted when loading state changes.
634
- - `errorOccurred: EventEmitter<string>` - Emitted when API request fails.
635
-
636
- ## My Profile Personal Info Other Nationalities Widget
637
-
638
- ### Usage
639
- ```html
640
- <hr-my-profile-other-nationalities-widget
641
- [baseUrl]="baseUrl"
642
- (hasDataChange)="onOtherNationalitiesDataChange($event)"
643
- (isLoadingChanged)="onOtherNationalitiesLoadingChanged($event)">
644
- </hr-my-profile-other-nationalities-widget>
645
- ```
646
-
647
- ### Input Properties
648
- | Input | Type | Default Value | Description |
649
- |-------|------|---------------|-------------|
650
- | `baseUrl` | string | `''` | Base URL for API calls (required) |
651
- | `headerIconClass` | string | `'primary-icon-xl'` | Header icon CSS class |
652
- | `headerTextClass` | string | `'fs-16 mt-2 text-secondary'` | Header text CSS class |
653
- | `headerDividerClass` | string | `'flex-grow-1 ms-2'` | Header divider CSS class |
654
- | `contentTextClass` | string | `'text-dark-gray fs-14 fw-medium mt-4'` | Content text CSS class |
655
- | `emptyStateContainerClass` | string | `'d-flex flex-column justify-content-center align-items-center my-5'` | Empty/loading container CSS class |
656
- | `emptyStateTextClass` | string | `'field-secondary-label-md'` | Empty/loading text CSS class |
657
- | `otherNationalitiesIcon` | IconDefinition | `faEarthAfrica` | Header icon |
658
- | `sectionTitle` | string | `'otherNationalities'` | Section title translation key |
659
- | `emptyStateTextKey` | string | `'ThereIsNoOtherNationalitiesYet'` | Empty state translation key |
660
-
661
- ### Output Events
662
- - `hasDataChange: EventEmitter<boolean>` - Emitted when other nationalities list has data or not.
663
- - `isLoadingChanged: EventEmitter<boolean>` - Emitted when loading state changes.
664
- - `errorOccurred: EventEmitter<string>` - Emitted when API request fails.
665
-
666
- ## My Profile Bank Information Widget
667
-
668
- ### Usage
669
- ```html
670
- <hr-my-profile-bank-info-widget
671
- [baseUrl]="baseUrl"
672
- [currencyCode]="currencyCode"
673
- [currencyDecimals]="currencyDecimals"
674
- (isLoadingChanged)="onBankLoadingChanged($event)">
675
- </hr-my-profile-bank-info-widget>
676
- ```
677
-
678
- ### Input Properties
679
- | Input | Type | Default Value | Description |
680
- |-------|------|---------------|-------------|
681
- | `baseUrl` | string | `''` | Base URL for API calls (required) |
682
- | `currencyCode` | string | `''` | Currency code shown with transfer amount |
683
- | `currencyDecimals` | number | `2` | Decimal precision for transfer amount formatting |
684
- | `headerIconClass` | string | `'primary-icon-xl'` | Header icon CSS class |
685
- | `headerTextClass` | string | `'mt-2 field-secondary-label-lg'` | Header text CSS class |
686
- | `headerDividerClass` | string | `'flex-grow-1 ms-2'` | Header divider CSS class |
687
- | `cardClass` | string | `'mt-4 card-shadow position-relative'` | Bank card container CSS class |
688
- | `mainBadgeClass` | string | `'position-absolute text-center top-0 mt-3 start-0 bg-primary status-badge'` | Main bank badge CSS class |
689
- | `mainBadgeTextClass` | string | `'mx-1 fs-12 text-white'` | Main bank badge text CSS class |
690
- | `triangleClass` | string | `'position-absolute start-0 top-0'` | Main bank badge triangle CSS class |
691
- | `rowClass` | string | `'row px-4 pb-3'` | Bank details row CSS class |
692
- | `rowMainPtClass` | string | `'pt-5'` | Top padding class for main bank row |
693
- | `rowNormalPtClass` | string | `'pt-3'` | Top padding class for normal bank row |
694
- | `columnClass` | string | `'col-md-4 col-6'` | Column CSS class |
695
- | `responsiveTopSpacingColClass` | string | `'col-md-4 col-6 mt-md-0 mt-4'` | Responsive top spacing column CSS class |
696
- | `topSpacingColClass` | string | `'col-md-4 col-6 mt-4'` | Top spacing column CSS class |
697
- | `labelClass` | string | `'field-secondary-label-sm'` | Label CSS class |
698
- | `valueClass` | string | `'table-cell-md'` | Value CSS class |
699
- | `emptyStateContainerClass` | string | `'d-flex flex-column justify-content-center align-items-center my-5'` | Empty/loading container CSS class |
700
- | `emptyStateTextClass` | string | `'field-secondary-label-md'` | Empty/loading text CSS class |
701
- | `bankInformationIcon` | IconDefinition | `faMoneyCheckDollarPen` | Header icon |
702
- | `sectionHeaderVisibility` | boolean | `true` | Show or hide the section header |
703
- | `sectionTitle` | string | `'BankInformation'` | Section title translation key |
704
- | `language` | string | `'en'` | Language used for RTL behavior (`'ar'` enables RTL) |
705
-
706
- ### Output Events
707
- - `isLoadingChanged: EventEmitter<boolean>` - Emitted when loading state changes.
708
- - `errorOccurred: EventEmitter<string>` - Emitted when API request fails.
709
-
710
- ## My Profile Job Information Widgets
711
-
712
- ## My Profile Job Info Main Widget
713
-
714
- ### Usage
715
- ```html
716
- <hr-my-profile-job-info-widget
717
- [baseUrl]="baseUrl"
718
- (isLoadingChanged)="onJobMainLoadingChanged($event)">
719
- </hr-my-profile-job-info-widget>
720
- ```
721
-
722
- ### Input Properties
723
- | Input | Type | Default Value | Description |
724
- |-------|------|---------------|-------------|
725
- | `baseUrl` | string | `''` | Base URL for API calls (required) |
726
- | `headerIconClass` | string | `'primary-icon-xl'` | Header icon CSS class |
727
- | `headerTextClass` | string | `'mt-2 field-secondary-label-lg'` | Header text CSS class |
728
- | `headerDividerClass` | string | `'flex-grow-1 ms-2'` | Header divider CSS class |
729
- | `rowClass` | string | `'row mt-4'` | Row container CSS class |
730
- | `columnClass` | string | `'col-md-4 col-6'` | Column CSS class |
731
- | `responsiveTopSpacingColumnClass` | string | `'col-md-4 col-6 mt-md-0 mt-4'` | Responsive top spacing column CSS class |
732
- | `topSpacingBottomMdSpacingColumnClass` | string | `'col-md-4 col-6 mt-4 mb-md-5'` | Top spacing + medium bottom spacing CSS class |
733
- | `topSpacingBottomSpacingColumnClass` | string | `'col-md-4 col-6 mt-4 mb-5'` | Top spacing + bottom spacing CSS class |
734
- | `labelClass` | string | `'field-secondary-label-sm'` | Label CSS class |
735
- | `valueClass` | string | `'fs-14 fw-medium'` | Value CSS class |
736
- | `emptyStateContainerClass` | string | `'d-flex flex-column justify-content-center align-items-center my-5'` | Empty/loading container CSS class |
737
- | `emptyStateTextClass` | string | `'field-secondary-label-md'` | Empty/loading text CSS class |
738
- | `sectionTitle` | string | `'Main'` | Section title translation key |
739
-
740
- ### Output Events
741
- - `isLoadingChanged: EventEmitter<boolean>` - Emitted when loading state changes.
742
- - `errorOccurred: EventEmitter<string>` - Emitted when API request fails.
743
-
744
- ## My Profile Job Info Contract Widget
745
-
746
- ### Usage
747
- ```html
748
- <hr-my-profile-contract-widget
749
- [baseUrl]="baseUrl"
750
- (isLoadingChanged)="onJobContractLoadingChanged($event)">
751
- </hr-my-profile-contract-widget>
752
- ```
753
-
754
- ### Input Properties
755
- | Input | Type | Default Value | Description |
756
- |-------|------|---------------|-------------|
757
- | `baseUrl` | string | `''` | Base URL for API calls (required) |
758
- | `headerIconClass` | string | `'primary-icon-xl'` | Header icon CSS class |
759
- | `headerTextClass` | string | `'mt-2 field-secondary-label-lg'` | Header text CSS class |
760
- | `headerDividerClass` | string | `'flex-grow-1 ms-2'` | Header divider CSS class |
761
- | `rowClass` | string | `'row mt-4'` | Row container CSS class |
762
- | `columnClass` | string | `'col-md-4 col-6'` | Column CSS class |
763
- | `responsiveTopSpacingColumnClass` | string | `'col-md-4 col-6 mt-md-0 mt-4'` | Responsive top spacing column CSS class |
764
- | `topSpacingBottomMdSpacingColumnClass` | string | `'col-md-4 col-6 mt-4 mb-md-5'` | Top spacing + medium bottom spacing CSS class |
765
- | `topSpacingBottomSpacingColumnClass` | string | `'col-md-4 col-6 mt-4 mb-5'` | Top spacing + bottom spacing CSS class |
766
- | `labelClass` | string | `'field-secondary-label-sm'` | Label CSS class |
767
- | `valueClass` | string | `'fs-14 fw-medium text-ellipsis-one-line'` | Value CSS class |
768
- | `emptyStateContainerClass` | string | `'d-flex flex-column justify-content-center align-items-center my-5'` | Empty/loading container CSS class |
769
- | `emptyStateTextClass` | string | `'field-secondary-label-md'` | Empty/loading text CSS class |
770
- | `sectionTitle` | string | `'Contract'` | Section title translation key |
771
-
772
- ### Output Events
773
- - `isLoadingChanged: EventEmitter<boolean>` - Emitted when loading state changes.
774
- - `errorOccurred: EventEmitter<string>` - Emitted when API request fails.
775
-
776
- ## My Profile Job Info Salary Widget
777
-
778
- ### Usage
779
- ```html
780
- <hr-my-profile-salary-widget
781
- [baseUrl]="baseUrl"
782
- [currencyCode]="currencyCode"
783
- [currencyDecimals]="currencyDecimals"
784
- (isLoadingChanged)="onJobSalaryLoadingChanged($event)">
785
- </hr-my-profile-salary-widget>
786
- ```
787
-
788
- ### Input Properties
789
- | Input | Type | Default Value | Description |
790
- |-------|------|---------------|-------------|
791
- | `baseUrl` | string | `''` | Base URL for API calls (required) |
792
- | `currencyCode` | string | `''` | Currency code shown with salary amounts |
793
- | `currencyDecimals` | number | `2` | Decimal precision for salary amount formatting |
794
- | `headerIconClass` | string | `'primary-icon-xl'` | Header icon CSS class |
795
- | `headerTextClass` | string | `'mt-2 field-secondary-label-lg'` | Header text CSS class |
796
- | `headerDividerClass` | string | `'flex-grow-1 ms-2'` | Header divider CSS class |
797
- | `rowClass` | string | `'row mt-4'` | Row container CSS class |
798
- | `columnClass` | string | `'col-md-4 col-6 mt-4'` | Column CSS class |
799
- | `grossSalaryColumnClass` | string | `'col-md-4 col-6 my-4'` | Gross salary column CSS class |
800
- | `labelClass` | string | `'field-secondary-label-sm'` | Label CSS class |
801
- | `valueClass` | string | `'fs-14 fw-medium'` | Value CSS class |
802
- | `currencyClass` | string | `'fs-10 text-secondary fw-light'` | Currency text CSS class |
803
- | `emptyStateContainerClass` | string | `'d-flex flex-column justify-content-center align-items-center my-5'` | Empty/loading container CSS class |
804
- | `emptyStateTextClass` | string | `'field-secondary-label-md'` | Empty/loading text CSS class |
805
- | `sectionTitle` | string | `'Salary'` | Section title translation key |
806
-
807
- ### Output Events
808
- - `isLoadingChanged: EventEmitter<boolean>` - Emitted when loading state changes.
809
- - `errorOccurred: EventEmitter<string>` - Emitted when API request fails.
810
-
811
- ## My Profile Job Info Service Charge Widget
812
-
813
- ### Usage
814
- ```html
815
- <hr-my-profile-charge-widget
816
- [baseUrl]="baseUrl"
817
- [currencyCode]="currencyCode"
818
- (isLoadingChanged)="onJobServiceChargeLoadingChanged($event)">
819
- </hr-my-profile-charge-widget>
820
- ```
821
-
822
- ### Input Properties
823
- | Input | Type | Default Value | Description |
824
- |-------|------|---------------|-------------|
825
- | `baseUrl` | string | `''` | Base URL for API calls (required) |
826
- | `currencyCode` | string | `''` | Currency code shown when entitlement mode is fixed amount |
827
- | `headerIconClass` | string | `'primary-icon-xl'` | Header icon CSS class |
828
- | `headerTextClass` | string | `'mt-2 field-secondary-label-lg'` | Header text CSS class |
829
- | `headerDividerClass` | string | `'flex-grow-1 ms-2'` | Header divider CSS class |
830
- | `rowClass` | string | `'row mt-4 mb-5'` | Row container CSS class |
831
- | `columnClass` | string | `'col-md-4 col-6'` | Column CSS class |
832
- | `labelClass` | string | `'field-secondary-label-sm'` | Label CSS class |
833
- | `valueClass` | string | `'fs-14 fw-medium'` | Value CSS class |
834
- | `emptyStateContainerClass` | string | `'d-flex flex-column justify-content-center align-items-center my-5'` | Empty/loading container CSS class |
835
- | `emptyStateTextClass` | string | `'field-secondary-label-md'` | Empty/loading text CSS class |
836
- | `sectionTitle` | string | `'ServiceCharge'` | Section title translation key |
837
-
838
- ### Output Events
839
- - `isLoadingChanged: EventEmitter<boolean>` - Emitted when loading state changes.
840
- - `errorOccurred: EventEmitter<string>` - Emitted when API request fails.
841
-
842
- ## My Profile Employee Dependents Widget
843
-
844
- ### Usage
845
- ```html
846
- <hr-my-profile-dependents-widget
847
- [baseUrl]="baseUrl"
848
- (isLoadingChanged)="onDependentsLoadingChanged($event)">
849
- </hr-my-profile-dependents-widget>
850
- ```
851
-
852
- 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.
853
-
854
- ### Input Properties
855
- | Input | Type | Default Value | Description |
856
- |-------|------|---------------|-------------|
857
- | `baseUrl` | string | `''` | Base URL for API calls |
858
- | `sectionTitle` | string | `'Dependents'` | Section title translation key |
859
- | `icon` | IconDefinition | `faUsersLine` | Header icon |
860
- | `headerIconClass` | string | `'primary-icon-xl'` | Header icon CSS class |
861
- | `headerTextClass` | string | `'fs-16 mt-2 text-secondary'` | Header text CSS class |
862
- | `headerDividerClass` | string | `'flex-grow-1 ms-2'` | Header divider CSS class |
863
- | `emptyStateContainerClass` | string | `'d-flex flex-column justify-content-center align-items-center my-5'` | Empty/loading container CSS class |
864
- | `emptyStateTextClass` | string | `'field-secondary-label-md'` | Empty/loading text CSS class |
865
-
866
- ### Output Events
867
- - `isLoadingChanged: EventEmitter<boolean>` - Emitted when loading state changes.
868
-
869
- ## My Profile Entitlement Widgets
870
-
871
- The package includes entitlement widgets for displaying employee benefits and entitlements in the profile page.
872
-
873
- ## My Profile Entitlements Vacations Widget
874
-
875
- ### Usage
876
- ```html
877
- <hr-my-profile-vacations-widget
878
- [baseUrl]="baseUrl"
879
- (isLoadingChanged)="onVacationsLoadingChanged($event)">
880
- </hr-my-profile-vacations-widget>
881
- ```
882
-
883
- This component displays a list of vacation entitlements (vacation type name and entitlement days) in a two-column grid layout.
884
-
885
- ### Input Properties
886
- | Input | Type | Default Value | Description |
887
- |-------|------|---------------|-------------|
888
- | `baseUrl` | string | `''` | Base URL for API calls (required) |
889
- | `sectionTitle` | string | `'Vacations'` | Section title translation key |
890
- | `vacationsIcon` | IconDefinition | `faIslandTropical` | Header icon |
891
- | `headerIconClass` | string | `'primary-icon-xl'` | Header icon CSS class |
892
- | `headerTextClass` | string | `'mt-2 field-secondary-label-lg'` | Header text CSS class |
893
- | `headerDividerClass` | string | `'flex-grow-1 ms-2'` | Header divider CSS class |
894
- | `rowClass` | string | `'row mt-4'` | Row container CSS class |
895
- | `labelClass` | string | `'field-secondary-label-sm'` | Label CSS class |
896
- | `valueClass` | string | `'fs-14 fw-meduim mt-2'` | Value CSS class |
897
- | `labelColumnClass` | string | `'col-6'` | Label column CSS class |
898
- | `valueColumnClass` | string | `'col-6'` | Value column CSS class |
899
- | `emptyStateContainerClass` | string | `'d-flex flex-column justify-content-center align-items-center my-5'` | Empty/loading container CSS class |
900
- | `emptyStateTextClass` | string | `'field-secondary-label-md'` | Empty/loading text CSS class |
901
-
902
- ### Output Events
903
- - `isLoadingChanged: EventEmitter<boolean>` - Emitted when loading state changes.
904
- - `errorOccurred: EventEmitter<string>` - Emitted when API request fails.
905
-
906
- ## My Profile Entitlements Indemnity Widget
907
-
908
- ### Usage
909
- ```html
910
- <hr-my-profile-indemnity-widget
911
- [baseUrl]="baseUrl"
912
- [currencyCode]="currencyCode"
913
- (isLoadingChanged)="onIndemnityLoadingChanged($event)">
914
- </hr-my-profile-indemnity-widget>
915
- ```
916
-
917
- This component shows indemnity entitlement details including eligibility status, service years, and start date. Uses `hr-info-field` sub-components for layout.
918
-
919
- ### Input Properties
920
- | Input | Type | Default Value | Description |
921
- |-------|------|---------------|-------------|
922
- | `baseUrl` | string | `''` | Base URL for API calls (required) |
923
- | `currencyCode` | string | `''` | Currency code for amount display |
924
- | `currencyDecimals` | number | `0` | Decimal precision for amount formatting |
925
- | `sectionTitle` | string | `'indemnity'` | Section title translation key |
926
- | `indemnityIcon` | IconDefinition | `faFileSignature` | Header icon |
927
- | `headerIconClass` | string | `'primary-icon-xl'` | Header icon CSS class |
928
- | `headerTextClass` | string | `'mt-2 field-secondary-label-lg'` | Header text CSS class |
929
- | `headerDividerClass` | string | `'flex-grow-1 ms-2'` | Header divider CSS class |
930
- | `rowClass` | string | `'row mt-4'` | Row container CSS class |
931
- | `columnClass` | string | `'col-6'` | Field column CSS class |
932
- | `topSpacingColumnClass` | string | `'col-6 mt-4'` | Field column with top spacing CSS class |
933
- | `labelClass` | string | `'field-secondary-label-sm'` | Label CSS class |
934
- | `valueClass` | string | `'fs-14 fw-meduim'` | Value CSS class |
935
- | `dateFormat` | string | `'dd/MM/yyyy'` | Date format for start date |
936
- | `emptyStateContainerClass` | string | `'d-flex flex-column justify-content-center align-items-center my-5'` | Empty/loading container CSS class |
937
- | `emptyStateTextClass` | string | `'field-secondary-label-md'` | Empty/loading text CSS class |
938
-
939
- ### Output Events
940
- - `isLoadingChanged: EventEmitter<boolean>` - Emitted when loading state changes.
941
- - `errorOccurred: EventEmitter<string>` - Emitted when API request fails.
942
- - `hasDataChanged: EventEmitter<boolean>` - Emitted when data availability changes after loading.
943
-
944
- ## My Profile Entitlements Ticket Widget
945
-
946
- ### Usage
947
- ```html
948
- <hr-my-profile-ticket-widget
949
- [baseUrl]="baseUrl"
950
- (isLoadingChanged)="onTicketLoadingChanged($event)">
951
- </hr-my-profile-ticket-widget>
952
- ```
953
-
954
- 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.
955
-
956
- ### Input Properties
957
- | Input | Type | Default Value | Description |
958
- |-------|------|---------------|-------------|
959
- | `baseUrl` | string | `''` | Base URL for API calls (required) |
960
- | `sectionTitle` | string | `'tickets'` | Section title translation key |
961
- | `ticketsIcon` | IconDefinition | `faTicketsAirline` | Header icon |
962
- | `headerIconClass` | string | `'primary-icon-xl'` | Header icon CSS class |
963
- | `headerTextClass` | string | `'mt-2 field-secondary-label-lg'` | Header text CSS class |
964
- | `headerDividerClass` | string | `'flex-grow-1 ms-2'` | Header divider CSS class |
965
- | `columnClass` | string | `'col-lg-4 col-6 mt-4'` | Card column CSS class |
966
- | `cardHeight` | number | `135` | Card height in pixels |
967
- | `cardClass` | string | `'p-3 card-shadow border border-1 h-100 rounded rounded-2'` | Card CSS class |
968
- | `nameClass` | string | `'text-dark fs-16'` | Name text CSS class |
969
- | `subtitleClass` | string | `'field-secondary-label-sm mb-3'` | Subtitle CSS class |
970
- | `labelClass` | string | `'fs-12 text-secondary'` | Label CSS class |
971
- | `valueClass` | string | `'fs-12 text-dark-gray mx-1'` | Value CSS class |
972
- | `emptyStateContainerClass` | string | `'d-flex flex-column justify-content-center align-items-center my-5'` | Empty/loading container CSS class |
973
- | `emptyStateTextClass` | string | `'field-secondary-label-md'` | Empty/loading text CSS class |
974
-
975
- ### Output Events
976
- - `isLoadingChanged: EventEmitter<boolean>` - Emitted when loading state changes.
977
- - `errorOccurred: EventEmitter<string>` - Emitted when API request fails.
978
-
979
- ## My Profile Entitlements Medical Insurance Widget
980
-
981
- ### Usage
982
- ```html
983
- <hr-my-profile-medical-insurance-widget
984
- [baseUrl]="baseUrl"
985
- (isLoadingChanged)="onMedicalInsuranceLoadingChanged($event)">
986
- </hr-my-profile-medical-insurance-widget>
987
- ```
988
-
989
- 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.
990
-
991
- ### Input Properties
992
- | Input | Type | Default Value | Description |
993
- |-------|------|---------------|-------------|
994
- | `baseUrl` | string | `''` | Base URL for API calls (required) |
995
- | `sectionTitle` | string | `'MedicalInsurance'` | Section title translation key |
996
- | `medicalInsuranceIcon` | IconDefinition | `faNotesMedical` | Header icon |
997
- | `headerIconClass` | string | `'primary-icon-xl'` | Header icon CSS class |
998
- | `headerTextClass` | string | `'mt-2 field-secondary-label-lg'` | Header text CSS class |
999
- | `headerDividerClass` | string | `'flex-grow-1 ms-2'` | Header divider CSS class |
1000
- | `labelClass` | string | `'field-secondary-label-sm'` | Label CSS class |
1001
- | `valueClass` | string | `'text-dark-gray mx-1'` | Value CSS class |
1002
- | `columnClass` | string | `'col-lg-4 col-6 mt-4'` | Card column CSS class |
1003
- | `cardHeight` | number | `185` | Card height in pixels |
1004
- | `cardClass` | string | `'p-3 card-shadow h-100 border border-1 rounded rounded-2'` | Card CSS class |
1005
- | `nameClass` | string | `'text-dark fs-16 mb-2'` | Name text CSS class |
1006
- | `dateFormat` | string | `'dd/MM/yyyy'` | Date format for coverage date |
1007
- | `emptyStateContainerClass` | string | `'d-flex flex-column justify-content-center align-items-center my-5'` | Empty/loading container CSS class |
1008
- | `emptyStateTextClass` | string | `'field-secondary-label-md'` | Empty/loading text CSS class |
1009
-
1010
- ### Output Events
1011
- - `isLoadingChanged: EventEmitter<boolean>` - Emitted when loading state changes.
1012
- - `errorOccurred: EventEmitter<string>` - Emitted when API request fails.
1013
-
1014
- ## My Profile Entitlements Others Widget
1015
-
1016
- ### Usage
1017
- ```html
1018
- <hr-my-profile-entitlements-others-widget
1019
- [baseUrl]="baseUrl"
1020
- (isLoadingChanged)="onOthersLoadingChanged($event)">
1021
- </hr-my-profile-entitlements-others-widget>
1022
- ```
1023
-
1024
- This component displays two fields: overtime eligibility (Eligible/NotEligible) and social security membership (Member/NotMember). Fetches both values via `forkJoin`.
1025
-
1026
- ### Input Properties
1027
- | Input | Type | Default Value | Description |
1028
- |-------|------|---------------|-------------|
1029
- | `baseUrl` | string | `''` | Base URL for API calls (required) |
1030
- | `sectionTitle` | string | `'Others'` | Section title translation key |
1031
- | `othersIcon` | IconDefinition | `faGrid2Plus` | Header icon |
1032
- | `headerIconClass` | string | `'primary-icon-xl'` | Header icon CSS class |
1033
- | `headerTextClass` | string | `'mt-2 field-secondary-label-lg'` | Header text CSS class |
1034
- | `headerDividerClass` | string | `'flex-grow-1 ms-2'` | Header divider CSS class |
1035
- | `rowClass` | string | `'row mt-4 mb-5'` | Row container CSS class |
1036
- | `columnClass` | string | `'col-md-4 col-6'` | Field column CSS class |
1037
- | `labelClass` | string | `'field-secondary-label-sm'` | Label CSS class |
1038
- | `valueClass` | string | `'fs-14 fw-meduim'` | Value CSS class |
1039
-
1040
- ### Output Events
1041
- - `isLoadingChanged: EventEmitter<boolean>` - Emitted when loading state changes.
1042
- - `errorOccurred: EventEmitter<string>` - Emitted when API request fails.
1043
-
1044
- ## My Profile Employee Documents Widget
1045
-
1046
- ### Usage
1047
- ```html
1048
- <hr-my-profile-personal-documents-widget
1049
- [baseUrl]="baseUrl"
1050
- [employeeName]="employeeName"
1051
- (isLoadingChanged)="onLoadingChanged($event)"
1052
- (attachmentViewed)="onAttachmentViewed($event)"
1053
- (attachmentDownloaded)="onAttachmentDownloaded($event)">
1054
- </hr-my-profile-personal-documents-widget>
1055
- ```
1056
-
1057
- 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.
1058
-
1059
- ### Input Properties
1060
- | Input | Type | Default Value | Description |
1061
- |-------|------|---------------|-------------|
1062
- | `baseUrl` | string | `''` | Base URL for API calls (required) |
1063
- | `employeeName` | string | `''` | Employee name displayed as card title |
1064
- | `sectionTitle` | string | `'EmployeeDocuments'` | Section title translation key |
1065
- | `icon` | IconDefinition | `faFileLines` | Header icon |
1066
- | `viewIcon` | IconDefinition | `faEye` | Attachment view icon |
1067
- | `downloadIcon` | IconDefinition | `faFolderArrowDown` | Attachment download icon |
1068
- | `headerIconClass` | string | `'primary-icon-xl'` | Header icon CSS class |
1069
- | `headerTextClass` | string | `'fs-16 mt-2 text-secondary'` | Header text CSS class |
1070
- | `headerDividerClass` | string | `'flex-grow-1 ms-2'` | Header divider CSS class |
1071
- | `valueClass` | string | `'text-dark-gray fs-14'` | Value text CSS class |
1072
- | `viewIconClass` | string | `'fs-15 text-dark cursor-pointer'` | View icon CSS class |
1073
- | `downloadIconClass` | string | `'fs-15 text-dark cursor-pointer'` | Download icon CSS class |
1074
- | `emptyStateContainerClass` | string | `'d-flex flex-column justify-content-center align-items-center my-5'` | Empty/loading container CSS class |
1075
- | `emptyStateTextClass` | string | `'field-secondary-label-md'` | Empty/loading text CSS class |
1076
- | `cardClass` | string | `'mt-4 card-shadow position-relative p-4'` | Card container CSS class (desktop only) |
1077
- | `topSpacingColClass` | string | `'col-md-3 col-6 mt-4'` | Top spacing column CSS class |
1078
- | `titleContainerClass` | string | `'mb-3'` | Title container CSS class |
1079
- | `titleClass` | string | `'text-dark fs-16 mb-0'` | Title text CSS class |
1080
- | `labelClass` | string | `'field-secondary-label-sm mb-1'` | Label CSS class |
1081
- | `actionsColumnClass` | string | `'col-2 d-flex flex-column mt-3'` | Actions column CSS class |
1082
- | `rowClass` | string | `'row'` | Row CSS class |
1083
- | `dataColClass` | string | `'col-10'` | Data column CSS class |
1084
- | `dataColSpacingClass` | string | `'mt-2'` | Data column spacing CSS class |
1085
- | `dataRowClass` | string | `'row align-items-center py-1 gx-0'` | Data row CSS class |
1086
- | `typeColClass` | string | `'col-3'` | Type column CSS class |
1087
- | `numberColClass` | string | `'col-3'` | Number column CSS class |
1088
- | `issueDateColClass` | string | `'col-3'` | Issue date column CSS class |
1089
- | `expiryDateColClass` | string | `'col-3'` | Expiry date column CSS class |
1090
- | `actionsColClass` | string | `'col-2 d-flex align-items-center'` | Actions column CSS class |
1091
- | `actionsWrapperClass` | string | `'d-flex align-items-center gap-2'` | Actions wrapper CSS class |
1092
- | `downloadContainerClass` | string | `'bg-light-gray rounded-3 d-flex align-items-center justify-content-center px-1 cursor-pointer'` | Download container CSS class |
1093
- | `tabletContainerClass` | string | `'mt-3'` | Tablet card container CSS class |
1094
- | `tabletCardClass` | string | `'row px-4 py-3 card-shadow'` | Tablet card CSS class |
1095
- | `tabletCardHeight` | string | `'175px'` | Tablet card fixed height |
1096
- | `tabletColWithAttachmentClass` | string | `'col-5'` | Tablet column class when attachments exist |
1097
- | `tabletColWithoutAttachmentClass` | string | `'col-6'` | Tablet column class when no attachments |
1098
- | `tabletActionsColClass` | string | `'col-1 d-flex align-items-center'` | Tablet actions column CSS class |
1099
- | `tabletBottomRowSpacingClass` | string | `'mt-4'` | Tablet bottom row spacing CSS class |
1100
- | `tabletDownloadCountClass` | string | `'text-dark fs-12 fw-bold ps-2'` | Tablet download count CSS class |
1101
- | `isMobile` | boolean | `false` | Mobile responsive mode |
1102
- | `isTablet` | boolean | `false` | Tablet responsive mode |
1103
-
1104
- ### Output Events
1105
- - `isLoadingChanged: EventEmitter<boolean>` - Emitted when loading state changes.
1106
- - `attachmentViewed: EventEmitter<any>` - Emitted when attachment view icon is clicked.
1107
- - `attachmentDownloaded: EventEmitter<any>` - Emitted when attachment download icon is clicked.
1108
- - `errorOccurred: EventEmitter<string>` - Emitted when API request fails.
1109
-
1110
- ## My Profile Dependents Documents Widget
1111
-
1112
- ### Usage
1113
- ```html
1114
- <hr-my-profile-dependents-documents-widget
1115
- [baseUrl]="baseUrl"
1116
- (isLoadingChanged)="onLoadingChanged($event)"
1117
- (attachmentViewed)="onAttachmentViewed($event)"
1118
- (attachmentDownloaded)="onAttachmentDownloaded($event)">
1119
- </hr-my-profile-dependents-documents-widget>
1120
- ```
1121
-
1122
- 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.
1123
-
1124
- ### Input Properties
1125
- | Input | Type | Default Value | Description |
1126
- |-------|------|---------------|-------------|
1127
- | `baseUrl` | string | `''` | Base URL for API calls (required) |
1128
- | `sectionTitle` | string | `'DependentsDocuments'` | Section title translation key |
1129
- | `icon` | IconDefinition | `faFileLines` | Header icon |
1130
- | `viewIcon` | IconDefinition | `faEye` | Attachment view icon |
1131
- | `downloadIcon` | IconDefinition | `faFolderArrowDown` | Attachment download icon |
1132
- | `headerIconClass` | string | `'primary-icon-xl'` | Header icon CSS class |
1133
- | `headerTextClass` | string | `'fs-16 mt-2 text-secondary'` | Header text CSS class |
1134
- | `headerDividerClass` | string | `'flex-grow-1 ms-2'` | Header divider CSS class |
1135
- | `valueClass` | string | `'text-dark-gray fs-14'` | Value text CSS class |
1136
- | `viewIconClass` | string | `'fs-15 text-dark cursor-pointer'` | View icon CSS class |
1137
- | `downloadIconClass` | string | `'fs-15 text-dark cursor-pointer'` | Download icon CSS class |
1138
- | `emptyStateContainerClass` | string | `'d-flex flex-column justify-content-center align-items-center my-5'` | Empty/loading container CSS class |
1139
- | `emptyStateTextClass` | string | `'field-secondary-label-md'` | Empty/loading text CSS class |
1140
- | `cardClass` | string | `'mt-4 card-shadow position-relative p-4'` | Card container CSS class (desktop only) |
1141
- | `topSpacingColClass` | string | `'col-md-3 col-6 mt-4'` | Top spacing column CSS class |
1142
- | `titleContainerClass` | string | `'mb-3'` | Title container CSS class |
1143
- | `titleClass` | string | `'text-dark fs-16 mb-0'` | Title text CSS class |
1144
- | `labelClass` | string | `'field-secondary-label-sm mb-1'` | Label CSS class |
1145
- | `actionsColumnClass` | string | `'col-2 d-flex flex-column mt-3'` | Actions column CSS class |
1146
- | `rowClass` | string | `'row'` | Row CSS class |
1147
- | `dataColClass` | string | `'col-10'` | Data column CSS class |
1148
- | `dataColSpacingClass` | string | `'mt-2'` | Data column spacing CSS class |
1149
- | `dataRowClass` | string | `'row align-items-center py-1 gx-0'` | Data row CSS class |
1150
- | `typeColClass` | string | `'col-3'` | Type column CSS class |
1151
- | `numberColClass` | string | `'col-3'` | Number column CSS class |
1152
- | `issueDateColClass` | string | `'col-3'` | Issue date column CSS class |
1153
- | `expiryDateColClass` | string | `'col-3'` | Expiry date column CSS class |
1154
- | `actionsColClass` | string | `'col-2 d-flex align-items-center'` | Actions column CSS class |
1155
- | `actionsWrapperClass` | string | `'d-flex align-items-center gap-2'` | Actions wrapper CSS class |
1156
- | `downloadContainerClass` | string | `'bg-light-gray rounded-3 d-flex align-items-center justify-content-center px-1 cursor-pointer'` | Download container CSS class |
1157
- | `tabletContainerClass` | string | `'mt-3'` | Tablet card container CSS class |
1158
- | `tabletCardClass` | string | `'row px-4 py-3 card-shadow'` | Tablet card CSS class |
1159
- | `tabletCardHeight` | string | `'175px'` | Tablet card fixed height |
1160
- | `tabletColWithAttachmentClass` | string | `'col-5'` | Tablet column class when attachments exist |
1161
- | `tabletColWithoutAttachmentClass` | string | `'col-6'` | Tablet column class when no attachments |
1162
- | `tabletActionsColClass` | string | `'col-1 d-flex align-items-center'` | Tablet actions column CSS class |
1163
- | `tabletBottomRowSpacingClass` | string | `'mt-4'` | Tablet bottom row spacing CSS class |
1164
- | `tabletDownloadCountClass` | string | `'text-dark fs-12 fw-bold ps-2'` | Tablet download count CSS class |
1165
- | `isMobile` | boolean | `false` | Mobile responsive mode |
1166
- | `isTablet` | boolean | `false` | Tablet responsive mode |
1167
-
1168
- ### Output Events
1169
- - `isLoadingChanged: EventEmitter<boolean>` - Emitted when loading state changes.
1170
- - `attachmentViewed: EventEmitter<any>` - Emitted when attachment view icon is clicked.
1171
- - `attachmentDownloaded: EventEmitter<any>` - Emitted when attachment download icon is clicked.
1172
- - `errorOccurred: EventEmitter<string>` - Emitted when API request fails.
1173
-
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.