@mattilsynet/design 0.2.13 → 0.2.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -1,8 +1,31 @@
1
- # Design
2
- Mattilsynets designsystem og designmanual
1
+ `@mattilsynet/design`
2
+ ================
3
3
 
4
- ## Releasing a new version
5
- 1. Manually update the version number in `package.json`
4
+ Mattilsynets designsystem bygger oppå [designsystemet.no](https://www.designsystemet.no/), men utvider med egenart, visuelle identitet og interne behov. Designsystemet fungerer som et felles språk mellom team og fagfelt, slik at vi lettere kan skape gode og gjenkjennbare brukeropplevelser som er tilgjengelig for alle.
5
+
6
+ ## Kom i gang
7
+
8
+ - Se [design.mattilsynet.no](https://design.mattilsynet.no/?path=/docs/designsystem-introduksjon--docs) for hvordan bruke `@mattilsynet/design`
9
+
10
+ ## Henvendelser
11
+
12
+ - Spørsmål knyttet til koden eller prosjektet kan stilles som issues her på GitHub
13
+ - Mattilsynet-ansatte kan benytte Slack-kanalen [#designsystem](https://mattilsynet-hq.slack.com/archives/C03FAJ7N1EU).
14
+
15
+ ## Utvikling
16
+
17
+ Klon ned `@mattilsynet/design`, installer og kjør:
18
+ 1. `git clone git@github.com:Mattilsynet/design.git`
19
+ 2. `cd design`
20
+ 3. `npm install`
21
+ 4. `npm run storybook`
22
+ - Du har nå dokumentasjonen kjørende med hot-reloading
23
+ 5. Sjekk ut egen branck `git checkout -b fix/din-branch-her` - vi følger [conventional commits navnekonvensjon](https://www.conventionalcommits.org/)
24
+ 6. Lag PR mot `next` branchen
25
+
26
+
27
+ ## Publisering
28
+ 1. Mannuelt oppdatert versjonsnummer i `package.json` (vi følger [semver](https://semver.org/))
6
29
  2. Run `npm install`
7
30
  3. Commit the update with the message `chore: update version to x.y.z` to the `next` branch, and push it
8
31
  4. Create a pull request from `next` into `main`
@@ -7,6 +7,7 @@ type Story = StoryObj<typeof meta>;
7
7
  export declare const Default: Story;
8
8
  export declare const Sizes: Story;
9
9
  export declare const Colors: Story;
10
+ export declare const Nowrap: Story;
10
11
  export declare const Pressed: Story;
11
12
  export declare const WithArrows: Story;
12
13
  export declare const WithIcons: Story;
@@ -1,2 +1,2 @@
1
- export declare function observe(el: Element | Document): void;
2
- export declare function unobserve(el: Element | Document): void;
1
+ export declare function observe(el: Element): void;
2
+ export declare function unobserve(el: Element): void;
@@ -1,40 +1,38 @@
1
1
  import r from "../styles.module.css.js";
2
- import { onAdd as v, on as g, QUICK_EVENT as c, off as A, isInputLike as f, useId as l } from "../utils.js";
3
- const I = r.field.split(" ")[0], d = r.validation.split(" "), h = d[0], u = /* @__PURE__ */ new WeakMap();
4
- function p(t) {
5
- for (const n of t) {
6
- const o = [], i = [];
7
- let e = null, a = !0;
8
- for (const s of n.getElementsByTagName("*"))
9
- s instanceof HTMLLabelElement ? o.push(s) : f(s) ? e = s : s.classList.contains(h) ? (a = s.getAttribute("data-color") === "success", i.unshift(l(s))) : s instanceof HTMLParagraphElement && i.push(l(s));
10
- if (e) for (const s of o) s.htmlFor = l(e);
11
- e && m(e), e == null || e.setAttribute("aria-describedby", i.join(" ")), e == null || e.setAttribute("aria-invalid", `${!a}`);
2
+ import { onMutation as f, on as I, QUICK_EVENT as c, off as g, isInputLike as u, useId as a } from "../utils.js";
3
+ const d = r.field.split(" ")[0], b = r.validation.split(" "), A = b[0];
4
+ function L(e) {
5
+ for (const i of e) {
6
+ const s = [], o = [];
7
+ let t = null, l = !0;
8
+ for (const n of i.getElementsByTagName("*"))
9
+ n instanceof HTMLLabelElement ? s.push(n) : u(n) ? t = n : n.classList.contains(A) ? (l = n.getAttribute("data-color") === "success", o.unshift(a(n))) : n instanceof HTMLParagraphElement && o.push(a(n));
10
+ if (t) for (const n of s) n.htmlFor = a(t);
11
+ t && v(t), t == null || t.setAttribute("aria-describedby", o.join(" ")), t == null || t.setAttribute("aria-invalid", `${!l}`);
12
12
  }
13
13
  }
14
- function b({ target: t }) {
15
- f(t) && m(t);
14
+ function m({ target: e }) {
15
+ u(e) && v(e);
16
16
  }
17
- function m(t) {
18
- const n = t == null ? void 0 : t.nextElementSibling, o = n == null ? void 0 : n.getAttribute("data-count");
19
- if (n && o) {
20
- const i = Number(o) - t.value.length, e = i < 0;
21
- if (n.getAttribute("aria-live") === "polite" !== e) {
22
- n.setAttribute("aria-live", e ? "polite" : "off");
23
- for (const s of d) n.classList.toggle(s, e);
17
+ function v(e) {
18
+ const i = e == null ? void 0 : e.nextElementSibling, s = i == null ? void 0 : i.getAttribute("data-count");
19
+ if (i && s) {
20
+ const o = Number(s) - e.value.length, t = o < 0;
21
+ if (i.getAttribute("aria-live") === "polite" !== t) {
22
+ i.setAttribute("aria-live", t ? "polite" : "off");
23
+ for (const n of b) i.classList.toggle(n, t);
24
24
  }
25
- n.textContent = `${Math.abs(i)} tegn ${e ? "for mye" : "igjen"}`;
25
+ i.textContent = `${Math.abs(o)} tegn ${t ? "for mye" : "igjen"}`;
26
26
  }
27
27
  }
28
- function E(t) {
29
- const n = t.getElementsByClassName(I), o = v(r.fieldChildAdded, () => p(n));
30
- u.set(t, o), o.observe(t), g(t, "input", b, c);
28
+ function S(e) {
29
+ f(e, d, L), I(e, "input", m, c);
31
30
  }
32
- function S(t) {
33
- var n;
34
- (n = u.get(t)) == null || n.disconnect(t), A(t, "input", b, c);
31
+ function E(e) {
32
+ f(e, d, !1), g(e, "input", m, c);
35
33
  }
36
34
  export {
37
- E as observe,
38
- S as unobserve
35
+ S as observe,
36
+ E as unobserve
39
37
  };
40
38
  //# sourceMappingURL=field.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"field.js","sources":["../../designsystem/field/field.ts"],"sourcesContent":["import styles from '../styles.module.css';\nimport { QUICK_EVENT, isInputLike, off, on, onAdd, useId } from '../utils';\n\nconst CSS_FIELD = styles.field.split(' ')[0];\nconst CSS_VALIDATIONS = styles.validation.split(' ');\nconst CSS_VALIDATION = CSS_VALIDATIONS[0];\nconst BOUND = new WeakMap<Element | Document, ReturnType<typeof onAdd>>();\n\nfunction renderAria(fields: HTMLCollectionOf<Element>) {\n for(const field of fields) {\n const labels: HTMLLabelElement[] = [];\n const descs: string[] = [];\n let input: HTMLInputElement | 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 (isInputLike(el)) input = el;\n else if (el.classList.contains(CSS_VALIDATION)) { // Must be before instanceof HTMLParagraphElement since validation 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 if (input) renderCounter(input);\n\n input?.setAttribute('aria-describedby', descs.join(' '));\n input?.setAttribute('aria-invalid', `${!valid}`);\n }\n}\nfunction handleInput({ target }: Event) {\n if (isInputLike(target)) renderCounter(target);\n}\n\nfunction renderCounter(input: HTMLInputElement) {\n const el = input?.nextElementSibling;\n const limit = el?.getAttribute('data-count');\n\n if (el && limit) {\n const remainder = Number(limit) - input.value.length;\n const nextInvalid = remainder < 0;\n const prevInvalid = el.getAttribute('aria-live') === 'polite';\n\n if (prevInvalid !== nextInvalid) {\n el.setAttribute('aria-live', nextInvalid ? 'polite' : 'off');\n for (const css of CSS_VALIDATIONS) el.classList.toggle(css, nextInvalid);\n }\n el.textContent = `${Math.abs(remainder)} tegn ${nextInvalid ? 'for mye' : 'igjen'}`;\n }\n}\n\nexport function observe (el: Element | Document) {\n const fields = el.getElementsByClassName(CSS_FIELD);\n const add = onAdd(styles.fieldChildAdded, () => renderAria(fields));\n BOUND.set(el, add);\n add.observe(el);\n on(el, 'input', handleInput, QUICK_EVENT);\n}\n\nexport function unobserve (el: Element | Document) {\n BOUND.get(el)?.disconnect(el);\n off(el, 'input', handleInput, QUICK_EVENT);\n}\n\n\n// TODO: Remove invalid when errormessage is gone"],"names":["CSS_FIELD","styles","CSS_VALIDATIONS","CSS_VALIDATION","BOUND","renderAria","fields","field","labels","descs","input","valid","el","isInputLike","useId","label","handleInput","target","renderCounter","limit","remainder","nextInvalid","css","observe","add","onAdd","on","QUICK_EVENT","unobserve","_a","off"],"mappings":";;AAGA,MAAMA,IAAYC,EAAO,MAAM,MAAM,GAAG,EAAE,CAAC,GACrCC,IAAkBD,EAAO,WAAW,MAAM,GAAG,GAC7CE,IAAiBD,EAAgB,CAAC,GAClCE,wBAAY,QAAsD;AAExE,SAASC,EAAWC,GAAmC;AACrD,aAAUC,KAASD,GAAQ;AACzB,UAAME,IAA6B,CAAC,GAC9BC,IAAkB,CAAC;AACzB,QAAIC,IAAiC,MACjCC,IAAQ;AAEZ,eAAWC,KAAML,EAAM,qBAAqB,GAAG;AAC7C,MAAIK,aAAc,mBAAyBJ,EAAA,KAAKI,CAAE,IACzCC,EAAYD,CAAE,IAAWF,IAAAE,IACzBA,EAAG,UAAU,SAAST,CAAc,KACnCQ,IAAAC,EAAG,aAAa,YAAY,MAAM,WACpCH,EAAA,QAAQK,EAAMF,CAAE,CAAC,KACdA,aAAc,0BAA4B,KAAKE,EAAMF,CAAE,CAAC;AAGrE,QAAIF,EAAkB,YAAAK,KAASP,EAAc,CAAAO,EAAA,UAAUD,EAAMJ,CAAK;AAC9D,IAAAA,OAAqBA,CAAK,GAE9BA,KAAA,QAAAA,EAAO,aAAa,oBAAoBD,EAAM,KAAK,GAAG,IACtDC,KAAA,QAAAA,EAAO,aAAa,gBAAgB,GAAG,CAACC,CAAK;AAAA,EAAE;AAEnD;AACA,SAASK,EAAY,EAAE,QAAAC,KAAiB;AACtC,EAAIJ,EAAYI,CAAM,KAAGC,EAAcD,CAAM;AAC/C;AAEA,SAASC,EAAcR,GAAyB;AAC9C,QAAME,IAAKF,KAAA,gBAAAA,EAAO,oBACZS,IAAQP,KAAA,gBAAAA,EAAI,aAAa;AAE/B,MAAIA,KAAMO,GAAO;AACf,UAAMC,IAAY,OAAOD,CAAK,IAAIT,EAAM,MAAM,QACxCW,IAAcD,IAAY;AAGhC,QAFoBR,EAAG,aAAa,WAAW,MAAM,aAEjCS,GAAa;AAC/B,MAAAT,EAAG,aAAa,aAAaS,IAAc,WAAW,KAAK;AAC3D,iBAAWC,KAAOpB,EAAiB,CAAAU,EAAG,UAAU,OAAOU,GAAKD,CAAW;AAAA,IAAA;AAEtE,IAAAT,EAAA,cAAc,GAAG,KAAK,IAAIQ,CAAS,CAAC,SAASC,IAAc,YAAY,OAAO;AAAA,EAAA;AAErF;AAEO,SAASE,EAASX,GAAwB;AACzC,QAAAN,IAASM,EAAG,uBAAuBZ,CAAS,GAC5CwB,IAAMC,EAAMxB,EAAO,iBAAiB,MAAMI,EAAWC,CAAM,CAAC;AAC5D,EAAAF,EAAA,IAAIQ,GAAIY,CAAG,GACjBA,EAAI,QAAQZ,CAAE,GACXc,EAAAd,GAAI,SAASI,GAAaW,CAAW;AAC1C;AAEO,SAASC,EAAWhB,GAAwB;;AACjD,GAAAiB,IAAAzB,EAAM,IAAIQ,CAAE,MAAZ,QAAAiB,EAAe,WAAWjB,IACtBkB,EAAAlB,GAAI,SAASI,GAAaW,CAAW;AAC3C;"}
1
+ {"version":3,"file":"field.js","sources":["../../designsystem/field/field.ts"],"sourcesContent":["import styles from '../styles.module.css';\nimport { QUICK_EVENT, isInputLike, off, on, onMutation, useId } from '../utils';\n\nconst CSS_FIELD = styles.field.split(' ')[0];\nconst CSS_VALIDATIONS = styles.validation.split(' ');\nconst CSS_VALIDATION = CSS_VALIDATIONS[0];\n\nfunction renderAria(fields: HTMLCollectionOf<Element>) {\n for(const field of fields) {\n const labels: HTMLLabelElement[] = [];\n const descs: string[] = [];\n let input: HTMLInputElement | 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 (isInputLike(el)) input = el;\n else if (el.classList.contains(CSS_VALIDATION)) { // Must be before instanceof HTMLParagraphElement since validation 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 if (input) renderCounter(input);\n\n input?.setAttribute('aria-describedby', descs.join(' '));\n input?.setAttribute('aria-invalid', `${!valid}`);\n }\n}\nfunction handleInput({ target }: Event) {\n if (isInputLike(target)) renderCounter(target);\n}\n\nfunction renderCounter(input: HTMLInputElement) {\n const el = input?.nextElementSibling;\n const limit = el?.getAttribute('data-count');\n\n if (el && limit) {\n const remainder = Number(limit) - input.value.length;\n const nextInvalid = remainder < 0;\n const prevInvalid = el.getAttribute('aria-live') === 'polite';\n\n if (prevInvalid !== nextInvalid) {\n el.setAttribute('aria-live', nextInvalid ? 'polite' : 'off');\n for (const css of CSS_VALIDATIONS) el.classList.toggle(css, nextInvalid);\n }\n el.textContent = `${Math.abs(remainder)} tegn ${nextInvalid ? 'for mye' : 'igjen'}`;\n }\n}\n\nexport function observe (el: Element) {\n onMutation(el, CSS_FIELD, renderAria);\n on(el, 'input', handleInput, QUICK_EVENT);\n}\n\nexport function unobserve (el: Element) {\n onMutation(el, CSS_FIELD, false);\n off(el, 'input', handleInput, QUICK_EVENT);\n}\n\n// TODO: Remove invalid when errormessage is gone"],"names":["CSS_FIELD","styles","CSS_VALIDATIONS","CSS_VALIDATION","renderAria","fields","field","labels","descs","input","valid","el","isInputLike","useId","label","handleInput","target","renderCounter","limit","remainder","nextInvalid","css","observe","onMutation","on","QUICK_EVENT","unobserve","off"],"mappings":";;AAGA,MAAMA,IAAYC,EAAO,MAAM,MAAM,GAAG,EAAE,CAAC,GACrCC,IAAkBD,EAAO,WAAW,MAAM,GAAG,GAC7CE,IAAiBD,EAAgB,CAAC;AAExC,SAASE,EAAWC,GAAmC;AACrD,aAAUC,KAASD,GAAQ;AACzB,UAAME,IAA6B,CAAC,GAC9BC,IAAkB,CAAC;AACzB,QAAIC,IAAiC,MACjCC,IAAQ;AAEZ,eAAWC,KAAML,EAAM,qBAAqB,GAAG;AAC7C,MAAIK,aAAc,mBAAyBJ,EAAA,KAAKI,CAAE,IACzCC,EAAYD,CAAE,IAAWF,IAAAE,IACzBA,EAAG,UAAU,SAASR,CAAc,KACnCO,IAAAC,EAAG,aAAa,YAAY,MAAM,WACpCH,EAAA,QAAQK,EAAMF,CAAE,CAAC,KACdA,aAAc,0BAA4B,KAAKE,EAAMF,CAAE,CAAC;AAGrE,QAAIF,EAAkB,YAAAK,KAASP,EAAc,CAAAO,EAAA,UAAUD,EAAMJ,CAAK;AAC9D,IAAAA,OAAqBA,CAAK,GAE9BA,KAAA,QAAAA,EAAO,aAAa,oBAAoBD,EAAM,KAAK,GAAG,IACtDC,KAAA,QAAAA,EAAO,aAAa,gBAAgB,GAAG,CAACC,CAAK;AAAA,EAAE;AAEnD;AACA,SAASK,EAAY,EAAE,QAAAC,KAAiB;AACtC,EAAIJ,EAAYI,CAAM,KAAGC,EAAcD,CAAM;AAC/C;AAEA,SAASC,EAAcR,GAAyB;AAC9C,QAAME,IAAKF,KAAA,gBAAAA,EAAO,oBACZS,IAAQP,KAAA,gBAAAA,EAAI,aAAa;AAE/B,MAAIA,KAAMO,GAAO;AACf,UAAMC,IAAY,OAAOD,CAAK,IAAIT,EAAM,MAAM,QACxCW,IAAcD,IAAY;AAGhC,QAFoBR,EAAG,aAAa,WAAW,MAAM,aAEjCS,GAAa;AAC/B,MAAAT,EAAG,aAAa,aAAaS,IAAc,WAAW,KAAK;AAC3D,iBAAWC,KAAOnB,EAAiB,CAAAS,EAAG,UAAU,OAAOU,GAAKD,CAAW;AAAA,IAAA;AAEtE,IAAAT,EAAA,cAAc,GAAG,KAAK,IAAIQ,CAAS,CAAC,SAASC,IAAc,YAAY,OAAO;AAAA,EAAA;AAErF;AAEO,SAASE,EAASX,GAAa;AACzB,EAAAY,EAAAZ,GAAIX,GAAWI,CAAU,GACjCoB,EAAAb,GAAI,SAASI,GAAaU,CAAW;AAC1C;AAEO,SAASC,EAAWf,GAAa;AAC3B,EAAAY,EAAAZ,GAAIX,GAAW,EAAK,GAC3B2B,EAAAhB,GAAI,SAASI,GAAaU,CAAW;AAC3C;"}
@@ -1,2 +1,2 @@
1
- export declare function observe(el: Element | Document): void;
2
- export declare function unobserve(el: Element | Document): void;
1
+ export declare const observe: (el: Element) => void;
2
+ export declare const unobserve: (el: Element) => void;
@@ -1,27 +1,20 @@
1
- import n from "../styles.module.css.js";
2
- import { onAdd as d, useId as c, isInputLike as f } from "../utils.js";
3
- const r = n.fieldset.split(" ")[0], l = n.validation.split(" ")[0], a = /* @__PURE__ */ new WeakMap();
4
- function u(t) {
5
- for (const s of t) {
1
+ import o from "../styles.module.css.js";
2
+ import { onMutation as n, useId as f, isInputLike as l } from "../utils.js";
3
+ const r = o.fieldset.split(" ")[0], c = o.validation.split(" ")[0];
4
+ function u(s) {
5
+ for (const a of s) {
6
6
  const i = [];
7
- let o = "";
8
- for (const e of s.getElementsByTagName("*"))
9
- e.classList.contains(l) ? o = c(e) : f(e) && i.push(e);
10
- if (o)
11
- for (const e of i)
12
- e.setAttribute("aria-describedby", o), e.setAttribute("aria-invalid", "true");
7
+ let e = "";
8
+ for (const t of a.getElementsByTagName("*"))
9
+ t.classList.contains(c) ? e = f(t) : l(t) && i.push(t);
10
+ if (e)
11
+ for (const t of i)
12
+ t.setAttribute("aria-describedby", e), t.setAttribute("aria-invalid", "true");
13
13
  }
14
14
  }
15
- function b(t) {
16
- const s = t.getElementsByClassName(r), i = d(n.fieldsetValidationAdded, () => u(s));
17
- a.set(t, i), i.observe(t);
18
- }
19
- function v(t) {
20
- var s;
21
- (s = a.get(t)) == null || s.disconnect(t);
22
- }
15
+ const b = (s) => n(s, r, u), m = (s) => n(s, r, !1);
23
16
  export {
24
17
  b as observe,
25
- v as unobserve
18
+ m as unobserve
26
19
  };
27
20
  //# sourceMappingURL=fieldset.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"fieldset.js","sources":["../../designsystem/fieldset/fieldset.ts"],"sourcesContent":["import styles from '../styles.module.css';\nimport { isInputLike, onAdd, useId } from '../utils';\nconst CSS_FIELDSET = styles.fieldset.split(' ')[0];\nconst CSS_VALIDATION = styles.validation.split(' ')[0];\nconst BOUND = new WeakMap<Element | Document, ReturnType<typeof onAdd>>();\n\nfunction process(fieldsets: HTMLCollectionOf<Element>) {\n for(const fieldset of fieldsets) {\n const inputs: HTMLInputElement[] = [];\n let validationId = '';\n\n for (const el of fieldset.getElementsByTagName('*')) {\n if (el.classList.contains(CSS_VALIDATION)) validationId = useId(el);\n else if (isInputLike(el)) inputs.push(el);\n }\n\n if (validationId) \n for(const input of inputs) {\n input.setAttribute('aria-describedby', validationId);\n input.setAttribute('aria-invalid', 'true');\n }\n }\n}\n\nexport function observe (el: Element | Document) {\n const fields = el.getElementsByClassName(CSS_FIELDSET);\n const add = onAdd(styles.fieldsetValidationAdded, () => process(fields));\n BOUND.set(el, add);\n add.observe(el);\n}\n\nexport function unobserve (el: Element | Document) {\n BOUND.get(el)?.disconnect(el);\n}\n"],"names":["CSS_FIELDSET","styles","CSS_VALIDATION","BOUND","process","fieldsets","fieldset","inputs","validationId","el","useId","isInputLike","input","observe","fields","add","onAdd","unobserve","_a"],"mappings":";;AAEA,MAAMA,IAAeC,EAAO,SAAS,MAAM,GAAG,EAAE,CAAC,GAC3CC,IAAiBD,EAAO,WAAW,MAAM,GAAG,EAAE,CAAC,GAC/CE,wBAAY,QAAsD;AAExE,SAASC,EAAQC,GAAsC;AACrD,aAAUC,KAAYD,GAAW;AAC/B,UAAME,IAA6B,CAAC;AACpC,QAAIC,IAAe;AAEnB,eAAWC,KAAMH,EAAS,qBAAqB,GAAG;AAChD,MAAIG,EAAG,UAAU,SAASP,CAAc,IAAGM,IAAeE,EAAMD,CAAE,IACzDE,EAAYF,CAAE,KAAGF,EAAO,KAAKE,CAAE;AAGtC,QAAAD;AACF,iBAAUI,KAASL;AACX,QAAAK,EAAA,aAAa,oBAAoBJ,CAAY,GAC7CI,EAAA,aAAa,gBAAgB,MAAM;AAAA,EAC3C;AAEN;AAEO,SAASC,EAASJ,GAAwB;AACzC,QAAAK,IAASL,EAAG,uBAAuBT,CAAY,GAC/Ce,IAAMC,EAAMf,EAAO,yBAAyB,MAAMG,EAAQU,CAAM,CAAC;AACjE,EAAAX,EAAA,IAAIM,GAAIM,CAAG,GACjBA,EAAI,QAAQN,CAAE;AAChB;AAEO,SAASQ,EAAWR,GAAwB;;AACjD,GAAAS,IAAAf,EAAM,IAAIM,CAAE,MAAZ,QAAAS,EAAe,WAAWT;AAC5B;"}
1
+ {"version":3,"file":"fieldset.js","sources":["../../designsystem/fieldset/fieldset.ts"],"sourcesContent":["import styles from '../styles.module.css';\nimport { isInputLike, onMutation, useId } from '../utils';\nconst CSS_FIELDSET = styles.fieldset.split(' ')[0];\nconst CSS_VALIDATION = styles.validation.split(' ')[0];\n\nfunction process(fieldsets: HTMLCollectionOf<Element>) {\n for(const fieldset of fieldsets) {\n const inputs: HTMLInputElement[] = [];\n let validationId = '';\n\n for (const el of fieldset.getElementsByTagName('*')) {\n if (el.classList.contains(CSS_VALIDATION)) validationId = useId(el);\n else if (isInputLike(el)) inputs.push(el);\n }\n\n if (validationId) \n for(const input of inputs) {\n input.setAttribute('aria-describedby', validationId);\n input.setAttribute('aria-invalid', 'true');\n }\n }\n}\n\nexport const observe = (el: Element) => onMutation(el, CSS_FIELDSET, process);\nexport const unobserve = (el: Element) => onMutation(el, CSS_FIELDSET, false);\n"],"names":["CSS_FIELDSET","styles","CSS_VALIDATION","process","fieldsets","fieldset","inputs","validationId","el","useId","isInputLike","input","observe","onMutation","unobserve"],"mappings":";;AAEA,MAAMA,IAAeC,EAAO,SAAS,MAAM,GAAG,EAAE,CAAC,GAC3CC,IAAiBD,EAAO,WAAW,MAAM,GAAG,EAAE,CAAC;AAErD,SAASE,EAAQC,GAAsC;AACrD,aAAUC,KAAYD,GAAW;AAC/B,UAAME,IAA6B,CAAC;AACpC,QAAIC,IAAe;AAEnB,eAAWC,KAAMH,EAAS,qBAAqB,GAAG;AAChD,MAAIG,EAAG,UAAU,SAASN,CAAc,IAAGK,IAAeE,EAAMD,CAAE,IACzDE,EAAYF,CAAE,KAAGF,EAAO,KAAKE,CAAE;AAGtC,QAAAD;AACF,iBAAUI,KAASL;AACX,QAAAK,EAAA,aAAa,oBAAoBJ,CAAY,GAC7CI,EAAA,aAAa,gBAAgB,MAAM;AAAA,EAC3C;AAEN;AAEO,MAAMC,IAAU,CAACJ,MAAgBK,EAAWL,GAAIR,GAAcG,CAAO,GAC/DW,IAAY,CAACN,MAAgBK,EAAWL,GAAIR,GAAc,EAAK;"}
@@ -5,3 +5,4 @@ declare const meta: {
5
5
  export default meta;
6
6
  type Story = StoryObj<typeof meta>;
7
7
  export declare const Default: Story;
8
+ export declare const Center: Story;
package/mtds/index.d.ts CHANGED
@@ -5,7 +5,6 @@ tag: string;
5
5
  tabs: string;
6
6
  table: string;
7
7
  scrollShadow: string;
8
- tableChildAdded: string;
9
8
  skeleton: string;
10
9
  popover: string;
11
10
  pagination: string;
@@ -14,12 +13,9 @@ logo: string;
14
13
  link: string;
15
14
  grid: string;
16
15
  flex: string;
17
- box: string;
18
16
  input: string;
19
17
  fieldset: string;
20
- fieldsetValidationAdded: string;
21
18
  field: string;
22
- fieldChildAdded: string;
23
19
  affixes: string;
24
20
  count: string;
25
21
  errorsummary: string;
@@ -35,5 +31,5 @@ alert: string;
35
31
  heading: string;
36
32
  body: string;
37
33
  };
38
- export declare function observe(el: Element | Document): void;
39
- export declare function unobserve(el: Element | Document): void;
34
+ export declare function observe(el: Element): void;
35
+ export declare function unobserve(el: Element): void;
@@ -1,2 +1,2 @@
1
- var mtds=function(_){"use strict";const A="_validation_1p8e7_1 _ds-validation-message_1yo2l_1",S="_tag_1p8e7_1 _ds-tag_1yo2l_1",M="_tabs_1p8e7_1",$="_table_1p8e7_1 _ds-table_1yo2l_1",C="_scrollShadow_1p8e7_1",E="_tableChildAdded_1p8e7_1",I="_skeleton_1p8e7_1 _ds-skeleton_1yo2l_1",T="_popover_1p8e7_1",k="_pagination_1p8e7_1 _ds-pagination_1yo2l_1",w="_modal_1p8e7_1 _ds-modal_1yo2l_1",N="_logo_1p8e7_1 _ds-focus_1yo2l_1",x="_link_1p8e7_1",B="_grid_1p8e7_1",L="_flex_1p8e7_1",O="_box_1p8e7_1",P="_input_1p8e7_1 _ds-input_1yo2l_1",H="_fieldset_1p8e7_1 _ds-fieldset_1yo2l_1",D="_fieldsetValidationAdded_1p8e7_1",V="_field_1p8e7_1 _ds-field_1yo2l_1",W="_fieldChildAdded_1p8e7_1",U="_affixes_1p8e7_1 _ds-field-affixes_1yo2l_1",j="_count_1p8e7_1",F="_errorsummary_1p8e7_1 _ds-error-summary_1yo2l_1",q="_details_1p8e7_1 _ds-details_1yo2l_1",z="_chip_1p8e7_1 _ds-chip_1yo2l_1",Y="_card_1p8e7_1",G="_info_1p8e7_1",K="_button_1p8e7_1 _ds-button_1yo2l_1",Q="_breadcrumbs_1p8e7_1 _ds-breadcrumbs_1yo2l_1",R="_badge_1p8e7_1",X="_avatar_1p8e7_1 _ds-avatar_1yo2l_1",J="_alert_1p8e7_1 _ds-alert_1yo2l_1",Z="_heading_1p8e7_1 _ds-heading_1yo2l_1",tt="_body_1p8e7_104",d={validation:A,tag:S,tabs:M,table:$,scrollShadow:C,tableChildAdded:E,skeleton:I,popover:T,pagination:k,modal:w,logo:N,link:x,grid:B,flex:L,box:O,input:P,fieldset:H,fieldsetValidationAdded:D,field:V,fieldChildAdded:W,affixes:U,count:j,errorsummary:F,details:q,chip:z,card:Y,info:G,button:K,breadcrumbs:Q,badge:R,avatar:X,alert:J,heading:Z,body:tt},pt=Object.freeze(Object.defineProperty({__proto__:null,affixes:U,alert:J,avatar:X,badge:R,body:tt,box:O,breadcrumbs:Q,button:K,card:Y,chip:z,count:j,default:d,details:q,errorsummary:F,field:V,fieldChildAdded:W,fieldset:H,fieldsetValidationAdded:D,flex:L,grid:B,heading:Z,info:G,input:P,link:x,logo:N,modal:w,pagination:k,popover:T,scrollShadow:C,skeleton:I,table:$,tableChildAdded:E,tabs:M,tag:S,validation:A},Symbol.toStringTag,{value:"Module"})),et=typeof window<"u"&&typeof document<"u",c={capture:!0,passive:!0};let bt=0;const gt=`${Date.now().toString(36)}${Math.random().toString(36).slice(2,5)}`;function p(t){return t.id||(t.id=`${gt}${++bt}`),t.id}const ot=(t,e,n)=>{for(const s of n[0].split(","))n[0]=s,e[`${t}EventListener`](...n)},r=(t,...e)=>ot("add",t,e),b=(t,...e)=>ot("remove",t,e),y=(t,e)=>{let n=0;const s=o=>{o.animationName===t&&(cancelAnimationFrame(n),n=requestAnimationFrame(e))};return{observe:o=>r(o,"animationend",s,c),disconnect:o=>b(o,"animationstart",s,c)}},v=t=>t instanceof HTMLElement&&"validity"in t&&!(t instanceof HTMLButtonElement),mt=d.field.split(" ")[0],nt=d.validation.split(" "),yt=nt[0],st=new WeakMap;function vt(t){for(const e of t){const n=[],s=[];let o=null,a=!0;for(const i of e.getElementsByTagName("*"))i instanceof HTMLLabelElement?n.push(i):v(i)?o=i:i.classList.contains(yt)?(a=i.getAttribute("data-color")==="success",s.unshift(p(i))):i instanceof HTMLParagraphElement&&s.push(p(i));if(o)for(const i of n)i.htmlFor=p(o);o&&at(o),o==null||o.setAttribute("aria-describedby",s.join(" ")),o==null||o.setAttribute("aria-invalid",`${!a}`)}}function it({target:t}){v(t)&&at(t)}function at(t){const e=t==null?void 0:t.nextElementSibling,n=e==null?void 0:e.getAttribute("data-count");if(e&&n){const s=Number(n)-t.value.length,o=s<0;if(e.getAttribute("aria-live")==="polite"!==o){e.setAttribute("aria-live",o?"polite":"off");for(const i of nt)e.classList.toggle(i,o)}e.textContent=`${Math.abs(s)} tegn ${o?"for mye":"igjen"}`}}function ht(t){const e=t.getElementsByClassName(mt),n=y(d.fieldChildAdded,()=>vt(e));st.set(t,n),n.observe(t),r(t,"input",it,c)}function At(t){var e;(e=st.get(t))==null||e.disconnect(t),b(t,"input",it,c)}const St=d.fieldset.split(" ")[0],Mt=d.validation.split(" ")[0],dt=new WeakMap;function $t(t){for(const e of t){const n=[];let s="";for(const o of e.getElementsByTagName("*"))o.classList.contains(Mt)?s=p(o):v(o)&&n.push(o);if(s)for(const o of n)o.setAttribute("aria-describedby",s),o.setAttribute("aria-invalid","true")}}function Ct(t){const e=t.getElementsByClassName(St),n=y(d.fieldsetValidationAdded,()=>$t(e));dt.set(t,n),n.observe(t)}function Et(t){var e;(e=dt.get(t))==null||e.disconnect(t)}function It(t){r(t,"click",_t),r(t,"toggle",lt,c),r(window,"load,resize,scroll",m,c),r(document,"DOMContentReady",m,c),document.fonts.ready.then(m)}function Tt(t){b(t,"click",_t),b(t,"toggle",lt,c)}const ct=d.popover.split(" ")[0],l=et?document.createElement("div"):null,g=new Map;l==null||l.setAttribute("style","position:absolute;padding:1px");function lt({target:t,newState:e}){var n;if(t instanceof HTMLElement&&t.classList.contains(ct)){const s=(n=t.getRootNode())==null?void 0:n.querySelector(`[popovertarget="${t.id}"]`),o=t.getAttribute("data-position")==="over";e==="closed"?g.delete(t):s&&g.set(t,()=>kt(s,t,o)),document.body.append(l||""),m()}}function m(){for(const[t,e]of g)e()}function _t(t){var n;const e=t.target instanceof Element&&t.target.closest("a");if(e){const s=e.getRootNode(),o=((n=s.getElementById)==null?void 0:n.call(s,e.getAttribute("popovertarget")||""))||e.closest(`.${ct}`),a=e.getAttribute("popovertargetaction")||"toggle";t.defaultPrevented||o==null||o.togglePopover(a==="show"||(a==="hide"?!1:void 0))}}function kt(t,e,n=!1){if(!(t!=null&&t.isConnected)||!(e!=null&&e.isConnected))return g.delete(e);const{offsetWidth:s,offsetHeight:o}=e,{offsetWidth:a,offsetHeight:i}=t,{width:f,height:h,left:Ht,top:Dt}=t.getBoundingClientRect(),Vt=Math.round(Ht-(a-f)/2),u=Math.round(Dt-(i-h)/2),Wt=u+i+o<window.innerHeight,Ut=u-o>0,ut=!n&&Wt||!Ut,jt=ut?window.scrollY+u+i+o+30:0;e.style.left=`${Math.round(Math.min(Math.max(10,Vt),window.innerWidth-s-10))}px`,e.style.top=`${Math.round(ut?u+i:u-o)}px`,l==null||l.style.setProperty("top",`${Math.round(jt)}px`)}const wt=d.table.split(" ")[0],rt=new WeakMap;function Nt(t){var e,n;for(const s of t)if(s instanceof HTMLTableElement){const o=Array.from(((n=(e=s.tHead)==null?void 0:e.rows[0])==null?void 0:n.cells)||[],a=>{var i;return(i=a.innerText)==null?void 0:i.trim()});for(const a of s.tBodies)for(const i of a.rows)for(const f of i.cells)f.setAttribute("data-th",o[f.cellIndex]||":empty")}}function xt(t){const e=t.getElementsByClassName(wt),n=y(d.tableChildAdded,()=>Nt(e));rt.set(t,n),n.observe(t)}function Bt(t){var e;(e=rt.get(t))==null||e.disconnect(t)}const Lt=(t,e,n)=>{const s=(n-1)/2,o=Math.max(Math.min(t-Math.floor(s),e-n+1),1),a=Math.min(Math.max(t+Math.ceil(s),n),e),i=Array.from({length:a+1-o},(f,h)=>h+o);return n>4&&o>1&&i.splice(0,2,1,0),n>3&&a<e&&i.splice(-2,2,0,e),i},Ot=({current:t=1,total:e=10,show:n=7})=>({prev:t>1?t-1:0,next:t<e?t+1:0,pages:Lt(t,e,n).map((s,o)=>({current:s===t&&"page",key:`key-${s}-${o}`,page:s}))});et&&ft(document);function ft(t){ht(t),Ct(t),It(t),xt(t)}function Pt(t){At(t),Et(t),Tt(t),Bt(t)}return _.observe=ft,_.pagination=Ot,_.styles=pt,_.unobserve=Pt,Object.defineProperty(_,Symbol.toStringTag,{value:"Module"}),_}({});
1
+ var mtds=function(d){"use strict";const M="_validation_122jn_1 _ds-validation-message_1w6ss_1",S="_tag_122jn_1 _ds-tag_1w6ss_1",A="_tabs_122jn_1",$="_table_122jn_1 _ds-table_1w6ss_1",T="_scrollShadow_122jn_1",I="_skeleton_122jn_1 _ds-skeleton_1w6ss_1",L="_popover_122jn_1",E="_pagination_122jn_1 _ds-pagination_1w6ss_1",C="_modal_122jn_1 _ds-modal_1w6ss_1",k="_logo_122jn_1 _ds-focus_1w6ss_1",O="_link_122jn_1",x="_grid_122jn_1",H="_flex_122jn_1",P="_input_122jn_1 _ds-input_1w6ss_1",B="_fieldset_122jn_1 _ds-fieldset_1w6ss_1",D="_field_122jn_1 _ds-field_1w6ss_1",N="_affixes_122jn_1 _ds-field-affixes_1w6ss_1",U="_count_122jn_1",W="_errorsummary_122jn_1 _ds-error-summary_1w6ss_1",F="_details_122jn_1 _ds-details_1w6ss_1",V="_chip_122jn_1 _ds-chip_1w6ss_1",q="_card_122jn_1",z="_info_122jn_1",R="_button_122jn_1 _ds-button_1w6ss_1",K="_breadcrumbs_122jn_1 _ds-breadcrumbs_1w6ss_1",Y="_badge_122jn_1",G="_avatar_122jn_1 _ds-avatar_1w6ss_1",Q="_alert_122jn_1 _ds-alert_1w6ss_1",X="_heading_122jn_1 _ds-heading_1w6ss_1",J="_body_122jn_113",c={validation:M,tag:S,tabs:A,table:$,scrollShadow:T,skeleton:I,popover:L,pagination:E,modal:C,logo:k,link:O,grid:x,flex:H,input:P,fieldset:B,field:D,affixes:N,count:U,errorsummary:W,details:F,chip:V,card:q,info:z,button:R,breadcrumbs:K,badge:Y,avatar:G,alert:Q,heading:X,body:J},_t=Object.freeze(Object.defineProperty({__proto__:null,affixes:N,alert:Q,avatar:G,badge:Y,body:J,breadcrumbs:K,button:R,card:q,chip:V,count:U,default:c,details:F,errorsummary:W,field:D,fieldset:B,flex:H,grid:x,heading:X,info:z,input:P,link:O,logo:k,modal:C,pagination:E,popover:L,scrollShadow:T,skeleton:I,table:$,tabs:A,tag:S,validation:M},Symbol.toStringTag,{value:"Module"})),Z=typeof window<"u"&&typeof document<"u",l={capture:!0,passive:!0};let ft=0;const ut=`${Date.now().toString(36)}${Math.random().toString(36).slice(2,5)}`;function g(t){return t.id||(t.id=`${ut}${++ft}`),t.id}const tt=(t,e,o)=>{for(const s of o[0].split(","))o[0]=s,e[`${t}EventListener`](...o)},f=(t,...e)=>tt("add",t,e),h=(t,...e)=>tt("remove",t,e);function bt(t){let e=0;const o=()=>setTimeout(s,200),s=()=>{t([],n),e=0},n=new MutationObserver(()=>{e||(e=requestAnimationFrame(o))});return n}const v=new WeakMap,gt=t=>{var o;const e=v.get(t);if(!e||!t.isConnected)(o=e==null?void 0:e.observer)==null||o.disconnect(),v.delete(t);else for(const[,s]of e.collections)s()},_=(t,e,o)=>{const s=t.getElementsByClassName(e);let n=v.get(t);n||(n={collections:new Map,observer:bt(()=>gt(t))},n.observer.observe(t,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["class"]}),v.set(t,n)),o?n.collections.set(e,()=>o(s)):n.collections.delete(e)},y=t=>t instanceof HTMLElement&&"validity"in t&&!(t instanceof HTMLButtonElement),et=c.field.split(" ")[0],nt=c.validation.split(" "),vt=nt[0];function pt(t){for(const e of t){const o=[],s=[];let n=null,a=!0;for(const i of e.getElementsByTagName("*"))i instanceof HTMLLabelElement?o.push(i):y(i)?n=i:i.classList.contains(vt)?(a=i.getAttribute("data-color")==="success",s.unshift(g(i))):i instanceof HTMLParagraphElement&&s.push(g(i));if(n)for(const i of o)i.htmlFor=g(n);n&&st(n),n==null||n.setAttribute("aria-describedby",s.join(" ")),n==null||n.setAttribute("aria-invalid",`${!a}`)}}function ot({target:t}){y(t)&&st(t)}function st(t){const e=t==null?void 0:t.nextElementSibling,o=e==null?void 0:e.getAttribute("data-count");if(e&&o){const s=Number(o)-t.value.length,n=s<0;if(e.getAttribute("aria-live")==="polite"!==n){e.setAttribute("aria-live",n?"polite":"off");for(const i of nt)e.classList.toggle(i,n)}e.textContent=`${Math.abs(s)} tegn ${n?"for mye":"igjen"}`}}function mt(t){_(t,et,pt),f(t,"input",ot,l)}function ht(t){_(t,et,!1),h(t,"input",ot,l)}const it=c.fieldset.split(" ")[0],yt=c.validation.split(" ")[0];function wt(t){for(const e of t){const o=[];let s="";for(const n of e.getElementsByTagName("*"))n.classList.contains(yt)?s=g(n):y(n)&&o.push(n);if(s)for(const n of o)n.setAttribute("aria-describedby",s),n.setAttribute("aria-invalid","true")}}const jt=t=>_(t,it,wt),Mt=t=>_(t,it,!1);function St(t){f(t,"click",rt),f(t,"toggle",ct,l),f(window,"load,resize,scroll",m,l),f(document,"DOMContentReady",m,l),document.fonts.ready.then(m)}function At(t){h(t,"click",rt),h(t,"toggle",ct,l)}const at=c.popover.split(" ")[0],r=Z?document.createElement("div"):null,p=new Map;r==null||r.setAttribute("style","position:absolute;padding:1px");function ct({target:t,newState:e}){var o;if(t instanceof HTMLElement&&t.classList.contains(at)){const s=(o=t.getRootNode())==null?void 0:o.querySelector(`[popovertarget="${t.id}"]`),n=t.getAttribute("data-position")==="over";e==="closed"?p.delete(t):s&&p.set(t,()=>$t(s,t,n)),document.body.append(r||""),m()}}function m(){for(const[t,e]of p)e()}function rt(t){var o;const e=t.target instanceof Element&&t.target.closest("a");if(e){const s=e.getRootNode(),n=((o=s.getElementById)==null?void 0:o.call(s,e.getAttribute("popovertarget")||""))||e.closest(`.${at}`),a=e.getAttribute("popovertargetaction")||"toggle";n==null||n.togglePopover(a==="show"||(a==="hide"?!1:void 0))}}function $t(t,e,o=!1){if(!(t!=null&&t.isConnected)||!(e!=null&&e.isConnected))return p.delete(e);const{offsetWidth:s,offsetHeight:n}=e,{offsetWidth:a,offsetHeight:i}=t,{width:u,height:j,left:Ot,top:xt}=t.getBoundingClientRect(),Ht=Math.round(Ot-(a-u)/2),b=Math.round(xt-(i-j)/2),Pt=b+i+n<window.innerHeight,Bt=b-n>0,lt=!o&&Pt||!Bt,Dt=lt?window.scrollY+b+i+n+30:0;e.style.left=`${Math.round(Math.min(Math.max(10,Ht),window.innerWidth-s-10))}px`,e.style.top=`${Math.round(lt?b+i:b-n)}px`,r==null||r.style.setProperty("top",`${Math.round(Dt)}px`)}const dt=c.table.split(" ")[0];function Tt(t){var e,o;for(const s of t)if(s instanceof HTMLTableElement){const n=Array.from(((o=(e=s.tHead)==null?void 0:e.rows[0])==null?void 0:o.cells)||[],a=>{var i;return(i=a.innerText)==null?void 0:i.trim()});for(const a of s.tBodies)for(const i of a.rows)for(const u of i.cells)u.setAttribute("data-th",n[u.cellIndex]||":empty")}}const It=t=>_(t,dt,Tt),Lt=t=>_(t,dt,!1),Et=(t,e,o)=>{const s=(o-1)/2,n=Math.max(Math.min(t-Math.floor(s),e-o+1),1),a=Math.min(Math.max(t+Math.ceil(s),o),e),i=Array.from({length:a+1-n},(u,j)=>j+n);return o>4&&n>1&&i.splice(0,2,1,0),o>3&&a<e&&i.splice(-2,2,0,e),i},Ct=({current:t=1,total:e=10,show:o=7})=>({prev:t>1?t-1:0,next:t<e?t+1:0,pages:Et(t,e,o).map((s,n)=>({current:s===t&&"page",key:`key-${s}-${n}`,page:s}))});if(Z){const t=document.readyState==="loading",e=()=>w(document.body);t?document.addEventListener("DOMContentLoaded",e):e()}w(document.body);function w(t){mt(t),jt(t),St(t),It(t)}function kt(t){ht(t),Mt(t),At(t),Lt(t)}return d.observe=w,d.pagination=Ct,d.styles=_t,d.unobserve=kt,Object.defineProperty(d,Symbol.toStringTag,{value:"Module"}),d}({});
2
2
  //# sourceMappingURL=index.iife.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.iife.js","sources":["../designsystem/utils.ts","../designsystem/field/field.ts","../designsystem/fieldset/fieldset.ts","../designsystem/popover/popover.ts","../designsystem/table/table.ts","../designsystem/pagination/pagination.ts","../designsystem/index.ts"],"sourcesContent":["export const IS_BROWSER = typeof window !== 'undefined' && typeof document !== 'undefined';\nexport const QUICK_EVENT = { capture: true, passive: true };\n\n/**\n * useId\n * @return A generated unique ID\n */\nlet id = 0;\nconst UUID = `${Date.now().toString(36)}${Math.random().toString(36).slice(2, 5)}`;\nexport function useId (el: Element) {\n if (!el.id) el.id = `${UUID}${++id}`;\n\treturn el.id;\n};\n\n/**\n * Speed up MutationObserver by debouncing and only running when page is visible\n * @return new MutaionObserver\n */\nexport function 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// Internal helper for on / off\nconst events = (\n\taction: \"add\" | \"remove\",\n\telement: Node | Window,\n\trest: Parameters<typeof Element.prototype.addEventListener>,\n): void => {\n\tfor (const type of rest[0].split(\",\")) {\n\t\trest[0] = type;\n\t\telement[`${action}EventListener`](...rest);\n\t}\n};\n\n/**\n * on\n * @param element The Element to use as EventTarget\n * @param types A comma separated string of event types\n * @param listener An event listener function or listener object\n */\nexport const on = (\n\telement: Node | Window,\n\t...rest: Parameters<typeof Element.prototype.addEventListener>\n): void => events(\"add\", element, rest);\n\n/**\n * off\n * @param element The Element to use as EventTarget\n * @param types A comma separated string of event types\n * @param listener An event listener function or listener object\n */\nexport const off = (\n\telement: Node | Window,\n\t...rest: Parameters<typeof Element.prototype.removeEventListener>\n): void => events(\"remove\", element, rest);\n\n/**\n * Child added event inspired by:\n * https://davidwalsh.name/detect-node-insertion\n */\nexport const onAdd = (animationName: string, callback: () => void) => {\n let timer: ReturnType<typeof requestAnimationFrame> | number = 0;\n const onAnimation = (event: Event & { animationName?: string }) => {\n if (event.animationName === animationName) {\n cancelAnimationFrame(timer);\n timer = requestAnimationFrame(callback);\n }\n };\n\n\treturn {\n\t\tobserve: (el: Element | Document, ) => on(el, 'animationend', onAnimation, QUICK_EVENT),\n\t\tdisconnect: (el: Element | Document, ) => off(el, 'animationstart', onAnimation, QUICK_EVENT)\n\t};\n}\n\nexport const isInputLike = (el: unknown): el is HTMLInputElement =>\n\tel instanceof HTMLElement && 'validity' in el && !(el instanceof HTMLButtonElement);\n\n// Make React support popover=\"\"target attribute\n// https://github.com/facebook/react/issues/27479\ntype Popover = \"\" | \"auto\" | \"manual\" | undefined;\ndeclare global {\n\tnamespace React.JSX {\n\t\tinterface IntrinsicAttributes {\n\t\t\tpopovertargetaction?: string;\n\t\t\tpopovertarget?: string;\n\t\t\tpopover?: Popover;\n\t\t}\n\t}\n\tnamespace React {\n\t\tinterface HTMLAttributes<T> {\n\t\t\tpopovertargetaction?: string;\n\t\t\tpopovertarget?: string;\n\t\t\tpopover?: Popover;\n\t\t}\n\t}\n}","import styles from '../styles.module.css';\nimport { QUICK_EVENT, isInputLike, off, on, onAdd, useId } from '../utils';\n\nconst CSS_FIELD = styles.field.split(' ')[0];\nconst CSS_VALIDATIONS = styles.validation.split(' ');\nconst CSS_VALIDATION = CSS_VALIDATIONS[0];\nconst BOUND = new WeakMap<Element | Document, ReturnType<typeof onAdd>>();\n\nfunction renderAria(fields: HTMLCollectionOf<Element>) {\n for(const field of fields) {\n const labels: HTMLLabelElement[] = [];\n const descs: string[] = [];\n let input: HTMLInputElement | 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 (isInputLike(el)) input = el;\n else if (el.classList.contains(CSS_VALIDATION)) { // Must be before instanceof HTMLParagraphElement since validation 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 if (input) renderCounter(input);\n\n input?.setAttribute('aria-describedby', descs.join(' '));\n input?.setAttribute('aria-invalid', `${!valid}`);\n }\n}\nfunction handleInput({ target }: Event) {\n if (isInputLike(target)) renderCounter(target);\n}\n\nfunction renderCounter(input: HTMLInputElement) {\n const el = input?.nextElementSibling;\n const limit = el?.getAttribute('data-count');\n\n if (el && limit) {\n const remainder = Number(limit) - input.value.length;\n const nextInvalid = remainder < 0;\n const prevInvalid = el.getAttribute('aria-live') === 'polite';\n\n if (prevInvalid !== nextInvalid) {\n el.setAttribute('aria-live', nextInvalid ? 'polite' : 'off');\n for (const css of CSS_VALIDATIONS) el.classList.toggle(css, nextInvalid);\n }\n el.textContent = `${Math.abs(remainder)} tegn ${nextInvalid ? 'for mye' : 'igjen'}`;\n }\n}\n\nexport function observe (el: Element | Document) {\n const fields = el.getElementsByClassName(CSS_FIELD);\n const add = onAdd(styles.fieldChildAdded, () => renderAria(fields));\n BOUND.set(el, add);\n add.observe(el);\n on(el, 'input', handleInput, QUICK_EVENT);\n}\n\nexport function unobserve (el: Element | Document) {\n BOUND.get(el)?.disconnect(el);\n off(el, 'input', handleInput, QUICK_EVENT);\n}\n\n\n// TODO: Remove invalid when errormessage is gone","import styles from '../styles.module.css';\nimport { isInputLike, onAdd, useId } from '../utils';\nconst CSS_FIELDSET = styles.fieldset.split(' ')[0];\nconst CSS_VALIDATION = styles.validation.split(' ')[0];\nconst BOUND = new WeakMap<Element | Document, ReturnType<typeof onAdd>>();\n\nfunction process(fieldsets: HTMLCollectionOf<Element>) {\n for(const fieldset of fieldsets) {\n const inputs: HTMLInputElement[] = [];\n let validationId = '';\n\n for (const el of fieldset.getElementsByTagName('*')) {\n if (el.classList.contains(CSS_VALIDATION)) validationId = useId(el);\n else if (isInputLike(el)) inputs.push(el);\n }\n\n if (validationId) \n for(const input of inputs) {\n input.setAttribute('aria-describedby', validationId);\n input.setAttribute('aria-invalid', 'true');\n }\n }\n}\n\nexport function observe (el: Element | Document) {\n const fields = el.getElementsByClassName(CSS_FIELDSET);\n const add = onAdd(styles.fieldsetValidationAdded, () => process(fields));\n BOUND.set(el, add);\n add.observe(el);\n}\n\nexport function unobserve (el: Element | Document) {\n BOUND.get(el)?.disconnect(el);\n}\n","import styles from '../styles.module.css';\nimport { IS_BROWSER, QUICK_EVENT, off, on } from '../utils';\n\nexport function observe(el: Node) {\n on(el, 'click', handleLinkClick); // Allow `<a>` to use `popovertarget` as well\n on(el, 'toggle', handleToggle, QUICK_EVENT); // Use capture since toggle does not bubble\n on(window, 'load,resize,scroll', updatePositions, QUICK_EVENT); // Use capture since toggle does not bubble\n on(document, 'DOMContentReady', updatePositions, QUICK_EVENT); // Use capture since toggle does not bubble\n document.fonts.ready.then(updatePositions); // Inital render and when fonts load\n}\nexport function unobserve(el: Node) {\n off(el, 'click', handleLinkClick);\n off(el, 'toggle', handleToggle, QUICK_EVENT); // Use capture since toggle does not bubble\n}\n\nconst CSS_POPOVER = styles.popover.split(' ')[0];\nconst SCROLLER = IS_BROWSER ? document.createElement('div') : null // Used to ensure we have scrollability under\nconst POPPING = new Map<Element, () => void>(); // Store current open poppers and their update functions\nSCROLLER?.setAttribute('style', 'position:absolute;padding:1px');\n\nfunction handleToggle ({ target: el, newState }: Event & { newState?: string }){\n if (el instanceof HTMLElement && el.classList.contains(CSS_POPOVER)) {\n const anchor = (el.getRootNode() as ShadowRoot)?.querySelector<HTMLElement>(`[popovertarget=\"${el.id}\"]`);\n const isOver = el.getAttribute('data-position') === 'over';\n \n if (newState === 'closed') POPPING.delete(el);\n else if (anchor) POPPING.set(el, () => place(anchor, el, isOver));\n document.body.append(SCROLLER || ''); // Ensure we have the scroller\n updatePositions();\n }\n}\n\nfunction updatePositions() {\n for (const [_, updatePosition] of POPPING) updatePosition();\n}\n\n// Polyfill popovertarget for <a> (not supported by native)\n// and automatically assume popovertarget is the closest parent popover\n// but respect the popovertarget and popovertargetaction attribute\nfunction handleLinkClick (event: Event){\n const link = event.target instanceof Element && event.target.closest('a');\n if (link) {\n const root = link.getRootNode() as ShadowRoot;\n const target = root.getElementById?.(link.getAttribute('popovertarget') || '') || link.closest(`.${CSS_POPOVER}`);\n const action = link.getAttribute('popovertargetaction') || 'toggle';\n\n if (!event.defaultPrevented) target?.togglePopover(action === 'show' || (action === 'hide' ? false : undefined));\n }\n}\n\nfunction place (anchor: HTMLElement | null, popper: HTMLElement, isOver = false) {\n if (!anchor?.isConnected || !popper?.isConnected) return POPPING.delete(popper); // Stop watchning if anchor is removed from DOM\n\n const { offsetWidth: popperW, offsetHeight: popperH } = popper;\n const { offsetWidth: anchorW, offsetHeight: anchorH } = anchor;\n const { width, height, left, top } = anchor.getBoundingClientRect();\n const anchorX = Math.round(left - (anchorW - width) / 2); // Correct for CSS transform scale\n const anchorY = Math.round(top - (anchorH - height) / 2); // Correct for CSS transform scale\n const hasSpaceUnder = anchorY + anchorH + popperH < window.innerHeight;\n const hasSpaceOver = anchorY - popperH > 0\n const placeUnder = (!isOver && hasSpaceUnder) || !hasSpaceOver // Always place under when no hasSpaceOver, as no OS can scroll further up than 0\n const scroll = placeUnder ? window.scrollY + anchorY + anchorH + popperH + 30 : 0\n\n popper.style.left = `${Math.round(Math.min(Math.max(10, anchorX), window.innerWidth - popperW - 10))}px`\n popper.style.top = `${Math.round(placeUnder ? anchorY + anchorH : anchorY - popperH)}px`\n SCROLLER?.style.setProperty('top', `${Math.round(scroll)}px`);\n}\n","import styles from '../styles.module.css';\nimport { onAdd } from '../utils';\nconst CSS_TABLE = styles.table.split(' ')[0];\nconst BOUND = new WeakMap<Element | Document, ReturnType<typeof onAdd>>();\n\nfunction process(tables: HTMLCollectionOf<Element>) {\n for(const table of tables) if (table instanceof HTMLTableElement) {\n const ths = Array.from(table.tHead?.rows[0]?.cells || [], (el) => el.innerText?.trim()); // Using innerText to only include visible text\n for (const tbody of table.tBodies) {\n for (const row of tbody.rows) {\n for (const cell of row.cells) {\n cell.setAttribute('data-th', ths[cell.cellIndex] || ':empty'); // Using U+200B to prevent empty string from collapsing\n }\n }\n }\n }\n}\n\nexport function observe (el: Element | Document) {\n const tables = el.getElementsByClassName(CSS_TABLE);\n const add = onAdd(styles.tableChildAdded, () => process(tables));\n BOUND.set(el, add);\n add.observe(el);\n}\n\nexport function unobserve (el: Element | Document) {\n BOUND.get(el)?.disconnect(el);\n}\n","const getSteps = (now: number, max: number, show: number) => {\n const offset = (show - 1) / 2;\n const start = Math.max(Math.min(now - Math.floor(offset), max - show + 1), 1);\n const end = Math.min(Math.max(now + Math.ceil(offset), show), max);\n const pages = Array.from({ length: end + 1 - start }, (_, i) => i + start);\n\n if (show > 4 && start > 1) pages.splice(0, 2, 1, 0);\n if (show > 3 && end < max) pages.splice(-2, 2, 0, max);\n return pages;\n};\n\nexport const pagination = ({\n current = 1,\n total = 10,\n show = 7,\n}) => ({\n prev: current > 1 ? current - 1 : 0,\n next: current < total ? current + 1 : 0,\n pages: getSteps(current, total, show).map((page, index) => ({\n current: page === current && 'page' as const,\n key: `key-${page}-${index}`,\n page,\n })),\n});\n","import * as field from './field/field';\nimport * as fieldset from './fieldset/fieldset';\nimport * as popover from './popover/popover';\nimport * as table from './table/table';\nimport { IS_BROWSER } from './utils';\nexport { pagination } from './pagination/pagination';\nexport * as styles from './styles.module.css';\n\nif (IS_BROWSER) observe(document); // Automatic observe on browser\n\nexport function observe(el: Element | Document) {\n field.observe(el);\n fieldset.observe(el);\n popover.observe(el);\n table.observe(el);\n}\n\nexport function unobserve(el: Element | Document) {\n field.unobserve(el);\n fieldset.unobserve(el);\n popover.unobserve(el);\n table.unobserve(el);\n}"],"names":["IS_BROWSER","QUICK_EVENT","id","UUID","useId","el","events","action","element","rest","type","on","off","onAdd","animationName","callback","timer","onAnimation","event","isInputLike","CSS_FIELD","styles","CSS_VALIDATIONS","CSS_VALIDATION","BOUND","renderAria","fields","field","labels","descs","input","valid","label","handleInput","target","renderCounter","limit","remainder","nextInvalid","css","observe","add","unobserve","CSS_FIELDSET","process","fieldsets","fieldset","inputs","validationId","handleLinkClick","handleToggle","updatePositions","CSS_POPOVER","SCROLLER","POPPING","newState","anchor","_a","isOver","place","_","updatePosition","link","root","popper","popperW","popperH","anchorW","anchorH","width","height","left","top","anchorX","anchorY","hasSpaceUnder","hasSpaceOver","placeUnder","scroll","CSS_TABLE","tables","table","ths","_b","tbody","row","cell","getSteps","now","max","show","offset","start","end","pages","i","pagination","current","total","page","index","field.observe","fieldset.observe","popover.observe","table.observe","field.unobserve","fieldset.unobserve","popover.unobserve","table.unobserve"],"mappings":"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"}
1
+ {"version":3,"file":"index.iife.js","sources":["../designsystem/utils.ts","../designsystem/field/field.ts","../designsystem/fieldset/fieldset.ts","../designsystem/popover/popover.ts","../designsystem/table/table.ts","../designsystem/pagination/pagination.ts","../designsystem/index.ts"],"sourcesContent":["export const IS_BROWSER = typeof window !== 'undefined' && typeof document !== 'undefined';\nexport const QUICK_EVENT = { capture: true, passive: true };\n\n/**\n * useId\n * @return A generated unique ID\n */\nlet id = 0;\nconst UUID = `${Date.now().toString(36)}${Math.random().toString(36).slice(2, 5)}`;\nexport function useId (el: Element) {\n if (!el.id) el.id = `${UUID}${++id}`;\n\treturn el.id;\n};\n\n// Internal helper for on / off\nconst events = (\n\taction: \"add\" | \"remove\",\n\telement: Node | Window,\n\trest: Parameters<typeof Element.prototype.addEventListener>,\n): void => {\n\tfor (const type of rest[0].split(\",\")) {\n\t\trest[0] = type;\n\t\telement[`${action}EventListener`](...rest);\n\t}\n};\n\n/**\n * on\n * @param element The Element to use as EventTarget\n * @param types A comma separated string of event types\n * @param listener An event listener function or listener object\n */\nexport const on = (\n\telement: Node | Window,\n\t...rest: Parameters<typeof Element.prototype.addEventListener>\n): void => events(\"add\", element, rest);\n\n/**\n * off\n * @param element The Element to use as EventTarget\n * @param types A comma separated string of event types\n * @param listener An event listener function or listener object\n */\nexport const off = (\n\telement: Node | Window,\n\t...rest: Parameters<typeof Element.prototype.removeEventListener>\n): void => events(\"remove\", element, rest);\n\n/**\n * Speed up MutationObserver by debouncing and only running when page is visible\n * @return new MutaionObserver\n */\nexport function createOptimizedMutationObserver(callback: MutationCallback) {\n let queue = 0;\n\n\tconst onFrame = () => setTimeout(onTimer, 200); // Use both requestAnimationFrame and setTimeout to debounce and only run when visible\n\tconst onTimer = () => {\n\t\tcallback([], observer);\n\t\tqueue = 0;\n\t};\n const observer = new MutationObserver(() => {\n if (!queue) queue = requestAnimationFrame(onFrame);\n });\n\n return observer;\n}\n\ntype Mutator = { observer: MutationObserver, collections: Map<string, () => void> };\nconst MUTATORS = new WeakMap<Element, Mutator>();\nconst MUTATORS_CALLBACK = (element: Element) => {\n\tconst mutator = MUTATORS.get(element);\n\n\tif (!mutator || !element.isConnected) {\n\t\tmutator?.observer?.disconnect();\n\t\tMUTATORS.delete(element);\n\t} else for(const [, callback] of mutator.collections) callback();\n};\n\nexport const onMutation = (\n\telement: Element,\n\tclassName: string,\n\tcallback: ((collection: HTMLCollection) => void) | false\n) => {\n\tconst collection = element.getElementsByClassName(className);\n\tlet mutator = MUTATORS.get(element);\n\n\tif (!mutator) {\n\t\tmutator = { collections: new Map(), observer: createOptimizedMutationObserver(() => MUTATORS_CALLBACK(element)) };\n\t\tmutator.observer.observe(element, { childList: true, subtree: true, attributes: true, attributeFilter: ['class'] });\n\t\tMUTATORS.set(element, mutator);\n\t}\n\tif (callback) mutator.collections.set(className, () => callback(collection));\n\telse mutator.collections.delete(className);\n}\n\nexport const isInputLike = (el: unknown): el is HTMLInputElement =>\n\tel instanceof HTMLElement && 'validity' in el && !(el instanceof HTMLButtonElement);\n\n// Make React support popover=\"\"target attribute\n// https://github.com/facebook/react/issues/27479\ntype Popover = \"\" | \"auto\" | \"manual\" | undefined;\ndeclare global {\n\tnamespace React.JSX {\n\t\tinterface IntrinsicAttributes {\n\t\t\tpopovertargetaction?: string;\n\t\t\tpopovertarget?: string;\n\t\t\tpopover?: Popover;\n\t\t}\n\t}\n\tnamespace React {\n\t\tinterface HTMLAttributes<T> {\n\t\t\tpopovertargetaction?: string;\n\t\t\tpopovertarget?: string;\n\t\t\tpopover?: Popover;\n\t\t}\n\t}\n}","import styles from '../styles.module.css';\nimport { QUICK_EVENT, isInputLike, off, on, onMutation, useId } from '../utils';\n\nconst CSS_FIELD = styles.field.split(' ')[0];\nconst CSS_VALIDATIONS = styles.validation.split(' ');\nconst CSS_VALIDATION = CSS_VALIDATIONS[0];\n\nfunction renderAria(fields: HTMLCollectionOf<Element>) {\n for(const field of fields) {\n const labels: HTMLLabelElement[] = [];\n const descs: string[] = [];\n let input: HTMLInputElement | 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 (isInputLike(el)) input = el;\n else if (el.classList.contains(CSS_VALIDATION)) { // Must be before instanceof HTMLParagraphElement since validation 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 if (input) renderCounter(input);\n\n input?.setAttribute('aria-describedby', descs.join(' '));\n input?.setAttribute('aria-invalid', `${!valid}`);\n }\n}\nfunction handleInput({ target }: Event) {\n if (isInputLike(target)) renderCounter(target);\n}\n\nfunction renderCounter(input: HTMLInputElement) {\n const el = input?.nextElementSibling;\n const limit = el?.getAttribute('data-count');\n\n if (el && limit) {\n const remainder = Number(limit) - input.value.length;\n const nextInvalid = remainder < 0;\n const prevInvalid = el.getAttribute('aria-live') === 'polite';\n\n if (prevInvalid !== nextInvalid) {\n el.setAttribute('aria-live', nextInvalid ? 'polite' : 'off');\n for (const css of CSS_VALIDATIONS) el.classList.toggle(css, nextInvalid);\n }\n el.textContent = `${Math.abs(remainder)} tegn ${nextInvalid ? 'for mye' : 'igjen'}`;\n }\n}\n\nexport function observe (el: Element) {\n onMutation(el, CSS_FIELD, renderAria);\n on(el, 'input', handleInput, QUICK_EVENT);\n}\n\nexport function unobserve (el: Element) {\n onMutation(el, CSS_FIELD, false);\n off(el, 'input', handleInput, QUICK_EVENT);\n}\n\n// TODO: Remove invalid when errormessage is gone","import styles from '../styles.module.css';\nimport { isInputLike, onMutation, useId } from '../utils';\nconst CSS_FIELDSET = styles.fieldset.split(' ')[0];\nconst CSS_VALIDATION = styles.validation.split(' ')[0];\n\nfunction process(fieldsets: HTMLCollectionOf<Element>) {\n for(const fieldset of fieldsets) {\n const inputs: HTMLInputElement[] = [];\n let validationId = '';\n\n for (const el of fieldset.getElementsByTagName('*')) {\n if (el.classList.contains(CSS_VALIDATION)) validationId = useId(el);\n else if (isInputLike(el)) inputs.push(el);\n }\n\n if (validationId) \n for(const input of inputs) {\n input.setAttribute('aria-describedby', validationId);\n input.setAttribute('aria-invalid', 'true');\n }\n }\n}\n\nexport const observe = (el: Element) => onMutation(el, CSS_FIELDSET, process);\nexport const unobserve = (el: Element) => onMutation(el, CSS_FIELDSET, false);\n","import styles from '../styles.module.css';\nimport { IS_BROWSER, QUICK_EVENT, off, on } from '../utils';\n\nexport function observe(el: Node) {\n on(el, 'click', handleLinkClick); // Allow `<a>` to use `popovertarget` as well\n on(el, 'toggle', handleToggle, QUICK_EVENT); // Use capture since toggle does not bubble\n on(window, 'load,resize,scroll', updatePositions, QUICK_EVENT); // Use capture since toggle does not bubble\n on(document, 'DOMContentReady', updatePositions, QUICK_EVENT); // Use capture since toggle does not bubble\n document.fonts.ready.then(updatePositions); // Inital render and when fonts load\n}\nexport function unobserve(el: Node) {\n off(el, 'click', handleLinkClick);\n off(el, 'toggle', handleToggle, QUICK_EVENT); // Use capture since toggle does not bubble\n}\n\nconst CSS_POPOVER = styles.popover.split(' ')[0];\nconst SCROLLER = IS_BROWSER ? document.createElement('div') : null // Used to ensure we have scrollability under\nconst POPPING = new Map<Element, () => void>(); // Store current open poppers and their update functions\nSCROLLER?.setAttribute('style', 'position:absolute;padding:1px');\n\nfunction handleToggle ({ target: el, newState }: Event & { newState?: string }){\n if (el instanceof HTMLElement && el.classList.contains(CSS_POPOVER)) {\n const anchor = (el.getRootNode() as ShadowRoot)?.querySelector<HTMLElement>(`[popovertarget=\"${el.id}\"]`);\n const isOver = el.getAttribute('data-position') === 'over';\n \n if (newState === 'closed') POPPING.delete(el);\n else if (anchor) POPPING.set(el, () => place(anchor, el, isOver));\n document.body.append(SCROLLER || ''); // Ensure we have the scroller\n updatePositions();\n }\n}\n\nfunction updatePositions() {\n for (const [_, updatePosition] of POPPING) updatePosition();\n}\n\n// Polyfill popovertarget for <a> (not supported by native)\n// and automatically assume popovertarget is the closest parent popover\n// but respect the popovertarget and popovertargetaction attribute\nfunction handleLinkClick (event: Event){\n const link = event.target instanceof Element && event.target.closest('a');\n if (link) {\n const root = link.getRootNode() as ShadowRoot;\n const target = root.getElementById?.(link.getAttribute('popovertarget') || '') || link.closest(`.${CSS_POPOVER}`);\n const action = link.getAttribute('popovertargetaction') || 'toggle';\n\n target?.togglePopover(action === 'show' || (action === 'hide' ? false : undefined));\n }\n}\n\nfunction place (anchor: HTMLElement | null, popper: HTMLElement, isOver = false) {\n if (!anchor?.isConnected || !popper?.isConnected) return POPPING.delete(popper); // Stop watchning if anchor is removed from DOM\n\n const { offsetWidth: popperW, offsetHeight: popperH } = popper;\n const { offsetWidth: anchorW, offsetHeight: anchorH } = anchor;\n const { width, height, left, top } = anchor.getBoundingClientRect();\n const anchorX = Math.round(left - (anchorW - width) / 2); // Correct for CSS transform scale\n const anchorY = Math.round(top - (anchorH - height) / 2); // Correct for CSS transform scale\n const hasSpaceUnder = anchorY + anchorH + popperH < window.innerHeight;\n const hasSpaceOver = anchorY - popperH > 0\n const placeUnder = (!isOver && hasSpaceUnder) || !hasSpaceOver // Always place under when no hasSpaceOver, as no OS can scroll further up than 0\n const scroll = placeUnder ? window.scrollY + anchorY + anchorH + popperH + 30 : 0\n\n popper.style.left = `${Math.round(Math.min(Math.max(10, anchorX), window.innerWidth - popperW - 10))}px`\n popper.style.top = `${Math.round(placeUnder ? anchorY + anchorH : anchorY - popperH)}px`\n SCROLLER?.style.setProperty('top', `${Math.round(scroll)}px`);\n}\n","import styles from '../styles.module.css';\nimport { onMutation } from '../utils';\nconst CSS_TABLE = styles.table.split(' ')[0];\n\nfunction process(tables: HTMLCollectionOf<Element>) {\n for(const table of tables) if (table instanceof HTMLTableElement) {\n const ths = Array.from(table.tHead?.rows[0]?.cells || [], (el) => el.innerText?.trim()); // Using innerText to only include visible text\n for (const tbody of table.tBodies) {\n for (const row of tbody.rows) {\n for (const cell of row.cells) {\n cell.setAttribute('data-th', ths[cell.cellIndex] || ':empty'); // Using U+200B to prevent empty string from collapsing\n }\n }\n }\n }\n}\n\nexport const observe = (el: Element) => onMutation(el, CSS_TABLE, process);\nexport const unobserve = (el: Element) => onMutation(el, CSS_TABLE, false);\n","const getSteps = (now: number, max: number, show: number) => {\n const offset = (show - 1) / 2;\n const start = Math.max(Math.min(now - Math.floor(offset), max - show + 1), 1);\n const end = Math.min(Math.max(now + Math.ceil(offset), show), max);\n const pages = Array.from({ length: end + 1 - start }, (_, i) => i + start);\n\n if (show > 4 && start > 1) pages.splice(0, 2, 1, 0);\n if (show > 3 && end < max) pages.splice(-2, 2, 0, max);\n return pages;\n};\n\nexport const pagination = ({\n current = 1,\n total = 10,\n show = 7,\n}) => ({\n prev: current > 1 ? current - 1 : 0,\n next: current < total ? current + 1 : 0,\n pages: getSteps(current, total, show).map((page, index) => ({\n current: page === current && 'page' as const,\n key: `key-${page}-${index}`,\n page,\n })),\n});\n","import * as field from './field/field';\nimport * as fieldset from './fieldset/fieldset';\nimport * as popover from './popover/popover';\nimport * as table from './table/table';\nimport { IS_BROWSER } from './utils';\nexport { pagination } from './pagination/pagination';\nexport * as styles from './styles.module.css';\n\nif (IS_BROWSER) {\n // Check if the page is still loading - might happen if the script is in <head>\n const isLoading = document.readyState === \"loading\";\n const onLoaded = () => observe(document.body);\n\n if (isLoading) document.addEventListener(\"DOMContentLoaded\", onLoaded);\n else onLoaded();\n}\n \n observe(document.body); // Automatic observe on browser\n\nexport function observe(el: Element) {\n field.observe(el);\n fieldset.observe(el);\n popover.observe(el);\n table.observe(el);\n}\n\nexport function unobserve(el: Element) {\n field.unobserve(el);\n fieldset.unobserve(el);\n popover.unobserve(el);\n table.unobserve(el);\n}"],"names":["IS_BROWSER","QUICK_EVENT","id","UUID","useId","el","events","action","element","rest","type","on","off","createOptimizedMutationObserver","callback","queue","onFrame","onTimer","observer","MUTATORS","MUTATORS_CALLBACK","mutator","_a","onMutation","className","collection","isInputLike","CSS_FIELD","styles","CSS_VALIDATIONS","CSS_VALIDATION","renderAria","fields","field","labels","descs","input","valid","label","handleInput","target","renderCounter","limit","remainder","nextInvalid","css","observe","unobserve","CSS_FIELDSET","process","fieldsets","fieldset","inputs","validationId","handleLinkClick","handleToggle","updatePositions","CSS_POPOVER","SCROLLER","POPPING","newState","anchor","isOver","place","_","updatePosition","event","link","root","popper","popperW","popperH","anchorW","anchorH","width","height","left","top","anchorX","anchorY","hasSpaceUnder","hasSpaceOver","placeUnder","scroll","CSS_TABLE","tables","table","ths","_b","tbody","row","cell","getSteps","now","max","show","offset","start","end","pages","i","pagination","current","total","page","index","isLoading","onLoaded","field.observe","fieldset.observe","popover.observe","table.observe","field.unobserve","fieldset.unobserve","popover.unobserve","table.unobserve"],"mappings":"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"}
package/mtds/index.js CHANGED
@@ -1,21 +1,25 @@
1
- import { observe as e, unobserve as r } from "./field/field.js";
2
- import { observe as s, unobserve as b } from "./fieldset/fieldset.js";
3
- import { observe as v, unobserve as n } from "./popover/popover.js";
4
- import { observe as m, unobserve as t } from "./table/table.js";
5
- import { IS_BROWSER as u } from "./utils.js";
1
+ import { observe as r, unobserve as n } from "./field/field.js";
2
+ import { observe as t, unobserve as b } from "./fieldset/fieldset.js";
3
+ import { observe as a, unobserve as v } from "./popover/popover.js";
4
+ import { observe as m, unobserve as d } from "./table/table.js";
5
+ import { IS_BROWSER as i } from "./utils.js";
6
6
  import { pagination as S } from "./pagination/pagination.js";
7
- import * as x from "./styles.module.css.js";
8
- u && a(document);
9
- function a(o) {
10
- e(o), s(o), v(o), m(o);
7
+ import * as y from "./styles.module.css.js";
8
+ if (i) {
9
+ const o = document.readyState === "loading", e = () => s(document.body);
10
+ o ? document.addEventListener("DOMContentLoaded", e) : e();
11
11
  }
12
- function d(o) {
13
- r(o), b(o), n(o), t(o);
12
+ s(document.body);
13
+ function s(o) {
14
+ r(o), t(o), a(o), m(o);
15
+ }
16
+ function L(o) {
17
+ n(o), b(o), v(o), d(o);
14
18
  }
15
19
  export {
16
- a as observe,
20
+ s as observe,
17
21
  S as pagination,
18
- x as styles,
19
- d as unobserve
22
+ y as styles,
23
+ L as unobserve
20
24
  };
21
25
  //# sourceMappingURL=index.js.map
package/mtds/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../designsystem/index.ts"],"sourcesContent":["import * as field from './field/field';\nimport * as fieldset from './fieldset/fieldset';\nimport * as popover from './popover/popover';\nimport * as table from './table/table';\nimport { IS_BROWSER } from './utils';\nexport { pagination } from './pagination/pagination';\nexport * as styles from './styles.module.css';\n\nif (IS_BROWSER) observe(document); // Automatic observe on browser\n\nexport function observe(el: Element | Document) {\n field.observe(el);\n fieldset.observe(el);\n popover.observe(el);\n table.observe(el);\n}\n\nexport function unobserve(el: Element | Document) {\n field.unobserve(el);\n fieldset.unobserve(el);\n popover.unobserve(el);\n table.unobserve(el);\n}"],"names":["IS_BROWSER","observe","el","field.observe","fieldset.observe","popover.observe","table.observe","unobserve","field.unobserve","fieldset.unobserve","popover.unobserve","table.unobserve"],"mappings":";;;;;;;AAQIA,OAAoB,QAAQ;AAEzB,SAASC,EAAQC,GAAwB;AAC9CC,EAAAA,EAAcD,CAAE,GAChBE,EAAiBF,CAAE,GACnBG,EAAgBH,CAAE,GAClBI,EAAcJ,CAAE;AAClB;AAEO,SAASK,EAAUL,GAAwB;AAChDM,EAAAA,EAAgBN,CAAE,GAClBO,EAAmBP,CAAE,GACrBQ,EAAkBR,CAAE,GACpBS,EAAgBT,CAAE;AACpB;"}
1
+ {"version":3,"file":"index.js","sources":["../designsystem/index.ts"],"sourcesContent":["import * as field from './field/field';\nimport * as fieldset from './fieldset/fieldset';\nimport * as popover from './popover/popover';\nimport * as table from './table/table';\nimport { IS_BROWSER } from './utils';\nexport { pagination } from './pagination/pagination';\nexport * as styles from './styles.module.css';\n\nif (IS_BROWSER) {\n // Check if the page is still loading - might happen if the script is in <head>\n const isLoading = document.readyState === \"loading\";\n const onLoaded = () => observe(document.body);\n\n if (isLoading) document.addEventListener(\"DOMContentLoaded\", onLoaded);\n else onLoaded();\n}\n \n observe(document.body); // Automatic observe on browser\n\nexport function observe(el: Element) {\n field.observe(el);\n fieldset.observe(el);\n popover.observe(el);\n table.observe(el);\n}\n\nexport function unobserve(el: Element) {\n field.unobserve(el);\n fieldset.unobserve(el);\n popover.unobserve(el);\n table.unobserve(el);\n}"],"names":["IS_BROWSER","isLoading","onLoaded","observe","el","field.observe","fieldset.observe","popover.observe","table.observe","unobserve","field.unobserve","fieldset.unobserve","popover.unobserve","table.unobserve"],"mappings":";;;;;;;AAQA,IAAIA,GAAY;AAER,QAAAC,IAAY,SAAS,eAAe,WACpCC,IAAW,MAAMC,EAAQ,SAAS,IAAI;AAE5C,EAAIF,IAAW,SAAS,iBAAiB,oBAAoBC,CAAQ,IACvDA,EAAA;AAChB;AAEEC,EAAQ,SAAS,IAAI;AAEhB,SAASA,EAAQC,GAAa;AACnCC,EAAAA,EAAcD,CAAE,GAChBE,EAAiBF,CAAE,GACnBG,EAAgBH,CAAE,GAClBI,EAAcJ,CAAE;AAClB;AAEO,SAASK,EAAUL,GAAa;AACrCM,EAAAA,EAAgBN,CAAE,GAClBO,EAAmBP,CAAE,GACrBQ,EAAkBR,CAAE,GACpBS,EAAgBT,CAAE;AACpB;"}
@@ -14,3 +14,4 @@ export declare const Center: Story;
14
14
  export declare const Align: Story;
15
15
  export declare const Justify: Story;
16
16
  export declare const AlignContent: Story;
17
+ export declare const App: Story;
@@ -8,28 +8,28 @@ function N(t) {
8
8
  }
9
9
  const p = k.popover.split(" ")[0], i = E ? document.createElement("div") : null, g = /* @__PURE__ */ new Map();
10
10
  i == null || i.setAttribute("style", "position:absolute;padding:1px");
11
- function m({ target: t, newState: e }) {
11
+ function m({ target: t, newState: o }) {
12
12
  var s;
13
13
  if (t instanceof HTMLElement && t.classList.contains(p)) {
14
- const n = (s = t.getRootNode()) == null ? void 0 : s.querySelector(`[popovertarget="${t.id}"]`), o = t.getAttribute("data-position") === "over";
15
- e === "closed" ? g.delete(t) : n && g.set(t, () => $(n, t, o)), document.body.append(i || ""), f();
14
+ const n = (s = t.getRootNode()) == null ? void 0 : s.querySelector(`[popovertarget="${t.id}"]`), e = t.getAttribute("data-position") === "over";
15
+ o === "closed" ? g.delete(t) : n && g.set(t, () => $(n, t, e)), document.body.append(i || ""), f();
16
16
  }
17
17
  }
18
18
  function f() {
19
- for (const [t, e] of g) e();
19
+ for (const [t, o] of g) o();
20
20
  }
21
21
  function v(t) {
22
22
  var s;
23
- const e = t.target instanceof Element && t.target.closest("a");
24
- if (e) {
25
- const n = e.getRootNode(), o = ((s = n.getElementById) == null ? void 0 : s.call(n, e.getAttribute("popovertarget") || "")) || e.closest(`.${p}`), d = e.getAttribute("popovertargetaction") || "toggle";
26
- t.defaultPrevented || o == null || o.togglePopover(d === "show" || (d === "hide" ? !1 : void 0));
23
+ const o = t.target instanceof Element && t.target.closest("a");
24
+ if (o) {
25
+ const n = o.getRootNode(), e = ((s = n.getElementById) == null ? void 0 : s.call(n, o.getAttribute("popovertarget") || "")) || o.closest(`.${p}`), d = o.getAttribute("popovertargetaction") || "toggle";
26
+ e == null || e.togglePopover(d === "show" || (d === "hide" ? !1 : void 0));
27
27
  }
28
28
  }
29
- function $(t, e, s = !1) {
30
- if (!(t != null && t.isConnected) || !(e != null && e.isConnected)) return g.delete(e);
31
- const { offsetWidth: n, offsetHeight: o } = e, { offsetWidth: d, offsetHeight: a } = t, { width: w, height: y, left: M, top: P } = t.getBoundingClientRect(), b = Math.round(M - (d - w) / 2), c = Math.round(P - (a - y) / 2), x = c + a + o < window.innerHeight, H = c - o > 0, u = !s && x || !H, W = u ? window.scrollY + c + a + o + 30 : 0;
32
- e.style.left = `${Math.round(Math.min(Math.max(10, b), window.innerWidth - n - 10))}px`, e.style.top = `${Math.round(u ? c + a : c - o)}px`, i == null || i.style.setProperty("top", `${Math.round(W)}px`);
29
+ function $(t, o, s = !1) {
30
+ if (!(t != null && t.isConnected) || !(o != null && o.isConnected)) return g.delete(o);
31
+ const { offsetWidth: n, offsetHeight: e } = o, { offsetWidth: d, offsetHeight: a } = t, { width: w, height: y, left: M, top: P } = t.getBoundingClientRect(), b = Math.round(M - (d - w) / 2), c = Math.round(P - (a - y) / 2), x = c + a + e < window.innerHeight, H = c - e > 0, u = !s && x || !H, W = u ? window.scrollY + c + a + e + 30 : 0;
32
+ o.style.left = `${Math.round(Math.min(Math.max(10, b), window.innerWidth - n - 10))}px`, o.style.top = `${Math.round(u ? c + a : c - e)}px`, i == null || i.style.setProperty("top", `${Math.round(W)}px`);
33
33
  }
34
34
  export {
35
35
  I as observe,
@@ -1 +1 @@
1
- {"version":3,"file":"popover.js","sources":["../../designsystem/popover/popover.ts"],"sourcesContent":["import styles from '../styles.module.css';\nimport { IS_BROWSER, QUICK_EVENT, off, on } from '../utils';\n\nexport function observe(el: Node) {\n on(el, 'click', handleLinkClick); // Allow `<a>` to use `popovertarget` as well\n on(el, 'toggle', handleToggle, QUICK_EVENT); // Use capture since toggle does not bubble\n on(window, 'load,resize,scroll', updatePositions, QUICK_EVENT); // Use capture since toggle does not bubble\n on(document, 'DOMContentReady', updatePositions, QUICK_EVENT); // Use capture since toggle does not bubble\n document.fonts.ready.then(updatePositions); // Inital render and when fonts load\n}\nexport function unobserve(el: Node) {\n off(el, 'click', handleLinkClick);\n off(el, 'toggle', handleToggle, QUICK_EVENT); // Use capture since toggle does not bubble\n}\n\nconst CSS_POPOVER = styles.popover.split(' ')[0];\nconst SCROLLER = IS_BROWSER ? document.createElement('div') : null // Used to ensure we have scrollability under\nconst POPPING = new Map<Element, () => void>(); // Store current open poppers and their update functions\nSCROLLER?.setAttribute('style', 'position:absolute;padding:1px');\n\nfunction handleToggle ({ target: el, newState }: Event & { newState?: string }){\n if (el instanceof HTMLElement && el.classList.contains(CSS_POPOVER)) {\n const anchor = (el.getRootNode() as ShadowRoot)?.querySelector<HTMLElement>(`[popovertarget=\"${el.id}\"]`);\n const isOver = el.getAttribute('data-position') === 'over';\n \n if (newState === 'closed') POPPING.delete(el);\n else if (anchor) POPPING.set(el, () => place(anchor, el, isOver));\n document.body.append(SCROLLER || ''); // Ensure we have the scroller\n updatePositions();\n }\n}\n\nfunction updatePositions() {\n for (const [_, updatePosition] of POPPING) updatePosition();\n}\n\n// Polyfill popovertarget for <a> (not supported by native)\n// and automatically assume popovertarget is the closest parent popover\n// but respect the popovertarget and popovertargetaction attribute\nfunction handleLinkClick (event: Event){\n const link = event.target instanceof Element && event.target.closest('a');\n if (link) {\n const root = link.getRootNode() as ShadowRoot;\n const target = root.getElementById?.(link.getAttribute('popovertarget') || '') || link.closest(`.${CSS_POPOVER}`);\n const action = link.getAttribute('popovertargetaction') || 'toggle';\n\n if (!event.defaultPrevented) target?.togglePopover(action === 'show' || (action === 'hide' ? false : undefined));\n }\n}\n\nfunction place (anchor: HTMLElement | null, popper: HTMLElement, isOver = false) {\n if (!anchor?.isConnected || !popper?.isConnected) return POPPING.delete(popper); // Stop watchning if anchor is removed from DOM\n\n const { offsetWidth: popperW, offsetHeight: popperH } = popper;\n const { offsetWidth: anchorW, offsetHeight: anchorH } = anchor;\n const { width, height, left, top } = anchor.getBoundingClientRect();\n const anchorX = Math.round(left - (anchorW - width) / 2); // Correct for CSS transform scale\n const anchorY = Math.round(top - (anchorH - height) / 2); // Correct for CSS transform scale\n const hasSpaceUnder = anchorY + anchorH + popperH < window.innerHeight;\n const hasSpaceOver = anchorY - popperH > 0\n const placeUnder = (!isOver && hasSpaceUnder) || !hasSpaceOver // Always place under when no hasSpaceOver, as no OS can scroll further up than 0\n const scroll = placeUnder ? window.scrollY + anchorY + anchorH + popperH + 30 : 0\n\n popper.style.left = `${Math.round(Math.min(Math.max(10, anchorX), window.innerWidth - popperW - 10))}px`\n popper.style.top = `${Math.round(placeUnder ? anchorY + anchorH : anchorY - popperH)}px`\n SCROLLER?.style.setProperty('top', `${Math.round(scroll)}px`);\n}\n"],"names":["observe","el","on","handleLinkClick","handleToggle","QUICK_EVENT","updatePositions","unobserve","off","CSS_POPOVER","styles","SCROLLER","IS_BROWSER","POPPING","newState","anchor","_a","isOver","place","_","updatePosition","event","link","root","target","action","popper","popperW","popperH","anchorW","anchorH","width","height","left","top","anchorX","anchorY","hasSpaceUnder","hasSpaceOver","placeUnder","scroll"],"mappings":"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"}
1
+ {"version":3,"file":"popover.js","sources":["../../designsystem/popover/popover.ts"],"sourcesContent":["import styles from '../styles.module.css';\nimport { IS_BROWSER, QUICK_EVENT, off, on } from '../utils';\n\nexport function observe(el: Node) {\n on(el, 'click', handleLinkClick); // Allow `<a>` to use `popovertarget` as well\n on(el, 'toggle', handleToggle, QUICK_EVENT); // Use capture since toggle does not bubble\n on(window, 'load,resize,scroll', updatePositions, QUICK_EVENT); // Use capture since toggle does not bubble\n on(document, 'DOMContentReady', updatePositions, QUICK_EVENT); // Use capture since toggle does not bubble\n document.fonts.ready.then(updatePositions); // Inital render and when fonts load\n}\nexport function unobserve(el: Node) {\n off(el, 'click', handleLinkClick);\n off(el, 'toggle', handleToggle, QUICK_EVENT); // Use capture since toggle does not bubble\n}\n\nconst CSS_POPOVER = styles.popover.split(' ')[0];\nconst SCROLLER = IS_BROWSER ? document.createElement('div') : null // Used to ensure we have scrollability under\nconst POPPING = new Map<Element, () => void>(); // Store current open poppers and their update functions\nSCROLLER?.setAttribute('style', 'position:absolute;padding:1px');\n\nfunction handleToggle ({ target: el, newState }: Event & { newState?: string }){\n if (el instanceof HTMLElement && el.classList.contains(CSS_POPOVER)) {\n const anchor = (el.getRootNode() as ShadowRoot)?.querySelector<HTMLElement>(`[popovertarget=\"${el.id}\"]`);\n const isOver = el.getAttribute('data-position') === 'over';\n \n if (newState === 'closed') POPPING.delete(el);\n else if (anchor) POPPING.set(el, () => place(anchor, el, isOver));\n document.body.append(SCROLLER || ''); // Ensure we have the scroller\n updatePositions();\n }\n}\n\nfunction updatePositions() {\n for (const [_, updatePosition] of POPPING) updatePosition();\n}\n\n// Polyfill popovertarget for <a> (not supported by native)\n// and automatically assume popovertarget is the closest parent popover\n// but respect the popovertarget and popovertargetaction attribute\nfunction handleLinkClick (event: Event){\n const link = event.target instanceof Element && event.target.closest('a');\n if (link) {\n const root = link.getRootNode() as ShadowRoot;\n const target = root.getElementById?.(link.getAttribute('popovertarget') || '') || link.closest(`.${CSS_POPOVER}`);\n const action = link.getAttribute('popovertargetaction') || 'toggle';\n\n target?.togglePopover(action === 'show' || (action === 'hide' ? false : undefined));\n }\n}\n\nfunction place (anchor: HTMLElement | null, popper: HTMLElement, isOver = false) {\n if (!anchor?.isConnected || !popper?.isConnected) return POPPING.delete(popper); // Stop watchning if anchor is removed from DOM\n\n const { offsetWidth: popperW, offsetHeight: popperH } = popper;\n const { offsetWidth: anchorW, offsetHeight: anchorH } = anchor;\n const { width, height, left, top } = anchor.getBoundingClientRect();\n const anchorX = Math.round(left - (anchorW - width) / 2); // Correct for CSS transform scale\n const anchorY = Math.round(top - (anchorH - height) / 2); // Correct for CSS transform scale\n const hasSpaceUnder = anchorY + anchorH + popperH < window.innerHeight;\n const hasSpaceOver = anchorY - popperH > 0\n const placeUnder = (!isOver && hasSpaceUnder) || !hasSpaceOver // Always place under when no hasSpaceOver, as no OS can scroll further up than 0\n const scroll = placeUnder ? window.scrollY + anchorY + anchorH + popperH + 30 : 0\n\n popper.style.left = `${Math.round(Math.min(Math.max(10, anchorX), window.innerWidth - popperW - 10))}px`\n popper.style.top = `${Math.round(placeUnder ? anchorY + anchorH : anchorY - popperH)}px`\n SCROLLER?.style.setProperty('top', `${Math.round(scroll)}px`);\n}\n"],"names":["observe","el","on","handleLinkClick","handleToggle","QUICK_EVENT","updatePositions","unobserve","off","CSS_POPOVER","styles","SCROLLER","IS_BROWSER","POPPING","newState","anchor","_a","isOver","place","_","updatePosition","event","link","root","target","action","popper","popperW","popperH","anchorW","anchorH","width","height","left","top","anchorX","anchorY","hasSpaceUnder","hasSpaceOver","placeUnder","scroll"],"mappings":"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"}