feat(experimental): InputPhoneInternational refactor to new textfie…

…ld approach (#9976) Co-authored-by: taiga-family-bot <[email protected]> Co-authored-by: Nikita Barsukov <[email protected]>
taiga-family · Dec 19, 2024 · 08f924d · 08f924d
1 parent e8a7926
commit 08f924d
Show file tree

Hide file tree

Showing 50 changed files with 1,019 additions and 143 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/addon-mobile/directives/dropdown-mobile/dropdown-mobile.directive.ts b/projects/addon-mobile/directives/dropdown-mobile/dropdown-mobile.directive.ts
@@ -32,7 +32,8 @@ export class TuiDropdownMobile {
         if (
             !this.isMobile ||
             !tuiIsHTMLElement(event.target) ||
-            !event.target.matches('input,textarea')
+            !event.target.matches('input,textarea') ||
+            this.tuiDropdownMobile
         ) {
             return;
         }

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/core/styles/theme/appearance/textfield.less b/projects/core/styles/theme/appearance/textfield.less
@@ -12,8 +12,28 @@
     outline-offset: -1px;
     border: none;
 
+    // TODO: Remove tuiWrapper hack in v5
+    &:not([tuiWrapper])::before,
+    &:not([tuiWrapper])::after {
+        .transition(~'color, transform');
+
+        color: var(--tui-text-tertiary);
+    }
+
     .appearance-hover({
         --t-shadow: 0 0.125rem 0.3125rem rgba(0, 0, 0, 0.16);
+
+        &:not([tuiWrapper]):before,
+        &:not([tuiWrapper]):after {
+            color: var(--tui-text-secondary);
+        }
+    });
+
+    .appearance-active({
+        &:not([tuiWrapper]):before,
+        &:not([tuiWrapper]):after {
+            color: var(--tui-text-primary);
+        }
     });
 
     .appearance-focus({
@@ -33,7 +53,8 @@
 
     &[data-mode~='readonly'],
     input&:read-only:not([data-mode]) {
-        box-shadow: none;
+        background: transparent !important;
+        box-shadow: none !important;
         outline-color: var(--tui-border-normal) !important;
     }
 

diff --git a/...mo-playwright/tests/legacy/input-phone-international/input-phone-international.pw.spec.ts b/...mo-playwright/tests/legacy/input-phone-international/input-phone-international.pw.spec.ts
@@ -1,18 +1,24 @@
 import {DemoRoute} from '@demo/routes';
-import {TuiDocumentationPagePO, tuiGoto} from '@demo-playwright/utils';
+import {
+    TuiDocumentationPagePO,
+    tuiGoto,
+    TuiInputPhoneInternationalPO,
+} from '@demo-playwright/utils';
 import type {Locator} from '@playwright/test';
 import {expect, test} from '@playwright/test';
 
 test.describe('InputPhoneInternational', () => {
     test.describe('API page', () => {
         let example: Locator;
-        let select!: Locator;
         let dropdown!: Locator;
+        let inputPhoneInternational!: TuiInputPhoneInternationalPO;
 
         test.beforeEach(({page}) => {
             example = new TuiDocumentationPagePO(page).apiPageExample;
-            select = example.locator('tui-input-phone-international select');
             dropdown = page.locator('tui-dropdown');
+            inputPhoneInternational = new TuiInputPhoneInternationalPO(
+                example.locator('tui-textfield'),
+            );
         });
 
         test('Open dropdown if readonly=false', async ({page}) => {
@@ -23,7 +29,7 @@ test.describe('InputPhoneInternational', () => {
 
             await expect(dropdown).not.toBeAttached();
 
-            await select.click();
+            await inputPhoneInternational.select.click();
 
             await expect(dropdown).toBeAttached();
         });
@@ -33,7 +39,9 @@ test.describe('InputPhoneInternational', () => {
 
             await expect(dropdown).not.toBeAttached();
 
-            await select.click();
+            await expect(async () => {
+                await inputPhoneInternational.select.click();
+            }).rejects.toThrow();
 
             await expect(dropdown).not.toBeAttached();
         });

diff --git a/projects/demo-playwright/utils/page-objects/index.ts b/projects/demo-playwright/utils/page-objects/index.ts
@@ -12,6 +12,7 @@ export * from './input-date-time.po';
 export * from './input-month.po';
 export * from './input-month-range.po';
 export * from './input-phone.po';
+export * from './input-phone-international.po';
 export * from './input-range.po';
 export * from './input-slider.po';
 export * from './input-tag.po';

diff --git a/projects/demo-playwright/utils/page-objects/input-phone-international.po.ts b/projects/demo-playwright/utils/page-objects/input-phone-international.po.ts
@@ -0,0 +1,7 @@
+import type {Locator} from '@playwright/test';
+
+import {TuiTextfieldWithDataListPO} from './textfield-with-data-list.po';
+
+export class TuiInputPhoneInternationalPO extends TuiTextfieldWithDataListPO {
+    public select: Locator = this.host.locator('.t-ipi-select');
+}
diff --git a/projects/demo/src/modules/app/pages.ts b/projects/demo/src/modules/app/pages.ts
@@ -426,6 +426,7 @@ export const pages: DocRoutePages = [
         title: 'Form',
         keywords: 'форма, поле, кнопка, группировка, группа',
         route: DemoRoute.FormLayout,
+        meta: {scheme: 'beaver', name: 'form'},
     },
     {
         section: 'Components',

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/3/index.html b/projects/demo/src/modules/components/input-phone-international/examples/3/index.html
@@ -0,0 +1,10 @@
+<tui-textfield tuiDropdownMobile="Select country">
+    <label tuiLabel>Phone number</label>
+    <input
+        tuiInputPhoneInternational
+        [countries]="(countries | tuiSortCountries | async) || []"
+        [countrySearch]="true"
+        [(countryIsoCode)]="countryIsoCode"
+        [(ngModel)]="value"
+    />
+</tui-textfield>