<mat-form-field [appearance]="appearance()" [class]="formFieldClass()">
  <input
    matInput
    [formControl]="control"
    [matAutocomplete]="auto"
    [placeholder]="placeholder()"
    >
  <mat-autocomplete #auto="matAutocomplete"
    [displayWith]="displayFn"
    [class]="formFieldClass()"
    [classList]="formFieldClass()"
    autoActiveFirstOption
    >
    @if (filterText && isNewName && optionAddable()) {
      <mat-option
        class="item ellipsis"
        [value]="{label:filterText, value:filterText}"
        (onSelectionChange)= "customOptionSelected($event)"
        >"{{filterText}}" <span class="new">(Add item)</span></mat-option>
      }
      @for (option of filteredItems(); track option) {
        <mat-option [value]="option">{{option.label}}</mat-option>
      }
    </mat-autocomplete>
    <ng-content></ng-content>
  </mat-form-field>
