@altinn/altinn-components 0.7.1 → 0.7.2

package/dist/assets/DialogBorder.css

@@ -1 +1 @@
-._border_tdijc_1{border-left:.25rem solid;border-color:var(--theme-surface-active);display:flex;flex-direction:column}._border_tdijc_1[data-seen=true]{border-color:var(--neutral-surface-default)}
+._border_12m8d_1{border-left:.25rem solid;border-color:var(--theme-surface-active);display:flex;flex-direction:column}._border_12m8d_1[data-seen=true],._border_12m8d_1[data-loading=true]{border-color:var(--neutral-surface-default)}

package/dist/assets/DialogHeadings.css

@@ -1 +1 @@
-._headings_fci15_1{display:flex;column-gap:.5em;align-items:center}._headings_fci15_1[data-size=xs],._headings_fci15_1[data-size=sm]{font-size:12px}._headings_fci15_1[data-size=md],._headings_fci15_1[data-size=lg]{font-size:14px}._headings_fci15_1[data-size=xl]{font-size:16px}._text_fci15_21{display:inline;color:var(--neutral-text-subtle)}._sender_fci15_26{font-weight:500;color:var(--neutral-text-default)}._recipient_fci15_31{white-space:nowrap}
+._headings_qkf0g_1{display:inline-flex;column-gap:.5em;align-items:center}._headings_qkf0g_1[data-size=xs],._headings_qkf0g_1[data-size=sm]{font-size:12px}._headings_qkf0g_1[data-size=md],._headings_qkf0g_1[data-size=lg]{font-size:14px}._headings_qkf0g_1[data-size=xl]{font-size:16px}._text_qkf0g_21{display:inline-flex;flex-wrap:wrap;column-gap:.25em;color:var(--neutral-text-subtle)}._sender_qkf0g_28{font-weight:500;color:var(--neutral-text-default)}._recipient_qkf0g_33{display:inline-flex;column-gap:.25em;white-space:nowrap}

package/dist/assets/DialogListItem.css

@@ -1 +1 @@
-._item_vo44o_1[aria-selected=true]{background-color:var(--theme-background-subtle);outline:2px solid}._item_vo44o_1[aria-selected=false]:hover h2{text-decoration:underline}._item_vo44o_1[data-size=lg],._item_vo44o_1[data-size=md]{padding:1em}._item_vo44o_1[data-size=sm],._item_vo44o_1[data-size=xs]{padding:.5em .75em}._select_vo44o_20{position:absolute;top:0;right:0;margin:.375rem}._summary_vo44o_27{font-size:1rem;line-height:1.35;margin:0;font-weight:400}._summary_vo44o_27[data-size=lg]{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;margin-top:.5rem}._summary_vo44o_27[data-size=md]{display:none}._footer_vo44o_48{width:100%;margin-top:1rem;display:flex;flex-direction:column;row-gap:1rem}._touchedBy_vo44o_56{position:absolute;right:0;bottom:0;margin:8px}._border_vo44o_65[data-size=lg],._border_vo44o_65[data-size=md]{padding-left:1rem}._border_vo44o_65[data-size=xs],._border_vo44o_65[data-size=sm]{width:100%;flex-direction:row;align-items:center;padding-left:.75rem}
+._item_v64fv_1[aria-selected=true]{background-color:var(--theme-background-subtle);outline:2px solid}._item_v64fv_1[data-size=lg],._item_v64fv_1[data-size=md]{padding:1em}._item_v64fv_1[data-size=sm],._item_v64fv_1[data-size=xs]{padding:.5em .75em}._select_v64fv_16{position:absolute;top:0;right:0;margin:.375rem}._summary_v64fv_23{font-size:1rem;line-height:1.35;margin:0;font-weight:400}._summary_v64fv_23[data-size=lg]{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;margin-top:.5rem}._summary_v64fv_23[data-size=md]{display:none}._footer_v64fv_44{width:100%;margin-top:1rem;display:flex;flex-direction:column;row-gap:1rem}._touchedBy_v64fv_52{position:absolute;right:0;bottom:0;margin:8px}._border_v64fv_61[data-size=lg],._border_v64fv_61[data-size=md]{padding-left:1rem}._border_v64fv_61[data-size=xs],._border_v64fv_61[data-size=sm]{width:100%;flex-direction:row;align-items:center;padding-left:.75rem}

package/dist/assets/DialogSummary.css

@@ -0,0 +1 @@
+._summary_1sruo_1{font-size:1rem;line-height:1.35;margin:0;font-weight:400}._summary_1sruo_1[data-size=lg]{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;margin-top:.5rem}._summary_1sruo_1[data-size=md]{display:none}

package/dist/assets/HeaderButton.css

