From 995b774528c9399894a40db175426145952945b4 Mon Sep 17 00:00:00 2001 From: Nikita Barsukov Date: Sat, 28 Dec 2024 12:06:06 +0300 Subject: [PATCH] feat(kit): introduce new version of `InputNumber` --- projects/demo/src/modules/app/pages.ts | 15 +- .../components/input-number-legacy/index.html | 14 +- .../input-number/examples/1/index.html | 17 ++ .../input-number/examples/1/index.ts | 38 +++++ .../input-number/examples/2/index.html | 20 +++ .../input-number/examples/2/index.ts | 17 ++ .../input-number/examples/3/index.html | 15 ++ .../input-number/examples/3/index.ts | 29 ++++ .../input-number/examples/4/index.html | 11 ++ .../input-number/examples/4/index.ts | 18 +++ .../input-number/examples/5/index.html | 13 ++ .../input-number/examples/5/index.ts | 17 ++ .../components/input-number/index.html | 149 +++++++++++++++++- .../components/input-number/index.less | 5 + .../modules/components/input-number/index.ts | 6 +- .../src/modules/components/input/index.html | 2 +- .../utils/tokens/examples/5/index.html | 2 +- .../src/modules/pipes/currency/index.html | 2 +- .../input-number/input-number.component.ts | 8 + .../input-number/input-number.directive.ts | 4 + .../input-number/input-number.module.ts | 4 + .../input-number/input-number.options.ts | 16 +- 22 files changed, 403 insertions(+), 19 deletions(-) create mode 100644 projects/demo/src/modules/components/input-number/examples/1/index.html create mode 100644 projects/demo/src/modules/components/input-number/examples/1/index.ts create mode 100644 projects/demo/src/modules/components/input-number/examples/2/index.html create mode 100644 projects/demo/src/modules/components/input-number/examples/2/index.ts create mode 100644 projects/demo/src/modules/components/input-number/examples/3/index.html create mode 100644 projects/demo/src/modules/components/input-number/examples/3/index.ts create mode 100644 projects/demo/src/modules/components/input-number/examples/4/index.html create mode 100644 projects/demo/src/modules/components/input-number/examples/4/index.ts create mode 100644 projects/demo/src/modules/components/input-number/examples/5/index.html create mode 100644 projects/demo/src/modules/components/input-number/examples/5/index.ts create mode 100644 projects/demo/src/modules/components/input-number/index.less diff --git a/projects/demo/src/modules/app/pages.ts b/projects/demo/src/modules/app/pages.ts index 346844ad0b1b..7c6c6f98c0e1 100644 --- a/projects/demo/src/modules/app/pages.ts +++ b/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]', diff --git a/projects/demo/src/modules/components/input-number-legacy/index.html b/projects/demo/src/modules/components/input-number-legacy/index.html index d4b8b89c44ce..d82f0049d77e 100644 --- a/projects/demo/src/modules/components/input-number-legacy/index.html +++ b/projects/demo/src/modules/components/input-number-legacy/index.html @@ -2,9 +2,21 @@ header="InputNumberLegacy" package="LEGACY" type="components" + [deprecated]="true" > -
A component to input numbers. Control value is also of number type.
+ + This version of the component is deprecated and will be removed in the next major version. Use + + new version of InputNumber + + instead! + + +

A component to input numbers. Control value is also of number type.

There are also other components to input numbers:

diff --git a/projects/demo/src/modules/components/input-number/examples/1/index.html b/projects/demo/src/modules/components/input-number/examples/1/index.html new file mode 100644 index 000000000000..d79ff37293f0 --- /dev/null +++ b/projects/demo/src/modules/components/input-number/examples/1/index.html @@ -0,0 +1,17 @@ + + + + + + + + +

Control value:

