camunda-bpmn-js 0.13.0-alpha.5 → 0.13.0-alpha.8

package/dist/base-modeler.development.js

@@ -6,6 +6,21 @@
 
 	var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
+	function getAugmentedNamespace(n) {
+		if (n.__esModule) return n;
+		var a = Object.defineProperty({}, '__esModule', {value: true});
+		Object.keys(n).forEach(function (k) {
+			var d = Object.getOwnPropertyDescriptor(n, k);
+			Object.defineProperty(a, k, d.get ? d : {
+				enumerable: true,
+				get: function () {
+					return n[k];
+				}
+			});
+		});
+		return a;
+	}
+
 	function createCommonjsModule(fn) {
 	  var module = { exports: {} };
 		return fn(module, module.exports), module.exports;
@@ -659,6 +674,30 @@
 	  callback.cancel = clear;
 	  return callback;
 	}
+	/**
+	 * Throttle fn, calling at most once
+	 * in the given interval.
+	 *
+	 * @param  {Function} fn
+	 * @param  {Number} interval
+	 *
+	 * @return {Function} throttled function
+	 */
+
+	function throttle(fn, interval) {
+	  var throttling = false;
+	  return function () {
+	    if (throttling) {
+	      return;
+	    }
+
+	    fn.apply(void 0, arguments);
+	    throttling = true;
+	    setTimeout(function () {
+	      throttling = false;
+	    }, interval);
+	  };
+	}
 	/**
 	 * Bind function against target <this>.
 	 *
@@ -825,6 +864,94 @@
 	  });
 	  return result;
 	}
+	/**
+	 * Recursively merge `...sources` into given target.
+	 *
+	 * Does support merging objects; does not support merging arrays.
+	 *
+	 * @param {Object} target
+	 * @param {...Object} sources
+	 *
+	 * @return {Object} the target
+	 */
+
+	function merge(target) {
+	  for (var _len2 = arguments.length, sources = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
+	    sources[_key2 - 1] = arguments[_key2];
+	  }
+
+	  if (!sources.length) {
+	    return target;
+	  }
+
+	  forEach(sources, function (source) {
+	    // skip non-obj sources, i.e. null
+	    if (!source || !isObject(source)) {
+	      return;
+	    }
+
+	    forEach(source, function (sourceVal, key) {
+	      if (key === '__proto__') {
+	        return;
+	      }
+
+	      var targetVal = target[key];
+
+	      if (isObject(sourceVal)) {
+	        if (!isObject(targetVal)) {
+	          // override target[key] with object
+	          targetVal = {};
+	        }
+
+	        target[key] = merge(targetVal, sourceVal);
+	      } else {
+	        target[key] = sourceVal;
+	      }
+	    });
+	  });
+	  return target;
+	}
+
+	var index_esm = /*#__PURE__*/Object.freeze({
+		__proto__: null,
+		assign: assign,
+		bind: bind,
+		debounce: debounce,
+		ensureArray: ensureArray,
+		every: every,
+		filter: filter,
+		find: find,
+		findIndex: findIndex,
+		flatten: flatten,
+		forEach: forEach,
+		get: get,
+		groupBy: groupBy,
+		has: has,
+		isArray: isArray,
+		isDefined: isDefined,
+		isFunction: isFunction,
+		isNil: isNil,
+		isNumber: isNumber,
+		isObject: isObject,
+		isString: isString,
+		isUndefined: isUndefined,
+		keys: keys,
+		map: map,
+		matchPattern: matchPattern,
+		merge: merge,
+		omit: omit,
+		pick: pick,
+		reduce: reduce,
+		set: set,
+		size: size,
+		some: some,
+		sortBy: sortBy,
+		throttle: throttle,
+		unionBy: unionBy,
+		uniqueBy: uniqueBy,
+		values: values,
+		without: without
+	});
 
 	/**
 	 * Set attribute `name` to `val`, or get attr `name`.
@@ -61408,31 +61535,100 @@
 	}());
 	});
 
+	function C$1(n,t){for(var e in t)n[e]=t[e];return n}function S$1(n,t){for(var e in n)if("__source"!==e&&!(e in t))return !0;for(var r in t)if("__source"!==r&&n[r]!==t[r])return !0;return !1}function E(n){this.props=n;}function g$2(n,t){function e(n){var e=this.props.ref,r=e==n.ref;return !r&&e&&(e.call?e(null):e.current=null),t?!t(this.props,n)||!r:S$1(this.props,n)}function r(t){return this.shouldComponentUpdate=e,a(n,t)}return r.displayName="Memo("+(n.displayName||n.name)+")",r.prototype.isReactComponent=!0,r.__f=!0,r}(E.prototype=new p).isPureReactComponent=!0,E.prototype.shouldComponentUpdate=function(n,t){return S$1(this.props,n)||S$1(this.state,t)};var w$2=n.__b;n.__b=function(n){n.type&&n.type.__f&&n.ref&&(n.props.ref=n.ref,n.ref=null),w$2&&w$2(n);};var R="undefined"!=typeof Symbol&&Symbol.for&&Symbol.for("react.forward_ref")||3911;function x$2(n){function t(t,e){var r=C$1({},t);return delete r.ref,n(r,(e=t.ref||e)&&("object"!=typeof e||"current"in e)?e:null)}return t.$$typeof=R,t.render=t,t.prototype.isReactComponent=t.__f=!0,t.displayName="ForwardRef("+(n.displayName||n.name)+")",t}var N$1=function(n,t){return null==n?null:w(w(n).map(t))},k$2={map:N$1,forEach:N$1,count:function(n){return n?w(n).length:0},only:function(n){var t=w(n);if(1!==t.length)throw "Children.only";return t[0]},toArray:w},A$2=n.__e;n.__e=function(n,t,e){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);A$2(n,t,e);};var O$1=n.unmount;function L$1(){this.__u=0,this.t=null,this.__b=null;}function U(n){var t=n.__.__c;return t&&t.__e&&t.__e(n)}function D(n){var t,e,r;function u(u){if(t||(t=n()).then(function(n){e=n.default||n;},function(n){r=n;}),r)throw r;if(!e)throw t;return a(e,u)}return u.displayName="Lazy",u.__f=!0,u}function F$1(){this.u=null,this.o=null;}n.unmount=function(n){var t=n.__c;t&&t.__R&&t.__R(),t&&!0===n.__h&&(n.type=null),O$1&&O$1(n);},(L$1.prototype=new p).__c=function(n,t){var e=t.__c,r=this;null==r.t&&(r.t=[]),r.t.push(e);var u=U(r.__v),o=!1,i=function(){o||(o=!0,e.__R=null,u?u(l):l());};e.__R=i;var l=function(){if(!--r.__u){if(r.state.__e){var n=r.state.__e;r.__v.__k[0]=function n(t,e,r){return t&&(t.__v=null,t.__k=t.__k&&t.__k.map(function(t){return n(t,e,r)}),t.__c&&t.__c.__P===e&&(t.__e&&r.insertBefore(t.__e,t.__d),t.__c.__e=!0,t.__c.__P=r)),t}(n,n.__c.__P,n.__c.__O);}var t;for(r.setState({__e:r.__b=null});t=r.t.pop();)t.forceUpdate();}},f=!0===t.__h;r.__u++||f||r.setState({__e:r.__b=r.__v.__k[0]}),n.then(i,i);},L$1.prototype.componentWillUnmount=function(){this.t=[];},L$1.prototype.render=function(n,t){if(this.__b){if(this.__v.__k){var e=document.createElement("div"),r=this.__v.__k[0].__c;this.__v.__k[0]=function n(t,e,r){return t&&(t.__c&&t.__c.__H&&(t.__c.__H.__.forEach(function(n){"function"==typeof n.__c&&n.__c();}),t.__c.__H=null),null!=(t=C$1({},t)).__c&&(t.__c.__P===r&&(t.__c.__P=e),t.__c=null),t.__k=t.__k&&t.__k.map(function(t){return n(t,e,r)})),t}(this.__b,e,r.__O=r.__P);}this.__b=null;}var u=t.__e&&a(y,null,n.fallback);return u&&(u.__h=null),[a(y,null,t.__e?null:n.children),u]};var M$1=function(n,t,e){if(++e[1]===e[0]&&n.o.delete(t),n.props.revealOrder&&("t"!==n.props.revealOrder[0]||!n.o.size))for(e=n.u;e;){for(;e.length>3;)e.pop()();if(e[1]<e[0])break;n.u=e=e[2];}};function T$2(n){return this.getChildContext=function(){return n.context},n.children}function j$2(n){var t=this,e=n.i;t.componentWillUnmount=function(){N(null,t.l),t.l=null,t.i=null;},t.i&&t.i!==e&&t.componentWillUnmount(),n.__v?(t.l||(t.i=e,t.l={nodeType:1,parentNode:e,childNodes:[],appendChild:function(n){this.childNodes.push(n),t.i.appendChild(n);},insertBefore:function(n,e){this.childNodes.push(n),t.i.appendChild(n);},removeChild:function(n){this.childNodes.splice(this.childNodes.indexOf(n)>>>1,1),t.i.removeChild(n);}}),N(a(T$2,{context:t.context},n.__v),t.l)):t.l&&t.componentWillUnmount();}function I$1(n,t){return a(j$2,{__v:n,i:t})}(F$1.prototype=new p).__e=function(n){var t=this,e=U(t.__v),r=t.o.get(n);return r[0]++,function(u){var o=function(){t.props.revealOrder?(r.push(u),M$1(t,n,r)):u();};e?e(o):o();}},F$1.prototype.render=function(n){this.u=null,this.o=new Map;var t=w(n.children);n.revealOrder&&"b"===n.revealOrder[0]&&t.reverse();for(var e=t.length;e--;)this.o.set(t[e],this.u=[1,0,this.u]);return n.children},F$1.prototype.componentDidUpdate=F$1.prototype.componentDidMount=function(){var n=this;this.o.forEach(function(t,e){M$1(n,e,t);});};var W="undefined"!=typeof Symbol&&Symbol.for&&Symbol.for("react.element")||60103,P$1=/^(?:accent|alignment|arabic|baseline|cap|clip(?!PathU)|color|fill|flood|font|glyph(?!R)|horiz|marker(?!H|W|U)|overline|paint|stop|strikethrough|stroke|text(?!L)|underline|unicode|units|v|vector|vert|word|writing|x(?!C))[A-Z]/,V=function(n){return ("undefined"!=typeof Symbol&&"symbol"==typeof Symbol()?/fil|che|rad/i:/fil|che|ra/i).test(n)};function z$1(n,t,e){return null==t.__k&&(t.textContent=""),N(n,t),"function"==typeof e&&e(),n?n.__c:null}function B(n,t,e){return O(n,t),"function"==typeof e&&e(),n?n.__c:null}p.prototype.isReactComponent={},["componentWillMount","componentWillReceiveProps","componentWillUpdate"].forEach(function(n){Object.defineProperty(p.prototype,n,{configurable:!0,get:function(){return this["UNSAFE_"+n]},set:function(t){Object.defineProperty(this,n,{configurable:!0,writable:!0,value:t});}});});var H$1=n.event;function Z(){}function Y(){return this.cancelBubble}function $$1(){return this.defaultPrevented}n.event=function(n){return H$1&&(n=H$1(n)),n.persist=Z,n.isPropagationStopped=Y,n.isDefaultPrevented=$$1,n.nativeEvent=n};var q$1,G={configurable:!0,get:function(){return this.class}},J=n.vnode;n.vnode=function(n){var t=n.type,e=n.props,r=e;if("string"==typeof t){for(var u in r={},e){var o=e[u];"value"===u&&"defaultValue"in e&&null==o||("defaultValue"===u&&"value"in e&&null==e.value?u="value":"download"===u&&!0===o?o="":/ondoubleclick/i.test(u)?u="ondblclick":/^onchange(textarea|input)/i.test(u+t)&&!V(e.type)?u="oninput":/^on(Ani|Tra|Tou|BeforeInp)/.test(u)?u=u.toLowerCase():P$1.test(u)?u=u.replace(/[A-Z0-9]/,"-$&").toLowerCase():null===o&&(o=void 0),r[u]=o);}"select"==t&&r.multiple&&Array.isArray(r.value)&&(r.value=w(e.children).forEach(function(n){n.props.selected=-1!=r.value.indexOf(n.props.value);})),"select"==t&&null!=r.defaultValue&&(r.value=w(e.children).forEach(function(n){n.props.selected=r.multiple?-1!=r.defaultValue.indexOf(n.props.value):r.defaultValue==n.props.value;})),n.props=r;}t&&e.class!=e.className&&(G.enumerable="className"in e,null!=e.className&&(r.class=e.className),Object.defineProperty(r,"className",G)),n.$$typeof=W,J&&J(n);};var K=n.__r;n.__r=function(n){K&&K(n),q$1=n.__c;};var Q={ReactCurrentDispatcher:{current:{readContext:function(n){return q$1.__n[n.__c].props.value}}}};"object"==typeof performance&&"function"==typeof performance.now?performance.now.bind(performance):function(){return Date.now()};function fn(n){return a.bind(null,n)}function cn(n){return !!n&&n.$$typeof===W}function an(n){return cn(n)?S.apply(null,arguments):n}function sn(n){return !!n.__k&&(N(null,n),!0)}function hn(n){return n&&(n.base||1===n.nodeType&&n)||null}var pn=function(n,t){return n(t)};var React = {useState:l,useReducer:p$1,useEffect:y$1,useLayoutEffect:h$1,useRef:s$1,useImperativeHandle:_$1,useMemo:d$1,useCallback:A$1,useContext:F,useDebugValue:T$1,version:"16.8.0",Children:k$2,render:z$1,hydrate:B,unmountComponentAtNode:sn,createPortal:I$1,createElement:a,createContext:q,createFactory:fn,cloneElement:an,createRef:h,Fragment:y,isValidElement:cn,findDOMNode:hn,Component:p,PureComponent:E,memo:g$2,forwardRef:x$2,unstable_batchedUpdates:pn,StrictMode:y,Suspense:L$1,SuspenseList:F$1,lazy:D,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:Q};
+
 	function o$2(_,o,e,n$1,t){var f={};for(var l in o)"ref"!=l&&(f[l]=o[l]);var s,u,a={type:_,props:f,key:e,ref:o&&o.ref,__k:null,__:null,__b:0,__e:null,__d:void 0,__c:null,__h:null,constructor:void 0,__v:++n.__v,__source:n$1,__self:t};if("function"==typeof _&&(s=_.defaultProps))for(u in s)void 0===f[u]&&(f[u]=s[u]);return n.vnode&&n.vnode(a),a}
 
-	function C$1(n,t){for(var e in t)n[e]=t[e];return n}function S$1(n,t){for(var e in n)if("__source"!==e&&!(e in t))return !0;for(var r in t)if("__source"!==r&&n[r]!==t[r])return !0;return !1}function E(n){this.props=n;}function g$2(n,t){function e(n){var e=this.props.ref,r=e==n.ref;return !r&&e&&(e.call?e(null):e.current=null),t?!t(this.props,n)||!r:S$1(this.props,n)}function r(t){return this.shouldComponentUpdate=e,a(n,t)}return r.displayName="Memo("+(n.displayName||n.name)+")",r.prototype.isReactComponent=!0,r.__f=!0,r}(E.prototype=new p).isPureReactComponent=!0,E.prototype.shouldComponentUpdate=function(n,t){return S$1(this.props,n)||S$1(this.state,t)};var w$2=n.__b;n.__b=function(n){n.type&&n.type.__f&&n.ref&&(n.props.ref=n.ref,n.ref=null),w$2&&w$2(n);};var R="undefined"!=typeof Symbol&&Symbol.for&&Symbol.for("react.forward_ref")||3911;function x$2(n){function t(t,e){var r=C$1({},t);return delete r.ref,n(r,(e=t.ref||e)&&("object"!=typeof e||"current"in e)?e:null)}return t.$$typeof=R,t.render=t,t.prototype.isReactComponent=t.__f=!0,t.displayName="ForwardRef("+(n.displayName||n.name)+")",t}var N$1=function(n,t){return null==n?null:w(w(n).map(t))},k$2={map:N$1,forEach:N$1,count:function(n){return n?w(n).length:0},only:function(n){var t=w(n);if(1!==t.length)throw "Children.only";return t[0]},toArray:w},A$2=n.__e;n.__e=function(n,t,e){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);A$2(n,t,e);};var O$1=n.unmount;function L$1(){this.__u=0,this.t=null,this.__b=null;}function U(n){var t=n.__.__c;return t&&t.__e&&t.__e(n)}function D(n){var t,e,r;function u(u){if(t||(t=n()).then(function(n){e=n.default||n;},function(n){r=n;}),r)throw r;if(!e)throw t;return a(e,u)}return u.displayName="Lazy",u.__f=!0,u}function F$1(){this.u=null,this.o=null;}n.unmount=function(n){var t=n.__c;t&&t.__R&&t.__R(),t&&!0===n.__h&&(n.type=null),O$1&&O$1(n);},(L$1.prototype=new p).__c=function(n,t){var e=t.__c,r=this;null==r.t&&(r.t=[]),r.t.push(e);var u=U(r.__v),o=!1,i=function(){o||(o=!0,e.__R=null,u?u(l):l());};e.__R=i;var l=function(){if(!--r.__u){if(r.state.__e){var n=r.state.__e;r.__v.__k[0]=function n(t,e,r){return t&&(t.__v=null,t.__k=t.__k&&t.__k.map(function(t){return n(t,e,r)}),t.__c&&t.__c.__P===e&&(t.__e&&r.insertBefore(t.__e,t.__d),t.__c.__e=!0,t.__c.__P=r)),t}(n,n.__c.__P,n.__c.__O);}var t;for(r.setState({__e:r.__b=null});t=r.t.pop();)t.forceUpdate();}},f=!0===t.__h;r.__u++||f||r.setState({__e:r.__b=r.__v.__k[0]}),n.then(i,i);},L$1.prototype.componentWillUnmount=function(){this.t=[];},L$1.prototype.render=function(n,t){if(this.__b){if(this.__v.__k){var e=document.createElement("div"),r=this.__v.__k[0].__c;this.__v.__k[0]=function n(t,e,r){return t&&(t.__c&&t.__c.__H&&(t.__c.__H.__.forEach(function(n){"function"==typeof n.__c&&n.__c();}),t.__c.__H=null),null!=(t=C$1({},t)).__c&&(t.__c.__P===r&&(t.__c.__P=e),t.__c=null),t.__k=t.__k&&t.__k.map(function(t){return n(t,e,r)})),t}(this.__b,e,r.__O=r.__P);}this.__b=null;}var u=t.__e&&a(y,null,n.fallback);return u&&(u.__h=null),[a(y,null,t.__e?null:n.children),u]};var M$1=function(n,t,e){if(++e[1]===e[0]&&n.o.delete(t),n.props.revealOrder&&("t"!==n.props.revealOrder[0]||!n.o.size))for(e=n.u;e;){for(;e.length>3;)e.pop()();if(e[1]<e[0])break;n.u=e=e[2];}};function T$2(n){return this.getChildContext=function(){return n.context},n.children}function j$2(n){var t=this,e=n.i;t.componentWillUnmount=function(){N(null,t.l),t.l=null,t.i=null;},t.i&&t.i!==e&&t.componentWillUnmount(),n.__v?(t.l||(t.i=e,t.l={nodeType:1,parentNode:e,childNodes:[],appendChild:function(n){this.childNodes.push(n),t.i.appendChild(n);},insertBefore:function(n,e){this.childNodes.push(n),t.i.appendChild(n);},removeChild:function(n){this.childNodes.splice(this.childNodes.indexOf(n)>>>1,1),t.i.removeChild(n);}}),N(a(T$2,{context:t.context},n.__v),t.l)):t.l&&t.componentWillUnmount();}function I$1(n,t){return a(j$2,{__v:n,i:t})}(F$1.prototype=new p).__e=function(n){var t=this,e=U(t.__v),r=t.o.get(n);return r[0]++,function(u){var o=function(){t.props.revealOrder?(r.push(u),M$1(t,n,r)):u();};e?e(o):o();}},F$1.prototype.render=function(n){this.u=null,this.o=new Map;var t=w(n.children);n.revealOrder&&"b"===n.revealOrder[0]&&t.reverse();for(var e=t.length;e--;)this.o.set(t[e],this.u=[1,0,this.u]);return n.children},F$1.prototype.componentDidUpdate=F$1.prototype.componentDidMount=function(){var n=this;this.o.forEach(function(t,e){M$1(n,e,t);});};var W="undefined"!=typeof Symbol&&Symbol.for&&Symbol.for("react.element")||60103,P$1=/^(?:accent|alignment|arabic|baseline|cap|clip(?!PathU)|color|fill|flood|font|glyph(?!R)|horiz|marker(?!H|W|U)|overline|paint|stop|strikethrough|stroke|text(?!L)|underline|unicode|units|v|vector|vert|word|writing|x(?!C))[A-Z]/,V=function(n){return ("undefined"!=typeof Symbol&&"symbol"==typeof Symbol()?/fil|che|rad/i:/fil|che|ra/i).test(n)};function z$1(n,t,e){return null==t.__k&&(t.textContent=""),N(n,t),"function"==typeof e&&e(),n?n.__c:null}function B(n,t,e){return O(n,t),"function"==typeof e&&e(),n?n.__c:null}p.prototype.isReactComponent={},["componentWillMount","componentWillReceiveProps","componentWillUpdate"].forEach(function(n){Object.defineProperty(p.prototype,n,{configurable:!0,get:function(){return this["UNSAFE_"+n]},set:function(t){Object.defineProperty(this,n,{configurable:!0,writable:!0,value:t});}});});var H$1=n.event;function Z(){}function Y(){return this.cancelBubble}function $$1(){return this.defaultPrevented}n.event=function(n){return H$1&&(n=H$1(n)),n.persist=Z,n.isPropagationStopped=Y,n.isDefaultPrevented=$$1,n.nativeEvent=n};var q$1,G={configurable:!0,get:function(){return this.class}},J=n.vnode;n.vnode=function(n){var t=n.type,e=n.props,r=e;if("string"==typeof t){for(var u in r={},e){var o=e[u];"value"===u&&"defaultValue"in e&&null==o||("defaultValue"===u&&"value"in e&&null==e.value?u="value":"download"===u&&!0===o?o="":/ondoubleclick/i.test(u)?u="ondblclick":/^onchange(textarea|input)/i.test(u+t)&&!V(e.type)?u="oninput":/^on(Ani|Tra|Tou|BeforeInp)/.test(u)?u=u.toLowerCase():P$1.test(u)?u=u.replace(/[A-Z0-9]/,"-$&").toLowerCase():null===o&&(o=void 0),r[u]=o);}"select"==t&&r.multiple&&Array.isArray(r.value)&&(r.value=w(e.children).forEach(function(n){n.props.selected=-1!=r.value.indexOf(n.props.value);})),"select"==t&&null!=r.defaultValue&&(r.value=w(e.children).forEach(function(n){n.props.selected=r.multiple?-1!=r.defaultValue.indexOf(n.props.value):r.defaultValue==n.props.value;})),n.props=r;}t&&e.class!=e.className&&(G.enumerable="className"in e,null!=e.className&&(r.class=e.className),Object.defineProperty(r,"className",G)),n.$$typeof=W,J&&J(n);};var K=n.__r;n.__r=function(n){K&&K(n),q$1=n.__c;};var Q={ReactCurrentDispatcher:{current:{readContext:function(n){return q$1.__n[n.__c].props.value}}}};"object"==typeof performance&&"function"==typeof performance.now?performance.now.bind(performance):function(){return Date.now()};function fn(n){return a.bind(null,n)}function cn(n){return !!n&&n.$$typeof===W}function an(n){return cn(n)?S.apply(null,arguments):n}function sn(n){return !!n.__k&&(N(null,n),!0)}function hn(n){return n&&(n.base||1===n.nodeType&&n)||null}var pn=function(n,t){return n(t)};var React = {useState:l,useReducer:p$1,useEffect:y$1,useLayoutEffect:h$1,useRef:s$1,useImperativeHandle:_$1,useMemo:d$1,useCallback:A$1,useContext:F,useDebugValue:T$1,version:"16.8.0",Children:k$2,render:z$1,hydrate:B,unmountComponentAtNode:sn,createPortal:I$1,createElement:a,createContext:q,createFactory:fn,cloneElement:an,createRef:h,Fragment:y,isValidElement:cn,findDOMNode:hn,Component:p,PureComponent:E,memo:g$2,forwardRef:x$2,unstable_batchedUpdates:pn,StrictMode:y,Suspense:L$1,SuspenseList:F$1,lazy:D,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:Q};
+	var ArrowIcon = function ArrowIcon(props) {
+	  return o$2("svg", { ...props,
+	    children: o$2("path", {
+	      fillRule: "evenodd",
+	      d: "m11.657 8-4.95 4.95a1 1 0 0 1-1.414-1.414L8.828 8 5.293 4.464A1 1 0 1 1 6.707 3.05L11.657 8z"
+	    })
+	  });
+	};
 
-	/**
-	 * @typedef { { getElementLabel: Function, getTypeLabel: Function, getElementIcon: Function } } HeaderProvider
-	 */
+	ArrowIcon.defaultProps = {
+	  xmlns: "http://www.w3.org/2000/svg",
+	  width: "16",
+	  height: "16"
+	};
+
+	var ExternalLinkIcon = function ExternalLinkIcon(props) {
+	  return o$2("svg", { ...props,
+	    children: o$2("path", {
+	      fillRule: "evenodd",
+	      clipRule: "evenodd",
+	      d: "M12.637 12.637v-4.72h1.362v4.721c0 .36-.137.676-.411.95-.275.275-.591.412-.95.412H3.362c-.38 0-.703-.132-.967-.396A1.315 1.315 0 0 1 2 12.638V3.362c0-.38.132-.703.396-.967S2.982 2 3.363 2h4.553v1.363H3.363v9.274h9.274zM14 2H9.28l-.001 1.362h2.408L5.065 9.984l.95.95 6.622-6.622v2.409H14V2z",
+	      fill: "#818798"
+	    })
+	  });
+	};
+
+	ExternalLinkIcon.defaultProps = {
+	  width: "16",
+	  height: "16",
+	  fill: "none",
+	  xmlns: "http://www.w3.org/2000/svg"
+	};
+
+	var FeelRequiredIcon = function FeelRequiredIcon(props) {
+	  return o$2("svg", { ...props,
+	    children: [o$2("path", {
+	      d: "M5.8 7.06V5.95h4.307v1.11H5.8zm0 3.071v-1.11h4.307v1.11H5.8z",
+	      fill: "#505562"
+	    }), o$2("path", {
+	      fillRule: "evenodd",
+	      clipRule: "evenodd",
+	      d: "M8 3.268A4.732 4.732 0 1 0 12.732 8H14a6 6 0 1 1-6-6v1.268z",
+	      fill: "#505562"
+	    }), o$2("path", {
+	      d: "m11.28 6.072-.832-.56 1.016-1.224L10 3.848l.312-.912 1.392.584L11.632 2h1.032l-.072 1.52 1.392-.584.312.912-1.464.44 1.008 1.224-.832.552-.864-1.296-.864 1.304z",
+	      fill: "#505562"
+	    })]
+	  });
+	};
+
+	FeelRequiredIcon.defaultProps = {
+	  viewBox: "0 0 16 16",
+	  fill: "none",
+	  xmlns: "http://www.w3.org/2000/svg"
+	};
+
+	var FeelOptionalIcon = function FeelOptionalIcon(props) {
+	  return o$2("svg", { ...props,
+	    children: [o$2("path", {
+	      d: "M5.845 7.04V5.93h4.307v1.11H5.845zm0 3.07V9h4.307v1.11H5.845z",
+	      fill: "#505562"
+	    }), o$2("path", {
+	      fillRule: "evenodd",
+	      clipRule: "evenodd",
+	      d: "M3.286 8a4.714 4.714 0 1 0 9.428 0 4.714 4.714 0 0 0-9.428 0zM8 2a6 6 0 1 0 0 12A6 6 0 0 0 8 2z",
+	      fill: "#505562"
+	    })]
+	  });
+	};
+
+	FeelOptionalIcon.defaultProps = {
+	  viewBox: "0 0 16 16",
+	  fill: "none",
+	  xmlns: "http://www.w3.org/2000/svg"
+	};
 
