@metadev/daga 1.1.0 → 1.2.0

package/fesm2022/metadev-daga.mjs

@@ -7,7 +7,7 @@ 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';
 
 var Side;
 (function (Side) {
@@ -71,12 +71,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: [{
@@ -514,7 +558,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 +629,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;
@@ -1325,6 +1369,17 @@ class ActionQueue {
         }
     }
 }
+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 = {}));
 class AddNodeAction {
     constructor(canvas, type, coords, label, values, id) {
         this.canvas = canvas;
@@ -2317,6 +2372,14 @@ class DiagramConnectionSet extends DiagramEntitySet {
 }
 
 let idTicker$3 = 0;
+const DIAGRAM_SECTION_LOOK_DEFAULTS = {
+    lookType: 'shaped-look',
+    shape: ClosedShape.Rectangle,
+    color: '#FFFFFF',
+    borderColor: '#000000',
+    selectedColor: '#FFFFFF',
+    selectedBorderColor: '#000000'
+};
 const DIAGRAM_SECTION_DEFAULTS = {
     sectionsX: 1,
     sectionsY: 1,
@@ -2325,7 +2388,7 @@ const DIAGRAM_SECTION_DEFAULTS = {
     margin: 0,
     label: null,
     ports: [],
-    look: DIAGRAM_LOOK_DEFAULTS
+    look: DIAGRAM_SECTION_LOOK_DEFAULTS
 };
 class DiagramSection extends DiagramElement {
     get name() {
@@ -2614,7 +2677,7 @@ class DiagramSectionSet extends DiagramEntitySet {
 }
 
 let idTicker$2 = 0;
-const DIAGRAM_LOOK_DEFAULTS = {
+const DIAGRAM_NODE_LOOK_DEFAULTS = {
     lookType: 'shaped-look',
     shape: ClosedShape.Rectangle,
     color: '#FFFFFF',
@@ -2633,7 +2696,7 @@ const DIAGRAM_NODE_TYPE_DEFAULTS = {
     label: null,
     ports: [],
     sections: null,
-    look: DIAGRAM_LOOK_DEFAULTS,
+    look: DIAGRAM_NODE_LOOK_DEFAULTS,
     isUnique: false,
     priority: 0,
     properties: []
@@ -3364,6 +3427,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 +3480,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 +3729,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 +3824,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 +3872,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 +3920,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 +3968,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 +4205,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 +4303,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 +4351,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 +4399,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 +4447,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 +4713,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 +4907,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 +4926,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')
@@ -5395,10 +5526,10 @@ class CanvasProviderService {
     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
         }] });
 
@@ -5482,12 +5613,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']
@@ -5541,12 +5672,12 @@ 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']
@@ -5695,6 +5826,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 +6031,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']
@@ -5969,12 +6104,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: [{
@@ -6045,12 +6180,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: [{
@@ -6067,6 +6202,9 @@ class ObjectEditorComponent {
     get canvas() {
         return this.canvasProvider.getCanvas();
     }
+    get userCanEdit() {
+        return this.canvas.userActions[DiagramActions.UpdateValuesAction] !== false;
+    }
     get valueSet() {
         return this._valueSet;
     }
@@ -6143,10 +6281,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,7 +6292,7 @@ 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: [{
@@ -6192,12 +6330,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']
@@ -6217,10 +6355,10 @@ class DagaConfigurationService {
     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
         }] });
 
@@ -6242,10 +6380,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 +6391,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']
@@ -6280,19 +6418,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 +6448,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 +6461,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: [],
@@ -6594,5 +6737,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