@bpmn-io/properties-panel 3.44.1 → 3.46.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/index.esm.js +192 -158
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +201 -167
- package/dist/index.js.map +1 -1
- package/package.json +3 -5
package/dist/index.esm.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { useContext, useState, useRef, useEffect, useLayoutEffect, useCallback, useMemo } from '../preact/hooks';
|
|
2
2
|
import { isFunction, isArray, get, assign, set, isObject, isString, isNumber, debounce } from 'min-dash';
|
|
3
|
-
import { createPortal, forwardRef } from '../preact/compat';
|
|
4
3
|
import { jsx, jsxs, Fragment } from '../preact/jsx-runtime';
|
|
5
4
|
import { createContext, createElement as createElement$1, render } from '../preact';
|
|
5
|
+
import { createPortal, forwardRef } from '../preact/compat';
|
|
6
6
|
import classnames from 'classnames';
|
|
7
7
|
import { query, domify } from 'min-dom';
|
|
8
8
|
import { EditorView, highlightSpecialChars, drawSelection, keymap, placeholder, lineNumbers } from '@codemirror/view';
|
|
@@ -12,96 +12,101 @@ import { closeBrackets, closeBracketsKeymap } from '@codemirror/autocomplete';
|
|
|
12
12
|
import { history, defaultKeymap, historyKeymap } from '@codemirror/commands';
|
|
13
13
|
import { jsonParseLinter, json } from '@codemirror/lang-json';
|
|
14
14
|
import { linter } from '@codemirror/lint';
|
|
15
|
-
import { FeelersEditor } from 'feelers';
|
|
15
|
+
import { FeelersEditor } from '@bpmn-io/feelers-editor';
|
|
16
16
|
import Editor from '@bpmn-io/feel-editor';
|
|
17
17
|
import * as focusTrap from 'focus-trap';
|
|
18
18
|
|
|
19
|
-
|
|
19
|
+
function Arrow(props) {
|
|
20
20
|
return jsx("svg", {
|
|
21
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
22
|
+
width: "16",
|
|
23
|
+
height: "16",
|
|
24
|
+
viewBox: "0 0 16 16",
|
|
21
25
|
...props,
|
|
22
26
|
children: jsx("path", {
|
|
23
27
|
fillRule: "evenodd",
|
|
24
|
-
d: "
|
|
28
|
+
d: "M10,12 L3,12 C2.44771525,12 2,11.5522847 2,11 C2,10.4477153 2.44771525,10 3,10 L8,10 L8,5 C8,4.44771525 8.44771525,4 9,4 C9.55228475,4 10,4.44771525 10,5 L10,12 Z",
|
|
29
|
+
transform: "rotate(-45 6 8)"
|
|
25
30
|
})
|
|
26
31
|
});
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
width: "16",
|
|
31
|
-
height: "16"
|
|
32
|
-
};
|
|
33
|
-
var CloseIcon = function CloseIcon(props) {
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
function Close(props) {
|
|
34
35
|
return jsx("svg", {
|
|
36
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
37
|
+
width: "16",
|
|
38
|
+
height: "16",
|
|
39
|
+
viewBox: "0 0 16 16",
|
|
35
40
|
...props,
|
|
36
41
|
children: jsx("path", {
|
|
37
42
|
fillRule: "evenodd",
|
|
38
|
-
d: "
|
|
43
|
+
d: "M12 4.7L11.3 4L8 7.3L4.7 4L4 4.7L7.3 8L4 11.3L4.7 12L8 8.7L11.3 12L12 11.3L8.7 8L12 4.7Z",
|
|
39
44
|
fill: "currentColor"
|
|
40
45
|
})
|
|
41
46
|
});
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
width: "16",
|
|
46
|
-
height: "16"
|
|
47
|
-
};
|
|
48
|
-
var CreateIcon = function CreateIcon(props) {
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
function Create(props) {
|
|
49
50
|
return jsx("svg", {
|
|
51
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
52
|
+
width: "16",
|
|
53
|
+
height: "16",
|
|
54
|
+
viewBox: "0 0 16 16",
|
|
50
55
|
...props,
|
|
51
56
|
children: jsx("path", {
|
|
52
57
|
fillRule: "evenodd",
|
|
53
|
-
d: "M9
|
|
58
|
+
d: "M9,13 L9,9 L9,9 L13,9 C13.5522847,9 14,8.55228475 14,8 C14,7.44771525 13.5522847,7 13,7 L9,7 L9,7 L9,3 C9,2.44771525 8.55228475,2 8,2 C7.44771525,2 7,2.44771525 7,3 L7,7 L7,7 L3,7 C2.44771525,7 2,7.44771525 2,8 C2,8.55228475 2.44771525,9 3,9 L7,9 L7,9 L7,13 C7,13.5522847 7.44771525,14 8,14 C8.55228475,14 9,13.5522847 9,13 Z"
|
|
54
59
|
})
|
|
55
60
|
});
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
width: "16",
|
|
60
|
-
height: "16"
|
|
61
|
-
};
|
|
62
|
-
var DeleteIcon = function DeleteIcon(props) {
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
function Delete(props) {
|
|
63
64
|
return jsx("svg", {
|
|
65
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
66
|
+
width: "16",
|
|
67
|
+
height: "16",
|
|
68
|
+
viewBox: "0 0 16 16",
|
|
64
69
|
...props,
|
|
65
70
|
children: jsx("path", {
|
|
66
71
|
fillRule: "evenodd",
|
|
67
|
-
d: "
|
|
72
|
+
d: "M9,4 L9,11 C9,12.1 8.6,12.55 7.5,12.55 L2.5,12.55 C1.4,12.55 1,12.1 1,11 L1,4 L9,4 Z M7.5,5.5 L2.5,5.5 L2.5,9.8 C2.5,10.46 3,11 3.61111111,11 L6.38888889,11 C7,11 7.5,10.46 7.5,9.8 L7.5,5.5 Z M10,1 L8,1 L7,0 L3,0 L2,1 L0,1 L0,2.5 L10,2.5 L10,1 Z",
|
|
73
|
+
transform: "translate(3 2)"
|
|
68
74
|
})
|
|
69
75
|
});
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
width: "16",
|
|
74
|
-
height: "16"
|
|
75
|
-
};
|
|
76
|
-
var DragIcon = function DragIcon(props) {
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
function Drag(props) {
|
|
77
79
|
return jsxs("svg", {
|
|
80
|
+
width: "16",
|
|
81
|
+
height: "16",
|
|
82
|
+
fill: "none",
|
|
83
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
78
84
|
...props,
|
|
79
85
|
children: [jsx("path", {
|
|
80
86
|
fill: "#fff",
|
|
81
87
|
style: {
|
|
82
|
-
mixBlendMode:
|
|
88
|
+
mixBlendMode: 'multiply'
|
|
83
89
|
},
|
|
84
90
|
d: "M0 0h16v16H0z"
|
|
85
91
|
}), jsx("path", {
|
|
86
92
|
fill: "#fff",
|
|
87
93
|
style: {
|
|
88
|
-
mixBlendMode:
|
|
94
|
+
mixBlendMode: 'multiply'
|
|
89
95
|
},
|
|
90
96
|
d: "M0 0h16v16H0z"
|
|
91
97
|
}), jsx("path", {
|
|
92
|
-
d: "M7
|
|
98
|
+
d: "M7 3H5v2h2V3zM11 3H9v2h2V3zM7 7H5v2h2V7zM11 7H9v2h2V7zM7 11H5v2h2v-2zM11 11H9v2h2v-2z",
|
|
93
99
|
fill: "#161616"
|
|
94
100
|
})]
|
|
95
101
|
});
|
|
96
|
-
}
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
height: "16",
|
|
100
|
-
fill: "none",
|
|
101
|
-
xmlns: "http://www.w3.org/2000/svg"
|
|
102
|
-
};
|
|
103
|
-
var ExternalLinkIcon = function ExternalLinkIcon(props) {
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
function ExternalLink(props) {
|
|
104
105
|
return jsx("svg", {
|
|
106
|
+
width: "16",
|
|
107
|
+
height: "16",
|
|
108
|
+
fill: "none",
|
|
109
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
105
110
|
...props,
|
|
106
111
|
children: jsx("path", {
|
|
107
112
|
fillRule: "evenodd",
|
|
@@ -110,54 +115,71 @@ var ExternalLinkIcon = function ExternalLinkIcon(props) {
|
|
|
110
115
|
fill: "currentcolor"
|
|
111
116
|
})
|
|
112
117
|
});
|
|
113
|
-
}
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
function Feel(props) {
|
|
121
|
+
return jsxs("svg", {
|
|
122
|
+
width: "14",
|
|
123
|
+
height: "14",
|
|
124
|
+
viewBox: "0 0 14 14",
|
|
125
|
+
fill: "none",
|
|
126
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
122
127
|
...props,
|
|
123
|
-
children: jsx("path", {
|
|
124
|
-
d: "M3.
|
|
128
|
+
children: [jsx("path", {
|
|
129
|
+
d: "M3.6168 11.9894C3.47957 12.6745 3.22473 13.1809 2.85227 13.5085C2.48961 13.8362 1.97012 14 1.29381 14H0L0.308751 12.4213H1.57316L3.08751 4.78085H2.17596L2.48471 3.20213H3.39626L3.6315 2.01064C3.76872 1.32553 4.01866 0.819149 4.38132 0.491489C4.75378 0.16383 5.27817 0 5.95448 0H7.2483L6.93954 1.57872H5.67514L5.35168 3.20213H6.61609L6.30734 4.78085H5.04293L3.6168 11.9894Z",
|
|
125
130
|
fill: "currentcolor"
|
|
126
|
-
})
|
|
131
|
+
}), jsx("path", {
|
|
132
|
+
d: "M5.60492 11.0213L8.63361 6.86596L7.28099 3.20213H9.35403L10.0598 5.74894H10.2362L11.927 3.20213H14L10.986 7.25319L12.3239 11.0213H10.2509L9.54517 8.41489H9.36874L7.67796 11.0213H5.60492Z",
|
|
133
|
+
fill: "currentcolor"
|
|
134
|
+
})]
|
|
127
135
|
});
|
|
128
|
-
}
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
height: "14",
|
|
132
|
-
fill: "none",
|
|
133
|
-
xmlns: "http://www.w3.org/2000/svg"
|
|
134
|
-
};
|
|
135
|
-
var LaunchIcon = function LaunchIcon(props) {
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
function Launch(props) {
|
|
136
139
|
return jsxs("svg", {
|
|
140
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
141
|
+
viewBox: "0 0 32 32",
|
|
137
142
|
...props,
|
|
138
143
|
children: [jsx("path", {
|
|
139
|
-
d: "M26
|
|
140
|
-
}), jsx("
|
|
141
|
-
|
|
144
|
+
d: "M26,28H6a2.0027,2.0027,0,0,1-2-2V6A2.0027,2.0027,0,0,1,6,4H16V6H6V26H26V16h2V26A2.0027,2.0027,0,0,1,26,28Z"
|
|
145
|
+
}), jsx("polygon", {
|
|
146
|
+
points: "20 2 20 4 26.586 4 18 12.586 19.414 14 28 5.414 28 12 30 12 30 2 20 2"
|
|
142
147
|
})]
|
|
143
148
|
});
|
|
144
|
-
}
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
viewBox: "0 0 32 32"
|
|
148
|
-
};
|
|
149
|
-
var OpenPopupIcon = function OpenPopupIcon(props) {
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
function OpenPopup(props) {
|
|
150
152
|
return jsx("svg", {
|
|
153
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
154
|
+
viewBox: "0 0 16 16",
|
|
151
155
|
...props,
|
|
152
156
|
children: jsx("path", {
|
|
153
|
-
d: "M6
|
|
157
|
+
d: "M6 15L6 14 2.7 14 7 9.7 6.3 9 2 13.3 2 10 1 10 1 15zM10 1L10 2 13.3 2 9 6.3 9.7 7 14 2.7 14 6 15 6 15 1z"
|
|
154
158
|
})
|
|
155
159
|
});
|
|
156
|
-
}
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
/**
|
|
163
|
+
* @typedef { {
|
|
164
|
+
* [key: string]: string;
|
|
165
|
+
* } } TranslateReplacements
|
|
166
|
+
*/
|
|
167
|
+
|
|
168
|
+
/**
|
|
169
|
+
* A simple translation stub to be used for multi-language support.
|
|
170
|
+
* Can be easily replaced with a more sophisticated solution.
|
|
171
|
+
*
|
|
172
|
+
* @param {string} template to interpolate
|
|
173
|
+
* @param {TranslateReplacements} [replacements] a map with substitutes
|
|
174
|
+
*
|
|
175
|
+
* @return {string} the translated string
|
|
176
|
+
*/
|
|
177
|
+
function translateFallback(template, replacements) {
|
|
178
|
+
replacements = replacements || {};
|
|
179
|
+
return template.replace(/{([^}]+)}/g, function (_, key) {
|
|
180
|
+
return replacements[key] || '{' + key + '}';
|
|
181
|
+
});
|
|
182
|
+
}
|
|
161
183
|
|
|
162
184
|
/**
|
|
163
185
|
* @typedef { {
|
|
@@ -170,13 +192,15 @@ OpenPopupIcon.defaultProps = {
|
|
|
170
192
|
|
|
171
193
|
/**
|
|
172
194
|
* @param {Object} props
|
|
173
|
-
* @param {Object} props.element
|
|
195
|
+
* @param {Object} props.element
|
|
174
196
|
* @param {HeaderProvider} props.headerProvider
|
|
197
|
+
* @param {Function} [props.translate]
|
|
175
198
|
*/
|
|
176
199
|
function Header(props) {
|
|
177
200
|
const {
|
|
178
201
|
element,
|
|
179
|
-
headerProvider
|
|
202
|
+
headerProvider,
|
|
203
|
+
translate = translateFallback
|
|
180
204
|
} = props;
|
|
181
205
|
const {
|
|
182
206
|
getElementIcon,
|
|
@@ -212,9 +236,9 @@ function Header(props) {
|
|
|
212
236
|
rel: "noreferrer",
|
|
213
237
|
class: "bio-properties-panel-header-link",
|
|
214
238
|
href: documentationRef,
|
|
215
|
-
title:
|
|
239
|
+
title: translate('Open documentation'),
|
|
216
240
|
target: "_blank",
|
|
217
|
-
children: jsx(
|
|
241
|
+
children: jsx(ExternalLink, {})
|
|
218
242
|
}) : null
|
|
219
243
|
})]
|
|
220
244
|
});
|
|
@@ -842,7 +866,8 @@ function Group(props) {
|
|
|
842
866
|
entries = [],
|
|
843
867
|
id,
|
|
844
868
|
label,
|
|
845
|
-
shouldOpen = false
|
|
869
|
+
shouldOpen = false,
|
|
870
|
+
translate = translateFallback
|
|
846
871
|
} = props;
|
|
847
872
|
const groupRef = useRef(null);
|
|
848
873
|
const [open, setOpen] = useLayoutState(['groups', id, 'open'], shouldOpen);
|
|
@@ -901,12 +926,13 @@ function Group(props) {
|
|
|
901
926
|
class: "bio-properties-panel-group-header-buttons",
|
|
902
927
|
children: [jsx(DataMarker, {
|
|
903
928
|
edited: edited,
|
|
904
|
-
hasErrors: hasErrors
|
|
929
|
+
hasErrors: hasErrors,
|
|
930
|
+
translate: translate
|
|
905
931
|
}), jsx("button", {
|
|
906
932
|
type: "button",
|
|
907
|
-
title:
|
|
933
|
+
title: translate('Toggle section'),
|
|
908
934
|
class: "bio-properties-panel-group-header-button bio-properties-panel-arrow",
|
|
909
|
-
children: jsx(
|
|
935
|
+
children: jsx(Arrow, {
|
|
910
936
|
class: open ? 'bio-properties-panel-arrow-down' : 'bio-properties-panel-arrow-right'
|
|
911
937
|
})
|
|
912
938
|
})]
|
|
@@ -933,17 +959,18 @@ function Group(props) {
|
|
|
933
959
|
function DataMarker(props) {
|
|
934
960
|
const {
|
|
935
961
|
edited,
|
|
936
|
-
hasErrors
|
|
962
|
+
hasErrors,
|
|
963
|
+
translate = translateFallback
|
|
937
964
|
} = props;
|
|
938
965
|
if (hasErrors) {
|
|
939
966
|
return jsx("div", {
|
|
940
|
-
title:
|
|
967
|
+
title: translate('Section contains an error'),
|
|
941
968
|
class: "bio-properties-panel-dot bio-properties-panel-dot--error"
|
|
942
969
|
});
|
|
943
970
|
}
|
|
944
971
|
if (edited) {
|
|
945
972
|
return jsx("div", {
|
|
946
|
-
title:
|
|
973
|
+
title: translate('Section contains edits'),
|
|
947
974
|
class: "bio-properties-panel-dot"
|
|
948
975
|
});
|
|
949
976
|
}
|
|
@@ -1004,7 +1031,8 @@ const DEFAULT_TOOLTIP = {};
|
|
|
1004
1031
|
* id: String,
|
|
1005
1032
|
* items: Array<ListItemDefinition>,
|
|
1006
1033
|
* label: String,
|
|
1007
|
-
* shouldOpen?: Boolean
|
|
1034
|
+
* shouldOpen?: Boolean,
|
|
1035
|
+
* translate?: Function
|
|
1008
1036
|
* } } ListGroupDefinition
|
|
1009
1037
|
*
|
|
1010
1038
|
* @typedef { {
|
|
@@ -1012,7 +1040,8 @@ const DEFAULT_TOOLTIP = {};
|
|
|
1012
1040
|
* entries: Array<EntryDefinition>,
|
|
1013
1041
|
* id: String,
|
|
1014
1042
|
* label: String,
|
|
1015
|
-
* shouldOpen?: Boolean
|
|
1043
|
+
* shouldOpen?: Boolean,
|
|
1044
|
+
* translate?: Function
|
|
1016
1045
|
* } } GroupDefinition
|
|
1017
1046
|
*
|
|
1018
1047
|
* @typedef { {
|
|
@@ -1356,28 +1385,6 @@ function HeaderButton(props) {
|
|
|
1356
1385
|
});
|
|
1357
1386
|
}
|
|
1358
1387
|
|
|
1359
|
-
/**
|
|
1360
|
-
* @typedef { {
|
|
1361
|
-
* [key: string]: string;
|
|
1362
|
-
* } } TranslateReplacements
|
|
1363
|
-
*/
|
|
1364
|
-
|
|
1365
|
-
/**
|
|
1366
|
-
* A simple translation stub to be used for multi-language support.
|
|
1367
|
-
* Can be easily replaced with a more sophisticated solution.
|
|
1368
|
-
*
|
|
1369
|
-
* @param {string} template to interpolate
|
|
1370
|
-
* @param {TranslateReplacements} [replacements] a map with substitutes
|
|
1371
|
-
*
|
|
1372
|
-
* @return {string} the translated string
|
|
1373
|
-
*/
|
|
1374
|
-
function translateFallback(template, replacements) {
|
|
1375
|
-
replacements = replacements || {};
|
|
1376
|
-
return template.replace(/{([^}]+)}/g, function (_, key) {
|
|
1377
|
-
return replacements[key] || '{' + key + '}';
|
|
1378
|
-
});
|
|
1379
|
-
}
|
|
1380
|
-
|
|
1381
1388
|
function CollapsibleEntry(props) {
|
|
1382
1389
|
const {
|
|
1383
1390
|
element,
|
|
@@ -1416,7 +1423,7 @@ function CollapsibleEntry(props) {
|
|
|
1416
1423
|
type: "button",
|
|
1417
1424
|
title: translate('Toggle list item'),
|
|
1418
1425
|
class: "bio-properties-panel-arrow bio-properties-panel-collapsible-entry-arrow",
|
|
1419
|
-
children: jsx(
|
|
1426
|
+
children: jsx(Arrow, {
|
|
1420
1427
|
class: open ? 'bio-properties-panel-arrow-down' : 'bio-properties-panel-arrow-right'
|
|
1421
1428
|
})
|
|
1422
1429
|
}), remove ? jsx("button", {
|
|
@@ -1424,7 +1431,7 @@ function CollapsibleEntry(props) {
|
|
|
1424
1431
|
title: translate('Delete item'),
|
|
1425
1432
|
class: "bio-properties-panel-remove-entry",
|
|
1426
1433
|
onClick: remove,
|
|
1427
|
-
children: jsx(
|
|
1434
|
+
children: jsx(Delete, {})
|
|
1428
1435
|
}) : null]
|
|
1429
1436
|
}), jsx("div", {
|
|
1430
1437
|
class: classnames('bio-properties-panel-collapsible-entry-entries', open ? 'open' : ''),
|
|
@@ -1565,7 +1572,7 @@ function ListGroup(props) {
|
|
|
1565
1572
|
title: translate('Create new list item'),
|
|
1566
1573
|
class: "bio-properties-panel-group-header-button bio-properties-panel-add-entry",
|
|
1567
1574
|
onClick: handleAddClick,
|
|
1568
|
-
children: [jsx(
|
|
1575
|
+
children: [jsx(Create, {}), !hasItems ? jsx("span", {
|
|
1569
1576
|
class: "bio-properties-panel-add-entry-label",
|
|
1570
1577
|
children: translate('Create')
|
|
1571
1578
|
}) : null]
|
|
@@ -1579,7 +1586,7 @@ function ListGroup(props) {
|
|
|
1579
1586
|
type: "button",
|
|
1580
1587
|
title: translate('Toggle section'),
|
|
1581
1588
|
class: "bio-properties-panel-group-header-button bio-properties-panel-arrow",
|
|
1582
|
-
children: jsx(
|
|
1589
|
+
children: jsx(Arrow, {
|
|
1583
1590
|
class: open ? 'bio-properties-panel-arrow-down' : 'bio-properties-panel-arrow-right'
|
|
1584
1591
|
})
|
|
1585
1592
|
}) : null]
|
|
@@ -1945,6 +1952,7 @@ function JsonEditor(props) {
|
|
|
1945
1952
|
* @param {string} [props.placeholder]
|
|
1946
1953
|
* @param {string} [props.tooltip]
|
|
1947
1954
|
* @param {Function} [props.validate]
|
|
1955
|
+
* @param {Function} [props.translate]
|
|
1948
1956
|
*/
|
|
1949
1957
|
function JsonEditorEntry(props) {
|
|
1950
1958
|
const {
|
|
@@ -1958,24 +1966,25 @@ function JsonEditorEntry(props) {
|
|
|
1958
1966
|
disabled,
|
|
1959
1967
|
placeholder,
|
|
1960
1968
|
tooltip,
|
|
1961
|
-
validate
|
|
1969
|
+
validate,
|
|
1970
|
+
translate = translateFallback
|
|
1962
1971
|
} = props;
|
|
1963
1972
|
const globalError = useError(id);
|
|
1964
1973
|
let value = getValue(element);
|
|
1965
|
-
const [localError, setLocalError] = useState(() => computeError(validate, value));
|
|
1974
|
+
const [localError, setLocalError] = useState(() => computeError(validate, value, translate));
|
|
1966
1975
|
const [editorValue, setEditorValue] = useState(value);
|
|
1967
1976
|
useEffect(() => {
|
|
1968
1977
|
if (value === editorValue) {
|
|
1969
1978
|
return;
|
|
1970
1979
|
}
|
|
1971
1980
|
setEditorValue(value);
|
|
1972
|
-
setLocalError(computeError(validate, value));
|
|
1981
|
+
setLocalError(computeError(validate, value, translate));
|
|
1973
1982
|
}, [value, validate]);
|
|
1974
1983
|
const onInput = useStaticCallback(newValue => {
|
|
1975
1984
|
setEditorValue(newValue);
|
|
1976
1985
|
const currentValue = getValue(element);
|
|
1977
1986
|
if (newValue !== currentValue) {
|
|
1978
|
-
const newValidationError = computeError(validate, newValue);
|
|
1987
|
+
const newValidationError = computeError(validate, newValue, translate);
|
|
1979
1988
|
setValue(newValue, newValidationError);
|
|
1980
1989
|
setLocalError(newValidationError);
|
|
1981
1990
|
}
|
|
@@ -2014,15 +2023,15 @@ function isEdited$8(node) {
|
|
|
2014
2023
|
|
|
2015
2024
|
// helpers /////////////////
|
|
2016
2025
|
|
|
2017
|
-
function computeError(validate, value) {
|
|
2018
|
-
return (isFunction(validate) ? validate(value) : null) || validateJson(value);
|
|
2026
|
+
function computeError(validate, value, translate) {
|
|
2027
|
+
return (isFunction(validate) ? validate(value) : null) || validateJson(value, translate);
|
|
2019
2028
|
}
|
|
2020
|
-
function validateJson(value) {
|
|
2029
|
+
function validateJson(value, translate = translateFallback) {
|
|
2021
2030
|
if (!value || !value.trim()) return null;
|
|
2022
2031
|
try {
|
|
2023
|
-
return isObject(JSON.parse(value)) ? null : 'JSON contains errors';
|
|
2032
|
+
return isObject(JSON.parse(value)) ? null : translate('JSON contains errors');
|
|
2024
2033
|
} catch (e) {
|
|
2025
|
-
return 'JSON contains errors';
|
|
2034
|
+
return translate('JSON contains errors');
|
|
2026
2035
|
}
|
|
2027
2036
|
}
|
|
2028
2037
|
|
|
@@ -2032,19 +2041,20 @@ function validateJson(value) {
|
|
|
2032
2041
|
* @param {Object} props
|
|
2033
2042
|
* @param {Function} props.onClick - Callback to trigger when the button is clicked.
|
|
2034
2043
|
* @param {string} [props.title] - Tooltip text for the button.
|
|
2035
|
-
* @param {
|
|
2036
|
-
* @param {string} [props.className] - Additional class names for the button.
|
|
2044
|
+
* @param {Function} [props.translate] - Translation function for built-in strings.
|
|
2037
2045
|
*/
|
|
2038
2046
|
function OpenPopupButton({
|
|
2039
2047
|
onClick,
|
|
2040
|
-
title
|
|
2048
|
+
title,
|
|
2049
|
+
translate = translateFallback
|
|
2041
2050
|
}) {
|
|
2051
|
+
title = title ?? translate('Open pop-up editor');
|
|
2042
2052
|
return jsx("button", {
|
|
2043
2053
|
type: "button",
|
|
2044
2054
|
title: title,
|
|
2045
2055
|
class: 'bio-properties-panel-open-feel-popup',
|
|
2046
2056
|
onClick: onClick,
|
|
2047
|
-
children: jsx(
|
|
2057
|
+
children: jsx(OpenPopup, {})
|
|
2048
2058
|
});
|
|
2049
2059
|
}
|
|
2050
2060
|
|
|
@@ -2190,7 +2200,8 @@ const FeelEditor = forwardRef((props, ref) => {
|
|
|
2190
2200
|
disabled,
|
|
2191
2201
|
tooltipContainer,
|
|
2192
2202
|
variables,
|
|
2193
|
-
feelLanguageContext
|
|
2203
|
+
feelLanguageContext,
|
|
2204
|
+
translate = translateFallback
|
|
2194
2205
|
} = props;
|
|
2195
2206
|
const inputRef = useRef();
|
|
2196
2207
|
const [editor, setEditor] = useState();
|
|
@@ -2282,14 +2293,15 @@ const FeelEditor = forwardRef((props, ref) => {
|
|
|
2282
2293
|
class: classnames('bio-properties-panel-feel-editor-container', disabled ? 'disabled' : null, popupOpen ? 'popupOpen' : null),
|
|
2283
2294
|
children: [popupOpen && jsx("div", {
|
|
2284
2295
|
class: "bio-properties-panel-feel-editor__open-popup-placeholder",
|
|
2285
|
-
children:
|
|
2296
|
+
children: translate('Opened in editor')
|
|
2286
2297
|
}), jsx("div", {
|
|
2287
2298
|
name: props.name,
|
|
2288
2299
|
class: classnames('bio-properties-panel-input', localValue ? 'edited' : null),
|
|
2289
2300
|
ref: inputRef,
|
|
2290
2301
|
onClick: handleClick
|
|
2291
2302
|
}), !disabled && jsx(OpenPopupButton, {
|
|
2292
|
-
onClick: () => onOpenPopup('feel')
|
|
2303
|
+
onClick: () => onOpenPopup('feel'),
|
|
2304
|
+
translate: translate
|
|
2293
2305
|
})]
|
|
2294
2306
|
});
|
|
2295
2307
|
});
|
|
@@ -2313,16 +2325,22 @@ const noop$3 = () => {};
|
|
|
2313
2325
|
* @param {Object} props
|
|
2314
2326
|
* @param {Object} props.label
|
|
2315
2327
|
* @param {String} props.feel
|
|
2328
|
+
* @param {boolean} props.active
|
|
2329
|
+
* @param {boolean} props.disabled
|
|
2330
|
+
* @param {Function} props.onClick
|
|
2331
|
+
* @param {Function} props.translate
|
|
2332
|
+
* @returns {import('preact').Component}
|
|
2316
2333
|
*/
|
|
2317
2334
|
function FeelIcon(props) {
|
|
2318
2335
|
const {
|
|
2319
2336
|
feel = false,
|
|
2320
2337
|
active,
|
|
2321
2338
|
disabled = false,
|
|
2322
|
-
onClick = noop$3
|
|
2339
|
+
onClick = noop$3,
|
|
2340
|
+
translate = translateFallback
|
|
2323
2341
|
} = props;
|
|
2324
|
-
const feelRequiredLabel = 'FEEL expression is mandatory';
|
|
2325
|
-
const feelOptionalLabel = `Click to ${active ? 'remove' : 'set a'} dynamic value with FEEL expression
|
|
2342
|
+
const feelRequiredLabel = translate('FEEL expression is mandatory');
|
|
2343
|
+
const feelOptionalLabel = translate(`Click to ${active ? 'remove' : 'set a'} dynamic value with FEEL expression`);
|
|
2326
2344
|
const handleClick = e => {
|
|
2327
2345
|
onClick(e);
|
|
2328
2346
|
|
|
@@ -2337,7 +2355,7 @@ function FeelIcon(props) {
|
|
|
2337
2355
|
onClick: handleClick,
|
|
2338
2356
|
disabled: feel === 'required' || disabled,
|
|
2339
2357
|
title: feel === 'required' ? feelRequiredLabel : feelOptionalLabel,
|
|
2340
|
-
children: jsx(
|
|
2358
|
+
children: jsx(Feel, {})
|
|
2341
2359
|
});
|
|
2342
2360
|
}
|
|
2343
2361
|
|
|
@@ -2664,6 +2682,7 @@ const noop$2 = () => {};
|
|
|
2664
2682
|
* @param {Array} props.variables
|
|
2665
2683
|
* @param {string} [props.placeholder]
|
|
2666
2684
|
* @param {string | import('preact').Component} props.tooltip
|
|
2685
|
+
* @param {Function} props.translate
|
|
2667
2686
|
*/
|
|
2668
2687
|
function FeelTextfield(props) {
|
|
2669
2688
|
const {
|
|
@@ -2683,7 +2702,8 @@ function FeelTextfield(props) {
|
|
|
2683
2702
|
singleLine,
|
|
2684
2703
|
tooltipContainer,
|
|
2685
2704
|
OptionalComponent = OptionalFeelInput,
|
|
2686
|
-
tooltip
|
|
2705
|
+
tooltip,
|
|
2706
|
+
translate
|
|
2687
2707
|
} = props;
|
|
2688
2708
|
const [localValue, setLocalValue] = useState(getInitialFeelLocalValue(feel, value));
|
|
2689
2709
|
const editorRef = useShowEntryEvent(id);
|
|
@@ -2772,7 +2792,7 @@ function FeelTextfield(props) {
|
|
|
2772
2792
|
const handleLint = useStaticCallback((lint = []) => {
|
|
2773
2793
|
const syntaxError = lint.some(report => report.type === 'Syntax Error');
|
|
2774
2794
|
if (syntaxError) {
|
|
2775
|
-
onError('Unparsable FEEL expression.');
|
|
2795
|
+
onError(translate('Unparsable FEEL expression.'));
|
|
2776
2796
|
} else {
|
|
2777
2797
|
onError(undefined);
|
|
2778
2798
|
}
|
|
@@ -2843,9 +2863,14 @@ function FeelTextfield(props) {
|
|
|
2843
2863
|
});
|
|
2844
2864
|
return;
|
|
2845
2865
|
}
|
|
2846
|
-
const
|
|
2847
|
-
|
|
2848
|
-
|
|
2866
|
+
const target = event.target;
|
|
2867
|
+
|
|
2868
|
+
// Skip for non-input/textArea elements (e.g. CodeMirror contenteditable)
|
|
2869
|
+
if (!(target instanceof HTMLInputElement) && !(target instanceof HTMLTextAreaElement)) {
|
|
2870
|
+
return;
|
|
2871
|
+
}
|
|
2872
|
+
const isFieldEmpty = !target.value;
|
|
2873
|
+
const isAllSelected = target.selectionStart === 0 && target.selectionEnd === target.value.length;
|
|
2849
2874
|
if (isFieldEmpty || isAllSelected) {
|
|
2850
2875
|
const textData = event.clipboardData.getData('text');
|
|
2851
2876
|
const trimmedValue = textData.trim();
|
|
@@ -2882,7 +2907,8 @@ function FeelTextfield(props) {
|
|
|
2882
2907
|
label: label,
|
|
2883
2908
|
feel: feel,
|
|
2884
2909
|
onClick: handleFeelToggle,
|
|
2885
|
-
active: feelActive
|
|
2910
|
+
active: feelActive,
|
|
2911
|
+
translate: translate
|
|
2886
2912
|
})]
|
|
2887
2913
|
}), jsxs("div", {
|
|
2888
2914
|
class: "bio-properties-panel-feel-container",
|
|
@@ -2913,7 +2939,8 @@ function FeelTextfield(props) {
|
|
|
2913
2939
|
variables: variables,
|
|
2914
2940
|
feelLanguageContext: feelLanguageContext,
|
|
2915
2941
|
ref: editorRef,
|
|
2916
|
-
tooltipContainer: tooltipContainer
|
|
2942
|
+
tooltipContainer: tooltipContainer,
|
|
2943
|
+
translate: translate
|
|
2917
2944
|
}) : jsx(OptionalComponent, {
|
|
2918
2945
|
...props,
|
|
2919
2946
|
popupOpen: isPopupOpen,
|
|
@@ -3182,7 +3209,8 @@ function FeelEntry(props) {
|
|
|
3182
3209
|
onFocus,
|
|
3183
3210
|
onBlur,
|
|
3184
3211
|
placeholder,
|
|
3185
|
-
tooltip
|
|
3212
|
+
tooltip,
|
|
3213
|
+
translate = translateFallback
|
|
3186
3214
|
} = props;
|
|
3187
3215
|
const [validationError, setValidationError] = useState(null);
|
|
3188
3216
|
const [localError, setLocalError] = useState(null);
|
|
@@ -3231,6 +3259,7 @@ function FeelEntry(props) {
|
|
|
3231
3259
|
hostLanguage: hostLanguage,
|
|
3232
3260
|
singleLine: singleLine,
|
|
3233
3261
|
show: show,
|
|
3262
|
+
translate: translate,
|
|
3234
3263
|
value: value,
|
|
3235
3264
|
variables: variables,
|
|
3236
3265
|
tooltipContainer: tooltipContainer,
|
|
@@ -3644,6 +3673,7 @@ function prefixIdLabel(id) {
|
|
|
3644
3673
|
* @param {Item[]} [props.items]
|
|
3645
3674
|
* @param {boolean} [props.open]
|
|
3646
3675
|
* @param {string|boolean} [props.autoFocusEntry] either a custom selector string or true to focus the first input
|
|
3676
|
+
* @param {Function} [props.translate]
|
|
3647
3677
|
* @returns
|
|
3648
3678
|
*/
|
|
3649
3679
|
function List(props) {
|
|
@@ -3703,19 +3733,21 @@ function List(props) {
|
|
|
3703
3733
|
title: translate('Create new list item'),
|
|
3704
3734
|
onClick: addItem,
|
|
3705
3735
|
class: "bio-properties-panel-add-entry",
|
|
3706
|
-
children: [jsx(
|
|
3736
|
+
children: [jsx(Create, {}), !hasItems ? jsx("span", {
|
|
3707
3737
|
class: "bio-properties-panel-add-entry-label",
|
|
3708
3738
|
children: translate('Create')
|
|
3709
3739
|
}) : null]
|
|
3710
3740
|
}), hasItems && jsx("div", {
|
|
3711
|
-
title: `List contains
|
|
3741
|
+
title: translate(`List contains {numOfItems} item${items.length != 1 ? 's' : ''}`, {
|
|
3742
|
+
numOfItems: items.length
|
|
3743
|
+
}),
|
|
3712
3744
|
class: "bio-properties-panel-list-badge",
|
|
3713
3745
|
children: items.length
|
|
3714
3746
|
}), hasItems && jsx("button", {
|
|
3715
3747
|
type: "button",
|
|
3716
3748
|
title: translate('Toggle list item'),
|
|
3717
3749
|
class: "bio-properties-panel-arrow",
|
|
3718
|
-
children: jsx(
|
|
3750
|
+
children: jsx(Arrow, {
|
|
3719
3751
|
class: open ? 'bio-properties-panel-arrow-down' : 'bio-properties-panel-arrow-right'
|
|
3720
3752
|
})
|
|
3721
3753
|
})]
|
|
@@ -3786,7 +3818,7 @@ function ItemsList(props) {
|
|
|
3786
3818
|
title: translate('Delete item'),
|
|
3787
3819
|
class: "bio-properties-panel-remove-entry bio-properties-panel-remove-list-entry",
|
|
3788
3820
|
onClick: () => onRemove && onRemove(item),
|
|
3789
|
-
children: jsx(
|
|
3821
|
+
children: jsx(Delete, {})
|
|
3790
3822
|
})]
|
|
3791
3823
|
}, key);
|
|
3792
3824
|
})
|
|
@@ -3984,6 +4016,7 @@ function prefixId$4(id) {
|
|
|
3984
4016
|
* @param {Function} [props.onBlur]
|
|
3985
4017
|
* @param {Function} [props.onFocus]
|
|
3986
4018
|
* @param {Function} props.setValue
|
|
4019
|
+
* @param {Function} [props.translate]
|
|
3987
4020
|
*/
|
|
3988
4021
|
function Simple(props) {
|
|
3989
4022
|
const {
|
|
@@ -3994,7 +4027,8 @@ function Simple(props) {
|
|
|
3994
4027
|
id,
|
|
3995
4028
|
onBlur,
|
|
3996
4029
|
onFocus,
|
|
3997
|
-
setValue
|
|
4030
|
+
setValue,
|
|
4031
|
+
translate = translateFallback
|
|
3998
4032
|
} = props;
|
|
3999
4033
|
const value = getValue(element);
|
|
4000
4034
|
const [localValue, setLocalValue] = useState(value);
|
|
@@ -4022,7 +4056,7 @@ function Simple(props) {
|
|
|
4022
4056
|
disabled: disabled,
|
|
4023
4057
|
class: "bio-properties-panel-input",
|
|
4024
4058
|
onInput: handleInput,
|
|
4025
|
-
"aria-label": localValue || '<empty>',
|
|
4059
|
+
"aria-label": localValue || translate('<empty>'),
|
|
4026
4060
|
onFocus: onFocus,
|
|
4027
4061
|
onBlur: onBlur,
|
|
4028
4062
|
value: localValue
|
|
@@ -4737,7 +4771,7 @@ function Title(props) {
|
|
|
4737
4771
|
class: "bio-properties-panel-popup__drag-preview"
|
|
4738
4772
|
}), jsx("div", {
|
|
4739
4773
|
class: "bio-properties-panel-popup__drag-handle",
|
|
4740
|
-
children: jsx(
|
|
4774
|
+
children: jsx(Drag, {})
|
|
4741
4775
|
})]
|
|
4742
4776
|
}), jsx("div", {
|
|
4743
4777
|
class: "bio-properties-panel-popup__title",
|
|
@@ -4747,7 +4781,7 @@ function Title(props) {
|
|
|
4747
4781
|
title: closeButtonTooltip,
|
|
4748
4782
|
class: "bio-properties-panel-popup__close",
|
|
4749
4783
|
onClick: onClose,
|
|
4750
|
-
children: jsx(
|
|
4784
|
+
children: jsx(Close, {})
|
|
4751
4785
|
})]
|
|
4752
4786
|
});
|
|
4753
4787
|
}
|
|
@@ -4881,7 +4915,7 @@ function FeelPopup$1(props) {
|
|
|
4881
4915
|
href: link.href,
|
|
4882
4916
|
target: "_blank",
|
|
4883
4917
|
class: "bio-properties-panel-feel-popup__title-link",
|
|
4884
|
-
children: [link.title, jsx(
|
|
4918
|
+
children: [link.title, jsx(Launch, {})]
|
|
4885
4919
|
}, index);
|
|
4886
4920
|
})
|
|
4887
4921
|
})
|
|
@@ -5116,5 +5150,5 @@ var index = {
|
|
|
5116
5150
|
feelPopupRenderer: ['type', FeelPopupRenderer]
|
|
5117
5151
|
};
|
|
5118
5152
|
|
|
5119
|
-
export { ArrowIcon, CheckboxEntry, CheckboxGroup, CloseIcon, CollapsibleEntry, CreateIcon, index$1 as DebounceInputModule, DeleteIcon, DescriptionContext, Description as DescriptionEntry, DragIcon, DropdownButton, ErrorsContext, EventContext, ExternalLinkIcon, FeelCheckboxEntry, FeelEntry,
|
|
5153
|
+
export { Arrow as ArrowIcon, CheckboxEntry, CheckboxGroup, Close as CloseIcon, CollapsibleEntry, Create as CreateIcon, index$1 as DebounceInputModule, Delete as DeleteIcon, DescriptionContext, Description as DescriptionEntry, Drag as DragIcon, DropdownButton, ErrorsContext, EventContext, ExternalLink as ExternalLinkIcon, FeelCheckboxEntry, FeelEntry, Feel as FeelIcon, FeelLanguageContext, FeelNumberEntry, index as FeelPopupModule, FeelTemplatingEntry, FeelTextAreaEntry, FeelToggleSwitchEntry, Group, Header, HeaderButton, JsonEditorEntry, Launch as LaunchIcon, LayoutContext, List as ListEntry, ListGroup, ListItem, NumberFieldEntry, OpenPopup as OpenPopupIcon, Placeholder, PropertiesPanel, LayoutContext as PropertiesPanelContext, SelectEntry, Simple as SimpleEntry, TemplatingEntry, TextAreaEntry, TextfieldEntry as TextFieldEntry, ToggleSwitchEntry, TooltipContext, TooltipWrapper as TooltipEntry, isEdited$9 as isCheckboxEntryEdited, isEdited$5 as isFeelEntryEdited, isEdited$8 as isJsonEditorEntryEdited, isEdited$6 as isNumberFieldEntryEdited, isEdited$3 as isSelectEntryEdited, isEdited$2 as isSimpleEntryEdited, isEdited$4 as isTemplatingEntryEdited, isEdited$1 as isTextAreaEntryEdited, isEdited as isTextFieldEntryEdited, isEdited$7 as isToggleSwitchEntryEdited, useDebounce, useDescriptionContext, useElementVisible, useError, useErrors, useEvent, useKeyFactory, useLayoutState, usePrevious, useShowEntryEvent, useStaticCallback, useStickyIntersectionObserver, useTooltipContext };
|
|
5120
5154
|
//# sourceMappingURL=index.esm.js.map
|