@@ -1 +1 @@
-._button_t01b4_1{position:relative;z-index:2;display:inline-flex;align-items:center;column-gap:.625rem;background-color:var(--global-base-default);color:#fff;padding:.625rem;border:none;border-radius:4px}._label_t01b4_14{font-size:1.125rem;font-weight:500;padding:.25rem}._icon_t01b4_20{width:2.25rem;height:2.25rem;display:flex;align-items:center;justify-content:center;border-radius:2px;font-size:1.5rem}._loginIcon_t01b4_30{background-color:#fff;color:#000}._closeIcon_t01b4_35{border:1px solid white}
+._button_buvev_1{position:relative;z-index:2;display:inline-flex;align-items:center;column-gap:.625rem;background-color:var(--global-base-default);color:#fff;padding:.625rem;border:none;border-radius:4px}._label_buvev_14{font-size:1.125rem;font-weight:500;padding:.25rem}._icon_buvev_20{width:2.25rem;height:2.25rem;display:flex;align-items:center;justify-content:center;border-radius:2px;font-size:1.5rem}._avatarGroup_buvev_30{width:2.25rem;height:2.25rem;display:flex;align-items:center;justify-content:center;overflow:visible}._loginIcon_buvev_39{background-color:#fff;color:#000}._closeIcon_buvev_44{border:1px solid white}._badge_buvev_48{position:absolute;top:0;right:0;margin-top:-.75rem;margin-right:-.75rem}

package/dist/assets/ListItemBase.css

@@ -1 +1 @@
-._item_us7f0_1{position:relative;width:100%;display:flex;align-items:center;justify-content:stretch}._item_us7f0_1[aria-selected=true]{background-color:var(--theme-background-subtle);outline:2px solid}._item_us7f0_1[data-shadow=xs]{box-shadow:var(--ds-shadow-xs)}._item_us7f0_1[data-size=xs]{min-height:36px}._item_us7f0_1[data-size=sm]{min-height:44px}._item_us7f0_1[data-size=md]{min-height:56px}._item_us7f0_1[data-size=lg]{min-height:64px}._item_us7f0_1[data-size=xl]{min-height:72px}._item_us7f0_1{background-color:var(--theme-background-default)}._item_us7f0_1:hover{outline:2px solid var(--theme-border-strong);z-index:2}._item_us7f0_1:hover strong,._item_us7f0_1:hover h2{text-decoration:underline}._item_us7f0_1[data-active=true],._item_us7f0_1[data-color=accent]{background-color:var(--theme-surface-default)}._item_us7f0_1[data-color=accent]:hover{background-color:var(--theme-surface-hover)}._link_us7f0_74{align-self:stretch;padding:0;border:0;background-color:transparent;color:inherit;font:inherit;text-align:inherit;text-decoration:none;line-height:normal;-webkit-font-smoothing:inherit;-moz-osx-font-smoothing:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-user-select:none;user-select:none;cursor:pointer}._link_us7f0_74{flex-grow:1;display:flex;align-items:center}
+._item_i2afq_1{position:relative;width:100%;display:flex;align-items:center;justify-content:stretch}._item_i2afq_1[aria-selected=true]{background-color:var(--theme-background-subtle);outline:2px solid}._item_i2afq_1[aria-disabled=true]{pointer-events:none}._item_i2afq_1[data-shadow=xs]{box-shadow:var(--ds-shadow-xs)}._item_i2afq_1[data-size=xs]{min-height:36px}._item_i2afq_1[data-size=sm]{min-height:44px}._item_i2afq_1[data-size=md]{min-height:56px}._item_i2afq_1[data-size=lg]{min-height:64px}._item_i2afq_1[data-size=xl]{min-height:72px}._item_i2afq_1{background-color:var(--theme-background-default)}._item_i2afq_1:not([aria-disabled=true]):hover{outline:2px solid var(--theme-border-strong);z-index:2}._item_i2afq_1:not([aria-disabled=true]):hover strong,._item_i2afq_1:not([aria-disabled=true]):hover h2{text-decoration:underline}._item_i2afq_1[data-active=true],._item_i2afq_1[data-color=accent]{background-color:var(--theme-surface-default)}._item_i2afq_1[data-color=accent]:hover{background-color:var(--theme-surface-hover)}._link_i2afq_78{align-self:stretch;padding:0;border:0;background-color:transparent;color:inherit;font:inherit;text-align:inherit;text-decoration:none;line-height:normal;-webkit-font-smoothing:inherit;-moz-osx-font-smoothing:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-user-select:none;user-select:none;cursor:pointer}._link_i2afq_78{flex-grow:1;display:flex;align-items:center}

package/dist/assets/ListItemLabel.css

@@ -1 +1 @@
-._label_1aaut_3{flex-grow:1;display:flex}._label_1aaut_3[data-size=xs]{align-items:center;column-gap:.25em;font-size:.875rem}._label_1aaut_3[data-size=sm]{align-items:center;column-gap:.25rem}._label_1aaut_3[data-size=md],._label_1aaut_3[data-size=lg],._label_1aaut_3[data-size=xl]{flex-direction:column}._title_1aaut_33{font-weight:600;margin:0}._title_1aaut_33[data-size=lg]{font-size:1.125rem}._title_1aaut_33[data-size=xl]{font-size:1.25rem}._description_1aaut_46{color:var(--theme-text-subtle);margin:0}._description_1aaut_46[data-size=md],._description_1aaut_46[data-size=lg],._description_1aaut_46[data-size=xl]{font-size:.875em}
+._label_7jiaq_3{flex-grow:1;display:flex}._label_7jiaq_3[data-size=xs]{align-items:center;column-gap:.25em}._label_7jiaq_3[data-size=sm]{align-items:center;column-gap:.25rem}._label_7jiaq_3[data-size=md],._label_7jiaq_3[data-size=lg],._label_7jiaq_3[data-size=xl]{align-items:flex-start;flex-direction:column;row-gap:.125rem}._title_7jiaq_38{font-weight:600;line-height:1.25;margin:0}._description_7jiaq_44{font-weight:400;line-height:1.25;color:var(--theme-text-subtle);margin:0}._title_7jiaq_38[data-size=xs],._description_7jiaq_44[data-size=xs]{font-size:.875rem}._title_7jiaq_38[data-size=sm],._description_7jiaq_44[data-size=sm],._title_7jiaq_38[data-size=md]{font-size:1rem}._title_7jiaq_38[data-size=lg]{font-size:1.125rem}._description_7jiaq_44[data-size=md],._description_7jiaq_44[data-size=lg]{font-size:.875em}

package/dist/assets/MenuItemBase.css

@@ -1 +1 @@
-._item_16huj_1{padding:0;border:0;color:inherit;font:inherit;text-align:inherit;text-decoration:none;line-height:normal;-webkit-font-smoothing:inherit;-moz-osx-font-smoothing:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-user-select:none;user-select:none;cursor:pointer;position:relative;width:100%;display:flex;align-items:center;column-gap:.25rem;margin:.5rem 0}._item_16huj_1[aria-disabled=true]{opacity:.5;pointer-events:none}._item_16huj_1[data-size=sm]{min-height:44px}._content_16huj_36{display:flex;width:100%;align-items:center;column-gap:6px;padding:6px}._action_16huj_44{display:flex;justify-content:center;align-items:center;padding:10px}._linkText_16huj_51{font-size:.875rem;white-space:nowrap}._linkIcon_16huj_56{font-size:1.5rem}._item_16huj_1{background-color:transparent;color:var(--theme-text-default)}._item_16huj_1[aria-selected=true]{background-color:var(--theme-background-default)}._item_16huj_1:hover,._item_16huj_1:active{background-color:var(--theme-surface-hover)}._media_16huj_76[data-color=subtle]{background-color:var(--theme-background-default);color:var(--theme-text-default)}._media_16huj_76[data-color=strong]{background-color:var(--theme-base-default);color:var(--theme-background-default)}
+._item_y1gbn_1{padding:0;border:0;color:inherit;font:inherit;text-align:inherit;text-decoration:none;line-height:normal;-webkit-font-smoothing:inherit;-moz-osx-font-smoothing:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-user-select:none;user-select:none;cursor:pointer;position:relative;width:100%;display:flex;align-items:center;column-gap:.25rem;margin:.5rem 0;border-radius:2px}._item_y1gbn_1[aria-disabled=true]{opacity:.5;pointer-events:none}._item_y1gbn_1[data-size=sm]{min-height:44px}._content_y1gbn_37{display:flex;width:100%;align-items:center;column-gap:6px;padding:6px}._action_y1gbn_45{display:flex;justify-content:center;align-items:center;padding:10px}._linkText_y1gbn_52{font-size:.875rem;white-space:nowrap}._linkIcon_y1gbn_57{font-size:1.5rem}._item_y1gbn_1{background-color:transparent;color:var(--theme-text-default)}._item_y1gbn_1[aria-selected=true]{background-color:var(--theme-background-default)}._item_y1gbn_1:hover,._item_y1gbn_1:active{background-color:var(--theme-surface-hover)}._media_y1gbn_77[data-color=subtle]{background-color:var(--theme-background-default);color:var(--theme-text-default)}._media_y1gbn_77[data-color=strong]{background-color:var(--theme-base-default);color:var(--theme-background-default)}

package/dist/assets/MenuSearch.css

@@ -1 +1 @@
-._input_73dww_1{width:100%;height:2.75rem;font-size:.875rem;line-height:1rem;font-weight:400;padding:9px;border-radius:2px;border:1px solid;border-color:var(--theme-border-default)}._button_73dww_13[aria-selected=true]{background-color:var(--theme-background-subtle);color:var(--theme-text-default)}._close_73dww_18{padding:6px 0}._icon_73dww_22{border-left:1px solid;border-color:var(--theme-background-subtle);display:flex;align-items:center;justify-content:center;font-size:1.25rem;padding:0 6px}
+._field_mo7y9_1{position:relative}._icon_mo7y9_5{position:absolute;top:0;left:0;font-size:1.25rem;color:var(--theme-text-subtle);margin:12px 10px}._input_mo7y9_14{width:100%;height:2.75rem;font-size:.875rem;line-height:1rem;font-weight:400;padding:9px 36px;border-radius:2px;border:1px solid;border-color:var(--theme-border-default)}._input_mo7y9_14[type=search]::-webkit-search-decoration,._input_mo7y9_14[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;-moz-appearance:none;appearance:none}._clear_mo7y9_31{position:absolute;top:0;right:0;margin:12px 10px;border-radius:100%;width:1.25rem;height:1.25rem}

package/dist/assets/Skeleton.css

@@ -0,0 +1 @@
+._skelaton_10sb8_1{background-color:#ccc;animation:_fade_10sb8_1 1.5s infinite reverse;background-size:200%;color:transparent}._skelaton_10sb8_1[data-loading=true]>*{opacity:0}._skelaton_10sb8_1[data-variant=circle]{border-radius:50%}._skelaton_10sb8_1[data-variant=text]{border-radius:.125rem}@keyframes _fade_10sb8_1{0%{opacity:.5}50%{opacity:1}to{opacity:.5}}

package/dist/assets/ToolbarSearch.css

@@ -1 +1 @@
-._input_cwjz7_1{font-size:.875rem;line-height:1rem;font-weight:600;padding:9px;border-radius:2px;border:1px solid;border-color:var(--theme-border-default)}._button_cwjz7_11[aria-selected=true]{background-color:var(--theme-background-subtle);color:var(--theme-text-default)}._close_cwjz7_16{padding:6px 0}._icon_cwjz7_20{border-left:1px solid;border-color:var(--theme-background-subtle);display:flex;align-items:center;justify-content:center;font-size:1.25rem;padding:0 6px}
+._field_dvezx_1{position:relative}._icon_dvezx_5{position:absolute;top:0;left:0;font-size:1.25rem;color:var(--theme-text-subtle);margin:8px}._input_dvezx_14{width:100%;font-size:.875rem;line-height:1rem;font-weight:500;padding:9px 30px;border-radius:2px;border:1px solid;border-color:var(--theme-border-default)}._input_dvezx_14[type=search]::-webkit-search-decoration,._input_dvezx_14[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;-moz-appearance:none;appearance:none}._clear_dvezx_30{position:absolute;top:0;right:0;margin:8px;border-radius:100%;width:1.25rem;height:1.25rem}

package/dist/components/Dialog/DialogActions.d.ts

@@ -1,10 +1,9 @@
-import { MouseEventHandler } from 'react';
 export type DialogButtonPriority = 'primary' | 'secondary' | 'tertiary';
 export interface DialogActionButtonProps {
     id: string;
     priority: DialogButtonPriority;
     label?: string;
-    onClick?: MouseEventHandler;
+    onClick?: () => void;
     loading?: boolean;
 }
 export interface DialogActionsProps {

package/dist/components/Dialog/DialogBorder.d.ts

@@ -1,9 +1,10 @@
 import { ReactNode } from 'react';
 import { DialogListItemSize } from './DialogListItem.tsx';
 export interface DialogBorderProps {
+    loading?: boolean;
     seen?: boolean;
     size?: DialogListItemSize;
     className?: string;
     children?: ReactNode;
 }
-export declare const DialogBorder: ({ seen, size, className, children }: DialogBorderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DialogBorder: ({ loading, seen, size, className, children }: DialogBorderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Dialog/DialogBorder.js

@@ -1,8 +1,8 @@
-import { jsx as s } from "react/jsx-runtime";
-import { c as d } from "../../index-L8X2o7IH.js";
-import '../../assets/DialogBorder.css';const a = "_border_tdijc_1", c = {
-  border: a
-}, n = ({ seen: r = !0, size: o = "lg", className: e, children: t }) => /* @__PURE__ */ s("div", { className: d(c.border, e), "data-size": o, "data-seen": r, children: t });
+import { jsx as d } from "react/jsx-runtime";
+import { c as s } from "../../index-L8X2o7IH.js";
+import '../../assets/DialogBorder.css';const c = "_border_12m8d_1", i = {
+  border: c
+}, l = ({ loading: r, seen: o = !0, size: e = "lg", className: t, children: a }) => /* @__PURE__ */ d("div", { className: s(i.border, t), "data-loading": r, "data-size": e, "data-seen": o, children: a });
 export {
-  n as DialogBorder
+  l as DialogBorder
 };

package/dist/components/Dialog/DialogHeadings.d.ts

@@ -18,6 +18,7 @@ export interface DialogHeadingsProps {
     sender?: DialogSenderProps;
     /** Recipient */
     recipient?: DialogRecipientProps;
+    loading?: boolean;
 }
 /** Dialog headings for sender and recipient. Should present an avatar for the sender. */
-export declare const DialogHeadings: ({ grouped, size, sender, recipient, }: DialogHeadingsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DialogHeadings: ({ loading, grouped, size, sender, recipient, }: DialogHeadingsProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Dialog/DialogHeadings.js

@@ -1,12 +1,13 @@
-import { jsxs as c, jsx as m } from "react/jsx-runtime";
-import { Avatar as l } from "../Avatar/Avatar.js";
-import { AvatarGroup as o } from "../Avatar/AvatarGroup.js";
-import '../../assets/DialogHeadings.css';const i = "_headings_fci15_1", p = "_text_fci15_21", x = "_sender_fci15_26", d = "_recipient_fci15_31", s = {
-  headings: i,
-  text: p,
-  sender: x,
-  recipient: d
-}, t = {
+import { jsxs as r, jsx as a } from "react/jsx-runtime";
+import { Avatar as i } from "../Avatar/Avatar.js";
+import { AvatarGroup as p } from "../Avatar/AvatarGroup.js";
+import { Skeleton as l } from "../Skeleton/Skeleton.js";
+import '../../assets/DialogHeadings.css';const d = "_headings_qkf0g_1", g = "_text_qkf0g_21", h = "_sender_qkf0g_28", x = "_recipient_qkf0g_33", s = {
+  headings: d,
+  text: g,
+  sender: h,
+  recipient: x
+}, e = {
   avatar: {
     xs: "xs",
     sm: "xs",
@@ -14,37 +15,41 @@ import '../../assets/DialogHeadings.css';const i = "_headings_fci15_1", p = "_te
     lg: "xs",
     xl: "lg"
   }
-}, v = ({
-  grouped: r,
-  size: n = "lg",
-  sender: a = { type: "company", name: "Sender" },
-  recipient: e = { type: "person", name: "Recipient" }
-}) => /* @__PURE__ */ c("div", { className: s.headings, "data-size": n, children: [
-  r ? /* @__PURE__ */ m(
-    o,
+}, N = ({
+  loading: c,
+  grouped: o,
+  size: m = "lg",
+  sender: t = { type: "company", name: "Sender" },
+  recipient: n = { type: "person", name: "Recipient" }
+}) => /* @__PURE__ */ r("div", { className: s.headings, "data-size": m, children: [
+  /* @__PURE__ */ a(l, { variant: "circle", className: s.avatar, loading: c, children: o ? /* @__PURE__ */ a(
+    p,
     {
-      items: [{ ...a, type: "company" }, e],
-      size: t == null ? void 0 : t.avatar[n],
+      items: [{ ...t, type: "company" }, n],
+      size: e == null ? void 0 : e.avatar[m],
       className: s.avatar
     }
-  ) : /* @__PURE__ */ m(
-    l,
+  ) : /* @__PURE__ */ a(
+    i,
     {
       type: "company",
-      imageUrl: a == null ? void 0 : a.imageUrl,
-      name: a.name,
-      size: t == null ? void 0 : t.avatar[n],
+      imageUrl: t == null ? void 0 : t.imageUrl,
+      name: t.name,
+      size: e == null ? void 0 : e.avatar[m],
       className: s.avatar
     }
-  ),
-  /* @__PURE__ */ c("span", { "data-size": n, className: s.text, children: [
-    /* @__PURE__ */ m("span", { className: s.sender, children: a.name }),
-    (e == null ? void 0 : e.name) && /* @__PURE__ */ c("span", { className: s.recipient, children: [
-      " til ",
-      /* @__PURE__ */ m("span", { children: e.name })
-    ] })
+  ) }),
+  /* @__PURE__ */ r("span", { "data-size": m, className: s.text, children: [
+    /* @__PURE__ */ r("span", { className: s.sender, children: [
+      " ",
+      /* @__PURE__ */ a(l, { loading: c, children: t.name })
+    ] }),
+    (n == null ? void 0 : n.name) && /* @__PURE__ */ a("span", { className: s.recipient, children: /* @__PURE__ */ r(l, { loading: c, children: [
+      /* @__PURE__ */ a("span", { children: "til" }),
+      /* @__PURE__ */ a("span", { children: n.name })
+    ] }) })
   ] })
 ] });
 export {
-  v as DialogHeadings
+  N as DialogHeadings
 };

package/dist/components/Dialog/DialogListItem.d.ts

@@ -10,6 +10,8 @@ export type DialogListItemVariant = 'neutral' | 'draft' | 'trashed' | 'archived'
 export interface DialogListItemProps extends ListItemBaseProps {
     /** Dialog title */
     title: string;
+    /** Dialog is loading */
+    loading?: boolean;
     /** Render as */
     as?: ElementType;
     /** Size */
@@ -68,4 +70,4 @@ export interface DialogListItemProps extends ListItemBaseProps {
  * summary, sender, and receiver.
  * to mark the item as checked/unchecked and can visually indicate if it is unread.
  */
-export declare const DialogListItem: ({ size, variant, select, status, sender, recipient, grouped, updatedAt, updatedAtLabel, archivedAt, archivedAtLabel, trashedAt, trashedAtLabel, label, dueAt, dueAtLabel, seen, seenBy, touchedBy, attachmentsCount, title, summary, ...rest }: DialogListItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DialogListItem: ({ size, variant, loading, select, status, sender, recipient, grouped, updatedAt, updatedAtLabel, archivedAt, archivedAtLabel, trashedAt, trashedAtLabel, label, dueAt, dueAtLabel, seen, seenBy, touchedBy, attachmentsCount, title, summary, ...rest }: DialogListItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Dialog/DialogListItem.js

@@ -1,89 +1,93 @@
-import { jsx as r, jsxs as m } from "react/jsx-runtime";
-import { ListItemBase as p } from "../List/ListItemBase.js";
+import { jsx as t, jsxs as e } from "react/jsx-runtime";
+import { ListItemBase as h } from "../List/ListItemBase.js";
 import "../../index-L8X2o7IH.js";
-import { ListItemLabel as M } from "../List/ListItemLabel.js";
 import "react";
 import "../Icon/SvgIcon.js";
-import { DialogBorder as h } from "./DialogBorder.js";
-import { DialogMetadata as g } from "./DialogMetadata.js";
-import { DialogHeaderBase as S } from "./DialogHeaderBase.js";
-import { DialogHeadings as V } from "./DialogHeadings.js";
-import { DialogTitle as k } from "./DialogTitle.js";
-import { DialogTouchedBy as q } from "./DialogTouchedBy.js";
-import { DialogSelect as w } from "./DialogSelect.js";
+import { ListItemLabel as M } from "../List/ListItemLabel.js";
+import { DialogBorder as d } from "./DialogBorder.js";
+import { DialogMetadata as D } from "./DialogMetadata.js";
+import { DialogHeaderBase as V } from "./DialogHeaderBase.js";
+import { DialogHeadings as k } from "./DialogHeadings.js";
+import { DialogTitle as q } from "./DialogTitle.js";
+import { DialogTouchedBy as w } from "./DialogTouchedBy.js";
+import { DialogSelect as C } from "./DialogSelect.js";
 import "../RootProvider/RootProvider.js";
-import '../../assets/DialogListItem.css';const C = "_item_vo44o_1", E = "_select_vo44o_20", F = "_summary_vo44o_27", G = "_footer_vo44o_48", J = "_touchedBy_vo44o_56", K = "_border_vo44o_65", t = {
-  item: C,
-  select: E,
-  summary: F,
-  footer: G,
-  touchedBy: J,
-  border: K
-}, to = ({
-  size: o = "lg",
+import { DialogSummary as E } from "./DialogSummary.js";
+import '../../assets/DialogListItem.css';const F = "_item_v64fv_1", G = "_select_v64fv_16", J = "_summary_v64fv_23", K = "_footer_v64fv_44", O = "_touchedBy_v64fv_52", P = "_border_v64fv_61", m = {
+  item: F,
+  select: G,
+  summary: J,
+  footer: K,
+  touchedBy: O,
+  border: P
+}, cr = ({
+  size: r = "lg",
   variant: u = "neutral",
-  select: a,
+  loading: o,
+  select: s,
   status: y,
-  sender: D,
+  sender: B,
   recipient: N,
-  grouped: v,
-  updatedAt: i,
-  updatedAtLabel: s,
-  archivedAt: c,
-  archivedAtLabel: B,
-  trashedAt: l,
-  trashedAtLabel: b,
-  label: x,
-  dueAt: I,
-  dueAtLabel: L,
-  seen: e = !1,
-  seenBy: j,
-  touchedBy: n,
-  attachmentsCount: H,
-  title: d,
-  summary: _,
-  ...f
+  grouped: b,
+  updatedAt: a,
+  updatedAtLabel: i,
+  archivedAt: l,
+  archivedAtLabel: x,
+  trashedAt: f,
+  trashedAtLabel: I,
+  label: L,
+  dueAt: j,
+  dueAtLabel: H,
+  seen: c = !1,
+  seenBy: S,
+  touchedBy: _,
+  attachmentsCount: T,
+  title: p,
+  summary: n,
+  ...v
 }) => {
-  const T = l ? "trashed" : c ? "archived" : u;
-  return o === "xs" || o === "sm" ? /* @__PURE__ */ r(p, { ...f, size: o, className: t.item, children: /* @__PURE__ */ m(h, { className: t.border, size: o, seen: e, children: [
-    /* @__PURE__ */ r(M, { size: o, title: d, description: _ }),
-    /* @__PURE__ */ r(g, { updatedAt: i, updatedAtLabel: s })
-  ] }) }) : /* @__PURE__ */ r(
-    p,
+  const g = f ? "trashed" : l ? "archived" : u;
+  return r === "xs" || r === "sm" ? /* @__PURE__ */ t(h, { ...v, loading: o, size: r, className: m.item, children: /* @__PURE__ */ e(d, { className: m.border, size: r, seen: c, loading: o, children: [
+    /* @__PURE__ */ t(M, { loading: o, size: r, title: p, description: n }),
+    /* @__PURE__ */ t(D, { loading: o, updatedAt: a, updatedAtLabel: i })
+  ] }) }) : /* @__PURE__ */ t(
+    h,
     {
-      ...f,
-      size: o,
-      className: t.item,
-      controls: a && /* @__PURE__ */ r(w, { className: t.select, ...a }),
-      children: /* @__PURE__ */ m(h, { className: t.border, size: o, seen: e, children: [
-        /* @__PURE__ */ m(S, { size: o, children: [
-          /* @__PURE__ */ r(k, { size: o, variant: T, label: x, seen: e, children: d }),
-          /* @__PURE__ */ r(V, { size: o, grouped: v, sender: D, recipient: N })
+      ...v,
+      loading: o,
+      size: r,
+      className: m.item,
+      controls: s && /* @__PURE__ */ t(C, { className: m.select, ...s }),
+      children: /* @__PURE__ */ e(d, { className: m.border, size: r, seen: c, loading: o, children: [
+        /* @__PURE__ */ e(V, { size: r, children: [
+          /* @__PURE__ */ t(q, { loading: o, size: r, variant: g, label: L, seen: c, children: p }),
+          /* @__PURE__ */ t(k, { loading: o, size: r, grouped: b, sender: B, recipient: N })
         ] }),
-        /* @__PURE__ */ r("p", { "data-size": o, className: t.summary, children: _ }),
-        /* @__PURE__ */ m("footer", { "data-size": o, className: t.footer, children: [
-          /* @__PURE__ */ r(
-            g,
+        /* @__PURE__ */ t(E, { loading: o, size: r, children: n }),
+        /* @__PURE__ */ e("footer", { "data-size": r, className: m.footer, children: [
+          /* @__PURE__ */ t(
+            D,
             {
+              loading: o,
               status: y,
-              updatedAt: i,
-              updatedAtLabel: s,
-              archivedAt: c,
-              archivedAtLabel: B,
-              trashedAt: l,
-              trashedAtLabel: b,
-              dueAt: I,
-              dueAtLabel: L,
-              seenBy: j,
-              attachmentsCount: H
+              updatedAt: a,
+              updatedAtLabel: i,
+              archivedAt: l,
+              archivedAtLabel: x,
+              trashedAt: f,
+              trashedAtLabel: I,
+              dueAt: j,
+              dueAtLabel: H,
+              seenBy: S,
+              attachmentsCount: T
             }
           ),
-          n && /* @__PURE__ */ r(q, { size: "xs", touchedBy: n, className: t.touchedBy })
+          _ && /* @__PURE__ */ t(w, { loading: o, size: "xs", touchedBy: _, className: m.touchedBy })
         ] })
       ] })
     }
   );
 };
 export {
-  to as DialogListItem
+  cr as DialogListItem
 };

package/dist/components/Dialog/DialogListItem.stories.js

@@ -57,10 +57,15 @@ const c = (b = Object.keys(g)) == null ? void 0 : b.map((t) => ({
     updatedAtLabel: "25. november 2024 kl 15.30",
     status: {}
   }
-}, C = (t) => /* @__PURE__ */ e(s, { children: c == null ? void 0 : c.map((l) => /* @__PURE__ */ i(u, { children: [
-  /* @__PURE__ */ e(n, { ...t, status: l }),
-  /* @__PURE__ */ e(r, { children: l == null ? void 0 : l.value })
-] }, l == null ? void 0 : l.value)) }), E = (t) => /* @__PURE__ */ i(s, { children: [
+}, C = (t) => /* @__PURE__ */ e(s, { children: c == null ? void 0 : c.map((a) => /* @__PURE__ */ i(u, { children: [
+  /* @__PURE__ */ e(n, { ...t, status: a }),
+  /* @__PURE__ */ e(r, { children: a == null ? void 0 : a.value })
+] }, a == null ? void 0 : a.value)) }), E = (t) => /* @__PURE__ */ i(s, { children: [
+  /* @__PURE__ */ e(n, { ...t, loading: !0, label: "Ulest" }),
+  /* @__PURE__ */ e(r, { children: "Loading" }),
+  /* @__PURE__ */ e(n, { ...t, label: "Ulest" }),
+  /* @__PURE__ */ e(r, { children: "Loaded" })
+] }), I = (t) => /* @__PURE__ */ i(s, { children: [
   /* @__PURE__ */ e(n, { ...t, label: "Ulest", status: { value: "requires-attention", label: "Krever handling" } }),
   /* @__PURE__ */ e(r, { children: "Dialog is new and has not been seen by anybody" }),
   /* @__PURE__ */ e(
@@ -101,7 +106,7 @@ const c = (b = Object.keys(g)) == null ? void 0 : b.map((t) => ({
     }
   ),
   /* @__PURE__ */ e(r, { children: "Dialog has been moved to trash" })
-] }), I = (t) => /* @__PURE__ */ i(s, { children: [
+] }), q = (t) => /* @__PURE__ */ i(s, { children: [
   /* @__PURE__ */ e(
     n,
     {
@@ -112,10 +117,10 @@ const c = (b = Object.keys(g)) == null ? void 0 : b.map((t) => ({
     }
   ),
   /* @__PURE__ */ e(r, { children: "Dialog requires action wihtin a spesific due date." })
-] }), q = (t) => /* @__PURE__ */ i(s, { children: [
+] }), T = (t) => /* @__PURE__ */ i(s, { children: [
   /* @__PURE__ */ e(n, { ...t, attachmentsCount: 2 }),
   /* @__PURE__ */ e(r, { children: "Dialog has attachments." })
-] }), T = (t) => /* @__PURE__ */ i(s, { children: [
+] }), w = (t) => /* @__PURE__ */ i(s, { children: [
   /* @__PURE__ */ e(n, { ...t, seen: !0, seenBy: { seenByEndUser: !0, label: "Sett av deg" } }),
   /* @__PURE__ */ e(r, { children: "Seen by end user. Dialog is marked as seen." }),
   /* @__PURE__ */ e(n, { ...t, seenBy: { seenByOthersCount: 4, label: "Sett av 4" } }),
@@ -129,7 +134,7 @@ const c = (b = Object.keys(g)) == null ? void 0 : b.map((t) => ({
     }
   ),
   /* @__PURE__ */ e(r, { children: "Seen by end user and others. Dialog is marked as seen." })
-] }), w = (t) => /* @__PURE__ */ i(s, { children: [
+] }), x = (t) => /* @__PURE__ */ i(s, { children: [
   /* @__PURE__ */ e(n, { ...t, touchedBy: [{ name: "Kari Nordmann" }] }),
   /* @__PURE__ */ e(r, { children: "Dialog has been touched by a single actor." }),
   /* @__PURE__ */ e(n, { ...t, touchedBy: [{ name: "Kari Nordmann" }, { name: "Ola Nordmann" }] }),
@@ -142,7 +147,7 @@ const c = (b = Object.keys(g)) == null ? void 0 : b.map((t) => ({
     }
   ),
   /* @__PURE__ */ e(r, { children: "Dialog has been touched by a multiple actors." })
-] }), x = (t) => /* @__PURE__ */ i(s, { children: [
+] }), M = (t) => /* @__PURE__ */ i(s, { children: [
   /* @__PURE__ */ e(
     n,
     {
@@ -159,9 +164,9 @@ const c = (b = Object.keys(g)) == null ? void 0 : b.map((t) => ({
     }
   ),
   /* @__PURE__ */ e(r, { children: "Long summary" })
-] }), M = (t) => {
+] }), P = (t) => {
   var h;
-  const [l, p] = v({
+  const [a, p] = v({
     1: {
       id: "1",
       title: "Item 1",
@@ -177,44 +182,45 @@ const c = (b = Object.keys(g)) == null ? void 0 : b.map((t) => ({
       title: "Item 2",
       selected: !1
     }
-  }), m = ({ id: a }) => {
+  }), m = ({ id: l }) => {
     p((d) => ({
       ...d,
-      [a]: {
-        ...d[a],
-        selected: !d[a].selected
+      [l]: {
+        ...d[l],
+        selected: !d[l].selected
       }
     }));
   };
-  return /* @__PURE__ */ e(s, { children: (h = Object.values(l)) == null ? void 0 : h.map((a) => /* @__PURE__ */ i(u, { children: [
+  return /* @__PURE__ */ e(s, { children: (h = Object.values(a)) == null ? void 0 : h.map((l) => /* @__PURE__ */ i(u, { children: [
     /* @__PURE__ */ e(
       n,
       {
         ...t,
-        title: a.title,
-        onClick: a.selected ? () => m(a) : null,
-        selected: a.selected,
-        select: { checked: a == null ? void 0 : a.selected, onChange: () => m(a) }
+        title: l.title,
+        onClick: l.selected ? () => m(l) : null,
+        selected: l.selected,
+        select: { checked: l == null ? void 0 : l.selected, onChange: () => m(l) }
       }
     ),
     /* @__PURE__ */ i(r, { children: [
       "selected:",
-      a.selected ? "true" : "false"
+      l.selected ? "true" : "false"
     ] })
-  ] }, a == null ? void 0 : a.id)) });
-}, P = (t) => /* @__PURE__ */ e(s, { children: o == null ? void 0 : o.map((l) => /* @__PURE__ */ i(u, { children: [
-  /* @__PURE__ */ e(n, { ...t, size: l, status: { value: "in-progress", label: "Under arbeid" } }),
-  /* @__PURE__ */ e(r, { children: l })
-] }, l)) });
+  ] }, l == null ? void 0 : l.id)) });
+}, F = (t) => /* @__PURE__ */ e(s, { children: o == null ? void 0 : o.map((a) => /* @__PURE__ */ i(u, { children: [
+  /* @__PURE__ */ e(n, { ...t, size: a, status: { value: "in-progress", label: "Under arbeid" } }),
+  /* @__PURE__ */ e(r, { children: a })
+] }, a)) });
 export {
-  q as Attachments,
-  I as DueAt,
-  T as SeenBy,
-  M as Selectable,
-  P as Sizes,
+  T as Attachments,
+  q as DueAt,
+  E as Loading,
+  w as SeenBy,
+  P as Selectable,
+  F as Sizes,
   C as Statuses,
-  x as TextLength,
-  w as TouchedBy,
-  E as Variants,
+  M as TextLength,
+  x as TouchedBy,
+  I as Variants,
   j as default
 };

package/dist/components/Dialog/DialogMetadata.d.ts

@@ -1,6 +1,8 @@
 import { DialogSeenByProps } from './DialogSeenBy';
 import { DialogStatusProps } from './DialogStatus';
 export type DialogMetadataProps = {
+    /** Metadata is loading */
+    loading?: boolean;
     /** Dialog status */
     status?: DialogStatusProps;
     /** Updated datetime */
@@ -27,4 +29,4 @@ export type DialogMetadataProps = {
 /**
  * Metadata for a dialog in list view.
  */
-export declare const DialogMetadata: ({ status, updatedAt, updatedAtLabel, dueAt, dueAtLabel, trashedAt, trashedAtLabel, archivedAt, archivedAtLabel, seenBy, attachmentsCount, }: DialogMetadataProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DialogMetadata: ({ loading, status, updatedAt, updatedAtLabel, dueAt, dueAtLabel, trashedAt, trashedAtLabel, archivedAt, archivedAtLabel, seenBy, attachmentsCount, }: DialogMetadataProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Dialog/DialogMetadata.js

@@ -1,30 +1,31 @@
-import { jsxs as z, jsx as i } from "react/jsx-runtime";
-import { MetaBase as f } from "../Meta/MetaBase.js";
-import { MetaItem as d } from "../Meta/MetaItem.js";
+import { jsxs as M, jsx as e } from "react/jsx-runtime";
+import { MetaBase as a } from "../Meta/MetaBase.js";
+import { MetaItem as D } from "../Meta/MetaItem.js";
 import "../../index-L8X2o7IH.js";
 import "../Icon/SvgIcon.js";
-import { MetaTimestamp as e } from "../Meta/MetaTimestamp.js";
-import { DialogSeenBy as h } from "./DialogSeenBy.js";
-import { DialogStatus as M } from "./DialogStatus.js";
-const q = ({
-  status: o,
-  updatedAt: r,
-  updatedAtLabel: l,
-  dueAt: m,
-  dueAtLabel: s,
-  trashedAt: t,
-  trashedAtLabel: c,
-  archivedAt: p,
-  archivedAtLabel: x,
-  seenBy: n,
-  attachmentsCount: a = 0
-}) => /* @__PURE__ */ z(f, { size: "xs", children: [
-  o && /* @__PURE__ */ i(M, { size: "xs", ...o }),
-  r && /* @__PURE__ */ i(e, { datetime: r, size: "xs", children: l }),
-  m && s && /* @__PURE__ */ i(e, { datetime: m, size: "xs", icon: "clock-dashed", children: s }),
-  a > 0 && /* @__PURE__ */ i(d, { size: "xs", icon: "paperclip", children: a }),
-  t && c && /* @__PURE__ */ i(e, { datetime: t, size: "xs", icon: "trash", children: c }) || p && x && /* @__PURE__ */ i(e, { datetime: p, size: "xs", icon: "archive", children: x }) || n && /* @__PURE__ */ i(h, { size: "xs", ...n })
+import { MetaTimestamp as r } from "../Meta/MetaTimestamp.js";
+import { DialogSeenBy as j } from "./DialogSeenBy.js";
+import { DialogStatus as l } from "./DialogStatus.js";
+const E = ({
+  loading: i,
+  status: m,
+  updatedAt: s,
+  updatedAtLabel: n,
+  dueAt: o,
+  dueAtLabel: t,
+  trashedAt: c,
+  trashedAtLabel: p,
+  archivedAt: x,
+  archivedAtLabel: z,
+  seenBy: f,
+  attachmentsCount: h = 0
+}) => /* @__PURE__ */ M(a, { size: "xs", children: [
+  m && /* @__PURE__ */ e(l, { loading: i, size: "xs", ...m }),
+  s && /* @__PURE__ */ e(r, { loading: i, datetime: s, size: "xs", children: n }),
+  o && t && /* @__PURE__ */ e(r, { loading: i, datetime: o, size: "xs", icon: "clock-dashed", children: t }),
+  h > 0 && /* @__PURE__ */ e(D, { loading: i, size: "xs", icon: "paperclip", children: h }),
+  c && p && /* @__PURE__ */ e(r, { loading: i, datetime: c, size: "xs", icon: "trash", children: p }) || x && z && /* @__PURE__ */ e(r, { loading: i, datetime: x, size: "xs", icon: "archive", children: z }) || !i && f && /* @__PURE__ */ e(j, { size: "xs", ...f })
 ] });
 export {
-  q as DialogMetadata
+  E as DialogMetadata
 };