ngxsmk-tel-input 1.0.2 → 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.
Files changed (8) hide show
  1. package/package.json +1 -1
  2. package/dist/README.md +0 -263
  3. package/dist/fesm2022/ngxsmk-tel-input.mjs +0 -385
  4. package/dist/fesm2022/ngxsmk-tel-input.mjs.map +0 -1
  5. package/dist/index.d.ts +0 -5
  6. package/dist/lib/ngxsmk-tel-input.component.d.ts +0 -76
  7. package/dist/lib/ngxsmk-tel-input.service.d.ts +0 -12
  8. package/dist/public-api.d.ts +0 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ngxsmk-tel-input",
3
- "version": "1.0.2",
3
+ "version": "1.0.3",
4
4
  "author": {
5
5
  "email": "sachindilshan040@gmail.com",
6
6
  "name": "Sachin Dilshan",
package/dist/README.md DELETED
@@ -1,263 +0,0 @@
1
- # ngxsmk-tel-input — International Telephone Input for Angular
2
-
3
- [![npm version](https://img.shields.io/npm/v/ngxsmk-tel-input)](https://www.npmjs.com/package/ngxsmk-tel-input)
4
- [![npm downloads](https://img.shields.io/npm/dm/ngxsmk-tel-input)](https://www.npmjs.com/package/ngxsmk-tel-input)
5
- [![license: MIT](https://img.shields.io/badge/license-MIT-green.svg)](https://github.com/toozuuu/ngxsmk-tel-input/blob/main/LICENSE)
6
- [![bundle size](https://img.shields.io/bundlephobia/minzip/ngxsmk-tel-input)](https://bundlephobia.com/package/ngxsmk-tel-input)
7
- [![GitHub stars](https://img.shields.io/github/stars/toozuuu/ngxsmk-tel-input?style=social)](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)
package/dist/fesm2022/ngxsmk-tel-input.mjs DELETED
@@ -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
package/dist/fesm2022/ngxsmk-tel-input.mjs.map DELETED
@@ -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,5 +0,0 @@
1
- /**
2
- * Generated bundle index. Do not edit.
3
- */
4
- /// <amd-module name="ngxsmk-tel-input" />
5
- export * from './public-api';
package/dist/lib/ngxsmk-tel-input.component.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
- }
package/dist/lib/ngxsmk-tel-input.service.d.ts DELETED
@@ -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
@@ -1,2 +0,0 @@
1
- export * from './lib/ngxsmk-tel-input.component';
2
- export * from './lib/ngxsmk-tel-input.service';