camunda-bpmn-js 0.13.0 → 0.14.0

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

@@ -15994,7 +15994,7 @@
 	}
 
 	/**
-	 * Returns all diagrams in the same hirarchy as the requested diagram.
+	 * Returns all diagrams in the same hierarchy as the requested diagram.
 	 * Includes all parent and sub process diagrams.
 	 *
 	 * @param {Array} definitions
@@ -20089,7 +20089,7 @@
 	  });
 	}
 
-	var translate$2 = {
+	var translateModule = {
 	  translate: [ 'value', translate$1 ]
 	};
 
@@ -20570,7 +20570,7 @@
 
 	var ImportModule = {
 	  __depends__: [
-	    translate$2
+	    translateModule
 	  ],
 	  bpmnImporter: [ 'type', BpmnImporter ]
 	};
@@ -22950,7 +22950,7 @@
 	      collapsedElements.push(bo);
 	    }
 
-	    if (is$1(parent, 'bpmn:SubProcess') && parent !== plane.bpmnElement) {
+	    if (shouldMoveToPlane(bo, plane)) {
 
 	      // don't change the array while we iterate over it
 	      elementsToMove.push({ diElement: diElement, parent: parent });
@@ -23039,7 +23039,7 @@
 	SubprocessCompatibility.$inject = [ 'eventBus', 'moddle' ];
 
 
-	// helpers
+	// helpers //////////////////////////
 
 	function findRootDiagram(element) {
 	  if (is$1(element, 'bpmndi:BPMNDiagram')) {
@@ -23071,6 +23071,23 @@
 	  return asBounds(planeTrbl);
 	}
 
+	function shouldMoveToPlane(bo, plane) {
+	  var parent = bo.$parent;
+
+	  // don't move elements that are already on the plane
+	  if (!is$1(parent, 'bpmn:SubProcess') || parent === plane.bpmnElement) {
+	    return false;
+	  }
+
+	  // dataAssociations are children of the subprocess but rendered on process level
+	  // cf. https://github.com/bpmn-io/bpmn-js/issues/1619
+	  if (isAny(bo, ['bpmn:DataInputAssociation', 'bpmn:DataOutputAssociation'])) {
+	    return false;
+	  }
+
+	  return true;
+	}
+
 	var LOW_PRIORITY$3 = 250;
 	var ARROW_DOWN_SVG = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M4.81801948,3.50735931 L10.4996894,9.1896894 L10.5,4 L12,4 L12,12 L4,12 L4,10.5 L9.6896894,10.4996894 L3.75735931,4.56801948 C3.46446609,4.27512627 3.46446609,3.80025253 3.75735931,3.50735931 C4.05025253,3.21446609 4.52512627,3.21446609 4.81801948,3.50735931 Z"/></svg>';
 
@@ -23146,7 +23163,7 @@
 	    }, true);
 
 
-	  eventBus.on('import.done', function() {
+	  eventBus.on('import.render.complete', function() {
 	    elementRegistry.filter(function(e) {
 	      return self.canDrillDown(e);
 	    }).map(function(el) {
@@ -23311,7 +23328,7 @@
 	// modules the viewer is composed of
 	Viewer.prototype._modules = [
 	  CoreModule$1,
-	  translate$2,
+	  translateModule,
 	  SelectionModule,
 	  OverlaysModule,
 	  DrilldownModdule
@@ -31777,537 +31794,6 @@
 	  connectionPreview: [ 'type', ConnectionPreview ]
 	};
 
-	function getOriginal$1(event) {
-	  return event.originalEvent || event.srcEvent;
-	}
-
-	function isButton$1(event, button) {
-	  return (getOriginal$1(event) || event).button === button;
-	}
-
-	function isPrimaryButton$1(event) {
-
-	  // button === 0 -> left áka primary mouse button
-	  return isButton$1(event, 0);
-	}
-
-	function isAuxiliaryButton$1(event) {
-
-	  // button === 1 -> auxiliary áka wheel button
-	  return isButton$1(event, 1);
-	}
-
-	function toSVGPoints$1(points) {
-	  var result = '';
-
-	  for (var i = 0, p; (p = points[i]); i++) {
-	    result += p.x + ',' + p.y + ' ';
-	  }
-
-	  return result;
-	}
-
-	function createLine$1(points, attrs) {
-
-	  var line = create('polyline');
-	  attr$1(line, { points: toSVGPoints$1(points) });
-
-	  if (attrs) {
-	    attr$1(line, attrs);
-	  }
-
-	  return line;
-	}
-
-	function updateLine$1(gfx, points) {
-	  attr$1(gfx, { points: toSVGPoints$1(points) });
-
-	  return gfx;
-	}
-
-	function allowAll$1(event) { return true; }
-
-	function allowPrimaryAndAuxiliary$1(event) {
-	  return isPrimaryButton$1(event) || isAuxiliaryButton$1(event);
-	}
-
-	var LOW_PRIORITY$7 = 500;
-
-
-	/**
-	 * A plugin that provides interaction events for diagram elements.
-	 *
-	 * It emits the following events:
-	 *
-	 *   * element.click
-	 *   * element.contextmenu
-	 *   * element.dblclick
-	 *   * element.hover
-	 *   * element.mousedown
-	 *   * element.mousemove
-	 *   * element.mouseup
-	 *   * element.out
-	 *
-	 * Each event is a tuple { element, gfx, originalEvent }.
-	 *
-	 * Canceling the event via Event#preventDefault()
-	 * prevents the original DOM operation.
-	 *
-	 * @param {EventBus} eventBus
-	 */
-	function InteractionEvents$1(eventBus, elementRegistry, styles) {
-
-	  var self = this;
-
-	  /**
-	   * Fire an interaction event.
-	   *
-	   * @param {string} type local event name, e.g. element.click.
-	   * @param {DOMEvent} event native event
-	   * @param {djs.model.Base} [element] the diagram element to emit the event on;
-	   *                                   defaults to the event target
-	   */
-	  function fire(type, event, element) {
-
-	    if (isIgnored(type, event)) {
-	      return;
-	    }
-
-	    var target, gfx, returnValue;
-
-	    if (!element) {
-	      target = event.delegateTarget || event.target;
-
-	      if (target) {
-	        gfx = target;
-	        element = elementRegistry.get(gfx);
-	      }
-	    } else {
-	      gfx = elementRegistry.getGraphics(element);
-	    }
-
-	    if (!gfx || !element) {
-	      return;
-	    }
-
-	    returnValue = eventBus.fire(type, {
-	      element: element,
-	      gfx: gfx,
-	      originalEvent: event
-	    });
-
-	    if (returnValue === false) {
-	      event.stopPropagation();
-	      event.preventDefault();
-	    }
-	  }
-
-	  // TODO(nikku): document this
-	  var handlers = {};
-
-	  function mouseHandler(localEventName) {
-	    return handlers[localEventName];
-	  }
-
-	  function isIgnored(localEventName, event) {
-
-	    var filter = ignoredFilters[localEventName] || isPrimaryButton$1;
-
-	    // only react on left mouse button interactions
-	    // except for interaction events that are enabled
-	    // for secundary mouse button
-	    return !filter(event);
-	  }
-
-	  var bindings = {
-	    click: 'element.click',
-	    contextmenu: 'element.contextmenu',
-	    dblclick: 'element.dblclick',
-	    mousedown: 'element.mousedown',
-	    mousemove: 'element.mousemove',
-	    mouseover: 'element.hover',
-	    mouseout: 'element.out',
-	    mouseup: 'element.mouseup',
-	  };
-
-	  var ignoredFilters = {
-	    'element.contextmenu': allowAll$1,
-	    'element.mousedown': allowPrimaryAndAuxiliary$1,
-	    'element.mouseup': allowPrimaryAndAuxiliary$1,
-	    'element.click': allowPrimaryAndAuxiliary$1,
-	    'element.dblclick': allowPrimaryAndAuxiliary$1
-	  };
-
-
-	  // manual event trigger //////////
-
-	  /**
-	   * Trigger an interaction event (based on a native dom event)
-	   * on the target shape or connection.
-	   *
-	   * @param {string} eventName the name of the triggered DOM event
-	   * @param {MouseEvent} event
-	   * @param {djs.model.Base} targetElement
-	   */
-	  function triggerMouseEvent(eventName, event, targetElement) {
-
-	    // i.e. element.mousedown...
-	    var localEventName = bindings[eventName];
-
-	    if (!localEventName) {
-	      throw new Error('unmapped DOM event name <' + eventName + '>');
-	    }
-
-	    return fire(localEventName, event, targetElement);
-	  }
-
-
-	  var ELEMENT_SELECTOR = 'svg, .djs-element';
-
-	  // event handling ///////
-
-	  function registerEvent(node, event, localEvent, ignoredFilter) {
-
-	    var handler = handlers[localEvent] = function(event) {
-	      fire(localEvent, event);
-	    };
-
-	    if (ignoredFilter) {
-	      ignoredFilters[localEvent] = ignoredFilter;
-	    }
-
-	    handler.$delegate = delegate.bind(node, ELEMENT_SELECTOR, event, handler);
-	  }
-
-	  function unregisterEvent(node, event, localEvent) {
-
-	    var handler = mouseHandler(localEvent);
-
-	    if (!handler) {
-	      return;
-	    }
-
-	    delegate.unbind(node, event, handler.$delegate);
-	  }
-
-	  function registerEvents(svg) {
-	    forEach(bindings, function(val, key) {
-	      registerEvent(svg, key, val);
-	    });
-	  }
-
-	  function unregisterEvents(svg) {
-	    forEach(bindings, function(val, key) {
-	      unregisterEvent(svg, key, val);
-	    });
-	  }
-
-	  eventBus.on('canvas.destroy', function(event) {
-	    unregisterEvents(event.svg);
-	  });
-
-	  eventBus.on('canvas.init', function(event) {
-	    registerEvents(event.svg);
-	  });
-
-
-	  // hit box updating ////////////////
-
-	  eventBus.on([ 'shape.added', 'connection.added' ], function(event) {
-	    var element = event.element,
-	        gfx = event.gfx;
-
-	    eventBus.fire('interactionEvents.createHit', { element: element, gfx: gfx });
-	  });
-
-	  // Update djs-hit on change.
-	  // A low priortity is necessary, because djs-hit of labels has to be updated
-	  // after the label bounds have been updated in the renderer.
-	  eventBus.on([
-	    'shape.changed',
-	    'connection.changed'
-	  ], LOW_PRIORITY$7, function(event) {
-
-	    var element = event.element,
-	        gfx = event.gfx;
-
-	    eventBus.fire('interactionEvents.updateHit', { element: element, gfx: gfx });
-	  });
-
-	  eventBus.on('interactionEvents.createHit', LOW_PRIORITY$7, function(event) {
-	    var element = event.element,
-	        gfx = event.gfx;
-
-	    self.createDefaultHit(element, gfx);
-	  });
-
-	  eventBus.on('interactionEvents.updateHit', function(event) {
-	    var element = event.element,
-	        gfx = event.gfx;
-
-	    self.updateDefaultHit(element, gfx);
-	  });
-
-
-	  // hit styles ////////////
-
-	  var STROKE_HIT_STYLE = createHitStyle('djs-hit djs-hit-stroke');
-
-	  var CLICK_STROKE_HIT_STYLE = createHitStyle('djs-hit djs-hit-click-stroke');
-
-	  var ALL_HIT_STYLE = createHitStyle('djs-hit djs-hit-all');
-
-	  var HIT_TYPES = {
-	    'all': ALL_HIT_STYLE,
-	    'click-stroke': CLICK_STROKE_HIT_STYLE,
-	    'stroke': STROKE_HIT_STYLE
-	  };
-
-	  function createHitStyle(classNames, attrs) {
-
-	    attrs = assign({
-	      stroke: 'white',
-	      strokeWidth: 15
-	    }, attrs || {});
-
-	    return styles.cls(classNames, [ 'no-fill', 'no-border' ], attrs);
-	  }
-
-
-	  // style helpers ///////////////
-
-	  function applyStyle(hit, type) {
-
-	    var attrs = HIT_TYPES[type];
-
-	    if (!attrs) {
-	      throw new Error('invalid hit type <' + type + '>');
-	    }
-
-	    attr$1(hit, attrs);
-
-	    return hit;
-	  }
-
-	  function appendHit(gfx, hit) {
-	    append(gfx, hit);
-	  }
-
-
-	  // API
-
-	  /**
-	   * Remove hints on the given graphics.
-	   *
-	   * @param {SVGElement} gfx
-	   */
-	  this.removeHits = function(gfx) {
-	    var hits = all('.djs-hit', gfx);
-
-	    forEach(hits, remove$1);
-	  };
-
-	  /**
-	   * Create default hit for the given element.
-	   *
-	   * @param {djs.model.Base} element
-	   * @param {SVGElement} gfx
-	   *
-	   * @return {SVGElement} created hit
-	   */
-	  this.createDefaultHit = function(element, gfx) {
-	    var waypoints = element.waypoints,
-	        isFrame = element.isFrame,
-	        boxType;
-
-	    if (waypoints) {
-	      return this.createWaypointsHit(gfx, waypoints);
-	    } else {
-
-	      boxType = isFrame ? 'stroke' : 'all';
-
-	      return this.createBoxHit(gfx, boxType, {
-	        width: element.width,
-	        height: element.height
-	      });
-	    }
-	  };
-
-	  /**
-	   * Create hits for the given waypoints.
-	   *
-	   * @param {SVGElement} gfx
-	   * @param {Array<Point>} waypoints
-	   *
-	   * @return {SVGElement}
-	   */
-	  this.createWaypointsHit = function(gfx, waypoints) {
-
-	    var hit = createLine$1(waypoints);
-
-	    applyStyle(hit, 'stroke');
-
-	    appendHit(gfx, hit);
-
-	    return hit;
-	  };
-
-	  /**
-	   * Create hits for a box.
-	   *
-	   * @param {SVGElement} gfx
-	   * @param {string} hitType
-	   * @param {Object} attrs
-	   *
-	   * @return {SVGElement}
-	   */
-	  this.createBoxHit = function(gfx, type, attrs) {
-
-	    attrs = assign({
-	      x: 0,
-	      y: 0
-	    }, attrs);
-
-	    var hit = create('rect');
-
-	    applyStyle(hit, type);
-
-	    attr$1(hit, attrs);
-
-	    appendHit(gfx, hit);
-
-	    return hit;
-	  };
-
-	  /**
-	   * Update default hit of the element.
-	   *
-	   * @param  {djs.model.Base} element
-	   * @param  {SVGElement} gfx
-	   *
-	   * @return {SVGElement} updated hit
-	   */
-	  this.updateDefaultHit = function(element, gfx) {
-
-	    var hit = query('.djs-hit', gfx);
-
-	    if (!hit) {
-	      return;
-	    }
-
-	    if (element.waypoints) {
-	      updateLine$1(hit, element.waypoints);
-	    } else {
-	      attr$1(hit, {
-	        width: element.width,
-	        height: element.height
-	      });
-	    }
-
-	    return hit;
-	  };
-
-	  this.fire = fire;
-
-	  this.triggerMouseEvent = triggerMouseEvent;
-
-	  this.mouseHandler = mouseHandler;
-
-	  this.registerEvent = registerEvent;
-	  this.unregisterEvent = unregisterEvent;
-	}
-
-
-	InteractionEvents$1.$inject = [
-	  'eventBus',
-	  'elementRegistry',
-	  'styles'
-	];
-
-
-	/**
-	 * An event indicating that the mouse hovered over an element
-	 *
-	 * @event element.hover
-	 *
-	 * @type {Object}
-	 * @property {djs.model.Base} element
-	 * @property {SVGElement} gfx
-	 * @property {Event} originalEvent
-	 */
-
-	/**
-	 * An event indicating that the mouse has left an element
-	 *
-	 * @event element.out
-	 *
-	 * @type {Object}
-	 * @property {djs.model.Base} element
-	 * @property {SVGElement} gfx
-	 * @property {Event} originalEvent
-	 */
-
-	/**
-	 * An event indicating that the mouse has clicked an element
-	 *
-	 * @event element.click
-	 *
-	 * @type {Object}
-	 * @property {djs.model.Base} element
-	 * @property {SVGElement} gfx
-	 * @property {Event} originalEvent
-	 */
-
-	/**
-	 * An event indicating that the mouse has double clicked an element
-	 *
-	 * @event element.dblclick
-	 *
-	 * @type {Object}
-	 * @property {djs.model.Base} element
-	 * @property {SVGElement} gfx
-	 * @property {Event} originalEvent
-	 */
-
-	/**
-	 * An event indicating that the mouse has gone down on an element.
-	 *
-	 * @event element.mousedown
-	 *
-	 * @type {Object}
-	 * @property {djs.model.Base} element
-	 * @property {SVGElement} gfx
-	 * @property {Event} originalEvent
-	 */
-
-	/**
-	 * An event indicating that the mouse has gone up on an element.
-	 *
-	 * @event element.mouseup
-	 *
-	 * @type {Object}
-	 * @property {djs.model.Base} element
-	 * @property {SVGElement} gfx
-	 * @property {Event} originalEvent
-	 */
-
-	/**
-	 * An event indicating that the context menu action is triggered
-	 * via mouse or touch controls.
-	 *
-	 * @event element.contextmenu
-	 *
-	 * @type {Object}
-	 * @property {djs.model.Base} element
-	 * @property {SVGElement} gfx
-	 * @property {Event} originalEvent
-	 */
-
-	var InteractionEventsModule$1 = {
-	  __init__: [ 'interactionEvents' ],
-	  interactionEvents: [ 'type', InteractionEvents$1 ]
-	};
-
 	var min = Math.min,
 	    max$1 = Math.max;
 