-	/**
-	 * @param {Object} props
-	 * @param {Object} props.element,
-	 * @param {HeaderProvider} props.headerProvider
-	 */
 	function Header(props) {
 	  const {
 	    element,
 	    headerProvider
 	  } = props;
 	  const {
+	    getElementIcon,
+	    getDocumentationRef,
 	    getElementLabel,
-	    getTypeLabel,
-	    getElementIcon
+	    getTypeLabel
 	  } = headerProvider;
 	  const label = getElementLabel(element);
 	  const type = getTypeLabel(element);
+	  const documentationRef = getDocumentationRef && getDocumentationRef(element);
 	  const ElementIcon = getElementIcon(element);
 	  return o$2("div", {
 	    class: "bio-properties-panel-header",
@@ -61449,35 +61645,48 @@
 	        title: type,
 	        class: "bio-properties-panel-header-type",
 	        children: type
-	      }), getElementLabel(element) ? o$2("div", {
+	      }), label ? o$2("div", {
 	        title: label,
 	        class: "bio-properties-panel-header-label",
 	        children: label
 	      }) : null]
+	    }), o$2("div", {
+	      class: "bio-properties-panel-header-actions",
+	      children: documentationRef ? o$2("a", {
+	        rel: "noopener",
+	        class: "bio-properties-panel-header-link",
+	        href: documentationRef,
+	        title: "Open documentation",
+	        target: "_blank",
+	        children: o$2(ExternalLinkIcon, {})
+	      }) : null
 	    })]
 	  });
 	}
 
