diff --git a/adev/shared-docs/components/search-dialog/search-dialog.component.html b/adev/shared-docs/components/search-dialog/search-dialog.component.html
index 51598f60d6d..397e35fdb5c 100644
--- a/adev/shared-docs/components/search-dialog/search-dialog.component.html
+++ b/adev/shared-docs/components/search-dialog/search-dialog.component.html
@@ -4,6 +4,7 @@
[autofocus]="true"
[hideIcon]="true"
[(ngModel)]="searchQuery"
+ [resetLabel]="'Clear the search'"
class="docs-search-input"
placeholder="Search docs"
/>
@@ -57,15 +58,82 @@
}
-
diff --git a/adev/shared-docs/components/search-dialog/search-dialog.component.scss b/adev/shared-docs/components/search-dialog/search-dialog.component.scss
index 1c2d83e694a..70222d2b7e4 100644
--- a/adev/shared-docs/components/search-dialog/search-dialog.component.scss
+++ b/adev/shared-docs/components/search-dialog/search-dialog.component.scss
@@ -25,23 +25,16 @@ dialog {
height: 2.6875rem; // 43px;
padding-inline-start: 1rem;
position: relative;
-
- &::after {
- content: 'Esc';
- position: absolute;
- right: 1rem;
- color: var(--gray-400);
- font-size: 0.875rem;
- }
}
- ul {
+ .docs-search-results {
max-height: 50vh;
overflow-y: auto;
overscroll-behavior: contain;
list-style-type: none;
padding-inline: 0;
padding-block-start: 1rem;
+ padding-block-end: 1rem;
margin: 0;
border-block-end: 1px solid var(--senary-contrast);
@@ -142,17 +135,48 @@ dialog {
}
}
-.docs-algolia {
+.docs-search-footer {
display: flex;
align-items: center;
- justify-content: end;
+ justify-content: space-between;
color: var(--gray-400);
padding: 1rem;
font-size: 0.75rem;
font-weight: 500;
- gap: 0.25rem;
background-color: var(--page-background);
border-radius: 0 0 0.25rem 0.25rem;
+ container-type: inline-size;
+ container-name: footer;
+
+ .docs-search-commands {
+ display: flex;
+ list-style: none;
+ gap: 1rem;
+ margin: 0;
+ padding: 0;
+
+ li {
+ display: flex;
+ gap: 0.25rem;
+ }
+
+ .docs-search-commands-key {
+ display: flex;
+ align-items: center;
+ }
+ }
+
+ @container footer (max-width: 600px) {
+ .docs-search-commands li {
+ display: none;
+ }
+ }
+
+ .docs-algolia {
+ display: flex;
+ gap: 0.25rem;
+ align-items: center;
+ }
docs-algolia-icon {
display: block;
diff --git a/adev/shared-docs/components/text-field/text-field.component.html b/adev/shared-docs/components/text-field/text-field.component.html
index 65353211b12..c436af5b867 100644
--- a/adev/shared-docs/components/text-field/text-field.component.html
+++ b/adev/shared-docs/components/text-field/text-field.component.html
@@ -10,3 +10,24 @@
(ngModelChange)="setValue($event)"
class="docs-text-field"
/>
+
+@if (resetLabel()) {
+
+}
diff --git a/adev/shared-docs/components/text-field/text-field.component.scss b/adev/shared-docs/components/text-field/text-field.component.scss
index 12795d772f5..2f861786ae5 100644
--- a/adev/shared-docs/components/text-field/text-field.component.scss
+++ b/adev/shared-docs/components/text-field/text-field.component.scss
@@ -7,3 +7,11 @@
docs-icon + .docs-text-field {
font-size: 1rem;
}
+
+button {
+ color: var(--secondary-contrast);
+
+ &:hover {
+ color: var(--vivid-pink);
+ }
+}
diff --git a/adev/shared-docs/components/text-field/text-field.component.ts b/adev/shared-docs/components/text-field/text-field.component.ts
index 564316cccfa..a3c869fc517 100644
--- a/adev/shared-docs/components/text-field/text-field.component.ts
+++ b/adev/shared-docs/components/text-field/text-field.component.ts
@@ -46,6 +46,7 @@ export class TextField implements ControlValueAccessor {
readonly disabled = model(false);
readonly hideIcon = input(false);
readonly autofocus = input(false);
+ readonly resetLabel = input(null);
// Implemented as part of ControlValueAccessor.
private onChange: (value: string) => void = (_: string) => {};
@@ -90,4 +91,8 @@ export class TextField implements ControlValueAccessor {
this.onChange(value);
this.onTouched();
}
+
+ clearTextField() {
+ this.setValue('');
+ }
}
diff --git a/adev/shared-docs/services/search.service.ts b/adev/shared-docs/services/search.service.ts
index 73d454bd039..d6eb7422216 100644
--- a/adev/shared-docs/services/search.service.ts
+++ b/adev/shared-docs/services/search.service.ts
@@ -6,26 +6,13 @@
* found in the LICENSE file at https://angular.dev/license
*/
-import {
- DestroyRef,
- Injectable,
- InjectionToken,
- Provider,
- ResourceRef,
- inject,
- resource,
- signal,
-} from '@angular/core';
-import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
-import {NavigationEnd, Router} from '@angular/router';
+import {Injectable, InjectionToken, Provider, inject, resource, signal} from '@angular/core';
import {ENVIRONMENT} from '../providers/index';
import type {Environment, SearchResult, SearchResultItem, SnippetResult} from '../interfaces/index';
-import {filter} from 'rxjs';
import {
liteClient as algoliasearch,
SearchResponses,
SearchResult as AlgoliaSearchResult,
- Hit,
} from 'algoliasearch/lite';
export const SEARCH_DELAY = 200;
@@ -49,8 +36,6 @@ export const provideAlgoliaSearchClient = (config: Environment): Provider => {
export class Search {
readonly searchQuery = signal('');
- private readonly destroyRef = inject(DestroyRef);
- private readonly router = inject(Router);
private readonly config = inject(ENVIRONMENT);
private readonly client = inject(ALGOLIA_CLIENT);
@@ -103,10 +88,6 @@ export class Search {
},
});
- constructor() {
- this.resetSearchQueryOnNavigationEnd();
- }
-
private getUniqueSearchResultItems(items: SearchResult[]): SearchResult[] {
const uniqueUrls = new Set();
@@ -134,15 +115,6 @@ export class Search {
});
}
- private resetSearchQueryOnNavigationEnd(): void {
- this.router.events
- .pipe(filter((event) => event instanceof NavigationEnd))
- .pipe(takeUntilDestroyed(this.destroyRef))
- .subscribe(() => {
- this.searchQuery.set('');
- });
- }
-
private parseResult(response: SearchResponses): SearchResultItem[] | undefined {
if (!response) {
return;