@if (isAlive && useAsyncSearch) {
  <sky-input-box
    [disabled]="skyComponentProperties?.disabled"
    [formGroup]="editorForm"
  >
    <sky-lookup
      formControlName="selection"
      [ariaLabelledBy]="
        skyComponentProperties?.ariaLabelledBy ?? screenReaderLabel.id
      "
      [autocompleteAttribute]="skyComponentProperties?.autocompleteAttribute"
      [data]="skyComponentProperties?.data"
      [debounceTime]="skyComponentProperties?.debounceTime"
      [descriptorProperty]="skyComponentProperties?.descriptorProperty"
      [enableShowMore]="skyComponentProperties?.enableShowMore"
      [idProperty]="skyComponentProperties?.idProperty"
      [placeholderText]="skyComponentProperties?.placeholderText"
      [propertiesToSearch]="skyComponentProperties?.propertiesToSearch"
      [search]="skyComponentProperties?.search"
      [searchFilters]="skyComponentProperties?.searchFilters"
      [searchResultsLimit]="skyComponentProperties?.searchResultsLimit"
      [searchResultTemplate]="skyComponentProperties?.searchResultTemplate"
      [searchTextMinimumCharacters]="
        skyComponentProperties?.searchTextMinimumCharacters
      "
      [selectMode]="skyComponentProperties?.selectMode"
      [showAddButton]="skyComponentProperties?.showAddButton"
      [showMoreConfig]="skyComponentProperties?.showMoreConfig"
      [wrapperClass]="skyComponentProperties?.wrapperClass"
      (searchAsync)="skyComponentProperties?.searchAsync?.($event)"
      (addClick)="skyComponentProperties?.addClick?.($event)"
      (openChange)="onLookupOpenChange($event)"
    />
  </sky-input-box>
}
@if (isAlive && !useAsyncSearch) {
  <sky-input-box
    [disabled]="skyComponentProperties?.disabled"
    [formGroup]="editorForm"
  >
    <sky-lookup
      formControlName="selection"
      [ariaLabelledBy]="
        skyComponentProperties?.ariaLabelledBy ?? screenReaderLabel.id
      "
      [autocompleteAttribute]="skyComponentProperties?.autocompleteAttribute"
      [data]="skyComponentProperties?.data"
      [debounceTime]="skyComponentProperties?.debounceTime"
      [descriptorProperty]="skyComponentProperties?.descriptorProperty"
      [enableShowMore]="skyComponentProperties?.enableShowMore"
      [idProperty]="skyComponentProperties?.idProperty"
      [placeholderText]="skyComponentProperties?.placeholderText"
      [propertiesToSearch]="skyComponentProperties?.propertiesToSearch"
      [search]="skyComponentProperties?.search"
      [searchFilters]="skyComponentProperties?.searchFilters"
      [searchResultsLimit]="skyComponentProperties?.searchResultsLimit"
      [searchResultTemplate]="skyComponentProperties?.searchResultTemplate"
      [searchTextMinimumCharacters]="
        skyComponentProperties?.searchTextMinimumCharacters
      "
      [selectMode]="skyComponentProperties?.selectMode"
      [showAddButton]="skyComponentProperties?.showAddButton"
      [showMoreConfig]="skyComponentProperties?.showMoreConfig"
      [wrapperClass]="skyComponentProperties?.wrapperClass"
      (addClick)="skyComponentProperties?.addClick?.($event)"
      (openChange)="onLookupOpenChange($event)"
    />
  </sky-input-box>
}
<div #screenReaderLabel="skyId" class="sky-screen-reader-only" skyId>
  {{ labelText }}
</div>