42 lines
2.0 KiB
HTML
42 lines
2.0 KiB
HTML
<ng-template #inputTemplate>
|
|
<div #searchInput class="dropdown-input" [class.hidden]="!isOpen()" [class.focus-mode]="inputFocusMode()"
|
|
contenteditable="true" role="textbox" aria-multiline="false" [aria-placeholder]="placeholder().trim().length > 0 ? placeholder() : translation.common.selectOption" [aria-activedescendant]="ariaActiveDescendant()"
|
|
[attr.placeholder]="placeholder().trim().length > 0 ? placeholder() : translation.common.selectOption" tabindex="-1" spellcheck="false"
|
|
(input)="onSearch($event)" (click)="handleInputClick($event)" (mousedown)="handleInputMouseDown()" (beforeinput)="preprocessInputContent($event)"
|
|
(focus)="onInputFocusIn()" (focusout)="onInputFocusOut()"></div>
|
|
</ng-template>
|
|
|
|
<div class="dropdown-box">
|
|
@if (icon()?.trim()?.length ?? 0 > 0) {
|
|
<span class="material-symbols-outlined icon-24 prefix-icon" aria-hidden="true">{{ icon() }}</span>
|
|
}
|
|
|
|
@if (recreateKey() % 2 == 0) {<ng-container [ngTemplateOutlet]="inputTemplate" />}
|
|
@else {<ng-container [ngTemplateOutlet]="inputTemplate" />}
|
|
|
|
@if (!isOpen()) {
|
|
<span class="placeholder" [class.value-empty]="selectedOption() === undefined">{{ selectedLabel() }}</span>
|
|
}
|
|
<span class="material-symbols-outlined icon-24 chevron" aria-hidden="true" [class.open]="isOpen()">keyboard_arrow_down</span>
|
|
</div>
|
|
|
|
@if (isOpen()) {
|
|
<div class="dropdown-container" tabindex="-1">
|
|
<ul class="dropdown-list" role="listbox" [id]="dropdownID + '-listbox'" tabindex="-1">
|
|
@for (option of filteredOptions(); track option.value; let i = $index) {
|
|
<li
|
|
#optionItem
|
|
class="dropdown-item"
|
|
role="option"
|
|
[id]="dropdownID + '-option-' + i"
|
|
[class.selected]="option.value === value()"
|
|
[class.focused]="i === focusedIndex()"
|
|
[attr.aria-selected]="option.value === value()"
|
|
(click)="selectOption(option); $event.stopPropagation()">
|
|
{{ option.label }}
|
|
</li>
|
|
}
|
|
</ul>
|
|
</div>
|
|
}
|