@metadev/daga 1.4.2 → 1.5.0

package/fesm2022/metadev-daga.mjs

@@ -190,10 +190,10 @@ class CollapseButtonComponent {
                 }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CollapseButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: CollapseButtonComponent, isStandalone: true, selector: "daga-collapse-button", inputs: { collapsableSelector: "collapsableSelector", collapsableAdditionalSelector: "collapsableAdditionalSelector", collapsed: "collapsed", disabled: "disabled", direction: "direction", rule: "rule", collapsedValue: "collapsedValue", visibleValue: "visibleValue" }, ngImport: i0, template: "<button class=\"collapse-button {{ direction }}\" (click)=\"toggleCollapse()\">\n  <div [class]=\"getClass()\"></div>\n</button>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: CollapseButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.1", type: CollapseButtonComponent, isStandalone: true, selector: "daga-collapse-button", inputs: { collapsableSelector: "collapsableSelector", collapsableAdditionalSelector: "collapsableAdditionalSelector", collapsed: "collapsed", disabled: "disabled", direction: "direction", rule: "rule", collapsedValue: "collapsedValue", visibleValue: "visibleValue" }, ngImport: i0, template: "<button class=\"collapse-button {{ direction }}\" (click)=\"toggleCollapse()\">\n  <div [class]=\"getClass()\"></div>\n</button>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CollapseButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: CollapseButtonComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'daga-collapse-button', imports: [CommonModule], template: "<button class=\"collapse-button {{ direction }}\" (click)=\"toggleCollapse()\">\n  <div [class]=\"getClass()\"></div>\n</button>\n" }]
         }], propDecorators: { collapsableSelector: [{
@@ -214,42 +214,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
                 type: Input
             }] } });
 
