shared-searchable-multi-select-content.presentational.html

<form [formGroup]="form"
      [dlcmAutoScrollIntoView]="!navigationResId"
      (keydown.tab)="closeByTab()"
      (keydown.shift.tab)="closeByTab()">
  <div class="input">
    <mat-form-field class="form-field">
      <input #input
             [formControlName]="host.formDefinition.search"
             matInput
      >
    </mat-form-field>
    <span *ngIf="!(isLoadingObs | async)"
          class="numbers"
    >({{(listObs | async)?.length}}/{{totalObs | async}})</span>
    <mat-icon (click)="close()"
              class="close"
    >close
    </mat-icon>
  </div>
</form>
<div class="result"
     [dlcmSpinner]="isLoadingObs | async"
>
  <ul>
    <ng-container *ngFor="let value of (listObs | async)">
      <li *ngIf="!host.hideItemSelected || !isActive(value)"
          [value]="value[host.valueKey]"
          [dlcmAutoScrollIntoView]="value.resId === navigationResId"
          [class.is-keybord-selected]="value.resId === navigationResId"
          [class.is-active]="isActive(value)"
          (click)="select(value)"
      >
        <span class="label">{{value[host.labelKey]}}</span>
        <span *ngIf="value[host.extraInfoLabelKey] | isNonEmptyString"
              class="extra-info"
        ><img *ngIf="host.extraInfoImage"
              [src]="'assets/images/'+ host.extraInfoImage"
              [alt]="host.extraInfoImage"
        >
          {{value[host.extraInfoLabelKey]}}</span>
      </li>
    </ng-container>
  </ul>
</div>