@altinn/altinn-components 0.42.6 → 0.43.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/assets/DialogActions.css +1 -1
- package/dist/components/Dialog/DialogActions.js +6 -6
- package/dist/components/Dialog/DialogListItem.js +63 -61
- package/dist/components/Dialog/DialogMetadata.js +83 -81
- package/dist/types/lib/components/Dialog/DialogList.stories.d.ts +1 -0
- package/dist/types/lib/components/Dialog/DialogListItem.d.ts +1 -1
- package/dist/types/lib/components/Dialog/DialogMetadata.d.ts +3 -1
- package/dist/types/lib/components/Dialog/DialogMetadata.stories.d.ts +2 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._action_1n930_1{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}._comboButton_1n930_8{position:relative}
|
|
@@ -9,11 +9,11 @@ import { DropdownBase as b } from "../Dropdown/DropdownBase.js";
|
|
|
9
9
|
import { Menu as x } from "../Menu/Menu.js";
|
|
10
10
|
import "../Snackbar/useSnackbar.js";
|
|
11
11
|
import { S as B, a as _ } from "../../ChevronUp-_BBfEirx.js";
|
|
12
|
-
import '../../assets/DialogActions.css';const k = "
|
|
12
|
+
import '../../assets/DialogActions.css';const k = "_action_1n930_1", I = "_comboButton_1n930_8", a = {
|
|
13
13
|
action: k,
|
|
14
14
|
comboButton: I
|
|
15
|
-
}, T = ({ items: c, maxItems: s = 2, id: l = "dialog-actions", expandAltLabel:
|
|
16
|
-
const { currentId:
|
|
15
|
+
}, T = ({ items: c, maxItems: s = 2, id: l = "dialog-actions", expandAltLabel: d }) => {
|
|
16
|
+
const { currentId: m, closeAll: p, toggleId: u } = v(), i = m === l, r = g(() => (c || []).filter((n) => !n.hidden).sort((n, o) => {
|
|
17
17
|
const e = ["primary", "secondary", "tertiary"];
|
|
18
18
|
return e.indexOf(n == null ? void 0 : n.priority) - e.indexOf(o == null ? void 0 : o.priority);
|
|
19
19
|
}), [c]);
|
|
@@ -27,7 +27,7 @@ import '../../assets/DialogActions.css';const k = "_action_m3crc_1", I = "_combo
|
|
|
27
27
|
group: o.priority,
|
|
28
28
|
hidden: o.hidden
|
|
29
29
|
}));
|
|
30
|
-
return /* @__PURE__ */ f("section", { className:
|
|
30
|
+
return /* @__PURE__ */ f("section", { className: a.comboButton, children: [
|
|
31
31
|
/* @__PURE__ */ t(
|
|
32
32
|
C,
|
|
33
33
|
{
|
|
@@ -37,14 +37,14 @@ import '../../assets/DialogActions.css';const k = "_action_m3crc_1", I = "_combo
|
|
|
37
37
|
onIconClick: () => u(l),
|
|
38
38
|
onLabelClick: r[0].onClick,
|
|
39
39
|
ariaLabel: i ? "chevron up icon" : "chevron down icon",
|
|
40
|
-
iconAltText:
|
|
40
|
+
iconAltText: d,
|
|
41
41
|
children: r[0].label
|
|
42
42
|
}
|
|
43
43
|
),
|
|
44
44
|
i && /* @__PURE__ */ t(b, { open: i, onClose: p, children: /* @__PURE__ */ t(x, { items: n }) })
|
|
45
45
|
] });
|
|
46
46
|
}
|
|
47
|
-
return /* @__PURE__ */ t("section", { className:
|
|
47
|
+
return /* @__PURE__ */ t("section", { className: a.action, children: r.map((n, o) => {
|
|
48
48
|
const { priority: e, id: w, ...h } = n;
|
|
49
49
|
return /* @__PURE__ */ t(y, { variant: e === "primary" ? "solid" : "outline", size: "md", ...h, children: n.label }, "button-" + o);
|
|
50
50
|
}) });
|
|
@@ -2,61 +2,62 @@ import { jsx as a, jsxs as c } from "react/jsx-runtime";
|
|
|
2
2
|
import "../../index-L8X2o7IH.js";
|
|
3
3
|
import "react";
|
|
4
4
|
import { Heading as j } from "../Typography/Heading.js";
|
|
5
|
-
import { Badge as
|
|
5
|
+
import { Badge as K } from "../Badge/Badge.js";
|
|
6
6
|
import "../RootProvider/RootProvider.js";
|
|
7
|
-
import { DialogMetadata as
|
|
8
|
-
import { DialogByline as
|
|
9
|
-
import { MetaItem as
|
|
7
|
+
import { DialogMetadata as O } from "./DialogMetadata.js";
|
|
8
|
+
import { DialogByline as P } from "./DialogByline.js";
|
|
9
|
+
import { MetaItem as Q } from "../Metadata/MetaItem.js";
|
|
10
10
|
import { ListItem as u } from "../List/ListItem.js";
|
|
11
11
|
import "../Snackbar/useSnackbar.js";
|
|
12
|
-
import '../../assets/DialogListItem.css';const
|
|
13
|
-
border:
|
|
14
|
-
title:
|
|
15
|
-
controls:
|
|
16
|
-
header:
|
|
17
|
-
summary:
|
|
18
|
-
footer:
|
|
19
|
-
seenBy:
|
|
20
|
-
heading:
|
|
21
|
-
},
|
|
12
|
+
import '../../assets/DialogListItem.css';const S = "_border_jg0tu_1", T = "_title_jg0tu_27", U = "_controls_jg0tu_58", X = "_header_jg0tu_65", Y = "_summary_jg0tu_82", Z = "_footer_jg0tu_96", $ = "_seenBy_jg0tu_101", z = "_heading_jg0tu_108", t = {
|
|
13
|
+
border: S,
|
|
14
|
+
title: T,
|
|
15
|
+
controls: U,
|
|
16
|
+
header: X,
|
|
17
|
+
summary: Y,
|
|
18
|
+
footer: Z,
|
|
19
|
+
seenBy: $,
|
|
20
|
+
heading: z
|
|
21
|
+
}, _a = ({
|
|
22
22
|
size: e = "xl",
|
|
23
|
-
state:
|
|
23
|
+
state: W = "normal",
|
|
24
24
|
loading: r,
|
|
25
25
|
controls: x,
|
|
26
|
-
select:
|
|
26
|
+
select: aa,
|
|
27
27
|
selected: o,
|
|
28
28
|
status: s,
|
|
29
|
+
extendedStatusLabel: N,
|
|
29
30
|
sender: l,
|
|
30
|
-
recipient:
|
|
31
|
-
recipientLabel:
|
|
32
|
-
grouped:
|
|
33
|
-
updatedAt:
|
|
34
|
-
updatedAtLabel:
|
|
35
|
-
archived:
|
|
36
|
-
archivedAt:
|
|
37
|
-
archivedAtLabel:
|
|
38
|
-
trashed:
|
|
39
|
-
trashedAt:
|
|
40
|
-
trashedAtLabel:
|
|
31
|
+
recipient: b,
|
|
32
|
+
recipientLabel: v = "to",
|
|
33
|
+
grouped: y = !1,
|
|
34
|
+
updatedAt: B,
|
|
35
|
+
updatedAtLabel: w,
|
|
36
|
+
archived: D,
|
|
37
|
+
archivedAt: I,
|
|
38
|
+
archivedAtLabel: L,
|
|
39
|
+
trashed: M,
|
|
40
|
+
trashedAt: R,
|
|
41
|
+
trashedAtLabel: H,
|
|
41
42
|
badge: d,
|
|
42
|
-
dueAt:
|
|
43
|
-
dueAtLabel:
|
|
43
|
+
dueAt: V,
|
|
44
|
+
dueAtLabel: k,
|
|
44
45
|
unread: _,
|
|
45
46
|
seenByLog: p,
|
|
46
|
-
draftsLabel:
|
|
47
|
-
sentCount:
|
|
48
|
-
receivedCount:
|
|
49
|
-
attachmentsCount:
|
|
50
|
-
attachmentsLabel:
|
|
47
|
+
draftsLabel: q,
|
|
48
|
+
sentCount: A,
|
|
49
|
+
receivedCount: C,
|
|
50
|
+
attachmentsCount: E,
|
|
51
|
+
attachmentsLabel: F,
|
|
51
52
|
title: n,
|
|
52
|
-
description:
|
|
53
|
+
description: G,
|
|
53
54
|
summary: m,
|
|
54
55
|
highlightWords: i,
|
|
55
|
-
variant:
|
|
56
|
+
variant: J = "default",
|
|
56
57
|
id: h,
|
|
57
58
|
...f
|
|
58
59
|
}) => {
|
|
59
|
-
const g = o ? "tinted" :
|
|
60
|
+
const g = o ? "tinted" : J;
|
|
60
61
|
return e === "xs" || e === "sm" ? /* @__PURE__ */ a(
|
|
61
62
|
u,
|
|
62
63
|
{
|
|
@@ -68,7 +69,7 @@ import '../../assets/DialogListItem.css';const Q = "_border_jg0tu_1", S = "_titl
|
|
|
68
69
|
ariaLabel: n,
|
|
69
70
|
icon: l,
|
|
70
71
|
title: n,
|
|
71
|
-
description: m ||
|
|
72
|
+
description: m || G,
|
|
72
73
|
highlightWords: i
|
|
73
74
|
}
|
|
74
75
|
) : /* @__PURE__ */ a(
|
|
@@ -89,8 +90,8 @@ import '../../assets/DialogListItem.css';const Q = "_border_jg0tu_1", S = "_titl
|
|
|
89
90
|
"data-status": s == null ? void 0 : s.value,
|
|
90
91
|
"data-size": e,
|
|
91
92
|
"data-unread": _,
|
|
92
|
-
"data-archived":
|
|
93
|
-
"data-trashed":
|
|
93
|
+
"data-archived": D,
|
|
94
|
+
"data-trashed": M,
|
|
94
95
|
"data-loading": r,
|
|
95
96
|
children: [
|
|
96
97
|
/* @__PURE__ */ c("header", { className: t.header, "data-size": e, children: [
|
|
@@ -107,17 +108,17 @@ import '../../assets/DialogListItem.css';const Q = "_border_jg0tu_1", S = "_titl
|
|
|
107
108
|
children: n
|
|
108
109
|
}
|
|
109
110
|
),
|
|
110
|
-
d && /* @__PURE__ */ a(
|
|
111
|
+
d && /* @__PURE__ */ a(K, { variant: "tinted", size: "xs", ...d })
|
|
111
112
|
] }),
|
|
112
113
|
/* @__PURE__ */ a(
|
|
113
|
-
|
|
114
|
+
P,
|
|
114
115
|
{
|
|
115
116
|
size: "xs",
|
|
116
117
|
loading: r,
|
|
117
118
|
sender: l,
|
|
118
|
-
recipient:
|
|
119
|
-
recipientLabel:
|
|
120
|
-
grouped:
|
|
119
|
+
recipient: b,
|
|
120
|
+
recipientLabel: v,
|
|
121
|
+
grouped: y
|
|
121
122
|
}
|
|
122
123
|
),
|
|
123
124
|
m && /* @__PURE__ */ a(
|
|
@@ -134,27 +135,28 @@ import '../../assets/DialogListItem.css';const Q = "_border_jg0tu_1", S = "_titl
|
|
|
134
135
|
)
|
|
135
136
|
] }),
|
|
136
137
|
/* @__PURE__ */ a(
|
|
137
|
-
|
|
138
|
+
O,
|
|
138
139
|
{
|
|
139
140
|
className: t.footer,
|
|
140
141
|
loading: r,
|
|
141
142
|
status: s,
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
143
|
+
extendedStatusLabel: N,
|
|
144
|
+
draftsLabel: q,
|
|
145
|
+
sentCount: A,
|
|
146
|
+
receivedCount: C,
|
|
147
|
+
updatedAt: B,
|
|
148
|
+
updatedAtLabel: w,
|
|
149
|
+
archivedAt: I,
|
|
150
|
+
archivedAtLabel: L,
|
|
151
|
+
trashedAt: R,
|
|
152
|
+
trashedAtLabel: H,
|
|
153
|
+
dueAt: V,
|
|
154
|
+
dueAtLabel: k,
|
|
155
|
+
attachmentsCount: E,
|
|
156
|
+
attachmentsLabel: F
|
|
155
157
|
}
|
|
156
158
|
),
|
|
157
|
-
p && /* @__PURE__ */ a(
|
|
159
|
+
p && /* @__PURE__ */ a(Q, { className: t.seenBy, icon: { items: p.items } })
|
|
158
160
|
]
|
|
159
161
|
}
|
|
160
162
|
)
|
|
@@ -162,5 +164,5 @@ import '../../assets/DialogListItem.css';const Q = "_border_jg0tu_1", S = "_titl
|
|
|
162
164
|
);
|
|
163
165
|
};
|
|
164
166
|
export {
|
|
165
|
-
|
|
167
|
+
_a as DialogListItem
|
|
166
168
|
};
|
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsxs as
|
|
2
|
+
import { jsxs as _, jsx as a } from "react/jsx-runtime";
|
|
3
3
|
import "../../index-L8X2o7IH.js";
|
|
4
|
-
import
|
|
4
|
+
import o, { forwardRef as d } from "react";
|
|
5
5
|
import "../RootProvider/RootProvider.js";
|
|
6
|
-
import { MetaBase as
|
|
7
|
-
import { MetaItem as
|
|
6
|
+
import { MetaBase as E } from "../Metadata/MetaBase.js";
|
|
7
|
+
import { MetaItem as f } from "../Metadata/MetaItem.js";
|
|
8
8
|
import { MetaTimestamp as p } from "../Metadata/MetaTimestamp.js";
|
|
9
|
-
import { DialogStatus as
|
|
9
|
+
import { DialogStatus as S } from "./DialogStatus.js";
|
|
10
10
|
import "../Snackbar/useSnackbar.js";
|
|
11
|
-
import { S } from "../../Checkmark-Byz_C9x4.js";
|
|
12
|
-
import { u as
|
|
13
|
-
var
|
|
11
|
+
import { S as P } from "../../Checkmark-Byz_C9x4.js";
|
|
12
|
+
import { u as m } from "../../useId-BVFxCjkq.js";
|
|
13
|
+
var M = function(t, n) {
|
|
14
14
|
var r = {};
|
|
15
15
|
for (var e in t) Object.prototype.hasOwnProperty.call(t, e) && n.indexOf(e) < 0 && (r[e] = t[e]);
|
|
16
16
|
if (t != null && typeof Object.getOwnPropertySymbols == "function")
|
|
@@ -18,17 +18,17 @@ var P = function(t, n) {
|
|
|
18
18
|
n.indexOf(e[l]) < 0 && Object.prototype.propertyIsEnumerable.call(t, e[l]) && (r[e[l]] = t[e[l]]);
|
|
19
19
|
return r;
|
|
20
20
|
};
|
|
21
|
-
const
|
|
22
|
-
var { title: r, titleId: e } = t, l =
|
|
23
|
-
let
|
|
24
|
-
return
|
|
21
|
+
const R = d((t, n) => {
|
|
22
|
+
var { title: r, titleId: e } = t, l = M(t, ["title", "titleId"]);
|
|
23
|
+
let i = m();
|
|
24
|
+
return i = r ? e || "title-" + i : void 0, o.createElement(
|
|
25
25
|
"svg",
|
|
26
|
-
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: n, "aria-labelledby":
|
|
27
|
-
r ?
|
|
28
|
-
|
|
26
|
+
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: n, "aria-labelledby": i }, l),
|
|
27
|
+
r ? o.createElement("title", { id: i }, r) : null,
|
|
28
|
+
o.createElement("path", { fill: "currentColor", fillRule: "evenodd", d: "M3.25 4A.75.75 0 0 1 4 3.25h16a.75.75 0 0 1 .75.75v4a.75.75 0 0 1-.75.75h-.25V19A1.75 1.75 0 0 1 18 20.75H6A1.75 1.75 0 0 1 4.25 19V8.75H4A.75.75 0 0 1 3.25 8zm2.5 4.75h12.5V19a.25.25 0 0 1-.25.25H6a.25.25 0 0 1-.25-.25zm-1-4v2.5h14.5v-2.5zm9.25 8.5a.75.75 0 0 0 0-1.5h-4a.75.75 0 0 0 0 1.5z", clipRule: "evenodd" })
|
|
29
29
|
);
|
|
30
30
|
});
|
|
31
|
-
var
|
|
31
|
+
var V = function(t, n) {
|
|
32
32
|
var r = {};
|
|
33
33
|
for (var e in t) Object.prototype.hasOwnProperty.call(t, e) && n.indexOf(e) < 0 && (r[e] = t[e]);
|
|
34
34
|
if (t != null && typeof Object.getOwnPropertySymbols == "function")
|
|
@@ -36,17 +36,17 @@ var R = function(t, n) {
|
|
|
36
36
|
n.indexOf(e[l]) < 0 && Object.prototype.propertyIsEnumerable.call(t, e[l]) && (r[e[l]] = t[e[l]]);
|
|
37
37
|
return r;
|
|
38
38
|
};
|
|
39
|
-
const
|
|
40
|
-
var { title: r, titleId: e } = t, l =
|
|
41
|
-
let
|
|
42
|
-
return
|
|
39
|
+
const C = d((t, n) => {
|
|
40
|
+
var { title: r, titleId: e } = t, l = V(t, ["title", "titleId"]);
|
|
41
|
+
let i = m();
|
|
42
|
+
return i = r ? e || "title-" + i : void 0, o.createElement(
|
|
43
43
|
"svg",
|
|
44
|
-
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: n, "aria-labelledby":
|
|
45
|
-
r ?
|
|
46
|
-
|
|
44
|
+
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: n, "aria-labelledby": i }, l),
|
|
45
|
+
r ? o.createElement("title", { id: i }, r) : null,
|
|
46
|
+
o.createElement("path", { fill: "currentColor", d: "M12.75 5a.75.75 0 0 0-1.5 0v12.19l-3.22-3.22a.75.75 0 0 0-1.06 1.06l4.5 4.5a.75.75 0 0 0 1.06 0l4.5-4.5a.75.75 0 1 0-1.06-1.06l-3.22 3.22z" })
|
|
47
47
|
);
|
|
48
48
|
});
|
|
49
|
-
var
|
|
49
|
+
var B = function(t, n) {
|
|
50
50
|
var r = {};
|
|
51
51
|
for (var e in t) Object.prototype.hasOwnProperty.call(t, e) && n.indexOf(e) < 0 && (r[e] = t[e]);
|
|
52
52
|
if (t != null && typeof Object.getOwnPropertySymbols == "function")
|
|
@@ -54,17 +54,17 @@ var C = function(t, n) {
|
|
|
54
54
|
n.indexOf(e[l]) < 0 && Object.prototype.propertyIsEnumerable.call(t, e[l]) && (r[e[l]] = t[e[l]]);
|
|
55
55
|
return r;
|
|
56
56
|
};
|
|
57
|
-
const
|
|
58
|
-
var { title: r, titleId: e } = t, l =
|
|
59
|
-
let
|
|
60
|
-
return
|
|
57
|
+
const H = d((t, n) => {
|
|
58
|
+
var { title: r, titleId: e } = t, l = B(t, ["title", "titleId"]);
|
|
59
|
+
let i = m();
|
|
60
|
+
return i = r ? e || "title-" + i : void 0, o.createElement(
|
|
61
61
|
"svg",
|
|
62
|
-
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: n, "aria-labelledby":
|
|
63
|
-
r ?
|
|
64
|
-
|
|
62
|
+
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: n, "aria-labelledby": i }, l),
|
|
63
|
+
r ? o.createElement("title", { id: i }, r) : null,
|
|
64
|
+
o.createElement("path", { fill: "currentColor", fillRule: "evenodd", d: "M9 2.25a.75.75 0 0 1 .75.75v1.25h4.5V3a.75.75 0 0 1 1.5 0v1.25h3.75c.69 0 1.25.56 1.25 1.25v13c0 .69-.56 1.25-1.25 1.25h-15c-.69 0-1.25-.56-1.25-1.25v-13c0-.69.56-1.25 1.25-1.25h3.75V3A.75.75 0 0 1 9 2.25M15.75 7a.75.75 0 0 1-1.5 0V5.75h-4.5V7a.75.75 0 0 1-1.5 0V5.75h-3.5v3.5h14.5v-3.5h-3.5zm-11 11.25v-7.5h14.5v7.5zm2-5.25a.75.75 0 0 1 .75-.75h1a.75.75 0 0 1 0 1.5h-1a.75.75 0 0 1-.75-.75m4 0a.75.75 0 0 1 .75-.75h1a.75.75 0 0 1 0 1.5h-1a.75.75 0 0 1-.75-.75m4.75-.75a.75.75 0 0 0 0 1.5h1a.75.75 0 0 0 0-1.5zM10.75 16a.75.75 0 0 1 .75-.75h1a.75.75 0 0 1 0 1.5h-1a.75.75 0 0 1-.75-.75m4.75-.75a.75.75 0 0 0 0 1.5h1a.75.75 0 0 0 0-1.5zM6.75 16a.75.75 0 0 1 .75-.75h1a.75.75 0 0 1 0 1.5h-1a.75.75 0 0 1-.75-.75", clipRule: "evenodd" })
|
|
65
65
|
);
|
|
66
66
|
});
|
|
67
|
-
var
|
|
67
|
+
var k = function(t, n) {
|
|
68
68
|
var r = {};
|
|
69
69
|
for (var e in t) Object.prototype.hasOwnProperty.call(t, e) && n.indexOf(e) < 0 && (r[e] = t[e]);
|
|
70
70
|
if (t != null && typeof Object.getOwnPropertySymbols == "function")
|
|
@@ -72,17 +72,17 @@ var H = function(t, n) {
|
|
|
72
72
|
n.indexOf(e[l]) < 0 && Object.prototype.propertyIsEnumerable.call(t, e[l]) && (r[e[l]] = t[e[l]]);
|
|
73
73
|
return r;
|
|
74
74
|
};
|
|
75
|
-
const
|
|
76
|
-
var { title: r, titleId: e } = t, l =
|
|
77
|
-
let
|
|
78
|
-
return
|
|
75
|
+
const A = d((t, n) => {
|
|
76
|
+
var { title: r, titleId: e } = t, l = k(t, ["title", "titleId"]);
|
|
77
|
+
let i = m();
|
|
78
|
+
return i = r ? e || "title-" + i : void 0, o.createElement(
|
|
79
79
|
"svg",
|
|
80
|
-
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: n, "aria-labelledby":
|
|
81
|
-
r ?
|
|
82
|
-
|
|
80
|
+
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: n, "aria-labelledby": i }, l),
|
|
81
|
+
r ? o.createElement("title", { id: i }, r) : null,
|
|
82
|
+
o.createElement("path", { fill: "currentColor", fillRule: "evenodd", d: "M4.5 1.75a.75.75 0 0 1 .75.75v2.464a9.75 9.75 0 1 1 12.342 15.023.75.75 0 1 1-.86-1.229A8.251 8.251 0 1 0 6.084 6.25H9a.75.75 0 0 1 0 1.5H4.5A.75.75 0 0 1 3.75 7V2.5a.75.75 0 0 1 .75-.75M12.75 6a.75.75 0 0 0-1.5 0v6c0 .199.079.39.22.53l2.5 2.5a.75.75 0 1 0 1.06-1.06l-2.28-2.28zM3 11.25a.75.75 0 0 1 .75.75q0 .66.105 1.31a.75.75 0 0 1-1.481.24A10 10 0 0 1 2.25 12a.75.75 0 0 1 .75-.75m1.855 4.875a.75.75 0 0 0-1.299.75q.39.675.882 1.28a.75.75 0 1 0 1.163-.947 8 8 0 0 1-.746-1.083m1.995 3.294a.75.75 0 0 1 1.025-.274q.57.33 1.188.564a.75.75 0 1 1-.535 1.402 10 10 0 0 1-1.403-.667.75.75 0 0 1-.275-1.025m6.7 2.207a.75.75 0 1 0-.24-1.48q-.65.104-1.31.104a.75.75 0 0 0 0 1.5q.78 0 1.55-.124", clipRule: "evenodd" })
|
|
83
83
|
);
|
|
84
84
|
});
|
|
85
|
-
var
|
|
85
|
+
var $ = function(t, n) {
|
|
86
86
|
var r = {};
|
|
87
87
|
for (var e in t) Object.prototype.hasOwnProperty.call(t, e) && n.indexOf(e) < 0 && (r[e] = t[e]);
|
|
88
88
|
if (t != null && typeof Object.getOwnPropertySymbols == "function")
|
|
@@ -90,17 +90,17 @@ var A = function(t, n) {
|
|
|
90
90
|
n.indexOf(e[l]) < 0 && Object.prototype.propertyIsEnumerable.call(t, e[l]) && (r[e[l]] = t[e[l]]);
|
|
91
91
|
return r;
|
|
92
92
|
};
|
|
93
|
-
const
|
|
94
|
-
var { title: r, titleId: e } = t, l =
|
|
95
|
-
let
|
|
96
|
-
return
|
|
93
|
+
const q = d((t, n) => {
|
|
94
|
+
var { title: r, titleId: e } = t, l = $(t, ["title", "titleId"]);
|
|
95
|
+
let i = m();
|
|
96
|
+
return i = r ? e || "title-" + i : void 0, o.createElement(
|
|
97
97
|
"svg",
|
|
98
|
-
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: n, "aria-labelledby":
|
|
99
|
-
r ?
|
|
100
|
-
|
|
98
|
+
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: n, "aria-labelledby": i }, l),
|
|
99
|
+
r ? o.createElement("title", { id: i }, r) : null,
|
|
100
|
+
o.createElement("path", { fill: "currentColor", fillRule: "evenodd", d: "M8.25 3.5c0-.69.56-1.25 1.25-1.25H14a.75.75 0 0 1 .53.22l5 5c.141.14.22.331.22.53v8.5c0 .69-.56 1.25-1.25 1.25h-9c-.69 0-1.25-.56-1.25-1.25zm6.25 5.25c-.69 0-1.25-.56-1.25-1.25V3.75h-3.5v12.5h8.5v-7.5zm.25-3.94 2.44 2.44h-2.44zM6.502 7.75H5.75v12.5h8.5v-.748a.75.75 0 0 1 1.5 0v.998c0 .69-.56 1.25-1.25 1.25h-9c-.69 0-1.25-.56-1.25-1.25v-13c0-.69.56-1.25 1.25-1.25h1.002a.75.75 0 1 1 0 1.5", clipRule: "evenodd" })
|
|
101
101
|
);
|
|
102
102
|
});
|
|
103
|
-
var
|
|
103
|
+
var D = function(t, n) {
|
|
104
104
|
var r = {};
|
|
105
105
|
for (var e in t) Object.prototype.hasOwnProperty.call(t, e) && n.indexOf(e) < 0 && (r[e] = t[e]);
|
|
106
106
|
if (t != null && typeof Object.getOwnPropertySymbols == "function")
|
|
@@ -108,17 +108,17 @@ var q = function(t, n) {
|
|
|
108
108
|
n.indexOf(e[l]) < 0 && Object.prototype.propertyIsEnumerable.call(t, e[l]) && (r[e[l]] = t[e[l]]);
|
|
109
109
|
return r;
|
|
110
110
|
};
|
|
111
|
-
const
|
|
112
|
-
var { title: r, titleId: e } = t, l =
|
|
113
|
-
let
|
|
114
|
-
return
|
|
111
|
+
const T = d((t, n) => {
|
|
112
|
+
var { title: r, titleId: e } = t, l = D(t, ["title", "titleId"]);
|
|
113
|
+
let i = m();
|
|
114
|
+
return i = r ? e || "title-" + i : void 0, o.createElement(
|
|
115
115
|
"svg",
|
|
116
|
-
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: n, "aria-labelledby":
|
|
117
|
-
r ?
|
|
118
|
-
|
|
116
|
+
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: n, "aria-labelledby": i }, l),
|
|
117
|
+
r ? o.createElement("title", { id: i }, r) : null,
|
|
118
|
+
o.createElement("path", { fill: "currentColor", fillRule: "evenodd", d: "M15.912 4.382c-.546.032-1.086.292-1.503.71l-8.132 8.131c-1.2 1.201-1.754 3.549 0 5.304 1.755 1.754 4.103 1.2 5.304 0l7.424-7.425a.75.75 0 0 1 1.06 1.06l-7.424 7.425c-1.627 1.628-4.936 2.488-7.424 0s-1.628-5.797 0-7.424l8.131-8.132c.644-.643 1.518-1.09 2.475-1.146.976-.058 1.978.295 2.829 1.146.85.851 1.203 1.853 1.146 2.828-.056.957-.503 1.832-1.146 2.475l-7.425 7.425c-.316.316-.838.553-1.376.613-.568.063-1.255-.062-1.806-.613-.55-.55-.676-1.238-.613-1.806.06-.538.297-1.06.613-1.376l6.718-6.718a.75.75 0 0 1 1.06 1.061l-6.717 6.718a.95.95 0 0 0-.183.48c-.025.227.026.424.183.58.156.157.353.208.58.183a.95.95 0 0 0 .48-.183l7.425-7.424c.417-.418.678-.957.71-1.503.03-.527-.147-1.116-.71-1.68s-1.152-.74-1.68-.71", clipRule: "evenodd" })
|
|
119
119
|
);
|
|
120
120
|
});
|
|
121
|
-
var
|
|
121
|
+
var F = function(t, n) {
|
|
122
122
|
var r = {};
|
|
123
123
|
for (var e in t) Object.prototype.hasOwnProperty.call(t, e) && n.indexOf(e) < 0 && (r[e] = t[e]);
|
|
124
124
|
if (t != null && typeof Object.getOwnPropertySymbols == "function")
|
|
@@ -126,22 +126,22 @@ var T = function(t, n) {
|
|
|
126
126
|
n.indexOf(e[l]) < 0 && Object.prototype.propertyIsEnumerable.call(t, e[l]) && (r[e[l]] = t[e[l]]);
|
|
127
127
|
return r;
|
|
128
128
|
};
|
|
129
|
-
const
|
|
130
|
-
var { title: r, titleId: e } = t, l =
|
|
131
|
-
let
|
|
132
|
-
return
|
|
129
|
+
const G = d((t, n) => {
|
|
130
|
+
var { title: r, titleId: e } = t, l = F(t, ["title", "titleId"]);
|
|
131
|
+
let i = m();
|
|
132
|
+
return i = r ? e || "title-" + i : void 0, o.createElement(
|
|
133
133
|
"svg",
|
|
134
|
-
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: n, "aria-labelledby":
|
|
135
|
-
r ?
|
|
136
|
-
|
|
134
|
+
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: n, "aria-labelledby": i }, l),
|
|
135
|
+
r ? o.createElement("title", { id: i }, r) : null,
|
|
136
|
+
o.createElement("path", { fill: "currentColor", fillRule: "evenodd", d: "M4.5 6.25a.75.75 0 0 0 0 1.5h.805l.876 11.384a1.75 1.75 0 0 0 1.745 1.616h8.148a1.75 1.75 0 0 0 1.745-1.616l.876-11.384h.805a.75.75 0 0 0 0-1.5h-2.75V6A2.75 2.75 0 0 0 14 3.25h-4A2.75 2.75 0 0 0 7.25 6v.25zm5.5-1.5c-.69 0-1.25.56-1.25 1.25v.25h6.5V6c0-.69-.56-1.25-1.25-1.25zm-3.19 3 .867 11.27c.01.13.118.23.249.23h8.148c.13 0 .24-.1.25-.23l.866-11.27zm3.19 2a.75.75 0 0 1 .75.75v6a.75.75 0 0 1-1.5 0v-6a.75.75 0 0 1 .75-.75m4 0a.75.75 0 0 1 .75.75v6a.75.75 0 0 1-1.5 0v-6a.75.75 0 0 1 .75-.75", clipRule: "evenodd" })
|
|
137
137
|
);
|
|
138
|
-
}),
|
|
138
|
+
}), te = ({
|
|
139
139
|
className: t,
|
|
140
140
|
loading: n,
|
|
141
141
|
status: r,
|
|
142
142
|
sender: e,
|
|
143
143
|
updatedAt: l,
|
|
144
|
-
updatedAtLabel:
|
|
144
|
+
updatedAtLabel: i,
|
|
145
145
|
dueAt: h,
|
|
146
146
|
dueAtLabel: u,
|
|
147
147
|
archivedAt: s,
|
|
@@ -152,28 +152,30 @@ const F = d((t, n) => {
|
|
|
152
152
|
sentCount: y = 0,
|
|
153
153
|
receivedCount: g = 0,
|
|
154
154
|
attachmentsCount: x = 0,
|
|
155
|
-
attachmentsLabel:
|
|
155
|
+
attachmentsLabel: z,
|
|
156
156
|
transmissionsLabel: j,
|
|
157
|
-
activityLog: c
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
157
|
+
activityLog: c,
|
|
158
|
+
extendedStatusLabel: I
|
|
159
|
+
}) => /* @__PURE__ */ _(E, { className: t, size: "xs", children: [
|
|
160
|
+
r && /* @__PURE__ */ a(S, { loading: n, size: "xs", ...r }),
|
|
161
|
+
I && /* @__PURE__ */ a(f, { size: "xs", variant: "outline", children: I }),
|
|
162
|
+
w && /* @__PURE__ */ a(f, { size: "xs", variant: "dotted", children: w }),
|
|
163
|
+
y > 0 && /* @__PURE__ */ a(f, { size: "xs", variant: "outline", icon: P, children: y }),
|
|
164
|
+
g > 0 && /* @__PURE__ */ a(f, { size: "xs", variant: "outline", icon: C, children: g }),
|
|
165
|
+
l && /* @__PURE__ */ _(p, { loading: n, datetime: l, size: "xs", children: [
|
|
164
166
|
/* @__PURE__ */ a("strong", { children: e && e.name + ", " }),
|
|
165
|
-
|
|
167
|
+
i
|
|
166
168
|
] }),
|
|
167
|
-
h && u && /* @__PURE__ */ a(p, { loading: n, datetime: h, size: "xs", icon:
|
|
168
|
-
x > 0 && /* @__PURE__ */ a(
|
|
169
|
-
j && /* @__PURE__ */ a(
|
|
170
|
-
b && O && /* @__PURE__ */ a(p, { loading: n, datetime: b, size: "xs", icon:
|
|
169
|
+
h && u && /* @__PURE__ */ a(p, { loading: n, datetime: h, size: "xs", icon: H, children: u }),
|
|
170
|
+
x > 0 && /* @__PURE__ */ a(f, { loading: n, size: "xs", icon: T, children: z || x }),
|
|
171
|
+
j && /* @__PURE__ */ a(f, { loading: n, size: "xs", icon: q, children: j }),
|
|
172
|
+
b && O && /* @__PURE__ */ a(p, { loading: n, datetime: b, size: "xs", icon: G, children: O }) || s && v && /* @__PURE__ */ a(p, { loading: n, datetime: s, size: "xs", icon: R, children: v }),
|
|
171
173
|
c && /* @__PURE__ */ a(
|
|
172
|
-
|
|
174
|
+
f,
|
|
173
175
|
{
|
|
174
176
|
loading: n,
|
|
175
177
|
size: "xs",
|
|
176
|
-
icon:
|
|
178
|
+
icon: A,
|
|
177
179
|
as: c != null && c.onClick ? "button" : "span",
|
|
178
180
|
onClick: c == null ? void 0 : c.onClick,
|
|
179
181
|
children: (c == null ? void 0 : c.label) || "Activity log"
|
|
@@ -181,5 +183,5 @@ const F = d((t, n) => {
|
|
|
181
183
|
)
|
|
182
184
|
] });
|
|
183
185
|
export {
|
|
184
|
-
|
|
186
|
+
te as DialogMetadata
|
|
185
187
|
};
|
|
@@ -53,4 +53,4 @@ export interface DialogListItemProps extends ListItemProps, DialogMetadataProps
|
|
|
53
53
|
* summary, sender, and receiver.
|
|
54
54
|
* to mark the item as checked/unchecked and can visually indicate if it is unread.
|
|
55
55
|
*/
|
|
56
|
-
export declare const DialogListItem: ({ size, state, loading, controls, select, selected, status, sender, recipient, recipientLabel, grouped, updatedAt, updatedAtLabel, archived, archivedAt, archivedAtLabel, trashed, trashedAt, trashedAtLabel, badge, dueAt, dueAtLabel, unread, seenByLog, draftsLabel, sentCount, receivedCount, attachmentsCount, attachmentsLabel, title, description, summary, highlightWords, variant, id, ...rest }: DialogListItemProps) => import("react/jsx-runtime").JSX.Element;
|
|
56
|
+
export declare const DialogListItem: ({ size, state, loading, controls, select, selected, status, extendedStatusLabel, sender, recipient, recipientLabel, grouped, updatedAt, updatedAtLabel, archived, archivedAt, archivedAtLabel, trashed, trashedAt, trashedAtLabel, badge, dueAt, dueAtLabel, unread, seenByLog, draftsLabel, sentCount, receivedCount, attachmentsCount, attachmentsLabel, title, description, summary, highlightWords, variant, id, ...rest }: DialogListItemProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -9,6 +9,8 @@ export type DialogMetadataProps = {
|
|
|
9
9
|
loading?: boolean;
|
|
10
10
|
/** Dialog status */
|
|
11
11
|
status?: DialogStatusProps;
|
|
12
|
+
/** Extended Status Label */
|
|
13
|
+
extendedStatusLabel?: string;
|
|
12
14
|
/** Sender */
|
|
13
15
|
sender?: AvatarProps;
|
|
14
16
|
/** Updated datetime */
|
|
@@ -49,5 +51,5 @@ export type DialogMetadataProps = {
|
|
|
49
51
|
/**
|
|
50
52
|
* Metadata for a dialog in list view.
|
|
51
53
|
*/
|
|
52
|
-
export declare const DialogMetadata: ({ className, loading, status, sender, updatedAt, updatedAtLabel, dueAt, dueAtLabel, archivedAt, archivedAtLabel, trashedAt, trashedAtLabel, draftsLabel, sentCount, receivedCount, attachmentsCount, attachmentsLabel, transmissionsLabel, activityLog, }: DialogMetadataProps) => import("react/jsx-runtime").JSX.Element;
|
|
54
|
+
export declare const DialogMetadata: ({ className, loading, status, sender, updatedAt, updatedAtLabel, dueAt, dueAtLabel, archivedAt, archivedAtLabel, trashedAt, trashedAtLabel, draftsLabel, sentCount, receivedCount, attachmentsCount, attachmentsLabel, transmissionsLabel, activityLog, extendedStatusLabel, }: DialogMetadataProps) => import("react/jsx-runtime").JSX.Element;
|
|
53
55
|
export {};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { StoryObj } from '@storybook/react-vite';
|
|
2
2
|
declare const meta: {
|
|
3
3
|
title: string;
|
|
4
|
-
component: ({ className, loading, status, sender, updatedAt, updatedAtLabel, dueAt, dueAtLabel, archivedAt, archivedAtLabel, trashedAt, trashedAtLabel, draftsLabel, sentCount, receivedCount, attachmentsCount, attachmentsLabel, transmissionsLabel, activityLog, }: import('./DialogMetadata').DialogMetadataProps) => import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
component: ({ className, loading, status, sender, updatedAt, updatedAtLabel, dueAt, dueAtLabel, archivedAt, archivedAtLabel, trashedAt, trashedAtLabel, draftsLabel, sentCount, receivedCount, attachmentsCount, attachmentsLabel, transmissionsLabel, activityLog, extendedStatusLabel, }: import('./DialogMetadata').DialogMetadataProps) => import("react/jsx-runtime").JSX.Element;
|
|
5
5
|
tags: string[];
|
|
6
6
|
parameters: {};
|
|
7
7
|
args: {
|
|
@@ -18,3 +18,4 @@ export declare const Completed: Story;
|
|
|
18
18
|
export declare const NotApplicable: Story;
|
|
19
19
|
export declare const Transmissions: Story;
|
|
20
20
|
export declare const ActivityLog: Story;
|
|
21
|
+
export declare const WithExtendedStatus: Story;
|