@@ -32941,7 +32427,7 @@
 
 	var DirectEditingModule = {
 	  __depends__: [
-	    InteractionEventsModule$1
+	    InteractionEventsModule
 	  ],
 	  __init__: [ 'directEditing' ],
 	  directEditing: [ 'type', DirectEditing ]
@@ -33894,7 +33380,7 @@
 	  return !!element.labelTarget;
 	}
 
-	var LOW_PRIORITY$8 = 750;
+	var LOW_PRIORITY$7 = 750;
 
 
 	function CreatePreview(
@@ -33939,7 +33425,7 @@
 	    return dragGroup;
 	  }
 
-	  eventBus.on('create.move', LOW_PRIORITY$8, function(event) {
+	  eventBus.on('create.move', LOW_PRIORITY$7, function(event) {
 
 	    var hover = event.hover,
 	        context = event.context,
@@ -35306,12 +34792,12 @@
 	  });
 	}
 
-	var LOW_PRIORITY$9 = 750;
+	var LOW_PRIORITY$8 = 750;
 
 
 	function BpmnCopyPaste(bpmnFactory, eventBus, moddleCopy) {
 
-	  eventBus.on('copyPaste.copyElement', LOW_PRIORITY$9, function(context) {
+	  eventBus.on('copyPaste.copyElement', LOW_PRIORITY$8, function(context) {
 	    var descriptor = context.descriptor,
 	        element = context.element;
 
@@ -37397,16 +36883,16 @@
 	  var translate = this._translate;
 
 	  function toggleLoopEntry(event, entry) {
-	    var loopCharacteristics;
+	    var loopCharacteristics = getBusinessObject(element).loopCharacteristics;
 
 	    if (entry.active) {
 	      loopCharacteristics = undefined;
 	    } else {
-	      loopCharacteristics = self._moddle.create(entry.options.loopCharacteristics);
-
-	      if (entry.options.isSequential) {
-	        loopCharacteristics.isSequential = entry.options.isSequential;
+	      if (isUndefined(entry.options.isSequential) || !loopCharacteristics) {
+	        loopCharacteristics = self._moddle.create(entry.options.loopCharacteristics);
 	      }
+
+	      loopCharacteristics.isSequential = entry.options.isSequential;
 	    }
 	    self._modeling.updateProperties(element, { loopCharacteristics: loopCharacteristics });
 	  }
@@ -39119,7 +38605,7 @@
 	}
 
 	var LOWER_PRIORITY = 1200;
-	var LOW_PRIORITY$a = 800;
+	var LOW_PRIORITY$9 = 800;
 
 	/**
 	 * Basic grid snapping that covers connecting, creating, moving, resizing shapes, moving bendpoints
@@ -39133,7 +38619,7 @@
 
 	  var self = this;
 
-	  eventBus.on('diagram.init', LOW_PRIORITY$a, function() {
+	  eventBus.on('diagram.init', LOW_PRIORITY$9, function() {
 	    self.setActive(active);
 	  });
 
@@ -40024,7 +39510,7 @@
 	  return true;
 	};
 
-	var InteractionEventsModule$2 = {
+	var InteractionEventsModule$1 = {
 	  __init__: [ 'bpmnInteractionEvents' ],
 	  bpmnInteractionEvents: [ 'type', BpmnInteractionEvents ]
 	};
@@ -40610,7 +40096,7 @@
 	var MARKER_RESIZING = 'djs-resizing',
 	    MARKER_RESIZE_NOT_OK = 'resize-not-ok';
 
-	var LOW_PRIORITY$b = 500;
+	var LOW_PRIORITY$a = 500;
 
 
 	/**
@@ -40671,7 +40157,7 @@
 	  }
 
 	  // add and update previews
-	  eventBus.on('resize.move', LOW_PRIORITY$b, function(event) {
+	  eventBus.on('resize.move', LOW_PRIORITY$a, function(event) {
 	    updateFrame(event.context);
 	  });
 
@@ -41769,7 +41255,7 @@
 	  'modeling'
 	];
 
-	var LOW_PRIORITY$c = 500;
+	var LOW_PRIORITY$b = 500;
 
 
 	/**
@@ -41782,7 +41268,7 @@
 
 	  var self = this;
 
-	  this.postExecuted('elements.create', LOW_PRIORITY$c, function(context) {
+	  this.postExecuted('elements.create', LOW_PRIORITY$b, function(context) {
 	    var elements = context.elements;
 
 	    elements = elements.filter(function(shape) {
@@ -41805,7 +41291,7 @@
 	  }, true);
 
 
-	  this.preExecute('elements.move', LOW_PRIORITY$c, function(context) {
+	  this.preExecute('elements.move', LOW_PRIORITY$b, function(context) {
 	    var shapes = context.shapes,
 	        host = context.newHost;
 
@@ -42573,7 +42059,7 @@
 	  }
 	}
 
-	var LOW_PRIORITY$d = 500;
+	var LOW_PRIORITY$c = 500;
 
 
 	/**
@@ -42642,7 +42128,7 @@
 	  /**
 	   * Adjust sizes of other lanes after lane deletion
 	   */
-	  this.postExecuted('shape.delete', LOW_PRIORITY$d, function(event) {
+	  this.postExecuted('shape.delete', LOW_PRIORITY$c, function(event) {
 
 	    var context = event.context,
 	        hints = context.hints,
@@ -42671,7 +42157,7 @@
 
 	inherits_browser(DeleteLaneBehavior, CommandInterceptor);
 
-	var LOW_PRIORITY$e = 500;
+	var LOW_PRIORITY$d = 500;
 
 
 	/**
@@ -42684,7 +42170,7 @@
 
 	  var self = this;
 
-	  this.postExecuted('elements.create', LOW_PRIORITY$e, function(context) {
+	  this.postExecuted('elements.create', LOW_PRIORITY$d, function(context) {
 	    var elements = context.elements;
 
 	    elements.filter(function(shape) {
@@ -42698,7 +42184,7 @@
 	    });
 	  }, true);
 
-	  this.preExecute('elements.move', LOW_PRIORITY$e, function(context) {
+	  this.preExecute('elements.move', LOW_PRIORITY$d, function(context) {
 	    var shapes = context.shapes,
 	        newHost = context.newHost;
 
@@ -44592,7 +44078,7 @@
 	}
 
 	function getWaypointsInsideBounds(waypoints, bounds) {
-	  var originalWaypoints = map(waypoints, getOriginal$2);
+	  var originalWaypoints = map(waypoints, getOriginal$1);
 
 	  return filter(originalWaypoints, function(waypoint) {
 	    return isInsideBounds(waypoint, bounds);
@@ -44609,7 +44095,7 @@
 	  return getOrientation(bounds, point, 1) === 'intersect';
 	}
 
-	function getOriginal$2(point) {
+	function getOriginal$1(point) {
 	  return point.original || point;
 	}
 
@@ -45372,7 +44858,7 @@
 	  'modeling'
 	];
 
-	var LOW_PRIORITY$f = 500;
+	var LOW_PRIORITY$e = 500;
 
 
 	/**
@@ -45486,7 +44972,7 @@
 	    }
 	  });
 
-	  eventBus.on('copyPaste.pasteElement', LOW_PRIORITY$f, function(context) {
+	  eventBus.on('copyPaste.pasteElement', LOW_PRIORITY$e, function(context) {
 	    var descriptor = context.descriptor,
 	        businessObject = descriptor.businessObject;
 
@@ -45643,7 +45129,7 @@
 	  }
 	}
 
-	var LOW_PRIORITY$g = 400;
+	var LOW_PRIORITY$f = 400;
 	var HIGH_PRIORITY$c = 600;
 
 	var DEFAULT_POSITION$1 = {
@@ -45897,7 +45383,7 @@
 
 
 	  // create/remove plane for the subprocess
-	  this.executed('shape.toggleCollapse', LOW_PRIORITY$g, function(context) {
+	  this.executed('shape.toggleCollapse', LOW_PRIORITY$f, function(context) {
 	    var shape = context.shape;
 
 	    if (!is$1(shape, 'bpmn:SubProcess')) {
@@ -45915,7 +45401,7 @@
 
 
 	  // create/remove plane for the subprocess
-	  this.reverted('shape.toggleCollapse', LOW_PRIORITY$g, function(context) {
+	  this.reverted('shape.toggleCollapse', LOW_PRIORITY$f, function(context) {
 	    var shape = context.shape;
 
 	    if (!is$1(shape, 'bpmn:SubProcess')) {
@@ -46199,7 +45685,7 @@
 
 	    if (
 	      !is$1(newShape, 'bpmn:SubProcess') ||
-	      !is$1(oldShape, 'bpmn:Task') ||
+	      ! (is$1(oldShape, 'bpmn:Task') || is$1(oldShape, 'bpmn:CallActivity')) ||
 	      !isExpanded(newShape)
 	    ) {
 	      return;
@@ -46285,7 +45771,7 @@
 	  'modeling',
 	];
 
-	var LOW_PRIORITY$h = 500;
+	var LOW_PRIORITY$g = 500;
 
 
 	function ToggleElementCollapseBehaviour(
@@ -46343,7 +45829,7 @@
 	    };
 	  }
 
-	  this.executed([ 'shape.toggleCollapse' ], LOW_PRIORITY$h, function(e) {
+	  this.executed([ 'shape.toggleCollapse' ], LOW_PRIORITY$g, function(e) {
 
 	    var context = e.context,
 	        shape = context.shape;
@@ -46366,7 +45852,7 @@
 	    }
 	  });
 
-	  this.reverted([ 'shape.toggleCollapse' ], LOW_PRIORITY$h, function(e) {
+	  this.reverted([ 'shape.toggleCollapse' ], LOW_PRIORITY$g, function(e) {
 
 	    var context = e.context;
 	    var shape = context.shape;
@@ -46381,7 +45867,7 @@
 	    }
 	  });
 
-	  this.postExecuted([ 'shape.toggleCollapse' ], LOW_PRIORITY$h, function(e) {
+	  this.postExecuted([ 'shape.toggleCollapse' ], LOW_PRIORITY$g, function(e) {
 	    var shape = e.context.shape,
 	        defaultSize = elementFactory.getDefaultSize(shape),
 	        newBounds;
@@ -46519,7 +46005,7 @@
 	  return sourceBo.get('default') === sequenceFlow;
 	}
 
-	var LOW_PRIORITY$i = 500,
+	var LOW_PRIORITY$h = 500,
 	    HIGH_PRIORITY$d = 5000;
 
 
@@ -46601,7 +46087,7 @@
 	    initContext();
 	  });
 
-	  this.postExecuted(laneRefUpdateEvents, LOW_PRIORITY$i, function(event) {
+	  this.postExecuted(laneRefUpdateEvents, LOW_PRIORITY$h, function(event) {
 	    releaseContext();
 	  });
 
@@ -47936,7 +47422,7 @@
 	    // render labels always on top
 	    if (element.labelTarget) {
 	      return {
-	        parent: canvas.findRoot(element.labelTarget) || canvas.getRootElement(),
+	        parent: canvas.findRoot(newParent) || canvas.getRootElement(),
 	        index: -1
 	      };
 	    }
@@ -47985,7 +47471,7 @@
 
 	var OrderingModule = {
 	  __depends__: [
-	    translate$2
+	    translateModule
 	  ],
 	  __init__: [ 'bpmnOrderingProvider' ],
 	  bpmnOrderingProvider: [ 'type', BpmnOrderingProvider ]
@@ -48901,7 +48387,7 @@
 	  return collection;
 	}
 
-	var LOW_PRIORITY$j = 250,
+	var LOW_PRIORITY$i = 250,
 	    HIGH_PRIORITY$f = 1400;
 
 
@@ -48932,7 +48418,7 @@
 	  });
 
 	  // add labels to visual's group
-	  movePreview && eventBus.on('shape.move.start', LOW_PRIORITY$j, function(e) {
+	  movePreview && eventBus.on('shape.move.start', LOW_PRIORITY$i, function(e) {
 
 	    var context = e.context,
 	        shapes = context.shapes;
@@ -49061,7 +48547,7 @@
 	  labelSupport: [ 'type', LabelSupport ]
 	};
 
-	var LOW_PRIORITY$k = 251,
+	var LOW_PRIORITY$j = 251,
 	    HIGH_PRIORITY$g = 1401;
 
 	var MARKER_ATTACH$1 = 'attach-ok';
@@ -49103,7 +48589,7 @@
 	  });
 
 	  // add attachers to the visual's group
-	  movePreview && eventBus.on('shape.move.start', LOW_PRIORITY$k, function(e) {
+	  movePreview && eventBus.on('shape.move.start', LOW_PRIORITY$j, function(e) {
 
 	    var context = e.context,
 	        shapes = context.shapes,
@@ -49385,7 +48871,7 @@
 	  attachSupport: [ 'type', AttachSupport ]
 	};
 
-	var LOW_PRIORITY$l = 250;
+	var LOW_PRIORITY$k = 250;
 
 	/**
 	 * The tool manager acts as middle-man between the available tool's and the Palette,
@@ -49461,7 +48947,7 @@
 	    eventsToRegister.push(event + '.canceled');
 	  });
 
-	  eventBus.on(eventsToRegister, LOW_PRIORITY$l, function(event) {
+	  eventBus.on(eventsToRegister, LOW_PRIORITY$k, function(event) {
 
 	    // We defer the de-activation of the tool to the .activate phase,
 	    // so we're able to check if we want to toggle off the current
@@ -50090,7 +49576,7 @@
 	var MARKER_DRAGGING = 'djs-dragging',
 	    MARKER_RESIZING$1 = 'djs-resizing';
 
-	var LOW_PRIORITY$m = 250;
+	var LOW_PRIORITY$l = 250;
 
 	var max$6 = Math.max;
 
@@ -50165,7 +49651,7 @@
 	  });
 
 	  // add and update move/resize previews
-	  eventBus.on('spaceTool.move', LOW_PRIORITY$m, function(event) {
+	  eventBus.on('spaceTool.move', LOW_PRIORITY$l, function(event) {
 
 	    var context = event.context,
 	        line = context.line,
@@ -54853,7 +54339,7 @@
 	    }
 
 	    if (!text && di.label) {
-	      di.label = null;
+	      delete di.label;
 	    }
 	  }
 
@@ -56412,7 +55898,7 @@
 	  connectionDocking: [ 'type', CroppingConnectionDocking ]
 	};
 
-	var LOW_PRIORITY$n = 500,
+	var LOW_PRIORITY$m = 500,
 	    MEDIUM_PRIORITY = 1250,
 	    HIGH_PRIORITY$i = 1500;
 
@@ -56511,7 +55997,7 @@
 	  // to let others modify the move event before we update
 	  // the context
 	  //
-	  eventBus.on('shape.move.move', LOW_PRIORITY$n, function(event) {
+	  eventBus.on('shape.move.move', LOW_PRIORITY$m, function(event) {
 
 	    var context = event.context,
 	        validatedShapes = context.validatedShapes,
@@ -56657,7 +56143,7 @@
 	  });
 	}
 
-	var LOW_PRIORITY$o = 499;
+	var LOW_PRIORITY$n = 499;
 
 	var MARKER_DRAGGING$1 = 'djs-dragging',
 	    MARKER_OK$3 = 'drop-ok',
@@ -56735,7 +56221,7 @@
 	  // assign a low priority to this handler
 	  // to let others modify the move context before
 	  // we draw things
-	  eventBus.on('shape.move.start', LOW_PRIORITY$o, function(event) {
+	  eventBus.on('shape.move.start', LOW_PRIORITY$n, function(event) {
 	    var context = event.context,
 	        dragShapes = context.shapes,
 	        allDraggedElements = context.allDraggedElements;
@@ -56782,7 +56268,7 @@
 	  });
 
 	  // update previews
-	  eventBus.on('shape.move.move', LOW_PRIORITY$o, function(event) {
+	  eventBus.on('shape.move.move', LOW_PRIORITY$n, function(event) {
 
 	    var context = event.context,
 	        dragGroup = context.dragGroup,
@@ -58125,13 +57611,13 @@
 	    LassoToolModule,
 	    HandToolModule,
 	    GlobalConnectModule,
-	    translate$2
+	    translateModule
 	  ],
 	  __init__: [ 'paletteProvider' ],
 	  paletteProvider: [ 'type', PaletteProvider ]
 	};
 
-	var LOW_PRIORITY$p = 250;
+	var LOW_PRIORITY$o = 250;
 
 
 	function BpmnReplacePreview(
@@ -58212,7 +57698,7 @@
 	    });
 	  }
 
-	  eventBus.on('shape.move.move', LOW_PRIORITY$p, function(event) {
+	  eventBus.on('shape.move.move', LOW_PRIORITY$o, function(event) {
 
 	    var context = event.context,
 	        canExecute = context.canExecute;
@@ -60142,7 +59628,7 @@
 	  DistributeElementsModule$1,
 	  EditorActionsModule$1,
 	  GridSnappingModule$1,
-	  InteractionEventsModule$2,
+	  InteractionEventsModule$1,
 	  KeyboardModule$1,
 	  KeyboardMoveSelectionModule,
 	  LabelEditingModule,
@@ -60168,24 +59654,6 @@
 	  Modeler.prototype._modelingModules
 	);
 
-	/**
-	 * SVGs for elements are generated by the {@link GraphicsFactory}.
-	 *
-	 * This utility gives quick access to the important semantic
-	 * parts of an element.
-	 */
-
-	/**
-	 * Returns the visual part of a diagram element
-	 *
-	 * @param {Snap<SVGElement>} gfx
-	 *
-	 * @return {Snap<SVGElement>}
-	 */
-	function getVisual$1(gfx) {
-	  return gfx.childNodes[0];
-	}
-
 	var MINIMAP_VIEWBOX_PADDING = 50;
 
 	var RANGE$1 = { min: 0.2, max: 4 },
@@ -60193,7 +59661,7 @@
 
 	var DELTA_THRESHOLD$1 = 0.1;
 
-	var LOW_PRIORITY$q = 250;
+	var LOW_PRIORITY$p = 250;
 
 
 	/**
@@ -60467,7 +59935,7 @@
 	  });
 
 	  // update on elements changed
-	  eventBus.on('elements.changed', LOW_PRIORITY$q, function(context) {
+	  eventBus.on('elements.changed', LOW_PRIORITY$p, function(context) {
 	    var elements = context.elements;
 
 	    elements.forEach(function(element) {
@@ -60853,7 +60321,7 @@
 	      visual;
 
 	  if (gfx) {
-	    visual = getVisual$1(gfx);
+	    visual = getVisual(gfx);
 
 	    if (visual) {
 	      var elementGfx = clone(visual);
@@ -61699,19 +61167,19 @@
 	  getDescriptionForId: () => {}
 	});
 
-	/**
-	 * @typedef {Function} <propertiesPanel.showEntry> callback
-	 *
-	 * @example
-	 *
-	 * useEvent('propertiesPanel.showEntry', ({ focus = false, ...rest }) => {
-	 *   // ...
-	 * });
-	 *
-	 * @param {Object} context
-	 * @param {boolean} [context.focus]
-	 *
-	 * @returns void
+	/**
+	 * @typedef {Function} <propertiesPanel.showEntry> callback
+	 *
+	 * @example
+	 *
+	 * useEvent('propertiesPanel.showEntry', ({ focus = false, ...rest }) => {
+	 *   // ...
+	 * });
+	 *
+	 * @param {Object} context
+	 * @param {boolean} [context.focus]
+	 *
+	 * @returns void
 	 */
 	const EventContext = q({
 	  eventBus: null
@@ -61724,20 +61192,20 @@
 	  setLayoutForKey: () => {}
 	});
 
-	/**
-	 * Accesses the global DescriptionContext and returns a description for a given id and element.
-	 *
-	 * @example
-	 * ```jsx
-	 * function TextField(props) {
-	 *   const description = useDescriptionContext('input1', element);
-	 * }
-	 * ```
-	 *
-	 * @param {string} id
-	 * @param {djs.model.Base} element
-	 *
-	 * @returns {string}
+	/**
+	 * Accesses the global DescriptionContext and returns a description for a given id and element.
+	 *
+	 * @example
+	 * ```jsx
+	 * function TextField(props) {
+	 *   const description = useDescriptionContext('input1', element);
+	 * }
+	 * ```
+	 *
+	 * @param {string} id
+	 * @param {djs.model.Base} element
+	 *
+	 * @returns {string}
 	 */
 
 	function useDescriptionContext(id, element) {
@@ -61748,14 +61216,14 @@
 	}
 
 	const DEFAULT_PRIORITY$6 = 1000;
-	/**
-	 * Subscribe to an event.
-	 *
-	 * @param {string} event
-	 * @param {Function} callback
-	 * @param {number} [priority]
-	 *
-	 * @returns {import('preact').Ref}
+	/**
+	 * Subscribe to an event.
+	 *
+	 * @param {string} event
+	 * @param {Function} callback
+	 * @param {number} [priority]
+	 *
+	 * @returns {import('preact').Ref}
 	 */
 
 	function useEvent(event, callback, priority = DEFAULT_PRIORITY$6) {
@@ -61773,11 +61241,11 @@
 	}
 
 	const HIGH_PRIORITY$l = 10000;
-	/**
-	 * Buffer events and re-fire during passive effect phase.
-	 *
-	 * @param {string[]} bufferedEvents
-	 * @param {Object} [eventBus]
+	/**
+	 * Buffer events and re-fire during passive effect phase.
+	 *
+	 * @param {string[]} bufferedEvents
+	 * @param {Object} [eventBus]
 	 */
 
 	function useEventBuffer(bufferedEvents, eventBus) {
@@ -61825,20 +61293,20 @@
 	  });
 	}
 
-	/**
-	 * Creates a state that persists in the global LayoutContext.
-	 *
-	 * @example
-	 * ```jsx
-	 * function Group(props) {
-	 *   const [ open, setOpen ] = useLayoutState([ 'groups', 'foo', 'open' ], false);
-	 * }
-	 * ```
-	 *
-	 * @param {(string|number)[]} path
-	 * @param {any} [defaultValue]
-	 *
-	 * @returns {[ any, Function ]}
+	/**
+	 * Creates a state that persists in the global LayoutContext.
+	 *
+	 * @example
+	 * ```jsx
+	 * function Group(props) {
+	 *   const [ open, setOpen ] = useLayoutState([ 'groups', 'foo', 'open' ], false);
+	 * }
+	 * ```
+	 *
+	 * @param {(string|number)[]} path
+	 * @param {any} [defaultValue]
+	 *
+	 * @returns {[ any, Function ]}
 	 */
 
 	function useLayoutState(path, defaultValue) {
@@ -61859,11 +61327,11 @@
 	  return [value, setState];
 	}
 
-	/**
-	 * @pinussilvestrus: we need to introduce our own hook to persist the previous
-	 * state on updates.
-	 *
-	 * cf. https://reactjs.org/docs/hooks-faq.html#how-to-get-the-previous-props-or-state
+	/**
+	 * @pinussilvestrus: we need to introduce our own hook to persist the previous
+	 * state on updates.
+	 *
+	 * cf. https://reactjs.org/docs/hooks-faq.html#how-to-get-the-previous-props-or-state
 	 */
 
 	function usePrevious(value) {
@@ -61874,12 +61342,12 @@
 	  return ref.current;
 	}
 
-	/**
-	 * Subscribe to `propertiesPanel.showEntry`.
-	 *
-	 * @param {Function} show
-	 *
-	 * @returns {import('preact').Ref}
+	/**
+	 * Subscribe to `propertiesPanel.showEntry`.
+	 *
+	 * @param {Function} show
+	 *
+	 * @returns {import('preact').Ref}
 	 */
 
 	function useShowEntryEvent(show) {
@@ -61916,14 +61384,14 @@
 	  return ref;
 	}
 
-	/**
-	 * Subscribe to `propertiesPanel.showError`. On `propertiesPanel.showError` set
-	 * temporary error. Fire `propertiesPanel.showEntry` for temporary error to be
-	 * visible. Unset error on `propertiesPanel.updated`.
-	 *
-	 * @param {Function} show
-	 *
-	 * @returns {import('preact').Ref}
+	/**
+	 * Subscribe to `propertiesPanel.showError`. On `propertiesPanel.showError` set
+	 * temporary error. Fire `propertiesPanel.showEntry` for temporary error to be
+	 * visible. Unset error on `propertiesPanel.updated`.
+	 *
+	 * @param {Function} show
+	 *
+	 * @returns {import('preact').Ref}
 	 */
 
 	function useShowErrorEvent(show) {
@@ -62034,66 +61502,66 @@
 	};
 	const DEFAULT_DESCRIPTION = {};
 	const bufferedEvents = ['propertiesPanel.showEntry', 'propertiesPanel.showError'];
-	/**
-	 * @typedef { {
-	 *    component: import('preact').Component,
-	 *    id: String,
-	 *    isEdited?: Function
-	 * } } EntryDefinition
-	 *
-	 * @typedef { {
-	 *    autoFocusEntry: String,
-	 *    autoOpen?: Boolean,
-	 *    entries: Array<EntryDefinition>,
-	 *    id: String,
-	 *    label: String,
-	 *    remove: (event: MouseEvent) => void
-	 * } } ListItemDefinition
-	 *
-	 * @typedef { {
-	 *    add: (event: MouseEvent) => void,
-	 *    component: import('preact').Component,
-	 *    element: Object,
-	 *    id: String,
-	 *    items: Array<ListItemDefinition>,
-	 *    label: String,
-	 *    shouldSort?: Boolean,
-	 *    shouldOpen?: Boolean
-	 * } } ListGroupDefinition
-	 *
-	 * @typedef { {
-	 *    component?: import('preact').Component,
-	 *    entries: Array<EntryDefinition>,
-	 *    id: String,
-	 *    label: String,
-	 *    shouldOpen?: Boolean
-	 * } } GroupDefinition
-	 *
-	 *  @typedef { {
-	 *    [id: String]: GetDescriptionFunction
-	 * } } DescriptionConfig
-	 *
-	 * @callback { {
-	 * @param {string} id
-	 * @param {djs.model.base} element
-	 * @returns {string}
-	 * } } GetDescriptionFunction
-	 *
+	/**
+	 * @typedef { {
+	 *    component: import('preact').Component,
+	 *    id: String,
+	 *    isEdited?: Function
+	 * } } EntryDefinition
+	 *
+	 * @typedef { {
+	 *    autoFocusEntry: String,
+	 *    autoOpen?: Boolean,
+	 *    entries: Array<EntryDefinition>,
+	 *    id: String,
+	 *    label: String,
+	 *    remove: (event: MouseEvent) => void
+	 * } } ListItemDefinition
+	 *
+	 * @typedef { {
+	 *    add: (event: MouseEvent) => void,
+	 *    component: import('preact').Component,
+	 *    element: Object,
+	 *    id: String,
+	 *    items: Array<ListItemDefinition>,
+	 *    label: String,
+	 *    shouldSort?: Boolean,
+	 *    shouldOpen?: Boolean
+	 * } } ListGroupDefinition
+	 *
+	 * @typedef { {
+	 *    component?: import('preact').Component,
+	 *    entries: Array<EntryDefinition>,
+	 *    id: String,
+	 *    label: String,
+	 *    shouldOpen?: Boolean
+	 * } } GroupDefinition
+	 *
+	 *  @typedef { {
+	 *    [id: String]: GetDescriptionFunction
+	 * } } DescriptionConfig
+	 *
+	 * @callback { {
+	 * @param {string} id
+	 * @param {djs.model.base} element
+	 * @returns {string}
+	 * } } GetDescriptionFunction
+	 *
 	 */
 
-	/**
-	 * A basic properties panel component. Describes *how* content will be rendered, accepts
-	 * data from implementor to describe *what* will be rendered.
-	 *
-	 * @param {Object} props
-	 * @param {Object} props.element
-	 * @param {import('./components/Header').HeaderProvider} props.headerProvider
-	 * @param {Array<GroupDefinition|ListGroupDefinition>} props.groups
-	 * @param {Object} [props.layoutConfig]
-	 * @param {Function} [props.layoutChanged]
-	 * @param {DescriptionConfig} [props.descriptionConfig]
-	 * @param {Function} [props.descriptionLoaded]
-	 * @param {Object} [props.eventBus]
+	/**
+	 * A basic properties panel component. Describes *how* content will be rendered, accepts
+	 * data from implementor to describe *what* will be rendered.
+	 *
+	 * @param {Object} props
+	 * @param {Object} props.element
+	 * @param {import('./components/Header').HeaderProvider} props.headerProvider
+	 * @param {Array<GroupDefinition|ListGroupDefinition>} props.groups
+	 * @param {Object} [props.layoutConfig]
+	 * @param {Function} [props.layoutChanged]
+	 * @param {DescriptionConfig} [props.descriptionConfig]
+	 * @param {Function} [props.descriptionLoaded]
+	 * @param {Object} [props.eventBus]
 	 */
 
 	function PropertiesPanel(props) {
@@ -62274,17 +61742,17 @@
 	    children: item.entry
 	  });
 	}
-	/**
-	 *
-	 * @param {Array<null | Element>} ignoredElements
-	 * @param {Function} callback
+	/**
+	 *
+	 * @param {Array<null | Element>} ignoredElements
+	 * @param {Function} callback
 	 */
 
 
 	function useGlobalClick(ignoredElements, callback) {
 	  y$1(() => {
-	    /**
-	     * @param {MouseEvent} event
+	    /**
+	     * @param {MouseEvent} event
 	     */
 	    function listener(event) {
 	      if (ignoredElements.some(element => element && element.contains(event.target))) {
@@ -62414,8 +61882,8 @@
 	}
 
 	const noop$3 = () => {};
-	/**
-	 * @param {import('../PropertiesPanel').ListGroupDefinition} props
+	/**
+	 * @param {import('../PropertiesPanel').ListGroupDefinition} props
 	 */
 
 
@@ -62568,8 +62036,8 @@
 	  });
 	} // helpers ////////////////////
 
-	/**
-	 * Sorts given items alphanumeric by label
+	/**
+	 * Sorts given items alphanumeric by label
 	 */
 
 	function sortItems(items) {
@@ -62638,15 +62106,15 @@
 	    })]
 	  });
 	}
-	/**
-	 * @param {Object} props
-	 * @param {Object} props.element
-	 * @param {String} props.id
-	 * @param {String} props.description
-	 * @param {String} props.label
-	 * @param {Function} props.getValue
-	 * @param {Function} props.setValue
-	 * @param {boolean} [props.disabled]
+	/**
+	 * @param {Object} props
+	 * @param {Object} props.element
+	 * @param {String} props.id
+	 * @param {String} props.description
+	 * @param {String} props.label
+	 * @param {Function} props.getValue
+	 * @param {Function} props.setValue
+	 * @param {boolean} [props.disabled]
 	 */
 
 
@@ -62692,21 +62160,21 @@
 	}
 
 	const noop$1 = () => {};
-	/**
-	 * @typedef { { value: string, label: string, disabled: boolean } } Option
+	/**
+	 * @typedef { { value: string, label: string, disabled: boolean } } Option
 	 */
 
-	/**
-	 * Provides basic select input.
-	 *
-	 * @param {object} props
-	 * @param {string} props.id
-	 * @param {string[]} props.path
-	 * @param {string} props.label
-	 * @param {Function} props.onChange
-	 * @param {Array<Option>} [props.options]
-	 * @param {string} props.value
-	 * @param {boolean} [props.disabled]
+	/**
+	 * Provides basic select input.
+	 *
+	 * @param {object} props
+	 * @param {string} props.id
+	 * @param {string[]} props.path
+	 * @param {string} props.label
+	 * @param {Function} props.onChange
+	 * @param {Array<Option>} [props.options]
+	 * @param {string} props.value
+	 * @param {boolean} [props.disabled]
 	 */
 
 
@@ -62752,16 +62220,16 @@
 	    })]
 	  });
 	}
