diff --git a/projects/demo-integrations/cypress/tests/kit/number/number-prefix-postfix.cy.ts b/projects/demo-integrations/cypress/tests/kit/number/number-prefix-postfix.cy.ts index 2b407e01e..0c453533d 100644 --- a/projects/demo-integrations/cypress/tests/kit/number/number-prefix-postfix.cy.ts +++ b/projects/demo-integrations/cypress/tests/kit/number/number-prefix-postfix.cy.ts @@ -52,7 +52,7 @@ describe('Number | Prefix & Postfix', () => { .should('have.value', '$1_234 per day') .should('have.prop', 'selectionStart', '$1_234'.length) .should('have.prop', 'selectionEnd', '$1_234'.length) - .type('{moveToStart}{rightArrow}{del}') + .type('{moveToStart}{del}') .should('have.value', '$234 per day') .should('have.prop', 'selectionStart', 1) .should('have.prop', 'selectionEnd', 1); @@ -131,17 +131,10 @@ describe('Number | Prefix & Postfix', () => { it('$|42 per day => Backspace => $|42 per day', () => { cy.get('@input') .type('42') - .type('{moveToStart}{rightArrow}') - .type('{backspace}'.repeat(5)) - .should('have.value', '$42 per day') + .type('{moveToStart}') .should('have.prop', 'selectionStart', '$'.length) - .should('have.prop', 'selectionEnd', '$'.length); - }); - - it('|$42 per day => Delete => $|42 per day', () => { - cy.get('@input') - .type('42') - .type('{moveToStart}{del}') + .should('have.prop', 'selectionEnd', '$'.length) + .type('{backspace}'.repeat(5)) .should('have.value', '$42 per day') .should('have.prop', 'selectionStart', '$'.length) .should('have.prop', 'selectionEnd', '$'.length); @@ -157,14 +150,28 @@ describe('Number | Prefix & Postfix', () => { .should('have.prop', 'selectionEnd', 1); }); - it('$42 per day| => Backspace => $42 per| day', () => { + it('$42| per day => Delete x4 => $42| per day', () => { cy.get('@input') .type('42') .type('{moveToEnd}') - .type('{backspace}'.repeat(4)) + .should('have.prop', 'selectionStart', '$42'.length) + .should('have.prop', 'selectionEnd', '$42'.length) + .type('{del}'.repeat(4)) .should('have.value', '$42 per day') - .should('have.prop', 'selectionStart', '$42 per'.length) - .should('have.prop', 'selectionEnd', '$42 per'.length); + .should('have.prop', 'selectionStart', '$42'.length) + .should('have.prop', 'selectionEnd', '$42'.length); + }); + }); + + describe('with maskitoCaretGuard', () => { + it('$|42 per day => ArrowLeft => $|42 per day', () => { + cy.get('@input') + .type('42') + .type('{moveToStart}') + .type('{leftArrow}'.repeat(3)) + .should('have.value', '$42 per day') + .should('have.prop', 'selectionStart', '$'.length) + .should('have.prop', 'selectionEnd', '$'.length); }); }); }); diff --git a/projects/demo/src/pages/kit/number/examples/3-postfix/component.ts b/projects/demo/src/pages/kit/number/examples/3-postfix/component.ts index 59abf5589..0ab66ff94 100644 --- a/projects/demo/src/pages/kit/number/examples/3-postfix/component.ts +++ b/projects/demo/src/pages/kit/number/examples/3-postfix/component.ts @@ -35,13 +35,6 @@ export class NumberMaskDocExample3 { if (!this.value) { this.value = this.postfix; } - - const newCaretIndex = this.value.length - this.postfix.length; - - setTimeout(() => { - // To put cursor before postfix - this.inputRef.nativeElement.setSelectionRange(newCaretIndex, newCaretIndex); - }); } onBlur(): void { diff --git a/projects/demo/src/pages/kit/number/examples/3-postfix/mask.ts b/projects/demo/src/pages/kit/number/examples/3-postfix/mask.ts index 5f876303d..697419583 100644 --- a/projects/demo/src/pages/kit/number/examples/3-postfix/mask.ts +++ b/projects/demo/src/pages/kit/number/examples/3-postfix/mask.ts @@ -1,8 +1,18 @@ -import {maskitoNumberOptionsGenerator} from '@maskito/kit'; +import type {MaskitoOptions} from '@maskito/core'; +import {maskitoCaretGuard, maskitoNumberOptionsGenerator} from '@maskito/kit'; -export default maskitoNumberOptionsGenerator({ +const {plugins, ...numberOptions} = maskitoNumberOptionsGenerator({ postfix: '%', min: 0, max: 100, precision: 2, }); + +export default { + ...numberOptions, + plugins: [ + ...plugins, + // Forbids caret to be placed after postfix + maskitoCaretGuard(value => [0, value.length - 1]), + ], +} as MaskitoOptions; diff --git a/projects/demo/src/pages/kit/number/number-mask-doc.component.ts b/projects/demo/src/pages/kit/number/number-mask-doc.component.ts index ee4d496f4..dbaa2dacf 100644 --- a/projects/demo/src/pages/kit/number/number-mask-doc.component.ts +++ b/projects/demo/src/pages/kit/number/number-mask-doc.component.ts @@ -2,7 +2,7 @@ import {ChangeDetectionStrategy, Component, ElementRef, ViewChild} from '@angula import {FormControl} from '@angular/forms'; import {DocExamplePrimaryTab} from '@demo/constants'; import {MaskitoOptions} from '@maskito/core'; -import {maskitoNumberOptionsGenerator} from '@maskito/kit'; +import {maskitoCaretGuard, maskitoNumberOptionsGenerator} from '@maskito/kit'; import {TuiDocExample} from '@taiga-ui/addon-doc'; import {tuiInputCountOptionsProvider} from '@taiga-ui/kit'; @@ -70,10 +70,10 @@ export class NumberMaskDocComponent implements GeneratorOptions { prefix = ''; postfix = ''; - maskitoOptions: MaskitoOptions = maskitoNumberOptionsGenerator(this); + maskitoOptions: MaskitoOptions = this.calculateMask(this); updateOptions(): void { - this.maskitoOptions = maskitoNumberOptionsGenerator(this); + this.maskitoOptions = this.calculateMask(this); } onFocus(): void { @@ -83,18 +83,6 @@ export class NumberMaskDocComponent implements GeneratorOptions { value = this.prefix + this.postfix; this.apiPageControl.patchValue(value); } - - if (this.postfix) { - const newCaretIndex = value.length - this.postfix.length; - - setTimeout(() => { - // To put cursor before postfix - this.apiPageInput.nativeElement.setSelectionRange( - newCaretIndex, - newCaretIndex, - ); - }); - } } onBlur(): void { @@ -104,4 +92,20 @@ export class NumberMaskDocComponent implements GeneratorOptions { this.apiPageControl.patchValue(''); } } + + private calculateMask(options: GeneratorOptions): MaskitoOptions { + const {prefix, postfix} = options; + const {plugins, ...numberOptions} = maskitoNumberOptionsGenerator(options); + + return { + ...numberOptions, + plugins: [ + ...plugins, + maskitoCaretGuard(value => [ + prefix.length, + value.length - postfix.length, + ]), + ], + }; + } } diff --git a/projects/demo/src/pages/kit/number/number-mask-doc.template.html b/projects/demo/src/pages/kit/number/number-mask-doc.template.html index 5b8e49f59..5d40b8736 100644 --- a/projects/demo/src/pages/kit/number/number-mask-doc.template.html +++ b/projects/demo/src/pages/kit/number/number-mask-doc.template.html @@ -64,17 +64,22 @@ [description]="postfixDescription" > -

+

Use postfix parameter to set non-removable text after the number. -

-

+

+
+ Additionally you can use + maskitoCaretGuard + to clamp caret inside allowable range. +
+
This example also shows how to restrict the greatest permitted value via max parameter. -

+