ngx-mat-input-tel 16.1.0 → 16.1.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.
Files changed (2) hide show
  1. package/README.md +132 -0
  2. package/package.json +4 -13
package/README.md ADDED
@@ -0,0 +1,132 @@
1
+ # International Telephone Input for Angular Material (ngxMatInputTel)
2
+ An Angular Material package for entering and validating international telephone numbers. It adds a flag dropdown to any input, detects the user's country, displays a relevant placeholder and provides formatting/validation methods.
3
+
4
+ ## Caution
5
+ This is a fork from the [ngx-mat-intl-tel-input](https://github.com/tanansatpal/ngx-mat-intl-tel-input) library whish does not seems to be maintained anymore. _Last commit is over a year_
6
+
7
+ **Supports:**
8
+
9
+ - Angular >=15
10
+ - Angular Material >=15
11
+ - ReactiveFormsModule
12
+ - FormsModule
13
+ - Validation with [libphonenumber-js](https://github.com/catamphetamine/libphonenumber-js)
14
+
15
+ ## Installation
16
+
17
+ ### Install Dependencies
18
+
19
+ `$ npm i libphonenumber-js@latest`
20
+
21
+ ### Install This Library
22
+
23
+ `$ npm i ngx-mat-input-tel@latest`
24
+
25
+ ## Usage
26
+
27
+ ### Import
28
+
29
+ Add `NgxMatInputTelComponent` to your component file:
30
+
31
+ ```ts
32
+ imports: [NgxMatInputTelComponent];
33
+ ```
34
+
35
+ ## Example
36
+
37
+ Refer to main app in this repository for working example.
38
+
39
+ ```html
40
+ <form #f="ngForm" [formGroup]="phoneForm">
41
+ <ngx-mat-input-tel
42
+ [preferredCountries]="['us', 'gb']"
43
+ [enablePlaceholder]="true"
44
+ [enableSearch]="true"
45
+ name="phone"
46
+ describedBy="phoneInput"
47
+ formControlName="phone"
48
+ ></ngx-mat-input-tel>
49
+ </form>
50
+ ```
51
+
52
+ ```html
53
+
54
+ <form #f="ngForm" [formGroup]="phoneForm">
55
+ <ngx-mat-input-tel
56
+ [preferredCountries]="['us', 'gb']"
57
+ [enablePlaceholder]="true"
58
+ [enableSearch]="true"
59
+ name="phone"
60
+ autocomplete="tel"
61
+ (countryChanged)="yourComponentMethodToTreatyCountryChangedEvent($event)" // $event is a instance of current select Country
62
+ formControlName="phone"></ngx-mat-input-tel>
63
+ </form>
64
+
65
+ ```
66
+
67
+ If you want to show the sample number for the country selected or errors , use mat-hint anf mat-error as
68
+
69
+ ```html
70
+ <form #f="ngForm" [formGroup]="phoneForm">
71
+ <ngx-mat-input-tel
72
+ [preferredCountries]="['us', 'gb']"
73
+ [onlyCountries]="['us', 'gb', 'es']"
74
+ [enablePlaceholder]="true"
75
+ name="phone"
76
+ autocomplete="tel"
77
+ formControlName="phone"
78
+ #phone
79
+ ></ngx-mat-input-tel>
80
+ <mat-hint>e.g. {{phone.selectedCountry.placeHolder}}</mat-hint>
81
+ <mat-error *ngIf="f.form.controls['phone']?.errors?.required"
82
+ >Required Field</mat-error
83
+ >
84
+ <mat-error *ngIf="f.form.controls['phone']?.errors?.validatePhoneNumber"
85
+ >Invalid Number</mat-error
86
+ >
87
+ </form>
88
+ ```
89
+
90
+ ## Options
91
+
92
+ | Options | Type | Default | Description |
93
+ | ------------------ | ---------- | ----------- | ----------------------------------------------------------------------------------- | --- |
94
+ | preferredCountries | `string[]` | `[]` | List of country abbreviations, which will appear at the top. |
95
+ | onlyCountries | `string[]` | `[]` | List of manually selected country abbreviations, which will appear in the dropdown. | |
96
+ | inputPlaceholder | `string` | `undefined` | Placeholder for the input component. |
97
+ | enablePlaceholder | `boolean` | `true` | Input placeholder text, which adapts to the country selected. |
98
+ | enableSearch | `boolean` | `false` | Whether to display a search bar to help filter down the list of countries |
99
+ | format | `string` | `default` | Format of "as you type" input. Possible values: national, international, default |
100
+ | describedBy | `string` | `undefined` | Use aria-described by with the input field |
101
+
102
+ ## Css variable
103
+ | Name | Default | Explanation |
104
+ | -------------------------- | ------- | --------------------------------------------------- |
105
+ | `--ngxMatInputTel-color` | `#000` | If you wish to change the overall color |
106
+ | `--ngxMatInputTel-opacity` | `0` | If you wish the country flag to be shown by default |
107
+
108
+ ## Library Contributions
109
+
110
+ - Fork repo.
111
+ - Go to `./projects/ngx-mat-input-tel`
112
+ - Update `./src/lib` with new functionality.
113
+ - Update README.md
114
+ - Pull request.
115
+
116
+ ### Helpful commands
117
+
118
+ - Build lib: `$ npm run build_lib`
119
+ - Copy license and readme files: `$ npm run copy-files`
120
+ - Create package: `$ npm run npm_pack`
121
+ - Build lib and create package: `$ npm run package`
122
+
123
+ ### Use locally
124
+
125
+ After building and creating package, you can use it locally too.
126
+
127
+ In your project run:
128
+
129
+ `$ npm install --save {{path to your local '*.tgz' package file}}`
130
+
131
+ ### Acknowledgments
132
+ This repo is a fork from the [ngx-mat-intl-tel-input](https://github.com/tanansatpal/ngx-mat-intl-tel-input) library.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ngx-mat-input-tel",
3
- "version": "16.1.0",
3
+ "version": "16.1.1",
4
4
  "author": {
5
5
  "name": "Raphaël Balet",
6
6
  "email": "raphael.balet@outlook.com"
@@ -23,18 +23,9 @@
23
23
  "keywords": [
24
24
  "angular",
25
25
  "material",
26
- "ng2",
27
- "ng4",
28
- "ng5",
29
- "ng6",
30
- "ng7",
31
- "ng8",
32
- "ng9",
33
- "ng10",
34
- "ng11",
35
- "ng12",
36
- "ng13",
37
- "ng14",
26
+ "ng15",
27
+ "ng16",
28
+ "ngx-mat-intl-tel-input",
38
29
  "intl-tel-input",
39
30
  "ng-intl-tel-input",
40
31
  "phone number",