@skysoftware-co/bayan-hr-widgets-ui 2.0.12 → 2.0.14

package/README.md

@@ -10,11 +10,11 @@ You can also use `ng generate directive|pipe|service|class|guard|interface|enum|
 
 ## Build
 
-Run `ng build shared-ui` to build the project. The build artifacts will be stored in the `dist/` directory.
+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 shared-ui`, go to the dist folder `cd dist/shared-ui` and run `npm publish`.
+After building your library with `ng build HRComponents`, go to the dist folder `cd dist/shared-ui` and run `npm publish`.
 
 ## Running unit tests
 
@@ -357,8 +357,12 @@ This popup component displays grouped subordinate employees with search, infinit
 |-------|------|---------------|-------------|
 | `baseUrl` | string | required | Base URL for API calls |
 | `pageSize` | number | `100` | Number of records loaded per page |
+| `showGrade` | boolean | `false` | Shows employee grade row in the main info card |
+| `showPropertySymbol` | boolean | `true` | Shows employee property symbol in the main info card |
 | `phoneIcon` | IconDefinition | `faPhone` | Icon used for phone row |
 | `emailIcon` | IconDefinition | `faEnvelope` | Icon used for email row |
+| `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 |
+| `employeeCardHeight` | number | `96` | Fixed employee card height in pixels |
 
 ### Output Events
 - `isLoadingChanged: EventEmitter<boolean>` - Emitted when initial/reset loading state changes.
@@ -375,6 +379,7 @@ Usage in template:
 <app-employee-main-info-card
   [employeeMainInfo]="employeeInfo"
   [searchValue]="searchValue"
+  [showGrade]="false"
   [showPropertySymbol]="true">
 </app-employee-main-info-card>
 ```

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