-	/**
-	 * @pinussilvestrus: we need to introduce our own hook to persist the previous
-	 * state on updates.
-	 *
-	 * cf. https://reactjs.org/docs/hooks-faq.html#how-to-get-the-previous-props-or-state
-	 */
-
-	function usePrevious(value) {
-	  const ref = s$1();
-	  y$1(() => {
-	    ref.current = value;
-	  });
-	  return ref.current;
-	}
-
 	const DescriptionContext = q({
 	  description: {},
 	  getDescriptionForId: () => {}
 	});
 
+	/**
+	 * @typedef {Function} <propertiesPanel.showEntry> callback
+	 *
+	 * @example
+	 *
+	 * useEvent('propertiesPanel.showEntry', ({ focus = false, ...rest }) => {
+	 *   // ...
+	 * });
+	 *
+	 * @param {Object} context
+	 * @param {boolean} [context.focus]
+	 *
+	 * @returns void
+	 */
+	const EventContext = q({
+	  eventBus: null
+	});
+
 	const LayoutContext = q({
 	  layout: {},
 	  setLayout: () => {},
@@ -61485,6 +61694,107 @@
 	  setLayoutForKey: () => {}
 	});
 
+	/**
+	 * Accesses the global DescriptionContext and returns a description for a given id and element.
+	 *
+	 * @example
+	 * ```jsx
+	 * function TextField(props) {
+	 *   const description = useDescriptionContext('input1', element);
+	 * }
+	 * ```
+	 *
+	 * @param {string} id
+	 * @param {djs.model.Base} element
+	 *
+	 * @returns {string}
+	 */
+
+	function useDescriptionContext(id, element) {
+	  const {
+	    getDescriptionForId
+	  } = F(DescriptionContext);
+	  return getDescriptionForId(id, element);
+	}
+
+	const DEFAULT_PRIORITY$6 = 1000;
+	/**
+	 * Subscribe to an event.
+	 *
+	 * @param {string} event
+	 * @param {Function} callback
+	 * @param {number} [priority]
+	 *
+	 * @returns {import('preact').Ref}
+	 */
+
+	function useEvent(event, callback, priority = DEFAULT_PRIORITY$6) {
+	  const {
+	    eventBus
+	  } = F(EventContext);
+	  y$1(() => {
+	    if (!eventBus) {
+	      return;
+	    }
+
+	    eventBus.on(event, priority, callback);
+	    return () => eventBus.off(event, callback);
+	  }, [callback, event, eventBus, priority]);
+	}
+
+	const HIGH_PRIORITY$l = 10000;
+	/**
+	 * Buffer events and re-fire during passive effect phase.
+	 *
+	 * @param {string[]} bufferedEvents
+	 * @param {Object} [eventBus]
+	 */
+
+	function useEventBuffer(bufferedEvents, eventBus) {
+	  const buffer = s$1([]),
+	        buffering = s$1(true);
+
+	  const createCallback = event => data => {
+	    if (buffering.current === true) {
+	      buffer.current.unshift([event, data]);
+	    }
+	  }; // (1) buffer events
+
+
+	  y$1(() => {
+	    if (!eventBus) {
+	      return;
+	    }
+
+	    const listeners = bufferedEvents.map(event => {
+	      return [event, createCallback(event)];
+	    });
+	    listeners.forEach(([event, callback]) => {
+	      eventBus.on(event, HIGH_PRIORITY$l, callback);
+	    });
+	    return () => {
+	      listeners.forEach(([event, callback]) => {
+	        eventBus.off(event, callback);
+	      });
+	    };
+	  }, [bufferedEvents, eventBus]); // (2) re-fire events
+
+	  y$1(() => {
+	    if (!eventBus) {
+	      return;
+	    }
+
+	    buffering.current = false;
+
+	    while (buffer.current.length) {
+	      const [event, data] = buffer.current.pop();
+	      eventBus.fire(event, data);
+	    }
+
+	    buffering.current = true;
+	  });
+	}
+
 	/**
 	 * Creates a state that persists in the global LayoutContext.
 	 *
@@ -61520,94 +61830,104 @@
 	}
 
 	/**
-	 * Accesses the global DescriptionContext and returns a description for a given id and element.
+	 * @pinussilvestrus: we need to introduce our own hook to persist the previous
+	 * state on updates.
 	 *
-	 * @example
-	 * ```jsx
-	 * function TextField(props) {
-	 *   const description = useDescriptionContext('input1', element);
-	 * }
-	 * ```
+	 * cf. https://reactjs.org/docs/hooks-faq.html#how-to-get-the-previous-props-or-state
+	 */
+
+	function usePrevious(value) {
+	  const ref = s$1();
+	  y$1(() => {
+	    ref.current = value;
+	  });
+	  return ref.current;
+	}
+
+	/**
+	 * Subscribe to `propertiesPanel.showEntry`.
 	 *
-	 * @param {string} id
-	 * @param {djs.model.Base} element
+	 * @param {Function} show
 	 *
-	 * @returns {string}
+	 * @returns {import('preact').Ref}
 	 */
 
