AAE-21392 Fix dropdown cloud widget style

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

@@ -0,0 +1,32 @@
+/*!
+ * @license
+ * Copyright © 2005-2023 Hyland Software, Inc. and its affiliates. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { DropdownCloudPlaceholderPipe } from "./dropdown-cloud-placeholder.pipe";
+import { DEFAULT_OPTION } from "./dropdown-cloud.widget";
+import { optionsMock, optionsMockWithDefaultOption } from './dropdown-cloud.mock';
+
+describe('DropdownCloudPlaceholderPipe', () => {
+  const pipe = new DropdownCloudPlaceholderPipe();
+
+  it('should set default option if it exists', () => {
+    expect(pipe.transform(optionsMockWithDefaultOption)).toBe(DEFAULT_OPTION.name);
+  });
+
+  it('should not set default option if it does not exist', () => {
+    expect(pipe.transform(optionsMock)).toBe(undefined);
+  });
+});

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

@@ -0,0 +1,35 @@
+/*!
+ * @license
+ * Copyright © 2005-2023 Hyland Software, Inc. and its affiliates. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { FormFieldOption } from '@alfresco/adf-core';
+import { Pipe, PipeTransform } from '@angular/core';
+import { DEFAULT_OPTION } from './dropdown-cloud.widget';
+
+@Pipe({
+  name: 'dropdownCloudPlaceholder'
+})
+export class DropdownCloudPlaceholderPipe implements PipeTransform {
+
+  private getDefaultOption(options: FormFieldOption[]): FormFieldOption {
+    return options.find((option: FormFieldOption) => option.id === DEFAULT_OPTION.id);
+  }
+
+  transform(options: FormFieldOption[]): string {
+    return this.getDefaultOption(options)?.name;
+  }
+
+}

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

@@ -0,0 +1,37 @@
+/*!
+ * @license
+ * Copyright © 2005-2023 Hyland Software, Inc. and its affiliates. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { FormFieldOption } from '@alfresco/adf-core';
+
+export const optionsMock: FormFieldOption[] = [
+    {
+      id: 'option-01',
+      name: 'Option 01'
+    },
+    {
+      id: 'option-02',
+      name: 'Option 02'
+    },
+];
+
+export const optionsMockWithDefaultOption: FormFieldOption[] = [
+    {
+      id: 'empty',
+      name: 'Choose one...'
+    },
+    ...optionsMock
+];

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

@@ -1,15 +1,10 @@
 <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"
                         [id]="field.id"
                         [(ngModel)]="field.value"
@@ -22,6 +17,7 @@
                         (blur)="markAsTouched()"
                         matTooltipPosition="above"
                         matTooltipShowDelay="1000"
+                        [placeholder]="list$ | async | dropdownCloudPlaceholder"
                         [multiple]="field.hasMultipleValues">
                 <adf-select-filter-input *ngIf="showInputFilter" (change)="filter$.next($event)"></adf-select-filter-input>
 

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

@@ -433,8 +433,4 @@ export class DropdownCloudWidgetComponent extends WidgetComponent implements OnI
             !this.isRestApiFailed &&
             !this.variableOptionsFailed;
     }
-
-    getDefaultOption(options: FormFieldOption[]): FormFieldOption {
-        return options.find((option: FormFieldOption) => option.id === DEFAULT_OPTION.id);
-    }
 }

lib/process-services-cloud/src/lib/form/form-cloud.module.ts

@@ -27,6 +27,7 @@ import { AlfrescoViewerModule, ContentMetadataModule, ContentNodeSelectorModule,
 
 import { DateCloudWidgetComponent } from './components/widgets/date/date-cloud.widget';
 import { DropdownCloudWidgetComponent } from './components/widgets/dropdown/dropdown-cloud.widget';
+import { DropdownCloudPlaceholderPipe } from './components/widgets/dropdown/dropdown-cloud-placeholder.pipe';
 import { GroupCloudWidgetComponent } from './components/widgets/group/group-cloud.widget';
 import { PeopleCloudWidgetComponent } from './components/widgets/people/people-cloud.widget';
 import { AttachFileCloudWidgetComponent } from './components/widgets/attach-file/attach-file-cloud-widget.component';
@@ -66,6 +67,7 @@ import { A11yModule } from '@angular/cdk/a11y';
         FormDefinitionSelectorCloudComponent,
         FormCustomOutcomesComponent,
         DropdownCloudWidgetComponent,
+        DropdownCloudPlaceholderPipe,
         RadioButtonsCloudWidgetComponent,
         AttachFileCloudWidgetComponent,
         DateCloudWidgetComponent,