From 4383a772413de3167d417db45f0c9b50a4b407b2 Mon Sep 17 00:00:00 2001
From: Michal Grzegorczyk <michalgrzegorczyk.dev@gmail.com>
Date: Sun, 3 Nov 2024 21:02:11 +0100
Subject: [PATCH] fix: linter

---
 package-lock.json                             | 77 ++++++++++---------
 .../navigation/navigation.component.ts        | 14 ++--
 .../navigation/navigation.template.html       | 62 +++++++--------
 .../kit/components/input/input.component.ts   | 20 +++--
 .../kit/components/input/input.template.html  |  1 -
 5 files changed, 93 insertions(+), 81 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index e2657cdd4c4f..f43d33ef373a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -43845,8 +43845,8 @@
                 "@angular/common": ">=12.0.0",
                 "@angular/core": ">=12.0.0",
                 "@ng-web-apis/common": ">=3.2.3 <4",
-                "@taiga-ui/cdk": ">=3.95.2 <4",
-                "@taiga-ui/core": ">=3.95.2 <4",
+                "@taiga-ui/cdk": ">=3.96.0 <4",
+                "@taiga-ui/core": ">=3.96.0 <4",
                 "@tinkoff/ng-polymorpheus": ">=4.3.0",
                 "tslib": ">=2.7.0"
             }
@@ -43863,10 +43863,10 @@
                 "@maskito/core": ">=1.9.0 <2",
                 "@maskito/kit": ">=1.9.0 <2",
                 "@ng-web-apis/common": ">=3.2.3 <4",
-                "@taiga-ui/cdk": ">=3.95.2 <4",
-                "@taiga-ui/core": ">=3.95.2 <4",
-                "@taiga-ui/i18n": ">=3.95.2 <4",
-                "@taiga-ui/kit": ">=3.95.2 <4",
+                "@taiga-ui/cdk": ">=3.96.0 <4",
+                "@taiga-ui/core": ">=3.96.0 <4",
+                "@taiga-ui/i18n": ">=3.96.0 <4",
+                "@taiga-ui/kit": ">=3.96.0 <4",
                 "@tinkoff/ng-polymorpheus": ">=4.3.0",
                 "rxjs": ">=6.0.0",
                 "tslib": ">=2.7.0"
@@ -43889,10 +43889,10 @@
                 "@angular/forms": ">=12.0.0",
                 "@angular/router": ">=12.0.0",
                 "@ng-web-apis/common": ">=3.2.3 <4",
-                "@taiga-ui/addon-mobile": ">=3.95.2 <4",
-                "@taiga-ui/cdk": ">=3.95.2 <4",
-                "@taiga-ui/core": ">=3.95.2 <4",
-                "@taiga-ui/kit": ">=3.95.2 <4",
+                "@taiga-ui/addon-mobile": ">=3.96.0 <4",
+                "@taiga-ui/cdk": ">=3.96.0 <4",
+                "@taiga-ui/core": ">=3.96.0 <4",
+                "@taiga-ui/kit": ">=3.96.0 <4",
                 "@tinkoff/ng-polymorpheus": ">=4.3.0",
                 "tslib": ">=2.7.0"
             }
@@ -43906,9 +43906,9 @@
                 "@angular/common": ">=12.0.0",
                 "@angular/core": ">=12.0.0",
                 "@ng-web-apis/common": ">=3.2.3 <4",
-                "@taiga-ui/cdk": ">=3.95.2 <4",
-                "@taiga-ui/core": ">=3.95.2 <4",
-                "@taiga-ui/kit": ">=3.95.2 <4",
+                "@taiga-ui/cdk": ">=3.96.0 <4",
+                "@taiga-ui/core": ">=3.96.0 <4",
+                "@taiga-ui/kit": ">=3.96.0 <4",
                 "@tinkoff/ng-polymorpheus": ">=4.3.0",
                 "rxjs": ">=6.0.0",
                 "tslib": ">=2.7.0"
@@ -43922,10 +43922,10 @@
                 "@angular/common": ">=12.0.0",
                 "@angular/core": ">=12.0.0",
                 "@ng-web-apis/mutation-observer": ">=3.1.0 <4",