-	function useDescriptionContext(id, element) {
+	function useShowEntryEvent(show) {
 	  const {
-	    getDescriptionForId
-	  } = F(DescriptionContext);
-	  return getDescriptionForId(id, element);
-	}
+	    onShow
+	  } = F(LayoutContext);
+	  const ref = s$1();
+	  const [focus, setFocus] = l(false);
+	  const onShowEntry = A$1(event => {
+	    if (show(event)) {
+	      if (isFunction(onShow)) {
+	        onShow();
+	      }
 
-	var ArrowIcon = function ArrowIcon(props) {
-	  return o$2("svg", { ...props,
-	    children: o$2("path", {
-	      fillRule: "evenodd",
-	      d: "m11.657 8-4.95 4.95a1 1 0 0 1-1.414-1.414L8.828 8 5.293 4.464A1 1 0 1 1 6.707 3.05L11.657 8z"
-	    })
-	  });
-	};
+	      if (event.focus && !focus) {
+	        setFocus(true);
+	      }
+	    }
+	  }, [show]);
+	  y$1(() => {
+	    if (focus && ref.current) {
+	      if (isFunction(ref.current.focus)) {
+	        ref.current.focus();
+	      }
 
-	ArrowIcon.defaultProps = {
-	  xmlns: "http://www.w3.org/2000/svg",
-	  width: "16",
-	  height: "16"
-	};
+	      if (isFunction(ref.current.select)) {
+	        ref.current.select();
+	      }
 
-	var FeelRequiredIcon = function FeelRequiredIcon(props) {
-	  return o$2("svg", { ...props,
-	    children: [o$2("path", {
-	      d: "M5.8 7.06V5.95h4.307v1.11H5.8zm0 3.071v-1.11h4.307v1.11H5.8z",
-	      fill: "#505562"
-	    }), o$2("path", {
-	      fillRule: "evenodd",
-	      clipRule: "evenodd",
-	      d: "M8 3.268A4.732 4.732 0 1 0 12.732 8H14a6 6 0 1 1-6-6v1.268z",
-	      fill: "#505562"
-	    }), o$2("path", {
-	      d: "m11.28 6.072-.832-.56 1.016-1.224L10 3.848l.312-.912 1.392.584L11.632 2h1.032l-.072 1.52 1.392-.584.312.912-1.464.44 1.008 1.224-.832.552-.864-1.296-.864 1.304z",
-	      fill: "#505562"
-	    })]
-	  });
-	};
+	      setFocus(false);
+	    }
+	  }, [focus]);
+	  useEvent('propertiesPanel.showEntry', onShowEntry);
+	  return ref;
+	}
 
