feat(experimental): InputPhoneInternational refactor to new textfie…

…ld approach
taiga-family · Dec 12, 2024 · c7c21ac · c7c21ac
1 parent 9a2af42
commit c7c21ac
Show file tree

Hide file tree

Showing 35 changed files with 773 additions and 105 deletions.
diff --git a/projects/addon-commerce/components/input-card/input-card.component.ts b/projects/addon-commerce/components/input-card/input-card.component.ts
@@ -15,7 +15,7 @@ import {MaskitoDirective} from '@maskito/angular';
 import {TUI_MASK_CARD} from '@taiga-ui/addon-commerce/constants';
 import {TUI_PAYMENT_SYSTEM_ICONS} from '@taiga-ui/addon-commerce/tokens';
 import {tuiControlValue} from '@taiga-ui/cdk/observables';
-import {TuiTextfieldContent} from '@taiga-ui/core/components/textfield';
+import {TuiTextfieldContent, TuiWithTextfield} from '@taiga-ui/core/components/textfield';
 import {tuiInjectIconResolver} from '@taiga-ui/core/tokens';
 import {tuiMaskito} from '@taiga-ui/kit/utils';
 import {distinctUntilChanged, map, skip, startWith, switchMap, timer} from 'rxjs';
@@ -38,7 +38,7 @@ import {TUI_INPUT_CARD_OPTIONS} from './input-card.options';
     styleUrls: ['./input-card.style.less'],
     encapsulation: ViewEncapsulation.None,
     changeDetection: ChangeDetectionStrategy.OnPush,
