camunda-bpmn-js 0.24.0 → 0.24.1

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

@@ -28364,14 +28364,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 +28376,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 +28455,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 +28541,9 @@
 	    width,
 	    scale,
 	    search,
-	    entries: originalEntries
+	    entries: originalEntries,
+	    onOpened,
+	    onClosed
 	  } = props;
 
 	  const searchable = F$2(() => {
@@ -28556,6 +28561,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 +28591,8 @@
 	      }
 
 	      const search = [
-	        entry.name,
 	        entry.description || '',
-	        entry.label || '',
-	        entry.id || ''
+	        entry.label || ''
 	      ]
 	        .join('---')
 	        .toLowerCase();
@@ -28680,18 +28691,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 +28927,8 @@
         entries=${ entriesArray }
         headerEntries=${ headerEntriesArray }
         scale=${ scale }
+        onOpened=${ this._onOpened.bind(this) }
+        onClosed=${ this._onClosed.bind(this) }
         ...${{ ...options }}
       />
     `,
@@ -29014,6 +29032,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 +29171,7 @@
 	 *
 	 * @example
 	 * const popupMenuProvider = {
-	 *   getPopupMenuEntries: function(element) {
+	 *   getPopupMenuEntries(element) {
 	 *     return {
 	 *       'entry-1': {
 	 *         label: 'My Entry',
@@ -29156,6 +29182,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 +36955,9 @@
 	    );
 
 	    var isTriggeredByEventEqual = (
-	      businessObject.triggeredByEvent === target.triggeredByEvent
+
+	      // coherse to <false>
+	      !!target.triggeredByEvent === !!businessObject.triggeredByEvent
 	    );
 
 	    var isExpandedEqual = (
@@ -37329,6 +37373,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 +37403,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 = [
 	  {
@@ -102092,8 +102126,11 @@
 	    // 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 unlink template option
+	      this._addPlainElementEntry(element, entrySet);
+	    }
 
 	    // add template entries
 	    entrySet = [ ...entrySet, ...this.getTemplateEntries(element) ];
@@ -102117,6 +102154,10 @@
 
 	  const replaceOption = this._getPlainEntry(element, entries);
 
+	  if (!replaceOption) {
+	    return;
+	  }
+
 	  const [
 	    insertIndex,
 	    entry
@@ -102143,11 +102184,11 @@
 	  } = findReplaceOptions(element) || { };
 
 	  if (!options) {
-	    return;
+	    return null;
 	  }
 
 	  const entry = {
-	    id: option.actionName,
+	    id: 'replace-unlink-element-template',
 	    action: () => {
 	      this._elementTemplates.applyTemplate(element, null);
 	    },
@@ -102199,7 +102240,7 @@
 	      category,
 	    } = template;
 
-	    const entryId = `replace-with-template-${template.id}`;
+	    const entryId = `replace.template-${template.id}`;
 
 	    const defaultGroup = {
 	      id: 'templates',