camunda-bpmn-js 0.24.0 → 1.0.0

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

@@ -22147,6 +22147,9 @@
 
 	};
 
+	Overlays.prototype.isShown = function() {
+	  return this._overlayRoot.style.display !== 'none';
+	};
 
 	Overlays.prototype.show = function() {
 	  setVisible$1(this._overlayRoot);
@@ -28053,7 +28056,9 @@
 
 
 	/**
-	 * Trigger context pad action.
+	 * Trigger context pad via DOM event.
+	 *
+	 * The entry to trigger is determined by the target element.
 	 *
 	 * @param  {string} action
 	 * @param  {Event} event
@@ -28061,10 +28066,7 @@
 	 */
 	ContextPad.prototype.trigger = function(action, event, autoActivate) {
 
-	  var target = this._current.target,
-	      entries = this._current.entries,
-	      entry,
-	      handler,
+	  var entry,
 	      originalEvent,
 	      button = event.delegateTarget || event.target;
 
@@ -28072,19 +28074,45 @@
 	    return event.preventDefault();
 	  }
 
-	  entry = entries[attr$1(button, 'data-action')];
-	  handler = entry.action;
-
+	  entry = attr$1(button, 'data-action');
 	  originalEvent = event.originalEvent || event;
 
+	  return this.triggerEntry(entry, action, originalEvent, autoActivate);
+	};
+
+	/**
+	 * Trigger context pad entry entry.
+	 *
+	 * @param {string} entryId
+	 * @param {string} action
+	 * @param {Event} event
+	 * @param {boolean} [autoActivate=false]
+	 */
+	ContextPad.prototype.triggerEntry = function(entryId, action, event, autoActivate) {
+
+	  if (!this.isShown()) {
+	    return;
+	  }
+
+	  var target = this._current.target,
+	      entries = this._current.entries;
+
+	  var entry = entries[entryId];
+
+	  if (!entry) {
+	    return;
+	  }
+
+	  var handler = entry.action;
+
 	  // simple action (via callback function)
 	  if (isFunction(handler)) {
 	    if (action === 'click') {
-	      return handler(originalEvent, target, autoActivate);
+	      return handler(event, target, autoActivate);
 	    }
 	  } else {
 	    if (handler[action]) {
-	      return handler[action](originalEvent, target, autoActivate);
+	      return handler[action](event, target, autoActivate);
 	    }
 	  }
 
@@ -28285,6 +28313,16 @@
 	};
 
 
