camunda-bpmn-js 0.13.0-alpha.0 → 0.13.0-alpha.1

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

@@ -8280,6 +8280,20 @@
 	 * @param  {Object} options
 	 */
 	Properties.prototype.define = function(target, name, options) {
+
+	  if (!options.writable) {
+
+	    var value = options.value;
+
+	    // use getters for read-only variables to support ES6 proxies
+	    // cf. https://github.com/bpmn-io/internal-docs/issues/386
+	    options = assign({}, options, {
+	      get: function() { return value; }
+	    });
+
+	    delete options.value;
+	  }
+
 	  Object.defineProperty(target, name, options);
 	};
 
@@ -25682,14 +25696,23 @@
 	  // the touch recognizer
 	  var recognizer;
 
-	  function handler(type) {
+	  function handler(type, buttonType) {
 
 	    return function(event) {
 
-	      interactionEvents.fire(type, event);
+	      var gfx = getGfx(event.target),
+	          element = gfx && elementRegistry.get(gfx);
+
+	      // translate into an actual mouse click event
+	      if (buttonType) {
+	        event.srcEvent.button = buttonType;
+	      }
+
+	      return interactionEvents.fire(type, event, element);
 	    };
 	  }
 
+
 	  function getGfx(target) {
 	    var node = closest(target, 'svg, .djs-element', true);
 	    return node;
@@ -25700,10 +25723,6 @@
 	    // touch recognizer
 	    recognizer = createTouchRecognizer(svg);
 
-	    recognizer.on('doubletap', handler('element.dblclick'));
-
-	    recognizer.on('tap', handler('element.click'));
-
 	    function startGrabCanvas(event) {
 
 	      var lx = 0, ly = 0;
@@ -25771,6 +25790,9 @@
 	      recognizer.on('pinchcancel', end);
 	    }
 
+	    recognizer.on('tap', handler('element.click'));
+	    recognizer.on('doubletap', handler('element.dblclick', 1));
+
 	    recognizer.on('panstart', startGrab);
 	    recognizer.on('press', startGrab);
 
@@ -35894,7 +35916,7 @@
 	    return this._createEntries(element, DATA_OBJECT_REFERENCE);
 	  }
 
-	  if (is$1(businessObject, 'bpmn:DataStoreReference')) {
+	  if (is$1(businessObject, 'bpmn:DataStoreReference') && !is$1(element.parent, 'bpmn:Collaboration')) {
 	    return this._createEntries(element, DATA_STORE_REFERENCE);
 	  }
 
@@ -39895,7 +39917,7 @@
 
 	  function activateDirectEdit(element, force) {
 	    if (force ||
-	        isAny(element, [ 'bpmn:Task', 'bpmn:TextAnnotation', 'bpmn:Group' ]) ||
+	        isAny(element, [ 'bpmn:Task', 'bpmn:TextAnnotation' ]) ||
 	        isCollapsedSubProcess(element)) {
 
 	      directEditing.activate(element);
@@ -41237,122 +41259,97 @@
 	    }
 	  });
 
-	  function ensureCollaboration(context) {
-	    var parent = context.parent,
-	        collaboration;
-
+	  // turn process into collaboration when creating first participant
+	  function getOrCreateCollaboration() {
 	    var rootElement = canvas.getRootElement();
 
 	    if (is$1(rootElement, 'bpmn:Collaboration')) {
-	      collaboration = rootElement;
-	    } else {
-
-	      // update root element by making collaboration
-	      collaboration = modeling.makeCollaboration();
-
-	      // re-use process when creating first participant
-	      context.process = parent;
+	      return rootElement;
 	    }
 
-	    context.parent = collaboration;
+	    return modeling.makeCollaboration();
 	  }
 
-	  // turn process into collaboration before adding participant
-	  this.preExecute('shape.create', function(context) {
-	    var parent = context.parent,
-	        shape = context.shape;
-
-	    if (is$1(shape, 'bpmn:Participant') && is$1(parent, 'bpmn:Process')) {
-	      ensureCollaboration(context);
-	    }
-	  }, true);
-
-	  this.execute('shape.create', function(context) {
-	    var process = context.process,
-	        shape = context.shape;
-
-	    if (process) {
-	      context.oldProcessRef = shape.businessObject.processRef;
+	  // when creating mutliple elements through `elements.create` parent must be set to collaboration
+	  // and passed to `shape.create` as hint
+	  this.preExecute('elements.create', HIGH_PRIORITY$9, function(context) {
+	    var elements = context.elements,
+	        parent = context.parent,
+	        participant = findParticipant(elements),
+	        hints;
 
-	      // re-use process when creating first participant
-	      shape.businessObject.processRef = process.businessObject;
-	    }
-	  }, true);
+	    if (participant && is$1(parent, 'bpmn:Process')) {
+	      context.parent = getOrCreateCollaboration();
 
-	  this.revert('shape.create', function(context) {
-	    var process = context.process,
-	        shape = context.shape;
+	      hints = context.hints = context.hints || {};
 
-	    if (process) {
-
-	      // re-use process when creating first participant
-	      shape.businessObject.processRef = context.oldProcessRef;
+	      hints.participant = participant;
+	      hints.process = parent;
+	      hints.processRef = getBusinessObject(participant).get('processRef');
 	    }
 	  }, true);
 
-	  this.postExecute('shape.create', function(context) {
-	    var process = context.process,
+	  // when creating single shape through `shape.create` parent must be set to collaboration
+	  // unless it was already set through `elements.create`
+	  this.preExecute('shape.create', function(context) {
+	    var parent = context.parent,
 	        shape = context.shape;
 
-	    if (process) {
-
-	      // move children from process to participant
-	      var processChildren = process.children.slice();
+	    if (is$1(shape, 'bpmn:Participant') && is$1(parent, 'bpmn:Process')) {
+	      context.parent = getOrCreateCollaboration();
 
-	      modeling.moveElements(processChildren, { x: 0, y: 0 }, shape);
+	      context.process = parent;
+	      context.processRef = getBusinessObject(shape).get('processRef');
 	    }
-
 	  }, true);
 
-	  // turn process into collaboration when creating participants
-	  this.preExecute('elements.create', HIGH_PRIORITY$9, function(context) {
-	    var elements = context.elements,
-	        parent = context.parent,
-	        participant;
-
-	    var hasParticipants = findParticipant(elements);
-
-	    if (hasParticipants && is$1(parent, 'bpmn:Process')) {
-	      ensureCollaboration(context);
-
-	      participant = findParticipant(elements);
+	  // #execute necessary because #preExecute not called on CommandStack#redo
+	  this.execute('shape.create', function(context) {
+	    var hints = context.hints || {},
+	        process = context.process || hints.process,
+	        shape = context.shape,
+	        participant = hints.participant;
 
-	      context.oldProcessRef = participant.businessObject.processRef;
+	    // both shape.create and elements.create must be handled
+	    if (process && (!participant || shape === participant)) {
 
-	      // re-use process when creating first participant
-	      participant.businessObject.processRef = parent.businessObject;
+	      // monkey-patch process ref
+	      getBusinessObject(shape).set('processRef', getBusinessObject(process));
 	    }
 	  }, true);
 
-	  this.revert('elements.create', function(context) {
-	    var elements = context.elements,
-	        process = context.process,
-	        participant;
+	  this.revert('shape.create', function(context) {
+	    var hints = context.hints || {},
+	        process = context.process || hints.process,
+	        processRef = context.processRef || hints.processRef,
+	        shape = context.shape,
+	        participant = hints.participant;
 
-	    if (process) {
-	      participant = findParticipant(elements);
+	    // both shape.create and elements.create must be handled
+	    if (process && (!participant || shape === participant)) {
 
-	      // re-use process when creating first participant
-	      participant.businessObject.processRef = context.oldProcessRef;
+	      // monkey-patch process ref
+	      getBusinessObject(shape).set('processRef', processRef);
 	    }
 	  }, true);
 
-	  this.postExecute('elements.create', function(context) {
-	    var elements = context.elements,
-	        process = context.process,
-	        participant;
+	  this.postExecute('shape.create', function(context) {
+	    var hints = context.hints || {},
+	        process = context.process || context.hints.process,
+	        shape = context.shape,
+	        participant = hints.participant;
 
 	    if (process) {
-	      participant = findParticipant(elements);
+	      var children = process.children.slice();
 
-	      // move children from process to first participant
-	      var processChildren = process.children.slice();
-
-	      modeling.moveElements(processChildren, { x: 0, y: 0 }, participant);
+	      // both shape.create and elements.create must be handled
+	      if (!participant) {
+	        modeling.moveElements(children, { x: 0, y: 0 }, shape);
+	      } else if (shape === participant) {
+	        modeling.moveElements(children, { x: 0, y: 0 }, participant);
+	      }
 	    }
-
 	  }, true);
-
 	}
 
 	CreateParticipantBehavior$1.$inject = [
@@ -44773,7 +44770,9 @@
 	    var rootElement = canvas.getRootElement(),
 	        rootElementBo = rootElement.businessObject;
 
-	    moddle.ids.unclaim(rootElementBo.id);
+	    if (is$1(rootElement, 'bpmn:Collaboration')) {
+	      moddle.ids.unclaim(rootElementBo.id);
+	    }
 	  });
 	}
 
@@ -48721,6 +48720,10 @@
 	};
 
 	BpmnFactory.prototype._ensureId = function(element) {
+	  if (element.id) {
+	    this._model.ids.claim(element.id, element);
+	    return;
+	  }
 
 	  // generate semantic ids for elements
 	  // bpmn:SequenceFlow -> SequenceFlow_ID
@@ -48791,7 +48794,8 @@
 
 	BpmnFactory.prototype.createDiEdge = function(semantic, waypoints, attrs) {
 	  return this.create('bpmndi:BPMNEdge', assign({
-	    bpmnElement: semantic
+	    bpmnElement: semantic,
+	    waypoint: this.createDiWaypoints(waypoints)
 	  }, attrs));
 	};
 
@@ -52976,12 +52980,26 @@
 	    // TODO @barmac: remove once we drop bpmn.io properties
 	    ensureLegacySupport(assignedDi);
 
-	    self._commandStack.execute('element.updateProperties', {
-	      element: element,
-	      properties: {
-	        di: assignedDi
-	      }
-	    });
+	    if (element.labelTarget) {
+
+	      // set label colors as bpmndi:BPMNLabel#color
+	      self._commandStack.execute('element.updateModdleProperties', {
+	        element: element,
+	        moddleElement: element.businessObject.di.label,
+	        properties: {
+	          color: di['background-color']
+	        }
+	      });
+	    } else {
+
+	      // set colors bpmndi:BPMNEdge or bpmndi:BPMNShape
+	      self._commandStack.execute('element.updateProperties', {
+	        element: element,
+	        properties: {
+	          di: assignedDi
+	        }
+	      });
+	    }
 	  });
 
 	};
@@ -56191,7 +56209,7 @@
 
 	    create.start(event, [ subProcess, startEvent ], {
 	      hints: {
-	        autoSelect: [ startEvent ]
+	        autoSelect: [ subProcess ]
 	      }
 	    });
 	  }
@@ -61230,7 +61248,7 @@
 	    descriptionLoaded
 	  } = props; // set-up layout context
 
-	  const [layout, setLayout] = l(createLayoutContext(layoutConfig));
+	  const [layout, setLayout] = l(createLayout(layoutConfig));
 	  y$1(() => {
 	    if (typeof layoutChanged === 'function') {
 	      layoutChanged(layout);
@@ -61242,7 +61260,9 @@
 	  };
 
 	  const setLayoutForKey = (key, config) => {
-	    setLayout(set(layout, key, config));
+	    const newLayout = assign({}, layout);
+	    set(newLayout, key, config);
+	    setLayout(newLayout);
 	  };
 
 	  const layoutContext = {
@@ -61301,7 +61321,7 @@
 	  });
 	} // helpers //////////////////
 
-	function createLayoutContext(overrides) {
+	function createLayout(overrides) {
 	  return { ...DEFAULT_LAYOUT,
 	    ...overrides
 	  };
@@ -66074,7 +66094,20 @@
 	    return () => {
 	      eventBus.off('elements.changed', onElementsChanged);
 	    };
-	  }, [selectedElement]); // (2c) provided entries changed
+	  }, [selectedElement]); // (2c) root element changed
+
+	  y$1(() => {
+	    const onRootAdded = e => {
+	      const element = e.element;
+
+	      _update(element);
+	    };
+
+	    eventBus.on('root.added', onRootAdded);
+	    return () => {
+	      eventBus.off('root.added', onRootAdded);
+	    };
+	  }, [selectedElement]); // (2d) provided entries changed
 
 	  y$1(() => {
 	    const onProvidersChanged = () => {
@@ -66085,7 +66118,7 @@
 	    return () => {
 	      eventBus.off('propertiesPanel.providersChanged', onProvidersChanged);
 	    };
-	  }, [selectedElement]); // (2d) element templates changed
+	  }, [selectedElement]); // (2e) element templates changed
 
 	  y$1(() => {
 	    const onTemplatesChanged = () => {
@@ -66175,23 +66208,20 @@
 	    this._layoutConfig = layoutConfig;
 	    this._descriptionConfig = descriptionConfig;
 	    this._container = domify('<div style="height: 100%" class="bio-properties-panel-container" input-handle-modified-keys="y,z"></div>');
-
-	    this._eventBus.on('root.added', event => {
-	      const {
-	        element
-	      } = event;
-
-	      this._render(element);
-
+	    eventBus.on('diagram.init', () => {
 	      if (parent) {
 	        this.attachTo(parent);
 	      }
-
-	      return;
 	    });
+	    eventBus.on('diagram.destroy', () => {
+	      this.detach();
+	    });
+	    eventBus.on('root.added', event => {
+	      const {
+	        element
+	      } = event;
 
-	    eventBus.on('root.removed', () => {
-	      this._destroy();
+	      this._render(element);
 	    });
 	  }
 	  /**
@@ -67921,7 +67951,7 @@
 	    isEdited: isEdited$1
 	  }, {
 	    id: 'completionCondition',
-	    component: o$2(CompletionCondition, {
+	    component: o$2(CompletionCondition$1, {
 	      element: element
 	    }),
 	    isEdited: isEdited$1
@@ -67956,7 +67986,7 @@
 	  });
 	}
 
-	function CompletionCondition(props) {
+	function CompletionCondition$1(props) {
 	  const {
 	    element
 	  } = props;
@@ -68130,7 +68160,7 @@
 	 */
 
 
-	function getCompletionCondition(element) {
+	function getCompletionCondition$1(element) {
 	  return getProperty$2(element, 'completionCondition');
 	}
 	/**
@@ -68143,7 +68173,7 @@
 
 
 	function getCompletionConditionValue(element) {
-	  const completionCondition = getCompletionCondition(element);
+	  const completionCondition = getCompletionCondition$1(element);
 	  return getBody(completionCondition);
 	}
 
@@ -69152,6 +69182,329 @@
 	  return getExtensionElementsList$1(businessObject, 'zeebe:AssignmentDefinition')[0];
 	}
 
+	const DMN_IMPLEMENTATION_OPTION = 'dmn',
+	      JOB_WORKER_IMPLEMENTATION_OPTION = 'jobWorker',
+	      DEFAULT_IMPLEMENTATION_OPTION = DMN_IMPLEMENTATION_OPTION;
+	function BusinessRuleImplementationProps(props) {
+	  const {
+	    element
+	  } = props;
+
+	  if (!is$1(element, 'bpmn:BusinessRuleTask')) {
+	    return [];
+	  }
+
+	  return [{
+	    id: 'businessRuleImplementation',
+	    component: o$2(BusinessRuleImplementation, {
+	      element: element
+	    }),
+	    isEdited: () => isBusinessRuleImplementationEdited(element)
+	  }];
+	}
+
+	function BusinessRuleImplementation(props) {
+	  const {
+	    element
+	  } = props;
+	  const commandStack = useService('commandStack');
+	  const bpmnFactory = useService('bpmnFactory');
+	  const translate = useService('translate');
+
+	  const getValue = () => {
+	    if (getCalledDecision$1(element)) {
+	      return DMN_IMPLEMENTATION_OPTION;
+	    }
+
+	    if (getTaskDefinition$3(element)) {
+	      return JOB_WORKER_IMPLEMENTATION_OPTION;
+	    }
+
+	    return DEFAULT_IMPLEMENTATION_OPTION;
+	  };
+	  /**
+	   * Set value by either creating a zeebe:calledDecision or a zeebe:taskDefintion
+	   * extension element. Note that they must not exist both at the same time, however
+	   * this will be ensured by a bpmn-js behavior (and not by the propPanel).
+	   */
+
+
+	  const setValue = value => {
+	    const commands = [];
+	    const businessObject = getBusinessObject(element);
+	    let extensionElements = businessObject.get('extensionElements'); // (1) ensure extension elements
+
+	    if (!extensionElements) {
+	      extensionElements = createElement('bpmn:ExtensionElements', {
+	        values: []
+	      }, businessObject, bpmnFactory);
+	      commands.push({
+	        cmd: 'properties-panel.update-businessobject',
+	        context: {
+	          element: element,
+	          businessObject: businessObject,
+	          properties: {
+	            extensionElements
+	          }
+	        }
+	      });
+	    } // (2) ensure task definition or called decision
+
+
+	    let extensionElement, extensionElementType;
+
+	    if (value === DMN_IMPLEMENTATION_OPTION) {
+	      extensionElement = getCalledDecision$1(element);
+	      extensionElementType = 'zeebe:CalledDecision';
+	    } else if (value === JOB_WORKER_IMPLEMENTATION_OPTION) {
+	      extensionElement = getTaskDefinition$3(element);
+	      extensionElementType = 'zeebe:TaskDefinition';
+	    }
+
+	    if (!extensionElement) {
+	      extensionElement = createElement(extensionElementType, {}, extensionElements, bpmnFactory);
+	      commands.push({
+	        cmd: 'properties-panel.update-businessobject-list',
+	        context: {
+	          element: element,
+	          currentObject: extensionElements,
+	          propertyName: 'values',
+	          objectsToAdd: [extensionElement]
+	        }
+	      });
+	    } // (3) commit all updates
+
+
+	    commandStack.execute('properties-panel.multi-command-executor', commands);
+	  };
+
+	  const getOptions = () => {
+	    const options = [{
+	      value: DMN_IMPLEMENTATION_OPTION,
+	      label: translate('DMN decision')
+	    }, {
+	      value: JOB_WORKER_IMPLEMENTATION_OPTION,
+	      label: translate('Job worker')
+	    }];
+	    return options;
+	  };
+
+	  return SelectEntry({
+	    element,
+	    id: 'businessRuleImplementation',
+	    label: translate('Implementation'),
+	    getValue,
+	    setValue,
+	    getOptions
+	  });
+	} // helper ///////////////////////
+
+
+	function getTaskDefinition$3(element) {
+	  const businessObject = getBusinessObject(element);
+	  return getExtensionElementsList$1(businessObject, 'zeebe:TaskDefinition')[0];
+	}
+
+	function getCalledDecision$1(element) {
+	  const businessObject = getBusinessObject(element);
+	  return getExtensionElementsList$1(businessObject, 'zeebe:CalledDecision')[0];
+	}
+
+	function isBusinessRuleImplementationEdited(element) {
+	  return getTaskDefinition$3(element);
+	}
+
+	function CalledDecisionProps(props) {
+	  const {
+	    element
+	  } = props;
+
+	  if (!is$1(element, 'bpmn:BusinessRuleTask')) {
+	    return [];
+	  } // Don't show if we have a taskDefinition, because then implementation is done
+	  // via taskDefinition and not via calledDecision
+
+
+	  if (getTaskDefinition$2(element)) {
+	    return [];
+	  }
+
+	  return [{
+	    id: 'decisionId',
+	    component: o$2(DecisionID, {
+	      element: element
+	    }),
+	    isEdited: isEdited$1
+	  }, {
+	    id: 'resultVariable',
+	    component: o$2(ResultVariable$3, {
+	      element: element
+	    }),
+	    isEdited: isEdited$1
+	  }];
+	}
+
+	function DecisionID(props) {
+	  const {
+	    element
+	  } = props;
+	  const commandStack = useService('commandStack');
+	  const bpmnFactory = useService('bpmnFactory');
+	  const translate = useService('translate');
+	  const debounce = useService('debounceInput');
+
+	  const getValue = () => {
+	    return (getCalledDecision(element) || {}).decisionId;
+	  };
+
+	  const setValue = value => {
+	    const commands = [];
+	    const businessObject = getBusinessObject(element);
+	    let extensionElements = businessObject.get('extensionElements'); // (1) ensure extension elements
+
+	    if (!extensionElements) {
+	      extensionElements = createElement('bpmn:ExtensionElements', {
+	        values: []
+	      }, businessObject, bpmnFactory);
+	      commands.push({
+	        cmd: 'properties-panel.update-businessobject',
+	        context: {
+	          element: element,
+	          businessObject: businessObject,
+	          properties: {
+	            extensionElements
+	          }
+	        }
+	      });
+	    } // (2) ensure calledDecision
+
+
+	    let calledDecision = getCalledDecision(element);
+
+	    if (!calledDecision) {
+	      calledDecision = createElement('zeebe:CalledDecision', {}, extensionElements, bpmnFactory);
+	      commands.push({
+	        cmd: 'properties-panel.update-businessobject-list',
+	        context: {
+	          element: element,
+	          currentObject: extensionElements,
+	          propertyName: 'values',
+	          objectsToAdd: [calledDecision]
+	        }
+	      });
+	    } // (3) update caledDecision.decisionId
+
+
+	    commands.push({
+	      cmd: 'properties-panel.update-businessobject',
+	      context: {
+	        element: element,
+	        businessObject: calledDecision,
+	        properties: {
+	          decisionId: value
+	        }
+	      }
+	    }); // (4) commit all updates
+
+	    commandStack.execute('properties-panel.multi-command-executor', commands);
+	  };
+
+	  return TextfieldEntry({
+	    element,
+	    id: 'decisionId',
+	    label: translate('ID'),
+	    getValue,
+	    setValue,
+	    debounce
+	  });
+	}
+
+	function ResultVariable$3(props) {
+	  const {
+	    element
+	  } = props;
+	  const commandStack = useService('commandStack');
+	  const bpmnFactory = useService('bpmnFactory');
+	  const translate = useService('translate');
+	  const debounce = useService('debounceInput');
+
+	  const getValue = () => {
+	    return (getCalledDecision(element) || {}).resultVariable;
+	  };
+
+	  const setValue = value => {
+	    const commands = [];
+	    const businessObject = getBusinessObject(element);
+	    let extensionElements = businessObject.get('extensionElements'); // (1) ensure extension elements
+
+	    if (!extensionElements) {
+	      extensionElements = createElement('bpmn:ExtensionElements', {
+	        values: []
+	      }, businessObject, bpmnFactory);
+	      commands.push({
+	        cmd: 'properties-panel.update-businessobject',
+	        context: {
+	          element: element,
+	          businessObject: businessObject,
+	          properties: {
+	            extensionElements
+	          }
+	        }
+	      });
+	    } // (2) ensure calledDecision
+
+
+	    let calledDecision = getCalledDecision(element);
+
+	    if (!calledDecision) {
+	      calledDecision = createElement('zeebe:CalledDecision', {}, extensionElements, bpmnFactory);
+	      commands.push({
+	        cmd: 'properties-panel.update-businessobject-list',
+	        context: {
+	          element: element,
+	          currentObject: extensionElements,
+	          propertyName: 'values',
+	          objectsToAdd: [calledDecision]
+	        }
+	      });
+	    } // (3) update caledDecision.decisionId
+
+
+	    commands.push({
+	      cmd: 'properties-panel.update-businessobject',
+	      context: {
+	        element: element,
+	        businessObject: calledDecision,
+	        properties: {
+	          resultVariable: value
+	        }
+	      }
+	    }); // (4) commit all updates
+
+	    commandStack.execute('properties-panel.multi-command-executor', commands);
+	  };
+
+	  return TextfieldEntry({
+	    element,
+	    id: 'resultVariable',
+	    label: translate('Result variable'),
+	    getValue,
+	    setValue,
+	    debounce
+	  });
+	} // helper ///////////////////////
+
+
+	function getCalledDecision(element) {
+	  const businessObject = getBusinessObject(element);
+	  return getExtensionElementsList$1(businessObject, 'zeebe:CalledDecision')[0];
+	}
+
+	function getTaskDefinition$2(element) {
+	  const businessObject = getBusinessObject(element);
+	  return getExtensionElementsList$1(businessObject, 'zeebe:TaskDefinition')[0];
+	}
+
 	function ConditionProps$1(props) {
 	  const {
 	    element
@@ -69603,16 +69956,13 @@
 
 	  if (is$1(element, 'bpmn:EndEvent') || is$1(element, 'bpmn:IntermediateThrowEvent')) {
 	    return !!getMessageEventDefinition(element);
-	  } // Due to delayed Zeebe 1.3 implementation, temporarily unbuild this
-	  // TODO: re-enable for Zeebe 1.4 release
-	  // Cf. https://github.com/camunda/camunda-modeler/issues/2524#issuecomment-979049379
-	  // A BusinessRuleTask is per default not a ServiceTask, only if it has a TaskDefinition
+	  } // A BusinessRuleTask is per default not a ServiceTask, only if it has a TaskDefinition
 	  // (ie. if the implementation is set to ==JobWorker)
 
-	  /* if (is(element, 'bpmn:BusinessRuleTask') && !getTaskDefinition(element)) {
-	    return false;
-	  }*/
 
+	  if (is$1(element, 'bpmn:BusinessRuleTask') && !getTaskDefinition$1(element)) {
+	    return false;
+	  }
 
 	  return true;
 	}
@@ -69623,11 +69973,10 @@
 	  return is$1(element, 'bpmn:IntermediateThrowEvent') && !!getMessageEventDefinition(element);
 	} // helper ////////////////
 
-	/* function getTaskDefinition(element) {
+	function getTaskDefinition$1(element) {
 	  const businessObject = getBusinessObject(element);
-
-	  return getExtensionElementsList(businessObject, 'zeebe:TaskDefinition')[0];
-	}*/
+	  return getExtensionElementsList$1(businessObject, 'zeebe:TaskDefinition')[0];
+	}
 
 	function areHeadersSupported(element) {
 	  return is$1(element, 'bpmn:UserTask') || isZeebeServiceTask(element);
@@ -70255,6 +70604,12 @@
 	      element: element
 	    }),
 	    isEdited: isEdited$1
+	  }, {
+	    id: 'multiInstance-completionCondition',
+	    component: o$2(CompletionCondition, {
+	      element: element
+	    }),
+	    isEdited: isEdited$1
 	  }];
 	}
 
@@ -70364,6 +70719,42 @@
 	    setValue,
 	    debounce
 	  });
+	}
+
+	function CompletionCondition(props) {
+	  const {
+	    element
+	  } = props;
+	  const commandStack = useService('commandStack');
+	  const bpmnFactory = useService('bpmnFactory');
+	  const translate = useService('translate');
+	  const debounce = useService('debounceInput');
+
+	  const getValue = () => {
+	    const completionCondition = getCompletionCondition(element);
+	    return completionCondition && completionCondition.get('body');
+	  };
+
+	  const setValue = value => {
+	    if (value && value !== '') {
+	      const loopCharacteristics = getLoopCharacteristics$1(element);
+	      const completionCondition = createElement('bpmn:FormalExpression', {
+	        body: value
+	      }, loopCharacteristics, bpmnFactory);
+	      setCompletionCondition(element, commandStack, completionCondition);
+	    } else {
+	      setCompletionCondition(element, commandStack, undefined);
+	    }
+	  };
+
+	  return TextfieldEntry({
+	    element,
+	    id: 'multiInstance-completionCondition',
+	    label: translate('Completion condition'),
+	    getValue,
+	    setValue,
+	    debounce
+	  });
 	} // helper ///////////////////////
 
 
@@ -70381,6 +70772,20 @@
 	  return !!getLoopCharacteristics$1(element);
 	}
 
+	function getCompletionCondition(element) {
+	  return getLoopCharacteristics$1(element).get('completionCondition');
+	}
+
+	function setCompletionCondition(element, commandStack, completionCondition = undefined) {
+	  commandStack.execute('properties-panel.update-businessobject', {
+	    element,
+	    businessObject: getLoopCharacteristics$1(element),
+	    properties: {
+	      completionCondition
+	    }
+	  });
+	}
+
 	function getProperty$1(element, propertyName) {
 	  const loopCharacteristics = getLoopCharacteristics$1(element),
 	        zeebeLoopCharacteristics = getZeebeLoopCharacteristics(loopCharacteristics);
@@ -71386,12 +71791,7 @@
 	}
 
 	const LOW_PRIORITY$1$1 = 500;
-	const ZEEBE_GROUPS = [// Due to delayed Zeebe 1.3 implementation, temporarily unbuild this
-	// TODO: re-enable for Zeebe 1.4 release
-	// Cf. https://github.com/camunda/camunda-modeler/issues/2524#issuecomment-979049379
-	// BusinessRuleImplementationGroup,
-	// CalledDecisionGroup,
-	TaskDefinitionGroup, AssignmentDefinitionGroup, FormGroup$1, ConditionGroup$1, TargetGroup, InputGroup$1, OutputPropagationGroup, OutputGroup$1, HeaderGroup];
+	const ZEEBE_GROUPS = [BusinessRuleImplementationGroup, CalledDecisionGroup, TaskDefinitionGroup, AssignmentDefinitionGroup, FormGroup$1, ConditionGroup$1, TargetGroup, InputGroup$1, OutputPropagationGroup, OutputGroup$1, HeaderGroup];
 	class ZeebePropertiesProvider {
 	  constructor(propertiesPanel, injector) {
 	    propertiesPanel.registerProvider(LOW_PRIORITY$1$1, this);
@@ -71418,22 +71818,19 @@
 	  }
 
 	}
-	ZeebePropertiesProvider.$inject = ['propertiesPanel', 'injector']; // Due to delayed Zeebe 1.3 implementation, temporarily unbuild this
-	// TODO: re-enable for Zeebe 1.4 release
-	// Cf. https://github.com/camunda/camunda-modeler/issues/2524#issuecomment-979049379
+	ZeebePropertiesProvider.$inject = ['propertiesPanel', 'injector'];
 
-	/* function CalledDecisionGroup(element) {
+	function CalledDecisionGroup(element) {
 	  const group = {
 	    id: 'calledDecision',
 	    label: 'Called decision',
-	    entries: [
-	      ...CalledDecisionProps({ element })
-	    ],
+	    entries: [...CalledDecisionProps({
+	      element
+	    })],
 	    component: Group
 	  };
-
 	  return group.entries.length ? group : null;
-	}*/
+	}
 
 	function TaskDefinitionGroup(element) {
 	  const group = {
@@ -71532,23 +71929,19 @@
 	    component: Group
 	  };
 	  return group.entries.length ? group : null;
-	} // Due to delayed Zeebe 1.3 implementation, temporarily unbuild this
-	// TODO: re-enable for Zeebe 1.4 release
-	// Cf. https://github.com/camunda/camunda-modeler/issues/2524#issuecomment-979049379
+	}
 
