AAE-21392 Fix dropdown cloud widget style

lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.html

@@ -1,16 +1,12 @@
 <div class="adf-dropdown-widget {{field.className}}"
      [class.adf-invalid]="(!field.isValid && isTouched()) || isRestApiFailed" [class.adf-readonly]="field.readOnly" [class.adf-left-label-input-container]="field.leftLabels">
-    <div class="adf-dropdown-widget-top-labels">
-        <label class="adf-label" [attr.for]="field.id" [class.adf-left-label]="field.leftLabels">{{field.name | translate }}<span class="adf-asterisk"
-            *ngIf="isRequired()">*</span>
-        </label>
-    </div>
     <div>
         <mat-form-field>
-            <mat-label *ngIf="getDefaultOption(list$ | async) as defaultOption">
-                {{ defaultOption.name }}
-            </mat-label>
+            <label class="adf-label" [attr.for]="field.id" [class.adf-left-label]="field.leftLabels">{{field.name | translate }}<span class="adf-asterisk"
+                *ngIf="isRequired()">*</span>
+            </label>
             <mat-select class="adf-select"
+                        *ngIf="list$ | async as options"
                         [id]="field.id"
                         [(ngModel)]="field.value"
                         [disabled]="field.readOnly"
@@ -22,10 +18,11 @@
                         (blur)="markAsTouched()"
                         matTooltipPosition="above"
                         matTooltipShowDelay="1000"
+                        [placeholder]="defaultOption?.name"
                         [multiple]="field.hasMultipleValues">
                 <adf-select-filter-input *ngIf="showInputFilter" (change)="filter$.next($event)"></adf-select-filter-input>
 
-                <mat-option *ngFor="let opt of list$ | async"
+                <mat-option *ngFor="let opt of options"
                             [value]="getOptionValue(opt, field.value)"
                             [id]="opt.id">{{opt.name}}
                 </mat-option>

lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.spec.ts

@@ -298,10 +298,10 @@ describe('DropdownCloudWidgetComponent', () => {
             fixture.detectChanges();
             await fixture.whenStable();
 
-            const dropdownLabel = fixture.debugElement.query(By.css('.adf-dropdown-widget mat-label'));
+            const placeholderElement = fixture.debugElement.query(By.css('.mat-mdc-select-placeholder'));
             selectedValueElement = fixture.debugElement.query(By.css('.mat-mdc-select-value-text'));
 
-            expect(dropdownLabel.nativeNode.innerText).toEqual('This is a mock none option');
+            expect(placeholderElement.nativeNode.innerText).toEqual('This is a mock none option');
             expect(widget.fieldValue).toEqual(undefined);
             expect(selectedValueElement).toBeFalsy();
         });

lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.ts

@@ -29,7 +29,7 @@ import {
 } from '@alfresco/adf-core';
 import { FormCloudService } from '../../../services/form-cloud.service';
 import { BehaviorSubject, combineLatest, Observable, of, Subject } from 'rxjs';
-import { filter, map, takeUntil } from 'rxjs/operators';
+import { filter, map, takeUntil, tap } from 'rxjs/operators';
 import { TaskVariableCloud } from '../../../models/task-variable-cloud.model';
 
 export const DEFAULT_OPTION = {
@@ -66,6 +66,7 @@ export class DropdownCloudWidgetComponent extends WidgetComponent implements OnI
     restApiHostName: string;
     list$: Observable<FormFieldOption[]>;
     filter$ = new BehaviorSubject<string>('');
+    defaultOption: FormFieldOption;
 
     private readonly defaultVariableOptionId = 'id';
     private readonly defaultVariableOptionLabel = 'name';
@@ -403,6 +404,9 @@ export class DropdownCloudWidgetComponent extends WidgetComponent implements OnI
                     }
                     return items.filter(({ name }) => name.toLowerCase().includes(search.toLowerCase()));
                 }),
+                tap(items => {
+                    this.defaultOption = this.getDefaultOption(items);
+                }),
                 takeUntil(this.onDestroy$)
             );
     }