test bug fr mask

fgirolami29 · fgirolami29 · commit 542a19085a9b · 2025-10-20T01:19:09.000+02:00
diff --git a/.prettierrc b/.prettierrc
@@ -2,8 +2,9 @@
   "$schema": "https://json.schemastore.org/prettierrc",
   "tabWidth": 2,
   "useTabs": false,
-  "printWidth": 450,
+  "printWidth": 550,
   "singleQuote": false,
+  "proseWrap": "never",
   "trailingComma": "es5",
   "semi": true,
   "endOfLine": "lf"
diff --git a/dist-types/client/europlate.client.d.ts.map b/dist-types/client/europlate.client.d.ts.map
diff --git a/src/assets/css/epv.css b/src/assets/css/epv.css
@@ -200,7 +200,7 @@
   --epv-gap: 0.375rem; /* spazio icona↔testo          */
   --epv-icon: 14px; /* lato dell’icona semplice    */
   --epv-pill: 18px; /* diametro della pill         */
-  --epv-textch: 12ch; /* spazio tipico per testo     */
+  --epv-textch: 12.5ch; /* spazio tipico per testo     */
 }
 
 /* Host inline */
@@ -281,7 +281,7 @@
 }
 /* to check */
 .epv__input-wrap {
-  min-width: 70%;
+  min-width: 60%;
   display: flex;
   flex: 1;
 }
