` , _inline_ overlays inside the input , _off_ hides UI |
| `ui.statusIcon` | `"none" \| "icon" \| "pill"` | none / icon / pill | `"none"` | used **only** when `statusMode` is `inline` |
| `ui.showStatusText` | `boolean` | true / false | `blockโtrue` , `inlineโfalse` | short text in inline ; full text in block |
| `ui.iconPosition` | `"right" \| "left"` | right / left | `"right"` | icon position for inline |
| `ui.status` | `HTMLElement` ( optional ) | โ | auto created / derived | existing host for status when you do not use `wrapper` |
| `ui.button` / `dropdown` / `flagIcon` / `flagLabel` | `HTMLElement` ( optional ) | โ | auto created if `wrapper` | for re-using external DOM |
---
### Instance methods
```ts
type EuroPlateInstance = {
setCountry(code: "AUTO" | string): void; // alias of setMode
setMode(m: "AUTO" | string): void; // set fixed country or AUTO
setAllowed(codes: string[]): void; // dynamic whitelist
setVehicleType(t: "any" | "car" | "bike"): void;
setI18n(code: "AUTO" | "IT" | "EN"): void;
setDebug(on: boolean): void;
validate(): { ok: boolean; country?: string; value: string };
destroy(): void;
getI18n(): "it" | "en";
};
```
---
## ๐ผ๏ธ Usage examples
### A ) Quick start with a shared `common` config + autoload deps ( Inputmask , jQuery , Toastr )
```html
```
> Notes :
>
> - With `autoLoadDeps.jquery: true` and `autoLoadDeps.toastr: true` the client will fetch UMD builds from CDN when missing .
> - `useToastrLogger: true` sends SDK logs and validation notices to Toastr if it is present ( either auto-loaded or injected ) .
> - jQuery is **not** required by the core validator ; it is only pulled if your page / widgets rely on it .
---
### B ) You provide `Inputmask` manually ( UMD โ `window.Inputmask` )
```html
```
---
### C ) Autoload deps from CDN ( default , Inputmask only )
```html
```
---
### D ) Autoload ON with a custom CDN URL
```js
createEuroPlate(EuroMod, {
wrapper: "#plateBox",
cdn: { inputmask: "https://unpkg.com/inputmask@5.0.9/dist/inputmask.min.js" },
});
```
---
### E ) Disable autoload ( โno maskโ fallback , no error )
```js
createEuroPlate(EuroMod, {
wrapper: "#plateBox",
autoLoadDeps: { inputmask: false },
});
```
---
### F ) Attach to an existing input ( no auto-build )
```html
```
---
## ๐งฉ WordPress ( WP ) / Elementor
### 1 ) Enqueue CSS + init helper ( type = "module" )
```php
add_action('wp_enqueue_scripts', function () {
wp_register_script('epv-init', '', [], null, true);
wp_enqueue_style(
'epv-styles',
'https://cdn.jsdelivr.net/npm/@codecorn/euro-plate-validator@1.0.14/dist/assets/css/styles.css',
[],
'1.0.14'
);
add_filter('script_loader_tag', function ($tag, $handle) {
if ($handle === 'epv-init') {
return '';
}
return $tag;
}, 10, 2);
wp_enqueue_script('epv-init');
});
```
---
## โ๏ธ WordPress / Elementor integration
You can enqueue the CSS and auto-inject a `window.__epvInit` bootstrapper.
Then, create a shortcode to instantiate it dynamically inside Elementor.
Full example available in the [Italian README](./README_IT.md) โ _โWordPress (WP) / Elementorโ_ section.
---
## ๐งช CLI Tool
```bash
npx @codecorn/euro-plate-validator "AB 123 CD" --countries IT,FR,DE --type car --pretty
```
**Options:**
- `--countries` / `-c` โ comma-separated list of country codes
- `--type` / `-t` โ `car`, `motorcycle`, or `any`
- `--pretty` / `-p` โ human-readable output
Exit codes:
- `0` โ valid
- `1` โ invalid
- `2` โ bad arguments
---
## ๐ Supported Countries
๐ฎ๐น IT | ๐ฌ๐ง UK | ๐ฉ๐ช DE | ๐ซ๐ท FR | ๐ช๐ธ ES | ๐ต๐น PT | ๐ณ๐ฑ NL | ๐ง๐ช BE | ๐จ๐ญ CH | ๐ฆ๐น AT | ๐ฎ๐ช IE | ๐ฑ๐บ LU ๐ฉ๐ฐ DK | ๐ธ๐ช SE | ๐ณ๐ด NO | ๐ซ๐ฎ FI | ๐ต๐ฑ PL | ๐จ๐ฟ CZ | ๐ธ๐ฐ SK | ๐ญ๐บ HU | ๐ท๐ด RO | ๐ง๐ฌ BG | ๐ธ๐ฎ SI | ๐ญ๐ท HR | ๐ฌ๐ท GR ๐ฑ๐น LT | ๐ฑ๐ป LV | ๐ช๐ช EE | ๐บ๐ฆ UA
---
## ๐งพ Changelog (highlights)
### 1.0.14
- **Inputmask**
- Safe merge of `definitions` (no hard override of defaults).
- New **`L`** token (letter) accepts lowercase and forces **UPPERCASE** (`casing: "upper"`).
- Avoid redefining `A`/`9`; use `H` (IT) / `C` (ES) only when needed.
- `applyMaskNow` applied immediately on country change (no debounce race).
- Finalized placeholders via `finalizeInputMaskLayouts` + `scripts/test-placeholders.mjs`.
- **Client SDK**
- Centralized logging (`imLog`, `imPreLog`, `imMounted`, `imError`) using `BADGE/LOG` when `debug: true`.
- Lowercase input supported across layouts with `L` token.
- Examples updated with `autoLoadDeps: { inputmask: true, jquery: true, toastr: true }` and `useToastrLogger: true`.
- **Docs**
- CDN bumped to **1.0.14**.
- Notes about lowercase acceptance and uppercase coercion.
- Guidance to **not** override `A`/`9` and define only custom tokens for restricted alphabets.
---
### 1.0.13
- **Status inline configurabile**
- `statusMode: "inline" | "block" | "off"`
- `statusIcon: "none" | "icon" | "pill"`
- `showStatusText: boolean`
- `iconPosition: "left" | "right"`
- Riserva spazio automatica via `:has([data-state])`
- Nessuno stato su campo vuoto / parziale
- Fix cambio paese (ITโFR) e Inputmask merge (`A/H/9`)
- Refactor UI status (`setValidityUI` unico writer)
- Add `clearStatusUI()` per idle neutro
---
### 1.0.12
- NEW โ `autoFocusOnInit` (default: `false`) โ prevents autofocus on init.
- NEW โ `preserveInputAttrs` โ keeps external input `id`/`name` intact.
- UX โ renamed CSS classes from `.iti__*` โ `.epv__*`.
- Dependencies โ auto-loads `Inputmask` UMD via CDN; supports manual injection and CDN override.
- I18n โ IT / EN / AUTO (auto-detect from browser locale).
- UX stability โ dynamic placeholder, country-based formatter, debounce system.
---
### 1.0.10โ11
- CSS/Assets consolidation.
- Added Client SDK + autoload fallback.
- Updated README, docs, and npm package.
---
## ๐ License
MIT ยฉ [CodeCornโข](https://codecorn.it) โ see [LICENSE](LICENSE)
---
## ๐ค Maintainer
**Federico Girolami** Full-Stack Developer โข System Integrator โข Digital Solution Architect ๐ ๐ [codecorn.it](https://codecorn.it) ๐ง [f.girolami@codecorn.it](mailto:f.girolami@codecorn.it) ๐ [github.com/fgirolami29](https://github.com/fgirolami29)
---
## ๐ค Contributing
Pull requests are welcome. For major changes, please open an issue first.
> Powered by **CodeCornโข** ๐
---