feat(kit): Number supports new configurable parameter minusSign (#…

…1118)

projects/demo-integrations/src/tests/kit/number/number-minus-sign.cy.ts

@@ -0,0 +1,102 @@
+import {
+    CHAR_EM_DASH,
+    CHAR_EN_DASH,
+    CHAR_HYPHEN,
+    CHAR_JP_HYPHEN,
+    CHAR_MINUS,
+} from 'projects/kit/src/lib/constants';
+
+import {openNumberPage} from './utils';
+
+describe('Properly using custom minus sign', () => {
+    const minuses: Array<{value: string; name: string}> = [
+        {
+            value: CHAR_HYPHEN,
+            name: 'hyphen',
+        },
+        {
+            value: CHAR_EN_DASH,
+            name: 'en-dash',
+        },
+        {
+            value: CHAR_EM_DASH,
+            name: 'em-dash',
+        },
+    ];
+
+    const numbers = ['321', '2_432'];
+
+    const pseudoMinuses: Array<{value: string; name: string}> = [
+        {value: CHAR_HYPHEN, name: 'hyphen'},
+        {value: CHAR_EN_DASH, name: 'en-dash'},
+        {value: CHAR_EM_DASH, name: 'em-dash'},
+        {value: CHAR_JP_HYPHEN, name: 'japanese prolonged sound mark'},
+        {value: CHAR_MINUS, name: 'unicode minus sign'},
+    ];
+
+    minuses.forEach(minus => {
+        pseudoMinuses.forEach(pseudoMinus => {
+            numbers.forEach(number => {
+                it(`transforms ${pseudoMinus.name} into ${minus.name}`, () => {
+                    openNumberPage(
+                        `precision=Infinity&thousandSeparator=_&minusSign=${encodeURIComponent(minus.value)}`,
+                    );
+                    cy.get('@input')
+                        .type(`${pseudoMinus.value}${number}`)
+                        .should('have.value', `${minus.value}${number}`);
+                });
+            });
+        });
+    });
+
+    describe('can use letters as minus sign', () => {
+        beforeEach(() => {
+            openNumberPage('precision=Infinity&thousandSeparator=_&minusSign=i');
+        });
+
+        it('transforms i into i', () => {
+            cy.get('@input').type('i1234').should('have.value', 'i1_234');
+        });
+
+        pseudoMinuses.forEach(pseudoMinus => {
+            it(`transforms ${pseudoMinus.name} into i`, () => {
+                cy.get('@input')
+                    .type(`${pseudoMinus.value}1234`)
+                    .should('have.value', 'i1_234');
+            });
+        });
+    });
+});
+
+describe('custom minus should work properly with min(max) value', () => {
+    [
+        {value: CHAR_HYPHEN, name: 'hyphen'},
+        {value: CHAR_EN_DASH, name: 'en-dash'},
+        {value: CHAR_EM_DASH, name: 'em-dash'},
+        {
+            value: CHAR_JP_HYPHEN,
+            name: 'japanese prolonged sound mark',
+        },
+        {value: CHAR_MINUS, name: 'unicode minus sign'},
+    ].forEach(minus => {
+        describe(`applies ${minus.name} properly`, () => {
+            beforeEach(() => {
+                openNumberPage(
+                    `min=-123&thousandSeparator=_&minusSign=${encodeURIComponent(minus.value)}`,
+                );
+            });
+
+            it(`-94 => ${minus.value}94`, () => {
+                cy.get('@input')
+                    .type(`${minus.value}94`)
+                    .should('have.value', `${minus.value}94`);
+            });
+
+            it(`-432 => ${minus.value}123`, () => {
+                cy.get('@input')
+                    .type(`${minus.value}432`)
+                    .should('have.value', `${minus.value}123`);
+            });
+        });
+    });
+});

projects/demo/src/pages/kit/number/examples/5-custom-minus-sign/components.ts

@@ -0,0 +1,34 @@
+import {Component} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+import {MaskitoDirective} from '@maskito/angular';
+import {TuiTextfieldControllerModule} from '@taiga-ui/core';
+import {TuiInputModule} from '@taiga-ui/kit';
+
+import mask from './mask';
+
+@Component({
+    standalone: true,
+    selector: 'number-mask-doc-example-5',
+    imports: [
+        TuiInputModule,
+        TuiTextfieldControllerModule,
+        MaskitoDirective,
+        FormsModule,
+    ],
+    template: `
+        <tui-input
+            [style.max-width.rem]="30"
+            [tuiTextfieldLabelOutside]="true"
+            [(ngModel)]="value"
+        >
+            <input
+                tuiTextfield
+                [maskito]="options"
+            />
+        </tui-input>
+    `,
+})
+export class NumberMaskDocExample5 {
+    protected value = '-42';
+    protected readonly options = mask;
+}

projects/demo/src/pages/kit/number/examples/5-custom-minus-sign/mask.ts

