Allow for more customization of adf-cloud-people component (#10056)

* Allow for more customization of adf-cloud-people component

* Update documentation

docs/process-services-cloud/components/people-cloud.component.md

@@ -35,6 +35,10 @@ Allows one or more users to be selected (with auto-suggestion) based on the inpu
 | roles | `string[]` |  | Role names of the users to be listed. |
 | searchUserCtrl | `FormControl<any>` |  | FormControl to search the user |
 | title | `string` |  | Placeholder translation key |
+| hideInputOnSingleSelection | `boolean` | false | Hide the input field when a user is selected in single selection mode. The input will be shown again when the user is removed using the icon on the chip. |
+| formFieldAppearance | [`MatFormFieldAppearance`](https://material.angular.io/components/form-field/api#MatFormFieldAppearance) | "fill" | Material form field appearance (fill / outline). |
+| formFieldSubscriptSizing | [`SubscriptSizing`](https://material.angular.io/components/form-field/api#SubscriptSizing) | "fixed" | Material form field subscript sizing (fixed / dynamic). |
+| showErrors | `boolean` | true | Show errors under the form field. |
 | userChipsCtrl | `UntypedFormControl` |  | FormControl to list of users |
 | validate | `boolean` | false | This flag enables the validation on the preSelectUsers passed as input. In case the flag is true the components call the identity service to verify the validity of the information passed as input. Otherwise, no check will be done. |
 

lib/process-services-cloud/src/lib/people/components/people-cloud.component.html

@@ -1,5 +1,11 @@
 <form>
-    <mat-form-field [floatLabel]="'auto'" class="adf-people-cloud" [class.adf-invalid]="hasError() && isDirty()">
+    <mat-form-field
+        [appearance]="formFieldAppearance"
+        [subscriptSizing]="formFieldSubscriptSizing"
+        [floatLabel]="'auto'"
+        class="adf-people-cloud"
+        [class.adf-invalid]="hasError() && isDirty()"
+    >
         <ng-content select="[label]"></ng-content>
         <mat-chip-grid #userMultipleChipList [disabled]="isReadonly() || isValidationLoading()" data-automation-id="adf-cloud-people-chip-list">
             <mat-chip-row
@@ -58,7 +64,7 @@
         mode="indeterminate">
     </mat-progress-bar>
 
-    <div class="adf-error-container">
+    <div class="adf-error-container" *ngIf="showErrors">
         <mat-error *ngIf="hasPreselectError() && !isValidationLoading()" [@transitionMessages]="subscriptAnimationState" class="adf-error">
             <mat-icon class="adf-error-icon">error_outline</mat-icon>
             <div class="adf-error-text">{{ 'ADF_CLOUD_USERS.ERROR.NOT_FOUND' | translate : { userName : validateUsersMessage } }}</div>

lib/process-services-cloud/src/lib/people/components/people-cloud.component.ts

@@ -28,7 +28,8 @@ import {
     OnDestroy,
     ViewChild,
     ElementRef,
-    Inject
+    Inject,
+    AfterViewInit
 } from '@angular/core';
 import { BehaviorSubject, Observable, Subject } from 'rxjs';
 import { switchMap, debounceTime, distinctUntilChanged, mergeMap, tap, filter, takeUntil } from 'rxjs/operators';
@@ -38,6 +39,7 @@ import { ComponentSelectionMode } from '../../types';
 import { IdentityUserModel } from '../models/identity-user.model';
 import { IdentityUserServiceInterface } from '../services/identity-user.service.interface';
 import { IDENTITY_USER_SERVICE_TOKEN } from '../services/identity-user-service.token';
+import { MatFormFieldAppearance, SubscriptSizing } from '@angular/material/form-field';
 
 @Component({
     selector: 'adf-cloud-people',
@@ -52,7 +54,7 @@ import { IDENTITY_USER_SERVICE_TOKEN } from '../services/identity-user-service.t
     providers: [FullNamePipe],
     encapsulation: ViewEncapsulation.None
 })
-export class PeopleCloudComponent implements OnInit, OnChanges, OnDestroy {
+export class PeopleCloudComponent implements OnInit, OnChanges, OnDestroy, AfterViewInit {
     /** Name of the application. If specified, this shows the users who have access to the app. */
     @Input()
     appName: string;
@@ -122,6 +124,31 @@ export class PeopleCloudComponent implements OnInit, OnChanges, OnDestroy {
     @Input()
     title: string;
 
+    /**
+     * Hide the matInput associated with the chip grid when a single user is selected in single selection mode.
+     * The input will be shown again when the user is removed using the icon on the chip.
+     */
+    @Input()
+    hideInputOnSingleSelection = false;
+
+    /**
+     * Material form field appearance (fill / outline)
+     */
+    @Input()
+    formFieldAppearance: MatFormFieldAppearance = 'fill';
+
+    /**
+     * Material form field subscript sizing (fixed / dynamic)
+     */
+    @Input()
+    formFieldSubscriptSizing: SubscriptSizing = 'fixed';
+
+    /**
+     * Show errors under the form field
+     */
+    @Input()
+    showErrors: boolean = true;
+
     /** Emitted when a user is selected. */
     @Output()
     selectUser = new EventEmitter<IdentityUserModel>();
@@ -190,6 +217,14 @@ export class PeopleCloudComponent implements OnInit, OnChanges, OnDestroy {
         }
     }
 
+    ngAfterViewInit(): void {
+        if (this.hideInputOnSingleSelection) {
+            if (this.selectedUsers.length === 1 && this.isSingleMode() && this.userInput) {
+                this.userInput.nativeElement.style.display = 'none';
+            }
+        }
+    }
+
     private initSearch(): void {
         this.initializeStream();
         this.typingUniqueValueNotEmpty$
@@ -341,6 +376,9 @@ export class PeopleCloudComponent implements OnInit, OnChanges, OnDestroy {
             } else {
                 this.invalidUsers = [];
                 this.selectedUsers = [user];
+                if (this.hideInputOnSingleSelection) {
+                    this.userInput.nativeElement.style.display = 'none';
+                }
             }
 
             this.userInput.nativeElement.value = '';
@@ -358,6 +396,9 @@ export class PeopleCloudComponent implements OnInit, OnChanges, OnDestroy {
         this.changedUsers.emit(this.selectedUsers);
         if (this.selectedUsers.length === 0) {
             this.userChipsControlValue('');
+            if (this.hideInputOnSingleSelection) {
+                this.userInput.nativeElement.style.display = 'block';
+            }
         } else {
             this.userChipsControlValue(this.selectedUsers[0].username);
         }