ngxsmk-tel-input 0.0.5 → 0.0.7

package/README.md

@@ -1,295 +1,63 @@
-# ngxsmk-tel-input
+# ngxsmkTelInput
 
-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.
+This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 19.2.0.
 
-> Emits E.164 numbers by default (e.g., `+14155550123`). SSR-safe via lazy imports.
+## Code scaffolding
 
----
-
-## 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
+Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
 
 ```bash
-# your app
-npm i ngxsmk-tel-input intl-tel-input libphonenumber-js
-```
-
-### Add styles & assets
-
-`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"
-              }
-            ]
-          }
-        }
-      }
-    }
-  }
-}
+ng generate component component-name
 ```
 
-> If you use a custom builder, copy the flags folder to `/assets/intl-tel-input/img`.
-
----
-
-## 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
+For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
 
-```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>
+```bash
+ng generate --help
 ```
 
----
-
-## Accessibility
-
-* 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.
-
----
+## Building
 
-## Theming
+To build the library, run:
 
-The component applies a minimal class to the input: `.ngxsmk-tel-input`.
-You can style it or the `intl-tel-input` container globally:
-
-```css
-.ngxsmk-tel-input {
-  width: 100%;
-  padding: 0.5rem 0.75rem;
-}
-
-.iti {
-  width: 100%; /* make dropdown stretch */
-}
+```bash
+ng build ngxsmk-tel-input
 ```
 
----
-
-## 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.
+This command will compile your project, and the build artifacts will be placed in the `dist/` directory.
 
----
+### Publishing the Library
 
-## Example: national mode
+Once the project is built, you can publish your library by following these steps:
 
-```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)`.
+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
+   ```
 
-## Development
+## Running unit tests
 
-This repo is structured as an Angular workspace with a library:
+To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
 
 ```bash
-# 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
+ng test
 ```
 
----
+## Running end-to-end tests
 
-## Publish
+For end-to-end (e2e) testing, run:
 
 ```bash
-# Bump version, then:
-ng build ngxsmk-tel-input
-cd dist/ngxsmk-tel-input
-npm publish --access public
+ng e2e
 ```
 
-> 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.
+Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
 
----
+## Additional Resources
 
-## 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"
-    }
-  ]
-}
-```
+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.