feat(kit): TuiInputPhoneInternational has separator customization (#…

…9601)
taiga-family · Oct 25, 2024 · 7939bc5 · 7939bc5
1 parent 4385076
commit 7939bc5
Show file tree

Hide file tree

Showing 6 changed files with 89 additions and 8 deletions.
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
@@ -0,0 +1,7 @@
+<tui-input-phone-international
+    [countries]="countries"
+    [(countryIsoCode)]="countryIsoCode"
+    [(ngModel)]="value"
+>
+    Type your number
+</tui-input-phone-international>
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
@@ -0,0 +1,32 @@
+import {Component} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+import type {TuiCountryIsoCode} from '@taiga-ui/i18n';
+import {
+    TuiInputPhoneInternational,
+    tuiInputPhoneInternationalOptionsProvider,
+} from '@taiga-ui/kit';
+import {getCountries} from 'libphonenumber-js';
+import {defer} from 'rxjs';
+
+@Component({
+    standalone: true,
+    imports: [FormsModule, TuiInputPhoneInternational],
+    templateUrl: './index.html',
+    encapsulation,
+    changeDetection,
+    providers: [
+        tuiInputPhoneInternationalOptionsProvider({
+            metadata: defer(async () =>
+                import('libphonenumber-js/max/metadata').then((m) => m.default),
+            ),
+            separator: ' ',
+        }),
+    ],
+})
+export default class Example {
+    protected readonly countries = getCountries();
+    protected countryIsoCode: TuiCountryIsoCode = 'FR';
+    protected value = '';
+}
diff --git a/projects/demo/src/modules/components/input-phone-international/index.html b/projects/demo/src/modules/components/input-phone-international/index.html
@@ -190,6 +190,22 @@
                 at the right side of the textfield.
             </ng-template>
         </tui-doc-example>
+
+        <tui-doc-example
+            id="customize-separator"
+            heading="Customize separator"
+            [component]="5 | tuiComponent"
+            [content]="5 | tuiExample: 'html,ts'"
+            [description]="separatorDescription"
+        >
+            <ng-template #separatorDescription>
+                Using
+                <code>tuiInputPhoneInternationalOptionsProvider</code>
+                you can provide custom separator for input instead of the default
+                <code>-</code>
+                .
+            </ng-template>
+        </tui-doc-example>
     </ng-template>
 
     <ng-template pageTab>

