diff --git a/projects/demo/src/components/number-format/index.html b/projects/demo/src/components/number-format/index.html new file mode 100644 index 000000000000..dc600e460a8b --- /dev/null +++ b/projects/demo/src/components/number-format/index.html @@ -0,0 +1,141 @@ + + + + + TuiNumberFormat + +
+ Usage example: +
+ [tuiNumberFormat]="{thousandSeparator, decimalSeparator, ..., rounding}" +
+ + + + + + Symbol for separating thousands + + + + Symbol for separating fraction + + + + A number of digits after + [decimalSeparator] + ( + Infinity + for an untouched decimal part) + + + +
+
+ always +
+
+ number of digits after + [decimalSeparator] + is + always + equal to the precision. +
+ +
+ pad +
+
pads trailing zeroes up to precision, if the number is fractional
+ +
+ not-zero +
+
drops trailing zeroes
+
+ + + +
+
+ round +
+
+ rounds to the + nearest + number with the specified + [precision] +
+ +
+ floor +
+
+ rounds down (the + largest + number with the specified + [precision] + less than or equal to a given number) +
+ +
+ ceil +
+
+ rounds up (the + smallest + number with the specified + [precision] + greater than or equal to a given number) +
+ +
+ truncate +
+
+ returns the number with the specified + [precision] + by just removing extra fractional digits +
+
+ diff --git a/projects/demo/src/components/number-format/index.ts b/projects/demo/src/components/number-format/index.ts new file mode 100644 index 000000000000..45abd332bb60 --- /dev/null +++ b/projects/demo/src/components/number-format/index.ts @@ -0,0 +1,48 @@ +import {NgIf} from '@angular/common'; +import type {WritableSignal} from '@angular/core'; +import {ChangeDetectionStrategy, Component, Input, signal} from '@angular/core'; +import {RouterLink} from '@angular/router'; +import {DemoRoute} from '@demo/routes'; +import {TuiDocAPIItem} from '@taiga-ui/addon-doc'; +import type {TuiLooseUnion, TuiRounding} from '@taiga-ui/cdk'; +import type {TuiDecimalMode, TuiNumberFormatSettings} from '@taiga-ui/core'; +import {TUI_DEFAULT_NUMBER_FORMAT, TuiLink, TuiTitle} from '@taiga-ui/core'; +import {tuiInputNumberOptionsProvider} from '@taiga-ui/legacy'; + +@Component({ + standalone: true, + selector: 'tbody[tuiDocNumberFormat]', + imports: [NgIf, RouterLink, TuiDocAPIItem, TuiLink, TuiTitle], + templateUrl: './index.html', + changeDetection: ChangeDetectionStrategy.OnPush, + providers: [ + tuiInputNumberOptionsProvider({ + min: 0, + }), + ], +}) +export class TuiDocNumberFormat + implements + Record< + keyof TuiNumberFormatSettings, + WritableSignal + > +{ + protected readonly routes = DemoRoute; + protected readonly decimalVariants: TuiDecimalMode[] = ['always', 'pad', 'not-zero']; + protected readonly roundingVariants: TuiRounding[] = [ + 'truncate', + 'round', + 'ceil', + 'floor', + ]; + + @Input() + public hiddenOptions: Array> = []; + + public thousandSeparator = signal(TUI_DEFAULT_NUMBER_FORMAT.thousandSeparator); + public decimalSeparator = signal(TUI_DEFAULT_NUMBER_FORMAT.decimalSeparator); + public precision = signal(TUI_DEFAULT_NUMBER_FORMAT.precision); + public decimalMode = signal(TUI_DEFAULT_NUMBER_FORMAT.decimalMode); + public rounding = signal(TUI_DEFAULT_NUMBER_FORMAT.rounding); +} diff --git a/projects/demo/src/modules/components/abstract/inherited-documentation/index.html b/projects/demo/src/modules/components/abstract/inherited-documentation/index.html index 662320326635..19a182544bed 100644 --- a/projects/demo/src/modules/components/abstract/inherited-documentation/index.html +++ b/projects/demo/src/modules/components/abstract/inherited-documentation/index.html @@ -1,5 +1,4 @@ - diff --git a/projects/demo/src/modules/components/abstract/inherited-documentation/index.ts b/projects/demo/src/modules/components/abstract/inherited-documentation/index.ts index c201f7d7431e..4825ff69b5e1 100644 --- a/projects/demo/src/modules/components/abstract/inherited-documentation/index.ts +++ b/projects/demo/src/modules/components/abstract/inherited-documentation/index.ts @@ -14,8 +14,6 @@ import {DropdownDocumentation} from '../dropdown-documentation'; import {AbstractExampleTuiHint} from '../hint'; import {HintControllerDocumentation} from '../hint-controller-documentation'; import {AbstractExampleTuiInteractive} from '../interactive'; -import {AbstractExampleTuiNumberFormat} from '../number-format'; -import {NumberFormatDocumentation} from '../number-format-documentation'; import type {TuiSupportingDocumentationComponent} from '../supporting-documentation-component'; import {TextfieldControllerDocumentation} from '../textfield-controller-documentation'; @@ -26,7 +24,6 @@ import {TextfieldControllerDocumentation} from '../textfield-controller-document DropdownDocumentation, HintControllerDocumentation, NgIf, - NumberFormatDocumentation, TextfieldControllerDocumentation, TuiDocDocumentation, TuiDocDocumentationPropertyConnector, @@ -70,10 +67,4 @@ export class InheritedDocumentation { ): documentedComponent is AbstractExampleTuiHint { return documentedComponent instanceof AbstractExampleTuiHint; } - - protected isTuiFormatNumber( - documentedComponent: TuiSupportingDocumentationComponent, - ): documentedComponent is AbstractExampleTuiHint { - return documentedComponent instanceof AbstractExampleTuiNumberFormat; - } } diff --git a/projects/demo/src/modules/components/abstract/number-format-documentation/index.html b/projects/demo/src/modules/components/abstract/number-format-documentation/index.html deleted file mode 100644 index 5fc2642e93ff..000000000000 --- a/projects/demo/src/modules/components/abstract/number-format-documentation/index.html +++ /dev/null @@ -1,90 +0,0 @@ -
- Can be expanded with - - TuiNumberFormat - -
-

