feat(experimental): TuiAmount add new pipe

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 () =>
@@ -263,7 +271,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

@@ -901,6 +901,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/experimental/amount/amount.component.ts

@@ -0,0 +1,38 @@
+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'),
+    };
+
+    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

@@ -0,0 +1,30 @@
+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 {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,
+        tuiGetDocModules(ExampleTuiAmountComponent),
+        TuiLinkModule,
+    ],
+    declarations: [
+        ExampleTuiAmountComponent,
+        TuiAmountExample1,
+        TuiAmountExample2,
+        TuiAmountExample3,
+        TuiAmountExample4,
+    ],
+    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 }}</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>
+</ol>
+
+<hr class="tui-space_top-1 tui-space_bottom-1" />
+
+<span>Remaining {{ 10728.9 | tuiAmount }} of {{ 11000 | tuiAmount }}</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,2 @@
+<div>{{ -10000000.536 | tuiAmount: 'USD' : 'left' }}</div>
+<div>{{ 200.211 | tuiAmount: 'EUR' }}</div>

projects/demo/src/modules/experimental/amount/examples/2/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 {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

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

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

@@ -0,0 +1,18 @@
+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',
+            decimal: 'always',
+        }),
+    ],
+})
+export class TuiAmountExample3 {}

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

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

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

@@ -0,0 +1,18 @@
+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 {}

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,11 @@
+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

@@ -0,0 +1,26 @@
+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';
+
+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);
+
+export function tuiAmountOptionsProvider(options: Partial<TuiAmountOptions>): Provider {
+    return tuiProvideOptions(TUI_AMOUNT_OPTIONS, options, TUI_AMOUNT_DEFAULT_OPTIONS);
+}

projects/experimental/pipes/amount/amount.pipe.ts

@@ -0,0 +1,45 @@
+import {Inject, Pipe, PipeTransform} from '@angular/core';
+import {tuiFormatCurrency, tuiFormatSignSymbol} from '@taiga-ui/addon-commerce';
+import {
+    TUI_NUMBER_FORMAT,
+    tuiFormatNumber,
+    TuiNumberFormatSettings,
+} from '@taiga-ui/core';
+
+import {TUI_AMOUNT_OPTIONS, TuiAmountOptions} from './amount.options';
+
+@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,
+    ) {}
+
+    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` ? ` ` : ``;
+
+        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;
+    }
+}

projects/experimental/pipes/amount/index.ts

@@ -0,0 +1,3 @@
+export * from './amount.module';
+export * from './amount.options';
+export * from './amount.pipe';

projects/experimental/pipes/amount/ng-package.json

@@ -0,0 +1,8 @@
+{
+    "lib": {
+        "entryFile": "index.ts",
+        "styleIncludePaths": [
+            "../../../core/styles"
+        ]
+    }
+}

projects/experimental/pipes/index.ts

@@ -1,3 +1,4 @@
+export * from '@taiga-ui/experimental/pipes/amount';
 export * from '@taiga-ui/experimental/pipes/auto-color';
 export * from '@taiga-ui/experimental/pipes/fallback-src';
 export * from '@taiga-ui/experimental/pipes/initials';