feat(kit): Number supports new configurable parameter minusSign

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

@@ -0,0 +1,45 @@
+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; asQueryParam: string}> = [
+        {value: CHAR_HYPHEN, name: 'hyphen', asQueryParam: '-'},
+        {value: 'i', name: 'i', asQueryParam: 'i'},
+    ];
+
+    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 => {
+        if (minus.value === 'i') {
+            pseudoMinuses.push(minus);
+        }
+
+        pseudoMinuses.forEach(pseudoMinus => {
+            numbers.forEach(number => {
+                it(`transforms ${pseudoMinus.name} into ${minus.name}`, () => {
+                    openNumberPage(
+                        `precision=Infinity&thousandSeparator=_&minusSign=${minus.asQueryParam}`,
+                    );
+                    cy.get('@input')
+                        .type(`${pseudoMinus.value}${number}`)
+                        .should('have.value', `${minus.value}${number}`);
+                });
+            });
+        });
+    });
+});

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

@@ -0,0 +1,33 @@
+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
+            [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,6 +9,7 @@ import {
     maskitoNumberOptionsGenerator,
     maskitoRemoveOnBlurPlugin,
 } from '@maskito/kit';
+import {CHAR_MINUS} from '@maskito/kit/src/lib/constants';
 import {TuiAddonDocModule, TuiDocExample} from '@taiga-ui/addon-doc';
 import {TuiNotificationModule} from '@taiga-ui/core';
 import {tuiInputCountOptionsProvider, TuiInputModule} from '@taiga-ui/kit';
@@ -17,7 +18,8 @@ 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]>
@@ -37,6 +39,7 @@ type GeneratorOptions = Required<
         NumberMaskDocExample3,
         NumberMaskDocExample4,
         NumberMaskDocExample5,
+        NumberMaskDocExample6,
     ],
     templateUrl: './number-mask-doc.template.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -69,12 +72,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'
         ),
     };
 
@@ -97,6 +106,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-6></number-mask-doc-example-6>
+        </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>
@@ -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

@@ -43,6 +43,7 @@ export function maskitoNumberOptionsGenerator({
     decimalZeroPadding = false,
     prefix: unsafePrefix = '',
     postfix = '',
+    minusSign = CHAR_MINUS,
 }: {
     min?: number;
     max?: number;
@@ -53,13 +54,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,
@@ -79,6 +85,7 @@ export function maskitoNumberOptionsGenerator({
             prefix,
             postfix,
             isNegativeAllowed: min < 0,
+            minusSign,
         }),
         preprocessors: [
             createFullWidthToHalfWidthPreprocessor(),
@@ -88,10 +95,11 @@ export function maskitoNumberOptionsGenerator({
                 pseudoMinuses,
                 prefix,
                 postfix,
+                minusSign,
             }),
             createAffixesFilterPreprocessor({prefix, postfix}),
             createPseudoCharactersPreprocessor({
-                validCharacter: CHAR_MINUS,
+                validCharacter: minusSign,
                 pseudoCharacters: pseudoMinuses,
                 prefix,
                 postfix,
@@ -134,6 +142,7 @@ export function maskitoNumberOptionsGenerator({
                 thousandSeparator,
                 prefix,
                 postfix,
+                minusSign,
             }),
             createDecimalZeroPaddingPostprocessor({
                 decimalSeparator,

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

@@ -19,12 +19,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({
@@ -36,6 +38,7 @@ export function createInitializationOnlyPreprocessor({
         thousandSeparator: '',
         precision: Infinity,
         isNegativeAllowed: true,
+        minusSign,
     });
 
     return ({elementState, data}) => {

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

@@ -1,6 +1,5 @@
 import {MaskitoPostprocessor} from '@maskito/core';
 
-import {CHAR_MINUS} from '../../../constants';
 import {extractAffixes, identity} from '../../../utils';
 
 /**
@@ -12,11 +11,13 @@ export function createThousandSeparatorPostprocessor({
     decimalSeparator,
     prefix,
     postfix,
+    minusSign,
 }: {
     thousandSeparator: string;
     decimalSeparator: string;
     prefix: string;
     postfix: string;
+    minusSign: string;
 }): MaskitoPostprocessor {
     if (!thousandSeparator) {
         return identity;
@@ -31,7 +32,7 @@ export function createThousandSeparatorPostprocessor({
         });
 
         const [integerPart, decimalPart = ''] = cleanValue
-            .replace(CHAR_MINUS, '')
+            .replace(minusSign, '')
             .split(decimalSeparator);
         const [initialFrom, initialTo] = selection;
         let [from, to] = selection;
@@ -83,7 +84,7 @@ export function createThousandSeparatorPostprocessor({
         return {
             value:
                 extractedPrefix +
-                (cleanValue.includes(CHAR_MINUS) ? CHAR_MINUS : '') +
+                (cleanValue.includes(minusSign) ? minusSign : '') +
                 processedIntegerPart +
                 (cleanValue.includes(decimalSeparator) ? decimalSeparator : '') +
                 decimalPart +