@altinn/altinn-components 0.6.1 → 0.6.3

package/dist/components/Toolbar/ToolbarDate.stories.js

@@ -0,0 +1,57 @@
+import { ToolbarFilter as e } from "./ToolbarFilter.js";
+const t = {
+  title: "Toolbar/ToolbarDate",
+  component: e,
+  tags: ["autodocs"],
+  parameters: {},
+  args: {
+    label: "Velg dato",
+    value: "today",
+    optionType: "radio",
+    options: [
+      {
+        groupId: "a",
+        name: "date",
+        label: "I dag",
+        value: "today"
+      },
+      {
+        groupId: "a",
+        name: "date",
+        label: "Denne uken",
+        value: "this-week"
+      },
+      {
+        groupId: "a",
+        name: "date",
+        label: "Denne måneden",
+        value: "this-week"
+      },
+      {
+        groupId: "b",
+        name: "date",
+        label: "Siste 6 måneder",
+        value: "last-6-months"
+      },
+      {
+        groupId: "b",
+        label: "Siste 12 måneder",
+        value: "last-year"
+      },
+      {
+        groupId: "c",
+        label: "Spesifiser dato ...",
+        value: "other"
+      }
+    ]
+  }
+}, o = {}, l = {
+  args: {
+    expanded: !0
+  }
+};
+export {
+  o as Default,
+  l as Expanded,
+  t as default
+};

package/dist/components/Toolbar/ToolbarDaterange.js

@@ -0,0 +1,49 @@
+import { jsxs as i, jsx as o } from "react/jsx-runtime";
+import { useState as m } from "react";
+import "../../index-L8X2o7IH.js";
+import "../Icon/SvgIcon.js";
+import "../RootProvider/RootProvider.js";
+import { MenuInputField as p } from "../Menu/MenuInputField.js";
+import { MenuBase as v } from "../Menu/MenuBase.js";
+import { DrawerOrDropdown as C } from "../Dropdown/DrawerOrDropdown.js";
+import { ToolbarButton as F } from "./ToolbarButton.js";
+import { ToolbarFilterBase as T } from "./ToolbarFilterBase.js";
+import { Datepicker as S } from "../Datepicker/Datepicker.js";
+import '../../assets/ToolbarDaterange.css';const y = "_datepicker_mqb1p_1", q = "_fields_mqb1p_6", w = "_description_mqb1p_10", c = {
+  datepicker: y,
+  fields: q,
+  description: w
+}, H = ({
+  title: d = "Select daterange",
+  description: f = "Choose dates or click to set daterange.",
+  fromLabel: h = "From date",
+  toLabel: D = "To date",
+  label: u = "Select daterange",
+  value: _,
+  expanded: n = !1,
+  onToggle: l
+}) => {
+  const [t, r] = m(""), [s, a] = m(""), b = (e) => {
+    r(e.target.value);
+  }, g = (e) => {
+    a(e.target.value);
+  }, k = (e) => {
+    s ? (r(e), a("")) : t && e < t ? (a(t), r(e)) : t ? a(e) : r(e);
+  };
+  return /* @__PURE__ */ i(T, { expanded: n, children: [
+    /* @__PURE__ */ o(F, { type: "switch", onToggle: l, active: !!_, children: u }),
+    /* @__PURE__ */ o(C, { expanded: n, title: d, onClose: l, children: /* @__PURE__ */ i(v, { children: [
+      /* @__PURE__ */ i("div", { className: c.fields, children: [
+        /* @__PURE__ */ o(p, { value: t, type: "date", label: h, onChange: b }),
+        /* @__PURE__ */ o(p, { value: s, type: "date", label: D, onChange: g })
+      ] }),
+      /* @__PURE__ */ i("section", { className: c.datepicker, children: [
+        /* @__PURE__ */ o(S, { onSelect: k, selectFrom: t, selectTo: s }),
+        /* @__PURE__ */ o("p", { className: c.description, children: f })
+      ] })
+    ] }) })
+  ] });
+};
+export {
+  H as ToolbarDaterange
+};

package/dist/components/Toolbar/ToolbarDaterange.stories.js

@@ -0,0 +1,19 @@
+import { ToolbarDaterange as a } from "./ToolbarDaterange.js";
+const t = {
+  title: "Toolbar/ToolbarDaterange",
+  component: a,
+  tags: ["autodocs"],
+  parameters: {},
+  args: {
+    label: "Velg dato"
+  }
+}, o = {}, r = {
+  args: {
+    expanded: !0
+  }
+};
+export {
+  o as Default,
+  r as Expanded,
+  t as default
+};

