diff --git a/projects/demo/src/modules/components/form/examples/2/index.html b/projects/demo/src/modules/components/form/examples/2/index.html index a24c03341e92..dc901b4248da 100644 --- 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 index 3d22eb12aae7..fc5d1f599db3 100644 --- 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 index 121c17c14602..66c0f6ea2efe 100644 --- 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 index dee0af684cc9..efd44bf8a28d 100644 --- 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,8 +114,7 @@ function getAge({dob}: User): number { TuiCheckbox, TuiChevron, TuiDropdown, - TuiInputModule, - TuiInputNumberModule, + TuiInputNumber, TuiLabel, TuiLet, TuiLoader, @@ -127,7 +122,7 @@ function getAge({dob}: User): number { 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 index 0785baafc356..292946921cde 100644 --- 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 index 0c7dd0fdba87..7571955d0fa3 100644 --- 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 index 2c61e9335a08..c82985d13fc5 100644 --- 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,