@mattilsynet/design 2.2.29 → 2.2.30
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/mtds/alert/alert.js +8 -9
- package/mtds/alert/alert.js.map +1 -1
- package/mtds/analytics/analytics.js +104 -165
- package/mtds/analytics/analytics.js.map +1 -1
- package/mtds/app/app-observer.js +27 -73
- package/mtds/app/app-observer.js.map +1 -1
- package/mtds/app/app-toggle.js +24 -2
- package/mtds/app/app-toggle.js.map +1 -1
- package/mtds/app/app-toggle2.js +10 -16
- package/mtds/app/app-toggle2.js.map +1 -1
- package/mtds/app/app.js +32 -36
- package/mtds/app/app.js.map +1 -1
- package/mtds/atlas/atlas-element.d.ts +27 -0
- package/mtds/atlas/atlas-element.js +63 -84
- package/mtds/atlas/atlas-element.js.map +1 -1
- package/mtds/atlas/atlas-marker.js +28 -48
- package/mtds/atlas/atlas-marker.js.map +1 -1
- package/mtds/atlas/atlas-matgeo.d.ts +3 -8
- package/mtds/atlas/atlas-matgeo.js +36 -66
- package/mtds/atlas/atlas-matgeo.js.map +1 -1
- package/mtds/atlas/atlas-wms.js +11 -21
- package/mtds/atlas/atlas-wms.js.map +1 -1
- package/mtds/atlas/atlas.css.js +2 -2
- package/mtds/atlas/atlas.css.js.map +1 -1
- package/mtds/atlas/atlas.js +23 -23
- package/mtds/atlas/atlas.js.map +1 -1
- package/mtds/atlas/atlas.stories.d.ts +1 -0
- package/mtds/atlas/cluster.js +697 -1576
- package/mtds/atlas/cluster.js.map +1 -1
- package/mtds/atlas.iife.js +4 -4
- package/mtds/atlas.js +11 -10
- package/mtds/avatar/avatar.js +8 -8
- package/mtds/avatar/avatar.js.map +1 -1
- package/mtds/badge/badge.js +7 -7
- package/mtds/badge/badge.js.map +1 -1
- package/mtds/breadcrumbs/breadcrumbs-observer.js +9 -10
- package/mtds/breadcrumbs/breadcrumbs-observer.js.map +1 -1
- package/mtds/breadcrumbs/breadcrumbs.js +13 -14
- package/mtds/breadcrumbs/breadcrumbs.js.map +1 -1
- package/mtds/button/button.js +14 -16
- package/mtds/button/button.js.map +1 -1
- package/mtds/card/card.js +12 -14
- package/mtds/card/card.js.map +1 -1
- package/mtds/chart/chart-axis.js +15 -27
- package/mtds/chart/chart-axis.js.map +1 -1
- package/mtds/chart/chart-bars.js +13 -15
- package/mtds/chart/chart-bars.js.map +1 -1
- package/mtds/chart/chart-element.js +48 -83
- package/mtds/chart/chart-element.js.map +1 -1
- package/mtds/chart/chart-lines.js +32 -54
- package/mtds/chart/chart-lines.js.map +1 -1
- package/mtds/chart/chart-pies.js +14 -34
- package/mtds/chart/chart-pies.js.map +1 -1
- package/mtds/chart/chart.css.js +2 -2
- package/mtds/chart/chart.css.js.map +1 -1
- package/mtds/chart/chart.js +12 -12
- package/mtds/chart/chart.js.map +1 -1
- package/mtds/chip/chip.js +8 -8
- package/mtds/chip/chip.js.map +1 -1
- package/mtds/details/details.js +12 -14
- package/mtds/details/details.js.map +1 -1
- package/mtds/dialog/dialog-observer.js +22 -35
- package/mtds/dialog/dialog-observer.js.map +1 -1
- package/mtds/dialog/dialog.js +12 -12
- package/mtds/dialog/dialog.js.map +1 -1
- package/mtds/divider/divider.js +10 -10
- package/mtds/divider/divider.js.map +1 -1
- package/mtds/errorsummary/errorsummary-observer.js +8 -11
- package/mtds/errorsummary/errorsummary-observer.js.map +1 -1
- package/mtds/errorsummary/errorsummary.js +11 -11
- package/mtds/errorsummary/errorsummary.js.map +1 -1
- package/mtds/external/@turf/boolean-point-in-polygon/dist/esm/index.js +19 -27
- package/mtds/external/@turf/boolean-point-in-polygon/dist/esm/index.js.map +1 -1
- package/mtds/external/@turf/helpers/dist/esm/index.js +16 -29
- package/mtds/external/@turf/helpers/dist/esm/index.js.map +1 -1
- package/mtds/external/@turf/invariant/dist/esm/index.js +13 -20
- package/mtds/external/@turf/invariant/dist/esm/index.js.map +1 -1
- package/mtds/external/leaflet/dist/leaflet-src.js +3096 -6004
- package/mtds/external/leaflet/dist/leaflet-src.js.map +1 -1
- package/mtds/external/leaflet/dist/leaflet.css.js +2 -2
- package/mtds/external/leaflet/dist/leaflet.css.js.map +1 -1
- package/mtds/external/point-in-polygon-hao/dist/esm/index.js +16 -46
- package/mtds/external/point-in-polygon-hao/dist/esm/index.js.map +1 -1
- package/mtds/external/robust-predicates/esm/orient2d.js +19 -163
- package/mtds/external/robust-predicates/esm/orient2d.js.map +1 -1
- package/mtds/external/robust-predicates/esm/util.js +25 -85
- package/mtds/external/robust-predicates/esm/util.js.map +1 -1
- package/mtds/field/field-observer.js +53 -101
- package/mtds/field/field-observer.js.map +1 -1
- package/mtds/field/field.js +145 -177
- package/mtds/field/field.js.map +1 -1
- package/mtds/fieldset/fieldset-observer.js +14 -24
- package/mtds/fieldset/fieldset-observer.js.map +1 -1
- package/mtds/fieldset/fieldset.js +20 -23
- package/mtds/fieldset/fieldset.js.map +1 -1
- package/mtds/fileupload/fileupload.js +8 -9
- package/mtds/fileupload/fileupload.js.map +1 -1
- package/mtds/helptext/helptext.js +15 -15
- package/mtds/helptext/helptext.js.map +1 -1
- package/mtds/illustrations/index.json +2 -2
- package/mtds/index.iife.js +15 -15
- package/mtds/index.js +26 -26
- package/mtds/input/input.js +28 -30
- package/mtds/input/input.js.map +1 -1
- package/mtds/law/law-helper.js +77 -143
- package/mtds/law/law-helper.js.map +1 -1
- package/mtds/law/law.js +6 -6
- package/mtds/law/law.js.map +1 -1
- package/mtds/layout/layout.js +10 -13
- package/mtds/layout/layout.js.map +1 -1
- package/mtds/link/link.js +7 -8
- package/mtds/link/link.js.map +1 -1
- package/mtds/logo/logo-observer.js +12 -18
- package/mtds/logo/logo-observer.js.map +1 -1
- package/mtds/logo/logo.js +8 -8
- package/mtds/logo/logo.js.map +1 -1
- package/mtds/package.json.js +2 -2
- package/mtds/pagination/pagination-helper.js +11 -17
- package/mtds/pagination/pagination-helper.js.map +1 -1
- package/mtds/pagination/pagination.js +30 -30
- package/mtds/pagination/pagination.js.map +1 -1
- package/mtds/popover/popover-observer.js +33 -45
- package/mtds/popover/popover-observer.js.map +1 -1
- package/mtds/popover/popover.js +12 -13
- package/mtds/popover/popover.js.map +1 -1
- package/mtds/progress/progress.js +8 -8
- package/mtds/progress/progress.js.map +1 -1
- package/mtds/react-atlas.js +13 -12
- package/mtds/react.js +80 -80
- package/mtds/skeleton/skeleton.js +8 -8
- package/mtds/skeleton/skeleton.js.map +1 -1
- package/mtds/spinner/spinner.js +8 -8
- package/mtds/spinner/spinner.js.map +1 -1
- package/mtds/steps/steps.js +7 -7
- package/mtds/steps/steps.js.map +1 -1
- package/mtds/styles.css +1 -4605
- package/mtds/styles.json +43 -43
- package/mtds/styles.module.css.js +112 -167
- package/mtds/styles.module.css.js.map +1 -1
- package/mtds/table/table-observer.js +19 -22
- package/mtds/table/table-observer.js.map +1 -1
- package/mtds/table/table.d.ts +7 -0
- package/mtds/table/table.js +43 -18
- package/mtds/table/table.js.map +1 -1
- package/mtds/tabs/tabs.js +21 -25
- package/mtds/tabs/tabs.js.map +1 -1
- package/mtds/tag/tag.js +8 -8
- package/mtds/tag/tag.js.map +1 -1
- package/mtds/tailwind.css +6 -25
- package/mtds/toast/toast-helper.js +20 -35
- package/mtds/toast/toast-helper.js.map +1 -1
- package/mtds/toast/toast-observer.js +15 -30
- package/mtds/toast/toast-observer.js.map +1 -1
- package/mtds/toast/toast.js +37 -45
- package/mtds/toast/toast.js.map +1 -1
- package/mtds/togglegroup/togglegroup-observer.js +10 -15
- package/mtds/togglegroup/togglegroup-observer.js.map +1 -1
- package/mtds/togglegroup/togglegroup.js +24 -21
- package/mtds/togglegroup/togglegroup.js.map +1 -1
- package/mtds/tooltip/tooltip-observer.js +32 -48
- package/mtds/tooltip/tooltip-observer.js.map +1 -1
- package/mtds/typography/typography.js +19 -28
- package/mtds/typography/typography.js.map +1 -1
- package/mtds/utils.js +89 -129
- package/mtds/utils.js.map +1 -1
- package/mtds/validation/validation-observer.js +25 -31
- package/mtds/validation/validation-observer.js.map +1 -1
- package/mtds/validation/validation.js +12 -12
- package/mtds/validation/validation.js.map +1 -1
- package/package.json +4 -3
package/mtds/atlas.js
CHANGED
|
@@ -1,13 +1,14 @@
|
|
|
1
|
-
import { MTDSAtlasElement } from "./atlas/atlas-element.js";
|
|
2
|
-
import { MTDSAtlasMarkerElement } from "./atlas/atlas-marker.js";
|
|
3
|
-
import { MTDSAtlasMatgeoElement } from "./atlas/atlas-matgeo.js";
|
|
4
|
-
import { MTDSAtlasWMSElement } from "./atlas/atlas-wms.js";
|
|
5
|
-
import { default as
|
|
1
|
+
import { MATGEO_URL as r, MTDSAtlasElement as o } from "./atlas/atlas-element.js";
|
|
2
|
+
import { MTDSAtlasMarkerElement as m } from "./atlas/atlas-marker.js";
|
|
3
|
+
import { MTDSAtlasMatgeoElement as M } from "./atlas/atlas-matgeo.js";
|
|
4
|
+
import { MTDSAtlasWMSElement as p } from "./atlas/atlas-wms.js";
|
|
5
|
+
import { default as x } from "./external/leaflet/dist/leaflet-src.js";
|
|
6
6
|
export {
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
7
|
+
x as L,
|
|
8
|
+
r as MATGEO_URL,
|
|
9
|
+
o as MTDSAtlasElement,
|
|
10
|
+
m as MTDSAtlasMarkerElement,
|
|
11
|
+
M as MTDSAtlasMatgeoElement,
|
|
12
|
+
p as MTDSAtlasWMSElement
|
|
12
13
|
};
|
|
13
14
|
//# sourceMappingURL=atlas.js.map
|
package/mtds/avatar/avatar.js
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import { jsx } from "react/jsx-runtime";
|
|
2
|
-
import
|
|
3
|
-
import { forwardRef } from "react";
|
|
4
|
-
import
|
|
5
|
-
const
|
|
6
|
-
const
|
|
7
|
-
return /* @__PURE__ */
|
|
1
|
+
import { jsx as f } from "react/jsx-runtime";
|
|
2
|
+
import s from "clsx";
|
|
3
|
+
import { forwardRef as n } from "react";
|
|
4
|
+
import p from "../styles.module.css.js";
|
|
5
|
+
const x = n(function({ as: a, className: o, ...r }, t) {
|
|
6
|
+
const m = a || (r.href ? "a" : "span");
|
|
7
|
+
return /* @__PURE__ */ f(m, { className: s(p.avatar, o), ref: t, ...r });
|
|
8
8
|
});
|
|
9
9
|
export {
|
|
10
|
-
Avatar
|
|
10
|
+
x as Avatar
|
|
11
11
|
};
|
|
12
12
|
//# sourceMappingURL=avatar.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"avatar.js","sources":["../../designsystem/avatar/avatar.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { forwardRef, type JSX } from \"react\";\nimport type {\n\tPolymorphicComponentPropWithRef,\n\tPolymorphicRef,\n} from \"../react-types\";\nimport styles from \"../styles.module.css\";\n\ntype AvatarBaseProps<Href> = {\n\thref?: Href;\n};\n\nexport type AvatarProps<\n\tHref,\n\tAs extends React.ElementType = Href extends string ? \"a\" : \"span\",\n> = PolymorphicComponentPropWithRef<As, AvatarBaseProps<Href>>;\n\ntype AvatarComponent = <\n\tHref,\n\tAs extends React.ElementType = Href extends string ? \"a\" : \"span\",\n>(\n\tprops: AvatarProps<Href, As>,\n) => JSX.Element;\n\nexport const Avatar: AvatarComponent = forwardRef<null>(function Avatar<\n\tHref,\n\tAs extends React.ElementType = Href extends string ? \"a\" : \"span\",\n>({ as, className, ...rest }: AvatarProps<Href, As>, ref?: PolymorphicRef<As>) {\n\tconst Tag = as || (rest.href ? \"a\" : \"span\");\n\n\treturn <Tag className={clsx(styles.avatar, className)} ref={ref} {...rest} />;\n}) as AvatarComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n"],"names":["Avatar"],"mappings":";;;;AAwBO,
|
|
1
|
+
{"version":3,"file":"avatar.js","sources":["../../designsystem/avatar/avatar.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { forwardRef, type JSX } from \"react\";\nimport type {\n\tPolymorphicComponentPropWithRef,\n\tPolymorphicRef,\n} from \"../react-types\";\nimport styles from \"../styles.module.css\";\n\ntype AvatarBaseProps<Href> = {\n\thref?: Href;\n};\n\nexport type AvatarProps<\n\tHref,\n\tAs extends React.ElementType = Href extends string ? \"a\" : \"span\",\n> = PolymorphicComponentPropWithRef<As, AvatarBaseProps<Href>>;\n\ntype AvatarComponent = <\n\tHref,\n\tAs extends React.ElementType = Href extends string ? \"a\" : \"span\",\n>(\n\tprops: AvatarProps<Href, As>,\n) => JSX.Element;\n\nexport const Avatar: AvatarComponent = forwardRef<null>(function Avatar<\n\tHref,\n\tAs extends React.ElementType = Href extends string ? \"a\" : \"span\",\n>({ as, className, ...rest }: AvatarProps<Href, As>, ref?: PolymorphicRef<As>) {\n\tconst Tag = as || (rest.href ? \"a\" : \"span\");\n\n\treturn <Tag className={clsx(styles.avatar, className)} ref={ref} {...rest} />;\n}) as AvatarComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n"],"names":["Avatar","forwardRef","as","className","rest","ref","Tag","jsx","clsx","styles"],"mappings":";;;;AAwBO,MAAMA,IAA0BC,EAAiB,SAGtD,EAAE,IAAAC,GAAI,WAAAC,GAAW,GAAGC,EAAA,GAA+BC,GAA0B;AAC9E,QAAMC,IAAMJ,MAAOE,EAAK,OAAO,MAAM;AAErC,SAAO,gBAAAG,EAACD,GAAA,EAAI,WAAWE,EAAKC,EAAO,QAAQN,CAAS,GAAG,KAAAE,GAAW,GAAGD,EAAA,CAAM;AAC5E,CAAC;"}
|
package/mtds/badge/badge.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import { jsx } from "react/jsx-runtime";
|
|
2
|
-
import
|
|
3
|
-
import { forwardRef } from "react";
|
|
4
|
-
import
|
|
5
|
-
const
|
|
6
|
-
return /* @__PURE__ */
|
|
1
|
+
import { jsx as t } from "react/jsx-runtime";
|
|
2
|
+
import e from "clsx";
|
|
3
|
+
import { forwardRef as s } from "react";
|
|
4
|
+
import a from "../styles.module.css.js";
|
|
5
|
+
const d = s(function({ className: r, ...o }, m) {
|
|
6
|
+
return /* @__PURE__ */ t("span", { className: e(a.badge, r), ref: m, ...o });
|
|
7
7
|
});
|
|
8
8
|
export {
|
|
9
|
-
Badge
|
|
9
|
+
d as Badge
|
|
10
10
|
};
|
|
11
11
|
//# sourceMappingURL=badge.js.map
|
package/mtds/badge/badge.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"badge.js","sources":["../../designsystem/badge/badge.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { forwardRef } from \"react\";\nimport styles from \"../styles.module.css\";\n\nexport type BadgeProps = React.ComponentPropsWithoutRef<\"span\"> & {\n\t\"data-badge\"?: string | number | boolean;\n};\n\nexport const Badge = forwardRef<HTMLSpanElement, BadgeProps>(function Badge(\n\t{ className, ...rest },\n\tref,\n) {\n\treturn <span className={clsx(styles.badge, className)} ref={ref} {...rest} />;\n});\n"],"names":["Badge"],"mappings":";;;;AAQO,
|
|
1
|
+
{"version":3,"file":"badge.js","sources":["../../designsystem/badge/badge.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { forwardRef } from \"react\";\nimport styles from \"../styles.module.css\";\n\nexport type BadgeProps = React.ComponentPropsWithoutRef<\"span\"> & {\n\t\"data-badge\"?: string | number | boolean;\n};\n\nexport const Badge = forwardRef<HTMLSpanElement, BadgeProps>(function Badge(\n\t{ className, ...rest },\n\tref,\n) {\n\treturn <span className={clsx(styles.badge, className)} ref={ref} {...rest} />;\n});\n"],"names":["Badge","forwardRef","className","rest","ref","jsx","clsx","styles"],"mappings":";;;;AAQO,MAAMA,IAAQC,EAAwC,SAC5D,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAChBC,GACC;AACD,SAAO,gBAAAC,EAAC,QAAA,EAAK,WAAWC,EAAKC,EAAO,OAAOL,CAAS,GAAG,KAAAE,GAAW,GAAGD,EAAA,CAAM;AAC5E,CAAC;"}
|
|
@@ -1,13 +1,12 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { isBrowser, onLoaded, onMutation, attr } from "../utils.js";
|
|
3
|
-
const
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
attr(crumb, "aria-current", index === length - 1 ? "page" : null);
|
|
1
|
+
import s from "../styles.module.css.js";
|
|
2
|
+
import { isBrowser as n, onLoaded as c, onMutation as l, attr as m } from "../utils.js";
|
|
3
|
+
const u = s.breadcrumbs.split(" ")[0], o = n() ? document.getElementsByClassName(u) : [];
|
|
4
|
+
function i() {
|
|
5
|
+
if (o)
|
|
6
|
+
for (const r of o)
|
|
7
|
+
r.querySelectorAll("a").forEach((t, e, { length: a }) => {
|
|
8
|
+
m(t, "aria-current", e === a - 1 ? "page" : null);
|
|
10
9
|
});
|
|
11
10
|
}
|
|
12
|
-
|
|
11
|
+
c(() => [l(i, "class")]);
|
|
13
12
|
//# sourceMappingURL=breadcrumbs-observer.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"breadcrumbs-observer.js","sources":["../../designsystem/breadcrumbs/breadcrumbs-observer.ts"],"sourcesContent":["import styles from \"../styles.module.css\";\nimport { attr, isBrowser, onLoaded, onMutation } from \"../utils\";\n\nconst CSS_BREADCRUMBS = styles.breadcrumbs.split(\" \")[0];\nconst BREADCRUMBS = isBrowser()\n\t? document.getElementsByClassName(CSS_BREADCRUMBS)\n\t: [];\n\nfunction handleBreadcrumbsMutation() {\n\tif (BREADCRUMBS)\n\t\tfor (const breadcumbs of BREADCRUMBS)\n\t\t\tbreadcumbs.querySelectorAll(\"a\").forEach((crumb, index, { length }) => {\n\t\t\t\tattr(crumb, \"aria-current\", index === length - 1 ? \"page\" : null);\n\t\t\t});\n}\n\nonLoaded(() => [onMutation(handleBreadcrumbsMutation, \"class\")]);\n"],"names":[],"mappings":";;AAGA,
|
|
1
|
+
{"version":3,"file":"breadcrumbs-observer.js","sources":["../../designsystem/breadcrumbs/breadcrumbs-observer.ts"],"sourcesContent":["import styles from \"../styles.module.css\";\nimport { attr, isBrowser, onLoaded, onMutation } from \"../utils\";\n\nconst CSS_BREADCRUMBS = styles.breadcrumbs.split(\" \")[0];\nconst BREADCRUMBS = isBrowser()\n\t? document.getElementsByClassName(CSS_BREADCRUMBS)\n\t: [];\n\nfunction handleBreadcrumbsMutation() {\n\tif (BREADCRUMBS)\n\t\tfor (const breadcumbs of BREADCRUMBS)\n\t\t\tbreadcumbs.querySelectorAll(\"a\").forEach((crumb, index, { length }) => {\n\t\t\t\tattr(crumb, \"aria-current\", index === length - 1 ? \"page\" : null);\n\t\t\t});\n}\n\nonLoaded(() => [onMutation(handleBreadcrumbsMutation, \"class\")]);\n"],"names":["CSS_BREADCRUMBS","styles","BREADCRUMBS","isBrowser","handleBreadcrumbsMutation","breadcumbs","crumb","index","length","attr","onLoaded","onMutation"],"mappings":";;AAGA,MAAMA,IAAkBC,EAAO,YAAY,MAAM,GAAG,EAAE,CAAC,GACjDC,IAAcC,EAAA,IACjB,SAAS,uBAAuBH,CAAe,IAC/C,CAAA;AAEH,SAASI,IAA4B;AACpC,MAAIF;AACH,eAAWG,KAAcH;AACxB,MAAAG,EAAW,iBAAiB,GAAG,EAAE,QAAQ,CAACC,GAAOC,GAAO,EAAE,QAAAC,QAAa;AACtE,QAAAC,EAAKH,GAAO,gBAAgBC,MAAUC,IAAS,IAAI,SAAS,IAAI;AAAA,MACjE,CAAC;AACJ;AAEAE,EAAS,MAAM,CAACC,EAAWP,GAA2B,OAAO,CAAC,CAAC;"}
|
|
@@ -1,22 +1,21 @@
|
|
|
1
|
-
import { jsx } from "react/jsx-runtime";
|
|
2
|
-
import
|
|
3
|
-
import { forwardRef } from "react";
|
|
4
|
-
import
|
|
5
|
-
const
|
|
6
|
-
function
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
Tag,
|
|
1
|
+
import { jsx as e } from "react/jsx-runtime";
|
|
2
|
+
import s from "clsx";
|
|
3
|
+
import { forwardRef as t } from "react";
|
|
4
|
+
import c from "../styles.module.css.js";
|
|
5
|
+
const p = t(
|
|
6
|
+
function({ as: a, className: o, ...r }, m) {
|
|
7
|
+
return /* @__PURE__ */ e(
|
|
8
|
+
a || "nav",
|
|
10
9
|
{
|
|
11
|
-
"aria-label":
|
|
12
|
-
className:
|
|
13
|
-
ref,
|
|
14
|
-
...
|
|
10
|
+
"aria-label": r["aria-label"] || "Du er her:",
|
|
11
|
+
className: s(c.breadcrumbs, o),
|
|
12
|
+
ref: m,
|
|
13
|
+
...r
|
|
15
14
|
}
|
|
16
15
|
);
|
|
17
16
|
}
|
|
18
17
|
);
|
|
19
18
|
export {
|
|
20
|
-
Breadcrumbs
|
|
19
|
+
p as Breadcrumbs
|
|
21
20
|
};
|
|
22
21
|
//# sourceMappingURL=breadcrumbs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"breadcrumbs.js","sources":["../../designsystem/breadcrumbs/breadcrumbs.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { forwardRef, type JSX } from \"react\";\nimport type {\n\tPolymorphicComponentPropWithRef,\n\tPolymorphicRef,\n} from \"../react-types\";\nimport styles from \"../styles.module.css\";\n\nexport type BreadcrumbsProps<As extends React.ElementType = \"nav\"> =\n\tPolymorphicComponentPropWithRef<As, { \"aria-label\"?: string }>;\n\ntype BreadcrumbsComponent = <As extends React.ElementType = \"nav\">(\n\tprops: BreadcrumbsProps<As>,\n) => JSX.Element;\n\nexport const Breadcrumbs: BreadcrumbsComponent = forwardRef<null>(\n\tfunction Breadcrumbs<As extends React.ElementType = \"nav\">(\n\t\t{ as, className, ...rest }: BreadcrumbsProps<As>,\n\t\tref?: PolymorphicRef<As>,\n\t) {\n\t\tconst Tag = as || \"nav\";\n\n\t\treturn (\n\t\t\t<Tag\n\t\t\t\taria-label={rest[\"aria-label\"] || \"Du er her:\"}\n\t\t\t\tclassName={clsx(styles.breadcrumbs, className)}\n\t\t\t\tref={ref}\n\t\t\t\t{...rest}\n\t\t\t/>\n\t\t);\n\t},\n) as BreadcrumbsComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n"],"names":["Breadcrumbs"],"mappings":";;;;AAeO,
|
|
1
|
+
{"version":3,"file":"breadcrumbs.js","sources":["../../designsystem/breadcrumbs/breadcrumbs.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { forwardRef, type JSX } from \"react\";\nimport type {\n\tPolymorphicComponentPropWithRef,\n\tPolymorphicRef,\n} from \"../react-types\";\nimport styles from \"../styles.module.css\";\n\nexport type BreadcrumbsProps<As extends React.ElementType = \"nav\"> =\n\tPolymorphicComponentPropWithRef<As, { \"aria-label\"?: string }>;\n\ntype BreadcrumbsComponent = <As extends React.ElementType = \"nav\">(\n\tprops: BreadcrumbsProps<As>,\n) => JSX.Element;\n\nexport const Breadcrumbs: BreadcrumbsComponent = forwardRef<null>(\n\tfunction Breadcrumbs<As extends React.ElementType = \"nav\">(\n\t\t{ as, className, ...rest }: BreadcrumbsProps<As>,\n\t\tref?: PolymorphicRef<As>,\n\t) {\n\t\tconst Tag = as || \"nav\";\n\n\t\treturn (\n\t\t\t<Tag\n\t\t\t\taria-label={rest[\"aria-label\"] || \"Du er her:\"}\n\t\t\t\tclassName={clsx(styles.breadcrumbs, className)}\n\t\t\t\tref={ref}\n\t\t\t\t{...rest}\n\t\t\t/>\n\t\t);\n\t},\n) as BreadcrumbsComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n"],"names":["Breadcrumbs","forwardRef","as","className","rest","ref","jsx","clsx","styles"],"mappings":";;;;AAeO,MAAMA,IAAoCC;AAAA,EAChD,SACC,EAAE,IAAAC,GAAI,WAAAC,GAAW,GAAGC,EAAA,GACpBC,GACC;AAGD,WACC,gBAAAC;AAAA,MAHWJ,KAAM;AAAA,MAGhB;AAAA,QACA,cAAYE,EAAK,YAAY,KAAK;AAAA,QAClC,WAAWG,EAAKC,EAAO,aAAaL,CAAS;AAAA,QAC7C,KAAAE;AAAA,QACC,GAAGD;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACD;"}
|
package/mtds/button/button.js
CHANGED
|
@@ -1,23 +1,21 @@
|
|
|
1
|
-
import { jsx } from "react/jsx-runtime";
|
|
2
|
-
import
|
|
3
|
-
import { forwardRef } from "react";
|
|
4
|
-
import
|
|
5
|
-
const
|
|
6
|
-
const
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
return /* @__PURE__ */ jsx(
|
|
10
|
-
Tag,
|
|
1
|
+
import { jsx as a } from "react/jsx-runtime";
|
|
2
|
+
import s from "clsx";
|
|
3
|
+
import { forwardRef as f } from "react";
|
|
4
|
+
import m from "../styles.module.css.js";
|
|
5
|
+
const l = f(function({ as: r, className: n, type: u, ...t }, i) {
|
|
6
|
+
const o = r || (t.href ? "a" : "button");
|
|
7
|
+
return o === "button" && t["aria-busy"] && (t.disabled = !0), /* @__PURE__ */ a(
|
|
8
|
+
o,
|
|
11
9
|
{
|
|
12
|
-
suppressHydrationWarning:
|
|
13
|
-
className:
|
|
14
|
-
type:
|
|
15
|
-
ref,
|
|
16
|
-
...
|
|
10
|
+
suppressHydrationWarning: !0,
|
|
11
|
+
className: s(m.button, n),
|
|
12
|
+
type: u ?? (o === "button" ? o : void 0),
|
|
13
|
+
ref: i,
|
|
14
|
+
...t
|
|
17
15
|
}
|
|
18
16
|
);
|
|
19
17
|
});
|
|
20
18
|
export {
|
|
21
|
-
Button
|
|
19
|
+
l as Button
|
|
22
20
|
};
|
|
23
21
|
//# sourceMappingURL=button.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.js","sources":["../../designsystem/button/button.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { forwardRef, type JSX } from \"react\";\nimport type { FlexProps } from \"../react\";\nimport type {\n\tPolymorphicComponentPropWithRef,\n\tPolymorphicRef,\n} from \"../react-types\";\nimport styles from \"../styles.module.css\";\n\ntype ButtonBaseProps<Href> = {\n\t\"data-arrow\"?: \"left\" | \"right\" | true;\n\t\"data-justify\"?: \"start\" | \"center\" | \"end\" | \"right\" | \"left\";\n\t\"data-nowrap\"?: boolean;\n\t\"data-variant\"?: \"primary\" | \"secondary\" | \"tertiary\";\n\t\"data-command\"?: string;\n\t\"data-self\"?: FlexProps[\"data-items\"];\n\thref?: Href;\n\tpopovertarget?: string;\n\tpopovertargetaction?: string;\n};\n\nexport type ButtonProps<\n\tHref,\n\tAs extends React.ElementType = Href extends string ? \"a\" : \"button\",\n> = PolymorphicComponentPropWithRef<As, ButtonBaseProps<Href>>;\n\ntype ButtonElement = ButtonProps<null, \"button\">;\ntype ButtonComponent = <\n\tHref,\n\tAs extends React.ElementType = Href extends string ? \"a\" : \"button\",\n>(\n\tprops: ButtonProps<Href, As>,\n) => JSX.Element;\n\nexport const Button: ButtonComponent = forwardRef<null>(function Button<\n\tHref,\n\tAs extends React.ElementType = Href extends string ? \"a\" : \"button\",\n>(\n\t{ as, className, type, ...rest }: ButtonProps<Href, As>,\n\tref?: PolymorphicRef<As>,\n) {\n\tconst Tag = as || (rest.href ? \"a\" : \"button\");\n\n\tif (Tag === \"button\" && (rest as ButtonElement)[\"aria-busy\"])\n\t\t(rest as ButtonElement).disabled = true; // Automatically disable button if aria-busy is set\n\n\treturn (\n\t\t<Tag\n\t\t\tsuppressHydrationWarning // aria-label might change on client when using data-tooltip\n\t\t\tclassName={clsx(styles.button, className)}\n\t\t\ttype={type ?? (Tag === \"button\" ? Tag : undefined)} // Default to type=\"button\" if not set and tag is button\n\t\t\tref={ref}\n\t\t\t{...rest}\n\t\t/>\n\t);\n}) as ButtonComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n"],"names":["Button"],"mappings":";;;;AAkCO,
|
|
1
|
+
{"version":3,"file":"button.js","sources":["../../designsystem/button/button.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { forwardRef, type JSX } from \"react\";\nimport type { FlexProps } from \"../react\";\nimport type {\n\tPolymorphicComponentPropWithRef,\n\tPolymorphicRef,\n} from \"../react-types\";\nimport styles from \"../styles.module.css\";\n\ntype ButtonBaseProps<Href> = {\n\t\"data-arrow\"?: \"left\" | \"right\" | true;\n\t\"data-justify\"?: \"start\" | \"center\" | \"end\" | \"right\" | \"left\";\n\t\"data-nowrap\"?: boolean;\n\t\"data-variant\"?: \"primary\" | \"secondary\" | \"tertiary\";\n\t\"data-command\"?: string;\n\t\"data-self\"?: FlexProps[\"data-items\"];\n\thref?: Href;\n\tpopovertarget?: string;\n\tpopovertargetaction?: string;\n};\n\nexport type ButtonProps<\n\tHref,\n\tAs extends React.ElementType = Href extends string ? \"a\" : \"button\",\n> = PolymorphicComponentPropWithRef<As, ButtonBaseProps<Href>>;\n\ntype ButtonElement = ButtonProps<null, \"button\">;\ntype ButtonComponent = <\n\tHref,\n\tAs extends React.ElementType = Href extends string ? \"a\" : \"button\",\n>(\n\tprops: ButtonProps<Href, As>,\n) => JSX.Element;\n\nexport const Button: ButtonComponent = forwardRef<null>(function Button<\n\tHref,\n\tAs extends React.ElementType = Href extends string ? \"a\" : \"button\",\n>(\n\t{ as, className, type, ...rest }: ButtonProps<Href, As>,\n\tref?: PolymorphicRef<As>,\n) {\n\tconst Tag = as || (rest.href ? \"a\" : \"button\");\n\n\tif (Tag === \"button\" && (rest as ButtonElement)[\"aria-busy\"])\n\t\t(rest as ButtonElement).disabled = true; // Automatically disable button if aria-busy is set\n\n\treturn (\n\t\t<Tag\n\t\t\tsuppressHydrationWarning // aria-label might change on client when using data-tooltip\n\t\t\tclassName={clsx(styles.button, className)}\n\t\t\ttype={type ?? (Tag === \"button\" ? Tag : undefined)} // Default to type=\"button\" if not set and tag is button\n\t\t\tref={ref}\n\t\t\t{...rest}\n\t\t/>\n\t);\n}) as ButtonComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n"],"names":["Button","forwardRef","as","className","type","rest","ref","Tag","jsx","clsx","styles"],"mappings":";;;;AAkCO,MAAMA,IAA0BC,EAAiB,SAIvD,EAAE,IAAAC,GAAI,WAAAC,GAAW,MAAAC,GAAM,GAAGC,EAAA,GAC1BC,GACC;AACD,QAAMC,IAAML,MAAOG,EAAK,OAAO,MAAM;AAErC,SAAIE,MAAQ,YAAaF,EAAuB,WAAW,MACzDA,EAAuB,WAAW,KAGnC,gBAAAG;AAAA,IAACD;AAAA,IAAA;AAAA,MACA,0BAAwB;AAAA,MACxB,WAAWE,EAAKC,EAAO,QAAQP,CAAS;AAAA,MACxC,MAAMC,MAASG,MAAQ,WAAWA,IAAM;AAAA,MACxC,KAAAD;AAAA,MACC,GAAGD;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}
|
package/mtds/card/card.js
CHANGED
|
@@ -1,18 +1,16 @@
|
|
|
1
|
-
import { jsx } from "react/jsx-runtime";
|
|
2
|
-
import
|
|
3
|
-
import { forwardRef } from "react";
|
|
4
|
-
import
|
|
5
|
-
const
|
|
6
|
-
const
|
|
7
|
-
return /* @__PURE__ */
|
|
8
|
-
})
|
|
9
|
-
const
|
|
10
|
-
|
|
11
|
-
if (Tag === "button" && !rest.type) Object.assign(rest, { type: "button" });
|
|
12
|
-
return /* @__PURE__ */ jsx(Tag, { className: clsx(styles.group, className), ref, ...rest });
|
|
1
|
+
import { jsx as c } from "react/jsx-runtime";
|
|
2
|
+
import s from "clsx";
|
|
3
|
+
import { forwardRef as f } from "react";
|
|
4
|
+
import i from "../styles.module.css.js";
|
|
5
|
+
const g = f(function({ as: t, className: n, ...o }, a) {
|
|
6
|
+
const r = t || (o.href ? "a" : "div");
|
|
7
|
+
return /* @__PURE__ */ c(r, { className: s(i.card, n), ref: a, ...o });
|
|
8
|
+
}), l = f(function({ as: t, className: n, ...o }, a) {
|
|
9
|
+
const r = t || "div";
|
|
10
|
+
return r === "button" && !o.type && Object.assign(o, { type: "button" }), /* @__PURE__ */ c(r, { className: s(i.group, n), ref: a, ...o });
|
|
13
11
|
});
|
|
14
12
|
export {
|
|
15
|
-
Card,
|
|
16
|
-
Group
|
|
13
|
+
g as Card,
|
|
14
|
+
l as Group
|
|
17
15
|
};
|
|
18
16
|
//# sourceMappingURL=card.js.map
|
package/mtds/card/card.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"card.js","sources":["../../designsystem/card/card.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { forwardRef, type JSX } from \"react\";\nimport type {\n\tPolymorphicComponentPropWithRef,\n\tPolymorphicRef,\n\tSizes,\n} from \"../react-types\";\nimport styles from \"../styles.module.css\";\n\ntype CardBaseProps<Href> = {\n\t\"data-pad\"?: Sizes;\n\thref?: Href;\n};\n\nexport type CardProps<\n\tHref,\n\tAs extends React.ElementType = Href extends string ? \"a\" : \"div\",\n> = PolymorphicComponentPropWithRef<As, CardBaseProps<Href>>;\n\ntype CardComponent = <\n\tHref,\n\tAs extends React.ElementType = Href extends string ? \"a\" : \"div\",\n>(\n\tprops: CardProps<Href, As>,\n) => JSX.Element;\n\nexport const Card: CardComponent = forwardRef<null>(function Card<\n\tHref,\n\tAs extends React.ElementType = Href extends string ? \"a\" : \"div\",\n>({ as, className, ...rest }: CardProps<Href, As>, ref?: PolymorphicRef<As>) {\n\tconst Tag = as || (rest.href ? \"a\" : \"div\");\n\n\treturn <Tag className={clsx(styles.card, className)} ref={ref} {...rest} />;\n}) as CardComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n\nexport type GroupProps<As extends React.ElementType = \"div\"> =\n\tPolymorphicComponentPropWithRef<As, { \"data-pad\"?: Sizes }>;\n\ntype GroupComponent = <As extends React.ElementType = \"div\">(\n\tprops: GroupProps<As>,\n) => JSX.Element;\n\nexport const Group: GroupComponent = forwardRef<null>(function Group<\n\tAs extends React.ElementType = \"div\",\n>({ as, className, ...rest }: GroupProps<As>, ref?: PolymorphicRef<As>) {\n\tconst Tag = as || \"div\";\n\tif (Tag === \"button\" && !rest.type) Object.assign(rest, { type: \"button\" }); // Default type for button to avoid accidental submits\n\treturn <Tag className={clsx(styles.group, className)} ref={ref} {...rest} />;\n}) as GroupComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n"],"names":["Card","Group"],"mappings":";;;;AA0BO,
|
|
1
|
+
{"version":3,"file":"card.js","sources":["../../designsystem/card/card.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { forwardRef, type JSX } from \"react\";\nimport type {\n\tPolymorphicComponentPropWithRef,\n\tPolymorphicRef,\n\tSizes,\n} from \"../react-types\";\nimport styles from \"../styles.module.css\";\n\ntype CardBaseProps<Href> = {\n\t\"data-pad\"?: Sizes;\n\thref?: Href;\n};\n\nexport type CardProps<\n\tHref,\n\tAs extends React.ElementType = Href extends string ? \"a\" : \"div\",\n> = PolymorphicComponentPropWithRef<As, CardBaseProps<Href>>;\n\ntype CardComponent = <\n\tHref,\n\tAs extends React.ElementType = Href extends string ? \"a\" : \"div\",\n>(\n\tprops: CardProps<Href, As>,\n) => JSX.Element;\n\nexport const Card: CardComponent = forwardRef<null>(function Card<\n\tHref,\n\tAs extends React.ElementType = Href extends string ? \"a\" : \"div\",\n>({ as, className, ...rest }: CardProps<Href, As>, ref?: PolymorphicRef<As>) {\n\tconst Tag = as || (rest.href ? \"a\" : \"div\");\n\n\treturn <Tag className={clsx(styles.card, className)} ref={ref} {...rest} />;\n}) as CardComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n\nexport type GroupProps<As extends React.ElementType = \"div\"> =\n\tPolymorphicComponentPropWithRef<As, { \"data-pad\"?: Sizes }>;\n\ntype GroupComponent = <As extends React.ElementType = \"div\">(\n\tprops: GroupProps<As>,\n) => JSX.Element;\n\nexport const Group: GroupComponent = forwardRef<null>(function Group<\n\tAs extends React.ElementType = \"div\",\n>({ as, className, ...rest }: GroupProps<As>, ref?: PolymorphicRef<As>) {\n\tconst Tag = as || \"div\";\n\tif (Tag === \"button\" && !rest.type) Object.assign(rest, { type: \"button\" }); // Default type for button to avoid accidental submits\n\treturn <Tag className={clsx(styles.group, className)} ref={ref} {...rest} />;\n}) as GroupComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n"],"names":["Card","forwardRef","as","className","rest","ref","Tag","jsx","clsx","styles","Group"],"mappings":";;;;AA0BO,MAAMA,IAAsBC,EAAiB,SAGlD,EAAE,IAAAC,GAAI,WAAAC,GAAW,GAAGC,EAAA,GAA6BC,GAA0B;AAC5E,QAAMC,IAAMJ,MAAOE,EAAK,OAAO,MAAM;AAErC,SAAO,gBAAAG,EAACD,GAAA,EAAI,WAAWE,EAAKC,EAAO,MAAMN,CAAS,GAAG,KAAAE,GAAW,GAAGD,EAAA,CAAM;AAC1E,CAAC,GASYM,IAAwBT,EAAiB,SAEpD,EAAE,IAAAC,GAAI,WAAAC,GAAW,GAAGC,EAAA,GAAwBC,GAA0B;AACvE,QAAMC,IAAMJ,KAAM;AAClB,SAAII,MAAQ,YAAY,CAACF,EAAK,QAAM,OAAO,OAAOA,GAAM,EAAE,MAAM,SAAA,CAAU,GACnE,gBAAAG,EAACD,GAAA,EAAI,WAAWE,EAAKC,EAAO,OAAON,CAAS,GAAG,KAAAE,GAAW,GAAGD,EAAA,CAAM;AAC3E,CAAC;"}
|
package/mtds/chart/chart-axis.js
CHANGED
|
@@ -1,33 +1,21 @@
|
|
|
1
|
-
import { tag } from "../utils.js";
|
|
2
|
-
const
|
|
3
|
-
function
|
|
4
|
-
const
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
return Math.max(acc, ...isStacked ? [sum] : all);
|
|
10
|
-
}, 0);
|
|
11
|
-
const tickRange = max / totalTicks;
|
|
12
|
-
const tickDigits = 10 ** `${Math.round(tickRange)}`.length;
|
|
13
|
-
const tickSize = tickRange / tickDigits;
|
|
14
|
-
const step = (STEPS.find((current) => current > tickSize) || 1) * tickDigits;
|
|
15
|
-
const total = Math.ceil(max / step) * step;
|
|
16
|
-
const axis = tag("div", {
|
|
17
|
-
"aria-label": data[0][0].value || null,
|
|
1
|
+
import { tag as n } from "../utils.js";
|
|
2
|
+
const $ = [0.1, 0.2, 0.25, 0.5, 1];
|
|
3
|
+
function y(s, { aspect: i, type: d }) {
|
|
4
|
+
const g = d === "stacked", l = s[0].reduce((t, u, f) => {
|
|
5
|
+
const m = s.map((o) => o[f].number), v = m.reduce((o, S) => o + S, 0);
|
|
6
|
+
return Math.max(t, ...g ? [v] : m);
|
|
7
|
+
}, 0), r = l / 10, p = 10 ** `${Math.round(r)}`.length, h = r / p, e = ($.find((t) => t > h) || 1) * p, a = Math.ceil(l / e) * e, c = n("div", {
|
|
8
|
+
"aria-label": s[0][0].value || null,
|
|
18
9
|
class: "axis",
|
|
19
10
|
role: "figure",
|
|
20
|
-
style: `${
|
|
21
|
-
});
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
(num) => steps.append(tag("div", { class: "axisStep", "data-label": num }))
|
|
26
|
-
);
|
|
27
|
-
return { total, groups, axis };
|
|
11
|
+
style: `${i ? `--mtdsc-chart-aspect: ${i};` : ""} --bars: ${s[0]?.length - 1}; --groups: ${s.length - 1}; --total: ${a}`
|
|
12
|
+
}), x = c.appendChild(n("div", { class: "axisSteps" })), k = c.appendChild(n("div", { class: "axisGroups" }));
|
|
13
|
+
return Array.from({ length: a / e + 1 }, (t, u) => b(e * u)).reverse().map(
|
|
14
|
+
(t) => x.append(n("div", { class: "axisStep", "data-label": t }))
|
|
15
|
+
), { total: a, groups: k, axis: c };
|
|
28
16
|
}
|
|
29
|
-
const
|
|
17
|
+
const b = new Intl.NumberFormat().format;
|
|
30
18
|
export {
|
|
31
|
-
toAxis
|
|
19
|
+
y as toAxis
|
|
32
20
|
};
|
|
33
21
|
//# sourceMappingURL=chart-axis.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"chart-axis.js","sources":["../../designsystem/chart/chart-axis.ts"],"sourcesContent":["import { tag } from \"../utils\";\nimport type { ChartData } from \"./chart-element\";\n\ntype Config = { type: string; aspect?: string };\n\nconst STEPS = [0.1, 0.2, 0.25, 0.5, 1];\n\nexport function toAxis(data: ChartData, { aspect, type }: Config) {\n\tconst totalTicks = 10;\n\tconst isStacked = type === \"stacked\";\n\tconst max = data[0].reduce((acc, _, index) => {\n\t\tconst all = data.map((row) => row[index].number);\n\t\tconst sum = all.reduce((acc, num) => acc + num, 0);\n\t\treturn Math.max(acc, ...(isStacked ? [sum] : all));\n\t}, 0);\n\n\tconst tickRange = max / totalTicks;\n\tconst tickDigits = 10 ** `${Math.round(tickRange)}`.length; // Get amount of digits in total number and use as exponent for 10x\n\tconst tickSize = tickRange / tickDigits; // Get amount of digits in total number and use as exponent for 10\n\tconst step = (STEPS.find((current) => current > tickSize) || 1) * tickDigits; // Find closest step larger than tick\n\tconst total = Math.ceil(max / step) * step;\n\tconst axis = tag(\"div\", {\n\t\t\"aria-label\": data[0][0].value || null,\n\t\tclass: \"axis\",\n\t\trole: \"figure\",\n\t\tstyle: `${aspect ? `--mtdsc-chart-aspect: ${aspect};` : \"\"} --bars: ${data[0]?.length - 1}; --groups: ${data.length - 1}; --total: ${total}`,\n\t});\n\tconst steps = axis.appendChild(tag(\"div\", { class: \"axisSteps\" }));\n\tconst groups = axis.appendChild(tag(\"div\", { class: \"axisGroups\" }));\n\n\tArray.from({ length: total / step + 1 }, (_, i) => getNum(step * i))\n\t\t.reverse()\n\t\t.map((num) =>\n\t\t\tsteps.append(tag(\"div\", { class: \"axisStep\", \"data-label\": num })),\n\t\t);\n\n\treturn { total, groups, axis };\n}\n\nconst getNum = new Intl.NumberFormat().format;\n"],"names":["acc"],"mappings":";AAKA,
|
|
1
|
+
{"version":3,"file":"chart-axis.js","sources":["../../designsystem/chart/chart-axis.ts"],"sourcesContent":["import { tag } from \"../utils\";\nimport type { ChartData } from \"./chart-element\";\n\ntype Config = { type: string; aspect?: string };\n\nconst STEPS = [0.1, 0.2, 0.25, 0.5, 1];\n\nexport function toAxis(data: ChartData, { aspect, type }: Config) {\n\tconst totalTicks = 10;\n\tconst isStacked = type === \"stacked\";\n\tconst max = data[0].reduce((acc, _, index) => {\n\t\tconst all = data.map((row) => row[index].number);\n\t\tconst sum = all.reduce((acc, num) => acc + num, 0);\n\t\treturn Math.max(acc, ...(isStacked ? [sum] : all));\n\t}, 0);\n\n\tconst tickRange = max / totalTicks;\n\tconst tickDigits = 10 ** `${Math.round(tickRange)}`.length; // Get amount of digits in total number and use as exponent for 10x\n\tconst tickSize = tickRange / tickDigits; // Get amount of digits in total number and use as exponent for 10\n\tconst step = (STEPS.find((current) => current > tickSize) || 1) * tickDigits; // Find closest step larger than tick\n\tconst total = Math.ceil(max / step) * step;\n\tconst axis = tag(\"div\", {\n\t\t\"aria-label\": data[0][0].value || null,\n\t\tclass: \"axis\",\n\t\trole: \"figure\",\n\t\tstyle: `${aspect ? `--mtdsc-chart-aspect: ${aspect};` : \"\"} --bars: ${data[0]?.length - 1}; --groups: ${data.length - 1}; --total: ${total}`,\n\t});\n\tconst steps = axis.appendChild(tag(\"div\", { class: \"axisSteps\" }));\n\tconst groups = axis.appendChild(tag(\"div\", { class: \"axisGroups\" }));\n\n\tArray.from({ length: total / step + 1 }, (_, i) => getNum(step * i))\n\t\t.reverse()\n\t\t.map((num) =>\n\t\t\tsteps.append(tag(\"div\", { class: \"axisStep\", \"data-label\": num })),\n\t\t);\n\n\treturn { total, groups, axis };\n}\n\nconst getNum = new Intl.NumberFormat().format;\n"],"names":["STEPS","toAxis","data","aspect","type","isStacked","max","acc","_","index","all","row","sum","num","tickRange","tickDigits","tickSize","step","current","total","axis","tag","steps","groups","i","getNum"],"mappings":";AAKA,MAAMA,IAAQ,CAAC,KAAK,KAAK,MAAM,KAAK,CAAC;AAE9B,SAASC,EAAOC,GAAiB,EAAE,QAAAC,GAAQ,MAAAC,KAAgB;AAEjE,QAAMC,IAAYD,MAAS,WACrBE,IAAMJ,EAAK,CAAC,EAAE,OAAO,CAACK,GAAKC,GAAGC,MAAU;AAC7C,UAAMC,IAAMR,EAAK,IAAI,CAACS,MAAQA,EAAIF,CAAK,EAAE,MAAM,GACzCG,IAAMF,EAAI,OAAO,CAACH,GAAKM,MAAQN,IAAMM,GAAK,CAAC;AACjD,WAAO,KAAK,IAAIN,GAAK,GAAIF,IAAY,CAACO,CAAG,IAAIF,CAAI;AAAA,EAClD,GAAG,CAAC,GAEEI,IAAYR,IAAM,IAClBS,IAAa,MAAM,GAAG,KAAK,MAAMD,CAAS,CAAC,GAAG,QAC9CE,IAAWF,IAAYC,GACvBE,KAAQjB,EAAM,KAAK,CAACkB,MAAYA,IAAUF,CAAQ,KAAK,KAAKD,GAC5DI,IAAQ,KAAK,KAAKb,IAAMW,CAAI,IAAIA,GAChCG,IAAOC,EAAI,OAAO;AAAA,IACvB,cAAcnB,EAAK,CAAC,EAAE,CAAC,EAAE,SAAS;AAAA,IAClC,OAAO;AAAA,IACP,MAAM;AAAA,IACN,OAAO,GAAGC,IAAS,yBAAyBA,CAAM,MAAM,EAAE,YAAYD,EAAK,CAAC,GAAG,SAAS,CAAC,eAAeA,EAAK,SAAS,CAAC,cAAciB,CAAK;AAAA,EAAA,CAC1I,GACKG,IAAQF,EAAK,YAAYC,EAAI,OAAO,EAAE,OAAO,YAAA,CAAa,CAAC,GAC3DE,IAASH,EAAK,YAAYC,EAAI,OAAO,EAAE,OAAO,aAAA,CAAc,CAAC;AAEnE,eAAM,KAAK,EAAE,QAAQF,IAAQF,IAAO,KAAK,CAACT,GAAGgB,MAAMC,EAAOR,IAAOO,CAAC,CAAC,EACjE,UACA;AAAA,IAAI,CAACX,MACLS,EAAM,OAAOD,EAAI,OAAO,EAAE,OAAO,YAAY,cAAcR,GAAK,CAAC;AAAA,EAAA,GAG5D,EAAE,OAAAM,GAAO,QAAAI,GAAQ,MAAAH,EAAA;AACzB;AAEA,MAAMK,IAAS,IAAI,KAAK,aAAA,EAAe;"}
|
package/mtds/chart/chart-bars.js
CHANGED
|
@@ -1,26 +1,24 @@
|
|
|
1
|
-
import { tag } from "../utils.js";
|
|
2
|
-
function
|
|
3
|
-
return
|
|
4
|
-
const
|
|
5
|
-
|
|
6
|
-
tag("div", { class: "axisGroupContent" })
|
|
1
|
+
import { tag as e } from "../utils.js";
|
|
2
|
+
function d(t) {
|
|
3
|
+
return t[0].slice(1).map(({ value: l, event: n }, r) => {
|
|
4
|
+
const i = e("div", { class: "axisGroup", "data-label": l }), s = i.appendChild(
|
|
5
|
+
e("div", { class: "axisGroupContent" })
|
|
7
6
|
);
|
|
8
|
-
|
|
9
|
-
({ tooltip, style, number }) =>
|
|
10
|
-
|
|
11
|
-
"aria-label":
|
|
12
|
-
"data-event":
|
|
7
|
+
return t.slice(1).map((a) => a[r + 1]).map(
|
|
8
|
+
({ tooltip: a, style: o, number: p }) => s.appendChild(
|
|
9
|
+
e("div", {
|
|
10
|
+
"aria-label": a,
|
|
11
|
+
"data-event": n,
|
|
13
12
|
class: "bar",
|
|
14
13
|
role: "img",
|
|
15
|
-
style: `${
|
|
14
|
+
style: `${o}; --value: ${p}`,
|
|
16
15
|
tabindex: "0"
|
|
17
16
|
})
|
|
18
17
|
)
|
|
19
|
-
);
|
|
20
|
-
return group;
|
|
18
|
+
), i;
|
|
21
19
|
});
|
|
22
20
|
}
|
|
23
21
|
export {
|
|
24
|
-
toBars
|
|
22
|
+
d as toBars
|
|
25
23
|
};
|
|
26
24
|
//# sourceMappingURL=chart-bars.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"chart-bars.js","sources":["../../designsystem/chart/chart-bars.ts"],"sourcesContent":["import { tag } from \"../utils\";\nimport type { ChartData } from \"./chart-element\";\n\nexport function toBars(data: ChartData) {\n\treturn data[0].slice(1).map(({ value, event }, index) => {\n\t\tconst group = tag(\"div\", { class: \"axisGroup\", \"data-label\": value });\n\t\tconst content = group.appendChild(\n\t\t\ttag(\"div\", { class: \"axisGroupContent\" }),\n\t\t);\n\n\t\tdata\n\t\t\t.slice(1)\n\t\t\t.map((values) => values[index + 1])\n\t\t\t.map(({ tooltip, style, number }) =>\n\t\t\t\tcontent.appendChild(\n\t\t\t\t\ttag(\"div\", {\n\t\t\t\t\t\t\"aria-label\": tooltip,\n\t\t\t\t\t\t\"data-event\": event,\n\t\t\t\t\t\tclass: \"bar\",\n\t\t\t\t\t\trole: \"img\",\n\t\t\t\t\t\tstyle: `${style}; --value: ${number}`,\n\t\t\t\t\t\ttabindex: \"0\",\n\t\t\t\t\t}),\n\t\t\t\t),\n\t\t\t);\n\t\treturn group;\n\t});\n}\n"],"names":[],"mappings":";AAGO,
|
|
1
|
+
{"version":3,"file":"chart-bars.js","sources":["../../designsystem/chart/chart-bars.ts"],"sourcesContent":["import { tag } from \"../utils\";\nimport type { ChartData } from \"./chart-element\";\n\nexport function toBars(data: ChartData) {\n\treturn data[0].slice(1).map(({ value, event }, index) => {\n\t\tconst group = tag(\"div\", { class: \"axisGroup\", \"data-label\": value });\n\t\tconst content = group.appendChild(\n\t\t\ttag(\"div\", { class: \"axisGroupContent\" }),\n\t\t);\n\n\t\tdata\n\t\t\t.slice(1)\n\t\t\t.map((values) => values[index + 1])\n\t\t\t.map(({ tooltip, style, number }) =>\n\t\t\t\tcontent.appendChild(\n\t\t\t\t\ttag(\"div\", {\n\t\t\t\t\t\t\"aria-label\": tooltip,\n\t\t\t\t\t\t\"data-event\": event,\n\t\t\t\t\t\tclass: \"bar\",\n\t\t\t\t\t\trole: \"img\",\n\t\t\t\t\t\tstyle: `${style}; --value: ${number}`,\n\t\t\t\t\t\ttabindex: \"0\",\n\t\t\t\t\t}),\n\t\t\t\t),\n\t\t\t);\n\t\treturn group;\n\t});\n}\n"],"names":["toBars","data","value","event","index","group","tag","content","values","tooltip","style","number"],"mappings":";AAGO,SAASA,EAAOC,GAAiB;AACvC,SAAOA,EAAK,CAAC,EAAE,MAAM,CAAC,EAAE,IAAI,CAAC,EAAE,OAAAC,GAAO,OAAAC,EAAA,GAASC,MAAU;AACxD,UAAMC,IAAQC,EAAI,OAAO,EAAE,OAAO,aAAa,cAAcJ,GAAO,GAC9DK,IAAUF,EAAM;AAAA,MACrBC,EAAI,OAAO,EAAE,OAAO,oBAAoB;AAAA,IAAA;AAGzC,WAAAL,EACE,MAAM,CAAC,EACP,IAAI,CAACO,MAAWA,EAAOJ,IAAQ,CAAC,CAAC,EACjC;AAAA,MAAI,CAAC,EAAE,SAAAK,GAAS,OAAAC,GAAO,QAAAC,EAAA,MACvBJ,EAAQ;AAAA,QACPD,EAAI,OAAO;AAAA,UACV,cAAcG;AAAA,UACd,cAAcN;AAAA,UACd,OAAO;AAAA,UACP,MAAM;AAAA,UACN,OAAO,GAAGO,CAAK,cAAcC,CAAM;AAAA,UACnC,UAAU;AAAA,QAAA,CACV;AAAA,MAAA;AAAA,IACF,GAEKN;AAAA,EACR,CAAC;AACF;"}
|
|
@@ -1,119 +1,84 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { isBrowser, tag, defineElement, MTDSElement, onResize, onMutation, on, off
|
|
3
|
-
import
|
|
4
|
-
import { toAxis } from "./chart-axis.js";
|
|
5
|
-
import { toBars } from "./chart-bars.js";
|
|
6
|
-
import { toLines } from "./chart-lines.js";
|
|
7
|
-
import { toPies } from "./chart-pies.js";
|
|
8
|
-
const
|
|
9
|
-
const TOOLTIP_ID = "mtds-chart-tooltip";
|
|
10
|
-
const TOOLTIP = isBrowser() ? document.getElementById(TOOLTIP_ID) || tag("div", {
|
|
1
|
+
import C from "../styles.module.css.js";
|
|
2
|
+
import { isBrowser as v, tag as c, defineElement as E, MTDSElement as k, onResize as T, onMutation as w, on as S, off as $, attr as d } from "../utils.js";
|
|
3
|
+
import x from "./chart.css.js";
|
|
4
|
+
import { toAxis as R } from "./chart-axis.js";
|
|
5
|
+
import { toBars as A } from "./chart-bars.js";
|
|
6
|
+
import { toLines as L } from "./chart-lines.js";
|
|
7
|
+
import { toPies as O } from "./chart-pies.js";
|
|
8
|
+
const u = "click,keydown,mousemove,mouseout", f = "mtds-chart-tooltip", a = v() ? document.getElementById(f) || c("div", {
|
|
11
9
|
"aria-hidden": "true",
|
|
12
|
-
class:
|
|
10
|
+
class: C._tooltip,
|
|
13
11
|
hidden: "",
|
|
14
|
-
id:
|
|
12
|
+
id: f
|
|
15
13
|
}) : null;
|
|
16
|
-
class
|
|
17
|
-
#
|
|
18
|
-
#
|
|
14
|
+
class P extends k {
|
|
15
|
+
#t;
|
|
16
|
+
#e;
|
|
19
17
|
static get observedAttributes() {
|
|
20
18
|
return ["data-variant", "data-aspect"];
|
|
21
19
|
}
|
|
22
20
|
constructor() {
|
|
23
|
-
super();
|
|
24
|
-
this.attachShadow({ mode: "open" });
|
|
21
|
+
super(), this.attachShadow({ mode: "open" });
|
|
25
22
|
}
|
|
26
23
|
connectedCallback() {
|
|
27
|
-
this.#
|
|
28
|
-
this.#unmutate = onMutation(() => this.attributeChangedCallback(), {
|
|
24
|
+
this.#e = T(() => this.handleResize(), this), this.#t = w(() => this.attributeChangedCallback(), {
|
|
29
25
|
attr: "data-tooltip",
|
|
30
26
|
root: this
|
|
31
|
-
});
|
|
32
|
-
this.attributeChangedCallback();
|
|
33
|
-
on(this, EVENTS, this);
|
|
27
|
+
}), this.attributeChangedCallback(), S(this, u, this);
|
|
34
28
|
}
|
|
35
29
|
disconnectedCallback() {
|
|
36
|
-
|
|
37
|
-
off(this, EVENTS, this);
|
|
38
|
-
this.#unresize?.();
|
|
39
|
-
this.#unmutate?.();
|
|
40
|
-
this.#unmutate = this.#unresize = void 0;
|
|
30
|
+
a && (a.hidden = !0), $(this, u, this), this.#e?.(), this.#t?.(), this.#t = this.#e = void 0;
|
|
41
31
|
}
|
|
42
32
|
attributeChangedCallback() {
|
|
43
|
-
Array.from(this.shadowRoot?.children || []).map((
|
|
44
|
-
const [
|
|
45
|
-
const aspect = attr(this, "data-aspect") || void 0;
|
|
46
|
-
const data = toData(this.querySelector("table"));
|
|
47
|
-
const style = tag("style", {}, css);
|
|
48
|
-
const legend = tag("div", {
|
|
33
|
+
Array.from(this.shadowRoot?.children || []).map((p) => p.remove());
|
|
34
|
+
const [t, e] = (d(this, "data-variant") || "column").split("-"), i = d(this, "data-aspect") || void 0, s = q(this.querySelector("table")), n = c("style", {}, x), r = c("div", {
|
|
49
35
|
"aria-hidden": "hidden",
|
|
50
36
|
class: "legends",
|
|
51
37
|
role: "group"
|
|
52
38
|
});
|
|
53
|
-
|
|
54
|
-
|
|
39
|
+
s.slice(1).forEach(([{ value: p, style: g }]) => {
|
|
40
|
+
r.appendChild(c("div", { class: "legend", style: g }, p));
|
|
55
41
|
});
|
|
56
|
-
const { axis, groups, total } =
|
|
57
|
-
|
|
58
|
-
groups.append(...toBars(data));
|
|
59
|
-
if (variant === "line" || variant === "area")
|
|
60
|
-
groups.append(toLines(data, { total, variant, type }));
|
|
61
|
-
if (variant === "doughnut" || variant === "pie")
|
|
62
|
-
this.shadowRoot?.append(toPies(data, { aspect, variant }));
|
|
63
|
-
this.shadowRoot?.append(axis, legend, style);
|
|
42
|
+
const { axis: h, groups: m, total: y } = R(s, { aspect: i, type: e });
|
|
43
|
+
(t === "column" || t === "bar") && m.append(...A(s)), (t === "line" || t === "area") && m.append(L(s, { total: y, variant: t, type: e })), (t === "doughnut" || t === "pie") && this.shadowRoot?.append(O(s, { aspect: i, variant: t })), this.shadowRoot?.append(h, r, n);
|
|
64
44
|
}
|
|
65
|
-
handleEvent(
|
|
66
|
-
|
|
67
|
-
else onMoveTooltip(e);
|
|
45
|
+
handleEvent(t) {
|
|
46
|
+
t.type === "click" || t.type === "keydown" ? H(t, this) : M(t);
|
|
68
47
|
}
|
|
69
48
|
handleResize() {
|
|
70
|
-
const
|
|
71
|
-
|
|
72
|
-
axis?.classList.toggle("axisStepsYHalf", (steps?.offsetHeight || 0) < 400);
|
|
73
|
-
axis?.classList.toggle("axisStepsXHalf", (steps?.offsetWidth || 0) < 500);
|
|
49
|
+
const t = this.shadowRoot?.firstElementChild, e = t?.firstElementChild;
|
|
50
|
+
t?.classList.toggle("axisStepsYHalf", (e?.offsetHeight || 0) < 400), t?.classList.toggle("axisStepsXHalf", (e?.offsetWidth || 0) < 500);
|
|
74
51
|
}
|
|
75
52
|
}
|
|
76
|
-
function
|
|
77
|
-
if (
|
|
78
|
-
const
|
|
79
|
-
|
|
80
|
-
const [tr, td] = el instanceof Element && attr(el, "data-event")?.split("-").map(Number) || [];
|
|
81
|
-
table?.rows[tr]?.cells[td]?.querySelector("a,button")?.click?.();
|
|
53
|
+
function H(o, t) {
|
|
54
|
+
if (o instanceof KeyboardEvent && o.key !== "Enter") return;
|
|
55
|
+
const e = o.composedPath()[0], i = t.querySelector("table"), [s, n] = e instanceof Element && d(e, "data-event")?.split("-").map(Number) || [];
|
|
56
|
+
i?.rows[s]?.cells[n]?.querySelector("a,button")?.click?.();
|
|
82
57
|
}
|
|
83
|
-
let
|
|
84
|
-
function
|
|
85
|
-
if (!
|
|
86
|
-
|
|
87
|
-
const
|
|
88
|
-
|
|
89
|
-
if (tip)
|
|
90
|
-
TOOLTIP.style.transform = `translate(${Math.min(event.clientX, window.innerWidth - TOOLTIP.clientWidth - 10)}px, ${event.clientY}px)`;
|
|
91
|
-
if (tip !== TOOLTIP_TEXT) {
|
|
92
|
-
if (tip) TOOLTIP.textContent = tip;
|
|
93
|
-
TOOLTIP_TEXT = tip;
|
|
94
|
-
TOOLTIP.hidden = !tip;
|
|
95
|
-
}
|
|
58
|
+
let b = "";
|
|
59
|
+
function M(o) {
|
|
60
|
+
if (!a) return;
|
|
61
|
+
a?.isConnected || document.body.append(a);
|
|
62
|
+
const t = o.composedPath()[0], e = t instanceof Element && t.getAttribute("aria-label") || "";
|
|
63
|
+
e && (a.style.transform = `translate(${Math.min(o.clientX, window.innerWidth - a.clientWidth - 10)}px, ${o.clientY}px)`), e !== b && (e && (a.textContent = e), b = e, a.hidden = !e);
|
|
96
64
|
}
|
|
97
|
-
const
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
const rowHeading = text(row.cells[0]);
|
|
102
|
-
const colHeading = text(table?.rows[0].cells[cellIndex]);
|
|
103
|
-
const tooltip = `${rowHeading}: ${text(cell)}${colHeading ? ` (${colHeading})` : ""}`;
|
|
65
|
+
const l = (o) => o?.textContent?.trim() || "", q = (o) => Array.from(
|
|
66
|
+
o?.rows || [],
|
|
67
|
+
(t, e) => Array.from(t.cells, (i, s) => {
|
|
68
|
+
const n = l(t.cells[0]), r = l(o?.rows[0].cells[s]), h = `${n}: ${l(i)}${r ? ` (${r})` : ""}`;
|
|
104
69
|
return {
|
|
105
|
-
number:
|
|
70
|
+
number: s && e && Number.parseFloat(l(i)) || 0,
|
|
106
71
|
// First row and column is not a number
|
|
107
|
-
event:
|
|
72
|
+
event: i.querySelector("a,button") && `${e}-${s}`,
|
|
108
73
|
// Reference to proxy events
|
|
109
|
-
style: `--color: var(--mtdsc-chart-color-${
|
|
110
|
-
value:
|
|
111
|
-
tooltip:
|
|
74
|
+
style: `--color: var(--mtdsc-chart-color-${e}, var(--mtdsc-chart-color-base))`,
|
|
75
|
+
value: l(i),
|
|
76
|
+
tooltip: d(i, "data-tooltip") || h
|
|
112
77
|
};
|
|
113
78
|
})
|
|
114
79
|
);
|
|
115
|
-
|
|
80
|
+
E("mtds-chart", P);
|
|
116
81
|
export {
|
|
117
|
-
MTDSChartElement
|
|
82
|
+
P as MTDSChartElement
|
|
118
83
|
};
|
|
119
84
|
//# sourceMappingURL=chart-element.js.map
|