package/dist/components/Toolbar/ToolbarFilter.js

@@ -0,0 +1,65 @@
+import { jsxs as b, jsx as f } from "react/jsx-runtime";
+import "../../index-L8X2o7IH.js";
+import "../Icon/SvgIcon.js";
+import "react";
+import "../RootProvider/RootProvider.js";
+import { DrawerOrDropdown as j } from "../Dropdown/DrawerOrDropdown.js";
+import { ToolbarButton as O } from "./ToolbarButton.js";
+import { ToolbarFilterBase as k } from "./ToolbarFilterBase.js";
+import { ToolbarOptions as u } from "./ToolbarOptions.js";
+const w = (t, o) => Array.isArray(o) ? o.join(", ") : o, _ = ({
+  expanded: t = !1,
+  removable: o,
+  label: m,
+  name: i,
+  value: r,
+  options: c,
+  optionGroups: y,
+  onToggle: s,
+  onChange: A,
+  onRemove: a,
+  getSelectedLabel: n,
+  optionType: h
+}) => {
+  const l = (c ?? []).map(
+    (p) => ({
+      ...p,
+      name: i,
+      checked: Array.isArray(r) ? r.includes(p.value) : p.value === r
+    })
+  ), d = (n == null ? void 0 : n(i, r)) ?? w(i, r);
+  return /* @__PURE__ */ b(k, { expanded: t, children: [
+    /* @__PURE__ */ f(
+      O,
+      {
+        type: "select",
+        removable: o,
+        active: Array.isArray(r) ? r.length > 0 : typeof r < "u",
+        onToggle: s,
+        onRemove: a,
+        children: d || m
+      }
+    ),
+    /* @__PURE__ */ f(
+      j,
+      {
+        expanded: t,
+        title: m,
+        onClose: s,
+        button: { onClick: s, label: "Vis X treff" },
+        children: /* @__PURE__ */ f(
+          u,
+          {
+            options: l,
+            optionGroups: y,
+            onChange: A,
+            optionType: h
+          }
+        )
+      }
+    )
+  ] });
+};
+export {
+  _ as ToolbarFilter
+};

package/dist/components/Toolbar/ToolbarFilter.stories.js

@@ -0,0 +1,57 @@
+import { ToolbarFilter as e } from "./ToolbarFilter.js";
+const l = {
+  title: "Toolbar/ToolbarFilter",
+  component: e,
+  tags: ["autodocs"],
+  parameters: {},
+  args: {
+    label: "Velg avsender",
+    options: [
+      {
+        label: "Skatteetaten",
+        value: "skatt"
+      },
+      {
+        label: "Digdir",
+        value: "digdir"
+      },
+      {
+        label: "Helstilsynet",
+        value: "helse"
+      }
+    ]
+  }
+}, a = {
+  args: {
+    optionType: "radio"
+  }
+}, o = {
+  args: {
+    ...a.args,
+    expanded: !0
+  }
+}, r = {
+  args: {
+    optionType: "radio",
+    value: "helse"
+  }
+}, s = {
+  args: {
+    optionType: "checkbox",
+    value: ["skatt", "digdir"]
+  }
+}, i = {
+  args: {
+    optionType: "checkbox",
+    value: ["skatt", "digdir"],
+    expanded: !0
+  }
+};
+export {
+  s as Multiple,
+  i as MultipleExpanded,
+  a as Single,
+  o as SingleExpanded,
+  r as SingleValue,
+  l as default
+};

package/dist/components/Toolbar/ToolbarFilterBase.js

@@ -0,0 +1,7 @@
+import { jsx as a } from "react/jsx-runtime";
+import '../../assets/ToolbarFilterBase.css';const o = "_base_l7znv_1", r = {
+  base: o
+}, l = ({ expanded: s = !1, children: e }) => /* @__PURE__ */ a("div", { className: r.base, "aria-expanded": s, children: e });
+export {
+  l as ToolbarFilterBase
+};

package/dist/components/Toolbar/ToolbarMenu.js

