before bump - test to sync validity ui status

Author: fgirolami29

dist-types/client/europlate.client.d.ts

@@ -1,3 +1,5 @@
+import type { SmartLogFn, BadgeFn } from "./logger/ensureBadgeLogger.js";
+export declare function ensureDepsOnce(opts: EuroPlateOptions, log: Logger, BADGE?: BadgeFn, LOG?: SmartLogFn): Promise<void>;
 /** Lingue supportate dall’SDK. */
 export type I18nCode = "AUTO" | "IT" | "EN";
 /** Tipi veicolo supportati dal validatore. */

dist-types/client/europlate.client.d.ts.map

@@ -14,7 +14,7 @@
 
 /* --- Contenitore interno (flag + input + dropdown) --- */
 .plate-epv {
-  position: relative;              /* 👈 dropdown assoluto ancorato qui */
+  position: relative; /* 👈 dropdown assoluto ancorato qui */
   display: flex;
   align-items: center;
   gap: 8px;
@@ -30,13 +30,12 @@
 /* --- Input targa --- */
 .plate-input {
   flex: 1 1 auto;
-  min-width: 0;                    /* 👈 importante in flex per evitare overflow */
+  min-width: 0; /* 👈 importante in flex per evitare overflow */
   border: none;
   outline: none;
   font-size: 1rem;
   background: transparent;
   letter-spacing: 0.5px;
-
 }
 
 /* --- Bottone bandiera --- */
@@ -85,11 +84,11 @@
 .dropdown {
   position: absolute;
   z-index: 9999;
-  top: calc(100% + 6px);           /* 👈 esci sotto al box */
-  left: 0;                         /* 👈 allinea al bordo sinistro del container */
-  min-width: max(280px, 100%);     /* 👈 almeno 280px, ma non più stretto del box */
+  top: calc(100% + 6px); /* 👈 esci sotto al box */
+  left: 0; /* 👈 allinea al bordo sinistro del container */
+  min-width: max(280px, 100%); /* 👈 almeno 280px, ma non più stretto del box */
   max-height: 320px;
-   right: auto;
+  right: auto;
   overflow: auto;
   background: #fff;
   border: 1px solid #e5e7eb;
@@ -145,9 +144,14 @@
   border-color: #198754;
   box-shadow: 0 0 0 3px rgba(25, 135, 84, 0.25);
 }
-
+.plate-input.valid {
+  color: #16a34a;
+}
 /* --- Stato non valido (rosso) --- */
 
+.plate-input.invalid {
+  color: #dc2626;
+}
 .invalid .plate-epv {
   border-color: #dc3545;
   box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.25);

src/assets/css/epv.css

@@ -28,6 +28,29 @@ import {
   getCountryName,
 } from "../countries.js";
 
+// 👇 in cima al file (scope di modulo)
+let __depsOnce: Promise<void> | null = null;
+
+export async function ensureDepsOnce(opts: EuroPlateOptions, log: Logger, BADGE: BadgeFn = () => {}, LOG: SmartLogFn = () => {}) {
+  if (!__depsOnce) {
+    __depsOnce = (async () => {
+      BADGE("EPV[Deps]", "Ensuring dependencies…", "info");
+      try {
+        await ensureDeps(opts, log, BADGE, LOG);
+        BADGE("EPV[Deps]", "Dependencies ensured successfully", "ok");
+      } catch (err) {
+        BADGE("EPV[Deps]", `Error during ensureDeps: ${(err as Error)?.message || err}`, "err");
+        throw err;
+      } finally {
+        BADGE("EPV[Deps]", "ensureDeps finished", "debug");
+      }
+    })();
+  } else {
+    BADGE("EPV[Deps]", "Deps ensure already in-flight / done", "debug");
+  }
+  return __depsOnce;
+}
+
 /* ============================================================
  * Tipi PUBBLICI (API surface)
  * ============================================================ */
@@ -1112,13 +1135,13 @@ export function createEuroPlate(EuroMod: any, opts: EuroPlateOptions): EuroPlate
   let log: Logger = makeBaseLogger(logPrefix, DBG, logger);
 
   // ---------- DEPS (fire & forget, ora con BADGE/LOG in chiaro)
-  void ensureDeps(opts, log, BADGE, LOG).then(() => {
-    if (useToastrLogger === true && getToastr() && !logger) {
+  void ensureDepsOnce(opts, log, BADGE, LOG).then(() => {
+    const G = window as any;
+
+    if (useToastrLogger && getToastr() && !logger && !G.CC_EPV_TOASTR_LOGGER_ATTACHED) {
       log = makeToastrLogger(logPrefix, DBG);
-      //log.info?.("Toastr logger attached");
-      BADGE("EuroPlate", "Toastr logger attached", "debug");
-      (opts.autoLoadDeps ||= {}).toastr = false;
-      (opts.autoLoadDeps ||= {}).jquery = false;
+      G.CC_EPV_TOASTR_LOGGER_ATTACHED = true;
+      BADGE("EuroPlate", "Toastr logger attached (once)", "debug");
     }
     // se IM arriva dopo e non siamo in AUTO, prova ad applicare la mask
     if (hasIMBound() && selected !== "AUTO") {
@@ -1320,7 +1343,8 @@ export function createEuroPlate(EuroMod: any, opts: EuroPlateOptions): EuroPlate
         iconEl.textContent = ok ? "✓" : "!";
       } else if (statusIcon === "pill") {
         iconEl.classList.add("pill", ok ? "ok" : "err");
-        iconEl.textContent = ok ? "OK" : "ERR";
+        //iconEl.textContent = ok ? "OK" : "ERR";
+        iconEl.textContent = ok ? "✓" : "!";
       } else {
         iconEl.textContent = "";
       }

src/client/europlate.client.ts

@@ -25,12 +25,12 @@ export function ensureBadgeLogger(prefix: string, debug: boolean) {
   function localBADGE(mod: string, msg: string, colorKey?: ColorKey | string) {
     if (!debug) return;
     const c = G.CC_COLORS[colorKey as keyof CCColors] || colorKey || G.CC_COLORS.gold;
-    const txc = [G.CC_COLORS["gold"], G.CC_COLORS["info"], G.CC_COLORS["ok"]].includes(c) ? "#000" : "#fff";
+    const txc = [G.CC_COLORS["bg1"], G.CC_COLORS["bg1"]].includes(c) ? "#fff" : "#000";
     //const tag = `%c CodeCorn™ ${mod} %c ${prefix} ${msg} %c`;
     // ⚠️ niente prefix qui: lo aggiunge il wrapper BADGE sotto
     const tag = `%c CodeCorn™ ${mod} %c ${msg} %c`;
     const css1 = `background:${G.CC_COLORS.bg1};color:#fff;padding:3px 6px;border-radius:4px 0 0 4px;`;
-    const css2 = `background:${c};color:${txc};font-weight:bold;padding:3px 6px;`;
+    const css2 = `background:${c};color:${txc};font-weight:bold;padding:3px 6px;text-transform:uppercase;`;
     const css3 = `background:${G.CC_COLORS.bg3};color:#fff;padding:3px 6px;border-radius:0 4px 4px 0;`;
     try {
       console.log(tag, css1, css2, css3);