diff --git a/src/assets/css/epv.theme.css b/src/assets/css/epv.theme.css
@@ -0,0 +1,151 @@
+/* === TOKENS (LIGHT di default) ===================== */
+:root{
+  /* superfici & testo */
+  --epv-bg: #ffffff;
+  --epv-surface: #f8fafc;           /* slate-50 */
+  --epv-text: #0f172a;              /* slate-900 */
+  --epv-muted: #64748b;             /* slate-500 */
+  --epv-border: #cbd5e1;            /* slate-300 */
+  --epv-border-focus: #60a5fa;      /* blue-400 */
+  --epv-ring: rgba(59,130,246,.35); /* blue-500/35% */
+
+  /* input */
+  --epv-input-bg: #ffffff;
+  --epv-input-fg: #0f172a;
+  --epv-input-placeholder: #94a3b8; /* slate-400 */
+
+  /* stato */
+  --epv-ok: #16a34a;   /* green-600 */
+  --epv-err: #dc2626;  /* red-600 */
+  --epv-info: #3b82f6; /* blue-500 */
+
+  /* dropdown */
+  --epv-dd-bg: #ffffff;
+  --epv-dd-item: #0f172a;
+  --epv-dd-hover: #eef2ff;     /* indigo-50 */
+  --epv-dd-border: #cbd5e1;
+
+  /* pulsante bandiera */
+  --epv-flagbtn-bg: #ffffff;
+  --epv-flagbtn-fg: #0f172a;
+  --epv-flagbtn-border: #cbd5e1;
+}
+
+/* === HOOK ai selettori esistenti (senza stravolgere) === */
+/* status inline: usa i token invece degli hex fissi */
+.status-inline-host{
+  color: var(--epv-muted);
+}
+.status-inline-host[data-state="ok"]{ color: var(--epv-ok); }
+.status-inline-host[data-state="err"]{ color: var(--epv-err); }
+
+/* block status */
+.status.ok{ color: var(--epv-ok); }
+.status.err{ color: var(--epv-err); }
+
+/* input & wrapper suggeriti (se già li hai, questi sono solo override safe) */
+.plate-epv .plate-input{
+  background: var(--epv-input-bg);
+  color: var(--epv-input-fg);
+  border: 1px solid var(--epv-border);
+}
+.plate-epv .plate-input::placeholder{ color: var(--epv-input-placeholder); }
+.plate-epv .plate-input:focus{
+  outline: none;
+  border-color: var(--epv-border-focus);
+  box-shadow: 0 0 0 3px var(--epv-ring);
+}
+
+/* dropdown */
+.plate-epv .dropdown{
+  background: var(--epv-dd-bg);
+  border: 1px solid var(--epv-dd-border);
+}
+.plate-epv .dropdown .country-item{
+  color: var(--epv-dd-item);
+}
+.plate-epv .dropdown .country-item:hover{
+  background: var(--epv-dd-hover);
+}
+
+/* flag button */
+.plate-epv .flag-btn{
+  background: var(--epv-flagbtn-bg);
+  color: var(--epv-flagbtn-fg);
+  border: 1px solid var(--epv-flagbtn-border);
+}
+
+/* PANNOKKIANERA — media query */
+@media (prefers-color-scheme: dark){
+  :root{
+    --epv-bg: #0b0f19;              /* quasi-black */
+    --epv-surface: #111827;         /* gray-900 */
+    --epv-text: #e5e7eb;            /* gray-200 */
+    --epv-muted: #94a3b8;           /* slate-400 */
+    --epv-border: #334155;          /* slate-700 */
+    --epv-border-focus: #93c5fd;    /* blue-300 */
+    --epv-ring: rgba(96,165,250,.35);
+
+    --epv-input-bg: #0f172a;        /* slate-900 */
+    --epv-input-fg: #e5e7eb;
+    --epv-input-placeholder: #64748b;
+
+    /* stati un filo più accesi in dark */
+    --epv-ok: #22c55e;              /* green-500 */
+    --epv-err: #f87171;             /* red-400 */
+    --epv-info: #60a5fa;
+
+    --epv-dd-bg: #0f172a;
+    --epv-dd-item: #e5e7eb;
+    --epv-dd-hover: #1f2937;        /* gray-800 */
+    --epv-dd-border: #334155;
+
+    --epv-flagbtn-bg: #0f172a;
+    --epv-flagbtn-fg: #e5e7eb;
+    --epv-flagbtn-border: #334155;
+  }
+
+  /* superfici globali (se vuoi) */
+  body.test_mode{ background: var(--epv-bg); color: var(--epv-text); }
+}
+
+/* PANNOKKIANERA — class based */
+.scheme_dark,
+html.scheme_dark,
+body.scheme_dark,
+:root[class*="scheme_dark"]{
+  --epv-bg: #0b0f19;
+  --epv-surface: #111827;
+  --epv-text: #e5e7eb;
+  --epv-muted: #94a3b8;
+  --epv-border: #334155;
+  --epv-border-focus: #93c5fd;
+  --epv-ring: rgba(96,165,250,.35);
+
+  --epv-input-bg: #0f172a;
+  --epv-input-fg: #e5e7eb;
+  --epv-input-placeholder: #64748b;
+
+  --epv-ok: #22c55e;
+  --epv-err: #f87171;
+  --epv-info: #60a5fa;
+
+  --epv-dd-bg: #0f172a;
+  --epv-dd-item: #e5e7eb;
+  --epv-dd-hover: #1f2937;
+  --epv-dd-border: #334155;
+
+  --epv-flagbtn-bg: #0f172a;
+  --epv-flagbtn-fg: #e5e7eb;
+  --epv-flagbtn-border: #334155;
+}
+
+
+/*
+* ## Note veloci
+* Gli **SVG in `mode-icon`/`mode-pill`** usano `currentColor`: con i token sopra cambiano automaticamente tra light/dark (non serve altro).
+* Se hai **background chiari** in card/container (`.plate-epv-wrapper`, `.plate-epv`) puoi fare: 
+* 
+* .plate-epv-wrapper{ background: var(--epv-surface); }
+* 
+*/
diff --git a/src/client/europlate.client.ts b/src/client/europlate.client.ts
@@ -709,7 +709,6 @@ async function ensureDeps(opts: EuroPlateOptions, log: Logger, BADGE: BadgeFn =
     // —————————————————————————————————————
     const msg = err instanceof Error ? err.message : JSON.stringify(err ?? "unknown");
     BADGE("EPV[Deps]", `Error during ensureDeps: ${msg}`, "err");
-    log.error?.("ensureDeps failed:", err);
   } finally {
     // —————————————————————————————————————
     // Log tempo di completamento / debug telemetria
@@ -1208,7 +1207,7 @@ export function createEuroPlate(EuroMod: any, opts: EuroPlateOptions): EuroPlate
       } catch {}
       (el as any)._imInstance = null;
     }, 0);
