NGXSMK
diff --git a/‎.github/workflows/ci.yml‎
Lines changed: 37 additions & 0 deletions b/‎.github/workflows/ci.yml‎
Lines changed: 37 additions & 0 deletions
diff --git a/‎.github/workflows/deploy-demo.yml‎
Lines changed: 3 additions & 0 deletions b/‎.github/workflows/deploy-demo.yml‎
Lines changed: 3 additions & 0 deletions
diff --git a/‎.github/workflows/publish.yml‎
Lines changed: 1 addition & 0 deletions b/‎.github/workflows/publish.yml‎
Lines changed: 1 addition & 0 deletions
diff --git a/‎CHANGELOG.md‎
Lines changed: 10 additions & 6 deletions b/‎CHANGELOG.md‎
Lines changed: 10 additions & 6 deletions
diff --git a/‎CONTRIBUTING.md‎
Lines changed: 4 additions & 4 deletions b/‎CONTRIBUTING.md‎
Lines changed: 4 additions & 4 deletions
diff --git a/‎README.md‎
Lines changed: 40 additions & 47 deletions b/‎README.md‎
Lines changed: 40 additions & 47 deletions
diff --git a/‎SECURITY.md‎
Lines changed: 2 additions & 2 deletions b/‎SECURITY.md‎
Lines changed: 2 additions & 2 deletions
diff --git a/‎package-lock.json‎
Lines changed: 2 additions & 2 deletions b/‎package-lock.json‎
Lines changed: 2 additions & 2 deletions
@@ -0,0 +1,37 @@
+name: CI
+
+on:
+  pull_request:
+    branches: [main, master]
+  push:
+    branches: [main, master]
+
+permissions:
+  contents: read
+
+jobs:
+  library:
+    name: Library Build and Tests
+    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        node-version: [18, 20]
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v5
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: npm
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build library
+        run: npx ng build ngxsmk-tel-input --configuration production
+
+      - name: Run library tests
+        run: npx ng test ngxsmk-tel-input --watch=false --browsers=ChromeHeadless
@@ -35,6 +35,9 @@ jobs:
       - name: Build library
         run: npx ng build ngxsmk-tel-input --configuration production
 
