@mattilsynet/design 0.0.13 → 0.1.0

package/mtds/pagination/pagination.stories.d.ts

@@ -0,0 +1,10 @@
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Buttons: Story;
+export declare const Sizes: Story;
+export declare const Helper: Story;

package/mtds/popover/popover.js

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

package/mtds/popover/popover.js.map

@@ -1 +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, off, on } 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    off(document, 'DOMContentReady', update);\n    off(popover, 'toggle', removeEvent);\n    off(window, 'load,resize,scroll', update, true);\n  }\n  \n\n  document.fonts.ready.then(update); // Inital render and when fonts load\n  on(document, 'DOMContentReady', update);\n  on(popover, 'toggle', removeEvent);\n  on(window, 'load,resize,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","off","on","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,WACbC,EAAA,UAAU,mBAAmBJ,CAAM,GACnCI,EAAAN,GAAS,UAAUI,CAAW,GAC9BE,EAAA,QAAQ,sBAAsBJ,GAAQ,EAAI;AAAA,EAChD;AAGS,WAAA,MAAM,MAAM,KAAKA,CAAM,GAC7BK,EAAA,UAAU,mBAAmBL,CAAM,GACnCK,EAAAP,GAAS,UAAUI,CAAW,GAC9BG,EAAA,QAAQ,sBAAsBL,GAAQ,EAAI;AAC/C;AAEA,SAASM,EAAS,EAAE,QAAQC,GAAI,UAAAJ,KAAmB;;AAE3C,QAAAN,IADYM,MAAa,UAAUI,aAAc,eAAeA,EAAG,UAAU,SAAShB,CAAW,OAC1EiB,IAAAD,EAAG,kBAAH,gBAAAC,EAAiC,cAA2B,mBAAmBD,EAAG,EAAE;AAE7G,EAAAV,KAAuBD,EAAAC,GAAQU,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;"}
+{"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, QUICK_EVENT, off, on } 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    off(document, 'DOMContentReady', update, QUICK_EVENT);\n    off(popover, 'toggle', removeEvent, QUICK_EVENT);\n    off(window, 'load,resize,scroll', update, QUICK_EVENT);\n  }\n  \n\n  document.fonts.ready.then(update); // Inital render and when fonts load\n  on(document, 'DOMContentReady', update, QUICK_EVENT);\n  on(popover, 'toggle', removeEvent, QUICK_EVENT);\n  on(window, 'load,resize,scroll', update, QUICK_EVENT);\n}\n\nfunction handleToggle ({ 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  on(el, 'toggle', handleToggle, QUICK_EVENT); // Use capture since toggle does not bubble\n}\nexport function unobserve(el: Node) {\n  off(el, 'toggle', handleToggle, QUICK_EVENT); // Use capture since toggle does not bubble\n}"],"names":["CSS_POPOVER","styles","CONTAINER","POSITIONS","IS_BROWSER","anchorPosition","anchor","popover","position","update","reposition","removeEvent","newState","off","QUICK_EVENT","on","handleToggle","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,WACbC,EAAA,UAAU,mBAAmBJ,GAAQK,CAAW,GAChDD,EAAAN,GAAS,UAAUI,GAAaG,CAAW,GAC3CD,EAAA,QAAQ,sBAAsBJ,GAAQK,CAAW;AAAA,EACvD;AAGS,WAAA,MAAM,MAAM,KAAKL,CAAM,GAC7BM,EAAA,UAAU,mBAAmBN,GAAQK,CAAW,GAChDC,EAAAR,GAAS,UAAUI,GAAaG,CAAW,GAC3CC,EAAA,QAAQ,sBAAsBN,GAAQK,CAAW;AACtD;AAEA,SAASE,EAAc,EAAE,QAAQC,GAAI,UAAAL,KAAmB;;AAEhD,QAAAN,IADYM,MAAa,UAAUK,aAAc,eAAeA,EAAG,UAAU,SAASjB,CAAW,OAC1EkB,IAAAD,EAAG,kBAAH,gBAAAC,EAAiC,cAA2B,mBAAmBD,EAAG,EAAE;AAE7G,EAAAX,KAAuBD,EAAAC,GAAQW,CAAE;AACvC;AAEO,SAASE,EAAQF,GAAU;AAC7B,EAAAF,EAAAE,GAAI,UAAUD,GAAcF,CAAW;AAC5C;AACO,SAASM,EAAUH,GAAU;AAC9B,EAAAJ,EAAAI,GAAI,UAAUD,GAAcF,CAAW;AAC7C;"}

package/mtds/popover/popover.stories.d.ts

@@ -0,0 +1,10 @@
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Dropdown: Story;
+export declare const Position: Story;
+export declare const Close: Story;
+export declare const Arrow: Story;