diff --git a/projects/kit/components/input-phone-international/input-phone-international.component.ts b/projects/kit/components/input-phone-international/input-phone-international.component.ts
@@ -116,6 +116,7 @@ export class TuiInputPhoneInternational extends TuiControl<string> {
     protected readonly icons = inject(TUI_COMMON_ICONS);
     protected readonly label = toSignal(inject(TUI_INTERNATIONAL_SEARCH));
     protected readonly search = signal<string>('');
+    protected readonly separator = signal(this.options.separator);
 
     protected readonly filtered = computed(() =>
         this.countries()
@@ -128,7 +129,7 @@ export class TuiInputPhoneInternational extends TuiControl<string> {
     );
 
     protected readonly mask = computed(() =>
-        this.computeMask(this.countryIsoCode(), this.metadata()),
+        this.computeMask(this.countryIsoCode(), this.metadata(), this.separator()),
     );
 
     protected readonly $ = tuiDirectiveBinding(
@@ -237,6 +238,7 @@ export class TuiInputPhoneInternational extends TuiControl<string> {
     private computeMask(
         countryIsoCode: TuiCountryIsoCode,
         metadata?: MetadataJson,
+        separator?: string,
     ): MaskitoOptions | null {
         if (!metadata) {
             return null;
@@ -245,6 +247,7 @@ export class TuiInputPhoneInternational extends TuiControl<string> {
         const {plugins, ...restOptions} = maskitoPhoneOptionsGenerator({
             countryIsoCode,
             metadata,
+            separator,
         });
 
         return {

diff --git a/projects/kit/components/input-phone-international/input-phone-international.options.ts b/projects/kit/components/input-phone-international/input-phone-international.options.ts
@@ -9,13 +9,15 @@ export interface TuiInputPhoneInternationalOptions {
     readonly countries: readonly TuiCountryIsoCode[];
     readonly countryIsoCode: TuiCountryIsoCode;
     readonly metadata: Observable<MetadataJson> | Promise<MetadataJson>;
+    readonly separator: string;
 }
 
 export const TUI_INPUT_PHONE_INTERNATIONAL_DEFAULT_OPTIONS: TuiInputPhoneInternationalOptions =
     {
         countries: [],
         countryIsoCode: 'RU',
         metadata: of({countries: {}, country_calling_codes: {}}),
+        separator: '-',
     };
 
 /**

diff --git a/...kit/components/input-phone-international/test/input-phone-international.component.spec.ts b/...kit/components/input-phone-international/test/input-phone-international.component.spec.ts
@@ -7,7 +7,12 @@ import {By} from '@angular/platform-browser';
 import {TuiRoot} from '@taiga-ui/core';
 import {NG_EVENT_PLUGINS} from '@taiga-ui/event-plugins';
 import type {TuiCountryIsoCode, TuiLanguage} from '@taiga-ui/i18n';
-import {TUI_ENGLISH_LANGUAGE, TUI_LANGUAGE, TUI_RUSSIAN_LANGUAGE} from '@taiga-ui/i18n';
+import {
+    TUI_ENGLISH_LANGUAGE,
+    TUI_FRENCH_LANGUAGE,
+    TUI_LANGUAGE,
+    TUI_RUSSIAN_LANGUAGE,
+} from '@taiga-ui/i18n';
 import {
     TuiInputPhoneInternational,
     tuiInputPhoneInternationalOptionsProvider,
@@ -31,11 +36,6 @@ describe('InputPhoneInternational', () => {
             </tui-root>
         `,
         changeDetection: ChangeDetectionStrategy.OnPush,
-        providers: [
-            tuiInputPhoneInternationalOptionsProvider({
-                metadata: of(metadata),
-            }),
-        ],
     })
     class Test {
         @ViewChild(TuiInputPhoneInternational, {static: true})
@@ -55,7 +55,10 @@ describe('InputPhoneInternational', () => {
     let component: TuiInputPhoneInternational;
     let inputPO: TuiNativeInputPO;
 
-    const initializeTestModule = (language: TuiLanguage = TUI_ENGLISH_LANGUAGE): void => {
+    const initializeTestModule = (
+        language: TuiLanguage = TUI_ENGLISH_LANGUAGE,
+        separator?: string,
+    ): void => {
         beforeEach(async () => {
             TestBed.configureTestingModule({
                 imports: [Test],
@@ -65,6 +68,10 @@ describe('InputPhoneInternational', () => {
                         provide: TUI_LANGUAGE,
                         useValue: of(language),
                     },
+                    tuiInputPhoneInternationalOptionsProvider({
+                        metadata: of(metadata),
+                        separator,
+                    }),
                 ],
             });
             await TestBed.compileComponents();
@@ -214,6 +221,20 @@ describe('InputPhoneInternational', () => {
         });
     });
 
+    describe('separator', () => {
+        initializeTestModule(TUI_FRENCH_LANGUAGE, ' ');
+
+        it('should have correct input value with provided custom separator', () => {
+            const phoneNumber = '+33724783794';
+
+            testComponent.countryIsoCode = 'FR';
+
+            inputPO.sendText(phoneNumber);
+
+            expect(inputPO.value).toBe('+33 7 24 78 37 94');
+        });
+    });
+
     function getDropdownCountryNames(): string[] {
         const countryNameContainers =
             fixture.debugElement.queryAll(By.css('.t-name')) || [];