-    log.debug?.("mask:clear (hard)");
+    BADGE("EuroPlate", "mask:clear (hard)", "debug");
   }
   const hardClearMaskDebounced = debounce(hardClearMask, timings.clear);
 
@@ -1219,13 +1218,13 @@ export function createEuroPlate(EuroMod: any, opts: EuroPlateOptions): EuroPlate
 
   const applyMaskDebounced = debounce((inputEl: HTMLInputElement, country: string) => {
     if (!hasIMBound()) {
-      log.warn?.("Inputmask non disponibile: salto applyMask");
+      BADGE("EuroPlate", "Inputmask non disponibile: salto applyMask", "warn");
       return;
     }
     const IM = getIMBound()! as IMGlobal; // tipo: IMGlobal
 
     if (!IM) {
-      log.warn?.("AGAIN: Inputmask non disponibile: RETURN!");
+      BADGE("EuroPlate", "Inputmask non disponibile (again): RETURN!", "warn");
       return;
     }
 
@@ -1277,9 +1276,42 @@ export function createEuroPlate(EuroMod: any, opts: EuroPlateOptions): EuroPlate
 
     instance.mask(inputEl);
     (inputEl as any)._imInstance = instance;
-    log.debug?.("mask:apply", country, optsIM.mask);
+    BADGE("EuroPlate", JSON.stringify({ logMsg: "mask:apply", country, mask: optsIM.mask }, null, 2), "debug");
   }, timings.debounce);
 
