refactor: use only TuiTextfield (#7790)

taiga-family · Jun 18, 2024 · fa6ccf7 · fa6ccf7
1 parent 5a5e487
commit fa6ccf7
Show file tree

Hide file tree

Showing 44 changed files with 100 additions and 158 deletions.
diff --git a/projects/addon-doc/components/documentation/documentation.component.ts b/projects/addon-doc/components/documentation/documentation.component.ts
@@ -37,7 +37,6 @@ import {
     TuiGroupDirective,
     TuiNotificationComponent,
     TuiTextfield,
-    TuiTextfieldOptionsDirective,
 } from '@taiga-ui/core';
 import {TuiBadgeDirective, TuiDataListWrapper, TuiSwitchComponent} from '@taiga-ui/kit';
 import {
@@ -72,7 +71,6 @@ import {TuiDocTypeReferencePipe} from './pipes/type-reference.pipe';
         NgTemplateOutlet,
         TuiDocTypeReferencePipe,
         TuiSelectModule,
-        TuiTextfieldOptionsDirective,
         FormsModule,
         TuiDropdownOptionsDirective,
         TuiShowCleanerPipe,

diff --git a/projects/addon-doc/components/navigation/navigation.component.ts b/projects/addon-doc/components/navigation/navigation.component.ts
@@ -33,7 +33,7 @@ import {
     TuiIcon,
     TuiLink,
     TuiScrollbarComponent,
-    TuiTextfieldOptionsDirective,
+    TuiTextfield,
 } from '@taiga-ui/core';
 import {TuiAccordion} from '@taiga-ui/kit';
 import type {TuiInputComponent} from '@taiga-ui/legacy';
@@ -53,7 +53,7 @@ import {
     selector: 'tui-doc-navigation',
     imports: [
         TuiInputModule,
-        TuiTextfieldOptionsDirective,
+        TuiTextfield,
         ReactiveFormsModule,
         TuiAutoFocus,
         TuiDataList,

diff --git a/projects/core/components/label/label.directive.ts b/projects/core/components/label/label.directive.ts
@@ -31,7 +31,7 @@ class TuiLabelStyles {}
         '[class._textfield]': 'textfield',
     },
 })
-export class TuiLabelDirective {
+export class TuiLabel {
     @ContentChild(forwardRef(() => TUI_DATA_LIST_HOST))
     protected readonly textfield?: unknown;
 

diff --git a/projects/core/components/textfield/index.ts b/projects/core/components/textfield/index.ts
@@ -1,6 +1,6 @@
+export * from './textfield';
 export * from './textfield.component';
 export * from './textfield.directive';
-export * from './textfield.module';
 export * from './textfield.options';
 
 // Keeping it manually at the bottom for proper build order

diff --git a/projects/core/components/textfield/textfield.component.ts b/projects/core/components/textfield/textfield.component.ts
@@ -1,9 +1,10 @@
-import {CommonModule} from '@angular/common';
+import {AsyncPipe, NgIf} from '@angular/common';
 import {
     ChangeDetectionStrategy,
     Component,
     ContentChild,
     ElementRef,
+    forwardRef,
     inject,
     Input,
 } from '@angular/core';
@@ -14,7 +15,7 @@ import {tuiIsNativeFocused, TuiNativeValidatorDirective} from '@taiga-ui/cdk';
 import {TuiButton} from '@taiga-ui/core/components/button';
 import type {TuiDataListHost} from '@taiga-ui/core/components/data-list';
 import {tuiAsDataListHost, TuiWithDataList} from '@taiga-ui/core/components/data-list';
-import {TuiLabelDirective} from '@taiga-ui/core/components/label';
+import {TuiLabel} from '@taiga-ui/core/components/label';
 import {tuiAppearanceOptionsProvider} from '@taiga-ui/core/directives/appearance';
 import {
     TuiDropdownDirective,
@@ -23,7 +24,7 @@ import {
 } from '@taiga-ui/core/directives/dropdown';
 import {TuiIcons} from '@taiga-ui/core/directives/icons';
 import type {PolymorpheusContent} from '@taiga-ui/polymorpheus';
-import {PolymorpheusOutlet, PolymorpheusTemplate} from '@taiga-ui/polymorpheus';
+import {PolymorpheusOutlet} from '@taiga-ui/polymorpheus';
 
 import {TuiTextfieldDirective} from './textfield.directive';
 import {TUI_TEXTFIELD_OPTIONS, TuiTextfieldOptionsDirective} from './textfield.options';
@@ -35,13 +36,7 @@ export interface TuiTextfieldContext<T> extends TuiContext<T> {
 @Component({
     standalone: true,
     selector: 'tui-textfield',
-    imports: [
-        CommonModule,
-        ResizeObserverDirective,
-        TuiButton,
-        PolymorpheusOutlet,
-        PolymorpheusTemplate,
-    ],
+    imports: [NgIf, AsyncPipe, ResizeObserverDirective, TuiButton, PolymorpheusOutlet],
     templateUrl: './textfield.template.html',
     styleUrls: ['./textfield.style.less'],
     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -72,18 +67,18 @@ export interface TuiTextfieldContext<T> extends TuiContext<T> {
     ],
 })
 export class TuiTextfieldComponent<T> implements TuiDataListHost<T> {
-    @ContentChild(TuiTextfieldDirective, {read: ElementRef})
+    @ContentChild(forwardRef(() => TuiTextfieldDirective), {read: ElementRef})
     private readonly el?: ElementRef<HTMLInputElement>;
 
     private readonly dropdown = inject(TuiDropdownOpenDirective, {
         optional: true,
         self: true,
     });
 
-    @ContentChild(TuiTextfieldDirective)
+    @ContentChild(forwardRef(() => TuiTextfieldDirective))
     protected readonly directive?: TuiTextfieldDirective;
 
-    @ContentChild(TuiLabelDirective, {read: ElementRef})
+    @ContentChild(TuiLabel, {read: ElementRef})
     protected readonly label?: ElementRef<HTMLElement>;
 
     protected side = 0;

diff --git a/projects/core/components/textfield/textfield.module.ts b/projects/core/components/textfield/textfield.module.ts
diff --git a/projects/core/components/textfield/textfield.ts b/projects/core/components/textfield/textfield.ts
@@ -0,0 +1,14 @@
+import {TuiLabel} from '@taiga-ui/core/components/label';
+
+import {TuiSelectDirective} from './select.directive';
+import {TuiTextfieldComponent} from './textfield.component';
+import {TuiTextfieldDirective} from './textfield.directive';
+import {TuiTextfieldOptionsDirective} from './textfield.options';
+
+export const TuiTextfield = [
+    TuiLabel,
+    TuiSelectDirective,
+    TuiTextfieldComponent,
+    TuiTextfieldDirective,
+    TuiTextfieldOptionsDirective,
+] as const;
diff --git a/projects/demo/src/modules/components/badge-notification/index.ts b/projects/demo/src/modules/components/badge-notification/index.ts
@@ -2,12 +2,12 @@ import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {TuiDemo} from '@demo/utils';
 import type {TuiSizeL, TuiSizeXS} from '@taiga-ui/core';
-import {TuiLabelDirective} from '@taiga-ui/core';
+import {TuiLabel} from '@taiga-ui/core';
 import {TuiBadgeNotificationComponent} from '@taiga-ui/kit';
 
 @Component({
     standalone: true,
-    imports: [TuiDemo, TuiBadgeNotificationComponent, TuiLabelDirective],
+    imports: [TuiDemo, TuiBadgeNotificationComponent, TuiLabel],
     templateUrl: './index.html',
     changeDetection,
 })

diff --git a/.../demo/src/modules/components/dialog/examples/2/dialog-example/dialog-example.component.ts b/.../demo/src/modules/components/dialog/examples/2/dialog-example/dialog-example.component.ts
@@ -6,7 +6,7 @@ import {changeDetection} from '@demo/emulate/change-detection';
 import {TuiAmountPipe} from '@taiga-ui/addon-commerce';
 import {TuiAutoFocus} from '@taiga-ui/cdk';
 import type {TuiDialogContext} from '@taiga-ui/core';
-import {TuiButton, TuiDialogService, TuiTextfieldOptionsDirective} from '@taiga-ui/core';
+import {TuiButton, TuiDialogService, TuiTextfield} from '@taiga-ui/core';
 import {TuiDataListWrapper, TuiSlider} from '@taiga-ui/kit';
 import {
     TuiInputModule,
@@ -22,7 +22,7 @@ import {POLYMORPHEUS_CONTEXT} from '@taiga-ui/polymorpheus';
         TuiAmountPipe,
         AsyncPipe,
         TuiAutoFocus,
-        TuiTextfieldOptionsDirective,
+        TuiTextfield,
         FormsModule,
         TuiSelectModule,
         TuiTextfieldControllerModule,

diff --git a/projects/demo/src/modules/components/dialog/examples/9/index.ts b/projects/demo/src/modules/components/dialog/examples/9/index.ts
@@ -8,7 +8,7 @@ import {
     TuiDialogService,
     TuiHintOptionsDirective,
     TuiIconPipe,
-    TuiTextfieldOptionsDirective,
+    TuiTextfield,
 } from '@taiga-ui/core';
 import {TuiInputNumberModule, TuiTextfieldControllerModule} from '@taiga-ui/legacy';
 import {PolymorpheusComponent} from '@taiga-ui/polymorpheus';
@@ -20,7 +20,7 @@ import {PayModalComponent} from './pay-modal/pay-modal.component';
     imports: [
         TuiInputNumberModule,
         ReactiveFormsModule,
-        TuiTextfieldOptionsDirective,
+        TuiTextfield,
         TuiTextfieldControllerModule,
         TuiHintOptionsDirective,
         TuiButton,

diff --git a/projects/demo/src/modules/components/dialog/examples/9/pay-modal/pay-modal.component.ts b/projects/demo/src/modules/components/dialog/examples/9/pay-modal/pay-modal.component.ts
@@ -22,10 +22,9 @@ import {
     TuiButton,
     TuiFormatNumberPipe,
     TuiIconPipe,
-    TuiLabelDirective,
     TuiLink,
     TuiLoader,
-    TuiTextfieldOptionsDirective,
+    TuiTextfield,
 } from '@taiga-ui/core';
 import {TuiButtonLoadingComponent, TuiCheckboxComponent} from '@taiga-ui/kit';
 import {POLYMORPHEUS_CONTEXT} from '@taiga-ui/polymorpheus';
@@ -52,8 +51,7 @@ import {inputCardGroupedCVCValidator} from '../helpers/validator';
         TuiAutoFocus,
         TuiLoader,
         TuiInputCardGroup,
-        TuiTextfieldOptionsDirective,
-        TuiLabelDirective,
+        TuiTextfield,
         TuiCheckboxComponent,
         TuiIconPipe,
     ],

diff --git a/projects/demo/src/modules/components/error/examples/1/index.ts b/projects/demo/src/modules/components/error/examples/1/index.ts
@@ -3,12 +3,12 @@ import {FormsModule} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
 import {TuiValidationError} from '@taiga-ui/cdk';
-import {TuiErrorComponent, TuiLabelDirective} from '@taiga-ui/core';
+import {TuiErrorComponent, TuiLabel} from '@taiga-ui/core';
 import {TuiSwitchComponent} from '@taiga-ui/kit';
 
 @Component({
     standalone: true,
-    imports: [FormsModule, TuiLabelDirective, TuiSwitchComponent, TuiErrorComponent],
+    imports: [FormsModule, TuiLabel, TuiSwitchComponent, TuiErrorComponent],
     templateUrl: './index.html',
     encapsulation,
     changeDetection,

diff --git a/projects/demo/src/modules/components/experimental/tooltip/examples/2/index.ts b/projects/demo/src/modules/components/experimental/tooltip/examples/2/index.ts
@@ -2,15 +2,15 @@ import {Component} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
-import {TuiTextfieldOptionsDirective} from '@taiga-ui/core';
+import {TuiTextfield} from '@taiga-ui/core';
 import {TuiTooltipModule} from '@taiga-ui/experimental';
 import {TuiInputModule, TuiTextfieldControllerModule} from '@taiga-ui/legacy';
 
 @Component({
     standalone: true,
     imports: [
         TuiInputModule,
-        TuiTextfieldOptionsDirective,
+        TuiTextfield,
         TuiTextfieldControllerModule,
         FormsModule,
         TuiTooltipModule,

diff --git a/projects/demo/src/modules/components/input-phone-international/index.ts b/projects/demo/src/modules/components/input-phone-international/index.ts
@@ -8,7 +8,7 @@ import {
     TuiHint,
     TuiLink,
     TuiNotificationComponent,
-    TuiTextfieldOptionsDirective,
+    TuiTextfield,
 } from '@taiga-ui/core';
 import type {TuiCountryIsoCode} from '@taiga-ui/i18n';
 import {TuiInputPhoneInternationalComponent} from '@taiga-ui/kit';
@@ -26,7 +26,7 @@ import {InheritedDocumentationComponent} from '../abstract/inherited-documentati
         TuiDropdownModule,
         TuiHint,
         TuiInputPhoneInternationalComponent,
-        TuiTextfieldOptionsDirective,
+        TuiTextfield,
         ReactiveFormsModule,
         TuiLink,
         TuiNotificationComponent,

diff --git a/projects/demo/src/modules/components/input/examples/2/index.ts b/projects/demo/src/modules/components/input/examples/2/index.ts
@@ -2,15 +2,15 @@ import {Component} from '@angular/core';
 import {FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
-import {TuiHint, TuiTextfieldOptionsDirective} from '@taiga-ui/core';
+import {TuiHint, TuiTextfield} from '@taiga-ui/core';
 import {TuiInputModule, TuiTextfieldControllerModule} from '@taiga-ui/legacy';
 
 @Component({
     standalone: true,
     imports: [
         ReactiveFormsModule,
         TuiInputModule,
-        TuiTextfieldOptionsDirective,
+        TuiTextfield,
         TuiTextfieldControllerModule,
         TuiHint,
     ],

diff --git a/projects/demo/src/modules/components/input/examples/5/index.ts b/projects/demo/src/modules/components/input/examples/5/index.ts
@@ -2,12 +2,12 @@ import {Component} from '@angular/core';
 import {FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
-import {TuiTextfieldOptionsDirective} from '@taiga-ui/core';
+import {TuiTextfield} from '@taiga-ui/core';
 import {TuiInputModule} from '@taiga-ui/legacy';
 
 @Component({
     standalone: true,
-    imports: [ReactiveFormsModule, TuiInputModule, TuiTextfieldOptionsDirective],
+    imports: [ReactiveFormsModule, TuiInputModule, TuiTextfield],
     templateUrl: './index.html',
     styleUrls: ['./index.less'],
     encapsulation,

diff --git a/projects/demo/src/modules/components/input/examples/6/index.ts b/projects/demo/src/modules/components/input/examples/6/index.ts
@@ -3,7 +3,7 @@ import {FormControl, FormGroup, ReactiveFormsModule, Validators} from '@angular/
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
 import {TuiTable} from '@taiga-ui/addon-table';
-import {TuiTextfieldOptionsDirective} from '@taiga-ui/core';
+import {TuiTextfield} from '@taiga-ui/core';
 import {TuiDataListWrapper} from '@taiga-ui/kit';
 import {
     TuiInputDateModule,
@@ -16,7 +16,7 @@ import {
 @Component({
     standalone: true,
     imports: [
-        TuiTextfieldOptionsDirective,
+        TuiTextfield,
         ReactiveFormsModule,
         TuiTextfieldControllerModule,
         TuiInputModule,

diff --git a/projects/demo/src/modules/components/input/examples/9/index.ts b/projects/demo/src/modules/components/input/examples/9/index.ts
@@ -2,14 +2,14 @@ import {Component} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
-import {TuiHint, TuiTextfieldOptionsDirective} from '@taiga-ui/core';
+import {TuiHint, TuiTextfield} from '@taiga-ui/core';
 import {TuiInputModule, TuiTextfieldControllerModule} from '@taiga-ui/legacy';
 
 @Component({
     standalone: true,
     imports: [
         TuiInputModule,
-        TuiTextfieldOptionsDirective,
+        TuiTextfield,
         FormsModule,
         TuiHint,
         TuiTextfieldControllerModule,

diff --git a/projects/demo/src/modules/components/input/index.ts b/projects/demo/src/modules/components/input/index.ts
@@ -14,7 +14,7 @@ import {
     TuiHint,
     TuiLink,
     TuiNotificationComponent,
-    TuiTextfieldOptionsDirective,
+    TuiTextfield,
 } from '@taiga-ui/core';
 import {TuiInputModule, TuiTextfieldControllerModule} from '@taiga-ui/legacy';
 import type {PolymorpheusContent} from '@taiga-ui/polymorpheus';
@@ -37,7 +37,7 @@ const LONG_TEXT_TEMPLATE = '<span>LongTextContent</span>';
         TuiDropdownOptionsDirective,
         TuiDropdownOpenDirective,
         TuiHint,
-        TuiTextfieldOptionsDirective,
+        TuiTextfield,
         TuiTextfieldControllerModule,
         TuiAmountPipe,
         InheritedDocumentationComponent,

diff --git a/projects/demo/src/modules/components/label/examples/1/index.ts b/projects/demo/src/modules/components/label/examples/1/index.ts
@@ -2,12 +2,12 @@ import {Component} from '@angular/core';
 import {FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
-import {TuiLabelDirective, TuiTitle} from '@taiga-ui/core';
+import {TuiLabel, TuiTitle} from '@taiga-ui/core';
 import {TuiCheckboxComponent} from '@taiga-ui/kit';
 
 @Component({
     standalone: true,
-    imports: [ReactiveFormsModule, TuiLabelDirective, TuiCheckboxComponent, TuiTitle],
+    imports: [ReactiveFormsModule, TuiLabel, TuiCheckboxComponent, TuiTitle],
     templateUrl: './index.html',
     encapsulation,
     changeDetection,

diff --git a/projects/demo/src/modules/components/label/examples/2/index.ts b/projects/demo/src/modules/components/label/examples/2/index.ts
@@ -2,12 +2,12 @@ import {Component} from '@angular/core';
 import {FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
-import {TuiLabelDirective} from '@taiga-ui/core';
+import {TuiLabel} from '@taiga-ui/core';
 import {TuiRadioComponent} from '@taiga-ui/kit';
 
 @Component({
     standalone: true,
-    imports: [ReactiveFormsModule, TuiLabelDirective, TuiRadioComponent],
+    imports: [ReactiveFormsModule, TuiLabel, TuiRadioComponent],
     templateUrl: './index.html',
     encapsulation,
     changeDetection,