chore: fix

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

@@ -1,5 +1,10 @@
-<tui-input-phone-international
-    [countries]="countries"
-    [(countryIsoCode)]="countryIsoCode"
-    [(ngModel)]="value"
-/>
+<tui-textfield tuiDropdownMobile="Select country">
+    <label tuiLabel>Phone number</label>
+    <input
+        tuiInputPhoneInternational
+        [countries]="(countries | tuiSortCountries | async) || []"
+        [countrySearch]="true"
+        [(countryIsoCode)]="countryIsoCode"
+        [(ngModel)]="value"
+    />
+</tui-textfield>

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

@@ -1,53 +1,43 @@
+import {AsyncPipe} from '@angular/common';
 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 {TuiDropdownMobile} from '@taiga-ui/addon-mobile';
+import {TuiButton, 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';
+import {getCountries} from 'libphonenumber-js';
 import {defer} from 'rxjs';
 
 @Component({
     standalone: true,
-    imports: [FormsModule, TuiInputPhoneInternational, TuiTextfield],
+    imports: [
+        AsyncPipe,
+        FormsModule,
+        TuiButton,
+        TuiDropdownMobile,
+        TuiInputPhoneInternational,
+        TuiSortCountriesPipe,
+        TuiTextfield,
+    ],
     templateUrl: './index.html',
     encapsulation,
     changeDetection,
     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 readonly countries: readonly TuiCountryIsoCode[] = [
-        'IN',
-        'CN',
-        'US',
-        'ID',
-        'PK',
-    ];
-
-    protected countryIsoCode: TuiCountryIsoCode = 'US';
-    protected value = '+12125552368';
+    protected readonly countries = getCountries();
+    protected countryIsoCode: TuiCountryIsoCode = 'CN';
+    protected value = '';
 }

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

@@ -1,10 +1,5 @@
-<tui-textfield tuiDropdownMobile="Select country">
-    <label tuiLabel>Phone number</label>
-    <input
-        tuiInputPhoneInternational
-        [countries]="(countries | tuiSortCountries | async) || []"
-        [countrySearch]="true"
-        [(countryIsoCode)]="countryIsoCode"
-        [(ngModel)]="value"
-    />
-</tui-textfield>
+<tui-input-phone-international
+    [countries]="countries"
+    [(countryIsoCode)]="countryIsoCode"
+    [(ngModel)]="value"
+/>

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

@@ -1,43 +1,53 @@
-import {AsyncPipe} from '@angular/common';
 import {Component} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
-import {TuiDropdownMobile} from '@taiga-ui/addon-mobile';
-import {TuiButton, TuiTextfield} from '@taiga-ui/core';
-import {TuiInputPhoneInternational} from '@taiga-ui/experimental';
+import {TuiTextfield} from '@taiga-ui/core';
 import type {TuiCountryIsoCode} from '@taiga-ui/i18n';
 import {
+    TuiInputPhoneInternational,
     tuiInputPhoneInternationalOptionsProvider,
-    TuiSortCountriesPipe,
 } from '@taiga-ui/kit';
-import {getCountries} from 'libphonenumber-js';
 import {defer} from 'rxjs';
 
 @Component({
     standalone: true,
-    imports: [
-        AsyncPipe,
-        FormsModule,
-        TuiButton,
-        TuiDropdownMobile,
-        TuiInputPhoneInternational,
-        TuiSortCountriesPipe,
-        TuiTextfield,
-    ],
+    imports: [FormsModule, TuiInputPhoneInternational, TuiTextfield],
     templateUrl: './index.html',
     encapsulation,
     changeDetection,
     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 readonly countries = getCountries();
-    protected countryIsoCode: TuiCountryIsoCode = 'CN';
-    protected value = '';
+    protected readonly countries: readonly TuiCountryIsoCode[] = [
+        'IN',
+        'CN',
+        'US',
+        'ID',
+        'PK',
+    ];
+
+    protected countryIsoCode: TuiCountryIsoCode = 'US';
+    protected value = '+12125552368';
 }

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

@@ -149,18 +149,16 @@
         </tui-doc-example>
 
         <tui-doc-example
-            id="old-syntax"
-            heading="Old syntax"
+            id="mobile-dropdown"
+            heading="Mobile dropdown"
             [component]="3 | tuiComponent"
             [content]="3 | tuiExample"
-            [description]="oldSyntaxDescription"
+            [description]="mobileDescription"
         >
-            <ng-template #oldSyntaxDescription>
-                This component has been refactored to maintain uniformity across new textfield components. Newest
-                version is in the
-                <code>&#64;taiga-ui/experimental</code>
-                package and will replace previous syntax in the next major release. Old syntax is displayed in the
-                example below:
+            <ng-template #mobileDescription>
+                You can enable mobile specific dropdown design on mobile devices by adding
+                <code>TuiDropdownMobile</code>
+                directive.
             </ng-template>
         </tui-doc-example>
 
@@ -224,16 +222,18 @@
         </tui-doc-example>
 
         <tui-doc-example
-            id="mobile-dropdown"
-            heading="Mobile dropdown"
+            id="old-syntax"
+            heading="Old syntax"
             [component]="7 | tuiComponent"
             [content]="7 | tuiExample"
-            [description]="mobileDescription"
+            [description]="oldSyntaxDescription"
         >
-            <ng-template #mobileDescription>
-                You can enable mobile specific dropdown design on mobile devices by adding
-                <code>TuiDropdownMobile</code>
-                directive.
+            <ng-template #oldSyntaxDescription>
+                This component has been refactored to maintain uniformity across new textfield components. Newest
+                version is in the
+                <code>&#64;taiga-ui/experimental</code>
+                package and will replace previous syntax in the next major release. Old syntax is displayed in the
+                example below:
             </ng-template>
         </tui-doc-example>
     </ng-template>