feat(kit): added search function in international phone component (#8546

)

Co-authored-by: Денис Буланов <[email protected]>

projects/core/components/data-list/data-list.component.ts

@@ -70,7 +70,6 @@ export class TuiDataListComponent<T>
     private readonly destroyRef = inject(DestroyRef);
     private readonly el = tuiInjectElement();
     private readonly cdr = inject(ChangeDetectorRef);
-
     protected readonly fallback = toSignal(inject(TUI_NOTHING_FOUND_MESSAGE));
     protected readonly empty = signal(false);
 

projects/core/tokens/common-icons.ts

@@ -6,13 +6,15 @@ const COMMON_ICONS: TuiCommonIcons = {
     close: '@tui.x',
     error: '@tui.circle-alert',
     more: '@tui.chevron-right',
+    search: '@tui.search',
 };
 
 export interface TuiCommonIcons {
     readonly check: string;
     readonly close: string;
     readonly error: string;
     readonly more: string;
+    readonly search: string;
 }
 
 export const TUI_COMMON_ICONS = tuiCreateToken(COMMON_ICONS);

projects/demo/src/modules/components/input-phone-international/examples/2/index.html

@@ -1,5 +1,6 @@
 <tui-input-phone-international
     [countries]="(countries | tuiSortCountries | async) || []"
+    [countrySearch]="true"
     [(countryIsoCode)]="countryIsoCode"
     [(ngModel)]="value"
 >

projects/demo/src/modules/components/input-phone-international/index.html

@@ -199,6 +199,7 @@
             <ng-template>
                 <tui-input-phone-international
                     [countries]="countries"
+                    [countrySearch]="countrySearch"
                     [formControl]="control"
                     [invalid]="pseudoInvalid"
                     [readOnly]="readOnly"
@@ -236,6 +237,14 @@
             >
                 Array of ISO-codes of countries to choose
             </ng-template>
+            <ng-template
+                documentationPropertyMode="input"
+                documentationPropertyName="countrySearch"
+                documentationPropertyType="boolean"
+                [(documentationPropertyValue)]="countrySearch"
+            >
+                Enable filter input for countries
+            </ng-template>
             <ng-template
                 documentationPropertyMode="input-output"
                 documentationPropertyName="countryIsoCode"

projects/demo/src/modules/components/input-phone-international/index.ts

@@ -47,6 +47,7 @@ export default class PageComponent extends AbstractExampleTuiControl {
     ];
 
     protected countries = this.countriesVariants[0]!;
+    protected countrySearch = false;
 
     protected readonly countryIsoCodeVariants: readonly TuiCountryIsoCode[] = [
         'RU',

projects/i18n/languages/belarusian/kit.ts

@@ -69,4 +69,5 @@ export const TUI_BELARUSIAN_LANGUAGE_KIT: TuiLanguageKit = {
         zoomOut: 'Паменшыць',
         reset: 'Скінуць маштаб',
     },
+    phoneSearch: 'Увядзіце краіну або код',
 };

projects/i18n/languages/chinese/kit.ts

@@ -69,4 +69,5 @@ export const TUI_CHINESE_LANGUAGE_KIT: TuiLanguageKit = {
         zoomIn: '放大',
         reset: '重置',
     },
+    phoneSearch: '輸入國家或代碼',
 };

projects/i18n/languages/dutch/kit.ts

@@ -69,4 +69,5 @@ export const TUI_DUTCH_LANGUAGE_KIT: TuiLanguageKit = {
         zoomIn: 'Inzoomen',
         reset: 'Opnieuw instellen',
     },
+    phoneSearch: 'Indtast land eller kode',
 };

projects/i18n/languages/english/kit.ts

@@ -69,4 +69,5 @@ export const TUI_ENGLISH_LANGUAGE_KIT: TuiLanguageKit = {
         zoomIn: 'Zoom in',
         reset: 'Reset',
     },
+    phoneSearch: 'Type country or code',
 };

projects/i18n/languages/french/kit.ts

@@ -73,4 +73,5 @@ export const TUI_FRENCH_LANGUAGE_KIT: TuiLanguageKit = {
         zoomIn: 'Dézoomer',
         reset: 'Réinitialiser',
     },
