@skysoftware-co/bayan-hr-widgets-ui 2.0.12 → 2.0.13
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.
package/README.md
CHANGED
|
@@ -10,11 +10,11 @@ You can also use `ng generate directive|pipe|service|class|guard|interface|enum|
|
|
|
10
10
|
|
|
11
11
|
## Build
|
|
12
12
|
|
|
13
|
-
Run `ng build
|
|
13
|
+
Run `ng build HRComponents` to build the project. The build artifacts will be stored in the `dist/` directory.
|
|
14
14
|
|
|
15
15
|
## Publishing
|
|
16
16
|
|
|
17
|
-
After building your library with `ng build
|
|
17
|
+
After building your library with `ng build HRComponents`, go to the dist folder `cd dist/shared-ui` and run `npm publish`.
|
|
18
18
|
|
|
19
19
|
## Running unit tests
|
|
20
20
|
|
|
@@ -357,8 +357,12 @@ This popup component displays grouped subordinate employees with search, infinit
|
|
|
357
357
|
|-------|------|---------------|-------------|
|
|
358
358
|
| `baseUrl` | string | required | Base URL for API calls |
|
|
359
359
|
| `pageSize` | number | `100` | Number of records loaded per page |
|
|
360
|
+
| `showGrade` | boolean | `false` | Shows employee grade row in the main info card |
|
|
361
|
+
| `showPropertySymbol` | boolean | `true` | Shows employee property symbol in the main info card |
|
|
360
362
|
| `phoneIcon` | IconDefinition | `faPhone` | Icon used for phone row |
|
|
361
363
|
| `emailIcon` | IconDefinition | `faEnvelope` | Icon used for email row |
|
|
364
|
+
| `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 |
|
|
365
|
+
| `employeeCardHeight` | number | `96` | Fixed employee card height in pixels |
|
|
362
366
|
|
|
363
367
|
### Output Events
|
|
364
368
|
- `isLoadingChanged: EventEmitter<boolean>` - Emitted when initial/reset loading state changes.
|
|
@@ -375,6 +379,7 @@ Usage in template:
|
|
|
375
379
|
<app-employee-main-info-card
|
|
376
380
|
[employeeMainInfo]="employeeInfo"
|
|
377
381
|
[searchValue]="searchValue"
|
|
382
|
+
[showGrade]="false"
|
|
378
383
|
[showPropertySymbol]="true">
|
|
379
384
|
</app-employee-main-info-card>
|
|
380
385
|
```
|
|
@@ -5671,11 +5671,11 @@ class EmployeeMainInfoCardComponent {
|
|
|
5671
5671
|
this.employeeBadge.EmployeePhotoFailed = true;
|
|
5672
5672
|
}
|
|
5673
5673
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: EmployeeMainInfoCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5674
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: EmployeeMainInfoCardComponent, isStandalone: true, selector: "app-employee-main-info-card", inputs: { employeeMainInfo: { classPropertyName: "employeeMainInfo", publicName: "employeeMainInfo", isSignal: true, isRequired: false, transformFunction: null }, searchValue: { classPropertyName: "searchValue", publicName: "searchValue", isSignal: true, isRequired: false, transformFunction: null }, badgeClass: { classPropertyName: "badgeClass", publicName: "badgeClass", isSignal: true, isRequired: false, transformFunction: null }, badgeImageClass: { classPropertyName: "badgeImageClass", publicName: "badgeImageClass", isSignal: true, isRequired: false, transformFunction: null }, badgeWidth: { classPropertyName: "badgeWidth", publicName: "badgeWidth", isSignal: true, isRequired: false, transformFunction: null }, badgeHeight: { classPropertyName: "badgeHeight", publicName: "badgeHeight", isSignal: true, isRequired: false, transformFunction: null }, employeeInfoContainerClass: { classPropertyName: "employeeInfoContainerClass", publicName: "employeeInfoContainerClass", isSignal: true, isRequired: false, transformFunction: null }, employeeDetailsClass: { classPropertyName: "employeeDetailsClass", publicName: "employeeDetailsClass", isSignal: true, isRequired: false, transformFunction: null }, employeeNameContainerClass: { classPropertyName: "employeeNameContainerClass", publicName: "employeeNameContainerClass", isSignal: true, isRequired: false, transformFunction: null }, employeeNameClass: { classPropertyName: "employeeNameClass", publicName: "employeeNameClass", isSignal: true, isRequired: false, transformFunction: null }, employeePositionClass: { classPropertyName: "employeePositionClass", publicName: "employeePositionClass", isSignal: true, isRequired: false, transformFunction: null }, employeeGradeClass: { classPropertyName: "employeeGradeClass", publicName: "employeeGradeClass", isSignal: true, isRequired: false, transformFunction: null }, showGrade: { classPropertyName: "showGrade", publicName: "showGrade", isSignal: true, isRequired: false, transformFunction: null }, showPropertySymbol: { classPropertyName: "showPropertySymbol", publicName: "showPropertySymbol", isSignal: true, isRequired: false, transformFunction: null }, showChangeEmployeeButton: { classPropertyName: "showChangeEmployeeButton", publicName: "showChangeEmployeeButton", isSignal: true, isRequired: false, transformFunction: null }, alignCenter: { classPropertyName: "alignCenter", publicName: "alignCenter", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ChangeEmployeeButtonHandler: "ChangeEmployeeButtonHandler" }, ngImport: i0, template: "@if (employeeMainInfo(); as info) {\r\n <div [class]=\"employeeInfoContainerClass()\" [ngClass]=\"{ 'align-items-center': alignCenter() }\">\r\n <bayan-employee-badge\r\n [badge]=\"employeeBadge\"\r\n [badgeClass]=\"badgeClass()\"\r\n [imageClass]=\"badgeImageClass()\"\r\n [width]=\"badgeWidth()\"\r\n [height]=\"badgeHeight()\"\r\n (employeePhotoError)=\"handleEmployeePhotoError()\"\r\n ></bayan-employee-badge>\r\n\r\n <div [class]=\"employeeDetailsClass()\">\r\n <div [class]=\"employeeNameContainerClass()\">\r\n <div\r\n [class]=\"employeeNameClass()\"\r\n data-bs-toggle=\"tooltip\"\r\n [title]=\"info.EmployeeNumber + ' | ' + info.EmployeeName\"\r\n [innerHTML]=\"info.EmployeeNumber + ' | ' + info.EmployeeName | highlight: searchValue()\"\r\n ></div>\r\n @if (showChangeEmployeeButton()) {\r\n <button type=\"button\" class=\"border-0 ms-2 bg-none\" (click)=\"convertEmployee()\">\r\n <fa-icon [icon]=\"dropDownIcon\" class=\"text-primary fs-5\"></fa-icon>\r\n </button>\r\n }\r\n </div>\r\n @if (info.PositionName != null && info.PositionName != '') {\r\n <div [class]=\"employeePositionClass()\" data-bs-toggle=\"tooltip\" [title]=\"info.PositionName\">\r\n <span [innerHTML]=\"info.PositionName | highlight: searchValue()\"></span>\r\n </div>\r\n }\r\n @if (showGrade() && info.GradeName != null) {\r\n <div [class]=\"employeeGradeClass()\" [title]=\"info.GradeName\">\r\n <span [innerHTML]=\"info.GradeName | highlight: searchValue()\"></span>\r\n </div>\r\n }\r\n <div\r\n class=\"d-flex text-dark-gray mb-0\"\r\n data-bs-toggle=\"tooltip\"\r\n [title]=\"showPropertySymbol() ? info.PropertySymbol + ' | ' + info.AdminUnitName : info.AdminUnitName\"\r\n >\r\n <div class=\"fs-12\">\r\n @if (showPropertySymbol()) {\r\n <span class=\"property-badge cursor-pointer me-1\" title=\"{{ info.PropertyName }}\">\r\n <span [innerHTML]=\"info.PropertySymbol | highlight: searchValue()\"></span>\r\n </span>\r\n }\r\n
|
|
5674
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: EmployeeMainInfoCardComponent, isStandalone: true, selector: "app-employee-main-info-card", inputs: { employeeMainInfo: { classPropertyName: "employeeMainInfo", publicName: "employeeMainInfo", isSignal: true, isRequired: false, transformFunction: null }, searchValue: { classPropertyName: "searchValue", publicName: "searchValue", isSignal: true, isRequired: false, transformFunction: null }, badgeClass: { classPropertyName: "badgeClass", publicName: "badgeClass", isSignal: true, isRequired: false, transformFunction: null }, badgeImageClass: { classPropertyName: "badgeImageClass", publicName: "badgeImageClass", isSignal: true, isRequired: false, transformFunction: null }, badgeWidth: { classPropertyName: "badgeWidth", publicName: "badgeWidth", isSignal: true, isRequired: false, transformFunction: null }, badgeHeight: { classPropertyName: "badgeHeight", publicName: "badgeHeight", isSignal: true, isRequired: false, transformFunction: null }, employeeInfoContainerClass: { classPropertyName: "employeeInfoContainerClass", publicName: "employeeInfoContainerClass", isSignal: true, isRequired: false, transformFunction: null }, employeeDetailsClass: { classPropertyName: "employeeDetailsClass", publicName: "employeeDetailsClass", isSignal: true, isRequired: false, transformFunction: null }, employeeNameContainerClass: { classPropertyName: "employeeNameContainerClass", publicName: "employeeNameContainerClass", isSignal: true, isRequired: false, transformFunction: null }, employeeNameClass: { classPropertyName: "employeeNameClass", publicName: "employeeNameClass", isSignal: true, isRequired: false, transformFunction: null }, employeePositionClass: { classPropertyName: "employeePositionClass", publicName: "employeePositionClass", isSignal: true, isRequired: false, transformFunction: null }, employeeGradeClass: { classPropertyName: "employeeGradeClass", publicName: "employeeGradeClass", isSignal: true, isRequired: false, transformFunction: null }, showGrade: { classPropertyName: "showGrade", publicName: "showGrade", isSignal: true, isRequired: false, transformFunction: null }, showPropertySymbol: { classPropertyName: "showPropertySymbol", publicName: "showPropertySymbol", isSignal: true, isRequired: false, transformFunction: null }, showChangeEmployeeButton: { classPropertyName: "showChangeEmployeeButton", publicName: "showChangeEmployeeButton", isSignal: true, isRequired: false, transformFunction: null }, alignCenter: { classPropertyName: "alignCenter", publicName: "alignCenter", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ChangeEmployeeButtonHandler: "ChangeEmployeeButtonHandler" }, ngImport: i0, template: "@if (employeeMainInfo(); as info) {\r\n <div [class]=\"employeeInfoContainerClass()\" [ngClass]=\"{ 'align-items-center': alignCenter() }\">\r\n <bayan-employee-badge\r\n [badge]=\"employeeBadge\"\r\n [badgeClass]=\"badgeClass()\"\r\n [imageClass]=\"badgeImageClass()\"\r\n [width]=\"badgeWidth()\"\r\n [height]=\"badgeHeight()\"\r\n (employeePhotoError)=\"handleEmployeePhotoError()\"\r\n ></bayan-employee-badge>\r\n\r\n <div [class]=\"employeeDetailsClass()\">\r\n <div [class]=\"employeeNameContainerClass()\">\r\n <div\r\n [class]=\"employeeNameClass()\"\r\n data-bs-toggle=\"tooltip\"\r\n [title]=\"info.EmployeeNumber + ' | ' + info.EmployeeName\"\r\n [innerHTML]=\"info.EmployeeNumber + ' | ' + info.EmployeeName | highlight: searchValue()\"\r\n ></div>\r\n @if (showChangeEmployeeButton()) {\r\n <button type=\"button\" class=\"border-0 ms-2 bg-none\" (click)=\"convertEmployee()\">\r\n <fa-icon [icon]=\"dropDownIcon\" class=\"text-primary fs-5\"></fa-icon>\r\n </button>\r\n }\r\n </div>\r\n @if (info.PositionName != null && info.PositionName != '') {\r\n <div [class]=\"employeePositionClass()\" data-bs-toggle=\"tooltip\" [title]=\"info.PositionName\">\r\n <span [innerHTML]=\"info.PositionName | highlight: searchValue()\"></span>\r\n </div>\r\n }\r\n @if (showGrade() && info.GradeName != null) {\r\n <div [class]=\"employeeGradeClass()\" [title]=\"info.GradeName\">\r\n <span [innerHTML]=\"info.GradeName | highlight: searchValue()\"></span>\r\n </div>\r\n }\r\n <div\r\n class=\"d-flex text-dark-gray mb-0\"\r\n data-bs-toggle=\"tooltip\"\r\n [title]=\"showPropertySymbol() ? info.PropertySymbol + ' | ' + info.AdminUnitName : info.AdminUnitName\"\r\n >\r\n <div class=\"fs-12\">\r\n @if (showPropertySymbol()) {\r\n <span class=\"property-badge cursor-pointer me-1\" title=\"{{ info.PropertyName }}\">\r\n <span [innerHTML]=\"info.PropertySymbol | highlight: searchValue()\"></span>\r\n </span>\r\n }\r\n <span class=\"fw-normal ms-1\" [ngClass]=\"{ 'me-1': isRTL && showPropertySymbol(), 'ms-1': !isRTL && showPropertySymbol() }\" \r\n [title]=\"info.AdminUnitName\" [innerHTML]=\"info.AdminUnitName | highlight: searchValue()\"></span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i2$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: BayanEmployeeBadgeComponent, selector: "bayan-employee-badge", inputs: ["badge", "width", "height", "imageClass", "badgeClass"], outputs: ["employeePhotoError"] }, { kind: "pipe", type: HighlightPipe, name: "highlight" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
5675
5675
|
}
|
|
5676
5676
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: EmployeeMainInfoCardComponent, decorators: [{
|
|
5677
5677
|
type: Component,
|
|
5678
|
-
args: [{ selector: 'app-employee-main-info-card', standalone: true, imports: [FontAwesomeModule, NgClass, BayanEmployeeBadgeComponent, HighlightPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (employeeMainInfo(); as info) {\r\n <div [class]=\"employeeInfoContainerClass()\" [ngClass]=\"{ 'align-items-center': alignCenter() }\">\r\n <bayan-employee-badge\r\n [badge]=\"employeeBadge\"\r\n [badgeClass]=\"badgeClass()\"\r\n [imageClass]=\"badgeImageClass()\"\r\n [width]=\"badgeWidth()\"\r\n [height]=\"badgeHeight()\"\r\n (employeePhotoError)=\"handleEmployeePhotoError()\"\r\n ></bayan-employee-badge>\r\n\r\n <div [class]=\"employeeDetailsClass()\">\r\n <div [class]=\"employeeNameContainerClass()\">\r\n <div\r\n [class]=\"employeeNameClass()\"\r\n data-bs-toggle=\"tooltip\"\r\n [title]=\"info.EmployeeNumber + ' | ' + info.EmployeeName\"\r\n [innerHTML]=\"info.EmployeeNumber + ' | ' + info.EmployeeName | highlight: searchValue()\"\r\n ></div>\r\n @if (showChangeEmployeeButton()) {\r\n <button type=\"button\" class=\"border-0 ms-2 bg-none\" (click)=\"convertEmployee()\">\r\n <fa-icon [icon]=\"dropDownIcon\" class=\"text-primary fs-5\"></fa-icon>\r\n </button>\r\n }\r\n </div>\r\n @if (info.PositionName != null && info.PositionName != '') {\r\n <div [class]=\"employeePositionClass()\" data-bs-toggle=\"tooltip\" [title]=\"info.PositionName\">\r\n <span [innerHTML]=\"info.PositionName | highlight: searchValue()\"></span>\r\n </div>\r\n }\r\n @if (showGrade() && info.GradeName != null) {\r\n <div [class]=\"employeeGradeClass()\" [title]=\"info.GradeName\">\r\n <span [innerHTML]=\"info.GradeName | highlight: searchValue()\"></span>\r\n </div>\r\n }\r\n <div\r\n class=\"d-flex text-dark-gray mb-0\"\r\n data-bs-toggle=\"tooltip\"\r\n [title]=\"showPropertySymbol() ? info.PropertySymbol + ' | ' + info.AdminUnitName : info.AdminUnitName\"\r\n >\r\n <div class=\"fs-12\">\r\n @if (showPropertySymbol()) {\r\n <span class=\"property-badge cursor-pointer me-1\" title=\"{{ info.PropertyName }}\">\r\n <span [innerHTML]=\"info.PropertySymbol | highlight: searchValue()\"></span>\r\n </span>\r\n }\r\n
|
|
5678
|
+
args: [{ selector: 'app-employee-main-info-card', standalone: true, imports: [FontAwesomeModule, NgClass, BayanEmployeeBadgeComponent, HighlightPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (employeeMainInfo(); as info) {\r\n <div [class]=\"employeeInfoContainerClass()\" [ngClass]=\"{ 'align-items-center': alignCenter() }\">\r\n <bayan-employee-badge\r\n [badge]=\"employeeBadge\"\r\n [badgeClass]=\"badgeClass()\"\r\n [imageClass]=\"badgeImageClass()\"\r\n [width]=\"badgeWidth()\"\r\n [height]=\"badgeHeight()\"\r\n (employeePhotoError)=\"handleEmployeePhotoError()\"\r\n ></bayan-employee-badge>\r\n\r\n <div [class]=\"employeeDetailsClass()\">\r\n <div [class]=\"employeeNameContainerClass()\">\r\n <div\r\n [class]=\"employeeNameClass()\"\r\n data-bs-toggle=\"tooltip\"\r\n [title]=\"info.EmployeeNumber + ' | ' + info.EmployeeName\"\r\n [innerHTML]=\"info.EmployeeNumber + ' | ' + info.EmployeeName | highlight: searchValue()\"\r\n ></div>\r\n @if (showChangeEmployeeButton()) {\r\n <button type=\"button\" class=\"border-0 ms-2 bg-none\" (click)=\"convertEmployee()\">\r\n <fa-icon [icon]=\"dropDownIcon\" class=\"text-primary fs-5\"></fa-icon>\r\n </button>\r\n }\r\n </div>\r\n @if (info.PositionName != null && info.PositionName != '') {\r\n <div [class]=\"employeePositionClass()\" data-bs-toggle=\"tooltip\" [title]=\"info.PositionName\">\r\n <span [innerHTML]=\"info.PositionName | highlight: searchValue()\"></span>\r\n </div>\r\n }\r\n @if (showGrade() && info.GradeName != null) {\r\n <div [class]=\"employeeGradeClass()\" [title]=\"info.GradeName\">\r\n <span [innerHTML]=\"info.GradeName | highlight: searchValue()\"></span>\r\n </div>\r\n }\r\n <div\r\n class=\"d-flex text-dark-gray mb-0\"\r\n data-bs-toggle=\"tooltip\"\r\n [title]=\"showPropertySymbol() ? info.PropertySymbol + ' | ' + info.AdminUnitName : info.AdminUnitName\"\r\n >\r\n <div class=\"fs-12\">\r\n @if (showPropertySymbol()) {\r\n <span class=\"property-badge cursor-pointer me-1\" title=\"{{ info.PropertyName }}\">\r\n <span [innerHTML]=\"info.PropertySymbol | highlight: searchValue()\"></span>\r\n </span>\r\n }\r\n <span class=\"fw-normal ms-1\" [ngClass]=\"{ 'me-1': isRTL && showPropertySymbol(), 'ms-1': !isRTL && showPropertySymbol() }\" \r\n [title]=\"info.AdminUnitName\" [innerHTML]=\"info.AdminUnitName | highlight: searchValue()\"></span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n}\r\n" }]
|
|
5679
5679
|
}], ctorParameters: () => [], propDecorators: { employeeMainInfo: [{ type: i0.Input, args: [{ isSignal: true, alias: "employeeMainInfo", required: false }] }], searchValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchValue", required: false }] }], badgeClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "badgeClass", required: false }] }], badgeImageClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "badgeImageClass", required: false }] }], badgeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "badgeWidth", required: false }] }], badgeHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "badgeHeight", required: false }] }], employeeInfoContainerClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "employeeInfoContainerClass", required: false }] }], employeeDetailsClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "employeeDetailsClass", required: false }] }], employeeNameContainerClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "employeeNameContainerClass", required: false }] }], employeeNameClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "employeeNameClass", required: false }] }], employeePositionClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "employeePositionClass", required: false }] }], employeeGradeClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "employeeGradeClass", required: false }] }], showGrade: [{ type: i0.Input, args: [{ isSignal: true, alias: "showGrade", required: false }] }], showPropertySymbol: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPropertySymbol", required: false }] }], showChangeEmployeeButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showChangeEmployeeButton", required: false }] }], alignCenter: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignCenter", required: false }] }], ChangeEmployeeButtonHandler: [{ type: i0.Output, args: ["ChangeEmployeeButtonHandler"] }] } });
|
|
5680
5680
|
|
|
5681
5681
|
class MyTeamWidgetsService {
|