fix(ref: no-ref): fix issues

JsDaddy · Nov 1, 2024 · 2d84139 · 2d84139
1 parent 61d869a
commit 2d84139
Show file tree

Hide file tree

Showing 6 changed files with 142 additions and 10 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,7 +1,8 @@
 https://github.com/JsDaddy/ngx-mask/issues/1427
 https://github.com/JsDaddy/ngx-mask/issues/1405
 https://github.com/JsDaddy/ngx-mask/issues/1426
-
+https://github.com/JsDaddy/ngx-mask/issues/1406
+https://github.com/JsDaddy/ngx-mask/issues/1420
 
 # 18.0.1(2024-10-29)
 

diff --git a/projects/ngx-mask-lib/src/lib/ngx-mask-applier.service.ts b/projects/ngx-mask-lib/src/lib/ngx-mask-applier.service.ts
@@ -207,7 +207,9 @@ export class NgxMaskApplierService {
 
             const precision: number = this.getPrecision(maskExpression);
             const decimalMarker = Array.isArray(this.decimalMarker)
-                ? MaskExpression.DOT
+                ? this.thousandSeparator === MaskExpression.DOT
+                    ? MaskExpression.COMMA
+                    : MaskExpression.DOT
                 : this.decimalMarker;
 
             if (precision === 0) {
@@ -371,6 +373,8 @@ export class NgxMaskApplierService {
             const commaShift: number =
                 result.indexOf(MaskExpression.COMMA) - processedValue.indexOf(MaskExpression.COMMA);
             const shiftStep: number = result.length - processedValue.length;
+            const backspacedDecimalMarkerWithSeparatorLimit =
+                backspaced && result.length < inputValue.length && this.separatorLimit;
 
             if (
                 (result[processedPosition - 1] === this.thousandSeparator ||
@@ -379,15 +383,18 @@ export class NgxMaskApplierService {
                 backspaced
             ) {
                 processedPosition = processedPosition - 1;
-            } else if (shiftStep > 0 && result[processedPosition] !== this.thousandSeparator) {
+            } else if (
+                (shiftStep > 0 && result[processedPosition] !== this.thousandSeparator) ||
+                backspacedDecimalMarkerWithSeparatorLimit
+            ) {
                 backspaceShift = true;
                 let _shift = 0;
                 do {
                     this._shift.add(processedPosition + _shift);
                     _shift++;
                 } while (_shift < shiftStep);
             } else if (
-                result[processedPosition - 1] === this.decimalMarker ||
+                result[processedPosition - 1] === this.thousandSeparator ||
                 shiftStep === -4 ||
                 shiftStep === -3 ||
                 result[processedPosition] === this.thousandSeparator
@@ -406,6 +413,7 @@ export class NgxMaskApplierService {
                 ) &&
                     shiftStep <= 0)
             ) {
+                console.log('@@@@@@@@@@@222222');
                 this._shift.clear();
                 backspaceShift = true;
                 shift = shiftStep;
@@ -821,6 +829,7 @@ export class NgxMaskApplierService {
     ) => {
         let x: string[] = [];
         let decimalChar = '';
+
         if (Array.isArray(decimalChars)) {
             const regExp = new RegExp(
                 decimalChars.map((v) => ('[\\^$.|?*+()'.indexOf(v) >= 0 ? `\\${v}` : v)).join('|')

diff --git a/projects/ngx-mask-lib/src/test/cursor.cy-spec.ts b/projects/ngx-mask-lib/src/test/cursor.cy-spec.ts
@@ -381,4 +381,95 @@ describe('Test Date Hh:m0', () => {
         cy.get('#masked').type('111').should('have.value', '(11) 1');
         cy.get('#masked').type('{backspace}').should('have.prop', 'selectionStart', 4);
     });
+
+    it('when decimalMarker doenst set should have right position cursor thousandSeparator = .', () => {
+        cy.mount(CypressTestMaskComponent, {
+            componentProperties: {
+                mask: 'separator.2',
+                thousandSeparator: '.',
+            },
+            imports: [CypressTestMaskModule],
+        });
+
+        cy.get('#masked')
+            .type('12345678,00')
+
+            .should('have.value', '12.345.678,00')
+            .type('{leftArrow}'.repeat(3))
+            .type('{backspace}'.repeat(3))
+            .should('have.value', '12.345,00');
+    });
+
+    it('when decimalMarker doenst set should have right position cursor thousandSeparator = ,', () => {
+        cy.mount(CypressTestMaskComponent, {
+            componentProperties: {
+                mask: 'separator.2',
+                thousandSeparator: ',',
+            },
+            imports: [CypressTestMaskModule],
+        });
+
+        cy.get('#masked')
+            .type('12345678.00')
+
+            .should('have.value', '12,345,678.00')
+            .type('{leftArrow}'.repeat(3))
+            .type('{backspace}'.repeat(3))
+            .should('have.value', '12,345.00');
+    });
+
+    it('should place cursor after backspace with separatorLimit = 10 in correct position', () => {
+        cy.mount(CypressTestMaskComponent, {
+            componentProperties: {
+                mask: 'separator.2',
+                separatorLimit: '10',
+            },
+            imports: [CypressTestMaskModule],
+        });
+
+        cy.get('#masked')
+            .type('12.10')
+            .should('have.value', '12.10')
+            .type('{leftArrow}'.repeat(2))
+            .type('{backspace}')
+            .should('have.value', '12')
+            .should('have.prop', 'selectionStart', 2);
+    });
+
+    it('should place cursor after backspace with separatorLimit = 100 in correct position', () => {
+        cy.mount(CypressTestMaskComponent, {
+            componentProperties: {
+                mask: 'separator.2',
+                separatorLimit: '100',
+            },
+            imports: [CypressTestMaskModule],
+        });
+
+        cy.get('#masked')
+            .type('123.10')
+            .should('have.value', '123.10')
+            .type('{leftArrow}'.repeat(2))
+            .type('{backspace}')
+            .should('have.value', '123')
+            .should('have.prop', 'selectionStart', 3);
+    });
+
+    it('should place cursor after backspace with separatorLimit = 1000 in correct position', () => {
+        cy.mount(CypressTestMaskComponent, {
+            componentProperties: {
+                mask: 'separator.2',
+                thousandSeparator: ',',
+                separatorLimit: '1000',
+            },
+            imports: [CypressTestMaskModule],
+        });
+
+        cy.get('#masked')
+            .type('1234.10')
+            .should('have.value', '1,234.10')
+            .type('{leftArrow}'.repeat(2))
+            .type('{backspace}')
+            .should('have.value', '1,234')
+            .should('have.prop', 'selectionStart', 5);
+    });
 });
diff --git a/projects/ngx-mask-lib/src/test/utils/cypress-test-component.component.ts b/projects/ngx-mask-lib/src/test/utils/cypress-test-component.component.ts
@@ -24,6 +24,7 @@ import { NGX_MASK_CONFIG } from 'ngx-mask';
             [specialCharacters]="specialCharacters"
             [patterns]="patterns"
             [keepCharacterPositions]="keepCharacterPositions"
+            [separatorLimit]="separatorLimit"
             [hiddenInput]="hiddenInput" />
 
         <pre id="pre">{{ counter$ | async }}</pre>
@@ -63,6 +64,8 @@ export class CypressTestMaskComponent {
 
     @Input() public leadZeroDateTime = false;
 
+    @Input() public separatorLimit = '';
+
     @Input() public patterns = this._config.patterns;
 
     @Input() public specialCharacters = this._config.specialCharacters;

diff --git a/src/app/options/options.component.html b/src/app/options/options.component.html
@@ -1,7 +1,32 @@
 <div class="flex flex-col bg-dark">
+    <!--    <input mask="separator.2" separatorLimit="10" [formControl]="amount" />-->
+
+    <!--    <span>{{ amount.value }}</span>-->
+    <!--    <input mask="separator.2" separatorLimit="1000" [formControl]="amount1" />-->
+    <!--    &lt;!&ndash;    <input mask="separator.2" separatorLimit="100" [formControl]="amount1" />&ndash;&gt;-->
+    <!--    &lt;!&ndash;    <input mask="separator.2" separatorLimit="1000" [leadZero]="true" [formControl]="amount1" />&ndash;&gt;-->
+
+    <!--    <span>WITHOUT SeparatorLIMIT</span>-->
+
+    <!--    <input mask="separator.2" thousandSeparator="." [formControl]="amount1" />-->
+    <!--    <span>{{ amount1.value }}</span>-->
+    <!--    <span>With bug</span>-->
+    <!--    <br />-->
+    <!--    <input-->
+    <!--        name="with-bug"-->
+    <!--        mask="separator.2"-->
+    <!--        decimalMarker=","-->
+    <!--        thousandSeparator="."-->
+    <!--        [formControl]="amount" />-->
+
+    <!--    <br />-->
+
+    <!--    <span>Without bug</span>-->
+    <!--    <br />-->
+    <!--    <input name="without-bug" mask="separator.2" thousandSeparator="." [formControl]="amount" />-->
     <input
         mask="separator.2"
-        decimalMarker="."
+        [decimalMarker]="decimalMarker"
         [thousandSeparator]="thousand"
         [(ngModel)]="inputValue" />
     <span>{{ inputValue }}</span>

diff --git a/src/app/options/options.component.ts b/src/app/options/options.component.ts
@@ -13,6 +13,8 @@ import { OpenSourcePath } from '@open-source/path/open-source.path';
 import { toSignal } from '@angular/core/rxjs-interop';
 import type { ComDoc, MaskOptions, TExample } from '@open-source/accordion/content.types';
 
+type Deciml = '.' | ',' | ['.', ','];
+
 @Component({
     selector: 'jsdaddy-open-source-options',
     templateUrl: './options.component.html',
@@ -59,8 +61,8 @@ export class OptionsComponent {
             this.accordionService.onChangeAccordion(this.cards());
         });
     }
-    public amount = new FormControl('15000.33');
-    public amount1 = new FormControl('1500');
+    public amount = new FormControl('40.32');
+    public amount1 = new FormControl('4000.3');
 
     public testControl = new FormControl(0.085);
 
@@ -86,10 +88,11 @@ export class OptionsComponent {
         this.testValue2 = parseFloat(value);
     }
 
-    public thousand = '.';
-    public inputValue = '';
+    public thousand = ',';
+    public decimalMarker: Deciml = '.';
+    public inputValue = '10000.30';
 
     public changeThousand() {
-        this.thousand = ',';
+        this.thousand = '.';
     }
 }