@metadev/daga 1.1.0 → 1.3.0

package/fesm2022/metadev-daga.mjs

@@ -7,35 +7,111 @@ import * as i4 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import * as i3 from '@metadev/lux';
 import { LuxModule } from '@metadev/lux';
-import { Subject, delay, map, combineLatest } from 'rxjs';
+import { Subject, combineLatest, delay, map } from 'rxjs';
 
+/**
+ * An enumeration of the possible sides of a rectangle and directions parallel to the axes of coordinates.
+ * @public
+ */
 var Side;
 (function (Side) {
+    /**
+     * Bottom side or direction.
+     * @public
+     */
     Side["Bottom"] = "bottom";
+    /**
+     * Left side or direction.
+     * @public
+     */
     Side["Left"] = "left";
+    /**
+     * Right side or direction.
+     * @public
+     */
     Side["Right"] = "right";
+    /**
+     * Top side or direction.
+     * @public
+     */
     Side["Top"] = "top";
 })(Side || (Side = {}));
+/**
+ * An enumeration of the possible corners of a rectangle.
+ * @public
+ */
 var Corner;
 (function (Corner) {
+    /**
+     * Bottom left corner.
+     * @public
+     */
     Corner["BottomLeft"] = "bottom-left";
+    /**
+     * Bottom right corner.
+     * @public
+     */
     Corner["BottomRight"] = "bottom-right";
+    /**
+     * Top left corner.
+     * @public
+     */
     Corner["TopLeft"] = "top-left";
+    /**
+     * Top right corner.
+     * @public
+     */
     Corner["TopRight"] = "top-right";
 })(Corner || (Corner = {}));
-var VerticalAlign;
-(function (VerticalAlign) {
-    VerticalAlign["Top"] = "top";
-    VerticalAlign["Center"] = "center";
-    VerticalAlign["Bottom"] = "bottom";
-})(VerticalAlign || (VerticalAlign = {}));
+/**
+ * An enumeration of the possible horizontal alignments within a horizontal range of coordinates.
+ * @public
+ */
 var HorizontalAlign;
 (function (HorizontalAlign) {
+    /**
+     * Start of an horizontal range of coordinates.
+     * @public
+     */
     HorizontalAlign["Left"] = "left";
+    /**
+     * Middle of an horizontal range of coordinates.
+     * @public
+     */
     HorizontalAlign["Center"] = "center";
+    /**
+     * End of an horizontal range of coordinates.
+     * @public
+     */
     HorizontalAlign["Right"] = "right";
 })(HorizontalAlign || (HorizontalAlign = {}));
+/**
+ * An enumeration of the possible vertical alignments within a vertical range of coordinates.
+ * @public
+ */
+var VerticalAlign;
+(function (VerticalAlign) {
+    /**
+     * Start of a vertical range of coordinates.
+     * @public
+     */
+    VerticalAlign["Top"] = "top";
+    /**
+     * Middle of a vertical range of coordinates.
+     * @public
+     */
+    VerticalAlign["Center"] = "center";
+    /**
+     * End of a vertical range of coordinates.
+     * @public
+     */
+    VerticalAlign["Bottom"] = "bottom";
+})(VerticalAlign || (VerticalAlign = {}));
 
+/**
+ * Button used to collapse components that implement it.
+ * @private
+ */
 class CollapseButtonComponent {
     constructor() {
         this.collapsed = false;
@@ -71,12 +147,56 @@ class CollapseButtonComponent {
             selection.style(this.rule, this.collapsed ? this.collapsedValue : this.visibleValue);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: CollapseButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.6", 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  <img\n    *ngIf=\"direction === Side.Bottom && disabled\"\n    src=\"/assets/daga/icon/action/drop-vertical-none.svg\"\n  />\n  <img\n    *ngIf=\"direction === Side.Bottom && !disabled && collapsed\"\n    src=\"/assets/daga/icon/action/drop-vertical-down.svg\"\n  />\n  <img\n    *ngIf=\"direction === Side.Bottom && !disabled && !collapsed\"\n    src=\"/assets/daga/icon/action/drop-vertical-up.svg\"\n  />\n\n  <img\n    *ngIf=\"direction === Side.Top && disabled\"\n    src=\"/assets/daga/icon/action/drop-vertical-none.svg\"\n  />\n  <img\n    *ngIf=\"direction === Side.Top && !disabled && collapsed\"\n    src=\"/assets/daga/icon/action/drop-vertical-up.svg\"\n  />\n  <img\n    *ngIf=\"direction === Side.Top && !disabled && !collapsed\"\n    src=\"/assets/daga/icon/action/drop-vertical-down.svg\"\n  />\n\n  <img\n    *ngIf=\"direction === Side.Left && disabled\"\n    src=\"/assets/daga/icon/action/drop-horizontal-none.svg\"\n  />\n  <img\n    *ngIf=\"direction === Side.Left && !disabled && collapsed\"\n    src=\"/assets/daga/icon/action/drop-horizontal-left.svg\"\n  />\n  <img\n    *ngIf=\"direction === Side.Left && !disabled && !collapsed\"\n    src=\"/assets/daga/icon/action/drop-horizontal-right.svg\"\n  />\n\n  <img\n    *ngIf=\"direction === Side.Right && disabled\"\n    src=\"/assets/daga/icon/action/drop-horizontal-none.svg\"\n  />\n  <img\n    *ngIf=\"direction === Side.Right && !disabled && collapsed\"\n    src=\"/assets/daga/icon/action/drop-horizontal-right.svg\"\n  />\n  <img\n    *ngIf=\"direction === Side.Right && !disabled && !collapsed\"\n    src=\"/assets/daga/icon/action/drop-horizontal-left.svg\"\n  />\n</button>\n", styles: [".collapse-button{width:100%;height:100%;min-width:2rem;min-height:2rem;margin:0;border:0;padding:0;background-color:transparent;cursor:pointer}.collapse-button img{width:1.5rem;height:1.5rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    getClass() {
+        switch (this.direction) {
+            case Side.Right:
+                if (this.disabled) {
+                    return 'horizontal-none';
+                }
+                else if (this.collapsed) {
+                    return 'horizontal-right';
+                }
+                else {
+                    return 'horizontal-left';
+                }
+            case Side.Bottom:
+                if (this.disabled) {
+                    return 'vertical-none';
+                }
+                else if (this.collapsed) {
+                    return 'vertical-down';
+                }
+                else {
+                    return 'vertical-up';
+                }
+            case Side.Left:
+                if (this.disabled) {
+                    return 'horizontal-none';
+                }
+                else if (this.collapsed) {
+                    return 'horizontal-left';
+                }
+                else {
+                    return 'horizontal-right';
+                }
+            case Side.Top:
+                if (this.disabled) {
+                    return 'vertical-none';
+                }
+                else if (this.collapsed) {
+                    return 'vertical-up';
+                }
+                else {
+                    return 'vertical-down';
+                }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CollapseButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: CollapseButtonComponent, isStandalone: true, selector: "daga-collapse-button", inputs: { collapsableSelector: "collapsableSelector", collapsableAdditionalSelector: "collapsableAdditionalSelector", collapsed: "collapsed", disabled: "disabled", direction: "direction", rule: "rule", collapsedValue: "collapsedValue", visibleValue: "visibleValue" }, ngImport: i0, template: "<button class=\"collapse-button {{ direction }}\" (click)=\"toggleCollapse()\">\n  <div [class]=\"getClass()\"></div>\n</button>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: CollapseButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.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  <img\n    *ngIf=\"direction === Side.Bottom && disabled\"\n    src=\"/assets/daga/icon/action/drop-vertical-none.svg\"\n  />\n  <img\n    *ngIf=\"direction === Side.Bottom && !disabled && collapsed\"\n    src=\"/assets/daga/icon/action/drop-vertical-down.svg\"\n  />\n  <img\n    *ngIf=\"direction === Side.Bottom && !disabled && !collapsed\"\n    src=\"/assets/daga/icon/action/drop-vertical-up.svg\"\n  />\n\n  <img\n    *ngIf=\"direction === Side.Top && disabled\"\n    src=\"/assets/daga/icon/action/drop-vertical-none.svg\"\n  />\n  <img\n    *ngIf=\"direction === Side.Top && !disabled && collapsed\"\n    src=\"/assets/daga/icon/action/drop-vertical-up.svg\"\n  />\n  <img\n    *ngIf=\"direction === Side.Top && !disabled && !collapsed\"\n    src=\"/assets/daga/icon/action/drop-vertical-down.svg\"\n  />\n\n  <img\n    *ngIf=\"direction === Side.Left && disabled\"\n    src=\"/assets/daga/icon/action/drop-horizontal-none.svg\"\n  />\n  <img\n    *ngIf=\"direction === Side.Left && !disabled && collapsed\"\n    src=\"/assets/daga/icon/action/drop-horizontal-left.svg\"\n  />\n  <img\n    *ngIf=\"direction === Side.Left && !disabled && !collapsed\"\n    src=\"/assets/daga/icon/action/drop-horizontal-right.svg\"\n  />\n\n  <img\n    *ngIf=\"direction === Side.Right && disabled\"\n    src=\"/assets/daga/icon/action/drop-horizontal-none.svg\"\n  />\n  <img\n    *ngIf=\"direction === Side.Right && !disabled && collapsed\"\n    src=\"/assets/daga/icon/action/drop-horizontal-right.svg\"\n  />\n  <img\n    *ngIf=\"direction === Side.Right && !disabled && !collapsed\"\n    src=\"/assets/daga/icon/action/drop-horizontal-left.svg\"\n  />\n</button>\n", styles: [".collapse-button{width:100%;height:100%;min-width:2rem;min-height:2rem;margin:0;border:0;padding:0;background-color:transparent;cursor:pointer}.collapse-button img{width:1.5rem;height:1.5rem}\n"] }]
+            args: [{ standalone: true, selector: 'daga-collapse-button', imports: [CommonModule], template: "<button class=\"collapse-button {{ direction }}\" (click)=\"toggleCollapse()\">\n  <div [class]=\"getClass()\"></div>\n</button>\n" }]
         }], propDecorators: { collapsableSelector: [{
                 type: Input
             }], collapsableAdditionalSelector: [{
@@ -95,41 +215,72 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImpor
                 type: Input
             }] } });
 
