camunda-bpmn-js 0.24.0 → 0.24.1

package/dist/assets/diagram-js.css

@@ -54,8 +54,9 @@
   --palette-background-color: var(--color-grey-225-10-97);
   --palette-border-color: var(--color-grey-225-10-75);
 
+  --popup-font-size: 14px;
   --popup-header-entry-selected-color: var(--color-blue-205-100-50);
-  --popup-header-separator-color: var(--color-grey-225-10-75);
+  --popup-header-font-weight: bolder;
   --popup-background-color: var(--color-white);
   --popup-border-color: var(--color-grey-225-10-75);
   --popup-shadow-color: var(--color-grey-225-10-80);
@@ -536,12 +537,13 @@ marker.djs-dragger tspan {
   box-shadow: 0px 2px 10px var(--popup-shadow-color);
   min-width: 120px;
   outline: none;
+  font-size: var(--popup-font-size);
 }
 
 .djs-popup-search input {
   width: 100%;
   box-sizing: border-box;
-  font-size: 14px;
+  font-size: var(--popup-font-size);
   padding: 3px 6px;
   border-radius: 2px;
   border: solid 1px var(--popup-search-border-color);
@@ -562,7 +564,6 @@ marker.djs-dragger tspan {
 }
 
 .djs-popup-header .entry {
-  font-size: 19.5px;
   border-radius: 2px;
 }
 
@@ -579,11 +580,10 @@ marker.djs-dragger tspan {
 }
 
 .djs-popup-title {
-  font-size: 14px;
-  font-weight: 500;
+  font-size: var(--popup-font-size);
+  font-weight: var(--popup-header-font-weight);
   flex: 1;
   margin: 0;
-  width: max-content;
 }
 
 .djs-popup-search {
@@ -620,19 +620,26 @@ marker.djs-dragger tspan {
   padding: 5px 7px;
   cursor: default;
   border-radius: 4px;
-  font-size: 14px;
 }
 
 .djs-popup-body .entry-header {
-  font-weight: 500;
+  font-weight: var(--popup-header-font-weight);
   color: var(--popup-entry-title-color);
   padding-left: 0;
 }
 
+.djs-popup [class*="icon"] .djs-popup-label,
+.djs-popup-label:not(:first-child) {
+  margin-left: .5em;
+}
+
+.djs-popup [class*="icon"]:before,
 .djs-popup-entry-icon {
-  width: 16px;
-  margin-right: 0.5rem;
-  margin-bottom: -0.2rem;
+  width: 1em;
+  height: 1em;
+  display: inline-block;
+  font-size: 1.4em;
+  vertical-align: middle;
 }
 
 .djs-popup-body .entry-header:not(:first-child) {
@@ -666,10 +673,15 @@ marker.djs-dragger tspan {
   color: var(--popup-description-color);
 }
 
-.djs-popup-entry-name,
+.djs-popup-label,
 .djs-popup-entry-description {
   line-height: 1.4em;
-  display: block;
+}
+
+.djs-popup-title,
+.djs-popup-label,
+.djs-popup-entry-description,
+.djs-popup .entry-header {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -686,15 +698,6 @@ marker.djs-dragger tspan {
   overflow: hidden;
 }
 
-.djs-popup-entry-name[class^="bpmn-icon-"]:before,
-.djs-popup-entry-name[class*=" bpmn-icon-"]:before,
-.djs-popup-entry-icon {
-  display: inline-block;
-  font-size: 1.4em;
-  vertical-align: middle;
-  margin-right: 0.5rem;
-}
-
 .djs-popup-body {
   flex-direction: column;
   width: auto;
@@ -711,13 +714,12 @@ marker.djs-dragger tspan {
 
 .djs-popup *::-webkit-scrollbar-track {
   box-shadow: none;
-  background: transparent1;
+  background: transparent;
   margin: 0;
   padding: 5px;
 }
 
 .djs-popup-no-results {
-  font-size: 14px;
   padding: 0 12px 12px 12px;
   color: var(--popup-no-results-color);
 }

package/dist/base-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 = [
 	  {