fix(1009): decimalMarker not locale default (#1052)

* fix(1009): decimalMarker not locale default

note: manually tested with added showcase
"Decimal separator with existing value"

of course, if someone finds a way to mock/set the locale
in the tests, I'll gladly add a unit test for that :)

to test: set browser locale to German for instance
(so that decimal marker defaults to ',')

before fix: 1234.56 shows as 1234.5
after fix: 1234.56 shows as 1234.56

* test(1009): test non EN locale

e.g. FR locale uses comma (,) as decimal marker

projects/ngx-mask-lib/src/lib/ngx-mask.directive.ts

@@ -555,10 +555,11 @@ export class NgxMaskDirective implements ControlValueAccessor, OnChanges, Valida
             // eslint-disable-next-line no-param-reassign
             inputValue = this._maskService.numberToString(inputValue);
             if (!Array.isArray(this.decimalMarker)) {
+                const localeDecimalMarker = this._currentLocaleDecimalMarker();
                 // eslint-disable-next-line no-param-reassign
                 inputValue =
-                    this.decimalMarker !== '.'
-                        ? inputValue.replace('.', this.decimalMarker)
+                    this.decimalMarker !== localeDecimalMarker
+                        ? inputValue.replace(localeDecimalMarker, this.decimalMarker)
                         : inputValue;
             }
             this._maskService.isNumberValue = true;
@@ -713,4 +714,8 @@ export class NgxMaskDirective implements ControlValueAccessor, OnChanges, Valida
             });
         }
     }
+
+    private _currentLocaleDecimalMarker(): string {
+        return (1.1).toLocaleString().substring(1, 2);
+    }
 }

projects/ngx-mask-lib/src/test/separator-non-en-locale.spec.ts

@@ -0,0 +1,65 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { LOCALE_ID } from '@angular/core';
+import { ReactiveFormsModule } from '@angular/forms';
+import { TestMaskComponent } from './utils/test-component.component';
+import { equal, typeTest } from './utils/test-functions.component';
+import { provideNgxMask } from '../lib/ngx-mask.providers';
+import { NgxMaskDirective } from '../lib/ngx-mask.directive';
+
+// FR locale uses comma as decimal marker
+describe('Separator: Mask with FR locale', () => {
+    let fixture: ComponentFixture<TestMaskComponent>;
+    let component: TestMaskComponent;
+
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            declarations: [TestMaskComponent],
+            imports: [ReactiveFormsModule, NgxMaskDirective],
+            providers: [provideNgxMask(), { provide: LOCALE_ID, useValue: 'fr' }],
+        });
+        fixture = TestBed.createComponent(TestMaskComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('Should work right when reset decimalMarker', () => {
+        component.mask = 'separator.2';
+        component.decimalMarker = '.';
+        equal('1000000.00', '1 000 000.00', fixture);
+    });
+
+    it('separator precision 2 with thousandSeparator (.) decimalMarker (,) for 12345.67', () => {
+        component.mask = 'separator.2';
+        component.thousandSeparator = ',';
+        component.decimalMarker = '.';
+        equal('12,345.67', '12,345.67', fixture);
+    });
+
+    it('separator precision 2 with thousandSeparator (.) decimalMarker (,) for 12345.67', () => {
+        component.mask = 'separator.2';
+        component.thousandSeparator = ',';
+        component.decimalMarker = '.';
+        equal('12345.67', '12,345.67', fixture);
+    });
+
+    it('check formControl value to be number when decimalMarker is dot', () => {
+        component.mask = 'separator.2';
+        component.thousandSeparator = ' ';
+        component.decimalMarker = '.';
+
+        typeTest('12 345.67', fixture);
+        expect(component.form.value).toBe('12345.67');
+    });
+
+    it('check formControl value to be number when decimalMarker is array', () => {
+        component.mask = 'separator.2';
+        component.thousandSeparator = ' ';
+        component.decimalMarker = ['.', ','];
+
+        typeTest('12 345,67', fixture);
+        expect(component.form.value).toBe('12345.67');
+
+        typeTest('123 456.78', fixture);
+        expect(component.form.value).toBe('123456.78');
+    });
+});