-                "@taiga-ui/cdk": ">=3.95.2 <4",
-                "@taiga-ui/core": ">=3.95.2 <4",
-                "@taiga-ui/i18n": ">=3.95.2 <4",
-                "@taiga-ui/kit": ">=3.95.2 <4",
+                "@taiga-ui/cdk": ">=3.96.0 <4",
+                "@taiga-ui/core": ">=3.96.0 <4",
+                "@taiga-ui/i18n": ">=3.96.0 <4",
+                "@taiga-ui/kit": ">=3.96.0 <4",
                 "@tinkoff/ng-polymorpheus": ">=4.3.0",
                 "rxjs": ">=6.0.0",
                 "tslib": ">=2.7.0"
@@ -43939,10 +43939,10 @@
                 "@angular/common": ">=12.0.0",
                 "@angular/core": ">=12.0.0",
                 "@ng-web-apis/intersection-observer": ">=3.2.3 <4",
-                "@taiga-ui/cdk": ">=3.95.2 <4",
-                "@taiga-ui/core": ">=3.95.2 <4",
-                "@taiga-ui/i18n": ">=3.95.2 <4",
-                "@taiga-ui/kit": ">=3.95.2 <4",
+                "@taiga-ui/cdk": ">=3.96.0 <4",
+                "@taiga-ui/core": ">=3.96.0 <4",
+                "@taiga-ui/i18n": ">=3.96.0 <4",
+                "@taiga-ui/kit": ">=3.96.0 <4",
                 "@tinkoff/ng-polymorpheus": ">=4.3.0",
                 "rxjs": ">=6.0.0",
                 "tslib": ">=2.7.0"
@@ -43955,8 +43955,8 @@
             "peerDependencies": {
                 "@angular/common": ">=12.0.0",
                 "@angular/core": ">=12.0.0",
-                "@taiga-ui/cdk": ">=3.95.2 <4",
-                "@taiga-ui/core": ">=3.95.2 <4",
+                "@taiga-ui/cdk": ">=3.96.0 <4",
+                "@taiga-ui/core": ">=3.96.0 <4",
                 "@tinkoff/ng-polymorpheus": ">=4.3.0",
                 "rxjs": ">=6.0.0",
                 "tslib": ">=2.7.0"
@@ -44008,8 +44008,8 @@
                 "@angular/router": ">=12.0.0",
                 "@ng-web-apis/common": ">=3.2.3 <4",
                 "@ng-web-apis/mutation-observer": ">=3.2.3 <4",
-                "@taiga-ui/cdk": ">=3.95.2 <4",
-                "@taiga-ui/i18n": ">=3.95.2 <4",
+                "@taiga-ui/cdk": ">=3.96.0 <4",
+                "@taiga-ui/i18n": ">=3.96.0 <4",
                 "@tinkoff/ng-event-plugins": ">=3.2.0 <4",
                 "@tinkoff/ng-polymorpheus": ">=4.3.0",
                 "rxjs": ">=6.0.0",
@@ -44043,6 +44043,7 @@
             "name": "@taiga-ui/demo-cypress"
         },
         "projects/demo-playwright": {
+            "name": "@taiga-ui/demo-playwright",
             "devDependencies": {
                 "@playwright/test": "1.48.0"
             }
@@ -44220,10 +44221,10 @@
             "peerDependencies": {
                 "@angular/common": ">=12.0.0",
                 "@angular/core": ">=12.0.0",
-                "@taiga-ui/addon-commerce": ">=3.95.2 <4",
-                "@taiga-ui/cdk": ">=3.95.2 <4",
-                "@taiga-ui/core": ">=3.95.2 <4",
-                "@taiga-ui/kit": ">=3.95.2 <4",
+                "@taiga-ui/addon-commerce": ">=3.96.0 <4",
+                "@taiga-ui/cdk": ">=3.96.0 <4",
+                "@taiga-ui/core": ">=3.96.0 <4",
+                "@taiga-ui/kit": ">=3.96.0 <4",
                 "@tinkoff/ng-polymorpheus": ">=4.3.0",
                 "rxjs": ">=6.0.0",
                 "tslib": ">=2.7.0"
@@ -44252,7 +44253,7 @@
                 "svgo": "3.1.0"
             },
             "peerDependencies": {
-                "@taiga-ui/cdk": ">=3.95.2 <4",
+                "@taiga-ui/cdk": ">=3.96.0 <4",
                 "tslib": ">=2.7.0"
             }
         },
