feat(kit): new utility maskitoParseNumber (#178)

projects/demo/src/pages/kit/number/examples/maskito-parse-number-demo.md

@@ -0,0 +1,8 @@
+```ts
+import {maskitoParseNumber} from '@maskito/kit';
+
+maskitoParseNumber(
+  '10 000,42', // document.querySelector('input').value
+  ',', // decimal separator (dot is default)
+); // 10000.42
+```

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

@@ -16,6 +16,10 @@ type GeneratorOptions = Required<
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class NumberMaskDocComponent implements GeneratorOptions {
+    readonly maskitoParseNumberDemo = import(
+        './examples/maskito-parse-number-demo.md?raw'
+    );
+
     readonly highPrecisionExample1: TuiDocExample = {
         MaskitoOptions: import('./examples/1-high-precision/mask.ts?raw'),
     };

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

@@ -4,12 +4,7 @@ import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {RouterModule} from '@angular/router';
 import {MaskitoModule} from '@maskito/angular';
 import {TuiAddonDocModule, tuiGenerateRoutes} from '@taiga-ui/addon-doc';
-import {
-    TuiHintModule,
-    TuiLabelModule,
-    TuiNotificationModule,
-    TuiTextfieldControllerModule,
-} from '@taiga-ui/core';
+import {TuiNotificationModule, TuiTextfieldControllerModule} from '@taiga-ui/core';
 import {TuiInputModule} from '@taiga-ui/kit';
 
 import {NumberMaskDocExample1} from './examples/1-high-precision/component';
@@ -25,9 +20,7 @@ import {NumberMaskDocComponent} from './number-mask-doc.component';
         ReactiveFormsModule,
         MaskitoModule,
         TuiAddonDocModule,
-        TuiHintModule,
         TuiInputModule,
-        TuiLabelModule,
         TuiNotificationModule,
         TuiTextfieldControllerModule,
         RouterModule.forChild(tuiGenerateRoutes(NumberMaskDocComponent)),

projects/demo/src/pages/kit/number/number-mask-doc.template.html

@@ -7,6 +7,18 @@
         <code>maskitoNumberOptionsGenerator</code>
         to create a mask for entering a formatted number.
 
+        <tui-notification class="tui-space_top-4">
+            Despite the name of the mask, element's raw value is still string.
+
+            <p>
+                Use
+                <code>maskitoParseNumber</code>
+                to get number-type value.
+            </p>
+
+            <tui-doc-code [code]="maskitoParseNumberDemo"></tui-doc-code>
+        </tui-notification>
+
         <tui-doc-example
             id="high-precision"
             heading="High precision"

projects/kit/src/index.ts

@@ -1,8 +1,8 @@
-export * from './lib/masks/date';
-export * from './lib/masks/date-range';
-export * from './lib/masks/date-time';
-export * from './lib/masks/number';
-export * from './lib/masks/time';
+export {maskitoDateOptionsGenerator} from './lib/masks/date';
+export {maskitoDateRangeOptionsGenerator} from './lib/masks/date-range';
+export {maskitoDateTimeOptionsGenerator} from './lib/masks/date-time';
+export {maskitoNumberOptionsGenerator, maskitoParseNumber} from './lib/masks/number';
+export {maskitoTimeOptionsGenerator} from './lib/masks/time';
 export {
     MaskitoDateMode,
     MaskitoDateSegments,

projects/kit/src/lib/masks/number/index.ts

@@ -1 +1,2 @@
 export {maskitoNumberOptionsGenerator} from './number-mask';
+export {maskitoParseNumber} from './utils';

projects/kit/src/lib/masks/number/number-mask.ts

@@ -61,7 +61,7 @@ export function maskitoNumberOptionsGenerator({
         ),
         postprocessor: maskitoPipe(
             createLeadingZeroesValidationPostprocessor(decimalSeparator),
-            createMaxValidationPostprocessor({decimalSeparator, max, thousandSeparator}),
+            createMaxValidationPostprocessor({decimalSeparator, max}),
             createThousandSeparatorPostprocessor({decimalSeparator, thousandSeparator}),
             createDecimalZeroPaddingPostprocessor({
                 decimalSeparator,

projects/kit/src/lib/masks/number/processors/max-validation-postprocessor.ts

@@ -1,22 +1,16 @@
 import {MaskitoOptions} from '@maskito/core';
 
+import {maskitoParseNumber} from '../utils';
+
 export function createMaxValidationPostprocessor({
     max,
-    thousandSeparator,
     decimalSeparator,
 }: {
     max: number;
-    thousandSeparator: string;
     decimalSeparator: string;
 }): NonNullable<MaskitoOptions['postprocessor']> {
     return ({value, selection}) => {
-        const parsedValue = Number(
-            value
-                .replace(new RegExp(thousandSeparator, 'g'), '')
-                .replace(decimalSeparator, '.'),
-        );
-
-        if (parsedValue > max) {
+        if (maskitoParseNumber(value, decimalSeparator) > max) {
             const newValue = `${max}`.replace('.', decimalSeparator);
 
             return {

projects/kit/src/lib/masks/number/utils/index.ts

@@ -1,2 +1,3 @@
 export * from './generate-mask-expression';
 export * from './get-default-pseudo-separators';
+export * from './parse-number';

projects/kit/src/lib/masks/number/utils/parse-number.ts

@@ -0,0 +1,10 @@
+export function maskitoParseNumber(
+    maskedNumber: string,
+    decimalSeparator: string = '.',
+): number {
+    return Number(
+        maskedNumber
+            .replace(new RegExp(`[^\\d\\${decimalSeparator}]`, 'g'), '')
+            .replace(decimalSeparator, '.'),
+    );
+}

projects/kit/src/lib/masks/number/utils/tests/parse-number.spec.ts

@@ -0,0 +1,39 @@
+import {maskitoParseNumber} from '../parse-number';
+
+describe('maskitoParseNumber', () => {
+    describe('decimal separator is dot (default one)', () => {
+        it('thousand separator is space', () => {
+            expect(maskitoParseNumber('1 000 000.42')).toBe(1000000.42);
+        });
+
+        it('thousand separator is hyphen', () => {
+            expect(maskitoParseNumber('1-000-000.42')).toBe(1000000.42);
+        });
+
+        it('thousand separator is empty string', () => {
+            expect(maskitoParseNumber('1000000.42')).toBe(1000000.42);
+        });
+
+        it('empty decimal part & thousand separator is comma', () => {
+            expect(maskitoParseNumber('1,000,000')).toBe(1000000);
+        });
+    });
+
+    describe('decimal separator is comma', () => {
+        it('thousand separator is space', () => {
+            expect(maskitoParseNumber('42 111,42', ',')).toBe(42111.42);
+        });
+
+        it('thousand separator is hyphen', () => {
+            expect(maskitoParseNumber('42-111,42', ',')).toBe(42111.42);
+        });
+
+        it('thousand separator is empty string', () => {
+            expect(maskitoParseNumber('42111,42', ',')).toBe(42111.42);
+        });
+
+        it('empty decimal part & thousand separator is dot', () => {
+            expect(maskitoParseNumber('42.111', ',')).toBe(42111);
+        });
+    });
+});