@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.
Files changed (5) hide show
  1. package/dist/index.esm.js +192 -158
  2. package/dist/index.esm.js.map +1 -1
  3. package/dist/index.js +201 -167
  4. package/dist/index.js.map +1 -1
  5. package/package.json +3 -5
package/dist/index.js CHANGED
@@ -2,9 +2,9 @@
2
2
 
3
3
  var hooks = require('../preact/hooks');
4
4
  var minDash = require('min-dash');
5
- var compat = require('../preact/compat');
6
5
  var jsxRuntime = require('../preact/jsx-runtime');
7
6
  var preact = require('../preact');
7
+ var compat = require('../preact/compat');
8
8
  var classnames = require('classnames');
9
9
  var minDom = require('min-dom');
10
10
  var view = require('@codemirror/view');
@@ -14,7 +14,7 @@ var autocomplete = require('@codemirror/autocomplete');
14
14
  var commands = require('@codemirror/commands');
15
15
  var langJson = require('@codemirror/lang-json');
16
16
  var lint = require('@codemirror/lint');
17
- var feelers = require('feelers');
17
+ var feelersEditor = require('@bpmn-io/feelers-editor');
18
18
  var Editor = require('@bpmn-io/feel-editor');
19
19
  var focusTrap = require('focus-trap');
20
20
 
