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

<!--    sélecteurs-->
<div [ngClass]="{
'is-disabled': disabled
}"
     class="input-box"
>
  displayDropdown {{displayDropdown}}

  <i class="ri-search-line search-placeholder"></i>
  <div class="label">
        <span class="d-none">
    {{ label }}
        </span>
  </div>
  <input
    (blur)="displayDropdown = false"
    (click)="onClickInput()"
    (focus)="displayDropdown = true"
    class="is-hidden" placeholder="{{label}}"
    type="text">
  <span [ngClass]="{ 'is-visible' : selectedChoices?.length}"
        class="selected-items-counter">
    {{ selectedChoices?.length || 0 }}
  </span>
  <div (click)="onClickInput()" class="dropdown-button selector-button">
    <!--          bouton-->
    <i class="ri-arrow-down-s-line"></i>
  </div>

  @if (displayDropdown ) {


    <div class="dropdown">
      <div class="dropdown-list">
        <!--      selected:-->
        @if (selectedChoices?.length && availableChoices?.length) {
          <div class="selected-items">

            @for(sc of selectedChoices; track sc.value){
            <div (click)="selectedChoicesChangeToggleItem(sc)"

                 class="dropdown-item"
            >
              <i class="ri-checkbox-line"></i>
              {{ sc.label }}
            </div>
            }
          </div>

          <hr>
        }
        <div class="available-items">

          <!--      available:-->
          @for(sc of availableChoices; track sc.value){
            <div (click)="availableChoicesChangeToggleItem(sc)"

                 class="dropdown-item"
            >
              <i class="ri-checkbox-line"></i>
              {{ sc.label }}
            </div>
          }

        </div>
      </div>
    </div>
  }
</div>