@mattilsynet/design 0.0.7 → 0.0.9

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,33 @@
-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 f from "../styles.module.css.js";
+import { IS_BROWSER as u, createOptimizedMutationObserver as b, useId as r } from "../utils.js";
+const d = f.field.split(" ")[0], m = f.validation.split(" ")[0], a = /* @__PURE__ */ new WeakMap();
+function c(s) {
+  for (const i of s) {
+    const o = [], n = [];
+    let t = null, l = !0;
+    for (const e of i.getElementsByTagName("*"))
+      e instanceof HTMLLabelElement ? o.push(e) : "validity" in e && !(e instanceof HTMLButtonElement) ? t = e : e.classList.contains(m) ? (l = e.getAttribute("data-color") === "success", n.unshift(r(e))) : e instanceof HTMLParagraphElement && n.push(r(e));
+    if (t) for (const e of o) e.htmlFor = r(t);
+    t == null || t.setAttribute("aria-describedby", n.join(" ")), t == null || t.setAttribute("aria-invalid", `${!l}`);
+  }
 }
-function d(n) {
-  const s = [], i = new MutationObserver((e) => {
-    s[0] || requestAnimationFrame(t), s.push(...e);
-  }), t = () => {
-    n(s, i), s.length = 0;
-  };
-  return t(), i;
+u && v(document.body);
+function v(s) {
+  if (a.has(s)) return;
+  const i = s.getElementsByClassName(d), o = b(() => c(i));
+  o.observe(s, {
+    attributeFilter: ["class"],
+    attributes: !0,
+    childList: !0,
+    subtree: !0
+  }), c(i), a.set(s, o);
 }
-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(s) {
+  var i;
+  (i = a.get(s)) == null || i.disconnect();
 }
-c && d(m).observe(document.body, {
-  attributeFilter: ["class"],
-  attributes: !0,
-  childList: !0,
-  subtree: !0
-});
+export {
+  v as observe,
+  L 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';\nimport { IS_BROWSER, createOptimizedMutationObserver, useId } from '../utils';\n\nconst CSS_FIELD = styles.field.split(' ')[0];\nconst CSS_VALIDATION = styles.validation.split(' ')[0];\nconst OBSERVERS = new WeakMap();\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 (IS_BROWSER) 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":["CSS_FIELD","styles","CSS_VALIDATION","OBSERVERS","process","fields","field","labels","descs","input","valid","el","useId","label","IS_BROWSER","observe","observer","createOptimizedMutationObserver","unobserve","_a"],"mappings":";;AAGA,MAAMA,IAAYC,EAAO,MAAM,MAAM,GAAG,EAAE,CAAC,GACrCC,IAAiBD,EAAO,WAAW,MAAM,GAAG,EAAE,CAAC,GAC/CE,wBAAgB,QAAQ;AAG9B,SAASC,EAAQC,GAAmC;AAClD,aAAUC,KAASD,GAAQ;AACzB,UAAME,IAA6B,CAAC,GAC9BC,IAAkB,CAAC;AACzB,QAAIC,IAAwB,MACxBC,IAAQ;AAEZ,eAAWC,KAAML,EAAM,qBAAqB,GAAG;AAC7C,MAAIK,aAAc,mBAAyBJ,EAAA,KAAKI,CAAE,IACzC,cAAcA,KAAM,EAAEA,aAAc,qBAA4BF,IAAAE,IAChEA,EAAG,UAAU,SAAST,CAAc,KACnCQ,IAAAC,EAAG,aAAa,YAAY,MAAM,WACpCH,EAAA,QAAQI,EAAMD,CAAE,CAAC,KACdA,aAAc,0BAA4B,KAAKC,EAAMD,CAAE,CAAC;AAGrE,QAAIF,EAAkB,YAAAI,KAASN,EAAc,CAAAM,EAAA,UAAUD,EAAMH,CAAK;AAClE,IAAAA,KAAA,QAAAA,EAAO,aAAa,oBAAoBD,EAAM,KAAK,GAAG,IACtDC,KAAA,QAAAA,EAAO,aAAa,gBAAgB,GAAG,CAACC,CAAK;AAAA,EAAE;AAEnD;AAGII,KAAoBC,EAAA,SAAS,IAAI;AAE9B,SAASA,EAASJ,GAAa;AAChC,MAAAR,EAAU,IAAIQ,CAAE,EAAG;AACjB,QAAAN,IAASM,EAAG,uBAAuBX,CAAS,GAC5CgB,IAAWC,EAAgC,MAAMb,EAAQC,CAAM,CAAC;AACtE,EAAAW,EAAS,QAAQL,GAAI;AAAA,IACnB,iBAAiB,CAAC,OAAO;AAAA,IACzB,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,SAAS;AAAA,EAAA,CACV,GAEDP,EAAQC,CAAM,GACJF,EAAA,IAAIQ,GAAIK,CAAQ;AAC5B;AAEO,SAASE,EAAWP,GAAa;;AAC5B,GAAAQ,IAAAhB,EAAA,IAAIQ,CAAE,MAAN,QAAAQ,EAAS;AACrB;"}

package/mtds/index.d.ts

@@ -1 +1,3 @@
 export * as styles from './styles.module.css.js';
+export declare function observe(el: Element): void;
+export declare function unobserve(el: Element): void;

package/mtds/index.js

@@ -1,6 +1,15 @@
-import * as s from "./styles.module.css.js";
-import "./field/field.js";
+import * as v from "./styles.module.css.js";
+import { observe as o, unobserve as s } from "./field/field.js";
+import { observe as r, unobserve as b } from "./popover/popover.js";
+function u(e) {
+  o(e), r(e);
+}
+function m(e) {
+  s(e), b(e);
+}
 export {
-  s as styles
+  u as observe,
+  v as styles,
+  m as unobserve
 };
 //# sourceMappingURL=index.js.map

package/mtds/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}
+{"version":3,"file":"index.js","sources":["../designsystem/index.ts"],"sourcesContent":["export * as styles from './styles.module.css';\nimport * as field from './field/field';\nimport * as popover from './popover/popover';\n\nexport function observe(el: Element) {\n  field.observe(el);\n  popover.observe(el);\n}\n\nexport function unobserve(el: Element) {\n  field.unobserve(el);\n  popover.unobserve(el);\n}"],"names":["observe","el","field.observe","popover.observe","unobserve","field.unobserve","popover.unobserve"],"mappings":";;;AAIO,SAASA,EAAQC,GAAa;AACnCC,EAAAA,EAAcD,CAAE,GAChBE,EAAgBF,CAAE;AACpB;AAEO,SAASG,EAAUH,GAAa;AACrCI,EAAAA,EAAgBJ,CAAE,GAClBK,EAAkBL,CAAE;AACtB;"}

package/mtds/input/input.d.ts

@@ -0,0 +1 @@
+export {};

package/mtds/popover/popover.d.ts

@@ -0,0 +1,3 @@
+export declare function anchorPosition(anchor: HTMLElement, popover: HTMLElement): void;
+export declare function observe(el: Node): void;
+export declare function unobserve(el: Node): void;

package/mtds/popover/popover.js

@@ -0,0 +1,40 @@
+import { reposition as d } from "nanopop";
+import a from "../styles.module.css.js";
+import { IS_BROWSER as m } from "../utils.js";
+const c = a.popover.split(" ")[0], g = { toJSON: () => "", bottom: 0, height: 0, left: 0, right: 0, top: 0, width: 0, x: 0, y: 0 }, u = /(top|right|bottom|left)-(start|middle|end)/;
+m && l(document);
+function v(e, n) {
+  const i = n.getAttribute("data-position") || "bottom-start";
+  if (!u.test(i)) return console.error(`Found invalid data-position="${i}"
+- It must be [top|right|bottom|left]-[start|middle|end]
+- Found on element:`, n);
+  const t = () => d(e, n, {
+    container: { ...g, bottom: window.innerHeight, right: window.innerWidth },
+    margin: 4,
+    // Margin between the popper element and the reference
+    padding: 16,
+    // Minimum space between the popper and the container
+    position: i
+    // [top|right|bottom|left]-[start|middle|end]
+  }), o = ({ newState: s }) => {
+    s !== "open" && (document.removeEventListener("DOMContentReady", t), n.removeEventListener("toggle", o), window.removeEventListener("load", t), window.removeEventListener("resize", t), window.removeEventListener("scroll", t, !0));
+  };
+  document.addEventListener("DOMContentReady", t), document.fonts.ready.then(t), n.addEventListener("toggle", o), window.addEventListener("load", t), window.addEventListener("resize", t), window.addEventListener("scroll", t, !0);
+}
+function r({ target: e, newState: n }) {
+  var o;
+  const t = n === "open" && e instanceof HTMLElement && e.classList.contains(c) && ((o = e.getRootNode()) == null ? void 0 : o.querySelector(`[popovertarget="${e.id}"]`));
+  t && v(t, e);
+}
+function l(e) {
+  e.addEventListener("toggle", r, !0);
+}
+function f(e) {
+  e.removeEventListener("toggle", r, !0);
+}
+export {
+  v as anchorPosition,
+  l as observe,
+  f as unobserve
+};
+//# sourceMappingURL=popover.js.map

package/mtds/popover/popover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover.js","sources":["../../designsystem/popover/popover.ts"],"sourcesContent":["import { type NanoPopPosition, reposition } from 'nanopop';\nimport styles from '../styles.module.css';\nimport { IS_BROWSER } from '../utils';\n\nconst CSS_POPOVER = styles.popover.split(' ')[0];\nconst CONTAINER = { toJSON: () => '', bottom: 0, height: 0, left: 0, right: 0, top: 0, width: 0, x: 0, y: 0 };\nconst POSITIONS = /(top|right|bottom|left)-(start|middle|end)/;\ntype Toggle = Event & { newState?: string };\n\nif (IS_BROWSER) observe(document);\n\n// Not exposed as a hook, as it is nice to allow consuming components to use it as a callback\nexport function anchorPosition(anchor: HTMLElement, popover: HTMLElement) {\n  const position = (popover.getAttribute('data-position') || 'bottom-start') as NanoPopPosition;\n  if (!POSITIONS.test(position)) return console.error(`Found invalid data-position=\"${position}\"\\n- It must be [top|right|bottom|left]-[start|middle|end]\\n- Found on element:`, popover);\n\n  const update = () =>\n    reposition(anchor, popover, {\n      container: { ...CONTAINER, bottom: window.innerHeight, right: window.innerWidth },\n      margin: 4, // Margin between the popper element and the reference\n      padding: 16, // Minimum space between the popper and the container\n      position // [top|right|bottom|left]-[start|middle|end]\n    });\n\n  const removeEvent = ({ newState }: Toggle) => {\n    if (newState === 'open') return;\n    document.removeEventListener('DOMContentReady', update);\n    popover.removeEventListener('toggle', removeEvent);\n    window.removeEventListener('load', update);\n    window.removeEventListener('resize', update);\n    window.removeEventListener('scroll', update, true);\n  }\n  \n\n  document.addEventListener('DOMContentReady', update);\n  document.fonts.ready.then(update); // Inital render and when fonts load\n  popover.addEventListener('toggle', removeEvent);\n  window.addEventListener('load', update);\n  window.addEventListener('resize', update);\n  window.addEventListener('scroll', update, true); // Use capture to also listen for elements with overflow\n}\n\nfunction process ({ target: el, newState }: Toggle){\n  const isPopping = newState === 'open' && el instanceof HTMLElement && el.classList.contains(CSS_POPOVER);\n  const anchor = isPopping && (el.getRootNode() as ShadowRoot)?.querySelector<HTMLElement>(`[popovertarget=\"${el.id}\"]`);\n\n  if (anchor) anchorPosition(anchor, el);\n}\n\nexport function observe(el: Node) {\n  el.addEventListener('toggle', process, true); // Use capture since toggle does not bubble\n}\nexport function unobserve(el: Node) {\n  el.removeEventListener('toggle', process, true); // Use capture since toggle does not bubble\n}"],"names":["CSS_POPOVER","styles","CONTAINER","POSITIONS","IS_BROWSER","anchorPosition","anchor","popover","position","update","reposition","removeEvent","newState","process","el","_a","observe","unobserve"],"mappings":";;;AAIA,MAAMA,IAAcC,EAAO,QAAQ,MAAM,GAAG,EAAE,CAAC,GACzCC,IAAY,EAAE,QAAQ,MAAM,IAAI,QAAQ,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,OAAO,GAAG,GAAG,GAAG,GAAG,EAAE,GACtGC,IAAY;AAGdC,OAAoB,QAAQ;AAGhB,SAAAC,EAAeC,GAAqBC,GAAsB;AACxE,QAAMC,IAAYD,EAAQ,aAAa,eAAe,KAAK;AACvD,MAAA,CAACJ,EAAU,KAAKK,CAAQ,EAAU,QAAA,QAAQ,MAAM,gCAAgCA,CAAQ;AAAA;AAAA,sBAAmFD,CAAO;AAEtL,QAAME,IAAS,MACbC,EAAWJ,GAAQC,GAAS;AAAA,IAC1B,WAAW,EAAE,GAAGL,GAAW,QAAQ,OAAO,aAAa,OAAO,OAAO,WAAW;AAAA,IAChF,QAAQ;AAAA;AAAA,IACR,SAAS;AAAA;AAAA,IACT,UAAAM;AAAA;AAAA,EAAA,CACD,GAEGG,IAAc,CAAC,EAAE,UAAAC,QAAuB;AAC5C,IAAIA,MAAa,WACR,SAAA,oBAAoB,mBAAmBH,CAAM,GAC9CF,EAAA,oBAAoB,UAAUI,CAAW,GAC1C,OAAA,oBAAoB,QAAQF,CAAM,GAClC,OAAA,oBAAoB,UAAUA,CAAM,GACpC,OAAA,oBAAoB,UAAUA,GAAQ,EAAI;AAAA,EACnD;AAGS,WAAA,iBAAiB,mBAAmBA,CAAM,GAC1C,SAAA,MAAM,MAAM,KAAKA,CAAM,GACxBF,EAAA,iBAAiB,UAAUI,CAAW,GACvC,OAAA,iBAAiB,QAAQF,CAAM,GAC/B,OAAA,iBAAiB,UAAUA,CAAM,GACjC,OAAA,iBAAiB,UAAUA,GAAQ,EAAI;AAChD;AAEA,SAASI,EAAS,EAAE,QAAQC,GAAI,UAAAF,KAAmB;;AAE3C,QAAAN,IADYM,MAAa,UAAUE,aAAc,eAAeA,EAAG,UAAU,SAASd,CAAW,OAC1Ee,IAAAD,EAAG,kBAAH,gBAAAC,EAAiC,cAA2B,mBAAmBD,EAAG,EAAE;AAE7G,EAAAR,KAAuBD,EAAAC,GAAQQ,CAAE;AACvC;AAEO,SAASE,EAAQF,GAAU;AAC7B,EAAAA,EAAA,iBAAiB,UAAUD,GAAS,EAAI;AAC7C;AACO,SAASI,EAAUH,GAAU;AAC/B,EAAAA,EAAA,oBAAoB,UAAUD,GAAS,EAAI;AAChD;"}