+    phoneSearch: 'Tapez le pays ou le code',
 };

projects/i18n/languages/german/kit.ts

@@ -70,4 +70,5 @@ export const TUI_GERMAN_LANGUAGE_KIT: TuiLanguageKit = {
         zoomIn: 'Vergrößern',
         reset: 'Zurücksetzen',
     },
+    phoneSearch: 'Geben Sie das Land oder den Code ein',
 };

projects/i18n/languages/hebrew/kit.ts

@@ -69,4 +69,5 @@ export const TUI_HEBREW_LANGUAGE_KIT: TuiLanguageKit = {
         zoomIn: 'לְהִתְמַקֵד',
         reset: 'אִתחוּל',
     },
+    phoneSearch: 'הקלד מדינה או קוד',
 };

projects/i18n/languages/italian/kit.ts

@@ -69,4 +69,5 @@ export const TUI_ITALIAN_LANGUAGE_KIT: TuiLanguageKit = {
         zoomIn: 'Ingrandisci',
         reset: 'Ripristina',
     },
+    phoneSearch: 'Digitare il paese o il codice',
 };

projects/i18n/languages/japan/kit.ts

@@ -69,4 +69,5 @@ export const TUI_JAPAN_LANGUAGE_KIT: TuiLanguageKit = {
         zoomIn: 'ズームイン',
         reset: 'リセット',
     },
+    phoneSearch: '国またはコードを入力',
 };

projects/i18n/languages/kazakh/kit.ts

@@ -69,4 +69,5 @@ export const TUI_KAZAKH_LANGUAGE_KIT: TuiLanguageKit = {
         zoomIn: 'Үлкейту',
         reset: 'Қалпына келтіру',
     },
+    phoneSearch: 'Елді немесе кодты теріңіз',
 };

projects/i18n/languages/korean/kit.ts

@@ -69,4 +69,5 @@ export const TUI_KOREAN_LANGUAGE_KIT: TuiLanguageKit = {
         zoomIn: '확대하다',
         reset: '다시 놓기',
     },
+    phoneSearch: '국가 또는 코드를 입력하세요',
 };

projects/i18n/languages/lithuanian/kit.ts

@@ -73,4 +73,5 @@ export const TUI_LITHUANIAN_LANGUAGE_KIT: TuiLanguageKit = {
         zoomIn: 'Didinti',
         reset: 'Atstatyti',
     },
+    phoneSearch: 'Ievadiet valsti vai kodu',
 };

projects/i18n/languages/malay/kit.ts

@@ -69,4 +69,5 @@ export const TUI_MALAY_LANGUAGE_KIT: TuiLanguageKit = {
         zoomIn: 'Zum masuk',
         reset: 'Set semula',
     },
+    phoneSearch: 'Taip negara atau kod',
 };

projects/i18n/languages/polish/kit.ts

@@ -69,4 +69,5 @@ export const TUI_POLISH_LANGUAGE_KIT: TuiLanguageKit = {
         zoomIn: 'Zbliżenie',
         reset: 'Resetowanie',
     },
+    phoneSearch: 'Nuna imaluunniit kode allaguk',
 };

projects/i18n/languages/portuguese/kit.ts

@@ -69,4 +69,5 @@ export const TUI_PORTUGUESE_LANGUAGE_KIT: TuiLanguageKit = {
         zoomIn: 'Mais Zoom',
         reset: 'Reiniciar',
     },
+    phoneSearch: 'Introduza o país ou código',
 };

projects/i18n/languages/russian/kit.ts

@@ -69,4 +69,5 @@ export const TUI_RUSSIAN_LANGUAGE_KIT: TuiLanguageKit = {
         zoomOut: 'Уменьшить масштаб',
         reset: 'Сбросить масштаб',
     },
+    phoneSearch: 'Введите страну или код',
 };

projects/i18n/languages/spanish/kit.ts

@@ -69,4 +69,5 @@ export const TUI_SPANISH_LANGUAGE_KIT: TuiLanguageKit = {
         zoomIn: 'Acercarse',
         reset: 'Reiniciar',
     },
