@burdenoff/microfe-bigconsole 2026.928.2 → 2026.929.2

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.
Files changed (14) hide show
  1. package/dist/bigconsole/assistant/assistantProduct.js +4 -1
  2. package/dist/bigconsole/assistant/assistantProduct.js.map +1 -1
  3. package/dist/bigconsole/assistant/assistantPrompt.js +18 -14
  4. package/dist/bigconsole/assistant/assistantPrompt.js.map +1 -1
  5. package/dist/bigconsole/assistant/index.js +6 -6
  6. package/dist/bigconsole/components/widgets/ActionConfigDialog.js +410 -674
  7. package/dist/bigconsole/components/widgets/ActionConfigDialog.js.map +1 -1
  8. package/dist/bigconsole/components/widgets/PropertiesPanel.js +100 -97
  9. package/dist/bigconsole/components/widgets/PropertiesPanel.js.map +1 -1
  10. package/dist/bigconsole/components/widgets/WidgetWrapper.js +1 -5
  11. package/dist/bigconsole/components/widgets/WidgetWrapper.js.map +1 -1
  12. package/dist/bigconsole/components/widgets/actionConfig.js +56 -0
  13. package/dist/bigconsole/components/widgets/actionConfig.js.map +1 -0
  14. package/package.json +3 -3
package/dist/bigconsole/components/widgets/ActionConfigDialog.js CHANGED
@@ -1,20 +1,21 @@
1
1
  import { Section as e } from "../common/Section.js";
2
2
  import "../common/index.js";
3
3
  import { BIGCONSOLE_PERMISSIONS as t } from "../../../constants/permissions.js";
4
- import { memo as n, useCallback as r, useEffect as ee, useMemo as i, useRef as te, useState as a } from "react";
5
- import { PermissionButton as ne } from "@burdenoff/fe-libs/shared/components";
6
- import { ChevronDown as re, ChevronRight as ie, Pencil as ae, Plus as oe, Zap as se } from "lucide-react";
7
- import { Button as ce, Checkbox as o, Dialog as le, DialogContent as ue, DialogDescription as de, DialogFooter as fe, DialogHeader as pe, DialogTitle as me, Input as s, Select as c, SelectContent as l, SelectItem as u, SelectTrigger as d, SelectValue as f, Spinner as he, Textarea as ge } from "@burdenoff/fe-libs/ui";
8
- import { jsx as p, jsxs as m } from "react/jsx-runtime";
9
- import { useI18n as _e } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
4
+ import { serializeActionConfig as ee, slugifyActionName as n, validateActionConfig as te } from "./actionConfig.js";
5
+ import { memo as r, useCallback as i, useEffect as ne, useId as re, useMemo as ie, useRef as a, useState as o } from "react";
6
+ import { PermissionButton as ae } from "@burdenoff/fe-libs/shared/components";
7
+ import { ChevronDown as oe, ChevronRight as se } from "lucide-react";
8
+ import { Button as ce, Checkbox as s, Input as c, ResponsiveDialog as le, ResponsiveDialogContent as ue, ResponsiveDialogDescription as de, ResponsiveDialogFooter as fe, ResponsiveDialogHeader as pe, ResponsiveDialogTitle as me, Select as l, SelectContent as u, SelectItem as he, SelectTrigger as ge, SelectValue as _e, Spinner as ve, Textarea as ye } from "@burdenoff/fe-libs/ui";
9
+ import { Fragment as be, jsx as d, jsxs as f } from "react/jsx-runtime";
10
+ import { useI18n as xe } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
10
11
  //#region src/bigconsole/components/widgets/ActionConfigDialog.tsx
