ngx-digits-only 1.0.0 → 1.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 +70 -45
- package/package.json +11 -3
package/README.md
CHANGED
|
@@ -1,64 +1,89 @@
|
|
|
1
|
-
#
|
|
1
|
+
# ngx-digits-only
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Dependency-free Angular directive for numeric-only inputs — a lightweight alternative to `ngx-mask` when all you need is digit filtering and formatting.
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## Features
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
- Restricts input to digits only, with optional decimal and negative number support
|
|
8
|
+
- Thousands separator formatting (configurable)
|
|
9
|
+
- Prefix / suffix support (e.g. currency symbols, units)
|
|
10
|
+
- Configurable decimal places
|
|
11
|
+
- Min / max value validation
|
|
12
|
+
- Persian / Arabic (Eastern) numeral conversion and display
|
|
13
|
+
- Full RTL / LTR layout support
|
|
14
|
+
- Implements `ControlValueAccessor` and `Validator` — works natively with Reactive Forms and Template-driven forms
|
|
15
|
+
- Standalone directive — no NgModule required
|
|
16
|
+
- Zero runtime dependencies
|
|
8
17
|
|
|
9
|
-
|
|
10
|
-
ng generate component component-name
|
|
11
|
-
```
|
|
12
|
-
|
|
13
|
-
For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
|
|
18
|
+
## Installation
|
|
14
19
|
|
|
15
20
|
```bash
|
|
16
|
-
|
|
21
|
+
npm install ngx-digits-only
|
|
17
22
|
```
|
|
18
23
|
|
|
19
|
-
##
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
```
|
|
24
|
-
|
|
24
|
+
## Usage
|
|
25
|
+
|
|
26
|
+
Import the directive directly into your standalone component:
|
|
27
|
+
|
|
28
|
+
```typescript
|
|
29
|
+
import { Component } from '@angular/core';
|
|
30
|
+
import { ReactiveFormsModule } from '@angular/forms';
|
|
31
|
+
import { NgxDigitsOnlyDirective } from 'ngx-digits-only';
|
|
32
|
+
|
|
33
|
+
@Component({
|
|
34
|
+
selector: 'app-example',
|
|
35
|
+
standalone: true,
|
|
36
|
+
imports: [ReactiveFormsModule, NgxDigitsOnlyDirective],
|
|
37
|
+
template: `
|
|
38
|
+
<input
|
|
39
|
+
ngxDigitsOnly
|
|
40
|
+
[allowDecimal]="true"
|
|
41
|
+
[decimalPlaces]="2"
|
|
42
|
+
[allowNegative]="false"
|
|
43
|
+
[thousandsSeparator]="true"
|
|
44
|
+
[min]="0"
|
|
45
|
+
[max]="1000000"
|
|
46
|
+
[formControl]="amountControl"
|
|
47
|
+
/>
|
|
48
|
+
`
|
|
49
|
+
})
|
|
50
|
+
export class ExampleComponent {
|
|
51
|
+
amountControl = new FormControl('');
|
|
52
|
+
}
|
|
25
53
|
```
|
|
26
54
|
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
### Publishing the Library
|
|
30
|
-
|
|
31
|
-
Once the project is built, you can publish your library by following these steps:
|
|
55
|
+
### In an NgModule-based app
|
|
32
56
|
|
|
33
|
-
|
|
57
|
+
Standalone directives can still be used inside NgModule-based components — just add it to that component's own `imports` array if the component itself is standalone, or import it directly where the input lives:
|
|
34
58
|
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
npm publish
|
|
42
|
-
```
|
|
43
|
-
|
|
44
|
-
## Running unit tests
|
|
45
|
-
|
|
46
|
-
To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
|
|
47
|
-
|
|
48
|
-
```bash
|
|
49
|
-
ng test
|
|
59
|
+
```typescript
|
|
60
|
+
@Component({
|
|
61
|
+
standalone: true,
|
|
62
|
+
imports: [NgxDigitsOnlyDirective],
|
|
63
|
+
...
|
|
64
|
+
})
|
|
50
65
|
```
|
|
51
66
|
|
|
52
|
-
|
|
67
|
+
If your component is *not* standalone (declared in an `NgModule`), you can import the directive into that NgModule's `imports` array directly — standalone directives are valid entries there too.
|
|
53
68
|
|
|
54
|
-
|
|
69
|
+
## API
|
|
55
70
|
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
71
|
+
| Input | Type | Default | Description |
|
|
72
|
+
|---|---|---|---|
|
|
73
|
+
| `allowDecimal` | `boolean` | `false` | Allow decimal point input |
|
|
74
|
+
| `decimalPlaces` | `number` | `2` | Max digits after decimal point |
|
|
75
|
+
| `allowNegative` | `boolean` | `false` | Allow leading minus sign |
|
|
76
|
+
| `thousandsSeparator` | `boolean` | `false` | Format with thousands separators as user types |
|
|
77
|
+
| `prefix` | `string` | `''` | Text prepended to the display value |
|
|
78
|
+
| `suffix` | `string` | `''` | Text appended to the display value |
|
|
79
|
+
| `min` | `number` | `undefined` | Minimum allowed value (adds validator) |
|
|
80
|
+
| `max` | `number` | `undefined` | Maximum allowed value (adds validator) |
|
|
81
|
+
| `easternNumerals` | `boolean` | `false` | Display Persian/Arabic-Indic digits instead of Western |
|
|
82
|
+
|
|
83
|
+
## Compatibility
|
|
59
84
|
|
|
60
|
-
Angular
|
|
85
|
+
Requires Angular `>=16.0.0` (standalone APIs). Works in both standalone and NgModule-based applications.
|
|
61
86
|
|
|
62
|
-
##
|
|
87
|
+
## License
|
|
63
88
|
|
|
64
|
-
|
|
89
|
+
ISC
|
package/package.json
CHANGED
|
@@ -1,14 +1,22 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "ngx-digits-only",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.1",
|
|
4
4
|
"peerDependencies": {
|
|
5
|
-
"@angular/common": "
|
|
6
|
-
"@angular/core": "
|
|
5
|
+
"@angular/common": ">=16.0.0",
|
|
6
|
+
"@angular/core": ">=16.0.0"
|
|
7
7
|
},
|
|
8
8
|
"dependencies": {
|
|
9
9
|
"tslib": "^2.3.0"
|
|
10
10
|
},
|
|
11
11
|
"sideEffects": false,
|
|
12
|
+
"repository": {
|
|
13
|
+
"type": "git",
|
|
14
|
+
"url": "https://github.com/YOUR_USERNAME/ngx-digits-only.git"
|
|
15
|
+
},
|
|
16
|
+
"homepage": "https://github.com/YOUR_USERNAME/ngx-digits-only#readme",
|
|
17
|
+
"bugs": {
|
|
18
|
+
"url": "https://github.com/YOUR_USERNAME/ngx-digits-only/issues"
|
|
19
|
+
},
|
|
12
20
|
"module": "fesm2022/ngx-digits-only.mjs",
|
|
13
21
|
"typings": "types/ngx-digits-only.d.ts",
|
|
14
22
|
"exports": {
|