2024-10-30 05:24:44 +00:00
|
|
|
@if (!hideIcon()) {
|
|
|
|
|
<docs-icon class="docs-icon_high-contrast">search</docs-icon>
|
2024-07-23 16:50:12 +00:00
|
|
|
}
|
|
|
|
|
<input
|
|
|
|
|
#inputRef
|
|
|
|
|
type="text"
|
2024-10-30 05:24:44 +00:00
|
|
|
[attr.placeholder]="placeholder()"
|
|
|
|
|
[attr.name]="name()"
|
2025-05-05 21:20:26 +00:00
|
|
|
[value]="value()"
|
|
|
|
|
(input)="setValue(inputRef.value)"
|
2024-07-23 16:50:12 +00:00
|
|
|
class="docs-text-field"
|
|
|
|
|
/>
|
2025-04-19 19:36:31 +00:00
|
|
|
|
2025-05-16 15:40:39 +00:00
|
|
|
@if (resetLabel() && inputRef.value.length > 0) {
|
2025-04-19 19:36:31 +00:00
|
|
|
<button
|
|
|
|
|
type="reset"
|
|
|
|
|
[title]="resetLabel()"
|
|
|
|
|
class="docs-text-reset"
|
|
|
|
|
[attr.aria-label]="resetLabel()"
|
|
|
|
|
(click)="clearTextField()"
|
|
|
|
|
>
|
|
|
|
|
<svg width="20" height="20" viewBox="0 0 20 20">
|
|
|
|
|
<path
|
|
|
|
|
d="M10 10l5.09-5.09L10 10l5.09 5.09L10 10zm0 0L4.91 4.91 10 10l-5.09 5.09L10 10z"
|
|
|
|
|
stroke="currentColor"
|
|
|
|
|
fill="none"
|
|
|
|
|
fill-rule="evenodd"
|
|
|
|
|
stroke-linecap="round"
|
|
|
|
|
stroke-linejoin="round"
|
|
|
|
|
></path>
|
|
|
|
|
</svg>
|
|
|
|
|
</button>
|
|
|
|
|
}
|