feat(kit): allow dynamic changes to TUI_NUMBER_FORMAT (#6856)

Co-authored-by: taiga-family-bot <[email protected]>

projects/addon-commerce/pipes/amount/amount.pipe.ts

@@ -3,7 +3,7 @@ import {TuiCurrencyVariants} from '@taiga-ui/addon-commerce/types';
 import {tuiFormatCurrency, tuiFormatSignSymbol} from '@taiga-ui/addon-commerce/utils';
 import {CHAR_NO_BREAK_SPACE} from '@taiga-ui/cdk';
 import {
-    TUI_NUMBER_FORMAT_OBSERVABLE,
+    TUI_NUMBER_FORMAT,
     TuiDecimal,
     tuiFormatNumber,
     TuiHorizontalDirection,
@@ -20,7 +20,7 @@ const DEFAULT_DECIMAL_LIMIT = 2;
 })
 export class TuiAmountPipe implements PipeTransform {
     private readonly options = inject(TUI_AMOUNT_OPTIONS);
-    private readonly format = inject(TUI_NUMBER_FORMAT_OBSERVABLE);
+    private readonly format = inject(TUI_NUMBER_FORMAT);
 
     public transform(
         value: number,

projects/core/constants/default-number-format.ts

@@ -2,7 +2,7 @@ import {CHAR_NO_BREAK_SPACE} from '@taiga-ui/cdk';
 import {TuiNumberFormatSettings} from '@taiga-ui/core/interfaces';
 
 export const TUI_DEFAULT_NUMBER_FORMAT: TuiNumberFormatSettings = {
-    decimalLimit: Infinity,
+    decimalLimit: NaN,
     decimalSeparator: ',',
     thousandSeparator: CHAR_NO_BREAK_SPACE,
     zeroPadding: true,

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

@@ -1,27 +1,31 @@
-/* eslint-disable no-restricted-syntax,no-restricted-imports */
-import {Directive, forwardRef, Inject, Input} from '@angular/core';
+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';
+import {TUI_NUMBER_FORMAT} from '@taiga-ui/core/tokens';
+import {combineLatest, map, Observable, ReplaySubject} from 'rxjs';
 
 @Directive({
     selector: '[tuiNumberFormat]',
     providers: [
         {
-            provide: TUI_NUMBER_FORMAT_OBSERVABLE,
+            provide: TUI_NUMBER_FORMAT,
             useExisting: forwardRef(() => TuiNumberFormatDirective),
         },
     ],
 })
-export class TuiNumberFormatDirective extends BehaviorSubject<TuiNumberFormatSettings> {
+export class TuiNumberFormatDirective extends Observable<TuiNumberFormatSettings> {
+    private readonly settings = new ReplaySubject<Partial<TuiNumberFormatSettings>>(1);
+    private readonly parent = inject(TUI_NUMBER_FORMAT, {skipSelf: true});
+
     @Input()
     public set tuiNumberFormat(format: Partial<TuiNumberFormatSettings>) {
-        this.next({...this.settings, decimalLimit: NaN, ...format});
+        this.settings.next(format);
     }
 
-    constructor(
-        @Inject(TUI_NUMBER_FORMAT) private readonly settings: TuiNumberFormatSettings,
-    ) {
-        super({...settings, decimalLimit: NaN});
+    constructor() {
+        super(subscriber =>
+            combineLatest([this.parent, this.settings])
+                .pipe(map(([parent, settings]) => ({...parent, ...settings})))
+                .subscribe(subscriber),
+        );
     }
 }

projects/core/interfaces/number-format-settings.ts

@@ -31,5 +31,5 @@ export interface TuiNumberFormatSettings {
     /**
      * Decimal part display mode. ('not-zero' by default)
      */
-    readonly decimal?: TuiDecimal;
+    readonly decimal: TuiDecimal;
 }

projects/core/pipes/format-number/format-number.pipe.ts

@@ -2,6 +2,7 @@ import {inject, Pipe, PipeTransform} from '@angular/core';
 import {TuiNumberFormatSettings} from '@taiga-ui/core/interfaces';
 import {TUI_NUMBER_FORMAT} from '@taiga-ui/core/tokens';
 import {tuiFormatNumber} from '@taiga-ui/core/utils/format';
+import {map, Observable} from 'rxjs';
 
 @Pipe({name: 'tuiFormatNumber'})
 export class TuiFormatNumberPipe implements PipeTransform {
@@ -16,7 +17,17 @@ export class TuiFormatNumberPipe implements PipeTransform {
     public transform(
         value: number,
         settings: Partial<TuiNumberFormatSettings> = {},
-    ): string {
-        return tuiFormatNumber(value, {...this.numberFormat, ...settings});
+    ): Observable<string> {
+        return this.numberFormat.pipe(
+            map(format =>
+                tuiFormatNumber(value, {
+                    ...format,
+                    decimalLimit: Number.isNaN(format.decimalLimit)
+                        ? Infinity
+                        : format.decimalLimit,
+                    ...settings,
+                }),
+            ),
+        );
     }
 }

projects/core/tokens/index.ts

@@ -16,7 +16,6 @@ export * from './is-mobile-resolution';
 export * from './media';
 export * from './mode';
 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.ts

@@ -1,15 +1,26 @@
-import {Provider} from '@angular/core';
-import {tuiCreateToken, tuiProvideOptions} from '@taiga-ui/cdk';
+import {InjectionToken, Optional, Provider, SkipSelf} from '@angular/core';
+import {tuiCreateToken} from '@taiga-ui/cdk';
 import {TUI_DEFAULT_NUMBER_FORMAT} from '@taiga-ui/core/constants';
 import {TuiNumberFormatSettings} from '@taiga-ui/core/interfaces';
+import {map, Observable, of} from 'rxjs';
 
 /**
  * Formatting configuration for displayed numbers
  */
-export const TUI_NUMBER_FORMAT = tuiCreateToken(TUI_DEFAULT_NUMBER_FORMAT);
+export const TUI_NUMBER_FORMAT: InjectionToken<Observable<TuiNumberFormatSettings>> =
+    tuiCreateToken(of(TUI_DEFAULT_NUMBER_FORMAT));
 
 export function tuiNumberFormatProvider(
     options: Partial<TuiNumberFormatSettings>,
 ): Provider {
-    return tuiProvideOptions(TUI_NUMBER_FORMAT, options, TUI_DEFAULT_NUMBER_FORMAT);
+    return {
+        provide: TUI_NUMBER_FORMAT,
+        deps: [[new Optional(), new SkipSelf(), TUI_NUMBER_FORMAT]],
+        useFactory: (
+            parent: Observable<TuiNumberFormatSettings> | null,
+        ): Observable<TuiNumberFormatSettings> =>
+            (parent || of(TUI_DEFAULT_NUMBER_FORMAT)).pipe(
+                map(format => ({...format, ...options})),
+            ),
+    };
 }

projects/core/utils/format/format-number.ts

@@ -18,6 +18,7 @@ export function tuiFormatNumber(
 ): string {
     const {decimalLimit, decimalSeparator, thousandSeparator, zeroPadding, rounding} = {
         ...TUI_DEFAULT_NUMBER_FORMAT,
+        decimalLimit: Infinity,
         ...settings,
     };
 

projects/demo/src/modules/charts/bar-set/examples/5/index.html

@@ -3,5 +3,5 @@
     [collapsed]="true"
     [value]="value"
 >
-    {{ sum | tuiFormatNumber }}
+    {{ sum | tuiFormatNumber | async }}
 </tui-bar-set>

projects/demo/src/modules/components/dialog/examples/9/pay-modal/pay-modal.component.html

@@ -104,6 +104,6 @@ <h1 class="title">Pay by card</h1>
         [showLoader]="!!(payProcessing$ | async)"
         (click)="pay()"
     >
-        Pay {{ amount | tuiFormatNumber }} ₽
+        Pay {{ amount | tuiFormatNumber | async }} ₽
     </button>
 </div>

projects/demo/src/modules/components/input-number/examples/7/index.html

@@ -0,0 +1,7 @@
+<tui-input-number
+    tuiTextfieldPrefix="$"
+    class="input"
+    [(ngModel)]="value"
+>
+    Type a sum
+</tui-input-number>

projects/demo/src/modules/components/input-number/examples/7/index.ts

@@ -0,0 +1,31 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+import {TUI_DEFAULT_NUMBER_FORMAT, TUI_NUMBER_FORMAT} from '@taiga-ui/core';
+import {TUI_LANGUAGE, TuiLanguage} from '@taiga-ui/i18n';
+import {BehaviorSubject, map, Observable, switchMap} from 'rxjs';
+
+@Component({
+    selector: 'tui-input-number-example-7',
+    templateUrl: './index.html',
+    encapsulation,
+    changeDetection,
+    providers: [
+        {
+            provide: TUI_NUMBER_FORMAT,
+            deps: [TUI_LANGUAGE],
+            useFactory: (lang: BehaviorSubject<Observable<TuiLanguage>>) =>
+                lang.pipe(
+                    switchMap(lang => lang),
+                    map(({name}) => ({
+                        ...TUI_DEFAULT_NUMBER_FORMAT,
+                        thousandSeparator: name === 'english' ? ',' : ' ',
+                        decimalSeparator: name === 'english' ? '.' : ',',
+                    })),
+                ),
+        },
+    ],
+})
+export class TuiInputNumberExample7 {
+    protected value = 1234.56;
+}

projects/demo/src/modules/components/input-number/input-number.component.ts

@@ -56,6 +56,11 @@ export class ExampleTuiInputNumberComponent extends AbstractExampleTuiControl {
         HTML: import('./examples/6/index.html?raw'),
     };
 
+    protected readonly example7: TuiDocExample = {
+        TypeScript: import('./examples/7/index.ts?raw'),
+        HTML: import('./examples/7/index.html?raw'),
+    };
+
     protected readonly minVariants: readonly number[] = [-Infinity, -500, 5, 25];
 
     protected min = this.minVariants[0];

projects/demo/src/modules/components/input-number/input-number.module.ts

@@ -21,6 +21,7 @@ import {TuiInputNumberExample3} from './examples/3';
 import {TuiInputNumberExample4} from './examples/4';
 import {TuiInputNumberExample5} from './examples/5';
 import {TuiInputNumberExample6} from './examples/6';
+import {TuiInputNumberExample7} from './examples/7';
 import {ExampleTuiInputNumberComponent} from './input-number.component';
 
 @NgModule({
@@ -49,6 +50,7 @@ import {ExampleTuiInputNumberComponent} from './input-number.component';
         TuiInputNumberExample4,
         TuiInputNumberExample5,
         TuiInputNumberExample6,
+        TuiInputNumberExample7,
     ],
     exports: [ExampleTuiInputNumberComponent],
 })

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

@@ -144,6 +144,14 @@ <h3>There are also other components to input numbers:</h3>
         >
             <tui-input-number-example-6></tui-input-number-example-6>
         </tui-doc-example>
+
+        <tui-doc-example
+            id="dynamic"
+            heading="Dynamic formatting change"
+            [content]="example7"
+        >
+            <tui-input-number-example-7></tui-input-number-example-7>
+        </tui-doc-example>
     </ng-template>
 
     <ng-template pageTab>

projects/demo/src/modules/directives/copy-processor/examples/1/index.html

@@ -1,6 +1,6 @@
 <tui-input-number
     class="tui-space_bottom-2"
-    [tuiCopyProcessor]="numberProcessor"
+    [tuiCopyProcessor]="(numberProcessor$ | async)!"
     [(ngModel)]="value"
 >
     Copy this

projects/demo/src/modules/directives/copy-processor/examples/1/index.ts

@@ -3,6 +3,7 @@ import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
 import {TuiStringHandler} from '@taiga-ui/cdk';
 import {TUI_NUMBER_FORMAT, TuiAlertService} from '@taiga-ui/core';
+import {map} from 'rxjs';
 
 @Component({
     selector: 'tui-copy-processor-example-1',
@@ -22,10 +23,14 @@ export class TuiCopyProcessorExample1 {
         this.alerts.open(event.clipboardData?.getData('text/plain') ?? '').subscribe();
     }
 
-    protected readonly numberProcessor: TuiStringHandler<string> = text =>
-        text
-            .replace(this.format.decimalSeparator, '.')
-            .replaceAll(new RegExp(this.format.thousandSeparator, 'g'), '');
+    protected numberProcessor$ = this.format.pipe(
+        map(
+            format => (text: string) =>
+                text
+                    .replace(format.decimalSeparator, '.')
+                    .replaceAll(new RegExp(format.thousandSeparator, 'g'), ''),
+        ),
+    );
 
     protected readonly textProcessor: TuiStringHandler<string> = text =>
         text.toUpperCase();

projects/demo/src/modules/pipes/format-number/examples/1/index.html

@@ -1,8 +1,11 @@
-<p>Formatted number by default: {{ 10500.33 | tuiFormatNumber }}</p>
+<p>Formatted number by default: {{ 10500.33 | tuiFormatNumber | async }}</p>
 
-<p>Formatted number with custom params: {{ 10500.33 | tuiFormatNumber: {decimalLimit: 4, decimalSeparator: '.'} }}</p>
+<p>
+    Formatted number with custom params:
+    {{ 10500.33 | tuiFormatNumber: {decimalLimit: 4, decimalSeparator: '.'} | async }}
+</p>
 
 <p>
     Formatted number with rounding:
-    {{ 10500.334 | tuiFormatNumber: {decimalLimit: 2, decimalSeparator: '.', rounding: 'ceil'} }}
+    {{ 10500.334 | tuiFormatNumber: {decimalLimit: 2, decimalSeparator: '.', rounding: 'ceil'} | async }}
 </p>

projects/demo/src/modules/pipes/format-number/examples/import/insert-template.md

@@ -1,3 +1,3 @@
 ```html
-Formatted number: {{index | tuiFormatNumber}}
+Formatted number: {{index | tuiFormatNumber | async}}
 ```

projects/demo/src/modules/tables/table-filters/examples/1/index.html

@@ -42,7 +42,7 @@
                     *tuiCell="'balance'"
                     tuiTd
                 >
-                    {{ item.balance | tuiFormatNumber }}
+                    {{ item.balance | tuiFormatNumber | async }}
                 </td>
             </tr>
         </tbody>

projects/demo/src/modules/tables/table/examples/1/index.html

@@ -26,7 +26,7 @@
                 *tuiCell="'balance'"
                 tuiTd
             >
-                {{ item.balance | tuiFormatNumber }}
+                {{ item.balance | tuiFormatNumber | async }}
             </td>
         </tr>
     </tbody>

projects/demo/src/modules/tables/table/examples/3/index.html

@@ -153,7 +153,7 @@
                     tuiTd
                     class="number text"
                 >
-                    {{ getTotal(item) | tuiFormatNumber }}
+                    {{ getTotal(item) | tuiFormatNumber | async }}
                 </td>
             </tr>
         </tbody>
@@ -234,7 +234,7 @@
                     tuiTd
                     class="number text"
                 >
-                    {{ getTotal(item) | tuiFormatNumber }}
+                    {{ getTotal(item) | tuiFormatNumber | async }}
                 </td>
             </tr>
         </tbody>

projects/demo/src/modules/utils/tokens/examples/8/index.html

@@ -34,10 +34,10 @@ <h3>Components that are customizable:</h3>
         <ul class="tui-list tui-list_small">
             <li class="tui-list__item">
                 <a
-                    routerLink="/components/money"
+                    routerLink="/pipes/amount"
                     tuiLink
                 >
-                    TuiMoneyComponent
+                    TuiAmount
                 </a>
             </li>
             <li class="tui-list__item">