diff --git a/CHANGELOG.md b/CHANGELOG.md index 0fe19938..eea45e25 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,12 @@ +# 19.0.1(2024-11-29) + +### Feature + +- change @Input to input in NgxMaskDirective +- change @Output output in NgxMaskDirective +- change variables to signals in NgxMaskDirective + + # 19.0.0(2024-11-22) ### Feature diff --git a/angular.json b/angular.json index 19f82bd1..aa3b1f07 100644 --- a/angular.json +++ b/angular.json @@ -13,6 +13,7 @@ "build": { "builder": "@angular-devkit/build-angular:application", "options": { + "security": { "autoCsp": true }, "outputPath": "dist/ngx-mask", "index": "src/index.html", "browser": "src/main.ts", diff --git a/bun.lockb b/bun.lockb index fea09b4a..42384d2f 100755 Binary files a/bun.lockb and b/bun.lockb differ diff --git a/package.json b/package.json index ca1c284c..cc99a758 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ngx-mask", - "version": "19.0.0", + "version": "19.0.1", "description": "Awesome ngx mask", "license": "MIT", "engines": { @@ -74,6 +74,7 @@ "cypress": "^13.16.0", "highlight.js": "11.10.0", "ngx-highlightjs": "12.0.0", + "ngxtension": "^4.1.0", "rxjs": "7.8.1", "semantic-release": "24.2.0", "semantic-release-export-data": "^1.1.0", diff --git a/projects/ngx-mask-lib/package.json b/projects/ngx-mask-lib/package.json index ab7f5853..1f31c32c 100644 --- a/projects/ngx-mask-lib/package.json +++ b/projects/ngx-mask-lib/package.json @@ -1,6 +1,6 @@ { "name": "ngx-mask", - "version": "19.0.0", + "version": "19.0.1", "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 df083564..b0b0a5b8 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 @@ -12,8 +12,6 @@ export class NgxMaskApplierService { public hiddenInput: NgxMaskConfig['hiddenInput'] = this._config.hiddenInput; - public showTemplate!: NgxMaskConfig['showTemplate']; - public clearIfNotMatch: NgxMaskConfig['clearIfNotMatch'] = this._config.clearIfNotMatch; public specialCharacters: NgxMaskConfig['specialCharacters'] = this._config.specialCharacters; @@ -73,15 +71,6 @@ export class NgxMaskApplierService { public cpfCnpjError?: boolean; - public applyMaskWithPattern( - inputValue: string, - maskAndPattern: [string, NgxMaskConfig['patterns']] - ): string { - const [mask, customPattern] = maskAndPattern; - this.customPattern = customPattern; - return this.applyMask(inputValue, mask); - } - public applyMask( inputValue: string | object | boolean | null | undefined, maskExpression: string, diff --git a/projects/ngx-mask-lib/src/lib/ngx-mask.config.ts b/projects/ngx-mask-lib/src/lib/ngx-mask.config.ts index 62c15a61..5af2a662 100644 --- a/projects/ngx-mask-lib/src/lib/ngx-mask.config.ts +++ b/projects/ngx-mask-lib/src/lib/ngx-mask.config.ts @@ -11,7 +11,6 @@ export type NgxMaskConfig = { thousandSeparator: string; decimalMarker: '.' | ',' | ['.', ',']; clearIfNotMatch: boolean; - showTemplate: boolean; showMaskTyped: boolean; placeHolderCharacter: string; shownMaskExpression: string; @@ -50,7 +49,6 @@ export const initialConfig: NgxMaskConfig = { thousandSeparator: ' ', decimalMarker: ['.', ','], clearIfNotMatch: false, - showTemplate: false, showMaskTyped: false, placeHolderCharacter: '_', dropSpecialCharacters: true, diff --git a/projects/ngx-mask-lib/src/lib/ngx-mask.directive.ts b/projects/ngx-mask-lib/src/lib/ngx-mask.directive.ts index 4ab0e2a0..b22ebba6 100644 --- a/projects/ngx-mask-lib/src/lib/ngx-mask.directive.ts +++ b/projects/ngx-mask-lib/src/lib/ngx-mask.directive.ts @@ -1,6 +1,6 @@ import { DOCUMENT } from '@angular/common'; import type { OnChanges, SimpleChanges } from '@angular/core'; -import { Directive, EventEmitter, HostListener, Input, Output, inject } from '@angular/core'; +import { signal, input, output, Directive, HostListener, inject } from '@angular/core'; import type { ControlValueAccessor, FormControl, @@ -34,79 +34,47 @@ import { MaskExpression } from './ngx-mask-expression.enum'; exportAs: 'mask,ngxMask', }) export class NgxMaskDirective implements ControlValueAccessor, OnChanges, Validator { - @Input('mask') public maskExpression: string | undefined | null = ''; - - @Input() public specialCharacters: NgxMaskConfig['specialCharacters'] = []; - - @Input() public patterns: NgxMaskConfig['patterns'] = {}; - - @Input() public prefix: NgxMaskConfig['prefix'] = ''; - - @Input() public suffix: NgxMaskConfig['suffix'] = ''; - - @Input() public thousandSeparator: NgxMaskConfig['thousandSeparator'] = ' '; - - @Input() public decimalMarker: NgxMaskConfig['decimalMarker'] = '.'; - - @Input() public dropSpecialCharacters: NgxMaskConfig['dropSpecialCharacters'] | null = null; - - @Input() public hiddenInput: NgxMaskConfig['hiddenInput'] | null = null; - - @Input() public showMaskTyped: NgxMaskConfig['showMaskTyped'] | null = null; - - @Input() public placeHolderCharacter: NgxMaskConfig['placeHolderCharacter'] | null = null; - - @Input() public shownMaskExpression: NgxMaskConfig['shownMaskExpression'] | null = null; - - @Input() public showTemplate: NgxMaskConfig['showTemplate'] | null = null; - - @Input() public clearIfNotMatch: NgxMaskConfig['clearIfNotMatch'] | null = null; - - @Input() public validation: NgxMaskConfig['validation'] | null = null; - - @Input() public separatorLimit: NgxMaskConfig['separatorLimit'] | null = null; - - @Input() public allowNegativeNumbers: NgxMaskConfig['allowNegativeNumbers'] | null = null; - - @Input() public leadZeroDateTime: NgxMaskConfig['leadZeroDateTime'] | null = null; - - @Input() public leadZero: NgxMaskConfig['leadZero'] | null = null; - - @Input() public triggerOnMaskChange: NgxMaskConfig['triggerOnMaskChange'] | null = null; - - @Input() public apm: NgxMaskConfig['apm'] | null = null; - - @Input() public inputTransformFn: NgxMaskConfig['inputTransformFn'] | null = null; - - @Input() public outputTransformFn: NgxMaskConfig['outputTransformFn'] | null = null; - - @Input() public keepCharacterPositions: NgxMaskConfig['keepCharacterPositions'] | null = null; - - @Output() public maskFilled: NgxMaskConfig['maskFilled'] = new EventEmitter(); - - private _maskValue = ''; - - private _inputValue!: string; - - private _position: number | null = null; - - private _code!: string; - - private _maskExpressionArray: string[] = []; - - private _allowFewMaskChangeMask = false; - - private _justPasted = false; - - private _isFocused = false; - + public mask = input(''); + public specialCharacters = input([]); + public patterns = input({}); + public prefix = input(''); + public suffix = input(''); + public thousandSeparator = input(' '); + public decimalMarker = input('.'); + public dropSpecialCharacters = input(null); + public hiddenInput = input(null); + public showMaskTyped = input(null); + public placeHolderCharacter = input(null); + public shownMaskExpression = input(null); + public clearIfNotMatch = input(null); + public validation = input(null); + public separatorLimit = input(''); + public allowNegativeNumbers = input(null); + public leadZeroDateTime = input(null); + public leadZero = input(null); + public triggerOnMaskChange = input(null); + public apm = input(null); + public inputTransformFn = input(null); + public outputTransformFn = input(null); + public keepCharacterPositions = input(null); + + public maskFilled = output(); + + private _maskValue = signal(''); + private _inputValue = signal(''); + private _position = signal(null); + private _code = signal(''); + private _maskExpressionArray = signal([]); + private _allowFewMaskChangeMask = signal(false); + private _justPasted = signal(false); + private _isFocused = signal(false); /**For IME composition event */ - private _isComposing = false; - - private readonly document = inject(DOCUMENT); + private _isComposing = signal(false); public _maskService = inject(NgxMaskService, { self: true }); + private readonly document = inject(DOCUMENT); + protected _config = inject(NGX_MASK_CONFIG); // eslint-disable-next-line @typescript-eslint/no-empty-function @@ -117,7 +85,7 @@ export class NgxMaskDirective implements ControlValueAccessor, OnChanges, Valida public ngOnChanges(changes: SimpleChanges): void { const { - maskExpression, + mask, specialCharacters, patterns, prefix, @@ -129,7 +97,6 @@ export class NgxMaskDirective implements ControlValueAccessor, OnChanges, Valida showMaskTyped, placeHolderCharacter, shownMaskExpression, - showTemplate, clearIfNotMatch, validation, separatorLimit, @@ -142,27 +109,21 @@ export class NgxMaskDirective implements ControlValueAccessor, OnChanges, Valida outputTransformFn, keepCharacterPositions, } = changes; - if (maskExpression) { - if ( - maskExpression.currentValue !== maskExpression.previousValue && - !maskExpression.firstChange - ) { + if (mask) { + if (mask.currentValue !== mask.previousValue && !mask.firstChange) { this._maskService.maskChanged = true; } - if ( - maskExpression.currentValue && - maskExpression.currentValue.split(MaskExpression.OR).length > 1 - ) { - this._maskExpressionArray = maskExpression.currentValue - .split(MaskExpression.OR) - .sort((a: string, b: string) => { + if (mask.currentValue && mask.currentValue.split(MaskExpression.OR).length > 1) { + this._maskExpressionArray.set( + mask.currentValue.split(MaskExpression.OR).sort((a: string, b: string) => { return a.length - b.length; - }); + }) + ); this._setMask(); } else { - this._maskExpressionArray = []; - this._maskValue = maskExpression.currentValue || MaskExpression.EMPTY_STRING; - this._maskService.maskExpression = this._maskValue; + this._maskExpressionArray.set([]); + this._maskValue.set(mask.currentValue || MaskExpression.EMPTY_STRING); + this._maskService.maskExpression = this._maskValue(); } } if (specialCharacters) { @@ -210,7 +171,7 @@ export class NgxMaskDirective implements ControlValueAccessor, OnChanges, Valida if ( showMaskTyped.previousValue === false && showMaskTyped.currentValue === true && - this._isFocused + this._isFocused() ) { requestAnimationFrame(() => { this._maskService._elementRef?.nativeElement.click(); @@ -223,9 +184,6 @@ export class NgxMaskDirective implements ControlValueAccessor, OnChanges, Valida if (shownMaskExpression) { this._maskService.shownMaskExpression = shownMaskExpression.currentValue; } - if (showTemplate) { - this._maskService.showTemplate = showTemplate.currentValue; - } if (clearIfNotMatch) { this._maskService.clearIfNotMatch = clearIfNotMatch.currentValue; } @@ -258,8 +216,9 @@ export class NgxMaskDirective implements ControlValueAccessor, OnChanges, Valida public validate({ value }: FormControl): ValidationErrors | null { const processedValue: string = typeof value === 'number' ? String(value) : value; + const maskValue = this._maskValue(); - if (!this._maskService.validation || !this._maskValue) { + if (!this._maskService.validation || !maskValue) { return null; } if (this._maskService.ipError) { @@ -268,19 +227,19 @@ export class NgxMaskDirective implements ControlValueAccessor, OnChanges, Valida if (this._maskService.cpfCnpjError) { return this._createValidationError(processedValue); } - if (this._maskValue.startsWith(MaskExpression.SEPARATOR)) { + if (maskValue.startsWith(MaskExpression.SEPARATOR)) { return null; } - if (withoutValidation.includes(this._maskValue)) { + if (withoutValidation.includes(maskValue)) { return null; } if (this._maskService.clearIfNotMatch) { return null; } - if (timeMasks.includes(this._maskValue)) { + if (timeMasks.includes(maskValue)) { return this._validateTime(processedValue); } - if (this._maskValue === MaskExpression.EMAIL_MASK) { + if (maskValue === MaskExpression.EMAIL_MASK) { const emailPattern = /^[^@]+@[^@]+\.[^@]+$/; if (!emailPattern.test(processedValue) && processedValue) { @@ -293,63 +252,63 @@ export class NgxMaskDirective implements ControlValueAccessor, OnChanges, Valida let counterOfOpt = 0; if ( - this._maskValue.includes(MaskExpression.CURLY_BRACKETS_LEFT) && - this._maskValue.includes(MaskExpression.CURLY_BRACKETS_RIGHT) + maskValue.includes(MaskExpression.CURLY_BRACKETS_LEFT) && + maskValue.includes(MaskExpression.CURLY_BRACKETS_RIGHT) ) { - const lengthInsideCurlyBrackets = this._maskValue.slice( - this._maskValue.indexOf(MaskExpression.CURLY_BRACKETS_LEFT) + 1, - this._maskValue.indexOf(MaskExpression.CURLY_BRACKETS_RIGHT) + const lengthInsideCurlyBrackets = maskValue.slice( + maskValue.indexOf(MaskExpression.CURLY_BRACKETS_LEFT) + 1, + maskValue.indexOf(MaskExpression.CURLY_BRACKETS_RIGHT) ); return lengthInsideCurlyBrackets === String(processedValue.length) ? null : this._createValidationError(processedValue); } - if (this._maskValue.startsWith(MaskExpression.PERCENT)) { + if (maskValue.startsWith(MaskExpression.PERCENT)) { return null; } for (const key in this._maskService.patterns) { if (this._maskService.patterns[key]?.optional) { - if (this._maskValue.indexOf(key) !== this._maskValue.lastIndexOf(key)) { - const opt: string = this._maskValue + if (maskValue.indexOf(key) !== maskValue.lastIndexOf(key)) { + const opt: string = maskValue .split(MaskExpression.EMPTY_STRING) .filter((i: string) => i === key) .join(MaskExpression.EMPTY_STRING); counterOfOpt += opt.length; - } else if (this._maskValue.indexOf(key) !== -1) { + } else if (maskValue.indexOf(key) !== -1) { counterOfOpt++; } if ( - this._maskValue.indexOf(key) !== -1 && - processedValue.length >= this._maskValue.indexOf(key) + maskValue.indexOf(key) !== -1 && + processedValue.length >= maskValue.indexOf(key) ) { return null; } - if (counterOfOpt === this._maskValue.length) { + if (counterOfOpt === maskValue.length) { return null; } } } if ( - (this._maskValue.indexOf(MaskExpression.SYMBOL_STAR) > 1 && - processedValue.length < this._maskValue.indexOf(MaskExpression.SYMBOL_STAR)) || - (this._maskValue.indexOf(MaskExpression.SYMBOL_QUESTION) > 1 && - processedValue.length < this._maskValue.indexOf(MaskExpression.SYMBOL_QUESTION)) + (maskValue.indexOf(MaskExpression.SYMBOL_STAR) > 1 && + processedValue.length < maskValue.indexOf(MaskExpression.SYMBOL_STAR)) || + (maskValue.indexOf(MaskExpression.SYMBOL_QUESTION) > 1 && + processedValue.length < maskValue.indexOf(MaskExpression.SYMBOL_QUESTION)) ) { return this._createValidationError(processedValue); } if ( - this._maskValue.indexOf(MaskExpression.SYMBOL_STAR) === -1 || - this._maskValue.indexOf(MaskExpression.SYMBOL_QUESTION) === -1 + maskValue.indexOf(MaskExpression.SYMBOL_STAR) === -1 || + maskValue.indexOf(MaskExpression.SYMBOL_QUESTION) === -1 ) { - const array = this._maskValue.split('*'); + const array = maskValue.split('*'); const length: number = this._maskService.dropSpecialCharacters - ? this._maskValue.length - - this._maskService.checkDropSpecialCharAmount(this._maskValue) - + ? maskValue.length - + this._maskService.checkDropSpecialCharAmount(maskValue) - counterOfOpt - : this.prefix - ? this._maskValue.length + this.prefix.length - counterOfOpt - : this._maskValue.length - counterOfOpt; + : this.prefix() + ? maskValue.length + this.prefix().length - counterOfOpt + : maskValue.length - counterOfOpt; if (array.length === 1) { if (processedValue.length < length) { @@ -362,7 +321,7 @@ export class NgxMaskDirective implements ControlValueAccessor, OnChanges, Valida lastIndexArray && this._maskService.specialCharacters.includes(lastIndexArray[0] as string) && String(processedValue).includes(lastIndexArray[0] ?? '') && - !this.dropSpecialCharacters + !this.dropSpecialCharacters() ) { const special = value.split(lastIndexArray[0]); return special[special.length - 1].length === lastIndexArray.length - 1 @@ -384,8 +343,8 @@ export class NgxMaskDirective implements ControlValueAccessor, OnChanges, Valida } } if ( - this._maskValue.indexOf(MaskExpression.SYMBOL_STAR) === 1 || - this._maskValue.indexOf(MaskExpression.SYMBOL_QUESTION) === 1 + maskValue.indexOf(MaskExpression.SYMBOL_STAR) === 1 || + maskValue.indexOf(MaskExpression.SYMBOL_QUESTION) === 1 ) { return null; } @@ -399,11 +358,11 @@ export class NgxMaskDirective implements ControlValueAccessor, OnChanges, Valida @HostListener('paste') public onPaste() { - this._justPasted = true; + this._justPasted.set(true); } @HostListener('focus', ['$event']) public onFocus() { - this._isFocused = true; + this._isFocused.set(true); } @HostListener('ngModelChange', ['$event']) @@ -424,19 +383,20 @@ export class NgxMaskDirective implements ControlValueAccessor, OnChanges, Valida @HostListener('input', ['$event']) public onInput(e: CustomKeyboardEvent): void { // If IME is composing text, we wait for the composed text. - if (this._isComposing) { + if (this._isComposing()) { return; } const el: HTMLInputElement = e.target as HTMLInputElement; const transformedValue = this._maskService.inputTransformFn(el.value); + if (el.type !== 'number') { if (typeof transformedValue === 'string' || typeof transformedValue === 'number') { el.value = transformedValue.toString(); - this._inputValue = el.value; + this._inputValue.set(el.value); this._setMask(); - if (!this._maskValue) { + if (!this._maskValue()) { this.onChange(el.value); return; } @@ -447,12 +407,14 @@ export class NgxMaskDirective implements ControlValueAccessor, OnChanges, Valida : (el.selectionStart as number); if ( - this.showMaskTyped && - this.keepCharacterPositions && + this.showMaskTyped() && + this.keepCharacterPositions() && this._maskService.placeHolderCharacter.length === 1 ) { + const suffix = this.suffix(); + const prefix = this.prefix(); const inputSymbol = el.value.slice(position - 1, position); - const prefixLength = this.prefix.length; + const prefixLength = prefix.length; const checkSymbols: boolean = this._maskService._checkSymbolMask( inputSymbol, this._maskService.maskExpression[position - 1 - prefixLength] ?? @@ -470,21 +432,21 @@ export class NgxMaskDirective implements ControlValueAccessor, OnChanges, Valida const selEnd = Number(this._maskService.selEnd) - prefixLength; const backspaceOrDelete = - this._code === MaskExpression.BACKSPACE || - this._code === MaskExpression.DELETE; + this._code() === MaskExpression.BACKSPACE || + this._code() === MaskExpression.DELETE; if (backspaceOrDelete) { if (!selectRangeBackspace) { if (this._maskService.selStart === prefixLength) { - this._maskService.actualValue = `${this.prefix}${this._maskService.maskIsShown.slice(0, selEnd)}${this._inputValue.split(this.prefix).join('')}`; + this._maskService.actualValue = `${prefix}${this._maskService.maskIsShown.slice(0, selEnd)}${this._inputValue().split(prefix).join('')}`; } else if ( this._maskService.selStart === this._maskService.maskIsShown.length + prefixLength ) { - this._maskService.actualValue = `${this._inputValue}${this._maskService.maskIsShown.slice(selStart, selEnd)}`; + this._maskService.actualValue = `${this._inputValue()}${this._maskService.maskIsShown.slice(selStart, selEnd)}`; } else { - this._maskService.actualValue = `${this.prefix}${this._inputValue - .split(this.prefix) + this._maskService.actualValue = `${prefix}${this._inputValue() + .split(prefix) .join('') .slice( 0, @@ -492,23 +454,23 @@ export class NgxMaskDirective implements ControlValueAccessor, OnChanges, Valida )}${this._maskService.maskIsShown.slice(selStart, selEnd)}${this._maskService.actualValue.slice( selEnd + prefixLength, this._maskService.maskIsShown.length + prefixLength - )}${this.suffix}`; + )}${suffix}`; } } else if ( !this._maskService.specialCharacters.includes( this._maskService.maskExpression.slice( - position - this.prefix.length, - position + 1 - this.prefix.length + position - prefixLength, + position + 1 - prefixLength ) ) && selectRangeBackspace ) { - if (selStart === 1 && this.prefix) { - this._maskService.actualValue = `${this.prefix}${this._maskService.placeHolderCharacter}${el.value - .split(this.prefix) + if (selStart === 1 && prefix) { + this._maskService.actualValue = `${prefix}${this._maskService.placeHolderCharacter}${el.value + .split(prefix) .join('') - .split(this.suffix) - .join('')}${this.suffix}`; + .split(suffix) + .join('')}${suffix}`; position = position - 1; } else { @@ -517,7 +479,7 @@ export class NgxMaskDirective implements ControlValueAccessor, OnChanges, Valida this._maskService.actualValue = `${part1}${this._maskService.placeHolderCharacter}${part2}`; } } - position = this._code === MaskExpression.DELETE ? position + 1 : position; + position = this._code() === MaskExpression.DELETE ? position + 1 : position; } if (!backspaceOrDelete) { if (!checkSymbols && !checkSpecialCharacter && selectRangeBackspace) { @@ -535,18 +497,18 @@ export class NgxMaskDirective implements ControlValueAccessor, OnChanges, Valida position = position + 1; } else if (checkSymbols) { if (el.value.length === 1 && position === 1) { - this._maskService.actualValue = `${this.prefix}${inputSymbol}${this._maskService.maskIsShown.slice( + this._maskService.actualValue = `${prefix}${inputSymbol}${this._maskService.maskIsShown.slice( 1, this._maskService.maskIsShown.length - )}${this.suffix}`; + )}${suffix}`; } else { this._maskService.actualValue = `${el.value.slice(0, position - 1)}${inputSymbol}${el.value .slice(position + 1) - .split(this.suffix) - .join('')}${this.suffix}`; + .split(suffix) + .join('')}${suffix}`; } } else if ( - this.prefix && + prefix && el.value.length === 1 && position - prefixLength === 1 && this._maskService._checkSymbolMask( @@ -555,34 +517,34 @@ export class NgxMaskDirective implements ControlValueAccessor, OnChanges, Valida MaskExpression.EMPTY_STRING ) ) { - this._maskService.actualValue = `${this.prefix}${el.value}${this._maskService.maskIsShown.slice( + this._maskService.actualValue = `${prefix}${el.value}${this._maskService.maskIsShown.slice( 1, this._maskService.maskIsShown.length - )}${this.suffix}`; + )}${suffix}`; } } } let caretShift = 0; let backspaceShift = false; - if (this._code === MaskExpression.DELETE && MaskExpression.SEPARATOR) { + if (this._code() === MaskExpression.DELETE && MaskExpression.SEPARATOR) { this._maskService.deletedSpecialCharacter = true; } if ( - this._inputValue.length >= this._maskService.maskExpression.length - 1 && - this._code !== MaskExpression.BACKSPACE && + this._inputValue().length >= this._maskService.maskExpression.length - 1 && + this._code() !== MaskExpression.BACKSPACE && this._maskService.maskExpression === MaskExpression.DAYS_MONTHS_YEARS && position < 10 ) { - const inputSymbol = this._inputValue.slice(position - 1, position); + const inputSymbol = this._inputValue().slice(position - 1, position); el.value = - this._inputValue.slice(0, position - 1) + + this._inputValue().slice(0, position - 1) + inputSymbol + - this._inputValue.slice(position + 1); + this._inputValue().slice(position + 1); } if ( this._maskService.maskExpression === MaskExpression.DAYS_MONTHS_YEARS && - this.leadZeroDateTime + this.leadZeroDateTime() ) { if ( (position < 3 && Number(el.value) > 31 && Number(el.value) < 40) || @@ -593,9 +555,9 @@ export class NgxMaskDirective implements ControlValueAccessor, OnChanges, Valida } if ( this._maskService.maskExpression === MaskExpression.HOURS_MINUTES_SECONDS && - this.apm + this.apm() ) { - if (this._justPasted && el.value.slice(0, 2) === MaskExpression.DOUBLE_ZERO) { + if (this._justPasted() && el.value.slice(0, 2) === MaskExpression.DOUBLE_ZERO) { el.value = el.value.slice(1, 2) + el.value.slice(2, el.value.length); } el.value = @@ -606,10 +568,11 @@ export class NgxMaskDirective implements ControlValueAccessor, OnChanges, Valida this._maskService.applyValueChanges( position, - this._justPasted, - this._code === MaskExpression.BACKSPACE || this._code === MaskExpression.DELETE, + this._justPasted(), + this._code() === MaskExpression.BACKSPACE || + this._code() === MaskExpression.DELETE, (shift: number, _backspaceShift: boolean) => { - this._justPasted = false; + this._justPasted.set(false); caretShift = shift; backspaceShift = _backspaceShift; } @@ -624,17 +587,17 @@ export class NgxMaskDirective implements ControlValueAccessor, OnChanges, Valida this._maskService.plusOnePosition = false; } // update position after applyValueChanges to prevent cursor on wrong position when it has an array of maskExpression - if (this._maskExpressionArray.length) { - if (this._code === MaskExpression.BACKSPACE) { - const specialChartMinusOne = this.specialCharacters.includes( + if (this._maskExpressionArray().length) { + if (this._code() === MaskExpression.BACKSPACE) { + const specialChartMinusOne = this.specialCharacters().includes( this._maskService.actualValue.slice(position - 1, position) ); - const specialChartPlusOne = this.specialCharacters.includes( + const specialChartPlusOne = this.specialCharacters().includes( this._maskService.actualValue.slice(position, position + 1) ); - if (this._allowFewMaskChangeMask && !specialChartPlusOne) { + if (this._allowFewMaskChangeMask() && !specialChartPlusOne) { position = (el.selectionStart as number) + 1; - this._allowFewMaskChangeMask = false; + this._allowFewMaskChangeMask.set(false); } else { position = specialChartMinusOne ? position - 1 : position; } @@ -645,12 +608,17 @@ export class NgxMaskDirective implements ControlValueAccessor, OnChanges, Valida : (el.selectionStart as number); } } - this._position = - this._position === 1 && this._inputValue.length === 1 ? null : this._position; - let positionToApply: number = this._position - ? this._inputValue.length + position + caretShift + this._position.set( + this._position() === 1 && this._inputValue().length === 1 + ? null + : this._position() + ); + let positionToApply: number = this._position() + ? this._inputValue().length + position + caretShift : position + - (this._code === MaskExpression.BACKSPACE && !backspaceShift ? 0 : caretShift); + (this._code() === MaskExpression.BACKSPACE && !backspaceShift + ? 0 + : caretShift); if (positionToApply > this._getActualInputLength()) { positionToApply = el.value === this._maskService.decimalMarker && el.value.length === 1 @@ -661,7 +629,7 @@ export class NgxMaskDirective implements ControlValueAccessor, OnChanges, Valida positionToApply = 0; } el.setSelectionRange(positionToApply, positionToApply); - this._position = null; + this._position.set(null); } else { // eslint-disable-next-line no-console console.warn( @@ -670,14 +638,14 @@ export class NgxMaskDirective implements ControlValueAccessor, OnChanges, Valida ); } } else { - if (!this._maskValue) { + if (!this._maskValue()) { this.onChange(el.value); return; } this._maskService.applyValueChanges( el.value.length, - this._justPasted, - this._code === MaskExpression.BACKSPACE || this._code === MaskExpression.DELETE + this._justPasted(), + this._code() === MaskExpression.BACKSPACE || this._code() === MaskExpression.DELETE ); } } @@ -685,20 +653,20 @@ export class NgxMaskDirective implements ControlValueAccessor, OnChanges, Valida // IME starts @HostListener('compositionstart', ['$event']) public onCompositionStart(): void { - this._isComposing = true; + this._isComposing.set(true); } // IME completes @HostListener('compositionend', ['$event']) public onCompositionEnd(e: CustomKeyboardEvent): void { - this._isComposing = false; - this._justPasted = true; + this._isComposing.set(false); + this._justPasted.set(true); this.onInput(e); } @HostListener('blur', ['$event']) public onBlur(e: CustomKeyboardEvent): void { - if (this._maskValue) { + if (this._maskValue()) { const el: HTMLInputElement = e.target as HTMLInputElement; if ( this._maskService.leadZero && @@ -706,6 +674,8 @@ export class NgxMaskDirective implements ControlValueAccessor, OnChanges, Valida typeof this._maskService.decimalMarker === 'string' ) { const maskExpression = this._maskService.maskExpression; + const decimalMarker = this._maskService.decimalMarker as string; + const suffix = this._maskService.suffix; const precision = Number( this._maskService.maskExpression.slice( maskExpression.length - 1, @@ -714,33 +684,29 @@ export class NgxMaskDirective implements ControlValueAccessor, OnChanges, Valida ); if (precision > 0) { - el.value = this._maskService.suffix - ? el.value.split(this._maskService.suffix).join('') - : el.value; - const decimalPart = el.value.split( - this._maskService.decimalMarker - )[1] as string; - - el.value = el.value.includes(this._maskService.decimalMarker) + el.value = suffix ? el.value.split(suffix).join('') : el.value; + const decimalPart = el.value.split(decimalMarker)[1] as string; + + el.value = el.value.includes(decimalMarker) ? el.value + MaskExpression.NUMBER_ZERO.repeat(precision - decimalPart.length) + - this._maskService.suffix + suffix : el.value + - this._maskService.decimalMarker + + decimalMarker + MaskExpression.NUMBER_ZERO.repeat(precision) + - this._maskService.suffix; + suffix; this._maskService.actualValue = el.value; } } this._maskService.clearIfNotMatchFn(); } - this._isFocused = false; + this._isFocused.set(false); this.onTouch(); } @HostListener('click', ['$event']) public onClick(e: MouseEvent | CustomKeyboardEvent): void { - if (!this._maskValue) { + if (!this._maskValue()) { return; } @@ -755,7 +721,7 @@ export class NgxMaskDirective implements ControlValueAccessor, OnChanges, Valida el.selectionStart > this._maskService.prefix.length && (e as any).keyCode !== 38 ) { - if (this._maskService.showMaskTyped && !this.keepCharacterPositions) { + if (this._maskService.showMaskTyped && !this.keepCharacterPositions()) { // We are showing the mask in the input this._maskService.maskIsShown = this._maskService.showMaskInInput(); if ( @@ -812,11 +778,11 @@ export class NgxMaskDirective implements ControlValueAccessor, OnChanges, Valida @HostListener('keydown', ['$event']) public onKeyDown(e: CustomKeyboardEvent): void { - if (!this._maskValue) { + if (!this._maskValue()) { return; } - if (this._isComposing) { + if (this._isComposing()) { // User finalize their choice from IME composition, so trigger onInput() for the composed text. if (e.key === 'Enter') { this.onCompositionEnd(e); @@ -824,9 +790,9 @@ export class NgxMaskDirective implements ControlValueAccessor, OnChanges, Valida return; } - this._code = e.code ? e.code : e.key; + this._code.set(e.code ? e.code : e.key); const el: HTMLInputElement = e.target as HTMLInputElement; - this._inputValue = el.value; + this._inputValue.set(el.value); this._setMask(); if (el.type !== 'number') { @@ -842,30 +808,29 @@ export class NgxMaskDirective implements ControlValueAccessor, OnChanges, Valida el.selectionStart = el.selectionEnd; } if (e.key === MaskExpression.BACKSPACE && (el.selectionStart as number) !== 0) { + const prefixLength = this.prefix().length; // If specialChars is false, (shouldn't ever happen) then set to the defaults - this.specialCharacters = this.specialCharacters?.length - ? this.specialCharacters + const specialCharacters = this.specialCharacters().length + ? this.specialCharacters() : this._config.specialCharacters; - if ( - this.prefix.length > 1 && - (el.selectionStart as number) <= this.prefix.length - ) { - el.setSelectionRange(this.prefix.length, el.selectionEnd); + + if (prefixLength > 1 && (el.selectionStart as number) <= prefixLength) { + el.setSelectionRange(prefixLength, el.selectionEnd); } else { if ( - this._inputValue.length !== (el.selectionStart as number) && + this._inputValue().length !== (el.selectionStart as number) && (el.selectionStart as number) !== 1 ) { while ( - this.specialCharacters.includes( + specialCharacters.includes( ( - this._inputValue[(el.selectionStart as number) - 1] ?? + this._inputValue()[(el.selectionStart as number) - 1] ?? MaskExpression.EMPTY_STRING ).toString() ) && - ((this.prefix.length >= 1 && - (el.selectionStart as number) > this.prefix.length) || - this.prefix.length === 0) + ((prefixLength >= 1 && + (el.selectionStart as number) > prefixLength) || + prefixLength === 0) ) { el.setSelectionRange( (el.selectionStart as number) - 1, @@ -891,22 +856,24 @@ export class NgxMaskDirective implements ControlValueAccessor, OnChanges, Valida el.selectionEnd === el.value.length && el.value.length !== 0 ) { - this._position = this._maskService.prefix ? this._maskService.prefix.length : 0; + this._position.set( + this._maskService.prefix ? this._maskService.prefix.length : 0 + ); this._maskService.applyMask( this._maskService.prefix, this._maskService.maskExpression, - this._position + this._position() as number ); } } if ( - !!this.suffix && - this.suffix.length > 1 && - this._inputValue.length - this.suffix.length < (el.selectionStart as number) + !!this.suffix() && + this.suffix().length > 1 && + this._inputValue().length - this.suffix().length < (el.selectionStart as number) ) { el.setSelectionRange( - this._inputValue.length - this.suffix.length, - this._inputValue.length + this._inputValue().length - this.suffix().length, + this._inputValue().length ); } else if ( (e.code === 'KeyA' && e.ctrlKey) || @@ -923,6 +890,7 @@ export class NgxMaskDirective implements ControlValueAccessor, OnChanges, Valida /** It writes the value in the input */ public async writeValue(controlValue: unknown): Promise { let value = controlValue; + const inputTransformFn = this.inputTransformFn(); if (typeof value === 'object' && value !== null && 'value' in value) { if ('disable' in value) { this.setDisabledState(Boolean(value.disable)); @@ -931,7 +899,7 @@ export class NgxMaskDirective implements ControlValueAccessor, OnChanges, Valida value = value.value; } if (value !== null) { - value = this.inputTransformFn ? this.inputTransformFn(value) : value; + value = inputTransformFn ? inputTransformFn(value) : value; } if ( typeof value === 'string' || @@ -940,14 +908,14 @@ export class NgxMaskDirective implements ControlValueAccessor, OnChanges, Valida typeof value === 'undefined' ) { if (value === null || typeof value === 'undefined' || value === '') { - this._maskService._currentValue = ''; - this._maskService._previousValue = ''; + this._maskService.currentValue = ''; + this._maskService.previousValue = ''; } let inputValue: string | number | null | undefined = value; if ( typeof inputValue === 'number' || - this._maskValue.startsWith(MaskExpression.SEPARATOR) + this._maskValue().startsWith(MaskExpression.SEPARATOR) ) { inputValue = String(inputValue); const localeDecimalMarker = this._maskService.currentLocaleDecimalMarker(); @@ -964,8 +932,8 @@ export class NgxMaskDirective implements ControlValueAccessor, OnChanges, Valida if ( this._maskService.leadZero && inputValue && - this.maskExpression && - this.dropSpecialCharacters !== false + this.mask() && + this.dropSpecialCharacters() !== false ) { inputValue = this._maskService._checkPrecision( this._maskService.maskExpression, @@ -982,7 +950,7 @@ export class NgxMaskDirective implements ControlValueAccessor, OnChanges, Valida .toString() .replace(MaskExpression.DOT, MaskExpression.COMMA); } - if (this.maskExpression?.startsWith(MaskExpression.SEPARATOR) && this.leadZero) { + if (this.mask()?.startsWith(MaskExpression.SEPARATOR) && this.leadZero()) { requestAnimationFrame(() => { this._maskService.applyMask( inputValue?.toString() ?? '', @@ -997,7 +965,7 @@ export class NgxMaskDirective implements ControlValueAccessor, OnChanges, Valida inputValue = ''; } - this._inputValue = inputValue; + this._inputValue.set(inputValue); this._setMask(); if ( @@ -1006,7 +974,7 @@ export class NgxMaskDirective implements ControlValueAccessor, OnChanges, Valida (this._maskService.prefix || this._maskService.showMaskTyped)) ) { // Let the service we know we are writing value so that triggering onChange function won't happen during applyMask - if (typeof this.inputTransformFn !== 'function') { + if (typeof inputTransformFn !== 'function') { this._maskService.writingValue = true; } @@ -1015,13 +983,13 @@ export class NgxMaskDirective implements ControlValueAccessor, OnChanges, Valida this._maskService.applyMask(inputValue, this._maskService.maskExpression), ]; // Let the service know we've finished writing value - if (typeof this.inputTransformFn !== 'function') { + if (typeof inputTransformFn !== 'function') { this._maskService.writingValue = false; } } else { this._maskService.formElementProperty = ['value', inputValue]; } - this._inputValue = inputValue; + this._inputValue.set(inputValue); } else { // eslint-disable-next-line no-console console.warn( @@ -1049,13 +1017,17 @@ export class NgxMaskDirective implements ControlValueAccessor, OnChanges, Valida } public checkSelectionOnDeletion(el: HTMLInputElement): void { + const prefixLength = this.prefix().length; + const suffixLength = this.suffix().length; + const inputValueLength = this._inputValue().length; + el.selectionStart = Math.min( - Math.max(this.prefix.length, el.selectionStart as number), - this._inputValue.length - this.suffix.length + Math.max(prefixLength, el.selectionStart as number), + inputValueLength - suffixLength ); el.selectionEnd = Math.min( - Math.max(this.prefix.length, el.selectionEnd as number), - this._inputValue.length - this.suffix.length + Math.max(prefixLength, el.selectionEnd as number), + inputValueLength - suffixLength ); } @@ -1066,16 +1038,16 @@ export class NgxMaskDirective implements ControlValueAccessor, OnChanges, Valida private _applyMask(): any { this._maskService.maskExpression = this._maskService._repeatPatternSymbols( - this._maskValue || '' + this._maskValue() || '' ); this._maskService.formElementProperty = [ 'value', - this._maskService.applyMask(this._inputValue, this._maskService.maskExpression), + this._maskService.applyMask(this._inputValue(), this._maskService.maskExpression), ]; } private _validateTime(value: string): ValidationErrors | null { - const rowMaskLen: number = this._maskValue + const rowMaskLen: number = this._maskValue() .split(MaskExpression.EMPTY_STRING) .filter((s: string) => s !== ':').length; if (!value) { @@ -1102,61 +1074,60 @@ export class NgxMaskDirective implements ControlValueAccessor, OnChanges, Valida private _createValidationError(actualValue: string): ValidationErrors { return { mask: { - requiredMask: this._maskValue, + requiredMask: this._maskValue(), actualValue, }, }; } private _setMask() { - this._maskExpressionArray.some((mask): boolean | void => { + this._maskExpressionArray().some((mask): boolean | void => { const specialChart: boolean = mask .split(MaskExpression.EMPTY_STRING) .some((char) => this._maskService.specialCharacters.includes(char)); - if ( (specialChart && - this._inputValue && - this._areAllCharactersInEachStringSame(this._maskExpressionArray)) || + this._inputValue() && + this._areAllCharactersInEachStringSame(this._maskExpressionArray())) || mask.includes(MaskExpression.CURLY_BRACKETS_LEFT) ) { const test = - this._maskService.removeMask(this._inputValue)?.length <= + this._maskService.removeMask(this._inputValue())?.length <= this._maskService.removeMask(mask)?.length; if (test) { - this._maskValue = - this.maskExpression = - this._maskService.maskExpression = - mask.includes(MaskExpression.CURLY_BRACKETS_LEFT) - ? this._maskService._repeatPatternSymbols(mask) - : mask; + const maskValue = mask.includes(MaskExpression.CURLY_BRACKETS_LEFT) + ? this._maskService._repeatPatternSymbols(mask) + : mask; + this._maskValue.set(maskValue); + this._maskService.maskExpression = maskValue; return test; } else { - if (this._code === MaskExpression.BACKSPACE) { - this._allowFewMaskChangeMask = true; + if (this._code() === MaskExpression.BACKSPACE) { + this._allowFewMaskChangeMask.set(true); } const expression = - this._maskExpressionArray[this._maskExpressionArray.length - 1] ?? + this._maskExpressionArray()[this._maskExpressionArray().length - 1] ?? MaskExpression.EMPTY_STRING; - this._maskValue = - this.maskExpression = - this._maskService.maskExpression = - expression.includes(MaskExpression.CURLY_BRACKETS_LEFT) - ? this._maskService._repeatPatternSymbols(expression) - : expression; + + const maskValue = expression.includes(MaskExpression.CURLY_BRACKETS_LEFT) + ? this._maskService._repeatPatternSymbols(expression) + : expression; + this._maskValue.set(maskValue); + this._maskService.maskExpression = maskValue; } } else { const check: boolean = this._maskService - .removeMask(this._inputValue) + .removeMask(this._inputValue()) ?.split(MaskExpression.EMPTY_STRING) .every((character, index) => { const indexMask = mask.charAt(index); return this._maskService._checkSymbolMask(character, indexMask); }); - if (check || this._justPasted) { - this._maskValue = this.maskExpression = this._maskService.maskExpression = mask; + if (check || this._justPasted()) { + this._maskValue.set(mask); + this._maskService.maskExpression = mask; return check; } } @@ -1165,6 +1136,7 @@ export class NgxMaskDirective implements ControlValueAccessor, OnChanges, Valida private _areAllCharactersInEachStringSame(array: string[]): boolean { const specialCharacters = this._maskService.specialCharacters; + function removeSpecialCharacters(str: string): string { const regex = new RegExp(`[${specialCharacters.map((ch) => `\\${ch}`).join('')}]`, 'g'); return str.replace(regex, ''); diff --git a/projects/ngx-mask-lib/src/lib/ngx-mask.pipe.ts b/projects/ngx-mask-lib/src/lib/ngx-mask.pipe.ts index 0e141dc5..010f3e59 100644 --- a/projects/ngx-mask-lib/src/lib/ngx-mask.pipe.ts +++ b/projects/ngx-mask-lib/src/lib/ngx-mask.pipe.ts @@ -1,5 +1,5 @@ import type { PipeTransform } from '@angular/core'; -import { inject, Pipe } from '@angular/core'; +import { inject, Pipe, signal } from '@angular/core'; import type { NgxMaskConfig } from './ngx-mask.config'; import { NGX_MASK_CONFIG } from './ngx-mask.config'; @@ -16,9 +16,8 @@ export class NgxMaskPipe implements PipeTransform { private readonly _maskService = inject(NgxMaskService); - private _maskExpressionArray: string[] = []; - - private mask = ''; + private _maskExpressionArray = signal([]); + private _mask = signal(''); public transform( value: string | number, @@ -44,14 +43,14 @@ export class NgxMaskPipe implements PipeTransform { if (mask.includes('||')) { const maskParts = mask.split('||'); if (maskParts.length > 1) { - this._maskExpressionArray = maskParts.sort( - (a: string, b: string) => a.length - b.length + this._maskExpressionArray.set( + maskParts.sort((a: string, b: string) => a.length - b.length) ); this._setMask(processedValue as string); - return this._maskService.applyMask(`${processedValue}`, this.mask); + return this._maskService.applyMask(`${processedValue}`, this._mask()); } else { - this._maskExpressionArray = []; - return this._maskService.applyMask(`${processedValue}`, this.mask); + this._maskExpressionArray.set([]); + return this._maskService.applyMask(`${processedValue}`, this._mask()); } } @@ -112,19 +111,19 @@ export class NgxMaskPipe implements PipeTransform { } private _setMask(value: string) { - if (this._maskExpressionArray.length > 0) { - this._maskExpressionArray.some((mask): boolean | void => { + if (this._maskExpressionArray().length > 0) { + this._maskExpressionArray().some((mask): boolean | void => { const test = this._maskService.removeMask(value)?.length <= this._maskService.removeMask(mask)?.length; if (value && test) { - this.mask = mask; + this._mask.set(mask); return test; } else { const expression = - this._maskExpressionArray[this._maskExpressionArray.length - 1] ?? + this._maskExpressionArray()[this._maskExpressionArray.length - 1] ?? MaskExpression.EMPTY_STRING; - this.mask = expression; + this._mask.set(expression); } }); } diff --git a/projects/ngx-mask-lib/src/lib/ngx-mask.service.ts b/projects/ngx-mask-lib/src/lib/ngx-mask.service.ts index 2dcad3cf..307e8d49 100644 --- a/projects/ngx-mask-lib/src/lib/ngx-mask.service.ts +++ b/projects/ngx-mask-lib/src/lib/ngx-mask.service.ts @@ -9,32 +9,22 @@ import { MaskExpression } from './ngx-mask-expression.enum'; @Injectable() export class NgxMaskService extends NgxMaskApplierService { public isNumberValue = false; - public maskIsShown = ''; - public selStart: number | null = null; - public selEnd: number | null = null; - + public maskChanged = false; + public maskExpressionArray: string[] = []; + public triggerOnMaskChange = false; + public previousValue = ''; + public currentValue = ''; /** * Whether we are currently in writeValue function, in this case when applying the mask we don't want to trigger onChange function, * since writeValue should be a one way only process of writing the DOM value based on the Angular model value. */ public writingValue = false; - public maskChanged = false; - public _maskExpressionArray: string[] = []; - - public triggerOnMaskChange = false; - - public _previousValue = ''; - - public _currentValue = ''; - private _emitValue = false; - private _start!: number; - private _end!: number; // eslint-disable-next-line @typescript-eslint/no-empty-function @@ -123,7 +113,7 @@ export class NgxMaskService extends NgxMaskApplierService { this.showMaskTyped && !this.prefix ) { - newInputValue = this._currentValue; + newInputValue = this.currentValue; } if (this.deletedSpecialCharacter && newPosition) { if ( @@ -201,13 +191,13 @@ export class NgxMaskService extends NgxMaskApplierService { } if (result || result === '') { - this._previousValue = this._currentValue; - this._currentValue = result; + this.previousValue = this.currentValue; + this.currentValue = result; this._emitValue = - this._previousValue !== this._currentValue || + this.previousValue !== this.currentValue || this.maskChanged || this.writingValue || - (this._previousValue === this._currentValue && justPasted); + (this.previousValue === this.currentValue && justPasted); } // eslint-disable-next-line no-unused-expressions,@typescript-eslint/no-unused-expressions diff --git a/projects/ngx-mask-lib/src/test/add-prefix.spec.ts b/projects/ngx-mask-lib/src/test/add-prefix.spec.ts index 21b198c2..6a277d6f 100644 --- a/projects/ngx-mask-lib/src/test/add-prefix.spec.ts +++ b/projects/ngx-mask-lib/src/test/add-prefix.spec.ts @@ -3,8 +3,7 @@ import { TestBed } from '@angular/core/testing'; import { ReactiveFormsModule } from '@angular/forms'; import { TestMaskComponent } from './utils/test-component.component'; import { equal } from './utils/test-functions.component'; -import { provideNgxMask } from '../lib/ngx-mask.providers'; -import { NgxMaskDirective } from '../lib/ngx-mask.directive'; +import { NgxMaskDirective, provideNgxMask } from 'ngx-mask'; describe('Directive: Mask (Add prefix)', () => { let fixture: ComponentFixture; @@ -21,13 +20,13 @@ describe('Directive: Mask (Add prefix)', () => { }); it('should have a prefix', () => { - component.mask = '00-000-000-00'; - component.prefix = '+7 '; + component.mask.set('00-000-000-00'); + component.prefix.set('+7 '); equal('6', '+7 6', fixture); - component.mask = '(00) 0000-0000||(00) 0 0000-0000'; - component.prefix = '+55 '; - component.showMaskTyped = true; + component.mask.set('(00) 0000-0000||(00) 0 0000-0000'); + component.prefix.set('+55 '); + component.showMaskTyped.set(true); equal('1', '+55 (1_) ____-____', fixture); equal('12', '+55 (12) ____-____', fixture); equal('123', '+55 (12) 3___-____', fixture); @@ -53,23 +52,23 @@ describe('Directive: Mask (Add prefix)', () => { equal('+55 (12) 3 4567-8901', '+55 (12) 3 4567-8901', fixture); }); it('dropSpecialCharacters false should return value with prefix', () => { - component.mask = '00-000-000-00'; - component.dropSpecialCharacters = false; - component.prefix = '+7 '; + component.mask.set('00-000-000-00'); + component.dropSpecialCharacters.set(false); + component.prefix.set('+7 '); equal('097', '+7 09-7', fixture); expect(component.form.value).toEqual('+7 09-7'); }); it('dropSpecialCharacters false should return value with suffix', () => { - component.mask = '00'; - component.dropSpecialCharacters = false; - component.suffix = '$'; + component.mask.set('00'); + component.dropSpecialCharacters.set(false); + component.suffix.set('$'); equal('97', '97$', fixture); expect(component.form.value).toEqual('97$'); }); it('should delete prefix in pasted content', () => { - component.mask = 'AAA-AAA-AAA'; - component.prefix = 'FOO-'; + component.mask.set('AAA-AAA-AAA'); + component.prefix.set('FOO-'); equal('FOO-D', 'FOO-D', fixture); equal('FOO-DD', 'FOO-DD', fixture); equal('FOO-DDD', 'FOO-DDD', fixture); @@ -83,9 +82,9 @@ describe('Directive: Mask (Add prefix)', () => { }); it('should delete prefix in pasted content', () => { - component.mask = 'AAA-AAA-AAA'; - component.prefix = 'FOO-'; - component.dropSpecialCharacters = false; + component.mask.set('AAA-AAA-AAA'); + component.prefix.set('FOO-'); + component.dropSpecialCharacters.set(false); equal('FOO-S', 'FOO-S', fixture); equal('FOO-SS', 'FOO-SS', fixture); equal('FOO-SSS', 'FOO-SSS', fixture); @@ -99,9 +98,9 @@ describe('Directive: Mask (Add prefix)', () => { }); it('should replace $ with minus', () => { - component.mask = '0000.00'; - component.prefix = '$'; - component.allowNegativeNumbers = true; + component.mask.set('0000.00'); + component.prefix.set('$'); + component.allowNegativeNumbers.set(true); equal('-1', '-$1', fixture); equal('-12', '-$12', fixture); equal('-123', '-$123', fixture); @@ -111,9 +110,9 @@ describe('Directive: Mask (Add prefix)', () => { }); it('should replace euro with minus', () => { - component.mask = '0000.00'; - component.prefix = '€'; - component.allowNegativeNumbers = true; + component.mask.set('0000.00'); + component.prefix.set('€'); + component.allowNegativeNumbers.set(true); equal('-1', '-€1', fixture); equal('-12', '-€12', fixture); equal('-123', '-€123', fixture); @@ -123,20 +122,20 @@ describe('Directive: Mask (Add prefix)', () => { }); it('should remove prefix when setValue triggerOnMaskChange = true', () => { - component.mask = '000 000'; - component.prefix = 'KZ'; - component.dropSpecialCharacters = true; - component.triggerOnMaskChange = true; + component.mask.set('000 000'); + component.prefix.set('KZ'); + component.dropSpecialCharacters.set(true); + component.triggerOnMaskChange.set(true); component.form.setValue('KZ123123'); equal('KZ123123', 'KZ123 123', fixture); expect(component.form.value).toBe('123123'); }); it('should remove prefix when setValue triggerOnMaskChange =true', () => { - component.mask = '000 000'; - component.prefix = 'KZ'; - component.dropSpecialCharacters = false; - component.triggerOnMaskChange = true; + component.mask.set('000 000'); + component.prefix.set('KZ'); + component.dropSpecialCharacters.set(false); + component.triggerOnMaskChange.set(true); component.form.setValue('KZ123123'); equal('KZ123123', 'KZ123 123', fixture); @@ -144,18 +143,18 @@ describe('Directive: Mask (Add prefix)', () => { }); it('should remove prefix when setValue triggerOnMaskChange = false', () => { - component.mask = '000 000'; - component.prefix = 'KZ'; - component.dropSpecialCharacters = true; + component.mask.set('000 000'); + component.prefix.set('KZ'); + component.dropSpecialCharacters.set(true); component.form.setValue('KZ123123'); equal('KZ123123', 'KZ123 123', fixture); expect(component.form.value).toBe('KZ123123'); }); it('should remove prefix when setValue triggerOnMaskChange = false', () => { - component.mask = '000 000'; - component.prefix = 'KZ'; - component.dropSpecialCharacters = false; + component.mask.set('000 000'); + component.prefix.set('KZ'); + component.dropSpecialCharacters.set(false); component.form.setValue('KZ123123'); equal('KZ123123', 'KZ123 123', fixture); expect(component.form.value).toBe('KZ123123'); diff --git a/projects/ngx-mask-lib/src/test/add-suffix.spec.ts b/projects/ngx-mask-lib/src/test/add-suffix.spec.ts index 1a3095b9..26b32891 100644 --- a/projects/ngx-mask-lib/src/test/add-suffix.spec.ts +++ b/projects/ngx-mask-lib/src/test/add-suffix.spec.ts @@ -4,8 +4,7 @@ import { ReactiveFormsModule } from '@angular/forms'; import { TestMaskComponent } from './utils/test-component.component'; import { equal } from './utils/test-functions.component'; -import { provideNgxMask } from '../lib/ngx-mask.providers'; -import { NgxMaskDirective } from '../lib/ngx-mask.directive'; +import { NgxMaskDirective, provideNgxMask } from 'ngx-mask'; describe('Directive: Mask (Add suffix)', () => { let fixture: ComponentFixture; @@ -22,27 +21,27 @@ describe('Directive: Mask (Add suffix)', () => { }); it('should have a suffix', () => { - component.mask = '00-000-000-00'; - component.suffix = '$'; + component.mask.set('00-000-000-00'); + component.suffix.set('$'); equal('6', '6$', fixture); }); it('should have a suffix if first letter entered is y', () => { - component.mask = 'L{80}'; - component.suffix = '.sh'; + component.mask.set('L{80}'); + component.suffix.set('.sh'); equal('y', 'y.sh', fixture); }); it('should have a suffix if the first character entered same as the last letter of the suffix', () => { - component.mask = 'L{80}'; - component.suffix = '.sh'; + component.mask.set('L{80}'); + component.suffix.set('.sh'); equal('h', 'h.sh', fixture); }); it('should display suffix at the end with showMaskTyped mask 0 000', () => { - component.mask = '0 000'; - component.suffix = '$'; - component.showMaskTyped = true; + component.mask.set('0 000'); + component.suffix.set('$'); + component.showMaskTyped.set(true); equal('1', '1 ___$', fixture); equal('12', '1 2__$', fixture); equal('123', '1 23_$', fixture); diff --git a/projects/ngx-mask-lib/src/test/allow-negative-numbers.spec.ts b/projects/ngx-mask-lib/src/test/allow-negative-numbers.spec.ts index 335845e6..5eb8bf00 100644 --- a/projects/ngx-mask-lib/src/test/allow-negative-numbers.spec.ts +++ b/projects/ngx-mask-lib/src/test/allow-negative-numbers.spec.ts @@ -4,8 +4,7 @@ import { ReactiveFormsModule } from '@angular/forms'; import { TestMaskComponent } from './utils/test-component.component'; import { equal } from './utils/test-functions.component'; -import { provideNgxMask } from '../lib/ngx-mask.providers'; -import { NgxMaskDirective } from '../lib/ngx-mask.directive'; +import { NgxMaskDirective, provideNgxMask } from 'ngx-mask'; describe('Directive: Mask (Allow negative numbers)', () => { let fixture: ComponentFixture; @@ -22,10 +21,10 @@ describe('Directive: Mask (Allow negative numbers)', () => { }); it('FormControl or NgModel should not allow negative numbers (default functionality)', () => { - component.mask = 'separator.2'; - component.thousandSeparator = ','; - component.allowNegativeNumbers = false; - component.dropSpecialCharacters = true; + component.mask.set('separator.2'); + component.thousandSeparator.set(','); + component.allowNegativeNumbers.set(false); + component.dropSpecialCharacters.set(true); equal('-10,000.00', '10,000.00', fixture); expect(component.form.value).toBe('10000.00'); @@ -36,10 +35,10 @@ describe('Directive: Mask (Allow negative numbers)', () => { }); it('FormControl and NgModel should be filled with negative values', () => { - component.mask = 'separator.2'; - component.thousandSeparator = ','; - component.allowNegativeNumbers = true; - component.dropSpecialCharacters = true; + component.mask.set('separator.2'); + component.thousandSeparator.set(','); + component.allowNegativeNumbers.set(true); + component.dropSpecialCharacters.set(true); component.form.setValue(-123456); equal('-123456.00', '-123,456.00', fixture); @@ -47,16 +46,16 @@ describe('Directive: Mask (Allow negative numbers)', () => { }); it('allowNegativeNumber to mask', () => { - component.mask = '000.00'; - component.allowNegativeNumbers = true; + component.mask.set('000.00'); + component.allowNegativeNumbers.set(true); equal('-123.00', '-123.00', fixture); equal('-311.9', '-311.9', fixture); equal('-311', '-311', fixture); equal('123.00', '123.00', fixture); - component.mask = '0000'; - component.allowNegativeNumbers = true; + component.mask.set('0000'); + component.allowNegativeNumbers.set(true); equal('-1230', '-1230', fixture); equal('-3119', '-3119', fixture); @@ -67,16 +66,16 @@ describe('Directive: Mask (Allow negative numbers)', () => { }); it('allowNegativeNumber to percent', () => { - component.mask = 'percent'; - component.allowNegativeNumbers = true; + component.mask.set('percent'); + component.allowNegativeNumbers.set(true); equal('-101', '-10', fixture); equal('-100', '-100', fixture); equal('-999', '-99', fixture); equal('-20', '-20', fixture); - component.mask = 'percent.2'; - component.allowNegativeNumbers = true; + component.mask.set('percent.2'); + component.allowNegativeNumbers.set(true); equal('-100.00', '-100.00', fixture); equal('-100.02', '-100.0', fixture); @@ -85,8 +84,8 @@ describe('Directive: Mask (Allow negative numbers)', () => { equal('-11.11', '-11.11', fixture); equal('-12.30', '-12.30', fixture); - component.mask = 'percent.3'; - component.allowNegativeNumbers = true; + component.mask.set('percent.3'); + component.allowNegativeNumbers.set(true); equal('-100.000', '-100.000', fixture); equal('-99.001', '-99.001', fixture); @@ -97,16 +96,16 @@ describe('Directive: Mask (Allow negative numbers)', () => { }); it('allowNegativeNumber to separator', () => { - component.mask = 'separator'; - component.allowNegativeNumbers = true; + component.mask.set('separator'); + component.allowNegativeNumbers.set(true); equal('-101', '-101', fixture); equal('-100', '-100', fixture); equal('-999', '-999', fixture); equal('-3000', '-3 000', fixture); - component.mask = 'separator.2'; - component.allowNegativeNumbers = true; + component.mask.set('separator.2'); + component.allowNegativeNumbers.set(true); equal('-100.00', '-100.00', fixture); equal('-100.02', '-100.02', fixture); @@ -115,8 +114,8 @@ describe('Directive: Mask (Allow negative numbers)', () => { equal('-91.11', '-91.11', fixture); equal('-1112.30', '-1 112.30', fixture); - component.mask = 'separator.3'; - component.allowNegativeNumbers = true; + component.mask.set('separator.3'); + component.allowNegativeNumbers.set(true); equal('-100.000', '-100.000', fixture); equal('-99.001', '-99.001', fixture); diff --git a/projects/ngx-mask-lib/src/test/basic-logic.spec.ts b/projects/ngx-mask-lib/src/test/basic-logic.spec.ts index 667d8f3c..b916c348 100644 --- a/projects/ngx-mask-lib/src/test/basic-logic.spec.ts +++ b/projects/ngx-mask-lib/src/test/basic-logic.spec.ts @@ -6,8 +6,7 @@ import { ReactiveFormsModule } from '@angular/forms'; import { TestMaskComponent } from './utils/test-component.component'; import { equal, typeTest } from './utils/test-functions.component'; -import { NgxMaskDirective } from '../lib/ngx-mask.directive'; -import { provideNgxMask } from '../lib/ngx-mask.providers'; +import { provideNgxMask, NgxMaskDirective } from 'ngx-mask'; describe('Directive: Mask', () => { let fixture: ComponentFixture; @@ -24,7 +23,7 @@ describe('Directive: Mask', () => { }); it('Pristine and dirty', () => { - component.mask = '0000.0000'; + component.mask.set('0000.0000'); expect(component.form.dirty).toBeFalsy(); expect(component.form.pristine).toBeTruthy(); equal('1.', '1', fixture); @@ -38,19 +37,19 @@ describe('Directive: Mask', () => { }); it('When I change the mask on-the-fly things should work normally', () => { - component.mask = '0000.0000'; + component.mask.set('0000.0000'); equal('1.', '1', fixture); equal('1éáa2aaaaqwo', '12', fixture); equal('1234567', '1234.567', fixture); - component.mask = '0.000.000'; + component.mask.set('0.000.000'); equal('1.', '1.', fixture); equal('1éáa2aaaaqwo', '1.2', fixture); equal('1234567', '1.234.567', fixture); }); it('More tests', () => { - component.mask = '0.00'; + component.mask.set('0.00'); equal('1', '1', fixture); equal('12', '1.2', fixture); equal('123', '1.23', fixture); @@ -60,7 +59,7 @@ describe('Directive: Mask', () => { equal('1234567', '1.23', fixture); equal('12345678', '1.23', fixture); - component.mask = '0000.0000'; + component.mask.set('0000.0000'); equal('1', '1', fixture); equal('12', '12', fixture); equal('123', '123', fixture); @@ -72,7 +71,7 @@ describe('Directive: Mask', () => { }); it('When I typed a char thats the same as the mask char', () => { - component.mask = '00/00/0000'; + component.mask.set('00/00/0000'); equal('00/', '00/', fixture); equal('00a', '00/', fixture); equal('00a00/00', '00/00/00', fixture); @@ -81,7 +80,7 @@ describe('Directive: Mask', () => { }); it('When I typed exactly the same as the mask', () => { - component.mask = '00/00/0000'; + component.mask.set('00/00/0000'); equal('00', '00', fixture); equal('00/', '00/', fixture); equal('aa/', '', fixture); @@ -92,12 +91,12 @@ describe('Directive: Mask', () => { }); it('Testing masks with a literal on the last char', () => { - component.mask = '(99)'; + component.mask.set('(99)'); equal('99', '(99)', fixture); }); it('Masks with numbers and special characters.', () => { - component.mask = '(000) 000-0000'; + component.mask.set('(000) 000-0000'); equal('1', '(1', fixture); equal('12', '(12', fixture); equal('123', '(123', fixture); @@ -108,7 +107,7 @@ describe('Directive: Mask', () => { }); it('Masks with numbers, strings e special characters', () => { - component.mask = '(099) A99-SSSS'; + component.mask.set('(099) A99-SSSS'); equal('as', '(', fixture); equal('(1', '(1', fixture); equal('(12', '(12', fixture); @@ -127,14 +126,14 @@ describe('Directive: Mask', () => { }); describe('Masks with ip', () => { it('should correct', () => { - component.mask = 'IP'; + component.mask.set('IP'); equal('1.1.1.1', '1.1.1.1', fixture); equal('12.1.12.1', '12.1.12.1', fixture); equal('127.001.1.1', '127.001.1.1', fixture); equal('192.168.1.78', '192.168.1.78', fixture); }); it('form should be invalid', () => { - component.mask = 'IP'; + component.mask.set('IP'); equal('192.168.1.78', '192.168.1.78', fixture); expect(component.form.valid).toBeTrue(); equal('127.001.1.1', '127.001.1.1', fixture); @@ -145,7 +144,7 @@ describe('Directive: Mask', () => { expect(component.form.valid).toBeTrue(); }); it('form should be valid', () => { - component.mask = 'IP'; + component.mask.set('IP'); equal('1.1.1.', '1.1.1.', fixture); expect(component.form.valid).toBeFalse(); equal('12.1.12', '12.1.12', fixture); @@ -168,7 +167,7 @@ describe('Directive: Mask', () => { }); it('Masks with cpf', () => { - component.mask = '000.000.000-00'; + component.mask.set('000.000.000-00'); equal('', '', fixture); equal('1', '1', fixture); equal('12', '12', fixture); @@ -192,7 +191,7 @@ describe('Directive: Mask', () => { }); it('Masks with cnpj', () => { - component.mask = '00.000.000/0000-00'; + component.mask.set('00.000.000/0000-00'); equal('', '', fixture); equal('1', '1', fixture); equal('12', '12', fixture); @@ -223,7 +222,7 @@ describe('Directive: Mask', () => { }); it('Masks with CPF_CNPJ', () => { - component.mask = 'CPF_CNPJ'; + component.mask.set('CPF_CNPJ'); equal('', '', fixture); equal('1', '1', fixture); equal('12', '12', fixture); @@ -253,7 +252,7 @@ describe('Directive: Mask', () => { }); it('Dynamic Masks CPF_CNPJ', () => { - component.mask = '000.000.000-00||00.000.000/0000-00'; + component.mask.set('000.000.000-00||00.000.000/0000-00'); equal('', '', fixture); equal('1', '1', fixture); equal('12', '12', fixture); @@ -283,7 +282,7 @@ describe('Directive: Mask', () => { }); it('Dynamic Masks PHONE_BR', () => { - component.mask = '(00) 0000-0000||(00) 0 0000-0000'; + component.mask.set('(00) 0000-0000||(00) 0 0000-0000'); equal('', '', fixture); equal('1', '(1', fixture); equal('12', '(12', fixture); @@ -313,7 +312,7 @@ describe('Directive: Mask', () => { }); it('Mask with optional numbers and 2 decimals', () => { - component.mask = '9999.00'; + component.mask.set('9999.00'); equal('.', '.', fixture); equal('1.23', '1.23', fixture); equal('.23', '.23', fixture); @@ -326,7 +325,7 @@ describe('Directive: Mask', () => { }); it('Masks with numbers, strings e special characters #2 ', () => { - component.mask = 'AAA 000-S0S'; + component.mask.set('AAA 000-S0S'); equal('1', '1', fixture); equal('12', '12', fixture); equal('123', '123', fixture); @@ -337,21 +336,21 @@ describe('Directive: Mask', () => { }); it('should strip special characters from form control value', () => { - component.mask = '00/00/0000'; + component.mask.set('00/00/0000'); typeTest('30/08/19921', fixture); expect(component.form.value).toBe('30081992'); }); it('model values shouldnt be bigger length than masks', () => { - component.mask = '00-00-00'; - component.dropSpecialCharacters = false; + component.mask.set('00-00-00'); + component.dropSpecialCharacters.set(false); equal('2578989', '25-78-98', fixture); expect(component.form.value).toBe('25-78-98'); }); it('should work with custom special characters', () => { - component.mask = '[000]-[000]*[00]'; - component.specialCharacters = ['[', ']', '-', '*']; + component.mask.set('[000]-[000]*[00]'); + component.specialCharacters.set(['[', ']', '-', '*']); equal('', '', fixture); equal('2578989', '[257]-[898]*[9', fixture); equal('2578989888988', '[257]-[898]*[98]', fixture); @@ -359,56 +358,56 @@ describe('Directive: Mask', () => { }); it('should work with custom patterns', () => { - component.mask = '[000]-[000]*[00]'; - component.specialCharacters = ['[', ']', '-', '*']; - component.patterns = { + component.mask.set('[000]-[000]*[00]'); + component.specialCharacters.set(['[', ']', '-', '*']); + component.patterns.set({ '0': { pattern: new RegExp('[a-zA-Z]'), }, - }; + }); equal('', '', fixture); equal('2578989', '[', fixture); equal('hello world', '[hel]-[low]*[or]', fixture); equal('111.111-11', '[', fixture); - component.mask = '(000-000)'; - component.specialCharacters = ['(', '-', ')']; + component.mask.set('(000-000)'); + component.specialCharacters.set(['(', '-', ')']); equal('323HelloWorld', '(Hel-loW)', fixture); - component.mask = '[00]*[000]'; - component.specialCharacters = ['[', ']', '*']; - component.patterns = { + component.mask.set('[00]*[000]'); + component.specialCharacters.set(['[', ']', '*']); + component.patterns.set({ '0': { pattern: new RegExp('\\d'), }, - }; + }); equal('789-874.98', '[78]*[987]', fixture); }); it('When I change the mask on-the-fly things should work normally', () => { - component.mask = '0000.0000'; + component.mask.set('0000.0000'); equal('1.', '1', fixture); equal('1éáa2aaaaqwo', '12', fixture); equal('1234567', '1234.567', fixture); - component.mask = '0.000.000'; + component.mask.set('0.000.000'); equal('1.', '1.', fixture); equal('1éáa2aaaaqwo', '1.2', fixture); equal('1234567', '1.234.567', fixture); - component.mask = ''; + component.mask.set(''); equal('1.', '1.', fixture); equal('1éáa2aaaaqwo', '1éáa2aaaaqwo', fixture); equal('1234567', '1234567', fixture); - component.mask = '0000.0000'; + component.mask.set('0000.0000'); equal('1.', '1', fixture); equal('1éáa2aaaaqwo', '12', fixture); equal('1234567', '1234.567', fixture); }); it('should work even has no mask', () => { - component.mask = ''; + component.mask.set(''); equal('1234567', '1234567', fixture); @@ -416,22 +415,22 @@ describe('Directive: Mask', () => { }); it('should be a UA phone', () => { - component.mask = '000-00-00-00-000'; + component.mask.set('000-00-00-00-000'); equal('380975577234', '380-97-55-77-234', fixture); }); it('should be a pasport number', () => { - component.mask = 'AA 000000'; + component.mask.set('AA 000000'); equal('GH 234098', 'GH 234098', fixture); }); it('should be bank card number', () => { - component.mask = '0000-0000-0000-0000'; + component.mask.set('0000-0000-0000-0000'); equal('1234567890123456', '1234-5678-9012-3456', fixture); }); it('should apply mask on backspace for non readonly inputs when all text is selected', () => { - component.mask = 'AAAAAA'; + component.mask.set('AAAAAA'); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; spyOnProperty(document, 'activeElement').and.returnValue(inputTarget); @@ -455,7 +454,7 @@ describe('Directive: Mask', () => { }); it('should not apply mask on backspace for readonly inputs when all text is selected', () => { - component.mask = 'AAAAAA'; + component.mask.set('AAAAAA'); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; spyOnProperty(document, 'activeElement').and.returnValue(inputTarget); @@ -478,7 +477,7 @@ describe('Directive: Mask', () => { }); it('should right work with {value, disable}', () => { - component.mask = '000'; + component.mask.set('000'); fixture.detectChanges(); component.form.setValue({ value: 123, @@ -492,7 +491,7 @@ describe('Directive: Mask', () => { }); it('should return empty string if input consist only special symbols', () => { - component.mask = '(000) 000-00-00'; + component.mask.set('(000) 000-00-00'); fixture.detectChanges(); equal('0', '(0', fixture); equal('(', '(', fixture); @@ -507,17 +506,17 @@ describe('Directive: Mask', () => { }); it('should remove ghost character on toggling mask', () => { - component.mask = '0000'; - component.triggerOnMaskChange = true; + component.mask.set('0000'); + component.triggerOnMaskChange.set(true); component.form.setValue('1111a'); equal('1111a', '1111', fixture); expect(component.form.value).toBe('1111'); - component.mask = null; + component.mask.set(null); expect(component.form.value).toBe('1111'); }); it('Masks with letters uppercase', () => { - component.mask = 'UUUU'; + component.mask.set('UUUU'); fixture.detectChanges(); equal('A', 'A', fixture); equal('AB', 'AB', fixture); @@ -526,7 +525,7 @@ describe('Directive: Mask', () => { }); it('Masks with letters lowercase', () => { - component.mask = 'LLLL'; + component.mask.set('LLLL'); fixture.detectChanges(); equal('a', 'a', fixture); equal('ab', 'ab', fixture); @@ -534,14 +533,14 @@ describe('Directive: Mask', () => { equal('abcd', 'abcd', fixture); }); it('0.0000004 after writeValue should be 0.0000004', () => { - component.mask = 'separator.7'; + component.mask.set('separator.7'); fixture.detectChanges(); component.form.setValue(0.0000004); equal('0.0000004', '0.0000004', fixture); expect(component.form.value).toBe(0.0000004); }); it('mask 0000 0000 0000 9999 9999', () => { - component.mask = '0000 0000 0000 9999 9999'; + component.mask.set('0000 0000 0000 9999 9999'); equal('1', '1', fixture); equal('12', '12', fixture); equal('123', '123', fixture); @@ -565,7 +564,7 @@ describe('Directive: Mask', () => { equal('1234 5678 9012 3456', '1234 5678 9012 3456', fixture); }); it('mask SS00 AAAA 0000 0000 0000 0000 9999 9999 99', () => { - component.mask = 'SS00 AAAA 0000 0000 0000 0000 9999 9999 99'; + component.mask.set('SS00 AAAA 0000 0000 0000 0000 9999 9999 99'); equal( 'FR12345678901234567890123456789012', 'FR12 3456 7890 1234 5678 9012 3456 7890 12', @@ -579,7 +578,7 @@ describe('Directive: Mask', () => { }); it('Mask with optional parameter', () => { - component.mask = '9999 999 999'; + component.mask.set('9999 999 999'); equal('3', '3', fixture); equal('12', '12', fixture); equal('123', '123', fixture); @@ -593,7 +592,7 @@ describe('Directive: Mask', () => { }); it('Mask 099.09', () => { - component.mask = '099.09'; + component.mask.set('099.09'); equal('1.23', '1.23', fixture); equal('1', '1', fixture); equal('12', '12', fixture); @@ -607,7 +606,7 @@ describe('Directive: Mask', () => { }); it('Mask 09/09/0099', () => { - component.mask = '09/09/0099'; + component.mask.set('09/09/0099'); equal('1123', '11/23', fixture); equal('1/2', '1/2', fixture); equal('12/2/2020', '12/2/2020', fixture); @@ -621,16 +620,16 @@ describe('Directive: Mask', () => { }); it('Mask 099.00099999999999', () => { - component.mask = '099.00099999999999'; + component.mask.set('099.00099999999999'); equal('1.2222222', '1.2222222', fixture); equal('111111111111', '111.111111111', fixture); equal('11.11111111111', '11.11111111111', fixture); }); it('dropSpecialCharacter should return prefix or delete it value', () => { - component.mask = '0000'; - component.prefix = 'foo/'; - component.dropSpecialCharacters = false; + component.mask.set('0000'); + component.prefix.set('foo/'); + component.dropSpecialCharacters.set(false); equal('2574', 'foo/2574', fixture); expect(component.form.value).toBe('foo/2574'); expect(component.form.valid).toBeTruthy(); @@ -652,8 +651,8 @@ describe('Directive: Mask', () => { }); it('Should be not valid if length of input doesnt match mask', () => { - component.mask = '000 000-00-00'; - component.prefix = '+7 '; + component.mask.set('000 000-00-00'); + component.prefix.set('+7 '); equal('2', '+7 2', fixture); expect(component.form.value).toBe('2'); expect(component.form.valid).toBeFalse(); @@ -695,14 +694,14 @@ describe('Directive: Mask', () => { }); it('Mask 0/9', () => { - component.mask = '0/9'; + component.mask.set('0/9'); equal('1', '1', fixture); equal('1/', '1/', fixture); equal('1/2', '1/2', fixture); }); it('Mask 9*/0*', () => { - component.mask = '9*/0*'; + component.mask.set('9*/0*'); equal('1', '1', fixture); equal('1/', '1/', fixture); equal('1/2', '1/2', fixture); @@ -714,26 +713,26 @@ describe('Directive: Mask', () => { }); it('Mask 9000/0000', () => { - component.mask = '0009/0000'; + component.mask.set('0009/0000'); equal('111/1111', '111/1111', fixture); equal('1111/1111', '1111/1111', fixture); }); it('Mask 00009-0000', () => { - component.mask = '00009-0000'; + component.mask.set('00009-0000'); equal('0000-0000', '0000-0000', fixture); equal('12345-6789', '12345-6789', fixture); }); it('Mask 099L', () => { - component.mask = '099L'; + component.mask.set('099L'); equal('1d', '1d', fixture); equal('22r', '22r', fixture); equal('223r', '223r', fixture); }); it('Mask 09999/099L', () => { - component.mask = '09999/099L'; + component.mask.set('09999/099L'); equal('1/2d', '1/2d', fixture); equal('12/2d', '12/2d', fixture); equal('123/2d', '123/2d', fixture); @@ -744,7 +743,7 @@ describe('Directive: Mask', () => { }); it('Mask 099SS', () => { - component.mask = '099SS'; + component.mask.set('099SS'); equal('1d', '1d', fixture); equal('1dD', '1dD', fixture); equal('11d', '11d', fixture); @@ -753,7 +752,7 @@ describe('Directive: Mask', () => { }); it('Mask 999999-0009999999/0000', () => { - component.mask = '999999-0009999999/0000'; + component.mask.set('999999-0009999999/0000'); equal('1-123/1234', '1-123/1234', fixture); equal('12-123/1234', '12-123/1234', fixture); equal('123-123/1234', '123-123/1234', fixture); @@ -770,14 +769,14 @@ describe('Directive: Mask', () => { }); it('setValue undefined should return null', () => { - component.mask = '0000'; + component.mask.set('0000'); equal('1234', '1234', fixture); component.form.setValue(null); expect(component.form.value).toBe(null); }); it('after resetValue should show in model same value', () => { - component.mask = '0'; + component.mask.set('0'); equal('1', '1', fixture); component.form.reset(); equal('1', '1', fixture); @@ -785,7 +784,7 @@ describe('Directive: Mask', () => { }); it('after resetValue should show in model same value', () => { - component.mask = '9'; + component.mask.set('9'); equal('2', '2', fixture); component.form.reset(); equal('2', '2', fixture); @@ -793,7 +792,7 @@ describe('Directive: Mask', () => { }); it('should work with optional mask 09.09', () => { - component.mask = '09.09'; + component.mask.set('09.09'); equal('2', '2', fixture); equal('2.3', '2.3', fixture); equal('2.34', '2.34', fixture); @@ -803,7 +802,7 @@ describe('Directive: Mask', () => { }); it('should work change value after setValue to empty string mask 9', () => { - component.mask = '9'; + component.mask.set('9'); equal('2', '2', fixture); component.form.setValue(''); equal('2', '2', fixture); @@ -811,7 +810,7 @@ describe('Directive: Mask', () => { }); it('should work change value after setValue to empty string mask 0', () => { - component.mask = '0'; + component.mask.set('0'); equal('4', '4', fixture); component.form.setValue(''); equal('4', '4', fixture); @@ -819,7 +818,7 @@ describe('Directive: Mask', () => { }); it('should return empty string if first character not same in mask (000) 000-0000', () => { - component.mask = '(000) 000-0000'; + component.mask.set('(000) 000-0000'); equal('', '', fixture); equal('@', '', fixture); @@ -835,8 +834,8 @@ describe('Directive: Mask', () => { }); it('should return empty string if first character not same in mask (000) 000-0000 with prefix', () => { - component.mask = '(000) 000-0000'; - component.prefix = '+7'; + component.mask.set('(000) 000-0000'); + component.prefix.set('+7'); equal('', '', fixture); equal('@', '', fixture); equal('!', '', fixture); @@ -851,8 +850,8 @@ describe('Directive: Mask', () => { }); it('should return empty string if first character not same in mask (000) 000-0000 with suffix', () => { - component.mask = '(000) 000-0000'; - component.prefix = '+7'; + component.mask.set('(000) 000-0000'); + component.prefix.set('+7'); equal('', '', fixture); equal('@', '', fixture); equal('!', '', fixture); @@ -867,7 +866,7 @@ describe('Directive: Mask', () => { }); it('should return empty string if first character not same in mask (000) 000-0000||+000000000000000', () => { - component.mask = '(000) 000-0000||+000000000000000'; + component.mask.set('(000) 000-0000||+000000000000000'); equal('', '', fixture); equal('@', '', fixture); @@ -883,8 +882,8 @@ describe('Directive: Mask', () => { }); it('should return empty string if first character not same in mask +(000) 000-0000', () => { - component.mask = '(000) 000-0000'; - component.prefix = '+7'; + component.mask.set('(000) 000-0000'); + component.prefix.set('+7'); equal('', '', fixture); equal('@', '', fixture); equal('!', '', fixture); @@ -899,7 +898,7 @@ describe('Directive: Mask', () => { }); it('optional mask should work correct 99-99', () => { - component.mask = '99-99'; + component.mask.set('99-99'); equal('1', '1', fixture); equal('12', '12', fixture); equal('123', '12-3', fixture); @@ -909,7 +908,7 @@ describe('Directive: Mask', () => { }); it('custom mask with optional symbol should work correct mask=999-999-999', () => { - component.mask = '999-999-999'; + component.mask.set('999-999-999'); equal('1', '1', fixture); equal('12', '12', fixture); equal('123', '123', fixture); @@ -936,9 +935,9 @@ describe('Directive: Mask', () => { spyOnProperty(document, 'activeElement').and.returnValue(inputTarget); fixture.detectChanges(); - component.mask = '00/00/0000'; - component.showMaskTyped = true; - component.keepCharacterPositions = true; + component.mask.set('00/00/0000'); + component.showMaskTyped.set(true); + component.keepCharacterPositions.set(true); equal('11/11/1111', '11/11/1111', fixture); component.form.setValue('22/22/2222'); @@ -948,35 +947,35 @@ describe('Directive: Mask', () => { }); it('mask sepator.0 after setValue should be dont dirty', () => { - component.mask = 'separator.0'; + component.mask.set('separator.0'); component.form.setValue('2'); expect(component.form.dirty).toBe(false); }); it('mask sepator.2 after setValue should be dont dirty', () => { - component.mask = 'separator.0'; + component.mask.set('separator.0'); component.form.setValue('2002'); expect(component.form.dirty).toBe(false); }); it('mask 00/00/0000 after setValue should be dont dirty', () => { - component.mask = 'separator.0'; + component.mask.set('separator.0'); component.form.setValue('12312312'); expect(component.form.dirty).toBe(false); }); it('mask sepator.2 after setValue should be dont dirty', () => { - component.mask = 'separator.0'; + component.mask.set('separator.0'); component.form.setValue('2002'); expect(component.form.dirty).toBe(false); }); it('should return empty string in formControl mask SSS-SSS-SSS', () => { - component.mask = 'SSS-SSS-SSS'; + component.mask.set('SSS-SSS-SSS'); component.form.setValue('978-1-93624-386-0'); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; @@ -987,7 +986,7 @@ describe('Directive: Mask', () => { }); it('should return empty string in formControl mask AAA-AAA-AAA', () => { - component.mask = 'AAA-AAA-AAA'; + component.mask.set('AAA-AAA-AAA'); component.form.setValue('978-123-936'); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; @@ -998,7 +997,7 @@ describe('Directive: Mask', () => { }); it('should return empty string in formControl mask (000) 000-000', () => { - component.mask = '(000) 000-000'; + component.mask.set('(000) 000-000'); component.form.setValue('978-123-936'); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; @@ -1009,8 +1008,8 @@ describe('Directive: Mask', () => { }); it('should return empty string in formControl mask (000) 000-000 with prefix +7', () => { - component.mask = '(000) 000-000'; - component.prefix = '+7 '; + component.mask.set('(000) 000-000'); + component.prefix.set('+7 '); component.form.setValue('978-123-936'); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; diff --git a/projects/ngx-mask-lib/src/test/clear-if-not-match-the-mask.spec.ts b/projects/ngx-mask-lib/src/test/clear-if-not-match-the-mask.spec.ts index 88794ac5..9e55714c 100644 --- a/projects/ngx-mask-lib/src/test/clear-if-not-match-the-mask.spec.ts +++ b/projects/ngx-mask-lib/src/test/clear-if-not-match-the-mask.spec.ts @@ -3,8 +3,7 @@ import { TestBed } from '@angular/core/testing'; import { ReactiveFormsModule } from '@angular/forms'; import { TestMaskComponent } from './utils/test-component.component'; import { equal } from './utils/test-functions.component'; -import { provideNgxMask } from '../lib/ngx-mask.providers'; -import { NgxMaskDirective } from '../lib/ngx-mask.directive'; +import { NgxMaskDirective, provideNgxMask } from 'ngx-mask'; describe('Directive: Mask', () => { let fixture: ComponentFixture; @@ -21,8 +20,8 @@ describe('Directive: Mask', () => { }); it('should clear if mask is not matched', async () => { - component.mask = '000.000-00'; - component.clearIfNotMatch = true; + component.mask.set('000.000-00'); + component.clearIfNotMatch.set(true); equal('', '', fixture, true); equal('2578989', '', fixture, true); equal('2578989888988', '257.898-98', fixture); @@ -30,18 +29,18 @@ describe('Directive: Mask', () => { }); it('should clear if mask is not matched with prefix', async () => { - component.mask = '000-000-00'; - component.prefix = '+5'; - component.clearIfNotMatch = true; + component.mask.set('000-000-00'); + component.prefix.set('+5'); + component.clearIfNotMatch.set(true); equal('', '', fixture, true); equal('2578989', '', fixture, true); equal('25789898', '+5257-898-98', fixture); }); it('should clear if mask is not matched with another placeholderCharacter *', async () => { - component.mask = '0000'; - component.placeHolderCharacter = '*'; - component.clearIfNotMatch = true; + component.mask.set('0000'); + component.placeHolderCharacter.set('*'); + component.clearIfNotMatch.set(true); equal('', '', fixture, true); equal('333', '', fixture, true); equal('22', '', fixture, true); @@ -49,9 +48,9 @@ describe('Directive: Mask', () => { }); it('should clear if mask is not matched with another placeholderCharacter X', async () => { - component.mask = '00000'; - component.placeHolderCharacter = 'X'; - component.clearIfNotMatch = true; + component.mask.set('00000'); + component.placeHolderCharacter.set('X'); + component.clearIfNotMatch.set(true); equal('', '', fixture, true); equal('333', '', fixture, true); equal('22', '', fixture, true); diff --git a/projects/ngx-mask-lib/src/test/complete-mask.spec.ts b/projects/ngx-mask-lib/src/test/complete-mask.spec.ts index c6de3d70..dbb2abd6 100644 --- a/projects/ngx-mask-lib/src/test/complete-mask.spec.ts +++ b/projects/ngx-mask-lib/src/test/complete-mask.spec.ts @@ -1,9 +1,8 @@ -import { Component } from '@angular/core'; +import { Component, signal } from '@angular/core'; import type { ComponentFixture } from '@angular/core/testing'; import { TestBed } from '@angular/core/testing'; import { FormControl, ReactiveFormsModule } from '@angular/forms'; -import { provideNgxMask } from '../lib/ngx-mask.providers'; -import { NgxMaskDirective } from '../lib/ngx-mask.directive'; +import { NgxMaskDirective, provideNgxMask } from 'ngx-mask'; @Component({ selector: 'jsdaddy-open-source-test', @@ -14,10 +13,10 @@ import { NgxMaskDirective } from '../lib/ngx-mask.directive'; class TestMaskComponent { public form: FormControl = new FormControl(''); - public isMaskFilled = false; + public isMaskFilled = signal(false); public maskFilled(): void { - this.isMaskFilled = true; + this.isMaskFilled.set(true); } } @@ -38,11 +37,11 @@ describe('Directive: Mask (Function maskFilled)', () => { }); it('should call function maskFilled and isMaskFilled should be true', () => { component.form.setValue('9999'); - expect(component.isMaskFilled).toBeTrue(); + expect(component.isMaskFilled()).toBeTrue(); expect(maskFilledSpy).toHaveBeenCalledOnceWith(); }); it('isMaskFilled should be false', () => { component.form.setValue('999'); - expect(component.isMaskFilled).toBeFalse(); + expect(component.isMaskFilled()).toBeFalse(); }); }); diff --git a/projects/ngx-mask-lib/src/test/copy-paste.spec.ts b/projects/ngx-mask-lib/src/test/copy-paste.spec.ts index 59eb800b..0314796e 100644 --- a/projects/ngx-mask-lib/src/test/copy-paste.spec.ts +++ b/projects/ngx-mask-lib/src/test/copy-paste.spec.ts @@ -4,8 +4,7 @@ import { ReactiveFormsModule } from '@angular/forms'; import { TestMaskComponent } from './utils/test-component.component'; import { By } from '@angular/platform-browser'; -import { provideNgxMask } from '../lib/ngx-mask.providers'; -import { NgxMaskDirective } from '../lib/ngx-mask.directive'; +import { NgxMaskDirective, provideNgxMask } from 'ngx-mask'; describe('Event: paste', () => { let fixture: ComponentFixture; @@ -22,7 +21,7 @@ describe('Event: paste', () => { }); it('After paste to control cursor should be on the end of input)', () => { - component.mask = '00 - 0000 - 00000'; + component.mask.set('00 - 0000 - 00000'); fixture.detectChanges(); const inputDebuggerElement = fixture.debugElement.query(By.css('#mask')); @@ -43,8 +42,8 @@ describe('Event: paste', () => { expect(inputDebuggerElement.nativeElement.selectionStart).toBe(15); }); it('After paste to control cursor should be on the end of input for mask with separator', () => { - component.mask = 'separator.0'; - component.thousandSeparator = ','; + component.mask.set('separator.0'); + component.thousandSeparator.set(','); fixture.detectChanges(); const inputDebuggerElement = fixture.debugElement.query(By.css('#mask')); diff --git a/projects/ngx-mask-lib/src/test/custom-date.spec.ts b/projects/ngx-mask-lib/src/test/custom-date.spec.ts index c39b2701..9669877c 100644 --- a/projects/ngx-mask-lib/src/test/custom-date.spec.ts +++ b/projects/ngx-mask-lib/src/test/custom-date.spec.ts @@ -3,8 +3,7 @@ import { TestBed } from '@angular/core/testing'; import { ReactiveFormsModule } from '@angular/forms'; import { TestMaskComponent } from './utils/test-component.component'; import { equal } from './utils/test-functions.component'; -import { provideNgxMask } from '../lib/ngx-mask.providers'; -import { NgxMaskDirective } from '../lib/ngx-mask.directive'; +import { NgxMaskDirective, provideNgxMask } from 'ngx-mask'; describe('Directive: Mask (Custom date)', () => { let fixture: ComponentFixture; @@ -21,8 +20,8 @@ describe('Directive: Mask (Custom date)', () => { }); it('repeat mask', () => { - component.mask = 'd0/m0/0000'; - // equal('18052019', '18/05/2019', fixture); + component.mask.set('d0/m0/0000'); + equal('18', '18', fixture); equal('11111111', '11/11/1111', fixture); }); @@ -30,7 +29,7 @@ describe('Directive: Mask (Custom date)', () => { it('should keep the cursor position after deleting a character', () => { // Set the initial input value and trigger an input event const inputElement = fixture.nativeElement.querySelector('input'); - component.mask = 'Hh:m0:s0'; + component.mask.set('Hh:m0:s0'); inputElement.value = '12:34:56'; inputElement.dispatchEvent(new Event('input')); fixture.detectChanges(); diff --git a/projects/ngx-mask-lib/src/test/custom-patterns.spec.ts b/projects/ngx-mask-lib/src/test/custom-patterns.spec.ts index 666d4729..1770d7c9 100644 --- a/projects/ngx-mask-lib/src/test/custom-patterns.spec.ts +++ b/projects/ngx-mask-lib/src/test/custom-patterns.spec.ts @@ -4,8 +4,7 @@ import { ReactiveFormsModule } from '@angular/forms'; import { TestMaskComponent } from './utils/test-component.component'; import { equal } from './utils/test-functions.component'; -import { provideNgxMask } from '../lib/ngx-mask.providers'; -import { NgxMaskDirective } from '../lib/ngx-mask.directive'; +import { NgxMaskDirective, provideNgxMask } from 'ngx-mask'; import type { NgxMaskConfig } from 'ngx-mask'; import { initialConfig } from 'ngx-mask'; @@ -24,12 +23,12 @@ describe('Directive: Mask (Custom patterns)', () => { }); it('custom patterns', () => { - component.mask = 'FFF'; - component.patterns = { + component.mask.set('FFF'); + component.patterns.set({ F: { pattern: new RegExp('[0-9]'), }, - }; + }); equal('F', '', fixture); equal('123', '123', fixture); }); @@ -58,7 +57,7 @@ describe('Directive: Mask (Provide custom patterns)', () => { }); it('custom patterns B should be work like optional', () => { - component.mask = 'SSBB-0999'; + component.mask.set('SSBB-0999'); equal('F', 'F', fixture); equal('FF', 'FF', fixture); @@ -101,29 +100,29 @@ describe('Directive: Mask (Provide custom patterns with symbol *)', () => { }); it('custom patterns * should work with mask *-*', () => { - component.mask = '*-*'; + component.mask.set('*-*'); equal('22', '2-2', fixture); }); it('custom patterns * should work with mask **-**', () => { - component.mask = '**-**'; + component.mask.set('**-**'); equal('22', '22', fixture); equal('123', '12-3', fixture); equal('1234', '12-34', fixture); }); it('custom patterns * should work with mask ***-***', () => { - component.mask = '***-***'; + component.mask.set('***-***'); equal('123456', '123-456', fixture); }); it('custom patterns * should work with mask ****-****', () => { - component.mask = '****-****'; + component.mask.set('****-****'); equal('12345678', '1234-5678', fixture); }); it('custom patterns * should work with mask *****-*****', () => { - component.mask = '*****-*****'; + component.mask.set('*****-*****'); equal('1234567890', '12345-67890', fixture); }); }); @@ -155,23 +154,23 @@ describe('Directive: Mask (Provide custom patterns with symbol f and F)', () => }); it('custom patterns f* should work not delete space after setTimeout', () => { - component.mask = 'f*'; + component.mask.set('f*'); equal('test value', 'test value', fixture); equal('test value with', 'test value with', fixture); equal('test value with space', 'test value with space', fixture); setTimeout(() => { - component.mask = 'F*'; + component.mask.set('F*'); expect(component.form.value).toBe('test value with space'); }); }); it('custom patterns F* should work not delete space after setTimeout', () => { - component.mask = 'F*'; + component.mask.set('F*'); equal('test value', 'test value', fixture); equal('test value with', 'test value with', fixture); equal('test value with space', 'test value with space', fixture); setTimeout(() => { - component.mask = 'f*'; + component.mask.set('f*'); expect(component.form.value).toBe('test value with space'); }); }); @@ -201,8 +200,9 @@ describe('Directive: Mask (Provide custom patterns with symbol B optional)', () }); it('custom mask with optional symbol should work correct mask=(000) 000-0000 x BBBBBBBBBB', () => { - component.mask = '(000) 000-0000 x BBBBBBBBBB'; - component.specialCharacters = ['(', ')', ' ', '-', 'x']; + component.mask.set('(000) 000-0000 x BBBBBBBBBB'); + component.specialCharacters.set(['(', ')', ' ', '-', 'x']); + equal('1', '(1', fixture); equal('12', '(12', fixture); equal('123', '(123', fixture); @@ -226,7 +226,8 @@ describe('Directive: Mask (Provide custom patterns with symbol B optional)', () }); it('custom mask with optional symbol should work correct mask=BBB-BBB-BBB', () => { - component.mask = 'BBB-BBB-BBB'; + component.mask.set('BBB-BBB-BBB'); + equal('1', '1', fixture); equal('12', '12', fixture); equal('123', '123', fixture); diff --git a/projects/ngx-mask-lib/src/test/custom-symbol-regexp.spec.ts b/projects/ngx-mask-lib/src/test/custom-symbol-regexp.spec.ts index bbe4e83d..e8265db9 100644 --- a/projects/ngx-mask-lib/src/test/custom-symbol-regexp.spec.ts +++ b/projects/ngx-mask-lib/src/test/custom-symbol-regexp.spec.ts @@ -4,8 +4,7 @@ import { ReactiveFormsModule } from '@angular/forms'; import { TestMaskComponent } from './utils/test-component.component'; import { equal } from './utils/test-functions.component'; -import { provideNgxMask } from '../lib/ngx-mask.providers'; -import { NgxMaskDirective } from '../lib/ngx-mask.directive'; +import { NgxMaskDirective, provideNgxMask } from 'ngx-mask'; describe('Directive: Mask', () => { let fixture: ComponentFixture; @@ -22,7 +21,7 @@ describe('Directive: Mask', () => { }); it('custom patterns', () => { - component.mask = '00*.00'; + component.mask.set('00*.00'); equal('22222.333333', '22222.33', fixture); equal('22212323232', '22212323232', fixture); }); @@ -31,8 +30,8 @@ describe('Directive: Mask', () => { const testPattern = { S: { pattern: new RegExp('[A-Za-z-Áá]') }, }; - component.mask = 'S*'; - component.patterns = testPattern; + component.mask.set('S*'); + component.patterns.set(testPattern); equal('Fernándos', 'Fernándos', fixture); equal('Ánton', 'Ánton', fixture); }); diff --git a/projects/ngx-mask-lib/src/test/default-config.spec.ts b/projects/ngx-mask-lib/src/test/default-config.spec.ts index b94bed1b..123984af 100644 --- a/projects/ngx-mask-lib/src/test/default-config.spec.ts +++ b/projects/ngx-mask-lib/src/test/default-config.spec.ts @@ -2,9 +2,8 @@ import type { ComponentFixture } from '@angular/core/testing'; import { TestBed } from '@angular/core/testing'; import { ReactiveFormsModule, FormControl } from '@angular/forms'; import { TestMaskComponent } from './utils/test-component.component'; -import { provideEnvironmentNgxMask } from '../lib/ngx-mask.providers'; -import { NgxMaskDirective } from '../lib/ngx-mask.directive'; -import type { NgxMaskOptions } from '../lib/ngx-mask.config'; +import { provideEnvironmentNgxMask, NgxMaskDirective } from 'ngx-mask'; +import type { NgxMaskOptions } from 'ngx-mask'; function createComponentWithDefaultConfig( defaultConfig?: NgxMaskOptions @@ -24,7 +23,7 @@ describe('Default config', () => { thousandSeparator: '.', }); const component = fixture.componentInstance; - component.mask = 'separator'; + component.mask.set('separator'); component.form = new FormControl(1234.56); fixture.detectChanges(); fixture.whenRenderingDone().then(() => { @@ -38,7 +37,7 @@ describe('Default config', () => { thousandSeparator: ' ', }); const component = fixture.componentInstance; - component.mask = 'separator'; + component.mask.set('separator'); component.form = new FormControl(1234.56); fixture.detectChanges(); fixture.whenRenderingDone().then(() => { @@ -52,12 +51,12 @@ describe('Default config', () => { thousandSeparator: ' ', }); const component = fixture.componentInstance; - component.mask = 'separator'; + component.mask.set('separator'); // Override default decimalMarker and thousandSeparator - component.decimalMarker = ','; - component.thousandSeparator = '.'; + component.decimalMarker.set(','); + component.thousandSeparator.set('.'); component.form = new FormControl(1234.56); - component.specialCharacters = ['/']; // Explicit set needed to prevent bug in ngx-mask.directive.ts OnChanges event (if specialCharacters is undefined, OnChanges function will return prematurely and won't apply provided thousandSeparator and decimalMarker) + component.specialCharacters.set(['/']); // Explicit set needed to prevent bug in ngx-mask.directive.ts OnChanges event (if specialCharacters is undefined, OnChanges function will return prematurely and won't apply provided thousandSeparator and decimalMarker) fixture.detectChanges(); fixture.whenRenderingDone().then(() => { expect(fixture.nativeElement.querySelector('input').value).toBe('1.234,56'); @@ -72,7 +71,7 @@ describe('Default config', () => { separatorLimit: '100', }); const component = fixture.componentInstance; - component.mask = 'separator.2'; + component.mask.set('separator.2'); component.form = new FormControl(123); fixture.detectChanges(); @@ -89,7 +88,7 @@ describe('Default config', () => { leadZero: true, }); const component = fixture.componentInstance; - component.mask = 'separator.2'; + component.mask.set('separator.2'); component.form = new FormControl(15000.33); fixture.detectChanges(); diff --git a/projects/ngx-mask-lib/src/test/delete.spec.ts b/projects/ngx-mask-lib/src/test/delete.spec.ts index 73c01f11..eaf32869 100644 --- a/projects/ngx-mask-lib/src/test/delete.spec.ts +++ b/projects/ngx-mask-lib/src/test/delete.spec.ts @@ -6,8 +6,7 @@ import { ReactiveFormsModule } from '@angular/forms'; import { TestMaskComponent } from './utils/test-component.component'; import { equal } from './utils/test-functions.component'; -import { NgxMaskDirective } from '../lib/ngx-mask.directive'; -import { provideNgxMask } from '../lib/ngx-mask.providers'; +import { provideNgxMask, NgxMaskDirective } from 'ngx-mask'; describe('Directive: Mask (Delete)', () => { let fixture: ComponentFixture; @@ -24,7 +23,7 @@ describe('Directive: Mask (Delete)', () => { }); it('delete character in input', () => { - component.mask = '00/00/0000'; + component.mask.set('00/00/0000'); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; spyOnProperty(document, 'activeElement').and.returnValue(inputTarget); @@ -46,7 +45,7 @@ describe('Directive: Mask (Delete)', () => { }); it('delete special character in input', () => { - component.mask = '00/00/0000'; + component.mask.set('00/00/0000'); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; spyOnProperty(document, 'activeElement').and.returnValue(inputTarget); @@ -68,8 +67,8 @@ describe('Directive: Mask (Delete)', () => { }); it('delete special character in secure input', () => { - component.mask = 'XXX/X0/0000'; - component.hiddenInput = true; + component.mask.set('XXX/X0/0000'); + component.hiddenInput.set(true); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; spyOnProperty(document, 'activeElement').and.returnValue(inputTarget); @@ -91,7 +90,7 @@ describe('Directive: Mask (Delete)', () => { }); it('delete special character on 1 position', () => { - component.mask = '[00]'; + component.mask.set('[00]'); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; spyOnProperty(document, 'activeElement').and.returnValue(inputTarget); @@ -112,8 +111,8 @@ describe('Directive: Mask (Delete)', () => { }); it('delete suffix with backspace and delete', () => { - component.mask = 'A{5}'; - component.suffix = '.com'; + component.mask.set('A{5}'); + component.suffix.set('.com'); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; spyOnProperty(document, 'activeElement').and.returnValue(inputTarget); @@ -147,8 +146,8 @@ describe('Directive: Mask (Delete)', () => { }); it('prefix shouldn`t be deleted', () => { - component.mask = '00 00'; - component.prefix = '+1'; + component.mask.set('00 00'); + component.prefix.set('+1'); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; spyOnProperty(document, 'activeElement').and.returnValue(inputTarget); @@ -172,8 +171,8 @@ describe('Directive: Mask (Delete)', () => { }); it('prefix shouldn`t be deleted', () => { - component.mask = '00 00'; - component.prefix = '+1 '; + component.mask.set('00 00'); + component.prefix.set('+1 '); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; spyOnProperty(document, 'activeElement').and.returnValue(inputTarget); @@ -197,8 +196,8 @@ describe('Directive: Mask (Delete)', () => { }); it('prefix shouldn`t be deleted', () => { - component.mask = '(00) 00'; - component.prefix = '+1'; + component.mask.set('(00) 00'); + component.prefix.set('+1'); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; spyOnProperty(document, 'activeElement').and.returnValue(inputTarget); @@ -222,8 +221,8 @@ describe('Directive: Mask (Delete)', () => { }); it('prefix shouldn`t be deleted', () => { - component.mask = '(00) 00'; - component.prefix = '+1 '; + component.mask.set('(00) 00'); + component.prefix.set('+1 '); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; spyOnProperty(document, 'activeElement').and.returnValue(inputTarget); @@ -247,7 +246,7 @@ describe('Directive: Mask (Delete)', () => { }); it('date mask should show keep right value d0/M0/0000', () => { - component.mask = 'd0/M0/0000'; + component.mask.set('d0/M0/0000'); const inputElement = fixture.nativeElement.querySelector('input'); inputElement.value = '4/4/4444'; @@ -270,7 +269,7 @@ describe('Directive: Mask (Delete)', () => { }); it('date mask should show keep right value d0:M0:0000', () => { - component.mask = 'd0:M0:0000'; + component.mask.set('d0:M0:0000'); const inputElement = fixture.nativeElement.querySelector('input'); inputElement.value = '4:4:4444'; @@ -293,7 +292,7 @@ describe('Directive: Mask (Delete)', () => { }); it('date mask should show keep right value d0-M0-0000', () => { - component.mask = 'd0-M0-0000'; + component.mask.set('d0-M0-0000'); const inputElement = fixture.nativeElement.querySelector('input'); inputElement.value = '4-4-4444'; diff --git a/projects/ngx-mask-lib/src/test/drop-special-charaters.spec.ts b/projects/ngx-mask-lib/src/test/drop-special-charaters.spec.ts index e1335d95..161c6725 100644 --- a/projects/ngx-mask-lib/src/test/drop-special-charaters.spec.ts +++ b/projects/ngx-mask-lib/src/test/drop-special-charaters.spec.ts @@ -4,8 +4,7 @@ import { ReactiveFormsModule } from '@angular/forms'; import { TestMaskComponent } from './utils/test-component.component'; import { equal } from './utils/test-functions.component'; -import { provideNgxMask } from '../lib/ngx-mask.providers'; -import { NgxMaskDirective } from '../lib/ngx-mask.directive'; +import { NgxMaskDirective, provideNgxMask } from 'ngx-mask'; describe('Directive: Mask (Drop special characters)', () => { let fixture: ComponentFixture; @@ -22,8 +21,8 @@ describe('Directive: Mask (Drop special characters)', () => { }); it('FormControl should be filled without special characters', () => { - component.mask = '00-00-00'; - component.dropSpecialCharacters = false; + component.mask.set('00-00-00'); + component.dropSpecialCharacters.set(false); equal('257898', '25-78-98', fixture); expect(component.form.value).toBe('25-78-98'); @@ -33,16 +32,16 @@ describe('Directive: Mask (Drop special characters)', () => { }); it('should correct value with mask 00-00/00 with dropSpecialCharacters = /', () => { - component.mask = '00-00/00'; - component.dropSpecialCharacters = ['/']; + component.mask.set('00-00/00'); + component.dropSpecialCharacters.set(['/']); equal('257898', '25-78/98', fixture); expect(component.form.value).toBe('25-7898'); }); it('should correct value with mask 0000.00 with dropSpecialCharacters = true', () => { - component.mask = '0000.00'; - component.dropSpecialCharacters = true; + component.mask.set('0000.00'); + component.dropSpecialCharacters.set(true); component.form.setValue(123456); equal('123456', '1234.56', fixture); @@ -50,9 +49,9 @@ describe('Directive: Mask (Drop special characters)', () => { }); it('FormControl should be filled without special characters', () => { - component.mask = 'separator.4'; - component.thousandSeparator = ','; - component.dropSpecialCharacters = true; + component.mask.set('separator.4'); + component.thousandSeparator.set(','); + component.dropSpecialCharacters.set(true); component.form.setValue(2578.9812); equal('2578.9812', '2,578.9812', fixture); @@ -60,9 +59,9 @@ describe('Directive: Mask (Drop special characters)', () => { }); it('FormControl should normally handle the removal of whitespace', () => { - component.mask = 'separator.2'; - component.thousandSeparator = ' '; - component.dropSpecialCharacters = true; + component.mask.set('separator.2'); + component.thousandSeparator.set(' '); + component.dropSpecialCharacters.set(true); component.form.setValue(1234567.89); // @todo add backspace event check @@ -72,9 +71,9 @@ describe('Directive: Mask (Drop special characters)', () => { }); it('dropSpecialCharacter test for valid', () => { - component.mask = '(000) 000-0000'; - component.dropSpecialCharacters = true; - component.validation = true; + component.mask.set('(000) 000-0000'); + component.dropSpecialCharacters.set(true); + component.validation.set(true); equal('1', '(1', fixture); expect(component.form.valid).toBe(false); equal('12', '(12', fixture); @@ -98,9 +97,9 @@ describe('Directive: Mask (Drop special characters)', () => { }); it('dropSpecialCharacter = false test for valid', () => { - component.mask = '(000) 000-0000'; - component.dropSpecialCharacters = true; - component.validation = true; + component.mask.set('(000) 000-0000'); + component.dropSpecialCharacters.set(true); + component.validation.set(true); equal('1', '(1', fixture); expect(component.form.valid).toBe(false); equal('12', '(12', fixture); @@ -124,18 +123,18 @@ describe('Directive: Mask (Drop special characters)', () => { }); it('dropSpecialCharacter = true test for valid with setValue', () => { - component.mask = '(000) 000-0000'; - component.dropSpecialCharacters = true; - component.validation = true; + component.mask.set('(000) 000-0000'); + component.dropSpecialCharacters.set(true); + component.validation.set(true); component.form.setValue('1234567890'); equal('1234567890', '(123) 456-7890', fixture); expect(component.form.valid).toBe(true); }); it('dropSpecialCharacter = false test for valid with setValue', () => { - component.mask = '(000) 000-0000'; - component.dropSpecialCharacters = false; - component.validation = true; + component.mask.set('(000) 000-0000'); + component.dropSpecialCharacters.set(false); + component.validation.set(true); equal('1', '(1', fixture); expect(component.form.valid).toBeFalsy(); equal('12', '(12', fixture); diff --git a/projects/ngx-mask-lib/src/test/dynamic.spec.ts b/projects/ngx-mask-lib/src/test/dynamic.spec.ts index 6a600039..908c6692 100644 --- a/projects/ngx-mask-lib/src/test/dynamic.spec.ts +++ b/projects/ngx-mask-lib/src/test/dynamic.spec.ts @@ -5,8 +5,7 @@ import { By } from '@angular/platform-browser'; import { ReactiveFormsModule } from '@angular/forms'; import { TestMaskComponent } from './utils/test-component.component'; import type { DebugElement } from '@angular/core'; -import { provideNgxMask } from '../lib/ngx-mask.providers'; -import { NgxMaskDirective } from '../lib/ngx-mask.directive'; +import { NgxMaskDirective, provideNgxMask } from 'ngx-mask'; import { equal } from './utils/test-functions.component'; describe('Directive: Mask (Dynamic)', () => { @@ -24,7 +23,7 @@ describe('Directive: Mask (Dynamic)', () => { }); it('The input value when set by the FormControl should be masked accordingly the dynamic mask', async () => { - component.mask = '000-0||0000-0||00000-0'; + component.mask.set('000-0||0000-0||00000-0'); fixture.detectChanges(); component.form.setValue({ @@ -63,13 +62,13 @@ describe('Directive: Mask (Dynamic)', () => { return ''; } - component.mask = ''; + component.mask.set(''); fixture.detectChanges(); component.form.setValue({ value: 9000000000000000000, }); - component.mask = getMask(); + component.mask.set(getMask()); fixture.detectChanges(); const inputEl = fixture.debugElement.query(By.css('input')); @@ -79,7 +78,7 @@ describe('Directive: Mask (Dynamic)', () => { }); it('Change mask dynamically from mask several masks to one', async () => { - component.mask = '(000)0000-000||(000)0000-0000||00-00000-00000'; // China phone formats + component.mask.set('(000)0000-000||(000)0000-0000||00-00000-00000'); // China phone formats fixture.detectChanges(); component.form.setValue({ @@ -109,7 +108,7 @@ describe('Directive: Mask (Dynamic)', () => { expect(inputEl.nativeElement.value).toEqual('12-34567-89012'); }); - component.mask = '00-00-00-00'; // For example Denmark phone format + component.mask.set('00-00-00-00'); // For example Denmark phone format fixture.detectChanges(); component.form.setValue({ @@ -124,9 +123,9 @@ describe('Directive: Mask (Dynamic)', () => { it('The input value when set by the FormControl should be masked accordingly the dynamic mask', async () => { let inputEl: DebugElement; - component.mask = 'separator.2'; - component.thousandSeparator = '.'; - component.decimalMarker = ','; + component.mask.set('separator.2'); + component.thousandSeparator.set('.'); + component.decimalMarker.set(','); fixture.detectChanges(); @@ -156,7 +155,7 @@ describe('Directive: Mask (Dynamic)', () => { }); it('Should update position to the end of input when mask changes while typing', async () => { - component.mask = '(00) 00000000||+00 (00) 00000000'; + component.mask.set('(00) 00000000||+00 (00) 00000000'); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; spyOnProperty(document, 'activeElement').and.returnValue(inputTarget); @@ -183,7 +182,7 @@ describe('Directive: Mask (Dynamic)', () => { }); it('should work with number or letters', () => { - component.mask = '00||SS'; + component.mask.set('00||SS'); equal('0', '0', fixture); equal('11', '11', fixture); equal('D', 'D', fixture); @@ -191,7 +190,7 @@ describe('Directive: Mask (Dynamic)', () => { }); it('should work with number or letters', () => { - component.mask = '00||SS||000||000SS||0S0S'; + component.mask.set('00||SS||000||000SS||0S0S'); equal('0', '0', fixture); expect(component.form.valid).toBeFalse(); equal('11', '11', fixture); @@ -215,7 +214,7 @@ describe('Directive: Mask (Dynamic)', () => { }); it('should work for UK Post Codes', () => { - component.mask = 'S0 0SS||SAA 0SS||SS0A 0SS'; + component.mask.set('S0 0SS||SAA 0SS||SS0A 0SS'); equal('A', 'A', fixture); expect(component.form.valid).toBeFalse(); equal('A0', 'A0', fixture); @@ -229,7 +228,7 @@ describe('Directive: Mask (Dynamic)', () => { }); it('should work with number or letters', () => { - component.mask = '00||SS||000||000SS'; + component.mask.set('00||SS||000||000SS'); equal('0', '0', fixture); expect(component.form.invalid).toBeTrue(); equal('11', '11', fixture); @@ -247,8 +246,8 @@ describe('Directive: Mask (Dynamic)', () => { }); it('should be valid if mask dont changes 00000||00000-0000', () => { - component.mask = '00000||00000-0000'; - component.showMaskTyped = true; + component.mask.set('00000||00000-0000'); + component.showMaskTyped.set(true); equal('1', '1____', fixture); expect(component.form.invalid).toBeTrue(); equal('11', '11___', fixture); @@ -270,7 +269,7 @@ describe('Directive: Mask (Dynamic)', () => { }); it('should work with when justPasted', () => { - component.mask = '00000||S0S 0S0'; + component.mask.set('00000||S0S 0S0'); equal('1', '1', fixture); equal('12', '12', fixture); equal('123', '123', fixture); @@ -285,7 +284,7 @@ describe('Directive: Mask (Dynamic)', () => { }); it('should work with only S', () => { - component.mask = 'S.||S.S.||S.S.S.||S.S.S.S.||S.S.S.S.S.'; + component.mask.set('S.||S.S.||S.S.S.||S.S.S.S.||S.S.S.S.S.'); equal('D', 'D.', fixture); equal('D.D', 'D.D.', fixture); equal('DDD', 'D.D.D.', fixture); @@ -294,7 +293,7 @@ describe('Directive: Mask (Dynamic)', () => { }); it('should work with only A', () => { - component.mask = 'A.||A.A.||A.A.A.||A.A.A.A.||A.A.A.A.A.'; + component.mask.set('A.||A.A.||A.A.A.||A.A.A.A.||A.A.A.A.A.'); equal('D', 'D.', fixture); equal('D.D', 'D.D.', fixture); equal('DDD', 'D.D.D.', fixture); @@ -303,7 +302,7 @@ describe('Directive: Mask (Dynamic)', () => { }); it('should work with only U', () => { - component.mask = 'U.||U.U.||U.U.U.||U.U.U.U.||U.U.U.U.U.'; + component.mask.set('U.||U.U.||U.U.U.||U.U.U.U.||U.U.U.U.U.'); equal('D', 'D.', fixture); equal('D.D', 'D.D.', fixture); equal('DDD', 'D.D.D.', fixture); @@ -312,7 +311,7 @@ describe('Directive: Mask (Dynamic)', () => { }); it('should work with only L', () => { - component.mask = 'L.||L.L.||L.L.L.||L.L.L.L.||L.L.L.L.L.'; + component.mask.set('L.||L.L.||L.L.L.||L.L.L.L.||L.L.L.L.L.'); equal('d', 'd.', fixture); equal('d.d', 'd.d.', fixture); equal('ddd', 'd.d.d.', fixture); diff --git a/projects/ngx-mask-lib/src/test/export-as.spec.ts b/projects/ngx-mask-lib/src/test/export-as.spec.ts index 231087b4..800a526b 100644 --- a/projects/ngx-mask-lib/src/test/export-as.spec.ts +++ b/projects/ngx-mask-lib/src/test/export-as.spec.ts @@ -3,8 +3,7 @@ import { TestBed } from '@angular/core/testing'; import { ReactiveFormsModule } from '@angular/forms'; import { Component, viewChild } from '@angular/core'; -import { provideNgxMask } from '../lib/ngx-mask.providers'; -import { NgxMaskDirective } from '../lib/ngx-mask.directive'; +import { NgxMaskDirective, provideNgxMask } from 'ngx-mask'; @Component({ selector: 'jsdaddy-open-source-test', diff --git a/projects/ngx-mask-lib/src/test/inputTransformFn.spec.ts b/projects/ngx-mask-lib/src/test/inputTransformFn.spec.ts index 56ae77b2..1d0fd98c 100644 --- a/projects/ngx-mask-lib/src/test/inputTransformFn.spec.ts +++ b/projects/ngx-mask-lib/src/test/inputTransformFn.spec.ts @@ -4,8 +4,7 @@ import { ReactiveFormsModule } from '@angular/forms'; import { TestMaskComponent } from './utils/test-component.component'; import { equal } from './utils/test-functions.component'; -import { NgxMaskDirective } from '../lib/ngx-mask.directive'; -import { provideNgxMask } from '../lib/ngx-mask.providers'; +import { provideNgxMask, NgxMaskDirective } from 'ngx-mask'; describe('Directive: Mask', () => { let fixture: ComponentFixture; @@ -22,8 +21,8 @@ describe('Directive: Mask', () => { }); it('inputTransformFn should return value toUpperCase', () => { - component.mask = 'S*'; - component.inputTransformFn = (value: unknown): string => String(value).toUpperCase(); + component.mask.set('S*'); + component.inputTransformFn.set((value: unknown): string => String(value).toUpperCase()); equal('a', 'A', fixture); equal('an', 'AN', fixture); @@ -34,9 +33,10 @@ describe('Directive: Mask', () => { }); it('inputTransformFn should return value formValue toUpperCase', () => { - component.mask = 'S*'; - component.outputTransformFn = (value: string | number | undefined | null): string => - String(value).toUpperCase(); + component.mask.set('S*'); + component.outputTransformFn.set((value: string | number | undefined | null): string => + String(value).toUpperCase() + ); equal('a', 'a', fixture); equal('an', 'an', fixture); @@ -48,10 +48,11 @@ describe('Directive: Mask', () => { }); it('inputTransformFn should return value formValue toUpperCase but input value to lowerCase', () => { - component.mask = 'S*'; - component.outputTransformFn = (value: string | number | undefined | null): string => - String(value).toUpperCase(); - component.inputTransformFn = (value: unknown): string => String(value).toLowerCase(); + component.mask.set('S*'); + component.outputTransformFn.set((value: string | number | undefined | null): string => + String(value).toUpperCase() + ); + component.inputTransformFn.set((value: unknown): string => String(value).toLowerCase()); equal('A', 'a', fixture); equal('AN', 'an', fixture); @@ -63,14 +64,14 @@ describe('Directive: Mask', () => { }); it('separator.2 should replace dot in model', () => { - component.mask = 'separator.2'; - component.decimalMarker = '.'; - component.outputTransformFn = (value: string | number | undefined | null): string => { + component.mask.set('separator.2'); + component.decimalMarker.set('.'); + component.outputTransformFn.set((value: string | number | undefined | null): string => { if (String(value).includes('.')) { return String(value).replace('.', ','); } return String(value); - }; + }); equal('10.2', '10.2', fixture); expect(component.form.value).toBe('10,2'); @@ -83,16 +84,16 @@ describe('Directive: Mask', () => { }); it('separator.3 should toFixed value in model and return Number', () => { - component.mask = 'separator.3'; - component.decimalMarker = '.'; - component.outputTransformFn = (value: string | number | undefined | null): number => { + component.mask.set('separator.3'); + component.decimalMarker.set('.'); + component.outputTransformFn.set((value: string | number | undefined | null): number => { if (String(value).includes('.')) { const numberValue = parseFloat(String(value)); const formattedValue = Number(numberValue.toFixed(2)); return formattedValue; } return Number(value); - }; + }); equal('237.356', '237.356', fixture); expect(component.form.value).toBe(237.36); @@ -105,14 +106,14 @@ describe('Directive: Mask', () => { }); it('mask 000.00 should replace dot in model', () => { - component.mask = '000.00'; - component.dropSpecialCharacters = false; - component.outputTransformFn = (value: string | number | undefined | null): string => { + component.mask.set('000.00'); + component.dropSpecialCharacters.set(false); + component.outputTransformFn.set((value: string | number | undefined | null): string => { if (String(value).includes('.')) { return String(value).replace('.', ','); } return String(value); - }; + }); equal('100.22', '100.22', fixture); expect(component.form.value).toBe('100,22'); @@ -122,10 +123,11 @@ describe('Directive: Mask', () => { }); it('mask separator.1 should return number', () => { - component.mask = 'separator.1'; - component.decimalMarker = ','; - component.outputTransformFn = (value: string | number | undefined | null): number => - Number(value); + component.mask.set('separator.1'); + component.decimalMarker.set(','); + component.outputTransformFn.set((value: string | number | undefined | null): number => + Number(value) + ); equal('123,2', '123,2', fixture); expect(component.form.value).toBe(123.2); @@ -141,10 +143,11 @@ describe('Directive: Mask', () => { }); it('mask separator.1 should return number decimalMarker dot', () => { - component.mask = 'separator.1'; - component.decimalMarker = '.'; - component.outputTransformFn = (value: string | number | undefined | null): number => - Number(value); + component.mask.set('separator.1'); + component.decimalMarker.set('.'); + component.outputTransformFn.set((value: string | number | undefined | null): number => + Number(value) + ); equal('123.4', '123.4', fixture); expect(component.form.value).toBe(123.4); @@ -160,13 +163,13 @@ describe('Directive: Mask', () => { }); it('mask percent should replace dot in model', () => { - component.mask = 'percent.2'; - component.outputTransformFn = (value: string | number | undefined | null): string => { + component.mask.set('percent.2'); + component.outputTransformFn.set((value: string | number | undefined | null): string => { if (String(value).includes('.')) { return String(value).replace('.', ','); } return String(value); - }; + }); equal('1.2', '1.2', fixture); expect(component.form.value).toBe('1,2'); @@ -178,11 +181,11 @@ describe('Directive: Mask', () => { }); it('mask percent should replace dot in model', () => { - component.mask = 'Hh:m0'; - component.showMaskTyped = true; - component.dropSpecialCharacters = false; - component.leadZeroDateTime = true; - component.outputTransformFn = (value: string | number | undefined | null) => { + component.mask.set('Hh:m0'); + component.showMaskTyped.set(true); + component.dropSpecialCharacters.set(false); + component.leadZeroDateTime.set(true); + component.outputTransformFn.set((value: string | number | undefined | null) => { if (value) { const fetch = new Date(); const values = String(value).split(':'); @@ -196,9 +199,9 @@ describe('Directive: Mask', () => { return fetch.toString(); } return; - }; + }); const date = new Date(); - component.inputTransformFn = (value: unknown): string => { + component.inputTransformFn.set((value: unknown): string => { if (typeof value !== 'object') { return String(value); } @@ -206,7 +209,7 @@ describe('Directive: Mask', () => { 2, '0' )}`; - }; + }); component.form.setValue(new Date().toString()); expect(component.form.value).toBe(date.toString()); }); diff --git a/projects/ngx-mask-lib/src/test/mask.pipe.spec.ts b/projects/ngx-mask-lib/src/test/mask.pipe.spec.ts index 6cb7c216..87b3d646 100644 --- a/projects/ngx-mask-lib/src/test/mask.pipe.spec.ts +++ b/projects/ngx-mask-lib/src/test/mask.pipe.spec.ts @@ -1,8 +1,6 @@ import { TestBed } from '@angular/core/testing'; -import { provideNgxMask } from '../lib/ngx-mask.providers'; -import { NgxMaskPipe } from '../lib/ngx-mask.pipe'; import type { NgxMaskConfig } from 'ngx-mask'; -import { NgxMaskDirective } from 'ngx-mask'; +import { NgxMaskDirective, provideNgxMask, NgxMaskPipe } from 'ngx-mask'; describe('Pipe: Mask', () => { let maskPipe: NgxMaskPipe; diff --git a/projects/ngx-mask-lib/src/test/percent.spec.ts b/projects/ngx-mask-lib/src/test/percent.spec.ts index 4075b8b7..1682f4f6 100644 --- a/projects/ngx-mask-lib/src/test/percent.spec.ts +++ b/projects/ngx-mask-lib/src/test/percent.spec.ts @@ -4,8 +4,7 @@ import { ReactiveFormsModule } from '@angular/forms'; import { TestMaskComponent } from './utils/test-component.component'; import { equal } from './utils/test-functions.component'; -import { provideNgxMask } from '../lib/ngx-mask.providers'; -import { NgxMaskDirective } from '../lib/ngx-mask.directive'; +import { NgxMaskDirective, provideNgxMask } from 'ngx-mask'; describe('Directive: Mask (Percent)', () => { let fixture: ComponentFixture; @@ -22,60 +21,60 @@ describe('Directive: Mask (Percent)', () => { }); it('percent for empty', () => { - component.mask = 'percent'; + component.mask.set('percent'); equal('', '', fixture); }); it('percent for 100', () => { - component.mask = 'percent'; + component.mask.set('percent'); equal('100', '100', fixture); }); it('percent for 99', () => { - component.mask = 'percent'; + component.mask.set('percent'); equal('99', '99', fixture); }); it('percent for 123', () => { - component.mask = 'percent'; + component.mask.set('percent'); equal('123', '12', fixture); }); it('percent for 99.99', () => { - component.mask = 'percent'; + component.mask.set('percent'); equal('99.99', '99.99', fixture); }); it('percent for 99', () => { - component.mask = 'percent.0'; + component.mask.set('percent.0'); equal('99.99999', '99', fixture); }); it('percent for 99.99', () => { - component.mask = 'percent.2'; + component.mask.set('percent.2'); equal('99.9999', '99.99', fixture); }); it('percent for 1.123', () => { - component.mask = 'percent.3'; + component.mask.set('percent.3'); equal('1.12345', '1.123', fixture); }); it('percent for 123.23', () => { - component.mask = 'percent'; + component.mask.set('percent'); equal('123.23', '12.23', fixture); }); it('percent with suffix', () => { - component.mask = 'percent'; - component.suffix = '%'; + component.mask.set('percent'); + component.suffix.set('%'); equal('50', '50%', fixture); equal('123', '12%', fixture); equal('50.50', '50.50%', fixture); }); it('percent for split zero percent.2', () => { - component.mask = 'percent.2'; + component.mask.set('percent.2'); equal('01.23', '1.23', fixture); equal('012.23', '12.23', fixture); equal('099.23', '99.23', fixture); @@ -84,7 +83,7 @@ describe('Directive: Mask (Percent)', () => { }); it('percent for split zero percent', () => { - component.mask = 'percent'; + component.mask.set('percent'); equal('01.23', '1.23', fixture); equal('012.23', '12.23', fixture); equal('099.23', '99.23', fixture); @@ -93,7 +92,7 @@ describe('Directive: Mask (Percent)', () => { }); it('percent for split zero percent.3', () => { - component.mask = 'percent.3'; + component.mask.set('percent.3'); equal('01.233', '1.233', fixture); equal('012.232', '12.232', fixture); equal('099.230', '99.230', fixture); @@ -102,8 +101,8 @@ describe('Directive: Mask (Percent)', () => { }); it('percent for split zero percent.2 should be valid', () => { - component.mask = 'percent.2'; - component.validation = true; + component.mask.set('percent.2'); + component.validation.set(true); fixture.detectChanges(); equal('1', '1', fixture); @@ -112,8 +111,8 @@ describe('Directive: Mask (Percent)', () => { }); it('percent for split zero percent.3 should be valid', () => { - component.mask = 'percent.3'; - component.validation = true; + component.mask.set('percent.3'); + component.validation.set(true); fixture.detectChanges(); equal('1', '1', fixture); @@ -122,8 +121,8 @@ describe('Directive: Mask (Percent)', () => { }); it('percent for split zero percent should be valid', () => { - component.mask = 'percent'; - component.validation = true; + component.mask.set('percent'); + component.validation.set(true); fixture.detectChanges(); equal('1', '1', fixture); @@ -132,8 +131,8 @@ describe('Directive: Mask (Percent)', () => { }); it('percent with decimalMarker = , percent.2 ', () => { - component.mask = 'percent.2'; - component.decimalMarker = ','; + component.mask.set('percent.2'); + component.decimalMarker.set(','); equal('1', '1', fixture); equal('12', '12', fixture); @@ -143,8 +142,8 @@ describe('Directive: Mask (Percent)', () => { }); it('percent with decimalMarker = , percent.3 ', () => { - component.mask = 'percent.3'; - component.decimalMarker = ','; + component.mask.set('percent.3'); + component.decimalMarker.set(','); equal('1', '1', fixture); equal('12', '12', fixture); @@ -155,9 +154,9 @@ describe('Directive: Mask (Percent)', () => { }); it('percent with decimalMarker = , percent.2 drop false ', () => { - component.mask = 'percent.2'; - component.dropSpecialCharacters = false; - component.decimalMarker = ','; + component.mask.set('percent.2'); + component.dropSpecialCharacters.set(false); + component.decimalMarker.set(','); equal('1', '1', fixture); equal('12', '12', fixture); @@ -167,9 +166,9 @@ describe('Directive: Mask (Percent)', () => { }); it('percent with decimalMarker = , percent.3 drop false ', () => { - component.mask = 'percent.3'; - component.dropSpecialCharacters = false; - component.decimalMarker = ','; + component.mask.set('percent.3'); + component.dropSpecialCharacters.set(false); + component.decimalMarker.set(','); equal('2', '2', fixture); equal('22', '22', fixture); @@ -179,10 +178,10 @@ describe('Directive: Mask (Percent)', () => { }); it('percent with decimalMarker = , percent.2 drop false with suffix ', () => { - component.mask = 'percent.2'; - component.dropSpecialCharacters = false; - component.decimalMarker = ','; - component.suffix = '%'; + component.mask.set('percent.2'); + component.dropSpecialCharacters.set(false); + component.decimalMarker.set(','); + component.suffix.set('%'); equal('1', '1%', fixture); equal('12', '12%', fixture); @@ -192,10 +191,10 @@ describe('Directive: Mask (Percent)', () => { }); it('percent with decimalMarker = , percent.3 drop false with suffix ', () => { - component.mask = 'percent.3'; - component.dropSpecialCharacters = false; - component.suffix = '%'; - component.decimalMarker = ','; + component.mask.set('percent.3'); + component.dropSpecialCharacters.set(false); + component.suffix.set('%'); + component.decimalMarker.set(','); equal('2', '2%', fixture); equal('22', '22%', fixture); @@ -205,9 +204,9 @@ describe('Directive: Mask (Percent)', () => { }); it('percent with decimalMarker = , percent.2with suffix ', () => { - component.mask = 'percent.2'; - component.suffix = '%'; - component.decimalMarker = ','; + component.mask.set('percent.2'); + component.suffix.set('%'); + component.decimalMarker.set(','); equal('1', '1%', fixture); equal('12', '12%', fixture); @@ -217,9 +216,9 @@ describe('Directive: Mask (Percent)', () => { }); it('percent with decimalMarker = , percent.3 with suffix ', () => { - component.mask = 'percent.3'; - component.suffix = '%'; - component.decimalMarker = ','; + component.mask.set('percent.3'); + component.suffix.set('%'); + component.decimalMarker.set(','); equal('2', '2%', fixture); equal('22', '22%', fixture); @@ -229,8 +228,8 @@ describe('Directive: Mask (Percent)', () => { }); it('percent with allowNegative = true', () => { - component.mask = 'percent'; - component.allowNegativeNumbers = true; + component.mask.set('percent'); + component.allowNegativeNumbers.set(true); equal('-', '-', fixture); equal('-0', '-0', fixture); @@ -240,8 +239,8 @@ describe('Directive: Mask (Percent)', () => { }); it('percent with allowNegative = true', () => { - component.mask = 'percent.1'; - component.allowNegativeNumbers = true; + component.mask.set('percent.1'); + component.allowNegativeNumbers.set(true); equal('-', '-', fixture); equal('-0', '-0', fixture); @@ -251,9 +250,9 @@ describe('Directive: Mask (Percent)', () => { }); it('percent with allowNegative = true', () => { - component.mask = 'percent.1'; - component.decimalMarker = ','; - component.allowNegativeNumbers = true; + component.mask.set('percent.1'); + component.decimalMarker.set(','); + component.allowNegativeNumbers.set(true); equal('-', '-', fixture); equal('-0', '-0', fixture); @@ -263,8 +262,8 @@ describe('Directive: Mask (Percent)', () => { }); it('percent 2 with allowNegative = true', () => { - component.mask = 'percent.2'; - component.allowNegativeNumbers = true; + component.mask.set('percent.2'); + component.allowNegativeNumbers.set(true); equal('-', '-', fixture); equal('-0', '-0', fixture); @@ -279,8 +278,8 @@ describe('Directive: Mask (Percent)', () => { }); it('percent 3 with allowNegative = true', () => { - component.mask = 'percent.3'; - component.allowNegativeNumbers = true; + component.mask.set('percent.3'); + component.allowNegativeNumbers.set(true); equal('-', '-', fixture); equal('-0', '-0', fixture); @@ -297,9 +296,9 @@ describe('Directive: Mask (Percent)', () => { }); it('percent with allowNegative = true, decimalMarker = ,', () => { - component.mask = 'percent'; - component.decimalMarker = ','; - component.allowNegativeNumbers = true; + component.mask.set('percent'); + component.decimalMarker.set(','); + component.allowNegativeNumbers.set(true); equal('-', '-', fixture); equal('-0', '-0', fixture); @@ -309,9 +308,9 @@ describe('Directive: Mask (Percent)', () => { }); it('percent 2 with allowNegative = true, decimalMarker = ,', () => { - component.mask = 'percent.2'; - component.decimalMarker = ','; - component.allowNegativeNumbers = true; + component.mask.set('percent.2'); + component.decimalMarker.set(','); + component.allowNegativeNumbers.set(true); equal('-', '-', fixture); equal('-0', '-0', fixture); @@ -326,9 +325,9 @@ describe('Directive: Mask (Percent)', () => { }); it('percent 3 with allowNegative = true, decimalMarker = ,', () => { - component.mask = 'percent.3'; - component.allowNegativeNumbers = true; - component.decimalMarker = ','; + component.mask.set('percent.3'); + component.allowNegativeNumbers.set(true); + component.decimalMarker.set(','); equal('-', '-', fixture); equal('-0', '-0', fixture); diff --git a/projects/ngx-mask-lib/src/test/place-holder-character.spec.ts b/projects/ngx-mask-lib/src/test/place-holder-character.spec.ts index ef95b8ab..7c983c11 100644 --- a/projects/ngx-mask-lib/src/test/place-holder-character.spec.ts +++ b/projects/ngx-mask-lib/src/test/place-holder-character.spec.ts @@ -4,8 +4,7 @@ import { ReactiveFormsModule } from '@angular/forms'; import { TestMaskComponent } from './utils/test-component.component'; import { equal } from './utils/test-functions.component'; -import { provideNgxMask } from '../lib/ngx-mask.providers'; -import { NgxMaskDirective } from '../lib/ngx-mask.directive'; +import { NgxMaskDirective, provideNgxMask } from 'ngx-mask'; describe('Directive: Mask (Placeholder character)', () => { let fixture: ComponentFixture; @@ -22,25 +21,25 @@ describe('Directive: Mask (Placeholder character)', () => { }); it('should display the default placeholder when not configured', () => { - component.mask = '(000) 000-0000'; - component.showMaskTyped = true; + component.mask.set('(000) 000-0000'); + component.showMaskTyped.set(true); equal('', '(___) ___-____', fixture); equal('2345678', '(234) 567-8___', fixture); - component.prefix = '+7'; - component.showMaskTyped = true; + component.prefix.set('+7'); + component.showMaskTyped.set(true); equal('', '+7(___) ___-____', fixture); equal('2345678', '+7(234) 567-8___', fixture); - component.mask = 'IP'; - component.prefix = ''; - component.showMaskTyped = true; + component.mask.set('IP'); + component.prefix.set(''); + component.showMaskTyped.set(true); equal('', '_._._._', fixture); equal('1921681', '192.168.1_', fixture); - component.mask = 'CPF_CNPJ'; - component.prefix = ''; - component.showMaskTyped = true; + component.mask.set('CPF_CNPJ'); + component.prefix.set(''); + component.showMaskTyped.set(true); equal('', '___.___.___-__', fixture); equal('1', '1__.___.___-__', fixture); equal('12', '12_.___.___-__', fixture); @@ -57,9 +56,9 @@ describe('Directive: Mask (Placeholder character)', () => { equal('1234567890123', '12.345.678/9012-3_', fixture); equal('12345678901234', '12.345.678/9012-34', fixture); - component.mask = '000.000.000-00||00.000.000/0000-00'; - component.prefix = ''; - component.showMaskTyped = true; + component.mask.set('000.000.000-00||00.000.000/0000-00'); + component.prefix.set(''); + component.showMaskTyped.set(true); equal('1', '1__.___.___-__', fixture); equal('12', '12_.___.___-__', fixture); equal('123', '123.___.___-__', fixture); @@ -75,9 +74,9 @@ describe('Directive: Mask (Placeholder character)', () => { equal('1234567890123', '12.345.678/9012-3_', fixture); equal('12345678901234', '12.345.678/9012-34', fixture); - component.mask = '(00) 0000-0000||(00) 0 0000-0000'; - component.prefix = ''; - component.showMaskTyped = true; + component.mask.set('(00) 0000-0000||(00) 0 0000-0000'); + component.prefix.set(''); + component.showMaskTyped.set(true); equal('1', '(1_) ____-____', fixture); equal('12', '(12) ____-____', fixture); equal('123', '(12) 3___-____', fixture); @@ -104,26 +103,26 @@ describe('Directive: Mask (Placeholder character)', () => { }); it('should display the modified placeholder when configured', () => { - component.mask = '(000) 000-0000'; - component.showMaskTyped = true; - component.placeHolderCharacter = '*'; + component.mask.set('(000) 000-0000'); + component.showMaskTyped.set(true); + component.placeHolderCharacter.set('*'); equal('', '(***) ***-****', fixture); equal('2345678', '(234) 567-8***', fixture); - component.prefix = '+7'; - component.showMaskTyped = true; + component.prefix.set('+7'); + component.showMaskTyped.set(true); equal('', '+7(***) ***-****', fixture); equal('2345678', '+7(234) 567-8***', fixture); - component.mask = 'IP'; - component.prefix = ''; - component.showMaskTyped = true; + component.mask.set('IP'); + component.prefix.set(''); + component.showMaskTyped.set(true); equal('', '*.*.*.*', fixture); equal('1921681', '192.168.1*', fixture); - component.mask = 'CPF_CNPJ'; - component.prefix = ''; - component.showMaskTyped = true; + component.mask.set('CPF_CNPJ'); + component.prefix.set(''); + component.showMaskTyped.set(true); equal('', '***.***.***-**', fixture); equal('1', '1**.***.***-**', fixture); equal('12', '12*.***.***-**', fixture); diff --git a/projects/ngx-mask-lib/src/test/repeat-mask.spec.ts b/projects/ngx-mask-lib/src/test/repeat-mask.spec.ts index 318468a1..dbecd372 100644 --- a/projects/ngx-mask-lib/src/test/repeat-mask.spec.ts +++ b/projects/ngx-mask-lib/src/test/repeat-mask.spec.ts @@ -4,8 +4,7 @@ import { ReactiveFormsModule } from '@angular/forms'; import { TestMaskComponent } from './utils/test-component.component'; import { equal } from './utils/test-functions.component'; -import { provideNgxMask } from '../lib/ngx-mask.providers'; -import { NgxMaskDirective } from '../lib/ngx-mask.directive'; +import { NgxMaskDirective, provideNgxMask } from 'ngx-mask'; describe('Directive: Mask (Repeat)', () => { let fixture: ComponentFixture; @@ -22,40 +21,40 @@ describe('Directive: Mask (Repeat)', () => { }); it('repeat mask', () => { - component.mask = '0{4}'; + component.mask.set('0{4}'); equal('1234', '1234', fixture); }); it('should work when repeat value is more then 9', () => { - component.mask = 'A{12}'; + component.mask.set('A{12}'); equal('123456789ABC', '123456789ABC', fixture); }); it('should correctly handle leading zeros', () => { - component.mask = 'A{02}'; + component.mask.set('A{02}'); equal('1234', '12', fixture); - component.mask = 'A{0000012}'; + component.mask.set('A{0000012}'); equal('123456789ABCDE', '123456789ABC', fixture); }); it('should repeat digits only', () => { - component.mask = '0{6}'; + component.mask.set('0{6}'); equal('AbC12345678Bfc', '123456', fixture); }); it('should repeat digits and letters', () => { - component.mask = 'A{6}'; + component.mask.set('A{6}'); equal('AbC12345678Bfc', 'AbC123', fixture); }); it('should repeat only letters', () => { - component.mask = 'S{6}'; + component.mask.set('S{6}'); equal('AbC12345678Bfc', 'AbCBfc', fixture); }); it('repeat mask date', () => { - component.mask = '0{2}/0{2}/0{4}'; + component.mask.set('0{2}/0{2}/0{4}'); equal('12345678', '12/34/5678', fixture); }); @@ -65,13 +64,13 @@ describe('Directive: Mask (Repeat)', () => { // }); it('specialCharacters quotes', () => { - component.mask = '0-0-0*-0*-0*'; + component.mask.set('0-0-0*-0*-0*'); equal('123', '1-2-3', fixture); equal('123-42-', '1-2-3-42-', fixture); }); it('should repeat digits only and work with dynamicMask', () => { - component.mask = '0{4}||0{6}'; + component.mask.set('0{4}||0{6}'); equal('1', '1', fixture); equal('12', '12', fixture); equal('123', '123', fixture); @@ -81,7 +80,7 @@ describe('Directive: Mask (Repeat)', () => { }); it('should repeat digits only and work with dynamicMask', () => { - component.mask = 'SS0{4}'; + component.mask.set('SS0{4}'); equal('d', 'd', fixture); equal('dd', 'dd', fixture); equal('dd1', 'dd1', fixture); @@ -91,7 +90,7 @@ describe('Directive: Mask (Repeat)', () => { }); it('should repeat digits only and work with dynamicMask', () => { - component.mask = 'A{5}.S{2}'; + component.mask.set('A{5}.S{2}'); equal('d', 'd', fixture); equal('dd', 'dd', fixture); equal('dd1', 'dd1', fixture); @@ -102,7 +101,7 @@ describe('Directive: Mask (Repeat)', () => { }); it('should A{8} be valid if length 8', () => { - component.mask = 'A{8}'; + component.mask.set('A{8}'); equal('1', '1', fixture); expect(component.form.valid).toBe(false); equal('12', '12', fixture); @@ -128,7 +127,7 @@ describe('Directive: Mask (Repeat)', () => { }); it('should A{9} be valid if length 9', () => { - component.mask = 'A{9}'; + component.mask.set('A{9}'); equal('1', '1', fixture); expect(component.form.valid).toBe(false); equal('12', '12', fixture); @@ -157,7 +156,7 @@ describe('Directive: Mask (Repeat)', () => { }); it('should A{10} be valid if length 10', () => { - component.mask = 'A{10}'; + component.mask.set('A{10}'); equal('1', '1', fixture); expect(component.form.valid).toBe(false); equal('12', '12', fixture); diff --git a/projects/ngx-mask-lib/src/test/secure-mask.spec.ts b/projects/ngx-mask-lib/src/test/secure-mask.spec.ts index 295659a5..7916b436 100644 --- a/projects/ngx-mask-lib/src/test/secure-mask.spec.ts +++ b/projects/ngx-mask-lib/src/test/secure-mask.spec.ts @@ -5,8 +5,7 @@ import { ReactiveFormsModule } from '@angular/forms'; import { TestMaskComponent } from './utils/test-component.component'; import { equal, typeTest } from './utils/test-functions.component'; -import { provideNgxMask } from 'ngx-mask'; -import { NgxMaskDirective } from 'ngx-mask'; +import { provideNgxMask, NgxMaskDirective } from 'ngx-mask'; import type { DebugElement } from '@angular/core'; import { By } from '@angular/platform-browser'; @@ -25,50 +24,50 @@ describe('Directive: Mask (Secure)', () => { }); it('it checks secure input functionality ', () => { - component.mask = 'XXX/X0/0000'; - component.hiddenInput = true; + component.mask.set('XXX/X0/0000'); + component.hiddenInput.set(true); equal('1234', '***/*', fixture); expect(component.form.value).toBe('1234'); }); it('it checks secure input functionality ', () => { - component.mask = 'XXX/XX/0000'; - component.hiddenInput = true; + component.mask.set('XXX/XX/0000'); + component.hiddenInput.set(true); equal('123456789', '***/**/6789', fixture); expect(component.form.value).toBe('123456789'); }); it('it checks secure input functionality ', () => { - component.mask = 'XXX/XX/XXX0'; - component.hiddenInput = true; + component.mask.set('XXX/XX/XXX0'); + component.hiddenInput.set(true); equal('123456789', '***/**/***9', fixture); expect(component.form.value).toBe('123456789'); }); it('it checks secure input functionality ', () => { - component.mask = 'XXX/XX/XXXX'; - component.hiddenInput = true; + component.mask.set('XXX/XX/XXXX'); + component.hiddenInput.set(true); equal('123456789', '***/**/****', fixture); expect(component.form.value).toBe('123456789'); }); it('it checks secure input functionality ', () => { - component.mask = '0000-00-XXXX'; - component.hiddenInput = true; + component.mask.set('0000-00-XXXX'); + component.hiddenInput.set(true); equal('123456789', '1234-56-***', fixture); expect(component.form.value).toBe('123456789'); }); it('it checks secure input functionality ', () => { - component.mask = '0000-X0-XXXX'; - component.hiddenInput = true; + component.mask.set('0000-X0-XXXX'); + component.hiddenInput.set(true); equal('123456789', '1234-*6-***', fixture); expect(component.form.value).toBe('123456789'); }); it('it checks secure input functionality on reset', () => { - component.mask = 'XXX/X0/0000'; - component.hiddenInput = true; + component.mask.set('XXX/X0/0000'); + component.hiddenInput.set(true); typeTest('54321', fixture); component.form.reset(); @@ -79,16 +78,16 @@ describe('Directive: Mask (Secure)', () => { }); it('it checks secure input functionality on reset then typed', () => { - component.mask = 'XXX/X0/0000'; - component.hiddenInput = true; + component.mask.set('XXX/X0/0000'); + component.hiddenInput.set(true); typeTest('54321', fixture); component.form.reset(); equal('98765', '***/*5', fixture); }); it('it checks secure input functionality on setValue(longer string)', () => { - component.mask = 'XXX/X0/0000'; - component.hiddenInput = true; + component.mask.set('XXX/X0/0000'); + component.hiddenInput.set(true); typeTest('54321', fixture); component.form.reset(); @@ -99,14 +98,14 @@ describe('Directive: Mask (Secure)', () => { }); it('should be same form state (pristine) after mask change triggerOnMaskChange = true', async () => { - component.mask = 'XXX/X0/0000'; - component.hiddenInput = true; - component.triggerOnMaskChange = true; + component.mask.set('XXX/X0/0000'); + component.hiddenInput.set(true); + component.triggerOnMaskChange.set(true); component.form.reset('123456789'); fixture.detectChanges(); expect(component.form.dirty).toBeTruthy(); expect(component.form.pristine).toBeFalsy(); - component.mask = '000/00/0000'; + component.mask.set('000/00/0000'); fixture.detectChanges(); expect(component.form.dirty).toBeTruthy(); expect(component.form.pristine).toBeFalsy(); @@ -116,15 +115,15 @@ describe('Directive: Mask (Secure)', () => { }); it('should be same form state (dirty) after mask change', () => { - component.mask = 'XXX/X0/0000'; - component.hiddenInput = true; + component.mask.set('XXX/X0/0000'); + component.hiddenInput.set(true); component.form.reset('123456789'); component.form.markAsDirty(); component.form.markAsTouched(); fixture.detectChanges(); expect(component.form.dirty).toBeTruthy(); expect(component.form.pristine).toBeFalsy(); - component.mask = '000/00/0000'; + component.mask.set('000/00/0000'); fixture.detectChanges(); expect(component.form.dirty).toBeTruthy(); expect(component.form.pristine).toBeFalsy(); @@ -134,8 +133,8 @@ describe('Directive: Mask (Secure)', () => { }); it('should not keep shadow copy when form reset', () => { - component.hiddenInput = true; - component.mask = 'XXX/X0/0000'; + component.hiddenInput.set(true); + component.mask.set('XXX/X0/0000'); equal('54321', '***/*1', fixture); typeTest('1', fixture); expect(component.form.value).toBe('1'); @@ -146,19 +145,19 @@ describe('Directive: Mask (Secure)', () => { }); it('mask changes should work with null input', () => { - component.hiddenInput = true; - component.mask = '000/00/0000'; + component.hiddenInput.set(true); + component.mask.set('000/00/0000'); equal('987654321', '987/65/4321', fixture); component.form.reset(); - component.mask = 'XXX/X0/0000'; + component.mask.set('XXX/X0/0000'); equal('54321', '***/*1', fixture); expect(component.form.value).toBe('54321'); }); it('it checks secure input functionality on reset then typed', () => { - component.mask = 'XXX/X0/0000'; - component.hiddenInput = true; - component.showMaskTyped = true; + component.mask.set('XXX/X0/0000'); + component.hiddenInput.set(true); + component.showMaskTyped.set(true); equal('98765', '***/*5/____', fixture); equal('1234', '***/*_/____', fixture); equal('', '___/__/____', fixture); @@ -184,9 +183,9 @@ describe('Directive: Mask (Secure)', () => { })); it('hideInput with showMaskTyped mask=XXXX', () => { - component.mask = 'XXXX'; - component.hiddenInput = true; - component.showMaskTyped = true; + component.mask.set('XXXX'); + component.hiddenInput.set(true); + component.showMaskTyped.set(true); equal('1', '*___', fixture); equal('12', '**__', fixture); equal('123', '***_', fixture); @@ -194,9 +193,9 @@ describe('Directive: Mask (Secure)', () => { }); it('hideInput with showMaskTyped mask=XX-XX', () => { - component.mask = 'XX-XX'; - component.hiddenInput = true; - component.showMaskTyped = true; + component.mask.set('XX-XX'); + component.hiddenInput.set(true); + component.showMaskTyped.set(true); equal('1234', '**-**', fixture); }); @@ -206,11 +205,11 @@ describe('Directive: Mask (Secure)', () => { const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; spyOnProperty(document, 'activeElement').and.returnValue(inputTarget); fixture.detectChanges(); - component.mask = 'XXX-XX-XXXX'; - component.hiddenInput = true; + component.mask.set('XXX-XX-XXXX'); + component.hiddenInput.set(true); equal('1234', '***-*', fixture); fixture.detectChanges(); - component.hiddenInput = false; + component.hiddenInput.set(false); equal(inputTarget.value, '123-4', fixture, true); }); @@ -219,11 +218,11 @@ describe('Directive: Mask (Secure)', () => { const inputTarget: HTMLInputElement = debug.nativeElement as HTMLInputElement; spyOnProperty(document, 'activeElement').and.returnValue(inputTarget); fixture.detectChanges(); - component.mask = 'XXX-XX-XXXX'; - component.hiddenInput = true; + component.mask.set('XXX-XX-XXXX'); + component.hiddenInput.set(true); equal('123456', '***-**-*', fixture); fixture.detectChanges(); - component.hiddenInput = false; + component.hiddenInput.set(false); equal(inputTarget.value, '123-45-6', fixture, true); }); @@ -232,12 +231,12 @@ describe('Directive: Mask (Secure)', () => { const inputTarget: HTMLInputElement = debug.nativeElement as HTMLInputElement; spyOnProperty(document, 'activeElement').and.returnValue(inputTarget); fixture.detectChanges(); - component.mask = 'XXX/XX/XXXX'; - component.hiddenInput = true; + component.mask.set('XXX/XX/XXXX'); + component.hiddenInput.set(true); equal('123456789', '***/**/****', fixture); expect(component.form.value).toBe('123456789'); fixture.detectChanges(); - component.hiddenInput = false; + component.hiddenInput.set(false); equal(inputTarget.value, '123/45/6789', fixture, true); expect(component.form.value).toBe('123456789'); }); diff --git a/projects/ngx-mask-lib/src/test/separator-non-en-locale.spec.ts b/projects/ngx-mask-lib/src/test/separator-non-en-locale.spec.ts index 527fc9bb..f14503af 100644 --- a/projects/ngx-mask-lib/src/test/separator-non-en-locale.spec.ts +++ b/projects/ngx-mask-lib/src/test/separator-non-en-locale.spec.ts @@ -5,8 +5,7 @@ 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'; +import { NgxMaskDirective, provideNgxMask } from 'ngx-mask'; import { By } from '@angular/platform-browser'; // FR locale uses comma as decimal marker @@ -25,38 +24,38 @@ describe('Separator: Mask with FR locale', () => { }); it('Should work right when reset decimalMarker', () => { - component.mask = 'separator.2'; - component.decimalMarker = '.'; + component.mask.set('separator.2'); + component.decimalMarker.set('.'); 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 = '.'; + component.mask.set('separator.2'); + component.thousandSeparator.set(','); + component.decimalMarker.set('.'); 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 = '.'; + component.mask.set('separator.2'); + component.thousandSeparator.set(','); + component.decimalMarker.set('.'); 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 = '.'; + component.mask.set('separator.2'); + component.thousandSeparator.set(' '); + component.decimalMarker.set('.'); 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 = ['.', ',']; + component.mask.set('separator.2'); + component.thousandSeparator.set(' '); + component.decimalMarker.set(['.', ',']); typeTest('12 345,67', fixture); expect(component.form.value).toBe('12345.67'); @@ -66,10 +65,10 @@ describe('Separator: Mask with FR locale', () => { }); it('should show - at input', fakeAsync(() => { - component.mask = 'separator.2'; - component.thousandSeparator = ' '; - component.decimalMarker = ','; - component.allowNegativeNumbers = true; + component.mask.set('separator.2'); + component.thousandSeparator.set(' '); + component.decimalMarker.set(','); + component.allowNegativeNumbers.set(true); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; spyOnProperty(document, 'activeElement').and.returnValue(inputTarget); diff --git a/projects/ngx-mask-lib/src/test/separator.spec.ts b/projects/ngx-mask-lib/src/test/separator.spec.ts index 1f2e8ea0..521abee4 100644 --- a/projects/ngx-mask-lib/src/test/separator.spec.ts +++ b/projects/ngx-mask-lib/src/test/separator.spec.ts @@ -5,9 +5,7 @@ import type { DebugElement } 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'; -import { initialConfig } from 'ngx-mask'; +import { initialConfig, NgxMaskDirective, provideNgxMask } from 'ngx-mask'; describe('Separator: Mask', () => { let fixture: ComponentFixture; @@ -24,113 +22,113 @@ describe('Separator: Mask', () => { }); it('separator for empty', () => { - component.mask = 'separator'; + component.mask.set('separator'); equal('', '', fixture); }); it('separator for 100', () => { - component.mask = 'separator'; + component.mask.set('separator'); equal('100', '100', fixture); }); it('separator for -100', () => { - component.mask = 'separator'; - component.allowNegativeNumbers = true; + component.mask.set('separator'); + component.allowNegativeNumbers.set(true); equal('-100', '-100', fixture); }); it('separator for 1000', () => { - component.mask = 'separator'; + component.mask.set('separator'); equal('1000', '1 000', fixture); }); it('separator for -1000', () => { - component.mask = 'separator'; - component.allowNegativeNumbers = true; + component.mask.set('separator'); + component.allowNegativeNumbers.set(true); equal('-1000', '-1 000', fixture); }); it('separator for 10000', () => { - component.mask = 'separator'; + component.mask.set('separator'); equal('10000', '10 000', fixture); }); it('separator for -10000', () => { - component.mask = 'separator'; - component.allowNegativeNumbers = true; + component.mask.set('separator'); + component.allowNegativeNumbers.set(true); equal('-10000', '-10 000', fixture); }); it('separator for -100000', () => { - component.mask = 'separator'; - component.allowNegativeNumbers = true; + component.mask.set('separator'); + component.allowNegativeNumbers.set(true); equal('-100000', '-100 000', fixture); }); it('separator for 100000', () => { - component.mask = 'separator'; + component.mask.set('separator'); equal('100000', '100 000', fixture); }); it('separator for 1000000', () => { - component.mask = 'separator'; + component.mask.set('separator'); equal('1000000', '1 000 000', fixture); }); it('separator for -1000000', () => { - component.mask = 'separator'; - component.allowNegativeNumbers = true; + component.mask.set('separator'); + component.allowNegativeNumbers.set(true); equal('-1000000', '-1 000 000', fixture); }); it('should limit separator to 1000', () => { - component.mask = 'separator'; - component.separatorLimit = '1000'; + component.mask.set('separator'); + component.separatorLimit.set('1000'); equal('1000000', '1 000', fixture); }); it('separator precision 2 for 1000000.00', () => { - component.mask = 'separator.2'; + component.mask.set('separator.2'); equal('1000000.00', '1 000 000.00', fixture); }); it('separator precision 2 for -1000000.00', () => { - component.mask = 'separator.2'; - component.allowNegativeNumbers = true; + component.mask.set('separator.2'); + component.allowNegativeNumbers.set(true); equal('-1000000.00', '-1 000 000.00', fixture); }); it('should limit separator with precision 2 to 10000', () => { - component.mask = 'separator.2'; - component.separatorLimit = '10000'; + component.mask.set('separator.2'); + component.separatorLimit.set('10000'); equal('1000000.00', '10 000.00', fixture); }); it('should limit separator with precision 2 to 10 000', () => { - component.mask = 'separator.2'; - component.separatorLimit = '10 000'; + component.mask.set('separator.2'); + component.separatorLimit.set('10 000'); equal('1000000.00', '10 000.00', fixture); }); it('separator precision 0 for 1000000.00', () => { - component.mask = 'separator.0'; + component.mask.set('separator.0'); equal('1000000.00', '1 000 000', fixture); }); it('separator precision 2 with 0 after point for 1000000.00', () => { - component.mask = 'separator.2'; + component.mask.set('separator.2'); equal('1000000.20', '1 000 000.20', fixture); }); it('separator.2 with suffix', () => { - component.mask = 'separator.2'; - component.suffix = '₽'; + component.mask.set('separator.2'); + component.suffix.set('₽'); equal('50', '50₽', fixture); equal('123 4', '1 234₽', fixture); equal('50.50', '50.50₽', fixture); }); it('separator for letters', () => { - component.mask = 'separator'; + component.mask.set('separator'); equal('a', '', fixture); equal('1a', '1', fixture); equal('1000a', '1 000', fixture); @@ -138,122 +136,122 @@ describe('Separator: Mask', () => { }); it('separator thousandSeparator . for 1000000', () => { - component.mask = 'separator'; - component.thousandSeparator = '.'; + component.mask.set('separator'); + component.thousandSeparator.set('.'); equal('1000000', '1.000.000', fixture); }); it('should not add any sperator if thousandSeparator set as empty string', () => { - component.mask = 'separator'; - component.thousandSeparator = ''; + component.mask.set('separator'); + component.thousandSeparator.set(''); equal('1000000', '1000000', fixture); }); it('should not accept more than one minus signal at the beginning of input for separator thousandSeparator . for --1000', () => { - component.mask = 'separator'; - component.thousandSeparator = '.'; - component.allowNegativeNumbers = true; + component.mask.set('separator'); + component.thousandSeparator.set('.'); + component.allowNegativeNumbers.set(true); equal('--1000', '-1.000', fixture); }); it('should not accept more than one minus signal for separator thousandSeparator . for -100-0000', () => { - component.mask = 'separator'; - component.thousandSeparator = '.'; - component.allowNegativeNumbers = true; + component.mask.set('separator'); + component.thousandSeparator.set('.'); + component.allowNegativeNumbers.set(true); equal('-100-0000', '-1.000.000', fixture); }); it('should limit separator thousandSeparator . to 100000', () => { - component.mask = 'separator'; - component.thousandSeparator = '.'; - component.separatorLimit = '100000'; + component.mask.set('separator'); + component.thousandSeparator.set('.'); + component.separatorLimit.set('100000'); equal('1000000', '100.000', fixture); }); it('should limit separator thousandSeparator . to -100000', () => { - component.mask = 'separator'; - component.thousandSeparator = '.'; - component.separatorLimit = '100000'; - component.allowNegativeNumbers = true; + component.mask.set('separator'); + component.thousandSeparator.set('.'); + component.separatorLimit.set('100000'); + component.allowNegativeNumbers.set(true); equal('-1000000', '-100.000', fixture); }); it('separator thousandSeparator . precision 2 for 1000000.00', () => { - component.mask = 'separator.2'; - component.thousandSeparator = '.'; + component.mask.set('separator.2'); + component.thousandSeparator.set('.'); equal('1000000,00', '1.000.000,00', fixture); }); it('separator thousandSeparator . precision 2 for -1000000.00', () => { - component.mask = 'separator.2'; - component.thousandSeparator = '.'; - component.allowNegativeNumbers = true; + component.mask.set('separator.2'); + component.thousandSeparator.set('.'); + component.allowNegativeNumbers.set(true); equal('-1000000,00', '-1.000.000,00', fixture); }); it('separator thousandSeparator . precision 2 with 0 after point for 1000000.00', () => { - component.mask = 'separator.2'; - component.thousandSeparator = '.'; + component.mask.set('separator.2'); + component.thousandSeparator.set('.'); equal('1000000,20', '1.000.000,20', fixture); }); it('separator thousandSeparator . precision 0 for 1000000.00', () => { - component.mask = 'separator.0'; - component.thousandSeparator = '.'; + component.mask.set('separator.0'); + component.thousandSeparator.set('.'); equal('1000000,00', '1.000.000', fixture); }); it('separator thousandSeparator , for 1000000', () => { - component.mask = 'separator'; - component.thousandSeparator = ','; + component.mask.set('separator'); + component.thousandSeparator.set(','); equal('1000000', '1,000,000', fixture); }); it('separator thousandSeparator , precision 2 for 1000000.00', () => { - component.mask = 'separator.2'; - component.thousandSeparator = ','; + component.mask.set('separator.2'); + component.thousandSeparator.set(','); equal('1000000.00', '1,000,000.00', fixture); }); it('separator thousandSeparator , precision 2 with 0 after point for 1000000.00', () => { - component.mask = 'separator.2'; - component.thousandSeparator = ','; + component.mask.set('separator.2'); + component.thousandSeparator.set(','); equal('1000000.20', '1,000,000.20', fixture); }); it('separator thousandSeparator , precision 0 for 1000000.00', () => { - component.mask = 'separator.0'; - component.thousandSeparator = ','; + component.mask.set('separator.0'); + component.thousandSeparator.set(','); equal('1000000.00', '1,000,000', fixture); }); it(`separator thousandSeparator ' for 1000000`, () => { - component.mask = 'separator'; - component.thousandSeparator = `'`; + component.mask.set('separator'); + component.thousandSeparator.set(`'`); equal('1000000', `1'000'000`, fixture); }); it(`separator thousandSeparator ' precision 2 for 1000000.00`, () => { - component.mask = 'separator.2'; - component.thousandSeparator = `'`; + component.mask.set('separator.2'); + component.thousandSeparator.set(`'`); equal('1000000.00', `1'000'000.00`, fixture); }); it(`separator thousandSeparator ' precision 2 with 0 after point for 1000000.00`, () => { - component.mask = 'separator.2'; - component.thousandSeparator = `'`; + component.mask.set('separator.2'); + component.thousandSeparator.set(`'`); equal('1000000.20', `1'000'000.20`, fixture); }); it(`separator thousandSeparator ' precision 0 for 1000000.00`, () => { - component.mask = 'separator.0'; - component.thousandSeparator = `'`; + component.mask.set('separator.0'); + component.thousandSeparator.set(`'`); equal('1000000.00', `1'000'000`, fixture); }); it('should not shift cursor for input in-between digits', () => { - component.mask = 'separator.0'; - component.thousandSeparator = ','; + component.mask.set('separator.0'); + component.thousandSeparator.set(','); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; spyOnProperty(document, 'activeElement').and.returnValue(inputTarget); @@ -268,8 +266,8 @@ describe('Separator: Mask', () => { expect(inputTarget.selectionStart).toEqual(3); }); it('should not shift cursor for input in-between digits', () => { - component.mask = 'separator.0'; - component.thousandSeparator = '.'; + component.mask.set('separator.0'); + component.thousandSeparator.set('.'); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; spyOnProperty(document, 'activeElement').and.returnValue(inputTarget); @@ -284,8 +282,8 @@ describe('Separator: Mask', () => { expect(inputTarget.selectionStart).toEqual(3); }); it('should not shift cursor for input in-between digits', () => { - component.mask = 'separator.2'; - component.thousandSeparator = ','; + component.mask.set('separator.2'); + component.thousandSeparator.set(','); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; spyOnProperty(document, 'activeElement').and.returnValue(inputTarget); @@ -300,8 +298,8 @@ describe('Separator: Mask', () => { expect(inputTarget.selectionStart).toEqual(3); }); it('should not shift cursor for input in-between digits', () => { - component.mask = 'separator.2'; - component.thousandSeparator = '.'; + component.mask.set('separator.2'); + component.thousandSeparator.set('.'); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; spyOnProperty(document, 'activeElement').and.returnValue(inputTarget); @@ -316,8 +314,8 @@ describe('Separator: Mask', () => { expect(inputTarget.selectionStart).toEqual(3); }); it('should not shift cursor for input in-between digits', () => { - component.mask = 'separator'; - component.thousandSeparator = ','; + component.mask.set('separator'); + component.thousandSeparator.set(','); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; spyOnProperty(document, 'activeElement').and.returnValue(inputTarget); @@ -332,8 +330,8 @@ describe('Separator: Mask', () => { expect(inputTarget.selectionStart).toEqual(3); }); it('should not shift cursor for input in-between digits', () => { - component.mask = 'separator'; - component.thousandSeparator = '.'; + component.mask.set('separator'); + component.thousandSeparator.set('.'); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; spyOnProperty(document, 'activeElement').and.returnValue(inputTarget); @@ -349,8 +347,8 @@ describe('Separator: Mask', () => { }); it('should not shift cursor for backspace on in-between digits', () => { - component.mask = 'separator.0'; - component.thousandSeparator = ','; + component.mask.set('separator.0'); + component.thousandSeparator.set(','); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; spyOnProperty(document, 'activeElement').and.returnValue(inputTarget); @@ -371,8 +369,8 @@ describe('Separator: Mask', () => { expect(inputTarget.selectionStart).toEqual(4); }); it('should not shift cursor for backspace on in-between digits', () => { - component.mask = 'separator.0'; - component.thousandSeparator = '.'; + component.mask.set('separator.0'); + component.thousandSeparator.set('.'); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; spyOnProperty(document, 'activeElement').and.returnValue(inputTarget); @@ -394,8 +392,8 @@ describe('Separator: Mask', () => { }); it('should not shift cursor for backspace on in-between digits', () => { - component.mask = 'separator.2'; - component.thousandSeparator = ','; + component.mask.set('separator.2'); + component.thousandSeparator.set(','); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; spyOnProperty(document, 'activeElement').and.returnValue(inputTarget); @@ -416,8 +414,8 @@ describe('Separator: Mask', () => { expect(inputTarget.selectionStart).toEqual(7); }); it('should not shift cursor for backspace on in-between digits', () => { - component.mask = 'separator.2'; - component.thousandSeparator = '.'; + component.mask.set('separator.2'); + component.thousandSeparator.set('.'); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; spyOnProperty(document, 'activeElement').and.returnValue(inputTarget); @@ -439,8 +437,8 @@ describe('Separator: Mask', () => { }); it('should not shift cursor on backspace when result has no separator', () => { - component.mask = 'separator.0'; - component.thousandSeparator = ','; + component.mask.set('separator.0'); + component.thousandSeparator.set(','); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; spyOnProperty(document, 'activeElement').and.returnValue(inputTarget); @@ -462,8 +460,8 @@ describe('Separator: Mask', () => { }); it('caret should remain in position when deleting the first digit', () => { - component.mask = 'separator'; - component.thousandSeparator = ','; + component.mask.set('separator'); + component.thousandSeparator.set(','); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; spyOnProperty(document, 'activeElement').and.returnValue(inputTarget); @@ -484,9 +482,9 @@ describe('Separator: Mask', () => { }); it('cursor should move forward if the input starts with -, or 0, or 0.0, or 0.00, or 0.0000000', () => { - component.mask = 'separator.8'; - component.specialCharacters = [',', '.']; - component.allowNegativeNumbers = true; + component.mask.set('separator.8'); + component.specialCharacters.set([',', '.']); + component.allowNegativeNumbers.set(true); component.form.setValue(0.723); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; @@ -519,38 +517,38 @@ describe('Separator: Mask', () => { }); it('Should work right when reset decimalMarker', () => { - component.mask = 'separator.2'; - component.decimalMarker = ','; + component.mask.set('separator.2'); + component.decimalMarker.set(','); 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 = ','; + component.mask.set('separator.2'); + component.thousandSeparator.set('.'); + component.decimalMarker.set(','); 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 = ','; + component.mask.set('separator.2'); + component.thousandSeparator.set('.'); + component.decimalMarker.set(','); equal('12345,67', '12.345,67', fixture); }); it('check formControl value to be number when decimalMarker is comma', () => { - component.mask = 'separator.2'; - component.thousandSeparator = ' '; - component.decimalMarker = ','; + component.mask.set('separator.2'); + component.thousandSeparator.set(' '); + component.decimalMarker.set(','); 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 = ['.', ',']; + component.mask.set('separator.2'); + component.thousandSeparator.set(' '); + component.decimalMarker.set(['.', ',']); typeTest('12 345,67', fixture); expect(component.form.value).toBe('12345.67'); @@ -560,8 +558,8 @@ describe('Separator: Mask', () => { }); it('right handle character after first 0 value', () => { - component.mask = 'separator'; - component.decimalMarker = ','; + component.mask.set('separator'); + component.decimalMarker.set(','); equal('0', '0', fixture); equal('0,', '0,', fixture); equal('0 ', '0', fixture); @@ -570,7 +568,7 @@ describe('Separator: Mask', () => { equal('0@', '0', fixture); // TODO(inepipenko): strange thet return 0. // equal('0.', '0', fixture); - component.decimalMarker = '.'; + component.decimalMarker.set('.'); equal('0', '0', fixture); equal('0.', '0.', fixture); equal('0 ', '0', fixture); @@ -578,7 +576,7 @@ describe('Separator: Mask', () => { equal('0s', '0', fixture); equal('0@', '0', fixture); equal('0,', '0.', fixture); - component.decimalMarker = ['.', ',']; + component.decimalMarker.set(['.', ',']); equal('0', '0', fixture); equal('0.', '0.', fixture); equal('0,', '0.', fixture); @@ -589,8 +587,8 @@ describe('Separator: Mask', () => { }); it('should add trailing zero when separator.1 and leadZero = true', fakeAsync(() => { - component.mask = 'separator.1'; - component.leadZero = true; + component.mask.set('separator.1'); + component.leadZero.set(true); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; spyOnProperty(document, 'activeElement').and.returnValue(inputTarget); @@ -614,8 +612,8 @@ describe('Separator: Mask', () => { })); it('should not modify value with one decimal when separator.1 and leadZero = true', fakeAsync(() => { - component.mask = 'separator.1'; - component.leadZero = true; + component.mask.set('separator.1'); + component.leadZero.set(true); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; spyOnProperty(document, 'activeElement').and.returnValue(inputTarget); @@ -639,8 +637,8 @@ describe('Separator: Mask', () => { })); it('should display zeros at the end separator2', fakeAsync(() => { - component.mask = 'separator.2'; - component.leadZero = true; + component.mask.set('separator.2'); + component.leadZero.set(true); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; spyOnProperty(document, 'activeElement').and.returnValue(inputTarget); @@ -712,10 +710,10 @@ describe('Separator: Mask', () => { })); it('should display zeros at the end separator2', fakeAsync(() => { - component.mask = 'separator.2'; - component.leadZero = true; - component.thousandSeparator = ','; - component.decimalMarker = '.'; + component.mask.set('separator.2'); + component.leadZero.set(true); + component.thousandSeparator.set(','); + component.decimalMarker.set('.'); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; spyOnProperty(document, 'activeElement').and.returnValue(inputTarget); @@ -759,8 +757,8 @@ describe('Separator: Mask', () => { })); it('should display zeros at the end separator3', fakeAsync(() => { - component.mask = 'separator.3'; - component.leadZero = true; + component.mask.set('separator.3'); + component.leadZero.set(true); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; spyOnProperty(document, 'activeElement').and.returnValue(inputTarget); @@ -828,10 +826,10 @@ describe('Separator: Mask', () => { })); it('should display zeros at the end separator3', fakeAsync(() => { - component.mask = 'separator.3'; - component.leadZero = true; - component.thousandSeparator = ','; - component.decimalMarker = '.'; + component.mask.set('separator.3'); + component.leadZero.set(true); + component.thousandSeparator.set(','); + component.decimalMarker.set('.'); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; spyOnProperty(document, 'activeElement').and.returnValue(inputTarget); @@ -875,10 +873,10 @@ describe('Separator: Mask', () => { })); it('should display zeros at the end separator2', fakeAsync(() => { - component.mask = 'separator.2'; - component.leadZero = true; - component.thousandSeparator = '.'; - component.decimalMarker = ','; + component.mask.set('separator.2'); + component.leadZero.set(true); + component.thousandSeparator.set('.'); + component.decimalMarker.set(','); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; spyOnProperty(document, 'activeElement').and.returnValue(inputTarget); @@ -922,10 +920,10 @@ describe('Separator: Mask', () => { })); it('should display zeros at the end separator3', fakeAsync(() => { - component.mask = 'separator.3'; - component.leadZero = true; - component.thousandSeparator = '.'; - component.decimalMarker = ','; + component.mask.set('separator.3'); + component.leadZero.set(true); + component.thousandSeparator.set('.'); + component.decimalMarker.set(','); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; spyOnProperty(document, 'activeElement').and.returnValue(inputTarget); @@ -969,9 +967,9 @@ describe('Separator: Mask', () => { })); it('should display only 9 separator.2', () => { - component.mask = 'separator.2'; - component.thousandSeparator = ','; - component.decimalMarker = '.'; + component.mask.set('separator.2'); + component.thousandSeparator.set(','); + component.decimalMarker.set('.'); equal('999999999999999', '999,999,999,999,999', fixture); expect(component.form.value).toBe('999999999999999'); @@ -984,9 +982,9 @@ describe('Separator: Mask', () => { }); it('should display only 9 separator.3', () => { - component.mask = 'separator.3'; - component.thousandSeparator = ','; - component.decimalMarker = '.'; + component.mask.set('separator.3'); + component.thousandSeparator.set(','); + component.decimalMarker.set('.'); equal('999999999999999', '999,999,999,999,999', fixture); expect(component.form.value).toBe('999999999999999'); @@ -1000,8 +998,9 @@ describe('Separator: Mask', () => { equal('999999999999999.999', '999,999,999,999,999.999', fixture); expect(component.form.value).toBe('999999999999999.999'); }); + it('should keep the cursor position after deleting a character', () => { - component.mask = 'separator.2'; + component.mask.set('separator.2'); const inputElement = fixture.nativeElement.querySelector('input'); inputElement.value = '123 456'; inputElement.dispatchEvent(new Event('input')); @@ -1017,8 +1016,8 @@ describe('Separator: Mask', () => { }); it('should change formValue separator.2', fakeAsync(() => { - component.mask = 'separator.2'; - component.leadZero = true; + component.mask.set('separator.2'); + component.leadZero.set(true); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; spyOnProperty(document, 'activeElement').and.returnValue(inputTarget); @@ -1033,8 +1032,8 @@ describe('Separator: Mask', () => { })); it('should change formValue separator.3', fakeAsync(() => { - component.mask = 'separator.3'; - component.leadZero = true; + component.mask.set('separator.3'); + component.leadZero.set(true); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; spyOnProperty(document, 'activeElement').and.returnValue(inputTarget); @@ -1049,9 +1048,9 @@ describe('Separator: Mask', () => { })); it('separator.8 should return number value', fakeAsync(() => { - component.mask = 'separator.8'; - component.thousandSeparator = '.'; - component.decimalMarker = ','; + component.mask.set('separator.8'); + component.thousandSeparator.set('.'); + component.decimalMarker.set(','); equal('12,34', '12,34', fixture); tick(); @@ -1061,9 +1060,9 @@ describe('Separator: Mask', () => { })); it('should display value in input with decimalMarker , and leadZero with separator.2', fakeAsync(() => { - component.mask = 'separator.2'; - component.leadZero = true; - component.decimalMarker = ','; + component.mask.set('separator.2'); + component.leadZero.set(true); + component.decimalMarker.set(','); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; spyOnProperty(document, 'activeElement').and.returnValue(inputTarget); @@ -1087,9 +1086,9 @@ describe('Separator: Mask', () => { })); it('should display value in input with decimalMarker , and leadZero with separator.3', fakeAsync(() => { - component.mask = 'separator.3'; - component.leadZero = true; - component.decimalMarker = ','; + component.mask.set('separator.3'); + component.leadZero.set(true); + component.decimalMarker.set(','); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; spyOnProperty(document, 'activeElement').and.returnValue(inputTarget); @@ -1113,10 +1112,10 @@ describe('Separator: Mask', () => { })); it('should display value in input with decimalMarker , and leadZero with separator.3', fakeAsync(() => { - component.mask = 'separator.3'; - component.leadZero = true; - component.decimalMarker = ','; - component.thousandSeparator = '.'; + component.mask.set('separator.3'); + component.leadZero.set(true); + component.decimalMarker.set(','); + component.thousandSeparator.set('.'); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; spyOnProperty(document, 'activeElement').and.returnValue(inputTarget); @@ -1140,10 +1139,10 @@ describe('Separator: Mask', () => { })); it('should display value in input with decimalMarker , and leadZero with separator.2', fakeAsync(() => { - component.mask = 'separator.2'; - component.leadZero = true; - component.decimalMarker = ','; - component.thousandSeparator = '.'; + component.mask.set('separator.2'); + component.leadZero.set(true); + component.decimalMarker.set(','); + component.thousandSeparator.set('.'); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; spyOnProperty(document, 'activeElement').and.returnValue(inputTarget); @@ -1166,152 +1165,152 @@ describe('Separator: Mask', () => { expect(inputTarget.value).toBe('3.000,40'); })); - it('should not allow add two zeros to inputValue', fakeAsync(() => { - component.mask = 'separator.2'; - component.leadZero = true; - component.decimalMarker = ','; - component.thousandSeparator = '.'; - component.allowNegativeNumbers = true; + it('should not allow add two zeros to inputValue', () => { + component.mask.set('separator.2'); + component.leadZero.set(true); + component.decimalMarker.set(','); + component.thousandSeparator.set('.'); + component.allowNegativeNumbers.set(true); fixture.detectChanges(); equal('-00', '-0,0', fixture); - })); + }); - it('should not allow add two zeros to inputValue', fakeAsync(() => { - component.mask = 'separator.2'; - component.decimalMarker = '.'; - component.thousandSeparator = ','; - component.allowNegativeNumbers = true; + it('should not allow add two zeros to inputValue', () => { + component.mask.set('separator.2'); + component.decimalMarker.set('.'); + component.thousandSeparator.set(','); + component.allowNegativeNumbers.set(true); fixture.detectChanges(); equal('-00', '-0.0', fixture); - })); + }); - it('should not allow add two zeros to inputValue', fakeAsync(() => { - component.mask = 'separator.2'; - component.decimalMarker = ','; - component.thousandSeparator = '.'; - component.allowNegativeNumbers = true; + it('should not allow add two zeros to inputValue', () => { + component.mask.set('separator.2'); + component.decimalMarker.set(','); + component.thousandSeparator.set('.'); + component.allowNegativeNumbers.set(true); fixture.detectChanges(); equal('-00', '-0,0', fixture); - })); + }); - it('should not allow add two zeros to inputValue', fakeAsync(() => { - component.mask = 'separator.2'; - component.decimalMarker = ','; - component.thousandSeparator = ' '; - component.allowNegativeNumbers = true; + it('should not allow add two zeros to inputValue', () => { + component.mask.set('separator.2'); + component.decimalMarker.set(','); + component.thousandSeparator.set(' '); + component.allowNegativeNumbers.set(true); fixture.detectChanges(); equal('-00', '-0,0', fixture); - })); + }); - it('should allow minus after change it to true', fakeAsync(() => { - component.mask = 'separator.2'; - component.allowNegativeNumbers = false; + it('should allow minus after change it to true', () => { + component.mask.set('separator.2'); + component.allowNegativeNumbers.set(false); fixture.detectChanges(); equal('-1234', '1 234', fixture); - component.allowNegativeNumbers = true; + component.allowNegativeNumbers.set(true); equal('-1234', '-1 234', fixture); - })); + }); - it('should change value in formControl mask separator.2', fakeAsync(() => { - component.mask = 'separator.2'; - component.allowNegativeNumbers = true; - component.specialCharacters = [...initialConfig.specialCharacters]; + it('should change value in formControl mask separator.2', () => { + component.mask.set('separator.2'); + component.allowNegativeNumbers.set(true); + component.specialCharacters.set([...initialConfig.specialCharacters]); fixture.detectChanges(); equal('-1234.10', '-1 234.10', fixture); expect(component.form.value).toBe('-1234.10'); - })); + }); - it('should change value in formControl mask separator.3', fakeAsync(() => { - component.mask = 'separator.3'; - component.allowNegativeNumbers = true; - component.specialCharacters = [...initialConfig.specialCharacters]; + it('should change value in formControl mask separator.3', () => { + component.mask.set('separator.3'); + component.allowNegativeNumbers.set(true); + component.specialCharacters.set([...initialConfig.specialCharacters]); fixture.detectChanges(); equal('-1234.567', '-1 234.567', fixture); expect(component.form.value).toBe('-1234.567'); - })); + }); - it('should change value in formControl mask separator.1', fakeAsync(() => { - component.mask = 'separator.1'; - component.allowNegativeNumbers = true; - component.specialCharacters = [...initialConfig.specialCharacters]; + it('should change value in formControl mask separator.1', () => { + component.mask.set('separator.1'); + component.allowNegativeNumbers.set(true); + component.specialCharacters.set([...initialConfig.specialCharacters]); fixture.detectChanges(); equal('-1234.9', '-1 234.9', fixture); expect(component.form.value).toBe('-1234.9'); - })); + }); - it('should change value in formControl mask separator.0', fakeAsync(() => { - component.mask = 'separator.0'; - component.allowNegativeNumbers = true; - component.specialCharacters = [...initialConfig.specialCharacters]; + it('should change value in formControl mask separator.0', () => { + component.mask.set('separator.0'); + component.allowNegativeNumbers.set(true); + component.specialCharacters.set([...initialConfig.specialCharacters]); fixture.detectChanges(); equal('-1234', '-1 234', fixture); expect(component.form.value).toBe('-1234'); - })); + }); - it('should change value if user star from zero separator.0', fakeAsync(() => { - component.mask = 'separator.0'; + it('should change value if user star from zero separator.0', () => { + component.mask.set('separator.0'); fixture.detectChanges(); equal('03', '3', fixture); equal('034', '34', fixture); - })); + }); - it('should change value if user star from zero separator.1', fakeAsync(() => { - component.mask = 'separator.1'; - component.decimalMarker = '.'; + it('should change value if user star from zero separator.1', () => { + component.mask.set('separator.1'); + component.decimalMarker.set('.'); fixture.detectChanges(); equal('03', '0.3', fixture); equal('034', '0.3', fixture); equal('.3', '0.3', fixture); equal('.34', '0.3', fixture); - })); + }); - it('should change value if user star from zero separator.1', fakeAsync(() => { - component.mask = 'separator.1'; - component.decimalMarker = ','; + it('should change value if user star from zero separator.1', () => { + component.mask.set('separator.1'); + component.decimalMarker.set(','); fixture.detectChanges(); equal('03', '0,3', fixture); equal('034', '0,3', fixture); equal(',3', '0,3', fixture); equal(',34', '0,3', fixture); - })); + }); - it('should change value if user star from zero separator.2', fakeAsync(() => { - component.mask = 'separator.2'; - component.decimalMarker = '.'; + it('should change value if user star from zero separator.2', () => { + component.mask.set('separator.2'); + component.decimalMarker.set('.'); fixture.detectChanges(); equal('03', '0.3', fixture); equal('034', '0.34', fixture); equal('.3', '0.3', fixture); equal('.34', '0.34', fixture); - })); + }); - it('should change value if user star from zero separator.2', fakeAsync(() => { - component.mask = 'separator.2'; - component.decimalMarker = ','; + it('should change value if user star from zero separator.2', () => { + component.mask.set('separator.2'); + component.decimalMarker.set(','); fixture.detectChanges(); equal('03', '0,3', fixture); equal('034', '0,34', fixture); equal(',3', '0,3', fixture); equal(',34', '0,34', fixture); - })); + }); - it('should change value if user star from zero separator.3', fakeAsync(() => { - component.mask = 'separator.3'; - component.decimalMarker = '.'; + it('should change value if user star from zero separator.3', () => { + component.mask.set('separator.3'); + component.decimalMarker.set('.'); fixture.detectChanges(); equal('03', '0.3', fixture); @@ -1319,11 +1318,11 @@ describe('Separator: Mask', () => { equal('.3', '0.3', fixture); equal('.34', '0.34', fixture); equal('.345', '0.345', fixture); - })); + }); - it('should change value if user star from zero separator.3', fakeAsync(() => { - component.mask = 'separator.3'; - component.decimalMarker = ','; + it('should change value if user star from zero separator.3', () => { + component.mask.set('separator.3'); + component.decimalMarker.set(','); fixture.detectChanges(); equal('03', '0,3', fixture); @@ -1331,69 +1330,69 @@ describe('Separator: Mask', () => { equal(',3', '0,3', fixture); equal(',34', '0,34', fixture); equal(',345', '0,345', fixture); - })); + }); - it('should change value if user star from zero separator.0 with allowNegativeNumber', fakeAsync(() => { - component.mask = 'separator.0'; - component.allowNegativeNumbers = true; + it('should change value if user star from zero separator.0 with allowNegativeNumber', () => { + component.mask.set('separator.0'); + component.allowNegativeNumbers.set(true); fixture.detectChanges(); equal('-03', '-3', fixture); equal('-034', '-34', fixture); - })); + }); - it('should change value if user star from zero separator.1 with allowNegativeNumber', fakeAsync(() => { - component.mask = 'separator.1'; - component.decimalMarker = '.'; - component.allowNegativeNumbers = true; + it('should change value if user star from zero separator.1 with allowNegativeNumber', () => { + component.mask.set('separator.1'); + component.decimalMarker.set('.'); + component.allowNegativeNumbers.set(true); fixture.detectChanges(); equal('-03', '-0.3', fixture); equal('-034', '-0.3', fixture); equal('-.3', '-0.3', fixture); equal('-.34', '-0.3', fixture); - })); + }); - it('should change value if user star from zero separator.1 with allowNegativeNumber decimalMarker= ,', fakeAsync(() => { - component.mask = 'separator.1'; - component.decimalMarker = ','; - component.allowNegativeNumbers = true; + it('should change value if user star from zero separator.1 with allowNegativeNumber decimalMarker= ,', () => { + component.mask.set('separator.1'); + component.decimalMarker.set(','); + component.allowNegativeNumbers.set(true); fixture.detectChanges(); equal('-03', '-0,3', fixture); equal('-034', '-0,3', fixture); equal('-,3', '-0,3', fixture); equal('-,34', '-0,3', fixture); - })); + }); - it('should change value if user star from zero separator.2 with allowNegativeNumber', fakeAsync(() => { - component.mask = 'separator.2'; - component.decimalMarker = '.'; - component.allowNegativeNumbers = true; + it('should change value if user star from zero separator.2 with allowNegativeNumber', () => { + component.mask.set('separator.2'); + component.decimalMarker.set('.'); + component.allowNegativeNumbers.set(true); fixture.detectChanges(); equal('-03', '-0.3', fixture); equal('-034', '-0.34', fixture); equal('-.3', '-0.3', fixture); equal('-.34', '-0.34', fixture); - })); + }); - it('should change value if user star from zero separator.2 with allowNegativeNumber', fakeAsync(() => { - component.mask = 'separator.2'; - component.decimalMarker = ','; - component.allowNegativeNumbers = true; + it('should change value if user star from zero separator.2 with allowNegativeNumber', () => { + component.mask.set('separator.2'); + component.decimalMarker.set(','); + component.allowNegativeNumbers.set(true); fixture.detectChanges(); equal('-03', '-0,3', fixture); equal('-034', '-0,34', fixture); equal('-,3', '-0,3', fixture); equal('-,34', '-0,34', fixture); - })); + }); - it('should change value if user star from zero separator.3 with allowNegativeNumber', fakeAsync(() => { - component.mask = 'separator.3'; - component.decimalMarker = '.'; - component.allowNegativeNumbers = true; + it('should change value if user star from zero separator.3 with allowNegativeNumber', () => { + component.mask.set('separator.3'); + component.decimalMarker.set('.'); + component.allowNegativeNumbers.set(true); fixture.detectChanges(); equal('-03', '-0.3', fixture); @@ -1402,12 +1401,12 @@ describe('Separator: Mask', () => { equal('-.3', '-0.3', fixture); equal('-.34', '-0.34', fixture); equal('-.345', '-0.345', fixture); - })); + }); - it('should change value if user star from zero separator.3 with allowNegativeNumber', fakeAsync(() => { - component.mask = 'separator.3'; - component.decimalMarker = ','; - component.allowNegativeNumbers = true; + it('should change value if user star from zero separator.3 with allowNegativeNumber', () => { + component.mask.set('separator.3'); + component.decimalMarker.set(','); + component.allowNegativeNumbers.set(true); fixture.detectChanges(); equal('-03', '-0,3', fixture); @@ -1416,65 +1415,65 @@ describe('Separator: Mask', () => { equal('-,3', '-0,3', fixture); equal('-,34', '-0,34', fixture); equal('-,345', '-0,345', fixture); - })); + }); - it('should change value if user star from zero separator.1 with allowNegativeNumber leadZero decimalMarker= ,', fakeAsync(() => { - component.mask = 'separator.1'; - component.decimalMarker = ','; - component.allowNegativeNumbers = true; - component.leadZero = true; + it('should change value if user star from zero separator.1 with allowNegativeNumber leadZero decimalMarker= ,', () => { + component.mask.set('separator.1'); + component.decimalMarker.set(','); + component.allowNegativeNumbers.set(true); + component.leadZero.set(true); fixture.detectChanges(); equal('-03', '-0,3', fixture); equal('-034', '-0,3', fixture); equal('-,3', '-0,3', fixture); equal('-,34', '-0,3', fixture); - })); + }); - it('should change value if user star from zero separator.1 with allowNegativeNumber leadZero decimalMarker= ,', fakeAsync(() => { - component.mask = 'separator.1'; - component.decimalMarker = '.'; - component.allowNegativeNumbers = true; - component.leadZero = true; + it('should change value if user star from zero separator.1 with allowNegativeNumber leadZero decimalMarker= ,', () => { + component.mask.set('separator.1'); + component.decimalMarker.set('.'); + component.allowNegativeNumbers.set(true); + component.leadZero.set(true); fixture.detectChanges(); equal('-03', '-0.3', fixture); equal('-034', '-0.3', fixture); equal('-.3', '-0.3', fixture); equal('-.34', '-0.3', fixture); - })); + }); - it('should change value if user star from zero separator.1 with allowNegativeNumber leadZero decimalMarker= ,', fakeAsync(() => { - component.mask = 'separator.2'; - component.decimalMarker = ','; - component.allowNegativeNumbers = true; - component.leadZero = true; + it('should change value if user star from zero separator.1 with allowNegativeNumber leadZero decimalMarker= ,', () => { + component.mask.set('separator.2'); + component.decimalMarker.set(','); + component.allowNegativeNumbers.set(true); + component.leadZero.set(true); fixture.detectChanges(); equal('-03', '-0,3', fixture); equal('-034', '-0,34', fixture); equal('-,3', '-0,3', fixture); equal('-,34', '-0,34', fixture); - })); + }); - it('should change value if user star from zero separator.2 with allowNegativeNumber leadZero decimalMarker= ,', fakeAsync(() => { - component.mask = 'separator.2'; - component.decimalMarker = '.'; - component.allowNegativeNumbers = true; - component.leadZero = true; + it('should change value if user star from zero separator.2 with allowNegativeNumber leadZero decimalMarker= ,', () => { + component.mask.set('separator.2'); + component.decimalMarker.set('.'); + component.allowNegativeNumbers.set(true); + component.leadZero.set(true); fixture.detectChanges(); equal('-03', '-0.3', fixture); equal('-034', '-0.34', fixture); equal('-.3', '-0.3', fixture); equal('-.34', '-0.34', fixture); - })); + }); - it('should change value if user star from zero separator.3 with allowNegativeNumber leadZero decimalMarker= ,', fakeAsync(() => { - component.mask = 'separator.3'; - component.decimalMarker = ','; - component.allowNegativeNumbers = true; - component.leadZero = true; + it('should change value if user star from zero separator.3 with allowNegativeNumber leadZero decimalMarker= ,', () => { + component.mask.set('separator.3'); + component.decimalMarker.set(','); + component.allowNegativeNumbers.set(true); + component.leadZero.set(true); fixture.detectChanges(); equal('-03', '-0,3', fixture); @@ -1482,13 +1481,13 @@ describe('Separator: Mask', () => { equal('-,3', '-0,3', fixture); equal('-,34', '-0,34', fixture); equal('-,345', '-0,345', fixture); - })); + }); - it('should change value if user star from zero separator.3 with allowNegativeNumber leadZero decimalMarker= ,', fakeAsync(() => { - component.mask = 'separator.3'; - component.decimalMarker = '.'; - component.allowNegativeNumbers = true; - component.leadZero = true; + it('should change value if user star from zero separator.3 with allowNegativeNumber leadZero decimalMarker= ,', () => { + component.mask.set('separator.3'); + component.decimalMarker.set('.'); + component.allowNegativeNumbers.set(true); + component.leadZero.set(true); fixture.detectChanges(); equal('-03', '-0.3', fixture); @@ -1496,11 +1495,11 @@ describe('Separator: Mask', () => { equal('-.3', '-0.3', fixture); equal('-.34', '-0.34', fixture); equal('-.345', '-0.345', fixture); - })); + }); it('separator.2 thousandSeparator = . should display correct value if decimalMarker is array 12345.67', fakeAsync(() => { - component.mask = 'separator.2'; - component.thousandSeparator = '.'; + component.mask.set('separator.2'); + component.thousandSeparator.set('.'); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; spyOnProperty(document, 'activeElement').and.returnValue(inputTarget); @@ -1515,8 +1514,8 @@ describe('Separator: Mask', () => { })); it('separator.3 thousandSeparator = . should display correct value if decimalMarker is array 12345.67', fakeAsync(() => { - component.mask = 'separator.3'; - component.thousandSeparator = '.'; + component.mask.set('separator.3'); + component.thousandSeparator.set('.'); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; spyOnProperty(document, 'activeElement').and.returnValue(inputTarget); @@ -1530,8 +1529,8 @@ describe('Separator: Mask', () => { })); it('separator.1 thousandSeparator = . should display correct value if decimalMarker is array 12345.67', fakeAsync(() => { - component.thousandSeparator = '.'; - component.mask = 'separator.1'; + component.thousandSeparator.set('.'); + component.mask.set('separator.1'); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; spyOnProperty(document, 'activeElement').and.returnValue(inputTarget); @@ -1547,8 +1546,8 @@ describe('Separator: Mask', () => { it('separator.2 thousandSeparator = , should display correct value if decimalMarker is array 12345.67', fakeAsync(() => { const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; - component.mask = 'separator.2'; - component.thousandSeparator = ','; + component.mask.set('separator.2'); + component.thousandSeparator.set(','); spyOnProperty(document, 'activeElement').and.returnValue(inputTarget); fixture.detectChanges(); @@ -1559,8 +1558,8 @@ describe('Separator: Mask', () => { })); it('separator.3 thousandSeparator = , should display correct value if decimalMarker is array 12345.67', fakeAsync(() => { - component.mask = 'separator.3'; - component.thousandSeparator = ','; + component.mask.set('separator.3'); + component.thousandSeparator.set(','); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; spyOnProperty(document, 'activeElement').and.returnValue(inputTarget); @@ -1573,8 +1572,8 @@ describe('Separator: Mask', () => { })); it('separator.1 thousandSeparator = , should display correct value if decimalMarker is array 12345.67', fakeAsync(() => { - component.mask = 'separator.1'; - component.thousandSeparator = ','; + component.mask.set('separator.1'); + component.thousandSeparator.set(','); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; spyOnProperty(document, 'activeElement').and.returnValue(inputTarget); @@ -1587,9 +1586,9 @@ describe('Separator: Mask', () => { })); it('separator.2 thousandSeparator = . leadZero should display correct value if decimalMarker is array 12345.67', fakeAsync(() => { - component.mask = 'separator.2'; - component.thousandSeparator = '.'; - component.leadZero = true; + component.mask.set('separator.2'); + component.thousandSeparator.set('.'); + component.leadZero.set(true); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; spyOnProperty(document, 'activeElement').and.returnValue(inputTarget); @@ -1603,9 +1602,9 @@ describe('Separator: Mask', () => { })); it('separator.3 thousandSeparator = . leadZero should display correct value if decimalMarker is array 12345.67', fakeAsync(() => { - component.mask = 'separator.3'; - component.thousandSeparator = '.'; - component.leadZero = true; + component.mask.set('separator.3'); + component.thousandSeparator.set('.'); + component.leadZero.set(true); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; @@ -1620,9 +1619,9 @@ describe('Separator: Mask', () => { })); it('separator.1 thousandSeparator = . leadZero should display correct value if decimalMarker is array 12345.67', fakeAsync(() => { - component.thousandSeparator = '.'; - component.mask = 'separator.1'; - component.leadZero = true; + component.thousandSeparator.set('.'); + component.mask.set('separator.1'); + component.leadZero.set(true); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; @@ -1636,42 +1635,42 @@ describe('Separator: Mask', () => { }); })); - it('should work when decimalMarker have default value separator.2', fakeAsync(() => { - component.mask = 'separator.2'; - component.thousandSeparator = ','; + it('should work when decimalMarker have default value separator.2', () => { + component.mask.set('separator.2'); + component.thousandSeparator.set(','); fixture.detectChanges(); equal('1', '1', fixture); equal('12', '12', fixture); equal('123', '123', fixture); equal('1234', '1,234', fixture); - })); + }); - it('should work when decimalMarker have default value separator.3', fakeAsync(() => { - component.mask = 'separator.3'; - component.thousandSeparator = ','; + it('should work when decimalMarker have default value separator.3', () => { + component.mask.set('separator.3'); + component.thousandSeparator.set(','); fixture.detectChanges(); equal('1', '1', fixture); equal('12', '12', fixture); equal('123', '123', fixture); equal('1234', '1,234', fixture); - })); + }); - it('should work when decimalMarker have default value separator.1', fakeAsync(() => { - component.mask = 'separator.3'; - component.thousandSeparator = ','; + it('should work when decimalMarker have default value separator.1', () => { + component.mask.set('separator.3'); + component.thousandSeparator.set(','); fixture.detectChanges(); equal('1', '1', fixture); equal('12', '12', fixture); equal('123', '123', fixture); equal('1234', '1,234', fixture); - })); + }); it('should not delete decimalMarker ,', () => { - component.mask = 'separator.2'; - component.decimalMarker = ','; + component.mask.set('separator.2'); + component.decimalMarker.set(','); const inputElement = fixture.nativeElement.querySelector('input'); inputElement.value = '1,23'; @@ -1691,8 +1690,8 @@ describe('Separator: Mask', () => { }); it('should not delete decimalMarker .', () => { - component.mask = 'separator.2'; - component.decimalMarker = '.'; + component.mask.set('separator.2'); + component.decimalMarker.set('.'); const inputElement = fixture.nativeElement.querySelector('input'); inputElement.value = '12.23'; @@ -1712,9 +1711,9 @@ describe('Separator: Mask', () => { }); it('should change position when click backspace thousandSeparator = .', () => { - component.mask = 'separator.2'; - component.decimalMarker = ','; - component.thousandSeparator = '.'; + component.mask.set('separator.2'); + component.decimalMarker.set(','); + component.thousandSeparator.set('.'); const inputElement = fixture.nativeElement.querySelector('input'); inputElement.value = '1.234.567,89'; @@ -1740,9 +1739,9 @@ describe('Separator: Mask', () => { }); it('should change position when click backspace thousandSeparator = ,', () => { - component.mask = 'separator.2'; - component.decimalMarker = '.'; - component.thousandSeparator = ','; + component.mask.set('separator.2'); + component.decimalMarker.set('.'); + component.thousandSeparator.set(','); const inputElement = fixture.nativeElement.querySelector('input'); inputElement.value = '1,234,567.89'; @@ -1768,9 +1767,9 @@ describe('Separator: Mask', () => { }); it('should change position when click backspace thousandSeparator = ', () => { - component.mask = 'separator.2'; - component.decimalMarker = '.'; - component.thousandSeparator = ' '; + component.mask.set('separator.2'); + component.decimalMarker.set('.'); + component.thousandSeparator.set(' '); const inputElement = fixture.nativeElement.querySelector('input'); inputElement.value = '1 234 567.89'; @@ -1796,10 +1795,10 @@ describe('Separator: Mask', () => { }); it('should show correct value with separator.9', fakeAsync(() => { - component.mask = 'separator.9'; - component.decimalMarker = '.'; - component.leadZero = true; - component.separatorLimit = '10'; + component.mask.set('separator.9'); + component.decimalMarker.set('.'); + component.leadZero.set(true); + component.separatorLimit.set('10'); fixture.detectChanges(); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); @@ -1816,10 +1815,10 @@ describe('Separator: Mask', () => { })); it('should show correct value with separator.10', fakeAsync(() => { - component.mask = 'separator.10'; - component.decimalMarker = '.'; - component.leadZero = true; - component.separatorLimit = '10'; + component.mask.set('separator.10'); + component.decimalMarker.set('.'); + component.leadZero.set(true); + component.separatorLimit.set('10'); fixture.detectChanges(); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); @@ -1836,7 +1835,7 @@ describe('Separator: Mask', () => { })); it('should support big numbers with separator', () => { - component.mask = 'separator'; + component.mask.set('separator'); equal('12345678910111215', '12 345 678 910 111 215', fixture); expect(component.form.value).toBe('12345678910111215'); @@ -1845,7 +1844,7 @@ describe('Separator: Mask', () => { }); it('should support big numbers with separator 2', () => { - component.mask = 'separator.2'; + component.mask.set('separator.2'); equal('12345678910111215', '12 345 678 910 111 215', fixture); expect(component.form.value).toBe('12345678910111215'); @@ -1854,8 +1853,8 @@ describe('Separator: Mask', () => { }); it('should support big numbers with separator 2 thousand =.', () => { - component.mask = 'separator.2'; - component.thousandSeparator = '.'; + component.mask.set('separator.2'); + component.thousandSeparator.set('.'); equal('12345678910111215', '12.345.678.910.111.215', fixture); expect(component.form.value).toBe('12345678910111215'); @@ -1864,8 +1863,8 @@ describe('Separator: Mask', () => { }); it('should support big numbers with separator 2 thousand =,', () => { - component.mask = 'separator.2'; - component.thousandSeparator = ','; + component.mask.set('separator.2'); + component.thousandSeparator.set(','); equal('12345678910111215', '12,345,678,910,111,215', fixture); expect(component.form.value).toBe('12345678910111215'); diff --git a/projects/ngx-mask-lib/src/test/show-mask-typed.spec.ts b/projects/ngx-mask-lib/src/test/show-mask-typed.spec.ts index 9008dc9d..ac8cce81 100644 --- a/projects/ngx-mask-lib/src/test/show-mask-typed.spec.ts +++ b/projects/ngx-mask-lib/src/test/show-mask-typed.spec.ts @@ -4,8 +4,7 @@ import { ReactiveFormsModule } from '@angular/forms'; import { TestMaskComponent } from './utils/test-component.component'; import { equal } from './utils/test-functions.component'; -import { provideNgxMask } from '../lib/ngx-mask.providers'; -import { NgxMaskDirective } from '../lib/ngx-mask.directive'; +import { NgxMaskDirective, provideNgxMask } from 'ngx-mask'; import type { DebugElement } from '@angular/core'; import { By } from '@angular/platform-browser'; @@ -24,77 +23,103 @@ describe('Directive: Mask', () => { }); it('should clear if not match the mask!!!!', () => { - component.mask = '(000) 000-0000'; - component.showMaskTyped = true; + component.mask.set('(000) 000-0000'); + component.showMaskTyped.set(true); equal('', '(___) ___-____', fixture); equal('2345678', '(234) 567-8___', fixture); - component.prefix = '+7'; - component.showMaskTyped = true; + component.prefix.set('+7'); + component.showMaskTyped.set(true); equal('', '+7(___) ___-____', fixture); equal('2345678', '+7(234) 567-8___', fixture); }); it('should clear if not match the mask!!!!', () => { - component.mask = 'A{5}-A{2}'; - component.showMaskTyped = true; + component.mask.set('A{5}-A{2}'); + component.showMaskTyped.set(true); equal('', '_____-__', fixture); equal('aaa', 'aaa__-__', fixture); equal('aaaaaaa', 'aaaaa-aa', fixture); }); it('Mask with optional pattern 9999', () => { - component.mask = '(000) 000-0000 ext. 999999'; - component.showMaskTyped = true; - component.specialCharacters = ['e', 'x', 't', ' ', '(', ')', '-', '.']; + component.mask.set('(000) 000-0000 ext. 999999'); + component.showMaskTyped.set(true); + component.specialCharacters.set(['e', 'x', 't', ' ', '(', ')', '-', '.']); equal('9871234223 ext. 123022', '(987) 123-4223 ext. 123022', fixture); - component.mask = '(000) 000-0000 testing. 999999'; - component.showMaskTyped = true; - component.specialCharacters = ['t', 'e', 's', 't', 'i', 'n', 'g', ' ', '(', ')', '-', '.']; + component.mask.set('(000) 000-0000 testing. 999999'); + component.showMaskTyped.set(true); + component.specialCharacters.set([ + 't', + 'e', + 's', + 't', + 'i', + 'n', + 'g', + ' ', + '(', + ')', + '-', + '.', + ]); equal('1234567890 testing. 123456', '(123) 456-7890 testing. 123456', fixture); - component.mask = '(000) 000-0000 prefix. 999'; - component.showMaskTyped = true; - component.prefix = '+7'; - component.specialCharacters = ['p', 'r', 'e', 'f', 'i', 'x', ' ', '(', ')', '-', '.']; + component.mask.set('(000) 000-0000 prefix. 999'); + component.showMaskTyped.set(true); + component.prefix.set('+7'); + component.specialCharacters.set(['p', 'r', 'e', 'f', 'i', 'x', ' ', '(', ')', '-', '.']); equal('1234567890 prefix. 345', '+7(123) 456-7890 prefix. 345', fixture); - component.mask = '(000) 000-0000 cv. 999'; - component.showMaskTyped = true; - component.prefix = 'card. '; - component.specialCharacters = ['c', 'v', ' ', '(', ')', '-', '.']; + component.mask.set('(000) 000-0000 cv. 999'); + component.showMaskTyped.set(true); + component.prefix.set('card. '); + component.specialCharacters.set(['c', 'v', ' ', '(', ')', '-', '.']); equal('1234567890 cv. 345', 'card. (123) 456-7890 cv. 345', fixture); }); it('Mask with optional pattern 00000', () => { - component.mask = '(000) 000-0000 ext. 000000'; - component.showMaskTyped = true; - component.specialCharacters = ['e', 'x', 't', ' ', '(', ')', '-', '.']; + component.mask.set('(000) 000-0000 ext. 000000'); + component.showMaskTyped.set(true); + component.specialCharacters.set(['e', 'x', 't', ' ', '(', ')', '-', '.']); equal('9871234223 ext. 123022', '(987) 123-4223 ext. 123022', fixture); - component.mask = '(000) 000-0000 testing. 00000'; - component.showMaskTyped = true; - component.specialCharacters = ['t', 'e', 's', 't', 'i', 'n', 'g', ' ', '(', ')', '-', '.']; + component.mask.set('(000) 000-0000 testing. 00000'); + component.showMaskTyped.set(true); + component.specialCharacters.set([ + 't', + 'e', + 's', + 't', + 'i', + 'n', + 'g', + ' ', + '(', + ')', + '-', + '.', + ]); equal('1234567890 testing. 12345', '(123) 456-7890 testing. 12345', fixture); - component.mask = '(000) 000-0000 prefix. 000'; - component.showMaskTyped = true; - component.prefix = '+7'; - component.specialCharacters = ['p', 'r', 'e', 'f', 'i', 'x', ' ', '(', ')', '-', '.']; + component.mask.set('(000) 000-0000 prefix. 000'); + component.showMaskTyped.set(true); + component.prefix.set('+7'); + component.specialCharacters.set(['p', 'r', 'e', 'f', 'i', 'x', ' ', '(', ')', '-', '.']); equal('1234567890 prefix. 345', '+7(123) 456-7890 prefix. 345', fixture); - component.mask = '(000) 000-0000 cv. 000'; - component.showMaskTyped = true; - component.prefix = 'card. '; - component.specialCharacters = ['c', 'v', ' ', '(', ')', '-', '.']; + component.mask.set('(000) 000-0000 cv. 000'); + component.showMaskTyped.set(true); + component.prefix.set('card. '); + component.specialCharacters.set(['c', 'v', ' ', '(', ')', '-', '.']); equal('1234567890 cv. 134', 'card. (123) 456-7890 cv. 134', fixture); }); // TODO(inepipenko) for issue #880 xit('should work right with security input', () => { - component.mask = '000-0X-XXXX'; - component.showMaskTyped = true; + component.mask.set('000-0X-XXXX'); + component.showMaskTyped.set(true); equal('', '___-__-____', fixture); equal('123', '123-__-____', fixture); equal('12345', '123-4*-____', fixture); @@ -106,9 +131,9 @@ describe('Directive: Mask', () => { }); it('showMaskTyped && placeholder XXXXX-YYYY', () => { - component.showMaskTyped = true; - component.placeHolderCharacter = 'XXXXX-YYYY'; - component.mask = '00000-0000'; + component.showMaskTyped.set(true); + component.placeHolderCharacter.set('XXXXX-YYYY'); + component.mask.set('00000-0000'); equal('1', '1XXXX-YYYY', fixture); equal('12', '12XXX-YYYY', fixture); equal('123', '123XX-YYYY', fixture); @@ -121,9 +146,9 @@ describe('Directive: Mask', () => { }); it('showMaskTyped && placeholder 00/00/0000', () => { - component.showMaskTyped = true; - component.placeHolderCharacter = 'dd/mm/yyyy'; - component.mask = '00/00/0000'; + component.showMaskTyped.set(true); + component.placeHolderCharacter.set('dd/mm/yyyy'); + component.mask.set('00/00/0000'); equal('1', '1d/mm/yyyy', fixture); equal('12', '12/mm/yyyy', fixture); equal('123', '12/3m/yyyy', fixture); @@ -135,10 +160,10 @@ describe('Directive: Mask', () => { }); it('should work with showMaskTyped', () => { - component.mask = '000/00000'; - component.prefix = '06'; - component.dropSpecialCharacters = false; - component.showMaskTyped = true; + component.mask.set('000/00000'); + component.prefix.set('06'); + component.dropSpecialCharacters.set(false); + component.showMaskTyped.set(true); equal('', '06___/_____', fixture); equal('1', '061__/_____', fixture); equal('12', '0612_/_____', fixture); @@ -151,8 +176,8 @@ describe('Directive: Mask', () => { }); it('should work with showMaskTyped', () => { - component.mask = '000/00000'; - component.prefix = '06'; + component.mask.set('000/00000'); + component.prefix.set('06'); equal('1', '061', fixture); equal('12', '0612', fixture); equal('123', '06123', fixture); @@ -164,8 +189,8 @@ describe('Directive: Mask', () => { }); it('should work with showMaskTyped 000/00000', async () => { - component.mask = '000/00000'; - component.showMaskTyped = false; + component.mask.set('000/00000'); + component.showMaskTyped.set(false); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; spyOnProperty(document, 'activeElement').and.returnValue(inputTarget); @@ -175,7 +200,7 @@ describe('Directive: Mask', () => { equal('12', '12', fixture); equal('123', '123', fixture); expect(inputTarget.selectionStart).toBe(3); - component.showMaskTyped = true; + component.showMaskTyped.set(true); inputTarget.focus(); fixture.detectChanges(); @@ -184,9 +209,9 @@ describe('Directive: Mask', () => { }); it('should work with showMaskTyped 000/00000 with prefix', async () => { - component.mask = '000/00000'; - component.prefix = '+38 '; - component.showMaskTyped = false; + component.mask.set('000/00000'); + component.prefix.set('+38 '); + component.showMaskTyped.set(false); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; spyOnProperty(document, 'activeElement').and.returnValue(inputTarget); @@ -196,7 +221,7 @@ describe('Directive: Mask', () => { equal('+38 12', '+38 12', fixture); equal('+38 123', '+38 123', fixture); expect(inputTarget.selectionStart).toBe(7); - component.showMaskTyped = true; + component.showMaskTyped.set(true); inputTarget.focus(); fixture.detectChanges(); diff --git a/projects/ngx-mask-lib/src/test/test-sufix.spec.ts b/projects/ngx-mask-lib/src/test/test-sufix.spec.ts index 89590bde..2d760b4f 100644 --- a/projects/ngx-mask-lib/src/test/test-sufix.spec.ts +++ b/projects/ngx-mask-lib/src/test/test-sufix.spec.ts @@ -5,8 +5,7 @@ import { ReactiveFormsModule } from '@angular/forms'; import { By } from '@angular/platform-browser'; import { TestMaskComponent } from './utils/test-component.component'; import { equal } from './utils/test-functions.component'; -import { provideNgxMask } from '../lib/ngx-mask.providers'; -import { NgxMaskDirective } from '../lib/ngx-mask.directive'; +import { provideNgxMask, NgxMaskDirective } from 'ngx-mask'; describe('Directive: Mask (Suffix)', () => { let fixture: ComponentFixture; @@ -23,24 +22,24 @@ describe('Directive: Mask (Suffix)', () => { }); it('should clear if not match the mask!!!!', () => { - component.mask = '0000'; - component.suffix = ' $'; + component.mask.set('0000'); + component.suffix.set(' $'); equal('', '', fixture); equal('123', '123 $', fixture); equal('1234', '1234 $', fixture); }); it('should clear if not match the mask!!!!', () => { - component.mask = '0*.00'; - component.suffix = ' $'; + component.mask.set('0*.00'); + component.suffix.set(' $'); equal('', '', fixture); equal('12345', '12345 $', fixture); equal('12344.44', '12344.44 $', fixture); }); it('should work correct with suffix .com', () => { - component.mask = '0000'; - component.suffix = '.com'; + component.mask.set('0000'); + component.suffix.set('.com'); equal('', '', fixture); equal('12', '12.com', fixture); equal('12344', '1234.com', fixture); @@ -49,15 +48,15 @@ describe('Directive: Mask (Suffix)', () => { }); it('separator should work correct with suffix', () => { - component.mask = 'separator'; - component.suffix = '$'; + component.mask.set('separator'); + component.suffix.set('$'); equal('', '', fixture); equal('123', '123$', fixture); equal('1234', '1 234$', fixture); }); it('should not delete suffix', () => { - component.mask = '0000'; - component.suffix = '$'; + component.mask.set('0000'); + component.suffix.set('$'); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; spyOnProperty(document, 'activeElement').and.returnValue(inputTarget); @@ -78,8 +77,8 @@ describe('Directive: Mask (Suffix)', () => { expect(inputTarget.selectionStart).toEqual(4); }); it('should delete all if value and part of suffix are deleted', () => { - component.mask = 'A*'; - component.suffix = ' test'; + component.mask.set('A*'); + component.suffix.set(' test'); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; spyOnProperty(document, 'activeElement').and.returnValue(inputTarget); @@ -96,8 +95,8 @@ describe('Directive: Mask (Suffix)', () => { expect(inputTarget.value).toBe(''); }); it('should not delete suffix', () => { - component.mask = 'A{5}'; - component.suffix = '.com'; + component.mask.set('A{5}'); + component.suffix.set('.com'); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; spyOnProperty(document, 'activeElement').and.returnValue(inputTarget); diff --git a/projects/ngx-mask-lib/src/test/time-mask.spec.ts b/projects/ngx-mask-lib/src/test/time-mask.spec.ts index cf15da40..0c315452 100644 --- a/projects/ngx-mask-lib/src/test/time-mask.spec.ts +++ b/projects/ngx-mask-lib/src/test/time-mask.spec.ts @@ -4,8 +4,7 @@ import { ReactiveFormsModule } from '@angular/forms'; import { TestMaskComponent } from './utils/test-component.component'; import { equal } from './utils/test-functions.component'; -import { provideNgxMask } from '../lib/ngx-mask.providers'; -import { NgxMaskDirective } from '../lib/ngx-mask.directive'; +import { provideNgxMask, NgxMaskDirective } from 'ngx-mask'; describe('Directive: Mask (Time)', () => { let fixture: ComponentFixture; @@ -22,142 +21,142 @@ describe('Directive: Mask (Time)', () => { }); it('empty', () => { - component.mask = 'Hh:m0:s0'; + component.mask.set('Hh:m0:s0'); equal('', '', fixture); }); it('Hours', () => { - component.mask = 'Hh:m0:s0'; + component.mask.set('Hh:m0:s0'); equal('20', '20', fixture); }); it('Hours', () => { - component.mask = 'Hh:m0:s0'; + component.mask.set('Hh:m0:s0'); equal('03', '03', fixture); }); it('Hours', () => { - component.mask = 'Hh:m0:s0'; + component.mask.set('Hh:m0:s0'); equal('730', '7:30', fixture); }); it('Hours', () => { - component.showMaskTyped = true; - component.mask = 'Hh:m0'; + component.showMaskTyped.set(true); + component.mask.set('Hh:m0'); equal('3__:__', '3_:__', fixture); equal('33:__', '3:3_', fixture); equal('33__:__', '3:3_', fixture); }); it('Hours (lead zero)', () => { - component.showMaskTyped = true; - component.leadZeroDateTime = true; - component.mask = 'Hh:m0'; + component.showMaskTyped.set(true); + component.leadZeroDateTime.set(true); + component.mask.set('Hh:m0'); equal('3__:__', '03:__', fixture); }); it('Minutes', () => { - component.mask = 'Hh:m0:s0'; + component.mask.set('Hh:m0:s0'); equal('1212', '12:12', fixture); }); it('Minutes', () => { - component.mask = 'Hh:m0:s0'; + component.mask.set('Hh:m0:s0'); equal('1207', '12:07', fixture); }); it('Minutes', () => { - component.mask = 'Hh:m0:s0'; + component.mask.set('Hh:m0:s0'); equal('127', '12:7', fixture); }); it('Minutes (lead zero)', () => { - component.leadZeroDateTime = true; - component.mask = 'Hh:m0:s0'; + component.leadZeroDateTime.set(true); + component.mask.set('Hh:m0:s0'); equal('127', '12:07', fixture); }); it('Hours and minutes', () => { - component.mask = 'Hh:m0:s0'; + component.mask.set('Hh:m0:s0'); equal('7712', '7:7:12', fixture); }); it('Seconds (lead zero)', () => { - component.leadZeroDateTime = true; - component.mask = 'Hh:m0:s0'; + component.leadZeroDateTime.set(true); + component.mask.set('Hh:m0:s0'); equal('777', '07:07:07', fixture); }); it('Date', () => { - component.mask = 'd0/M0/0000'; + component.mask.set('d0/M0/0000'); equal('321234', '3/2/1234', fixture); }); it('Date', () => { - component.mask = 'd0/M0/0000'; + component.mask.set('d0/M0/0000'); equal('3113123', '31/1/3123', fixture); }); it('Date ', () => { - component.mask = 'd0/M0/0000'; + component.mask.set('d0/M0/0000'); equal('413234', '4/1/3234', fixture); }); it('Date ', () => { - component.mask = 'd0/M0/0000'; + component.mask.set('d0/M0/0000'); equal('01011234', '01/01/1234', fixture); }); it('Date ', () => { - component.mask = 'd0/M0/0000'; + component.mask.set('d0/M0/0000'); equal('10101234', '10/10/1234', fixture); }); it('Date ', () => { - component.mask = 'd0/M0/0000'; + component.mask.set('d0/M0/0000'); equal('2322123', '23/2/2123', fixture); }); it('Date ', () => { - component.mask = 'd0/M0/0000'; + component.mask.set('d0/M0/0000'); equal('23122123', '23/12/2123', fixture); }); it('Date ', () => { - component.mask = 'd0/M0/0000'; + component.mask.set('d0/M0/0000'); equal('0314123', '03/1/4123', fixture); }); it('Date ', () => { - component.mask = 'd0/M0/0000'; + component.mask.set('d0/M0/0000'); equal('0314123', '03/1/4123', fixture); }); it('Date ', () => { - component.mask = 'd0/M0/0000'; + component.mask.set('d0/M0/0000'); equal('414123', '4/1/4123', fixture); }); it('Date ', () => { - component.mask = 'd0/M0/0000'; + component.mask.set('d0/M0/0000'); equal('4121234', '4/12/1234', fixture); }); it('Date (day lead zero)', () => { - component.leadZeroDateTime = true; - component.mask = 'd0/M0/0000'; + component.leadZeroDateTime.set(true); + component.mask.set('d0/M0/0000'); equal('4121234', '04/12/1234', fixture); }); it('Date (month lead zero)', () => { - component.leadZeroDateTime = true; - component.mask = 'd0/M0/0000'; + component.leadZeroDateTime.set(true); + component.mask.set('d0/M0/0000'); equal('421234', '04/02/1234', fixture); }); it('Date (years, month, day , lead zero', () => { - component.mask = '0000.M0.d0'; - component.leadZeroDateTime = true; + component.mask.set('0000.M0.d0'); + component.leadZeroDateTime.set(true); equal('9999999', '9999.09.09', fixture); equal('8888888', '8888.08.08', fixture); equal('7777777', '7777.07.07', fixture); @@ -167,8 +166,8 @@ describe('Directive: Mask (Time)', () => { }); it('Date (years, month, day , lead zero', () => { - component.mask = '0000/M0/d0'; - component.leadZeroDateTime = true; + component.mask.set('0000/M0/d0'); + component.leadZeroDateTime.set(true); equal('9999999', '9999/09/09', fixture); equal('8888888', '8888/08/08', fixture); equal('7777777', '7777/07/07', fixture); @@ -178,7 +177,7 @@ describe('Directive: Mask (Time)', () => { }); it('Date (years, month, day mask 0000.M0.d0', () => { - component.mask = '0000.M0.d0'; + component.mask.set('0000.M0.d0'); equal('999999', '9999.9.9', fixture); equal('888888', '8888.8.8', fixture); equal('777777', '7777.7.7', fixture); @@ -191,7 +190,7 @@ describe('Directive: Mask (Time)', () => { equal('202344', '2023.4.4', fixture); }); it('Date (d0-M0-0000', () => { - component.mask = 'd0-M0-0000'; + component.mask.set('d0-M0-0000'); equal('999999', '9-9-9999', fixture); equal('888888', '8-8-8888', fixture); equal('777777', '7-7-7777', fixture); @@ -205,7 +204,7 @@ describe('Directive: Mask (Time)', () => { }); it('Date (d0/M0:0000', () => { - component.mask = 'd0/M0:0000'; + component.mask.set('d0/M0:0000'); equal('999999', '9/9:9999', fixture); equal('888888', '8/8:8888', fixture); equal('777777', '7/7:7777', fixture); @@ -219,7 +218,7 @@ describe('Directive: Mask (Time)', () => { }); it('Date (m0/d0/0000', () => { - component.mask = 'm0/d0/0000'; + component.mask.set('m0/d0/0000'); equal('999999', '9/9/9999', fixture); equal('888888', '8/8/8888', fixture); equal('777777', '7/7/7777', fixture); @@ -233,7 +232,7 @@ describe('Directive: Mask (Time)', () => { }); it('Date (0000-M0-d0', () => { - component.mask = '0000-M0-d0'; + component.mask.set('0000-M0-d0'); equal('999999', '9999-9-9', fixture); equal('888888', '8888-8-8', fixture); equal('777777', '7777-7-7', fixture); @@ -246,7 +245,7 @@ describe('Directive: Mask (Time)', () => { }); it('Date (M0/d0/0000', () => { - component.mask = 'M0/d0/0000'; + component.mask.set('M0/d0/0000'); equal('999999', '9/9/9999', fixture); equal('888888', '8/8/8888', fixture); equal('777777', '7/7/7777', fixture); @@ -259,7 +258,7 @@ describe('Directive: Mask (Time)', () => { }); it('Date (M0+d0+0000', () => { - component.mask = 'M0+d0+0000'; + component.mask.set('M0+d0+0000'); equal('999999', '9+9+9999', fixture); equal('888888', '8+8+8888', fixture); equal('777777', '7+7+7777', fixture); @@ -272,7 +271,7 @@ describe('Directive: Mask (Time)', () => { }); it('Date (M0@d0@0000', () => { - component.mask = 'M0@d0@0000'; + component.mask.set('M0@d0@0000'); equal('999999', '9@9@9999', fixture); equal('888888', '8@8@8888', fixture); equal('777777', '7@7@7777', fixture); @@ -285,7 +284,7 @@ describe('Directive: Mask (Time)', () => { }); it('Date (M0@d0/0000', () => { - component.mask = 'M0@d0/0000'; + component.mask.set('M0@d0/0000'); equal('999999', '9@9/9999', fixture); equal('888888', '8@8/8888', fixture); equal('777777', '7@7/7777', fixture); @@ -298,7 +297,7 @@ describe('Directive: Mask (Time)', () => { }); it('Date (M0:d0/0000', () => { - component.mask = 'M0:d0/0000'; + component.mask.set('M0:d0/0000'); equal('999999', '9:9/9999', fixture); equal('888888', '8:8/8888', fixture); equal('777777', '7:7/7777', fixture); @@ -311,7 +310,7 @@ describe('Directive: Mask (Time)', () => { }); it('Date (M0-d0-0000', () => { - component.mask = 'M0-d0-0000'; + component.mask.set('M0-d0-0000'); equal('999999', '9-9-9999', fixture); equal('888888', '8-8-8888', fixture); equal('777777', '7-7-7777', fixture); @@ -324,7 +323,7 @@ describe('Directive: Mask (Time)', () => { }); it('Date (M0.d0.0000', () => { - component.mask = 'M0.d0.0000'; + component.mask.set('M0.d0.0000'); equal('999999', '9.9.9999', fixture); equal('888888', '8.8.8888', fixture); equal('777777', '7.7.7777', fixture); @@ -337,7 +336,7 @@ describe('Directive: Mask (Time)', () => { }); it('Date (d0.M0.0000 Hh:m0:s0', () => { - component.mask = 'd0.M0.0000 Hh:m0:s0'; + component.mask.set('d0.M0.0000 Hh:m0:s0'); equal('992023999', '9.9.2023 9:9:9', fixture); equal('882023292030', '8.8.2023 2:9:20', fixture); equal('11111111 2420', '11.11.1111 2:42:0', fixture); @@ -347,7 +346,7 @@ describe('Directive: Mask (Time)', () => { }); it('Date (d0.M0.0000 Hh:m0 - Hh:m0', () => { - component.mask = 'd0.M0.0000 Hh:m0 - Hh:m0'; + component.mask.set('d0.M0.0000 Hh:m0 - Hh:m0'); equal('11111111 1111 1111', '11.11.1111 11:11 - 11:11', fixture); equal('31122023 2359 1211', '31.12.2023 23:59 - 12:11', fixture); equal('1223333 29 299', '12.2.3333 2:9 - 2:9', fixture); @@ -359,8 +358,8 @@ describe('Directive: Mask (Time)', () => { }); it('Date (Hh:m0 apm=true', () => { - component.mask = 'Hh:m0'; - component.apm = true; + component.mask.set('Hh:m0'); + component.apm.set(true); equal('1', '1', fixture); equal('11', '11', fixture); equal('12', '12', fixture); @@ -382,8 +381,8 @@ describe('Directive: Mask (Time)', () => { }); it('Date (Hh:m0:s0 apm=true', () => { - component.mask = 'Hh:m0:s0'; - component.apm = true; + component.mask.set('Hh:m0:s0'); + component.apm.set(true); equal('1323', '1:32:3', fixture); equal('1223', '12:23', fixture); equal('112322', '11:23:22', fixture); @@ -392,8 +391,8 @@ describe('Directive: Mask (Time)', () => { }); it('Date (d0/M0/0000 Hh:m0:s0 apm=true', () => { - component.mask = 'd0/M0/0000 Hh:m0:s0'; - component.apm = true; + component.mask.set('d0/M0/0000 Hh:m0:s0'); + component.apm.set(true); equal('11122023', '11/12/2023', fixture); equal('11122023133456', '11/12/2023 1:33:45', fixture); equal('11/12/2023 13:32:30 ', '11/12/2023 1:33:23', fixture); @@ -401,9 +400,9 @@ describe('Directive: Mask (Time)', () => { }); it('Date (0000-M0-d0 Hh:m0:s0.000', () => { - component.mask = '0000-M0-d0 Hh:m0:s0.000'; - component.leadZeroDateTime = true; - component.showMaskTyped = true; + component.mask.set('0000-M0-d0 Hh:m0:s0.000'); + component.leadZeroDateTime.set(true); + component.showMaskTyped.set(true); equal('2023', '2023-__-__ __:__:__.___', fixture); equal('202309', '2023-09-__ __:__:__.___', fixture); equal('20230931', '2023-09-31 __:__:__.___', fixture); @@ -414,51 +413,51 @@ describe('Directive: Mask (Time)', () => { }); it('Date (0000-M0-d0 leadZero and showMaskTyped', () => { - component.mask = '0000-M0-d0'; - component.leadZeroDateTime = true; - component.showMaskTyped = true; + component.mask.set('0000-M0-d0'); + component.leadZeroDateTime.set(true); + component.showMaskTyped.set(true); equal('2023', '2023-__-__', fixture); equal('202310', '2023-10-__', fixture); equal('20231029', '2023-10-29', fixture); }); it('Date (0000/M0/d0 leadZero and showMaskTyped', () => { - component.mask = '0000/M0/d0'; - component.leadZeroDateTime = true; - component.showMaskTyped = true; + component.mask.set('0000/M0/d0'); + component.leadZeroDateTime.set(true); + component.showMaskTyped.set(true); equal('2023', '2023/__/__', fixture); equal('202312', '2023/12/__', fixture); equal('20231229', '2023/12/29', fixture); }); it('Date (0000.M0.d0 leadZero and showMaskTyped', () => { - component.mask = '0000.M0.d0'; - component.leadZeroDateTime = true; - component.showMaskTyped = true; + component.mask.set('0000.M0.d0'); + component.leadZeroDateTime.set(true); + component.showMaskTyped.set(true); equal('2023', '2023.__.__', fixture); equal('202310', '2023.10.__', fixture); equal('20231031', '2023.10.31', fixture); }); it('Date (0000.M0.d0 leadZero and showMaskTyped', () => { - component.mask = 'M0/d0/0000'; - component.leadZeroDateTime = true; - component.showMaskTyped = true; - component.dropSpecialCharacters = false; + component.mask.set('M0/d0/0000'); + component.leadZeroDateTime.set(true); + component.showMaskTyped.set(true); + component.dropSpecialCharacters.set(false); equal('01', '01/__/____', fixture); equal('0109', '01/09/____', fixture); equal('01/03/2011', '01/03/2011', fixture); }); it('Date (d0/M0/0000 leadZero)', () => { - component.mask = 'M0/d0/0000'; - component.leadZeroDateTime = true; + component.mask.set('M0/d0/0000'); + component.leadZeroDateTime.set(true); equal('4122000', '04/12/2000', fixture); equal('442000', '04/04/2000', fixture); }); it('Date (0000-M0)', () => { - component.mask = '0000-M0'; + component.mask.set('0000-M0'); equal('1', '1', fixture); equal('12', '12', fixture); equal('123', '123', fixture); @@ -467,7 +466,7 @@ describe('Directive: Mask (Time)', () => { equal('123412', '1234-12', fixture); }); it('Date (0000/M0)', () => { - component.mask = '0000/M0'; + component.mask.set('0000/M0'); equal('1', '1', fixture); equal('12', '12', fixture); equal('123', '123', fixture); @@ -476,7 +475,7 @@ describe('Directive: Mask (Time)', () => { equal('123412', '1234/12', fixture); }); it('Date (0000:M0)', () => { - component.mask = '0000:M0'; + component.mask.set('0000:M0'); equal('1', '1', fixture); equal('12', '12', fixture); equal('123', '123', fixture); @@ -486,7 +485,7 @@ describe('Directive: Mask (Time)', () => { }); it('Date d0/M0', () => { - component.mask = 'd0/M0'; + component.mask.set('d0/M0'); equal('1', '1', fixture); equal('12', '12', fixture); equal('123', '12/3', fixture); @@ -495,8 +494,8 @@ describe('Directive: Mask (Time)', () => { }); it('Date d0/M0 with v', () => { - component.mask = 'd0/M0'; - component.leadZeroDateTime = true; + component.mask.set('d0/M0'); + component.leadZeroDateTime.set(true); equal('1', '1', fixture); equal('12', '12', fixture); equal('123', '12/03', fixture); diff --git a/projects/ngx-mask-lib/src/test/trigger-on-mask-change.spec.ts b/projects/ngx-mask-lib/src/test/trigger-on-mask-change.spec.ts index c473484c..b12997f7 100644 --- a/projects/ngx-mask-lib/src/test/trigger-on-mask-change.spec.ts +++ b/projects/ngx-mask-lib/src/test/trigger-on-mask-change.spec.ts @@ -4,8 +4,7 @@ import { TestBed } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; import { ReactiveFormsModule } from '@angular/forms'; import { TestMaskComponent } from './utils/test-component.component'; -import { provideNgxMask } from '../lib/ngx-mask.providers'; -import { NgxMaskDirective } from '../lib/ngx-mask.directive'; +import { NgxMaskDirective, provideNgxMask } from 'ngx-mask'; import type { DebugElement } from '@angular/core'; import { equal } from './utils/test-functions.component'; @@ -28,8 +27,8 @@ describe('Directive: Mask (Trigger on mask change)', () => { }); it('should trigger form value update if mask is changed', async () => { - component.mask = ''; - component.triggerOnMaskChange = true; + component.mask.set(''); + component.triggerOnMaskChange.set(true); fixture.detectChanges(); component.form.setValue('7912345678'); @@ -39,7 +38,7 @@ describe('Directive: Mask (Trigger on mask change)', () => { expect(inputEl.nativeElement.value).toEqual('7912345678'); expect(component.form.value).toEqual('7912345678'); - component.mask = '00 000 00 00'; + component.mask.set('00 000 00 00'); fixture.detectChanges(); await fixture.whenStable(); inputEl = fixture.debugElement.query(By.css('input')); @@ -48,8 +47,8 @@ describe('Directive: Mask (Trigger on mask change)', () => { }); it('should trigger form value update if mask is changed', async () => { - component.mask = '00000||00000-0000'; - component.triggerOnMaskChange = true; + component.mask.set('00000||00000-0000'); + component.triggerOnMaskChange.set(true); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; spyOnProperty(document, 'activeElement').and.returnValue(inputTarget); @@ -59,7 +58,7 @@ describe('Directive: Mask (Trigger on mask change)', () => { expect(inputTarget.value).toEqual('1234'); expect(component.form.value).toBe('1234'); - component.mask = 'S0S 0S0'; + component.mask.set('S0S 0S0'); equal(inputTarget.value, '', fixture, true); expect(component.form.value).toBe(''); }); diff --git a/projects/ngx-mask-lib/src/test/type-number.spec.ts b/projects/ngx-mask-lib/src/test/type-number.spec.ts index 5d0ebc05..82e3a69e 100644 --- a/projects/ngx-mask-lib/src/test/type-number.spec.ts +++ b/projects/ngx-mask-lib/src/test/type-number.spec.ts @@ -1,4 +1,4 @@ -import { Component } from '@angular/core'; +import { Component, signal } from '@angular/core'; import { FormControl, ReactiveFormsModule } from '@angular/forms'; import type { ComponentFixture } from '@angular/core/testing'; import { TestBed } from '@angular/core/testing'; @@ -9,12 +9,12 @@ import { equal } from './utils/test-functions.component'; selector: 'jsdaddy-open-source-test', standalone: true, imports: [ReactiveFormsModule, NgxMaskDirective], - template: ` `, + template: ` `, }) // eslint-disable-next-line @angular-eslint/component-class-suffix export class TestTypeNumber { public form: FormControl = new FormControl(''); - public mask = ''; + public mask = signal(''); } describe('Directive: Mask (Trigger on mask change)', () => { @@ -36,7 +36,7 @@ describe('Directive: Mask (Trigger on mask change)', () => { }); it('mask 0* should work with mask 0*', () => { - component.mask = '0*'; + component.mask.set('0*'); equal('1', '1', fixture); equal('12', '12', fixture); @@ -46,7 +46,7 @@ describe('Directive: Mask (Trigger on mask change)', () => { }); it('mask 0000 should work with mask 0000', () => { - component.mask = '0000'; + component.mask.set('0000'); equal('1', '1', fixture); equal('12', '12', fixture); @@ -56,14 +56,14 @@ describe('Directive: Mask (Trigger on mask change)', () => { }); it('mask 0000 should work with mask 0000', () => { - component.mask = 'percent'; + component.mask.set('percent'); equal('100', '100', fixture); equal('99', '99', fixture); }); it('should be editable with empty mask', () => { - component.mask = ''; + component.mask.set(''); equal('100', '100', fixture); equal('99', '99', fixture); diff --git a/projects/ngx-mask-lib/src/test/utils/test-component.component.ts b/projects/ngx-mask-lib/src/test/utils/test-component.component.ts index f231a1cb..c5e5b0c2 100644 --- a/projects/ngx-mask-lib/src/test/utils/test-component.component.ts +++ b/projects/ngx-mask-lib/src/test/utils/test-component.component.ts @@ -1,4 +1,4 @@ -import { Component, inject } from '@angular/core'; +import { Component, inject, signal } from '@angular/core'; import { FormControl, ReactiveFormsModule } from '@angular/forms'; import type { NgxMaskConfig } from 'ngx-mask'; import { NGX_MASK_CONFIG } from 'ngx-mask'; @@ -11,81 +11,77 @@ import { NgxMaskDirective } from 'ngx-mask'; template: ` + [showMaskTyped]="showMaskTyped()" + [placeHolderCharacter]="placeHolderCharacter()" + [separatorLimit]="separatorLimit()" + [hiddenInput]="hiddenInput()" + [allowNegativeNumbers]="allowNegativeNumbers()" + [leadZeroDateTime]="leadZeroDateTime()" + [leadZero]="leadZero()" + [keepCharacterPositions]="keepCharacterPositions()" + [apm]="apm()" + [validation]="validation()" + [inputTransformFn]="inputTransformFn()" + [outputTransformFn]="outputTransformFn()" + [triggerOnMaskChange]="triggerOnMaskChange()" /> `, }) export class TestMaskComponent { - public mask!: string | null | undefined; protected _config = inject(NGX_MASK_CONFIG); public form: FormControl = new FormControl(); - public dropSpecialCharacters: NgxMaskConfig['dropSpecialCharacters'] = - this._config.dropSpecialCharacters; - - public clearIfNotMatch: NgxMaskConfig['clearIfNotMatch'] = this._config.clearIfNotMatch; - - public patterns: NgxMaskConfig['patterns'] = this._config.patterns; - - public prefix: NgxMaskConfig['prefix'] = this._config.prefix; - - public thousandSeparator: NgxMaskConfig['thousandSeparator'] = this._config.thousandSeparator; - - public decimalMarker: NgxMaskConfig['decimalMarker'] = this._config.decimalMarker; - - public suffix: NgxMaskConfig['suffix'] = this._config.suffix; - - public specialCharacters: NgxMaskConfig['specialCharacters'] = this._config.specialCharacters; - - public keepCharacterPositions: NgxMaskConfig['keepCharacterPositions'] = - this._config.keepCharacterPositions; - - public showMaskTyped: NgxMaskConfig['showMaskTyped'] = this._config.showMaskTyped; - - public placeHolderCharacter: NgxMaskConfig['placeHolderCharacter'] = - this._config.placeHolderCharacter; - - public hiddenInput: NgxMaskConfig['hiddenInput'] = this._config.hiddenInput; - - public separatorLimit: NgxMaskConfig['separatorLimit'] = this._config.separatorLimit; - - public allowNegativeNumbers: NgxMaskConfig['allowNegativeNumbers'] = - this._config.allowNegativeNumbers; - - public leadZeroDateTime: NgxMaskConfig['leadZeroDateTime'] = this._config.leadZeroDateTime; - - public leadZero: NgxMaskConfig['leadZero'] = this._config.leadZero; - - public triggerOnMaskChange: NgxMaskConfig['triggerOnMaskChange'] = - this._config.triggerOnMaskChange; - - public validation: NgxMaskConfig['validation'] = this._config.validation; - - public apm: NgxMaskConfig['apm'] = this._config.apm; - - public inputTransformFn: NgxMaskConfig['inputTransformFn'] = this._config.inputTransformFn; - - public outputTransformFn: NgxMaskConfig['outputTransformFn'] = this._config.outputTransformFn; + public mask = signal(''); + + public dropSpecialCharacters = signal( + this._config.dropSpecialCharacters + ); + public hiddenInput = signal(this._config.hiddenInput); + public clearIfNotMatch = signal(this._config.clearIfNotMatch); + public specialCharacters = signal( + this._config.specialCharacters + ); + public patterns = signal(this._config.patterns); + public prefix = signal(this._config.prefix); + public suffix = signal(this._config.suffix); + public thousandSeparator = signal( + this._config.thousandSeparator + ); + public decimalMarker = signal(this._config.decimalMarker); + public showMaskTyped = signal(this._config.showMaskTyped); + public placeHolderCharacter = signal( + this._config.placeHolderCharacter + ); + public validation = signal(this._config.validation); + public separatorLimit = signal(this._config.separatorLimit); + public allowNegativeNumbers = signal( + this._config.allowNegativeNumbers + ); + public leadZeroDateTime = signal( + this._config.leadZeroDateTime + ); + public leadZero = signal(this._config.leadZero); + public apm = signal(this._config.apm); + public inputTransformFn = signal( + this._config.inputTransformFn + ); + public outputTransformFn = signal( + this._config.outputTransformFn + ); + public keepCharacterPositions = signal( + this._config.keepCharacterPositions + ); + public triggerOnMaskChange = signal( + this._config.triggerOnMaskChange + ); } diff --git a/projects/ngx-mask-lib/src/test/validation.spec.ts b/projects/ngx-mask-lib/src/test/validation.spec.ts index 6e566403..29f94fb2 100644 --- a/projects/ngx-mask-lib/src/test/validation.spec.ts +++ b/projects/ngx-mask-lib/src/test/validation.spec.ts @@ -3,8 +3,7 @@ import { TestBed } from '@angular/core/testing'; import { ReactiveFormsModule, Validators } from '@angular/forms'; import { equal } from './utils/test-functions.component'; -import { provideNgxMask } from '../lib/ngx-mask.providers'; -import { NgxMaskDirective } from '../lib/ngx-mask.directive'; +import { NgxMaskDirective, provideNgxMask } from 'ngx-mask'; import { TestMaskComponent } from './utils/test-component.component'; describe('Directive: Mask (Validation)', () => { @@ -22,7 +21,7 @@ describe('Directive: Mask (Validation)', () => { }); it('should be marked as not valid if not valid and validation attribute true', () => { - component.mask = '0000'; + component.mask.set('0000'); component.form.addValidators(Validators.required); equal('12', '12', fixture); @@ -31,7 +30,7 @@ describe('Directive: Mask (Validation)', () => { }); it('should be marked as valid if not valid and validation attribute false', () => { - component.validation = false; + component.validation.set(false); component.form.addValidators(Validators.required); equal('12', '12', fixture); @@ -39,7 +38,7 @@ describe('Directive: Mask (Validation)', () => { }); it('should be marked as valid if valid and validation attribute true', () => { - component.mask = '0000'; + component.mask.set('0000'); component.form.addValidators(Validators.required); equal('1234', '1234', fixture); @@ -47,8 +46,8 @@ describe('Directive: Mask (Validation)', () => { }); it('should be marked as valid if not valid and validation attribute false', () => { - component.validation = false; - component.mask = '0000'; + component.validation.set(false); + component.mask.set('0000'); component.form.addValidators(Validators.required); equal('12', '12', fixture); @@ -56,8 +55,8 @@ describe('Directive: Mask (Validation)', () => { }); it('should be not valid email mask A*@A*.SSS', () => { - component.mask = 'A*@A*.SSS'; - component.dropSpecialCharacters = false; + component.mask.set('A*@A*.SSS'); + component.dropSpecialCharacters.set(false); component.form.addValidators(Validators.required); equal('a', 'a', fixture); @@ -87,8 +86,8 @@ describe('Directive: Mask (Validation)', () => { }); it('should valid email mask A*@A*.SSS', () => { - component.mask = 'A*@A*.SSS'; - component.dropSpecialCharacters = false; + component.mask.set('A*@A*.SSS'); + component.dropSpecialCharacters.set(false); component.form.addValidators(Validators.required); equal('testing@gmail.com', 'testing@gmail.com', fixture); @@ -96,8 +95,8 @@ describe('Directive: Mask (Validation)', () => { }); it('should be not valid mask A*@A*.SS', () => { - component.mask = 'A*@A*.SS'; - component.dropSpecialCharacters = false; + component.mask.set('A*@A*.SS'); + component.dropSpecialCharacters.set(false); component.form.addValidators(Validators.required); equal('d', 'd', fixture); @@ -125,8 +124,8 @@ describe('Directive: Mask (Validation)', () => { }); it('should valid email mask', () => { - component.mask = 'A*@A*.SS'; - component.dropSpecialCharacters = false; + component.mask.set('A*@A*.SS'); + component.dropSpecialCharacters.set(false); component.form.addValidators(Validators.required); equal('testing@some.ua', 'testing@some.ua', fixture); @@ -134,7 +133,7 @@ describe('Directive: Mask (Validation)', () => { }); it('should valid from one digit mask 0*', () => { - component.mask = '0*'; + component.mask.set('0*'); component.form.setValidators([Validators.required, Validators.min(1)]); component.form.updateValueAndValidity(); @@ -151,7 +150,7 @@ describe('Directive: Mask (Validation)', () => { }); it('should valid from one digit mask S*', () => { - component.mask = 'S*'; + component.mask.set('S*'); component.form.setValidators([Validators.required, Validators.min(1)]); component.form.updateValueAndValidity(); @@ -162,7 +161,7 @@ describe('Directive: Mask (Validation)', () => { }); it('should valid from one digit mask A*', () => { - component.mask = 'A*'; + component.mask.set('A*'); component.form.setValidators([Validators.required, Validators.min(1)]); component.form.updateValueAndValidity(); @@ -175,10 +174,7 @@ describe('Directive: Mask (Validation)', () => { }); it('mask with number value should work as expected mask 0*', () => { - // public form: FormControl = new FormControl(44, Validators.required); - // public mask = ''; - // public validate = true; - component.mask = '0*'; + component.mask.set('0*'); component.form.setValidators([Validators.required, Validators.min(1)]); component.form.updateValueAndValidity(); @@ -196,7 +192,7 @@ describe('Directive: Mask (Validation)', () => { }); it('mask with number value should work as expected mask 000.00', () => { - component.mask = '000.00'; + component.mask.set('000.00'); component.form.addValidators(Validators.required); component.form.setValue(''); @@ -226,9 +222,9 @@ describe('Directive: Mask (Validation)', () => { }); it('dropSpecialCharacters is different from specialCharacters', () => { - component.mask = '+000'; - component.specialCharacters = ['+', ' ']; - component.dropSpecialCharacters = [' ']; + component.mask.set('+000'); + component.specialCharacters.set(['+', ' ']); + component.dropSpecialCharacters.set([' ']); component.form.addValidators(Validators.required); equal('+37', '+37', fixture); @@ -237,7 +233,7 @@ describe('Directive: Mask (Validation)', () => { equal('+373', '+373', fixture); expect(component.form.valid).toBe(true); - component.mask = '+000 000 00 000'; + component.mask.set('+000 000 00 000'); equal('+3736000000', '+373 600 00 00', fixture); expect(component.form.valid).toBe(false); @@ -247,8 +243,8 @@ describe('Directive: Mask (Validation)', () => { }); it('email Mask should validated correct', () => { - component.mask = 'A*@A*.A*'; - component.dropSpecialCharacters = false; + component.mask.set('A*@A*.A*'); + component.dropSpecialCharacters.set(false); component.form.addValidators(Validators.required); equal('validate', 'validate', fixture); diff --git a/src/app/options/options.component.html b/src/app/options/options.component.html index 3b2442bd..3ab32158 100644 --- a/src/app/options/options.component.html +++ b/src/app/options/options.component.html @@ -34,7 +34,7 @@ *ngTemplateOutlet=" exampleTmpl; context: { $implicit: cardExamples()?.[i], placeholder: tile.header } - "> + " /> } @@ -45,8 +45,7 @@ *ngTemplateOutlet=" !ex._pipe ? inputTemplate : pipeTemplate; context: { $implicit: ex, placeholder: placeholder } - "> - + " /> diff --git a/src/assets/content/optional.ts b/src/assets/content/optional.ts index 8f7255ce..8c36a860 100644 --- a/src/assets/content/optional.ts +++ b/src/assets/content/optional.ts @@ -84,7 +84,7 @@ export const OptDocs: ComDoc[] = [ export const OptExamples: TExample[] = [ { _placeholder: 'prefix', - _prefix: '+7', + _prefix: '+7 ', _mask: '(00) 000 000', control: { form: new UntypedFormControl(''), model: '' }, }, diff --git a/src/libraries b/src/libraries index 44bebdfb..158eddb9 160000 --- a/src/libraries +++ b/src/libraries @@ -1 +1 @@ -Subproject commit 44bebdfba90c6534af67bf84d5f90f8f1b0b343b +Subproject commit 158eddb9ea79ca05967268021029ecdf096c23bb diff --git a/tsconfig.json b/tsconfig.json index e154a50d..f7422398 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -14,10 +14,10 @@ "target": "ES2022", "lib": ["ES2022", "dom"], "paths": { - "ngx-mask": ["projects/ngx-mask-lib/src"], - "ngx-mask/*": ["projects/ngx-mask-lib/src"], + "@libraries/*": ["src/libraries/*"], "@open-source/*": ["src/libraries/open-source/*"], - "@libraries/*": ["src/libraries/*"] + "ngx-mask": ["projects/ngx-mask-lib/src"], + "ngx-mask/*": ["projects/ngx-mask-lib/src"] }, "moduleResolution": "node", "forceConsistentCasingInFileNames": true, @@ -50,7 +50,7 @@ "checks": { "invalidBananaInBox": "error", "nullishCoalescingNotNullable": "warning", - "unusedStandaloneImports": "suppress" + "unusedStandaloneImports": "error" }, "defaultCategory": "suppress" }