npm - @skysoftware-co/bayan-hr-widgets-ui - Versions diffs - 1.0.0 - Mend

@skysoftware-co/bayan-hr-widgets-ui 1.0.0

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 (14) hide show

package/README.md ADDED Viewed

@@ -0,0 +1,176 @@
+# HRComponents
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 19.2.15.
+## Code scaffolding
+Run `ng generate component component-name --project HRComponents` to generate a new component.
+You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project HRComponents`.
+> Note: Don't forget to add `--project HRComponents` or else it will be added to the default project in your `angular.json` file.
+## Build
+Run `ng build HRComponents` to build the project. The build artifacts will be stored in the `dist/` directory.
+## Publishing
+After building your library with `ng build HRComponents`, go to the dist folder `cd dist/shared-ui` and run `npm publish`.
+## Running unit tests
+Run `ng test HRComponents` to execute the unit tests via [Karma](https://karma-runner.github.io).
+## Further help
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
+## Sky Bayan HR Components
+This package contains shared HR components used in Bayan HR system, you can find in first installation the below
+components:
+1. My Main Details Widget
+2. My Upcoming Events Widget
+## Dependencies
+This library depends on `@skysoftware-co/bayan-components-ui` package which provides:
+- Employee Badge Component
+## Installation
+use npm to install this package by command: @skysoftware-co/bayan-hr-components
+## Constants Service
+### Usage
+```typescript
+import { HrConstantsService } from '@skysoftware-co/bayan-hr-components';
+```
+This service provides default constant values used across HR components, you can override them at runtime.
+### Properties
+| Property | Type | Default Value | Description |
+|----------|------|---------------|-------------|
+| `defaultVacationBalanceColor` | string | `'#727070'` | Default color for vacation balance indicator |
+| `defaultVacationColor` | string | `'#DCDCDC'` | Default color for vacation type when no color is assigned |
+## My Main Details Widget Component
+### Usage
+```html
+<hr-my-main-details-widget></hr-my-main-details-widget>
+```
+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.
+### Input Properties
+| Input | Type | Default Value | Description |
+|-------|------|---------------|-------------|
+| `badgeClass` | string | `'badge employee-rounded-badge-xl fs-5'` | Badge CSS class |
+| `badgeImageClass` | string | `'rounded-circle shadow-lg'` | Badge image CSS class |
+| `badgeWidth` | string | `'50px'` | Badge width |
+| `badgeHeight` | string | `'50px'` | Badge height |
+| `employeeInfoContainerClass` | string | `'d-flex align-content-center'` | Employee info container CSS class |
+| `employeeDetailsClass` | string | `'ms-3'` | Employee details CSS class |
+| `employeeNameContainerClass` | string | `'d-flex align-items-center'` | Employee name container CSS class |
+| `employeeNameClass` | string | `'fs-14 text-dark-gray fw-medium text-ellipsis-one-line'` | Employee name CSS class |
+| `employeePositionClass` | string | `'fs-12 fw-normal text-dark-gray text-ellipsis-one-line mb-1'` | Employee position CSS class |
+| `employeeGradeClass` | string | `'fs-12 text-dark-gray'` | Employee grade CSS class |
+| `containerClass` | string | `'card rounded rounded-4 card-shadow p-16 border-top-0 mb-4'` | Main container CSS class |
+| `cardBodyClass` | string | `'card-body p-4'` | Card body CSS class |
+| `headerRowClass` | string | `'d-md-flex justify-content-between align-items-center mt-2 mb-3'` | Header row CSS class |
+| `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 |
+| `shortcutItemClass` | string | `'d-flex flex-column align-items-center mx-2 wp-60'` | Shortcut item CSS class |
+| `shortcutIconContainerClass` | string | `'d-flex justify-content-center align-items-center rounded-circle-40 cursor-pointer'` | Shortcut icon container CSS class |
+| `shortcutIconClass` | string | `'fs-4'` | Shortcut icon CSS class |
+| `shortcutTextClass` | string | `'text-center mt-1'` | Shortcut text CSS class |
+| `detailsRowClass` | string | `'d-flex mt-4'` | Details row CSS class |
+| `reportingBlockClass` | string | `'d-flex text-secondary align-items-center mb-2 mx-2'` | Reporting block CSS class |
+| `captionLabelClasses` | string | `'d-flex flex-column align-self-start fs-14 text-dark-gray'` | Caption label CSS class |
+| `captionLabelValueClass` | string | `'fw-medium mt-2'` | Caption label value CSS class |
+| `vacationBalancesContainerClass` | string | `'d-flex text-secondary align-items-center mb-2'` | Vacation balances container CSS class |
+| `vacationBalanceItemClass` | string | `'d-flex flex-column me-4'` | Vacation balance item CSS class |
+| `vacationBalanceHeaderClass` | string | `'d-flex align-items-center'` | Vacation balance header CSS class |
+| `vacationColorDotClass` | string | `'vacation-color-container-sm'` | Vacation color dot CSS class |
+| `vacationTypeNameClass` | string | `'mx-2 fs-14 fw-normal text-dark-gray'` | Vacation type name CSS class |
+| `vacationBalanceValueRowClass` | string | `'d-flex mt-2'` | Vacation balance value row CSS class |
+| `vacationBalanceValueClass` | string | `'mx-2 fw-medium fs-14 text-dark-gray'` | Vacation balance value CSS class |
+| `tooltipTriggerLinkClass` | string | `'d-flex align-items-center cursor-pointer'` | Tooltip trigger link CSS class |
+| `tooltipTriggerTextClass` | string | `'mx-2 fs-14 text-dark-gray'` | Tooltip trigger text CSS class |
+| `tooltipVacationRowClass` | string | `'d-flex align-items-center justify-content-around fs-12 mb-2'` | Tooltip vacation row CSS class |
+| `tooltipVacationNameContainerClass` | string | `'d-flex flex-grow-1 align-items-center me-5'` | Tooltip vacation name container CSS class |
+| `tooltipVacationNameClass` | string | `'mx-2'` | Tooltip vacation name CSS class |
+| `reportingToLabel` | string | `'ReportingTo'` | Reporting to label text |
+| `emptyReportingToLabel` | string | `'NotAnknown'` | Empty reporting to label text |
+| `serviceYearsLabel` | string | `'ServiceYears'` | Service years label text |
+| `moreLabel` | string | `'More'` | More label text |
+| `dayLabel` | string | `'day'` | Day label text |
+| `daysLabel` | string | `'days'` | Days label text |
+| `yearsLabel` | string | `'Years'` | Years label text |
+| `monthsLabel` | string | `'Months'` | Months label text |
+| `defaultVacationBalanceColor` | string | from `HrConstantsService`: `'#727070'` | Default vacation balance color indicator |
+| `defaultVacationColor` | string | from `HrConstantsService`: `'#DCDCDC'` | Default vacation type color when no color assigned |
+| `baseUrl` | string | `''` | Base URL for API calls |
+| `isMobile` | boolean | `false` | Mobile responsive mode |
+| `isTablet` | boolean | `false` | Tablet responsive mode |
+| `shortcuts` | MainWidgetShortcutItem[] | `[]` | List of shortcut items to display |
+### Output Events
+- `onShortcutClicked: EventEmitter<MainWidgetShortcutItem>` -  Emitted when the shortcut is clicked and has no navigation URL
+- `isLoadingChanged: EventEmitter<boolean>` - When loading state changes
+## My Upcoming Events Widget Component
+### Usage
+```html
+<hr-my-upcoming-events-widget></hr-my-upcoming-events-widget>
+```
+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.
+### Input Properties
+| Input | Type | Default Value | Description |
+|-------|------|---------------|-------------|
+| `baseUrl` | string | `''` | Base URL for API calls |
+| `weekendWarningDescription` | string | `'WeekendDayNotDefined'` | Warning text when weekend is not configured |
+| `selectedLanguage` | string | `'en'` | Selected language (`'en'`, `'ar'`, `'fr'`) |
+| `showProperty` | boolean | `true` | Show employee property badge on birthday events |
+| `externalViewAll` | boolean | `false` | When true, emits `viewAllClicked` instead of opening popup |
+| `cardClass` | string | `'bg-light-gray border-0 card p-3 card-shadow rounded rounded-4 mt-3'` | Card container CSS class |
+| `noEventsTextClass` | string | `'text-center my-4 text-light-gray'` | No events text CSS class |
+| `viewAllLinkClass` | string | `'fs-14 mt-2'` | View all link CSS class |
+| `viewAllContainerClass` | string | `'d-flex justify-content-end cursor-pointer'` | View all container CSS class |
+| `warningTextClass` | string | `'text-center my-2 text-light-gray'` | Warning text CSS class |
+| `tabSelectedClass` | string | `'selected-event-option'` | Selected tab CSS class |
+| `tabNotSelectedClass` | string | `'not-selected-event-option'` | Not selected tab CSS class |
+| `tabTextSelectedClass` | string | `'text-white'` | Selected tab text CSS class |
+| `tabTextNotSelectedClass` | string | `'text-primary'` | Not selected tab text CSS class |
+| `tabContainerClass` | string | `'d-flex gap-2 mb-3'` | Tab bar container CSS class |
+| `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 |
+| `tabTextClass` | string | `'fs-16'` | Tab text CSS class |
+| `tabIconClass` | string | `'fs-6'` | Tab icon CSS class |
+| `eventIconClass` | string | `'fs-6 text-primary pe-2'` | Event icon CSS class |
+| `eventNameBoldClass` | string | `'fw-medium'` | Event name bold CSS class |
+| `eventDescriptionClass` | string | `'text-primary fw-medium'` | Event description CSS class |
+| `propertyBadgeClass` | string | `'property-badge cursor-pointer me-1'` | Property badge CSS class |
+| `dateFormat` | string | `'dd/MM/yyyy'` | Date format for event dates |
+| `labels` | UpcomingEventsLabels | *(see below)* | Localization labels |
+### Labels Default Values
+| Label | Default |
+|-------|---------|
+| `upcomingEvents` | `'Upcoming Events'` |
+| `birthday` | `'Birthday'` |
+| `publicHoliday` | `'Public Holiday'` |
+| `during` | `'During'` |
+| `isIn` | `'is in'` |
+| `is` | `'is'` |
+| `in` | `'In'` |
+| `noEvents` | `'There are no events'` |
+| `all` | `'All'` |
+| `viewAll` | `'View All'` |
+### Output Events
+- `isLoadingChanged: EventEmitter<boolean>` - Emitted when loading state changes
+- `viewAllClicked: EventEmitter<void>` - Emitted when view all is clicked (only when `externalViewAll` is true)