camunda-bpmn-js 5.14.1 → 5.15.0

package/dist/base-modeler.development.js

@@ -1450,6 +1450,12 @@
     return el.querySelector(selector);
   }
 
+  function all$2(selector, el) {
+    el = el || document;
+
+    return el.querySelectorAll(selector);
+  }
+
   function remove$5(el) {
     el.parentNode && el.parentNode.removeChild(el);
   }
@@ -18870,6 +18876,17 @@
     return element;
   }
 
+  /**
+   * Returns true if the given element is an external label.
+   *
+   * @param {Element} element
+   *
+   * @return {boolean}
+   */
+  function isExternalLabel(element) {
+    return isLabel(element) && isLabelExternal(element.labelTarget);
+  }
+
   var black = 'hsl(225, 10%, 15%)';
   var white = 'white';
 
@@ -19000,11 +19017,11 @@
       [ 'l', width - borderRadius * 2, 0 ],
       [ 'a', borderRadius, borderRadius, 0, 0, 1, borderRadius, borderRadius ],
       [ 'l', 0, height - borderRadius * 2 ],
-      [ 'a', borderRadius, borderRadius, 0, 0, 1, -10, borderRadius ],
+      [ 'a', borderRadius, borderRadius, 0, 0, 1, -borderRadius, borderRadius ],
       [ 'l', borderRadius * 2 - width, 0 ],
-      [ 'a', borderRadius, borderRadius, 0, 0, 1, -10, -10 ],
+      [ 'a', borderRadius, borderRadius, 0, 0, 1, -borderRadius, -borderRadius ],
       [ 'l', 0, borderRadius * 2 - height ],
-      [ 'a', borderRadius, borderRadius, 0, 0, 1, borderRadius, -10 ],
+      [ 'a', borderRadius, borderRadius, 0, 0, 1, borderRadius, -borderRadius ],
       [ 'z' ]
     ];
 
@@ -19102,7 +19119,8 @@
   var ELEMENT_LABEL_DISTANCE$1 = 10,
       INNER_OUTER_DIST = 3,
       PARTICIPANT_STROKE_WIDTH = 1.5,
-      TASK_BORDER_RADIUS = 10;
+      TASK_BORDER_RADIUS = 10,
+      EXTERNAL_LABEL_BORDER_RADIUS = 4;
 
   var DEFAULT_OPACITY = 0.95,
       FULL_OPACITY = 1,
