@mattilsynet/design 3.1.11 → 3.1.12

package/mtds/validation/validation-observer.js

@@ -1,40 +1,51 @@
-import p from "../styles.module.css.js";
-import { onHotReload as E, on as s, QUICK_EVENT as h, debounce as m, onMutation as V, attr as e } from "../utils.js";
-const b = `.${p.field.split(" ")[0]}`, N = "input,textarea,select", y = "ds-suggestion,u-combobox", C = p.validation.split(" ")[0], c = (t) => t instanceof HTMLFormElement && e(t, "data-validation") === "form", T = (t) => c(t.form), S = (t) => t.closest("fieldset") || t.closest(b) || t.form, v = (t) => t?.getElementsByClassName(C) || [], d = (t) => {
-  const n = t?.type === "submit" || t?.type === "invalid";
-  let i;
-  for (const r of document.forms)
-    if (c(r))
-      for (const o of r.querySelectorAll(N)) {
-        if (!o.clientHeight) continue;
-        const a = S(o), u = o.closest(y), I = e(o, "data-validation"), l = u ? e(o, "aria-required") === "true" && !!u?.items.length : o.validity.valid;
-        if (e(o, "data-validation", `${l}`), !i && !l && (i = o), t || !I)
-          for (const f of v(a)) {
-            const g = a?.nodeName === "FIELDSET" && f.parentElement !== a;
-            e(f, "hidden", g || !n || l ? "" : null);
-          }
-      }
-  i && n && (t.preventDefault(), i.focus());
-}, D = ({ target: t }) => {
-  if (T(t))
-    for (const n of v(S(t))) e(n, "hidden", "");
-}, L = (t) => c(t.target.form) && t?.preventDefault();
-E("validations", () => [
-  s(document, "input", D, !0),
+import g from "../styles.module.css.js";
+import { isBrowser as I, onHotReload as p, on as l, QUICK_EVENT as v, debounce as V, onMutation as A, attr as i } from "../utils.js";
+const h = `.${g.field.split(" ")[0]}`, D = `${h} :is(input,textarea,select)`, E = "ds-suggestion,u-combobox", N = g.validation.split(" ")[0], d = (t) => t instanceof HTMLFormElement && i(t, "data-validation") === "form", a = (t) => t.closest(h), u = (t) => t?.querySelectorAll(D) || [], c = (t) => t?.getElementsByClassName(N) || [], f = (t) => {
+  if (!t.clientHeight) return !0;
+  const e = t.closest(E)?.items;
+  return e ? i(t, "aria-required") === "true" && !!e.length : t.matches(":user-valid");
+}, m = (t) => {
+  const e = t.target?.form || t.target;
+  let o;
+  if (d(e)) {
+    for (const n of u(e)) {
+      const s = f(n);
+      !o && !s && (o = n);
+      for (const r of c(a(n)))
+        i(r, "hidden", s ? "" : null);
+    }
+    for (const n of e.querySelectorAll("fieldset")) {
+      const s = [...u(n)].every(f);
+      for (const r of c(n))
+        a(r) || i(r, "hidden", s ? "" : null);
+    }
+    o && (t.preventDefault(), o.focus());
+  }
+}, T = ({ target: t }) => {
+  const e = t;
+  if (!d(e.form))
+    for (const o of c(e.closest("fieldset") || a(e)))
+      i(o, "hidden", "");
+}, y = (t) => d(t.target.form) && t?.preventDefault(), S = /* @__PURE__ */ new WeakSet(), C = I() ? c(document) : [], L = () => {
+  for (const t of C) {
+    if (S.has(t)) continue;
+    S.add(t);
+    const e = u(a(t))[0];
+    d(e?.form) && i(t, "hidden", "");
+  }
+};
+p("validations", () => [
+  l(document, "input", T, !0),
   // Hide validation when typing
-  s(document, "invalid", L, !0),
+  l(document, "invalid", y, !0),
   // Prevent default browser invalid popup
-  s(document, "invalid", m(d, 10), h),
+  l(document, "invalid", V(m, 10), v),
   // Debounced to group invalid events
-  s(document, "submit", d, !0),
+  l(document, "submit", m, !0),
   // Use capture as submit does not bubble
-  V(
-    document,
-    m(() => d(), 0),
-    {
-      childList: !0,
-      subtree: !0
-    }
-  )
+  A(document, L, {
+    childList: !0,
+    subtree: !0
+  })
 ]);
 //# sourceMappingURL=validation-observer.js.map

package/mtds/validation/validation-observer.js.map

@@ -1 +1 @@
-{"version":3,"file":"validation-observer.js","sources":["../../designsystem/validation/validation-observer.ts"],"sourcesContent":["import styles from \"../styles.module.css\";\nimport {\n\tattr,\n\tdebounce,\n\ton,\n\tonHotReload,\n\tonMutation,\n\tQUICK_EVENT,\n} from \"../utils\";\n\nconst CSS_FIELD = `.${styles.field.split(\" \")[0]}`;\nconst CSS_INPUTS = \"input,textarea,select\" as \"input\";\nconst CSS_SUGGESTION = \"ds-suggestion,u-combobox\" as \"ds-suggestion\"; // u-combobox kept for backward compatibility\nconst CSS_VALIDATION = styles.validation.split(\" \")[0];\n\nconst isValidationForm = (form: unknown): form is HTMLFormElement =>\n\tform instanceof HTMLFormElement && attr(form, \"data-validation\") === \"form\";\n\nconst isValidationInput = (input: unknown): input is HTMLInputElement =>\n\tisValidationForm((input as HTMLInputElement).form);\n\nconst getScope = (input: HTMLInputElement) =>\n\tinput.closest(\"fieldset\") || input.closest(CSS_FIELD) || input.form;\n\nconst getValidations = (el?: HTMLElement | null) =>\n\tel?.getElementsByClassName(CSS_VALIDATION) || [];\n\nconst handleValidations = (event?: Event) => {\n\tconst isSubmit = event?.type === \"submit\" || event?.type === \"invalid\";\n\tlet firstInvalid: HTMLInputElement | undefined;\n\n\tfor (const form of document.forms)\n\t\tif (isValidationForm(form))\n\t\t\tfor (const input of form.querySelectorAll(CSS_INPUTS)) {\n\t\t\t\tif (!input.clientHeight) continue; // Skip hidden inputs\n\t\t\t\tconst scope = getScope(input);\n\t\t\t\tconst suggestion = input.closest(CSS_SUGGESTION);\n\t\t\t\tconst prevValid = attr(input, \"data-validation\");\n\t\t\t\tconst nextValid = suggestion\n\t\t\t\t\t? attr(input, \"aria-required\") === \"true\" &&\n\t\t\t\t\t\t!!suggestion?.items.length\n\t\t\t\t\t: input.validity.valid;\n\n\t\t\t\tattr(input, \"data-validation\", `${nextValid}`);\n\t\t\t\tif (!firstInvalid && !nextValid) firstInvalid = input;\n\t\t\t\t// Update if not registered or validation does not match\n\t\t\t\tif (event || !prevValid)\n\t\t\t\t\tfor (const el of getValidations(scope)) {\n\t\t\t\t\t\tconst isNested =\n\t\t\t\t\t\t\tscope?.nodeName === \"FIELDSET\" && el.parentElement !== scope;\n\t\t\t\t\t\tattr(el, \"hidden\", isNested || !isSubmit || nextValid ? \"\" : null);\n\t\t\t\t\t}\n\t\t\t}\n\n\tif (firstInvalid && isSubmit) {\n\t\tevent.preventDefault(); // Prevent submit if focusable invalid element found\n\t\tfirstInvalid.focus(); // Only move focus to first invalid field if validate was true\n\t}\n};\n\nconst handleInput = ({ target }: Event) => {\n\tif (isValidationInput(target))\n\t\tfor (const el of getValidations(getScope(target))) attr(el, \"hidden\", \"\");\n};\n\nconst handleInvalid = (e: Event) =>\n\tisValidationForm((e.target as HTMLInputElement).form) && e?.preventDefault(); // Prevent default browser invalid popup\n\nonHotReload(\"validations\", () => [\n\ton(document, \"input\", handleInput, true), // Hide validation when typing\n\ton(document, \"invalid\", handleInvalid, true), // Prevent default browser invalid popup\n\ton(document, \"invalid\", debounce(handleValidations, 10), QUICK_EVENT), // Debounced to group invalid events\n\ton(document, \"submit\", handleValidations, true), // Use capture as submit does not bubble\n\tonMutation(\n\t\tdocument,\n\t\tdebounce(() => handleValidations(), 0),\n\t\t{\n\t\t\tchildList: true,\n\t\t\tsubtree: true,\n\t\t},\n\t),\n]);\n"],"names":["CSS_FIELD","styles","CSS_INPUTS","CSS_SUGGESTION","CSS_VALIDATION","isValidationForm","form","attr","isValidationInput","input","getScope","getValidations","el","handleValidations","event","isSubmit","firstInvalid","scope","suggestion","prevValid","nextValid","isNested","handleInput","target","handleInvalid","e","onHotReload","on","debounce","QUICK_EVENT","onMutation"],"mappings":";;AAUA,MAAMA,IAAY,IAAIC,EAAO,MAAM,MAAM,GAAG,EAAE,CAAC,CAAC,IAC1CC,IAAa,yBACbC,IAAiB,4BACjBC,IAAiBH,EAAO,WAAW,MAAM,GAAG,EAAE,CAAC,GAE/CI,IAAmB,CAACC,MACzBA,aAAgB,mBAAmBC,EAAKD,GAAM,iBAAiB,MAAM,QAEhEE,IAAoB,CAACC,MAC1BJ,EAAkBI,EAA2B,IAAI,GAE5CC,IAAW,CAACD,MACjBA,EAAM,QAAQ,UAAU,KAAKA,EAAM,QAAQT,CAAS,KAAKS,EAAM,MAE1DE,IAAiB,CAACC,MACvBA,GAAI,uBAAuBR,CAAc,KAAK,CAAA,GAEzCS,IAAoB,CAACC,MAAkB;AAC5C,QAAMC,IAAWD,GAAO,SAAS,YAAYA,GAAO,SAAS;AAC7D,MAAIE;AAEJ,aAAWV,KAAQ,SAAS;AAC3B,QAAID,EAAiBC,CAAI;AACxB,iBAAWG,KAASH,EAAK,iBAAiBJ,CAAU,GAAG;AACtD,YAAI,CAACO,EAAM,aAAc;AACzB,cAAMQ,IAAQP,EAASD,CAAK,GACtBS,IAAaT,EAAM,QAAQN,CAAc,GACzCgB,IAAYZ,EAAKE,GAAO,iBAAiB,GACzCW,IAAYF,IACfX,EAAKE,GAAO,eAAe,MAAM,UAClC,CAAC,CAACS,GAAY,MAAM,SACnBT,EAAM,SAAS;AAKlB,YAHAF,EAAKE,GAAO,mBAAmB,GAAGW,CAAS,EAAE,GACzC,CAACJ,KAAgB,CAACI,MAAWJ,IAAeP,IAE5CK,KAAS,CAACK;AACb,qBAAWP,KAAMD,EAAeM,CAAK,GAAG;AACvC,kBAAMI,IACLJ,GAAO,aAAa,cAAcL,EAAG,kBAAkBK;AACxD,YAAAV,EAAKK,GAAI,UAAUS,KAAY,CAACN,KAAYK,IAAY,KAAK,IAAI;AAAA,UAClE;AAAA,MACF;AAEF,EAAIJ,KAAgBD,MACnBD,EAAM,eAAA,GACNE,EAAa,MAAA;AAEf,GAEMM,IAAc,CAAC,EAAE,QAAAC,QAAoB;AAC1C,MAAIf,EAAkBe,CAAM;AAC3B,eAAWX,KAAMD,EAAeD,EAASa,CAAM,CAAC,EAAG,CAAAhB,EAAKK,GAAI,UAAU,EAAE;AAC1E,GAEMY,IAAgB,CAACC,MACtBpB,EAAkBoB,EAAE,OAA4B,IAAI,KAAKA,GAAG,eAAA;AAE7DC,EAAY,eAAe,MAAM;AAAA,EAChCC,EAAG,UAAU,SAASL,GAAa,EAAI;AAAA;AAAA,EACvCK,EAAG,UAAU,WAAWH,GAAe,EAAI;AAAA;AAAA,EAC3CG,EAAG,UAAU,WAAWC,EAASf,GAAmB,EAAE,GAAGgB,CAAW;AAAA;AAAA,EACpEF,EAAG,UAAU,UAAUd,GAAmB,EAAI;AAAA;AAAA,EAC9CiB;AAAA,IACC;AAAA,IACAF,EAAS,MAAMf,EAAA,GAAqB,CAAC;AAAA,IACrC;AAAA,MACC,WAAW;AAAA,MACX,SAAS;AAAA,IAAA;AAAA,EACV;AAEF,CAAC;"}
+{"version":3,"file":"validation-observer.js","sources":["../../designsystem/validation/validation-observer.ts"],"sourcesContent":["import styles from \"../styles.module.css\";\nimport {\n\tattr,\n\tdebounce,\n\tisBrowser,\n\ton,\n\tonHotReload,\n\tonMutation,\n\tQUICK_EVENT,\n} from \"../utils\";\n\nconst CSS_FIELD = `.${styles.field.split(\" \")[0]}`;\nconst CSS_INPUTS = `${CSS_FIELD} :is(input,textarea,select)` as \"input\";\nconst CSS_SUGGESTION = \"ds-suggestion,u-combobox\" as \"ds-suggestion\"; // u-combobox kept for backward compatibility\nconst CSS_VALIDATION = styles.validation.split(\" \")[0];\n\nconst isValidationForm = (form: unknown): form is HTMLFormElement =>\n\tform instanceof HTMLFormElement && attr(form, \"data-validation\") === \"form\";\n\nconst getField = (el: Element) => el.closest(CSS_FIELD);\nconst getInputs = (el?: Element | Document | null) =>\n\tel?.querySelectorAll(CSS_INPUTS) || [];\n\nconst getValidations = (el?: Element | Document | null) =>\n\tel?.getElementsByClassName(CSS_VALIDATION) || [];\n\nconst getValidity = (input: Element) => {\n\tif (!input.clientHeight) return true; // Skip hidden inputs\n\tconst suggestion = input.closest(CSS_SUGGESTION)?.items;\n\tif (!suggestion) return input.matches(\":user-valid\");\n\treturn attr(input, \"aria-required\") === \"true\" && !!suggestion.length;\n};\n\n// Hide or show validations on submit or invalid event\nconst handleValidations = (event: Event) => {\n\tconst form = (event.target as HTMLInputElement)?.form || event.target;\n\tlet invalid: HTMLInputElement | undefined;\n\tif (!isValidationForm(form)) return;\n\n\t// Toggle validitiy of fields\n\tfor (const input of getInputs(form)) {\n\t\tconst isValid = getValidity(input);\n\t\tif (!invalid && !isValid) invalid = input;\n\t\tfor (const el of getValidations(getField(input)))\n\t\t\tattr(el, \"hidden\", isValid ? \"\" : null);\n\t}\n\n\t// Toggle validitiy of fieldset\n\tfor (const fieldset of form.querySelectorAll(\"fieldset\")) {\n\t\tconst isValid = [...getInputs(fieldset)].every(getValidity);\n\t\tfor (const el of getValidations(fieldset))\n\t\t\tif (!getField(el)) attr(el, \"hidden\", isValid ? \"\" : null); // Only toggle fieldset validations if they are not also in a field\n\t}\n\n\tif (!invalid) return;\n\tevent.preventDefault(); // Prevent submit if focusable invalid element found\n\tinvalid.focus(); // Only move focus to first invalid field if validate was true\n};\n\n// Hide related validations adain when typing\nconst handleInput = ({ target }: Event) => {\n\tconst input = target as HTMLInputElement;\n\tif (isValidationForm(input.form)) return;\n\tfor (const el of getValidations(input.closest(\"fieldset\") || getField(input)))\n\t\tattr(el, \"hidden\", \"\");\n};\n\n// Hide native browser validation popup\nconst handleInvalid = (e: Event) =>\n\tisValidationForm((e.target as HTMLInputElement).form) && e?.preventDefault();\n\n// Hide validations when added to the DOM\nconst VALIDATIONS_ADDED = new WeakSet<Element>();\nconst VALIDATIONS = isBrowser() ? getValidations(document) : [];\nconst handleMutation = () => {\n\tfor (const valid of VALIDATIONS) {\n\t\tif (VALIDATIONS_ADDED.has(valid)) continue;\n\t\tVALIDATIONS_ADDED.add(valid);\n\t\tconst input = getInputs(getField(valid))[0];\n\t\tif (isValidationForm(input?.form)) attr(valid, \"hidden\", \"\");\n\t}\n};\n\nonHotReload(\"validations\", () => [\n\ton(document, \"input\", handleInput, true), // Hide validation when typing\n\ton(document, \"invalid\", handleInvalid, true), // Prevent default browser invalid popup\n\ton(document, \"invalid\", debounce(handleValidations, 10), QUICK_EVENT), // Debounced to group invalid events\n\ton(document, \"submit\", handleValidations, true), // Use capture as submit does not bubble\n\tonMutation(document, handleMutation, {\n\t\tchildList: true,\n\t\tsubtree: true,\n\t}),\n]);\n"],"names":["CSS_FIELD","styles","CSS_INPUTS","CSS_SUGGESTION","CSS_VALIDATION","isValidationForm","form","attr","getField","el","getInputs","getValidations","getValidity","input","suggestion","handleValidations","event","invalid","isValid","fieldset","handleInput","target","handleInvalid","e","VALIDATIONS_ADDED","VALIDATIONS","isBrowser","handleMutation","valid","onHotReload","on","debounce","QUICK_EVENT","onMutation"],"mappings":";;AAWA,MAAMA,IAAY,IAAIC,EAAO,MAAM,MAAM,GAAG,EAAE,CAAC,CAAC,IAC1CC,IAAa,GAAGF,CAAS,+BACzBG,IAAiB,4BACjBC,IAAiBH,EAAO,WAAW,MAAM,GAAG,EAAE,CAAC,GAE/CI,IAAmB,CAACC,MACzBA,aAAgB,mBAAmBC,EAAKD,GAAM,iBAAiB,MAAM,QAEhEE,IAAW,CAACC,MAAgBA,EAAG,QAAQT,CAAS,GAChDU,IAAY,CAACD,MAClBA,GAAI,iBAAiBP,CAAU,KAAK,CAAA,GAE/BS,IAAiB,CAACF,MACvBA,GAAI,uBAAuBL,CAAc,KAAK,CAAA,GAEzCQ,IAAc,CAACC,MAAmB;AACvC,MAAI,CAACA,EAAM,aAAc,QAAO;AAChC,QAAMC,IAAaD,EAAM,QAAQV,CAAc,GAAG;AAClD,SAAKW,IACEP,EAAKM,GAAO,eAAe,MAAM,UAAU,CAAC,CAACC,EAAW,SADvCD,EAAM,QAAQ,aAAa;AAEpD,GAGME,IAAoB,CAACC,MAAiB;AAC3C,QAAMV,IAAQU,EAAM,QAA6B,QAAQA,EAAM;AAC/D,MAAIC;AACJ,MAAKZ,EAAiBC,CAAI,GAG1B;AAAA,eAAWO,KAASH,EAAUJ,CAAI,GAAG;AACpC,YAAMY,IAAUN,EAAYC,CAAK;AACjC,MAAI,CAACI,KAAW,CAACC,MAASD,IAAUJ;AACpC,iBAAWJ,KAAME,EAAeH,EAASK,CAAK,CAAC;AAC9C,QAAAN,EAAKE,GAAI,UAAUS,IAAU,KAAK,IAAI;AAAA,IACxC;AAGA,eAAWC,KAAYb,EAAK,iBAAiB,UAAU,GAAG;AACzD,YAAMY,IAAU,CAAC,GAAGR,EAAUS,CAAQ,CAAC,EAAE,MAAMP,CAAW;AAC1D,iBAAWH,KAAME,EAAeQ,CAAQ;AACvC,QAAKX,EAASC,CAAE,OAAQA,GAAI,UAAUS,IAAU,KAAK,IAAI;AAAA,IAC3D;AAEA,IAAKD,MACLD,EAAM,eAAA,GACNC,EAAQ,MAAA;AAAA;AACT,GAGMG,IAAc,CAAC,EAAE,QAAAC,QAAoB;AAC1C,QAAMR,IAAQQ;AACd,MAAI,CAAAhB,EAAiBQ,EAAM,IAAI;AAC/B,eAAWJ,KAAME,EAAeE,EAAM,QAAQ,UAAU,KAAKL,EAASK,CAAK,CAAC;AAC3E,MAAAN,EAAKE,GAAI,UAAU,EAAE;AACvB,GAGMa,IAAgB,CAACC,MACtBlB,EAAkBkB,EAAE,OAA4B,IAAI,KAAKA,GAAG,eAAA,GAGvDC,wBAAwB,QAAA,GACxBC,IAAcC,EAAA,IAAcf,EAAe,QAAQ,IAAI,CAAA,GACvDgB,IAAiB,MAAM;AAC5B,aAAWC,KAASH,GAAa;AAChC,QAAID,EAAkB,IAAII,CAAK,EAAG;AAClC,IAAAJ,EAAkB,IAAII,CAAK;AAC3B,UAAMf,IAAQH,EAAUF,EAASoB,CAAK,CAAC,EAAE,CAAC;AAC1C,IAAIvB,EAAiBQ,GAAO,IAAI,KAAGN,EAAKqB,GAAO,UAAU,EAAE;AAAA,EAC5D;AACD;AAEAC,EAAY,eAAe,MAAM;AAAA,EAChCC,EAAG,UAAU,SAASV,GAAa,EAAI;AAAA;AAAA,EACvCU,EAAG,UAAU,WAAWR,GAAe,EAAI;AAAA;AAAA,EAC3CQ,EAAG,UAAU,WAAWC,EAAShB,GAAmB,EAAE,GAAGiB,CAAW;AAAA;AAAA,EACpEF,EAAG,UAAU,UAAUf,GAAmB,EAAI;AAAA;AAAA,EAC9CkB,EAAW,UAAUN,GAAgB;AAAA,IACpC,WAAW;AAAA,IACX,SAAS;AAAA,EAAA,CACT;AACF,CAAC;"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@mattilsynet/design",
-	"version": "3.1.11",
+	"version": "3.1.12",
 	"type": "module",
 	"repository": {
 		"type": "git",
@@ -68,7 +68,7 @@
 		"@turf/helpers": "^7.3.4",
 		"@types/leaflet": "^1.9.21",
 		"@types/leaflet.markercluster": "^1.5.6",
-		"@types/node": "^25.3.1",
+		"@types/node": "^25.3.3",
 		"@types/react": "^19.2.14",
 		"@types/react-dom": "^19.2.3",
 		"@vitejs/plugin-react": "^5.1.4",