From c4c72e308897fa34bfd3170084d2a75e0095d1a9 Mon Sep 17 00:00:00 2001
From: Diogo Bastos <50139916+DiogoABastos@users.noreply.github.com>
Date: Mon, 15 Apr 2024 14:53:23 +0100
Subject: [PATCH] AAE-21697 Fix people form widget style (#9555)

---
 .../widgets/people/people-cloud.widget.html   | 38 ++++++++++---------
 .../components/people-cloud.component.html    |  3 +-
 .../components/people-cloud.component.spec.ts |  8 ++--
 3 files changed, 26 insertions(+), 23 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 9776467022..ebf7153b02 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
@@ -1,26 +1,28 @@
 <div class="adf-dropdown-widget {{field.className}}"
      [class.adf-invalid]="!field.isValid && isTouched()" [class.adf-readonly]="field.readOnly" [class.adf-left-label-input-container]="field.leftLabels">
-    <div>
-        <label class="adf-label" [class.adf-left-label]="field.leftLabels" [attr.for]="field.id">{{field.name | translate }}<span class="adf-asterisk" *ngIf="isRequired()">*</span></label>
+     <div *ngIf="field.leftLabels">
+        <label class="adf-label adf-left-label" [attr.for]="field.id">{{field.name | translate }}<span class="adf-asterisk" *ngIf="isRequired()">*</span></label>
     </div>
     <div>
         <adf-cloud-people
-                [preSelectUsers]="preSelectUsers"
-                [appName]="appName"
-                [title]="title"
-                [readOnly]="field.readOnly"
-                [validate]="validate"
-                [searchUserCtrl]="search"
-                [required]="isRequired()"
-                (changedUsers)="onChangedUser($event)"
-                [roles]="roles"
-                [mode]="mode"
-                [groupsRestriction]="groupsRestriction"
-                (blur)="markAsTouched()"
-                [matTooltip]="field.tooltip"
-                matTooltipPosition="above"
-                matTooltipShowDelay="1000">
-            </adf-cloud-people>
+            [preSelectUsers]="preSelectUsers"
+            [appName]="appName"
+            [title]="title"
+            [readOnly]="field.readOnly"
+            [validate]="validate"
+            [searchUserCtrl]="search"
+            [required]="isRequired()"
+            (changedUsers)="onChangedUser($event)"
+            [roles]="roles"
+            [mode]="mode"
+            [groupsRestriction]="groupsRestriction"
+            (blur)="markAsTouched()"
+            [matTooltip]="field.tooltip"
+            matTooltipPosition="above"
+            matTooltipShowDelay="1000"
+        >
+            <label class="adf-label" *ngIf="!field.leftLabels" [attr.for]="field.id" label>{{field.name | translate }}<span class="adf-asterisk" *ngIf="isRequired()">*</span></label>
+        </adf-cloud-people>
         <error-widget [error]="field.validationSummary"></error-widget>
         <error-widget class="adf-dropdown-required-message" *ngIf="isInvalidFieldRequired() && isTouched()"
                     required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
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 bbb342334c..148e95a9fc 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
@@ -1,6 +1,6 @@
 <form>
     <mat-form-field [floatLabel]="'auto'" class="adf-people-cloud" [class.adf-invalid]="hasError() && isDirty()">
-        <mat-label *ngIf="!isReadonly()" id="adf-people-cloud-title-id">{{ title | translate }}</mat-label>
+        <ng-content select="[label]"></ng-content>
         <mat-chip-grid #userMultipleChipList [disabled]="isReadonly() || isValidationLoading()" data-automation-id="adf-cloud-people-chip-list">
             <mat-chip-row
                 *ngFor="let user of selectedUsers"
@@ -21,6 +21,7 @@
                    [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 be230bc26d..8dc88236d4 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
@@ -96,17 +96,17 @@ describe('PeopleCloudComponent', () => {
         component.title = 'TITLE_KEY';
         fixture.detectChanges();
 
-        const matLabel = element.querySelector<HTMLInputElement>('#adf-people-cloud-title-id');
+        const inputElement = element.querySelector<HTMLInputElement>('[data-automation-id="adf-people-cloud-search-input"]');
 
-        expect(matLabel.textContent).toEqual('TITLE_KEY');
+        expect(inputElement.placeholder).toEqual('TITLE_KEY');
     });
 
     it('should not populate placeholder when title is not present', () => {
         fixture.detectChanges();
 
-        const matLabel = element.querySelector<HTMLInputElement>('#adf-people-cloud-title-id');
+        const inputElement = element.querySelector<HTMLInputElement>('[data-automation-id="adf-people-cloud-search-input"]');
 
-        expect(matLabel.textContent).toEqual('');
+        expect(inputElement.placeholder).toEqual('');
     });
 
     describe('Search user', () => {