+{{ control.value | json }} diff --git a/projects/demo/src/modules/components/input-number/examples/1/index.ts b/projects/demo/src/modules/components/input-number/examples/1/index.ts new file mode 100644 index 000000000000..626a9dbfe24b --- /dev/null +++ b/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( + null, + Validators.required, + ); +} diff --git a/projects/demo/src/modules/components/input-number/examples/2/index.html b/projects/demo/src/modules/components/input-number/examples/2/index.html new file mode 100644 index 000000000000..0813116ab3e6 --- /dev/null +++ b/projects/demo/src/modules/components/input-number/examples/2/index.html @@ -0,0 +1,20 @@ + + + + + + + + + diff --git a/projects/demo/src/modules/components/input-number/examples/2/index.ts b/projects/demo/src/modules/components/input-number/examples/2/index.ts new file mode 100644 index 000000000000..5ebcaab04f1b --- /dev/null +++ b/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; +} diff --git a/projects/demo/src/modules/components/input-number/examples/3/index.html b/projects/demo/src/modules/components/input-number/examples/3/index.html new file mode 100644 index 000000000000..47218fd1568f --- /dev/null +++ b/projects/demo/src/modules/components/input-number/examples/3/index.html @@ -0,0 +1,15 @@ + + + + + + + diff --git a/projects/demo/src/modules/components/input-number/examples/3/index.ts b/projects/demo/src/modules/components/input-number/examples/3/index.ts new file mode 100644 index 000000000000..0a06d03e45c3 --- /dev/null +++ b/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 = { + decimalSeparator: ',', + thousandSeparator: '.', + }; +} diff --git a/projects/demo/src/modules/components/input-number/examples/4/index.html b/projects/demo/src/modules/components/input-number/examples/4/index.html new file mode 100644 index 000000000000..11900bb682be --- /dev/null +++ b/projects/demo/src/modules/components/input-number/examples/4/index.html @@ -0,0 +1,11 @@ + + + + + diff --git a/projects/demo/src/modules/components/input-number/examples/4/index.ts b/projects/demo/src/modules/components/input-number/examples/4/index.ts new file mode 100644 index 000000000000..30595b237ed1 --- /dev/null +++ b/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; +} diff --git a/projects/demo/src/modules/components/input-number/examples/5/index.html b/projects/demo/src/modules/components/input-number/examples/5/index.html new file mode 100644 index 000000000000..4878b9eb554d --- /dev/null +++ b/projects/demo/src/modules/components/input-number/examples/5/index.html @@ -0,0 +1,13 @@ + + + + + diff --git a/projects/demo/src/modules/components/input-number/examples/5/index.ts b/projects/demo/src/modules/components/input-number/examples/5/index.ts new file mode 100644 index 000000000000..aae035bd7cac --- /dev/null +++ b/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; +} diff --git a/projects/demo/src/modules/components/input-number/index.html b/projects/demo/src/modules/components/input-number/index.html index 6d379290c711..b0e69d5a8d89 100644 --- a/projects/demo/src/modules/components/input-number/index.html +++ b/projects/demo/src/modules/components/input-number/index.html @@ -3,7 +3,154 @@ package="KIT" type="components" > - Coming soon, stay tuned... + + InputNumber + is a form field to provide numerical input. + + + + + Form control value is of + null + (for empty textfield only) and + number + (all other cases) types. + + +

+ Use + + Validators.required + + (built-in validator provided by Angular team) with our + + FieldError + + pipe to notify your users about required field. +