@@ -44305,9 +44306,9 @@
                 "@ng-web-apis/common": ">=3.2.3 <4",
                 "@ng-web-apis/mutation-observer": ">=3.2.3 <4",
                 "@ng-web-apis/resize-observer": ">=3.2.3 <4",
-                "@taiga-ui/cdk": ">=3.95.2 <4",
-                "@taiga-ui/core": ">=3.95.2 <4",
-                "@taiga-ui/i18n": ">=3.95.2 <4",
+                "@taiga-ui/cdk": ">=3.96.0 <4",
+                "@taiga-ui/core": ">=3.96.0 <4",
+                "@taiga-ui/i18n": ">=3.96.0 <4",
                 "@tinkoff/ng-polymorpheus": ">=4.3.0",
                 "rxjs": ">=6.0.0",
                 "tslib": ">=2.7.0"
@@ -44320,8 +44321,8 @@
             "peerDependencies": {
                 "@angular/common": ">=12.0.0",
                 "@angular/core": ">=12.0.0",
-                "@taiga-ui/cdk": ">=3.95.2 <4",
-                "@taiga-ui/core": ">=3.95.2 <4",
+                "@taiga-ui/cdk": ">=3.96.0 <4",
+                "@taiga-ui/core": ">=3.96.0 <4",
                 "@tinkoff/ng-polymorpheus": ">=4.3.0",
                 "rxjs": ">=6.0.0",
                 "tslib": ">=2.7.0"
@@ -44331,7 +44332,7 @@
             "name": "@taiga-ui/styles",
             "version": "3.96.0",
             "peerDependencies": {
-                "@taiga-ui/cdk": ">=3.95.2 <4",
+                "@taiga-ui/cdk": ">=3.96.0 <4",
                 "tslib": ">=2.7.0"
             }
         },
@@ -44343,7 +44344,7 @@
                 "@taiga-ui/cdk": "^3.96.0"
             },
             "peerDependencies": {
-                "@taiga-ui/cdk": ">=3.95.2 <4",
+                "@taiga-ui/cdk": ">=3.96.0 <4",
                 "tslib": ">=2.7.0"
             }
         },
@@ -44361,7 +44362,7 @@
                 "ts-jest": "29.1.1"
             },
             "peerDependencies": {
-                "@taiga-ui/cdk": ">=3.95.2 <4",
+                "@taiga-ui/cdk": ">=3.96.0 <4",
                 "tslib": ">=2.7.0"
             }
         }
