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

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

@@ -71903,25 +71903,32 @@
 
 
 	  getDefault(element) {
-	    return find(this.getAll(), function (template) {
-	      return isAny(element, template.appliesTo) && template.isDefault;
+	    return find(this.getAll(element), function (template) {
+	      return template.isDefault;
 	    }) || null;
 	  }
 	  /**
-	   * Get all templates (with given ID).
-	   *
-	   * @param {string} [id]
+	   * Get all templates (with given ID or applicable to element).
 	   *
+	   * @param {String|djs.model.Base} [id]
 	   * @return {Array<ElementTemplate>}
 	   */
 
 
 	  getAll(id) {
-	    if (!isUndefined(id) && this._templates[id]) {
-	      return values(this._templates[id]);
-	    }
+	    return this._getTemplateVerions(id, false);
+	  }
+	  /**
+	   * Get all templates (with given ID or applicable to element) with the latest
+	   * version.
+	   *
+	   * @param {String|djs.model.Base} [id]
+	   * @return {Array<ElementTemplate>}
+	   */
+
 
-	    return flatten(values(this._templates).map(values));
+	  getLatest(id) {
+	    return this._getTemplateVerions(id, true);
 	  }
 	  /**
 	   * Set templates.
@@ -71937,13 +71944,54 @@
 	            version = isUndefined(template.version) ? '_' : template.version;
 
 	      if (!this._templates[id]) {
-	        this._templates[id] = {};
+	        this._templates[id] = {
+	          latest: template
+	        };
 	      }
 
 	      this._templates[id][version] = template;
+	      const latestVerions = this._templates[id].latest.version;
+
+	      if (isUndefined(latestVerions) || template.version > latestVerions) {
+	        this._templates[id].latest = template;
+	      }
 	    });
 	  }
 
+	  _getTemplateVerions(id, latestOnly) {
+	    if (typeof id === 'boolean') {
+	      latestOnly = id;
+	      id = undefined;
+	    }
+
+	    const templates = this._templates;
+
+	    const getVersions = template => {
+	      const {
+	        latest,
+	        ...versions
+	      } = template;
+	      return latestOnly ? [latest] : values(versions);
+	    };
+
+	    if (isUndefined(id)) {
+	      return flatten(values(templates).map(getVersions));
+	    }
+
+	    if (isObject(id)) {
+	      const element = id;
+	      return filter(this._getTemplateVerions(latestOnly), function (template) {
+	        return isAny(element, template.appliesTo);
+	      }) || [];
+	    }
+
+	    if (isString(id)) {
+	      return templates[id] && getVersions(templates[id]);
+	    }
+
+	    throw new Error('argument must be of type {String|djs.model.Base|Undefined}');
+	  }
+
 	  _getTemplateId(element) {
 	    return getTemplateId(element);
 	  }
@@ -72493,8 +72541,10 @@
 	  const businessObject = getBusinessObject(element);
 	  const type = businessObject.$type,
 	        eventDefinitionType = getEventDefinitionType(businessObject);
+	  const newBusinessObject = createBlankBusinessObject(element, injector);
 	  const newElement = replace.replaceElement(element, {
 	    type: type,
+	    businessObject: newBusinessObject,
 	    eventDefinitionType: eventDefinitionType
 	  });
 	  selection.select(newElement);
@@ -72552,6 +72602,29 @@
 	  return string;
 	}
 
+	function createBlankBusinessObject(element, injector) {
+	  const bpmnFactory = injector.get('bpmnFactory'),
+	        bpmnJs = injector.get('bpmnjs');
+	  const bo = getBusinessObject(element),
+	        newBo = bpmnFactory.create(bo.$type),
+	        label = getLabel(element);
+
+	  if (!label) {
+	    return newBo;
+	  }
+
+	  if (is$1(element, 'bpmn:Group')) {
+	    const definitions = bpmnJs.getDefinitions();
+	    const categoryValue = createCategoryValue(definitions, bpmnFactory);
+	    newBo.categoryValueRef = categoryValue;
+	  }
+
+	  setLabel({
+	    businessObject: newBo
+	  }, label);
+	  return newBo;
+	}
+
 	function unlinkTemplate(element, injector) {
 	  const modeling = injector.get('modeling'); // remove template attributes
 
@@ -72944,15 +73017,25 @@
 	      const newBinding = newProperty.binding,
 	            newBindingType = newBinding.type;
 	      return newBindingType === 'zeebe:input' || newBindingType === 'zeebe:output';
-	    }); // (1) do not override old inputs and outputs if no new inputs and outputs specified
-
-	    if (!newProperties.length) {
-	      return;
-	    }
+	    });
 
 	    const businessObject = this._getOrCreateExtensionElements(element);
 
-	    let ioMapping = findExtension$1(businessObject, 'zeebe:IoMapping');
+	    let ioMapping = findExtension$1(businessObject, 'zeebe:IoMapping'); // (1) remove old mappings if no new specified
+
+	    if (!newProperties.length) {
+	      if (!ioMapping) {
+	        return;
+	      }
+
+	      commandStack.execute('element.updateModdleProperties', {
+	        element,
+	        moddleElement: businessObject,
+	        properties: {
+	          values: without(businessObject.get('values'), ioMapping)
+	        }
+	      });
+	    }
 
 	    if (!ioMapping) {
 	      ioMapping = bpmnFactory.create('zeebe:IoMapping');
@@ -73063,15 +73146,25 @@
 	      const newBinding = newProperty.binding,
 	            newBindingType = newBinding.type;
 	      return newBindingType === 'zeebe:taskHeader';
-	    }); // (1) do not override old headers if no new specified
-
-	    if (!newProperties.length) {
-	      return;
-	    }
+	    });
 
 	    const businessObject = this._getOrCreateExtensionElements(element);
 
-	    let taskHeaders = findExtension$1(businessObject, 'zeebe:TaskHeaders');
+	    let taskHeaders = findExtension$1(businessObject, 'zeebe:TaskHeaders'); // (1) remove old headers if no new specified
+
+	    if (!newProperties.length) {
+	      if (!taskHeaders) {
+	        return;
+	      }
+
+	      commandStack.execute('element.updateModdleProperties', {
+	        element,
+	        moddleElement: businessObject,
+	        properties: {
+	          values: without(businessObject.get('values'), taskHeaders)
+	        }
+	      });
+	    }
 
 	    if (!taskHeaders) {
 	      taskHeaders = bpmnFactory.create('zeebe:TaskHeaders');
@@ -73918,9 +74011,9 @@
 	    };
 	  }
 
-	  const newerTemplate = findNewestElementTemplate(elementTemplates, template);
+	  const newerTemplate = elementTemplates.getLatest(templateId)[0];
 
-	  if (newerTemplate) {
+	  if (newerTemplate !== template) {
 	    return {
 	      type: 'OUTDATED_TEMPLATE',
 	      template,
@@ -73934,26 +74027,6 @@
 	  };
 	}
 
-	function findNewestElementTemplate(elementTemplates, currentElementTemplate) {
-	  if (isUndefined(currentElementTemplate.version)) {
-	    return null;
-	  }
-
-	  return elementTemplates.getAll().filter(function (elementTemplate) {
-	    return currentElementTemplate.id === elementTemplate.id && !isUndefined(elementTemplate.version);
-	  }).reduce(function (newestElementTemplate, elementTemplate) {
-	    if (currentElementTemplate.version < elementTemplate.version) {
-	      return elementTemplate;
-	    }
-
-	    if (newestElementTemplate && newestElementTemplate.version < elementTemplate.version) {
-	      return elementTemplate;
-	    }
-
-	    return newestElementTemplate;
-	  }, null);
-	}
-
 	function TemplateProps({
 	  element,
 	  elementTemplates
@@ -75002,9 +75075,7 @@
 	  }
 
 	  _shouldShowTemplateProperties(element) {
-	    return getTemplateId$1(element) || this._elementTemplates.getAll().some(template => {
-	      return isAny(element, template.appliesTo);
-	    });
+	    return getTemplateId$1(element) || this._elementTemplates.getAll(element).length;
 	  }
 
 	}
@@ -75069,6 +75140,16 @@
 	      children: translate('How to define conditions')
 	    });
 	  },
+	  decisionId: element => {
+	    const translate = useService('translate');
+	    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')
+	    });
+	  },
 	  formType: element => {
 	    const translate = useService('translate');
 	    return o$2("a", {
@@ -75339,864 +75420,674 @@
 	  disabledCollapsedSubprocessPopupProvider: [ 'type', DisabledCollapsedSubprocessPopupProvider ]
 	};
 
-	var DEFAULT_RENDER_PRIORITY$2 = 1000;
-
 	/**
-	 * The base implementation of shape and connection renderers.
+	 * Flatten array, one level deep.
 	 *
-	 * @param {EventBus} eventBus
-	 * @param {number} [renderPriority=1000]
+	 * @param {Array<?>} arr
+	 *
+	 * @return {Array<?>}
 	 */
-	function BaseRenderer$1(eventBus, renderPriority) {
-	  var self = this;
-
-	  renderPriority = renderPriority || DEFAULT_RENDER_PRIORITY$2;
-
-	  eventBus.on([ 'render.shape', 'render.connection' ], renderPriority, function(evt, context) {
-	    var type = evt.type,
-	        element = context.element,
-	        visuals = context.gfx,
-	        attrs = context.attrs;
-
-	    if (self.canRender(element)) {
-	      if (type === 'render.shape') {
-	        return self.drawShape(visuals, element, attrs);
-	      } else {
-	        return self.drawConnection(visuals, element, attrs);
-	      }
-	    }
-	  });
 
-	  eventBus.on([ 'render.getShapePath', 'render.getConnectionPath' ], renderPriority, function(evt, element) {
-	    if (self.canRender(element)) {
-	      if (evt.type === 'render.getShapePath') {
-	        return self.getShapePath(element);
-	      } else {
-	        return self.getConnectionPath(element);
-	      }
-	    }
-	  });
+	var nativeToString$1 = Object.prototype.toString;
+	var nativeHasOwnProperty$1 = Object.prototype.hasOwnProperty;
+	function isUndefined$3(obj) {
+	  return obj === undefined;
+	}
+	function isArray$3(obj) {
+	  return nativeToString$1.call(obj) === '[object Array]';
+	}
+	function isFunction$1(obj) {
+	  var tag = nativeToString$1.call(obj);
+	  return tag === '[object Function]' || tag === '[object AsyncFunction]' || tag === '[object GeneratorFunction]' || tag === '[object AsyncGeneratorFunction]' || tag === '[object Proxy]';
 	}
-
 	/**
-	 * Should check whether *this* renderer can render
-	 * the element/connection.
-	 *
-	 * @param {element} element
+	 * Ensure collection is an array.
 	 *
-	 * @returns {boolean}
+	 * @param {Object} obj
 	 */
-	BaseRenderer$1.prototype.canRender = function() {};
 
-	/**
-	 * Provides the shape's snap svg element to be drawn on the `canvas`.
-	 *
-	 * @param {djs.Graphics} visuals
-	 * @param {Shape} shape
-	 *
-	 * @returns {Snap.svg} [returns a Snap.svg paper element ]
-	 */
-	BaseRenderer$1.prototype.drawShape = function() {};
+	function ensureArray$1(obj) {
+	  if (isArray$3(obj)) {
+	    return;
+	  }
 
+	  throw new Error('must supply array');
+	}
 	/**
-	 * Provides the shape's snap svg element to be drawn on the `canvas`.
+	 * Return true, if target owns a property with the given key.
 	 *
-	 * @param {djs.Graphics} visuals
-	 * @param {Connection} connection
+	 * @param {Object} target
+	 * @param {String} key
 	 *
-	 * @returns {Snap.svg} [returns a Snap.svg paper element ]
+	 * @return {Boolean}
 	 */
-	BaseRenderer$1.prototype.drawConnection = function() {};
+
+	function has$1(target, key) {
+	  return nativeHasOwnProperty$1.call(target, key);
+	}
 
 	/**
-	 * Gets the SVG path of a shape that represents it's visual bounds.
+	 * Find element in collection.
 	 *
-	 * @param {Shape} shape
+	 * @param  {Array|Object} collection
+	 * @param  {Function|Object} matcher
 	 *
-	 * @return {string} svg path
+	 * @return {Object}
 	 */
-	BaseRenderer$1.prototype.getShapePath = function() {};
 
+	function find$1(collection, matcher) {
+	  matcher = toMatcher$1(matcher);
+	  var match;
+	  forEach$1(collection, function (val, key) {
+	    if (matcher(val, key)) {
+	      match = val;
+	      return false;
+	    }
+	  });
+	  return match;
+	}
 	/**
-	 * Gets the SVG path of a connection that represents it's visual bounds.
+	 * Iterate over collection; returning something
+	 * (non-undefined) will stop iteration.
 	 *
-	 * @param {Connection} connection
+	 * @param  {Array|Object} collection
+	 * @param  {Function} iterator
 	 *
-	 * @return {string} svg path
+	 * @return {Object} return result that stopped the iteration
 	 */
-	BaseRenderer$1.prototype.getConnectionPath = function() {};
 
-	function ensureImported$1(element, target) {
+	function forEach$1(collection, iterator) {
+	  var val, result;
 
-	  if (element.ownerDocument !== target.ownerDocument) {
-	    try {
-	      // may fail on webkit
-	      return target.ownerDocument.importNode(element, true);
-	    } catch (e) {
-	      // ignore
-	    }
+	  if (isUndefined$3(collection)) {
+	    return;
 	  }
 
-	  return element;
-	}
+	  var convertKey = isArray$3(collection) ? toNum$1 : identity$1;
 
-	/**
-	 * appendTo utility
-	 */
+	  for (var key in collection) {
+	    if (has$1(collection, key)) {
+	      val = collection[key];
+	      result = iterator(val, convertKey(key));
 
+	      if (result === false) {
+	        return val;
+	      }
+	    }
+	  }
+	}
 	/**
-	 * Append a node to a target element and return the appended node.
+	 * Return collection without element.
 	 *
-	 * @param  {SVGElement} element
-	 * @param  {SVGElement} target
+	 * @param  {Array} arr
+	 * @param  {Function} matcher
 	 *
-	 * @return {SVGElement} the appended node
+	 * @return {Array}
 	 */
-	function appendTo$1(element, target) {
-	  return target.appendChild(ensureImported$1(element, target));
-	}
 
-	/**
-	 * append utility
-	 */
+	function without$1(arr, matcher) {
+	  if (isUndefined$3(arr)) {
+	    return [];
+	  }
 
-	/**
-	 * Append a node to an element
-	 *
-	 * @param  {SVGElement} element
-	 * @param  {SVGElement} node
-	 *
-	 * @return {SVGElement} the element
-	 */
-	function append$1(target, node) {
-	  appendTo$1(node, target);
-	  return target;
+	  ensureArray$1(arr);
+	  matcher = toMatcher$1(matcher);
+	  return arr.filter(function (el, idx) {
+	    return !matcher(el, idx);
+	  });
 	}
 
-	/**
-	 * attribute accessor utility
-	 */
+	function toMatcher$1(matcher) {
+	  return isFunction$1(matcher) ? matcher : function (e) {
+	    return e === matcher;
+	  };
+	}
 
-	var LENGTH_ATTR$1 = 2;
+	function identity$1(arg) {
+	  return arg;
+	}
 
-	var CSS_PROPERTIES$1 = {
-	  'alignment-baseline': 1,
-	  'baseline-shift': 1,
-	  'clip': 1,
-	  'clip-path': 1,
-	  'clip-rule': 1,
-	  'color': 1,
-	  'color-interpolation': 1,
-	  'color-interpolation-filters': 1,
-	  'color-profile': 1,
-	  'color-rendering': 1,
-	  'cursor': 1,
-	  'direction': 1,
-	  'display': 1,
-	  'dominant-baseline': 1,
-	  'enable-background': 1,
-	  'fill': 1,
-	  'fill-opacity': 1,
-	  'fill-rule': 1,
-	  'filter': 1,
-	  'flood-color': 1,
-	  'flood-opacity': 1,
-	  'font': 1,
-	  'font-family': 1,
-	  'font-size': LENGTH_ATTR$1,
-	  'font-size-adjust': 1,
-	  'font-stretch': 1,
-	  'font-style': 1,
-	  'font-variant': 1,
-	  'font-weight': 1,
-	  'glyph-orientation-horizontal': 1,
-	  'glyph-orientation-vertical': 1,
-	  'image-rendering': 1,
-	  'kerning': 1,
-	  'letter-spacing': 1,
-	  'lighting-color': 1,
-	  'marker': 1,
-	  'marker-end': 1,
-	  'marker-mid': 1,
-	  'marker-start': 1,
-	  'mask': 1,
-	  'opacity': 1,
-	  'overflow': 1,
-	  'pointer-events': 1,
-	  'shape-rendering': 1,
-	  'stop-color': 1,
-	  'stop-opacity': 1,
-	  'stroke': 1,
-	  'stroke-dasharray': 1,
-	  'stroke-dashoffset': 1,
-	  'stroke-linecap': 1,
-	  'stroke-linejoin': 1,
-	  'stroke-miterlimit': 1,
-	  'stroke-opacity': 1,
-	  'stroke-width': LENGTH_ATTR$1,
-	  'text-anchor': 1,
-	  'text-decoration': 1,
-	  'text-rendering': 1,
-	  'unicode-bidi': 1,
-	  'visibility': 1,
-	  'word-spacing': 1,
-	  'writing-mode': 1
-	};
+	function toNum$1(arg) {
+	  return Number(arg);
+	}
 
+	/**
+	 * Get extension elements of business object. Optionally filter by type.
+	 *
+	 * @param  {djs.model.Base|ModdleElement} element
+	 * @param  {String} [type=undefined]
+	 * @returns {Array<ModdleElement>}
+	 */
+	function getExtensionElementsList$1(element, type = undefined) {
+	  const businessObject = getBusinessObject(element),
+	        extensionElements = businessObject.get('extensionElements');
 
-	function getAttribute$1(node, name) {
-	  if (CSS_PROPERTIES$1[name]) {
-	    return node.style[name];
-	  } else {
-	    return node.getAttributeNS(null, name);
+	  if (!extensionElements) {
+	    return [];
 	  }
-	}
 
-	function setAttribute$1(node, name, value) {
-	  var hyphenated = name.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+	  const values = extensionElements.get('values');
 
-	  var type = CSS_PROPERTIES$1[hyphenated];
+	  if (!values || !values.length) {
+	    return [];
+	  }
 
 	  if (type) {
-	    // append pixel unit, unless present
-	    if (type === LENGTH_ATTR$1 && typeof value === 'number') {
-	      value = String(value) + 'px';
-	    }
-
-	    node.style[hyphenated] = value;
-	  } else {
-	    node.setAttributeNS(null, name, value);
+	    return values.filter(value => is$1(value, type));
 	  }
-	}
 
-	function setAttributes$1(node, attrs) {
-
-	  var names = Object.keys(attrs), i, name;
-
-	  for (i = 0, name; (name = names[i]); i++) {
-	    setAttribute$1(node, name, attrs[name]);
-	  }
+	  return values;
 	}
 
 	/**
-	 * Gets or sets raw attributes on a node.
-	 *
-	 * @param  {SVGElement} node
-	 * @param  {Object} [attrs]
-	 * @param  {String} [name]
-	 * @param  {String} [value]
+	 * Remove one or more extension elements. Remove bpmn:ExtensionElements afterwards if it's empty.
 	 *
-	 * @return {String}
+	 * @param {ModdleElement} element
+	 * @param {ModdleElement} businessObject
+	 * @param {ModdleElement|Array<ModdleElement>} extensionElementsToRemove
+	 * @param {CommandStack} commandStack
 	 */
-	function attr$2(node, name, value) {
-	  if (typeof name === 'string') {
-	    if (value !== undefined) {
-	      setAttribute$1(node, name, value);
-	    } else {
-	      return getAttribute$1(node, name);
-	    }
-	  } else {
-	    setAttributes$1(node, name);
+	function removeExtensionElements$1(element, businessObject, extensionElementsToRemove, commandStack) {
+	  if (!isArray$3(extensionElementsToRemove)) {
+	    extensionElementsToRemove = [ extensionElementsToRemove ];
 	  }
 
-	  return node;
+	  const extensionElements = businessObject.get('extensionElements'),
+	        values = extensionElements.get('values').filter(value => !extensionElementsToRemove.includes(value));
+
+	  commandStack.execute('element.updateModdleProperties', {
+	    element,
+	    moddleElement: extensionElements,
+	    properties: {
+	      values
+	    }
+	  });
 	}
 
-	var ns$1 = {
-	  svg: 'http://www.w3.org/2000/svg'
-	};
+	const HIGH_PRIORITY$m = 5000;
+
 
 	/**
-	 * DOM parsing utility
+	 * Zeebe BPMN behavior ensuring that bpmn:BusinessRuleTask only has one of the following:
+	 *
+	 * (1) zeebe:CalledDecision
+	 * (2) zeebe:TaskDefinition and zeebe:TaskHeaders
 	 */
+	class CleanUpBusinessRuleTaskBehavior extends CommandInterceptor$1 {
+	  constructor(commandStack, eventBus) {
+	    super(eventBus);
 
-	var SVG_START$1 = '<svg xmlns="' + ns$1.svg + '"';
+	    /**
+	     * Remove zeebe:CalledDecision if zeebe:TaskDefinition is about to be added.
+	     */
+	    this.preExecute('element.updateModdleProperties' , HIGH_PRIORITY$m, function(context) {
+	      const {
+	        element,
+	        moddleElement,
+	        properties
+	      } = context;
 
-	function parse$3(svg) {
+	      if (
+	        !is$1(element, 'bpmn:BusinessRuleTask')
+	        || !is$1(moddleElement, 'bpmn:ExtensionElements')
+	        || !properties.values
+	      ) {
+	        return;
+	      }
 
-	  var unwrap = false;
+	      const calledDecision = getCalledDecision$2(element),
+	            taskDefinition = getTaskDefinition$3(element);
 
-	  // ensure we import a valid svg document
-	  if (svg.substring(0, 4) === '<svg') {
-	    if (svg.indexOf(ns$1.svg) === -1) {
-	      svg = SVG_START$1 + svg.substring(4);
-	    }
-	  } else {
-	    // namespace svg
-	    svg = SVG_START$1 + '>' + svg + '</svg>';
-	    unwrap = true;
-	  }
+	      if (
+	        calledDecision
+	        && !taskDefinition
+	        && properties.values.find(value => is$1(value, 'zeebe:CalledDecision'))
+	        && properties.values.find(value => is$1(value, 'zeebe:TaskDefinition'))
+	      ) {
+	        properties.values = without$1(properties.values, calledDecision);
+	      }
+	    }, true);
 
-	  var parsed = parseDocument$1(svg);
+	    /**
+	     * Remove zeebe:TaskDefinition and zeebe:TaskHeaders if zeebe:CalledDecision is about to be added.
+	     */
+	    this.preExecute('element.updateModdleProperties', HIGH_PRIORITY$m, function(context) {
+	      const {
+	        element,
+	        moddleElement,
+	        properties
+	      } = context;
 
-	  if (!unwrap) {
-	    return parsed;
-	  }
+	      if (
+	        !is$1(element, 'bpmn:BusinessRuleTask')
+	        || !is$1(moddleElement, 'bpmn:ExtensionElements')
+	        || !properties.values
+	      ) {
+	        return;
+	      }
 
-	  var fragment = document.createDocumentFragment();
+	      const calledDecision = getCalledDecision$2(element),
+	            taskDefinition = getTaskDefinition$3(element),
+	            taskHeaders = getTaskHeaders$1(element);
 
-	  var parent = parsed.firstChild;
+	      if (
+	        !calledDecision
+	        && (taskDefinition || taskHeaders)
+	        && properties.values.find(value => is$1(value, 'zeebe:CalledDecision'))
+	        && properties.values.find(value => is$1(value, 'zeebe:TaskDefinition') || is$1(value, 'zeebe:TaskHeaders'))
+	      ) {
+	        properties.values = without$1(properties.values, (value) => value === taskDefinition || value === taskHeaders);
+	      }
+	    }, true);
 
-	  while (parent.firstChild) {
-	    fragment.appendChild(parent.firstChild);
 	  }
-
-	  return fragment;
 	}
 
-	function parseDocument$1(svg) {
+	CleanUpBusinessRuleTaskBehavior.$inject = [
+	  'commandStack',
+	  'eventBus'
+	];
 
-	  var parser;
 
-	  // parse
-	  parser = new DOMParser();
-	  parser.async = false;
+	// helpers //////////
 
-	  return parser.parseFromString(svg, 'text/xml');
+	function getCalledDecision$2(element) {
+	  const businessObject = getBusinessObject(element);
+
+	  return getExtensionElementsList$1(businessObject, 'zeebe:CalledDecision')[ 0 ];
 	}
 
-	/**
-	 * Create utility for SVG elements
-	 */
+	function getTaskDefinition$3(element) {
+	  const businessObject = getBusinessObject(element);
+
+	  return getExtensionElementsList$1(businessObject, 'zeebe:TaskDefinition')[ 0 ];
+	}
+
+	function getTaskHeaders$1(element) {
+	  const businessObject = getBusinessObject(element);
 
+	  return getExtensionElementsList$1(businessObject, 'zeebe:TaskHeaders')[ 0 ];
+	}
 
 	/**
-	 * Create a specific type from name or SVG markup.
+	 * Creates a new element and set the parent to it
 	 *
-	 * @param {String} name the name or markup of the element
-	 * @param {Object} [attrs] attributes to set on the element
+	 * @method ElementHelper#createElement
 	 *
-	 * @returns {SVGElement}
+	 * @param {String} elementType of the new element
+	 * @param {Object} properties of the new element in key-value pairs
+	 * @param {moddle.object} parent of the new element
+	 * @param {BpmnFactory} factory which creates the new element
+	 *
+	 * @returns {djs.model.Base} element which is created
 	 */
-	function create$2(name, attrs) {
-	  var element;
-
-	  if (name.charAt(0) === '<') {
-	    element = parse$3(name).firstChild;
-	    element = document.importNode(element, true);
-	  } else {
-	    element = document.createElementNS(ns$1.svg, name);
-	  }
-
-	  if (attrs) {
-	    attr$2(element, attrs);
-	  }
+	function createElement$1(elementType, properties, parent, factory) {
+	  var element = factory.create(elementType, properties);
+	  element.$parent = parent;
 
 	  return element;
 	}
 
 	/**
-	 * Geometry helpers
+	 * Get zeebe:IoMapping from an element.
+	 *
+	 * @param {djs.model.Base|ModdleElement} element
+	 *
+	 * @return {ModdleElement}
 	 */
+	function getIoMapping$1(element) {
+	  const businessObject = getBusinessObject(element);
 
-	// fake node used to instantiate svg geometry elements
-	create$2('svg');
-
-	function getModelerTemplateIcon(element) {
-	  var modelerTemplateIcon = getBusinessObject(element).get('zeebe:modelerTemplateIcon');
-	  return modelerTemplateIcon;
-	}
-
-	var HIGH_PRIORITY$m = 1250;
-
-
-	function IconsRenderer(
-	    bpmnRenderer,
-	    eventBus
-	) {
-	  this._bpmnRenderer = bpmnRenderer;
-
-	  BaseRenderer$1.call(this, eventBus, HIGH_PRIORITY$m);
-	}
-
-	inherits_browser(IconsRenderer, BaseRenderer$1);
-
-	IconsRenderer.prototype.canRender = function(element) {
+	  const extensionElements = businessObject.get('extensionElements');
 
-	  if (isLabel(element)) {
-	    return false;
+	  if (!extensionElements) {
+	    return;
 	  }
 
-	  return (
-	    is$1(element, 'bpmn:Task') &&
-	    !!getModelerTemplateIcon(element)
-	  );
-	};
-
-	IconsRenderer.prototype.drawShape = function(parentGfx, element) {
-
-	  var renderer = this._bpmnRenderer.handlers['bpmn:Task'];
-
-	  var gfx = renderer(parentGfx, element);
-
-	  var modelerTemplateIcon = getModelerTemplateIcon(element);
-
-	  var icon = create$2('image');
-	  attr$2(icon, {
-	    href: modelerTemplateIcon,
-	    x: 4,
-	    y: 4
+	  return extensionElements.get('values').find((value) => {
+	    return is$1(value, 'zeebe:IoMapping');
 	  });
+	}
 
-	  append$1(parentGfx, icon);
-
-	  return gfx;
-	};
+	/**
+	 * Get zeebe:InputParameters from an element.
+	 *
+	 * @param  {djs.model.Base|ModdleElement} element
+	 *
+	 * @return {Array<ModdleElement>}
+	 */
+	function getInputParameters(element) {
+	  const ioMapping = getIoMapping$1(element);
 
-	IconsRenderer.$inject = [
-	  'bpmnRenderer',
-	  'eventBus'
-	];
+	  if (ioMapping) {
+	    return ioMapping.get('zeebe:inputParameters');
+	  }
 
-	var iconRendererModule = {
-	  __init__: [ 'elementTemplatesIconsRenderer' ],
-	  elementTemplatesIconsRenderer: [ 'type', IconsRenderer ]
-	};
+	  return [];
+	}
 
 	/**
-	 * Get extension elements of business object. Optionally filter by type.
+	 * Get zeebe:OutputParameters from an element.
 	 *
 	 * @param  {djs.model.Base|ModdleElement} element
-	 * @param  {String} [type=undefined]
-	 * @returns {Array<ModdleElement>}
+	 *
+	 * @return {Array<ModdleElement>}
 	 */
-	function getExtensionElementsList$1(element, type = undefined) {
-	  const businessObject = getBusinessObject(element),
-	        extensionElements = businessObject.get('extensionElements');
+	function getOutputParameters(element) {
+	  const ioMapping = getIoMapping$1(element);
 
-	  if (!extensionElements) {
-	    return [];
+	  if (ioMapping) {
+	    return ioMapping.get('zeebe:outputParameters');
 	  }
 
-	  const values = extensionElements.get('values');
+	  return [];
+	}
 
-	  if (!values || !values.length) {
-	    return [];
+	/**
+	 * Get default value for zeebe:propagateAllChildVariables.
+	 *
+	 * @param {djs.model.Base|ModdleElement} element
+	 *
+	 * @returns {boolean}
+	 */
+	function getPropagateAllChildVariablesDefault(element) {
+	  if (!is$1(element, 'bpmn:CallActivity')) {
+	    return false;
 	  }
 
-	  if (type) {
-	    return values.filter(value => is$1(value, type));
+	  const outputParameters = getOutputParameters(element);
+
+	  if (outputParameters) {
+	    return !outputParameters.length;
 	  }
+	}
 
-	  return values;
+	/**
+	 * Get zeebe:CalledElement of an element.
+	 *
+	 * @param {djs.model.Base|ModdleElement} element
+	 *
+	 * @returns {ModdleElement}
+	 */
+	function getCalledElement$1(element) {
+	  const calledElements = getCalledElements$1(element);
+
+	  return calledElements[ 0 ];
+	}
+
+	function getCalledElements$1(element) {
+	  const businessObject = getBusinessObject(element);
+
+	  return getExtensionElementsList$1(businessObject, 'zeebe:CalledElement');
 	}
 
 	/**
-	 * Remove one or more extension elements. Remove bpmn:ExtensionElements afterwards if it's empty.
+	 * Check whether zeebe:propagateAllChildVariables is set on an element.
+	 * Fall back to default if zeebe:propagateAllChildVariables not set.
 	 *
-	 * @param {ModdleElement} element
-	 * @param {ModdleElement} businessObject
-	 * @param {ModdleElement|Array<ModdleElement>} extensionElementsToRemove
-	 * @param {CommandStack} commandStack
+	 * @param {djs.model.Base|ModdleElement} element
+	 *
+	 * @returns {boolean}
 	 */
-	function removeExtensionElements$1(element, businessObject, extensionElementsToRemove, commandStack) {
-	  if (!isArray(extensionElementsToRemove)) {
-	    extensionElementsToRemove = [ extensionElementsToRemove ];
+	function isPropagateAllChildVariables$1(element) {
+	  if (!is$1(element, 'bpmn:CallActivity')) {
+	    return false;
 	  }
 
-	  const extensionElements = businessObject.get('extensionElements'),
-	        values = extensionElements.get('values').filter(value => !extensionElementsToRemove.includes(value));
+	  const businessObject = getBusinessObject(element),
+	        calledElement = getCalledElement$1(businessObject);
 
-	  commandStack.execute('element.updateModdleProperties', {
-	    element,
-	    moddleElement: extensionElements,
-	    properties: {
-	      values
-	    }
-	  });
+	  if (calledElement && has$1(calledElement, 'propagateAllChildVariables')) {
+	    return calledElement.get('propagateAllChildVariables') || false;
+	  } else {
+	    return getPropagateAllChildVariablesDefault(element);
+	  }
 	}
 
 	const HIGH_PRIORITY$n = 5000;
 
 
 	/**
-	 * Zeebe BPMN behavior ensuring that bpmn:BusinessRuleTask only has one of the following:
-	 *
-	 * (1) zeebe:CalledDecision
-	 * (2) zeebe:TaskDefinition and zeebe:TaskHeaders
+	 * Zeebe BPMN specific behavior for creating call activities.
 	 */
-	class CleanUpBusinessRuleTaskBehavior extends CommandInterceptor$1 {
-	  constructor(commandStack, eventBus) {
+	class CreateZeebeCallActivityBehavior extends CommandInterceptor$1 {
+	  constructor(bpmnFactory, eventBus, modeling) {
 	    super(eventBus);
 
 	    /**
-	     * Remove zeebe:CalledDecision if zeebe:TaskDefinition is about to be added.
+	     * Add zeebe:CalledElement extension element with zeebe:propagateAllChildVariables attribute = false
+	     * when creating bpmn:CallActivity.
 	     */
-	    this.preExecute('element.updateModdleProperties' , HIGH_PRIORITY$n, function(context) {
-	      const {
-	        element,
-	        moddleElement,
-	        properties
-	      } = context;
+	    this.postExecuted('shape.create', HIGH_PRIORITY$n, function(context) {
+	      const { shape } = context;
 
-	      if (
-	        !is$1(element, 'bpmn:BusinessRuleTask')
-	        || !is$1(moddleElement, 'bpmn:ExtensionElements')
-	        || !properties.values
-	      ) {
+	      if (!is$1(shape, 'bpmn:CallActivity')) {
 	        return;
 	      }
 
-	      const calledDecision = getCalledDecision$2(element),
-	            taskDefinition = getTaskDefinition$3(element);
+	      const businessObject = getBusinessObject(shape);
 
-	      if (
-	        calledDecision
-	        && !taskDefinition
-	        && properties.values.find(value => is$1(value, 'zeebe:CalledDecision'))
-	        && properties.values.find(value => is$1(value, 'zeebe:TaskDefinition'))
-	      ) {
-	        properties.values = without(properties.values, calledDecision);
-	      }
-	    }, true);
+	      let calledElement = getCalledElement$1(businessObject);
 
-	    /**
-	     * Remove zeebe:TaskDefinition and zeebe:TaskHeaders if zeebe:CalledDecision is about to be added.
-	     */
-	    this.preExecute('element.updateModdleProperties', HIGH_PRIORITY$n, function(context) {
-	      const {
-	        element,
-	        moddleElement,
-	        properties
-	      } = context;
+	      if (!calledElement) {
+	        let extensionElements = businessObject.get('extensionElements');
 
-	      if (
-	        !is$1(element, 'bpmn:BusinessRuleTask')
-	        || !is$1(moddleElement, 'bpmn:ExtensionElements')
-	        || !properties.values
-	      ) {
-	        return;
-	      }
+	        if (!extensionElements) {
+	          extensionElements = createElement$1(
+	            'bpmn:ExtensionElements',
+	            {
+	              values: []
+	            },
+	            businessObject,
+	            bpmnFactory
+	          );
 
-	      const calledDecision = getCalledDecision$2(element),
-	            taskDefinition = getTaskDefinition$3(element),
-	            taskHeaders = getTaskHeaders$1(element);
+	          modeling.updateProperties(shape, { extensionElements });
+	        }
 
-	      if (
-	        !calledDecision
-	        && (taskDefinition || taskHeaders)
-	        && properties.values.find(value => is$1(value, 'zeebe:CalledDecision'))
-	        && properties.values.find(value => is$1(value, 'zeebe:TaskDefinition') || is$1(value, 'zeebe:TaskHeaders'))
-	      ) {
-	        properties.values = without(properties.values, (value) => value === taskDefinition || value === taskHeaders);
+	        calledElement = createElement$1(
+	          'zeebe:CalledElement',
+	          {
+	            propagateAllChildVariables: false
+	          },
+	          extensionElements,
+	          bpmnFactory
+	        );
+
+	        modeling.updateModdleProperties(shape, extensionElements, {
+	          values: [
+	            ...(extensionElements.values || []),
+	            calledElement
+	          ]
+	        });
+	      } else if (!has$1(calledElement, 'propagateAllChildVariables')) {
+
+	        // set zeebe:propagateAllChildVariables to false if zeebe:CalledElement exists
+	        modeling.updateModdleProperties(shape, calledElement, {
+	          propagateAllChildVariables: false
+	        });
 	      }
 	    }, true);
 
 	  }
 	}
 
-	CleanUpBusinessRuleTaskBehavior.$inject = [
-	  'commandStack',
-	  'eventBus'
+	CreateZeebeCallActivityBehavior.$inject = [
+	  'bpmnFactory',
+	  'eventBus',
+	  'modeling'
 	];
 
-
-	// helpers //////////
-
-	function getCalledDecision$2(element) {
-	  const businessObject = getBusinessObject(element);
-
-	  return getExtensionElementsList$1(businessObject, 'zeebe:CalledDecision')[ 0 ];
-	}
-
-	function getTaskDefinition$3(element) {
-	  const businessObject = getBusinessObject(element);
-
-	  return getExtensionElementsList$1(businessObject, 'zeebe:TaskDefinition')[ 0 ];
-	}
-
-	function getTaskHeaders$1(element) {
-	  const businessObject = getBusinessObject(element);
-
-	  return getExtensionElementsList$1(businessObject, 'zeebe:TaskHeaders')[ 0 ];
+	function createCommonjsModule$2(fn, module) {
+		return module = { exports: {} }, fn(module, module.exports), module.exports;
 	}
 
-	const HIGH_PRIORITY$o = 5000;
+	var hat_1$1 = createCommonjsModule$2(function (module) {
+	var hat = module.exports = function (bits, base) {
+	    if (!base) base = 16;
+	    if (bits === undefined) bits = 128;
+	    if (bits <= 0) return '0';
+	    
+	    var digits = Math.log(Math.pow(2, bits)) / Math.log(base);
+	    for (var i = 2; digits === Infinity; i *= 2) {
+	        digits = Math.log(Math.pow(2, bits / i)) / Math.log(base) * i;
+	    }
+	    
+	    var rem = digits - Math.floor(digits);
+	    
+	    var res = '';
+	    
+	    for (var i = 0; i < Math.floor(digits); i++) {
+	        var x = Math.floor(Math.random() * base).toString(base);
+	        res = x + res;
+	    }
+	    
+	    if (rem) {
+	        var b = Math.pow(base, rem);
+	        var x = Math.floor(Math.random() * b).toString(base);
+	        res = x + res;
+	    }
+	    
+	    var parsed = parseInt(res, base);
+	    if (parsed !== Infinity && parsed >= Math.pow(2, bits)) {
+	        return hat(bits, base)
+	    }
+	    else return res;
+	};
 
+	hat.rack = function (bits, base, expandBy) {
+	    var fn = function (data) {
+	        var iters = 0;
+	        do {
+	            if (iters ++ > 10) {
+	                if (expandBy) bits += expandBy;
+	                else throw new Error('too many ID collisions, use more bits')
+	            }
+	            
+	            var id = hat(bits, base);
+	        } while (Object.hasOwnProperty.call(hats, id));
+	        
+	        hats[id] = data;
+	        return id;
+	    };
+	    var hats = fn.hats = {};
+	    
+	    fn.get = function (id) {
+	        return fn.hats[id];
+	    };
+	    
+	    fn.set = function (id, value) {
+	        fn.hats[id] = value;
+	        return fn;
+	    };
+	    
+	    fn.bits = bits || 128;
+	    fn.base = base || 16;
+	    return fn;
+	};
+	});
 
 	/**
-	 * Zeebe BPMN specific behavior for creating boundary events.
+	 * Create a new id generator / cache instance.
+	 *
+	 * You may optionally provide a seed that is used internally.
+	 *
+	 * @param {Seed} seed
 	 */
-	class CreateZeebeBoundaryEventBehavior extends CommandInterceptor$1 {
-	  constructor(bpmnFactory, elementFactory, eventBus) {
-	    super(eventBus);
-
-	    /**
-	     * Replace intermediate catch event with boundary event when attaching it to a shape.
-	     */
-	    this.preExecute('shape.create', HIGH_PRIORITY$o, function(context) {
-	      const {
-	        shape,
-	        host
-	      } = context;
-
-	      const businessObject = getBusinessObject(shape);
-
-	      let attrs = {
-	        cancelActivity: true
-	      };
-
-	      let newBusinessObject,
-	          hostBusinessObject,
-	          boundaryEvent,
-	          eventDefinitions;
-
-	      if (!host || !is$1(shape, 'bpmn:IntermediateCatchEvent')) {
-	        return;
-	      }
-
-	      hostBusinessObject = getBusinessObject(host);
-
-	      attrs = {
-	        ...attrs,
-	        attachedToRef: hostBusinessObject
-	      };
-
-	      eventDefinitions = businessObject.eventDefinitions;
-
-	      newBusinessObject = bpmnFactory.create('bpmn:BoundaryEvent', attrs);
-
-	      boundaryEvent = {
-	        type: 'bpmn:BoundaryEvent',
-	        businessObject: newBusinessObject,
-	      };
-
-	      if (eventDefinitions && eventDefinitions[0]) {
-	        boundaryEvent = {
-	          ...boundaryEvent,
-	          eventDefinitionType: eventDefinitions[0].$type
-	        };
-	      }
-
-	      context.shape = elementFactory.createShape(boundaryEvent);
-
-	    }, true);
 
+	function Ids$1(seed) {
+	  if (!(this instanceof Ids$1)) {
+	    return new Ids$1(seed);
 	  }
-	}
-
-	CreateZeebeBoundaryEventBehavior.$inject = [
-	  'bpmnFactory',
-	  'elementFactory',
-	  'eventBus'
-	];
 
+	  seed = seed || [128, 36, 1];
+	  this._seed = seed.length ? hat_1$1.rack(seed[0], seed[1], seed[2]) : seed;
+	}
 	/**
-	 * Creates a new element and set the parent to it
-	 *
-	 * @method ElementHelper#createElement
+	 * Generate a next id.
 	 *
-	 * @param {String} elementType of the new element
-	 * @param {Object} properties of the new element in key-value pairs
-	 * @param {moddle.object} parent of the new element
-	 * @param {BpmnFactory} factory which creates the new element
+	 * @param {Object} [element] element to bind the id to
 	 *
-	 * @returns {djs.model.Base} element which is created
+	 * @return {String} id
 	 */
-	function createElement$1(elementType, properties, parent, factory) {
-	  var element = factory.create(elementType, properties);
-	  element.$parent = parent;
-
-	  return element;
-	}
 
+	Ids$1.prototype.next = function (element) {
+	  return this._seed(element || true);
+	};
 	/**
-	 * Get zeebe:IoMapping from an element.
+	 * Generate a next id with a given prefix.
 	 *
-	 * @param {djs.model.Base|ModdleElement} element
+	 * @param {Object} [element] element to bind the id to
 	 *
-	 * @return {ModdleElement}
+	 * @return {String} id
 	 */
-	function getIoMapping$1(element) {
-	  const businessObject = getBusinessObject(element);
 
-	  const extensionElements = businessObject.get('extensionElements');
 
-	  if (!extensionElements) {
-	    return;
-	  }
+	Ids$1.prototype.nextPrefixed = function (prefix, element) {
+	  var id;
+
+	  do {
+	    id = prefix + this.next(true);
+	  } while (this.assigned(id)); // claim {prefix}{random}
 
-	  return extensionElements.get('values').find((value) => {
-	    return is$1(value, 'zeebe:IoMapping');
-	  });
-	}
 
+	  this.claim(id, element); // return
+
+	  return id;
+	};
 	/**
-	 * Get zeebe:InputParameters from an element.
-	 *
-	 * @param  {djs.model.Base|ModdleElement} element
+	 * Manually claim an existing id.
 	 *
-	 * @return {Array<ModdleElement>}
+	 * @param {String} id
+	 * @param {String} [element] element the id is claimed by
 	 */
-	function getInputParameters(element) {
-	  const ioMapping = getIoMapping$1(element);
-
-	  if (ioMapping) {
-	    return ioMapping.get('zeebe:inputParameters');
-	  }
 
-	  return [];
-	}
 
+	Ids$1.prototype.claim = function (id, element) {
+	  this._seed.set(id, element || true);
+	};
 	/**
-	 * Get zeebe:OutputParameters from an element.
-	 *
-	 * @param  {djs.model.Base|ModdleElement} element
+	 * Returns true if the given id has already been assigned.
 	 *
-	 * @return {Array<ModdleElement>}
+	 * @param  {String} id
+	 * @return {Boolean}
 	 */
-	function getOutputParameters(element) {
-	  const ioMapping = getIoMapping$1(element);
-
-	  if (ioMapping) {
-	    return ioMapping.get('zeebe:outputParameters');
-	  }
 
-	  return [];
-	}
 
+	Ids$1.prototype.assigned = function (id) {
+	  return this._seed.get(id) || false;
+	};
 	/**
-	 * Get default value for zeebe:propagateAllChildVariables.
-	 *
-	 * @param {djs.model.Base|ModdleElement} element
+	 * Unclaim an id.
 	 *
-	 * @returns {boolean}
+	 * @param  {String} id the id to unclaim
 	 */
-	function getPropagateAllChildVariablesDefault(element) {
-	  if (!is$1(element, 'bpmn:CallActivity')) {
-	    return false;
-	  }
 
-	  const outputParameters = getOutputParameters(element);
-
-	  if (outputParameters) {
-	    return !outputParameters.length;
-	  }
-	}
 
+	Ids$1.prototype.unclaim = function (id) {
+	  delete this._seed.hats[id];
+	};
 	/**
-	 * Get zeebe:CalledElement of an element.
-	 *
-	 * @param {djs.model.Base|ModdleElement} element
-	 *
-	 * @returns {ModdleElement}
-	 */
-	function getCalledElement$1(element) {
-	  const calledElements = getCalledElements$1(element);
-
-	  return calledElements[ 0 ];
-	}
-
-	function getCalledElements$1(element) {
-	  const businessObject = getBusinessObject(element);
-
-	  return getExtensionElementsList$1(businessObject, 'zeebe:CalledElement');
-	}
-
-	/**
-	 * Check whether zeebe:propagateAllChildVariables is set on an element.
-	 * Fall back to default if zeebe:propagateAllChildVariables not set.
-	 *
-	 * @param {djs.model.Base|ModdleElement} element
-	 *
-	 * @returns {boolean}
-	 */
-	function isPropagateAllChildVariables$1(element) {
-	  if (!is$1(element, 'bpmn:CallActivity')) {
-	    return false;
-	  }
-
-	  const businessObject = getBusinessObject(element),
-	        calledElement = getCalledElement$1(businessObject);
-
-	  if (calledElement && has(calledElement, 'propagateAllChildVariables')) {
-	    return calledElement.get('propagateAllChildVariables') || false;
-	  } else {
-	    return getPropagateAllChildVariablesDefault(element);
-	  }
-	}
-
-	const HIGH_PRIORITY$p = 5000;
-
-
-	/**
-	 * Zeebe BPMN specific behavior for creating call activities.
+	 * Clear all claimed ids.
 	 */
-	class CreateZeebeCallActivityBehavior extends CommandInterceptor$1 {
-	  constructor(bpmnFactory, eventBus, modeling) {
-	    super(eventBus);
-
-	    /**
-	     * Add zeebe:CalledElement extension element with zeebe:propagateAllChildVariables attribute = false
-	     * when creating bpmn:CallActivity.
-	     */
-	    this.postExecuted('shape.create', HIGH_PRIORITY$p, function(context) {
-	      const { shape } = context;
-
-	      if (!is$1(shape, 'bpmn:CallActivity')) {
-	        return;
-	      }
-
-	      const businessObject = getBusinessObject(shape);
-
-	      let calledElement = getCalledElement$1(businessObject);
-
-	      if (!calledElement) {
-	        let extensionElements = businessObject.get('extensionElements');
-
-	        if (!extensionElements) {
-	          extensionElements = createElement$1(
-	            'bpmn:ExtensionElements',
-	            {
-	              values: []
-	            },
-	            businessObject,
-	            bpmnFactory
-	          );
-
-	          modeling.updateProperties(shape, { extensionElements });
-	        }
-
-	        calledElement = createElement$1(
-	          'zeebe:CalledElement',
-	          {
-	            propagateAllChildVariables: false
-	          },
-	          extensionElements,
-	          bpmnFactory
-	        );
 
-	        modeling.updateModdleProperties(shape, extensionElements, {
-	          values: [
-	            ...(extensionElements.values || []),
-	            calledElement
-	          ]
-	        });
-	      } else if (!has(calledElement, 'propagateAllChildVariables')) {
 
-	        // set zeebe:propagateAllChildVariables to false if zeebe:CalledElement exists
-	        modeling.updateModdleProperties(shape, calledElement, {
-	          propagateAllChildVariables: false
-	        });
-	      }
-	    }, true);
+	Ids$1.prototype.clear = function () {
+	  var hats = this._seed.hats,
+	      id;
 
+	  for (id in hats) {
+	    this.unclaim(id);
 	  }
-	}
+	};
 
-	CreateZeebeCallActivityBehavior.$inject = [
-	  'bpmnFactory',
-	  'eventBus',
-	  'modeling'
-	];
+	const ids$2 = new Ids$1([ 32, 32, 1 ]);
 
 	/**
-	 * generate a semantic id with given prefix
+	 * Get ID with prefix.
 	 */
-	function nextId$1(prefix) {
-	  const ids = new Ids([ 32,32,1 ]);
-
-	  return ids.nextPrefixed(prefix);
+	function getPrefixedId(prefix) {
+	  return ids$2.nextPrefixed(prefix);
 	}
 
 	const USER_TASK_FORM_PREFIX$1 = 'UserTaskForm_';
@@ -76212,7 +76103,7 @@
 	}
 
 	function createFormId() {
-	  return nextId$1(USER_TASK_FORM_PREFIX$1);
+	  return getPrefixedId(USER_TASK_FORM_PREFIX$1);
 	}
 
 	function createFormKey(formId) {
@@ -76231,7 +76122,7 @@
 	function findUserTaskForm(formKey, rootElement) {
 	  const userTaskForms = getExtensionElementsList$1(rootElement, 'zeebe:UserTaskForm');
 
-	  return find(userTaskForms, (userTaskForm) => {
+	  return find$1(userTaskForms, (userTaskForm) => {
 	    const id = userTaskForm.get('zeebe:id');
 
 	    return createFormKey(id) === formKey;
@@ -76390,7 +76281,7 @@
 	  return parent;
 	}
 
-	const HIGH_PRIORITY$q = 5000;
+	const HIGH_PRIORITY$o = 5000;
 
 
 	/**
@@ -76401,7 +76292,7 @@
 	  constructor(commandStack, eventBus) {
 	    super(eventBus);
 
-	    this.postExecuted('element.updateModdleProperties' , HIGH_PRIORITY$q, function(context) {
+	    this.postExecuted('element.updateModdleProperties' , HIGH_PRIORITY$o, function(context) {
 	      const {
 	        element,
 	        moddleElement
@@ -76415,8 +76306,8 @@
 
 	      if (
 	        is$1(element, 'bpmn:UserTask')
-	          && isUndefined(assignmentDefinition.get('zeebe:assignee'))
-	          && isUndefined(assignmentDefinition.get('zeebe:candidateGroups'))
+	          && isUndefined$3(assignmentDefinition.get('zeebe:assignee'))
+	          && isUndefined$3(assignmentDefinition.get('zeebe:candidateGroups'))
 	      ) {
 	        const businessObject = getBusinessObject(element);
 
@@ -76432,7 +76323,7 @@
 	  'eventBus'
 	];
 
-	const HIGH_PRIORITY$r = 5000;
+	const HIGH_PRIORITY$p = 5000;
 
 
 	/**
@@ -76450,7 +76341,7 @@
 	     * Remove zeebe:Output elements if zeebe:propagateAllChildVariables is set to true.
 	     * Remove zeebe:IoMapping extension element if empty.
 	     */
-	    this.postExecute('element.updateModdleProperties' , HIGH_PRIORITY$r, function(context) {
+	    this.postExecute('element.updateModdleProperties' , HIGH_PRIORITY$p, function(context) {
 	      const {
 	        element,
 	        moddleElement,
@@ -76490,7 +76381,7 @@
 	     * Set zeebe:propagateAllChildVariables of zeebe:CalledElement to false if
 	     * zeebe:Output or zeebe:IoMapping with zeebe:Output is added.
 	     */
-	    this.preExecute('element.updateModdleProperties' , HIGH_PRIORITY$r, function(context) {
+	    this.preExecute('element.updateModdleProperties' , HIGH_PRIORITY$p, function(context) {
 	      const {
 	        element,
 	        moddleElement,
@@ -76547,29 +76438,21 @@
 	  'modeling'
 	];
 
-	var zeebeModelingBehaviors = {
+	var behaviorsModule = {
 	  __init__: [
 	    'cleanUpBusinessRuleTaskBehavior',
-	    'createZeebeBoundaryEventBehavior',
 	    'createZeebeCallActivityBehavior',
 	    'formDefinitionBehavior',
 	    'removeAssignmentDefinitionBehavior',
 	    'updatePropagateAllChildVariablesBehavior'
 	  ],
 	  cleanUpBusinessRuleTaskBehavior: [ 'type', CleanUpBusinessRuleTaskBehavior ],
-	  createZeebeBoundaryEventBehavior: [ 'type', CreateZeebeBoundaryEventBehavior ],
 	  createZeebeCallActivityBehavior: [ 'type', CreateZeebeCallActivityBehavior ],
 	  formDefinitionBehavior: [ 'type', FormDefinitionBehavior ],
 	  removeAssignmentDefinitionBehavior: [ 'type', CleanUpBusinessRuleTaskBehavior$1 ],
 	  updatePropagateAllChildVariablesBehavior: [ 'type', UpdatePropagateAllChildVariablesBehavior ]
 	};
 
-	var modelingModule = {
-	  __depends__: [
-	    zeebeModelingBehaviors
-	  ]
-	};
-
 	const PALETTE_OPTIONS = [
 	  'hand-tool',
 	  'lasso-tool',
@@ -76677,10 +76560,6 @@
 	  zeebeContextPadProvider: [ 'type', ContextPadProvider$1 ],
 	};
 
-	var drilldownModule = {
-	  drilldownOverlayBehavior: [ 'value', null ],
-	};
-
 	const REPLACE_OPTIONS = [
 	  'replace-with-service-task',
 	  'replace-with-script-task',
@@ -76790,124 +76669,656 @@
 	  zeebeReplaceMenuProvider: [ 'type', ReplaceMenuProvider$1 ]
 	};
 
-	const HIGH_PRIORITY$s = 5000;
+	const HIGH_PRIORITY$q = 5000;
+
+	/**
+	 * Zeebe rule provider that allows to create boundary events with catch events
+	 *
+	 * See {@link CustomRules} for the default implementation
+	 * of BPMN 2.0 modeling rules provided by bpmn-js.
+	 *
+	 * @param {EventBus} eventBus
+	 */
+	class CustomRules extends BpmnRules {
+
+	  constructor(eventBus) {
+	    super(eventBus);
+	  }
+
+	  init() {
+	    super.init();
+	    this.addRule('shape.attach', HIGH_PRIORITY$q,(context) => {
+	      return this.canAttach(
+	        context.shape,
+	        context.target,
+	        null,
+	        context.position);
+	    });
+	  }
+
+	  canAttach(elements, target, source, position) {
+	    function isBoundaryEvent(element) {
+	      return !isLabel(element) && is$1(element, 'bpmn:BoundaryEvent');
+	    }
+
+	    /**
+	     * In Zeebe we treat IntermediateCatchEvents as boundary events too,
+	     * this must be reflected in the rules.
+	     */
+	    function isBoundaryCandidate(element) {
+	      return isBoundaryEvent(element) || (
+	        (
+	          is$1(element, 'bpmn:IntermediateCatchEvent') ||
+	          is$1(element, 'bpmn:IntermediateThrowEvent')
+	        ) && !element.parent
+	      );
+	    }
+
+	    function isForCompensation(e) {
+	      return getBusinessObject(e).isForCompensation;
+	    }
+
+	    function isReceiveTaskAfterEventBasedGateway(element) {
+	      return (
+	        is$1(element, 'bpmn:ReceiveTask') &&
+	        find(element.incoming, function(incoming) {
+	          return is$1(incoming.source, 'bpmn:EventBasedGateway');
+	        })
+	      );
+	    }
+
+	    if (!Array.isArray(elements)) {
+	      elements = [ elements ];
+	    }
+
+	    // disallow appending as boundary event
+	    if (source) {
+	      return false;
+	    }
+
+	    // only (re-)attach one element at a time
+	    if (elements.length !== 1) {
+	      return false;
+	    }
+
+	    const element = elements[0];
+
+	    // do not attach labels
+	    if (isLabel(element)) {
+	      return false;
+	    }
+
+	    // only handle boundary events
+	    if (!isBoundaryCandidate(element)) {
+	      return false;
+	    }
+
+	    // allow default move operation
+	    if (!target) {
+	      return true;
+	    }
+
+	    // disallow drop on event sub processes
+	    if (isEventSubProcess(target)) {
+	      return false;
+	    }
+
+	    // only allow drop on non compensation activities
+	    if (!is$1(target, 'bpmn:Activity') || isForCompensation(target)) {
+	      return false;
+	    }
+
+	    // only attach to subprocess border
+	    if (position && !getBoundaryAttachment(position, target)) {
+	      return false;
+	    }
+
+	    // do not attach on receive tasks after event based gateways
+	    if (isReceiveTaskAfterEventBasedGateway(target)) {
+	      return false;
+	    }
+
+	    return 'attach';
+	  }
+	}
+
+	CustomRules.$inject = [ 'eventBus' ];
+
+	var rulesModule = {
+	  __init__: [ 'bpmnRules' ],
+	  bpmnRules: [ 'type', CustomRules ]
+	};
+
+	var isFunction$2 = require$$0.isFunction,
+	    isObject$1 = require$$0.isObject,
+	    some$1 = require$$0.some;
+
+	var WILDCARD = '*';
+
+	const zeebeServiceTaskProperties = [ 'zeebe:TaskDefinition', 'zeebe:Subscription', 'zeebe:TaskHeaders','zeebe:LoopCharacteristics','zeebe:Input' ];
+
+	function ZeebeModdleExtension(eventBus) {
+
+	  var self = this;
+
+	  eventBus.on('moddleCopy.canCopyProperty', function(context) {
+	    var property = context.property,
+	        parent = context.parent;
+
+	    return self.canCopyProperty(property, parent);
+	  });
+	}
+
+	ZeebeModdleExtension.$inject = [ 'eventBus' ];
+
+	ZeebeModdleExtension.prototype.canCopyProperty = function(property, parent) {
+
+	  // (1) check if property is allowed in parent
+	  if (isObject$1(property) && !isAllowedInParent(property, parent)) {
+	    return false;
+	  }
+
+	  // (2) check for specific scenarios
+	  if (!this.canHostServiceTaskLikeProperties(property, parent)) {
+	    return false;
+	  }
+	};
+
+	ZeebeModdleExtension.prototype.canHostServiceTaskLikeProperties = function(property, parent) {
+
+	  if (isAllowedInZeebeServiceTask(property)) {
+
+	    var serviceTaskLike = getParent$2(parent, 'bpmn:IntermediateThrowEvent') || getParent$2(parent, 'bpmn:EndEvent');
+
+	    if (serviceTaskLike) {
+	      return isMessageEvent(serviceTaskLike);
+	    }
+	  }
+
+	  return true;
+	};
+
+	var extension = ZeebeModdleExtension;
+
+	// helpers //////////
+
+	function is$3(element, type) {
+	  return element && isFunction$2(element.$instanceOf) && element.$instanceOf(type);
+	}
+
+	function getParent$2(element, type) {
+	  if (!type) {
+	    return element.$parent;
+	  }
+
+	  if (is$3(element, type)) {
+	    return element;
+	  }
+
+	  if (!element.$parent) {
+	    return;
+	  }
+
+	  return getParent$2(element.$parent, type);
+	}
+
+	function isAllowedInParent(property, parent) {
+
+	  // (1) find property descriptor
+	  var descriptor = property.$type && property.$model.getTypeDescriptor(property.$type);
+
+	  var allowedIn = descriptor && descriptor.meta && descriptor.meta.allowedIn;
+
+	  if (!allowedIn || isWildcard(allowedIn)) {
+	    return true;
+	  }
+
+	  // (2) check if property has parent of allowed type
+	  return some$1(allowedIn, function(type) {
+	    return getParent$2(parent, type);
+	  });
+	}
+
+	function isWildcard(allowedIn) {
+	  return allowedIn.indexOf(WILDCARD) !== -1;
+	}
+
+	function isMessageEvent(event) {
+	  const eventDefinitions = event.get('eventDefinitions');
+
+	  return eventDefinitions.some(function(def) {
+	    return is$3(def, 'bpmn:MessageEventDefinition');
+	  });
+	}
+
+	// check if property is allowed in ZeebeServiceTask but not for none events
+	function isAllowedInZeebeServiceTask(property) {
+	  return zeebeServiceTaskProperties.some(function(propertyType) {
+	    return is$3(property, propertyType);
+	  });
+	}
+
+	var lib = {
+	  __init__: [ 'zeebeModdleExtension' ],
+	  zeebeModdleExtension: [ 'type', extension ]
+	};
+
+	var DEFAULT_RENDER_PRIORITY$2 = 1000;
+
+	/**
+	 * The base implementation of shape and connection renderers.
+	 *
+	 * @param {EventBus} eventBus
+	 * @param {number} [renderPriority=1000]
+	 */
+	function BaseRenderer$1(eventBus, renderPriority) {
+	  var self = this;
+
+	  renderPriority = renderPriority || DEFAULT_RENDER_PRIORITY$2;
+
+	  eventBus.on([ 'render.shape', 'render.connection' ], renderPriority, function(evt, context) {
+	    var type = evt.type,
+	        element = context.element,
+	        visuals = context.gfx,
+	        attrs = context.attrs;
+
+	    if (self.canRender(element)) {
+	      if (type === 'render.shape') {
+	        return self.drawShape(visuals, element, attrs);
+	      } else {
+	        return self.drawConnection(visuals, element, attrs);
+	      }
+	    }
+	  });
+
+	  eventBus.on([ 'render.getShapePath', 'render.getConnectionPath' ], renderPriority, function(evt, element) {
+	    if (self.canRender(element)) {
+	      if (evt.type === 'render.getShapePath') {
+	        return self.getShapePath(element);
+	      } else {
+	        return self.getConnectionPath(element);
+	      }
+	    }
+	  });
+	}
+
+	/**
+	 * Should check whether *this* renderer can render
+	 * the element/connection.
+	 *
+	 * @param {element} element
+	 *
+	 * @returns {boolean}
+	 */
+	BaseRenderer$1.prototype.canRender = function() {};
+
+	/**
+	 * Provides the shape's snap svg element to be drawn on the `canvas`.
+	 *
+	 * @param {djs.Graphics} visuals
+	 * @param {Shape} shape
+	 *
+	 * @returns {Snap.svg} [returns a Snap.svg paper element ]
+	 */
+	BaseRenderer$1.prototype.drawShape = function() {};
+
+	/**
+	 * Provides the shape's snap svg element to be drawn on the `canvas`.
+	 *
+	 * @param {djs.Graphics} visuals
+	 * @param {Connection} connection
+	 *
+	 * @returns {Snap.svg} [returns a Snap.svg paper element ]
+	 */
+	BaseRenderer$1.prototype.drawConnection = function() {};
+
+	/**
+	 * Gets the SVG path of a shape that represents it's visual bounds.
+	 *
+	 * @param {Shape} shape
+	 *
+	 * @return {string} svg path
+	 */
+	BaseRenderer$1.prototype.getShapePath = function() {};
+
+	/**
+	 * Gets the SVG path of a connection that represents it's visual bounds.
+	 *
+	 * @param {Connection} connection
+	 *
+	 * @return {string} svg path
+	 */
+	BaseRenderer$1.prototype.getConnectionPath = function() {};
+
+	function ensureImported$1(element, target) {
+
+	  if (element.ownerDocument !== target.ownerDocument) {
+	    try {
+	      // may fail on webkit
+	      return target.ownerDocument.importNode(element, true);
+	    } catch (e) {
+	      // ignore
+	    }
+	  }
+
+	  return element;
+	}
+
+	/**
+	 * appendTo utility
+	 */
+
+	/**
+	 * Append a node to a target element and return the appended node.
+	 *
+	 * @param  {SVGElement} element
+	 * @param  {SVGElement} target
+	 *
+	 * @return {SVGElement} the appended node
+	 */
+	function appendTo$1(element, target) {
+	  return target.appendChild(ensureImported$1(element, target));
+	}
+
+	/**
+	 * append utility
+	 */
+
+	/**
+	 * Append a node to an element
+	 *
+	 * @param  {SVGElement} element
+	 * @param  {SVGElement} node
+	 *
+	 * @return {SVGElement} the element
+	 */
+	function append$1(target, node) {
+	  appendTo$1(node, target);
+	  return target;
+	}
+
+	/**
+	 * attribute accessor utility
+	 */
+
+	var LENGTH_ATTR$1 = 2;
+
+	var CSS_PROPERTIES$1 = {
+	  'alignment-baseline': 1,
+	  'baseline-shift': 1,
+	  'clip': 1,
+	  'clip-path': 1,
+	  'clip-rule': 1,
+	  'color': 1,
+	  'color-interpolation': 1,
+	  'color-interpolation-filters': 1,
+	  'color-profile': 1,
+	  'color-rendering': 1,
+	  'cursor': 1,
+	  'direction': 1,
+	  'display': 1,
+	  'dominant-baseline': 1,
+	  'enable-background': 1,
+	  'fill': 1,
+	  'fill-opacity': 1,
+	  'fill-rule': 1,
+	  'filter': 1,
+	  'flood-color': 1,
+	  'flood-opacity': 1,
+	  'font': 1,
+	  'font-family': 1,
+	  'font-size': LENGTH_ATTR$1,
+	  'font-size-adjust': 1,
+	  'font-stretch': 1,
+	  'font-style': 1,
+	  'font-variant': 1,
+	  'font-weight': 1,
+	  'glyph-orientation-horizontal': 1,
+	  'glyph-orientation-vertical': 1,
+	  'image-rendering': 1,
+	  'kerning': 1,
+	  'letter-spacing': 1,
+	  'lighting-color': 1,
+	  'marker': 1,
+	  'marker-end': 1,
+	  'marker-mid': 1,
+	  'marker-start': 1,
+	  'mask': 1,
+	  'opacity': 1,
+	  'overflow': 1,
+	  'pointer-events': 1,
+	  'shape-rendering': 1,
+	  'stop-color': 1,
+	  'stop-opacity': 1,
+	  'stroke': 1,
+	  'stroke-dasharray': 1,
+	  'stroke-dashoffset': 1,
+	  'stroke-linecap': 1,
+	  'stroke-linejoin': 1,
+	  'stroke-miterlimit': 1,
+	  'stroke-opacity': 1,
+	  'stroke-width': LENGTH_ATTR$1,
+	  'text-anchor': 1,
+	  'text-decoration': 1,
+	  'text-rendering': 1,
+	  'unicode-bidi': 1,
+	  'visibility': 1,
+	  'word-spacing': 1,
+	  'writing-mode': 1
+	};
+
+
+	function getAttribute$1(node, name) {
+	  if (CSS_PROPERTIES$1[name]) {
+	    return node.style[name];
+	  } else {
+	    return node.getAttributeNS(null, name);
+	  }
+	}
+
+	function setAttribute$1(node, name, value) {
+	  var hyphenated = name.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+
+	  var type = CSS_PROPERTIES$1[hyphenated];
+
+	  if (type) {
+	    // append pixel unit, unless present
+	    if (type === LENGTH_ATTR$1 && typeof value === 'number') {
+	      value = String(value) + 'px';
+	    }
+
+	    node.style[hyphenated] = value;
+	  } else {
+	    node.setAttributeNS(null, name, value);
+	  }
+	}
+
+	function setAttributes$1(node, attrs) {
+
+	  var names = Object.keys(attrs), i, name;
+
+	  for (i = 0, name; (name = names[i]); i++) {
+	    setAttribute$1(node, name, attrs[name]);
+	  }
+	}
+
+	/**
+	 * Gets or sets raw attributes on a node.
+	 *
+	 * @param  {SVGElement} node
+	 * @param  {Object} [attrs]
+	 * @param  {String} [name]
+	 * @param  {String} [value]
+	 *
+	 * @return {String}
+	 */
+	function attr$2(node, name, value) {
+	  if (typeof name === 'string') {
+	    if (value !== undefined) {
+	      setAttribute$1(node, name, value);
+	    } else {
+	      return getAttribute$1(node, name);
+	    }
+	  } else {
+	    setAttributes$1(node, name);
+	  }
+
+	  return node;
+	}
+
+	var ns$1 = {
+	  svg: 'http://www.w3.org/2000/svg'
+	};
+
+	/**
+	 * DOM parsing utility
+	 */
+
+	var SVG_START$1 = '<svg xmlns="' + ns$1.svg + '"';
+
+	function parse$3(svg) {
+
+	  var unwrap = false;
+
+	  // ensure we import a valid svg document
+	  if (svg.substring(0, 4) === '<svg') {
+	    if (svg.indexOf(ns$1.svg) === -1) {
+	      svg = SVG_START$1 + svg.substring(4);
+	    }
+	  } else {
+	    // namespace svg
+	    svg = SVG_START$1 + '>' + svg + '</svg>';
+	    unwrap = true;
+	  }
+
+	  var parsed = parseDocument$1(svg);
+
+	  if (!unwrap) {
+	    return parsed;
+	  }
+
+	  var fragment = document.createDocumentFragment();
+
+	  var parent = parsed.firstChild;
+
+	  while (parent.firstChild) {
+	    fragment.appendChild(parent.firstChild);
+	  }
+
+	  return fragment;
+	}
+
+	function parseDocument$1(svg) {
+
+	  var parser;
+
+	  // parse
+	  parser = new DOMParser();
+	  parser.async = false;
+
+	  return parser.parseFromString(svg, 'text/xml');
+	}
+
+	/**
+	 * Create utility for SVG elements
+	 */
+
+
+	/**
+	 * Create a specific type from name or SVG markup.
+	 *
+	 * @param {String} name the name or markup of the element
+	 * @param {Object} [attrs] attributes to set on the element
+	 *
+	 * @returns {SVGElement}
+	 */
+	function create$2(name, attrs) {
+	  var element;
+
+	  if (name.charAt(0) === '<') {
+	    element = parse$3(name).firstChild;
+	    element = document.importNode(element, true);
+	  } else {
+	    element = document.createElementNS(ns$1.svg, name);
+	  }
+
+	  if (attrs) {
+	    attr$2(element, attrs);
+	  }
+
+	  return element;
+	}
 
 	/**
-	 * Zeebe rule provider that allows to create boundary events with catch events
-	 *
-	 * See {@link CustomRules} for the default implementation
-	 * of BPMN 2.0 modeling rules provided by bpmn-js.
-	 *
-	 * @param {EventBus} eventBus
+	 * Geometry helpers
 	 */
-	class CustomRules extends BpmnRules {
 
-	  constructor(eventBus) {
-	    super(eventBus);
-	  }
+	// fake node used to instantiate svg geometry elements
+	create$2('svg');
 
-	  init() {
-	    super.init();
-	    this.addRule('shape.attach', HIGH_PRIORITY$s,(context) => {
-	      return this.canAttach(
-	        context.shape,
-	        context.target,
-	        null,
-	        context.position);
-	    });
-	  }
+	function getModelerTemplateIcon(element) {
+	  var modelerTemplateIcon = getBusinessObject(element).get('zeebe:modelerTemplateIcon');
+	  return modelerTemplateIcon;
+	}
 
-	  canAttach(elements, target, source, position) {
-	    function isBoundaryEvent(element) {
-	      return !isLabel(element) && is$1(element, 'bpmn:BoundaryEvent');
-	    }
+	var HIGH_PRIORITY$r = 1250;
 
-	    /**
-	     * In Zeebe we treat IntermediateCatchEvents as boundary events too,
-	     * this must be reflected in the rules.
-	     */
-	    function isBoundaryCandidate(element) {
-	      return isBoundaryEvent(element) || (
-	        (
-	          is$1(element, 'bpmn:IntermediateCatchEvent') ||
-	          is$1(element, 'bpmn:IntermediateThrowEvent')
-	        ) && !element.parent
-	      );
-	    }
 
-	    function isForCompensation(e) {
-	      return getBusinessObject(e).isForCompensation;
-	    }
+	function IconsRenderer(
+	    bpmnRenderer,
+	    eventBus
+	) {
+	  this._bpmnRenderer = bpmnRenderer;
 
-	    function isReceiveTaskAfterEventBasedGateway(element) {
-	      return (
-	        is$1(element, 'bpmn:ReceiveTask') &&
-	        find(element.incoming, function(incoming) {
-	          return is$1(incoming.source, 'bpmn:EventBasedGateway');
-	        })
-	      );
-	    }
+	  BaseRenderer$1.call(this, eventBus, HIGH_PRIORITY$r);
+	}
 
-	    if (!Array.isArray(elements)) {
-	      elements = [ elements ];
-	    }
+	inherits_browser(IconsRenderer, BaseRenderer$1);
 
-	    // disallow appending as boundary event
-	    if (source) {
-	      return false;
-	    }
+	IconsRenderer.prototype.canRender = function(element) {
 
-	    // only (re-)attach one element at a time
-	    if (elements.length !== 1) {
-	      return false;
-	    }
+	  if (isLabel(element)) {
+	    return false;
+	  }
 
-	    const element = elements[0];
+	  return (
+	    is$1(element, 'bpmn:Task') &&
+	    !!getModelerTemplateIcon(element)
+	  );
+	};
 
-	    // do not attach labels
-	    if (isLabel(element)) {
-	      return false;
-	    }
+	IconsRenderer.prototype.drawShape = function(parentGfx, element) {
 
-	    // only handle boundary events
-	    if (!isBoundaryCandidate(element)) {
-	      return false;
-	    }
+	  var renderer = this._bpmnRenderer.handlers['bpmn:Task'];
 
-	    // allow default move operation
-	    if (!target) {
-	      return true;
-	    }
+	  var gfx = renderer(parentGfx, element);
 
-	    // disallow drop on event sub processes
-	    if (isEventSubProcess(target)) {
-	      return false;
-	    }
+	  var modelerTemplateIcon = getModelerTemplateIcon(element);
 
-	    // only allow drop on non compensation activities
-	    if (!is$1(target, 'bpmn:Activity') || isForCompensation(target)) {
-	      return false;
-	    }
+	  var icon = create$2('image');
+	  attr$2(icon, {
+	    href: modelerTemplateIcon,
+	    x: 4,
+	    y: 4
+	  });
 
-	    // only attach to subprocess border
-	    if (position && !getBoundaryAttachment(position, target)) {
-	      return false;
-	    }
+	  append$1(parentGfx, icon);
 
-	    // do not attach on receive tasks after event based gateways
-	    if (isReceiveTaskAfterEventBasedGateway(target)) {
-	      return false;
-	    }
+	  return gfx;
+	};
 
-	    return 'attach';
-	  }
-	}
+	IconsRenderer.$inject = [
+	  'bpmnRenderer',
+	  'eventBus'
+	];
 
-	CustomRules.$inject = [ 'eventBus' ];
+	var iconRendererModule = {
+	  __init__: [ 'elementTemplatesIconsRenderer' ],
+	  elementTemplatesIconsRenderer: [ 'type', IconsRenderer ]
+	};
 
-	var rulesModule = {
-	  __init__: [ 'bpmnRules' ],
-	  bpmnRules: [ 'type', CustomRules ]
+	var drilldownModule = {
+	  drilldownOverlayBehavior: [ 'value', null ],
 	};
 
 	var name$7 = "zeebe";
@@ -77274,118 +77685,13 @@
 		types: types$6
 	};
 
-	var isFunction$1 = require$$0.isFunction,
-	    isObject$1 = require$$0.isObject,
-	    some$1 = require$$0.some;
-
-	var WILDCARD = '*';
-
-	const zeebeServiceTaskProperties = [ 'zeebe:TaskDefinition', 'zeebe:Subscription', 'zeebe:TaskHeaders','zeebe:LoopCharacteristics','zeebe:Input' ];
-
-	function ZeebeModdleExtension(eventBus) {
-
-	  var self = this;
-
-	  eventBus.on('moddleCopy.canCopyProperty', function(context) {
-	    var property = context.property,
-	        parent = context.parent;
-
-	    return self.canCopyProperty(property, parent);
-	  });
-	}
-
-	ZeebeModdleExtension.$inject = [ 'eventBus' ];
-
-	ZeebeModdleExtension.prototype.canCopyProperty = function(property, parent) {
-
-	  // (1) check if property is allowed in parent
-	  if (isObject$1(property) && !isAllowedInParent(property, parent)) {
-	    return false;
-	  }
-
-	  // (2) check for specific scenarios
-	  if (!this.canHostServiceTaskLikeProperties(property, parent)) {
-	    return false;
-	  }
-	};
-
-	ZeebeModdleExtension.prototype.canHostServiceTaskLikeProperties = function(property, parent) {
-
-	  if (isAllowedInZeebeServiceTask(property)) {
-
-	    var serviceTaskLike = getParent$2(parent, 'bpmn:IntermediateThrowEvent') || getParent$2(parent, 'bpmn:EndEvent');
-
-	    if (serviceTaskLike) {
-	      return isMessageEvent(serviceTaskLike);
-	    }
-	  }
-
-	  return true;
-	};
-
-	var extension = ZeebeModdleExtension;
-
-	// helpers //////////
-
-	function is$3(element, type) {
-	  return element && isFunction$1(element.$instanceOf) && element.$instanceOf(type);
-	}
-
-	function getParent$2(element, type) {
-	  if (!type) {
-	    return element.$parent;
-	  }
-
-	  if (is$3(element, type)) {
-	    return element;
-	  }
-
-	  if (!element.$parent) {
-	    return;
-	  }
-
-	  return getParent$2(element.$parent, type);
-	}
-
-	function isAllowedInParent(property, parent) {
-
-	  // (1) find property descriptor
-	  var descriptor = property.$type && property.$model.getTypeDescriptor(property.$type);
-
-	  var allowedIn = descriptor && descriptor.meta && descriptor.meta.allowedIn;
-
-	  if (!allowedIn || isWildcard(allowedIn)) {
-	    return true;
-	  }
-
-	  // (2) check if property has parent of allowed type
-	  return some$1(allowedIn, function(type) {
-	    return getParent$2(parent, type);
-	  });
-	}
-
-	function isWildcard(allowedIn) {
-	  return allowedIn.indexOf(WILDCARD) !== -1;
-	}
-
-	function isMessageEvent(event) {
-	  const eventDefinitions = event.get('eventDefinitions');
-
-	  return eventDefinitions.some(function(def) {
-	    return is$3(def, 'bpmn:MessageEventDefinition');
-	  });
-	}
-
-	// check if property is allowed in ZeebeServiceTask but not for none events
-	function isAllowedInZeebeServiceTask(property) {
-	  return zeebeServiceTaskProperties.some(function(propertyType) {
-	    return is$3(property, propertyType);
-	  });
-	}
+	const commonModules = [
+	  drilldownModule,
+	  iconRendererModule
+	];
 
-	var lib = {
-	  __init__: [ 'zeebeModdleExtension' ],
-	  zeebeModdleExtension: [ 'type', extension ]
+	const commonModdleExtensions = {
+	  zeebe: zeebeModdle
 	};
 
 	/**
@@ -77397,7 +77703,7 @@
 	  options = {
 	    ...options,
 	    moddleExtensions: {
-	      zeebe: zeebeModdle,
+	      ...commonModdleExtensions,
 	      ...options.moddleExtensions
 	    },
 	    propertiesPanel: {
@@ -77412,17 +77718,16 @@
 	inherits_browser(Modeler$2, Modeler$1);
 
 	Modeler$2.prototype._camundaCloudModules = [
-	  modelingModule,
+	  ...commonModules,
+	  behaviorsModule,
 	  contextPadModule,
 	  DisabledCollapsedSubprocessPopupProviderModule,
-	  drilldownModule,
 	  paletteModule,
 	  popupMenuModule,
 	  rulesModule,
 	  zeebePropertiesProviderModule,
 	  index$1$1,
-	  lib,
-	  iconRendererModule
+	  lib
 	];
 
 	Modeler$2.prototype._modules = [].concat(