feat(kit): InputPhoneInternational can be customized with Icon / …

…`Tooltip` (#8750) Co-authored-by: taiga-family-bot <[email protected]>
taiga-family · Aug 30, 2024 · b20459b · b20459b
1 parent e566fac
commit b20459b
Show file tree

Hide file tree

Showing 8 changed files with 147 additions and 25 deletions.
diff --git a/projects/cdk/constants/used-icons.ts b/projects/cdk/constants/used-icons.ts
@@ -45,6 +45,7 @@ export const TUI_USED_ICONS = [
     '@tui.minus',
     '@tui.file',
     '@tui.trash',
+    '@tui.phone',
     '@tui.star',
     '@tui.rotate-ccw-square',
     '@tui.arrow-left',

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
@@ -4,15 +4,27 @@ 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, TuiSortCountriesPipe} from '@taiga-ui/kit';
+import {
+    TuiInputPhoneInternational,
+    tuiInputPhoneInternationalOptionsProvider,
+    TuiSortCountriesPipe,
+} from '@taiga-ui/kit';
 import {getCountries} from 'libphonenumber-js';
+import {defer} from 'rxjs';
 
 @Component({
     standalone: true,
     imports: [AsyncPipe, TuiInputPhoneInternational, TuiSortCountriesPipe, FormsModule],
     templateUrl: './index.html',
     encapsulation,
     changeDetection,
+    providers: [
+        tuiInputPhoneInternationalOptionsProvider({
+            metadata: defer(async () =>
+                import('libphonenumber-js/max/metadata').then((m) => m.default),
+            ),
+        }),
+    ],
 })
 export default class Example {
     protected readonly countries = getCountries();

diff --git a/projects/demo/src/modules/components/input-phone-international/examples/4/index.html b/projects/demo/src/modules/components/input-phone-international/examples/4/index.html
@@ -0,0 +1,14 @@
+<tui-input-phone-international
+    [countries]="countries"
+    [(countryIsoCode)]="countryIsoCode"
+    [(ngModel)]="value"
+>
+    Phone number
+    <tui-icon
+        appearance="error"
+        tuiHintAppearance="error"
+        tuiHintDirection="top"
+        tuiTooltip="I am a hint"
+    />
+    <tui-icon icon="@tui.phone" />
+</tui-input-phone-international>
diff --git a/projects/demo/src/modules/components/input-phone-international/examples/4/index.less b/projects/demo/src/modules/components/input-phone-international/examples/4/index.less
@@ -0,0 +1,3 @@
+tui-input-phone-international {
+    min-width: min(20rem, 80vw);
+}
diff --git a/projects/demo/src/modules/components/input-phone-international/examples/4/index.ts b/projects/demo/src/modules/components/input-phone-international/examples/4/index.ts
@@ -0,0 +1,40 @@
+import {Component} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiIcon} from '@taiga-ui/core';
+import type {TuiCountryIsoCode} from '@taiga-ui/i18n';
+import {
+    TuiInputPhoneInternational,
+    tuiInputPhoneInternationalOptionsProvider,
+    TuiTooltip,
+} from '@taiga-ui/kit';
+import {defer} from 'rxjs';
+
+@Component({
+    standalone: true,
+    imports: [FormsModule, TuiInputPhoneInternational, TuiIcon, TuiTooltip],
+    templateUrl: './index.html',
+    styleUrls: ['./index.less'],
+    encapsulation,
+    changeDetection,
+    providers: [
+        tuiInputPhoneInternationalOptionsProvider({
+            metadata: defer(async () =>
+                import('libphonenumber-js/max/metadata').then((m) => m.default),
+            ),
+        }),
+    ],
+})
+export default class Example {
+    protected readonly countries: readonly TuiCountryIsoCode[] = [
+        'TR',
+        'IR',
+        'IQ',
+        'SA',
+        'YE',
+    ];
+
+    protected countryIsoCode: TuiCountryIsoCode = 'TR';
+    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
@@ -64,36 +64,47 @@
             [description]="metadataDescription"
         >
             <ng-template #metadataDescription>
-                <p class="tui-space_top-0">The first step is to choose the size of metadata.</p>
+                <p class="tui-space_top-0">
+                    The first step is to choose the size of
+                    <code>
+                        metadata
+                        <tui-icon
+                            tuiHintDirection="top"
+                            [tuiTooltip]="metadataDefinition"
+                        />
 
-                <tui-notification>
-                    <div>
-                        <strong>Google</strong>
-                        <a
-                            href="https://github.com/google/libphonenumber/blob/master/FAQ.md#what-do-we-mean-by-metadata"
-                            target="_blank"
-                            tuiLink
-                        >
-                            uses
-                        </a>
-                        the word
-                        <strong>"metadata"</strong>
-                        to refer to all information about phone numbering in a particular country - what the country
-                        code, international and national dialling prefixes are, what carrier codes are operational,
-                        which phone numbers are possible or valid for a particular country, how to optimally format
-                        them, which prefixes represent a particular geographical area, etc.
-                    </div>
-                </tui-notification>
+                        <ng-template #metadataDefinition>
+                            <strong>Google</strong>
+                            <a
+                                appearance="icon"
+                                href="https://github.com/google/libphonenumber/blob/master/FAQ.md#what-do-we-mean-by-metadata"
+                                target="_blank"
+                                tuiLink
+                                tuiTheme="dark"
+                                [pseudo]="true"
+                            >
+                                uses
+                            </a>
+                            the word
+                            <strong>"metadata"</strong>
+                            to refer to all information about phone numbering in a particular country - what the country
+                            code, international and national dialling prefixes are, what carrier codes are operational,
+                            which phone numbers are possible or valid for a particular country, how to optimally format
+                            them, which prefixes represent a particular geographical area, etc.
+                        </ng-template>
+                    </code>
+                    .
+                </p>
 
                 <p>
                     The complete list of all phone rules is huge, so
                     <code>libphonenumber-js</code>
                     provides different "metadata" sets to provides a way to optimize bundle size by choosing between
-                    <strong>max</strong>
+                    <code>max</code>
                     ,
-                    <strong>min</strong>
+                    <code>min</code>
                     (default value) and
-                    <strong>mobile</strong>
+                    <code>mobile</code>
                     sets.
                 </p>
 
@@ -155,6 +166,32 @@
                 Don't hesitate to use it too to manually format any phone number.
             </ng-template>
         </tui-doc-example>
+
+        <tui-doc-example
+            id="customize-with-icons"
+            heading="Customize with icons"
+            [component]="4 | tuiComponent"
+            [content]="4 | tuiExample: 'html,ts,less'"
+            [description]="iconsDescription"
+        >
+            <ng-template #iconsDescription>
+                You can put static
+                <a
+                    tuiLink
+                    [routerLink]="routes.Icon"
+                >
+                    Icon
+                </a>
+                or even interactive
+                <a
+                    tuiLink
+                    [routerLink]="routes.Tooltip"
+                >
+                    Tooltip
+                </a>
+                at the right side of the textfield.
+            </ng-template>
+        </tui-doc-example>
     </ng-template>
 
     <ng-template pageTab>
@@ -209,7 +246,7 @@
                 ISO-code of selected country
             </ng-template>
         </tui-doc-documentation>
-        <inherited-documentation />
+        <inherited-documentation [withHint]="false" />
     </ng-template>
 
     <tui-setup *pageTab />

diff --git a/projects/demo/src/modules/components/input-phone-international/index.ts b/projects/demo/src/modules/components/input-phone-international/index.ts
@@ -1,13 +1,15 @@
 import {Component} from '@angular/core';
 import {FormControl, ReactiveFormsModule, Validators} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
+import {DemoRoute} from '@demo/routes';
 import {TuiDemo} from '@demo/utils';
 import {tuiProvide} from '@taiga-ui/cdk';
-import {TuiDropdown, TuiHint, TuiTextfield} from '@taiga-ui/core';
+import {TuiDropdown, TuiHint, TuiIcon, TuiTextfield} from '@taiga-ui/core';
 import type {TuiCountryIsoCode} from '@taiga-ui/i18n';
 import {
     TuiInputPhoneInternational,
     tuiInputPhoneInternationalOptionsProvider,
+    TuiTooltip,
 } from '@taiga-ui/kit';
 import {getCountries} from 'libphonenumber-js';
 
@@ -25,6 +27,8 @@ import {InheritedDocumentation} from '../abstract/inherited-documentation';
         TuiInputPhoneInternational,
         TuiTextfield,
         ReactiveFormsModule,
+        TuiIcon,
+        TuiTooltip,
     ],
     templateUrl: './index.html',
     changeDetection,
@@ -36,6 +40,7 @@ import {InheritedDocumentation} from '../abstract/inherited-documentation';
     ],
 })
 export default class PageComponent extends AbstractExampleTuiControl {
+    protected readonly routes = DemoRoute;
     protected readonly countriesVariants: ReadonlyArray<readonly TuiCountryIsoCode[]> = [
         ['RU', 'KZ', 'UA', 'BY'],
         getCountries(),

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
@@ -37,6 +37,16 @@
         (ngModelChange)="onValueChange($event)"
     />
 
+    <!--
+    TODO: get rid of built-in input and label and just externalize everything in 5.0
+    <tui-input-phone-international>
+      <label tuiLabel>My label</label>
+      <input tuiTextfield placeholder="My placeholder" [(ngModel)]="value" />
+      <tui-icon icon="@tui.phone" />
+    </tui-input-phone-international>
+    -->
+    <ng-content select="tui-icon, img" />
+
     <label tuiLabel>
         <ng-content />
     </label>