tykayn/ng-implementation
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

CSC link state to filters

Browse source
This commit is contained in:
Tykayn 2025-09-10 16:02:31 +02:00 • committed by tykayn
parent 0a8088b459
commit 8694a04ea9
31 changed files with 191 additions and 191 deletions
Download patch file Download diff file Expand all files Collapse all files

49
my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.html
View file

@ -1,40 +1,61 @@
<!-- sélecteurs-->
<div class="input-box">
<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>
<input (blur)="displayDropdown = false" (click)="displayDropdown= !displayDropdown" (focus)="displayDropdown = true"
class="is-hidden" placeholder="{{label}}"
type="text">
@if (displayDropdown) {
<!-- (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-button selector-button">
<!-- bouton-->
<i class="ri-arrow-down-s-line"></i>
</div>
<div class="dropdown-list">
<!-- selected:-->
<div class="selected-items">
@for (sc of selectedChoices; track sc) {
<div class="dropdown-item">
<div class="dropdown-item"
(click)="selectedChoicesChangeToggleItem(sc)"
>
<i class="ri-checkbox-line"></i>
{{ sc }}
</div>
}
</div>
<hr>
@if (selectedChoices?.length && availableChoices?.length) {
<hr>
}
<div class="available-items">
<!-- available:-->
@for (c of choices; track c) {
<div class="dropdown-item">
@for (ac of availableChoices; track ac) {
<div class="dropdown-item"
(click)="availableChoicesChangeToggleItem(ac)"
>
<i class="ri-checkbox-blank-line"></i>
{{ c }}
{{ ac }}
</div>
}
</div>