[AAE-6807] Simulate real form

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

@@ -1,11 +1,12 @@
 <div class="adf-dropdown-widget {{field.className}}"
      [class.adf-invalid]="(!field.isValid && isTouched()) || isRestApiFailed" [class.adf-readonly]="field.readOnly">
-    <div class="adf-dropdown-widget-top-labels">
+    <div class="adf-dropdown-widget-top-labels" *ngIf="!field.compactFields">
         <label class="adf-label" [attr.for]="field.id">{{field.name | translate }}<span class="adf-asterisk"
             *ngIf="isRequired()">*</span>
         </label>
     </div>
-    <mat-form-field>
+    <mat-form-field [appearance]="field.compactFields ? 'fill' : 'legacy'" [class.adf-compact-dropdown]="field.compactFields">
+        <mat-label *ngIf="field.compactFields" [attr.for]="field.id">{{field.name | translate }}</mat-label>
         <mat-select class="adf-select"
                     [id]="field.id"
                     [(ngModel)]="field.value"

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

@@ -39,6 +39,12 @@ export const HIDE_FILTER_LIMIT = 5;
 
 /* eslint-disable @angular-eslint/component-selector */
 
+interface Food {
+    value: string;
+    viewValue: string;
+  }
+
+  
 @Component({
     selector: 'dropdown-cloud-widget',
     templateUrl: './dropdown-cloud.widget.html',
@@ -64,6 +70,12 @@ export class DropdownCloudWidgetComponent extends WidgetComponent implements OnI
     list$: Observable<FormFieldOption[]>;
     filter$ = new BehaviorSubject<string>('');
 
+    foods: Food[] = [
+        {value: 'steak-0', viewValue: 'Steak'},
+        {value: 'pizza-1', viewValue: 'Pizza'},
+        {value: 'tacos-2', viewValue: 'Tacos'},
+      ];
+
     protected onDestroy$ = new Subject<boolean>();
 
     constructor(public formService: FormService,