-	/**
-	 * @param {object} props
-	 * @param {object} props.element
-	 * @param {string} props.id
-	 * @param {string} [props.description]
-	 * @param {string} props.label
-	 * @param {Function} props.getValue
-	 * @param {Function} props.setValue
-	 * @param {Function} props.getOptions
-	 * @param {boolean} [props.disabled]
+	/**
+	 * @param {object} props
+	 * @param {object} props.element
+	 * @param {string} props.id
+	 * @param {string} [props.description]
+	 * @param {string} props.label
+	 * @param {Function} props.getValue
+	 * @param {Function} props.setValue
+	 * @param {Function} props.getOptions
+	 * @param {boolean} [props.disabled]
 	 */
 
 
@@ -62863,18 +62331,18 @@
 	    })]
 	  });
 	}
-	/**
-	 * @param {object} props
-	 * @param {object} props.element
-	 * @param {string} props.id
-	 * @param {string} props.description
-	 * @param {boolean} props.debounce
-	 * @param {string} props.label
-	 * @param {Function} props.getValue
-	 * @param {Function} props.setValue
-	 * @param {number} props.rows
-	 * @param {boolean} props.monospace
-	 * @param {boolean} [props.disabled]
+	/**
+	 * @param {object} props
+	 * @param {object} props.element
+	 * @param {string} props.id
+	 * @param {string} props.description
+	 * @param {boolean} props.debounce
+	 * @param {string} props.label
+	 * @param {Function} props.getValue
+	 * @param {Function} props.setValue
+	 * @param {number} props.rows
+	 * @param {boolean} props.monospace
+	 * @param {boolean} [props.disabled]
 	 */
 
 
