@bpmn-io/form-js-playground 1.0.0-alpha.0 → 1.0.0-alpha.10

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.
@@ -49,21 +49,16 @@
49
49
  };
50
50
  return null != l$3.vnode && l$3.vnode(f), f;
51
51
  }
52
- function p$2() {
53
- return {
54
- current: null
55
- };
56
- }
57
52
  function d$1(n) {
58
53
  return n.children;
59
54
  }
60
- function _$1(n, l) {
55
+ function _(n, l) {
61
56
  this.props = n, this.context = l;
62
57
  }
63
- function k$2(n, l) {
64
- if (null == l) return n.__ ? k$2(n.__, n.__.__k.indexOf(n) + 1) : null;
58
+ function k$1(n, l) {
59
+ if (null == l) return n.__ ? k$1(n.__, n.__.__k.indexOf(n) + 1) : null;
65
60
  for (var u; l < n.__k.length; l++) if (null != (u = n.__k[l]) && null != u.__e) return u.__e;
66
- return "function" == typeof n.type ? k$2(n) : null;
61
+ return "function" == typeof n.type ? k$1(n) : null;
67
62
  }
68
63
  function b$1(n) {
69
64
  var l, u;
@@ -76,14 +71,14 @@
76
71
  }
77
72
  }
78
73
  function m$1(n) {
79
- (!n.__d && (n.__d = !0) && t$2.push(n) && !g$2.__r++ || r$1 !== l$3.debounceRendering) && ((r$1 = l$3.debounceRendering) || o$3)(g$2);
74
+ (!n.__d && (n.__d = !0) && t$2.push(n) && !g$1.__r++ || r$1 !== l$3.debounceRendering) && ((r$1 = l$3.debounceRendering) || o$3)(g$1);
80
75
  }
81
- function g$2() {
82
- for (var n; g$2.__r = t$2.length;) n = t$2.sort(function (n, l) {
76
+ function g$1() {
77
+ for (var n; g$1.__r = t$2.length;) n = t$2.sort(function (n, l) {
83
78
  return n.__v.__b - l.__v.__b;
84
79
  }), t$2 = [], n.some(function (n) {
85
80
  var l, u, i, t, o, r;
86
- n.__d && (o = (t = (l = n).__v).__e, (r = l.__P) && (u = [], (i = a$2({}, t)).__v = t.__v + 1, j$2(r, t, i, l.__n, void 0 !== r.ownerSVGElement, null != t.__h ? [o] : null, u, null == o ? k$2(t) : o, t.__h), z$1(u, t), t.__e != o && b$1(t)));
81
+ n.__d && (o = (t = (l = n).__v).__e, (r = l.__P) && (u = [], (i = a$2({}, t)).__v = t.__v + 1, j$2(r, t, i, l.__n, void 0 !== r.ownerSVGElement, null != t.__h ? [o] : null, u, null == o ? k$1(t) : o, t.__h), z(u, t), t.__e != o && b$1(t)));
87
82
  });
88
83
  }
89
84
  function w$2(n, l, u, i, t, o, r, f, s, a) {
@@ -106,9 +101,9 @@
106
101
  }
107
102
  p = null;
108
103
  }
109
- j$2(n, _, p = p || e$3, t, o, r, f, s, a), b = _.__e, (v = _.ref) && p.ref != v && (g || (g = []), p.ref && g.push(p.ref, null, _), g.push(v, _.__c || b, _)), null != b ? (null == m && (m = b), "function" == typeof _.type && null != _.__k && _.__k === p.__k ? _.__d = s = x$2(_, s, n) : s = P$3(n, _, p, w, b, s), a || "option" !== u.type ? "function" == typeof u.type && (u.__d = s) : n.value = "") : s && p.__e == s && s.parentNode != n && (s = k$2(p));
104
+ j$2(n, _, p = p || e$3, t, o, r, f, s, a), b = _.__e, (v = _.ref) && p.ref != v && (g || (g = []), p.ref && g.push(p.ref, null, _), g.push(v, _.__c || b, _)), null != b ? (null == m && (m = b), "function" == typeof _.type && null != _.__k && _.__k === p.__k ? _.__d = s = x$2(_, s, n) : s = P$3(n, _, p, w, b, s), a || "option" !== u.type ? "function" == typeof u.type && (u.__d = s) : n.value = "") : s && p.__e == s && s.parentNode != n && (s = k$1(p));
110
105
  }
111
- for (u.__e = m, h = A; h--;) null != w[h] && ("function" == typeof u.type && null != w[h].__e && w[h].__e == u.__d && (u.__d = k$2(i, h + 1)), N$1(w[h], w[h]));
106
+ for (u.__e = m, h = A; h--;) null != w[h] && ("function" == typeof u.type && null != w[h].__e && w[h].__e == u.__d && (u.__d = k$1(i, h + 1)), N(w[h], w[h]));
112
107
  if (g) for (h = 0; h < g.length; h++) M$1(g[h], g[++h], g[++h]);
113
108
  }
114
109
  function x$2(n, l, u) {
@@ -144,7 +139,7 @@
144
139
  if ("string" == typeof i && (n.style.cssText = i = ""), i) for (l in i) u && l in u || $$1(n.style, l, "");
145
140
  if (u) for (l in u) i && u[l] === i[l] || $$1(n.style, l, u[l]);
146
141
  }
147
- } else if ("o" === l[0] && "n" === l[1]) o = l !== (l = l.replace(/Capture$/, "")), l = l.toLowerCase() in n ? l.toLowerCase().slice(2) : l.slice(2), n.l || (n.l = {}), n.l[l + o] = u, u ? i || n.addEventListener(l, o ? T$2 : I$1, o) : n.removeEventListener(l, o ? T$2 : I$1, o);else if ("dangerouslySetInnerHTML" !== l) {
142
+ } else if ("o" === l[0] && "n" === l[1]) o = l !== (l = l.replace(/Capture$/, "")), l = l.toLowerCase() in n ? l.toLowerCase().slice(2) : l.slice(2), n.l || (n.l = {}), n.l[l + o] = u, u ? i || n.addEventListener(l, o ? T$1 : I$1, o) : n.removeEventListener(l, o ? T$1 : I$1, o);else if ("dangerouslySetInnerHTML" !== l) {
148
143
  if (t) l = l.replace(/xlink[H:h]/, "h").replace(/sName$/, "s");else if ("href" !== l && "list" !== l && "form" !== l && "tabIndex" !== l && "download" !== l && l in n) try {
149
144
  n[l] = null == u ? "" : u;
150
145
  break n;
@@ -155,7 +150,7 @@
155
150
  function I$1(n) {
156
151
  this.l[n.type + !1](l$3.event ? l$3.event(n) : n);
157
152
  }
158
- function T$2(n) {
153
+ function T$1(n) {
159
154
  this.l[n.type + !0](l$3.event ? l$3.event(n) : n);
160
155
  }
161
156
  function j$2(n, u, i, t, o, r, f, e, c) {
@@ -175,7 +170,7 @@
175
170
  null != i.__h && (c = i.__h, e = u.__e = i.__e, u.__h = null, r = [e]), (s = l$3.__b) && s(u);
176
171
  try {
177
172
  n: if ("function" == typeof P) {
178
- if (m = u.props, g = (s = P.contextType) && t[s.__c], x = s ? g ? g.props.value : s.__ : t, i.__c ? b = (h = u.__c = i.__c).__ = h.__E : ("prototype" in P && P.prototype.render ? u.__c = h = new P(m, x) : (u.__c = h = new _$1(m, x), h.constructor = P, h.render = O$1), g && g.sub(h), h.props = m, h.state || (h.state = {}), h.context = x, h.__n = t, v = h.__d = !0, h.__h = []), null == h.__s && (h.__s = h.state), null != P.getDerivedStateFromProps && (h.__s == h.state && (h.__s = a$2({}, h.__s)), a$2(h.__s, P.getDerivedStateFromProps(m, h.__s))), y = h.props, p = h.state, v) null == P.getDerivedStateFromProps && null != h.componentWillMount && h.componentWillMount(), null != h.componentDidMount && h.__h.push(h.componentDidMount);else {
173
+ if (m = u.props, g = (s = P.contextType) && t[s.__c], x = s ? g ? g.props.value : s.__ : t, i.__c ? b = (h = u.__c = i.__c).__ = h.__E : ("prototype" in P && P.prototype.render ? u.__c = h = new P(m, x) : (u.__c = h = new _(m, x), h.constructor = P, h.render = O$1), g && g.sub(h), h.props = m, h.state || (h.state = {}), h.context = x, h.__n = t, v = h.__d = !0, h.__h = []), null == h.__s && (h.__s = h.state), null != P.getDerivedStateFromProps && (h.__s == h.state && (h.__s = a$2({}, h.__s)), a$2(h.__s, P.getDerivedStateFromProps(m, h.__s))), y = h.props, p = h.state, v) null == P.getDerivedStateFromProps && null != h.componentWillMount && h.componentWillMount(), null != h.componentDidMount && h.__h.push(h.componentDidMount);else {
179
174
  if (null == P.getDerivedStateFromProps && m !== y && null != h.componentWillReceiveProps && h.componentWillReceiveProps(m, x), !h.__e && null != h.shouldComponentUpdate && !1 === h.shouldComponentUpdate(m, h.__s, x) || u.__v === i.__v) {
180
175
  h.props = m, h.state = h.__s, u.__v !== i.__v && (h.__d = !1), h.__v = u, u.__e = i.__e, u.__k = i.__k, u.__k.forEach(function (n) {
181
176
  n && (n.__ = u);
@@ -193,7 +188,7 @@
193
188
  u.__v = null, (c || null != r) && (u.__e = e, u.__h = !!c, r[r.indexOf(e)] = null), l$3.__e(n, u, i);
194
189
  }
195
190
  }
196
- function z$1(n, u) {
191
+ function z(n, u) {
197
192
  l$3.__c && l$3.__c(u, n), n.some(function (u) {
198
193
  try {
199
194
  n = u.__h, u.__h = [], n.some(function (n) {
@@ -225,7 +220,7 @@
225
220
  if (null != r) for (y = {}, _ = 0; _ < l.attributes.length; _++) y[l.attributes[_].name] = l.attributes[_].value;
226
221
  (v || a) && (v && (a && v.__html == a.__html || v.__html === l.innerHTML) || (l.innerHTML = v && v.__html || ""));
227
222
  }
228
- if (C$2(l, p, y, o, c), v) u.__k = [];else if (_ = u.props.children, w$2(l, Array.isArray(_) ? _ : [_], u, i, t, o && "foreignObject" !== d, r, f, r ? r[0] : i.__k && k$2(i, 0), c), null != r) for (_ = r.length; _--;) null != r[_] && h$1(r[_]);
223
+ if (C$2(l, p, y, o, c), v) u.__k = [];else if (_ = u.props.children, w$2(l, Array.isArray(_) ? _ : [_], u, i, t, o && "foreignObject" !== d, r, f, r ? r[0] : i.__k && k$1(i, 0), c), null != r) for (_ = r.length; _--;) null != r[_] && h$1(r[_]);
229
224
  c || ("value" in p && void 0 !== (_ = p.value) && (_ !== l.value || "progress" === d && !_) && H$1(l, "value", _, y.value, !1), "checked" in p && void 0 !== (_ = p.checked) && _ !== l.checked && H$1(l, "checked", _, y.checked, !1));
230
225
  }
231
226
  return l;
@@ -237,7 +232,7 @@
237
232
  l$3.__e(n, i);
238
233
  }
239
234
  }
240
- function N$1(n, u, i) {
235
+ function N(n, u, i) {
241
236
  var t, o;
242
237
  if (l$3.unmount && l$3.unmount(n), (t = n.ref) && (t.current && t.current !== n.__e || M$1(t, null, u)), null != (t = n.__c)) {
243
238
  if (t.componentWillUnmount) try {
@@ -247,7 +242,7 @@
247
242
  }
248
243
  t.base = t.__P = null;
249
244
  }
250
- if (t = n.__k) for (o = 0; o < t.length; o++) t[o] && N$1(t[o], u, "function" != typeof n.type);
245
+ if (t = n.__k) for (o = 0; o < t.length; o++) t[o] && N(t[o], u, "function" != typeof n.type);
251
246
  i || null == n.__e || h$1(n.__e), n.__e = n.__d = void 0;
252
247
  }
253
248
  function O$1(n, l, u) {
@@ -255,18 +250,7 @@
255
250
  }
256
251
  function S$1(u, i, t) {
257
252
  var o, r, f;
258
- l$3.__ && l$3.__(u, i), r = (o = "function" == typeof t) ? null : t && t.__k || i.__k, f = [], j$2(i, u = (!o && t || i).__k = v$1(d$1, null, [u]), r || e$3, e$3, void 0 !== i.ownerSVGElement, !o && t ? [t] : r ? null : i.firstChild ? n$2.call(i.childNodes) : null, f, !o && t ? t : r ? r.__e : i.firstChild, o), z$1(f, u);
259
- }
260
- function q$1(n, l) {
261
- S$1(n, l, q$1);
262
- }
263
- function B$1(l, u, i) {
264
- var t,
265
- o,
266
- r,
267
- f = a$2({}, l.props);
268
- for (r in u) "key" == r ? t = u[r] : "ref" == r ? o = u[r] : f[r] = u[r];
269
- return arguments.length > 2 && (f.children = arguments.length > 3 ? n$2.call(arguments, 2) : i), y$1(l.type, f, t || l.key, o || l.ref, null);
253
+ l$3.__ && l$3.__(u, i), r = (o = "function" == typeof t) ? null : t && t.__k || i.__k, f = [], j$2(i, u = (!o && t || i).__k = v$1(d$1, null, [u]), r || e$3, e$3, void 0 !== i.ownerSVGElement, !o && t ? [t] : r ? null : i.firstChild ? n$2.call(i.childNodes) : null, f, !o && t ? t : r ? r.__e : i.firstChild, o), z(f, u);
270
254
  }
271
255
  function D$1(n, l) {
272
256
  var u = {
@@ -301,12 +285,12 @@
301
285
  }
302
286
  throw n;
303
287
  }
304
- }, u$1 = 0, _$1.prototype.setState = function (n, l) {
288
+ }, u$1 = 0, _.prototype.setState = function (n, l) {
305
289
  var u;
306
290
  u = null != this.__s && this.__s !== this.state ? this.__s : this.__s = a$2({}, this.state), "function" == typeof n && (n = n(a$2({}, u), this.props)), n && a$2(u, n), null != n && this.__v && (l && this.__h.push(l), m$1(this));
307
- }, _$1.prototype.forceUpdate = function (n) {
291
+ }, _.prototype.forceUpdate = function (n) {
308
292
  this.__v && (this.__e = !0, n && this.__h.push(n), m$1(this));
309
- }, _$1.prototype.render = d$1, t$2 = [], o$3 = "function" == typeof Promise ? Promise.prototype.then.bind(Promise.resolve()) : setTimeout, g$2.__r = 0, f$1 = 0;
293
+ }, _.prototype.render = d$1, t$2 = [], o$3 = "function" == typeof Promise ? Promise.prototype.then.bind(Promise.resolve()) : setTimeout, g$1.__r = 0, f$1 = 0;
310
294
 
311
295
  /**
312
296
  * Flatten array, one level deep.
@@ -633,11 +617,11 @@
633
617
  }
634
618
  function y(r, o) {
635
619
  var i = m(t$1++, 3);
636
- !l$3.__s && k$1(i.__H, o) && (i.__ = r, i.__H = o, u.__H.__h.push(i));
620
+ !l$3.__s && k(i.__H, o) && (i.__ = r, i.__H = o, u.__H.__h.push(i));
637
621
  }
638
622
  function h(r, o) {
639
623
  var i = m(t$1++, 4);
640
- !l$3.__s && k$1(i.__H, o) && (i.__ = r, i.__H = o, u.__h.push(i));
624
+ !l$3.__s && k(i.__H, o) && (i.__ = r, i.__H = o, u.__h.push(i));
641
625
  }
642
626
  function s$1(n) {
643
627
  return o$2 = 5, d(function () {
@@ -646,32 +630,24 @@
646
630
  };
647
631
  }, []);
648
632
  }
649
- function _(n, t, u) {
650
- o$2 = 6, h(function () {
651
- "function" == typeof n ? n(t()) : n && (n.current = t());
652
- }, null == u ? u : u.concat(n));
653
- }
654
633
  function d(n, u) {
655
634
  var r = m(t$1++, 7);
656
- return k$1(r.__H, u) && (r.__ = n(), r.__H = u, r.__h = n), r.__;
635
+ return k(r.__H, u) && (r.__ = n(), r.__H = u, r.__h = n), r.__;
657
636
  }
658
637
  function A$1(n, t) {
659
638
  return o$2 = 8, d(function () {
660
639
  return n;
661
640
  }, t);
662
641
  }
663
- function F$1(n) {
642
+ function F(n) {
664
643
  var r = u.context[n.__c],
665
644
  o = m(t$1++, 9);
666
645
  return o.c = n, r ? (null == o.__ && (o.__ = !0, r.sub(u)), r.props.value) : n.__;
667
646
  }
668
- function T$1(t, u) {
669
- l$3.useDebugValue && l$3.useDebugValue(u ? u(t) : t);
670
- }
671
647
  function x$1() {
672
648
  i$2.forEach(function (t) {
673
649
  if (t.__P) try {
674
- t.__H.__h.forEach(g$1), t.__H.__h.forEach(j$1), t.__H.__h = [];
650
+ t.__H.__h.forEach(g), t.__H.__h.forEach(j$1), t.__H.__h = [];
675
651
  } catch (u) {
676
652
  t.__H.__h = [], l$3.__e(u, t.__v);
677
653
  }
@@ -682,7 +658,7 @@
682
658
  }, l$3.__r = function (n) {
683
659
  f && f(n), t$1 = 0;
684
660
  var r = (u = n.__c).__H;
685
- r && (r.__h.forEach(g$1), r.__h.forEach(j$1), r.__h = []);
661
+ r && (r.__h.forEach(g), r.__h.forEach(j$1), r.__h = []);
686
662
  }, l$3.diffed = function (t) {
687
663
  e$2 && e$2(t);
688
664
  var o = t.__c;
@@ -697,7 +673,7 @@
697
673
  }, l$3.__c = function (t, u) {
698
674
  u.some(function (t) {
699
675
  try {
700
- t.__h.forEach(g$1), t.__h = t.__h.filter(function (n) {
676
+ t.__h.forEach(g), t.__h = t.__h.filter(function (n) {
701
677
  return !n.__ || j$1(n);
702
678
  });
703
679
  } catch (r) {
@@ -710,13 +686,13 @@
710
686
  v && v(t);
711
687
  var u = t.__c;
712
688
  if (u && u.__H) try {
713
- u.__H.__.forEach(g$1);
689
+ u.__H.__.forEach(g);
714
690
  } catch (t) {
715
691
  l$3.__e(t, u.__v);
716
692
  }
717
693
  };
718
694
  var b = "function" == typeof requestAnimationFrame;
719
- function g$1(n) {
695
+ function g(n) {
720
696
  var t = u;
721
697
  "function" == typeof n.__c && n.__c(), u = t;
722
698
  }
@@ -724,7 +700,7 @@
724
700
  var t = u;
725
701
  n.__c = n.__(), u = t;
726
702
  }
727
- function k$1(n, t) {
703
+ function k(n, t) {
728
704
  return !n || n.length !== t.length || t.some(function (t, u) {
729
705
  return t !== n[u];
730
706
  });
@@ -37977,7 +37953,7 @@
37977
37953
  }
37978
37954
  }
37979
37955
  /// Elements are used to compose syntax nodes during parsing.
37980
- let Element$1 = class Element {
37956
+ let Element$2 = class Element {
37981
37957
  /// @internal
37982
37958
  constructor(
37983
37959
  /// The node's
@@ -38028,7 +38004,7 @@
38028
38004
  }
38029
38005
  }
38030
38006
  function elt(type, from, to, children) {
38031
- return new Element$1(type, from, to, children);
38007
+ return new Element$2(type, from, to, children);
38032
38008
  }
38033
38009
  const EmphasisUnderscore = {
38034
38010
  resolve: "Emphasis",
@@ -38322,7 +38298,7 @@
38322
38298
  // Move the covered region into content, optionally adding marker nodes
38323
38299
  if (open.type.mark) content.push(this.elt(open.type.mark, start, open.to));
38324
38300
  for (let k = j + 1; k < i; k++) {
38325
- if (this.parts[k] instanceof Element$1) content.push(this.parts[k]);
38301
+ if (this.parts[k] instanceof Element$2) content.push(this.parts[k]);
38326
38302
  this.parts[k] = null;
38327
38303
  }
38328
38304
  if (close.type.mark) content.push(this.elt(close.type.mark, close.from, end));
@@ -38337,7 +38313,7 @@
38337
38313
  let result = [];
38338
38314
  for (let i = from; i < this.parts.length; i++) {
38339
38315
  let part = this.parts[i];
38340
- if (part instanceof Element$1) result.push(part);
38316
+ if (part instanceof Element$2) result.push(part);
38341
38317
  }
38342
38318
  return result;
38343
38319
  }
@@ -38381,7 +38357,7 @@
38381
38357
  while (eI < elts.length && elts[eI].to < mark.to) eI++;
38382
38358
  if (eI < elts.length && elts[eI].from < mark.from) {
38383
38359
  let e = elts[eI];
38384
- if (e instanceof Element$1) elts[eI] = new Element$1(e.type, e.from, e.to, injectMarks(e.children, [mark]));
38360
+ if (e instanceof Element$2) elts[eI] = new Element$2(e.type, e.from, e.to, injectMarks(e.children, [mark]));
38385
38361
  } else {
38386
38362
  elts.splice(eI++, 0, mark);
38387
38363
  }
@@ -46280,18 +46256,7 @@
46280
46256
  function E(n) {
46281
46257
  this.props = n;
46282
46258
  }
46283
- function g(n, t) {
46284
- function e(n) {
46285
- var e = this.props.ref,
46286
- r = e == n.ref;
46287
- return !r && e && (e.call ? e(null) : e.current = null), t ? !t(this.props, n) || !r : C(this.props, n);
46288
- }
46289
- function r(t) {
46290
- return this.shouldComponentUpdate = e, v$1(n, t);
46291
- }
46292
- return r.displayName = "Memo(" + (n.displayName || n.name) + ")", r.prototype.isReactComponent = !0, r.__f = !0, r;
46293
- }
46294
- (E.prototype = new _$1()).isPureReactComponent = !0, E.prototype.shouldComponentUpdate = function (n, t) {
46259
+ (E.prototype = new _()).isPureReactComponent = !0, E.prototype.shouldComponentUpdate = function (n, t) {
46295
46260
  return C(this.props, n) || C(this.state, t);
46296
46261
  };
46297
46262
  var w = l$3.__b;
@@ -46306,23 +46271,7 @@
46306
46271
  }
46307
46272
  return t.$$typeof = R, t.render = t, t.prototype.isReactComponent = t.__f = !0, t.displayName = "ForwardRef(" + (n.displayName || n.name) + ")", t;
46308
46273
  }
46309
- var N = function (n, t) {
46310
- return null == n ? null : A$2(A$2(n).map(t));
46311
- },
46312
- k = {
46313
- map: N,
46314
- forEach: N,
46315
- count: function (n) {
46316
- return n ? A$2(n).length : 0;
46317
- },
46318
- only: function (n) {
46319
- var t = A$2(n);
46320
- if (1 !== t.length) throw "Children.only";
46321
- return t[0];
46322
- },
46323
- toArray: A$2
46324
- },
46325
- A = l$3.__e;
46274
+ var A = l$3.__e;
46326
46275
  l$3.__e = function (n, t, e) {
46327
46276
  if (n.then) for (var r, u = t; u = u.__;) if ((r = u.__c) && r.__c) return null == t.__e && (t.__e = e.__e, t.__k = e.__k), r.__c(n, t);
46328
46277
  A(n, t, e);
@@ -46335,26 +46284,13 @@
46335
46284
  var t = n.__.__c;
46336
46285
  return t && t.__e && t.__e(n);
46337
46286
  }
46338
- function F(n) {
46339
- var t, e, r;
46340
- function u(u) {
46341
- if (t || (t = n()).then(function (n) {
46342
- e = n.default || n;
46343
- }, function (n) {
46344
- r = n;
46345
- }), r) throw r;
46346
- if (!e) throw t;
46347
- return v$1(e, u);
46348
- }
46349
- return u.displayName = "Lazy", u.__f = !0, u;
46350
- }
46351
46287
  function M() {
46352
46288
  this.u = null, this.o = null;
46353
46289
  }
46354
46290
  l$3.unmount = function (n) {
46355
46291
  var t = n.__c;
46356
46292
  t && t.__R && t.__R(), t && !0 === n.__h && (n.type = null), O && O(n);
46357
- }, (L.prototype = new _$1()).__c = function (n, t) {
46293
+ }, (L.prototype = new _()).__c = function (n, t) {
46358
46294
  var e = t.__c,
46359
46295
  r = this;
46360
46296
  null == r.t && (r.t = []), r.t.push(e);
@@ -46444,7 +46380,7 @@
46444
46380
  i: t
46445
46381
  });
46446
46382
  }
46447
- (M.prototype = new _$1()).__e = function (n) {
46383
+ (M.prototype = new _()).__e = function (n) {
46448
46384
  var t = this,
46449
46385
  e = U(t.__v),
46450
46386
  r = t.o.get(n);
@@ -46471,14 +46407,8 @@
46471
46407
  V = function (n) {
46472
46408
  return ("undefined" != typeof Symbol && "symbol" == typeof Symbol() ? /fil|che|rad/i : /fil|che|ra/i).test(n);
46473
46409
  };
46474
- function z(n, t, e) {
46475
- return null == t.__k && (t.textContent = ""), S$1(n, t), "function" == typeof e && e(), n ? n.__c : null;
46476
- }
46477
- function B(n, t, e) {
46478
- return q$1(n, t), "function" == typeof e && e(), n ? n.__c : null;
46479
- }
46480
- _$1.prototype.isReactComponent = {}, ["componentWillMount", "componentWillReceiveProps", "componentWillUpdate"].forEach(function (n) {
46481
- Object.defineProperty(_$1.prototype, n, {
46410
+ _.prototype.isReactComponent = {}, ["componentWillMount", "componentWillReceiveProps", "componentWillUpdate"].forEach(function (n) {
46411
+ Object.defineProperty(_.prototype, n, {
46482
46412
  configurable: !0,
46483
46413
  get: function () {
46484
46414
  return this["UNSAFE_" + n];
@@ -46503,8 +46433,7 @@
46503
46433
  l$3.event = function (n) {
46504
46434
  return H && (n = H(n)), n.persist = Z, n.isPropagationStopped = Y, n.isDefaultPrevented = $, n.nativeEvent = n;
46505
46435
  };
46506
- var q,
46507
- G = {
46436
+ var G = {
46508
46437
  configurable: !0,
46509
46438
  get: function () {
46510
46439
  return this.class;
@@ -46530,74 +46459,7 @@
46530
46459
  };
46531
46460
  var K = l$3.__r;
46532
46461
  l$3.__r = function (n) {
46533
- K && K(n), q = n.__c;
46534
- };
46535
- var Q = {
46536
- ReactCurrentDispatcher: {
46537
- current: {
46538
- readContext: function (n) {
46539
- return q.__n[n.__c].props.value;
46540
- }
46541
- }
46542
- }
46543
- };
46544
- function nn(n) {
46545
- return v$1.bind(null, n);
46546
- }
46547
- function tn(n) {
46548
- return !!n && n.$$typeof === j;
46549
- }
46550
- function en(n) {
46551
- return tn(n) ? B$1.apply(null, arguments) : n;
46552
- }
46553
- function rn(n) {
46554
- return !!n.__k && (S$1(null, n), !0);
46555
- }
46556
- function un(n) {
46557
- return n && (n.base || 1 === n.nodeType && n) || null;
46558
- }
46559
- var on = function (n, t) {
46560
- return n(t);
46561
- },
46562
- ln = function (n, t) {
46563
- return n(t);
46564
- };
46565
- var React = {
46566
- useState: l$2,
46567
- useReducer: p$1,
46568
- useEffect: y,
46569
- useLayoutEffect: h,
46570
- useRef: s$1,
46571
- useImperativeHandle: _,
46572
- useMemo: d,
46573
- useCallback: A$1,
46574
- useContext: F$1,
46575
- useDebugValue: T$1,
46576
- version: "17.0.2",
46577
- Children: k,
46578
- render: z,
46579
- hydrate: B,
46580
- unmountComponentAtNode: rn,
46581
- createPortal: W,
46582
- createElement: v$1,
46583
- createContext: D$1,
46584
- createFactory: nn,
46585
- cloneElement: en,
46586
- createRef: p$2,
46587
- Fragment: d$1,
46588
- isValidElement: tn,
46589
- findDOMNode: un,
46590
- Component: _$1,
46591
- PureComponent: E,
46592
- memo: g,
46593
- forwardRef: x,
46594
- flushSync: ln,
46595
- unstable_batchedUpdates: on,
46596
- StrictMode: d$1,
46597
- Suspense: L,
46598
- SuspenseList: M,
46599
- lazy: F,
46600
- __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED: Q
46462
+ K && K(n), n.__c;
46601
46463
  };
46602
46464
 
46603
46465
  var HOOKS = ["onChange", "onClose", "onDayCreate", "onDestroy", "onKeyDown", "onMonthChange", "onOpen", "onParseConfig", "onReady", "onValueUpdate", "onYearChange", "onPreCalendarPosition"];
@@ -48855,7 +48717,7 @@
48855
48717
  b = w[x];
48856
48718
  return b ? b.splice ? b.splice(0, 0, "markup") : "string" == typeof b ? w[x] += " markup" : "object" == typeof b && (b.markup = !0) : w[x] = "markup", C("div", w, s || null);
48857
48719
  }, i;
48858
- })(_$1);
48720
+ })(_);
48859
48721
 
48860
48722
  const CLASS_PATTERN = /^class[ {]/;
48861
48723
 
@@ -50226,7 +50088,13 @@
50226
50088
  }
50227
50089
  const EMAIL_PATTERN = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;
50228
50090
  const PHONE_PATTERN = /(\+|00)(297|93|244|1264|358|355|376|971|54|374|1684|1268|61|43|994|257|32|229|226|880|359|973|1242|387|590|375|501|1441|591|55|1246|673|975|267|236|1|61|41|56|86|225|237|243|242|682|57|269|238|506|53|5999|61|1345|357|420|49|253|1767|45|1809|1829|1849|213|593|20|291|212|34|372|251|358|679|500|33|298|691|241|44|995|44|233|350|224|590|220|245|240|30|1473|299|502|594|1671|592|852|504|385|509|36|62|44|91|246|353|98|964|354|972|39|1876|44|962|81|76|77|254|996|855|686|1869|82|383|965|856|961|231|218|1758|423|94|266|370|352|371|853|590|212|377|373|261|960|52|692|389|223|356|95|382|976|1670|258|222|1664|596|230|265|60|262|264|687|227|672|234|505|683|31|47|977|674|64|968|92|507|64|51|63|680|675|48|1787|1939|850|351|595|970|689|974|262|40|7|250|966|249|221|65|500|4779|677|232|503|378|252|508|381|211|239|597|421|386|46|268|1721|248|963|1649|235|228|66|992|690|993|670|676|1868|216|90|688|886|255|256|380|598|1|998|3906698|379|1784|58|1284|1340|84|678|681|685|967|27|260|263)(9[976]\d|8[987530]\d|6[987]\d|5[90]\d|42\d|3[875]\d|2[98654321]\d|9[8543210]|8[6421]|6[6543210]|5[87654321]|4[987654310]|3[9643210]|2[70]|7|1)\d{4,20}$/;
50091
+ const VALIDATE_FEEL_PROPERTIES = ['min', 'max', 'minLength', 'maxLength'];
50229
50092
  class Validator {
50093
+ constructor(expressionLanguage, conditionChecker, form) {
50094
+ this._expressionLanguage = expressionLanguage;
50095
+ this._conditionChecker = conditionChecker;
50096
+ this._form = form;
50097
+ }
50230
50098
  validateField(field, value) {
50231
50099
  const {
50232
50100
  type,
@@ -50259,10 +50127,11 @@
50259
50127
  if (!validate) {
50260
50128
  return errors;
50261
50129
  }
50262
- if (validate.pattern && value && !new RegExp(validate.pattern).test(value)) {
50263
- errors = [...errors, `Field must match pattern ${validate.pattern}.`];
50130
+ const evaluatedValidation = evaluateFEELValues(validate, this._expressionLanguage, this._conditionChecker, this._form);
50131
+ if (evaluatedValidation.pattern && value && !new RegExp(evaluatedValidation.pattern).test(value)) {
50132
+ errors = [...errors, `Field must match pattern ${evaluatedValidation.pattern}.`];
50264
50133
  }
50265
- if (validate.required) {
50134
+ if (evaluatedValidation.required) {
50266
50135
  const isUncheckedCheckbox = type === 'checkbox' && value === false;
50267
50136
  const isUnsetValue = isNil$1(value) || value === '';
50268
50137
  const isEmptyMultiselect = Array.isArray(value) && value.length === 0;
@@ -50270,28 +50139,64 @@
50270
50139
  errors = [...errors, 'Field is required.'];
50271
50140
  }
50272
50141
  }
50273
- if ('min' in validate && (value || value === 0) && value < validate.min) {
50274
- errors = [...errors, `Field must have minimum value of ${validate.min}.`];
50142
+ if ('min' in evaluatedValidation && (value || value === 0) && value < evaluatedValidation.min) {
50143
+ errors = [...errors, `Field must have minimum value of ${evaluatedValidation.min}.`];
50275
50144
  }
50276
- if ('max' in validate && (value || value === 0) && value > validate.max) {
50277
- errors = [...errors, `Field must have maximum value of ${validate.max}.`];
50145
+ if ('max' in evaluatedValidation && (value || value === 0) && value > evaluatedValidation.max) {
50146
+ errors = [...errors, `Field must have maximum value of ${evaluatedValidation.max}.`];
50278
50147
  }
50279
- if ('minLength' in validate && value && value.trim().length < validate.minLength) {
50280
- errors = [...errors, `Field must have minimum length of ${validate.minLength}.`];
50148
+ if ('minLength' in evaluatedValidation && value && value.trim().length < evaluatedValidation.minLength) {
50149
+ errors = [...errors, `Field must have minimum length of ${evaluatedValidation.minLength}.`];
50281
50150
  }
50282
- if ('maxLength' in validate && value && value.trim().length > validate.maxLength) {
50283
- errors = [...errors, `Field must have maximum length of ${validate.maxLength}.`];
50151
+ if ('maxLength' in evaluatedValidation && value && value.trim().length > evaluatedValidation.maxLength) {
50152
+ errors = [...errors, `Field must have maximum length of ${evaluatedValidation.maxLength}.`];
50284
50153
  }
50285
- if ('validationType' in validate && value && validate.validationType === 'phone' && !PHONE_PATTERN.test(value)) {
50154
+ if ('validationType' in evaluatedValidation && value && evaluatedValidation.validationType === 'phone' && !PHONE_PATTERN.test(value)) {
50286
50155
  errors = [...errors, 'Field must be a valid international phone number. (e.g. +4930664040900)'];
50287
50156
  }
50288
- if ('validationType' in validate && value && validate.validationType === 'email' && !EMAIL_PATTERN.test(value)) {
50157
+ if ('validationType' in evaluatedValidation && value && evaluatedValidation.validationType === 'email' && !EMAIL_PATTERN.test(value)) {
50289
50158
  errors = [...errors, 'Field must be a valid email.'];
50290
50159
  }
50291
50160
  return errors;
50292
50161
  }
50293
50162
  }
50294
- Validator.$inject = [];
50163
+ Validator.$inject = ['expressionLanguage', 'conditionChecker', 'form'];
50164
+
50165
+ // helpers //////////
50166
+
50167
+ /**
50168
+ * Helper function to evaluate optional FEEL validation values.
50169
+ */
50170
+ function evaluateFEELValues(validate, expressionLanguage, conditionChecker, form) {
50171
+ const evaluatedValidate = {
50172
+ ...validate
50173
+ };
50174
+ VALIDATE_FEEL_PROPERTIES.forEach(property => {
50175
+ const path = property.split('.');
50176
+ const value = get$1(evaluatedValidate, path);
50177
+
50178
+ // mirroring FEEL evaluation of our hooks
50179
+ if (!expressionLanguage || !expressionLanguage.isExpression(value)) {
50180
+ return value;
50181
+ }
50182
+ const {
50183
+ initialData,
50184
+ data
50185
+ } = form._getState();
50186
+ const newData = conditionChecker ? conditionChecker.applyConditions(data, data) : data;
50187
+ const filteredData = {
50188
+ ...initialData,
50189
+ ...newData
50190
+ };
50191
+ const evaluatedValue = expressionLanguage.evaluate(value, filteredData);
50192
+
50193
+ // replace validate property with evaluated value
50194
+ if (evaluatedValue) {
50195
+ set$2(evaluatedValidate, path, evaluatedValue);
50196
+ }
50197
+ });
50198
+ return evaluatedValidate;
50199
+ }
50295
50200
  let FormFieldRegistry$1 = class FormFieldRegistry {
50296
50201
  constructor(eventBus) {
50297
50202
  this._eventBus = eventBus;
@@ -50521,23 +50426,27 @@
50521
50426
 
50522
50427
  const VALUES_SOURCES = {
50523
50428
  STATIC: 'static',
50524
- INPUT: 'input'
50429
+ INPUT: 'input',
50430
+ EXPRESSION: 'expression'
50525
50431
  };
50526
50432
  const VALUES_SOURCE_DEFAULT = VALUES_SOURCES.STATIC;
50527
50433
  const VALUES_SOURCES_LABELS = {
50528
50434
  [VALUES_SOURCES.STATIC]: 'Static',
50529
- [VALUES_SOURCES.INPUT]: 'Input data'
50435
+ [VALUES_SOURCES.INPUT]: 'Input data',
50436
+ [VALUES_SOURCES.EXPRESSION]: 'Expression'
50530
50437
  };
50531
50438
  const VALUES_SOURCES_PATHS = {
50532
50439
  [VALUES_SOURCES.STATIC]: ['values'],
50533
- [VALUES_SOURCES.INPUT]: ['valuesKey']
50440
+ [VALUES_SOURCES.INPUT]: ['valuesKey'],
50441
+ [VALUES_SOURCES.EXPRESSION]: ['valuesExpression']
50534
50442
  };
50535
50443
  const VALUES_SOURCES_DEFAULTS = {
50536
50444
  [VALUES_SOURCES.STATIC]: [{
50537
50445
  label: 'Value',
50538
50446
  value: 'value'
50539
50447
  }],
50540
- [VALUES_SOURCES.INPUT]: ''
50448
+ [VALUES_SOURCES.INPUT]: '',
50449
+ [VALUES_SOURCES.EXPRESSION]: '='
50541
50450
  };
50542
50451
 
50543
50452
  // helpers ///////////////////
@@ -50566,8 +50475,8 @@
50566
50475
  container.classList.add(`${prefix}-container`);
50567
50476
  return container;
50568
50477
  }
50569
- const EXPRESSION_PROPERTIES = ['alt', 'source', 'readonly', 'text'];
50570
- const TEMPLATE_PROPERTIES = ['text'];
50478
+ const EXPRESSION_PROPERTIES = ['alt', 'appearance.prefixAdorner', 'appearance.suffixAdorner', 'conditional.hide', 'description', 'label', 'source', 'readonly', 'text', 'validate.min', 'validate.max', 'validate.minLength', 'validate.maxLength', 'valuesExpression'];
50479
+ const TEMPLATE_PROPERTIES = ['alt', 'appearance.prefixAdorner', 'appearance.suffixAdorner', 'description', 'label', 'source', 'text'];
50571
50480
  function findErrors(errors, path) {
50572
50481
  return errors[pathStringify(path)];
50573
50482
  }
@@ -50615,8 +50524,7 @@
50615
50524
  const {
50616
50525
  key,
50617
50526
  valuesKey,
50618
- type,
50619
- conditional
50527
+ type
50620
50528
  } = component;
50621
50529
  if (['button'].includes(type)) {
50622
50530
  return variables;
@@ -50627,14 +50535,8 @@
50627
50535
  if (valuesKey) {
50628
50536
  variables = [...variables, valuesKey];
50629
50537
  }
50630
- if (conditional && conditional.hide) {
50631
- const conditionVariables = expressionLanguage.getVariableNames(conditional.hide, {
50632
- type: 'unaryTest'
50633
- });
50634
- variables = [...variables, ...conditionVariables];
50635
- }
50636
50538
  EXPRESSION_PROPERTIES.forEach(prop => {
50637
- const property = component[prop];
50539
+ const property = get$1(component, prop.split('.'));
50638
50540
  if (property && expressionLanguage.isExpression(property)) {
50639
50541
  const expressionVariables = expressionLanguage.getVariableNames(property, {
50640
50542
  type: 'expression'
@@ -50643,7 +50545,7 @@
50643
50545
  }
50644
50546
  });
50645
50547
  TEMPLATE_PROPERTIES.forEach(prop => {
50646
- const property = component[prop];
50548
+ const property = get$1(component, prop.split('.'));
50647
50549
  if (property && !expressionLanguage.isExpression(property) && templating.isTemplate(property)) {
50648
50550
  const templateVariables = templating.getVariableNames(property);
50649
50551
  variables = [...variables, ...templateVariables];
@@ -50901,16 +50803,160 @@
50901
50803
  formId: null
50902
50804
  });
50903
50805
  var FormContext$1 = FormContext;
50806
+ function useService$2(type, strict) {
50807
+ const {
50808
+ getService
50809
+ } = F(FormContext$1);
50810
+ return getService(type, strict);
50811
+ }
50812
+
50813
+ /**
50814
+ * Returns the conditionally filtered data of a form reactively.
50815
+ * Memoised to minimize re-renders
50816
+ *
50817
+ */
50818
+ function useFilteredFormData() {
50819
+ const {
50820
+ initialData,
50821
+ data
50822
+ } = useService$2('form')._getState();
50823
+ const conditionChecker = useService$2('conditionChecker', false);
50824
+ return d(() => {
50825
+ const newData = conditionChecker ? conditionChecker.applyConditions(data, data) : data;
50826
+ return {
50827
+ ...initialData,
50828
+ ...newData
50829
+ };
50830
+ }, [conditionChecker, data, initialData]);
50831
+ }
50832
+
50833
+ /**
50834
+ * Evaluate if condition is met reactively based on the conditionChecker and form data.
50835
+ *
50836
+ * @param {string | undefined} condition
50837
+ *
50838
+ * @returns {boolean} true if condition is met or no condition or condition checker exists
50839
+ */
50840
+ function useCondition(condition) {
50841
+ const conditionChecker = useService$2('conditionChecker', false);
50842
+ const filteredData = useFilteredFormData();
50843
+ return d(() => {
50844
+ return conditionChecker ? conditionChecker.check(condition, filteredData) : null;
50845
+ }, [conditionChecker, condition, filteredData]);
50846
+ }
50847
+
50848
+ /**
50849
+ * Evaluate a string reactively based on the expressionLanguage and form data.
50850
+ * If the string is not an expression, it is returned as is.
50851
+ * Memoised to minimize re-renders.
50852
+ *
50853
+ * @param {string} value
50854
+ *
50855
+ */
50856
+ function useExpressionEvaluation(value) {
50857
+ const formData = useFilteredFormData();
50858
+ const expressionLanguage = useService$2('expressionLanguage');
50859
+ return d(() => {
50860
+ if (expressionLanguage && expressionLanguage.isExpression(value)) {
50861
+ return expressionLanguage.evaluate(value, formData);
50862
+ }
50863
+ return value;
50864
+ }, [expressionLanguage, formData, value]);
50865
+ }
50866
+ function useKeyDownAction(targetKey, action, listenerElement = window) {
50867
+ function downHandler({
50868
+ key
50869
+ }) {
50870
+ if (key === targetKey) {
50871
+ action();
50872
+ }
50873
+ }
50874
+ y(() => {
50875
+ listenerElement.addEventListener('keydown', downHandler);
50876
+ return () => {
50877
+ listenerElement.removeEventListener('keydown', downHandler);
50878
+ };
50879
+ });
50880
+ }
50881
+
50882
+ /**
50883
+ * Retrieve readonly value of a form field, given it can be an
50884
+ * expression optionally or configured globally.
50885
+ *
50886
+ * @typedef { import('../../types').FormProperties } FormProperties
50887
+ *
50888
+ * @param {any} formField
50889
+ * @param {FormProperties} properties
50890
+ *
50891
+ * @returns {boolean}
50892
+ */
50893
+ function useReadonly(formField, properties = {}) {
50894
+ const expressionLanguage = useService$2('expressionLanguage');
50895
+ const conditionChecker = useService$2('conditionChecker', false);
50896
+ const filteredData = useFilteredFormData();
50897
+ const {
50898
+ readonly
50899
+ } = formField;
50900
+ if (properties.readOnly) {
50901
+ return true;
50902
+ }
50903
+ if (expressionLanguage && expressionLanguage.isExpression(readonly)) {
50904
+ return conditionChecker ? conditionChecker.check(readonly, filteredData) : false;
50905
+ }
50906
+ return readonly || false;
50907
+ }
50908
+
50909
+ /**
50910
+ * Template a string reactively based on form data. If the string is not a template, it is returned as is.
50911
+ * Memoised to minimize re-renders
50912
+ *
50913
+ * @param {string} value
50914
+ * @param {Object} options
50915
+ * @param {boolean} [options.debug = false]
50916
+ * @param {boolean} [options.strict = false]
50917
+ * @param {Function} [options.buildDebugString]
50918
+ *
50919
+ */
50920
+ function useTemplateEvaluation(value, options) {
50921
+ const filteredData = useFilteredFormData();
50922
+ const templating = useService$2('templating');
50923
+ return d(() => {
50924
+ if (templating && templating.isTemplate(value)) {
50925
+ return templating.evaluate(value, filteredData, options);
50926
+ }
50927
+ return value;
50928
+ }, [filteredData, templating, value, options]);
50929
+ }
50930
+
50931
+ /**
50932
+ * Template a string reactively based on form data. If the string is not a template, it is returned as is.
50933
+ * If the string contains multiple lines, only the first line is returned.
50934
+ * Memoised to minimize re-renders
50935
+ *
50936
+ * @param {string} value
50937
+ * @param {Object} [options]
50938
+ * @param {boolean} [options.debug = false]
50939
+ * @param {boolean} [options.strict = false]
50940
+ * @param {Function} [options.buildDebugString]
50941
+ *
50942
+ */
50943
+ function useSingleLineTemplateEvaluation(value, options = {}) {
50944
+ const evaluatedTemplate = useTemplateEvaluation(value, options);
50945
+ return d(() => evaluatedTemplate && evaluatedTemplate.split('\n')[0], [evaluatedTemplate]);
50946
+ }
50904
50947
  function Description$2(props) {
50905
50948
  const {
50906
50949
  description
50907
50950
  } = props;
50908
- if (!description) {
50951
+ const evaluatedDescription = useSingleLineTemplateEvaluation(description || '', {
50952
+ debug: true
50953
+ });
50954
+ if (!evaluatedDescription) {
50909
50955
  return null;
50910
50956
  }
50911
50957
  return e$1("div", {
50912
50958
  class: "fjs-form-field-description",
50913
- children: description
50959
+ children: evaluatedDescription
50914
50960
  });
50915
50961
  }
50916
50962
  function Errors(props) {
@@ -50934,19 +50980,22 @@
50934
50980
  })
50935
50981
  });
50936
50982
  }
50937
- function Label$1(props) {
50983
+ function Label$2(props) {
50938
50984
  const {
50939
50985
  id,
50940
50986
  label,
50941
50987
  collapseOnEmpty = true,
50942
50988
  required = false
50943
50989
  } = props;
50990
+ const evaluatedLabel = useSingleLineTemplateEvaluation(label || '', {
50991
+ debug: true
50992
+ });
50944
50993
  return e$1("label", {
50945
50994
  for: id,
50946
50995
  class: classNames('fjs-form-field-label', {
50947
50996
  'fjs-incollapsible-label': !collapseOnEmpty
50948
50997
  }, props['class']),
50949
- children: [props.children, label || '', required && e$1("span", {
50998
+ children: [props.children, evaluatedLabel, required && e$1("span", {
50950
50999
  class: "fjs-asterix",
50951
51000
  children: "*"
50952
51001
  })]
@@ -50980,7 +51029,7 @@
50980
51029
  };
50981
51030
  const {
50982
51031
  formId
50983
- } = F$1(FormContext$1);
51032
+ } = F(FormContext$1);
50984
51033
  const errorMessageId = errors.length === 0 ? undefined : `${prefixId$2(id, formId)}-error-message`;
50985
51034
  return e$1("div", {
50986
51035
  class: classNames(formFieldClasses(type$a, {
@@ -50990,7 +51039,7 @@
50990
51039
  }), {
50991
51040
  'fjs-checked': value
50992
51041
  }),
50993
- children: [e$1(Label$1, {
51042
+ children: [e$1(Label$2, {
50994
51043
  id: prefixId$2(id, formId),
50995
51044
  label: label,
50996
51045
  required: required,
@@ -51071,12 +51120,6 @@
51071
51120
  function _isValueSomething(value) {
51072
51121
  return value || value === 0 || value === false;
51073
51122
  }
51074
- function useService$2(type, strict) {
51075
- const {
51076
- getService
51077
- } = F$1(FormContext$1);
51078
- return getService(type, strict);
51079
- }
51080
51123
 
51081
51124
  /**
51082
51125
  * @enum { String }
@@ -51101,6 +51144,7 @@
51101
51144
  */
51102
51145
  function useValuesAsync(field) {
51103
51146
  const {
51147
+ valuesExpression,
51104
51148
  valuesKey,
51105
51149
  values: staticValues
51106
51150
  } = field;
@@ -51110,6 +51154,11 @@
51110
51154
  state: LOAD_STATES.LOADING
51111
51155
  });
51112
51156
  const initialData = useService$2('form')._getState().initialData;
51157
+ const evaluatedValues = d(() => {
51158
+ if (valuesExpression) {
51159
+ return useExpressionEvaluation(valuesExpression);
51160
+ }
51161
+ }, [valuesExpression]);
51113
51162
  y(() => {
51114
51163
  let values = [];
51115
51164
 
@@ -51119,11 +51168,14 @@
51119
51168
  if (keyedValues && Array.isArray(keyedValues)) {
51120
51169
  values = keyedValues;
51121
51170
  }
51122
- }
51123
51171
 
51124
- // static values
51125
- else if (staticValues !== undefined) {
51172
+ // static values
51173
+ } else if (staticValues !== undefined) {
51126
51174
  values = Array.isArray(staticValues) ? staticValues : [];
51175
+
51176
+ // expression
51177
+ } else if (evaluatedValues && Array.isArray(evaluatedValues)) {
51178
+ values = evaluatedValues;
51127
51179
  } else {
51128
51180
  setValuesGetter(buildErrorState('No values source defined in the form definition'));
51129
51181
  return;
@@ -51386,7 +51438,7 @@
51386
51438
  } = useValuesAsync(field);
51387
51439
  const {
51388
51440
  formId
51389
- } = F$1(FormContext$1);
51441
+ } = F(FormContext$1);
51390
51442
  const errorMessageId = errors.length === 0 ? undefined : `${prefixId$2(id, formId)}-error-message`;
51391
51443
  return e$1("div", {
51392
51444
  class: classNames(formFieldClasses(type$9, {
@@ -51394,11 +51446,11 @@
51394
51446
  disabled,
51395
51447
  readonly
51396
51448
  })),
51397
- children: [e$1(Label$1, {
51449
+ children: [e$1(Label$2, {
51398
51450
  label: label,
51399
51451
  required: required
51400
51452
  }), loadState == LOAD_STATES.LOADED && options.map((v, index) => {
51401
- return e$1(Label$1, {
51453
+ return e$1(Label$2, {
51402
51454
  id: prefixId$2(`${id}-${index}`, formId),
51403
51455
  label: v.label,
51404
51456
  class: classNames({
@@ -51447,124 +51499,6 @@
51447
51499
  };
51448
51500
  }
51449
51501
  };
51450
-
51451
- /**
51452
- * Returns the conditionally filtered data of a form reactively.
51453
- * Memoised to minimize re-renders
51454
- *
51455
- */
51456
- function useFilteredFormData() {
51457
- const {
51458
- initialData,
51459
- data
51460
- } = useService$2('form')._getState();
51461
- const conditionChecker = useService$2('conditionChecker', false);
51462
- return d(() => {
51463
- const newData = conditionChecker ? conditionChecker.applyConditions(data, data) : data;
51464
- return {
51465
- ...initialData,
51466
- ...newData
51467
- };
51468
- }, [conditionChecker, data, initialData]);
51469
- }
51470
-
51471
- /**
51472
- * Evaluate if condition is met reactively based on the conditionChecker and form data.
51473
- *
51474
- * @param {string | undefined} condition
51475
- *
51476
- * @returns {boolean} true if condition is met or no condition or condition checker exists
51477
- */
51478
- function useCondition(condition) {
51479
- const conditionChecker = useService$2('conditionChecker', false);
51480
- const filteredData = useFilteredFormData();
51481
- return d(() => {
51482
- return conditionChecker ? conditionChecker.check(condition, filteredData) : null;
51483
- }, [conditionChecker, condition, filteredData]);
51484
- }
51485
-
51486
- /**
51487
- * Evaluate a string reactively based on the expressionLanguage and form data.
51488
- * If the string is not an expression, it is returned as is.
51489
- * Memoised to minimize re-renders.
51490
- *
51491
- * @param {string} value
51492
- *
51493
- */
51494
- function useExpressionEvaluation(value) {
51495
- const formData = useFilteredFormData();
51496
- const expressionLanguage = useService$2('expressionLanguage');
51497
- return d(() => {
51498
- if (expressionLanguage && expressionLanguage.isExpression(value)) {
51499
- return expressionLanguage.evaluate(value, formData);
51500
- }
51501
- return value;
51502
- }, [expressionLanguage, formData, value]);
51503
- }
51504
- function useKeyDownAction(targetKey, action, listenerElement = window) {
51505
- function downHandler({
51506
- key
51507
- }) {
51508
- if (key === targetKey) {
51509
- action();
51510
- }
51511
- }
51512
- y(() => {
51513
- listenerElement.addEventListener('keydown', downHandler);
51514
- return () => {
51515
- listenerElement.removeEventListener('keydown', downHandler);
51516
- };
51517
- });
51518
- }
51519
-
51520
- /**
51521
- * Retrieve readonly value of a form field, given it can be an
51522
- * expression optionally or configured globally.
51523
- *
51524
- * @typedef { import('../../types').FormProperties } FormProperties
51525
- *
51526
- * @param {any} formField
51527
- * @param {FormProperties} properties
51528
- *
51529
- * @returns {boolean}
51530
- */
51531
- function useReadonly(formField, properties = {}) {
51532
- const expressionLanguage = useService$2('expressionLanguage');
51533
- const conditionChecker = useService$2('conditionChecker', false);
51534
- const filteredData = useFilteredFormData();
51535
- const {
51536
- readonly
51537
- } = formField;
51538
- if (properties.readOnly) {
51539
- return true;
51540
- }
51541
- if (expressionLanguage && expressionLanguage.isExpression(readonly)) {
51542
- return conditionChecker ? conditionChecker.check(readonly, filteredData) : false;
51543
- }
51544
- return readonly || false;
51545
- }
51546
-
51547
- /**
51548
- * Template a string reactively based on form data. If the string is not a template, it is returned as is.
51549
- * Memoised to minimize re-renders
51550
- *
51551
- * @param {string} value
51552
- * @param {Object} options
51553
- * @param {boolean} [options.debug = false]
51554
- * @param {boolean} [options.strict = false]
51555
- * @param {Function} [options.buildDebugString]
51556
- *
51557
- */
51558
- function useTemplateEvaluation(value, options) {
51559
- const filteredData = useFilteredFormData();
51560
- const templating = useService$2('templating');
51561
- return d(() => {
51562
- if (templating.isTemplate(value)) {
51563
- return templating.evaluate(value, filteredData, options);
51564
- }
51565
- return value;
51566
- }, [filteredData, templating, value, options]);
51567
- }
51568
51502
  const noop$1$1 = () => false;
51569
51503
  function FormField(props) {
51570
51504
  const {
@@ -51582,7 +51516,7 @@
51582
51516
  Element,
51583
51517
  Empty,
51584
51518
  Column
51585
- } = F$1(FormRenderContext$1);
51519
+ } = F(FormRenderContext$1);
51586
51520
  const FormFieldComponent = formFields.get(field.type);
51587
51521
  if (!FormFieldComponent) {
51588
51522
  throw new Error(`cannot render field <${field.type}>`);
@@ -51619,7 +51553,7 @@
51619
51553
  Children,
51620
51554
  Empty,
51621
51555
  Row
51622
- } = F$1(FormRenderContext$1);
51556
+ } = F(FormRenderContext$1);
51623
51557
  const {
51624
51558
  field
51625
51559
  } = props;
@@ -51668,6 +51602,7 @@
51668
51602
  ...options
51669
51603
  })
51670
51604
  };
51605
+ var _path$g;
51671
51606
  function _extends$j() {
51672
51607
  _extends$j = Object.assign ? Object.assign.bind() : function (target) {
51673
51608
  for (var i = 1; i < arguments.length; i++) {
@@ -51682,25 +51617,25 @@
51682
51617
  };
51683
51618
  return _extends$j.apply(this, arguments);
51684
51619
  }
51685
- var CalendarIcon = ({
51686
- styles = {},
51687
- ...props
51688
- }) => /*#__PURE__*/React.createElement("svg", _extends$j({
51689
- width: "14",
51690
- height: "15",
51691
- viewBox: "0 0 28 30",
51692
- fill: "none",
51693
- xmlns: "http://www.w3.org/2000/svg"
51694
- }, props), /*#__PURE__*/React.createElement("path", {
51695
- fillRule: "evenodd",
51696
- clipRule: "evenodd",
51697
- fill: "currentColor",
51698
- d: "M19 2H9V0H7v2H2a2 2 0 00-2 2v24a2 2 0 002 2h24a2 2 0 002-2V4a2 2 0 00-2-2h-5V0h-2v2zM7 7V4H2v5h24V4h-5v3h-2V4H9v3H7zm-5 4v17h24V11H2z"
51699
- }));
51620
+ var SvgCalendar = function SvgCalendar(props) {
51621
+ return /*#__PURE__*/v$1("svg", _extends$j({
51622
+ xmlns: "http://www.w3.org/2000/svg",
51623
+ width: 14,
51624
+ height: 15,
51625
+ fill: "none",
51626
+ viewBox: "0 0 28 30"
51627
+ }, props), _path$g || (_path$g = /*#__PURE__*/v$1("path", {
51628
+ fill: "currentColor",
51629
+ fillRule: "evenodd",
51630
+ d: "M19 2H9V0H7v2H2a2 2 0 0 0-2 2v24a2 2 0 0 0 2 2h24a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-5V0h-2v2ZM7 7V4H2v5h24V4h-5v3h-2V4H9v3H7Zm-5 4v17h24V11H2Z",
51631
+ clipRule: "evenodd"
51632
+ })));
51633
+ };
51634
+ var CalendarIcon = SvgCalendar;
51700
51635
  function InputAdorner(props) {
51701
51636
  const {
51702
- pre = null,
51703
- post = null,
51637
+ pre,
51638
+ post,
51704
51639
  rootRef,
51705
51640
  inputRef,
51706
51641
  children,
@@ -51717,14 +51652,14 @@
51717
51652
  'hasErrors': hasErrors
51718
51653
  }),
51719
51654
  ref: rootRef,
51720
- children: [pre !== null && e$1("span", {
51655
+ children: [pre && e$1("span", {
51721
51656
  class: "fjs-input-adornment border-right border-radius-left",
51722
51657
  onClick: onAdornmentClick,
51723
51658
  children: [" ", isString$4(pre) ? e$1("span", {
51724
51659
  class: "fjs-input-adornment-text",
51725
51660
  children: pre
51726
51661
  }) : pre, " "]
51727
- }), children, post !== null && e$1("span", {
51662
+ }), children, post && e$1("span", {
51728
51663
  class: "fjs-input-adornment border-left border-radius-right",
51729
51664
  onClick: onAdornmentClick,
51730
51665
  children: [" ", isString$4(post) ? e$1("span", {
@@ -51837,7 +51772,7 @@
51837
51772
  const fullId = `${prefixId$2(id, formId)}--date`;
51838
51773
  return e$1("div", {
51839
51774
  class: "fjs-datetime-subsection",
51840
- children: [e$1(Label$1, {
51775
+ children: [e$1(Label$2, {
51841
51776
  id: fullId,
51842
51777
  label: label,
51843
51778
  collapseOnEmpty: collapseLabelOnEmpty,
@@ -51874,6 +51809,7 @@
51874
51809
  })]
51875
51810
  });
51876
51811
  }
51812
+ var _path$f, _path2$3;
51877
51813
  function _extends$i() {
51878
51814
  _extends$i = Object.assign ? Object.assign.bind() : function (target) {
51879
51815
  for (var i = 1; i < arguments.length; i++) {
@@ -51888,24 +51824,24 @@
51888
51824
  };
51889
51825
  return _extends$i.apply(this, arguments);
51890
51826
  }
51891
- var ClockIcon = ({
51892
- styles = {},
51893
- ...props
51894
- }) => /*#__PURE__*/React.createElement("svg", _extends$i({
51895
- width: "16",
51896
- height: "16",
51897
- viewBox: "0 0 28 29",
51898
- fill: "none",
51899
- xmlns: "http://www.w3.org/2000/svg"
51900
- }, props), /*#__PURE__*/React.createElement("path", {
51901
- fill: "currentColor",
51902
- d: "M13 14.41L18.59 20 20 18.59l-5-5.01V5h-2v9.41z"
51903
- }), /*#__PURE__*/React.createElement("path", {
51904
- fillRule: "evenodd",
51905
- clipRule: "evenodd",
51906
- fill: "currentColor",
51907
- d: "M6.222 25.64A14 14 0 1021.778 2.36 14 14 0 006.222 25.64zM7.333 4.023a12 12 0 1113.334 19.955A12 12 0 017.333 4.022z"
51908
- }));
51827
+ var SvgClock = function SvgClock(props) {
51828
+ return /*#__PURE__*/v$1("svg", _extends$i({
51829
+ xmlns: "http://www.w3.org/2000/svg",
51830
+ width: 16,
51831
+ height: 16,
51832
+ fill: "none",
51833
+ viewBox: "0 0 28 29"
51834
+ }, props), _path$f || (_path$f = /*#__PURE__*/v$1("path", {
51835
+ fill: "currentColor",
51836
+ d: "M13 14.41 18.59 20 20 18.59l-5-5.01V5h-2v9.41Z"
51837
+ })), _path2$3 || (_path2$3 = /*#__PURE__*/v$1("path", {
51838
+ fill: "currentColor",
51839
+ fillRule: "evenodd",
51840
+ d: "M6.222 25.64A14 14 0 1 0 21.778 2.36 14 14 0 0 0 6.222 25.64ZM7.333 4.023a12 12 0 1 1 13.334 19.955A12 12 0 0 1 7.333 4.022Z",
51841
+ clipRule: "evenodd"
51842
+ })));
51843
+ };
51844
+ var ClockIcon = SvgClock;
51909
51845
  const DEFAULT_LABEL_GETTER = value => value;
51910
51846
  const NOOP = () => {};
51911
51847
  function DropdownList(props) {
@@ -52014,9 +51950,16 @@
52014
51950
  time,
52015
51951
  setTime
52016
51952
  } = props;
51953
+ const safeTimeInterval = d(() => {
51954
+ const allowedIntervals = [1, 5, 10, 15, 30, 60];
51955
+ if (allowedIntervals.includes(timeInterval)) {
51956
+ return timeInterval;
51957
+ }
51958
+ return 15;
51959
+ }, [timeInterval]);
52017
51960
  const timeInputRef = s$1();
52018
51961
  const [dropdownIsOpen, setDropdownIsOpen] = l$2(false);
52019
- const useDropdown = d(() => timeInterval !== 1, [timeInterval]);
51962
+ const useDropdown = d(() => safeTimeInterval !== 1, [safeTimeInterval]);
52020
51963
  const [rawValue, setRawValue] = l$2('');
52021
51964
 
52022
51965
  // populates values from source
@@ -52025,12 +51968,12 @@
52025
51968
  setRawValue('');
52026
51969
  return;
52027
51970
  }
52028
- const intervalAdjustedTime = time - time % timeInterval;
51971
+ const intervalAdjustedTime = time - time % safeTimeInterval;
52029
51972
  setRawValue(formatTime(use24h, intervalAdjustedTime));
52030
51973
  if (intervalAdjustedTime != time) {
52031
51974
  setTime(intervalAdjustedTime);
52032
51975
  }
52033
- }, [time, setTime, use24h, timeInterval]);
51976
+ }, [time, setTime, use24h, safeTimeInterval]);
52034
51977
  const propagateRawToMinute = A$1(newRawValue => {
52035
51978
  const localRawValue = newRawValue || rawValue;
52036
51979
 
@@ -52049,34 +51992,34 @@
52049
51992
  }
52050
51993
 
52051
51994
  // Enforce the minutes to match the timeInterval
52052
- const correctedMinutes = minutes - minutes % timeInterval;
51995
+ const correctedMinutes = minutes - minutes % safeTimeInterval;
52053
51996
 
52054
51997
  // Enforce the raw text to be formatted properly
52055
51998
  setRawValue(formatTime(use24h, correctedMinutes));
52056
51999
  setTime(correctedMinutes);
52057
- }, [rawValue, timeInterval, use24h, setTime]);
52000
+ }, [rawValue, safeTimeInterval, use24h, setTime]);
52058
52001
  const timeOptions = d(() => {
52059
52002
  const minutesInDay = 24 * 60;
52060
- const intervalCount = Math.floor(minutesInDay / timeInterval);
52061
- return [...Array(intervalCount).keys()].map(intervalIndex => formatTime(use24h, intervalIndex * timeInterval));
52062
- }, [timeInterval, use24h]);
52003
+ const intervalCount = Math.floor(minutesInDay / safeTimeInterval);
52004
+ return [...Array(intervalCount).keys()].map(intervalIndex => formatTime(use24h, intervalIndex * safeTimeInterval));
52005
+ }, [safeTimeInterval, use24h]);
52063
52006
  const initialFocusIndex = d(() => {
52064
52007
  // if there are no options, there will not be any focusing
52065
- if (!timeOptions || !timeInterval) return null;
52008
+ if (!timeOptions || !safeTimeInterval) return null;
52066
52009
 
52067
52010
  // if there is a set minute value, we focus it in the dropdown
52068
- if (time) return time / timeInterval;
52011
+ if (time) return time / safeTimeInterval;
52069
52012
  const cacheTime = parseInputTime(rawValue);
52070
52013
 
52071
52014
  // if there is a valid value in the input cache, we try and focus close to it
52072
52015
  if (cacheTime) {
52073
- const flooredCacheTime = cacheTime - cacheTime % timeInterval;
52074
- return flooredCacheTime / timeInterval;
52016
+ const flooredCacheTime = cacheTime - cacheTime % safeTimeInterval;
52017
+ return flooredCacheTime / safeTimeInterval;
52075
52018
  }
52076
52019
 
52077
52020
  // If there is no set value, simply focus the middle of the dropdown (12:00)
52078
52021
  return Math.floor(timeOptions.length / 2);
52079
- }, [rawValue, time, timeInterval, timeOptions]);
52022
+ }, [rawValue, time, safeTimeInterval, timeOptions]);
52080
52023
  const onInputKeyDown = e => {
52081
52024
  switch (e.key) {
52082
52025
  case 'ArrowUp':
@@ -52105,7 +52048,7 @@
52105
52048
  const fullId = `${prefixId$2(id, formId)}--time`;
52106
52049
  return e$1("div", {
52107
52050
  class: "fjs-datetime-subsection",
52108
- children: [e$1(Label$1, {
52051
+ children: [e$1(Label$2, {
52109
52052
  id: fullId,
52110
52053
  label: label,
52111
52054
  collapseOnEmpty: collapseLabelOnEmpty,
@@ -52179,7 +52122,7 @@
52179
52122
  } = validate;
52180
52123
  const {
52181
52124
  formId
52182
- } = F$1(FormContext$1);
52125
+ } = F(FormContext$1);
52183
52126
  const getNullDateTime = () => ({
52184
52127
  date: new Date(Date.parse(null)),
52185
52128
  time: null
@@ -52608,34 +52551,45 @@
52608
52551
  };
52609
52552
  return _extends$h.apply(this, arguments);
52610
52553
  }
52611
- var ImagePlaceholder = ({
52612
- styles = {},
52613
- ...props
52614
- }) => /*#__PURE__*/React.createElement("svg", _extends$h({
52615
- width: "64",
52616
- height: "64",
52617
- viewBox: "0 0 1280 1280",
52618
- xmlns: "http://www.w3.org/2000/svg",
52619
- fillRule: "evenodd",
52620
- clipRule: "evenodd",
52621
- strokeLinejoin: "round",
52622
- strokeMiterlimit: "2"
52623
- }, props), /*#__PURE__*/React.createElement("path", {
52624
- fill: "#e5e9ed",
52625
- d: "M0 0h1280v1280H0z"
52626
- }), /*#__PURE__*/React.createElement("path", {
52627
- d: "M910 410H370v470h540V410zm-57.333 57.333v355.334H427.333V467.333h425.334z",
52628
- fill: "#cad3db"
52629
- }), /*#__PURE__*/React.createElement("path", {
52630
- d: "M810 770H480v-60l100-170 130 170 100-65v125z",
52631
- fill: "#cad3db"
52632
- }), /*#__PURE__*/React.createElement("circle", {
52633
- cx: "750",
52634
- cy: "550",
52635
- r: "50",
52636
- fill: "#cad3db",
52637
- transform: "translate(10 10)"
52638
- }));
52554
+ var SvgImagePlaceholder = function SvgImagePlaceholder(props) {
52555
+ return /*#__PURE__*/v$1("svg", _extends$h({
52556
+ xmlns: "http://www.w3.org/2000/svg",
52557
+ xmlSpace: "preserve",
52558
+ width: 64,
52559
+ height: 64,
52560
+ style: {
52561
+ fillRule: "evenodd",
52562
+ clipRule: "evenodd",
52563
+ strokeLinejoin: "round",
52564
+ strokeMiterlimit: 2
52565
+ },
52566
+ viewBox: "0 0 1280 1280"
52567
+ }, props), /*#__PURE__*/v$1("path", {
52568
+ d: "M0 0h1280v1280H0z",
52569
+ style: {
52570
+ fill: "#e5e9ed"
52571
+ }
52572
+ }), /*#__PURE__*/v$1("path", {
52573
+ d: "M910 410H370v470h540V410Zm-57.333 57.333v355.334H427.333V467.333h425.334Z",
52574
+ style: {
52575
+ fill: "#cad3db"
52576
+ }
52577
+ }), /*#__PURE__*/v$1("path", {
52578
+ d: "M810 770H480v-60l100-170 130 170 100-65v125Z",
52579
+ style: {
52580
+ fill: "#cad3db"
52581
+ }
52582
+ }), /*#__PURE__*/v$1("circle", {
52583
+ cx: 750,
52584
+ cy: 550,
52585
+ r: 50,
52586
+ style: {
52587
+ fill: "#cad3db"
52588
+ },
52589
+ transform: "translate(10 10)"
52590
+ }));
52591
+ };
52592
+ var ImagePlaceholder = SvgImagePlaceholder;
52639
52593
  const type$7 = 'image';
52640
52594
  function Image(props) {
52641
52595
  const {
@@ -52646,12 +52600,16 @@
52646
52600
  id,
52647
52601
  source
52648
52602
  } = field;
52649
- const evaluatedImageSource = useExpressionEvaluation(source);
52603
+ const evaluatedImageSource = useSingleLineTemplateEvaluation(source, {
52604
+ debug: true
52605
+ });
52650
52606
  const safeSource = d(() => sanitizeImageSource(evaluatedImageSource), [evaluatedImageSource]);
52651
- const altText = useExpressionEvaluation(alt);
52607
+ const altText = useSingleLineTemplateEvaluation(alt, {
52608
+ debug: true
52609
+ });
52652
52610
  const {
52653
52611
  formId
52654
- } = F$1(FormContext$1);
52612
+ } = F(FormContext$1);
52655
52613
  return e$1("div", {
52656
52614
  class: formFieldClasses(type$7),
52657
52615
  children: e$1("div", {
@@ -52679,6 +52637,24 @@
52679
52637
  ...options
52680
52638
  })
52681
52639
  };
52640
+ function TemplatedInputAdorner(props) {
52641
+ const {
52642
+ pre,
52643
+ post
52644
+ } = props;
52645
+ const evaluatedPre = useSingleLineTemplateEvaluation(pre, {
52646
+ debug: true
52647
+ });
52648
+ const evaluatedPost = useSingleLineTemplateEvaluation(post, {
52649
+ debug: true
52650
+ });
52651
+ return e$1(InputAdorner, {
52652
+ ...props,
52653
+ pre: evaluatedPre,
52654
+ post: evaluatedPost
52655
+ });
52656
+ }
52657
+ var _path$e;
52682
52658
  function _extends$g() {
52683
52659
  _extends$g = Object.assign ? Object.assign.bind() : function (target) {
52684
52660
  for (var i = 1; i < arguments.length; i++) {
@@ -52693,21 +52669,22 @@
52693
52669
  };
52694
52670
  return _extends$g.apply(this, arguments);
52695
52671
  }
52696
- var AngelDownIcon = ({
52697
- styles = {},
52698
- ...props
52699
- }) => /*#__PURE__*/React.createElement("svg", _extends$g({
52700
- xmlns: "http://www.w3.org/2000/svg",
52701
- width: "8",
52702
- height: "8"
52703
- }, props), /*#__PURE__*/React.createElement("path", {
52704
- fillRule: "evenodd",
52705
- clipRule: "evenodd",
52706
- fill: "currentColor",
52707
- stroke: "currentColor",
52708
- strokeWidth: ".5",
52709
- d: "M7.75 1.336L4 6.125.258 1.335 0 1.54l4 5.125L8 1.54zm0 0"
52710
- }));
52672
+ var SvgAngelDown = function SvgAngelDown(props) {
52673
+ return /*#__PURE__*/v$1("svg", _extends$g({
52674
+ xmlns: "http://www.w3.org/2000/svg",
52675
+ width: 8,
52676
+ height: 8
52677
+ }, props), _path$e || (_path$e = /*#__PURE__*/v$1("path", {
52678
+ fill: "currentColor",
52679
+ fillRule: "evenodd",
52680
+ stroke: "currentColor",
52681
+ strokeWidth: 0.5,
52682
+ d: "M7.75 1.336 4 6.125.258 1.335 0 1.54l4 5.125L8 1.54Zm0 0",
52683
+ clipRule: "evenodd"
52684
+ })));
52685
+ };
52686
+ var AngelDownIcon = SvgAngelDown;
52687
+ var _path$d;
52711
52688
  function _extends$f() {
52712
52689
  _extends$f = Object.assign ? Object.assign.bind() : function (target) {
52713
52690
  for (var i = 1; i < arguments.length; i++) {
@@ -52722,21 +52699,21 @@
52722
52699
  };
52723
52700
  return _extends$f.apply(this, arguments);
52724
52701
  }
52725
- var AngelUpIcon = ({
52726
- styles = {},
52727
- ...props
52728
- }) => /*#__PURE__*/React.createElement("svg", _extends$f({
52729
- xmlns: "http://www.w3.org/2000/svg",
52730
- width: "8",
52731
- height: "8"
52732
- }, props), /*#__PURE__*/React.createElement("path", {
52733
- fillRule: "evenodd",
52734
- clipRule: "evenodd",
52735
- fill: "currentColor",
52736
- stroke: "currentColor",
52737
- strokeWidth: ".5",
52738
- d: "M7.75 6.664L4 1.875.258 6.665 0 6.46l4-5.125L8 6.46zm0 0"
52739
- }));
52702
+ var SvgAngelUp = function SvgAngelUp(props) {
52703
+ return /*#__PURE__*/v$1("svg", _extends$f({
52704
+ xmlns: "http://www.w3.org/2000/svg",
52705
+ width: 8,
52706
+ height: 8
52707
+ }, props), _path$d || (_path$d = /*#__PURE__*/v$1("path", {
52708
+ fill: "currentColor",
52709
+ fillRule: "evenodd",
52710
+ stroke: "currentColor",
52711
+ strokeWidth: 0.5,
52712
+ d: "M7.75 6.664 4 1.875.258 6.665 0 6.46l4-5.125L8 6.46Zm0 0",
52713
+ clipRule: "evenodd"
52714
+ })));
52715
+ };
52716
+ var AngelUpIcon = SvgAngelUp;
52740
52717
  const type$6 = 'number';
52741
52718
  function Numberfield(props) {
52742
52719
  const {
@@ -52871,7 +52848,7 @@
52871
52848
  };
52872
52849
  const {
52873
52850
  formId
52874
- } = F$1(FormContext$1);
52851
+ } = F(FormContext$1);
52875
52852
  const errorMessageId = errors.length === 0 ? undefined : `${prefixId$2(id, formId)}-error-message`;
52876
52853
  return e$1("div", {
52877
52854
  class: formFieldClasses(type$6, {
@@ -52879,11 +52856,11 @@
52879
52856
  disabled,
52880
52857
  readonly
52881
52858
  }),
52882
- children: [e$1(Label$1, {
52859
+ children: [e$1(Label$2, {
52883
52860
  id: prefixId$2(id, formId),
52884
52861
  label: label,
52885
52862
  required: required
52886
- }), e$1(InputAdorner, {
52863
+ }), e$1(TemplatedInputAdorner, {
52887
52864
  disabled: disabled,
52888
52865
  readonly: readonly,
52889
52866
  pre: prefixAdorner,
@@ -52998,7 +52975,7 @@
52998
52975
  } = useValuesAsync(field);
52999
52976
  const {
53000
52977
  formId
53001
- } = F$1(FormContext$1);
52978
+ } = F(FormContext$1);
53002
52979
  const errorMessageId = errors.length === 0 ? undefined : `${prefixId$2(id, formId)}-error-message`;
53003
52980
  return e$1("div", {
53004
52981
  class: formFieldClasses(type$5, {
@@ -53006,11 +52983,11 @@
53006
52983
  disabled,
53007
52984
  readonly
53008
52985
  }),
53009
- children: [e$1(Label$1, {
52986
+ children: [e$1(Label$2, {
53010
52987
  label: label,
53011
52988
  required: required
53012
52989
  }), loadState == LOAD_STATES.LOADED && options.map((option, index) => {
53013
- return e$1(Label$1, {
52990
+ return e$1(Label$2, {
53014
52991
  id: prefixId$2(`${id}-${index}`, formId),
53015
52992
  label: option.label,
53016
52993
  class: classNames({
@@ -53059,6 +53036,7 @@
53059
53036
  };
53060
53037
  }
53061
53038
  };
53039
+ var _path$c;
53062
53040
  function _extends$e() {
53063
53041
  _extends$e = Object.assign ? Object.assign.bind() : function (target) {
53064
53042
  for (var i = 1; i < arguments.length; i++) {
@@ -53073,21 +53051,21 @@
53073
53051
  };
53074
53052
  return _extends$e.apply(this, arguments);
53075
53053
  }
53076
- var XMarkIcon = ({
53077
- styles = {},
53078
- ...props
53079
- }) => /*#__PURE__*/React.createElement("svg", _extends$e({
53080
- xmlns: "http://www.w3.org/2000/svg",
53081
- width: "8",
53082
- height: "8"
53083
- }, props), /*#__PURE__*/React.createElement("path", {
53084
- fillRule: "evenodd",
53085
- clipRule: "evenodd",
53086
- fill: "currentColor",
53087
- stroke: "currentColor",
53088
- strokeWidth: ".5",
53089
- d: "M4 3.766L7.43.336l.234.234L4.234 4l3.43 3.43-.234.234L4 4.234.57 7.664.336 7.43 3.766 4 .336.57.57.336zm0 0"
53090
- }));
53054
+ var SvgXMark = function SvgXMark(props) {
53055
+ return /*#__PURE__*/v$1("svg", _extends$e({
53056
+ xmlns: "http://www.w3.org/2000/svg",
53057
+ width: 8,
53058
+ height: 8
53059
+ }, props), _path$c || (_path$c = /*#__PURE__*/v$1("path", {
53060
+ fill: "currentColor",
53061
+ fillRule: "evenodd",
53062
+ stroke: "currentColor",
53063
+ strokeWidth: 0.5,
53064
+ d: "M4 3.766 7.43.336l.234.234L4.234 4l3.43 3.43-.234.234L4 4.234.57 7.664.336 7.43 3.766 4 .336.57.57.336Zm0 0",
53065
+ clipRule: "evenodd"
53066
+ })));
53067
+ };
53068
+ var XMarkIcon = SvgXMark;
53091
53069
  function SearchableSelect(props) {
53092
53070
  const {
53093
53071
  id,
@@ -53099,7 +53077,7 @@
53099
53077
  } = props;
53100
53078
  const {
53101
53079
  formId
53102
- } = F$1(FormContext$1);
53080
+ } = F(FormContext$1);
53103
53081
  const [filter, setFilter] = l$2('');
53104
53082
  const [isDropdownExpanded, setIsDropdownExpanded] = l$2(false);
53105
53083
  const [shouldApplyFilter, setShouldApplyFilter] = l$2(true);
@@ -53251,7 +53229,7 @@
53251
53229
  } = props;
53252
53230
  const {
53253
53231
  formId
53254
- } = F$1(FormContext$1);
53232
+ } = F(FormContext$1);
53255
53233
  const [isDropdownExpanded, setIsDropdownExpanded] = l$2(false);
53256
53234
  const selectRef = s$1();
53257
53235
  const {
@@ -53362,7 +53340,7 @@
53362
53340
  } = validate;
53363
53341
  const {
53364
53342
  formId
53365
- } = F$1(FormContext$1);
53343
+ } = F(FormContext$1);
53366
53344
  const errorMessageId = errors.length === 0 ? undefined : `${prefixId$2(id, formId)}-error-message`;
53367
53345
  const selectProps = d(() => ({
53368
53346
  id,
@@ -53386,7 +53364,7 @@
53386
53364
  event.stopPropagation();
53387
53365
  }
53388
53366
  },
53389
- children: [e$1(Label$1, {
53367
+ children: [e$1(Label$2, {
53390
53368
  id: prefixId$2(`${id}-search`, formId),
53391
53369
  label: label,
53392
53370
  required: required
@@ -53445,7 +53423,7 @@
53445
53423
  } = validate;
53446
53424
  const {
53447
53425
  formId
53448
- } = F$1(FormContext$1);
53426
+ } = F(FormContext$1);
53449
53427
  const errorMessageId = errors.length === 0 ? undefined : `${prefixId$2(id, formId)}-error-message`;
53450
53428
  const [filter, setFilter] = l$2('');
53451
53429
  const [filteredOptions, setFilteredOptions] = l$2([]);
@@ -53551,7 +53529,7 @@
53551
53529
  event.preventDefault();
53552
53530
  }
53553
53531
  },
53554
- children: [e$1(Label$1, {
53532
+ children: [e$1(Label$2, {
53555
53533
  label: label,
53556
53534
  required: required,
53557
53535
  id: prefixId$2(`${id}-search`, formId)
@@ -53756,7 +53734,7 @@
53756
53734
  };
53757
53735
  const {
53758
53736
  formId
53759
- } = F$1(FormContext$1);
53737
+ } = F(FormContext$1);
53760
53738
  const errorMessageId = errors.length === 0 ? undefined : `${prefixId$2(id, formId)}-error-message`;
53761
53739
  return e$1("div", {
53762
53740
  class: formFieldClasses(type$1, {
@@ -53764,11 +53742,11 @@
53764
53742
  disabled,
53765
53743
  readonly
53766
53744
  }),
53767
- children: [e$1(Label$1, {
53745
+ children: [e$1(Label$2, {
53768
53746
  id: prefixId$2(id, formId),
53769
53747
  label: label,
53770
53748
  required: required
53771
- }), e$1(InputAdorner, {
53749
+ }), e$1(TemplatedInputAdorner, {
53772
53750
  disabled: disabled,
53773
53751
  readonly: readonly,
53774
53752
  pre: prefixAdorner,
@@ -53859,7 +53837,7 @@
53859
53837
  }, [autoSizeTextarea, value]);
53860
53838
  const {
53861
53839
  formId
53862
- } = F$1(FormContext$1);
53840
+ } = F(FormContext$1);
53863
53841
  const errorMessageId = errors.length === 0 ? undefined : `${prefixId$2(id, formId)}-error-message`;
53864
53842
  return e$1("div", {
53865
53843
  class: formFieldClasses(type, {
@@ -53867,7 +53845,7 @@
53867
53845
  disabled,
53868
53846
  readonly
53869
53847
  }),
53870
- children: [e$1(Label$1, {
53848
+ children: [e$1(Label$2, {
53871
53849
  id: prefixId$2(id, formId),
53872
53850
  label: label,
53873
53851
  required: required
@@ -53901,6 +53879,7 @@
53901
53879
  ...options
53902
53880
  })
53903
53881
  };
53882
+ var _path$b;
53904
53883
  function _extends$d() {
53905
53884
  _extends$d = Object.assign ? Object.assign.bind() : function (target) {
53906
53885
  for (var i = 1; i < arguments.length; i++) {
@@ -53915,18 +53894,19 @@
53915
53894
  };
53916
53895
  return _extends$d.apply(this, arguments);
53917
53896
  }
53918
- var ButtonIcon = ({
53919
- styles = {},
53920
- ...props
53921
- }) => /*#__PURE__*/React.createElement("svg", _extends$d({
53922
- xmlns: "http://www.w3.org/2000/svg",
53923
- width: "54",
53924
- height: "54",
53925
- fill: "currentcolor"
53926
- }, props), /*#__PURE__*/React.createElement("path", {
53927
- fillRule: "evenodd",
53928
- d: "M45 17a3 3 0 013 3v14a3 3 0 01-3 3H9a3 3 0 01-3-3V20a3 3 0 013-3h36zm-9 8.889H18v2.222h18v-2.222z"
53929
- }));
53897
+ var SvgButton = function SvgButton(props) {
53898
+ return /*#__PURE__*/v$1("svg", _extends$d({
53899
+ xmlns: "http://www.w3.org/2000/svg",
53900
+ width: 54,
53901
+ height: 54,
53902
+ fill: "currentcolor"
53903
+ }, props), _path$b || (_path$b = /*#__PURE__*/v$1("path", {
53904
+ fillRule: "evenodd",
53905
+ d: "M45 17a3 3 0 0 1 3 3v14a3 3 0 0 1-3 3H9a3 3 0 0 1-3-3V20a3 3 0 0 1 3-3h36zm-9 8.889H18v2.222h18v-2.222z"
53906
+ })));
53907
+ };
53908
+ var ButtonIcon = SvgButton;
53909
+ var _path$a;
53930
53910
  function _extends$c() {
53931
53911
  _extends$c = Object.assign ? Object.assign.bind() : function (target) {
53932
53912
  for (var i = 1; i < arguments.length; i++) {
@@ -53941,17 +53921,18 @@
53941
53921
  };
53942
53922
  return _extends$c.apply(this, arguments);
53943
53923
  }
53944
- var CheckboxIcon = ({
53945
- styles = {},
53946
- ...props
53947
- }) => /*#__PURE__*/React.createElement("svg", _extends$c({
53948
- xmlns: "http://www.w3.org/2000/svg",
53949
- width: "54",
53950
- height: "54",
53951
- fill: "currentcolor"
53952
- }, props), /*#__PURE__*/React.createElement("path", {
53953
- d: "M34 18H20a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2V20a2 2 0 00-2-2zm-9 14l-5-5 1.41-1.41L25 29.17l7.59-7.59L34 23l-9 9z"
53954
- }));
53924
+ var SvgCheckbox = function SvgCheckbox(props) {
53925
+ return /*#__PURE__*/v$1("svg", _extends$c({
53926
+ xmlns: "http://www.w3.org/2000/svg",
53927
+ width: 54,
53928
+ height: 54,
53929
+ fill: "currentcolor"
53930
+ }, props), _path$a || (_path$a = /*#__PURE__*/v$1("path", {
53931
+ d: "M34 18H20a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V20a2 2 0 0 0-2-2zm-9 14-5-5 1.41-1.41L25 29.17l7.59-7.59L34 23l-9 9z"
53932
+ })));
53933
+ };
53934
+ var CheckboxIcon = SvgCheckbox;
53935
+ var _g, _use, _use2, _use3, _defs;
53955
53936
  function _extends$b() {
53956
53937
  _extends$b = Object.assign ? Object.assign.bind() : function (target) {
53957
53938
  for (var i = 1; i < arguments.length; i++) {
@@ -53966,40 +53947,41 @@
53966
53947
  };
53967
53948
  return _extends$b.apply(this, arguments);
53968
53949
  }
53969
- var ChecklistIcon = ({
53970
- styles = {},
53971
- ...props
53972
- }) => /*#__PURE__*/React.createElement("svg", _extends$b({
53973
- xmlns: "http://www.w3.org/2000/svg",
53974
- xmlnsXlink: "http://www.w3.org/1999/xlink",
53975
- width: "54",
53976
- height: "54",
53977
- fill: "currentcolor"
53978
- }, props), /*#__PURE__*/React.createElement("g", {
53979
- fillRule: "evenodd"
53980
- }, /*#__PURE__*/React.createElement("use", {
53981
- xlinkHref: "#a"
53982
- }), /*#__PURE__*/React.createElement("use", {
53983
- xlinkHref: "#a",
53984
- y: "24"
53985
- }), /*#__PURE__*/React.createElement("use", {
53986
- xlinkHref: "#a",
53987
- y: "12"
53988
- })), /*#__PURE__*/React.createElement("use", {
53989
- xlinkHref: "#b"
53990
- }), /*#__PURE__*/React.createElement("use", {
53991
- xlinkHref: "#b",
53992
- y: "12"
53993
- }), /*#__PURE__*/React.createElement("use", {
53994
- xlinkHref: "#b",
53995
- y: "24"
53996
- }), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("path", {
53997
- id: "a",
53998
- d: "M18 12h-6v6h6v-6zm-6-2a2 2 0 00-2 2v6a2 2 0 002 2h6a2 2 0 002-2v-6a2 2 0 00-2-2h-6z"
53999
- }), /*#__PURE__*/React.createElement("path", {
54000
- id: "b",
54001
- d: "M23 14.5a1 1 0 011-1h19a1 1 0 011 1v1a1 1 0 01-1 1H24a1 1 0 01-1-1v-1z"
54002
- })));
53950
+ var SvgChecklist = function SvgChecklist(props) {
53951
+ return /*#__PURE__*/v$1("svg", _extends$b({
53952
+ xmlns: "http://www.w3.org/2000/svg",
53953
+ xmlnsXlink: "http://www.w3.org/1999/xlink",
53954
+ width: 54,
53955
+ height: 54,
53956
+ fill: "currentcolor"
53957
+ }, props), _g || (_g = /*#__PURE__*/v$1("g", {
53958
+ fillRule: "evenodd"
53959
+ }, /*#__PURE__*/v$1("use", {
53960
+ xlinkHref: "#Checklist_svg__a"
53961
+ }), /*#__PURE__*/v$1("use", {
53962
+ xlinkHref: "#Checklist_svg__a",
53963
+ y: 24
53964
+ }), /*#__PURE__*/v$1("use", {
53965
+ xlinkHref: "#Checklist_svg__a",
53966
+ y: 12
53967
+ }))), _use || (_use = /*#__PURE__*/v$1("use", {
53968
+ xlinkHref: "#Checklist_svg__b"
53969
+ })), _use2 || (_use2 = /*#__PURE__*/v$1("use", {
53970
+ xlinkHref: "#Checklist_svg__b",
53971
+ y: 12
53972
+ })), _use3 || (_use3 = /*#__PURE__*/v$1("use", {
53973
+ xlinkHref: "#Checklist_svg__b",
53974
+ y: 24
53975
+ })), _defs || (_defs = /*#__PURE__*/v$1("defs", null, /*#__PURE__*/v$1("path", {
53976
+ id: "Checklist_svg__a",
53977
+ d: "M18 12h-6v6h6v-6zm-6-2a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-6a2 2 0 0 0-2-2h-6z"
53978
+ }), /*#__PURE__*/v$1("path", {
53979
+ id: "Checklist_svg__b",
53980
+ d: "M23 14.5a1 1 0 0 1 1-1h19a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H24a1 1 0 0 1-1-1v-1z"
53981
+ }))));
53982
+ };
53983
+ var ChecklistIcon = SvgChecklist;
53984
+ var _path$9, _path2$2, _path3;
54003
53985
  function _extends$a() {
54004
53986
  _extends$a = Object.assign ? Object.assign.bind() : function (target) {
54005
53987
  for (var i = 1; i < arguments.length; i++) {
@@ -54014,23 +53996,24 @@
54014
53996
  };
54015
53997
  return _extends$a.apply(this, arguments);
54016
53998
  }
54017
- var DatetimeIcon = ({
54018
- styles = {},
54019
- ...props
54020
- }) => /*#__PURE__*/React.createElement("svg", _extends$a({
54021
- xmlns: "http://www.w3.org/2000/svg",
54022
- width: "54",
54023
- height: "54",
54024
- fill: "currentcolor"
54025
- }, props), /*#__PURE__*/React.createElement("path", {
54026
- fillRule: "evenodd",
54027
- d: "M37.908 13.418h-5.004v-2.354h-1.766v2.354H21.13v-2.354h-1.766v2.354H14.36a2.07 2.07 0 00-2.06 2.06v23.549a2.07 2.07 0 002.06 2.06h6.77v-1.766h-6.358a.707.707 0 01-.706-.706V15.89c0-.39.316-.707.706-.707h4.592v2.355h1.766v-2.355h10.008v2.355h1.766v-2.355h4.592a.71.71 0 01.707.707v6.358h1.765v-6.77c0-1.133-.927-2.06-2.06-2.06z"
54028
- }), /*#__PURE__*/React.createElement("path", {
54029
- d: "M35.13 37.603l1.237-1.237-3.468-3.475v-5.926h-1.754v6.654l3.984 3.984z"
54030
- }), /*#__PURE__*/React.createElement("path", {
54031
- fillRule: "evenodd",
54032
- d: "M23.08 36.962a9.678 9.678 0 1017.883-7.408 9.678 9.678 0 00-17.882 7.408zm4.54-10.292a7.924 7.924 0 118.805 13.177A7.924 7.924 0 0127.62 26.67z"
54033
- }));
53999
+ var SvgDatetime = function SvgDatetime(props) {
54000
+ return /*#__PURE__*/v$1("svg", _extends$a({
54001
+ xmlns: "http://www.w3.org/2000/svg",
54002
+ width: 54,
54003
+ height: 54,
54004
+ fill: "currentcolor"
54005
+ }, props), _path$9 || (_path$9 = /*#__PURE__*/v$1("path", {
54006
+ fillRule: "evenodd",
54007
+ d: "M37.908 13.418h-5.004v-2.354h-1.766v2.354H21.13v-2.354h-1.766v2.354H14.36a2.07 2.07 0 0 0-2.06 2.06v23.549a2.07 2.07 0 0 0 2.06 2.06h6.77v-1.766h-6.358a.707.707 0 0 1-.706-.706V15.89c0-.39.316-.707.706-.707h4.592v2.355h1.766v-2.355h10.008v2.355h1.766v-2.355h4.592a.71.71 0 0 1 .707.707v6.358h1.765v-6.77c0-1.133-.927-2.06-2.06-2.06z"
54008
+ })), _path2$2 || (_path2$2 = /*#__PURE__*/v$1("path", {
54009
+ d: "m35.13 37.603 1.237-1.237-3.468-3.475v-5.926h-1.754v6.654l3.984 3.984Z"
54010
+ })), _path3 || (_path3 = /*#__PURE__*/v$1("path", {
54011
+ fillRule: "evenodd",
54012
+ d: "M23.08 36.962a9.678 9.678 0 1 0 17.883-7.408 9.678 9.678 0 0 0-17.882 7.408Zm4.54-10.292a7.924 7.924 0 1 1 8.805 13.177A7.924 7.924 0 0 1 27.62 26.67Z"
54013
+ })));
54014
+ };
54015
+ var DatetimeIcon = SvgDatetime;
54016
+ var _path$8, _path2$1;
54034
54017
  function _extends$9() {
54035
54018
  _extends$9 = Object.assign ? Object.assign.bind() : function (target) {
54036
54019
  for (var i = 1; i < arguments.length; i++) {
@@ -54045,20 +54028,21 @@
54045
54028
  };
54046
54029
  return _extends$9.apply(this, arguments);
54047
54030
  }
54048
- var TaglistIcon = ({
54049
- styles = {},
54050
- ...props
54051
- }) => /*#__PURE__*/React.createElement("svg", _extends$9({
54052
- xmlns: "http://www.w3.org/2000/svg",
54053
- width: "54",
54054
- height: "54",
54055
- fill: "currentcolor"
54056
- }, props), /*#__PURE__*/React.createElement("path", {
54057
- fillRule: "evenodd",
54058
- d: "M45 16a3 3 0 013 3v16a3 3 0 01-3 3H9a3 3 0 01-3-3V19a3 3 0 013-3h36zm0 2H9a1 1 0 00-1 1v16a1 1 0 001 1h36a1 1 0 001-1V19a1 1 0 00-1-1z"
54059
- }), /*#__PURE__*/React.createElement("path", {
54060
- d: "M11 22a1 1 0 011-1h19a1 1 0 011 1v10a1 1 0 01-1 1H12a1 1 0 01-1-1V22z"
54061
- }));
54031
+ var SvgTaglist = function SvgTaglist(props) {
54032
+ return /*#__PURE__*/v$1("svg", _extends$9({
54033
+ xmlns: "http://www.w3.org/2000/svg",
54034
+ width: 54,
54035
+ height: 54,
54036
+ fill: "currentcolor"
54037
+ }, props), _path$8 || (_path$8 = /*#__PURE__*/v$1("path", {
54038
+ fillRule: "evenodd",
54039
+ d: "M45 16a3 3 0 0 1 3 3v16a3 3 0 0 1-3 3H9a3 3 0 0 1-3-3V19a3 3 0 0 1 3-3h36Zm0 2H9a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h36a1 1 0 0 0 1-1V19a1 1 0 0 0-1-1Z"
54040
+ })), _path2$1 || (_path2$1 = /*#__PURE__*/v$1("path", {
54041
+ d: "M11 22a1 1 0 0 1 1-1h19a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H12a1 1 0 0 1-1-1V22Z"
54042
+ })));
54043
+ };
54044
+ var TaglistIcon = SvgTaglist;
54045
+ var _rect, _rect2, _rect3;
54062
54046
  function _extends$8() {
54063
54047
  _extends$8 = Object.assign ? Object.assign.bind() : function (target) {
54064
54048
  for (var i = 1; i < arguments.length; i++) {
@@ -54073,32 +54057,33 @@
54073
54057
  };
54074
54058
  return _extends$8.apply(this, arguments);
54075
54059
  }
54076
- var FormIcon = ({
54077
- styles = {},
54078
- ...props
54079
- }) => /*#__PURE__*/React.createElement("svg", _extends$8({
54080
- xmlns: "http://www.w3.org/2000/svg",
54081
- width: "54",
54082
- height: "54"
54083
- }, props), /*#__PURE__*/React.createElement("rect", {
54084
- width: "24",
54085
- height: "4",
54086
- x: "15",
54087
- y: "17",
54088
- rx: "1"
54089
- }), /*#__PURE__*/React.createElement("rect", {
54090
- width: "24",
54091
- height: "4",
54092
- x: "15",
54093
- y: "25",
54094
- rx: "1"
54095
- }), /*#__PURE__*/React.createElement("rect", {
54096
- width: "13",
54097
- height: "4",
54098
- x: "15",
54099
- y: "33",
54100
- rx: "1"
54101
- }));
54060
+ var SvgForm = function SvgForm(props) {
54061
+ return /*#__PURE__*/v$1("svg", _extends$8({
54062
+ xmlns: "http://www.w3.org/2000/svg",
54063
+ width: 54,
54064
+ height: 54
54065
+ }, props), _rect || (_rect = /*#__PURE__*/v$1("rect", {
54066
+ width: 24,
54067
+ height: 4,
54068
+ x: 15,
54069
+ y: 17,
54070
+ rx: 1
54071
+ })), _rect2 || (_rect2 = /*#__PURE__*/v$1("rect", {
54072
+ width: 24,
54073
+ height: 4,
54074
+ x: 15,
54075
+ y: 25,
54076
+ rx: 1
54077
+ })), _rect3 || (_rect3 = /*#__PURE__*/v$1("rect", {
54078
+ width: 13,
54079
+ height: 4,
54080
+ x: 15,
54081
+ y: 33,
54082
+ rx: 1
54083
+ })));
54084
+ };
54085
+ var FormIcon = SvgForm;
54086
+ var _path$7;
54102
54087
  function _extends$7() {
54103
54088
  _extends$7 = Object.assign ? Object.assign.bind() : function (target) {
54104
54089
  for (var i = 1; i < arguments.length; i++) {
@@ -54113,17 +54098,18 @@
54113
54098
  };
54114
54099
  return _extends$7.apply(this, arguments);
54115
54100
  }
54116
- var ColumnsIcon = ({
54117
- styles = {},
54118
- ...props
54119
- }) => /*#__PURE__*/React.createElement("svg", _extends$7({
54120
- xmlns: "http://www.w3.org/2000/svg",
54121
- width: "54",
54122
- height: "54"
54123
- }, props), /*#__PURE__*/React.createElement("path", {
54124
- fillRule: "evenodd",
54125
- d: "M8 33v5a1 1 0 001 1h4v2H9a3 3 0 01-3-3v-5h2zm18 6v2H15v-2h11zm13 0v2H28v-2h11zm9-6v5a3 3 0 01-3 3h-4v-2h4a1 1 0 00.993-.883L46 38v-5h2zM8 22v9H6v-9h2zm40 0v9h-2v-9h2zm-35-9v2H9a1 1 0 00-.993.883L8 16v4H6v-4a3 3 0 013-3h4zm32 0a3 3 0 013 3v4h-2v-4a1 1 0 00-.883-.993L45 15h-4v-2h4zm-6 0v2H28v-2h11zm-13 0v2H15v-2h11z"
54126
- }));
54101
+ var SvgGroup = function SvgGroup(props) {
54102
+ return /*#__PURE__*/v$1("svg", _extends$7({
54103
+ xmlns: "http://www.w3.org/2000/svg",
54104
+ width: 54,
54105
+ height: 54
54106
+ }, props), _path$7 || (_path$7 = /*#__PURE__*/v$1("path", {
54107
+ fillRule: "evenodd",
54108
+ d: "M8 33v5a1 1 0 0 0 1 1h4v2H9a3 3 0 0 1-3-3v-5h2Zm18 6v2H15v-2h11Zm13 0v2H28v-2h11Zm9-6v5a3 3 0 0 1-3 3h-4v-2h4a1 1 0 0 0 .993-.883L46 38v-5h2ZM8 22v9H6v-9h2Zm40 0v9h-2v-9h2Zm-35-9v2H9a1 1 0 0 0-.993.883L8 16v4H6v-4a3 3 0 0 1 3-3h4Zm32 0a3 3 0 0 1 3 3v4h-2v-4a1 1 0 0 0-.883-.993L45 15h-4v-2h4Zm-6 0v2H28v-2h11Zm-13 0v2H15v-2h11Z"
54109
+ })));
54110
+ };
54111
+ var ColumnsIcon = SvgGroup;
54112
+ var _path$6;
54127
54113
  function _extends$6() {
54128
54114
  _extends$6 = Object.assign ? Object.assign.bind() : function (target) {
54129
54115
  for (var i = 1; i < arguments.length; i++) {
@@ -54138,18 +54124,19 @@
54138
54124
  };
54139
54125
  return _extends$6.apply(this, arguments);
54140
54126
  }
54141
- var NumberIcon = ({
54142
- styles = {},
54143
- ...props
54144
- }) => /*#__PURE__*/React.createElement("svg", _extends$6({
54145
- xmlns: "http://www.w3.org/2000/svg",
54146
- width: "54",
54147
- height: "54",
54148
- fill: "currentcolor"
54149
- }, props), /*#__PURE__*/React.createElement("path", {
54150
- fillRule: "evenodd",
54151
- d: "M45 16a3 3 0 013 3v16a3 3 0 01-3 3H9a3 3 0 01-3-3V19a3 3 0 013-3h36zm0 2H9a1 1 0 00-1 1v16a1 1 0 001 1h36a1 1 0 001-1V19a1 1 0 00-1-1zM35 28.444h7l-3.5 4-3.5-4zM35 26h7l-3.5-4-3.5 4z"
54152
- }));
54127
+ var SvgNumber = function SvgNumber(props) {
54128
+ return /*#__PURE__*/v$1("svg", _extends$6({
54129
+ xmlns: "http://www.w3.org/2000/svg",
54130
+ width: 54,
54131
+ height: 54,
54132
+ fill: "currentcolor"
54133
+ }, props), _path$6 || (_path$6 = /*#__PURE__*/v$1("path", {
54134
+ fillRule: "evenodd",
54135
+ d: "M45 16a3 3 0 0 1 3 3v16a3 3 0 0 1-3 3H9a3 3 0 0 1-3-3V19a3 3 0 0 1 3-3h36zm0 2H9a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h36a1 1 0 0 0 1-1V19a1 1 0 0 0-1-1zM35 28.444h7l-3.5 4-3.5-4zM35 26h7l-3.5-4-3.5 4z"
54136
+ })));
54137
+ };
54138
+ var NumberIcon = SvgNumber;
54139
+ var _path$5;
54153
54140
  function _extends$5() {
54154
54141
  _extends$5 = Object.assign ? Object.assign.bind() : function (target) {
54155
54142
  for (var i = 1; i < arguments.length; i++) {
@@ -54164,17 +54151,18 @@
54164
54151
  };
54165
54152
  return _extends$5.apply(this, arguments);
54166
54153
  }
54167
- var RadioIcon = ({
54168
- styles = {},
54169
- ...props
54170
- }) => /*#__PURE__*/React.createElement("svg", _extends$5({
54171
- xmlns: "http://www.w3.org/2000/svg",
54172
- width: "54",
54173
- height: "54",
54174
- fill: "currentcolor"
54175
- }, props), /*#__PURE__*/React.createElement("path", {
54176
- d: "M27 22c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5c-5.52 0-10 4.48-10 10s4.48 10 10 10 10-4.48 10-10-4.48-10-10-10zm0 18a8 8 0 110-16 8 8 0 110 16z"
54177
- }));
54154
+ var SvgRadio = function SvgRadio(props) {
54155
+ return /*#__PURE__*/v$1("svg", _extends$5({
54156
+ xmlns: "http://www.w3.org/2000/svg",
54157
+ width: 54,
54158
+ height: 54,
54159
+ fill: "currentcolor"
54160
+ }, props), _path$5 || (_path$5 = /*#__PURE__*/v$1("path", {
54161
+ d: "M27 22c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5c-5.52 0-10 4.48-10 10s4.48 10 10 10 10-4.48 10-10-4.48-10-10-10zm0 18a8 8 0 1 1 0-16 8 8 0 1 1 0 16z"
54162
+ })));
54163
+ };
54164
+ var RadioIcon = SvgRadio;
54165
+ var _path$4;
54178
54166
  function _extends$4() {
54179
54167
  _extends$4 = Object.assign ? Object.assign.bind() : function (target) {
54180
54168
  for (var i = 1; i < arguments.length; i++) {
@@ -54189,18 +54177,19 @@
54189
54177
  };
54190
54178
  return _extends$4.apply(this, arguments);
54191
54179
  }
54192
- var SelectIcon = ({
54193
- styles = {},
54194
- ...props
54195
- }) => /*#__PURE__*/React.createElement("svg", _extends$4({
54196
- xmlns: "http://www.w3.org/2000/svg",
54197
- width: "54",
54198
- height: "54",
54199
- fill: "currentcolor"
54200
- }, props), /*#__PURE__*/React.createElement("path", {
54201
- fillRule: "evenodd",
54202
- d: "M45 16a3 3 0 013 3v16a3 3 0 01-3 3H9a3 3 0 01-3-3V19a3 3 0 013-3h36zm0 2H9a1 1 0 00-1 1v16a1 1 0 001 1h36a1 1 0 001-1V19a1 1 0 00-1-1zm-12 7h9l-4.5 6-4.5-6z"
54203
- }));
54180
+ var SvgSelect = function SvgSelect(props) {
54181
+ return /*#__PURE__*/v$1("svg", _extends$4({
54182
+ xmlns: "http://www.w3.org/2000/svg",
54183
+ width: 54,
54184
+ height: 54,
54185
+ fill: "currentcolor"
54186
+ }, props), _path$4 || (_path$4 = /*#__PURE__*/v$1("path", {
54187
+ fillRule: "evenodd",
54188
+ d: "M45 16a3 3 0 0 1 3 3v16a3 3 0 0 1-3 3H9a3 3 0 0 1-3-3V19a3 3 0 0 1 3-3h36zm0 2H9a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h36a1 1 0 0 0 1-1V19a1 1 0 0 0-1-1zm-12 7h9l-4.5 6-4.5-6z"
54189
+ })));
54190
+ };
54191
+ var SelectIcon = SvgSelect;
54192
+ var _path$3$1;
54204
54193
  function _extends$3$1() {
54205
54194
  _extends$3$1 = Object.assign ? Object.assign.bind() : function (target) {
54206
54195
  for (var i = 1; i < arguments.length; i++) {
@@ -54215,17 +54204,18 @@
54215
54204
  };
54216
54205
  return _extends$3$1.apply(this, arguments);
54217
54206
  }
54218
- var TextIcon = ({
54219
- styles = {},
54220
- ...props
54221
- }) => /*#__PURE__*/React.createElement("svg", _extends$3$1({
54222
- xmlns: "http://www.w3.org/2000/svg",
54223
- width: "54",
54224
- height: "54",
54225
- fill: "currentcolor"
54226
- }, props), /*#__PURE__*/React.createElement("path", {
54227
- d: "M20.58 33.77h-3l-1.18-3.08H11l-1.1 3.08H7l5.27-13.54h2.89zm-5-5.36l-1.86-5-1.83 5zM22 20.23h5.41a15.47 15.47 0 012.4.14 3.42 3.42 0 011.41.55 3.47 3.47 0 011 1.14 3 3 0 01.42 1.58 3.26 3.26 0 01-1.91 2.94 3.63 3.63 0 011.91 1.22 3.28 3.28 0 01.66 2 4 4 0 01-.43 1.8 3.63 3.63 0 01-1.09 1.4 3.89 3.89 0 01-1.83.65q-.69.07-3.3.09H22zm2.73 2.25v3.13h3.8a1.79 1.79 0 001.1-.49 1.41 1.41 0 00.41-1 1.49 1.49 0 00-.35-1 1.54 1.54 0 00-1-.48c-.27 0-1.05-.05-2.34-.05zm0 5.39v3.62h2.57a11.52 11.52 0 001.88-.09 1.65 1.65 0 001-.54 1.6 1.6 0 00.38-1.14 1.75 1.75 0 00-.29-1 1.69 1.69 0 00-.86-.62 9.28 9.28 0 00-2.41-.23zm19.62.92l2.65.84a5.94 5.94 0 01-2 3.29A5.74 5.74 0 0141.38 34a5.87 5.87 0 01-4.44-1.84 7.09 7.09 0 01-1.73-5A7.43 7.43 0 0137 21.87 6 6 0 0141.54 20a5.64 5.64 0 014 1.47A5.33 5.33 0 0147 24l-2.7.65a2.8 2.8 0 00-2.86-2.27A3.09 3.09 0 0039 23.42a5.31 5.31 0 00-.93 3.5 5.62 5.62 0 00.93 3.65 3 3 0 002.4 1.09 2.72 2.72 0 001.82-.66 4 4 0 001.13-2.21z"
54228
- }));
54207
+ var SvgText = function SvgText(props) {
54208
+ return /*#__PURE__*/v$1("svg", _extends$3$1({
54209
+ xmlns: "http://www.w3.org/2000/svg",
54210
+ width: 54,
54211
+ height: 54,
54212
+ fill: "currentcolor"
54213
+ }, props), _path$3$1 || (_path$3$1 = /*#__PURE__*/v$1("path", {
54214
+ d: "M20.58 33.77h-3l-1.18-3.08H11l-1.1 3.08H7l5.27-13.54h2.89zm-5-5.36-1.86-5-1.83 5zM22 20.23h5.41a15.47 15.47 0 0 1 2.4.14 3.42 3.42 0 0 1 1.41.55 3.47 3.47 0 0 1 1 1.14 3 3 0 0 1 .42 1.58 3.26 3.26 0 0 1-1.91 2.94 3.63 3.63 0 0 1 1.91 1.22 3.28 3.28 0 0 1 .66 2 4 4 0 0 1-.43 1.8 3.63 3.63 0 0 1-1.09 1.4 3.89 3.89 0 0 1-1.83.65q-.69.07-3.3.09H22zm2.73 2.25v3.13h3.8a1.79 1.79 0 0 0 1.1-.49 1.41 1.41 0 0 0 .41-1 1.49 1.49 0 0 0-.35-1 1.54 1.54 0 0 0-1-.48c-.27 0-1.05-.05-2.34-.05zm0 5.39v3.62h2.57a11.52 11.52 0 0 0 1.88-.09 1.65 1.65 0 0 0 1-.54 1.6 1.6 0 0 0 .38-1.14 1.75 1.75 0 0 0-.29-1 1.69 1.69 0 0 0-.86-.62 9.28 9.28 0 0 0-2.41-.23zm19.62.92 2.65.84a5.94 5.94 0 0 1-2 3.29A5.74 5.74 0 0 1 41.38 34a5.87 5.87 0 0 1-4.44-1.84 7.09 7.09 0 0 1-1.73-5A7.43 7.43 0 0 1 37 21.87 6 6 0 0 1 41.54 20a5.64 5.64 0 0 1 4 1.47A5.33 5.33 0 0 1 47 24l-2.7.65a2.8 2.8 0 0 0-2.86-2.27A3.09 3.09 0 0 0 39 23.42a5.31 5.31 0 0 0-.93 3.5 5.62 5.62 0 0 0 .93 3.65 3 3 0 0 0 2.4 1.09 2.72 2.72 0 0 0 1.82-.66 4 4 0 0 0 1.13-2.21z"
54215
+ })));
54216
+ };
54217
+ var TextIcon = SvgText;
54218
+ var _path$2$1;
54229
54219
  function _extends$2$1() {
54230
54220
  _extends$2$1 = Object.assign ? Object.assign.bind() : function (target) {
54231
54221
  for (var i = 1; i < arguments.length; i++) {
@@ -54240,18 +54230,19 @@
54240
54230
  };
54241
54231
  return _extends$2$1.apply(this, arguments);
54242
54232
  }
54243
- var TextfieldIcon = ({
54244
- styles = {},
54245
- ...props
54246
- }) => /*#__PURE__*/React.createElement("svg", _extends$2$1({
54247
- xmlns: "http://www.w3.org/2000/svg",
54248
- width: "54",
54249
- height: "54",
54250
- fill: "currentcolor"
54251
- }, props), /*#__PURE__*/React.createElement("path", {
54252
- fillRule: "evenodd",
54253
- d: "M45 16a3 3 0 013 3v16a3 3 0 01-3 3H9a3 3 0 01-3-3V19a3 3 0 013-3h36zm0 2H9a1 1 0 00-1 1v16a1 1 0 001 1h36a1 1 0 001-1V19a1 1 0 00-1-1zm-32 4v10h-2V22h2z"
54254
- }));
54233
+ var SvgTextfield = function SvgTextfield(props) {
54234
+ return /*#__PURE__*/v$1("svg", _extends$2$1({
54235
+ xmlns: "http://www.w3.org/2000/svg",
54236
+ width: 54,
54237
+ height: 54,
54238
+ fill: "currentcolor"
54239
+ }, props), _path$2$1 || (_path$2$1 = /*#__PURE__*/v$1("path", {
54240
+ fillRule: "evenodd",
54241
+ d: "M45 16a3 3 0 0 1 3 3v16a3 3 0 0 1-3 3H9a3 3 0 0 1-3-3V19a3 3 0 0 1 3-3h36zm0 2H9a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h36a1 1 0 0 0 1-1V19a1 1 0 0 0-1-1zm-32 4v10h-2V22h2z"
54242
+ })));
54243
+ };
54244
+ var TextfieldIcon = SvgTextfield;
54245
+ var _path$1$1;
54255
54246
  function _extends$1$1() {
54256
54247
  _extends$1$1 = Object.assign ? Object.assign.bind() : function (target) {
54257
54248
  for (var i = 1; i < arguments.length; i++) {
@@ -54266,18 +54257,19 @@
54266
54257
  };
54267
54258
  return _extends$1$1.apply(this, arguments);
54268
54259
  }
54269
- var TextareaIcon = ({
54270
- styles = {},
54271
- ...props
54272
- }) => /*#__PURE__*/React.createElement("svg", _extends$1$1({
54273
- xmlns: "http://www.w3.org/2000/svg",
54274
- width: "54",
54275
- height: "54",
54276
- fill: "currentcolor"
54277
- }, props), /*#__PURE__*/React.createElement("path", {
54278
- fillRule: "evenodd",
54279
- d: "M45 13a3 3 0 013 3v22a3 3 0 01-3 3H9a3 3 0 01-3-3V16a3 3 0 013-3h36zm0 2H9a1 1 0 00-1 1v22a1 1 0 001 1h36a1 1 0 001-1V16a1 1 0 00-1-1zm-1.136 15.5l.849.849-6.364 6.364-.849-.849 6.364-6.364zm.264 3.5l.849.849-2.828 2.828-.849-.849L44.128 34zM13 19v10h-2V19h2z"
54280
- }));
54260
+ var SvgTextarea = function SvgTextarea(props) {
54261
+ return /*#__PURE__*/v$1("svg", _extends$1$1({
54262
+ xmlns: "http://www.w3.org/2000/svg",
54263
+ width: 54,
54264
+ height: 54,
54265
+ fill: "currentcolor"
54266
+ }, props), _path$1$1 || (_path$1$1 = /*#__PURE__*/v$1("path", {
54267
+ fillRule: "evenodd",
54268
+ d: "M45 13a3 3 0 0 1 3 3v22a3 3 0 0 1-3 3H9a3 3 0 0 1-3-3V16a3 3 0 0 1 3-3h36zm0 2H9a1 1 0 0 0-1 1v22a1 1 0 0 0 1 1h36a1 1 0 0 0 1-1V16a1 1 0 0 0-1-1zm-1.136 15.5.849.849-6.364 6.364-.849-.849 6.364-6.364zm.264 3.5.849.849-2.828 2.828-.849-.849L44.128 34zM13 19v10h-2V19h2z"
54269
+ })));
54270
+ };
54271
+ var TextareaIcon = SvgTextarea;
54272
+ var _path$h, _path2$4;
54281
54273
  function _extends$k() {
54282
54274
  _extends$k = Object.assign ? Object.assign.bind() : function (target) {
54283
54275
  for (var i = 1; i < arguments.length; i++) {
@@ -54292,23 +54284,23 @@
54292
54284
  };
54293
54285
  return _extends$k.apply(this, arguments);
54294
54286
  }
54295
- var ImageIcon = ({
54296
- styles = {},
54297
- ...props
54298
- }) => /*#__PURE__*/React.createElement("svg", _extends$k({
54299
- xmlns: "http://www.w3.org/2000/svg",
54300
- width: "54",
54301
- height: "54",
54302
- fill: "currentcolor"
54303
- }, props), /*#__PURE__*/React.createElement("path", {
54304
- fillRule: "evenodd",
54305
- d: "M34.636 21.91A3.818 3.818 0 1127 21.908a3.818 3.818 0 017.636 0zm-2 0A1.818 1.818 0 1129 21.908a1.818 1.818 0 013.636 0z",
54306
- clipRule: "evenodd"
54307
- }), /*#__PURE__*/React.createElement("path", {
54308
- fillRule: "evenodd",
54309
- d: "M15 13a2 2 0 00-2 2v24a2 2 0 002 2h24a2 2 0 002-2V15a2 2 0 00-2-2H15zm24 2H15v12.45l4.71-4.709a1.91 1.91 0 012.702 0l6.695 6.695 2.656-1.77a1.91 1.91 0 012.411.239L39 32.73V15zM15 39v-8.754a.975.975 0 00.168-.135l5.893-5.893 6.684 6.685a1.911 1.911 0 002.41.238l2.657-1.77 6.02 6.02c.052.051.108.097.168.135V39H15z",
54310
- clipRule: "evenodd"
54311
- }));
54287
+ var SvgImage = function SvgImage(props) {
54288
+ return /*#__PURE__*/v$1("svg", _extends$k({
54289
+ xmlns: "http://www.w3.org/2000/svg",
54290
+ width: 54,
54291
+ height: 54,
54292
+ fill: "currentcolor"
54293
+ }, props), _path$h || (_path$h = /*#__PURE__*/v$1("path", {
54294
+ fillRule: "evenodd",
54295
+ d: "M34.636 21.91A3.818 3.818 0 1 1 27 21.908a3.818 3.818 0 0 1 7.636 0Zm-2 0A1.818 1.818 0 1 1 29 21.908a1.818 1.818 0 0 1 3.636 0Z",
54296
+ clipRule: "evenodd"
54297
+ })), _path2$4 || (_path2$4 = /*#__PURE__*/v$1("path", {
54298
+ fillRule: "evenodd",
54299
+ d: "M15 13a2 2 0 0 0-2 2v24a2 2 0 0 0 2 2h24a2 2 0 0 0 2-2V15a2 2 0 0 0-2-2H15Zm24 2H15v12.45l4.71-4.709a1.91 1.91 0 0 1 2.702 0l6.695 6.695 2.656-1.77a1.91 1.91 0 0 1 2.411.239L39 32.73V15ZM15 39v-8.754a.975.975 0 0 0 .168-.135l5.893-5.893 6.684 6.685a1.911 1.911 0 0 0 2.41.238l2.657-1.77 6.02 6.02c.052.051.108.097.168.135V39H15Z",
54300
+ clipRule: "evenodd"
54301
+ })));
54302
+ };
54303
+ var ImageIcon = SvgImage;
54312
54304
  const iconsByType = type => {
54313
54305
  return {
54314
54306
  button: ButtonIcon,
@@ -59025,9 +59017,10 @@
59025
59017
  function useService$1(type, strict) {
59026
59018
  const {
59027
59019
  getService
59028
- } = F$1(FormEditorContext$1);
59020
+ } = F(FormEditorContext$1);
59029
59021
  return getService(type, strict);
59030
59022
  }
59023
+ var _path$3;
59031
59024
  function _extends$3() {
59032
59025
  _extends$3 = Object.assign ? Object.assign.bind() : function (target) {
59033
59026
  for (var i = 1; i < arguments.length; i++) {
@@ -59042,19 +59035,20 @@
59042
59035
  };
59043
59036
  return _extends$3.apply(this, arguments);
59044
59037
  }
59045
- var CloseIcon = ({
59046
- styles = {},
59047
- ...props
59048
- }) => /*#__PURE__*/React.createElement("svg", _extends$3({
59049
- width: "16",
59050
- height: "16",
59051
- fill: "currentColor",
59052
- xmlns: "http://www.w3.org/2000/svg"
59053
- }, props), /*#__PURE__*/React.createElement("path", {
59054
- fillRule: "evenodd",
59055
- clipRule: "evenodd",
59056
- d: "M12 4.7l-.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"
59057
- }));
59038
+ var SvgClose = function SvgClose(props) {
59039
+ return /*#__PURE__*/v$1("svg", _extends$3({
59040
+ xmlns: "http://www.w3.org/2000/svg",
59041
+ width: 16,
59042
+ height: 16,
59043
+ fill: "currentColor"
59044
+ }, props), _path$3 || (_path$3 = /*#__PURE__*/v$1("path", {
59045
+ fillRule: "evenodd",
59046
+ 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",
59047
+ clipRule: "evenodd"
59048
+ })));
59049
+ };
59050
+ var CloseIcon = SvgClose;
59051
+ var _path$2, _path2;
59058
59052
  function _extends$2() {
59059
59053
  _extends$2 = Object.assign ? Object.assign.bind() : function (target) {
59060
59054
  for (var i = 1; i < arguments.length; i++) {
@@ -59069,36 +59063,38 @@
59069
59063
  };
59070
59064
  return _extends$2.apply(this, arguments);
59071
59065
  }
59072
- var DeleteIcon$1 = ({
59073
- styles = {},
59074
- ...props
59075
- }) => /*#__PURE__*/React.createElement("svg", _extends$2({
59076
- xmlns: "http://www.w3.org/2000/svg",
59077
- width: "16",
59078
- height: "16",
59079
- fill: "none"
59080
- }, props), /*#__PURE__*/React.createElement("rect", {
59081
- width: "16",
59082
- height: "16",
59083
- x: ".536",
59084
- fill: "#fff",
59085
- rx: "3",
59086
- style: {
59087
- mixBlendMode: "multiply"
59088
- }
59089
- }), /*#__PURE__*/React.createElement("path", {
59090
- fill: "#fff",
59091
- d: "M.536 0h16v16h-16z",
59092
- style: {
59093
- mixBlendMode: "multiply"
59094
- }
59095
- }), /*#__PURE__*/React.createElement("path", {
59096
- fill: "currentcolor",
59097
- d: "M7.536 6h-1v6h1V6zm3 0h-1v6h1V6z"
59098
- }), /*#__PURE__*/React.createElement("path", {
59099
- fill: "currentcolor",
59100
- d: "M2.536 3v1h1v10a1 1 0 001 1h8a1 1 0 001-1V4h1V3h-12zm2 11V4h8v10h-8zm6-13h-4v1h4V1z"
59101
- }));
59066
+ var SvgDelete = function SvgDelete(props) {
59067
+ return /*#__PURE__*/v$1("svg", _extends$2({
59068
+ xmlns: "http://www.w3.org/2000/svg",
59069
+ width: 16,
59070
+ height: 16,
59071
+ fill: "none"
59072
+ }, props), /*#__PURE__*/v$1("rect", {
59073
+ width: 16,
59074
+ height: 16,
59075
+ x: 0.536,
59076
+ fill: "#fff",
59077
+ rx: 3,
59078
+ style: {
59079
+ mixBlendMode: "multiply"
59080
+ }
59081
+ }), /*#__PURE__*/v$1("path", {
59082
+ fill: "#fff",
59083
+ d: "M0 0h16v16H0z",
59084
+ style: {
59085
+ mixBlendMode: "multiply"
59086
+ },
59087
+ transform: "translate(.536)"
59088
+ }), _path$2 || (_path$2 = /*#__PURE__*/v$1("path", {
59089
+ fill: "currentcolor",
59090
+ d: "M7.536 6h-1v6h1V6Zm3 0h-1v6h1V6Z"
59091
+ })), _path2 || (_path2 = /*#__PURE__*/v$1("path", {
59092
+ fill: "currentcolor",
59093
+ d: "M2.536 3v1h1v10a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4h1V3h-12Zm2 11V4h8v10h-8Zm6-13h-4v1h4V1Z"
59094
+ })));
59095
+ };
59096
+ var DeleteIcon$1 = SvgDelete;
59097
+ var _path$1;
59102
59098
  function _extends$1() {
59103
59099
  _extends$1 = Object.assign ? Object.assign.bind() : function (target) {
59104
59100
  for (var i = 1; i < arguments.length; i++) {
@@ -59113,21 +59109,25 @@
59113
59109
  };
59114
59110
  return _extends$1.apply(this, arguments);
59115
59111
  }
59116
- var DraggableIcon = ({
59117
- styles = {},
59118
- ...props
59119
- }) => /*#__PURE__*/React.createElement("svg", _extends$1({
59120
- xmlns: "http://www.w3.org/2000/svg",
59121
- width: "16",
59122
- height: "16",
59123
- fill: "currentcolor",
59124
- viewBox: "0 0 32 32"
59125
- }, props), /*#__PURE__*/React.createElement("path", {
59126
- d: "M10 6h4v4h-4zm8 0h4v4h-4zm-8 8h4v4h-4zm8 0h4v4h-4zm-8 8h4v4h-4zm8 0h4v4h-4z"
59127
- }), /*#__PURE__*/React.createElement("path", {
59128
- d: "M0 0h32v32H0z",
59129
- fill: "none"
59130
- }));
59112
+ var SvgDraggable = function SvgDraggable(props) {
59113
+ return /*#__PURE__*/v$1("svg", _extends$1({
59114
+ xmlns: "http://www.w3.org/2000/svg",
59115
+ xmlSpace: "preserve",
59116
+ width: 16,
59117
+ height: 16,
59118
+ fill: "currentcolor",
59119
+ viewBox: "0 0 32 32"
59120
+ }, props), _path$1 || (_path$1 = /*#__PURE__*/v$1("path", {
59121
+ d: "M10 6h4v4h-4zm8 0h4v4h-4zm-8 8h4v4h-4zm8 0h4v4h-4zm-8 8h4v4h-4zm8 0h4v4h-4z"
59122
+ })), /*#__PURE__*/v$1("path", {
59123
+ d: "M0 0h32v32H0z",
59124
+ style: {
59125
+ fill: "none"
59126
+ }
59127
+ }));
59128
+ };
59129
+ var DraggableIcon = SvgDraggable;
59130
+ var _path;
59131
59131
  function _extends() {
59132
59132
  _extends = Object.assign ? Object.assign.bind() : function (target) {
59133
59133
  for (var i = 1; i < arguments.length; i++) {
@@ -59142,18 +59142,18 @@
59142
59142
  };
59143
59143
  return _extends.apply(this, arguments);
59144
59144
  }
59145
- var SearchIcon = ({
59146
- styles = {},
59147
- ...props
59148
- }) => /*#__PURE__*/React.createElement("svg", _extends({
59149
- width: "15",
59150
- height: "15",
59151
- fill: "none",
59152
- xmlns: "http://www.w3.org/2000/svg"
59153
- }, props), /*#__PURE__*/React.createElement("path", {
59154
- d: "M14.5 13.793l-3.776-3.776a5.508 5.508 0 10-.707.707l3.776 3.776.707-.707zM2 6.5a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0z",
59155
- fill: "currentColor"
59156
- }));
59145
+ var SvgSearch = function SvgSearch(props) {
59146
+ return /*#__PURE__*/v$1("svg", _extends({
59147
+ xmlns: "http://www.w3.org/2000/svg",
59148
+ width: 15,
59149
+ height: 15,
59150
+ fill: "none"
59151
+ }, props), _path || (_path = /*#__PURE__*/v$1("path", {
59152
+ fill: "currentColor",
59153
+ d: "m14.5 13.793-3.776-3.776a5.508 5.508 0 1 0-.707.707l3.776 3.776.707-.707ZM2 6.5a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0Z"
59154
+ })));
59155
+ };
59156
+ var SearchIcon = SvgSearch;
59157
59157
  function EditorText(props) {
59158
59158
  const {
59159
59159
  type,
@@ -59210,6 +59210,222 @@
59210
59210
  });
59211
59211
  }
59212
59212
  }
59213
+ var ModularSection = props => {
59214
+ const {
59215
+ rootClass,
59216
+ RootElement,
59217
+ section,
59218
+ children
59219
+ } = props;
59220
+ const eventBus = useService$1('eventBus');
59221
+ const sectionConfig = useService$1(`config.${section}`);
59222
+ const [parent, setParent] = l$2(sectionConfig && sectionConfig.parent || null);
59223
+ const [shouldRender, setShouldRender] = l$2(true);
59224
+ const ParentElement = d(() => {
59225
+ if (parent === null) {
59226
+ return null;
59227
+ }
59228
+ if (typeof parent === 'string') {
59229
+ const element = document.querySelector(parent);
59230
+ if (!element) {
59231
+ throw new Error(`Target root element with selector '${parent}' not found for section '${section}'`);
59232
+ }
59233
+ return document.querySelector(parent);
59234
+ }
59235
+
59236
+ // @ts-ignore
59237
+ if (!(parent instanceof Element)) {
59238
+ throw new Error(`Target root element for section '${section}' must be a valid selector or DOM element`);
59239
+ }
59240
+ return parent;
59241
+ }, [section, parent]);
59242
+ y(() => {
59243
+ const onAttach = ({
59244
+ container
59245
+ }) => {
59246
+ setParent(container);
59247
+ setShouldRender(true);
59248
+ };
59249
+ const onDetach = () => {
59250
+ setParent(null);
59251
+ setShouldRender(false);
59252
+ };
59253
+ const onReset = () => {
59254
+ setParent(null);
59255
+ setShouldRender(true);
59256
+ };
59257
+ eventBus.on(`${section}.attach`, onAttach);
59258
+ eventBus.on(`${section}.detach`, onDetach);
59259
+ eventBus.on(`${section}.reset`, onReset);
59260
+ eventBus.fire(`${section}.section.rendered`);
59261
+ return () => {
59262
+ eventBus.off(`${section}.attach`, onAttach);
59263
+ eventBus.off(`${section}.detach`, onDetach);
59264
+ eventBus.off(`${section}.reset`, onReset);
59265
+ eventBus.fire(`${section}.section.destroyed`);
59266
+ };
59267
+ }, [eventBus, section]);
59268
+ y(() => {
59269
+ if (shouldRender) {
59270
+ eventBus.fire(`${section}.rendered`, {
59271
+ element: ParentElement
59272
+ });
59273
+ return () => {
59274
+ eventBus.fire(`${section}.destroyed`, {
59275
+ element: ParentElement
59276
+ });
59277
+ };
59278
+ }
59279
+ }, [eventBus, section, shouldRender, ParentElement]);
59280
+ const Root = A$1(({
59281
+ children
59282
+ }) => RootElement ? e$1(RootElement, {
59283
+ children: children
59284
+ }) : e$1("div", {
59285
+ className: rootClass,
59286
+ children: children
59287
+ }), [rootClass, RootElement]);
59288
+ return shouldRender ? parent ? W(e$1(Root, {
59289
+ children: children
59290
+ }), ParentElement) : e$1(Root, {
59291
+ children: children
59292
+ }) : null;
59293
+ };
59294
+ const FillContext = D$1({
59295
+ addFill(uid, props) {
59296
+ throw new Error('FillContext.addFill() uninitialized');
59297
+ },
59298
+ removeFill(uid) {
59299
+ throw new Error('FillContext.addFill() uninitialized');
59300
+ }
59301
+ });
59302
+ var FillContext$1 = FillContext;
59303
+ var Fill = props => {
59304
+ const uid = s$1(Symbol('fill_uid'));
59305
+ const fillContext = F(FillContext$1);
59306
+ y(() => {
59307
+ if (!fillContext) {
59308
+ return;
59309
+ }
59310
+ fillContext.addFill({
59311
+ id: uid,
59312
+ ...props
59313
+ });
59314
+ return () => {
59315
+ fillContext.removeFill(uid);
59316
+ };
59317
+ }, [fillContext, props]);
59318
+ return null;
59319
+ };
59320
+ const SlotContext = D$1({
59321
+ fills: []
59322
+ });
59323
+ var SlotContext$1 = SlotContext;
59324
+ var Slot = props => {
59325
+ const {
59326
+ name,
59327
+ fillRoot = FillFragment,
59328
+ groupFn = _groupByGroupName,
59329
+ separatorFn = key => null,
59330
+ limit
59331
+ } = props;
59332
+ const {
59333
+ fills
59334
+ } = F(SlotContext$1);
59335
+ const filtered = d(() => fills.filter(fill => fill.slot === name), [fills, name]);
59336
+ const cropped = d(() => limit ? filtered.slice(0, limit) : filtered, [filtered, limit]);
59337
+ const groups = d(() => groupFn(cropped), [cropped, groupFn]);
59338
+ const fillsAndSeparators = d(() => {
59339
+ return buildFills(groups, fillRoot, separatorFn);
59340
+ }, [groups, fillRoot, separatorFn]);
59341
+ return fillsAndSeparators;
59342
+ };
59343
+
59344
+ /**
59345
+ * Creates a Fragment for a fill.
59346
+ *
59347
+ * @param {Object} fill Fill to be rendered
59348
+ * @returns {Object} Preact Fragment containing fill's children
59349
+ */
59350
+ const FillFragment = fill => e$1(d$1, {
59351
+ children: fill.children
59352
+ }, fill.id);
59353
+
59354
+ /**
59355
+ * Creates an array of fills, with separators inserted between groups.
59356
+ *
59357
+ * @param {Array} groups Groups of fills
59358
+ * @param {Function} fillRenderer Function to create a fill
59359
+ * @param {Function} separatorRenderer Function to create a separator
59360
+ * @returns {Array} Array of fills and separators
59361
+ */
59362
+ const buildFills = (groups, fillRenderer, separatorRenderer) => {
59363
+ const result = [];
59364
+ groups.forEach((array, idx) => {
59365
+ if (idx !== 0) {
59366
+ const separator = separatorRenderer(`__separator_${idx}`);
59367
+ if (separator) {
59368
+ result.push(separator);
59369
+ }
59370
+ }
59371
+ array.forEach(fill => {
59372
+ result.push(fillRenderer(fill));
59373
+ });
59374
+ });
59375
+ return result;
59376
+ };
59377
+
59378
+ /**
59379
+ * Groups fills by group name property.
59380
+ */
59381
+ const _groupByGroupName = fills => {
59382
+ const groups = [];
59383
+ const groupsById = {};
59384
+ fills.forEach(function (fill) {
59385
+ const {
59386
+ group: groupName = 'z_default'
59387
+ } = fill;
59388
+ let group = groupsById[groupName];
59389
+ if (!group) {
59390
+ groupsById[groupName] = group = [];
59391
+ groups.push(group);
59392
+ }
59393
+ group.push(fill);
59394
+ });
59395
+ groups.forEach(group => group.sort(_comparePriority));
59396
+ return Object.keys(groupsById).sort().map(id => groupsById[id]);
59397
+ };
59398
+
59399
+ /**
59400
+ * Compares fills by priority.
59401
+ */
59402
+ const _comparePriority = (a, b) => {
59403
+ return (b.priority || 0) - (a.priority || 0);
59404
+ };
59405
+ var SlotFillRoot = props => {
59406
+ const [fills, setFills] = l$2([]);
59407
+ const fillContext = d(() => ({
59408
+ addFill: fill => {
59409
+ setFills(fills => [...fills.filter(f => f.id !== fill.id), fill]);
59410
+ props.onSetFill && props.onSetFill(fill);
59411
+ },
59412
+ removeFill: id => {
59413
+ setFills(fills => fills.filter(f => f.id !== id));
59414
+ props.onRemoveFill && props.onRemoveFill(id);
59415
+ }
59416
+ }), []);
59417
+ const slotContext = d(() => ({
59418
+ fills
59419
+ }), [fills]);
59420
+ return e$1(SlotContext$1.Provider, {
59421
+ value: slotContext,
59422
+ children: e$1(FillContext$1.Provider, {
59423
+ /* @ts-expect-error */
59424
+ value: fillContext,
59425
+ children: props.children
59426
+ })
59427
+ });
59428
+ };
59213
59429
  const PALETTE_ENTRIES = formFields.filter(({
59214
59430
  config: fieldConfig
59215
59431
  }) => fieldConfig.type !== 'default').map(({
@@ -59327,9 +59543,19 @@
59327
59543
  class: "fjs-palette-no-entries",
59328
59544
  children: "No components found."
59329
59545
  })]
59546
+ }), e$1("div", {
59547
+ class: "fjs-palette-footer",
59548
+ children: e$1(Slot, {
59549
+ name: "editor-palette__footer",
59550
+ fillRoot: FillRoot
59551
+ })
59330
59552
  })]
59331
59553
  });
59332
59554
  }
59555
+ const FillRoot = fill => e$1("div", {
59556
+ className: "fjs-palette-footer-fill",
59557
+ children: fill.children
59558
+ });
59333
59559
 
59334
59560
  // helpers ///////
59335
59561
 
@@ -59355,6 +59581,24 @@
59355
59581
  }
59356
59582
  return 'a';
59357
59583
  }
59584
+ var InjectedRendersRoot = () => {
59585
+ const renderInjector = useService$1('renderInjector');
59586
+ const injectedRenderers = renderInjector.fetchRenderers();
59587
+ const injectedProps = d(() => ({
59588
+ useService: useService$1,
59589
+ components: {
59590
+ Fill,
59591
+ Slot
59592
+ }
59593
+ }), []);
59594
+ return e$1(d$1, {
59595
+ children: injectedRenderers.map(({
59596
+ Renderer
59597
+ }) => e$1(Renderer, {
59598
+ ...injectedProps
59599
+ }))
59600
+ });
59601
+ };
59358
59602
  const CURSOR_CLS_PATTERN = /^fjs-cursor-.*$/;
59359
59603
  function set(mode) {
59360
59604
  const classes$1 = classes(document.body);
@@ -59806,7 +60050,7 @@
59806
60050
  function Empty(props) {
59807
60051
  return null;
59808
60052
  }
59809
- function Element(props) {
60053
+ function Element$1(props) {
59810
60054
  const eventBus = useService$1('eventBus'),
59811
60055
  formEditor = useService$1('formEditor'),
59812
60056
  formFieldRegistry = useService$1('formFieldRegistry'),
@@ -59969,8 +60213,6 @@
59969
60213
  formEditor = useService$1('formEditor'),
59970
60214
  injector = useService$1('injector'),
59971
60215
  selection = useService$1('selection'),
59972
- palette = useService$1('palette'),
59973
- paletteConfig = useService$1('config.palette'),
59974
60216
  propertiesPanel = useService$1('propertiesPanel'),
59975
60217
  propertiesPanelConfig = useService$1('config.propertiesPanel');
59976
60218
  const {
@@ -59981,7 +60223,6 @@
59981
60223
  ariaLabel
59982
60224
  } = properties;
59983
60225
  const formContainerRef = s$1(null);
59984
- const paletteRef = s$1(null);
59985
60226
  const propertiesPanelRef = s$1(null);
59986
60227
  const [, setSelection] = l$2(schema);
59987
60228
  y(() => {
@@ -60042,7 +60283,7 @@
60042
60283
  eventBus.off('drag.start', onDragStart);
60043
60284
  eventBus.off('drag.end', onDragEnd);
60044
60285
  };
60045
- }, []);
60286
+ }, [dragging, eventBus]);
60046
60287
 
60047
60288
  // fire event after render to notify interested parties
60048
60289
  y(() => {
@@ -60051,7 +60292,7 @@
60051
60292
  const formRenderContext = {
60052
60293
  Children,
60053
60294
  Column,
60054
- Element,
60295
+ Element: Element$1,
60055
60296
  Empty,
60056
60297
  Row
60057
60298
  };
@@ -60080,14 +60321,6 @@
60080
60321
  const onSubmit = A$1(() => {}, []);
60081
60322
  const onReset = A$1(() => {}, []);
60082
60323
 
60083
- // attach default palette
60084
- const hasDefaultPalette = defaultPalette(paletteConfig);
60085
- y(() => {
60086
- if (hasDefaultPalette) {
60087
- palette.attachTo(paletteRef.current);
60088
- }
60089
- }, [palette, paletteRef, hasDefaultPalette]);
60090
-
60091
60324
  // attach default properties panel
60092
60325
  const hasDefaultPropertiesPanel = defaultPropertiesPanel(propertiesPanelConfig);
60093
60326
  y(() => {
@@ -60097,29 +60330,36 @@
60097
60330
  }, [propertiesPanelRef, propertiesPanel, hasDefaultPropertiesPanel]);
60098
60331
  return e$1("div", {
60099
60332
  class: "fjs-form-editor",
60100
- children: [e$1(DragAndDropContext$1.Provider, {
60101
- value: dragAndDropContext,
60102
- children: [hasDefaultPalette && e$1("div", {
60103
- class: "fjs-editor-palette-container",
60104
- ref: paletteRef
60105
- }), e$1("div", {
60106
- ref: formContainerRef,
60107
- class: "fjs-form-container",
60108
- children: e$1(FormContext$1.Provider, {
60109
- value: formContext,
60110
- children: e$1(FormRenderContext$1.Provider, {
60111
- value: formRenderContext,
60112
- children: e$1(FormComponent, {
60113
- onSubmit: onSubmit,
60114
- onReset: onReset
60333
+ children: e$1(SlotFillRoot, {
60334
+ children: [e$1(DragAndDropContext$1.Provider, {
60335
+ value: dragAndDropContext,
60336
+ children: [e$1(ModularSection, {
60337
+ rootClass: "fjs-palette-container",
60338
+ section: "palette",
60339
+ children: e$1(Palette, {})
60340
+ }), e$1("div", {
60341
+ ref: formContainerRef,
60342
+ class: "fjs-form-container",
60343
+ children: e$1(FormContext$1.Provider, {
60344
+ value: formContext,
60345
+ children: e$1(FormRenderContext$1.Provider, {
60346
+ value: formRenderContext,
60347
+ children: e$1(FormComponent, {
60348
+ onSubmit: onSubmit,
60349
+ onReset: onReset
60350
+ })
60115
60351
  })
60116
60352
  })
60117
- })
60118
- }), e$1(CreatePreview, {})]
60119
- }), hasDefaultPropertiesPanel && e$1("div", {
60120
- class: "fjs-editor-properties-container",
60121
- ref: propertiesPanelRef
60122
- })]
60353
+ }), e$1(CreatePreview, {})]
60354
+ }), hasDefaultPropertiesPanel && e$1("div", {
60355
+ class: "fjs-editor-properties-container",
60356
+ ref: propertiesPanelRef
60357
+ }), e$1(ModularSection, {
60358
+ rootClass: "fjs-render-injector-container",
60359
+ section: "renderInjector",
60360
+ children: e$1(InjectedRendersRoot, {})
60361
+ })]
60362
+ })
60123
60363
  });
60124
60364
  }
60125
60365
  function getFormFieldIndex(parent, formField) {
@@ -60136,7 +60376,7 @@
60136
60376
  function CreatePreview(props) {
60137
60377
  const {
60138
60378
  drake
60139
- } = F$1(DragAndDropContext$1);
60379
+ } = F(DragAndDropContext$1);
60140
60380
  function handleCloned(clone, original, type) {
60141
60381
  const fieldType = clone.dataset.fieldType;
60142
60382
 
@@ -60186,15 +60426,12 @@
60186
60426
 
60187
60427
  // helper //////
60188
60428
 
60189
- function defaultPalette(paletteConfig) {
60190
- return !(paletteConfig && paletteConfig.parent);
60429
+ function findPaletteEntry(type) {
60430
+ return PALETTE_ENTRIES.find(entry => entry.type === type);
60191
60431
  }
60192
60432
  function defaultPropertiesPanel(propertiesPanelConfig) {
60193
60433
  return !(propertiesPanelConfig && propertiesPanelConfig.parent);
60194
60434
  }
60195
- function findPaletteEntry(type) {
60196
- return PALETTE_ENTRIES.find(entry => entry.type === type);
60197
- }
60198
60435
  class Renderer {
60199
60436
  constructor(renderConfig, eventBus, formEditor, injector) {
60200
60437
  const {
@@ -62308,68 +62545,79 @@
62308
62545
  selection: ['type', Selection],
62309
62546
  selectionBehavior: ['type', SelectionBehavior]
62310
62547
  };
62311
- class PaletteRenderer {
62312
- constructor(paletteConfig, eventBus) {
62313
- const {
62314
- parent
62315
- } = paletteConfig || {};
62548
+
62549
+ /**
62550
+ * Base class for sectionable UI modules.
62551
+ *
62552
+ * @property {EventBus} _eventBus - EventBus instance used for event handling.
62553
+ * @property {string} managerType - Type of the render manager. Used to form event names.
62554
+ *
62555
+ * @class SectionModuleBase
62556
+ */
62557
+ class SectionModuleBase {
62558
+ /**
62559
+ * Create a SectionModuleBase instance.
62560
+ *
62561
+ * @param {any} eventBus - The EventBus instance used for event handling.
62562
+ * @param {string} sectionKey - The type of render manager. Used to form event names.
62563
+ *
62564
+ * @constructor
62565
+ */
62566
+ constructor(eventBus, sectionKey) {
62316
62567
  this._eventBus = eventBus;
62317
- this._container = domify$1$1('<div class="fjs-palette-container"></div>');
62318
- if (parent) {
62319
- this.attachTo(parent);
62320
- }
62321
- this._eventBus.once('formEditor.rendered', 500, () => {
62322
- this._render();
62568
+ this._sectionKey = sectionKey;
62569
+ this._eventBus.on(`${this._sectionKey}.section.rendered`, () => {
62570
+ this.isSectionRendered = true;
62571
+ });
62572
+ this._eventBus.on(`${this._sectionKey}.section.destroyed`, () => {
62573
+ this.isSectionRendered = false;
62323
62574
  });
62324
62575
  }
62325
62576
 
62326
62577
  /**
62327
- * Attach the palette to a parent node.
62578
+ * Attach the managed section to a parent node.
62328
62579
  *
62329
- * @param {HTMLElement} container
62580
+ * @param {HTMLElement} container - The parent node to attach to.
62330
62581
  */
62331
62582
  attachTo(container) {
62332
- if (!container) {
62333
- throw new Error('container required');
62334
- }
62335
- if (typeof container === 'string') {
62336
- container = query(container);
62337
- }
62338
-
62339
- // (1) detach from old parent
62340
- this.detach();
62341
-
62342
- // (2) append to parent container
62343
- container.appendChild(this._container);
62344
-
62345
- // (3) notify interested parties
62346
- this._eventBus.fire('palette.attach');
62583
+ this._onceSectionRendered(() => this._eventBus.fire(`${this._sectionKey}.attach`, {
62584
+ container
62585
+ }));
62347
62586
  }
62348
62587
 
62349
62588
  /**
62350
- * Detach the palette from its parent node.
62589
+ * Detach the managed section from its parent node.
62351
62590
  */
62352
62591
  detach() {
62353
- const parentNode = this._container.parentNode;
62354
- if (parentNode) {
62355
- parentNode.removeChild(this._container);
62356
- this._eventBus.fire('palette.detach');
62357
- }
62592
+ this._onceSectionRendered(() => this._eventBus.fire(`${this._sectionKey}.detach`));
62358
62593
  }
62359
- _render() {
62360
- S$1(e$1(Palette, {}), this._container);
62361
- this._eventBus.fire('palette.rendered');
62594
+
62595
+ /**
62596
+ * Reset the managed section to its initial state.
62597
+ */
62598
+ reset() {
62599
+ this._onceSectionRendered(() => this._eventBus.fire(`${this._sectionKey}.reset`));
62362
62600
  }
62363
- _destroy() {
62364
- if (this._container) {
62365
- S$1(null, this._container);
62366
- this._eventBus.fire('palette.destroyed');
62601
+
62602
+ /**
62603
+ * Circumvents timing issues.
62604
+ */
62605
+ _onceSectionRendered(callback) {
62606
+ if (this.isSectionRendered) {
62607
+ callback();
62608
+ } else {
62609
+ this._eventBus.once(`${this._sectionKey}.section.rendered`, callback);
62367
62610
  }
62368
62611
  }
62369
62612
  }
62370
- PaletteRenderer.$inject = ['config.palette', 'eventBus'];
62613
+ let PaletteModule$1 = class PaletteModule extends SectionModuleBase {
62614
+ constructor(eventBus) {
62615
+ super(eventBus, 'palette');
62616
+ }
62617
+ };
62618
+ PaletteModule$1.$inject = ['eventBus'];
62371
62619
  var PaletteModule = {
62372
- palette: ['type', PaletteRenderer]
62620
+ palette: ['type', PaletteModule$1]
62373
62621
  };
62374
62622
  var ArrowIcon = function ArrowIcon(props) {
62375
62623
  return e$1("svg", {
@@ -62543,13 +62791,13 @@
62543
62791
  function useDescriptionContext(id, element) {
62544
62792
  const {
62545
62793
  getDescriptionForId
62546
- } = F$1(DescriptionContext);
62794
+ } = F(DescriptionContext);
62547
62795
  return getDescriptionForId(id, element);
62548
62796
  }
62549
62797
  function useError(id) {
62550
62798
  const {
62551
62799
  errors
62552
- } = F$1(ErrorsContext);
62800
+ } = F(ErrorsContext);
62553
62801
  return errors[id];
62554
62802
  }
62555
62803
 
@@ -62560,7 +62808,7 @@
62560
62808
  * @param {Function} callback
62561
62809
  */
62562
62810
  function useEvent(event, callback, eventBus) {
62563
- const eventContext = F$1(EventContext);
62811
+ const eventContext = F(EventContext);
62564
62812
  if (!eventBus) {
62565
62813
  ({
62566
62814
  eventBus
@@ -62606,7 +62854,7 @@
62606
62854
  const {
62607
62855
  getLayoutForKey,
62608
62856
  setLayoutForKey
62609
- } = F$1(LayoutContext);
62857
+ } = F(LayoutContext);
62610
62858
  const layoutForKey = getLayoutForKey(path, defaultValue);
62611
62859
  const setState = A$1(newValue => {
62612
62860
  setLayoutForKey(path, newValue);
@@ -62639,7 +62887,7 @@
62639
62887
  function useShowEntryEvent(id) {
62640
62888
  const {
62641
62889
  onShow
62642
- } = F$1(LayoutContext);
62890
+ } = F(LayoutContext);
62643
62891
  const ref = s$1();
62644
62892
  const focus = s$1(false);
62645
62893
  const onShowEntry = A$1(event => {
@@ -62786,7 +63034,7 @@
62786
63034
  // set css class when group is sticky to top
62787
63035
  useStickyIntersectionObserver(groupRef, 'div.bio-properties-panel-scroll-container', setSticky);
62788
63036
  const propertiesPanelContext = {
62789
- ...F$1(LayoutContext),
63037
+ ...F(LayoutContext),
62790
63038
  onShow
62791
63039
  };
62792
63040
  return e$1("div", {
@@ -63098,9 +63346,9 @@
63098
63346
  const toggleOpen = () => setOpen(!open);
63099
63347
  const {
63100
63348
  onShow
63101
- } = F$1(LayoutContext);
63349
+ } = F(LayoutContext);
63102
63350
  const propertiesPanelContext = {
63103
- ...F$1(LayoutContext),
63351
+ ...F(LayoutContext),
63104
63352
  onShow: A$1(() => {
63105
63353
  setOpen(true);
63106
63354
  if (isFunction(onShow)) {
@@ -63289,7 +63537,7 @@
63289
63537
  const toggleOpen = () => setOpen(!open);
63290
63538
  const hasItems = !!items.length;
63291
63539
  const propertiesPanelContext = {
63292
- ...F$1(LayoutContext),
63540
+ ...F(LayoutContext),
63293
63541
  onShow
63294
63542
  };
63295
63543
  const handleAddClick = e => {
@@ -63832,6 +64080,165 @@
63832
64080
  function prefixId$6(id) {
63833
64081
  return `bio-properties-panel-${id}`;
63834
64082
  }
64083
+ function NumberField(props) {
64084
+ const {
64085
+ debounce,
64086
+ disabled,
64087
+ displayLabel = true,
64088
+ id,
64089
+ inputRef,
64090
+ label,
64091
+ max,
64092
+ min,
64093
+ onInput,
64094
+ step,
64095
+ value = '',
64096
+ onFocus,
64097
+ onBlur
64098
+ } = props;
64099
+ const [localValue, setLocalValue] = l$2(value);
64100
+ const handleInputCallback = d(() => {
64101
+ return debounce(event => {
64102
+ const {
64103
+ validity,
64104
+ value
64105
+ } = event.target;
64106
+ if (validity.valid) {
64107
+ onInput(value ? parseFloat(value) : undefined);
64108
+ }
64109
+ });
64110
+ }, [onInput, debounce]);
64111
+ const handleInput = e => {
64112
+ handleInputCallback(e);
64113
+ setLocalValue(e.target.value);
64114
+ };
64115
+ y(() => {
64116
+ if (value === localValue) {
64117
+ return;
64118
+ }
64119
+ setLocalValue(value);
64120
+ }, [value]);
64121
+ return e$1("div", {
64122
+ class: "bio-properties-panel-numberfield",
64123
+ children: [displayLabel && e$1("label", {
64124
+ for: prefixId$5(id),
64125
+ class: "bio-properties-panel-label",
64126
+ children: label
64127
+ }), e$1("input", {
64128
+ id: prefixId$5(id),
64129
+ ref: inputRef,
64130
+ type: "number",
64131
+ name: id,
64132
+ spellCheck: "false",
64133
+ autoComplete: "off",
64134
+ disabled: disabled,
64135
+ class: "bio-properties-panel-input",
64136
+ max: max,
64137
+ min: min,
64138
+ onInput: handleInput,
64139
+ onFocus: onFocus,
64140
+ onBlur: onBlur,
64141
+ step: step,
64142
+ value: localValue
64143
+ })]
64144
+ });
64145
+ }
64146
+
64147
+ /**
64148
+ * @param {Object} props
64149
+ * @param {Boolean} props.debounce
64150
+ * @param {String} props.description
64151
+ * @param {Boolean} props.disabled
64152
+ * @param {Object} props.element
64153
+ * @param {Function} props.getValue
64154
+ * @param {String} props.id
64155
+ * @param {String} props.label
64156
+ * @param {String} props.max
64157
+ * @param {String} props.min
64158
+ * @param {Function} props.setValue
64159
+ * @param {Function} props.onFocus
64160
+ * @param {Function} props.onBlur
64161
+ * @param {String} props.step
64162
+ * @param {Function} props.validate
64163
+ */
64164
+ function NumberFieldEntry(props) {
64165
+ const {
64166
+ debounce,
64167
+ description,
64168
+ disabled,
64169
+ element,
64170
+ getValue,
64171
+ id,
64172
+ label,
64173
+ max,
64174
+ min,
64175
+ setValue,
64176
+ step,
64177
+ onFocus,
64178
+ onBlur,
64179
+ validate
64180
+ } = props;
64181
+ const [cachedInvalidValue, setCachedInvalidValue] = l$2(null);
64182
+ const globalError = useError(id);
64183
+ const [localError, setLocalError] = l$2(null);
64184
+ let value = getValue(element);
64185
+ const previousValue = usePrevious(value);
64186
+ y(() => {
64187
+ if (isFunction(validate)) {
64188
+ const newValidationError = validate(value) || null;
64189
+ setLocalError(newValidationError);
64190
+ }
64191
+ }, [value]);
64192
+ const onInput = newValue => {
64193
+ let newValidationError = null;
64194
+ if (isFunction(validate)) {
64195
+ newValidationError = validate(newValue) || null;
64196
+ }
64197
+ if (newValidationError) {
64198
+ setCachedInvalidValue(newValue);
64199
+ } else {
64200
+ setValue(newValue);
64201
+ }
64202
+ setLocalError(newValidationError);
64203
+ };
64204
+ if (previousValue === value && localError) {
64205
+ value = cachedInvalidValue;
64206
+ }
64207
+ const error = globalError || localError;
64208
+ return e$1("div", {
64209
+ class: classNames('bio-properties-panel-entry', error ? 'has-error' : ''),
64210
+ "data-entry-id": id,
64211
+ children: [e$1(NumberField, {
64212
+ debounce: debounce,
64213
+ disabled: disabled,
64214
+ id: id,
64215
+ label: label,
64216
+ onFocus: onFocus,
64217
+ onBlur: onBlur,
64218
+ onInput: onInput,
64219
+ max: max,
64220
+ min: min,
64221
+ step: step,
64222
+ value: value
64223
+ }, element), error && e$1("div", {
64224
+ class: "bio-properties-panel-error",
64225
+ children: error
64226
+ }), e$1(Description$1, {
64227
+ forId: id,
64228
+ element: element,
64229
+ value: description
64230
+ })]
64231
+ });
64232
+ }
64233
+ function isEdited$6(node) {
64234
+ return node && !!node.value;
64235
+ }
64236
+
64237
+ // helpers /////////////////
64238
+
64239
+ function prefixId$5(id) {
64240
+ return `bio-properties-panel-${id}`;
64241
+ }
63835
64242
  const noop$1 = () => {};
63836
64243
  function FeelTextfield(props) {
63837
64244
  const {
@@ -63958,7 +64365,7 @@
63958
64365
  'feel-active': feelActive
63959
64366
  }),
63960
64367
  children: [e$1("label", {
63961
- for: prefixId$5(id),
64368
+ for: prefixId$4(id),
63962
64369
  class: "bio-properties-panel-label",
63963
64370
  onClick: () => setFocus(),
63964
64371
  children: [label, e$1(FeelIcon, {
@@ -63975,7 +64382,7 @@
63975
64382
  disabled: feel !== 'optional' || disabled,
63976
64383
  onClick: handleFeelToggle
63977
64384
  }), feelActive ? e$1(CodeEditor, {
63978
- id: prefixId$5(id),
64385
+ id: prefixId$4(id),
63979
64386
  name: id,
63980
64387
  onInput: handleLocalInput,
63981
64388
  disabled: disabled,
@@ -63992,7 +64399,7 @@
63992
64399
  ...props,
63993
64400
  onInput: handleLocalInput,
63994
64401
  contentAttributes: {
63995
- 'id': prefixId$5(id),
64402
+ 'id': prefixId$4(id),
63996
64403
  'aria-label': label
63997
64404
  },
63998
64405
  value: localValue,
@@ -64030,7 +64437,7 @@
64030
64437
  }
64031
64438
  };
64032
64439
  return e$1("input", {
64033
- id: prefixId$5(id),
64440
+ id: prefixId$4(id),
64034
64441
  type: "text",
64035
64442
  ref: inputRef,
64036
64443
  name: id,
@@ -64044,6 +64451,53 @@
64044
64451
  value: value || ''
64045
64452
  });
64046
64453
  });
64454
+ const OptionalFeelNumberField = x((props, ref) => {
64455
+ const {
64456
+ id,
64457
+ debounce,
64458
+ disabled,
64459
+ onInput,
64460
+ value,
64461
+ min,
64462
+ max,
64463
+ step,
64464
+ onFocus,
64465
+ onBlur
64466
+ } = props;
64467
+ const inputRef = s$1();
64468
+
64469
+ // To be consistent with the FEEL editor, set focus at start of input
64470
+ // this ensures clean editing experience when switching with the keyboard
64471
+ ref.current = {
64472
+ focus: position => {
64473
+ const input = inputRef.current;
64474
+ if (!input) {
64475
+ return;
64476
+ }
64477
+ input.focus();
64478
+ if (typeof position === 'number' && position !== Infinity) {
64479
+ if (position > value.length) {
64480
+ position = value.length;
64481
+ }
64482
+ input.setSelectionRange(position, position);
64483
+ }
64484
+ }
64485
+ };
64486
+ return e$1(NumberField, {
64487
+ id: id,
64488
+ debounce: debounce,
64489
+ disabled: disabled,
64490
+ displayLabel: false,
64491
+ inputRef: inputRef,
64492
+ max: max,
64493
+ min: min,
64494
+ onInput: onInput,
64495
+ step: step,
64496
+ value: value,
64497
+ onFocus: onFocus,
64498
+ onBlur: onBlur
64499
+ });
64500
+ });
64047
64501
  x((props, ref) => {
64048
64502
  const {
64049
64503
  id,
@@ -64068,7 +64522,7 @@
64068
64522
  }
64069
64523
  };
64070
64524
  return e$1("textarea", {
64071
- id: prefixId$5(id),
64525
+ id: prefixId$4(id),
64072
64526
  type: "text",
64073
64527
  ref: inputRef,
64074
64528
  name: id,
@@ -64144,7 +64598,7 @@
64144
64598
  };
64145
64599
  return e$1("input", {
64146
64600
  ref: inputRef,
64147
- id: prefixId$5(id),
64601
+ id: prefixId$4(id),
64148
64602
  name: id,
64149
64603
  onFocus: onFocus,
64150
64604
  onBlur: onBlur,
@@ -64233,11 +64687,13 @@
64233
64687
  return e$1("div", {
64234
64688
  class: classNames(props.class, 'bio-properties-panel-entry', error ? 'has-error' : ''),
64235
64689
  "data-entry-id": id,
64236
- children: [e$1(FeelTextfield, {
64690
+ children: [v$1(FeelTextfield, {
64691
+ ...props,
64237
64692
  debounce: debounce,
64238
64693
  disabled: disabled,
64239
64694
  feel: feel,
64240
64695
  id: id,
64696
+ key: element,
64241
64697
  label: label,
64242
64698
  onInput: onInput,
64243
64699
  onError: onError,
@@ -64251,7 +64707,7 @@
64251
64707
  variables: variables,
64252
64708
  tooltipContainer: tooltipContainer,
64253
64709
  OptionalComponent: props.OptionalComponent
64254
- }, element), error && e$1("div", {
64710
+ }), error && e$1("div", {
64255
64711
  class: "bio-properties-panel-error",
64256
64712
  children: error
64257
64713
  }), e$1(Description$1, {
@@ -64262,6 +64718,36 @@
64262
64718
  });
64263
64719
  }
64264
64720
 
64721
+ /**
64722
+ * @param {Object} props
64723
+ * @param {Object} props.element
64724
+ * @param {String} props.id
64725
+ * @param {String} props.description
64726
+ * @param {Boolean} props.debounce
64727
+ * @param {Boolean} props.disabled
64728
+ * @param {String} props.max
64729
+ * @param {String} props.min
64730
+ * @param {String} props.step
64731
+ * @param {Boolean} props.feel
64732
+ * @param {String} props.label
64733
+ * @param {Function} props.getValue
64734
+ * @param {Function} props.setValue
64735
+ * @param {Function} props.tooltipContainer
64736
+ * @param {Function} props.validate
64737
+ * @param {Function} props.show
64738
+ * @param {Function} props.example
64739
+ * @param {Function} props.variables
64740
+ * @param {Function} props.onFocus
64741
+ * @param {Function} props.onBlur
64742
+ */
64743
+ function FeelNumberEntry(props) {
64744
+ return e$1(FeelEntry, {
64745
+ class: "bio-properties-panel-feel-number",
64746
+ OptionalComponent: OptionalFeelNumberField,
64747
+ ...props
64748
+ });
64749
+ }
64750
+
64265
64751
  /**
64266
64752
  * @param {Object} props
64267
64753
  * @param {Object} props.element
@@ -64317,7 +64803,7 @@
64317
64803
  ...props
64318
64804
  });
64319
64805
  }
64320
- function isEdited$6(node) {
64806
+ function isEdited$5(node) {
64321
64807
  if (!node) {
64322
64808
  return false;
64323
64809
  }
@@ -64329,162 +64815,6 @@
64329
64815
 
64330
64816
  // helpers /////////////////
64331
64817
 
64332
- function prefixId$5(id) {
64333
- return `bio-properties-panel-${id}`;
64334
- }
64335
- function NumberField(props) {
64336
- const {
64337
- debounce,
64338
- disabled,
64339
- id,
64340
- label,
64341
- max,
64342
- min,
64343
- onInput,
64344
- step,
64345
- value = '',
64346
- onFocus,
64347
- onBlur
64348
- } = props;
64349
- const [localValue, setLocalValue] = l$2(value);
64350
- const handleInputCallback = d(() => {
64351
- return debounce(event => {
64352
- const {
64353
- validity,
64354
- value
64355
- } = event.target;
64356
- if (validity.valid) {
64357
- onInput(value ? parseFloat(value) : undefined);
64358
- }
64359
- });
64360
- }, [onInput, debounce]);
64361
- const handleInput = e => {
64362
- handleInputCallback(e);
64363
- setLocalValue(e.target.value);
64364
- };
64365
- y(() => {
64366
- if (value === localValue) {
64367
- return;
64368
- }
64369
- setLocalValue(value);
64370
- }, [value]);
64371
- return e$1("div", {
64372
- class: "bio-properties-panel-numberfield",
64373
- children: [e$1("label", {
64374
- for: prefixId$4(id),
64375
- class: "bio-properties-panel-label",
64376
- children: label
64377
- }), e$1("input", {
64378
- id: prefixId$4(id),
64379
- type: "number",
64380
- name: id,
64381
- spellCheck: "false",
64382
- autoComplete: "off",
64383
- disabled: disabled,
64384
- class: "bio-properties-panel-input",
64385
- max: max,
64386
- min: min,
64387
- onInput: handleInput,
64388
- onFocus: onFocus,
64389
- onBlur: onBlur,
64390
- step: step,
64391
- value: localValue
64392
- })]
64393
- });
64394
- }
64395
-
64396
- /**
64397
- * @param {Object} props
64398
- * @param {Boolean} props.debounce
64399
- * @param {String} props.description
64400
- * @param {Boolean} props.disabled
64401
- * @param {Object} props.element
64402
- * @param {Function} props.getValue
64403
- * @param {String} props.id
64404
- * @param {String} props.label
64405
- * @param {String} props.max
64406
- * @param {String} props.min
64407
- * @param {Function} props.setValue
64408
- * @param {Function} props.onFocus
64409
- * @param {Function} props.onBlur
64410
- * @param {String} props.step
64411
- * @param {Function} props.validate
64412
- */
64413
- function NumberFieldEntry(props) {
64414
- const {
64415
- debounce,
64416
- description,
64417
- disabled,
64418
- element,
64419
- getValue,
64420
- id,
64421
- label,
64422
- max,
64423
- min,
64424
- setValue,
64425
- step,
64426
- onFocus,
64427
- onBlur,
64428
- validate
64429
- } = props;
64430
- const [cachedInvalidValue, setCachedInvalidValue] = l$2(null);
64431
- const globalError = useError(id);
64432
- const [localError, setLocalError] = l$2(null);
64433
- let value = getValue(element);
64434
- const previousValue = usePrevious(value);
64435
- y(() => {
64436
- if (isFunction(validate)) {
64437
- const newValidationError = validate(value) || null;
64438
- setLocalError(newValidationError);
64439
- }
64440
- }, [value]);
64441
- const onInput = newValue => {
64442
- let newValidationError = null;
64443
- if (isFunction(validate)) {
64444
- newValidationError = validate(newValue) || null;
64445
- }
64446
- if (newValidationError) {
64447
- setCachedInvalidValue(newValue);
64448
- } else {
64449
- setValue(newValue);
64450
- }
64451
- setLocalError(newValidationError);
64452
- };
64453
- if (previousValue === value && localError) {
64454
- value = cachedInvalidValue;
64455
- }
64456
- const error = globalError || localError;
64457
- return e$1("div", {
64458
- class: classNames('bio-properties-panel-entry', error ? 'has-error' : ''),
64459
- "data-entry-id": id,
64460
- children: [e$1(NumberField, {
64461
- debounce: debounce,
64462
- disabled: disabled,
64463
- id: id,
64464
- label: label,
64465
- onFocus: onFocus,
64466
- onBlur: onBlur,
64467
- onInput: onInput,
64468
- max: max,
64469
- min: min,
64470
- step: step,
64471
- value: value
64472
- }, element), error && e$1("div", {
64473
- class: "bio-properties-panel-error",
64474
- children: error
64475
- }), e$1(Description$1, {
64476
- forId: id,
64477
- element: element,
64478
- value: description
64479
- })]
64480
- });
64481
- }
64482
- function isEdited$4(node) {
64483
- return node && !!node.value;
64484
- }
64485
-
64486
- // helpers /////////////////
64487
-
64488
64818
  function prefixId$4(id) {
64489
64819
  return `bio-properties-panel-${id}`;
64490
64820
  }
@@ -65095,7 +65425,7 @@
65095
65425
  function useService(type, strict) {
65096
65426
  const {
65097
65427
  getService
65098
- } = F$1(FormPropertiesPanelContext);
65428
+ } = F(FormPropertiesPanelContext);
65099
65429
  return getService(type, strict);
65100
65430
  }
65101
65431
 
@@ -65124,7 +65454,7 @@
65124
65454
  component: AltText,
65125
65455
  editField: editField,
65126
65456
  field: field,
65127
- isEdited: isEdited$6
65457
+ isEdited: isEdited$5
65128
65458
  });
65129
65459
  }
65130
65460
  return entries;
@@ -65146,7 +65476,7 @@
65146
65476
  const setValue = value => {
65147
65477
  return editField(field, path, value);
65148
65478
  };
65149
- return FeelEntry({
65479
+ return FeelTemplatingEntry({
65150
65480
  debounce,
65151
65481
  element: field,
65152
65482
  feel: 'optional',
@@ -65154,6 +65484,7 @@
65154
65484
  id,
65155
65485
  label: 'Alternative text',
65156
65486
  setValue,
65487
+ singleLine: true,
65157
65488
  variables
65158
65489
  });
65159
65490
  }
@@ -65240,7 +65571,7 @@
65240
65571
  component: Description,
65241
65572
  editField: editField,
65242
65573
  field: field,
65243
- isEdited: isEdited
65574
+ isEdited: isEdited$5
65244
65575
  });
65245
65576
  }
65246
65577
  return entries;
@@ -65252,6 +65583,9 @@
65252
65583
  id
65253
65584
  } = props;
65254
65585
  const debounce = useService('debounce');
65586
+ const variables = useVariables().map(name => ({
65587
+ name
65588
+ }));
65255
65589
  const path = ['description'];
65256
65590
  const getValue = () => {
65257
65591
  return get(field, path, '');
@@ -65259,13 +65593,15 @@
65259
65593
  const setValue = value => {
65260
65594
  return editField(field, path, value);
65261
65595
  };
65262
- return TextfieldEntry({
65596
+ return FeelTemplatingEntry({
65263
65597
  debounce,
65264
65598
  element: field,
65265
65599
  getValue,
65266
65600
  id,
65267
65601
  label: 'Field description',
65268
- setValue
65602
+ singleLine: true,
65603
+ setValue,
65604
+ variables
65269
65605
  });
65270
65606
  }
65271
65607
  const EMPTY_OPTION = null;
@@ -65679,125 +66015,129 @@
65679
66015
  validate
65680
66016
  });
65681
66017
  }
65682
- function simpleStringEntryFactory(options) {
65683
- const {
65684
- id,
65685
- label,
65686
- path,
65687
- props
65688
- } = options;
66018
+ function LabelEntry(props) {
65689
66019
  const {
65690
- editField,
65691
- field
65692
- } = props;
65693
- return {
65694
- id,
65695
- label,
65696
- path,
65697
66020
  field,
65698
- editField,
65699
- component: SimpleStringComponent,
65700
- isEdited: isEdited
65701
- };
66021
+ editField
66022
+ } = props;
66023
+ const {
66024
+ type,
66025
+ subtype
66026
+ } = field;
66027
+ const entries = [];
66028
+ if (type === 'datetime') {
66029
+ if (subtype === DATETIME_SUBTYPES.DATE || subtype === DATETIME_SUBTYPES.DATETIME) {
66030
+ entries.push({
66031
+ id: 'date-label',
66032
+ component: DateLabel,
66033
+ editField,
66034
+ field,
66035
+ isEdited: isEdited$5
66036
+ });
66037
+ }
66038
+ if (subtype === DATETIME_SUBTYPES.TIME || subtype === DATETIME_SUBTYPES.DATETIME) {
66039
+ entries.push({
66040
+ id: 'time-label',
66041
+ component: TimeLabel,
66042
+ editField,
66043
+ field,
66044
+ isEdited: isEdited$5
66045
+ });
66046
+ }
66047
+ } else if (INPUTS.includes(type) || type === 'button') {
66048
+ entries.push({
66049
+ id: 'label',
66050
+ component: Label$1,
66051
+ editField,
66052
+ field,
66053
+ isEdited: isEdited$5
66054
+ });
66055
+ }
66056
+ return entries;
65702
66057
  }
65703
- const SimpleStringComponent = props => {
66058
+ function Label$1(props) {
65704
66059
  const {
65705
- id,
65706
- label,
65707
- path,
66060
+ editField,
65708
66061
  field,
65709
- editField
66062
+ id
65710
66063
  } = props;
65711
66064
  const debounce = useService('debounce');
65712
- const getValue = () => get(field, path, '');
65713
- const setValue = value => editField(field, path, value);
65714
- return TextfieldEntry({
66065
+ const variables = useVariables().map(name => ({
66066
+ name
66067
+ }));
66068
+ const path = ['label'];
66069
+ const getValue = () => {
66070
+ return get(field, path, '');
66071
+ };
66072
+ const setValue = value => {
66073
+ return editField(field, path, value);
66074
+ };
66075
+ return FeelTemplatingEntry({
65715
66076
  debounce,
65716
66077
  element: field,
65717
66078
  getValue,
65718
66079
  id,
65719
- label,
65720
- setValue
66080
+ label: 'Field label',
66081
+ singleLine: true,
66082
+ setValue,
66083
+ variables
65721
66084
  });
65722
- };
65723
- function simpleBoolEntryFactory(options) {
65724
- const {
65725
- id,
65726
- label,
65727
- description,
65728
- path,
65729
- props
65730
- } = options;
66085
+ }
66086
+ function DateLabel(props) {
65731
66087
  const {
65732
66088
  editField,
65733
- field
65734
- } = props;
65735
- return {
65736
- id,
65737
- label,
65738
- path,
65739
66089
  field,
65740
- editField,
65741
- description,
65742
- component: SimpleBoolComponent,
65743
- isEdited: isEdited$8
66090
+ id
66091
+ } = props;
66092
+ const debounce = useService('debounce');
66093
+ const variables = useVariables().map(name => ({
66094
+ name
66095
+ }));
66096
+ const path = DATE_LABEL_PATH;
66097
+ const getValue = () => {
66098
+ return get(field, path, '');
66099
+ };
66100
+ const setValue = value => {
66101
+ return editField(field, path, value);
65744
66102
  };
66103
+ return FeelTemplatingEntry({
66104
+ debounce,
66105
+ element: field,
66106
+ getValue,
66107
+ id,
66108
+ label: 'Date label',
66109
+ singleLine: true,
66110
+ setValue,
66111
+ variables
66112
+ });
65745
66113
  }
65746
- const SimpleBoolComponent = props => {
66114
+ function TimeLabel(props) {
65747
66115
  const {
65748
- id,
65749
- label,
65750
- path,
65751
- field,
65752
66116
  editField,
65753
- description
66117
+ field,
66118
+ id
65754
66119
  } = props;
65755
- const getValue = () => get(field, path, '');
65756
- const setValue = value => editField(field, path, value);
65757
- return CheckboxEntry({
66120
+ const debounce = useService('debounce');
66121
+ const variables = useVariables().map(name => ({
66122
+ name
66123
+ }));
66124
+ const path = TIME_LABEL_PATH;
66125
+ const getValue = () => {
66126
+ return get(field, path, '');
66127
+ };
66128
+ const setValue = value => {
66129
+ return editField(field, path, value);
66130
+ };
66131
+ return FeelTemplatingEntry({
66132
+ debounce,
65758
66133
  element: field,
65759
66134
  getValue,
65760
66135
  id,
65761
- label,
66136
+ label: 'Time label',
66137
+ singleLine: true,
65762
66138
  setValue,
65763
- description
66139
+ variables
65764
66140
  });
65765
- };
65766
- function LabelEntry(props) {
65767
- const {
65768
- field
65769
- } = props;
65770
- const {
65771
- type,
65772
- subtype
65773
- } = field;
65774
- const entries = [];
65775
- if (type === 'datetime') {
65776
- if (subtype === DATETIME_SUBTYPES.DATE || subtype === DATETIME_SUBTYPES.DATETIME) {
65777
- entries.push(simpleStringEntryFactory({
65778
- id: 'date-label',
65779
- path: DATE_LABEL_PATH,
65780
- label: 'Date label',
65781
- props
65782
- }));
65783
- }
65784
- if (subtype === DATETIME_SUBTYPES.TIME || subtype === DATETIME_SUBTYPES.DATETIME) {
65785
- entries.push(simpleStringEntryFactory({
65786
- id: 'time-label',
65787
- path: TIME_LABEL_PATH,
65788
- label: 'Time label',
65789
- props
65790
- }));
65791
- }
65792
- } else if (INPUTS.includes(type) || type === 'button') {
65793
- entries.push(simpleStringEntryFactory({
65794
- id: 'label',
65795
- path: ['label'],
65796
- label: 'Field label',
65797
- props
65798
- }));
65799
- }
65800
- return entries;
65801
66141
  }
65802
66142
  function SourceEntry(props) {
65803
66143
  const {
@@ -65814,7 +66154,7 @@
65814
66154
  component: Source,
65815
66155
  editField: editField,
65816
66156
  field: field,
65817
- isEdited: isEdited$6
66157
+ isEdited: isEdited$5
65818
66158
  });
65819
66159
  }
65820
66160
  return entries;
@@ -65836,7 +66176,7 @@
65836
66176
  const setValue = value => {
65837
66177
  return editField(field, path, value);
65838
66178
  };
65839
- return FeelEntry({
66179
+ return FeelTemplatingEntry({
65840
66180
  debounce,
65841
66181
  description: 'Expression or static value (link/data URI)',
65842
66182
  element: field,
@@ -65845,6 +66185,7 @@
65845
66185
  id,
65846
66186
  label: 'Image source',
65847
66187
  setValue,
66188
+ singleLine: true,
65848
66189
  variables
65849
66190
  });
65850
66191
  }
@@ -65868,7 +66209,7 @@
65868
66209
  component: Text,
65869
66210
  editField: editField,
65870
66211
  field: field,
65871
- isEdited: isEdited$6
66212
+ isEdited: isEdited$5
65872
66213
  }];
65873
66214
 
65874
66215
  // todo: skipped to make the release without too much risk
@@ -65936,7 +66277,7 @@
65936
66277
  entries.push({
65937
66278
  id: id + '-decimalDigits',
65938
66279
  component: NumberDecimalDigits,
65939
- isEdited: isEdited$4,
66280
+ isEdited: isEdited$6,
65940
66281
  editField,
65941
66282
  field
65942
66283
  });
@@ -66298,6 +66639,49 @@
66298
66639
  setValue
66299
66640
  });
66300
66641
  }
66642
+ function simpleBoolEntryFactory(options) {
66643
+ const {
66644
+ id,
66645
+ label,
66646
+ description,
66647
+ path,
66648
+ props
66649
+ } = options;
66650
+ const {
66651
+ editField,
66652
+ field
66653
+ } = props;
66654
+ return {
66655
+ id,
66656
+ label,
66657
+ path,
66658
+ field,
66659
+ editField,
66660
+ description,
66661
+ component: SimpleBoolComponent,
66662
+ isEdited: isEdited$8
66663
+ };
66664
+ }
66665
+ const SimpleBoolComponent = props => {
66666
+ const {
66667
+ id,
66668
+ label,
66669
+ path,
66670
+ field,
66671
+ editField,
66672
+ description
66673
+ } = props;
66674
+ const getValue = () => get(field, path, '');
66675
+ const setValue = value => editField(field, path, value);
66676
+ return CheckboxEntry({
66677
+ element: field,
66678
+ getValue,
66679
+ id,
66680
+ label,
66681
+ setValue,
66682
+ description
66683
+ });
66684
+ };
66301
66685
  function SelectEntries(props) {
66302
66686
  const {
66303
66687
  field
@@ -66515,6 +66899,33 @@
66515
66899
  };
66516
66900
  }, {});
66517
66901
  }
66902
+ function AutoFocusSelectEntry(props) {
66903
+ const {
66904
+ autoFocusEntry,
66905
+ element,
66906
+ getValue
66907
+ } = props;
66908
+ const value = getValue(element);
66909
+ const prevValue = usePrevious(value);
66910
+ const eventBus = useService('eventBus');
66911
+
66912
+ // auto focus specifc other entry when selected value changed
66913
+ y(() => {
66914
+ if (autoFocusEntry && prevValue && value !== prevValue) {
66915
+ // @Note(pinussilvestrus): There is an issue in the properties
66916
+ // panel so we have to wait a bit before showing the entry.
66917
+ // Cf. https://github.com/camunda/linting/blob/4f5328e2722f73ae60ae584c5f576eaec3999cb2/lib/modeler/Linting.js#L37
66918
+ setTimeout(() => {
66919
+ eventBus.fire('propertiesPanel.showEntry', {
66920
+ id: autoFocusEntry
66921
+ });
66922
+ });
66923
+ }
66924
+ }, [value, autoFocusEntry, prevValue, eventBus]);
66925
+ return e$1(SelectEntry, {
66926
+ ...props
66927
+ });
66928
+ }
66518
66929
  function ValuesSourceSelectEntry(props) {
66519
66930
  const {
66520
66931
  editField,
@@ -66553,7 +66964,8 @@
66553
66964
  value: valueSource
66554
66965
  }));
66555
66966
  };
66556
- return SelectEntry({
66967
+ return AutoFocusSelectEntry({
66968
+ autoFocusEntry: getAutoFocusEntryId(field),
66557
66969
  label: 'Type',
66558
66970
  element: field,
66559
66971
  getOptions: getValuesSourceOptions,
@@ -66562,6 +66974,20 @@
66562
66974
  setValue
66563
66975
  });
66564
66976
  }
66977
+
66978
+ // helpers //////////
66979
+
66980
+ function getAutoFocusEntryId(field) {
66981
+ const valuesSource = getValuesSource(field);
66982
+ if (valuesSource === VALUES_SOURCES.EXPRESSION) {
66983
+ return `${field.id}-valuesExpression-expression`;
66984
+ } else if (valuesSource === VALUES_SOURCES.INPUT) {
66985
+ return `${field.id}-dynamicValues-key`;
66986
+ } else if (valuesSource === VALUES_SOURCES.STATIC) {
66987
+ return `${field.id}-staticValues-0-label`;
66988
+ }
66989
+ return null;
66990
+ }
66565
66991
  function InputKeyValuesSourceEntry(props) {
66566
66992
  const {
66567
66993
  editField,
@@ -66716,7 +67142,7 @@
66716
67142
  entries.push({
66717
67143
  id: 'prefix-adorner',
66718
67144
  component: PrefixAdorner,
66719
- isEdited: isEdited,
67145
+ isEdited: isEdited$5,
66720
67146
  editField,
66721
67147
  field,
66722
67148
  onChange,
@@ -66725,7 +67151,7 @@
66725
67151
  entries.push({
66726
67152
  id: 'suffix-adorner',
66727
67153
  component: SuffixAdorner,
66728
- isEdited: isEdited,
67154
+ isEdited: isEdited$5,
66729
67155
  editField,
66730
67156
  field,
66731
67157
  onChange,
@@ -66742,13 +67168,19 @@
66742
67168
  getValue
66743
67169
  } = props;
66744
67170
  const debounce = useService('debounce');
66745
- return TextfieldEntry({
67171
+ const variables = useVariables().map(name => ({
67172
+ name
67173
+ }));
67174
+ return FeelTemplatingEntry({
66746
67175
  debounce,
66747
67176
  element: field,
67177
+ feel: 'optional',
66748
67178
  getValue: getValue('prefixAdorner'),
66749
67179
  id,
66750
67180
  label: 'Prefix',
66751
- setValue: onChange('prefixAdorner')
67181
+ setValue: onChange('prefixAdorner'),
67182
+ singleLine: true,
67183
+ variables
66752
67184
  });
66753
67185
  }
66754
67186
  function SuffixAdorner(props) {
@@ -66759,13 +67191,18 @@
66759
67191
  getValue
66760
67192
  } = props;
66761
67193
  const debounce = useService('debounce');
66762
- return TextfieldEntry({
67194
+ const variables = useVariables().map(name => ({
67195
+ name
67196
+ }));
67197
+ return FeelTemplatingEntry({
66763
67198
  debounce,
66764
67199
  element: field,
66765
67200
  getValue: getValue('suffixAdorner'),
66766
67201
  id,
66767
67202
  label: 'Suffix',
66768
- setValue: onChange('suffixAdorner')
67203
+ setValue: onChange('suffixAdorner'),
67204
+ singleLine: true,
67205
+ variables
66769
67206
  });
66770
67207
  }
66771
67208
  function ReadonlyEntry(props) {
@@ -66783,7 +67220,7 @@
66783
67220
  component: Readonly,
66784
67221
  editField: editField,
66785
67222
  field: field,
66786
- isEdited: isEdited$6
67223
+ isEdited: isEdited$5
66787
67224
  });
66788
67225
  }
66789
67226
  return entries;
@@ -66826,7 +67263,7 @@
66826
67263
  component: Condition,
66827
67264
  editField: editField,
66828
67265
  field: field,
66829
- isEdited: isEdited$6
67266
+ isEdited: isEdited$5
66830
67267
  }];
66831
67268
  }
66832
67269
  function Condition(props) {
@@ -66863,6 +67300,54 @@
66863
67300
  variables
66864
67301
  });
66865
67302
  }
67303
+ function ValuesExpressionEntry(props) {
67304
+ const {
67305
+ editField,
67306
+ field,
67307
+ id
67308
+ } = props;
67309
+ return [{
67310
+ id: id + '-expression',
67311
+ component: ValuesExpression,
67312
+ label: 'Values expression',
67313
+ isEdited: isEdited$5,
67314
+ editField,
67315
+ field
67316
+ }];
67317
+ }
67318
+ function ValuesExpression(props) {
67319
+ const {
67320
+ editField,
67321
+ field,
67322
+ id
67323
+ } = props;
67324
+ const debounce = useService('debounce');
67325
+ const variables = useVariables().map(name => ({
67326
+ name
67327
+ }));
67328
+ const path = VALUES_SOURCES_PATHS[VALUES_SOURCES.EXPRESSION];
67329
+ const schema = '[\n {\n "label": "dollar",\n "value": "$"\n }\n]';
67330
+ const description = e$1("div", {
67331
+ children: ["Define an expression to populate the options from.", e$1("br", {}), e$1("br", {}), "The expression may result in an array of simple values or alternatively follow this schema:", e$1("pre", {
67332
+ children: e$1("code", {
67333
+ children: schema
67334
+ })
67335
+ })]
67336
+ });
67337
+ const getValue = () => get(field, path, '');
67338
+ const setValue = value => editField(field, path, value || '');
67339
+ return FeelEntry({
67340
+ debounce,
67341
+ description,
67342
+ element: field,
67343
+ feel: 'required',
67344
+ getValue,
67345
+ id,
67346
+ label: 'Options expression',
67347
+ setValue,
67348
+ variables
67349
+ });
67350
+ }
66866
67351
  function GeneralGroup(field, editField, getService) {
66867
67352
  const entries = [...IdEntry({
66868
67353
  field,
@@ -67004,14 +67489,14 @@
67004
67489
  component: MinLength,
67005
67490
  getValue,
67006
67491
  field,
67007
- isEdited: isEdited$4,
67492
+ isEdited: isEdited$5,
67008
67493
  onChange
67009
67494
  }, {
67010
67495
  id: 'maxLength',
67011
67496
  component: MaxLength,
67012
67497
  getValue,
67013
67498
  field,
67014
- isEdited: isEdited$4,
67499
+ isEdited: isEdited$5,
67015
67500
  onChange
67016
67501
  });
67017
67502
  }
@@ -67031,14 +67516,14 @@
67031
67516
  component: Min,
67032
67517
  getValue,
67033
67518
  field,
67034
- isEdited: isEdited$4,
67519
+ isEdited: isEdited$5,
67035
67520
  onChange
67036
67521
  }, {
67037
67522
  id: 'max',
67038
67523
  component: Max,
67039
67524
  getValue,
67040
67525
  field,
67041
- isEdited: isEdited$4,
67526
+ isEdited: isEdited$5,
67042
67527
  onChange
67043
67528
  });
67044
67529
  }
@@ -67071,14 +67556,19 @@
67071
67556
  onChange
67072
67557
  } = props;
67073
67558
  const debounce = useService('debounce');
67074
- return NumberFieldEntry({
67559
+ const variables = useVariables().map(name => ({
67560
+ name
67561
+ }));
67562
+ return FeelNumberEntry({
67075
67563
  debounce,
67076
67564
  element: field,
67565
+ feel: 'optional',
67077
67566
  getValue: getValue('minLength'),
67078
67567
  id,
67079
67568
  label: 'Minimum length',
67080
67569
  min: 0,
67081
- setValue: onChange('minLength')
67570
+ setValue: onChange('minLength'),
67571
+ variables
67082
67572
  });
67083
67573
  }
67084
67574
  function MaxLength(props) {
@@ -67089,14 +67579,19 @@
67089
67579
  onChange
67090
67580
  } = props;
67091
67581
  const debounce = useService('debounce');
67092
- return NumberFieldEntry({
67582
+ const variables = useVariables().map(name => ({
67583
+ name
67584
+ }));
67585
+ return FeelNumberEntry({
67093
67586
  debounce,
67094
67587
  element: field,
67588
+ feel: 'optional',
67095
67589
  getValue: getValue('maxLength'),
67096
67590
  id,
67097
67591
  label: 'Maximum length',
67098
67592
  min: 0,
67099
- setValue: onChange('maxLength')
67593
+ setValue: onChange('maxLength'),
67594
+ variables
67100
67595
  });
67101
67596
  }
67102
67597
  function Pattern(props) {
@@ -67124,14 +67619,19 @@
67124
67619
  onChange
67125
67620
  } = props;
67126
67621
  const debounce = useService('debounce');
67127
- return NumberFieldEntry({
67622
+ const variables = useVariables().map(name => ({
67623
+ name
67624
+ }));
67625
+ return FeelNumberEntry({
67128
67626
  debounce,
67129
67627
  element: field,
67628
+ feel: 'optional',
67130
67629
  id,
67131
67630
  label: 'Minimum',
67132
67631
  step: 'any',
67133
67632
  getValue: getValue('min'),
67134
- setValue: onChange('min')
67633
+ setValue: onChange('min'),
67634
+ variables
67135
67635
  });
67136
67636
  }
67137
67637
  function Max(props) {
@@ -67142,14 +67642,19 @@
67142
67642
  onChange
67143
67643
  } = props;
67144
67644
  const debounce = useService('debounce');
67145
- return NumberFieldEntry({
67645
+ const variables = useVariables().map(name => ({
67646
+ name
67647
+ }));
67648
+ return FeelNumberEntry({
67146
67649
  debounce,
67147
67650
  element: field,
67651
+ feel: 'optional',
67148
67652
  id,
67149
67653
  label: 'Maximum',
67150
67654
  step: 'any',
67151
67655
  getValue: getValue('max'),
67152
- setValue: onChange('max')
67656
+ setValue: onChange('max'),
67657
+ variables
67153
67658
  });
67154
67659
  }
67155
67660
  function ValidationType(props) {
@@ -67222,6 +67727,17 @@
67222
67727
  id: staticValuesId
67223
67728
  })
67224
67729
  });
67730
+ } else if (valuesSource === VALUES_SOURCES.EXPRESSION) {
67731
+ const valuesExpressionId = `${fieldId}-valuesExpression`;
67732
+ groups.push({
67733
+ id: valuesExpressionId,
67734
+ label: 'Options expression',
67735
+ component: Group,
67736
+ entries: ValuesExpressionEntry({
67737
+ ...context,
67738
+ id: valuesExpressionId
67739
+ })
67740
+ });
67225
67741
  }
67226
67742
  return groups;
67227
67743
  }
@@ -67376,47 +67892,37 @@
67376
67892
  } = props;
67377
67893
  const formEditor = injector.get('formEditor');
67378
67894
  const modeling = injector.get('modeling');
67379
- const selection = injector.get('selection');
67380
- const {
67381
- schema
67382
- } = formEditor._getState();
67895
+ const selectionModule = injector.get('selection');
67383
67896
  const [state, setState] = l$2({
67384
- selectedFormField: selection.get() || schema
67897
+ selectedFormField: selectionModule.get() || formEditor._getState().schema
67385
67898
  });
67386
- const _update = field => {
67899
+ const selectedFormField = state.selectedFormField;
67900
+ const refresh = A$1(field => {
67901
+ // TODO(skaiir): rework state management, re-rendering the whole properties panel is not the way to go
67902
+ // https://github.com/bpmn-io/form-js/issues/686
67387
67903
  setState({
67388
- ...state,
67389
- selectedFormField: field
67904
+ selectedFormField: selectionModule.get() || formEditor._getState().schema
67390
67905
  });
67391
67906
 
67392
67907
  // notify interested parties on property panel updates
67393
67908
  eventBus.fire('propertiesPanel.updated', {
67394
67909
  formField: field
67395
67910
  });
67396
- };
67397
- h(() => {
67398
- function onSelectionChange(event) {
67399
- _update(event.selection || schema);
67400
- }
67401
- eventBus.on('selection.changed', onSelectionChange);
67402
- return () => {
67403
- eventBus.off('selection.changed', onSelectionChange);
67404
- };
67405
- }, []);
67911
+ }, [eventBus, formEditor, selectionModule]);
67406
67912
  h(() => {
67407
- const onFieldChanged = () => {
67408
- /**
67409
- * TODO(pinussilvestrus): update with actual updated element,
67410
- * once we have a proper updater/change support
67411
- */
67412
- _update(selection.get() || schema);
67413
- };
67414
- eventBus.on('changed', onFieldChanged);
67913
+ /**
67914
+ * TODO(pinussilvestrus): update with actual updated element,
67915
+ * once we have a proper updater/change support
67916
+ */
67917
+ eventBus.on('changed', refresh);
67918
+ eventBus.on('import.done', refresh);
67919
+ eventBus.on('selection.changed', refresh);
67415
67920
  return () => {
67416
- eventBus.off('changed', onFieldChanged);
67921
+ eventBus.off('changed', refresh);
67922
+ eventBus.off('import.done', refresh);
67923
+ eventBus.off('selection.changed', refresh);
67417
67924
  };
67418
- }, []);
67419
- const selectedFormField = state.selectedFormField;
67925
+ }, [eventBus, refresh]);
67420
67926
  const getService = (type, strict = true) => injector.get(type, strict);
67421
67927
  const propertiesPanelContext = {
67422
67928
  getService
@@ -67509,10 +68015,68 @@
67509
68015
  __init__: ['propertiesPanel'],
67510
68016
  propertiesPanel: ['type', PropertiesPanelRenderer]
67511
68017
  };
68018
+
68019
+ /**
68020
+ * Manages the rendering of visual plugins.
68021
+ * @constructor
68022
+ * @param {Object} eventBus - Event bus for the application.
68023
+ */
68024
+ class RenderInjector extends SectionModuleBase {
68025
+ constructor(eventBus) {
68026
+ super(eventBus, 'renderInjector');
68027
+ this._eventBus = eventBus;
68028
+ this.registeredRenderers = [];
68029
+ }
68030
+
68031
+ /**
68032
+ * Inject a new renderer into the injector.
68033
+ * @param {string} identifier - Identifier for the renderer.
68034
+ * @param {Function} Renderer - The renderer function.
68035
+ */
68036
+ attachRenderer(identifier, Renderer) {
68037
+ this.registeredRenderers = [...this.registeredRenderers, {
68038
+ identifier,
68039
+ Renderer
68040
+ }];
68041
+ }
68042
+
68043
+ /**
68044
+ * Detach a renderer from the by key injector.
68045
+ * @param {string} identifier - Identifier for the renderer.
68046
+ */
68047
+ detachRenderer(identifier) {
68048
+ this.registeredRenderers = this.registeredRenderers.filter(r => r.identifier !== identifier);
68049
+ }
68050
+
68051
+ /**
68052
+ * Returns the registered renderers.
68053
+ * @returns {Array} Array of registered renderers.
68054
+ */
68055
+ fetchRenderers() {
68056
+ return this.registeredRenderers;
68057
+ }
68058
+ }
68059
+ RenderInjector.$inject = ['eventBus'];
68060
+ var RenderInjectionModule = {
68061
+ __init__: ['renderInjector'],
68062
+ renderInjector: ['type', RenderInjector]
68063
+ };
68064
+ class EditorTemplating {
68065
+ // same rules as viewer templating
68066
+ isTemplate(value) {
68067
+ return isString(value) && (value.startsWith('=') || /{{/.test(value));
68068
+ }
68069
+
68070
+ // return the template raw, as we usually just want to display that
68071
+ evaluate(template) {
68072
+ return template;
68073
+ }
68074
+ }
68075
+ EditorTemplating.$inject = [];
67512
68076
  var ExpressionLanguageModule = {
67513
68077
  __init__: ['expressionLanguage', 'templating'],
67514
68078
  expressionLanguage: ['type', FeelExpressionLanguage],
67515
- templating: ['type', FeelersTemplating]
68079
+ templating: ['type', EditorTemplating]
67516
68080
  };
67517
68081
  const ids = new Ids([32, 36, 1]);
67518
68082
 
@@ -67766,7 +68330,7 @@
67766
68330
  * @internal
67767
68331
  */
67768
68332
  _getModules() {
67769
- return [ModelingModule, EditorActionsModule, DraggingModule, KeyboardModule, SelectionModule, PaletteModule, ExpressionLanguageModule, MarkdownModule, PropertiesPanelModule];
68333
+ return [ModelingModule, EditorActionsModule, DraggingModule, KeyboardModule, SelectionModule, PaletteModule, ExpressionLanguageModule, MarkdownModule, PropertiesPanelModule, RenderInjectionModule];
67770
68334
  }
67771
68335
 
67772
68336
  /**