ngxsmk-tel-input 0.0.3 → 0.0.5

package/.editorconfig

@@ -0,0 +1,17 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+ij_typescript_use_double_quotes = false
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

package/.vscode/extensions.json

@@ -0,0 +1,4 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
+  "recommendations": ["angular.ng-template"]
+}

package/.vscode/launch.json

@@ -0,0 +1,20 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "ng serve",
+      "type": "chrome",
+      "request": "launch",
+      "preLaunchTask": "npm: start",
+      "url": "http://localhost:4200/"
+    },
+    {
+      "name": "ng test",
+      "type": "chrome",
+      "request": "launch",
+      "preLaunchTask": "npm: test",
+      "url": "http://localhost:9876/debug.html"
+    }
+  ]
+}

package/.vscode/tasks.json

@@ -0,0 +1,42 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "type": "npm",
+      "script": "start",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "typescript",
+        "pattern": "$tsc",
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": {
+            "regexp": "(.*?)"
+          },
+          "endsPattern": {
+            "regexp": "bundle generation complete"
+          }
+        }
+      }
+    },
+    {
+      "type": "npm",
+      "script": "test",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "typescript",
+        "pattern": "$tsc",
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": {
+            "regexp": "(.*?)"
+          },
+          "endsPattern": {
+            "regexp": "bundle generation complete"
+          }
+        }
+      }
+    }
+  ]
+}

package/README.md

@@ -1,63 +1,295 @@
-# ngxsmkTelInput
+# ngxsmk-tel-input
 
