@skysoftware-co/bayan-hr-widgets-ui 1.0.33 → 1.0.35

package/README.md

@@ -31,7 +31,7 @@ components:
 1. My Main Details Widget
 2. My Upcoming Events Widget
 3. My Calendar Widget
-
+ 
 ## Dependencies
 This library depends on `@skysoftware-co/bayan-components-ui` package which provides:
 - Employee Badge Component
@@ -243,6 +243,7 @@ This component displays an employee calendar showing vacations, public holidays,
 |-------|------|---------------|-------------|
 | `baseUrl` | string | `''` | Base URL for API calls |
 | `headerContainerClass` | string | `''` | Additional CSS class for the header container |
+| `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. |
 | `publicHolidayColor` | string | from `HRConstantsService`: `'#249EA0'` | Color for public holidays |
 | `dayOffColor` | string | from `HRConstantsService`: `'#FCCF5A'` | Color for days off |
 | `eventsColor` | string | from `HRConstantsService`: `'#e67e0f'` | Color for events |
@@ -271,15 +272,15 @@ The component calls `GET {baseUrl}/hr/employee-portal/calendar` with query param
 - Header: `api-version: 2`
 
 
-## My Next Week Vacation Insights Widget Component
+## My Vacation Team Widget Component
 
 ### Usage
 ```html
-<hr-my-next-week-vacation-insights-widget
+<hr-my-vacation-team-widget
   [baseUrl]="environment.baseUrl"
   [showProperty]="true"
   (isLoadingChanged)="onLoadingChanged($event)">