-	FeelRequiredIcon.defaultProps = {
-	  viewBox: "0 0 16 16",
-	  fill: "none",
-	  xmlns: "http://www.w3.org/2000/svg"
-	};
+	/**
+	 * Subscribe to `propertiesPanel.showError`. On `propertiesPanel.showError` set
+	 * temporary error. Fire `propertiesPanel.showEntry` for temporary error to be
+	 * visible. Unset error on `propertiesPanel.updated`.
+	 *
+	 * @param {Function} show
+	 *
+	 * @returns {import('preact').Ref}
+	 */
 
-	var FeelOptionalIcon = function FeelOptionalIcon(props) {
-	  return o$2("svg", { ...props,
-	    children: [o$2("path", {
-	      d: "M5.845 7.04V5.93h4.307v1.11H5.845zm0 3.07V9h4.307v1.11H5.845z",
-	      fill: "#505562"
-	    }), o$2("path", {
-	      fillRule: "evenodd",
-	      clipRule: "evenodd",
-	      d: "M3.286 8a4.714 4.714 0 1 0 9.428 0 4.714 4.714 0 0 0-9.428 0zM8 2a6 6 0 1 0 0 12A6 6 0 0 0 8 2z",
-	      fill: "#505562"
-	    })]
-	  });
-	};
+	function useShowErrorEvent(show) {
+	  const {
+	    eventBus
+	  } = F(EventContext);
+	  const [temporaryError, setTemporaryError] = l(null);
+	  const onPropertiesPanelUpdated = A$1(() => setTemporaryError(null), []);
+	  useEvent('propertiesPanel.updated', onPropertiesPanelUpdated);
+	  const onShowError = A$1(event => {
+	    setTemporaryError(null);
+
+	    if (show(event)) {
+	      if (eventBus) {
+	        eventBus.fire('propertiesPanel.showEntry', event);
+	      }
 
-	FeelOptionalIcon.defaultProps = {
-	  viewBox: "0 0 16 16",
-	  fill: "none",
-	  xmlns: "http://www.w3.org/2000/svg"
-	};
+	      setTemporaryError(event.message);
+	    }
+	  }, [show]);
+	  useEvent('propertiesPanel.showError', onShowError);
+	  return temporaryError;
+	}
 
 	function Group(props) {
 	  const {
 	    element,
 	    entries = [],
 	    id,
-	    label
+	    label,
+	    shouldOpen = false
 	  } = props;
-	  const [open, setOpen] = useLayoutState(['groups', id, 'open'], false);
+	  const [open, setOpen] = useLayoutState(['groups', id, 'open'], shouldOpen);
+	  const onShow = A$1(() => setOpen(true), [setOpen]);
 
 	  const toggleOpen = () => setOpen(!open);
 
@@ -61630,6 +61950,9 @@
 	    });
 	    setEdited(hasOneEditedEntry);
 	  }, [entries]);
