chore(demo): use modern API page approach for documentation about `[t…

…uiNumberFormat]` (#10034)

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]="&#123;thousandSeparator, decimalSeparator, ..., rounding&#125;"</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>

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);
+}

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" />

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;
-    }
 }

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;