chore(demo): update Textfield + Maskito example (#9693)

projects/demo/src/modules/components/textfield/examples/5/index.html

@@ -1,11 +1,25 @@
-<tui-textfield>
-    <strong>π</strong>
-    -value
+<tui-textfield [tuiTextfieldCleaner]="false">
+    <label tuiLabel>Flat angle</label>
 
     <input
+        #input
         placeholder="3,14"
         tuiTextfield
         [maskito]="options"
         [(ngModel)]="value"
     />
+
+    <button
+        *ngIf="value"
+        appearance="icon"
+        iconStart="@tui.x"
+        size="xs"
+        tabindex="-1"
+        tuiIconButton
+        type="button"
+        (click)="clear()"
+        (pointerdown.silent.prevent)="input.focus()"
+    >
+        Clear
+    </button>
 </tui-textfield>

projects/demo/src/modules/components/textfield/examples/5/index.ts

@@ -1,24 +1,46 @@
+import {NgIf} from '@angular/common';
 import {Component} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
 import {MaskitoDirective} from '@maskito/angular';
-import {maskitoNumberOptionsGenerator} from '@maskito/kit';
-import {TuiTextfield} from '@taiga-ui/core';
+import type {MaskitoOptions} from '@maskito/core';
+import {
+    maskitoAddOnFocusPlugin,
+    maskitoCaretGuard,
+    maskitoNumberOptionsGenerator,
+    maskitoRemoveOnBlurPlugin,
+} from '@maskito/kit';
+import {TuiButton, TuiTextfield} from '@taiga-ui/core';
+
+const postfix = ' rad';
+const numberOptions = maskitoNumberOptionsGenerator({
+    postfix,
+    decimalSeparator: ',',
+    precision: 8,
+    min: 0,
+});
 
 @Component({
     standalone: true,
-    imports: [FormsModule, MaskitoDirective, TuiTextfield],
+    imports: [FormsModule, MaskitoDirective, NgIf, TuiButton, TuiTextfield],
     templateUrl: './index.html',
-    styleUrls: ['./index.less'],
     encapsulation,
     changeDetection,
 })
 export default class Example {
-    protected value = Math.PI.toFixed(48);
-    protected readonly options = maskitoNumberOptionsGenerator({
-        decimalSeparator: ',',
-        precision: Infinity,
-        min: 0,
-    });
+    protected value = Math.PI.toFixed(8);
+    protected readonly options: MaskitoOptions = {
+        ...numberOptions,
+        plugins: [
+            ...numberOptions.plugins,
+            maskitoCaretGuard((value) => [0, value.length - postfix.length]),
+            maskitoAddOnFocusPlugin(postfix),
+            maskitoRemoveOnBlurPlugin(postfix),
+        ],
+    };
+
+    protected clear(): void {
+        this.value = postfix;
+    }
 }

projects/demo/src/modules/components/textfield/index.html

@@ -15,10 +15,53 @@
             *ngFor="let example of examples; let index = index"
             [component]="index + 1 | tuiComponent"
             [content]="index + 1 | tuiExample"
-            [description]="index === 3 ? 'Example of input-password and input-copy with interactive icons' : ''"
+            [description]="description"
             [heading]="example"
             [id]="example | tuiKebab"
-        />
+        >
+            <ng-template #description>
+                <ng-container [ngSwitch]="index">
+                    <span *ngSwitchCase="3">Example of input-password and input-copy with interactive icons</span>
+
+                    <div *ngSwitchCase="4">
+                        We recommends using
+                        <a
+                            href="https://maskito.dev"
+                            target="_blank"
+                            tuiLink
+                        >
+                            Maskito
+                        </a>
+                        for input masking.
+                        <strong>Maskito</strong>
+                        is supported by
+                        <a
+                            tuiLink
+                            [routerLink]="routes.Related"
+                        >
+                            Taiga Family
+                        </a>
+                        team and it is already peer-dependency of
+                        <code>&#64;taiga-ui/kit</code>
+                        library.
+
+                        <p class="tui-space_bottom-0">
+                            This example demonstrates how to use built-in
+                            <a
+                                href="https://maskito.dev/kit/number"
+                                target="_blank"
+                                tuiLink
+                            >
+                                Number
+                            </a>
+                            mask with postfix and augment it by several
+                            <strong>Maskito</strong>
+                            's plugins.
+                        </p>
+                    </div>
+                </ng-container>
+            </ng-template>
+        </tui-doc-example>
     </ng-template>
 
     <ng-template pageTab>

projects/demo/src/modules/components/textfield/index.ts

@@ -4,6 +4,7 @@ import {TuiDocControl} from '@demo/components/control';
 import {TuiDocIcons} from '@demo/components/icons';
 import {TuiDocTextfield} from '@demo/components/textfield';
 import {changeDetection} from '@demo/emulate/change-detection';
+import {DemoRoute} from '@demo/routes';
 import {TuiDemo} from '@demo/utils';
 import {TuiIcon, TuiTextfield} from '@taiga-ui/core';
 import {TuiTooltip} from '@taiga-ui/kit';
@@ -24,6 +25,7 @@ import {TuiTooltip} from '@taiga-ui/kit';
     changeDetection,
 })
 export default class Page {
+    protected routes = DemoRoute;
     protected readonly examples = [
         'Size',
         'States',