@@ -62965,17 +62433,17 @@
 	    })]
 	  });
 	}
-	/**
-	 * @param {Object} props
-	 * @param {Object} props.element
-	 * @param {String} props.id
-	 * @param {String} props.description
-	 * @param {Boolean} props.debounce
-	 * @param {Boolean} props.disabled
-	 * @param {String} props.label
-	 * @param {Function} props.getValue
-	 * @param {Function} props.setValue
-	 * @param {Function} props.validate
+	/**
+	 * @param {Object} props
+	 * @param {Object} props.element
+	 * @param {String} props.id
+	 * @param {String} props.description
+	 * @param {Boolean} props.debounce
+	 * @param {Boolean} props.disabled
+	 * @param {String} props.label
+	 * @param {Function} props.getValue
+	 * @param {Function} props.setValue
+	 * @param {Function} props.validate
 	 */
 
 
@@ -63096,15 +62564,15 @@
 	    })]
 	  });
 	}
-	/**
-	 * @param {Object} props
-	 * @param {Object} props.element
-	 * @param {String} props.id
-	 * @param {String} props.description
-	 * @param {String} props.label
-	 * @param {String} props.switcherLabel
-	 * @param {Function} props.getValue
-	 * @param {Function} props.setValue
+	/**
+	 * @param {Object} props
+	 * @param {Object} props.element
+	 * @param {String} props.id
+	 * @param {String} props.description
+	 * @param {String} props.label
+	 * @param {String} props.switcherLabel
+	 * @param {Function} props.getValue
+	 * @param {Function} props.setValue
 	 */
 
 
