fix(kit): Number mask throws an error on empty string in thousandSeparator (#176)

Author: nsbarsukov

projects/demo-integrations/cypress/support/e2e.ts

@@ -1,2 +1,10 @@
 import 'cypress-real-events'; // https://github.com/cypress-io/cypress/issues/2839
 import './command';
+
+Cypress.on('window:before:load', win => {
+    cy.spy(win.console, 'error');
+});
+
+afterEach(() => {
+    cy.window().then(win => expect(win.console.error).to.have.callCount(0));
+});

projects/demo-integrations/cypress/tests/kit/number/number-decimal-separator.cy.ts

@@ -1,5 +1,3 @@
-import {DemoPath} from '@demo/path';
-
 import {openNumberPage} from './utils';
 
 describe('Number | Decimal separator (symbol used to separate the integer part from the fractional part)', () => {
@@ -83,16 +81,9 @@ describe('Number | Decimal separator (symbol used to separate the integer part f
 
     describe('Decimal separator is a dot', () => {
         beforeEach(() => {
-            cy.visit(`/${DemoPath.Number}`);
-            cy.get('#decimal-zero-padding input')
-                .should('be.visible')
-                .first()
-                .focus()
-                .clear()
-                .as('input');
-
-            // TODO https://github.com/Tinkoff/taiga-ui/issues/3474
-            // openNumberPage('decimalSeparator=.&precision=2');
+            openNumberPage(
+                'decimalSeparator=.&precision=2&decimalZeroPadding=true&decimalPseudoSeparators$=2',
+            );
         });
 
         it('accepts dot (as the last character)', () => {

projects/demo-integrations/cypress/tests/kit/number/number-thousand-separator.cy.ts

@@ -123,4 +123,18 @@ describe('Number | thousandSeparator', () => {
                 .should('have.prop', 'selectionEnd', '100'.length);
         });
     });
+
+    it('allows to set empty string as thousand separator', () => {
+        cy.get('tr')
+            .contains('[thousandSeparator]')
+            .parents('tr')
+            .find('tui-primitive-textfield')
+            .clear();
+
+        cy.get('@input')
+            .type('1000000')
+            .should('have.value', '1000000')
+            .should('have.prop', 'selectionStart', '1000000'.length)
+            .should('have.prop', 'selectionEnd', '1000000'.length);
+    });
 });

projects/demo-integrations/cypress/tests/ssr/ssr.cy.ts

@@ -1,6 +1,12 @@
 import {DemoPath} from '@demo/path';
 
 describe('Server side rendering', () => {
+    beforeEach(() => {
+        // Just a workaround for correct work of global run-time error handler
+        // See projects/demo-integrations/cypress/support/e2e.ts
+        cy.visit(`/${DemoPath.WhatIsMaskito}`);
+    });
+
     const baseUrl: string = Cypress.config('baseUrl') ?? '/';
 
     it('should serve statics and favicon.ico', () => {

projects/demo/src/pages/kit/number/number-mask-doc.component.ts

@@ -37,7 +37,7 @@ export class NumberMaskDocComponent implements GeneratorOptions {
 
     maskitoOptions: MaskitoOptions = maskitoNumberOptionsGenerator(this);
 
-    readonly decimalPseudoSeparatorsOptions = [['.', 'б', 'ю'], ['.']];
+    readonly decimalPseudoSeparatorsOptions = [['.', 'б', 'ю'], ['.'], [',']];
 
     precision = 0;
     isNegativeAllowed = true;

projects/kit/src/lib/masks/number/processors/thousand-separator-postprocessor.ts

@@ -13,6 +13,10 @@ export function createThousandSeparatorPostprocessor({
     thousandSeparator: string;
     decimalSeparator: string;
 }): NonNullable<MaskitoOptions['postprocessor']> {
+    if (!thousandSeparator) {
+        return elementState => elementState;
+    }
+
     return ({value, selection}) => {
         const [integerPart, decimalPart = ''] = value.split(decimalSeparator);
         const [initialFrom, initialTo] = selection;

projects/kit/src/lib/masks/number/utils/generate-mask-expression.ts

@@ -15,7 +15,9 @@ export function generateMaskExpression({
 }): MaskitoOptions['mask'] {
     const digit = '\\d';
     const optionalMinus = isNegativeAllowed ? `\\${CHAR_MINUS}?` : '';
-    const integerPart = `[${digit}\\${thousandSeparator}]*`;
+    const integerPart = thousandSeparator
+        ? `[${digit}\\${thousandSeparator}]*`
+        : `[${digit}]*`;
     const decimalPart = `(\\${decimalSeparator}${digit}{0,${precision}})?`;
 
     return precision > 0