taiga-family · waterplea · Dec 19, 2024 · Dec 12, 2024 · Dec 12, 2024 · Dec 12, 2024
@@ -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',

@@ -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"',

@@ -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',

@@ -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 {}
@@ -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 {

@@ -279,6 +279,7 @@ tui-textfield {
         gap: 0.25rem;
         margin-inline-start: auto;
         isolation: isolate;
+        border-radius: inherit;
 
         > tui-icon {
             pointer-events: auto;

@@ -12,8 +12,28 @@
     outline-offset: -1px;
     border: none;
 
+    // TODO: Remove tuiWrapper hack in v5
+    &:not([tuiWrapper])::before,
+    &:not([tuiWrapper])::after {
+        .transition(color);
+
+        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;
     }
 

@@ -11,7 +11,7 @@
 
         test.beforeEach(({page}) => {
             example = new TuiDocumentationPagePO(page).apiPageExample;
-            select = example.locator('tui-input-phone-international select');
+            select = example.locator('tui-textfield .t-ipi-select');
             dropdown = page.locator('tui-dropdown');
         });
 
@@ -33,7 +33,7 @@

            await expect(dropdown).not.toBeAttached();

            await select.click();

            await expect(dropdown).not.toBeAttached();
        });

@@ -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>

@@ -3,7 +3,6 @@
     <input
         icon=""
         tuiInputCard
-        tuiTextfield
         [(ngModel)]="card"
     />
     <tui-thumbnail-card

@@ -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>

@@ -54,7 +54,6 @@
                 <label tuiLabel>Card number</label>
                 <input
                     tuiInputCard
-                    tuiTextfield
                     [autocomplete]="autocomplete"
                     [disabled]="control.disabled"
                     [icon]="icon"

@@ -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>
@@ -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,

@@ -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>
@@ -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,

@@ -0,0 +1,5 @@
+<tui-input-phone-international
+    [countries]="countries"
+    [(countryIsoCode)]="countryIsoCode"
+    [(ngModel)]="value"
+/>
@@ -1,31 +1,53 @@
 import {Component} from '@angular/core';
+import {FormsModule} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
-import {MaskitoPipe} from '@maskito/angular';
-import {maskitoTransform} from '@maskito/core';
-import {maskitoPhoneOptionsGenerator} from '@maskito/phone';
-import metadata from 'libphonenumber-js/max/metadata';
+import {TuiTextfield} from '@taiga-ui/core';
+import type {TuiCountryIsoCode} from '@taiga-ui/i18n';
+import {
+    TuiInputPhoneInternational,
+    tuiInputPhoneInternationalOptionsProvider,
+} from '@taiga-ui/kit';
+import {defer} from 'rxjs';
 
 @Component({
     standalone: true,
-    imports: [MaskitoPipe],
-    template: `
-        Phone: {{ rawValue | maskito: mask }}
-    `,
+    imports: [FormsModule, TuiInputPhoneInternational, TuiTextfield],
+    templateUrl: './index.html',
     encapsulation,
     changeDetection,
-    host: {
-        '(click)': 'showUtilityPower()',
-    },
+    providers: [
+        /**
+         * You can choose: lazily load metadata or include it in your bundle.
+         * Lazy loading:
+         */
+        tuiInputPhoneInternationalOptionsProvider({
+            metadata: defer(async () =>
+                import('libphonenumber-js/max/metadata').then((m) => m.default),
+            ),
+        }),
+        /**
+         * Eager loading:
+         * ```ts
+         * import metadata from 'libphonenumber-js/mobile/metadata';
+         * import {of} from 'rxjs';
+         * // [...]
+         * tuiInputPhoneInternationalOptionsProvider({
+         *     metadata: of(metadata),
+         * }),
+         * ```
+         */
+    ],
 })
 export default class Example {
-    protected rawValue = '12125552368';
-    protected readonly mask = maskitoPhoneOptionsGenerator({
-        metadata,
-        countryIsoCode: 'US',
-    });
+    protected readonly countries: readonly TuiCountryIsoCode[] = [
+        'IN',
+        'CN',
+        'US',
+        'ID',
+        'PK',
+    ];
 
-    protected showUtilityPower(): void {
-        console.info(maskitoTransform(this.rawValue, this.mask));
-    }
+    protected countryIsoCode: TuiCountryIsoCode = 'US';
+    protected value = '+12125552368';
 }