diff --git a/projects/addon-doc/components/navigation/navigation.component.ts b/projects/addon-doc/components/navigation/navigation.component.ts
index b88718f86e10..d79e9706587e 100644
--- a/projects/addon-doc/components/navigation/navigation.component.ts
+++ b/projects/addon-doc/components/navigation/navigation.component.ts
@@ -56,8 +56,12 @@ export class TuiDocNavigationComponent {
 
     readonly search = new FormControl('');
 
+    readonly isOpened$ = tuiControlValue<string>(this.search).pipe(
+        map(val => this.isValidSearch(val)),
+    );
+
     readonly filtered$ = tuiControlValue<string>(this.search).pipe(
-        filter(search => search.trim().length > 2),
+        filter(val => this.isValidSearch(val)),
         map(search => this.filterItems(this.flattenSubPages(this.items), search)),
     );
 
@@ -109,14 +113,14 @@ export class TuiDocNavigationComponent {
             .subscribe(anchor => this.navigateToAnchorLink(anchor));
     }
 
-    get canOpen(): boolean {
-        return (this.search.value?.length ?? 0) > 2;
-    }
-
     get itemsWithoutSections(): TuiDocPages {
         return this.items[this.items.length - 1];
     }
 
+    isValidSearch(search: string): boolean {
+        return search.trim().length > 2;
+    }
+
     $pages(pages: any): readonly TuiDocPage[] {
         return pages as TuiDocPage[];
     }
diff --git a/projects/addon-doc/components/navigation/navigation.template.html b/projects/addon-doc/components/navigation/navigation.template.html
index 39b800faa440..71aa11be489c 100644
--- a/projects/addon-doc/components/navigation/navigation.template.html
+++ b/projects/addon-doc/components/navigation/navigation.template.html
@@ -3,25 +3,43 @@
     tuiTextfieldSize="m"
     class="t-input"
     [formControl]="search"
+    [isOpened]="isOpened$ | async"
     [tuiAutoFocus]="!!sidebar"
     [tuiTextfieldCleaner]="true"
     [tuiTextfieldIconLeft]="docIcons.search"
     [tuiTextfieldLabelOutside]="true"
 >
     {{ searchText }}
-    <ng-container *ngIf="canOpen">
-        <tui-data-list *tuiDataList>
-            <tui-opt-group
-                *ngFor="let group of filtered$ | async; let index = index"
-                [label]="labels[index] || ''"
-            >
-                <ng-container *ngFor="let item of group">
+
+    <tui-data-list *tuiDataList>
+        <tui-opt-group
+            *ngFor="let group of filtered$ | async; let index = index"
+            [label]="labels[index] || ''"
+        >
+            <ng-container *ngFor="let item of group">
+                <a
+                    *ngIf="item.route.includes('://'); else internal"
+                    tuiOption
+                    [attr.rel]="item.rel"
+                    [href]="item.route"
+                    [target]="item.target || '_self'"
+                >
+                    {{ item.title }}
+                    <tui-svg
+                        *polymorpheusOutlet="item.icon as icon"
+                        class="t-icon"
+                        [src]="icon"
+                    ></tui-svg>
+                </a>
+
+                <ng-template #internal>
                     <a
-                        *ngIf="item.route.includes('://'); else internal"
                         tuiOption
                         [attr.rel]="item.rel"
-                        [href]="item.route"
+                        [fragment]="item.fragment"
+                        [routerLink]="item.route"
                         [target]="item.target || '_self'"
+                        (click)="onClick(input)"
                     >
                         {{ item.title }}
                         <tui-svg
@@ -30,28 +48,10 @@
                             [src]="icon"
                         ></tui-svg>
                     </a>
-
-                    <ng-template #internal>
-                        <a
-                            tuiOption
-                            [attr.rel]="item.rel"
-                            [fragment]="item.fragment"
-                            [routerLink]="item.route"
-                            [target]="item.target || '_self'"
-                            (click)="onClick(input)"
-                        >
-                            {{ item.title }}
-                            <tui-svg
-                                *polymorpheusOutlet="item.icon as icon"
-                                class="t-icon"
-                                [src]="icon"
-                            ></tui-svg>
-                        </a>
-                    </ng-template>
-                </ng-container>
-            </tui-opt-group>
-        </tui-data-list>
-    </ng-container>
+                </ng-template>
+            </ng-container>
+        </tui-opt-group>
+    </tui-data-list>
 </tui-input>
 
 <nav class="t-navigation">
diff --git a/projects/kit/components/input/input.component.ts b/projects/kit/components/input/input.component.ts
index 881903710e3b..3b0898180cdd 100644
--- a/projects/kit/components/input/input.component.ts
+++ b/projects/kit/components/input/input.component.ts
@@ -5,6 +5,7 @@ import {
     ContentChild,
     HostBinding,
     Inject,
+    Input,
     Optional,
     Self,
     TemplateRef,
@@ -66,6 +67,15 @@ export class TuiInputComponent
         TuiContextWithImplicit<TuiActiveZoneDirective>
     >;
 
+    @Input()
+    set isOpened(value: boolean | null) {
+        if (value !== null) {
+            this.open = value;
+            this.openedExternally = true;
+        }
+    }
+
+    openedExternally = false;
     open = false;
 
     constructor(
@@ -101,13 +111,12 @@ export class TuiInputComponent
         );
     }
 
-    get canOpen(): boolean {
-        return this.interactive && !!this.datalist;
-    }
-
     onValueChange(value: string): void {
+        if (!this.openedExternally) {
+            this.open = true;
+        }
+
         this.value = value;
-        this.open = true;
     }
 
     onActiveZone(active: boolean): void {
@@ -118,7 +127,6 @@ export class TuiInputComponent
         this.setNativeValue(String(item));
         this.focusInput();
         this.value = String(item);
-        this.open = false;
     }
 
     protected getFallbackValue(): string {
diff --git a/projects/kit/components/input/input.template.html b/projects/kit/components/input/input.template.html
index 2b10a08b3e26..3cdb7b373e24 100644
--- a/projects/kit/components/input/input.template.html
+++ b/projects/kit/components/input/input.template.html
@@ -1,6 +1,5 @@
 <tui-hosted-dropdown
     class="t-hosted"
-    [canOpen]="canOpen"
     [content]="datalist || ''"
     [(open)]="open"
     (tuiActiveZoneChange)="onActiveZone($event)"