+	/**
+	 * Check if pad is open and not hidden.
+	 *
+	 * @return {boolean}
+	 */
+	ContextPad.prototype.isShown = function() {
+	  return this.isOpen() && this._overlays.isShown();
+	};
+
+
 	/**
 	 * Get contex pad position.
 	 *
@@ -28364,14 +28402,11 @@
 	    onClick
 	  } = props;
 
-	  const createImage = imageUrl => {
-	    return m$2`<img src=${ imageUrl } class="djs-popup-entry-icon" />`;
-	  };
-
 	  return m$2`
     <li
       class=${ clsx('entry', { selected }) }
       data-id=${ entry.id }
+      title=${ entry.title || entry.label }
       onClick=${ onClick }
       onMouseEnter=${ onMouseEnter }
       onMouseLeave=${ onMouseLeave }
@@ -28379,10 +28414,16 @@
       <div class="djs-popup-entry-content">
         <span
           class=${ clsx('djs-popup-entry-name', entry.className) }
-          title=${ entry.label || entry.name }
         >
-          ${ entry.imageUrl ? createImage(entry.imageUrl) : null }
-          ${ entry.label || entry.name }
+          ${ entry.imageUrl ? m$2`
+            <img class="djs-popup-entry-icon" src=${ entry.imageUrl } />
+          ` : null }
+
+          ${ entry.label ? m$2`
+            <span class="djs-popup-label">
+              ${ entry.label }
+            </span>
+          ` : null }
         </span>
         ${ entry.description && m$2`
           <span
@@ -28452,7 +28493,7 @@
     <div class="djs-popup-results" ref=${ resultsRef }>
       ${ groups.map(group => m$2`
         ${ group.name && m$2`
-          <div key=${ group.id } class="entry-header">
+          <div key=${ group.id } class="entry-header" title=${ group.name }>
             ${ group.name }
           </div>
         ` }
@@ -28538,7 +28579,9 @@
 	    width,
 	    scale,
 	    search,
-	    entries: originalEntries
+	    entries: originalEntries,
+	    onOpened,
+	    onClosed
 	  } = props;
 
 	  const searchable = F$2(() => {
@@ -28556,6 +28599,14 @@
 	  const [ entries, setEntries ] = p$3(originalEntries);
 	  const [ selectedEntry, setSelectedEntry ] = p$3(entries[0]);
 
+	  h$2(() => {
+	    onOpened();
+
+	    return () => {
+	      onClosed();
+	    };
+	  }, []);
+
 	  const updateEntries = T$3((newEntries) => {
 
 	    // select first entry if non is selected
@@ -28578,10 +28629,8 @@
 	      }
 
 	      const search = [
-	        entry.name,
 	        entry.description || '',
-	        entry.label || '',
-	        entry.id || ''
+	        entry.label || ''
 	      ]
 	        .join('---')
 	        .toLowerCase();
@@ -28680,18 +28729,23 @@
     >
       ${ displayHeader && m$2`
         <div class="djs-popup-header">
-          <h3 class="djs-popup-title">${ title }</h3>
+          <h3 class="djs-popup-title" title=${ title }>${ title }</h3>
           ${ headerEntries.map(entry => m$2`
             <span
               class=${ getHeaderClasses(entry, entry === selectedEntry) }
               onClick=${ event => onSelect(event, entry) }
-              title=${ entry.title }
+              title=${ entry.title || entry.label }
               data-id=${ entry.id }
               onMouseEnter=${ () => setSelectedEntry(entry) }
               onMouseLeave=${ () => setSelectedEntry(null) }
             >
-              ${ entry.imageUrl ? m$2`<img src=${ entry.imageUrl } />` : null }
-              ${ entry.label ? entry.label : null }
+              ${ entry.imageUrl ? m$2`
+                <img class="djs-popup-entry-icon" src=${ entry.imageUrl } />
+              ` : null }
+
+              ${ entry.label ? m$2`
+                <span class="djs-popup-label">${ entry.label }</span>
+              ` : null }
             </span>
           `) }
         </div>
@@ -28911,6 +28965,8 @@
         entries=${ entriesArray }
         headerEntries=${ headerEntriesArray }
         scale=${ scale }
+        onOpened=${ this._onOpened.bind(this) }
+        onClosed=${ this._onClosed.bind(this) }
         ...${{ ...options }}
       />
     `,
@@ -29014,6 +29070,14 @@
 	  this._eventBus.fire(`popupMenu.${ event }`, payload);
 	};
 
+	PopupMenu.prototype._onOpened = function() {
+	  this._emit('opened');
+	};
+
+	PopupMenu.prototype._onClosed = function() {
+	  this._emit('closed');
+	};
+
 	PopupMenu.prototype._createContainer = function(config) {
 
 	  let parent = config && config.parent || 'body';
@@ -29145,7 +29209,7 @@
 	 *
 	 * @example
 	 * const popupMenuProvider = {
-	 *   getPopupMenuEntries: function(element) {
+	 *   getPopupMenuEntries(element) {
 	 *     return {
 	 *       'entry-1': {
 	 *         label: 'My Entry',
@@ -29156,6 +29220,22 @@
 	 * };
 	 *
 	 * popupMenu.registerProvider('myMenuID', popupMenuProvider);
+	 *
+	 * @example
+	 * const replacingPopupMenuProvider = {
+	 *   getPopupMenuEntries(element) {
+	 *     return (entries) => {
+	 *       const {
+	 *         someEntry,
+	 *         ...remainingEntries
+	 *       } = entries;
+	 *
+	 *       return remainingEntries;
+	 *     };
+	 *   }
+	 * };
+	 *
+	 * popupMenu.registerProvider('myMenuID', replacingPopupMenuProvider);
 	 */
 	PopupMenu.prototype.registerProvider = function(id, priority, provider) {
 	  if (!provider) {
@@ -36913,7 +36993,9 @@
 	    );
 
 	    var isTriggeredByEventEqual = (
-	      businessObject.triggeredByEvent === target.triggeredByEvent
+
+	      // coherse to <false>
+	      !!target.triggeredByEvent === !!businessObject.triggeredByEvent
 	    );
 
 	    var isExpandedEqual = (
@@ -37329,6 +37411,15 @@
 	];
 
 	var TRANSACTION = [
+	  {
+	    label: 'Transaction',
+	    actionName: 'replace-with-transaction',
+	    className: 'bpmn-icon-transaction',
+	    target: {
+	      type: 'bpmn:Transaction',
+	      isExpanded: true
+	    }
+	  },
 	  {
 	    label: 'Sub Process',
 	    actionName: 'replace-with-subprocess',
@@ -37350,26 +37441,7 @@
 	  }
 	];
 
-	var EVENT_SUB_PROCESS = [
-	  {
-	    label: 'Sub Process',
-	    actionName: 'replace-with-subprocess',
-	    className: 'bpmn-icon-subprocess-expanded',
-	    target: {
-	      type: 'bpmn:SubProcess',
-	      isExpanded: true
-	    }
-	  },
-	  {
-	    label: 'Transaction',
-	    actionName: 'replace-with-transaction',
-	    className: 'bpmn-icon-transaction',
-	    target: {
-	      type: 'bpmn:Transaction',
-	      isExpanded: true
-	    }
-	  }
-	];
+	var EVENT_SUB_PROCESS = TRANSACTION;
 
 	var TASK = [
 	  {
@@ -39893,6 +39965,7 @@
 	  var directEditing = injector.get('directEditing', false);
 	  var searchPad = injector.get('searchPad', false);
 	  var modeling = injector.get('modeling', false);
+	  var contextPad = injector.get('contextPad', false);
 
 	  // (2) check components and register actions
 
@@ -40016,6 +40089,12 @@
 	    });
 	  }
 
