ngxsmk-tel-input 1.0.1 → 1.0.3
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 +4 -4
- package/docs/invalid.png +0 -0
- package/docs/valid.png +0 -0
- package/ng-package.json +5 -0
- package/package.json +1 -1
- package/dist/README.md +0 -263
- package/dist/fesm2022/ngxsmk-tel-input.mjs +0 -385
- package/dist/fesm2022/ngxsmk-tel-input.mjs.map +0 -1
- package/dist/index.d.ts +0 -5
- package/dist/lib/ngxsmk-tel-input.component.d.ts +0 -76
- package/dist/lib/ngxsmk-tel-input.service.d.ts +0 -12
- package/dist/public-api.d.ts +0 -2
package/README.md
CHANGED
|
@@ -18,9 +18,9 @@ An Angular component for entering and validating **international telephone numbe
|
|
|
18
18
|
## Screenshots
|
|
19
19
|
|
|
20
20
|
<p align="left">
|
|
21
|
-
<img src="
|
|
21
|
+
<img src="./docs/valid.png" alt="Valid phone number" width="420" />
|
|
22
22
|
|
|
23
|
-
<img src="
|
|
23
|
+
<img src="./docs/invalid.png" alt="Invalid phone number" width="420" />
|
|
24
24
|
</p>
|
|
25
25
|
|
|
26
26
|
---
|
|
@@ -28,8 +28,8 @@ An Angular component for entering and validating **international telephone numbe
|
|
|
28
28
|
## Compatibility
|
|
29
29
|
|
|
30
30
|
| ngxsmk-tel-input | Angular |
|
|
31
|
-
|
|
32
|
-
| `
|
|
31
|
+
|------------------| --------------- |
|
|
32
|
+
| `1.0.x` | `17.x` – `19.x` |
|
|
33
33
|
|
|
34
34
|
> The library declares `peerDependencies` of `@angular/* >=17 <20`.
|
|
35
35
|
|
package/docs/invalid.png
ADDED
|
Binary file
|
package/docs/valid.png
ADDED
|
Binary file
|
package/ng-package.json
CHANGED
package/package.json
CHANGED
package/dist/README.md
DELETED
|
@@ -1,263 +0,0 @@
|
|
|
1
|
-
# ngxsmk-tel-input — International Telephone Input for Angular
|
|
2
|
-
|
|
3
|
-
[](https://www.npmjs.com/package/ngxsmk-tel-input)
|
|
4
|
-
[](https://www.npmjs.com/package/ngxsmk-tel-input)
|
|
5
|
-
[](https://github.com/toozuuu/ngxsmk-tel-input/blob/main/LICENSE)
|
|
6
|
-
[](https://bundlephobia.com/package/ngxsmk-tel-input)
|
|
7
|
-
[](https://github.com/toozuuu/ngxsmk-tel-input)
|
|
8
|
-
|
|
9
|
-
An Angular component for entering and validating **international telephone numbers**. It adds a country flag dropdown, formats input, and validates using real numbering rules.
|
|
10
|
-
|
|
11
|
-
* UI powered by [`intl-tel-input`](https://github.com/jackocnr/intl-tel-input)
|
|
12
|
-
* Parsing & validation via [`libphonenumber-js`](https://github.com/catamphetamine/libphonenumber-js)
|
|
13
|
-
* Implements Angular **ControlValueAccessor** (works with Reactive & Template‑driven Forms)
|
|
14
|
-
|
|
15
|
-
> Emits **E.164** by default (e.g. `+14155550123`). SSR‑safe via lazy, browser‑only import.
|
|
16
|
-
|
|
17
|
-
---
|
|
18
|
-
|
|
19
|
-
## Compatibility
|
|
20
|
-
|
|
21
|
-
| ngxsmk-tel-input | Angular |
|
|
22
|
-
| ---------------- | --------------- |
|
|
23
|
-
| `0.0.x` | `17.x` – `19.x` |
|
|
24
|
-
|
|
25
|
-
> The library declares `peerDependencies` of `@angular/* >=17 <20`.
|
|
26
|
-
|
|
27
|
-
---
|
|
28
|
-
|
|
29
|
-
## Installation
|
|
30
|
-
|
|
31
|
-
### 1) Install dependencies
|
|
32
|
-
|
|
33
|
-
```bash
|
|
34
|
-
npm i ngxsmk-tel-input intl-tel-input libphonenumber-js
|
|
35
|
-
```
|
|
36
|
-
|
|
37
|
-
### 2) Add styles & flag assets (in your **app**, not the library)
|
|
38
|
-
|
|
39
|
-
Add intl‑tel‑input CSS and copy its flag images via `angular.json`:
|
|
40
|
-
|
|
41
|
-
```jsonc
|
|
42
|
-
{
|
|
43
|
-
"projects": {
|
|
44
|
-
"your-app": {
|
|
45
|
-
"architect": {
|
|
46
|
-
"build": {
|
|
47
|
-
"options": {
|
|
48
|
-
"styles": [
|
|
49
|
-
"node_modules/intl-tel-input/build/css/intlTelInput.css",
|
|
50
|
-
"src/styles.css"
|
|
51
|
-
],
|
|
52
|
-
"assets": [
|
|
53
|
-
{ "glob": "**/*", "input": "src/assets" },
|
|
54
|
-
{ "glob": "**/*", "input": "node_modules/intl-tel-input/build/img", "output": "assets/intl-tel-input/img" }
|
|
55
|
-
]
|
|
56
|
-
}
|
|
57
|
-
}
|
|
58
|
-
}
|
|
59
|
-
}
|
|
60
|
-
}
|
|
61
|
-
}
|
|
62
|
-
```
|
|
63
|
-
|
|
64
|
-
Optional (helps some bundlers resolve flags): add to your global styles
|
|
65
|
-
|
|
66
|
-
```css
|
|
67
|
-
.iti__flag { background-image: url("/assets/intl-tel-input/img/flags.png"); }
|
|
68
|
-
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
|
|
69
|
-
.iti__flag { background-image: url("/assets/intl-tel-input/img/flags@2x.png"); }
|
|
70
|
-
}
|
|
71
|
-
```
|
|
72
|
-
|
|
73
|
-
Restart your dev server after editing `angular.json`.
|
|
74
|
-
|
|
75
|
-
---
|
|
76
|
-
|
|
77
|
-
## Usage
|
|
78
|
-
|
|
79
|
-
### Reactive Forms
|
|
80
|
-
|
|
81
|
-
```ts
|
|
82
|
-
// app.component.ts
|
|
83
|
-
import { Component } from '@angular/core';
|
|
84
|
-
import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
|
|
85
|
-
import { NgxsmkTelInputComponent } from 'ngxsmk-tel-input';
|
|
86
|
-
|
|
87
|
-
@Component({
|
|
88
|
-
selector: 'app-root',
|
|
89
|
-
standalone: true,
|
|
90
|
-
imports: [ReactiveFormsModule, NgxsmkTelInputComponent],
|
|
91
|
-
template: `
|
|
92
|
-
<form [formGroup]="fg" style="max-width:420px;display:grid;gap:12px">
|
|
93
|
-
<ngxsmk-tel-input
|
|
94
|
-
formControlName="phone"
|
|
95
|
-
label="Phone"
|
|
96
|
-
hint="Include area code"
|
|
97
|
-
[initialCountry]="'US'"
|
|
98
|
-
[preferredCountries]="['US','GB','AU']"
|
|
99
|
-
(countryChange)="onCountry($event)">
|
|
100
|
-
</ngxsmk-tel-input>
|
|
101
|
-
|
|
102
|
-
<p *ngIf="fg.get('phone')?.hasError('phoneInvalid') && fg.get('phone')?.touched">
|
|
103
|
-
Please enter a valid phone number.
|
|
104
|
-
</p>
|
|
105
|
-
|
|
106
|
-
<pre>Value: {{ fg.value | json }}</pre>
|
|
107
|
-
</form>
|
|
108
|
-
`
|
|
109
|
-
})
|
|
110
|
-
export class AppComponent {
|
|
111
|
-
fg = this.fb.group({ phone: ['', Validators.required] });
|
|
112
|
-
constructor(private readonly fb: FormBuilder) {}
|
|
113
|
-
onCountry(e: { iso2: any }) { console.log('Country changed:', e.iso2); }
|
|
114
|
-
}
|
|
115
|
-
```
|
|
116
|
-
|
|
117
|
-
**Value semantics:** The control emits **E.164** when valid, or `null` when empty/invalid.
|
|
118
|
-
|
|
119
|
-
### Template‑driven
|
|
120
|
-
|
|
121
|
-
```html
|
|
122
|
-
<form #f="ngForm">
|
|
123
|
-
<ngxsmk-tel-input name="phone" [(ngModel)]="phone"></ngxsmk-tel-input>
|
|
124
|
-
</form>
|
|
125
|
-
```
|
|
126
|
-
|
|
127
|
-
---
|
|
128
|
-
|
|
129
|
-
## Options (Inputs)
|
|
130
|
-
|
|
131
|
-
| Option | Type | Default | Description |
|
|
132
|
-
| ---------------------- | -------------------------------------- | ---------------------- | ---------------------------------------------------------------------- |
|
|
133
|
-
| `initialCountry` | `CountryCode \| 'auto'` | `'US'` | Starting country. `'auto'` uses a simple geo‑IP stub (defaults to US). |
|
|
134
|
-
| `preferredCountries` | `CountryCode[]` | `['US','GB']` | Countries pinned at the top. |
|
|
135
|
-
| `onlyCountries` | `CountryCode[]` | — | Restrict selectable countries. |
|
|
136
|
-
| `nationalMode` | `boolean` | `false` | Display national format in the box. Value still emits E.164. |
|
|
137
|
-
| `separateDialCode` | `boolean` | `false` | Show dial code separately to the left. |
|
|
138
|
-
| `allowDropdown` | `boolean` | `true` | Enable/disable country dropdown. |
|
|
139
|
-
| `placeholder` | `string` | `'Enter phone number'` | Input placeholder. |
|
|
140
|
-
| `autocomplete` | `string` | `'tel'` | Native autocomplete attribute. |
|
|
141
|
-
| `disabled` | `boolean` | `false` | Disable the control. |
|
|
142
|
-
| `label` | `string` | — | Optional label text. |
|
|
143
|
-
| `hint` | `string` | — | Helper text shown below. |
|
|
144
|
-
| `errorText` | `string` | — | Custom error message. |
|
|
145
|
-
| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Preset sizing. |
|
|
146
|
-
| `variant` | `'outline' \| 'filled' \| 'underline'` | `'outline'` | Visual style. |
|
|
147
|
-
| `showClear` | `boolean` | `true` | Show a clear (×) button when not empty. |
|
|
148
|
-
| `autoFocus` | `boolean` | `false` | Focus on init. |
|
|
149
|
-
| `selectOnFocus` | `boolean` | `false` | Select text on focus. |
|
|
150
|
-
| `formatOnBlur` | `boolean` | `true` | Pretty‑print on blur (national if `nationalMode`). |
|
|
151
|
-
| `showErrorWhenTouched` | `boolean` | `true` | Only show error styles after the control is touched. |
|
|
152
|
-
| `dropdownAttachToBody` | `boolean` | `true` | Attach dropdown to `<body>` to avoid clipping. |
|
|
153
|
-
| `dropdownZIndex` | `number` | `2000` | Z‑index for dropdown panel. |
|
|
154
|
-
|
|
155
|
-
> `CountryCode` is the ISO‑2 code from `libphonenumber-js` (e.g. `US`, `GB`).
|
|
156
|
-
|
|
157
|
-
### Outputs (Events)
|
|
158
|
-
|
|
159
|
-
| Event | Payload | Description |
|
|
160
|
-
| ---------------- | ---------------------------------------------------------- | ---------------------------------------- |
|
|
161
|
-
| `countryChange` | `{ iso2: CountryCode }` | Fires when the selected country changes. |
|
|
162
|
-
| `validityChange` | `boolean` | Emits when validity toggles. |
|
|
163
|
-
| `inputChange` | `{ raw: string; e164: string \| null; iso2: CountryCode }` | Emitted on each input. |
|
|
164
|
-
|
|
165
|
-
### Public Methods
|
|
166
|
-
|
|
167
|
-
* `focus(): void`
|
|
168
|
-
* `selectCountry(iso2: CountryCode): void`
|
|
169
|
-
|
|
170
|
-
---
|
|
171
|
-
|
|
172
|
-
## Supported Formats
|
|
173
|
-
|
|
174
|
-
* **E164** → `+41446681800`
|
|
175
|
-
* **International** (display) → `+41 44 668 18 00`
|
|
176
|
-
* **National** (display) → `044 668 18 00`
|
|
177
|
-
|
|
178
|
-
> The control **emits E.164** by default. If you need the currently typed format too, use `(inputChange)`.
|
|
179
|
-
|
|
180
|
-
---
|
|
181
|
-
|
|
182
|
-
## Theming & Styling
|
|
183
|
-
|
|
184
|
-
This component exposes CSS variables for quick theming:
|
|
185
|
-
|
|
186
|
-
```html
|
|
187
|
-
<ngxsmk-tel-input style="
|
|
188
|
-
--tel-border:#cbd5e1;
|
|
189
|
-
--tel-ring:#2563eb;
|
|
190
|
-
--tel-radius:12px;
|
|
191
|
-
--tel-dd-item-hover: rgba(37,99,235,.08);
|
|
192
|
-
--tel-dd-z: 3000;
|
|
193
|
-
"></ngxsmk-tel-input>
|
|
194
|
-
```
|
|
195
|
-
|
|
196
|
-
Key variables: `--tel-bg`, `--tel-fg`, `--tel-border`, `--tel-border-hover`, `--tel-ring`, `--tel-placeholder`, `--tel-error`, `--tel-radius`, `--tel-focus-shadow`, `--tel-dd-bg`, `--tel-dd-border`, `--tel-dd-shadow`, `--tel-dd-radius`, `--tel-dd-item-hover`, `--tel-dd-search-bg`, `--tel-dd-z`.
|
|
197
|
-
|
|
198
|
-
Dark mode: wrap in a `.dark` container; tokens adapt.
|
|
199
|
-
|
|
200
|
-
---
|
|
201
|
-
|
|
202
|
-
## SSR
|
|
203
|
-
|
|
204
|
-
The library guards `intl-tel-input` import behind `isPlatformBrowser`, so Angular Universal builds won’t try to access `window` during SSR.
|
|
205
|
-
|
|
206
|
-
---
|
|
207
|
-
|
|
208
|
-
## Local Development
|
|
209
|
-
|
|
210
|
-
This repository is an Angular workspace with a library.
|
|
211
|
-
|
|
212
|
-
```bash
|
|
213
|
-
# Build the library
|
|
214
|
-
ng build ngxsmk-tel-input
|
|
215
|
-
|
|
216
|
-
# Try it in a demo app inside the workspace
|
|
217
|
-
ng serve demo
|
|
218
|
-
|
|
219
|
-
# Or pack and install in another app locally
|
|
220
|
-
cd dist/ngxsmk-tel-input && npm pack
|
|
221
|
-
|
|
222
|
-
# in your other app
|
|
223
|
-
npm i ../path/to/dist/ngxsmk-tel-input/ngxsmk-tel-input-<version>.tgz
|
|
224
|
-
```
|
|
225
|
-
|
|
226
|
-
Tip: you can also map a workspace path alias in `tsconfig.base.json`:
|
|
227
|
-
|
|
228
|
-
```jsonc
|
|
229
|
-
{
|
|
230
|
-
"compilerOptions": {
|
|
231
|
-
"paths": {
|
|
232
|
-
"ngxsmk-tel-input": ["dist/ngxsmk-tel-input"]
|
|
233
|
-
}
|
|
234
|
-
}
|
|
235
|
-
}
|
|
236
|
-
```
|
|
237
|
-
|
|
238
|
-
---
|
|
239
|
-
|
|
240
|
-
## Troubleshooting
|
|
241
|
-
|
|
242
|
-
* **Unstyled dropdown / bullets / missing flags** → Ensure CSS & assets are added in your app’s `angular.json`, then restart the dev server.
|
|
243
|
-
* **`TS2307: Cannot find module 'ngxsmk-tel-input'`** → Build the library first so `dist/ngxsmk-tel-input` exists (or install from npm).
|
|
244
|
-
* **Peer dependency conflict** → Your app must be Angular 17–19 to satisfy peers.
|
|
245
|
-
* **Dropdown clipped by parent** → Keep `dropdownAttachToBody=true` or raise `dropdownZIndex`.
|
|
246
|
-
|
|
247
|
-
---
|
|
248
|
-
|
|
249
|
-
## Contributing
|
|
250
|
-
|
|
251
|
-
PRs welcome! Please:
|
|
252
|
-
|
|
253
|
-
1. `npm ci` and `ng build`
|
|
254
|
-
2. Cover behavior changes with tests if possible
|
|
255
|
-
3. Update README for any API changes
|
|
256
|
-
|
|
257
|
-
This project is open to using the [all-contributors](https://github.com/all-contributors/all-contributors) spec. Contributions of any kind welcome!
|
|
258
|
-
|
|
259
|
-
---
|
|
260
|
-
|
|
261
|
-
## License
|
|
262
|
-
|
|
263
|
-
[MIT](./LICENSE)
|
|
@@ -1,385 +0,0 @@
|
|
|
1
|
-
import * as i0 from '@angular/core';
|
|
2
|
-
import { Injectable, EventEmitter, PLATFORM_ID, forwardRef, Output, Input, ViewChild, Inject, Component } from '@angular/core';
|
|
3
|
-
import { isPlatformBrowser, NgIf } from '@angular/common';
|
|
4
|
-
import { NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
|
|
5
|
-
import { parsePhoneNumberFromString } from 'libphonenumber-js';
|
|
6
|
-
|
|
7
|
-
class NgxsmkTelInputService {
|
|
8
|
-
parse(input, iso2) {
|
|
9
|
-
const phone = parsePhoneNumberFromString(input, iso2);
|
|
10
|
-
if (!phone)
|
|
11
|
-
return { e164: null, national: null, isValid: false };
|
|
12
|
-
const isValid = phone.isValid();
|
|
13
|
-
return { e164: isValid ? phone.number : null, national: phone.formatNational(), isValid };
|
|
14
|
-
}
|
|
15
|
-
isValid(input, iso2) {
|
|
16
|
-
const phone = parsePhoneNumberFromString(input, iso2);
|
|
17
|
-
return !!phone && phone.isValid();
|
|
18
|
-
}
|
|
19
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NgxsmkTelInputService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
20
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NgxsmkTelInputService, providedIn: 'root' });
|
|
21
|
-
}
|
|
22
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NgxsmkTelInputService, decorators: [{
|
|
23
|
-
type: Injectable,
|
|
24
|
-
args: [{ providedIn: 'root' }]
|
|
25
|
-
}] });
|
|
26
|
-
|
|
27
|
-
class NgxsmkTelInputComponent {
|
|
28
|
-
zone;
|
|
29
|
-
tel;
|
|
30
|
-
platformId;
|
|
31
|
-
inputRef;
|
|
32
|
-
/* Existing inputs */
|
|
33
|
-
initialCountry = 'US';
|
|
34
|
-
preferredCountries = ['US', 'GB'];
|
|
35
|
-
onlyCountries;
|
|
36
|
-
nationalMode = false;
|
|
37
|
-
separateDialCode = false;
|
|
38
|
-
allowDropdown = true;
|
|
39
|
-
placeholder = 'Enter phone number';
|
|
40
|
-
autocomplete = 'tel';
|
|
41
|
-
name;
|
|
42
|
-
inputId;
|
|
43
|
-
disabled = false;
|
|
44
|
-
/* New UI/UX inputs */
|
|
45
|
-
label;
|
|
46
|
-
hint;
|
|
47
|
-
errorText;
|
|
48
|
-
size = 'md';
|
|
49
|
-
variant = 'outline';
|
|
50
|
-
showClear = true;
|
|
51
|
-
autoFocus = false;
|
|
52
|
-
selectOnFocus = false;
|
|
53
|
-
formatOnBlur = true;
|
|
54
|
-
showErrorWhenTouched = true;
|
|
55
|
-
/** Dropdown plumbing */
|
|
56
|
-
dropdownAttachToBody = true; // append dropdown to <body> (escapes overflow/clip)
|
|
57
|
-
dropdownZIndex = 2000; // used by CSS var --tel-dd-z
|
|
58
|
-
/* Outputs */
|
|
59
|
-
countryChange = new EventEmitter();
|
|
60
|
-
validityChange = new EventEmitter();
|
|
61
|
-
inputChange = new EventEmitter();
|
|
62
|
-
/* Internal */
|
|
63
|
-
iti = null;
|
|
64
|
-
onChange = () => { };
|
|
65
|
-
onTouchedCb = () => { };
|
|
66
|
-
lastEmittedValid = false;
|
|
67
|
-
pendingWrite = null;
|
|
68
|
-
touched = false;
|
|
69
|
-
resolvedId = (() => 'tel-' + Math.random().toString(36).slice(2))();
|
|
70
|
-
constructor(zone, tel, platformId) {
|
|
71
|
-
this.zone = zone;
|
|
72
|
-
this.tel = tel;
|
|
73
|
-
this.platformId = platformId;
|
|
74
|
-
}
|
|
75
|
-
async ngAfterViewInit() {
|
|
76
|
-
if (!isPlatformBrowser(this.platformId))
|
|
77
|
-
return;
|
|
78
|
-
// set z-index via CSS var
|
|
79
|
-
this.constructor; // no-op to keep TS calm
|
|
80
|
-
this.inputRef.nativeElement.closest(':host');
|
|
81
|
-
await this.initIntlTelInput();
|
|
82
|
-
this.bindDomListeners();
|
|
83
|
-
if (this.pendingWrite !== null) {
|
|
84
|
-
this.setInputValue(this.pendingWrite);
|
|
85
|
-
this.handleInput();
|
|
86
|
-
this.pendingWrite = null;
|
|
87
|
-
}
|
|
88
|
-
if (this.autoFocus)
|
|
89
|
-
setTimeout(() => this.focus(), 0);
|
|
90
|
-
}
|
|
91
|
-
ngOnChanges(changes) {
|
|
92
|
-
if (!isPlatformBrowser(this.platformId))
|
|
93
|
-
return;
|
|
94
|
-
const configChanged = ['initialCountry', 'preferredCountries', 'onlyCountries', 'separateDialCode', 'allowDropdown', 'nationalMode']
|
|
95
|
-
.some(k => k in changes && !changes[k].firstChange);
|
|
96
|
-
if (configChanged && this.iti)
|
|
97
|
-
this.reinitPlugin();
|
|
98
|
-
}
|
|
99
|
-
ngOnDestroy() { this.destroyPlugin(); }
|
|
100
|
-
// ----- CVA -----
|
|
101
|
-
writeValue(val) {
|
|
102
|
-
if (!this.inputRef)
|
|
103
|
-
return;
|
|
104
|
-
if (!this.iti) {
|
|
105
|
-
this.pendingWrite = val ?? '';
|
|
106
|
-
return;
|
|
107
|
-
}
|
|
108
|
-
this.setInputValue(val ?? '');
|
|
109
|
-
}
|
|
110
|
-
registerOnChange(fn) { this.onChange = fn; }
|
|
111
|
-
registerOnTouched(fn) { this.onTouchedCb = fn; }
|
|
112
|
-
setDisabledState(isDisabled) {
|
|
113
|
-
this.disabled = isDisabled;
|
|
114
|
-
if (this.inputRef)
|
|
115
|
-
this.inputRef.nativeElement.disabled = isDisabled;
|
|
116
|
-
}
|
|
117
|
-
// ----- Validator -----
|
|
118
|
-
validate(_) {
|
|
119
|
-
const raw = this.currentRaw();
|
|
120
|
-
if (!raw)
|
|
121
|
-
return null;
|
|
122
|
-
const valid = this.tel.isValid(raw, this.currentIso2());
|
|
123
|
-
if (valid !== this.lastEmittedValid) {
|
|
124
|
-
this.lastEmittedValid = valid;
|
|
125
|
-
this.validityChange.emit(valid);
|
|
126
|
-
}
|
|
127
|
-
return valid ? null : { phoneInvalid: true };
|
|
128
|
-
}
|
|
129
|
-
// ----- Public helpers -----
|
|
130
|
-
focus() {
|
|
131
|
-
this.inputRef?.nativeElement.focus();
|
|
132
|
-
if (this.selectOnFocus) {
|
|
133
|
-
const el = this.inputRef.nativeElement;
|
|
134
|
-
queueMicrotask(() => el.setSelectionRange(0, el.value.length));
|
|
135
|
-
}
|
|
136
|
-
}
|
|
137
|
-
selectCountry(iso2) {
|
|
138
|
-
if (this.iti) {
|
|
139
|
-
this.iti.setCountry(iso2.toLowerCase());
|
|
140
|
-
this.handleInput();
|
|
141
|
-
}
|
|
142
|
-
}
|
|
143
|
-
clearInput() {
|
|
144
|
-
this.setInputValue('');
|
|
145
|
-
this.handleInput();
|
|
146
|
-
this.inputRef.nativeElement.focus();
|
|
147
|
-
}
|
|
148
|
-
// ----- Plugin wiring -----
|
|
149
|
-
async initIntlTelInput() {
|
|
150
|
-
const [{ default: intlTelInput }] = await Promise.all([import('intl-tel-input')]);
|
|
151
|
-
const config = {
|
|
152
|
-
initialCountry: this.initialCountry === 'auto' ? 'auto' : (this.initialCountry?.toLowerCase() || 'us'),
|
|
153
|
-
preferredCountries: (this.preferredCountries ?? []).map(c => c.toLowerCase()),
|
|
154
|
-
onlyCountries: (this.onlyCountries ?? []).map(c => c.toLowerCase()),
|
|
155
|
-
nationalMode: this.nationalMode,
|
|
156
|
-
allowDropdown: this.allowDropdown,
|
|
157
|
-
separateDialCode: this.separateDialCode,
|
|
158
|
-
geoIpLookup: (cb) => cb('us'),
|
|
159
|
-
utilsScript: undefined,
|
|
160
|
-
dropdownContainer: this.dropdownAttachToBody && typeof document !== 'undefined' ? document.body : undefined
|
|
161
|
-
};
|
|
162
|
-
this.zone.runOutsideAngular(() => { this.iti = intlTelInput(this.inputRef.nativeElement, config); });
|
|
163
|
-
// expose z-index var to host (so CSS picks it up)
|
|
164
|
-
this.inputRef.nativeElement.style.setProperty('--tel-dd-z', String(this.dropdownZIndex));
|
|
165
|
-
}
|
|
166
|
-
reinitPlugin() {
|
|
167
|
-
const current = this.currentRaw();
|
|
168
|
-
this.destroyPlugin();
|
|
169
|
-
this.initIntlTelInput().then(() => {
|
|
170
|
-
if (current) {
|
|
171
|
-
this.setInputValue(current);
|
|
172
|
-
this.handleInput();
|
|
173
|
-
}
|
|
174
|
-
});
|
|
175
|
-
}
|
|
176
|
-
destroyPlugin() {
|
|
177
|
-
if (this.iti) {
|
|
178
|
-
this.iti.destroy();
|
|
179
|
-
this.iti = null;
|
|
180
|
-
}
|
|
181
|
-
if (this.inputRef?.nativeElement) {
|
|
182
|
-
const el = this.inputRef.nativeElement;
|
|
183
|
-
const clone = el.cloneNode(true);
|
|
184
|
-
el.parentNode?.replaceChild(clone, el);
|
|
185
|
-
this.inputRef.nativeElement = clone;
|
|
186
|
-
}
|
|
187
|
-
}
|
|
188
|
-
bindDomListeners() {
|
|
189
|
-
const el = this.inputRef.nativeElement;
|
|
190
|
-
this.zone.runOutsideAngular(() => {
|
|
191
|
-
el.addEventListener('input', () => this.handleInput());
|
|
192
|
-
el.addEventListener('countrychange', () => {
|
|
193
|
-
const iso2 = this.currentIso2();
|
|
194
|
-
this.zone.run(() => this.countryChange.emit({ iso2 }));
|
|
195
|
-
this.handleInput();
|
|
196
|
-
});
|
|
197
|
-
el.addEventListener('paste', () => queueMicrotask(() => this.handleInput()));
|
|
198
|
-
el.addEventListener('blur', () => this.onBlur());
|
|
199
|
-
});
|
|
200
|
-
}
|
|
201
|
-
onBlur() {
|
|
202
|
-
this.touched = true;
|
|
203
|
-
this.zone.run(() => this.onTouchedCb());
|
|
204
|
-
if (!this.formatOnBlur)
|
|
205
|
-
return;
|
|
206
|
-
const raw = this.currentRaw();
|
|
207
|
-
if (!raw)
|
|
208
|
-
return;
|
|
209
|
-
const parsed = this.tel.parse(raw, this.currentIso2());
|
|
210
|
-
if (this.nationalMode && parsed.national) {
|
|
211
|
-
this.setInputValue(parsed.national.replace(/\s{2,}/g, ' '));
|
|
212
|
-
}
|
|
213
|
-
}
|
|
214
|
-
onFocus() {
|
|
215
|
-
if (this.selectOnFocus) {
|
|
216
|
-
const el = this.inputRef.nativeElement;
|
|
217
|
-
queueMicrotask(() => el.setSelectionRange(0, el.value.length));
|
|
218
|
-
}
|
|
219
|
-
}
|
|
220
|
-
handleInput() {
|
|
221
|
-
const raw = this.currentRaw();
|
|
222
|
-
const iso2 = this.currentIso2();
|
|
223
|
-
const parsed = this.tel.parse(raw, iso2);
|
|
224
|
-
this.zone.run(() => this.onChange(parsed.e164)); // E.164 or null
|
|
225
|
-
this.zone.run(() => this.inputChange.emit({ raw, e164: parsed.e164, iso2 }));
|
|
226
|
-
if (raw && this.nationalMode && parsed.national) {
|
|
227
|
-
const normalized = parsed.national.replace(/\s{2,}/g, ' ');
|
|
228
|
-
if (normalized !== raw)
|
|
229
|
-
this.setInputValue(normalized);
|
|
230
|
-
}
|
|
231
|
-
}
|
|
232
|
-
currentRaw() { return (this.inputRef?.nativeElement.value ?? '').trim(); }
|
|
233
|
-
currentIso2() {
|
|
234
|
-
const iso2 = (this.iti?.getSelectedCountryData?.().iso2 ?? this.initialCountry ?? 'US').toString().toUpperCase();
|
|
235
|
-
return iso2;
|
|
236
|
-
}
|
|
237
|
-
setInputValue(v) { this.inputRef.nativeElement.value = v ?? ''; }
|
|
238
|
-
get showError() {
|
|
239
|
-
const invalid = !!this.validate({});
|
|
240
|
-
return this.showErrorWhenTouched ? (this.touched && invalid) : invalid;
|
|
241
|
-
}
|
|
242
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NgxsmkTelInputComponent, deps: [{ token: i0.NgZone }, { token: NgxsmkTelInputService }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component });
|
|
243
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: NgxsmkTelInputComponent, isStandalone: true, selector: "ngxsmk-tel-input", inputs: { initialCountry: "initialCountry", preferredCountries: "preferredCountries", onlyCountries: "onlyCountries", nationalMode: "nationalMode", separateDialCode: "separateDialCode", allowDropdown: "allowDropdown", placeholder: "placeholder", autocomplete: "autocomplete", name: "name", inputId: "inputId", disabled: "disabled", label: "label", hint: "hint", errorText: "errorText", size: "size", variant: "variant", showClear: "showClear", autoFocus: "autoFocus", selectOnFocus: "selectOnFocus", formatOnBlur: "formatOnBlur", showErrorWhenTouched: "showErrorWhenTouched", dropdownAttachToBody: "dropdownAttachToBody", dropdownZIndex: "dropdownZIndex" }, outputs: { countryChange: "countryChange", validityChange: "validityChange", inputChange: "inputChange" }, providers: [
|
|
244
|
-
{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NgxsmkTelInputComponent), multi: true },
|
|
245
|
-
{ provide: NG_VALIDATORS, useExisting: forwardRef(() => NgxsmkTelInputComponent), multi: true }
|
|
246
|
-
], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["telInput"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `
|
|
247
|
-
<div class="ngx-tel" [class.disabled]="disabled" [attr.data-size]="size" [attr.data-variant]="variant">
|
|
248
|
-
<label *ngIf="label" class="ngx-tel__label" [for]="resolvedId">{{ label }}</label>
|
|
249
|
-
|
|
250
|
-
<div class="ngx-tel__wrap" [class.has-error]="showError">
|
|
251
|
-
<div class="ngxsmk-tel-input__wrapper">
|
|
252
|
-
<input
|
|
253
|
-
#telInput
|
|
254
|
-
type="tel"
|
|
255
|
-
class="ngxsmk-tel-input__control"
|
|
256
|
-
[id]="resolvedId"
|
|
257
|
-
[attr.name]="name || null"
|
|
258
|
-
[attr.placeholder]="placeholder || null"
|
|
259
|
-
[attr.autocomplete]="autocomplete"
|
|
260
|
-
[disabled]="disabled"
|
|
261
|
-
[attr.aria-invalid]="showError ? 'true' : 'false'"
|
|
262
|
-
(blur)="onBlur()"
|
|
263
|
-
(focus)="onFocus()"
|
|
264
|
-
/>
|
|
265
|
-
</div>
|
|
266
|
-
|
|
267
|
-
<button *ngIf="showClear && currentRaw()"
|
|
268
|
-
type="button"
|
|
269
|
-
class="ngx-tel__clear"
|
|
270
|
-
(click)="clearInput()"
|
|
271
|
-
[attr.aria-label]="'Clear phone number'">
|
|
272
|
-
×
|
|
273
|
-
</button>
|
|
274
|
-
</div>
|
|
275
|
-
|
|
276
|
-
<div class="ngx-tel__hint" *ngIf="hint && !showError">{{ hint }}</div>
|
|
277
|
-
<div class="ngx-tel__error" *ngIf="showError">{{ errorText || 'Please enter a valid phone number.' }}</div>
|
|
278
|
-
</div>
|
|
279
|
-
`, isInline: true, styles: [":host{--tel-bg: #fff;--tel-fg: #0f172a;--tel-border: #c0c0c0;--tel-border-hover: #9aa0a6;--tel-ring: #2563eb;--tel-placeholder: #9ca3af;--tel-error: #ef4444;--tel-radius: 12px;--tel-focus-shadow: 0 0 0 3px rgba(37, 99, 235, .25);--tel-dd-bg: var(--tel-bg);--tel-dd-border: var(--tel-border);--tel-dd-shadow: 0 24px 60px rgba(0,0,0,.18);--tel-dd-radius: 12px;--tel-dd-item-hover: rgba(37,99,235,.08);--tel-dd-z: 2000;--tel-dd-search-bg: rgba(148,163,184,.08);display:block}:host-context(.dark){--tel-bg: #0b0f17;--tel-fg: #e5e7eb;--tel-border: #334155;--tel-border-hover: #475569;--tel-ring: #60a5fa;--tel-placeholder: #94a3b8;--tel-dd-bg: #0f1521;--tel-dd-border: #324056;--tel-dd-search-bg: rgba(148,163,184,.12)}.ngx-tel{width:100%;color:var(--tel-fg)}.ngx-tel.disabled{opacity:.7;cursor:not-allowed}.ngx-tel__label{display:inline-block;margin-bottom:6px;font-size:.875rem;font-weight:500}.ngx-tel__wrap{position:relative}.ngxsmk-tel-input__wrapper,:host ::ng-deep .iti{width:100%}.ngxsmk-tel-input__control{width:100%;height:40px;font:inherit;color:var(--tel-fg);background:var(--tel-bg);border:1px solid var(--tel-border);border-radius:var(--tel-radius);padding:10px 40px 10px 12px;outline:none;transition:border-color .15s ease,box-shadow .15s ease,background .15s ease}.ngxsmk-tel-input__control::placeholder{color:var(--tel-placeholder)}.ngxsmk-tel-input__control:hover{border-color:var(--tel-border-hover)}.ngxsmk-tel-input__control:focus{border-color:var(--tel-ring);box-shadow:var(--tel-focus-shadow)}[data-size=sm] .ngxsmk-tel-input__control{height:34px;font-size:13px;padding:6px 36px 6px 10px;border-radius:10px}[data-size=lg] .ngxsmk-tel-input__control{height:46px;font-size:16px;padding:12px 44px 12px 14px;border-radius:14px}[data-variant=filled] .ngxsmk-tel-input__control{background:#94a3b814}[data-variant=underline] .ngxsmk-tel-input__control{border:0;border-bottom:2px solid var(--tel-border);border-radius:0;padding-left:0;padding-right:34px}[data-variant=underline] .ngxsmk-tel-input__control:focus{border-bottom-color:var(--tel-ring);box-shadow:none}:host ::ng-deep .iti__flag-container{border-top-left-radius:var(--tel-radius);border-bottom-left-radius:var(--tel-radius);border:1px solid var(--tel-border);border-right:none;background:var(--tel-bg)}:host ::ng-deep .iti__selected-flag{height:100%;padding:0 10px;display:inline-flex;align-items:center}:host ::ng-deep .iti__country-list{background:var(--tel-dd-bg);border:1px solid var(--tel-dd-border);border-radius:var(--tel-dd-radius);box-shadow:var(--tel-dd-shadow);max-height:min(50vh,360px);overflow:auto;padding:6px 0;width:max(280px,100%);z-index:var(--tel-dd-z)}:host ::ng-deep .iti--container .iti__country-list{z-index:var(--tel-dd-z)}:host ::ng-deep .iti__search-input{position:sticky;top:0;margin:0;padding:10px 12px;width:100%;border:0;border-bottom:1px solid var(--tel-dd-border);outline:none;background:var(--tel-dd-search-bg);color:var(--tel-fg)}:host ::ng-deep .iti__search-input::placeholder{color:var(--tel-placeholder)}:host ::ng-deep .iti__country{display:grid;grid-template-columns:28px 1fr auto;align-items:center;column-gap:.5rem;padding:10px 12px;cursor:pointer}:host ::ng-deep .iti__flag-box{width:28px;display:inline-flex;justify-content:center}:host ::ng-deep .iti__country-name{color:var(--tel-fg)}:host ::ng-deep .iti__dial-code{color:var(--tel-placeholder);font-weight:600;margin-left:10px}:host ::ng-deep .iti__country:hover,:host ::ng-deep .iti__country.iti__highlight{background:var(--tel-dd-item-hover)}:host ::ng-deep .iti__country:focus{outline:2px solid var(--tel-ring);outline-offset:-2px}:host ::ng-deep .iti__divider{margin:6px 0;border-top:1px dashed var(--tel-dd-border)}:host ::ng-deep .iti--separate-dial-code .ngxsmk-tel-input__control{padding-left:56px}:host ::ng-deep .iti__country-list::-webkit-scrollbar{width:10px}:host ::ng-deep .iti__country-list::-webkit-scrollbar-thumb{background:#94a3b866;border-radius:8px}:host ::ng-deep .iti__country-list::-webkit-scrollbar-track{background:transparent}@media (max-width: 480px){:host ::ng-deep .iti__country-list{width:100vw;max-width:100vw}}.ngx-tel__clear{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:0;background:transparent;font-size:18px;line-height:1;width:28px;height:28px;border-radius:50%;cursor:pointer;color:var(--tel-placeholder)}.ngx-tel__clear:hover{background:#94a3b826}.ngx-tel__hint{margin-top:6px;font-size:12px;color:var(--tel-placeholder)}.ngx-tel__error{margin-top:6px;font-size:12px;color:var(--tel-error)}.ngx-tel__wrap.has-error .ngxsmk-tel-input__control{border-color:var(--tel-error);box-shadow:0 0 0 3px #ef444426}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
280
|
-
}
|
|
281
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NgxsmkTelInputComponent, decorators: [{
|
|
282
|
-
type: Component,
|
|
283
|
-
args: [{ selector: 'ngxsmk-tel-input', standalone: true, imports: [NgIf], template: `
|
|
284
|
-
<div class="ngx-tel" [class.disabled]="disabled" [attr.data-size]="size" [attr.data-variant]="variant">
|
|
285
|
-
<label *ngIf="label" class="ngx-tel__label" [for]="resolvedId">{{ label }}</label>
|
|
286
|
-
|
|
287
|
-
<div class="ngx-tel__wrap" [class.has-error]="showError">
|
|
288
|
-
<div class="ngxsmk-tel-input__wrapper">
|
|
289
|
-
<input
|
|
290
|
-
#telInput
|
|
291
|
-
type="tel"
|
|
292
|
-
class="ngxsmk-tel-input__control"
|
|
293
|
-
[id]="resolvedId"
|
|
294
|
-
[attr.name]="name || null"
|
|
295
|
-
[attr.placeholder]="placeholder || null"
|
|
296
|
-
[attr.autocomplete]="autocomplete"
|
|
297
|
-
[disabled]="disabled"
|
|
298
|
-
[attr.aria-invalid]="showError ? 'true' : 'false'"
|
|
299
|
-
(blur)="onBlur()"
|
|
300
|
-
(focus)="onFocus()"
|
|
301
|
-
/>
|
|
302
|
-
</div>
|
|
303
|
-
|
|
304
|
-
<button *ngIf="showClear && currentRaw()"
|
|
305
|
-
type="button"
|
|
306
|
-
class="ngx-tel__clear"
|
|
307
|
-
(click)="clearInput()"
|
|
308
|
-
[attr.aria-label]="'Clear phone number'">
|
|
309
|
-
×
|
|
310
|
-
</button>
|
|
311
|
-
</div>
|
|
312
|
-
|
|
313
|
-
<div class="ngx-tel__hint" *ngIf="hint && !showError">{{ hint }}</div>
|
|
314
|
-
<div class="ngx-tel__error" *ngIf="showError">{{ errorText || 'Please enter a valid phone number.' }}</div>
|
|
315
|
-
</div>
|
|
316
|
-
`, providers: [
|
|
317
|
-
{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NgxsmkTelInputComponent), multi: true },
|
|
318
|
-
{ provide: NG_VALIDATORS, useExisting: forwardRef(() => NgxsmkTelInputComponent), multi: true }
|
|
319
|
-
], styles: [":host{--tel-bg: #fff;--tel-fg: #0f172a;--tel-border: #c0c0c0;--tel-border-hover: #9aa0a6;--tel-ring: #2563eb;--tel-placeholder: #9ca3af;--tel-error: #ef4444;--tel-radius: 12px;--tel-focus-shadow: 0 0 0 3px rgba(37, 99, 235, .25);--tel-dd-bg: var(--tel-bg);--tel-dd-border: var(--tel-border);--tel-dd-shadow: 0 24px 60px rgba(0,0,0,.18);--tel-dd-radius: 12px;--tel-dd-item-hover: rgba(37,99,235,.08);--tel-dd-z: 2000;--tel-dd-search-bg: rgba(148,163,184,.08);display:block}:host-context(.dark){--tel-bg: #0b0f17;--tel-fg: #e5e7eb;--tel-border: #334155;--tel-border-hover: #475569;--tel-ring: #60a5fa;--tel-placeholder: #94a3b8;--tel-dd-bg: #0f1521;--tel-dd-border: #324056;--tel-dd-search-bg: rgba(148,163,184,.12)}.ngx-tel{width:100%;color:var(--tel-fg)}.ngx-tel.disabled{opacity:.7;cursor:not-allowed}.ngx-tel__label{display:inline-block;margin-bottom:6px;font-size:.875rem;font-weight:500}.ngx-tel__wrap{position:relative}.ngxsmk-tel-input__wrapper,:host ::ng-deep .iti{width:100%}.ngxsmk-tel-input__control{width:100%;height:40px;font:inherit;color:var(--tel-fg);background:var(--tel-bg);border:1px solid var(--tel-border);border-radius:var(--tel-radius);padding:10px 40px 10px 12px;outline:none;transition:border-color .15s ease,box-shadow .15s ease,background .15s ease}.ngxsmk-tel-input__control::placeholder{color:var(--tel-placeholder)}.ngxsmk-tel-input__control:hover{border-color:var(--tel-border-hover)}.ngxsmk-tel-input__control:focus{border-color:var(--tel-ring);box-shadow:var(--tel-focus-shadow)}[data-size=sm] .ngxsmk-tel-input__control{height:34px;font-size:13px;padding:6px 36px 6px 10px;border-radius:10px}[data-size=lg] .ngxsmk-tel-input__control{height:46px;font-size:16px;padding:12px 44px 12px 14px;border-radius:14px}[data-variant=filled] .ngxsmk-tel-input__control{background:#94a3b814}[data-variant=underline] .ngxsmk-tel-input__control{border:0;border-bottom:2px solid var(--tel-border);border-radius:0;padding-left:0;padding-right:34px}[data-variant=underline] .ngxsmk-tel-input__control:focus{border-bottom-color:var(--tel-ring);box-shadow:none}:host ::ng-deep .iti__flag-container{border-top-left-radius:var(--tel-radius);border-bottom-left-radius:var(--tel-radius);border:1px solid var(--tel-border);border-right:none;background:var(--tel-bg)}:host ::ng-deep .iti__selected-flag{height:100%;padding:0 10px;display:inline-flex;align-items:center}:host ::ng-deep .iti__country-list{background:var(--tel-dd-bg);border:1px solid var(--tel-dd-border);border-radius:var(--tel-dd-radius);box-shadow:var(--tel-dd-shadow);max-height:min(50vh,360px);overflow:auto;padding:6px 0;width:max(280px,100%);z-index:var(--tel-dd-z)}:host ::ng-deep .iti--container .iti__country-list{z-index:var(--tel-dd-z)}:host ::ng-deep .iti__search-input{position:sticky;top:0;margin:0;padding:10px 12px;width:100%;border:0;border-bottom:1px solid var(--tel-dd-border);outline:none;background:var(--tel-dd-search-bg);color:var(--tel-fg)}:host ::ng-deep .iti__search-input::placeholder{color:var(--tel-placeholder)}:host ::ng-deep .iti__country{display:grid;grid-template-columns:28px 1fr auto;align-items:center;column-gap:.5rem;padding:10px 12px;cursor:pointer}:host ::ng-deep .iti__flag-box{width:28px;display:inline-flex;justify-content:center}:host ::ng-deep .iti__country-name{color:var(--tel-fg)}:host ::ng-deep .iti__dial-code{color:var(--tel-placeholder);font-weight:600;margin-left:10px}:host ::ng-deep .iti__country:hover,:host ::ng-deep .iti__country.iti__highlight{background:var(--tel-dd-item-hover)}:host ::ng-deep .iti__country:focus{outline:2px solid var(--tel-ring);outline-offset:-2px}:host ::ng-deep .iti__divider{margin:6px 0;border-top:1px dashed var(--tel-dd-border)}:host ::ng-deep .iti--separate-dial-code .ngxsmk-tel-input__control{padding-left:56px}:host ::ng-deep .iti__country-list::-webkit-scrollbar{width:10px}:host ::ng-deep .iti__country-list::-webkit-scrollbar-thumb{background:#94a3b866;border-radius:8px}:host ::ng-deep .iti__country-list::-webkit-scrollbar-track{background:transparent}@media (max-width: 480px){:host ::ng-deep .iti__country-list{width:100vw;max-width:100vw}}.ngx-tel__clear{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:0;background:transparent;font-size:18px;line-height:1;width:28px;height:28px;border-radius:50%;cursor:pointer;color:var(--tel-placeholder)}.ngx-tel__clear:hover{background:#94a3b826}.ngx-tel__hint{margin-top:6px;font-size:12px;color:var(--tel-placeholder)}.ngx-tel__error{margin-top:6px;font-size:12px;color:var(--tel-error)}.ngx-tel__wrap.has-error .ngxsmk-tel-input__control{border-color:var(--tel-error);box-shadow:0 0 0 3px #ef444426}\n"] }]
|
|
320
|
-
}], ctorParameters: () => [{ type: i0.NgZone }, { type: NgxsmkTelInputService }, { type: Object, decorators: [{
|
|
321
|
-
type: Inject,
|
|
322
|
-
args: [PLATFORM_ID]
|
|
323
|
-
}] }], propDecorators: { inputRef: [{
|
|
324
|
-
type: ViewChild,
|
|
325
|
-
args: ['telInput', { static: true }]
|
|
326
|
-
}], initialCountry: [{
|
|
327
|
-
type: Input
|
|
328
|
-
}], preferredCountries: [{
|
|
329
|
-
type: Input
|
|
330
|
-
}], onlyCountries: [{
|
|
331
|
-
type: Input
|
|
332
|
-
}], nationalMode: [{
|
|
333
|
-
type: Input
|
|
334
|
-
}], separateDialCode: [{
|
|
335
|
-
type: Input
|
|
336
|
-
}], allowDropdown: [{
|
|
337
|
-
type: Input
|
|
338
|
-
}], placeholder: [{
|
|
339
|
-
type: Input
|
|
340
|
-
}], autocomplete: [{
|
|
341
|
-
type: Input
|
|
342
|
-
}], name: [{
|
|
343
|
-
type: Input
|
|
344
|
-
}], inputId: [{
|
|
345
|
-
type: Input
|
|
346
|
-
}], disabled: [{
|
|
347
|
-
type: Input
|
|
348
|
-
}], label: [{
|
|
349
|
-
type: Input
|
|
350
|
-
}], hint: [{
|
|
351
|
-
type: Input
|
|
352
|
-
}], errorText: [{
|
|
353
|
-
type: Input
|
|
354
|
-
}], size: [{
|
|
355
|
-
type: Input
|
|
356
|
-
}], variant: [{
|
|
357
|
-
type: Input
|
|
358
|
-
}], showClear: [{
|
|
359
|
-
type: Input
|
|
360
|
-
}], autoFocus: [{
|
|
361
|
-
type: Input
|
|
362
|
-
}], selectOnFocus: [{
|
|
363
|
-
type: Input
|
|
364
|
-
}], formatOnBlur: [{
|
|
365
|
-
type: Input
|
|
366
|
-
}], showErrorWhenTouched: [{
|
|
367
|
-
type: Input
|
|
368
|
-
}], dropdownAttachToBody: [{
|
|
369
|
-
type: Input
|
|
370
|
-
}], dropdownZIndex: [{
|
|
371
|
-
type: Input
|
|
372
|
-
}], countryChange: [{
|
|
373
|
-
type: Output
|
|
374
|
-
}], validityChange: [{
|
|
375
|
-
type: Output
|
|
376
|
-
}], inputChange: [{
|
|
377
|
-
type: Output
|
|
378
|
-
}] } });
|
|
379
|
-
|
|
380
|
-
/**
|
|
381
|
-
* Generated bundle index. Do not edit.
|
|
382
|
-
*/
|
|
383
|
-
|
|
384
|
-
export { NgxsmkTelInputComponent, NgxsmkTelInputService };
|
|
385
|
-
//# sourceMappingURL=ngxsmk-tel-input.mjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ngxsmk-tel-input.mjs","sources":["../../src/lib/ngxsmk-tel-input.service.ts","../../src/lib/ngxsmk-tel-input.component.ts","../../src/ngxsmk-tel-input.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\r\nimport { parsePhoneNumberFromString, type CountryCode } from 'libphonenumber-js';\r\n\r\n@Injectable({ providedIn: 'root' })\r\nexport class NgxsmkTelInputService {\r\n parse(input: string, iso2: CountryCode): { e164: string | null; national: string | null; isValid: boolean } {\r\n const phone = parsePhoneNumberFromString(input, iso2);\r\n if (!phone) return { e164: null, national: null, isValid: false };\r\n const isValid = phone.isValid();\r\n return { e164: isValid ? phone.number : null, national: phone.formatNational(), isValid };\r\n }\r\n\r\n isValid(input: string, iso2: CountryCode): boolean {\r\n const phone = parsePhoneNumberFromString(input, iso2);\r\n return !!phone && phone.isValid();\r\n }\r\n}\r\n","import {\r\n AfterViewInit,\r\n Component,\r\n ElementRef,\r\n EventEmitter,\r\n forwardRef,\r\n Inject,\r\n Input,\r\n NgZone,\r\n OnChanges,\r\n OnDestroy,\r\n Output,\r\n PLATFORM_ID,\r\n SimpleChanges,\r\n ViewChild\r\n} from '@angular/core';\r\nimport { isPlatformBrowser, NgIf } from '@angular/common';\r\nimport {\r\n AbstractControl,\r\n ControlValueAccessor,\r\n NG_VALIDATORS,\r\n NG_VALUE_ACCESSOR,\r\n ValidationErrors\r\n} from '@angular/forms';\r\nimport type { CountryCode } from 'libphonenumber-js';\r\nimport { NgxsmkTelInputService } from './ngxsmk-tel-input.service';\r\n\r\ntype IntlTelInstance = any;\r\n\r\n@Component({\r\n selector: 'ngxsmk-tel-input',\r\n standalone: true,\r\n imports: [NgIf],\r\n template: `\r\n <div class=\"ngx-tel\" [class.disabled]=\"disabled\" [attr.data-size]=\"size\" [attr.data-variant]=\"variant\">\r\n <label *ngIf=\"label\" class=\"ngx-tel__label\" [for]=\"resolvedId\">{{ label }}</label>\r\n\r\n <div class=\"ngx-tel__wrap\" [class.has-error]=\"showError\">\r\n <div class=\"ngxsmk-tel-input__wrapper\">\r\n <input\r\n #telInput\r\n type=\"tel\"\r\n class=\"ngxsmk-tel-input__control\"\r\n [id]=\"resolvedId\"\r\n [attr.name]=\"name || null\"\r\n [attr.placeholder]=\"placeholder || null\"\r\n [attr.autocomplete]=\"autocomplete\"\r\n [disabled]=\"disabled\"\r\n [attr.aria-invalid]=\"showError ? 'true' : 'false'\"\r\n (blur)=\"onBlur()\"\r\n (focus)=\"onFocus()\"\r\n />\r\n </div>\r\n\r\n <button *ngIf=\"showClear && currentRaw()\"\r\n type=\"button\"\r\n class=\"ngx-tel__clear\"\r\n (click)=\"clearInput()\"\r\n [attr.aria-label]=\"'Clear phone number'\">\r\n ×\r\n </button>\r\n </div>\r\n\r\n <div class=\"ngx-tel__hint\" *ngIf=\"hint && !showError\">{{ hint }}</div>\r\n <div class=\"ngx-tel__error\" *ngIf=\"showError\">{{ errorText || 'Please enter a valid phone number.' }}</div>\r\n </div>\r\n `,\r\n providers: [\r\n { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NgxsmkTelInputComponent), multi: true },\r\n { provide: NG_VALIDATORS, useExisting: forwardRef(() => NgxsmkTelInputComponent), multi: true }\r\n ],\r\n styles: [`\r\n /* ---------- Theme tokens ---------- */\r\n :host {\r\n --tel-bg: #fff;\r\n --tel-fg: #0f172a;\r\n --tel-border: #c0c0c0;\r\n --tel-border-hover: #9aa0a6;\r\n --tel-ring: #2563eb;\r\n --tel-placeholder: #9ca3af;\r\n --tel-error: #ef4444;\r\n --tel-radius: 12px;\r\n --tel-focus-shadow: 0 0 0 3px rgba(37, 99, 235, .25);\r\n\r\n /* dropdown tokens */\r\n --tel-dd-bg: var(--tel-bg);\r\n --tel-dd-border: var(--tel-border);\r\n --tel-dd-shadow: 0 24px 60px rgba(0,0,0,.18);\r\n --tel-dd-radius: 12px;\r\n --tel-dd-item-hover: rgba(37,99,235,.08);\r\n --tel-dd-z: 2000;\r\n --tel-dd-search-bg: rgba(148,163,184,.08);\r\n\r\n display: block;\r\n }\r\n :host-context(.dark) {\r\n --tel-bg: #0b0f17;\r\n --tel-fg: #e5e7eb;\r\n --tel-border: #334155;\r\n --tel-border-hover: #475569;\r\n --tel-ring: #60a5fa;\r\n --tel-placeholder: #94a3b8;\r\n\r\n --tel-dd-bg: #0f1521;\r\n --tel-dd-border: #324056;\r\n --tel-dd-search-bg: rgba(148,163,184,.12);\r\n }\r\n\r\n /* ---------- Structure ---------- */\r\n .ngx-tel { width: 100%; color: var(--tel-fg); }\r\n .ngx-tel.disabled { opacity: .7; cursor: not-allowed; }\r\n\r\n .ngx-tel__label { display: inline-block; margin-bottom: 6px; font-size: .875rem; font-weight: 500; }\r\n\r\n .ngx-tel__wrap { position: relative; }\r\n\r\n .ngxsmk-tel-input__wrapper,\r\n :host ::ng-deep .iti { width: 100%; }\r\n\r\n .ngxsmk-tel-input__control {\r\n width: 100%;\r\n height: 40px;\r\n font: inherit;\r\n color: var(--tel-fg);\r\n background: var(--tel-bg);\r\n border: 1px solid var(--tel-border);\r\n border-radius: var(--tel-radius);\r\n padding: 10px 40px 10px 12px; /* room for clear button */\r\n outline: none;\r\n transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;\r\n }\r\n .ngxsmk-tel-input__control::placeholder { color: var(--tel-placeholder); }\r\n .ngxsmk-tel-input__control:hover { border-color: var(--tel-border-hover); }\r\n .ngxsmk-tel-input__control:focus { border-color: var(--tel-ring); box-shadow: var(--tel-focus-shadow); }\r\n\r\n /* Size presets */\r\n [data-size=\"sm\"] .ngxsmk-tel-input__control { height: 34px; font-size: 13px; padding: 6px 36px 6px 10px; border-radius: 10px; }\r\n [data-size=\"lg\"] .ngxsmk-tel-input__control { height: 46px; font-size: 16px; padding: 12px 44px 12px 14px; border-radius: 14px; }\r\n\r\n /* Variants */\r\n [data-variant=\"filled\"] .ngxsmk-tel-input__control { background: rgba(148, 163, 184, .08); }\r\n [data-variant=\"underline\"] .ngxsmk-tel-input__control { border: 0; border-bottom: 2px solid var(--tel-border); border-radius: 0; padding-left: 0; padding-right: 34px; }\r\n [data-variant=\"underline\"] .ngxsmk-tel-input__control:focus { border-bottom-color: var(--tel-ring); box-shadow: none; }\r\n\r\n /* ---------- intl-tel-input dropdown (deep selectors) ---------- */\r\n :host ::ng-deep .iti__flag-container {\r\n border-top-left-radius: var(--tel-radius);\r\n border-bottom-left-radius: var(--tel-radius);\r\n border: 1px solid var(--tel-border);\r\n border-right: none;\r\n background: var(--tel-bg);\r\n }\r\n :host ::ng-deep .iti__selected-flag { height: 100%; padding: 0 10px; display: inline-flex; align-items: center; }\r\n\r\n /* Core dropdown panel */\r\n :host ::ng-deep .iti__country-list {\r\n background: var(--tel-dd-bg);\r\n border: 1px solid var(--tel-dd-border);\r\n border-radius: var(--tel-dd-radius);\r\n box-shadow: var(--tel-dd-shadow);\r\n max-height: min(50vh, 360px);\r\n overflow: auto;\r\n padding: 6px 0;\r\n width: max(280px, 100%);\r\n z-index: var(--tel-dd-z);\r\n }\r\n /* When attached to <body>, it's wrapped in .iti--container */\r\n :host ::ng-deep .iti--container .iti__country-list {\r\n z-index: var(--tel-dd-z);\r\n }\r\n\r\n /* Search input (sticky header) */\r\n :host ::ng-deep .iti__search-input {\r\n position: sticky; top: 0;\r\n margin: 0; padding: 10px 12px;\r\n width: 100%;\r\n border: 0; border-bottom: 1px solid var(--tel-dd-border);\r\n outline: none;\r\n background: var(--tel-dd-search-bg);\r\n color: var(--tel-fg);\r\n }\r\n :host ::ng-deep .iti__search-input::placeholder { color: var(--tel-placeholder); }\r\n\r\n /* Rows: flag | country name | dial code (right) */\r\n :host ::ng-deep .iti__country {\r\n display: grid;\r\n grid-template-columns: 28px 1fr auto;\r\n align-items: center;\r\n column-gap: .5rem;\r\n padding: 10px 12px;\r\n cursor: pointer;\r\n }\r\n :host ::ng-deep .iti__flag-box { width: 28px; display: inline-flex; justify-content: center; }\r\n :host ::ng-deep .iti__country-name { color: var(--tel-fg); }\r\n :host ::ng-deep .iti__dial-code { color: var(--tel-placeholder); font-weight: 600; margin-left: 10px; }\r\n :host ::ng-deep .iti__country:hover,\r\n :host ::ng-deep .iti__country.iti__highlight { background: var(--tel-dd-item-hover); }\r\n :host ::ng-deep .iti__country:focus { outline: 2px solid var(--tel-ring); outline-offset: -2px; }\r\n\r\n :host ::ng-deep .iti__divider { margin: 6px 0; border-top: 1px dashed var(--tel-dd-border); }\r\n\r\n /* Separate dial code pushes input text */\r\n :host ::ng-deep .iti--separate-dial-code .ngxsmk-tel-input__control { padding-left: 56px; }\r\n\r\n /* Custom scrollbar (WebKit/Chromium) */\r\n :host ::ng-deep .iti__country-list::-webkit-scrollbar { width: 10px; }\r\n :host ::ng-deep .iti__country-list::-webkit-scrollbar-thumb { background: rgba(148,163,184,.4); border-radius: 8px; }\r\n :host ::ng-deep .iti__country-list::-webkit-scrollbar-track { background: transparent; }\r\n\r\n /* Mobile tweak: make it breathe */\r\n @media (max-width: 480px) {\r\n :host ::ng-deep .iti__country-list { width: 100vw; max-width: 100vw; }\r\n }\r\n\r\n /* Clear button */\r\n .ngx-tel__clear {\r\n position: absolute; right: 8px; top: 50%; transform: translateY(-50%);\r\n border: 0; background: transparent; font-size: 18px; line-height: 1;\r\n width: 28px; height: 28px; border-radius: 50%; cursor: pointer; color: var(--tel-placeholder);\r\n }\r\n .ngx-tel__clear:hover { background: rgba(148, 163, 184, .15); }\r\n\r\n /* Hint & Error */\r\n .ngx-tel__hint { margin-top: 6px; font-size: 12px; color: var(--tel-placeholder); }\r\n .ngx-tel__error { margin-top: 6px; font-size: 12px; color: var(--tel-error); }\r\n .ngx-tel__wrap.has-error .ngxsmk-tel-input__control { border-color: var(--tel-error); box-shadow: 0 0 0 3px rgba(239, 68, 68, .15); }\r\n `]\r\n})\r\nexport class NgxsmkTelInputComponent implements AfterViewInit, OnChanges, OnDestroy, ControlValueAccessor {\r\n @ViewChild('telInput', { static: true }) inputRef!: ElementRef<HTMLInputElement>;\r\n\r\n /* Existing inputs */\r\n @Input() initialCountry: CountryCode | 'auto' = 'US';\r\n @Input() preferredCountries: CountryCode[] = ['US', 'GB'];\r\n @Input() onlyCountries?: CountryCode[];\r\n @Input() nationalMode = false;\r\n @Input() separateDialCode = false;\r\n @Input() allowDropdown = true;\r\n\r\n @Input() placeholder = 'Enter phone number';\r\n @Input() autocomplete = 'tel';\r\n @Input() name?: string;\r\n @Input() inputId?: string;\r\n @Input() disabled = false;\r\n\r\n /* New UI/UX inputs */\r\n @Input() label?: string;\r\n @Input() hint?: string;\r\n @Input() errorText?: string;\r\n @Input() size: 'sm' | 'md' | 'lg' = 'md';\r\n @Input() variant: 'outline' | 'filled' | 'underline' = 'outline';\r\n @Input() showClear = true;\r\n @Input() autoFocus = false;\r\n @Input() selectOnFocus = false;\r\n @Input() formatOnBlur = true;\r\n @Input() showErrorWhenTouched = true;\r\n\r\n /** Dropdown plumbing */\r\n @Input() dropdownAttachToBody = true; // append dropdown to <body> (escapes overflow/clip)\r\n @Input() dropdownZIndex = 2000; // used by CSS var --tel-dd-z\r\n\r\n /* Outputs */\r\n @Output() countryChange = new EventEmitter<{ iso2: CountryCode }>();\r\n @Output() validityChange = new EventEmitter<boolean>();\r\n @Output() inputChange = new EventEmitter<{ raw: string; e164: string | null; iso2: CountryCode }>();\r\n\r\n /* Internal */\r\n private iti: IntlTelInstance | null = null;\r\n private onChange: (val: string | null) => void = () => {};\r\n private onTouchedCb: () => void = () => {};\r\n private lastEmittedValid = false;\r\n private pendingWrite: string | null = null;\r\n private touched = false;\r\n\r\n readonly resolvedId = (() => 'tel-' + Math.random().toString(36).slice(2))();\r\n\r\n constructor(\r\n private readonly zone: NgZone,\r\n private readonly tel: NgxsmkTelInputService,\r\n @Inject(PLATFORM_ID) private readonly platformId: Object\r\n ) {}\r\n\r\n async ngAfterViewInit() {\r\n if (!isPlatformBrowser(this.platformId)) return;\r\n\r\n // set z-index via CSS var\r\n (this as any).constructor; // no-op to keep TS calm\r\n (this.inputRef.nativeElement.closest(':host') as any);\r\n\r\n await this.initIntlTelInput();\r\n this.bindDomListeners();\r\n\r\n if (this.pendingWrite !== null) {\r\n this.setInputValue(this.pendingWrite);\r\n this.handleInput();\r\n this.pendingWrite = null;\r\n }\r\n if (this.autoFocus) setTimeout(() => this.focus(), 0);\r\n }\r\n\r\n ngOnChanges(changes: SimpleChanges): void {\r\n if (!isPlatformBrowser(this.platformId)) return;\r\n const configChanged = ['initialCountry','preferredCountries','onlyCountries','separateDialCode','allowDropdown','nationalMode']\r\n .some(k => k in changes && !changes[k].firstChange);\r\n if (configChanged && this.iti) this.reinitPlugin();\r\n }\r\n\r\n ngOnDestroy(): void { this.destroyPlugin(); }\r\n\r\n // ----- CVA -----\r\n writeValue(val: string | null): void {\r\n if (!this.inputRef) return;\r\n if (!this.iti) { this.pendingWrite = val ?? ''; return; }\r\n this.setInputValue(val ?? '');\r\n }\r\n registerOnChange(fn: any): void { this.onChange = fn; }\r\n registerOnTouched(fn: any): void { this.onTouchedCb = fn; }\r\n setDisabledState(isDisabled: boolean): void {\r\n this.disabled = isDisabled;\r\n if (this.inputRef) this.inputRef.nativeElement.disabled = isDisabled;\r\n }\r\n\r\n // ----- Validator -----\r\n validate(_: AbstractControl): ValidationErrors | null {\r\n const raw = this.currentRaw();\r\n if (!raw) return null;\r\n const valid = this.tel.isValid(raw, this.currentIso2());\r\n if (valid !== this.lastEmittedValid) {\r\n this.lastEmittedValid = valid;\r\n this.validityChange.emit(valid);\r\n }\r\n return valid ? null : { phoneInvalid: true };\r\n }\r\n\r\n // ----- Public helpers -----\r\n focus(): void {\r\n this.inputRef?.nativeElement.focus();\r\n if (this.selectOnFocus) {\r\n const el = this.inputRef.nativeElement;\r\n queueMicrotask(() => el.setSelectionRange(0, el.value.length));\r\n }\r\n }\r\n selectCountry(iso2: CountryCode): void {\r\n if (this.iti) { this.iti.setCountry(iso2.toLowerCase()); this.handleInput(); }\r\n }\r\n clearInput() {\r\n this.setInputValue(''); this.handleInput(); this.inputRef.nativeElement.focus();\r\n }\r\n\r\n // ----- Plugin wiring -----\r\n private async initIntlTelInput() {\r\n const [{ default: intlTelInput }] = await Promise.all([ import('intl-tel-input') ]);\r\n const config: any = {\r\n initialCountry: this.initialCountry === 'auto' ? 'auto' : (this.initialCountry?.toLowerCase() || 'us'),\r\n preferredCountries: (this.preferredCountries ?? []).map(c => c.toLowerCase()),\r\n onlyCountries: (this.onlyCountries ?? []).map(c => c.toLowerCase()),\r\n nationalMode: this.nationalMode,\r\n allowDropdown: this.allowDropdown,\r\n separateDialCode: this.separateDialCode,\r\n geoIpLookup: (cb: (iso2: string) => void) => cb('us'),\r\n utilsScript: undefined,\r\n dropdownContainer: this.dropdownAttachToBody && typeof document !== 'undefined' ? document.body : undefined\r\n };\r\n this.zone.runOutsideAngular(() => { this.iti = intlTelInput(this.inputRef.nativeElement, config); });\r\n\r\n // expose z-index var to host (so CSS picks it up)\r\n (this.inputRef.nativeElement as HTMLElement).style.setProperty('--tel-dd-z', String(this.dropdownZIndex));\r\n }\r\n\r\n private reinitPlugin() {\r\n const current = this.currentRaw();\r\n this.destroyPlugin();\r\n this.initIntlTelInput().then(() => {\r\n if (current) { this.setInputValue(current); this.handleInput(); }\r\n });\r\n }\r\n\r\n private destroyPlugin() {\r\n if (this.iti) { this.iti.destroy(); this.iti = null; }\r\n if (this.inputRef?.nativeElement) {\r\n const el = this.inputRef.nativeElement;\r\n const clone = el.cloneNode(true) as HTMLInputElement;\r\n el.parentNode?.replaceChild(clone, el);\r\n (this.inputRef as any).nativeElement = clone;\r\n }\r\n }\r\n\r\n private bindDomListeners() {\r\n const el = this.inputRef.nativeElement;\r\n this.zone.runOutsideAngular(() => {\r\n el.addEventListener('input', () => this.handleInput());\r\n el.addEventListener('countrychange', () => {\r\n const iso2 = this.currentIso2();\r\n this.zone.run(() => this.countryChange.emit({ iso2 }));\r\n this.handleInput();\r\n });\r\n el.addEventListener('paste', () => queueMicrotask(() => this.handleInput()));\r\n el.addEventListener('blur', () => this.onBlur());\r\n });\r\n }\r\n\r\n onBlur() {\r\n this.touched = true;\r\n this.zone.run(() => this.onTouchedCb());\r\n if (!this.formatOnBlur) return;\r\n const raw = this.currentRaw();\r\n if (!raw) return;\r\n const parsed = this.tel.parse(raw, this.currentIso2());\r\n if (this.nationalMode && parsed.national) {\r\n this.setInputValue(parsed.national.replace(/\\s{2,}/g, ' '));\r\n }\r\n }\r\n\r\n onFocus() {\r\n if (this.selectOnFocus) {\r\n const el = this.inputRef.nativeElement;\r\n queueMicrotask(() => el.setSelectionRange(0, el.value.length));\r\n }\r\n }\r\n\r\n private handleInput() {\r\n const raw = this.currentRaw();\r\n const iso2 = this.currentIso2();\r\n const parsed = this.tel.parse(raw, iso2);\r\n this.zone.run(() => this.onChange(parsed.e164)); // E.164 or null\r\n this.zone.run(() => this.inputChange.emit({ raw, e164: parsed.e164, iso2 }));\r\n if (raw && this.nationalMode && parsed.national) {\r\n const normalized = parsed.national.replace(/\\s{2,}/g, ' ');\r\n if (normalized !== raw) this.setInputValue(normalized);\r\n }\r\n }\r\n\r\n currentRaw(): string { return (this.inputRef?.nativeElement.value ?? '').trim(); }\r\n private currentIso2(): CountryCode {\r\n const iso2 = (this.iti?.getSelectedCountryData?.().iso2 ?? this.initialCountry ?? 'US').toString().toUpperCase();\r\n return iso2 as CountryCode;\r\n }\r\n private setInputValue(v: string) { this.inputRef.nativeElement.value = v ?? ''; }\r\n\r\n get showError(): boolean {\r\n const invalid = !!this.validate({} as AbstractControl);\r\n return this.showErrorWhenTouched ? (this.touched && invalid) : invalid;\r\n }\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
package/dist/index.d.ts
DELETED
|
@@ -1,76 +0,0 @@
|
|
|
1
|
-
import { AfterViewInit, ElementRef, EventEmitter, NgZone, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
|
|
2
|
-
import { AbstractControl, ControlValueAccessor, ValidationErrors } from '@angular/forms';
|
|
3
|
-
import type { CountryCode } from 'libphonenumber-js';
|
|
4
|
-
import { NgxsmkTelInputService } from './ngxsmk-tel-input.service';
|
|
5
|
-
import * as i0 from "@angular/core";
|
|
6
|
-
export declare class NgxsmkTelInputComponent implements AfterViewInit, OnChanges, OnDestroy, ControlValueAccessor {
|
|
7
|
-
private readonly zone;
|
|
8
|
-
private readonly tel;
|
|
9
|
-
private readonly platformId;
|
|
10
|
-
inputRef: ElementRef<HTMLInputElement>;
|
|
11
|
-
initialCountry: CountryCode | 'auto';
|
|
12
|
-
preferredCountries: CountryCode[];
|
|
13
|
-
onlyCountries?: CountryCode[];
|
|
14
|
-
nationalMode: boolean;
|
|
15
|
-
separateDialCode: boolean;
|
|
16
|
-
allowDropdown: boolean;
|
|
17
|
-
placeholder: string;
|
|
18
|
-
autocomplete: string;
|
|
19
|
-
name?: string;
|
|
20
|
-
inputId?: string;
|
|
21
|
-
disabled: boolean;
|
|
22
|
-
label?: string;
|
|
23
|
-
hint?: string;
|
|
24
|
-
errorText?: string;
|
|
25
|
-
size: 'sm' | 'md' | 'lg';
|
|
26
|
-
variant: 'outline' | 'filled' | 'underline';
|
|
27
|
-
showClear: boolean;
|
|
28
|
-
autoFocus: boolean;
|
|
29
|
-
selectOnFocus: boolean;
|
|
30
|
-
formatOnBlur: boolean;
|
|
31
|
-
showErrorWhenTouched: boolean;
|
|
32
|
-
/** Dropdown plumbing */
|
|
33
|
-
dropdownAttachToBody: boolean;
|
|
34
|
-
dropdownZIndex: number;
|
|
35
|
-
countryChange: EventEmitter<{
|
|
36
|
-
iso2: CountryCode;
|
|
37
|
-
}>;
|
|
38
|
-
validityChange: EventEmitter<boolean>;
|
|
39
|
-
inputChange: EventEmitter<{
|
|
40
|
-
raw: string;
|
|
41
|
-
e164: string | null;
|
|
42
|
-
iso2: CountryCode;
|
|
43
|
-
}>;
|
|
44
|
-
private iti;
|
|
45
|
-
private onChange;
|
|
46
|
-
private onTouchedCb;
|
|
47
|
-
private lastEmittedValid;
|
|
48
|
-
private pendingWrite;
|
|
49
|
-
private touched;
|
|
50
|
-
readonly resolvedId: string;
|
|
51
|
-
constructor(zone: NgZone, tel: NgxsmkTelInputService, platformId: Object);
|
|
52
|
-
ngAfterViewInit(): Promise<void>;
|
|
53
|
-
ngOnChanges(changes: SimpleChanges): void;
|
|
54
|
-
ngOnDestroy(): void;
|
|
55
|
-
writeValue(val: string | null): void;
|
|
56
|
-
registerOnChange(fn: any): void;
|
|
57
|
-
registerOnTouched(fn: any): void;
|
|
58
|
-
setDisabledState(isDisabled: boolean): void;
|
|
59
|
-
validate(_: AbstractControl): ValidationErrors | null;
|
|
60
|
-
focus(): void;
|
|
61
|
-
selectCountry(iso2: CountryCode): void;
|
|
62
|
-
clearInput(): void;
|
|
63
|
-
private initIntlTelInput;
|
|
64
|
-
private reinitPlugin;
|
|
65
|
-
private destroyPlugin;
|
|
66
|
-
private bindDomListeners;
|
|
67
|
-
onBlur(): void;
|
|
68
|
-
onFocus(): void;
|
|
69
|
-
private handleInput;
|
|
70
|
-
currentRaw(): string;
|
|
71
|
-
private currentIso2;
|
|
72
|
-
private setInputValue;
|
|
73
|
-
get showError(): boolean;
|
|
74
|
-
static ɵfac: i0.ɵɵFactoryDeclaration<NgxsmkTelInputComponent, never>;
|
|
75
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<NgxsmkTelInputComponent, "ngxsmk-tel-input", never, { "initialCountry": { "alias": "initialCountry"; "required": false; }; "preferredCountries": { "alias": "preferredCountries"; "required": false; }; "onlyCountries": { "alias": "onlyCountries"; "required": false; }; "nationalMode": { "alias": "nationalMode"; "required": false; }; "separateDialCode": { "alias": "separateDialCode"; "required": false; }; "allowDropdown": { "alias": "allowDropdown"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "autocomplete": { "alias": "autocomplete"; "required": false; }; "name": { "alias": "name"; "required": false; }; "inputId": { "alias": "inputId"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "label": { "alias": "label"; "required": false; }; "hint": { "alias": "hint"; "required": false; }; "errorText": { "alias": "errorText"; "required": false; }; "size": { "alias": "size"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "showClear": { "alias": "showClear"; "required": false; }; "autoFocus": { "alias": "autoFocus"; "required": false; }; "selectOnFocus": { "alias": "selectOnFocus"; "required": false; }; "formatOnBlur": { "alias": "formatOnBlur"; "required": false; }; "showErrorWhenTouched": { "alias": "showErrorWhenTouched"; "required": false; }; "dropdownAttachToBody": { "alias": "dropdownAttachToBody"; "required": false; }; "dropdownZIndex": { "alias": "dropdownZIndex"; "required": false; }; }, { "countryChange": "countryChange"; "validityChange": "validityChange"; "inputChange": "inputChange"; }, never, never, true, never>;
|
|
76
|
-
}
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import { type CountryCode } from 'libphonenumber-js';
|
|
2
|
-
import * as i0 from "@angular/core";
|
|
3
|
-
export declare class NgxsmkTelInputService {
|
|
4
|
-
parse(input: string, iso2: CountryCode): {
|
|
5
|
-
e164: string | null;
|
|
6
|
-
national: string | null;
|
|
7
|
-
isValid: boolean;
|
|
8
|
-
};
|
|
9
|
-
isValid(input: string, iso2: CountryCode): boolean;
|
|
10
|
-
static ɵfac: i0.ɵɵFactoryDeclaration<NgxsmkTelInputService, never>;
|
|
11
|
-
static ɵprov: i0.ɵɵInjectableDeclaration<NgxsmkTelInputService>;
|
|
12
|
-
}
|
package/dist/public-api.d.ts
DELETED