+	  const propertiesPanelContext = { ...F(LayoutContext),
+	    onShow
+	  };
 	  return o$2("div", {
 	    class: "bio-properties-panel-group",
 	    "data-group-id": 'group-' + id,
@@ -61652,15 +61975,18 @@
 	      })]
 	    }), o$2("div", {
 	      class: classnames('bio-properties-panel-group-entries', open ? 'open' : ''),
-	      children: entries.map(entry => {
-	        const {
-	          component: Component,
-	          id
-	        } = entry;
-	        return a(Component, { ...entry,
-	          key: id,
-	          element: element
-	        });
+	      children: o$2(LayoutContext.Provider, {
+	        value: propertiesPanelContext,
+	        children: entries.map(entry => {
+	          const {
+	            component: Component,
+	            id
+	          } = entry;
+	          return a(Component, { ...entry,
+	            element: element,
+	            key: id
+	          });
+	        })
 	      })
 	    })]
 	  });
@@ -61677,6 +62003,7 @@
 	  open: true
 	};
 	const DEFAULT_DESCRIPTION = {};
+	const bufferedEvents = ['propertiesPanel.showEntry', 'propertiesPanel.showError'];
 	/**
 	 * @typedef { {
 	 *    component: import('preact').Component,
@@ -61708,7 +62035,8 @@
 	 *    component?: import('preact').Component,
 	 *    entries: Array<EntryDefinition>,
 	 *    id: String,
-	 *    label: String
+	 *    label: String,
+	 *    shouldOpen?: Boolean
 	 * } } GroupDefinition
 	 *
 	 *  @typedef { {
@@ -61735,6 +62063,7 @@
 	 * @param {Function} [props.layoutChanged]
 	 * @param {DescriptionConfig} [props.descriptionConfig]
 	 * @param {Function} [props.descriptionLoaded]
+	 * @param {Object} [props.eventBus]
 	 */
 
 	function PropertiesPanel(props) {
@@ -61745,7 +62074,8 @@
 	    layoutConfig = {},
 	    layoutChanged,
 	    descriptionConfig = {},
-	    descriptionLoaded
+	    descriptionLoaded,
+	    eventBus
 	  } = props; // set-up layout context
 
 	  const [layout, setLayout] = l(createLayout(layoutConfig));
@@ -61786,6 +62116,13 @@
 	    description,
 	    getDescriptionForId
 	  };
+	  useEventBuffer(bufferedEvents, eventBus);
+	  const eventContext = {
+	    eventBus
+	  };
+	  const propertiesPanelContext = {
+	    element
+	  };
 
 	  if (!element) {
 	    return o$2("div", {
@@ -61794,28 +62131,34 @@
 	    });
 	  }
 