+	  if (selection && contextPad) {
+	    this._registerAction('replaceElement', function(event) {
+	      contextPad.triggerEntry('replace', 'click', event);
+	    });
+	  }
+
 	};
 
 	var EditorActionsModule = {
@@ -41134,6 +41213,23 @@
 	    }
 	  });
 
+	  // activate replace element
+	  // R
+	  addListener('replaceElement', function(context) {
+
+	    var event = context.keyEvent;
+
+	    if (keyboard.hasModifier(event)) {
+	      return;
+	    }
+
+	    if (keyboard.isKey([ 'r', 'R' ], event)) {
+	      editorActions.trigger('replaceElement', event);
+
+	      return true;
+	    }
+	  });
+
 	};
 
 	var KeyboardModule = {
@@ -102042,6 +102138,124 @@
 	  bpmnRules: [ 'type', CustomRules ]
 	};
 
+	/**
+	 * A replace menu provider that allows to replace elements with
+	 * element templates.
+	 */
+	function ElementTemplatesReplaceProvider(popupMenu, translate, elementTemplates) {
+
+	  this._popupMenu = popupMenu;
+	  this._translate = translate;
+	  this._elementTemplates = elementTemplates;
+
+	  this.register();
+	}
+
+	ElementTemplatesReplaceProvider.$inject = [
+	  'popupMenu',
+	  'translate',
+	  'elementTemplates'
+	];
+
+	/**
+	 * Register replace menu provider in the popup menu
+	 */
+	ElementTemplatesReplaceProvider.prototype.register = function() {
+	  this._popupMenu.registerProvider('bpmn-replace', this);
+	};
+
+	/**
+	 * Adds the element templates to the replace menu.
+	 * @param {djs.model.Base} element
+	 *
+	 * @returns {Object}
+	 */
+	ElementTemplatesReplaceProvider.prototype.getPopupMenuEntries = function(element) {
+
+	  return (entries) => {
+
+	    // convert our entries into something sortable
+	    let entrySet = Object.entries(entries);
+
+	    // add template entries
+	    entrySet = [ ...entrySet, ...this.getTemplateEntries(element) ];
+
+	    // convert back to object
+	    return entrySet.reduce((entries, [ key, value ]) => {
+	      entries[key] = value;
+
+	      return entries;
+	    }, {});
+	  };
+	};
+
+	/**
+	 * Get all element templates that can be used to replace the given element.
+	 *
+	 * @param {djs.model.Base} element
+	 *
+	 * @return {Array<Object>} a list of element templates as menu entries
+	 */
+	ElementTemplatesReplaceProvider.prototype.getTemplateEntries = function(element) {
+
+	  const templates = this._getMatchingTemplates(element);
+	  return templates.map(template => {
+
+	    const {
+	      icon = {},
+	      category,
+	    } = template;
+
+	    const entryId = `replace.template-${template.id}`;
+
+	    const defaultGroup = {
+	      id: 'templates',
+	      name: this._translate('Templates')
+	    };
+
+	    return [ entryId, {
+	      label: template.name,
+	      description: template.description,
+	      documentationRef: template.documentationRef,
+	      imageUrl: icon.contents,
+	      group: category || defaultGroup,
+	      action: () => {
+	        this._elementTemplates.applyTemplate(element, template);
+	      }
+	    } ];
+	  });
+	};
+
+	/**
+	 * Returns the templates that can the element can be replaced with.
+	 *
+	 * @param  {djs.model.Base} element
+	 *
+	 * @return {Array<ElementTemplate>}
+	 */
+	ElementTemplatesReplaceProvider.prototype._getMatchingTemplates = function(element) {
+	  return this._elementTemplates.getLatest().filter(template => {
+	    return isAny(element, template.appliesTo) && !isTemplateApplied(element, template);
+	  });
+	};
+
+
+	// helpers ////////////
+	function isTemplateApplied(element, template) {
+	  const businessObject = getBusinessObject$1(element);
+
+	  if (businessObject) {
+	    return businessObject.get('zeebe:modelerTemplate') === template.id;
+	  }
+
+	  return false;
+	}
+
+	var replaceModule = {
+	  __init__: [ 'elementTemplatesProvider' ],
+	  elementTemplatesProvider: [ 'type', ElementTemplatesReplaceProvider ]
+	};
+
 	const ALL_OPTIONS = Object.values(replaceOptions);
 
 	function getReplaceOptionGroups() {
@@ -102050,23 +102264,18 @@
 
 	/**
 	 * A replace menu provider that allows to replace elements with
-	 * element templates.
+	 * templates applied with the correspondent plain element.
 	 */
-	function ElementTemplatesReplaceProvider(config, popupMenu, translate, elementTemplates) {
+	function UnlinkTemplateReplaceProvider(popupMenu, translate, elementTemplates) {
 
 	  this._popupMenu = popupMenu;
 	  this._translate = translate;
 	  this._elementTemplates = elementTemplates;
 
-	  const enabled = config && config.enabled;
-
-	  if (enabled) {
-	    this.register();
-	  }
+	  this.register();
 	}
 
-	ElementTemplatesReplaceProvider.$inject = [
-	  'config.elementTemplatesReplaceProvider',
+	UnlinkTemplateReplaceProvider.$inject = [
 	  'popupMenu',
 	  'translate',
 	  'elementTemplates'
@@ -102075,7 +102284,7 @@
 	/**
 	 * Register replace menu provider in the popup menu
 	 */
-	ElementTemplatesReplaceProvider.prototype.register = function() {
+	UnlinkTemplateReplaceProvider.prototype.register = function() {
 	  this._popupMenu.registerProvider('bpmn-replace', this);
 	};
 
@@ -102085,18 +102294,18 @@
 	 *
 	 * @returns {Object}
 	 */
-	ElementTemplatesReplaceProvider.prototype.getPopupMenuEntries = function(element) {
+	UnlinkTemplateReplaceProvider.prototype.getPopupMenuEntries = function(element) {
 
 	  return (entries) => {
 
 	    // convert our entries into something sortable
 	    let entrySet = Object.entries(entries);
 
-	    // add unlink template option
-	    this._addPlainElementEntry(element, entrySet);
+	    if (this._elementTemplates.get(element)) {
 
-	    // add template entries
-	    entrySet = [ ...entrySet, ...this.getTemplateEntries(element) ];
+	      // add unlink template option
+	      this.addPlainElementEntry(element, entrySet, this._translate, this._elementTemplates);
+	    }
 
 	    // convert back to object
 	    return entrySet.reduce((entries, [ key, value ]) => {
@@ -102107,15 +102316,20 @@
 	  };
 	};
 
+
 	/**
 	 * Adds the option to replace with plain element (unlink template).
 	 *
 	 * @param {djs.model.Base} element
 	 * @param {Array<Object>} entries
 	 */
-	ElementTemplatesReplaceProvider.prototype._addPlainElementEntry = function(element, entries) {
+	UnlinkTemplateReplaceProvider.prototype.addPlainElementEntry = function(element, entries, translate, elementTemplates) {
 
-	  const replaceOption = this._getPlainEntry(element, entries);
+	  const replaceOption = this.getPlainEntry(element, entries, translate, elementTemplates);
+
+	  if (!replaceOption) {
+	    return;
+	  }
 
 	  const [
 	    insertIndex,
@@ -102134,7 +102348,7 @@
 	 *
 	 * @returns {Array<Object, number>}
 	 */
-	ElementTemplatesReplaceProvider.prototype._getPlainEntry = function(element, entries) {
+	UnlinkTemplateReplaceProvider.prototype.getPlainEntry = function(element, entries, translate, elementTemplates) {
 
 	  const {
 	    options,
@@ -102143,15 +102357,15 @@
 	  } = findReplaceOptions(element) || { };
 
 	  if (!options) {
-	    return;
+	    return null;
 	  }
 
 	  const entry = {
-	    id: option.actionName,
+	    id: 'replace-unlink-element-template',
 	    action: () => {
-	      this._elementTemplates.applyTemplate(element, null);
+	      elementTemplates.applyTemplate(element, null);
 	    },
-	    label: this._translate(option.label),
+	    label: translate(option.label),
 	    className: option.className
 	  };
 
@@ -102182,66 +102396,34 @@
 	  ];
 	};
 
+
 	/**
-	 * Get all element templates that can be used to replace the given element.
-	 *
-	 * @param {djs.model.Base} element
+	 * @param {ModdleElement} element
 	 *
-	 * @return {Array<Object>} a list of element templates as menu entries
+	 * @return { { options: Array<any>, option: any, optionIndex: number } | null }
 	 */
-	ElementTemplatesReplaceProvider.prototype.getTemplateEntries = function(element) {
-
-	  const templates = this._getMatchingTemplates(element);
-	  return templates.map(template => {
-
-	    const {
-	      icon = {},
-	      category,
-	    } = template;
-
-	    const entryId = `replace-with-template-${template.id}`;
-
-	    const defaultGroup = {
-	      id: 'templates',
-	      name: this._translate('Templates')
-	    };
+	function findReplaceOptions(element) {
 
-	    return [ entryId, {
-	      name: template.name,
-	      description: template.description,
-	      documentationRef: template.documentationRef,
-	      imageUrl: icon.contents,
-	      group: category || defaultGroup,
-	      action: () => {
-	        this._elementTemplates.applyTemplate(element, template);
-	      }
-	    } ];
-	  });
-	};
+	  const isSameType = (element, option) => option.target && !isDifferentType(element)(option);
 
-	/**
-	 * Returns the templates that can the element can be replaced with.
-	 *
-	 * @param  {djs.model.Base} element
-	 *
-	 * @return {Array<ElementTemplate>}
-	 */
-	ElementTemplatesReplaceProvider.prototype._getMatchingTemplates = function(element) {
-	  return this._elementTemplates.getLatest().filter(template => {
-	    return isAny(element, template.appliesTo) && !isTemplateApplied(element, template);
-	  });
-	};
+	  return getReplaceOptionGroups().reduce((result, options) => {
 
+	    if (result) {
+	      return result;
+	    }
 
-	// helpers ////////////
-	function isTemplateApplied(element, template) {
-	  const businessObject = getBusinessObject$1(element);
+	    const optionIndex = options.findIndex(option => isSameType(element, option));
 
-	  if (businessObject) {
-	    return businessObject.get('zeebe:modelerTemplate') === template.id;
-	  }
+	    if (optionIndex === -1) {
+	      return;
+	    }
 
-	  return false;
+	    return {
+	      options,
+	      option: options[optionIndex],
+	      optionIndex
+	    };
+	  }, null);
 	}
 
 	function getOptionIndex(options, index, entries) {
@@ -102256,38 +102438,190 @@
 	  );
 	}
 
-	/**
-	 * @param {ModdleElement} element
-	 *
-	 * @return { { options: Array<any>, option: any, optionIndex: number } | null }
-	 */
-	function findReplaceOptions(element) {
+	var sharedReplaceModule = {
+	  __init__: [
+	    'unlinkTemplateReplaceProvider'
+	  ],
+	  unlinkTemplateReplaceProvider: [ 'type', UnlinkTemplateReplaceProvider ]
+	};
 
-	  const isSameType = (element, option) => option.target && !isDifferentType(element)(option);
+	const colorImageSvg = '<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22"><path d="m12.5 5.5.3-.4 3.6-3.6c.5-.5 1.3-.5 1.7 0l1 1c.5.4.5 1.2 0 1.7l-3.6 3.6-.4.2v.2c0 1.4.6 2 1 2.7v.6l-1.7 1.6c-.2.2-.4.2-.6 0L7.3 6.6a.4.4 0 0 1 0-.6l.3-.3.5-.5.8-.8c.2-.2.4-.1.6 0 .9.5 1.5 1.1 3 1.1zm-9.9 6 4.2-4.2 6.3 6.3-4.2 4.2c-.3.3-.9.3-1.2 0l-.8-.8-.9-.8-2.3-2.9" /></svg>';
+
+	const colorImageUrl = 'data:image/svg+xml;utf8,' + encodeURIComponent(colorImageSvg);
+
+
+	function ColorContextPadProvider(contextPad, popupMenu, canvas, translate) {
+
+	  this._contextPad = contextPad;
+	  this._popupMenu = popupMenu;
+	  this._canvas = canvas;
+	  this._translate = translate;
+
+	  contextPad.registerProvider(this);
+	}
+
+
+	ColorContextPadProvider.$inject = [
+	  'contextPad',
+	  'popupMenu',
+	  'canvas',
+	  'translate'
+	];
+
+
+	ColorContextPadProvider.prototype.getContextPadEntries = function(element) {
+	  return this._createPopupAction([ element ]);
+	};
+
+
+	ColorContextPadProvider.prototype.getMultiElementContextPadEntries = function(elements) {
+
+	  return this._createPopupAction(elements);
+	};
+
+	ColorContextPadProvider.prototype._createPopupAction = function(elements) {
+
+	  const canvas = this._canvas;
+	  const translate = this._translate;
+	  const contextPad = this._contextPad;
+	  const popupMenu = this._popupMenu;
+
+	  return {
+	    'set-color': {
+	      group: 'edit',
+	      className: 'bpmn-icon-color',
+	      title: translate('Set Color'),
+	      imageUrl: colorImageUrl,
+	      action: {
+	        click: (event, element) => {
+
+	          // get start popup draw start position
+	          var position = {
+	            ...getStartPosition(canvas, contextPad, elements),
+	            cursor: {
+	              x: event.x,
+	              y: event.y
+	            }
+	          };
+
+	          // open new color-picker popup
+	          popupMenu.open(elements, 'color-picker', position);
+	        }
+	      }
+	    }
+	  };
+
+	};
+
+
+	// helpers //////////////////////
+
+	function getStartPosition(canvas, contextPad, elements) {
+
+	  var Y_OFFSET = 5;
+
+	  var diagramContainer = canvas.getContainer(),
+	      pad = contextPad.getPad(elements).html;
+
+	  var diagramRect = diagramContainer.getBoundingClientRect(),
+	      padRect = pad.getBoundingClientRect();
+
+	  var top = padRect.top - diagramRect.top;
+	  var left = padRect.left - diagramRect.left;
+
+	  var pos = {
+	    x: left,
+	    y: top + padRect.height + Y_OFFSET
+	  };
+
+	  return pos;
+	}
 
-	  return getReplaceOptionGroups().reduce((result, options) => {
+	const COLORS = [ {
+	  label: 'Default',
+	  fill: undefined,
+	  stroke: undefined
+	}, {
+	  label: 'Blue',
+	  fill: '#BBDEFB',
+	  stroke: '#0D4372'
+	}, {
+	  label: 'Orange',
+	  fill: '#FFE0B2',
+	  stroke: '#6B3C00'
+	}, {
+	  label: 'Green',
+	  fill: '#C8E6C9',
+	  stroke: '#205022'
+	}, {
+	  label: 'Red',
+	  fill: '#FFCDD2',
+	  stroke: '#831311'
+	}, {
+	  label: 'Purple',
+	  fill: '#E1BEE7',
+	  stroke: '#5B176D'
+	} ];
 
-	    if (result) {
-	      return result;
-	    }
 
-	    const optionIndex = options.findIndex(option => isSameType(element, option));
+	function ColorPopupProvider(config, popupMenu, modeling, translate) {
+	  this._popupMenu = popupMenu;
+	  this._modeling = modeling;
+	  this._translate = translate;
+
+	  this._colors = config && config.colors || COLORS;
+
+	  this._popupMenu.registerProvider('color-picker', this);
+	}
 
-	    if (optionIndex === -1) {
-	      return;
-	    }
+
+	ColorPopupProvider.$inject = [
+	  'config.colorPicker',
+	  'popupMenu',
+	  'modeling',
+	  'translate'
+	];
+
+
+	ColorPopupProvider.prototype.getEntries = function(elements) {
+	  var self = this;
+
+	  var colorIcon = domify$1(`
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="100%">
+      <rect rx="2" x="1" y="1" width="22" height="22" fill="var(--fill-color)" stroke="var(--stroke-color)"></rect>
+    </svg>
+  `);
+
+	  var entries = this._colors.map(function(color) {
+
+	    colorIcon.style.setProperty('--fill-color', color.fill || 'white');
+	    colorIcon.style.setProperty('--stroke-color', color.stroke || 'rgb(34, 36, 42)');
 
 	    return {
-	      options,
-	      option: options[optionIndex],
-	      optionIndex
+	      title: self._translate(color.label),
+	      id: color.label.toLowerCase() + '-color',
+	      imageUrl: `data:image/svg+xml;utf8,${ encodeURIComponent(colorIcon.outerHTML) }`,
+	      action: createAction(self._modeling, elements, color)
 	    };
-	  }, null);
+	  });
+
+	  return entries;
+	};
+
+
+	function createAction(modeling, element, color) {
+	  return function() {
+	    modeling.setColor(element, color);
+	  };
 	}
 
-	var replaceModule = {
-	  __init__: [ 'elementTemplatesProvider' ],
-	  elementTemplatesProvider: [ 'type', ElementTemplatesReplaceProvider ]
+	var colorPickerModule = {
+	  __init__: [
+	    'colorContextPadProvider',
+	    'colorPopupProvider'
+	  ],
+	  colorContextPadProvider: [ 'type', ColorContextPadProvider ],
+	  colorPopupProvider: [ 'type', ColorPopupProvider ]
 	};
 
 	function getModelerTemplateIcon(element) {
@@ -102831,7 +103165,9 @@
 	  rulesModule,
 	  zeebePropertiesProviderModule,
 	  index$1,
-	  replaceModule
+	  replaceModule,
+	  sharedReplaceModule,
+	  colorPickerModule
 	];
 
 	Modeler.prototype._modules = [].concat(