+    phoneSearch: 'Escriba el país o el código',
 };

projects/i18n/languages/turkish/kit.ts

@@ -69,4 +69,5 @@ export const TUI_TURKISH_LANGUAGE_KIT: TuiLanguageKit = {
         zoomIn: 'Yakınlaştır',
         reset: 'Sıfırla',
     },
+    phoneSearch: 'Ülke veya kodu yazın',
 };

projects/i18n/languages/ukrainian/kit.ts

@@ -69,4 +69,5 @@ export const TUI_UKRAINIAN_LANGUAGE_KIT: TuiLanguageKit = {
         zoomIn: 'Збільшувати',
         reset: 'Скинути',
     },
+    phoneSearch: 'Введіть країну або код',
 };

projects/i18n/languages/vietnamese/kit.ts

@@ -69,4 +69,5 @@ export const TUI_VIETNAMESE_LANGUAGE_KIT: TuiLanguageKit = {
         zoomIn: 'Phóng to',
         reset: 'Đặt lại',
     },
+    phoneSearch: 'Nhập quốc gia hoặc mã',
 };

projects/i18n/types/language.ts

@@ -109,6 +109,7 @@ export interface TuiLanguageKit {
         zoomOut: string;
         reset: string;
     };
+    phoneSearch: string;
 }
 
 export interface TuiLanguageCommerce {

projects/kit/components/input-phone-international/input-phone-international.component.ts

@@ -1,4 +1,5 @@
-import {CommonModule} from '@angular/common';
+import {AsyncPipe, CommonModule} from '@angular/common';
+import type {QueryList} from '@angular/core';
 import {
     ChangeDetectionStrategy,
     Component,
@@ -11,6 +12,7 @@ import {
     signal,
     TemplateRef,
     ViewChild,
+    ViewChildren,
 } from '@angular/core';
 import {toObservable, toSignal} from '@angular/core/rxjs-interop';
 import {FormsModule} from '@angular/forms';
@@ -20,19 +22,19 @@ import {maskitoInitialCalibrationPlugin, maskitoTransform} from '@maskito/core';
 import {maskitoRemoveOnBlurPlugin} from '@maskito/kit';
 import {maskitoGetCountryFromNumber, maskitoPhoneOptionsGenerator} from '@maskito/phone';
 import {tuiAsControl, TuiControl} from '@taiga-ui/cdk/classes';
-import {CHAR_PLUS} from '@taiga-ui/cdk/constants';
+import {CHAR_PLUS, TUI_DEFAULT_MATCHER} from '@taiga-ui/cdk/constants';
+import {TuiAutoFocus} from '@taiga-ui/cdk/directives/auto-focus';
 import {tuiFallbackValueProvider} from '@taiga-ui/cdk/tokens';
 import {tuiIsInputEvent} from '@taiga-ui/cdk/utils/dom';
 import {tuiDirectiveBinding} from '@taiga-ui/cdk/utils/miscellaneous';
-import {TuiDataList} from '@taiga-ui/core/components/data-list';
+import {TuiDataList, TuiOption} from '@taiga-ui/core/components/data-list';
 import {
     TUI_TEXTFIELD_OPTIONS,
     TuiTextfield,
     TuiTextfieldDropdownDirective,
     tuiTextfieldOptionsProvider,
 } from '@taiga-ui/core/components/textfield';
 import {
-    TuiDropdown,
     tuiDropdown,
     TuiDropdownDirective,
     TuiDropdownOpen,
@@ -42,16 +44,17 @@ import {
 } from '@taiga-ui/core/directives/dropdown';
 import {TuiGroup} from '@taiga-ui/core/directives/group';
 import {TuiFlagPipe} from '@taiga-ui/core/pipes/flag';
+import {TUI_COMMON_ICONS} from '@taiga-ui/core/tokens';
 import type {TuiCountryIsoCode} from '@taiga-ui/i18n/types';
 import {TuiChevron} from '@taiga-ui/kit/directives';
-import {TUI_COUNTRIES} from '@taiga-ui/kit/tokens';
+import {TUI_COUNTRIES, TUI_INTERNATIONAL_SEARCH} from '@taiga-ui/kit/tokens';
+import {tuiGetCallingCode} from '@taiga-ui/kit/utils';
 import type {PolymorpheusContent} from '@taiga-ui/polymorpheus';
 import {validatePhoneNumberLength} from 'libphonenumber-js';
 import type {MetadataJson} from 'libphonenumber-js/core';
 import {getCountryCallingCode} from 'libphonenumber-js/core';
 import {from, skip} from 'rxjs';
 
-import {TuiGetCountryCallingCodePipe} from './get-country-calling-code.pipe';
 import {TUI_INPUT_PHONE_INTERNATIONAL_OPTIONS} from './input-phone-international.options';
 
 const NOT_FORM_CONTROL_SYMBOLS = /[^+\d]/g;
@@ -60,15 +63,14 @@ const NOT_FORM_CONTROL_SYMBOLS = /[^+\d]/g;
     standalone: true,
     selector: 'tui-input-phone-international',
     imports: [
+        AsyncPipe,
         CommonModule,
         FormsModule,
         MaskitoDirective,
+        TuiAutoFocus,
         TuiChevron,
         TuiDataList,
-        TuiDropdown,
         TuiFlagPipe,
-        TuiGetCountryCallingCodePipe,
-        TuiGroup,
         TuiTextfield,
     ],
     templateUrl: './input-phone-international.template.html',
@@ -92,13 +94,30 @@ export class TuiInputPhoneInternational extends TuiControl<string> {
     @ViewChild(MaskitoDirective, {read: ElementRef})
     private readonly input?: ElementRef<HTMLInputElement>;
 
+    @ViewChildren(TuiOption, {read: ElementRef})
+    private readonly listOptions?: QueryList<ElementRef<HTMLButtonElement>>;
+
     protected readonly dropdown = tuiDropdown(null);
     protected readonly options = inject(TUI_INPUT_PHONE_INTERNATIONAL_OPTIONS);
     protected readonly size = inject(TUI_TEXTFIELD_OPTIONS).size;
     protected readonly open = tuiDropdownOpen();
     protected readonly names = toSignal(inject(TUI_COUNTRIES));
     protected readonly metadata = toSignal(from(this.options.metadata));
     protected readonly countryIsoCode = signal(this.options.countryIsoCode);
+    protected readonly icons = inject(TUI_COMMON_ICONS);
+    protected readonly internationalSearchLabel$ = inject(TUI_INTERNATIONAL_SEARCH);
+    protected readonly search = signal<string>('');
+
+    protected readonly filtered = computed(() =>
+        this.countries
+            .map((iso) => ({
+                iso,
+                name: this.names()?.[iso] || '',
+                code: tuiGetCallingCode(iso, this.metadata()),
+            }))
+            .filter(({name, code}) => TUI_DEFAULT_MATCHER(name + code, this.search())),
+    );
+
     protected readonly mask = computed(() =>
         this.computeMask(this.countryIsoCode(), this.metadata()),
     );
@@ -114,6 +133,9 @@ export class TuiInputPhoneInternational extends TuiControl<string> {
     @Input()
     public countries = this.options.countries;
 
+    @Input()
+    public countrySearch = false;
+
     @Output()
     public readonly countryIsoCodeChange = toObservable(this.countryIsoCode).pipe(
         skip(1),
@@ -124,6 +146,10 @@ export class TuiInputPhoneInternational extends TuiControl<string> {
         this.countryIsoCode.set(code);
     }
 
+    public focusFirstItem(): void {
+        this.listOptions?.get(0)?.nativeElement.focus();
+    }
+
     public onPaste(event: Event): void {
         const phonesMetadata = this.metadata();
 

projects/kit/components/input-phone-international/input-phone-international.style.less

@@ -27,3 +27,11 @@
     color: var(--tui-text-secondary);
     margin-inline-end: 0.25rem;
 }
+
+.t-search {
+    position: sticky;
+    top: 0.25rem;
+    background: var(--tui-background-elevation-2);
+    box-shadow: 0 -1rem var(--tui-background-elevation-2);
+    margin: 0.25rem;
+}