From 779babeeba440608e6f658e747010e8de68d449b Mon Sep 17 00:00:00 2001 From: Andrii Kamaldinov <129040945+andriikamaldinov1@users.noreply.github.com> Date: Thu, 28 Mar 2024 18:32:26 +0200 Subject: [PATCH] fix(ref: #1298, #1306, #1307): fix issues (#1338) * fix(ref: #1298): fix issue * fix(ref: #1306): add more information to custom pattern * fix(ref: no-ref): remove unusable code * fix(ref: no-ref): fix allowNegativeNumbers in demo --- CHANGELOG.md | 9 +- USAGE.md | 1 + projects/ngx-mask-lib/package.json | 2 +- .../src/lib/ngx-mask-applier.service.ts | 18 ++-- .../ngx-mask-lib/src/test/delete.cy-spec.ts | 87 +++++++++++++++++++ src/assets/content/common-cases.ts | 5 ++ 6 files changed, 115 insertions(+), 7 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index d6243fff..9eac67bb 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,10 +1,17 @@ +# 17.0.7(2024-03-28) + +### Fix + +- Fix ([#1298](https://github.com/JsDaddy/ngx-mask/issues/1298)) +- Fix ([#1307](https://github.com/JsDaddy/ngx-mask/issues/1307)) +- Fix ([#1306](https://github.com/JsDaddy/ngx-mask/issues/1306)) + # 17.0.6(2024-03-27) ### Fix - Fix ([#1301](https://github.com/JsDaddy/ngx-mask/issues/1301)) - Fix ([#1302](https://github.com/JsDaddy/ngx-mask/issues/1302)) -- Fix ([#1298](https://github.com/JsDaddy/ngx-mask/issues/1298)) - Fix ([#1292](https://github.com/JsDaddy/ngx-mask/issues/1292)) # 17.0.5(2024-03-25) diff --git a/USAGE.md b/USAGE.md index 5065f52f..be840c2a 100644 --- a/USAGE.md +++ b/USAGE.md @@ -107,6 +107,7 @@ Masked value: (Hel-loW) ### Custom pattern for this You can define custom pattern and specify symbol to be rendered in input field. +Patterns may conflict with such letters as h, d, m, s, because we use these characters for dates. ```typescript pattern = { diff --git a/projects/ngx-mask-lib/package.json b/projects/ngx-mask-lib/package.json index 1fc274d4..e1c371dc 100644 --- a/projects/ngx-mask-lib/package.json +++ b/projects/ngx-mask-lib/package.json @@ -1,6 +1,6 @@ { "name": "ngx-mask", - "version": "17.0.6", + "version": "17.0.7", "description": "awesome ngx mask", "keywords": [ "ng2-mask", 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 index 0efa2d85..821a2a3f 100644 --- a/projects/ngx-mask-lib/src/lib/ngx-mask-applier.service.ts +++ b/projects/ngx-mask-lib/src/lib/ngx-mask-applier.service.ts @@ -345,7 +345,10 @@ export class NgxMaskApplierService { result.indexOf(MaskExpression.COMMA) - inputValue.indexOf(MaskExpression.COMMA); const shiftStep: number = result.length - inputValue.length; - if (shiftStep > 0 && result[position] !== this.thousandSeparator) { + if (result[position - 1] === this.thousandSeparator && this.prefix && backspaced) { + // eslint-disable-next-line no-param-reassign + position = position - 1; + } else if (shiftStep > 0 && result[position] !== this.thousandSeparator) { backspaceShift = true; let _shift = 0; do { @@ -511,14 +514,16 @@ export class NgxMaskApplierService { (!maskStartWithMonth && (Number(inputValueSliceCursorPlusTwo) > daysCount || Number(inputValueSliceMinusOnePlusOne) > daysCount || - this.specialCharacters.includes(inputValueCursorPlusOne))) || + (this.specialCharacters.includes(inputValueCursorPlusOne) && + !backspaced))) || (startWithMonthInput ? Number(inputValueSliceMinusOnePlusOne) > daysCount || (!this.specialCharacters.includes(inputValueCursor) && this.specialCharacters.includes(inputValueCursorPlusTwo)) || this.specialCharacters.includes(inputValueCursor) : Number(inputValueSliceCursorPlusTwo) > daysCount || - this.specialCharacters.includes(inputValueCursorPlusOne)) + (this.specialCharacters.includes(inputValueCursorPlusOne) && + !backspaced)) ) { // eslint-disable-next-line no-param-reassign position = !this.leadZeroDateTime ? position + 1 : position; @@ -538,11 +543,13 @@ export class NgxMaskApplierService { cursor === 0 && (Number(inputSymbol) > 2 || Number(inputValueSliceCursorPlusTwo) > monthsCount || - this.specialCharacters.includes(inputValueCursorPlusOne)); + (this.specialCharacters.includes(inputValueCursorPlusOne) && + !backspaced)); // day<10 && month<12 for input const specialChart = maskExpression.slice(cursor + 2, cursor + 3); const day1monthInput: boolean = inputValueSliceMinusThreeMinusOne.includes(specialChart) && + maskExpression.includes('d0') && ((this.specialCharacters.includes(inputValueCursorMinusTwo) && Number(inputValueSliceMinusOnePlusOne) > monthsCount && !this.specialCharacters.includes(inputValueCursor)) || @@ -559,7 +566,8 @@ export class NgxMaskApplierService { ) && this.specialCharacters.includes(inputValueCursorMinusOne) && (Number(inputValueSliceCursorPlusTwo) > monthsCount || - this.specialCharacters.includes(inputValueCursorPlusOne)); + (this.specialCharacters.includes(inputValueCursorPlusOne) && + !backspaced)); // cursor === 5 && without days const day2monthInputDot: boolean = (Number(inputValueSliceCursorPlusTwo) > monthsCount && cursor === 5) || diff --git a/projects/ngx-mask-lib/src/test/delete.cy-spec.ts b/projects/ngx-mask-lib/src/test/delete.cy-spec.ts index 4ce8e69f..ea800820 100644 --- a/projects/ngx-mask-lib/src/test/delete.cy-spec.ts +++ b/projects/ngx-mask-lib/src/test/delete.cy-spec.ts @@ -288,4 +288,91 @@ describe('Directive: Mask (Delete)', () => { .should('have.prop', 'selectionStart', 4) .should('have.value', '+32 __ ___ __ __'); }); + + it('should backspace with separator and prefix', () => { + cy.mount(CypressTestMaskComponent, { + componentProperties: { + mask: 'separator.2', + thousandSeparator: ',', + prefix: '$ ', + }, + imports: [CypressTestMaskModule], + }); + + cy.get('#masked') + .type('1234567890') + .should('have.value', '$ 1,234,567,890') + .type('{leftArrow}'.repeat(3)) + .type('{backspace}') + .should('have.prop', 'selectionStart', 10); + }); + + it('should backspace with separator and prefix', () => { + cy.mount(CypressTestMaskComponent, { + componentProperties: { + mask: 'separator.2', + thousandSeparator: '.', + prefix: '$ ', + }, + imports: [CypressTestMaskModule], + }); + + cy.get('#masked') + .type('1234567890') + .should('have.value', '$ 1.234.567.890') + .type('{leftArrow}'.repeat(3)) + .type('{backspace}') + .should('have.prop', 'selectionStart', 10); + }); + + it('should backspace with showMaskTyped and leadZeroDateTime', () => { + cy.mount(CypressTestMaskComponent, { + componentProperties: { + mask: 'M0-d0-0000', + leadZeroDateTime: true, + showMaskTyped: true, + }, + imports: [CypressTestMaskModule], + }); + + cy.get('#masked') + .type('12310000') + .should('have.value', '12-31-0000') + .type('{backspace}'.repeat(8)) + .should('have.value', '__-__-____'); + }); + + it('should backspace with showMaskTyped and leadZeroDateTime', () => { + cy.mount(CypressTestMaskComponent, { + componentProperties: { + mask: 'M0/d0/0000', + leadZeroDateTime: true, + showMaskTyped: true, + }, + imports: [CypressTestMaskModule], + }); + + cy.get('#masked') + .type('12310000') + .should('have.value', '12/31/0000') + .type('{backspace}'.repeat(8)) + .should('have.value', '__/__/____'); + }); + + it('should backspace with showMaskTyped and leadZeroDateTime', () => { + cy.mount(CypressTestMaskComponent, { + componentProperties: { + mask: 'M0:d0:0000', + leadZeroDateTime: true, + showMaskTyped: true, + }, + imports: [CypressTestMaskModule], + }); + + cy.get('#masked') + .type('12310000') + .should('have.value', '12:31:0000') + .type('{backspace}'.repeat(8)) + .should('have.value', '__:__:____'); + }); }); diff --git a/src/assets/content/common-cases.ts b/src/assets/content/common-cases.ts index 8c51fa0c..4da23af6 100644 --- a/src/assets/content/common-cases.ts +++ b/src/assets/content/common-cases.ts @@ -147,17 +147,22 @@ export const ComExamples: TExample[] = [ { _placeholder: 'allowNegativeNumbers mask', _allowNegativeNumbers: true, + _specialCharacters: ['-', '/', '(', ')', '.', ':', ' ', '+', ',', '@', '[', ']', '"', "'"], _mask: '0000', control: { form: new UntypedFormControl(''), model: '' }, }, { _placeholder: 'allowNegativeNumbers separator', _allowNegativeNumbers: true, + _specialCharacters: ['-', '/', '(', ')', '.', ':', ' ', '+', ',', '@', '[', ']', '"', "'"], + _decimalMarker: '.', _mask: 'separator', control: { form: new UntypedFormControl(''), model: '' }, }, { _placeholder: 'allowNegativeNumbers percent', + _specialCharacters: ['-', '/', '(', ')', '.', ':', ' ', '+', ',', '@', '[', ']', '"', "'"], + _decimalMarker: '.', _allowNegativeNumbers: true, _mask: 'percent.2', control: { form: new UntypedFormControl(''), model: '' },