@@ -0,0 +1,6 @@
+import {maskitoNumberOptionsGenerator} from '@maskito/kit';
+
+export default maskitoNumberOptionsGenerator({
+    minusSign: '-',
+    thousandSeparator: '',
+});

projects/demo/src/pages/kit/number/examples/5-dynamic-decimal-zero-padding/component.ts → projects/demo/src/pages/kit/number/examples/6-dynamic-decimal-zero-padding/component.ts

@@ -16,7 +16,7 @@ import {getMaskitoOptions} from './mask';
 
 @Component({
     standalone: true,
-    selector: 'number-mask-doc-example-5',
+    selector: 'number-mask-doc-example-6',
     imports: [
         TuiLabelModule,
         TuiInputModule,
@@ -42,7 +42,7 @@ import {getMaskitoOptions} from './mask';
     `,
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class NumberMaskDocExample5 {
+export class NumberMaskDocExample6 {
     protected value = '42';
     protected decimalZeroPadding = this.value.includes('.');
 

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

@@ -9,16 +9,18 @@ import {
     maskitoNumberOptionsGenerator,
     maskitoRemoveOnBlurPlugin,
 } from '@maskito/kit';
+import {CHAR_MINUS} from '@maskito/kit/src/lib/constants';
 import type {TuiDocExample} from '@taiga-ui/addon-doc';
 import {TuiAddonDocModule} from '@taiga-ui/addon-doc';
-import {TuiNotificationModule} from '@taiga-ui/core';
+import {TuiLinkModule, TuiNotificationModule} from '@taiga-ui/core';
 import {tuiInputCountOptionsProvider, TuiInputModule} from '@taiga-ui/kit';
 
 import {NumberMaskDocExample1} from './examples/1-high-precision/component';
 import {NumberMaskDocExample2} from './examples/2-separators/component';
 import {NumberMaskDocExample3} from './examples/3-postfix/component';
 import {NumberMaskDocExample4} from './examples/4-decimal-zero-padding/component';
-import {NumberMaskDocExample5} from './examples/5-dynamic-decimal-zero-padding/component';
+import {NumberMaskDocExample5} from './examples/5-custom-minus-sign/components';
+import {NumberMaskDocExample6} from './examples/6-dynamic-decimal-zero-padding/component';
 
 type GeneratorOptions = Required<
     NonNullable<Parameters<typeof maskitoNumberOptionsGenerator>[0]>
@@ -33,11 +35,13 @@ type GeneratorOptions = Required<
         TuiAddonDocModule,
         TuiInputModule,
         TuiNotificationModule,
+        TuiLinkModule,
         NumberMaskDocExample1,
         NumberMaskDocExample2,
         NumberMaskDocExample3,
         NumberMaskDocExample4,
         NumberMaskDocExample5,
+        NumberMaskDocExample6,
     ],
     templateUrl: './number-mask-doc.template.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -70,12 +74,18 @@ export class NumberMaskDocComponent implements GeneratorOptions {
         ),
     };
 
-    protected readonly dynamicDecimalZeroPaddingExample5: TuiDocExample = {
+    protected readonly customMinusSignExample5: TuiDocExample = {
         [DocExamplePrimaryTab.MaskitoOptions]: import(
-            './examples/5-dynamic-decimal-zero-padding/mask.ts?raw'
+            './examples/5-custom-minus-sign/mask.ts?raw'
+        ),
+    };
+
+    protected readonly dynamicDecimalZeroPaddingExample6: TuiDocExample = {
+        [DocExamplePrimaryTab.MaskitoOptions]: import(
+            './examples/6-dynamic-decimal-zero-padding/mask.ts?raw'
         ),
         [DocExamplePrimaryTab.Angular]: import(
-            './examples/5-dynamic-decimal-zero-padding/component.ts?raw'
+            './examples/6-dynamic-decimal-zero-padding/component.ts?raw'
         ),
     };
 
@@ -98,6 +108,7 @@ export class NumberMaskDocComponent implements GeneratorOptions {
     public thousandSeparator = ' ';
     public prefix = '';
     public postfix = '';
+    public minusSign = CHAR_MINUS;
 
     protected maskitoOptions: MaskitoOptions = this.calculateMask(this);
 

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

@@ -102,10 +102,39 @@
             <number-mask-doc-example-4></number-mask-doc-example-4>
         </tui-doc-example>
 
+        <tui-doc-example
+            id="minus-sign"
+            heading="Minus sign"
+            [content]="customMinusSignExample5"
+            [description]="customMinusSignDescription"
+        >
+            <ng-template #customMinusSignDescription>
+                <p>
+                    Use
+                    <code>minusSign</code>
+                    parameter to configure the character which indicates that a number is negative.
+                </p>
+                <p>
+                    In this example
+                    <a
+                        href="https://symbl.cc/en/2010"
+                        rel="noreferrer"
+                        target="_blank"
+                        tuiLink
+                    >
+                        hyphen
+                    </a>
+                    is used as
+                    <code>minusSign</code>
+                </p>
+            </ng-template>
+            <number-mask-doc-example-5></number-mask-doc-example-5>
+        </tui-doc-example>
+
         <tui-doc-example
             id="dynamic-decimal-zero-padding"
             heading="Dynamic decimal zero padding"
-            [content]="dynamicDecimalZeroPaddingExample5"
+            [content]="dynamicDecimalZeroPaddingExample6"
             [description]="dynamicDecimalZeroPaddingDescription"
         >
             <ng-template #dynamicDecimalZeroPaddingDescription>
@@ -116,7 +145,7 @@
                     and enable it only after user inserts decimal separator.
                 </div>
             </ng-template>
-            <number-mask-doc-example-5></number-mask-doc-example-5>
+            <number-mask-doc-example-6></number-mask-doc-example-6>
         </tui-doc-example>
     </ng-template>
 
@@ -286,6 +315,27 @@
                     empty string (no postfix).
                 </p>
             </ng-template>
+            <ng-template
+                documentationPropertyMode="input"
+                documentationPropertyName="minusSign"
+                documentationPropertyType="string"
+                [(documentationPropertyValue)]="minusSign"
+                (documentationPropertyValueChange)="updateOptions()"
+            >
+                A minus symbol.
+
+                <p>
+                    <strong>Default:</strong>
+                    <a
+                        href="https://symbl.cc/en/2212"
+                        rel="noreferrer"
+                        target="_blank"
+                        tuiLink
+                    >
+                        <code>\u2212</code>
+                    </a>
+                </p>
+            </ng-template>
         </tui-doc-documentation>
     </ng-template>
 </tui-doc-page>

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

@@ -44,6 +44,7 @@ export function maskitoNumberOptionsGenerator({
     decimalZeroPadding = false,
     prefix: unsafePrefix = '',
     postfix = '',
+    minusSign = CHAR_MINUS,
 }: {
     min?: number;
     max?: number;
@@ -54,13 +55,18 @@ export function maskitoNumberOptionsGenerator({
     thousandSeparator?: string;
     prefix?: string;
     postfix?: string;
+    minusSign?: string;
 } = {}): Required<MaskitoOptions> {
     const pseudoMinuses = [
         CHAR_HYPHEN,
         CHAR_EN_DASH,
         CHAR_EM_DASH,
         CHAR_JP_HYPHEN,
-    ].filter(char => char !== thousandSeparator && char !== decimalSeparator);
+        CHAR_MINUS,
+    ].filter(
+        char =>
+            char !== thousandSeparator && char !== decimalSeparator && char !== minusSign,
+    );
     const validatedDecimalPseudoSeparators = validateDecimalPseudoSeparators({
         decimalSeparator,
         thousandSeparator,
@@ -80,6 +86,7 @@ export function maskitoNumberOptionsGenerator({
             prefix,
             postfix,
             isNegativeAllowed: min < 0,
+            minusSign,
         }),
         preprocessors: [
             createFullWidthToHalfWidthPreprocessor(),
@@ -89,10 +96,11 @@ export function maskitoNumberOptionsGenerator({
                 pseudoMinuses,
                 prefix,
                 postfix,
+                minusSign,
             }),
             createAffixesFilterPreprocessor({prefix, postfix}),
             createPseudoCharactersPreprocessor({
-                validCharacter: CHAR_MINUS,
+                validCharacter: minusSign,
                 pseudoCharacters: pseudoMinuses,
                 prefix,
                 postfix,
@@ -127,14 +135,15 @@ export function maskitoNumberOptionsGenerator({
             }),
         ],
         postprocessors: [
-            createMinMaxPostprocessor({decimalSeparator, min, max}),
+            createMinMaxPostprocessor({decimalSeparator, min, max, minusSign}),
             maskitoPrefixPostprocessorGenerator(prefix),
             maskitoPostfixPostprocessorGenerator(postfix),
             createThousandSeparatorPostprocessor({
                 decimalSeparator,
                 thousandSeparator,
                 prefix,
                 postfix,
+                minusSign,
             }),
             createDecimalZeroPaddingPostprocessor({
                 decimalSeparator,

projects/kit/src/lib/masks/number/processors/initialization-only-preprocessor.ts

@@ -20,12 +20,14 @@ export function createInitializationOnlyPreprocessor({
     pseudoMinuses,
     prefix,
     postfix,
+    minusSign,
 }: {
     decimalSeparator: string;
     decimalPseudoSeparators: readonly string[];
     pseudoMinuses: readonly string[];
     prefix: string;
     postfix: string;
+    minusSign: string;
 }): MaskitoPreprocessor {
     let isInitializationPhase = true;
     const cleanNumberMask = generateMaskExpression({
@@ -37,6 +39,7 @@ export function createInitializationOnlyPreprocessor({
         thousandSeparator: '',
         precision: Infinity,
         isNegativeAllowed: true,
+        minusSign,
     });
 
     return ({elementState, data}) => {