@@ -63299,97 +62767,6 @@
 	  return path.join(separator);
 	}
 
-	/**
-	 * Failsafe remove an element from a collection
-	 *
-	 * @param  {Array<Object>} [collection]
-	 * @param  {Object} [element]
-	 *
-	 * @return {number} the previous index of the element
-	 */
-
-	/**
-	 * Fail save add an element to the given connection, ensuring
-	 * it does not yet exist.
-	 *
-	 * @param {Array<Object>} collection
-	 * @param {Object} element
-	 * @param {number} idx
-	 */
-	function add$2(collection, element, idx) {
-
-	  if (!collection || !element) {
-	    return;
-	  }
-
-	  if (typeof idx !== 'number') {
-	    idx = -1;
-	  }
-
-	  var currentIdx = collection.indexOf(element);
-
-	  if (currentIdx !== -1) {
-
-	    if (currentIdx === idx) {
-
-	      // nothing to do, position has not changed
-	      return;
-	    } else {
-
-	      if (idx !== -1) {
-
-	        // remove from current position
-	        collection.splice(currentIdx, 1);
-	      } else {
-
-	        // already exists in collection
-	        return;
-	      }
-	    }
-	  }
-
-	  if (idx !== -1) {
-
-	    // insert at specified position
-	    collection.splice(idx, 0, element);
-	  } else {
-
-	    // push to end
-	    collection.push(element);
-	  }
-	}
-
-	/**
-	 * A simple translation stub to be used for multi-language support
-	 * in diagrams. Can be easily replaced with a more sophisticated
-	 * solution.
-	 *
-	 * @example
-	 *
-	 * // use it inside any diagram component by injecting `translate`.
-	 *
-	 * function MyService(translate) {
-	 *   alert(translate('HELLO {you}', { you: 'You!' }));
-	 * }
-	 *
-	 * @param {string} template to interpolate
-	 * @param {Object} [replacements] a map with substitutes
-	 *
-	 * @return {string} the translated string
-	 */
-	function translate$3(template, replacements) {
-
-	  replacements = replacements || {};
-
-	  return template.replace(/{([^}]+)}/g, function(_, key) {
-	    return replacements[key] || '{' + key + '}';
-	  });
-	}
-
-	var translateModule = {
-	  translate: [ 'value', translate$3 ]
-	};
-
 	var semverCompare = function cmp (a, b) {
 	    var pa = a.split('.');
 	    var pb = b.split('.');
@@ -64054,142 +63431,6 @@
 	  return _validate(object, standaloneZeebeValidator);
 	}
 
