camunda-bpmn-js 5.6.1 → 5.7.0

package/dist/camunda-cloud-modeler.development.js

@@ -19001,8 +19001,8 @@
         var pathData = pathMap.getScaledPath('EVENT_MESSAGE', {
           xScaleFactor: 0.9,
           yScaleFactor: 0.9,
-          containerWidth: element.width,
-          containerHeight: element.height,
+          containerWidth: attrs.width || element.width,
+          containerHeight: attrs.height || element.height,
           position: {
             mx: 0.235,
             my: 0.315
@@ -19026,17 +19026,23 @@
         return messagePath;
       },
       'bpmn:TimerEventDefinition': function(parentGfx, element, attrs = {}) {
-        var circle = drawCircle(parentGfx, element.width, element.height, 0.2 * element.height, {
+        var baseWidth = attrs.width || element.width;
+        var baseHeight = attrs.height || element.height;
+
+        // use a lighter stroke for event suprocess icons
+        var strokeWidth = attrs.width ? 1 : 2;
+
+        var circle = drawCircle(parentGfx, baseWidth, baseHeight, 0.2 * baseHeight, {
           fill: getFillColor(element, defaultFillColor, attrs.fill),
           stroke: getStrokeColor$1(element, defaultStrokeColor, attrs.stroke),
-          strokeWidth: 2
+          strokeWidth: strokeWidth
         });
 
         var pathData = pathMap.getScaledPath('EVENT_TIMER_WH', {
           xScaleFactor: 0.75,
           yScaleFactor: 0.75,
-          containerWidth: element.width,
-          containerHeight: element.height,
+          containerWidth: baseWidth,
+          containerHeight: baseHeight,
           position: {
             mx: 0.5,
             my: 0.5
@@ -19045,23 +19051,23 @@
 
         drawPath(parentGfx, pathData, {
           stroke: getStrokeColor$1(element, defaultStrokeColor, attrs.stroke),
-          strokeWidth: 2
+          strokeWidth: strokeWidth
         });
 
         for (var i = 0; i < 12; i++) {
           var linePathData = pathMap.getScaledPath('EVENT_TIMER_LINE', {
             xScaleFactor: 0.75,
             yScaleFactor: 0.75,
-            containerWidth: element.width,
-            containerHeight: element.height,
+            containerWidth: baseWidth,
+            containerHeight: baseHeight,
             position: {
               mx: 0.5,
               my: 0.5
             }
           });
 
-          var width = element.width / 2,
-              height = element.height / 2;
+          var width = baseWidth / 2,
+              height = baseHeight / 2;
 
           drawPath(parentGfx, linePathData, {
             strokeWidth: 1,
@@ -19076,8 +19082,8 @@
         var pathData = pathMap.getScaledPath('EVENT_ESCALATION', {
           xScaleFactor: 1,
           yScaleFactor: 1,
-          containerWidth: event.width,
-          containerHeight: event.height,
+          containerWidth: attrs.width || event.width,
+          containerHeight: attrs.height || event.height,
           position: {
             mx: 0.5,
             my: 0.2
@@ -19098,8 +19104,8 @@
         var pathData = pathMap.getScaledPath('EVENT_CONDITIONAL', {
           xScaleFactor: 1,
           yScaleFactor: 1,
-          containerWidth: event.width,
-          containerHeight: event.height,
+          containerWidth: attrs.width || event.width,
+          containerHeight: attrs.height || event.height,
           position: {
             mx: 0.5,
             my: 0.222
@@ -19138,8 +19144,8 @@
         var pathData = pathMap.getScaledPath('EVENT_ERROR', {
           xScaleFactor: 1.1,
           yScaleFactor: 1.1,
-          containerWidth: event.width,
-          containerHeight: event.height,
+          containerWidth: attrs.width || event.width,
+          containerHeight: attrs.height || event.height,
           position: {
             mx: 0.2,
             my: 0.722
@@ -19184,8 +19190,8 @@
         var pathData = pathMap.getScaledPath('EVENT_COMPENSATION', {
           xScaleFactor: 1,
           yScaleFactor: 1,
-          containerWidth: event.width,
-          containerHeight: event.height,
+          containerWidth: attrs.width || event.width,
+          containerHeight: attrs.height || event.height,
           position: {
             mx: 0.22,
             my: 0.5
@@ -19206,8 +19212,8 @@
         var pathData = pathMap.getScaledPath('EVENT_SIGNAL', {
           xScaleFactor: 0.9,
           yScaleFactor: 0.9,
-          containerWidth: event.width,
-          containerHeight: event.height,
+          containerWidth: attrs.width || event.width,
+          containerHeight: attrs.height || event.height,
           position: {
             mx: 0.5,
             my: 0.2
@@ -19228,10 +19234,10 @@
         var pathData = pathMap.getScaledPath('EVENT_MULTIPLE', {
           xScaleFactor: 1.1,
           yScaleFactor: 1.1,
-          containerWidth: event.width,
-          containerHeight: event.height,
+          containerWidth: attrs.width || event.width,
+          containerHeight: attrs.height || event.height,
           position: {
-            mx: 0.222,
+            mx: 0.211,
             my: 0.36
           }
         });
@@ -19242,6 +19248,7 @@
 
         return drawPath(parentGfx, pathData, {
           fill,
+          stroke: getStrokeColor$1(event, defaultStrokeColor, attrs.stroke),
           strokeWidth: 1
         });
       },
@@ -19249,8 +19256,8 @@
         var pathData = pathMap.getScaledPath('EVENT_PARALLEL_MULTIPLE', {
           xScaleFactor: 1.2,
           yScaleFactor: 1.2,
-          containerWidth: event.width,
-          containerHeight: event.height,
+          containerWidth: attrs.width || event.width,
+          containerHeight: attrs.height || event.height,
           position: {
             mx: 0.458,
             my: 0.194
@@ -19274,57 +19281,59 @@
       }
     };
 
-    function renderEventIcon(element, parentGfx, attrs = {}) {
+    function renderEventIcon(element, parentGfx, attrs = {}, proxyElement) {
       var semantic = getBusinessObject$2(element),
           isThrowing = isThrowEvent(semantic);
 
+      var nodeElement = proxyElement || element;
+
       if (semantic.get('eventDefinitions') && semantic.get('eventDefinitions').length > 1) {
         if (semantic.get('parallelMultiple')) {
-          return eventIconRenderers[ 'bpmn:ParallelMultipleEventDefinition' ](parentGfx, element, attrs, isThrowing);
+          return eventIconRenderers[ 'bpmn:ParallelMultipleEventDefinition' ](parentGfx, nodeElement, attrs, isThrowing);
         }
         else {
-          return eventIconRenderers[ 'bpmn:MultipleEventDefinition' ](parentGfx, element, attrs, isThrowing);
+          return eventIconRenderers[ 'bpmn:MultipleEventDefinition' ](parentGfx, nodeElement, attrs, isThrowing);
         }
       }
 
       if (isTypedEvent(semantic, 'bpmn:MessageEventDefinition')) {
-        return eventIconRenderers[ 'bpmn:MessageEventDefinition' ](parentGfx, element, attrs, isThrowing);
+        return eventIconRenderers[ 'bpmn:MessageEventDefinition' ](parentGfx, nodeElement, attrs, isThrowing);
       }
 
       if (isTypedEvent(semantic, 'bpmn:TimerEventDefinition')) {
-        return eventIconRenderers[ 'bpmn:TimerEventDefinition' ](parentGfx, element, attrs, isThrowing);
+        return eventIconRenderers[ 'bpmn:TimerEventDefinition' ](parentGfx, nodeElement, attrs, isThrowing);
       }
 
       if (isTypedEvent(semantic, 'bpmn:ConditionalEventDefinition')) {
-        return eventIconRenderers[ 'bpmn:ConditionalEventDefinition' ](parentGfx, element, attrs, isThrowing);
+        return eventIconRenderers[ 'bpmn:ConditionalEventDefinition' ](parentGfx, nodeElement, attrs, isThrowing);
       }
 
       if (isTypedEvent(semantic, 'bpmn:SignalEventDefinition')) {
-        return eventIconRenderers[ 'bpmn:SignalEventDefinition' ](parentGfx, element, attrs, isThrowing);
+        return eventIconRenderers[ 'bpmn:SignalEventDefinition' ](parentGfx, nodeElement, attrs, isThrowing);
       }
 
       if (isTypedEvent(semantic, 'bpmn:EscalationEventDefinition')) {
-        return eventIconRenderers[ 'bpmn:EscalationEventDefinition' ](parentGfx, element, attrs, isThrowing);
+        return eventIconRenderers[ 'bpmn:EscalationEventDefinition' ](parentGfx, nodeElement, attrs, isThrowing);
       }
 
       if (isTypedEvent(semantic, 'bpmn:LinkEventDefinition')) {
-        return eventIconRenderers[ 'bpmn:LinkEventDefinition' ](parentGfx, element, attrs, isThrowing);
+        return eventIconRenderers[ 'bpmn:LinkEventDefinition' ](parentGfx, nodeElement, attrs, isThrowing);
       }
 
       if (isTypedEvent(semantic, 'bpmn:ErrorEventDefinition')) {
-        return eventIconRenderers[ 'bpmn:ErrorEventDefinition' ](parentGfx, element, attrs, isThrowing);
+        return eventIconRenderers[ 'bpmn:ErrorEventDefinition' ](parentGfx, nodeElement, attrs, isThrowing);
       }
 
       if (isTypedEvent(semantic, 'bpmn:CancelEventDefinition')) {
-        return eventIconRenderers[ 'bpmn:CancelEventDefinition' ](parentGfx, element, attrs, isThrowing);
+        return eventIconRenderers[ 'bpmn:CancelEventDefinition' ](parentGfx, nodeElement, attrs, isThrowing);
       }
 
       if (isTypedEvent(semantic, 'bpmn:CompensateEventDefinition')) {
-        return eventIconRenderers[ 'bpmn:CompensateEventDefinition' ](parentGfx, element, attrs, isThrowing);
+        return eventIconRenderers[ 'bpmn:CompensateEventDefinition' ](parentGfx, nodeElement, attrs, isThrowing);
       }
 
       if (isTypedEvent(semantic, 'bpmn:TerminateEventDefinition')) {
-        return eventIconRenderers[ 'bpmn:TerminateEventDefinition' ](parentGfx, element, attrs, isThrowing);
+        return eventIconRenderers[ 'bpmn:TerminateEventDefinition' ](parentGfx, nodeElement, attrs, isThrowing);
       }
 
       return null;
@@ -19746,14 +19755,23 @@
     function renderSubProcess(parentGfx, element, attrs = {}) {
       var activity = renderActivity(parentGfx, element, attrs);
 
+      var expanded = isExpanded$1(element);
+
       if (isEventSubProcess(element)) {
         attr(activity, {
           strokeDasharray: '0, 5.5',
           strokeWidth: 2.5
         });
-      }
 
-      var expanded = isExpanded$1(element);
+        if (!expanded) {
+          var flowElements = getBusinessObject$2(element).flowElements || [];
+          var startEvents = flowElements.filter(e => is$5(e, 'bpmn:StartEvent'));
+
+          if (startEvents.length === 1) {
+            renderEventSubProcessIcon(startEvents[0], parentGfx, attrs, element);
+          }
+        }
+      }
 
       renderEmbeddedLabel(parentGfx, element, expanded ? 'center-top' : 'center-middle', attrs);
 
@@ -19766,6 +19784,39 @@
       return activity;
     }
 
+    function renderEventSubProcessIcon(startEvent, parentGfx, attrs, proxyElement) {
+      var iconSize = 22;
+
+      // match the colors of the enclosing subprocess
+      var proxyAttrs = {
+        fill: getFillColor(proxyElement, defaultFillColor, attrs.fill),
+        stroke: getStrokeColor$1(proxyElement, defaultStrokeColor, attrs.stroke),
+        width: iconSize,
+        height: iconSize
+      };
+
+      var interrupting = getBusinessObject$2(startEvent).isInterrupting;
+      var strokeDasharray = interrupting ? 0 : 3;
+
+      // better visibility for non-interrupting events
+      var strokeWidth = interrupting ? 1 : 1.2;
+
+      // make the icon look larger by drawing a smaller circle
+      var circleSize = 20;
+      var shift = (iconSize - circleSize) / 2;
+      var transform = 'translate(' + shift + ',' + shift + ')';
+
+      drawCircle(parentGfx, circleSize, circleSize, {
+        fill: proxyAttrs.fill,
+        stroke: proxyAttrs.stroke,
+        strokeWidth,
+        strokeDasharray,
+        transform
+      });
+
+      renderEventIcon(startEvent, parentGfx, proxyAttrs, proxyElement);
+    }
+
     function renderTask(parentGfx, element, attrs = {}) {
       var activity = renderActivity(parentGfx, element, attrs);
 
@@ -40735,6 +40786,7 @@
 
       if (
         !is$5(newShape, 'bpmn:SubProcess') ||
+        is$5(newShape,'bpmn:AdHocSubProcess') ||
         ! (is$5(oldShape, 'bpmn:Task') || is$5(oldShape, 'bpmn:CallActivity')) ||
         !isExpanded$1(newShape)
       ) {
@@ -56607,7 +56659,7 @@
    * @param {Translate} translate
    * @param {ModdleCopy} moddleCopy
    */
-  function ReplaceMenuProvider(
+  function ReplaceMenuProvider$3(
       bpmnFactory, popupMenu, modeling, moddle,
       bpmnReplace, rules, translate, moddleCopy) {
 
@@ -56623,7 +56675,7 @@
     this._register();
   }
 
-  ReplaceMenuProvider.$inject = [
+  ReplaceMenuProvider$3.$inject = [
     'bpmnFactory',
     'popupMenu',
     'modeling',
@@ -56634,7 +56686,7 @@
     'moddleCopy'
   ];
 
-  ReplaceMenuProvider.prototype._register = function() {
+  ReplaceMenuProvider$3.prototype._register = function() {
     this._popupMenu.registerProvider('bpmn-replace', this);
   };
 
@@ -56643,7 +56695,7 @@
    *
    * @return {PopupMenuEntries}
    */
-  ReplaceMenuProvider.prototype.getPopupMenuEntries = function(target) {
+  ReplaceMenuProvider$3.prototype.getPopupMenuEntries = function(target) {
 
     var businessObject = target.businessObject;
 
@@ -56858,7 +56910,7 @@
    *
    * @return {PopupMenuHeaderEntries}
    */
-  ReplaceMenuProvider.prototype.getPopupMenuHeaderEntries = function(target) {
+  ReplaceMenuProvider$3.prototype.getPopupMenuHeaderEntries = function(target) {
 
     var headerEntries = {};
 
@@ -56902,7 +56954,7 @@
    *
    * @return {PopupMenuEntries}
    */
-  ReplaceMenuProvider.prototype._createEntries = function(target, replaceOptions) {
+  ReplaceMenuProvider$3.prototype._createEntries = function(target, replaceOptions) {
     var entries = {};
 
     var self = this;
@@ -56922,7 +56974,7 @@
    *
    * @return {PopupMenuEntries}
    */
-  ReplaceMenuProvider.prototype._createSequenceFlowEntries = function(target, replaceOptions) {
+  ReplaceMenuProvider$3.prototype._createSequenceFlowEntries = function(target, replaceOptions) {
 
     var businessObject = getBusinessObject$2(target);
 
@@ -57004,7 +57056,7 @@
    *
    * @return {PopupMenuEntry}
    */
-  ReplaceMenuProvider.prototype._createEntry = function(replaceOption, target, action) {
+  ReplaceMenuProvider$3.prototype._createEntry = function(replaceOption, target, action) {
     var translate = this._translate;
     var replaceElement = this._bpmnReplace.replaceElement;
 
@@ -57033,7 +57085,7 @@
    *
    * @return {PopupMenuHeaderEntries}
    */
-  ReplaceMenuProvider.prototype._getLoopCharacteristicsHeaderEntries = function(target) {
+  ReplaceMenuProvider$3.prototype._getLoopCharacteristicsHeaderEntries = function(target) {
 
     var self = this;
     var translate = this._translate;
@@ -57112,7 +57164,7 @@
    *
    * @return {PopupMenuHeaderEntries}
    */
-  ReplaceMenuProvider.prototype._getCollectionHeaderEntries = function(target) {
+  ReplaceMenuProvider$3.prototype._getCollectionHeaderEntries = function(target) {
 
     var self = this;
     var translate = this._translate;
@@ -57149,7 +57201,7 @@
    *
    * @return {PopupMenuHeaderEntries}
    */
-  ReplaceMenuProvider.prototype._getParticipantMultiplicityHeaderEntries = function(target) {
+  ReplaceMenuProvider$3.prototype._getParticipantMultiplicityHeaderEntries = function(target) {
 
     var self = this;
     var bpmnFactory = this._bpmnFactory;
@@ -57180,7 +57232,7 @@
     };
   };
 
-  ReplaceMenuProvider.prototype._getNonInterruptingHeaderEntries = function(element) {
+  ReplaceMenuProvider$3.prototype._getNonInterruptingHeaderEntries = function(element) {
     const translate = this._translate;
     const businessObject = getBusinessObject$2(element);
     const self = this;
@@ -57214,7 +57266,7 @@
     __init__: [
       'replaceMenuProvider'
     ],
-    replaceMenuProvider: [ 'type', ReplaceMenuProvider ]
+    replaceMenuProvider: [ 'type', ReplaceMenuProvider$3 ]
   };
 
   /**
@@ -61651,6 +61703,7 @@
    */
 
   var COLLAB_ERR_MSG = 'flow elements must be children of pools/participants';
+  var DATA_OBJECT_ERR_MSG = 'Data object must be placed within a pool/participant.';
 
   /**
    * @param {EventBus} eventBus
@@ -61676,8 +61729,12 @@
           shape = context.shape,
           target = context.target;
 
-      if (is$5(target, 'bpmn:Collaboration') && is$5(shape, 'bpmn:FlowNode')) {
-        showError(event, translate(COLLAB_ERR_MSG));
+      if (is$5(target, 'bpmn:Collaboration')) {
+        if (is$5(shape, 'bpmn:FlowNode')) {
+          showError(event, translate(COLLAB_ERR_MSG));
+        } else if (is$5(shape, 'bpmn:DataObjectReference')) {
+          showError(event, translate(DATA_OBJECT_ERR_MSG));
+        }
       }
     });
 
@@ -115608,19 +115665,19 @@
   };
   MultiCommandHandler$1.$inject = ['commandStack'];
 
-  const HANDLERS = {
+  const HANDLERS$1 = {
     'properties-panel.multi-command-executor': MultiCommandHandler$1
   };
-  function CommandInitializer(eventBus, commandStack) {
+  function CommandInitializer$1(eventBus, commandStack) {
     eventBus.on('diagram.init', function () {
-      forEach$2(HANDLERS, function (handler, id) {
+      forEach$2(HANDLERS$1, function (handler, id) {
         commandStack.registerHandler(id, handler);
       });
     });
   }
-  CommandInitializer.$inject = ['eventBus', 'commandStack'];
+  CommandInitializer$1.$inject = ['eventBus', 'commandStack'];
   var Commands = {
-    __init__: [CommandInitializer]
+    __init__: [CommandInitializer$1]
   };
 
   var index$3$1 = {
@@ -115629,6 +115686,188 @@
     propertiesPanel: ['type', BpmnPropertiesPanelRenderer]
   };
 
+  /**
+   * Create a new element and (optionally) set its parent.
+   *
+   * @param {string} type
+   * @param {Object} properties
+   * @param {import('bpmn-js/lib/model/Types').ModdleElement} parent
+   * @param {import('bpmn-js/lib/features/modeling/BpmnFactory').default} bpmnFactory
+   *
+   * @returns {import('bpmn-js/lib/model/Types').ModdleElement}
+   */
+  function createElement$6(type, properties, parent, bpmnFactory) {
+    const element = bpmnFactory.create(type, properties);
+    if (parent) {
+      element.$parent = parent;
+    }
+    return element;
+  }
+
+  /**
+   * generate a semantic id with given prefix
+   */
+  function nextId$1(prefix) {
+    const ids = new Ids$1([32, 32, 1]);
+    return ids.nextPrefixed(prefix);
+  }
+  function getRoot$1(businessObject) {
+    let parent = businessObject;
+    while (parent.$parent) {
+      parent = parent.$parent;
+    }
+    return parent;
+  }
+  function filterElementsByType$1(objectList, type) {
+    const list = objectList || [];
+    return list.filter(element => is$5(element, type));
+  }
+  function findRootElementsByType$1(businessObject, referencedType) {
+    const root = getRoot$1(businessObject);
+    return filterElementsByType$1(root.get('rootElements'), referencedType);
+  }
+  function findRootElementById$1(businessObject, type, id) {
+    const elements = findRootElementsByType$1(businessObject, type);
+    return elements.find(element => element.id === id);
+  }
+
+  /**
+   * createOrUpdateFormalExpression - upserts a specific formal expression
+   *
+   * If the value is falsy, the formal expression is removed.
+   *
+   * @param {djs.model.Base} element
+   * @param {ModdleElement} moddleElement
+   * @param {string} propertyName
+   * @param {string} newValue
+   * @param {BpmnFactory} bpmnFactory
+   * @param {CommandStack} commandStack
+   */
+  function createOrUpdateFormalExpression(element, moddleElement, propertyName, newValue, bpmnFactory, commandStack) {
+    return commandStack.execute('element.updateModdleProperties', createOrUpdateFormalExpressionCommand(element, moddleElement, propertyName, newValue, bpmnFactory));
+  }
+
+  /**
+   * createOrUpdateFormalExpressionCommand - creates a command to upsert a specific formal expression
+   *
+   * If the value is falsy, the formal expression is removed.
+   *
+   * @param {djs.model.Base} element
+   * @param {ModdleElement} moddleElement
+   * @param {string} propertyName
+   * @param {string} newValue
+   * @param {BpmnFactory} bpmnFactory
+   */
+  function createOrUpdateFormalExpressionCommand(element, moddleElement, propertyName, newValue, bpmnFactory) {
+    const expressionProps = {};
+    if (!newValue) {
+      // remove formal expression
+      expressionProps[propertyName] = undefined;
+      return {
+        element,
+        moddleElement,
+        properties: expressionProps
+      };
+    }
+    const existingExpression = moddleElement.get(propertyName);
+    if (existingExpression) {
+      // edit existing formal expression
+      return {
+        element,
+        moddleElement: existingExpression,
+        properties: {
+          body: newValue
+        }
+      };
+    }
+
+    // add formal expression
+    expressionProps[propertyName] = createElement$6('bpmn:FormalExpression', {
+      body: newValue
+    }, moddleElement, bpmnFactory);
+    return {
+      element,
+      moddleElement,
+      properties: expressionProps
+    };
+  }
+
+  /**
+   * @typedef { import('@bpmn-io/properties-panel').EntryDefinition } Entry
+   */
+
+  /**
+   * @returns {Array<Entry>} entries
+   */
+  function AdHocCompletionProps$1(props) {
+    const {
+      element
+    } = props;
+    if (!is$5(element, 'bpmn:AdHocSubProcess')) {
+      return [];
+    }
+    return [{
+      id: 'completionCondition',
+      component: CompletionCondition$3,
+      isEdited: isEdited
+    }, {
+      id: 'cancelRemainingInstances',
+      component: CancelRemainingInstances,
+      isEdited: node => node && !node.checked // the default value is true
+    }];
+  }
+  function CompletionCondition$3(props) {
+    const {
+      element
+    } = props;
+    const bpmnFactory = useService$1('bpmnFactory');
+    const debounce = useService$1('debounceInput');
+    const commandStack = useService$1('commandStack');
+    const translate = useService$1('translate');
+    const getValue = () => {
+      const expression = getBusinessObject$2(element).get('completionCondition');
+      return expression && expression.get('body');
+    };
+    const setValue = value => {
+      return createOrUpdateFormalExpression(element, getBusinessObject$2(element), 'completionCondition', value, bpmnFactory, commandStack);
+    };
+    return TextfieldEntry({
+      element,
+      id: 'completionCondition',
+      label: translate('Completion condition'),
+      getValue,
+      setValue,
+      debounce
+    });
+  }
+  function CancelRemainingInstances(props) {
+    const {
+      element
+    } = props;
+    const commandStack = useService$1('commandStack');
+    const translate = useService$1('translate');
+    const businessObject = getBusinessObject$2(element);
+    const getValue = () => {
+      return businessObject.get('cancelRemainingInstances');
+    };
+    const setValue = value => {
+      commandStack.execute('element.updateModdleProperties', {
+        element,
+        moddleElement: businessObject,
+        properties: {
+          cancelRemainingInstances: value
+        }
+      });
+    };
+    return CheckboxEntry({
+      element,
+      id: 'cancelRemainingInstances',
+      label: translate('Cancel remaining instances'),
+      getValue,
+      setValue
+    });
+  }
+
   function ReferenceSelectEntry$1(props) {
     const {
       autoFocusEntry,
@@ -116057,51 +116296,6 @@
     };
   }
 
-  /**
-   * Create a new element and (optionally) set its parent.
-   *
-   * @param {string} type
-   * @param {Object} properties
-   * @param {import('bpmn-js/lib/model/Types').ModdleElement} parent
-   * @param {import('bpmn-js/lib/features/modeling/BpmnFactory').default} bpmnFactory
-   *
-   * @returns {import('bpmn-js/lib/model/Types').ModdleElement}
-   */
-  function createElement$3(type, properties, parent, bpmnFactory) {
-    const element = bpmnFactory.create(type, properties);
-    if (parent) {
-      element.$parent = parent;
-    }
-    return element;
-  }
-
-  /**
-   * generate a semantic id with given prefix
-   */
-  function nextId$1(prefix) {
-    const ids = new Ids$1([32, 32, 1]);
-    return ids.nextPrefixed(prefix);
-  }
-  function getRoot$1(businessObject) {
-    let parent = businessObject;
-    while (parent.$parent) {
-      parent = parent.$parent;
-    }
-    return parent;
-  }
-  function filterElementsByType$1(objectList, type) {
-    const list = objectList || [];
-    return list.filter(element => is$5(element, type));
-  }
-  function findRootElementsByType$1(businessObject, referencedType) {
-    const root = getRoot$1(businessObject);
-    return filterElementsByType$1(root.get('rootElements'), referencedType);
-  }
-  function findRootElementById$1(businessObject, type, id) {
-    const elements = findRootElementsByType$1(businessObject, type);
-    return elements.find(element => element.id === id);
-  }
-
   const EMPTY_OPTION$4 = '';
   const CREATE_NEW_OPTION$4 = 'create-new';
 
@@ -116160,7 +116354,7 @@
 
       // (1) create new error
       if (value === CREATE_NEW_OPTION$4) {
-        error = createElement$3('bpmn:Error', {
+        error = createElement$6('bpmn:Error', {
           name: nextId$1('Error_')
         }, root, bpmnFactory);
         value = error.get('id');
@@ -116339,7 +116533,7 @@
       // (1) create new escalation
       if (value === CREATE_NEW_OPTION$3) {
         const id = nextId$1('Escalation_');
-        escalation = createElement$3('bpmn:Escalation', {
+        escalation = createElement$6('bpmn:Escalation', {
           id,
           name: id
         }, root, bpmnFactory);
@@ -116727,7 +116921,7 @@
       // (1) create new message
       if (value === CREATE_NEW_OPTION$2) {
         const id = nextId$1('Message_');
-        message = createElement$3('bpmn:Message', {
+        message = createElement$6('bpmn:Message', {
           id,
           name: id
         }, root, bpmnFactory);
@@ -116843,7 +117037,7 @@
       isEdited: isEdited
     }, {
       id: 'completionCondition',
-      component: CompletionCondition$1,
+      component: CompletionCondition$2,
       isEdited: isEdited
     }];
     return entries;
@@ -116860,7 +117054,7 @@
       return getLoopCardinalityValue(element);
     };
     const setValue = value => {
-      return commandStack.execute('element.updateModdleProperties', updateFormalExpression(element, 'loopCardinality', value, bpmnFactory));
+      return createOrUpdateFormalExpression(element, getLoopCharacteristics$2(element), 'loopCardinality', value, bpmnFactory, commandStack);
     };
     return TextfieldEntry({
       element,
@@ -116871,7 +117065,7 @@
       debounce
     });
   }
-  function CompletionCondition$1(props) {
+  function CompletionCondition$2(props) {
     const {
       element
     } = props;
@@ -116883,7 +117077,7 @@
       return getCompletionConditionValue(element);
     };
     const setValue = value => {
-      return commandStack.execute('element.updateModdleProperties', updateFormalExpression(element, 'completionCondition', value, bpmnFactory));
+      return createOrUpdateFormalExpression(element, getLoopCharacteristics$2(element), 'completionCondition', value, bpmnFactory, commandStack);
     };
     return TextfieldEntry({
       element,
@@ -116944,62 +117138,6 @@
     return bo.loopCharacteristics;
   }
 
-  /**
-   * createFormalExpression - creates a 'bpmn:FormalExpression' element.
-   *
-   * @param {ModdleElement} parent
-   * @param {string} body
-   * @param {BpmnFactory} bpmnFactory
-   *
-   * @result {ModdleElement<bpmn:FormalExpression>} a formal expression
-   */
-  function createFormalExpression$1(parent, body, bpmnFactory) {
-    return createElement$3('bpmn:FormalExpression', {
-      body: body
-    }, parent, bpmnFactory);
-  }
-
-  /**
-   * updateFormalExpression - updates a specific formal expression of the loop characteristics.
-   *
-   * @param {djs.model.Base} element
-   * @param {string} propertyName
-   * @param {string} newValue
-   * @param {BpmnFactory} bpmnFactory
-   */
-  function updateFormalExpression(element, propertyName, newValue, bpmnFactory) {
-    const loopCharacteristics = getLoopCharacteristics$2(element);
-    const expressionProps = {};
-    if (!newValue) {
-      // remove formal expression
-      expressionProps[propertyName] = undefined;
-      return {
-        element,
-        moddleElement: loopCharacteristics,
-        properties: expressionProps
-      };
-    }
-    const existingExpression = loopCharacteristics.get(propertyName);
-    if (!existingExpression) {
-      // add formal expression
-      expressionProps[propertyName] = createFormalExpression$1(loopCharacteristics, newValue, bpmnFactory);
-      return {
-        element,
-        moddleElement: loopCharacteristics,
-        properties: expressionProps
-      };
-    }
-
-    // edit existing formal expression
-    return {
-      element,
-      moddleElement: existingExpression,
-      properties: {
-        body: newValue
-      }
-    };
-  }
-
   // loopCardinality
 
   /**
@@ -117310,7 +117448,7 @@
       // (1) create new signal
       if (value === CREATE_NEW_OPTION$1) {
         const id = nextId$1('Signal_');
-        signal = createElement$3('bpmn:Signal', {
+        signal = createElement$6('bpmn:Signal', {
           id,
           name: id
         }, root, bpmnFactory);
@@ -117840,8 +117978,23 @@
     }
     return null;
   }
+  function AdHocCompletionGroup(element, injector) {
+    const translate = injector.get('translate');
+    const group = {
+      label: translate('Completion'),
+      id: 'adHocCompletion',
+      component: Group$1,
+      entries: [...AdHocCompletionProps$1({
+        element
+      })]
+    };
+    if (group.entries.length) {
+      return group;
+    }
+    return null;
+  }
   function getGroups(element, injector) {
-    const groups = [GeneralGroup(element, injector), DocumentationGroup(element, injector), CompensationGroup(element, injector), ErrorGroup(element, injector), LinkGroup(element, injector), MessageGroup(element, injector), MultiInstanceGroup(element, injector), SignalGroup(element, injector), EscalationGroup(element, injector), TimerGroup(element, injector)];
+    const groups = [GeneralGroup(element, injector), DocumentationGroup(element, injector), CompensationGroup(element, injector), ErrorGroup(element, injector), LinkGroup(element, injector), MessageGroup(element, injector), MultiInstanceGroup(element, injector), AdHocCompletionGroup(element, injector), SignalGroup(element, injector), EscalationGroup(element, injector), TimerGroup(element, injector)];
 
     // contract: if a group returns null, it should not be displayed at all
     return groups.filter(group => group !== null);
@@ -117978,7 +118131,7 @@
 
     // (1) create bpmn:ExtensionElements if it doesn't exist
     if (!extensionElements) {
-      extensionElements = createElement$3('bpmn:ExtensionElements', {
+      extensionElements = createElement$6('bpmn:ExtensionElements', {
         values: []
       }, businessObject, bpmnFactory);
       commands.push({
@@ -118077,7 +118230,7 @@
     const extensionElement = getExtensionElement(element);
     if (!extensionElement) {
       // (1) create extension element
-      const adHoc = createElement$3('zeebe:AdHoc', {
+      const adHoc = createElement$6('zeebe:AdHoc', {
         activeElementsCollection: value
       }, undefined, bpmnFactory);
       const businessObject = getBusinessObject$2(element);
@@ -118099,6 +118252,52 @@
     return extensions[0];
   }
 
+  /**
+   * @typedef { import('@bpmn-io/properties-panel').EntryDefinition } Entry
+   */
+
+  /**
+   * @returns {Array<Entry>} entries
+   */
+  function AdHocCompletionProps(props) {
+    const {
+      element
+    } = props;
+    if (!is$5(element, 'bpmn:AdHocSubProcess')) {
+      return [];
+    }
+    return [{
+      id: 'completionCondition',
+      component: CompletionCondition$1,
+      isEdited: isEdited$6
+    }];
+  }
+  function CompletionCondition$1(props) {
+    const {
+      element
+    } = props;
+    const bpmnFactory = useService$1('bpmnFactory');
+    const debounce = useService$1('debounceInput');
+    const commandStack = useService$1('commandStack');
+    const translate = useService$1('translate');
+    const getValue = () => {
+      const expression = getBusinessObject$2(element).get('completionCondition');
+      return expression && expression.get('body');
+    };
+    const setValue = value => {
+      return createOrUpdateFormalExpression(element, getBusinessObject$2(element), 'completionCondition', value, bpmnFactory, commandStack);
+    };
+    return FeelEntryWithVariableContext$1({
+      element,
+      id: 'completionCondition',
+      label: translate('Completion condition'),
+      feel: 'required',
+      getValue,
+      setValue,
+      debounce
+    });
+  }
+
   function AssignmentDefinitionProps(props) {
     const {
       element
@@ -118138,7 +118337,7 @@
 
       // (1) ensure extension elements
       if (!extensionElements) {
-        extensionElements = createElement$3('bpmn:ExtensionElements', {
+        extensionElements = createElement$6('bpmn:ExtensionElements', {
           values: []
         }, businessObject, bpmnFactory);
         commands.push({
@@ -118156,7 +118355,7 @@
       // (2) ensure AssignmentDefinition
       let assignmentDefinition = getAssignmentDefinition(element);
       if (!assignmentDefinition) {
-        assignmentDefinition = createElement$3('zeebe:AssignmentDefinition', {}, extensionElements, bpmnFactory);
+        assignmentDefinition = createElement$6('zeebe:AssignmentDefinition', {}, extensionElements, bpmnFactory);
         commands.push({
           cmd: 'element.updateModdleProperties',
           context: {
@@ -118212,7 +118411,7 @@
 
       // (1) ensure extension elements
       if (!extensionElements) {
-        extensionElements = createElement$3('bpmn:ExtensionElements', {
+        extensionElements = createElement$6('bpmn:ExtensionElements', {
           values: []
         }, businessObject, bpmnFactory);
         commands.push({
@@ -118230,7 +118429,7 @@
       // (2) ensure assignmentDefinition
       let assignmentDefinition = getAssignmentDefinition(element);
       if (!assignmentDefinition) {
-        assignmentDefinition = createElement$3('zeebe:AssignmentDefinition', {}, extensionElements, bpmnFactory);
+        assignmentDefinition = createElement$6('zeebe:AssignmentDefinition', {}, extensionElements, bpmnFactory);
         commands.push({
           cmd: 'element.updateModdleProperties',
           context: {
@@ -118284,7 +118483,7 @@
 
       // (1) ensure extension elements
       if (!extensionElements) {
-        extensionElements = createElement$3('bpmn:ExtensionElements', {
+        extensionElements = createElement$6('bpmn:ExtensionElements', {
           values: []
         }, businessObject, bpmnFactory);
         commands.push({
@@ -118302,7 +118501,7 @@
       // (2) ensure assignmentDefinition
       let assignmentDefinition = getAssignmentDefinition(element);
       if (!assignmentDefinition) {
-        assignmentDefinition = createElement$3('zeebe:AssignmentDefinition', {}, extensionElements, bpmnFactory);
+        assignmentDefinition = createElement$6('zeebe:AssignmentDefinition', {}, extensionElements, bpmnFactory);
         commands.push({
           cmd: 'element.updateModdleProperties',
           context: {
@@ -118426,7 +118625,7 @@
     const bpmnFactory = useService$1('bpmnFactory');
     const translate = useService$1('translate');
     const getValue = () => {
-      if (getCalledDecision$1(element)) {
+      if (getCalledDecision$1$1(element)) {
         return DMN_IMPLEMENTATION_OPTION;
       }
       if (getTaskDefinition$2(element)) {
@@ -118443,7 +118642,7 @@
     const setValue = value => {
       let extensionElement, extensionElementType;
       if (value === DMN_IMPLEMENTATION_OPTION) {
-        extensionElement = getCalledDecision$1(element);
+        extensionElement = getCalledDecision$1$1(element);
         extensionElementType = 'zeebe:CalledDecision';
       } else if (value === JOB_WORKER_IMPLEMENTATION_OPTION$2) {
         extensionElement = getTaskDefinition$2(element);
@@ -118452,7 +118651,7 @@
         resetElement$1(element, commandStack);
       }
       if (!extensionElement && extensionElementType) {
-        extensionElement = createElement$3(extensionElementType, {}, null, bpmnFactory);
+        extensionElement = createElement$6(extensionElementType, {}, null, bpmnFactory);
         updateExtensionElements$1(element, extensionElement, bpmnFactory, commandStack);
       }
     };
@@ -118485,16 +118684,16 @@
     const businessObject = getBusinessObject$2(element);
     return getExtensionElementsList$2(businessObject, 'zeebe:TaskDefinition')[0];
   }
-  function getCalledDecision$1(element) {
+  function getCalledDecision$1$1(element) {
     const businessObject = getBusinessObject$2(element);
     return getExtensionElementsList$2(businessObject, 'zeebe:CalledDecision')[0];
   }
   function isBusinessRuleImplementationEdited(element) {
-    return getTaskDefinition$2(element) || getCalledDecision$1(element);
+    return getTaskDefinition$2(element) || getCalledDecision$1$1(element);
   }
   function resetElement$1(element, commandStack) {
     const businessObject = getBusinessObject$2(element);
-    const toRemove = [getTaskDefinition$2(element), getTaskHeaders$1(element), getCalledDecision$1(element)].filter(Boolean);
+    const toRemove = [getTaskDefinition$2(element), getTaskHeaders$1(element), getCalledDecision$1$1(element)].filter(Boolean);
     removeExtensionElements$1(element, businessObject, toRemove, commandStack);
   }
   function updateExtensionElements$1(element, extensionElementToAdd, bpmnFactory, commandStack) {
@@ -118505,7 +118704,7 @@
 
     // (1) create bpmn:ExtensionElements if it doesn't exist
     if (!extensionElements) {
-      extensionElements = createElement$3('bpmn:ExtensionElements', {
+      extensionElements = createElement$6('bpmn:ExtensionElements', {
         values: []
       }, businessObject, bpmnFactory);
       commands.push({
@@ -118523,7 +118722,7 @@
 
     // (2) remove old exension element from extensionElements
     if (is$5(extensionElementToAdd, 'zeebe:TaskDefinition')) {
-      extensionElementValues = without(extensionElements.get('values'), getCalledDecision$1(element));
+      extensionElementValues = without(extensionElements.get('values'), getCalledDecision$1$1(element));
     } else if (is$5(extensionElementToAdd, 'zeebe:CalledDecision')) {
       extensionElementValues = without(extensionElements.get('values'), getTaskDefinition$2(element));
     }
@@ -118558,7 +118757,7 @@
       // (1) ensure extension elements
       let extensionElements = businessObject.get('extensionElements');
       if (!extensionElements) {
-        extensionElements = createElement$3('bpmn:ExtensionElements', {
+        extensionElements = createElement$6('bpmn:ExtensionElements', {
           values: []
         }, businessObject, bpmnFactory);
         commands.push({
@@ -118576,7 +118775,7 @@
       // (2) ensure extension element
       let extensionElement = getExtensionElementsList$2(businessObject, type)[0];
       if (!extensionElement) {
-        extensionElement = createElement$3(type, {}, extensionElements, bpmnFactory);
+        extensionElement = createElement$6(type, {}, extensionElements, bpmnFactory);
         commands.push({
           cmd: 'element.updateModdleProperties',
           context: {
@@ -118649,7 +118848,7 @@
       // (1) ensure extension elements
       let extensionElements = businessObject.get('extensionElements');
       if (!extensionElements) {
-        extensionElements = createElement$3('bpmn:ExtensionElements', {
+        extensionElements = createElement$6('bpmn:ExtensionElements', {
           values: []
         }, businessObject, bpmnFactory);
         commands.push({
@@ -118667,7 +118866,7 @@
       // (2) ensure extension element
       let extensionElement = getExtensionElementsList$2(businessObject, type)[0];
       if (!extensionElement) {
-        extensionElement = createElement$3(type, {}, extensionElements, bpmnFactory);
+        extensionElement = createElement$6(type, {}, extensionElements, bpmnFactory);
         commands.push({
           cmd: 'element.updateModdleProperties',
           context: {
@@ -118768,7 +118967,7 @@
 
       // (1) ensure extension elements
       if (!extensionElements) {
-        extensionElements = createElement$3('bpmn:ExtensionElements', {
+        extensionElements = createElement$6('bpmn:ExtensionElements', {
           values: []
         }, businessObject, bpmnFactory);
         commands.push({
@@ -118786,7 +118985,7 @@
       // (2) ensure calledDecision
       let calledDecision = getCalledDecision$2(element);
       if (!calledDecision) {
-        calledDecision = createElement$3('zeebe:CalledDecision', {}, extensionElements, bpmnFactory);
+        calledDecision = createElement$6('zeebe:CalledDecision', {}, extensionElements, bpmnFactory);
         commands.push({
           cmd: 'element.updateModdleProperties',
           context: {
@@ -118843,7 +119042,7 @@
 
       // (1) ensure extension elements
       if (!extensionElements) {
-        extensionElements = createElement$3('bpmn:ExtensionElements', {
+        extensionElements = createElement$6('bpmn:ExtensionElements', {
           values: []
         }, businessObject, bpmnFactory);
         commands.push({
@@ -118861,7 +119060,7 @@
       // (2) ensure calledDecision
       let calledDecision = getCalledDecision$2(element);
       if (!calledDecision) {
-        calledDecision = createElement$3('zeebe:CalledDecision', {}, extensionElements, bpmnFactory);
+        calledDecision = createElement$6('zeebe:CalledDecision', {}, extensionElements, bpmnFactory);
         commands.push({
           cmd: 'element.updateModdleProperties',
           context: {
@@ -118955,7 +119154,7 @@
 
       // (2) Create and set formalExpression element containing the conditionExpression,
       // unless the provided value is empty
-      const formalExpressionElement = value && value != '' ? createElement$3('bpmn:FormalExpression', {
+      const formalExpressionElement = value && value != '' ? createElement$6('bpmn:FormalExpression', {
         body: value
       }, businessObject, bpmnFactory) : undefined;
       commands.push({
@@ -119319,7 +119518,7 @@
 
       // (1) ensure extension elements
       if (!extensionElements) {
-        extensionElements = createElement$3('bpmn:ExtensionElements', {
+        extensionElements = createElement$6('bpmn:ExtensionElements', {
           values: []
         }, businessObject, bpmnFactory);
         commands.push({
@@ -119338,7 +119537,7 @@
       let executionListeners = getExecutionListenersContainer$1(businessObject);
       if (!executionListeners) {
         const parent = extensionElements;
-        executionListeners = createElement$3('zeebe:ExecutionListeners', {
+        executionListeners = createElement$6('zeebe:ExecutionListeners', {
           listeners: []
         }, parent, bpmnFactory);
         commands.push({
@@ -119354,7 +119553,7 @@
       }
 
       // (3) create zeebe:ExecutionListener
-      const executionListener = createElement$3('zeebe:ExecutionListener', getDefaultListenerProps$1(element), executionListeners, bpmnFactory);
+      const executionListener = createElement$6('zeebe:ExecutionListener', getDefaultListenerProps$1(element), executionListeners, bpmnFactory);
 
       // (4) add executionListener to list
       commands.push({
@@ -119418,14 +119617,14 @@
     CUSTOM_FORM: 'custom-form',
     EXTERNAL_REFERENCE: 'external-reference'
   };
-  function getFormDefinition$1(element) {
+  function getFormDefinition$2(element) {
     const businessObject = getBusinessObject$2(element);
     const formDefinitions = getExtensionElementsList$2(businessObject, 'zeebe:FormDefinition');
     return formDefinitions[0];
   }
   function getUserTaskForm$1(element, rootElement) {
     rootElement = rootElement || getRootElement$1$1(element);
-    const formDefinition = getFormDefinition$1(element);
+    const formDefinition = getFormDefinition$2(element);
     if (!formDefinition) {
       return;
     }
@@ -119450,7 +119649,7 @@
     return parent;
   }
   function getFormType$1(element) {
-    const formDefinition = getFormDefinition$1(element);
+    const formDefinition = getFormDefinition$2(element);
     if (!formDefinition) {
       return;
     }
@@ -119631,7 +119830,7 @@
       injector = useService$1('injector'),
       translate = useService$1('translate');
     const getValue = () => {
-      return getFormDefinition$1(element).get('formId');
+      return getFormDefinition$2(element).get('formId');
     };
     const setValue = value => {
       setFormId(injector, element, isUndefined$5(value) ? '' : value);
@@ -119653,7 +119852,7 @@
       injector = useService$1('injector'),
       translate = useService$1('translate');
     const getValue = () => {
-      const formDefinition = getFormDefinition$1(element);
+      const formDefinition = getFormDefinition$2(element);
       return formDefinition.get('formKey');
     };
     const setValue = value => {
@@ -119676,7 +119875,7 @@
       injector = useService$1('injector'),
       translate = useService$1('translate');
     const getValue = () => {
-      const formDefinition = getFormDefinition$1(element);
+      const formDefinition = getFormDefinition$2(element);
       return formDefinition.get('externalReference');
     };
     const setValue = value => {
@@ -119724,7 +119923,7 @@
       };
     }
     const bpmnFactory = injector.get('bpmnFactory');
-    extensionElements = createElement$3('bpmn:ExtensionElements', {
+    extensionElements = createElement$6('bpmn:ExtensionElements', {
       values: []
     }, businessObject, bpmnFactory);
     return {
@@ -119745,7 +119944,7 @@
   * } }
   */
   function getOrCreateFormDefintition(injector, element) {
-    let formDefinition = getFormDefinition$1(element);
+    let formDefinition = getFormDefinition$2(element);
     if (formDefinition) {
       return {
         commands: [],
@@ -119756,7 +119955,7 @@
       extensionElements,
       commands
     } = getOrCreateExtensionElements(injector, element);
-    formDefinition = createFormDefinition(injector, {}, extensionElements);
+    formDefinition = createFormDefinition$2(injector, {}, extensionElements);
     return {
       commands: [...commands, createUpdateModdlePropertiesCommand(element, extensionElements, {
         values: [...extensionElements.get('values'), formDefinition]
@@ -119780,7 +119979,7 @@
     if (userTaskForm) {
       return {
         commands: [],
-        formDefinition: getFormDefinition$1(element),
+        formDefinition: getFormDefinition$2(element),
         userTaskForm
       };
     }
@@ -119848,7 +120047,7 @@
     })]);
   }
   function removeFormDefinition(injector, element) {
-    const formDefinition = getFormDefinition$1(element);
+    const formDefinition = getFormDefinition$2(element);
 
     /**
      * @type {import('bpmn-js/lib/features/modeling/Modeling').default}
@@ -119870,9 +120069,9 @@
    *
    * @returns {ModdleElement}
    */
-  function createFormDefinition(injector, properties, parent) {
+  function createFormDefinition$2(injector, properties, parent) {
     const bpmnFactory = injector.get('bpmnFactory');
-    return createElement$3('zeebe:FormDefinition', properties, parent, bpmnFactory);
+    return createElement$6('zeebe:FormDefinition', properties, parent, bpmnFactory);
   }
 
   /**
@@ -119884,7 +120083,7 @@
    */
   function createUserTaskForm(injector, properties, parent) {
     const bpmnFactory = injector.get('bpmnFactory');
-    return createElement$3('zeebe:UserTaskForm', properties, parent, bpmnFactory);
+    return createElement$6('zeebe:UserTaskForm', properties, parent, bpmnFactory);
   }
 
   /**
@@ -120077,7 +120276,7 @@
 
       // (1) ensure extension elements
       if (!extensionElements) {
-        extensionElements = createElement$3('bpmn:ExtensionElements', {
+        extensionElements = createElement$6('bpmn:ExtensionElements', {
           values: []
         }, businessObject, bpmnFactory);
         commands.push({
@@ -120096,7 +120295,7 @@
       let taskHeaders = getTaskHeaders$1(element);
       if (!taskHeaders) {
         const parent = extensionElements;
-        taskHeaders = createElement$3('zeebe:TaskHeaders', {
+        taskHeaders = createElement$6('zeebe:TaskHeaders', {
           values: []
         }, parent, bpmnFactory);
         commands.push({
@@ -120112,7 +120311,7 @@
       }
 
       // (3) create header
-      const header = createElement$3('zeebe:Header', {}, taskHeaders, bpmnFactory);
+      const header = createElement$6('zeebe:Header', {}, taskHeaders, bpmnFactory);
 
       // (4) add header to list
       commands.push({
@@ -120130,10 +120329,10 @@
   }
 
   function getProcessId(element) {
-    const calledElement = getCalledElement$1(element);
+    const calledElement = getCalledElement$2(element);
     return calledElement ? calledElement.get('processId') : '';
   }
-  function getCalledElement$1(element) {
+  function getCalledElement$2(element) {
     const calledElements = getCalledElements$1(element);
     return calledElements[0];
   }
@@ -120174,7 +120373,7 @@
       // (1) ensure extension elements
       let extensionElements = businessObject.get('extensionElements');
       if (!extensionElements) {
-        extensionElements = createElement$3('bpmn:ExtensionElements', {
+        extensionElements = createElement$6('bpmn:ExtensionElements', {
           values: []
         }, businessObject, bpmnFactory);
         commands.push({
@@ -120190,9 +120389,9 @@
       }
 
       // (2) ensure zeebe:calledElement
-      let calledElement = getCalledElement$1(businessObject);
+      let calledElement = getCalledElement$2(businessObject);
       if (!calledElement) {
-        calledElement = createElement$3('zeebe:CalledElement', {}, extensionElements, bpmnFactory);
+        calledElement = createElement$6('zeebe:CalledElement', {}, extensionElements, bpmnFactory);
         commands.push({
           cmd: 'element.updateModdleProperties',
           context: {
@@ -120249,7 +120448,7 @@
       return undefined;
     }
     const bo = getBusinessObject$2(element),
-      calledElement = getCalledElement$1(bo);
+      calledElement = getCalledElement$2(bo);
     return calledElement && has$2(calledElement, 'propagateAllParentVariables') ? calledElement.get('propagateAllParentVariables') : /* default value */true;
   }
 
@@ -120391,7 +120590,7 @@
     return getEventDefinition$1(element, 'bpmn:TerminateEventDefinition');
   }
   function createIOMapping(properties, parent, bpmnFactory) {
-    return createElement$3('zeebe:IoMapping', properties, parent, bpmnFactory);
+    return createElement$6('zeebe:IoMapping', properties, parent, bpmnFactory);
   }
   function isSignalThrowEvent(element) {
     if (!isAny$1(element, ['bpmn:EndEvent', 'bpmn:IntermediateThrowEvent'])) {
@@ -120493,7 +120692,7 @@
 
       // (1) ensure extension elements
       if (!extensionElements) {
-        extensionElements = createElement$3('bpmn:ExtensionElements', {
+        extensionElements = createElement$6('bpmn:ExtensionElements', {
           values: []
         }, businessObject, bpmnFactory);
         commands.push({
@@ -120528,7 +120727,7 @@
       }
 
       // (3) create parameter
-      const newParameter = createElement$3('zeebe:Input', {
+      const newParameter = createElement$6('zeebe:Input', {
         target: nextId$1('InputVariable_')
       }, ioMapping, bpmnFactory);
 
@@ -120620,7 +120819,7 @@
 
       // (1) ensure extension elements
       if (!extensionElements) {
-        extensionElements = createElement$3('bpmn:ExtensionElements', {
+        extensionElements = createElement$6('bpmn:ExtensionElements', {
           values: []
         }, message, bpmnFactory);
         commands.push({
@@ -120638,7 +120837,7 @@
 
       // (2a) add subscription with correlation key
       if (!subscription) {
-        subscription = createElement$3('zeebe:Subscription', properties, extensionElements, bpmnFactory);
+        subscription = createElement$6('zeebe:Subscription', properties, extensionElements, bpmnFactory);
         commands.push({
           cmd: 'element.updateModdleProperties',
           context: {
@@ -120844,15 +121043,7 @@
       return completionCondition && completionCondition.get('body');
     };
     const setValue = value => {
-      if (value && value !== '') {
-        const loopCharacteristics = getLoopCharacteristics$1(element);
-        const completionCondition = createElement$3('bpmn:FormalExpression', {
-          body: value
-        }, loopCharacteristics, bpmnFactory);
-        setCompletionCondition(element, commandStack, completionCondition);
-      } else {
-        setCompletionCondition(element, commandStack, undefined);
-      }
+      return createOrUpdateFormalExpression(element, getLoopCharacteristics$1(element), 'completionCondition', value, bpmnFactory, commandStack);
     };
     return FeelEntryWithVariableContext$1({
       element,
@@ -120881,15 +121072,6 @@
   function getCompletionCondition(element) {
     return getLoopCharacteristics$1(element).get('completionCondition');
   }
-  function setCompletionCondition(element, commandStack, completionCondition = undefined) {
-    commandStack.execute('element.updateModdleProperties', {
-      element,
-      moddleElement: getLoopCharacteristics$1(element),
-      properties: {
-        completionCondition
-      }
-    });
-  }
   function getProperty$1(element, propertyName) {
     const loopCharacteristics = getLoopCharacteristics$1(element),
       zeebeLoopCharacteristics = getZeebeLoopCharacteristics(loopCharacteristics);
@@ -120902,7 +121084,7 @@
     // (1) ensure extension elements
     let extensionElements = loopCharacteristics.get('extensionElements');
     if (!extensionElements) {
-      extensionElements = createElement$3('bpmn:ExtensionElements', {
+      extensionElements = createElement$6('bpmn:ExtensionElements', {
         values: []
       }, loopCharacteristics, bpmnFactory);
       commands.push({
@@ -120920,7 +121102,7 @@
     // (2) ensure zeebe loop characteristics
     let zeebeLoopCharacteristics = getZeebeLoopCharacteristics(loopCharacteristics);
     if (!zeebeLoopCharacteristics) {
-      zeebeLoopCharacteristics = createElement$3('zeebe:LoopCharacteristics', {}, extensionElements, bpmnFactory);
+      zeebeLoopCharacteristics = createElement$6('zeebe:LoopCharacteristics', {}, extensionElements, bpmnFactory);
       commands.push({
         cmd: 'element.updateModdleProperties',
         context: {
@@ -120980,7 +121162,7 @@
       // (1) ensure extension elements
       let extensionElements = businessObject.get('extensionElements');
       if (!extensionElements) {
-        extensionElements = createElement$3('bpmn:ExtensionElements', {
+        extensionElements = createElement$6('bpmn:ExtensionElements', {
           values: []
         }, businessObject, bpmnFactory);
         commands.push({
@@ -120996,9 +121178,9 @@
       }
 
       // (2) ensure zeebe:calledElement
-      let calledElement = getCalledElement$1(businessObject);
+      let calledElement = getCalledElement$2(businessObject);
       if (!calledElement) {
-        calledElement = createElement$3('zeebe:CalledElement', {}, extensionElements, bpmnFactory);
+        calledElement = createElement$6('zeebe:CalledElement', {}, extensionElements, bpmnFactory);
         commands.push({
           cmd: 'element.updateModdleProperties',
           context: {
@@ -121069,7 +121251,7 @@
       return undefined;
     }
     const bo = getBusinessObject$2(element),
-      calledElement = getCalledElement$1(bo);
+      calledElement = getCalledElement$2(bo);
     return calledElement && has$2(calledElement, 'propagateAllChildVariables') ? calledElement.get('propagateAllChildVariables') : determinePropAllChildVariablesDefault(element);
   }
 
@@ -121166,7 +121348,7 @@
 
       // (1) ensure extension elements
       if (!extensionElements) {
-        extensionElements = createElement$3('bpmn:ExtensionElements', {
+        extensionElements = createElement$6('bpmn:ExtensionElements', {
           values: []
         }, businessObject, bpmnFactory);
         commands.push({
@@ -121202,7 +121384,7 @@
       }
 
       // (3) create parameter
-      const newParameter = createElement$3('zeebe:Output', {
+      const newParameter = createElement$6('zeebe:Output', {
         target: nextId$1('OutputVariable_')
       }, ioMapping, bpmnFactory);
 
@@ -121279,7 +121461,7 @@
         });
       } else if (!priorityDefinition && !isNullValue) {
         // (2c) create priority definition if it does not exist
-        priorityDefinition = createElement$3('zeebe:PriorityDefinition', {
+        priorityDefinition = createElement$6('zeebe:PriorityDefinition', {
           priority: value
         }, extensionElements, bpmnFactory);
         commands.push({
@@ -121370,7 +121552,7 @@
         resetElement(element, commandStack);
       }
       if (!extensionElement && extensionElementType) {
-        extensionElement = createElement$3(extensionElementType, {}, null, bpmnFactory);
+        extensionElement = createElement$6(extensionElementType, {}, null, bpmnFactory);
         updateExtensionElements(element, extensionElement, bpmnFactory, commandStack);
       }
     };
@@ -121436,7 +121618,7 @@
 
     // (1) create bpmn:ExtensionElements if it doesn't exist
     if (!extensionElements) {
-      extensionElements = createElement$3('bpmn:ExtensionElements', {
+      extensionElements = createElement$6('bpmn:ExtensionElements', {
         values: []
       }, businessObject, bpmnFactory);
       commands.push({
@@ -121510,7 +121692,7 @@
 
       // (1) ensure extension elements
       if (!extensionElements) {
-        extensionElements = createElement$3('bpmn:ExtensionElements', {
+        extensionElements = createElement$6('bpmn:ExtensionElements', {
           values: []
         }, businessObject, bpmnFactory);
         commands.push({
@@ -121528,7 +121710,7 @@
       // (2) ensure script
       let script = getScript(element);
       if (!script) {
-        script = createElement$3('zeebe:Script', {}, extensionElements, bpmnFactory);
+        script = createElement$6('zeebe:Script', {}, extensionElements, bpmnFactory);
         commands.push({
           cmd: 'element.updateModdleProperties',
           context: {
@@ -121585,7 +121767,7 @@
 
       // (1) ensure extension elements
       if (!extensionElements) {
-        extensionElements = createElement$3('bpmn:ExtensionElements', {
+        extensionElements = createElement$6('bpmn:ExtensionElements', {
           values: []
         }, businessObject, bpmnFactory);
         commands.push({
@@ -121603,7 +121785,7 @@
       // (2) ensure script
       let script = getScript(element);
       if (!script) {
-        script = createElement$3('zeebe:Script', {}, extensionElements, bpmnFactory);
+        script = createElement$6('zeebe:Script', {}, extensionElements, bpmnFactory);
         commands.push({
           cmd: 'element.updateModdleProperties',
           context: {
@@ -121750,7 +121932,7 @@
       // (1) ensure extension elements
       let extensionElements = businessObject.get('extensionElements');
       if (!extensionElements) {
-        extensionElements = createElement$3('bpmn:ExtensionElements', {
+        extensionElements = createElement$6('bpmn:ExtensionElements', {
           values: []
         }, businessObject, bpmnFactory);
         commands.push({
@@ -121766,9 +121948,9 @@
       }
 
       // (2) ensure zeebe:calledElement
-      let calledElement = getCalledElement$1(businessObject);
+      let calledElement = getCalledElement$2(businessObject);
       if (!calledElement) {
-        calledElement = createElement$3('zeebe:CalledElement', {}, extensionElements, bpmnFactory);
+        calledElement = createElement$6('zeebe:CalledElement', {}, extensionElements, bpmnFactory);
         commands.push({
           cmd: 'element.updateModdleProperties',
           context: {
@@ -121843,7 +122025,7 @@
 
       // (1) ensure extension elements
       if (!extensionElements) {
-        extensionElements = createElement$3('bpmn:ExtensionElements', {
+        extensionElements = createElement$6('bpmn:ExtensionElements', {
           values: []
         }, businessObject, bpmnFactory);
         commands.push({
@@ -121861,7 +122043,7 @@
       // (2) ensure task definition
       let taskDefinition = getTaskDefinition$4(element);
       if (!taskDefinition) {
-        taskDefinition = createElement$3('zeebe:TaskDefinition', {}, extensionElements, bpmnFactory);
+        taskDefinition = createElement$6('zeebe:TaskDefinition', {}, extensionElements, bpmnFactory);
         commands.push({
           cmd: 'element.updateModdleProperties',
           context: {
@@ -121918,7 +122100,7 @@
 
       // (1) ensure extension elements
       if (!extensionElements) {
-        extensionElements = createElement$3('bpmn:ExtensionElements', {
+        extensionElements = createElement$6('bpmn:ExtensionElements', {
           values: []
         }, businessObject, bpmnFactory);
         commands.push({
@@ -121936,7 +122118,7 @@
       // (2) ensure task definition
       let taskDefinition = getTaskDefinition$4(element);
       if (!taskDefinition) {
-        taskDefinition = createElement$3('zeebe:TaskDefinition', {}, extensionElements, bpmnFactory);
+        taskDefinition = createElement$6('zeebe:TaskDefinition', {}, extensionElements, bpmnFactory);
         commands.push({
           cmd: 'element.updateModdleProperties',
           context: {
@@ -122128,7 +122310,7 @@
 
       // (1) ensure extension elements
       if (!extensionElements) {
-        extensionElements = createElement$3('bpmn:ExtensionElements', {
+        extensionElements = createElement$6('bpmn:ExtensionElements', {
           values: []
         }, businessObject, bpmnFactory);
         commands.push({
@@ -122147,7 +122329,7 @@
       let taskListeners = getTaskListenersContainer$1(businessObject);
       if (!taskListeners) {
         const parent = extensionElements;
-        taskListeners = createElement$3('zeebe:TaskListeners', {
+        taskListeners = createElement$6('zeebe:TaskListeners', {
           listeners: []
         }, parent, bpmnFactory);
         commands.push({
@@ -122163,7 +122345,7 @@
       }
 
       // (3) create zeebe:TaskListener
-      const TaskListener = createElement$3('zeebe:TaskListener', getDefaultListenerProps(), taskListeners, bpmnFactory);
+      const TaskListener = createElement$6('zeebe:TaskListener', getDefaultListenerProps(), taskListeners, bpmnFactory);
 
       // (4) add TaskListener to list
       commands.push({
@@ -122248,7 +122430,7 @@
 
       // (1) ensure extension elements
       if (!extensionElements) {
-        extensionElements = createElement$3('bpmn:ExtensionElements', {
+        extensionElements = createElement$6('bpmn:ExtensionElements', {
           values: []
         }, businessObject, bpmnFactory);
         commands.push({
@@ -122266,7 +122448,7 @@
       // (2) ensure zeebe:TaskSchedule
       let taskSchedule = getTaskSchedule(element);
       if (!taskSchedule) {
-        taskSchedule = createElement$3('zeebe:TaskSchedule', {}, extensionElements, bpmnFactory);
+        taskSchedule = createElement$6('zeebe:TaskSchedule', {}, extensionElements, bpmnFactory);
         commands.push({
           cmd: 'element.updateModdleProperties',
           context: {
@@ -122324,7 +122506,7 @@
 
       // (1) ensure extension elements
       if (!extensionElements) {
-        extensionElements = createElement$3('bpmn:ExtensionElements', {
+        extensionElements = createElement$6('bpmn:ExtensionElements', {
           values: []
         }, businessObject, bpmnFactory);
         commands.push({
@@ -122342,7 +122524,7 @@
       // (2) ensure zeebe:TaskSchedule
       let taskSchedule = getTaskSchedule(element);
       if (!taskSchedule) {
-        taskSchedule = createElement$3('zeebe:TaskSchedule', {}, extensionElements, bpmnFactory);
+        taskSchedule = createElement$6('zeebe:TaskSchedule', {}, extensionElements, bpmnFactory);
         commands.push({
           cmd: 'element.updateModdleProperties',
           context: {
@@ -122733,7 +122915,7 @@
      */
     const setValue = value => {
       if (value === ZEEBE_USER_TASK_IMPLEMENTATION_OPTION) {
-        createZeebeUserTask(element, bpmnFactory, commandStack);
+        createZeebeUserTask$2(element, bpmnFactory, commandStack);
       } else if (value === JOB_WORKER_IMPLEMENTATION_OPTION) {
         removeZeebeUserTask(element, commandStack);
       }
@@ -122759,9 +122941,9 @@
   }
 
   // helper ///////////////////////
-  function createZeebeUserTask(element, bpmnFactory, commandStack) {
+  function createZeebeUserTask$2(element, bpmnFactory, commandStack) {
     const businessObject = getBusinessObject$2(element);
-    const zeebeUserTask = createElement$3('zeebe:UserTask', {}, businessObject, bpmnFactory);
+    const zeebeUserTask = createElement$6('zeebe:UserTask', {}, businessObject, bpmnFactory);
     addExtensionElements(element, businessObject, zeebeUserTask, bpmnFactory, commandStack);
   }
   function removeZeebeUserTask(element, commandStack) {
@@ -122811,7 +122993,7 @@
 
       // (1) ensure extension elements
       if (!extensionElements) {
-        extensionElements = createElement$3('bpmn:ExtensionElements', {
+        extensionElements = createElement$6('bpmn:ExtensionElements', {
           values: []
         }, businessObject, bpmnFactory);
         commands.push({
@@ -122829,7 +123011,7 @@
       // (2) ensure version tag
       let versionTag = getVersionTag(element);
       if (!versionTag) {
-        versionTag = createElement$3('zeebe:VersionTag', {}, extensionElements, bpmnFactory);
+        versionTag = createElement$6('zeebe:VersionTag', {}, extensionElements, bpmnFactory);
         commands.push({
           cmd: 'element.updateModdleProperties',
           context: {
@@ -123055,7 +123237,7 @@
 
       // (1) ensure extension elements
       if (!extensionElements) {
-        extensionElements = createElement$3('bpmn:ExtensionElements', {
+        extensionElements = createElement$6('bpmn:ExtensionElements', {
           values: []
         }, businessObject, bpmnFactory);
         commands.push({
@@ -123075,7 +123257,7 @@
       let properties = getProperties(businessObject, namespace);
       if (!properties) {
         const parent = extensionElements;
-        properties = createElement$3(`${namespace}:Properties`, {
+        properties = createElement$6(`${namespace}:Properties`, {
           [propertyName]: []
         }, parent, bpmnFactory);
         commands.push({
@@ -123091,7 +123273,7 @@
       }
 
       // (3) create camunda:Property
-      const property = createElement$3(`${namespace}:Property`, {}, properties, bpmnFactory);
+      const property = createElement$6(`${namespace}:Property`, {}, properties, bpmnFactory);
 
       // (4) add property to list
       commands.push({
@@ -123159,6 +123341,7 @@
         updateSignalGroup(groups, element);
         updateTimerGroup$1(groups, element, this._injector);
         updateMultiInstanceGroup$1(groups, element);
+        updateAdHocCompletionGroup(groups, element);
 
         // (3) remove message group when not applicable
         groups = removeMessageGroup(groups, element);
@@ -123494,6 +123677,23 @@
     })];
   }
 
+  // overwrite bpmn generic adHoc completion condition with zeebe-specific one
+  function updateAdHocCompletionGroup(groups, element) {
+    const adHocCompletionGroup = findGroup$1(groups, 'adHocCompletion');
+    if (!adHocCompletionGroup) {
+      return;
+    }
+    adHocCompletionGroup.entries = replaceEntriesPreservingOrder(adHocCompletionGroup.entries, AdHocCompletionProps({
+      element
+    }));
+
+    // reorder groups to move active elements before adHoc completion
+    const activeElementsGroup = findGroup$1(groups, 'activeElements');
+    if (activeElementsGroup) {
+      reorderGroupsIfNecessary(groups, activeElementsGroup, adHocCompletionGroup);
+    }
+  }
+
   // remove message group from Message End Event & Message Throw Event
   function removeMessageGroup(groups, element) {
     const messageGroup = findGroup$1(groups, 'message');
@@ -123509,9 +123709,26 @@
     return groups.find(g => g.id === id);
   }
 
+  /**
+   * Put groups into the defined order if necessary.
+   *
+   * @param {Group[]} groups
+   * @param {Group} firstGroup
+   * @param {Group} secondGroup
+   */
+  function reorderGroupsIfNecessary(groups, firstGroup, secondGroup) {
+    const firstGroupIndex = groups.indexOf(firstGroup);
+    const secondGroupIndex = groups.indexOf(secondGroup);
+    if (firstGroupIndex === -1 || secondGroupIndex === -1 || firstGroupIndex <= secondGroupIndex) {
+      return;
+    }
+    groups[firstGroupIndex] = secondGroup;
+    groups[secondGroupIndex] = firstGroup;
+  }
+
   /**
    * Replace entries with the same ID.
-   *s
+   *
    * @param {Entry[]} oldEntries
    * @param {Entry[]} newEntries
    *
@@ -123522,6 +123739,44 @@
     return [...filteredEntries, ...newEntries];
   }
 
+  /**
+   * Replace entries with the same ID, preserving original order and adding new entries at the end.
+   *
+   * @param {Entry[]} oldEntries
+   * @param {Entry[]} newEntries
+   *
+   * @returns {Entry[]} combined entries
+   */
+  function replaceEntriesPreservingOrder(oldEntries, newEntries) {
+    const indexedNewEntries = indexEntriesById(newEntries);
+    const indexedOldEntries = indexEntriesById(oldEntries);
+    const result = [];
+
+    // iterate original entries and replace with new ones if ID matches
+    oldEntries.forEach(oldEntry => {
+      const newEntryIndex = indexedNewEntries[oldEntry.id];
+      if (newEntryIndex !== undefined) {
+        result.push(newEntries[newEntryIndex]);
+      } else {
+        result.push(oldEntry);
+      }
+    });
+
+    // append remaining new entries
+    newEntries.forEach(newEntry => {
+      if (indexedOldEntries[newEntry.id] === undefined) {
+        result.push(newEntry);
+      }
+    });
+    return result;
+  }
+  function indexEntriesById(entries) {
+    return entries.reduce((index, entry, idx) => {
+      index[entry.id] = idx;
+      return index;
+    }, {});
+  }
+
   var index$1$2 = {
     __init__: ['zeebePropertiesProvider'],
     zeebePropertiesProvider: ['type', ZeebePropertiesProvider$1]
@@ -123776,7 +124031,7 @@
     'group-inputs': element => {
       const translate = useService$1('translate');
       return u("div", {
-        children: [translate('Create a new local variable in the scope of this task. '), u("a", {
+        children: [translate('Add input mappings to control what is passed to the activity as local variables. '), u("a", {
           href: "https://docs.camunda.io/docs/components/concepts/variables/#input-mappings",
           target: "_blank",
           rel: "noopener noreferrer",
@@ -123788,7 +124043,7 @@
     'group-outputs': element => {
       const translate = useService$1('translate');
       return u("div", {
-        children: [translate('Customize how result variables are merged into the global scope of the process instance. '), u("a", {
+        children: [translate('Add output mappings to control which variables are merged back into the process scope. '), u("a", {
           href: "https://docs.camunda.io/docs/components/concepts/variables/#output-mappings",
           target: "_blank",
           rel: "noopener noreferrer",
@@ -123866,6 +124121,18 @@
         })]
       });
     },
+    'group-adHocCompletion': element => {
+      const translate = useService$1('translate');
+      return u("div", {
+        children: [translate('Define the completion behavior of an ad-hoc subprocess. If no completion condition is set, it will be completed after all active elements have been completed. '), u("a", {
+          href: "https://docs.camunda.io/docs/components/modeler/bpmn/ad-hoc#completion",
+          target: "_blank",
+          rel: "noopener noreferrer",
+          title: translate('Ad-hoc subprocess documentation'),
+          children: translate('Learn more.')
+        })]
+      });
+    },
     'group-activeElements': element => {
       const translate = useService$1('translate');
       return u("div", {
@@ -124030,7 +124297,7 @@
           return;
         }
 
-        const calledDecision = getCalledDecision(element),
+        const calledDecision = getCalledDecision$1(element),
               taskDefinition = getTaskDefinition(element);
 
         if (
@@ -124061,7 +124328,7 @@
           return;
         }
 
-        const calledDecision = getCalledDecision(element),
+        const calledDecision = getCalledDecision$1(element),
               taskDefinition = getTaskDefinition(element),
               taskHeaders = getTaskHeaders(element);
 
@@ -124086,7 +124353,7 @@
 
   // helpers //////////
 
-  function getCalledDecision(element) {
+  function getCalledDecision$1(element) {
     const businessObject = getBusinessObject$2(element);
 
     return getExtensionElementsList$1(businessObject, 'zeebe:CalledDecision')[ 0 ];
@@ -124713,7 +124980,7 @@
    *
    * @returns {djs.model.Base} element which is created
    */
-  function createElement$2(elementType, properties, parent, factory) {
+  function createElement$5(elementType, properties, parent, factory) {
     var element = factory.create(elementType, properties);
     element.$parent = parent;
 
@@ -124727,7 +124994,7 @@
    *
    * @returns {ModdleElement}
    */
-  function getCalledElement(element) {
+  function getCalledElement$1(element) {
     const calledElements = getCalledElements(element);
 
     return calledElements[ 0 ];
@@ -124762,13 +125029,13 @@
 
         const businessObject = getBusinessObject$2(shape);
 
-        let calledElement = getCalledElement(businessObject);
+        let calledElement = getCalledElement$1(businessObject);
 
         if (!calledElement) {
           let extensionElements = businessObject.get('extensionElements');
 
           if (!extensionElements) {
-            extensionElements = createElement$2(
+            extensionElements = createElement$5(
               'bpmn:ExtensionElements',
               {
                 values: []
@@ -124780,7 +125047,7 @@
             modeling.updateProperties(shape, { extensionElements });
           }
 
-          calledElement = createElement$2(
+          calledElement = createElement$5(
             'zeebe:CalledElement',
             {
               propagateAllChildVariables: false
@@ -124845,7 +125112,7 @@
           let extensionElements = businessObject.get('extensionElements');
 
           if (!extensionElements) {
-            extensionElements = createElement$2(
+            extensionElements = createElement$5(
               'bpmn:ExtensionElements',
               {
                 values: [],
@@ -124857,7 +125124,7 @@
             modeling.updateProperties(shape, { extensionElements });
           }
 
-          userTaskElement = createElement$2(
+          userTaskElement = createElement$5(
             'zeebe:UserTask',
             {},
             extensionElements,
@@ -124943,7 +125210,7 @@
   const FORM_KEY_PREFIX = 'camunda-forms:bpmn:',
         USER_TASK_FORM_ID_PREFIX = 'UserTaskForm_';
 
-  function getFormDefinition(element) {
+  function getFormDefinition$1(element) {
     const businessObject = getBusinessObject$2(element);
 
     const formDefinitions = getExtensionElementsList$1(businessObject, 'zeebe:FormDefinition');
@@ -124960,7 +125227,7 @@
     rootElement = rootElement || getRootElement$1(element);
 
     if (!formKey) {
-      const formDefinition = getFormDefinition(element);
+      const formDefinition = getFormDefinition$1(element);
 
       if (!formDefinition) {
         return;
@@ -125062,7 +125329,7 @@
           return;
         }
 
-        const oldFormDefinition = getFormDefinition(shape);
+        const oldFormDefinition = getFormDefinition$1(shape);
 
         if (!oldFormDefinition) {
           return;
@@ -125079,7 +125346,7 @@
             return false;
           }
 
-          const formDefinition = getFormDefinition(element);
+          const formDefinition = getFormDefinition$1(element);
 
           return formDefinition
             && formDefinition.get('formKey')
@@ -125096,7 +125363,7 @@
 
         // (1) ensure extension elements exist
         if (!extensionElements) {
-          extensionElements = createElement$2('bpmn:ExtensionElements', {
+          extensionElements = createElement$5('bpmn:ExtensionElements', {
             values: []
           }, rootElement, bpmnFactory);
 
@@ -125108,7 +125375,7 @@
         // (2) create new user task form
         const userTaskFormId = createUserTaskFormId();
 
-        const userTaskForm = createElement$2('zeebe:UserTaskForm', {
+        const userTaskForm = createElement$5('zeebe:UserTaskForm', {
           id: userTaskFormId,
           body: oldUserTaskForm.get('body')
         }, extensionElements, bpmnFactory);
@@ -125221,7 +125488,7 @@
           return;
         }
 
-        const formDefinition = getFormDefinition(element);
+        const formDefinition = getFormDefinition$1(element);
 
         if (!formDefinition) {
           return;
@@ -125251,7 +125518,7 @@
           return;
         }
 
-        const formDefinition = getFormDefinition(element);
+        const formDefinition = getFormDefinition$1(element);
 
         if (!formDefinition) {
           return;
@@ -129970,7 +130237,7 @@
    *
    * @returns {djs.model.Base} element which is created
    */
-  function createElement$1(elementType, properties, parent, factory) {
+  function createElement$4(elementType, properties, parent, factory) {
     const element = factory.create(elementType, properties);
     if (parent) {
       element.$parent = parent;
@@ -130104,7 +130371,7 @@
    *
    * @return {ModdleElement}
    */
-  function createCalledElement(attrs = {}, bpmnFactory) {
+  function createCalledElement$2(attrs = {}, bpmnFactory) {
     return bpmnFactory.create('zeebe:CalledElement', attrs);
   }
 
@@ -130138,7 +130405,7 @@
     const businessObject = getBusinessObject$2(element);
     let extensionElements = businessObject.get('extensionElements');
     if (!extensionElements) {
-      extensionElements = createElement$1('bpmn:ExtensionElements', {}, businessObject, bpmnFactory);
+      extensionElements = createElement$4('bpmn:ExtensionElements', {}, businessObject, bpmnFactory);
       businessObject.set('extensionElements', extensionElements);
     }
     let extension = findExtension$1(extensionElements, type);
@@ -130859,7 +131126,7 @@
         this._modeling.updateModdleProperties(element, zeebeSubscription, propertiesToSet);
       } else {
         // create new Subscription
-        const newSubscription = createElement$1('zeebe:Subscription', propertiesToSet, message, this._bpmnFactory);
+        const newSubscription = createElement$4('zeebe:Subscription', propertiesToSet, message, this._bpmnFactory);
         this._modeling.updateModdleProperties(element, messageExtensionElements, {
           values: [...messageExtensionElements.get('values'), newSubscription]
         });
@@ -130974,7 +131241,7 @@
           const properties = {
             [propertyName]: newPropertyValue
           };
-          calledElement = createCalledElement(properties, bpmnFactory);
+          calledElement = createCalledElement$2(properties, bpmnFactory);
           calledElement.$parent = businessObject;
           commandStack.execute('element.updateModdleProperties', {
             element,
@@ -131100,7 +131367,7 @@
             linkName: newBinding.linkName,
             [newBinding.property]: newPropertyValue
           };
-          const newLinkedResource = createElement$1('zeebe:LinkedResource', newProperties, extensionElements, bpmnFactory);
+          const newLinkedResource = createElement$4('zeebe:LinkedResource', newProperties, extensionElements, bpmnFactory);
           commandStack.execute('element.updateModdleProperties', {
             element,
             moddleElement: linkedResources,
@@ -131861,7 +132128,7 @@
       const linkedResources = ensureExtension(element, 'zeebe:LinkedResources', bpmnFactory);
       let linkedResource = linkedResources.get('values').find(linkedResource => linkedResource.get('linkName') === linkName);
       if (!linkedResource) {
-        linkedResource = createElement$1('zeebe:LinkedResource', {
+        linkedResource = createElement$4('zeebe:LinkedResource', {
           linkName
         }, bo, bpmnFactory);
         linkedResources.get('values').push(linkedResource);
@@ -132069,7 +132336,7 @@
     if (EXTENSION_BINDING_TYPES$1.includes(type)) {
       extensionElements = businessObject.get('extensionElements');
       if (!extensionElements) {
-        extensionElements = createElement$1('bpmn:ExtensionElements', null, businessObject, bpmnFactory);
+        extensionElements = createElement$4('bpmn:ExtensionElements', null, businessObject, bpmnFactory);
         commands.push({
           cmd: 'element.updateModdleProperties',
           context: {
@@ -132166,7 +132433,7 @@
     if (IO_BINDING_TYPES$1.includes(type)) {
       let ioMapping = findExtension$1(extensionElements, 'zeebe:IoMapping');
       if (!ioMapping) {
-        ioMapping = createElement$1('zeebe:IoMapping', null, businessObject, bpmnFactory);
+        ioMapping = createElement$4('zeebe:IoMapping', null, businessObject, bpmnFactory);
         commands.push({
           cmd: 'element.updateModdleProperties',
           context: {
@@ -132228,7 +132495,7 @@
     if (type === ZEEBE_TASK_HEADER_TYPE) {
       let taskHeaders = findExtension$1(extensionElements, 'zeebe:TaskHeaders');
       if (!taskHeaders) {
-        taskHeaders = createElement$1('zeebe:TaskHeaders', null, businessObject, bpmnFactory);
+        taskHeaders = createElement$4('zeebe:TaskHeaders', null, businessObject, bpmnFactory);
         commands.push({
           cmd: 'element.updateModdleProperties',
           context: {
@@ -132274,7 +132541,7 @@
     if (type === ZEEBE_PROPERTY_TYPE) {
       let zeebeProperties = findExtension$1(extensionElements, 'zeebe:Properties');
       if (!zeebeProperties) {
-        zeebeProperties = createElement$1('zeebe:Properties', null, businessObject, bpmnFactory);
+        zeebeProperties = createElement$4('zeebe:Properties', null, businessObject, bpmnFactory);
         commands.push({
           cmd: 'element.updateModdleProperties',
           context: {
@@ -132320,7 +132587,7 @@
           }
         });
       } else {
-        subscription = createElement$1('zeebe:Subscription', properties, extensionElements, bpmnFactory);
+        subscription = createElement$4('zeebe:Subscription', properties, extensionElements, bpmnFactory);
         commands.push({
           cmd: 'element.updateModdleProperties',
           context: {
@@ -132351,7 +132618,7 @@
           }
         });
       } else {
-        calledElement = createElement$1('zeebe:CalledElement', properties, extensionElements, bpmnFactory);
+        calledElement = createElement$4('zeebe:CalledElement', properties, extensionElements, bpmnFactory);
         commands.push({
           cmd: 'element.updateModdleProperties',
           context: {
@@ -132367,7 +132634,7 @@
     if (type === ZEEBE_LINKED_RESOURCE_PROPERTY) {
       let linkedResources = findExtension$1(businessObject, 'zeebe:LinkedResources');
       if (!linkedResources) {
-        linkedResources = createElement$1('zeebe:LinkedResources', null, businessObject, bpmnFactory);
+        linkedResources = createElement$4('zeebe:LinkedResources', null, businessObject, bpmnFactory);
         commands.push({
           cmd: 'element.updateModdleProperties',
           context: {
@@ -132381,7 +132648,7 @@
       }
       let linkedResource = linkedResources.get('values').find(value => value.get('linkName') === linkName);
       if (!linkedResource) {
-        linkedResource = createElement$1('zeebe:LinkedResource', {
+        linkedResource = createElement$4('zeebe:LinkedResource', {
           linkName
         }, businessObject, bpmnFactory);
         commands.push({
@@ -134839,7 +135106,7 @@
       // (1) create new message
       if (value === CREATE_NEW_OPTION) {
         const id = nextId('Message_');
-        message = createElement$1('bpmn:Message', {
+        message = createElement$4('bpmn:Message', {
           id,
           name: id
         }, root, bpmnFactory);
@@ -144314,7 +144581,7 @@
           return elem.classList.add(className);
       elem.classList.remove(className);
   }
-  function createElement(tag, className, content) {
+  function createElement$3(tag, className, content) {
       var e = window.document.createElement(tag);
       className = className || "";
       content = content || "";
@@ -144335,7 +144602,7 @@
       return undefined;
   }
   function createNumberInput(inputClassName, opts) {
-      var wrapper = createElement("div", "numInputWrapper"), numInput = createElement("input", "numInput " + inputClassName), arrowUp = createElement("span", "arrowUp"), arrowDown = createElement("span", "arrowDown");
+      var wrapper = createElement$3("div", "numInputWrapper"), numInput = createElement$3("input", "numInput " + inputClassName), arrowUp = createElement$3("span", "arrowUp"), arrowDown = createElement$3("span", "arrowDown");
       if (navigator.userAgent.indexOf("MSIE 9.0") === -1) {
           numInput.type = "number";
       }
@@ -144691,7 +144958,7 @@
       self.clear = clear;
       self.close = close;
       self.onMouseOver = onMouseOver;
-      self._createElement = createElement;
+      self._createElement = createElement$3;
       self.createDay = createDay;
       self.destroy = destroy;
       self.isEnabled = isEnabled;
@@ -145011,21 +145278,21 @@
       }
       function build() {
           var fragment = window.document.createDocumentFragment();
-          self.calendarContainer = createElement("div", "flatpickr-calendar");
+          self.calendarContainer = createElement$3("div", "flatpickr-calendar");
           self.calendarContainer.tabIndex = -1;
           if (!self.config.noCalendar) {
               fragment.appendChild(buildMonthNav());
-              self.innerContainer = createElement("div", "flatpickr-innerContainer");
+              self.innerContainer = createElement$3("div", "flatpickr-innerContainer");
               if (self.config.weekNumbers) {
                   var _a = buildWeeks(), weekWrapper = _a.weekWrapper, weekNumbers = _a.weekNumbers;
                   self.innerContainer.appendChild(weekWrapper);
                   self.weekNumbers = weekNumbers;
                   self.weekWrapper = weekWrapper;
               }
-              self.rContainer = createElement("div", "flatpickr-rContainer");
+              self.rContainer = createElement$3("div", "flatpickr-rContainer");
               self.rContainer.appendChild(buildWeekdays());
               if (!self.daysContainer) {
-                  self.daysContainer = createElement("div", "flatpickr-days");
+                  self.daysContainer = createElement$3("div", "flatpickr-days");
                   self.daysContainer.tabIndex = -1;
               }
               buildDays();
@@ -145051,7 +145318,7 @@
                       self.config.appendTo.appendChild(self.calendarContainer);
               }
               if (self.config.static) {
-                  var wrapper = createElement("div", "flatpickr-wrapper");
+                  var wrapper = createElement$3("div", "flatpickr-wrapper");
                   if (self.element.parentNode)
                       self.element.parentNode.insertBefore(wrapper, self.element);
                   wrapper.appendChild(self.element);
@@ -145066,7 +145333,7 @@
                   : window.document.body).appendChild(self.calendarContainer);
       }
       function createDay(className, date, _dayNumber, i) {
-          var dateIsEnabled = isEnabled(date, true), dayElement = createElement("span", className, date.getDate().toString());
+          var dateIsEnabled = isEnabled(date, true), dayElement = createElement$3("span", className, date.getDate().toString());
           dayElement.dateObj = date;
           dayElement.$i = i;
           dayElement.setAttribute("aria-label", self.formatDate(date, self.config.ariaDateFormat));
@@ -145190,7 +145457,7 @@
               (self.config.showMonths === 1 || dayIndex % 7 !== 0); dayNum++, dayIndex++) {
               days.appendChild(createDay("flatpickr-day " + nextMonthDayClass, new Date(year, month + 1, dayNum % daysInMonth), dayNum, dayIndex));
           }
-          var dayContainer = createElement("div", "dayContainer");
+          var dayContainer = createElement$3("div", "dayContainer");
           dayContainer.appendChild(days);
           return dayContainer;
       }
@@ -145232,7 +145499,7 @@
           for (var i = 0; i < 12; i++) {
               if (!shouldBuildMonth(i))
                   continue;
-              var month = createElement("option", "flatpickr-monthDropdown-month");
+              var month = createElement$3("option", "flatpickr-monthDropdown-month");
               month.value = new Date(self.currentYear, i).getMonth().toString();
               month.textContent = monthToStr(i, self.config.shorthandCurrentMonth, self.l10n);
               month.tabIndex = -1;
@@ -145243,15 +145510,15 @@
           }
       }
       function buildMonth() {
-          var container = createElement("div", "flatpickr-month");
+          var container = createElement$3("div", "flatpickr-month");
           var monthNavFragment = window.document.createDocumentFragment();
           var monthElement;
           if (self.config.showMonths > 1 ||
               self.config.monthSelectorType === "static") {
-              monthElement = createElement("span", "cur-month");
+              monthElement = createElement$3("span", "cur-month");
           }
           else {
-              self.monthsDropdownContainer = createElement("select", "flatpickr-monthDropdown-months");
+              self.monthsDropdownContainer = createElement$3("select", "flatpickr-monthDropdown-months");
               self.monthsDropdownContainer.setAttribute("aria-label", self.l10n.monthAriaLabel);
               bind(self.monthsDropdownContainer, "change", function (e) {
                   var target = getEventTarget(e);
@@ -145274,7 +145541,7 @@
                   !!self.config.minDate &&
                       self.config.minDate.getFullYear() === self.config.maxDate.getFullYear();
           }
-          var currentMonth = createElement("div", "flatpickr-current-month");
+          var currentMonth = createElement$3("div", "flatpickr-current-month");
           currentMonth.appendChild(monthElement);
           currentMonth.appendChild(yearInput);
           monthNavFragment.appendChild(currentMonth);
@@ -145301,12 +145568,12 @@
           self.monthNav.appendChild(self.nextMonthNav);
       }
       function buildMonthNav() {
-          self.monthNav = createElement("div", "flatpickr-months");
+          self.monthNav = createElement$3("div", "flatpickr-months");
           self.yearElements = [];
           self.monthElements = [];
-          self.prevMonthNav = createElement("span", "flatpickr-prev-month");
+          self.prevMonthNav = createElement$3("span", "flatpickr-prev-month");
           self.prevMonthNav.innerHTML = self.config.prevArrow;
-          self.nextMonthNav = createElement("span", "flatpickr-next-month");
+          self.nextMonthNav = createElement$3("span", "flatpickr-next-month");
           self.nextMonthNav.innerHTML = self.config.nextArrow;
           buildMonths();
           Object.defineProperty(self, "_hidePrevMonthArrow", {
@@ -145336,9 +145603,9 @@
           if (self.config.noCalendar)
               self.calendarContainer.classList.add("noCalendar");
           var defaults = getDefaultHours(self.config);
-          self.timeContainer = createElement("div", "flatpickr-time");
+          self.timeContainer = createElement$3("div", "flatpickr-time");
           self.timeContainer.tabIndex = -1;
-          var separator = createElement("span", "flatpickr-time-separator", ":");
+          var separator = createElement$3("span", "flatpickr-time-separator", ":");
           var hourInput = createNumberInput("flatpickr-hour", {
               "aria-label": self.l10n.hourAriaLabel,
           });
@@ -145380,11 +145647,11 @@
               self.secondElement.setAttribute("min", "0");
               self.secondElement.setAttribute("max", "59");
               self.secondElement.setAttribute("maxlength", "2");
-              self.timeContainer.appendChild(createElement("span", "flatpickr-time-separator", ":"));
+              self.timeContainer.appendChild(createElement$3("span", "flatpickr-time-separator", ":"));
               self.timeContainer.appendChild(secondInput);
           }
           if (!self.config.time_24hr) {
-              self.amPM = createElement("span", "flatpickr-am-pm", self.l10n.amPM[int((self.latestSelectedDateObj
+              self.amPM = createElement$3("span", "flatpickr-am-pm", self.l10n.amPM[int((self.latestSelectedDateObj
                   ? self.hourElement.value
                   : self.config.defaultHour) > 11)]);
               self.amPM.title = self.l10n.toggleTitle;
@@ -145395,11 +145662,11 @@
       }
       function buildWeekdays() {
           if (!self.weekdayContainer)
-              self.weekdayContainer = createElement("div", "flatpickr-weekdays");
+              self.weekdayContainer = createElement$3("div", "flatpickr-weekdays");
           else
               clearNode(self.weekdayContainer);
           for (var i = self.config.showMonths; i--;) {
-              var container = createElement("div", "flatpickr-weekdaycontainer");
+              var container = createElement$3("div", "flatpickr-weekdaycontainer");
               self.weekdayContainer.appendChild(container);
           }
           updateWeekdays();
@@ -145420,9 +145687,9 @@
       }
       function buildWeeks() {
           self.calendarContainer.classList.add("hasWeeks");
-          var weekWrapper = createElement("div", "flatpickr-weekwrapper");
-          weekWrapper.appendChild(createElement("span", "flatpickr-weekday", self.l10n.weekAbbreviation));
-          var weekNumbers = createElement("div", "flatpickr-weeks");
+          var weekWrapper = createElement$3("div", "flatpickr-weekwrapper");
+          weekWrapper.appendChild(createElement$3("span", "flatpickr-weekday", self.l10n.weekAbbreviation));
+          var weekNumbers = createElement$3("div", "flatpickr-weeks");
           weekWrapper.appendChild(weekNumbers);
           return {
               weekWrapper: weekWrapper,
@@ -146409,7 +146676,7 @@
           self.input.classList.add("flatpickr-input");
           self._input = self.input;
           if (self.config.altInput) {
-              self.altInput = createElement(self.input.nodeName, self.config.altInputClass);
+              self.altInput = createElement$3(self.input.nodeName, self.config.altInputClass);
               self._input = self.altInput;
               self.altInput.placeholder = self.input.placeholder;
               self.altInput.disabled = self.input.disabled;
@@ -146433,7 +146700,7 @@
                   ? "time"
                   : "datetime-local"
               : "date";
-          self.mobileInput = createElement("input", self.input.className + " flatpickr-mobile");
+          self.mobileInput = createElement$3("input", self.input.className + " flatpickr-mobile");
           self.mobileInput.tabIndex = 1;
           self.mobileInput.type = inputType;
           self.mobileInput.disabled = self.input.disabled;
@@ -146692,7 +146959,7 @@
 
   function g(n,t){for(var e in t)n[e]=t[e];return n}function C(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 w(n){this.props=n;}(w.prototype=new d$3).isPureReactComponent=!0,w.prototype.shouldComponentUpdate=function(n,t){return C(this.props,n)||C(this.state,t)};var x=l$5.__b;l$5.__b=function(n){n.type&&n.type.__f&&n.ref&&(n.props.ref=n.ref,n.ref=null),x&&x(n);};var T=l$5.__e;l$5.__e=function(n,t,e,r){if(n.then)for(var u,o=t;o=o.__;)if((u=o.__c)&&u.__c)return null==t.__e&&(t.__e=e.__e,t.__k=e.__k),u.__c(n,t);T(n,t,e,r);};var I=l$5.unmount;function L(n,t,e){return n&&(n.__c&&n.__c.__H&&(n.__c.__H.__.forEach(function(n){"function"==typeof n.__c&&n.__c();}),n.__c.__H=null),null!=(n=g({},n)).__c&&(n.__c.__P===e&&(n.__c.__P=t),n.__c=null),n.__k=n.__k&&n.__k.map(function(n){return L(n,t,e)})),n}function U(n,t,e){return n&&(n.__v=null,n.__k=n.__k&&n.__k.map(function(n){return U(n,t,e)}),n.__c&&n.__c.__P===t&&(n.__e&&e.insertBefore(n.__e,n.__d),n.__c.__e=!0,n.__c.__P=e)),n}function D(){this.__u=0,this.t=null,this.__b=null;}function F(n){var t=n.__.__c;return t&&t.__a&&t.__a(n)}function V(){this.u=null,this.o=null;}l$5.unmount=function(n){var t=n.__c;t&&t.__R&&t.__R(),t&&!0===n.__h&&(n.type=null),I&&I(n);},(D.prototype=new d$3).__c=function(n,t){var e=t.__c,r=this;null==r.t&&(r.t=[]),r.t.push(e);var u=F(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.__a){var n=r.state.__a;r.__v.__k[0]=U(n,n.__c.__P,n.__c.__O);}var t;for(r.setState({__a:r.__b=null});t=r.t.pop();)t.forceUpdate();}},c=!0===t.__h;r.__u++||c||r.setState({__a:r.__b=r.__v.__k[0]}),n.then(i,i);},D.prototype.componentWillUnmount=function(){this.t=[];},D.prototype.render=function(n,e){if(this.__b){if(this.__v.__k){var r=document.createElement("div"),o=this.__v.__k[0].__c;this.__v.__k[0]=L(this.__b,r,o.__O=o.__P);}this.__b=null;}var i=e.__a&&h$3(p$4,null,n.fallback);return i&&(i.__h=null),[h$3(p$4,null,e.__a?null:n.children),i]};var W=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];}};(V.prototype=new d$3).__a=function(n){var t=this,e=F(t.__v),r=t.o.get(n);return r[0]++,function(u){var o=function(){t.props.revealOrder?(r.push(u),W(t,n,r)):u();};e?e(o):o();}},V.prototype.render=function(n){this.u=null,this.o=new Map;var t=x$4(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},V.prototype.componentDidUpdate=V.prototype.componentDidMount=function(){var n=this;this.o.forEach(function(t,e){W(n,e,t);});};var z="undefined"!=typeof Symbol&&Symbol.for&&Symbol.for("react.element")||60103,B=/^(?:accent|alignment|arabic|baseline|cap|clip(?!PathU)|color|dominant|fill|flood|font|glyph(?!R)|horiz|image|letter|lighting|marker(?!H|W|U)|overline|paint|pointer|shape|stop|strikethrough|stroke|text(?!L)|transform|underline|unicode|units|v|vector|vert|word|writing|x(?!C))[A-Z]/,H="undefined"!=typeof document,Z=function(n){return ("undefined"!=typeof Symbol&&"symbol"==typeof Symbol()?/fil|che|rad/i:/fil|che|ra/i).test(n)};d$3.prototype.isReactComponent={},["componentWillMount","componentWillReceiveProps","componentWillUpdate"].forEach(function(t){Object.defineProperty(d$3.prototype,t,{configurable:!0,get:function(){return this["UNSAFE_"+t]},set:function(n){Object.defineProperty(this,t,{configurable:!0,writable:!0,value:n});}});});var G=l$5.event;function J(){}function K(){return this.cancelBubble}function Q(){return this.defaultPrevented}l$5.event=function(n){return G&&(n=G(n)),n.persist=J,n.isPropagationStopped=K,n.isDefaultPrevented=Q,n.nativeEvent=n};var nn={configurable:!0,get:function(){return this.class}},tn=l$5.vnode;l$5.vnode=function(n){var t=n.type,e=n.props,u=e;if("string"==typeof t){var o=-1===t.indexOf("-");for(var i in u={},e){var l=e[i];H&&"children"===i&&"noscript"===t||"value"===i&&"defaultValue"in e&&null==l||("defaultValue"===i&&"value"in e&&null==e.value?i="value":"download"===i&&!0===l?l="":/ondoubleclick/i.test(i)?i="ondblclick":/^onchange(textarea|input)/i.test(i+t)&&!Z(e.type)?i="oninput":/^onfocus$/i.test(i)?i="onfocusin":/^onblur$/i.test(i)?i="onfocusout":/^on(Ani|Tra|Tou|BeforeInp|Compo)/.test(i)?i=i.toLowerCase():o&&B.test(i)?i=i.replace(/[A-Z0-9]/g,"-$&").toLowerCase():null===l&&(l=void 0),/^oninput$/i.test(i)&&(i=i.toLowerCase(),u[i]&&(i="oninputCapture")),u[i]=l);}"select"==t&&u.multiple&&Array.isArray(u.value)&&(u.value=x$4(e.children).forEach(function(n){n.props.selected=-1!=u.value.indexOf(n.props.value);})),"select"==t&&null!=u.defaultValue&&(u.value=x$4(e.children).forEach(function(n){n.props.selected=u.multiple?-1!=u.defaultValue.indexOf(n.props.value):u.defaultValue==n.props.value;})),n.props=u,e.class!=e.className&&(nn.enumerable="className"in e,null!=e.className&&(u.class=e.className),Object.defineProperty(u,"className",nn));}n.$$typeof=z,tn&&tn(n);};var en=l$5.__r;l$5.__r=function(n){en&&en(n),n.__c;};
 
-  /*! @license DOMPurify 3.2.0 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.2.0/LICENSE */
+  /*! @license DOMPurify 3.2.4 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.2.4/LICENSE */
 
   const {
     entries,
@@ -146731,8 +146998,10 @@
     };
   }
   const arrayForEach = unapply(Array.prototype.forEach);
+  const arrayLastIndexOf = unapply(Array.prototype.lastIndexOf);
   const arrayPop = unapply(Array.prototype.pop);
   const arrayPush = unapply(Array.prototype.push);
+  const arraySplice = unapply(Array.prototype.splice);
   const stringToLowerCase = unapply(String.prototype.toLowerCase);
   const stringToString = unapply(String.prototype.toString);
   const stringMatch = unapply(String.prototype.match);
@@ -146867,7 +147136,6 @@
   }
 
   const html$1 = freeze(['a', 'abbr', 'acronym', 'address', 'area', 'article', 'aside', 'audio', 'b', 'bdi', 'bdo', 'big', 'blink', 'blockquote', 'body', 'br', 'button', 'canvas', 'caption', 'center', 'cite', 'code', 'col', 'colgroup', 'content', 'data', 'datalist', 'dd', 'decorator', 'del', 'details', 'dfn', 'dialog', 'dir', 'div', 'dl', 'dt', 'element', 'em', 'fieldset', 'figcaption', 'figure', 'font', 'footer', 'form', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'head', 'header', 'hgroup', 'hr', 'html', 'i', 'img', 'input', 'ins', 'kbd', 'label', 'legend', 'li', 'main', 'map', 'mark', 'marquee', 'menu', 'menuitem', 'meter', 'nav', 'nobr', 'ol', 'optgroup', 'option', 'output', 'p', 'picture', 'pre', 'progress', 'q', 'rp', 'rt', 'ruby', 's', 'samp', 'section', 'select', 'shadow', 'small', 'source', 'spacer', 'span', 'strike', 'strong', 'style', 'sub', 'summary', 'sup', 'table', 'tbody', 'td', 'template', 'textarea', 'tfoot', 'th', 'thead', 'time', 'tr', 'track', 'tt', 'u', 'ul', 'var', 'video', 'wbr']);
-  // SVG
   const svg$1 = freeze(['svg', 'a', 'altglyph', 'altglyphdef', 'altglyphitem', 'animatecolor', 'animatemotion', 'animatetransform', 'circle', 'clippath', 'defs', 'desc', 'ellipse', 'filter', 'font', 'g', 'glyph', 'glyphref', 'hkern', 'image', 'line', 'lineargradient', 'marker', 'mask', 'metadata', 'mpath', 'path', 'pattern', 'polygon', 'polyline', 'radialgradient', 'rect', 'stop', 'style', 'switch', 'symbol', 'text', 'textpath', 'title', 'tref', 'tspan', 'view', 'vkern']);
   const svgFilters = freeze(['feBlend', 'feColorMatrix', 'feComponentTransfer', 'feComposite', 'feConvolveMatrix', 'feDiffuseLighting', 'feDisplacementMap', 'feDistantLight', 'feDropShadow', 'feFlood', 'feFuncA', 'feFuncB', 'feFuncG', 'feFuncR', 'feGaussianBlur', 'feImage', 'feMerge', 'feMergeNode', 'feMorphology', 'feOffset', 'fePointLight', 'feSpecularLighting', 'feSpotLight', 'feTile', 'feTurbulence']);
   // List of SVG elements that are disallowed by default.
@@ -146889,8 +147157,8 @@
   // eslint-disable-next-line unicorn/better-regex
   const MUSTACHE_EXPR = seal(/\{\{[\w\W]*|[\w\W]*\}\}/gm); // Specify template detection regex for SAFE_FOR_TEMPLATES mode
   const ERB_EXPR = seal(/<%[\w\W]*|[\w\W]*%>/gm);
-  const TMPLIT_EXPR = seal(/\${[\w\W]*}/gm);
-  const DATA_ATTR = seal(/^data-[\-\w.\u00B7-\uFFFF]/); // eslint-disable-line no-useless-escape
+  const TMPLIT_EXPR = seal(/\$\{[\w\W]*/gm); // eslint-disable-line unicorn/better-regex
+  const DATA_ATTR = seal(/^data-[\-\w.\u00B7-\uFFFF]+$/); // eslint-disable-line no-useless-escape
   const ARIA_ATTR = seal(/^aria-[\-\w]+$/); // eslint-disable-line no-useless-escape
   const IS_ALLOWED_URI = seal(/^(?:(?:(?:f|ht)tps?|mailto|tel|callto|sms|cid|xmpp):|[^a-z]|[a-z+.\-]+(?:[^a-z+.\-:]|$))/i // eslint-disable-line no-useless-escape
   );
@@ -146973,12 +147241,25 @@
       return null;
     }
   };
+  const _createHooksMap = function _createHooksMap() {
+    return {
+      afterSanitizeAttributes: [],
+      afterSanitizeElements: [],
+      afterSanitizeShadowDOM: [],
+      beforeSanitizeAttributes: [],
+      beforeSanitizeElements: [],
+      beforeSanitizeShadowDOM: [],
+      uponSanitizeAttribute: [],
+      uponSanitizeElement: [],
+      uponSanitizeShadowNode: []
+    };
+  };
   function createDOMPurify() {
     let window = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : getGlobal();
     const DOMPurify = root => createDOMPurify(root);
-    DOMPurify.version = '3.2.0';
+    DOMPurify.version = '3.2.4';
     DOMPurify.removed = [];
-    if (!window || !window.document || window.document.nodeType !== NODE_TYPE.document) {
+    if (!window || !window.document || window.document.nodeType !== NODE_TYPE.document || !window.Element) {
       // Not running in a browser, provide a factory function
       // so that you can pass your own Window
       DOMPurify.isSupported = false;
@@ -147029,7 +147310,7 @@
     const {
       importNode
     } = originalDocument;
-    let hooks = {};
+    let hooks = _createHooksMap();
     /**
      * Expose whether this browser supports running the full DOMPurify.
      */
@@ -147458,8 +147739,8 @@
         });
       }
       element.removeAttribute(name);
-      // We void attribute values for unremovable "is"" attributes
-      if (name === 'is' && !ALLOWED_ATTR[name]) {
+      // We void attribute values for unremovable "is" attributes
+      if (name === 'is') {
         if (RETURN_DOM || RETURN_DOM_FRAGMENT) {
           try {
             _forceRemove(element);
@@ -147550,11 +147831,8 @@
     const _isNode = function _isNode(value) {
       return typeof Node === 'function' && value instanceof Node;
     };
-    function _executeHook(entryPoint, currentNode, data) {
-      if (!hooks[entryPoint]) {
-        return;
-      }
-      arrayForEach(hooks[entryPoint], hook => {
+    function _executeHooks(hooks, currentNode, data) {
+      arrayForEach(hooks, hook => {
         hook.call(DOMPurify, currentNode, data, CONFIG);
       });
     }
@@ -147570,7 +147848,7 @@
     const _sanitizeElements = function _sanitizeElements(currentNode) {
       let content = null;
       /* Execute a hook if present */
-      _executeHook('beforeSanitizeElements', currentNode, null);
+      _executeHooks(hooks.beforeSanitizeElements, currentNode, null);
       /* Check if element is clobbered or can clobber */
       if (_isClobbered(currentNode)) {
         _forceRemove(currentNode);
@@ -147579,7 +147857,7 @@
       /* Now let's check the element's type and name */
       const tagName = transformCaseFunc(currentNode.nodeName);
       /* Execute a hook if present */
-      _executeHook('uponSanitizeElement', currentNode, {
+      _executeHooks(hooks.uponSanitizeElement, currentNode, {
         tagName,
         allowedTags: ALLOWED_TAGS
       });
@@ -147650,7 +147928,7 @@
         }
       }
       /* Execute a hook if present */
-      _executeHook('afterSanitizeElements', currentNode, null);
+      _executeHooks(hooks.afterSanitizeElements, currentNode, null);
       return false;
     };
     /**
@@ -147711,12 +147989,12 @@
      */
     const _sanitizeAttributes = function _sanitizeAttributes(currentNode) {
       /* Execute a hook if present */
-      _executeHook('beforeSanitizeAttributes', currentNode, null);
+      _executeHooks(hooks.beforeSanitizeAttributes, currentNode, null);
       const {
         attributes
       } = currentNode;
       /* Check if we have attributes; if not we might have a text node */
-      if (!attributes) {
+      if (!attributes || _isClobbered(currentNode)) {
         return;
       }
       const hookEvent = {
@@ -147742,7 +148020,7 @@
         hookEvent.attrValue = value;
         hookEvent.keepAttr = true;
         hookEvent.forceKeepAttr = undefined; // Allows developers to see this is a property they can set
-        _executeHook('uponSanitizeAttribute', currentNode, hookEvent);
+        _executeHooks(hooks.uponSanitizeAttribute, currentNode, hookEvent);
         value = hookEvent.attrValue;
         /* Full DOM Clobbering protection via namespace isolation,
          * Prefix id and name attributes with `user-content-`
@@ -147817,7 +148095,7 @@
         } catch (_) {}
       }
       /* Execute a hook if present */
-      _executeHook('afterSanitizeAttributes', currentNode, null);
+      _executeHooks(hooks.afterSanitizeAttributes, currentNode, null);
     };
     /**
      * _sanitizeShadowDOM
@@ -147828,23 +148106,21 @@
       let shadowNode = null;
       const shadowIterator = _createNodeIterator(fragment);
       /* Execute a hook if present */
-      _executeHook('beforeSanitizeShadowDOM', fragment, null);
+      _executeHooks(hooks.beforeSanitizeShadowDOM, fragment, null);
       while (shadowNode = shadowIterator.nextNode()) {
         /* Execute a hook if present */
-        _executeHook('uponSanitizeShadowNode', shadowNode, null);
+        _executeHooks(hooks.uponSanitizeShadowNode, shadowNode, null);
         /* Sanitize tags and elements */
-        if (_sanitizeElements(shadowNode)) {
-          continue;
-        }
+        _sanitizeElements(shadowNode);
+        /* Check attributes next */
+        _sanitizeAttributes(shadowNode);
         /* Deep shadow DOM detected */
         if (shadowNode.content instanceof DocumentFragment) {
           _sanitizeShadowDOM(shadowNode.content);
         }
-        /* Check attributes, sanitize if necessary */
-        _sanitizeAttributes(shadowNode);
       }
       /* Execute a hook if present */
-      _executeHook('afterSanitizeShadowDOM', fragment, null);
+      _executeHooks(hooks.afterSanitizeShadowDOM, fragment, null);
     };
     // eslint-disable-next-line complexity
     DOMPurify.sanitize = function (dirty) {
@@ -147930,15 +148206,13 @@
       /* Now start iterating over the created document */
       while (currentNode = nodeIterator.nextNode()) {
         /* Sanitize tags and elements */
-        if (_sanitizeElements(currentNode)) {
-          continue;
-        }
+        _sanitizeElements(currentNode);
+        /* Check attributes next */
+        _sanitizeAttributes(currentNode);
         /* Shadow DOM detected, sanitize it */
         if (currentNode.content instanceof DocumentFragment) {
           _sanitizeShadowDOM(currentNode.content);
         }
-        /* Check attributes, sanitize if necessary */
-        _sanitizeAttributes(currentNode);
       }
       /* If we sanitized `dirty` in-place, return it. */
       if (IN_PLACE) {
@@ -148002,21 +148276,20 @@
       if (typeof hookFunction !== 'function') {
         return;
       }
-      hooks[entryPoint] = hooks[entryPoint] || [];
       arrayPush(hooks[entryPoint], hookFunction);
     };
-    DOMPurify.removeHook = function (entryPoint) {
-      if (hooks[entryPoint]) {
-        return arrayPop(hooks[entryPoint]);
+    DOMPurify.removeHook = function (entryPoint, hookFunction) {
+      if (hookFunction !== undefined) {
+        const index = arrayLastIndexOf(hooks[entryPoint], hookFunction);
+        return index === -1 ? undefined : arraySplice(hooks[entryPoint], index, 1)[0];
       }
+      return arrayPop(hooks[entryPoint]);
     };
     DOMPurify.removeHooks = function (entryPoint) {
-      if (hooks[entryPoint]) {
-        hooks[entryPoint] = [];
-      }
+      hooks[entryPoint] = [];
     };
     DOMPurify.removeAllHooks = function () {
-      hooks = {};
+      hooks = _createHooksMap();
     };
     return DOMPurify;
   }
@@ -161654,7 +161927,7 @@
   /**
    * This module is an append menu provider for the popup menu.
    */
-  function AppendMenuProvider(
+  function AppendMenuProvider$3(
       elementFactory, popupMenu,
       create, autoPlace, rules,
       mouse, translate
@@ -161672,7 +161945,7 @@
     this.register();
   }
 
-  AppendMenuProvider.$inject = [
+  AppendMenuProvider$3.$inject = [
     'elementFactory',
     'popupMenu',
     'create',
@@ -161685,7 +161958,7 @@
   /**
    * Register append menu provider in the popup menu
    */
-  AppendMenuProvider.prototype.register = function() {
+  AppendMenuProvider$3.prototype.register = function() {
     this._popupMenu.registerProvider('bpmn-append', this);
   };
 
@@ -161696,7 +161969,7 @@
    *
    * @return {Array<Object>} a list of menu entry items
    */
-  AppendMenuProvider.prototype.getPopupMenuEntries = function(element) {
+  AppendMenuProvider$3.prototype.getPopupMenuEntries = function(element) {
     const rules = this._rules;
     const translate = this._translate;
 
@@ -161746,7 +162019,7 @@
    *
    * @return {Array<Object>} filtered entries
    */
-  AppendMenuProvider.prototype._filterEntries = function(entries) {
+  AppendMenuProvider$3.prototype._filterEntries = function(entries) {
     return entries.filter(option => {
 
       const target = option.target;
@@ -161778,7 +162051,7 @@
    *
    * @return {Object}
    */
-  AppendMenuProvider.prototype._createEntryAction = function(element, target) {
+  AppendMenuProvider$3.prototype._createEntryAction = function(element, target) {
     const elementFactory = this._elementFactory;
     const autoPlace = this._autoPlace;
     const create = this._create;
@@ -161815,7 +162088,7 @@
    *
    * @return {Boolean}
    */
-  AppendMenuProvider.prototype._canAutoPlaceElement = (target) => {
+  AppendMenuProvider$3.prototype._canAutoPlaceElement = (target) => {
     const { type } = target;
 
     if (type === 'bpmn:BoundaryEvent') {
@@ -162404,7 +162677,7 @@
       'appendContextPadProvider',
       'appendRules'
     ],
-    appendMenuProvider: [ 'type', AppendMenuProvider ],
+    appendMenuProvider: [ 'type', AppendMenuProvider$3 ],
     appendContextPadProvider: [ 'type', AppendContextPadProvider ],
     appendRules: [ 'type', AppendRules ]
   };
@@ -162412,7 +162685,7 @@
   /**
    * This module is a create menu provider for the popup menu.
    */
-  function CreateMenuProvider(
+  function CreateMenuProvider$3(
       elementFactory, popupMenu, create,
       autoPlace, mouse, translate
   ) {
@@ -162426,7 +162699,7 @@
     this.register();
   }
 
-  CreateMenuProvider.$inject = [
+  CreateMenuProvider$3.$inject = [
     'elementFactory',
     'popupMenu',
     'create',
@@ -162438,7 +162711,7 @@
   /**
    * Register create menu provider in the popup menu
    */
-  CreateMenuProvider.prototype.register = function() {
+  CreateMenuProvider$3.prototype.register = function() {
     this._popupMenu.registerProvider('bpmn-create', this);
   };
 
@@ -162449,7 +162722,7 @@
    *
    * @return {Array<Object>} a list of menu entry items
    */
-  CreateMenuProvider.prototype.getPopupMenuEntries = function() {
+  CreateMenuProvider$3.prototype.getPopupMenuEntries = function() {
 
     const entries = {};
 
@@ -162494,7 +162767,7 @@
    * @param {Object} target
    * @returns {Object}
    */
-  CreateMenuProvider.prototype._createEntryAction = function(target) {
+  CreateMenuProvider$3.prototype._createEntryAction = function(target) {
 
     const create = this._create;
     const mouse = this._mouse;
@@ -162627,7 +162900,7 @@
       'createMenuProvider',
       'createPaletteProvider'
     ],
-    createMenuProvider: [ 'type', CreateMenuProvider ],
+    createMenuProvider: [ 'type', CreateMenuProvider$3 ],
     createPaletteProvider: [ 'type', CreatePaletteProvider ]
   };
 
@@ -164889,6 +165162,911 @@
     camundaDetailsPopupMenuProvider: [ 'type', CamundaDetailsPopupMenuProvider ]
   };
 
+  class Resources {
+    static $inject = [ 'config.resources' ];
+
+    constructor(resources) {
+      this._resources = resources || [];
+    }
+
+    set(resources) {
+      this._resources = resources;
+    }
+
+    getAll() {
+      return this._resources;
+    }
+
+    filter(fn) {
+      return this._resources.filter(fn);
+    }
+  }
+
+  class ResourceLoader {
+    static $inject = [ 'eventBus', 'resources' ];
+
+    constructor(eventBus, resources) {
+      this._resources = resources;
+      this._providers = [];
+
+      eventBus.on('diagram.init', () => {
+        this.reload();
+      });
+    }
+
+    register(resourceProvider) {
+      this._providers.push(resourceProvider);
+    }
+
+    reload() {
+      const combined = this._providers.reduce((resources, provider) => {
+        return resources.concat(provider.getResources());
+      }, []);
+
+      this._resources.set(combined);
+    }
+  }
+
+  /**
+   * @typedef {{
+   *   type: 'bpmnProcess',
+   *   name: string,
+   *   processId: string
+   * }} CallActivity
+   */
+
+  /**
+   *
+   * @param {CallActivity} resource
+   * @param {import('bpmn-js/lib/features/modeling/BpmnFactory').default} bpmnFactory
+   */
+  function createElement$2(resource, bpmnFactory) {
+    return createCallActivity(resource, bpmnFactory);
+  }
+
+  function createCallActivity(resource, bpmnFactory) {
+    const calledElement = createCalledElement$1(resource, bpmnFactory);
+    const extensionElements = bpmnFactory.create('bpmn:ExtensionElements', {
+      values: [
+        calledElement
+      ]
+    });
+
+    return bpmnFactory.create('bpmn:CallActivity', {
+      name: resource.name,
+      extensionElements
+    });
+  }
+
+  function createCalledElement$1(resource, bpmnFactory) {
+    return bpmnFactory.create('zeebe:CalledElement', {
+      processId: resource.processId
+    });
+  }
+
+  const searchTerms$2 = [
+    'resource',
+    'bpmn',
+    'call activity',
+    'child process'
+  ].join(' ');
+
+  /**
+   * @typedef {object} Config
+   * @property {string} resourceType
+   * @property {string} className
+   * @property {string} groupName
+   * @property {Function} createElement
+   * @property {string} [search]
+   */
+
+  class BaseCreateMenuProvider {
+
+    /**
+     *
+     * @param {import('didi').Injector} injector
+     * @param {Config} config
+     */
+    constructor(injector, config) {
+      this._elementFactory = injector.get('elementFactory');
+      this._bpmnFactory = injector.get('bpmnFactory');
+      this._popupMenu = injector.get('popupMenu');
+      this._create = injector.get('create');
+      this._autoPlace = injector.get('autoPlace');
+      this._mouse = injector.get('mouse');
+      this._translate = injector.get('translate');
+      this._resources = injector.get('resources');
+
+      injector.get('popupMenu').registerProvider('bpmn-create', this);
+
+      this._config = config;
+    }
+
+    getPopupMenuEntries() {
+      const {
+        resourceType,
+        className,
+        groupName,
+        createElement,
+        search
+      } = this._config;
+
+      const resources = this._resources.filter(r => r.type === resourceType);
+      const entries = {};
+
+      resources.forEach((resource, index) => {
+        const getTarget = () => createElement(resource, this._bpmnFactory);
+        entries[`resources-create-${resourceType}-${index}`] = {
+          label: resource.name,
+          action: this._createEntryAction(getTarget),
+          group: {
+            id: groupName.toLowerCase(),
+            name: this._translate(groupName)
+          },
+          className,
+          search
+        };
+      });
+
+      return entries;
+    }
+
+    _createEntryAction(getTarget) {
+      const create = this._create;
+      const mouse = this._mouse;
+      const popupMenu = this._popupMenu;
+      const elementFactory = this._elementFactory;
+
+      return (event) => {
+        popupMenu.close();
+
+        const businessObject = getTarget();
+        const element = elementFactory.createShape({
+          type: businessObject.$type,
+          businessObject: businessObject
+        });
+
+        // use last mouse event if triggered via keyboard
+        if (event instanceof KeyboardEvent) {
+          event = mouse.getLastMoveEvent();
+        }
+
+        return create.start(event, element);
+      };
+    }
+  }
+
+  let CreateMenuProvider$2 = class CreateMenuProvider extends BaseCreateMenuProvider {
+    static $inject = [
+      'injector'
+    ];
+
+    constructor(injector) {
+      super(injector, {
+        resourceType: 'bpmnProcess',
+        groupName: 'Processes',
+        className: 'bpmn-icon-call-activity',
+        createElement: (resource, bpmnFactory) => createElement$2(resource, bpmnFactory),
+        search: searchTerms$2
+      });
+    }
+  };
+
+  /**
+   * @typedef {object} Config
+   * @property {string} resourceType
+   * @property {string} className
+   * @property {string} groupName
+   * @property {Function} createElement
+   * @property {string} [search]
+   */
+
+  class BaseAppendMenuProvider {
+
+    /**
+     *
+     * @param {import('didi').Injector} injector
+     * @param {Config} config
+     */
+    constructor(injector, config) {
+      this._elementFactory = injector.get('elementFactory');
+      this._bpmnFactory = injector.get('bpmnFactory');
+      this._popupMenu = injector.get('popupMenu');
+      this._create = injector.get('create');
+      this._autoPlace = injector.get('autoPlace');
+      this._rules = injector.get('rules');
+      this._translate = injector.get('translate');
+      this._resources = injector.get('resources');
+
+      this._config = config;
+
+      this._register();
+    }
+
+    _register() {
+      this._popupMenu.registerProvider('bpmn-append', this);
+    };
+
+    /** @returns {import('diagram-js/lib/features/popup-menu/PopupMenuProvider').PopupMenuEntries} */
+    getPopupMenuEntries(element) {
+      const rules = this._rules;
+
+      if (!rules.allowed('shape.append', { element: element })) {
+        return [];
+      }
+
+      const {
+        resourceType,
+        className,
+        groupName,
+        createElement,
+        search
+      } = this._config;
+
+      const resources = this._resources.filter(r => r.type === resourceType);
+      const entries = {};
+
+      resources.forEach((resource, index) => {
+        const getTarget = () => createElement(resource, this._bpmnFactory);
+        entries[`resources-append-${resourceType}-${index}`] = {
+          label: resource.name,
+          action: this._createEntryAction(element, getTarget),
+          group: {
+            id: groupName.toLowerCase(),
+            name: this._translate(groupName)
+          },
+          className,
+          search
+        };
+      });
+
+      return entries;
+    };
+
+    _createEntryAction(element, targetFactory) {
+      const elementFactory = this._elementFactory;
+      const autoPlace = this._autoPlace;
+      const create = this._create;
+
+      const createElement = () => {
+        const businessObject = targetFactory();
+
+        return elementFactory.createShape({
+          type: businessObject.$type,
+          businessObject: businessObject
+        });
+      };
+
+      const autoPlaceElement = () => {
+        const newElement = createElement();
+        autoPlace.append(element, newElement);
+      };
+
+      const manualPlaceElement = (event) => {
+        const newElement = createElement();
+        return create.start(event, newElement, {
+          source: element
+        });
+      };
+
+      return {
+        click: autoPlaceElement,
+        dragstart: manualPlaceElement
+      };
+    }
+  }
+
+  let AppendMenuProvider$2 = class AppendMenuProvider extends BaseAppendMenuProvider {
+    static $inject = [
+      'injector'
+    ];
+
+    constructor(injector) {
+      super(injector, {
+        resourceType: 'bpmnProcess',
+        groupName: 'Processes',
+        className: 'bpmn-icon-call-activity',
+        createElement: (resource, bpmnFactory) => createElement$2(resource, bpmnFactory),
+        search: searchTerms$2
+      });
+    }
+  };
+
+  /**
+   * @typedef {{
+   *   type: 'bpmnProcess',
+   *   name: string,
+   *   processId: string
+   * }} CallActivity
+   */
+
+  /**
+   *
+   * @param {import('diagram-js/lib/model').Element} element
+   * @param {CallActivity} resource
+   * @param {import('didi').Injector} injector
+   */
+  function replaceElement$2(element, resource, injector) {
+    const bpmnFactory = injector.get('bpmnFactory'),
+          bpmnReplace = injector.get('bpmnReplace'),
+          modeling = injector.get('modeling'),
+          commandStack = injector.get('commandStack');
+
+
+    commandStack.execute('external-resources.composed-command', {
+      command: replace
+    });
+
+
+    function replace() {
+      const replacedElement = bpmnReplace.replaceElement(element, { type: 'bpmn:CallActivity' });
+      modeling.updateProperties(replacedElement, {
+        name: resource.name
+      });
+
+      const bo = getBusinessObject$2(replacedElement);
+
+      const extensionElements = bo.get('extensionElements');
+
+      if (!extensionElements) {
+        modeling.updateProperties(replacedElement, {
+          extensionElements: bpmnFactory.create('bpmn:ExtensionElements', {
+            values: [
+              createCalledElement(resource, bpmnFactory)
+            ]
+          })
+        });
+
+        return;
+      }
+
+      const calledElement = getCalledElement(replacedElement);
+
+      if (!calledElement) {
+        modeling.updateModdleProperties(replacedElement, extensionElements, {
+          values: [
+            ...extensionElements.values,
+            createCalledElement(resource, bpmnFactory)
+          ]
+        });
+
+        return;
+      }
+
+      modeling.updateModdleProperties(replacedElement, calledElement, {
+        processId: resource.processId
+      });
+    }
+  }
+
+  function getCalledElement(element) {
+    return element.businessObject?.extensionElements?.values.find(value => is$5(value, 'zeebe:CalledElement'));
+  }
+
+  function createCalledElement(resource, bpmnFactory) {
+    return bpmnFactory.create('zeebe:CalledElement', {
+      processId: resource.processId
+    });
+  }
+
+  /**
+   * @typedef {object} Config
+   * @property {string} resourceType
+   * @property {string} className
+   * @property {string} groupName
+   * @property {Function} replaceElement
+   * @property {string} [search]
+   */
+
+  class BaseReplaceMenuProvider {
+
+    /**
+     *
+     * @param {import('didi').Injector} injector
+     * @param {Config} config
+     */
+    constructor(injector, config) {
+
+      this._injector = injector;
+      this._popupMenu = injector.get('popupMenu');
+      this._rules = injector.get('rules');
+      this._translate = injector.get('translate');
+      this._resources = injector.get('resources');
+
+      this._popupMenu.registerProvider('bpmn-replace', this);
+
+      this._config = config;
+    }
+
+
+    /**
+     * @param {PopupMenuTarget} element
+     *
+     * @return {PopupMenuEntries}
+     */
+    getPopupMenuEntries(element) {
+      const rules = this._rules;
+
+      if (isArray$5(element) || !rules.allowed('shape.replace', { element })) {
+        return {};
+      }
+
+      if (!is$5(element, 'bpmn:Activity')) {
+        return {};
+      }
+
+      const {
+        resourceType,
+        className,
+        groupName,
+        replaceElement,
+        search
+      } = this._config;
+
+      const resources = this._resources.filter(r => r.type === resourceType);
+      const entries = {};
+
+      resources.forEach((resource, index) => {
+        const replace = () => replaceElement(element, resource, this._injector);
+        entries[`resources-replace-${resourceType}-${index}`] = {
+          label: resource.name,
+          action: replace,
+          group: {
+            name: this._translate(groupName)
+          },
+          className,
+          search
+        };
+      });
+
+      return entries;
+    }
+  }
+
+  let ReplaceMenuProvider$2 = class ReplaceMenuProvider extends BaseReplaceMenuProvider {
+    static $inject = [
+      'injector'
+    ];
+
+    constructor(injector) {
+      super(injector, {
+        resourceType: 'bpmnProcess',
+        groupName: 'Processes',
+        className: 'bpmn-icon-call-activity',
+        replaceElement: (element, resource, injector) => replaceElement$2(element, resource, injector),
+        search: searchTerms$2
+      });
+    }
+  };
+
+  const ProcessHandlerModule = {
+    __init__: [
+      'resources.processHandler.create',
+      'resources.processHandler.append',
+      'resources.processHandler.replace'
+    ],
+    'resources.processHandler.create': [ 'type', CreateMenuProvider$2 ],
+    'resources.processHandler.append': [ 'type', AppendMenuProvider$2 ],
+    'resources.processHandler.replace': [ 'type', ReplaceMenuProvider$2 ]
+  };
+
+  /**
+   * @typedef {{
+   *   type: 'dmnDecision',
+   *   name: string,
+   *   decisionId: string
+   * }} Decision
+   */
+
+  /**
+   * @param {Decision} resource
+   * @param {import('bpmn-js/lib/features/modeling/BpmnFactory').default} bpmnFactory
+   */
+  function createElement$1(resource, bpmnFactory) {
+    return createDecisionTask(resource, bpmnFactory);
+  }
+
+  function createDecisionTask(resource, bpmnFactory) {
+    const calledElement = createCalledDecision$1(resource, bpmnFactory);
+    const extensionElements = bpmnFactory.create('bpmn:ExtensionElements', {
+      values: [
+        calledElement
+      ]
+    });
+
+    return bpmnFactory.create('bpmn:BusinessRuleTask', {
+      name: resource.name,
+      extensionElements
+    });
+  }
+
+  function createCalledDecision$1(resource, bpmnFactory) {
+    return bpmnFactory.create('zeebe:CalledDecision', {
+      decisionId: resource.decisionId
+    });
+  }
+
+  const searchTerms$1 = [
+    'resource',
+    'dmn',
+    'business rule task',
+    'decision'
+  ].join(' ');
+
+  let CreateMenuProvider$1 = class CreateMenuProvider extends BaseCreateMenuProvider {
+    static $inject = [
+      'injector'
+    ];
+
+    constructor(injector) {
+      super(injector, {
+        resourceType: 'dmnDecision',
+        groupName: 'Decisions',
+        className: 'bpmn-icon-business-rule-task',
+        createElement: (resource, bpmnFactory) => createElement$1(resource, bpmnFactory),
+        search: searchTerms$1
+      });
+    }
+  };
+
+  let AppendMenuProvider$1 = class AppendMenuProvider extends BaseAppendMenuProvider {
+    static $inject = [
+      'injector'
+    ];
+
+    constructor(injector) {
+      super(injector, {
+        resourceType: 'dmnDecision',
+        groupName: 'Decisions',
+        className: 'bpmn-icon-business-rule-task',
+        createElement: (resource, bpmnFactory) => createElement$1(resource, bpmnFactory),
+        search: searchTerms$1
+      });
+    }
+  };
+
+  /**
+   * @typedef {{
+  *   type: 'dmnDecision',
+  *   name: string,
+  *   decisionId: string
+  * }} Decision
+  */
+
+  /**
+   * @param {import('diagram-js/lib/model').Element} element
+   * @param {Decision} resource
+   * @param {import('didi').Injector} injector
+   */
+  function replaceElement$1(element, resource, injector) {
+    const bpmnFactory = injector.get('bpmnFactory'),
+          bpmnReplace = injector.get('bpmnReplace'),
+          modeling = injector.get('modeling'),
+          commandStack = injector.get('commandStack');
+
+
+    commandStack.execute('external-resources.composed-command', {
+      command: replace
+    });
+
+
+    function replace() {
+      const replacedElement = bpmnReplace.replaceElement(element, { type: 'bpmn:BusinessRuleTask' });
+      modeling.updateProperties(replacedElement, {
+        name: resource.name
+      });
+
+      const bo = getBusinessObject$2(replacedElement);
+
+      const extensionElements = bo.get('extensionElements');
+
+      if (!extensionElements) {
+        modeling.updateProperties(replacedElement, {
+          extensionElements: bpmnFactory.create('bpmn:ExtensionElements', {
+            values: [
+              createCalledDecision(resource, bpmnFactory)
+            ]
+          })
+        });
+
+        return;
+      }
+
+      const calledDecision = getCalledDecision(replacedElement);
+
+      if (!calledDecision) {
+        modeling.updateModdleProperties(replacedElement, extensionElements, {
+          values: [
+            ...extensionElements.values,
+            createCalledDecision(resource, bpmnFactory)
+          ]
+        });
+
+        return;
+      }
+
+      modeling.updateModdleProperties(replacedElement, calledDecision, {
+        decisionId: resource.decisionId
+      });
+    }
+  }
+
+  function getCalledDecision(element) {
+    return element.businessObject?.extensionElements?.values.find(value => is$5(value, 'zeebe:CalledDecision'));
+  }
+
+  function createCalledDecision(resource, bpmnFactory) {
+    return bpmnFactory.create('zeebe:CalledDecision', {
+      decisionId: resource.decisionId
+    });
+  }
+
+  let ReplaceMenuProvider$1 = class ReplaceMenuProvider extends BaseReplaceMenuProvider {
+    static $inject = [
+      'injector'
+    ];
+
+    constructor(injector) {
+      super(injector, {
+        resourceType: 'dmnDecision',
+        groupName: 'Decisions',
+        className: 'bpmn-icon-business-rule-task',
+        replaceElement: (element, resource, injector) => replaceElement$1(element, resource, injector),
+        search: searchTerms$1
+      });
+    }
+  };
+
+  const DecisionHandlerModule = {
+    __init__: [
+      'resources.decisionHandler.create',
+      'resources.decisionHandler.append',
+      'resources.decisionHandler.replace'
+    ],
+    'resources.decisionHandler.create': [ 'type', CreateMenuProvider$1 ],
+    'resources.decisionHandler.append': [ 'type', AppendMenuProvider$1 ],
+    'resources.decisionHandler.replace': [ 'type', ReplaceMenuProvider$1 ]
+  };
+
+  /**
+   * @typedef {{
+   *   type: 'form',
+   *   name: string,
+   *   formId: string
+   * }} Form
+   */
+
+  /**
+   * @param {Form} resource
+   */
+  function createElement(resource, bpmnFactory) {
+    return createFormTask(resource, bpmnFactory);
+  }
+
+  function createFormTask(resource, bpmnFactory) {
+    const formDefinition = createFormDefinition$1(resource, bpmnFactory);
+    const extensionElements = bpmnFactory.create('bpmn:ExtensionElements', {
+      values: [
+        createZeebeUserTask$1(bpmnFactory),
+        formDefinition
+      ]
+    });
+
+    return bpmnFactory.create('bpmn:UserTask', {
+      name: resource.name,
+      extensionElements
+    });
+  }
+
+  function createFormDefinition$1(resource, bpmnFactory) {
+    return bpmnFactory.create('zeebe:FormDefinition', {
+      formId: resource.formId
+    });
+  }
+
+  function createZeebeUserTask$1(bpmnFactory) {
+    return bpmnFactory.create('zeebe:UserTask');
+  }
+
+  const searchTerms = [
+    'resource',
+    'form',
+    'user task',
+    'human'
+  ].join(' ');
+
+  class CreateMenuProvider extends BaseCreateMenuProvider {
+    static $inject = [
+      'injector'
+    ];
+
+    constructor(injector) {
+      super(injector, {
+        resourceType: 'form',
+        groupName: 'Forms',
+        className: 'bpmn-icon-user-task',
+        createElement: (resource, bpmnFactory) => createElement(resource, bpmnFactory),
+        search: searchTerms
+      });
+    }
+  }
+
+  class AppendMenuProvider extends BaseAppendMenuProvider {
+    static $inject = [
+      'injector'
+    ];
+
+    constructor(injector) {
+      super(injector, {
+        resourceType: 'form',
+        groupName: 'Forms',
+        className: 'bpmn-icon-user-task',
+        createElement: (resource, bpmnFactory) => createElement(resource, bpmnFactory),
+        search: searchTerms
+      });
+    }
+  }
+
+  /**
+   * @typedef {{
+  *   type: 'form',
+  *   name: string,
+  *   formId: string
+  * }} Form
+  */
+
+  /**
+   * @param {import('diagram-js/lib/model').Element} element
+   * @param {Form} resource
+   * @param {import('didi').Injector} injector
+  */
+  function replaceElement(element, resource, injector) {
+    const bpmnFactory = injector.get('bpmnFactory'),
+          bpmnReplace = injector.get('bpmnReplace'),
+          modeling = injector.get('modeling'),
+          commandStack = injector.get('commandStack');
+
+
+    commandStack.execute('external-resources.composed-command', {
+      command: replace
+    });
+
+
+    function replace() {
+      const replacedElement = bpmnReplace.replaceElement(element, { type: 'bpmn:UserTask' });
+      modeling.updateProperties(replacedElement, {
+        name: resource.name
+      });
+
+      const bo = getBusinessObject$2(replacedElement);
+
+      const extensionElements = bo.get('extensionElements');
+
+      if (!extensionElements) {
+        modeling.updateProperties(replacedElement, {
+          extensionElements: bpmnFactory.create('bpmn:ExtensionElements', {
+            values: [
+              createZeebeUserTask(bpmnFactory),
+              createFormDefinition(resource, bpmnFactory)
+            ]
+          })
+        });
+
+        return;
+      }
+
+      const formDefinition = getFormDefinition(replacedElement);
+
+      if (!formDefinition) {
+        modeling.updateModdleProperties(replacedElement, extensionElements, {
+          values: [
+            ...extensionElements.values,
+            createFormDefinition(resource, bpmnFactory)
+          ]
+        });
+
+        return;
+      }
+
+      modeling.updateModdleProperties(replacedElement, formDefinition, {
+        formId: resource.formId
+      });
+    }
+  }
+
+  function getFormDefinition(element) {
+    return element.businessObject?.extensionElements?.values.find(value => is$5(value, 'zeebe:FormDefinition'));
+  }
+
+  function createFormDefinition(resource, bpmnFactory) {
+    return bpmnFactory.create('zeebe:FormDefinition', {
+      formId: resource.formId
+    });
+  }
+
+  function createZeebeUserTask(bpmnFactory) {
+    return bpmnFactory.create('zeebe:UserTask');
+  }
+
+  class ReplaceMenuProvider extends BaseReplaceMenuProvider {
+    static $inject = [
+      'injector'
+    ];
+
+    constructor(injector) {
+      super(injector, {
+        resourceType: 'form',
+        groupName: 'Forms',
+        className: 'bpmn-icon-user-task',
+        replaceElement: (element, resource, injector) => replaceElement(element, resource, injector),
+        search: searchTerms
+      });
+    }
+  }
+
+  const FormHandlerModule = {
+    __init__: [
+      'resources.formHandler.create',
+      'resources.formHandler.append',
+      'resources.formHandler.replace'
+    ],
+    'resources.formHandler.create': [ 'type', CreateMenuProvider ],
+    'resources.formHandler.append': [ 'type', AppendMenuProvider ],
+    'resources.formHandler.replace': [ 'type', ReplaceMenuProvider ]
+  };
+
+  /**
+   * Command handler to compose multiple commands into a single command.
+   * It allows to use facades like `BpmnReplace` and `Modeling` while retaining
+   * single undo/redo feature.
+   */
+  class ComposedCommandHandler {
+    constructor(commandStack) {
+      this._commandStack = commandStack;
+    }
+
+    preExecute(context) {
+      context.command();
+    }
+  }
+
+  ComposedCommandHandler.$inject = [ 'commandStack' ];
+
+  const HANDLERS = {
+    'external-resources.composed-command': ComposedCommandHandler
+  };
+
+
+  function CommandInitializer(eventBus, commandStack) {
+
+    eventBus.on('diagram.init', function() {
+      forEach$2(HANDLERS, function(handler, id) {
+        commandStack.registerHandler(id, handler);
+      });
+    });
+  }
+
+  CommandInitializer.$inject = [ 'eventBus', 'commandStack' ];
+
+  const ResourcesModule = {
+    __init__: [
+      'resources.resourceLoader',
+    ],
+    'resources.resourceLoader': [ 'type', ResourceLoader ],
+    'resources': [ 'type', Resources ],
+  };
+
+  const DefaultHandlersModule = {
+    __init__: [
+      CommandInitializer
+    ],
+    __depends__: [
+      DecisionHandlerModule,
+      FormHandlerModule,
+      ProcessHandlerModule
+    ]
+  };
+
   /**
    * @typedef {import('bpmn-js/lib/BaseViewer').BaseViewerOptions} BaseViewerOptions
    */
@@ -164957,7 +166135,9 @@
     ZeebeVariableResolverModule,
     exampleDataPropertiesProviderModule,
     index$3,
-    camundaDetailsPopupMenuModule
+    camundaDetailsPopupMenuModule,
+    DefaultHandlersModule,
+    ResourcesModule
   ];
 
   Modeler.prototype._modules = [].concat(