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 @@ +<tr> + <td colspan="3"> + <span tuiTitle> + <a + target="_blank" + tuiLink + [routerLink]="routes.NumberFormat" + > + <strong>TuiNumberFormat</strong> + </a> + <div tuiSubtitle> + Usage example: + <br /> + <code>[tuiNumberFormat]="{thousandSeparator, decimalSeparator, ..., rounding}"</code> + </div> + </span> + </td> +</tr> + +<tr + *ngIf="!hiddenOptions.includes('thousandSeparator')" + name="[thousandSeparator]" + tuiDocAPIItem + type="string" + [value]="thousandSeparator()" + (valueChange)="thousandSeparator.set($event)" +> + Symbol for separating thousands +</tr> + +<tr + *ngIf="!hiddenOptions.includes('decimalSeparator')" + name="[decimalSeparator]" + tuiDocAPIItem + type="string" + [value]="decimalSeparator()" + (valueChange)="decimalSeparator.set($event)" +> + Symbol for separating fraction +</tr> + +<tr + *ngIf="!hiddenOptions.includes('precision')" + name="[precision]" + tuiDocAPIItem + type="number" + [value]="precision()" + (valueChange)="precision.set($event)" +> + A number of digits after + <code>[decimalSeparator]</code> + ( + <code>Infinity</code> + for an untouched decimal part) +</tr> + +<tr + *ngIf="!hiddenOptions.includes('decimalMode')" + name="[decimalMode]" + tuiDocAPIItem + type="TuiDecimalMode" + [items]="decimalVariants" + [value]="decimalMode()" + (valueChange)="decimalMode.set($event)" +> + <dl> + <dt> + <code>always</code> + </dt> + <dd> + number of digits after + <code>[decimalSeparator]</code> + is + <b>always</b> + equal to the precision. + </dd> + + <dt> + <code>pad</code> + </dt> + <dd>pads trailing zeroes up to precision, if the number is fractional</dd> + + <dt> + <code>not-zero</code> + </dt> + <dd>drops trailing zeroes</dd> + </dl> +</tr> + +<tr + *ngIf="!hiddenOptions.includes('rounding')" + name="[rounding]" + tuiDocAPIItem + type="TuiRounding" + [items]="roundingVariants" + [value]="rounding()" + (valueChange)="rounding.set($event)" +> + <dl> + <dt> + <code>round</code> + </dt> + <dd> + rounds to the + <strong>nearest</strong> + number with the specified + <code>[precision]</code> + </dd> + + <dt> + <code>floor</code> + </dt> + <dd> + rounds down (the + <strong>largest</strong> + number with the specified + <code>[precision]</code> + less than or equal to a given number) + </dd> + + <dt> + <code>ceil</code> + </dt> + <dd> + rounds up (the + <strong>smallest</strong> + number with the specified + <code>[precision]</code> + greater than or equal to a given number) + </dd> + + <dt> + <code>truncate</code> + </dt> + <dd> + returns the number with the specified + <code>[precision]</code> + by just removing extra fractional digits + </dd> + </dl> +</tr> 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<TuiNumberFormatSettings[keyof TuiNumberFormatSettings]> + > +{ + protected readonly routes = DemoRoute; + protected readonly decimalVariants: TuiDecimalMode[] = ['always', 'pad', 'not-zero']; + protected readonly roundingVariants: TuiRounding[] = [ + 'truncate', + 'round', + 'ceil', + 'floor', + ]; + + @Input() + public hiddenOptions: Array<TuiLooseUnion<keyof TuiNumberFormatSettings>> = []; + + 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 @@ <dropdown-documentation *ngIf="dropdown" /> -<number-format-documentation *ngIf="isTuiFormatNumber(documentedComponent)" /> <ng-container *ngIf="isTuiReactiveControl(documentedComponent)"> <hint-controller-documentation *ngIf="withHint" /> <textfield-controller-documentation *ngIf="withTextFieldController" /> 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 @@ -<h6 class="tui-text_h6"> - Can be expanded with - <a - target="_blank" - tuiLink - [routerLink]="routes.NumberFormat" - > - TuiNumberFormat - </a> -</h6> -<p> - Usage example: - <code> - [tuiNumberFormat]='{decimalMode, precision, rounding, zeroPadding, thousandSeparator, - decimalSeparator}' - </code> -</p> -<p> - Requires you to import - <code>TuiNumberFormat</code> - . -</p> - -<tui-doc-documentation> - <ng-template - documentationPropertyMode="input" - documentationPropertyName="decimalMode" - documentationPropertyType="TuiDecimalMode" - [documentationPropertyValues]="documentedComponent.decimalVariants" - [(documentationPropertyValue)]="documentedComponent.decimalMode" - > - <dl> - <dt> - <code>always</code> - </dt> - <dd> - number of digits after - <code>decimalSeparator</code> - is - <b>always</b> - equal to the precision. - </dd> - - <dt> - <code>pad</code> - </dt> - <dd>pads trailing zeroes up to precision, if the number is fractional</dd> - - <dt> - <code>not-zero</code> - </dt> - <dd>drops trailing zeroes</dd> - </dl> - </ng-template> - <ng-template - documentationPropertyMode="input" - documentationPropertyName="rounding" - documentationPropertyType="TuiRounding" - [documentationPropertyValues]="documentedComponent.roundingVariants" - [(documentationPropertyValue)]="documentedComponent.rounding" - > - Rounding - </ng-template> - <ng-template - documentationPropertyMode="input" - documentationPropertyName="precision" - documentationPropertyType="number" - [(documentationPropertyValue)]="documentedComponent.precision" - > - A number of digits after comma ( - <code>Infinity</code> - for an untouched decimal part) - </ng-template> - <ng-template - documentationPropertyMode="input" - documentationPropertyName="thousandSeparator" - documentationPropertyType="string" - [(documentationPropertyValue)]="documentedComponent.thousandSeparator" - > - Symbol for separating thousands - </ng-template> - <ng-template - documentationPropertyMode="input" - documentationPropertyName="decimalSeparator" - documentationPropertyType="string" - [(documentationPropertyValue)]="documentedComponent.decimalSeparator" - > - Symbol for separating fraction - </ng-template> -</tui-doc-documentation> 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<AbstractExampleTuiNumberFormat>( - 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 @@ <h3>There are also other components to input numbers:</h3> [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 @@ <h3>There are also other components to input numbers:</h3> Step to increase/decrease value with keyboard and buttons on the side </ng-template> </tui-doc-documentation> + + <table tuiDocAPI> + <tbody + #numberFormatDoc + tuiDocNumberFormat + ></tbody> + </table> + <inherited-documentation /> <tui-doc-documentation heading="CSS customization"> <ng-template diff --git a/projects/demo/src/modules/components/input-number/index.ts b/projects/demo/src/modules/components/input-number/index.ts index b131110fa629..ffb031178332 100644 --- a/projects/demo/src/modules/components/input-number/index.ts +++ b/projects/demo/src/modules/components/input-number/index.ts @@ -1,5 +1,6 @@ import {Component} from '@angular/core'; import {FormControl, ReactiveFormsModule, Validators} 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'; @@ -8,8 +9,8 @@ import {TuiHint, TuiNumberFormat} from '@taiga-ui/core'; import {TuiInputNumberModule, 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, @@ -17,6 +18,7 @@ import {AbstractExampleTuiNumberFormat} from '../abstract/number-format'; InheritedDocumentation, ReactiveFormsModule, TuiDemo, + TuiDocNumberFormat, TuiHint, TuiInputNumberModule, TuiNumberFormat, @@ -26,7 +28,7 @@ import {AbstractExampleTuiNumberFormat} from '../abstract/number-format'; changeDetection, providers: [tuiProvide(ABSTRACT_PROPS_ACCESSOR, PageComponent)], }) -export default class PageComponent extends AbstractExampleTuiNumberFormat { +export default class PageComponent extends AbstractExampleTuiControl { protected readonly routes = DemoRoute; protected docPages = DemoRoute; @@ -41,6 +43,5 @@ export default class PageComponent extends AbstractExampleTuiNumberFormat { protected step = 0; public override cleaner = false; - public override precision = 2; public readonly control = new FormControl(6432, Validators.required); } diff --git a/projects/demo/src/modules/components/input-range/index.html b/projects/demo/src/modules/components/input-range/index.html index 4ee8d4ec5461..a174b6788e57 100644 --- a/projects/demo/src/modules/components/input-range/index.html +++ b/projects/demo/src/modules/components/input-range/index.html @@ -120,7 +120,12 @@ [rightValueContent]="rightValueContent" [segments]="segments" [steps]="steps" - [tuiNumberFormat]="{decimalMode: decimalMode, rounding, thousandSeparator, decimalSeparator}" + [tuiNumberFormat]="{ + decimalMode: numberFormatDoc.decimalMode(), + rounding: numberFormatDoc.rounding(), + thousandSeparator: numberFormatDoc.thousandSeparator(), + decimalSeparator: numberFormatDoc.decimalSeparator(), + }" [tuiTextfieldLabelOutside]="labelOutside" [tuiTextfieldSize]="size" > @@ -129,159 +134,184 @@ </tui-input-range> </ng-template> </tui-doc-demo> - <tui-doc-documentation> - <ng-template - documentationPropertyName="disabled" - documentationPropertyType="boolean" - [(documentationPropertyValue)]="disabled" - > - Disabled state (use - <code>formControl.disable()</code> - ) - </ng-template> - <ng-template - documentationPropertyMode="input" - documentationPropertyName="min" - documentationPropertyType="number | null" - [documentationPropertyValues]="minVariants" - [(documentationPropertyValue)]="min" - > - Min value - </ng-template> - <ng-template - documentationPropertyMode="input" - documentationPropertyName="max" - documentationPropertyType="number | null" - [documentationPropertyValues]="maxVariants" - [(documentationPropertyValue)]="max" - > - Max value - </ng-template> - <ng-template - documentationPropertyMode="input" - documentationPropertyName="quantum" - documentationPropertyType="number" - [documentationPropertyValues]="quantumVariants" - [(documentationPropertyValue)]="quantum" - > - Minimum indivisible value - </ng-template> - <ng-template - documentationPropertyMode="input" - documentationPropertyName="steps" - documentationPropertyType="number" - [(documentationPropertyValue)]="steps" - > - Number of actual discrete slider steps - </ng-template> - <ng-template - documentationPropertyMode="input" - documentationPropertyName="segments" - documentationPropertyType="number" - [(documentationPropertyValue)]="segments" - > - A number of visual segments - </ng-template> - <ng-template - documentationPropertyMode="input" - documentationPropertyName="keySteps" - documentationPropertyType="TuiKeySteps" - [documentationPropertyValues]="keyStepsVariants" - [(documentationPropertyValue)]="keySteps" - > - Anchor points of non-uniform format between value and position - </ng-template> - <ng-template - documentationPropertyMode="input" - documentationPropertyName="leftValueContent" - documentationPropertyType="PolymorpheusContent" - [documentationPropertyValues]="valueContentVariants" - [(documentationPropertyValue)]="leftValueContent" - > - A template for custom view of the left selected value. - </ng-template> - <ng-template - documentationPropertyMode="input" - documentationPropertyName="rightValueContent" - documentationPropertyType="PolymorpheusContent" - [documentationPropertyValues]="valueContentVariants" - [(documentationPropertyValue)]="rightValueContent" - > - A template for custom view of the right selected value. - </ng-template> - <ng-template - documentationPropertyMode="input" - documentationPropertyName="pluralize" - documentationPropertyType="Record<string, string>" - [documentationPropertyValues]="pluralizeVariants" - [(documentationPropertyValue)]="pluralize" - > - Plural forms for labels. - <p> - Use object that mimics the + <table tuiDocAPI> + <tbody> + <tr + name="disabled" + tuiDocAPIItem + type="boolean" + [(value)]="disabled" + > + Disabled state (use + <code>formControl.disable()</code> + ) + </tr> + + <tr + name="[min]" + tuiDocAPIItem + type="number | null" + [items]="minVariants" + [(value)]="min" + > + The lowest value in the range of permitted values + </tr> + + <tr + name="[max]" + tuiDocAPIItem + type="number | null" + [items]="maxVariants" + [(value)]="max" + > + The greatest value in the range of permitted values + </tr> + + <tr + name="[quantum]" + tuiDocAPIItem + type="number" + [items]="quantumVariants" + [(value)]="quantum" + > + Minimum indivisible value + </tr> + + <tr + name="[steps]" + tuiDocAPIItem + type="number" + [(value)]="steps" + > + Number of actual discrete slider steps + </tr> + + <tr + name="[segments]" + tuiDocAPIItem + type="number" + [(value)]="segments" + > + A number of visual segments (use + <code>1</code> + for no ticks) + </tr> + + <tr + name="[keySteps]" + tuiDocAPIItem + type="TuiKeySteps" + [items]="keyStepsVariants" + [(value)]="keySteps" + > + Anchor points of non-uniform format between value and position + </tr> + + <tr + name="[leftValueContent]" + tuiDocAPIItem + type="PolymorpheusContent" + [items]="valueContentVariants" + [(value)]="leftValueContent" + > + A template for custom view of the + <strong>left</strong> + selected value. + </tr> + + <tr + name="[rightValueContent]" + tuiDocAPIItem + type="PolymorpheusContent" + [items]="valueContentVariants" + [(value)]="rightValueContent" + > + A template for custom view of the + <strong>right</strong> + selected value. + </tr> + + <tr + name="[pluralize]" + tuiDocAPIItem + type="Record<string, string>" + [items]="pluralizeVariants" + [(value)]="pluralize" + > + Plural forms for labels. + + <p> + Use object that mimics the + <a + href="https://unicode-org.github.io/icu/userguide/format_parse/messages/" + tuiLink + > + ICU format + </a> + for Plural + </p> + </tr> + + <tr + name="[readOnly]" + tuiDocAPIItem + type="boolean" + [(value)]="readOnly" + > + Component is read only + </tr> + </tbody> + + <tbody + #numberFormatDoc + tuiDocNumberFormat + [hiddenOptions]="['precision']" + ></tbody> + + <tbody> + <h6 class="tui-text_h6"> + Can be expanded with <a - href="https://unicode-org.github.io/icu/userguide/format_parse/messages/" + target="_blank" tuiLink + [routerLink]="routes.TextfieldController" > - ICU format + TuiTextfieldController </a> - for Plural - </p> - </ng-template> - <ng-template - documentationPropertyMode="input" - documentationPropertyName="readOnly" - documentationPropertyType="boolean" - [(documentationPropertyValue)]="readOnly" - > - Component is read only - </ng-template> - </tui-doc-documentation> + </h6> - <h6 class="tui-text_h6"> - Can be expanded with - <a - target="_blank" - tuiLink - [routerLink]="routes.TextfieldController" - > - TuiTextfieldController - </a> - </h6> - - <p> - Requires you to import - <code>TuiTextfieldControllerModule</code> - </p> + <p> + Requires you to import + <code>TuiTextfieldControllerModule</code> + </p> - <tui-doc-documentation> - <ng-template - documentationPropertyMode="input" - documentationPropertyName="tuiTextfieldLabelOutside" - documentationPropertyType="boolean" - [(documentationPropertyValue)]="labelOutside" - > - Label is outside a component and made with - <a - tuiLink - [routerLink]="routes.Label" + <tr + name="[tuiTextfieldLabelOutside]" + tuiDocAPIItem + type="boolean" + [(value)]="labelOutside" > - <code>Label</code> - </a> - </ng-template> + Label is outside a component and made with + <a + tuiLink + [routerLink]="routes.Label" + > + <code>Label</code> + </a> + </tr> - <ng-template - documentationPropertyMode="input" - documentationPropertyName="tuiTextfieldSize" - documentationPropertyType="TuiSizeL" - [documentationPropertyValues]="sizeVariants" - [(documentationPropertyValue)]="size" - > - Size - </ng-template> - </tui-doc-documentation> - <number-format-documentation /> + <tr + name="[tuiTextfieldSize]" + tuiDocAPIItem + type="TuiSizeL" + [items]="sizeVariants" + [(value)]="size" + > + Size + </tr> + </tbody> + </table> </ng-template> <tui-setup *pageTab /> 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 @@ </tui-input-slider> </ng-template> </tui-doc-demo> - <tui-doc-documentation> - <ng-template - documentationPropertyName="disabled" - documentationPropertyType="boolean" - [(documentationPropertyValue)]="disabled" - > - Disabled state (use - <code>formControl.disable()</code> - ) - </ng-template> - <ng-template - documentationPropertyMode="input" - documentationPropertyName="min" - documentationPropertyType="number" - [documentationPropertyValues]="minVariants" - [(documentationPropertyValue)]="min" - > - Min value - </ng-template> - <ng-template - documentationPropertyMode="input" - documentationPropertyName="max" - documentationPropertyType="number" - [documentationPropertyValues]="maxVariants" - [(documentationPropertyValue)]="max" - > - Max value - </ng-template> - <ng-template - documentationPropertyMode="input" - documentationPropertyName="quantum" - documentationPropertyType="number" - [documentationPropertyValues]="quantumVariants" - [(documentationPropertyValue)]="quantum" - > - Minimum indivisible value - </ng-template> - <ng-template - documentationPropertyMode="input" - documentationPropertyName="steps" - documentationPropertyType="number" - [(documentationPropertyValue)]="steps" - > - Number of actual discrete slider steps - <p> - If property is not set (i.e. equals to default value - <strong>0</strong> - ), number of steps equals - <code>(max - min) / quantum</code> - </p> - </ng-template> - <ng-template - documentationPropertyMode="input" - documentationPropertyName="segments" - documentationPropertyType="number" - [(documentationPropertyValue)]="segments" - > - A number of visual segments (use - <code>1</code> - for no ticks) - </ng-template> - <ng-template - documentationPropertyMode="input" - documentationPropertyName="keySteps" - documentationPropertyType="TuiKeySteps" - [documentationPropertyValues]="keyStepsVariants" - [(documentationPropertyValue)]="keySteps" - > - Key steps to bind slider position and value - </ng-template> - <ng-template - documentationPropertyMode="input" - documentationPropertyName="valueContent" - documentationPropertyType="PolymorpheusContent" - [documentationPropertyValues]="valueContentVariants" - [(documentationPropertyValue)]="valueContent" - > - A template for custom view of selected value. - </ng-template> - </tui-doc-documentation> + <table tuiDocAPI> + <tbody> + <tr + name="disabled" + tuiDocAPIItem + type="boolean" + [(value)]="disabled" + > + Disabled state (use + <code>formControl.disable()</code> + ) + </tr> + + <tr + name="[min]" + tuiDocAPIItem + type="number" + [items]="minVariants" + [(value)]="min" + > + The lowest value in the range of permitted values + </tr> + + <tr + name="[max]" + tuiDocAPIItem + type="number" + [items]="maxVariants" + [(value)]="max" + > + The greatest value in the range of permitted values + </tr> + + <tr + name="[quantum]" + tuiDocAPIItem + type="number" + [items]="quantumVariants" + [(value)]="quantum" + > + Minimum indivisible value + </tr> + + <tr + name="[steps]" + tuiDocAPIItem + type="number" + [(value)]="steps" + > + Number of actual discrete slider steps + + <p> + If property is not set (i.e. equals to default value + <strong>0</strong> + ), number of steps equals + <code>(max - min) / quantum</code> + </p> + </tr> + + <tr + name="[segments]" + tuiDocAPIItem + type="number" + [(value)]="segments" + > + A number of visual segments (use + <code>1</code> + for no ticks) + </tr> + + <tr + name="[keySteps]" + tuiDocAPIItem + type="TuiKeySteps" + [items]="keyStepsVariants" + [(value)]="keySteps" + > + Anchor points of non-uniform format between value and position + </tr> + + <tr + name="[valueContent]" + tuiDocAPIItem + type="PolymorpheusContent" + [items]="valueContentVariants" + [(value)]="valueContent" + > + A template for custom view of selected value. + </tr> + </tbody> + + <tbody + #numberFormatDoc + tuiDocNumberFormat + [hiddenOptions]="['precision']" + ></tbody> + </table> + <inherited-documentation /> </ng-template> 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: - <b> + <strong>Formatted number:</strong> + <br /> + <code> {{ 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 }} - </b> + </code> </div> - <number-format-documentation /> + <table tuiDocAPI> + <tbody + #numberFormatDoc + tuiDocNumberFormat + ></tbody> + </table> </ng-template> <tui-setup *pageTab /> 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); }