asma-ui-core 3.108.4 → 3.110.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/data-display/interactive-chip/StyledInteractiveChip.js +18 -18
- package/dist/components/feedback/minimizable-dialog/MinimizableDialog.js +17 -15
- package/dist/components/feedback/minimizable-dialog/v2/MinimizableDialogV2.js +26 -24
- package/dist/components/inputs/dynamic-select/components/DynamicInteractiveChipGroup.js +59 -55
- package/dist/components/inputs/dynamic-select/components/DynamicSelectAutocomplete.js +88 -84
- package/dist/components/inputs/dynamic-select/components/DynamicSelectReadOnlyValue.js +15 -11
- package/dist/components/inputs/dynamic-select/components/DynamicSelectTitle.js +9 -0
- package/dist/components/inputs/field-styles.js +16 -6
- package/dist/components/inputs/form-layout/StyledFieldPair.js +22 -0
- package/dist/components/inputs/form-layout/StyledFieldPair.module.js +8 -0
- package/dist/components/inputs/form-layout/StyledFormColumn.js +13 -0
- package/dist/components/inputs/input-field/StyledInputField.js +235 -198
- package/dist/components/inputs/phone-field/StyledPhoneField.js +41 -39
- package/dist/components/inputs/search-field/StyledSearchField.js +22 -20
- package/dist/components/inputs/select/StyledSelect.js +110 -108
- package/dist/components/inputs/select-autocomplete/StyledSelectAutocomplete.js +111 -108
- package/dist/components/inputs/slider/StyledSlider.js +2 -2
- package/dist/components/inputs/textarea/StyledTextarea.js +50 -52
- package/dist/components/inputs/textarea/StyledTextarea.module.js +3 -3
- package/dist/components/miscellaneous/StyledFormControl.js +29 -25
- package/dist/components/miscellaneous/StyledInputLabel.js +28 -18
- package/dist/datetime/components/date-picker/components/BaseDatePickerInput.js +137 -122
- package/dist/datetime/components/date-picker/components/DatePickerInputRangeCompact.js +17 -15
- package/dist/datetime/components/date-picker/components/DatePickerInputRangeCompact.module.js +2 -2
- package/dist/datetime/components/date-picker/components/DatePickerInputSingle.js +9 -8
- package/dist/datetime/components/date-picker/components/StyledCalendarPickerSelectMonth.js +17 -14
- package/dist/datetime/components/date-picker/components/StyledCalendarPickerSelectYear.js +14 -9
- package/dist/datetime/components/time-picker/StyledTimePicker.js +78 -74
- package/dist/datetime/components/time-picker/TimePickerInput.js +43 -41
- package/dist/datetime/components/time-picker/helpers/timePickerWidth.js +12 -0
- package/dist/helpers/CharacterCounter.js +21 -0
- package/dist/index.js +219 -211
- package/dist/src/components/inputs/dynamic-select/components/DynamicSelectReadOnlyValue.d.ts +2 -2
- package/dist/src/components/inputs/dynamic-select/components/DynamicSelectTitle.d.ts +14 -0
- package/dist/src/components/inputs/dynamic-select/types.d.ts +11 -2
- package/dist/src/components/inputs/field-styles.d.ts +22 -0
- package/dist/src/components/inputs/form-layout/StyledFieldPair.d.ts +18 -0
- package/dist/src/components/inputs/form-layout/StyledFormColumn.d.ts +12 -0
- package/dist/src/components/inputs/form-layout/index.d.ts +4 -0
- package/dist/src/components/inputs/input-field/StyledInputField.d.ts +19 -4
- package/dist/src/components/inputs/select/StyledSelect.d.ts +7 -2
- package/dist/src/components/inputs/select-autocomplete/StyledSelectAutocomplete.d.ts +5 -1
- package/dist/src/components/inputs/textarea/StyledTextarea.d.ts +6 -0
- package/dist/src/components/miscellaneous/StyledFormControl.d.ts +5 -2
- package/dist/src/components/miscellaneous/StyledInputLabel.d.ts +7 -5
- package/dist/src/datetime/components/date-picker/components/BaseDatePickerInput.d.ts +2 -0
- package/dist/src/datetime/components/date-picker/types.d.ts +3 -0
- package/dist/src/datetime/components/time-picker/helpers/timePickerWidth.d.ts +7 -0
- package/dist/src/datetime/components/time-picker/types.d.ts +3 -1
- package/dist/src/helpers/CharacterCounter.d.ts +16 -0
- package/dist/src/helpers/CharacterCounter.test.d.ts +1 -0
- package/dist/src/index.d.ts +1 -0
- package/dist/tailwind.config.d.ts +14 -0
- package/package.json +1 -1
- package/src/styles/fieldWidthTokens.css +8 -0
- package/src/styles/index.css +1 -0
- package/tw-configs/twConfigs.json +14 -0
|
@@ -1,43 +1,43 @@
|
|
|
1
1
|
import { cn as o } from "../../../helpers/cn.js";
|
|
2
|
-
import { StyledChip as
|
|
3
|
-
import { StyledCheckbox as
|
|
2
|
+
import { StyledChip as v } from "../chip/StyledChip.js";
|
|
3
|
+
import { StyledCheckbox as f } from "../../inputs/checkbox/base-ui/StyledCheckbox.js";
|
|
4
4
|
import { StyledRadio as x } from "../../inputs/radio-button/base-ui/StyledRadio.js";
|
|
5
5
|
import i from "./StyledInteractiveChip.module.js";
|
|
6
|
-
import { forwardRef as
|
|
6
|
+
import { forwardRef as _ } from "react";
|
|
7
7
|
import { jsx as r } from "react/jsx-runtime";
|
|
8
|
-
var
|
|
9
|
-
const t = l === "checkbox", m = n ?? (typeof
|
|
10
|
-
dataTest:
|
|
8
|
+
var y = "[&[data-testid][role]]:border-gama-400 [&[data-testid][role]]:shadow-[inset_0_0_0_1px_var(--colors-gama-400)] [&[data-testid][role]]:bg-gama-25", S = { paddingLeft: "6px" }, R = _(({ type: l = "checkbox", checked: e, size: d = "small", ariaLabel: n, ...a }, c) => {
|
|
9
|
+
const t = l === "checkbox", m = n ?? (typeof a.label == "string" ? a.label : void 0), s = !a.readOnly && !t && !!e, b = t ? /* @__PURE__ */ r(f, {
|
|
10
|
+
dataTest: a.dataTest,
|
|
11
11
|
disableRipple: !0,
|
|
12
|
-
checked:
|
|
12
|
+
checked: e,
|
|
13
13
|
size: d,
|
|
14
|
-
readOnly:
|
|
14
|
+
readOnly: a.readOnly,
|
|
15
15
|
decorative: !0,
|
|
16
16
|
className: o("pointer-events-none", i.control)
|
|
17
17
|
}) : /* @__PURE__ */ r(x, {
|
|
18
|
-
dataTest:
|
|
19
|
-
checked:
|
|
18
|
+
dataTest: a.dataTest,
|
|
19
|
+
checked: e,
|
|
20
20
|
size: d,
|
|
21
21
|
decorative: !0,
|
|
22
22
|
className: o("pointer-events-none", i.control)
|
|
23
23
|
});
|
|
24
|
-
return /* @__PURE__ */ r(
|
|
24
|
+
return /* @__PURE__ */ r(v, {
|
|
25
25
|
ref: c,
|
|
26
26
|
"aria-label": m,
|
|
27
27
|
role: l,
|
|
28
|
-
"aria-checked": !!
|
|
29
|
-
"aria-readonly": t ?
|
|
28
|
+
"aria-checked": !!e,
|
|
29
|
+
"aria-readonly": t ? a.readOnly : void 0,
|
|
30
30
|
avatar: b,
|
|
31
31
|
clickable: !0,
|
|
32
32
|
tabIndex: 0,
|
|
33
|
-
...
|
|
34
|
-
className: o(s &&
|
|
33
|
+
...a,
|
|
34
|
+
className: o(s && y, a.className),
|
|
35
35
|
sx: {
|
|
36
|
-
...
|
|
37
|
-
...
|
|
36
|
+
...S,
|
|
37
|
+
...a.sx
|
|
38
38
|
}
|
|
39
39
|
});
|
|
40
40
|
});
|
|
41
41
|
export {
|
|
42
|
-
|
|
42
|
+
R as StyledInteractiveChip
|
|
43
43
|
};
|
|
@@ -12,21 +12,22 @@ import { OverlayBackOwnerContext as pe, useBackCloses as ge } from "../../../hoo
|
|
|
12
12
|
import { useFocusTrap as xe } from "../../../hooks/useFocusTrap.hook.js";
|
|
13
13
|
import { StyledMenu as ye } from "../../navigation/menu/StyledMenu.js";
|
|
14
14
|
import { StyledMenuItem as ke } from "../../navigation/menu/StyledMenuItem.js";
|
|
15
|
+
import { fullScreenFieldWidthVars as we } from "../../inputs/field-styles.js";
|
|
15
16
|
import T from "./MinimizableDialog.module.js";
|
|
16
|
-
import { useToggleMenuVisibility as
|
|
17
|
+
import { useToggleMenuVisibility as ze } from "../../../hooks/useToggleMenuVisibility.hook.js";
|
|
17
18
|
import H from "clsx";
|
|
18
|
-
import { useLayoutEffect as
|
|
19
|
+
import { useLayoutEffect as Ne, useRef as J, useState as Q } from "react";
|
|
19
20
|
import { Fragment as p, jsx as e, jsxs as l } from "react/jsx-runtime";
|
|
20
|
-
var
|
|
21
|
-
const [i, re] = Q(!1), [
|
|
21
|
+
var He = ({ onCloseText: v = "", onMinimizeText: C = "", onExpandText: I = "", onFullScreenText: M = "", showCloseIcon: R = !0, showMinimizeIcon: X = !0, showExpandIcon: Y = !0, showFullScreenIcon: Z = !0, title: m, label: g, children: x, open: y, onClose: L, className: j = "", primaryButtonText: S, primaryButtonLoading: n = !1, primaryButtonDisabled: B, primaryButtonDisabledReason: ee, secondaryButtonText: k, onPrimaryButtonClick: F, onSecondaryButtonClick: _, dataTest: E, actionNode: te, extraActions: d, extraActionsText: h, btnContainerClassName: G, footerClassName: ie, footerInfo: D, locale: t = "en", enableFullscreen: le = !0, fullScreenState: O, handleFullScreenState: V }) => {
|
|
22
|
+
const [i, re] = Q(!1), [q, ne] = Q(!1), { open: de, anchorEl: ae, handleOpen: oe, handleClose: se } = ze(), s = J(null), w = J(null), z = t === "en" ? "Wait until saved" : "Vent til lagringen er ferdig", b = () => {
|
|
22
23
|
if (n) return !1;
|
|
23
24
|
L();
|
|
24
|
-
}, o = O ??
|
|
25
|
+
}, o = O ?? q, a = o && !i;
|
|
25
26
|
if (xe(y && a, s, b), ge({
|
|
26
27
|
active: y && a,
|
|
27
28
|
requestClose: b,
|
|
28
29
|
ownerRef: s
|
|
29
|
-
}),
|
|
30
|
+
}), Ne(() => {
|
|
30
31
|
s.current?.toggleAttribute("inert", i), w.current?.toggleAttribute("inert", !i);
|
|
31
32
|
}, [i]), !y) return null;
|
|
32
33
|
const ce = a ? {
|
|
@@ -36,15 +37,16 @@ var Ke = ({ onCloseText: v = "", onMinimizeText: C = "", onExpandText: I = "", o
|
|
|
36
37
|
top: "50%",
|
|
37
38
|
transform: "translate(-50%, -50%)",
|
|
38
39
|
width: "min(1000px, calc(100vw - 32px))",
|
|
39
|
-
height: "95dvh"
|
|
40
|
-
|
|
40
|
+
height: "95dvh",
|
|
41
|
+
...we
|
|
42
|
+
} : void 0, W = o ? t === "en" ? "Exit full screen" : "Avslutt fullskjerm" : t === "en" ? "Full screen" : "Fullskjerm", P = S ?? n, U = P || k, $ = /* @__PURE__ */ l(p, { children: [k && _ && /* @__PURE__ */ e(r, {
|
|
41
43
|
dataTest: "cancel-button",
|
|
42
44
|
variant: "outlined",
|
|
43
45
|
disabled: n,
|
|
44
46
|
disabledReason: z,
|
|
45
47
|
onClick: _,
|
|
46
48
|
children: k
|
|
47
|
-
}),
|
|
49
|
+
}), P && F && /* @__PURE__ */ e(r, {
|
|
48
50
|
dataTest: "save-button",
|
|
49
51
|
loading: n,
|
|
50
52
|
locale: t,
|
|
@@ -151,14 +153,14 @@ var Ke = ({ onCloseText: v = "", onMinimizeText: C = "", onExpandText: I = "", o
|
|
|
151
153
|
}) })
|
|
152
154
|
}),
|
|
153
155
|
le && Z && /* @__PURE__ */ e(u, {
|
|
154
|
-
title:
|
|
156
|
+
title: W,
|
|
155
157
|
children: /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(r, {
|
|
156
158
|
dataTest: "fullscreen-button",
|
|
157
|
-
"aria-label": M ? void 0 :
|
|
159
|
+
"aria-label": M ? void 0 : W,
|
|
158
160
|
variant: "textGray",
|
|
159
161
|
size: "small",
|
|
160
162
|
onClick: () => {
|
|
161
|
-
O !== void 0 &&
|
|
163
|
+
O !== void 0 && V ? V() : ne(!q);
|
|
162
164
|
},
|
|
163
165
|
endIcon: o ? /* @__PURE__ */ e(be, {
|
|
164
166
|
width: 20,
|
|
@@ -231,12 +233,12 @@ var Ke = ({ onCloseText: v = "", onMinimizeText: C = "", onExpandText: I = "", o
|
|
|
231
233
|
}),
|
|
232
234
|
" ",
|
|
233
235
|
D,
|
|
234
|
-
|
|
236
|
+
U ? /* @__PURE__ */ e("div", {
|
|
235
237
|
className: f("flex justify-end gap-x-2", G),
|
|
236
238
|
children: $
|
|
237
239
|
}) : null
|
|
238
240
|
]
|
|
239
|
-
}) : /* @__PURE__ */ e(p, { children:
|
|
241
|
+
}) : /* @__PURE__ */ e(p, { children: U ? /* @__PURE__ */ e("div", {
|
|
240
242
|
className: f("flex justify-end gap-x-2 border-t-[1px] border-delta-200 p-4", G),
|
|
241
243
|
children: $
|
|
242
244
|
}) : null })]
|
|
@@ -246,5 +248,5 @@ var Ke = ({ onCloseText: v = "", onMinimizeText: C = "", onExpandText: I = "", o
|
|
|
246
248
|
] });
|
|
247
249
|
};
|
|
248
250
|
export {
|
|
249
|
-
|
|
251
|
+
He as MinimizableDialog
|
|
250
252
|
};
|
|
@@ -5,27 +5,28 @@ import { DialogBusyContext as A, useDialogBusyBoundary as ie } from "../../dialo
|
|
|
5
5
|
import { useMobileMediaQuery as le } from "../../../../hooks/useMediaQuery.hook.js";
|
|
6
6
|
import { OverlayBackOwnerContext as ne, useBackCloses as oe } from "../../../../hooks/useBackCloses.hook.js";
|
|
7
7
|
import { useFocusTrap as re } from "../../../../hooks/useFocusTrap.hook.js";
|
|
8
|
-
import {
|
|
9
|
-
import {
|
|
10
|
-
import {
|
|
8
|
+
import { fullScreenFieldWidthVars as se } from "../../../inputs/field-styles.js";
|
|
9
|
+
import { CloseBtn as V } from "../components/CloseBtn.js";
|
|
10
|
+
import { MinimizeBtn as $ } from "../components/MinimizeBtn.js";
|
|
11
|
+
import { FullScreenBtn as ce } from "../components/FullscreenBtn.js";
|
|
11
12
|
import h from "./MinimizableDialogV2.module.js";
|
|
12
|
-
import { useTranslations as
|
|
13
|
-
import { useControlledProps as
|
|
14
|
-
import
|
|
15
|
-
import { useId as
|
|
16
|
-
import { Fragment as
|
|
17
|
-
var
|
|
18
|
-
const { showCloseIcon: R = !0, showMinimizeIcon:
|
|
13
|
+
import { useTranslations as ae } from "./useTranslations.js";
|
|
14
|
+
import { useControlledProps as de } from "./useControlledProps.js";
|
|
15
|
+
import me from "clsx";
|
|
16
|
+
import { useId as q, useLayoutEffect as W, useRef as d } from "react";
|
|
17
|
+
import { Fragment as ue, jsx as e, jsxs as r } from "react/jsx-runtime";
|
|
18
|
+
var Me = (C) => {
|
|
19
|
+
const { showCloseIcon: R = !0, showMinimizeIcon: H = !0, showExpandIcon: L = !0, enableFullscreen: _ = !0, title: u, label: f, children: Q, open: i, onClose: U, classNameOverrides: b = {
|
|
19
20
|
maximized: "",
|
|
20
21
|
minimized: "",
|
|
21
22
|
fullscreen: ""
|
|
22
|
-
}, dataTest: G, actionNode: J, locale: K = "en", busyReason: X, style: N, initialFocusRef: S } = C, s = le(), l =
|
|
23
|
+
}, dataTest: G, actionNode: J, locale: K = "en", busyReason: X, style: N, initialFocusRef: S } = C, s = le(), l = ae(K), n = d(null), p = d(null), F = d(null), B = d(null), g = d(!1), y = d(null), x = q(), T = q(), { minimized: t, setMinimized: I, fullScreen: o, setFullScreen: M } = de(C), c = o && !t, { busy: z, busyReason: k, contextValue: E } = ie(X ?? l.waitUntilSaved), v = () => {
|
|
23
24
|
if (z) return !1;
|
|
24
25
|
I(!1), U();
|
|
25
26
|
};
|
|
26
|
-
|
|
27
|
+
W(() => {
|
|
27
28
|
n.current?.toggleAttribute("inert", t), p.current?.toggleAttribute("inert", !t);
|
|
28
|
-
}, [t]),
|
|
29
|
+
}, [t]), W(() => {
|
|
29
30
|
const w = i && !g.current, m = !i && g.current;
|
|
30
31
|
if (g.current = i, m) {
|
|
31
32
|
const D = y.current;
|
|
@@ -68,11 +69,12 @@ var Te = (C) => {
|
|
|
68
69
|
transform: "translate(-50%, -50%)",
|
|
69
70
|
width: "min(1000px, calc(100vw - 32px))",
|
|
70
71
|
maxWidth: "min(1000px, calc(100vw - 32px))",
|
|
71
|
-
height: "95dvh"
|
|
72
|
+
height: "95dvh",
|
|
73
|
+
...se
|
|
72
74
|
} : void 0;
|
|
73
75
|
if (!i) return null;
|
|
74
76
|
const Z = f ? `${T} ${x}` : x;
|
|
75
|
-
return /* @__PURE__ */ r(
|
|
77
|
+
return /* @__PURE__ */ r(ue, { children: [
|
|
76
78
|
/* @__PURE__ */ e("div", {
|
|
77
79
|
ref: p,
|
|
78
80
|
style: {
|
|
@@ -81,7 +83,7 @@ var Te = (C) => {
|
|
|
81
83
|
},
|
|
82
84
|
className: a(h["minimized-dialog"], !t && h.hidden, b.minimized),
|
|
83
85
|
children: /* @__PURE__ */ r("div", {
|
|
84
|
-
className:
|
|
86
|
+
className: me("flex items-center justify-between", !t && "hidden"),
|
|
85
87
|
"data-testid": G,
|
|
86
88
|
children: [/* @__PURE__ */ e("div", {
|
|
87
89
|
className: "max-w-[303px] truncate pr-1 text-lg font-semibold text-delta-800",
|
|
@@ -95,12 +97,12 @@ var Te = (C) => {
|
|
|
95
97
|
})
|
|
96
98
|
}), /* @__PURE__ */ r("div", {
|
|
97
99
|
className: "flex items-center gap-x-1",
|
|
98
|
-
children: [/* @__PURE__ */ e(
|
|
100
|
+
children: [/* @__PURE__ */ e($, {
|
|
99
101
|
type: "expand",
|
|
100
|
-
visibility:
|
|
102
|
+
visibility: L,
|
|
101
103
|
onClick: j,
|
|
102
104
|
tooltipTitle: l.expand
|
|
103
|
-
}), /* @__PURE__ */ e(
|
|
105
|
+
}), /* @__PURE__ */ e(V, {
|
|
104
106
|
buttonRef: B,
|
|
105
107
|
showCloseIcon: R,
|
|
106
108
|
onClick: v,
|
|
@@ -148,13 +150,13 @@ var Te = (C) => {
|
|
|
148
150
|
value: E,
|
|
149
151
|
children: J
|
|
150
152
|
}),
|
|
151
|
-
/* @__PURE__ */ e(
|
|
152
|
-
visibility:
|
|
153
|
+
/* @__PURE__ */ e($, {
|
|
154
|
+
visibility: H && !s && !o,
|
|
153
155
|
type: "minimize",
|
|
154
156
|
onClick: j,
|
|
155
157
|
tooltipTitle: l.minimize
|
|
156
158
|
}),
|
|
157
|
-
/* @__PURE__ */ e(
|
|
159
|
+
/* @__PURE__ */ e(ce, {
|
|
158
160
|
showFullScreenIcon: _ && !s,
|
|
159
161
|
fullScreen: o,
|
|
160
162
|
onClick: () => {
|
|
@@ -162,7 +164,7 @@ var Te = (C) => {
|
|
|
162
164
|
},
|
|
163
165
|
tooltipTitle: o ? l.exitFullscreen : l.fullscreen
|
|
164
166
|
}),
|
|
165
|
-
/* @__PURE__ */ e(
|
|
167
|
+
/* @__PURE__ */ e(V, {
|
|
166
168
|
buttonRef: F,
|
|
167
169
|
showCloseIcon: R,
|
|
168
170
|
onClick: v,
|
|
@@ -188,5 +190,5 @@ var Te = (C) => {
|
|
|
188
190
|
] });
|
|
189
191
|
};
|
|
190
192
|
export {
|
|
191
|
-
|
|
193
|
+
Me as MinimizableDialogV2
|
|
192
194
|
};
|
|
@@ -1,43 +1,47 @@
|
|
|
1
1
|
import { cn as v } from "../../../../helpers/cn.js";
|
|
2
|
-
import { StyledTooltip as
|
|
2
|
+
import { StyledTooltip as Q } from "../../../data-display/tooltip/StyledTooltip.js";
|
|
3
3
|
import { CloseIcon as j } from "../../../icons/close-icon/CloseIcon.js";
|
|
4
|
-
import { ErrorOutlineIcon as
|
|
5
|
-
import { StyledChip as
|
|
4
|
+
import { ErrorOutlineIcon as U } from "../../../icons/error-outline-icon/ErrorOutlineIcon.js";
|
|
5
|
+
import { StyledChip as X } from "../../../data-display/chip/StyledChip.js";
|
|
6
6
|
import { StyledInteractiveChip as O } from "../../../data-display/interactive-chip/StyledInteractiveChip.js";
|
|
7
|
-
import { StyledButton as
|
|
8
|
-
import { useHelperAlertRole as
|
|
9
|
-
import { warnMissingErrorMessage as
|
|
10
|
-
import {
|
|
7
|
+
import { StyledButton as Y } from "../../button/StyledButton.js";
|
|
8
|
+
import { useHelperAlertRole as Z } from "../../../../helpers/useHelperAlertRole.js";
|
|
9
|
+
import { warnMissingErrorMessage as _ } from "../../../../helpers/warnMissingErrorMessage.js";
|
|
10
|
+
import { fieldWidthStyle as ee } from "../../field-styles.js";
|
|
11
|
+
import { useWrap as te } from "../helpers/useWrap.js";
|
|
12
|
+
import { DynamicSelectTitle as le } from "./DynamicSelectTitle.js";
|
|
11
13
|
import { Skeleton as N } from "../../../mui-compat/Skeleton.js";
|
|
12
|
-
import { forwardRef as
|
|
13
|
-
import { jsx as t, jsxs as
|
|
14
|
-
var
|
|
15
|
-
const { options: d, dataTest:
|
|
16
|
-
|
|
17
|
-
const
|
|
18
|
-
|
|
14
|
+
import { forwardRef as re, useEffect as ie, useId as ae } from "react";
|
|
15
|
+
import { jsx as t, jsxs as S } from "react/jsx-runtime";
|
|
16
|
+
var ve = re((V, A) => {
|
|
17
|
+
const { options: d, dataTest: D, value: r, readOnly: a, multiple: n, title: R, titleSize: z, width: T = "full", disabled: b, onChange: p, required: E, error: f, helperText: C, valueKey: L = "value", labelKey: $ = "label", renderLabel: o, getOptionTooltip: I, loading: B, size: y, locale: q = "en", clearSelectionLabel: G } = V, K = ae();
|
|
18
|
+
_("DynamicInteractiveChipGroup", f, C);
|
|
19
|
+
const M = Z(f), { containerRef: m, wrapDisabled: w } = te({ dependencyList: [d, d.length] });
|
|
20
|
+
ie(() => {
|
|
19
21
|
m.current && (m.current.inert = !0);
|
|
20
22
|
}, [m]);
|
|
21
|
-
const u = (e) => typeof e == "object" ? e?.[
|
|
22
|
-
const l =
|
|
23
|
+
const u = (e) => typeof e == "object" ? e?.[$]?.toString() ?? "" : e?.toString() ?? "", g = (e) => typeof e == "object" ? e?.[L] : e, c = (e) => {
|
|
24
|
+
const l = g(e);
|
|
23
25
|
return l == null ? "" : typeof l == "string" || typeof l == "number" || typeof l == "boolean" ? String(l) : e == null ? "" : u(e);
|
|
24
|
-
}, s = (e, l) =>
|
|
25
|
-
if (!
|
|
26
|
-
const
|
|
27
|
-
if (
|
|
28
|
-
p(
|
|
26
|
+
}, s = (e, l) => g(e) === g(l), W = n ? Array.isArray(r) && r.length > 0 : r != null, F = (e) => {
|
|
27
|
+
if (!n) {
|
|
28
|
+
const i = s(e, r) ? null : e;
|
|
29
|
+
if (i === null) return;
|
|
30
|
+
p(i);
|
|
29
31
|
return;
|
|
30
32
|
}
|
|
31
33
|
const l = r ?? [];
|
|
32
|
-
p(l.find((
|
|
33
|
-
}, h =
|
|
34
|
-
return /* @__PURE__ */
|
|
35
|
-
"data-testid": `${
|
|
34
|
+
p(l.find((i) => s(i, e)) ? l.filter((i) => !s(i, e)) : [...l, e]);
|
|
35
|
+
}, h = a ? d.filter((e) => !!(n ? r?.find((l) => s(l, e)) : s(r, e))) : d, H = h.findIndex((e) => !(typeof e == "object" && e?.disabled) && !a);
|
|
36
|
+
return /* @__PURE__ */ S("div", {
|
|
37
|
+
"data-testid": `${D}-dynamic-radio-group`,
|
|
36
38
|
className: "relative flex flex-col gap-y-1",
|
|
39
|
+
"data-field-width": T,
|
|
40
|
+
style: ee(T),
|
|
37
41
|
children: [
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
42
|
+
/* @__PURE__ */ t(le, {
|
|
43
|
+
title: R,
|
|
44
|
+
titleSize: z
|
|
41
45
|
}),
|
|
42
46
|
/* @__PURE__ */ t("div", {
|
|
43
47
|
"aria-hidden": !0,
|
|
@@ -46,15 +50,15 @@ var he = _((V, A) => {
|
|
|
46
50
|
style: { width: "100%" },
|
|
47
51
|
children: h.map((e) => /* @__PURE__ */ t(O, {
|
|
48
52
|
className: "w-fit",
|
|
49
|
-
readOnly:
|
|
50
|
-
type:
|
|
53
|
+
readOnly: a,
|
|
54
|
+
type: n ? "checkbox" : "radio",
|
|
51
55
|
dataTest: `ic-${c(e)}-hidden`,
|
|
52
56
|
label: o ? o(e) : u(e)
|
|
53
57
|
}, c(e)))
|
|
54
58
|
}),
|
|
55
59
|
/* @__PURE__ */ t("div", {
|
|
56
60
|
className: v("flex flex-wrap gap-2", w && "flex-col gap-1"),
|
|
57
|
-
children:
|
|
61
|
+
children: B ? /* @__PURE__ */ S("div", {
|
|
58
62
|
className: "flex flex-wrap gap-2",
|
|
59
63
|
children: [
|
|
60
64
|
/* @__PURE__ */ t(N, { className: "h-[32px] w-[60px]" }),
|
|
@@ -62,45 +66,45 @@ var he = _((V, A) => {
|
|
|
62
66
|
/* @__PURE__ */ t(N, { className: "h-[32px] w-[60px]" })
|
|
63
67
|
]
|
|
64
68
|
}) : h?.length ? h.map((e, l) => {
|
|
65
|
-
const
|
|
66
|
-
if (
|
|
67
|
-
const x = typeof e == "object" ? !!e?.disabled : !1,
|
|
68
|
-
return /* @__PURE__ */ t(
|
|
69
|
-
title:
|
|
69
|
+
const i = !!(n ? r?.find((P) => s(P, e)) : s(r, e)), J = I ? I(e) : null;
|
|
70
|
+
if (a && !i) return null;
|
|
71
|
+
const x = typeof e == "object" ? !!e?.disabled : !1, k = !x && !a && l === H ? A : void 0;
|
|
72
|
+
return /* @__PURE__ */ t(Q, {
|
|
73
|
+
title: J,
|
|
70
74
|
arrow: !0,
|
|
71
75
|
children: /* @__PURE__ */ t("span", {
|
|
72
76
|
className: v(x && "cursor-not-allowed"),
|
|
73
|
-
children:
|
|
74
|
-
ref:
|
|
77
|
+
children: a && !w ? /* @__PURE__ */ t(X, {
|
|
78
|
+
ref: k,
|
|
75
79
|
disabled: !!b || x,
|
|
76
80
|
classes: { root: "min-h-[32px] h-full" },
|
|
77
81
|
className: "w-fit",
|
|
78
82
|
dataTest: `ic-${c(e)}`,
|
|
79
83
|
label: o ? o(e) : u(e)
|
|
80
84
|
}) : /* @__PURE__ */ t(O, {
|
|
81
|
-
ref:
|
|
85
|
+
ref: k,
|
|
82
86
|
disabled: !!b || x,
|
|
83
87
|
classes: w ? {
|
|
84
88
|
root: "border-none outline-none bg-transparent w-full flex justify-start h-full min-h-[40px] shadow-none",
|
|
85
89
|
label: "block whitespace-normal break-words overflow-visible"
|
|
86
90
|
} : { root: "min-h-[32px] h-full" },
|
|
87
91
|
className: "w-fit",
|
|
88
|
-
readOnly:
|
|
89
|
-
type:
|
|
92
|
+
readOnly: a,
|
|
93
|
+
type: n ? "checkbox" : "radio",
|
|
90
94
|
dataTest: `ic-${c(e)}`,
|
|
91
|
-
checked:
|
|
92
|
-
size:
|
|
93
|
-
onClick: () =>
|
|
95
|
+
checked: i,
|
|
96
|
+
size: y,
|
|
97
|
+
onClick: () => F(e),
|
|
94
98
|
label: o ? o(e) : u(e)
|
|
95
99
|
})
|
|
96
100
|
})
|
|
97
101
|
}, c(e));
|
|
98
102
|
}) : /* @__PURE__ */ t("span", { children: "-" })
|
|
99
103
|
}),
|
|
100
|
-
!
|
|
104
|
+
!E && W && !a && !b && /* @__PURE__ */ t(Y, {
|
|
101
105
|
dataTest: "clear-selection-btn",
|
|
102
106
|
variant: "text",
|
|
103
|
-
startIcon:
|
|
107
|
+
startIcon: y === "medium" ? /* @__PURE__ */ t(j, {
|
|
104
108
|
height: 24,
|
|
105
109
|
width: 24,
|
|
106
110
|
className: "size-6"
|
|
@@ -110,26 +114,26 @@ var he = _((V, A) => {
|
|
|
110
114
|
className: "size-5"
|
|
111
115
|
}),
|
|
112
116
|
className: "w-fit",
|
|
113
|
-
size:
|
|
114
|
-
onClick: () => p(
|
|
115
|
-
children:
|
|
117
|
+
size: y,
|
|
118
|
+
onClick: () => p(n ? [] : null),
|
|
119
|
+
children: G ?? (q === "en" ? "Clear selection" : "Fjern valget")
|
|
116
120
|
}),
|
|
117
|
-
/* @__PURE__ */
|
|
118
|
-
id:
|
|
119
|
-
role:
|
|
121
|
+
/* @__PURE__ */ S("div", {
|
|
122
|
+
id: K,
|
|
123
|
+
role: M,
|
|
120
124
|
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(
|
|
125
|
+
children: [f && /* @__PURE__ */ t(U, {
|
|
122
126
|
width: 20,
|
|
123
127
|
height: 20,
|
|
124
128
|
className: "min-w-5"
|
|
125
129
|
}), /* @__PURE__ */ t("span", {
|
|
126
130
|
className: "line-clamp-1",
|
|
127
|
-
children:
|
|
131
|
+
children: C
|
|
128
132
|
})]
|
|
129
133
|
})
|
|
130
134
|
]
|
|
131
135
|
});
|
|
132
136
|
});
|
|
133
137
|
export {
|
|
134
|
-
|
|
138
|
+
ve as DynamicInteractiveChipGroup
|
|
135
139
|
};
|