+  function clearStatusUI(input: HTMLInputElement, status?: HTMLElement, wrap?: HTMLElement | null) {
+    // input & wrapper: rimuovi classi stato
+    input.classList.remove("valid", "invalid");
+    if (wrap) wrap.classList.remove("valid", "invalid");
+    input.setAttribute("aria-invalid", "false");
+    input.setCustomValidity("");
+
+    if (!status) return;
+
+    // inline: togli proprio data-state → niente padding via :has()
+    // // ✨ chiave: sparisce lo stato → niente :has([data-state]) nel CSS
+    status.removeAttribute("data-state");
+
+    // pulisci icona/testo se presenti
+    const iconEl = status.querySelector(".s-icon") as HTMLElement | null;
+    const textEl = status.querySelector(".s-text") as HTMLElement | null;
+    // reset eventuale .pill ok/err
+    if (iconEl) {
+      iconEl.className = "s-icon";
+      iconEl.textContent = "";
+    }
+    if (textEl) {
+      textEl.textContent = "";
+      textEl.style.display = "none";
+    }
+
+    // block mode: neutro
+    if (status.classList.contains("status")) {
+      status.className = "status";
+      status.textContent = "";
+    }
+  }
+
   // setValidityUI
   function setValidityUI(ok: boolean | null, msg: string, matchCountry: CountryKey | null, input: HTMLInputElement, status: HTMLElement | undefined, lang: Lang, wrap?: HTMLElement | null) {
     // INPUT: classi + aria
@@ -1424,7 +1456,7 @@ export function createEuroPlate(EuroMod: any, opts: EuroPlateOptions): EuroPlate
       //setValidityUI(true as any, "", null, input, statusEl, lang, wrapperEl);
       //input.classList.remove("valid", "invalid");
       //wrapperEl?.classList.remove("valid", "invalid");
-      setValidityUI(null, "", null, input, statusEl, lang, wrapperEl); // 👈 idle
+      clearStatusUI(input, statusEl, wrapperEl); // 👈 niente stato
       if (selected === "AUTO") {
         hardClearMaskDebounced(input);
         input.placeholder = placeholders.auto || "";
@@ -1445,7 +1477,7 @@ export function createEuroPlate(EuroMod: any, opts: EuroPlateOptions): EuroPlate
       if (v2 !== raw) input.value = raw = v2;
     }
     // non validiamo finche nn c e un risultato minimo
-    if(raw.trim()?.length <= 2) return { ok: false, value: raw };
+    if (raw.trim()?.length <= 2) return { ok: false, value: raw };
 
     const countries = selected === "AUTO" ? allowed : [selected];
     const res = validatePlate(raw, countries, { vehicleType });
@@ -1527,22 +1559,49 @@ export function createEuroPlate(EuroMod: any, opts: EuroPlateOptions): EuroPlate
     let next: "AUTO" | CountryKey = "AUTO";
     if (code !== "AUTO") {
       const n = normalize(String(code || ""));
-      if (isCountryKey(n)) next = n;
-      else next = "AUTO";
+      next = isCountryKey(n) ? (n as CountryKey) : "AUTO";
     }
+
+    // salva il precedente per sicurezza (se ti serve altrove)
+    const prev = selected;
     selected = next;
 
+    // flag + placeholder
+    setFlag(selected, flagIcon, flagLabel, lang);
+    updatePlaceholderForCurrentSelection(selected, input, EuroMod, lang);
     // flag + placeholder
     setFlag(selected, flagIcon, flagLabel, lang);
     updatePlaceholderForCurrentSelection(selected, input, EuroMod, lang);
 
-    // mask
+    // ⚠️ IMPORTANTISSIMO: rimuovi SUBITO la vecchia mask (no debounce)
+    hardClearMask(input); // usa la versione NON debounced
+
+    const hasText = !!input.value.trim();
+    const short = hasText && input.value.trim().length <= 2;
+
     if (selected === "AUTO") {
-      hardClearMaskDebounced(input);
+      // AUTO: niente mask
+      if (!hasText) {
+        clearStatusUI(input, statusEl, wrapperEl); // stato neutro
+      } else {
+        // opzionale: riallinea subito contro allowed
+        validateNow();
+      }
     } else {
-      const v = fmtFor(selected, input.value);
-      if (input.value !== v) input.value = v;
+      // NON-AUTO: applica la NUOVA mask SEMPRE (anche a campo vuoto)
+      if (hasText) {
+        const v = fmtFor(selected, input.value);
+        if (input.value !== v) input.value = v;
+      }
       applyMaskDebounced(input, selected);
+
+      // stato neutro se vuoto o corto
+      if (!hasText || short) {
+        clearStatusUI(input, statusEl, wrapperEl);
+      } else {
+        // se vuoi allineare subito (facoltativo)
+        validateNow();
+      }
     }
 
     // chiudi dropdown
@@ -1608,7 +1667,7 @@ export function createEuroPlate(EuroMod: any, opts: EuroPlateOptions): EuroPlate
   renderDropdown();
   selectCountry(mode, !!autoFocusOnInit); // 👈 niente autofocus all’avvio // ok: la funzione normalizza e imposta selected ("AUTO" | CountryKey)
 
-  log.notify?.("EuroPlate pronto ✅", "success");
+  BADGE("EuroPlate", "Pronto ✅", "ok");
 
   return instance;
 }

Original file line number	Diff line number	Diff line change
`@@ -200,7 +200,7 @@`
`200`	`200`	`--epv-gap: 0.375rem; /* spazio icona↔testo */`
`201`	`201`	`--epv-icon: 14px; /* lato dell’icona semplice */`
`202`	`202`	`--epv-pill: 18px; /* diametro della pill */`
`203`		`- --epv-textch: 12ch; /* spazio tipico per testo */`
	`203`	`+ --epv-textch: 12.5ch; /* spazio tipico per testo */`
`204`	`204`	`}`
`205`	`205`
`206`	`206`	`/* Host inline */`
`@@ -281,7 +281,7 @@`
`281`	`281`	`}`
`282`	`282`	`/* to check */`
`283`	`283`	`.epv__input-wrap {`
`284`		`- min-width: 70%;`
	`284`	`+ min-width: 60%;`
`285`	`285`	`display: flex;`
`286`	`286`	`flex: 1;`
`287`	`287`	`}`