feat(kit): new maskitoPostfixPostprocessorGenerator (#257)

projects/demo-integrations/cypress/tests/recipes/postfix/percentage.cy.ts

@@ -1,9 +1,9 @@
 import {DemoPath} from '@demo/path';
 
-describe('Postfix | Percentage', () => {
+describe('Postfix | Dynamic Pattern Mask Expression', () => {
     beforeEach(() => {
         cy.visit(DemoPath.Postfix);
-        cy.get('#percentage input')
+        cy.get('#by-pattern-mask-expression input')
             .should('be.visible')
             .first()
             .should('have.value', '')

projects/demo-integrations/cypress/tests/recipes/postfix/postprocessor.cy.ts

@@ -0,0 +1,112 @@
+import {DemoPath} from '@demo/path';
+
+describe('Postfix | Postprocessor (maskitoPostfixPostprocessorGenerator)', () => {
+    beforeEach(() => {
+        cy.visit(DemoPath.Postfix);
+        cy.get('#by-postprocessor input')
+            .should('be.visible')
+            .first()
+            .should('have.value', '')
+            .focus()
+            .as('input');
+    });
+
+    it('Type 100 => $100|.00', () => {
+        cy.get('@input')
+            .should('have.value', '$.00')
+            .should('have.prop', 'selectionStart', 1)
+            .should('have.prop', 'selectionEnd', 1)
+            .type('100')
+            .should('have.value', '$100.00')
+            .should('have.prop', 'selectionStart', '$100'.length)
+            .should('have.prop', 'selectionEnd', '$100'.length);
+    });
+
+    it('$10|0.00 => Backspace => Type 5 => $15|0.00', () => {
+        cy.get('@input')
+            .should('have.value', '$.00')
+            .should('have.prop', 'selectionStart', 1)
+            .should('have.prop', 'selectionEnd', 1)
+            .type('100')
+            .type('{leftArrow}{backspace}')
+            .type('5')
+            .should('have.value', '$150.00')
+            .should('have.prop', 'selectionStart', '$15'.length)
+            .should('have.prop', 'selectionEnd', '$15'.length);
+    });
+
+    describe('Attempts to delete the postfix', () => {
+        beforeEach(() => {
+            cy.get('@input')
+                .should('have.value', '$.00')
+                .should('have.prop', 'selectionStart', 1)
+                .should('have.prop', 'selectionEnd', 1)
+                .type('100');
+        });
+
+        it('$100.00| => Backspace => $100.0|0', () => {
+            cy.get('@input')
+                .type('{moveToEnd}{backspace}')
+                .should('have.value', '$100.00')
+                .should('have.prop', 'selectionStart', '$100.0'.length)
+                .should('have.prop', 'selectionEnd', '$100.0'.length);
+        });
+
+        it('$100.0|0 => Backspace => $100.|00', () => {
+            cy.get('@input')
+                .type('{moveToEnd}{leftArrow}{backspace}')
+                .should('have.value', '$100.00')
+                .should('have.prop', 'selectionStart', '$100.'.length)
+                .should('have.prop', 'selectionEnd', '$100.'.length);
+        });
+
+        it('$100.|00 => Backspace => $100|.00', () => {
+            cy.get('@input')
+                .type('{moveToEnd}')
+                .type('{leftArrow}'.repeat('00'.length))
+                .type('{backspace}')
+                .should('have.value', '$100.00')
+                .should('have.prop', 'selectionStart', '$100'.length)
+                .should('have.prop', 'selectionEnd', '$100'.length);
+        });
+
+        it('$100.00 => Select All => Delete => $|.00', () => {
+            cy.get('@input')
+                .type('{selectAll}{del}')
+                .should('have.value', '$.00')
+                .should('have.prop', 'selectionStart', 1)
+                .should('have.prop', 'selectionEnd', 1);
+        });
+    });
+
+    describe('Attempts to delete the prefix', () => {
+        beforeEach(() => {
+            cy.get('@input')
+                .should('have.value', '$.00')
+                .should('have.prop', 'selectionStart', 1)
+                .should('have.prop', 'selectionEnd', 1)
+                .type('1')
+                .should('have.value', '$1.00')
+                .should('have.prop', 'selectionStart', 2)
+                .should('have.prop', 'selectionEnd', 2);
+        });
+
+        it('$|1.00 => Backspace => $|1.00', () => {
+            cy.get('@input')
+                .type('{leftArrow}')
+                .type('{backspace}')
+                .should('have.value', '$1.00')
+                .should('have.prop', 'selectionStart', 1)
+                .should('have.prop', 'selectionEnd', 1);
+        });
+
+        it('|$1.00 => Delete => $|1.00', () => {
+            cy.get('@input')
+                .type('{moveToStart}')
+                .type('{del}')
+                .should('have.value', '$1.00')
+                .should('have.prop', 'selectionStart', 1)
+                .should('have.prop', 'selectionEnd', 1);
+        });
+    });
+});

projects/demo/src/pages/recipes/postfix/examples/2-postprocessor/component.ts

@@ -0,0 +1,58 @@
+import {
+    ChangeDetectionStrategy,
+    Component,
+    ElementRef,
+    NgZone,
+    ViewChild,
+} from '@angular/core';
+
+import mask from './mask';
+
+@Component({
+    selector: 'postfix-doc-example-2',
+    template: `
+        <tui-input
+            [style.max-width.rem]="20"
+            [(ngModel)]="value"
+        >
+            Enter price
+            <input
+                #inputRef
+                tuiTextfield
+                inputmode="numeric"
+                [maskito]="maskitoOptions"
+                (focus)="onFocus()"
+                (blur)="onBlur()"
+            />
+        </tui-input>
+    `,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class PostfixDocExample2 {
+    @ViewChild('inputRef', {read: ElementRef})
+    inputElement!: ElementRef<HTMLInputElement>;
+
+    readonly maskitoOptions = mask;
+    value = '';
+
+    constructor(private readonly ngZone: NgZone) {}
+
+    onFocus(): void {
+        if (!this.value) {
+            this.value = '$.00';
+
+            this.ngZone.runOutsideAngular(() =>
+                setTimeout(() => {
+                    // To put cursor after dollar ($|.00)
+                    this.inputElement.nativeElement.setSelectionRange(1, 1);
+                }),
+            );
+        }
+    }
+
+    onBlur(): void {
+        if (this.value === '$.00') {
+            this.value = '';
+        }
+    }
+}

projects/demo/src/pages/recipes/postfix/examples/2-postprocessor/mask.ts

@@ -0,0 +1,14 @@
+import {MaskitoOptions, maskitoPipe} from '@maskito/core';
+import {
+    maskitoPostfixPostprocessorGenerator,
+    maskitoPrefixPostprocessorGenerator,
+} from '@maskito/kit';
+
+export default {
+    // prefix (dollar sign) + digits + postfix ('.00')
+    mask: /^\$?\d*(\.0{0,2})?$/,
+    postprocessor: maskitoPipe(
+        maskitoPrefixPostprocessorGenerator('$'),
+        maskitoPostfixPostprocessorGenerator('.00'),
+    ),
+} as MaskitoOptions;

projects/demo/src/pages/recipes/postfix/postfix-doc.component.ts

@@ -9,13 +9,13 @@ import {TuiDocExample} from '@taiga-ui/addon-doc';
 })
 export class PostfixDocComponent {
     readonly maskExpressionDocPage = `/${DemoPath.MaskExpression}`;
-    readonly timeMaskDocPage = `/${DemoPath.Time}`;
+    readonly processorsDocPage = `/${DemoPath.Processors}`;
 
-    readonly percentageExample1: TuiDocExample = {
-        MaskitoOptions: import('./examples/1-percentage/mask.ts?raw'),
+    readonly patternMaskApproachExample1: TuiDocExample = {
+        MaskitoOptions: import('./examples/1-pattern-mask/mask.ts?raw'),
     };
 
-    readonly timeExample2: TuiDocExample = {
-        MaskitoOptions: import('./examples/2-time-pm/mask.ts?raw'),
+    readonly postprocessorApproachExample2: TuiDocExample = {
+        MaskitoOptions: import('./examples/2-postprocessor/mask.ts?raw'),
     };
 }

projects/demo/src/pages/recipes/postfix/postfix-doc.module.ts

@@ -7,8 +7,8 @@ import {TuiAddonDocModule, tuiGenerateRoutes} from '@taiga-ui/addon-doc';
 import {TuiLinkModule, TuiNotificationModule} from '@taiga-ui/core';
 import {TuiInputModule} from '@taiga-ui/kit';
 
-import {PostfixDocExample1} from './examples/1-percentage/component';
-import {PostfixDocExample2} from './examples/2-time-pm/component';
+import {PostfixDocExample1} from './examples/1-pattern-mask/component';
+import {PostfixDocExample2} from './examples/2-postprocessor/component';
 import {PostfixDocComponent} from './postfix-doc.component';
 
 @NgModule({