From 9398b88b871fbc6dcb9b7f783b44ceb5501a58ed Mon Sep 17 00:00:00 2001 From: vladimirpotekhin Date: Wed, 25 Oct 2023 18:58:41 +0300 Subject: [PATCH] chore: comments --- .../core/constants/default-number-format.ts | 1 + projects/core/directives/index.ts | 1 + .../core/directives/number-format/index.ts | 2 + .../directives/number-format/ng-package.json | 5 ++ .../number-format/number-format.directive.ts | 26 ++++++++++ .../number-format/number-format.module.ts | 9 ++++ .../core/interfaces/number-format-settings.ts | 6 ++- projects/core/tokens/index.ts | 1 + .../core/tokens/number-format-observable.ts | 8 +++ .../input-range/input-range.template.html | 9 +--- .../experimental/amount/amount.component.ts | 5 -- .../experimental/amount/amount.module.ts | 9 ++-- .../experimental/amount/examples/1/index.html | 18 +++---- .../experimental/amount/examples/2/index.html | 9 +++- .../experimental/amount/examples/2/index.ts | 8 --- .../experimental/amount/examples/3/index.html | 4 +- .../experimental/amount/examples/3/index.ts | 3 +- .../experimental/amount/examples/4/index.html | 2 - .../experimental/amount/examples/4/index.ts | 18 ------- .../pipes/amount/amount.module.ts | 2 - .../pipes/amount/amount.options.ts | 6 +-- .../experimental/pipes/amount/amount.pipe.ts | 52 ++++++++++++------- 22 files changed, 120 insertions(+), 84 deletions(-) create mode 100644 projects/core/directives/number-format/index.ts create mode 100644 projects/core/directives/number-format/ng-package.json create mode 100644 projects/core/directives/number-format/number-format.directive.ts create mode 100644 projects/core/directives/number-format/number-format.module.ts create mode 100644 projects/core/tokens/number-format-observable.ts delete mode 100644 projects/demo/src/modules/experimental/amount/examples/4/index.html delete mode 100644 projects/demo/src/modules/experimental/amount/examples/4/index.ts diff --git a/projects/core/constants/default-number-format.ts b/projects/core/constants/default-number-format.ts index 2c8a98427d15d..f3cc674745f20 100644 --- a/projects/core/constants/default-number-format.ts +++ b/projects/core/constants/default-number-format.ts @@ -7,4 +7,5 @@ export const TUI_DEFAULT_NUMBER_FORMAT: TuiNumberFormatSettings = { thousandSeparator: CHAR_NO_BREAK_SPACE, zeroPadding: true, rounding: `truncate`, + decimal: `not-zero`, }; diff --git a/projects/core/directives/index.ts b/projects/core/directives/index.ts index e205a8790afde..ba09b986bd434 100644 --- a/projects/core/directives/index.ts +++ b/projects/core/directives/index.ts @@ -2,6 +2,7 @@ export * from '@taiga-ui/core/directives/dropdown'; export * from '@taiga-ui/core/directives/hint'; export * from '@taiga-ui/core/directives/mask-accessor'; export * from '@taiga-ui/core/directives/mode'; +export * from '@taiga-ui/core/directives/number-format'; export * from '@taiga-ui/core/directives/scroll-into-view'; export * from '@taiga-ui/core/directives/textfield-controller'; export * from '@taiga-ui/core/directives/wrapper'; diff --git a/projects/core/directives/number-format/index.ts b/projects/core/directives/number-format/index.ts new file mode 100644 index 0000000000000..48d886ff55c04 --- /dev/null +++ b/projects/core/directives/number-format/index.ts @@ -0,0 +1,2 @@ +export * from './number-format.directive'; +export * from './number-format.module'; diff --git a/projects/core/directives/number-format/ng-package.json b/projects/core/directives/number-format/ng-package.json new file mode 100644 index 0000000000000..bebf62dcb5e51 --- /dev/null +++ b/projects/core/directives/number-format/ng-package.json @@ -0,0 +1,5 @@ +{ + "lib": { + "entryFile": "index.ts" + } +} diff --git a/projects/core/directives/number-format/number-format.directive.ts b/projects/core/directives/number-format/number-format.directive.ts new file mode 100644 index 0000000000000..53d18f2ccacb7 --- /dev/null +++ b/projects/core/directives/number-format/number-format.directive.ts @@ -0,0 +1,26 @@ +import {Directive, forwardRef, Inject, Input} from '@angular/core'; +import {TuiNumberFormatSettings} from '@taiga-ui/core/interfaces'; +import {TUI_NUMBER_FORMAT, TUI_NUMBER_FORMAT_OBSERVABLE} from '@taiga-ui/core/tokens'; +import {BehaviorSubject} from 'rxjs'; + +@Directive({ + selector: '[tuiNumberFormat]', + providers: [ + { + provide: TUI_NUMBER_FORMAT_OBSERVABLE, + useExisting: forwardRef(() => TuiNumberFormatDirective), + }, + ], +}) +export class TuiNumberFormatDirective extends BehaviorSubject { + @Input() + set tuiNumberFormat(format: Partial) { + this.next({...this.settings, ...format}); + } + + constructor( + @Inject(TUI_NUMBER_FORMAT) private readonly settings: TuiNumberFormatSettings, + ) { + super(settings); + } +} diff --git a/projects/core/directives/number-format/number-format.module.ts b/projects/core/directives/number-format/number-format.module.ts new file mode 100644 index 0000000000000..5929a695775a1 --- /dev/null +++ b/projects/core/directives/number-format/number-format.module.ts @@ -0,0 +1,9 @@ +import {NgModule} from '@angular/core'; + +import {TuiNumberFormatDirective} from './number-format.directive'; + +@NgModule({ + declarations: [TuiNumberFormatDirective], + exports: [TuiNumberFormatDirective], +}) +export class TuiNumberFormatModule {} diff --git a/projects/core/interfaces/number-format-settings.ts b/projects/core/interfaces/number-format-settings.ts index 947d594ef2970..6dbacf98b25e7 100644 --- a/projects/core/interfaces/number-format-settings.ts +++ b/projects/core/interfaces/number-format-settings.ts @@ -1,5 +1,5 @@ import {TuiRounding} from '@taiga-ui/cdk'; -import {TuiDecimalSymbol} from '@taiga-ui/core/types'; +import {TuiDecimal, TuiDecimalSymbol} from '@taiga-ui/core/types'; /** * Formatting configuration for displayed numbers @@ -28,4 +28,8 @@ export interface TuiNumberFormatSettings { * Enable zeros at the end of decimal part. */ readonly zeroPadding: boolean; + /** + * Decimal part display mode. ('not-zero' by default) + */ + readonly decimal: TuiDecimal; } diff --git a/projects/core/tokens/index.ts b/projects/core/tokens/index.ts index 11b60a97cf73c..626655315f27b 100644 --- a/projects/core/tokens/index.ts +++ b/projects/core/tokens/index.ts @@ -18,6 +18,7 @@ export * from './media'; export * from './mode'; export * from './notification-options'; export * from './number-format'; +export * from './number-format-observable'; export * from './option-content'; export * from './ordered-short-week-days'; export * from './reduced-motion'; diff --git a/projects/core/tokens/number-format-observable.ts b/projects/core/tokens/number-format-observable.ts new file mode 100644 index 0000000000000..08451981af810 --- /dev/null +++ b/projects/core/tokens/number-format-observable.ts @@ -0,0 +1,8 @@ +import {tuiCreateToken} from '@taiga-ui/cdk'; +import {TUI_DEFAULT_NUMBER_FORMAT} from '@taiga-ui/core/constants'; +import {of} from 'rxjs'; + +/** + * Formatting configuration for displayed numbers + */ +export const TUI_NUMBER_FORMAT_OBSERVABLE = tuiCreateToken(of(TUI_DEFAULT_NUMBER_FORMAT)); diff --git a/projects/demo/src/modules/components/input-range/input-range.template.html b/projects/demo/src/modules/components/input-range/input-range.template.html index 53940ded2e6b6..30eaf5de9c359 100644 --- a/projects/demo/src/modules/components/input-range/input-range.template.html +++ b/projects/demo/src/modules/components/input-range/input-range.template.html @@ -8,13 +8,8 @@