11
- var ve = [
12
+ var Se = [
12
13
  "POST",
13
14
  "GET",
14
15
  "PUT",
15
16
  "PATCH",
16
17
  "DELETE"
17
- ], ye = [
18
+ ], Ce = [
18
19
  {
19
20
  value: "PRIMARY",
20
21
  color: "var(--color-action-primary-bg)"
@@ -34,8 +35,16 @@ var ve = [
34
35
  {
35
36
  value: "DANGER",
36
37
  color: "var(--color-action-danger-bg)"
38
+ },
39
+ {
40
+ value: "GHOST",
41
+ color: "transparent"
42
+ },
43
+ {
44
+ value: "LINK",
45
+ color: "transparent"
37
46
  }
38
- ], be = [
47
+ ], we = [
39
48
  "",
40
49
  "refresh",
41
50
  "download",
@@ -50,145 +59,112 @@ var ve = [
50
59
  "settings",
51
60
  "filter",
52
61
  "search"
53
- ];
54
- function h(e) {
55
- return e.trim().toLowerCase().replace(/[^a-z0-9]+/g, "_").replace(/^_+|_+$/g, "");
56
- }
57
- var g = {
62
+ ], p = {
58
63
  display: "block",
59
64
  fontSize: "var(--font-size-body-sm)",
60
65
  fontWeight: "var(--font-weight-medium)",
61
66
  color: "var(--color-text-primary)",
62
67
  marginBottom: "var(--space-controlGap)"
63
- }, xe = {
68
+ }, Te = {
64
69
  margin: "0 0 var(--space-controlGap) 0",
65
70
  fontSize: "var(--font-size-body-sm)",
66
71
  fontWeight: "var(--font-weight-bold)",
67
72
  letterSpacing: "0.06em",
68
73
  textTransform: "uppercase",
69
74
  color: "var(--color-text-secondary)"
70
- }, _ = {
75
+ }, m = {
71
76
  fontSize: "var(--font-size-body-sm)",
72
77
  color: "var(--color-text-muted)",
73
78
  marginTop: "var(--space-controlGap)"
74
- }, v = {
79
+ }, h = {
75
80
  zIndex: 9999,
76
81
  backgroundColor: "var(--color-overlay-popoverBg, var(--color-bg-surface))",
77
82
  border: "1px solid var(--color-border-subtle)",
78
83
  boxShadow: "var(--shadow-elevation-3)",
79
84
  borderRadius: "var(--radius-button)"
80
- }, y = n(function({ isOpen: n, action: y, initialWebhook: b, isLoading: x = !1, saveError: Se, onClose: Ce, onSave: we }) {
81
- let { t: S } = _e(), C = !!y, Te = te(null), w = te(!1), [T, E] = a(""), [D, O] = a(""), [k, A] = a(!1), [j, M] = a("PRIMARY"), [N, Ee] = a(""), [P, F] = a("WEBHOOK"), [I, L] = a(""), [R, z] = a("POST"), [B, V] = a(!1), [H, U] = a(!1), [W, De] = a(!1), [G, K] = a(!1), [q, J] = a(() => S("bigconsole.widget.actions.confirm.defaultTitle", "Confirm Action")), [Oe, Y] = a(() => S("bigconsole.widget.actions.confirm.defaultMessage", "Are you sure you want to proceed?")), [ke, X] = a(() => S("bigconsole.widget.actions.confirm.defaultConfirmLabel", "Confirm")), [Ae, Z] = a(() => S("bigconsole.widget.actions.confirm.defaultCancelLabel", "Cancel")), [Q, $] = a(null), je = i(() => [{
82
- value: "WEBHOOK",
83
- label: S("bigconsole.widget.actions.outcome.webhook.label", "Call a webhook / my API"),
84
- hint: S("bigconsole.widget.actions.outcome.webhook.hint", "Sends an HTTP request to the URL below every time the button is clicked.")
85
- }, {
86
- value: "EMIT",
87
- label: S("bigconsole.widget.actions.outcome.emit.label", "Just emit an event (advanced)"),
88
- hint: S("bigconsole.widget.actions.outcome.emit.hint", "Emits widget:<name>:clicked. Wire it up yourself in the Webhooks/Events section.")
89
- }], [S]), Me = i(() => {
85
+ }, g = r(function({ isOpen: r, action: g, initialWebhook: _, isLoading: v = !1, saveError: Ee, onClose: De, onSave: Oe }) {
86
+ let { t: y } = xe(), b = !!g, x = a(null), ke = a(null), Ae = a(null), S = re(), C = a(""), w = a(!1), [T, E] = o(""), [D, O] = o(""), [k, A] = o(!1), [j, M] = o("PRIMARY"), [N, je] = o(""), [P, F] = o("WEBHOOK"), [I, L] = o(""), [R, z] = o("POST"), [B, V] = o(!1), [H, U] = o(!1), [W, G] = o(!1), [K, Me] = o(!1), [Ne, q] = o(() => y("bigconsole.widget.actions.confirm.defaultTitle", "Confirm Action")), [Pe, J] = o(() => y("bigconsole.widget.actions.confirm.defaultMessage", "Are you sure you want to proceed?")), [Y, X] = o(() => y("bigconsole.widget.actions.confirm.defaultConfirmLabel", "Confirm")), [Fe, Z] = o(() => y("bigconsole.widget.actions.confirm.defaultCancelLabel", "Cancel")), [Q, $] = o(null), Ie = ie(() => {
90
87
  let e = {
91
- PRIMARY: S("bigconsole.widget.actions.style.primary", "Primary"),
92
- SECONDARY: S("bigconsole.widget.actions.style.secondary", "Secondary"),
93
- SUCCESS: S("bigconsole.widget.actions.style.success", "Success"),
94
- WARNING: S("bigconsole.widget.actions.style.warning", "Warning"),
95
- DANGER: S("bigconsole.widget.actions.style.danger", "Danger"),
96
- GHOST: S("bigconsole.widget.actions.style.ghost", "Ghost"),
97
- LINK: S("bigconsole.widget.actions.style.link", "Link")
88
+ PRIMARY: y("bigconsole.widget.actions.style.primary", "Primary"),
89
+ SECONDARY: y("bigconsole.widget.actions.style.secondary", "Secondary"),
90
+ SUCCESS: y("bigconsole.widget.actions.style.success", "Success"),
91
+ WARNING: y("bigconsole.widget.actions.style.warning", "Warning"),
92
+ DANGER: y("bigconsole.widget.actions.style.danger", "Danger"),
93
+ GHOST: y("bigconsole.widget.actions.style.ghost", "Ghost"),
94
+ LINK: y("bigconsole.widget.actions.style.link", "Link")
98
95
  };
99
- return ye.map((t) => ({
96
+ return Ce.map((t) => ({
100
97
  value: t.value,
101
98
  label: e[t.value],
102
99
  color: t.color
103
100
  }));
104
- }, [S]), Ne = i(() => {
101
+ }, [y]), Le = ie(() => {
105
102
  let e = {
106
- "": S("bigconsole.widget.actions.icon.none", "No icon"),
107
- refresh: S("bigconsole.widget.actions.icon.refresh", "Refresh"),
108
- download: S("bigconsole.widget.actions.icon.download", "Download"),
109
- upload: S("bigconsole.widget.actions.icon.upload", "Upload"),
110
- trash: S("bigconsole.widget.actions.icon.trash", "Trash"),
111
- edit: S("bigconsole.widget.actions.icon.edit", "Edit"),
112
- plus: S("bigconsole.widget.actions.icon.plus", "Plus"),
113
- check: S("bigconsole.widget.actions.icon.check", "Check"),
114
- eye: S("bigconsole.widget.actions.icon.eye", "View"),
115
- copy: S("bigconsole.widget.actions.icon.copy", "Copy"),
116
- share: S("bigconsole.widget.actions.icon.share", "Share"),
117
- settings: S("bigconsole.widget.actions.icon.settings", "Settings"),
118
- filter: S("bigconsole.widget.actions.icon.filter", "Filter"),
119
- search: S("bigconsole.widget.actions.icon.search", "Search")
103
+ "": y("bigconsole.widget.actions.icon.none", "No icon"),
104
+ refresh: y("bigconsole.widget.actions.icon.refresh", "Refresh"),
105
+ download: y("bigconsole.widget.actions.icon.download", "Download"),
106
+ upload: y("bigconsole.widget.actions.icon.upload", "Upload"),
107
+ trash: y("bigconsole.widget.actions.icon.trash", "Trash"),
108
+ edit: y("bigconsole.widget.actions.icon.edit", "Edit"),
109
+ plus: y("bigconsole.widget.actions.icon.plus", "Plus"),
110
+ check: y("bigconsole.widget.actions.icon.check", "Check"),
111
+ eye: y("bigconsole.widget.actions.icon.eye", "View"),
112
+ copy: y("bigconsole.widget.actions.icon.copy", "Copy"),
113
+ share: y("bigconsole.widget.actions.icon.share", "Share"),
114
+ settings: y("bigconsole.widget.actions.icon.settings", "Settings"),
115
+ filter: y("bigconsole.widget.actions.icon.filter", "Filter"),
116
+ search: y("bigconsole.widget.actions.icon.search", "Search")
120
117
  };
121
- return be.map((t) => ({
118
+ return we.map((t) => ({
122
119
  value: t,
123
120
  label: e[t]
124
121
  }));
125
- }, [S]);
126
- ee(() => {
127
- if (!n) return;
128
- w.current = !1, L(""), z("POST"), y ? (E(y.label), O(y.name), A(!1), M(y.style), Ee(y.icon || ""), V(y.disabled), U(y.hidden), F("EMIT"), K(!!y.confirmation), y.confirmation ? (J(y.confirmation.title), Y(y.confirmation.message), X(y.confirmation.confirmLabel || S("bigconsole.widget.actions.confirm.defaultConfirmLabel", "Confirm")), Z(y.confirmation.cancelLabel || S("bigconsole.widget.actions.confirm.defaultCancelLabel", "Cancel"))) : (J(S("bigconsole.widget.actions.confirm.defaultTitle", "Confirm Action")), Y(S("bigconsole.widget.actions.confirm.defaultMessage", "Are you sure you want to proceed?")), X(S("bigconsole.widget.actions.confirm.defaultConfirmLabel", "Confirm")), Z(S("bigconsole.widget.actions.confirm.defaultCancelLabel", "Cancel")))) : (E(""), O(""), A(!1), M("PRIMARY"), Ee(""), F("WEBHOOK"), V(!1), U(!1), K(!1), J(S("bigconsole.widget.actions.confirm.defaultTitle", "Confirm Action")), Y(S("bigconsole.widget.actions.confirm.defaultMessage", "Are you sure you want to proceed?")), X(S("bigconsole.widget.actions.confirm.defaultConfirmLabel", "Confirm")), Z(S("bigconsole.widget.actions.confirm.defaultCancelLabel", "Cancel"))), De(!1), $(null);
129
- let e = requestAnimationFrame(() => requestAnimationFrame(() => Te.current?.focus()));
122
+ }, [y]);
123
+ ne(() => {
124
+ if (!r) return;
125
+ w.current = !1, C.current = `button_${crypto.randomUUID().replace(/-/g, "").slice(0, 12)}`, L(""), z("POST"), g ? (E(g.label), O(g.name), A(!1), M(g.style), je(g.icon || ""), V(g.disabled), U(g.hidden), F("EMIT"), Me(!!g.confirmation), g.confirmation ? (q(g.confirmation.title), J(g.confirmation.message), X(g.confirmation.confirmLabel || y("bigconsole.widget.actions.confirm.defaultConfirmLabel", "Confirm")), Z(g.confirmation.cancelLabel || y("bigconsole.widget.actions.confirm.defaultCancelLabel", "Cancel"))) : (q(y("bigconsole.widget.actions.confirm.defaultTitle", "Confirm Action")), J(y("bigconsole.widget.actions.confirm.defaultMessage", "Are you sure you want to proceed?")), X(y("bigconsole.widget.actions.confirm.defaultConfirmLabel", "Confirm")), Z(y("bigconsole.widget.actions.confirm.defaultCancelLabel", "Cancel")))) : (E(""), O(""), A(!1), M("PRIMARY"), je(""), F("WEBHOOK"), V(!1), U(!1), Me(!1), q(y("bigconsole.widget.actions.confirm.defaultTitle", "Confirm Action")), J(y("bigconsole.widget.actions.confirm.defaultMessage", "Are you sure you want to proceed?")), X(y("bigconsole.widget.actions.confirm.defaultConfirmLabel", "Confirm")), Z(y("bigconsole.widget.actions.confirm.defaultCancelLabel", "Cancel"))), G(!1), $(null);
126
+ let e = requestAnimationFrame(() => requestAnimationFrame(() => x.current?.focus()));
130
127
  return () => cancelAnimationFrame(e);
131
128
  }, [
132
- n,
133
- y,
134
- S
135
- ]), ee(() => {
136
- !n || !b || w.current || (F("WEBHOOK"), L(b.url), z(b.method));
137
- }, [n, b]);
138
- let Pe = r((e) => {
139
- E(e), k || O(h(e)), Q && $(null);
140
- }, [k, Q]), Fe = r((e) => {
129
+ r,
130
+ g,
131
+ y
132
+ ]), ne(() => {
133
+ !r || !_ || w.current || (F("WEBHOOK"), L(_.url), z(_.method));
134
+ }, [r, _]);
135
+ let Re = i((e) => {
136
+ E(e), !k && !b && O(n(e) || C.current), Q && $(null);
137
+ }, [
138
+ k,
139
+ Q,
140
+ b
141
+ ]), ze = i((e) => {
141
142
  e.preventDefault();
142
- let t = T.trim();
143
- if (!t) {
144
- $(S("bigconsole.widget.actions.validation.labelRequired", "Button label is required")), Te.current?.focus();
145
- return;
146
- }
147
- let n = C && y ? y.name : h(k ? D : T) || h(T);
148
- if (!n) {
149
- $(S("bigconsole.widget.actions.validation.labelLettersOrNumbers", "Enter a label using letters or numbers"));
150
- return;
151
- }
152
- if (P === "WEBHOOK") {
153
- let e = I.trim();
154
- if (!e) {
155
- $(S("bigconsole.widget.actions.validation.urlRequired", "Enter the URL to call when the button is clicked"));
156
- return;
157
- }
158
- if (!/^https?:\/\//i.test(e)) {
159
- $(S("bigconsole.widget.actions.validation.urlScheme", "Webhook URL must start with http:// or https://"));
160
- return;
161
- }
162
- }
163
- let r = G ? {
164
- title: q.trim() || S("bigconsole.widget.actions.confirm.defaultTitle", "Confirm Action"),
165
- message: Oe.trim() || S("bigconsole.widget.actions.confirm.fallbackMessage", "Are you sure?"),
166
- confirmLabel: ke.trim() || S("bigconsole.widget.actions.confirm.defaultConfirmLabel", "Confirm"),
167
- cancelLabel: Ae.trim() || S("bigconsole.widget.actions.confirm.defaultCancelLabel", "Cancel")
168
- } : void 0, ee = P === "WEBHOOK" ? {
169
- url: I.trim(),
170
- method: R
171
- } : null;
172
- we(C && y ? {
173
- id: y.id,
174
- name: n,
175
- label: t,
176
- type: "BUTTON",
143
+ let t = {
144
+ label: T,
145
+ name: b && g ? g.name : n(k ? D : T) || n(T) || C.current,
146
+ outcome: P,
147
+ url: I,
148
+ method: R,
177
149
  style: j,
178
- icon: N || void 0,
179
- confirmation: G ? r : null,
150
+ icon: N,
151
+ confirmation: (K ? {
152
+ title: Ne.trim() || y("bigconsole.widget.actions.confirm.defaultTitle", "Confirm Action"),
153
+ message: Pe.trim() || y("bigconsole.widget.actions.confirm.fallbackMessage", "Are you sure?"),
154
+ confirmLabel: Y.trim() || y("bigconsole.widget.actions.confirm.defaultConfirmLabel", "Confirm"),
155
+ cancelLabel: Fe.trim() || y("bigconsole.widget.actions.confirm.defaultCancelLabel", "Cancel")
156
+ } : void 0) ?? null,
180
157
  disabled: B,
181
158
  hidden: H
182
- } : {
183
- name: n,
184
- label: t,
185
- type: "BUTTON",
186
- style: j,
187
- icon: N || void 0,
188
- confirmation: r,
189
- disabled: B,
190
- hidden: H
191
- }, ee);
159
+ }, r = te(t);
160
+ if ($(r), r) {
161
+ r.field === "name" && G(!0);
162
+ let e = r.field === "url" ? ke : r.field === "label" ? x : Ae;
163
+ requestAnimationFrame(() => e.current?.focus());
164
+ return;
165
+ }
166
+ let i = ee(t, g);
167
+ Oe(i.data, i.webhook);
192
168
  }, [
193
169
  T,
194
170
  D,
@@ -200,618 +176,378 @@ var g = {
200
176
  N,
201
177
  B,
202
178
  H,
203
- G,
204
- q,
179
+ K,
180
+ Ne,
181
+ Pe,
182
+ Y,
183
+ Fe,
184
+ b,
185
+ g,
205
186
  Oe,
206
- ke,
207
- Ae,
208
- C,
209
- y,
210
- we,
211
- S
212
- ]), Ie = (e) => Me.find((t) => t.value === e)?.color || "var(--color-action-primary-bg)", Le = je.find((e) => e.value === P);
213
- return /* @__PURE__ */ p(le, {
214
- open: n,
215
- onOpenChange: (e) => !e && !x && Ce(),
216
- children: /* @__PURE__ */ m(ue, {
187
+ y
188
+ ]), Be = (e) => Ie.find((t) => t.value === e)?.color || "var(--color-action-primary-bg)", Ve = Q?.field === "url" ? Q.reason === "required" ? y("bigconsole.widget.actions.validation.urlRequired", "Enter the URL to call when the button is clicked") : y("bigconsole.widget.actions.validation.urlScheme", "Enter a complete URL starting with http:// or https://") : Q?.field === "label" ? y("bigconsole.widget.actions.validation.labelRequired", "Button label is required") : Q ? y("bigconsole.widget.actions.validation.labelLettersOrNumbers", "Enter an event name using letters or numbers") : null, He = (e) => Q?.field === e ? /* @__PURE__ */ d("p", {
189
+ id: `${S}-${e}-error`,
190
+ role: "alert",
191
+ className: "mt-1 text-sm text-[var(--color-status-error-text)]",
192
+ children: Ve
193
+ }) : null;
194
+ return /* @__PURE__ */ d(le, {
195
+ open: r,
196
+ onOpenChange: (e) => !e && !v && De(),
197
+ children: /* @__PURE__ */ f(ue, {
198
+ "data-testid": "action-config-dialog",
199
+ showHandle: !1,
217
200
  style: {
218
201
  width: "min(500px, calc(100vw - 2rem))",
219
202
  maxWidth: "calc(100vw - 2rem)",
220
- padding: 0
203
+ maxHeight: "calc(100dvh - 2rem)",
204
+ padding: 0,
205
+ gap: 0,
206
+ zIndex: 140,
207
+ display: "flex",
208
+ flexDirection: "column"
209
+ },
210
+ onEscapeKeyDown: (e) => {
211
+ v && e.preventDefault();
221
212
  },
222
- children: [/* @__PURE__ */ p(pe, {
223
- style: { padding: "var(--space-cardPadding) var(--space-cardPadding) 0" },
224
- children: /* @__PURE__ */ m("div", {
225
- style: {
226
- display: "flex",
227
- flexWrap: "wrap",
228
- alignItems: "center",
229
- gap: "var(--space-controlGap)",
230
- minWidth: 0
231
- },
232
- children: [/* @__PURE__ */ p("div", {
233
- style: {
234
- display: "flex",
235
- height: "var(--size-controlHeight-lg)",
236
- width: "var(--size-controlHeight-lg)",
237
- alignItems: "center",
238
- justifyContent: "center",
239
- borderRadius: "var(--radius-card)",
240
- backgroundColor: "var(--color-action-primary-bg)",
241
- boxShadow: "var(--shadow-elevation-2)"
242
- },
243
- children: p(C ? ae : se, { style: {
244
- height: "var(--size-icon-lg)",
245
- width: "var(--size-icon-lg)",
246
- color: "var(--color-action-primary-text)"
247
- } })
248
- }), /* @__PURE__ */ m("div", { children: [/* @__PURE__ */ p(me, {
249
- style: {
250
- fontSize: "var(--font-size-body-md)",
251
- fontWeight: "var(--font-weight-bold)",
252
- color: "var(--color-text-primary)",
253
- margin: 0
254
- },
255
- children: C ? S("bigconsole.widget.actions.header.editTitle", "Edit Button") : S("bigconsole.widget.actions.header.addTitle", "Add Button")
256
- }), /* @__PURE__ */ p(de, {
257
- style: {
258
- fontSize: "var(--font-size-body-sm)",
259
- color: "var(--color-text-secondary)",
260
- margin: "var(--space-controlGap) 0 0 0"
261
- },
262
- children: C ? S("bigconsole.widget.actions.header.editDescription", "Update the button and what it does") : S("bigconsole.widget.actions.header.addDescription", "Add a button and choose what it does")
263
- })] })]
264
- })
265
- }), /* @__PURE__ */ m("form", {
266
- onSubmit: Fe,
267
- children: [/* @__PURE__ */ m("div", {
268
- style: {
269
- padding: "var(--space-cardPadding)",
270
- maxHeight: "65vh",
271
- minWidth: 0,
272
- overflowY: "auto"
273
- },
213
+ children: [/* @__PURE__ */ f(pe, {
214
+ className: "p-4 pr-12 text-left",
215
+ children: [/* @__PURE__ */ d(me, { children: b ? y("bigconsole.widget.actions.header.editTitle", "Edit Button") : y("bigconsole.widget.actions.header.addTitle", "Add Button") }), /* @__PURE__ */ d(de, { children: b ? y("bigconsole.widget.actions.header.editDescription", "Update the button and what it does") : y("bigconsole.widget.actions.header.addDescription", "Add a button that sends this widget’s data to an API.") })]
216
+ }), /* @__PURE__ */ f("form", {
217
+ onSubmit: ze,
218
+ noValidate: !0,
219
+ className: "flex min-h-0 flex-col",
220
+ style: { maxHeight: "calc(100dvh - 8rem)" },
221
+ children: [/* @__PURE__ */ f("div", {
222
+ className: "min-h-0 overflow-y-auto px-4 pb-4",
274
223
  children: [
275
- (Q || Se) && /* @__PURE__ */ p(e, {
224
+ Ee && /* @__PURE__ */ d(e, {
276
225
  tone: "danger",
277
226
  padding: "compact",
278
227
  headingLevel: 3,
279
- title: "This button could not be saved",
280
- className: "mb-form-gap",
281
- "data-testid": "action-config-error",
282
- children: /* @__PURE__ */ p("p", {
228
+ title: y("bigconsole.widget.actions.validation.saveFailed", "This button could not be saved"),
229
+ className: "mb-4",
230
+ children: /* @__PURE__ */ d("p", {
283
231
  role: "alert",
284
- className: "break-words text-sm text-[var(--color-status-error-text)]",
285
- children: Q || Se
232
+ className: "break-words text-sm",
233
+ children: Ee
286
234
  })
287
235
  }),
288
- /* @__PURE__ */ p("h3", {
289
- style: xe,
290
- children: "Appearance"
291
- }),
292
- /* @__PURE__ */ m("div", {
293
- style: { marginBottom: "var(--space-formGap)" },
236
+ /* @__PURE__ */ f("div", {
237
+ className: "mb-4",
294
238
  children: [
295
- /* @__PURE__ */ m("label", {
296
- style: g,
297
- children: [
298
- S("bigconsole.widget.actions.field.buttonLabel", "Button label"),
299
- " ",
300
- /* @__PURE__ */ p("span", {
301
- style: { color: "var(--color-status-error-text)" },
302
- children: "*"
303
- })
304
- ]
239
+ /* @__PURE__ */ f("label", {
240
+ htmlFor: `${S}-label`,
241
+ style: p,
242
+ children: [y("bigconsole.widget.actions.field.buttonLabel", "Button label"), " *"]
305
243
  }),
306
- /* @__PURE__ */ p(s, {
307
- ref: Te,
244
+ /* @__PURE__ */ d(c, {
245
+ id: `${S}-label`,
246
+ ref: x,
308
247
  value: T,
309
- onChange: (e) => Pe(e.target.value),
310
- placeholder: S("bigconsole.widget.actions.field.buttonLabelPlaceholder", "e.g., Refresh Data, Export CSV"),
311
- disabled: x,
312
- style: {
313
- height: "var(--size-controlHeight-md)",
314
- fontSize: "var(--font-size-body-sm)"
315
- }
248
+ onChange: (e) => Re(e.target.value),
249
+ placeholder: y("bigconsole.widget.actions.field.buttonLabelPlaceholder", "e.g., Refresh Data, Export CSV"),
250
+ disabled: v,
251
+ "aria-required": !0,
252
+ "aria-invalid": Q?.field === "label",
253
+ "aria-describedby": Q?.field === "label" ? `${S}-label-error` : void 0
316
254
  }),
317
- /* @__PURE__ */ p("p", {
318
- style: _,
319
- children: S("bigconsole.widget.actions.field.buttonLabelHint", "Text shown on the button")
320
- })
255
+ He("label")
321
256
  ]
322
257
  }),
323
- /* @__PURE__ */ m("div", {
324
- style: {
325
- display: "grid",
326
- gridTemplateColumns: "repeat(auto-fit, minmax(11rem, 1fr))",
327
- gap: "var(--space-formGap)",
328
- marginBottom: "var(--space-formGap)"
329
- },
330
- children: [/* @__PURE__ */ m("div", { children: [/* @__PURE__ */ p("label", {
331
- style: g,
332
- children: S("bigconsole.widget.actions.field.style", "Style")
333
- }), /* @__PURE__ */ m(c, {
334
- value: j,
335
- onValueChange: (e) => M(e),
336
- disabled: x,
337
- children: [/* @__PURE__ */ p(d, {
338
- style: {
339
- height: "var(--size-controlHeight-md)",
340
- fontSize: "var(--font-size-body-sm)"
341
- },
342
- children: /* @__PURE__ */ p(f, {})
343
- }), /* @__PURE__ */ p(l, {
344
- style: v,
345
- children: Me.map((e) => /* @__PURE__ */ p(u, {
346
- value: e.value,
347
- children: e.label
348
- }, e.value))
349
- })]
350
- })] }), /* @__PURE__ */ m("div", { children: [/* @__PURE__ */ p("label", {
351
- style: g,
352
- children: S("bigconsole.widget.actions.field.icon", "Icon")
353
- }), /* @__PURE__ */ m(c, {
354
- value: N,
355
- onValueChange: Ee,
356
- disabled: x,
357
- children: [/* @__PURE__ */ p(d, {
358
- style: {
359
- height: "var(--size-controlHeight-md)",
360
- fontSize: "var(--font-size-body-sm)"
361
- },
362
- children: /* @__PURE__ */ p(f, { placeholder: S("bigconsole.widget.actions.icon.none", "No icon") })
363
- }), /* @__PURE__ */ p(l, {
364
- style: {
365
- ...v,
366
- maxHeight: "200px"
367
- },
368
- children: Ne.map((e) => /* @__PURE__ */ p(u, {
369
- value: e.value || "none",
370
- children: e.label
371
- }, e.value || "none"))
372
- })]
373
- })] })]
374
- }),
375
- /* @__PURE__ */ m("div", {
376
- style: {
377
- display: "flex",
378
- alignItems: "center",
379
- gap: "var(--space-controlGap)",
380
- marginBottom: "var(--space-formGap)",
381
- padding: "var(--space-controlGap)",
382
- backgroundColor: "var(--color-bg-sunken)",
383
- borderRadius: "var(--radius-button)"
384
- },
385
- children: [/* @__PURE__ */ p("span", {
386
- style: {
387
- fontSize: "var(--font-size-body-sm)",
388
- color: "var(--color-text-muted)"
389
- },
390
- children: S("bigconsole.widget.actions.preview.label", "Preview:")
391
- }), /* @__PURE__ */ p("button", {
392
- type: "button",
393
- style: {
394
- padding: "var(--space-controlGap) var(--space-formGap)",
395
- fontSize: "var(--font-size-body-sm)",
396
- fontWeight: "var(--font-weight-medium)",
397
- borderRadius: "var(--radius-button)",
398
- backgroundColor: Ie(j),
399
- color: "var(--color-action-primary-text)",
400
- border: "none",
401
- cursor: "default"
402
- },
403
- children: T || S("bigconsole.widget.actions.preview.buttonFallback", "Button")
258
+ /* @__PURE__ */ f("div", {
259
+ className: "mb-4",
260
+ children: [/* @__PURE__ */ d("p", {
261
+ style: p,
262
+ children: y("bigconsole.widget.actions.field.whenClicked", "When clicked")
263
+ }), /* @__PURE__ */ d("p", {
264
+ className: "text-sm text-text-secondary",
265
+ "data-testid": "action-outcome-summary",
266
+ children: P === "WEBHOOK" ? y("bigconsole.widget.actions.outcome.webhook.label", "Send data to an API") : y("bigconsole.widget.actions.outcome.emit.label", "Emit a custom event")
404
267
  })]
405
268
  }),
406
- /* @__PURE__ */ p("h3", {
407
- style: {
408
- ...xe,
409
- marginTop: "var(--space-formGap)"
410
- },
411
- children: "Behaviour"
412
- }),
413
- /* @__PURE__ */ m("div", {
414
- style: { marginBottom: "var(--space-formGap)" },
269
+ P === "WEBHOOK" && /* @__PURE__ */ f("div", {
270
+ className: "mb-4",
415
271
  children: [
416
- /* @__PURE__ */ p("label", {
417
- style: g,
418
- children: S("bigconsole.widget.actions.field.whenClicked", "When clicked")
272
+ /* @__PURE__ */ f("label", {
273
+ htmlFor: `${S}-url`,
274
+ style: p,
275
+ children: [y("bigconsole.widget.actions.webhook.urlLabel", "Destination URL"), " *"]
419
276
  }),
420
- /* @__PURE__ */ m(c, {
421
- value: P,
422
- onValueChange: (e) => {
423
- w.current = !0, F(e);
277
+ /* @__PURE__ */ d(c, {
278
+ id: `${S}-url`,
279
+ ref: ke,
280
+ type: "url",
281
+ value: I,
282
+ onChange: (e) => {
283
+ w.current = !0, L(e.target.value), Q?.field === "url" && $(null);
424
284
  },
425
- disabled: x,
426
- children: [/* @__PURE__ */ p(d, {
427
- style: {
428
- height: "var(--size-controlHeight-md)",
429
- fontSize: "var(--font-size-body-sm)"
430
- },
431
- children: /* @__PURE__ */ p(f, {})
432
- }), /* @__PURE__ */ p(l, {
433
- style: v,
434
- children: je.map((e) => /* @__PURE__ */ p(u, {
435
- value: e.value,
436
- children: e.label
437
- }, e.value))
438
- })]
285
+ placeholder: y("bigconsole.widget.actions.webhook.urlPlaceholder", "https://your-service.com/hook"),
286
+ disabled: v,
287
+ "aria-required": !0,
288
+ "aria-invalid": Q?.field === "url",
289
+ "aria-describedby": Q?.field === "url" ? `${S}-url-error` : `${S}-url-hint`
439
290
  }),
440
- Le && /* @__PURE__ */ p("p", {
441
- style: _,
442
- children: Le.hint
291
+ He("url"),
292
+ /* @__PURE__ */ d("p", {
293
+ id: `${S}-url-hint`,
294
+ style: m,
295
+ children: y("bigconsole.widget.actions.webhook.payloadHint", "The widget's current data is sent as the request payload.")
443
296
  })
444
297
  ]
445
298
  }),
446
- P === "WEBHOOK" && /* @__PURE__ */ m("div", {
447
- style: {
448
- marginBottom: "var(--space-formGap)",
449
- paddingLeft: "var(--space-formGap)",
450
- borderLeft: "2px solid var(--color-border-subtle)",
451
- display: "flex",
452
- flexDirection: "column",
453
- gap: "var(--space-controlGap)"
454
- },
299
+ /* @__PURE__ */ f("button", {
300
+ type: "button",
301
+ onClick: () => G((e) => !e),
302
+ "aria-expanded": W,
303
+ "aria-controls": `${S}-options`,
304
+ className: "flex min-h-10 items-center gap-2 text-sm font-medium",
305
+ disabled: v,
306
+ children: [d(W ? oe : se, { className: "size-4" }), y("bigconsole.widget.actions.advanced.toggle", "More options")]
307
+ }),
308
+ /* @__PURE__ */ f("div", {
309
+ id: `${S}-options`,
310
+ hidden: !W,
311
+ className: "space-y-4 border-t border-border-subtle pt-4",
455
312
  children: [
456
- /* @__PURE__ */ m("div", { children: [/* @__PURE__ */ m("label", {
457
- style: g,
458
- children: [
459
- S("bigconsole.widget.actions.webhook.urlLabel", "URL"),
460
- " ",
461
- /* @__PURE__ */ p("span", {
462
- style: { color: "var(--color-status-error-text)" },
463
- children: "*"
464
- })
465
- ]
466
- }), /* @__PURE__ */ p(s, {
467
- value: I,
468
- onChange: (e) => {
469
- w.current = !0, L(e.target.value), Q && $(null);
470
- },
471
- placeholder: S("bigconsole.widget.actions.webhook.urlPlaceholder", "https://your-service.com/hook"),
472
- disabled: x,
473
- style: {
474
- height: "var(--size-controlHeight-md)",
475
- fontSize: "var(--font-size-body-sm)"
476
- }
477
- })] }),
478
- /* @__PURE__ */ m("div", {
479
- style: {
480
- maxWidth: "160px",
481
- minWidth: 0
482
- },
483
- children: [/* @__PURE__ */ p("label", {
484
- style: g,
485
- children: S("bigconsole.widget.actions.webhook.methodLabel", "Method")
486
- }), /* @__PURE__ */ m(c, {
487
- value: R,
488
- onValueChange: (e) => {
489
- w.current = !0, z(e);
490
- },
491
- disabled: x,
492
- children: [/* @__PURE__ */ p(d, {
313
+ /* @__PURE__ */ f("div", { children: [
314
+ /* @__PURE__ */ d("h3", {
315
+ style: Te,
316
+ children: y("bigconsole.widget.actions.options.appearance", "Appearance")
317
+ }),
318
+ /* @__PURE__ */ f("div", {
319
+ className: "grid grid-cols-2 gap-3",
320
+ children: [/* @__PURE__ */ f("div", { children: [/* @__PURE__ */ d("label", {
321
+ id: `${S}-style-label`,
322
+ htmlFor: `${S}-style`,
323
+ style: p,
324
+ children: y("bigconsole.widget.actions.field.style", "Style")
325
+ }), /* @__PURE__ */ f(l, {
326
+ value: j,
327
+ onValueChange: (e) => {
328
+ let t = Ie.find((t) => t.value === e);
329
+ t && M(t.value);
330
+ },
331
+ disabled: v,
332
+ children: [/* @__PURE__ */ d(ge, {
333
+ id: `${S}-style`,
334
+ "aria-labelledby": `${S}-style-label`,
335
+ children: /* @__PURE__ */ d(_e, {})
336
+ }), /* @__PURE__ */ d(u, {
337
+ style: h,
338
+ children: Ie.map((e) => /* @__PURE__ */ d(he, {
339
+ value: e.value,
340
+ children: e.label
341
+ }, e.value))
342
+ })]
343
+ })] }), /* @__PURE__ */ f("div", { children: [/* @__PURE__ */ d("label", {
344
+ id: `${S}-icon-label`,
345
+ htmlFor: `${S}-icon`,
346
+ style: p,
347
+ children: y("bigconsole.widget.actions.field.icon", "Icon")
348
+ }), /* @__PURE__ */ f(l, {
349
+ value: N || "none",
350
+ onValueChange: (e) => je(e === "none" ? "" : e),
351
+ disabled: v,
352
+ children: [/* @__PURE__ */ d(ge, {
353
+ id: `${S}-icon`,
354
+ "aria-labelledby": `${S}-icon-label`,
355
+ children: /* @__PURE__ */ d(_e, {})
356
+ }), /* @__PURE__ */ d(u, {
357
+ style: {
358
+ ...h,
359
+ maxHeight: "200px"
360
+ },
361
+ children: Le.map((e) => /* @__PURE__ */ d(he, {
362
+ value: e.value || "none",
363
+ children: e.label
364
+ }, e.value || "none"))
365
+ })]
366
+ })] })]
367
+ }),
368
+ /* @__PURE__ */ f("div", {
369
+ className: "mt-3 flex items-center gap-2 rounded-button bg-bg-sunken p-2",
370
+ children: [/* @__PURE__ */ d("span", {
371
+ className: "text-sm text-text-muted",
372
+ children: y("bigconsole.widget.actions.preview.label", "Preview:")
373
+ }), /* @__PURE__ */ d("span", {
374
+ className: "rounded-button px-3 py-1 text-sm",
493
375
  style: {
494
- height: "var(--size-controlHeight-md)",
495
- fontSize: "var(--font-size-body-sm)"
376
+ backgroundColor: Be(j),
377
+ color: "var(--color-action-primary-text)"
496
378
  },
497
- children: /* @__PURE__ */ p(f, {})
498
- }), /* @__PURE__ */ p(l, {
499
- style: v,
500
- children: ve.map((e) => /* @__PURE__ */ p(u, {
501
- value: e,
502
- children: e
503
- }, e))
379
+ children: T || y("bigconsole.widget.actions.preview.buttonFallback", "Button")
504
380
  })]
505
- })]
506
- }),
507
- /* @__PURE__ */ p("p", {
508
- style: _,
509
- children: S("bigconsole.widget.actions.webhook.payloadHint", "The widget's current data is sent as the request payload.")
510
- }),
511
- /^http:\/\//i.test(I.trim()) && /* @__PURE__ */ m("p", {
512
- style: {
513
- ..._,
514
- color: "var(--color-status-warning-text)"
381
+ })
382
+ ] }),
383
+ P === "WEBHOOK" && /* @__PURE__ */ f("div", { children: [/* @__PURE__ */ d("label", {
384
+ id: `${S}-method-label`,
385
+ htmlFor: `${S}-method`,
386
+ style: p,
387
+ children: y("bigconsole.widget.actions.webhook.methodLabel", "Request method")
388
+ }), /* @__PURE__ */ f(l, {
389
+ value: R,
390
+ onValueChange: (e) => {
391
+ let t = Se.find((t) => t === e);
392
+ t && (w.current = !0, z(t));
515
393
  },
394
+ disabled: v,
395
+ children: [/* @__PURE__ */ d(ge, {
396
+ id: `${S}-method`,
397
+ "aria-labelledby": `${S}-method-label`,
398
+ children: /* @__PURE__ */ d(_e, {})
399
+ }), /* @__PURE__ */ d(u, {
400
+ style: h,
401
+ children: Se.map((e) => /* @__PURE__ */ d(he, {
402
+ value: e,
403
+ children: e
404
+ }, e))
405
+ })]
406
+ })] }),
407
+ /* @__PURE__ */ f("div", { children: [/* @__PURE__ */ f("label", {
408
+ className: "flex items-center gap-2 text-sm",
409
+ children: [/* @__PURE__ */ d(s, {
410
+ checked: K,
411
+ onCheckedChange: (e) => Me(e === !0),
412
+ disabled: v
413
+ }), y("bigconsole.widget.actions.confirm.toggleLabel", "Ask for confirmation first")]
414
+ }), K && /* @__PURE__ */ f("div", {
415
+ className: "mt-3 space-y-3",
516
416
  children: [
517
- S("bigconsole.widget.actions.webhook.insecureWarningPrefix", "Warning:"),
518
- " ",
519
- /* @__PURE__ */ p("code", { children: "http://" }),
520
- " ",
521
- S("bigconsole.widget.actions.webhook.insecureWarningMiddle", "is unencrypted — the widget's data will be sent in plaintext. Use"),
522
- " ",
523
- /* @__PURE__ */ p("code", { children: "https://" }),
524
- " ",
525
- S("bigconsole.widget.actions.webhook.insecureWarningSuffix", "if it may contain anything sensitive.")
417
+ /* @__PURE__ */ d("label", {
418
+ htmlFor: `${S}-message`,
419
+ style: p,
420
+ children: y("bigconsole.widget.actions.confirm.messageLabel", "Message")
421
+ }),
422
+ /* @__PURE__ */ d(ye, {
423
+ id: `${S}-message`,
424
+ value: Pe,
425
+ onChange: (e) => J(e.target.value),
426
+ rows: 2,
427
+ disabled: v
428
+ }),
429
+ /* @__PURE__ */ f("details", { children: [/* @__PURE__ */ d("summary", {
430
+ className: "cursor-pointer text-sm text-text-secondary",
431
+ children: y("bigconsole.widget.actions.confirm.customize", "Customize confirmation labels")
432
+ }), /* @__PURE__ */ f("div", {
433
+ className: "mt-3 space-y-3",
434
+ children: [
435
+ /* @__PURE__ */ f("div", { children: [/* @__PURE__ */ d("label", {
436
+ htmlFor: `${S}-confirm-title`,
437
+ style: p,
438
+ children: y("bigconsole.widget.actions.confirm.dialogTitleLabel", "Dialog Title")
439
+ }), /* @__PURE__ */ d(c, {
440
+ id: `${S}-confirm-title`,
441
+ value: Ne,
442
+ onChange: (e) => q(e.target.value),
443
+ disabled: v
444
+ })] }),
445
+ /* @__PURE__ */ f("div", { children: [/* @__PURE__ */ d("label", {
446
+ htmlFor: `${S}-confirm-label`,
447
+ style: p,
448
+ children: y("bigconsole.widget.actions.confirm.confirmButtonLabel", "Confirm Button")
449
+ }), /* @__PURE__ */ d(c, {
450
+ id: `${S}-confirm-label`,
451
+ value: Y,
452
+ onChange: (e) => X(e.target.value),
453
+ disabled: v
454
+ })] }),
455
+ /* @__PURE__ */ f("div", { children: [/* @__PURE__ */ d("label", {
456
+ htmlFor: `${S}-cancel-label`,
457
+ style: p,
458
+ children: y("bigconsole.widget.actions.confirm.cancelButtonLabel", "Cancel Button")
459
+ }), /* @__PURE__ */ d(c, {
460
+ id: `${S}-cancel-label`,
461
+ value: Fe,
462
+ onChange: (e) => Z(e.target.value),
463
+ disabled: v
464
+ })] })
465
+ ]
466
+ })] })
526
467
  ]
527
- })
528
- ]
529
- }),
530
- /* @__PURE__ */ m("div", {
531
- style: {
532
- paddingTop: "var(--space-formGap)",
533
- borderTop: "1px solid var(--color-border-subtle)"
534
- },
535
- children: [/* @__PURE__ */ m("label", {
536
- style: {
537
- display: "flex",
538
- alignItems: "center",
539
- gap: "var(--space-controlGap)",
540
- cursor: "pointer",
541
- marginBottom: "var(--space-formGap)"
542
- },
543
- children: [/* @__PURE__ */ p(o, {
544
- checked: G,
545
- onCheckedChange: (e) => K(e === !0),
546
- disabled: x
547
- }), /* @__PURE__ */ p("span", {
548
- style: {
549
- fontSize: "var(--font-size-body-sm)",
550
- fontWeight: "var(--font-weight-semibold)",
551
- color: "var(--color-text-primary)"
552
- },
553
- children: S("bigconsole.widget.actions.confirm.toggleLabel", "Ask for confirmation first")
554
- })]
555
- }), G && /* @__PURE__ */ m("div", {
556
- style: {
557
- paddingLeft: "var(--space-formGap)",
558
- borderLeft: "2px solid var(--color-border-subtle)",
559
- display: "flex",
560
- flexDirection: "column",
561
- gap: "var(--space-controlGap)"
562
- },
563
- children: [
564
- /* @__PURE__ */ m("div", { children: [/* @__PURE__ */ p("label", {
565
- style: {
566
- display: "block",
567
- fontSize: "var(--font-size-body-sm)",
568
- fontWeight: "var(--font-weight-medium)",
569
- color: "var(--color-text-secondary)",
570
- marginBottom: "var(--space-controlGap)"
571
- },
572
- children: S("bigconsole.widget.actions.confirm.dialogTitleLabel", "Dialog Title")
573
- }), /* @__PURE__ */ p(s, {
574
- value: q,
575
- onChange: (e) => J(e.target.value),
576
- disabled: x,
577
- style: {
578
- height: "var(--size-controlHeight-sm)",
579
- fontSize: "var(--font-size-body-sm)"
580
- }
581
- })] }),
582
- /* @__PURE__ */ m("div", { children: [/* @__PURE__ */ p("label", {
583
- style: {
584
- display: "block",
585
- fontSize: "var(--font-size-body-sm)",
586
- fontWeight: "var(--font-weight-medium)",
587
- color: "var(--color-text-secondary)",
588
- marginBottom: "var(--space-controlGap)"
589
- },
590
- children: S("bigconsole.widget.actions.confirm.messageLabel", "Message")
591
- }), /* @__PURE__ */ p(ge, {
592
- value: Oe,
593
- onChange: (e) => Y(e.target.value),
594
- rows: 2,
595
- disabled: x,
596
- style: {
597
- fontSize: "var(--font-size-body-sm)",
598
- resize: "none"
599
- }
600
- })] }),
601
- /* @__PURE__ */ m("div", {
602
- style: {
603
- display: "grid",
604
- gridTemplateColumns: "repeat(auto-fit, minmax(11rem, 1fr))",
605
- gap: "var(--space-controlGap)"
606
- },
607
- children: [/* @__PURE__ */ m("div", { children: [/* @__PURE__ */ p("label", {
608
- style: {
609
- display: "block",
610
- fontSize: "var(--font-size-body-sm)",
611
- fontWeight: "var(--font-weight-medium)",
612
- color: "var(--color-text-secondary)",
613
- marginBottom: "var(--space-controlGap)"
614
- },
615
- children: S("bigconsole.widget.actions.confirm.confirmButtonLabel", "Confirm Button")
616
- }), /* @__PURE__ */ p(s, {
617
- value: ke,
618
- onChange: (e) => X(e.target.value),
619
- disabled: x,
620
- style: {
621
- height: "var(--size-controlHeight-sm)",
622
- fontSize: "var(--font-size-body-sm)"
623
- }
624
- })] }), /* @__PURE__ */ m("div", { children: [/* @__PURE__ */ p("label", {
625
- style: {
626
- display: "block",
627
- fontSize: "var(--font-size-body-sm)",
628
- fontWeight: "var(--font-weight-medium)",
629
- color: "var(--color-text-secondary)",
630
- marginBottom: "var(--space-controlGap)"
468
+ })] }),
469
+ /* @__PURE__ */ f("div", { children: [
470
+ /* @__PURE__ */ f("label", {
471
+ className: "flex items-center gap-2 text-sm",
472
+ children: [/* @__PURE__ */ d(s, {
473
+ checked: P === "EMIT",
474
+ onCheckedChange: (e) => {
475
+ w.current = !0, F(e === !0 ? "EMIT" : "WEBHOOK"), $(null);
631
476
  },
632
- children: S("bigconsole.widget.actions.confirm.cancelButtonLabel", "Cancel Button")
633
- }), /* @__PURE__ */ p(s, {
634
- value: Ae,
635
- onChange: (e) => Z(e.target.value),
636
- disabled: x,
637
- style: {
638
- height: "var(--size-controlHeight-sm)",
639
- fontSize: "var(--font-size-body-sm)"
640
- }
641
- })] })]
642
- })
643
- ]
644
- })]
645
- }),
646
- /* @__PURE__ */ m("div", {
647
- style: {
648
- paddingTop: "var(--space-formGap)",
649
- borderTop: "1px solid var(--color-border-subtle)"
650
- },
651
- children: [/* @__PURE__ */ p("h3", {
652
- style: {
653
- ...xe,
654
- margin: 0
655
- },
656
- children: /* @__PURE__ */ m("button", {
657
- type: "button",
658
- onClick: () => De((e) => !e),
659
- "aria-expanded": W,
660
- "aria-controls": "action-config-advanced",
661
- style: {
662
- display: "flex",
663
- alignItems: "center",
664
- gap: "var(--space-controlGap)",
665
- minHeight: "var(--size-controlHeight-md)",
666
- background: "none",
667
- border: "none",
668
- padding: 0,
669
- cursor: "pointer",
670
- font: "inherit",
671
- letterSpacing: "inherit",
672
- textTransform: "inherit",
673
- color: "inherit"
674
- },
675
- children: [p(W ? re : ie, { style: {
676
- height: "14px",
677
- width: "14px"
678
- } }), S("bigconsole.widget.actions.advanced.toggle", "Advanced")]
679
- })
680
- }), W && /* @__PURE__ */ m("div", {
681
- id: "action-config-advanced",
682
- style: {
683
- marginTop: "var(--space-formGap)",
684
- display: "flex",
685
- flexDirection: "column",
686
- gap: "var(--space-formGap)"
687
- },
688
- children: [/* @__PURE__ */ m("div", { children: [
689
- /* @__PURE__ */ p("label", {
690
- style: g,
691
- children: S("bigconsole.widget.actions.advanced.eventNameLabel", "Event name (id)")
477
+ disabled: v
478
+ }), y("bigconsole.widget.actions.options.customEvent", "Use a custom event instead of calling an API")]
692
479
  }),
693
- /* @__PURE__ */ p(s, {
694
- value: C && y ? y.name : D,
695
- onChange: (e) => {
696
- O(e.target.value), A(!0);
697
- },
698
- placeholder: S("bigconsole.widget.actions.advanced.eventNamePlaceholder", "auto from label"),
699
- disabled: x || C,
700
- style: {
701
- height: "var(--size-controlHeight-md)",
702
- fontSize: "var(--font-size-body-sm)",
703
- fontFamily: "var(--font-family-mono)"
704
- }
480
+ /* @__PURE__ */ d("p", {
481
+ style: m,
482
+ children: y("bigconsole.widget.actions.outcome.emit.hint", "For integrations configured in Webhooks / Events.")
705
483
  }),
706
- /* @__PURE__ */ m("p", {
707
- style: _,
484
+ /* @__PURE__ */ f("div", {
485
+ className: "mt-3",
708
486
  children: [
709
- S("bigconsole.widget.actions.advanced.emitsPrefix", "Emits"),
710
- " ",
711
- /* @__PURE__ */ m("code", { children: [
712
- "widget:",
713
- C && y ? y.name : h(D || T) || "<name>",
714
- ":clicked"
715
- ] }),
716
- ".",
717
- " ",
718
- C ? S("bigconsole.widget.actions.advanced.emitsFixed", "Fixed once created.") : S("bigconsole.widget.actions.advanced.emitsAutoDerived", "Auto-derived from the label.")
487
+ /* @__PURE__ */ d("label", {
488
+ htmlFor: `${S}-name`,
489
+ style: p,
490
+ children: y("bigconsole.widget.actions.advanced.eventNameLabel", "Event name (id)")
491
+ }),
492
+ /* @__PURE__ */ d(c, {
493
+ id: `${S}-name`,
494
+ ref: Ae,
495
+ value: b && g ? g.name : D,
496
+ onChange: (e) => {
497
+ O(e.target.value), A(!0), Q?.field === "name" && $(null);
498
+ },
499
+ disabled: v || b,
500
+ "aria-invalid": Q?.field === "name",
501
+ "aria-describedby": Q?.field === "name" ? `${S}-name-error` : void 0
502
+ }),
503
+ He("name"),
504
+ /* @__PURE__ */ d("p", {
505
+ style: m,
506
+ children: /* @__PURE__ */ f("code", { children: [
507
+ "widget:",
508
+ b && g ? g.name : n(D || T) || "<name>",
509
+ ":clicked"
510
+ ] })
511
+ })
719
512
  ]
720
513
  })
721
- ] }), /* @__PURE__ */ m("div", {
722
- style: {
723
- display: "flex",
724
- alignItems: "center",
725
- gap: "var(--space-sectionGap)"
726
- },
727
- children: [/* @__PURE__ */ m("label", {
728
- style: {
729
- display: "flex",
730
- alignItems: "center",
731
- gap: "var(--space-controlGap)",
732
- cursor: "pointer"
733
- },
734
- children: [/* @__PURE__ */ p(o, {
514
+ ] }),
515
+ /* @__PURE__ */ f("div", {
516
+ className: "flex flex-wrap gap-4 text-sm",
517
+ children: [/* @__PURE__ */ f("label", {
518
+ className: "flex items-center gap-2",
519
+ children: [/* @__PURE__ */ d(s, {
735
520
  checked: B,
736
521
  onCheckedChange: (e) => V(e === !0),
737
- disabled: x
738
- }), /* @__PURE__ */ p("span", {
739
- style: {
740
- fontSize: "var(--font-size-body-sm)",
741
- color: "var(--color-text-primary)"
742
- },
743
- children: S("bigconsole.widget.actions.advanced.disabled", "Disabled")
744
- })]
745
- }), /* @__PURE__ */ m("label", {
746
- style: {
747
- display: "flex",
748
- alignItems: "center",
749
- gap: "var(--space-controlGap)",
750
- cursor: "pointer"
751
- },
752
- children: [/* @__PURE__ */ p(o, {
522
+ disabled: v
523
+ }), y("bigconsole.widget.actions.advanced.disabled", "Disabled")]
524
+ }), /* @__PURE__ */ f("label", {
525
+ className: "flex items-center gap-2",
526
+ children: [/* @__PURE__ */ d(s, {
753
527
  checked: H,
754
528
  onCheckedChange: (e) => U(e === !0),
755
- disabled: x
756
- }), /* @__PURE__ */ p("span", {
757
- style: {
758
- fontSize: "var(--font-size-body-sm)",
759
- color: "var(--color-text-primary)"
760
- },
761
- children: S("bigconsole.widget.actions.advanced.hidden", "Hidden")
762
- })]
529
+ disabled: v
530
+ }), y("bigconsole.widget.actions.advanced.hidden", "Hidden")]
763
531
  })]
764
- })]
765
- })]
532
+ })
533
+ ]
766
534
  })
767
535
  ]
768
- }), /* @__PURE__ */ m(fe, {
769
- style: {
770
- padding: "var(--space-formGap) var(--space-pagePadding)",
771
- borderTop: "1px solid var(--color-border-subtle)",
772
- backgroundColor: "var(--color-bg-sunken)",
773
- display: "flex",
774
- justifyContent: "flex-end",
775
- gap: "var(--space-controlGap)"
776
- },
777
- children: [/* @__PURE__ */ p(ce, {
536
+ }), /* @__PURE__ */ f(fe, {
537
+ className: "shrink-0 border-t border-border-subtle bg-bg-sunken p-4",
538
+ children: [/* @__PURE__ */ d(ce, {
778
539
  type: "button",
779
540
  variant: "outline",
780
- onClick: Ce,
781
- disabled: x,
782
- style: { height: "var(--size-controlHeight-md)" },
783
- children: S("bigconsole.widget.actions.footer.cancel", "Cancel")
784
- }), /* @__PURE__ */ p(ne, {
785
- permission: C ? t.WIDGET_ACTION_UPDATE : t.WIDGET_ACTION_CREATE,
541
+ onClick: De,
542
+ disabled: v,
543
+ children: y("bigconsole.widget.actions.footer.cancel", "Cancel")
544
+ }), /* @__PURE__ */ d(ae, {
545
+ permission: b ? t.WIDGET_ACTION_UPDATE : t.WIDGET_ACTION_CREATE,
786
546
  deniedBehavior: "disable",
787
- children: /* @__PURE__ */ p(ce, {
547
+ children: /* @__PURE__ */ d(ce, {
788
548
  type: "submit",
789
- disabled: x || !T.trim(),
790
- style: {
791
- height: "var(--size-controlHeight-md)",
792
- backgroundColor: "var(--color-action-primary-bg)"
793
- },
794
- children: x ? /* @__PURE__ */ m("span", {
795
- style: {
796
- display: "flex",
797
- alignItems: "center",
798
- gap: "var(--space-iconGap)"
799
- },
800
- children: [/* @__PURE__ */ p(he, { style: {
801
- height: "var(--size-icon-sm)",
802
- width: "var(--size-icon-sm)"
803
- } }), S("bigconsole.widget.actions.footer.saving", "Saving...")]
804
- }) : /* @__PURE__ */ m("span", {
805
- style: {
806
- display: "flex",
807
- alignItems: "center",
808
- gap: "var(--space-iconGap)"
809
- },
810
- children: [p(C ? ae : oe, { style: {
811
- height: "var(--size-icon-sm)",
812
- width: "var(--size-icon-sm)"
813
- } }), C ? S("bigconsole.widget.actions.footer.updateButton", "Update Button") : S("bigconsole.widget.actions.footer.addButton", "Add Button")]
814
- })
549
+ disabled: v,
550
+ children: v ? /* @__PURE__ */ f(be, { children: [/* @__PURE__ */ d(ve, { className: "size-4" }), y("bigconsole.widget.actions.footer.saving", "Saving...")] }) : b ? y("bigconsole.widget.actions.footer.updateButton", "Update Button") : y("bigconsole.widget.actions.footer.addButton", "Add Button")
815
551
  })
816
552
  })]
817
553
  })]
@@ -820,6 +556,6 @@ var g = {
820
556
  });
821
557
  });
822
558
  //#endregion
823
- export { y as default };
559
+ export { g as default };
824
560
 
825
561
  //# sourceMappingURL=ActionConfigDialog.js.map