@@ -37,92 +37,97 @@ function _interopNamespaceDefault(e) {
37
37
 
38
38
  var focusTrap__namespace = /*#__PURE__*/_interopNamespaceDefault(focusTrap);
39
39
 
40
- var ArrowIcon = function ArrowIcon(props) {
40
+ function Arrow(props) {
41
41
  return jsxRuntime.jsx("svg", {
42
+ xmlns: "http://www.w3.org/2000/svg",
43
+ width: "16",
44
+ height: "16",
45
+ viewBox: "0 0 16 16",
42
46
  ...props,
43
47
  children: jsxRuntime.jsx("path", {
44
48
  fillRule: "evenodd",
45
- d: "m11.657 8-4.95 4.95a1 1 0 0 1-1.414-1.414L8.828 8 5.293 4.464A1 1 0 1 1 6.707 3.05L11.657 8Z"
49
+ 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",
50
+ transform: "rotate(-45 6 8)"
46
51
  })
47
52
  });
48
- };
49
- ArrowIcon.defaultProps = {
50
- xmlns: "http://www.w3.org/2000/svg",
51
- width: "16",
52
- height: "16"
53
- };
54
- var CloseIcon = function CloseIcon(props) {
53
+ }
54
+
55
+ function Close(props) {
55
56
  return jsxRuntime.jsx("svg", {
57
+ xmlns: "http://www.w3.org/2000/svg",
58
+ width: "16",
59
+ height: "16",
60
+ viewBox: "0 0 16 16",
56
61
  ...props,
57
62
  children: jsxRuntime.jsx("path", {
58
63
  fillRule: "evenodd",
59
- d: "m12 4.7-.7-.7L8 7.3 4.7 4l-.7.7L7.3 8 4 11.3l.7.7L8 8.7l3.3 3.3.7-.7L8.7 8 12 4.7Z",
64
+ 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",
60
65
  fill: "currentColor"
61
66
  })
62
67
  });
63
- };
64
- CloseIcon.defaultProps = {
65
- xmlns: "http://www.w3.org/2000/svg",
66
- width: "16",
67
- height: "16"
68
- };
69
- var CreateIcon = function CreateIcon(props) {
68
+ }
69
+
70
+ function Create(props) {
70
71
  return jsxRuntime.jsx("svg", {
72
+ xmlns: "http://www.w3.org/2000/svg",
73
+ width: "16",
74
+ height: "16",
75
+ viewBox: "0 0 16 16",
71
76
  ...props,
72
77
  children: jsxRuntime.jsx("path", {
73
78
  fillRule: "evenodd",
74
- d: "M9 13V9h4a1 1 0 0 0 0-2H9V3a1 1 0 1 0-2 0v4H3a1 1 0 1 0 0 2h4v4a1 1 0 0 0 2 0Z"
79
+ 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"
75
80
  })
76
81
  });
77
- };
78
- CreateIcon.defaultProps = {
79
- xmlns: "http://www.w3.org/2000/svg",
80
- width: "16",
81
- height: "16"
82
- };
83
- var DeleteIcon = function DeleteIcon(props) {
82
+ }
83
+
84
+ function Delete(props) {
84
85
  return jsxRuntime.jsx("svg", {
86
+ xmlns: "http://www.w3.org/2000/svg",
87
+ width: "16",
88
+ height: "16",
89
+ viewBox: "0 0 16 16",
85
90
  ...props,
86
91
  children: jsxRuntime.jsx("path", {
87
92
  fillRule: "evenodd",
88
- d: "M12 6v7c0 1.1-.4 1.55-1.5 1.55h-5C4.4 14.55 4 14.1 4 13V6h8Zm-1.5 1.5h-5v4.3c0 .66.5 1.2 1.111 1.2H9.39c.611 0 1.111-.54 1.111-1.2V7.5ZM13 3h-2l-1-1H6L5 3H3v1.5h10V3Z"
93
+ 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",
94
+ transform: "translate(3 2)"
89
95
  })
90
96
  });
91
- };
92
- DeleteIcon.defaultProps = {
93
- xmlns: "http://www.w3.org/2000/svg",
94
- width: "16",
95
- height: "16"
96
- };
97
- var DragIcon = function DragIcon(props) {
97
+ }
98
+
99
+ function Drag(props) {
98
100
  return jsxRuntime.jsxs("svg", {
101
+ width: "16",
102
+ height: "16",
103
+ fill: "none",
104
+ xmlns: "http://www.w3.org/2000/svg",
99
105
  ...props,
100
106
  children: [jsxRuntime.jsx("path", {
101
107
  fill: "#fff",
102
108
  style: {
103
- mixBlendMode: "multiply"
109
+ mixBlendMode: 'multiply'
104
110
  },
105
111
  d: "M0 0h16v16H0z"
106
112
  }), jsxRuntime.jsx("path", {
107
113
  fill: "#fff",
108
114
  style: {
109
- mixBlendMode: "multiply"
115
+ mixBlendMode: 'multiply'
110
116
  },
111
117
  d: "M0 0h16v16H0z"
112
118
  }), jsxRuntime.jsx("path", {
113
- d: "M7 3H5v2h2V3zm4 0H9v2h2V3zM7 7H5v2h2V7zm4 0H9v2h2V7zm-4 4H5v2h2v-2zm4 0H9v2h2v-2z",
119
+ d: "M7 3H5v2h2V3zM11 3H9v2h2V3zM7 7H5v2h2V7zM11 7H9v2h2V7zM7 11H5v2h2v-2zM11 11H9v2h2v-2z",
114
120
  fill: "#161616"
115
121
  })]
116
122
  });
117
- };
118
- DragIcon.defaultProps = {
119
- width: "16",
120
- height: "16",
121
- fill: "none",
122
- xmlns: "http://www.w3.org/2000/svg"
123
- };
124
- var ExternalLinkIcon = function ExternalLinkIcon(props) {
123
+ }
124
+
125
+ function ExternalLink(props) {
125
126
  return jsxRuntime.jsx("svg", {
127
+ width: "16",
128
+ height: "16",
129
+ fill: "none",
130
+ xmlns: "http://www.w3.org/2000/svg",
126
131
  ...props,
127
132
  children: jsxRuntime.jsx("path", {
128
133
  fillRule: "evenodd",
@@ -131,54 +136,71 @@ var ExternalLinkIcon = function ExternalLinkIcon(props) {
131
136
  fill: "currentcolor"
132
137
  })
133
138
  });
134
- };
135
- ExternalLinkIcon.defaultProps = {
136
- width: "16",
137
- height: "16",
138
- fill: "none",
139
- xmlns: "http://www.w3.org/2000/svg"
140
- };
141
- var FeelIcon$1 = function FeelIcon(props) {
142
- return jsxRuntime.jsx("svg", {
139
+ }
140
+
141
+ function Feel(props) {
142
+ return jsxRuntime.jsxs("svg", {
143
+ width: "14",
144
+ height: "14",
145
+ viewBox: "0 0 14 14",
146
+ fill: "none",
147
+ xmlns: "http://www.w3.org/2000/svg",
143
148
  ...props,
144
- children: jsxRuntime.jsx("path", {
145
- d: "M3.617 11.99c-.137.684-.392 1.19-.765 1.518-.362.328-.882.492-1.558.492H0l.309-1.579h1.264l1.515-7.64h-.912l.309-1.579h.911l.236-1.191c.137-.685.387-1.192.75-1.52C4.753.164 5.277 0 5.953 0h1.294L6.94 1.579H5.675l-.323 1.623h1.264l-.309 1.579H5.043l-1.426 7.208ZM5.605 11.021l3.029-4.155L7.28 3.202h2.073l.706 2.547h.176l1.691-2.547H14l-3.014 4.051 1.338 3.768H10.25l-.706-2.606H9.37L7.678 11.02H5.605Z",
149
+ children: [jsxRuntime.jsx("path", {
150
+ 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",
146
151
  fill: "currentcolor"
147
- })
152
+ }), jsxRuntime.jsx("path", {
153
+ 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",
154
+ fill: "currentcolor"
155
+ })]
148
156
  });
149
- };
150
- FeelIcon$1.defaultProps = {
151
- width: "14",
152
- height: "14",
153
- fill: "none",
154
- xmlns: "http://www.w3.org/2000/svg"
155
- };
156
- var LaunchIcon = function LaunchIcon(props) {
157
+ }
158
+
159
+ function Launch(props) {
157
160
  return jsxRuntime.jsxs("svg", {
161
+ xmlns: "http://www.w3.org/2000/svg",
162
+ viewBox: "0 0 32 32",
158
163
  ...props,
159
164
  children: [jsxRuntime.jsx("path", {
160
- d: "M26 28H6a2.003 2.003 0 0 1-2-2V6a2.003 2.003 0 0 1 2-2h10v2H6v20h20V16h2v10a2.003 2.003 0 0 1-2 2Z"
161
- }), jsxRuntime.jsx("path", {
162
- d: "M20 2v2h6.586L18 12.586 19.414 14 28 5.414V12h2V2H20z"
165
+ 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"
166
+ }), jsxRuntime.jsx("polygon", {
167
+ 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"
163
168
  })]
164
169
  });
165
- };
166
- LaunchIcon.defaultProps = {
167
- xmlns: "http://www.w3.org/2000/svg",
168
- viewBox: "0 0 32 32"
169
- };
170
- var OpenPopupIcon = function OpenPopupIcon(props) {
170
+ }
171
+
172
+ function OpenPopup(props) {
171
173
  return jsxRuntime.jsx("svg", {
174
+ xmlns: "http://www.w3.org/2000/svg",
175
+ viewBox: "0 0 16 16",
172
176
  ...props,
173
177
  children: jsxRuntime.jsx("path", {
174
- d: "M6 15v-1H2.7L7 9.7 6.3 9 2 13.3V10H1v5zm4-14v1h3.3L9 6.3l.7.7L14 2.7V6h1V1z"
178
+ 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"
175
179
  })
176
180
  });
177
- };
178
- OpenPopupIcon.defaultProps = {
179
- xmlns: "http://www.w3.org/2000/svg",
180
- viewBox: "0 0 16 16"
181
- };
181
+ }
182
+
183
+ /**
184
+ * @typedef { {
185
+ * [key: string]: string;
186
+ * } } TranslateReplacements
187
+ */
188
+
189
+ /**
190
+ * A simple translation stub to be used for multi-language support.
191
+ * Can be easily replaced with a more sophisticated solution.
192
+ *
193
+ * @param {string} template to interpolate
194
+ * @param {TranslateReplacements} [replacements] a map with substitutes
195
+ *
196
+ * @return {string} the translated string
197
+ */
198
+ function translateFallback(template, replacements) {
199
+ replacements = replacements || {};
200
+ return template.replace(/{([^}]+)}/g, function (_, key) {
201
+ return replacements[key] || '{' + key + '}';
202
+ });
203
+ }
182
204
 
183
205
  /**
184
206
  * @typedef { {
@@ -191,13 +213,15 @@ OpenPopupIcon.defaultProps = {
191
213
 
192
214
  /**
193
215
  * @param {Object} props
194
- * @param {Object} props.element,
216
+ * @param {Object} props.element
195
217
  * @param {HeaderProvider} props.headerProvider
218
+ * @param {Function} [props.translate]
196
219
  */
197
220
  function Header(props) {
198
221
  const {
199
222
  element,
200
- headerProvider
223
+ headerProvider,
224
+ translate = translateFallback
201
225
  } = props;
202
226
  const {
203
227
  getElementIcon,
@@ -233,9 +257,9 @@ function Header(props) {
233
257
  rel: "noreferrer",
234
258
  class: "bio-properties-panel-header-link",
235
259
  href: documentationRef,
236
- title: "Open documentation",
260
+ title: translate('Open documentation'),
237
261
  target: "_blank",
238
- children: jsxRuntime.jsx(ExternalLinkIcon, {})
262
+ children: jsxRuntime.jsx(ExternalLink, {})
239
263
  }) : null
240
264
  })]
241
265
  });
