@metadev/daga 1.5.5 → 1.5.7

package/fesm2022/metadev-daga.mjs

@@ -150,52 +150,52 @@ class CollapseButtonComponent {
         switch (this.direction) {
             case Side.Right:
                 if (this.disabled) {
-                    return 'horizontal-none';
+                    return 'daga-horizontal-none';
                 }
                 else if (this.collapsed) {
-                    return 'horizontal-right';
+                    return 'daga-horizontal-right';
                 }
                 else {
-                    return 'horizontal-left';
+                    return 'daga-horizontal-left';
                 }
             case Side.Bottom:
                 if (this.disabled) {
-                    return 'vertical-none';
+                    return 'daga-vertical-none';
                 }
                 else if (this.collapsed) {
-                    return 'vertical-down';
+                    return 'daga-vertical-down';
                 }
                 else {
-                    return 'vertical-up';
+                    return 'daga-vertical-up';
                 }
             case Side.Left:
                 if (this.disabled) {
-                    return 'horizontal-none';
+                    return 'daga-horizontal-none';
                 }
                 else if (this.collapsed) {
-                    return 'horizontal-left';
+                    return 'daga-horizontal-left';
                 }
                 else {
-                    return 'horizontal-right';
+                    return 'daga-horizontal-right';
                 }
             case Side.Top:
                 if (this.disabled) {
-                    return 'vertical-none';
+                    return 'daga-vertical-none';
                 }
                 else if (this.collapsed) {
-                    return 'vertical-up';
+                    return 'daga-vertical-up';
                 }
                 else {
-                    return 'vertical-down';
+                    return 'daga-vertical-down';
                 }
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: CollapseButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.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\r\n  class=\"daga-collapse-button daga-{{ direction }}\"\r\n  (click)=\"toggleCollapse()\"\r\n>\r\n  <div [class]=\"getClass()\"></div>\r\n</button>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", 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" }]
+            args: [{ standalone: true, selector: 'daga-collapse-button', imports: [CommonModule], template: "<button\r\n  class=\"daga-collapse-button daga-{{ direction }}\"\r\n  (click)=\"toggleCollapse()\"\r\n>\r\n  <div [class]=\"getClass()\"></div>\r\n</button>\r\n" }]
         }], propDecorators: { collapsableSelector: [{
                 type: Input
             }], collapsableAdditionalSelector: [{
@@ -655,60 +655,6 @@ const addIfNotExists = (arr, obj) => {
     return arr;
 };
 
-/**
- * Default priority value for diagram elements.
- * @private
- */
-const DEFAULT_PRIORITY = 0;
-/**
- * Represents an object which exists as part of a specific diagram model and has a visual representation in a diagram canvas.
- * @public
- * @see DiagramModel
- * @see DiagramCanvas
- */
-class DiagramElement {
-    get id() {
-        return this._id;
-    }
-    constructor(model, id) {
-        /**
-         * Whether this diagram element is currently highlighted by the user.
-         * @private
-         */
-        this.highlighted = false;
-        /**
-         * Whether this diagram element is currently selected by the user.
-         * @private
-         */
-        this.selected = false;
-        /**
-         * 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.selfRemovedTimestamp = null;
-        this.model = model;
-        this._id = id;
-    }
-    /**
-     * Obtain the selection of this element.
-     * @private
-     */
-    select() {
-        return this.model.canvas?.selectCanvasView()?.select(`g#${this.id}`);
-    }
-}
 /**
  * Represents a collection of diagram entities of a type that exists as part of a diagram model.
  * @public
@@ -729,11 +675,11 @@ class DiagramEntitySet {
         this.entityMap = {};
     }
     /**
-     * The number of entities of this set.
+     * The number of entities in this set.
      * @public
      */
     get length() {
-        return this.entities.length;
+        return this.size();
     }
     /**
      * Gets all of the entities of this set.
@@ -774,6 +720,14 @@ class DiagramEntitySet {
     contains(id) {
         return this.entityMap[id] !== undefined;
     }
+    /**
+     * Counts the number of entities of this set following the given criteria.
+     * @public
+     * @returns The number of entities of this set following the given criteria.
+     */
+    count(predicate) {
+        return this.entities.filter(predicate).length;
+    }
     /**
      * Gets all of the entities of this set filtered following given criteria.
      * @public
@@ -799,6 +753,14 @@ class DiagramEntitySet {
     get(id) {
         return this.entityMap[id];
     }
+    /**
+     * Gets all of the entities of this set mapped to the result of the given function applied to them.
+     * @public
+     * @returns An array containing the entities of this set that meet the given criteria.
+     */
+    map(callback) {
+        return this.entities.map(callback);
+    }
     /**
      * Attempts to find and remove an entity with the given id. Has no effect if there are no entities with the given id.
      * @public
@@ -811,15 +773,159 @@ class DiagramEntitySet {
             removeIfExists(this.entities, entity);
         }
     }
+    /**
+     * Gets the number of entities in this set.
+     * @public
+     */
+    size() {
+        return this.entities.length;
+    }
     /**
      * Iterator to iterate over the entities of this set.
      * @public
      */
     *[Symbol.iterator]() {
-        let counter = 0;
-        while (counter < this.entities.length) {
-            yield this.entities[counter];
-            ++counter;
+        for (const entity of this.entities) {
+            yield entity;
+        }
+    }
+}
+
+/**
+ * Default priority value for diagram elements.
+ * @private
+ */
+const DEFAULT_PRIORITY = 0;
+/**
+ * Represents an object which exists as part of a specific diagram model and has a visual representation in a diagram canvas.
+ * @public
+ * @see DiagramModel
+ * @see DiagramCanvas
+ */
+class DiagramElement {
+    get id() {
+        return this._id;
+    }
+    constructor(model, id) {
+        /**
+         * Whether this diagram element is currently highlighted by the user.
+         * @private
+         */
+        this.highlighted = false;
+        /**
+         * Whether this diagram element is currently selected by the user.
+         * @private
+         */
+        this.selected = false;
+        /**
+         * 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.selfRemovedTimestamp = null;
+        this.model = model;
+        this._id = id;
+    }
+    /**
+     * Obtain the selection of this element.
+     * @private
+     */
+    select() {
+        return this.model.canvas?.selectCanvasView()?.select(`g#${this.id}`);
+    }
+}
+class DiagramElementSet extends DiagramEntitySet {
+    all(includeRemoved = false) {
+        if (includeRemoved) {
+            return super.all();
+        }
+        else {
+            return super.filter((e) => !e.removed);
+        }
+    }
+    contains(id, includeRemoved = false) {
+        if (includeRemoved) {
+            return super.contains(id);
+        }
+        else {
+            return super.contains(id) && !this.entityMap[id].removed;
+        }
+    }
+    count(predicate, includeRemoved = false) {
+        if (includeRemoved) {
+            return super.count(predicate);
+        }
+        else {
+            return super.count((e, i, a) => predicate(e, i, a) && !e.removed);
+        }
+    }
+    filter(predicate, includeRemoved = false) {
+        if (includeRemoved) {
+            return super.filter(predicate);
+        }
+        else {
+            return super.filter((e, i, a) => predicate(e, i, a) && !e.removed);
+        }
+    }
+    find(predicate, includeRemoved = false) {
+        if (includeRemoved) {
+            return super.find(predicate);
+        }
+        else {
+            return super.find((e, i, a) => predicate(e, i, a) && !e.removed);
+        }
+    }
+    get(id, includeRemoved = false) {
+        if (includeRemoved) {
+            return super.get(id);
+        }
+        else {
+            return super.contains(id) && !this.entityMap[id].removed
+                ? super.get(id)
+                : undefined;
+        }
+    }
+    map(callback, includeRemoved = false) {
+        if (includeRemoved) {
+            return super.map(callback);
+        }
+        else {
+            return super.filter((e) => !e.removed).map(callback);
+        }
+    }
+    /**
+     * Gets the number of entities in this set.
+     * @public
+     */
+    size(includeRemoved = false) {
+        if (includeRemoved) {
+            return super.size();
+        }
+        else {
+            return super.filter((e) => !e.removed).length;
+        }
+    }
+    *[Symbol.iterator](includeRemoved = false) {
+        if (includeRemoved) {
+            for (const entity of this.entities) {
+                yield entity;
+            }
+        }
+        else {
+            for (const entity of this.entities.filter((e) => !e.removed)) {
+                yield entity;
+            }
         }
     }
 }
@@ -1692,7 +1798,7 @@ class DiagramConnection extends DiagramElement {
         }
     }
 }
-class DiagramConnectionSet extends DiagramEntitySet {
+class DiagramConnectionSet extends DiagramElementSet {
     /**
      * Instance a set of connections for the given model. This method is used internally.
      * @private
@@ -2263,10 +2369,13 @@ class DiagramSection extends DiagramElement {
      * @public
      * @returns A list of connections.
      */
-    getIncomingConnections() {
+    getIncomingConnections(includeRemoved = false) {
         const result = [];
         for (const port of this.ports) {
             for (const incomingConnection of port.incomingConnections) {
+                if (!includeRemoved && incomingConnection.removed) {
+                    continue;
+                }
                 result.push(incomingConnection);
             }
         }
@@ -2277,10 +2386,13 @@ class DiagramSection extends DiagramElement {
      * @public
      * @returns A list of connections.
      */
-    getOutgoingConnections() {
+    getOutgoingConnections(includeRemoved = false) {
         const result = [];
         for (const port of this.ports) {
             for (const outgoingConnection of port.outgoingConnections) {
+                if (!includeRemoved && outgoingConnection.removed) {
+                    continue;
+                }
                 result.push(outgoingConnection);
             }
         }
@@ -2291,13 +2403,19 @@ class DiagramSection extends DiagramElement {
      * @public
      * @returns A list of connections.
      */
-    getConnections() {
+    getConnections(includeRemoved = false) {
         const result = [];
         for (const port of this.ports) {
             for (const incomingConnection of port.incomingConnections) {
+                if (!includeRemoved && incomingConnection.removed) {
+                    continue;
+                }
                 result.push(incomingConnection);
             }
             for (const outgoingConnection of port.outgoingConnections) {
+                if (!includeRemoved && outgoingConnection.removed) {
+                    continue;
+                }
                 result.push(outgoingConnection);
             }
         }
@@ -2392,13 +2510,17 @@ class DiagramSection extends DiagramElement {
         // Set label's dimensions as a function of ours.
         if (this.label) {
             this.label.coords = [
-                this.coords[0] + (this.getConfig()?.label?.margin || 0),
-                this.coords[1] + (this.getConfig()?.label?.margin || 0)
+                this.coords[0] + getLeftMargin(this.getConfig()?.label),
+                this.coords[1] + getTopMargin(this.getConfig()?.label)
             ];
-            (this.label.width =
-                this.width - (this.getConfig()?.label?.margin || 0) * 2),
-                (this.label.height =
-                    this.height - (this.getConfig()?.label?.margin || 0) * 2);
+            this.label.width =
+                this.width -
+                    getLeftMargin(this.getConfig()?.label) -
+                    getRightMargin(this.getConfig()?.label);
+            this.label.height =
+                this.height -
+                    getTopMargin(this.getConfig()?.label) -
+                    getBottomMargin(this.getConfig()?.label);
             this.label.updateInView();
         }
         // Move decorators to match the new coords.
@@ -2410,7 +2532,7 @@ class DiagramSection extends DiagramElement {
         this.updateInView();
     }
 }
-class DiagramSectionSet extends DiagramEntitySet {
+class DiagramSectionSet extends DiagramElementSet {
     /**
      * Instance a set of sections for the given model. This method is used internally.
      * @private
@@ -2480,9 +2602,13 @@ class DiagramSectionSet extends DiagramEntitySet {
                 ...sectionLabel
             };
             this.model.fields.new(section, [
-                section.coords[0] + labelConfiguration.margin,
-                section.coords[1] + labelConfiguration.margin
-            ], labelConfiguration.fontSize, labelConfiguration.fontFamily, labelConfiguration.color, labelConfiguration.selectedColor, section.width - labelConfiguration.margin * 2, section.height - labelConfiguration.margin * 2, labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, '', labelConfiguration.editable, labelConfiguration.fit);
+                section.coords[0] + getLeftMargin(labelConfiguration),
+                section.coords[1] + getTopMargin(labelConfiguration)
+            ], labelConfiguration.fontSize, labelConfiguration.fontFamily, labelConfiguration.color, labelConfiguration.selectedColor, section.width -
+                getLeftMargin(labelConfiguration) -
+                getRightMargin(labelConfiguration), section.height -
+                getTopMargin(labelConfiguration) -
+                getBottomMargin(labelConfiguration), labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, '', labelConfiguration.editable, labelConfiguration.fit);
         }
         return section;
     }
@@ -2656,10 +2782,13 @@ class DiagramNode extends DiagramElement {
      * @public
      * @returns A list of connections.
      */
-    getIncomingConnections() {
+    getIncomingConnections(includeRemoved = false) {
         const result = [];
         for (const port of this.ports) {
             for (const incomingConnection of port.incomingConnections) {
+                if (!includeRemoved && incomingConnection.removed) {
+                    continue;
+                }
                 result.push(incomingConnection);
             }
         }
@@ -2670,10 +2799,13 @@ class DiagramNode extends DiagramElement {
      * @public
      * @returns A list of connections.
      */
-    getOutgoingConnections() {
+    getOutgoingConnections(includeRemoved = false) {
         const result = [];
         for (const port of this.ports) {
             for (const outgoingConnection of port.outgoingConnections) {
+                if (!includeRemoved && outgoingConnection.removed) {
+                    continue;
+                }
                 result.push(outgoingConnection);
             }
         }
@@ -2684,13 +2816,19 @@ class DiagramNode extends DiagramElement {
      * @public
      * @returns A list of connections.
      */
-    getConnections() {
+    getConnections(includeRemoved = false) {
         const result = [];
         for (const port of this.ports) {
             for (const incomingConnection of port.incomingConnections) {
+                if (!includeRemoved && incomingConnection.removed) {
+                    continue;
+                }
                 result.push(incomingConnection);
             }
             for (const outgoingConnection of port.outgoingConnections) {
+                if (!includeRemoved && outgoingConnection.removed) {
+                    continue;
+                }
                 result.push(outgoingConnection);
             }
         }
@@ -2701,18 +2839,30 @@ class DiagramNode extends DiagramElement {
      * @public
      * @returns A list of nodes.
      */
-    getAdjacentNodes() {
+    getAdjacentNodes(includeRemoved = false) {
         const result = [];
         for (const port of this.ports) {
             for (const incomingConnection of port.incomingConnections) {
+                if (!includeRemoved && incomingConnection.removed) {
+                    continue;
+                }
                 const otherNode = incomingConnection.start?.getNode();
                 if (otherNode) {
+                    if (!includeRemoved && otherNode.removed) {
+                        continue;
+                    }
                     result.push(otherNode);
                 }
             }
             for (const outgoingConnection of port.outgoingConnections) {
+                if (!includeRemoved && outgoingConnection.removed) {
+                    continue;
+                }
                 const otherNode = outgoingConnection.end?.getNode();
                 if (otherNode) {
+                    if (!includeRemoved && otherNode.removed) {
+                        continue;
+                    }
                     result.push(otherNode);
                 }
             }
@@ -2920,11 +3070,17 @@ class DiagramNode extends DiagramElement {
         // 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.coords[0] + getLeftMargin(this.type.label),
+                this.coords[1] + getTopMargin(this.type.label)
             ];
-            (this.label.width = this.width - (this.type.label?.margin || 0) * 2),
-                (this.label.height = this.height - (this.type.label?.margin || 0) * 2);
+            this.label.width =
+                this.width -
+                    getLeftMargin(this.type.label) -
+                    getRightMargin(this.type.label);
+            this.label.height =
+                this.height -
+                    getTopMargin(this.type.label) -
+                    getBottomMargin(this.type.label);
             this.label.updateInView();
         }
         // Move decorators to match the new coords.
@@ -2936,7 +3092,7 @@ class DiagramNode extends DiagramElement {
         this.updateInView();
     }
 }
-class DiagramNodeSet extends DiagramEntitySet {
+class DiagramNodeSet extends DiagramElementSet {
     /**
      * Instance a set of nodes for the given model. This method is used internally.
      * @private
@@ -3042,9 +3198,13 @@ class DiagramNodeSet extends DiagramEntitySet {
                 ...nodeType.label
             };
             this.model.fields.new(node, [
-                node.coords[0] + labelConfiguration.margin,
-                node.coords[1] + labelConfiguration.margin
-            ], labelConfiguration.fontSize, labelConfiguration.fontFamily, labelConfiguration.color, labelConfiguration.selectedColor, node.width - labelConfiguration.margin * 2, node.height - labelConfiguration.margin * 2, labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, '', labelConfiguration.editable, labelConfiguration.fit);
+                node.coords[0] + getLeftMargin(labelConfiguration),
+                node.coords[1] + getTopMargin(labelConfiguration)
+            ], labelConfiguration.fontSize, labelConfiguration.fontFamily, labelConfiguration.color, labelConfiguration.selectedColor, node.width -
+                getLeftMargin(labelConfiguration) -
+                getRightMargin(labelConfiguration), node.height -
+                getTopMargin(labelConfiguration) -
+                getBottomMargin(labelConfiguration), labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, '', labelConfiguration.editable, labelConfiguration.fit);
         }
         node.valueSet.resetValues();
         node.model.canvas?.fitNodeInView(node.id);
@@ -3183,7 +3343,7 @@ class DiagramPort extends DiagramElement {
         return distanceBetweenPoints(this.coords, coords);
     }
 }
-class DiagramPortSet extends DiagramEntitySet {
+class DiagramPortSet extends DiagramElementSet {
     /**
      * Instance a set of ports for the given model. This method is used internally.
      * @private
@@ -3326,7 +3486,7 @@ class DiagramField extends DiagramElement {
         return this.rootElement?.getPriority() || DEFAULT_PRIORITY;
     }
 }
-class DiagramFieldSet extends DiagramEntitySet {
+class DiagramFieldSet extends DiagramElementSet {
     /**
      * Instance a set of fields for the given model. This method is used internally.
      * @private
@@ -3367,6 +3527,206 @@ class DiagramFieldSet extends DiagramEntitySet {
         }
     }
 }
+const getBottomMargin = (config) => {
+    if (config?.margin === null || config?.margin === undefined) {
+        return DIAGRAM_FIELD_DEFAULTS.margin;
+    }
+    else if (typeof config.margin === 'number') {
+        return config.margin;
+    }
+    else {
+        if (config.margin.length === 0) {
+            return DIAGRAM_FIELD_DEFAULTS.margin;
+        }
+        else if (config.margin.length === 1) {
+            return config.margin[0];
+        }
+        else if (config.margin.length === 2) {
+            return config.margin[0];
+        }
+        else if (config.margin.length === 3) {
+            return config.margin[2];
+        }
+        else {
+            return config.margin[2];
+        }
+    }
+};
+const getLeftMargin = (config) => {
+    if (config?.margin === null || config?.margin === undefined) {
+        return DIAGRAM_FIELD_DEFAULTS.margin;
+    }
+    else if (typeof config.margin === 'number') {
+        return config.margin;
+    }
+    else {
+        if (config.margin.length === 0) {
+            return DIAGRAM_FIELD_DEFAULTS.margin;
+        }
+        else if (config.margin.length === 1) {
+            return config.margin[0];
+        }
+        else if (config.margin.length === 2) {
+            return config.margin[1];
+        }
+        else if (config.margin.length === 3) {
+            return config.margin[1];
+        }
+        else {
+            return config.margin[3];
+        }
+    }
+};
+const getRightMargin = (config) => {
+    if (config?.margin === null || config?.margin === undefined) {
+        return DIAGRAM_FIELD_DEFAULTS.margin;
+    }
+    else if (typeof config.margin === 'number') {
+        return config.margin;
+    }
+    else {
+        if (config.margin.length === 0) {
+            return DIAGRAM_FIELD_DEFAULTS.margin;
+        }
+        else if (config.margin.length === 1) {
+            return config.margin[0];
+        }
+        else if (config.margin.length === 2) {
+            return config.margin[1];
+        }
+        else if (config.margin.length === 3) {
+            return config.margin[1];
+        }
+        else {
+            return config.margin[1];
+        }
+    }
+};
+const getTopMargin = (config) => {
+    if (config?.margin === null || config?.margin === undefined) {
+        return DIAGRAM_FIELD_DEFAULTS.margin;
+    }
+    else if (typeof config.margin === 'number') {
+        return config.margin;
+    }
+    else {
+        if (config.margin.length === 0) {
+            return DIAGRAM_FIELD_DEFAULTS.margin;
+        }
+        else if (config.margin.length === 1) {
+            return config.margin[0];
+        }
+        else if (config.margin.length === 2) {
+            return config.margin[0];
+        }
+        else if (config.margin.length === 3) {
+            return config.margin[0];
+        }
+        else {
+            return config.margin[0];
+        }
+    }
+};
+const getBottomPadding = (config) => {
+    if (config?.padding === null || config?.padding === undefined) {
+        return DIAGRAM_FIELD_DEFAULTS.padding;
+    }
+    else if (typeof config.padding === 'number') {
+        return config.padding;
+    }
+    else {
+        if (config.padding.length === 0) {
+            return DIAGRAM_FIELD_DEFAULTS.padding;
+        }
+        else if (config.padding.length === 1) {
+            return config.padding[0];
+        }
+        else if (config.padding.length === 2) {
+            return config.padding[0];
+        }
+        else if (config.padding.length === 3) {
+            return config.padding[2];
+        }
+        else {
+            return config.padding[2];
+        }
+    }
+};
+const getLeftPadding = (config) => {
+    if (config?.padding === null || config?.padding === undefined) {
+        return DIAGRAM_FIELD_DEFAULTS.padding;
+    }
+    else if (typeof config.padding === 'number') {
+        return config.padding;
+    }
+    else {
+        if (config.padding.length === 0) {
+            return DIAGRAM_FIELD_DEFAULTS.padding;
+        }
+        else if (config.padding.length === 1) {
+            return config.padding[0];
+        }
+        else if (config.padding.length === 2) {
+            return config.padding[1];
+        }
+        else if (config.padding.length === 3) {
+            return config.padding[1];
+        }
+        else {
+            return config.padding[3];
+        }
+    }
+};
+const getRightPadding = (config) => {
+    if (config?.padding === null || config?.padding === undefined) {
+        return DIAGRAM_FIELD_DEFAULTS.padding;
+    }
+    else if (typeof config.padding === 'number') {
+        return config.padding;
+    }
+    else {
+        if (config.padding.length === 0) {
+            return DIAGRAM_FIELD_DEFAULTS.padding;
+        }
+        else if (config.padding.length === 1) {
+            return config.padding[0];
+        }
+        else if (config.padding.length === 2) {
+            return config.padding[1];
+        }
+        else if (config.padding.length === 3) {
+            return config.padding[1];
+        }
+        else {
+            return config.padding[1];
+        }
+    }
+};
+const getTopPadding = (config) => {
+    if (config?.padding === null || config?.padding === undefined) {
+        return DIAGRAM_FIELD_DEFAULTS.padding;
+    }
+    else if (typeof config.padding === 'number') {
+        return config.padding;
+    }
+    else {
+        if (config.padding.length === 0) {
+            return DIAGRAM_FIELD_DEFAULTS.padding;
+        }
+        else if (config.padding.length === 1) {
+            return config.padding[0];
+        }
+        else if (config.padding.length === 2) {
+            return config.padding[0];
+        }
+        else if (config.padding.length === 3) {
+            return config.padding[0];
+        }
+        else {
+            return config.padding[0];
+        }
+    }
+};
 
 /**
  * Importer which imports a diagram from its daga model representation.
@@ -3414,9 +3774,13 @@ class DagaImporter {
                         ...newNodeType.label
                     };
                     const newField = new DiagramField(model, newNode, [
-                        newNode.coords[0] + labelConfiguration.margin,
-                        newNode.coords[1] + labelConfiguration.margin
-                    ], newNode.width - labelConfiguration.margin * 2, newNode.height - labelConfiguration.margin * 2, labelConfiguration.fontSize, labelConfiguration.fontFamily, labelConfiguration.color, labelConfiguration.selectedColor, labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, '', labelConfiguration.editable, labelConfiguration.fit);
+                        newNode.coords[0] + getLeftMargin(labelConfiguration),
+                        newNode.coords[1] + getTopMargin(labelConfiguration)
+                    ], newNode.width -
+                        getLeftMargin(labelConfiguration) -
+                        getRightMargin(labelConfiguration), newNode.height -
+                        getTopMargin(labelConfiguration) -
+                        getBottomMargin(labelConfiguration), labelConfiguration.fontSize, labelConfiguration.fontFamily, labelConfiguration.color, labelConfiguration.selectedColor, labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, '', labelConfiguration.editable, labelConfiguration.fit);
                     newField.text = node.label;
                     newNode.label = newField;
                     model.fields.add(newField);
@@ -3435,9 +3799,13 @@ class DagaImporter {
                             ...newNodeType.sectionGrid?.sections?.[section.indexYInNode]?.[section.indexXInNode]?.label
                         };
                         const newField = new DiagramField(model, newSection, [
-                            newSection.coords[0] + labelConfiguration.margin,
-                            newSection.coords[1] + labelConfiguration.margin
-                        ], newSection.width - labelConfiguration.margin * 2, newSection.height - labelConfiguration.margin * 2, labelConfiguration.fontSize, labelConfiguration.fontFamily, labelConfiguration.color, labelConfiguration.selectedColor, labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, '', labelConfiguration.editable, labelConfiguration.fit);
+                            newSection.coords[0] + getLeftMargin(labelConfiguration),
+                            newSection.coords[1] + getTopMargin(labelConfiguration)
+                        ], newSection.width -
+                            getLeftMargin(labelConfiguration) -
+                            getRightMargin(labelConfiguration), newSection.height -
+                            getTopMargin(labelConfiguration) -
+                            getBottomMargin(labelConfiguration), labelConfiguration.fontSize, labelConfiguration.fontFamily, labelConfiguration.color, labelConfiguration.selectedColor, labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, '', labelConfiguration.editable, labelConfiguration.fit);
                         newField.text = section.label;
                         newSection.label = newField;
                         model.fields.add(newField);
@@ -3654,7 +4022,7 @@ class SetGeometryCollabAction {
         this.timestamp = timestamp;
     }
     do() {
-        const node = this.canvas.model.nodes.get(this.nodeId);
+        const node = this.canvas.model.nodes.get(this.nodeId, true);
         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.
@@ -3695,8 +4063,8 @@ class AddConnectionCollabAction {
         this.endId = endId;
     }
     do() {
-        const start = this.canvas.model.ports.get(this.startId);
-        const end = this.canvas.model.ports.get(this.endId);
+        const start = this.canvas.model.ports.get(this.startId, true);
+        const end = this.canvas.model.ports.get(this.endId, true);
         if (start && end) {
             this.canvas.model.connections.new(this.typeId, start, end, this.id);
         }
@@ -3727,7 +4095,7 @@ class EditFieldCollabAction {
         this.timestamp = timestamp;
     }
     do() {
-        const field = this.canvas.model.fields.get(this.fieldId);
+        const field = this.canvas.model.fields.get(this.fieldId, true);
         if (field && timestampWins(this.timestamp, field.textTimestamp)) {
             field.text = this.to;
             field.textTimestamp = this.timestamp;
@@ -3762,8 +4130,8 @@ class UpdateValuesCollabAction {
             return this.canvas.model.valueSet;
         }
         else {
-            return (this.canvas.model.nodes.get(this.id) ||
-                this.canvas.model.connections.get(this.id))?.valueSet;
+            return (this.canvas.model.nodes.get(this.id, true) ||
+                this.canvas.model.connections.get(this.id, true))?.valueSet;
         }
     }
     do() {
@@ -3811,19 +4179,19 @@ class SetSelfRemovedCollabAction {
     }
     do() {
         for (const nodeId of this.nodeIds) {
-            this.doOne(this.canvas.model.nodes.get(nodeId));
+            this.doOne(this.canvas.model.nodes.get(nodeId, true));
         }
         for (const sectionId of this.sectionIds) {
-            this.doOne(this.canvas.model.sections.get(sectionId));
+            this.doOne(this.canvas.model.sections.get(sectionId, true));
         }
         for (const portId of this.portIds) {
-            this.doOne(this.canvas.model.ports.get(portId));
+            this.doOne(this.canvas.model.ports.get(portId, true));
         }
         for (const connectionId of this.connectionIds) {
-            this.doOne(this.canvas.model.connections.get(connectionId));
+            this.doOne(this.canvas.model.connections.get(connectionId, true));
         }
         for (const fieldId of this.fieldIds) {
-            this.doOne(this.canvas.model.fields.get(fieldId));
+            this.doOne(this.canvas.model.fields.get(fieldId, true));
         }
         // update view
         this.canvas.updateNodesInView(...this.nodeIds);
@@ -4478,13 +4846,13 @@ class AdjacencyLayout {
         }
         // arrange nodes
         const nodeArrangement = new Grid();
-        const nodesToBeArranged = [...model.nodes];
+        const nodesToBeArranged = model.nodes.all();
         while (nodesToBeArranged.length > 0) {
             arrangeNode(nodesToBeArranged[0], nodeArrangement, [0, 0], nodesToBeArranged);
         }
         // place nodes according to arrangement
-        const maximumWidth = Math.max(...model.nodes.all().map((n) => n.width));
-        const maximumHeight = Math.max(...model.nodes.all().map((n) => n.height));
+        const maximumWidth = Math.max(...model.nodes.map((n) => n.width));
+        const maximumHeight = Math.max(...model.nodes.map((n) => n.height));
         const gapSize = (model.canvas?.gridSize || 0) * 2;
         for (let y = nodeArrangement.minY(); y <= nodeArrangement.maxY(); ++y) {
             for (let x = nodeArrangement.minX(); x <= nodeArrangement.maxX(); ++x) {
@@ -4524,7 +4892,7 @@ class BreadthAdjacencyLayout {
         }
         // arrange nodes
         const nodeArrangement = new Grid();
-        const nodesToBeArranged = [...model.nodes];
+        const nodesToBeArranged = model.nodes.all();
         const nodeGridIndices = {};
         const firstNode = nodesToBeArranged[0];
         let currentNodeLevel = [firstNode];
@@ -4554,8 +4922,8 @@ class BreadthAdjacencyLayout {
             }
         }
         // place nodes according to arrangement
-        const maximumWidth = Math.max(...model.nodes.all().map((n) => n.width));
-        const maximumHeight = Math.max(...model.nodes.all().map((n) => n.height));
+        const maximumWidth = Math.max(...model.nodes.map((n) => n.width));
+        const maximumHeight = Math.max(...model.nodes.map((n) => n.height));
         const gapSize = (model.canvas?.gridSize || 0) * 2;
         for (let y = nodeArrangement.minY(); y <= nodeArrangement.maxY(); ++y) {
             for (let x = nodeArrangement.minX(); x <= nodeArrangement.maxX(); ++x) {
@@ -4584,7 +4952,7 @@ class BreadthLayout {
             return model;
         }
         const gapSize = (model.canvas?.gridSize || 0) * 2;
-        let nodesToBeArranged = [...model.nodes];
+        let nodesToBeArranged = model.nodes.all();
         // Arrange nodes by a breadth first search
         const firstNode = nodesToBeArranged[0];
         removeIfExists(nodesToBeArranged, firstNode);
@@ -4609,7 +4977,6 @@ class BreadthLayout {
                 }
             }
             if (nodesInNextRow.length > 0) {
-                nodesInNextRow.sort((a, b) => b.type.priority - a.type.priority);
                 nodeArrangement.push(nodesInNextRow);
             }
             else {
@@ -4805,17 +5172,17 @@ class PriorityLayout {
             // nothing to arrange...
             return model;
         }
-        const maximumPriority = Math.max(...model.nodes.filter((n) => !n.removed).map((n) => n.getPriority()));
-        const minimumPriority = Math.min(...model.nodes.filter((n) => !n.removed).map((n) => n.getPriority()));
+        const maximumPriority = Math.max(...model.nodes.map((n) => n.getPriority()));
+        const minimumPriority = Math.min(...model.nodes.map((n) => n.getPriority()));
         if (maximumPriority === minimumPriority) {
             // if there's no disparity in priorities, just use breadth layout
             new BreadthLayout().apply(model);
             return model;
         }
         const gapSize = (model.canvas?.gridSize || 0) * 2;
-        const nodesToBeArranged = [...model.nodes];
+        const nodesToBeArranged = model.nodes.all();
         const nodeArrangement = [];
-        const nodesWithMaximumPriorityToBeArranged = model.nodes.filter((n) => !n.removed && n.getPriority() >= maximumPriority);
+        const nodesWithMaximumPriorityToBeArranged = model.nodes.filter((n) => n.getPriority() >= maximumPriority);
         const nodesWithMaximumPriority = [];
         if (nodesWithMaximumPriorityToBeArranged.length > 1) {
             // use bfs to sort nodes by distance to the first node
@@ -4914,8 +5281,8 @@ class TreeLayout {
             // nothing to arrange...
             return model;
         }
-        const maximumPriority = Math.max(...model.nodes.filter((n) => !n.removed).map((n) => n.getPriority()));
-        const minimumPriority = Math.min(...model.nodes.filter((n) => !n.removed).map((n) => n.getPriority()));
+        const maximumPriority = Math.max(...model.nodes.map((n) => n.getPriority()));
+        const minimumPriority = Math.min(...model.nodes.map((n) => n.getPriority()));
         if (maximumPriority === minimumPriority) {
             // if there's no disparity in priorities, just use breadth layout
             new BreadthLayout().apply(model);
@@ -4936,7 +5303,7 @@ class TreeLayout {
             branchArrangement.push([branch]);
             arrangeBranches(branch, branchArrangement, branchArrangement.length);
         }
-        const maximumHeight = Math.max(...model.nodes.all().map((n) => n.height));
+        const maximumHeight = Math.max(...model.nodes.map((n) => n.height));
         let widthAccumulator = 0;
         for (let i = 0; i < branchArrangement.length; ++i) {
             let heightAccumulator = 0;
@@ -4957,7 +5324,9 @@ class TreeLayout {
     }
 }
 const populateBranches = (branch, nodesToBeArranged) => {
-    for (const adjacentNode of branch.node.getAdjacentNodes()) {
+    for (const adjacentNode of branch.node
+        .getAdjacentNodes()
+        .sort((n1, n2) => n2.getPriority() - n1.getPriority())) {
         const indexOfAdjacentNode = nodesToBeArranged.indexOf(adjacentNode);
         if (indexOfAdjacentNode >= 0) {
             nodesToBeArranged.splice(indexOfAdjacentNode, 1);
@@ -5266,12 +5635,12 @@ class DagaExporter {
         if (model.description) {
             result.description = model.description;
         }
-        for (const node of model.nodes) {
+        for (const node of model.nodes.all(true)) {
             if (!includeCollabMeta && node.removed)
                 continue;
             result.nodes.push(this.exportNode(node, includeCollabMeta));
         }
-        for (const connection of model.connections) {
+        for (const connection of model.connections.all(true)) {
             if (!includeCollabMeta && connection.removed)
                 continue;
             result.connections.push(this.exportConnection(connection, includeCollabMeta));
@@ -5467,7 +5836,7 @@ class DiagramDecorator extends DiagramElement {
         return this.priority;
     }
 }
-class DiagramDecoratorSet extends DiagramEntitySet {
+class DiagramDecoratorSet extends DiagramElementSet {
     /**
      * Instance a set of decorators for the given model. This method is used internally.
      * @private
@@ -5547,7 +5916,7 @@ class DiagramObject extends DiagramElement {
         return this.priority;
     }
 }
-class DiagramObjectSet extends DiagramEntitySet {
+class DiagramObjectSet extends DiagramElementSet {
     /**
      * Instance a set of objects for the given model. This method is used internally.
      * @private
@@ -5812,20 +6181,20 @@ class DiagramCanvas {
             if (event.ctrlKey && event.key === 'a') {
                 event.preventDefault();
                 // select all
-                for (const node of this.model.nodes.filter((n) => !n.removed)) {
+                for (const node of this.model.nodes) {
                     this.addToUserSelection(node);
                 }
-                for (const connection of this.model.connections.filter((c) => !c.removed)) {
+                for (const connection of this.model.connections) {
                     this.addToUserSelection(connection);
                 }
             }
             if (event.ctrlKey && event.key === 'i') {
                 event.preventDefault();
                 // invert selection
-                for (const node of this.model.nodes.filter((n) => !n.removed)) {
+                for (const node of this.model.nodes) {
                     this.toggleUserSelection(node);
                 }
-                for (const connection of this.model.connections.filter((c) => !c.removed)) {
+                for (const connection of this.model.connections) {
                     this.toggleUserSelection(connection);
                 }
             }
@@ -5853,17 +6222,49 @@ class DiagramCanvas {
                 this.cancelAllUserActions();
             }
             if (event.ctrlKey && event.key === 'y') {
+                event.preventDefault();
                 // redo
                 this.actionQueue.redo();
             }
             if (event.ctrlKey && event.key === 'z') {
+                event.preventDefault();
                 // undo
                 this.actionQueue.undo();
             }
+            if (event.key === '+') {
+                event.preventDefault();
+                // zoom in
+                this.parentComponent.diagramButtons.zoomIn();
+            }
+            if (event.key === '-') {
+                event.preventDefault();
+                // zoom out
+                this.parentComponent.diagramButtons.zoomOut();
+            }
+            if (event.key === Keys.ArrowLeft) {
+                event.preventDefault();
+                // move left, faster if we're zoomed out and slower if we're zoomed in
+                this.translateBy(-100 / this.zoomTransform.k, 0);
+            }
+            if (event.key === Keys.ArrowRight) {
+                event.preventDefault();
+                // move right, faster if we're zoomed out and slower if we're zoomed in
+                this.translateBy(100 / this.zoomTransform.k, 0);
+            }
+            if (event.key === Keys.ArrowDown) {
+                event.preventDefault();
+                // move down, faster if we're zoomed out and slower if we're zoomed in
+                this.translateBy(0, -100 / this.zoomTransform.k);
+            }
+            if (event.key === Keys.ArrowUp) {
+                event.preventDefault();
+                // move up, faster if we're zoomed out and slower if we're zoomed in
+                this.translateBy(0, 100 / this.zoomTransform.k);
+            }
         });
         const canvasView = this.selectRoot()
             .append('g')
-            .attr('class', 'canvas-view')
+            .attr('class', 'daga-canvas-view')
             .attr('width', `100%`)
             .attr('height', `100%`);
         const canvasBackground = canvasView
@@ -5948,14 +6349,14 @@ class DiagramCanvas {
         }
         const canvasElements = canvasView
             .append('g')
-            .attr('class', 'canvas-elements');
-        canvasElements.append('g').attr('class', 'canvas-nodes');
-        canvasElements.append('g').attr('class', 'canvas-sections');
-        canvasElements.append('g').attr('class', 'canvas-ports');
-        canvasElements.append('g').attr('class', 'canvas-connections');
-        canvasElements.append('g').attr('class', 'canvas-fields');
-        canvasElements.append('g').attr('class', 'canvas-objects');
-        canvasElements.append('g').attr('class', 'canvas-decorators');
+            .attr('class', 'daga-canvas-elements');
+        canvasElements.append('g').attr('class', 'daga-canvas-nodes');
+        canvasElements.append('g').attr('class', 'daga-canvas-sections');
+        canvasElements.append('g').attr('class', 'daga-canvas-ports');
+        canvasElements.append('g').attr('class', 'daga-canvas-connections');
+        canvasElements.append('g').attr('class', 'daga-canvas-fields');
+        canvasElements.append('g').attr('class', 'daga-canvas-objects');
+        canvasElements.append('g').attr('class', 'daga-canvas-decorators');
         this.viewInitialized$.next();
     }
     zoomBy(zoom) {
@@ -5982,13 +6383,14 @@ class DiagramCanvas {
         // if there are no nodes, we have nothing to do here
         if (this.model.nodes.length > 0) {
             const canvasViewBoundingBox = this.selectCanvasView().select('rect').node().getBBox();
-            const minimumX = Math.min(...this.model.nodes.all().map((n) => n.coords[0]));
-            const maximumX = Math.max(...this.model.nodes.all().map((n) => n.coords[0] + n.width));
+            const nonRemovedNodes = this.model.nodes.all();
+            const minimumX = Math.min(...nonRemovedNodes.map((n) => n.coords[0]));
+            const maximumX = Math.max(...nonRemovedNodes.map((n) => n.coords[0] + n.width));
             const averageX = (minimumX + maximumX) / 2;
             const rangeX = maximumX - minimumX;
             const windowRangeX = canvasViewBoundingBox.width;
-            const minimumY = Math.min(...this.model.nodes.all().map((n) => n.coords[1]));
-            const maximumY = Math.max(...this.model.nodes.all().map((n) => n.coords[1] + n.height));
+            const minimumY = Math.min(...nonRemovedNodes.map((n) => n.coords[1]));
+            const maximumY = Math.max(...nonRemovedNodes.map((n) => n.coords[1] + n.height));
             const averageY = (minimumY + maximumY) / 2;
             const rangeY = maximumY - minimumY;
             const windowRangeY = canvasViewBoundingBox.height;
@@ -6084,10 +6486,9 @@ class DiagramCanvas {
     updateNodesInView(...ids) {
         let updateSelection = this.selectCanvasNodes()
             .selectAll('g.diagram-node')
-            .data(this.model.nodes.filter((e) => !e.removed &&
-            (this.priorityThreshold !== undefined
-                ? e.getPriority() >= this.priorityThreshold
-                : true)), (d) => d.id);
+            .data(this.model.nodes.filter((e) => this.priorityThreshold !== undefined
+            ? e.getPriority() >= this.priorityThreshold
+            : true), (d) => d.id);
         const exitSelection = updateSelection.exit();
         const enterSelection = updateSelection
             .enter()
@@ -6623,10 +7024,9 @@ class DiagramCanvas {
     updateSectionsInView(...ids) {
         let updateSelection = this.selectCanvasSections()
             .selectAll('g.diagram-section')
-            .data(this.model.sections.filter((e) => !e.removed &&
-            (this.priorityThreshold !== undefined
-                ? e.getPriority() >= this.priorityThreshold
-                : true)), (d) => d.id);
+            .data(this.model.sections.filter((e) => this.priorityThreshold !== undefined
+            ? e.getPriority() >= this.priorityThreshold
+            : true), (d) => d.id);
         const exitSelection = updateSelection.exit();
         const enterSelection = updateSelection
             .enter()
@@ -7181,10 +7581,9 @@ class DiagramCanvas {
     updatePortsInView(...ids) {
         let updateSelection = this.selectCanvasPorts()
             .selectAll('g.diagram-port')
-            .data(this.model.ports.filter((e) => !e.removed &&
-            (this.priorityThreshold !== undefined
-                ? e.getPriority() >= this.priorityThreshold
-                : true)), (d) => d.id);
+            .data(this.model.ports.filter((e) => this.priorityThreshold !== undefined
+            ? e.getPriority() >= this.priorityThreshold
+            : true), (d) => d.id);
         const exitSelection = updateSelection.exit();
         const enterSelection = updateSelection
             .enter()
@@ -7287,7 +7686,7 @@ class DiagramCanvas {
                         const pointerCoords = this.getPointerLocationRelativeToCanvas(event);
                         let minDistanceFound = Number.POSITIVE_INFINITY;
                         let closestPortFound = undefined;
-                        for (const port of this.model.ports.filter((p) => !p.removed)) {
+                        for (const port of this.model.ports) {
                             const distance = port.distanceTo(pointerCoords);
                             if (distance < minDistanceFound) {
                                 minDistanceFound = distance;
@@ -7359,10 +7758,9 @@ class DiagramCanvas {
             .attr('opacity', (d) => (d.highlighted || d.selected ? 0.5 : 0));
     }
     updateConnectionsInView(...ids) {
-        const connectionList = this.model.connections.filter((e) => !e.removed &&
-            (this.priorityThreshold !== undefined
-                ? e.getPriority() >= this.priorityThreshold
-                : true));
+        const connectionList = this.model.connections.filter((e) => this.priorityThreshold !== undefined
+            ? e.getPriority() >= this.priorityThreshold
+            : true);
         if (this.unfinishedConnection) {
             connectionList.push(this.unfinishedConnection);
         }
@@ -7466,10 +7864,9 @@ class DiagramCanvas {
     updateFieldsInView(...ids) {
         let updateSelection = this.selectCanvasFields()
             .selectAll('foreignObject.diagram-field')
-            .data(this.model.fields.filter((e) => !e.removed &&
-            (this.priorityThreshold !== undefined
-                ? e.getPriority() >= this.priorityThreshold
-                : true)), (d) => d.id);
+            .data(this.model.fields.filter((e) => this.priorityThreshold !== undefined
+            ? e.getPriority() >= this.priorityThreshold
+            : true), (d) => d.id);
         const exitSelection = updateSelection.exit();
         const enterSelection = updateSelection
             .enter()
@@ -7643,10 +8040,9 @@ class DiagramCanvas {
     updateObjectsInView(...ids) {
         let updateSelection = this.selectCanvasObjects()
             .selectAll('foreignObject.diagram-object')
-            .data(this.model.objects.filter((e) => !e.removed &&
-            (this.priorityThreshold !== undefined
-                ? e.getPriority() >= this.priorityThreshold
-                : true)), (d) => d.id);
+            .data(this.model.objects.filter((e) => this.priorityThreshold !== undefined
+            ? e.getPriority() >= this.priorityThreshold
+            : true), (d) => d.id);
         const exitSelection = updateSelection.exit();
         const enterSelection = updateSelection
             .enter()
@@ -7681,10 +8077,9 @@ class DiagramCanvas {
     updateDecoratorsInView(...ids) {
         let updateSelection = this.selectCanvasDecorators()
             .selectAll('foreignObject.diagram-decorator')
-            .data(this.model.decorators.filter((e) => !e.removed &&
-            (this.priorityThreshold !== undefined
-                ? e.getPriority() >= this.priorityThreshold
-                : true)), (d) => d.id);
+            .data(this.model.decorators.filter((e) => this.priorityThreshold !== undefined
+            ? e.getPriority() >= this.priorityThreshold
+            : true), (d) => d.id);
         const exitSelection = updateSelection.exit();
         const enterSelection = updateSelection
             .enter()
@@ -7748,13 +8143,14 @@ class DiagramCanvas {
                 const boundingWidth = !connection.startLabel
                     ? 0
                     : startLabelBoundingRect.width / this.zoomTransform.k +
-                        labelConfiguration.padding * 2;
+                        getLeftPadding(labelConfiguration) +
+                        getRightPadding(labelConfiguration);
                 const boundingHeight = !connection.startLabel
                     ? 0
                     : startLabelBoundingRect.height / this.zoomTransform.k +
-                        labelConfiguration.padding * 2;
-                const pathStartLabelPoint = pathNode.getPointAtLength(labelConfiguration.margin +
-                    Math.max(boundingWidth / 2, boundingHeight / 2));
+                        getTopPadding(labelConfiguration) +
+                        getBottomPadding(labelConfiguration);
+                const pathStartLabelPoint = pathNode.getPointAtLength(Math.max(getLeftMargin(labelConfiguration) + boundingWidth / 2, getRightMargin(labelConfiguration) + boundingWidth / 2, getTopMargin(labelConfiguration) + boundingHeight / 2, getBottomMargin(labelConfiguration) + boundingHeight / 2));
                 connectionSelection
                     .select('g.diagram-connection-start-label path')
                     .attr('d', pillPath(-boundingWidth / 2, -boundingHeight / 2, boundingWidth, boundingHeight))
@@ -7788,11 +8184,13 @@ class DiagramCanvas {
                 const boundingWidth = !connection.middleLabel
                     ? 0
                     : middleLabelBoundingRect.width / this.zoomTransform.k +
-                        labelConfiguration.padding * 2;
+                        getLeftPadding(labelConfiguration) +
+                        getRightPadding(labelConfiguration);
                 const boundingHeight = !connection.middleLabel
                     ? 0
                     : middleLabelBoundingRect.height / this.zoomTransform.k +
-                        labelConfiguration.padding * 2;
+                        getTopPadding(labelConfiguration) +
+                        getBottomPadding(labelConfiguration);
                 const pathMiddleLabelPoint = pathNode.getPointAtLength(pathLength / 2);
                 connectionSelection
                     .select('g.diagram-connection-middle-label path')
@@ -7827,14 +8225,15 @@ class DiagramCanvas {
                 const boundingWidth = !connection.endLabel
                     ? 0
                     : endLabelBoundingRect.width / this.zoomTransform.k +
-                        labelConfiguration.padding * 2;
+                        getLeftPadding(labelConfiguration) +
+                        getRightPadding(labelConfiguration);
                 const boundingHeight = !connection.endLabel
                     ? 0
                     : endLabelBoundingRect.height / this.zoomTransform.k +
-                        labelConfiguration.padding * 2;
+                        getTopPadding(labelConfiguration) +
+                        getBottomPadding(labelConfiguration);
                 const pathEndLabelPoint = pathNode.getPointAtLength(pathLength -
-                    labelConfiguration.margin -
-                    Math.max(boundingWidth / 2, boundingHeight / 2));
+                    Math.max(getLeftMargin(labelConfiguration) + boundingWidth / 2, getRightMargin(labelConfiguration) + boundingWidth / 2, getTopMargin(labelConfiguration) + boundingHeight / 2, getBottomMargin(labelConfiguration) + boundingHeight / 2));
                 connectionSelection
                     .select('g.diagram-connection-end-label path')
                     .attr('d', pillPath(-boundingWidth / 2, -boundingHeight / 2, boundingWidth, boundingHeight))
@@ -7901,10 +8300,12 @@ class DiagramCanvas {
         if (field.rootElement instanceof DiagramNode && field.fit) {
             const fieldDimensions = this.minimumSizeOfField(field);
             let stretchX = fieldDimensions[0] +
-                2 * (field.rootElement.type.label?.margin || 0) -
+                getLeftMargin(field.rootElement.type.label) +
+                getRightMargin(field.rootElement.type.label) -
                 field.rootElement.width;
             let stretchY = fieldDimensions[1] +
-                2 * (field.rootElement.type.label?.margin || 0) -
+                getTopMargin(field.rootElement.type.label) +
+                getBottomMargin(field.rootElement.type.label) -
                 field.rootElement.height;
             if (this.snapToGrid) {
                 stretchX = Math.ceil(stretchX / this.gridSize) * this.gridSize;
@@ -7945,10 +8346,12 @@ class DiagramCanvas {
                 fieldDimensions[1] = minimumFieldHeight;
             }
             let stretchX = fieldDimensions[0] +
-                2 * (field.rootElement?.getConfig()?.label?.margin || 0) -
+                getLeftMargin(field.rootElement?.getConfig()?.label) +
+                getRightMargin(field.rootElement?.getConfig()?.label) -
                 field.rootElement.width;
             let stretchY = fieldDimensions[1] +
-                2 * (field.rootElement?.getConfig()?.label?.margin || 0) -
+                getTopMargin(field.rootElement?.getConfig()?.label) +
+                getBottomMargin(field.rootElement?.getConfig()?.label) -
                 field.rootElement.height;
             if (this.snapToGrid) {
                 stretchX = Math.ceil(stretchX / this.gridSize) * this.gridSize;
@@ -7997,31 +8400,31 @@ class DiagramCanvas {
         return d3.select(this.diagramRoot).select('svg');
     }
     selectCanvasView() {
-        return this.selectRoot().select(`.canvas-view`);
+        return this.selectRoot().select(`.daga-canvas-view`);
     }
     selectCanvasElements() {
-        return this.selectRoot().select(`.canvas-elements`);
+        return this.selectRoot().select(`.daga-canvas-elements`);
     }
     selectCanvasNodes() {
-        return this.selectRoot().select(`.canvas-nodes`);
+        return this.selectRoot().select(`.daga-canvas-nodes`);
     }
     selectCanvasSections() {
-        return this.selectRoot().select(`.canvas-sections`);
+        return this.selectRoot().select(`.daga-canvas-sections`);
     }
     selectCanvasPorts() {
-        return this.selectRoot().select(`.canvas-ports`);
+        return this.selectRoot().select(`.daga-canvas-ports`);
     }
     selectCanvasConnections() {
-        return this.selectRoot().select(`.canvas-connections`);
+        return this.selectRoot().select(`.daga-canvas-connections`);
     }
     selectCanvasFields() {
-        return this.selectRoot().select(`.canvas-fields`);
+        return this.selectRoot().select(`.daga-canvas-fields`);
     }
     selectCanvasObjects() {
-        return this.selectRoot().select(`.canvas-objects`);
+        return this.selectRoot().select(`.daga-canvas-objects`);
     }
     selectCanvasDecorators() {
-        return this.selectRoot().select(`.canvas-decorators`);
+        return this.selectRoot().select(`.daga-canvas-decorators`);
     }
     // User actions
     startConnection(port) {
@@ -8240,6 +8643,10 @@ class DiagramCanvas {
         return this.userSelection.indexOf(selection) >= 0;
     }
     addToUserSelection(selection) {
+        if (selection.selected) {
+            // if selection is already selected, do nothing
+            return;
+        }
         if (this.propertyEditorSelection === undefined &&
             (selection instanceof DiagramNode ||
                 selection instanceof DiagramConnection)) {
@@ -8266,7 +8673,10 @@ class DiagramCanvas {
         if (this.propertyEditorSelection === selection) {
             this.setPropertyEditorSelection(undefined);
         }
-        this.userSelection.splice(this.userSelection.indexOf(selection), 1);
+        const indexOfSelectionInUserSelection = this.userSelection.indexOf(selection);
+        if (indexOfSelectionInUserSelection >= 0) {
+            this.userSelection.splice(indexOfSelectionInUserSelection, 1);
+        }
         selection.selected = false;
         selection.updateInView();
         // if selection is a node with sections, deselect the sections too so that sections don't show up as selected in the view
@@ -8357,7 +8767,7 @@ class DiagramCanvas {
         // append to the root (svg) element so the context menu is not affected by zoom transforms on the canvas view
         const contextMenuContainer = this.selectRoot()
             .append('foreignObject')
-            .attr('class', 'context-menu')
+            .attr('class', 'daga-context-menu')
             .attr('x', `${coordsRelativeToRoot[0] - CONTEXT_MENU_TOTAL_RADIUS}px`)
             .attr('y', `${coordsRelativeToRoot[1] - CONTEXT_MENU_TOTAL_RADIUS}px`)
             .attr('width', `${2 * CONTEXT_MENU_TOTAL_RADIUS}px`)
@@ -8380,7 +8790,7 @@ class DiagramCanvas {
             this.canUserPerformAction(DiagramActions.Remove)) {
             buttons.push({
                 name: 'CUT',
-                imageClass: 'cut',
+                imageClass: 'daga-cut',
                 onPress: (buttonPressEvent) => {
                     buttonPressEvent.preventDefault();
                     this.copyUserSelectionToClipboard();
@@ -8393,7 +8803,7 @@ class DiagramCanvas {
             this.canUserPerformAction(DiagramActions.Clipboard)) {
             buttons.push({
                 name: 'COPY',
-                imageClass: 'copy',
+                imageClass: 'daga-copy',
                 onPress: (buttonPressEvent) => {
                     buttonPressEvent.preventDefault();
                     this.copyUserSelectionToClipboard();
@@ -8404,7 +8814,7 @@ class DiagramCanvas {
         if (this.canUserPerformAction(DiagramActions.Paste)) {
             buttons.push({
                 name: 'PASTE',
-                imageClass: 'paste',
+                imageClass: 'daga-paste',
                 onPress: (buttonPressEvent) => {
                     buttonPressEvent.preventDefault();
                     this.pasteUserSelectionFromClipboard(this.getClosestGridPoint(coordsRelativeToCanvas));
@@ -8416,7 +8826,7 @@ class DiagramCanvas {
             this.canUserPerformAction(DiagramActions.Remove)) {
             buttons.push({
                 name: 'DELETE',
-                imageClass: 'delete',
+                imageClass: 'daga-delete',
                 onPress: (buttonPressEvent) => {
                     buttonPressEvent.preventDefault();
                     this.deleteUserSelection();
@@ -8428,7 +8838,7 @@ class DiagramCanvas {
         if (buttons.length === 0) {
             buttons.push({
                 name: 'NONE',
-                imageClass: 'cross',
+                imageClass: 'daga-cross',
                 onPress: undefined
             });
         }
@@ -8438,7 +8848,7 @@ class DiagramCanvas {
             const angle = (i + 0.5 - buttons.length / 2) * CONTEXT_MENU_BUTTON_PADDING_RADIANS;
             const buttonContainer = contextMenuContainer
                 .append('xhtml:div')
-                .attr('class', `context-menu-button ${button.imageClass}-button${button.onPress != undefined ? ' clickable' : ''}`)
+                .attr('class', `daga-context-menu-button ${button.imageClass}-button${button.onPress != undefined ? ' daga-clickable' : ''}`)
                 .attr('tabindex', 0)
                 .style('position', 'absolute')
                 .style('box-sizing', 'border-box')
@@ -8789,11 +9199,11 @@ class DiagramButtonsComponent {
         this.canvas.actionQueue.redo();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: DiagramButtonsComponent, deps: [{ token: CanvasProviderService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.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=\"daga-diagram-buttons daga-{{ location }} daga-{{ direction }}\">\r\n  <button\r\n    *ngIf=\"enableZoom && canvas.canUserPerformAction(DiagramActions.Zoom)\"\r\n    class=\"daga-zoom-in\"\r\n    (click)=\"zoomIn()\"\r\n  >\r\n    <span class=\"daga-tooltip\">Zoom in</span>\r\n  </button>\r\n  <button\r\n    *ngIf=\"enableZoom && canvas.canUserPerformAction(DiagramActions.Zoom)\"\r\n    class=\"daga-zoom-out\"\r\n    (click)=\"zoomOut()\"\r\n  >\r\n    <span class=\"daga-tooltip\">Zoom out</span>\r\n  </button>\r\n  <div #collapsableButtons class=\"daga-collapsable-buttons daga-collapsed\">\r\n    <button\r\n      *ngIf=\"enableZoom && canvas.canUserPerformAction(DiagramActions.Zoom)\"\r\n      class=\"daga-center\"\r\n      (click)=\"center()\"\r\n    >\r\n      <span class=\"daga-tooltip\">Fit diagram to screen</span>\r\n    </button>\r\n    <button *ngIf=\"enableUndoRedo\" class=\"daga-undo\" (click)=\"undo()\">\r\n      <span class=\"daga-tooltip\">Undo</span>\r\n    </button>\r\n    <button *ngIf=\"enableUndoRedo\" class=\"daga-redo\" (click)=\"redo()\">\r\n      <span class=\"daga-tooltip\">Redo</span>\r\n    </button>\r\n    <button\r\n      *ngIf=\"enableLayout && canvas.layoutFormat\"\r\n      class=\"daga-layout\"\r\n      (click)=\"layout()\"\r\n    >\r\n      <span class=\"daga-tooltip\">Apply layout</span>\r\n    </button>\r\n    <button\r\n      *ngIf=\"enableFilter\"\r\n      class=\"daga-filter\"\r\n      [class]=\"filterOn ? 'daga-on' : 'daga-off'\"\r\n      (click)=\"filter()\"\r\n    >\r\n      <span class=\"daga-tooltip\">Apply filter</span>\r\n    </button>\r\n  </div>\r\n  <button class=\"daga-more-options\" (click)=\"toggleCollapse()\">\r\n    <span *ngIf=\"!collapsed\" class=\"daga-tooltip\">Less options</span>\r\n    <span *ngIf=\"collapsed\" class=\"daga-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: "18.2.2", 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" }]
+            args: [{ standalone: true, selector: 'daga-diagram-buttons', imports: [CommonModule], template: "<div class=\"daga-diagram-buttons daga-{{ location }} daga-{{ direction }}\">\r\n  <button\r\n    *ngIf=\"enableZoom && canvas.canUserPerformAction(DiagramActions.Zoom)\"\r\n    class=\"daga-zoom-in\"\r\n    (click)=\"zoomIn()\"\r\n  >\r\n    <span class=\"daga-tooltip\">Zoom in</span>\r\n  </button>\r\n  <button\r\n    *ngIf=\"enableZoom && canvas.canUserPerformAction(DiagramActions.Zoom)\"\r\n    class=\"daga-zoom-out\"\r\n    (click)=\"zoomOut()\"\r\n  >\r\n    <span class=\"daga-tooltip\">Zoom out</span>\r\n  </button>\r\n  <div #collapsableButtons class=\"daga-collapsable-buttons daga-collapsed\">\r\n    <button\r\n      *ngIf=\"enableZoom && canvas.canUserPerformAction(DiagramActions.Zoom)\"\r\n      class=\"daga-center\"\r\n      (click)=\"center()\"\r\n    >\r\n      <span class=\"daga-tooltip\">Fit diagram to screen</span>\r\n    </button>\r\n    <button *ngIf=\"enableUndoRedo\" class=\"daga-undo\" (click)=\"undo()\">\r\n      <span class=\"daga-tooltip\">Undo</span>\r\n    </button>\r\n    <button *ngIf=\"enableUndoRedo\" class=\"daga-redo\" (click)=\"redo()\">\r\n      <span class=\"daga-tooltip\">Redo</span>\r\n    </button>\r\n    <button\r\n      *ngIf=\"enableLayout && canvas.layoutFormat\"\r\n      class=\"daga-layout\"\r\n      (click)=\"layout()\"\r\n    >\r\n      <span class=\"daga-tooltip\">Apply layout</span>\r\n    </button>\r\n    <button\r\n      *ngIf=\"enableFilter\"\r\n      class=\"daga-filter\"\r\n      [class]=\"filterOn ? 'daga-on' : 'daga-off'\"\r\n      (click)=\"filter()\"\r\n    >\r\n      <span class=\"daga-tooltip\">Apply filter</span>\r\n    </button>\r\n  </div>\r\n  <button class=\"daga-more-options\" (click)=\"toggleCollapse()\">\r\n    <span *ngIf=\"!collapsed\" class=\"daga-tooltip\">Less options</span>\r\n    <span *ngIf=\"collapsed\" class=\"daga-tooltip\">More options</span>\r\n  </button>\r\n</div>\r\n" }]
         }], ctorParameters: () => [{ type: CanvasProviderService }], propDecorators: { collapsableButtons: [{
                 type: ViewChild,
                 args: ['collapsableButtons']
@@ -8835,7 +9245,9 @@ class ErrorsComponent {
             .subscribe();
     }
     selectPanel() {
-        return d3.select(this.errorsContainer.nativeElement).select('.error-panel');
+        return d3
+            .select(this.errorsContainer.nativeElement)
+            .select('.daga-error-panel');
     }
     validate() {
         this.errors = [];
@@ -8845,23 +9257,39 @@ class ErrorsComponent {
         }
     }
     showError(error) {
-        if (error.elementId && error.propertyNames) {
+        if (error.elementId &&
+            (error.propertyNames === undefined || error.propertyNames.length === 0)) {
+            const element = this.canvas.model.nodes.get(error.elementId) ||
+                this.canvas.model.connections.get(error.elementId);
+            if (element) {
+                this.canvas.highlight(element);
+            }
+        }
+        else if (error.elementId &&
+            error.propertyNames !== undefined &&
+            error.propertyNames.length > 0) {
             this.canvas.setPropertyEditorSelection(this.canvas.model.nodes.get(error.elementId) ||
                 this.canvas.model.connections.get(error.elementId));
+            const element = this.canvas.model.nodes.get(error.elementId) ||
+                this.canvas.model.connections.get(error.elementId);
+            if (element) {
+                this.canvas.highlight(element);
+            }
             this.canvas.parentComponent.propertyEditor?.highlightProperty(...error.propertyNames);
         }
-        else if (!error.elementId && error.propertyNames) {
+        else if (!error.elementId &&
+            error.propertyNames !== undefined &&
+            error.propertyNames.length > 0) {
             this.canvas.setPropertyEditorSelection();
             this.canvas.parentComponent.propertyEditor?.highlightProperty(...error.propertyNames);
         }
-        // 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: "18.2.2", ngImport: i0, type: ErrorsComponent, deps: [{ token: CanvasProviderService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.2", type: ErrorsComponent, isStandalone: true, selector: "daga-errors", viewQueries: [{ propertyName: "errorsContainer", first: true, predicate: ["errors"], descendants: true }], ngImport: i0, template: "<div #errorsContainer class=\"daga-errors\">\r\n  <div\r\n    *ngIf=\"errors.length === 0\"\r\n    class=\"daga-errors-summary daga-no-errors daga-prevent-user-select\"\r\n  >\r\n    <span>No errors found</span>\r\n  </div>\r\n  <div\r\n    *ngIf=\"errors.length > 0\"\r\n    class=\"daga-errors-summary daga-with-errors daga-prevent-user-select\"\r\n  >\r\n    <span>{{ errors.length }} errors found</span>\r\n    <div class=\"daga-collapse-button-container\">\r\n      <daga-collapse-button\r\n        [collapsableSelector]=\"errorsContainer\"\r\n        [collapsableAdditionalSelector]=\"'.daga-error-panel'\"\r\n        [direction]=\"Side.Top\"\r\n        [rule]=\"'display'\"\r\n        [collapsedValue]=\"'none'\"\r\n        [visibleValue]=\"'block'\"\r\n      />\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"errors.length > 0\" class=\"daga-error-panel\">\r\n    <ol>\r\n      <li\r\n        *ngFor=\"let error of errors; index as i\"\r\n        (click)=\"showError(error)\"\r\n        [innerHTML]=\"error.message\"\r\n      ></li>\r\n    </ol>\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: "component", type: CollapseButtonComponent, selector: "daga-collapse-button", inputs: ["collapsableSelector", "collapsableAdditionalSelector", "collapsed", "disabled", "direction", "rule", "collapsedValue", "visibleValue"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", 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" }]
+            args: [{ standalone: true, selector: 'daga-errors', imports: [CommonModule, CollapseButtonComponent], template: "<div #errorsContainer class=\"daga-errors\">\r\n  <div\r\n    *ngIf=\"errors.length === 0\"\r\n    class=\"daga-errors-summary daga-no-errors daga-prevent-user-select\"\r\n  >\r\n    <span>No errors found</span>\r\n  </div>\r\n  <div\r\n    *ngIf=\"errors.length > 0\"\r\n    class=\"daga-errors-summary daga-with-errors daga-prevent-user-select\"\r\n  >\r\n    <span>{{ errors.length }} errors found</span>\r\n    <div class=\"daga-collapse-button-container\">\r\n      <daga-collapse-button\r\n        [collapsableSelector]=\"errorsContainer\"\r\n        [collapsableAdditionalSelector]=\"'.daga-error-panel'\"\r\n        [direction]=\"Side.Top\"\r\n        [rule]=\"'display'\"\r\n        [collapsedValue]=\"'none'\"\r\n        [visibleValue]=\"'block'\"\r\n      />\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"errors.length > 0\" class=\"daga-error-panel\">\r\n    <ol>\r\n      <li\r\n        *ngFor=\"let error of errors; index as i\"\r\n        (click)=\"showError(error)\"\r\n        [innerHTML]=\"error.message\"\r\n      ></li>\r\n    </ol>\r\n  </div>\r\n</div>\r\n" }]
         }], ctorParameters: () => [{ type: CanvasProviderService }], propDecorators: { errorsContainer: [{
                 type: ViewChild,
                 args: ['errors']
@@ -8919,7 +9347,7 @@ class PaletteComponent {
         return d3.select(this.panel.nativeElement);
     }
     selectPalette() {
-        return this.selectPanel().select('.palette-view');
+        return this.selectPanel().select('.daga-palette-view');
     }
     appendCategories(categories) {
         const thisComponent = this.selectPalette()
@@ -8940,14 +9368,14 @@ class PaletteComponent {
         thisComponent.on(Events.Change, () => {
             if (this.currentCategory) {
                 this.selectPalette()
-                    .selectAll(`.template-container.in-category`)
+                    .selectAll(`.daga-template-container.daga-in-category`)
                     .remove();
             }
             const selectedKey = thisComponent.property('value');
             this.currentCategory = selectedKey;
             const templatesInCategory = categories[selectedKey] || [];
             for (const template of templatesInCategory) {
-                this.appendTemplate(template, 'in-category');
+                this.appendTemplate(template, 'daga-in-category');
             }
         });
         if (this.currentCategory) {
@@ -8985,7 +9413,7 @@ class PaletteComponent {
         }
         const thisComponent = this.selectPalette()
             .append('div')
-            .attr('class', `template-container ${classes !== undefined ? classes : ''}`)
+            .attr('class', `daga-template-container ${classes !== undefined ? classes : ''}`)
             .style('width', `${type.defaultWidth}px`)
             .style('height', `${type.defaultHeight}px`)
             .call(d3
@@ -9183,7 +9611,7 @@ class PaletteComponent {
             };
             thisComponent
                 .append('text')
-                .attr('transform', `translate(${type.defaultWidth / 2},${type.defaultHeight / 2 + 5})`)
+                .attr('transform', `translate(${(getLeftMargin(labelConfig) + type.defaultWidth) / 2},${(getTopMargin(labelConfig) + type.defaultHeight) / 2})`)
                 .attr('x', 0)
                 .attr('y', 0)
                 .attr('font-size', `${labelConfig.fontSize}px`)
@@ -9200,7 +9628,7 @@ class PaletteComponent {
     appendConnectionTemplate(type, templateConfig, classes) {
         const thisComponent = this.selectPalette()
             .append('div')
-            .attr('class', `template-container ${classes !== undefined ? classes : ''}`)
+            .attr('class', `daga-template-container ${classes !== undefined ? classes : ''}`)
             .style('width', `${templateConfig.width}px`)
             .style('height', `${templateConfig.height}px`)
             .append('svg')
@@ -9246,11 +9674,11 @@ class PaletteComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: PaletteComponent, deps: [{ token: CanvasProviderService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.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=\"daga-panel daga-{{ location }} daga-{{ direction }}\">\r\n  <daga-collapse-button\r\n    #collapseButton\r\n    [direction]=\"direction\"\r\n    [collapsableSelector]=\"panel\"\r\n    collapsableAdditionalSelector=\".daga-panel-content\"\r\n    rule=\"display\"\r\n    collapsedValue=\"none\"\r\n    visibleValue=\"block\"\r\n  />\r\n  <div class=\"daga-panel-content\">\r\n    <div *ngIf=\"palettes.length > 1\" class=\"daga-panel-tabs\">\r\n      <div\r\n        *ngFor=\"let palette of palettes\"\r\n        class=\"daga-panel-tab\"\r\n        [class]=\"palette === currentPalette ? 'daga-current-tab' : ''\"\r\n        (click)=\"switchPalette(palette)\"\r\n      >\r\n        {{ palette.name }}\r\n      </div>\r\n    </div>\r\n    <div class=\"daga-palette-view\"></div>\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: "component", type: CollapseButtonComponent, selector: "daga-collapse-button", inputs: ["collapsableSelector", "collapsableAdditionalSelector", "collapsed", "disabled", "direction", "rule", "collapsedValue", "visibleValue"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", 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" }]
+            args: [{ standalone: true, selector: 'daga-palette', imports: [CommonModule, CollapseButtonComponent], template: "<div #panel class=\"daga-panel daga-{{ location }} daga-{{ direction }}\">\r\n  <daga-collapse-button\r\n    #collapseButton\r\n    [direction]=\"direction\"\r\n    [collapsableSelector]=\"panel\"\r\n    collapsableAdditionalSelector=\".daga-panel-content\"\r\n    rule=\"display\"\r\n    collapsedValue=\"none\"\r\n    visibleValue=\"block\"\r\n  />\r\n  <div class=\"daga-panel-content\">\r\n    <div *ngIf=\"palettes.length > 1\" class=\"daga-panel-tabs\">\r\n      <div\r\n        *ngFor=\"let palette of palettes\"\r\n        class=\"daga-panel-tab\"\r\n        [class]=\"palette === currentPalette ? 'daga-current-tab' : ''\"\r\n        (click)=\"switchPalette(palette)\"\r\n      >\r\n        {{ palette.name }}\r\n      </div>\r\n    </div>\r\n    <div class=\"daga-palette-view\"></div>\r\n  </div>\r\n</div>\r\n" }]
         }], ctorParameters: () => [{ type: CanvasProviderService }], propDecorators: { panel: [{
                 type: ViewChild,
                 args: ['panel']
@@ -9309,8 +9737,8 @@ class PropertySettingsComponent {
             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
+                .select(`.daga-property.${getStyleClassName(property.name)}.daga-depth-${this.depth}`);
+            propertyElement.select('button.daga-move-button').call(d3
                 .drag()
                 .on(DragEvents.Start, (event) => {
                 cursorStyle(CursorStyle.Grabbing);
@@ -9349,12 +9777,12 @@ class PropertySettingsComponent {
                     .style('height', `${propertyElementHeight}px`)
                     .style('z-index', 1);
                 d3.select(this.element.nativeElement)
-                    .select(`.dropbar.index-${closestDropbarIndex}.depth-${this.depth}`)
+                    .select(`.daga-dropbar.daga-index-${closestDropbarIndex}.daga-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}`)
+                    .select(`.daga-dropbar.daga-index-${closestDropbarIndex}.daga-depth-${this.depth}`)
                     .style('visibility', 'visible')
                     .style('height', '0.25rem');
             })
@@ -9368,7 +9796,7 @@ class PropertySettingsComponent {
                     .style('width', 'unset')
                     .style('height', 'unset');
                 d3.select(this.element.nativeElement)
-                    .select(`.dropbar.index-${closestDropbarIndex}.depth-${this.depth}`)
+                    .select(`.daga-dropbar.daga-index-${closestDropbarIndex}.daga-depth-${this.depth}`)
                     .style('visibility', 'hidden')
                     .style('height', 0);
                 const pointerCoords = this.canvas.getPointerLocationRelativeToScreen(event);
@@ -9390,7 +9818,7 @@ class PropertySettingsComponent {
         for (let i = 0; i <= propertyList.length; ++i) {
             const boundingRect = d3
                 .select(this.element.nativeElement)
-                .select(`.dropbar.index-${i}.depth-${this.depth}`)
+                .select(`.daga-dropbar.daga-index-${i}.daga-depth-${this.depth}`)
                 .node()
                 ?.getBoundingClientRect();
             if (boundingRect) {
@@ -9448,11 +9876,11 @@ class PropertySettingsComponent {
         this.addListeners();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", 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.2.2", 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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.2", type: PropertySettingsComponent, isStandalone: true, selector: "daga-property-settings", inputs: { valueSet: "valueSet", depth: "depth" }, ngImport: i0, template: "<div\r\n  class=\"daga-dropbar\"\r\n  [class]=\"'daga-index-' + 0 + ' daga-depth-' + depth\"\r\n></div>\r\n<div\r\n  *ngFor=\"let property of valueSet?.displayedProperties || []; index as i\"\r\n  class=\"daga-property-and-dropbar\"\r\n  [class]=\"getStyleClassName(property.name) + ' daga-depth-' + depth\"\r\n>\r\n  <div\r\n    class=\"daga-property\"\r\n    [class]=\"getStyleClassName(property.name) + ' daga-depth-' + depth\"\r\n  >\r\n    <div class=\"daga-property-name\">\r\n      <span>{{ property.name }}</span>\r\n      <div class=\"daga-buttons\">\r\n        <button class=\"daga-property-button daga-move-button\">\r\n          <div class=\"daga-icon daga-move-icon\"></div>\r\n        </button>\r\n        <button\r\n          class=\"daga-property-button daga-hide-button\"\r\n          (click)=\"hideProperty(property.name)\"\r\n        >\r\n          <div class=\"daga-icon daga-hide-icon\"></div>\r\n        </button>\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"property.type !== Type.Object\" class=\"daga-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\r\n    class=\"daga-dropbar\"\r\n    [class]=\"'daga-index-' + (i + 1) + ' daga-depth-' + depth\"\r\n  ></div>\r\n</div>\r\n<div\r\n  class=\"daga-property\"\r\n  *ngIf=\"valueSet && valueSet.hiddenProperties.length > 0\"\r\n>\r\n  <p class=\"daga-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.2.2", 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" }]
+            args: [{ standalone: true, selector: 'daga-property-settings', imports: [CommonModule, FormsModule], template: "<div\r\n  class=\"daga-dropbar\"\r\n  [class]=\"'daga-index-' + 0 + ' daga-depth-' + depth\"\r\n></div>\r\n<div\r\n  *ngFor=\"let property of valueSet?.displayedProperties || []; index as i\"\r\n  class=\"daga-property-and-dropbar\"\r\n  [class]=\"getStyleClassName(property.name) + ' daga-depth-' + depth\"\r\n>\r\n  <div\r\n    class=\"daga-property\"\r\n    [class]=\"getStyleClassName(property.name) + ' daga-depth-' + depth\"\r\n  >\r\n    <div class=\"daga-property-name\">\r\n      <span>{{ property.name }}</span>\r\n      <div class=\"daga-buttons\">\r\n        <button class=\"daga-property-button daga-move-button\">\r\n          <div class=\"daga-icon daga-move-icon\"></div>\r\n        </button>\r\n        <button\r\n          class=\"daga-property-button daga-hide-button\"\r\n          (click)=\"hideProperty(property.name)\"\r\n        >\r\n          <div class=\"daga-icon daga-hide-icon\"></div>\r\n        </button>\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"property.type !== Type.Object\" class=\"daga-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\r\n    class=\"daga-dropbar\"\r\n    [class]=\"'daga-index-' + (i + 1) + ' daga-depth-' + depth\"\r\n  ></div>\r\n</div>\r\n<div\r\n  class=\"daga-property\"\r\n  *ngIf=\"valueSet && valueSet.hiddenProperties.length > 0\"\r\n>\r\n  <p class=\"daga-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: [{
@@ -9638,11 +10066,11 @@ class AutocompleteComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: AutocompleteComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.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        *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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.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=\"daga-autocomplete\"\r\n  [class]=\"showOptions ? 'daga-showing-options' : ''\"\r\n  (blur)=\"closeOptions()\"\r\n>\r\n  <div class=\"daga-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=\"daga-clear\"\r\n      (click)=\"clearInput()\"\r\n    ></button>\r\n  </div>\r\n  <div class=\"daga-autocomplete-options\">\r\n    <ul class=\"daga-autocomplete-option-list\">\r\n      <li\r\n        *ngIf=\"(currentOptions?.length || 0) === 0\"\r\n        class=\"daga-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=\"daga-autocomplete-option\"\r\n        [class]=\"index === focusIndex ? 'daga-focused' : ''\"\r\n        (mousemove)=\"focusOnOption(index)\"\r\n        (click)=\"complete(option)\"\r\n      >\r\n        <span>{{ currentLabelStarts[index] }}</span>\r\n        <span class=\"daga-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: "18.2.2", 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        *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" }]
+            args: [{ standalone: true, selector: 'daga-autocomplete', imports: [CommonModule, FormsModule], template: "<div\r\n  #main\r\n  class=\"daga-autocomplete\"\r\n  [class]=\"showOptions ? 'daga-showing-options' : ''\"\r\n  (blur)=\"closeOptions()\"\r\n>\r\n  <div class=\"daga-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=\"daga-clear\"\r\n      (click)=\"clearInput()\"\r\n    ></button>\r\n  </div>\r\n  <div class=\"daga-autocomplete-options\">\r\n    <ul class=\"daga-autocomplete-option-list\">\r\n      <li\r\n        *ngIf=\"(currentOptions?.length || 0) === 0\"\r\n        class=\"daga-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=\"daga-autocomplete-option\"\r\n        [class]=\"index === focusIndex ? 'daga-focused' : ''\"\r\n        (mousemove)=\"focusOnOption(index)\"\r\n        (click)=\"complete(option)\"\r\n      >\r\n        <span>{{ currentLabelStarts[index] }}</span>\r\n        <span class=\"daga-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 }]
@@ -9755,11 +10183,11 @@ class OptionListEditorComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: OptionListEditorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.2", 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 }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.2", 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\r\n  *ngFor=\"let item of value; let index = index\"\r\n  class=\"daga-value-item-element\"\r\n>\r\n  <span class=\"daga-input\">{{ labelsOfValue[index] }}</span>\r\n  <button\r\n    *ngIf=\"!disabled\"\r\n    class=\"daga-property-button\"\r\n    (click)=\"removeFromValue(index)\"\r\n  >\r\n    <div class=\"daga-icon daga-close-icon\"></div>\r\n  </button>\r\n</div>\r\n<div *ngIf=\"!disabled\" class=\"daga-value-item-input\">\r\n  <div class=\"daga-input daga-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=\"daga-property-button\" (click)=\"addToValue()\">\r\n    <div class=\"daga-icon daga-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: "18.2.2", 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]=\"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" }]
+            args: [{ standalone: true, selector: 'daga-option-list-editor', imports: [AutocompleteComponent, CommonModule, FormsModule], template: "<div\r\n  *ngFor=\"let item of value; let index = index\"\r\n  class=\"daga-value-item-element\"\r\n>\r\n  <span class=\"daga-input\">{{ labelsOfValue[index] }}</span>\r\n  <button\r\n    *ngIf=\"!disabled\"\r\n    class=\"daga-property-button\"\r\n    (click)=\"removeFromValue(index)\"\r\n  >\r\n    <div class=\"daga-icon daga-close-icon\"></div>\r\n  </button>\r\n</div>\r\n<div *ngIf=\"!disabled\" class=\"daga-value-item-input\">\r\n  <div class=\"daga-input daga-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=\"daga-property-button\" (click)=\"addToValue()\">\r\n    <div class=\"daga-icon daga-add-icon\"></div>\r\n  </button>\r\n</div>\r\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { value: [{
                 type: Input
             }], options: [{
@@ -9850,11 +10278,11 @@ class TextListEditorComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: TextListEditorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.2", 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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.2", 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\r\n  *ngFor=\"let item of value; let index = index\"\r\n  class=\"daga-value-item-element\"\r\n>\r\n  <input\r\n    class=\"daga-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=\"daga-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=\"daga-value-item-input\">\r\n  <div class=\"daga-input daga-relatively-positioned\">\r\n    <input type=\"text\" (keyup)=\"onKeyUp($event)\" [(ngModel)]=\"valueInput\" />\r\n    <button\r\n      *ngIf=\"valueInput !== ''\"\r\n      class=\"daga-clear\"\r\n      (click)=\"clearInput()\"\r\n    ></button>\r\n  </div>\r\n  <button class=\"daga-property-button\" (click)=\"addToValue()\">\r\n    <div class=\"daga-icon daga-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: "18.2.2", 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" }]
+            args: [{ standalone: true, selector: 'daga-text-list-editor', imports: [CommonModule, FormsModule], template: "<div\r\n  *ngFor=\"let item of value; let index = index\"\r\n  class=\"daga-value-item-element\"\r\n>\r\n  <input\r\n    class=\"daga-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=\"daga-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=\"daga-value-item-input\">\r\n  <div class=\"daga-input daga-relatively-positioned\">\r\n    <input type=\"text\" (keyup)=\"onKeyUp($event)\" [(ngModel)]=\"valueInput\" />\r\n    <button\r\n      *ngIf=\"valueInput !== ''\"\r\n      class=\"daga-clear\"\r\n      (click)=\"clearInput()\"\r\n    ></button>\r\n  </div>\r\n  <button class=\"daga-property-button\" (click)=\"addToValue()\">\r\n    <div class=\"daga-icon daga-add-icon\"></div>\r\n  </button>\r\n</div>\r\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { value: [{
                 type: Input
             }], valueInput: [{
@@ -9941,11 +10369,11 @@ class TextMapEditorComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: TextMapEditorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.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=\"daga-value-item-element\">\r\n  <input\r\n    class=\"daga-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=\"daga-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=\"daga-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=\"daga-value-item-input\">\r\n  <div class=\"daga-input daga-relatively-positioned\">\r\n    <input type=\"text\" (keyup)=\"onKeyUp($event)\" [(ngModel)]=\"keyInput\" />\r\n    <button\r\n      *ngIf=\"keyInput !== ''\"\r\n      class=\"daga-clear\"\r\n      (click)=\"clearKeyInput()\"\r\n    ></button>\r\n  </div>\r\n  <div class=\"daga-input daga-relatively-positioned\">\r\n    <input type=\"text\" (keyup)=\"onKeyUp($event)\" [(ngModel)]=\"valueInput\" />\r\n    <button\r\n      *ngIf=\"valueInput !== ''\"\r\n      class=\"daga-clear\"\r\n      (click)=\"clearValueInput()\"\r\n    ></button>\r\n  </div>\r\n  <button class=\"daga-property-button\" (click)=\"addToValue()\">\r\n    <div class=\"daga-icon daga-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: "18.2.2", 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" }]
+            args: [{ standalone: true, selector: 'daga-text-map-editor', imports: [CommonModule, FormsModule], template: "<div *ngFor=\"let item of value | keyvalue\" class=\"daga-value-item-element\">\r\n  <input\r\n    class=\"daga-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=\"daga-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=\"daga-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=\"daga-value-item-input\">\r\n  <div class=\"daga-input daga-relatively-positioned\">\r\n    <input type=\"text\" (keyup)=\"onKeyUp($event)\" [(ngModel)]=\"keyInput\" />\r\n    <button\r\n      *ngIf=\"keyInput !== ''\"\r\n      class=\"daga-clear\"\r\n      (click)=\"clearKeyInput()\"\r\n    ></button>\r\n  </div>\r\n  <div class=\"daga-input daga-relatively-positioned\">\r\n    <input type=\"text\" (keyup)=\"onKeyUp($event)\" [(ngModel)]=\"valueInput\" />\r\n    <button\r\n      *ngIf=\"valueInput !== ''\"\r\n      class=\"daga-clear\"\r\n      (click)=\"clearValueInput()\"\r\n    ></button>\r\n  </div>\r\n  <button class=\"daga-property-button\" (click)=\"addToValue()\">\r\n    <div class=\"daga-icon daga-add-icon\"></div>\r\n  </button>\r\n</div>\r\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { value: [{
                 type: Input
             }], keyInput: [{
@@ -10021,7 +10449,7 @@ class ObjectEditorComponent {
         return new Date(string);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.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: "18.2.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]=\"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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.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=\"daga-property\"\r\n  [class]=\"getStyleClassName(property.name) + ' daga-depth-' + depth\"\r\n>\r\n  <p class=\"daga-property-name\">\r\n    {{ property.name }}\r\n  </p>\r\n\r\n  <input\r\n    *ngIf=\"property.type === Type.Text\"\r\n    type=\"daga-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=\"daga-radio\" *ngIf=\"property.type === Type.Boolean\">\r\n    <label class=\"daga-radio-item daga-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=\"daga-radio-item daga-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=\"daga-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=\"daga-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: "18.2.2", ngImport: i0, type: ObjectEditorComponent, decorators: [{
             type: Component,
@@ -10032,13 +10460,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
                         OptionListEditorComponent,
                         TextListEditorComponent,
                         TextMapEditorComponent
-                    ], 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" }]
+                    ], template: "<div\r\n  *ngFor=\"let property of valueSet?.displayedProperties || []\"\r\n  class=\"daga-property\"\r\n  [class]=\"getStyleClassName(property.name) + ' daga-depth-' + depth\"\r\n>\r\n  <p class=\"daga-property-name\">\r\n    {{ property.name }}\r\n  </p>\r\n\r\n  <input\r\n    *ngIf=\"property.type === Type.Text\"\r\n    type=\"daga-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=\"daga-radio\" *ngIf=\"property.type === Type.Boolean\">\r\n    <label class=\"daga-radio-item daga-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=\"daga-radio-item daga-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=\"daga-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=\"daga-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: [{
                 type: Input
             }] } });
 
+/**
+ * Duration of the highlight property animation in milliseconds.
+ */
+const HIGHLIGHT_ANIMATION_DURATION_MS = 1000;
 /**
  * Editor of the values of a value set.
  * @see ValueSet
@@ -10078,14 +10510,14 @@ class PropertyEditorComponent {
         let selector = '';
         let depth = 0;
         for (const propertyName of propertyNames) {
-            selector += ` .property.${getStyleClassName(propertyName)}.depth-${depth}`;
+            selector += ` .daga-property.${getStyleClassName(propertyName)}.daga-depth-${depth}`;
             ++depth;
         }
         if (this.valueSet) {
             d3.select(this.panel.nativeElement)
                 .select(selector)
                 .transition()
-                .duration(1000)
+                .duration(HIGHLIGHT_ANIMATION_DURATION_MS)
                 .ease(d3.easeLinear)
                 .styleTween('background-color', () => {
                 const interpolator = d3.interpolate('rgba(255, 0, 0, 0)', 'rgba(255, 0, 0, 0.4)');
@@ -10094,7 +10526,7 @@ class PropertyEditorComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: PropertyEditorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.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\">\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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.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\r\n  #panel\r\n  class=\"daga-panel daga-bottom daga-{{ location }} daga-{{ direction }}\"\r\n>\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=\".daga-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=\"daga-panel-content\"\r\n  >\r\n    <p *ngIf=\"title\" class=\"daga-title\">\r\n      {{ title }}\r\n      <button class=\"daga-property-button\" (click)=\"settings = !settings\">\r\n        <div\r\n          class=\"daga-icon daga-settings-icon\"\r\n          [class]=\"\r\n            settings === undefined\r\n              ? ''\r\n              : settings\r\n                ? 'daga-unrotate'\r\n                : 'daga-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: "18.2.2", ngImport: i0, type: PropertyEditorComponent, decorators: [{
             type: Component,
@@ -10103,7 +10535,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
                         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" }]
+                    ], template: "<div\r\n  #panel\r\n  class=\"daga-panel daga-bottom daga-{{ location }} daga-{{ direction }}\"\r\n>\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=\".daga-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=\"daga-panel-content\"\r\n  >\r\n    <p *ngIf=\"title\" class=\"daga-title\">\r\n      {{ title }}\r\n      <button class=\"daga-property-button\" (click)=\"settings = !settings\">\r\n        <div\r\n          class=\"daga-icon daga-settings-icon\"\r\n          [class]=\"\r\n            settings === undefined\r\n              ? ''\r\n              : settings\r\n                ? 'daga-unrotate'\r\n                : 'daga-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']
@@ -10117,7 +10549,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
                 type: Input
             }] } });
 const getStyleClassName = (s) => {
-    return 'property-name-' + s.replace(/\s/g, '');
+    return 'daga-property-name-' + s.replace(/\s/g, '');
 };
 
 /**
@@ -10177,7 +10609,7 @@ class DiagramEditorComponent {
         this.canvasProvider.initCanvasView(this.appendTo.nativeElement);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: DiagramEditorComponent, deps: [{ token: DagaConfigurationService }, { token: CanvasProviderService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.2", type: DiagramEditorComponent, isStandalone: true, selector: "daga-diagram-editor", outputs: { modelEvent: "modelEvent" }, 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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.2", type: DiagramEditorComponent, isStandalone: true, selector: "daga-diagram-editor", outputs: { modelEvent: "modelEvent" }, 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=\"daga-append-to\" #appendTo></div>\r\n<daga-diagram-buttons\r\n  *ngIf=\"config.components?.buttons?.exists !== false\"\r\n  #diagramButtons\r\n  [location]=\"config.components?.buttons?.location || Corner.BottomRight\"\r\n  [direction]=\"config.components?.buttons?.direction || Side.Top\"\r\n  [enableFilter]=\"config.components?.buttons?.enableFilter !== false\"\r\n  [enableLayout]=\"config.components?.buttons?.enableLayout !== false\"\r\n  [enableUndoRedo]=\"config.components?.buttons?.enableUndoRedo !== false\"\r\n  [enableZoom]=\"config.components?.buttons?.enableZoom !== false\"\r\n  [zoomRate]=\"config.components?.buttons?.zoomRate || 2\"\r\n/>\r\n<daga-palette\r\n  *ngIf=\"\r\n    config.components?.palette?.exists !== false &&\r\n    config.components?.palette?.sections &&\r\n    (config.components?.palette?.sections?.length || 0) > 0\r\n  \"\r\n  #palette\r\n  [location]=\"config.components?.palette?.location || Corner.TopLeft\"\r\n  [direction]=\"config.components?.palette?.direction || Side.Bottom\"\r\n  [width]=\"config.components?.palette?.width || '12rem'\"\r\n  [palettes]=\"config.components?.palette?.sections || []\"\r\n/>\r\n<daga-property-editor\r\n  *ngIf=\"config.components?.propertyEditor?.exists !== false\"\r\n  #propertyEditor\r\n  [location]=\"config.components?.propertyEditor?.location || Corner.TopRight\"\r\n  [direction]=\"config.components?.propertyEditor?.direction || Side.Bottom\"\r\n  [width]=\"config.components?.propertyEditor?.width || '24rem'\"\r\n/>\r\n<daga-errors *ngIf=\"config.components?.errors?.exists !== false\" />\r\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: "18.2.2", ngImport: i0, type: DiagramEditorComponent, decorators: [{
             type: Component,
@@ -10187,7 +10619,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
                         PaletteComponent,
                         PropertyEditorComponent,
                         ErrorsComponent
-                    ], 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" }]
+                    ], template: "<div class=\"daga-append-to\" #appendTo></div>\r\n<daga-diagram-buttons\r\n  *ngIf=\"config.components?.buttons?.exists !== false\"\r\n  #diagramButtons\r\n  [location]=\"config.components?.buttons?.location || Corner.BottomRight\"\r\n  [direction]=\"config.components?.buttons?.direction || Side.Top\"\r\n  [enableFilter]=\"config.components?.buttons?.enableFilter !== false\"\r\n  [enableLayout]=\"config.components?.buttons?.enableLayout !== false\"\r\n  [enableUndoRedo]=\"config.components?.buttons?.enableUndoRedo !== false\"\r\n  [enableZoom]=\"config.components?.buttons?.enableZoom !== false\"\r\n  [zoomRate]=\"config.components?.buttons?.zoomRate || 2\"\r\n/>\r\n<daga-palette\r\n  *ngIf=\"\r\n    config.components?.palette?.exists !== false &&\r\n    config.components?.palette?.sections &&\r\n    (config.components?.palette?.sections?.length || 0) > 0\r\n  \"\r\n  #palette\r\n  [location]=\"config.components?.palette?.location || Corner.TopLeft\"\r\n  [direction]=\"config.components?.palette?.direction || Side.Bottom\"\r\n  [width]=\"config.components?.palette?.width || '12rem'\"\r\n  [palettes]=\"config.components?.palette?.sections || []\"\r\n/>\r\n<daga-property-editor\r\n  *ngIf=\"config.components?.propertyEditor?.exists !== false\"\r\n  #propertyEditor\r\n  [location]=\"config.components?.propertyEditor?.location || Corner.TopRight\"\r\n  [direction]=\"config.components?.propertyEditor?.direction || Side.Bottom\"\r\n  [width]=\"config.components?.propertyEditor?.width || '24rem'\"\r\n/>\r\n<daga-errors *ngIf=\"config.components?.errors?.exists !== false\" />\r\n" }]
         }], ctorParameters: () => [{ type: DagaConfigurationService }, { type: CanvasProviderService }], propDecorators: { appendTo: [{
                 type: ViewChild,
                 args: ['appendTo']
@@ -10541,5 +10973,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, DiagramDecorator, DiagramDecoratorSet, DiagramEditorComponent, DiagramElement, DiagramEntitySet, DiagramEvent, DiagramField, DiagramFieldSet, DiagramModel, DiagramNode, DiagramNodeSet, DiagramNodeType, DiagramObject, DiagramObjectSet, DiagramPort, DiagramPortSet, DiagramSection, DiagramSectionSet, EditFieldAction, ErrorsComponent, ForceLayout, HorizontalAlign, HorizontalLayout, LineShape, LineStyle, ObjectEditorComponent, PaletteComponent, PriorityLayout, Property, PropertyEditorComponent, PropertySet, RemoveAction, SetGeometryAction, Side, TextListEditorComponent, TextMapEditorComponent, TreeLayout, 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, DiagramDecorator, DiagramDecoratorSet, DiagramEditorComponent, DiagramElement, DiagramElementSet, DiagramEntitySet, DiagramEvent, DiagramField, DiagramFieldSet, DiagramModel, DiagramNode, DiagramNodeSet, DiagramNodeType, DiagramObject, DiagramObjectSet, DiagramPort, DiagramPortSet, DiagramSection, DiagramSectionSet, EditFieldAction, ErrorsComponent, ForceLayout, HorizontalAlign, HorizontalLayout, LineShape, LineStyle, ObjectEditorComponent, PaletteComponent, PriorityLayout, Property, PropertyEditorComponent, PropertySet, RemoveAction, SetGeometryAction, Side, TextListEditorComponent, TextMapEditorComponent, TreeLayout, Type, UpdateValuesAction, ValueSet, VerticalAlign, VerticalLayout, layouts };
 //# sourceMappingURL=metadev-daga.mjs.map