-	  return o$2(DescriptionContext.Provider, {
-	    value: descriptionContext,
-	    children: o$2(LayoutContext.Provider, {
-	      value: layoutContext,
-	      children: o$2("div", {
-	        class: classnames('bio-properties-panel', layout.open ? 'open' : ''),
-	        children: [o$2(Header, {
-	          element: element,
-	          headerProvider: headerProvider
-	        }), o$2("div", {
-	          class: "bio-properties-panel-scroll-container",
-	          children: groups.map(group => {
-	            const {
-	              component: Component = Group,
-	              id
-	            } = group;
-	            return a(Component, { ...group,
-	              key: id,
-	              element: element
-	            });
+	  return o$2(LayoutContext.Provider, {
+	    value: propertiesPanelContext,
+	    children: o$2(DescriptionContext.Provider, {
+	      value: descriptionContext,
+	      children: o$2(LayoutContext.Provider, {
+	        value: layoutContext,
+	        children: o$2(EventContext.Provider, {
+	          value: eventContext,
+	          children: o$2("div", {
+	            class: classnames('bio-properties-panel', layout.open ? 'open' : ''),
+	            children: [o$2(Header, {
+	              element: element,
+	              headerProvider: headerProvider
+	            }), o$2("div", {
+	              class: "bio-properties-panel-scroll-container",
+	              children: groups.map(group => {
+	                const {
+	                  component: Component = Group,
+	                  id
+	                } = group;
+	                return a(Component, { ...group,
+	                  key: id,
+	                  element: element
+	                });
+	              })
+	            })]
 	          })
-	        })]
+	        })
 	      })
 	    })
 	  });
@@ -61850,13 +62193,16 @@
 	  }
 	}
 
+	const noop$2 = () => {};
+
 	function Checkbox(props) {
 	  const {
 	    id,
 	    label,
 	    onChange,
 	    disabled,
-	    value = false
+	    value = false,
+	    show = noop$2
 	  } = props;
 
 	  const handleChange = ({
@@ -61865,9 +62211,11 @@
 	    onChange(target.checked);
 	  };
 
+	  const ref = useShowEntryEvent(show);
 	  return o$2("div", {
 	    class: "bio-properties-panel-checkbox",
 	    children: [o$2("input", {
+	      ref: ref,
 	      id: prefixId$6(id),
 	      name: id,
 	      type: "checkbox",
@@ -61902,18 +62250,24 @@
 	    label,
 	    getValue,
 	    setValue,
-	    disabled
+	    disabled,
+	    show = noop$2
 	  } = props;
 	  const value = getValue(element);
+	  const error = useShowErrorEvent(show);
 	  return o$2("div", {
 	    class: "bio-properties-panel-entry bio-properties-panel-checkbox-entry",
 	    "data-entry-id": id,
 	    children: [o$2(Checkbox, {
+	      disabled: disabled,
 	      id: id,
 	      label: label,
 	      onChange: setValue,
-	      value: value,
-	      disabled: disabled
+	      show: show,
+	      value: value
+	    }), error && o$2("div", {
+	      class: "bio-properties-panel-error",
+	      children: error
 	    }), o$2(Description, {
 	      forId: id,
 	      element: element,
@@ -61929,6 +62283,25 @@
 	  return `bio-properties-panel-${id}`;
 	}
 
+	const noop$1 = () => {};
+	/**
+	 * @typedef { { value: string, label: string, disabled: boolean } } Option
+	 */
+
+	/**
+	 * Provides basic select input.
+	 *
+	 * @param {object} props
+	 * @param {string} props.id
+	 * @param {string[]} props.path
+	 * @param {string} props.label
+	 * @param {Function} props.onChange
+	 * @param {Array<Option>} [props.options]
+	 * @param {string} props.value
+	 * @param {boolean} [props.disabled]
+	 */
+
+
 	function Select(props) {
 	  const {
 	    id,
@@ -61936,8 +62309,10 @@
 	    onChange,
 	    options = [],
 	    value,
-	    disabled
+	    disabled,
+	    show = noop$1
 	  } = props;
+	  const ref = useShowEntryEvent(show);
 
 	  const handleChange = ({
 	    target
@@ -61952,6 +62327,7 @@
 	      class: "bio-properties-panel-label",
 	      children: label
 	    }), o$2("select", {
+	      ref: ref,
 	      id: prefixId$4(id),
 	      name: id,
 	      class: "bio-properties-panel-input",
@@ -61990,12 +62366,14 @@
 	    getValue,
 	    setValue,
 	    getOptions,
-	    disabled
+	    disabled,
+	    show = noop$1
 	  } = props;
 	  const value = getValue(element);
 	  const options = getOptions(element);
+	  const error = useShowErrorEvent(show);
 	  return o$2("div", {
-	    class: "bio-properties-panel-entry",
+	    class: classnames('bio-properties-panel-entry', error ? 'has-error' : ''),
 	    "data-entry-id": id,
 	    children: [o$2(Select, {
 	      id: id,
@@ -62003,7 +62381,11 @@
 	      value: value,
 	      onChange: setValue,
 	      options: options,
-	      disabled: disabled
+	      disabled: disabled,
+	      show: show
+	    }), error && o$2("div", {
+	      class: "bio-properties-panel-error",
+	      children: error
 	    }), o$2(Description, {
 	      forId: id,
 	      element: element,
@@ -62131,6 +62513,8 @@
 	  return `bio-properties-panel-${id}`;
 	}
 
+	const noop = () => {};
+
 	function Textfield(props) {
 	  const {
 	    debounce,
@@ -62139,8 +62523,10 @@
 	    label,
 	    onInput,
 	    feel = false,
-	    value = ''
+	    value = '',
+	    show = noop
 	  } = props;
+	  const ref = useShowEntryEvent(show);
 	  const handleInput = d$1(() => {
 	    return debounce(({
 	      target
@@ -62156,6 +62542,7 @@
 	        label: label
 	      })]
 	    }), o$2("input", {
+	      ref: ref,
 	      id: prefixId$1(id),
 	      type: "text",
 	      name: id,
@@ -62195,53 +62582,61 @@
 	    label,
 	    getValue,
 	    setValue,
-	    validate
+	    validate,
+	    show = noop
 	  } = props;
-	  const [error, setError] = l(null);
-	  const [invalidValueCache, setInvalidValueCache] = l(null);
+	  const [cachedInvalidValue, setCachedInvalidValue] = l(null);
+	  const [validationError, setValidationError] = l(null);
 	  let value = getValue(element);
-	  const prevValue = usePrevious(value); // validate again when value prop changed
-
+	  const previousValue = usePrevious(value);
 	  y$1(() => {
-	    const err = validate ? validate(value) : null;
-	    setError(err);
-	  }, [value]); // validate on change
+	    if (isFunction(validate)) {
+	      const newValidationError = validate(value) || null;
+	      setValidationError(newValidationError);
+	    }
+	  }, [value]);
 
-	  const handleChange = newValue => {
-	    const err = validate ? validate(newValue) : null;
+	  const onInput = newValue => {
+	    let newValidationError = null;
 
-	    if (err) {
-	      setInvalidValueCache(newValue);
+	    if (isFunction(validate)) {
+	      newValidationError = validate(newValue) || null;
+	    }
+
+	    if (newValidationError) {
+	      setCachedInvalidValue(newValue);
 	    } else {
 	      setValue(newValue);
 	    }
 
-	    setError(err);
-	  }; // keep showing invalid value on errors, although it was not set
-
+	    setValidationError(newValidationError);
+	  };
 
-	  if (prevValue === value && error) {
-	    value = invalidValueCache;
+	  if (previousValue === value && validationError) {
+	    value = cachedInvalidValue;
 	  }
 
+	  const temporaryError = useShowErrorEvent(show);
+	  const error = temporaryError || validationError;
 	  return o$2("div", {
 	    class: classnames('bio-properties-panel-entry', error ? 'has-error' : ''),
 	    "data-entry-id": id,
 	    children: [o$2(Textfield, {
-	      id: id,
-	      label: label,
-	      value: value,
-	      onInput: handleChange,
 	      debounce: debounce,
 	      disabled: disabled,
-	      feel: feel
+	      feel: feel,
+	      id: id,
+	      label: label,
+	      onInput: onInput,
+	      show: show,
+	      value: value
+	    }), error && o$2("div", {
+	      class: "bio-properties-panel-error",
+	      children: error
 	    }), o$2(Description, {
 	      forId: id,
 	      element: element,
 	      value: description
-	    }), error && o$2("div", {
-	      class: "bio-properties-panel-error",
-	      children: error
 	    })]
 	  });
 	}
@@ -62270,6 +62665,145 @@
 	  debounceInput: ['factory', debounceInput]
 	};
 
+	var require$$0 = /*@__PURE__*/getAugmentedNamespace(index_esm);
+
+	const {
+	  isNil: isNil$1,
+	  isString: isString$1,
+	  isUndefined: isUndefined$2
+	} = require$$0;
+
+	/**
+	 * Get path from model element and optional parent model element. Falls back to
+	 * returning null.
+	 *
+	 * @param {ModdleElement} moddleElement
+	 * @param {ModdleElement} [parentModdleElement]
+	 *
+	 * @returns {string[]|null}
+	 */
+	var getPath = function(moddleElement, parentModdleElement) {
+	  if (!moddleElement) {
+	    return null;
+	  }
+
+	  if (moddleElement === parentModdleElement) {
+	    return [];
+	  }
+
+	  let path = [],
+	      parent;
+
+	  do {
+	    parent = moddleElement.$parent;
+
+	    if (!parent) {
+	      if (moddleElement.$instanceOf('bpmn:Definitions')) {
+	        break;
+	      } else {
+	        return null;
+	      }
+	    }
+
+	    path = [ ...getPropertyName(moddleElement, parent), ...path ];
+
+	    moddleElement = parent;
+
+	    if (parentModdleElement && moddleElement === parentModdleElement) {
+	      break;
+	    }
+	  } while (parent);
+
+	  return path;
+	};
+
+	/**
+	 * Get property name from model element and parent model element.
+	 *
+	 * @param {ModdleElement} moddleElement
+	 * @param {ModdleElement} parentModdleElement
+	 *
+	 * @returns {string[]}
+	 */
+	function getPropertyName(moddleElement, parentModdleElement) {
+	  for (let property of Object.values(parentModdleElement.$descriptor.propertiesByName)) {
+	    if (property.isMany) {
+	      if (parentModdleElement.get(property.name).includes(moddleElement)) {
+	        return [
+	          property.name,
+	          parentModdleElement.get(property.name).indexOf(moddleElement)
+	        ];
+	      }
+	    } else {
+	      if (parentModdleElement.get(property.name) === moddleElement) {
+	        return [ property.name ];
+	      }
+	    }
+	  }
+
+	  return [];
+	}
+
+	/**
+	 * @param {(string|(number|string)[])[]} paths
+	 *
+	 * @returns {(number|string)[]}
+	 */
+	var pathConcat = function(...paths) {
+	  let concatenatedPaths = [];
+
+	  for (let path of paths) {
+	    if (isNil$1(path) || isUndefined$2(path)) {
+	      return null;
+	    }
+
+	    if (isString$1(path)) {
+	      path = [ path ];
+	    }
+
+	    concatenatedPaths = concatenatedPaths.concat(path);
+	  }
+
+	  return concatenatedPaths;
+	};
+
+	/**
+	 * @param {string|(number|string)[]} a
+	 * @param {string|(number|string)[]} b
+	 * @param {string} [separator]
+	 *
+	 * @returns {boolean}
+	 */
+	var pathEquals = function(a, b, separator = '.') {
+	  if (isNil$1(a) || isUndefined$2(a) || isNil$1(b) || isUndefined$2(b)) {
+	    return false;
+	  }
+
+	  if (!isString$1(a)) {
+	    a = pathStringify(a, separator);
+	  }
+
+	  if (!isString$1(b)) {
+	    b = pathStringify(b, separator);
+	  }
+
+	  return a === b;
+	};
+
+	/**
+	 * @param {(number|string)[]} path
+	 * @param {string} [separator]
+	 *
+	 * @returns {string}
+	 */
+	function pathStringify(path, separator = '.') {
+	  if (isNil$1(path) || isUndefined$2(path)) {
+	    return null;
+	  }
+
+	  return path.join(separator);
+	}
+
 	/**
 	 * Failsafe remove an element from a collection
 	 *
@@ -62340,6 +62874,56 @@
 
 	});
 
+	function useService(type, strict) {
+	  const {
+	    getService
+	  } = F(BpmnPropertiesPanelContext);
+	  return getService(type, strict);
+	}
+
+	/**
+	 * Returns a memoized callback to be passed as `show` prop. Callback returns
+	 * true if (1) ID and path match or (2) ID matches and matcher returns true.
+	 *
+	 * @example
+	 *
+	 * // using path
+	 * const show = useShowCallback(businessObject, [ 'foo' ]);
+	 *
+	 * @example
+	 *
+	 * // using matcher
+	 * const show = useShowCallback(businessObject, (event) => event.foo === 'bar');
+	 *
+	 * @param {Object} businessObject
+	 * @param {string[]|Function} matcher
+	 *
+	 * @returns {Function}
+	 */
+
+	function useShowCallback(businessObject, matcher) {
+	  return A$1(event => {
+	    const {
+	      id,
+	      path
+	    } = event;
+
+	    if (id !== businessObject.get('id')) {
+	      return false;
+	    }
+
+	    if (isArray(matcher)) {
+	      return path && pathEquals(path, matcher);
+	    }
+
+	    if (isFunction(matcher)) {
+	      return !!matcher(event);
+	    }
+
+	    return false;
+	  }, [businessObject, matcher]);
+	}
+
 	function _extends$1m() { _extends$1m = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1m.apply(this, arguments); }
 	var AssociationIcon = (({
 	  styles = {},
@@ -63559,6 +64143,13 @@
 	  return type;
 	}
 	const PanelHeaderProvider = {
+	  getDocumentationRef: element => {
+	    const elementTemplates = getTemplatesService();
+
+	    if (elementTemplates) {
+	      return getTemplateDocumentation(element, elementTemplates);
+	    }
+	  },
 	  getElementLabel: element => {
 	    if (is$1(element, 'bpmn:Process')) {
 	      return getBusinessObject(element).name;
@@ -63568,9 +64159,34 @@
 	  },
 	  getElementIcon: element => {
 	    const concreteType = getConcreteType(element);
+	    const elementTemplates = getTemplatesService();
+
+	    if (elementTemplates) {
+	      const template = getTemplate(element, elementTemplates);
+
+	      if (template && template.icon) {
+	        return () => o$2("img", {
+	          class: "bio-properties-panel-header-template-icon",
+	          width: "32",
+	          height: "32",
+	          src: template.icon.contents
+	        });
+	      }
+	    }
+
 	    return iconsByType[concreteType];
 	  },
 	  getTypeLabel: element => {
+	    const elementTemplates = getTemplatesService();
+
+	    if (elementTemplates) {
+	      const template = getTemplate(element, elementTemplates);
+
+	      if (template && template.name) {
+	        return template.name;
+	      }
+	    }
+
 	    const concreteType = getConcreteType(element);
 	    return concreteType.replace(/(\B[A-Z])/g, ' $1').replace(/(\bNon Interrupting)/g, '($1)');
 	  }
@@ -63616,8 +64232,7 @@
 	  }
 
 	  return businessObject.conditionExpression && is$1(sourceBusinessObject, 'bpmn:Activity');
-	} // helpers //////////
-
+	}
 
 	function isPlane$1(element) {
 	  // Backwards compatibility for bpmn-js<8
@@ -63625,6 +64240,22 @@
 	  return is$1(di, 'bpmndi:BPMNPlane');
 	}
 
+	function getTemplatesService() {
+	  // eslint-disable-next-line react-hooks/rules-of-hooks
+	  return useService('elementTemplates', false);
+	}
+
+	function getTemplate(element, elementTemplates) {
+	  const templateId = elementTemplates._getTemplateId(element);
+
+	  return templateId && elementTemplates.get(templateId);
+	}
+
+	function getTemplateDocumentation(element, elementTemplates) {
+	  const template = getTemplate(element, elementTemplates);
+	  return template && template.documentationRef;
+	}
+
 	function BpmnPropertiesPanel(props) {
 	  const {
 	    element,
@@ -63772,7 +64403,8 @@
 	      layoutConfig: layoutConfig,
 	      layoutChanged: onLayoutChanged,
 	      descriptionConfig: descriptionConfig,
-	      descriptionLoaded: onDescriptionLoaded
+	      descriptionLoaded: onDescriptionLoaded,
+	      eventBus: eventBus
 	    })
 	  });
 	} // helpers //////////////////////////
@@ -63790,7 +64422,7 @@
 	  return element && elementRegistry.get(element.id);
 	}
 
-	const DEFAULT_PRIORITY$6 = 1000;
+	const DEFAULT_PRIORITY$7 = 1000;
 	/**
 	 * @typedef { import('@bpmn-io/properties-panel').GroupDefinition } GroupDefinition
 	 * @typedef { import('@bpmn-io/properties-panel').ListGroupDefinition } ListGroupDefinition
@@ -63873,7 +64505,7 @@
 	  registerProvider(priority, provider) {
 	    if (!provider) {
 	      provider = priority;
-	      priority = DEFAULT_PRIORITY$6;
+	      priority = DEFAULT_PRIORITY$7;
 	    }
 
 	    if (typeof provider.getGroups !== 'function') {
@@ -63985,13 +64617,6 @@
 	  propertiesPanel: ['type', BpmnPropertiesPanelRenderer]
 	};
 
-	function useService (type, strict) {
-	  const {
-	    getService
-	  } = F(BpmnPropertiesPanelContext);
-	  return getService(type, strict);
-	}
-
 	function ReferenceSelectEntry(props) {
 	  const {
 	    autoFocusEntry,
@@ -64647,6 +65272,9 @@
 	    return options;
 	  };
 
+	  const businessObject = getBusinessObject(element),
+	        path = pathConcat(getPath(errorEventDefinition, businessObject), 'errorRef');
+	  const show = useShowCallback(businessObject, path);
 	  return ReferenceSelectEntry({
 	    element,
 	    id: 'errorRef',
@@ -64654,7 +65282,8 @@
 	    autoFocusEntry: 'errorName',
 	    getValue,
 	    setValue,
-	    getOptions
+	    getOptions,
+	    show
 	  });
 	}
 
@@ -64714,13 +65343,17 @@
 	    });
 	  };
 
+	  const businessObject = getBusinessObject(element),
+	        path = pathConcat(getPath(error, businessObject), 'errorCode');
+	  const show = useShowCallback(businessObject, path);
 	  return TextfieldEntry({
 	    element,
 	    id: 'errorCode',
 	    label: translate('Code'),
 	    getValue,
 	    setValue,
-	    debounce
+	    debounce,
+	    show
 	  });
 	} // helper /////////////////////////
 
@@ -65266,6 +65899,9 @@
 	    return options;
 	  };
 
+	  const businessObject = getBusinessObject(element),
+	        path = pathConcat(getPath(messageEventDefinition, businessObject), 'messageRef');
+	  const show = useShowCallback(businessObject, path);
 	  return ReferenceSelectEntry({
 	    element,
 	    id: 'messageRef',
@@ -65273,7 +65909,8 @@
 	    autoFocusEntry: 'messageName',
 	    getValue,
 	    setValue,
-	    getOptions
+	    getOptions,
+	    show
 	  });
 	}
 
@@ -65300,13 +65937,17 @@
 	    });
 	  };
 
+	  const businessObject = getBusinessObject(element),
+	        path = pathConcat(getPath(message, businessObject), 'name');
+	  const show = useShowCallback(businessObject, path);
 	  return TextfieldEntry({
 	    element,
 	    id: 'messageName',
 	    label: translate('Name'),
 	    getValue,
 	    setValue,
-	    debounce
+	    debounce,
+	    show
 	  });
 	} // helper /////////////////////////