104 lines
2.5 KiB
HTML
104 lines
2.5 KiB
HTML
<!-- sélecteurs-->
|
|
<div [ngClass]="{
|
|
'is-disabled': disabled
|
|
}"
|
|
class="input-box"
|
|
>
|
|
|
|
|
|
<div class="label">
|
|
<span class="d-none">
|
|
{{ label }}
|
|
</span>
|
|
</div>
|
|
<!-- (blur)="displayDropdown = false" (click)="onClickInput()" -->
|
|
<!-- disabled: {{ disabled }}-->
|
|
|
|
@if (selectedChoices.length > 0) {
|
|
<div class="first-selection fake-input">
|
|
|
|
{{ selectedChoices[0].value }}
|
|
</div>
|
|
} @else {
|
|
|
|
@if (displayDropdown) {
|
|
<i class="ri-search-line search-placeholder"></i>
|
|
<input
|
|
(focus)="onInputClickedOrFocused($event)"
|
|
(input)="onSearchInput($event)"
|
|
class=""
|
|
placeholder="{{label}}"
|
|
type="text">
|
|
} @else {
|
|
|
|
<div class="placeholder">
|
|
{{ label }}
|
|
</div>
|
|
|
|
}
|
|
|
|
|
|
}
|
|
<span (click)="resetChoicesLists()"
|
|
[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">
|
|
<!-- 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>
|