feat(experimental): TuiAmount add new pipe (#5735)

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, decimalLimit: NaN, ...format});
+    }
+
+    constructor(
+        @Inject(TUI_NUMBER_FORMAT) private readonly settings: TuiNumberFormatSettings,
+    ) {
+        super({...settings, decimalLimit: NaN});
+    }
+}

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,10 @@
+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, decimalLimit: NaN}),
+);

projects/demo/src/modules/app/app.routes.ts

@@ -207,6 +207,14 @@ export const ROUTES: Routes = [
             title: `BlockStatus`,
         },
     },
+    {
+        path: `experimental/amount`,
+        loadChildren: async () =>
+            (await import(`../experimental/amount/amount.module`)).ExampleTuiAmountModule,
+        data: {
+            title: `Amount `,
+        },
+    },
     {
         path: `experimental/avatar`,
         loadChildren: async () =>
@@ -271,7 +279,7 @@ export const ROUTES: Routes = [
             (await import(`../experimental/badged-content/badged-content.module`))
                 .ExampleTuiBadgedContentModule,
         data: {
-            title: `BadgedContent`,
+            title: `BadgedContent `,
         },
     },
     {

projects/demo/src/modules/app/pages.ts

@@ -925,6 +925,12 @@ export const pages: TuiDocPages = [
         keywords: `чек, радио, ввод, форма, form, checkbox, radio, toggle`,
         route: `/experimental/toggle`,
     },
+    {
+        section: `Experimental`,
+        title: `Amount `,
+        keywords: `amount, money, деньги, сумма, количество, cash, копейки, рубли, доллары, евро`,
+        route: `/experimental/amount`,
+    },
     // Charts
     {
         section: `Charts`,

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

@@ -0,0 +1,33 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {TuiDocExample, TuiRawLoaderContent} from '@taiga-ui/addon-doc';
+
+@Component({
+    selector: 'example-amount',
+    templateUrl: './amount.template.html',
+    changeDetection,
+})
+export class ExampleTuiAmountComponent {
+    readonly exampleModule: TuiRawLoaderContent = import(
+        './examples/import/import-module.md?raw'
+    );
+
+    readonly exampleHtml: TuiRawLoaderContent = import(
+        './examples/import/insert-template.md?raw'
+    );
+
+    readonly example1: TuiDocExample = {
+        HTML: import('./examples/1/index.html?raw'),
+        TypeScript: import('./examples/1/index.ts?raw'),
+    };
+
+    readonly example2: TuiDocExample = {
+        HTML: import('./examples/2/index.html?raw'),
+        TypeScript: import('./examples/2/index.ts?raw'),
+    };
+
+    readonly example3: TuiDocExample = {
+        HTML: import('./examples/3/index.html?raw'),
+        TypeScript: import('./examples/3/index.ts?raw'),
+    };
+}

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

@@ -0,0 +1,33 @@
+import {CommonModule} from '@angular/common';
+import {NgModule} from '@angular/core';
+import {tuiGetDocModules} from '@taiga-ui/addon-doc';
+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';
+
+@NgModule({
+    imports: [
+        CommonModule,
+        TuiAmountPipeModule,
+        TuiNotificationModule,
+        TuiNumberFormatModule,
+        tuiGetDocModules(ExampleTuiAmountComponent),
+        TuiLinkModule,
+    ],
+    declarations: [
+        ExampleTuiAmountComponent,
+        TuiAmountExample1,
+        TuiAmountExample2,
+        TuiAmountExample3,
+    ],
+    exports: [ExampleTuiAmountComponent],
+})
+export class ExampleTuiAmountModule {}

projects/demo/src/modules/experimental/amount/amount.template.html

@@ -0,0 +1,72 @@
+<tui-doc-page
+    header="AmountPipe"
+    package="EXPERIMENTAL"
+    type="pipes"
+>
+    <ng-template pageTab>
+        <tui-notification status="warning">
+            This code is
+            <strong>experimental</strong>
+            and is a subject to change. Expect final solution to be shipped in the next major version
+        </tui-notification>
+
+        <p>Pipe to format number values to show money sums</p>
+
+        <p>
+            Number formatting can be customized by using
+            <a
+                fragment="number-format"
+                routerLink="/utils/tokens"
+                tuiLink
+            >
+                TUI_NUMBER_FORMAT
+            </a>
+        </p>
+
+        <tui-doc-example
+            id="base"
+            heading="Basic"
+            [content]="example1"
+        >
+            <tui-amount-example-1></tui-amount-example-1>
+        </tui-doc-example>
+
+        <tui-doc-example
+            id="format"
+            heading="Format"
+            [content]="example2"
+        >
+            <tui-amount-example-2></tui-amount-example-2>
+        </tui-doc-example>
+
+        <tui-doc-example
+            id="options"
+            heading="Options"
+            [content]="example3"
+        >
+            <tui-amount-example-3></tui-amount-example-3>
+        </tui-doc-example>
+    </ng-template>
+
+    <ng-template pageTab="Setup">
+        <ol class="b-demo-steps">
+            <li>
+                <p>Import into a module</p>
+
+                <tui-doc-code
+                    filename="myComponent.module.ts"
+                    [code]="exampleModule"
+                ></tui-doc-code>
+            </li>
+
+            <li>
+                <p>Add to the template:</p>
+
+                <tui-doc-code
+                    filename="myComponent.template.html"
+                    [code]="exampleHtml"
+                ></tui-doc-code>
+            </li>
+        </ol>
+    </ng-template>
+</tui-doc-page>

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

@@ -0,0 +1,14 @@
+<ol>
+    <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 | async }} of {{ 11000 | tuiAmount | async }}</span>

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

@@ -0,0 +1,11 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+
+@Component({
+    selector: 'tui-amount-example-1',
+    templateUrl: './index.html',
+    changeDetection,
+    encapsulation,
+})
+export class TuiAmountExample1 {}

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

@@ -0,0 +1,9 @@
+<div [tuiNumberFormat]="{rounding: 'round', thousandSeparator: ',', decimalSeparator: '.'}">
+    {{ -10000000.536 | tuiAmount: 'USD' : 'left' | async }}
+</div>
+
+<div>{{ 200.536 | tuiAmount: 'EUR' | async }}</div>
+
+<div [tuiNumberFormat]="{rounding: 'ceil', decimalLimit: 1}">
+    {{ 54000.643 | tuiAmount: 'USD' : 'left' | async }}
+</div>

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

@@ -0,0 +1,11 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+
+@Component({
+    selector: 'tui-amount-example-2',
+    templateUrl: './index.html',
+    changeDetection,
+    encapsulation,
+})
+export class TuiAmountExample2 {}

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

@@ -0,0 +1,2 @@
+<div>{{ -12.3 | tuiAmount | async }}</div>
+<div>{{ 3000 | tuiAmount | async }}</div>

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

@@ -0,0 +1,19 @@
+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-3',
+    templateUrl: './index.html',
+    changeDetection,
+    encapsulation,
+    providers: [
+        tuiAmountOptionsProvider({
+            sign: 'always',
+            currency: 'USD',
+            currencyAlign: 'left',
+        }),
+    ],
+})
+export class TuiAmountExample3 {}

projects/demo/src/modules/experimental/amount/examples/import/import-module.md

@@ -0,0 +1,13 @@
+```ts
+import {TuiAmountPipeModule} from '@taiga-ui/experimental';
+
+// ...
+
+@NgModule({
+  imports: [
+    // ...
+    TuiAmountPipeModule,
+  ],
+})
+export class MyModule {}
+```

projects/demo/src/modules/experimental/amount/examples/import/insert-template.md

@@ -0,0 +1,3 @@
+```html
+{{ 100000 | tuiAmount : currency : align}}
+```

projects/experimental/pipes/amount/amount.module.ts

@@ -0,0 +1,9 @@
+import {NgModule} from '@angular/core';
+
+import {TuiAmountPipePipe} from './amount.pipe';
+
+@NgModule({
+    declarations: [TuiAmountPipePipe],
+    exports: [TuiAmountPipePipe],
+})
+export class TuiAmountPipeModule {}