-/**
- * Removes the given element from the array if it exists within the array.
- * @private
- * @param arr An array.
- * @param obj An element to remove from the array.
- * @returns The given array without the given element removed if it was found; otherwise the array without modifications.
- */
-const removeIfExists = (arr, obj) => {
-    const index = arr.indexOf(obj);
-    if (index >= 0) {
-        arr.splice(index, 1);
-    }
-    return arr;
-};
-/**
- * Adds the given element to the array if it doesn't exist within the array.
- * @private
- * @param arr An array.
- * @param obj An element to add to the array.
- * @returns The given array with the given element added it was not found; otherwise the array without modifications.
- */
-const addIfNotExists = (arr, obj) => {
-    if (!arr.includes(obj)) {
-        arr.push(obj);
-    }
-    return arr;
-};
-
 /**
  * Returns whether the incoming timestamp wins over the existing timestamp.
  *
- * In the DiagramModel, timestamps that have never been set are left undefined;
+ * In the DiagramModel, timestamps that have never been set are left null;
  * `timestampWins` treats that as an "initial timestamp" that loses to all LogicalTimestamps.
  */
 function timestampWins(incoming, existing) {
-    if (existing === undefined)
+    if (!existing)
         return true;
     if (incoming[0] > existing[0])
         return true;
@@ -268,16 +240,16 @@ function timestampWins(incoming, existing) {
  * @private
  */
 class AddNodeCollabAction {
-    constructor(canvas, id, nodeTypeId, coords, label, values) {
+    constructor(canvas, id, typeId, coords, label, values) {
         this.canvas = canvas;
         this.id = id;
-        this.nodeTypeId = nodeTypeId;
+        this.typeId = typeId;
         this.coords = coords;
         this.label = label;
         this.values = values;
     }
     do() {
-        const node = this.canvas.model.nodes.new(this.nodeTypeId, this.coords, this.id);
+        const node = this.canvas.model.nodes.new(this.typeId, this.coords, this.id);
         if (this.values !== undefined) {
             node.valueSet.setValues(structuredClone({
                 ...node.valueSet.getValues(),
@@ -290,24 +262,24 @@ class AddNodeCollabAction {
     }
     serialize() {
         return {
-            type: 'add',
+            type: 'addNode',
             id: this.id,
-            nodeTypeId: this.nodeTypeId,
+            typeId: this.typeId,
             coords: this.coords,
             label: this.label,
             values: this.values
         };
     }
     static deserialize(canvas, serialized) {
-        return new AddNodeCollabAction(canvas, serialized.id, serialized.nodeTypeId, serialized.coords, serialized.label, serialized.values);
+        return new AddNodeCollabAction(canvas, serialized.id, serialized.typeId, serialized.coords, serialized.label, serialized.values);
     }
 }
 /**
- * Collaborative action which consists of moving a node.
- * @see MoveNodeAction
+ * Collaborative action which consists of changing a node's geometry: moving, stretching, or stretching sections.
+ * @see SetGeometryAction
  * @private
  */
-class MoveNodeCollabAction {
+class SetGeometryCollabAction {
     constructor(canvas, nodeId, to, timestamp) {
         this.canvas = canvas;
         this.nodeId = nodeId;
@@ -316,23 +288,197 @@ class MoveNodeCollabAction {
     }
     do() {
         const node = this.canvas.model.nodes.get(this.nodeId);
-        if (!node)
-            return;
-        if (timestampWins(this.timestamp, node.coordsTimestamp)) {
-            node.move(this.to);
-            node.coordsTimestamp = this.timestamp;
+        if (node && timestampWins(this.timestamp, node.geometryTimestamp)) {
+            node.setGeometry(this.to);
+            // Re-fit the labels, in case their text has changed since `this.to` was measured.
+            if (node.label?.fit) {
+                this.canvas.fitFieldRootInView(node.label.id);
+            }
+            for (const section of node.sections) {
+                if (section.label?.fit) {
+                    this.canvas.fitFieldRootInView(section.label.id);
+                }
+            }
+            node.geometryTimestamp = this.timestamp;
         }
     }
     serialize() {
         return {
-            type: 'move',
+            type: 'setGeometry',
             nodeId: this.nodeId,
             to: this.to,
             timestamp: this.timestamp
         };
     }
     static deserialize(canvas, serialized) {
-        return new MoveNodeCollabAction(canvas, serialized.nodeId, serialized.to, serialized.timestamp);
+        return new SetGeometryCollabAction(canvas, serialized.nodeId, serialized.to, serialized.timestamp);
+    }
+}
+/**
+ * Collaborative action which consists of adding a connection.
+ * @see AddConnectionAction
+ * @private
+ */
+class AddConnectionCollabAction {
+    constructor(canvas, id, typeId, startId, endId) {
+        this.canvas = canvas;
+        this.id = id;
+        this.typeId = typeId;
+        this.startId = startId;
+        this.endId = endId;
+    }
+    do() {
+        const start = this.canvas.model.ports.get(this.startId);
+        const end = this.canvas.model.ports.get(this.endId);
+        if (start && end) {
+            this.canvas.model.connections.new(this.typeId, start, end, this.id);
+        }
+    }
+    serialize() {
+        return {
+            type: 'addConnection',
+            id: this.id,
+            typeId: this.typeId,
+            startId: this.startId,
+            endId: this.endId
+        };
+    }
+    static deserialize(canvas, serialized) {
+        return new AddConnectionCollabAction(canvas, serialized.id, serialized.typeId, serialized.startId, serialized.endId);
+    }
+}
+/**
+ * Collaborative action which consists of editing the text of a field.
+ * @see EditFieldAction
+ * @private
+ */
+class EditFieldCollabAction {
+    constructor(canvas, fieldId, to, timestamp) {
+        this.canvas = canvas;
+        this.fieldId = fieldId;
+        this.to = to;
+        this.timestamp = timestamp;
+    }
+    do() {
+        const field = this.canvas.model.fields.get(this.fieldId);
+        if (field && timestampWins(this.timestamp, field.textTimestamp)) {
+            field.text = this.to;
+            field.textTimestamp = this.timestamp;
+        }
+    }
+    serialize() {
+        return {
+            type: 'editField',
+            fieldId: this.fieldId,
+            to: this.to,
+            timestamp: this.timestamp
+        };
+    }
+    static deserialize(canvas, serialized) {
+        return new EditFieldCollabAction(canvas, serialized.fieldId, serialized.to, serialized.timestamp);
+    }
+}
+/**
+ * Collaborative action which consists of editing the values of a value set.
+ * @see UpdateValuesAction
+ * @private
+ */
+class UpdateValuesCollabAction {
+    constructor(canvas, id, to, timestamp) {
+        this.canvas = canvas;
+        this.id = id;
+        this.to = to;
+        this.timestamp = timestamp;
+    }
+    getValueSet() {
+        if (this.id === undefined) {
+            return this.canvas.model.valueSet;
+        }
+        else {
+            return (this.canvas.model.nodes.get(this.id) ||
+                this.canvas.model.connections.get(this.id))?.valueSet;
+        }
+    }
+    do() {
+        this.getValueSet()?.overwriteValuesLww(this.to, this.timestamp);
+    }
+    serialize() {
+        return {
+            type: 'updateValues',
+            id: this.id,
+            to: this.to,
+            timestamp: this.timestamp
+        };
+    }
+    static deserialize(canvas, serialized) {
+        return new UpdateValuesCollabAction(canvas, serialized.id, serialized.to, serialized.timestamp);
+    }
+}
+/**
+ * Collaborative action which consists of removing or un-removing elements.
+ *
+ * Specifically, the action sets the `selfRemoved` field for elements that are
+ * explicitly removed/unremoved. This causes the `removed` fields for those elements
+ * and their transitive dependents to update automatically.
+ * For example, self-removing a node also removes all of its sections/connections/etc.
+ *
+ * @see RemoveAction
+ * @private
+ */
+class SetSelfRemovedCollabAction {
+    constructor(canvas, nodeIds, sectionIds, portIds, connectionIds, fieldIds, selfRemoved, timestamp) {
+        this.canvas = canvas;
+        this.nodeIds = nodeIds;
+        this.sectionIds = sectionIds;
+        this.portIds = portIds;
+        this.connectionIds = connectionIds;
+        this.fieldIds = fieldIds;
+        this.selfRemoved = selfRemoved;
+        this.timestamp = timestamp;
+    }
+    doOne(elt) {
+        if (elt && timestampWins(this.timestamp, elt.selfRemovedTimestamp)) {
+            elt.selfRemoved = this.selfRemoved;
+            elt.selfRemovedTimestamp = this.timestamp;
+        }
+    }
+    do() {
+        for (const nodeId of this.nodeIds) {
+            this.doOne(this.canvas.model.nodes.get(nodeId));
+        }
+        for (const sectionId of this.sectionIds) {
+            this.doOne(this.canvas.model.sections.get(sectionId));
+        }
+        for (const portId of this.portIds) {
+            this.doOne(this.canvas.model.ports.get(portId));
+        }
+        for (const connectionId of this.connectionIds) {
+            this.doOne(this.canvas.model.connections.get(connectionId));
+        }
+        for (const fieldId of this.fieldIds) {
+            this.doOne(this.canvas.model.fields.get(fieldId));
+        }
+        // update view
+        this.canvas.updateNodesInView(...this.nodeIds);
+        this.canvas.updateSectionsInView(...this.sectionIds);
+        this.canvas.updatePortsInView(...this.portIds);
+        this.canvas.updateConnectionsInView(...this.connectionIds);
+        this.canvas.updateFieldsInView(...this.fieldIds);
+    }
+    serialize() {
+        return {
+            type: 'setSelfRemoved',
+            nodeIds: this.nodeIds,
+            sectionIds: this.sectionIds,
+            portIds: this.portIds,
+            connectionIds: this.connectionIds,
+            fieldIds: this.fieldIds,
+            removed: this.selfRemoved,
+            timestamp: this.timestamp
+        };
+    }
+    static deserialize(canvas, serialized) {
+        return new SetSelfRemovedCollabAction(canvas, serialized.nodeIds, serialized.sectionIds, serialized.portIds, serialized.connectionIds, serialized.fieldIds, serialized.removed, serialized.timestamp);
     }
 }
 
@@ -415,7 +561,7 @@ var DiagramActions;
     DiagramActions["EditField"] = "edit-field";
     /**
      * Action that corresponds to moving a node.
-     * @see MoveNodeAction
+     * @see SetGeometryAction
      * @public
      */
     DiagramActions["MoveNode"] = "move-node";
@@ -427,13 +573,13 @@ var DiagramActions;
     DiagramActions["Remove"] = "remove";
     /**
      * Action that corresponds to altering a node's dimensions.
-     * @see StretchNodeAction
+     * @see SetGeometryActionAction
      * @public
      */
     DiagramActions["StretchNode"] = "stretch-node";
     /**
      * Action that corresponds to altering a sections's dimensions.
-     * @see StretchSectionAction
+     * @see SetGeometryAction
      * @public
      */
     DiagramActions["StretchSection"] = "stretch-section";
@@ -468,141 +614,47 @@ class AddNodeAction {
         this.canvas.collabEngine.doCollaboratively(collabAction);
     }
     undo() {
-        const node = this.canvas.model.nodes.get(this.id);
-        if (node) {
-            node.removed = true;
-            for (const section of node.sections) {
-                section.removed = true;
-                for (const port of section.ports) {
-                    port.removed = true;
-                    port.updateInView();
-                }
-                if (section.label) {
-                    section.label.removed = true;
-                    section.label.updateInView();
-                }
-                section.updateInView();
-            }
-            for (const port of node.ports) {
-                port.removed = true;
-                port.updateInView();
-            }
-            if (node.label) {
-                node.label.removed = true;
-                node.label.updateInView();
-            }
-            node.updateInView();
-        }
-    }
-    redo() {
-        const node = this.canvas.model.nodes.get(this.id);
-        if (node) {
-            node.removed = false;
-            for (const section of node.sections) {
-                section.removed = false;
-                for (const port of section.ports) {
-                    port.removed = false;
-                    port.updateInView();
-                }
-                if (section.label) {
-                    section.label.removed = false;
-                    section.label.updateInView();
-                }
-                section.updateInView();
-            }
-            for (const port of node.ports) {
-                port.removed = false;
-                port.updateInView();
-            }
-            if (node.label) {
-                node.label.removed = false;
-                node.label.updateInView();
-            }
-            node.updateInView();
-        }
-    }
-}
-/**
- * Action which consists of moving a node.
- * @see DiagramNode
- * @private
- */
-class MoveNodeAction {
-    constructor(canvas, nodeId, from, to) {
-        this.canvas = canvas;
-        this.nodeId = nodeId;
-        this.from = from;
-        this.to = to;
-    }
-    do() {
-        const collabAction = new MoveNodeCollabAction(this.canvas, this.nodeId, this.to, this.canvas.collabEngine.freshTimestamp());
-        this.canvas.collabEngine.doCollaboratively(collabAction);
-    }
-    undo() {
-        const collabAction = new MoveNodeCollabAction(this.canvas, this.nodeId, this.from, this.canvas.collabEngine.freshTimestamp());
+        const collabAction = new SetSelfRemovedCollabAction(this.canvas, [this.id], [], [], [], [], true, this.canvas.collabEngine.freshTimestamp());
         this.canvas.collabEngine.doCollaboratively(collabAction);
     }
     redo() {
-        this.do();
+        const collabAction = new SetSelfRemovedCollabAction(this.canvas, [this.id], [], [], [], [], false, this.canvas.collabEngine.freshTimestamp());
+        this.canvas.collabEngine.doCollaboratively(collabAction);
     }
 }
 /**
- * Action which consists of changing the dimensions of a node in a given direction.
+ * Action which consists of changing a node's geometry: moving, stretching, or stretching sections.
  * @see DiagramNode
  * @private
  */
-class StretchNodeAction {
-    constructor(canvas, nodeId, direction, from, to) {
+class SetGeometryAction {
+    constructor(canvas, intent, nodeId, from, to) {
         this.canvas = canvas;
+        this.intent = intent;
         this.nodeId = nodeId;
-        this.direction = direction;
         this.from = from;
         this.to = to;
     }
     do() {
-        this.canvas.model.nodes
-            .get(this.nodeId)
-            ?.stretch(this.direction, this.to - this.from);
+        const collabAction = new SetGeometryCollabAction(this.canvas, this.nodeId, this.to, this.canvas.collabEngine.freshTimestamp());
+        this.canvas.collabEngine.doCollaboratively(collabAction);
     }
     undo() {
-        this.canvas.model.nodes
-            .get(this.nodeId)
-            ?.stretch(this.direction, this.from - this.to);
-    }
-    redo() {
-        this.do();
-    }
-}
-/**
- * Action which consists of changing the dimensions of a section in a given direction.
- * @see DiagramSection
- * @private
- */
-class StretchSectionAction {
-    constructor(canvas, sectionId, direction, from, to) {
-        this.canvas = canvas;
-        this.sectionId = sectionId;
-        this.direction = direction;
-        this.from = from;
-        this.to = to;
-    }
-    do() {
-        const section = this.canvas.model.sections.get(this.sectionId);
-        const node = section?.node;
+        const node = this.canvas.model.nodes.get(this.nodeId);
         if (node) {
-            node.stretchSections(this.direction, this.to - this.from, section.indexXInNode, section.indexYInNode);
+            this.to = node.getGeometry();
+            const collabAction = new SetGeometryCollabAction(this.canvas, this.nodeId, this.from, this.canvas.collabEngine.freshTimestamp());
+            this.canvas.collabEngine.doCollaboratively(collabAction);
         }
     }
-    undo() {
-        const section = this.canvas.model.sections.get(this.sectionId);
-        const node = section?.node;
+    redo() {
+        const node = this.canvas.model.nodes.get(this.nodeId);
         if (node) {
-            node.stretchSections(this.direction, this.from - this.to, section.indexXInNode, section.indexYInNode);
+            this.from = node.getGeometry();
+            const collabAction = new SetGeometryCollabAction(this.canvas, this.nodeId, this.to, this.canvas.collabEngine.freshTimestamp());
+            this.canvas.collabEngine.doCollaboratively(collabAction);
         }
     }
-    redo() {
-        this.do();
-    }
 }
 /**
  * Action which consists of adding a connection.
@@ -610,39 +662,24 @@ class StretchSectionAction {
  * @private
  */
 class AddConnectionAction {
-    constructor(canvas, type, startId, endId, id) {
+    constructor(canvas, type, startId, endId) {
         this.canvas = canvas;
         this.type = type;
         this.startId = startId;
         this.endId = endId;
-        this.id = id;
+        this.id = this.canvas.collabEngine.freshId();
     }
     do() {
-        const start = this.canvas.model.ports.get(this.startId);
-        const end = this.canvas.model.ports.get(this.endId);
-        if (start && end) {
-            const connection = this.canvas.model.connections.new(this.type, start, end, this.id);
-            // reset our id in case it was automatically generated
-            this.id = connection.id;
-        }
+        const collabAction = new AddConnectionCollabAction(this.canvas, this.id, this.type.id, this.startId, this.endId);
+        this.canvas.collabEngine.doCollaboratively(collabAction);
     }
     undo() {
-        if (this.id) {
-            const connection = this.canvas.model.connections.get(this.id);
-            if (connection) {
-                connection.removed = true;
-                connection.updateInView();
-            }
-        }
+        const collabAction = new SetSelfRemovedCollabAction(this.canvas, [], [], [], [this.id], [], true, this.canvas.collabEngine.freshTimestamp());
+        this.canvas.collabEngine.doCollaboratively(collabAction);
     }
     redo() {
-        if (this.id) {
-            const connection = this.canvas.model.connections.get(this.id);
-            if (connection) {
-                connection.removed = false;
-                connection.updateInView();
-            }
-        }
+        const collabAction = new SetSelfRemovedCollabAction(this.canvas, [], [], [], [this.id], [], false, this.canvas.collabEngine.freshTimestamp());
+        this.canvas.collabEngine.doCollaboratively(collabAction);
     }
 }
 /**
@@ -658,19 +695,24 @@ class EditFieldAction {
         this.to = to;
     }
     do() {
-        const field = this.canvas.model.fields.get(this.fieldId);
-        if (field) {
-            field.text = this.to;
-        }
+        const collabAction = new EditFieldCollabAction(this.canvas, this.fieldId, this.to, this.canvas.collabEngine.freshTimestamp());
+        this.canvas.collabEngine.doCollaboratively(collabAction);
     }
     undo() {
         const field = this.canvas.model.fields.get(this.fieldId);
         if (field) {
-            field.text = this.from;
+            this.to = field.text;
+            const collabAction = new EditFieldCollabAction(this.canvas, this.fieldId, this.from, this.canvas.collabEngine.freshTimestamp());
+            this.canvas.collabEngine.doCollaboratively(collabAction);
         }
     }
     redo() {
-        this.do();
+        const field = this.canvas.model.fields.get(this.fieldId);
+        if (field) {
+            this.from = field.text;
+            const collabAction = new EditFieldCollabAction(this.canvas, this.fieldId, this.to, this.canvas.collabEngine.freshTimestamp());
+            this.canvas.collabEngine.doCollaboratively(collabAction);
+        }
     }
 }
 /**
@@ -679,180 +721,63 @@ class EditFieldAction {
  * @private
  */
 class UpdateValuesAction {
-    constructor(model, id, from, to) {
-        this.model = model;
+    constructor(canvas, id, from, to) {
+        this.canvas = canvas;
         this.id = id;
         this.from = from;
         this.to = to;
     }
-    getValueSet() {
-        if (this.id === undefined) {
-            return this.model.valueSet;
-        }
-        else {
-            return (this.model.nodes.get(this.id) || this.model.connections.get(this.id))?.valueSet;
-        }
-    }
     do() {
-        this.getValueSet()?.overwriteValues(this.to);
+        const collabAction = new UpdateValuesCollabAction(this.canvas, this.id, this.to, this.canvas.collabEngine.freshTimestamp());
+        this.canvas.collabEngine.doCollaboratively(collabAction);
     }
     undo() {
-        this.getValueSet()?.overwriteValues(this.from);
+        const collabAction = new UpdateValuesCollabAction(this.canvas, this.id, this.from, this.canvas.collabEngine.freshTimestamp());
+        const valueSet = collabAction.getValueSet();
+        if (valueSet) {
+            this.to = valueSet.getValuesForKeys(this.to);
+            this.canvas.collabEngine.doCollaboratively(collabAction);
+        }
     }
     redo() {
-        this.do();
+        const collabAction = new UpdateValuesCollabAction(this.canvas, this.id, this.to, this.canvas.collabEngine.freshTimestamp());
+        const valueSet = collabAction.getValueSet();
+        if (valueSet) {
+            this.from = valueSet.getValuesForKeys(this.from);
+            this.canvas.collabEngine.doCollaboratively(collabAction);
+        }
     }
 }
 /**
  * Action which consists of removing elements from a diagram.
+ *
+ * You should only include an element in this action if the element itself is explicitly removed.
+ * Elements removed as a consequence of a removing another element
+ * (e.g., removing a node removes all of its sections)
+ * will be handled automatically, in a way that converges in the case
+ * of concurrent collaborative actions.
+ *
  * @private
  */
 class RemoveAction {
-    constructor(model, nodeIds, sectionIds, portIds, connectionIds, fieldIds) {
-        this.model = model;
+    constructor(canvas, nodeIds, sectionIds, portIds, connectionIds, fieldIds) {
+        this.canvas = canvas;
         this.nodeIds = nodeIds;
         this.sectionIds = sectionIds;
         this.portIds = portIds;
-        this.connectionIds = connectionIds;
-        this.fieldIds = fieldIds;
-    }
-    do() {
-        for (const nodeId of this.nodeIds) {
-            const node = this.model.nodes.get(nodeId);
-            if (node) {
-                node.removed = true;
-                for (const section of node.sections) {
-                    addIfNotExists(this.sectionIds, section.id);
-                }
-                for (const port of node.ports) {
-                    addIfNotExists(this.portIds, port.id);
-                }
-                if (node.label) {
-                    addIfNotExists(this.fieldIds, node.label.id);
-                }
-            }
-        }
-        for (const sectionId of this.sectionIds) {
-            const section = this.model.sections.get(sectionId);
-            if (section) {
-                section.removed = true;
-                for (const port of section.ports) {
-                    addIfNotExists(this.portIds, port.id);
-                }
-                if (section.label) {
-                    addIfNotExists(this.fieldIds, section.label.id);
-                }
-            }
-        }
-        for (const portId of this.portIds) {
-            const port = this.model.ports.get(portId);
-            if (port) {
-                port.removed = true;
-                for (const connection of port.outgoingConnections) {
-                    addIfNotExists(this.connectionIds, connection.id);
-                }
-                for (const connection of port.incomingConnections) {
-                    addIfNotExists(this.connectionIds, connection.id);
-                }
-                if (port.label) {
-                    addIfNotExists(this.fieldIds, port.label.id);
-                }
-            }
-        }
-        for (const connectionId of this.connectionIds) {
-            const connection = this.model.connections.get(connectionId);
-            if (connection) {
-                connection.removed = true;
-            }
-        }
-        for (const fieldId of this.fieldIds) {
-            const field = this.model.fields.get(fieldId);
-            if (field) {
-                field.removed = true;
-            }
-        }
-        // update view
-        this.model.canvas?.updateNodesInView(...this.nodeIds);
-        this.model.canvas?.updateSectionsInView(...this.sectionIds);
-        this.model.canvas?.updatePortsInView(...this.portIds);
-        this.model.canvas?.updateConnectionsInView(...this.connectionIds);
-        this.model.canvas?.updateFieldsInView(...this.fieldIds);
+        this.connectionIds = connectionIds;
+        this.fieldIds = fieldIds;
+    }
+    do() {
+        const collabAction = new SetSelfRemovedCollabAction(this.canvas, this.nodeIds, this.sectionIds, this.portIds, this.connectionIds, this.fieldIds, true, this.canvas.collabEngine.freshTimestamp());
+        this.canvas.collabEngine.doCollaboratively(collabAction);
     }
     undo() {
-        for (const nodeId of this.nodeIds) {
-            const node = this.model.nodes.get(nodeId);
-            if (node) {
-                node.removed = false;
-            }
-        }
-        for (const sectionId of this.sectionIds) {
-            const section = this.model.sections.get(sectionId);
-            if (section) {
-                section.removed = false;
-            }
-        }
-        for (const portId of this.portIds) {
-            const port = this.model.ports.get(portId);
-            if (port) {
-                port.removed = false;
-            }
-        }
-        for (const connectionId of this.connectionIds) {
-            const connection = this.model.connections.get(connectionId);
-            if (connection) {
-                connection.removed = false;
-            }
-        }
-        for (const fieldId of this.fieldIds) {
-            const field = this.model.fields.get(fieldId);
-            if (field) {
-                field.removed = false;
-            }
-        }
-        // update view
-        this.model.canvas?.updateNodesInView(...this.nodeIds);
-        this.model.canvas?.updateSectionsInView(...this.sectionIds);
-        this.model.canvas?.updatePortsInView(...this.portIds);
-        this.model.canvas?.updateConnectionsInView(...this.connectionIds);
-        this.model.canvas?.updateFieldsInView(...this.fieldIds);
+        const collabAction = new SetSelfRemovedCollabAction(this.canvas, this.nodeIds, this.sectionIds, this.portIds, this.connectionIds, this.fieldIds, false, this.canvas.collabEngine.freshTimestamp());
+        this.canvas.collabEngine.doCollaboratively(collabAction);
     }
     redo() {
-        for (const nodeId of this.nodeIds) {
-            const node = this.model.nodes.get(nodeId);
-            if (node) {
-                node.removed = true;
-            }
-        }
-        for (const sectionId of this.sectionIds) {
-            const section = this.model.sections.get(sectionId);
-            if (section) {
-                section.removed = true;
-            }
-        }
-        for (const portId of this.portIds) {
-            const port = this.model.ports.get(portId);
-            if (port) {
-                port.removed = true;
-            }
-        }
-        for (const connectionId of this.connectionIds) {
-            const connection = this.model.connections.get(connectionId);
-            if (connection) {
-                connection.removed = true;
-            }
-        }
-        for (const fieldId of this.fieldIds) {
-            const field = this.model.fields.get(fieldId);
-            if (field) {
-                field.removed = true;
-            }
-        }
-        // update view
-        this.model.canvas?.updateNodesInView(...this.nodeIds);
-        this.model.canvas?.updateSectionsInView(...this.sectionIds);
-        this.model.canvas?.updatePortsInView(...this.portIds);
-        this.model.canvas?.updateConnectionsInView(...this.connectionIds);
-        this.model.canvas?.updateFieldsInView(...this.fieldIds);
+        this.do();
     }
 }
 
@@ -996,6 +921,34 @@ class Grid {
     }
 }
 
+/**
+ * Removes the given element from the array if it exists within the array.
+ * @private
+ * @param arr An array.
+ * @param obj An element to remove from the array.
+ * @returns The given array without the given element removed if it was found; otherwise the array without modifications.
+ */
+const removeIfExists = (arr, obj) => {
+    const index = arr.indexOf(obj);
+    if (index >= 0) {
+        arr.splice(index, 1);
+    }
+    return arr;
+};
+/**
+ * Adds the given element to the array if it doesn't exist within the array.
+ * @private
+ * @param arr An array.
+ * @param obj An element to add to the array.
+ * @returns The given array with the given element added it was not found; otherwise the array without modifications.
+ */
+const addIfNotExists = (arr, obj) => {
+    if (!arr.includes(obj)) {
+        arr.push(obj);
+    }
+    return arr;
+};
+
 /**
  * A layout which places adjacent nodes close by, placing nodes in order according to depth first search.
  * @public
@@ -1389,7 +1342,7 @@ class ForceLayout {
         const coolingFactor = 0.99;
         const minimumTemperature = 1;
         const attractionFactor = 0.1;
-        const repulsionFactor = 200000;
+        const repulsionFactor = 200_000;
         const gapRepulsionFactor = 0.5;
         const shiftNodeIfOverlap = 1;
         const gravityFactor = 0.002;
@@ -2380,10 +2333,22 @@ class DiagramElement {
          */
         this.selected = false;
         /**
-         * Whether this diagram element has been removed.
+         * Whether this diagram element has itself been explicitly removed.
+         *
+         * Override the `removed` getter so that it returns true if and only if:
+         * - `selfRemoved` is true, or
+         * - `removed` is true for any of this element's dependencies.
+         *
+         * For example, a DiagramConnection is removed if either of its ports are removed,
+         * even if the connection's own `selfRemoved` field is false.
+         * @private
+         */
+        this.selfRemoved = false;
+        /**
+         * Collaborative timestamp for selfRemoved.
          * @private
          */
-        this.removed = false;
+        this.selfRemovedTimestamp = null;
         this.model = model;
         this._id = id;
     }
@@ -2568,6 +2533,11 @@ var Type;
      * @see Type.Option
      */
     Type["OptionList"] = "option-list";
+    /**
+     * A type whose value must be a list of values picked from a set of options without repeated values.
+     * @see Type.Option
+     */
+    Type["OptionSet"] = "option-set";
     /**
      * A type whose value must be a string without newline characters.
      */
@@ -2580,6 +2550,10 @@ var Type;
      * A type whose value must be a list of strings.
      */
     Type["TextList"] = "text-list";
+    /**
+     * A type whose value must be a list of strings without repeated values.
+     */
+    Type["TextSet"] = "text-set";
     /**
      * A type whose value must be a map with string keys and values.
      */
@@ -2625,6 +2599,13 @@ class ValueSet {
         this.hiddenProperties = [];
         this.values = {};
         this.valueSets = {};
+        /**
+         * Collaborative timestamps for all keys in this.values that have ever been set,
+         * even if since they've since been set to the default value.
+         *
+         * Object values (in this.valueSets) store their own timestamps separately.
+         */
+        this.ownTimestamps = {};
         this.propertySet = propertySet;
         this.rootElement = rootElement;
         this.resetValues();
@@ -2723,6 +2704,45 @@ class ValueSet {
         }
         return result;
     }
+    /**
+     * Returns the values for all keys present in the given object, including keys in sub-objects.
+     *
+     * @private
+     * @param values An object containing all values for keys present in the given object.
+     */
+    getValuesForKeys(keys) {
+        const result = {};
+        for (const key in keys) {
+            const property = this.propertySet.getProperty(key);
+            if (property.type === Type.Object) {
+                result[key] = this.valueSets[key].getValuesForKeys(keys[key]);
+            }
+            else {
+                result[key] = this.getValue(key);
+            }
+        }
+        return result;
+    }
+    /**
+     * Obtain all CollabTimestamps in the set, including those corresponding to nested keys.
+     * @private
+     * @returns An object containing all the CollabTimestamps in the set.
+     */
+    getTimestamps() {
+        const result = {};
+        for (const key in this.propertySet.propertyMap) {
+            const property = this.propertySet.getProperty(key);
+            if (property.type === Type.Object) {
+                result[key] = this.valueSets[key].getTimestamps();
+            }
+            else {
+                const timestamp = this.ownTimestamps[key];
+                if (timestamp)
+                    result[key] = timestamp;
+            }
+        }
+        return result;
+    }
     /**
      * Check if the value under the key is not empty.
      * @private
@@ -2737,7 +2757,7 @@ class ValueSet {
      * Check if the value under the key is not empty or the default value.
      * @private
      * @param key A key.
-     * @returns `true` if the value under the key is empty or the default value, `false` otherwise.
+     * @returns `true` if the value under the key is not empty or the default value, `false` otherwise.
      */
     hasSetValue(key) {
         const value = this.getValue(key);
@@ -2774,12 +2794,14 @@ class ValueSet {
             }
             else {
                 this.values[key] = value;
+                if (!equals(value, property.defaultValue)) {
+                    this.displayProperty(property);
+                }
             }
             const rootAttribute = property.rootAttribute;
             if (rootAttribute !== undefined && rootAttribute !== null) {
                 this.setRootElementValue(rootAttribute, value);
             }
-            this.displayProperty(property);
         }
     }
     /**
@@ -2799,6 +2821,23 @@ class ValueSet {
             }
         }
     }
+    /**
+     * Reset all timestamps and then set them to the given timestamps.
+     * @private
+     * @param values An object containing all the CollabTimestamps in the set.
+     */
+    setTimestamps(timestamps) {
+        this.ownTimestamps = {};
+        for (const key in timestamps) {
+            const property = this.propertySet.getProperty(key);
+            if (property.type === Type.Object) {
+                this.valueSets[key].setTimestamps(timestamps[key]);
+            }
+            else {
+                this.ownTimestamps[key] = timestamps[key];
+            }
+        }
+    }
     /**
      * Writes the given values over the value set's existing values without resetting the existing values.
      * @private
@@ -2815,6 +2854,25 @@ class ValueSet {
             }
         }
     }
+    /**
+     * Variant of overwriteValues that applies last-writer-wins to each key, updating timestamps if appropriate.
+     * @private
+     * @param values An object containing all values to set the values to.
+     */
+    overwriteValuesLww(values, timestamp) {
+        for (const key in values) {
+            const property = this.propertySet.getProperty(key);
+            if (property.type === Type.Object) {
+                this.valueSets[key].overwriteValuesLww(values[key], timestamp);
+            }
+            else {
+                if (timestampWins(timestamp, this.ownTimestamps[key])) {
+                    this.setValue(key, values[key]);
+                    this.ownTimestamps[key] = timestamp;
+                }
+            }
+        }
+    }
     /**
      * Set all the values of this set to the defaults.
      * If this set has a root element and any of its properties have root attributes, the root element's attributes are also set to the property's default value if one is provided.
@@ -2823,6 +2881,7 @@ class ValueSet {
     resetValues() {
         this.displayedProperties = [];
         this.hiddenProperties = [];
+        this.ownTimestamps = {};
         for (const key in this.propertySet.propertyMap) {
             const property = this.propertySet.getProperty(key);
             const rootAttribute = property.rootAttribute;
@@ -2915,10 +2974,10 @@ const equals = (a, b) => {
     return a === b || JSON.stringify(a) === JSON.stringify(b);
 };
 /**
- * Calculate the differences between the given values and return two objects, each containing the keys for which the values are different in each argument, containing the different values.
+ * Calculate the differences between the given objects and return two objects, each containing the keys for which the values are different in each argument, containing the different values.
  * @param a A dictionary.
  * @param b A dictionary.
- * @returns A tuple of two values with each containing the keys that have a different value in the corresponding argument compared to the other argument.
+ * @returns A tuple of two objects with each containing the keys that have a different value in the corresponding argument compared to the other argument.
  */
 const diff = (a, b) => {
     const aDiff = {};
@@ -2934,7 +2993,13 @@ const diff = (a, b) => {
     }
     for (const key of allKeys) {
         if (isObject(a[key]) && isObject(b[key])) {
-            [aDiff[key], bDiff[key]] = diff(a[key], b[key]);
+            const diffAB = diff(a[key], b[key]);
+            // only add the key if differences are detected
+            if (Object.keys(diffAB[0]).length > 0 &&
+                Object.keys(diffAB[1]).length > 0) {
+                aDiff[key] = diffAB[0];
+                bDiff[key] = diffAB[1];
+            }
         }
         else {
             if (!equals(a[key], b[key])) {
@@ -2945,9 +3010,8 @@ const diff = (a, b) => {
     }
     return [aDiff, bDiff];
 };
-const isObject = (x) => typeof x === 'object' && !!x;
+const isObject = (x) => x !== undefined && x !== null && x.constructor === Object;
 
-let idTicker$4 = 0;
 /**
  * Default values of the parameters of a diagram connection.
  * @see DiagramConnection
@@ -2967,6 +3031,23 @@ const DIAGRAM_CONNECTION_TYPE_DEFAULTS = {
     selectedColor: '#000000',
     properties: []
 };
+// TODO: Should maybe get these variables from the diagram configuration rather than have them hardcoded
+/**
+ * Whether a connection can have the same port as both its start port and its end port.
+ */
+const CAN_A_CONNECTION_END_ON_THE_SAME_PORT_IT_STARTS = false;
+/**
+ * Whether a connection can have the same ports as another connection.
+ */
+const CAN_A_CONNECTION_HAVE_THE_SAME_PORTS_AS_ANOTHER = false;
+/**
+ * Whether a port can have multiple connections.
+ */
+const CAN_CONNECTIONS_SHARE_PORTS = true;
+/**
+ * Whether tightening connections is allowed.
+ */
+const CAN_TIGHTEN_CONNECTIONS = true;
 /**
  * A connection type, which holds properties that connections of this type share in common.
  * @see ConnectionTypeConfig
@@ -3016,16 +3097,10 @@ class DiagramConnection extends DiagramElement {
         this.middleLabel = name;
     }
     constructor(model, type, start, end, id) {
-        let uniqueId;
-        if (id !== undefined && model.connections.get(id) === undefined) {
-            uniqueId = id;
-        }
-        else {
-            do {
-                uniqueId = `diagram-connection-${++idTicker$4}`;
-            } while (model.connections.get(uniqueId) !== undefined);
+        if (model.connections.get(id) !== undefined) {
+            throw new Error(`DiagramConnection with id "${id}" already exists`);
         }
-        super(model, uniqueId);
+        super(model, id);
         /**
          * Coordinates of the start point of this connection.
          * @public
@@ -3064,6 +3139,11 @@ class DiagramConnection extends DiagramElement {
         this.setStart(start);
         this.setEnd(end);
     }
+    get removed() {
+        return (this.selfRemoved ||
+            (this.start !== undefined && this.start.removed) ||
+            (this.end !== undefined && this.end.removed));
+    }
     updateInView() {
         this.model.canvas?.updateConnectionsInView(this.id);
     }
@@ -3121,20 +3201,104 @@ class DiagramConnection extends DiagramElement {
      * @public
      */
     tighten() {
-        if (this.start?.rootElement && this.end?.rootElement) {
-            const tighterStartPort = 
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            this.start.rootElement.getClosestPortToPoint(this.end.coords);
-            if (tighterStartPort && tighterStartPort !== this.start) {
-                this.setStart(tighterStartPort);
-            }
-            const tighterEndPort = 
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            this.end.rootElement.getClosestPortToPoint(this.start.coords);
-            if (tighterEndPort && tighterEndPort !== this.end) {
-                this.setEnd(tighterEndPort);
+        if (!CAN_TIGHTEN_CONNECTIONS) {
+            return;
+        }
+        if (this.start?.rootElement && this.end) {
+            const alternativeStartPortsSortedByDistanceAscending = this.start.rootElement.ports
+                .map((p) => [
+                p,
+                p.distanceTo(this.end.coords)
+            ])
+                .sort((a, b) => a[1] - b[1])
+                .map((a) => a[0]);
+            checkAlternativeStartPorts: for (const alternativeStartPort of alternativeStartPortsSortedByDistanceAscending) {
+                if (!CAN_A_CONNECTION_END_ON_THE_SAME_PORT_IT_STARTS &&
+                    alternativeStartPort === this.end) {
+                    // alternative start port not valid, it is the same as the end port
+                    continue checkAlternativeStartPorts;
+                }
+                if (!CAN_CONNECTIONS_SHARE_PORTS &&
+                    ((alternativeStartPort.incomingConnections.length === 1 &&
+                        alternativeStartPort.incomingConnections[0] !== this) ||
+                        alternativeStartPort.incomingConnections.length > 1 ||
+                        (alternativeStartPort.outgoingConnections.length === 1 &&
+                            alternativeStartPort.outgoingConnections[0] !== this) ||
+                        alternativeStartPort.outgoingConnections.length > 1)) {
+                    // alternative start port not valid, it already has other connections
+                    continue checkAlternativeStartPorts;
+                }
+                if (!CAN_A_CONNECTION_HAVE_THE_SAME_PORTS_AS_ANOTHER) {
+                    for (const connection of alternativeStartPort.outgoingConnections) {
+                        if (connection !== this && connection.end === this.end) {
+                            // alternative start port not valid, there is a connection whose start and end matches the alternative start port and this connection's end
+                            continue checkAlternativeStartPorts;
+                        }
+                    }
+                    for (const connection of alternativeStartPort.incomingConnections) {
+                        if (connection !== this && connection.start === this.end) {
+                            // alternative start port not valid, there is a connection whose start and end matches the alternative start port and this connection's end
+                            continue checkAlternativeStartPorts;
+                        }
+                    }
+                }
+                // found a valid start port
+                if (alternativeStartPort === this.start) {
+                    break checkAlternativeStartPorts;
+                }
+                else {
+                    this.setStart(alternativeStartPort);
+                    break checkAlternativeStartPorts;
+                }
+            }
+        }
+        if (this.end?.rootElement && this.start) {
+            const alternativeEndPortsSortedByDistanceAscending = this.end.rootElement.ports
+                .map((p) => [
+                p,
+                p.distanceTo(this.start.coords)
+            ])
+                .sort((a, b) => a[1] - b[1])
+                .map((a) => a[0]);
+            checkAlternativeEndPorts: for (const alternativeEndPort of alternativeEndPortsSortedByDistanceAscending) {
+                if (!CAN_A_CONNECTION_END_ON_THE_SAME_PORT_IT_STARTS &&
+                    alternativeEndPort === this.start) {
+                    // alternative start port not valid, it is the same as the end port
+                    continue checkAlternativeEndPorts;
+                }
+                if (!CAN_CONNECTIONS_SHARE_PORTS &&
+                    ((alternativeEndPort.outgoingConnections.length === 1 &&
+                        alternativeEndPort.outgoingConnections[0] !== this) ||
+                        alternativeEndPort.outgoingConnections.length > 1 ||
+                        (alternativeEndPort.incomingConnections.length === 1 &&
+                            alternativeEndPort.incomingConnections[0] !== this) ||
+                        alternativeEndPort.incomingConnections.length > 1)) {
+                    // alternative start port not valid, it already has other connections
+                    continue checkAlternativeEndPorts;
+                }
+                if (!CAN_A_CONNECTION_HAVE_THE_SAME_PORTS_AS_ANOTHER) {
+                    for (const connection of alternativeEndPort.incomingConnections) {
+                        if (connection !== this && connection.start === this.start) {
+                            // alternative start port not valid, there is a connection whose start and end matches the alternative end port and this connection's start
+                            continue checkAlternativeEndPorts;
+                        }
+                    }
+                    for (const connection of alternativeEndPort.outgoingConnections) {
+                        if (connection !== this && connection.end === this.start) {
+                            // alternative start port not valid, there is a connection whose start and end matches the alternative end port and this connection's start
+                            continue checkAlternativeEndPorts;
+                        }
+                    }
+                }
+                // found a valid start port
+                if (alternativeEndPort === this.end) {
+                    break checkAlternativeEndPorts;
+                }
+                else {
+                    this.setEnd(alternativeEndPort);
+                    break checkAlternativeEndPorts;
+                }
             }
-            this.updateInView();
         }
     }
     getPriority() {
@@ -3176,7 +3340,7 @@ class DiagramConnectionSet extends DiagramEntitySet {
      * @param type The type of the connection given as either the type itself or the id of the type.
      * @param start The start port of the connection.
      * @param end The end port of the connection.
-     * @param id The id of the connection. Should be left undefined unless a specific id is required.
+     * @param id The id of the connection.
      * @returns The instanced connection.
      */
     new(type, start, end, id) {
@@ -3211,7 +3375,6 @@ class DiagramConnectionSet extends DiagramEntitySet {
     }
 }
 
-let idTicker$3 = 0;
 /**
  * Default values of the look of a diagram section.
  * @see DIAGRAM_SECTION_DEFAULTS
@@ -3281,16 +3444,10 @@ class DiagramSection extends DiagramElement {
         }
     }
     constructor(model, node, indexXInNode, indexYInNode, coords, width, height, id) {
-        let uniqueId;
-        if (id !== undefined && model.sections.get(id) === undefined) {
-            uniqueId = id;
+        if (model.sections.get(id) !== undefined) {
+            throw new Error(`DiagramSection with id "${id}" already exists`);
         }
-        else {
-            do {
-                uniqueId = `diagram-section-${++idTicker$3}`;
-            } while (model.sections.get(uniqueId) !== undefined);
-        }
-        super(model, uniqueId);
+        super(model, id);
         /**
          * Ports of this section.
          * @public
@@ -3303,6 +3460,9 @@ class DiagramSection extends DiagramElement {
         this.width = width;
         this.height = height;
     }
+    get removed() {
+        return this.selfRemoved || (this.node !== undefined && this.node.removed);
+    }
     updateInView() {
         this.model.canvas?.updateSectionsInView(this.id);
     }
@@ -3390,25 +3550,11 @@ class DiagramSection extends DiagramElement {
      * @param coords A point in the diagram.
      */
     move(coords) {
-        const coordDifferences = [
-            coords[0] - this.coords[0],
-            coords[1] - this.coords[1]
-        ];
-        this.coords = coords;
-        for (const port of this.ports) {
-            port.move([
-                port.coords[0] + coordDifferences[0],
-                port.coords[1] + coordDifferences[1]
-            ]);
-        }
-        if (this.label) {
-            this.label.move([
-                this.label.coords[0] + coordDifferences[0],
-                this.label.coords[1] + coordDifferences[1]
-            ]);
-        }
-        this.getConnections().forEach((c) => c.tighten());
-        this.updateInView();
+        this.setGeometry({
+            coords,
+            width: this.width,
+            height: this.height
+        });
     }
     /**
      * Change the dimensions of this section in the given direction by the given amount.
@@ -3451,12 +3597,40 @@ class DiagramSection extends DiagramElement {
                 }
                 break;
         }
-        this.coords = [newCoordsX[0], newCoordsY[0]];
-        this.width = newCoordsX[1] - newCoordsX[0];
-        this.height = newCoordsY[1] - newCoordsY[0];
+        this.setGeometry({
+            coords: [newCoordsX[0], newCoordsY[0]],
+            width: newCoordsX[1] - newCoordsX[0],
+            height: newCoordsY[1] - newCoordsY[0]
+        });
+    }
+    /**
+     * Returns the current values of all geometric properties (coordinates and dimensions) of this section.
+     * @public
+     */
+    getGeometry() {
+        return {
+            coords: [...this.coords],
+            width: this.width,
+            height: this.height
+        };
+    }
+    /**
+     * Sets all geometric properties (coordinates and dimensions) of this section.
+     * @public
+     */
+    setGeometry(geometry) {
+        const oldCoordsX = [this.coords[0], this.coords[0] + this.width];
+        const oldCoordsY = [this.coords[1], this.coords[1] + this.height];
+        this.coords = [...geometry.coords];
+        this.width = geometry.width;
+        this.height = geometry.height;
+        const newCoordsX = [this.coords[0], this.coords[0] + this.width];
+        const newCoordsY = [this.coords[1], this.coords[1] + this.height];
+        // Move ports to match the new coords.
         for (const port of this.ports) {
             port.move(translatePoint(port.coords, oldCoordsX, oldCoordsY, newCoordsX, newCoordsY));
         }
+        // Set label's dimensions as a function of ours.
         if (this.label) {
             this.label.coords = [
                 this.coords[0] + (this.getConfig()?.label?.margin || 0),
@@ -3468,6 +3642,8 @@ class DiagramSection extends DiagramElement {
                     this.height - (this.getConfig()?.label?.margin || 0) * 2);
             this.label.updateInView();
         }
+        // Update canvas.
+        this.getConnections().forEach((c) => c.tighten());
         this.updateInView();
     }
 }
@@ -3499,7 +3675,7 @@ class DiagramSectionSet extends DiagramEntitySet {
                 const port = this.model.ports.new(section, [
                     section.coords[0] + (portConfig?.coords?.[0] || 0),
                     section.coords[1] + (portConfig?.coords?.[1] || 0)
-                ], portConfig?.direction);
+                ], portConfig?.direction, `${section.id}_${i}`);
                 if (portConfig.label) {
                     const labelConfiguration = {
                         ...DIAGRAM_FIELD_DEFAULTS,
@@ -3570,7 +3746,6 @@ class DiagramSectionSet extends DiagramEntitySet {
     }
 }
 
-let idTicker$2 = 0;
 /**
  * Default values of the look of a diagram node.
  * @see DIAGRAM_NODE_TYPE_DEFAULTS
@@ -3654,16 +3829,10 @@ class DiagramNode extends DiagramElement {
         }
     }
     constructor(model, type, coords = [0, 0], id) {
-        let uniqueId;
-        if (id !== undefined && model.nodes.get(id) === undefined) {
-            uniqueId = id;
-        }
-        else {
-            do {
-                uniqueId = `diagram-node-${++idTicker$2}`;
-            } while (model.nodes.get(uniqueId) !== undefined);
+        if (model.nodes.get(id) !== undefined) {
+            throw new Error(`DiagramNode with id "${id}" already exists`);
         }
-        super(model, uniqueId);
+        super(model, id);
         /**
          * Sections of this node.
          * @public
@@ -3674,6 +3843,11 @@ class DiagramNode extends DiagramElement {
          * @public
          */
         this.ports = [];
+        /**
+         * Collaborative timestamp for SetGeometryCollabActions.
+         * @public
+         */
+        this.geometryTimestamp = null;
         this.type = type;
         this.valueSet = new ValueSet(type.propertySet, this);
         this.originalData = {};
@@ -3681,6 +3855,9 @@ class DiagramNode extends DiagramElement {
         this.width = type.defaultWidth;
         this.height = type.defaultHeight;
     }
+    get removed() {
+        return this.selfRemoved;
+    }
     updateInView() {
         this.model.canvas?.updateNodesInView(this.id);
     }
@@ -3784,27 +3961,19 @@ class DiagramNode extends DiagramElement {
             coords[0] - this.coords[0],
             coords[1] - this.coords[1]
         ];
-        this.coords = coords;
         for (const section of this.sections) {
             section.move([
                 section.coords[0] + coordDifferences[0],
                 section.coords[1] + coordDifferences[1]
             ]);
         }
-        for (const port of this.ports) {
-            port.move([
-                port.coords[0] + coordDifferences[0],
-                port.coords[1] + coordDifferences[1]
-            ]);
-        }
-        if (this.label) {
-            this.label.move([
-                this.label.coords[0] + coordDifferences[0],
-                this.label.coords[1] + coordDifferences[1]
-            ]);
-        }
-        this.getConnections().forEach((c) => c.tighten());
-        this.updateInView();
+        this.setGeometry({
+            coords,
+            width: this.width,
+            height: this.height,
+            // We already moved the sections above - skip changing them in setDimensions.
+            sections: {}
+        });
     }
     /**
      * Change the dimensions of this node in the given direction by the given amount without changing the dimensions of the sections of this node.
@@ -3847,23 +4016,13 @@ class DiagramNode extends DiagramElement {
                 }
                 break;
         }
-        this.coords = [newCoordsX[0], newCoordsY[0]];
-        this.width = newCoordsX[1] - newCoordsX[0];
-        this.height = newCoordsY[1] - newCoordsY[0];
-        for (const port of this.ports) {
-            port.move(translatePoint(port.coords, oldCoordsX, oldCoordsY, newCoordsX, newCoordsY));
-        }
-        if (this.label) {
-            this.label.coords = [
-                this.coords[0] + (this.type.label?.margin || 0),
-                this.coords[1] + (this.type.label?.margin || 0)
-            ];
-            (this.label.width = this.width - (this.type.label?.margin || 0) * 2),
-                (this.label.height = this.height - (this.type.label?.margin || 0) * 2);
-            this.label.updateInView();
-        }
-        // we ignore this.sections, the stretching of a node with sections is handled in the stretchSections method
-        this.updateInView();
+        this.setGeometry({
+            coords: [newCoordsX[0], newCoordsY[0]],
+            width: newCoordsX[1] - newCoordsX[0],
+            height: newCoordsY[1] - newCoordsY[0],
+            // we ignore this.sections, the stretching of a node with sections is handled in the stretchSections method
+            sections: {}
+        });
     }
     /**
      * Change the dimensions of this node and its sections in the given direction by the given amount, with the sections of the given index being stretched.
@@ -3951,6 +4110,59 @@ class DiagramNode extends DiagramElement {
         }
         this.stretch(direction, distance);
     }
+    /**
+     * Returns the current values of all geometric properties (coordinates and dimensions) of this node and its sections.
+     * @public
+     */
+    getGeometry() {
+        const sections = {};
+        for (const section of this.sections) {
+            sections[section.id] = section.getGeometry();
+        }
+        return {
+            coords: [...this.coords],
+            width: this.width,
+            height: this.height,
+            sections
+        };
+    }
+    /**
+     * Sets all geometric properties (coordinates and dimensions) of this node and its sections.
+     * @public
+     */
+    setGeometry(geometry) {
+        const oldCoordsX = [this.coords[0], this.coords[0] + this.width];
+        const oldCoordsY = [this.coords[1], this.coords[1] + this.height];
+        this.coords = [...geometry.coords];
+        this.width = geometry.width;
+        this.height = geometry.height;
+        const newCoordsX = [this.coords[0], this.coords[0] + this.width];
+        const newCoordsY = [this.coords[1], this.coords[1] + this.height];
+        // Update sections, if supplied.
+        for (const section of this.sections) {
+            const sectionGeometry = geometry.sections[section.id];
+            if (sectionGeometry) {
+                section.setGeometry(sectionGeometry);
+            }
+        }
+        // Move ports to match the new coords.
+        for (const port of this.ports) {
+            port.move(translatePoint(port.coords, oldCoordsX, oldCoordsY, newCoordsX, newCoordsY));
+        }
+        // Set label's dimensions as a function of ours.
+        if (this.label) {
+            this.label.coords = [
+                this.coords[0] + (this.type.label?.margin || 0),
+                this.coords[1] + (this.type.label?.margin || 0)
+            ];
+            (this.label.width = this.width - (this.type.label?.margin || 0) * 2),
+                (this.label.height = this.height - (this.type.label?.margin || 0) * 2);
+            this.label.updateInView();
+        }
+        // Update canvas.
+        this.getConnections().forEach((c) => c.tighten());
+        this.updateInView();
+    }
 }
 class DiagramNodeSet extends DiagramEntitySet {
     /**
@@ -3971,7 +4183,7 @@ class DiagramNodeSet extends DiagramEntitySet {
      * @public
      * @param type The type of the node given as either the type itself or the id of the type.
      * @param coords The coordinates of the top left corner of the node in the diagram.
-     * @param id The id of the node. Should be left undefined unless a specific id is required.
+     * @param id The id of the node.
      * @returns The instanced node.
      */
     new(type, coords, id) {
@@ -3998,7 +4210,7 @@ class DiagramNodeSet extends DiagramEntitySet {
                 for (let i = 0; i < nodeType.sectionGrid.sections[j].length; ++i) {
                     this.model.sections.new(node, i, j, [widthAccumulator, heightAccumulator], nodeType.sectionGrid.defaultWidths?.[i] ||
                         DIAGRAM_SECTION_DEFAULT_WIDTH, nodeType.sectionGrid.defaultHeights?.[j] ||
-                        DIAGRAM_SECTION_DEFAULT_HEIGHT);
+                        DIAGRAM_SECTION_DEFAULT_HEIGHT, `${node.id}_${j}_${i}`);
                     widthAccumulator +=
                         (nodeType.sectionGrid.defaultWidths?.[i] ||
                             DIAGRAM_SECTION_DEFAULT_WIDTH) +
@@ -4017,7 +4229,7 @@ class DiagramNodeSet extends DiagramEntitySet {
                 const port = this.model.ports.new(node, [
                     node.coords[0] + portConfig.coords[0],
                     node.coords[1] + portConfig.coords[1]
-                ], portConfig.direction);
+                ], portConfig.direction, `${node.id}_${i}`);
                 if (portConfig.label) {
                     const labelConfiguration = {
                         ...DIAGRAM_FIELD_DEFAULTS,
@@ -4089,7 +4301,6 @@ class DiagramNodeSet extends DiagramEntitySet {
     }
 }
 
-let idTicker$1 = 0;
 /**
  * Default values of the parameters of a diagram port.
  * @see DiagramPort
@@ -4109,16 +4320,10 @@ const DIAGRAM_PORT_DEFAULTS = {
  */
 class DiagramPort extends DiagramElement {
     constructor(model, rootElement, coords, direction, id) {
-        let uniqueId;
-        if (id !== undefined && model.ports.get(id) === undefined) {
-            uniqueId = id;
-        }
-        else {
-            do {
-                uniqueId = `diagram-port-${++idTicker$1}`;
-            } while (model.ports.get(uniqueId) !== undefined);
+        if (model.ports.get(id) !== undefined) {
+            throw new Error(`DiagramPort with id "${id}" already exists`);
         }
-        super(model, uniqueId);
+        super(model, id);
         /**
          * Connections that start at this port.
          * @public
@@ -4133,6 +4338,10 @@ class DiagramPort extends DiagramElement {
         this.coords = coords;
         this.direction = direction;
     }
+    get removed() {
+        return (this.selfRemoved ||
+            (this.rootElement !== undefined && this.rootElement.removed));
+    }
     updateInView() {
         this.model.canvas?.updatePortsInView(this.id);
     }
@@ -4248,7 +4457,6 @@ class DiagramPortSet extends DiagramEntitySet {
     }
 }
 
-let idTicker = 0;
 /**
  * Default values of the parameters of a diagram field.
  * @see DiagramField
@@ -4291,17 +4499,17 @@ class DiagramField extends DiagramElement {
             this.model.canvas?.fitFieldRootInView(this.id);
         }
     }
-    constructor(model, rootElement, coords, width, height, fontSize, fontFamily, color, selectedColor, horizontalAlign, verticalAlign, text, editable, fit, id) {
-        let uniqueId;
-        if (id !== undefined && model.fields.get(id) === undefined) {
-            uniqueId = id;
-        }
-        else {
-            do {
-                uniqueId = `diagram-field-${++idTicker}`;
-            } while (model.fields.get(uniqueId) !== undefined);
+    constructor(model, rootElement, coords, width, height, fontSize, fontFamily, color, selectedColor, horizontalAlign, verticalAlign, text, editable, fit) {
+        const id = `${rootElement?.id}_field`;
+        if (model.fields.get(id) !== undefined) {
+            throw new Error('DiagramField for rootElement already exists');
         }
-        super(model, uniqueId);
+        super(model, id);
+        /**
+         * Collaborative timestamp for text.
+         * @public
+         */
+        this.textTimestamp = null;
         this.rootElement = rootElement;
         this.coords = coords;
         this.width = width;
@@ -4322,6 +4530,10 @@ class DiagramField extends DiagramElement {
             ?.selectCanvasView()
             ?.select(`foreignObject#${this.id}`);
     }
+    get removed() {
+        return (this.selfRemoved ||
+            (this.rootElement !== undefined && this.rootElement.removed));
+    }
     updateInView() {
         this.model.canvas?.updateFieldsInView(this.id);
     }
@@ -4351,8 +4563,8 @@ class DiagramFieldSet extends DiagramEntitySet {
      * Instance a new field and add it to this set. This method is normally called when instancing an element with a field and it is rarely called by itself.
      * @private
      */
-    new(rootElement, coords, fontSize, fontFamily, color, selectedColor, width, height, horizontalAlign, verticalAlign, text, editable, fit, id) {
-        const field = new DiagramField(this.model, rootElement, coords, width, height, fontSize, fontFamily, color, selectedColor, horizontalAlign, verticalAlign, text, editable, fit, id);
+    new(rootElement, coords, fontSize, fontFamily, color, selectedColor, width, height, horizontalAlign, verticalAlign, text, editable, fit) {
+        const field = new DiagramField(this.model, rootElement, coords, width, height, fontSize, fontFamily, color, selectedColor, horizontalAlign, verticalAlign, text, editable, fit);
         super.add(field);
         field.updateInView();
         // add this field to its root element
@@ -4474,7 +4686,10 @@ class CollabEngine {
      */
     freshId() {
         // For more compressible saves, consider using a [dot ID](https://mattweidner.com/2023/09/26/crdt-survey-3.html#unique-ids-dots) instead of a new UUID each time.
-        return v4();
+        // Since IDs are often used in CSS query selectors, ensure that they start with
+        // a letter instead of a number.
+        // See https://stackoverflow.com/a/34777644/16782898
+        return 'id' + v4();
     }
     /**
      * Performs the action - immediately locally, and eventually for remote collaborators.
@@ -4502,13 +4717,33 @@ class CollabEngine {
         }
         // Perform CollabAction.
         switch (message.type) {
-            case 'add': {
+            case 'addNode': {
                 const action = AddNodeCollabAction.deserialize(this.canvas, message);
                 action.do();
                 break;
             }
-            case 'move': {
-                const action = MoveNodeCollabAction.deserialize(this.canvas, message);
+            case 'setGeometry': {
+                const action = SetGeometryCollabAction.deserialize(this.canvas, message);
+                action.do();
+                break;
+            }
+            case 'addConnection': {
+                const action = AddConnectionCollabAction.deserialize(this.canvas, message);
+                action.do();
+                break;
+            }
+            case 'editField': {
+                const action = EditFieldCollabAction.deserialize(this.canvas, message);
+                action.do();
+                break;
+            }
+            case 'updateValues': {
+                const action = UpdateValuesCollabAction.deserialize(this.canvas, message);
+                action.do();
+                break;
+            }
+            case 'setSelfRemoved': {
+                const action = SetSelfRemovedCollabAction.deserialize(this.canvas, message);
                 action.do();
                 break;
             }
@@ -4543,6 +4778,7 @@ const DIAGRAM_PROPERTIES_TEXT = 'Diagram properties';
  */
 const ACTION_QUEUE_SIZE = 25;
 const UNFINISHED_CONNECTION_ID = 'diagram-connection-unfinished';
+const MAX_DISTANCE_TO_PORT = 100;
 class DiagramCanvas {
     static { this.canvasCount = 0; }
     constructor(parentComponent, config) {
@@ -4663,7 +4899,7 @@ class DiagramCanvas {
                             fieldIdsToBeDeleted.push(userSelectionElement.id);
                         }
                     }
-                    const removeAction = new RemoveAction(this.model, nodeIdsToBeDeleted, sectionIdsToBeDeleted, portIdsToBeDeleted, connectionIdsToBeDeleted, fieldIdsToBeDeleted);
+                    const removeAction = new RemoveAction(this, nodeIdsToBeDeleted, sectionIdsToBeDeleted, portIdsToBeDeleted, connectionIdsToBeDeleted, fieldIdsToBeDeleted);
                     removeAction.do();
                     this.actionQueue.add(removeAction);
                 }
@@ -4902,7 +5138,7 @@ class DiagramCanvas {
                 !d.removed) {
                 cursorStyle(CursorStyle.Grabbing);
                 this.draggingFrom = [event.x, event.y];
-                this.currentAction = new MoveNodeAction(this, d.id, d.coords, [0, 0]);
+                this.currentAction = new SetGeometryAction(this, DiagramActions.MoveNode, d.id, d.getGeometry(), d.getGeometry());
             }
             else {
                 cursorStyle(CursorStyle.NotAllowed);
@@ -4924,7 +5160,8 @@ class DiagramCanvas {
                 // prevent drag behavior if mouse hasn't moved
                 if ((this.draggingFrom[0] !== event.x ||
                     this.draggingFrom[1] !== event.y) &&
-                    this.currentAction instanceof MoveNodeAction) {
+                    this.currentAction instanceof SetGeometryAction &&
+                    this.currentAction.intent === DiagramActions.MoveNode) {
                     let newNodeCoords = [
                         event.x - d.width / 2,
                         event.y - d.height / 2
@@ -4932,7 +5169,8 @@ class DiagramCanvas {
                     if (this.snapToGrid) {
                         newNodeCoords = this.getClosestGridPoint(newNodeCoords);
                     }
-                    this.currentAction.to = newNodeCoords;
+                    d.move(newNodeCoords);
+                    this.currentAction.to = d.getGeometry();
                     this.currentAction.do();
                     this.actionQueue.add(this.currentAction);
                     this.currentAction = undefined;
@@ -5017,7 +5255,7 @@ class DiagramCanvas {
                 d.type.resizableX &&
                 !d.removed) {
                 cursorStyle(CursorStyle.EWResize);
-                this.currentAction = new StretchNodeAction(this, d.id, Side.Left, d.width, d.width);
+                this.currentAction = new SetGeometryAction(this, DiagramActions.StretchNode, d.id, d.getGeometry(), d.getGeometry());
             }
             else {
                 cursorStyle(CursorStyle.NotAllowed);
@@ -5035,13 +5273,15 @@ class DiagramCanvas {
             if (this.canUserPerformAction(DiagramActions.StretchNode) &&
                 d.type.resizableX &&
                 !d.removed &&
-                this.currentAction instanceof StretchNodeAction) {
+                this.currentAction instanceof SetGeometryAction &&
+                this.currentAction.intent === DiagramActions.StretchNode) {
                 let pointerCoords = this.getPointerLocationRelativeToCanvas(event);
                 if (this.snapToGrid) {
                     pointerCoords = this.getClosestGridPoint(pointerCoords);
                 }
                 d.stretch(Side.Left, d.coords[0] - pointerCoords[0]);
-                this.currentAction.to = d.width;
+                this.currentAction.to = d.getGeometry();
+                this.currentAction.do();
                 this.actionQueue.add(this.currentAction);
                 this.currentAction = undefined;
             }
@@ -5074,7 +5314,7 @@ class DiagramCanvas {
                 d.type.resizableY &&
                 !d.removed) {
                 cursorStyle(CursorStyle.NSResize);
-                this.currentAction = new StretchNodeAction(this, d.id, Side.Top, d.height, d.height);
+                this.currentAction = new SetGeometryAction(this, DiagramActions.StretchNode, d.id, d.getGeometry(), d.getGeometry());
             }
             else {
                 cursorStyle(CursorStyle.NotAllowed);
@@ -5092,13 +5332,15 @@ class DiagramCanvas {
             if (this.canUserPerformAction(DiagramActions.StretchNode) &&
                 d.type.resizableY &&
                 !d.removed &&
-                this.currentAction instanceof StretchNodeAction) {
+                this.currentAction instanceof SetGeometryAction &&
+                this.currentAction.intent === DiagramActions.StretchNode) {
                 let pointerCoords = this.getPointerLocationRelativeToCanvas(event);
                 if (this.snapToGrid) {
                     pointerCoords = this.getClosestGridPoint(pointerCoords);
                 }
                 d.stretch(Side.Top, d.coords[1] - pointerCoords[1]);
-                this.currentAction.to = d.height;
+                this.currentAction.to = d.getGeometry();
+                this.currentAction.do();
                 this.actionQueue.add(this.currentAction);
                 this.currentAction = undefined;
             }
@@ -5131,7 +5373,7 @@ class DiagramCanvas {
                 d.type.resizableX &&
                 !d.removed) {
                 cursorStyle(CursorStyle.EWResize);
-                this.currentAction = new StretchNodeAction(this, d.id, Side.Right, d.width, d.width);
+                this.currentAction = new SetGeometryAction(this, DiagramActions.StretchNode, d.id, d.getGeometry(), d.getGeometry());
             }
             else {
                 cursorStyle(CursorStyle.NotAllowed);
@@ -5149,13 +5391,15 @@ class DiagramCanvas {
             if (this.canUserPerformAction(DiagramActions.StretchNode) &&
                 d.type.resizableX &&
                 !d.removed &&
-                this.currentAction instanceof StretchNodeAction) {
+                this.currentAction instanceof SetGeometryAction &&
+                this.currentAction.intent === DiagramActions.StretchNode) {
                 let pointerCoords = this.getPointerLocationRelativeToCanvas(event);
                 if (this.snapToGrid) {
                     pointerCoords = this.getClosestGridPoint(pointerCoords);
                 }
                 d.stretch(Side.Right, pointerCoords[0] - (d.coords[0] + d.width));
-                this.currentAction.to = d.width;
+                this.currentAction.to = d.getGeometry();
+                this.currentAction.do();
                 this.actionQueue.add(this.currentAction);
                 this.currentAction = undefined;
             }
@@ -5188,7 +5432,7 @@ class DiagramCanvas {
                 d.type.resizableY &&
                 !d.removed) {
                 cursorStyle(CursorStyle.NSResize);
-                this.currentAction = new StretchNodeAction(this, d.id, Side.Bottom, d.height, d.height);
+                this.currentAction = new SetGeometryAction(this, DiagramActions.StretchNode, d.id, d.getGeometry(), d.getGeometry());
             }
             else {
                 cursorStyle(CursorStyle.NotAllowed);
@@ -5206,13 +5450,15 @@ class DiagramCanvas {
             if (this.canUserPerformAction(DiagramActions.StretchNode) &&
                 d.type.resizableY &&
                 !d.removed &&
-                this.currentAction instanceof StretchNodeAction) {
+                this.currentAction instanceof SetGeometryAction &&
+                this.currentAction.intent === DiagramActions.StretchNode) {
                 let pointerCoords = this.getPointerLocationRelativeToCanvas(event);
                 if (this.snapToGrid) {
                     pointerCoords = this.getClosestGridPoint(pointerCoords);
                 }
                 d.stretch(Side.Bottom, pointerCoords[1] - (d.coords[1] + d.height));
-                this.currentAction.to = d.height;
+                this.currentAction.to = d.getGeometry();
+                this.currentAction.do();
                 this.actionQueue.add(this.currentAction);
                 this.currentAction = undefined;
             }
@@ -5417,7 +5663,7 @@ class DiagramCanvas {
                 const node = d.node;
                 cursorStyle(CursorStyle.Grabbing);
                 this.draggingFrom = [event.x, event.y];
-                this.currentAction = new MoveNodeAction(this, node.id, node.coords, [0, 0]);
+                this.currentAction = new SetGeometryAction(this, DiagramActions.MoveNode, node.id, node.getGeometry(), node.getGeometry());
             }
             else {
                 cursorStyle(CursorStyle.NotAllowed);
@@ -5441,7 +5687,8 @@ class DiagramCanvas {
                 // prevent drag behavior if mouse hasn't moved
                 if ((this.draggingFrom[0] !== event.x ||
                     this.draggingFrom[1] !== event.y) &&
-                    this.currentAction instanceof MoveNodeAction) {
+                    this.currentAction instanceof SetGeometryAction &&
+                    this.currentAction.intent === DiagramActions.MoveNode) {
                     let newNodeCoords = [
                         event.x - node.width / 2,
                         event.y - node.height / 2
@@ -5449,7 +5696,8 @@ class DiagramCanvas {
                     if (this.snapToGrid) {
                         newNodeCoords = this.getClosestGridPoint(newNodeCoords);
                     }
-                    this.currentAction.to = newNodeCoords;
+                    node.move(newNodeCoords);
+                    this.currentAction.to = node.getGeometry();
                     this.currentAction.do();
                     this.actionQueue.add(this.currentAction);
                     this.currentAction = undefined;
@@ -5534,7 +5782,7 @@ class DiagramCanvas {
                 d.node?.type?.resizableX &&
                 !d.removed) {
                 cursorStyle(CursorStyle.EWResize);
-                this.currentAction = new StretchSectionAction(this, d.id, Side.Left, d.width, d.width);
+                this.currentAction = new SetGeometryAction(this, DiagramActions.StretchSection, d.node.id, d.node.getGeometry(), d.node.getGeometry());
             }
             else {
                 cursorStyle(CursorStyle.NotAllowed);
@@ -5552,13 +5800,15 @@ class DiagramCanvas {
             if (this.canUserPerformAction(DiagramActions.StretchSection) &&
                 d.node?.type?.resizableX &&
                 !d.removed &&
-                this.currentAction instanceof StretchSectionAction) {
+                this.currentAction instanceof SetGeometryAction &&
+                this.currentAction.intent === DiagramActions.StretchSection) {
                 let pointerCoords = this.getPointerLocationRelativeToCanvas(event);
                 if (this.snapToGrid) {
                     pointerCoords = this.getClosestGridPoint(pointerCoords);
                 }
                 d.node.stretchSections(Side.Left, d.coords[0] - pointerCoords[0], d.indexXInNode, d.indexYInNode);
-                this.currentAction.to = d.width;
+                this.currentAction.to = d.node.getGeometry();
+                this.currentAction.do();
                 this.actionQueue.add(this.currentAction);
                 this.currentAction = undefined;
             }
@@ -5591,7 +5841,7 @@ class DiagramCanvas {
                 d.node?.type?.resizableY &&
                 !d.removed) {
                 cursorStyle(CursorStyle.NSResize);
-                this.currentAction = new StretchSectionAction(this, d.id, Side.Top, d.height, d.height);
+                this.currentAction = new SetGeometryAction(this, DiagramActions.StretchSection, d.node.id, d.node.getGeometry(), d.node.getGeometry());
             }
             else {
                 cursorStyle(CursorStyle.NotAllowed);
@@ -5609,13 +5859,15 @@ class DiagramCanvas {
             if (this.canUserPerformAction(DiagramActions.StretchSection) &&
                 d.node?.type?.resizableY &&
                 !d.removed &&
-                this.currentAction instanceof StretchSectionAction) {
+                this.currentAction instanceof SetGeometryAction &&
+                this.currentAction.intent === DiagramActions.StretchSection) {
                 let pointerCoords = this.getPointerLocationRelativeToCanvas(event);
                 if (this.snapToGrid) {
                     pointerCoords = this.getClosestGridPoint(pointerCoords);
                 }
                 d.node.stretchSections(Side.Top, d.coords[1] - pointerCoords[1], d.indexXInNode, d.indexYInNode);
-                this.currentAction.to = d.height;
+                this.currentAction.to = d.node.getGeometry();
+                this.currentAction.do();
                 this.actionQueue.add(this.currentAction);
                 this.currentAction = undefined;
             }
@@ -5648,7 +5900,7 @@ class DiagramCanvas {
                 d.node?.type?.resizableX &&
                 !d.removed) {
                 cursorStyle(CursorStyle.EWResize);
-                this.currentAction = new StretchSectionAction(this, d.id, Side.Right, d.width, d.width);
+                this.currentAction = new SetGeometryAction(this, DiagramActions.StretchSection, d.node.id, d.node.getGeometry(), d.node.getGeometry());
             }
             else {
                 cursorStyle(CursorStyle.NotAllowed);
@@ -5666,13 +5918,15 @@ class DiagramCanvas {
             if (this.canUserPerformAction(DiagramActions.StretchSection) &&
                 d.node?.type?.resizableX &&
                 !d.removed &&
-                this.currentAction instanceof StretchSectionAction) {
+                this.currentAction instanceof SetGeometryAction &&
+                this.currentAction.intent === DiagramActions.StretchSection) {
                 let pointerCoords = this.getPointerLocationRelativeToCanvas(event);
                 if (this.snapToGrid) {
                     pointerCoords = this.getClosestGridPoint(pointerCoords);
                 }
                 d.node.stretchSections(Side.Right, pointerCoords[0] - (d.coords[0] + d.width), d.indexXInNode, d.indexYInNode);
-                this.currentAction.to = d.width;
+                this.currentAction.to = d.node.getGeometry();
+                this.currentAction.do();
                 this.actionQueue.add(this.currentAction);
                 this.currentAction = undefined;
             }
@@ -5705,7 +5959,7 @@ class DiagramCanvas {
                 d.node?.type?.resizableY &&
                 !d.removed) {
                 cursorStyle(CursorStyle.NSResize);
-                this.currentAction = new StretchSectionAction(this, d.id, Side.Bottom, d.height, d.height);
+                this.currentAction = new SetGeometryAction(this, DiagramActions.StretchSection, d.node.id, d.node.getGeometry(), d.node.getGeometry());
             }
             else {
                 cursorStyle(CursorStyle.NotAllowed);
@@ -5723,13 +5977,15 @@ class DiagramCanvas {
             if (this.canUserPerformAction(DiagramActions.StretchSection) &&
                 d.node?.type?.resizableY &&
                 !d.removed &&
-                this.currentAction instanceof StretchSectionAction) {
+                this.currentAction instanceof SetGeometryAction &&
+                this.currentAction.intent === DiagramActions.StretchSection) {
                 let pointerCoords = this.getPointerLocationRelativeToCanvas(event);
                 if (this.snapToGrid) {
                     pointerCoords = this.getClosestGridPoint(pointerCoords);
                 }
                 d.node.stretchSections(Side.Bottom, pointerCoords[1] - (d.coords[1] + d.height), d.indexXInNode, d.indexYInNode);
-                this.currentAction.to = d.height;
+                this.currentAction.to = d.node.getGeometry();
+                this.currentAction.do();
                 this.actionQueue.add(this.currentAction);
                 this.currentAction = undefined;
             }
@@ -5933,7 +6189,10 @@ class DiagramCanvas {
         exitSelection.remove();
         enterSelection
             .on(Events.MouseOver, (event, d) => {
-            this.highlight(d);
+            if (!this.unfinishedConnection) {
+                // if there is an unfinished connection, the port will be highlighted automatically if the pointer is close
+                this.highlight(d);
+            }
             if (this.unfinishedConnection) {
                 const canConnectionFinishAtThisPort = (this.unfinishedConnection.type.canStartFromType(this.unfinishedConnection.start?.getNode()?.type?.id || '') &&
                     this.unfinishedConnection.type.canFinishOnType(d.getNode()?.type?.id || '')) ||
@@ -5998,6 +6257,26 @@ class DiagramCanvas {
                         this.unfinishedConnection.endCoords = endCoords;
                     }
                     this.updateConnectionsInView(UNFINISHED_CONNECTION_ID);
+                    // highlight closest target port
+                    if (this.model.ports.length > 0) {
+                        const pointerCoords = this.getPointerLocationRelativeToCanvas(event);
+                        let minDistanceFound = Number.POSITIVE_INFINITY;
+                        let closestPortFound = undefined;
+                        for (const port of this.model.ports) {
+                            const distance = port.distanceTo(pointerCoords);
+                            if (distance < minDistanceFound) {
+                                minDistanceFound = distance;
+                                closestPortFound = port;
+                            }
+                        }
+                        if (closestPortFound &&
+                            minDistanceFound < MAX_DISTANCE_TO_PORT) {
+                            this.highlight(closestPortFound);
+                        }
+                        else {
+                            this.unhighlight();
+                        }
+                    }
                 }
             }
         })
@@ -6186,6 +6465,7 @@ class DiagramCanvas {
                     d.text = text;
                     if (this.currentAction instanceof EditFieldAction) {
                         this.currentAction.to = text;
+                        this.currentAction.do();
                         this.actionQueue.add(this.currentAction);
                         this.currentAction = undefined;
                     }
@@ -6204,7 +6484,7 @@ class DiagramCanvas {
                         : d.rootElement.node;
                     cursorStyle(CursorStyle.Grabbing);
                     this.draggingFrom = [event.x, event.y];
-                    this.currentAction = new MoveNodeAction(this, node.id, node.coords, [0, 0]);
+                    this.currentAction = new SetGeometryAction(this, DiagramActions.MoveNode, node.id, node.getGeometry(), node.getGeometry());
                 }
             }
             else {
@@ -6238,7 +6518,8 @@ class DiagramCanvas {
                     // prevent drag behavior if mouse hasn't moved
                     if ((this.draggingFrom[0] !== event.x ||
                         this.draggingFrom[1] !== event.y) &&
-                        this.currentAction instanceof MoveNodeAction) {
+                        this.currentAction instanceof SetGeometryAction &&
+                        this.currentAction.intent === DiagramActions.MoveNode) {
                         let newNodeCoords = [
                             event.x - node.width / 2,
                             event.y - node.height / 2
@@ -6246,7 +6527,8 @@ class DiagramCanvas {
                         if (this.snapToGrid) {
                             newNodeCoords = this.getClosestGridPoint(newNodeCoords);
                         }
-                        this.currentAction.to = newNodeCoords;
+                        node.move(newNodeCoords);
+                        this.currentAction.to = node.getGeometry();
                         this.currentAction.do();
                         this.actionQueue.add(this.currentAction);
                         this.currentAction = undefined;
@@ -6636,6 +6918,7 @@ class DiagramCanvas {
         }
     }
     finishConnection(port) {
+        this.unhighlight();
         if (this.unfinishedConnection !== undefined) {
             if (this.unfinishedConnection.start !== port) {
                 if (this.unfinishedConnection.type.canStartFromType(this.unfinishedConnection?.start?.getNode()?.type?.id || '') &&
@@ -6767,7 +7050,8 @@ class DiagramCanvas {
                 const from = this.propertyEditorValues;
                 const to = structuredClone(this.propertyEditorSelection?.valueSet.getValues());
                 const [fromDiff, toDiff] = diff(from, to);
-                const currentAction = new UpdateValuesAction(this.model, previousSelectionId, fromDiff, toDiff);
+                const currentAction = new UpdateValuesAction(this, previousSelectionId, fromDiff, toDiff);
+                currentAction.do();
                 this.actionQueue.add(currentAction);
                 this.propertyEditorValues = undefined;
             }
@@ -7006,10 +7290,10 @@ class CanvasProviderService {
     getCanvas() {
         return this._canvas;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CanvasProviderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CanvasProviderService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: CanvasProviderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: CanvasProviderService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CanvasProviderService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: CanvasProviderService, decorators: [{
             type: Injectable
         }] });
 
@@ -7130,10 +7414,10 @@ class DiagramButtonsComponent {
     redo() {
         this.canvas.actionQueue.redo();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: DiagramButtonsComponent, deps: [{ token: CanvasProviderService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: DiagramButtonsComponent, isStandalone: true, selector: "daga-diagram-buttons", inputs: { location: "location", direction: "direction", enableFilter: "enableFilter", enableLayout: "enableLayout", enableUndoRedo: "enableUndoRedo", enableZoom: "enableZoom", zoomRate: "zoomRate" }, viewQueries: [{ propertyName: "collapsableButtons", first: true, predicate: ["collapsableButtons"], descendants: true }], ngImport: i0, template: "<div class=\"diagram-buttons {{ location }} {{ direction }}\">\r\n  <button\r\n    *ngIf=\"enableZoom && canvas.canUserPerformAction(DiagramActions.Zoom)\"\r\n    class=\"zoom-in\"\r\n    (click)=\"zoomIn()\"\r\n  >\r\n    <span class=\"tooltip\">Zoom in</span>\r\n  </button>\r\n  <button\r\n    *ngIf=\"enableZoom && canvas.canUserPerformAction(DiagramActions.Zoom)\"\r\n    class=\"zoom-out\"\r\n    (click)=\"zoomOut()\"\r\n  >\r\n    <span class=\"tooltip\">Zoom out</span>\r\n  </button>\r\n  <div #collapsableButtons class=\"collapsable-buttons collapsed\">\r\n    <button\r\n      *ngIf=\"enableZoom && canvas.canUserPerformAction(DiagramActions.Zoom)\"\r\n      class=\"center\"\r\n      (click)=\"center()\"\r\n    >\r\n      <span class=\"tooltip\">Fit diagram to screen</span>\r\n    </button>\r\n    <button *ngIf=\"enableUndoRedo\" class=\"undo\" (click)=\"undo()\">\r\n      <span class=\"tooltip\">Undo</span>\r\n    </button>\r\n    <button *ngIf=\"enableUndoRedo\" class=\"redo\" (click)=\"redo()\">\r\n      <span class=\"tooltip\">Redo</span>\r\n    </button>\r\n    <button\r\n      *ngIf=\"enableLayout && canvas.layoutFormat\"\r\n      class=\"layout\"\r\n      (click)=\"layout()\"\r\n    >\r\n      <span class=\"tooltip\">Apply layout</span>\r\n    </button>\r\n    <button\r\n      *ngIf=\"enableFilter\"\r\n      class=\"filter\"\r\n      [class]=\"filterOn ? 'on' : 'off'\"\r\n      (click)=\"filter()\"\r\n    >\r\n      <span class=\"tooltip\">Apply filter</span>\r\n    </button>\r\n  </div>\r\n  <button class=\"more-options\" (click)=\"toggleCollapse()\">\r\n    <span *ngIf=\"!collapsed\" class=\"tooltip\">Less options</span>\r\n    <span *ngIf=\"collapsed\" class=\"tooltip\">More options</span>\r\n  </button>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: DiagramButtonsComponent, deps: [{ token: CanvasProviderService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.1", type: DiagramButtonsComponent, isStandalone: true, selector: "daga-diagram-buttons", inputs: { location: "location", direction: "direction", enableFilter: "enableFilter", enableLayout: "enableLayout", enableUndoRedo: "enableUndoRedo", enableZoom: "enableZoom", zoomRate: "zoomRate" }, viewQueries: [{ propertyName: "collapsableButtons", first: true, predicate: ["collapsableButtons"], descendants: true }], ngImport: i0, template: "<div class=\"diagram-buttons {{ location }} {{ direction }}\">\r\n  <button\r\n    *ngIf=\"enableZoom && canvas.canUserPerformAction(DiagramActions.Zoom)\"\r\n    class=\"zoom-in\"\r\n    (click)=\"zoomIn()\"\r\n  >\r\n    <span class=\"tooltip\">Zoom in</span>\r\n  </button>\r\n  <button\r\n    *ngIf=\"enableZoom && canvas.canUserPerformAction(DiagramActions.Zoom)\"\r\n    class=\"zoom-out\"\r\n    (click)=\"zoomOut()\"\r\n  >\r\n    <span class=\"tooltip\">Zoom out</span>\r\n  </button>\r\n  <div #collapsableButtons class=\"collapsable-buttons collapsed\">\r\n    <button\r\n      *ngIf=\"enableZoom && canvas.canUserPerformAction(DiagramActions.Zoom)\"\r\n      class=\"center\"\r\n      (click)=\"center()\"\r\n    >\r\n      <span class=\"tooltip\">Fit diagram to screen</span>\r\n    </button>\r\n    <button *ngIf=\"enableUndoRedo\" class=\"undo\" (click)=\"undo()\">\r\n      <span class=\"tooltip\">Undo</span>\r\n    </button>\r\n    <button *ngIf=\"enableUndoRedo\" class=\"redo\" (click)=\"redo()\">\r\n      <span class=\"tooltip\">Redo</span>\r\n    </button>\r\n    <button\r\n      *ngIf=\"enableLayout && canvas.layoutFormat\"\r\n      class=\"layout\"\r\n      (click)=\"layout()\"\r\n    >\r\n      <span class=\"tooltip\">Apply layout</span>\r\n    </button>\r\n    <button\r\n      *ngIf=\"enableFilter\"\r\n      class=\"filter\"\r\n      [class]=\"filterOn ? 'on' : 'off'\"\r\n      (click)=\"filter()\"\r\n    >\r\n      <span class=\"tooltip\">Apply filter</span>\r\n    </button>\r\n  </div>\r\n  <button class=\"more-options\" (click)=\"toggleCollapse()\">\r\n    <span *ngIf=\"!collapsed\" class=\"tooltip\">Less options</span>\r\n    <span *ngIf=\"collapsed\" class=\"tooltip\">More options</span>\r\n  </button>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: DiagramButtonsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: DiagramButtonsComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'daga-diagram-buttons', imports: [CommonModule], template: "<div class=\"diagram-buttons {{ location }} {{ direction }}\">\r\n  <button\r\n    *ngIf=\"enableZoom && canvas.canUserPerformAction(DiagramActions.Zoom)\"\r\n    class=\"zoom-in\"\r\n    (click)=\"zoomIn()\"\r\n  >\r\n    <span class=\"tooltip\">Zoom in</span>\r\n  </button>\r\n  <button\r\n    *ngIf=\"enableZoom && canvas.canUserPerformAction(DiagramActions.Zoom)\"\r\n    class=\"zoom-out\"\r\n    (click)=\"zoomOut()\"\r\n  >\r\n    <span class=\"tooltip\">Zoom out</span>\r\n  </button>\r\n  <div #collapsableButtons class=\"collapsable-buttons collapsed\">\r\n    <button\r\n      *ngIf=\"enableZoom && canvas.canUserPerformAction(DiagramActions.Zoom)\"\r\n      class=\"center\"\r\n      (click)=\"center()\"\r\n    >\r\n      <span class=\"tooltip\">Fit diagram to screen</span>\r\n    </button>\r\n    <button *ngIf=\"enableUndoRedo\" class=\"undo\" (click)=\"undo()\">\r\n      <span class=\"tooltip\">Undo</span>\r\n    </button>\r\n    <button *ngIf=\"enableUndoRedo\" class=\"redo\" (click)=\"redo()\">\r\n      <span class=\"tooltip\">Redo</span>\r\n    </button>\r\n    <button\r\n      *ngIf=\"enableLayout && canvas.layoutFormat\"\r\n      class=\"layout\"\r\n      (click)=\"layout()\"\r\n    >\r\n      <span class=\"tooltip\">Apply layout</span>\r\n    </button>\r\n    <button\r\n      *ngIf=\"enableFilter\"\r\n      class=\"filter\"\r\n      [class]=\"filterOn ? 'on' : 'off'\"\r\n      (click)=\"filter()\"\r\n    >\r\n      <span class=\"tooltip\">Apply filter</span>\r\n    </button>\r\n  </div>\r\n  <button class=\"more-options\" (click)=\"toggleCollapse()\">\r\n    <span *ngIf=\"!collapsed\" class=\"tooltip\">Less options</span>\r\n    <span *ngIf=\"collapsed\" class=\"tooltip\">More options</span>\r\n  </button>\r\n</div>\r\n" }]
         }], ctorParameters: () => [{ type: CanvasProviderService }], propDecorators: { collapsableButtons: [{
@@ -7198,10 +7482,10 @@ class ErrorsComponent {
         }
         // TODO: IF ERROR IS IN AN ELEMENT BUT NOT IN A SPECIFIC PROPERTY, WE COULD HIGHLIGHT THE ELEMENT
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ErrorsComponent, deps: [{ token: CanvasProviderService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: ErrorsComponent, isStandalone: true, selector: "daga-errors", viewQueries: [{ propertyName: "errorsContainer", first: true, predicate: ["errors"], descendants: true }], ngImport: i0, template: "<div #errorsContainer class=\"errors\">\n  <div\n    *ngIf=\"errors.length === 0\"\n    class=\"errors-summary no-errors prevent-user-select\"\n  >\n    <span>No errors found</span>\n  </div>\n  <div\n    *ngIf=\"errors.length > 0\"\n    class=\"errors-summary with-errors prevent-user-select\"\n  >\n    <span>{{ errors.length }} errors found</span>\n    <div class=\"collapse-button-container\">\n      <daga-collapse-button\n        [collapsableSelector]=\"errorsContainer\"\n        [collapsableAdditionalSelector]=\"'.error-panel'\"\n        [direction]=\"Side.Top\"\n        [rule]=\"'display'\"\n        [collapsedValue]=\"'none'\"\n        [visibleValue]=\"'block'\"\n      />\n    </div>\n  </div>\n  <div *ngIf=\"errors.length > 0\" class=\"error-panel\">\n    <ol>\n      <li\n        *ngFor=\"let error of errors; index as i\"\n        (click)=\"showError(error)\"\n        [innerHTML]=\"error.message\"\n      ></li>\n    </ol>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CollapseButtonComponent, selector: "daga-collapse-button", inputs: ["collapsableSelector", "collapsableAdditionalSelector", "collapsed", "disabled", "direction", "rule", "collapsedValue", "visibleValue"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: ErrorsComponent, deps: [{ token: CanvasProviderService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.1", type: ErrorsComponent, isStandalone: true, selector: "daga-errors", viewQueries: [{ propertyName: "errorsContainer", first: true, predicate: ["errors"], descendants: true }], ngImport: i0, template: "<div #errorsContainer class=\"errors\">\n  <div\n    *ngIf=\"errors.length === 0\"\n    class=\"errors-summary no-errors prevent-user-select\"\n  >\n    <span>No errors found</span>\n  </div>\n  <div\n    *ngIf=\"errors.length > 0\"\n    class=\"errors-summary with-errors prevent-user-select\"\n  >\n    <span>{{ errors.length }} errors found</span>\n    <div class=\"collapse-button-container\">\n      <daga-collapse-button\n        [collapsableSelector]=\"errorsContainer\"\n        [collapsableAdditionalSelector]=\"'.error-panel'\"\n        [direction]=\"Side.Top\"\n        [rule]=\"'display'\"\n        [collapsedValue]=\"'none'\"\n        [visibleValue]=\"'block'\"\n      />\n    </div>\n  </div>\n  <div *ngIf=\"errors.length > 0\" class=\"error-panel\">\n    <ol>\n      <li\n        *ngFor=\"let error of errors; index as i\"\n        (click)=\"showError(error)\"\n        [innerHTML]=\"error.message\"\n      ></li>\n    </ol>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CollapseButtonComponent, selector: "daga-collapse-button", inputs: ["collapsableSelector", "collapsableAdditionalSelector", "collapsed", "disabled", "direction", "rule", "collapsedValue", "visibleValue"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ErrorsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: ErrorsComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'daga-errors', imports: [CommonModule, CollapseButtonComponent], template: "<div #errorsContainer class=\"errors\">\n  <div\n    *ngIf=\"errors.length === 0\"\n    class=\"errors-summary no-errors prevent-user-select\"\n  >\n    <span>No errors found</span>\n  </div>\n  <div\n    *ngIf=\"errors.length > 0\"\n    class=\"errors-summary with-errors prevent-user-select\"\n  >\n    <span>{{ errors.length }} errors found</span>\n    <div class=\"collapse-button-container\">\n      <daga-collapse-button\n        [collapsableSelector]=\"errorsContainer\"\n        [collapsableAdditionalSelector]=\"'.error-panel'\"\n        [direction]=\"Side.Top\"\n        [rule]=\"'display'\"\n        [collapsedValue]=\"'none'\"\n        [visibleValue]=\"'block'\"\n      />\n    </div>\n  </div>\n  <div *ngIf=\"errors.length > 0\" class=\"error-panel\">\n    <ol>\n      <li\n        *ngFor=\"let error of errors; index as i\"\n        (click)=\"showError(error)\"\n        [innerHTML]=\"error.message\"\n      ></li>\n    </ol>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: CanvasProviderService }], propDecorators: { errorsContainer: [{
@@ -7349,7 +7633,7 @@ class PaletteComponent {
         })
             .on(DragEvents.Start, (event) => {
             if (this.canvas.canUserPerformAction(DiagramActions.AddNode)) {
-                d3.select('body').style('cursor', 'grabbing');
+                cursorStyle(CursorStyle.Grabbing);
                 const pointerCoords = this.canvas.getPointerLocationRelativeToScreen(event);
                 if (pointerCoords.length < 2 ||
                     isNaN(pointerCoords[0]) ||
@@ -7371,7 +7655,7 @@ class PaletteComponent {
             .on(DragEvents.End, (event) => {
             if (this.canvas.canUserPerformAction(DiagramActions.AddNode)) {
                 // take node back to its original position
-                d3.select('body').style('cursor', 'auto');
+                cursorStyle(CursorStyle.Auto);
                 thisComponent
                     .style('position', 'relative')
                     .style('left', 0)
@@ -7587,10 +7871,10 @@ class PaletteComponent {
                 .text(templateConfig.label);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: PaletteComponent, deps: [{ token: CanvasProviderService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: PaletteComponent, isStandalone: true, selector: "daga-palette", inputs: { palettes: "palettes", currentPalette: "currentPalette", currentCategory: "currentCategory", location: "location", direction: "direction", width: "width" }, viewQueries: [{ propertyName: "panel", first: true, predicate: ["panel"], descendants: true }], ngImport: i0, template: "<div #panel class=\"panel {{ location }} {{ direction }}\">\n  <daga-collapse-button\n    #collapseButton\n    [direction]=\"direction\"\n    [collapsableSelector]=\"panel\"\n    collapsableAdditionalSelector=\".panel-content\"\n    rule=\"display\"\n    collapsedValue=\"none\"\n    visibleValue=\"block\"\n  />\n  <div class=\"panel-content\">\n    <div *ngIf=\"palettes.length > 1\" class=\"panel-tabs\">\n      <div\n        *ngFor=\"let palette of palettes\"\n        class=\"panel-tab\"\n        [class]=\"palette === currentPalette ? 'current-tab' : ''\"\n        (click)=\"switchPalette(palette)\"\n      >\n        {{ palette.name }}\n      </div>\n    </div>\n    <div class=\"palette-view\"></div>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CollapseButtonComponent, selector: "daga-collapse-button", inputs: ["collapsableSelector", "collapsableAdditionalSelector", "collapsed", "disabled", "direction", "rule", "collapsedValue", "visibleValue"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: PaletteComponent, deps: [{ token: CanvasProviderService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.1", type: PaletteComponent, isStandalone: true, selector: "daga-palette", inputs: { palettes: "palettes", currentPalette: "currentPalette", currentCategory: "currentCategory", location: "location", direction: "direction", width: "width" }, viewQueries: [{ propertyName: "panel", first: true, predicate: ["panel"], descendants: true }], ngImport: i0, template: "<div #panel class=\"panel {{ location }} {{ direction }}\">\n  <daga-collapse-button\n    #collapseButton\n    [direction]=\"direction\"\n    [collapsableSelector]=\"panel\"\n    collapsableAdditionalSelector=\".panel-content\"\n    rule=\"display\"\n    collapsedValue=\"none\"\n    visibleValue=\"block\"\n  />\n  <div class=\"panel-content\">\n    <div *ngIf=\"palettes.length > 1\" class=\"panel-tabs\">\n      <div\n        *ngFor=\"let palette of palettes\"\n        class=\"panel-tab\"\n        [class]=\"palette === currentPalette ? 'current-tab' : ''\"\n        (click)=\"switchPalette(palette)\"\n      >\n        {{ palette.name }}\n      </div>\n    </div>\n    <div class=\"palette-view\"></div>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CollapseButtonComponent, selector: "daga-collapse-button", inputs: ["collapsableSelector", "collapsableAdditionalSelector", "collapsed", "disabled", "direction", "rule", "collapsedValue", "visibleValue"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: PaletteComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: PaletteComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'daga-palette', imports: [CommonModule, CollapseButtonComponent], template: "<div #panel class=\"panel {{ location }} {{ direction }}\">\n  <daga-collapse-button\n    #collapseButton\n    [direction]=\"direction\"\n    [collapsableSelector]=\"panel\"\n    collapsableAdditionalSelector=\".panel-content\"\n    rule=\"display\"\n    collapsedValue=\"none\"\n    visibleValue=\"block\"\n  />\n  <div class=\"panel-content\">\n    <div *ngIf=\"palettes.length > 1\" class=\"panel-tabs\">\n      <div\n        *ngFor=\"let palette of palettes\"\n        class=\"panel-tab\"\n        [class]=\"palette === currentPalette ? 'current-tab' : ''\"\n        (click)=\"switchPalette(palette)\"\n      >\n        {{ palette.name }}\n      </div>\n    </div>\n    <div class=\"palette-view\"></div>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: CanvasProviderService }], propDecorators: { panel: [{
@@ -7610,6 +7894,214 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
                 type: Input
             }] } });
 
+/**
+ * Editor of the settings of a property editor, such as what properties are displayed and hidden and in what order.
+ * @see PropertyEditor
+ * @see ValueSet
+ * @private
+ */
+class PropertySettingsComponent {
+    get canvas() {
+        return this.canvasProvider.getCanvas();
+    }
+    get valueSet() {
+        return this._valueSet;
+    }
+    set valueSet(valueSet) {
+        if (this._valueSet !== valueSet) {
+            this._valueSet = valueSet;
+            // force value change detection
+            this.cdr.detectChanges();
+        }
+    }
+    constructor(element, cdr, canvasProvider) {
+        this.element = element;
+        this.cdr = cdr;
+        this.canvasProvider = canvasProvider;
+        /** How many property-settings elements are parents of this property-settings element. @private */
+        this.depth = 0;
+        // Attributes for the template
+        this.Type = Type;
+        this.getStyleClassName = getStyleClassName;
+        this.asString = asString;
+    }
+    ngAfterViewInit() {
+        this.addListeners();
+    }
+    addListeners() {
+        for (const property of this.valueSet?.displayedProperties || []) {
+            let propertyElementWidth = 0;
+            let propertyElementHeight = 0;
+            let closestDropbarIndex = 0;
+            const propertyElement = d3
+                .select(this.element.nativeElement)
+                .select(`.property.${getStyleClassName(property.name)}.depth-${this.depth}`);
+            propertyElement.select('button.move-button').call(d3
+                .drag()
+                .on(DragEvents.Start, (event) => {
+                cursorStyle(CursorStyle.Grabbing);
+                const pointerCoords = this.canvas.getPointerLocationRelativeToScreen(event);
+                if (pointerCoords.length < 2 ||
+                    isNaN(pointerCoords[0]) ||
+                    isNaN(pointerCoords[1])) {
+                    return;
+                }
+                const boundingRect = propertyElement
+                    .node()
+                    ?.getBoundingClientRect();
+                propertyElementWidth = boundingRect?.width || 0;
+                propertyElementHeight = boundingRect?.height || 0;
+                propertyElement
+                    .style('position', 'fixed')
+                    .style('left', `${pointerCoords[0] - propertyElementWidth / 2}px`)
+                    .style('top', `${pointerCoords[1] - propertyElementHeight / 2}px`)
+                    .style('width', `${propertyElementWidth}px`)
+                    .style('height', `${propertyElementHeight}px`)
+                    .style('z-index', 1);
+            })
+                .on(DragEvents.Drag, (event) => {
+                cursorStyle(CursorStyle.Grabbing);
+                const pointerCoords = this.canvas.getPointerLocationRelativeToScreen(event);
+                if (pointerCoords.length < 2 ||
+                    isNaN(pointerCoords[0]) ||
+                    isNaN(pointerCoords[1])) {
+                    return;
+                }
+                propertyElement
+                    .style('position', 'fixed')
+                    .style('left', `${pointerCoords[0] - propertyElementWidth / 2}px`)
+                    .style('top', `${pointerCoords[1] - propertyElementHeight / 2}px`)
+                    .style('width', `${propertyElementWidth}px`)
+                    .style('height', `${propertyElementHeight}px`)
+                    .style('z-index', 1);
+                d3.select(this.element.nativeElement)
+                    .select(`.dropbar.index-${closestDropbarIndex}.depth-${this.depth}`)
+                    .style('visibility', 'hidden')
+                    .style('height', 0);
+                closestDropbarIndex = this.getClosestDropbarIndex(pointerCoords);
+                d3.select(this.element.nativeElement)
+                    .select(`.dropbar.index-${closestDropbarIndex}.depth-${this.depth}`)
+                    .style('visibility', 'visible')
+                    .style('height', '0.25rem');
+            })
+                .on(DragEvents.End, (event) => {
+                cursorStyle(CursorStyle.Auto);
+                propertyElement
+                    .style('position', 'relative')
+                    .style('left', 0)
+                    .style('top', 0)
+                    .style('z-index', 0)
+                    .style('width', 'unset')
+                    .style('height', 'unset');
+                d3.select(this.element.nativeElement)
+                    .select(`.dropbar.index-${closestDropbarIndex}.depth-${this.depth}`)
+                    .style('visibility', 'hidden')
+                    .style('height', 0);
+                const pointerCoords = this.canvas.getPointerLocationRelativeToScreen(event);
+                if (pointerCoords.length < 2 ||
+                    isNaN(pointerCoords[0]) ||
+                    isNaN(pointerCoords[1])) {
+                    return;
+                }
+                closestDropbarIndex = this.getClosestDropbarIndex(pointerCoords);
+                this.valueSet?.displayedProperties?.splice(this.valueSet.displayedProperties.indexOf(property), 1);
+                this.valueSet?.displayedProperties?.splice(closestDropbarIndex, 0, property);
+            }));
+        }
+    }
+    getClosestDropbarIndex(pointerCoords) {
+        const propertyList = this.valueSet?.propertySet.propertyList || [];
+        // note that this is <= and not < as we are counting the index after the last element as well
+        const coordsList = [];
+        for (let i = 0; i <= propertyList.length; ++i) {
+            const boundingRect = d3
+                .select(this.element.nativeElement)
+                .select(`.dropbar.index-${i}.depth-${this.depth}`)
+                .node()
+                ?.getBoundingClientRect();
+            if (boundingRect) {
+                coordsList.push([
+                    boundingRect.x + boundingRect.width / 2,
+                    boundingRect.y + boundingRect.height / 2
+                ]);
+            }
+        }
+        if (coordsList.length > 0) {
+            const distanceToDropbars = coordsList.map((p) => distanceBetweenPoints(pointerCoords, p));
+            const indexOfClosestDropbar = distanceToDropbars.indexOf(Math.min(...distanceToDropbars));
+            return indexOfClosestDropbar;
+        }
+        return 0;
+    }
+    displayProperty(property) {
+        if (this.valueSet === undefined) {
+            return;
+        }
+        let selectedProperty;
+        if (property instanceof Property) {
+            selectedProperty = property;
+        }
+        else if (property instanceof Event) {
+            selectedProperty = this.valueSet?.propertySet.getProperty(property.target?.value || '');
+        }
+        else {
+            selectedProperty = this.valueSet?.propertySet.getProperty(property || '');
+        }
+        if (selectedProperty) {
+            this.valueSet.displayProperty(selectedProperty);
+        }
+        this.cdr.detectChanges();
+        this.addListeners();
+    }
+    hideProperty(property) {
+        if (this.valueSet === undefined) {
+            return;
+        }
+        let selectedProperty;
+        if (property instanceof Property) {
+            selectedProperty = property;
+        }
+        else if (property instanceof Event) {
+            selectedProperty = this.valueSet?.propertySet.getProperty(property.target?.value || '');
+        }
+        else {
+            selectedProperty = this.valueSet?.propertySet.getProperty(property || '');
+        }
+        if (selectedProperty) {
+            this.valueSet.hideProperty(selectedProperty);
+        }
+        this.cdr.detectChanges();
+        this.addListeners();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: PropertySettingsComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: CanvasProviderService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.1", type: PropertySettingsComponent, isStandalone: true, selector: "daga-property-settings", inputs: { valueSet: "valueSet", depth: "depth" }, ngImport: i0, template: "<div class=\"dropbar\" [class]=\"'index-' + 0 + ' depth-' + depth\"></div>\r\n<div\r\n  *ngFor=\"let property of valueSet?.displayedProperties || []; index as i\"\r\n  class=\"property-and-dropbar\"\r\n  [class]=\"getStyleClassName(property.name) + ' depth-' + depth\"\r\n>\r\n  <div\r\n    class=\"property\"\r\n    [class]=\"getStyleClassName(property.name) + ' depth-' + depth\"\r\n  >\r\n    <div class=\"property-name\">\r\n      <span>{{ property.name }}</span>\r\n      <div class=\"buttons\">\r\n        <button class=\"property-button move-button\">\r\n          <div class=\"icon move-icon\"></div>\r\n        </button>\r\n        <button\r\n          class=\"property-button hide-button\"\r\n          (click)=\"hideProperty(property.name)\"\r\n        >\r\n          <div class=\"icon hide-icon\"></div>\r\n        </button>\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"property.type !== Type.Object\" class=\"property-value\">\r\n      {{ asString(valueSet?.getValue(property.name)) }}\r\n    </div>\r\n    <div *ngIf=\"property.type === Type.Object\">\r\n      <daga-property-settings\r\n        [valueSet]=\"valueSet?.getSubValueSet(property.name)\"\r\n        [depth]=\"depth + 1\"\r\n      ></daga-property-settings>\r\n    </div>\r\n  </div>\r\n  <div class=\"dropbar\" [class]=\"'index-' + (i + 1) + ' depth-' + depth\"></div>\r\n</div>\r\n<div class=\"property\" *ngIf=\"valueSet && valueSet.hiddenProperties.length > 0\">\r\n  <p class=\"property-name\">Add property:</p>\r\n  <select (change)=\"displayProperty($event)\">\r\n    <option value=\"\">Select a property</option>\r\n    <option\r\n      *ngFor=\"let property of valueSet?.hiddenProperties || []\"\r\n      [value]=\"property.name\"\r\n    >\r\n      {{ property.name }}\r\n    </option>\r\n  </select>\r\n</div>\r\n", dependencies: [{ kind: "component", type: PropertySettingsComponent, selector: "daga-property-settings", inputs: ["valueSet", "depth"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: PropertySettingsComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'daga-property-settings', imports: [CommonModule, FormsModule], template: "<div class=\"dropbar\" [class]=\"'index-' + 0 + ' depth-' + depth\"></div>\r\n<div\r\n  *ngFor=\"let property of valueSet?.displayedProperties || []; index as i\"\r\n  class=\"property-and-dropbar\"\r\n  [class]=\"getStyleClassName(property.name) + ' depth-' + depth\"\r\n>\r\n  <div\r\n    class=\"property\"\r\n    [class]=\"getStyleClassName(property.name) + ' depth-' + depth\"\r\n  >\r\n    <div class=\"property-name\">\r\n      <span>{{ property.name }}</span>\r\n      <div class=\"buttons\">\r\n        <button class=\"property-button move-button\">\r\n          <div class=\"icon move-icon\"></div>\r\n        </button>\r\n        <button\r\n          class=\"property-button hide-button\"\r\n          (click)=\"hideProperty(property.name)\"\r\n        >\r\n          <div class=\"icon hide-icon\"></div>\r\n        </button>\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"property.type !== Type.Object\" class=\"property-value\">\r\n      {{ asString(valueSet?.getValue(property.name)) }}\r\n    </div>\r\n    <div *ngIf=\"property.type === Type.Object\">\r\n      <daga-property-settings\r\n        [valueSet]=\"valueSet?.getSubValueSet(property.name)\"\r\n        [depth]=\"depth + 1\"\r\n      ></daga-property-settings>\r\n    </div>\r\n  </div>\r\n  <div class=\"dropbar\" [class]=\"'index-' + (i + 1) + ' depth-' + depth\"></div>\r\n</div>\r\n<div class=\"property\" *ngIf=\"valueSet && valueSet.hiddenProperties.length > 0\">\r\n  <p class=\"property-name\">Add property:</p>\r\n  <select (change)=\"displayProperty($event)\">\r\n    <option value=\"\">Select a property</option>\r\n    <option\r\n      *ngFor=\"let property of valueSet?.hiddenProperties || []\"\r\n      [value]=\"property.name\"\r\n    >\r\n      {{ property.name }}\r\n    </option>\r\n  </select>\r\n</div>\r\n" }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: CanvasProviderService }], propDecorators: { valueSet: [{
+                type: Input
+            }], depth: [{
+                type: Input
+            }] } });
+const asString = (value) => {
+    if (Array.isArray(value)) {
+        return value.join(', ');
+    }
+    if (isObject(value)) {
+        return Object.entries(value)
+            .map((pair) => pair.map((p) => JSON.stringify(p)).join(': '))
+            .join(', ');
+    }
+    if (value instanceof Date) {
+        return value.toLocaleString();
+    }
+    if (value === undefined || value === null) {
+        return '';
+    }
+    return '' + value;
+};
+
 const LOST_FOCUS_TIME_WINDOW_MS = 200;
 /**
  * Combobox with autocomplete.
@@ -7619,7 +8111,7 @@ const LOST_FOCUS_TIME_WINDOW_MS = 200;
  */
 class AutocompleteComponent {
     set value(value) {
-        if (value === this._value) {
+        if (equals(value, this._value)) {
             return;
         }
         this._value = value;
@@ -7637,11 +8129,11 @@ class AutocompleteComponent {
     }
     getLabelOfValue(value) {
         for (const option of this.options) {
-            if (option.key === value) {
+            if (equals(option.key, value)) {
                 return option.label;
             }
         }
-        return `${value}`;
+        return asString(value);
     }
     onKeyup(event) {
         if (!this.disabled) {
@@ -7771,12 +8263,12 @@ class AutocompleteComponent {
             this.valueChange.emit(option.key);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AutocompleteComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: AutocompleteComponent, isStandalone: true, selector: "daga-autocomplete", inputs: { value: "value", valueInput: "valueInput", options: "options", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "mainElement", first: true, predicate: ["main"], descendants: true, static: true }], ngImport: i0, template: "<div\r\n  #main\r\n  class=\"autocomplete\"\r\n  [class]=\"showOptions ? 'showing-options' : ''\"\r\n  (blur)=\"closeOptions()\"\r\n>\r\n  <div class=\"autocomplete-input\">\r\n    <input\r\n      [(ngModel)]=\"valueInput\"\r\n      [disabled]=\"disabled\"\r\n      (keyup)=\"onKeyup($event)\"\r\n      (focus)=\"openOptions()\"\r\n      (blur)=\"onLostFocus()\"\r\n    />\r\n    <button\r\n      *ngIf=\"valueInput !== ''\"\r\n      class=\"clear\"\r\n      (click)=\"clearInput()\"\r\n    ></button>\r\n  </div>\r\n  <div class=\"autocomplete-options\">\r\n    <ul class=\"autocomplete-option-list\">\r\n      <li\r\n        *ngFor=\"let option of currentOptions; let index = index\"\r\n        class=\"autocomplete-option\"\r\n        [class]=\"index === focusIndex ? 'focused' : ''\"\r\n        (mousemove)=\"focusOnOption(index)\"\r\n        (click)=\"complete(option)\"\r\n      >\r\n        <span>{{ currentLabelStarts[index] }}</span>\r\n        <span class=\"match\">{{ currentLabelMatches[index] }}</span>\r\n        <span>{{ currentLabelEnds[index] }}</span>\r\n      </li>\r\n    </ul>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: AutocompleteComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.1", type: AutocompleteComponent, isStandalone: true, selector: "daga-autocomplete", inputs: { value: "value", valueInput: "valueInput", options: "options", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "mainElement", first: true, predicate: ["main"], descendants: true, static: true }], ngImport: i0, template: "<div\r\n  #main\r\n  class=\"autocomplete\"\r\n  [class]=\"showOptions ? 'showing-options' : ''\"\r\n  (blur)=\"closeOptions()\"\r\n>\r\n  <div class=\"autocomplete-input\">\r\n    <input\r\n      [(ngModel)]=\"valueInput\"\r\n      [disabled]=\"disabled\"\r\n      (keyup)=\"onKeyup($event)\"\r\n      (focus)=\"openOptions()\"\r\n      (blur)=\"onLostFocus()\"\r\n    />\r\n    <button\r\n      *ngIf=\"valueInput !== ''\"\r\n      class=\"clear\"\r\n      (click)=\"clearInput()\"\r\n    ></button>\r\n  </div>\r\n  <div class=\"autocomplete-options\">\r\n    <ul class=\"autocomplete-option-list\">\r\n      <li\r\n        *ngIf=\"(currentOptions?.length || 0) === 0\"\r\n        class=\"autocomplete-option no-options\"\r\n      >\r\n        (No options)\r\n      </li>\r\n      <li\r\n        *ngFor=\"let option of currentOptions; let index = index\"\r\n        class=\"autocomplete-option\"\r\n        [class]=\"index === focusIndex ? 'focused' : ''\"\r\n        (mousemove)=\"focusOnOption(index)\"\r\n        (click)=\"complete(option)\"\r\n      >\r\n        <span>{{ currentLabelStarts[index] }}</span>\r\n        <span class=\"match\">{{ currentLabelMatches[index] }}</span>\r\n        <span>{{ currentLabelEnds[index] }}</span>\r\n      </li>\r\n    </ul>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AutocompleteComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: AutocompleteComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'daga-autocomplete', imports: [CommonModule, FormsModule], template: "<div\r\n  #main\r\n  class=\"autocomplete\"\r\n  [class]=\"showOptions ? 'showing-options' : ''\"\r\n  (blur)=\"closeOptions()\"\r\n>\r\n  <div class=\"autocomplete-input\">\r\n    <input\r\n      [(ngModel)]=\"valueInput\"\r\n      [disabled]=\"disabled\"\r\n      (keyup)=\"onKeyup($event)\"\r\n      (focus)=\"openOptions()\"\r\n      (blur)=\"onLostFocus()\"\r\n    />\r\n    <button\r\n      *ngIf=\"valueInput !== ''\"\r\n      class=\"clear\"\r\n      (click)=\"clearInput()\"\r\n    ></button>\r\n  </div>\r\n  <div class=\"autocomplete-options\">\r\n    <ul class=\"autocomplete-option-list\">\r\n      <li\r\n        *ngFor=\"let option of currentOptions; let index = index\"\r\n        class=\"autocomplete-option\"\r\n        [class]=\"index === focusIndex ? 'focused' : ''\"\r\n        (mousemove)=\"focusOnOption(index)\"\r\n        (click)=\"complete(option)\"\r\n      >\r\n        <span>{{ currentLabelStarts[index] }}</span>\r\n        <span class=\"match\">{{ currentLabelMatches[index] }}</span>\r\n        <span>{{ currentLabelEnds[index] }}</span>\r\n      </li>\r\n    </ul>\r\n  </div>\r\n</div>\r\n" }]
+            args: [{ standalone: true, selector: 'daga-autocomplete', imports: [CommonModule, FormsModule], template: "<div\r\n  #main\r\n  class=\"autocomplete\"\r\n  [class]=\"showOptions ? 'showing-options' : ''\"\r\n  (blur)=\"closeOptions()\"\r\n>\r\n  <div class=\"autocomplete-input\">\r\n    <input\r\n      [(ngModel)]=\"valueInput\"\r\n      [disabled]=\"disabled\"\r\n      (keyup)=\"onKeyup($event)\"\r\n      (focus)=\"openOptions()\"\r\n      (blur)=\"onLostFocus()\"\r\n    />\r\n    <button\r\n      *ngIf=\"valueInput !== ''\"\r\n      class=\"clear\"\r\n      (click)=\"clearInput()\"\r\n    ></button>\r\n  </div>\r\n  <div class=\"autocomplete-options\">\r\n    <ul class=\"autocomplete-option-list\">\r\n      <li\r\n        *ngIf=\"(currentOptions?.length || 0) === 0\"\r\n        class=\"autocomplete-option no-options\"\r\n      >\r\n        (No options)\r\n      </li>\r\n      <li\r\n        *ngFor=\"let option of currentOptions; let index = index\"\r\n        class=\"autocomplete-option\"\r\n        [class]=\"index === focusIndex ? 'focused' : ''\"\r\n        (mousemove)=\"focusOnOption(index)\"\r\n        (click)=\"complete(option)\"\r\n      >\r\n        <span>{{ currentLabelStarts[index] }}</span>\r\n        <span class=\"match\">{{ currentLabelMatches[index] }}</span>\r\n        <span>{{ currentLabelEnds[index] }}</span>\r\n      </li>\r\n    </ul>\r\n  </div>\r\n</div>\r\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { mainElement: [{
                 type: ViewChild,
                 args: ['main', { static: true }]
@@ -7817,6 +8309,7 @@ class OptionListEditorComponent {
         if (initialAndEmpty) {
             this.valueChange.emit(this._value);
         }
+        this.updateOptionsNotPresentInValue();
     }
     get value() {
         return this._value;
@@ -7827,6 +8320,8 @@ class OptionListEditorComponent {
         this.labelsOfValue = [];
         this.options = [];
         this.valueInput = undefined;
+        this.allowRepeats = true;
+        this.optionsNotPresentInValue = [];
         this.disabled = false;
         this.valueChange = new EventEmitter();
     }
@@ -7838,43 +8333,69 @@ class OptionListEditorComponent {
         }
         return `${value}`;
     }
+    hasValue(value) {
+        for (const item of this._value || []) {
+            if (item === value) {
+                return true;
+            }
+        }
+        return false;
+    }
     removeFromValue(index) {
         if (this._value.length > index) {
             this._value.splice(index, 1);
             this.labelsOfValue.splice(index, 1);
             this.valueChange.emit(this._value);
+            this.updateOptionsNotPresentInValue();
+            this.cdr.detectChanges();
         }
-        this.cdr.detectChanges();
     }
     addToValue() {
-        if (this.valueInput !== undefined) {
+        if (this.valueInput !== undefined &&
+            (this.allowRepeats ? true : !this.hasValue(this.valueInput))) {
             this._value.push(this.valueInput);
             this.labelsOfValue.push(this.getLabelOfValue(this.valueInput));
             this.valueChange.emit(this._value);
             this.clearInput();
+            this.updateOptionsNotPresentInValue();
             this.cdr.detectChanges();
         }
     }
     clearInput() {
         this.valueInput = '';
     }
+    updateOptionsNotPresentInValue() {
+        if (!this.allowRepeats) {
+            const optionsNotPresentInValue = [];
+            for (const option of this.options) {
+                if (!this.hasValue(option.key)) {
+                    optionsNotPresentInValue.push(option);
+                }
+            }
+            this.optionsNotPresentInValue = optionsNotPresentInValue;
+        }
+    }
     onKeyUp(event) {
         if (event.key === 'Enter') {
             this.addToValue();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: OptionListEditorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: OptionListEditorComponent, isStandalone: true, selector: "daga-option-list-editor", inputs: { value: "value", options: "options", valueInput: "valueInput", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div *ngFor=\"let item of value; let index = index\" class=\"value-item-element\">\r\n  <span class=\"input\">{{ labelsOfValue[index] }}</span>\r\n  <button\r\n    *ngIf=\"!disabled\"\r\n    class=\"property-button\"\r\n    (click)=\"removeFromValue(index)\"\r\n  >\r\n    <div class=\"icon close-icon\"></div>\r\n  </button>\r\n</div>\r\n<div *ngIf=\"!disabled\" class=\"value-item-input\">\r\n  <div class=\"input relatively-positioned\">\r\n    <daga-autocomplete\r\n      [disabled]=\"disabled\"\r\n      [options]=\"options || []\"\r\n      [(value)]=\"valueInput\"\r\n    />\r\n  </div>\r\n  <button class=\"property-button\" (click)=\"addToValue()\">\r\n    <div class=\"icon add-icon\"></div>\r\n  </button>\r\n</div>\r\n", dependencies: [{ kind: "component", type: AutocompleteComponent, selector: "daga-autocomplete", inputs: ["value", "valueInput", "options", "disabled"], outputs: ["valueChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: OptionListEditorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.1", type: OptionListEditorComponent, isStandalone: true, selector: "daga-option-list-editor", inputs: { value: "value", options: "options", valueInput: "valueInput", allowRepeats: "allowRepeats", optionsNotPresentInValue: "optionsNotPresentInValue", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div *ngFor=\"let item of value; let index = index\" class=\"value-item-element\">\r\n  <span class=\"input\">{{ labelsOfValue[index] }}</span>\r\n  <button\r\n    *ngIf=\"!disabled\"\r\n    class=\"property-button\"\r\n    (click)=\"removeFromValue(index)\"\r\n  >\r\n    <div class=\"icon close-icon\"></div>\r\n  </button>\r\n</div>\r\n<div *ngIf=\"!disabled\" class=\"value-item-input\">\r\n  <div class=\"input relatively-positioned\">\r\n    <daga-autocomplete\r\n      [disabled]=\"disabled\"\r\n      [options]=\"allowRepeats ? options || [] : optionsNotPresentInValue || []\"\r\n      [(value)]=\"valueInput\"\r\n    />\r\n  </div>\r\n  <button class=\"property-button\" (click)=\"addToValue()\">\r\n    <div class=\"icon add-icon\"></div>\r\n  </button>\r\n</div>\r\n", dependencies: [{ kind: "component", type: AutocompleteComponent, selector: "daga-autocomplete", inputs: ["value", "valueInput", "options", "disabled"], outputs: ["valueChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: OptionListEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: OptionListEditorComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'daga-option-list-editor', imports: [AutocompleteComponent, CommonModule, FormsModule], template: "<div *ngFor=\"let item of value; let index = index\" class=\"value-item-element\">\r\n  <span class=\"input\">{{ labelsOfValue[index] }}</span>\r\n  <button\r\n    *ngIf=\"!disabled\"\r\n    class=\"property-button\"\r\n    (click)=\"removeFromValue(index)\"\r\n  >\r\n    <div class=\"icon close-icon\"></div>\r\n  </button>\r\n</div>\r\n<div *ngIf=\"!disabled\" class=\"value-item-input\">\r\n  <div class=\"input relatively-positioned\">\r\n    <daga-autocomplete\r\n      [disabled]=\"disabled\"\r\n      [options]=\"options || []\"\r\n      [(value)]=\"valueInput\"\r\n    />\r\n  </div>\r\n  <button class=\"property-button\" (click)=\"addToValue()\">\r\n    <div class=\"icon add-icon\"></div>\r\n  </button>\r\n</div>\r\n" }]
+            args: [{ standalone: true, selector: 'daga-option-list-editor', imports: [AutocompleteComponent, CommonModule, FormsModule], template: "<div *ngFor=\"let item of value; let index = index\" class=\"value-item-element\">\r\n  <span class=\"input\">{{ labelsOfValue[index] }}</span>\r\n  <button\r\n    *ngIf=\"!disabled\"\r\n    class=\"property-button\"\r\n    (click)=\"removeFromValue(index)\"\r\n  >\r\n    <div class=\"icon close-icon\"></div>\r\n  </button>\r\n</div>\r\n<div *ngIf=\"!disabled\" class=\"value-item-input\">\r\n  <div class=\"input relatively-positioned\">\r\n    <daga-autocomplete\r\n      [disabled]=\"disabled\"\r\n      [options]=\"allowRepeats ? options || [] : optionsNotPresentInValue || []\"\r\n      [(value)]=\"valueInput\"\r\n    />\r\n  </div>\r\n  <button class=\"property-button\" (click)=\"addToValue()\">\r\n    <div class=\"icon add-icon\"></div>\r\n  </button>\r\n</div>\r\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { value: [{
                 type: Input
             }], options: [{
                 type: Input
             }], valueInput: [{
                 type: Input
+            }], allowRepeats: [{
+                type: Input
+            }], optionsNotPresentInValue: [{
+                type: Input
             }], disabled: [{
                 type: Input
             }], valueChange: [{
@@ -7906,29 +8427,41 @@ class TextListEditorComponent {
         this.cdr = cdr;
         this._value = [];
         this.valueInput = '';
+        this.allowRepeats = true;
         this.disabled = false;
         this.valueChange = new EventEmitter();
     }
     getValueFromEvent(event) {
         return event.target.value;
     }
+    hasValue(value) {
+        for (const item of this._value || []) {
+            if (item === value) {
+                return true;
+            }
+        }
+        return false;
+    }
     removeFromValue(index) {
         if (this._value.length > index) {
             this._value.splice(index, 1);
             this.valueChange.emit(this._value);
+            this.cdr.detectChanges();
         }
-        this.cdr.detectChanges();
     }
     editFromValue(item, index) {
-        if (this._value.length > index) {
+        item = item.trim();
+        if (this._value.length > index && item !== '') {
             this._value.splice(index, 1, item);
             this.valueChange.emit(this._value);
+            this.cdr.detectChanges();
         }
-        this.cdr.detectChanges();
     }
     addToValue() {
-        if (this.valueInput !== '') {
-            this._value.push(this.valueInput);
+        const valueInput = this.valueInput.trim();
+        if (valueInput !== '' &&
+            (this.allowRepeats ? true : !this.hasValue(valueInput))) {
+            this._value.push(valueInput);
             this.valueChange.emit(this._value);
             this.clearInput();
             this.cdr.detectChanges();
@@ -7942,16 +8475,18 @@ class TextListEditorComponent {
             this.addToValue();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TextListEditorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: TextListEditorComponent, isStandalone: true, selector: "daga-text-list-editor", inputs: { value: "value", valueInput: "valueInput", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div *ngFor=\"let item of value; let index = index\" class=\"value-item-element\">\r\n  <input\r\n    class=\"input\"\r\n    type=\"text\"\r\n    [disabled]=\"disabled\"\r\n    [value]=\"item\"\r\n    (focusout)=\"editFromValue(getValueFromEvent($event), index)\"\r\n  />\r\n  <button\r\n    *ngIf=\"!disabled\"\r\n    class=\"property-button\"\r\n    (click)=\"removeFromValue(index)\"\r\n  >\r\n    <div class=\"icon close-icon\"></div>\r\n  </button>\r\n</div>\r\n<div *ngIf=\"!disabled\" class=\"value-item-input\">\r\n  <div class=\"input relatively-positioned\">\r\n    <input type=\"text\" (keyup)=\"onKeyUp($event)\" [(ngModel)]=\"valueInput\" />\r\n    <button\r\n      *ngIf=\"valueInput !== ''\"\r\n      class=\"clear\"\r\n      (click)=\"clearInput()\"\r\n    ></button>\r\n  </div>\r\n  <button class=\"property-button\" (click)=\"addToValue()\">\r\n    <div class=\"icon add-icon\"></div>\r\n  </button>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: TextListEditorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.1", type: TextListEditorComponent, isStandalone: true, selector: "daga-text-list-editor", inputs: { value: "value", valueInput: "valueInput", allowRepeats: "allowRepeats", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div *ngFor=\"let item of value; let index = index\" class=\"value-item-element\">\r\n  <input\r\n    class=\"input\"\r\n    type=\"text\"\r\n    [disabled]=\"disabled\"\r\n    [value]=\"item\"\r\n    (focusout)=\"editFromValue(getValueFromEvent($event), index)\"\r\n  />\r\n  <button\r\n    *ngIf=\"!disabled\"\r\n    class=\"property-button\"\r\n    (click)=\"removeFromValue(index)\"\r\n  >\r\n    <div class=\"icon close-icon\"></div>\r\n  </button>\r\n</div>\r\n<div *ngIf=\"!disabled\" class=\"value-item-input\">\r\n  <div class=\"input relatively-positioned\">\r\n    <input type=\"text\" (keyup)=\"onKeyUp($event)\" [(ngModel)]=\"valueInput\" />\r\n    <button\r\n      *ngIf=\"valueInput !== ''\"\r\n      class=\"clear\"\r\n      (click)=\"clearInput()\"\r\n    ></button>\r\n  </div>\r\n  <button class=\"property-button\" (click)=\"addToValue()\">\r\n    <div class=\"icon add-icon\"></div>\r\n  </button>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TextListEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: TextListEditorComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'daga-text-list-editor', imports: [CommonModule, FormsModule], template: "<div *ngFor=\"let item of value; let index = index\" class=\"value-item-element\">\r\n  <input\r\n    class=\"input\"\r\n    type=\"text\"\r\n    [disabled]=\"disabled\"\r\n    [value]=\"item\"\r\n    (focusout)=\"editFromValue(getValueFromEvent($event), index)\"\r\n  />\r\n  <button\r\n    *ngIf=\"!disabled\"\r\n    class=\"property-button\"\r\n    (click)=\"removeFromValue(index)\"\r\n  >\r\n    <div class=\"icon close-icon\"></div>\r\n  </button>\r\n</div>\r\n<div *ngIf=\"!disabled\" class=\"value-item-input\">\r\n  <div class=\"input relatively-positioned\">\r\n    <input type=\"text\" (keyup)=\"onKeyUp($event)\" [(ngModel)]=\"valueInput\" />\r\n    <button\r\n      *ngIf=\"valueInput !== ''\"\r\n      class=\"clear\"\r\n      (click)=\"clearInput()\"\r\n    ></button>\r\n  </div>\r\n  <button class=\"property-button\" (click)=\"addToValue()\">\r\n    <div class=\"icon add-icon\"></div>\r\n  </button>\r\n</div>\r\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { value: [{
                 type: Input
             }], valueInput: [{
                 type: Input
+            }], allowRepeats: [{
+                type: Input
             }], disabled: [{
                 type: Input
             }], valueChange: [{
@@ -7995,19 +8530,25 @@ class TextMapEditorComponent {
         this.cdr.detectChanges();
     }
     editKey(oldKey, newKey) {
-        if (oldKey !== newKey) {
+        newKey = newKey.trim();
+        if (oldKey !== newKey && newKey !== '') {
             this._value[newKey] = this._value[oldKey];
             delete this._value[oldKey];
             this.cdr.detectChanges();
         }
     }
     editValue(key, value) {
-        this._value[key] = value;
-        this.cdr.detectChanges();
+        value = value.trim();
+        if (value !== '') {
+            this._value[key] = value;
+            this.cdr.detectChanges();
+        }
     }
     addToValue() {
-        if (this.keyInput !== '' && this.valueInput !== '') {
-            this._value[this.keyInput] = this.valueInput;
+        const keyInput = this.keyInput.trim();
+        const valueInput = this.valueInput.trim();
+        if (keyInput !== '' && valueInput !== '') {
+            this._value[keyInput] = valueInput;
             this.valueChange.emit(this._value);
             this.clearKeyInput();
             this.clearValueInput();
@@ -8025,10 +8566,10 @@ class TextMapEditorComponent {
             this.addToValue();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TextMapEditorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: TextMapEditorComponent, isStandalone: true, selector: "daga-text-map-editor", inputs: { value: "value", keyInput: "keyInput", valueInput: "valueInput", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div *ngFor=\"let item of value | keyvalue\" class=\"value-item-element\">\r\n  <input\r\n    class=\"input\"\r\n    type=\"text\"\r\n    [disabled]=\"disabled\"\r\n    [value]=\"item.key\"\r\n    (focusout)=\"editKey(item.key, getValueFromEvent($event))\"\r\n  />\r\n  <input\r\n    class=\"input\"\r\n    type=\"text\"\r\n    [disabled]=\"disabled\"\r\n    [value]=\"item.value\"\r\n    (focusout)=\"editValue(item.key, getValueFromEvent($event))\"\r\n  />\r\n  <button\r\n    *ngIf=\"!disabled\"\r\n    class=\"property-button\"\r\n    (click)=\"removeFromValue(item.key)\"\r\n  >\r\n    <div class=\"icon close-icon\"></div>\r\n  </button>\r\n</div>\r\n<div *ngIf=\"!disabled\" class=\"value-item-input\">\r\n  <div class=\"input relatively-positioned\">\r\n    <input type=\"text\" (keyup)=\"onKeyUp($event)\" [(ngModel)]=\"keyInput\" />\r\n    <button\r\n      *ngIf=\"keyInput !== ''\"\r\n      class=\"clear\"\r\n      (click)=\"clearKeyInput()\"\r\n    ></button>\r\n  </div>\r\n  <div class=\"input relatively-positioned\">\r\n    <input type=\"text\" (keyup)=\"onKeyUp($event)\" [(ngModel)]=\"valueInput\" />\r\n    <button\r\n      *ngIf=\"valueInput !== ''\"\r\n      class=\"clear\"\r\n      (click)=\"clearValueInput()\"\r\n    ></button>\r\n  </div>\r\n  <button class=\"property-button\" (click)=\"addToValue()\">\r\n    <div class=\"icon add-icon\"></div>\r\n  </button>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: TextMapEditorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.1", type: TextMapEditorComponent, isStandalone: true, selector: "daga-text-map-editor", inputs: { value: "value", keyInput: "keyInput", valueInput: "valueInput", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div *ngFor=\"let item of value | keyvalue\" class=\"value-item-element\">\r\n  <input\r\n    class=\"input\"\r\n    type=\"text\"\r\n    [disabled]=\"disabled\"\r\n    [value]=\"item.key\"\r\n    (focusout)=\"editKey(item.key, getValueFromEvent($event))\"\r\n  />\r\n  <input\r\n    class=\"input\"\r\n    type=\"text\"\r\n    [disabled]=\"disabled\"\r\n    [value]=\"item.value\"\r\n    (focusout)=\"editValue(item.key, getValueFromEvent($event))\"\r\n  />\r\n  <button\r\n    *ngIf=\"!disabled\"\r\n    class=\"property-button\"\r\n    (click)=\"removeFromValue(item.key)\"\r\n  >\r\n    <div class=\"icon close-icon\"></div>\r\n  </button>\r\n</div>\r\n<div *ngIf=\"!disabled\" class=\"value-item-input\">\r\n  <div class=\"input relatively-positioned\">\r\n    <input type=\"text\" (keyup)=\"onKeyUp($event)\" [(ngModel)]=\"keyInput\" />\r\n    <button\r\n      *ngIf=\"keyInput !== ''\"\r\n      class=\"clear\"\r\n      (click)=\"clearKeyInput()\"\r\n    ></button>\r\n  </div>\r\n  <div class=\"input relatively-positioned\">\r\n    <input type=\"text\" (keyup)=\"onKeyUp($event)\" [(ngModel)]=\"valueInput\" />\r\n    <button\r\n      *ngIf=\"valueInput !== ''\"\r\n      class=\"clear\"\r\n      (click)=\"clearValueInput()\"\r\n    ></button>\r\n  </div>\r\n  <button class=\"property-button\" (click)=\"addToValue()\">\r\n    <div class=\"icon add-icon\"></div>\r\n  </button>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TextMapEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: TextMapEditorComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'daga-text-map-editor', imports: [CommonModule, FormsModule], template: "<div *ngFor=\"let item of value | keyvalue\" class=\"value-item-element\">\r\n  <input\r\n    class=\"input\"\r\n    type=\"text\"\r\n    [disabled]=\"disabled\"\r\n    [value]=\"item.key\"\r\n    (focusout)=\"editKey(item.key, getValueFromEvent($event))\"\r\n  />\r\n  <input\r\n    class=\"input\"\r\n    type=\"text\"\r\n    [disabled]=\"disabled\"\r\n    [value]=\"item.value\"\r\n    (focusout)=\"editValue(item.key, getValueFromEvent($event))\"\r\n  />\r\n  <button\r\n    *ngIf=\"!disabled\"\r\n    class=\"property-button\"\r\n    (click)=\"removeFromValue(item.key)\"\r\n  >\r\n    <div class=\"icon close-icon\"></div>\r\n  </button>\r\n</div>\r\n<div *ngIf=\"!disabled\" class=\"value-item-input\">\r\n  <div class=\"input relatively-positioned\">\r\n    <input type=\"text\" (keyup)=\"onKeyUp($event)\" [(ngModel)]=\"keyInput\" />\r\n    <button\r\n      *ngIf=\"keyInput !== ''\"\r\n      class=\"clear\"\r\n      (click)=\"clearKeyInput()\"\r\n    ></button>\r\n  </div>\r\n  <div class=\"input relatively-positioned\">\r\n    <input type=\"text\" (keyup)=\"onKeyUp($event)\" [(ngModel)]=\"valueInput\" />\r\n    <button\r\n      *ngIf=\"valueInput !== ''\"\r\n      class=\"clear\"\r\n      (click)=\"clearValueInput()\"\r\n    ></button>\r\n  </div>\r\n  <button class=\"property-button\" (click)=\"addToValue()\">\r\n    <div class=\"icon add-icon\"></div>\r\n  </button>\r\n</div>\r\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { value: [{
@@ -8061,55 +8602,20 @@ class ObjectEditorComponent {
         return this._valueSet;
     }
     set valueSet(valueSet) {
-        this._valueSet = valueSet;
-        // force value change detection
-        this.cdr.detectChanges();
+        if (this._valueSet !== valueSet) {
+            this._valueSet = valueSet;
+            // force value change detection
+            this.cdr.detectChanges();
+        }
     }
     constructor(cdr, canvasProvider) {
         this.cdr = cdr;
         this.canvasProvider = canvasProvider;
-        /** How many object-editors are parents of this object-editor. @private */
+        /** How many object-editor elements are parents of this object-editor element. @private */
         this.depth = 0;
         // Attributes for the template
         this.Type = Type;
-    }
-    displayProperty(property) {
-        if (this.valueSet === undefined) {
-            return;
-        }
-        let selectedProperty;
-        if (property instanceof Property) {
-            selectedProperty = property;
-        }
-        else if (property instanceof Event) {
-            selectedProperty = this.valueSet?.propertySet.getProperty(property.target?.value || '');
-        }
-        else {
-            selectedProperty = this.valueSet?.propertySet.getProperty(property || '');
-        }
-        if (selectedProperty) {
-            this.valueSet.displayProperty(selectedProperty);
-        }
-        this.cdr.detectChanges();
-    }
-    hideProperty(property) {
-        if (this.valueSet === undefined) {
-            return;
-        }
-        let selectedProperty;
-        if (property instanceof Property) {
-            selectedProperty = property;
-        }
-        else if (property instanceof Event) {
-            selectedProperty = this.valueSet?.propertySet.getProperty(property.target?.value || '');
-        }
-        else {
-            selectedProperty = this.valueSet?.propertySet.getProperty(property || '');
-        }
-        if (selectedProperty) {
-            this.valueSet.hideProperty(selectedProperty);
-        }
-        this.cdr.detectChanges();
+        this.getStyleClassName = getStyleClassName;
     }
     setValue(property, value) {
         if (this.valueSet === undefined) {
@@ -8139,10 +8645,10 @@ class ObjectEditorComponent {
         // with no timezone specified, the local time is assumed
         return new Date(string);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ObjectEditorComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CanvasProviderService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: ObjectEditorComponent, isStandalone: true, selector: "daga-object-editor", inputs: { valueSet: "valueSet", depth: "depth" }, ngImport: i0, template: "<div\r\n  *ngFor=\"let property of valueSet?.displayedProperties || []\"\r\n  class=\"property\"\r\n  [class]=\"property.name + ' depth-' + depth\"\r\n>\r\n  <p class=\"property-name\">\r\n    {{ property.name }}\r\n    <button class=\"property-button\" (click)=\"hideProperty(property.name)\">\r\n      <div class=\"icon hide-icon\"></div>\r\n    </button>\r\n  </p>\r\n\r\n  <input\r\n    *ngIf=\"property.type === Type.Text\"\r\n    type=\"text\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [ngModel]=\"valueSet?.getValue(property.name)\"\r\n    (ngModelChange)=\"setValue(property, $event)\"\r\n  />\r\n  <textarea\r\n    *ngIf=\"property.type === Type.TextArea\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [ngModel]=\"valueSet?.getValue(property.name)\"\r\n    (ngModelChange)=\"setValue(property, $event)\"\r\n  ></textarea>\r\n  <input\r\n    *ngIf=\"property.type === Type.Number\"\r\n    type=\"number\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [ngModel]=\"valueSet?.getValue(property.name)\"\r\n    (ngModelChange)=\"setValue(property, $event)\"\r\n  />\r\n  <input\r\n    *ngIf=\"property.type === Type.Color\"\r\n    type=\"text\"\r\n    pattern=\"#\\d{6}\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [ngModel]=\"valueSet?.getValue(property.name)\"\r\n    (ngModelChange)=\"setValue(property, $event)\"\r\n  />\r\n  <input\r\n    *ngIf=\"property.type === Type.Datetime\"\r\n    type=\"datetime-local\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [ngModel]=\"dateToLocalDatetimeString(valueSet?.getValue(property.name))\"\r\n    (ngModelChange)=\"setValue(property, localDatetimeStringToDate($event))\"\r\n  />\r\n  <input\r\n    *ngIf=\"property.type === Type.Date\"\r\n    type=\"date\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [ngModel]=\"valueSet?.getValue(property.name)\"\r\n    (ngModelChange)=\"setValue(property, $event)\"\r\n  />\r\n  <input\r\n    *ngIf=\"property.type === Type.Time\"\r\n    type=\"time\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [ngModel]=\"valueSet?.getValue(property.name)\"\r\n    (ngModelChange)=\"setValue(property, $event)\"\r\n  />\r\n  <input\r\n    *ngIf=\"property.type === Type.Url\"\r\n    type=\"url\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [ngModel]=\"valueSet?.getValue(property.name)\"\r\n    (ngModelChange)=\"setValue(property, $event)\"\r\n  />\r\n  <div class=\"radio\" *ngIf=\"property.type === Type.Boolean\">\r\n    <label class=\"radio-item radio-start\">\r\n      <input\r\n        type=\"radio\"\r\n        [disabled]=\"!property.editable || !userCanEdit\"\r\n        [name]=\"property.name\"\r\n        value=\"false\"\r\n        [checked]=\"valueSet?.getValue(property.name) === false\"\r\n        (change)=\"setValue(property, false)\"\r\n      />\r\n      No\r\n    </label>\r\n    <label class=\"radio-item radio-end\">\r\n      <input\r\n        type=\"radio\"\r\n        [disabled]=\"!property.editable || !userCanEdit\"\r\n        [name]=\"property.name\"\r\n        value=\"true\"\r\n        [checked]=\"valueSet?.getValue(property.name) === true\"\r\n        (change)=\"setValue(property, true)\"\r\n      />\r\n      Yes\r\n    </label>\r\n  </div>\r\n  <div class=\"relatively-positioned\" *ngIf=\"property.type === Type.Option\">\r\n    <daga-autocomplete\r\n      [disabled]=\"!property.editable || !userCanEdit\"\r\n      [options]=\"property.options || []\"\r\n      [value]=\"valueSet?.getValue(property.name)\"\r\n      (valueChange)=\"setValue(property, $event)\"\r\n    />\r\n  </div>\r\n  <daga-option-list-editor\r\n    *ngIf=\"property.type === Type.OptionList\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [options]=\"property.options || []\"\r\n    [value]=\"valueSet?.getValue(property.name)\"\r\n    (valueChange)=\"setValue(property, $event)\"\r\n  ></daga-option-list-editor>\r\n  <daga-text-list-editor\r\n    *ngIf=\"property.type === Type.TextList\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [value]=\"valueSet?.getValue(property.name)\"\r\n    (valueChange)=\"setValue(property, $event)\"\r\n  ></daga-text-list-editor>\r\n  <daga-text-map-editor\r\n    *ngIf=\"property.type === Type.TextMap\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [value]=\"valueSet?.getValue(property.name)\"\r\n    (valueChange)=\"setValue(property, $event)\"\r\n  ></daga-text-map-editor>\r\n  <div *ngIf=\"property.type === Type.Object\" class=\"left-bar\">\r\n    <daga-object-editor\r\n      [valueSet]=\"valueSet?.getSubValueSet(property.name)\"\r\n      [depth]=\"depth + 1\"\r\n    ></daga-object-editor>\r\n  </div>\r\n</div>\r\n<div class=\"property\" *ngIf=\"valueSet && valueSet.hiddenProperties.length > 0\">\r\n  <p class=\"property-name\">Add property:</p>\r\n  <select (change)=\"displayProperty($event)\">\r\n    <option value=\"\">Select a property</option>\r\n    <option\r\n      *ngFor=\"let property of valueSet?.hiddenProperties || []\"\r\n      [value]=\"property.name\"\r\n    >\r\n      {{ property.name }}\r\n    </option>\r\n  </select>\r\n</div>\r\n", dependencies: [{ kind: "component", type: ObjectEditorComponent, selector: "daga-object-editor", inputs: ["valueSet", "depth"] }, { kind: "component", type: AutocompleteComponent, selector: "daga-autocomplete", inputs: ["value", "valueInput", "options", "disabled"], outputs: ["valueChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: OptionListEditorComponent, selector: "daga-option-list-editor", inputs: ["value", "options", "valueInput", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: TextListEditorComponent, selector: "daga-text-list-editor", inputs: ["value", "valueInput", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: TextMapEditorComponent, selector: "daga-text-map-editor", inputs: ["value", "keyInput", "valueInput", "disabled"], outputs: ["valueChange"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: ObjectEditorComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CanvasProviderService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.1", type: ObjectEditorComponent, isStandalone: true, selector: "daga-object-editor", inputs: { valueSet: "valueSet", depth: "depth" }, ngImport: i0, template: "<div\r\n  *ngFor=\"let property of valueSet?.displayedProperties || []\"\r\n  class=\"property\"\r\n  [class]=\"getStyleClassName(property.name) + ' depth-' + depth\"\r\n>\r\n  <p class=\"property-name\">\r\n    {{ property.name }}\r\n  </p>\r\n\r\n  <input\r\n    *ngIf=\"property.type === Type.Text\"\r\n    type=\"text\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [ngModel]=\"valueSet?.getValue(property.name)\"\r\n    (ngModelChange)=\"setValue(property, $event)\"\r\n  />\r\n  <textarea\r\n    *ngIf=\"property.type === Type.TextArea\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [ngModel]=\"valueSet?.getValue(property.name)\"\r\n    (ngModelChange)=\"setValue(property, $event)\"\r\n  ></textarea>\r\n  <input\r\n    *ngIf=\"property.type === Type.Number\"\r\n    type=\"number\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [ngModel]=\"valueSet?.getValue(property.name)\"\r\n    (ngModelChange)=\"setValue(property, $event)\"\r\n  />\r\n  <input\r\n    *ngIf=\"property.type === Type.Color\"\r\n    type=\"text\"\r\n    pattern=\"#\\d{6}\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [ngModel]=\"valueSet?.getValue(property.name)\"\r\n    (ngModelChange)=\"setValue(property, $event)\"\r\n  />\r\n  <input\r\n    *ngIf=\"property.type === Type.Datetime\"\r\n    type=\"datetime-local\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [ngModel]=\"dateToLocalDatetimeString(valueSet?.getValue(property.name))\"\r\n    (ngModelChange)=\"setValue(property, localDatetimeStringToDate($event))\"\r\n  />\r\n  <input\r\n    *ngIf=\"property.type === Type.Date\"\r\n    type=\"date\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [ngModel]=\"valueSet?.getValue(property.name)\"\r\n    (ngModelChange)=\"setValue(property, $event)\"\r\n  />\r\n  <input\r\n    *ngIf=\"property.type === Type.Time\"\r\n    type=\"time\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [ngModel]=\"valueSet?.getValue(property.name)\"\r\n    (ngModelChange)=\"setValue(property, $event)\"\r\n  />\r\n  <input\r\n    *ngIf=\"property.type === Type.Url\"\r\n    type=\"url\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [ngModel]=\"valueSet?.getValue(property.name)\"\r\n    (ngModelChange)=\"setValue(property, $event)\"\r\n  />\r\n  <div class=\"radio\" *ngIf=\"property.type === Type.Boolean\">\r\n    <label class=\"radio-item radio-start\">\r\n      <input\r\n        type=\"radio\"\r\n        [disabled]=\"!property.editable || !userCanEdit\"\r\n        [name]=\"property.name\"\r\n        value=\"false\"\r\n        [checked]=\"valueSet?.getValue(property.name) === false\"\r\n        (change)=\"setValue(property, false)\"\r\n      />\r\n      No\r\n    </label>\r\n    <label class=\"radio-item radio-end\">\r\n      <input\r\n        type=\"radio\"\r\n        [disabled]=\"!property.editable || !userCanEdit\"\r\n        [name]=\"property.name\"\r\n        value=\"true\"\r\n        [checked]=\"valueSet?.getValue(property.name) === true\"\r\n        (change)=\"setValue(property, true)\"\r\n      />\r\n      Yes\r\n    </label>\r\n  </div>\r\n  <div class=\"relatively-positioned\" *ngIf=\"property.type === Type.Option\">\r\n    <daga-autocomplete\r\n      [disabled]=\"!property.editable || !userCanEdit\"\r\n      [options]=\"property.options || []\"\r\n      [value]=\"valueSet?.getValue(property.name)\"\r\n      (valueChange)=\"setValue(property, $event)\"\r\n    />\r\n  </div>\r\n  <daga-option-list-editor\r\n    *ngIf=\"\r\n      property.type === Type.OptionList || property.type === Type.OptionSet\r\n    \"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [allowRepeats]=\"property.type === Type.OptionList\"\r\n    [options]=\"property.options || []\"\r\n    [value]=\"valueSet?.getValue(property.name)\"\r\n    (valueChange)=\"setValue(property, $event)\"\r\n  ></daga-option-list-editor>\r\n  <daga-text-list-editor\r\n    *ngIf=\"property.type === Type.TextList || property.type === Type.TextSet\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [allowRepeats]=\"property.type === Type.TextList\"\r\n    [value]=\"valueSet?.getValue(property.name)\"\r\n    (valueChange)=\"setValue(property, $event)\"\r\n  ></daga-text-list-editor>\r\n  <daga-text-map-editor\r\n    *ngIf=\"property.type === Type.TextMap\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [value]=\"valueSet?.getValue(property.name)\"\r\n    (valueChange)=\"setValue(property, $event)\"\r\n  ></daga-text-map-editor>\r\n  <div *ngIf=\"property.type === Type.Object\" class=\"left-bar\">\r\n    <daga-object-editor\r\n      [valueSet]=\"valueSet?.getSubValueSet(property.name)\"\r\n      [depth]=\"depth + 1\"\r\n    ></daga-object-editor>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "component", type: ObjectEditorComponent, selector: "daga-object-editor", inputs: ["valueSet", "depth"] }, { kind: "component", type: AutocompleteComponent, selector: "daga-autocomplete", inputs: ["value", "valueInput", "options", "disabled"], outputs: ["valueChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: OptionListEditorComponent, selector: "daga-option-list-editor", inputs: ["value", "options", "valueInput", "allowRepeats", "optionsNotPresentInValue", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: TextListEditorComponent, selector: "daga-text-list-editor", inputs: ["value", "valueInput", "allowRepeats", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: TextMapEditorComponent, selector: "daga-text-map-editor", inputs: ["value", "keyInput", "valueInput", "disabled"], outputs: ["valueChange"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ObjectEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: ObjectEditorComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'daga-object-editor', imports: [
                         AutocompleteComponent,
@@ -8151,7 +8657,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
                         OptionListEditorComponent,
                         TextListEditorComponent,
                         TextMapEditorComponent
-                    ], template: "<div\r\n  *ngFor=\"let property of valueSet?.displayedProperties || []\"\r\n  class=\"property\"\r\n  [class]=\"property.name + ' depth-' + depth\"\r\n>\r\n  <p class=\"property-name\">\r\n    {{ property.name }}\r\n    <button class=\"property-button\" (click)=\"hideProperty(property.name)\">\r\n      <div class=\"icon hide-icon\"></div>\r\n    </button>\r\n  </p>\r\n\r\n  <input\r\n    *ngIf=\"property.type === Type.Text\"\r\n    type=\"text\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [ngModel]=\"valueSet?.getValue(property.name)\"\r\n    (ngModelChange)=\"setValue(property, $event)\"\r\n  />\r\n  <textarea\r\n    *ngIf=\"property.type === Type.TextArea\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [ngModel]=\"valueSet?.getValue(property.name)\"\r\n    (ngModelChange)=\"setValue(property, $event)\"\r\n  ></textarea>\r\n  <input\r\n    *ngIf=\"property.type === Type.Number\"\r\n    type=\"number\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [ngModel]=\"valueSet?.getValue(property.name)\"\r\n    (ngModelChange)=\"setValue(property, $event)\"\r\n  />\r\n  <input\r\n    *ngIf=\"property.type === Type.Color\"\r\n    type=\"text\"\r\n    pattern=\"#\\d{6}\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [ngModel]=\"valueSet?.getValue(property.name)\"\r\n    (ngModelChange)=\"setValue(property, $event)\"\r\n  />\r\n  <input\r\n    *ngIf=\"property.type === Type.Datetime\"\r\n    type=\"datetime-local\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [ngModel]=\"dateToLocalDatetimeString(valueSet?.getValue(property.name))\"\r\n    (ngModelChange)=\"setValue(property, localDatetimeStringToDate($event))\"\r\n  />\r\n  <input\r\n    *ngIf=\"property.type === Type.Date\"\r\n    type=\"date\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [ngModel]=\"valueSet?.getValue(property.name)\"\r\n    (ngModelChange)=\"setValue(property, $event)\"\r\n  />\r\n  <input\r\n    *ngIf=\"property.type === Type.Time\"\r\n    type=\"time\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [ngModel]=\"valueSet?.getValue(property.name)\"\r\n    (ngModelChange)=\"setValue(property, $event)\"\r\n  />\r\n  <input\r\n    *ngIf=\"property.type === Type.Url\"\r\n    type=\"url\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [ngModel]=\"valueSet?.getValue(property.name)\"\r\n    (ngModelChange)=\"setValue(property, $event)\"\r\n  />\r\n  <div class=\"radio\" *ngIf=\"property.type === Type.Boolean\">\r\n    <label class=\"radio-item radio-start\">\r\n      <input\r\n        type=\"radio\"\r\n        [disabled]=\"!property.editable || !userCanEdit\"\r\n        [name]=\"property.name\"\r\n        value=\"false\"\r\n        [checked]=\"valueSet?.getValue(property.name) === false\"\r\n        (change)=\"setValue(property, false)\"\r\n      />\r\n      No\r\n    </label>\r\n    <label class=\"radio-item radio-end\">\r\n      <input\r\n        type=\"radio\"\r\n        [disabled]=\"!property.editable || !userCanEdit\"\r\n        [name]=\"property.name\"\r\n        value=\"true\"\r\n        [checked]=\"valueSet?.getValue(property.name) === true\"\r\n        (change)=\"setValue(property, true)\"\r\n      />\r\n      Yes\r\n    </label>\r\n  </div>\r\n  <div class=\"relatively-positioned\" *ngIf=\"property.type === Type.Option\">\r\n    <daga-autocomplete\r\n      [disabled]=\"!property.editable || !userCanEdit\"\r\n      [options]=\"property.options || []\"\r\n      [value]=\"valueSet?.getValue(property.name)\"\r\n      (valueChange)=\"setValue(property, $event)\"\r\n    />\r\n  </div>\r\n  <daga-option-list-editor\r\n    *ngIf=\"property.type === Type.OptionList\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [options]=\"property.options || []\"\r\n    [value]=\"valueSet?.getValue(property.name)\"\r\n    (valueChange)=\"setValue(property, $event)\"\r\n  ></daga-option-list-editor>\r\n  <daga-text-list-editor\r\n    *ngIf=\"property.type === Type.TextList\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [value]=\"valueSet?.getValue(property.name)\"\r\n    (valueChange)=\"setValue(property, $event)\"\r\n  ></daga-text-list-editor>\r\n  <daga-text-map-editor\r\n    *ngIf=\"property.type === Type.TextMap\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [value]=\"valueSet?.getValue(property.name)\"\r\n    (valueChange)=\"setValue(property, $event)\"\r\n  ></daga-text-map-editor>\r\n  <div *ngIf=\"property.type === Type.Object\" class=\"left-bar\">\r\n    <daga-object-editor\r\n      [valueSet]=\"valueSet?.getSubValueSet(property.name)\"\r\n      [depth]=\"depth + 1\"\r\n    ></daga-object-editor>\r\n  </div>\r\n</div>\r\n<div class=\"property\" *ngIf=\"valueSet && valueSet.hiddenProperties.length > 0\">\r\n  <p class=\"property-name\">Add property:</p>\r\n  <select (change)=\"displayProperty($event)\">\r\n    <option value=\"\">Select a property</option>\r\n    <option\r\n      *ngFor=\"let property of valueSet?.hiddenProperties || []\"\r\n      [value]=\"property.name\"\r\n    >\r\n      {{ property.name }}\r\n    </option>\r\n  </select>\r\n</div>\r\n" }]
+                    ], template: "<div\r\n  *ngFor=\"let property of valueSet?.displayedProperties || []\"\r\n  class=\"property\"\r\n  [class]=\"getStyleClassName(property.name) + ' depth-' + depth\"\r\n>\r\n  <p class=\"property-name\">\r\n    {{ property.name }}\r\n  </p>\r\n\r\n  <input\r\n    *ngIf=\"property.type === Type.Text\"\r\n    type=\"text\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [ngModel]=\"valueSet?.getValue(property.name)\"\r\n    (ngModelChange)=\"setValue(property, $event)\"\r\n  />\r\n  <textarea\r\n    *ngIf=\"property.type === Type.TextArea\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [ngModel]=\"valueSet?.getValue(property.name)\"\r\n    (ngModelChange)=\"setValue(property, $event)\"\r\n  ></textarea>\r\n  <input\r\n    *ngIf=\"property.type === Type.Number\"\r\n    type=\"number\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [ngModel]=\"valueSet?.getValue(property.name)\"\r\n    (ngModelChange)=\"setValue(property, $event)\"\r\n  />\r\n  <input\r\n    *ngIf=\"property.type === Type.Color\"\r\n    type=\"text\"\r\n    pattern=\"#\\d{6}\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [ngModel]=\"valueSet?.getValue(property.name)\"\r\n    (ngModelChange)=\"setValue(property, $event)\"\r\n  />\r\n  <input\r\n    *ngIf=\"property.type === Type.Datetime\"\r\n    type=\"datetime-local\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [ngModel]=\"dateToLocalDatetimeString(valueSet?.getValue(property.name))\"\r\n    (ngModelChange)=\"setValue(property, localDatetimeStringToDate($event))\"\r\n  />\r\n  <input\r\n    *ngIf=\"property.type === Type.Date\"\r\n    type=\"date\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [ngModel]=\"valueSet?.getValue(property.name)\"\r\n    (ngModelChange)=\"setValue(property, $event)\"\r\n  />\r\n  <input\r\n    *ngIf=\"property.type === Type.Time\"\r\n    type=\"time\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [ngModel]=\"valueSet?.getValue(property.name)\"\r\n    (ngModelChange)=\"setValue(property, $event)\"\r\n  />\r\n  <input\r\n    *ngIf=\"property.type === Type.Url\"\r\n    type=\"url\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [ngModel]=\"valueSet?.getValue(property.name)\"\r\n    (ngModelChange)=\"setValue(property, $event)\"\r\n  />\r\n  <div class=\"radio\" *ngIf=\"property.type === Type.Boolean\">\r\n    <label class=\"radio-item radio-start\">\r\n      <input\r\n        type=\"radio\"\r\n        [disabled]=\"!property.editable || !userCanEdit\"\r\n        [name]=\"property.name\"\r\n        value=\"false\"\r\n        [checked]=\"valueSet?.getValue(property.name) === false\"\r\n        (change)=\"setValue(property, false)\"\r\n      />\r\n      No\r\n    </label>\r\n    <label class=\"radio-item radio-end\">\r\n      <input\r\n        type=\"radio\"\r\n        [disabled]=\"!property.editable || !userCanEdit\"\r\n        [name]=\"property.name\"\r\n        value=\"true\"\r\n        [checked]=\"valueSet?.getValue(property.name) === true\"\r\n        (change)=\"setValue(property, true)\"\r\n      />\r\n      Yes\r\n    </label>\r\n  </div>\r\n  <div class=\"relatively-positioned\" *ngIf=\"property.type === Type.Option\">\r\n    <daga-autocomplete\r\n      [disabled]=\"!property.editable || !userCanEdit\"\r\n      [options]=\"property.options || []\"\r\n      [value]=\"valueSet?.getValue(property.name)\"\r\n      (valueChange)=\"setValue(property, $event)\"\r\n    />\r\n  </div>\r\n  <daga-option-list-editor\r\n    *ngIf=\"\r\n      property.type === Type.OptionList || property.type === Type.OptionSet\r\n    \"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [allowRepeats]=\"property.type === Type.OptionList\"\r\n    [options]=\"property.options || []\"\r\n    [value]=\"valueSet?.getValue(property.name)\"\r\n    (valueChange)=\"setValue(property, $event)\"\r\n  ></daga-option-list-editor>\r\n  <daga-text-list-editor\r\n    *ngIf=\"property.type === Type.TextList || property.type === Type.TextSet\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [allowRepeats]=\"property.type === Type.TextList\"\r\n    [value]=\"valueSet?.getValue(property.name)\"\r\n    (valueChange)=\"setValue(property, $event)\"\r\n  ></daga-text-list-editor>\r\n  <daga-text-map-editor\r\n    *ngIf=\"property.type === Type.TextMap\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [value]=\"valueSet?.getValue(property.name)\"\r\n    (valueChange)=\"setValue(property, $event)\"\r\n  ></daga-text-map-editor>\r\n  <div *ngIf=\"property.type === Type.Object\" class=\"left-bar\">\r\n    <daga-object-editor\r\n      [valueSet]=\"valueSet?.getSubValueSet(property.name)\"\r\n      [depth]=\"depth + 1\"\r\n    ></daga-object-editor>\r\n  </div>\r\n</div>\r\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: CanvasProviderService }], propDecorators: { valueSet: [{
                 type: Input
             }], depth: [{
@@ -8168,9 +8674,12 @@ class PropertyEditorComponent {
         return this._valueSet;
     }
     set valueSet(valueSet) {
-        this._valueSet = valueSet;
-        // force value change detection
-        this.cdr.detectChanges();
+        if (this._valueSet !== valueSet) {
+            this._valueSet = valueSet;
+            this.settings = undefined;
+            // force value change detection
+            this.cdr.detectChanges();
+        }
     }
     constructor(cdr) {
         this.cdr = cdr;
@@ -8194,7 +8703,7 @@ class PropertyEditorComponent {
         let selector = '';
         let depth = 0;
         for (const propertyName of propertyNames) {
-            selector += ` .property.${propertyName}.depth-${depth}`;
+            selector += ` .property.${getStyleClassName(propertyName)}.depth-${depth}`;
             ++depth;
         }
         if (this.valueSet) {
@@ -8209,12 +8718,17 @@ class PropertyEditorComponent {
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: PropertyEditorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: PropertyEditorComponent, isStandalone: true, selector: "daga-property-editor", inputs: { location: "location", direction: "direction", width: "width", valueSet: "valueSet" }, viewQueries: [{ propertyName: "panel", first: true, predicate: ["panel"], descendants: true }], ngImport: i0, template: "<div #panel class=\"panel bottom {{ location }} {{ direction }}\">\r\n  <daga-collapse-button\r\n    #collapse\r\n    [disabled]=\"\r\n      !valueSet ||\r\n      !valueSet.propertySet ||\r\n      !valueSet.propertySet.hasProperties()\r\n    \"\r\n    [direction]=\"direction\"\r\n    [collapsableSelector]=\"panel\"\r\n    collapsableAdditionalSelector=\".panel-content\"\r\n    rule=\"display\"\r\n    collapsedValue=\"none\"\r\n    visibleValue=\"block\"\r\n  />\r\n  <div\r\n    *ngIf=\"\r\n      valueSet &&\r\n      valueSet.propertySet &&\r\n      valueSet.propertySet.hasProperties() &&\r\n      !collapse.collapsed\r\n    \"\r\n    class=\"panel-content\"\r\n  >\r\n    <p *ngIf=\"title\" class=\"title\">{{ title }}</p>\r\n    <daga-object-editor [valueSet]=\"valueSet\"></daga-object-editor>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CollapseButtonComponent, selector: "daga-collapse-button", inputs: ["collapsableSelector", "collapsableAdditionalSelector", "collapsed", "disabled", "direction", "rule", "collapsedValue", "visibleValue"] }, { kind: "component", type: ObjectEditorComponent, selector: "daga-object-editor", inputs: ["valueSet", "depth"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: PropertyEditorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.1", type: PropertyEditorComponent, isStandalone: true, selector: "daga-property-editor", inputs: { location: "location", direction: "direction", width: "width", valueSet: "valueSet" }, viewQueries: [{ propertyName: "panel", first: true, predicate: ["panel"], descendants: true }], ngImport: i0, template: "<div #panel class=\"panel bottom {{ location }} {{ direction }}\">\r\n  <daga-collapse-button\r\n    #collapse\r\n    [disabled]=\"\r\n      !valueSet ||\r\n      !valueSet.propertySet ||\r\n      !valueSet.propertySet.hasProperties()\r\n    \"\r\n    [direction]=\"direction\"\r\n    [collapsableSelector]=\"panel\"\r\n    collapsableAdditionalSelector=\".panel-content\"\r\n    rule=\"display\"\r\n    collapsedValue=\"none\"\r\n    visibleValue=\"block\"\r\n  />\r\n  <div\r\n    *ngIf=\"\r\n      valueSet &&\r\n      valueSet.propertySet &&\r\n      valueSet.propertySet.hasProperties() &&\r\n      !collapse.collapsed\r\n    \"\r\n    class=\"panel-content\"\r\n  >\r\n    <p *ngIf=\"title\" class=\"title\">\r\n      {{ title }}\r\n      <button class=\"property-button\" (click)=\"settings = !settings\">\r\n        <div\r\n          class=\"icon settings-icon\"\r\n          [class]=\"\r\n            settings === undefined ? '' : settings ? 'unrotate' : 'rotate'\r\n          \"\r\n        ></div>\r\n      </button>\r\n    </p>\r\n    <daga-object-editor *ngIf=\"!settings\" [valueSet]=\"valueSet\" />\r\n    <daga-property-settings *ngIf=\"settings\" [valueSet]=\"valueSet\" />\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CollapseButtonComponent, selector: "daga-collapse-button", inputs: ["collapsableSelector", "collapsableAdditionalSelector", "collapsed", "disabled", "direction", "rule", "collapsedValue", "visibleValue"] }, { kind: "component", type: ObjectEditorComponent, selector: "daga-object-editor", inputs: ["valueSet", "depth"] }, { kind: "component", type: PropertySettingsComponent, selector: "daga-property-settings", inputs: ["valueSet", "depth"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: PropertyEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: PropertyEditorComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'daga-property-editor', imports: [CommonModule, CollapseButtonComponent, ObjectEditorComponent], template: "<div #panel class=\"panel bottom {{ location }} {{ direction }}\">\r\n  <daga-collapse-button\r\n    #collapse\r\n    [disabled]=\"\r\n      !valueSet ||\r\n      !valueSet.propertySet ||\r\n      !valueSet.propertySet.hasProperties()\r\n    \"\r\n    [direction]=\"direction\"\r\n    [collapsableSelector]=\"panel\"\r\n    collapsableAdditionalSelector=\".panel-content\"\r\n    rule=\"display\"\r\n    collapsedValue=\"none\"\r\n    visibleValue=\"block\"\r\n  />\r\n  <div\r\n    *ngIf=\"\r\n      valueSet &&\r\n      valueSet.propertySet &&\r\n      valueSet.propertySet.hasProperties() &&\r\n      !collapse.collapsed\r\n    \"\r\n    class=\"panel-content\"\r\n  >\r\n    <p *ngIf=\"title\" class=\"title\">{{ title }}</p>\r\n    <daga-object-editor [valueSet]=\"valueSet\"></daga-object-editor>\r\n  </div>\r\n</div>\r\n" }]
+            args: [{ standalone: true, selector: 'daga-property-editor', imports: [
+                        CommonModule,
+                        CollapseButtonComponent,
+                        ObjectEditorComponent,
+                        PropertySettingsComponent
+                    ], template: "<div #panel class=\"panel bottom {{ location }} {{ direction }}\">\r\n  <daga-collapse-button\r\n    #collapse\r\n    [disabled]=\"\r\n      !valueSet ||\r\n      !valueSet.propertySet ||\r\n      !valueSet.propertySet.hasProperties()\r\n    \"\r\n    [direction]=\"direction\"\r\n    [collapsableSelector]=\"panel\"\r\n    collapsableAdditionalSelector=\".panel-content\"\r\n    rule=\"display\"\r\n    collapsedValue=\"none\"\r\n    visibleValue=\"block\"\r\n  />\r\n  <div\r\n    *ngIf=\"\r\n      valueSet &&\r\n      valueSet.propertySet &&\r\n      valueSet.propertySet.hasProperties() &&\r\n      !collapse.collapsed\r\n    \"\r\n    class=\"panel-content\"\r\n  >\r\n    <p *ngIf=\"title\" class=\"title\">\r\n      {{ title }}\r\n      <button class=\"property-button\" (click)=\"settings = !settings\">\r\n        <div\r\n          class=\"icon settings-icon\"\r\n          [class]=\"\r\n            settings === undefined ? '' : settings ? 'unrotate' : 'rotate'\r\n          \"\r\n        ></div>\r\n      </button>\r\n    </p>\r\n    <daga-object-editor *ngIf=\"!settings\" [valueSet]=\"valueSet\" />\r\n    <daga-property-settings *ngIf=\"settings\" [valueSet]=\"valueSet\" />\r\n  </div>\r\n</div>\r\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { panel: [{
                 type: ViewChild,
                 args: ['panel']
@@ -8227,6 +8741,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
             }], valueSet: [{
                 type: Input
             }] } });
+const getStyleClassName = (s) => {
+    return 'property-name-' + s.replace(/\s/g, '');
+};
 
 /**
  * A provider for the {@link DiagramConfig} associated with a {@link DiagramComponent} context.
@@ -8249,10 +8766,10 @@ class DagaConfigurationService {
     getConfig() {
         return this._config;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: DagaConfigurationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: DagaConfigurationService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: DagaConfigurationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: DagaConfigurationService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: DagaConfigurationService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: DagaConfigurationService, decorators: [{
             type: Injectable
         }] });
 
@@ -8279,10 +8796,10 @@ class DiagramEditorComponent {
     ngAfterViewInit() {
         this.canvasProvider.initCanvasView(this.appendTo.nativeElement);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: DiagramEditorComponent, deps: [{ token: DagaConfigurationService }, { token: CanvasProviderService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: DiagramEditorComponent, isStandalone: true, selector: "daga-diagram-editor", viewQueries: [{ propertyName: "appendTo", first: true, predicate: ["appendTo"], descendants: true }, { propertyName: "diagramButtons", first: true, predicate: ["diagramButtons"], descendants: true }, { propertyName: "palette", first: true, predicate: ["palette"], descendants: true }, { propertyName: "propertyEditor", first: true, predicate: ["propertyEditor"], descendants: true }], ngImport: i0, template: "<div class=\"append-to\" #appendTo></div>\n<daga-diagram-buttons\n  *ngIf=\"config.components?.buttons?.exists !== false\"\n  #diagramButtons\n  [location]=\"config.components?.buttons?.location || Corner.BottomRight\"\n  [direction]=\"config.components?.buttons?.direction || Side.Top\"\n  [enableFilter]=\"config.components?.buttons?.enableFilter !== false\"\n  [enableLayout]=\"config.components?.buttons?.enableLayout !== false\"\n  [enableUndoRedo]=\"config.components?.buttons?.enableUndoRedo !== false\"\n  [enableZoom]=\"config.components?.buttons?.enableZoom !== false\"\n  [zoomRate]=\"config.components?.buttons?.zoomRate || 2\"\n/>\n<daga-palette\n  *ngIf=\"\n    config.components?.palette?.exists !== false &&\n    config.components?.palette?.sections &&\n    (config.components?.palette?.sections?.length || 0) > 0\n  \"\n  #palette\n  [location]=\"config.components?.palette?.location || Corner.TopLeft\"\n  [direction]=\"config.components?.palette?.direction || Side.Bottom\"\n  [width]=\"config.components?.palette?.width || '12rem'\"\n  [palettes]=\"config.components?.palette?.sections || []\"\n/>\n<daga-property-editor\n  *ngIf=\"config.components?.propertyEditor?.exists !== false\"\n  #propertyEditor\n  [location]=\"config.components?.propertyEditor?.location || Corner.TopRight\"\n  [direction]=\"config.components?.propertyEditor?.direction || Side.Bottom\"\n  [width]=\"config.components?.propertyEditor?.width || '24rem'\"\n/>\n<daga-errors *ngIf=\"config.components?.errors?.exists !== false\" />\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DiagramButtonsComponent, selector: "daga-diagram-buttons", inputs: ["location", "direction", "enableFilter", "enableLayout", "enableUndoRedo", "enableZoom", "zoomRate"] }, { kind: "component", type: PaletteComponent, selector: "daga-palette", inputs: ["palettes", "currentPalette", "currentCategory", "location", "direction", "width"] }, { kind: "component", type: PropertyEditorComponent, selector: "daga-property-editor", inputs: ["location", "direction", "width", "valueSet"] }, { kind: "component", type: ErrorsComponent, selector: "daga-errors" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: DiagramEditorComponent, deps: [{ token: DagaConfigurationService }, { token: CanvasProviderService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.1", type: DiagramEditorComponent, isStandalone: true, selector: "daga-diagram-editor", viewQueries: [{ propertyName: "appendTo", first: true, predicate: ["appendTo"], descendants: true }, { propertyName: "diagramButtons", first: true, predicate: ["diagramButtons"], descendants: true }, { propertyName: "palette", first: true, predicate: ["palette"], descendants: true }, { propertyName: "propertyEditor", first: true, predicate: ["propertyEditor"], descendants: true }], ngImport: i0, template: "<div class=\"append-to\" #appendTo></div>\n<daga-diagram-buttons\n  *ngIf=\"config.components?.buttons?.exists !== false\"\n  #diagramButtons\n  [location]=\"config.components?.buttons?.location || Corner.BottomRight\"\n  [direction]=\"config.components?.buttons?.direction || Side.Top\"\n  [enableFilter]=\"config.components?.buttons?.enableFilter !== false\"\n  [enableLayout]=\"config.components?.buttons?.enableLayout !== false\"\n  [enableUndoRedo]=\"config.components?.buttons?.enableUndoRedo !== false\"\n  [enableZoom]=\"config.components?.buttons?.enableZoom !== false\"\n  [zoomRate]=\"config.components?.buttons?.zoomRate || 2\"\n/>\n<daga-palette\n  *ngIf=\"\n    config.components?.palette?.exists !== false &&\n    config.components?.palette?.sections &&\n    (config.components?.palette?.sections?.length || 0) > 0\n  \"\n  #palette\n  [location]=\"config.components?.palette?.location || Corner.TopLeft\"\n  [direction]=\"config.components?.palette?.direction || Side.Bottom\"\n  [width]=\"config.components?.palette?.width || '12rem'\"\n  [palettes]=\"config.components?.palette?.sections || []\"\n/>\n<daga-property-editor\n  *ngIf=\"config.components?.propertyEditor?.exists !== false\"\n  #propertyEditor\n  [location]=\"config.components?.propertyEditor?.location || Corner.TopRight\"\n  [direction]=\"config.components?.propertyEditor?.direction || Side.Bottom\"\n  [width]=\"config.components?.propertyEditor?.width || '24rem'\"\n/>\n<daga-errors *ngIf=\"config.components?.errors?.exists !== false\" />\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DiagramButtonsComponent, selector: "daga-diagram-buttons", inputs: ["location", "direction", "enableFilter", "enableLayout", "enableUndoRedo", "enableZoom", "zoomRate"] }, { kind: "component", type: PaletteComponent, selector: "daga-palette", inputs: ["palettes", "currentPalette", "currentCategory", "location", "direction", "width"] }, { kind: "component", type: PropertyEditorComponent, selector: "daga-property-editor", inputs: ["location", "direction", "width", "valueSet"] }, { kind: "component", type: ErrorsComponent, selector: "daga-errors" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: DiagramEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: DiagramEditorComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'daga-diagram-editor', imports: [
                         CommonModule,
@@ -8312,7 +8829,7 @@ const DAGA_FILE_VERSION = 1;
  * @public
  */
 class DagaExporter {
-    export(model) {
+    export(model, includeCollabMeta = false) {
         const result = {
             name: model.name,
             type: model.type,
@@ -8322,7 +8839,14 @@ class DagaExporter {
             nodes: [],
             connections: [],
             data: model.valueSet.getValues(),
-            logicalClock: model.logicalClock
+            ...(includeCollabMeta
+                ? {
+                    collabMeta: {
+                        logicalClock: model.logicalClock,
+                        dataTimestamps: model.valueSet.getTimestamps()
+                    }
+                }
+                : {})
         };
         if (model.id) {
             result.id = model.id;
@@ -8330,7 +8854,9 @@ class DagaExporter {
         if (model.description) {
             result.description = model.description;
         }
-        for (const node of model.nodes.filter((e) => !e.removed)) {
+        for (const node of model.nodes) {
+            if (!includeCollabMeta && node.removed)
+                continue;
             const sections = [];
             for (const section of node.sections) {
                 const ports = [];
@@ -8339,7 +8865,17 @@ class DagaExporter {
                         id: port.id,
                         coords: roundPoint(port.coords),
                         direction: port.direction,
-                        label: port.label?.text || ''
+                        label: port.label?.text || '',
+                        ...(includeCollabMeta
+                            ? {
+                                collabMeta: {
+                                    removed: port.removed,
+                                    selfRemoved: port.selfRemoved,
+                                    selfRemovedTimestamp: port.selfRemovedTimestamp,
+                                    ...exportLabelCollabMeta(port)
+                                }
+                            }
+                            : {})
                     });
                 }
                 sections.push({
@@ -8350,7 +8886,17 @@ class DagaExporter {
                     indexYInNode: section.indexYInNode,
                     coords: roundPoint(section.coords),
                     width: section.width,
-                    height: section.height
+                    height: section.height,
+                    ...(includeCollabMeta
+                        ? {
+                            collabMeta: {
+                                removed: section.removed,
+                                selfRemoved: section.selfRemoved,
+                                selfRemovedTimestamp: section.selfRemovedTimestamp,
+                                ...exportLabelCollabMeta(section)
+                            }
+                        }
+                        : {})
                 });
             }
             const ports = [];
@@ -8359,10 +8905,20 @@ class DagaExporter {
                     id: port.id,
                     coords: roundPoint(port.coords),
                     direction: port.direction,
-                    label: port.label?.text || ''
+                    label: port.label?.text || '',
+                    ...(includeCollabMeta
+                        ? {
+                            collabMeta: {
+                                removed: port.removed,
+                                selfRemoved: port.selfRemoved,
+                                selfRemovedTimestamp: port.selfRemovedTimestamp,
+                                ...exportLabelCollabMeta(port)
+                            }
+                        }
+                        : {})
                 });
             }
-            const newNode = {
+            result.nodes.push({
                 id: node.id,
                 type: node.type.id,
                 sections,
@@ -8371,14 +8927,24 @@ class DagaExporter {
                 coords: roundPoint(node.coords),
                 width: node.width,
                 height: node.height,
-                data: node.valueSet.getValues()
-            };
-            if (node.coordsTimestamp) {
-                newNode.coordsTimestamp = node.coordsTimestamp;
-            }
-            result.nodes.push(newNode);
+                data: node.valueSet.getValues(),
+                ...(includeCollabMeta
+                    ? {
+                        collabMeta: {
+                            removed: node.removed,
+                            selfRemoved: node.selfRemoved,
+                            selfRemovedTimestamp: node.selfRemovedTimestamp,
+                            geometryTimestamp: node.geometryTimestamp,
+                            dataTimestamps: node.valueSet.getTimestamps(),
+                            ...exportLabelCollabMeta(node)
+                        }
+                    }
+                    : {})
+            });
         }
-        for (const connection of model.connections.filter((e) => !e.removed)) {
+        for (const connection of model.connections) {
+            if (!includeCollabMeta && connection.removed)
+                continue;
             result.connections.push({
                 id: connection.id,
                 type: connection.type.id,
@@ -8388,12 +8954,36 @@ class DagaExporter {
                 middleLabel: connection.middleLabel,
                 endLabel: connection.endLabel,
                 points: connection.points,
-                data: connection.valueSet.getValues()
+                data: connection.valueSet.getValues(),
+                ...(includeCollabMeta
+                    ? {
+                        collabMeta: {
+                            removed: connection.removed,
+                            selfRemoved: connection.selfRemoved,
+                            selfRemovedTimestamp: connection.selfRemovedTimestamp,
+                            dataTimestamps: connection.valueSet.getTimestamps()
+                        }
+                    }
+                    : {})
             });
         }
         return result;
     }
 }
+function exportLabelCollabMeta({ label }) {
+    if (label) {
+        return {
+            label: {
+                removed: label.removed,
+                selfRemoved: label.selfRemoved,
+                selfRemovedTimestamp: label.selfRemovedTimestamp,
+                textTimestamp: label.textTimestamp
+            }
+        };
+    }
+    else
+        return {};
+}
 
 /**
  * Importer which imports a diagram from its daga model representation.
@@ -8411,9 +9001,6 @@ class DagaImporter {
         model.type = data.type;
         model.createdAt = new Date(data.createdAt);
         model.updatedAt = new Date(data.updatedAt);
-        if (data.logicalClock) {
-            model.logicalClock = data.logicalClock;
-        }
         for (const node of data.nodes || []) {
             const newNodeType = model.nodes.types.get(node.type);
             if (newNodeType) {
@@ -8421,9 +9008,6 @@ class DagaImporter {
                 model.nodes.add(newNode);
                 newNode.width = node.width;
                 newNode.height = node.height;
-                if (node.coordsTimestamp) {
-                    newNode.coordsTimestamp = node.coordsTimestamp;
-                }
                 if (node.label) {
                     // add node label
                     if (newNodeType.label) {
@@ -8504,6 +9088,18 @@ class DagaImporter {
                             }
                             ++portCounter;
                         }
+                        if (port.collabMeta) {
+                            newPort.selfRemoved = port.collabMeta.selfRemoved;
+                            newPort.selfRemovedTimestamp =
+                                port.collabMeta.selfRemovedTimestamp;
+                            importLabelCollabMeta(newPort.label, port.collabMeta.label);
+                        }
+                    }
+                    if (section.collabMeta) {
+                        newSection.selfRemoved = section.collabMeta.selfRemoved;
+                        newSection.selfRemovedTimestamp =
+                            section.collabMeta.selfRemovedTimestamp;
+                        importLabelCollabMeta(newSection.label, section.collabMeta.label);
                     }
                 }
                 let portCounter = 0;
@@ -8550,10 +9146,22 @@ class DagaImporter {
                         }
                         ++portCounter;
                     }
+                    if (port.collabMeta) {
+                        newPort.selfRemoved = port.collabMeta.selfRemoved;
+                        newPort.selfRemovedTimestamp = port.collabMeta.selfRemovedTimestamp;
+                        importLabelCollabMeta(newPort.label, port.collabMeta.label);
+                    }
                 }
                 if (node.data) {
                     newNode.valueSet.setValues(node.data);
                 }
+                if (node.collabMeta) {
+                    newNode.selfRemoved = node.collabMeta.selfRemoved;
+                    newNode.selfRemovedTimestamp = node.collabMeta.selfRemovedTimestamp;
+                    newNode.geometryTimestamp = node.collabMeta.geometryTimestamp;
+                    importLabelCollabMeta(newNode.label, node.collabMeta.label);
+                    newNode.valueSet.setTimestamps(node.collabMeta.dataTimestamps);
+                }
             }
         }
         for (const connection of data.connections || []) {
@@ -8568,15 +9176,32 @@ class DagaImporter {
                 if (connection.data) {
                     newConnection.valueSet.setValues(connection.data);
                 }
+                if (connection.collabMeta) {
+                    newConnection.selfRemoved = connection.collabMeta.selfRemoved;
+                    newConnection.selfRemovedTimestamp =
+                        connection.collabMeta.selfRemovedTimestamp;
+                    newConnection.valueSet.setTimestamps(connection.collabMeta.dataTimestamps);
+                }
             }
         }
         if (data.data) {
             model.valueSet.setValues(data.data);
         }
+        if (data.collabMeta) {
+            model.logicalClock = data.collabMeta.logicalClock;
+            model.valueSet.setTimestamps(data.collabMeta.dataTimestamps);
+        }
         model.canvas?.updateModelInView();
         return model;
     }
 }
+function importLabelCollabMeta(newLabel, labelCollabMeta) {
+    if (newLabel && labelCollabMeta) {
+        newLabel.selfRemoved = labelCollabMeta.selfRemoved;
+        newLabel.selfRemovedTimestamp = labelCollabMeta.selfRemovedTimestamp;
+        newLabel.textTimestamp = labelCollabMeta.textTimestamp;
+    }
+}
 
 /**
  * The context of a diagram. Every separate diagram must be contained within its own {@link DiagramComponent} and every {@link DiagramComponent} must contain its own {@link DiagramEditorComponent}.
@@ -8635,10 +9260,10 @@ class DiagramComponent {
             this.modelChange.emit(exportedModel);
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: DiagramComponent, deps: [{ token: DagaConfigurationService }, { token: CanvasProviderService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: DiagramComponent, isStandalone: true, selector: "daga-diagram", inputs: { config: "config", model: "model" }, outputs: { modelChange: "modelChange" }, providers: [CanvasProviderService, DagaConfigurationService], ngImport: i0, template: `<ng-content />`, isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: DiagramComponent, deps: [{ token: DagaConfigurationService }, { token: CanvasProviderService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.1", type: DiagramComponent, isStandalone: true, selector: "daga-diagram", inputs: { config: "config", model: "model" }, outputs: { modelChange: "modelChange" }, providers: [CanvasProviderService, DagaConfigurationService], ngImport: i0, template: `<ng-content />`, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: DiagramComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: DiagramComponent, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
@@ -8655,8 +9280,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
             }] } });
 
 class DagaModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: DagaModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.2", ngImport: i0, type: DagaModule, imports: [CollapseButtonComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: DagaModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.1", ngImport: i0, type: DagaModule, imports: [CollapseButtonComponent,
             DiagramButtonsComponent,
             DiagramComponent,
             DiagramEditorComponent,
@@ -8668,7 +9293,7 @@ class DagaModule {
             PropertyEditorComponent,
             CommonModule,
             FormsModule], exports: [DiagramComponent, DiagramEditorComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: DagaModule, providers: [DagaConfigurationService, CanvasProviderService], imports: [CollapseButtonComponent,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: DagaModule, providers: [DagaConfigurationService, CanvasProviderService], imports: [CollapseButtonComponent,
             DiagramButtonsComponent,
             DiagramEditorComponent,
             ErrorsComponent,
@@ -8680,7 +9305,7 @@ class DagaModule {
             CommonModule,
             FormsModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: DagaModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: DagaModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [],
@@ -8825,7 +9450,7 @@ class CollabClient {
         }
         canvas.collabEngine.isInRoom = true;
         const refId = v4();
-        const initialModel = new DagaExporter().export(canvas.model);
+        const initialModel = new DagaExporter().export(canvas.model, true);
         this.send({
             type: 'CREA',
             clientId: this.clientId,
@@ -8915,5 +9540,5 @@ function now() {
  * Generated bundle index. Do not edit.
  */
 
-export { ACTION_QUEUE_SIZE, ActionQueue, AddConnectionAction, AddNodeAction, AdjacencyLayout, BreadthAdjacencyLayout, BreadthLayout, CanvasProviderService, ClosedShape, CollabClient, CollapseButtonComponent, Corner, DagaConfigurationService, DagaExporter, DagaImporter, DagaModule, DiagramActions, DiagramButtonsComponent, DiagramCanvas, DiagramComponent, DiagramConnection, DiagramConnectionSet, DiagramConnectionType, DiagramEditorComponent, DiagramElement, DiagramEntitySet, DiagramField, DiagramFieldSet, DiagramModel, DiagramNode, DiagramNodeSet, DiagramNodeType, DiagramPort, DiagramPortSet, DiagramSection, DiagramSectionSet, EditFieldAction, ErrorsComponent, ForceLayout, HorizontalAlign, HorizontalLayout, LineShape, LineStyle, MoveNodeAction, ObjectEditorComponent, PaletteComponent, PriorityLayout, Property, PropertyEditorComponent, PropertySet, RemoveAction, Side, StretchNodeAction, TextListEditorComponent, TextMapEditorComponent, Type, UpdateValuesAction, ValueSet, VerticalAlign, VerticalLayout, layouts };
+export { ACTION_QUEUE_SIZE, ActionQueue, AddConnectionAction, AddNodeAction, AdjacencyLayout, BreadthAdjacencyLayout, BreadthLayout, CanvasProviderService, ClosedShape, CollabClient, CollapseButtonComponent, Corner, DagaConfigurationService, DagaExporter, DagaImporter, DagaModule, DiagramActions, DiagramButtonsComponent, DiagramCanvas, DiagramComponent, DiagramConnection, DiagramConnectionSet, DiagramConnectionType, DiagramEditorComponent, DiagramElement, DiagramEntitySet, DiagramField, DiagramFieldSet, DiagramModel, DiagramNode, DiagramNodeSet, DiagramNodeType, DiagramPort, DiagramPortSet, DiagramSection, DiagramSectionSet, EditFieldAction, ErrorsComponent, ForceLayout, HorizontalAlign, HorizontalLayout, LineShape, LineStyle, ObjectEditorComponent, PaletteComponent, PriorityLayout, Property, PropertyEditorComponent, PropertySet, RemoveAction, SetGeometryAction, Side, TextListEditorComponent, TextMapEditorComponent, Type, UpdateValuesAction, ValueSet, VerticalAlign, VerticalLayout, layouts };
 //# sourceMappingURL=metadev-daga.mjs.map