<div
  class="c8y-search-dropdown dropdown fit-w"
  placement="bottom left"
  dropdown
  [container]="container"
  #dropdown="bs-dropdown"
  [autoClose]="true"
  (onShown)="onShown()"
  [isDisabled]="disabled"
  dropdownToggle
>
  <div
    class="input-group input-group-dropdown"
    role="button"
  >
    <input
      class="form-control text-truncate"
      type="text"
      #searchControl
      #searchControlModel="ngModel"
      [ngClass]="{
        'p-r-80':
          !hideNew &&
          (selected
            ? selected.id === null && getDisplayProperty()?.length > 0 && allowFreeEntries
            : false),
        'p-r-40': hideNew || getDisplayProperty()?.length === 0
      }"
      [required]="required"
      [ngModel]="selected ? getDisplayProperty() : ''"
      [placeholder]="placeholder | translate"
      (blur)="doBlur()"
      [name]="name"
      [maxlength]="maxlength"
      [disabled]="disabled"
    />
    @if (
      !hideNew &&
      selected &&
      selected.id === null &&
      getDisplayProperty()?.length > 0 &&
      allowFreeEntries
    ) {
      <span
        class="label label-info p-absolute"
        style="top: 10px; right: 40px; z-index: 10"
      >
        {{ 'New' | translate }}
      </span>
    }

    <span class="input-group-btn">
      <button
        class="btn btn-dot"
        [title]="title"
        type="button"
        [disabled]="disabled"
        (click)="onIconClick.emit({ icon, $event })"
        data-cy="typeahead-button"
      >
        <i
          class="text-primary"
          [c8yIcon]="icon"
        ></i>
      </button>
    </span>
  </div>
  <c8y-list-group
    class="dropdown-menu dropdown-menu--modal"
    [style.width]="container === 'body' ? searchControl.clientWidth + 'px' : undefined"
    role="menu"
    data-cy="typeahead--dropdown-menu"
    *dropdownMenu
  >
    <ng-content select="div, c8y-li, c8y-list-item, button, a"></ng-content>
  </c8y-list-group>
</div>