From 80a70cf7892ecf812981dbda9d51c6ebbd379f63 Mon Sep 17 00:00:00 2001
From: Ehsan Rezaei <ehsan.rezaei@hyland.com>
Date: Fri, 9 Aug 2024 10:32:33 +0200
Subject: [PATCH] AAE-23830 Label for people component (#10064)

* AAE-23830 Label for people component

* AAE-23830 Managed to load label conditionally
---
 .../widgets/people/people-cloud.widget.html         |  1 -
 .../people/components/people-cloud.component.html   |  4 ++--
 .../components/people-cloud.component.spec.ts       | 13 +++++++------
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/people/people-cloud.widget.html b/lib/process-services-cloud/src/lib/form/components/widgets/people/people-cloud.widget.html
index 59761fd6bf..dd3226de28 100644
--- a/lib/process-services-cloud/src/lib/form/components/widgets/people/people-cloud.widget.html
+++ b/lib/process-services-cloud/src/lib/form/components/widgets/people/people-cloud.widget.html
@@ -7,7 +7,6 @@
         <adf-cloud-people
             [preSelectUsers]="preSelectUsers"
             [appName]="appName"
-            [title]="title"
             [readOnly]="field.readOnly"
             [validate]="validate"
             [searchUserCtrl]="search"
diff --git a/lib/process-services-cloud/src/lib/people/components/people-cloud.component.html b/lib/process-services-cloud/src/lib/people/components/people-cloud.component.html
index bb964142fa..fed2536b68 100644
--- a/lib/process-services-cloud/src/lib/people/components/people-cloud.component.html
+++ b/lib/process-services-cloud/src/lib/people/components/people-cloud.component.html
@@ -6,7 +6,8 @@
         class="adf-people-cloud"
         [class.adf-invalid]="hasError() && isDirty()"
     >
-        <ng-content select="[label]"></ng-content>
+        <ng-content *ngIf="!title" select="[label]"></ng-content>
+        <mat-label *ngIf="title">{{ title | translate }}</mat-label>
         <mat-chip-grid #userMultipleChipList [disabled]="isReadonly() || isValidationLoading()" data-automation-id="adf-cloud-people-chip-list">
             <mat-chip-row
                 *ngFor="let user of selectedUsers"
@@ -27,7 +28,6 @@
                    [formControl]="searchUserCtrl"
                    [matAutocomplete]="auto"
                    [matChipInputFor]="userMultipleChipList"
-                   [placeholder]="title | translate"
                    [required]="required"
                    (focus)="setFocus(true)"
                    (blur)="setFocus(false); markAsTouched()"
diff --git a/lib/process-services-cloud/src/lib/people/components/people-cloud.component.spec.ts b/lib/process-services-cloud/src/lib/people/components/people-cloud.component.spec.ts
index 8dc88236d4..a8217348b8 100644
--- a/lib/process-services-cloud/src/lib/people/components/people-cloud.component.spec.ts
+++ b/lib/process-services-cloud/src/lib/people/components/people-cloud.component.spec.ts
@@ -30,6 +30,7 @@ import { HarnessLoader } from '@angular/cdk/testing';
 import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
 import { MatChipGridHarness, MatChipHarness } from '@angular/material/chips/testing';
 import { MatInputHarness } from '@angular/material/input/testing';
+import { MatFormFieldHarness } from '@angular/material/form-field/testing';
 
 describe('PeopleCloudComponent', () => {
     let loader: HarnessLoader;
@@ -92,21 +93,21 @@ describe('PeopleCloudComponent', () => {
         loader = TestbedHarnessEnvironment.loader(fixture);
     });
 
-    it('should populate placeholder when title is present', () => {
+    it('should populate label when title is present', async () => {
         component.title = 'TITLE_KEY';
         fixture.detectChanges();
 
-        const inputElement = element.querySelector<HTMLInputElement>('[data-automation-id="adf-people-cloud-search-input"]');
+        const inputField = await loader.getHarness(MatFormFieldHarness.with({ selector: '.adf-people-cloud' }));
 
-        expect(inputElement.placeholder).toEqual('TITLE_KEY');
+        expect(await inputField.getLabel()).toEqual('TITLE_KEY');
     });
 
-    it('should not populate placeholder when title is not present', () => {
+    it('should not populate label when title is not present', async () => {
         fixture.detectChanges();
 
-        const inputElement = element.querySelector<HTMLInputElement>('[data-automation-id="adf-people-cloud-search-input"]');
+        const inputField = await loader.getHarness(MatFormFieldHarness.with({ selector: '.adf-people-cloud' }));
 
-        expect(inputElement.placeholder).toEqual('');
+        expect(await inputField.getLabel()).toBeNull();
     });
 
     describe('Search user', () => {