@altinn/altinn-components 0.25.6 → 0.26.0

package/dist/assets/Avatar.css

@@ -1 +1 @@
-._avatar_vbrzn_1{flex-grow:0;flex-shrink:0;display:flex;justify-content:center;align-items:center;overflow:hidden;--avatar-font-size-xs: .75rem;--avatar-font-size-sm: .875rem;--avatar-font-size-md: 1.125rem;--avatar-font-size-lg: 1.25rem;--avatar-font-size-xl: 1.5rem}._circle_vbrzn_15{border-radius:50%}._square_vbrzn_19{border-radius:5%}._outline_vbrzn_23{outline:1px solid #ffffff;box-sizing:border-box}._xs_vbrzn_28{font-size:var(--avatar-font-size-xs);width:20px;height:20px}._sm_vbrzn_34{font-size:var(--avatar-font-size-sm);width:24px;height:24px}._md_vbrzn_40{font-size:var(--avatar-font-size-md);width:32px;height:32px}._lg_vbrzn_46{font-size:var(--avatar-font-size-lg);width:36px;height:36px}._xl_vbrzn_52{font-size:var(--avatar-font-size-xl);width:44px;height:44px}._image_vbrzn_58{width:100%;height:100%}
+._avatar_14nr9_1{flex-grow:0;flex-shrink:0;display:flex;justify-content:center;align-items:center;overflow:hidden;--avatar-font-size-xs: .75rem;--avatar-font-size-sm: .875rem;--avatar-font-size-md: 1.125rem;--avatar-font-size-lg: 1.25rem;--avatar-font-size-xl: 1.5rem}._circle_14nr9_15{border-radius:50%}._square_14nr9_19{border-radius:5%}._outline_14nr9_23{outline:1px solid #ffffff;box-sizing:border-box}._xs_14nr9_28{font-size:var(--avatar-font-size-xs);width:20px;height:20px}._sm_14nr9_34{font-size:var(--avatar-font-size-sm);width:24px;height:24px}._md_14nr9_40{font-size:var(--avatar-font-size-md);width:32px;height:32px}._lg_14nr9_46{font-size:var(--avatar-font-size-lg);width:36px;height:36px}._xl_14nr9_52{font-size:var(--avatar-font-size-xl);width:44px;height:44px}._image_14nr9_58,._avatarSkeleton_14nr9_63{width:100%;height:100%}

package/dist/components/Avatar/Avatar.js

@@ -1,53 +1,56 @@
 "use client";
-import { jsx as s } from "react/jsx-runtime";
-import { c as f } from "../../index-L8X2o7IH.js";
-import { useState as x } from "react";
-import { fromStringToColor as h } from "./color.js";
-import '../../assets/Avatar.css';const q = "_avatar_vbrzn_1", C = "_circle_vbrzn_15", E = "_square_vbrzn_19", I = "_outline_vbrzn_23", S = "_xs_vbrzn_28", k = "_sm_vbrzn_34", y = "_md_vbrzn_40", A = "_lg_vbrzn_46", N = "_xl_vbrzn_52", j = "_image_vbrzn_58", r = {
-  avatar: q,
-  circle: C,
-  square: E,
-  outline: I,
-  xs: S,
-  sm: k,
-  md: y,
-  lg: A,
-  xl: N,
-  image: j
-}, D = ({
+import { jsx as o } from "react/jsx-runtime";
+import { c as k } from "../../index-L8X2o7IH.js";
+import { useState as h } from "react";
+import { Skeleton as q } from "../Skeleton/Skeleton.js";
+import { fromStringToColor as C } from "./color.js";
+import '../../assets/Avatar.css';const E = "_avatar_14nr9_1", I = "_circle_14nr9_15", N = "_square_14nr9_19", y = "_outline_14nr9_23", A = "_xs_14nr9_28", b = "_sm_14nr9_34", j = "_md_14nr9_40", H = "_lg_14nr9_46", T = "_xl_14nr9_52", w = "_image_14nr9_58", z = "_avatarSkeleton_14nr9_63", r = {
+  avatar: E,
+  circle: I,
+  square: N,
+  outline: y,
+  xs: A,
+  sm: b,
+  md: j,
+  lg: H,
+  xl: T,
+  image: w,
+  avatarSkeleton: z
+}, K = ({
   type: n = "person",
-  size: e = "sm",
-  name: t = "Avatar",
-  outline: c = !1,
-  imageUrl: o,
-  imageUrlAlt: l,
-  customLabel: i,
-  className: _
+  size: c = "sm",
+  name: a = "Avatar",
+  outline: l = !1,
+  imageUrl: t,
+  imageUrlAlt: i,
+  customLabel: _,
+  loading: s,
+  className: m
 }) => {
-  const [m, v] = x(!1), u = n === "person" ? "circle" : "square", g = n === "person" ? "light" : "dark", { backgroundColor: d, foregroundColor: b } = h(t, g), p = (t[0] ?? "").toUpperCase(), a = o && !m, z = a ? void 0 : {
-    backgroundColor: d,
-    color: b
-  };
-  return /* @__PURE__ */ s(
+  const [u, d] = h(!1), g = n === "person" ? "circle" : "square", v = n === "person" ? "light" : "dark", { backgroundColor: p, foregroundColor: f } = C(a, v), x = (a[0] ?? "").toUpperCase(), e = t && !u, S = !s && !e ? {
+    backgroundColor: p,
+    color: f
+  } : void 0;
+  return /* @__PURE__ */ o(
     "div",
     {
-      className: f(r.avatar, r[u], r[e], { [r.outline]: c }, _),
-      style: z,
+      className: k(r.avatar, r[g], r[c], { [r.outline]: l }, m),
+      style: S,
       "aria-hidden": !0,
-      children: a ? /* @__PURE__ */ s(
+      children: /* @__PURE__ */ o(q, { loading: s, className: r.avatarSkeleton, variant: "circle", children: e ? /* @__PURE__ */ o(
         "img",
         {
-          src: o,
+          src: t,
           className: r.image,
-          alt: l || o,
+          alt: i || t,
           onError: () => {
-            v(!0);
+            d(!0);
           }
         }
-      ) : /* @__PURE__ */ s("span", { children: i || p })
+      ) : /* @__PURE__ */ o("span", { children: _ || x }) })
     }
   );
 };
 export {
-  D as Avatar
+  K as Avatar
 };

package/dist/components/Dialog/DialogHeading.js

@@ -1,17 +1,17 @@
 import { jsxs as n, jsx as t } from "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
 import "react";
-import { Badge as l } from "../Badge/Badge.js";
+import { Skeleton as l } from "../Skeleton/Skeleton.js";
+import { Badge as d } from "../Badge/Badge.js";
 import "../RootProvider/RootProvider.js";
-import { Skeleton as d } from "../Skeleton/Skeleton.js";
 import "../Search/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
 import '../../assets/DialogHeading.css';const p = "_heading_rx9gi_1", c = "_title_rx9gi_7", r = {
   heading: p,
   title: c
 }, u = ({ loading: e, size: s = "sm", seen: a = !1, state: o, badge: i, children: m }) => /* @__PURE__ */ n("div", { className: r.heading, children: [
-  /* @__PURE__ */ t(d, { loading: e, children: /* @__PURE__ */ t("h2", { className: r.title, "data-seen": a, "data-size": s, "data-state": o, children: m }) }),
-  !e && i && /* @__PURE__ */ t(l, { ...i })
+  /* @__PURE__ */ t(l, { loading: e, children: /* @__PURE__ */ t("h2", { className: r.title, "data-seen": a, "data-size": s, "data-state": o, children: m }) }),
+  !e && i && /* @__PURE__ */ t(d, { ...i })
 ] });
 export {
   u as DialogHeading

package/dist/components/Dialog/DialogListItem.js

@@ -1,11 +1,11 @@
 import { jsx as o, jsxs as N } from "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
 import "react";
+import { Skeleton as C } from "../Skeleton/Skeleton.js";
 import "../RootProvider/RootProvider.js";
-import { ListItemLabel as C } from "../List/ListItemLabel.js";
-import { ListItemSelect as E } from "../List/ListItemSelect.js";
+import { ListItemLabel as E } from "../List/ListItemLabel.js";
+import { ListItemSelect as F } from "../List/ListItemSelect.js";
 import { ListItem as g } from "../List/ListItem.js";
-import { Skeleton as F } from "../Skeleton/Skeleton.js";
 import { DialogMetadata as v } from "./DialogMetadata.js";
 import { DialogByline as G } from "./DialogByline.js";
 import { DialogHeading as J } from "./DialogHeading.js";
@@ -67,7 +67,7 @@ import '../../assets/DialogListItem.css';const K = "_border_1wzcc_1", O = "_cont
           "data-size": a,
           "data-seen": l,
           "data-loading": r,
-          children: /* @__PURE__ */ o(C, { loading: r, size: a, title: c, description: i || f })
+          children: /* @__PURE__ */ o(E, { loading: r, size: a, title: c, description: i || f })
         }
       ),
       badge: /* @__PURE__ */ o(v, { loading: r, sender: s, updatedAt: d, updatedAtLabel: _ }),
@@ -80,7 +80,7 @@ import '../../assets/DialogListItem.css';const K = "_border_1wzcc_1", O = "_cont
       size: a,
       selected: m,
       theme: y,
-      controls: /* @__PURE__ */ o("div", { className: e.controls, children: B || n && /* @__PURE__ */ o(E, { ...n, size: "xl" }) }),
+      controls: /* @__PURE__ */ o("div", { className: e.controls, children: B || n && /* @__PURE__ */ o(F, { ...n, size: "xl" }) }),
       title: c,
       label: /* @__PURE__ */ N(
         "div",
@@ -104,7 +104,7 @@ import '../../assets/DialogListItem.css';const K = "_border_1wzcc_1", O = "_cont
                   grouped: D
                 }
               ),
-              a === "lg" && i && /* @__PURE__ */ o(F, { loading: r, children: /* @__PURE__ */ o("p", { "data-size": a, className: e.summary, children: i || f }) })
+              a === "lg" && i && /* @__PURE__ */ o(C, { loading: r, children: /* @__PURE__ */ o("p", { "data-size": a, className: e.summary, children: i || f }) })
             ] }),
             /* @__PURE__ */ o(
               v,

package/dist/components/Icon/Icon.js

@@ -1,8 +1,8 @@
 import { jsx as r } from "react/jsx-runtime";
 import { c as t } from "../../index-L8X2o7IH.js";
 import "react";
-import "../RootProvider/RootProvider.js";
 import { Skeleton as d } from "../Skeleton/Skeleton.js";
+import "../RootProvider/RootProvider.js";
 import "../Search/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
 import '../../assets/Icon.css';const p = "_icon_ti5cw_1", a = {

package/dist/components/Page/DashboardCard.js

@@ -1,31 +1,40 @@
 "use client";
-import { jsx as c, jsxs as d } from "react/jsx-runtime";
-import { Icon as B } from "../Icon/Icon.js";
+import { jsx as i, jsxs as d } from "react/jsx-runtime";
+import { Icon as R } from "../Icon/Icon.js";
 import "../../index-L8X2o7IH.js";
-import { forwardRef as m, useRef as R, useEffect as w } from "react";
+import { forwardRef as p, useRef as g, useEffect as w } from "react";
+import { Skeleton as y } from "../Skeleton/Skeleton.js";
 import "../RootProvider/RootProvider.js";
-import { Heading as y } from "../Typography/Heading.js";
+import { Heading as S } from "../Typography/Heading.js";
 import "../Search/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
 import { u as b, c as u } from "../../floating-ui.react-BQwG1HOM.js";
-import { S as p } from "../../index-C8BS_2GY.js";
-const j = m(function({ asChild: o = !1, variant: r = "default", className: n, ...s }, a) {
-  const C = o ? p : "div", l = R(null), k = b([l, a]);
+import { S as h } from "../../index-C8BS_2GY.js";
+const j = p(function({ asChild: n = !1, variant: r = "default", className: s, ...c }, t) {
+  const l = n ? h : "div", f = g(null), k = b([f, t]);
   return w(() => {
-    const e = l.current, f = ({ ctrlKey: x, metaKey: v, target: g }) => {
-      const t = e == null ? void 0 : e.querySelector(":is(h1,h2,h3,h4,h5,h6) a");
-      !t || t != null && t.contains(g) || (x || v ? window.open(t.href, "", "noreferrer") : t.click());
+    const e = f.current, m = ({ ctrlKey: x, metaKey: v, target: B }) => {
+      const o = e == null ? void 0 : e.querySelector(":is(h1,h2,h3,h4,h5,h6) a");
+      !o || o != null && o.contains(B) || (x || v ? window.open(o.href, "", "noreferrer") : o.click());
     };
-    return e == null || e.addEventListener("click", f), () => e == null ? void 0 : e.removeEventListener("click", f);
-  }, []), c(C, { className: u("ds-card", n), "data-variant": r, ref: k, ...s });
-}), E = m(function({ asChild: o, className: r, ...n }, s) {
-  return c(o ? p : "div", { className: u("ds-card__block", r), ref: s, ...n });
-}), h = Object.assign(j, {
+    return e == null || e.addEventListener("click", m), () => e == null ? void 0 : e.removeEventListener("click", m);
+  }, []), i(l, { className: u("ds-card", s), "data-variant": r, ref: k, ...c });
+}), E = p(function({ asChild: n, className: r, ...s }, c) {
+  return i(n ? h : "div", { className: u("ds-card__block", r), ref: c, ...s });
+}), C = Object.assign(j, {
   Block: E
 });
-h.Block.displayName = "Card.Block";
-function M({ color: i, theme: o = "tinted", icon: r, title: n, children: s }) {
-  return /* @__PURE__ */ d(h, { "data-color": i, variant: o, children: [
+C.Block.displayName = "Card.Block";
+function $({
+  color: a,
+  theme: n = "tinted",
+  icon: r,
+  title: s,
+  children: c,
+  loading: t,
+  className: l
+}) {
+  return /* @__PURE__ */ d(C, { "data-color": a, variant: n, className: l, children: [
     /* @__PURE__ */ d(
       "header",
       {
@@ -36,14 +45,14 @@ function M({ color: i, theme: o = "tinted", icon: r, title: n, children: s }) {
           rowGap: "1rem"
         },
         children: [
-          r && /* @__PURE__ */ c(B, { ...r, size: "xl", theme: "default" }),
-          /* @__PURE__ */ c(y, { size: "lg", children: n })
+          r && /* @__PURE__ */ i(R, { loading: t, ...r, size: "xl", theme: "default" }),
+          /* @__PURE__ */ i(S, { size: "lg", loading: t, children: s })
         ]
       }
     ),
-    s
+    /* @__PURE__ */ i(y, { loading: t, children: c })
   ] });
 }
 export {
-  M as DashboardCard
+  $ as DashboardCard
 };

package/dist/components/Page/DashboardHeader.js

@@ -3,22 +3,23 @@ import "../../index-L8X2o7IH.js";
 import "react";
 import { Avatar as n } from "../Avatar/Avatar.js";
 import "../RootProvider/RootProvider.js";
+import { Skeleton as c } from "../Skeleton/Skeleton.js";
 import { Typography as l } from "../Typography/Typography.js";
-import { Heading as s } from "../Typography/Heading.js";
+import { Heading as a } from "../Typography/Heading.js";
 import "../Search/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
-import { Flex as t } from "./Flex.js";
-import { Section as a } from "./Section.js";
-const y = ({ type: e, name: o, title: d, description: p, children: m }) => /* @__PURE__ */ i(a, { as: "header", theme: "default", padding: "page", spacing: 6, shadow: "xs", bleed: !0, children: [
-  /* @__PURE__ */ i(t, { direction: "row", align: "center", spacing: 3, children: [
-    /* @__PURE__ */ r("div", { style: { position: "relative" }, children: /* @__PURE__ */ r(n, { size: "xl", type: e, name: o }) }),
-    /* @__PURE__ */ i(t, { direction: "col", children: [
-      /* @__PURE__ */ r(s, { size: "lg", children: d || o }),
-      /* @__PURE__ */ r(l, { theme: "subtle", size: "xs", children: /* @__PURE__ */ r("p", { children: p || e }) })
+import { Flex as m } from "./Flex.js";
+import { Section as h } from "./Section.js";
+const k = ({ type: o, name: t, title: p, description: s, loading: e, children: d }) => /* @__PURE__ */ i(h, { as: "header", theme: "default", padding: "page", spacing: 6, shadow: "xs", bleed: !0, children: [
+  /* @__PURE__ */ i(m, { direction: "row", align: "center", spacing: 3, children: [
+    /* @__PURE__ */ r("div", { style: { position: "relative" }, children: /* @__PURE__ */ r(n, { size: "xl", type: o, name: t, loading: e }) }),
+    /* @__PURE__ */ i(m, { direction: "col", children: [
+      /* @__PURE__ */ r(a, { size: "lg", loading: e, children: p || t }),
+      /* @__PURE__ */ r(l, { theme: "subtle", size: "xs", loading: e, children: /* @__PURE__ */ r("p", { children: s || o }) })
     ] })
   ] }),
-  m
+  /* @__PURE__ */ r(c, { loading: e, children: d })
 ] });
 export {
-  y as DashboardHeader
+  k as DashboardHeader
 };

package/dist/components/Timeline/TimelineHeader.js

@@ -2,9 +2,9 @@ import { jsxs as m, jsx as e } from "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
 import { IconOrAvatar as l } from "../Icon/IconOrAvatar.js";
 import "react";
-import { Byline as d } from "../Byline/Byline.js";
+import { Skeleton as d } from "../Skeleton/Skeleton.js";
+import { Byline as p } 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 _ } from "../Page/Flex.js";
@@ -21,8 +21,8 @@ import '../../assets/TimelineHeader.css';const h = "_header_177gq_1", b = "_side
   avatar: a,
   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 }) })
+  /* @__PURE__ */ e("aside", { className: r.sidebar, children: /* @__PURE__ */ e(d, { 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(p, { loading: t, size: "lg", children: c }) })
 ] });
 export {
   A as TimelineHeader

package/dist/components/Typography/Heading.js

@@ -1,8 +1,8 @@
 import { jsx as t } from "react/jsx-runtime";
 import { c as s } from "../../index-L8X2o7IH.js";
 import "react";
-import "../RootProvider/RootProvider.js";
 import { Skeleton as p } from "../Skeleton/Skeleton.js";
+import "../RootProvider/RootProvider.js";
 import "../Search/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
 import '../../assets/Heading.css';const c = "_heading_1mp1p_1", h = {

package/dist/types/lib/components/Avatar/Avatar.d.ts

@@ -21,8 +21,10 @@ export interface AvatarProps {
     outline?: boolean;
     /** Custom label to display inside the avatar. */
     customLabel?: string;
+    /** Whether the avatar is loading. */
+    loading?: boolean;
 }
 /**
  * Avatar component to display user or company avatars with various customization options.
  */
-export declare const Avatar: ({ type, size, name, outline, imageUrl, imageUrlAlt, customLabel, className, }: AvatarProps) => ReactElement;
+export declare const Avatar: ({ type, size, name, outline, imageUrl, imageUrlAlt, customLabel, loading, className, }: AvatarProps) => ReactElement;

package/dist/types/lib/components/Avatar/Examples.stories.d.ts

@@ -1,6 +1,6 @@
 declare const meta: {
     title: string;
-    component: ({ type, size, name, outline, imageUrl, imageUrlAlt, customLabel, className, }: import('./Avatar').AvatarProps) => React.ReactElement;
+    component: ({ type, size, name, outline, imageUrl, imageUrlAlt, customLabel, loading, className, }: import('./Avatar').AvatarProps) => React.ReactElement;
     parameters: {};
     args: {};
 };

package/dist/types/lib/components/Avatar/avatar.stories.d.ts

@@ -1,7 +1,7 @@
 import { StoryObj } from '@storybook/react';
 declare const meta: {
     title: string;
-    component: ({ type, size, name, outline, imageUrl, imageUrlAlt, customLabel, className, }: import('./Avatar').AvatarProps) => React.ReactElement;
+    component: ({ type, size, name, outline, imageUrl, imageUrlAlt, customLabel, loading, className, }: import('./Avatar').AvatarProps) => React.ReactElement;
     tags: string[];
     parameters: {
         layout: string;

package/dist/types/lib/components/Page/DashboardCard.d.ts

@@ -6,5 +6,7 @@ export interface DashboardCardProps {
     icon?: IconProps;
     title?: ReactNode;
     children?: ReactNode;
+    className?: string;
+    loading?: boolean;
 }
-export declare function DashboardCard({ color, theme, icon, title, children }: DashboardCardProps): import("react/jsx-runtime").JSX.Element;
+export declare function DashboardCard({ color, theme, icon, title, children, loading, className, }: DashboardCardProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Page/DashboardHeader.d.ts

@@ -6,5 +6,6 @@ export interface DashboardHeaderProps {
     title?: string;
     description?: string;
     children?: ReactNode;
+    loading?: boolean;
 }
-export declare const DashboardHeader: ({ type, name, title, description, children }: DashboardHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DashboardHeader: ({ type, name, title, description, loading, children }: DashboardHeaderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Transmission/Transmission.stories.d.ts

@@ -34,6 +34,8 @@ declare const meta: {
         avatar?: import('..').AvatarProps | undefined;
         avatarGroup?: import('..').AvatarGroupProps | undefined;
         href?: string | undefined;
+        controls?: React.ReactNode;
+        selected?: boolean | undefined;
         ariaLabel?: string | undefined;
         titleAs?: React.ElementType | undefined;
         description?: string | undefined;
@@ -41,10 +43,8 @@ declare const meta: {
         interactive?: boolean | undefined;
         tabIndex?: number | undefined;
         shadow?: import('..').ListItemShadow | undefined;
-        selected?: boolean | undefined;
         onMouseEnter?: React.MouseEventHandler<HTMLDivElement> | undefined;
         collapsible?: boolean | undefined;
-        controls?: React.ReactNode;
         onClick?: (() => void) | undefined;
         onKeyPress?: React.KeyboardEventHandler | undefined;
         describedby?: string | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@altinn/altinn-components",
-  "version": "0.25.6",
+  "version": "0.26.0",
   "main": "dist/index.js",
   "files": [
     "dist/",