ngx-mask 8.1.4 → 8.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +83 -52
- package/bundles/ngx-mask.umd.js +137 -28
- package/bundles/ngx-mask.umd.js.map +1 -1
- package/bundles/ngx-mask.umd.min.js +1 -1
- package/bundles/ngx-mask.umd.min.js.map +1 -1
- package/esm2015/index.js +3 -1
- package/esm2015/lib/config.js +4 -1
- package/esm2015/lib/mask-applier.service.js +14 -3
- package/esm2015/lib/mask.directive.js +60 -16
- package/esm2015/lib/mask.pipe.js +6 -2
- package/esm2015/lib/mask.service.js +1 -8
- package/esm2015/ngx-mask.js +2 -3
- package/esm5/index.js +3 -1
- package/esm5/lib/config.js +4 -1
- package/esm5/lib/mask-applier.service.js +14 -3
- package/esm5/lib/mask.directive.js +68 -15
- package/esm5/lib/mask.pipe.js +8 -2
- package/esm5/lib/mask.service.js +1 -8
- package/esm5/ngx-mask.js +2 -3
- package/fesm2015/ngx-mask.js +122 -26
- package/fesm2015/ngx-mask.js.map +1 -1
- package/fesm5/ngx-mask.js +132 -25
- package/fesm5/ngx-mask.js.map +1 -1
- package/index.d.ts +2 -0
- package/lib/config.d.ts +1 -0
- package/lib/mask-applier.service.d.ts +1 -0
- package/lib/mask.directive.d.ts +3 -0
- package/lib/mask.pipe.d.ts +1 -1
- package/lib/mask.service.d.ts +0 -2
- package/ngx-mask.d.ts +0 -1
- package/ngx-mask.metadata.json +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
[](https://travis-ci.org/JsDaddy/ngx-mask)
|
|
6
6
|
[](https://www.npmjs.com/package/ngx-mask)
|
|
7
7
|
<a href="https://npmjs.org/ngx-mask">
|
|
8
|
-
|
|
8
|
+
<img src="https://img.shields.io/npm/dt/ngx-mask.svg" alt="npm downloads">
|
|
9
9
|
</a>
|
|
10
10
|
|
|
11
11
|
[](https://www.npmjs.com/package/ngx-mask)
|
|
@@ -30,7 +30,7 @@ $ npm install --save ngx-mask
|
|
|
30
30
|
Import **ngx-mask** module in Angular app.
|
|
31
31
|
|
|
32
32
|
```typescript
|
|
33
|
-
import { NgxMaskModule } from 'ngx-mask'
|
|
33
|
+
import { NgxMaskModule, IConfig } from 'ngx-mask'
|
|
34
34
|
|
|
35
35
|
export const options: Partial<IConfig> | (() => Partial<IConfig>);
|
|
36
36
|
|
|
@@ -48,7 +48,13 @@ Then, just define masks in inputs.
|
|
|
48
48
|
### Usage
|
|
49
49
|
|
|
50
50
|
```html
|
|
51
|
-
<input type="text" mask="
|
|
51
|
+
<input type="text" mask="<here goes your mask>" />
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
or
|
|
55
|
+
|
|
56
|
+
```html
|
|
57
|
+
<input type="text" [mask]="<here goes a reference to your component's mask property>" />
|
|
52
58
|
```
|
|
53
59
|
|
|
54
60
|
Also, you can use mask pipe.
|
|
@@ -59,40 +65,48 @@ Also, you can use mask pipe.
|
|
|
59
65
|
<span>{{phone | mask: '(000) 000-0000'}}</span>
|
|
60
66
|
```
|
|
61
67
|
|
|
68
|
+
For separator you can add thousandSeparator
|
|
69
|
+
|
|
70
|
+
### Usage
|
|
71
|
+
|
|
72
|
+
```html
|
|
73
|
+
<span>{{value | mask: 'separator':','}}</span>
|
|
74
|
+
```
|
|
75
|
+
|
|
62
76
|
#### Examples
|
|
63
77
|
|
|
64
78
|
| mask | example |
|
|
65
79
|
| -------------- | -------------- |
|
|
66
80
|
| 9999-99-99 | 2017-04-15 |
|
|
67
|
-
| 0
|
|
81
|
+
| 0\*.00 | 2017.22 |
|
|
68
82
|
| 000.000.000-99 | 048.457.987-98 |
|
|
69
83
|
| AAAA | 0F6g |
|
|
70
84
|
| SSSS | asDF |
|
|
71
85
|
|
|
72
86
|
## Mask Options
|
|
73
87
|
|
|
74
|
-
You can define your custom options for all directives (as
|
|
88
|
+
You can define your custom options for all directives (as object in the mask module) or for each (as attributes for directive). If you override this parameter, you have to provide all the special characters (default one are not included).
|
|
75
89
|
|
|
76
90
|
### specialCharacters (string[ ])
|
|
77
91
|
|
|
78
92
|
We have next default characters:
|
|
79
93
|
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
94
|
+
| character |
|
|
95
|
+
| --------- |
|
|
96
|
+
| - |
|
|
97
|
+
| / |
|
|
98
|
+
| ( |
|
|
99
|
+
| ) |
|
|
100
|
+
| . |
|
|
101
|
+
| : |
|
|
102
|
+
| **space** |
|
|
103
|
+
| + |
|
|
104
|
+
| , |
|
|
105
|
+
| @ |
|
|
106
|
+
| [ |
|
|
107
|
+
| ] |
|
|
108
|
+
| " |
|
|
109
|
+
| ' |
|
|
96
110
|
|
|
97
111
|
#### Usage
|
|
98
112
|
|
|
@@ -113,12 +127,12 @@ patterns ({ [character: string]: { pattern: RegExp, optional?: boolean})
|
|
|
113
127
|
|
|
114
128
|
We have next default patterns:
|
|
115
129
|
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
130
|
+
| code | meaning |
|
|
131
|
+
| ----- | ------------------------------------------- |
|
|
132
|
+
| **0** | digits (like 0 to 9 numbers) |
|
|
133
|
+
| **9** | digits (like 0 to 9 numbers), but optional |
|
|
134
|
+
| **A** | letters (uppercase or lowercase) and digits |
|
|
135
|
+
| **S** | only letters (uppercase or lowercase) |
|
|
122
136
|
|
|
123
137
|
##### Usage
|
|
124
138
|
|
|
@@ -145,11 +159,11 @@ You can define custom pattern and specify symbol to be rendered in input field.
|
|
|
145
159
|
|
|
146
160
|
```typescript
|
|
147
161
|
pattern = {
|
|
148
|
-
|
|
162
|
+
B: {
|
|
149
163
|
pattern: new RegExp('\\d'),
|
|
150
|
-
symbol: 'X'
|
|
151
|
-
}
|
|
152
|
-
}
|
|
164
|
+
symbol: 'X',
|
|
165
|
+
},
|
|
166
|
+
};
|
|
153
167
|
```
|
|
154
168
|
|
|
155
169
|
### prefix (string)
|
|
@@ -196,7 +210,24 @@ You can choose if mask is shown while typing, or not, default value is `false`.
|
|
|
196
210
|
#### Usage
|
|
197
211
|
|
|
198
212
|
```html
|
|
199
|
-
|
|
213
|
+
<input mask="(000) 000-0000" prefix="+7" [showMaskTyped]="true" />
|
|
214
|
+
```
|
|
215
|
+
|
|
216
|
+
### allowNegativeNumbers (boolean)
|
|
217
|
+
|
|
218
|
+
You can choose if mask will allow the use of negative numbers. The default value is `false`.
|
|
219
|
+
|
|
220
|
+
#### Usage
|
|
221
|
+
|
|
222
|
+
```html
|
|
223
|
+
<input type="text" [allowNegativeNumbers]="true" mask="separator.2" />
|
|
224
|
+
```
|
|
225
|
+
|
|
226
|
+
##### Then
|
|
227
|
+
|
|
228
|
+
```text
|
|
229
|
+
Input value: -10,000.45
|
|
230
|
+
Model value: -10000.45
|
|
200
231
|
```
|
|
201
232
|
|
|
202
233
|
### placeHolderCharacter (string)
|
|
@@ -206,7 +237,7 @@ If the `showMaskTyped` parameter is enabled, this setting customizes the charact
|
|
|
206
237
|
#### Usage
|
|
207
238
|
|
|
208
239
|
```html
|
|
209
|
-
|
|
240
|
+
<input mask="(000) 000-0000" prefix="+7" [showMaskTyped]="true" placeHolderCharacter="*" />
|
|
210
241
|
```
|
|
211
242
|
|
|
212
243
|
### clearIfNotMatch (boolean)
|
|
@@ -216,7 +247,7 @@ You can choose clear the input if the input value **not match** the mask, defaul
|
|
|
216
247
|
### Pipe with mask expression and custom Pattern ([string, pattern])
|
|
217
248
|
|
|
218
249
|
You can pass array of expression and custom Pattern to pipe.
|
|
219
|
-
|
|
250
|
+
|
|
220
251
|
#### Usage
|
|
221
252
|
|
|
222
253
|
```html
|
|
@@ -229,22 +260,22 @@ and in your component
|
|
|
229
260
|
customMask: [string, pattern];
|
|
230
261
|
|
|
231
262
|
pattern = {
|
|
232
|
-
|
|
263
|
+
P: {
|
|
233
264
|
pattern: new RegExp('\\d'),
|
|
234
|
-
}
|
|
265
|
+
},
|
|
235
266
|
};
|
|
236
|
-
|
|
267
|
+
|
|
237
268
|
this.customMask = ['PPP-PPP', this.pattern];
|
|
238
269
|
```
|
|
239
270
|
|
|
240
271
|
### Repeat mask
|
|
241
272
|
|
|
242
273
|
You can pass into mask pattern with brackets.
|
|
243
|
-
|
|
274
|
+
|
|
244
275
|
#### Usage
|
|
245
276
|
|
|
246
277
|
```html
|
|
247
|
-
|
|
278
|
+
<input type="text" mask="A{4}" />
|
|
248
279
|
```
|
|
249
280
|
|
|
250
281
|
### Thousand separator
|
|
@@ -254,19 +285,19 @@ You can divide your input by thousands, by default will seperate with a space.
|
|
|
254
285
|
#### Usage
|
|
255
286
|
|
|
256
287
|
```html
|
|
257
|
-
|
|
288
|
+
<input type="text" mask="separator" />
|
|
258
289
|
```
|
|
259
290
|
|
|
260
291
|
For separate input with dots.
|
|
261
292
|
|
|
262
293
|
```html
|
|
263
|
-
|
|
294
|
+
<input type="text" mask="separator" thousandSeparator="." />
|
|
264
295
|
```
|
|
265
296
|
|
|
266
297
|
For using decimals enter `.` and how many decimals to the end of your input to `separator` mask.
|
|
267
298
|
|
|
268
299
|
```html
|
|
269
|
-
|
|
300
|
+
<input type="text" mask="separator.2" />
|
|
270
301
|
```
|
|
271
302
|
|
|
272
303
|
```text
|
|
@@ -281,10 +312,10 @@ Masked value: 1,234.56
|
|
|
281
312
|
```
|
|
282
313
|
|
|
283
314
|
```html
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
315
|
+
<input type="text" mask="separator.2" thousandSeparator="." />
|
|
316
|
+
<input type="text" mask="separator.2" thousandSeparator="," />
|
|
317
|
+
<input type="text" mask="separator.0" thousandSeparator="." />
|
|
318
|
+
<input type="text" mask="separator.0" thousandSeparator="," />
|
|
288
319
|
```
|
|
289
320
|
|
|
290
321
|
For limiting decimal precision add `.` and the precision you want to limit too on the input. **2** is useful for currency. **0** will prevent decimals completely.
|
|
@@ -304,7 +335,7 @@ Masked value: 1,234
|
|
|
304
335
|
```
|
|
305
336
|
|
|
306
337
|
```html
|
|
307
|
-
|
|
338
|
+
<input type="text" mask="separator.2" separatorLimit="1000" />
|
|
308
339
|
```
|
|
309
340
|
|
|
310
341
|
For limiting the number of digits before the decimal point you can set `separatorLimit` value to _10_, _100_, _1000_ etc.
|
|
@@ -321,7 +352,7 @@ You can validate your input as 24 hour format.
|
|
|
321
352
|
#### Usage
|
|
322
353
|
|
|
323
354
|
```html
|
|
324
|
-
|
|
355
|
+
<input type="text" mask="Hh:m0:s0" />
|
|
325
356
|
```
|
|
326
357
|
|
|
327
358
|
### Percent validation
|
|
@@ -331,7 +362,7 @@ You can validate your input for percents.
|
|
|
331
362
|
#### Usage
|
|
332
363
|
|
|
333
364
|
```html
|
|
334
|
-
|
|
365
|
+
<input type="text" mask="percent" suffix="%" />
|
|
335
366
|
```
|
|
336
367
|
|
|
337
368
|
### FormControl validation
|
|
@@ -341,7 +372,7 @@ You can validate your `formControl`, default value is `true`.
|
|
|
341
372
|
#### Usage
|
|
342
373
|
|
|
343
374
|
```html
|
|
344
|
-
|
|
375
|
+
<input type="text" mask="00 00" [validation]="true" />
|
|
345
376
|
```
|
|
346
377
|
|
|
347
378
|
### Secure input
|
|
@@ -351,7 +382,7 @@ You can hide symbols in input field and get the actual value in `formcontrol`.
|
|
|
351
382
|
#### Usage
|
|
352
383
|
|
|
353
384
|
```html
|
|
354
|
-
|
|
385
|
+
<input placeholder="Secure input" [hiddenInput]="true" mask="XXX/X0/0000" />
|
|
355
386
|
```
|
|
356
387
|
|
|
357
388
|
### IP valid mask
|
|
@@ -359,5 +390,5 @@ You can hide symbols in input field and get the actual value in `formcontrol`.
|
|
|
359
390
|
#### Usage
|
|
360
391
|
|
|
361
392
|
```html
|
|
362
|
-
|
|
393
|
+
<input mask="IP" />
|
|
363
394
|
```
|
package/bundles/ngx-mask.umd.js
CHANGED
|
@@ -239,6 +239,8 @@
|
|
|
239
239
|
/** @type {?} */
|
|
240
240
|
IConfig.prototype.separatorLimit;
|
|
241
241
|
/** @type {?} */
|
|
242
|
+
IConfig.prototype.allowNegativeNumbers;
|
|
243
|
+
/** @type {?} */
|
|
242
244
|
IConfig.prototype.patterns;
|
|
243
245
|
}
|
|
244
246
|
/** @type {?} */
|
|
@@ -261,6 +263,7 @@
|
|
|
261
263
|
hiddenInput: undefined,
|
|
262
264
|
shownMaskExpression: '',
|
|
263
265
|
separatorLimit: '',
|
|
266
|
+
allowNegativeNumbers: false,
|
|
264
267
|
validation: true,
|
|
265
268
|
// tslint:disable-next-line: quotemark
|
|
266
269
|
specialCharacters: ['-', '/', '(', ')', '.', ':', ' ', '+', ',', '@', '[', ']', '"', "'"],
|
|
@@ -345,7 +348,12 @@
|
|
|
345
348
|
/** @type {?} */
|
|
346
349
|
var separatorLimit = _this.separatorLimit.replace(/\s/g, '');
|
|
347
350
|
if (separatorLimit && +separatorLimit) {
|
|
348
|
-
|
|
351
|
+
if (res[0] === '-') {
|
|
352
|
+
res = "-" + res.slice(1, res.length).slice(0, separatorLimit.length);
|
|
353
|
+
}
|
|
354
|
+
else {
|
|
355
|
+
res = res.slice(0, separatorLimit.length);
|
|
356
|
+
}
|
|
349
357
|
}
|
|
350
358
|
/** @type {?} */
|
|
351
359
|
var rgx = /(\d+)(\d{3})/;
|
|
@@ -414,6 +422,7 @@
|
|
|
414
422
|
this.placeHolderCharacter = this._config.placeHolderCharacter;
|
|
415
423
|
this.validation = this._config.validation;
|
|
416
424
|
this.separatorLimit = this._config.separatorLimit;
|
|
425
|
+
this.allowNegativeNumbers = this._config.allowNegativeNumbers;
|
|
417
426
|
}
|
|
418
427
|
/**
|
|
419
428
|
* @param {?} inputValue
|
|
@@ -796,9 +805,12 @@
|
|
|
796
805
|
.split('')
|
|
797
806
|
.filter((/**
|
|
798
807
|
* @param {?} i
|
|
808
|
+
* @param {?} idx
|
|
799
809
|
* @return {?}
|
|
800
810
|
*/
|
|
801
|
-
function (i) {
|
|
811
|
+
function (i, idx) {
|
|
812
|
+
return i.match('^-?\\d') || i === '.' || i === ',' || (i === '-' && idx === 0);
|
|
813
|
+
}))
|
|
802
814
|
.join('');
|
|
803
815
|
};
|
|
804
816
|
/**
|
|
@@ -864,6 +876,8 @@
|
|
|
864
876
|
MaskApplierService.prototype.validation;
|
|
865
877
|
/** @type {?} */
|
|
866
878
|
MaskApplierService.prototype.separatorLimit;
|
|
879
|
+
/** @type {?} */
|
|
880
|
+
MaskApplierService.prototype.allowNegativeNumbers;
|
|
867
881
|
/**
|
|
868
882
|
* @type {?}
|
|
869
883
|
* @private
|
|
@@ -908,15 +922,12 @@
|
|
|
908
922
|
_this._config = _config;
|
|
909
923
|
_this._elementRef = _elementRef;
|
|
910
924
|
_this._renderer = _renderer;
|
|
911
|
-
_this.validation = true;
|
|
912
925
|
_this.maskExpression = '';
|
|
913
926
|
_this.isNumberValue = false;
|
|
914
|
-
_this.showMaskTyped = false;
|
|
915
927
|
_this.placeHolderCharacter = '_';
|
|
916
928
|
_this.maskIsShown = '';
|
|
917
929
|
_this.selStart = null;
|
|
918
930
|
_this.selEnd = null;
|
|
919
|
-
// tslint:disable-next-line
|
|
920
931
|
_this.onChange = (/**
|
|
921
932
|
* @param {?} _
|
|
922
933
|
* @return {?}
|
|
@@ -1419,15 +1430,11 @@
|
|
|
1419
1430
|
return MaskService;
|
|
1420
1431
|
}(MaskApplierService));
|
|
1421
1432
|
if (false) {
|
|
1422
|
-
/** @type {?} */
|
|
1423
|
-
MaskService.prototype.validation;
|
|
1424
1433
|
/** @type {?} */
|
|
1425
1434
|
MaskService.prototype.maskExpression;
|
|
1426
1435
|
/** @type {?} */
|
|
1427
1436
|
MaskService.prototype.isNumberValue;
|
|
1428
1437
|
/** @type {?} */
|
|
1429
|
-
MaskService.prototype.showMaskTyped;
|
|
1430
|
-
/** @type {?} */
|
|
1431
1438
|
MaskService.prototype.placeHolderCharacter;
|
|
1432
1439
|
/** @type {?} */
|
|
1433
1440
|
MaskService.prototype.maskIsShown;
|
|
@@ -1490,6 +1497,7 @@
|
|
|
1490
1497
|
this.clearIfNotMatch = null;
|
|
1491
1498
|
this.validation = null;
|
|
1492
1499
|
this.separatorLimit = null;
|
|
1500
|
+
this.allowNegativeNumbers = null;
|
|
1493
1501
|
this._maskValue = '';
|
|
1494
1502
|
this._position = null;
|
|
1495
1503
|
this.onChange = (/**
|
|
@@ -1511,7 +1519,7 @@
|
|
|
1511
1519
|
* @return {?}
|
|
1512
1520
|
*/
|
|
1513
1521
|
function (changes) {
|
|
1514
|
-
var maskExpression = changes.maskExpression, specialCharacters = changes.specialCharacters, patterns = changes.patterns, prefix = changes.prefix, suffix = changes.suffix, thousandSeparator = changes.thousandSeparator, decimalMarker = changes.decimalMarker, dropSpecialCharacters = changes.dropSpecialCharacters, hiddenInput = changes.hiddenInput, showMaskTyped = changes.showMaskTyped, placeHolderCharacter = changes.placeHolderCharacter, shownMaskExpression = changes.shownMaskExpression, showTemplate = changes.showTemplate, clearIfNotMatch = changes.clearIfNotMatch, validation = changes.validation, separatorLimit = changes.separatorLimit;
|
|
1522
|
+
var maskExpression = changes.maskExpression, specialCharacters = changes.specialCharacters, patterns = changes.patterns, prefix = changes.prefix, suffix = changes.suffix, thousandSeparator = changes.thousandSeparator, decimalMarker = changes.decimalMarker, dropSpecialCharacters = changes.dropSpecialCharacters, hiddenInput = changes.hiddenInput, showMaskTyped = changes.showMaskTyped, placeHolderCharacter = changes.placeHolderCharacter, shownMaskExpression = changes.shownMaskExpression, showTemplate = changes.showTemplate, clearIfNotMatch = changes.clearIfNotMatch, validation = changes.validation, separatorLimit = changes.separatorLimit, allowNegativeNumbers = changes.allowNegativeNumbers;
|
|
1515
1523
|
if (maskExpression) {
|
|
1516
1524
|
this._maskValue = changes.maskExpression.currentValue || '';
|
|
1517
1525
|
}
|
|
@@ -1523,7 +1531,8 @@
|
|
|
1523
1531
|
this._maskService.maskSpecialCharacters = changes.specialCharacters.currentValue || [];
|
|
1524
1532
|
}
|
|
1525
1533
|
}
|
|
1526
|
-
|
|
1534
|
+
// Only overwrite the mask available patterns if a pattern has actually been passed in
|
|
1535
|
+
if (patterns && patterns.currentValue) {
|
|
1527
1536
|
this._maskService.maskAvailablePatterns = patterns.currentValue;
|
|
1528
1537
|
}
|
|
1529
1538
|
if (prefix) {
|
|
@@ -1565,6 +1574,13 @@
|
|
|
1565
1574
|
if (separatorLimit) {
|
|
1566
1575
|
this._maskService.separatorLimit = separatorLimit.currentValue;
|
|
1567
1576
|
}
|
|
1577
|
+
if (allowNegativeNumbers) {
|
|
1578
|
+
this._maskService.maskSpecialCharacters = this._maskService.maskSpecialCharacters.filter((/**
|
|
1579
|
+
* @param {?} c
|
|
1580
|
+
* @return {?}
|
|
1581
|
+
*/
|
|
1582
|
+
function (c) { return c !== '-'; }));
|
|
1583
|
+
}
|
|
1568
1584
|
this._applyMask();
|
|
1569
1585
|
};
|
|
1570
1586
|
// tslint:disable-next-line: cyclomatic-complexity
|
|
@@ -1585,7 +1601,7 @@
|
|
|
1585
1601
|
return null;
|
|
1586
1602
|
}
|
|
1587
1603
|
if (this._maskService.ipError) {
|
|
1588
|
-
return
|
|
1604
|
+
return this._createValidationError(value);
|
|
1589
1605
|
}
|
|
1590
1606
|
if (this._maskValue.startsWith('separator')) {
|
|
1591
1607
|
return null;
|
|
@@ -1644,7 +1660,7 @@
|
|
|
1644
1660
|
else if ((this._maskValue.indexOf('*') > 1 && value.toString().length < this._maskValue.indexOf('*')) ||
|
|
1645
1661
|
(this._maskValue.indexOf('?') > 1 && value.toString().length < this._maskValue.indexOf('?')) ||
|
|
1646
1662
|
this._maskValue.indexOf('{') === 1) {
|
|
1647
|
-
return
|
|
1663
|
+
return this._createValidationError(value);
|
|
1648
1664
|
}
|
|
1649
1665
|
if (this._maskValue.indexOf('*') === -1 || this._maskValue.indexOf('?') === -1) {
|
|
1650
1666
|
/** @type {?} */
|
|
@@ -1652,7 +1668,7 @@
|
|
|
1652
1668
|
? this._maskValue.length - this._maskService.checkSpecialCharAmount(this._maskValue) - counterOfOpt
|
|
1653
1669
|
: this._maskValue.length - counterOfOpt;
|
|
1654
1670
|
if (value.toString().length < length_1) {
|
|
1655
|
-
return
|
|
1671
|
+
return this._createValidationError(value);
|
|
1656
1672
|
}
|
|
1657
1673
|
}
|
|
1658
1674
|
}
|
|
@@ -1700,6 +1716,9 @@
|
|
|
1700
1716
|
var positionToApply = this._position
|
|
1701
1717
|
? this._inputValue.length + position + caretShift
|
|
1702
1718
|
: position + (this._code === 'Backspace' && !backspaceShift ? 0 : caretShift);
|
|
1719
|
+
if (positionToApply > this._getActualInputLength()) {
|
|
1720
|
+
positionToApply = this._getActualInputLength();
|
|
1721
|
+
}
|
|
1703
1722
|
el.setSelectionRange(positionToApply, positionToApply);
|
|
1704
1723
|
if ((this.maskExpression.includes('H') || this.maskExpression.includes('M')) && caretShift === 0) {
|
|
1705
1724
|
el.setSelectionRange(((/** @type {?} */ (el.selectionStart))) + 1, ((/** @type {?} */ (el.selectionStart))) + 1);
|
|
@@ -1766,6 +1785,10 @@
|
|
|
1766
1785
|
el.selectionStart = this._maskService.prefix.length;
|
|
1767
1786
|
return;
|
|
1768
1787
|
}
|
|
1788
|
+
/** select only inserted text */
|
|
1789
|
+
if (((/** @type {?} */ (el.selectionEnd))) > this._getActualInputLength()) {
|
|
1790
|
+
el.selectionEnd = this._getActualInputLength();
|
|
1791
|
+
}
|
|
1769
1792
|
};
|
|
1770
1793
|
// tslint:disable-next-line: cyclomatic-complexity
|
|
1771
1794
|
// tslint:disable-next-line: cyclomatic-complexity
|
|
@@ -1798,8 +1821,7 @@
|
|
|
1798
1821
|
el.setSelectionRange(this.prefix.length, this.prefix.length);
|
|
1799
1822
|
}
|
|
1800
1823
|
else {
|
|
1801
|
-
if (this._inputValue.length !== ((/** @type {?} */ (el.selectionStart))) &&
|
|
1802
|
-
((/** @type {?} */ (el.selectionStart))) !== 1) {
|
|
1824
|
+
if (this._inputValue.length !== ((/** @type {?} */ (el.selectionStart))) && ((/** @type {?} */ (el.selectionStart))) !== 1) {
|
|
1803
1825
|
while (this.specialCharacters.includes(this._inputValue[((/** @type {?} */ (el.selectionStart))) - 1].toString()) &&
|
|
1804
1826
|
((this.prefix.length >= 1 && ((/** @type {?} */ (el.selectionStart))) > this.prefix.length) ||
|
|
1805
1827
|
this.prefix.length === 0)) {
|
|
@@ -1810,7 +1832,8 @@
|
|
|
1810
1832
|
}
|
|
1811
1833
|
}
|
|
1812
1834
|
this.suffixCheckOnPressDelete(e.keyCode, el);
|
|
1813
|
-
if (
|
|
1835
|
+
if (this._maskService.prefix.length &&
|
|
1836
|
+
((/** @type {?} */ (el.selectionStart))) <= this._maskService.prefix.length &&
|
|
1814
1837
|
((/** @type {?} */ (el.selectionEnd))) <= this._maskService.prefix.length) {
|
|
1815
1838
|
e.preventDefault();
|
|
1816
1839
|
}
|
|
@@ -1831,6 +1854,12 @@
|
|
|
1831
1854
|
this._inputValue.length - this.suffix.length < ((/** @type {?} */ (el.selectionStart)))) {
|
|
1832
1855
|
el.setSelectionRange(this._inputValue.length - this.suffix.length, this._inputValue.length);
|
|
1833
1856
|
}
|
|
1857
|
+
else if ((e.keyCode === 65 && e.ctrlKey === true) || // Ctrl+ A
|
|
1858
|
+
(e.keyCode === 65 && e.metaKey === true) // Cmd + A (Mac)
|
|
1859
|
+
) {
|
|
1860
|
+
el.setSelectionRange(0, this._getActualInputLength());
|
|
1861
|
+
e.preventDefault();
|
|
1862
|
+
}
|
|
1834
1863
|
this._maskService.selStart = el.selectionStart;
|
|
1835
1864
|
this._maskService.selEnd = el.selectionEnd;
|
|
1836
1865
|
};
|
|
@@ -1908,8 +1937,7 @@
|
|
|
1908
1937
|
}
|
|
1909
1938
|
}
|
|
1910
1939
|
if (keyCode === 8) {
|
|
1911
|
-
if (this.suffix.length > 1 &&
|
|
1912
|
-
this._inputValue.length - this.suffix.length < ((/** @type {?} */ (el.selectionStart)))) {
|
|
1940
|
+
if (this.suffix.length > 1 && this._inputValue.length - this.suffix.length < ((/** @type {?} */ (el.selectionStart)))) {
|
|
1913
1941
|
el.setSelectionRange(this._inputValue.length - this.suffix.length, this._inputValue.length);
|
|
1914
1942
|
}
|
|
1915
1943
|
if (this.suffix.length === 1 && this._inputValue.length === ((/** @type {?} */ (el.selectionStart)))) {
|
|
@@ -2013,14 +2041,43 @@
|
|
|
2013
2041
|
* @return {?}
|
|
2014
2042
|
*/
|
|
2015
2043
|
function (s) { return s !== ':'; })).length;
|
|
2016
|
-
if (
|
|
2017
|
-
return
|
|
2044
|
+
if (value === null || value.length === 0) {
|
|
2045
|
+
return null; // Don't validate empty values to allow for optional form control
|
|
2018
2046
|
}
|
|
2019
|
-
if (value.length <= rowMaskLen - 2) {
|
|
2020
|
-
return
|
|
2047
|
+
if ((+value[value.length - 1] === 0 && value.length < rowMaskLen) || value.length <= rowMaskLen - 2) {
|
|
2048
|
+
return this._createValidationError(value);
|
|
2021
2049
|
}
|
|
2022
2050
|
return null;
|
|
2023
2051
|
};
|
|
2052
|
+
/**
|
|
2053
|
+
* @private
|
|
2054
|
+
* @return {?}
|
|
2055
|
+
*/
|
|
2056
|
+
MaskDirective.prototype._getActualInputLength = /**
|
|
2057
|
+
* @private
|
|
2058
|
+
* @return {?}
|
|
2059
|
+
*/
|
|
2060
|
+
function () {
|
|
2061
|
+
return (this._maskService.actualValue.length || this._maskService.actualValue.length + this._maskService.prefix.length);
|
|
2062
|
+
};
|
|
2063
|
+
/**
|
|
2064
|
+
* @private
|
|
2065
|
+
* @param {?} actualValue
|
|
2066
|
+
* @return {?}
|
|
2067
|
+
*/
|
|
2068
|
+
MaskDirective.prototype._createValidationError = /**
|
|
2069
|
+
* @private
|
|
2070
|
+
* @param {?} actualValue
|
|
2071
|
+
* @return {?}
|
|
2072
|
+
*/
|
|
2073
|
+
function (actualValue) {
|
|
2074
|
+
return {
|
|
2075
|
+
mask: {
|
|
2076
|
+
requiredMask: this._maskValue,
|
|
2077
|
+
actualValue: actualValue,
|
|
2078
|
+
},
|
|
2079
|
+
};
|
|
2080
|
+
};
|
|
2024
2081
|
MaskDirective.decorators = [
|
|
2025
2082
|
{ type: core.Directive, args: [{
|
|
2026
2083
|
selector: '[mask]',
|
|
@@ -2068,6 +2125,7 @@
|
|
|
2068
2125
|
clearIfNotMatch: [{ type: core.Input }],
|
|
2069
2126
|
validation: [{ type: core.Input }],
|
|
2070
2127
|
separatorLimit: [{ type: core.Input }],
|
|
2128
|
+
allowNegativeNumbers: [{ type: core.Input }],
|
|
2071
2129
|
onInput: [{ type: core.HostListener, args: ['input', ['$event'],] }],
|
|
2072
2130
|
onBlur: [{ type: core.HostListener, args: ['blur',] }],
|
|
2073
2131
|
onFocus: [{ type: core.HostListener, args: ['click', ['$event'],] }],
|
|
@@ -2109,6 +2167,8 @@
|
|
|
2109
2167
|
MaskDirective.prototype.validation;
|
|
2110
2168
|
/** @type {?} */
|
|
2111
2169
|
MaskDirective.prototype.separatorLimit;
|
|
2170
|
+
/** @type {?} */
|
|
2171
|
+
MaskDirective.prototype.allowNegativeNumbers;
|
|
2112
2172
|
/**
|
|
2113
2173
|
* @type {?}
|
|
2114
2174
|
* @private
|
|
@@ -2171,17 +2231,23 @@
|
|
|
2171
2231
|
/**
|
|
2172
2232
|
* @param {?} value
|
|
2173
2233
|
* @param {?} mask
|
|
2234
|
+
* @param {?=} thousandSeparator
|
|
2174
2235
|
* @return {?}
|
|
2175
2236
|
*/
|
|
2176
2237
|
MaskPipe.prototype.transform = /**
|
|
2177
2238
|
* @param {?} value
|
|
2178
2239
|
* @param {?} mask
|
|
2240
|
+
* @param {?=} thousandSeparator
|
|
2179
2241
|
* @return {?}
|
|
2180
2242
|
*/
|
|
2181
|
-
function (value, mask) {
|
|
2243
|
+
function (value, mask, thousandSeparator) {
|
|
2244
|
+
if (thousandSeparator === void 0) { thousandSeparator = null; }
|
|
2182
2245
|
if (!value && typeof value !== 'number') {
|
|
2183
2246
|
return '';
|
|
2184
2247
|
}
|
|
2248
|
+
if (thousandSeparator) {
|
|
2249
|
+
this._maskService.thousandSeparator = thousandSeparator;
|
|
2250
|
+
}
|
|
2185
2251
|
if (typeof mask === 'string') {
|
|
2186
2252
|
return this._maskService.applyMask("" + value, mask);
|
|
2187
2253
|
}
|
|
@@ -2274,16 +2340,59 @@
|
|
|
2274
2340
|
return configValue instanceof Function ? __assign({}, initConfig, configValue()) : __assign({}, initConfig, configValue);
|
|
2275
2341
|
}
|
|
2276
2342
|
|
|
2343
|
+
var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
|
|
2344
|
+
|
|
2345
|
+
function commonjsRequire () {
|
|
2346
|
+
throw new Error('Dynamic requires are not currently supported by rollup-plugin-commonjs');
|
|
2347
|
+
}
|
|
2348
|
+
|
|
2349
|
+
function unwrapExports (x) {
|
|
2350
|
+
return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
|
|
2351
|
+
}
|
|
2352
|
+
|
|
2353
|
+
function createCommonjsModule(fn, module) {
|
|
2354
|
+
return module = { exports: {} }, fn(module, module.exports), module.exports;
|
|
2355
|
+
}
|
|
2356
|
+
|
|
2357
|
+
function getCjsExportFromNamespace (n) {
|
|
2358
|
+
return n && n['default'] || n;
|
|
2359
|
+
}
|
|
2360
|
+
|
|
2361
|
+
/**
|
|
2362
|
+
* @fileoverview added by tsickle
|
|
2363
|
+
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
|
|
2364
|
+
*/
|
|
2365
|
+
((/**
|
|
2366
|
+
* @return {?}
|
|
2367
|
+
*/
|
|
2368
|
+
function () {
|
|
2369
|
+
if (!commonjsGlobal.KeyboardEvent) {
|
|
2370
|
+
commonjsGlobal.KeyboardEvent = (/**
|
|
2371
|
+
* @param {?} _eventType
|
|
2372
|
+
* @param {?} _init
|
|
2373
|
+
* @return {?}
|
|
2374
|
+
*/
|
|
2375
|
+
function (_eventType, _init) { });
|
|
2376
|
+
}
|
|
2377
|
+
}))();
|
|
2378
|
+
|
|
2379
|
+
|
|
2380
|
+
var customKeyboardEvent = {
|
|
2381
|
+
|
|
2382
|
+
};
|
|
2383
|
+
|
|
2384
|
+
exports.INITIAL_CONFIG = INITIAL_CONFIG;
|
|
2277
2385
|
exports.MaskApplierService = MaskApplierService;
|
|
2278
2386
|
exports.MaskDirective = MaskDirective;
|
|
2279
2387
|
exports.MaskPipe = MaskPipe;
|
|
2280
2388
|
exports.MaskService = MaskService;
|
|
2389
|
+
exports.NEW_CONFIG = NEW_CONFIG;
|
|
2281
2390
|
exports.NgxMaskModule = NgxMaskModule;
|
|
2282
2391
|
exports._configFactory = _configFactory;
|
|
2283
|
-
exports
|
|
2284
|
-
exports
|
|
2285
|
-
exports
|
|
2286
|
-
exports
|
|
2392
|
+
exports.config = config;
|
|
2393
|
+
exports.initialConfig = initialConfig;
|
|
2394
|
+
exports.timeMasks = timeMasks;
|
|
2395
|
+
exports.withoutValidation = withoutValidation;
|
|
2287
2396
|
|
|
2288
2397
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
2289
2398
|
|