@@ -0,0 +1,16 @@
+import { jsxs as n, jsx as o } from "react/jsx-runtime";
+import "../../index-L8X2o7IH.js";
+import "../Icon/SvgIcon.js";
+import "react";
+import "../RootProvider/RootProvider.js";
+import { Menu as s } from "../Menu/Menu.js";
+import { DrawerOrDropdown as a } from "../Dropdown/DrawerOrDropdown.js";
+import { ToolbarButton as f } from "./ToolbarButton.js";
+import { ToolbarFilterBase as c } from "./ToolbarFilterBase.js";
+const D = ({ expanded: r = !1, onToggle: t, label: e, value: i, groups: m, search: l, items: p }) => /* @__PURE__ */ n(c, { expanded: r, children: [
+  /* @__PURE__ */ o(f, { type: "switch", onToggle: t, active: !!i, children: e }),
+  /* @__PURE__ */ o(a, { expanded: r, title: "Endre konto", onClose: t, children: /* @__PURE__ */ o(s, { theme: "global", defaultItemColor: "subtle", groups: m, search: l, items: p }) })
+] });
+export {
+  D as ToolbarMenu
+};

package/dist/components/Toolbar/ToolbarMenu.stories.js

@@ -0,0 +1,31 @@
+import { ToolbarMenu as t } from "./ToolbarMenu.js";
+const a = {
+  title: "Toolbar/ToolbarMenu",
+  component: t,
+  tags: ["autodocs"],
+  parameters: {},
+  args: {
+    label: "Skattetetaten",
+    value: "skatt",
+    items: [
+      {
+        title: "Skatteetaten"
+      },
+      {
+        title: "Digdir"
+      },
+      {
+        title: "Helstilsynet"
+      }
+    ]
+  }
+}, o = {}, l = {
+  args: {
+    expanded: !0
+  }
+};
+export {
+  o as Default,
+  l as Expanded,
+  a as default
+};

package/dist/components/Toolbar/ToolbarOptions.js

@@ -0,0 +1,47 @@
+import { jsxs as c, jsx as r } from "react/jsx-runtime";
+import { Fragment as M } from "react";
+import "../../index-L8X2o7IH.js";
+import "../Icon/SvgIcon.js";
+import { MenuOption as v } from "../Menu/MenuOption.js";
+import { MenuSearch as j } from "../Menu/MenuSearch.js";
+import { MenuHeader as x } from "../Menu/MenuHeader.js";
+import "../RootProvider/RootProvider.js";
+import { MenuBase as O, MenuList as I, MenuListItem as m } from "../Menu/MenuBase.js";
+const q = ({ search: d, optionGroups: o = {}, options: h, onChange: b, optionType: g }) => {
+  var p;
+  const a = h.reduce(
+    (e, l) => {
+      const n = l.groupId || "";
+      return e[n] = e[n] || [], e[n].push(l), e;
+    },
+    {}
+  );
+  return /* @__PURE__ */ c(O, { theme: "global", children: [
+    d && /* @__PURE__ */ r(j, { ...d }),
+    /* @__PURE__ */ r(I, { children: (p = Object.keys(a)) == null ? void 0 : p.map((e, l) => {
+      var i;
+      const n = o[e] || {}, { title: u, divider: f = !0 } = n;
+      return /* @__PURE__ */ c(M, { children: [
+        l && f ? /* @__PURE__ */ r(m, { role: "separator" }) : "",
+        u && /* @__PURE__ */ r(m, { children: /* @__PURE__ */ r(x, { title: u }) }),
+        (i = a[e]) == null ? void 0 : i.map((t) => {
+          var s;
+          return /* @__PURE__ */ r(m, { children: /* @__PURE__ */ r(
+            v,
+            {
+              onChange: b,
+              label: t.label,
+              badge: t.badge,
+              type: t.type || ((s = o == null ? void 0 : o[e]) == null ? void 0 : s.optionType) || g,
+              value: t.value,
+              checked: t.checked
+            }
+          ) }, t.value);
+        })
+      ] }, e);
+    }) })
+  ] });
+};
+export {
+  q as ToolbarOptions
+};

package/dist/components/Toolbar/ToolbarOptions.stories.js