Number formatting can be customized by using - - TUI_NUMBER_FORMAT - + tuiNumberFormat + directive

-
  • {{ 10728.9 | tuiAmount }}
    • -
  • {{ 10728.9 | tuiAmount: 'RUB' }}
    • -
  • {{ 10728.9 | tuiAmount: 'EUR' }}
    • -
  • {{ 10728.9 | tuiAmount: 'USD' }}
    • -
  • {{ 10728.9 | tuiAmount: 'GBP' }}
    • -
  • {{ -12345.1 | tuiAmount: 'USD' : 'left' }}
    • -
  • {{ 100 | tuiAmount: '£' : 'left' }}
    • -
  • {{ 200 | tuiAmount: 'AED' : 'left' }}
    • +
  • {{ 10728.9 | tuiAmount | async }}
    • +
  • {{ 10728.9 | tuiAmount: 'RUB' | async }}
    • +
  • {{ 10728.9 | tuiAmount: 'EUR' | async }}
    • +
  • {{ 10728.9 | tuiAmount: 'USD' | async }}
    • +
  • {{ 10728.9 | tuiAmount: 'GBP' | async }}
    • +
  • {{ -12345.1 | tuiAmount: 'USD' : 'left' | async }}
    • +
  • {{ 100 | tuiAmount: '£' : 'left' | async }}
    • +
  • {{ 200 | tuiAmount: 'AED' : 'left' | async }}
    • -Remaining {{ 10728.9 | tuiAmount }} of {{ 11000 | tuiAmount }} +Remaining {{ 10728.9 | tuiAmount | async }} of {{ 11000 | tuiAmount | async }} diff --git a/projects/demo/src/modules/experimental/amount/examples/2/index.html b/projects/demo/src/modules/experimental/amount/examples/2/index.html index 39001d0e653ab..9cbc9751ca978 100644 --- a/projects/demo/src/modules/experimental/amount/examples/2/index.html +++ b/projects/demo/src/modules/experimental/amount/examples/2/index.html @@ -1,2 +1,7 @@ -
    {{ -10000000.536 | tuiAmount: 'USD' : 'left' }}
    -
    {{ 200.211 | tuiAmount: 'EUR' }}
    +
    +
    + {{ -10000000.536 | tuiAmount: 'USD' : 'left' | async }} +
    + +
    {{ 200.536 | tuiAmount: 'EUR' | async }}
    +
    diff --git a/projects/demo/src/modules/experimental/amount/examples/2/index.ts b/projects/demo/src/modules/experimental/amount/examples/2/index.ts index 3c9ce46bbb399..2206f26db6452 100644 --- a/projects/demo/src/modules/experimental/amount/examples/2/index.ts +++ b/projects/demo/src/modules/experimental/amount/examples/2/index.ts @@ -1,19 +1,11 @@ import {Component} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; -import {tuiNumberFormatProvider} from '@taiga-ui/core'; @Component({ selector: 'tui-amount-example-2', templateUrl: './index.html', changeDetection, encapsulation, - providers: [ - tuiNumberFormatProvider({ - decimalSeparator: '.', - thousandSeparator: ',', - rounding: 'round', - }), - ], }) export class TuiAmountExample2 {} diff --git a/projects/demo/src/modules/experimental/amount/examples/3/index.html b/projects/demo/src/modules/experimental/amount/examples/3/index.html index b9f67b89128ef..f015a753fc591 100644 --- a/projects/demo/src/modules/experimental/amount/examples/3/index.html +++ b/projects/demo/src/modules/experimental/amount/examples/3/index.html @@ -1,2 +1,2 @@ -
    {{ -12.3 | tuiAmount: 'USD' : 'left' }}
    -
    {{ 3000 | tuiAmount: 'EUR' }}
    +
    {{ -12.3 | tuiAmount | async }}
    +
    {{ 3000 | tuiAmount | async }}
    diff --git a/projects/demo/src/modules/experimental/amount/examples/3/index.ts b/projects/demo/src/modules/experimental/amount/examples/3/index.ts index 406ac91d9ddde..4ef60a2db1372 100644 --- a/projects/demo/src/modules/experimental/amount/examples/3/index.ts +++ b/projects/demo/src/modules/experimental/amount/examples/3/index.ts @@ -11,7 +11,8 @@ import {tuiAmountOptionsProvider} from '@taiga-ui/experimental'; providers: [ tuiAmountOptionsProvider({ sign: 'always', - decimal: 'always', + currency: 'USD', + currencyAlign: 'left', }), ], }) diff --git a/projects/demo/src/modules/experimental/amount/examples/4/index.html b/projects/demo/src/modules/experimental/amount/examples/4/index.html deleted file mode 100644 index b9f67b89128ef..0000000000000 --- a/projects/demo/src/modules/experimental/amount/examples/4/index.html +++ /dev/null @@ -1,2 +0,0 @@ -
    {{ -12.3 | tuiAmount: 'USD' : 'left' }}
    -
    {{ 3000 | tuiAmount: 'EUR' }}
    diff --git a/projects/demo/src/modules/experimental/amount/examples/4/index.ts b/projects/demo/src/modules/experimental/amount/examples/4/index.ts deleted file mode 100644 index fc4aeb1481726..0000000000000 --- a/projects/demo/src/modules/experimental/amount/examples/4/index.ts +++ /dev/null @@ -1,18 +0,0 @@ -import {Component} from '@angular/core'; -import {changeDetection} from '@demo/emulate/change-detection'; -import {encapsulation} from '@demo/emulate/encapsulation'; -import {tuiAmountOptionsProvider} from '@taiga-ui/experimental'; - -@Component({ - selector: 'tui-amount-example-4', - templateUrl: './index.html', - changeDetection, - encapsulation, - providers: [ - tuiAmountOptionsProvider({ - sign: 'always', - decimal: 'always', - }), - ], -}) -export class TuiAmountExample4 {} diff --git a/projects/experimental/pipes/amount/amount.module.ts b/projects/experimental/pipes/amount/amount.module.ts index b7369b130eb48..73cbc78de0e5e 100644 --- a/projects/experimental/pipes/amount/amount.module.ts +++ b/projects/experimental/pipes/amount/amount.module.ts @@ -1,11 +1,9 @@ import {NgModule} from '@angular/core'; -import {TuiFormatNumberPipe} from '@taiga-ui/core'; import {TuiAmountPipePipe} from './amount.pipe'; @NgModule({ declarations: [TuiAmountPipePipe], exports: [TuiAmountPipePipe], - providers: [TuiFormatNumberPipe], }) export class TuiAmountPipeModule {} diff --git a/projects/experimental/pipes/amount/amount.options.ts b/projects/experimental/pipes/amount/amount.options.ts index c4d6b37a7a9b8..f423219ec850b 100644 --- a/projects/experimental/pipes/amount/amount.options.ts +++ b/projects/experimental/pipes/amount/amount.options.ts @@ -1,22 +1,18 @@ import {Provider} from '@angular/core'; import {TuiCurrencyVariants, TuiMoneySign} from '@taiga-ui/addon-commerce'; import {tuiCreateToken, tuiProvideOptions} from '@taiga-ui/cdk'; -import {TuiDecimal, TuiHorizontalDirection} from '@taiga-ui/core'; +import {TuiHorizontalDirection} from '@taiga-ui/core'; export interface TuiAmountOptions { readonly currency: TuiCurrencyVariants; readonly currencyAlign: TuiHorizontalDirection; - readonly decimal: TuiDecimal; - readonly precision: number; readonly sign: TuiMoneySign; } export const TUI_AMOUNT_DEFAULT_OPTIONS: TuiAmountOptions = { - decimal: `not-zero`, currency: null, currencyAlign: `right`, sign: `negative-only`, - precision: 2, }; export const TUI_AMOUNT_OPTIONS = tuiCreateToken(TUI_AMOUNT_DEFAULT_OPTIONS); diff --git a/projects/experimental/pipes/amount/amount.pipe.ts b/projects/experimental/pipes/amount/amount.pipe.ts index 072ab80ea7137..397e6410b7b62 100644 --- a/projects/experimental/pipes/amount/amount.pipe.ts +++ b/projects/experimental/pipes/amount/amount.pipe.ts @@ -1,45 +1,59 @@ import {Inject, Pipe, PipeTransform} from '@angular/core'; import {tuiFormatCurrency, tuiFormatSignSymbol} from '@taiga-ui/addon-commerce'; +import {CHAR_NO_BREAK_SPACE} from '@taiga-ui/cdk'; import { - TUI_NUMBER_FORMAT, + TUI_NUMBER_FORMAT_OBSERVABLE, + TuiDecimal, tuiFormatNumber, TuiNumberFormatSettings, } from '@taiga-ui/core'; +import {Observable} from 'rxjs'; +import {map} from 'rxjs/operators'; import {TUI_AMOUNT_OPTIONS, TuiAmountOptions} from './amount.options'; +const MONEY_DECIMAL_LIMIT = 2; + @Pipe({ name: `tuiAmount`, }) export class TuiAmountPipePipe implements PipeTransform { constructor( @Inject(TUI_AMOUNT_OPTIONS) private readonly options: TuiAmountOptions, - @Inject(TUI_NUMBER_FORMAT) private readonly format: TuiNumberFormatSettings, + @Inject(TUI_NUMBER_FORMAT_OBSERVABLE) + private readonly format: Observable, ) {} transform( value: number, currency = this.options.currency, currencyAlign = this.options.currencyAlign, - ): string { - const sign = tuiFormatSignSymbol(value, this.options.sign); - const currencySymbol = tuiFormatCurrency(currency); - const formatted = tuiFormatNumber(Math.abs(value), { - ...this.format, - decimalLimit: this.getDecimalLimit(value), - }); - // eslint-disable-next-line no-irregular-whitespace - const space = currencySymbol?.length > 1 || currencyAlign === `right` ? ` ` : ``; + ): Observable { + return this.format.pipe( + map(format => { + const sign = tuiFormatSignSymbol(value, this.options.sign); + const currencySymbol = tuiFormatCurrency(currency); + const formatted = tuiFormatNumber(Math.abs(value), { + ...format, + decimalLimit: this.getDecimalLimit( + value, + MONEY_DECIMAL_LIMIT, + format.decimal, + ), + }); + const space = + currencySymbol?.length > 1 || currencyAlign === `right` + ? CHAR_NO_BREAK_SPACE + : ``; - return currencyAlign === `right` - ? `${sign}${formatted}${space}${currencySymbol}` - : `${sign}${currencySymbol}${space}${formatted}`; + return currencyAlign === `right` + ? `${sign}${formatted}${space}${currencySymbol}` + : `${sign}${currencySymbol}${space}${formatted}`; + }), + ); } - private getDecimalLimit(value: number): number { - return this.options.decimal === `always` || - (this.options.decimal === `not-zero` && value % 1) - ? this.options.precision - : 0; + private getDecimalLimit(value: number, limit: number, decimal: TuiDecimal): number { + return decimal === `always` || (decimal === `not-zero` && value % 1) ? limit : 0; } }