<c8y-typeahead
  [required]="to?.required || false"
  [placeholder]="placeholder$ | async"
  [displayProperty]="to?.displayProperty"
  [selected]="selected"
  [allowFreeEntries]="to?.allowFreeEntries || false"
  [container]="to?.container || ''"
  [disabled]="to?.disabled"
  (onSearch)="setPipe($event)"
  [formControl]="formControl"
  [class.is-invalid]="showError"
  [formlyAttributes]="field">
    <c8y-li *c8yFor="let opt of to?.c8yForOptions; loadMore: to?.loadMore || 'auto'; pipe: filterPipe; notFound: notFoundTemplate; loadingTemplate: loading;"
          (click)="selectOption(opt); setPipe('')"
          class="p-l-8 p-r-8 c8y-list__item--link"
          [attr.role]="'menuitem'">
    <c8y-highlight [text]="opt[labelProp]" [pattern]="pattern"></c8y-highlight>
  </c8y-li>
  <ng-template #notFoundTemplate>
    <c8y-li class="bg-level-2 p-8" *ngIf="pattern.length > 0 && !match">
      <p><strong translate>No match found.</strong></p>
    </c8y-li>
  </ng-template>
  <ng-template #loading>
    <c8y-li class="text-center p-t-8 p-relative">
      <c8y-loading></c8y-loading>
    </c8y-li>
  </ng-template>
</c8y-typeahead>