+      - name: Run library tests
+        run: npx ng test ngxsmk-tel-input --watch=false --browsers=ChromeHeadless
+
       - name: Build demo
         run: |
           REPO_NAME=${GITHUB_REPOSITORY#*/}
 
@@ -21,6 +21,7 @@ jobs:
           registry-url: 'https://registry.npmjs.org'
 
       - run: npm ci
+      - run: npx ng test ngxsmk-tel-input --watch=false --browsers=ChromeHeadless
       - run: npx ng build ngxsmk-tel-input --configuration production
 
       - name: Publish to npm (with provenance)
 
@@ -7,20 +7,24 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
-## [1.6.11] - 2026-05-01
+### Added
+- **excludeCountries / excludeCountriesSignal**: Exclude specific country ISO codes from appearing in the dropdown list.
+- **searchPlaceholder / searchPlaceholderSignal**: Customizable placeholder text for the country search input.
+- **showFlags / showFlagsSignal**: Hides flags completely from the selected input and country dropdown.
+- **searchCountryFlag / searchCountryFlagSignal**: Hides flag icons only within the dropdown list items while maintaining the selected flag display.
 
-### Changed
-- Bumped stable/current package version references across workspace to `1.6.11`.
+---
 
-## [1.6.10] - 2026-01-19
+## [1.7.0] - 2026-06-06
 
 ### Changed
-- **Dependencies**: Updated `intl-tel-input` to version 25 compatibility.
-- **Internal**: Migrated `preferredCountries` to `countryOrder` to support `intl-tel-input` v25.
 - **Example Components**: All example components (E-commerce Checkout, User Registration, Profile Management) now default to dark mode theme
 - **Demo App**: Default theme changed to dark mode for better visibility and consistency
 - **Navigation UI**: Fixed icon and text colors in dark mode navigation menu for better contrast and readability
 
+### Fixed
+- **Invalid Country Code False Positive**: Fixed `isInvalidInternationalNumber()` incorrectly flagging valid international numbers whose country code starts with a single-digit prefix that is itself not a country code (e.g. Greece `+30`, France `+33`, Germany `+49`, Australia `+61`, India `+91`). The loop now continues through all 1–3 digit prefix candidates and only flags a number as invalid if none of them produce a valid parse, rather than short-circuiting on the first failure. Non-`+` prefixed (national-format) inputs are also no longer passed through the loop at all.
+
 ## [1.6.9] - 2025-01-21
 
 ### Added
 
@@ -6,15 +6,15 @@ By participating in this project, you are expected to uphold the project's goals
 
 ---
 
-##  How to Contribute
+## How to Contribute
 
 There are several ways you can help improve this project:
 
 1.  **Report Bugs:** Submit an issue if you find a problem.
 2.  **Suggest Features:** Open an issue to propose new functionality.
 3.  **Contribute Code:** Submit a Pull Request with bug fixes or new features.
 
-##  Reporting Bugs
+## Reporting Bugs
 
 If you find a bug, please check the [Issues page](https://github.com/toozuuu/ngxsmk-tel-input/issues) to see if it has already been reported.
 
@@ -24,13 +24,13 @@ When submitting a new bug report, please include:
 * Your **Angular version** and the **browser** you are using.
 * A minimal reproduction link (e.g., CodePen, JSFiddle) if possible.
 
-##  Suggesting Enhancements
+## Suggesting Enhancements
 
 If you have an idea for a new feature or an enhancement, please open a new issue on the [Issues page](https://github.com/toozuuu/ngxsmk-tel-input/issues).
 
 Describe the feature, why you think it would be useful, and how it aligns with the goals of the library.
 
-##  Code Contributions (Pull Requests)
+## Code Contributions (Pull Requests)
 
 We welcome pull requests for bug fixes and new features.
 
 
@@ -1,65 +1,57 @@
 # ngxsmk-tel-input
 
-An Angular **phone input / telephone input** component with country dropdown, flags, international formatting, and robust validation.
-Built on top of [`intl-tel-input`](https://github.com/jackocnr/intl-tel-input) + [`libphonenumber-js`](https://github.com/catamphetamine/libphonenumber-js), and fully compatible with Angular Reactive Forms and template-driven forms through `ControlValueAccessor`.
+An Angular **telephone input** component with country dropdown, flags, and robust validation/formatting.
+Wraps [`intl-tel-input`](https://github.com/jackocnr/intl-tel-input) for the UI and [`libphonenumber-js`](https://github.com/catamphetamine/libphonenumber-js) for parsing/validation. Implements `ControlValueAccessor` so it plugs into Angular Forms.
 
 > Emits **E.164** by default (e.g. `+14155550123`). SSR‑safe via lazy browser‑only import.
 
-##  Try it live on StackBlitz
+## Try it live on StackBlitz
 
 [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/~/github.com/toozuuu/ngxsmk-tel-input)
 
 ---
 
-##  Features
+## Features
 
 * Country dropdown with flags
-* E.164 output (display can be national with `nationalMode`)
+* E.164 output (display can be configured via `nationalDisplay`)
 * Reactive & template‑driven Forms support (CVA)
 * Built‑in validation using libphonenumber‑js
 * **Enhanced validation**: Detects invalid country codes (like "11", "99") and shows appropriate error states
 * **Mobile responsive**: Optimized for touch devices with proper tap targets, prevents iOS zoom, and responsive dropdown
-* **Dark & Light themes**: Improved dark-mode contrast, consistent code/readout colors, and automatic system preference detection
+* **Dark & Light themes**: Comprehensive theme system with automatic system preference detection
 * **Accessibility**: Full ARIA support, screen reader compatibility, keyboard navigation
+* **Integrations & Ionic ready**: Built-in support for Twilio, Vonage, AWS SNS, and Ionic Framework overlays/themes (see [INTEGRATIONS.md](./projects/ngxsmk-tel-input/INTEGRATIONS.md))
 * SSR‑friendly (no `window` on the server)
 * Easy theming via CSS variables
 * Nice UX options: label/hint/error text, sizes, variants, clear button, autofocus, select-on-focus
 * Masking & caret-friendly as-you-type formatting (optional)
 * Format only when valid (formatWhenValid) and lock once valid (lockWhenValid) to prevent extra digits
 
-### Demo app highlights
-
-The workspace demo (`ng serve demo`) now includes:
-
-* polished documentation-style layout with improved spacing and visual hierarchy
-* responsive sidebar/header behavior for mobile and desktop
-* cleaner dark-mode palette with better text/background contrast
-* improved focus states and reduced-motion support for accessibility
-
 ---
 
-##  Requirements
+## Requirements
 
-* Angular **17+** (17, 18, 19, 20, 21+)
+* Angular **17+** (actively tested on Angular 19)
 * Node **18** or **20**
 
-> Library `peerDependencies` target Angular `>=17`. Fully compatible with Angular 17, 18, 19, 20, 21, and future versions.
+> Library `peerDependencies` target Angular `>=17`.
 
-###  Zone.js Compatibility
+### Zone.js Compatibility
 
 This component works seamlessly with **both Zone.js and zoneless Angular**:
 
-*  **With Zone.js** (traditional Angular): Full compatibility
-*  **Without Zone.js** (Angular 18+ zoneless): Full compatibility
-*  **All data binding types**: Property bindings, event bindings, two-way bindings
-*  **Reactive Forms & Template-driven Forms**: Full support
-*  **Signals**: Compatible with Angular signals (Angular 16+)
+* **With Zone.js** (traditional Angular): Full compatibility
+* **Without Zone.js** (Angular 18+ zoneless): Full compatibility
+* **All data binding types**: Property bindings, event bindings, two-way bindings
+* **Reactive Forms & Template-driven Forms**: Full support
+* **Signals**: Compatible with Angular signals (Angular 16+)
 
 The component automatically detects whether Zone.js is available and adapts its change detection strategy accordingly.
 
 ---
 
-##  Install
+## Install
 
 ```bash
 npm i ngxsmk-tel-input intl-tel-input libphonenumber-js
@@ -119,7 +111,7 @@ Ensure your app includes a proper viewport meta tag:
 
 ---
 
-##  Quick start (Reactive Forms)
+## Quick start (Reactive Forms)
 
 ```ts
 // app.component.ts
@@ -180,7 +172,7 @@ export class AppComponent {
 
 ---
 
-##  Template‑driven usage
+## Template‑driven usage
 
 ```html
 <form #f="ngForm">
@@ -191,7 +183,7 @@ export class AppComponent {
 
 ---
 
-##  Localization & RTL
+## Localization & RTL
 
 You can localize the dropdown/search labels and override country names.
 
@@ -241,19 +233,23 @@ Arabic + RTL example
 ```
 
 
-## ️ API
+## API
 
 ### Inputs
 
 | Name                   | Type                                        | Default                 | Description                                                                                |
 |------------------------|---------------------------------------------|-------------------------|--------------------------------------------------------------------------------------------|
-| `initialCountry`       | `CountryCode \| 'auto'`                     | `'US'`                  | Starting country. `'auto'` uses geoIp stub (`US` by default).                              |
+| `initialCountry`       | `CountryCode \| 'auto'`                     | `'US'`                  | Starting country (also respected when initial form value is `''`). `'auto'` uses geoIp stub (`US` by default). |
 | `preferredCountries`   | `CountryCode[]`                             | `['US','GB']`           | Pin these at the top.                                                                      |
 | `onlyCountries`        | `CountryCode[]`                             | —                       | Limit selectable countries.                                                                |
-| `nationalMode`         | `boolean`                                   | `false`                 | If `true`, **display** national format in the input. Value still emits E.164.              |
-| `separateDialCode`     | `boolean`                                   | `false`                 | Show dial code outside the input.                                                          |
+| `excludeCountries`     | `CountryCode[]`                             | `[]`                    | Exclude specific countries from the dropdown list.                                         |
+| `searchPlaceholder`    | `string`                                    | `''`                    | Custom placeholder text for the dropdown search input.                                     |
+| `showFlags`            | `boolean`                                   | `true`                  | Hide flags completely for minimalist/text-only layouts.                                    |
+| `searchCountryFlag`    | `boolean`                                   | `true`                  | Hide flag icons inside the country dropdown list.                                          |
+| `nationalDisplay`      | `'formatted' \| 'digits'`                   | `'formatted'`           | Controls visible input format. Value still emits E.164.                                   |
+| `separateDialCode`     | `boolean`                                   | `true`                  | Show dial code outside the input.                                                          |
 | `allowDropdown`        | `boolean`                                   | `true`                  | Enable/disable dropdown.                                                                   |
-| `placeholder`          | `string`                                    | `'Enter phone number'`  | Input placeholder.                                                                         |
+| `placeholder`          | `string`                                    | —                       | Input placeholder.                                                                         |
 | `autocomplete`         | `string`                                    | `'tel'`                 | Native autocomplete.                                                                       |
 | `disabled`             | `boolean`                                   | `false`                 | Disable the control.                                                                       |
 | `label`                | `string`                                    | —                       | Optional floating label text.                                                              |
@@ -264,14 +260,14 @@ Arabic + RTL example
 | `showClear`            | `boolean`                                   | `true`                  | Show a clear (×) button when not empty.                                                    |
 | `autoFocus`            | `boolean`                                   | `false`                 | Focus on init.                                                                             |
 | `selectOnFocus`        | `boolean`                                   | `false`                 | Select all text on focus.                                                                  |
-| `formatOnBlur`         | `boolean`                                   | `true`                  | Pretty‑print on blur (national if `nationalMode`).                                         |
+| `formatWhenValid`      | `'off' \| 'blur' \| 'typing'`               | `'typing'`              | When to format the display value.                                                          |
 | `showErrorWhenTouched` | `boolean`                                   | `true`                  | Show error styles only after blur.                                                         |
 | `dropdownAttachToBody` | `boolean`                                   | `true`                  | Attach dropdown to `<body>` (avoids clipping/overflow).                                    |
 | `dropdownZIndex`       | `number`                                    | `2000`                  | Z‑index for dropdown panel.                                                                |
 | `i18n`                 | `IntlTelI18n`                               | —                       | Localize dropdown/search/ARIA labels.                                                      |
 | `localizedCountries`   | `Partial<Record<CountryCode, string>>`      | —                       | Override country display names (ISO-2 keys).                                               |
 | `dir`                  | `'ltr' \| 'rtl'`                            | `'ltr'`                 | Text direction for the control.                                                            |
-| `autoPlaceholder`      | `'off' \| 'polite' \| 'aggressive'`         | `'polite'`              | Example placeholders. Requires `utilsScript` unless `off`.                                 |
+| `autoPlaceholder`      | `'off' \| 'polite' \| 'aggressive'`         | `'off'`                 | Example placeholders. Requires `utilsScript` unless `off`.                                 |
 | `utilsScript`          | `string`                                    | —                       | Path/URL to `utils.js` (needed for example placeholders).                                  |
 | `customPlaceholder`    | `(example: string, country: any) => string` | —                       | Transform the example placeholder.                                                         |
 | `clearAriaLabel`       | `string`                                    | `'Clear phone number'`  | ARIA label for the clear button.                                                           |
@@ -287,18 +283,15 @@ Arabic + RTL example
 | `countryChange`  | `{ iso2: CountryCode }`                                    | Fired when selected country changes. |
 | `validityChange` | `boolean`                                                  | Fired when validity flips.           |
 | `inputChange`    | `{ raw: string; e164: string \| null; iso2: CountryCode }` | Emitted on every keystroke.          |
-| `ready`          | `void`                                                     | Emitted after plugin + listeners finish wiring (including each re-init cycle). |
 
 ### Public methods
 
 * `focus(): void`
 * `selectCountry(iso2: CountryCode): void`
 
-For deterministic first render behavior, prefer setting `[initialCountry]` directly. If you call imperative APIs like `selectCountry(...)` immediately after mount, wait for `(ready)` first.
-
 ---
 
-##  Formatting & validity behavior
+## Formatting & validity behavior
 
 * No formatting while invalid. As-you-type masking only starts when the digits form a valid number for the selected country.
 
@@ -311,7 +304,7 @@ For rare patterns not covered by libphonenumber-js, the control falls back to ra
 ---
 
 
-##  Theming
+## Theming
 
 ### CSS Variables
 
@@ -365,7 +358,7 @@ Dark mode: wrap in a `.dark` parent or use `[theme]="'dark'"` — tokens adapt a
 
 ---
 
-## ️ Validation patterns
+## Validation patterns
 
 ```html
 <ngxsmk-tel-input formControlName="phone"></ngxsmk-tel-input>
@@ -401,14 +394,14 @@ The component now includes enhanced validation that detects and handles various
 
 ---
 
-##  SSR notes
+## SSR notes
 
 * The library lazy‑imports `intl-tel-input` only in the **browser** (guards with `isPlatformBrowser`).
 * No `window`/`document` usage on the server path.
 
 ---
 
-##  Local development
+## Local development
 
 This repo is an Angular workspace with a library.
 
@@ -429,7 +422,7 @@ npm i ../path-to-workspace/dist/ngxsmk-tel-input/ngxsmk-tel-input-<version>.tgz
 
 ---
 
-##  Troubleshooting
+## Troubleshooting
 
 **UI looks unstyled / bullets in dropdown**
 Add the CSS and assets in `angular.json` (see Install). Restart the dev server.
@@ -448,13 +441,13 @@ Clear `.angular/cache`, rebuild the lib, and restart `ng serve`.
 
 ---
 
-##  License
+## License
 
 [MIT](./LICENSE)
 
-##  Credits
+## 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)
 
-Last updated: 2026-05-01
+Last updated: 2025-01-21
@@ -12,8 +12,8 @@ Only the **latest version published on npm** is currently supported for security
 
 | Version on npm        | Security Fixes |
 |-----------------------|----------------|
-| latest (most recent)  |  Supported   |
-| anything older        |  Unsupported |
+| latest (most recent)  | Supported      |
+| anything older        | Unsupported    |
 
 **Note:** The library declares Angular peer deps `>=17 <20`. Using unsupported Angular versions may limit our ability to fix or reproduce issues.