From 5b3582aa47fa1ac6453c9ea6fe8ed04d17b4e33e Mon Sep 17 00:00:00 2001 From: andriikamaldinov1 Date: Thu, 21 Sep 2023 11:10:11 +0300 Subject: [PATCH] v13 --- CHANGELOG.md | 2 +- package-lock.json | 4 +- package.json | 2 +- projects/ngx-mask-lib/package.json | 2 +- .../src/lib/ngx-mask-applier.service.ts | 2 - .../src/lib/ngx-mask.directive.ts | 9 +- .../ngx-mask-lib/src/lib/ngx-mask.pipe.ts | 2 +- .../ngx-mask-lib/src/lib/ngx-mask.service.ts | 19 +- .../ngx-mask-lib/src/test/mask.pipe.spec.ts | 710 +++++++++--------- .../test/utils/test-component.component.ts | 7 +- src/app/app.component.html | 10 +- src/app/app.component.ts | 38 - tsconfig.json | 1 + 13 files changed, 375 insertions(+), 433 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 357a3b36..0d095b26 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,4 +1,4 @@ -# 13.2.0(2023-09-19) +# 13.2.1(2023-09-19) ### Feature diff --git a/package-lock.json b/package-lock.json index 2e48084c..efc4d72e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "ngx-mask", - "version": "13.2.0", + "version": "13.2.1", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "ngx-mask", - "version": "13.2.0", + "version": "13.2.1", "license": "MIT", "dependencies": { "@angular/animations": "~13.3.0", diff --git a/package.json b/package.json index a0d49ea3..65b0b134 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ngx-mask", - "version": "13.2.0", + "version": "13.2.1", "description": "Awesome ngx mask", "license": "MIT", "engines": { diff --git a/projects/ngx-mask-lib/package.json b/projects/ngx-mask-lib/package.json index 37975507..a7a60d3a 100644 --- a/projects/ngx-mask-lib/package.json +++ b/projects/ngx-mask-lib/package.json @@ -1,6 +1,6 @@ { "name": "ngx-mask", - "version": "13.2.0", + "version": "13.2.1-test", "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 652d8d9a..6c55112a 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 @@ -4,8 +4,6 @@ import { MaskExpression } from './ngx-mask-expression.enum'; @Injectable() export class NgxMaskApplierService { - // protected _config = inject(NGX_MASK_CONFIG); - public dropSpecialCharacters: IConfig['dropSpecialCharacters']; public hiddenInput: IConfig['hiddenInput']; 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 f8126104..a7910c02 100644 --- a/projects/ngx-mask-lib/src/lib/ngx-mask.directive.ts +++ b/projects/ngx-mask-lib/src/lib/ngx-mask.directive.ts @@ -41,6 +41,7 @@ import { MaskExpression } from './ngx-mask-expression.enum'; }, NgxMaskService, ], + exportAs: 'mask,ngxMask', }) export class NgxMaskDirective implements ControlValueAccessor, OnChanges, Validator { // eslint-disable-next-line @angular-eslint/no-input-rename @@ -109,12 +110,6 @@ export class NgxMaskDirective implements ControlValueAccessor, OnChanges, Valida /**For IME composition event */ private _isComposing = false; - // private readonly document = inject(DOCUMENT); - - // public _maskService = inject(NgxMaskService, { self: true }); - - // protected _config = inject(NGX_MASK_CONFIG); - public constructor( // tslint:disable-next-line @Inject(DOCUMENT) private document: any, @@ -869,7 +864,7 @@ export class NgxMaskDirective implements ControlValueAccessor, OnChanges, Valida // // eslint-disable-next-line no-param-reassign controlValue = controlValue.value; } - console.log('decimal', this._maskService.decimalMarker); + if (controlValue !== null) { // eslint-disable-next-line no-param-reassign controlValue = this.inputTransformFn 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 049648e2..b74e0ff1 100644 --- a/projects/ngx-mask-lib/src/lib/ngx-mask.pipe.ts +++ b/projects/ngx-mask-lib/src/lib/ngx-mask.pipe.ts @@ -9,7 +9,7 @@ import { MaskExpression } from './ngx-mask-expression.enum'; pure: true, }) export class NgxMaskPipe implements PipeTransform { - public constructor(private _maskService: NgxMaskService) {} + public constructor(public _maskService: NgxMaskService) {} private readonly defaultOptions: Partial = {}; 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 416c316a..686d1b87 100644 --- a/projects/ngx-mask-lib/src/lib/ngx-mask.service.ts +++ b/projects/ngx-mask-lib/src/lib/ngx-mask.service.ts @@ -1,4 +1,4 @@ -import { ElementRef, Inject, Injectable, Renderer2 } from '@angular/core'; +import { ElementRef, Inject, Injectable, Optional, Renderer2 } from '@angular/core'; import { DOCUMENT } from '@angular/common'; import { NGX_MASK_CONFIG, IConfig } from './ngx-mask.config'; @@ -35,28 +35,17 @@ export class NgxMaskService extends NgxMaskApplierService { private _previousValue = ''; private _currentValue = ''; + // eslint-disable-next-line @typescript-eslint/no-empty-function, @typescript-eslint/no-explicit-any public onChange = (_: any) => {}; - // private readonly document = inject(DOCUMENT); - // - // protected override _config = inject(NGX_MASK_CONFIG); - // - // private readonly _elementRef = inject(ElementRef); - // - // private readonly _renderer = inject(Renderer2); - - protected _formElement: HTMLInputElement; - public constructor( - // tslint:disable-next-line @Inject(DOCUMENT) private document: any, @Inject(NGX_MASK_CONFIG) protected override _config: IConfig, - private _elementRef: ElementRef, - private _renderer: Renderer2 + @Optional() private _elementRef: ElementRef, + @Optional() private _renderer: Renderer2 ) { super(_config); - this._formElement = this._elementRef.nativeElement; } // eslint-disable-next-line complexity 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 a7f8613c..c6467523 100644 --- a/projects/ngx-mask-lib/src/test/mask.pipe.spec.ts +++ b/projects/ngx-mask-lib/src/test/mask.pipe.spec.ts @@ -1,355 +1,355 @@ -// import { TestBed } from '@angular/core/testing'; -// import { NgxMaskModule } from '../lib/ngx-mask.module'; -// import { IConfig, NgxMaskPipe, NgxMaskService } from 'ngx-mask'; -// -// describe('Pipe: Mask', () => { -// let maskPipe: NgxMaskPipe; -// -// beforeEach(() => { -// TestBed.configureTestingModule({ -// imports: [NgxMaskModule.forRoot()], -// }); -// }); -// beforeEach(() => { -// const service: NgxMaskService = TestBed.inject(NgxMaskService); -// maskPipe = new NgxMaskPipe(service); -// }); -// -// it('should mask a string', () => { -// const maskedString: string = maskPipe.transform('abcdef', 'SS-SS-SS'); -// -// expect(maskedString).toEqual('ab-cd-ef'); -// }); -// -// it('should mask a number', () => { -// const maskedNumber: string = maskPipe.transform(123456789, '999-999-999'); -// -// expect(maskedNumber).toEqual('123-456-789'); -// }); -// -// it('should mask a number and string', () => { -// const maskedNumberAndString: string | number = maskPipe.transform('123abc', '09A/SAS'); -// expect(maskedNumberAndString).toEqual('123/abc'); -// }); -// -// it('should custom pattern', () => { -// const patterns: IConfig['patterns'] = { -// P: { -// pattern: new RegExp('\\d'), -// }, -// }; -// const maskedNumber: string = maskPipe.transform(123456789, 'PPP-PP-PPP', { patterns }); -// expect(maskedNumber).toEqual('123-45-678'); -// }); -// -// it('should mask a zero number', () => { -// const maskedNumberAndString: string | number = maskPipe.transform(0, '0'); -// expect(maskedNumberAndString).toEqual('0'); -// }); -// -// it('should mask separator', () => { -// const value: string | number = maskPipe.transform('123123123', 'separator.0'); -// expect(value).toEqual('123 123 123'); -// }); -// -// it('should mask separator with thousandSeparator .', () => { -// const value: string | number = maskPipe.transform('123123123', 'separator.0', { -// thousandSeparator: '.', -// }); -// expect(value).toEqual('123.123.123'); -// }); -// -// it('should mask separator with thousandSeparator ,', () => { -// const value: string | number = maskPipe.transform('123123123', 'separator.0', { -// thousandSeparator: ',', -// }); -// expect(value).toEqual('123,123,123'); -// }); -// -// it('should mask separator.2 with thousandSeparator ,', () => { -// const value: string | number = maskPipe.transform('12312312.3', 'separator.2', { -// thousandSeparator: ',', -// }); -// expect(value).toEqual('12,312,312.3'); -// }); -// -// it('should work with *', () => { -// let value: string | number = maskPipe.transform("11'1", "0*'09"); -// expect(value).toEqual("11'1"); -// value = maskPipe.transform('111111', "0*'09"); -// expect(value).toEqual('111111'); -// }); -// -// it('should work with suffix', () => { -// const value: string | number = maskPipe.transform("11'1", "0*'09", { suffix: ' sm' }); -// expect(value).toEqual("11'1 sm"); -// }); -// -// it('should work with suffix', () => { -// const value: string | number = maskPipe.transform("11'111", '00-00', { -// dropSpecialCharacters: true, -// }); -// expect(value).toEqual('11-11'); -// }); -// it('should work with showMaskTyped', () => { -// const value: string | number = maskPipe.transform('11', '00-00', { -// showMaskTyped: true, -// }); -// expect(value).toEqual('11-__'); -// }); -// it('should work with showMaskTyped', () => { -// const value: string | number = maskPipe.transform('12312312', '(000)-00-00', { -// prefix: '+380 ', -// }); -// expect(value).toEqual('+380 (123)-12-31'); -// }); -// it('should work with shownMaskExpression', () => { -// const value: string | number = maskPipe.transform('12312312', '(000)-00-00', { -// prefix: '+380 ', -// }); -// expect(value).toEqual('+380 (123)-12-31'); -// }); -// it('should work with dynamicMask 0,00||00,00||000,00||0000,00||00.000,00', () => { -// const value: string | number = maskPipe.transform( -// '123', -// '0,00||00,00||000,00||0000,00||00.000,00' -// ); -// const value1: string | number = maskPipe.transform( -// '1232', -// '0,00||00,00||000,00||0000,00||00.000,00' -// ); -// const value2: string | number = maskPipe.transform( -// '12322', -// '0,00||00,00||000,00||0000,00||00.000,00' -// ); -// const value3: string | number = maskPipe.transform( -// '123222', -// '0,00||00,00||000,00||0000,00||00.000,00' -// ); -// const value4: string | number = maskPipe.transform( -// '1232222', -// '0,00||00,00||000,00||0000,00||00.000,00' -// ); -// expect(value).toEqual('1,23'); -// expect(value1).toEqual('12,32'); -// expect(value2).toEqual('123,22'); -// expect(value3).toEqual('1232,22'); -// expect(value4).toEqual('12.322,22'); -// }); -// -// it('should work with dynamicMask 0000 0000 0000 0000||0000 0000 0000 0000 00||0000 0000 0000 0000 000', () => { -// const value: string | number = maskPipe.transform( -// '1234 1234 1234 1234', -// '0000 0000 0000 0000||0000 0000 0000 0000 00||0000 0000 0000 0000 000' -// ); -// const value1: string | number = maskPipe.transform( -// '1234 1234 1234 1234 12', -// '0000 0000 0000 0000||0000 0000 0000 0000 00||0000 0000 0000 0000 000' -// ); -// const value2: string | number = maskPipe.transform( -// '1234 1234 1234 1234 123', -// '0000 0000 0000 0000||0000 0000 0000 0000 00||0000 0000 0000 0000 000' -// ); -// -// expect(value).toEqual('1234 1234 1234 1234'); -// expect(value1).toEqual('1234 1234 1234 1234 12'); -// expect(value2).toEqual('1234 1234 1234 1234 123'); -// }); -// -// it('should work with dynamicMask (00) 0000-0000||(00) 00000-0000', () => { -// const value: string | number = maskPipe.transform( -// '1234123412', -// '(00) 0000-0000||(00) 00000-0000' -// ); -// const value1: string | number = maskPipe.transform( -// '12341234123', -// '(00) 0000-0000||(00) 00000-0000' -// ); -// -// expect(value).toEqual('(12) 3412-3412'); -// expect(value1).toEqual('(12) 34123-4123'); -// }); -// -// it('should work with custom pattern and hideInput', () => { -// const SSN_PATTERNS: IConfig['patterns'] = { -// 0: { pattern: new RegExp('\\d') }, -// A: { pattern: new RegExp('\\d'), symbol: '●' }, -// }; -// const value: string | number = maskPipe.transform('1234122', 'AAA - AA - 0000', { -// hiddenInput: true, -// patterns: SSN_PATTERNS, -// }); -// const value1: string | number = maskPipe.transform('123412', 'AAA - AA - 0000', { -// hiddenInput: true, -// patterns: SSN_PATTERNS, -// }); -// const value2: string | number = maskPipe.transform('12341', 'AAA - AA - 0000', { -// hiddenInput: true, -// patterns: SSN_PATTERNS, -// }); -// const value3: string | number = maskPipe.transform('1234', 'AAA - AA - 0000', { -// hiddenInput: true, -// patterns: SSN_PATTERNS, -// }); -// const value4: string | number = maskPipe.transform('123', 'AAA - AA - 0000', { -// hiddenInput: true, -// patterns: SSN_PATTERNS, -// }); -// const value5: string | number = maskPipe.transform('12', 'AAA - AA - 0000', { -// hiddenInput: true, -// patterns: SSN_PATTERNS, -// }); -// const value6: string | number = maskPipe.transform('1', 'AAA - AA - 0000', { -// hiddenInput: true, -// patterns: SSN_PATTERNS, -// }); -// expect(value).toEqual('●●● - ●● - 22'); -// expect(value1).toEqual('●●● - ●● - 2'); -// expect(value2).toEqual('●●● - ●●'); -// expect(value3).toEqual('●●● - ●'); -// expect(value4).toEqual('●●●'); -// expect(value5).toEqual('●●'); -// expect(value6).toEqual('●'); -// }); -// -// it('should work with repeatMask A{4}', () => { -// const value: string | number = maskPipe.transform('1234', 'A{4}'); -// const value1: string | number = maskPipe.transform('1', 'A{4}'); -// const value2: string | number = maskPipe.transform('12', 'A{4}'); -// const value3: string | number = maskPipe.transform('123', 'A{4}'); -// -// expect(value).toEqual('1234'); -// expect(value1).toEqual('1'); -// expect(value2).toEqual('12'); -// expect(value3).toEqual('123'); -// }); -// -// it('should work with repeatMask A{4}', () => { -// const value: string | number = maskPipe.transform('1234', 'A{4}'); -// const value1: string | number = maskPipe.transform('1', 'A{4}'); -// const value2: string | number = maskPipe.transform('12', 'A{4}'); -// const value3: string | number = maskPipe.transform('123', 'A{4}'); -// -// expect(value).toEqual('1234'); -// expect(value1).toEqual('1'); -// expect(value2).toEqual('12'); -// expect(value3).toEqual('123'); -// }); -// -// it('should work with repeatMask SS0{4}', () => { -// const value: string | number = maskPipe.transform('d', 'SS0{4}'); -// const value1: string | number = maskPipe.transform('dd', 'SS0{4}'); -// const value2: string | number = maskPipe.transform('dd1', 'SS0{4}'); -// const value3: string | number = maskPipe.transform('dd12', 'SS0{4}'); -// const value4: string | number = maskPipe.transform('dd123', 'SS0{4}'); -// const value5: string | number = maskPipe.transform('dd1234', 'SS0{4}'); -// -// expect(value).toEqual('d'); -// expect(value1).toEqual('dd'); -// expect(value2).toEqual('dd1'); -// expect(value3).toEqual('dd12'); -// expect(value4).toEqual('dd123'); -// expect(value5).toEqual('dd1234'); -// }); -// -// it('should work with leadZero separator.2', () => { -// const value: string | number = maskPipe.transform('3000', 'separator.2', { -// leadZero: true, -// }); -// const value1: string | number = maskPipe.transform('1', 'separator.2', { -// leadZero: true, -// }); -// const value2: string | number = maskPipe.transform('12', 'separator.2', { -// leadZero: true, -// }); -// const value3: string | number = maskPipe.transform('123', 'separator.2', { -// leadZero: true, -// }); -// -// expect(value).toEqual('3 000.00'); -// expect(value1).toEqual('1.00'); -// expect(value2).toEqual('12.00'); -// expect(value3).toEqual('123.00'); -// }); -// -// it('should work with leadZero separator.3', () => { -// const value: string | number = maskPipe.transform('3000', 'separator.3', { -// leadZero: true, -// }); -// const value1: string | number = maskPipe.transform('1', 'separator.3', { -// leadZero: true, -// }); -// const value2: string | number = maskPipe.transform('12', 'separator.3', { -// leadZero: true, -// }); -// const value3: string | number = maskPipe.transform('123', 'separator.3', { -// leadZero: true, -// }); -// -// expect(value).toEqual('3 000.000'); -// expect(value1).toEqual('1.000'); -// expect(value2).toEqual('12.000'); -// expect(value3).toEqual('123.000'); -// }); -// -// it('should work with leadZero separator.2 thousandSeparator decimalMarker', () => { -// const value: string | number = maskPipe.transform('3000', 'separator.2', { -// leadZero: true, -// thousandSeparator: '.', -// decimalMarker: ',', -// }); -// expect(value).toEqual('3.000,00'); -// }); -// -// it('should work with leadZero separator.2 thousandSeparator decimalMarker', () => { -// const value: string | number = maskPipe.transform('3000', 'separator.2', { -// leadZero: true, -// thousandSeparator: ',', -// decimalMarker: '.', -// }); -// expect(value).toEqual('3,000.00'); -// }); -// -// it('should work with leadZero separator.3 thousandSeparator decimalMarker', () => { -// const value: string | number = maskPipe.transform('3000', 'separator.3', { -// leadZero: true, -// thousandSeparator: '.', -// decimalMarker: ',', -// }); -// expect(value).toEqual('3.000,000'); -// }); -// -// it('should work with leadZero separator.3 thousandSeparator decimalMarker', () => { -// const value: string | number = maskPipe.transform('3000', 'separator.3', { -// leadZero: true, -// thousandSeparator: ',', -// decimalMarker: '.', -// }); -// expect(value).toEqual('3,000.000'); -// }); -// -// it('should work with separator.3 thousandSeparator decimalMarker', () => { -// const value: string | number = maskPipe.transform('3000', 'separator.3', { -// thousandSeparator: ',', -// decimalMarker: '.', -// }); -// expect(value).toEqual('3,000'); -// }); -// -// it('should work with separator.2 thousandSeparator decimalMarker', () => { -// const value: string | number = maskPipe.transform('3000', 'separator.3', { -// thousandSeparator: ',', -// decimalMarker: '.', -// }); -// expect(value).toEqual('3,000'); -// }); -// -// it('should work with separator.2 thousandSeparator decimalMarker', () => { -// const value: string | number = maskPipe.transform('3000', 'separator.3', { -// thousandSeparator: '.', -// decimalMarker: ',', -// }); -// expect(value).toEqual('3.000'); -// }); -// //TODO(inepipepnko): need cover all config options -// }); +import { TestBed } from '@angular/core/testing'; +import { NgxMaskPipe } from '../lib/ngx-mask.pipe'; +import { IConfig, NgxMaskModule, NgxMaskService } from 'ngx-mask'; + +describe('Pipe: Mask', () => { + let maskPipe: NgxMaskPipe; + + beforeEach(() => { + TestBed.configureTestingModule({ + imports: [NgxMaskModule.forRoot()], + }); + }); + beforeEach(() => { + const service: NgxMaskService = TestBed.inject(NgxMaskService); + maskPipe = new NgxMaskPipe(service); + }); + + it('should mask a string', () => { + const maskedString: string = maskPipe.transform('abcdef', 'SS-SS-SS'); + + expect(maskedString).toEqual('ab-cd-ef'); + }); + + it('should mask a number', () => { + const maskedNumber: string = maskPipe.transform(123456789, '999-999-999'); + + expect(maskedNumber).toEqual('123-456-789'); + }); + + it('should mask a number and string', () => { + const maskedNumberAndString: string | number = maskPipe.transform('123abc', '09A/SAS'); + expect(maskedNumberAndString).toEqual('123/abc'); + }); + + it('should custom pattern', () => { + const patterns: IConfig['patterns'] = { + P: { + pattern: new RegExp('\\d'), + }, + }; + const maskedNumber: string = maskPipe.transform(123456789, 'PPP-PP-PPP', { patterns }); + expect(maskedNumber).toEqual('123-45-678'); + }); + + it('should mask a zero number', () => { + const maskedNumberAndString: string | number = maskPipe.transform(0, '0'); + expect(maskedNumberAndString).toEqual('0'); + }); + + it('should mask separator', () => { + const value: string | number = maskPipe.transform('123123123', 'separator.0'); + expect(value).toEqual('123 123 123'); + }); + + it('should mask separator with thousandSeparator .', () => { + const value: string | number = maskPipe.transform('123123123', 'separator.0', { + thousandSeparator: '.', + }); + expect(value).toEqual('123.123.123'); + }); + + it('should mask separator with thousandSeparator ,', () => { + const value: string | number = maskPipe.transform('123123123', 'separator.0', { + thousandSeparator: ',', + }); + expect(value).toEqual('123,123,123'); + }); + + it('should mask separator.2 with thousandSeparator ,', () => { + const value: string | number = maskPipe.transform('12312312.3', 'separator.2', { + thousandSeparator: ',', + }); + expect(value).toEqual('12,312,312.3'); + }); + + it('should work with *', () => { + let value: string | number = maskPipe.transform("11'1", "0*'09"); + expect(value).toEqual("11'1"); + value = maskPipe.transform('111111', "0*'09"); + expect(value).toEqual('111111'); + }); + + it('should work with suffix', () => { + const value: string | number = maskPipe.transform("11'1", "0*'09", { suffix: ' sm' }); + expect(value).toEqual("11'1 sm"); + }); + + it('should work with suffix', () => { + const value: string | number = maskPipe.transform("11'111", '00-00', { + dropSpecialCharacters: true, + }); + expect(value).toEqual('11-11'); + }); + it('should work with showMaskTyped', () => { + const value: string | number = maskPipe.transform('11', '00-00', { + showMaskTyped: true, + }); + expect(value).toEqual('11-__'); + }); + it('should work with showMaskTyped', () => { + const value: string | number = maskPipe.transform('12312312', '(000)-00-00', { + prefix: '+380 ', + }); + expect(value).toEqual('+380 (123)-12-31'); + }); + it('should work with shownMaskExpression', () => { + const value: string | number = maskPipe.transform('12312312', '(000)-00-00', { + prefix: '+380 ', + }); + expect(value).toEqual('+380 (123)-12-31'); + }); + it('should work with dynamicMask 0,00||00,00||000,00||0000,00||00.000,00', () => { + const value: string | number = maskPipe.transform( + '123', + '0,00||00,00||000,00||0000,00||00.000,00' + ); + const value1: string | number = maskPipe.transform( + '1232', + '0,00||00,00||000,00||0000,00||00.000,00' + ); + const value2: string | number = maskPipe.transform( + '12322', + '0,00||00,00||000,00||0000,00||00.000,00' + ); + const value3: string | number = maskPipe.transform( + '123222', + '0,00||00,00||000,00||0000,00||00.000,00' + ); + const value4: string | number = maskPipe.transform( + '1232222', + '0,00||00,00||000,00||0000,00||00.000,00' + ); + expect(value).toEqual('1,23'); + expect(value1).toEqual('12,32'); + expect(value2).toEqual('123,22'); + expect(value3).toEqual('1232,22'); + expect(value4).toEqual('12.322,22'); + }); + + it('should work with dynamicMask 0000 0000 0000 0000||0000 0000 0000 0000 00||0000 0000 0000 0000 000', () => { + const value: string | number = maskPipe.transform( + '1234 1234 1234 1234', + '0000 0000 0000 0000||0000 0000 0000 0000 00||0000 0000 0000 0000 000' + ); + const value1: string | number = maskPipe.transform( + '1234 1234 1234 1234 12', + '0000 0000 0000 0000||0000 0000 0000 0000 00||0000 0000 0000 0000 000' + ); + const value2: string | number = maskPipe.transform( + '1234 1234 1234 1234 123', + '0000 0000 0000 0000||0000 0000 0000 0000 00||0000 0000 0000 0000 000' + ); + + expect(value).toEqual('1234 1234 1234 1234'); + expect(value1).toEqual('1234 1234 1234 1234 12'); + expect(value2).toEqual('1234 1234 1234 1234 123'); + }); + + it('should work with dynamicMask (00) 0000-0000||(00) 00000-0000', () => { + const value: string | number = maskPipe.transform( + '1234123412', + '(00) 0000-0000||(00) 00000-0000' + ); + const value1: string | number = maskPipe.transform( + '12341234123', + '(00) 0000-0000||(00) 00000-0000' + ); + + expect(value).toEqual('(12) 3412-3412'); + expect(value1).toEqual('(12) 34123-4123'); + }); + + it('should work with custom pattern and hideInput', () => { + const SSN_PATTERNS: IConfig['patterns'] = { + 0: { pattern: new RegExp('\\d') }, + A: { pattern: new RegExp('\\d'), symbol: '●' }, + }; + const value: string | number = maskPipe.transform('1234122', 'AAA - AA - 0000', { + hiddenInput: true, + patterns: SSN_PATTERNS, + }); + const value1: string | number = maskPipe.transform('123412', 'AAA - AA - 0000', { + hiddenInput: true, + patterns: SSN_PATTERNS, + }); + const value2: string | number = maskPipe.transform('12341', 'AAA - AA - 0000', { + hiddenInput: true, + patterns: SSN_PATTERNS, + }); + const value3: string | number = maskPipe.transform('1234', 'AAA - AA - 0000', { + hiddenInput: true, + patterns: SSN_PATTERNS, + }); + const value4: string | number = maskPipe.transform('123', 'AAA - AA - 0000', { + hiddenInput: true, + patterns: SSN_PATTERNS, + }); + const value5: string | number = maskPipe.transform('12', 'AAA - AA - 0000', { + hiddenInput: true, + patterns: SSN_PATTERNS, + }); + const value6: string | number = maskPipe.transform('1', 'AAA - AA - 0000', { + hiddenInput: true, + patterns: SSN_PATTERNS, + }); + expect(value).toEqual('●●● - ●● - 22'); + expect(value1).toEqual('●●● - ●● - 2'); + expect(value2).toEqual('●●● - ●●'); + expect(value3).toEqual('●●● - ●'); + expect(value4).toEqual('●●●'); + expect(value5).toEqual('●●'); + expect(value6).toEqual('●'); + }); + + it('should work with repeatMask A{4}', () => { + const value: string | number = maskPipe.transform('1234', 'A{4}'); + const value1: string | number = maskPipe.transform('1', 'A{4}'); + const value2: string | number = maskPipe.transform('12', 'A{4}'); + const value3: string | number = maskPipe.transform('123', 'A{4}'); + + expect(value).toEqual('1234'); + expect(value1).toEqual('1'); + expect(value2).toEqual('12'); + expect(value3).toEqual('123'); + }); + + it('should work with repeatMask A{4}', () => { + const value: string | number = maskPipe.transform('1234', 'A{4}'); + const value1: string | number = maskPipe.transform('1', 'A{4}'); + const value2: string | number = maskPipe.transform('12', 'A{4}'); + const value3: string | number = maskPipe.transform('123', 'A{4}'); + + expect(value).toEqual('1234'); + expect(value1).toEqual('1'); + expect(value2).toEqual('12'); + expect(value3).toEqual('123'); + }); + + it('should work with repeatMask SS0{4}', () => { + const value: string | number = maskPipe.transform('d', 'SS0{4}'); + const value1: string | number = maskPipe.transform('dd', 'SS0{4}'); + const value2: string | number = maskPipe.transform('dd1', 'SS0{4}'); + const value3: string | number = maskPipe.transform('dd12', 'SS0{4}'); + const value4: string | number = maskPipe.transform('dd123', 'SS0{4}'); + const value5: string | number = maskPipe.transform('dd1234', 'SS0{4}'); + + expect(value).toEqual('d'); + expect(value1).toEqual('dd'); + expect(value2).toEqual('dd1'); + expect(value3).toEqual('dd12'); + expect(value4).toEqual('dd123'); + expect(value5).toEqual('dd1234'); + }); + + it('should work with leadZero separator.2', () => { + const value: string | number = maskPipe.transform('3000', 'separator.2', { + leadZero: true, + }); + const value1: string | number = maskPipe.transform('1', 'separator.2', { + leadZero: true, + }); + const value2: string | number = maskPipe.transform('12', 'separator.2', { + leadZero: true, + }); + const value3: string | number = maskPipe.transform('123', 'separator.2', { + leadZero: true, + }); + + expect(value).toEqual('3 000.00'); + expect(value1).toEqual('1.00'); + expect(value2).toEqual('12.00'); + expect(value3).toEqual('123.00'); + }); + + it('should work with leadZero separator.3', () => { + const value: string | number = maskPipe.transform('3000', 'separator.3', { + leadZero: true, + }); + const value1: string | number = maskPipe.transform('1', 'separator.3', { + leadZero: true, + }); + const value2: string | number = maskPipe.transform('12', 'separator.3', { + leadZero: true, + }); + const value3: string | number = maskPipe.transform('123', 'separator.3', { + leadZero: true, + }); + + expect(value).toEqual('3 000.000'); + expect(value1).toEqual('1.000'); + expect(value2).toEqual('12.000'); + expect(value3).toEqual('123.000'); + }); + + it('should work with leadZero separator.2 thousandSeparator decimalMarker', () => { + const value: string | number = maskPipe.transform('3000', 'separator.2', { + leadZero: true, + thousandSeparator: '.', + decimalMarker: ',', + }); + expect(value).toEqual('3.000,00'); + }); + + it('should work with leadZero separator.2 thousandSeparator decimalMarker', () => { + const value: string | number = maskPipe.transform('3000', 'separator.2', { + leadZero: true, + thousandSeparator: ',', + decimalMarker: '.', + }); + expect(value).toEqual('3,000.00'); + }); + + it('should work with leadZero separator.3 thousandSeparator decimalMarker', () => { + const value: string | number = maskPipe.transform('3000', 'separator.3', { + leadZero: true, + thousandSeparator: '.', + decimalMarker: ',', + }); + expect(value).toEqual('3.000,000'); + }); + + it('should work with leadZero separator.3 thousandSeparator decimalMarker', () => { + const value: string | number = maskPipe.transform('3000', 'separator.3', { + leadZero: true, + thousandSeparator: ',', + decimalMarker: '.', + }); + expect(value).toEqual('3,000.000'); + }); + + it('should work with separator.3 thousandSeparator decimalMarker', () => { + const value: string | number = maskPipe.transform('3000', 'separator.3', { + thousandSeparator: ',', + decimalMarker: '.', + }); + expect(value).toEqual('3,000'); + }); + + it('should work with separator.2 thousandSeparator decimalMarker', () => { + const value: string | number = maskPipe.transform('3000', 'separator.3', { + thousandSeparator: ',', + decimalMarker: '.', + }); + expect(value).toEqual('3,000'); + }); + + it('should work with separator.2 thousandSeparator decimalMarker', () => { + const value: string | number = maskPipe.transform('3000', 'separator.3', { + thousandSeparator: '.', + decimalMarker: ',', + }); + expect(value).toEqual('3.000'); + }); + //TODO(inepipepnko): need cover all config options +}); 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 317d45ac..4c368a76 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 @@ -45,9 +45,9 @@ export class TestMaskComponent { public prefix: IConfig['prefix'] = ''; - public thousandSeparator: IConfig['thousandSeparator'] = ' '; + public thousandSeparator: IConfig['thousandSeparator'] | undefined; - public decimalMarker: IConfig['decimalMarker'] = ','; + public decimalMarker: IConfig['decimalMarker'] | undefined; public suffix: IConfig['suffix'] = ''; @@ -65,7 +65,8 @@ export class TestMaskComponent { public leadZeroDateTime: IConfig['leadZeroDateTime'] = false; - public leadZero: IConfig['leadZero'] = false; + // public leadZero: IConfig['leadZero'] = undefined + public leadZero: IConfig['leadZero'] | undefined; public triggerOnMaskChange: IConfig['triggerOnMaskChange'] = false; diff --git a/src/app/app.component.html b/src/app/app.component.html index bf871042..d5d90e8a 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -24,10 +24,6 @@ - -{{ test.value }} + + +{{ phone | mask: '(000) 000-0000' }} diff --git a/src/app/app.component.ts b/src/app/app.component.ts index cced7e76..acad51dc 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -7,44 +7,6 @@ import { FormControl } from '@angular/forms'; styleUrls: ['./app.component.scss'], }) export class AppComponent { - // public card: { - // docs: IComDoc[]; - // examples: (TExample | { _pipe: string })[]; - // } = { - // docs: ComDocs, - // examples: ComExamples, - // }; - // public lists: IListItem[] = lists; - // public githubMaskLink = LinkPath.NGX_MASK; - // public title = 'Ngx-Mask'; - // public subtitle = 'Angular plugin to make masks on form fields and html elements'; - // public chips = ['Angular', 'TypeScript', 'Web', 'Input', 'Pipe', 'Show-Masks']; - // public switchCard(cardId: number): void { - // switch (cardId) { - // case 1: - // this.card.docs = ComDocs; - // this.card.examples = ComExamples; - // break; - // case 2: - // this.card.docs = OptDocs; - // this.card.examples = OptExamples; - // break; - // case 3: - // this.card.docs = SepDocs; - // this.card.examples = SepExamples; - // break; - // case 4: - // this.card.docs = OthDocs; - // this.card.examples = OthExamples; - // break; - // case 5: - // this.card.docs = ParserAndFormatterDocs; - // this.card.examples = FormatAndParserExamples; - // break; - // default: - // break; - // } - // } public test = new FormControl('0.4'); public phone = ''; diff --git a/tsconfig.json b/tsconfig.json index 3712aa52..f42cdac1 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -13,6 +13,7 @@ "target": "es2020", "lib": ["es2020", "dom"], "paths": { + "@angular/*": ["../node_modules/@angular/*"], "ngx-mask": ["projects/ngx-mask-lib/src"], "ngx-mask/*": ["projects/ngx-mask-lib/src"], "@open-source/*": ["src/libraries/open-source/*"],