<mat-form-field class="full-width">
  <mat-label>{{shownPlaceholder}}</mat-label>
  <input matInput [placeholder]="shownPlaceholder" [aria-describedby]="shownPlaceholder"
         [matAutocomplete]="auto"
         [formControl]="control"
         [name]="controlName">
  <button mat-icon-button type="button"
          *ngIf="control?.value && !control?.disabled" matSuffix (click)="clearControl()" [attr.aria-label]="'Clear'">
    <mat-icon>close</mat-icon>
  </button>
  <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn || defaultDisplayObjectFn" autoActiveFirstOption>
    <mat-option *ngIf="loadingEntries" disabled>
      <app-flashing-dots [classList]="['fl-margin-left']"></app-flashing-dots>
    </mat-option>
    <mat-option [class.hide]="loadingEntries" *ngFor="let object of filteredObjects$ | async" [value]="optionValueFn(object)">
      <app-client-avatar *ngIf="displayClients !== false" [client]="object"></app-client-avatar>
      <app-gravatar *ngIf="displayUsers !== false" [email]="object.email" [cssClass]="'autocomplete-gravatar'"></app-gravatar>
      <span>{{defaultDisplayObjectFn(object)}}</span>
    </mat-option>
  </mat-autocomplete>
  <mat-error>{{control?.errors | errorFormatter}}</mat-error>
</mat-form-field>
