@altinn/altinn-components 0.31.0 → 0.33.0

package/dist/assets/Modal.css

@@ -0,0 +1 @@
+._dismiss_ps82p_1{position:absolute;top:0;right:0;margin:1rem}

package/dist/assets/ModalBase.css

@@ -0,0 +1 @@
+._modal_zkvhc_1{padding:0;width:100%;max-width:450px;border:none;background-color:#fff;border-radius:.5rem;box-shadow:var(--ds-shadow-xs)}._modal_zkvhc_1[data-backdrop-color=inherit]::backdrop{background-color:#111d4640}._modal_zkvhc_1[data-backdrop-color=transparent]::backdrop{background-color:transparent}._modal_zkvhc_1[data-variant=full]{width:100%;max-width:none;height:100%;min-height:unset}._modal_zkvhc_1[data-variant=content]{max-width:1056px;margin:auto}._content_zkvhc_30{position:relative}

package/dist/assets/ModalBody.css

@@ -0,0 +1 @@
+._body_1cilr_1{position:relative}

package/dist/assets/ModalHeader.css

@@ -0,0 +1 @@
+._header_7ty99_1{border-bottom:1px solid;border-color:var(--ds-color-border-subtle)}._sticky_7ty99_6{background-color:var(--ds-color-background-default);position:sticky;z-index:2;top:0}

package/dist/components/Account/AccountNotificationSettings.js

@@ -0,0 +1,26 @@
+import { jsxs as c, jsx as t } from "react/jsx-runtime";
+import "../../index-L8X2o7IH.js";
+import "react";
+import "../RootProvider/RootProvider.js";
+import "../Searchbar/AutocompleteBase.js";
+import "../Snackbar/useSnackbar.js";
+import { Fieldset as d } from "../Forms/Fieldset.js";
+import { Switch as r } from "../Forms/Switch.js";
+import { TextField as i } from "../Forms/TextField.js";
+const j = ({
+  phone: m,
+  phoneLabel: p = "Varsle på SMS",
+  email: s,
+  emailLabel: a = "Varsle på e-post",
+  smsAlerts: o = !1,
+  emailAlerts: l = !1,
+  onChange: e
+}) => /* @__PURE__ */ c(d, { size: "sm", children: [
+  /* @__PURE__ */ t(r, { label: p, name: "smsAlerts", value: "SMS", checked: !!o, onChange: e }),
+  o && /* @__PURE__ */ t(i, { name: "phone", placeholder: "Mobiltelefon", value: m, onChange: e }),
+  /* @__PURE__ */ t(r, { label: a, name: "emailAlerts", value: "E-post", checked: !!l, onChange: e }),
+  l && /* @__PURE__ */ t(i, { name: "email", placeholder: "E-postadresse", value: s, onChange: e })
+] });
+export {
+  j as AccountNotificationSettings
+};

package/dist/components/Account/index.js

@@ -1,8 +1,10 @@
 import { AccountMenu as c } from "./AccountMenu.js";
 import { AccountListItem as e } from "./AccountListItem.js";
-import { AccountList as n } from "./AccountList.js";
+import { AccountList as i } from "./AccountList.js";
+import { AccountNotificationSettings as m } from "./AccountNotificationSettings.js";
 export {
-  n as AccountList,
+  i as AccountList,
   e as AccountListItem,
-  c as AccountMenu
+  c as AccountMenu,
+  m as AccountNotificationSettings
 };

package/dist/components/ActivityLog/ActivityLog.js

@@ -1,14 +1,30 @@
-import { jsx as t } from "react/jsx-runtime";
-import { createElement as i } from "react";
+"use client";
+import { jsxs as f, jsx as e } from "react/jsx-runtime";
+import { useState as m, createElement as u } from "react";
 import "../../index-L8X2o7IH.js";
+import { Button as h } from "../Button/Button.js";
 import "../RootProvider/RootProvider.js";
-import { Timeline as m } from "../Timeline/Timeline.js";
+import { Timeline as y } from "../Timeline/Timeline.js";
 import "../Searchbar/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
-import { ActivityLogItem as p } from "./ActivityLogItem.js";
-function d({ items: r }) {
-  return /* @__PURE__ */ t(m, { children: r == null ? void 0 : r.map((o) => /* @__PURE__ */ i(p, { ...o, key: o.id })) });
-}
+import { Section as v } from "../Page/Section.js";
+import { ActivityLogSegment as x } from "./ActivityLogSegment.js";
+const q = ({
+  items: o,
+  maxItems: t,
+  expandLabel: i = "Expand history",
+  collapseLabel: l = "Collapse history"
+}) => {
+  if (!(o != null && o.length))
+    return null;
+  const [n, p] = m(!1), c = () => {
+    p((r) => !r);
+  }, d = t ? o.slice(0, t) : o, s = n ? o : d, a = t && o.length > t;
+  return /* @__PURE__ */ f(v, { spacing: 4, children: [
+    /* @__PURE__ */ e(y, { children: s.map((r, g) => /* @__PURE__ */ u(x, { ...r, key: g })) }),
+    a && /* @__PURE__ */ e(h, { variant: "outline", onClick: c, children: n ? l : i })
+  ] });
+};
 export {
-  d as ActivityLog
+  q as ActivityLog
 };

package/dist/components/ActivityLog/ActivityLogItem.js

@@ -1,13 +1,12 @@
-import { jsx as i } from "react/jsx-runtime";
+import { jsx as r } from "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
 import "react";
 import "../RootProvider/RootProvider.js";
-import { TimelineSegment as o } from "../Timeline/TimelineSegment.js";
-import { TimelineActivity as p } from "../Timeline/TimelineActivity.js";
 import { Typography as e } from "../Typography/Typography.js";
 import "../Searchbar/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
-const s = ({ byline: r, datetime: t, children: m }) => /* @__PURE__ */ i(o, { children: /* @__PURE__ */ i(p, { byline: r, datetime: t, children: /* @__PURE__ */ i(e, { children: m }) }) });
+import { TimelineActivity as p } from "../Timeline/TimelineActivity.js";
+const A = ({ byline: t, datetime: i, children: o, summary: c, ...m }) => o ? /* @__PURE__ */ r(p, { byline: t, datetime: i, ...m, children: o }) : /* @__PURE__ */ r(p, { byline: t, datetime: i, ...m, children: /* @__PURE__ */ r(e, { children: c }) });
 export {
-  s as ActivityLogItem
+  A as ActivityLogItem
 };

package/dist/components/ActivityLog/ActivityLogSegment.js

@@ -0,0 +1,17 @@
+import { jsxs as n, jsx as c } from "react/jsx-runtime";
+import { createElement as g } from "react";
+import "../../index-L8X2o7IH.js";
+import "../RootProvider/RootProvider.js";
+import { TimelineSegment as f } from "../Timeline/TimelineSegment.js";
+import { Typography as l } from "../Typography/Typography.js";
+import "../Searchbar/AutocompleteBase.js";
+import "../Snackbar/useSnackbar.js";
+import { ActivityLogItem as y } from "./ActivityLogItem.js";
+const T = ({ id: i, items: r, datetime: p, byline: m, children: e, summary: o }) => /* @__PURE__ */ n(f, { datetime: p, byline: m, spacing: 2, id: i, children: [
+  o && /* @__PURE__ */ c(l, { children: o }),
+  e,
+  r == null ? void 0 : r.map((t) => /* @__PURE__ */ g(y, { ...t, key: t.id }))
+] });
+export {
+  T as ActivityLogSegment
+};

package/dist/components/ActivityLog/index.js

@@ -1,6 +1,8 @@
-import { ActivityLog as i } from "./ActivityLog.js";
-import { ActivityLogItem as e } from "./ActivityLogItem.js";
+import { ActivityLog as e } from "./ActivityLog.js";
+import { ActivityLogSegment as r } from "./ActivityLogSegment.js";
+import { ActivityLogItem as g } from "./ActivityLogItem.js";
 export {
-  i as ActivityLog,
-  e as ActivityLogItem
+  e as ActivityLog,
+  g as ActivityLogItem,
+  r as ActivityLogSegment
 };

package/dist/components/Button/ButtonGroup.js

@@ -0,0 +1,11 @@
+import { jsx as m } from "react/jsx-runtime";
+import "../../index-L8X2o7IH.js";
+import "react";
+import "../RootProvider/RootProvider.js";
+import "../Searchbar/AutocompleteBase.js";
+import "../Snackbar/useSnackbar.js";
+import { Flex as i } from "../Page/Flex.js";
+const a = ({ color: o, size: r, children: t, ...p }) => /* @__PURE__ */ m(i, { spacing: 3, color: o, size: r, ...p, children: t });
+export {
+  a as ButtonGroup
+};

package/dist/components/Button/index.js

@@ -1,13 +1,15 @@
 import { ButtonBase as r } from "./ButtonBase.js";
 import { ButtonLabel as n } from "./ButtonLabel.js";
-import { ButtonIcon as B } from "./ButtonIcon.js";
-import { Button as p } from "./Button.js";
+import { ButtonIcon as p } from "./ButtonIcon.js";
+import { Button as B } from "./Button.js";
 import { ComboButton as x } from "./ComboButton.js";
 import { IconButton as b } from "./IconButton.js";
+import { ButtonGroup as I } from "./ButtonGroup.js";
 export {
-  p as Button,
+  B as Button,
   r as ButtonBase,
-  B as ButtonIcon,
+  I as ButtonGroup,
+  p as ButtonIcon,
   n as ButtonLabel,
   x as ComboButton,
   b as IconButton

package/dist/components/Dialog/Dialog.js

@@ -1,19 +1,41 @@
-import { jsxs as D, jsx as o } from "react/jsx-runtime";
+import { jsxs as r, jsx as o, Fragment as f } from "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
 import "react";
 import "../RootProvider/RootProvider.js";
-import { DialogLayout as g } from "./DialogLayout.js";
-import { DialogHeader as s } from "./DialogHeader.js";
-import { DialogBody as e } from "./DialogBody.js";
-import { DialogTabs as x } from "./DialogTabs.js";
+import { DialogLayout as x } from "./DialogLayout.js";
+import { DialogHeader as d } from "./DialogHeader.js";
+import { DialogBody as j } from "./DialogBody.js";
+import { DialogSection as u } from "./DialogSection.js";
+import { DialogContact as y } from "./DialogContact.js";
+import { DialogHistory as H } from "./DialogHistory.js";
+import { Divider as g } from "../Divider/Divider.js";
 import "../Searchbar/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
-const h = ({ loading: r, backButton: p, contextMenu: a, pageMenu: f, header: i, body: m, tabs: t, children: l }) => /* @__PURE__ */ D(g, { backButton: p, contextMenu: a, pageMenu: f, children: [
-  i && /* @__PURE__ */ o(s, { loading: r, ...i }),
-  m && /* @__PURE__ */ o(e, { loading: r, ...m }),
-  t && /* @__PURE__ */ o(x, { ...t }),
-  l
+const E = ({
+  loading: m,
+  backButton: l,
+  contextMenu: c,
+  pageMenu: n,
+  sender: s,
+  title: i,
+  history: t,
+  additionalInfo: p,
+  contact: e,
+  children: D,
+  ...a
+}) => /* @__PURE__ */ r(x, { backButton: l, contextMenu: c, pageMenu: n, children: [
+  i && /* @__PURE__ */ o(d, { loading: m, ...a, title: i }),
+  D && /* @__PURE__ */ o(j, { loading: m, sender: s, ...a, children: D }),
+  t && /* @__PURE__ */ o(H, { ...t }),
+  p && /* @__PURE__ */ r(f, { children: [
+    /* @__PURE__ */ o(g, {}),
+    /* @__PURE__ */ o(u, { ...p })
+  ] }),
+  e && /* @__PURE__ */ r(f, { children: [
+    /* @__PURE__ */ o(g, {}),
+    /* @__PURE__ */ o(y, { ...e })
+  ] })
 ] });
 export {
-  h as Dialog
+  E as Dialog
 };

package/dist/components/Dialog/DialogActivityLog.js

@@ -1,11 +1,17 @@
-import "react/jsx-runtime";
+import { jsxs as p, jsx as o } from "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
 import "react";
 import "../RootProvider/RootProvider.js";
-import { D as c } from "../../DialogActivityLog-BoPREh7Y.js";
 import "../Searchbar/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
-import "../Metadata/MetaItem.js";
+import { ActivityLog as a } from "../ActivityLog/ActivityLog.js";
+import { ModalBase as d } from "../Modal/ModalBase.js";
+import { ModalHeader as e } from "../Modal/ModalHeader.js";
+import { ModalBody as c } from "../Modal/ModalBody.js";
+const j = ({ title: t, items: i, open: m, onClose: r }) => /* @__PURE__ */ p(d, { open: m, onClose: r, variant: "content", children: [
+  /* @__PURE__ */ o(e, { title: t, onClose: r }),
+  /* @__PURE__ */ o(c, { children: /* @__PURE__ */ o(a, { items: i }) })
+] });
 export {
-  c as DialogActivityLog
+  j as DialogActivityLog
 };

package/dist/components/Dialog/DialogBody.js

@@ -1,43 +1,24 @@
-import { jsxs as i, jsx as r, Fragment as h } from "react/jsx-runtime";
+import { jsxs as t, jsx as r, Fragment as a } from "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
 import "react";
 import "../RootProvider/RootProvider.js";
 import { Timeline as c } from "../Timeline/Timeline.js";
-import { TimelineSection as d } from "../Timeline/TimelineSection.js";
+import { TimelineSection as n } from "../Timeline/TimelineSection.js";
 import { TimelineHeader as f } from "../Timeline/TimelineHeader.js";
-import { Typography as s } from "../Typography/Typography.js";
-import { SeenByLog as y } from "./SeenByLog.js";
+import { Typography as T } from "../Typography/Typography.js";
+import { SeenByLog as e } from "./SeenByLog.js";
 import "../Searchbar/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
-const H = ({
-  loading: m,
-  sender: t,
-  recipient: o,
-  recipientLabel: n,
-  updatedAt: p,
-  updatedAtLabel: l,
-  children: a,
-  seenByLog: e
-}) => /* @__PURE__ */ i(c, { children: [
-  /* @__PURE__ */ i(f, { loading: m, icon: t, children: [
-    /* @__PURE__ */ r("strong", { children: t.name }),
-    n + " " + (o == null ? void 0 : o.name)
+const F = ({ loading: m, sender: o, recipient: i, recipientLabel: l, children: h, seenByLog: p }) => /* @__PURE__ */ t(c, { children: [
+  /* @__PURE__ */ t(f, { loading: m, icon: o, children: [
+    /* @__PURE__ */ r("strong", { children: o == null ? void 0 : o.name }),
+    l + " " + (i == null ? void 0 : i.name)
   ] }),
-  /* @__PURE__ */ r(
-    d,
-    {
-      loading: m,
-      datetime: p,
-      byline: l,
-      spacing: 4,
-      color: m ? "neutral" : void 0,
-      children: !m && /* @__PURE__ */ i(h, { children: [
-        /* @__PURE__ */ r(s, { maxWidth: "60ch", style: { marginTop: "0.5em" }, children: a }),
-        e && /* @__PURE__ */ r(y, { ...e })
-      ] })
-    }
-  )
+  /* @__PURE__ */ r(n, { loading: m, spacing: 4, color: m ? "neutral" : void 0, children: !m && /* @__PURE__ */ t(a, { children: [
+    /* @__PURE__ */ r(T, { maxWidth: "60ch", style: { marginTop: "0.5em" }, children: h }),
+    p && /* @__PURE__ */ r(e, { ...p })
+  ] }) })
 ] });
 export {
-  H as DialogBody
+  F as DialogBody
 };

package/dist/components/Dialog/DialogHeader.js

@@ -1,40 +1,48 @@
-import { jsxs as f, jsx as e } from "react/jsx-runtime";
+import { jsxs as t, jsx as r } from "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
 import "react";
+import { Badge as g } from "../Badge/Badge.js";
 import "../RootProvider/RootProvider.js";
-import { Heading as l } from "../Typography/Heading.js";
+import { Heading as h } from "../Typography/Heading.js";
 import { DialogMetadata as x } from "./DialogMetadata.js";
 import "../Searchbar/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
-import { Section as g } from "../Page/Section.js";
-const k = ({
-  loading: r,
-  title: p,
-  status: o,
-  draftsLabel: t,
+import { Flex as j } from "../Page/Flex.js";
+import { Section as D } from "../Page/Section.js";
+const y = ({
+  loading: i,
+  title: e,
+  badge: o,
+  status: m,
+  draftsLabel: p,
   sentCount: a,
   receivedCount: n,
-  updatedAt: i,
-  updatedAtLabel: c,
-  dueAt: m,
-  dueAtLabel: s
-}) => /* @__PURE__ */ f(g, { as: "header", spacing: 3, children: [
-  /* @__PURE__ */ e(l, { loading: r, size: "xl", children: p }),
-  (o || i || m) && /* @__PURE__ */ e(
+  updatedAt: l,
+  updatedAtLabel: s,
+  dueAt: c,
+  dueAtLabel: d,
+  activityLog: f
+}) => /* @__PURE__ */ t(D, { as: "header", spacing: 3, align: "start", children: [
+  /* @__PURE__ */ r(h, { loading: i, size: "xl", children: /* @__PURE__ */ t(j, { align: "center", children: [
+    /* @__PURE__ */ r("span", { children: e }),
+    o && /* @__PURE__ */ r(g, { ...o })
+  ] }) }),
+  /* @__PURE__ */ r(
     x,
     {
-      loading: r,
-      status: o,
-      draftsLabel: t,
+      loading: i,
+      status: m,
+      draftsLabel: p,
       sentCount: a,
       receivedCount: n,
-      updatedAt: i,
-      updatedAtLabel: c,
-      dueAt: m,
-      dueAtLabel: s
+      updatedAt: l,
+      updatedAtLabel: s,
+      dueAt: c,
+      dueAtLabel: d,
+      activityLog: f
     }
   )
 ] });
 export {
-  k as DialogHeader
+  y as DialogHeader
 };