refactor(addon-doc): search input (#9081)

taiga-family · Sep 19, 2024 · c8c4a66 · c8c4a66
1 parent bfe18a1
commit c8c4a66
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 44 deletions.
diff --git a/projects/addon-doc/components/navigation/navigation.component.ts b/projects/addon-doc/components/navigation/navigation.component.ts
@@ -4,18 +4,13 @@ import {
     ChangeDetectorRef,
     Component,
     inject,
+    signal,
     ViewChild,
 } from '@angular/core';
 import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
 import {FormControl, ReactiveFormsModule} from '@angular/forms';
 import {Title} from '@angular/platform-browser';
-import {
-    ActivatedRoute,
-    Router,
-    RouterLink,
-    RouterLinkActive,
-    Scroll,
-} from '@angular/router';
+import {Router, RouterLink, RouterLinkActive, Scroll} from '@angular/router';
 import {
     TUI_DOC_ICONS,
     TUI_DOC_PAGE_LOADED,
@@ -89,13 +84,13 @@ export class TuiDocNavigation {
     private readonly router = inject(Router);
     private readonly doc = inject(DOCUMENT);
 
+    protected open = signal(false);
     protected menuOpen = false;
 
     protected readonly sidebar = inject(TuiSidebarDirective, {optional: true});
     protected readonly labels = inject(NAVIGATION_LABELS);
     protected readonly items = inject(NAVIGATION_ITEMS);
     protected readonly searchText = inject(TUI_DOC_SEARCH_TEXT);
-    protected readonly activatedRoute = inject(ActivatedRoute);
     protected readonly docIcons = inject(TUI_DOC_ICONS);
     protected readonly icons = inject(TUI_COMMON_ICONS);
 
@@ -162,8 +157,8 @@ export class TuiDocNavigation {
         this.menuOpen = false;
     }
 
-    protected onClick(input: TuiInputComponent): void {
-        input.open = false;
+    protected onClick(): void {
+        this.open.set(false);
         this.menuOpen = false;
         this.search.setValue('');
         this.openActivePageGroup();

diff --git a/projects/addon-doc/components/navigation/navigation.style.less b/projects/addon-doc/components/navigation/navigation.style.less
@@ -15,17 +15,11 @@
     ::ng-deep tui-icon {
         border: 0.25rem solid transparent;
     }
+}
 
-    .t-search-text {
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
-
-        .t-slash {
-            block-size: 1rem;
-            font-size: 0.5rem;
-        }
-    }
+.t-slash {
+    block-size: 1rem;
+    font-size: 0.5rem;
 }
 
 .t-navigation {

diff --git a/projects/addon-doc/components/navigation/navigation.template.html b/projects/addon-doc/components/navigation/navigation.template.html
@@ -1,19 +1,25 @@
-<tui-input
-    #input
+<tui-textfield
     tuiTextfieldSize="m"
     class="t-input"
-    [formControl]="search"
-    [tuiAutoFocus]="!!sidebar"
-    [tuiTextfieldCleaner]="true"
-    [tuiTextfieldIconLeft]="docIcons.search"
-    [tuiTextfieldLabelOutside]="true"
+    [iconStart]="docIcons.search"
+    [open]="open() && canOpen"
+    (keyup)="open.set(canOpen && $event.code !== 'Escape')"
+    (openChange)="open.set($event)"
 >
-    <div class="t-search-text">
-        {{ searchText }}
-        <code class="t-slash">/</code>
-    </div>
+    <code
+        *ngIf="!search.value"
+        class="t-slash"
+    >
+        /
+    </code>
+    <input
+        tuiTextfield
+        [formControl]="search"
+        [placeholder]="searchText"
+        [tuiAutoFocus]="!!sidebar"
+    />
     <ng-container *ngIf="canOpen">
-        <tui-data-list *tuiDataList>
+        <tui-data-list *tuiTextfieldDropdown>
             <tui-opt-group
                 *ngFor="let group of filtered$ | async; let index = index"
                 [label]="labels[index] || ''"
@@ -41,7 +47,7 @@
                             [fragment]="item.fragment"
                             [routerLink]="item.route"
                             [target]="item.target || '_self'"
-                            (click)="onClick(input)"
+                            (click)="onClick()"
                         >
                             {{ item.title }}
                             <tui-icon
@@ -55,7 +61,7 @@
             </tui-opt-group>
         </tui-data-list>
     </ng-container>
-</tui-input>
+</tui-textfield>
 
 <nav class="t-navigation">
     <tui-scrollbar class="t-scrollbar">

diff --git a/projects/core/components/data-list/data-list.component.ts b/projects/core/components/data-list/data-list.component.ts
@@ -1,5 +1,5 @@
 import {NgIf} from '@angular/common';
-import type {AfterContentChecked, QueryList} from '@angular/core';
+import {type AfterContentChecked, ChangeDetectorRef, type QueryList} from '@angular/core';
 import {
     ChangeDetectionStrategy,
     Component,
@@ -14,7 +14,7 @@ import {
 } from '@angular/core';
 import {toSignal} from '@angular/core/rxjs-interop';
 import {EMPTY_QUERY} from '@taiga-ui/cdk/constants';
-import {tuiTakeUntilDestroyed, tuiZonefreeScheduler} from '@taiga-ui/cdk/observables';
+import {tuiTakeUntilDestroyed, tuiZonefree} from '@taiga-ui/cdk/observables';
 import {tuiInjectElement} from '@taiga-ui/cdk/utils/dom';
 import {tuiIsNativeFocusedIn, tuiMoveFocus} from '@taiga-ui/cdk/utils/focus';
 import {tuiIsPresent} from '@taiga-ui/cdk/utils/miscellaneous';
@@ -68,6 +68,7 @@ export class TuiDataListComponent<T>
     private readonly ngZone = inject(NgZone);
     private readonly destroyRef = inject(DestroyRef);
     private readonly el = tuiInjectElement();
+    private readonly cdr = inject(ChangeDetectorRef);
 
     protected readonly fallback = toSignal(inject(TUI_NOTHING_FOUND_MESSAGE));
     protected readonly empty = signal(false);
@@ -92,9 +93,12 @@ export class TuiDataListComponent<T>
 
     // TODO: Refactor to :has after Safari support bumped to 15
     public ngAfterContentChecked(): void {
-        timer(0, tuiZonefreeScheduler(this.ngZone))
-            .pipe(tuiTakeUntilDestroyed(this.destroyRef))
-            .subscribe(() => this.empty.set(!this.el.querySelector('[tuiOption]')));
+        timer(0)
+            .pipe(tuiZonefree(this.ngZone), tuiTakeUntilDestroyed(this.destroyRef))
+            .subscribe(() => {
+                this.empty.set(!this.el.querySelector('[tuiOption]'));
+                this.cdr.detectChanges();
+            });
     }
 
     public getOptions(includeDisabled = false): readonly T[] {

diff --git a/projects/core/components/textfield/textfield-dropdown.directive.ts b/projects/core/components/textfield/textfield-dropdown.directive.ts
@@ -14,7 +14,7 @@ export class TuiTextfieldDropdownDirective {}
 export class TuiWithTextfieldDropdown {
     private readonly dropdown = tuiDropdown(null);
 
-    @ContentChild(TuiTextfieldDropdownDirective, {read: TemplateRef})
+    @ContentChild(TuiTextfieldDropdownDirective, {read: TemplateRef, descendants: true})
     protected set template(template: PolymorpheusContent) {
         this.dropdown.set(template);
     }

diff --git a/projects/core/directives/dropdown/dropdown-open.directive.ts b/projects/core/directives/dropdown/dropdown-open.directive.ts
@@ -100,7 +100,7 @@ export class TuiDropdownOpen implements OnChanges {
     public readonly driver = inject(TuiDropdownDriver);
 
     public ngOnChanges(): void {
-        this.drive();
+        this.update(!!this.tuiDropdownOpen && this.tuiDropdownEnabled);
     }
 
     public toggle(open: boolean): void {
@@ -142,6 +142,7 @@ export class TuiDropdownOpen implements OnChanges {
             !tuiIsEditingKey(key) ||
             !this.editable ||
             !this.focused ||
+            !this.directive.content ||
             !tuiIsHTMLElement(target) ||
             (tuiIsElementEditable(target) && target !== this.host)
         ) {
@@ -179,9 +180,9 @@ export class TuiDropdownOpen implements OnChanges {
         this.drive();
     }
 
-    private drive(open = this.tuiDropdownOpen && this.tuiDropdownEnabled): void {
-        this.obscured.tuiObscuredEnabled = !!open;
-        this.driver.next(!!open);
+    private drive(open = !!this.tuiDropdownOpen && this.tuiDropdownEnabled): void {
+        this.obscured.tuiObscuredEnabled = open;
+        this.driver.next(open);
     }
 
     private focusDropdown(previous: boolean): void {