@@ -5632,13 +5632,13 @@ class EmployeeMainInfoCardComponent {
     employeeMainInfo = input(null, ...(ngDevMode ? [{ debugName: "employeeMainInfo" }] : /* istanbul ignore next */ []));
     searchValue = input('', ...(ngDevMode ? [{ debugName: "searchValue" }] : /* istanbul ignore next */ []));
     badgeClass = input('badge employee-rounded-badge-xl fs-5', ...(ngDevMode ? [{ debugName: "badgeClass" }] : /* istanbul ignore next */ []));
-    badgeImageClass = input('rounded-circle shadow-lg', ...(ngDevMode ? [{ debugName: "badgeImageClass" }] : /* istanbul ignore next */ []));
+    badgeImageClass = input('rounded-circle', ...(ngDevMode ? [{ debugName: "badgeImageClass" }] : /* istanbul ignore next */ []));
     badgeWidth = input('50px', ...(ngDevMode ? [{ debugName: "badgeWidth" }] : /* istanbul ignore next */ []));
     badgeHeight = input('50px', ...(ngDevMode ? [{ debugName: "badgeHeight" }] : /* istanbul ignore next */ []));
     employeeInfoContainerClass = input('d-flex align-content-center', ...(ngDevMode ? [{ debugName: "employeeInfoContainerClass" }] : /* istanbul ignore next */ []));
     employeeDetailsClass = input('ms-3', ...(ngDevMode ? [{ debugName: "employeeDetailsClass" }] : /* istanbul ignore next */ []));
     employeeNameContainerClass = input('d-flex align-items-center', ...(ngDevMode ? [{ debugName: "employeeNameContainerClass" }] : /* istanbul ignore next */ []));
-    employeeNameClass = input('fs-14 text-dark-gray fw-medium text-ellipsis-one-line', ...(ngDevMode ? [{ debugName: "employeeNameClass" }] : /* istanbul ignore next */ []));
+    employeeNameClass = input('fs-13 text-dark-gray fw-medium text-ellipsis-one-line', ...(ngDevMode ? [{ debugName: "employeeNameClass" }] : /* istanbul ignore next */ []));
     employeePositionClass = input('fs-12 fw-normal text-dark-gray text-ellipsis-one-line mb-1', ...(ngDevMode ? [{ debugName: "employeePositionClass" }] : /* istanbul ignore next */ []));
     employeeGradeClass = input('fs-12 text-dark-gray', ...(ngDevMode ? [{ debugName: "employeeGradeClass" }] : /* istanbul ignore next */ []));
     showGrade = input(false, ...(ngDevMode ? [{ debugName: "showGrade" }] : /* istanbul ignore next */ []));
@@ -5671,11 +5671,11 @@ class EmployeeMainInfoCardComponent {
         this.employeeBadge.EmployeePhotoFailed = true;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: EmployeeMainInfoCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    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, 'ms-1': !isRTL }\" \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 });
+    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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: EmployeeMainInfoCardComponent, decorators: [{
             type: Component,
-            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, 'ms-1': !isRTL }\" \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" }]
+            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" }]
         }], 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"] }] } });
 
 class MyTeamWidgetsService {
@@ -5732,7 +5732,7 @@ class MyTeamPopupComponent {
     switchLabelClass = input('form-check-label mx-2 fs-13', ...(ngDevMode ? [{ debugName: "switchLabelClass" }] : /* istanbul ignore next */ []));
     scrollViewClass = input('position-relative', ...(ngDevMode ? [{ debugName: "scrollViewClass" }] : /* istanbul ignore next */ []));
     emptyStateClass = input('position-absolute top-50 start-50 translate-middle w-100 text-center text-dark-gray fs-14', ...(ngDevMode ? [{ debugName: "emptyStateClass" }] : /* istanbul ignore next */ []));
-    groupHeaderClass = input('fs-14 text-dark pt-2 pb-1', ...(ngDevMode ? [{ debugName: "groupHeaderClass" }] : /* istanbul ignore next */ []));
+    groupHeaderClass = input('fs-13 text-dark pt-2 pb-1', ...(ngDevMode ? [{ debugName: "groupHeaderClass" }] : /* istanbul ignore next */ []));
     employeeCardClass = input('bg-light-gray rounded p-2 mb-2 d-flex align-items-center justify-content-between border-start border-4 border-start-primary', ...(ngDevMode ? [{ debugName: "employeeCardClass" }] : /* istanbul ignore next */ []));
     employeeCardHeight = input('100px', ...(ngDevMode ? [{ debugName: "employeeCardHeight" }] : /* istanbul ignore next */ []));
     contactContainerClass = input('d-flex flex-column gap-1 border-start border-2 ps-3 w-100', ...(ngDevMode ? [{ debugName: "contactContainerClass" }] : /* istanbul ignore next */ []));
@@ -5795,7 +5795,7 @@ class MyTeamPopupComponent {
         return this.hasEmployeeEmail(employee) || this.hasEmployeePhone(employee);
     }
     onSearchChanged(value) {
-        const nextSearchValue = value ?? '';
+        const nextSearchValue = (value ?? '').trim();
         if (nextSearchValue === this.searchValue()) {
             return;
         }
@@ -5812,21 +5812,24 @@ class MyTeamPopupComponent {
             event?.component?.release?.();
             return;
         }
-        const scrollableContainer = event?.element?.querySelector?.('.dx-scrollable-container');
-        const scrollableContent = event?.element?.querySelector?.('.dx-scrollable-content');
-        if (scrollableContainer && scrollableContent && scrollableContent.scrollHeight <= scrollableContainer.clientHeight) {
-            event?.component?.release?.();
-            return;
-        }
-        const scrollTop = event?.component?.scrollOffset?.().top ?? 0;
-        if (scrollTop <= 0) {
-            event?.component?.release?.();
-            return;
-        }
         this.loadPage(false).finally(() => {
             event?.component?.release?.();
         });
     }
+    isScrollContentScrollable() {
+        const scrollableElement = this.dataScrollView?.instance?.element?.();
+        const scrollableContainer = scrollableElement?.querySelector?.('.dx-scrollable-container');
+        const scrollableContent = scrollableElement?.querySelector?.('.dx-scrollable-content');
+        if (!scrollableContainer || !scrollableContent) {
+            return true;
+        }
+        return scrollableContent.scrollHeight > scrollableContainer.clientHeight;
+    }
+    async loadRemainingPagesIfNeeded() {
+        while (this.hasMoreData() && !this.isScrollContentScrollable()) {
+            await this.loadPage(false);
+        }
+    }
     resetState() {
         this.items.set([]);
         this.hasMoreData.set(true);
@@ -5845,7 +5848,10 @@ class MyTeamPopupComponent {
             employees.push(employee);
             groupedMap.set(key, employees);
         }
-        this.items.set(Array.from(groupedMap.entries()).map(([adminUnitName, employees]) => ({ adminUnitName, employees })));
+        const sortedGroups = Array.from(groupedMap.entries())
+            .sort(([firstAdminUnit], [secondAdminUnit]) => firstAdminUnit.localeCompare(secondAdminUnit, undefined, { sensitivity: 'base' }))
+            .map(([adminUnitName, employees]) => ({ adminUnitName, employees }));
+        this.items.set(sortedGroups);
     }
     async loadPage(reset) {
         if (this.isDataLoading() || (!reset && !this.hasMoreData())) {
@@ -5874,6 +5880,7 @@ class MyTeamPopupComponent {
             this.appendEmployees(pageData);
             this.loadedCount += pageData.length;
             this.pageIndex += 1;
+            this.dataScrollView?.instance?.update();
             const hasMore = this.loadedCount < this.totalCount && pageData.length > 0;
             this.hasMoreData.set(hasMore);
         }
@@ -5886,6 +5893,9 @@ class MyTeamPopupComponent {
                 this.isLoading.set(false);
                 this.isLoadingChanged.emit(false);
             }
+            if (!reset) {
+                await this.loadRemainingPagesIfNeeded();
+            }
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MyTeamPopupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });