mirror of
https://github.com/bitwarden/browser
synced 2026-02-07 04:03:29 +00:00
44 lines
1.5 KiB
HTML
44 lines
1.5 KiB
HTML
<div class="tw-relative tw-flex tw-items-center">
|
|
<form role="search" class="tw-relative tw-flex tw-items-center tw-w-full">
|
|
<label class="tw-sr-only" [for]="id">{{ "search" | i18n }}</label>
|
|
<label
|
|
[for]="id"
|
|
aria-hidden="true"
|
|
class="tw-absolute tw-left-2 tw-z-20 !tw-mb-0 tw-cursor-text"
|
|
>
|
|
<i class="bwi bwi-search bwi-fw tw-text-muted"></i>
|
|
</label>
|
|
<input
|
|
#input
|
|
bitInput
|
|
[type]="inputType"
|
|
[id]="id"
|
|
[placeholder]="placeholder ?? ('search' | i18n)"
|
|
class="tw-pl-9"
|
|
[ngModel]="searchText"
|
|
(ngModelChange)="onChange($event)"
|
|
[ngModelOptions]="{ standalone: true }"
|
|
(focus)="isInputFocused = true"
|
|
(blur)="isInputFocused = false; onTouch()"
|
|
(mouseenter)="isInputHovered = true"
|
|
(mouseleave)="isInputHovered = false"
|
|
[disabled]="disabled"
|
|
[attr.autocomplete]="autocomplete"
|
|
/>
|
|
<button
|
|
*ngIf="searchText"
|
|
(mouseenter)="resetHovered = true"
|
|
(mouseleave)="resetHovered = false"
|
|
[ngClass]="{
|
|
'tw-opacity-0': !isInputFocused && !isInputHovered && !resetHovered,
|
|
'tw-bg-text-muted': isInputFocused || isInputHovered || resetHovered,
|
|
}"
|
|
class="bw-reset-btn tw-size-6 tw-absolute hover:tw-bg-text-main tw-right-2 tw-z-20 !tw-mb-0 tw-cursor-pointer"
|
|
type="reset"
|
|
[attr.aria-label]="searchText ? ('Reset search' | i18n) : ('' | i18n)"
|
|
[attr.aria-hidden]="!searchText"
|
|
(click)="clearSearch()"
|
|
></button>
|
|
</form>
|
|
</div>
|