-This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 19.2.0.
+An Angular **telephone input** component with country dropdown, flag icons, and robust validation/formatting.
+Wraps [`intl-tel-input`](https://github.com/jackocnr/intl-tel-input) for UI and uses [`libphonenumber-js`](https://github.com/catamphetamine/libphonenumber-js) for parsing & validation. Implements `ControlValueAccessor` so it plugs right into Angular Forms.
 
-## Code scaffolding
+> Emits E.164 numbers by default (e.g., `+14155550123`). SSR-safe via lazy imports.
 
-Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
+---
+
+## Features
+
+* ✅ Country dropdown with flags
+* ✅ E.164 output (configurable for national numbers)
+* ✅ Works with Reactive/Template-driven Forms (`ControlValueAccessor`)
+* ✅ Built-in validation (uses `libphonenumber-js`)
+* ✅ SSR-friendly (lazy `intl-tel-input` import)
+* ✅ Tiny API surface, easy to theme
+
+---
+
+## Requirements
+
+* Angular **17+**
+* Node **18+** / **20+**
+
+---
+
+## Install
 
 ```bash
-ng generate component component-name
+# your app
+npm i ngxsmk-tel-input intl-tel-input libphonenumber-js
 ```
 
-For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
+### Add styles & assets
 
-```bash
-ng generate --help
+`intl-tel-input` ships its own CSS and flag images. Add them to your app’s `angular.json`:
+
+```jsonc
+{
+  "projects": {
+    "your-app": {
+      "architect": {
+        "build": {
+          "options": {
+            "styles": [
+              "node_modules/intl-tel-input/build/css/intlTelInput.css"
+            ],
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "node_modules/intl-tel-input/build/img",
+                "output": "assets/intl-tel-input/img"
+              }
+            ]
+          }
+        }
+      }
+    }
+  }
+}
 ```
 
-## Building
+> If you use a custom builder, copy the flags folder to `/assets/intl-tel-input/img`.
 
-To build the library, run:
+---
 
-```bash
-ng build ngxsmk-tel-input
+## Quick start (Reactive Forms)
+
+```ts
+// app.component.ts
+import { Component } from '@angular/core';
+import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
+import { TelInputComponent } from 'ngxsmk-tel-input';
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [ReactiveFormsModule, TelInputComponent],
+  template: `
+    <form [formGroup]="fg" class="space-y-3">
+      <label for="phone">Phone</label>
+      <ngxsmk-tel-input
+        id="phone"
+        formControlName="phone"
+        [initialCountry]="'US'"
+        [preferredCountries]="['US','GB','AU']"
+        (countryChange)="onCountry($event)">
+      </ngxsmk-tel-input>
+
+      <p *ngIf="fg.get('phone')?.hasError('phoneInvalid') && fg.get('phone')?.touched">
+        Please enter a valid phone number.
+      </p>
+
+      <pre>Value: {{ fg.value | json }}</pre>
+    </form>
+  `
+})
+export class AppComponent {
+  fg = this.fb.group({
+    phone: ['', Validators.required] // control value will be E.164 string or null
+  });
+  constructor(private fb: FormBuilder) {}
+  onCountry(e: { iso2: any }) { console.log('Country changed:', e.iso2); }
+}
+```
+
+**Result:** `form.get('phone')?.value` → `'+14155550123'` (E.164) when valid, or `null` while empty/invalid.
+
+---
+
+## Template-driven usage
+
+```html
+<form #f="ngForm">
+  <ngxsmk-tel-input name="phone" [(ngModel)]="phone"></ngxsmk-tel-input>
+</form>
+
+<!-- phone is a string (E.164) or null -->
+```
+
+---
+
+## API
+
+### Inputs
+
+| Name                 | Type                    | Default                | Description                                         |
+| -------------------- | ----------------------- | ---------------------- | --------------------------------------------------- |
+| `initialCountry`     | `CountryCode \| 'auto'` | `'auto'`               | Starting country. `'auto'` uses the plugin default. |
+| `preferredCountries` | `CountryCode[]`         | `['US','GB']`          | Pinned countries at the top.                        |
+| `onlyCountries`      | `CountryCode[]`         | `undefined`            | Restrict selectable countries.                      |
+| `nationalMode`       | `boolean`               | `false`                | If `true`, emits national numbers; otherwise E.164. |
+| `placeholder`        | `string`                | `'Enter phone number'` | Input placeholder.                                  |
+| `autocomplete`       | `string`                | `'tel'`                | Native autocomplete attribute.                      |
+| `disabled`           | `boolean`               | `false`                | Disables the input.                                 |
+
+> `CountryCode` is the ISO-2 uppercase code from `libphonenumber-js` (e.g., `US`, `GB`, `AU`).
+
+### Outputs
+
+| Event           | Payload                 | Description                              |
+| --------------- | ----------------------- | ---------------------------------------- |
+| `countryChange` | `{ iso2: CountryCode }` | Fires when the selected country changes. |
+
+### Value semantics
+
+* **When valid:** emits **E.164** string (e.g., `+33123456789`) unless `nationalMode` is `true`.
+* **When empty or invalid:** emits `null`.
+* **Validation:** adds `phoneInvalid` error key when the input cannot be parsed as a valid number for the selected country.
+
+---
+
+## Validation examples
+
+```html
+<ngxsmk-tel-input formControlName="phone"></ngxsmk-tel-input>
+
+<div class="error" *ngIf="fg.get('phone')?.hasError('required')">
+  Phone is required
+</div>
+<div class="error" *ngIf="fg.get('phone')?.hasError('phoneInvalid')">
+  Please enter a valid phone number
+</div>
 ```
 
-This command will compile your project, and the build artifacts will be placed in the `dist/` directory.
+---
 
-### Publishing the Library
+## Accessibility
 
-Once the project is built, you can publish your library by following these steps:
+* Pair with a `<label for="phone">` or wrap the input and label together.
+* The country dropdown is keyboard navigable (via `intl-tel-input`).
+* Consider additional ARIA attributes if you customize the template.
 
-1. Navigate to the `dist` directory:
-   ```bash
-   cd dist/ngxsmk-tel-input
-   ```
+---
 
-2. Run the `npm publish` command to publish your library to the npm registry:
-   ```bash
-   npm publish
-   ```
+## Theming
 
-## Running unit tests
+The component applies a minimal class to the input: `.ngxsmk-tel-input`.
+You can style it or the `intl-tel-input` container globally:
 
