bpmn-js 9.0.2 → 9.1.0

package/dist/bpmn-viewer.development.js

@@ -1,5 +1,5 @@
 /*!
- * bpmn-js - bpmn-viewer v9.0.2
+ * bpmn-js - bpmn-viewer v9.1.0
  *
  * Copyright (c) 2014-present, camunda Services GmbH
  *
@@ -8,7 +8,7 @@
  *
  * Source Code: https://github.com/bpmn-io/bpmn-js
  *
- * Date: 2022-02-23
+ * Date: 2022-05-18
  */
 (function (global, factory) {
 	typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
@@ -58,29 +58,29 @@
 	 * @return {Array<?>}
 	 */
 
-	var nativeToString = Object.prototype.toString;
-	var nativeHasOwnProperty = Object.prototype.hasOwnProperty;
-	function isUndefined$1(obj) {
+	var nativeToString$2 = Object.prototype.toString;
+	var nativeHasOwnProperty$2 = Object.prototype.hasOwnProperty;
+	function isUndefined$3(obj) {
 	  return obj === undefined;
 	}
 	function isDefined(obj) {
 	  return obj !== undefined;
 	}
-	function isArray$1(obj) {
-	  return nativeToString.call(obj) === '[object Array]';
+	function isArray$3(obj) {
+	  return nativeToString$2.call(obj) === '[object Array]';
 	}
 	function isObject(obj) {
-	  return nativeToString.call(obj) === '[object Object]';
+	  return nativeToString$2.call(obj) === '[object Object]';
 	}
 	function isNumber(obj) {
-	  return nativeToString.call(obj) === '[object Number]';
+	  return nativeToString$2.call(obj) === '[object Number]';
 	}
 	function isFunction(obj) {
-	  var tag = nativeToString.call(obj);
+	  var tag = nativeToString$2.call(obj);
 	  return tag === '[object Function]' || tag === '[object AsyncFunction]' || tag === '[object GeneratorFunction]' || tag === '[object AsyncGeneratorFunction]' || tag === '[object Proxy]';
 	}
 	function isString(obj) {
-	  return nativeToString.call(obj) === '[object String]';
+	  return nativeToString$2.call(obj) === '[object String]';
 	}
 	/**
 	 * Return true, if target owns a property with the given key.
@@ -91,8 +91,8 @@
 	 * @return {Boolean}
 	 */
 
-	function has(target, key) {
-	  return nativeHasOwnProperty.call(target, key);
+	function has$2(target, key) {
+	  return nativeHasOwnProperty$2.call(target, key);
 	}
 
 	/**
@@ -107,7 +107,7 @@
 	function find(collection, matcher) {
 	  matcher = toMatcher(matcher);
 	  var match;
-	  forEach(collection, function (val, key) {
+	  forEach$2(collection, function (val, key) {
 	    if (matcher(val, key)) {
 	      match = val;
 	      return false;
@@ -126,7 +126,7 @@
 
 	function filter(collection, matcher) {
 	  var result = [];
-	  forEach(collection, function (val, key) {
+	  forEach$2(collection, function (val, key) {
 	    if (matcher(val, key)) {
 	      result.push(val);
 	    }
@@ -143,17 +143,17 @@
 	 * @return {Object} return result that stopped the iteration
 	 */
 
-	function forEach(collection, iterator) {
+	function forEach$2(collection, iterator) {
 	  var val, result;
 
-	  if (isUndefined$1(collection)) {
+	  if (isUndefined$3(collection)) {
 	    return;
 	  }
 
-	  var convertKey = isArray$1(collection) ? toNum : identity;
+	  var convertKey = isArray$3(collection) ? toNum$2 : identity$2;
 
 	  for (var key in collection) {
-	    if (has(collection, key)) {
+	    if (has$2(collection, key)) {
 	      val = collection[key];
 	      result = iterator(val, convertKey(key));
 
@@ -174,7 +174,7 @@
 	 */
 
 	function reduce(collection, iterator, result) {
-	  forEach(collection, function (value, idx) {
+	  forEach$2(collection, function (value, idx) {
 	    result = iterator(result, value, idx);
 	  });
 	  return result;
@@ -217,9 +217,9 @@
 	 * @return {Array} transformed collection
 	 */
 
-	function map$1(collection, fn) {
+	function map(collection, fn) {
 	  var result = [];
-	  forEach(collection, function (val, key) {
+	  forEach$2(collection, function (val, key) {
 	    result.push(fn(val, key));
 	  });
 	  return result;
@@ -252,11 +252,11 @@
 	  };
 	}
 
-	function identity(arg) {
+	function identity$2(arg) {
 	  return arg;
 	}
 
-	function toNum(arg) {
+	function toNum$2(arg) {
 	  return Number(arg);
 	}
 
@@ -338,7 +338,7 @@
 	 * @return {Function} bound function
 	 */
 
-	function bind$2(fn, target) {
+	function bind(fn, target) {
 	  return fn.bind(target);
 	}
 
@@ -388,7 +388,7 @@
 	function pick(target, properties) {
 	  var result = {};
 	  var obj = Object(target);
-	  forEach(properties, function (prop) {
+	  forEach$2(properties, function (prop) {
 	    if (prop in obj) {
 	      result[prop] = target[prop];
 	    }
@@ -407,7 +407,7 @@
 	function omit(target, properties) {
 	  var result = {};
 	  var obj = Object(target);
-	  forEach(obj, function (prop, key) {
+	  forEach$2(obj, function (prop, key) {
 	    if (properties.indexOf(key) === -1) {
 	      result[key] = prop;
 	    }
@@ -443,7 +443,7 @@
 	    }
 	  });
 
-	  eventBus.on([ 'render.getShapePath', 'render.getConnectionPath'], renderPriority, function(evt, element) {
+	  eventBus.on([ 'render.getShapePath', 'render.getConnectionPath' ], renderPriority, function(evt, element) {
 	    if (self.canRender(element)) {
 	      if (evt.type === 'render.getShapePath') {
 	        return self.getShapePath(element);
@@ -516,6 +516,21 @@
 	  return bo && (typeof bo.$instanceOf === 'function') && bo.$instanceOf(type);
 	}
 
+
+	/**
+	 * Return true if element has any of the given types.
+	 *
+	 * @param {djs.model.Base} element
+	 * @param {Array<string>} types
+	 *
+	 * @return {boolean}
+	 */
+	function isAny(element, types) {
+	  return some(types, function(t) {
+	    return is$1(element, t);
+	  });
+	}
+
 	/**
 	 * Return the business object for a given element.
 	 *
@@ -807,9 +822,9 @@
 	  return -1;
 	}
 
-	var re$1 = /\s+/;
+	var re$2 = /\s+/;
 
-	var toString$1 = Object.prototype.toString;
+	var toString$2 = Object.prototype.toString;
 
 	function defined(o) {
 	  return typeof o !== 'undefined';
@@ -823,11 +838,11 @@
 	 * @api public
 	 */
 
-	function classes$1(el) {
-	  return new ClassList$1(el);
+	function classes$2(el) {
+	  return new ClassList$2(el);
 	}
 
-	function ClassList$1(el) {
+	function ClassList$2(el) {
 	  if (!el || !el.nodeType) {
 	    throw new Error('A DOM element reference is required');
 	  }
@@ -843,7 +858,7 @@
 	 * @api public
 	 */
 
-	ClassList$1.prototype.add = function(name) {
+	ClassList$2.prototype.add = function(name) {
 
 	  // classList
 	  if (this.list) {
@@ -877,8 +892,8 @@
 	 * @api public
 	 */
 
-	ClassList$1.prototype.remove = function(name) {
-	  if ('[object RegExp]' === toString$1.call(name)) {
+	ClassList$2.prototype.remove = function(name) {
+	  if ('[object RegExp]' === toString$2.call(name)) {
 	    return this.removeMatching(name);
 	  }
 
@@ -906,7 +921,7 @@
 	 * @api private
 	 */
 
-	ClassList$1.prototype.removeMatching = function(re) {
+	ClassList$2.prototype.removeMatching = function(re) {
 	  var arr = this.array();
 	  for (var i = 0; i < arr.length; i++) {
 	    if (re.test(arr[i])) {
@@ -928,7 +943,7 @@
 	 * @api public
 	 */
 
-	ClassList$1.prototype.toggle = function(name, force) {
+	ClassList$2.prototype.toggle = function(name, force) {
 	  // classList
 	  if (this.list) {
 	    if (defined(force)) {
@@ -966,10 +981,10 @@
 	 * @api public
 	 */
 
-	ClassList$1.prototype.array = function() {
+	ClassList$2.prototype.array = function() {
 	  var className = this.el.getAttribute('class') || '';
 	  var str = className.replace(/^\s+|\s+$/g, '');
-	  var arr = str.split(re$1);
+	  var arr = str.split(re$2);
 	  if ('' === arr[0]) {
 	    arr.shift();
 	  }
@@ -984,8 +999,8 @@
 	 * @api public
 	 */
 
-	ClassList$1.prototype.has =
-	ClassList$1.prototype.contains = function(name) {
+	ClassList$2.prototype.has =
+	ClassList$2.prototype.contains = function(name) {
 	  return (
 	    this.list ?
 	      this.list.contains(name) :
@@ -993,7 +1008,7 @@
 	  );
 	};
 
-	function remove$2(element) {
+	function remove$3(element) {
 	  var parent = element.parentNode;
 
 	  if (parent) {
@@ -1017,7 +1032,7 @@
 	  var child;
 
 	  while ((child = element.firstChild)) {
-	    remove$2(child);
+	    remove$3(child);
 	  }
 
 	  return element;
@@ -1033,7 +1048,7 @@
 
 	var SVG_START = '<svg xmlns="' + ns.svg + '"';
 
-	function parse$1(svg) {
+	function parse$2(svg) {
 
 	  var unwrap = false;
 
@@ -1093,7 +1108,7 @@
 	  var element;
 
 	  if (name.charAt(0) === '<') {
-	    element = parse$1(name).firstChild;
+	    element = parse$2(name).firstChild;
 	    element = document.importNode(element, true);
 	  } else {
 	    element = document.createElementNS(ns.svg, name);
@@ -1245,7 +1260,7 @@
 
 	function set(element, svg) {
 
-	  var parsed = parse$1(svg);
+	  var parsed = parse$2(svg);
 
 	  // clear element contents
 	  clear$1(element);
@@ -1524,34 +1539,104 @@
 	}
 
 	/**
-	 * Set attribute `name` to `val`, or get attr `name`.
+	 * Flatten array, one level deep.
 	 *
-	 * @param {Element} el
-	 * @param {String} name
-	 * @param {String} [val]
-	 * @api public
+	 * @param {Array<?>} arr
+	 *
+	 * @return {Array<?>}
 	 */
-	function attr(el, name, val) {
-	  // get
-	  if (arguments.length == 2) {
-	    return el.getAttribute(name);
+
+	var nativeToString$1 = Object.prototype.toString;
+	var nativeHasOwnProperty$1 = Object.prototype.hasOwnProperty;
+	function isUndefined$2(obj) {
+	  return obj === undefined;
+	}
+	function isArray$2(obj) {
+	  return nativeToString$1.call(obj) === '[object Array]';
+	}
+	/**
+	 * Return true, if target owns a property with the given key.
+	 *
+	 * @param {Object} target
+	 * @param {String} key
+	 *
+	 * @return {Boolean}
+	 */
+
+	function has$1(target, key) {
+	  return nativeHasOwnProperty$1.call(target, key);
+	}
+	/**
+	 * Iterate over collection; returning something
+	 * (non-undefined) will stop iteration.
+	 *
+	 * @param  {Array|Object} collection
+	 * @param  {Function} iterator
+	 *
+	 * @return {Object} return result that stopped the iteration
+	 */
+
+	function forEach$1(collection, iterator) {
+	  var val, result;
+
+	  if (isUndefined$2(collection)) {
+	    return;
 	  }
 
-	  // remove
-	  if (val === null) {
-	    return el.removeAttribute(name);
+	  var convertKey = isArray$2(collection) ? toNum$1 : identity$1;
+
+	  for (var key in collection) {
+	    if (has$1(collection, key)) {
+	      val = collection[key];
+	      result = iterator(val, convertKey(key));
+
+	      if (result === false) {
+	        return val;
+	      }
+	    }
 	  }
+	}
 
-	  // set
-	  el.setAttribute(name, val);
+	function identity$1(arg) {
+	  return arg;
+	}
 
-	  return el;
+	function toNum$1(arg) {
+	  return Number(arg);
 	}
 
-	var indexOf = [].indexOf;
+	/**
+	 * Assigns style attributes in a style-src compliant way.
+	 *
+	 * @param {Element} element
+	 * @param {...Object} styleSources
+	 *
+	 * @return {Element} the element
+	 */
+	function assign$1$1(element) {
+	  var target = element.style;
 
-	var indexof = function(arr, obj){
-	  if (indexOf) return arr.indexOf(obj);
+	  for (var _len = arguments.length, styleSources = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+	    styleSources[_key - 1] = arguments[_key];
+	  }
+
+	  forEach$1(styleSources, function (style) {
+	    if (!style) {
+	      return;
+	    }
+
+	    forEach$1(style, function (value, key) {
+	      target[key] = value;
+	    });
+	  });
+
+	  return element;
+	}
+
+	var indexOf$1 = [].indexOf;
+
+	var indexof$1 = function(arr, obj){
+	  if (indexOf$1) return arr.indexOf(obj);
 	  for (var i = 0; i < arr.length; ++i) {
 	    if (arr[i] === obj) return i;
 	  }
@@ -1568,13 +1653,13 @@
 	 * Whitespace regexp.
 	 */
 
-	var re = /\s+/;
+	var re$1 = /\s+/;
 
 	/**
 	 * toString reference.
 	 */
 
-	var toString = Object.prototype.toString;
+	var toString$1 = Object.prototype.toString;
 
 	/**
 	 * Wrap `el` in a `ClassList`.
@@ -1584,8 +1669,8 @@
 	 * @api public
 	 */
 
-	function classes(el) {
-	  return new ClassList(el);
+	function classes$1(el) {
+	  return new ClassList$1(el);
 	}
 
 	/**
@@ -1595,7 +1680,7 @@
 	 * @api private
 	 */
 
-	function ClassList(el) {
+	function ClassList$1(el) {
 	  if (!el || !el.nodeType) {
 	    throw new Error('A DOM element reference is required');
 	  }
@@ -1611,7 +1696,7 @@
 	 * @api public
 	 */
 
-	ClassList.prototype.add = function (name) {
+	ClassList$1.prototype.add = function (name) {
 	  // classList
 	  if (this.list) {
 	    this.list.add(name);
@@ -1620,7 +1705,7 @@
 
 	  // fallback
 	  var arr = this.array();
-	  var i = indexof(arr, name);
+	  var i = indexof$1(arr, name);
 	  if (!~i) arr.push(name);
 	  this.el.className = arr.join(' ');
 	  return this;
@@ -1636,8 +1721,8 @@
 	 * @api public
 	 */
 
-	ClassList.prototype.remove = function (name) {
-	  if ('[object RegExp]' == toString.call(name)) {
+	ClassList$1.prototype.remove = function (name) {
+	  if ('[object RegExp]' == toString$1.call(name)) {
 	    return this.removeMatching(name);
 	  }
 
@@ -1649,7 +1734,7 @@
 
 	  // fallback
 	  var arr = this.array();
-	  var i = indexof(arr, name);
+	  var i = indexof$1(arr, name);
 	  if (~i) arr.splice(i, 1);
 	  this.el.className = arr.join(' ');
 	  return this;
@@ -1663,7 +1748,7 @@
 	 * @api private
 	 */
 
-	ClassList.prototype.removeMatching = function (re) {
+	ClassList$1.prototype.removeMatching = function (re) {
 	  var arr = this.array();
 	  for (var i = 0; i < arr.length; i++) {
 	    if (re.test(arr[i])) {
@@ -1685,7 +1770,7 @@
 	 * @api public
 	 */
 
-	ClassList.prototype.toggle = function (name, force) {
+	ClassList$1.prototype.toggle = function (name, force) {
 	  // classList
 	  if (this.list) {
 	    if ('undefined' !== typeof force) {
@@ -1723,10 +1808,10 @@
 	 * @api public
 	 */
 
-	ClassList.prototype.array = function () {
+	ClassList$1.prototype.array = function () {
 	  var className = this.el.getAttribute('class') || '';
 	  var str = className.replace(/^\s+|\s+$/g, '');
-	  var arr = str.split(re);
+	  var arr = str.split(re$1);
 	  if ('' === arr[0]) arr.shift();
 	  return arr;
 	};
@@ -1739,34 +1824,19 @@
 	 * @api public
 	 */
 
-	ClassList.prototype.has = ClassList.prototype.contains = function (name) {
-	  return this.list ? this.list.contains(name) : !!~indexof(this.array(), name);
+	ClassList$1.prototype.has = ClassList$1.prototype.contains = function (name) {
+	  return this.list ? this.list.contains(name) : !!~indexof$1(this.array(), name);
 	};
 
-	/**
-	 * Remove all children from the given element.
-	 */
-	function clear(el) {
-
-	  var c;
-
-	  while (el.childNodes.length) {
-	    c = el.childNodes[0];
-	    el.removeChild(c);
-	  }
-
-	  return el;
-	}
-
-	var proto = typeof Element !== 'undefined' ? Element.prototype : {};
-	var vendor = proto.matches
-	  || proto.matchesSelector
-	  || proto.webkitMatchesSelector
-	  || proto.mozMatchesSelector
-	  || proto.msMatchesSelector
-	  || proto.oMatchesSelector;
+	var proto$1 = typeof Element !== 'undefined' ? Element.prototype : {};
+	var vendor$1 = proto$1.matches
+	  || proto$1.matchesSelector
+	  || proto$1.webkitMatchesSelector
+	  || proto$1.mozMatchesSelector
+	  || proto$1.msMatchesSelector
+	  || proto$1.oMatchesSelector;
 
-	var matchesSelector = match;
+	var matchesSelector$1 = match$1;
 
 	/**
 	 * Match `el` to `selector`.
@@ -1777,9 +1847,9 @@
 	 * @api public
 	 */
 
-	function match(el, selector) {
+	function match$1(el, selector) {
 	  if (!el || el.nodeType !== 1) return false;
-	  if (vendor) return vendor.call(el, selector);
+	  if (vendor$1) return vendor$1.call(el, selector);
 	  var nodes = el.parentNode.querySelectorAll(selector);
 	  for (var i = 0; i < nodes.length; i++) {
 	    if (nodes[i] == el) return true;
@@ -1794,24 +1864,24 @@
 	 * @param {String} selector
 	 * @param {Boolean} checkYourSelf (optional)
 	 */
-	function closest (element, selector, checkYourSelf) {
+	function closest$1 (element, selector, checkYourSelf) {
 	  var currentElem = checkYourSelf ? element : element.parentNode;
 
 	  while (currentElem && currentElem.nodeType !== document.DOCUMENT_NODE && currentElem.nodeType !== document.DOCUMENT_FRAGMENT_NODE) {
 
-	    if (matchesSelector(currentElem, selector)) {
+	    if (matchesSelector$1(currentElem, selector)) {
 	      return currentElem;
 	    }
 
 	    currentElem = currentElem.parentNode;
 	  }
 
-	  return matchesSelector(currentElem, selector) ? currentElem : null;
+	  return matchesSelector$1(currentElem, selector) ? currentElem : null;
 	}
 
-	var bind = window.addEventListener ? 'addEventListener' : 'attachEvent',
-	    unbind = window.removeEventListener ? 'removeEventListener' : 'detachEvent',
-	    prefix$6 = bind !== 'addEventListener' ? 'on' : '';
+	var bind$1$1 = window.addEventListener ? 'addEventListener' : 'attachEvent',
+	    unbind$2 = window.removeEventListener ? 'removeEventListener' : 'detachEvent',
+	    prefix$7 = bind$1$1 !== 'addEventListener' ? 'on' : '';
 
 	/**
 	 * Bind `el` event `type` to `fn`.
@@ -1824,8 +1894,8 @@
 	 * @api public
 	 */
 
-	var bind_1 = function(el, type, fn, capture){
-	  el[bind](prefix$6 + type, fn, capture || false);
+	var bind_1$1 = function(el, type, fn, capture){
+	  el[bind$1$1](prefix$7 + type, fn, capture || false);
 	  return fn;
 	};
 
@@ -1840,14 +1910,14 @@
 	 * @api public
 	 */
 
-	var unbind_1 = function(el, type, fn, capture){
-	  el[unbind](prefix$6 + type, fn, capture || false);
+	var unbind_1$1 = function(el, type, fn, capture){
+	  el[unbind$2](prefix$7 + type, fn, capture || false);
 	  return fn;
 	};
 
-	var componentEvent = {
-		bind: bind_1,
-		unbind: unbind_1
+	var componentEvent$1 = {
+		bind: bind_1$1,
+		unbind: unbind_1$1
 	};
 
 	/**
@@ -1870,16 +1940,16 @@
 
 	// Some events don't bubble, so we want to bind to the capture phase instead
 	// when delegating.
-	var forceCaptureEvents = ['focus', 'blur'];
+	var forceCaptureEvents$1 = ['focus', 'blur'];
 
-	function bind$1(el, selector, type, fn, capture) {
-	  if (forceCaptureEvents.indexOf(type) !== -1) {
+	function bind$2$1(el, selector, type, fn, capture) {
+	  if (forceCaptureEvents$1.indexOf(type) !== -1) {
 	    capture = true;
 	  }
 
-	  return componentEvent.bind(el, type, function (e) {
+	  return componentEvent$1.bind(el, type, function (e) {
 	    var target = e.target || e.srcElement;
-	    e.delegateTarget = closest(target, selector, true);
+	    e.delegateTarget = closest$1(target, selector, true);
 	    if (e.delegateTarget) {
 	      fn.call(el, e);
 	    }
@@ -1895,75 +1965,75 @@
 	 * @param {Boolean} capture
 	 * @api public
 	 */
-	function unbind$1(el, type, fn, capture) {
-	  if (forceCaptureEvents.indexOf(type) !== -1) {
+	function unbind$1$1(el, type, fn, capture) {
+	  if (forceCaptureEvents$1.indexOf(type) !== -1) {
 	    capture = true;
 	  }
 
-	  return componentEvent.unbind(el, type, fn, capture);
+	  return componentEvent$1.unbind(el, type, fn, capture);
 	}
 
-	var delegate = {
-	  bind: bind$1,
-	  unbind: unbind$1
+	var delegate$1 = {
+	  bind: bind$2$1,
+	  unbind: unbind$1$1
 	};
 
 	/**
 	 * Expose `parse`.
 	 */
 
-	var domify = parse;
+	var domify$1 = parse$1;
 
 	/**
 	 * Tests for browser support.
 	 */
 
-	var innerHTMLBug = false;
-	var bugTestDiv;
+	var innerHTMLBug$1 = false;
+	var bugTestDiv$1;
 	if (typeof document !== 'undefined') {
-	  bugTestDiv = document.createElement('div');
+	  bugTestDiv$1 = document.createElement('div');
 	  // Setup
-	  bugTestDiv.innerHTML = '  <link/><table></table><a href="/a">a</a><input type="checkbox"/>';
+	  bugTestDiv$1.innerHTML = '  <link/><table></table><a href="/a">a</a><input type="checkbox"/>';
 	  // Make sure that link elements get serialized correctly by innerHTML
 	  // This requires a wrapper element in IE
-	  innerHTMLBug = !bugTestDiv.getElementsByTagName('link').length;
-	  bugTestDiv = undefined;
+	  innerHTMLBug$1 = !bugTestDiv$1.getElementsByTagName('link').length;
+	  bugTestDiv$1 = undefined;
 	}
 
 	/**
 	 * Wrap map from jquery.
 	 */
 
-	var map = {
+	var map$1$1 = {
 	  legend: [1, '<fieldset>', '</fieldset>'],
 	  tr: [2, '<table><tbody>', '</tbody></table>'],
 	  col: [2, '<table><tbody></tbody><colgroup>', '</colgroup></table>'],
 	  // for script/link/style tags to work in IE6-8, you have to wrap
 	  // in a div with a non-whitespace character in front, ha!
-	  _default: innerHTMLBug ? [1, 'X<div>', '</div>'] : [0, '', '']
+	  _default: innerHTMLBug$1 ? [1, 'X<div>', '</div>'] : [0, '', '']
 	};
 
-	map.td =
-	map.th = [3, '<table><tbody><tr>', '</tr></tbody></table>'];
+	map$1$1.td =
+	map$1$1.th = [3, '<table><tbody><tr>', '</tr></tbody></table>'];
 
-	map.option =
-	map.optgroup = [1, '<select multiple="multiple">', '</select>'];
+	map$1$1.option =
+	map$1$1.optgroup = [1, '<select multiple="multiple">', '</select>'];
 
-	map.thead =
-	map.tbody =
-	map.colgroup =
-	map.caption =
-	map.tfoot = [1, '<table>', '</table>'];
+	map$1$1.thead =
+	map$1$1.tbody =
+	map$1$1.colgroup =
+	map$1$1.caption =
+	map$1$1.tfoot = [1, '<table>', '</table>'];
 
-	map.polyline =
-	map.ellipse =
-	map.polygon =
-	map.circle =
-	map.text =
-	map.line =
-	map.path =
-	map.rect =
-	map.g = [1, '<svg xmlns="http://www.w3.org/2000/svg" version="1.1">','</svg>'];
+	map$1$1.polyline =
+	map$1$1.ellipse =
+	map$1$1.polygon =
+	map$1$1.circle =
+	map$1$1.text =
+	map$1$1.line =
+	map$1$1.path =
+	map$1$1.rect =
+	map$1$1.g = [1, '<svg xmlns="http://www.w3.org/2000/svg" version="1.1">','</svg>'];
 
 	/**
 	 * Parse `html` and return a DOM Node instance, which could be a TextNode,
@@ -1976,7 +2046,7 @@
 	 * @api private
 	 */
 
-	function parse(html, doc) {
+	function parse$1(html, doc) {
 	  if ('string' != typeof html) throw new TypeError('String expected');
 
 	  // default to the global `document` object
@@ -1998,7 +2068,7 @@
 	  }
 
 	  // wrap map
-	  var wrap = map[tag] || map._default;
+	  var wrap = map$1$1[tag] || map$1$1._default;
 	  var depth = wrap[0];
 	  var prefix = wrap[1];
 	  var suffix = wrap[2];
@@ -2020,19 +2090,13 @@
 	  return fragment;
 	}
 
-	function query(selector, el) {
+	function query$1(selector, el) {
 	  el = el || document;
 
 	  return el.querySelector(selector);
 	}
 
-	function all(selector, el) {
-	  el = el || document;
-
-	  return el.querySelectorAll(selector);
-	}
-
-	function remove$1(el) {
+	function remove$2(el) {
 	  el.parentNode && el.parentNode.removeChild(el);
 	}
 
@@ -2304,7 +2368,7 @@
 	      orient: 'auto'
 	    });
 
-	    var defs = query('defs', canvas._svg);
+	    var defs = query$1('defs', canvas._svg);
 
 	    if (!defs) {
 	      defs = create$1('defs');
@@ -2646,7 +2710,7 @@
 
 	    var text = textRenderer.createText(label || '', options);
 
-	    classes$1(text).add('djs-label');
+	    classes$2(text).add('djs-label');
 
 	    append(parentGfx, text);
 
@@ -4004,7 +4068,7 @@
 	      };
 	    }
 
-	    forEach(taskMarkers, function(marker) {
+	    forEach$2(taskMarkers, function(marker) {
 	      renderer(marker)(parentGfx, element, position);
 	    });
 
@@ -4297,7 +4361,8 @@
 	      id: 'helper-svg',
 	      width: 0,
 	      height: 0,
-	      style: 'visibility: hidden; position: fixed'
+	      visibility: 'hidden',
+	      position: 'fixed'
 	    });
 
 	    document.body.appendChild(helperSvg);
@@ -4424,7 +4489,7 @@
 
 	  // layout each line taking into account that parent
 	  // shape might resize to fit text size
-	  forEach(layouted, function(line) {
+	  forEach$2(layouted, function(line) {
 
 	    var x;
 
@@ -4455,7 +4520,7 @@
 	    append(textElement, tspan);
 	  });
 
-	  remove$2(helperText);
+	  remove$3(helperText);
 
 	  var dimensions = {
 	    width: maxLineWidth,
@@ -5521,123 +5586,731 @@
 
 
 	/**
-	 * add label for an element
+	 * add label for an element
+	 */
+	BpmnImporter.prototype.addLabel = function(semantic, di, element) {
+	  var bounds,
+	      text,
+	      label;
+
+	  bounds = getExternalLabelBounds(di, element);
+
+	  text = getLabel(element);
+
+	  if (text) {
+
+	    // get corrected bounds from actual layouted text
+	    bounds = this._textRenderer.getExternalLabelBounds(bounds, text);
+	  }
+
+	  label = this._elementFactory.createLabel(elementData(semantic, di, {
+	    id: semantic.id + '_label',
+	    labelTarget: element,
+	    type: 'label',
+	    hidden: element.hidden || !getLabel(element),
+	    x: Math.round(bounds.x),
+	    y: Math.round(bounds.y),
+	    width: Math.round(bounds.width),
+	    height: Math.round(bounds.height)
+	  }));
+
+	  return this._canvas.addShape(label, element.parent);
+	};
+
+	/**
+	 * Return the drawn connection end based on the given side.
+	 *
+	 * @throws {Error} if the end is not yet drawn
+	 */
+	BpmnImporter.prototype._getEnd = function(semantic, side) {
+
+	  var element,
+	      refSemantic,
+	      type = semantic.$type,
+	      translate = this._translate;
+
+	  refSemantic = semantic[side + 'Ref'];
+
+	  // handle mysterious isMany DataAssociation#sourceRef
+	  if (side === 'source' && type === 'bpmn:DataInputAssociation') {
+	    refSemantic = refSemantic && refSemantic[0];
+	  }
+
+	  // fix source / target for DataInputAssociation / DataOutputAssociation
+	  if (side === 'source' && type === 'bpmn:DataOutputAssociation' ||
+	      side === 'target' && type === 'bpmn:DataInputAssociation') {
+
+	    refSemantic = semantic.$parent;
+	  }
+
+	  element = refSemantic && this._getElement(refSemantic);
+
+	  if (element) {
+	    return element;
+	  }
+
+	  if (refSemantic) {
+	    throw notYetDrawn(translate, semantic, refSemantic, side + 'Ref');
+	  } else {
+	    throw new Error(translate('{semantic}#{side} Ref not specified', {
+	      semantic: elementToString(semantic),
+	      side: side
+	    }));
+	  }
+	};
+
+	BpmnImporter.prototype._getSource = function(semantic) {
+	  return this._getEnd(semantic, 'source');
+	};
+
+	BpmnImporter.prototype._getTarget = function(semantic) {
+	  return this._getEnd(semantic, 'target');
+	};
+
+
+	BpmnImporter.prototype._getElement = function(semantic) {
+	  return this._elementRegistry.get(semantic.id);
+	};
+
+
+	// helpers ////////////////////
+
+	function isPointInsideBBox(bbox, point) {
+	  var x = point.x,
+	      y = point.y;
+
+	  return x >= bbox.x &&
+	    x <= bbox.x + bbox.width &&
+	    y >= bbox.y &&
+	    y <= bbox.y + bbox.height;
+	}
+
+	function isFrameElement$1(semantic) {
+	  return is$1(semantic, 'bpmn:Group');
+	}
+
+	var ImportModule = {
+	  __depends__: [
+	    TranslateModule
+	  ],
+	  bpmnImporter: [ 'type', BpmnImporter ]
+	};
+
+	var CoreModule$1 = {
+	  __depends__: [
+	    DrawModule$1,
+	    ImportModule
+	  ]
+	};
+
+	/**
+	 * Flatten array, one level deep.
+	 *
+	 * @param {Array<?>} arr
+	 *
+	 * @return {Array<?>}
+	 */
+
+	var nativeToString = Object.prototype.toString;
+	var nativeHasOwnProperty = Object.prototype.hasOwnProperty;
+	function isUndefined$1(obj) {
+	  return obj === undefined;
+	}
+	function isArray$1(obj) {
+	  return nativeToString.call(obj) === '[object Array]';
+	}
+	/**
+	 * Return true, if target owns a property with the given key.
+	 *
+	 * @param {Object} target
+	 * @param {String} key
+	 *
+	 * @return {Boolean}
+	 */
+
+	function has(target, key) {
+	  return nativeHasOwnProperty.call(target, key);
+	}
+	/**
+	 * Iterate over collection; returning something
+	 * (non-undefined) will stop iteration.
+	 *
+	 * @param  {Array|Object} collection
+	 * @param  {Function} iterator
+	 *
+	 * @return {Object} return result that stopped the iteration
+	 */
+
+	function forEach(collection, iterator) {
+	  var val, result;
+
+	  if (isUndefined$1(collection)) {
+	    return;
+	  }
+
+	  var convertKey = isArray$1(collection) ? toNum : identity;
+
+	  for (var key in collection) {
+	    if (has(collection, key)) {
+	      val = collection[key];
+	      result = iterator(val, convertKey(key));
+
+	      if (result === false) {
+	        return val;
+	      }
+	    }
+	  }
+	}
+
+	function identity(arg) {
+	  return arg;
+	}
+
+	function toNum(arg) {
+	  return Number(arg);
+	}
+
+	/**
+	 * Assigns style attributes in a style-src compliant way.
+	 *
+	 * @param {Element} element
+	 * @param {...Object} styleSources
+	 *
+	 * @return {Element} the element
+	 */
+	function assign$1(element) {
+	  var target = element.style;
+
+	  for (var _len = arguments.length, styleSources = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+	    styleSources[_key - 1] = arguments[_key];
+	  }
+
+	  forEach(styleSources, function (style) {
+	    if (!style) {
+	      return;
+	    }
+
+	    forEach(style, function (value, key) {
+	      target[key] = value;
+	    });
+	  });
+
+	  return element;
+	}
+
+	/**
+	 * Set attribute `name` to `val`, or get attr `name`.
+	 *
+	 * @param {Element} el
+	 * @param {String} name
+	 * @param {String} [val]
+	 * @api public
+	 */
+	function attr(el, name, val) {
+	  // get
+	  if (arguments.length == 2) {
+	    return el.getAttribute(name);
+	  }
+
+	  // remove
+	  if (val === null) {
+	    return el.removeAttribute(name);
+	  }
+
+	  // set
+	  el.setAttribute(name, val);
+
+	  return el;
+	}
+
+	var indexOf = [].indexOf;
+
+	var indexof = function(arr, obj){
+	  if (indexOf) return arr.indexOf(obj);
+	  for (var i = 0; i < arr.length; ++i) {
+	    if (arr[i] === obj) return i;
+	  }
+	  return -1;
+	};
+
+	/**
+	 * Taken from https://github.com/component/classes
+	 *
+	 * Without the component bits.
+	 */
+
+	/**
+	 * Whitespace regexp.
+	 */
+
+	var re = /\s+/;
+
+	/**
+	 * toString reference.
+	 */
+
+	var toString = Object.prototype.toString;
+
+	/**
+	 * Wrap `el` in a `ClassList`.
+	 *
+	 * @param {Element} el
+	 * @return {ClassList}
+	 * @api public
+	 */
+
+	function classes(el) {
+	  return new ClassList(el);
+	}
+
+	/**
+	 * Initialize a new ClassList for `el`.
+	 *
+	 * @param {Element} el
+	 * @api private
+	 */
+
+	function ClassList(el) {
+	  if (!el || !el.nodeType) {
+	    throw new Error('A DOM element reference is required');
+	  }
+	  this.el = el;
+	  this.list = el.classList;
+	}
+
+	/**
+	 * Add class `name` if not already present.
+	 *
+	 * @param {String} name
+	 * @return {ClassList}
+	 * @api public
+	 */
+
+	ClassList.prototype.add = function (name) {
+	  // classList
+	  if (this.list) {
+	    this.list.add(name);
+	    return this;
+	  }
+
+	  // fallback
+	  var arr = this.array();
+	  var i = indexof(arr, name);
+	  if (!~i) arr.push(name);
+	  this.el.className = arr.join(' ');
+	  return this;
+	};
+
+	/**
+	 * Remove class `name` when present, or
+	 * pass a regular expression to remove
+	 * any which match.
+	 *
+	 * @param {String|RegExp} name
+	 * @return {ClassList}
+	 * @api public
+	 */
+
+	ClassList.prototype.remove = function (name) {
+	  if ('[object RegExp]' == toString.call(name)) {
+	    return this.removeMatching(name);
+	  }
+
+	  // classList
+	  if (this.list) {
+	    this.list.remove(name);
+	    return this;
+	  }
+
+	  // fallback
+	  var arr = this.array();
+	  var i = indexof(arr, name);
+	  if (~i) arr.splice(i, 1);
+	  this.el.className = arr.join(' ');
+	  return this;
+	};
+
+	/**
+	 * Remove all classes matching `re`.
+	 *
+	 * @param {RegExp} re
+	 * @return {ClassList}
+	 * @api private
+	 */
+
+	ClassList.prototype.removeMatching = function (re) {
+	  var arr = this.array();
+	  for (var i = 0; i < arr.length; i++) {
+	    if (re.test(arr[i])) {
+	      this.remove(arr[i]);
+	    }
+	  }
+	  return this;
+	};
+
+	/**
+	 * Toggle class `name`, can force state via `force`.
+	 *
+	 * For browsers that support classList, but do not support `force` yet,
+	 * the mistake will be detected and corrected.
+	 *
+	 * @param {String} name
+	 * @param {Boolean} force
+	 * @return {ClassList}
+	 * @api public
+	 */
+
+	ClassList.prototype.toggle = function (name, force) {
+	  // classList
+	  if (this.list) {
+	    if ('undefined' !== typeof force) {
+	      if (force !== this.list.toggle(name, force)) {
+	        this.list.toggle(name); // toggle again to correct
+	      }
+	    } else {
+	      this.list.toggle(name);
+	    }
+	    return this;
+	  }
+
+	  // fallback
+	  if ('undefined' !== typeof force) {
+	    if (!force) {
+	      this.remove(name);
+	    } else {
+	      this.add(name);
+	    }
+	  } else {
+	    if (this.has(name)) {
+	      this.remove(name);
+	    } else {
+	      this.add(name);
+	    }
+	  }
+
+	  return this;
+	};
+
+	/**
+	 * Return an array of classes.
+	 *
+	 * @return {Array}
+	 * @api public
+	 */
+
+	ClassList.prototype.array = function () {
+	  var className = this.el.getAttribute('class') || '';
+	  var str = className.replace(/^\s+|\s+$/g, '');
+	  var arr = str.split(re);
+	  if ('' === arr[0]) arr.shift();
+	  return arr;
+	};
+
+	/**
+	 * Check if class `name` is present.
+	 *
+	 * @param {String} name
+	 * @return {ClassList}
+	 * @api public
+	 */
+
+	ClassList.prototype.has = ClassList.prototype.contains = function (name) {
+	  return this.list ? this.list.contains(name) : !!~indexof(this.array(), name);
+	};
+
+	/**
+	 * Remove all children from the given element.
+	 */
+	function clear(el) {
+
+	  var c;
+
+	  while (el.childNodes.length) {
+	    c = el.childNodes[0];
+	    el.removeChild(c);
+	  }
+
+	  return el;
+	}
+
+	var proto = typeof Element !== 'undefined' ? Element.prototype : {};
+	var vendor = proto.matches
+	  || proto.matchesSelector
+	  || proto.webkitMatchesSelector
+	  || proto.mozMatchesSelector
+	  || proto.msMatchesSelector
+	  || proto.oMatchesSelector;
+
+	var matchesSelector = match;
+
+	/**
+	 * Match `el` to `selector`.
+	 *
+	 * @param {Element} el
+	 * @param {String} selector
+	 * @return {Boolean}
+	 * @api public
+	 */
+
+	function match(el, selector) {
+	  if (!el || el.nodeType !== 1) return false;
+	  if (vendor) return vendor.call(el, selector);
+	  var nodes = el.parentNode.querySelectorAll(selector);
+	  for (var i = 0; i < nodes.length; i++) {
+	    if (nodes[i] == el) return true;
+	  }
+	  return false;
+	}
+
+	/**
+	 * Closest
+	 *
+	 * @param {Element} el
+	 * @param {String} selector
+	 * @param {Boolean} checkYourSelf (optional)
+	 */
+	function closest (element, selector, checkYourSelf) {
+	  var currentElem = checkYourSelf ? element : element.parentNode;
+
+	  while (currentElem && currentElem.nodeType !== document.DOCUMENT_NODE && currentElem.nodeType !== document.DOCUMENT_FRAGMENT_NODE) {
+
+	    if (matchesSelector(currentElem, selector)) {
+	      return currentElem;
+	    }
+
+	    currentElem = currentElem.parentNode;
+	  }
+
+	  return matchesSelector(currentElem, selector) ? currentElem : null;
+	}
+
+	var bind$1 = window.addEventListener ? 'addEventListener' : 'attachEvent',
+	    unbind = window.removeEventListener ? 'removeEventListener' : 'detachEvent',
+	    prefix$6 = bind$1 !== 'addEventListener' ? 'on' : '';
+
+	/**
+	 * Bind `el` event `type` to `fn`.
+	 *
+	 * @param {Element} el
+	 * @param {String} type
+	 * @param {Function} fn
+	 * @param {Boolean} capture
+	 * @return {Function}
+	 * @api public
+	 */
+
+	var bind_1 = function(el, type, fn, capture){
+	  el[bind$1](prefix$6 + type, fn, capture || false);
+	  return fn;
+	};
+
+	/**
+	 * Unbind `el` event `type`'s callback `fn`.
+	 *
+	 * @param {Element} el
+	 * @param {String} type
+	 * @param {Function} fn
+	 * @param {Boolean} capture
+	 * @return {Function}
+	 * @api public
+	 */
+
+	var unbind_1 = function(el, type, fn, capture){
+	  el[unbind](prefix$6 + type, fn, capture || false);
+	  return fn;
+	};
+
+	var componentEvent = {
+		bind: bind_1,
+		unbind: unbind_1
+	};
+
+	/**
+	 * Module dependencies.
+	 */
+
+	/**
+	 * Delegate event `type` to `selector`
+	 * and invoke `fn(e)`. A callback function
+	 * is returned which may be passed to `.unbind()`.
+	 *
+	 * @param {Element} el
+	 * @param {String} selector
+	 * @param {String} type
+	 * @param {Function} fn
+	 * @param {Boolean} capture
+	 * @return {Function}
+	 * @api public
+	 */
+
+	// Some events don't bubble, so we want to bind to the capture phase instead
+	// when delegating.
+	var forceCaptureEvents = ['focus', 'blur'];
+
+	function bind$2(el, selector, type, fn, capture) {
+	  if (forceCaptureEvents.indexOf(type) !== -1) {
+	    capture = true;
+	  }
+
+	  return componentEvent.bind(el, type, function (e) {
+	    var target = e.target || e.srcElement;
+	    e.delegateTarget = closest(target, selector, true);
+	    if (e.delegateTarget) {
+	      fn.call(el, e);
+	    }
+	  }, capture);
+	}
+
+	/**
+	 * Unbind event `type`'s callback `fn`.
+	 *
+	 * @param {Element} el
+	 * @param {String} type
+	 * @param {Function} fn
+	 * @param {Boolean} capture
+	 * @api public
+	 */
+	function unbind$1(el, type, fn, capture) {
+	  if (forceCaptureEvents.indexOf(type) !== -1) {
+	    capture = true;
+	  }
+
+	  return componentEvent.unbind(el, type, fn, capture);
+	}
+
+	var delegate = {
+	  bind: bind$2,
+	  unbind: unbind$1
+	};
+
+	/**
+	 * Expose `parse`.
+	 */
+
+	var domify = parse;
+
+	/**
+	 * Tests for browser support.
 	 */
-	BpmnImporter.prototype.addLabel = function(semantic, di, element) {
-	  var bounds,
-	      text,
-	      label;
 
-	  bounds = getExternalLabelBounds(di, element);
+	var innerHTMLBug = false;
+	var bugTestDiv;
+	if (typeof document !== 'undefined') {
+	  bugTestDiv = document.createElement('div');
+	  // Setup
+	  bugTestDiv.innerHTML = '  <link/><table></table><a href="/a">a</a><input type="checkbox"/>';
+	  // Make sure that link elements get serialized correctly by innerHTML
+	  // This requires a wrapper element in IE
+	  innerHTMLBug = !bugTestDiv.getElementsByTagName('link').length;
+	  bugTestDiv = undefined;
+	}
 
-	  text = getLabel(element);
+	/**
+	 * Wrap map from jquery.
+	 */
 
-	  if (text) {
+	var map$1 = {
+	  legend: [1, '<fieldset>', '</fieldset>'],
+	  tr: [2, '<table><tbody>', '</tbody></table>'],
+	  col: [2, '<table><tbody></tbody><colgroup>', '</colgroup></table>'],
+	  // for script/link/style tags to work in IE6-8, you have to wrap
+	  // in a div with a non-whitespace character in front, ha!
+	  _default: innerHTMLBug ? [1, 'X<div>', '</div>'] : [0, '', '']
+	};
 
-	    // get corrected bounds from actual layouted text
-	    bounds = this._textRenderer.getExternalLabelBounds(bounds, text);
-	  }
+	map$1.td =
+	map$1.th = [3, '<table><tbody><tr>', '</tr></tbody></table>'];
 
-	  label = this._elementFactory.createLabel(elementData(semantic, di, {
-	    id: semantic.id + '_label',
-	    labelTarget: element,
-	    type: 'label',
-	    hidden: element.hidden || !getLabel(element),
-	    x: Math.round(bounds.x),
-	    y: Math.round(bounds.y),
-	    width: Math.round(bounds.width),
-	    height: Math.round(bounds.height)
-	  }));
+	map$1.option =
+	map$1.optgroup = [1, '<select multiple="multiple">', '</select>'];
 
-	  return this._canvas.addShape(label, element.parent);
-	};
+	map$1.thead =
+	map$1.tbody =
+	map$1.colgroup =
+	map$1.caption =
+	map$1.tfoot = [1, '<table>', '</table>'];
+
+	map$1.polyline =
+	map$1.ellipse =
+	map$1.polygon =
+	map$1.circle =
+	map$1.text =
+	map$1.line =
+	map$1.path =
+	map$1.rect =
+	map$1.g = [1, '<svg xmlns="http://www.w3.org/2000/svg" version="1.1">','</svg>'];
 
 	/**
-	 * Return the drawn connection end based on the given side.
+	 * Parse `html` and return a DOM Node instance, which could be a TextNode,
+	 * HTML DOM Node of some kind (<div> for example), or a DocumentFragment
+	 * instance, depending on the contents of the `html` string.
 	 *
-	 * @throws {Error} if the end is not yet drawn
+	 * @param {String} html - HTML string to "domify"
+	 * @param {Document} doc - The `document` instance to create the Node for
+	 * @return {DOMNode} the TextNode, DOM Node, or DocumentFragment instance
+	 * @api private
 	 */
-	BpmnImporter.prototype._getEnd = function(semantic, side) {
 
-	  var element,
-	      refSemantic,
-	      type = semantic.$type,
-	      translate = this._translate;
+	function parse(html, doc) {
+	  if ('string' != typeof html) throw new TypeError('String expected');
 
-	  refSemantic = semantic[side + 'Ref'];
+	  // default to the global `document` object
+	  if (!doc) doc = document;
 
-	  // handle mysterious isMany DataAssociation#sourceRef
-	  if (side === 'source' && type === 'bpmn:DataInputAssociation') {
-	    refSemantic = refSemantic && refSemantic[0];
-	  }
+	  // tag name
+	  var m = /<([\w:]+)/.exec(html);
+	  if (!m) return doc.createTextNode(html);
 
-	  // fix source / target for DataInputAssociation / DataOutputAssociation
-	  if (side === 'source' && type === 'bpmn:DataOutputAssociation' ||
-	      side === 'target' && type === 'bpmn:DataInputAssociation') {
+	  html = html.replace(/^\s+|\s+$/g, ''); // Remove leading/trailing whitespace
 
-	    refSemantic = semantic.$parent;
+	  var tag = m[1];
+
+	  // body support
+	  if (tag == 'body') {
+	    var el = doc.createElement('html');
+	    el.innerHTML = html;
+	    return el.removeChild(el.lastChild);
 	  }
 
-	  element = refSemantic && this._getElement(refSemantic);
+	  // wrap map
+	  var wrap = map$1[tag] || map$1._default;
+	  var depth = wrap[0];
+	  var prefix = wrap[1];
+	  var suffix = wrap[2];
+	  var el = doc.createElement('div');
+	  el.innerHTML = prefix + html + suffix;
+	  while (depth--) el = el.lastChild;
 
-	  if (element) {
-	    return element;
+	  // one element
+	  if (el.firstChild == el.lastChild) {
+	    return el.removeChild(el.firstChild);
 	  }
 
-	  if (refSemantic) {
-	    throw notYetDrawn(translate, semantic, refSemantic, side + 'Ref');
-	  } else {
-	    throw new Error(translate('{semantic}#{side} Ref not specified', {
-	      semantic: elementToString(semantic),
-	      side: side
-	    }));
+	  // several elements
+	  var fragment = doc.createDocumentFragment();
+	  while (el.firstChild) {
+	    fragment.appendChild(el.removeChild(el.firstChild));
 	  }
-	};
 
-	BpmnImporter.prototype._getSource = function(semantic) {
-	  return this._getEnd(semantic, 'source');
-	};
-
-	BpmnImporter.prototype._getTarget = function(semantic) {
-	  return this._getEnd(semantic, 'target');
-	};
-
-
-	BpmnImporter.prototype._getElement = function(semantic) {
-	  return this._elementRegistry.get(semantic.id);
-	};
+	  return fragment;
+	}
 
+	function query(selector, el) {
+	  el = el || document;
 
-	// helpers ////////////////////
+	  return el.querySelector(selector);
+	}
 
-	function isPointInsideBBox(bbox, point) {
-	  var x = point.x,
-	      y = point.y;
+	function all(selector, el) {
+	  el = el || document;
 
-	  return x >= bbox.x &&
-	    x <= bbox.x + bbox.width &&
-	    y >= bbox.y &&
-	    y <= bbox.y + bbox.height;
+	  return el.querySelectorAll(selector);
 	}
 
-	function isFrameElement$1(semantic) {
-	  return is$1(semantic, 'bpmn:Group');
+	function remove$1(el) {
+	  el.parentNode && el.parentNode.removeChild(el);
 	}
 
-	var ImportModule = {
-	  __depends__: [
-	    TranslateModule
-	  ],
-	  bpmnImporter: [ 'type', BpmnImporter ]
-	};
-
-	var CoreModule$1 = {
-	  __depends__: [
-	    DrawModule$1,
-	    ImportModule
-	  ]
-	};
-
 	function getOriginal(event) {
 	  return event.originalEvent || event.srcEvent;
 	}
@@ -5850,13 +6523,13 @@
 	  }
 
 	  function registerEvents(svg) {
-	    forEach(bindings, function(val, key) {
+	    forEach$2(bindings, function(val, key) {
 	      registerEvent(svg, key, val);
 	    });
 	  }
 
 	  function unregisterEvents(svg) {
-	    forEach(bindings, function(val, key) {
+	    forEach$2(bindings, function(val, key) {
 	      unregisterEvent(svg, key, val);
 	    });
 	  }
@@ -5916,10 +6589,13 @@
 
 	  var ALL_HIT_STYLE = createHitStyle('djs-hit djs-hit-all');
 
+	  var NO_MOVE_HIT_STYLE = createHitStyle('djs-hit djs-hit-no-move');
+
 	  var HIT_TYPES = {
 	    'all': ALL_HIT_STYLE,
 	    'click-stroke': CLICK_STROKE_HIT_STYLE,
-	    'stroke': STROKE_HIT_STYLE
+	    'stroke': STROKE_HIT_STYLE,
+	    'no-move': NO_MOVE_HIT_STYLE
 	  };
 
 	  function createHitStyle(classNames, attrs) {
@@ -5963,7 +6639,7 @@
 	  this.removeHits = function(gfx) {
 	    var hits = all('.djs-hit', gfx);
 
-	    forEach(hits, remove$2);
+	    forEach$2(hits, remove$3);
 	  };
 
 	  /**
@@ -6177,8 +6853,8 @@
 	function getBBox(elements, stopRecursion) {
 
 	  stopRecursion = !!stopRecursion;
-	  if (!isArray$1(elements)) {
-	    elements = [elements];
+	  if (!isArray$3(elements)) {
+	    elements = [ elements ];
 	  }
 
 	  var minX,
@@ -6186,7 +6862,7 @@
 	      maxX,
 	      maxY;
 
-	  forEach(elements, function(element) {
+	  forEach$2(elements, function(element) {
 
 	    // If element is a connection the bbox must be computed first
 	    var bbox = element;
@@ -6347,7 +7023,7 @@
 	};
 
 
-	Outline.$inject = ['eventBus', 'styles', 'elementRegistry'];
+	Outline.$inject = [ 'eventBus', 'styles', 'elementRegistry' ];
 
 	var OutlineModule = {
 	  __init__: [ 'outline' ],
@@ -6423,7 +7099,7 @@
 	  var selectedElements = this._selectedElements,
 	      oldSelection = selectedElements.slice();
 
-	  if (!isArray$1(elements)) {
+	  if (!isArray$3(elements)) {
 	    elements = elements ? [ elements ] : [];
 	  }
 
@@ -6440,7 +7116,7 @@
 	  // selection may be cleared by passing an empty array or null
 	  // to the method
 	  if (add) {
-	    forEach(elements, function(element) {
+	    forEach$2(elements, function(element) {
 	      if (selectedElements.indexOf(element) !== -1) {
 
 	        // already selected
@@ -6505,13 +7181,13 @@
 	    var oldSelection = event.oldSelection,
 	        newSelection = event.newSelection;
 
-	    forEach(oldSelection, function(e) {
+	    forEach$2(oldSelection, function(e) {
 	      if (newSelection.indexOf(e) === -1) {
 	        deselect(e);
 	      }
 	    });
 
-	    forEach(newSelection, function(e) {
+	    forEach$2(newSelection, function(e) {
 	      if (oldSelection.indexOf(e) === -1) {
 	        select(e);
 	      }
@@ -6543,7 +7219,7 @@
 	        return;
 	      }
 
-	      if (isArray$1(autoSelect)) {
+	      if (isArray$3(autoSelect)) {
 	        selection.select(autoSelect);
 	      } else {
 
@@ -6911,13 +7587,13 @@
 
 	  var overlays = this.get(filter) || [];
 
-	  if (!isArray$1(overlays)) {
+	  if (!isArray$3(overlays)) {
 	    overlays = [ overlays ];
 	  }
 
 	  var self = this;
 
-	  forEach(overlays, function(overlay) {
+	  forEach$2(overlays, function(overlay) {
 
 	    var container = self._getOverlayContainer(overlay.element, true);
 
@@ -7026,7 +7702,8 @@
 
 
 	Overlays.prototype._createOverlayContainer = function(element) {
-	  var html = domify('<div class="djs-overlays" style="position: absolute" />');
+	  var html = domify('<div class="djs-overlays" />');
+	  assign$1(html, { position: 'absolute' });
 
 	  this._overlayRoot.appendChild(html);
 
@@ -7097,7 +7774,8 @@
 
 	  overlayContainer = this._getOverlayContainer(element);
 
-	  htmlContainer = domify('<div class="djs-overlay" data-overlay-id="' + id + '" style="position: absolute">');
+	  htmlContainer = domify('<div class="djs-overlay" data-overlay-id="' + id + '">');
+	  assign$1(htmlContainer, { position: 'absolute' });
 
 	  htmlContainer.appendChild(html);
 
@@ -7187,7 +7865,7 @@
 
 	  var self = this;
 
-	  forEach(this._overlays, function(overlay) {
+	  forEach$2(this._overlays, function(overlay) {
 	    self._updateOverlayVisibilty(overlay, viewbox);
 	  });
 	};
@@ -7224,7 +7902,7 @@
 	    var element = e.element;
 	    var overlays = self.get({ element: element });
 
-	    forEach(overlays, function(o) {
+	    forEach$2(overlays, function(o) {
 	      self.remove(o.id);
 	    });
 
@@ -7248,7 +7926,7 @@
 	    var container = self._getOverlayContainer(element, true);
 
 	    if (container) {
-	      forEach(container.overlays, function(overlay) {
+	      forEach$2(container.overlays, function(overlay) {
 	        self._updateOverlay(overlay);
 	      });
 
@@ -7282,16 +7960,22 @@
 
 	function createRoot(parentNode) {
 	  var root = domify(
-	    '<div class="djs-overlay-container" style="position: absolute; width: 0; height: 0;" />'
+	    '<div class="djs-overlay-container" />'
 	  );
 
+	  assign$1(root, {
+	    position: 'absolute',
+	    width: 0,
+	    height: 0
+	  });
+
 	  parentNode.insertBefore(root, parentNode.firstChild);
 
 	  return root;
 	}
 
 	function setPosition(el, x, y) {
-	  assign(el.style, { left: x + 'px', top: y + 'px' });
+	  assign$1(el, { left: x + 'px', top: y + 'px' });
 	}
 
 	function setVisible(el, visible) {
@@ -7377,7 +8061,7 @@
 	];
 
 	var ChangeSupportModule = {
-	  __init__: [ 'changeSupport'],
+	  __init__: [ 'changeSupport' ],
 	  changeSupport: [ 'type', ChangeSupport ]
 	};
 
@@ -7455,13 +8139,13 @@
 	    throw new Error('handlerFn must be a function');
 	  }
 
-	  if (!isArray$1(events)) {
+	  if (!isArray$3(events)) {
 	    events = [ events ];
 	  }
 
 	  var eventBus = this._eventBus;
 
-	  forEach(events, function(event) {
+	  forEach$2(events, function(event) {
 
 	    // concat commandStack(.event)?(.hook)?
 	    var fullEvent = [ 'commandStack', event, hook ].filter(function(e) { return e; }).join('.');
@@ -7489,7 +8173,7 @@
 	 * This will generate the CommandInterceptor#(preExecute|...|reverted) methods
 	 * which will in term forward to CommandInterceptor#on.
 	 */
-	forEach(hooks, function(hook) {
+	forEach$2(hooks, function(hook) {
 
 	  /**
 	   * {canExecute|preExecute|preExecuted|execute|executed|postExecute|postExecuted|revert|reverted}
@@ -7549,7 +8233,7 @@
 
 	inherits$1(RootElementsBehavior, CommandInterceptor);
 
-	RootElementsBehavior.$inject = [ 'canvas', 'injector'];
+	RootElementsBehavior.$inject = [ 'canvas', 'injector' ];
 
 	var RootElementsModule = {
 	  __init__: [ 'rootElementsBehavior' ],
@@ -7713,9 +8397,9 @@
 	 * @param {canvas} canvas
 	 */
 	function DrilldownBreadcrumbs(eventBus, elementRegistry, overlays, canvas) {
-	  var breadcrumbs = domify('<ul class="bjs-breadcrumbs"></ul>');
+	  var breadcrumbs = domify$1('<ul class="bjs-breadcrumbs"></ul>');
 	  var container = canvas.getContainer();
-	  var containerClasses = classes(container);
+	  var containerClasses = classes$1(container);
 	  container.appendChild(breadcrumbs);
 
 	  var boParents = [];
@@ -7749,7 +8433,7 @@
 
 	    var path = boParents.map(function(parent) {
 	      var title = escapeHTML(parent.name || parent.id);
-	      var link = domify('<li><span class="bjs-crumb"><a title="' + title + '">' + title + '</a></span></li>');
+	      var link = domify$1('<li><span class="bjs-crumb"><a title="' + title + '">' + title + '</a></span></li>');
 
 	      var parentPlane = canvas.findRoot(getPlaneIdFromShape(parent)) || canvas.findRoot(parent.id);
 
@@ -8009,7 +8693,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 });
@@ -8098,7 +8782,7 @@
 	SubprocessCompatibility.$inject = [ 'eventBus', 'moddle' ];
 
 
-	// helpers
+	// helpers //////////////////////////
 
 	function findRootDiagram(element) {
 	  if (is$1(element, 'bpmndi:BPMNDiagram')) {
@@ -8130,6 +8814,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 = 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>';
 
@@ -8205,7 +8906,7 @@
 	    }, true);
 
 
-	  eventBus.on('import.done', function() {
+	  eventBus.on('import.render.complete', function() {
 	    elementRegistry.filter(function(e) {
 	      return self.canDrillDown(e);
 	    }).map(function(el) {
@@ -8254,7 +8955,7 @@
 	  }
 
 	  var hasContent = bo && bo.flowElements && bo.flowElements.length;
-	  classes(overlay.html).toggle(EMPTY_MARKER, !hasContent);
+	  classes$1(overlay.html).toggle(EMPTY_MARKER, !hasContent);
 	};
 
 	/**
@@ -8272,7 +8973,7 @@
 	    this.removeOverlay(element);
 	  }
 
-	  var button = domify('<button class="bjs-drilldown">' + ARROW_DOWN_SVG + '</button>');
+	  var button = domify$1('<button class="bjs-drilldown">' + ARROW_DOWN_SVG + '</button>');
 
 	  button.addEventListener('click', function() {
 	    canvas.setRootElement(canvas.findRoot(getPlaneIdFromShape(element)));
@@ -8713,11 +9414,11 @@
 	      height = shape.height;
 
 	  var shapePath = [
-	    ['M', x, y],
-	    ['l', width, 0],
-	    ['l', 0, height],
-	    ['l', -width, 0],
-	    ['z']
+	    [ 'M', x, y ],
+	    [ 'l', width, 0 ],
+	    [ 'l', 0, height ],
+	    [ 'l', -width, 0 ],
+	    [ 'z' ]
 	  ];
 
 	  return componentsToPath(shapePath);
@@ -8788,7 +9489,7 @@
 	   */
 	  this.style = function(traits, additionalAttrs) {
 
-	    if (!isArray$1(traits) && !additionalAttrs) {
+	    if (!isArray$3(traits) && !additionalAttrs) {
 	      additionalAttrs = traits;
 	      traits = [];
 	    }
@@ -8801,7 +9502,7 @@
 	  };
 
 	  this.computeStyle = function(custom, traits, defaultStyles) {
-	    if (!isArray$1(traits)) {
+	    if (!isArray$3(traits)) {
 	      defaultStyles = traits;
 	      traits = [];
 	    }
@@ -8925,7 +9626,7 @@
 	  var parent = document.createElement('div');
 	  parent.setAttribute('class', 'djs-container');
 
-	  assign(parent.style, {
+	  assign$1(parent, {
 	    position: 'relative',
 	    overflow: 'hidden',
 	    width: ensurePx(options.width),
@@ -8939,7 +9640,7 @@
 
 	function createGroup(parent, cls, childIndex) {
 	  var group = create$1('g');
-	  classes$1(group).add(cls);
+	  classes$2(group).add(cls);
 
 	  var index = childIndex !== undefined ? childIndex : parent.childNodes.length - 1;
 
@@ -9027,7 +9728,7 @@
 	  // debounce canvas.viewbox.changed events
 	  // for smoother diagram interaction
 	  if (config.deferUpdate !== false) {
-	    this._viewboxChanged = debounce(bind$2(this._viewboxChanged, this), 300);
+	    this._viewboxChanged = debounce(bind(this._viewboxChanged, this), 300);
 	  }
 
 	  eventBus.on('diagram.init', function() {
@@ -9158,6 +9859,25 @@
 	  return layer.group;
 	};
 
+	/**
+	 * For a given index, return the number of layers that have a higher index and
+	 * are visible.
+	 *
+	 * This is used to determine the node a layer should be inserted at.
+	 *
+	 * @param {Number} index
+	 * @returns {Number}
+	 */
+	Canvas.prototype._getChildIndex = function(index) {
+	  return reduce(this._layers, function(childIndex, layer) {
+	    if (layer.visible && index >= layer.index) {
+	      childIndex++;
+	    }
+
+	    return childIndex;
+	  }, 0);
+	};
+
 	/**
 	 * Creates a given layer and returns it.
 	 *
@@ -9172,19 +9892,80 @@
 	    index = UTILITY_LAYER_INDEX;
 	  }
 
-	  var childIndex = reduce(this._layers, function(childIndex, layer) {
-	    if (index >= layer.index) {
-	      childIndex++;
-	    }
-
-	    return childIndex;
-	  }, 0);
+	  var childIndex = this._getChildIndex(index);
 
 	  return {
 	    group: createGroup(this._viewport, 'layer-' + name, childIndex),
-	    index: index
+	    index: index,
+	    visible: true
 	  };
+	};
+
+
+	/**
+	 * Shows a given layer.
+	 *
+	 * @param {String} layer
+	 * @returns {SVGElement}
+	 */
+	Canvas.prototype.showLayer = function(name) {
+
+	  if (!name) {
+	    throw new Error('must specify a name');
+	  }
+
+	  var layer = this._layers[name];
+
+	  if (!layer) {
+	    throw new Error('layer <' + name + '> does not exist');
+	  }
+
+	  var viewport = this._viewport;
+	  var group = layer.group;
+	  var index = layer.index;
+
+	  if (layer.visible) {
+	    return group;
+	  }
+
+	  var childIndex = this._getChildIndex(index);
+
+	  viewport.insertBefore(group, viewport.childNodes[childIndex] || null);
+
+	  layer.visible = true;
+
+	  return group;
+	};
+
+	/**
+	 * Hides a given layer.
+	 *
+	 * @param {String} layer
+	 * @returns {SVGElement}
+	 */
+	Canvas.prototype.hideLayer = function(name) {
 
+	  if (!name) {
+	    throw new Error('must specify a name');
+	  }
+
+	  var layer = this._layers[name];
+
+	  if (!layer) {
+	    throw new Error('layer <' + name + '> does not exist');
+	  }
+
+	  var group = layer.group;
+
+	  if (!layer.visible) {
+	    return group;
+	  }
+
+	  remove$3(group);
+
+	  layer.visible = false;
+
+	  return group;
 	};
 
 
@@ -9195,7 +9976,7 @@
 	  if (layer) {
 	    delete this._layers[name];
 
-	    remove$2(layer.group);
+	    remove$3(layer.group);
 	  }
 	};
 
@@ -9283,14 +10064,14 @@
 	    return;
 	  }
 
-	  forEach([ container.gfx, container.secondaryGfx ], function(gfx) {
+	  forEach$2([ container.gfx, container.secondaryGfx ], function(gfx) {
 	    if (gfx) {
 
 	      // invoke either addClass or removeClass based on mode
 	      if (add) {
-	        classes$1(gfx).add(marker);
+	        classes$2(gfx).add(marker);
 	      } else {
-	        classes$1(gfx).remove(marker);
+	        classes$2(gfx).remove(marker);
 	      }
 	    }
 	  });
@@ -9356,7 +10137,7 @@
 
 	  var gfx = this.getGraphics(element);
 
-	  return classes$1(gfx).has(marker);
+	  return classes$2(gfx).has(marker);
 	};
 
 	/**
@@ -9427,7 +10208,7 @@
 
 	  var layer = this.getLayer(layerName, PLANE_LAYER_INDEX);
 
-	  attr$1(layer, 'display', 'none');
+	  this.hideLayer(layerName);
 
 	  this._addRoot(rootElement, layer);
 
@@ -9546,17 +10327,13 @@
 
 	  var currentRoot = this._rootElement;
 
-	  var currentLayer;
-
 	  if (currentRoot) {
 
 	    // un-associate previous root element <svg>
 	    this._elementRegistry.updateGraphics(currentRoot, null, true);
 
 	    // hide previous layer
-	    currentLayer = this._findPlaneForRoot(currentRoot).layer;
-
-	    attr$1(currentLayer, 'display', 'none');
+	    this.hideLayer(currentRoot.layer);
 	  }
 
 	  if (rootElement) {
@@ -9569,7 +10346,7 @@
 	    this._elementRegistry.updateGraphics(rootElement, this._svg, true);
 
 	    // show root layer
-	    attr$1(layer, 'display', null);
+	    this.showLayer(rootElement.layer);
 	  }
 
 	  this._rootElement = rootElement;
@@ -11194,7 +11971,7 @@
 	 */
 	EventBus.prototype.on = function(events, priority, callback, that) {
 
-	  events = isArray$1(events) ? events : [ events ];
+	  events = isArray$3(events) ? events : [ events ];
 
 	  if (isFunction(priority)) {
 	    that = callback;
@@ -11209,7 +11986,7 @@
 	  var actualCallback = callback;
 
 	  if (that) {
-	    actualCallback = bind$2(callback, that);
+	    actualCallback = bind(callback, that);
 
 	    // make sure we remember and are able to remove
 	    // bound callbacks via {@link #off} using the original
@@ -11279,7 +12056,7 @@
 	 */
 	EventBus.prototype.off = function(events, callback) {
 
-	  events = isArray$1(events) ? events : [ events ];
+	  events = isArray$3(events) ? events : [ events ];
 
 	  var self = this;
 
@@ -11645,7 +12422,7 @@
 	    childrenGfx = getChildren(gfx);
 	    if (!childrenGfx) {
 	      childrenGfx = create$1('g');
-	      classes$1(childrenGfx).add('djs-children');
+	      classes$2(childrenGfx).add('djs-children');
 
 	      append(gfx.parentNode, childrenGfx);
 	    }
@@ -11697,7 +12474,7 @@
 	    type, childrenGfx, parentIndex, isFrame
 	) {
 	  var outerGfx = create$1('g');
-	  classes$1(outerGfx).add('djs-group');
+	  classes$2(outerGfx).add('djs-group');
 
 	  // insert node at position
 	  if (typeof parentIndex !== 'undefined') {
@@ -11707,18 +12484,18 @@
 	  }
 
 	  var gfx = create$1('g');
-	  classes$1(gfx).add('djs-element');
-	  classes$1(gfx).add('djs-' + type);
+	  classes$2(gfx).add('djs-element');
+	  classes$2(gfx).add('djs-' + type);
 
 	  if (isFrame) {
-	    classes$1(gfx).add('djs-frame');
+	    classes$2(gfx).add('djs-frame');
 	  }
 
 	  append(outerGfx, gfx);
 
 	  // create visual
 	  var visual = create$1('g');
-	  classes$1(visual).add('djs-visual');
+	  classes$2(visual).add('djs-visual');
 
 	  append(gfx, visual);
 
@@ -11747,7 +12524,7 @@
 
 	  // update all parents of changed and reorganized their children
 	  // in the correct order (as indicated in our model)
-	  forEach(parents, function(parent) {
+	  forEach$2(parents, function(parent) {
 
 	    var children = parent.children;
 
@@ -11757,7 +12534,7 @@
 
 	    var childrenGfx = self._getChildrenContainer(parent);
 
-	    forEach(children.slice().reverse(), function(child) {
+	    forEach$2(children.slice().reverse(), function(child) {
 	      var childGfx = elementRegistry.getGraphics(child);
 
 	      prependTo(childGfx.parentNode, childrenGfx);
@@ -11822,7 +12599,7 @@
 	  var gfx = this._elementRegistry.getGraphics(element);
 
 	  // remove
-	  remove$2(gfx.parentNode);
+	  remove$3(gfx.parentNode);
 	};
 
 
@@ -11922,7 +12699,7 @@
 	  options = options || {};
 
 	  var configModule = {
-	    'config': ['value', options]
+	    'config': [ 'value', options ]
 	  };
 
 	  var modules = [ configModule, CoreModule ].concat(options.modules || []);
@@ -12082,7 +12859,7 @@
 	      prototype = Object.create(Base.prototype);
 
 	  // initialize default values
-	  forEach(descriptor.properties, function(p) {
+	  forEach$2(descriptor.properties, function(p) {
 	    if (!p.isMany && p.default !== undefined) {
 	      prototype[p.name] = p.default;
 	    }
@@ -12101,7 +12878,7 @@
 	    props.define(this, '$attrs', { value: {} });
 	    props.define(this, '$parent', { writable: true });
 
-	    forEach(attrs, bind$2(function(val, key) {
+	    forEach$2(attrs, bind(function(val, key) {
 	      this.set(key, val);
 	    }, this));
 	  }
@@ -12390,7 +13167,7 @@
 	    return;
 	  }
 
-	  forEach(t.properties, bind$2(function(p) {
+	  forEach$2(t.properties, bind(function(p) {
 
 	    // clone property to allow extensions
 	    p = assign({}, p, {
@@ -12437,7 +13214,7 @@
 
 	  this.properties = properties;
 
-	  forEach(packages, bind$2(this.registerPackage, this));
+	  forEach$2(packages, bind(this.registerPackage, this));
 	}
 
 
@@ -12461,7 +13238,7 @@
 	  ensureAvailable(pkgMap, pkg, 'uri');
 
 	  // register types
-	  forEach(pkg.types, bind$2(function(descriptor) {
+	  forEach$2(pkg.types, bind(function(descriptor) {
 	    this.registerType(descriptor, pkg);
 	  }, this));
 
@@ -12487,7 +13264,7 @@
 	      propertiesByName = {};
 
 	  // parse properties
-	  forEach(type.properties, bind$2(function(p) {
+	  forEach$2(type.properties, bind(function(p) {
 
 	    // namespace property names
 	    var propertyNs = parseName(p.name, ns.prefix),
@@ -12513,7 +13290,7 @@
 	    propertiesByName: propertiesByName
 	  });
 
-	  forEach(type.extends, bind$2(function(extendsName) {
+	  forEach$2(type.extends, bind(function(extendsName) {
 	    var extended = this.typeMap[extendsName];
 
 	    extended.traits = extended.traits || [];
@@ -12567,12 +13344,12 @@
 	    throw new Error('unknown type <' + nsName.name + '>');
 	  }
 
-	  forEach(type.superClass, trait ? traverseTrait : traverseSuper);
+	  forEach$2(type.superClass, trait ? traverseTrait : traverseSuper);
 
 	  // call iterator with (type, inherited=!trait)
 	  iterator(type, !trait);
 
-	  forEach(type.traits, traverseTrait);
+	  forEach$2(type.traits, traverseTrait);
 	};
 
 
@@ -12875,7 +13652,7 @@
 	  this.properties.define(element, '$parent', { enumerable: false, writable: true });
 	  this.properties.define(element, '$instanceOf', { enumerable: false, writable: true });
 
-	  forEach(properties, function(a, key) {
+	  forEach$2(properties, function(a, key) {
 	    if (isObject(a) && a.value !== undefined) {
 	      element[a.name] = a.value;
 	    } else {
@@ -14337,7 +15114,7 @@
 	      model = this.model,
 	      propNameNs;
 
-	  forEach(attributes, function(value, name) {
+	  forEach$2(attributes, function(value, name) {
 
 	    var prop = descriptor.propertiesByName[name],
 	        values;
@@ -14355,7 +15132,7 @@
 	        // IDREFS: parse references as whitespace-separated list
 	        values = value.split(' ');
 
-	        forEach(values, function(v) {
+	        forEach$2(values, function(v) {
 	          context.addReference({
 	            element: instance,
 	            property: prop.ns.name,
@@ -15099,7 +15876,7 @@
 	    }
 
 	    // do not serialize defaults
-	    if (!has(element, name)) {
+	    if (!has$2(element, name)) {
 	      return false;
 	    }
 
@@ -15328,7 +16105,7 @@
 
 	  var attributes = [];
 
-	  forEach(element, function(val, key) {
+	  forEach$2(element, function(val, key) {
 
 	    var nonNsAttr;
 
@@ -15336,7 +16113,7 @@
 	      body.push(new BodySerializer().build({ type: 'String' }, val));
 	    } else
 	    if (key === '$children') {
-	      forEach(val, function(child) {
+	      forEach$2(val, function(child) {
 	        body.push(new ElementSerializer(self).build(child));
 	      });
 	    } else
@@ -15406,7 +16183,7 @@
 	  // parse namespace attributes first
 	  // and log them. push non namespace attributes to a list
 	  // and process them later
-	  forEach(genericAttrs, function(value, name) {
+	  forEach$2(genericAttrs, function(value, name) {
 
 	    var nonNsAttr = self.parseNsAttribute(element, name, value);
 
@@ -15422,7 +16199,7 @@
 
 	  var self = this;
 
-	  forEach(attributes, function(attr) {
+	  forEach$2(attributes, function(attr) {
 
 	    // do not serialize xsi:type attribute
 	    // it is set manually based on the actual implementation type
@@ -15447,7 +16224,7 @@
 	      body = this.body,
 	      element = this.element;
 
-	  forEach(properties, function(p) {
+	  forEach$2(properties, function(p) {
 	    var value = element.get(p.name),
 	        isReference = p.isReference,
 	        isMany = p.isMany;
@@ -15460,12 +16237,12 @@
 	      body.push(new BodySerializer().build(p, value[0]));
 	    } else
 	    if (isSimple(p.type)) {
-	      forEach(value, function(v) {
+	      forEach$2(value, function(v) {
 	        body.push(new ValueSerializer(self.addTagName(self.nsPropertyTagName(p))).build(p, v));
 	      });
 	    } else
 	    if (isReference) {
-	      forEach(value, function(v) {
+	      forEach$2(value, function(v) {
 	        body.push(new ReferenceSerializer(self.addTagName(self.nsPropertyTagName(p))).build(v));
 	      });
 	    } else {
@@ -15475,7 +16252,7 @@
 	      var asType = serializeAsType(p),
 	          asProperty = serializeAsProperty(p);
 
-	      forEach(value, function(v) {
+	      forEach$2(value, function(v) {
 	        var serializer;
 
 	        if (asType) {
@@ -15583,7 +16360,7 @@
 	  var self = this,
 	      element = this.element;
 
-	  forEach(properties, function(p) {
+	  forEach$2(properties, function(p) {
 
 	    var value = element.get(p.name);
 
@@ -15594,7 +16371,7 @@
 	      }
 	      else {
 	        var values = [];
-	        forEach(value, function(v) {
+	        forEach$2(value, function(v) {
 	          values.push(v.id);
 	        });
 
@@ -15634,7 +16411,7 @@
 	    attrs = getNsAttrs(namespaces).concat(attrs);
 	  }
 
-	  forEach(attrs, function(a) {
+	  forEach$2(attrs, function(a) {
 	    writer
 	      .append(' ')
 	      .append(nsName(a.name)).append('="').append(a.value).append('"');
@@ -15661,7 +16438,7 @@
 	        .indent();
 	    }
 
-	    forEach(this.body, function(b) {
+	    forEach$2(this.body, function(b) {
 	      b.serializeTo(writer);
 	    });
 
@@ -19595,7 +20372,7 @@
 	function ensureCompatDiRef(businessObject) {
 
 	  // bpmnElement can have multiple independent DIs
-	  if (!has(businessObject, 'di')) {
+	  if (!has$2(businessObject, 'di')) {
 	    Object.defineProperty(businessObject, 'di', {
 	      get: function() {
 	        throw new Error(DI_ERROR_MESSAGE);
@@ -19729,7 +20506,7 @@
 	  function handlePlane(plane) {
 	    registerDi(plane);
 
-	    forEach(plane.planeElement, handlePlaneElement);
+	    forEach$2(plane.planeElement, handlePlaneElement);
 	  }
 
 	  function handlePlaneElement(planeElement) {
@@ -19866,7 +20643,7 @@
 	  }
 
 	  function handleMessageFlows(messageFlows, context) {
-	    forEach(messageFlows, contextual(handleMessageFlow, context));
+	    forEach$2(messageFlows, contextual(handleMessageFlow, context));
 	  }
 
 	  function handleDataAssociation(association, context) {
@@ -19892,7 +20669,7 @@
 
 	  function handleArtifacts(artifacts, context) {
 
-	    forEach(artifacts, function(e) {
+	    forEach$2(artifacts, function(e) {
 	      if (is(e, 'bpmn:Association')) {
 	        deferred.push(function() {
 	          handleArtifact(e, context);
@@ -19909,8 +20686,8 @@
 	      return;
 	    }
 
-	    forEach(ioSpecification.dataInputs, contextual(handleDataInput, context));
-	    forEach(ioSpecification.dataOutputs, contextual(handleDataOutput, context));
+	    forEach$2(ioSpecification.dataInputs, contextual(handleDataInput, context));
+	    forEach$2(ioSpecification.dataOutputs, contextual(handleDataOutput, context));
 	  }
 
 	  function handleSubProcess(subProcess, context) {
@@ -19937,8 +20714,8 @@
 	    //   * bpmn:CatchEvent
 	    //
 	    deferred.push(function() {
-	      forEach(flowNode.dataInputAssociations, contextual(handleDataAssociation, context));
-	      forEach(flowNode.dataOutputAssociations, contextual(handleDataAssociation, context));
+	      forEach$2(flowNode.dataInputAssociations, contextual(handleDataAssociation, context));
+	      forEach$2(flowNode.dataOutputAssociations, contextual(handleDataAssociation, context));
 	    });
 	  }
 
@@ -19965,11 +20742,11 @@
 	  }
 
 	  function handleLaneSet(laneSet, context) {
-	    forEach(laneSet.lanes, contextual(handleLane, context));
+	    forEach$2(laneSet.lanes, contextual(handleLane, context));
 	  }
 
 	  function handleLaneSets(laneSets, context) {
-	    forEach(laneSets, contextual(handleLaneSet, context));
+	    forEach$2(laneSets, contextual(handleLaneSet, context));
 	  }
 
 	  function handleFlowElementsContainer(container, context) {
@@ -19981,7 +20758,7 @@
 	  }
 
 	  function handleFlowElements(flowElements, context) {
-	    forEach(flowElements, function(e) {
+	    forEach$2(flowElements, function(e) {
 	      if (is(e, 'bpmn:SequenceFlow')) {
 	        deferred.push(function() {
 	          handleSequenceFlow(e, context);
@@ -20019,7 +20796,7 @@
 
 	  function handleCollaboration(collaboration, context) {
 
-	    forEach(collaboration.participants, contextual(handleParticipant, context));
+	    forEach$2(collaboration.participants, contextual(handleParticipant, context));
 
 	    handleArtifacts(collaboration.artifacts, context);
 
@@ -20033,7 +20810,7 @@
 	  function wireFlowNodeRefs(lane) {
 
 	    // wire the virtual flowNodeRefs <-> relationship
-	    forEach(lane.flowNodeRef, function(flowNode) {
+	    forEach$2(lane.flowNodeRef, function(flowNode) {
 	      var lanes = flowNode.get('lanes');
 
 	      if (lanes) {
@@ -20127,7 +20904,7 @@
 
 	    // traverse BPMN 2.0 document model,
 	    // starting at definitions
-	    forEach(diagramsToImport, function(diagram) {
+	    forEach$2(diagramsToImport, function(diagram) {
 	      walker.handleDefinitions(definitions, diagram);
 	    });
 
@@ -20167,7 +20944,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
@@ -20209,7 +20986,7 @@
 
 	  // all collaboration processes can contain sub-diagrams
 	  if (collaboration) {
-	    rootElements = map$1(collaboration.participants, function(participant) {
+	    rootElements = map(collaboration.participants, function(participant) {
 	      return participant.processRef;
 	    });
 
@@ -20223,7 +21000,7 @@
 	  var diagramsToImport = [ bpmnDiagram ];
 	  var handledElements = [ bpmnElement ];
 
-	  forEach(definitions.diagrams, function(diagram) {
+	  forEach$2(definitions.diagrams, function(diagram) {
 	    var businessObject = diagram.plane.bpmnElement;
 
 	    if (
@@ -20242,7 +21019,7 @@
 	function selfAndAllFlowElements(elements) {
 	  var result = [];
 
-	  forEach(elements, function(element) {
+	  forEach$2(elements, function(element) {
 	    if (!element) {
 	      return;
 	    }
@@ -20275,53 +21052,53 @@
 
 
 	// inlined ../../resources/logo.svg
-	var BPMNIO_LOGO_SVG = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14.02 5.57" width="53" height="21" style="vertical-align:middle"><path fill="currentColor" d="M1.88.92v.14c0 .41-.13.68-.4.8.33.14.46.44.46.86v.33c0 .61-.33.95-.95.95H0V0h.95c.65 0 .93.3.93.92zM.63.57v1.06h.24c.24 0 .38-.1.38-.43V.98c0-.28-.1-.4-.32-.4zm0 1.63v1.22h.36c.2 0 .32-.1.32-.39v-.35c0-.37-.12-.48-.4-.48H.63zM4.18.99v.52c0 .64-.31.98-.94.98h-.3V4h-.62V0h.92c.63 0 .94.35.94.99zM2.94.57v1.35h.3c.2 0 .3-.09.3-.37v-.6c0-.29-.1-.38-.3-.38h-.3zm2.89 2.27L6.25 0h.88v4h-.6V1.12L6.1 3.99h-.6l-.46-2.82v2.82h-.55V0h.87zM8.14 1.1V4h-.56V0h.79L9 2.4V0h.56v4h-.64zm2.49 2.29v.6h-.6v-.6zM12.12 1c0-.63.33-1 .95-1 .61 0 .95.37.95 1v2.04c0 .64-.34 1-.95 1-.62 0-.95-.37-.95-1zm.62 2.08c0 .28.13.39.33.39s.32-.1.32-.4V.98c0-.29-.12-.4-.32-.4s-.33.11-.33.4z"/><path fill="currentColor" d="M0 4.53h14.02v1.04H0zM11.08 0h.63v.62h-.63zm.63 4V1h-.63v2.98z"/></svg>';
+	var BPMNIO_LOGO_SVG = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14.02 5.57" width="53" height="21"><path fill="currentColor" d="M1.88.92v.14c0 .41-.13.68-.4.8.33.14.46.44.46.86v.33c0 .61-.33.95-.95.95H0V0h.95c.65 0 .93.3.93.92zM.63.57v1.06h.24c.24 0 .38-.1.38-.43V.98c0-.28-.1-.4-.32-.4zm0 1.63v1.22h.36c.2 0 .32-.1.32-.39v-.35c0-.37-.12-.48-.4-.48H.63zM4.18.99v.52c0 .64-.31.98-.94.98h-.3V4h-.62V0h.92c.63 0 .94.35.94.99zM2.94.57v1.35h.3c.2 0 .3-.09.3-.37v-.6c0-.29-.1-.38-.3-.38h-.3zm2.89 2.27L6.25 0h.88v4h-.6V1.12L6.1 3.99h-.6l-.46-2.82v2.82h-.55V0h.87zM8.14 1.1V4h-.56V0h.79L9 2.4V0h.56v4h-.64zm2.49 2.29v.6h-.6v-.6zM12.12 1c0-.63.33-1 .95-1 .61 0 .95.37.95 1v2.04c0 .64-.34 1-.95 1-.62 0-.95-.37-.95-1zm.62 2.08c0 .28.13.39.33.39s.32-.1.32-.4V.98c0-.29-.12-.4-.32-.4s-.33.11-.33.4z"/><path fill="currentColor" d="M0 4.53h14.02v1.04H0zM11.08 0h.63v.62h-.63zm.63 4V1h-.63v2.98z"/></svg>';
 
 	var BPMNIO_IMG = BPMNIO_LOGO_SVG;
 
-	function css(attrs) {
-	  return attrs.join(';');
-	}
-
-	var LINK_STYLES = css([
-	  'color: #404040'
-	]);
-
-	var LIGHTBOX_STYLES = css([
-	  'z-index: 1001',
-	  'position: fixed',
-	  'top: 0',
-	  'left: 0',
-	  'right: 0',
-	  'bottom: 0'
-	]);
-
-	var BACKDROP_STYLES = css([
-	  'width: 100%',
-	  'height: 100%',
-	  'background: rgba(40,40,40,0.2)'
-	]);
-
-	var NOTICE_STYLES = css([
-	  'position: absolute',
-	  'left: 50%',
-	  'top: 40%',
-	  'transform: translate(-50%)',
-	  'width: 260px',
-	  'padding: 10px',
-	  'background: white',
-	  'box-shadow: 0 1px 4px rgba(0,0,0,0.3)',
-	  'font-family: Helvetica, Arial, sans-serif',
-	  'font-size: 14px',
-	  'display: flex',
-	  'line-height: 1.3'
-	]);
+	var LOGO_STYLES = {
+	  verticalAlign: 'middle'
+	};
+
+	var LINK_STYLES = {
+	  'color': '#404040'
+	};
+
+	var LIGHTBOX_STYLES = {
+	  'zIndex': '1001',
+	  'position': 'fixed',
+	  'top': '0',
+	  'left': '0',
+	  'right': '0',
+	  'bottom': '0'
+	};
+
+	var BACKDROP_STYLES = {
+	  'width': '100%',
+	  'height': '100%',
+	  'background': 'rgba(40,40,40,0.2)'
+	};
+
+	var NOTICE_STYLES = {
+	  'position': 'absolute',
+	  'left': '50%',
+	  'top': '40%',
+	  'transform': 'translate(-50%)',
+	  'width': '260px',
+	  'padding': '10px',
+	  'background': 'white',
+	  'boxShadow': '0 1px 4px rgba(0,0,0,0.3)',
+	  'fontFamily': 'Helvetica, Arial, sans-serif',
+	  'fontSize': '14px',
+	  'display': 'flex',
+	  'lineHeight': '1.3'
+	};
 
 	var LIGHTBOX_MARKUP =
-	  '<div class="bjs-powered-by-lightbox" style="' + LIGHTBOX_STYLES + '">' +
-	    '<div class="backdrop" style="' + BACKDROP_STYLES + '"></div>' +
-	    '<div class="notice" style="' + NOTICE_STYLES + '">' +
-	      '<a href="https://bpmn.io" target="_blank" rel="noopener" style="margin: 15px 20px 15px 10px; align-self: center;' + LINK_STYLES + '">' +
+	  '<div class="bjs-powered-by-lightbox">' +
+	    '<div class="backdrop"></div>' +
+	    '<div class="notice">' +
+	      '<a href="https://bpmn.io" target="_blank" rel="noopener" class="link">' +
 	        BPMNIO_IMG +
 	      '</a>' +
 	      '<span>' +
@@ -20334,12 +21111,25 @@
 
 	var lightbox;
 
+	function createLightbox() {
+	  lightbox = domify$1(LIGHTBOX_MARKUP);
+
+	  assign$1$1(lightbox, LIGHTBOX_STYLES);
+	  assign$1$1(query$1('svg', lightbox), LOGO_STYLES);
+	  assign$1$1(query$1('.backdrop', lightbox), BACKDROP_STYLES);
+	  assign$1$1(query$1('.notice', lightbox), NOTICE_STYLES);
+	  assign$1$1(query$1('.link', lightbox), LINK_STYLES, {
+	    'margin': '15px 20px 15px 10px',
+	    'alignSelf': 'center'
+	  });
+	}
+
 	function open() {
 
 	  if (!lightbox) {
-	    lightbox = domify(LIGHTBOX_MARKUP);
+	    createLightbox();
 
-	    delegate.bind(lightbox, '.backdrop', 'click', function(event) {
+	    delegate$1.bind(lightbox, '.backdrop', 'click', function(event) {
 	      document.body.removeChild(lightbox);
 	    });
 	  }
@@ -20758,7 +21548,7 @@
 	      var canvas = self.get('canvas');
 
 	      var contentNode = canvas.getActiveLayer(),
-	          defsNode = query('defs', canvas._svg);
+	          defsNode = query$1('defs', canvas._svg);
 
 	      var contents = innerSVG(contentNode),
 	          defs = defsNode ? '<defs>' + innerSVG(defsNode) + '</defs>' : '';
@@ -20860,7 +21650,7 @@
 	  Diagram.prototype.destroy.call(this);
 
 	  // dom detach
-	  remove$1(this._container);
+	  remove$2(this._container);
 	};
 
 	/**
@@ -20903,7 +21693,7 @@
 	  }
 
 	  if (typeof parentNode === 'string') {
-	    parentNode = query(parentNode);
+	    parentNode = query$1(parentNode);
 	  }
 
 	  parentNode.appendChild(this._container);
@@ -20971,9 +21761,9 @@
 
 	BaseViewer.prototype._createContainer = function(options) {
 
-	  var container = domify('<div class="bjs-container"></div>');
+	  var container = domify$1('<div class="bjs-container"></div>');
 
-	  assign(container.style, {
+	  assign$1$1(container, {
 	    width: ensureUnit(options.width),
 	    height: ensureUnit(options.height),
 	    position: options.position
@@ -21063,15 +21853,23 @@
 	       'target="_blank" ' +
 	       'class="bjs-powered-by" ' +
 	       'title="Powered by bpmn.io" ' +
-	       'style="position: absolute; bottom: 15px; right: 15px; z-index: 100; ' + LINK_STYLES + '">' +
+	      '>' +
 	      img +
 	    '</a>';
 
-	  var linkElement = domify(linkMarkup);
+	  var linkElement = domify$1(linkMarkup);
+
+	  assign$1$1(query$1('svg', linkElement), LOGO_STYLES);
+	  assign$1$1(linkElement, LINK_STYLES, {
+	    position: 'absolute',
+	    bottom: '15px',
+	    right: '15px',
+	    zIndex: '100'
+	  });
 
 	  container.appendChild(linkElement);
 
-	  componentEvent.bind(linkElement, 'click', function(event) {
+	  componentEvent$1.bind(linkElement, 'click', function(event) {
 	    open();
 
 	    event.preventDefault();