ngxsmk-tel-input 1.6.7 → 1.6.8

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 (70) hide show
  1. package/README.md +52 -32
  2. package/fesm2022/ngxsmk-tel-input.mjs +1218 -0
  3. package/fesm2022/ngxsmk-tel-input.mjs.map +1 -0
  4. package/index.d.ts +6 -0
  5. package/lib/ngxsmk-tel-input.component.d.ts +133 -0
  6. package/lib/ngxsmk-tel-input.component.d.ts.map +1 -0
  7. package/lib/ngxsmk-tel-input.service.d.ts +32 -0
  8. package/lib/ngxsmk-tel-input.service.d.ts.map +1 -0
  9. package/lib/phone-input.utils.d.ts +47 -0
  10. package/lib/phone-input.utils.d.ts.map +1 -0
  11. package/lib/theme.service.d.ts +46 -0
  12. package/lib/theme.service.d.ts.map +1 -0
  13. package/lib/types.d.ts +10 -0
  14. package/lib/types.d.ts.map +1 -0
  15. package/ngxsmk-tel-input.d.ts.map +1 -0
  16. package/package.json +69 -88
  17. package/{projects/ngxsmk-tel-input/src/public-api.ts → public-api.d.ts} +6 -5
  18. package/public-api.d.ts.map +1 -0
  19. package/.changeset/README.md +0 -8
  20. package/.changeset/config.json +0 -11
  21. package/.editorconfig +0 -17
  22. package/.github/ISSUE_TEMPLATE/bug_report.md +0 -38
  23. package/.github/ISSUE_TEMPLATE/feature_request.md +0 -20
  24. package/.github/dependabot.yml +0 -117
  25. package/.github/renovate.json +0 -10
  26. package/.github/workflows/publish.yml +0 -30
  27. package/.vscode/extensions.json +0 -4
  28. package/.vscode/launch.json +0 -20
  29. package/.vscode/settings.json +0 -3
  30. package/.vscode/tasks.json +0 -42
  31. package/CHANGELOG.md +0 -50
  32. package/CODE_OF_CONDUCT.md +0 -128
  33. package/CONTRIBUTING.md +0 -66
  34. package/LICENSE +0 -21
  35. package/OPTIMIZATION_NOTES.md +0 -140
  36. package/SECURITY.md +0 -105
  37. package/THEME_DOCUMENTATION.md +0 -311
  38. package/angular.json +0 -147
  39. package/projects/demo/public/favicon.ico +0 -0
  40. package/projects/demo/src/app/app.component.html +0 -0
  41. package/projects/demo/src/app/app.component.scss +0 -460
  42. package/projects/demo/src/app/app.component.spec.ts +0 -29
  43. package/projects/demo/src/app/app.component.ts +0 -293
  44. package/projects/demo/src/app/app.config.ts +0 -8
  45. package/projects/demo/src/app/app.routes.ts +0 -3
  46. package/projects/demo/src/index.html +0 -13
  47. package/projects/demo/src/main.ts +0 -6
  48. package/projects/demo/src/styles.scss +0 -251
  49. package/projects/demo/tsconfig.app.json +0 -15
  50. package/projects/demo/tsconfig.spec.json +0 -15
  51. package/projects/ngxsmk-tel-input/.changeset/README.md +0 -8
  52. package/projects/ngxsmk-tel-input/.changeset/config.json +0 -11
  53. package/projects/ngxsmk-tel-input/README.md +0 -363
  54. package/projects/ngxsmk-tel-input/docs/invalid.png +0 -0
  55. package/projects/ngxsmk-tel-input/docs/kr.png +0 -0
  56. package/projects/ngxsmk-tel-input/docs/valid.png +0 -0
  57. package/projects/ngxsmk-tel-input/ng-package.json +0 -8
  58. package/projects/ngxsmk-tel-input/package-lock.json +0 -139
  59. package/projects/ngxsmk-tel-input/package.json +0 -59
  60. package/projects/ngxsmk-tel-input/src/lib/ngxsmk-tel-input.component.scss +0 -341
  61. package/projects/ngxsmk-tel-input/src/lib/ngxsmk-tel-input.component.spec.ts +0 -24
  62. package/projects/ngxsmk-tel-input/src/lib/ngxsmk-tel-input.component.ts +0 -803
  63. package/projects/ngxsmk-tel-input/src/lib/ngxsmk-tel-input.service.spec.ts +0 -15
  64. package/projects/ngxsmk-tel-input/src/lib/ngxsmk-tel-input.service.ts +0 -61
  65. package/projects/ngxsmk-tel-input/src/lib/phone-input.utils.ts +0 -109
  66. package/projects/ngxsmk-tel-input/src/lib/theme.service.ts +0 -184
  67. package/projects/ngxsmk-tel-input/src/lib/types.ts +0 -11
  68. package/projects/ngxsmk-tel-input/tsconfig.lib.json +0 -14
  69. package/projects/ngxsmk-tel-input/tsconfig.spec.json +0 -13
  70. package/tsconfig.json +0 -31