+/**
+ * A two dimensional array of elements of the given class that can extend infinitely in any direction, both positive and negative.
+ * @private
+ */
 class Grid {
     constructor() {
         this.grid = [[undefined]];
         this.offsetX = 0;
         this.offsetY = 0;
     }
+    /**
+     * Get the minimum x coordinate among the elements in the grid.
+     */
     minX() {
         return -this.offsetX;
     }
+    /**
+     * Get the maximum x coordinate among the elements in the grid.
+     */
     maxX() {
         return this.width() - 1 - this.offsetX;
     }
+    /**
+     * Get the minimum y coordinate among the elements in the grid.
+     */
     minY() {
         return -this.offsetY;
     }
+    /**
+     * Get the maximum y coordinate among the elements in the grid.
+     */
     maxY() {
         return this.height() - 1 - this.offsetY;
     }
+    /**
+     * Get the total extension of the grid along the x axis.
+     */
     width() {
         return this.grid[0].length;
     }
+    /**
+     * Get the total extension of the grid along the y axis.
+     */
     height() {
         return this.grid.length;
     }
+    /**
+     * Add a new column at the start of the x axis.
+     */
     addColumnLeft() {
         for (const row of this.grid) {
             row.splice(0, 0, undefined);
         }
         this.offsetX = this.offsetX + 1;
     }
+    /**
+     * Add a new column at the end of the x axis.
+     */
     addColumnRight() {
         for (const row of this.grid) {
             row.push(undefined);
         }
     }
+    /**
+     * Add a new row at the start of the y axis.
+     */
     addRowTop() {
         const newRow = [];
         for (let i = 0; i < this.grid[0].length; ++i) {
@@ -138,6 +289,9 @@ class Grid {
         this.grid.splice(0, 0, newRow);
         this.offsetY = this.offsetY + 1;
     }
+    /**
+     * Add a new row at the end of the y axis.
+     */
     addRowBottom() {
         const newRow = [];
         for (let i = 0; i < this.grid[0].length; ++i) {
@@ -145,12 +299,18 @@ class Grid {
         }
         this.grid.push(newRow);
     }
+    /**
+     * Get the element at the given coordinates or undefined if there is no element at the given coordinates.
+     */
     get(coords) {
         if (this.grid[coords[1] + this.offsetY]) {
             return this.grid[coords[1] + this.offsetY][coords[0] + this.offsetX];
         }
         return undefined;
     }
+    /**
+     * Set the element at the given coordinates to the given element.
+     */
     set(coords, value) {
         while (coords[0] < -this.offsetX) {
             this.addColumnLeft();
@@ -166,6 +326,9 @@ class Grid {
         }
         this.grid[coords[1] + this.offsetY][coords[0] + this.offsetX] = value;
     }
+    /**
+     * Get the closest coordinates to the given coordinates that are not set to an element.
+     */
     getClosestEmptyCoordinate(coords) {
         if (this.get(coords) === undefined) {
             return coords;
@@ -192,6 +355,13 @@ class Grid {
     }
 }
 
+/**
+ * Removes the given element from the array if it exists within the array.
+ * @private
+ * @param arr An array.
+ * @param obj An element to remove from the array.
+ * @returns The given array without the given element removed if it was found; otherwise the array without modifications.
+ */
 const removeIfExists = (arr, obj) => {
     const index = arr.indexOf(obj);
     if (index >= 0) {
@@ -199,6 +369,13 @@ const removeIfExists = (arr, obj) => {
     }
     return arr;
 };
+/**
+ * Adds the given element to the array if it doesn't exist within the array.
+ * @private
+ * @param arr An array.
+ * @param obj An element to add to the array.
+ * @returns The given array with the given element added it was not found; otherwise the array without modifications.
+ */
 const addIfNotExists = (arr, obj) => {
     if (!arr.includes(obj)) {
         arr.push(obj);
@@ -208,6 +385,7 @@ const addIfNotExists = (arr, obj) => {
 
 /**
  * A layout which places adjacent nodes close by, placing nodes in order according to depth first search.
+ * @public
  */
 class AdjacencyLayout {
     apply(model) {
@@ -254,6 +432,7 @@ const arrangeNode = (node, nodeArrangement, coords, nodesToBeArranged) => {
 
 /**
  * A layout which places adjacent nodes close by, placing nodes in order according to breadth first search.
+ * @public
  */
 class BreadthAdjacencyLayout {
     apply(model) {
@@ -314,8 +493,8 @@ class BreadthAdjacencyLayout {
 }
 
 /**
- * A layout which arranges the nodes by a breadth first search system,
- * according to their distance to the first node in the list.
+ * A layout which arranges the nodes by a breadth first search system according to their distance to the first node in the list.
+ * @public
  */
 class BreadthLayout {
     apply(model) {
@@ -376,9 +555,23 @@ class BreadthLayout {
     }
 }
 
+/**
+ * Round the coordinates of the given point to the nearest whole number.
+ * @public
+ * @param point A point.
+ * @returns A new point with whole coordinates.
+ */
 const roundPoint = (point) => {
     return [Math.round(point[0]), Math.round(point[1])];
 };
+/**
+ * Checks if the given coordinate is in the range given by an starting coordinate and an ending coordinate.
+ * @public
+ * @param coordinate A coordinate to check its presence in the range.
+ * @param start A coordinate determining one of the extremes in the range.
+ * @param end A coordinate determine one of the extremes in the range.
+ * @returns `true` if the given coordinate is in the given range; `false` otherwise.
+ */
 const between = (coordinate, start, end) => {
     if (start < end) {
         return start <= coordinate && coordinate <= end;
@@ -387,18 +580,44 @@ const between = (coordinate, start, end) => {
         return end <= coordinate && coordinate <= start;
     }
 };
+/**
+ * Moves the given coordinate according to the given changes in coordinates.
+ * @public
+ * @param oldCoordinate A coordinate.
+ * @param oldCoordinates A range of coordinates.
+ * @param newCoordinates A range of coordinates.
+ * @returns A new coordinate.
+ */
 const translateCoordinate = (oldCoordinate, oldCoordinates, newCoordinates) => {
     return (((oldCoordinate - oldCoordinates[0]) /
         (oldCoordinates[1] - oldCoordinates[0])) *
         (newCoordinates[1] - newCoordinates[0]) +
         newCoordinates[0]);
 };
+/**
+ * Moves the coordinates of the given point according to the given changes in coordinates.
+ * @public
+ * @param oldPoint A point.
+ * @param oldCoordsX A range of coordinates along the x axis.
+ * @param oldCoordsY A range of coordinates along the y axis.
+ * @param newCoordsX A range of coordinates along the x axis.
+ * @param newCoordsY A range of coordinates along the y axis.
+ * @returns A new point.
+ */
 const translatePoint = (oldPoint, oldCoordsX, oldCoordsY, newCoordsX, newCoordsY) => {
     return [
         translateCoordinate(oldPoint[0], oldCoordsX, newCoordsX),
         translateCoordinate(oldPoint[1], oldCoordsY, newCoordsY)
     ];
 };
+/**
+ * Calculates the result of moving the given point by the given distance in the given direction.
+ * @public
+ * @param point A point.
+ * @param direction A direction.
+ * @param distance A distance.
+ * @returns A new point which differs from the given point by the given distance in the given direction.
+ */
 const movePoint = (point, direction, distance) => {
     switch (direction) {
         case Side.Right:
@@ -411,12 +630,33 @@ const movePoint = (point, direction, distance) => {
             return [point[0], point[1] - distance];
     }
 };
+/**
+ * Checks whether two given points are the same point, that is, they have the same coordinates and are not NaN.
+ * @public
+ * @param point1 A point.
+ * @param point2 A point.
+ * @returns `true` if the two points have the same coordinates; `false` otherwise.
+ */
 const equals$1 = (point1, point2) => {
     return point1[0] === point2[0] && point1[1] === point2[1];
 };
+/**
+ * Calculates the euclidean distance between two points.
+ * @public
+ * @param point1 A point.
+ * @param point2 A point.
+ * @returns The euclidean distance between the given points.
+ */
 const distanceBetweenPoints = (point1, point2) => {
     return ((point1[0] - point2[0]) ** 2 + (point1[1] - point2[1]) ** 2) ** 0.5;
 };
+/**
+ * Checks whether the given point is inside the given line.
+ * @public
+ * @param line A line.
+ * @param point A point.
+ * @returns `true` if the point is contained within the line; `false` otherwise.
+ */
 const lineContainsPoint = (line, point) => {
     const alphaX = (point[0] - line[0][0]) / (line[1][0] - line[0][0]);
     if (alphaX < 0 || 1 < alphaX) {
@@ -425,10 +665,24 @@ const lineContainsPoint = (line, point) => {
     const alphaY = (point[1] - line[0][1]) / (line[1][1] - line[0][1]);
     return alphaX === alphaY;
 };
+/**
+ * Checks whether the given point is inside the given rectaingle.
+ * @public
+ * @param rectangle A rectangle.
+ * @param point A point.
+ * @returns `true` if the point is contained within the rectangle; `false` otherwise.
+ */
 const rectangleContainsPoint = (rectangle, point) => {
     return (between(point[0], rectangle[0][0], rectangle[1][0]) &&
         between(point[1], rectangle[0][1], rectangle[1][1]));
 };
+/**
+ * Checks whether the two given lines share at least one point.
+ * @public
+ * @param line1 A line.
+ * @param line2 A line.
+ * @returns `true` if the lines intersect; `false` otherwise.
+ */
 const linesIntersect = (line1, line2) => {
     // if both lines are a point, they intersect if they are the same point
     if (equals$1(line1[0], line1[1]) && equals$1(line2[0], line2[1])) {
@@ -459,6 +713,13 @@ const linesIntersect = (line1, line2) => {
     const p3 = dy0 * (line1[1][0] - line2[1][0]) - dx0 * (line1[1][1] - line2[1][1]);
     return p0 * p1 <= 0 && p2 * p3 <= 0;
 };
+/**
+ * Checks whether the two given lines share at least one point and have the same slope.
+ * @public
+ * @param line1 A line.
+ * @param line2 A line.
+ * @returns `true` if the lines overlap; `false` otherwise.
+ */
 const linesOverlap = (line1, line2) => {
     // if both lines are a point, they overlap if they are the same point
     if (equals$1(line1[0], line1[1]) && equals$1(line2[0], line2[1])) {
@@ -478,10 +739,21 @@ const linesOverlap = (line1, line2) => {
         lineContainsPoint(line2, line1[0])) &&
         (lineContainsPoint(line1, line2[1]) || lineContainsPoint(line2, line1[1])));
 };
+/**
+ * Checks whether the given line shares at least one point with the given rectangle.
+ * @public
+ * @param line A line.
+ * @param rectangle A rectangle.
+ * @returns `true` if the line intersects with the rectangle; `false` otherwise.
+ */
 const lineIntersectsRectangle = (line, rectangle) => {
+    // first corner of the rectangle
     const point1 = rectangle[0];
+    // second corner of the rectangle
     const point2 = [rectangle[0][0], rectangle[1][1]];
+    // third corner of the rectangle
     const point3 = rectangle[1];
+    // fourth corner of the rectangle
     const point4 = [rectangle[1][0], rectangle[0][1]];
     return (linesIntersect(line, [point1, point2]) ||
         linesIntersect(line, [point2, point3]) ||
@@ -491,6 +763,7 @@ const lineIntersectsRectangle = (line, rectangle) => {
 
 /**
  * A layout which attracts connected nodes and repels unconnected nodes.
+ * @public
  */
 class ForceLayout {
     apply(model) {
@@ -514,7 +787,7 @@ class ForceLayout {
             temperature = temperature * coolingFactor;
             // calculate the center of the diagram for applying gravity
             const diagramCenterCoords = [0, 0];
-            if (gravityFactor !== 0) {
+            if (gravityFactor > 0) {
                 for (const node of model.nodes) {
                     diagramCenterCoords[0] =
                         diagramCenterCoords[0] + node.coords[0] + node.width / 2;
@@ -585,7 +858,7 @@ class ForceLayout {
                             newNode2Coords[1] + shiftNodeIfOverlap * (Math.random() * 2 - 1);
                     }
                     // apply gravity force
-                    if (gravityFactor !== 0) {
+                    if (gravityFactor > 0) {
                         newNode2Coords[0] =
                             newNode2Coords[0] -
                                 (node2CenterCoords[0] - diagramCenterCoords[0]) * gravityFactor;
@@ -626,6 +899,7 @@ class ForceLayout {
 
 /**
  * A layout which arranges all the nodes in a horizontal line.
+ * @public
  */
 class HorizontalLayout {
     apply(model) {
@@ -647,6 +921,7 @@ class HorizontalLayout {
 
 /**
  * A layout which arranges the nodes by their priority first.
+ * @public
  */
 class PriorityLayout {
     apply(model) {
@@ -754,6 +1029,7 @@ class PriorityLayout {
 
 /**
  * A layout which arranges all the nodes in a vertical line.
+ * @public
  */
 class VerticalLayout {
     apply(model) {
@@ -773,6 +1049,9 @@ class VerticalLayout {
     }
 }
 
+/**
+ * Mapping of available layout algorithms.
+ */
 const layouts = {
     adjacency: new AdjacencyLayout(),
     breadth: new BreadthLayout(),
@@ -784,7 +1063,8 @@ const layouts = {
 };
 
 /**
- * User events
+ * User events.
+ * @private
  */
 var Events;
 (function (Events) {
@@ -799,7 +1079,8 @@ var Events;
     Events["MouseOver"] = "mouseover";
 })(Events || (Events = {}));
 /**
- * Keys in keyboard events
+ * Keys in keyboard events.
+ * @private
  */
 var Keys;
 (function (Keys) {
@@ -823,7 +1104,8 @@ var Keys;
     Keys["Tab"] = "Tab";
 })(Keys || (Keys = {}));
 /**
- * Types of events used by D3's drag functionality
+ * Types of events used by D3's drag functionality.
+ * @private
  */
 var DragEvents;
 (function (DragEvents) {
@@ -832,7 +1114,8 @@ var DragEvents;
     DragEvents["End"] = "end";
 })(DragEvents || (DragEvents = {}));
 /**
- * Types of events used by D3's zoom functionality
+ * Types of events used by D3's zoom functionality.
+ * @private
  */
 var ZoomEvents;
 (function (ZoomEvents) {
@@ -841,20 +1124,64 @@ var ZoomEvents;
     ZoomEvents["End"] = "end";
 })(ZoomEvents || (ZoomEvents = {}));
 
+/**
+ * An enumeration of the possible shapes of a line.
+ * @public
+ */
 var LineShape;
 (function (LineShape) {
+    /**
+     * A line that goes between its points taking the shortest euclidean distance.
+     * @public
+     */
     LineShape["Straight"] = "straight";
+    /**
+     * A line that goes between its points using bezier splines.
+     * @public
+     */
     LineShape["Bezier"] = "bezier";
+    /**
+     * A line that goes between its points moving parallel to the axes of coordinates.
+     * @public
+     */
     LineShape["Square"] = "square";
 })(LineShape || (LineShape = {}));
+/**
+ * An enumeration of the possible styles of a line.
+ * @public
+ */
 var LineStyle;
 (function (LineStyle) {
+    /**
+     * A solid uninterrupted line.
+     * @public
+     */
     LineStyle["Solid"] = "solid";
+    /**
+     * A dashed line with little separation between the dashes.
+     * @public
+     */
     LineStyle["Dashed"] = "dashed";
+    /**
+     * A dashed line with wide gaps between the dashes.
+     * @public
+     */
     LineStyle["GappedDashes"] = "gapped-dashes";
+    /**
+     * A dotted line.
+     * @public
+     */
     LineStyle["Dotted"] = "dotted";
 })(LineStyle || (LineStyle = {}));
+/**
+ * The default minimum distance before turn used by the linePath function.
+ * @private
+ */
 const MINIMUM_DISTANCE_BEFORE_TURN = 20;
+/**
+ * Calculates the path of an SVG line with the given parameters.
+ * @private
+ */
 const linePath = (shape, points, startDirection, endDirection, minimumDistanceBeforeTurn) => {
     if (points.length === 0) {
         return '';
@@ -1192,6 +1519,10 @@ const linePath = (shape, points, startDirection, endDirection, minimumDistanceBe
         return result;
     }
 };
+/**
+ * Calculates the dasharray property of an SVG line corresponding to the given line style and width.
+ * @private
+ */
 const lineStyleDasharray = (style, width) => {
     switch (style) {
         case LineStyle.Dotted:
@@ -1206,19 +1537,67 @@ const lineStyleDasharray = (style, width) => {
     }
 };
 
+/**
+ * An enumeration of possible closed shapes.
+ * @public
+ */
 var ClosedShape;
 (function (ClosedShape) {
+    /**
+     * An ellipse shape.
+     * @public
+     */
     ClosedShape["Ellipse"] = "ellipse";
+    /**
+     * A nonexistent shape.
+     * @public
+     */
     ClosedShape["Empty"] = "empty";
+    /**
+     * A folder-like shape.
+     * @public
+     */
     ClosedShape["Folder"] = "folder";
+    /**
+     * An hexagon shape.
+     * @public
+     */
     ClosedShape["Hexagon"] = "hexagon";
+    /**
+     * An octagon shape.
+     * @public
+     */
     ClosedShape["Octagon"] = "octagon";
+    /**
+     * A shape delimited by curves with a fixed radius, with differences in dimensions supplemented by straight lines.
+     * @public
+     */
     ClosedShape["Pill"] = "pill";
+    /**
+     * A rectangle shape.
+     * @public
+     */
     ClosedShape["Rectangle"] = "rectangle";
+    /**
+     * A rhombus shape.
+     * @public
+     */
     ClosedShape["Rhombus"] = "rhombus";
+    /**
+     * A rectangle shape with rounded corners.
+     * @public
+     */
     ClosedShape["RoundedRectangle"] = "rounded-rectangle";
+    /**
+     * A sticky note-like shape.
+     * @public
+     */
     ClosedShape["StickyNote"] = "sticky-note";
 })(ClosedShape || (ClosedShape = {}));
+/**
+ * Get the SVG path of the correspondign closed shape, starting at the given x and y coordinates, with the given width and height.
+ * @private
+ */
 const generalClosedPath = (shape, x, y, width, height) => {
     switch (shape) {
         case ClosedShape.Ellipse:
@@ -1245,21 +1624,51 @@ const generalClosedPath = (shape, x, y, width, height) => {
             return rectanglePath(x, y, width, height);
     }
 };
+/**
+ * Generates an ellipse SVG path.
+ * @see ClosedShape
+ * @private
+ */
 const ellipsePath = (x, y, width, height) => {
     return `M ${x + width / 2} ${y} A ${width / 2} ${height / 2} 0 0 0 ${x + width / 2} ${y + height} A ${width / 2} ${height / 2} 0 1 0 ${x + width / 2} ${y} Z`;
 };
+/**
+ * Generates an empty SVG path.
+ * @see ClosedShape
+ * @private
+ */
 const emptyPath = () => {
     return 'Z';
 };
+/**
+ * Generates a folder SVG path.
+ * @see ClosedShape
+ * @private
+ */
 const folderPath = (x, y, width, height) => {
     return `M ${x} ${y} L ${x + width / 3} ${y} L ${x + width / 2} ${y + height / 6} L ${x + width} ${y + height / 6} L ${x + width} ${y + height} L ${x} ${y + height} Z`;
 };
+/**
+ * Generates an hexagon SVG path.
+ * @see ClosedShape
+ * @private
+ */
 const hexagonPath = (x, y, width, height) => {
     return `M ${x + width / 4} ${y} L ${x + (3 * width) / 4} ${y} L ${x + width} ${y + height / 2} L ${x + (3 * width) / 4} ${y + height} L ${x + width / 4} ${y + height} L ${x} ${y + height / 2} Z`;
 };
+/**
+ * Generates an octagon SVG path.
+ * @see ClosedShape
+ * @private
+ */
 const octagonPath = (x, y, width, height) => {
     return `M ${x + width / 4} ${y} L ${x + (3 * width) / 4} ${y} L ${x + width} ${y + height / 4} L ${x + width} ${y + (3 * height) / 4} L ${x + (3 * width) / 4} ${y + height} L ${x + width / 4} ${y + height} L ${x} ${y + (3 * height) / 4} L ${x} ${y + height / 4} L ${x + width / 4} ${y} Z`;
 };
+/**
+ * Generates a pill SVG path.
+ * @see ClosedShape
+ * @private
+ */
 const pillPath = (x, y, width, height) => {
     if (height < width) {
         return `M ${x + height / 2} ${y} L ${x + width - height / 2} ${y} A ${height / 2} ${height / 2} 0 0 1 ${x + width} ${y + height / 2} A ${height / 2} ${height / 2} 0 0 1 ${x + width - height / 2} ${y + height} L ${x + height / 2} ${y + height} A ${height / 2} ${height / 2} 0 0 1 ${x} ${y + height / 2} A ${height / 2} ${height / 2} 0 0 1 ${x + height / 2} ${y} Z`;
@@ -1271,19 +1680,43 @@ const pillPath = (x, y, width, height) => {
         return ellipsePath(x, y, width, height);
     }
 };
+/**
+ * Generates a rectangle SVG path.
+ * @see ClosedShape
+ * @private
+ */
 const rectanglePath = (x, y, width, height) => {
     return `M ${x} ${y} L ${x + width} ${y} L ${x + width} ${y + height} L ${x} ${y + height} Z`;
 };
+/**
+ * Generates a rhombus SVG path.
+ * @see ClosedShape
+ * @private
+ */
 const rhombusPath = (x, y, width, height) => {
     return `M ${x + width / 2} ${y} L ${x + width} ${y + height / 2} L ${x + width / 2} ${y + height} L ${x} ${y + height / 2} Z`;
 };
+/**
+ * Generates a rounded rectangle SVG path.
+ * @see ClosedShape
+ * @private
+ */
 const roundedRectanglePath = (x, y, width, height) => {
     return `M ${x + width / 4} ${y} L ${x + (3 * width) / 4} ${y} A ${width / 4} ${height / 4} 0 0 1 ${x + width} ${y + height / 4} L ${x + width} ${y + (3 * height) / 4} A ${width / 4} ${height / 4} 0 0 1 ${x + (3 * width) / 4} ${y + height} L ${x + width / 4} ${y + height} A ${width / 4} ${height / 4} 0 0 1 ${x} ${y + (3 * height) / 4} L ${x} ${y + height / 4} A ${width / 4} ${height / 4} 0 0 1 ${x + width / 4} ${y} Z`;
 };
+/**
+ * Generates a sticky note SVG path.
+ * @see ClosedShape
+ * @private
+ */
 const stickyNotePath = (x, y, width, height) => {
     return `M ${x} ${y} L ${x + (3 * width) / 4} ${y} L ${x + (3 * width) / 4} ${y + height / 4} L ${x + (3 * width) / 4} ${y} L ${x + width} ${y + height / 4} L ${x + (3 * width) / 4} ${y + height / 4} L ${x + width} ${y + height / 4} L ${x + width} ${y + height} L ${x} ${y + height} Z`;
 };
 
+/**
+ * A queue of recent actions taken by the user that can be undone and redone.
+ * @private
+ */
 class ActionQueue {
     constructor(maximum) {
         this.maximum = maximum;
@@ -1292,6 +1725,7 @@ class ActionQueue {
     }
     /**
      * Adds an action to the history.
+     * @private
      */
     add(action) {
         if (this.index < this.history.length) {
@@ -1308,6 +1742,7 @@ class ActionQueue {
     }
     /**
      * Undoes the last action in the history, not counting undone actions.
+     * @private
      */
     undo() {
         if (this.index > 0) {
@@ -1317,6 +1752,7 @@ class ActionQueue {
     }
     /**
      * Redoes the last undone action in the history.
+     * @private
      */
     redo() {
         if (this.index < this.history.length) {
@@ -1325,6 +1761,26 @@ class ActionQueue {
         }
     }
 }
+/**
+ * Enum listing the actions that can be taken by the user.
+ * @private
+ */
+var DiagramActions;
+(function (DiagramActions) {
+    DiagramActions["AddConnectionAction"] = "add-connection";
+    DiagramActions["AddNodeAction"] = "add-node";
+    DiagramActions["EditFieldAction"] = "edit-field";
+    DiagramActions["MoveNodeAction"] = "move-node";
+    DiagramActions["RemoveAction"] = "remove";
+    DiagramActions["StretchNodeAction"] = "stretch-node";
+    DiagramActions["StretchSectionAction"] = "stretch-section";
+    DiagramActions["UpdateValuesAction"] = "update-values";
+})(DiagramActions || (DiagramActions = {}));
+/**
+ * Action which consists of adding a node.
+ * @see DiagramNode
+ * @private
+ */
 class AddNodeAction {
     constructor(canvas, type, coords, label, values, id) {
         this.canvas = canvas;
@@ -1361,6 +1817,11 @@ class AddNodeAction {
         this.labelId = node.label?.id;
     }
 }
+/**
+ * Action which consists of moving a node.
+ * @see DiagramNode
+ * @private
+ */
 class MoveNodeAction {
     constructor(canvas, nodeId, from, to) {
         this.canvas = canvas;
@@ -1375,6 +1836,11 @@ class MoveNodeAction {
         this.canvas.model.nodes.get(this.nodeId)?.move(this.to);
     }
 }
+/**
+ * Action which consists of changing the dimensions of a node in a given direction.
+ * @see DiagramNode
+ * @private
+ */
 class StretchNodeAction {
     constructor(canvas, nodeId, direction, from, to) {
         this.canvas = canvas;
@@ -1394,6 +1860,11 @@ class StretchNodeAction {
             ?.stretch(this.direction, this.to - this.from);
     }
 }
+/**
+ * Action which consists of changing the dimensions of a section in a given direction.
+ * @see DiagramSection
+ * @private
+ */
 class StretchSectionAction {
     constructor(canvas, sectionId, direction, from, to) {
         this.canvas = canvas;
@@ -1417,6 +1888,11 @@ class StretchSectionAction {
         }
     }
 }
+/**
+ * Action which consists of adding a connection.
+ * @see DiagramConnection
+ * @private
+ */
 class AddConnectionAction {
     constructor(canvas, type, startId, endId, id) {
         this.canvas = canvas;
@@ -1440,6 +1916,11 @@ class AddConnectionAction {
         }
     }
 }
+/**
+ * Action which consists of editing the text of a field.
+ * @see DiagramField
+ * @private
+ */
 class EditFieldAction {
     constructor(canvas, fieldId, from, to) {
         this.canvas = canvas;
@@ -1462,6 +1943,11 @@ class EditFieldAction {
         }
     }
 }
+/**
+ * Action which consists of editing the values of a value set.
+ * @see ValueSet
+ * @private
+ */
 class UpdateValuesAction {
     constructor(model, id, from, to) {
         this.model = model;
@@ -1484,6 +1970,10 @@ class UpdateValuesAction {
         this.getValueSet()?.setValues(this.to);
     }
 }
+/**
+ * Action which consists of removing elements from a diagram.
+ * @private
+ */
 class RemoveAction {
     constructor(model, nodes, sections, ports, connections, fields) {
         this.nodes = [];
@@ -1535,11 +2025,11 @@ class RemoveAction {
                 addIfNotExists(this.connections, connection);
             }
         }
-        this.nodeIds = this.nodes.map((n) => n._id);
-        this.sectionIds = this.sections.map((s) => s._id);
-        this.portIds = this.ports.map((p) => p._id);
-        this.connectionIds = this.connections.map((c) => c._id);
-        this.fieldIds = this.fields.map((f) => f._id);
+        this.nodeIds = this.nodes.map((n) => n.id);
+        this.sectionIds = this.sections.map((s) => s.id);
+        this.portIds = this.ports.map((p) => p.id);
+        this.connectionIds = this.connections.map((c) => c.id);
+        this.fieldIds = this.fields.map((f) => f.id);
     }
     undo() {
         for (const node of this.nodes) {
@@ -1559,14 +2049,14 @@ class RemoveAction {
         }
         for (const node of this.nodes) {
             if (node.label) {
-                const label = this.model.fields.get(node.label._id);
+                const label = this.model.fields.get(node.label.id);
                 if (label) {
                     node.label = label;
                 }
             }
             const ports = [];
             for (const nodePort of node.ports) {
-                const port = this.model.ports.get(nodePort._id);
+                const port = this.model.ports.get(nodePort.id);
                 if (port) {
                     ports.push(port);
                 }
@@ -1574,7 +2064,7 @@ class RemoveAction {
             node.ports = ports;
             const sections = [];
             for (const nodeSection of node.sections) {
-                const section = this.model.sections.get(nodeSection._id);
+                const section = this.model.sections.get(nodeSection.id);
                 if (section) {
                     sections.push(section);
                 }
@@ -1583,20 +2073,20 @@ class RemoveAction {
         }
         for (const section of this.sections) {
             if (section.node) {
-                const node = this.model.nodes.get(section.node._id);
+                const node = this.model.nodes.get(section.node.id);
                 if (node) {
                     section.node = node;
                 }
             }
             if (section.label) {
-                const label = this.model.fields.get(section.label._id);
+                const label = this.model.fields.get(section.label.id);
                 if (label) {
                     section.label = label;
                 }
             }
             const ports = [];
             for (const sectionPort of section.ports) {
-                const port = this.model.ports.get(sectionPort._id);
+                const port = this.model.ports.get(sectionPort.id);
                 if (port) {
                     ports.push(port);
                 }
@@ -1605,21 +2095,21 @@ class RemoveAction {
         }
         for (const port of this.ports) {
             if (port.rootElement) {
-                const rootElement = this.model.nodes.get(port.rootElement._id) ||
-                    this.model.sections.get(port.rootElement._id);
+                const rootElement = this.model.nodes.get(port.rootElement.id) ||
+                    this.model.sections.get(port.rootElement.id);
                 if (rootElement) {
                     port.rootElement = rootElement;
                 }
             }
             if (port.label) {
-                const label = this.model.fields.get(port.label._id);
+                const label = this.model.fields.get(port.label.id);
                 if (label) {
                     port.label = label;
                 }
             }
             const outgoingConnections = [];
             for (const portOutgoingConnection of port.outgoingConnections) {
-                const connection = this.model.connections.get(portOutgoingConnection._id);
+                const connection = this.model.connections.get(portOutgoingConnection.id);
                 if (connection) {
                     outgoingConnections.push(connection);
                 }
@@ -1627,7 +2117,7 @@ class RemoveAction {
             port.outgoingConnections = outgoingConnections;
             const incomingConnections = [];
             for (const portIncomingConnection of port.incomingConnections) {
-                const connection = this.model.connections.get(portIncomingConnection._id);
+                const connection = this.model.connections.get(portIncomingConnection.id);
                 if (connection) {
                     incomingConnections.push(connection);
                 }
@@ -1636,13 +2126,13 @@ class RemoveAction {
         }
         for (const connection of this.connections) {
             if (connection.start) {
-                const start = this.model.ports.get(connection.start._id);
+                const start = this.model.ports.get(connection.start.id);
                 if (start) {
                     connection.setStart(start);
                 }
             }
             if (connection.end) {
-                const end = this.model.ports.get(connection.end._id);
+                const end = this.model.ports.get(connection.end.id);
                 if (end) {
                     connection.setEnd(end);
                 }
@@ -1650,9 +2140,9 @@ class RemoveAction {
         }
         for (const field of this.fields) {
             if (field.rootElement) {
-                const rootElement = this.model.nodes.get(field.rootElement._id) ||
-                    this.model.sections.get(field.rootElement._id) ||
-                    this.model.ports.get(field.rootElement._id);
+                const rootElement = this.model.nodes.get(field.rootElement.id) ||
+                    this.model.sections.get(field.rootElement.id) ||
+                    this.model.ports.get(field.rootElement.id);
                 if (rootElement) {
                     field.rootElement = rootElement;
                 }
@@ -1756,6 +2246,7 @@ const clone = (obj) => {
 
 /**
  * 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
  */
@@ -1763,18 +2254,23 @@ class DiagramElement {
     get id() {
         return this._id;
     }
-    set id(value) {
-        this.select()?.attr('id', value);
-        this._id = value;
-    }
     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;
         this.model = model;
         this._id = id;
     }
     /**
      * Obtain the selection of this element.
+     * @private
      */
     select() {
         return this.model.canvas?.selectCanvasView()?.select(`g#${this.id}`);
@@ -1782,6 +2278,7 @@ class DiagramElement {
 }
 /**
  * Represents a collection of diagram entities of a type that exists as part of a diagram model.
+ * @public
  * @see DiagramEntity
  * @see DiagramModel
  */
@@ -1789,21 +2286,25 @@ class DiagramEntitySet {
     constructor() {
         /**
          * The list of entities contained in this set.
+         * @private
          */
         this.entities = [];
         /**
          * A mapping of entity ids to their corresponding entity in this set for quickly fetching entities based on their id.
+         * @private
          */
         this.entityMap = {};
     }
     /**
      * The number of entities of this set.
+     * @public
      */
     get length() {
         return this.entities.length;
     }
     /**
      * Gets all of the entities of this set.
+     * @public
      * @returns An array containing all of the entities of this set.
      */
     all() {
@@ -1812,6 +2313,7 @@ class DiagramEntitySet {
     /**
      * Adds an entity to this set if there are no entities with the same id. Has no effect if there already exists an entity with the same id as the given entity.
      * For creating entities with relationships with other entities, the new() method should be used instead. The add() method adds an entity but doesn't take care of setting that entity's relationships with other entities.
+     * @private
      * @param entity An entity to be added to this set.
      */
     add(entity) {
@@ -1822,6 +2324,7 @@ class DiagramEntitySet {
     }
     /**
      * Removes all the entities in this set.
+     * @public
      */
     clear() {
         // remove each entity individually in case classes that extend this implement their own specific cleanup
@@ -1831,6 +2334,7 @@ class DiagramEntitySet {
     }
     /**
      * Checks if this set contains an entity with the given id.
+     * @public
      * @param id An id.
      * @returns `true` if this set contains an entity with the given id, `false` otherwise.
      */
@@ -1839,6 +2343,7 @@ class DiagramEntitySet {
     }
     /**
      * Gets all of the entities of this set filtered following given criteria.
+     * @public
      * @returns An array containing the entities of this set that meet the given criteria.
      */
     filter() {
@@ -1846,6 +2351,7 @@ class DiagramEntitySet {
     }
     /**
      * Gets an entity of this set matching specific criteria.
+     * @public
      * @returns An entity of this set.
      */
     find() {
@@ -1853,6 +2359,7 @@ class DiagramEntitySet {
     }
     /**
      * Gets an entity from this set.
+     * @public
      * @param id An id.
      * @returns An entity with the given id, or `undefined` if there are no entities with the given id.
      */
@@ -1861,6 +2368,7 @@ class DiagramEntitySet {
     }
     /**
      * Attempts to find and remove an entity with the given id. Has no effect if there are no entities with the given id.
+     * @public
      * @param id An id.
      */
     remove(id) {
@@ -1870,6 +2378,10 @@ class DiagramEntitySet {
             removeIfExists(this.entities, entity);
         }
     }
+    /**
+     * Iterator to iterate over the entities of this set.
+     * @public
+     */
     *[Symbol.iterator]() {
         let counter = 0;
         while (counter < this.entities.length) {
@@ -1879,6 +2391,12 @@ class DiagramEntitySet {
     }
 }
 
+/**
+ * A property which is part of a property set and defines what values a value in a value set can take.
+ * @see PropertySet
+ * @see ValueSet
+ * @private
+ */
 class Property {
     constructor(name, type, defaultValue, basic, editable, rootAttribute) {
         this.name = name;
@@ -1891,6 +2409,11 @@ class Property {
         this.properties = undefined;
     }
 }
+/**
+ * The type that a property can hvae..
+ * @see Property
+ * @private
+ */
 var Type;
 (function (Type) {
     /**
@@ -1946,6 +2469,12 @@ var Type;
      */
     Type["Url"] = "url";
 })(Type || (Type = {}));
+/**
+ * A set of properties based on which a set of values of those properties can be created.
+ * @see Property
+ * @see ValueSet
+ * @private
+ */
 class PropertySet {
     constructor(properties = []) {
         this.propertyList = properties;
@@ -1961,6 +2490,11 @@ class PropertySet {
         return this.propertyList.length > 0;
     }
 }
+/**
+ * A set of values corresponding to a set of properties.
+ * @see PropertySet
+ * @private
+ */
 class ValueSet {
     constructor(propertySet, rootElement) {
         this.displayedProperties = [];
@@ -2152,6 +2686,11 @@ const equals = (a, b) => {
 };
 
 let idTicker$4 = 0;
+/**
+ * Default values of the parameters of a diagram connection.
+ * @see DiagramConnection
+ * @private
+ */
 const DIAGRAM_CONNECTION_TYPE_DEFAULTS = {
     name: '',
     width: 1,
@@ -2166,6 +2705,11 @@ const DIAGRAM_CONNECTION_TYPE_DEFAULTS = {
     selectedColor: '#000000',
     properties: []
 };
+/**
+ * A connection type, which holds properties that connections of this type share in common.
+ * @see ConnectionTypeConfig
+ * @public
+ */
 class DiagramConnectionType {
     constructor(options) {
         const values = {
@@ -2193,7 +2737,16 @@ class DiagramConnectionType {
         return this.endTypes.indexOf(type) >= 0;
     }
 }
+/**
+ * A connection which goes from one port to another.
+ * @see DiagramPort
+ * @public
+ */
 class DiagramConnection extends DiagramElement {
+    /**
+     * Name of this connection. Alias for this connection's middle label.
+     * @public
+     */
     get name() {
         return this.middleLabel;
     }
@@ -2211,11 +2764,35 @@ class DiagramConnection extends DiagramElement {
             } while (model.connections.get(uniqueId) !== undefined);
         }
         super(model, uniqueId);
+        /**
+         * Coordinates of the start point of this connection.
+         * @public
+         */
         this.startCoords = [0, 0];
+        /**
+         * Coordinates of the end point of this connection.
+         * @public
+         */
         this.endCoords = [0, 0];
+        /**
+         * Text at the start of this connection, or `''` if no text.
+         * @public
+         */
         this.startLabel = '';
+        /**
+         * Text at the middle of this connection, or `''` if no text.
+         * @public
+         */
         this.middleLabel = '';
+        /**
+         * Text at the end of this connection, or `''` if no text.
+         * @public
+         */
         this.endLabel = '';
+        /**
+         * Points that this connection passes through.
+         * @public
+         */
         this.points = [];
         this.type = type;
         this.valueSet = new ValueSet(type.propertySet, this);
@@ -2231,24 +2808,36 @@ class DiagramConnection extends DiagramElement {
         }
     }
     setStart(start) {
-        if (this.start !== undefined) {
-            removeIfExists(this.start.outgoingConnections, this);
+        if (this.start !== start) {
+            if (this.start !== undefined) {
+                removeIfExists(this.start.outgoingConnections, this);
+            }
+            this.start = start;
+            if (start !== undefined) {
+                start.outgoingConnections.push(this);
+                this.startDirection = start?.direction;
+                this.startCoords = start?.coords || [0, 0];
+            }
         }
-        this.start = start;
-        if (start !== undefined) {
-            start.outgoingConnections.push(this);
+        else {
             this.startDirection = start?.direction;
             this.startCoords = start?.coords || [0, 0];
         }
         this.updateInView();
     }
     setEnd(end) {
-        if (this.end !== undefined) {
-            removeIfExists(this.end.incomingConnections, this);
+        if (this.end !== end) {
+            if (this.end !== undefined) {
+                removeIfExists(this.end.incomingConnections, this);
+            }
+            this.end = end;
+            if (end !== undefined) {
+                end.incomingConnections.push(this);
+                this.endDirection = end?.direction;
+                this.endCoords = end?.coords || [0, 0];
+            }
         }
-        this.end = end;
-        if (end !== undefined) {
-            end.incomingConnections.push(this);
+        else {
             this.endDirection = end?.direction;
             this.endCoords = end?.coords || [0, 0];
         }
@@ -2317,6 +2906,24 @@ class DiagramConnectionSet extends DiagramEntitySet {
 }
 
 let idTicker$3 = 0;
+/**
+ * Default values of the look of a diagram section.
+ * @see DIAGRAM_SECTION_DEFAULTS
+ * @private
+ */
+const DIAGRAM_SECTION_LOOK_DEFAULTS = {
+    lookType: 'shaped-look',
+    shape: ClosedShape.Rectangle,
+    color: '#FFFFFF',
+    borderColor: '#000000',
+    selectedColor: '#FFFFFF',
+    selectedBorderColor: '#000000'
+};
+/**
+ * Default values of the parameters of a diagram section.
+ * @see DiagramSection
+ * @private
+ */
 const DIAGRAM_SECTION_DEFAULTS = {
     sectionsX: 1,
     sectionsY: 1,
@@ -2325,9 +2932,20 @@ const DIAGRAM_SECTION_DEFAULTS = {
     margin: 0,
     label: null,
     ports: [],
-    look: DIAGRAM_LOOK_DEFAULTS
+    look: DIAGRAM_SECTION_LOOK_DEFAULTS
 };
+/**
+ * A section of a node which can have connections and display a property of the node.
+ * @see DiagramConnection
+ * @see DiagramNode
+ * @see DiagramPort
+ * @public
+ */
 class DiagramSection extends DiagramElement {
+    /**
+     * Name of this section. Alias for this section's label's text.
+     * @public
+     */
     get name() {
         return this.label?.text || '';
     }
@@ -2348,6 +2966,10 @@ class DiagramSection extends DiagramElement {
             } while (model.sections.get(uniqueId) !== undefined);
         }
         super(model, uniqueId);
+        /**
+         * Ports of this section.
+         * @public
+         */
         this.ports = [];
         this.node = node;
         this.coords = coords;
@@ -2614,7 +3236,12 @@ class DiagramSectionSet extends DiagramEntitySet {
 }
 
 let idTicker$2 = 0;
-const DIAGRAM_LOOK_DEFAULTS = {
+/**
+ * Default values of the look of a diagram node.
+ * @see DIAGRAM_NODE_TYPE_DEFAULTS
+ * @private
+ */
+const DIAGRAM_NODE_LOOK_DEFAULTS = {
     lookType: 'shaped-look',
     shape: ClosedShape.Rectangle,
     color: '#FFFFFF',
@@ -2622,6 +3249,11 @@ const DIAGRAM_LOOK_DEFAULTS = {
     selectedColor: '#FFFFFF',
     selectedBorderColor: '#000000'
 };
+/**
+ * Default values of the parameters of a diagram node.
+ * @see DiagramNode
+ * @private
+ */
 const DIAGRAM_NODE_TYPE_DEFAULTS = {
     name: '',
     defaultWidth: 0,
@@ -2633,11 +3265,16 @@ const DIAGRAM_NODE_TYPE_DEFAULTS = {
     label: null,
     ports: [],
     sections: null,
-    look: DIAGRAM_LOOK_DEFAULTS,
+    look: DIAGRAM_NODE_LOOK_DEFAULTS,
     isUnique: false,
     priority: 0,
     properties: []
 };
+/**
+ * A node type, which holds properties that nodes of this type share in common.
+ * @see NodeTypeConfig
+ * @public
+ */
 class DiagramNodeType {
     constructor(options) {
         const values = {
@@ -2661,7 +3298,18 @@ class DiagramNodeType {
         this.propertySet = new PropertySet(options?.properties || []);
     }
 }
+/**
+ * A node, the most basic element of a diagram, which can have connections to other nodes through its ports or be divided into sections.
+ * @see DiagramConnection
+ * @see DiagramPort
+ * @see DiagramSection
+ * @public
+ */
 class DiagramNode extends DiagramElement {
+    /**
+     * Name of this node. Alias for this node's label's text.
+     * @public
+     */
     get name() {
         return this.label?.text || '';
     }
@@ -2682,7 +3330,15 @@ class DiagramNode extends DiagramElement {
             } while (model.nodes.get(uniqueId) !== undefined);
         }
         super(model, uniqueId);
+        /**
+         * Sections of this node.
+         * @public
+         */
         this.sections = [];
+        /**
+         * Ports of this node.
+         * @public
+         */
         this.ports = [];
         this.type = type;
         this.valueSet = new ValueSet(type.propertySet, this);
@@ -3012,11 +3668,23 @@ class DiagramNodeSet extends DiagramEntitySet {
 }
 
 let idTicker$1 = 0;
+/**
+ * Default values of the parameters of a diagram port.
+ * @see DiagramPort
+ * @private
+ */
 const DIAGRAM_PORT_DEFAULTS = {
     radius: 12,
     highlightedColor: 'cyan',
     selectedColor: 'violet'
 };
+/**
+ * A port which is part of a node or section and at which connections can start or end.
+ * @see DiagramConnection
+ * @see DiagramNode
+ * @see DiagramSection
+ * @public
+ */
 class DiagramPort extends DiagramElement {
     constructor(model, rootElement, coords, direction, id) {
         let uniqueId;
@@ -3029,7 +3697,15 @@ class DiagramPort extends DiagramElement {
             } while (model.ports.get(uniqueId) !== undefined);
         }
         super(model, uniqueId);
+        /**
+         * Connections that start at this port.
+         * @public
+         */
         this.outgoingConnections = [];
+        /**
+         * Connections that end at this port.
+         * @public
+         */
         this.incomingConnections = [];
         this.rootElement = rootElement;
         this.coords = coords;
@@ -3146,6 +3822,11 @@ class DiagramPortSet extends DiagramEntitySet {
 }
 
 let idTicker = 0;
+/**
+ * Default values of the parameters of a diagram field.
+ * @see DiagramField
+ * @private
+ */
 const DIAGRAM_FIELD_DEFAULTS = {
     editable: true,
     fontSize: 0,
@@ -3157,7 +3838,18 @@ const DIAGRAM_FIELD_DEFAULTS = {
     horizontalAlign: HorizontalAlign.Center,
     verticalAlign: VerticalAlign.Center
 };
+/**
+ * A field which displays text and is part of a diagram element.
+ * @see DiagramNode
+ * @see DiagramPort
+ * @see DiagramSection
+ * @public
+ */
 class DiagramField extends DiagramElement {
+    /**
+     * Text contents of this field.
+     * @public
+     */
     get text() {
         return this._text;
     }
@@ -3267,23 +3959,46 @@ class DiagramFieldSet extends DiagramEntitySet {
     }
 }
 
+/**
+ * Stores the data of a diagram.
+ * @public
+ */
 class DiagramModel {
-    // canvas attribute accesors
-    // added so that the valueSet can access canvas attributes and change them
-    get layoutFormat() {
-        return this.canvas?.layoutFormat;
-    }
-    set layoutFormat(value) {
-        if (this.canvas) {
-            this.canvas.layoutFormat = value;
-        }
-    }
     constructor(canvas, id, name, description, type, properties = []) {
+        /**
+         * Whether changes to this model are updated in the canvas in real time.
+         * @private
+         */
         this.renderToCanvas = true;
+        /**
+         * Nodes of this model.
+         * @see DiagramNode
+         * @public
+         */
         this.nodes = new DiagramNodeSet(this);
+        /**
+         * Sections of this model.
+         * @see DiagramSection
+         * @public
+         */
         this.sections = new DiagramSectionSet(this);
+        /**
+         * Ports of this model.
+         * @see DiagramPort
+         * @public
+         */
         this.ports = new DiagramPortSet(this);
+        /**
+         * Connections of this model.
+         * @see DiagramConnection
+         * @public
+         */
         this.connections = new DiagramConnectionSet(this);
+        /**
+         * Fields of this model.
+         * @see DiagramField
+         * @public
+         */
         this.fields = new DiagramFieldSet(this);
         this.canvas = canvas;
         this.id = id;
@@ -3294,15 +4009,25 @@ class DiagramModel {
         this.updatedAt = new Date();
         this.valueSet = new ValueSet(new PropertySet(properties), this);
     }
+    /**
+     * Enables rendering to canvas in real time and updates the view of this model in the canvas.
+     * @public
+     */
     enableRenderToCanvas() {
         this.renderToCanvas = true;
         this.canvas?.updateModelInView();
     }
+    /**
+     * Disables rendering to canvas in real time.
+     * Used to perform batches of changes to the model without the computational cost of rendering each change to the canvas individually.
+     * @public
+     */
     disableRenderToCanvas() {
         this.renderToCanvas = false;
     }
     /**
      * Deletes everything in this diagram.
+     * @public
      */
     clear() {
         this.id = undefined;
@@ -3325,20 +4050,24 @@ class DiagramModel {
 
 /**
  * Thickness of the invisible path around a connection used to make it easier to click on, in pixels.
+ * @private
  */
 const CONNECTION_PATH_BOX_THICKNESS = 12;
 /**
  * Thickness of the resizer line used to resize nodes and sections on drag, in pixels.
+ * @private
  */
 const RESIZER_THICKNESS = 6;
 /**
  * Text to display as the title of the property editor when editing this diagram's properties.
  * @see PropertyEditorComponent
+ * @private
  */
 const DIAGRAM_PROPERTIES_TEXT = 'Diagram properties';
 /**
  * Maximum number of user actions that can be recorded in the user action queue.
  * @see ActionQueue
+ * @private
  */
 const ACTION_QUEUE_SIZE = 25;
 class DiagramCanvas {
@@ -3364,6 +4093,7 @@ class DiagramCanvas {
         this.priorityThreshold = config.defaultPriorityThreshold;
         this.priorityThresholds = config.priorityThresholds || [];
         this.layoutFormat = config.layoutFormat;
+        this.userActions = config.userActions || {};
         this.validators = [];
         this.actionQueue = new ActionQueue(ACTION_QUEUE_SIZE);
         // load node types
@@ -3416,7 +4146,9 @@ class DiagramCanvas {
             d3.select(this.diagramRoot).node()?.focus();
         })
             .on(Events.KeyUp, (event) => {
-            if (!event.ctrlKey && event.key === Keys.Delete) {
+            if (!event.ctrlKey &&
+                event.key === Keys.Delete &&
+                this.userActions[DiagramActions.RemoveAction] !== false) {
                 // delete selection
                 if (this.userSelection.length > 0) {
                     const nodesToBeDeleted = [];
@@ -3663,37 +4395,43 @@ class DiagramCanvas {
             .call(d3
             .drag()
             .on(DragEvents.Start, (event, d) => {
-            d3.select('body').style('cursor', 'grabbing');
-            this.draggingFrom = [event.x, event.y];
-            this.currentAction = new MoveNodeAction(this, d.id, d.coords, [0, 0]);
+            if (this.userActions[DiagramActions.MoveNodeAction] !== false) {
+                d3.select('body').style('cursor', 'grabbing');
+                this.draggingFrom = [event.x, event.y];
+                this.currentAction = new MoveNodeAction(this, d.id, d.coords, [0, 0]);
+            }
         })
             .on(DragEvents.Drag, (event, d) => {
-            const newNodeCoords = [
-                event.x - d.width / 2,
-                event.y - d.height / 2
-            ];
-            d.move(newNodeCoords);
-        })
-            .on(DragEvents.End, (event, d) => {
-            // prevent drag behavior if mouse hasn't moved
-            if ((this.draggingFrom[0] !== event.x ||
-                this.draggingFrom[1] !== event.y) &&
-                this.currentAction instanceof MoveNodeAction) {
-                let newNodeCoords = [
+            if (this.userActions[DiagramActions.MoveNodeAction] !== false) {
+                const newNodeCoords = [
                     event.x - d.width / 2,
                     event.y - d.height / 2
                 ];
-                if (this.snapToGrid) {
-                    newNodeCoords = this.getClosestGridPoint(newNodeCoords);
-                }
                 d.move(newNodeCoords);
-                this.currentAction.to = newNodeCoords;
-                this.actionQueue.add(this.currentAction);
             }
-            else {
-                this.currentAction = undefined;
+        })
+            .on(DragEvents.End, (event, d) => {
+            if (this.userActions[DiagramActions.MoveNodeAction] !== false) {
+                // prevent drag behavior if mouse hasn't moved
+                if ((this.draggingFrom[0] !== event.x ||
+                    this.draggingFrom[1] !== event.y) &&
+                    this.currentAction instanceof MoveNodeAction) {
+                    let newNodeCoords = [
+                        event.x - d.width / 2,
+                        event.y - d.height / 2
+                    ];
+                    if (this.snapToGrid) {
+                        newNodeCoords = this.getClosestGridPoint(newNodeCoords);
+                    }
+                    d.move(newNodeCoords);
+                    this.currentAction.to = newNodeCoords;
+                    this.actionQueue.add(this.currentAction);
+                }
+                else {
+                    this.currentAction = undefined;
+                }
+                d3.select('body').style('cursor', 'auto');
             }
-            d3.select('body').style('cursor', 'auto');
         }));
         enterSelection.filter('.shaped-look').append('path');
         enterSelection
@@ -3752,31 +4490,36 @@ class DiagramCanvas {
             .attr('stroke', 'transparent')
             .attr('stroke-width', `${RESIZER_THICKNESS}px`)
             .on(Events.MouseOver, (event, d) => {
-            if (d.type.resizableX) {
+            if (this.userActions[DiagramActions.StretchNodeAction] !== false &&
+                d.type.resizableX) {
                 d3.select('body').style('cursor', 'ew-resize');
             }
         })
             .on(Events.MouseOut, (event, d) => {
-            if (d.type.resizableX) {
+            if (this.userActions[DiagramActions.StretchNodeAction] !== false &&
+                d.type.resizableX) {
                 d3.select('body').style('cursor', 'auto');
             }
         })
             .call(d3
             .drag()
             .on(DragEvents.Start, (event, d) => {
-            if (d.type.resizableX) {
+            if (this.userActions[DiagramActions.StretchNodeAction] !== false &&
+                d.type.resizableX) {
                 d3.select('body').style('cursor', 'ew-resize');
                 this.currentAction = new StretchNodeAction(this, d.id, Side.Left, d.width, d.width);
             }
         })
             .on(DragEvents.Drag, (event, d) => {
-            if (d.type.resizableX) {
+            if (this.userActions[DiagramActions.StretchNodeAction] !== false &&
+                d.type.resizableX) {
                 const pointerCoords = this.getPointerLocationRelativeToCanvas(event);
                 d.stretch(Side.Left, d.coords[0] - pointerCoords[0]);
             }
         })
             .on(DragEvents.End, (event, d) => {
-            if (d.type.resizableX) {
+            if (this.userActions[DiagramActions.StretchNodeAction] !== false &&
+                d.type.resizableX) {
                 let pointerCoords = this.getPointerLocationRelativeToCanvas(event);
                 if (this.snapToGrid) {
                     pointerCoords = this.getClosestGridPoint(pointerCoords);
@@ -3795,31 +4538,36 @@ class DiagramCanvas {
             .attr('stroke', 'transparent')
             .attr('stroke-width', `${RESIZER_THICKNESS}px`)
             .on(Events.MouseOver, (event, d) => {
-            if (d.type.resizableY) {
+            if (this.userActions[DiagramActions.StretchNodeAction] !== false &&
+                d.type.resizableY) {
                 d3.select('body').style('cursor', 'ns-resize');
             }
         })
             .on(Events.MouseOut, (event, d) => {
-            if (d.type.resizableY) {
+            if (this.userActions[DiagramActions.StretchNodeAction] !== false &&
+                d.type.resizableY) {
                 d3.select('body').style('cursor', 'auto');
             }
         })
             .call(d3
             .drag()
             .on(DragEvents.Start, (event, d) => {
-            if (d.type.resizableY) {
+            if (this.userActions[DiagramActions.StretchNodeAction] !== false &&
+                d.type.resizableY) {
                 d3.select('body').style('cursor', 'ns-resize');
                 this.currentAction = new StretchNodeAction(this, d.id, Side.Top, d.height, d.height);
             }
         })
             .on(DragEvents.Drag, (event, d) => {
-            if (d.type.resizableY) {
+            if (this.userActions[DiagramActions.StretchNodeAction] !== false &&
+                d.type.resizableY) {
                 const pointerCoords = this.getPointerLocationRelativeToCanvas(event);
                 d.stretch(Side.Top, d.coords[1] - pointerCoords[1]);
             }
         })
             .on(DragEvents.End, (event, d) => {
-            if (d.type.resizableY) {
+            if (this.userActions[DiagramActions.StretchNodeAction] !== false &&
+                d.type.resizableY) {
                 let pointerCoords = this.getPointerLocationRelativeToCanvas(event);
                 if (this.snapToGrid) {
                     pointerCoords = this.getClosestGridPoint(pointerCoords);
@@ -3838,31 +4586,36 @@ class DiagramCanvas {
             .attr('stroke', 'transparent')
             .attr('stroke-width', `${RESIZER_THICKNESS}px`)
             .on(Events.MouseOver, (event, d) => {
-            if (d.type.resizableX) {
+            if (this.userActions[DiagramActions.StretchNodeAction] !== false &&
+                d.type.resizableX) {
                 d3.select('body').style('cursor', 'ew-resize');
             }
         })
             .on(Events.MouseOut, (event, d) => {
-            if (d.type.resizableX) {
+            if (this.userActions[DiagramActions.StretchNodeAction] !== false &&
+                d.type.resizableX) {
                 d3.select('body').style('cursor', 'auto');
             }
         })
             .call(d3
             .drag()
             .on(DragEvents.Start, (event, d) => {
-            if (d.type.resizableX) {
+            if (this.userActions[DiagramActions.StretchNodeAction] !== false &&
+                d.type.resizableX) {
                 d3.select('body').style('cursor', 'ew-resize');
                 this.currentAction = new StretchNodeAction(this, d.id, Side.Right, d.width, d.width);
             }
         })
             .on(DragEvents.Drag, (event, d) => {
-            if (d.type.resizableX) {
+            if (this.userActions[DiagramActions.StretchNodeAction] !== false &&
+                d.type.resizableX) {
                 const pointerCoords = this.getPointerLocationRelativeToCanvas(event);
                 d.stretch(Side.Right, pointerCoords[0] - (d.coords[0] + d.width));
             }
         })
             .on(DragEvents.End, (event, d) => {
-            if (d.type.resizableX) {
+            if (this.userActions[DiagramActions.StretchNodeAction] !== false &&
+                d.type.resizableX) {
                 let pointerCoords = this.getPointerLocationRelativeToCanvas(event);
                 if (this.snapToGrid) {
                     pointerCoords = this.getClosestGridPoint(pointerCoords);
@@ -3881,31 +4634,36 @@ class DiagramCanvas {
             .attr('stroke', 'transparent')
             .attr('stroke-width', `${RESIZER_THICKNESS}px`)
             .on(Events.MouseOver, (event, d) => {
-            if (d.type.resizableY) {
+            if (this.userActions[DiagramActions.StretchNodeAction] !== false &&
+                d.type.resizableY) {
                 d3.select('body').style('cursor', 'ns-resize');
             }
         })
             .on(Events.MouseOut, (event, d) => {
-            if (d.type.resizableY) {
+            if (this.userActions[DiagramActions.StretchNodeAction] !== false &&
+                d.type.resizableY) {
                 d3.select('body').style('cursor', 'auto');
             }
         })
             .call(d3
             .drag()
             .on(DragEvents.Start, (event, d) => {
-            if (d.type.resizableY) {
+            if (this.userActions[DiagramActions.StretchNodeAction] !== false &&
+                d.type.resizableY) {
                 d3.select('body').style('cursor', 'ns-resize');
                 this.currentAction = new StretchNodeAction(this, d.id, Side.Bottom, d.height, d.height);
             }
         })
             .on(DragEvents.Drag, (event, d) => {
-            if (d.type.resizableY) {
+            if (this.userActions[DiagramActions.StretchNodeAction] !== false &&
+                d.type.resizableY) {
                 const pointerCoords = this.getPointerLocationRelativeToCanvas(event);
                 d.stretch(Side.Bottom, pointerCoords[1] - (d.coords[1] + d.height));
             }
         })
             .on(DragEvents.End, (event, d) => {
-            if (d.type.resizableY) {
+            if (this.userActions[DiagramActions.StretchNodeAction] !== false &&
+                d.type.resizableY) {
                 let pointerCoords = this.getPointerLocationRelativeToCanvas(event);
                 if (this.snapToGrid) {
                     pointerCoords = this.getClosestGridPoint(pointerCoords);
@@ -4113,40 +4871,46 @@ class DiagramCanvas {
             .call(d3
             .drag()
             .on(DragEvents.Start, (event, d) => {
-            const node = d.node;
-            d3.select('body').style('cursor', 'grabbing');
-            this.draggingFrom = [event.x, event.y];
-            this.currentAction = new MoveNodeAction(this, node.id, node.coords, [0, 0]);
+            if (this.userActions[DiagramActions.MoveNodeAction] !== false) {
+                const node = d.node;
+                d3.select('body').style('cursor', 'grabbing');
+                this.draggingFrom = [event.x, event.y];
+                this.currentAction = new MoveNodeAction(this, node.id, node.coords, [0, 0]);
+            }
         })
             .on(DragEvents.Drag, (event, d) => {
-            const node = d.node;
-            const newNodeCoords = [
-                event.x - node.width / 2,
-                event.y - node.height / 2
-            ];
-            node.move(newNodeCoords);
-        })
-            .on(DragEvents.End, (event, d) => {
-            const node = d.node;
-            // prevent drag behavior if mouse hasn't moved
-            if ((this.draggingFrom[0] !== event.x ||
-                this.draggingFrom[1] !== event.y) &&
-                this.currentAction instanceof MoveNodeAction) {
-                let newNodeCoords = [
+            if (this.userActions[DiagramActions.MoveNodeAction] !== false) {
+                const node = d.node;
+                const newNodeCoords = [
                     event.x - node.width / 2,
                     event.y - node.height / 2
                 ];
-                if (this.snapToGrid) {
-                    newNodeCoords = this.getClosestGridPoint(newNodeCoords);
-                }
-                d.node?.move(newNodeCoords);
-                this.currentAction.to = newNodeCoords;
-                this.actionQueue.add(this.currentAction);
+                node.move(newNodeCoords);
             }
-            else {
-                this.currentAction = undefined;
+        })
+            .on(DragEvents.End, (event, d) => {
+            if (this.userActions[DiagramActions.MoveNodeAction] !== false) {
+                const node = d.node;
+                // prevent drag behavior if mouse hasn't moved
+                if ((this.draggingFrom[0] !== event.x ||
+                    this.draggingFrom[1] !== event.y) &&
+                    this.currentAction instanceof MoveNodeAction) {
+                    let newNodeCoords = [
+                        event.x - node.width / 2,
+                        event.y - node.height / 2
+                    ];
+                    if (this.snapToGrid) {
+                        newNodeCoords = this.getClosestGridPoint(newNodeCoords);
+                    }
+                    d.node?.move(newNodeCoords);
+                    this.currentAction.to = newNodeCoords;
+                    this.actionQueue.add(this.currentAction);
+                }
+                else {
+                    this.currentAction = undefined;
+                }
+                d3.select('body').style('cursor', 'auto');
             }
-            d3.select('body').style('cursor', 'auto');
         }));
         enterSelection.filter('.shaped-look').append('path');
         enterSelection
@@ -4205,31 +4969,36 @@ class DiagramCanvas {
             .attr('stroke', 'transparent')
             .attr('stroke-width', `${RESIZER_THICKNESS}px`)
             .on(Events.MouseOver, (event, d) => {
-            if (d.node?.type?.resizableX) {
+            if (this.userActions[DiagramActions.StretchSectionAction] !== false &&
+                d.node?.type?.resizableX) {
                 d3.select('body').style('cursor', 'ew-resize');
             }
         })
             .on(Events.MouseOut, (event, d) => {
-            if (d.node?.type?.resizableX) {
+            if (this.userActions[DiagramActions.StretchSectionAction] !== false &&
+                d.node?.type?.resizableX) {
                 d3.select('body').style('cursor', 'auto');
             }
         })
             .call(d3
             .drag()
             .on(DragEvents.Start, (event, d) => {
-            if (d.node?.type?.resizableX) {
+            if (this.userActions[DiagramActions.StretchSectionAction] !== false &&
+                d.node?.type?.resizableX) {
                 d3.select('body').style('cursor', 'ew-resize');
                 this.currentAction = new StretchSectionAction(this, d.id, Side.Left, d.width, d.width);
             }
         })
             .on(DragEvents.Drag, (event, d) => {
-            if (d.node?.type?.resizableX) {
+            if (this.userActions[DiagramActions.StretchSectionAction] !== false &&
+                d.node?.type?.resizableX) {
                 const pointerCoords = this.getPointerLocationRelativeToCanvas(event);
                 d.node.stretchSections(Side.Left, d.coords[0] - pointerCoords[0], d.coords);
             }
         })
             .on(DragEvents.End, (event, d) => {
-            if (d.node?.type?.resizableX) {
+            if (this.userActions[DiagramActions.StretchSectionAction] !== false &&
+                d.node?.type?.resizableX) {
                 let pointerCoords = this.getPointerLocationRelativeToCanvas(event);
                 if (this.snapToGrid) {
                     pointerCoords = this.getClosestGridPoint(pointerCoords);
@@ -4248,31 +5017,36 @@ class DiagramCanvas {
             .attr('stroke', 'transparent')
             .attr('stroke-width', `${RESIZER_THICKNESS}px`)
             .on(Events.MouseOver, (event, d) => {
-            if (d.node?.type?.resizableY) {
+            if (this.userActions[DiagramActions.StretchSectionAction] !== false &&
+                d.node?.type?.resizableY) {
                 d3.select('body').style('cursor', 'ns-resize');
             }
         })
             .on(Events.MouseOut, (event, d) => {
-            if (d.node?.type?.resizableY) {
+            if (this.userActions[DiagramActions.StretchSectionAction] !== false &&
+                d.node?.type?.resizableY) {
                 d3.select('body').style('cursor', 'auto');
             }
         })
             .call(d3
             .drag()
             .on(DragEvents.Start, (event, d) => {
-            if (d.node?.type?.resizableY) {
+            if (this.userActions[DiagramActions.StretchSectionAction] !== false &&
+                d.node?.type?.resizableY) {
                 d3.select('body').style('cursor', 'ns-resize');
                 this.currentAction = new StretchSectionAction(this, d.id, Side.Top, d.height, d.height);
             }
         })
             .on(DragEvents.Drag, (event, d) => {
-            if (d.node?.type?.resizableY) {
+            if (this.userActions[DiagramActions.StretchSectionAction] !== false &&
+                d.node?.type?.resizableY) {
                 const pointerCoords = this.getPointerLocationRelativeToCanvas(event);
                 d.node.stretchSections(Side.Top, d.coords[1] - pointerCoords[1], d.coords);
             }
         })
             .on(DragEvents.End, (event, d) => {
-            if (d.node?.type?.resizableY) {
+            if (this.userActions[DiagramActions.StretchSectionAction] !== false &&
+                d.node?.type?.resizableY) {
                 let pointerCoords = this.getPointerLocationRelativeToCanvas(event);
                 if (this.snapToGrid) {
                     pointerCoords = this.getClosestGridPoint(pointerCoords);
@@ -4291,31 +5065,36 @@ class DiagramCanvas {
             .attr('stroke', 'transparent')
             .attr('stroke-width', `${RESIZER_THICKNESS}px`)
             .on(Events.MouseOver, (event, d) => {
-            if (d.node?.type?.resizableX) {
+            if (this.userActions[DiagramActions.StretchSectionAction] !== false &&
+                d.node?.type?.resizableX) {
                 d3.select('body').style('cursor', 'ew-resize');
             }
         })
             .on(Events.MouseOut, (event, d) => {
-            if (d.node?.type?.resizableX) {
+            if (this.userActions[DiagramActions.StretchSectionAction] !== false &&
+                d.node?.type?.resizableX) {
                 d3.select('body').style('cursor', 'auto');
             }
         })
             .call(d3
             .drag()
             .on(DragEvents.Start, (event, d) => {
-            if (d.node?.type?.resizableX) {
+            if (this.userActions[DiagramActions.StretchSectionAction] !== false &&
+                d.node?.type?.resizableX) {
                 d3.select('body').style('cursor', 'ew-resize');
                 this.currentAction = new StretchSectionAction(this, d.id, Side.Right, d.width, d.width);
             }
         })
             .on(DragEvents.Drag, (event, d) => {
-            if (d.node?.type?.resizableX) {
+            if (this.userActions[DiagramActions.StretchSectionAction] !== false &&
+                d.node?.type?.resizableX) {
                 const pointerCoords = this.getPointerLocationRelativeToCanvas(event);
                 d.node.stretchSections(Side.Right, pointerCoords[0] - (d.coords[0] + d.width), d.coords);
             }
         })
             .on(DragEvents.End, (event, d) => {
-            if (d.node?.type?.resizableX) {
+            if (this.userActions[DiagramActions.StretchSectionAction] !== false &&
+                d.node?.type?.resizableX) {
                 let pointerCoords = this.getPointerLocationRelativeToCanvas(event);
                 if (this.snapToGrid) {
                     pointerCoords = this.getClosestGridPoint(pointerCoords);
@@ -4334,31 +5113,36 @@ class DiagramCanvas {
             .attr('stroke', 'transparent')
             .attr('stroke-width', `${RESIZER_THICKNESS}px`)
             .on(Events.MouseOver, (event, d) => {
-            if (d.node?.type?.resizableY) {
+            if (this.userActions[DiagramActions.StretchSectionAction] !== false &&
+                d.node?.type?.resizableY) {
                 d3.select('body').style('cursor', 'ns-resize');
             }
         })
             .on(Events.MouseOut, (event, d) => {
-            if (d.node?.type?.resizableY) {
+            if (this.userActions[DiagramActions.StretchSectionAction] !== false &&
+                d.node?.type?.resizableY) {
                 d3.select('body').style('cursor', 'auto');
             }
         })
             .call(d3
             .drag()
             .on(DragEvents.Start, (event, d) => {
-            if (d.node?.type?.resizableY) {
+            if (this.userActions[DiagramActions.StretchSectionAction] !== false &&
+                d.node?.type?.resizableY) {
                 d3.select('body').style('cursor', 'ns-resize');
                 this.currentAction = new StretchSectionAction(this, d.id, Side.Bottom, d.height, d.height);
             }
         })
             .on(DragEvents.Drag, (event, d) => {
-            if (d.node?.type?.resizableY) {
+            if (this.userActions[DiagramActions.StretchSectionAction] !== false &&
+                d.node?.type?.resizableY) {
                 const pointerCoords = this.getPointerLocationRelativeToCanvas(event);
                 d.node.stretchSections(Side.Bottom, pointerCoords[1] - (d.coords[1] + d.height), d.coords);
             }
         })
             .on(DragEvents.End, (event, d) => {
-            if (d.node?.type?.resizableY) {
+            if (this.userActions[DiagramActions.StretchSectionAction] !== false &&
+                d.node?.type?.resizableY) {
                 let pointerCoords = this.getPointerLocationRelativeToCanvas(event);
                 if (this.snapToGrid) {
                     pointerCoords = this.getClosestGridPoint(pointerCoords);
@@ -4595,50 +5379,56 @@ class DiagramCanvas {
             .call(d3
             .drag()
             .on(DragEvents.Start, (event, d) => {
-            d3.select('body').style('cursor', 'grabbing');
-            this.startConnection(d);
+            if (this.userActions[DiagramActions.AddConnectionAction] !== false) {
+                d3.select('body').style('cursor', 'grabbing');
+                this.startConnection(d);
+            }
         })
             .on(DragEvents.Drag, (event) => {
-            if (this.unfinishedConnection !== undefined) {
-                this.unfinishedConnection.endCoords = [event.x, event.y];
-                this.updateConnectionsInView();
+            if (this.userActions[DiagramActions.AddConnectionAction] !== false) {
+                if (this.unfinishedConnection !== undefined) {
+                    this.unfinishedConnection.endCoords = [event.x, event.y];
+                    this.updateConnectionsInView();
+                }
             }
         })
             .on(DragEvents.End, (event) => {
-            d3.select('body').style('cursor', 'auto');
-            if (this.mainUserHighlight instanceof DiagramPort) {
-                this.finishConnection(this.mainUserHighlight);
-            }
-            else if (this.mainUserHighlight instanceof DiagramNode ||
-                this.mainUserHighlight instanceof DiagramSection ||
-                this.mainUserHighlight instanceof DiagramField) {
-                let targetRootElement;
-                if (this.mainUserHighlight instanceof DiagramNode ||
-                    this.mainUserHighlight instanceof DiagramSection) {
-                    targetRootElement = this.mainUserHighlight;
-                }
-                else if (this.mainUserHighlight.rootElement instanceof DiagramNode ||
-                    this.mainUserHighlight.rootElement instanceof DiagramSection) {
-                    targetRootElement = this.mainUserHighlight.rootElement;
-                }
-                else {
-                    this.dropConnection();
-                    return;
+            if (this.userActions[DiagramActions.AddConnectionAction] !== false) {
+                d3.select('body').style('cursor', 'auto');
+                if (this.mainUserHighlight instanceof DiagramPort) {
+                    this.finishConnection(this.mainUserHighlight);
                 }
-                const closestPort = targetRootElement.getClosestPortToPoint([
-                    event.x,
-                    event.y
-                ]);
-                if (closestPort !== undefined) {
-                    this.finishConnection(closestPort);
+                else if (this.mainUserHighlight instanceof DiagramNode ||
+                    this.mainUserHighlight instanceof DiagramSection ||
+                    this.mainUserHighlight instanceof DiagramField) {
+                    let targetRootElement;
+                    if (this.mainUserHighlight instanceof DiagramNode ||
+                        this.mainUserHighlight instanceof DiagramSection) {
+                        targetRootElement = this.mainUserHighlight;
+                    }
+                    else if (this.mainUserHighlight.rootElement instanceof DiagramNode ||
+                        this.mainUserHighlight.rootElement instanceof DiagramSection) {
+                        targetRootElement = this.mainUserHighlight.rootElement;
+                    }
+                    else {
+                        this.dropConnection();
+                        return;
+                    }
+                    const closestPort = targetRootElement.getClosestPortToPoint([
+                        event.x,
+                        event.y
+                    ]);
+                    if (closestPort !== undefined) {
+                        this.finishConnection(closestPort);
+                    }
+                    else {
+                        this.dropConnection();
+                    }
                 }
                 else {
                     this.dropConnection();
                 }
             }
-            else {
-                this.dropConnection();
-            }
         }));
         enterSelection.append('circle');
         mergeSelection.attr('transform', (d) => `translate(${d.coords[0]},${d.coords[1]})`);
@@ -4783,7 +5573,8 @@ class DiagramCanvas {
             }
         })
             .on(Events.DoubleClick, (event, d) => {
-            if (d.editable) {
+            if (this.userActions[DiagramActions.EditFieldAction] !== false &&
+                d.editable) {
                 this.currentAction = new EditFieldAction(this, d.id, d.text, '');
                 this.createInputField(d.text, d.coords, d.width, d.height, d.fontSize, d.fontFamily, (text) => {
                     d.text = text;
@@ -4801,54 +5592,60 @@ class DiagramCanvas {
             .call(d3
             .drag()
             .on(DragEvents.Start, (event, d) => {
-            if (d.rootElement instanceof DiagramNode ||
-                d.rootElement instanceof DiagramSection) {
-                const node = d.rootElement instanceof DiagramNode
-                    ? d.rootElement
-                    : d.rootElement.node;
-                d3.select('body').style('cursor', 'grabbing');
-                this.draggingFrom = [event.x, event.y];
-                this.currentAction = new MoveNodeAction(this, node.id, node.coords, [0, 0]);
+            if (this.userActions[DiagramActions.MoveNodeAction] !== false) {
+                if (d.rootElement instanceof DiagramNode ||
+                    d.rootElement instanceof DiagramSection) {
+                    const node = d.rootElement instanceof DiagramNode
+                        ? d.rootElement
+                        : d.rootElement.node;
+                    d3.select('body').style('cursor', 'grabbing');
+                    this.draggingFrom = [event.x, event.y];
+                    this.currentAction = new MoveNodeAction(this, node.id, node.coords, [0, 0]);
+                }
             }
         })
             .on(DragEvents.Drag, (event, d) => {
-            if (d.rootElement instanceof DiagramNode ||
-                d.rootElement instanceof DiagramSection) {
-                const node = d.rootElement instanceof DiagramNode
-                    ? d.rootElement
-                    : d.rootElement.node;
-                const newNodeCoords = [
-                    event.x - node.width / 2,
-                    event.y - node.height / 2
-                ];
-                node.move(newNodeCoords);
-            }
-        })
-            .on(DragEvents.End, (event, d) => {
-            if (d.rootElement instanceof DiagramNode ||
-                d.rootElement instanceof DiagramSection) {
-                const node = d.rootElement instanceof DiagramNode
-                    ? d.rootElement
-                    : d.rootElement.node;
-                // prevent drag behavior if mouse hasn't moved
-                if ((this.draggingFrom[0] !== event.x ||
-                    this.draggingFrom[1] !== event.y) &&
-                    this.currentAction instanceof MoveNodeAction) {
-                    let newNodeCoords = [
+            if (this.userActions[DiagramActions.MoveNodeAction] !== false) {
+                if (d.rootElement instanceof DiagramNode ||
+                    d.rootElement instanceof DiagramSection) {
+                    const node = d.rootElement instanceof DiagramNode
+                        ? d.rootElement
+                        : d.rootElement.node;
+                    const newNodeCoords = [
                         event.x - node.width / 2,
                         event.y - node.height / 2
                     ];
-                    if (this.snapToGrid) {
-                        newNodeCoords = this.getClosestGridPoint(newNodeCoords);
-                    }
                     node.move(newNodeCoords);
-                    this.currentAction.to = newNodeCoords;
-                    this.actionQueue.add(this.currentAction);
                 }
-                else {
-                    this.currentAction = undefined;
+            }
+        })
+            .on(DragEvents.End, (event, d) => {
+            if (this.userActions[DiagramActions.MoveNodeAction] !== false) {
+                if (d.rootElement instanceof DiagramNode ||
+                    d.rootElement instanceof DiagramSection) {
+                    const node = d.rootElement instanceof DiagramNode
+                        ? d.rootElement
+                        : d.rootElement.node;
+                    // prevent drag behavior if mouse hasn't moved
+                    if ((this.draggingFrom[0] !== event.x ||
+                        this.draggingFrom[1] !== event.y) &&
+                        this.currentAction instanceof MoveNodeAction) {
+                        let newNodeCoords = [
+                            event.x - node.width / 2,
+                            event.y - node.height / 2
+                        ];
+                        if (this.snapToGrid) {
+                            newNodeCoords = this.getClosestGridPoint(newNodeCoords);
+                        }
+                        node.move(newNodeCoords);
+                        this.currentAction.to = newNodeCoords;
+                        this.actionQueue.add(this.currentAction);
+                    }
+                    else {
+                        this.currentAction = undefined;
+                    }
+                    d3.select('body').style('cursor', 'auto');
                 }
-                d3.select('body').style('cursor', 'auto');
             }
         }))
             .append('xhtml:div')
@@ -5376,6 +6173,11 @@ class DiagramCanvas {
         this.inputFieldContainer = undefined;
     }
 }
+/**
+ * Get the SVG path of a diagram connection.
+ * @see linePath
+ * @private
+ */
 const getConnectionPath = (connection) => {
     return linePath(connection.type.shape, [connection.startCoords, connection.endCoords], connection.startDirection, connection.endDirection, Math.max(
     // reasonable value for the minimumDistanceBeforeTurn relative to the line width
@@ -5384,24 +6186,45 @@ const getConnectionPath = (connection) => {
 
 /**
  * A provider for the {@link Canvas} associated with a {@link DiagramComponent} context.
+ * @public
  */
 class CanvasProviderService {
+    /**
+     * Initialize the diagram canvas object of this context.
+     * @private
+     * @param parentComponent A diagram editor.
+     * @param config A diagram configuration.
+     */
     initCanvas(parentComponent, config) {
         this._canvas = new DiagramCanvas(parentComponent, config);
     }
+    /**
+     * Attach the canvas of this context to an HTML Element to render it there.
+     * @private
+     * @param appendTo An HTML Element.
+     */
     initCanvasView(appendTo) {
         this._canvas.initView(appendTo);
     }
+    /**
+     * Get the diagram canvas of this context.
+     * @public
+     * @returns A diagram canvas.
+     */
     getCanvas() {
         return this._canvas;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: CanvasProviderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: CanvasProviderService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CanvasProviderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CanvasProviderService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: CanvasProviderService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CanvasProviderService, decorators: [{
             type: Injectable
         }] });
 
+/**
+ * Buttons used to trigger diagram functionalities by the user.
+ * @private
+ */
 class DiagramButtonsComponent {
     get canvas() {
         return this.canvasProvider.getCanvas();
@@ -5482,12 +6305,12 @@ class DiagramButtonsComponent {
     redo() {
         this.canvas.actionQueue.redo();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: DiagramButtonsComponent, deps: [{ token: CanvasProviderService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.6", type: DiagramButtonsComponent, isStandalone: true, selector: "daga-diagram-buttons", inputs: { 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\">\n  <button *ngIf=\"enableZoom\" class=\"zoom-in\" (click)=\"zoomIn()\">\n    <span class=\"tooltip\">Zoom in</span>\n  </button>\n  <button *ngIf=\"enableZoom\" class=\"zoom-out\" (click)=\"zoomOut()\">\n    <span class=\"tooltip\">Zoom out</span>\n  </button>\n  <div #collapsableButtons class=\"collapsable-buttons collapsed\">\n    <button *ngIf=\"enableZoom\" class=\"center\" (click)=\"center()\">\n      <span class=\"tooltip\">Fit diagram to screen</span>\n    </button>\n    <button *ngIf=\"enableUndoRedo\" class=\"undo\" (click)=\"undo()\">\n      <span class=\"tooltip\">Undo</span>\n    </button>\n    <button *ngIf=\"enableUndoRedo\" class=\"redo\" (click)=\"redo()\">\n      <span class=\"tooltip\">Redo</span>\n    </button>\n    <button\n      *ngIf=\"enableLayout && canvas.layoutFormat\"\n      class=\"layout\"\n      (click)=\"layout()\"\n    >\n      <span class=\"tooltip\">Apply layout</span>\n    </button>\n    <button\n      *ngIf=\"enableFilter && canvas.priorityThresholds.length >= 2\"\n      class=\"filter\"\n      [class]=\"filterOn ? 'on' : 'off'\"\n      (click)=\"filter()\"\n    >\n      <span class=\"tooltip\">Apply filter</span>\n    </button>\n  </div>\n  <button class=\"more-options\" (click)=\"toggleCollapse()\">\n    <span *ngIf=\"!collapsed\" class=\"tooltip\">Less options</span>\n    <span *ngIf=\"collapsed\" class=\"tooltip\">More options</span>\n  </button>\n</div>\n", styles: [":host{position:absolute;right:1rem;bottom:1rem}.diagram-buttons button{position:relative;display:block;height:3rem;width:3rem;padding:0;border:0;margin-bottom:1rem;background-color:transparent}.diagram-buttons button .tooltip{visibility:hidden;z-index:1;position:absolute;top:.5rem;right:3.5rem;height:2rem;padding:.6rem;border-radius:.25rem;font-size:.8rem;font-weight:500;box-sizing:border-box;white-space:nowrap;color:#fff;background-color:#0009}.diagram-buttons button:hover .tooltip{visibility:visible}.diagram-buttons button.filter.on{background-image:url(/assets/daga/icon/buttons/filter-on.svg)}.diagram-buttons button.filter.on:hover{background-image:url(/assets/daga/icon/buttons/filter-on-hover.svg)}.diagram-buttons button.filter.off{background-image:url(/assets/daga/icon/buttons/filter-off.svg)}.diagram-buttons button.filter.off:hover{background-image:url(/assets/daga/icon/buttons/filter-off-hover.svg)}.diagram-buttons button.layout{background-image:url(/assets/daga/icon/buttons/layout.svg)}.diagram-buttons button.layout:hover{background-image:url(/assets/daga/icon/buttons/layout-hover.svg)}.diagram-buttons button.zoom-in{background-image:url(/assets/daga/icon/buttons/zoom-in.svg)}.diagram-buttons button.zoom-in:hover{background-image:url(/assets/daga/icon/buttons/zoom-in-hover.svg)}.diagram-buttons button.zoom-out{background-image:url(/assets/daga/icon/buttons/zoom-out.svg)}.diagram-buttons button.zoom-out:hover{background-image:url(/assets/daga/icon/buttons/zoom-out-hover.svg)}.diagram-buttons button.center{background-image:url(/assets/daga/icon/buttons/center.svg)}.diagram-buttons button.center:hover{background-image:url(/assets/daga/icon/buttons/center-hover.svg)}.diagram-buttons button.undo{background-image:url(/assets/daga/icon/buttons/undo.svg)}.diagram-buttons button.undo:hover{background-image:url(/assets/daga/icon/buttons/undo-hover.svg)}.diagram-buttons button.redo{background-image:url(/assets/daga/icon/buttons/redo.svg)}.diagram-buttons button.redo:hover{background-image:url(/assets/daga/icon/buttons/redo-hover.svg)}.diagram-buttons button.more-options{background-image:url(/assets/daga/icon/buttons/ellipsis.svg)}.diagram-buttons button.more-options:hover{background-image:url(/assets/daga/icon/buttons/ellipsis-hover.svg)}.diagram-buttons .collapsable-buttons.collapsing{animation-name:collapse-animation;animation-duration:1s;animation-fill-mode:forwards}.diagram-buttons .collapsable-buttons.expanding{animation-name:expand-animation;animation-duration:1s;animation-fill-mode:forwards}.diagram-buttons .collapsable-buttons.collapsed{transform:scaleY(0);height:0}@keyframes collapse-animation{0%{transform:scale(1);transform-origin:0% 0%;height:12rem}to{transform:scaleY(0);transform-origin:0% 0%;height:0}}@keyframes expand-animation{0%{transform:scaleY(0);transform-origin:0% 0%;height:0}to{transform:scale(1);transform-origin:0% 0%;height:12rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: DiagramButtonsComponent, deps: [{ token: CanvasProviderService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: DiagramButtonsComponent, isStandalone: true, selector: "daga-diagram-buttons", inputs: { 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\">\n  <button *ngIf=\"enableZoom\" class=\"zoom-in\" (click)=\"zoomIn()\">\n    <span class=\"tooltip\">Zoom in</span>\n  </button>\n  <button *ngIf=\"enableZoom\" class=\"zoom-out\" (click)=\"zoomOut()\">\n    <span class=\"tooltip\">Zoom out</span>\n  </button>\n  <div #collapsableButtons class=\"collapsable-buttons collapsed\">\n    <button *ngIf=\"enableZoom\" class=\"center\" (click)=\"center()\">\n      <span class=\"tooltip\">Fit diagram to screen</span>\n    </button>\n    <button *ngIf=\"enableUndoRedo\" class=\"undo\" (click)=\"undo()\">\n      <span class=\"tooltip\">Undo</span>\n    </button>\n    <button *ngIf=\"enableUndoRedo\" class=\"redo\" (click)=\"redo()\">\n      <span class=\"tooltip\">Redo</span>\n    </button>\n    <button\n      *ngIf=\"enableLayout && canvas.layoutFormat\"\n      class=\"layout\"\n      (click)=\"layout()\"\n    >\n      <span class=\"tooltip\">Apply layout</span>\n    </button>\n    <button\n      *ngIf=\"enableFilter && canvas.priorityThresholds.length >= 2\"\n      class=\"filter\"\n      [class]=\"filterOn ? 'on' : 'off'\"\n      (click)=\"filter()\"\n    >\n      <span class=\"tooltip\">Apply filter</span>\n    </button>\n  </div>\n  <button class=\"more-options\" (click)=\"toggleCollapse()\">\n    <span *ngIf=\"!collapsed\" class=\"tooltip\">Less options</span>\n    <span *ngIf=\"collapsed\" class=\"tooltip\">More options</span>\n  </button>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: DiagramButtonsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: DiagramButtonsComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'daga-diagram-buttons', imports: [CommonModule], template: "<div class=\"diagram-buttons\">\n  <button *ngIf=\"enableZoom\" class=\"zoom-in\" (click)=\"zoomIn()\">\n    <span class=\"tooltip\">Zoom in</span>\n  </button>\n  <button *ngIf=\"enableZoom\" class=\"zoom-out\" (click)=\"zoomOut()\">\n    <span class=\"tooltip\">Zoom out</span>\n  </button>\n  <div #collapsableButtons class=\"collapsable-buttons collapsed\">\n    <button *ngIf=\"enableZoom\" class=\"center\" (click)=\"center()\">\n      <span class=\"tooltip\">Fit diagram to screen</span>\n    </button>\n    <button *ngIf=\"enableUndoRedo\" class=\"undo\" (click)=\"undo()\">\n      <span class=\"tooltip\">Undo</span>\n    </button>\n    <button *ngIf=\"enableUndoRedo\" class=\"redo\" (click)=\"redo()\">\n      <span class=\"tooltip\">Redo</span>\n    </button>\n    <button\n      *ngIf=\"enableLayout && canvas.layoutFormat\"\n      class=\"layout\"\n      (click)=\"layout()\"\n    >\n      <span class=\"tooltip\">Apply layout</span>\n    </button>\n    <button\n      *ngIf=\"enableFilter && canvas.priorityThresholds.length >= 2\"\n      class=\"filter\"\n      [class]=\"filterOn ? 'on' : 'off'\"\n      (click)=\"filter()\"\n    >\n      <span class=\"tooltip\">Apply filter</span>\n    </button>\n  </div>\n  <button class=\"more-options\" (click)=\"toggleCollapse()\">\n    <span *ngIf=\"!collapsed\" class=\"tooltip\">Less options</span>\n    <span *ngIf=\"collapsed\" class=\"tooltip\">More options</span>\n  </button>\n</div>\n", styles: [":host{position:absolute;right:1rem;bottom:1rem}.diagram-buttons button{position:relative;display:block;height:3rem;width:3rem;padding:0;border:0;margin-bottom:1rem;background-color:transparent}.diagram-buttons button .tooltip{visibility:hidden;z-index:1;position:absolute;top:.5rem;right:3.5rem;height:2rem;padding:.6rem;border-radius:.25rem;font-size:.8rem;font-weight:500;box-sizing:border-box;white-space:nowrap;color:#fff;background-color:#0009}.diagram-buttons button:hover .tooltip{visibility:visible}.diagram-buttons button.filter.on{background-image:url(/assets/daga/icon/buttons/filter-on.svg)}.diagram-buttons button.filter.on:hover{background-image:url(/assets/daga/icon/buttons/filter-on-hover.svg)}.diagram-buttons button.filter.off{background-image:url(/assets/daga/icon/buttons/filter-off.svg)}.diagram-buttons button.filter.off:hover{background-image:url(/assets/daga/icon/buttons/filter-off-hover.svg)}.diagram-buttons button.layout{background-image:url(/assets/daga/icon/buttons/layout.svg)}.diagram-buttons button.layout:hover{background-image:url(/assets/daga/icon/buttons/layout-hover.svg)}.diagram-buttons button.zoom-in{background-image:url(/assets/daga/icon/buttons/zoom-in.svg)}.diagram-buttons button.zoom-in:hover{background-image:url(/assets/daga/icon/buttons/zoom-in-hover.svg)}.diagram-buttons button.zoom-out{background-image:url(/assets/daga/icon/buttons/zoom-out.svg)}.diagram-buttons button.zoom-out:hover{background-image:url(/assets/daga/icon/buttons/zoom-out-hover.svg)}.diagram-buttons button.center{background-image:url(/assets/daga/icon/buttons/center.svg)}.diagram-buttons button.center:hover{background-image:url(/assets/daga/icon/buttons/center-hover.svg)}.diagram-buttons button.undo{background-image:url(/assets/daga/icon/buttons/undo.svg)}.diagram-buttons button.undo:hover{background-image:url(/assets/daga/icon/buttons/undo-hover.svg)}.diagram-buttons button.redo{background-image:url(/assets/daga/icon/buttons/redo.svg)}.diagram-buttons button.redo:hover{background-image:url(/assets/daga/icon/buttons/redo-hover.svg)}.diagram-buttons button.more-options{background-image:url(/assets/daga/icon/buttons/ellipsis.svg)}.diagram-buttons button.more-options:hover{background-image:url(/assets/daga/icon/buttons/ellipsis-hover.svg)}.diagram-buttons .collapsable-buttons.collapsing{animation-name:collapse-animation;animation-duration:1s;animation-fill-mode:forwards}.diagram-buttons .collapsable-buttons.expanding{animation-name:expand-animation;animation-duration:1s;animation-fill-mode:forwards}.diagram-buttons .collapsable-buttons.collapsed{transform:scaleY(0);height:0}@keyframes collapse-animation{0%{transform:scale(1);transform-origin:0% 0%;height:12rem}to{transform:scaleY(0);transform-origin:0% 0%;height:0}}@keyframes expand-animation{0%{transform:scaleY(0);transform-origin:0% 0%;height:0}to{transform:scale(1);transform-origin:0% 0%;height:12rem}}\n"] }]
+            args: [{ standalone: true, selector: 'daga-diagram-buttons', imports: [CommonModule], template: "<div class=\"diagram-buttons\">\n  <button *ngIf=\"enableZoom\" class=\"zoom-in\" (click)=\"zoomIn()\">\n    <span class=\"tooltip\">Zoom in</span>\n  </button>\n  <button *ngIf=\"enableZoom\" class=\"zoom-out\" (click)=\"zoomOut()\">\n    <span class=\"tooltip\">Zoom out</span>\n  </button>\n  <div #collapsableButtons class=\"collapsable-buttons collapsed\">\n    <button *ngIf=\"enableZoom\" class=\"center\" (click)=\"center()\">\n      <span class=\"tooltip\">Fit diagram to screen</span>\n    </button>\n    <button *ngIf=\"enableUndoRedo\" class=\"undo\" (click)=\"undo()\">\n      <span class=\"tooltip\">Undo</span>\n    </button>\n    <button *ngIf=\"enableUndoRedo\" class=\"redo\" (click)=\"redo()\">\n      <span class=\"tooltip\">Redo</span>\n    </button>\n    <button\n      *ngIf=\"enableLayout && canvas.layoutFormat\"\n      class=\"layout\"\n      (click)=\"layout()\"\n    >\n      <span class=\"tooltip\">Apply layout</span>\n    </button>\n    <button\n      *ngIf=\"enableFilter && canvas.priorityThresholds.length >= 2\"\n      class=\"filter\"\n      [class]=\"filterOn ? 'on' : 'off'\"\n      (click)=\"filter()\"\n    >\n      <span class=\"tooltip\">Apply filter</span>\n    </button>\n  </div>\n  <button class=\"more-options\" (click)=\"toggleCollapse()\">\n    <span *ngIf=\"!collapsed\" class=\"tooltip\">Less options</span>\n    <span *ngIf=\"collapsed\" class=\"tooltip\">More options</span>\n  </button>\n</div>\n" }]
         }], ctorParameters: () => [{ type: CanvasProviderService }], propDecorators: { collapsableButtons: [{
                 type: ViewChild,
                 args: ['collapsableButtons']
@@ -5503,6 +6326,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImpor
                 type: Input
             }] } });
 
+/**
+ * Displays the errors detected by a diagram's validators.
+ * @see DiagramValidator
+ * @private
+ */
 class ErrorsComponent {
     get canvas() {
         return this.canvasProvider.getCanvas();
@@ -5541,17 +6369,23 @@ class ErrorsComponent {
         }
         // TODO: IF ERROR IS IN AN ELEMENT BUT NOT IN A SPECIFIC PROPERTY, WE COULD HIGHLIGHT THE ELEMENT
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: ErrorsComponent, deps: [{ token: CanvasProviderService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.6", 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", styles: [":host{left:2rem;bottom:0;position:absolute;width:calc(100% - 8rem)}.errors-summary{position:absolute;right:2rem;top:-2rem;height:2rem;border-top-left-radius:.5rem;border-top-right-radius:.5rem;display:flex;flex-direction:row;align-items:center}.errors-summary.no-errors{background-color:var(--panel-secondary-color);color:var(--font-color)}.errors-summary.with-errors{background-color:#e64545;color:#fff}.errors-summary span{flex:1 0 auto;padding:.5rem}.errors-summary .collapse-button-container{flex:0 0 auto;padding-left:.5rem;padding-right:.5rem;border-top-left-radius:.5rem;border-top-right-radius:.5rem;background-color:var(--error-color)}.errors-summary .collapse-button-container daga-collapse-button{filter:brightness(10)}.error-panel{width:100%;max-height:12rem;border-top-left-radius:.5rem;border-top-right-radius:.5rem;padding:.5rem;background-color:var(--font-color);color:#fff;overflow:auto}.error-panel ol{counter-reset:count;list-style:decimal;padding:0;padding-left:5rem;margin:0;font-size:.95rem}.error-panel ol li{counter-increment:count;cursor:pointer;padding-bottom:.25rem}.error-panel ol li:hover{text-decoration:underline}.error-panel ol li::marker{content:\"ERROR \" counters(count,\".\",decimal-leading-zero) \" \";font-family:var(--monospace-font-family);font-size:.9rem;font-weight:400;color:#ffffffbf}.error-panel ol li b{font-weight:700}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CollapseButtonComponent, selector: "daga-collapse-button", inputs: ["collapsableSelector", "collapsableAdditionalSelector", "collapsed", "disabled", "direction", "rule", "collapsedValue", "visibleValue"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ErrorsComponent, deps: [{ token: CanvasProviderService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: ErrorsComponent, isStandalone: true, selector: "daga-errors", viewQueries: [{ propertyName: "errorsContainer", first: true, predicate: ["errors"], descendants: true }], ngImport: i0, template: "<div #errorsContainer class=\"errors\">\n  <div\n    *ngIf=\"errors.length === 0\"\n    class=\"errors-summary no-errors prevent-user-select\"\n  >\n    <span>No errors found</span>\n  </div>\n  <div\n    *ngIf=\"errors.length > 0\"\n    class=\"errors-summary with-errors prevent-user-select\"\n  >\n    <span>{{ errors.length }} errors found</span>\n    <div class=\"collapse-button-container\">\n      <daga-collapse-button\n        [collapsableSelector]=\"errorsContainer\"\n        [collapsableAdditionalSelector]=\"'.error-panel'\"\n        [direction]=\"Side.Top\"\n        [rule]=\"'display'\"\n        [collapsedValue]=\"'none'\"\n        [visibleValue]=\"'block'\"\n      />\n    </div>\n  </div>\n  <div *ngIf=\"errors.length > 0\" class=\"error-panel\">\n    <ol>\n      <li\n        *ngFor=\"let error of errors; index as i\"\n        (click)=\"showError(error)\"\n        [innerHTML]=\"error.message\"\n      ></li>\n    </ol>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CollapseButtonComponent, selector: "daga-collapse-button", inputs: ["collapsableSelector", "collapsableAdditionalSelector", "collapsed", "disabled", "direction", "rule", "collapsedValue", "visibleValue"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: ErrorsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.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", styles: [":host{left:2rem;bottom:0;position:absolute;width:calc(100% - 8rem)}.errors-summary{position:absolute;right:2rem;top:-2rem;height:2rem;border-top-left-radius:.5rem;border-top-right-radius:.5rem;display:flex;flex-direction:row;align-items:center}.errors-summary.no-errors{background-color:var(--panel-secondary-color);color:var(--font-color)}.errors-summary.with-errors{background-color:#e64545;color:#fff}.errors-summary span{flex:1 0 auto;padding:.5rem}.errors-summary .collapse-button-container{flex:0 0 auto;padding-left:.5rem;padding-right:.5rem;border-top-left-radius:.5rem;border-top-right-radius:.5rem;background-color:var(--error-color)}.errors-summary .collapse-button-container daga-collapse-button{filter:brightness(10)}.error-panel{width:100%;max-height:12rem;border-top-left-radius:.5rem;border-top-right-radius:.5rem;padding:.5rem;background-color:var(--font-color);color:#fff;overflow:auto}.error-panel ol{counter-reset:count;list-style:decimal;padding:0;padding-left:5rem;margin:0;font-size:.95rem}.error-panel ol li{counter-increment:count;cursor:pointer;padding-bottom:.25rem}.error-panel ol li:hover{text-decoration:underline}.error-panel ol li::marker{content:\"ERROR \" counters(count,\".\",decimal-leading-zero) \" \";font-family:var(--monospace-font-family);font-size:.9rem;font-weight:400;color:#ffffffbf}.error-panel ol li b{font-weight:700}\n"] }]
+            args: [{ standalone: true, selector: 'daga-errors', imports: [CommonModule, CollapseButtonComponent], template: "<div #errorsContainer class=\"errors\">\n  <div\n    *ngIf=\"errors.length === 0\"\n    class=\"errors-summary no-errors prevent-user-select\"\n  >\n    <span>No errors found</span>\n  </div>\n  <div\n    *ngIf=\"errors.length > 0\"\n    class=\"errors-summary with-errors prevent-user-select\"\n  >\n    <span>{{ errors.length }} errors found</span>\n    <div class=\"collapse-button-container\">\n      <daga-collapse-button\n        [collapsableSelector]=\"errorsContainer\"\n        [collapsableAdditionalSelector]=\"'.error-panel'\"\n        [direction]=\"Side.Top\"\n        [rule]=\"'display'\"\n        [collapsedValue]=\"'none'\"\n        [visibleValue]=\"'block'\"\n      />\n    </div>\n  </div>\n  <div *ngIf=\"errors.length > 0\" class=\"error-panel\">\n    <ol>\n      <li\n        *ngFor=\"let error of errors; index as i\"\n        (click)=\"showError(error)\"\n        [innerHTML]=\"error.message\"\n      ></li>\n    </ol>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: CanvasProviderService }], propDecorators: { errorsContainer: [{
                 type: ViewChild,
                 args: ['errors']
             }] } });
 
+/**
+ * Palette that the user can drag and drop nodes from.
+ * @see DiagramConfig
+ * @see DiagramNode
+ * @private
+ */
 class PaletteComponent {
     get canvas() {
         return this.canvasProvider.getCanvas();
@@ -5695,6 +6529,10 @@ class PaletteComponent {
                 .style('top', 0)
                 .style('z-index', 'auto');
             // try to place node
+            if (this.canvas.userActions[DiagramActions.AddNodeAction] === false) {
+                // can't place, the user isn't allowed to place nodes
+                return;
+            }
             if (type.isUnique &&
                 this.canvas.model.nodes.find(type.id) !== undefined) {
                 // can't place, it's unique and that node is already in the model
@@ -5896,12 +6734,12 @@ class PaletteComponent {
                 .text(templateConfig.label);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: PaletteComponent, deps: [{ token: CanvasProviderService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.6", type: PaletteComponent, isStandalone: true, selector: "daga-palette", inputs: { palettes: "palettes", currentPalette: "currentPalette", currentCategory: "currentCategory", location: "location" }, viewQueries: [{ propertyName: "panel", first: true, predicate: ["panel"], descendants: true }], ngImport: i0, template: "<div #panel class=\"panel {{ location }}\">\n  <daga-collapse-button\n    #collapseButton\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", styles: [".panel{width:12rem}.palette-view{display:flex;flex-direction:column;align-items:center;gap:1rem;padding:1rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CollapseButtonComponent, selector: "daga-collapse-button", inputs: ["collapsableSelector", "collapsableAdditionalSelector", "collapsed", "disabled", "direction", "rule", "collapsedValue", "visibleValue"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: PaletteComponent, deps: [{ token: CanvasProviderService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: PaletteComponent, isStandalone: true, selector: "daga-palette", inputs: { palettes: "palettes", currentPalette: "currentPalette", currentCategory: "currentCategory", location: "location" }, viewQueries: [{ propertyName: "panel", first: true, predicate: ["panel"], descendants: true }], ngImport: i0, template: "<div #panel class=\"panel {{ location }}\">\n  <daga-collapse-button\n    #collapseButton\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: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CollapseButtonComponent, selector: "daga-collapse-button", inputs: ["collapsableSelector", "collapsableAdditionalSelector", "collapsed", "disabled", "direction", "rule", "collapsedValue", "visibleValue"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: PaletteComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: PaletteComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'daga-palette', imports: [CommonModule, CollapseButtonComponent], template: "<div #panel class=\"panel {{ location }}\">\n  <daga-collapse-button\n    #collapseButton\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", styles: [".panel{width:12rem}.palette-view{display:flex;flex-direction:column;align-items:center;gap:1rem;padding:1rem}\n"] }]
+            args: [{ standalone: true, selector: 'daga-palette', imports: [CommonModule, CollapseButtonComponent], template: "<div #panel class=\"panel {{ location }}\">\n  <daga-collapse-button\n    #collapseButton\n    [collapsableSelector]=\"panel\"\n    [collapsableAdditionalSelector]=\"'.panel-content'\"\n    [rule]=\"'display'\"\n    [collapsedValue]=\"'none'\"\n    [visibleValue]=\"'block'\"\n  />\n  <div class=\"panel-content\">\n    <div *ngIf=\"palettes.length > 1\" class=\"panel-tabs\">\n      <div\n        *ngFor=\"let palette of palettes\"\n        class=\"panel-tab\"\n        [class]=\"palette === currentPalette ? 'current-tab' : ''\"\n        (click)=\"switchPalette(palette)\"\n      >\n        {{ palette.name }}\n      </div>\n    </div>\n    <div class=\"palette-view\"></div>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: CanvasProviderService }], propDecorators: { panel: [{
                 type: ViewChild,
                 args: ['panel']
@@ -5915,6 +6753,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImpor
                 type: Input
             }] } });
 
+/**
+ * Editor of a property of text list type within a property editor.
+ * @see TextList
+ * @see PropertyEditor
+ * @see ValueSet
+ * @private
+ */
 class TextListEditorComponent {
     set value(val) {
         if (val === this._value) {
@@ -5969,12 +6814,12 @@ class TextListEditorComponent {
             this.addToValue();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: TextListEditorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.6", type: TextListEditorComponent, isStandalone: true, selector: "daga-text-list-editor", inputs: { value: "value", valueInput: "valueInput", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div *ngFor=\"let item of value; let index = index\" class=\"value-item-element\">\n  <lux-input\n    type=\"text\"\n    [disabled]=\"disabled\"\n    [value]=\"item\"\n    (focusout)=\"editFromValue(getValueFromEvent($event), index)\"\n  ></lux-input>\n  <button\n    *ngIf=\"!disabled\"\n    class=\"property-button\"\n    (click)=\"removeFromValue(index)\"\n  >\n    <img src=\"/assets/daga/icon/property/close.svg\" />\n  </button>\n</div>\n<div *ngIf=\"!disabled\" class=\"value-item-input\">\n  <div class=\"relatively-positioned\">\n    <lux-input\n      type=\"text\"\n      (keyup)=\"onKeyUp($event)\"\n      [(ngModel)]=\"valueInput\"\n    ></lux-input>\n    <button\n      *ngIf=\"valueInput !== ''\"\n      class=\"clear\"\n      (click)=\"clearInput()\"\n    ></button>\n  </div>\n  <button class=\"property-button\" (click)=\"addToValue()\">\n    <img src=\"/assets/daga/icon/property/add.svg\" />\n  </button>\n</div>\n", styles: [".property{padding-top:.5rem;padding-bottom:.5rem}.property .property-name{display:flex;justify-content:space-between;align-items:center;height:1.5rem;padding-bottom:.5rem;margin:0;width:100%;font-size:.75rem;font-weight:500;text-transform:uppercase}.value-item-input,.value-item-element{display:flex;align-items:stretch;flex-direction:row;height:1.5rem;gap:.5rem}.value-item-element{margin-bottom:.5rem}.left-bar{padding-left:1rem;border-left:.25rem solid var(--property-background-color)}lux-input,.relatively-positioned,p.value-item{height:1.5rem;flex-grow:1;flex-basis:0}p.value-item{margin:0;overflow:hidden;text-overflow:ellipsis}.relatively-positioned{position:relative}button.property-button{min-width:1.5rem;min-height:1.5rem;width:1.5rem;height:1.5rem;padding:0;border-radius:.25rem;border:none;background-color:transparent;font-size:1rem}button.property-button img{padding:.25rem;width:1rem;height:1rem}button.property-button:hover{background-color:var(--property-background-color)}button.clear{position:absolute;top:0;right:0;min-width:1.5rem;min-height:1.5rem;width:1.5rem;height:1.5rem;padding:0;border-radius:.25rem;border:none;background-color:transparent;background:var(--lux-autocomplete-icon-clear);background-size:.5rem .5rem;z-index:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: LuxModule }, { kind: "component", type: i3.InputComponent, selector: "lux-input", inputs: ["rows", "cols", "step", "min", "max", "lang", "inlineErrors", "inputId", "aria-label", "readonly", "disabled", "pattern", "currency", "placeholder", "required", "type", "value"], outputs: ["valueChange", "keyPress"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TextListEditorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: TextListEditorComponent, isStandalone: true, selector: "daga-text-list-editor", inputs: { value: "value", valueInput: "valueInput", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div *ngFor=\"let item of value; let index = index\" class=\"value-item-element\">\n  <lux-input\n    type=\"text\"\n    [disabled]=\"disabled\"\n    [value]=\"item\"\n    (focusout)=\"editFromValue(getValueFromEvent($event), index)\"\n  ></lux-input>\n  <button\n    *ngIf=\"!disabled\"\n    class=\"property-button\"\n    (click)=\"removeFromValue(index)\"\n  >\n    <div class=\"icon close-icon\"></div>\n  </button>\n</div>\n<div *ngIf=\"!disabled\" class=\"value-item-input\">\n  <div class=\"relatively-positioned\">\n    <lux-input\n      type=\"text\"\n      (keyup)=\"onKeyUp($event)\"\n      [(ngModel)]=\"valueInput\"\n    ></lux-input>\n    <button\n      *ngIf=\"valueInput !== ''\"\n      class=\"clear\"\n      (click)=\"clearInput()\"\n    ></button>\n  </div>\n  <button class=\"property-button\" (click)=\"addToValue()\">\n    <div class=\"icon add-icon\"></div>\n  </button>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: LuxModule }, { kind: "component", type: i3.InputComponent, selector: "lux-input", inputs: ["rows", "cols", "step", "min", "max", "lang", "inlineErrors", "inputId", "aria-label", "readonly", "disabled", "pattern", "currency", "placeholder", "required", "type", "value"], outputs: ["valueChange", "keyPress"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: TextListEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TextListEditorComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'daga-text-list-editor', imports: [CommonModule, LuxModule, FormsModule], template: "<div *ngFor=\"let item of value; let index = index\" class=\"value-item-element\">\n  <lux-input\n    type=\"text\"\n    [disabled]=\"disabled\"\n    [value]=\"item\"\n    (focusout)=\"editFromValue(getValueFromEvent($event), index)\"\n  ></lux-input>\n  <button\n    *ngIf=\"!disabled\"\n    class=\"property-button\"\n    (click)=\"removeFromValue(index)\"\n  >\n    <img src=\"/assets/daga/icon/property/close.svg\" />\n  </button>\n</div>\n<div *ngIf=\"!disabled\" class=\"value-item-input\">\n  <div class=\"relatively-positioned\">\n    <lux-input\n      type=\"text\"\n      (keyup)=\"onKeyUp($event)\"\n      [(ngModel)]=\"valueInput\"\n    ></lux-input>\n    <button\n      *ngIf=\"valueInput !== ''\"\n      class=\"clear\"\n      (click)=\"clearInput()\"\n    ></button>\n  </div>\n  <button class=\"property-button\" (click)=\"addToValue()\">\n    <img src=\"/assets/daga/icon/property/add.svg\" />\n  </button>\n</div>\n", styles: [".property{padding-top:.5rem;padding-bottom:.5rem}.property .property-name{display:flex;justify-content:space-between;align-items:center;height:1.5rem;padding-bottom:.5rem;margin:0;width:100%;font-size:.75rem;font-weight:500;text-transform:uppercase}.value-item-input,.value-item-element{display:flex;align-items:stretch;flex-direction:row;height:1.5rem;gap:.5rem}.value-item-element{margin-bottom:.5rem}.left-bar{padding-left:1rem;border-left:.25rem solid var(--property-background-color)}lux-input,.relatively-positioned,p.value-item{height:1.5rem;flex-grow:1;flex-basis:0}p.value-item{margin:0;overflow:hidden;text-overflow:ellipsis}.relatively-positioned{position:relative}button.property-button{min-width:1.5rem;min-height:1.5rem;width:1.5rem;height:1.5rem;padding:0;border-radius:.25rem;border:none;background-color:transparent;font-size:1rem}button.property-button img{padding:.25rem;width:1rem;height:1rem}button.property-button:hover{background-color:var(--property-background-color)}button.clear{position:absolute;top:0;right:0;min-width:1.5rem;min-height:1.5rem;width:1.5rem;height:1.5rem;padding:0;border-radius:.25rem;border:none;background-color:transparent;background:var(--lux-autocomplete-icon-clear);background-size:.5rem .5rem;z-index:1}\n"] }]
+            args: [{ standalone: true, selector: 'daga-text-list-editor', imports: [CommonModule, LuxModule, FormsModule], template: "<div *ngFor=\"let item of value; let index = index\" class=\"value-item-element\">\n  <lux-input\n    type=\"text\"\n    [disabled]=\"disabled\"\n    [value]=\"item\"\n    (focusout)=\"editFromValue(getValueFromEvent($event), index)\"\n  ></lux-input>\n  <button\n    *ngIf=\"!disabled\"\n    class=\"property-button\"\n    (click)=\"removeFromValue(index)\"\n  >\n    <div class=\"icon close-icon\"></div>\n  </button>\n</div>\n<div *ngIf=\"!disabled\" class=\"value-item-input\">\n  <div class=\"relatively-positioned\">\n    <lux-input\n      type=\"text\"\n      (keyup)=\"onKeyUp($event)\"\n      [(ngModel)]=\"valueInput\"\n    ></lux-input>\n    <button\n      *ngIf=\"valueInput !== ''\"\n      class=\"clear\"\n      (click)=\"clearInput()\"\n    ></button>\n  </div>\n  <button class=\"property-button\" (click)=\"addToValue()\">\n    <div class=\"icon add-icon\"></div>\n  </button>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { value: [{
                 type: Input
             }], valueInput: [{
@@ -5985,6 +6830,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImpor
                 type: Output
             }] } });
 
+/**
+ * Editor of a property of text map type within a property editor.
+ * @see TextMap
+ * @see PropertyEditor
+ * @see ValueSet
+ * @private
+ */
 class TextMapEditorComponent {
     set value(val) {
         if (val === this._value) {
@@ -6045,12 +6897,12 @@ class TextMapEditorComponent {
             this.addToValue();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: TextMapEditorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.6", 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\">\n  <lux-input\n    type=\"text\"\n    [disabled]=\"disabled\"\n    [value]=\"item.key\"\n    (focusout)=\"editKey(item.key, getValueFromEvent($event))\"\n  ></lux-input>\n  <lux-input\n    type=\"text\"\n    [disabled]=\"disabled\"\n    [value]=\"item.value\"\n    (focusout)=\"editValue(item.key, getValueFromEvent($event))\"\n  ></lux-input>\n  <button\n    *ngIf=\"!disabled\"\n    class=\"property-button\"\n    (click)=\"removeFromValue(item.key)\"\n  >\n    <img src=\"/assets/daga/icon/property/close.svg\" />\n  </button>\n</div>\n<div *ngIf=\"!disabled\" class=\"value-item-input\">\n  <div class=\"relatively-positioned\">\n    <lux-input\n      type=\"text\"\n      (keyup)=\"onKeyUp($event)\"\n      [(ngModel)]=\"keyInput\"\n    ></lux-input>\n    <button\n      *ngIf=\"keyInput !== ''\"\n      class=\"clear\"\n      (click)=\"clearKeyInput()\"\n    ></button>\n  </div>\n  <div class=\"relatively-positioned\">\n    <lux-input\n      type=\"text\"\n      (keyup)=\"onKeyUp($event)\"\n      [(ngModel)]=\"valueInput\"\n    ></lux-input>\n    <button\n      *ngIf=\"valueInput !== ''\"\n      class=\"clear\"\n      (click)=\"clearValueInput()\"\n    ></button>\n  </div>\n  <button class=\"property-button\" (click)=\"addToValue()\">\n    <img src=\"/assets/daga/icon/property/add.svg\" />\n  </button>\n</div>\n", styles: [".property{padding-top:.5rem;padding-bottom:.5rem}.property .property-name{display:flex;justify-content:space-between;align-items:center;height:1.5rem;padding-bottom:.5rem;margin:0;width:100%;font-size:.75rem;font-weight:500;text-transform:uppercase}.value-item-input,.value-item-element{display:flex;align-items:stretch;flex-direction:row;height:1.5rem;gap:.5rem}.value-item-element{margin-bottom:.5rem}.left-bar{padding-left:1rem;border-left:.25rem solid var(--property-background-color)}lux-input,.relatively-positioned,p.value-item{height:1.5rem;flex-grow:1;flex-basis:0}p.value-item{margin:0;overflow:hidden;text-overflow:ellipsis}.relatively-positioned{position:relative}button.property-button{min-width:1.5rem;min-height:1.5rem;width:1.5rem;height:1.5rem;padding:0;border-radius:.25rem;border:none;background-color:transparent;font-size:1rem}button.property-button img{padding:.25rem;width:1rem;height:1rem}button.property-button:hover{background-color:var(--property-background-color)}button.clear{position:absolute;top:0;right:0;min-width:1.5rem;min-height:1.5rem;width:1.5rem;height:1.5rem;padding:0;border-radius:.25rem;border:none;background-color:transparent;background:var(--lux-autocomplete-icon-clear);background-size:.5rem .5rem;z-index:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: LuxModule }, { kind: "component", type: i3.InputComponent, selector: "lux-input", inputs: ["rows", "cols", "step", "min", "max", "lang", "inlineErrors", "inputId", "aria-label", "readonly", "disabled", "pattern", "currency", "placeholder", "required", "type", "value"], outputs: ["valueChange", "keyPress"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TextMapEditorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: TextMapEditorComponent, isStandalone: true, selector: "daga-text-map-editor", inputs: { value: "value", keyInput: "keyInput", valueInput: "valueInput", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div *ngFor=\"let item of value | keyvalue\" class=\"value-item-element\">\n  <lux-input\n    type=\"text\"\n    [disabled]=\"disabled\"\n    [value]=\"item.key\"\n    (focusout)=\"editKey(item.key, getValueFromEvent($event))\"\n  ></lux-input>\n  <lux-input\n    type=\"text\"\n    [disabled]=\"disabled\"\n    [value]=\"item.value\"\n    (focusout)=\"editValue(item.key, getValueFromEvent($event))\"\n  ></lux-input>\n  <button\n    *ngIf=\"!disabled\"\n    class=\"property-button\"\n    (click)=\"removeFromValue(item.key)\"\n  >\n    <div class=\"icon close-icon\"></div>\n  </button>\n</div>\n<div *ngIf=\"!disabled\" class=\"value-item-input\">\n  <div class=\"relatively-positioned\">\n    <lux-input\n      type=\"text\"\n      (keyup)=\"onKeyUp($event)\"\n      [(ngModel)]=\"keyInput\"\n    ></lux-input>\n    <button\n      *ngIf=\"keyInput !== ''\"\n      class=\"clear\"\n      (click)=\"clearKeyInput()\"\n    ></button>\n  </div>\n  <div class=\"relatively-positioned\">\n    <lux-input\n      type=\"text\"\n      (keyup)=\"onKeyUp($event)\"\n      [(ngModel)]=\"valueInput\"\n    ></lux-input>\n    <button\n      *ngIf=\"valueInput !== ''\"\n      class=\"clear\"\n      (click)=\"clearValueInput()\"\n    ></button>\n  </div>\n  <button class=\"property-button\" (click)=\"addToValue()\">\n    <div class=\"icon add-icon\"></div>\n  </button>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: LuxModule }, { kind: "component", type: i3.InputComponent, selector: "lux-input", inputs: ["rows", "cols", "step", "min", "max", "lang", "inlineErrors", "inputId", "aria-label", "readonly", "disabled", "pattern", "currency", "placeholder", "required", "type", "value"], outputs: ["valueChange", "keyPress"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: TextMapEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TextMapEditorComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'daga-text-map-editor', imports: [CommonModule, LuxModule, FormsModule], template: "<div *ngFor=\"let item of value | keyvalue\" class=\"value-item-element\">\n  <lux-input\n    type=\"text\"\n    [disabled]=\"disabled\"\n    [value]=\"item.key\"\n    (focusout)=\"editKey(item.key, getValueFromEvent($event))\"\n  ></lux-input>\n  <lux-input\n    type=\"text\"\n    [disabled]=\"disabled\"\n    [value]=\"item.value\"\n    (focusout)=\"editValue(item.key, getValueFromEvent($event))\"\n  ></lux-input>\n  <button\n    *ngIf=\"!disabled\"\n    class=\"property-button\"\n    (click)=\"removeFromValue(item.key)\"\n  >\n    <img src=\"/assets/daga/icon/property/close.svg\" />\n  </button>\n</div>\n<div *ngIf=\"!disabled\" class=\"value-item-input\">\n  <div class=\"relatively-positioned\">\n    <lux-input\n      type=\"text\"\n      (keyup)=\"onKeyUp($event)\"\n      [(ngModel)]=\"keyInput\"\n    ></lux-input>\n    <button\n      *ngIf=\"keyInput !== ''\"\n      class=\"clear\"\n      (click)=\"clearKeyInput()\"\n    ></button>\n  </div>\n  <div class=\"relatively-positioned\">\n    <lux-input\n      type=\"text\"\n      (keyup)=\"onKeyUp($event)\"\n      [(ngModel)]=\"valueInput\"\n    ></lux-input>\n    <button\n      *ngIf=\"valueInput !== ''\"\n      class=\"clear\"\n      (click)=\"clearValueInput()\"\n    ></button>\n  </div>\n  <button class=\"property-button\" (click)=\"addToValue()\">\n    <img src=\"/assets/daga/icon/property/add.svg\" />\n  </button>\n</div>\n", styles: [".property{padding-top:.5rem;padding-bottom:.5rem}.property .property-name{display:flex;justify-content:space-between;align-items:center;height:1.5rem;padding-bottom:.5rem;margin:0;width:100%;font-size:.75rem;font-weight:500;text-transform:uppercase}.value-item-input,.value-item-element{display:flex;align-items:stretch;flex-direction:row;height:1.5rem;gap:.5rem}.value-item-element{margin-bottom:.5rem}.left-bar{padding-left:1rem;border-left:.25rem solid var(--property-background-color)}lux-input,.relatively-positioned,p.value-item{height:1.5rem;flex-grow:1;flex-basis:0}p.value-item{margin:0;overflow:hidden;text-overflow:ellipsis}.relatively-positioned{position:relative}button.property-button{min-width:1.5rem;min-height:1.5rem;width:1.5rem;height:1.5rem;padding:0;border-radius:.25rem;border:none;background-color:transparent;font-size:1rem}button.property-button img{padding:.25rem;width:1rem;height:1rem}button.property-button:hover{background-color:var(--property-background-color)}button.clear{position:absolute;top:0;right:0;min-width:1.5rem;min-height:1.5rem;width:1.5rem;height:1.5rem;padding:0;border-radius:.25rem;border:none;background-color:transparent;background:var(--lux-autocomplete-icon-clear);background-size:.5rem .5rem;z-index:1}\n"] }]
+            args: [{ standalone: true, selector: 'daga-text-map-editor', imports: [CommonModule, LuxModule, FormsModule], template: "<div *ngFor=\"let item of value | keyvalue\" class=\"value-item-element\">\n  <lux-input\n    type=\"text\"\n    [disabled]=\"disabled\"\n    [value]=\"item.key\"\n    (focusout)=\"editKey(item.key, getValueFromEvent($event))\"\n  ></lux-input>\n  <lux-input\n    type=\"text\"\n    [disabled]=\"disabled\"\n    [value]=\"item.value\"\n    (focusout)=\"editValue(item.key, getValueFromEvent($event))\"\n  ></lux-input>\n  <button\n    *ngIf=\"!disabled\"\n    class=\"property-button\"\n    (click)=\"removeFromValue(item.key)\"\n  >\n    <div class=\"icon close-icon\"></div>\n  </button>\n</div>\n<div *ngIf=\"!disabled\" class=\"value-item-input\">\n  <div class=\"relatively-positioned\">\n    <lux-input\n      type=\"text\"\n      (keyup)=\"onKeyUp($event)\"\n      [(ngModel)]=\"keyInput\"\n    ></lux-input>\n    <button\n      *ngIf=\"keyInput !== ''\"\n      class=\"clear\"\n      (click)=\"clearKeyInput()\"\n    ></button>\n  </div>\n  <div class=\"relatively-positioned\">\n    <lux-input\n      type=\"text\"\n      (keyup)=\"onKeyUp($event)\"\n      [(ngModel)]=\"valueInput\"\n    ></lux-input>\n    <button\n      *ngIf=\"valueInput !== ''\"\n      class=\"clear\"\n      (click)=\"clearValueInput()\"\n    ></button>\n  </div>\n  <button class=\"property-button\" (click)=\"addToValue()\">\n    <div class=\"icon add-icon\"></div>\n  </button>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { value: [{
                 type: Input
             }], keyInput: [{
@@ -6063,10 +6915,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImpor
                 type: Output
             }] } });
 
+/**
+ * Editor of a value set within a property editor.
+ * @see PropertyEditor
+ * @see ValueSet
+ * @private
+ */
 class ObjectEditorComponent {
     get canvas() {
         return this.canvasProvider.getCanvas();
     }
+    get userCanEdit() {
+        return this.canvas.userActions[DiagramActions.UpdateValuesAction] !== false;
+    }
     get valueSet() {
         return this._valueSet;
     }
@@ -6078,7 +6939,7 @@ class ObjectEditorComponent {
     constructor(cdr, canvasProvider) {
         this.cdr = cdr;
         this.canvasProvider = canvasProvider;
-        /** How many object-editors are parents of this object-editor */
+        /** How many object-editors are parents of this object-editor. @private */
         this.depth = 0;
         // Attributes for the template
         this.Type = Type;
@@ -6143,10 +7004,10 @@ class ObjectEditorComponent {
         }
         return date && !isNaN(date.valueOf()) ? new Date(date).toISOString() : '';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: ObjectEditorComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CanvasProviderService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.6", type: ObjectEditorComponent, isStandalone: true, selector: "daga-object-editor", inputs: { valueSet: "valueSet", depth: "depth" }, ngImport: i0, template: "<div\n  *ngFor=\"let property of valueSet?.displayedProperties || []\"\n  class=\"property\"\n  [class]=\"property.name + ' depth-' + depth\"\n>\n  <p class=\"property-name\">\n    {{ property.name }}\n    <button class=\"property-button\" (click)=\"hideProperty(property.name)\">\n      <img src=\"/assets/daga/icon/property/hide.svg\" />\n    </button>\n  </p>\n\n  <lux-input\n    *ngIf=\"property.type === Type.Text\"\n    type=\"text\"\n    [disabled]=\"!property.editable\"\n    [value]=\"valueSet?.getValue(property.name)\"\n    (valueChange)=\"setValue(property, $event)\"\n  ></lux-input>\n  <textarea\n    *ngIf=\"property.type === Type.TextArea\"\n    [ngModel]=\"valueSet?.getValue(property.name)\"\n    (ngModelChange)=\"setValue(property, $event)\"\n  ></textarea>\n  <lux-input\n    *ngIf=\"property.type === Type.Number\"\n    type=\"number\"\n    [disabled]=\"!property.editable\"\n    [value]=\"valueSet?.getValue(property.name)\"\n    (valueChange)=\"setValue(property, $event)\"\n  ></lux-input>\n  <lux-input\n    *ngIf=\"property.type === Type.Color\"\n    type=\"color\"\n    [disabled]=\"!property.editable\"\n    [value]=\"valueSet?.getValue(property.name)\"\n    (valueChange)=\"setValue(property, $event)\"\n  ></lux-input>\n  <lux-input\n    *ngIf=\"property.type === Type.Date\"\n    type=\"date\"\n    [disabled]=\"!property.editable\"\n    [value]=\"convertDate(valueSet?.getValue(property.name))\"\n    (valueChange)=\"setValue(property, $event)\"\n  ></lux-input>\n  <lux-input\n    *ngIf=\"property.type === Type.Time\"\n    type=\"time\"\n    [disabled]=\"!property.editable\"\n    [value]=\"convertDate(valueSet?.getValue(property.name))\"\n    (valueChange)=\"setValue(property, $event)\"\n  ></lux-input>\n  <lux-input\n    *ngIf=\"property.type === Type.Url\"\n    type=\"url\"\n    [disabled]=\"!property.editable\"\n    [value]=\"valueSet?.getValue(property.name)\"\n    (valueChange)=\"setValue(property, $event)\"\n  ></lux-input>\n  <lux-radiogroup\n    *ngIf=\"property.type === Type.Boolean\"\n    [disabled]=\"!property.editable\"\n    [items]=\"booleanRadioItems\"\n    [value]=\"valueSet?.getValue(property.name)\"\n    (valueChange)=\"setValue(property, $event)\"\n  ></lux-radiogroup>\n  <lux-autocomplete\n    *ngIf=\"property.type === Type.Option\"\n    [disabled]=\"!property.editable\"\n    [dataSource]=\"property.options || []\"\n    [value]=\"valueSet?.getValue(property.name)\"\n    (valueChange)=\"setValue(property, $event)\"\n  ></lux-autocomplete>\n  <lux-autocomplete-list\n    *ngIf=\"property.type === Type.OptionList\"\n    [disabled]=\"!property.editable\"\n    [dataSource]=\"property.options || []\"\n    [value]=\"valueSet?.getValue(property.name)\"\n    (valueChange)=\"setValue(property, $event)\"\n  ></lux-autocomplete-list>\n  <daga-text-list-editor\n    *ngIf=\"property.type === Type.TextList\"\n    [disabled]=\"!property.editable\"\n    [value]=\"valueSet?.getValue(property.name)\"\n    (valueChange)=\"setValue(property, $event)\"\n  ></daga-text-list-editor>\n  <daga-text-map-editor\n    *ngIf=\"property.type === Type.TextMap\"\n    [disabled]=\"!property.editable\"\n    [value]=\"valueSet?.getValue(property.name)\"\n    (valueChange)=\"setValue(property, $event)\"\n  ></daga-text-map-editor>\n  <div *ngIf=\"property.type === Type.Object\" class=\"left-bar\">\n    <daga-object-editor\n      [valueSet]=\"valueSet?.getSubValueSet(property.name)\"\n      [depth]=\"depth + 1\"\n    ></daga-object-editor>\n  </div>\n</div>\n<div class=\"property\" *ngIf=\"valueSet && valueSet.hiddenProperties.length > 0\">\n  <p class=\"property-name\">Add property:</p>\n  <select (change)=\"displayProperty($event)\">\n    <option value=\"\">Select a property</option>\n    <option\n      *ngFor=\"let property of valueSet?.hiddenProperties || []\"\n      [value]=\"property.name\"\n    >\n      {{ property.name }}\n    </option>\n  </select>\n</div>\n", styles: [".property{padding-top:.5rem;padding-bottom:.5rem}.property .property-name{display:flex;justify-content:space-between;align-items:center;height:1.5rem;padding-bottom:.5rem;margin:0;width:100%;font-size:.75rem;font-weight:500;text-transform:uppercase}.value-item-input,.value-item-element{display:flex;align-items:stretch;flex-direction:row;height:1.5rem;gap:.5rem}.value-item-element{margin-bottom:.5rem}.left-bar{padding-left:1rem;border-left:.25rem solid var(--property-background-color)}lux-input,.relatively-positioned,p.value-item{height:1.5rem;flex-grow:1;flex-basis:0}p.value-item{margin:0;overflow:hidden;text-overflow:ellipsis}.relatively-positioned{position:relative}button.property-button{min-width:1.5rem;min-height:1.5rem;width:1.5rem;height:1.5rem;padding:0;border-radius:.25rem;border:none;background-color:transparent;font-size:1rem}button.property-button img{padding:.25rem;width:1rem;height:1rem}button.property-button:hover{background-color:var(--property-background-color)}button.clear{position:absolute;top:0;right:0;min-width:1.5rem;min-height:1.5rem;width:1.5rem;height:1.5rem;padding:0;border-radius:.25rem;border:none;background-color:transparent;background:var(--lux-autocomplete-icon-clear);background-size:.5rem .5rem;z-index:1}\n"], dependencies: [{ kind: "component", type: ObjectEditorComponent, selector: "daga-object-editor", inputs: ["valueSet", "depth"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: LuxModule }, { kind: "component", type: i3.AutocompleteComponent, selector: "lux-autocomplete", inputs: ["inputId", "disabled", "readonly", "label", "canAddNewValues", "keepOpenAfterDelete", "value", "dataSource", "required", "placeholder", "resolveLabelsFunction", "populateFunction", "instance"], outputs: ["valueChange", "dataSourceChange"] }, { kind: "component", type: i3.AutocompleteListComponent, selector: "lux-autocomplete-list", inputs: ["value", "lang", "inputId", "dataSource", "placeholder", "disabled", "deleteLabelTemplate", "addMessage", "required", "resolveLabelsFunction", "populateFunction", "instance"], outputs: ["valueChange"] }, { kind: "component", type: i3.InputComponent, selector: "lux-input", inputs: ["rows", "cols", "step", "min", "max", "lang", "inlineErrors", "inputId", "aria-label", "readonly", "disabled", "pattern", "currency", "placeholder", "required", "type", "value"], outputs: ["valueChange", "keyPress"] }, { kind: "component", type: i3.RadiogroupComponent, selector: "lux-radiogroup", inputs: ["name", "disabled", "readonly", "required", "items", "value"], outputs: ["itemsChange", "valueChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: TextListEditorComponent, selector: "daga-text-list-editor", inputs: ["value", "valueInput", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: TextMapEditorComponent, selector: "daga-text-map-editor", inputs: ["value", "keyInput", "valueInput", "disabled"], outputs: ["valueChange"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ObjectEditorComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CanvasProviderService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: ObjectEditorComponent, isStandalone: true, selector: "daga-object-editor", inputs: { valueSet: "valueSet", depth: "depth" }, ngImport: i0, template: "<div\n  *ngFor=\"let property of valueSet?.displayedProperties || []\"\n  class=\"property\"\n  [class]=\"property.name + ' depth-' + depth\"\n>\n  <p class=\"property-name\">\n    {{ property.name }}\n    <button class=\"property-button\" (click)=\"hideProperty(property.name)\">\n      <div class=\"icon hide-icon\"></div>\n    </button>\n  </p>\n\n  <lux-input\n    *ngIf=\"property.type === Type.Text\"\n    type=\"text\"\n    [disabled]=\"!property.editable || !userCanEdit\"\n    [value]=\"valueSet?.getValue(property.name)\"\n    (valueChange)=\"setValue(property, $event)\"\n  ></lux-input>\n  <textarea\n    *ngIf=\"property.type === Type.TextArea\"\n    [disabled]=\"!property.editable || !userCanEdit\"\n    [ngModel]=\"valueSet?.getValue(property.name)\"\n    (ngModelChange)=\"setValue(property, $event)\"\n  ></textarea>\n  <lux-input\n    *ngIf=\"property.type === Type.Number\"\n    type=\"number\"\n    [disabled]=\"!property.editable || !userCanEdit\"\n    [value]=\"valueSet?.getValue(property.name)\"\n    (valueChange)=\"setValue(property, $event)\"\n  ></lux-input>\n  <lux-input\n    *ngIf=\"property.type === Type.Color\"\n    type=\"color\"\n    [disabled]=\"!property.editable || !userCanEdit\"\n    [value]=\"valueSet?.getValue(property.name)\"\n    (valueChange)=\"setValue(property, $event)\"\n  ></lux-input>\n  <lux-input\n    *ngIf=\"property.type === Type.Date\"\n    type=\"date\"\n    [disabled]=\"!property.editable || !userCanEdit\"\n    [value]=\"convertDate(valueSet?.getValue(property.name))\"\n    (valueChange)=\"setValue(property, $event)\"\n  ></lux-input>\n  <lux-input\n    *ngIf=\"property.type === Type.Time\"\n    type=\"time\"\n    [disabled]=\"!property.editable || !userCanEdit\"\n    [value]=\"convertDate(valueSet?.getValue(property.name))\"\n    (valueChange)=\"setValue(property, $event)\"\n  ></lux-input>\n  <lux-input\n    *ngIf=\"property.type === Type.Url\"\n    type=\"url\"\n    [disabled]=\"!property.editable || !userCanEdit\"\n    [value]=\"valueSet?.getValue(property.name)\"\n    (valueChange)=\"setValue(property, $event)\"\n  ></lux-input>\n  <lux-radiogroup\n    *ngIf=\"property.type === Type.Boolean\"\n    [disabled]=\"!property.editable || !userCanEdit\"\n    [items]=\"booleanRadioItems\"\n    [value]=\"valueSet?.getValue(property.name)\"\n    (valueChange)=\"setValue(property, $event)\"\n  ></lux-radiogroup>\n  <lux-autocomplete\n    *ngIf=\"property.type === Type.Option\"\n    [disabled]=\"!property.editable || !userCanEdit\"\n    [dataSource]=\"property.options || []\"\n    [value]=\"valueSet?.getValue(property.name)\"\n    (valueChange)=\"setValue(property, $event)\"\n  ></lux-autocomplete>\n  <lux-autocomplete-list\n    *ngIf=\"property.type === Type.OptionList\"\n    [disabled]=\"!property.editable || !userCanEdit\"\n    [dataSource]=\"property.options || []\"\n    [value]=\"valueSet?.getValue(property.name)\"\n    (valueChange)=\"setValue(property, $event)\"\n  ></lux-autocomplete-list>\n  <daga-text-list-editor\n    *ngIf=\"property.type === Type.TextList\"\n    [disabled]=\"!property.editable || !userCanEdit\"\n    [value]=\"valueSet?.getValue(property.name)\"\n    (valueChange)=\"setValue(property, $event)\"\n  ></daga-text-list-editor>\n  <daga-text-map-editor\n    *ngIf=\"property.type === Type.TextMap\"\n    [disabled]=\"!property.editable || !userCanEdit\"\n    [value]=\"valueSet?.getValue(property.name)\"\n    (valueChange)=\"setValue(property, $event)\"\n  ></daga-text-map-editor>\n  <div *ngIf=\"property.type === Type.Object\" class=\"left-bar\">\n    <daga-object-editor\n      [valueSet]=\"valueSet?.getSubValueSet(property.name)\"\n      [depth]=\"depth + 1\"\n    ></daga-object-editor>\n  </div>\n</div>\n<div class=\"property\" *ngIf=\"valueSet && valueSet.hiddenProperties.length > 0\">\n  <p class=\"property-name\">Add property:</p>\n  <select (change)=\"displayProperty($event)\">\n    <option value=\"\">Select a property</option>\n    <option\n      *ngFor=\"let property of valueSet?.hiddenProperties || []\"\n      [value]=\"property.name\"\n    >\n      {{ property.name }}\n    </option>\n  </select>\n</div>\n", dependencies: [{ kind: "component", type: ObjectEditorComponent, selector: "daga-object-editor", inputs: ["valueSet", "depth"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: LuxModule }, { kind: "component", type: i3.AutocompleteComponent, selector: "lux-autocomplete", inputs: ["inputId", "disabled", "readonly", "label", "canAddNewValues", "keepOpenAfterDelete", "value", "dataSource", "required", "placeholder", "resolveLabelsFunction", "populateFunction", "instance"], outputs: ["valueChange", "dataSourceChange"] }, { kind: "component", type: i3.AutocompleteListComponent, selector: "lux-autocomplete-list", inputs: ["value", "lang", "inputId", "dataSource", "placeholder", "disabled", "deleteLabelTemplate", "addMessage", "required", "resolveLabelsFunction", "populateFunction", "instance"], outputs: ["valueChange"] }, { kind: "component", type: i3.InputComponent, selector: "lux-input", inputs: ["rows", "cols", "step", "min", "max", "lang", "inlineErrors", "inputId", "aria-label", "readonly", "disabled", "pattern", "currency", "placeholder", "required", "type", "value"], outputs: ["valueChange", "keyPress"] }, { kind: "component", type: i3.RadiogroupComponent, selector: "lux-radiogroup", inputs: ["name", "disabled", "readonly", "required", "items", "value"], outputs: ["itemsChange", "valueChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: TextListEditorComponent, selector: "daga-text-list-editor", inputs: ["value", "valueInput", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: TextMapEditorComponent, selector: "daga-text-map-editor", inputs: ["value", "keyInput", "valueInput", "disabled"], outputs: ["valueChange"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: ObjectEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ObjectEditorComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'daga-object-editor', imports: [
                         CommonModule,
@@ -6154,13 +7015,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImpor
                         FormsModule,
                         TextListEditorComponent,
                         TextMapEditorComponent
-                    ], template: "<div\n  *ngFor=\"let property of valueSet?.displayedProperties || []\"\n  class=\"property\"\n  [class]=\"property.name + ' depth-' + depth\"\n>\n  <p class=\"property-name\">\n    {{ property.name }}\n    <button class=\"property-button\" (click)=\"hideProperty(property.name)\">\n      <img src=\"/assets/daga/icon/property/hide.svg\" />\n    </button>\n  </p>\n\n  <lux-input\n    *ngIf=\"property.type === Type.Text\"\n    type=\"text\"\n    [disabled]=\"!property.editable\"\n    [value]=\"valueSet?.getValue(property.name)\"\n    (valueChange)=\"setValue(property, $event)\"\n  ></lux-input>\n  <textarea\n    *ngIf=\"property.type === Type.TextArea\"\n    [ngModel]=\"valueSet?.getValue(property.name)\"\n    (ngModelChange)=\"setValue(property, $event)\"\n  ></textarea>\n  <lux-input\n    *ngIf=\"property.type === Type.Number\"\n    type=\"number\"\n    [disabled]=\"!property.editable\"\n    [value]=\"valueSet?.getValue(property.name)\"\n    (valueChange)=\"setValue(property, $event)\"\n  ></lux-input>\n  <lux-input\n    *ngIf=\"property.type === Type.Color\"\n    type=\"color\"\n    [disabled]=\"!property.editable\"\n    [value]=\"valueSet?.getValue(property.name)\"\n    (valueChange)=\"setValue(property, $event)\"\n  ></lux-input>\n  <lux-input\n    *ngIf=\"property.type === Type.Date\"\n    type=\"date\"\n    [disabled]=\"!property.editable\"\n    [value]=\"convertDate(valueSet?.getValue(property.name))\"\n    (valueChange)=\"setValue(property, $event)\"\n  ></lux-input>\n  <lux-input\n    *ngIf=\"property.type === Type.Time\"\n    type=\"time\"\n    [disabled]=\"!property.editable\"\n    [value]=\"convertDate(valueSet?.getValue(property.name))\"\n    (valueChange)=\"setValue(property, $event)\"\n  ></lux-input>\n  <lux-input\n    *ngIf=\"property.type === Type.Url\"\n    type=\"url\"\n    [disabled]=\"!property.editable\"\n    [value]=\"valueSet?.getValue(property.name)\"\n    (valueChange)=\"setValue(property, $event)\"\n  ></lux-input>\n  <lux-radiogroup\n    *ngIf=\"property.type === Type.Boolean\"\n    [disabled]=\"!property.editable\"\n    [items]=\"booleanRadioItems\"\n    [value]=\"valueSet?.getValue(property.name)\"\n    (valueChange)=\"setValue(property, $event)\"\n  ></lux-radiogroup>\n  <lux-autocomplete\n    *ngIf=\"property.type === Type.Option\"\n    [disabled]=\"!property.editable\"\n    [dataSource]=\"property.options || []\"\n    [value]=\"valueSet?.getValue(property.name)\"\n    (valueChange)=\"setValue(property, $event)\"\n  ></lux-autocomplete>\n  <lux-autocomplete-list\n    *ngIf=\"property.type === Type.OptionList\"\n    [disabled]=\"!property.editable\"\n    [dataSource]=\"property.options || []\"\n    [value]=\"valueSet?.getValue(property.name)\"\n    (valueChange)=\"setValue(property, $event)\"\n  ></lux-autocomplete-list>\n  <daga-text-list-editor\n    *ngIf=\"property.type === Type.TextList\"\n    [disabled]=\"!property.editable\"\n    [value]=\"valueSet?.getValue(property.name)\"\n    (valueChange)=\"setValue(property, $event)\"\n  ></daga-text-list-editor>\n  <daga-text-map-editor\n    *ngIf=\"property.type === Type.TextMap\"\n    [disabled]=\"!property.editable\"\n    [value]=\"valueSet?.getValue(property.name)\"\n    (valueChange)=\"setValue(property, $event)\"\n  ></daga-text-map-editor>\n  <div *ngIf=\"property.type === Type.Object\" class=\"left-bar\">\n    <daga-object-editor\n      [valueSet]=\"valueSet?.getSubValueSet(property.name)\"\n      [depth]=\"depth + 1\"\n    ></daga-object-editor>\n  </div>\n</div>\n<div class=\"property\" *ngIf=\"valueSet && valueSet.hiddenProperties.length > 0\">\n  <p class=\"property-name\">Add property:</p>\n  <select (change)=\"displayProperty($event)\">\n    <option value=\"\">Select a property</option>\n    <option\n      *ngFor=\"let property of valueSet?.hiddenProperties || []\"\n      [value]=\"property.name\"\n    >\n      {{ property.name }}\n    </option>\n  </select>\n</div>\n", styles: [".property{padding-top:.5rem;padding-bottom:.5rem}.property .property-name{display:flex;justify-content:space-between;align-items:center;height:1.5rem;padding-bottom:.5rem;margin:0;width:100%;font-size:.75rem;font-weight:500;text-transform:uppercase}.value-item-input,.value-item-element{display:flex;align-items:stretch;flex-direction:row;height:1.5rem;gap:.5rem}.value-item-element{margin-bottom:.5rem}.left-bar{padding-left:1rem;border-left:.25rem solid var(--property-background-color)}lux-input,.relatively-positioned,p.value-item{height:1.5rem;flex-grow:1;flex-basis:0}p.value-item{margin:0;overflow:hidden;text-overflow:ellipsis}.relatively-positioned{position:relative}button.property-button{min-width:1.5rem;min-height:1.5rem;width:1.5rem;height:1.5rem;padding:0;border-radius:.25rem;border:none;background-color:transparent;font-size:1rem}button.property-button img{padding:.25rem;width:1rem;height:1rem}button.property-button:hover{background-color:var(--property-background-color)}button.clear{position:absolute;top:0;right:0;min-width:1.5rem;min-height:1.5rem;width:1.5rem;height:1.5rem;padding:0;border-radius:.25rem;border:none;background-color:transparent;background:var(--lux-autocomplete-icon-clear);background-size:.5rem .5rem;z-index:1}\n"] }]
+                    ], template: "<div\n  *ngFor=\"let property of valueSet?.displayedProperties || []\"\n  class=\"property\"\n  [class]=\"property.name + ' depth-' + depth\"\n>\n  <p class=\"property-name\">\n    {{ property.name }}\n    <button class=\"property-button\" (click)=\"hideProperty(property.name)\">\n      <div class=\"icon hide-icon\"></div>\n    </button>\n  </p>\n\n  <lux-input\n    *ngIf=\"property.type === Type.Text\"\n    type=\"text\"\n    [disabled]=\"!property.editable || !userCanEdit\"\n    [value]=\"valueSet?.getValue(property.name)\"\n    (valueChange)=\"setValue(property, $event)\"\n  ></lux-input>\n  <textarea\n    *ngIf=\"property.type === Type.TextArea\"\n    [disabled]=\"!property.editable || !userCanEdit\"\n    [ngModel]=\"valueSet?.getValue(property.name)\"\n    (ngModelChange)=\"setValue(property, $event)\"\n  ></textarea>\n  <lux-input\n    *ngIf=\"property.type === Type.Number\"\n    type=\"number\"\n    [disabled]=\"!property.editable || !userCanEdit\"\n    [value]=\"valueSet?.getValue(property.name)\"\n    (valueChange)=\"setValue(property, $event)\"\n  ></lux-input>\n  <lux-input\n    *ngIf=\"property.type === Type.Color\"\n    type=\"color\"\n    [disabled]=\"!property.editable || !userCanEdit\"\n    [value]=\"valueSet?.getValue(property.name)\"\n    (valueChange)=\"setValue(property, $event)\"\n  ></lux-input>\n  <lux-input\n    *ngIf=\"property.type === Type.Date\"\n    type=\"date\"\n    [disabled]=\"!property.editable || !userCanEdit\"\n    [value]=\"convertDate(valueSet?.getValue(property.name))\"\n    (valueChange)=\"setValue(property, $event)\"\n  ></lux-input>\n  <lux-input\n    *ngIf=\"property.type === Type.Time\"\n    type=\"time\"\n    [disabled]=\"!property.editable || !userCanEdit\"\n    [value]=\"convertDate(valueSet?.getValue(property.name))\"\n    (valueChange)=\"setValue(property, $event)\"\n  ></lux-input>\n  <lux-input\n    *ngIf=\"property.type === Type.Url\"\n    type=\"url\"\n    [disabled]=\"!property.editable || !userCanEdit\"\n    [value]=\"valueSet?.getValue(property.name)\"\n    (valueChange)=\"setValue(property, $event)\"\n  ></lux-input>\n  <lux-radiogroup\n    *ngIf=\"property.type === Type.Boolean\"\n    [disabled]=\"!property.editable || !userCanEdit\"\n    [items]=\"booleanRadioItems\"\n    [value]=\"valueSet?.getValue(property.name)\"\n    (valueChange)=\"setValue(property, $event)\"\n  ></lux-radiogroup>\n  <lux-autocomplete\n    *ngIf=\"property.type === Type.Option\"\n    [disabled]=\"!property.editable || !userCanEdit\"\n    [dataSource]=\"property.options || []\"\n    [value]=\"valueSet?.getValue(property.name)\"\n    (valueChange)=\"setValue(property, $event)\"\n  ></lux-autocomplete>\n  <lux-autocomplete-list\n    *ngIf=\"property.type === Type.OptionList\"\n    [disabled]=\"!property.editable || !userCanEdit\"\n    [dataSource]=\"property.options || []\"\n    [value]=\"valueSet?.getValue(property.name)\"\n    (valueChange)=\"setValue(property, $event)\"\n  ></lux-autocomplete-list>\n  <daga-text-list-editor\n    *ngIf=\"property.type === Type.TextList\"\n    [disabled]=\"!property.editable || !userCanEdit\"\n    [value]=\"valueSet?.getValue(property.name)\"\n    (valueChange)=\"setValue(property, $event)\"\n  ></daga-text-list-editor>\n  <daga-text-map-editor\n    *ngIf=\"property.type === Type.TextMap\"\n    [disabled]=\"!property.editable || !userCanEdit\"\n    [value]=\"valueSet?.getValue(property.name)\"\n    (valueChange)=\"setValue(property, $event)\"\n  ></daga-text-map-editor>\n  <div *ngIf=\"property.type === Type.Object\" class=\"left-bar\">\n    <daga-object-editor\n      [valueSet]=\"valueSet?.getSubValueSet(property.name)\"\n      [depth]=\"depth + 1\"\n    ></daga-object-editor>\n  </div>\n</div>\n<div class=\"property\" *ngIf=\"valueSet && valueSet.hiddenProperties.length > 0\">\n  <p class=\"property-name\">Add property:</p>\n  <select (change)=\"displayProperty($event)\">\n    <option value=\"\">Select a property</option>\n    <option\n      *ngFor=\"let property of valueSet?.hiddenProperties || []\"\n      [value]=\"property.name\"\n    >\n      {{ property.name }}\n    </option>\n  </select>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: CanvasProviderService }], propDecorators: { valueSet: [{
                 type: Input
             }], depth: [{
                 type: Input
             }] } });
 
+/**
+ * Editor of the values of a value set.
+ * @see ValueSet
+ * @private
+ */
 class PropertyEditorComponent {
     get valueSet() {
         return this._valueSet;
@@ -6192,12 +7058,12 @@ class PropertyEditorComponent {
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: PropertyEditorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.6", type: PropertyEditorComponent, isStandalone: true, selector: "daga-property-editor", inputs: { location: "location", valueSet: "valueSet" }, viewQueries: [{ propertyName: "panel", first: true, predicate: ["panel"], descendants: true }], ngImport: i0, template: "<div #panel class=\"panel bottom {{ location }}\">\n  <daga-collapse-button\n    [collapsableSelector]=\"panel\"\n    [collapsableAdditionalSelector]=\"'.panel-content'\"\n    [rule]=\"'display'\"\n    [collapsedValue]=\"'none'\"\n    [visibleValue]=\"'block'\"\n    [disabled]=\"\n      !valueSet ||\n      !valueSet.propertySet ||\n      !valueSet.propertySet.hasProperties()\n    \"\n  />\n  <div\n    *ngIf=\"\n      valueSet && valueSet.propertySet && valueSet.propertySet.hasProperties()\n    \"\n    class=\"panel-content\"\n  >\n    <p *ngIf=\"title\" class=\"title\">{{ title }}</p>\n    <daga-object-editor [valueSet]=\"valueSet\"></daga-object-editor>\n  </div>\n</div>\n", styles: [".panel{width:24rem}.title{margin:0;width:100%;font-size:1rem;font-weight:500}.panel-content{padding:1rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CollapseButtonComponent, selector: "daga-collapse-button", inputs: ["collapsableSelector", "collapsableAdditionalSelector", "collapsed", "disabled", "direction", "rule", "collapsedValue", "visibleValue"] }, { kind: "component", type: ObjectEditorComponent, selector: "daga-object-editor", inputs: ["valueSet", "depth"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: PropertyEditorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: PropertyEditorComponent, isStandalone: true, selector: "daga-property-editor", inputs: { location: "location", valueSet: "valueSet" }, viewQueries: [{ propertyName: "panel", first: true, predicate: ["panel"], descendants: true }], ngImport: i0, template: "<div #panel class=\"panel bottom {{ location }}\">\n  <daga-collapse-button\n    [collapsableSelector]=\"panel\"\n    [collapsableAdditionalSelector]=\"'.panel-content'\"\n    [rule]=\"'display'\"\n    [collapsedValue]=\"'none'\"\n    [visibleValue]=\"'block'\"\n    [disabled]=\"\n      !valueSet ||\n      !valueSet.propertySet ||\n      !valueSet.propertySet.hasProperties()\n    \"\n  />\n  <div\n    *ngIf=\"\n      valueSet && valueSet.propertySet && valueSet.propertySet.hasProperties()\n    \"\n    class=\"panel-content\"\n  >\n    <p *ngIf=\"title\" class=\"title\">{{ title }}</p>\n    <daga-object-editor [valueSet]=\"valueSet\"></daga-object-editor>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: PropertyEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: PropertyEditorComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'daga-property-editor', imports: [CommonModule, CollapseButtonComponent, ObjectEditorComponent], template: "<div #panel class=\"panel bottom {{ location }}\">\n  <daga-collapse-button\n    [collapsableSelector]=\"panel\"\n    [collapsableAdditionalSelector]=\"'.panel-content'\"\n    [rule]=\"'display'\"\n    [collapsedValue]=\"'none'\"\n    [visibleValue]=\"'block'\"\n    [disabled]=\"\n      !valueSet ||\n      !valueSet.propertySet ||\n      !valueSet.propertySet.hasProperties()\n    \"\n  />\n  <div\n    *ngIf=\"\n      valueSet && valueSet.propertySet && valueSet.propertySet.hasProperties()\n    \"\n    class=\"panel-content\"\n  >\n    <p *ngIf=\"title\" class=\"title\">{{ title }}</p>\n    <daga-object-editor [valueSet]=\"valueSet\"></daga-object-editor>\n  </div>\n</div>\n", styles: [".panel{width:24rem}.title{margin:0;width:100%;font-size:1rem;font-weight:500}.panel-content{padding:1rem}\n"] }]
+            args: [{ standalone: true, selector: 'daga-property-editor', imports: [CommonModule, CollapseButtonComponent, ObjectEditorComponent], template: "<div #panel class=\"panel bottom {{ location }}\">\n  <daga-collapse-button\n    [collapsableSelector]=\"panel\"\n    [collapsableAdditionalSelector]=\"'.panel-content'\"\n    [rule]=\"'display'\"\n    [collapsedValue]=\"'none'\"\n    [visibleValue]=\"'block'\"\n    [disabled]=\"\n      !valueSet ||\n      !valueSet.propertySet ||\n      !valueSet.propertySet.hasProperties()\n    \"\n  />\n  <div\n    *ngIf=\"\n      valueSet && valueSet.propertySet && valueSet.propertySet.hasProperties()\n    \"\n    class=\"panel-content\"\n  >\n    <p *ngIf=\"title\" class=\"title\">{{ title }}</p>\n    <daga-object-editor [valueSet]=\"valueSet\"></daga-object-editor>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { panel: [{
                 type: ViewChild,
                 args: ['panel']
@@ -6209,21 +7075,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImpor
 
 /**
  * A provider for the {@link DiagramConfig} associated with a {@link DiagramComponent} context.
+ * @public
  */
 class DagaConfigurationService {
+    /**
+     * Set the diagram configuration of this context.
+     * @private
+     * @param config A diagram configuration.
+     */
     init(config) {
         this._config = config;
     }
+    /**
+     * Get the diagram configuration of this context.
+     * @public
+     * @returns A diagram configuration.
+     */
     getConfig() {
         return this._config;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: DagaConfigurationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: DagaConfigurationService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: DagaConfigurationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: DagaConfigurationService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: DagaConfigurationService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: DagaConfigurationService, decorators: [{
             type: Injectable
         }] });
 
+/**
+ * A diagram's user interface editor.
+ * @private
+ */
 class DiagramEditorComponent {
     get config() {
         return this.configurationService.getConfig();
@@ -6242,10 +7123,10 @@ class DiagramEditorComponent {
     ngAfterViewInit() {
         this.canvasProvider.initCanvasView(this.appendTo.nativeElement);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: DiagramEditorComponent, deps: [{ token: DagaConfigurationService }, { token: CanvasProviderService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.6", type: DiagramEditorComponent, isStandalone: true, selector: "daga-diagram-editor", viewQueries: [{ propertyName: "appendTo", first: true, predicate: ["appendTo"], descendants: true }, { propertyName: "diagramButtons", first: true, predicate: ["diagramButtons"], descendants: true }, { propertyName: "palette", first: true, predicate: ["palette"], descendants: true }, { propertyName: "propertyEditor", first: true, predicate: ["propertyEditor"], descendants: true }], ngImport: i0, template: "<div class=\"append-to\" #appendTo></div>\n<daga-diagram-buttons #diagramButtons />\n<daga-palette\n  *ngIf=\"config.palettes && config.palettes.length > 0\"\n  #palette\n  [location]=\"Corner.TopLeft\"\n  [palettes]=\"config.palettes\"\n/>\n<daga-property-editor #propertyEditor [location]=\"Corner.TopRight\" />\n<daga-errors />\n", styles: [":host,.append-to{display:block;width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DiagramButtonsComponent, selector: "daga-diagram-buttons", inputs: ["enableFilter", "enableLayout", "enableUndoRedo", "enableZoom", "zoomRate"] }, { kind: "component", type: PaletteComponent, selector: "daga-palette", inputs: ["palettes", "currentPalette", "currentCategory", "location"] }, { kind: "component", type: PropertyEditorComponent, selector: "daga-property-editor", inputs: ["location", "valueSet"] }, { kind: "component", type: ErrorsComponent, selector: "daga-errors" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: DiagramEditorComponent, deps: [{ token: DagaConfigurationService }, { token: CanvasProviderService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: DiagramEditorComponent, isStandalone: true, selector: "daga-diagram-editor", viewQueries: [{ propertyName: "appendTo", first: true, predicate: ["appendTo"], descendants: true }, { propertyName: "diagramButtons", first: true, predicate: ["diagramButtons"], descendants: true }, { propertyName: "palette", first: true, predicate: ["palette"], descendants: true }, { propertyName: "propertyEditor", first: true, predicate: ["propertyEditor"], descendants: true }], ngImport: i0, template: "<div class=\"append-to\" #appendTo></div>\n<daga-diagram-buttons #diagramButtons />\n<daga-palette\n  *ngIf=\"config.palettes && config.palettes.length > 0\"\n  #palette\n  [location]=\"Corner.TopLeft\"\n  [palettes]=\"config.palettes\"\n/>\n<daga-property-editor #propertyEditor [location]=\"Corner.TopRight\" />\n<daga-errors />\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DiagramButtonsComponent, selector: "daga-diagram-buttons", inputs: ["enableFilter", "enableLayout", "enableUndoRedo", "enableZoom", "zoomRate"] }, { kind: "component", type: PaletteComponent, selector: "daga-palette", inputs: ["palettes", "currentPalette", "currentCategory", "location"] }, { kind: "component", type: PropertyEditorComponent, selector: "daga-property-editor", inputs: ["location", "valueSet"] }, { kind: "component", type: ErrorsComponent, selector: "daga-errors" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: DiagramEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: DiagramEditorComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'daga-diagram-editor', imports: [
                         CommonModule,
@@ -6253,7 +7134,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImpor
                         PaletteComponent,
                         PropertyEditorComponent,
                         ErrorsComponent
-                    ], template: "<div class=\"append-to\" #appendTo></div>\n<daga-diagram-buttons #diagramButtons />\n<daga-palette\n  *ngIf=\"config.palettes && config.palettes.length > 0\"\n  #palette\n  [location]=\"Corner.TopLeft\"\n  [palettes]=\"config.palettes\"\n/>\n<daga-property-editor #propertyEditor [location]=\"Corner.TopRight\" />\n<daga-errors />\n", styles: [":host,.append-to{display:block;width:100%;height:100%}\n"] }]
+                    ], template: "<div class=\"append-to\" #appendTo></div>\n<daga-diagram-buttons #diagramButtons />\n<daga-palette\n  *ngIf=\"config.palettes && config.palettes.length > 0\"\n  #palette\n  [location]=\"Corner.TopLeft\"\n  [palettes]=\"config.palettes\"\n/>\n<daga-property-editor #propertyEditor [location]=\"Corner.TopRight\" />\n<daga-errors />\n" }]
         }], ctorParameters: () => [{ type: DagaConfigurationService }, { type: CanvasProviderService }], propDecorators: { appendTo: [{
                 type: ViewChild,
                 args: ['appendTo']
@@ -6271,6 +7152,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImpor
 /**
  * The context of a diagram. Every separate diagram must be contained within its own {@link DiagramComponent} and every {@link DiagramComponent} must contain its own {@link DiagramEditorComponent}.
  * This component defines a {@link DagaConfigurationService} and a {@link CanvasProviderService}, which is shared by all the components within and allows accessing the configuration and the canvas of this component's diagram, respectively.
+ * @public
  */
 class DiagramComponent {
     constructor(configurationService, canvasProvider) {
@@ -6280,19 +7162,24 @@ class DiagramComponent {
     ngOnInit() {
         this.configurationService.init(this.config);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: DiagramComponent, deps: [{ token: DagaConfigurationService }, { token: CanvasProviderService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.6", type: DiagramComponent, isStandalone: true, selector: "daga-diagram", inputs: { config: "config" }, providers: [CanvasProviderService, DagaConfigurationService], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: [":host{position:relative;display:block;min-width:40rem;min-height:20rem;width:100%;height:100%}\n"] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: DiagramComponent, deps: [{ token: DagaConfigurationService }, { token: CanvasProviderService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: DiagramComponent, isStandalone: true, selector: "daga-diagram", inputs: { config: "config" }, providers: [CanvasProviderService, DagaConfigurationService], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: DiagramComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: DiagramComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'daga-diagram', template: `<ng-content></ng-content>`, providers: [CanvasProviderService, DagaConfigurationService], styles: [":host{position:relative;display:block;min-width:40rem;min-height:20rem;width:100%;height:100%}\n"] }]
+            args: [{
+                    standalone: true,
+                    selector: 'daga-diagram',
+                    template: `<ng-content></ng-content>`,
+                    providers: [CanvasProviderService, DagaConfigurationService]
+                }]
         }], ctorParameters: () => [{ type: DagaConfigurationService }, { type: CanvasProviderService }], propDecorators: { config: [{
                 type: Input
             }] } });
 
 class DagaModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: DagaModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.6", ngImport: i0, type: DagaModule, imports: [CollapseButtonComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: DagaModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.2", ngImport: i0, type: DagaModule, imports: [CollapseButtonComponent,
             DiagramButtonsComponent,
             DiagramComponent,
             DiagramEditorComponent,
@@ -6305,7 +7192,7 @@ class DagaModule {
             CommonModule,
             FormsModule,
             LuxModule], exports: [DiagramComponent, DiagramEditorComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: DagaModule, providers: [DagaConfigurationService, CanvasProviderService], imports: [CollapseButtonComponent,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: DagaModule, providers: [DagaConfigurationService, CanvasProviderService], imports: [CollapseButtonComponent,
             DiagramButtonsComponent,
             DiagramEditorComponent,
             ErrorsComponent,
@@ -6318,7 +7205,7 @@ class DagaModule {
             FormsModule,
             LuxModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: DagaModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: DagaModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [],
@@ -6344,6 +7231,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImpor
 
 const DAGA_FILE_VERSION = 1;
 
+/**
+ * Importer which exports a diagram to its daga model representation.
+ * @public
+ */
 class DagaExporter {
     export(model) {
         const result = {
@@ -6420,6 +7311,10 @@ class DagaExporter {
     }
 }
 
+/**
+ * Importer which imports a diagram from its daga model representation.
+ * @public
+ */
 class DagaImporter {
     import(model, data) {
         // clear the model beforehand
@@ -6594,5 +7489,5 @@ class DagaImporter {
  * Generated bundle index. Do not edit.
  */
 
-export { ACTION_QUEUE_SIZE, ActionQueue, AddConnectionAction, AddNodeAction, AdjacencyLayout, BreadthAdjacencyLayout, BreadthLayout, CanvasProviderService, CollapseButtonComponent, DagaConfigurationService, DagaExporter, DagaImporter, DagaModule, DiagramButtonsComponent, DiagramCanvas, DiagramComponent, DiagramConnection, DiagramConnectionType, DiagramEditorComponent, DiagramElement, DiagramField, DiagramModel, DiagramNode, DiagramNodeType, DiagramPort, EditFieldAction, ErrorsComponent, ForceLayout, HorizontalLayout, MoveNodeAction, ObjectEditorComponent, PaletteComponent, PriorityLayout, Property, PropertyEditorComponent, PropertySet, RemoveAction, StretchNodeAction, TextListEditorComponent, TextMapEditorComponent, Type, UpdateValuesAction, ValueSet, VerticalLayout, layouts };
+export { ACTION_QUEUE_SIZE, ActionQueue, AddConnectionAction, AddNodeAction, AdjacencyLayout, BreadthAdjacencyLayout, BreadthLayout, CanvasProviderService, ClosedShape, CollapseButtonComponent, Corner, DagaConfigurationService, DagaExporter, DagaImporter, DagaModule, DiagramActions, DiagramButtonsComponent, DiagramCanvas, DiagramComponent, DiagramConnection, DiagramConnectionSet, DiagramConnectionType, DiagramEditorComponent, DiagramElement, DiagramEntitySet, DiagramField, DiagramFieldSet, DiagramModel, DiagramNode, DiagramNodeSet, DiagramNodeType, DiagramPort, DiagramPortSet, DiagramSection, DiagramSectionSet, EditFieldAction, ErrorsComponent, ForceLayout, HorizontalAlign, HorizontalLayout, LineShape, LineStyle, MoveNodeAction, ObjectEditorComponent, PaletteComponent, PriorityLayout, Property, PropertyEditorComponent, PropertySet, RemoveAction, Side, StretchNodeAction, TextListEditorComponent, TextMapEditorComponent, Type, UpdateValuesAction, ValueSet, VerticalAlign, VerticalLayout, layouts };
 //# sourceMappingURL=metadev-daga.mjs.map