-    hostDirectives: [MaskitoDirective],
+    hostDirectives: [MaskitoDirective, TuiWithTextfield],
     host: {
         inputmode: 'numeric',
         placeholder: '0000 0000 0000 0000',

diff --git a/projects/addon-commerce/components/input-cvc/input-cvc.directive.ts b/projects/addon-commerce/components/input-cvc/input-cvc.directive.ts
@@ -3,12 +3,13 @@ import {Directive, inject, Input} from '@angular/core';
 import {MaskitoDirective} from '@maskito/angular';
 import {TUI_INPUT_CARD_OPTIONS} from '@taiga-ui/addon-commerce/components/input-card';
 import {TUI_MASK_CVC} from '@taiga-ui/addon-commerce/constants';
+import {TuiWithTextfield} from '@taiga-ui/core/components/textfield';
 import {tuiMaskito} from '@taiga-ui/kit/utils';
 
 @Directive({
     standalone: true,
     selector: 'input[tuiInputCVC]',
-    hostDirectives: [MaskitoDirective],
+    hostDirectives: [MaskitoDirective, TuiWithTextfield],
     host: {
         inputmode: 'numeric',
         '[autocomplete]': 'autocomplete ? "cc-csc" : "off"',

diff --git a/projects/addon-commerce/components/input-expire/input-expire.directive.ts b/projects/addon-commerce/components/input-expire/input-expire.directive.ts
@@ -2,12 +2,13 @@ import {Directive, inject, Input} from '@angular/core';
 import {MaskitoDirective} from '@maskito/angular';
 import {TUI_INPUT_CARD_OPTIONS} from '@taiga-ui/addon-commerce/components/input-card';
 import {TUI_MASK_EXPIRE} from '@taiga-ui/addon-commerce/constants';
+import {TuiWithTextfield} from '@taiga-ui/core/components/textfield';
 import {tuiMaskito} from '@taiga-ui/kit/utils';
 
 @Directive({
     standalone: true,
     selector: 'input[tuiInputExpire]',
-    hostDirectives: [MaskitoDirective],
+    hostDirectives: [MaskitoDirective, TuiWithTextfield],
     host: {
         inputmode: 'numeric',
         placeholder: '00/00',

diff --git a/projects/core/components/textfield/textfield.directive.ts b/projects/core/components/textfield/textfield.directive.ts
@@ -28,7 +28,7 @@ export class TuiTextfieldBase<T> implements OnChanges {
     protected readonly s = tuiAppearanceState(null);
     protected readonly m = tuiAppearanceMode(this.mode);
     protected readonly f = tuiAppearanceFocus(
-        computed(() => this.focused() || this.textfield.focused()),
+        computed(() => this.focused() ?? this.textfield.focused()),
     );
 
     protected readonly el = tuiInjectElement<HTMLInputElement>();
@@ -99,7 +99,9 @@ export class TuiTextfieldBase<T> implements OnChanges {
 
 @Directive({
     standalone: true,
-    selector: 'input[tuiTextfield]',
+    // TODO: Remove :not in v.5
+    selector:
+        'input[tuiTextfield]:not([tuiInputCard]):not([tuiInputExpire]):not([tuiInputCVC])',
     hostDirectives: [TuiNativeValidator, TuiAppearance],
     host: {
         '[id]': 'textfield.id',
@@ -111,3 +113,14 @@ export class TuiTextfieldBase<T> implements OnChanges {
     },
 })
 export class TuiTextfieldDirective<T> extends TuiTextfieldBase<T> {}
+
+@Directive({
+    standalone: true,
+    hostDirectives: [
+        {
+            directive: TuiTextfieldDirective,
+            inputs: ['invalid', 'focused', 'readOnly', 'state'],
+        },
+    ],
+})
+export class TuiWithTextfield {}
diff --git a/projects/core/directives/dropdown/dropdown-open.directive.ts b/projects/core/directives/dropdown/dropdown-open.directive.ts
@@ -137,19 +137,15 @@ export class TuiDropdownOpen implements OnChanges {
 
     protected onKeydown({key, target, defaultPrevented}: KeyboardEvent): void {
         if (
-            defaultPrevented ||
-            !tuiIsEditingKey(key) ||
-            !this.editable ||
-            !this.focused ||
-            !this.directive.content ||
-            !tuiIsHTMLElement(target) ||
-            (tuiIsElementEditable(target) && target !== this.host)
+            !defaultPrevented &&
+            tuiIsEditingKey(key) &&
+            this.editable &&
+            this.focused &&
+            tuiIsHTMLElement(target) &&
+            !tuiIsElementEditable(target)
         ) {
-            return;
+            this.host.focus({preventScroll: true});
         }
-
-        this.update(true);
-        this.host.focus({preventScroll: true});
     }
 
     private get host(): HTMLElement {

diff --git a/projects/core/styles/components/textfield.less b/projects/core/styles/components/textfield.less
@@ -279,6 +279,7 @@ tui-textfield {
         gap: 0.25rem;
         margin-inline-start: auto;
         isolation: isolate;
+        border-radius: inherit;
 
         > tui-icon {
             pointer-events: auto;

diff --git a/projects/demo/src/modules/components/input-card/examples/1/index.html b/projects/demo/src/modules/components/input-card/examples/1/index.html
@@ -4,7 +4,6 @@
         <input
             formControlName="card"
             tuiInputCard
-            tuiTextfield
             [icon]="card"
             (binChange)="onBinChange($event)"
         />
@@ -15,15 +14,13 @@
             <input
                 formControlName="expire"
                 tuiInputExpire
-                tuiTextfield
             />
         </tui-textfield>
         <tui-textfield>
             <label tuiLabel>CVC/CVV</label>
             <input
                 formControlName="cvc"
                 tuiInputCVC
-                tuiTextfield
             />
         </tui-textfield>
     </section>

diff --git a/projects/demo/src/modules/components/input-card/examples/2/index.html b/projects/demo/src/modules/components/input-card/examples/2/index.html
@@ -3,7 +3,6 @@
     <input
         icon=""
         tuiInputCard
-        tuiTextfield
         [(ngModel)]="card"
     />
     <tui-thumbnail-card

diff --git a/projects/demo/src/modules/components/input-card/examples/import/template.md b/projects/demo/src/modules/components/input-card/examples/import/template.md
@@ -5,23 +5,20 @@
     <input
       formControlName="card"
       tuiInputCard
-      tuiTextfield
     />
   </tui-textfield>
   <tui-textfield>
     <label tuiLabel>Expire date</label>
     <input
       formControlName="expire"
       tuiInputExpire
-      tuiTextfield
     />
   </tui-textfield>
   <tui-textfield>
     <label tuiLabel>CVC/CVV</label>
     <input
       formControlName="cvc"
       tuiInputCVC
-      tuiTextfield
     />
   </tui-textfield>
 </form>

diff --git a/projects/demo/src/modules/components/input-card/index.html b/projects/demo/src/modules/components/input-card/index.html
@@ -54,7 +54,6 @@
                 <label tuiLabel>Card number</label>
                 <input
                     tuiInputCard
-                    tuiTextfield
                     [autocomplete]="autocomplete"
                     [disabled]="control.disabled"
                     [icon]="icon"

diff --git a/projects/demo/src/modules/components/input-phone-international/examples/1/index.html b/projects/demo/src/modules/components/input-phone-international/examples/1/index.html
@@ -1,5 +1,8 @@
-<tui-input-phone-international
-    [countries]="countries"
-    [(countryIsoCode)]="countryIsoCode"
-    [(ngModel)]="value"
-/>
+<tui-textfield>
+    <input
+        tuiInputPhoneInternational
+        [countries]="countries"
+        [(countryIsoCode)]="countryIsoCode"
+        [(ngModel)]="value"
+    />
+</tui-textfield>
diff --git a/projects/demo/src/modules/components/input-phone-international/examples/1/index.ts b/projects/demo/src/modules/components/input-phone-international/examples/1/index.ts
@@ -2,16 +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 {TuiTextfield} from '@taiga-ui/core';
+import {TuiInputPhoneInternational} from '@taiga-ui/experimental';
 import type {TuiCountryIsoCode} from '@taiga-ui/i18n';
-import {
-    TuiInputPhoneInternational,
-    tuiInputPhoneInternationalOptionsProvider,
-} from '@taiga-ui/kit';
+import {tuiInputPhoneInternationalOptionsProvider} from '@taiga-ui/kit';
 import {defer} from 'rxjs';
 
 @Component({
     standalone: true,
-    imports: [FormsModule, TuiInputPhoneInternational],
+    imports: [FormsModule, TuiInputPhoneInternational, TuiTextfield],
     templateUrl: './index.html',
     encapsulation,
     changeDetection,

diff --git a/projects/demo/src/modules/components/input-phone-international/examples/2/index.html b/projects/demo/src/modules/components/input-phone-international/examples/2/index.html
@@ -1,8 +1,10 @@
-<tui-input-phone-international
-    [countries]="(countries | tuiSortCountries | async) || []"
-    [countrySearch]="true"
-    [(countryIsoCode)]="countryIsoCode"
-    [(ngModel)]="value"
->
-    Type your number
-</tui-input-phone-international>
+<tui-textfield>
+    <label tuiLabel>Phone number</label>
+    <input
+        tuiInputPhoneInternational
+        [countries]="(countries | tuiSortCountries | async) || []"
+        [countrySearch]="true"
+        [(countryIsoCode)]="countryIsoCode"
+        [(ngModel)]="value"
+    />
+</tui-textfield>
diff --git a/projects/demo/src/modules/components/input-phone-international/examples/2/index.ts b/projects/demo/src/modules/components/input-phone-international/examples/2/index.ts
@@ -3,9 +3,10 @@ import {Component} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiTextfield} from '@taiga-ui/core';
+import {TuiInputPhoneInternational} from '@taiga-ui/experimental';
 import type {TuiCountryIsoCode} from '@taiga-ui/i18n';
 import {
-    TuiInputPhoneInternational,
     tuiInputPhoneInternationalOptionsProvider,
     TuiSortCountriesPipe,
 } from '@taiga-ui/kit';
@@ -14,7 +15,13 @@ import {defer} from 'rxjs';
 
 @Component({
     standalone: true,
-    imports: [AsyncPipe, FormsModule, TuiInputPhoneInternational, TuiSortCountriesPipe],
+    imports: [
+        AsyncPipe,
+        FormsModule,
+        TuiInputPhoneInternational,
+        TuiSortCountriesPipe,
+        TuiTextfield,
+    ],
     templateUrl: './index.html',
     encapsulation,
     changeDetection,

diff --git a/projects/demo/src/modules/components/input-phone-international/examples/4/index.html b/projects/demo/src/modules/components/input-phone-international/examples/4/index.html
@@ -1,14 +1,16 @@
-<tui-input-phone-international
-    [countries]="countries"
-    [(countryIsoCode)]="countryIsoCode"
-    [(ngModel)]="value"
->
-    Phone number
+<tui-textfield [style.inline-size.rem]="20">
+    <label tuiLabel>Phone number</label>
+    <input
+        tuiInputPhoneInternational
+        [countries]="countries"
+        [(countryIsoCode)]="countryIsoCode"
+        [(ngModel)]="value"
+    />
     <tui-icon
         appearance="negative"
         tuiHintAppearance="error"
         tuiHintDirection="top"
         tuiTooltip="I am a hint"
     />
     <tui-icon icon="@tui.phone" />
-</tui-input-phone-international>
+</tui-textfield>
diff --git a/projects/demo/src/modules/components/input-phone-international/examples/4/index.less b/projects/demo/src/modules/components/input-phone-international/examples/4/index.less
diff --git a/projects/demo/src/modules/components/input-phone-international/examples/4/index.ts b/projects/demo/src/modules/components/input-phone-international/examples/4/index.ts
@@ -2,20 +2,16 @@ import {Component} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
-import {TuiIcon} from '@taiga-ui/core';
+import {TuiIcon, TuiTextfield} from '@taiga-ui/core';
+import {TuiInputPhoneInternational} from '@taiga-ui/experimental';
 import type {TuiCountryIsoCode} from '@taiga-ui/i18n';
-import {
-    TuiInputPhoneInternational,
-    tuiInputPhoneInternationalOptionsProvider,
-    TuiTooltip,
-} from '@taiga-ui/kit';
+import {tuiInputPhoneInternationalOptionsProvider, TuiTooltip} from '@taiga-ui/kit';
 import {defer} from 'rxjs';
 
 @Component({
     standalone: true,
-    imports: [FormsModule, TuiIcon, TuiInputPhoneInternational, TuiTooltip],
+    imports: [FormsModule, TuiIcon, TuiInputPhoneInternational, TuiTooltip, TuiTextfield],
     templateUrl: './index.html',
-    styleUrls: ['./index.less'],
     encapsulation,
     changeDetection,
     providers: [

diff --git a/projects/demo/src/modules/components/input-phone-international/examples/5/index.html b/projects/demo/src/modules/components/input-phone-international/examples/5/index.html
@@ -1,7 +1,9 @@
-<tui-input-phone-international
-    [countries]="countries"
-    [(countryIsoCode)]="countryIsoCode"
-    [(ngModel)]="value"
->
-    Type your number
-</tui-input-phone-international>
+<tui-textfield>
+    <label tuiLabel>Type your number</label>
+    <input
+        tuiInputPhoneInternational
+        [countries]="countries"
+        [(countryIsoCode)]="countryIsoCode"
+        [(ngModel)]="value"
+    />
+</tui-textfield>
diff --git a/projects/demo/src/modules/components/input-phone-international/examples/5/index.ts b/projects/demo/src/modules/components/input-phone-international/examples/5/index.ts
@@ -2,17 +2,16 @@ import {Component} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiTextfield} from '@taiga-ui/core';
+import {TuiInputPhoneInternational} from '@taiga-ui/experimental';
 import type {TuiCountryIsoCode} from '@taiga-ui/i18n';
-import {
-    TuiInputPhoneInternational,
-    tuiInputPhoneInternationalOptionsProvider,
-} from '@taiga-ui/kit';
+import {tuiInputPhoneInternationalOptionsProvider} from '@taiga-ui/kit';
 import {getCountries} from 'libphonenumber-js';
 import {defer} from 'rxjs';
 
 @Component({
     standalone: true,
-    imports: [FormsModule, TuiInputPhoneInternational],
+    imports: [FormsModule, TuiInputPhoneInternational, TuiTextfield],
     templateUrl: './index.html',
     encapsulation,
     changeDetection,

diff --git a/...demo/src/modules/components/input-phone-international/examples/import/import.md b/...demo/src/modules/components/input-phone-international/examples/import/import.md
@@ -1,5 +1,6 @@
 ```ts
 import {ReactiveFormsModule} from '@angular/forms';
+import type {TuiCountryIsoCode} from '@taiga-ui/i18n';
 import {TuiInputPhoneInternational} from '@taiga-ui/kit';
 
 @Component({
@@ -12,11 +13,6 @@ export class Example {
     testValue: new FormControl('+78005553535'),
   });
 
-  readonly countries: ReadonlyArray<TuiCountryIsoCode> = [
-    TuiCountryIsoCode.RU,
-    TuiCountryIsoCode.KZ,
-    TuiCountryIsoCode.UA,
-    TuiCountryIsoCode.BY,
-  ];
+  readonly countries: ReadonlyArray<TuiCountryIsoCode> = ['RU', 'KZ', 'UA', 'BY'];
 }
 ```
diff --git a/...mo/src/modules/components/input-phone-international/examples/import/template.md b/...mo/src/modules/components/input-phone-international/examples/import/template.md
@@ -1,8 +1,11 @@
 ```html
 <form [formGroup]="testForm">
-  <tui-input-phone-international
-    formControlName="testValue"
-    [countries]="countries"
-  ></tui-input-phone-international>
+  <tui-textfield>
+    <input
+      tuiInputPhoneInternational
+      formControlName="testValue"
+      [countries]="countries"
+    />
+  </tui-textfield>
 </form>
 ```