bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2026-02-07 04:03:29 +00:00
Code Issues Releases Wiki Activity

add signals for form hover and input focus; compute showResetButton

Browse Source
This commit is contained in:
bensbits91
2025-06-10 13:05:20 -07:00
parent e725b66739
commit 25c848489a
2 changed files with 18 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
libs/components/src/search/search.component.html
View File

@@ -1,5 +1,10 @@
<div class="tw-relative tw-flex tw-items-center">
<form role="search" class="tw-relative tw-flex tw-items-center tw-w-full">
<form
role="search"
(mouseenter)="isFormHovered.set(true)"
(mouseleave)="isFormHovered.set(false)"
class="tw-relative tw-flex tw-items-center tw-w-full"
>
<label class="tw-sr-only" [for]="id">{{ "search" | i18n }}</label>
<label
[for]="id"
@@ -18,24 +23,20 @@
[ngModel]="searchText"
(ngModelChange)="onChange($event)"
[ngModelOptions]="{ standalone: true }"
(focus)="isInputFocused = true"
(blur)="isInputFocused = false; onTouch()"
(mouseenter)="isInputHovered = true"
(mouseleave)="isInputHovered = false"
(focus)="isInputFocused.set(true)"
(blur)="isInputFocused.set(false); onTouch()"
[disabled]="disabled"
[attr.autocomplete]="autocomplete"
/>
<button
*ngIf="searchText"
(mouseenter)="resetHovered = true"
(mouseleave)="resetHovered = false"
*ngIf="searchText && showResetButton()"
[ngClass]="{
'tw-opacity-0': !isInputFocused && !isInputHovered && !resetHovered,
'tw-bg-text-muted': isInputFocused || isInputHovered || resetHovered,
'tw-opacity-0': !showResetButton(),
'tw-bg-text-muted': showResetButton(),
}"
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-label]="searchText ? ('Reset search' | i18n) : ''"
[attr.aria-hidden]="!searchText"
(click)="clearSearch()"
></button>

11
libs/components/src/search/search.component.ts
View File

@@ -1,7 +1,7 @@
// FIXME: Update this file to be type safe and remove this and next line
// @ts-strict-ignore
import { NgIf, NgClass } from "@angular/common";
import { Component, ElementRef, Input, ViewChild } from "@angular/core";
import { Component, ElementRef, Input, ViewChild, signal, computed } from "@angular/core";
import {
ControlValueAccessor,
NG_VALUE_ACCESSOR,
@@ -44,10 +44,11 @@ export class SearchComponent implements ControlValueAccessor, FocusableElement {
protected searchText: string;
// Use `type="text"` for Safari to improve rendering performance
protected inputType = isBrowserSafariApi() ? ("text" as const) : ("search" as const);
// Optional: Track focus and hover state of the input to emulate the hiding/showing of the native reset button
protected isInputFocused = false;
protected isInputHovered = false;
protected resetHovered = false;
protected isInputFocused = signal(false);
protected isFormHovered = signal(false);
protected showResetButton = computed(() => this.isInputFocused() || this.isFormHovered());
@Input() disabled: boolean;
@Input() placeholder: string;