camunda-bpmn-js 4.6.2 → 4.7.0

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

@@ -28233,6 +28233,94 @@
 
   function r$2(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r$2(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r$2(e))&&(n&&(n+=" "),n+=t);return n}
 
+  /**
+   * @typedef {import('./PopupMenuProvider').PopupMenuHeaderEntry} PopupMenuHeaderEntry
+   */
+
+  /**
+   * Component that renders a popup menu header.
+   *
+   * @param {Object} props
+   * @param {PopupMenuHeaderEntry[]} props.headerEntries
+   * @param {PopupMenuHeaderEntry} props.selectedEntry
+   * @param {(event: MouseEvent, entry: PopupMenuHeaderEntry) => void} props.onSelect
+   * @param {(entry: PopupMenuHeaderEntry | null) => void} props.setSelectedEntry
+   * @param {string} props.title
+   */
+  function PopupMenuHeader(props) {
+    const {
+      headerEntries,
+      onSelect,
+      selectedEntry,
+      setSelectedEntry,
+      title
+    } = props;
+
+    const groups = F$4(() => groupEntries$1(headerEntries), [ headerEntries ]);
+
+    return m$3`
+    <div class="djs-popup-header">
+      <h3 class="djs-popup-title" title=${ title }>${ title }</h3>
+      ${ groups.map((group) => m$3`
+        <ul key=${ group.id } class="djs-popup-header-group" data-header-group=${ group.id }>
+
+          ${ group.entries.map(entry => m$3`
+            <li key=${ entry.id }>
+              <${ entry.action ? 'button' : 'span' }
+                class=${ getHeaderClasses(entry, entry === selectedEntry) }
+                onClick=${ event => entry.action && onSelect(event, entry) }
+                title=${ entry.title || entry.label }
+                data-id=${ entry.id }
+                onMouseEnter=${ () => entry.action && setSelectedEntry(entry) }
+                onMouseLeave=${ () => entry.action && setSelectedEntry(null) }
+                onFocus=${ () => entry.action && setSelectedEntry(entry) }
+                onBlur=${ () => entry.action && setSelectedEntry(null) }
+              >
+                ${(entry.imageUrl && m$3`<img class="djs-popup-entry-icon" src=${ entry.imageUrl } alt="" />`) ||
+                (entry.imageHtml && m$3`<div class="djs-popup-entry-icon" dangerouslySetInnerHTML=${ { __html: entry.imageHtml } } />`)}
+                ${ entry.label ? m$3`
+                  <span class="djs-popup-label">${ entry.label }</span>
+                ` : null }
+              </${ entry.action ? 'button' : 'span' }>
+            </li>
+          `) }
+        </ul>
+      `) }
+    </div>
+  `;
+  }
+
+
+  // helpers
+  function groupEntries$1(entries) {
+    return entries.reduce((groups, entry) => {
+      const groupId = entry.group || 'default';
+
+      const group = groups.find(group => group.id === groupId);
+
+      if (group) {
+        group.entries.push(entry);
+      } else {
+        groups.push({
+          id: groupId,
+          entries: [ entry ]
+        });
+      }
+
+      return groups;
+    }, []);
+  }
+
+  function getHeaderClasses(entry, selected) {
+    return clsx(
+      'entry',
+      entry.className,
+      entry.active ? 'active' : '',
+      entry.disabled ? 'disabled' : '',
+      selected ? 'selected' : ''
+    );
+  }
+
   /**
    * @typedef {import('./PopupMenuProvider').PopupMenuEntry} PopupMenuEntry
    */
@@ -28430,6 +28518,7 @@
    *
    * @param {Object} props
    * @param {() => void} props.onClose
+   * @param {() => void} props.onSelect
    * @param {(element: HTMLElement) => Point} props.position
    * @param {string} props.className
    * @param {PopupMenuEntry[]} props.entries
@@ -28580,28 +28669,13 @@
       scale=${ scale }
     >
       ${ displayHeader && m$3`
-        <div class="djs-popup-header">
-          <h3 class="djs-popup-title" title=${ title }>${ title }</h3>
-          ${ headerEntries.map(entry => m$3`
-            <${ entry.action ? 'button' : 'span' }
-              class=${ getHeaderClasses(entry, entry === selectedEntry) }
-              onClick=${ event => onSelect(event, entry) }
-              title=${ entry.title || entry.label }
-              data-id=${ entry.id }
-              onMouseEnter=${ () => setSelectedEntry(entry) }
-              onMouseLeave=${ () => setSelectedEntry(null) }
-              onFocus=${ () => setSelectedEntry(entry) }
-              onBlur=${ () => setSelectedEntry(null) }
-            >
-            ${(entry.imageUrl && m$3`<img class="djs-popup-entry-icon" src=${ entry.imageUrl } alt="" />`) ||
-            (entry.imageHtml && m$3`<div class="djs-popup-entry-icon" dangerouslySetInnerHTML=${ { __html: entry.imageHtml } } />`)}
-
-              ${ entry.label ? m$3`
-                <span class="djs-popup-label">${ entry.label }</span>
-              ` : null }
-            </${ entry.action ? 'button' : 'span' }>
-          `) }
-        </div>
+        <${PopupMenuHeader}
+          headerEntries=${ headerEntries }
+          onSelect=${ onSelect }
+          selectedEntry=${ selectedEntry }
+          setSelectedEntry=${ setSelectedEntry }
+          title=${ title }
+        />
       ` }
       ${ originalEntries.length > 0 && m$3`
         <div class="djs-popup-body">
@@ -28724,16 +28798,6 @@
       width: `${props.width}px`,
       'transform-origin': 'top left'
     };
-  }
-
-  function getHeaderClasses(entry, selected) {
-    return clsx(
-      'entry',
-      entry.className,
-      entry.active ? 'active' : '',
-      entry.disabled ? 'disabled' : '',
-      selected ? 'selected' : ''
-    );
   }
 
   /**
@@ -130438,6 +130502,16 @@
 
   const PRIMITIVE_MODDLE_TYPES$1 = ['Boolean', 'Integer', 'String'];
   function getPropertyValue(element, property, scope) {
+    const rawValue = getRawPropertyValue(element, property);
+    const {
+      type
+    } = property;
+    if (type === 'Boolean') {
+      return getBooleanPropertyValue(rawValue);
+    }
+    return rawValue;
+  }
+  function getRawPropertyValue(element, property, scope) {
     let businessObject = getBusinessObject$2(element);
     const defaultValue = '';
     const {
@@ -130552,6 +130626,22 @@
     // should never throw as templates are validated beforehand
     throw unknownBindingError$1(element, property);
   }
+
+  /**
+   * Cast a string value to a boolean if possible. Otherwise return the value.
+   * Cannot always cast due to FEEL expressions.
+   *
+   * @param {string|boolean} value
+   */
+  function getBooleanPropertyValue(value) {
+    switch (value) {
+      case 'true':
+        return true;
+      case 'false':
+        return false;
+    }
+    return value;
+  }
   const NO_OP = null;
   function setPropertyValue(bpmnFactory, commandStack, element, property, value) {
     let businessObject = getBusinessObject$2(element);