51 lines
1.5 KiB
HTML
51 lines
1.5 KiB
HTML
<div class="app-select" [class.open]="isOpen" [class.disabled]="disabled" [class.sm]="size === 'sm'">
|
|
<button
|
|
type="button"
|
|
class="app-select-trigger"
|
|
(click)="toggle()"
|
|
[attr.aria-expanded]="isOpen"
|
|
[attr.aria-disabled]="disabled"
|
|
>
|
|
<span class="app-select-label">{{ displayLabel }}</span>
|
|
<i class="bi bi-chevron-down"></i>
|
|
</button>
|
|
|
|
<div class="app-select-panel" *ngIf="isOpen">
|
|
<div class="app-select-search" *ngIf="searchable" (click)="$event.stopPropagation()">
|
|
<i class="bi bi-search"></i>
|
|
<input
|
|
type="text"
|
|
class="app-select-search-input"
|
|
[value]="searchTerm"
|
|
[placeholder]="searchPlaceholder"
|
|
(input)="onSearchInput($any($event.target).value)"
|
|
(keydown)="onSearchKeydown($event)"
|
|
/>
|
|
<button
|
|
*ngIf="searchTerm"
|
|
type="button"
|
|
class="app-select-search-clear"
|
|
(click)="clearSearch($event)"
|
|
aria-label="Limpar pesquisa"
|
|
>
|
|
<i class="bi bi-x-lg"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<button
|
|
type="button"
|
|
class="app-select-option"
|
|
*ngFor="let opt of filteredOptions; trackBy: trackByValue"
|
|
[class.selected]="isSelected(opt)"
|
|
(click)="selectOption(opt)"
|
|
>
|
|
<span class="label">{{ getOptionLabel(opt) }}</span>
|
|
<i class="bi bi-check2" *ngIf="isSelected(opt)"></i>
|
|
</button>
|
|
|
|
<div class="app-select-empty" *ngIf="!filteredOptions || filteredOptions.length === 0">
|
|
Nenhuma opção
|
|
</div>
|
|
</div>
|
|
</div>
|