-	var DEFAULT_PRIORITY$7 = 1000;
-
-	/**
-	 * A utility that can be used to plug-in into the command execution for
-	 * extension and/or validation.
-	 *
-	 * @param {EventBus} eventBus
-	 *
-	 * @example
-	 *
-	 * import inherits from 'inherits';
-	 *
-	 * import CommandInterceptor from 'diagram-js/lib/command/CommandInterceptor';
-	 *
-	 * function CommandLogger(eventBus) {
-	 *   CommandInterceptor.call(this, eventBus);
-	 *
-	 *   this.preExecute(function(event) {
-	 *     console.log('command pre-execute', event);
-	 *   });
-	 * }
-	 *
-	 * inherits(CommandLogger, CommandInterceptor);
-	 *
-	 */
-	function CommandInterceptor$1(eventBus) {
-	  this._eventBus = eventBus;
-	}
-
-	CommandInterceptor$1.$inject = [ 'eventBus' ];
-
-	function unwrapEvent$1(fn, that) {
-	  return function(event) {
-	    return fn.call(that || null, event.context, event.command, event);
-	  };
-	}
-
-	/**
-	 * Register an interceptor for a command execution
-	 *
-	 * @param {string|Array<string>} [events] list of commands to register on
-	 * @param {string} [hook] command hook, i.e. preExecute, executed to listen on
-	 * @param {number} [priority] the priority on which to hook into the execution
-	 * @param {Function} handlerFn interceptor to be invoked with (event)
-	 * @param {boolean} unwrap if true, unwrap the event and pass (context, command, event) to the
-	 *                          listener instead
-	 * @param {Object} [that] Pass context (`this`) to the handler function
-	 */
-	CommandInterceptor$1.prototype.on = function(events, hook, priority, handlerFn, unwrap, that) {
-
-	  if (isFunction(hook) || isNumber(hook)) {
-	    that = unwrap;
-	    unwrap = handlerFn;
-	    handlerFn = priority;
-	    priority = hook;
-	    hook = null;
-	  }
-
-	  if (isFunction(priority)) {
-	    that = unwrap;
-	    unwrap = handlerFn;
-	    handlerFn = priority;
-	    priority = DEFAULT_PRIORITY$7;
-	  }
-
-	  if (isObject(unwrap)) {
-	    that = unwrap;
-	    unwrap = false;
-	  }
-
-	  if (!isFunction(handlerFn)) {
-	    throw new Error('handlerFn must be a function');
-	  }
-
-	  if (!isArray(events)) {
-	    events = [ events ];
-	  }
-
-	  var eventBus = this._eventBus;
-
-	  forEach(events, function(event) {
-
-	    // concat commandStack(.event)?(.hook)?
-	    var fullEvent = [ 'commandStack', event, hook ].filter(function(e) { return e; }).join('.');
-
-	    eventBus.on(fullEvent, priority, unwrap ? unwrapEvent$1(handlerFn, that) : handlerFn, that);
-	  });
-	};
-
-
-	var hooks$1 = [
-	  'canExecute',
-	  'preExecute',
-	  'preExecuted',
-	  'execute',
-	  'executed',
-	  'postExecute',
-	  'postExecuted',
-	  'revert',
-	  'reverted'
-	];
-
-	/*
-	 * Install hook shortcuts
-	 *
-	 * This will generate the CommandInterceptor#(preExecute|...|reverted) methods
-	 * which will in term forward to CommandInterceptor#on.
-	 */
-	forEach(hooks$1, function(hook) {
-
-	  /**
-	   * {canExecute|preExecute|preExecuted|execute|executed|postExecute|postExecuted|revert|reverted}
-	   *
-	   * A named hook for plugging into the command execution
-	   *
-	   * @param {string|Array<string>} [events] list of commands to register on
-	   * @param {number} [priority] the priority on which to hook into the execution
-	   * @param {Function} handlerFn interceptor to be invoked with (event)
-	   * @param {boolean} [unwrap=false] if true, unwrap the event and pass (context, command, event) to the
-	   *                          listener instead
-	   * @param {Object} [that] Pass context (`this`) to the handler function
-	   */
-	  CommandInterceptor$1.prototype[hook] = function(events, priority, handlerFn, unwrap, that) {
-
-	    if (isFunction(events) || isNumber(events)) {
-	      that = unwrap;
-	      unwrap = handlerFn;
-	      handlerFn = priority;
-	      priority = events;
-	      events = null;
-	    }
-
-	    this.on(events, hook, priority, handlerFn, unwrap, that);
-	  };
-	});
-
 	const BpmnPropertiesPanelContext = q({
 	  selectedElement: null,
 	  injector: null,
@@ -65572,9 +64813,7 @@
 	}
 
 	function getTemplate(element, elementTemplates) {
-	  const templateId = elementTemplates._getTemplateId(element);
-
-	  return templateId && elementTemplates.get(templateId);
+	  return elementTemplates.get(element);
 	}
 
 	function getTemplateDocumentation(element, elementTemplates) {
@@ -65748,7 +64987,7 @@
 	  return element && elementRegistry.get(element.id);
 	}
 
-	const DEFAULT_PRIORITY$8 = 1000;
+	const DEFAULT_PRIORITY$7 = 1000;
 	/**
 	 * @typedef { import('@bpmn-io/properties-panel').GroupDefinition } GroupDefinition
 	 * @typedef { import('@bpmn-io/properties-panel').ListGroupDefinition } ListGroupDefinition
@@ -65831,7 +65070,7 @@
 	  registerProvider(priority, provider) {
 	    if (!provider) {
 	      provider = priority;
-	      priority = DEFAULT_PRIORITY$8;
+	      priority = DEFAULT_PRIORITY$7;
 	    }
 
 	    if (typeof provider.getGroups !== 'function') {
@@ -67629,7 +66868,7 @@
 	    categoryValue: [categoryValue]
 	  }); // add to correct place
 
-	  add$2(definitions.get('rootElements'), category);
+	  add$1(definitions.get('rootElements'), category);
 	  getBusinessObject(category).$parent = definitions;
 	  getBusinessObject(categoryValue).$parent = category;
 	  return categoryValue;
@@ -72645,7 +71884,7 @@
 	 * it if not.
 	 */
 
-	class ReplaceBehavior$1 extends CommandInterceptor$1 {
+	class ReplaceBehavior$1 extends CommandInterceptor {
 	  constructor(elementTemplates, injector) {
 	    super(injector.get('eventBus'));
 	    this.postExecuted('shape.replace', function (e) {
@@ -72917,7 +72156,7 @@
 	            changedElement = businessObject;
 	      let properties = {};
 
-	      if (oldProperty && propertyChanged$1(changedElement, oldProperty)) {
+	      if (shouldKeepValue(changedElement, oldProperty, newProperty)) {
 	        return;
 	      }
 
@@ -72958,18 +72197,18 @@
 	      const oldProperty = findOldProperty$1(oldTemplate, newProperty),
 	            oldBinding = oldProperty && oldProperty.binding,
 	            oldBindingType = oldBinding && oldBinding.type,
-	            oldTaskDefinition = oldProperty && findOldBusinessObject$1(businessObject, oldProperty),
+	            oldTaskDefinition = findBusinessObject(businessObject, newProperty),
 	            newPropertyValue = newProperty.value,
 	            newBinding = newProperty.binding,
 	            newBindingType = newBinding.type; // (2) update old task definition
 
-	      if (oldProperty && oldTaskDefinition) {
-	        if (!propertyChanged$1(oldTaskDefinition, oldProperty)) {
+	      if (oldTaskDefinition) {
+	        if (!shouldKeepValue(oldTaskDefinition, oldProperty, newProperty)) {
 	          // TODO(pinussilvestrus): for now we only support <type>
 	          // this needs to be adjusted once we support more
 	          let properties = {};
 
-	          if (oldBindingType === 'zeebe:taskDefinition:type') {
+	          if (oldBindingType === 'zeebe:taskDefinition:type' || !oldBindingType) {
 	            properties = {
 	              type: newPropertyValue
 	            };
@@ -73053,27 +72292,27 @@
 	    let propertyName;
 	    newProperties.forEach(newProperty => {
 	      const oldProperty = findOldProperty$1(oldTemplate, newProperty),
-	            oldInputOrOutput = oldProperty && findOldBusinessObject$1(businessObject, oldProperty),
+	            inputOrOutput = findBusinessObject(businessObject, newProperty),
 	            newPropertyValue = newProperty.value,
 	            newBinding = newProperty.binding,
 	            newBindingType = newBinding.type;
 	      let newInputOrOutput, properties; // (2) update old inputs and outputs
 
-	      if (oldProperty && oldInputOrOutput) {
+	      if (inputOrOutput) {
 	        // (2a) exclude old inputs and outputs from cleanup, unless
 	        // a) optional and has empty value, and
 	        // b) not changed
-	        if (shouldUpdate(newPropertyValue, newProperty) || propertyChanged$1(oldInputOrOutput, oldProperty)) {
-	          if (is$1(oldInputOrOutput, 'zeebe:Input')) {
-	            remove$1$1(oldInputs, oldInputOrOutput);
+	        if (shouldUpdate(newPropertyValue, newProperty) || shouldKeepValue(inputOrOutput, oldProperty, newProperty)) {
+	          if (is$1(inputOrOutput, 'zeebe:Input')) {
+	            remove$1$1(oldInputs, inputOrOutput);
 	          } else {
-	            remove$1$1(oldOutputs, oldInputOrOutput);
+	            remove$1$1(oldOutputs, inputOrOutput);
 	          }
 	        } // (2a) do updates (unless changed)
 
 
-	        if (!propertyChanged$1(oldInputOrOutput, oldProperty)) {
-	          if (is$1(oldInputOrOutput, 'zeebe:Input')) {
+	        if (!shouldKeepValue(inputOrOutput, oldProperty, newProperty)) {
+	          if (is$1(inputOrOutput, 'zeebe:Input')) {
 	            properties = {
 	              source: newPropertyValue
 	            };
@@ -73085,7 +72324,7 @@
 
 	          commandStack.execute('element.updateModdleProperties', {
 	            element,
-	            moddleElement: oldInputOrOutput,
+	            moddleElement: inputOrOutput,
 	            properties
 	          });
 	        }
@@ -73180,12 +72419,12 @@
 	    const oldHeaders = taskHeaders.get('zeebe:values') ? taskHeaders.get('zeebe:values').slice() : [];
 	    newProperties.forEach(newProperty => {
 	      const oldProperty = findOldProperty$1(oldTemplate, newProperty),
-	            oldHeader = oldProperty && findOldBusinessObject$1(businessObject, oldProperty),
+	            oldHeader = findBusinessObject(businessObject, newProperty),
 	            newPropertyValue = newProperty.value,
 	            newBinding = newProperty.binding; // (2) update old headers
 
-	      if (oldProperty && oldHeader) {
-	        if (!propertyChanged$1(oldHeader, oldProperty)) {
+	      if (oldHeader) {
+	        if (!shouldKeepValue(oldHeader, oldProperty, newProperty)) {
 	          const properties = {
 	            value: newPropertyValue
 	          };
@@ -73250,50 +72489,50 @@
 	ChangeElementTemplateHandler$1.$inject = ['bpmnFactory', 'bpmnReplace', 'commandStack', 'modeling']; // helpers //////////
 
 	/**
-	 * Find old business object matching specified old property.
+	 * Find business object matching specified property.
 	 *
 	 * @param {djs.model.Base|ModdleElement} element
-	 * @param {Object} oldProperty
+	 * @param {Object} property
 	 *
 	 * @returns {ModdleElement}
 	 */
 
-	function findOldBusinessObject$1(element, oldProperty) {
-	  let businessObject = getBusinessObject(element);
-	  const oldBinding = oldProperty.binding,
-	        oldBindingType = oldBinding.type;
+	function findBusinessObject(element, property) {
+	  const businessObject = getBusinessObject(element);
+	  const binding = property.binding,
+	        bindingType = binding.type;
 
-	  if (oldBindingType === 'zeebe:taskDefinition:type') {
+	  if (bindingType === 'zeebe:taskDefinition:type') {
 	    return findExtension$1(businessObject, 'zeebe:TaskDefinition');
 	  }
 
-	  if (oldBindingType === 'zeebe:input' || oldBindingType === 'zeebe:output') {
-	    businessObject = findExtension$1(businessObject, 'zeebe:IoMapping');
+	  if (bindingType === 'zeebe:input' || bindingType === 'zeebe:output') {
+	    const extensionElements = findExtension$1(businessObject, 'zeebe:IoMapping');
 
-	    if (!businessObject) {
+	    if (!extensionElements) {
 	      return;
 	    }
 
-	    if (oldBindingType === 'zeebe:input') {
-	      return find(businessObject.get('zeebe:inputParameters'), function (oldBusinessObject) {
-	        return oldBusinessObject.get('zeebe:target') === oldBinding.name;
+	    if (bindingType === 'zeebe:input') {
+	      return find(extensionElements.get('zeebe:inputParameters'), function (input) {
+	        return input.get('zeebe:target') === binding.name;
 	      });
 	    } else {
-	      return find(businessObject.get('zeebe:outputParameters'), function (oldBusinessObject) {
-	        return oldBusinessObject.get('zeebe:source') === oldBinding.source;
+	      return find(extensionElements.get('zeebe:outputParameters'), function (output) {
+	        return output.get('zeebe:source') === binding.source;
 	      });
 	    }
 	  }
 
-	  if (oldBindingType === 'zeebe:taskHeader') {
-	    businessObject = findExtension$1(businessObject, 'zeebe:TaskHeaders');
+	  if (bindingType === 'zeebe:taskHeader') {
+	    const extensionElements = findExtension$1(businessObject, 'zeebe:TaskHeaders');
 
-	    if (!businessObject) {
+	    if (!extensionElements) {
 	      return;
 	    }
 
-	    return find(businessObject.get('zeebe:values'), function (oldBusinessObject) {
-	      return oldBusinessObject.get('zeebe:key') === oldBinding.key;
+	    return find(extensionElements.get('zeebe:values'), function (value) {
+	      return value.get('zeebe:key') === binding.key;
 	    });
 	  }
 	}
@@ -73374,6 +72613,30 @@
 	    });
 	  }
 	}
+	/**
+	 * Check whether the existing property should be keept. This is the case if
+	 *  - an old template was set and the value differs from the default
+	 *  - no template was set but the property was set manually
+	 *
+	 * @param {djs.model.Base|ModdleElement} element
+	 * @param {Object} oldProperty
+	 * @param {Object} newProperty
+	 *
+	 * @returns {boolean}
+	 */
+
+
+	function shouldKeepValue(element, oldProperty, newProperty) {
+	  if (newProperty.type === 'Hidden') {
+	    return false;
+	  }
+
+	  if (oldProperty) {
+	    return propertyChanged$1(element, oldProperty);
+	  } else {
+	    return !!getPropertyValue(element, newProperty);
+	  }
+	}
 	/**
 	 * Check whether property was changed after being set by template.
 	 *
@@ -73385,30 +72648,34 @@
 
 
 	function propertyChanged$1(element, oldProperty) {
+	  const oldPropertyValue = oldProperty.value;
+	  return getPropertyValue(element, oldProperty) !== oldPropertyValue;
+	}
+
+	function getPropertyValue(element, property) {
 	  const businessObject = getBusinessObject(element);
-	  const oldBinding = oldProperty.binding,
-	        oldBindingName = oldBinding.name,
-	        oldBindingType = oldBinding.type,
-	        oldPropertyValue = oldProperty.value;
+	  const binding = property.binding,
+	        bindingName = binding.name,
+	        bindingType = binding.type;
 
-	  if (oldBindingType === 'property') {
-	    return businessObject.get(oldBindingName) !== oldPropertyValue;
+	  if (bindingType === 'property') {
+	    return businessObject.get(bindingName);
 	  }
 
-	  if (oldBindingType === 'zeebe:taskDefinition:type') {
-	    return businessObject.get('zeebe:type') !== oldPropertyValue;
+	  if (bindingType === 'zeebe:taskDefinition:type') {
+	    return businessObject.get('zeebe:type');
 	  }
 
-	  if (oldBindingType === 'zeebe:input') {
-	    return businessObject.get('zeebe:source') !== oldPropertyValue;
+	  if (bindingType === 'zeebe:input') {
+	    return businessObject.get('zeebe:source');
 	  }
 
-	  if (oldBindingType === 'zeebe:output') {
-	    return businessObject.get('zeebe:target') !== oldPropertyValue;
+	  if (bindingType === 'zeebe:output') {
+	    return businessObject.get('zeebe:target');
 	  }
 
-	  if (oldBindingType === 'zeebe:taskHeader') {
-	    return businessObject.get('zeebe:value') !== oldPropertyValue;
+	  if (bindingType === 'zeebe:taskHeader') {
+	    return businessObject.get('zeebe:value');
 	  }
 	}
 
@@ -74658,10 +73925,9 @@
 	function propertyGetter$1(element, property) {
 	  return function getValue() {
 	    let businessObject = getBusinessObject(element);
+	    const defaultValue = '';
 	    const {
-	      binding,
-	      optional,
-	      value: defaultValue = ''
+	      binding
 	    } = property;
 	    const {
 	      name,
@@ -74704,10 +73970,9 @@
 
 	        if (inputParameter) {
 	          return inputParameter.get('source');
-	        } // allow empty values for optional parameters
-
+	        }
 
-	        return optional ? '' : defaultValue;
+	        return defaultValue;
 	      } // zeebe:Output
 
 
@@ -74716,10 +73981,9 @@
 
 	        if (outputParameter) {
 	          return outputParameter.get('target');
-	        } // allow empty values for optional parameters
-
+	        }
 
-	        return optional ? '' : defaultValue;
+	        return defaultValue;
 	      }
 	    } // zeebe:taskHeaders
 
@@ -75613,7 +74877,7 @@
 	 * (1) zeebe:CalledDecision
 	 * (2) zeebe:TaskDefinition and zeebe:TaskHeaders
 	 */
-	class CleanUpBusinessRuleTaskBehavior extends CommandInterceptor$1 {
+	class CleanUpBusinessRuleTaskBehavior extends CommandInterceptor {
 	  constructor(commandStack, eventBus) {
 	    super(eventBus);
 
@@ -75850,7 +75114,7 @@
 	/**
 	 * Zeebe BPMN specific behavior for creating call activities.
 	 */
-	class CreateZeebeCallActivityBehavior extends CommandInterceptor$1 {
+	class CreateZeebeCallActivityBehavior extends CommandInterceptor {
 	  constructor(bpmnFactory, eventBus, modeling) {
 	    super(eventBus);
 
@@ -76165,7 +75429,7 @@
 	/**
 	 * Zeebe BPMN specific form definition behavior.
 	 */
-	class FormDefinitionBehavior extends CommandInterceptor$1 {
+	class FormDefinitionBehavior extends CommandInterceptor {
 	  constructor(bpmnFactory, eventBus, modeling) {
 	    super(eventBus);
 
@@ -76288,7 +75552,7 @@
 	 * Zeebe BPMN behavior removing zeebe:AssignmentDefinition elements without
 	 * zeebe:assignee and zeebe:candidateGroups.
 	 */
-	class CleanUpBusinessRuleTaskBehavior$1 extends CommandInterceptor$1 {
+	class CleanUpBusinessRuleTaskBehavior$1 extends CommandInterceptor {
 	  constructor(commandStack, eventBus) {
 	    super(eventBus);
 
@@ -76333,7 +75597,7 @@
 	 * (1) zeebe:propagateAllChildVariables of zeebe:CalledElement is set to true
 	 * (2) zeebe:IoMapping extension element has zeebe:Output elements
 	 */
-	class UpdatePropagateAllChildVariablesBehavior extends CommandInterceptor$1 {
+	class UpdatePropagateAllChildVariablesBehavior extends CommandInterceptor {
 	  constructor(commandStack, eventBus, modeling) {
 	    super(eventBus);
 
@@ -76469,11 +75733,11 @@
 	  'create.group'
 	];
 
-	const LOW_PRIORITY$r = 500;
+	const LOW_PRIORITY$q = 500;
 	class PaletteProvider$1 {
 
 	  constructor(palette) {
-	    palette.registerProvider(LOW_PRIORITY$r, this);
+	    palette.registerProvider(LOW_PRIORITY$q, this);
 	  }
 
 	  getPaletteEntries(element) {
@@ -76517,7 +75781,7 @@
 	  'lane-insert-below'
 	];
 
-	const LOW_PRIORITY$s = 500;
+	const LOW_PRIORITY$r = 500;
 
 	class ContextPadProvider$1 {
 
@@ -76529,7 +75793,7 @@
 	      contextPadProvider.autoPlace = injector.get('autoPlace', false);
 	    }
 
-	    contextPad.registerProvider(LOW_PRIORITY$s, this);
+	    contextPad.registerProvider(LOW_PRIORITY$r, this);
 	  }
 
 	  getContextPadEntries(element) {
@@ -76903,93 +76167,6 @@
 	  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) {
@@ -77270,10 +76447,10 @@
 	) {
 	  this._bpmnRenderer = bpmnRenderer;
 
-	  BaseRenderer$1.call(this, eventBus, HIGH_PRIORITY$r);
+	  BaseRenderer.call(this, eventBus, HIGH_PRIORITY$r);
 	}
 
-	inherits_browser(IconsRenderer, BaseRenderer$1);
+	inherits_browser(IconsRenderer, BaseRenderer);
 
 	IconsRenderer.prototype.canRender = function(element) {
 
@@ -77298,8 +76475,10 @@
 	  var icon = create$2('image');
 	  attr$2(icon, {
 	    href: modelerTemplateIcon,
-	    x: 4,
-	    y: 4
+	    x: 5,
+	    y: 5,
+	    width: 18,
+	    height: 18
 	  });
 
 	  append$1(parentGfx, icon);