@mattilsynet/design 0.0.7 → 0.0.8

package/mtds/field/field.d.ts

@@ -1 +1,2 @@
-export {};
+export declare function observe(el: Element): void;
+export declare function unobserve(el: Element): void;

package/mtds/field/field.js

@@ -1,31 +1,44 @@
-import r from "../styles.module.css.js";
-const c = typeof window < "u" && typeof window.document < "u", l = c ? document.getElementsByClassName(r.field.split(" ")[0]) : [], a = `:${Date.now().toString(36)}${Math.random().toString(36).slice(2, 5)}`, u = r.validation.split(" ")[0];
-let f = 0;
-function o(n) {
-  return n.id || (n.id = `${a}${++f}`), n.id;
+import u from "../styles.module.css.js";
+const f = `:${Date.now().toString(36)}${Math.random().toString(36).slice(2, 5)}`, d = u.field.split(" ")[0], b = u.validation.split(" ")[0], a = /* @__PURE__ */ new WeakMap();
+let m = 0;
+function r(t) {
+  return t.id || (t.id = `${f}${++m}`), t.id;
 }
-function d(n) {
-  const s = [], i = new MutationObserver((e) => {
-    s[0] || requestAnimationFrame(t), s.push(...e);
-  }), t = () => {
-    n(s, i), s.length = 0;
+function v(t) {
+  const e = [], i = new MutationObserver((n) => {
+    e[0] || requestAnimationFrame(o), e.push(...n);
+  }), o = () => {
+    t(e, i), e.length = 0;
   };
-  return t(), i;
+  return i;
 }
-function m() {
-  for (const n of l) {
-    const s = [], i = [];
-    let t = null;
-    for (const e of n.getElementsByTagName("*"))
-      e instanceof HTMLLabelElement ? s.push(e) : "validity" in e && !(e instanceof HTMLButtonElement) ? t = e : e.classList.contains(u) ? i.unshift(o(e)) : e.nodeName === "P" && i.push(o(e));
-    if (t) for (const e of s) e.htmlFor = o(t);
-    t == null || t.setAttribute("aria-describedby", i.join(" "));
+function l(t) {
+  for (const e of t) {
+    const i = [], o = [];
+    let n = null, c = !0;
+    for (const s of e.getElementsByTagName("*"))
+      s instanceof HTMLLabelElement ? i.push(s) : "validity" in s && !(s instanceof HTMLButtonElement) ? n = s : s.classList.contains(b) ? (c = s.getAttribute("data-color") === "success", o.unshift(r(s))) : s instanceof HTMLParagraphElement && o.push(r(s));
+    if (n) for (const s of i) s.htmlFor = r(n);
+    n == null || n.setAttribute("aria-describedby", o.join(" ")), n == null || n.setAttribute("aria-invalid", `${!c}`);
   }
 }
-c && d(m).observe(document.body, {
-  attributeFilter: ["class"],
-  attributes: !0,
-  childList: !0,
-  subtree: !0
-});
+typeof window < "u" && h(document.body);
+function h(t) {
+  if (a.has(t)) return;
+  const e = t.getElementsByClassName(d), i = v(() => l(e));
+  i.observe(t, {
+    attributeFilter: ["class"],
+    attributes: !0,
+    childList: !0,
+    subtree: !0
+  }), l(e), a.set(t, i);
+}
+function g(t) {
+  var e;
+  (e = a.get(t)) == null || e.disconnect();
+}
+export {
+  h as observe,
+  g as unobserve
+};
 //# sourceMappingURL=field.js.map

package/mtds/field/field.js.map

@@ -1 +1 @@
-{"version":3,"file":"field.js","sources":["../../designsystem/field/field.ts"],"sourcesContent":["import styles from '../styles.module.css';\n\nconst IS_BROWSER = typeof window !== 'undefined' && typeof window.document !== 'undefined';\nconst FIELDS = IS_BROWSER ? document.getElementsByClassName(styles.field.split(' ')[0]) : []; // Reutrns a live HTMLCollection\nconst UUID = `:${Date.now().toString(36)}${Math.random().toString(36).slice(2, 5)}`;\nconst VALIDATION = styles.validation.split(' ')[0];\n\nlet id = 0;\nfunction useId (el: Element) {\n  if (!el.id) el.id = `${UUID}${++id}`;\n\treturn el.id;\n};\n\n// Speed up MutationObserver by debouncing and only running when page is visible\nfunction createOptimizedMutationObserver(callback: MutationCallback) {\n  const queue: MutationRecord[] = [];\n  const observer = new MutationObserver((mutations) => {\n    if (!queue[0]) requestAnimationFrame(process);\n    queue.push(...mutations);\n  });\n\n  const process = () => {\n    callback(queue, observer);\n    queue.length = 0; // Reset queue\n  };\n\n  process(); // Initial setup\n  return observer;\n}\n\n\nfunction process() {\n  for(const field of FIELDS) {\n    const labels: HTMLLabelElement[] = [];\n    const descs: string[] = [];\n    let input: Element | null = null;\n\n    for (const el of field.getElementsByTagName('*')) {\n      if (el instanceof HTMLLabelElement) labels.push(el);\n      else if ('validity' in el && !(el instanceof HTMLButtonElement)) input = el;\n      else if (el.classList.contains(VALIDATION)) descs.unshift(useId(el)); // Must be before validation since it can also be a <p>\n      else if (el.nodeName === 'P') descs.push(useId(el));\n    }\n\n    if (input) for (const label of labels) label.htmlFor = useId(input);\n    input?.setAttribute('aria-describedby', descs.join(' '));\n  }\n}\n\nif (IS_BROWSER) {\n  createOptimizedMutationObserver(process).observe(document.body, {\n    attributeFilter: ['class'],\n    attributes: true,\n    childList: true,\n    subtree: true\n  });\n}"],"names":["IS_BROWSER","FIELDS","styles","UUID","VALIDATION","id","useId","el","createOptimizedMutationObserver","callback","queue","observer","mutations","process","field","labels","descs","input","label"],"mappings":";AAEA,MAAMA,IAAa,OAAO,SAAW,OAAe,OAAO,OAAO,WAAa,KACzEC,IAASD,IAAa,SAAS,uBAAuBE,EAAO,MAAM,MAAM,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,GACrFC,IAAO,IAAI,KAAK,MAAM,SAAS,EAAE,CAAC,GAAG,KAAK,OAAA,EAAS,SAAS,EAAE,EAAE,MAAM,GAAG,CAAC,CAAC,IAC3EC,IAAaF,EAAO,WAAW,MAAM,GAAG,EAAE,CAAC;AAEjD,IAAIG,IAAK;AACT,SAASC,EAAOC,GAAa;AACvB,SAACA,EAAG,OAAIA,EAAG,KAAK,GAAGJ,CAAI,GAAG,EAAEE,CAAE,KAC5BE,EAAG;AACX;AAGA,SAASC,EAAgCC,GAA4B;AACnE,QAAMC,IAA0B,CAAC,GAC3BC,IAAW,IAAI,iBAAiB,CAACC,MAAc;AACnD,IAAKF,EAAM,CAAC,2BAAyBG,CAAO,GACtCH,EAAA,KAAK,GAAGE,CAAS;AAAA,EAAA,CACxB,GAEKC,IAAU,MAAM;AACpB,IAAAJ,EAASC,GAAOC,CAAQ,GACxBD,EAAM,SAAS;AAAA,EACjB;AAEAG,SAAAA,EAAQ,GACDF;AACT;AAGA,SAASE,IAAU;AACjB,aAAUC,KAASb,GAAQ;AACzB,UAAMc,IAA6B,CAAC,GAC9BC,IAAkB,CAAC;AACzB,QAAIC,IAAwB;AAE5B,eAAWV,KAAMO,EAAM,qBAAqB,GAAG;AAC7C,MAAIP,aAAc,mBAAyBQ,EAAA,KAAKR,CAAE,IACzC,cAAcA,KAAM,EAAEA,aAAc,qBAA4BU,IAAAV,IAChEA,EAAG,UAAU,SAASH,CAAU,IAASY,EAAA,QAAQV,EAAMC,CAAE,CAAC,IAC1DA,EAAG,aAAa,SAAW,KAAKD,EAAMC,CAAE,CAAC;AAGpD,QAAIU,EAAkB,YAAAC,KAASH,EAAc,CAAAG,EAAA,UAAUZ,EAAMW,CAAK;AAClE,IAAAA,KAAA,QAAAA,EAAO,aAAa,oBAAoBD,EAAM,KAAK,GAAG;AAAA,EAAC;AAE3D;AAEIhB,KACFQ,EAAgCK,CAAO,EAAE,QAAQ,SAAS,MAAM;AAAA,EAC9D,iBAAiB,CAAC,OAAO;AAAA,EACzB,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,SAAS;AAAA,CACV;"}
+{"version":3,"file":"field.js","sources":["../../designsystem/field/field.ts"],"sourcesContent":["import styles from '../styles.module.css';\n\nconst UUID = `:${Date.now().toString(36)}${Math.random().toString(36).slice(2, 5)}`;\nconst CSS_FIELD = styles.field.split(' ')[0];\nconst CSS_VALIDATION = styles.validation.split(' ')[0];\nconst OBSERVERS = new WeakMap();\n\nlet id = 0;\nfunction useId (el: Element) {\n  if (!el.id) el.id = `${UUID}${++id}`;\n\treturn el.id;\n};\n\n// Speed up MutationObserver by debouncing and only running when page is visible\nfunction createOptimizedMutationObserver(callback: MutationCallback) {\n  const queue: MutationRecord[] = [];\n  const observer = new MutationObserver((mutations) => {\n    if (!queue[0]) requestAnimationFrame(process);\n    queue.push(...mutations);\n  });\n\n  const process = () => {\n    callback(queue, observer);\n    queue.length = 0; // Reset queue\n  };\n\n  return observer;\n}\n\n\nfunction process(fields: HTMLCollectionOf<Element>) {\n  for(const field of fields) {\n    const labels: HTMLLabelElement[] = [];\n    const descs: string[] = [];\n    let input: Element | null = null;\n    let valid = true;\n\n    for (const el of field.getElementsByTagName('*')) {\n      if (el instanceof HTMLLabelElement) labels.push(el);\n      else if ('validity' in el && !(el instanceof HTMLButtonElement)) input = el;\n      else if (el.classList.contains(CSS_VALIDATION)) { // Must be before validation since it can also be a <p>\n        valid = el.getAttribute('data-color') === 'success';\n        descs.unshift(useId(el));\n      } else if (el instanceof HTMLParagraphElement) descs.push(useId(el));\n    }\n\n    if (input) for (const label of labels) label.htmlFor = useId(input);\n    input?.setAttribute('aria-describedby', descs.join(' '));\n    input?.setAttribute('aria-invalid', `${!valid}`);\n  }\n}\n\n// Automatically observe <body> if in browser\nif (typeof window !== 'undefined') observe(document.body);\n\nexport function observe (el: Element) {\n  if (OBSERVERS.has(el)) return;\n  const fields = el.getElementsByClassName(CSS_FIELD); // Reutrns a live HTMLCollection\n  const observer = createOptimizedMutationObserver(() => process(fields));\n  observer.observe(el, {\n    attributeFilter: ['class'],\n    attributes: true,\n    childList: true,\n    subtree: true\n  });\n\n  process(fields); // Initial run\n  OBSERVERS.set(el, observer);\n}\n\nexport function unobserve (el: Element) {\n  OBSERVERS.get(el)?.disconnect();\n}\n"],"names":["UUID","CSS_FIELD","styles","CSS_VALIDATION","OBSERVERS","id","useId","el","createOptimizedMutationObserver","callback","queue","observer","mutations","process","fields","field","labels","descs","input","valid","label","observe","unobserve","_a"],"mappings":";AAEA,MAAMA,IAAO,IAAI,KAAK,MAAM,SAAS,EAAE,CAAC,GAAG,KAAK,OAAA,EAAS,SAAS,EAAE,EAAE,MAAM,GAAG,CAAC,CAAC,IAC3EC,IAAYC,EAAO,MAAM,MAAM,GAAG,EAAE,CAAC,GACrCC,IAAiBD,EAAO,WAAW,MAAM,GAAG,EAAE,CAAC,GAC/CE,wBAAgB,QAAQ;AAE9B,IAAIC,IAAK;AACT,SAASC,EAAOC,GAAa;AACvB,SAACA,EAAG,OAAIA,EAAG,KAAK,GAAGP,CAAI,GAAG,EAAEK,CAAE,KAC5BE,EAAG;AACX;AAGA,SAASC,EAAgCC,GAA4B;AACnE,QAAMC,IAA0B,CAAC,GAC3BC,IAAW,IAAI,iBAAiB,CAACC,MAAc;AACnD,IAAKF,EAAM,CAAC,2BAAyBG,CAAO,GACtCH,EAAA,KAAK,GAAGE,CAAS;AAAA,EAAA,CACxB,GAEKC,IAAU,MAAM;AACpB,IAAAJ,EAASC,GAAOC,CAAQ,GACxBD,EAAM,SAAS;AAAA,EACjB;AAEO,SAAAC;AACT;AAGA,SAASE,EAAQC,GAAmC;AAClD,aAAUC,KAASD,GAAQ;AACzB,UAAME,IAA6B,CAAC,GAC9BC,IAAkB,CAAC;AACzB,QAAIC,IAAwB,MACxBC,IAAQ;AAEZ,eAAWZ,KAAMQ,EAAM,qBAAqB,GAAG;AAC7C,MAAIR,aAAc,mBAAyBS,EAAA,KAAKT,CAAE,IACzC,cAAcA,KAAM,EAAEA,aAAc,qBAA4BW,IAAAX,IAChEA,EAAG,UAAU,SAASJ,CAAc,KACnCgB,IAAAZ,EAAG,aAAa,YAAY,MAAM,WACpCU,EAAA,QAAQX,EAAMC,CAAE,CAAC,KACdA,aAAc,0BAA4B,KAAKD,EAAMC,CAAE,CAAC;AAGrE,QAAIW,EAAkB,YAAAE,KAASJ,EAAc,CAAAI,EAAA,UAAUd,EAAMY,CAAK;AAClE,IAAAA,KAAA,QAAAA,EAAO,aAAa,oBAAoBD,EAAM,KAAK,GAAG,IACtDC,KAAA,QAAAA,EAAO,aAAa,gBAAgB,GAAG,CAACC,CAAK;AAAA,EAAE;AAEnD;AAGI,OAAO,SAAW,OAAaE,EAAQ,SAAS,IAAI;AAEjD,SAASA,EAASd,GAAa;AAChC,MAAAH,EAAU,IAAIG,CAAE,EAAG;AACjB,QAAAO,IAASP,EAAG,uBAAuBN,CAAS,GAC5CU,IAAWH,EAAgC,MAAMK,EAAQC,CAAM,CAAC;AACtE,EAAAH,EAAS,QAAQJ,GAAI;AAAA,IACnB,iBAAiB,CAAC,OAAO;AAAA,IACzB,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,SAAS;AAAA,EAAA,CACV,GAEDM,EAAQC,CAAM,GACJV,EAAA,IAAIG,GAAII,CAAQ;AAC5B;AAEO,SAASW,EAAWf,GAAa;;AAC5B,GAAAgB,IAAAnB,EAAA,IAAIG,CAAE,MAAN,QAAAgB,EAAS;AACrB;"}

package/mtds/index.d.ts

@@ -1 +1,2 @@
 export * as styles from './styles.module.css.js';
+export * from './field/field';

package/mtds/index.js

@@ -1,6 +1,8 @@
-import * as s from "./styles.module.css.js";
-import "./field/field.js";
+import * as e from "./styles.module.css.js";
+import { observe as r, unobserve as t } from "./field/field.js";
 export {
-  s as styles
+  r as observe,
+  e as styles,
+  t as unobserve
 };
 //# sourceMappingURL=index.js.map