83 lines
2.2 KiB
HTML
83 lines
2.2 KiB
HTML
<!-- sélecteurs-->
|
|
<div [ngClass]="{
|
|
'is-disabled': disabled
|
|
}"
|
|
class="input-box"
|
|
>
|
|
|
|
<i class="ri-search-line search-placeholder"></i>
|
|
<div class="label">
|
|
<span class="d-none">
|
|
{{ label }}
|
|
</span>
|
|
</div>
|
|
<!-- (blur)="displayDropdown = false" (click)="onClickInput()" -->
|
|
<input
|
|
(focus)="onInputClickedOrFocused($event)"
|
|
(input)="onSearchInput($event)"
|
|
class=""
|
|
placeholder="{{label}}"
|
|
type="text">
|
|
|
|
<span [ngClass]="{ 'is-visible' : selectedChoices?.length}"
|
|
(click)="resetChoicesLists()"
|
|
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">
|
|
<!-- count: {{ getFilteredSelectedChoices().length + getFilteredAvailableChoices().length }}
|
|
selected:-->
|
|
@if (selectedChoices?.length && availableChoices?.length) {
|
|
<div class="selected-items">
|
|
|
|
@for(sc of getFilteredSelectedChoices(); track sc.value){
|
|
<div (click)="selectedChoicesChangeToggleItem(sc)"
|
|
|
|
class="dropdown-item"
|
|
>
|
|
<img alt="checkbox" src="checkbox-active.svg" />
|
|
<span class="label">
|
|
<!-- {{ sc.label }} -->
|
|
</span>
|
|
</div>
|
|
}
|
|
</div>
|
|
|
|
|
|
<div class="separator">
|
|
|
|
<div class="label">Add new part number</div>
|
|
<i class="ri-add-line"></i>
|
|
</div>
|
|
}
|
|
<div class="available-items">
|
|
|
|
<!-- disponibles:-->
|
|
<!-- available:-->
|
|
@for(ac of getFilteredAvailableChoices(); track ac.value){
|
|
<div (click)="availableChoicesChangeToggleItem(ac)"
|
|
|
|
class="dropdown-item"
|
|
>
|
|
<img alt="checkbox" src="checkbox-inactive.svg" />
|
|
<span class="label">
|
|
{{ ac.label }}
|
|
</span>
|
|
</div>
|
|
}
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}
|
|
|
|
</div>
|