chore(demo): use new version of InputNumber for all documentation e…

…xamples (#10280)
taiga-family · Jan 29, 2025 · eac19f7 · eac19f7
1 parent ede4715
commit eac19f7
Show file tree

Hide file tree

Showing 7 changed files with 93 additions and 76 deletions.
diff --git a/projects/demo/src/modules/components/form/examples/2/index.html b/projects/demo/src/modules/components/form/examples/2/index.html
@@ -43,16 +43,16 @@ <h3 tuiTitle>
         </h3>
     </header>
 
-    <tui-input
-        formControlName="nameValue"
-        tuiHintContent="A tooltip"
-    >
-        Textfield
+    <tui-textfield>
+        <label tuiLabel>Textfield</label>
         <input
+            formControlName="nameValue"
             placeholder="Field placeholder"
-            tuiTextfieldLegacy
+            tuiTextfield
         />
-    </tui-input>
+        <tui-icon tuiTooltip="A tooltip" />
+    </tui-textfield>
+
     <tui-error
         formControlName="nameValue"
         [error]="[] | tuiFieldError | async"
@@ -72,19 +72,30 @@ <h3 tuiTitle>
 
     <div class="grid">
         <div class="stack">
-            <tui-input-password formControlName="passwordValue">Input password</tui-input-password>
+            <tui-textfield>
+                <label tuiLabel>Input password</label>
+                <input
+                    formControlName="passwordValue"
+                    tuiTextfield
+                    type="password"
+                />
+                <tui-icon tuiPassword />
+            </tui-textfield>
+
             <tui-error
                 formControlName="passwordValue"
                 [error]="[] | tuiFieldError | async"
             />
         </div>
         <div class="stack">
-            <tui-input-number
-                formControlName="moneyValue"
-                [tuiTextfieldPostfix]="'RUB' | tuiCurrency"
-            >
-                Input money
-            </tui-input-number>
+            <tui-textfield>
+                <label tuiLabel>Input money</label>
+                <input
+                    formControlName="moneyValue"
+                    tuiInputNumber
+                    [postfix]="' ' + 'RUB' | tuiCurrency"
+                />
+            </tui-textfield>
             <tui-error
                 formControlName="moneyValue"
                 [error]="[] | tuiFieldError | async"

diff --git a/projects/demo/src/modules/components/form/examples/2/index.ts b/projects/demo/src/modules/components/form/examples/2/index.ts
@@ -2,13 +2,13 @@ import {AsyncPipe} from '@angular/common';
 import {Component} from '@angular/core';
 import {FormControl, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
-import {TuiAmountPipe, TuiCurrency, TuiCurrencyPipe} from '@taiga-ui/addon-commerce';
+import {TuiCurrency, TuiCurrencyPipe} from '@taiga-ui/addon-commerce';
 import {TuiDay, TuiTime} from '@taiga-ui/cdk';
 import {
-    TuiAppearance,
     TuiButton,
     TuiError,
     TuiGroup,
+    TuiIcon,
     TuiLabel,
     TuiTextfield,
     TuiTitle,
@@ -18,15 +18,16 @@ import {
     TuiCheckbox,
     TuiDataListWrapper,
     TuiFieldErrorPipe,
+    TuiInputNumber,
+    TuiPassword,
     TuiRadio,
     TuiStepper,
+    TuiTooltip,
 } from '@taiga-ui/kit';
 import {TuiForm, TuiHeader} from '@taiga-ui/layout';
 import {
     TuiInputDateModule,
     TuiInputModule,
-    TuiInputNumberModule,
-    TuiInputPasswordModule,
     TuiInputPhoneModule,
     TuiInputSliderModule,
     TuiInputTimeModule,
@@ -60,8 +61,6 @@ class Account {
     imports: [
         AsyncPipe,
         ReactiveFormsModule,
-        TuiAmountPipe,
-        TuiAppearance,
         TuiBlock,
         TuiButton,
         TuiCheckbox,
@@ -72,20 +71,22 @@ class Account {
         TuiForm,
         TuiGroup,
         TuiHeader,
+        TuiIcon,
         TuiInputDateModule,
         TuiInputModule,
-        TuiInputNumberModule,
-        TuiInputPasswordModule,
+        TuiInputNumber,
         TuiInputPhoneModule,
         TuiInputSliderModule,
         TuiInputTimeModule,
         TuiLabel,
+        TuiPassword,
         TuiRadio,
         TuiSelectModule,
         TuiStepper,
         TuiTextfield,
         TuiTextfieldControllerModule,
         TuiTitle,
+        TuiTooltip,
     ],
     templateUrl: './index.html',
     styleUrls: ['./index.less'],

diff --git a/projects/demo/src/modules/components/table/examples/4/index.html b/projects/demo/src/modules/components/table/examples/4/index.html
@@ -2,19 +2,22 @@
     tuiTextfieldSize="m"
     class="filters"
 >
-    <tui-input
-        class="input"
-        [tuiTextfieldCleaner]="true"
-        [(ngModel)]="search"
-    >
-        Find on page
-    </tui-input>
-    <tui-input-number
-        [formControl]="minAge"
-        [tuiNumberFormat]="{precision: 0}"
-    >
-        Minimum age
-    </tui-input-number>
+    <tui-textfield class="input">
+        <label tuiLabel>Find on page</label>
+        <input
+            tuiTextfield
+            [(ngModel)]="search"
+        />
+    </tui-textfield>
+
+    <tui-textfield>
+        <label tuiLabel>Minimum age</label>
+        <input
+            tuiInputNumber
+            [formControl]="minAge"
+            [tuiNumberFormat]="{precision: 0}"
+        />
+    </tui-textfield>
 </p>
 <p class="filters">
     <label tuiLabel>

diff --git a/projects/demo/src/modules/components/table/examples/4/index.ts b/projects/demo/src/modules/components/table/examples/4/index.ts
@@ -21,13 +21,9 @@ import {
     TuiLabel,
     TuiLoader,
     TuiNumberFormat,
+    TuiTextfield,
 } from '@taiga-ui/core';
-import {TuiCheckbox, TuiChevron} from '@taiga-ui/kit';
-import {
-    TuiInputModule,
-    TuiInputNumberModule,
-    TuiTextfieldControllerModule,
-} from '@taiga-ui/legacy';
+import {TuiCheckbox, TuiChevron, TuiInputNumber} from '@taiga-ui/kit';
 import type {Observable} from 'rxjs';
 import {
     BehaviorSubject,
@@ -118,16 +114,15 @@ function getAge({dob}: User): number {
         TuiCheckbox,
         TuiChevron,
         TuiDropdown,
-        TuiInputModule,
-        TuiInputNumberModule,
+        TuiInputNumber,
         TuiLabel,
         TuiLet,
         TuiLoader,
         TuiNumberFormat,
         TuiReorder,
         TuiTable,
         TuiTablePagination,
-        TuiTextfieldControllerModule,
+        TuiTextfield,
     ],
     templateUrl: './index.html',
     styleUrls: ['./index.less'],

diff --git a/projects/demo/src/modules/directives/number-format/examples/import/template.md b/projects/demo/src/modules/directives/number-format/examples/import/template.md
@@ -1,5 +1,8 @@
 ```html
-<tui-input-number
-  [tuiNumberFormat]="{decimal, precision, zeroPadding, rounding, thousandSeparator, decimalSeparator}"
-></tui-input-number>
+<tui-textfield>
+  <input
+    tuiInputNumber
+    [tuiNumberFormat]="{decimal, precision, zeroPadding, rounding, thousandSeparator, decimalSeparator}"
+  />
+</tui-textfield>
 ```
diff --git a/projects/demo/src/modules/pipes/field-error/examples/2/index.html b/projects/demo/src/modules/pipes/field-error/examples/2/index.html
@@ -1,16 +1,20 @@
-<form [formGroup]="testForm">
+<form
+    tuiTextfieldSize="m"
+    [formGroup]="testForm"
+>
     <label
         tuiLabel
         class="tui-space_bottom-4"
     >
         Enter an email
-        <tui-input
-            formControlName="testValue2"
-            tuiTextfieldSize="m"
-            [tuiTextfieldLabelOutside]="true"
-        >
-            Required
-        </tui-input>
+
+        <tui-textfield>
+            <input
+                formControlName="testValue2"
+                placeholder="Required"
+                tuiTextfield
+            />
+        </tui-textfield>
 
         <tui-error
             formControlName="testValue2"
@@ -23,12 +27,13 @@
         class="tui-space_bottom-4"
     >
         Minimum and maximum length
-        <tui-input
-            formControlName="testValue1"
-            tuiTextfieldSize="m"
-        >
-            4 letters word...
-        </tui-input>
+        <tui-textfield>
+            <label tuiLabel>4 letters word...</label>
+            <input
+                formControlName="testValue1"
+                tuiTextfield
+            />
+        </tui-textfield>
 
         <tui-error
             formControlName="testValue1"
@@ -38,13 +43,15 @@
 
     <label tuiLabel>
         Minimum number
-        <tui-input-number
-            formControlName="testValue3"
-            tuiTextfieldSize="m"
-            [step]="1"
-        >
-            number
-        </tui-input-number>
+        <tui-textfield>
+            <label tuiLabel>number</label>
+
+            <input
+                formControlName="testValue3"
+                tuiInputNumber
+                [step]="1"
+            />
+        </tui-textfield>
 
         <tui-error
             formControlName="testValue3"

diff --git a/projects/demo/src/modules/pipes/field-error/examples/2/index.ts b/projects/demo/src/modules/pipes/field-error/examples/2/index.ts
@@ -5,12 +5,11 @@ import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
 import {tuiIsFalsy} from '@taiga-ui/cdk';
 import {TuiError, TuiTextfield} from '@taiga-ui/core';
-import {TuiFieldErrorPipe, tuiValidationErrorsProvider} from '@taiga-ui/kit';
 import {
-    TuiInputModule,
-    TuiInputNumberModule,
-    TuiTextfieldControllerModule,
-} from '@taiga-ui/legacy';
+    TuiFieldErrorPipe,
+    TuiInputNumber,
+    tuiValidationErrorsProvider,
+} from '@taiga-ui/kit';
 import {interval, map, of, scan, startWith} from 'rxjs';
 
 @Component({
@@ -20,10 +19,8 @@ import {interval, map, of, scan, startWith} from 'rxjs';
         ReactiveFormsModule,
         TuiError,
         TuiFieldErrorPipe,
-        TuiInputModule,
-        TuiInputNumberModule,
+        TuiInputNumber,
         TuiTextfield,
-        TuiTextfieldControllerModule,
     ],
     templateUrl: './index.html',
     encapsulation,