ngx-mask 19.0.7 → 20.0.1
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 +187 -146
- package/fesm2022/ngx-mask.mjs +52 -47
- package/fesm2022/ngx-mask.mjs.map +1 -1
- package/index.d.ts +270 -5
- package/package.json +1 -1
- package/lib/custom-keyboard-event.d.ts +0 -1
- package/lib/ngx-mask-applier.service.d.ts +0 -55
- package/lib/ngx-mask-expression.enum.d.ts +0 -43
- package/lib/ngx-mask.config.d.ts +0 -40
- package/lib/ngx-mask.directive.d.ts +0 -78
- package/lib/ngx-mask.pipe.d.ts +0 -13
- package/lib/ngx-mask.providers.d.ts +0 -4
- package/lib/ngx-mask.service.d.ts +0 -83
package/README.md
CHANGED
|
@@ -1,214 +1,255 @@
|
|
|
1
|
-
<
|
|
2
|
-
<h1 align="center">NGX MASK</h1>
|
|
3
|
-
</a>
|
|
1
|
+
<h1 align="center">NGX-MASK</h1>
|
|
4
2
|
|
|
5
3
|
<p align="center">
|
|
6
|
-
|
|
4
|
+
A powerful Angular directive for input masking with customizable patterns
|
|
7
5
|
</p>
|
|
8
6
|
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
7
|
+
<p align="center">
|
|
8
|
+
Created with ❤️ by
|
|
9
|
+
</p>
|
|
12
10
|
|
|
13
|
-
|
|
11
|
+
<p align="center">
|
|
12
|
+
<a href="https://jsdaddy.io">
|
|
13
|
+
<img src="http://jsdaddy.io/assets/images/shared/logo.svg" alt="JSDaddy" width="75">
|
|
14
|
+
</a>
|
|
15
|
+
</p>
|
|
14
16
|
|
|
15
|
-
|
|
17
|
+
<p align="center">
|
|
18
|
+
<a href="https://github.com/JsDaddy/ngx-mask/actions/workflows/quality-check.yml">
|
|
19
|
+
<img src="https://github.com/JsDaddy/ngx-mask/actions/workflows/quality-check.yml/badge.svg?branch=develop" alt="CI">
|
|
20
|
+
</a>
|
|
21
|
+
<a href="https://www.npmjs.com/package/ngx-mask">
|
|
22
|
+
<img src="https://img.shields.io/npm/v/ngx-mask.svg" alt="npm version">
|
|
23
|
+
</a>
|
|
24
|
+
<a href="https://npmjs.org/ngx-mask">
|
|
25
|
+
<img src="https://img.shields.io/npm/dt/ngx-mask.svg" alt="npm downloads">
|
|
26
|
+
</a>
|
|
27
|
+
<a href="https://www.npmjs.com/package/ngx-mask">
|
|
28
|
+
<img src="https://img.shields.io/npm/dm/ngx-mask.svg" alt="npm monthly downloads">
|
|
29
|
+
</a>
|
|
30
|
+
<a href="https://github.com/JSDaddy/ngx-mask">
|
|
31
|
+
<img src="https://img.shields.io/github/contributors/JSDaddy/ngx-mask.svg?style=flat" alt="GitHub contributors">
|
|
32
|
+
</a>
|
|
33
|
+
<a href="https://github.com/JSDaddy/ngx-mask">
|
|
34
|
+
<img src="https://img.shields.io/github/stars/JSDaddy/ngx-mask.svg?label=GitHub%20Stars&style=flat" alt="GitHub Stars">
|
|
35
|
+
</a>
|
|
36
|
+
</p>
|
|
16
37
|
|
|
17
|
-
|
|
38
|
+
## Table of Contents
|
|
18
39
|
|
|
19
|
-
|
|
20
|
-
|
|
40
|
+
- [Features](#features)
|
|
41
|
+
- [Demo](#demo)
|
|
42
|
+
- [Installation](#installation)
|
|
43
|
+
- [Version Compatibility](#version-compatibility)
|
|
44
|
+
- [Quick Start](#quick-start)
|
|
45
|
+
- [For Angular 15+ (Standalone)](#for-angular-15-standalone)
|
|
46
|
+
- [For Angular Modules](#for-angular-modules)
|
|
47
|
+
- [Related Projects](#related-projects)
|
|
48
|
+
- [Contributing](#contributing)
|
|
21
49
|
|
|
22
|
-
|
|
50
|
+
## Features
|
|
23
51
|
|
|
24
|
-
|
|
52
|
+
NGX-MASK is a feature-rich input mask directive for Angular applications that provides:
|
|
25
53
|
|
|
26
|
-
|
|
54
|
+
<table>
|
|
55
|
+
<tr>
|
|
56
|
+
<td width="33%" valign="top">
|
|
27
57
|
|
|
28
|
-
|
|
58
|
+
### 🎯 Masking Patterns
|
|
29
59
|
|
|
30
|
-
|
|
31
|
-
$ npm install --save ngx-mask
|
|
32
|
-
```
|
|
60
|
+
• Custom patterns & expressions
|
|
33
61
|
|
|
34
|
-
|
|
62
|
+
• Multiple mask patterns (|)
|
|
35
63
|
|
|
36
|
-
|
|
37
|
-
$ bun install --save ngx-mask
|
|
38
|
-
```
|
|
64
|
+
• Built-in common patterns
|
|
39
65
|
|
|
40
|
-
|
|
66
|
+
• Prefix & suffix support
|
|
41
67
|
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
```
|
|
68
|
+
</td>
|
|
69
|
+
<td width="33%" valign="top">
|
|
45
70
|
|
|
46
|
-
|
|
71
|
+
### 🔢 Number Formatting
|
|
47
72
|
|
|
48
|
-
|
|
49
|
-
$ npm install --save ngx-mask@15.2.3
|
|
50
|
-
```
|
|
73
|
+
• Thousand separators
|
|
51
74
|
|
|
52
|
-
|
|
75
|
+
• Decimal markers
|
|
53
76
|
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
77
|
+
• Negative numbers
|
|
78
|
+
|
|
79
|
+
• Leading zeros
|
|
80
|
+
|
|
81
|
+
</td>
|
|
82
|
+
<td width="33%" valign="top">
|
|
83
|
+
|
|
84
|
+
### ⚡ Input Control
|
|
85
|
+
|
|
86
|
+
• Real-time validation
|
|
87
|
+
|
|
88
|
+
• Clear on non-match
|
|
89
|
+
|
|
90
|
+
• Show/hide mask typing
|
|
91
|
+
|
|
92
|
+
• Keep character positions
|
|
93
|
+
|
|
94
|
+
</td>
|
|
95
|
+
</tr>
|
|
96
|
+
<tr>
|
|
97
|
+
<td width="33%" valign="top">
|
|
98
|
+
|
|
99
|
+
### 📅 Date & Time
|
|
100
|
+
|
|
101
|
+
• Leading zero handling
|
|
102
|
+
|
|
103
|
+
• AM/PM support
|
|
104
|
+
|
|
105
|
+
• Custom separators
|
|
106
|
+
|
|
107
|
+
• Multiple formats
|
|
108
|
+
|
|
109
|
+
</td>
|
|
110
|
+
<td width="33%" valign="top">
|
|
111
|
+
|
|
112
|
+
### 🛠️ Customization
|
|
113
|
+
|
|
114
|
+
• Custom placeholders
|
|
115
|
+
|
|
116
|
+
• Special characters
|
|
117
|
+
|
|
118
|
+
• Transform functions
|
|
57
119
|
|
|
58
|
-
|
|
120
|
+
• Custom validation
|
|
121
|
+
|
|
122
|
+
</td>
|
|
123
|
+
<td width="33%" valign="top">
|
|
124
|
+
|
|
125
|
+
### 📋 Form Integration
|
|
126
|
+
|
|
127
|
+
• Reactive Forms
|
|
128
|
+
|
|
129
|
+
• ControlValueAccessor
|
|
130
|
+
|
|
131
|
+
• Built-in validation
|
|
132
|
+
|
|
133
|
+
• Standalone support
|
|
134
|
+
|
|
135
|
+
</td>
|
|
136
|
+
</tr>
|
|
137
|
+
</table>
|
|
138
|
+
|
|
139
|
+
## Demo
|
|
140
|
+
|
|
141
|
+
Check out our [live documentation and examples](https://jsdaddy.github.io/ngx-mask/)
|
|
142
|
+
|
|
143
|
+
## Installation
|
|
59
144
|
|
|
60
145
|
```bash
|
|
61
|
-
|
|
146
|
+
# For Angular 17 and above
|
|
147
|
+
$ npm install ngx-mask # Using npm
|
|
148
|
+
$ bun add ngx-mask # Using bun
|
|
149
|
+
|
|
150
|
+
# For specific Angular versions:
|
|
151
|
+
# Angular 16.x.x
|
|
152
|
+
$ npm install ngx-mask@16.4.2 # Using npm
|
|
153
|
+
$ bun add ngx-mask@16.4.2 # Using bun
|
|
154
|
+
|
|
155
|
+
# Angular 15.x.x
|
|
156
|
+
$ npm install ngx-mask@15.2.3 # Using npm
|
|
157
|
+
$ bun add ngx-mask@15.2.3 # Using bun
|
|
158
|
+
|
|
159
|
+
# Angular 14.x.x
|
|
160
|
+
$ npm install ngx-mask@14.3.3 # Using npm
|
|
161
|
+
$ bun add ngx-mask@14.3.3 # Using bun
|
|
162
|
+
|
|
163
|
+
# Angular 13.x.x or 12.x.x
|
|
164
|
+
$ npm install ngx-mask@13.2.2 # Using npm
|
|
165
|
+
$ bun add ngx-mask@13.2.2 # Using bun
|
|
62
166
|
```
|
|
63
167
|
|
|
64
|
-
|
|
168
|
+
> **Package Manager Note**: You can use either npm or bun based on your preference. Both package managers will work equally well with ngx-mask.
|
|
65
169
|
|
|
66
|
-
|
|
170
|
+
## Version Compatibility
|
|
67
171
|
|
|
68
|
-
|
|
172
|
+
NGX-MASK follows Angular's official support policy, supporting Active and LTS versions. Currently supported:
|
|
69
173
|
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
provideEnvironmentNgxMask(),
|
|
75
|
-
(...)
|
|
76
|
-
],
|
|
77
|
-
}).catch((err) => console.error(err));
|
|
78
|
-
```
|
|
174
|
+
- Angular 17 and newer (latest features and updates)
|
|
175
|
+
- For older Angular versions, use the corresponding NGX-MASK version as specified above
|
|
176
|
+
|
|
177
|
+
> **Note**: Versions for Angular older than v17 will not receive new features or updates.
|
|
79
178
|
|
|
80
|
-
|
|
179
|
+
## Quick Start
|
|
180
|
+
|
|
181
|
+
### For Angular 15+ (Standalone)
|
|
182
|
+
|
|
183
|
+
#### Application-wide Setup with Default Config
|
|
81
184
|
|
|
82
185
|
```typescript
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
validation: false,
|
|
87
|
-
};
|
|
88
|
-
|
|
89
|
-
bootstrapApplication(AppComponent, {
|
|
90
|
-
providers: [
|
|
91
|
-
(...)
|
|
92
|
-
provideEnvironmentNgxMask(maskConfig),
|
|
93
|
-
(...)
|
|
94
|
-
],
|
|
95
|
-
}).catch((err) => console.error(err));
|
|
186
|
+
bootstrapApplication(AppComponent, { providers: [provideEnvironmentNgxMask()] }).catch((err) =>
|
|
187
|
+
console.error(err)
|
|
188
|
+
);
|
|
96
189
|
```
|
|
97
190
|
|
|
98
|
-
|
|
191
|
+
#### With Custom Configuration
|
|
99
192
|
|
|
100
193
|
```typescript
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
}
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
providers: [
|
|
109
|
-
(...)
|
|
110
|
-
provideEnvironmentNgxMask(maskConfigFunction),
|
|
111
|
-
(...)
|
|
112
|
-
],
|
|
113
|
-
}).catch((err) => console.error(err));
|
|
194
|
+
import { NgxMaskConfig } from 'ngx-mask';
|
|
195
|
+
|
|
196
|
+
const maskConfig: Partial<NgxMaskConfig> = { validation: false };
|
|
197
|
+
|
|
198
|
+
bootstrapApplication(AppComponent, { providers: [provideEnvironmentNgxMask(maskConfig)] }).catch(
|
|
199
|
+
(err) => console.error(err)
|
|
200
|
+
);
|
|
114
201
|
```
|
|
115
202
|
|
|
116
|
-
|
|
203
|
+
#### Feature-level Configuration
|
|
117
204
|
|
|
118
205
|
```typescript
|
|
119
206
|
@Component({
|
|
120
207
|
selector: 'my-feature',
|
|
121
|
-
templateUrl: './my-feature.component.html',
|
|
122
|
-
styleUrls: ['./my-feature.component.css'],
|
|
123
208
|
standalone: true,
|
|
124
|
-
imports: [NgxMaskDirective
|
|
125
|
-
providers: [
|
|
126
|
-
(...)
|
|
127
|
-
provideNgxMask(),
|
|
128
|
-
(...)
|
|
129
|
-
],
|
|
209
|
+
imports: [NgxMaskDirective],
|
|
210
|
+
providers: [provideNgxMask()],
|
|
130
211
|
})
|
|
131
212
|
export class MyFeatureComponent {}
|
|
132
213
|
```
|
|
133
214
|
|
|
134
|
-
|
|
215
|
+
### For Angular < 15 (NgModule)
|
|
135
216
|
|
|
136
|
-
|
|
217
|
+
#### Application-wide Setup with Default Config
|
|
137
218
|
|
|
138
219
|
```typescript
|
|
139
|
-
|
|
140
|
-
imports: [
|
|
141
|
-
NgxMaskDirective, NgxMaskPipe
|
|
142
|
-
],
|
|
143
|
-
providers: [provideNgxMask()]
|
|
144
|
-
})
|
|
145
|
-
```
|
|
146
|
-
|
|
147
|
-
## Quickstart if ngx-mask version < 15.0.0
|
|
148
|
-
|
|
149
|
-
For version ngx-mask < 15.0.0
|
|
150
|
-
Import **ngx-mask** module in Angular app.
|
|
151
|
-
|
|
152
|
-
### With default mask config options
|
|
153
|
-
|
|
154
|
-
```typescript
|
|
155
|
-
import { NgxMaskModule, NgxMaskConfig } from 'ngx-mask'
|
|
156
|
-
|
|
157
|
-
export const options: Partial<null | NgxMaskConfig> | (() => Partial<NgxMaskConfig>) = null;
|
|
220
|
+
import { NgxMaskModule } from 'ngx-mask';
|
|
158
221
|
|
|
159
|
-
@NgModule({
|
|
160
|
-
|
|
161
|
-
NgxMaskModule.forRoot(),
|
|
162
|
-
],
|
|
163
|
-
})
|
|
222
|
+
@NgModule({ imports: [NgxMaskModule.forRoot()] })
|
|
223
|
+
export class AppModule {}
|
|
164
224
|
```
|
|
165
225
|
|
|
166
|
-
|
|
226
|
+
#### With Custom Configuration
|
|
167
227
|
|
|
168
228
|
```typescript
|
|
169
|
-
import { NgxMaskModule, NgxMaskConfig } from 'ngx-mask'
|
|
229
|
+
import { NgxMaskModule, NgxMaskConfig } from 'ngx-mask';
|
|
170
230
|
|
|
171
|
-
const maskConfig: Partial<NgxMaskConfig> = {
|
|
172
|
-
validation: false,
|
|
173
|
-
};
|
|
231
|
+
const maskConfig: Partial<NgxMaskConfig> = { validation: false };
|
|
174
232
|
|
|
175
|
-
@NgModule({
|
|
176
|
-
|
|
177
|
-
NgxMaskModule.forRoot(maskConfig),
|
|
178
|
-
],
|
|
179
|
-
})
|
|
233
|
+
@NgModule({ imports: [NgxMaskModule.forRoot(maskConfig)] })
|
|
234
|
+
export class AppModule {}
|
|
180
235
|
```
|
|
181
236
|
|
|
182
|
-
|
|
237
|
+
#### Feature-level Configuration
|
|
183
238
|
|
|
184
239
|
```typescript
|
|
185
|
-
|
|
186
|
-
return {
|
|
187
|
-
validation: false,
|
|
188
|
-
};
|
|
189
|
-
};
|
|
190
|
-
|
|
191
|
-
@NgModule({
|
|
192
|
-
imports: [
|
|
193
|
-
NgxMaskModule.forRoot(maskConfigFunction),
|
|
194
|
-
],
|
|
195
|
-
})
|
|
196
|
-
```
|
|
240
|
+
import { NgxMaskModule } from 'ngx-mask';
|
|
197
241
|
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
ngx-mask follows the official Angular support policy, supporting the Active and LTS (Long-Term Support) versions of Angular. As of the latest release, Angular v17 and newer are supported.
|
|
203
|
-
|
|
204
|
-
Projects using Angular versions outside the supported range (e.g., older than v17) should use the last compatible version of ngx-mask. However, these versions will no longer receive updates, bug fixes, or new features.
|
|
242
|
+
@NgModule({ imports: [NgxMaskModule.forChild()] })
|
|
243
|
+
export class FeatureModule {}
|
|
244
|
+
```
|
|
205
245
|
|
|
206
|
-
|
|
246
|
+
## Related Projects
|
|
207
247
|
|
|
208
|
-
|
|
248
|
+
Check out other projects by JSDaddy:
|
|
209
249
|
|
|
210
|
-
|
|
250
|
+
- [ngx-copypaste](https://github.com/JsDaddy/ngx-copypaste)
|
|
251
|
+
- [ngx-loader-indicator](https://github.com/JsDaddy/ngx-loader-indicator)
|
|
211
252
|
|
|
212
253
|
## Contributing
|
|
213
254
|
|
|
214
|
-
We
|
|
255
|
+
We welcome contributions! Please read our [contributing guidelines](CONTRIBUTING.md) to learn about our development process and how you can propose bugfixes and improvements.
|
package/fesm2022/ngx-mask.mjs
CHANGED
|
@@ -184,8 +184,11 @@ class NgxMaskApplierService {
|
|
|
184
184
|
let stepBack = false;
|
|
185
185
|
let processedValue = inputValue;
|
|
186
186
|
let processedPosition = position;
|
|
187
|
-
|
|
188
|
-
|
|
187
|
+
const startsWithPrefix = processedValue.slice(0, this.prefix.length) === this.prefix;
|
|
188
|
+
const pastedFullWithPrefix = justPasted && processedValue.length === this.prefix.length + maskExpression.length;
|
|
189
|
+
const looksLikeFullPrefixPaste = processedValue === this.prefix + processedValue.slice(this.prefix.length);
|
|
190
|
+
if (startsWithPrefix && (pastedFullWithPrefix || looksLikeFullPrefixPaste)) {
|
|
191
|
+
processedValue = processedValue.slice(this.prefix.length);
|
|
189
192
|
}
|
|
190
193
|
if (!!this.suffix && processedValue.length > 0) {
|
|
191
194
|
processedValue = this.checkAndRemoveSuffix(processedValue);
|
|
@@ -395,7 +398,9 @@ class NgxMaskApplierService {
|
|
|
395
398
|
result = this._formatWithSeparators(strForSep, this.thousandSeparator, this.decimalMarker, precision);
|
|
396
399
|
const commaShift = result.indexOf(MaskExpression.COMMA) - processedValue.indexOf(MaskExpression.COMMA);
|
|
397
400
|
const shiftStep = result.length - processedValue.length;
|
|
398
|
-
const backspacedDecimalMarkerWithSeparatorLimit = backspaced &&
|
|
401
|
+
const backspacedDecimalMarkerWithSeparatorLimit = backspaced &&
|
|
402
|
+
result.length < inputValue.length - this.suffix.length &&
|
|
403
|
+
this.separatorLimit;
|
|
399
404
|
if ((result[processedPosition - 1] === this.thousandSeparator ||
|
|
400
405
|
result[processedPosition - this.prefix.length]) &&
|
|
401
406
|
this.prefix &&
|
|
@@ -901,10 +906,10 @@ class NgxMaskApplierService {
|
|
|
901
906
|
nonZeroIndex,
|
|
902
907
|
};
|
|
903
908
|
}
|
|
904
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
905
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
909
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: NgxMaskApplierService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
910
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: NgxMaskApplierService });
|
|
906
911
|
}
|
|
907
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
912
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: NgxMaskApplierService, decorators: [{
|
|
908
913
|
type: Injectable
|
|
909
914
|
}] });
|
|
910
915
|
|
|
@@ -1550,10 +1555,10 @@ class NgxMaskService extends NgxMaskApplierService {
|
|
|
1550
1555
|
currentLocaleDecimalMarker() {
|
|
1551
1556
|
return (1.1).toLocaleString().substring(1, 2);
|
|
1552
1557
|
}
|
|
1553
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1554
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
1558
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: NgxMaskService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
|
|
1559
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: NgxMaskService });
|
|
1555
1560
|
}
|
|
1556
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1561
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: NgxMaskService, decorators: [{
|
|
1557
1562
|
type: Injectable
|
|
1558
1563
|
}] });
|
|
1559
1564
|
|
|
@@ -1589,40 +1594,40 @@ function provideEnvironmentNgxMask(configValue) {
|
|
|
1589
1594
|
}
|
|
1590
1595
|
|
|
1591
1596
|
class NgxMaskDirective {
|
|
1592
|
-
mask = input('');
|
|
1593
|
-
specialCharacters = input([]);
|
|
1594
|
-
patterns = input({});
|
|
1595
|
-
prefix = input('');
|
|
1596
|
-
suffix = input('');
|
|
1597
|
-
thousandSeparator = input(' ');
|
|
1598
|
-
decimalMarker = input('.');
|
|
1599
|
-
dropSpecialCharacters = input(null);
|
|
1600
|
-
hiddenInput = input(null);
|
|
1601
|
-
showMaskTyped = input(null);
|
|
1602
|
-
placeHolderCharacter = input(null);
|
|
1603
|
-
shownMaskExpression = input(null);
|
|
1604
|
-
clearIfNotMatch = input(null);
|
|
1605
|
-
validation = input(null);
|
|
1606
|
-
separatorLimit = input('');
|
|
1607
|
-
allowNegativeNumbers = input(null);
|
|
1608
|
-
leadZeroDateTime = input(null);
|
|
1609
|
-
leadZero = input(null);
|
|
1610
|
-
triggerOnMaskChange = input(null);
|
|
1611
|
-
apm = input(null);
|
|
1612
|
-
inputTransformFn = input(null);
|
|
1613
|
-
outputTransformFn = input(null);
|
|
1614
|
-
keepCharacterPositions = input(null);
|
|
1615
|
-
instantPrefix = input(null);
|
|
1597
|
+
mask = input('', ...(ngDevMode ? [{ debugName: "mask" }] : []));
|
|
1598
|
+
specialCharacters = input([], ...(ngDevMode ? [{ debugName: "specialCharacters" }] : []));
|
|
1599
|
+
patterns = input({}, ...(ngDevMode ? [{ debugName: "patterns" }] : []));
|
|
1600
|
+
prefix = input('', ...(ngDevMode ? [{ debugName: "prefix" }] : []));
|
|
1601
|
+
suffix = input('', ...(ngDevMode ? [{ debugName: "suffix" }] : []));
|
|
1602
|
+
thousandSeparator = input(' ', ...(ngDevMode ? [{ debugName: "thousandSeparator" }] : []));
|
|
1603
|
+
decimalMarker = input('.', ...(ngDevMode ? [{ debugName: "decimalMarker" }] : []));
|
|
1604
|
+
dropSpecialCharacters = input(null, ...(ngDevMode ? [{ debugName: "dropSpecialCharacters" }] : []));
|
|
1605
|
+
hiddenInput = input(null, ...(ngDevMode ? [{ debugName: "hiddenInput" }] : []));
|
|
1606
|
+
showMaskTyped = input(null, ...(ngDevMode ? [{ debugName: "showMaskTyped" }] : []));
|
|
1607
|
+
placeHolderCharacter = input(null, ...(ngDevMode ? [{ debugName: "placeHolderCharacter" }] : []));
|
|
1608
|
+
shownMaskExpression = input(null, ...(ngDevMode ? [{ debugName: "shownMaskExpression" }] : []));
|
|
1609
|
+
clearIfNotMatch = input(null, ...(ngDevMode ? [{ debugName: "clearIfNotMatch" }] : []));
|
|
1610
|
+
validation = input(null, ...(ngDevMode ? [{ debugName: "validation" }] : []));
|
|
1611
|
+
separatorLimit = input('', ...(ngDevMode ? [{ debugName: "separatorLimit" }] : []));
|
|
1612
|
+
allowNegativeNumbers = input(null, ...(ngDevMode ? [{ debugName: "allowNegativeNumbers" }] : []));
|
|
1613
|
+
leadZeroDateTime = input(null, ...(ngDevMode ? [{ debugName: "leadZeroDateTime" }] : []));
|
|
1614
|
+
leadZero = input(null, ...(ngDevMode ? [{ debugName: "leadZero" }] : []));
|
|
1615
|
+
triggerOnMaskChange = input(null, ...(ngDevMode ? [{ debugName: "triggerOnMaskChange" }] : []));
|
|
1616
|
+
apm = input(null, ...(ngDevMode ? [{ debugName: "apm" }] : []));
|
|
1617
|
+
inputTransformFn = input(null, ...(ngDevMode ? [{ debugName: "inputTransformFn" }] : []));
|
|
1618
|
+
outputTransformFn = input(null, ...(ngDevMode ? [{ debugName: "outputTransformFn" }] : []));
|
|
1619
|
+
keepCharacterPositions = input(null, ...(ngDevMode ? [{ debugName: "keepCharacterPositions" }] : []));
|
|
1620
|
+
instantPrefix = input(null, ...(ngDevMode ? [{ debugName: "instantPrefix" }] : []));
|
|
1616
1621
|
maskFilled = output();
|
|
1617
|
-
_maskValue = signal('');
|
|
1618
|
-
_inputValue = signal('');
|
|
1619
|
-
_position = signal(null);
|
|
1620
|
-
_code = signal('');
|
|
1621
|
-
_maskExpressionArray = signal([]);
|
|
1622
|
-
_justPasted = signal(false);
|
|
1623
|
-
_isFocused = signal(false);
|
|
1622
|
+
_maskValue = signal('', ...(ngDevMode ? [{ debugName: "_maskValue" }] : []));
|
|
1623
|
+
_inputValue = signal('', ...(ngDevMode ? [{ debugName: "_inputValue" }] : []));
|
|
1624
|
+
_position = signal(null, ...(ngDevMode ? [{ debugName: "_position" }] : []));
|
|
1625
|
+
_code = signal('', ...(ngDevMode ? [{ debugName: "_code" }] : []));
|
|
1626
|
+
_maskExpressionArray = signal([], ...(ngDevMode ? [{ debugName: "_maskExpressionArray" }] : []));
|
|
1627
|
+
_justPasted = signal(false, ...(ngDevMode ? [{ debugName: "_justPasted" }] : []));
|
|
1628
|
+
_isFocused = signal(false, ...(ngDevMode ? [{ debugName: "_isFocused" }] : []));
|
|
1624
1629
|
/**For IME composition event */
|
|
1625
|
-
_isComposing = signal(false);
|
|
1630
|
+
_isComposing = signal(false, ...(ngDevMode ? [{ debugName: "_isComposing" }] : []));
|
|
1626
1631
|
_maskService = inject(NgxMaskService, { self: true });
|
|
1627
1632
|
document = inject(DOCUMENT);
|
|
1628
1633
|
_config = inject(NGX_MASK_CONFIG);
|
|
@@ -2461,8 +2466,8 @@ class NgxMaskDirective {
|
|
|
2461
2466
|
return uniqueCharacters.size === 1;
|
|
2462
2467
|
});
|
|
2463
2468
|
}
|
|
2464
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2465
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "
|
|
2469
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: NgxMaskDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
2470
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.2", type: NgxMaskDirective, isStandalone: true, selector: "input[mask], textarea[mask]", inputs: { mask: { classPropertyName: "mask", publicName: "mask", isSignal: true, isRequired: false, transformFunction: null }, specialCharacters: { classPropertyName: "specialCharacters", publicName: "specialCharacters", isSignal: true, isRequired: false, transformFunction: null }, patterns: { classPropertyName: "patterns", publicName: "patterns", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null }, thousandSeparator: { classPropertyName: "thousandSeparator", publicName: "thousandSeparator", isSignal: true, isRequired: false, transformFunction: null }, decimalMarker: { classPropertyName: "decimalMarker", publicName: "decimalMarker", isSignal: true, isRequired: false, transformFunction: null }, dropSpecialCharacters: { classPropertyName: "dropSpecialCharacters", publicName: "dropSpecialCharacters", isSignal: true, isRequired: false, transformFunction: null }, hiddenInput: { classPropertyName: "hiddenInput", publicName: "hiddenInput", isSignal: true, isRequired: false, transformFunction: null }, showMaskTyped: { classPropertyName: "showMaskTyped", publicName: "showMaskTyped", isSignal: true, isRequired: false, transformFunction: null }, placeHolderCharacter: { classPropertyName: "placeHolderCharacter", publicName: "placeHolderCharacter", isSignal: true, isRequired: false, transformFunction: null }, shownMaskExpression: { classPropertyName: "shownMaskExpression", publicName: "shownMaskExpression", isSignal: true, isRequired: false, transformFunction: null }, clearIfNotMatch: { classPropertyName: "clearIfNotMatch", publicName: "clearIfNotMatch", isSignal: true, isRequired: false, transformFunction: null }, validation: { classPropertyName: "validation", publicName: "validation", isSignal: true, isRequired: false, transformFunction: null }, separatorLimit: { classPropertyName: "separatorLimit", publicName: "separatorLimit", isSignal: true, isRequired: false, transformFunction: null }, allowNegativeNumbers: { classPropertyName: "allowNegativeNumbers", publicName: "allowNegativeNumbers", isSignal: true, isRequired: false, transformFunction: null }, leadZeroDateTime: { classPropertyName: "leadZeroDateTime", publicName: "leadZeroDateTime", isSignal: true, isRequired: false, transformFunction: null }, leadZero: { classPropertyName: "leadZero", publicName: "leadZero", isSignal: true, isRequired: false, transformFunction: null }, triggerOnMaskChange: { classPropertyName: "triggerOnMaskChange", publicName: "triggerOnMaskChange", isSignal: true, isRequired: false, transformFunction: null }, apm: { classPropertyName: "apm", publicName: "apm", isSignal: true, isRequired: false, transformFunction: null }, inputTransformFn: { classPropertyName: "inputTransformFn", publicName: "inputTransformFn", isSignal: true, isRequired: false, transformFunction: null }, outputTransformFn: { classPropertyName: "outputTransformFn", publicName: "outputTransformFn", isSignal: true, isRequired: false, transformFunction: null }, keepCharacterPositions: { classPropertyName: "keepCharacterPositions", publicName: "keepCharacterPositions", isSignal: true, isRequired: false, transformFunction: null }, instantPrefix: { classPropertyName: "instantPrefix", publicName: "instantPrefix", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { maskFilled: "maskFilled" }, host: { listeners: { "paste": "onPaste()", "focus": "onFocus($event)", "ngModelChange": "onModelChange($event)", "input": "onInput($event)", "compositionstart": "onCompositionStart($event)", "compositionend": "onCompositionEnd($event)", "blur": "onBlur($event)", "click": "onClick($event)", "keydown": "onKeyDown($event)" } }, providers: [
|
|
2466
2471
|
{
|
|
2467
2472
|
provide: NG_VALUE_ACCESSOR,
|
|
2468
2473
|
useExisting: NgxMaskDirective,
|
|
@@ -2476,7 +2481,7 @@ class NgxMaskDirective {
|
|
|
2476
2481
|
NgxMaskService,
|
|
2477
2482
|
], exportAs: ["mask", "ngxMask"], usesOnChanges: true, ngImport: i0 });
|
|
2478
2483
|
}
|
|
2479
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2484
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: NgxMaskDirective, decorators: [{
|
|
2480
2485
|
type: Directive,
|
|
2481
2486
|
args: [{
|
|
2482
2487
|
selector: 'input[mask], textarea[mask]',
|
|
@@ -2609,10 +2614,10 @@ class NgxMaskPipe {
|
|
|
2609
2614
|
});
|
|
2610
2615
|
}
|
|
2611
2616
|
}
|
|
2612
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2613
|
-
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "
|
|
2617
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: NgxMaskPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
2618
|
+
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.1.2", ngImport: i0, type: NgxMaskPipe, isStandalone: true, name: "mask" });
|
|
2614
2619
|
}
|
|
2615
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2620
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: NgxMaskPipe, decorators: [{
|
|
2616
2621
|
type: Pipe,
|
|
2617
2622
|
args: [{
|
|
2618
2623
|
name: 'mask',
|