@skysoftware-co/bayan-hr-widgets-ui 1.0.10 → 1.0.12

package/README.md

@@ -269,3 +269,159 @@ The component calls `GET {baseUrl}/hr/employee-portal/calendar` with query param
 - `Year` - Starting year
 - `MonthsCount` - Number of months to load (default: 12)
 - Header: `api-version: 2`
+
+## Profile Widgets
+
+The package also exports profile-focused widgets used in the employee profile page.
+
+## Profile Personal Info Main Widget
+
+### Usage
+```html
+<hr-profile-personal-info-main-widget
+  [baseUrl]="baseUrl"
+  (isLoadingChanged)="onMainLoadingChanged($event)">
+</hr-profile-personal-info-main-widget>
+```
+
+### Input Properties
+| Input | Type | Default Value | Description |
+|-------|------|---------------|-------------|
+| `baseUrl` | string | `''` | Base URL for API calls (required) |
+| `sectionTitle` | string | `'main'` | Section title translation key |
+| `alternateLanguage` | string | `'English'` | Alternate language label next to employee alternate name |
+| `mainIcon` | IconDefinition | `faMemoCircleInfo` | Header icon |
+| `emptyStateContainerClass` | string | `'d-flex flex-column justify-content-center align-items-center my-5'` | Empty/loading container CSS class |
+| `emptyStateTextClass` | string | `'field-secondary-label-md'` | Empty/loading text CSS class |
+
+### Output Events
+- `isLoadingChanged: EventEmitter<boolean>` - Emitted when loading state changes.
+
+## Profile Personal Info Contact Widget
+
+### Usage
+```html
+<hr-profile-personal-info-contact-widget
+  [baseUrl]="baseUrl"
+  [showEmergencyContact]="true"
+  (isLoadingChanged)="onContactLoadingChanged($event)">
+</hr-profile-personal-info-contact-widget>
+```
+
+### Input Properties
+| Input | Type | Default Value | Description |
+|-------|------|---------------|-------------|
+| `baseUrl` | string | `''` | Base URL for API calls (required) |
+| `sectionTitle` | string | `'contact'` | Section title translation key |
+| `showEmergencyContact` | boolean | `true` | Show emergency contact block |
+| `contactIcon` | IconDefinition | `faPhone` | Header icon |
+| `emergencyContactIcon` | IconDefinition | `faBolt` | Emergency contact icon |
+| `emptyStateContainerClass` | string | `'d-flex flex-column justify-content-center align-items-center my-5'` | Empty/loading container CSS class |
+| `emptyStateTextClass` | string | `'field-secondary-label-md'` | Empty/loading text CSS class |
+
+### Output Events
+- `isLoadingChanged: EventEmitter<boolean>` - Emitted when loading state changes.
+
+## Profile Personal Info Address Widget
+
+### Usage
+```html
+<hr-profile-personal-info-address-widget
+  [baseUrl]="baseUrl"
+  (isLoadingChanged)="onAddressLoadingChanged($event)">
+</hr-profile-personal-info-address-widget>
+```
+
+### Input Properties
+| Input | Type | Default Value | Description |
+|-------|------|---------------|-------------|
+| `baseUrl` | string | `''` | Base URL for API calls (required) |
+| `sectionTitle` | string | `'address'` | Section title translation key |
+| `addressIcon` | IconDefinition | `faHouse` | Header icon |
+| `emptyStateContainerClass` | string | `'d-flex flex-column justify-content-center align-items-center my-5'` | Empty/loading container CSS class |
+| `emptyStateTextClass` | string | `'field-secondary-label-md'` | Empty/loading text CSS class |
+
+### Output Events
+- `isLoadingChanged: EventEmitter<boolean>` - Emitted when loading state changes.
+
+## Profile Personal Info Languages Widget
+
+### Usage
+```html
+<hr-profile-personal-info-languages-widget
+  [baseUrl]="baseUrl"
+  (hasDataChange)="onLanguagesDataChange($event)"
+  (isLoadingChanged)="onLanguagesLoadingChanged($event)">
+</hr-profile-personal-info-languages-widget>
+```
+
+### Input Properties
+| Input | Type | Default Value | Description |
+|-------|------|---------------|-------------|
+| `baseUrl` | string | `''` | Base URL for API calls |
+| `sectionTitle` | string | `'languages'` | Section title translation key |
+| `languagesIcon` | IconDefinition | `faLanguage` | Header icon |
+| `emptyStateContainerClass` | string | `'d-flex flex-column justify-content-center align-items-center my-5'` | Empty/loading container CSS class |
+| `emptyStateTextClass` | string | `'field-secondary-label-md'` | Empty/loading text CSS class |
+
+### Output Events
+- `hasDataChange: EventEmitter<boolean>` - Emitted when language list has data or not.
+- `isLoadingChanged: EventEmitter<boolean>` - Emitted when loading state changes.
+
+## Profile Personal Info Other Nationalities Widget
+
+### Usage
+```html
+<hr-profile-personal-info-other-nationalities-widget
+  [baseUrl]="baseUrl"
+  (hasDataChange)="onOtherNationalitiesDataChange($event)"
+  (isLoadingChanged)="onOtherNationalitiesLoadingChanged($event)">
+</hr-profile-personal-info-other-nationalities-widget>
+```
+
+### Input Properties
+| Input | Type | Default Value | Description |
+|-------|------|---------------|-------------|
+| `baseUrl` | string | `''` | Base URL for API calls (required) |
+| `sectionTitle` | string | `'otherNationalities'` | Section title translation key |
+| `otherNationalitiesIcon` | IconDefinition | `faEarthAfrica` | Header icon |
+| `emptyStateTextKey` | string | `'ThereIsNoOtherNationalitiesYet'` | Empty state translation key |
+| `emptyStateContainerClass` | string | `'d-flex flex-column justify-content-center align-items-center my-5'` | Empty/loading container CSS class |
+| `emptyStateTextClass` | string | `'field-secondary-label-md'` | Empty/loading text CSS class |
+
+### Output Events
+- `hasDataChange: EventEmitter<boolean>` - Emitted when other nationalities list has data or not.
+- `isLoadingChanged: EventEmitter<boolean>` - Emitted when loading state changes.
+
+## Profile Bank Information Widget
+
+### Usage
+```html
+<hr-profile-bank-information-widget
+  [baseUrl]="baseUrl"
+  [currencyCode]="currencyCode"
+  [currencyDecimals]="currencyDecimals"
+  (isLoadingChanged)="onBankLoadingChanged($event)">
+</hr-profile-bank-information-widget>
+```
+
+### Input Properties
+| Input | Type | Default Value | Description |
+|-------|------|---------------|-------------|
+| `baseUrl` | string | `''` | Base URL for API calls (required) |
+| `currencyCode` | string | `''` | Currency code shown with transfer amount |
+| `currencyDecimals` | number | `2` | Decimal precision for transfer amount formatting |
+| `sectionTitle` | string | `'BankInformation'` | Section title translation key |
+| `sectionHeaderVisibility` | boolean | `true` | Show or hide the section header |
+| `language` | string | `'en'` | Language used for RTL behavior (`'ar'` enables RTL) |
+| `bankInformationIcon` | IconDefinition | `faMoneyCheckDollarPen` | Header icon |
+| `emptyStateContainerClass` | string | `'d-flex flex-column justify-content-center align-items-center my-5'` | Empty/loading container CSS class |
+| `emptyStateTextClass` | string | `'field-secondary-label-md'` | Empty/loading text CSS class |
+
+### Output Events
+- `isLoadingChanged: EventEmitter<boolean>` - Emitted when loading state changes.
+
+### Notes
+
+- All profile widgets support extensive style class overrides similar to other widgets in this package.
+- During loading, widgets display section-based loading captions (for example: `Main is loading...`).