- Usage example: - - [tuiNumberFormat]='{decimalMode, precision, rounding, zeroPadding, thousandSeparator, - decimalSeparator}' - -

-

- Requires you to import - TuiNumberFormat - . -

- - - -
-
- always -
-
- number of digits after - decimalSeparator - is - always - equal to the precision. -
- -
- pad -
-
pads trailing zeroes up to precision, if the number is fractional
- -
- not-zero -
-
drops trailing zeroes
-
- - - Rounding - - - A number of digits after comma ( - Infinity - for an untouched decimal part) - - - Symbol for separating thousands - - - Symbol for separating fraction - - diff --git a/projects/demo/src/modules/components/abstract/number-format-documentation/index.ts b/projects/demo/src/modules/components/abstract/number-format-documentation/index.ts deleted file mode 100644 index c43690f24723..000000000000 --- a/projects/demo/src/modules/components/abstract/number-format-documentation/index.ts +++ /dev/null @@ -1,32 +0,0 @@ -import {Component, inject} from '@angular/core'; -import {RouterLink} from '@angular/router'; -import {changeDetection} from '@demo/emulate/change-detection'; -import {DemoRoute} from '@demo/routes'; -import { - TuiDocDocumentation, - TuiDocDocumentationPropertyConnector, -} from '@taiga-ui/addon-doc'; -import {TuiLink} from '@taiga-ui/core'; - -import {ABSTRACT_PROPS_ACCESSOR} from '../abstract-props-accessor'; -import type {AbstractExampleTuiNumberFormat} from '../number-format'; - -@Component({ - standalone: true, - selector: 'number-format-documentation', - imports: [ - RouterLink, - TuiDocDocumentation, - TuiDocDocumentationPropertyConnector, - TuiLink, - ], - templateUrl: './index.html', - changeDetection, -}) -export class NumberFormatDocumentation { - protected readonly documentedComponent = inject( - ABSTRACT_PROPS_ACCESSOR, - ); - - protected readonly routes = DemoRoute; -} diff --git a/projects/demo/src/modules/components/abstract/number-format.ts b/projects/demo/src/modules/components/abstract/number-format.ts deleted file mode 100644 index 1829ab6f3800..000000000000 --- a/projects/demo/src/modules/components/abstract/number-format.ts +++ /dev/null @@ -1,24 +0,0 @@ -import type {TuiRounding} from '@taiga-ui/cdk'; -import type {TuiDecimalMode} from '@taiga-ui/core'; -import {TUI_DEFAULT_NUMBER_FORMAT} from '@taiga-ui/core'; - -import {AbstractExampleTuiControl} from './control'; - -export abstract class AbstractExampleTuiNumberFormat extends AbstractExampleTuiControl { - public precision = TUI_DEFAULT_NUMBER_FORMAT.precision; - - public readonly decimalVariants: TuiDecimalMode[] = ['always', 'pad', 'not-zero']; - public decimalMode = TUI_DEFAULT_NUMBER_FORMAT.decimalMode; - - public readonly roundingVariants: TuiRounding[] = [ - 'truncate', - 'round', - 'ceil', - 'floor', - ]; - - public rounding = TUI_DEFAULT_NUMBER_FORMAT.rounding; - - public decimalSeparator = TUI_DEFAULT_NUMBER_FORMAT.decimalSeparator; - public thousandSeparator = TUI_DEFAULT_NUMBER_FORMAT.thousandSeparator; -} diff --git a/projects/demo/src/modules/components/abstract/supporting-documentation-component.ts b/projects/demo/src/modules/components/abstract/supporting-documentation-component.ts index a6467e2dbbc4..a5fa099d1faa 100644 --- a/projects/demo/src/modules/components/abstract/supporting-documentation-component.ts +++ b/projects/demo/src/modules/components/abstract/supporting-documentation-component.ts @@ -1,10 +1,8 @@ import type {AbstractExampleTuiControl} from './control'; import type {AbstractExampleTuiHint} from './hint'; import type {AbstractExampleTuiInteractive} from './interactive'; -import type {AbstractExampleTuiNumberFormat} from './number-format'; export type TuiSupportingDocumentationComponent = | AbstractExampleTuiControl | AbstractExampleTuiHint - | AbstractExampleTuiInteractive - | AbstractExampleTuiNumberFormat; + | AbstractExampleTuiInteractive; diff --git a/projects/demo/src/modules/components/input-number/index.html b/projects/demo/src/modules/components/input-number/index.html index 1f2a2103e5b5..17a2f27967a0 100644 --- a/projects/demo/src/modules/components/input-number/index.html +++ b/projects/demo/src/modules/components/input-number/index.html @@ -176,11 +176,11 @@

