53 lines
1.4 KiB
HTML
53 lines
1.4 KiB
HTML
<div class="picker">
|
|
|
|
<!-- Chips des ennemis déjà liés -->
|
|
@if (linkedEnemies.length > 0) {
|
|
<div class="linked-chips">
|
|
@for (e of linkedEnemies; track e.id) {
|
|
<span class="chip">
|
|
<a
|
|
class="chip-label"
|
|
[href]="enemyUrl(e.id!)"
|
|
target="_blank"
|
|
rel="noopener"
|
|
[title]="'enemyLinkPicker.openInNewTab' | translate">
|
|
<lucide-icon [img]="Skull" [size]="12"></lucide-icon>
|
|
{{ label(e) }}
|
|
</a>
|
|
<button type="button" class="chip-remove" (click)="remove(e.id!)" [title]="'enemyLinkPicker.removeLink' | translate">
|
|
<lucide-icon [img]="X" [size]="12"></lucide-icon>
|
|
</button>
|
|
</span>
|
|
}
|
|
</div>
|
|
}
|
|
|
|
<!-- Input + dropdown de suggestions -->
|
|
<div class="search-wrapper">
|
|
<input
|
|
type="text"
|
|
class="search-input"
|
|
[placeholder]="'enemyLinkPicker.searchPlaceholder' | translate"
|
|
[(ngModel)]="query"
|
|
(focus)="dropdownOpen = true"
|
|
(blur)="onBlur()" />
|
|
|
|
@if (dropdownOpen && suggestions.length > 0) {
|
|
<ul class="suggestions">
|
|
@for (e of suggestions; track e.id) {
|
|
<li (mousedown)="add(e)">
|
|
{{ label(e) }}
|
|
</li>
|
|
}
|
|
</ul>
|
|
}
|
|
|
|
@if (dropdownOpen && query && suggestions.length === 0) {
|
|
<p class="empty-hint">
|
|
{{ 'enemyLinkPicker.noMatch' | translate }}
|
|
</p>
|
|
}
|
|
</div>
|
|
|
|
</div>
|