@osama_amireh/bayan-payroll-widgets-ui 2.0.6

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 (8) hide show
  1. package/README.md +448 -0
  2. package/fesm2022/osama_amireh-bayan-payroll-widgets-ui.mjs +1659 -0
  3. package/fesm2022/osama_amireh-bayan-payroll-widgets-ui.mjs.map +1 -0
  4. package/fesm2022/skysoftware-co-bayan-payroll-widgets-ui.mjs +1659 -0
  5. package/fesm2022/skysoftware-co-bayan-payroll-widgets-ui.mjs.map +1 -0
  6. package/package.json +51 -0
  7. package/types/osama_amireh-bayan-payroll-widgets-ui.d.ts +488 -0
  8. package/types/skysoftware-co-bayan-payroll-widgets-ui.d.ts +488 -0
package/README.md ADDED
@@ -0,0 +1,448 @@
1
+ # shared-ui
2
+
3
+ This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 21.2.11.
4
+
5
+ ## Included Widgets
6
+
7
+ 1. My Loans Popup (`payroll-my-loans-popup`)
8
+ 2. My Payslip Widget (`payroll-my-payslip-widget`)
9
+ 3. Payroll Job Information Widget (`payroll-my-payslip-job-info-widget`)
10
+ 4. Payroll Bank Information Widget (`payroll-my-payslip-bank-info-widget`)
11
+ 5. Payroll Vacation Balance Widget (`payroll-my-payslip-vacation-balance-widget`)
12
+ 6. Payroll Ticket Balance Widget (`payroll-my-payslip-ticket-balance-widget`)
13
+ 7. Payroll Indemnity Widget (`payroll-my-payslip-indemnity-widget`)
14
+ 8. Payroll Salary Transfer Popup (`payroll-salary-transfer-popup`)
15
+
16
+ ## Installation
17
+
18
+ ```bash
19
+ npm i @skysoftware-co/bayan-payroll-widgets-ui
20
+ ```
21
+
22
+ ## Peer Dependencies
23
+
24
+ Install peer dependencies in the host app as needed:
25
+
26
+ - `@angular/common` `^21.0.0`
27
+ - `@angular/core` `^21.0.0`
28
+ - `@skysoftware-co/sky-components-ui` `>=1.4.5`
29
+ - `@ngx-translate/core` `^17.0.0` (optional)
30
+ - `@fortawesome/angular-fontawesome` `>=4.0.0` (optional)
31
+ - `@fortawesome/pro-light-svg-icons` `>=6.0.0` (optional)
32
+ - `@fortawesome/pro-solid-svg-icons` `>=6.0.0` (optional)
33
+ - `devextreme` `>=24.0.0` (optional)
34
+ - `devextreme-angular` `>=24.0.0` (optional)
35
+
36
+ ## Build
37
+
38
+ ```bash
39
+ ng build PayrollComponents
40
+ ```
41
+
42
+ Build output is generated under `dist/payroll-ui`.
43
+
44
+ ## Publish
45
+
46
+ ```bash
47
+ ng build PayrollComponents
48
+ cd dist/payroll-ui
49
+ npm publish
50
+ ```
51
+
52
+ If publish fails, verify that you are authenticated (`npm login`) and have permission to publish the package.
53
+
54
+ ## Translate Service
55
+
56
+ ### Usage
57
+
58
+ ```typescript
59
+ import { PayrollTranslateService } from '@skysoftware-co/bayan-payroll-widgets-ui';
60
+ ```
61
+
62
+ ### Methods
63
+
64
+ | Method | Parameters | Description |
65
+ | ------------------ | --------------------------------- | ------------------------------------------------------ |
66
+ | `setLanguage` | `language: string` | Sets current language (`en`, `ar`, `fr`) |
67
+ | `getLanguage` | - | Returns current language |
68
+ | `setLexicon` | `lexicon: Record<string, string>` | Sets translation dictionary |
69
+ | `getLexicon` | - | Returns current translation dictionary |
70
+ | `translateBuiltIn` | `key: string` | Returns built-in translated value for current language |
71
+
72
+ ## My Loans Popup
73
+
74
+ This component shows employee loan details in a popup with lazy load and single-item pagination.
75
+
76
+ ### Usage
77
+
78
+ ```html
79
+ <payroll-my-loans-popup
80
+ [(popupVisible)]="showEmployeeLoansPopup"
81
+ [baseUrl]="baseUrl"
82
+ [currencyCode]="currencyCode"
83
+ [currencyDecimals]="currencyDecimals"
84
+ (isLoadingChanged)="isPRLoading = $event"
85
+ (closePopupClickHandler)="onEmployeeLoansPopupClose()"
86
+ ></payroll-my-loans-popup>
87
+ ```
88
+
89
+ ### Inputs
90
+
91
+ | Input | Type | Default | Description |
92
+ | ---------------------------- | ------------------ | --------------------------------------------------- | ------------------------------------------------------- |
93
+ | `popupVisible` | `boolean` | `false` | Controls popup visibility |
94
+ | `baseUrl` | `string` | `''` | Base API URL |
95
+ | `currencyCode` | `string` | `''` | Currency code displayed with amounts |
96
+ | `currencyDecimals` | `number` | `2` | Decimal digits for amount formatting |
97
+ | `popupWidth` | `number \| string` | `580` | Popup width |
98
+ | `popupHeight` | `number \| string` | `'auto'` | Popup height |
99
+ | `popupTitleKey` | `string` | `'Loans'` | Popup title translation key |
100
+ | `popupDragEnabled` | `boolean` | `false` | Enables popup dragging |
101
+ | `popupShadingColor` | `string` | `'rgba(0,0,0,0.4)'` | Popup overlay color |
102
+ | `contentContainerClass` | `string` | `'mx-4 mt-2'` | Popup content container CSS class |
103
+ | `noPaginationContainerClass` | `string` | `'mb-2'` | Class added when pagination is hidden |
104
+ | `cardContainerClass` | `string` | `'p-3 card-shadow h-100 border border-1 rounded-2'` | Loan card wrapper CSS class |
105
+ | `loanTitleClass` | `string` | `'text-dark fs-20 mb-2'` | Loan title CSS class |
106
+ | `installRangeLabelClass` | `string` | `'field-secondary-label-sm'` | Installment date range label CSS class |
107
+ | `lineClass` | `string` | `'fs-12 mb-2'` | Loan detail line CSS class |
108
+ | `amountLabelClass` | `string` | `'field-secondary-label-sm'` | Amount label CSS class |
109
+ | `currencyCodeClass` | `string` | `'text-secondary fs-10'` | Currency code CSS class |
110
+ | `amountValueClass` | `string` | `'text-dark-gray mx-1 fs-14'` | Amount value CSS class |
111
+ | `totalPaidClass` | `string` | `'text-success fs-12'` | Total paid amount CSS class |
112
+ | `remainingInstallmentClass` | `string` | `'field-secondary-label-sm'` | Remaining installment count CSS class |
113
+ | `navContainerClass` | `string` | `'d-flex justify-content-center mt-3'` | Pagination container CSS class |
114
+ | `navListClass` | `string` | `'pagination mb-1'` | Pagination list CSS class |
115
+ | `pageItemClass` | `string` | `'page-item page-number mx-3'` | Page item CSS class |
116
+ | `arrowItemClass` | `string` | `'page-item arrow'` | Arrow button CSS class |
117
+ | `pageLinkClass` | `string` | `'page-link rounded-circle'` | Page link CSS class |
118
+ | `arrowActiveClass` | `string` | `'text-primary'` | CSS class applied to an arrow button when it is enabled |
119
+
120
+ ### Outputs
121
+
122
+ - `popupVisibleChange: EventEmitter<boolean>`: emitted when popup visibility changes.
123
+ - `closePopupClickHandler: EventEmitter<void>`: emitted when popup is closed.
124
+ - `isLoadingChanged: EventEmitter<boolean>`: emitted when loading starts/ends.
125
+
126
+ ## My Payslip
127
+
128
+ This component shows employee payslip details for a selected month and displays an empty state card when payslip details are unavailable.
129
+
130
+ ### Usage
131
+
132
+ ```html
133
+ <payroll-my-payslip-widget
134
+ [baseUrl]="baseUrl"
135
+ [payMonth]="selectedPayMonth"
136
+ [hidePayslip]="hidePayslip"
137
+ [isFirstMonth]="isFirstMonth"
138
+ (isLoadingChanged)="isPRLoading = $event"
139
+ ></payroll-my-payslip-widget>
140
+ ```
141
+
142
+ ### Inputs
143
+
144
+ | Input | Type | Default | Description |
145
+ | ------------------------------ | ------------------ | -------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------- |
146
+ | `baseUrl` | `string` | `''` | Base API URL |
147
+ | `payMonth` | `string \| null` | `null` | Selected pay month value |
148
+ | `hidePayslip` | `boolean` | `false` | Hides sensitive payslip details and shows empty state |
149
+ | `isFirstMonth` | `boolean` | `false` | Allows host to control first-month empty state behavior |
150
+ | `isMobile` | `boolean` | `false` | Switches layout to mobile view |
151
+ | `cardContainerClass` | `string` | `'card shadow-sm border-0 rounded-3 p-4'` | Main card container |
152
+ | `contentRowClass` | `string` | `'row g-4'` | Content wrapper row |
153
+ | `detailsColumnClass` | `string` | `'col-xl-6 col-md-12 order-2 order-xl-1'` | Details section column |
154
+ | `chartColumnClass` | `string` | `'col-xl-6 col-md-12 d-flex align-items-start justify-content-center justify-content-xl-end order-1 order-xl-2 m-0'` | Chart section column |
155
+ | `mobileChartWrapperClass` | `string` | `'d-flex align-items-start justify-content-start'` | Mobile chart wrapper |
156
+ | `titleRowClass` | `string` | `'d-flex align-items-center mb-4'` | Title row container |
157
+ | `salaryIconClass` | `string` | `'text-primary fs-28 me-2'` | Salary icon styling |
158
+ | `titleClass` | `string` | `'fw-medium fs-16 text-uppercase text-dark-gray'` | Main title styling |
159
+ | `titleMonthClass` | `string` | `'fw-normal text-capitalize'` | Month subtitle styling |
160
+ | `sectionClass` | `string` | `'mb-4'` | Section wrapper styling |
161
+ | `sectionTitleClass` | `string` | `'fs-14 fw-bold mb-2 text-primary'` | Section title styling |
162
+ | `salaryTableRowClass` | `string` | `'row'` | Salary table row |
163
+ | `labelColumnClass` | `string` | `'col-5 text-start'` | Label/name column |
164
+ | `daysColumnClass` | `string` | `'col-2 text-end fw-light mb-2'` | Days column |
165
+ | `daysHeaderClass` | `string` | `'text-ellipsis-one-line mb-2 table-cell-md'` | Days header styling |
166
+ | `amountColumnClass` | `string` | `'offset-1 col-3 text-start'` | Amount column |
167
+ | `totalsColumnClass` | `string` | `'offset-3 col-4 text-start'` | Totals column |
168
+ | `viewDetailsLinkClass` | `string` | `'text-primary fw-normal ms-1'` | View details link styling |
169
+ | `tableLabelClass` | `string` | `'fw-normal mb-2 table-cell-sm text-ellipsis-one-line'` | Table label cell |
170
+ | `tablePrimaryLabelClass` | `string` | `'fw-normal mb-2 table-cell-md text-ellipsis-one-line'` | Primary label cell |
171
+ | `tableValueClass` | `string` | `'fw-medium mb-2 table-cell-sm text-ellipsis-one-line'` | Table value cell |
172
+ | `tableSecondaryValueClass` | `string` | `'text-ellipsis-one-line mb-2 table-cell-sm'` | Secondary value cell |
173
+ | `currencyCodeClass` | `string` | `'fs-10'` | Currency code styling |
174
+ | `allowancesRowClass` | `string` | `'row align-items-start'` | Allowances section row |
175
+ | `allowanceDaysClass` | `string` | `'col-2 text-end table-cell-sm fw-light'` | Allowance days column |
176
+ | `allowanceAmountWrapperClass` | `string` | `'d-flex align-items-center justify-content-between fs-12 fw-medium mb-2 text-dark-gray'` | Amount wrapper |
177
+ | `allowanceAmountTextClass` | `string` | `'w-30 text-nowrap'` | Amount text styling |
178
+ | `infoIconClass` | `string` | `'light-info ms-1 cursor-pointer'` | Info icon styling |
179
+ | `tooltipContainerClass` | `string` | `'text-white rounded overflow-hidden'` | Tooltip container |
180
+ | `tooltipTextClass` | `string` | `'text-ellipsis-one-line fs-12'` | Tooltip text |
181
+ | `tooltipCurrencyClass` | `string` | `'fs-10'` | Tooltip currency code |
182
+ | `tooltipAmountClass` | `string` | `'fs-14 ms-1'` | Tooltip amount value |
183
+ | `dividerRowClass` | `string` | `'row'` | Divider row |
184
+ | `dividerColumnClass` | `string` | `'col-12'` | Divider column |
185
+ | `deductionsSectionRowClass` | `string` | `'row mt-4'` | Deductions section row |
186
+ | `deductionsSectionColumnClass` | `string` | `'col-xl-6 col-md-12'` | Deductions section column |
187
+ | `deductionsInnerRowClass` | `string` | `'row'` | Deductions inner row |
188
+ | `deductionDaysClass` | `string` | `'col-2 text-end table-cell-sm fw-light'` | Deduction days column |
189
+ | `deductionAmountTextClass` | `string` | `'fw-normal mb-2 table-cell-sm text-nowrap'` | Deduction amount text |
190
+ | `popupWidth` | `number \| string` | `600` | Popup width |
191
+ | `popupMaxHeight` | `number \| string` | `400` | Popup max height |
192
+ | `popupShadingColor` | `string` | `'rgba(0,0,0,0.4)'` | Popup overlay color |
193
+ | `popupHeaderRowClass` | `string` | `'row mb-3 table-cell-sm'` | Popup header row |
194
+ | `popupRowClass` | `string` | `'row mb-3 table-cell-md'` | Popup content row |
195
+ | `emptyCardContainerClass` | `string` | `'card border shadow-sm rounded-3'` | Empty card wrapper |
196
+ | `emptyCardBodyClass` | `string` | `'card-body text-center py-5'` | Empty card body |
197
+ | `emptyIconClass` | `string` | `'fs-28 me-2 light-info mb-3'` | Empty state icon |
198
+ | `emptyMessageClass` | `string` | `'fs-20 fw-400 mb-2 text-dark'` | Empty state message |
199
+ | `emptyHelpTextClass` | `string` | `'fs-16 fw-400 mb-0 text-dark'` | Empty state help text |
200
+ | `accessDeniedMessage` | `string` | `'YouAreNotAllowedToViewThePayslip'` | This is a default value. If you want to override it, it must be sent translated |
201
+ | `noPayslipMessage` | `string` | `'NoPayslipAvailableYet'` | This is a default value. If you want to override it, it must be sent translated. |
202
+ | `helpText` | `string` | `'PleaseContactYourAdminForAnyHelp.'` | This is a default value. If you want to override it, it must be sent translated |
203
+ | `accessDeniedIcon` | `IconDefinition` | `faMoneyCheckDollarPen` | Icon for access denied state |
204
+
205
+ ### Outputs
206
+
207
+ - `isLoadingChanged: EventEmitter<boolean>`: emitted when payslip details loading starts/ends.
208
+ - `errorOccurred: EventEmitter<string>`: emitted when an error occurs during data loading.
209
+
210
+ ## Payroll Job Information Widget
211
+
212
+ This component displays employee job information including admin unit, position, grade, and joining date with responsive mobile support and translation integration.
213
+
214
+ ### Usage
215
+
216
+ ```html
217
+ <payroll-my-payslip-job-info-widget
218
+ [baseUrl]="baseUrl"
219
+ [payMonth]="payMonth"
220
+ [isMobile]="isMobile"
221
+ [isPayslipAvailable]="isPayslipAvailable"
222
+ (isLoadingChanged)="isPRLoading = $event"
223
+ (errorOccurred)="onError($event)"
224
+ ></payroll-my-payslip-job-info-widget>
225
+ ```
226
+
227
+ ### Inputs
228
+
229
+ | Input | Type | Default | Description |
230
+ | ----------------------- | ---------------- | ------------------------------------------------------------------------ | ---------------------------------- |
231
+ | `adminUnitIcon` | `IconDefinition` | `faSitemap` | Icon for admin unit display |
232
+ | `positionIcon` | `IconDefinition` | `faUserTie` | Icon for position display |
233
+ | `gradeIcon` | `IconDefinition` | `faMedal` | Icon for grade display |
234
+ | `joiningDateIcon` | `IconDefinition` | `faCalendarAlt` | Icon for joining date display |
235
+ | `titleClass` | `string` | `'fw-medium mb-2 table-cell-md'` | CSS class for title styling |
236
+ | `desktopContainerClass` | `string` | `'d-flex flex-column justify-content-start align-items-start mx-4 my-2'` | CSS class for desktop container |
237
+ | `mobileContainerClass` | `string` | `'d-flex align-items-center justify-content-center w-100'` | CSS class for mobile container |
238
+ | `mobileCardClass` | `string` | `'p-3 h-50 card-shadow rounded-1 mb-3 mt-3 w-90 mh-150 mx-3'` | CSS class for mobile card wrapper |
239
+ | `iconClass` | `string` | `'fs-16 me-2 text-gray'` | CSS class for icons |
240
+ | `rowClass` | `string` | `'d-flex align-items-center my-1 w-100'` | CSS class for each information row |
241
+ | `labelClass` | `string` | `'fw-light fs-12 text-light-dark'` | CSS class for labels |
242
+ | `valueClass` | `string` | `'fw-400 ms-1 text-light-dark fs-12'` | CSS class for values |
243
+ | `title` | `string` | `'JobInformation'` | Title translation key |
244
+ | `baseUrl` | `string` | `''` | Base API URL |
245
+ | `payMonth` | `string \| null` | `null` | Selected pay month value |
246
+ | `isMobile` | `boolean` | `false` | Switches layout to mobile view |
247
+ | `isPayslipAvailable` | `boolean` | `true` | Controls data loading and display |
248
+
249
+ ### Outputs
250
+
251
+ - `isLoadingChanged: EventEmitter<boolean>`: emitted when job information loading starts/ends.
252
+ - `errorOccurred: EventEmitter<string>`: emitted when an error occurs during data loading.
253
+
254
+ ## Payroll Bank Information Widget
255
+
256
+ This component displays employee bank transfer information with salary transfer details popup, responsive mobile support, and translation integration.
257
+
258
+ ### Usage
259
+
260
+ ```html
261
+ <payroll-my-payslip-bank-info-widget
262
+ [baseUrl]="baseUrl"
263
+ [payMonth]="payMonth"
264
+ [isMobile]="isMobile"
265
+ [isPayslipAvailable]="isPayslipAvailable"
266
+ (isLoadingChanged)="isPRLoading = $event"
267
+ (errorOccurred)="onError($event)"
268
+ (exploreDetailsClick)="onExploreDetails()"
269
+ ></payroll-my-payslip-bank-info-widget>
270
+ ```
271
+
272
+ ### Inputs
273
+
274
+ | Input | Type | Default | Description |
275
+ | ----------------------- | ---------------- | --------------------------------------------------------------------------- | ---------------------------------------- |
276
+ | `bankIcon` | `IconDefinition` | `faUniversity` | Icon for bank name display |
277
+ | `accountIcon` | `IconDefinition` | `faCreditCard` | Icon for account number display |
278
+ | `titleClass` | `string` | `'fw-medium mb-2 table-cell-md'` | CSS class for title styling |
279
+ | `desktopContainerClass` | `string` | `'d-flex flex-column justify-content-start align-items-start mx-4 my-2'` | CSS class for desktop container |
280
+ | `mobileContainerClass` | `string` | `'d-flex align-items-center justify-content-between w-100'` | CSS class for mobile container |
281
+ | `mobileCardClass` | `string` | `'p-3 h-50 card-shadow rounded-1 mb-3 mt-3 w-90 mh-150 mx-3'` | CSS class for mobile card wrapper |
282
+ | `iconClass` | `string` | `'fs-16 me-2 text-gray'` | CSS class for icons |
283
+ | `rowClass` | `string` | `'d-flex align-items-center my-1 w-100'` | CSS class for each information row |
284
+ | `labelClass` | `string` | `'fw-light fs-12 text-light-dark'` | CSS class for labels |
285
+ | `valueClass` | `string` | `'fw-400 ms-1 text-light-dark fs-12'` | CSS class for values |
286
+ | `actionClass` | `string` | `'mt-2 fs-12 text-primary fw-400 cursor-pointer text-decoration-underline'` | CSS class for action links |
287
+ | `exploreDetailsKey` | `string` | `'ExploreSalaryTransferDetails'` | Translation key for explore details link |
288
+ | `popupHeight` | `string` | `'auto'` | Popup height |
289
+ | `popupMaxWidth` | `string` | `'800px'` | Popup maximum width |
290
+ | `popupMinWidth` | `string` | `'auto'` | Popup minimum width |
291
+ | `popupContainerClass` | `string` | `''` | CSS class for popup container |
292
+ | `popupHeaderRowClass` | `string` | `'fw-bold text-secondary pb-2 d-flex'` | CSS class for popup header row |
293
+ | `popupHeaderCell1Class` | `string` | `'w-35 text-dark-gray fs-12 fw-400'` | CSS class for popup header cell 1 |
294
+ | `popupHeaderCell2Class` | `string` | `'w-20 text-start text-dark-gray fs-12 fw-400'` | CSS class for popup header cell 2 |
295
+ | `popupHeaderCell3Class` | `string` | `'w-45 text-dark-gray fs-12 fw-400'` | CSS class for popup header cell 3 |
296
+ | `popupDataRowClass` | `string` | `'py-2 d-flex'` | CSS class for popup data rows |
297
+ | `popupDataCell1Class` | `string` | `'w-35 text-dark-gray fs-14 fw-400'` | CSS class for popup data cell 1 |
298
+ | `popupDataCell2Class` | `string` | `'w-20 text-start text-dark-gray fs-14 fw-400'` | CSS class for popup data cell 2 |
299
+ | `popupDataCell3Class` | `string` | `'w-45 text-start text-dark-gray fs-14 fw-400'` | CSS class for popup data cell 3 |
300
+ | `title` | `string` | `'BankInformation'` | Title translation key |
301
+ | `baseUrl` | `string` | `''` | Base API URL |
302
+ | `payMonth` | `string` | `''` | Selected pay month value |
303
+ | `isMobile` | `boolean` | `false` | Switches layout to mobile view |
304
+ | `isPayslipAvailable` | `boolean` | `true` | Controls data loading and display |
305
+
306
+ ### Outputs
307
+
308
+ - `errorOccurred: EventEmitter<string>`: emitted when an error occurs during data loading.
309
+ - `isLoadingChanged: EventEmitter<boolean>`: emitted when bank information loading starts/ends.
310
+ - `exploreDetailsClick: EventEmitter<void>`: emitted when explore details link is clicked.
311
+
312
+ ## Payroll Vacation Balance Widget
313
+
314
+ This component displays employee vacation balances with expandable view for multiple vacation types, responsive mobile support, and translation integration.
315
+
316
+ ### Usage
317
+
318
+ ```html
319
+ <payroll-my-payslip-vacation-balance-widget
320
+ [baseUrl]="baseUrl"
321
+ [payMonth]="payMonth"
322
+ [isMobile]="isMobile"
323
+ [isPayslipAvailable]="isPayslipAvailable"
324
+ [collapsedItemsCount]="collapsedItemsCount"
325
+ (isLoadingChanged)="isPRLoading = $event"
326
+ (errorOccurred)="onError($event)"
327
+ ></payroll-my-payslip-vacation-balance-widget>
328
+ ```
329
+
330
+ ### Inputs
331
+
332
+ | Input | Type | Default | Description |
333
+ | ----------------------- | ---------------- | ------------------------------------------------------------------------------------------------------- | ------------------------------------ |
334
+ | `vacationIcon` | `IconDefinition` | `faIslandTropical` | Icon for vacation balance display |
335
+ | `titleClass` | `string` | `'fw-medium mb-2 table-cell-md'` | CSS class for title styling |
336
+ | `desktopContainerClass` | `string` | `'d-flex flex-column justify-content-start align-items-start mx-4 my-2'` | CSS class for desktop container |
337
+ | `mobileContainerClass` | `string` | `'d-flex align-items-center justify-content-center w-100'` | CSS class for mobile container |
338
+ | `mobileCardClass` | `string` | `'p-3 h-50 card-shadow rounded-1 mb-3 mt-3 w-90 mh-150 mx-3'` | CSS class for mobile card wrapper |
339
+ | `iconClass` | `string` | `'fs-16 me-2 text-gray'` | CSS class for icons |
340
+ | `rowClass` | `string` | `'d-flex align-items-center my-1 w-100'` | CSS class for each balance row |
341
+ | `labelClass` | `string` | `'fw-light fs-12 text-light-dark'` | CSS class for labels |
342
+ | `valueClass` | `string` | `'fw-400 ms-1 text-light-dark fs-12'` | CSS class for values |
343
+ | `viewMoreLabel` | `string` | `'ViewMore'` | Translation key for view more button |
344
+ | `viewLessLabel` | `string` | `'ViewLess'` | Translation key for view less button |
345
+ | `expandIcon` | `IconDefinition` | `faChevronDown` | Icon for expand action |
346
+ | `collapseIcon` | `IconDefinition` | `faChevronUp` | Icon for collapse action |
347
+ | `actionIconClass` | `string` | `'fs-10 ms-1'` | CSS class for action icons |
348
+ | `actionButtonClass` | `string` | `'mt-2 fs-12 text-primary fw-400 cursor-pointer text-decoration-underline bg-transparent border-0 p-0'` | CSS class for expand/collapse button |
349
+ | `title` | `string` | `'VacationBalance'` | Title translation key |
350
+ | `daysLabel` | `string` | `'Days'` | Days label translation key |
351
+ | `baseUrl` | `string` | `''` | Base API URL |
352
+ | `payMonth` | `string \| null` | `null` | Selected pay month value |
353
+ | `isMobile` | `boolean` | `false` | Switches layout to mobile view |
354
+ | `isPayslipAvailable` | `boolean` | `true` | Controls data loading and display |
355
+ | `collapsedItemsCount` | `number` | `2` | Number of items shown when collapsed |
356
+
357
+ ### Outputs
358
+
359
+ - `isLoadingChanged: EventEmitter<boolean>`: emitted when vacation balance loading starts/ends.
360
+ - `errorOccurred: EventEmitter<string>`: emitted when an error occurs during data loading.
361
+
362
+ ## Payroll Ticket Balance Widget
363
+
364
+ This component displays employee ticket balances by age group with responsive mobile support and translation integration.
365
+
366
+ ### Usage
367
+
368
+ ```html
369
+ <payroll-my-payslip-ticket-balance-widget
370
+ [baseUrl]="baseUrl"
371
+ [payMonth]="payMonth"
372
+ [isMobile]="isMobile"
373
+ [isPayslipAvailable]="isPayslipAvailable"
374
+ (isLoadingChanged)="isPRLoading = $event"
375
+ (errorOccurred)="onError($event)"
376
+ ></payroll-my-payslip-ticket-balance-widget>
377
+ ```
378
+
379
+ ### Inputs
380
+
381
+ | Input | Type | Default | Description |
382
+ | ----------------------- | ---------------- | ------------------------------------------------------------------------ | --------------------------------- |
383
+ | `ticketIcon` | `IconDefinition` | `faUser` | Icon for ticket balance display |
384
+ | `titleClass` | `string` | `'fw-medium mb-2 table-cell-md'` | CSS class for title styling |
385
+ | `desktopContainerClass` | `string` | `'d-flex flex-column justify-content-start align-items-start mx-4 my-2'` | CSS class for desktop container |
386
+ | `mobileCardClass` | `string` | `'p-3 h-50 card-shadow rounded-1 mb-3 mt-3 w-90 mh-150 mx-3'` | CSS class for mobile card wrapper |
387
+ | `mobileContainerClass` | `string` | `'d-flex align-items-center justify-content-center w-100'` | CSS class for mobile container |
388
+ | `iconClass` | `string` | `'fs-16 me-2 text-gray'` | CSS class for icons |
389
+ | `rowClass` | `string` | `'d-flex align-items-center my-1 w-100'` | CSS class for each balance row |
390
+ | `labelClass` | `string` | `'fw-light fs-12 text-light-dark'` | CSS class for labels |
391
+ | `valueClass` | `string` | `'fw-400 ms-1 text-light-dark fs-12'` | CSS class for values |
392
+ | `title` | `string` | `'TicketBalance'` | Title translation key |
393
+ | `tickets` | `string` | `'Tickets'` | Tickets label translation key |
394
+ | `baseUrl` | `string` | `''` | Base API URL |
395
+ | `payMonth` | `string \| null` | `null` | Selected pay month value |
396
+ | `isMobile` | `boolean` | `false` | Switches layout to mobile view |
397
+ | `isPayslipAvailable` | `boolean` | `true` | Controls data loading and display |
398
+
399
+ ### Outputs
400
+
401
+ - `isLoadingChanged: EventEmitter<boolean>`: emitted when ticket balance loading starts/ends.
402
+ - `errorOccurred: EventEmitter<string>`: emitted when an error occurs during data loading.
403
+
404
+ ## Payroll Indemnity Widget
405
+
406
+ This component displays employee indemnity information including days and amount with currency formatting, responsive mobile support, and translation integration.
407
+
408
+ ### Usage
409
+
410
+ ```html
411
+ <payroll-my-payslip-indemnity-widget
412
+ [baseUrl]="baseUrl"
413
+ [payMonth]="payMonth"
414
+ [isMobile]="isMobile"
415
+ [isPayslipAvailable]="isPayslipAvailable"
416
+ (isLoadingChanged)="isPRLoading = $event"
417
+ (errorOccurred)="onError($event)"
418
+ ></payroll-my-payslip-indemnity-widget>
419
+ ```
420
+
421
+ ### Inputs
422
+
423
+ | Input | Type | Default | Description |
424
+ | ----------------------- | ---------------- | ------------------------------------------------------------------------ | -------------------------------------- |
425
+ | `amountIcon` | `IconDefinition` | `faFileSignature` | Icon for indemnity amount display |
426
+ | `titleClass` | `string` | `'fw-medium mb-2'` | CSS class for title styling |
427
+ | `desktopContainerClass` | `string` | `'d-flex flex-column justify-content-start align-items-start mx-4 my-2'` | CSS class for desktop container |
428
+ | `mobileContainerClass` | `string` | `'d-flex align-items-center justify-content-center w-100'` | CSS class for mobile container |
429
+ | `mobileCardClass` | `string` | `'p-3 h-50 card-shadow rounded-1 mb-3 mt-3 w-90 mh-150 mx-3'` | CSS class for mobile card wrapper |
430
+ | `iconClass` | `string` | `'fs-16 me-2 text-gray'` | CSS class for icons |
431
+ | `rowClass` | `string` | `'d-flex align-items-center my-1 w-100'` | CSS class for each information row |
432
+ | `labelClass` | `string` | `'fw-light fs-12 text-light-dark'` | CSS class for labels |
433
+ | `valueClass` | `string` | `'fw-400 ms-1 text-light-dark fs-12'` | CSS class for values |
434
+ | `currencyCodeClass` | `string` | `'text-secondary fs-10'` | Currency code styling |
435
+ | `title` | `string` | `'Indemnity'` | Title translation key |
436
+ | `indemnityDaysLabel` | `string` | `'IndemnityDays'` | Indemnity days label translation key |
437
+ | `indemnityAmountLabel` | `string` | `'IndemnityAmount'` | Indemnity amount label translation key |
438
+ | `days` | `string` | `'Days'` | Days suffix translation key |
439
+ | `baseUrl` | `string` | `''` | Base API URL |
440
+ | `payMonth` | `string \| null` | `null` | Selected pay month value |
441
+ | `isMobile` | `boolean` | `false` | Switches layout to mobile view |
442
+ | `isPayslipAvailable` | `boolean` | `true` | Controls data loading and display |
443
+ | `currencyDecimals` | `number` | `2` | Decimal digits for amount formatting |
444
+
445
+ ### Outputs
446
+
447
+ - `errorOccurred: EventEmitter<string>`: emitted when an error occurs during data loading.
448
+ - `isLoadingChanged: EventEmitter<boolean>`: emitted when indemnity loading starts/ends.