<ng-select
  [items]="baseItems()"
  [ngModel]="selectedItems()"
  (ngModelChange)="onChange($event)"
  (blur)="onBlur()"
  bindLabel="listName"
  groupBy="parentGrouping"
  [placeholder]="placeholder()"
  [loading]="loading()"
  [loadingText]="loadingText()"
  notFoundText="{{ 'multiSelectNotFound' | i18n }}"
  clearAllText="{{ 'multiSelectClearAll' | i18n }}"
  [multiple]="true"
  [closeOnSelect]="false"
  (close)="onDropdownClosed()"
  [disabled]="disabled()"
  [clearSearchOnAdd]="true"
  [labelForId]="searchInputId()"
  [keyDownFn]="keyDown"
  appendTo="body"
  outsideClickEvent="mousedown"
>
  <ng-template ng-loadingspinner-tmp>
    <bit-spinner size="sm" />
  </ng-template>
  <ng-template ng-label-tmp let-item="item" let-clear="clear">
    <bit-chip
      size="small"
      class="tw-me-1"
      [label]="item.labelName"
      [startIcon]="item.icon"
      [disabled]="disabled()"
      (dismissed)="clear(item)"
    ></bit-chip>
  </ng-template>
  <ng-template ng-option-tmp let-item="item">
    <div class="tw-flex">
      <div class="tw-w-7 tw-flex-none">
        @if (isSelected(item)) {
          <bit-icon name="bwi-check" aria-hidden="true"></bit-icon>
        }
      </div>
      <div class="tw-me-2 tw-flex-initial">
        @if (item.icon != null) {
          <i class="bwi bwi-fw {{ item.icon }}" aria-hidden="true"></i>
        }
      </div>
      <div class="tw-flex-1" [attr.title]="item.listName">
        {{ item.listName }}
      </div>
    </div>
  </ng-template>
</ng-select>