@@ -863,7 +887,8 @@ function Group(props) {
863
887
  entries = [],
864
888
  id,
865
889
  label,
866
- shouldOpen = false
890
+ shouldOpen = false,
891
+ translate = translateFallback
867
892
  } = props;
868
893
  const groupRef = hooks.useRef(null);
869
894
  const [open, setOpen] = useLayoutState(['groups', id, 'open'], shouldOpen);
@@ -922,12 +947,13 @@ function Group(props) {
922
947
  class: "bio-properties-panel-group-header-buttons",
923
948
  children: [jsxRuntime.jsx(DataMarker, {
924
949
  edited: edited,
925
- hasErrors: hasErrors
950
+ hasErrors: hasErrors,
951
+ translate: translate
926
952
  }), jsxRuntime.jsx("button", {
927
953
  type: "button",
928
- title: "Toggle section",
954
+ title: translate('Toggle section'),
929
955
  class: "bio-properties-panel-group-header-button bio-properties-panel-arrow",
930
- children: jsxRuntime.jsx(ArrowIcon, {
956
+ children: jsxRuntime.jsx(Arrow, {
931
957
  class: open ? 'bio-properties-panel-arrow-down' : 'bio-properties-panel-arrow-right'
932
958
  })
933
959
  })]
@@ -954,17 +980,18 @@ function Group(props) {
954
980
  function DataMarker(props) {
955
981
  const {
956
982
  edited,
957
- hasErrors
983
+ hasErrors,
984
+ translate = translateFallback
958
985
  } = props;
959
986
  if (hasErrors) {
960
987
  return jsxRuntime.jsx("div", {
961
- title: "Section contains an error",
988
+ title: translate('Section contains an error'),
962
989
  class: "bio-properties-panel-dot bio-properties-panel-dot--error"
963
990
  });
964
991
  }
965
992
  if (edited) {
966
993
  return jsxRuntime.jsx("div", {
967
- title: "Section contains edits",
994
+ title: translate('Section contains edits'),
968
995
  class: "bio-properties-panel-dot"
969
996
  });
970
997
  }
@@ -1025,7 +1052,8 @@ const DEFAULT_TOOLTIP = {};
1025
1052
  * id: String,
1026
1053
  * items: Array<ListItemDefinition>,
1027
1054
  * label: String,
1028
- * shouldOpen?: Boolean
1055
+ * shouldOpen?: Boolean,
1056
+ * translate?: Function
1029
1057
  * } } ListGroupDefinition
1030
1058
  *
1031
1059
  * @typedef { {
@@ -1033,7 +1061,8 @@ const DEFAULT_TOOLTIP = {};
1033
1061
  * entries: Array<EntryDefinition>,
1034
1062
  * id: String,
1035
1063
  * label: String,
1036
- * shouldOpen?: Boolean
1064
+ * shouldOpen?: Boolean,
1065
+ * translate?: Function
1037
1066
  * } } GroupDefinition
1038
1067
  *
1039
1068
  * @typedef { {
@@ -1377,28 +1406,6 @@ function HeaderButton(props) {
1377
1406
  });
1378
1407
  }
1379
1408
 
1380
- /**
1381
- * @typedef { {
1382
- * [key: string]: string;
1383
- * } } TranslateReplacements
1384
- */
1385
-
1386
- /**
1387
- * A simple translation stub to be used for multi-language support.
1388
- * Can be easily replaced with a more sophisticated solution.
1389
- *
1390
- * @param {string} template to interpolate
1391
- * @param {TranslateReplacements} [replacements] a map with substitutes
1392
- *
1393
- * @return {string} the translated string
1394
- */
1395
- function translateFallback(template, replacements) {
1396
- replacements = replacements || {};
1397
- return template.replace(/{([^}]+)}/g, function (_, key) {
1398
- return replacements[key] || '{' + key + '}';
1399
- });
1400
- }
1401
-
1402
1409
  function CollapsibleEntry(props) {
1403
1410
  const {
1404
1411
  element,
@@ -1437,7 +1444,7 @@ function CollapsibleEntry(props) {
1437
1444
  type: "button",
1438
1445
  title: translate('Toggle list item'),
1439
1446
  class: "bio-properties-panel-arrow bio-properties-panel-collapsible-entry-arrow",
1440
- children: jsxRuntime.jsx(ArrowIcon, {
1447
+ children: jsxRuntime.jsx(Arrow, {
1441
1448
  class: open ? 'bio-properties-panel-arrow-down' : 'bio-properties-panel-arrow-right'
1442
1449
  })
1443
1450
  }), remove ? jsxRuntime.jsx("button", {
@@ -1445,7 +1452,7 @@ function CollapsibleEntry(props) {
1445
1452
  title: translate('Delete item'),
1446
1453
  class: "bio-properties-panel-remove-entry",
1447
1454
  onClick: remove,
1448
- children: jsxRuntime.jsx(DeleteIcon, {})
1455
+ children: jsxRuntime.jsx(Delete, {})
1449
1456
  }) : null]
1450
1457
  }), jsxRuntime.jsx("div", {
1451
1458
  class: classnames('bio-properties-panel-collapsible-entry-entries', open ? 'open' : ''),
@@ -1586,7 +1593,7 @@ function ListGroup(props) {
1586
1593
  title: translate('Create new list item'),
1587
1594
  class: "bio-properties-panel-group-header-button bio-properties-panel-add-entry",
1588
1595
  onClick: handleAddClick,
1589
- children: [jsxRuntime.jsx(CreateIcon, {}), !hasItems ? jsxRuntime.jsx("span", {
1596
+ children: [jsxRuntime.jsx(Create, {}), !hasItems ? jsxRuntime.jsx("span", {
1590
1597
  class: "bio-properties-panel-add-entry-label",
1591
1598
  children: translate('Create')
1592
1599
  }) : null]
@@ -1600,7 +1607,7 @@ function ListGroup(props) {
1600
1607
  type: "button",
1601
1608
  title: translate('Toggle section'),
1602
1609
  class: "bio-properties-panel-group-header-button bio-properties-panel-arrow",
1603
- children: jsxRuntime.jsx(ArrowIcon, {
1610
+ children: jsxRuntime.jsx(Arrow, {
1604
1611
  class: open ? 'bio-properties-panel-arrow-down' : 'bio-properties-panel-arrow-right'
1605
1612
  })
1606
1613
  }) : null]
@@ -1966,6 +1973,7 @@ function JsonEditor(props) {
1966
1973
  * @param {string} [props.placeholder]
1967
1974
  * @param {string} [props.tooltip]
1968
1975
  * @param {Function} [props.validate]
1976
+ * @param {Function} [props.translate]
1969
1977
  */
1970
1978
  function JsonEditorEntry(props) {
1971
1979
  const {
@@ -1979,24 +1987,25 @@ function JsonEditorEntry(props) {
1979
1987
  disabled,
1980
1988
  placeholder,
1981
1989
  tooltip,
1982
- validate
1990
+ validate,
1991
+ translate = translateFallback
1983
1992
  } = props;
1984
1993
  const globalError = useError(id);
1985
1994
  let value = getValue(element);
1986
- const [localError, setLocalError] = hooks.useState(() => computeError(validate, value));
1995
+ const [localError, setLocalError] = hooks.useState(() => computeError(validate, value, translate));
1987
1996
  const [editorValue, setEditorValue] = hooks.useState(value);
1988
1997
  hooks.useEffect(() => {
1989
1998
  if (value === editorValue) {
1990
1999
  return;
1991
2000
  }
1992
2001
  setEditorValue(value);
1993
- setLocalError(computeError(validate, value));
2002
+ setLocalError(computeError(validate, value, translate));
1994
2003
  }, [value, validate]);
1995
2004
  const onInput = useStaticCallback(newValue => {
1996
2005
  setEditorValue(newValue);
1997
2006
  const currentValue = getValue(element);
1998
2007
  if (newValue !== currentValue) {
1999
- const newValidationError = computeError(validate, newValue);
2008
+ const newValidationError = computeError(validate, newValue, translate);
2000
2009
  setValue(newValue, newValidationError);
2001
2010
  setLocalError(newValidationError);
2002
2011
  }
@@ -2035,15 +2044,15 @@ function isEdited$8(node) {
2035
2044
 
2036
2045
  // helpers /////////////////
2037
2046
 
2038
- function computeError(validate, value) {
2039
- return (minDash.isFunction(validate) ? validate(value) : null) || validateJson(value);
2047
+ function computeError(validate, value, translate) {
2048
+ return (minDash.isFunction(validate) ? validate(value) : null) || validateJson(value, translate);
2040
2049
  }
2041
- function validateJson(value) {
2050
+ function validateJson(value, translate = translateFallback) {
2042
2051
  if (!value || !value.trim()) return null;
2043
2052
  try {
2044
- return minDash.isObject(JSON.parse(value)) ? null : 'JSON contains errors';
2053
+ return minDash.isObject(JSON.parse(value)) ? null : translate('JSON contains errors');
2045
2054
  } catch (e) {
2046
- return 'JSON contains errors';
2055
+ return translate('JSON contains errors');
2047
2056
  }
2048
2057
  }
2049
2058
 
@@ -2053,19 +2062,20 @@ function validateJson(value) {
2053
2062
  * @param {Object} props
2054
2063
  * @param {Function} props.onClick - Callback to trigger when the button is clicked.
2055
2064
  * @param {string} [props.title] - Tooltip text for the button.
2056
- * @param {boolean} [props.disabled] - Whether the button is disabled.
2057
- * @param {string} [props.className] - Additional class names for the button.
2065
+ * @param {Function} [props.translate] - Translation function for built-in strings.
2058
2066
  */
2059
2067
  function OpenPopupButton({
2060
2068
  onClick,
2061
- title = 'Open pop-up editor'
2069
+ title,
2070
+ translate = translateFallback
2062
2071
  }) {
2072
+ title = title ?? translate('Open pop-up editor');
2063
2073
  return jsxRuntime.jsx("button", {
2064
2074
  type: "button",
2065
2075
  title: title,
2066
2076
  class: 'bio-properties-panel-open-feel-popup',
2067
2077
  onClick: onClick,
2068
- children: jsxRuntime.jsx(OpenPopupIcon, {})
2078
+ children: jsxRuntime.jsx(OpenPopup, {})
2069
2079
  });
2070
2080
  }
2071
2081
 
@@ -2120,7 +2130,7 @@ const TemplatingEditor = compat.forwardRef((props, ref) => {
2120
2130
  });
2121
2131
  hooks.useEffect(() => {
2122
2132
  let editor;
2123
- editor = new feelers.FeelersEditor({
2133
+ editor = new feelersEditor.FeelersEditor({
2124
2134
  container: inputRef.current,
2125
2135
  onChange: handleInput,
2126
2136
  value: localValue,
@@ -2211,7 +2221,8 @@ const FeelEditor = compat.forwardRef((props, ref) => {
2211
2221
  disabled,
2212
2222
  tooltipContainer,
2213
2223
  variables,
2214
- feelLanguageContext
2224
+ feelLanguageContext,
2225
+ translate = translateFallback
2215
2226
  } = props;
2216
2227
  const inputRef = hooks.useRef();
2217
2228
  const [editor, setEditor] = hooks.useState();
@@ -2303,14 +2314,15 @@ const FeelEditor = compat.forwardRef((props, ref) => {
2303
2314
  class: classnames('bio-properties-panel-feel-editor-container', disabled ? 'disabled' : null, popupOpen ? 'popupOpen' : null),
2304
2315
  children: [popupOpen && jsxRuntime.jsx("div", {
2305
2316
  class: "bio-properties-panel-feel-editor__open-popup-placeholder",
2306
- children: "Opened in editor"
2317
+ children: translate('Opened in editor')
2307
2318
  }), jsxRuntime.jsx("div", {
2308
2319
  name: props.name,
2309
2320
  class: classnames('bio-properties-panel-input', localValue ? 'edited' : null),
2310
2321
  ref: inputRef,
2311
2322
  onClick: handleClick
2312
2323
  }), !disabled && jsxRuntime.jsx(OpenPopupButton, {
2313
- onClick: () => onOpenPopup('feel')
2324
+ onClick: () => onOpenPopup('feel'),
2325
+ translate: translate
2314
2326
  })]
2315
2327
  });
2316
2328
  });
@@ -2334,16 +2346,22 @@ const noop$3 = () => {};
2334
2346
  * @param {Object} props
2335
2347
  * @param {Object} props.label
2336
2348
  * @param {String} props.feel
2349
+ * @param {boolean} props.active
2350
+ * @param {boolean} props.disabled
2351
+ * @param {Function} props.onClick
2352
+ * @param {Function} props.translate
2353
+ * @returns {import('preact').Component}
2337
2354
  */
2338
2355
  function FeelIcon(props) {
2339
2356
  const {
2340
2357
  feel = false,
2341
2358
  active,
2342
2359
  disabled = false,
2343
- onClick = noop$3
2360
+ onClick = noop$3,
2361
+ translate = translateFallback
2344
2362
  } = props;
2345
- const feelRequiredLabel = 'FEEL expression is mandatory';
2346
- const feelOptionalLabel = `Click to ${active ? 'remove' : 'set a'} dynamic value with FEEL expression`;
2363
+ const feelRequiredLabel = translate('FEEL expression is mandatory');
2364
+ const feelOptionalLabel = translate(`Click to ${active ? 'remove' : 'set a'} dynamic value with FEEL expression`);
2347
2365
  const handleClick = e => {
2348
2366
  onClick(e);
2349
2367
 
@@ -2358,7 +2376,7 @@ function FeelIcon(props) {
2358
2376
  onClick: handleClick,
2359
2377
  disabled: feel === 'required' || disabled,
2360
2378
  title: feel === 'required' ? feelRequiredLabel : feelOptionalLabel,
2361
- children: jsxRuntime.jsx(FeelIcon$1, {})
2379
+ children: jsxRuntime.jsx(Feel, {})
2362
2380
  });
2363
2381
  }
2364
2382
 
@@ -2685,6 +2703,7 @@ const noop$2 = () => {};
2685
2703
  * @param {Array} props.variables
2686
2704
  * @param {string} [props.placeholder]
2687
2705
  * @param {string | import('preact').Component} props.tooltip
2706
+ * @param {Function} props.translate
2688
2707
  */
2689
2708
  function FeelTextfield(props) {
2690
2709
  const {
@@ -2704,7 +2723,8 @@ function FeelTextfield(props) {
2704
2723
  singleLine,
2705
2724
  tooltipContainer,
2706
2725
  OptionalComponent = OptionalFeelInput,
2707
- tooltip
2726
+ tooltip,
2727
+ translate
2708
2728
  } = props;
2709
2729
  const [localValue, setLocalValue] = hooks.useState(getInitialFeelLocalValue(feel, value));
2710
2730
  const editorRef = useShowEntryEvent(id);
@@ -2793,7 +2813,7 @@ function FeelTextfield(props) {
2793
2813
  const handleLint = useStaticCallback((lint = []) => {
2794
2814
  const syntaxError = lint.some(report => report.type === 'Syntax Error');
2795
2815
  if (syntaxError) {
2796
- onError('Unparsable FEEL expression.');
2816
+ onError(translate('Unparsable FEEL expression.'));
2797
2817
  } else {
2798
2818
  onError(undefined);
2799
2819
  }
@@ -2864,9 +2884,14 @@ function FeelTextfield(props) {
2864
2884
  });
2865
2885
  return;
2866
2886
  }
2867
- const input = event.target;
2868
- const isFieldEmpty = !input.value;
2869
- const isAllSelected = input.selectionStart === 0 && input.selectionEnd === input.value.length;
2887
+ const target = event.target;
2888
+
2889
+ // Skip for non-input/textArea elements (e.g. CodeMirror contenteditable)
2890
+ if (!(target instanceof HTMLInputElement) && !(target instanceof HTMLTextAreaElement)) {
2891
+ return;
2892
+ }
2893
+ const isFieldEmpty = !target.value;
2894
+ const isAllSelected = target.selectionStart === 0 && target.selectionEnd === target.value.length;
2870
2895
  if (isFieldEmpty || isAllSelected) {
2871
2896
  const textData = event.clipboardData.getData('text');
2872
2897
  const trimmedValue = textData.trim();
@@ -2903,7 +2928,8 @@ function FeelTextfield(props) {
2903
2928
  label: label,
2904
2929
  feel: feel,
2905
2930
  onClick: handleFeelToggle,
2906
- active: feelActive
2931
+ active: feelActive,
2932
+ translate: translate
2907
2933
  })]
2908
2934
  }), jsxRuntime.jsxs("div", {
2909
2935
  class: "bio-properties-panel-feel-container",
@@ -2934,7 +2960,8 @@ function FeelTextfield(props) {
2934
2960
  variables: variables,
2935
2961
  feelLanguageContext: feelLanguageContext,
2936
2962
  ref: editorRef,
2937
- tooltipContainer: tooltipContainer
2963
+ tooltipContainer: tooltipContainer,
2964
+ translate: translate
2938
2965
  }) : jsxRuntime.jsx(OptionalComponent, {
2939
2966
  ...props,
2940
2967
  popupOpen: isPopupOpen,
@@ -3203,7 +3230,8 @@ function FeelEntry(props) {
3203
3230
  onFocus,
3204
3231
  onBlur,
3205
3232
  placeholder,
3206
- tooltip
3233
+ tooltip,
3234
+ translate = translateFallback
3207
3235
  } = props;
3208
3236
  const [validationError, setValidationError] = hooks.useState(null);
3209
3237
  const [localError, setLocalError] = hooks.useState(null);
@@ -3252,6 +3280,7 @@ function FeelEntry(props) {
3252
3280
  hostLanguage: hostLanguage,
3253
3281
  singleLine: singleLine,
3254
3282
  show: show,
3283
+ translate: translate,
3255
3284
  value: value,
3256
3285
  variables: variables,
3257
3286
  tooltipContainer: tooltipContainer,
@@ -3665,6 +3694,7 @@ function prefixIdLabel(id) {
3665
3694
  * @param {Item[]} [props.items]
3666
3695
  * @param {boolean} [props.open]
3667
3696
  * @param {string|boolean} [props.autoFocusEntry] either a custom selector string or true to focus the first input
3697
+ * @param {Function} [props.translate]
3668
3698
  * @returns
3669
3699
  */
3670
3700
  function List(props) {
@@ -3724,19 +3754,21 @@ function List(props) {
3724
3754
  title: translate('Create new list item'),
3725
3755
  onClick: addItem,
3726
3756
  class: "bio-properties-panel-add-entry",
3727
- children: [jsxRuntime.jsx(CreateIcon, {}), !hasItems ? jsxRuntime.jsx("span", {
3757
+ children: [jsxRuntime.jsx(Create, {}), !hasItems ? jsxRuntime.jsx("span", {
3728
3758
  class: "bio-properties-panel-add-entry-label",
3729
3759
  children: translate('Create')
3730
3760
  }) : null]
3731
3761
  }), hasItems && jsxRuntime.jsx("div", {
3732
- title: `List contains ${items.length} item${items.length != 1 ? 's' : ''}`,
3762
+ title: translate(`List contains {numOfItems} item${items.length != 1 ? 's' : ''}`, {
3763
+ numOfItems: items.length
3764
+ }),
3733
3765
  class: "bio-properties-panel-list-badge",
3734
3766
  children: items.length
3735
3767
  }), hasItems && jsxRuntime.jsx("button", {
3736
3768
  type: "button",
3737
3769
  title: translate('Toggle list item'),
3738
3770
  class: "bio-properties-panel-arrow",
3739
- children: jsxRuntime.jsx(ArrowIcon, {
3771
+ children: jsxRuntime.jsx(Arrow, {
3740
3772
  class: open ? 'bio-properties-panel-arrow-down' : 'bio-properties-panel-arrow-right'
3741
3773
  })
3742
3774
  })]
@@ -3807,7 +3839,7 @@ function ItemsList(props) {
3807
3839
  title: translate('Delete item'),
3808
3840
  class: "bio-properties-panel-remove-entry bio-properties-panel-remove-list-entry",
3809
3841
  onClick: () => onRemove && onRemove(item),
3810
- children: jsxRuntime.jsx(DeleteIcon, {})
3842
+ children: jsxRuntime.jsx(Delete, {})
3811
3843
  })]
3812
3844
  }, key);
3813
3845
  })
@@ -4005,6 +4037,7 @@ function prefixId$4(id) {
4005
4037
  * @param {Function} [props.onBlur]
4006
4038
  * @param {Function} [props.onFocus]
4007
4039
  * @param {Function} props.setValue
4040
+ * @param {Function} [props.translate]
4008
4041
  */
4009
4042
  function Simple(props) {
4010
4043
  const {
@@ -4015,7 +4048,8 @@ function Simple(props) {
4015
4048
  id,
4016
4049
  onBlur,
4017
4050
  onFocus,
4018
- setValue
4051
+ setValue,
4052
+ translate = translateFallback
4019
4053
  } = props;
4020
4054
  const value = getValue(element);
4021
4055
  const [localValue, setLocalValue] = hooks.useState(value);
@@ -4043,7 +4077,7 @@ function Simple(props) {
4043
4077
  disabled: disabled,
4044
4078
  class: "bio-properties-panel-input",
4045
4079
  onInput: handleInput,
4046
- "aria-label": localValue || '<empty>',
4080
+ "aria-label": localValue || translate('<empty>'),
4047
4081
  onFocus: onFocus,
4048
4082
  onBlur: onBlur,
4049
4083
  value: localValue
@@ -4758,7 +4792,7 @@ function Title(props) {
4758
4792
  class: "bio-properties-panel-popup__drag-preview"
4759
4793
  }), jsxRuntime.jsx("div", {
4760
4794
  class: "bio-properties-panel-popup__drag-handle",
4761
- children: jsxRuntime.jsx(DragIcon, {})
4795
+ children: jsxRuntime.jsx(Drag, {})
4762
4796
  })]
4763
4797
  }), jsxRuntime.jsx("div", {
4764
4798
  class: "bio-properties-panel-popup__title",
@@ -4768,7 +4802,7 @@ function Title(props) {
4768
4802
  title: closeButtonTooltip,
4769
4803
  class: "bio-properties-panel-popup__close",
4770
4804
  onClick: onClose,
4771
- children: jsxRuntime.jsx(CloseIcon, {})
4805
+ children: jsxRuntime.jsx(Close, {})
4772
4806
  })]
4773
4807
  });
4774
4808
  }
@@ -4902,7 +4936,7 @@ function FeelPopup$1(props) {
4902
4936
  href: link.href,
4903
4937
  target: "_blank",
4904
4938
  class: "bio-properties-panel-feel-popup__title-link",
4905
- children: [link.title, jsxRuntime.jsx(LaunchIcon, {})]
4939
+ children: [link.title, jsxRuntime.jsx(Launch, {})]
4906
4940
  }, index);
4907
4941
  })
4908
4942
  })
@@ -5137,24 +5171,24 @@ var index = {
5137
5171
  feelPopupRenderer: ['type', FeelPopupRenderer]
5138
5172
  };
5139
5173
 
5140
- exports.ArrowIcon = ArrowIcon;
5174
+ exports.ArrowIcon = Arrow;
5141
5175
  exports.CheckboxEntry = CheckboxEntry;
5142
5176
  exports.CheckboxGroup = CheckboxGroup;
5143
- exports.CloseIcon = CloseIcon;
5177
+ exports.CloseIcon = Close;
5144
5178
  exports.CollapsibleEntry = CollapsibleEntry;
5145
- exports.CreateIcon = CreateIcon;
5179
+ exports.CreateIcon = Create;
5146
5180
  exports.DebounceInputModule = index$1;
5147
- exports.DeleteIcon = DeleteIcon;
5181
+ exports.DeleteIcon = Delete;
5148
5182
  exports.DescriptionContext = DescriptionContext;
5149
5183
  exports.DescriptionEntry = Description;
5150
- exports.DragIcon = DragIcon;
5184
+ exports.DragIcon = Drag;
5151
5185
  exports.DropdownButton = DropdownButton;
5152
5186
  exports.ErrorsContext = ErrorsContext;
5153
5187
  exports.EventContext = EventContext;
5154
- exports.ExternalLinkIcon = ExternalLinkIcon;
5188
+ exports.ExternalLinkIcon = ExternalLink;
5155
5189
  exports.FeelCheckboxEntry = FeelCheckboxEntry;
5156
5190
  exports.FeelEntry = FeelEntry;
5157
- exports.FeelIcon = FeelIcon$1;
5191
+ exports.FeelIcon = Feel;
5158
5192
  exports.FeelLanguageContext = FeelLanguageContext;
5159
5193
  exports.FeelNumberEntry = FeelNumberEntry;
5160
5194
  exports.FeelPopupModule = index;
@@ -5165,13 +5199,13 @@ exports.Group = Group;
5165
5199
  exports.Header = Header;
5166
5200
  exports.HeaderButton = HeaderButton;
5167
5201
  exports.JsonEditorEntry = JsonEditorEntry;
5168
- exports.LaunchIcon = LaunchIcon;
5202
+ exports.LaunchIcon = Launch;
5169
5203
  exports.LayoutContext = LayoutContext;
5170
5204
  exports.ListEntry = List;
5171
5205
  exports.ListGroup = ListGroup;
5172
5206
  exports.ListItem = ListItem;
5173
5207
  exports.NumberFieldEntry = NumberFieldEntry;
5174
- exports.OpenPopupIcon = OpenPopupIcon;
5208
+ exports.OpenPopupIcon = OpenPopup;
5175
5209
  exports.Placeholder = Placeholder;
5176
5210
  exports.PropertiesPanel = PropertiesPanel;
5177
5211
  exports.PropertiesPanelContext = LayoutContext;