+ + + + + + Use all powers of + + Textfield + + : put any number of + + Icons + + and + + Tooltips + + inside (and control their order and color), modify the size of the textbox and etc. Explore its + documentation page for more customization options. + + + + + + + TuiNumberFormat + + allows to customize separators specific for your locale. + + + + + + Use + prefix + / + postfix + parameters to set non-removable text before / after the number. +
+ To get currency symbol use + + Currency + + pipe. + + + + + + Positive value of + step + property enables sided button to increase / decrease the number by the specified step's value. Moreover, + keyboard keys + ArrowUp + / + ArrowDown + will also work in the same way. + + + diff --git a/projects/demo/src/modules/components/input-number/index.less b/projects/demo/src/modules/components/input-number/index.less new file mode 100644 index 000000000000..d39aca392805 --- /dev/null +++ b/projects/demo/src/modules/components/input-number/index.less @@ -0,0 +1,5 @@ +@import '@taiga-ui/core/styles/taiga-ui-local'; + +tui-doc-example tui-textfield:has([tuiInputNumber]) { + max-inline-size: 22rem; +} diff --git a/projects/demo/src/modules/components/input-number/index.ts b/projects/demo/src/modules/components/input-number/index.ts index ef196219d541..83d247485aa9 100644 --- a/projects/demo/src/modules/components/input-number/index.ts +++ b/projects/demo/src/modules/components/input-number/index.ts @@ -1,9 +1,10 @@ -import {Component} from '@angular/core'; +import {Component, ViewEncapsulation} from '@angular/core'; import {FormControl, ReactiveFormsModule, Validators} from '@angular/forms'; import {TuiDocControl} from '@demo/components/control'; import {TuiDocNumberFormat} from '@demo/components/number-format'; import {TuiDocTextfield} from '@demo/components/textfield'; import {changeDetection} from '@demo/emulate/change-detection'; +import {DemoRoute} from '@demo/routes'; import {TuiDemo} from '@demo/utils'; import {TuiHint, TuiNumberFormat, TuiTextfield} from '@taiga-ui/core'; import {TuiInputNumber} from '@taiga-ui/kit'; @@ -22,9 +23,12 @@ import {TuiInputNumber} from '@taiga-ui/kit'; TuiTextfield, ], templateUrl: './index.html', + styleUrls: ['./index.less'], + encapsulation: ViewEncapsulation.None, changeDetection, }) export default class PageComponent { + protected readonly routes = DemoRoute; protected readonly control = new FormControl(null, Validators.required); protected readonly maxVariants: readonly number[] = [Infinity, 10, 500]; protected readonly minVariants: readonly number[] = [-Infinity, -500, 5, 25]; diff --git a/projects/demo/src/modules/components/input/index.html b/projects/demo/src/modules/components/input/index.html index a3240d3bd0ae..5fe7efabc156 100644 --- a/projects/demo/src/modules/components/input/index.html +++ b/projects/demo/src/modules/components/input/index.html @@ -43,7 +43,7 @@
  • InputNumber diff --git a/projects/demo/src/modules/components/utils/tokens/examples/5/index.html b/projects/demo/src/modules/components/utils/tokens/examples/5/index.html index 4aa86769076f..904ea55f6dbb 100644 --- a/projects/demo/src/modules/components/utils/tokens/examples/5/index.html +++ b/projects/demo/src/modules/components/utils/tokens/examples/5/index.html @@ -51,7 +51,7 @@

    Components that are customizable:

  • TuiInputNumberComponent diff --git a/projects/demo/src/modules/pipes/currency/index.html b/projects/demo/src/modules/pipes/currency/index.html index 6a66915ff79f..d7c8a1c83d3f 100644 --- a/projects/demo/src/modules/pipes/currency/index.html +++ b/projects/demo/src/modules/pipes/currency/index.html @@ -8,7 +8,7 @@ Pipe for transforming number into money. It is usually used with InputNumber diff --git a/projects/legacy/components/input-number/input-number.component.ts b/projects/legacy/components/input-number/input-number.component.ts index 9886adff3412..a38326fb71f1 100644 --- a/projects/legacy/components/input-number/input-number.component.ts +++ b/projects/legacy/components/input-number/input-number.component.ts @@ -41,9 +41,17 @@ import {TUI_INPUT_NUMBER_OPTIONS} from './input-number.options'; const DEFAULT_MAX_LENGTH = 18; +/** + * @deprecated use new version of {@link https://taiga-ui.dev/components/input-number tuiInputNumberOptionsProvider} (from @taiga-ui/kit) (property `valueTransformer`) instead + * TODO(v5): delete it + */ export const TUI_NUMBER_VALUE_TRANSFORMER = tuiCreateToken>(); +/** + * @deprecated use new version of {@link https://taiga-ui.dev/components/input-number TuiInputNumber} (from @taiga-ui/kit) instead + * TODO(v5): delete it + */ @Component({ standalone: false, selector: 'tui-input-number', diff --git a/projects/legacy/components/input-number/input-number.directive.ts b/projects/legacy/components/input-number/input-number.directive.ts index 83cf0fdbfe7b..409c9a599515 100644 --- a/projects/legacy/components/input-number/input-number.directive.ts +++ b/projects/legacy/components/input-number/input-number.directive.ts @@ -5,6 +5,10 @@ import {tuiAsTextfieldHost} from '@taiga-ui/legacy/tokens'; import type {TuiInputNumberComponent} from './input-number.component'; +/** + * @deprecated use new version of {@link https://taiga-ui.dev/components/input-number TuiInputNumber} (from @taiga-ui/kit) instead + * TODO(v5): delete it + */ @Directive({ standalone: false, selector: 'tui-input-number', diff --git a/projects/legacy/components/input-number/input-number.module.ts b/projects/legacy/components/input-number/input-number.module.ts index 0cac2a555462..38bbd434d57c 100644 --- a/projects/legacy/components/input-number/input-number.module.ts +++ b/projects/legacy/components/input-number/input-number.module.ts @@ -15,6 +15,10 @@ import {PolymorpheusOutlet, PolymorpheusTemplate} from '@taiga-ui/polymorpheus'; import {TuiInputNumberComponent} from './input-number.component'; import {TuiInputNumberDirective} from './input-number.directive'; +/** + * @deprecated use new version of {@link https://taiga-ui.dev/components/input-number TuiInputNumber} (from @taiga-ui/kit) instead + * TODO(v5): delete it + */ @NgModule({ imports: [ CommonModule, diff --git a/projects/legacy/components/input-number/input-number.options.ts b/projects/legacy/components/input-number/input-number.options.ts index 17812c4b572d..9366abe3ba69 100644 --- a/projects/legacy/components/input-number/input-number.options.ts +++ b/projects/legacy/components/input-number/input-number.options.ts @@ -1,6 +1,10 @@ import type {Provider} from '@angular/core'; import {tuiCreateToken, tuiProvideOptions} from '@taiga-ui/cdk/utils/miscellaneous'; +/** + * @deprecated use new version of {@link TuiInputNumberOptions} (from @taiga-ui/kit) instead + * TODO(v5): delete it + */ export interface TuiInputNumberOptions { readonly icons: Readonly<{ down: string; @@ -12,8 +16,8 @@ export interface TuiInputNumberOptions { } /** - * @deprecated: drop in v5.0 - * Default values for the input number options. + * @deprecated use new version of {@link TUI_INPUT_NUMBER_DEFAULT_OPTIONS} (from @taiga-ui/kit) instead + * TODO(v5): delete it */ export const TUI_INPUT_NUMBER_DEFAULT_OPTIONS: TuiInputNumberOptions = { icons: { @@ -26,11 +30,15 @@ export const TUI_INPUT_NUMBER_DEFAULT_OPTIONS: TuiInputNumberOptions = { }; /** - * @deprecated: drop in v5.0 - * Default parameters for input count component + * @deprecated use new version of {@link TUI_INPUT_NUMBER_OPTIONS} (from @taiga-ui/kit) instead + * TODO(v5): delete it */ export const TUI_INPUT_NUMBER_OPTIONS = tuiCreateToken(TUI_INPUT_NUMBER_DEFAULT_OPTIONS); +/** + * @deprecated use new version of {@link tuiInputNumberOptionsProvider} (from @taiga-ui/kit) instead + * TODO(v5): delete it + */ export function tuiInputNumberOptionsProvider( options: Partial, ): Provider {