There are also other components to input numbers:

[tuiHintContent]="hintContent" [tuiHintDirection]="hintDirection" [tuiNumberFormat]="{ - precision, - decimalMode: decimalMode, - rounding, - thousandSeparator, - decimalSeparator, + decimalMode: numberFormatDoc.decimalMode(), + rounding: numberFormatDoc.rounding(), + thousandSeparator: numberFormatDoc.thousandSeparator(), + decimalSeparator: numberFormatDoc.decimalSeparator(), + precision: numberFormatDoc.precision(), }" [tuiTextfieldCleaner]="cleaner" [tuiTextfieldCustomContent]="customContent" @@ -232,6 +232,14 @@

There are also other components to input numbers:

Step to increase/decrease value with keyboard and buttons on the side + + + +
+ @@ -129,159 +134,184 @@ - - - Disabled state (use - formControl.disable() - ) - - - Min value - - - Max value - - - Minimum indivisible value - - - Number of actual discrete slider steps - - - A number of visual segments - - - Anchor points of non-uniform format between value and position - - - A template for custom view of the left selected value. - - - A template for custom view of the right selected value. - - - Plural forms for labels. -

- Use object that mimics the + + + + Disabled state (use + formControl.disable() + ) + + + + The lowest value in the range of permitted values + + + + The greatest value in the range of permitted values + + + + Minimum indivisible value + + + + Number of actual discrete slider steps + + + + A number of visual segments (use + 1 + for no ticks) + + + + Anchor points of non-uniform format between value and position + + + + A template for custom view of the + left + selected value. + + + + A template for custom view of the + right + selected value. + + + + Plural forms for labels. + +

+ Use object that mimics the + + ICU format + + for Plural +

+ + + + Component is read only + + + + + + +
+ Can be expanded with - ICU format + TuiTextfieldController - for Plural -

- - - Component is read only - - +
-
- Can be expanded with - - TuiTextfieldController - -
- -

- Requires you to import - TuiTextfieldControllerModule -

+

+ Requires you to import + TuiTextfieldControllerModule +

