@altinn/altinn-components 0.20.2 → 0.21.1

package/dist/components/Timeline/TimelineBase.js

@@ -1,35 +1,37 @@
-import { jsxs as n, jsx as s } from "react/jsx-runtime";
-import { Icon as l } from "../Icon/Icon.js";
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import { Icon as p } from "../Icon/Icon.js";
 import "../../index-L8X2o7IH.js";
 import "react";
-import { Avatar as _ } from "../Avatar/Avatar.js";
+import { Avatar as x } from "../Avatar/Avatar.js";
 import "../RootProvider/RootProvider.js";
-import { Skeleton as p } from "../Skeleton/Skeleton.js";
+import { Skeleton as b } from "../Skeleton/Skeleton.js";
 import "../Search/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
-import { Flex as h } from "../Page/Flex.js";
-import '../../assets/TimelineBase.css';const b = "_section_si67h_1", f = "_sidebar_si67h_8", v = "_content_si67h_18", N = "_border_si67h_24", x = "_icon_si67h_30", o = {
-  section: b,
+import { Flex as g } from "../Page/Flex.js";
+import '../../assets/TimelineBase.css';const v = "_section_et0gx_1", f = "_sidebar_et0gx_8", N = "_content_et0gx_22", h = "_border_et0gx_28", j = "_icon_et0gx_34", t = {
+  section: v,
   sidebar: f,
-  content: v,
-  border: N,
-  icon: x
-}, I = ({
+  content: N,
+  border: h,
+  icon: j
+}, T = ({
   as: c = "section",
-  loading: i,
+  loading: o,
   border: a = "solid",
-  color: e,
-  icon: t,
-  iconColor: m,
-  avatar: r,
-  children: d
-}) => /* @__PURE__ */ n(h, { as: c, className: o.section, color: e, children: [
-  /* @__PURE__ */ n("aside", { className: o.sidebar, children: [
-    r && /* @__PURE__ */ s(_, { ...r, size: "sm" }) || t && /* @__PURE__ */ s(p, { loading: i, variant: "circle", children: /* @__PURE__ */ s("span", { "data-color": m, className: o.icon, children: /* @__PURE__ */ s(l, { svgElement: t, size: "sm" }) }) }),
-    /* @__PURE__ */ s("div", { className: o.border, "data-loading": i, "data-variant": a, "data-color": e })
+  level: m = 1,
+  color: s,
+  icon: r,
+  iconColor: d,
+  avatar: i,
+  children: l,
+  ..._
+}) => /* @__PURE__ */ n(g, { as: c, className: t.section, color: s, ..._, children: [
+  /* @__PURE__ */ n("aside", { className: t.sidebar, "data-level": m, children: [
+    i && /* @__PURE__ */ e(x, { ...i, size: "sm" }) || r && /* @__PURE__ */ e(b, { loading: o, variant: "circle", children: /* @__PURE__ */ e("span", { "data-color": d, className: t.icon, children: /* @__PURE__ */ e(p, { svgElement: r, size: "sm" }) }) }),
+    /* @__PURE__ */ e("div", { className: t.border, "data-loading": o, "data-variant": a, "data-color": s })
   ] }),
-  /* @__PURE__ */ s("div", { className: o.content, children: d })
+  /* @__PURE__ */ e("div", { className: t.content, children: l })
 ] });
 export {
-  I as TimelineBase
+  T as TimelineBase
 };

package/dist/components/Timeline/TimelineFooter.js

@@ -1,4 +1,4 @@
-import { jsx as o } from "react/jsx-runtime";
+import { jsx as i } from "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
 import "react";
 import { Byline as l } from "../Byline/Byline.js";
@@ -9,12 +9,12 @@ import { TimelineBase as n } from "./TimelineBase.js";
 import { S as f } from "../../CircleFill-IZdiBc_K.js";
 const S = ({
   loading: r,
-  as: i = "footer",
-  color: e = "neutral",
-  icon: m = f,
+  as: o = "li",
+  color: m = "neutral",
+  icon: e = f,
   iconColor: t,
   children: p
-}) => /* @__PURE__ */ o(n, { loading: r, as: i, icon: m, color: e, iconColor: t, border: "hidden", children: /* @__PURE__ */ o(l, { loading: r, children: p }) });
+}) => /* @__PURE__ */ i(n, { loading: r, as: o, icon: e, color: m, iconColor: t, border: "hidden", children: /* @__PURE__ */ i(l, { loading: r, children: p }) });
 export {
   S as TimelineFooter
 };

package/dist/components/Timeline/TimelineHeader.js

@@ -1,28 +1,28 @@
 import { jsxs as m, jsx as e } from "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
-import { IconOrAvatar as d } from "../Icon/IconOrAvatar.js";
+import { IconOrAvatar as l } from "../Icon/IconOrAvatar.js";
 import "react";
-import { Byline as l } from "../Byline/Byline.js";
+import { Byline as d } from "../Byline/Byline.js";
 import "../RootProvider/RootProvider.js";
 import { Skeleton as p } from "../Skeleton/Skeleton.js";
 import "../Search/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
-import { Flex as h } from "../Page/Flex.js";
-import '../../assets/TimelineHeader.css';const _ = "_header_177gq_1", b = "_sidebar_177gq_9", f = "_content_177gq_19", r = {
-  header: _,
+import { Flex as _ } from "../Page/Flex.js";
+import '../../assets/TimelineHeader.css';const h = "_header_177gq_1", b = "_sidebar_177gq_9", f = "_content_177gq_19", r = {
+  header: h,
   sidebar: b,
   content: f
 }, A = ({
-  as: i = "header",
+  as: i = "li",
   loading: t,
   color: o,
   icon: s,
   iconTheme: n = "base",
   avatar: a,
   children: c
-}) => /* @__PURE__ */ m(h, { as: i, className: r.header, color: o, children: [
-  /* @__PURE__ */ e("aside", { className: r.sidebar, children: /* @__PURE__ */ e(p, { variant: "circle", loading: t, children: /* @__PURE__ */ e(d, { size: "lg", icon: s, iconTheme: n, avatar: a }) }) }),
-  /* @__PURE__ */ e("div", { className: r.content, children: /* @__PURE__ */ e(l, { loading: t, size: "lg", children: c }) })
+}) => /* @__PURE__ */ m(_, { as: i, className: r.header, color: o, children: [
+  /* @__PURE__ */ e("aside", { className: r.sidebar, children: /* @__PURE__ */ e(p, { variant: "circle", loading: t, children: /* @__PURE__ */ e(l, { size: "lg", icon: s, iconTheme: n, avatar: a }) }) }),
+  /* @__PURE__ */ e("div", { className: r.content, children: /* @__PURE__ */ e(d, { loading: t, size: "lg", children: c }) })
 ] });
 export {
   A as TimelineHeader

package/dist/components/Timeline/TimelineLink.js

@@ -0,0 +1,39 @@
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import { c as a } from "../../index-L8X2o7IH.js";
+import "react";
+import { ButtonBase as b } from "../Button/ButtonBase.js";
+import { ButtonLabel as _ } from "../Button/ButtonLabel.js";
+import { ButtonIcon as p } from "../Button/ButtonIcon.js";
+import "../RootProvider/RootProvider.js";
+import "../Search/AutocompleteBase.js";
+import "../Snackbar/useSnackbar.js";
+import '../../assets/TimelineLink.css';const u = "_button_18xbc_1", x = "_reverse_18xbc_9", f = "_icon_18xbc_13", v = "_label_18xbc_19", o = {
+  button: u,
+  reverse: x,
+  icon: f,
+  label: v
+}, T = ({
+  size: t = "custom",
+  color: n = "company",
+  icon: r,
+  reverse: c,
+  label: s,
+  children: m,
+  ...i
+}) => /* @__PURE__ */ l(
+  b,
+  {
+    color: n,
+    variant: "link",
+    size: t,
+    className: a(o.button, { [o.reverse]: c }),
+    ...i,
+    children: [
+      r && /* @__PURE__ */ e(p, { className: o.icon, size: t, icon: r }),
+      /* @__PURE__ */ e(_, { className: o.label, size: t, children: m || s })
+    ]
+  }
+);
+export {
+  T as TimelineLink
+};

package/dist/components/Timeline/TimelineSection.js

@@ -1,4 +1,4 @@
-import { jsxs as i, jsx as t } from "react/jsx-runtime";
+import { jsxs as m, jsx as t } from "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
 import "react";
 import { Byline as x } from "../Byline/Byline.js";
@@ -7,25 +7,26 @@ import "../Search/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
 import { TimelineBase as T } from "./TimelineBase.js";
 import { Section as j } from "../Page/Section.js";
-import { Typography as l } from "../Typography/Typography.js";
-const v = ({
+import { Typography as y } from "../Typography/Typography.js";
+const w = ({
   loading: r,
   margin: p,
   spacing: e,
-  border: n = "strong",
-  color: s,
-  typographyProps: c = {},
-  datetime: f,
+  as: n = "li",
+  border: s = "strong",
+  color: c,
+  typographyProps: f = {},
+  datetime: h,
   byline: o,
-  children: m,
-  footer: h
-}) => /* @__PURE__ */ i(T, { loading: r, border: n, color: s, children: [
-  o && /* @__PURE__ */ t(x, { loading: r, datetime: f, children: o }),
-  /* @__PURE__ */ i(j, { margin: p, spacing: e, children: [
-    m && /* @__PURE__ */ t(l, { loading: r, size: "md", ...c, children: m }),
-    h
+  children: i,
+  footer: l
+}) => /* @__PURE__ */ m(T, { loading: r, border: s, color: c, as: n, children: [
+  o && /* @__PURE__ */ t(x, { loading: r, datetime: h, children: o }),
+  /* @__PURE__ */ m(j, { margin: p, spacing: e, children: [
+    i && /* @__PURE__ */ t(y, { loading: r, size: "md", ...f, children: i }),
+    l
   ] })
 ] });
 export {
-  v as TimelineSection
+  w as TimelineSection
 };

package/dist/components/Timeline/TimelineSegment.js

@@ -1,27 +1,27 @@
-import { jsx as i, jsxs as f } from "react/jsx-runtime";
+import { jsx as i, jsxs as c } from "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
 import "react";
-import { Byline as s } from "../Byline/Byline.js";
+import { Byline as f } from "../Byline/Byline.js";
 import "../RootProvider/RootProvider.js";
 import "../Search/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
 import { TimelineBase as S } from "./TimelineBase.js";
-import { Section as h } from "../Page/Section.js";
-import { S as x } from "../../CircleFill-IZdiBc_K.js";
+import { Section as a } from "../Page/Section.js";
+import { S as h } from "../../CircleFill-IZdiBc_K.js";
 const k = ({
   loading: r,
   datetime: m,
   byline: o,
-  icon: t = x,
+  icon: t = h,
   color: e = "neutral",
   spacing: p = 2,
-  margin: n = "bottom",
-  children: l,
-  footer: a,
-  ...c
-}) => /* @__PURE__ */ i(S, { loading: r, color: e, icon: t, ...c, children: /* @__PURE__ */ f(h, { margin: n, spacing: p, children: [
-  o && /* @__PURE__ */ i(s, { loading: r, datetime: m, children: o }),
-  l
+  margin: l = "bottom",
+  children: n,
+  footer: x,
+  ...s
+}) => /* @__PURE__ */ i(S, { loading: r, color: e, icon: t, as: "li", ...s, children: /* @__PURE__ */ c(a, { margin: l, spacing: p, children: [
+  o && /* @__PURE__ */ i(f, { loading: r, datetime: m, children: o }),
+  n
 ] }) });
 export {
   k as TimelineSegment

package/dist/components/Timeline/index.js

@@ -5,12 +5,14 @@ import { TimelineBase as l } from "./TimelineBase.js";
 import { TimelineSection as x } from "./TimelineSection.js";
 import { TimelineHeader as a } from "./TimelineHeader.js";
 import { TimelineFooter as S } from "./TimelineFooter.js";
+import { TimelineLink as g } from "./TimelineLink.js";
 export {
   o as Timeline,
   n as TimelineActivity,
   l as TimelineBase,
   S as TimelineFooter,
   a as TimelineHeader,
+  g as TimelineLink,
   x as TimelineSection,
   m as TimelineSegment
 };

package/dist/components/Transmission/Transmission.js

@@ -1,56 +1,59 @@
 "use client";
-import { jsx as o, jsxs as t } from "react/jsx-runtime";
+import { jsx as i, jsxs as m } from "react/jsx-runtime";
 import { useState as x } from "react";
 import "../../index-L8X2o7IH.js";
-import { AttachmentList as a } from "../Attachment/AttachmentList.js";
-import { Byline as y } from "../Byline/Byline.js";
+import { AttachmentList as g } from "../Attachment/AttachmentList.js";
+import { Byline as h } from "../Byline/Byline.js";
 import "../RootProvider/RootProvider.js";
 import "../Search/AutocompleteBase.js";
-import { ListItem as g } from "../List/ListItem.js";
+import { ListItemLabel as L } from "../List/ListItemLabel.js";
+import { ListItem as y } from "../List/ListItem.js";
 import "../Snackbar/useSnackbar.js";
-import { Section as h } from "../Page/Section.js";
-import { Typography as b } from "../Typography/Typography.js";
-const w = ({
-  size: p = "xs",
-  theme: m = "subtle",
+import { Section as I } from "../Page/Section.js";
+import { Typography as j } from "../Typography/Typography.js";
+const G = ({
+  size: t = "xs",
+  theme: l = "subtle",
   color: e = "neutral",
-  type: j,
+  type: p,
+  title: n,
   createdAt: k,
-  createdAtLabel: l,
-  badge: n,
-  sender: i,
-  summary: c,
+  createdAtLabel: s,
+  badge: c,
+  sender: o,
+  summary: d,
   attachments: r,
-  ...s
+  ...f
 }) => {
-  const [d, f] = x(!1);
-  return /* @__PURE__ */ o(
-    g,
+  const [a, u] = x(!1);
+  return /* @__PURE__ */ i(
+    y,
     {
-      ...s,
-      avatar: i,
-      badge: n,
-      size: p,
-      theme: m,
+      ...f,
+      avatar: o,
+      badge: c,
+      size: t,
+      theme: l,
       color: e,
-      expanded: d,
-      onClick: () => f((u) => !u),
+      label: /* @__PURE__ */ i(L, { title: n, weight: p === "submission" ? "normal" : "bold" }),
+      expanded: a,
+      onClick: () => u((b) => !b),
       collapsible: !0,
       linkIcon: !0,
-      children: /* @__PURE__ */ t(h, { padding: 4, children: [
-        /* @__PURE__ */ t(y, { children: [
-          /* @__PURE__ */ o("strong", { children: (i == null ? void 0 : i.name) + ", " }),
+      children: /* @__PURE__ */ m(I, { padding: 4, children: [
+        /* @__PURE__ */ m(h, { children: [
+          /* @__PURE__ */ i("strong", { children: (o == null ? void 0 : o.name) + ", " }),
           " ",
-          l
+          s
         ] }),
-        /* @__PURE__ */ t(b, { size: "md", children: [
-          /* @__PURE__ */ o("p", { children: c }),
-          (r == null ? void 0 : r.items) && /* @__PURE__ */ o(a, { ...r })
+        /* @__PURE__ */ m(j, { size: "md", children: [
+          /* @__PURE__ */ i("p", { children: d }),
+          (r == null ? void 0 : r.items) && /* @__PURE__ */ i(g, { ...r })
         ] })
       ] })
     }
   );
 };
 export {
-  w as Transmission
+  G as Transmission
 };

package/dist/components/Transmission/TransmissionTimeline.js

@@ -0,0 +1,22 @@
+"use client";
+import { jsx as n } from "react/jsx-runtime";
+import { createElement as p } from "react";
+import "../../index-L8X2o7IH.js";
+import "../RootProvider/RootProvider.js";
+import "../Search/AutocompleteBase.js";
+import "../Snackbar/useSnackbar.js";
+import { Timeline as m } from "../Timeline/Timeline.js";
+import { TransmissionTimelineSegment as a } from "./TransmissionTimelineSegment.js";
+const x = ({ items: l, collapsible: r, expandLabel: o, collapseLabel: i }) => l.length ? /* @__PURE__ */ n(m, { children: l.map((e) => /* @__PURE__ */ p(
+  a,
+  {
+    ...e,
+    key: e.id,
+    collapsible: e.collapsible || r,
+    expandLabel: e.expandLabel || o,
+    collapseLabel: e.collapseLabel || i
+  }
+)) }) : null;
+export {
+  x as TransmissionTimeline
+};

package/dist/components/Transmission/TransmissionTimelineSegment.js

@@ -0,0 +1,63 @@
+"use client";
+import { jsxs as a, jsx as n } from "react/jsx-runtime";
+import * as u from "react";
+import { forwardRef as x, useState as O } from "react";
+import "../../index-L8X2o7IH.js";
+import "../RootProvider/RootProvider.js";
+import "../Search/AutocompleteBase.js";
+import { ListBase as f } from "../List/ListBase.js";
+import "../Snackbar/useSnackbar.js";
+import { Timeline as b } from "../Timeline/Timeline.js";
+import { TimelineSegment as p } from "../Timeline/TimelineSegment.js";
+import { TimelineActivity as S } from "../Timeline/TimelineActivity.js";
+import { TimelineLink as h } from "../Timeline/TimelineLink.js";
+import { Transmission as m } from "./Transmission.js";
+import { u as T } from "../../useId-CsCRkvK3.js";
+import { S as j } from "../../ArrowUp-Cn3ai5t6.js";
+var E = function(r, o) {
+  var t = {};
+  for (var e in r) Object.prototype.hasOwnProperty.call(r, e) && o.indexOf(e) < 0 && (t[e] = r[e]);
+  if (r != null && typeof Object.getOwnPropertySymbols == "function")
+    for (var i = 0, e = Object.getOwnPropertySymbols(r); i < e.length; i++)
+      o.indexOf(e[i]) < 0 && Object.prototype.propertyIsEnumerable.call(r, e[i]) && (t[e[i]] = r[e[i]]);
+  return t;
+};
+const g = x((r, o) => {
+  var { title: t, titleId: e } = r, i = E(r, ["title", "titleId"]);
+  let d = T();
+  return d = t ? e || "title-" + d : void 0, u.createElement(
+    "svg",
+    Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "none", viewBox: "0 0 24 24", focusable: !1, role: "img", ref: o, "aria-labelledby": d }, i),
+    t ? u.createElement("title", { id: d }, t) : null,
+    u.createElement("path", { fill: "currentColor", fillRule: "evenodd", d: "M13.672 3.825a.75.75 0 0 1 .791.085l7 5.5a.75.75 0 0 1 0 1.18l-7 5.5a.75.75 0 0 1-1.213-.59v-2.724a9.1 9.1 0 0 0-2.63.565c-2.284.87-3.759 2.562-4.671 4.077a12.4 12.4 0 0 0-.957 1.965 10 10 0 0 0-.263.792l-.001.007A.75.75 0 0 1 3.25 20c0-1.654.322-3.941 1.224-6.123.903-2.184 2.413-4.32 4.823-5.558 1.133-.581 2.445-.954 3.953-1.046V4.5a.75.75 0 0 1 .422-.675", clipRule: "evenodd" })
+  );
+}), D = ({
+  collapsible: r,
+  items: o,
+  datetime: t,
+  byline: e,
+  expandLabel: i = "Expand",
+  collapseLabel: d,
+  link: c,
+  ...s
+}) => {
+  const [w, y] = O(!r), v = () => {
+    y((l) => !l);
+  };
+  return o != null && o.length ? r && !w ? /* @__PURE__ */ a(p, { datetime: t, byline: e, children: [
+    /* @__PURE__ */ n(f, { children: /* @__PURE__ */ n(m, { ...s }) }),
+    /* @__PURE__ */ n(h, { icon: g, onClick: v, children: i })
+  ] }) : /* @__PURE__ */ a(p, { datetime: t, byline: e, children: [
+    /* @__PURE__ */ n(f, { children: /* @__PURE__ */ n(m, { ...s }) }),
+    o.length > 0 && /* @__PURE__ */ n(b, { children: /* @__PURE__ */ a(p, { level: 2, icon: g, border: "dashed", margin: 0, children: [
+      o.map((l) => /* @__PURE__ */ n(S, { spacing: 2, datetime: l == null ? void 0 : l.datetime, byline: l == null ? void 0 : l.byline, children: /* @__PURE__ */ n(f, { children: /* @__PURE__ */ n(m, { ...l }) }) }, l.id)),
+      r && d && /* @__PURE__ */ n(h, { reverse: !0, icon: j, onClick: v, children: d })
+    ] }) })
+  ] }) : /* @__PURE__ */ a(p, { datetime: t, byline: e, children: [
+    /* @__PURE__ */ n(f, { children: /* @__PURE__ */ n(m, { ...s }) }),
+    c && /* @__PURE__ */ n(h, { ...c, icon: (c == null ? void 0 : c.icon) || g })
+  ] });
+};
+export {
+  D as TransmissionTimelineSegment
+};

package/dist/components/Transmission/index.js

@@ -1,6 +1,10 @@
-import { Transmission as r } from "./Transmission.js";
+import { Transmission as o } from "./Transmission.js";
 import { TransmissionList as m } from "./TransmissionList.js";
+import { TransmissionTimeline as e } from "./TransmissionTimeline.js";
+import { TransmissionTimelineSegment as T } from "./TransmissionTimelineSegment.js";
 export {
-  r as Transmission,
-  m as TransmissionList
+  o as Transmission,
+  m as TransmissionList,
+  e as TransmissionTimeline,
+  T as TransmissionTimelineSegment
 };