asma-ui-core 3.105.0 → 3.106.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/asma-ui-core.css +1 -1
- package/dist/components/custom/module/header-layout/DynamicToolbar.js +99 -97
- package/dist/components/custom/module/header-layout/ToolbarActionGroup.js +60 -41
- package/dist/components/custom/module/header-layout/ToolbarRows.js +51 -47
- package/dist/components/custom/module/header-layout/useTranslations.js +12 -10
- package/dist/components/custom/page/page-header/PageHeader.js +41 -40
- package/dist/components/custom/widget/widget/StyledWidget.js +21 -20
- package/dist/components/data-display/chip/StyledChip.js +70 -53
- package/dist/components/data-display/tooltip/StyledTooltip.js +116 -73
- package/dist/components/feedback/dialog/DialogBusyContext.js +32 -0
- package/dist/components/feedback/dialog/StyledDialog.js +81 -72
- package/dist/components/feedback/dialog/dialog-footer/StyledDialogFooter.js +76 -71
- package/dist/components/feedback/minimizable-dialog/MinimizableDialog.js +133 -137
- package/dist/components/feedback/minimizable-dialog/components/CloseBtn.js +11 -8
- package/dist/components/feedback/minimizable-dialog/components/FullscreenBtn.js +6 -6
- package/dist/components/feedback/minimizable-dialog/components/MinimizeBtn.js +1 -1
- package/dist/components/feedback/minimizable-dialog/v2/MinimizableDialogV2.js +94 -85
- package/dist/components/feedback/minimizable-dialog/v2/useTranslations.js +6 -4
- package/dist/components/inputs/button/StyledButton.js +83 -33
- package/dist/components/inputs/button/StyledButton.module.js +13 -13
- package/dist/components/inputs/dynamic-select/components/DynamicInteractiveChipGroup.js +32 -32
- package/dist/components/inputs/dynamic-select/components/DynamicSelectAutocomplete.js +6 -6
- package/dist/components/inputs/select/StyledSelect.js +8 -8
- package/dist/components/inputs/select-autocomplete/StyledSelectAutocomplete.js +14 -14
- package/dist/components/navigation/link/StyledLink.js +53 -26
- package/dist/components/navigation/link/StyledLink.module.js +6 -6
- package/dist/components/navigation/menu/StyledMenuItem.js +35 -30
- package/dist/components/navigation/tabs/StyledTab.js +23 -25
- package/dist/components/utils/bottom-sheet/StyledBottomSheet.js +6 -6
- package/dist/components/utils/copy-wrapper/CopyButton.js +4 -4
- package/dist/components/utils/copy-wrapper/CopyWrapper.js +4 -4
- package/dist/datetime/shared-components/button/StyledButton.module.js +11 -11
- package/dist/helpers/focusable.js +2 -2
- package/dist/index.js +589 -585
- package/dist/src/components/custom/module/header-layout/ToolbarActionGroup.d.ts +13 -2
- package/dist/src/components/custom/module/header-layout/ToolbarRows.d.ts +2 -1
- package/dist/src/components/custom/module/header-layout/planToolbarActions.d.ts +18 -1
- package/dist/src/components/custom/module/header-layout/useTranslations.d.ts +2 -0
- package/dist/src/components/custom/widget/widget/StyledWidget.d.ts +5 -0
- package/dist/src/components/data-display/chip/StyledChip.d.ts +6 -0
- package/dist/src/components/data-display/interactive-chip/StyledInteractiveChip.d.ts +7 -1
- package/dist/src/components/data-display/tooltip/StyledTooltip.d.ts +16 -2
- package/dist/src/components/feedback/dialog/DialogBusy.test.d.ts +1 -0
- package/dist/src/components/feedback/dialog/DialogBusyContext.d.ts +28 -0
- package/dist/src/components/feedback/dialog/StyledDialog.d.ts +5 -0
- package/dist/src/components/feedback/dialog/dialog-footer/StyledDialogFooter.d.ts +9 -8
- package/dist/src/components/feedback/dialog/index.d.ts +1 -0
- package/dist/src/components/feedback/minimizable-dialog/components/CloseBtn.d.ts +2 -0
- package/dist/src/components/feedback/minimizable-dialog/types.d.ts +11 -0
- package/dist/src/components/feedback/minimizable-dialog/v2/types.d.ts +2 -0
- package/dist/src/components/feedback/minimizable-dialog/v2/useTranslations.d.ts +2 -0
- package/dist/src/components/inputs/button/StyledButton.d.ts +25 -1
- package/dist/src/components/inputs/button/StyledButtonBusy.test.d.ts +1 -0
- package/dist/src/components/navigation/link/StyledLink.d.ts +6 -0
- package/dist/src/components/navigation/menu/StyledMenuItem.d.ts +8 -1
- package/dist/src/components/navigation/tabs/StyledTab.d.ts +6 -0
- package/dist/src/forms/submitChanged.d.ts +3 -0
- package/dist/src/helpers/focusable.d.ts +8 -0
- package/dist/src/helpers/index.d.ts +1 -0
- package/dist/src/helpers/uiCoreLocale.d.ts +1 -0
- package/dist/src/table/shared-components/StyledMenuItem.d.ts +5 -1
- package/dist/table/components/columns/action-column/components/RowActionMenu.js +63 -69
- package/dist/table/shared-components/StyledMenuItem.js +28 -16
- package/package.json +1 -1
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
1
|
+
import { StyledTooltip as i } from "../../../data-display/tooltip/StyledTooltip.js";
|
|
2
|
+
import { ArrowExpandIcon as n } from "../../../icons/arrow-expand-icon/ArrowExpandIcon.js";
|
|
3
|
+
import { ArrowShrinkIcon as a } from "../../../icons/arrow-shrink-icon/ArrowShrinkIcon.js";
|
|
4
4
|
import { StyledButton as d } from "../../../inputs/button/StyledButton.js";
|
|
5
5
|
import { jsx as r } from "react/jsx-runtime";
|
|
6
|
-
var u = ({ fullScreen: e, showFullScreenIcon: o, tooltipTitle: t, onClick: l }) => o ? /* @__PURE__ */ r(
|
|
6
|
+
var u = ({ fullScreen: e, showFullScreenIcon: o, tooltipTitle: t, onClick: l }) => o ? /* @__PURE__ */ r(i, {
|
|
7
7
|
title: t,
|
|
8
8
|
children: /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(d, {
|
|
9
9
|
dataTest: "fullscreen-button",
|
|
@@ -11,11 +11,11 @@ var u = ({ fullScreen: e, showFullScreenIcon: o, tooltipTitle: t, onClick: l })
|
|
|
11
11
|
variant: "textGray",
|
|
12
12
|
size: "small",
|
|
13
13
|
onClick: l,
|
|
14
|
-
endIcon: e ? /* @__PURE__ */ r(
|
|
14
|
+
endIcon: e ? /* @__PURE__ */ r(a, {
|
|
15
15
|
width: 20,
|
|
16
16
|
height: 20,
|
|
17
17
|
color: "text-delta-700"
|
|
18
|
-
}) : /* @__PURE__ */ r(
|
|
18
|
+
}) : /* @__PURE__ */ r(n, {
|
|
19
19
|
width: 20,
|
|
20
20
|
height: 20,
|
|
21
21
|
color: "text-delta-700"
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
+
import { StyledTooltip as r } from "../../../data-display/tooltip/StyledTooltip.js";
|
|
1
2
|
import { MinimizeIcon as d } from "../../../icons/minimize-icon/MinimizeIcon.js";
|
|
2
3
|
import { KeyboardCapslockIcon as c } from "../../../icons/keyboard-capslock-icon/KeyboardCapslockIcon.js";
|
|
3
|
-
import { StyledTooltip as r } from "../../../data-display/tooltip/StyledTooltip.js";
|
|
4
4
|
import { StyledButton as a } from "../../../inputs/button/StyledButton.js";
|
|
5
5
|
import { jsx as i } from "react/jsx-runtime";
|
|
6
6
|
var g = ({ visibility: l, tooltipTitle: t, onClick: e, type: n }) => {
|
|
@@ -1,46 +1,47 @@
|
|
|
1
|
-
import { cn as
|
|
2
|
-
import { firstTabbable as
|
|
3
|
-
import { StyledTooltip as
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
1
|
+
import { cn as c } from "../../../../helpers/cn.js";
|
|
2
|
+
import { firstTabbable as I } from "../../../../helpers/focusable.js";
|
|
3
|
+
import { StyledTooltip as G } from "../../../data-display/tooltip/StyledTooltip.js";
|
|
4
|
+
import { DialogBusyContext as j, useDialogBusyBoundary as J } from "../../dialog/DialogBusyContext.js";
|
|
5
|
+
import { useMobileMediaQuery as K } from "../../../../hooks/useMediaQuery.hook.js";
|
|
6
|
+
import { useFocusTrap as X } from "../../../../hooks/useFocusTrap.hook.js";
|
|
7
|
+
import { CloseBtn as D } from "../components/CloseBtn.js";
|
|
8
|
+
import { MinimizeBtn as P } from "../components/MinimizeBtn.js";
|
|
9
|
+
import { FullScreenBtn as Y } from "../components/FullscreenBtn.js";
|
|
9
10
|
import p from "./MinimizableDialogV2.module.js";
|
|
10
|
-
import { useTranslations as
|
|
11
|
-
import { useControlledProps as
|
|
12
|
-
import
|
|
13
|
-
import { useLayoutEffect as
|
|
14
|
-
import { Fragment as
|
|
15
|
-
var
|
|
16
|
-
const { showCloseIcon: z = !0, showMinimizeIcon:
|
|
11
|
+
import { useTranslations as Z } from "./useTranslations.js";
|
|
12
|
+
import { useControlledProps as ee } from "./useControlledProps.js";
|
|
13
|
+
import te from "clsx";
|
|
14
|
+
import { useLayoutEffect as A, useRef as u } from "react";
|
|
15
|
+
import { Fragment as ie, jsx as e, jsxs as o } from "react/jsx-runtime";
|
|
16
|
+
var ge = (y) => {
|
|
17
|
+
const { showCloseIcon: z = !0, showMinimizeIcon: O = !0, showExpandIcon: V = !0, enableFullscreen: q = !0, title: r, label: x, children: E, open: d, onClose: W, classNameOverrides: v = {
|
|
17
18
|
maximized: "",
|
|
18
19
|
minimized: "",
|
|
19
20
|
fullscreen: ""
|
|
20
|
-
}, dataTest:
|
|
21
|
-
|
|
21
|
+
}, dataTest: _, actionNode: $, locale: H = "en", busyReason: L, style: w, initialFocusRef: N } = y, s = K(), i = Z(H), m = u(null), f = u(null), R = u(null), C = u(null), S = u(!1), { minimized: t, setMinimized: F, fullScreen: l, setFullScreen: T } = ee(y), n = l && !t, { busy: h, busyReason: B, contextValue: M } = J(L ?? i.waitUntilSaved), b = () => {
|
|
22
|
+
h || (F(!1), W());
|
|
22
23
|
};
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
}, [t]),
|
|
26
|
-
const
|
|
27
|
-
if (
|
|
28
|
-
const
|
|
29
|
-
(
|
|
24
|
+
A(() => {
|
|
25
|
+
m.current?.toggleAttribute("inert", t), f.current?.toggleAttribute("inert", !t);
|
|
26
|
+
}, [t]), A(() => {
|
|
27
|
+
const g = d && !S.current;
|
|
28
|
+
if (S.current = d, !g) return;
|
|
29
|
+
const a = t ? f.current : m.current, U = t ? C.current : R.current;
|
|
30
|
+
(N?.current ?? U ?? (a ? I(a) : void 0))?.focus({ preventScroll: !0 });
|
|
30
31
|
}, [
|
|
31
|
-
|
|
32
|
+
N,
|
|
32
33
|
t,
|
|
33
|
-
|
|
34
|
+
d
|
|
34
35
|
]);
|
|
35
|
-
const
|
|
36
|
-
const
|
|
37
|
-
|
|
38
|
-
const
|
|
39
|
-
|
|
36
|
+
const k = () => {
|
|
37
|
+
const g = t ? m : f;
|
|
38
|
+
F(!t), requestAnimationFrame(() => {
|
|
39
|
+
const a = g.current;
|
|
40
|
+
a && (a.querySelector('[data-testid="toggle-minimize-btn"]') ?? I(a))?.focus({ preventScroll: !0 });
|
|
40
41
|
});
|
|
41
42
|
};
|
|
42
|
-
|
|
43
|
-
const
|
|
43
|
+
X(d && n, m, b);
|
|
44
|
+
const Q = n ? s ? {
|
|
44
45
|
inset: 0,
|
|
45
46
|
maxHeight: "100dvh",
|
|
46
47
|
maxWidth: "100dvw",
|
|
@@ -57,107 +58,115 @@ var ue = (g) => {
|
|
|
57
58
|
maxWidth: "min(1000px, calc(100vw - 32px))",
|
|
58
59
|
height: "95dvh"
|
|
59
60
|
} : void 0;
|
|
60
|
-
return
|
|
61
|
+
return d ? /* @__PURE__ */ o(ie, { children: [
|
|
61
62
|
/* @__PURE__ */ e("div", {
|
|
62
63
|
ref: f,
|
|
63
64
|
style: {
|
|
64
65
|
zIndex: 51,
|
|
65
|
-
...
|
|
66
|
+
...w
|
|
66
67
|
},
|
|
67
|
-
className:
|
|
68
|
-
children: /* @__PURE__ */
|
|
69
|
-
className:
|
|
70
|
-
"data-testid":
|
|
68
|
+
className: c(p["minimized-dialog"], !t && p.hidden, v.minimized),
|
|
69
|
+
children: /* @__PURE__ */ o("div", {
|
|
70
|
+
className: te("flex items-center justify-between", !t && "hidden"),
|
|
71
|
+
"data-testid": _,
|
|
71
72
|
children: [/* @__PURE__ */ e("div", {
|
|
72
73
|
className: "max-w-[303px] truncate pr-1 text-lg font-semibold text-delta-800",
|
|
73
|
-
children: /* @__PURE__ */ e(
|
|
74
|
-
title:
|
|
74
|
+
children: /* @__PURE__ */ e(G, {
|
|
75
|
+
title: r,
|
|
75
76
|
placement: "top",
|
|
76
77
|
children: /* @__PURE__ */ e("div", {
|
|
77
78
|
className: "truncate",
|
|
78
|
-
children:
|
|
79
|
+
children: r
|
|
79
80
|
})
|
|
80
81
|
})
|
|
81
|
-
}), /* @__PURE__ */
|
|
82
|
+
}), /* @__PURE__ */ o("div", {
|
|
82
83
|
className: "flex items-center gap-x-1",
|
|
83
|
-
children: [/* @__PURE__ */ e(
|
|
84
|
+
children: [/* @__PURE__ */ e(P, {
|
|
84
85
|
type: "expand",
|
|
85
|
-
visibility:
|
|
86
|
-
onClick:
|
|
87
|
-
tooltipTitle:
|
|
88
|
-
}), /* @__PURE__ */ e(
|
|
86
|
+
visibility: V,
|
|
87
|
+
onClick: k,
|
|
88
|
+
tooltipTitle: i.expand
|
|
89
|
+
}), /* @__PURE__ */ e(D, {
|
|
89
90
|
buttonRef: C,
|
|
90
91
|
showCloseIcon: z,
|
|
91
|
-
onClick:
|
|
92
|
-
|
|
92
|
+
onClick: b,
|
|
93
|
+
disabledReason: h ? B : void 0,
|
|
94
|
+
tooltipTitle: i.close
|
|
93
95
|
})]
|
|
94
96
|
})]
|
|
95
97
|
})
|
|
96
98
|
}),
|
|
97
|
-
|
|
99
|
+
n && /* @__PURE__ */ e("div", {
|
|
98
100
|
className: "fixed inset-0 z-[52] bg-[rgb(98,110,126)] bg-opacity-70",
|
|
99
101
|
onClick: () => {
|
|
100
|
-
|
|
102
|
+
T(!1);
|
|
101
103
|
}
|
|
102
104
|
}),
|
|
103
|
-
/* @__PURE__ */
|
|
105
|
+
/* @__PURE__ */ o("div", {
|
|
104
106
|
style: {
|
|
105
107
|
zIndex: 51,
|
|
106
|
-
...
|
|
107
|
-
...
|
|
108
|
+
...w,
|
|
109
|
+
...Q
|
|
108
110
|
},
|
|
109
|
-
ref:
|
|
110
|
-
role:
|
|
111
|
-
"aria-modal":
|
|
112
|
-
"aria-label":
|
|
113
|
-
className:
|
|
114
|
-
children: [/* @__PURE__ */
|
|
115
|
-
className:
|
|
116
|
-
children: [/* @__PURE__ */
|
|
111
|
+
ref: m,
|
|
112
|
+
role: n ? "dialog" : void 0,
|
|
113
|
+
"aria-modal": n ? !0 : void 0,
|
|
114
|
+
"aria-label": n && typeof r == "string" ? r : void 0,
|
|
115
|
+
className: c(p.dialog, t && p.hidden, !l && v.maximized, l && v.fullscreen, n && "fixed z-[53] duration-0"),
|
|
116
|
+
children: [/* @__PURE__ */ o("div", {
|
|
117
|
+
className: c("flex flex-col border-b-[1px] border-delta-200 px-4", s ? "py-3" : "py-4"),
|
|
118
|
+
children: [/* @__PURE__ */ o("div", {
|
|
117
119
|
className: "flex items-center justify-between",
|
|
118
120
|
children: [x ? /* @__PURE__ */ e("div", {
|
|
119
121
|
className: "text-sm text-delta-700",
|
|
120
122
|
children: x
|
|
121
123
|
}) : /* @__PURE__ */ e("div", {
|
|
122
|
-
className:
|
|
123
|
-
children:
|
|
124
|
-
}), /* @__PURE__ */
|
|
124
|
+
className: c("font-semibold text-delta-800", s ? "line-clamp-2 text-xl" : "line-clamp-1 text-2xl"),
|
|
125
|
+
children: r
|
|
126
|
+
}), /* @__PURE__ */ o("div", {
|
|
125
127
|
className: "flex items-center gap-x-1",
|
|
126
128
|
children: [
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
129
|
+
/* @__PURE__ */ e(j.Provider, {
|
|
130
|
+
value: M,
|
|
131
|
+
children: $
|
|
132
|
+
}),
|
|
133
|
+
/* @__PURE__ */ e(P, {
|
|
134
|
+
visibility: O && !s && !l,
|
|
130
135
|
type: "minimize",
|
|
131
|
-
onClick:
|
|
132
|
-
tooltipTitle:
|
|
136
|
+
onClick: k,
|
|
137
|
+
tooltipTitle: i.minimize
|
|
133
138
|
}),
|
|
134
|
-
/* @__PURE__ */ e(
|
|
135
|
-
showFullScreenIcon:
|
|
136
|
-
fullScreen:
|
|
139
|
+
/* @__PURE__ */ e(Y, {
|
|
140
|
+
showFullScreenIcon: q && !s,
|
|
141
|
+
fullScreen: l,
|
|
137
142
|
onClick: () => {
|
|
138
|
-
|
|
143
|
+
T(!l);
|
|
139
144
|
},
|
|
140
|
-
tooltipTitle:
|
|
145
|
+
tooltipTitle: l ? i.exitFullscreen : i.fullscreen
|
|
141
146
|
}),
|
|
142
|
-
/* @__PURE__ */ e(
|
|
143
|
-
buttonRef:
|
|
147
|
+
/* @__PURE__ */ e(D, {
|
|
148
|
+
buttonRef: R,
|
|
144
149
|
showCloseIcon: z,
|
|
145
|
-
onClick:
|
|
146
|
-
|
|
150
|
+
onClick: b,
|
|
151
|
+
disabledReason: h ? B : void 0,
|
|
152
|
+
tooltipTitle: i.close
|
|
147
153
|
})
|
|
148
154
|
]
|
|
149
155
|
})]
|
|
150
156
|
}), x && /* @__PURE__ */ e("div", {
|
|
151
|
-
className:
|
|
152
|
-
children:
|
|
157
|
+
className: c("font-semibold text-delta-800", s ? "line-clamp-2 text-xl" : "line-clamp-1 text-2xl"),
|
|
158
|
+
children: r
|
|
153
159
|
})]
|
|
154
160
|
}), /* @__PURE__ */ e("div", {
|
|
155
|
-
className:
|
|
156
|
-
children:
|
|
161
|
+
className: c(t && "hidden", "flex flex-grow flex-col overflow-y-auto overscroll-contain"),
|
|
162
|
+
children: /* @__PURE__ */ e(j.Provider, {
|
|
163
|
+
value: M,
|
|
164
|
+
children: E
|
|
165
|
+
})
|
|
157
166
|
})]
|
|
158
167
|
})
|
|
159
168
|
] }) : null;
|
|
160
169
|
};
|
|
161
170
|
export {
|
|
162
|
-
|
|
171
|
+
ge as MinimizableDialogV2
|
|
163
172
|
};
|
|
@@ -1,7 +1,8 @@
|
|
|
1
|
-
import { useMemo as
|
|
1
|
+
import { useMemo as i } from "react";
|
|
2
2
|
var n = {
|
|
3
3
|
en: {
|
|
4
4
|
close: "Close",
|
|
5
|
+
waitUntilSaved: "Wait until saved",
|
|
5
6
|
expand: "Expand",
|
|
6
7
|
minimize: "Minimize",
|
|
7
8
|
fullscreen: "Fullscreen",
|
|
@@ -9,15 +10,16 @@ var n = {
|
|
|
9
10
|
},
|
|
10
11
|
no: {
|
|
11
12
|
close: "Lukk",
|
|
13
|
+
waitUntilSaved: "Vent til lagringen er ferdig",
|
|
12
14
|
expand: "Utvid",
|
|
13
15
|
minimize: "Minimer",
|
|
14
16
|
fullscreen: "Fullskjerm",
|
|
15
17
|
exitFullscreen: "Avslutt fullskjerm"
|
|
16
18
|
}
|
|
17
19
|
};
|
|
18
|
-
function
|
|
19
|
-
return
|
|
20
|
+
function t(e = "en") {
|
|
21
|
+
return i(() => n[e] ?? n.en, [e]);
|
|
20
22
|
}
|
|
21
23
|
export {
|
|
22
|
-
|
|
24
|
+
t as useTranslations
|
|
23
25
|
};
|
|
@@ -1,49 +1,99 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
1
|
+
import { StyledTooltip as L } from "../../data-display/tooltip/StyledTooltip.js";
|
|
2
|
+
import { LoadingIcon as N } from "../../icons/loading-icon/LoadingIcon.js";
|
|
3
|
+
import e from "./StyledButton.module.js";
|
|
4
|
+
import { useReportDialogBusy as O } from "../../feedback/dialog/DialogBusyContext.js";
|
|
5
|
+
import W from "clsx";
|
|
3
6
|
import "react";
|
|
4
|
-
import { jsx as
|
|
5
|
-
var
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
7
|
+
import { Fragment as _, jsx as r, jsxs as f } from "react/jsx-runtime";
|
|
8
|
+
var F = {
|
|
9
|
+
en: "In progress",
|
|
10
|
+
no: "Pågår"
|
|
11
|
+
}, c = {
|
|
12
|
+
contained: e.contained,
|
|
13
|
+
outlined: e.outlined,
|
|
14
|
+
text: e.text,
|
|
15
|
+
textGray: e.textGray,
|
|
16
|
+
textWhite: e.textWhite,
|
|
17
|
+
large: e.large,
|
|
18
|
+
small: e.small,
|
|
19
|
+
medium: e.medium,
|
|
20
|
+
error: e.error,
|
|
21
|
+
common: e.common
|
|
22
|
+
}, M = ({ variant: x = "contained", className: h = "", size: a = "medium", children: s, refLink: v, startIcon: B, endIcon: b, dataTest: g, error: S, style: w, disabled: p, disabledReason: d, loading: t, holdsDialog: I = !0, loadingAnnouncement: j, locale: k = "en", onClick: C, ...l }) => {
|
|
23
|
+
O(!!t && I);
|
|
24
|
+
const i = a === "large" || a === "medium", D = S ? "error" : "common", n = !!p && !!d, m = n || !!t, u = i ? 20 : 16, y = (o) => t && o ? /* @__PURE__ */ r("span", {
|
|
25
|
+
style: {
|
|
26
|
+
display: "inline-flex",
|
|
27
|
+
opacity: 0
|
|
28
|
+
},
|
|
29
|
+
children: o
|
|
30
|
+
}) : o, R = (o) => {
|
|
31
|
+
if (m) {
|
|
32
|
+
o.preventDefault();
|
|
33
|
+
return;
|
|
34
|
+
}
|
|
35
|
+
C?.(o);
|
|
36
|
+
}, G = /* @__PURE__ */ f("button", {
|
|
37
|
+
...l,
|
|
38
|
+
disabled: !!p && !m,
|
|
39
|
+
"aria-disabled": m ? !0 : l["aria-disabled"],
|
|
40
|
+
"aria-busy": t ? !0 : l["aria-busy"],
|
|
41
|
+
onClick: R,
|
|
42
|
+
className: W("asma-touch-ready", e["asma-ui-core-button"], c[x], c[D], c[a], h),
|
|
43
|
+
style: {
|
|
44
|
+
...s ? { flexShrink: 0 } : {},
|
|
45
|
+
...t ? { position: "relative" } : {},
|
|
46
|
+
...w
|
|
47
|
+
},
|
|
48
|
+
ref: v,
|
|
49
|
+
"data-testid": g,
|
|
27
50
|
children: [
|
|
28
|
-
|
|
29
|
-
|
|
51
|
+
y(B),
|
|
52
|
+
s && /* @__PURE__ */ r("div", {
|
|
30
53
|
style: {
|
|
54
|
+
opacity: t ? 0 : void 0,
|
|
31
55
|
overflow: "hidden",
|
|
32
56
|
textOverflow: "ellipsis",
|
|
33
57
|
whiteSpace: "nowrap",
|
|
34
58
|
display: "flex",
|
|
35
59
|
alignItems: "center",
|
|
36
60
|
justifyContent: "center",
|
|
37
|
-
gap:
|
|
38
|
-
paddingLeft:
|
|
39
|
-
paddingRight:
|
|
61
|
+
gap: i ? "8px" : "4px",
|
|
62
|
+
paddingLeft: i ? "8px" : "4px",
|
|
63
|
+
paddingRight: i ? "8px" : "4px"
|
|
40
64
|
},
|
|
41
|
-
children:
|
|
65
|
+
children: s
|
|
42
66
|
}),
|
|
43
|
-
|
|
67
|
+
y(b),
|
|
68
|
+
t && /* @__PURE__ */ r("span", {
|
|
69
|
+
"aria-hidden": "true",
|
|
70
|
+
style: {
|
|
71
|
+
position: "absolute",
|
|
72
|
+
inset: 0,
|
|
73
|
+
display: "flex",
|
|
74
|
+
alignItems: "center",
|
|
75
|
+
justifyContent: "center"
|
|
76
|
+
},
|
|
77
|
+
children: /* @__PURE__ */ r(N, {
|
|
78
|
+
width: u,
|
|
79
|
+
height: u
|
|
80
|
+
})
|
|
81
|
+
})
|
|
44
82
|
]
|
|
45
83
|
});
|
|
84
|
+
return /* @__PURE__ */ f(_, { children: [/* @__PURE__ */ r(L, {
|
|
85
|
+
arrow: !0,
|
|
86
|
+
title: d,
|
|
87
|
+
open: n ? void 0 : !1,
|
|
88
|
+
openOnTap: n,
|
|
89
|
+
persistentDescription: n,
|
|
90
|
+
children: G
|
|
91
|
+
}), t !== void 0 && /* @__PURE__ */ r("span", {
|
|
92
|
+
role: "status",
|
|
93
|
+
className: "sr-only",
|
|
94
|
+
children: t ? j ?? F[k] : ""
|
|
95
|
+
})] });
|
|
46
96
|
};
|
|
47
97
|
export {
|
|
48
|
-
|
|
98
|
+
M as StyledButton
|
|
49
99
|
};
|
|
@@ -1,16 +1,16 @@
|
|
|
1
|
-
var
|
|
2
|
-
"asma-ui-core-button": "_asma-ui-core-
|
|
3
|
-
contained:
|
|
4
|
-
common:
|
|
5
|
-
medium:
|
|
6
|
-
small:
|
|
7
|
-
large:
|
|
8
|
-
error:
|
|
9
|
-
outlined:
|
|
10
|
-
text:
|
|
11
|
-
textGray:
|
|
12
|
-
textWhite:
|
|
1
|
+
var _ = "_contained_w4qg4_6", t = "_common_w4qg4_6", a = "_medium_w4qg4_58", e = "_small_w4qg4_65", r = "_large_w4qg4_72", o = "_error_w4qg4_84", g = "_outlined_w4qg4_162", m = "_text_w4qg4_318", l = "_textGray_w4qg4_474", u = "_textWhite_w4qg4_552", n = {
|
|
2
|
+
"asma-ui-core-button": "_asma-ui-core-button_w4qg4_1",
|
|
3
|
+
contained: _,
|
|
4
|
+
common: t,
|
|
5
|
+
medium: a,
|
|
6
|
+
small: e,
|
|
7
|
+
large: r,
|
|
8
|
+
error: o,
|
|
9
|
+
outlined: g,
|
|
10
|
+
text: m,
|
|
11
|
+
textGray: l,
|
|
12
|
+
textWhite: u
|
|
13
13
|
};
|
|
14
14
|
export {
|
|
15
|
-
|
|
15
|
+
n as default
|
|
16
16
|
};
|
|
@@ -1,27 +1,27 @@
|
|
|
1
|
-
import { cn as
|
|
1
|
+
import { cn as v } from "../../../../helpers/cn.js";
|
|
2
|
+
import { StyledTooltip as J } from "../../../data-display/tooltip/StyledTooltip.js";
|
|
2
3
|
import { CloseIcon as j } from "../../../icons/close-icon/CloseIcon.js";
|
|
3
|
-
import { ErrorOutlineIcon as
|
|
4
|
-
import { StyledChip as
|
|
4
|
+
import { ErrorOutlineIcon as P } from "../../../icons/error-outline-icon/ErrorOutlineIcon.js";
|
|
5
|
+
import { StyledChip as Q } from "../../../data-display/chip/StyledChip.js";
|
|
5
6
|
import { StyledInteractiveChip as O } from "../../../data-display/interactive-chip/StyledInteractiveChip.js";
|
|
6
|
-
import { StyledTooltip as Q } from "../../../data-display/tooltip/StyledTooltip.js";
|
|
7
7
|
import { StyledButton as U } from "../../button/StyledButton.js";
|
|
8
8
|
import { useHelperAlertRole as X } from "../../../../helpers/useHelperAlertRole.js";
|
|
9
9
|
import { warnMissingErrorMessage as Y } from "../../../../helpers/warnMissingErrorMessage.js";
|
|
10
10
|
import { useWrap as Z } from "../helpers/useWrap.js";
|
|
11
|
-
import { Skeleton as
|
|
11
|
+
import { Skeleton as N } from "../../../mui-compat/Skeleton.js";
|
|
12
12
|
import { forwardRef as _, useEffect as ee, useId as te } from "react";
|
|
13
|
-
import { jsx as t, jsxs as
|
|
13
|
+
import { jsx as t, jsxs as T } from "react/jsx-runtime";
|
|
14
14
|
var he = _((V, A) => {
|
|
15
|
-
const { options: d, dataTest: R, value: r, readOnly: n, multiple: i, title:
|
|
15
|
+
const { options: d, dataTest: R, value: r, readOnly: n, multiple: i, title: C, disabled: b, onChange: p, required: D, error: f, helperText: I, valueKey: E = "value", labelKey: L = "label", renderLabel: o, getOptionTooltip: k, loading: $, size: g, locale: z = "en", clearSelectionLabel: B } = V, q = te();
|
|
16
16
|
Y("DynamicInteractiveChipGroup", f, I);
|
|
17
|
-
const G = X(f), { containerRef: m, wrapDisabled:
|
|
17
|
+
const G = X(f), { containerRef: m, wrapDisabled: w } = Z({ dependencyList: [d, d.length] });
|
|
18
18
|
ee(() => {
|
|
19
19
|
m.current && (m.current.inert = !0);
|
|
20
20
|
}, [m]);
|
|
21
|
-
const u = (e) => typeof e == "object" ? e?.[L]?.toString() ?? "" : e?.toString() ?? "",
|
|
22
|
-
const l =
|
|
21
|
+
const u = (e) => typeof e == "object" ? e?.[L]?.toString() ?? "" : e?.toString() ?? "", y = (e) => typeof e == "object" ? e?.[E] : e, c = (e) => {
|
|
22
|
+
const l = y(e);
|
|
23
23
|
return l == null ? "" : typeof l == "string" || typeof l == "number" || typeof l == "boolean" ? String(l) : e == null ? "" : u(e);
|
|
24
|
-
}, s = (e, l) =>
|
|
24
|
+
}, s = (e, l) => y(e) === y(l), K = i ? Array.isArray(r) && r.length > 0 : r != null, M = (e) => {
|
|
25
25
|
if (!i) {
|
|
26
26
|
const a = s(e, r) ? null : e;
|
|
27
27
|
if (a === null) return;
|
|
@@ -31,13 +31,13 @@ var he = _((V, A) => {
|
|
|
31
31
|
const l = r ?? [];
|
|
32
32
|
p(l.find((a) => s(a, e)) ? l.filter((a) => !s(a, e)) : [...l, e]);
|
|
33
33
|
}, h = n ? d.filter((e) => !!(i ? r?.find((l) => s(l, e)) : s(r, e))) : d, F = h.findIndex((e) => !(typeof e == "object" && e?.disabled) && !n);
|
|
34
|
-
return /* @__PURE__ */
|
|
34
|
+
return /* @__PURE__ */ T("div", {
|
|
35
35
|
"data-testid": `${R}-dynamic-radio-group`,
|
|
36
36
|
className: "relative flex flex-col gap-y-1",
|
|
37
37
|
children: [
|
|
38
|
-
|
|
38
|
+
C && /* @__PURE__ */ t("span", {
|
|
39
39
|
className: "text-base font-semibold text-delta-800",
|
|
40
|
-
children:
|
|
40
|
+
children: C
|
|
41
41
|
}),
|
|
42
42
|
/* @__PURE__ */ t("div", {
|
|
43
43
|
"aria-hidden": !0,
|
|
@@ -53,34 +53,34 @@ var he = _((V, A) => {
|
|
|
53
53
|
}, c(e)))
|
|
54
54
|
}),
|
|
55
55
|
/* @__PURE__ */ t("div", {
|
|
56
|
-
className:
|
|
57
|
-
children: $ ? /* @__PURE__ */
|
|
56
|
+
className: v("flex flex-wrap gap-2", w && "flex-col gap-1"),
|
|
57
|
+
children: $ ? /* @__PURE__ */ T("div", {
|
|
58
58
|
className: "flex flex-wrap gap-2",
|
|
59
59
|
children: [
|
|
60
|
-
/* @__PURE__ */ t(
|
|
61
|
-
/* @__PURE__ */ t(
|
|
62
|
-
/* @__PURE__ */ t(
|
|
60
|
+
/* @__PURE__ */ t(N, { className: "h-[32px] w-[60px]" }),
|
|
61
|
+
/* @__PURE__ */ t(N, { className: "h-[32px] w-[60px]" }),
|
|
62
|
+
/* @__PURE__ */ t(N, { className: "h-[32px] w-[60px]" })
|
|
63
63
|
]
|
|
64
64
|
}) : h?.length ? h.map((e, l) => {
|
|
65
65
|
const a = !!(i ? r?.find((W) => s(W, e)) : s(r, e)), H = k ? k(e) : null;
|
|
66
66
|
if (n && !a) return null;
|
|
67
67
|
const x = typeof e == "object" ? !!e?.disabled : !1, S = !x && !n && l === F ? A : void 0;
|
|
68
|
-
return /* @__PURE__ */ t(
|
|
68
|
+
return /* @__PURE__ */ t(J, {
|
|
69
69
|
title: H,
|
|
70
70
|
arrow: !0,
|
|
71
71
|
children: /* @__PURE__ */ t("span", {
|
|
72
|
-
className:
|
|
73
|
-
children: n && !
|
|
72
|
+
className: v(x && "cursor-not-allowed"),
|
|
73
|
+
children: n && !w ? /* @__PURE__ */ t(Q, {
|
|
74
74
|
ref: S,
|
|
75
|
-
disabled: !!
|
|
75
|
+
disabled: !!b || x,
|
|
76
76
|
classes: { root: "min-h-[32px] h-full" },
|
|
77
77
|
className: "w-fit",
|
|
78
78
|
dataTest: `ic-${c(e)}`,
|
|
79
79
|
label: o ? o(e) : u(e)
|
|
80
80
|
}) : /* @__PURE__ */ t(O, {
|
|
81
81
|
ref: S,
|
|
82
|
-
disabled: !!
|
|
83
|
-
classes:
|
|
82
|
+
disabled: !!b || x,
|
|
83
|
+
classes: w ? {
|
|
84
84
|
root: "border-none outline-none bg-transparent w-full flex justify-start h-full min-h-[40px] shadow-none",
|
|
85
85
|
label: "block whitespace-normal break-words overflow-visible"
|
|
86
86
|
} : { root: "min-h-[32px] h-full" },
|
|
@@ -89,7 +89,7 @@ var he = _((V, A) => {
|
|
|
89
89
|
type: i ? "checkbox" : "radio",
|
|
90
90
|
dataTest: `ic-${c(e)}`,
|
|
91
91
|
checked: a,
|
|
92
|
-
size:
|
|
92
|
+
size: g,
|
|
93
93
|
onClick: () => M(e),
|
|
94
94
|
label: o ? o(e) : u(e)
|
|
95
95
|
})
|
|
@@ -97,10 +97,10 @@ var he = _((V, A) => {
|
|
|
97
97
|
}, c(e));
|
|
98
98
|
}) : /* @__PURE__ */ t("span", { children: "-" })
|
|
99
99
|
}),
|
|
100
|
-
!D && K && !n && /* @__PURE__ */ t(U, {
|
|
100
|
+
!D && K && !n && !b && /* @__PURE__ */ t(U, {
|
|
101
101
|
dataTest: "clear-selection-btn",
|
|
102
102
|
variant: "text",
|
|
103
|
-
startIcon:
|
|
103
|
+
startIcon: g === "medium" ? /* @__PURE__ */ t(j, {
|
|
104
104
|
height: 24,
|
|
105
105
|
width: 24,
|
|
106
106
|
className: "size-6"
|
|
@@ -110,15 +110,15 @@ var he = _((V, A) => {
|
|
|
110
110
|
className: "size-5"
|
|
111
111
|
}),
|
|
112
112
|
className: "w-fit",
|
|
113
|
-
size:
|
|
113
|
+
size: g,
|
|
114
114
|
onClick: () => p(i ? [] : null),
|
|
115
115
|
children: B ?? (z === "en" ? "Clear selection" : "Fjern valget")
|
|
116
116
|
}),
|
|
117
|
-
/* @__PURE__ */
|
|
117
|
+
/* @__PURE__ */ T("div", {
|
|
118
118
|
id: q,
|
|
119
119
|
role: G,
|
|
120
|
-
className:
|
|
121
|
-
children: [f && /* @__PURE__ */ t(
|
|
120
|
+
className: v("flex min-h-[24px] items-center gap-1 pt-1 text-sm/5 text-delta-600", f && "text-error-500"),
|
|
121
|
+
children: [f && /* @__PURE__ */ t(P, {
|
|
122
122
|
width: 20,
|
|
123
123
|
height: 20,
|
|
124
124
|
className: "min-w-5"
|