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

<!--    sélecteurs-->
<div [ngClass]="{
'is-disabled': disabled
}"
     class="input-box"
>
  @if (selectedChoices?.length) {
    <div class="selected-items-counter">
      {{ selectedChoices.length }}
    </div>
  }
  <i class="ri-search-line search-placeholder"></i>
  <div class="label">
    <span class="d-none">
    {{ label }}
    </span>
  </div>
  <!--    (blur)="displayDropdown = false" -->
  <input

    (click)="onClickInput()" (focus)="displayDropdown = true"
    class="is-hidden" placeholder="{{label}}"
    type="text">
  <div class="dropdown-button selector-button">
    <!--          bouton-->
    <i class="ri-arrow-down-s-line"></i>
  </div>

  @if (displayDropdown && availableChoices?.length) {

    <div class="dropdown">

      <div class="dropdown-list">
        <!--      selected:-->
        <div class="selected-items">

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

              <i class="ri-checkbox-line"></i>
              {{ sc }}
            </div>
          }
        </div>
        @if (selectedChoices?.length && availableChoices?.length) {

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

  }
</div>