feat(kit): introduce new version of InputNumber

projects/demo/src/modules/app/pages.ts

@@ -544,15 +544,12 @@ export const pages: DocRoutePages = [
                 keywords: 'поле, инпут, форма, ввод, input, month, месяц, год, дата',
                 route: DemoRoute.InputMonthRange,
             },
-            // TODO: it will be revealed later
-            // {
-            //     section: 'Components',
-            //     title: 'InputNumber',
-            //     keywords:
-            //         'поле, инпут, number, число, форма, ввод, input, money, деньги, ' +
-            //         'cash, копейки, рубли, доллары, евро, control, контрол',
-            //     route: DemoRoute.InputNumber,
-            // },
+            {
+                section: 'Components',
+                title: 'InputNumber',
+                keywords: 'textfield, input, number, count, digit, money, число',
+                route: DemoRoute.InputNumber,
+            },
             {
                 section: 'Components',
                 title: 'InputNumber [deprecated]',

projects/demo/src/modules/components/input-number-legacy/index.html

@@ -2,9 +2,21 @@
     header="InputNumberLegacy"
     package="LEGACY"
     type="components"
+    [deprecated]="true"
 >
     <ng-template pageTab>
-        <div class="tui-space_bottom-3">A component to input numbers. Control value is also of number type.</div>
+        <tui-notification appearance="negative">
+            This version of the component is deprecated and will be removed in the next major version. Use
+            <a
+                tuiLink
+                [routerLink]="routes.InputNumber"
+            >
+                <strong>new version of InputNumber</strong>
+            </a>
+            instead!
+        </tui-notification>
+
+        <p>A component to input numbers. Control value is also of number type.</p>
 
         <section>
             <h3>There are also other components to input numbers:</h3>

projects/demo/src/modules/components/input-number/examples/1/index.html

@@ -0,0 +1,17 @@
+<tui-textfield>
+    <label tuiLabel>Enter a number</label>
+
+    <input
+        inputmode="decimal"
+        tuiInputNumber
+        [formControl]="control"
+    />
+</tui-textfield>
+
+<tui-error
+    [error]="[] | tuiFieldError | async"
+    [formControl]="control"
+/>
+
+<p><strong>Control value:</strong></p>
+<code>{{ control.value | json }}</code>

projects/demo/src/modules/components/input-number/examples/1/index.ts

@@ -0,0 +1,38 @@
+import {AsyncPipe, JsonPipe} from '@angular/common';
+import {Component} from '@angular/core';
+import {FormControl, ReactiveFormsModule, Validators} from '@angular/forms';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiError, TuiTextfield} from '@taiga-ui/core';
+import {
+    TuiFieldErrorPipe,
+    TuiInputNumber,
+    tuiValidationErrorsProvider,
+} from '@taiga-ui/kit';
+
+@Component({
+    standalone: true,
+    imports: [
+        AsyncPipe,
+        JsonPipe,
+        ReactiveFormsModule,
+        TuiError,
+        TuiFieldErrorPipe,
+        TuiInputNumber,
+        TuiTextfield,
+    ],
+    templateUrl: './index.html',
+    encapsulation,
+    changeDetection,
+    providers: [
+        tuiValidationErrorsProvider({
+            required: 'Required field',
+        }),
+    ],
+})
+export default class Example {
+    protected readonly control = new FormControl<number | null>(
+        null,
+        Validators.required,
+    );
+}

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

@@ -0,0 +1,20 @@
+<tui-textfield
+    iconStart="@tui.euro"
+    tuiTextfieldSize="m"
+>
+    <label tuiLabel>I am a label</label>
+
+    <input
+        inputmode="decimal"
+        placeholder="I am placeholder"
+        tuiInputNumber
+        [(ngModel)]="value"
+    />
+
+    <tui-icon
+        icon="@tui.circle-alert"
+        style="color: var(--tui-status-negative)"
+    />
+
+    <tui-icon tuiTooltip="I am a hint" />
+</tui-textfield>

