chore: comments

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`,
 };

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';

projects/core/directives/number-format/index.ts

@@ -0,0 +1,2 @@
+export * from './number-format.directive';
+export * from './number-format.module';

projects/core/directives/number-format/ng-package.json

@@ -0,0 +1,5 @@
+{
+    "lib": {
+        "entryFile": "index.ts"
+    }
+}

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<TuiNumberFormatSettings> {
+    @Input()
+    set tuiNumberFormat(format: Partial<TuiNumberFormatSettings>) {
+        this.next({...this.settings, ...format});
+    }
+
+    constructor(
+        @Inject(TUI_NUMBER_FORMAT) private readonly settings: TuiNumberFormatSettings,
+    ) {
+        super(settings);
+    }
+}

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 {}

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;
 }

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';

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));

projects/demo/src/modules/components/input-range/input-range.template.html

@@ -8,13 +8,8 @@
 
         <p>
             Number formatting can be customized by using
-            <a
-                fragment="number-format"
-                routerLink="/utils/tokens"
-                tuiLink
-            >
-                TUI_NUMBER_FORMAT
-            </a>
+            <code>tuiNumberFormat</code>
+            directive
         </p>
 
         <tui-doc-example

projects/demo/src/modules/experimental/amount/amount.component.ts

@@ -30,9 +30,4 @@ export class ExampleTuiAmountComponent {
         HTML: import('./examples/3/index.html?raw'),
         TypeScript: import('./examples/3/index.ts?raw'),
     };
-
-    readonly example4: TuiDocExample = {
-        HTML: import('./examples/4/index.html?raw'),
-        TypeScript: import('./examples/4/index.ts?raw'),
-    };
 }

projects/demo/src/modules/experimental/amount/amount.module.ts

@@ -1,20 +1,24 @@
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {tuiGetDocModules} from '@taiga-ui/addon-doc';
-import {TuiLinkModule, TuiNotificationModule} from '@taiga-ui/core';
+import {
+    TuiLinkModule,
+    TuiNotificationModule,
+    TuiNumberFormatModule,
+} from '@taiga-ui/core';
 import {TuiAmountPipeModule} from '@taiga-ui/experimental';
 
 import {ExampleTuiAmountComponent} from './amount.component';
 import {TuiAmountExample1} from './examples/1';
 import {TuiAmountExample2} from './examples/2';
 import {TuiAmountExample3} from './examples/3';
-import {TuiAmountExample4} from './examples/4';
 
 @NgModule({
     imports: [
         CommonModule,
         TuiAmountPipeModule,
         TuiNotificationModule,
+        TuiNumberFormatModule,
         tuiGetDocModules(ExampleTuiAmountComponent),
         TuiLinkModule,
     ],
@@ -23,7 +27,6 @@ import {TuiAmountExample4} from './examples/4';
         TuiAmountExample1,
         TuiAmountExample2,
         TuiAmountExample3,
-        TuiAmountExample4,
     ],
     exports: [ExampleTuiAmountComponent],
 })

projects/demo/src/modules/experimental/amount/examples/1/index.html

@@ -1,14 +1,14 @@
 <ol>
-    <li>{{ 10728.9 | tuiAmount }}</li>
-    <li>{{ 10728.9 | tuiAmount: 'RUB' }}</li>
-    <li>{{ 10728.9 | tuiAmount: 'EUR' }}</li>
-    <li>{{ 10728.9 | tuiAmount: 'USD' }}</li>
-    <li>{{ 10728.9 | tuiAmount: 'GBP' }}</li>
-    <li>{{ -12345.1 | tuiAmount: 'USD' : 'left' }}</li>
-    <li>{{ 100 | tuiAmount: '£' : 'left' }}</li>
-    <li>{{ 200 | tuiAmount: 'AED' : 'left' }}</li>
+    <li>{{ 10728.9 | tuiAmount | async }}</li>
+    <li>{{ 10728.9 | tuiAmount: 'RUB' | async }}</li>
+    <li>{{ 10728.9 | tuiAmount: 'EUR' | async }}</li>
+    <li>{{ 10728.9 | tuiAmount: 'USD' | async }}</li>
+    <li>{{ 10728.9 | tuiAmount: 'GBP' | async }}</li>
+    <li>{{ -12345.1 | tuiAmount: 'USD' : 'left' | async }}</li>
+    <li>{{ 100 | tuiAmount: '£' : 'left' | async }}</li>
+    <li>{{ 200 | tuiAmount: 'AED' : 'left' | async }}</li>
 </ol>
 
 <hr class="tui-space_top-1 tui-space_bottom-1" />
 
-<span>Remaining {{ 10728.9 | tuiAmount }} of {{ 11000 | tuiAmount }}</span>
+<span>Remaining {{ 10728.9 | tuiAmount | async }} of {{ 11000 | tuiAmount | async }}</span>

projects/demo/src/modules/experimental/amount/examples/2/index.html

@@ -1,2 +1,7 @@
-<div>{{ -10000000.536 | tuiAmount: 'USD' : 'left' }}</div>
-<div>{{ 200.211 | tuiAmount: 'EUR' }}</div>
+<div>
+    <div [tuiNumberFormat]="{rounding: 'round', thousandSeparator: ',', decimalSeparator: '.'}">
+        {{ -10000000.536 | tuiAmount: 'USD' : 'left' | async }}
+    </div>
+
+    <div>{{ 200.536 | tuiAmount: 'EUR' | async }}</div>
+</div>

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 {}

projects/demo/src/modules/experimental/amount/examples/3/index.html

@@ -1,2 +1,2 @@
-<div>{{ -12.3 | tuiAmount: 'USD' : 'left' }}</div>
-<div>{{ 3000 | tuiAmount: 'EUR' }}</div>
+<div>{{ -12.3 | tuiAmount | async }}</div>
+<div>{{ 3000 | tuiAmount | async }}</div>

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',
         }),
     ],
 })

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 {}

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);

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<TuiNumberFormatSettings>,
     ) {}
 
     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<string> {
+        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;
     }
 }