66 lines
1.6 KiB
HTML
66 lines
1.6 KiB
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>
|