projects/demo/src/modules/components/input-number/examples/2/index.ts

@@ -0,0 +1,17 @@
+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, TuiTextfield} from '@taiga-ui/core';
+import {TuiInputNumber, TuiTooltip} from '@taiga-ui/kit';
+
+@Component({
+    standalone: true,
+    imports: [FormsModule, TuiIcon, TuiInputNumber, TuiTextfield, TuiTooltip],
+    templateUrl: './index.html',
+    encapsulation,
+    changeDetection,
+})
+export default class Example {
+    protected value: number | null = null;
+}

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

@@ -0,0 +1,15 @@
+<tui-textfield>
+    <label tuiLabel>Type number like a German</label>
+
+    <input
+        inputmode="decimal"
+        tuiInputNumber
+        [tuiNumberFormat]="numberFormat"
+        [(ngModel)]="value"
+    />
+
+    <tui-icon
+        tuiHintDirection="right"
+        tuiTooltip="In Germany people use comma as decimal separator and point for thousands"
+    />
+</tui-textfield>

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

@@ -0,0 +1,29 @@
+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 {TuiNumberFormatSettings} from '@taiga-ui/core';
+import {TuiIcon, TuiNumberFormat, TuiTextfield} from '@taiga-ui/core';
+import {TuiInputNumber, TuiTooltip} from '@taiga-ui/kit';
+
+@Component({
+    standalone: true,
+    imports: [
+        FormsModule,
+        TuiIcon,
+        TuiInputNumber,
+        TuiNumberFormat,
+        TuiTextfield,
+        TuiTooltip,
+    ],
+    templateUrl: './index.html',
+    encapsulation,
+    changeDetection,
+})
+export default class Example {
+    protected value: number | null = 1_234_567.89;
+    protected numberFormat: Partial<TuiNumberFormatSettings> = {
+        decimalSeparator: ',',
+        thousandSeparator: '.',
+    };
+}

projects/demo/src/modules/components/input-number/examples/4/index.html

@@ -0,0 +1,11 @@
+<tui-textfield>
+    <label tuiLabel>Price</label>
+
+    <input
+        inputmode="decimal"
+        tuiInputNumber
+        [min]="0"
+        [prefix]="'USD' | tuiCurrency"
+        [(ngModel)]="value"
+    />
+</tui-textfield>

projects/demo/src/modules/components/input-number/examples/4/index.ts

@@ -0,0 +1,18 @@
+import {Component} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiCurrencyPipe} from '@taiga-ui/addon-commerce';
+import {TuiTextfield} from '@taiga-ui/core';
+import {TuiInputNumber} from '@taiga-ui/kit';
+
+@Component({
+    standalone: true,
+    imports: [FormsModule, TuiCurrencyPipe, TuiInputNumber, TuiTextfield],
+    templateUrl: './index.html',
+    encapsulation,
+    changeDetection,
+})
+export default class Example {
+    protected value: number | null = null;
+}

projects/demo/src/modules/components/input-number/examples/5/index.html

@@ -0,0 +1,13 @@
+<tui-textfield>
+    <label tuiLabel>Percentage</label>
+
+    <input
+        inputmode="decimal"
+        postfix="%"
+        tuiInputNumber
+        [max]="100"
+        [min]="0"
+        [step]="1"
+        [(ngModel)]="value"
+    />
+</tui-textfield>

projects/demo/src/modules/components/input-number/examples/5/index.ts

@@ -0,0 +1,17 @@
+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 {TuiInputNumber} from '@taiga-ui/kit';
+
+@Component({
+    standalone: true,
+    imports: [FormsModule, TuiInputNumber, TuiTextfield],
+    templateUrl: './index.html',
+    encapsulation,
+    changeDetection,
+})
+export default class Example {
+    protected value: number | null = null;
+}