-	/* function BusinessRuleImplementationGroup(element) {
+	function BusinessRuleImplementationGroup(element) {
 	  const group = {
 	    id: 'businessRuleImplementation',
 	    label: 'Implementation',
-	    entries: [
-	      ...BusinessRuleImplementationProps({ element })
-	    ],
+	    entries: [...BusinessRuleImplementationProps({
+	      element
+	    })],
 	    component: Group
 	  };
-
 	  return group.entries.length ? group : null;
-	}*/
-
+	}
 
 	function AssignmentDefinitionGroup(element) {
 	  const group = {
@@ -71621,6 +72014,272 @@
 	  zeebePropertiesProvider: ['type', ZeebePropertiesProvider]
 	};
 
+	var e$2,
+	    o$3 = {};
+
+	function n$1(r, t, e) {
+	  if (3 === r.nodeType) {
+	    var o = "textContent" in r ? r.textContent : r.nodeValue || "";
+
+	    if (!1 !== n$1.options.trim) {
+	      var a = 0 === t || t === e.length - 1;
+	      if ((!(o = o.match(/^[\s\n]+$/g) && "all" !== n$1.options.trim ? " " : o.replace(/(^[\s\n]+|[\s\n]+$)/g, "all" === n$1.options.trim || a ? "" : " ")) || " " === o) && e.length > 1 && a) return null;
+	    }
+
+	    return o;
+	  }
+
+	  if (1 !== r.nodeType) return null;
+	  var p = String(r.nodeName).toLowerCase();
+	  if ("script" === p && !n$1.options.allowScripts) return null;
+	  var l,
+	      s,
+	      u = n$1.h(p, function (r) {
+	    var t = r && r.length;
+	    if (!t) return null;
+
+	    for (var e = {}, o = 0; o < t; o++) {
+	      var a = r[o],
+	          i = a.name,
+	          p = a.value;
+	      "on" === i.substring(0, 2) && n$1.options.allowEvents && (p = new Function(p)), e[i] = p;
+	    }
+
+	    return e;
+	  }(r.attributes), (s = (l = r.childNodes) && Array.prototype.map.call(l, n$1).filter(i$2)) && s.length ? s : null);
+	  return n$1.visitor && n$1.visitor(u), u;
+	}
+
+	var a$2,
+	    i$2 = function (r) {
+	  return r;
+	},
+	    p$2 = {};
+
+	function l$1(r) {
+	  var t = (r.type || "").toLowerCase(),
+	      e = l$1.map;
+	  e && e.hasOwnProperty(t) ? (r.type = e[t], r.props = Object.keys(r.props || {}).reduce(function (t, e) {
+	    var o;
+	    return t[(o = e, o.replace(/-(.)/g, function (r, t) {
+	      return t.toUpperCase();
+	    }))] = r.props[e], t;
+	  }, {})) : r.type = t.replace(/[^a-z0-9-]/i, "");
+	}
+
+	((function (t) {
+	  function i() {
+	    t.apply(this, arguments);
+	  }
+
+	  return t && (i.__proto__ = t), (i.prototype = Object.create(t && t.prototype)).constructor = i, i.setReviver = function (r) {
+	    a$2 = r;
+	  }, i.prototype.shouldComponentUpdate = function (r) {
+	    var t = this.props;
+	    return r.wrap !== t.wrap || r.type !== t.type || r.markup !== t.markup;
+	  }, i.prototype.setComponents = function (r) {
+	    if (this.map = {}, r) for (var t in r) if (r.hasOwnProperty(t)) {
+	      var e = t.replace(/([A-Z]+)([A-Z][a-z0-9])|([a-z0-9]+)([A-Z])/g, "$1$3-$2$4").toLowerCase();
+	      this.map[e] = r[t];
+	    }
+	  }, i.prototype.render = function (t) {
+	    var i = t.wrap;
+	    void 0 === i && (i = !0);
+
+	    var s,
+	        u = t.type,
+	        c = t.markup,
+	        m = t.components,
+	        v = t.reviver,
+	        f = t.onError,
+	        d = t["allow-scripts"],
+	        h$1 = t["allow-events"],
+	        y = t.trim,
+	        w = function (r, t) {
+	      var e = {};
+
+	      for (var o in r) Object.prototype.hasOwnProperty.call(r, o) && -1 === t.indexOf(o) && (e[o] = r[o]);
+
+	      return e;
+	    }(t, ["wrap", "type", "markup", "components", "reviver", "onError", "allow-scripts", "allow-events", "trim"]),
+	        C = v || this.reviver || this.constructor.prototype.reviver || a$2 || a;
+
+	    this.setComponents(m);
+	    var g = {
+	      allowScripts: d,
+	      allowEvents: h$1,
+	      trim: y
+	    };
+
+	    try {
+	      s = function (r, t, a, i, s) {
+	        var u = function (r, t) {
+	          var o,
+	              n,
+	              a,
+	              i,
+	              p = "html" === t ? "text/html" : "application/xml";
+	          "html" === t ? (i = "body", a = "<!DOCTYPE html>\n<html><body>" + r + "</body></html>") : (i = "xml", a = '<?xml version="1.0" encoding="UTF-8"?>\n<xml>' + r + "</xml>");
+
+	          try {
+	            o = new DOMParser().parseFromString(a, p);
+	          } catch (r) {
+	            n = r;
+	          }
+
+	          if (o || "html" !== t || ((o = e$2 || (e$2 = function () {
+	            if (document.implementation && document.implementation.createHTMLDocument) return document.implementation.createHTMLDocument("");
+	            var r = document.createElement("iframe");
+	            return r.style.cssText = "position:absolute; left:0; top:-999em; width:1px; height:1px; overflow:hidden;", r.setAttribute("sandbox", "allow-forms"), document.body.appendChild(r), r.contentWindow.document;
+	          }())).open(), o.write(a), o.close()), o) {
+	            var l = o.getElementsByTagName(i)[0],
+	                s = l.firstChild;
+	            return r && !s && (l.error = "Document parse failed."), s && "parsererror" === String(s.nodeName).toLowerCase() && (s.removeChild(s.firstChild), s.removeChild(s.lastChild), l.error = s.textContent || s.nodeValue || n || "Unknown error", l.removeChild(s)), l;
+	          }
+	        }(r, t);
+
+	        if (u && u.error) throw new Error(u.error);
+	        var c = u && u.body || u;
+	        l$1.map = i || p$2;
+
+	        var m = c && function (r, t, e, a) {
+	          return n$1.visitor = t, n$1.h = e, n$1.options = a || o$3, n$1(r);
+	        }(c, l$1, a, s);
+
+	        return l$1.map = null, m && m.props && m.props.children || null;
+	      }(c, u, C, this.map, g);
+	    } catch (r) {
+	      f ? f({
+	        error: r
+	      }) : "undefined" != typeof console && console.error && console.error("preact-markup: " + r);
+	    }
+
+	    if (!1 === i) return s || null;
+	    var x = w.hasOwnProperty("className") ? "className" : "class",
+	        b = w[x];
+	    return b ? b.splice ? b.splice(0, 0, "markup") : "string" == typeof b ? w[x] += " markup" : "object" == typeof b && (b.markup = !0) : w[x] = "markup", C("div", w, s || null);
+	  }, i;
+	})(p));
+
+	document.createElement('form');
+
+	/* eslint-disable react-hooks/rules-of-hooks */
+	const DescriptionProvider = {
+	  conditionExpression: element => {
+	    const translate = useService('translate');
+	    return o$2("a", {
+	      href: "https://docs.camunda.io/docs/reference/bpmn-processes/exclusive-gateways/exclusive-gateways#conditions",
+	      target: "_blank",
+	      rel: "noopener",
+	      title: translate('Conditions documentation'),
+	      children: translate('How to define conditions')
+	    });
+	  },
+	  messageSubscriptionCorrelationKey: element => {
+	    const translate = useService('translate');
+
+	    if (is$1(element, 'bpmn:ReceiveTask')) {
+	      return o$2("a", {
+	        href: "https://docs.camunda.io/docs/reference/bpmn-processes/receive-tasks/receive-tasks/#messages",
+	        target: "_blank",
+	        rel: "noopener",
+	        title: translate('Receive task documentation'),
+	        children: translate('How to configure a receive task')
+	      });
+	    }
+
+	    return o$2("a", {
+	      href: "https://docs.camunda.io/docs/reference/bpmn-processes/message-events/message-events/#messages",
+	      target: "_blank",
+	      rel: "noopener",
+	      title: translate('Message event documentation'),
+	      children: translate('How to configure a message event')
+	    });
+	  },
+	  messageName: element => {
+	    const translate = useService('translate');
+
+	    if (is$1(element, 'bpmn:StartEvent') && !isInEventSubProcess(element)) {
+	      return o$2("a", {
+	        href: "https://docs.camunda.io/docs/reference/bpmn-processes/message-events/message-events/#messages",
+	        target: "_blank",
+	        rel: "noopener",
+	        title: translate('Message event documentation'),
+	        children: translate('How to configure a message event')
+	      });
+	    }
+	  },
+	  targetProcessId: element => {
+	    const translate = useService('translate');
+	    return o$2("a", {
+	      href: "https://docs.camunda.io/docs/reference/bpmn-processes/call-activities/call-activities",
+	      target: "_blank",
+	      rel: "noopener",
+	      title: translate('Call activity documentation'),
+	      children: translate('How to call another process')
+	    });
+	  },
+	  taskDefinitionType: element => {
+	    const translate = useService('translate');
+
+	    if (is$1(element, 'bpmn:ServiceTask')) {
+	      return o$2("a", {
+	        href: "https://docs.camunda.io/docs/reference/bpmn-processes/service-tasks/service-tasks/#task-definition",
+	        target: "_blank",
+	        rel: "noopener",
+	        title: translate('Service task documentation'),
+	        children: translate('How to configure a service task')
+	      });
+	    }
+
+	    if (is$1(element, 'bpmn:BusinessRuleTask')) {
+	      return o$2("a", {
+	        href: "https://docs.camunda.io/docs/reference/bpmn-processes/business-rule-tasks/business-rule-tasks/#defining-a-task",
+	        target: "_blank",
+	        rel: "noopener",
+	        title: translate('Business rule task documentation'),
+	        children: translate('How to configure a business rule task')
+	      });
+	    }
+
+	    if (is$1(element, 'bpmn:ScriptTask')) {
+	      return o$2("a", {
+	        href: "https://docs.camunda.io/docs/reference/bpmn-processes/script-tasks/script-tasks/#defining-a-task",
+	        target: "_blank",
+	        rel: "noopener",
+	        title: translate('Script task documentation'),
+	        children: translate('How to configure a script task')
+	      });
+	    }
+
+	    if (is$1(element, 'bpmn:SendTask')) {
+	      return o$2("a", {
+	        href: "https://docs.camunda.io/docs/reference/bpmn-processes/send-tasks/send-tasks/#defining-a-task",
+	        target: "_blank",
+	        rel: "noopener",
+	        title: translate('Send task documentation'),
+	        children: translate('How to configure a send task')
+	      });
+	    }
+	  },
+	  errorCode: element => {
+	    const translate = useService('translate');
+	    return o$2("a", {
+	      href: "https://docs.camunda.io/docs/reference/bpmn-processes/error-events/error-events/#defining-the-error",
+	      target: "_blank",
+	      rel: "noopener",
+	      title: translate('Error event documentation'),
+	      children: translate('How to configure an error event')
+	    });
+	  }
+	};
+
+	function isInEventSubProcess(element) {
+	  const bo = getBusinessObject(element),
+	        parent = bo.$parent;
+	  return is$1(parent, 'bpmn:SubProcess') && parent.triggeredByEvent;
+	}
+
 	/**
 	 *
 	 * @param {Object} options
@@ -72210,7 +72869,7 @@
 	 * generate a semantic id with given prefix
 	 */
 	function nextId$1(prefix) {
-	  const ids = new Ids([32,32,1]);
+	  const ids = new Ids([ 32,32,1 ]);
 
 	  return ids.nextPrefixed(prefix);
 	}
@@ -73230,6 +73889,10 @@
 	    moddleExtensions: {
 	      zeebe: zeebeModdle,
 	      ...options.moddleExtensions
+	    },
+	    propertiesPanel: {
+	      description: DescriptionProvider,
+	      ...options.propertiesPanel
 	    }
 	  };