-To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
+```css
+.ngxsmk-tel-input {
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+}
+
+.iti {
+  width: 100%; /* make dropdown stretch */
+}
+```
+
+---
+
+## SSR notes
+
+This library lazily imports `intl-tel-input` **only in the browser**.
+No special setup required for Angular Universal. If you still see SSR errors, ensure you’re not referencing `window` in your own wrappers.
+
+---
+
+## Troubleshooting
+
+* **No flags / broken images**
+  Ensure `angular.json` asset mapping is present and that the output path matches your app’s `/assets` directory.
+
+* **Styles not applied**
+  Add `"node_modules/intl-tel-input/build/css/intlTelInput.css"` to the `styles` array in `angular.json`.
+
+* **Form value doesn’t update**
+  Use Angular Forms APIs (Reactive or Template-driven). For Reactive Forms, confirm the control is bound via `formControlName` and that `ReactiveFormsModule` is imported.
+
+* **Always invalid**
+  Some numbers are only valid with the correct country selected. Try typing with the `+` international prefix or set `initialCountry` appropriately.
+
+---
+
+## Example: national mode
+
+```html
+<ngxsmk-tel-input formControlName="phone" [nationalMode]="true" [initialCountry]="'GB'"></ngxsmk-tel-input>
+<!-- Value will be a national format string like '020 7946 0958' with validation tied to the selected country -->
+```
+
+> When using `nationalMode=true`, you’ll typically store the country code alongside the value, using `(countryChange)`.
+
+---
+
+## Development
+
+This repo is structured as an Angular workspace with a library:
 
 ```bash
-ng test
+# Build the library
+ng build ngxsmk-tel-input
+
+# (Optional) create a demo app and try it locally
+ng g application demo
+# import TelInputComponent in your demo app and test
 ```
 
-## Running end-to-end tests
+---
 
-For end-to-end (e2e) testing, run:
+## Publish
 
 ```bash
-ng e2e
+# Bump version, then:
+ng build ngxsmk-tel-input
+cd dist/ngxsmk-tel-input
+npm publish --access public
 ```
 
-Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
+> Ensure `peerDependencies` in the library’s `package.json` reflect your Angular support range.
+
+---
+
+## Contributing
+
+PRs welcome! Please:
+
+1. Run `npm ci` and `ng build`.
+2. Add/adjust unit or e2e tests if you change behavior.
+3. Update this README for any API changes.
 
-## Additional Resources
+---
 
-For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
+## License
+
+[MIT](./LICENSE)
+
+---
+
+## Credits
+
+* UI powered by [`intl-tel-input`](https://github.com/jackocnr/intl-tel-input)
+* Parsing/validation by [`libphonenumber-js`](https://github.com/catamphetamine/libphonenumber-js)
+
+---
+
+### Appendix: `angular.json` snippet (copy-paste)
+
+```jsonc
+{
+  "styles": [
+    "node_modules/intl-tel-input/build/css/intlTelInput.css"
+  ],
+  "assets": [
+    {
+      "glob": "**/*",
+      "input": "node_modules/intl-tel-input/build/img",
+      "output": "assets/intl-tel-input/img"
+    }
+  ]
+}
+```

package/angular.json

@@ -0,0 +1,40 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "ngxsmk-tel-input": {
+      "projectType": "library",
+      "root": "projects/ngxsmk-tel-input",
+      "sourceRoot": "projects/ngxsmk-tel-input/src",
+      "prefix": "lib",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:ng-packagr",
+          "options": {
+            "project": "projects/ngxsmk-tel-input/ng-package.json"
+          },
+          "configurations": {
+            "production": {
+              "tsConfig": "projects/ngxsmk-tel-input/tsconfig.lib.prod.json"
+            },
+            "development": {
+              "tsConfig": "projects/ngxsmk-tel-input/tsconfig.lib.json"
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "tsConfig": "projects/ngxsmk-tel-input/tsconfig.spec.json",
+            "polyfills": [
+              "zone.js",
+              "zone.js/testing"
+            ]
+          }
+        }
+      }
+    }
+  }
+}

package/package.json

