ng-implementation/my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.html

<!--    sélecteurs-->
<div class="input-box">
  <i class="ri-search-line search-placeholder"></i>
  <div class="label">
    <span class="d-none">
    {{ label }}
    </span>
  </div>
  <input (blur)="displayDropdown = false" (click)="displayDropdown= !displayDropdown" (focus)="displayDropdown = true"
         class="is-hidden" placeholder="{{label}}"
         type="text">
  @if (displayDropdown) {

    <div class="dropdown">
      <div class="dropdown-button selector-button">
        <!--          bouton-->
        <i class="ri-arrow-down-s-line"></i>
      </div>
      <div class="dropdown-list">
        <!--      selected:-->
        <div class="selected-items">

          @for (sc of selectedChoices; track sc) {
            <div class="dropdown-item">

              <i class="ri-checkbox-line"></i>
              {{ sc }}
            </div>
          }
        </div>
        <hr>
        <div class="available-items">
          <!--      available:-->
          @for (c of choices; track c) {
            <div class="dropdown-item">
              <i class="ri-checkbox-blank-line"></i>
              {{ c }}
            </div>
          }
        </div>
      </div>
    </div>

  }
</div>