@@ -21411,6 +21429,11 @@
    * @return {string} path
    */
   BpmnRenderer.prototype.getShapePath = function(shape) {
+
+    if (isLabel(shape)) {
+      return getRoundRectPath(shape, EXTERNAL_LABEL_BORDER_RADIUS);
+    }
+
     if (is(shape, 'bpmn:Event')) {
       return getCirclePath(shape);
     }
@@ -25870,7 +25893,7 @@
    * @param {KeyboardEvent} event
    * @return {boolean}
    */
-  function isCmd(event) {
+  function isCmd$1(event) {
 
     // ensure we don't react to AltGr
     // (mapped to CTRL + ALT)
@@ -25905,28 +25928,28 @@
    * @param {KeyboardEvent} event
    */
   function isCopy(event) {
-    return isCmd(event) && isKey(KEYS_COPY, event);
+    return isCmd$1(event) && isKey(KEYS_COPY, event);
   }
 
   /**
    * @param {KeyboardEvent} event
    */
   function isPaste(event) {
-    return isCmd(event) && isKey(KEYS_PASTE, event);
+    return isCmd$1(event) && isKey(KEYS_PASTE, event);
   }
 
   /**
    * @param {KeyboardEvent} event
    */
   function isUndo(event) {
-    return isCmd(event) && !isShift(event) && isKey(KEYS_UNDO, event);
+    return isCmd$1(event) && !isShift(event) && isKey(KEYS_UNDO, event);
   }
 
   /**
    * @param {KeyboardEvent} event
    */
   function isRedo(event) {
-    return isCmd(event) && (
+    return isCmd$1(event) && (
       isKey(KEYS_REDO, event) || (
         isKey(KEYS_UNDO, event) && isShift(event)
       )
@@ -26130,7 +26153,7 @@
   };
 
   Keyboard.prototype.hasModifier = hasModifier;
-  Keyboard.prototype.isCmd = isCmd;
+  Keyboard.prototype.isCmd = isCmd$1;
   Keyboard.prototype.isShift = isShift;
   Keyboard.prototype.isKey = isKey;
 
@@ -26248,7 +26271,7 @@
 
       // quirk: it has to be triggered by `=` as well to work on international keyboard layout
       // cf: https://github.com/bpmn-io/bpmn-js/issues/1362#issuecomment-722989754
-      if (isKey([ '+', 'Add', '=' ], event) && isCmd(event)) {
+      if (isKey([ '+', 'Add', '=' ], event) && isCmd$1(event)) {
         editorActions.trigger('stepZoom', { value: 1 });
 
         return true;
@@ -26261,7 +26284,7 @@
 
       var event = context.keyEvent;
 
-      if (isKey([ '-', 'Subtract' ], event) && isCmd(event)) {
+      if (isKey([ '-', 'Subtract' ], event) && isCmd$1(event)) {
         editorActions.trigger('stepZoom', { value: -1 });
 
         return true;
@@ -26274,7 +26297,7 @@
 
       var event = context.keyEvent;
 
-      if (isKey('0', event) && isCmd(event)) {
+      if (isKey('0', event) && isCmd$1(event)) {
         editorActions.trigger('zoom', { value: 1 });
 
         return true;
@@ -35976,6 +35999,9 @@
         // create a DataObject every time a DataObjectReference is created
         var dataObject = bpmnFactory.create('bpmn:DataObject');
 
+        // Copy the isCollection property if needed.
+        dataObject.isCollection = shape.businessObject.dataObjectRef?.isCollection || false;
+
         // set the reference to the DataObject
         shape.businessObject.dataObjectRef = dataObject;
       }
@@ -44985,7 +45011,8 @@
     'errorRef',
     'escalationRef',
     'messageRef',
-    'signalRef'
+    'signalRef',
+    'dataObjectRef'
   ];
 
   /**
@@ -59581,7 +59608,7 @@
     ], LOWER_PRIORITY, function(event) {
       var originalEvent = event.originalEvent;
 
-      if (!self.active || (originalEvent && isCmd(originalEvent))) {
+      if (!self.active || (originalEvent && isCmd$1(originalEvent))) {
         return;
       }
 
@@ -62119,6 +62146,487 @@
     labelEditingPreview: [ 'type', LabelEditingPreview ]
   };
 
+  var LOW_PRIORITY$4 = 500;
+
+  var DEFAULT_PRIORITY$2 = 1000;
+
+  /**
+   * @typedef {import('../../model/Types').Element} Element
+   *
+   * @typedef {import('./OutlineProvider').default} OutlineProvider
+   * @typedef {import('../../core/EventBus').default} EventBus
+   * @typedef {import('../../draw/Styles').default} Styles
+   */
+
+  /**
+   * @class
+   *
+   * A plugin that adds an outline to shapes and connections that may be activated and styled
+   * via CSS classes.
+   *
+   * @param {EventBus} eventBus
+   * @param {Styles} styles
+   */
+  function Outline$1(eventBus, styles) {
+
+    this._eventBus = eventBus;
+
+    this.offset = 5;
+
+    var OUTLINE_STYLE = styles.cls('djs-outline', [ 'no-fill' ]);
+
+    var self = this;
+
+    /**
+     * @param {SVGElement} gfx
+     *
+     * @return {SVGElement} outline
+     */
+    function createOutline(gfx) {
+      var outline = create$1('rect');
+
+      attr$2(outline, assign$2({
+        x: 0,
+        y: 0,
+        rx: 4,
+        width: 100,
+        height: 100
+      }, OUTLINE_STYLE));
+
+      return outline;
+    }
+
+    // A low priortity is necessary, because outlines of labels have to be updated
+    // after the label bounds have been updated in the renderer.
+    eventBus.on([ 'shape.added', 'shape.changed' ], LOW_PRIORITY$4, function(event) {
+      var element = event.element,
+          gfx = event.gfx;
+
+      var outline = query$4('.djs-outline', gfx);
+
+      if (!outline) {
+        outline = self.getOutline(element) || createOutline();
+        append(gfx, outline);
+      }
+
+      self.updateShapeOutline(outline, element);
+    });
+
+    eventBus.on([ 'connection.added', 'connection.changed' ], function(event) {
+      var element = event.element,
+          gfx = event.gfx;
+
+      var outline = query$4('.djs-outline', gfx);
+
+      if (!outline) {
+        outline = createOutline();
+        append(gfx, outline);
+      }
+
+      self.updateConnectionOutline(outline, element);
+    });
+  }
+
+
+  /**
+   * Updates the outline of a shape respecting the dimension of the
+   * element and an outline offset.
+   *
+   * @param {SVGElement} outline
+   * @param {Element} element
+   */
+  Outline$1.prototype.updateShapeOutline = function(outline, element) {
+
+    var updated = false;
+    var providers = this._getProviders();
+
+    if (providers.length) {
+      forEach$2(providers, function(provider) {
+        updated = updated || provider.updateOutline(element, outline);
+      });
+    }
+
+    if (!updated) {
+      attr$2(outline, {
+        x: -this.offset,
+        y: -this.offset,
+        width: element.width + this.offset * 2,
+        height: element.height + this.offset * 2
+      });
+    }
+  };
+
+  /**
+   * Updates the outline of a connection respecting the bounding box of
+   * the connection and an outline offset.
+   * Register an outline provider with the given priority.
+   *
+   * @param {SVGElement} outline
+   * @param {Element} connection
+   */
+  Outline$1.prototype.updateConnectionOutline = function(outline, connection) {
+    var bbox = getBBox(connection);
+
+    attr$2(outline, {
+      x: bbox.x - this.offset,
+      y: bbox.y - this.offset,
+      width: bbox.width + this.offset * 2,
+      height: bbox.height + this.offset * 2
+    });
+  };
+
+  /**
+   * Register an outline provider with the given priority.
+   *
+   * @param {number} priority
+   * @param {OutlineProvider} provider
+   */
+  Outline$1.prototype.registerProvider = function(priority, provider) {
+    if (!provider) {
+      provider = priority;
+      priority = DEFAULT_PRIORITY$2;
+    }
+
+    this._eventBus.on('outline.getProviders', priority, function(event) {
+      event.providers.push(provider);
+    });
+  };
+
+  /**
+   * Returns the registered outline providers.
+   *
+   * @returns {OutlineProvider[]}
+   */
+  Outline$1.prototype._getProviders = function() {
+    var event = this._eventBus.createEvent({
+      type: 'outline.getProviders',
+      providers: []
+    });
+
+    this._eventBus.fire(event);
+
+    return event.providers;
+  };
+
+  /**
+   * Returns the outline for an element.
+   *
+   * @param {Element} element
+   */
+  Outline$1.prototype.getOutline = function(element) {
+    var outline;
+    var providers = this._getProviders();
+
+    forEach$2(providers, function(provider) {
+
+      if (!isFunction(provider.getOutline)) {
+        return;
+      }
+
+      outline = outline || provider.getOutline(element);
+    });
+
+    return outline;
+  };
+
+  Outline$1.$inject = [ 'eventBus', 'styles', 'elementRegistry' ];
+
+  var SELECTION_OUTLINE_PADDING = 6;
+
+  /**
+   * @typedef {import('../../model/Types').Element} Element
+   *
+   * @typedef {import('../../core/EventBus').default} EventBus
+   * @typedef {import('../selection/Selection').default} Selection
+   * @typedef {import('../../core/Canvas').default} Canvas
+   */
+
+  /**
+   * @class
+   *
+   * A plugin that adds an outline to shapes and connections that may be activated and styled
+   * via CSS classes.
+   *
+   * @param {EventBus} eventBus
+   * @param {Canvas} canvas
+   * @param {Selection} selection
+   */
+  function MultiSelectionOutline(eventBus, canvas, selection) {
+    this._canvas = canvas;
+
+    var self = this;
+
+    eventBus.on('element.changed', function(event) {
+      if (selection.isSelected(event.element)) {
+        self._updateMultiSelectionOutline(selection.get());
+      }
+    });
+
+    eventBus.on('selection.changed', function(event) {
+      var newSelection = event.newSelection;
+
+      self._updateMultiSelectionOutline(newSelection);
+    });
+  }
+
+
+
+  MultiSelectionOutline.prototype._updateMultiSelectionOutline = function(selection) {
+    var layer = this._canvas.getLayer('selectionOutline');
+
+    clear$1(layer);
+
+    var enabled = selection.length > 1;
+
+    var container = this._canvas.getContainer();
+
+    classes$2(container)[enabled ? 'add' : 'remove']('djs-multi-select');
+
+    if (!enabled) {
+      return;
+    }
+
+    var bBox = addSelectionOutlinePadding(getBBox(selection));
+
+    var rect = create$1('rect');
+
+    attr$2(rect, assign$2({
+      rx: 3
+    }, bBox));
+
+    classes$2(rect).add('djs-selection-outline');
+
+    append(layer, rect);
+  };
+
+
+  MultiSelectionOutline.$inject = [ 'eventBus', 'canvas', 'selection' ];
+
+  // helpers //////////
+
+  function addSelectionOutlinePadding(bBox) {
+    return {
+      x: bBox.x - SELECTION_OUTLINE_PADDING,
+      y: bBox.y - SELECTION_OUTLINE_PADDING,
+      width: bBox.width + SELECTION_OUTLINE_PADDING * 2,
+      height: bBox.height + SELECTION_OUTLINE_PADDING * 2
+    };
+  }
+
+  /**
+   * @type { import('didi').ModuleDeclaration }
+   */
+  var Outline = {
+    __depends__: [
+      SelectionModule
+    ],
+    __init__: [ 'outline', 'multiSelectionOutline' ],
+    outline: [ 'type', Outline$1 ],
+    multiSelectionOutline: [ 'type', MultiSelectionOutline ]
+  };
+
+  /**
+   * @typedef {import('diagram-js/lib/core/EventBus').default} EventBus
+   * @typedef {import('diagram-js/lib/core/Canvas').default} Canvas
+   * @typedef {import('diagram-js/lib/core/GraphicsFactory').default} GraphicsFactory
+   * @typedef {import('../outline/OutlineProvider').default} Outline
+   * @typedef {import('diagram-js/lib/features/selection').default} Selection
+   *
+   * @typedef {import('diagram-js/lib/model/Types').Element} Element
+   */
+
+  const ALLOWED_ELEMENTS = [ 'bpmn:Event', 'bpmn:SequenceFlow', 'bpmn:Gateway' ];
+
+  const LINE_STYLE = {
+    class: 'bjs-label-link',
+    stroke: 'var(--element-selected-outline-secondary-stroke-color)',
+    strokeDasharray: '5, 5',
+  };
+
+  const DISTANCE_THRESHOLD = 15;
+  const PATH_OFFSET = 2;
+
+  /**
+   * Render a line between an external label and its target element,
+   * when either is selected.
+   *
+   * @param {EventBus} eventBus
+   * @param {Canvas} canvas
+   * @param {GraphicsFactory} graphicsFactory
+   * @param {Outline} outline
+   */
+  function LabelLink$1(eventBus, canvas, graphicsFactory, outline, selection) {
+
+    const layer = canvas.getLayer('overlays');
+
+    eventBus.on([ 'selection.changed', 'shape.changed' ], function() {
+      cleanUp();
+    });
+
+    eventBus.on('selection.changed', function({ newSelection }) {
+
+      const allowedElements = newSelection.filter(element => isAny(element, ALLOWED_ELEMENTS));
+
+      if (allowedElements.length === 1) {
+        const element = allowedElements[0];
+        if (isLabel(element)) {
+          createLink(element, element.labelTarget, newSelection);
+        } else if (element.labels?.length) {
+          createLink(element.labels[0], element, newSelection);
+        }
+      }
+
+      // Only allowed when both label and its target are selected
+      if (allowedElements.length === 2) {
+        const label = allowedElements.find(isLabel);
+        const target = allowedElements.find(el => el.labels?.includes(label));
+        if (label && target) {
+          createLink(label, target, newSelection);
+        }
+      }
+    });
+
+    eventBus.on('shape.changed', function({ element }) {
+
+      if (!isAny(element, ALLOWED_ELEMENTS) || !isElementSelected(element)) {
+        return;
+      }
+
+      if (isLabel(element)) {
+        createLink(element, element.labelTarget, selection.get());
+      } else if (element.labels?.length) {
+        createLink(element.labels[0], element, selection.get());
+      }
+    });
+
+    /**
+     * Render a line between an external label and its target.
+     *
+     * @param {Element} label
+     * @param {Element} target
+     * @param {Element[]} selection
+     */
+    function createLink(label, target, selection = []) {
+
+      // Create an auxiliary line between label and target mid points
+      const line = createLine(
+        [ getMid(target), getMid(label) ],
+        LINE_STYLE
+      );
+      const linePath = line.getAttribute('d');
+
+      // Calculate the intersection point between line and label
+      const labelSelected = selection.includes(label);
+      const labelPath = labelSelected ? getElementOutlinePath(label) : getElementPath(label);
+      const labelInter = getElementLineIntersection(labelPath, linePath);
+
+      // Label on top of the target
+      if (!labelInter) {
+        return;
+      }
+
+      // Calculate the intersection point between line and label
+      // If the target is a sequence flow, there is no intersection,
+      // so we link to the middle of it.
+      const targetSelected = selection.includes(target);
+      const targetPath = targetSelected ? getElementOutlinePath(target) : getElementPath(target);
+      const targetInter = getElementLineIntersection(targetPath, linePath) || getMid(target);
+
+      // Do not draw a link if the points are too close
+      const distance = getDistancePointPoint(targetInter, labelInter);
+      if (distance < DISTANCE_THRESHOLD) {
+        return;
+      }
+
+      // Connect the actual closest points
+      updateLine(line, [ targetInter, labelInter ]);
+      append(layer, line);
+    }
+
+    /**
+     * Remove all existing label links.
+     */
+    function cleanUp() {
+      all$2(`.${LINE_STYLE.class}`, layer).forEach(remove$4);
+    }
+
+    /**
+     * Get element's slightly expanded outline path.
+     *
+     * @param {Element} element
+     * @returns {string} svg path
+     */
+    function getElementOutlinePath(element) {
+      const outlineShape = outline.getOutline(element);
+      const outlineOffset = outline.offset;
+
+      if (!outlineShape) {
+        return getElementPath(element);
+      }
+
+      if (outlineShape.x) {
+        const shape = {
+          x: element.x + parseSvgNumAttr(outlineShape, 'x') - PATH_OFFSET,
+          y: element.y + parseSvgNumAttr(outlineShape, 'y') - PATH_OFFSET,
+          width: parseSvgNumAttr(outlineShape, 'width') + PATH_OFFSET * 2,
+          height: parseSvgNumAttr(outlineShape, 'height') + PATH_OFFSET * 2
+        };
+
+        return getRoundRectPath(shape, parseSvgNumAttr(outlineShape, 'rx'));
+      }
+
+      if (outlineShape.cx) {
+        const shape = {
+          x: element.x - outlineOffset,
+          y: element.y - outlineOffset,
+          width: parseSvgNumAttr(outlineShape, 'r') * 2,
+          height: parseSvgNumAttr(outlineShape, 'r') * 2,
+        };
+
+        return getCirclePath(shape);
+      }
+    }
+
+    function getElementPath(element) {
+      return graphicsFactory.getShapePath(element);
+    }
+
+    function isElementSelected(element) {
+      return selection.get().includes(element);
+    }
+  }
+
+  LabelLink$1.$inject = [
+    'eventBus',
+    'canvas',
+    'graphicsFactory',
+    'outline',
+    'selection'
+  ];
+
+  /**
+   * Get numeric attribute from SVG element
+   * or 0 if not present.
+   *
+   * @param {SVGElement} node
+   * @param {string} attr
+   * @returns {number}
+   */
+  function parseSvgNumAttr(node, attr) {
+    return parseFloat(attr$2(node, attr) || 0);
+  }
+
+  var LabelLink = {
+    __depends__: [
+      SelectionModule,
+      Outline
+    ],
+    __init__: [
+      'labelLink'
+    ],
+    labelLink: [ 'type', LabelLink$1 ]
+  };
+
   /**
    * @typedef {import('../../core/Canvas').default} Canvas
    * @typedef {import('../../core/EventBus').default} EventBus
@@ -62566,285 +63074,6 @@
     modelingFeedback: [ 'type', ModelingFeedback ]
   };
 
-  var LOW_PRIORITY$4 = 500;
-
-  var DEFAULT_PRIORITY$2 = 1000;
-
-  /**
-   * @typedef {import('../../model/Types').Element} Element
-   *
-   * @typedef {import('./OutlineProvider').default} OutlineProvider
-   * @typedef {import('../../core/EventBus').default} EventBus
-   * @typedef {import('../../draw/Styles').default} Styles
-   */
-
-  /**
-   * @class
-   *
-   * A plugin that adds an outline to shapes and connections that may be activated and styled
-   * via CSS classes.
-   *
-   * @param {EventBus} eventBus
-   * @param {Styles} styles
-   */
-  function Outline(eventBus, styles) {
-
-    this._eventBus = eventBus;
-
-    this.offset = 5;
-
-    var OUTLINE_STYLE = styles.cls('djs-outline', [ 'no-fill' ]);
-
-    var self = this;
-
-    /**
-     * @param {SVGElement} gfx
-     *
-     * @return {SVGElement} outline
-     */
-    function createOutline(gfx) {
-      var outline = create$1('rect');
-
-      attr$2(outline, assign$2({
-        x: 0,
-        y: 0,
-        rx: 4,
-        width: 100,
-        height: 100
-      }, OUTLINE_STYLE));
-
-      return outline;
-    }
-
-    // A low priortity is necessary, because outlines of labels have to be updated
-    // after the label bounds have been updated in the renderer.
-    eventBus.on([ 'shape.added', 'shape.changed' ], LOW_PRIORITY$4, function(event) {
-      var element = event.element,
-          gfx = event.gfx;
-
-      var outline = query$4('.djs-outline', gfx);
-
-      if (!outline) {
-        outline = self.getOutline(element) || createOutline();
-        append(gfx, outline);
-      }
-
-      self.updateShapeOutline(outline, element);
-    });
-
-    eventBus.on([ 'connection.added', 'connection.changed' ], function(event) {
-      var element = event.element,
-          gfx = event.gfx;
-
-      var outline = query$4('.djs-outline', gfx);
-
-      if (!outline) {
-        outline = createOutline();
-        append(gfx, outline);
-      }
-
-      self.updateConnectionOutline(outline, element);
-    });
-  }
-
-
-  /**
-   * Updates the outline of a shape respecting the dimension of the
-   * element and an outline offset.
-   *
-   * @param {SVGElement} outline
-   * @param {Element} element
-   */
-  Outline.prototype.updateShapeOutline = function(outline, element) {
-
-    var updated = false;
-    var providers = this._getProviders();
-
-    if (providers.length) {
-      forEach$2(providers, function(provider) {
-        updated = updated || provider.updateOutline(element, outline);
-      });
-    }
-
-    if (!updated) {
-      attr$2(outline, {
-        x: -this.offset,
-        y: -this.offset,
-        width: element.width + this.offset * 2,
-        height: element.height + this.offset * 2
-      });
-    }
-  };
-
-  /**
-   * Updates the outline of a connection respecting the bounding box of
-   * the connection and an outline offset.
-   * Register an outline provider with the given priority.
-   *
-   * @param {SVGElement} outline
-   * @param {Element} connection
-   */
-  Outline.prototype.updateConnectionOutline = function(outline, connection) {
-    var bbox = getBBox(connection);
-
-    attr$2(outline, {
-      x: bbox.x - this.offset,
-      y: bbox.y - this.offset,
-      width: bbox.width + this.offset * 2,
-      height: bbox.height + this.offset * 2
-    });
-  };
-
-  /**
-   * Register an outline provider with the given priority.
-   *
-   * @param {number} priority
-   * @param {OutlineProvider} provider
-   */
-  Outline.prototype.registerProvider = function(priority, provider) {
-    if (!provider) {
-      provider = priority;
-      priority = DEFAULT_PRIORITY$2;
-    }
-
-    this._eventBus.on('outline.getProviders', priority, function(event) {
-      event.providers.push(provider);
-    });
-  };
-
-  /**
-   * Returns the registered outline providers.
-   *
-   * @returns {OutlineProvider[]}
-   */
-  Outline.prototype._getProviders = function() {
-    var event = this._eventBus.createEvent({
-      type: 'outline.getProviders',
-      providers: []
-    });
-
-    this._eventBus.fire(event);
-
-    return event.providers;
-  };
-
-  /**
-   * Returns the outline for an element.
-   *
-   * @param {Element} element
-   */
-  Outline.prototype.getOutline = function(element) {
-    var outline;
-    var providers = this._getProviders();
-
-    forEach$2(providers, function(provider) {
-
-      if (!isFunction(provider.getOutline)) {
-        return;
-      }
-
-      outline = outline || provider.getOutline(element);
-    });
-
-    return outline;
-  };
-
-  Outline.$inject = [ 'eventBus', 'styles', 'elementRegistry' ];
-
-  var SELECTION_OUTLINE_PADDING = 6;
-
-  /**
-   * @typedef {import('../../model/Types').Element} Element
-   *
-   * @typedef {import('../../core/EventBus').default} EventBus
-   * @typedef {import('../selection/Selection').default} Selection
-   * @typedef {import('../../core/Canvas').default} Canvas
-   */
-
-  /**
-   * @class
-   *
-   * A plugin that adds an outline to shapes and connections that may be activated and styled
-   * via CSS classes.
-   *
-   * @param {EventBus} eventBus
-   * @param {Canvas} canvas
-   * @param {Selection} selection
-   */
-  function MultiSelectionOutline(eventBus, canvas, selection) {
-    this._canvas = canvas;
-
-    var self = this;
-
-    eventBus.on('element.changed', function(event) {
-      if (selection.isSelected(event.element)) {
-        self._updateMultiSelectionOutline(selection.get());
-      }
-    });
-
-    eventBus.on('selection.changed', function(event) {
-      var newSelection = event.newSelection;
-
-      self._updateMultiSelectionOutline(newSelection);
-    });
-  }
-
-
-
-  MultiSelectionOutline.prototype._updateMultiSelectionOutline = function(selection) {
-    var layer = this._canvas.getLayer('selectionOutline');
-
-    clear$1(layer);
-
-    var enabled = selection.length > 1;
-
-    var container = this._canvas.getContainer();
-
-    classes$2(container)[enabled ? 'add' : 'remove']('djs-multi-select');
-
-    if (!enabled) {
-      return;
-    }
-
-    var bBox = addSelectionOutlinePadding(getBBox(selection));
-
-    var rect = create$1('rect');
-
-    attr$2(rect, assign$2({
-      rx: 3
-    }, bBox));
-
-    classes$2(rect).add('djs-selection-outline');
-
-    append(layer, rect);
-  };
-
-
-  MultiSelectionOutline.$inject = [ 'eventBus', 'canvas', 'selection' ];
-
-  // helpers //////////
-
-  function addSelectionOutlinePadding(bBox) {
-    return {
-      x: bBox.x - SELECTION_OUTLINE_PADDING,
-      y: bBox.y - SELECTION_OUTLINE_PADDING,
-      width: bBox.width + SELECTION_OUTLINE_PADDING * 2,
-      height: bBox.height + SELECTION_OUTLINE_PADDING * 2
-    };
-  }
-
-  /**
-   * @type { import('didi').ModuleDeclaration }
-   */
-  var Ouline = {
-    __depends__: [
-      SelectionModule
-    ],
-    __init__: [ 'outline', 'multiSelectionOutline' ],
-    outline: [ 'type', Outline ],
-    multiSelectionOutline: [ 'type', MultiSelectionOutline ]
-  };
-
   /**
    * @typedef {import('../../core/Types').ElementLike} Element
    * @typedef {import('../../core/Types').ShapeLike} Shape
@@ -63347,7 +63576,7 @@
     __depends__: [
       InteractionEventsModule$1,
       SelectionModule,
-      Ouline,
+      Outline,
       RulesModule$1,
       DraggingModule,
       PreviewSupportModule
@@ -64923,7 +65152,7 @@
           target = context.target;
 
       // do NOT snap on CMD
-      if (event.originalEvent && isCmd(event.originalEvent)) {
+      if (event.originalEvent && isCmd$1(event.originalEvent)) {
         return;
       }
 
@@ -65362,7 +65591,7 @@
           snapContext = context.snapContext,
           target = context.target;
 
-      if (event.originalEvent && isCmd(event.originalEvent)) {
+      if (event.originalEvent && isCmd$1(event.originalEvent)) {
         return;
       }
 
@@ -65811,7 +66040,7 @@
           direction = context.direction,
           snapContext = context.snapContext;
 
-      if (event.originalEvent && isCmd(event.originalEvent)) {
+      if (event.originalEvent && isCmd$1(event.originalEvent)) {
         return;
       }
 
@@ -66835,6 +67064,20 @@
 
     var outline;
 
+    if (isExternalLabel(element)) {
+      outline = create$1('rect');
+
+      attr$2(outline, assign$2({
+        x: -5,
+        y: -5,
+        rx: 4,
+        width: element.width + DEFAULT_OFFSET * 2,
+        height: element.height + DEFAULT_OFFSET * 2
+      }, OUTLINE_STYLE));
+
+      return outline;
+    }
+
     if (isLabel(element)) {
       return;
     }
@@ -66962,7 +67205,7 @@
 
   var OutlineModule = {
     __depends__: [
-      Ouline
+      Outline
     ],
     __init__: [ 'outlineProvider' ],
     outlineProvider: [ 'type', OutlineProvider ]
@@ -67113,6 +67356,7 @@
     KeyboardModule,
     KeyboardMoveSelectionModule,
     LabelEditingModule,
+    LabelLink,
     ModelingModule,
     ModelingFeedbackModule,
     MoveModule,
@@ -103304,22 +103548,30 @@
   var OpenPopupIcon = function OpenPopupIcon(props) {
     return u("svg", {
       ...props,
-      children: [u("path", {
-        fill: "currentColor",
-        d: "M28 4H10a2.006 2.006 0 0 0-2 2v14a2.006 2.006 0 0 0 2 2h18a2.006 2.006 0 0 0 2-2V6a2.006 2.006 0 0 0-2-2Zm0 16H10V6h18Z"
-      }), u("path", {
-        fill: "currentColor",
-        d: "M18 26H4V16h2v-2H4a2.006 2.006 0 0 0-2 2v10a2.006 2.006 0 0 0 2 2h14a2.006 2.006 0 0 0 2-2v-2h-2Z"
-      })]
+      children: u("path", {
+        d: "M6 15v-1H2.7L7 9.7 6.3 9 2 13.3V10H1v5zm4-14v1h3.3L9 6.3l.7.7L14 2.7V6h1V1z"
+      })
     });
   };
   OpenPopupIcon.defaultProps = {
     xmlns: "http://www.w3.org/2000/svg",
-    width: "16",
-    height: "16",
-    viewBox: "0 0 32 32"
+    viewBox: "0 0 16 16"
   };
 
+  /**
+   * @typedef { {
+   *  getElementLabel: (element: object) => string,
+   *  getTypeLabel: (element: object) => string,
+   *  getElementIcon: (element: object) => import('preact').Component,
+   *  getDocumentationRef: (element: object) => string
+   * } } HeaderProvider
+   */
+
+  /**
+   * @param {Object} props
+   * @param {Object} props.element,
+   * @param {HeaderProvider} props.headerProvider
+   */
   function Header(props) {
     const {
       element,
@@ -103347,11 +103599,9 @@
       }), u("div", {
         class: "bio-properties-panel-header-labels",
         children: [u("div", {
-          title: type,
           class: "bio-properties-panel-header-type",
           children: type
         }), label ? u("div", {
-          title: label,
           class: "bio-properties-panel-header-label",
           children: label
         }) : null]
@@ -103444,6 +103694,26 @@
     return getTooltipForId(id, element);
   }
 
+  /**
+   * @typedef {Object} TooltipProps
+   * @property {Object} [parent] - Parent element ref for portal rendering
+   * @property {String} [direction='right'] - Tooltip direction ( 'right', 'top')
+   * @property {String} [position] - Custom CSS position override
+   * @property {Number} [showDelay=250] - Delay in ms before showing tooltip on hover
+   * @property {Number} [hideDelay=250] - Delay in ms before hiding tooltip when mouse leaves, to avoid multiple tooltips from being opened, this should be the same as showDelay
+   * @property {*} [children] - Child elements to render inside the tooltip wrapper
+   */
+
+  /**
+   * Tooltip wrapper that provides context-based tooltip content lookup.
+   * All props are forwarded to the underlying Tooltip component.
+   *
+   * @param {TooltipProps & {
+   *   forId: String,
+   *   value?: String|Object,
+   *   element?: Object
+   * }} props - Shared tooltip props plus wrapper-specific ones
+   */
   function TooltipWrapper(props) {
     const {
       forId,
@@ -103460,35 +103730,77 @@
       forId: `bio-properties-panel-${forId}`
     });
   }
+
+  /**
+   * @param {TooltipProps & {
+   *   forId: String,
+   *   value: String|Object
+   * }} props
+   */
   function Tooltip(props) {
     const {
       forId,
       value,
       parent,
       direction = 'right',
-      position
+      position,
+      showDelay = 250,
+      hideDelay = 250
     } = props;
     const [visible, setVisible] = h(false);
-
-    // Tooltip will be shown after SHOW_DELAY ms from hovering over the source element.
-    const SHOW_DELAY = 200;
-    let timeout = null;
+    const showTimeoutRef = _(null);
+    const hideTimeoutRef = _(null);
     const wrapperRef = _(null);
     const tooltipRef = _(null);
     const show = (_, delay) => {
+      clearTimeout(showTimeoutRef.current);
+      clearTimeout(hideTimeoutRef.current);
       if (visible) return;
       if (delay) {
-        timeout = setTimeout(() => {
+        showTimeoutRef.current = setTimeout(() => {
           setVisible(true);
-        }, SHOW_DELAY);
+        }, showDelay);
       } else {
         setVisible(true);
       }
     };
-    const hide = () => {
-      clearTimeout(timeout);
-      setVisible(false);
+    const handleWrapperMouseEnter = e => {
+      show(e, true);
     };
+    const hide = (delay = false) => {
+      clearTimeout(showTimeoutRef.current);
+      clearTimeout(hideTimeoutRef.current);
+      if (delay) {
+        hideTimeoutRef.current = setTimeout(() => {
+          setVisible(false);
+        }, hideDelay);
+      } else {
+        setVisible(false);
+      }
+    };
+
+    // Cleanup timeouts on unmount
+    p(() => {
+      return () => {
+        clearTimeout(showTimeoutRef.current);
+        clearTimeout(hideTimeoutRef.current);
+      };
+    }, []);
+
+    // Handle click outside to close tooltip for non-focusable elements
+    p(() => {
+      if (!visible) return;
+      const handleClickOutside = e => {
+        // If clicking outside both the wrapper and tooltip, hide it
+        if (wrapperRef.current && !wrapperRef.current.contains(e.target) && tooltipRef.current && !tooltipRef.current.contains(e.target)) {
+          hide(false);
+        }
+      };
+      document.addEventListener('mousedown', handleClickOutside);
+      return () => {
+        document.removeEventListener('mousedown', handleClickOutside);
+      };
+    }, [visible, hide]);
     const handleMouseLeave = ({
       relatedTarget
     }) => {
@@ -103496,23 +103808,32 @@
       if (relatedTarget === wrapperRef.current || relatedTarget === tooltipRef.current || relatedTarget?.parentElement === tooltipRef.current) {
         return;
       }
-      hide();
+      const selection = window.getSelection();
+      if (selection && selection.toString().length > 0) {
+        // Check if selection is within tooltip content
+        const selectionRange = selection.getRangeAt(0);
+        if (tooltipRef.current?.contains(selectionRange.commonAncestorContainer) || tooltipRef.current?.contains(selection.anchorNode) || tooltipRef.current?.contains(selection.focusNode)) {
+          return; // Keep tooltip open during text selection
+        }
+      }
+      hide(true);
+    };
+    const handleTooltipMouseEnter = () => {
+      clearTimeout(hideTimeoutRef.current);
     };
     const handleFocusOut = e => {
       const {
-        target
+        relatedTarget
       } = e;
 
-      // Don't hide the tooltip if the wrapper or the tooltip itself is clicked.
-      const isHovered = target.matches(':hover') || tooltipRef.current?.matches(':hover');
-      if (target === wrapperRef.current && isHovered) {
-        e.stopPropagation();
+      // Don't hide if focus moved to the tooltip or another element within the wrapper
+      if (tooltipRef.current?.contains(relatedTarget) || wrapperRef.current?.contains(relatedTarget)) {
         return;
       }
-      hide();
+      hide(false);
     };
     const hideTooltipViaEscape = e => {
-      e.code === 'Escape' && hide();
+      e.code === 'Escape' && hide(false);
     };
     const renderTooltip = () => {
       return u("div", {
@@ -103523,6 +103844,7 @@
         style: position || getTooltipPosition(wrapperRef.current),
         ref: tooltipRef,
         onClick: e => e.stopPropagation(),
+        onMouseEnter: handleTooltipMouseEnter,
         onMouseLeave: handleMouseLeave,
         children: [u("div", {
           class: "bio-properties-panel-tooltip-content",
@@ -103536,7 +103858,7 @@
       class: "bio-properties-panel-tooltip-wrapper",
       tabIndex: "0",
       ref: wrapperRef,
-      onMouseEnter: e => show(e, true),
+      onMouseEnter: handleWrapperMouseEnter,
       onMouseLeave: handleMouseLeave,
       onFocus: show,
       onBlur: handleFocusOut,
@@ -103818,6 +104140,9 @@
     return visible;
   }
 
+  /**
+   * @param {import('../PropertiesPanel').GroupDefinition} props
+   */
   function Group(props) {
     const {
       element,
@@ -103872,8 +104197,6 @@
         class: classnames('bio-properties-panel-group-header', edited ? '' : 'empty', open ? 'open' : '', sticky && open ? 'sticky' : ''),
         onClick: toggleOpen,
         children: [u("div", {
-          title: props.tooltip ? null : label,
-          "data-title": label,
           class: "bio-properties-panel-group-header-title",
           children: u(TooltipWrapper, {
             value: props.tooltip,
@@ -104226,6 +104549,12 @@
     }, deps);
   }
 
+  /**
+   * @param {Object} props
+   * @param {Object} props.element
+   * @param {String} props.forId - id of the entry the description is used for
+   * @param {String} props.value
+   */
   function Description(props) {
     const {
       element,
@@ -104357,6 +104686,15 @@
     return `bio-properties-panel-${id}`;
   }
 
+  /**
+   * Button to open popups.
+   *
+   * @param {Object} props
+   * @param {Function} props.onClick - Callback to trigger when the button is clicked.
+   * @param {string} [props.title] - Tooltip text for the button.
+   * @param {boolean} [props.disabled] - Whether the button is disabled.
+   * @param {string} [props.className] - Additional class names for the button.
+   */
   function OpenPopupButton({
     onClick,
     title = 'Open pop-up editor'
@@ -104502,6 +104840,7 @@
       enableGutters,
       value,
       onInput,
+      onKeyDown: onKeyDownProp = noop$4,
       onFeelToggle = noop$4,
       onLint = noop$4,
       onOpenPopup = noop$4,
@@ -104534,6 +104873,8 @@
        * - AND the cursor is at the beginning of the input
        */
       const onKeyDown = e => {
+        // Call parent onKeyDown handler first
+        onKeyDownProp(e);
         if (e.key !== 'Backspace' || !editor) {
           return;
         }
@@ -104606,6 +104947,22 @@
     });
   });
 
+  /**
+   * @param {KeyboardEvent} event
+   * @return {boolean}
+   */
+  function isCmd(event) {
+    // ensure we don't react to AltGr
+    // (mapped to CTRL + ALT)
+    if (event.altKey) {
+      return false;
+    }
+    return event.ctrlKey || event.metaKey;
+  }
+  function isCmdWithChar(event) {
+    return isCmd(event) && event.key.length === 1 && /^[a-zA-Z]$/.test(event.key);
+  }
+
   function ToggleSwitch(props) {
     const {
       id,
@@ -104753,6 +105110,7 @@
       id,
       disabled,
       onInput,
+      onKeyDown,
       value,
       onFocus,
       onBlur,
@@ -104788,6 +105146,7 @@
       class: "bio-properties-panel-input",
       onInput: e => onInput(e.target.value),
       onFocus: onFocus,
+      onKeyDown: onKeyDown,
       onBlur: onBlur,
       placeholder: placeholder,
       value: value || ''
@@ -104960,6 +105319,24 @@
     return `bio-properties-panel-${id}`;
   }
 
+  /**
+   * @typedef { { value: string, label: string, disabled: boolean, children: { value: string, label: string, disabled: boolean } } } Option
+   */
+
+  /**
+   * Provides basic select input.
+   *
+   * @param {object} props
+   * @param {string} props.id
+   * @param {string[]} props.path
+   * @param {string} props.label
+   * @param {Function} props.onChange
+   * @param {Function} props.onFocus
+   * @param {Function} props.onBlur
+   * @param {Array<Option>} [props.options]
+   * @param {string} props.value
+   * @param {boolean} [props.disabled]
+   */
   function Select(props) {
     const {
       id,
@@ -105126,12 +105503,13 @@
       id,
       label,
       debounce,
-      onInput,
+      onInput: commitValue,
       value = '',
       disabled,
       monospace,
       onFocus,
       onBlur,
+      onPaste,
       autoResize = true,
       placeholder,
       rows = autoResize ? 1 : 2,
@@ -105139,16 +105517,16 @@
     } = props;
     const [localValue, setLocalValue] = h(value);
     const ref = useShowEntryEvent(id);
+    const onInput = T$1(newValue => {
+      const newModelValue = newValue === '' ? undefined : newValue;
+      commitValue(newModelValue);
+    }, [commitValue]);
     const visible = useElementVisible(ref.current);
 
     /**
      * @type { import('min-dash').DebouncedFunction }
      */
-    const handleInputCallback = useDebounce(onInput, debounce);
-    const handleInput = newValue => {
-      const newModelValue = newValue === '' ? undefined : newValue;
-      handleInputCallback(newModelValue);
-    };
+    const handleInput = useDebounce(onInput, debounce);
     const handleLocalInput = e => {
       autoResize && resizeToContents(e.target);
       if (e.target.value === localValue) {
@@ -105161,11 +105539,40 @@
       const trimmedValue = e.target.value.trim();
 
       // trim and commit on blur
+      handleInput.cancel?.();
       onInput(trimmedValue);
+      setLocalValue(trimmedValue);
       if (onBlur) {
         onBlur(e);
       }
     };
+    const handleOnPaste = e => {
+      const input = e.target;
+      const isFieldEmpty = !input.value;
+      const isAllSelected = input.selectionStart === 0 && input.selectionEnd === input.value.length;
+
+      // Trim and handle paste if field is empty or all content is selected
+      if (isFieldEmpty || isAllSelected) {
+        const trimmedValue = e.clipboardData.getData('text').trim();
+        setLocalValue(trimmedValue);
+        handleInput(trimmedValue);
+        if (onPaste) {
+          onPaste(e);
+        }
+        e.preventDefault();
+        return;
+      }
+
+      // Allow default paste behavior for normal text editing
+      if (onPaste) {
+        onPaste(e);
+      }
+    };
+    const handleOnKeyDown = e => {
+      if (isCmdWithChar(e)) {
+        handleInput.flush();
+      }
+    };
     y(() => {
       autoResize && resizeToContents(ref.current);
     }, []);
@@ -105197,7 +105604,9 @@
         class: classnames('bio-properties-panel-input', monospace ? 'bio-properties-panel-input-monospace' : '', autoResize ? 'auto-resize' : ''),
         onInput: handleLocalInput,
         onFocus: onFocus,
+        onKeyDown: handleOnKeyDown,
         onBlur: handleOnBlur,
+        onPaste: handleOnPaste,
         placeholder: placeholder,
         rows: rows,
         value: localValue,
@@ -105218,6 +105627,7 @@
    * @param {Function} props.setValue
    * @param {Function} props.onFocus
    * @param {Function} props.onBlur
+   * @param {Function} props.onPaste
    * @param {number} props.rows
    * @param {boolean} props.monospace
    * @param {Function} [props.validate]
@@ -105238,6 +105648,7 @@
       validate,
       onFocus,
       onBlur,
+      onPaste,
       placeholder,
       autoResize,
       tooltip
@@ -105273,6 +105684,7 @@
         onInput: onInput,
         onFocus: onFocus,
         onBlur: onBlur,
+        onPaste: onPaste,
         rows: rows,
         debounce: debounce,
         monospace: monospace,
@@ -105307,32 +105719,57 @@
       disabled = false,
       id,
       label,
-      onInput,
+      onInput: commitValue,
       onFocus,
       onBlur,
+      onPaste,
       placeholder,
       value = '',
       tooltip
     } = props;
     const [localValue, setLocalValue] = h(value || '');
     const ref = useShowEntryEvent(id);
+    const onInput = T$1(newValue => {
+      const newModelValue = newValue === '' ? undefined : newValue;
+      commitValue(newModelValue);
+    }, [commitValue]);
 
     /**
      * @type { import('min-dash').DebouncedFunction }
      */
-    const handleInputCallback = useDebounce(onInput, debounce);
+    const handleInput = useDebounce(onInput, debounce);
     const handleOnBlur = e => {
       const trimmedValue = e.target.value.trim();
 
       // trim and commit on blur
+      handleInput.cancel?.();
       onInput(trimmedValue);
+      setLocalValue(trimmedValue);
       if (onBlur) {
         onBlur(e);
       }
     };
-    const handleInput = newValue => {
-      const newModelValue = newValue === '' ? undefined : newValue;
-      handleInputCallback(newModelValue);
+    const handleOnPaste = e => {
+      const input = e.target;
+      const isFieldEmpty = !input.value;
+      const isAllSelected = input.selectionStart === 0 && input.selectionEnd === input.value.length;
+
+      // Trim and handle paste if field is empty or all content is selected (overwrite)
+      if (isFieldEmpty || isAllSelected) {
+        const trimmedValue = e.clipboardData.getData('text').trim();
+        setLocalValue(trimmedValue);
+        handleInput(trimmedValue);
+        if (onPaste) {
+          onPaste(e);
+        }
+        e.preventDefault();
+        return;
+      }
+
+      // Allow default paste behavior for normal text editing
+      if (onPaste) {
+        onPaste(e);
+      }
     };
     const handleLocalInput = e => {
       if (e.target.value === localValue) {
@@ -105347,6 +105784,11 @@
       }
       setLocalValue(value);
     }, [value]);
+    const handleOnKeyDown = e => {
+      if (isCmdWithChar(e)) {
+        handleInput.flush();
+      }
+    };
     return u("div", {
       class: "bio-properties-panel-textfield",
       children: [u("label", {
@@ -105369,7 +105811,9 @@
         class: "bio-properties-panel-input",
         onInput: handleLocalInput,
         onFocus: onFocus,
+        onKeyDown: handleOnKeyDown,
         onBlur: handleOnBlur,
+        onPaste: handleOnPaste,
         placeholder: placeholder,
         value: localValue
       })]
@@ -105404,6 +105848,7 @@
       validate,
       onFocus,
       onBlur,
+      onPaste,
       placeholder,
       tooltip
     } = props;
@@ -105439,6 +105884,7 @@
         onInput: onInput,
         onFocus: onFocus,
         onBlur: onBlur,
+        onPaste: onPaste,
         placeholder: placeholder,
         value: value,
         tooltip: tooltip,
@@ -105471,7 +105917,7 @@
    * - If `debounceDelay` is `false`, the function executes immediately without debouncing.
    * - If a number is provided, the function execution is delayed by the given time in milliseconds.
    *
-   * @param { Boolean | Number } [debounceDelay=300]
+   * @param { Boolean | Number } [debounceDelay=600]
    *
    * @example
    * const debounce = debounceInput();
@@ -105791,6 +106237,24 @@
     event.stopPropagation();
   }
 
+  /**
+   * @typedef {Object} FeelPopupProps
+   * @property {string} entryId
+   * @property {Function} onInput
+   * @property {Function} onClose
+   * @property {string} title
+   * @property {'feel'|'feelers'} type
+   * @property {string} value
+   * @property {Array} [links]
+   * @property {Array|Object} [variables]
+   * @property {Object} [position]
+   * @property {string} [hostLanguage]
+   * @property {boolean} [singleLine]
+   * @property {HTMLElement} [sourceElement]
+   * @property {HTMLElement|string} [tooltipContainer]
+   * @property {Object} [eventBus]
+   */
+
   const FEEL_POPUP_WIDTH = 700;
   const FEEL_POPUP_HEIGHT = 250;
 
@@ -107555,16 +108019,16 @@
     parserDialect: 'camunda'
   };
 
-  /**
-   * @param {Object} props
-   * @param {djs.model.Base|Array<djs.model.Base>} [props.element]
-   * @param {Injector} props.injector
-   * @param { (djs.model.Base) => Array<PropertiesProvider> } props.getProviders
-   * @param {Object} props.layoutConfig
-   * @param {Object} props.descriptionConfig
-   * @param {Object} props.tooltipConfig
-   * @param {HTMLElement} props.feelPopupContainer
-   * @param {Function} props.getFeelPopupLinks
+  /**
+   * @param {Object} props
+   * @param {djs.model.Base|Array<djs.model.Base>} [props.element]
+   * @param {Injector} props.injector
+   * @param { (djs.model.Base) => Array<PropertiesProvider> } props.getProviders
+   * @param {Object} props.layoutConfig
+   * @param {Object} props.descriptionConfig
+   * @param {Object} props.tooltipConfig
+   * @param {HTMLElement} props.feelPopupContainer
+   * @param {Function} props.getFeelPopupLinks
    */
   function BpmnPropertiesPanel(props) {
     const {
@@ -107586,8 +108050,8 @@
     });
     const selectedElement = state.selectedElement;
 
-    /**
-     * @param {djs.model.Base | Array<djs.model.Base>} element
+    /**
+     * @param {djs.model.Base | Array<djs.model.Base>} element
      */
     const _update = element => {
       if (!element) {
@@ -107775,10 +108239,10 @@
 
   const DEFAULT_PRIORITY = 1000;
 
-  /**
-   * @typedef { import('@bpmn-io/properties-panel').GroupDefinition } GroupDefinition
-   * @typedef { import('@bpmn-io/properties-panel').ListGroupDefinition } ListGroupDefinition
-   * @typedef { { getGroups: (ModdleElement) => (Array{GroupDefinition|ListGroupDefinition}) => Array{GroupDefinition|ListGroupDefinition}) } PropertiesProvider
+  /**
+   * @typedef { import('@bpmn-io/properties-panel').GroupDefinition } GroupDefinition
+   * @typedef { import('@bpmn-io/properties-panel').ListGroupDefinition } ListGroupDefinition
+   * @typedef { { getGroups: (ModdleElement) => (Array{GroupDefinition|ListGroupDefinition}) => Array{GroupDefinition|ListGroupDefinition}) } PropertiesProvider
    */
 
   class BpmnPropertiesPanelRenderer {
@@ -107817,10 +108281,10 @@
       });
     }
 
-    /**
-     * Attach the properties panel to a parent node.
-     *
-     * @param {HTMLElement} container
+    /**
+     * Attach the properties panel to a parent node.
+     *
+     * @param {HTMLElement} container
      */
     attachTo(container) {
       if (!container) {
@@ -107845,8 +108309,8 @@
       this._eventBus.fire('propertiesPanel.attach');
     }
 
-    /**
-     * Detach the properties panel from its parent node.
+    /**
+     * Detach the properties panel from its parent node.
      */
     detach() {
       const parentNode = this._container.parentNode;
@@ -107856,11 +108320,11 @@
       }
     }
 
-    /**
-     * Register a new properties provider to the properties panel.
-     *
-     * @param {Number} [priority]
-     * @param {PropertiesProvider} provider
+    /**
+     * Register a new properties provider to the properties panel.
+     *
+     * @param {Number} [priority]
+     * @param {PropertiesProvider} provider
      */
     registerProvider(priority, provider) {
       if (!provider) {
@@ -107877,9 +108341,9 @@
       this._eventBus.fire('propertiesPanel.providersChanged');
     }
 
-    /**
-     * Updates the layout of the properties panel.
-     * @param {Object} layout
+    /**
+     * Updates the layout of the properties panel.
+     * @param {Object} layout
      */
     setLayout(layout) {
       this._eventBus.fire('propertiesPanel.setLayout', {
@@ -107929,12 +108393,12 @@
     return element && element.isImplicit;
   }
 
-  /**
-   * Setup keyboard bindings (undo, redo) on the given container.
-   *
-   * @param {Element} container
-   * @param {EventBus} eventBus
-   * @param {CommandStack} commandStack
+  /**
+   * Setup keyboard bindings (undo, redo) on the given container.
+   *
+   * @param {Element} container
+   * @param {EventBus} eventBus
+   * @param {CommandStack} commandStack
    */
   function setupKeyboard(container, eventBus, commandStack) {
     function cancel(event) {
@@ -107959,14 +108423,14 @@
     });
   }
 
-  /**
-   * A handler that combines and executes multiple commands.
-   *
-   * All updates are bundled on the command stack and executed in one step.
-   * This also makes it possible to revert the changes in one step.
-   *
-   * Example use case: remove the camunda:formKey attribute and in addition
-   * add all form fields needed for the camunda:formData property.
+  /**
+   * A handler that combines and executes multiple commands.
+   *
+   * All updates are bundled on the command stack and executed in one step.
+   * This also makes it possible to revert the changes in one step.
+   *
+   * Example use case: remove the camunda:formKey attribute and in addition
+   * add all form fields needed for the camunda:formData property.
    */
   class MultiCommandHandler {
     constructor(commandStack) {
@@ -108002,15 +108466,15 @@
     propertiesPanel: ['type', BpmnPropertiesPanelRenderer]
   };
 
-  /**
-   * Create a new element and (optionally) set its parent.
-   *
-   * @param {string} type
-   * @param {Object} properties
-   * @param {import('bpmn-js/lib/model/Types').ModdleElement} parent
-   * @param {import('bpmn-js/lib/features/modeling/BpmnFactory').default} bpmnFactory
-   *
-   * @returns {import('bpmn-js/lib/model/Types').ModdleElement}
+  /**
+   * Create a new element and (optionally) set its parent.
+   *
+   * @param {string} type
+   * @param {Object} properties
+   * @param {import('bpmn-js/lib/model/Types').ModdleElement} parent
+   * @param {import('bpmn-js/lib/features/modeling/BpmnFactory').default} bpmnFactory
+   *
+   * @returns {import('bpmn-js/lib/model/Types').ModdleElement}
    */
   function createElement(type, properties, parent, bpmnFactory) {
     const element = bpmnFactory.create(type, properties);
@@ -108020,8 +108484,8 @@
     return element;
   }
 
-  /**
-   * generate a semantic id with given prefix
+  /**
+   * generate a semantic id with given prefix
    */
   function nextId(prefix) {
     const ids = new Ids$1([32, 32, 1]);
@@ -108047,32 +108511,32 @@
     return elements.find(element => element.id === id);
   }
 
-  /**
-   * createOrUpdateFormalExpression - upserts a specific formal expression
-   *
-   * If the value is falsy, the formal expression is removed.
-   *
-   * @param {djs.model.Base} element
-   * @param {ModdleElement} moddleElement
-   * @param {string} propertyName
-   * @param {string} newValue
-   * @param {BpmnFactory} bpmnFactory
-   * @param {CommandStack} commandStack
+  /**
+   * createOrUpdateFormalExpression - upserts a specific formal expression
+   *
+   * If the value is falsy, the formal expression is removed.
+   *
+   * @param {djs.model.Base} element
+   * @param {ModdleElement} moddleElement
+   * @param {string} propertyName
+   * @param {string} newValue
+   * @param {BpmnFactory} bpmnFactory
+   * @param {CommandStack} commandStack
    */
   function createOrUpdateFormalExpression(element, moddleElement, propertyName, newValue, bpmnFactory, commandStack) {
     return commandStack.execute('element.updateModdleProperties', createOrUpdateFormalExpressionCommand(element, moddleElement, propertyName, newValue, bpmnFactory));
   }
 
-  /**
-   * createOrUpdateFormalExpressionCommand - creates a command to upsert a specific formal expression
-   *
-   * If the value is falsy, the formal expression is removed.
-   *
-   * @param {djs.model.Base} element
-   * @param {ModdleElement} moddleElement
-   * @param {string} propertyName
-   * @param {string} newValue
-   * @param {BpmnFactory} bpmnFactory
+  /**
+   * createOrUpdateFormalExpressionCommand - creates a command to upsert a specific formal expression
+   *
+   * If the value is falsy, the formal expression is removed.
+   *
+   * @param {djs.model.Base} element
+   * @param {ModdleElement} moddleElement
+   * @param {string} propertyName
+   * @param {string} newValue
+   * @param {BpmnFactory} bpmnFactory
    */
   function createOrUpdateFormalExpressionCommand(element, moddleElement, propertyName, newValue, bpmnFactory) {
     const expressionProps = {};
@@ -108108,12 +108572,12 @@
     };
   }
 
-  /**
-   * @typedef { import('@bpmn-io/properties-panel').EntryDefinition } Entry
+  /**
+   * @typedef { import('@bpmn-io/properties-panel').EntryDefinition } Entry
    */
 
-  /**
-   * @returns {Array<Entry>} entries
+  /**
+   * @returns {Array<Entry>} entries
    */
   function AdHocCompletionProps$1(props) {
     const {
@@ -108129,7 +108593,7 @@
     }, {
       id: 'cancelRemainingInstances',
       component: CancelRemainingInstances,
-      isEdited: isEdited$8
+      isEdited: node => node && !node.checked // the default value is true
     }];
   }
   function CompletionCondition$3(props) {
@@ -108275,12 +108739,12 @@
     return compensateEventDefinition && compensateEventDefinition.get('activityRef');
   }
 
-  /**
-   * @typedef { import('@bpmn-io/properties-panel').EntryDefinition } Entry
+  /**
+   * @typedef { import('@bpmn-io/properties-panel').EntryDefinition } Entry
    */
 
-  /**
-   * @returns {Array<Entry>} entries
+  /**
+   * @returns {Array<Entry>} entries
    */
   function CompensationProps(props) {
     const {
@@ -108390,12 +108854,12 @@
     return getFlowElements(element, 'bpmn:BoundaryEvent');
   }
 
-  /**
-   * Checks whether an Activity is attaching a CompensateEvent of the parent container.
-   *
-   * @param {ModdleElement} activity
-   * @param {Array<ModdleElement>} boundaryEvents
-   * @returns {Boolean}
+  /**
+   * Checks whether an Activity is attaching a CompensateEvent of the parent container.
+   *
+   * @param {ModdleElement} activity
+   * @param {Array<ModdleElement>} boundaryEvents
+   * @returns {Boolean}
    */
   function hasCompensationEventAttached(activity, boundaryEvents) {
     const {
@@ -108410,15 +108874,15 @@
     });
   }
 
-  /**
-   * Checks whether an Activity can be compensated. That's the case when it is
-   * a) a CallActivity
-   * b) a SubProcess, when it is not event based and not a compensation
-   * c) any other Activity, when it is attaching a CompensateEvent of the parent container
-   *
-   * @param {ModdleElement} activity
-   * @param {Array<ModdleElement>} boundaryEvents
-   * @returns {Boolean}
+  /**
+   * Checks whether an Activity can be compensated. That's the case when it is
+   * a) a CallActivity
+   * b) a SubProcess, when it is not event based and not a compensation
+   * c) any other Activity, when it is attaching a CompensateEvent of the parent container
+   *
+   * @param {ModdleElement} activity
+   * @param {Array<ModdleElement>} boundaryEvents
+   * @returns {Boolean}
    */
   function canBeCompensated(activity, boundaryEvents) {
     return is(activity, 'bpmn:CallActivity') || is(activity, 'bpmn:SubProcess') && !activity.triggeredByEvent && !activity.isForCompensation || hasCompensationEventAttached(activity, boundaryEvents);
@@ -108431,11 +108895,11 @@
     });
   }
 
-  /**
-   * Retrieves all possible activities to reference for a Compensation.
-   *
-   * @param {djs.model.Base} element
-   * @returns {Array<ModdleElement>}
+  /**
+   * Retrieves all possible activities to reference for a Compensation.
+   *
+   * @param {djs.model.Base} element
+   * @returns {Array<ModdleElement>}
    */
   function findActivityRefs(element) {
     const businessObject = getBusinessObject(element);
@@ -108455,13 +108919,13 @@
     return activities;
   }
 
-  /**
-   * Retrieves an option label in the form
-   * a) with name: "my Task (id=Task_1)"
-   * b) without name: "(id=Task_1)"
-   *
-   * @param {ModdleElement} activity
-   * @returns {String}
+  /**
+   * Retrieves an option label in the form
+   * a) with name: "my Task (id=Task_1)"
+   * b) without name: "(id=Task_1)"
+   *
+   * @param {ModdleElement} activity
+   * @returns {String}
    */
   function createOptionLabel(activity) {
     const {
@@ -108476,12 +108940,12 @@
 
   const DOCUMENTATION_TEXT_FORMAT = 'text/plain';
 
-  /**
-   * @typedef { import('@bpmn-io/properties-panel').EntryDefinition } Entry
+  /**
+   * @typedef { import('@bpmn-io/properties-panel').EntryDefinition } Entry
    */
 
-  /**
-   * @returns {Array<Entry>} entries
+  /**
+   * @returns {Array<Entry>} entries
    */
   function DocumentationProps(props) {
     const {
@@ -108552,12 +109016,12 @@
     });
   }
 
-  /**
-   * Retrieves a documentation element from a given moddle element.
-   *
-   * @param {ModdleElement} businessObject
-   *
-   * @returns {ModdleElement} documentation element inside the given moddle element.
+  /**
+   * Retrieves a documentation element from a given moddle element.
+   *
+   * @param {ModdleElement} businessObject
+   *
+   * @returns {ModdleElement} documentation element inside the given moddle element.
    */
   function getDocumentation(businessObject) {
     return function () {
@@ -108566,10 +109030,10 @@
     };
   }
 
-  /**
-   * Sets a documentation element for a given moddle element.
-   *
-   * @param {ModdleElement} businessObject
+  /**
+   * Sets a documentation element for a given moddle element.
+   *
+   * @param {ModdleElement} businessObject
    */
   function setDocumentation(element, businessObject, bpmnFactory, commandStack) {
     return function (value) {
@@ -108615,12 +109079,12 @@
   const EMPTY_OPTION$4 = '';
   const CREATE_NEW_OPTION$4 = 'create-new';
 
-  /**
-   * @typedef { import('@bpmn-io/properties-panel').EntryDefinition } Entry
+  /**
+   * @typedef { import('@bpmn-io/properties-panel').EntryDefinition } Entry
    */
 
-  /**
-   * @returns {Array<Entry>} entries
+  /**
+   * @returns {Array<Entry>} entries
    */
   function ErrorProps$2(props) {
     const {
@@ -108796,12 +109260,12 @@
 
   const CREATE_NEW_OPTION$3 = 'create-new';
 
-  /**
-   * @typedef { import('@bpmn-io/properties-panel').EntryDefinition } Entry
+  /**
+   * @typedef { import('@bpmn-io/properties-panel').EntryDefinition } Entry
    */
 
-  /**
-   * @returns {Array<Entry>} entries
+  /**
+   * @returns {Array<Entry>} entries
    */
   function EscalationProps$2(props) {
     const {
@@ -108974,12 +109438,12 @@
     return sortBy(elements, e => (e.name || '').toLowerCase());
   }
 
-  /**
-   * @typedef { import('@bpmn-io/properties-panel').EntryDefinition } Entry
+  /**
+   * @typedef { import('@bpmn-io/properties-panel').EntryDefinition } Entry
    */
 
-  /**
-   * @returns {Array<Entry>} entries
+  /**
+   * @returns {Array<Entry>} entries
    */
   function ExecutableProps(props) {
     const {
@@ -109050,14 +109514,14 @@
   // for ID validation as per BPMN Schema (QName - Namespace)
   const ID_REGEX = /^[a-z_][\w-.]*$/i;
 
-  /**
-   * checks whether the id value is valid
-   *
-   * @param {ModdleElement} element
-   * @param {String} idValue
-   * @param {Function} translate
-   *
-   * @return {String} error message
+  /**
+   * checks whether the id value is valid
+   *
+   * @param {ModdleElement} element
+   * @param {String} idValue
+   * @param {Function} translate
+   *
+   * @return {String} error message
    */
   function isIdValid(element, idValue, translate) {
     const assigned = element.$model.ids.assigned(idValue);
@@ -109085,12 +109549,12 @@
     return SPACE_REGEX.test(value);
   }
 
-  /**
-   * @typedef { import('@bpmn-io/properties-panel').EntryDefinition } Entry
+  /**
+   * @typedef { import('@bpmn-io/properties-panel').EntryDefinition } Entry
    */
 
-  /**
-   * @returns {Array<Entry>} entries
+  /**
+   * @returns {Array<Entry>} entries
    */
   function IdProps$1() {
     return [{
@@ -109132,12 +109596,12 @@
     });
   }
 
-  /**
-   * @typedef { import('@bpmn-io/properties-panel').EntryDefinition } Entry
+  /**
+   * @typedef { import('@bpmn-io/properties-panel').EntryDefinition } Entry
    */
 
-  /**
-   * @returns {Array<Entry>} entries
+  /**
+   * @returns {Array<Entry>} entries
    */
   function LinkProps(props) {
     const {
@@ -109185,12 +109649,12 @@
   const EMPTY_OPTION$3 = '';
   const CREATE_NEW_OPTION$2 = 'create-new';
 
-  /**
-   * @typedef { import('@bpmn-io/properties-panel').EntryDefinition } Entry
+  /**
+   * @typedef { import('@bpmn-io/properties-panel').EntryDefinition } Entry
    */
 
-  /**
-   * @returns {Array<Entry>} entries
+  /**
+   * @returns {Array<Entry>} entries
    */
   function MessageProps$1(props) {
     const {
@@ -109333,12 +109797,12 @@
     return sortBy(elements, e => (e.name || '').toLowerCase());
   }
 
-  /**
-   * @typedef { import('@bpmn-io/properties-panel').EntryDefinition } Entry
+  /**
+   * @typedef { import('@bpmn-io/properties-panel').EntryDefinition } Entry
    */
 
-  /**
-   * @returns {Array<Entry>} entries
+  /**
+   * @returns {Array<Entry>} entries
    */
   function MultiInstanceProps$2(props) {
     const {
@@ -109409,45 +109873,45 @@
 
   // generic ///////////////////////////
 
-  /**
-   * isMultiInstanceSupported - check whether given element supports MultiInstanceLoopCharacteristics.
-   *
-   * @param {djs.model.Base} element
-   * @return {boolean}
+  /**
+   * isMultiInstanceSupported - check whether given element supports MultiInstanceLoopCharacteristics.
+   *
+   * @param {djs.model.Base} element
+   * @return {boolean}
    */
   function isMultiInstanceSupported$1(element) {
     const loopCharacteristics = getLoopCharacteristics$2(element);
     return !!loopCharacteristics && is(loopCharacteristics, 'bpmn:MultiInstanceLoopCharacteristics');
   }
 
-  /**
-   * getBody - get the body of a given expression.
-   *
-   * @param {ModdleElement<bpmn:FormalExpression>} expression
-   * @return {string} the body (value) of the expression
+  /**
+   * getBody - get the body of a given expression.
+   *
+   * @param {ModdleElement<bpmn:FormalExpression>} expression
+   * @return {string} the body (value) of the expression
    */
   function getBody(expression) {
     return expression && expression.get('body');
   }
 
-  /**
-   * getProperty - get a property value of the loop characteristics.
-   *
-   * @param {djs.model.Base} element
-   * @param {string} propertyName
-   *
-   * @return {any} the property value
+  /**
+   * getProperty - get a property value of the loop characteristics.
+   *
+   * @param {djs.model.Base} element
+   * @param {string} propertyName
+   *
+   * @return {any} the property value
    */
   function getProperty$3(element, propertyName) {
     const loopCharacteristics = getLoopCharacteristics$2(element);
     return loopCharacteristics && loopCharacteristics.get(propertyName);
   }
 
-  /**
-   * getLoopCharacteristics - get loopCharacteristics of a given element.
-   *
-   * @param {djs.model.Base} element
-   * @return {ModdleElement<bpmn:MultiInstanceLoopCharacteristics> | undefined}
+  /**
+   * getLoopCharacteristics - get loopCharacteristics of a given element.
+   *
+   * @param {djs.model.Base} element
+   * @return {ModdleElement<bpmn:MultiInstanceLoopCharacteristics> | undefined}
    */
   function getLoopCharacteristics$2(element) {
     const bo = getBusinessObject(element);
@@ -109456,23 +109920,23 @@
 
   // loopCardinality
 
-  /**
-   * getLoopCardinality - get the loop cardinality of the loop characteristics.
-   *
-   * @param {djs.model.Base} element
-   *
-   * @return {ModdleElement<bpmn:FormalExpression>} an expression representing the loop cardinality
+  /**
+   * getLoopCardinality - get the loop cardinality of the loop characteristics.
+   *
+   * @param {djs.model.Base} element
+   *
+   * @return {ModdleElement<bpmn:FormalExpression>} an expression representing the loop cardinality
    */
   function getLoopCardinality(element) {
     return getProperty$3(element, 'loopCardinality');
   }
 
-  /**
-   * getLoopCardinalityValue - get the loop cardinality value of the loop characteristics.
-   *
-   * @param {djs.model.Base} element
-   *
-   * @return {string} the loop cardinality value
+  /**
+   * getLoopCardinalityValue - get the loop cardinality value of the loop characteristics.
+   *
+   * @param {djs.model.Base} element
+   *
+   * @return {string} the loop cardinality value
    */
   function getLoopCardinalityValue(element) {
     const loopCardinality = getLoopCardinality(element);
@@ -109481,35 +109945,35 @@
 
   // completionCondition /////////////////////
 
-  /**
-   * getCompletionCondition - get the completion condition of the loop characteristics.
-   *
-   * @param {djs.model.Base} element
-   *
-   * @return {ModdleElement<bpmn:FormalExpression>} an expression representing the completion condition
+  /**
+   * getCompletionCondition - get the completion condition of the loop characteristics.
+   *
+   * @param {djs.model.Base} element
+   *
+   * @return {ModdleElement<bpmn:FormalExpression>} an expression representing the completion condition
    */
   function getCompletionCondition$1(element) {
     return getProperty$3(element, 'completionCondition');
   }
 
-  /**
-   * getCompletionConditionValue - get the completion condition value of the loop characteristics.
-   *
-   * @param {djs.model.Base} element
-   *
-   * @return {string} the completion condition value
+  /**
+   * getCompletionConditionValue - get the completion condition value of the loop characteristics.
+   *
+   * @param {djs.model.Base} element
+   *
+   * @return {string} the completion condition value
    */
   function getCompletionConditionValue(element) {
     const completionCondition = getCompletionCondition$1(element);
     return getBody(completionCondition);
   }
 
-  /**
-   * @typedef { import('@bpmn-io/properties-panel').EntryDefinition } Entry
+  /**
+   * @typedef { import('@bpmn-io/properties-panel').EntryDefinition } Entry
    */
 
-  /**
-   * @returns {Array<Entry>} entries
+  /**
+   * @returns {Array<Entry>} entries
    */
   function NameProps(props) {
     const {
@@ -109613,12 +110077,12 @@
     return categoryValue;
   }
 
-  /**
-   * @typedef { import('@bpmn-io/properties-panel').EntryDefinition } Entry
+  /**
+   * @typedef { import('@bpmn-io/properties-panel').EntryDefinition } Entry
    */
 
-  /**
-   * @returns {Array<Entry>} entries
+  /**
+   * @returns {Array<Entry>} entries
    */
   function ProcessProps$1(props) {
     const {
@@ -109709,15 +110173,15 @@
     return is(element, 'bpmn:Participant') && element.businessObject.get('processRef');
   }
 
-  /**
-   * @typedef { import('@bpmn-io/properties-panel').EntryDefinition } Entry
+  /**
+   * @typedef { import('@bpmn-io/properties-panel').EntryDefinition } Entry
    */
 
   const EMPTY_OPTION$2 = '';
   const CREATE_NEW_OPTION$1 = 'create-new';
 
-  /**
-   * @returns {Entry[]}
+  /**
+   * @returns {Entry[]}
    */
   function SignalProps$1(props) {
     const {
@@ -109863,12 +110327,12 @@
     return isAny(element, ['bpmn:StartEvent', 'bpmn:IntermediateCatchEvent', 'bpmn:BoundaryEvent']) && !!getTimerEventDefinition(element);
   }
 
-  /**
-   * Get the timer definition type for a given timer event definition.
-   *
-   * @param {ModdleElement<bpmn:TimerEventDefinition>} timer
-   *
-   * @return {string|undefined} the timer definition type
+  /**
+   * Get the timer definition type for a given timer event definition.
+   *
+   * @param {ModdleElement<bpmn:TimerEventDefinition>} timer
+   *
+   * @return {string|undefined} the timer definition type
    */
   function getTimerDefinitionType(timer) {
     if (!timer) {
@@ -109938,12 +110402,12 @@
     return entries;
   }
 
-  /**
-   * TimerEventDefinitionType - Generic select entry allowing to select a specific
-   * timerEventDefintionType. To be used together with timerEventDefinitionValue.
-   *
-   * @param  {type} props
-   * @return {SelectEntry}
+  /**
+   * TimerEventDefinitionType - Generic select entry allowing to select a specific
+   * timerEventDefintionType. To be used together with timerEventDefinitionValue.
+   *
+   * @param  {type} props
+   * @return {SelectEntry}
    */
   function TimerEventDefinitionType$2(props) {
     const {
@@ -110011,13 +110475,13 @@
     });
   }
 
-  /**
-   * TimerEventDefinitionValue - Generic textField entry allowing to specify the
-   * timerEventDefintionValue based on the set timerEventDefintionType. To be used
-   * together with timerEventDefinitionType.
-   *
-   * @param  {type} props
-   * @return {TextFieldEntry}
+  /**
+   * TimerEventDefinitionValue - Generic textField entry allowing to specify the
+   * timerEventDefintionValue based on the set timerEventDefintionType. To be used
+   * together with timerEventDefinitionType.
+   *
+   * @param  {type} props
+   * @return {TextFieldEntry}
    */
   function TimerEventDefinitionValue$2(props) {
     const {