@@ -1,23 +1,68 @@
-{
-  "name": "ngxsmk-tel-input",
-  "version": "0.0.3",
-  "peerDependencies": {
-    "@angular/common": "^19.2.0",
-    "@angular/core": "^19.2.0"
-  },
-  "dependencies": {
-    "tslib": "^2.3.0"
-  },
-  "sideEffects": false,
-  "module": "fesm2022/ngxsmk-tel-input.mjs",
-  "typings": "index.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "default": "./fesm2022/ngxsmk-tel-input.mjs"
-    }
-  }
-}
+{
+  "name": "ngxsmk-tel-input",
+  "version": "0.0.5",
+  "description": "Angular telephone input with intl-tel-input + libphonenumber-js",
+  "license": "MIT",
+  "author": {
+    "name": "Sachin Dilshan",
+    "email": "sachindilshan040@gmail.com",
+    "url": "https://github.com/toozuuu"
+  },
+  "keywords": [
+    "angular",
+    "telephone",
+    "phone",
+    "intl-tel-input",
+    "libphonenumber",
+    "forms",
+    "controlvalueaccessor"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/toozuuu/ngxsmk-tel-input.git"
+  },
+  "bugs": {
+    "url": "https://github.com/toozuuu/ngxsmk-tel-input/issues"
+  },
+  "homepage": "https://github.com/toozuuu/ngxsmk-tel-input#readme",
+  "private": false,
+  "sideEffects": false,
+  "publishConfig": { "access": "public" },
+
+  "peerDependencies": {
+    "@angular/core": ">=17",
+    "@angular/common": ">=17",
+    "@angular/forms": ">=17",
+    "rxjs": ">=7.8.0"
+  },
+
+  "dependencies": {
+    "intl-tel-input": "^25.3.2",
+    "libphonenumber-js": "^1.12.10",
+    "tslib": "^2.3.0"
+  },
+
+  "devDependencies": {
+    "@angular-devkit/build-angular": "^19.2.15",
+    "@angular/cli": "^19.2.8",
+    "@angular/compiler": "^19.2.0",
+    "@angular/compiler-cli": "^19.2.0",
+    "@types/intl-tel-input": "^18.1.4",
+    "ng-packagr": "^19.2.0",
+    "typescript": "~5.7.2",
+    "zone.js": "~0.15.0",
+    "@types/jasmine": "~5.1.0",
+    "jasmine-core": "~5.6.0",
+    "karma": "~6.4.0",
+    "karma-chrome-launcher": "~3.2.0",
+    "karma-coverage": "~2.2.0",
+    "karma-jasmine": "~5.1.0",
+    "karma-jasmine-html-reporter": "~2.1.0"
+  },
+
+  "scripts": {
+    "build": "ng build ngxsmk-tel-input",
+    "watch": "ng build ngxsmk-tel-input --watch --configuration development",
+    "test": "ng test"
+  }
+}

package/projects/ngxsmk-tel-input/README.md

@@ -0,0 +1,63 @@
+# ngxsmkTelInput
+
+This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 19.2.0.
+
+## Code scaffolding
+
+Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
+
+```bash
+ng generate component component-name
+```
+
+For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
+
+```bash
+ng generate --help
+```
+
+## Building
+
+To build the library, run:
+
+```bash
+ng build ngxsmk-tel-input
+```
+
+This command will compile your project, and the build artifacts will be placed in the `dist/` directory.
+
+### Publishing the Library
+
+Once the project is built, you can publish your library by following these steps:
+
+1. Navigate to the `dist` directory:
+   ```bash
+   cd dist/ngxsmk-tel-input
+   ```
+
+2. Run the `npm publish` command to publish your library to the npm registry:
+   ```bash
+   npm publish
+   ```
+
+## Running unit tests
+
+To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
+
+```bash
+ng test
+```
+
+## Running end-to-end tests
+
+For end-to-end (e2e) testing, run:
+
+```bash
+ng e2e
+```
+
+Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
+
+## Additional Resources
+
+For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.

package/projects/ngxsmk-tel-input/dist/README.md

@@ -0,0 +1,63 @@
+# ngxsmkTelInput
+
+This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 19.2.0.
+
+## Code scaffolding
+
+Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
+
+```bash
+ng generate component component-name
+```
+
+For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
+
+```bash
+ng generate --help
+```
+
+## Building
+
+To build the library, run:
+
+```bash
+ng build ngxsmk-tel-input
+```
+
+This command will compile your project, and the build artifacts will be placed in the `dist/` directory.
+
+### Publishing the Library
+
+Once the project is built, you can publish your library by following these steps:
+
+1. Navigate to the `dist` directory:
+   ```bash
+   cd dist/ngxsmk-tel-input
+   ```
+
+2. Run the `npm publish` command to publish your library to the npm registry:
+   ```bash
+   npm publish
+   ```
+
+## Running unit tests
+
+To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
+
+```bash
+ng test
+```
+
+## Running end-to-end tests
+
+For end-to-end (e2e) testing, run:
+
+```bash
+ng e2e
+```
+
+Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
+
+## Additional Resources
+
+For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.