package/README.md CHANGED
@@ -17,6 +17,7 @@ Wraps [`intl-tel-input`](https://github.com/jackocnr/intl-tel-input) for the UI
17
17
  * E.164 output (display can be national with `nationalMode`)
18
18
  * Reactive & template‑driven Forms support (CVA)
19
19
  * Built‑in validation using libphonenumber‑js
20
+ * **Enhanced validation**: Detects invalid country codes (like "11", "99") and shows appropriate error states
20
21
  * SSR‑friendly (no `window` on the server)
21
22
  * Easy theming via CSS variables
22
23
  * Nice UX options: label/hint/error text, sizes, variants, clear button, autofocus, select-on-focus
@@ -204,36 +205,36 @@ Arabic + RTL example
204
205
 
205
206
  ### Inputs
206
207
 
207
- | Name | Type | Default | Description |
208
- |------------------------|---------------------------------------------|-------------------------|--------------------------------------------------------------------------------------------|
209
- | `initialCountry` | `CountryCode \| 'auto'` | `'US'` | Starting country. `'auto'` uses geoIp stub (`US` by default). |
210
- | `preferredCountries` | `CountryCode[]` | `['US','GB']` | Pin these at the top. |
211
- | `onlyCountries` | `CountryCode[]` | — | Limit selectable countries. |
212
- | `nationalMode` | `boolean` | `false` | If `true`, **display** national format in the input. Value still emits E.164. |
213
- | `separateDialCode` | `boolean` | `false` | Show dial code outside the input. |
214
- | `allowDropdown` | `boolean` | `true` | Enable/disable dropdown. |
215
- | `placeholder` | `string` | `'Enter phone number'` | Input placeholder. |
216
- | `autocomplete` | `string` | `'tel'` | Native autocomplete. |
217
- | `disabled` | `boolean` | `false` | Disable the control. |
218
- | `label` | `string` | — | Optional floating label text. |
219
- | `hint` | `string` | — | Helper text below the control. |
220
- | `errorText` | `string` | — | Custom error text. |
221
- | `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Control height/typography. |
222
- | `variant` | `'outline' \| 'filled' \| 'underline'` | `'outline'` | Visual variant. |
223
- | `showClear` | `boolean` | `true` | Show a clear (×) button when not empty. |
224
- | `autoFocus` | `boolean` | `false` | Focus on init. |
225
- | `selectOnFocus` | `boolean` | `false` | Select all text on focus. |
226
- | `formatOnBlur` | `boolean` | `true` | Pretty‑print on blur (national if `nationalMode`). |
227
- | `showErrorWhenTouched` | `boolean` | `true` | Show error styles only after blur. |
228
- | `dropdownAttachToBody` | `boolean` | `true` | Attach dropdown to `<body>` (avoids clipping/overflow). |
229
- | `dropdownZIndex` | `number` | `2000` | Z‑index for dropdown panel. |
230
- | `i18n` | `IntlTelI18n` | — | Localize dropdown/search/ARIA labels. |
231
- | `localizedCountries` | `Partial<Record<CountryCode, string>>` | — | Override country display names (ISO-2 keys). |
232
- | `dir` | `'ltr' \| 'rtl'` | `'ltr'` | Text direction for the control. |
233
- | `autoPlaceholder` | `'off' \| 'polite' \| 'aggressive'` | `'polite'` | Example placeholders. Requires `utilsScript` unless `off`. |
234
- | `utilsScript` | `string` | — | Path/URL to `utils.js` (needed for example placeholders). |
235
- | `customPlaceholder` | `(example: string, country: any) => string` | — | Transform the example placeholder. |
236
- | `clearAriaLabel` | `string` | `'Clear phone number'` | ARIA label for the clear button. |
208
+ | Name | Type | Default | Description |
209
+ |------------------------|---------------------------------------------|-------------------------|-------------------------------------------------------------------------------|
210
+ | `initialCountry` | `CountryCode \| 'auto'` | `'US'` | Starting country. `'auto'` uses geoIp stub (`US` by default). |
211
+ | `preferredCountries` | `CountryCode[]` | `['US','GB']` | Pin these at the top. |
212
+ | `onlyCountries` | `CountryCode[]` | — | Limit selectable countries. |
213
+ | `nationalMode` | `boolean` | `false` | If `true`, **display** national format in the input. Value still emits E.164. |
214
+ | `separateDialCode` | `boolean` | `false` | Show dial code outside the input. |
215
+ | `allowDropdown` | `boolean` | `true` | Enable/disable dropdown. |
216
+ | `placeholder` | `string` | `'Enter phone number'` | Input placeholder. |
217
+ | `autocomplete` | `string` | `'tel'` | Native autocomplete. |
218
+ | `disabled` | `boolean` | `false` | Disable the control. |
219
+ | `label` | `string` | — | Optional floating label text. |
220
+ | `hint` | `string` | — | Helper text below the control. |
221
+ | `errorText` | `string` | — | Custom error text. |
222
+ | `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Control height/typography. |
223
+ | `variant` | `'outline' \| 'filled' \| 'underline'` | `'outline'` | Visual variant. |
224
+ | `showClear` | `boolean` | `true` | Show a clear (×) button when not empty. |
225
+ | `autoFocus` | `boolean` | `false` | Focus on init. |
226
+ | `selectOnFocus` | `boolean` | `false` | Select all text on focus. |
227
+ | `formatOnBlur` | `boolean` | `true` | Pretty‑print on blur (national if `nationalMode`). |
228
+ | `showErrorWhenTouched` | `boolean` | `true` | Show error styles only after blur. |
229
+ | `dropdownAttachToBody` | `boolean` | `true` | Attach dropdown to `<body>` (avoids clipping/overflow). |
230
+ | `dropdownZIndex` | `number` | `2000` | Z‑index for dropdown panel. |
231
+ | `i18n` | `IntlTelI18n` | — | Localize dropdown/search/ARIA labels. |
232
+ | `localizedCountries` | `Partial<Record<CountryCode, string>>` | — | Override country display names (ISO-2 keys). |
233
+ | `dir` | `'ltr' \| 'rtl'` | `'ltr'` | Text direction for the control. |
234
+ | `autoPlaceholder` | `'off' \| 'polite' \| 'aggressive'` | `'polite'` | Example placeholders. Requires `utilsScript` unless `off`. |
235
+ | `utilsScript` | `string` | — | Path/URL to `utils.js` (needed for example placeholders). |
236
+ | `customPlaceholder` | `(example: string, country: any) => string` | — | Transform the example placeholder. |
237
+ | `clearAriaLabel` | `string` | `'Clear phone number'` | ARIA label for the clear button. |
237
238
  | `lockWhenValid` | `boolean` | `true` | Prevent appending extra digits once the number is valid (editing/replacing still allowed). |
238
239
 
239
240
  > `CountryCode` is the ISO‑2 uppercase code from `libphonenumber-js` (e.g. `US`, `GB`).
@@ -265,7 +266,6 @@ For rare patterns not covered by libphonenumber-js, the control falls back to ra
265
266
 
266
267
  ---
267
268
 
268
-
269
269
  ## 🎨 Theming (CSS variables)
270
270
 
271
271
  Override on the element or a parent container:
@@ -296,10 +296,30 @@ Dark mode: wrap in a `.dark` parent — tokens adapt automatically.
296
296
 
297
297
  <div class="error" *ngIf="fg.get('phone')?.hasError('required')">Phone is required</div>
298
298
  <div class="error" *ngIf="fg.get('phone')?.hasError('phoneInvalid')">Please enter a valid phone number</div>
299
+ <div class="error" *ngIf="fg.get('phone')?.hasError('phoneInvalidCountryCode')">Invalid country code</div>
299
300
  ```
300
301
 
302
+ ### Enhanced Validation Features
303
+
304
+ The component now includes enhanced validation that detects and handles various invalid phone number scenarios:
305
+
306
+ #### **Invalid Country Code Detection**
307
+ - **Input**: `"1123456789"` or `"99123456789"`
308
+ - **Error**: `phoneInvalidCountryCode`
309
+ - **Reason**: "11" and "99" are not valid country codes
310
+
311
+ #### **Valid Country Code, Invalid Number**
312
+ - **Input**: `"+9111023533"` (India country code, Delhi area code, but incomplete subscriber number)
313
+ - **Error**: `phoneInvalid`
314
+ - **Reason**: Valid country/area codes but invalid number format
315
+
316
+ #### **Valid Numbers**
317
+ - **Input**: `"+12025551234"` (US), `"+442071234567"` (UK), `"+91112345678"` (India)
318
+ - **Status**: Valid
319
+ - **Output**: E.164 format string
320
+
301
321
  * When **valid** → control value = **E.164** string
302
- * When **invalid/empty** → value = **null**, and validator sets `{ phoneInvalid: true }`
322
+ * When **invalid/empty** → value = **null**, and validator sets appropriate error type
303
323
 
304
324
  > Need national string instead of E.164? Use `(inputChange)` and store `raw`/`national` yourself, or adapt the emitter to output national.
305
325