- - - Label is outside a component and made with - - Label - - + Label is outside a component and made with + + Label + + - - Size - - - + + Size + + +
diff --git a/projects/demo/src/modules/components/input-range/index.ts b/projects/demo/src/modules/components/input-range/index.ts index 3f4a9f365703..ac49a71d0426 100644 --- a/projects/demo/src/modules/components/input-range/index.ts +++ b/projects/demo/src/modules/components/input-range/index.ts @@ -1,9 +1,9 @@ import {Component} from '@angular/core'; import {FormControl, ReactiveFormsModule} from '@angular/forms'; +import {TuiDocNumberFormat} from '@demo/components/number-format'; import {changeDetection} from '@demo/emulate/change-detection'; import {DemoRoute} from '@demo/routes'; import {TuiDemo} from '@demo/utils'; -import {tuiDocExcludeProperties} from '@taiga-ui/addon-doc'; import type {TuiContext} from '@taiga-ui/cdk'; import {tuiProvide} from '@taiga-ui/cdk'; import type {TuiSizeL} from '@taiga-ui/core'; @@ -12,27 +12,23 @@ import type {TuiKeySteps} from '@taiga-ui/kit'; import {TuiInputRangeModule, TuiTextfieldControllerModule} from '@taiga-ui/legacy'; import {ABSTRACT_PROPS_ACCESSOR} from '../abstract/abstract-props-accessor'; -import {AbstractExampleTuiNumberFormat} from '../abstract/number-format'; -import {NumberFormatDocumentation} from '../abstract/number-format-documentation'; +import {AbstractExampleTuiControl} from '../abstract/control'; @Component({ standalone: true, imports: [ - NumberFormatDocumentation, ReactiveFormsModule, TuiDemo, + TuiDocNumberFormat, TuiInputRangeModule, TuiNumberFormat, TuiTextfieldControllerModule, ], templateUrl: './index.html', changeDetection, - providers: [ - tuiProvide(ABSTRACT_PROPS_ACCESSOR, PageComponent), - tuiDocExcludeProperties(['precision']), - ], + providers: [tuiProvide(ABSTRACT_PROPS_ACCESSOR, PageComponent)], }) -export default class PageComponent extends AbstractExampleTuiNumberFormat { +export default class PageComponent extends AbstractExampleTuiControl { protected readonly routes = DemoRoute; protected minVariants: readonly number[] = [0, 5, 7.77, -10]; diff --git a/projects/demo/src/modules/components/input-slider/index.html b/projects/demo/src/modules/components/input-slider/index.html index 0538555605a9..4fd92fbce3dd 100644 --- a/projects/demo/src/modules/components/input-slider/index.html +++ b/projects/demo/src/modules/components/input-slider/index.html @@ -113,7 +113,12 @@ [tuiHintAppearance]="hintAppearance" [tuiHintContent]="hintContent" [tuiHintDirection]="hintDirection" - [tuiNumberFormat]="{decimalMode: decimalMode, rounding, thousandSeparator, decimalSeparator}" + [tuiNumberFormat]="{ + decimalMode: numberFormatDoc.decimalMode(), + rounding: numberFormatDoc.rounding(), + thousandSeparator: numberFormatDoc.thousandSeparator(), + decimalSeparator: numberFormatDoc.decimalSeparator(), + }" [tuiTextfieldCleaner]="cleaner" [tuiTextfieldCustomContent]="customContentSelected" [tuiTextfieldIconLeft]="iconStart" @@ -127,87 +132,105 @@ - - - Disabled state (use - formControl.disable() - ) - - - Min value - - - Max value - - - Minimum indivisible value - - - Number of actual discrete slider steps -

- If property is not set (i.e. equals to default value - 0 - ), number of steps equals - (max - min) / quantum -

- - - A number of visual segments (use - 1 - for no ticks) - - - Key steps to bind slider position and value - - - A template for custom view of selected value. - - + + + + Disabled state (use + formControl.disable() + ) + + + + The lowest value in the range of permitted values + + + + The greatest value in the range of permitted values + + + + Minimum indivisible value + + + + Number of actual discrete slider steps + +

+ If property is not set (i.e. equals to default value + 0 + ), number of steps equals + (max - min) / quantum +

+ + + + A number of visual segments (use + 1 + for no ticks) + + + + Anchor points of non-uniform format between value and position + + + + A template for custom view of selected value. + + + + +
+ diff --git a/projects/demo/src/modules/components/input-slider/index.ts b/projects/demo/src/modules/components/input-slider/index.ts index feb22515a607..d6cbc6ffb4d1 100644 --- a/projects/demo/src/modules/components/input-slider/index.ts +++ b/projects/demo/src/modules/components/input-slider/index.ts @@ -1,5 +1,6 @@ import {Component} from '@angular/core'; import {FormControl, ReactiveFormsModule} from '@angular/forms'; +import {TuiDocNumberFormat} from '@demo/components/number-format'; import {changeDetection} from '@demo/emulate/change-detection'; import {DemoRoute} from '@demo/routes'; import {TuiDemo} from '@demo/utils'; @@ -12,8 +13,8 @@ import type {TuiKeySteps} from '@taiga-ui/kit'; import {TuiInputSliderModule, TuiTextfieldControllerModule} from '@taiga-ui/legacy'; import {ABSTRACT_PROPS_ACCESSOR} from '../abstract/abstract-props-accessor'; +import {AbstractExampleTuiControl} from '../abstract/control'; import {InheritedDocumentation} from '../abstract/inherited-documentation'; -import {AbstractExampleTuiNumberFormat} from '../abstract/number-format'; @Component({ standalone: true, @@ -21,6 +22,7 @@ import {AbstractExampleTuiNumberFormat} from '../abstract/number-format'; InheritedDocumentation, ReactiveFormsModule, TuiDemo, + TuiDocNumberFormat, TuiHint, TuiInputSliderModule, TuiNumberFormat, @@ -33,7 +35,7 @@ import {AbstractExampleTuiNumberFormat} from '../abstract/number-format'; tuiDocExcludeProperties(['precision']), ], }) -export default class PageComponent extends AbstractExampleTuiNumberFormat { +export default class PageComponent extends AbstractExampleTuiControl { protected readonly routes = DemoRoute; protected readonly minVariants: readonly number[] = [0, 1, 5, 7.77, -10]; diff --git a/projects/demo/src/modules/pipes/format-number/index.html b/projects/demo/src/modules/pipes/format-number/index.html index 3dec61985ed6..e869d86b67a3 100644 --- a/projects/demo/src/modules/pipes/format-number/index.html +++ b/projects/demo/src/modules/pipes/format-number/index.html @@ -33,17 +33,29 @@ [formControl]="control" [tuiTextfieldLabelOutside]="true" /> - Formatted number: - + Formatted number: +
+ {{ control.value ?? 0 | tuiFormatNumber - : {precision, decimalMode: decimalMode, rounding, thousandSeparator, decimalSeparator} + : { + precision: numberFormatDoc.precision(), + decimalMode: numberFormatDoc.decimalMode(), + rounding: numberFormatDoc.rounding(), + thousandSeparator: numberFormatDoc.thousandSeparator(), + decimalSeparator: numberFormatDoc.decimalSeparator(), + } | async }} - + - + + +
diff --git a/projects/demo/src/modules/pipes/format-number/index.ts b/projects/demo/src/modules/pipes/format-number/index.ts index eab79442a12f..a79c0c55e675 100644 --- a/projects/demo/src/modules/pipes/format-number/index.ts +++ b/projects/demo/src/modules/pipes/format-number/index.ts @@ -1,31 +1,26 @@ import {Component} from '@angular/core'; import {FormControl, ReactiveFormsModule} from '@angular/forms'; +import {TuiDocNumberFormat} from '@demo/components/number-format'; import {changeDetection} from '@demo/emulate/change-detection'; import {DemoRoute} from '@demo/routes'; import {TuiDemo} from '@demo/utils'; -import {tuiProvide} from '@taiga-ui/cdk'; import {TuiFormatNumberPipe} from '@taiga-ui/core'; import {TuiInputNumberModule, TuiTextfieldControllerModule} from '@taiga-ui/legacy'; -import {ABSTRACT_PROPS_ACCESSOR} from '../../components/abstract/abstract-props-accessor'; -import {AbstractExampleTuiNumberFormat} from '../../components/abstract/number-format'; -import {NumberFormatDocumentation} from '../../components/abstract/number-format-documentation'; - @Component({ standalone: true, imports: [ - NumberFormatDocumentation, ReactiveFormsModule, TuiDemo, + TuiDocNumberFormat, TuiFormatNumberPipe, TuiInputNumberModule, TuiTextfieldControllerModule, ], templateUrl: './index.html', changeDetection, - providers: [tuiProvide(ABSTRACT_PROPS_ACCESSOR, PageComponent)], }) -export default class PageComponent extends AbstractExampleTuiNumberFormat { +export default class PageComponent { protected readonly routes = DemoRoute; public readonly control = new FormControl(100); }