diff --git a/projects/demo/src/modules/components/textfield/examples/5/index.html b/projects/demo/src/modules/components/textfield/examples/5/index.html index 0ec1a0140e2a..1c3e24035341 100644 --- a/projects/demo/src/modules/components/textfield/examples/5/index.html +++ b/projects/demo/src/modules/components/textfield/examples/5/index.html @@ -1,11 +1,25 @@ - - π - -value + + + + diff --git a/projects/demo/src/modules/components/textfield/examples/5/index.less b/projects/demo/src/modules/components/textfield/examples/5/index.less deleted file mode 100644 index e69de29bb2d1..000000000000 diff --git a/projects/demo/src/modules/components/textfield/examples/5/index.ts b/projects/demo/src/modules/components/textfield/examples/5/index.ts index d7d55497877c..9143bd4d0f34 100644 --- a/projects/demo/src/modules/components/textfield/examples/5/index.ts +++ b/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; + } } diff --git a/projects/demo/src/modules/components/textfield/index.html b/projects/demo/src/modules/components/textfield/index.html index f6378a4f095e..d19ad994e98f 100644 --- a/projects/demo/src/modules/components/textfield/index.html +++ b/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" - /> + > + + + Example of input-password and input-copy with interactive icons + +
+ We recommends using + + Maskito + + for input masking. + Maskito + is supported by + + Taiga Family + + team and it is already peer-dependency of + @taiga-ui/kit + library. + +

+ This example demonstrates how to use built-in + + Number + + mask with postfix and augment it by several + Maskito + 's plugins. +

+
+
+
+ diff --git a/projects/demo/src/modules/components/textfield/index.ts b/projects/demo/src/modules/components/textfield/index.ts index 3e4131c9d63c..38a1cd0c89b6 100644 --- a/projects/demo/src/modules/components/textfield/index.ts +++ b/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',