-</hr-my-next-week-vacation-insights-widget>
+</hr-my-vacation-team-widget>
 ```
 
 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.
@@ -289,22 +290,20 @@ This component displays a "Next Week Vacation Insights" card showing two badges:
 |-------|------|---------------|-------------|
 | `baseUrl` | string | `''` | Base URL for API calls |
 | `showProperty` | boolean | `false` | Show employee property badge in the popup grid |
-| `cardClass` | string | `'card rounded rounded-4 card-shadow border-top-0 h-100 p-4'` | Card container CSS class |
-| `titleClass` | string | `'table-header-lg fw-meduim mb-3 mt-2'` | Card title CSS class |
+| `cardClass` | string | `'card rounded rounded-4 card-shadow p-16 border-top-0 h-100 p-4'` | Card container CSS class |
+| `titleClass` | string | `'table-header-lg fw-meduim'` | Card title CSS class |
 | `valueClass` | string | `'fs-24 mt-1 link-dark hover-primary text-decoration-none'` | Badge value CSS class (clickable) |
 | `disabledValueClass` | string | `'fs-24 mt-1 text-muted pe-none text-decoration-none'` | Badge value CSS class when count is 0 |
-| `upcomingContainerClass` | string | `'border-start border-5 mb-4'` | Upcoming vacations badge container CSS class |
+| `upcomingContainerClass` | string | `'border-start border-5 mb-3'` | Upcoming vacations badge container CSS class |
 | `expectedContainerClass` | string | `'border-start border-5'` | Expected to return badge container CSS class |
-| `firstRowClass` | string | `'mb-4'` | CSS class for the first badge row wrapper |
-| `secondRowClass` | string | `'mt-3'` | CSS class for the second badge row wrapper |
 
 ### Output Events
 - `isLoadingChanged: EventEmitter<boolean>` - Emitted when loading state changes
 
 ### API Endpoints
-- **Summary**: `GET {baseUrl}/hr/widgets/me/team/next-week-vacation-insights/summary?ShowDirectSubordinatesOnly=false`
-- **Upcoming list**: `GET {baseUrl}/hr/widgets/me/team/next-week-vacation-insights/upcoming-vacations`
-- **Expected to return list**: `GET {baseUrl}/hr/widgets/me/team/next-week-vacation-insights/expected-to-return`
+- **Summary**: `GET {baseUrl}/hr/widgets/me/team/subordinates/vacations/summary?ShowDirectSubordinatesOnly=false`
+- **Upcoming list**: `GET {baseUrl}/hr/widgets/me/team/subordinates/vacations/upcoming`
+- **Expected to return list**: `GET {baseUrl}/hr/widgets/me/team/subordinates/vacations/expected-to-return`
 
 ## Profile Widgets
 
@@ -345,6 +344,92 @@ The package also exports profile-focused widgets used in the employee profile pa
 - `isLoadingChanged: EventEmitter<boolean>` - Emitted when loading state changes.
 - `errorOccurred: EventEmitter<string>` - Emitted when API request fails.
 
+## Profile Experiences Widget
+
+### Usage
+```html
+<hr-profile-experiences-widget
+  [baseUrl]="baseUrl"
+  (isLoadingChanged)="onExperiencesLoadingChanged($event)">
+</hr-profile-experiences-widget>
+```
+
+### Input Properties
+| Input | Type | Default Value | Description |
+|-------|------|---------------|-------------|
+| `baseUrl` | string | `''` | Base URL for API calls. |
+| `sectionTitle` | string | `'experiences'` | Section title translation key. |
+| `experienceIcon` | IconDefinition | `faUsersRays` | Header icon. |
+| `viewIcon` | IconDefinition | `faEye` | Attachment view icon. |
+| `downloadIcon` | IconDefinition | `faFolderArrowDown` | Attachment download icon. |
+| `headerIconClass` | string | `'primary-icon-xl'` | Header icon CSS class. |
+| `headerTextClass` | string | `'fs-16 mt-2 text-secondary'` | Header text CSS class. |
+| `headerDividerClass` | string | `'flex-grow-1 ms-2'` | Header divider CSS class. |
+| `rowClass` | string | `'mt-4'` | Main row CSS class. |
+| `rowMarginBottomClass` | string | `'mb-5'` | Bottom spacing class when experiences exist. |
+| `rowMarginBottomEmptyClass` | string | `'mb-4'` | Bottom spacing class when list is empty. |
+| `headerRowClass` | string | `'row col-10'` | Header labels row CSS class. |
+| `actionsSpacerClass` | string | `'col-2'` | Spacer column class between labels and actions area. |
+| `itemRowClass` | string | `'row'` | Backward-compatible row class input (not used in current template loop). |
+| `itemColumnsWrapperClass` | string | `'row col-10 mt-3'` | Per-item columns wrapper CSS class. |
+| `itemColumnClass` | string | `'col-3'` | Column CSS class. |
+| `labelClass` | string | `'field-secondary-label-sm text-ellipsis-one-line'` | Header label CSS class. |
+| `valueClass` | string | `'text-dark-gray fs-14 text-ellipsis-one-line'` | Value text CSS class. |
+| `actionsColumnClass` | string | `'col-2 align-items-end mt-3'` | Attachment action column CSS class. |
+| `viewIconClass` | string | `'fs-15 text-dark cursor-pointer'` | View icon CSS class. |
+| `downloadIconClass` | string | `'fs-15 mx-3 text-dark cursor-pointer'` | Download icon CSS class. |
+| `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.
+- `attachmentViewed: EventEmitter<any>` - Emitted when attachment view icon is clicked.
+- `attachmentDownloaded: EventEmitter<any>` - Emitted when attachment download icon is clicked.
+- `errorOccurred: EventEmitter<string>` - Emitted when API request fails.
+
+## Profile Degrees Widget
+
+### Usage
+```html
+<hr-profile-degrees-widget
+  [baseUrl]="baseUrl"
+  (isLoadingChanged)="onDegreesLoadingChanged($event)">
+</hr-profile-degrees-widget>
+```
+
+### Input Properties
+| Input | Type | Default Value | Description |
+|-------|------|---------------|-------------|
+| `baseUrl` | string | `''` | Base URL for API calls. |
+| `sectionTitle` | string | `'Degrees'` | Section title translation key. |
+| `degreesIcon` | IconDefinition | `faFileCertificate` | Header icon. |
+| `viewIcon` | IconDefinition | `faEye` | Attachment view icon. |
+| `downloadIcon` | IconDefinition | `faFolderArrowDown` | Attachment download icon. |
+| `headerIconClass` | string | `'primary-icon-xl'` | Header icon CSS class. |
+| `headerTextClass` | string | `'fs-16 mt-2 text-secondary'` | Header text CSS class. |
+| `headerDividerClass` | string | `'flex-grow-1 ms-2'` | Header divider CSS class. |
+| `rowClass` | string | `'mt-4'` | Main row CSS class. |
+| `rowMarginBottomClass` | string | `'mb-5'` | Bottom spacing class when degrees exist. |
+| `rowMarginBottomEmptyClass` | string | `'mb-4'` | Bottom spacing class when list is empty. |
+| `headerRowClass` | string | `'row col-10'` | Header labels row CSS class. |
+| `actionsSpacerClass` | string | `'col-2'` | Spacer column class between labels and actions area. |
+| `itemRowClass` | string | `'row'` | Backward-compatible row class input (not used in current template loop). |
+| `itemColumnsWrapperClass` | string | `'row col-10 mt-3'` | Per-item columns wrapper CSS class. |
+| `itemColumnClass` | string | `'col-3'` | Column CSS class. |
+| `labelClass` | string | `'field-secondary-label-sm text-ellipsis-one-line'` | Header label CSS class. |
+| `valueClass` | string | `'text-dark-gray fs-14 text-ellipsis-one-line'` | Value text CSS class. |
+| `actionsColumnClass` | string | `'col-2 align-items-end mt-3'` | Attachment action column CSS class. |
+| `viewIconClass` | string | `'fs-15 text-dark cursor-pointer'` | View icon CSS class. |
+| `downloadIconClass` | string | `'fs-15 mx-3 text-dark cursor-pointer'` | Download icon CSS class. |
+| `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.
+- `attachmentViewed: EventEmitter<any>` - Emitted when attachment view icon is clicked.
+- `attachmentDownloaded: EventEmitter<any>` - Emitted when attachment download icon is clicked.
+- `errorOccurred: EventEmitter<string>` - Emitted when API request fails.
+
 ## Profile Personal Info Contact Widget
 
 ### Usage

package/fesm2022/skysoftware-co-bayan-hr-widgets-ui.mjs

@@ -11,7 +11,7 @@ import { SkyShortcutIconComponent, SkySectionDividerComponent, SkyEmptyDesignCar
 import * as i1 from '@angular/common/http';
 import { HttpParams } from '@angular/common/http';
 import { map, shareReplay, catchError, throwError, lastValueFrom } from 'rxjs';
-import { faCakeCandles, faTreePalm, faCalendarStar, faMoneyCheckDollarPen, faMemoCircleInfo, faPhone, faBolt, faLanguage, faEarthAfrica, faHouse, faFileSignature, faSackDollar, faEnvelopeOpenDollar, faXmark, faFolderArrowDown, faUsersRays, faFileCertificate } from '@fortawesome/pro-light-svg-icons';
+import { faCakeCandles, faTreePalm, faCalendarStar, faMoneyCheckDollarPen, faMemoCircleInfo, faPhone, faBolt, faLanguage, faEarthAfrica, faHouse, faFileSignature, faSackDollar, faEnvelopeOpenDollar, faXmark, faFolderArrowDown, faUsersRays, faFileCertificate, faUsersLine } from '@fortawesome/pro-light-svg-icons';
 import * as i2 from 'devextreme-angular/core';
 import { faCircle, faCalendarDays, faEye } from '@fortawesome/pro-regular-svg-icons';
 import moment from 'moment';
@@ -670,6 +670,8 @@ var Employer = "Employeur";
 var TerminationReason = "Motif de fin de service";
 var ThereIsNoDegreesYet = "Il n'y a pas encore de diplomes";
 var ThereIsNoExperiencesYet = "Il n'y a pas encore d'experiences";
+var ThereIsNoDependentsYet = "Il n'y a pas encore de personnes à charge";
+var DependentTypeName = "Type de personne à charge";
 var fr = {
 	ReportingTo: ReportingTo,
 	NotAnknown: NotAnknown,
@@ -791,7 +793,9 @@ var fr = {
 	Employer: Employer,
 	TerminationReason: TerminationReason,
 	ThereIsNoDegreesYet: ThereIsNoDegreesYet,
-	ThereIsNoExperiencesYet: ThereIsNoExperiencesYet
+	ThereIsNoExperiencesYet: ThereIsNoExperiencesYet,
+	ThereIsNoDependentsYet: ThereIsNoDependentsYet,
+	DependentTypeName: DependentTypeName
 };
 
 const BUILT_IN_LEXICONS = { en, ar, fr };
@@ -1112,6 +1116,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                 }]
         }] });
 
+class ProfileEmployeeDependentsCach {
+    baseUrl = '';
+    dependents$ = null;
+    clear() {
+        this.baseUrl = '';
+    }
+    ensureBaseUrl(baseUrl) {
+        if (this.baseUrl && this.baseUrl !== baseUrl) {
+            this.clear();
+        }
+        this.baseUrl = baseUrl;
+    }
+    setDependents(baseUrl, value) {
+        this.ensureBaseUrl(baseUrl);
+        this.dependents$ = value;
+    }
+    getDependents(baseUrl) {
+        return this.baseUrl === baseUrl ? this.dependents$ : null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ProfileEmployeeDependentsCach, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ProfileEmployeeDependentsCach, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ProfileEmployeeDependentsCach, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
 class HRSelfWidgetsService {
     http;
     bankInformationCacheService;
@@ -1119,14 +1152,16 @@ class HRSelfWidgetsService {
     jobInformationCacheService;
     personalInformationCacheService;
     qualificationsCacheService;
+    profileEmployeeDependentsCachService;
     headers = { 'api-version': '1' };
-    constructor(http, bankInformationCacheService, entitlementsCacheService, jobInformationCacheService, personalInformationCacheService, qualificationsCacheService) {
+    constructor(http, bankInformationCacheService, entitlementsCacheService, jobInformationCacheService, personalInformationCacheService, qualificationsCacheService, profileEmployeeDependentsCachService) {
         this.http = http;
         this.bankInformationCacheService = bankInformationCacheService;
         this.entitlementsCacheService = entitlementsCacheService;
         this.jobInformationCacheService = jobInformationCacheService;
         this.personalInformationCacheService = personalInformationCacheService;
         this.qualificationsCacheService = qualificationsCacheService;
+        this.profileEmployeeDependentsCachService = profileEmployeeDependentsCachService;
     }
     getMainDetails(baseUrl) {
         return this.http.get(`${baseUrl}/hr/widgets/me/main-details`, {
@@ -1431,6 +1466,22 @@ class HRSelfWidgetsService {
         this.qualificationsCacheService.setDegrees(baseUrl, request$);
         return request$;
     }
+    getEmployeeDependents(baseUrl, forceRefresh = false) {
+        if (!forceRefresh) {
+            const cachedRequest$ = this.profileEmployeeDependentsCachService.getDependents(baseUrl);
+            if (cachedRequest$) {
+                return cachedRequest$;
+            }
+        }
+        const request$ = this.http
+            .get(`${baseUrl}/hr/widgets/me/profile/dependents`, { headers: this.headers })
+            .pipe(map((response) => response?.ResponseData ?? []), shareReplay(1), catchError((error) => {
+            this.profileEmployeeDependentsCachService.clear();
+            return throwError(() => error);
+        }));
+        this.profileEmployeeDependentsCachService.setDependents(baseUrl, request$);
+        return request$;
+    }
     getEmployeeExperiences(baseUrl, forceRefresh = false) {
         if (!forceRefresh) {
             const cached = this.qualificationsCacheService.getExperiences(baseUrl);
@@ -1446,7 +1497,7 @@ class HRSelfWidgetsService {
         this.qualificationsCacheService.setExperiences(baseUrl, request$);
         return request$;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: HRSelfWidgetsService, deps: [{ token: i1.HttpClient }, { token: BankInformationCacheService }, { token: EntitlementsCacheService }, { token: JobInformationCacheService }, { token: PersonalInformationCacheService }, { token: QualificationsCacheService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: HRSelfWidgetsService, deps: [{ token: i1.HttpClient }, { token: BankInformationCacheService }, { token: EntitlementsCacheService }, { token: JobInformationCacheService }, { token: PersonalInformationCacheService }, { token: QualificationsCacheService }, { token: ProfileEmployeeDependentsCach }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: HRSelfWidgetsService, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: HRSelfWidgetsService, decorators: [{
@@ -1454,7 +1505,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: BankInformationCacheService }, { type: EntitlementsCacheService }, { type: JobInformationCacheService }, { type: PersonalInformationCacheService }, { type: QualificationsCacheService }] });
+        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: BankInformationCacheService }, { type: EntitlementsCacheService }, { type: JobInformationCacheService }, { type: PersonalInformationCacheService }, { type: QualificationsCacheService }, { type: ProfileEmployeeDependentsCach }] });
 
 class HRConstantsService {
     defaultVacationBalanceColor = '#727070';
@@ -2545,11 +2596,11 @@ class HRInfoFieldComponent {
     valueClass = 'fs-14 fw-medium';
     fallbackValue = '—';
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: HRInfoFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: HRInfoFieldComponent, isStandalone: true, selector: "hr-info-field", inputs: { labelKey: "labelKey", value: "value", labelClass: "labelClass", valueClass: "valueClass", fallbackValue: "fallbackValue" }, ngImport: i0, template: "<div [ngClass]=\"labelClass\">{{labelKey | HRTranslate}}</div>\r\n<div [ngClass]=\"valueClass\">{{value || fallbackValue}}</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: HRTranslatePipe, name: "HRTranslate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: HRInfoFieldComponent, isStandalone: true, selector: "hr-info-field", inputs: { labelKey: "labelKey", value: "value", labelClass: "labelClass", valueClass: "valueClass", fallbackValue: "fallbackValue" }, ngImport: i0, template: "<div [ngClass]=\"labelClass\">{{labelKey | HRTranslate}}</div>\r\n<div [ngClass]=\"valueClass\" [title]=\"value|| fallbackValue\">{{value || fallbackValue}}</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: HRTranslatePipe, name: "HRTranslate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: HRInfoFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'hr-info-field', standalone: true, imports: [CommonModule, HRTranslatePipe], template: "<div [ngClass]=\"labelClass\">{{labelKey | HRTranslate}}</div>\r\n<div [ngClass]=\"valueClass\">{{value || fallbackValue}}</div>\r\n" }]
+            args: [{ selector: 'hr-info-field', standalone: true, imports: [CommonModule, HRTranslatePipe], template: "<div [ngClass]=\"labelClass\">{{labelKey | HRTranslate}}</div>\r\n<div [ngClass]=\"valueClass\" [title]=\"value|| fallbackValue\">{{value || fallbackValue}}</div>\r\n" }]
         }], propDecorators: { labelKey: [{
                 type: Input,
                 args: [{ required: true }]
@@ -3983,6 +4034,88 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                 type: Output
             }] } });
 
+class WidgetCardComponent {
+    cardClass = 'bg-white shadow-sm p-3 border-1 border';
+    height = 110;
+    contentTemplate;
+    context;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: WidgetCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: WidgetCardComponent, isStandalone: true, selector: "hr-widget-card", inputs: { cardClass: "cardClass", height: "height", contentTemplate: "contentTemplate", context: "context" }, ngImport: i0, template: "<div [class]=\"cardClass\" [style.height.px]=\"height\" style=\"overflow: hidden;\">\n  <ng-container *ngTemplateOutlet=\"contentTemplate; context: context\">\n  </ng-container>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: WidgetCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'hr-widget-card', standalone: true, imports: [CommonModule], template: "<div [class]=\"cardClass\" [style.height.px]=\"height\" style=\"overflow: hidden;\">\n  <ng-container *ngTemplateOutlet=\"contentTemplate; context: context\">\n  </ng-container>\n</div>\n" }]
+        }], propDecorators: { cardClass: [{
+                type: Input
+            }], height: [{
+                type: Input
+            }], contentTemplate: [{
+                type: Input
+            }], context: [{
+                type: Input
+            }] } });
+
+class DependentsWidgetComponent {
+    service;
+    baseUrl = '';
+    sectionTitle = 'Dependents';
+    icon = faUsersLine;
+    headerIconClass = 'primary-icon-xl';
+    headerTextClass = 'fs-16 mt-2 text-secondary';
+    headerDividerClass = 'flex-grow-1 ms-2';
+    emptyStateContainerClass = 'd-flex flex-column justify-content-center align-items-center my-5';
+    emptyStateTextClass = 'field-secondary-label-md';
+    dependents = [];
+    isLoading = true;
+    isLoadingChanged = new EventEmitter();
+    constructor(service) {
+        this.service = service;
+    }
+    ngOnInit() {
+        if (!this.baseUrl) {
+            this.isLoading = false;
+            return;
+        }
+        this.isLoadingChanged.emit(true);
+        this.service.getEmployeeDependents(this.baseUrl).subscribe({
+            next: (res) => {
+                this.dependents = res ?? [];
+                this.isLoading = false;
+                this.isLoadingChanged.emit(false);
+            },
+            error: () => {
+                this.dependents = [];
+                this.isLoading = false;
+                this.isLoadingChanged.emit(false);
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: DependentsWidgetComponent, deps: [{ token: HRSelfWidgetsService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: DependentsWidgetComponent, isStandalone: true, selector: "hr-profile-dependents-widget", inputs: { baseUrl: "baseUrl", sectionTitle: "sectionTitle", icon: "icon", headerIconClass: "headerIconClass", headerTextClass: "headerTextClass", headerDividerClass: "headerDividerClass", emptyStateContainerClass: "emptyStateContainerClass", emptyStateTextClass: "emptyStateTextClass" }, outputs: { isLoadingChanged: "isLoadingChanged" }, ngImport: i0, template: "<sky-section-divider [fontAwesomeIcon]=\"icon\"\r\n                     [text]=\"(sectionTitle | HRTranslate | uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n<div class=\"mt-4\">\r\n  <div class=\"row mb-5\">\r\n    @if(dependents.length){\r\n    @for(d of dependents; track d){\r\n    <div class=\"col-lg-4 col-6 mt-4\">\r\n\r\n      <hr-widget-card [contentTemplate]=\"dependentTemplate\"\r\n                       [context]=\"{ d: d }\"\r\n                       [height]=\"110\">\r\n      </hr-widget-card>\r\n\r\n    </div>\r\n    }\r\n    }\r\n    @else {\r\n\r\n    <sky-empty-design-card [containerClass]=\"emptyStateContainerClass\"\r\n                           [cardBodyClass]=\"''\"\r\n                           [cardBodyContainerClass]=\"''\"\r\n                           [visibleIcon]=\"false\"\r\n                           [visibleQuickAction]=\"false\"\r\n                           [emptyTextClass]=\"emptyStateTextClass\"\r\n                           [emptyText]=\"isLoading ? ((sectionTitle | HRTranslate) + ' ' + ('IsLoading' | HRTranslate)) : ('ThereIsNoDependentsYet' | HRTranslate)\">\r\n    </sky-empty-design-card>\r\n\r\n\r\n    }\r\n  </div>\r\n</div>\r\n\r\n<ng-template #dependentTemplate let-d=\"d\">\r\n  <p class=\"text-dark fs-16 mb-2 d-flex\">\r\n    <span class=\"text-truncate cursor-pointer\" [title]=\"d.DependantName\">\r\n      {{ d.DependentName }}\r\n    </span>\r\n    <span class=\"mx-1\">({{ d.DependentTypeName }})</span>\r\n  </p>\r\n  <p class=\"mb-2 fs-12\">\r\n    <span class=\"text-muted\">{{'BirthDate'|HRTranslate}}: </span>\r\n    <span class=\"text-secondary mx-1\">{{ d.BirthDate | date:'dd/MM/yyyy' }}</span>\r\n  </p>\r\n  <p class=\"mb-0 fs-12\">\r\n    <span class=\"text-muted\">{{'NationalNumber'|HRTranslate }}: </span>\r\n    @if(d.NationalNumber){\r\n    <span class=\"text-secondary mx-1\">{{ d.NationalNumber }}</span>\r\n    } @else {\r\n    <span class=\"text-secondary mx-1\">\u2014</span>\r\n    }\r\n  </p>\r\n</ng-template>\r\n\r\n\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i2$1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i2$1.DatePipe, name: "date" }, { kind: "component", type: WidgetCardComponent, selector: "hr-widget-card", inputs: ["cardClass", "height", "contentTemplate", "context"] }, { kind: "pipe", type: HRTranslatePipe, name: "HRTranslate" }, { kind: "component", type: SkyEmptyDesignCardComponent, selector: "sky-empty-design-card", inputs: ["emptyIcon", "emptyIconClass", "emptyText", "emptyTextClass", "actionTitle", "actionIcon", "actionDisabled", "textColor", "disabledTitleClass", "activeTitleClass", "disabledIconClass", "activeIconClass", "actionClass", "containerClass", "cardBodyClass", "cardBodyContainerClass", "visibleIcon", "visibleQuickAction"], outputs: ["onActionClick"] }, { kind: "component", type: SkySectionDividerComponent, selector: "sky-section-divider", inputs: ["text", "fontAwesomeIcon", "textClass", "dividerClass", "iconClass"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: DependentsWidgetComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'hr-profile-dependents-widget', standalone: true, imports: [CommonModule, WidgetCardComponent, HRTranslatePipe, SkyEmptyDesignCardComponent, SkySectionDividerComponent], template: "<sky-section-divider [fontAwesomeIcon]=\"icon\"\r\n                     [text]=\"(sectionTitle | HRTranslate | uppercase)\"\r\n                     [iconClass]=\"headerIconClass\"\r\n                     [textClass]=\"headerTextClass\"\r\n                     [dividerClass]=\"headerDividerClass\">\r\n</sky-section-divider>\r\n\r\n<div class=\"mt-4\">\r\n  <div class=\"row mb-5\">\r\n    @if(dependents.length){\r\n    @for(d of dependents; track d){\r\n    <div class=\"col-lg-4 col-6 mt-4\">\r\n\r\n      <hr-widget-card [contentTemplate]=\"dependentTemplate\"\r\n                       [context]=\"{ d: d }\"\r\n                       [height]=\"110\">\r\n      </hr-widget-card>\r\n\r\n    </div>\r\n    }\r\n    }\r\n    @else {\r\n\r\n    <sky-empty-design-card [containerClass]=\"emptyStateContainerClass\"\r\n                           [cardBodyClass]=\"''\"\r\n                           [cardBodyContainerClass]=\"''\"\r\n                           [visibleIcon]=\"false\"\r\n                           [visibleQuickAction]=\"false\"\r\n                           [emptyTextClass]=\"emptyStateTextClass\"\r\n                           [emptyText]=\"isLoading ? ((sectionTitle | HRTranslate) + ' ' + ('IsLoading' | HRTranslate)) : ('ThereIsNoDependentsYet' | HRTranslate)\">\r\n    </sky-empty-design-card>\r\n\r\n\r\n    }\r\n  </div>\r\n</div>\r\n\r\n<ng-template #dependentTemplate let-d=\"d\">\r\n  <p class=\"text-dark fs-16 mb-2 d-flex\">\r\n    <span class=\"text-truncate cursor-pointer\" [title]=\"d.DependantName\">\r\n      {{ d.DependentName }}\r\n    </span>\r\n    <span class=\"mx-1\">({{ d.DependentTypeName }})</span>\r\n  </p>\r\n  <p class=\"mb-2 fs-12\">\r\n    <span class=\"text-muted\">{{'BirthDate'|HRTranslate}}: </span>\r\n    <span class=\"text-secondary mx-1\">{{ d.BirthDate | date:'dd/MM/yyyy' }}</span>\r\n  </p>\r\n  <p class=\"mb-0 fs-12\">\r\n    <span class=\"text-muted\">{{'NationalNumber'|HRTranslate }}: </span>\r\n    @if(d.NationalNumber){\r\n    <span class=\"text-secondary mx-1\">{{ d.NationalNumber }}</span>\r\n    } @else {\r\n    <span class=\"text-secondary mx-1\">\u2014</span>\r\n    }\r\n  </p>\r\n</ng-template>\r\n\r\n\r\n" }]
+        }], ctorParameters: () => [{ type: HRSelfWidgetsService }], propDecorators: { baseUrl: [{
+                type: Input
+            }], sectionTitle: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], headerIconClass: [{
+                type: Input
+            }], headerTextClass: [{
+                type: Input
+            }], headerDividerClass: [{
+                type: Input
+            }], emptyStateContainerClass: [{
+                type: Input
+            }], emptyStateTextClass: [{
+                type: Input
+            }], isLoadingChanged: [{
+                type: Output
+            }] } });
+
 /*
  * Public API Surface of shared-ui
  */
@@ -3991,5 +4124,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { EventOption, EventTypeEnum, HRCardHeaderComponent, HRConstantsService, HREmployeeCalendarComponent, HRHighlightPipe, HRTranslatePipe, HRTranslateService, MainWidgetShortcut, MyCalendarWidgetComponent, MyMainDetailsWidgetComponent, MyNextWeekVacationInsightsWidgetComponent, MyUpcomingEventsWidgetComponent, ProfileBankInfoWidgetComponent, ProfileDegreesWidgetComponent, ProfileExperiencesWidgetComponent, ProfileJobInfoContractWidgetComponent, ProfileJobInfoMainWidgetComponent, ProfileJobInfoSalaryWidgetComponent, ProfileJobInfoServiceChargeWidgetComponent, ProfilePersonalInfoAddressWidgetComponent, ProfilePersonalInfoContactWidgetComponent, ProfilePersonalInfoLanguagesWidgetComponent, ProfilePersonalInfoMainWidgetComponent, ProfilePersonalInfoOtherNationalitiesWidgetComponent, PublicHolidayWeekContext, RelativeDay, ScheduleVacationTypes, ServiceChargeEntitlementMode, VacationPopupType };
+export { DependentsWidgetComponent, EventOption, EventTypeEnum, HRCardHeaderComponent, HRConstantsService, HREmployeeCalendarComponent, HRHighlightPipe, HRTranslatePipe, HRTranslateService, MainWidgetShortcut, MyCalendarWidgetComponent, MyMainDetailsWidgetComponent, MyNextWeekVacationInsightsWidgetComponent, MyUpcomingEventsWidgetComponent, ProfileBankInfoWidgetComponent, ProfileDegreesWidgetComponent, ProfileExperiencesWidgetComponent, ProfileJobInfoContractWidgetComponent, ProfileJobInfoMainWidgetComponent, ProfileJobInfoSalaryWidgetComponent, ProfileJobInfoServiceChargeWidgetComponent, ProfilePersonalInfoAddressWidgetComponent, ProfilePersonalInfoContactWidgetComponent, ProfilePersonalInfoLanguagesWidgetComponent, ProfilePersonalInfoMainWidgetComponent, ProfilePersonalInfoOtherNationalitiesWidgetComponent, PublicHolidayWeekContext, RelativeDay, ScheduleVacationTypes, ServiceChargeEntitlementMode, VacationPopupType };
 //# sourceMappingURL=skysoftware-co-bayan-hr-widgets-ui.mjs.map