From 3be602c333b1fdb3fbde665c9f8263444ff75b86 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=94=D0=B5=D0=BD=D0=B8=D1=81=20=D0=91=D1=83=D0=BB=D0=B0?= =?UTF-8?q?=D0=BD=D0=BE=D0=B2?= Date: Thu, 15 Aug 2024 00:41:45 +0300 Subject: [PATCH] feat(kit): added search function in international phone component --- .../data-list/data-list.component.ts | 1 - projects/core/tokens/common-icons.ts | 2 + .../examples/2/index.html | 1 + .../input-phone-international/index.html | 9 ++++ .../input-phone-international/index.ts | 1 + projects/i18n/languages/belarusian/kit.ts | 1 + projects/i18n/languages/chinese/kit.ts | 1 + projects/i18n/languages/dutch/kit.ts | 1 + projects/i18n/languages/english/kit.ts | 1 + projects/i18n/languages/french/kit.ts | 1 + projects/i18n/languages/german/kit.ts | 1 + projects/i18n/languages/hebrew/kit.ts | 1 + projects/i18n/languages/italian/kit.ts | 1 + projects/i18n/languages/japan/kit.ts | 1 + projects/i18n/languages/kazakh/kit.ts | 1 + projects/i18n/languages/korean/kit.ts | 1 + projects/i18n/languages/lithuanian/kit.ts | 1 + projects/i18n/languages/malay/kit.ts | 1 + projects/i18n/languages/polish/kit.ts | 1 + projects/i18n/languages/portuguese/kit.ts | 1 + projects/i18n/languages/russian/kit.ts | 1 + projects/i18n/languages/spanish/kit.ts | 1 + projects/i18n/languages/turkish/kit.ts | 1 + projects/i18n/languages/ukrainian/kit.ts | 1 + projects/i18n/languages/vietnamese/kit.ts | 1 + projects/i18n/types/language.ts | 1 + .../get-country-calling-code.pipe.ts | 21 -------- .../input-phone-international.component.ts | 44 +++++++++++++---- .../input-phone-international.style.less | 8 +++ .../input-phone-international.template.html | 49 ++++++++++++------- projects/kit/tokens/i18n.ts | 4 ++ projects/kit/utils/index.ts | 1 + projects/kit/utils/phone.ts | 11 +++++ 33 files changed, 125 insertions(+), 48 deletions(-) delete mode 100644 projects/kit/components/input-phone-international/get-country-calling-code.pipe.ts create mode 100644 projects/kit/utils/phone.ts diff --git a/projects/core/components/data-list/data-list.component.ts b/projects/core/components/data-list/data-list.component.ts index 50a10fedfdc8..a968c63d15ae 100644 --- a/projects/core/components/data-list/data-list.component.ts +++ b/projects/core/components/data-list/data-list.component.ts @@ -70,7 +70,6 @@ export class TuiDataListComponent 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); diff --git a/projects/core/tokens/common-icons.ts b/projects/core/tokens/common-icons.ts index 0000aa815572..3ef3f6a34959 100644 --- a/projects/core/tokens/common-icons.ts +++ b/projects/core/tokens/common-icons.ts @@ -6,6 +6,7 @@ const COMMON_ICONS: TuiCommonIcons = { close: '@tui.x', error: '@tui.circle-alert', more: '@tui.chevron-right', + search: '@tui.search', }; export interface TuiCommonIcons { @@ -13,6 +14,7 @@ export interface TuiCommonIcons { readonly close: string; readonly error: string; readonly more: string; + readonly search: string; } export const TUI_COMMON_ICONS = tuiCreateToken(COMMON_ICONS); 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 index 4d3f099ad679..af29a7108750 100644 --- 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,5 +1,6 @@ diff --git a/projects/demo/src/modules/components/input-phone-international/index.html b/projects/demo/src/modules/components/input-phone-international/index.html index 161541ccfd3c..300e36503760 100644 --- a/projects/demo/src/modules/components/input-phone-international/index.html +++ b/projects/demo/src/modules/components/input-phone-international/index.html @@ -199,6 +199,7 @@ Array of ISO-codes of countries to choose + + Enable filter input for countries + { @ViewChild(MaskitoDirective, {read: ElementRef}) private readonly input?: ElementRef; + @ViewChildren(TuiOption, {read: ElementRef}) + private readonly listOptions?: QueryList>; + protected readonly dropdown = tuiDropdown(null); protected readonly options = inject(TUI_INPUT_PHONE_INTERNATIONAL_OPTIONS); protected readonly size = inject(TUI_TEXTFIELD_OPTIONS).size; @@ -99,6 +104,20 @@ export class TuiInputPhoneInternational extends TuiControl { 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(''); + + 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 { @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 { this.countryIsoCode.set(code); } + public focusFirstItem(): void { + this.listOptions?.get(0)?.nativeElement.focus(); + } + public onPaste(event: Event): void { const phonesMetadata = this.metadata(); diff --git a/projects/kit/components/input-phone-international/input-phone-international.style.less b/projects/kit/components/input-phone-international/input-phone-international.style.less index 6e48ef1a7389..8eaf31d7786e 100644 --- a/projects/kit/components/input-phone-international/input-phone-international.style.less +++ b/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; +} diff --git a/projects/kit/components/input-phone-international/input-phone-international.template.html b/projects/kit/components/input-phone-international/input-phone-international.template.html index 22b74b61440d..5f7696aa79cb 100644 --- a/projects/kit/components/input-phone-international/input-phone-international.template.html +++ b/projects/kit/components/input-phone-international/input-phone-international.template.html @@ -8,7 +8,7 @@ tuiTextfield [attr.data-mode]="mode()" [disabled]="disabled()" - [focused]="open() || null" + [focused]="open()" [ngModelOptions]="{standalone: true}" > @@ -53,21 +53,36 @@ - - - + + + + + + diff --git a/projects/kit/tokens/i18n.ts b/projects/kit/tokens/i18n.ts index e80276bf5a98..706111e03818 100644 --- a/projects/kit/tokens/i18n.ts +++ b/projects/kit/tokens/i18n.ts @@ -73,3 +73,7 @@ export const TUI_PREVIEW_TEXTS = tuiCreateTokenFromFactory( export const TUI_PREVIEW_ZOOM_TEXTS = tuiCreateTokenFromFactory( tuiExtractI18n('zoomTexts'), ); + +export const TUI_INTERNATIONAL_SEARCH = tuiCreateTokenFromFactory( + tuiExtractI18n('phoneSearch'), +); diff --git a/projects/kit/utils/index.ts b/projects/kit/utils/index.ts index 736196af15c7..bbab4d30a798 100644 --- a/projects/kit/utils/index.ts +++ b/projects/kit/utils/index.ts @@ -1,4 +1,5 @@ export * from './create-time-periods'; export * from './is-flat'; export * from './maskito.binding'; +export * from './phone'; export * from './toggle-day'; diff --git a/projects/kit/utils/phone.ts b/projects/kit/utils/phone.ts new file mode 100644 index 000000000000..1aca170d7e8e --- /dev/null +++ b/projects/kit/utils/phone.ts @@ -0,0 +1,11 @@ +import {CHAR_PLUS} from '@taiga-ui/cdk/constants'; +import type {TuiCountryIsoCode} from '@taiga-ui/i18n/types/country-iso-code'; +import type {MetadataJson} from 'libphonenumber-js/core'; +import {getCountryCallingCode} from 'libphonenumber-js/core'; + +export function tuiGetCallingCode( + iso: TuiCountryIsoCode, + metadata?: MetadataJson | null, +): string { + return metadata ? CHAR_PLUS + getCountryCallingCode(iso, metadata) : ''; +}