@@ -0,0 +1,103 @@
+import { ToolbarOptions as e } from "./ToolbarOptions.js";
+const o = {
+  title: "Toolbar/ToolbarOptions",
+  component: e,
+  tags: ["autodocs"],
+  parameters: {},
+  args: {}
+}, t = {
+  args: {
+    optionType: "checkbox",
+    options: [
+      {
+        type: "checkbox",
+        label: "Skatteetaten",
+        value: "1"
+      },
+      {
+        type: "checkbox",
+        label: "Digdir",
+        value: "2"
+      },
+      {
+        type: "checkbox",
+        checked: !0,
+        label: "Helstilsynet",
+        value: "3"
+      }
+    ]
+  }
+}, l = {
+  args: {
+    optionType: "radio",
+    options: [
+      {
+        type: "radio",
+        label: "Skatteetaten",
+        value: "1"
+      },
+      {
+        type: "radio",
+        label: "Digdir",
+        value: "2"
+      },
+      {
+        type: "radio",
+        checked: !0,
+        label: "Helstilsynet",
+        value: "3"
+      }
+    ]
+  }
+}, r = {
+  args: {
+    optionGroups: {
+      a: {
+        title: "Velg skadedyr",
+        optionType: "radio"
+      },
+      b: {
+        title: "Velg straff",
+        optionType: "checkbox"
+      }
+    },
+    options: [
+      {
+        groupId: "a",
+        name: "animal",
+        label: "Katt",
+        value: "cat",
+        checked: !0
+      },
+      {
+        groupId: "a",
+        name: "animal",
+        label: "Mus",
+        value: "mouse"
+      },
+      {
+        groupId: "a",
+        name: "animal",
+        label: "Veggdyr",
+        value: "spider"
+      },
+      {
+        groupId: "b",
+        label: "Husarrest",
+        value: "digdir"
+      },
+      {
+        groupId: "b",
+        checked: !0,
+        label: "Piskeslag",
+        value: "helse"
+      }
+    ]
+  }
+};
+export {
+  t as Checkboxes,
+  l as Radio,
+  r as RadioCheckbox,
+  o as default
+};

package/dist/components/Toolbar/ToolbarSearch.js

@@ -0,0 +1,20 @@
+import { jsx as t } from "react/jsx-runtime";
+import '../../assets/ToolbarSearch.css';const i = "_input_cwjz7_1", _ = "_button_cwjz7_11", l = "_close_cwjz7_16", r = "_icon_cwjz7_20", c = {
+  input: i,
+  button: _,
+  close: l,
+  icon: r
+}, p = ({ value: o, name: n, placeholder: s = "Søk", onChange: e }) => /* @__PURE__ */ t("div", { className: c.field, children: /* @__PURE__ */ t(
+  "input",
+  {
+    type: "search",
+    value: o,
+    name: n,
+    placeholder: s,
+    className: c.input,
+    onChange: e
+  }
+) });
+export {
+  p as ToolbarSearch
+};

package/dist/components/Toolbar/ToolbarSearch.stories.js

@@ -0,0 +1,14 @@
+import { ToolbarSearch as a } from "./ToolbarSearch.js";
+const t = {
+  title: "Toolbar/ToolbarSearch",
+  component: a,
+  tags: ["autodocs"],
+  parameters: {},
+  args: {}
+}, r = {
+  args: {}
+};
+export {
+  r as Default,
+  t as default
+};

package/dist/components/Toolbar/index.js

@@ -0,0 +1,8 @@
+import { ToolbarBase as t } from "./ToolbarBase.js";
+import { ToolbarButton as e } from "./ToolbarButton.js";
+import { Toolbar as f } from "./Toolbar.js";
+export {
+  f as Toolbar,
+  t as ToolbarBase,
+  e as ToolbarButton
+};

package/dist/components/Typography/Heading.js

@@ -0,0 +1,8 @@
+import { jsx as t } from "react/jsx-runtime";
+import { c as o } from "../../index-L8X2o7IH.js";
+import '../../assets/Heading.css';const i = "_heading_1kfgw_1", c = {
+  heading: i
+}, m = ({ as: s = "h2", size: a = "md", className: e, children: n }) => /* @__PURE__ */ t(s, { className: o(c.heading, e), "data-size": a, children: n });
+export {
+  m as Heading
+};

package/dist/components/Typography/Typography.js

@@ -0,0 +1,9 @@
+import { jsx as a } from "react/jsx-runtime";
+import { c as e } from "../../index-L8X2o7IH.js";
+import '../../assets/Typography.css';const m = "_typography_rbtyp_1", s = "_item_rbtyp_7", n = {
+  typography: m,
+  item: s
+}, _ = ({ as: t = "div", size: o = "md", theme: p, className: r, children: y }) => /* @__PURE__ */ a(t, { className: e(n.typography, r), "data-size": o, "data-theme": p, children: y });
+export {
+  _ as Typography
+};

package/dist/components/Typography/index.js

@@ -0,0 +1,6 @@
+import { Typography as p } from "./Typography.js";
+import { Heading as a } from "./Heading.js";
+export {
+  a as Heading,
+  p as Typography
+};