@metadev/daga 1.5.6 → 1.5.7

package/fesm2022/metadev-daga.mjs

@@ -150,52 +150,52 @@ class CollapseButtonComponent {
         switch (this.direction) {
             case Side.Right:
                 if (this.disabled) {
-                    return 'horizontal-none';
+                    return 'daga-horizontal-none';
                 }
                 else if (this.collapsed) {
-                    return 'horizontal-right';
+                    return 'daga-horizontal-right';
                 }
                 else {
-                    return 'horizontal-left';
+                    return 'daga-horizontal-left';
                 }
             case Side.Bottom:
                 if (this.disabled) {
-                    return 'vertical-none';
+                    return 'daga-vertical-none';
                 }
                 else if (this.collapsed) {
-                    return 'vertical-down';
+                    return 'daga-vertical-down';
                 }
                 else {
-                    return 'vertical-up';
+                    return 'daga-vertical-up';
                 }
             case Side.Left:
                 if (this.disabled) {
-                    return 'horizontal-none';
+                    return 'daga-horizontal-none';
                 }
                 else if (this.collapsed) {
-                    return 'horizontal-left';
+                    return 'daga-horizontal-left';
                 }
                 else {
-                    return 'horizontal-right';
+                    return 'daga-horizontal-right';
                 }
             case Side.Top:
                 if (this.disabled) {
-                    return 'vertical-none';
+                    return 'daga-vertical-none';
                 }
                 else if (this.collapsed) {
-                    return 'vertical-up';
+                    return 'daga-vertical-up';
                 }
                 else {
-                    return 'vertical-down';
+                    return 'daga-vertical-down';
                 }
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: CollapseButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.2", type: CollapseButtonComponent, isStandalone: true, selector: "daga-collapse-button", inputs: { collapsableSelector: "collapsableSelector", collapsableAdditionalSelector: "collapsableAdditionalSelector", collapsed: "collapsed", disabled: "disabled", direction: "direction", rule: "rule", collapsedValue: "collapsedValue", visibleValue: "visibleValue" }, ngImport: i0, template: "<button class=\"collapse-button {{ direction }}\" (click)=\"toggleCollapse()\">\n  <div [class]=\"getClass()\"></div>\n</button>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.2", type: CollapseButtonComponent, isStandalone: true, selector: "daga-collapse-button", inputs: { collapsableSelector: "collapsableSelector", collapsableAdditionalSelector: "collapsableAdditionalSelector", collapsed: "collapsed", disabled: "disabled", direction: "direction", rule: "rule", collapsedValue: "collapsedValue", visibleValue: "visibleValue" }, ngImport: i0, template: "<button\r\n  class=\"daga-collapse-button daga-{{ direction }}\"\r\n  (click)=\"toggleCollapse()\"\r\n>\r\n  <div [class]=\"getClass()\"></div>\r\n</button>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: CollapseButtonComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'daga-collapse-button', imports: [CommonModule], template: "<button class=\"collapse-button {{ direction }}\" (click)=\"toggleCollapse()\">\n  <div [class]=\"getClass()\"></div>\n</button>\n" }]
+            args: [{ standalone: true, selector: 'daga-collapse-button', imports: [CommonModule], template: "<button\r\n  class=\"daga-collapse-button daga-{{ direction }}\"\r\n  (click)=\"toggleCollapse()\"\r\n>\r\n  <div [class]=\"getClass()\"></div>\r\n</button>\r\n" }]
         }], propDecorators: { collapsableSelector: [{
                 type: Input
             }], collapsableAdditionalSelector: [{
@@ -4902,9 +4902,7 @@ class BreadthAdjacencyLayout {
             for (const nodeInThisLevel of currentNodeLevel) {
                 nodeArrangement.set(nodeArrangement.getClosestEmptyCoordinate(nodeGridIndices[nodeInThisLevel.id]), nodeInThisLevel);
                 removeIfExists(nodesToBeArranged, nodeInThisLevel);
-                const nodesAdjacentToThisNode = nodeInThisLevel
-                    .getAdjacentNodes()
-                    .filter((n) => !n.removed);
+                const nodesAdjacentToThisNode = nodeInThisLevel.getAdjacentNodes();
                 for (const adjacentNode of nodesAdjacentToThisNode) {
                     if (nodesToBeArranged.includes(adjacentNode)) {
                         nextNodeLevel.push(adjacentNode);
@@ -4970,9 +4968,7 @@ class BreadthLayout {
             const lastRowOfNodes = nodeArrangement[nodeArrangement.length - 1];
             const nodesInNextRow = [];
             for (const nodeInLastRow of lastRowOfNodes) {
-                const nodesAdjacentToThisNode = nodeInLastRow
-                    .getAdjacentNodes()
-                    .filter((n) => !n.removed);
+                const nodesAdjacentToThisNode = nodeInLastRow.getAdjacentNodes();
                 for (const adjacentNode of nodesAdjacentToThisNode) {
                     if (nodesToBeArranged.includes(adjacentNode)) {
                         removeIfExists(nodesToBeArranged, adjacentNode);
@@ -4981,7 +4977,6 @@ class BreadthLayout {
                 }
             }
             if (nodesInNextRow.length > 0) {
-                nodesInNextRow.sort((a, b) => b.type.priority - a.type.priority);
                 nodeArrangement.push(nodesInNextRow);
             }
             else {
@@ -5203,9 +5198,7 @@ class PriorityLayout {
                     nodesWithMaximumPriority.push(bfsNode);
                     removeIfExists(nodesWithMaximumPriorityToBeArranged, bfsNode);
                 }
-                const bfsAdjacentNodes = bfsNode
-                    .getAdjacentNodes()
-                    .filter((n) => !n.removed);
+                const bfsAdjacentNodes = bfsNode.getAdjacentNodes();
                 for (const bfsAdjacentNode of bfsAdjacentNodes) {
                     if (!bfsExplored.includes(bfsAdjacentNode)) {
                         bfsQueue.push(bfsAdjacentNode);
@@ -5245,9 +5238,7 @@ class PriorityLayout {
                     break;
                 }
                 else {
-                    const bfsAdjacentNodes = bfsNode
-                        .getAdjacentNodes()
-                        .filter((n) => !n.removed);
+                    const bfsAdjacentNodes = bfsNode.getAdjacentNodes();
                     for (const bfsAdjacentNode of bfsAdjacentNodes) {
                         if (!bfsExplored.includes(bfsAdjacentNode)) {
                             bfsQueue.push(bfsAdjacentNode);
@@ -5335,7 +5326,7 @@ class TreeLayout {
 const populateBranches = (branch, nodesToBeArranged) => {
     for (const adjacentNode of branch.node
         .getAdjacentNodes()
-        .filter((n) => !n.removed)) {
+        .sort((n1, n2) => n2.getPriority() - n1.getPriority())) {
         const indexOfAdjacentNode = nodesToBeArranged.indexOf(adjacentNode);
         if (indexOfAdjacentNode >= 0) {
             nodesToBeArranged.splice(indexOfAdjacentNode, 1);
@@ -6273,7 +6264,7 @@ class DiagramCanvas {
         });
         const canvasView = this.selectRoot()
             .append('g')
-            .attr('class', 'canvas-view')
+            .attr('class', 'daga-canvas-view')
             .attr('width', `100%`)
             .attr('height', `100%`);
         const canvasBackground = canvasView
@@ -6358,14 +6349,14 @@ class DiagramCanvas {
         }
         const canvasElements = canvasView
             .append('g')
-            .attr('class', 'canvas-elements');
-        canvasElements.append('g').attr('class', 'canvas-nodes');
-        canvasElements.append('g').attr('class', 'canvas-sections');
-        canvasElements.append('g').attr('class', 'canvas-ports');
-        canvasElements.append('g').attr('class', 'canvas-connections');
-        canvasElements.append('g').attr('class', 'canvas-fields');
-        canvasElements.append('g').attr('class', 'canvas-objects');
-        canvasElements.append('g').attr('class', 'canvas-decorators');
+            .attr('class', 'daga-canvas-elements');
+        canvasElements.append('g').attr('class', 'daga-canvas-nodes');
+        canvasElements.append('g').attr('class', 'daga-canvas-sections');
+        canvasElements.append('g').attr('class', 'daga-canvas-ports');
+        canvasElements.append('g').attr('class', 'daga-canvas-connections');
+        canvasElements.append('g').attr('class', 'daga-canvas-fields');
+        canvasElements.append('g').attr('class', 'daga-canvas-objects');
+        canvasElements.append('g').attr('class', 'daga-canvas-decorators');
         this.viewInitialized$.next();
     }
     zoomBy(zoom) {
@@ -8409,31 +8400,31 @@ class DiagramCanvas {
         return d3.select(this.diagramRoot).select('svg');
     }
     selectCanvasView() {
-        return this.selectRoot().select(`.canvas-view`);
+        return this.selectRoot().select(`.daga-canvas-view`);
     }
     selectCanvasElements() {
-        return this.selectRoot().select(`.canvas-elements`);
+        return this.selectRoot().select(`.daga-canvas-elements`);
     }
     selectCanvasNodes() {
-        return this.selectRoot().select(`.canvas-nodes`);
+        return this.selectRoot().select(`.daga-canvas-nodes`);
     }
     selectCanvasSections() {
-        return this.selectRoot().select(`.canvas-sections`);
+        return this.selectRoot().select(`.daga-canvas-sections`);
     }
     selectCanvasPorts() {
-        return this.selectRoot().select(`.canvas-ports`);
+        return this.selectRoot().select(`.daga-canvas-ports`);
     }
     selectCanvasConnections() {
-        return this.selectRoot().select(`.canvas-connections`);
+        return this.selectRoot().select(`.daga-canvas-connections`);
     }
     selectCanvasFields() {
-        return this.selectRoot().select(`.canvas-fields`);
+        return this.selectRoot().select(`.daga-canvas-fields`);
     }
     selectCanvasObjects() {
-        return this.selectRoot().select(`.canvas-objects`);
+        return this.selectRoot().select(`.daga-canvas-objects`);
     }
     selectCanvasDecorators() {
-        return this.selectRoot().select(`.canvas-decorators`);
+        return this.selectRoot().select(`.daga-canvas-decorators`);
     }
     // User actions
     startConnection(port) {
@@ -8652,6 +8643,10 @@ class DiagramCanvas {
         return this.userSelection.indexOf(selection) >= 0;
     }
     addToUserSelection(selection) {
+        if (selection.selected) {
+            // if selection is already selected, do nothing
+            return;
+        }
         if (this.propertyEditorSelection === undefined &&
             (selection instanceof DiagramNode ||
                 selection instanceof DiagramConnection)) {
@@ -8678,7 +8673,10 @@ class DiagramCanvas {
         if (this.propertyEditorSelection === selection) {
             this.setPropertyEditorSelection(undefined);
         }
-        this.userSelection.splice(this.userSelection.indexOf(selection), 1);
+        const indexOfSelectionInUserSelection = this.userSelection.indexOf(selection);
+        if (indexOfSelectionInUserSelection >= 0) {
+            this.userSelection.splice(indexOfSelectionInUserSelection, 1);
+        }
         selection.selected = false;
         selection.updateInView();
         // if selection is a node with sections, deselect the sections too so that sections don't show up as selected in the view
@@ -8769,7 +8767,7 @@ class DiagramCanvas {
         // append to the root (svg) element so the context menu is not affected by zoom transforms on the canvas view
         const contextMenuContainer = this.selectRoot()
             .append('foreignObject')
-            .attr('class', 'context-menu')
+            .attr('class', 'daga-context-menu')
             .attr('x', `${coordsRelativeToRoot[0] - CONTEXT_MENU_TOTAL_RADIUS}px`)
             .attr('y', `${coordsRelativeToRoot[1] - CONTEXT_MENU_TOTAL_RADIUS}px`)
             .attr('width', `${2 * CONTEXT_MENU_TOTAL_RADIUS}px`)
@@ -8792,7 +8790,7 @@ class DiagramCanvas {
             this.canUserPerformAction(DiagramActions.Remove)) {
             buttons.push({
                 name: 'CUT',
-                imageClass: 'cut',
+                imageClass: 'daga-cut',
                 onPress: (buttonPressEvent) => {
                     buttonPressEvent.preventDefault();
                     this.copyUserSelectionToClipboard();
@@ -8805,7 +8803,7 @@ class DiagramCanvas {
             this.canUserPerformAction(DiagramActions.Clipboard)) {
             buttons.push({
                 name: 'COPY',
-                imageClass: 'copy',
+                imageClass: 'daga-copy',
                 onPress: (buttonPressEvent) => {
                     buttonPressEvent.preventDefault();
                     this.copyUserSelectionToClipboard();
@@ -8816,7 +8814,7 @@ class DiagramCanvas {
         if (this.canUserPerformAction(DiagramActions.Paste)) {
             buttons.push({
                 name: 'PASTE',
-                imageClass: 'paste',
+                imageClass: 'daga-paste',
                 onPress: (buttonPressEvent) => {
                     buttonPressEvent.preventDefault();
                     this.pasteUserSelectionFromClipboard(this.getClosestGridPoint(coordsRelativeToCanvas));
@@ -8828,7 +8826,7 @@ class DiagramCanvas {
             this.canUserPerformAction(DiagramActions.Remove)) {
             buttons.push({
                 name: 'DELETE',
-                imageClass: 'delete',
+                imageClass: 'daga-delete',
                 onPress: (buttonPressEvent) => {
                     buttonPressEvent.preventDefault();
                     this.deleteUserSelection();
@@ -8840,7 +8838,7 @@ class DiagramCanvas {
         if (buttons.length === 0) {
             buttons.push({
                 name: 'NONE',
-                imageClass: 'cross',
+                imageClass: 'daga-cross',
                 onPress: undefined
             });
         }
@@ -8850,7 +8848,7 @@ class DiagramCanvas {
             const angle = (i + 0.5 - buttons.length / 2) * CONTEXT_MENU_BUTTON_PADDING_RADIANS;
             const buttonContainer = contextMenuContainer
                 .append('xhtml:div')
-                .attr('class', `context-menu-button ${button.imageClass}-button${button.onPress != undefined ? ' clickable' : ''}`)
+                .attr('class', `daga-context-menu-button ${button.imageClass}-button${button.onPress != undefined ? ' daga-clickable' : ''}`)
                 .attr('tabindex', 0)
                 .style('position', 'absolute')
                 .style('box-sizing', 'border-box')
@@ -9201,11 +9199,11 @@ class DiagramButtonsComponent {
         this.canvas.actionQueue.redo();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: DiagramButtonsComponent, deps: [{ token: CanvasProviderService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.2", type: DiagramButtonsComponent, isStandalone: true, selector: "daga-diagram-buttons", inputs: { location: "location", direction: "direction", enableFilter: "enableFilter", enableLayout: "enableLayout", enableUndoRedo: "enableUndoRedo", enableZoom: "enableZoom", zoomRate: "zoomRate" }, viewQueries: [{ propertyName: "collapsableButtons", first: true, predicate: ["collapsableButtons"], descendants: true }], ngImport: i0, template: "<div class=\"diagram-buttons {{ location }} {{ direction }}\">\r\n  <button\r\n    *ngIf=\"enableZoom && canvas.canUserPerformAction(DiagramActions.Zoom)\"\r\n    class=\"zoom-in\"\r\n    (click)=\"zoomIn()\"\r\n  >\r\n    <span class=\"tooltip\">Zoom in</span>\r\n  </button>\r\n  <button\r\n    *ngIf=\"enableZoom && canvas.canUserPerformAction(DiagramActions.Zoom)\"\r\n    class=\"zoom-out\"\r\n    (click)=\"zoomOut()\"\r\n  >\r\n    <span class=\"tooltip\">Zoom out</span>\r\n  </button>\r\n  <div #collapsableButtons class=\"collapsable-buttons collapsed\">\r\n    <button\r\n      *ngIf=\"enableZoom && canvas.canUserPerformAction(DiagramActions.Zoom)\"\r\n      class=\"center\"\r\n      (click)=\"center()\"\r\n    >\r\n      <span class=\"tooltip\">Fit diagram to screen</span>\r\n    </button>\r\n    <button *ngIf=\"enableUndoRedo\" class=\"undo\" (click)=\"undo()\">\r\n      <span class=\"tooltip\">Undo</span>\r\n    </button>\r\n    <button *ngIf=\"enableUndoRedo\" class=\"redo\" (click)=\"redo()\">\r\n      <span class=\"tooltip\">Redo</span>\r\n    </button>\r\n    <button\r\n      *ngIf=\"enableLayout && canvas.layoutFormat\"\r\n      class=\"layout\"\r\n      (click)=\"layout()\"\r\n    >\r\n      <span class=\"tooltip\">Apply layout</span>\r\n    </button>\r\n    <button\r\n      *ngIf=\"enableFilter\"\r\n      class=\"filter\"\r\n      [class]=\"filterOn ? 'on' : 'off'\"\r\n      (click)=\"filter()\"\r\n    >\r\n      <span class=\"tooltip\">Apply filter</span>\r\n    </button>\r\n  </div>\r\n  <button class=\"more-options\" (click)=\"toggleCollapse()\">\r\n    <span *ngIf=\"!collapsed\" class=\"tooltip\">Less options</span>\r\n    <span *ngIf=\"collapsed\" class=\"tooltip\">More options</span>\r\n  </button>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.2", type: DiagramButtonsComponent, isStandalone: true, selector: "daga-diagram-buttons", inputs: { location: "location", direction: "direction", enableFilter: "enableFilter", enableLayout: "enableLayout", enableUndoRedo: "enableUndoRedo", enableZoom: "enableZoom", zoomRate: "zoomRate" }, viewQueries: [{ propertyName: "collapsableButtons", first: true, predicate: ["collapsableButtons"], descendants: true }], ngImport: i0, template: "<div class=\"daga-diagram-buttons daga-{{ location }} daga-{{ direction }}\">\r\n  <button\r\n    *ngIf=\"enableZoom && canvas.canUserPerformAction(DiagramActions.Zoom)\"\r\n    class=\"daga-zoom-in\"\r\n    (click)=\"zoomIn()\"\r\n  >\r\n    <span class=\"daga-tooltip\">Zoom in</span>\r\n  </button>\r\n  <button\r\n    *ngIf=\"enableZoom && canvas.canUserPerformAction(DiagramActions.Zoom)\"\r\n    class=\"daga-zoom-out\"\r\n    (click)=\"zoomOut()\"\r\n  >\r\n    <span class=\"daga-tooltip\">Zoom out</span>\r\n  </button>\r\n  <div #collapsableButtons class=\"daga-collapsable-buttons daga-collapsed\">\r\n    <button\r\n      *ngIf=\"enableZoom && canvas.canUserPerformAction(DiagramActions.Zoom)\"\r\n      class=\"daga-center\"\r\n      (click)=\"center()\"\r\n    >\r\n      <span class=\"daga-tooltip\">Fit diagram to screen</span>\r\n    </button>\r\n    <button *ngIf=\"enableUndoRedo\" class=\"daga-undo\" (click)=\"undo()\">\r\n      <span class=\"daga-tooltip\">Undo</span>\r\n    </button>\r\n    <button *ngIf=\"enableUndoRedo\" class=\"daga-redo\" (click)=\"redo()\">\r\n      <span class=\"daga-tooltip\">Redo</span>\r\n    </button>\r\n    <button\r\n      *ngIf=\"enableLayout && canvas.layoutFormat\"\r\n      class=\"daga-layout\"\r\n      (click)=\"layout()\"\r\n    >\r\n      <span class=\"daga-tooltip\">Apply layout</span>\r\n    </button>\r\n    <button\r\n      *ngIf=\"enableFilter\"\r\n      class=\"daga-filter\"\r\n      [class]=\"filterOn ? 'daga-on' : 'daga-off'\"\r\n      (click)=\"filter()\"\r\n    >\r\n      <span class=\"daga-tooltip\">Apply filter</span>\r\n    </button>\r\n  </div>\r\n  <button class=\"daga-more-options\" (click)=\"toggleCollapse()\">\r\n    <span *ngIf=\"!collapsed\" class=\"daga-tooltip\">Less options</span>\r\n    <span *ngIf=\"collapsed\" class=\"daga-tooltip\">More options</span>\r\n  </button>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: DiagramButtonsComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'daga-diagram-buttons', imports: [CommonModule], template: "<div class=\"diagram-buttons {{ location }} {{ direction }}\">\r\n  <button\r\n    *ngIf=\"enableZoom && canvas.canUserPerformAction(DiagramActions.Zoom)\"\r\n    class=\"zoom-in\"\r\n    (click)=\"zoomIn()\"\r\n  >\r\n    <span class=\"tooltip\">Zoom in</span>\r\n  </button>\r\n  <button\r\n    *ngIf=\"enableZoom && canvas.canUserPerformAction(DiagramActions.Zoom)\"\r\n    class=\"zoom-out\"\r\n    (click)=\"zoomOut()\"\r\n  >\r\n    <span class=\"tooltip\">Zoom out</span>\r\n  </button>\r\n  <div #collapsableButtons class=\"collapsable-buttons collapsed\">\r\n    <button\r\n      *ngIf=\"enableZoom && canvas.canUserPerformAction(DiagramActions.Zoom)\"\r\n      class=\"center\"\r\n      (click)=\"center()\"\r\n    >\r\n      <span class=\"tooltip\">Fit diagram to screen</span>\r\n    </button>\r\n    <button *ngIf=\"enableUndoRedo\" class=\"undo\" (click)=\"undo()\">\r\n      <span class=\"tooltip\">Undo</span>\r\n    </button>\r\n    <button *ngIf=\"enableUndoRedo\" class=\"redo\" (click)=\"redo()\">\r\n      <span class=\"tooltip\">Redo</span>\r\n    </button>\r\n    <button\r\n      *ngIf=\"enableLayout && canvas.layoutFormat\"\r\n      class=\"layout\"\r\n      (click)=\"layout()\"\r\n    >\r\n      <span class=\"tooltip\">Apply layout</span>\r\n    </button>\r\n    <button\r\n      *ngIf=\"enableFilter\"\r\n      class=\"filter\"\r\n      [class]=\"filterOn ? 'on' : 'off'\"\r\n      (click)=\"filter()\"\r\n    >\r\n      <span class=\"tooltip\">Apply filter</span>\r\n    </button>\r\n  </div>\r\n  <button class=\"more-options\" (click)=\"toggleCollapse()\">\r\n    <span *ngIf=\"!collapsed\" class=\"tooltip\">Less options</span>\r\n    <span *ngIf=\"collapsed\" class=\"tooltip\">More options</span>\r\n  </button>\r\n</div>\r\n" }]
+            args: [{ standalone: true, selector: 'daga-diagram-buttons', imports: [CommonModule], template: "<div class=\"daga-diagram-buttons daga-{{ location }} daga-{{ direction }}\">\r\n  <button\r\n    *ngIf=\"enableZoom && canvas.canUserPerformAction(DiagramActions.Zoom)\"\r\n    class=\"daga-zoom-in\"\r\n    (click)=\"zoomIn()\"\r\n  >\r\n    <span class=\"daga-tooltip\">Zoom in</span>\r\n  </button>\r\n  <button\r\n    *ngIf=\"enableZoom && canvas.canUserPerformAction(DiagramActions.Zoom)\"\r\n    class=\"daga-zoom-out\"\r\n    (click)=\"zoomOut()\"\r\n  >\r\n    <span class=\"daga-tooltip\">Zoom out</span>\r\n  </button>\r\n  <div #collapsableButtons class=\"daga-collapsable-buttons daga-collapsed\">\r\n    <button\r\n      *ngIf=\"enableZoom && canvas.canUserPerformAction(DiagramActions.Zoom)\"\r\n      class=\"daga-center\"\r\n      (click)=\"center()\"\r\n    >\r\n      <span class=\"daga-tooltip\">Fit diagram to screen</span>\r\n    </button>\r\n    <button *ngIf=\"enableUndoRedo\" class=\"daga-undo\" (click)=\"undo()\">\r\n      <span class=\"daga-tooltip\">Undo</span>\r\n    </button>\r\n    <button *ngIf=\"enableUndoRedo\" class=\"daga-redo\" (click)=\"redo()\">\r\n      <span class=\"daga-tooltip\">Redo</span>\r\n    </button>\r\n    <button\r\n      *ngIf=\"enableLayout && canvas.layoutFormat\"\r\n      class=\"daga-layout\"\r\n      (click)=\"layout()\"\r\n    >\r\n      <span class=\"daga-tooltip\">Apply layout</span>\r\n    </button>\r\n    <button\r\n      *ngIf=\"enableFilter\"\r\n      class=\"daga-filter\"\r\n      [class]=\"filterOn ? 'daga-on' : 'daga-off'\"\r\n      (click)=\"filter()\"\r\n    >\r\n      <span class=\"daga-tooltip\">Apply filter</span>\r\n    </button>\r\n  </div>\r\n  <button class=\"daga-more-options\" (click)=\"toggleCollapse()\">\r\n    <span *ngIf=\"!collapsed\" class=\"daga-tooltip\">Less options</span>\r\n    <span *ngIf=\"collapsed\" class=\"daga-tooltip\">More options</span>\r\n  </button>\r\n</div>\r\n" }]
         }], ctorParameters: () => [{ type: CanvasProviderService }], propDecorators: { collapsableButtons: [{
                 type: ViewChild,
                 args: ['collapsableButtons']
@@ -9247,7 +9245,9 @@ class ErrorsComponent {
             .subscribe();
     }
     selectPanel() {
-        return d3.select(this.errorsContainer.nativeElement).select('.error-panel');
+        return d3
+            .select(this.errorsContainer.nativeElement)
+            .select('.daga-error-panel');
     }
     validate() {
         this.errors = [];
@@ -9257,23 +9257,39 @@ class ErrorsComponent {
         }
     }
     showError(error) {
-        if (error.elementId && error.propertyNames) {
+        if (error.elementId &&
+            (error.propertyNames === undefined || error.propertyNames.length === 0)) {
+            const element = this.canvas.model.nodes.get(error.elementId) ||
+                this.canvas.model.connections.get(error.elementId);
+            if (element) {
+                this.canvas.highlight(element);
+            }
+        }
+        else if (error.elementId &&
+            error.propertyNames !== undefined &&
+            error.propertyNames.length > 0) {
             this.canvas.setPropertyEditorSelection(this.canvas.model.nodes.get(error.elementId) ||
                 this.canvas.model.connections.get(error.elementId));
+            const element = this.canvas.model.nodes.get(error.elementId) ||
+                this.canvas.model.connections.get(error.elementId);
+            if (element) {
+                this.canvas.highlight(element);
+            }
             this.canvas.parentComponent.propertyEditor?.highlightProperty(...error.propertyNames);
         }
-        else if (!error.elementId && error.propertyNames) {
+        else if (!error.elementId &&
+            error.propertyNames !== undefined &&
+            error.propertyNames.length > 0) {
             this.canvas.setPropertyEditorSelection();
             this.canvas.parentComponent.propertyEditor?.highlightProperty(...error.propertyNames);
         }
-        // TODO: IF ERROR IS IN AN ELEMENT BUT NOT IN A SPECIFIC PROPERTY, WE COULD HIGHLIGHT THE ELEMENT
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: ErrorsComponent, deps: [{ token: CanvasProviderService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.2", type: ErrorsComponent, isStandalone: true, selector: "daga-errors", viewQueries: [{ propertyName: "errorsContainer", first: true, predicate: ["errors"], descendants: true }], ngImport: i0, template: "<div #errorsContainer class=\"errors\">\n  <div\n    *ngIf=\"errors.length === 0\"\n    class=\"errors-summary no-errors prevent-user-select\"\n  >\n    <span>No errors found</span>\n  </div>\n  <div\n    *ngIf=\"errors.length > 0\"\n    class=\"errors-summary with-errors prevent-user-select\"\n  >\n    <span>{{ errors.length }} errors found</span>\n    <div class=\"collapse-button-container\">\n      <daga-collapse-button\n        [collapsableSelector]=\"errorsContainer\"\n        [collapsableAdditionalSelector]=\"'.error-panel'\"\n        [direction]=\"Side.Top\"\n        [rule]=\"'display'\"\n        [collapsedValue]=\"'none'\"\n        [visibleValue]=\"'block'\"\n      />\n    </div>\n  </div>\n  <div *ngIf=\"errors.length > 0\" class=\"error-panel\">\n    <ol>\n      <li\n        *ngFor=\"let error of errors; index as i\"\n        (click)=\"showError(error)\"\n        [innerHTML]=\"error.message\"\n      ></li>\n    </ol>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CollapseButtonComponent, selector: "daga-collapse-button", inputs: ["collapsableSelector", "collapsableAdditionalSelector", "collapsed", "disabled", "direction", "rule", "collapsedValue", "visibleValue"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.2", type: ErrorsComponent, isStandalone: true, selector: "daga-errors", viewQueries: [{ propertyName: "errorsContainer", first: true, predicate: ["errors"], descendants: true }], ngImport: i0, template: "<div #errorsContainer class=\"daga-errors\">\r\n  <div\r\n    *ngIf=\"errors.length === 0\"\r\n    class=\"daga-errors-summary daga-no-errors daga-prevent-user-select\"\r\n  >\r\n    <span>No errors found</span>\r\n  </div>\r\n  <div\r\n    *ngIf=\"errors.length > 0\"\r\n    class=\"daga-errors-summary daga-with-errors daga-prevent-user-select\"\r\n  >\r\n    <span>{{ errors.length }} errors found</span>\r\n    <div class=\"daga-collapse-button-container\">\r\n      <daga-collapse-button\r\n        [collapsableSelector]=\"errorsContainer\"\r\n        [collapsableAdditionalSelector]=\"'.daga-error-panel'\"\r\n        [direction]=\"Side.Top\"\r\n        [rule]=\"'display'\"\r\n        [collapsedValue]=\"'none'\"\r\n        [visibleValue]=\"'block'\"\r\n      />\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"errors.length > 0\" class=\"daga-error-panel\">\r\n    <ol>\r\n      <li\r\n        *ngFor=\"let error of errors; index as i\"\r\n        (click)=\"showError(error)\"\r\n        [innerHTML]=\"error.message\"\r\n      ></li>\r\n    </ol>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CollapseButtonComponent, selector: "daga-collapse-button", inputs: ["collapsableSelector", "collapsableAdditionalSelector", "collapsed", "disabled", "direction", "rule", "collapsedValue", "visibleValue"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: ErrorsComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'daga-errors', imports: [CommonModule, CollapseButtonComponent], template: "<div #errorsContainer class=\"errors\">\n  <div\n    *ngIf=\"errors.length === 0\"\n    class=\"errors-summary no-errors prevent-user-select\"\n  >\n    <span>No errors found</span>\n  </div>\n  <div\n    *ngIf=\"errors.length > 0\"\n    class=\"errors-summary with-errors prevent-user-select\"\n  >\n    <span>{{ errors.length }} errors found</span>\n    <div class=\"collapse-button-container\">\n      <daga-collapse-button\n        [collapsableSelector]=\"errorsContainer\"\n        [collapsableAdditionalSelector]=\"'.error-panel'\"\n        [direction]=\"Side.Top\"\n        [rule]=\"'display'\"\n        [collapsedValue]=\"'none'\"\n        [visibleValue]=\"'block'\"\n      />\n    </div>\n  </div>\n  <div *ngIf=\"errors.length > 0\" class=\"error-panel\">\n    <ol>\n      <li\n        *ngFor=\"let error of errors; index as i\"\n        (click)=\"showError(error)\"\n        [innerHTML]=\"error.message\"\n      ></li>\n    </ol>\n  </div>\n</div>\n" }]
+            args: [{ standalone: true, selector: 'daga-errors', imports: [CommonModule, CollapseButtonComponent], template: "<div #errorsContainer class=\"daga-errors\">\r\n  <div\r\n    *ngIf=\"errors.length === 0\"\r\n    class=\"daga-errors-summary daga-no-errors daga-prevent-user-select\"\r\n  >\r\n    <span>No errors found</span>\r\n  </div>\r\n  <div\r\n    *ngIf=\"errors.length > 0\"\r\n    class=\"daga-errors-summary daga-with-errors daga-prevent-user-select\"\r\n  >\r\n    <span>{{ errors.length }} errors found</span>\r\n    <div class=\"daga-collapse-button-container\">\r\n      <daga-collapse-button\r\n        [collapsableSelector]=\"errorsContainer\"\r\n        [collapsableAdditionalSelector]=\"'.daga-error-panel'\"\r\n        [direction]=\"Side.Top\"\r\n        [rule]=\"'display'\"\r\n        [collapsedValue]=\"'none'\"\r\n        [visibleValue]=\"'block'\"\r\n      />\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"errors.length > 0\" class=\"daga-error-panel\">\r\n    <ol>\r\n      <li\r\n        *ngFor=\"let error of errors; index as i\"\r\n        (click)=\"showError(error)\"\r\n        [innerHTML]=\"error.message\"\r\n      ></li>\r\n    </ol>\r\n  </div>\r\n</div>\r\n" }]
         }], ctorParameters: () => [{ type: CanvasProviderService }], propDecorators: { errorsContainer: [{
                 type: ViewChild,
                 args: ['errors']
@@ -9331,7 +9347,7 @@ class PaletteComponent {
         return d3.select(this.panel.nativeElement);
     }
     selectPalette() {
-        return this.selectPanel().select('.palette-view');
+        return this.selectPanel().select('.daga-palette-view');
     }
     appendCategories(categories) {
         const thisComponent = this.selectPalette()
@@ -9352,14 +9368,14 @@ class PaletteComponent {
         thisComponent.on(Events.Change, () => {
             if (this.currentCategory) {
                 this.selectPalette()
-                    .selectAll(`.template-container.in-category`)
+                    .selectAll(`.daga-template-container.daga-in-category`)
                     .remove();
             }
             const selectedKey = thisComponent.property('value');
             this.currentCategory = selectedKey;
             const templatesInCategory = categories[selectedKey] || [];
             for (const template of templatesInCategory) {
-                this.appendTemplate(template, 'in-category');
+                this.appendTemplate(template, 'daga-in-category');
             }
         });
         if (this.currentCategory) {
@@ -9397,7 +9413,7 @@ class PaletteComponent {
         }
         const thisComponent = this.selectPalette()
             .append('div')
-            .attr('class', `template-container ${classes !== undefined ? classes : ''}`)
+            .attr('class', `daga-template-container ${classes !== undefined ? classes : ''}`)
             .style('width', `${type.defaultWidth}px`)
             .style('height', `${type.defaultHeight}px`)
             .call(d3
@@ -9612,7 +9628,7 @@ class PaletteComponent {
     appendConnectionTemplate(type, templateConfig, classes) {
         const thisComponent = this.selectPalette()
             .append('div')
-            .attr('class', `template-container ${classes !== undefined ? classes : ''}`)
+            .attr('class', `daga-template-container ${classes !== undefined ? classes : ''}`)
             .style('width', `${templateConfig.width}px`)
             .style('height', `${templateConfig.height}px`)
             .append('svg')
@@ -9658,11 +9674,11 @@ class PaletteComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: PaletteComponent, deps: [{ token: CanvasProviderService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.2", type: PaletteComponent, isStandalone: true, selector: "daga-palette", inputs: { palettes: "palettes", currentPalette: "currentPalette", currentCategory: "currentCategory", location: "location", direction: "direction", width: "width" }, viewQueries: [{ propertyName: "panel", first: true, predicate: ["panel"], descendants: true }], ngImport: i0, template: "<div #panel class=\"panel {{ location }} {{ direction }}\">\n  <daga-collapse-button\n    #collapseButton\n    [direction]=\"direction\"\n    [collapsableSelector]=\"panel\"\n    collapsableAdditionalSelector=\".panel-content\"\n    rule=\"display\"\n    collapsedValue=\"none\"\n    visibleValue=\"block\"\n  />\n  <div class=\"panel-content\">\n    <div *ngIf=\"palettes.length > 1\" class=\"panel-tabs\">\n      <div\n        *ngFor=\"let palette of palettes\"\n        class=\"panel-tab\"\n        [class]=\"palette === currentPalette ? 'current-tab' : ''\"\n        (click)=\"switchPalette(palette)\"\n      >\n        {{ palette.name }}\n      </div>\n    </div>\n    <div class=\"palette-view\"></div>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CollapseButtonComponent, selector: "daga-collapse-button", inputs: ["collapsableSelector", "collapsableAdditionalSelector", "collapsed", "disabled", "direction", "rule", "collapsedValue", "visibleValue"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.2", type: PaletteComponent, isStandalone: true, selector: "daga-palette", inputs: { palettes: "palettes", currentPalette: "currentPalette", currentCategory: "currentCategory", location: "location", direction: "direction", width: "width" }, viewQueries: [{ propertyName: "panel", first: true, predicate: ["panel"], descendants: true }], ngImport: i0, template: "<div #panel class=\"daga-panel daga-{{ location }} daga-{{ direction }}\">\r\n  <daga-collapse-button\r\n    #collapseButton\r\n    [direction]=\"direction\"\r\n    [collapsableSelector]=\"panel\"\r\n    collapsableAdditionalSelector=\".daga-panel-content\"\r\n    rule=\"display\"\r\n    collapsedValue=\"none\"\r\n    visibleValue=\"block\"\r\n  />\r\n  <div class=\"daga-panel-content\">\r\n    <div *ngIf=\"palettes.length > 1\" class=\"daga-panel-tabs\">\r\n      <div\r\n        *ngFor=\"let palette of palettes\"\r\n        class=\"daga-panel-tab\"\r\n        [class]=\"palette === currentPalette ? 'daga-current-tab' : ''\"\r\n        (click)=\"switchPalette(palette)\"\r\n      >\r\n        {{ palette.name }}\r\n      </div>\r\n    </div>\r\n    <div class=\"daga-palette-view\"></div>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CollapseButtonComponent, selector: "daga-collapse-button", inputs: ["collapsableSelector", "collapsableAdditionalSelector", "collapsed", "disabled", "direction", "rule", "collapsedValue", "visibleValue"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: PaletteComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'daga-palette', imports: [CommonModule, CollapseButtonComponent], template: "<div #panel class=\"panel {{ location }} {{ direction }}\">\n  <daga-collapse-button\n    #collapseButton\n    [direction]=\"direction\"\n    [collapsableSelector]=\"panel\"\n    collapsableAdditionalSelector=\".panel-content\"\n    rule=\"display\"\n    collapsedValue=\"none\"\n    visibleValue=\"block\"\n  />\n  <div class=\"panel-content\">\n    <div *ngIf=\"palettes.length > 1\" class=\"panel-tabs\">\n      <div\n        *ngFor=\"let palette of palettes\"\n        class=\"panel-tab\"\n        [class]=\"palette === currentPalette ? 'current-tab' : ''\"\n        (click)=\"switchPalette(palette)\"\n      >\n        {{ palette.name }}\n      </div>\n    </div>\n    <div class=\"palette-view\"></div>\n  </div>\n</div>\n" }]
+            args: [{ standalone: true, selector: 'daga-palette', imports: [CommonModule, CollapseButtonComponent], template: "<div #panel class=\"daga-panel daga-{{ location }} daga-{{ direction }}\">\r\n  <daga-collapse-button\r\n    #collapseButton\r\n    [direction]=\"direction\"\r\n    [collapsableSelector]=\"panel\"\r\n    collapsableAdditionalSelector=\".daga-panel-content\"\r\n    rule=\"display\"\r\n    collapsedValue=\"none\"\r\n    visibleValue=\"block\"\r\n  />\r\n  <div class=\"daga-panel-content\">\r\n    <div *ngIf=\"palettes.length > 1\" class=\"daga-panel-tabs\">\r\n      <div\r\n        *ngFor=\"let palette of palettes\"\r\n        class=\"daga-panel-tab\"\r\n        [class]=\"palette === currentPalette ? 'daga-current-tab' : ''\"\r\n        (click)=\"switchPalette(palette)\"\r\n      >\r\n        {{ palette.name }}\r\n      </div>\r\n    </div>\r\n    <div class=\"daga-palette-view\"></div>\r\n  </div>\r\n</div>\r\n" }]
         }], ctorParameters: () => [{ type: CanvasProviderService }], propDecorators: { panel: [{
                 type: ViewChild,
                 args: ['panel']
@@ -9721,8 +9737,8 @@ class PropertySettingsComponent {
             let closestDropbarIndex = 0;
             const propertyElement = d3
                 .select(this.element.nativeElement)
-                .select(`.property.${getStyleClassName(property.name)}.depth-${this.depth}`);
-            propertyElement.select('button.move-button').call(d3
+                .select(`.daga-property.${getStyleClassName(property.name)}.daga-depth-${this.depth}`);
+            propertyElement.select('button.daga-move-button').call(d3
                 .drag()
                 .on(DragEvents.Start, (event) => {
                 cursorStyle(CursorStyle.Grabbing);
@@ -9761,12 +9777,12 @@ class PropertySettingsComponent {
                     .style('height', `${propertyElementHeight}px`)
                     .style('z-index', 1);
                 d3.select(this.element.nativeElement)
-                    .select(`.dropbar.index-${closestDropbarIndex}.depth-${this.depth}`)
+                    .select(`.daga-dropbar.daga-index-${closestDropbarIndex}.daga-depth-${this.depth}`)
                     .style('visibility', 'hidden')
                     .style('height', 0);
                 closestDropbarIndex = this.getClosestDropbarIndex(pointerCoords);
                 d3.select(this.element.nativeElement)
-                    .select(`.dropbar.index-${closestDropbarIndex}.depth-${this.depth}`)
+                    .select(`.daga-dropbar.daga-index-${closestDropbarIndex}.daga-depth-${this.depth}`)
                     .style('visibility', 'visible')
                     .style('height', '0.25rem');
             })
@@ -9780,7 +9796,7 @@ class PropertySettingsComponent {
                     .style('width', 'unset')
                     .style('height', 'unset');
                 d3.select(this.element.nativeElement)
-                    .select(`.dropbar.index-${closestDropbarIndex}.depth-${this.depth}`)
+                    .select(`.daga-dropbar.daga-index-${closestDropbarIndex}.daga-depth-${this.depth}`)
                     .style('visibility', 'hidden')
                     .style('height', 0);
                 const pointerCoords = this.canvas.getPointerLocationRelativeToScreen(event);
@@ -9802,7 +9818,7 @@ class PropertySettingsComponent {
         for (let i = 0; i <= propertyList.length; ++i) {
             const boundingRect = d3
                 .select(this.element.nativeElement)
-                .select(`.dropbar.index-${i}.depth-${this.depth}`)
+                .select(`.daga-dropbar.daga-index-${i}.daga-depth-${this.depth}`)
                 .node()
                 ?.getBoundingClientRect();
             if (boundingRect) {
@@ -9860,11 +9876,11 @@ class PropertySettingsComponent {
         this.addListeners();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: PropertySettingsComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: CanvasProviderService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.2", type: PropertySettingsComponent, isStandalone: true, selector: "daga-property-settings", inputs: { valueSet: "valueSet", depth: "depth" }, ngImport: i0, template: "<div class=\"dropbar\" [class]=\"'index-' + 0 + ' depth-' + depth\"></div>\r\n<div\r\n  *ngFor=\"let property of valueSet?.displayedProperties || []; index as i\"\r\n  class=\"property-and-dropbar\"\r\n  [class]=\"getStyleClassName(property.name) + ' depth-' + depth\"\r\n>\r\n  <div\r\n    class=\"property\"\r\n    [class]=\"getStyleClassName(property.name) + ' depth-' + depth\"\r\n  >\r\n    <div class=\"property-name\">\r\n      <span>{{ property.name }}</span>\r\n      <div class=\"buttons\">\r\n        <button class=\"property-button move-button\">\r\n          <div class=\"icon move-icon\"></div>\r\n        </button>\r\n        <button\r\n          class=\"property-button hide-button\"\r\n          (click)=\"hideProperty(property.name)\"\r\n        >\r\n          <div class=\"icon hide-icon\"></div>\r\n        </button>\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"property.type !== Type.Object\" class=\"property-value\">\r\n      {{ asString(valueSet?.getValue(property.name)) }}\r\n    </div>\r\n    <div *ngIf=\"property.type === Type.Object\">\r\n      <daga-property-settings\r\n        [valueSet]=\"valueSet?.getSubValueSet(property.name)\"\r\n        [depth]=\"depth + 1\"\r\n      ></daga-property-settings>\r\n    </div>\r\n  </div>\r\n  <div class=\"dropbar\" [class]=\"'index-' + (i + 1) + ' depth-' + depth\"></div>\r\n</div>\r\n<div class=\"property\" *ngIf=\"valueSet && valueSet.hiddenProperties.length > 0\">\r\n  <p class=\"property-name\">Add property:</p>\r\n  <select (change)=\"displayProperty($event)\">\r\n    <option value=\"\">Select a property</option>\r\n    <option\r\n      *ngFor=\"let property of valueSet?.hiddenProperties || []\"\r\n      [value]=\"property.name\"\r\n    >\r\n      {{ property.name }}\r\n    </option>\r\n  </select>\r\n</div>\r\n", dependencies: [{ kind: "component", type: PropertySettingsComponent, selector: "daga-property-settings", inputs: ["valueSet", "depth"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.2", type: PropertySettingsComponent, isStandalone: true, selector: "daga-property-settings", inputs: { valueSet: "valueSet", depth: "depth" }, ngImport: i0, template: "<div\r\n  class=\"daga-dropbar\"\r\n  [class]=\"'daga-index-' + 0 + ' daga-depth-' + depth\"\r\n></div>\r\n<div\r\n  *ngFor=\"let property of valueSet?.displayedProperties || []; index as i\"\r\n  class=\"daga-property-and-dropbar\"\r\n  [class]=\"getStyleClassName(property.name) + ' daga-depth-' + depth\"\r\n>\r\n  <div\r\n    class=\"daga-property\"\r\n    [class]=\"getStyleClassName(property.name) + ' daga-depth-' + depth\"\r\n  >\r\n    <div class=\"daga-property-name\">\r\n      <span>{{ property.name }}</span>\r\n      <div class=\"daga-buttons\">\r\n        <button class=\"daga-property-button daga-move-button\">\r\n          <div class=\"daga-icon daga-move-icon\"></div>\r\n        </button>\r\n        <button\r\n          class=\"daga-property-button daga-hide-button\"\r\n          (click)=\"hideProperty(property.name)\"\r\n        >\r\n          <div class=\"daga-icon daga-hide-icon\"></div>\r\n        </button>\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"property.type !== Type.Object\" class=\"daga-property-value\">\r\n      {{ asString(valueSet?.getValue(property.name)) }}\r\n    </div>\r\n    <div *ngIf=\"property.type === Type.Object\">\r\n      <daga-property-settings\r\n        [valueSet]=\"valueSet?.getSubValueSet(property.name)\"\r\n        [depth]=\"depth + 1\"\r\n      ></daga-property-settings>\r\n    </div>\r\n  </div>\r\n  <div\r\n    class=\"daga-dropbar\"\r\n    [class]=\"'daga-index-' + (i + 1) + ' daga-depth-' + depth\"\r\n  ></div>\r\n</div>\r\n<div\r\n  class=\"daga-property\"\r\n  *ngIf=\"valueSet && valueSet.hiddenProperties.length > 0\"\r\n>\r\n  <p class=\"daga-property-name\">Add property:</p>\r\n  <select (change)=\"displayProperty($event)\">\r\n    <option value=\"\">Select a property</option>\r\n    <option\r\n      *ngFor=\"let property of valueSet?.hiddenProperties || []\"\r\n      [value]=\"property.name\"\r\n    >\r\n      {{ property.name }}\r\n    </option>\r\n  </select>\r\n</div>\r\n", dependencies: [{ kind: "component", type: PropertySettingsComponent, selector: "daga-property-settings", inputs: ["valueSet", "depth"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: PropertySettingsComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'daga-property-settings', imports: [CommonModule, FormsModule], template: "<div class=\"dropbar\" [class]=\"'index-' + 0 + ' depth-' + depth\"></div>\r\n<div\r\n  *ngFor=\"let property of valueSet?.displayedProperties || []; index as i\"\r\n  class=\"property-and-dropbar\"\r\n  [class]=\"getStyleClassName(property.name) + ' depth-' + depth\"\r\n>\r\n  <div\r\n    class=\"property\"\r\n    [class]=\"getStyleClassName(property.name) + ' depth-' + depth\"\r\n  >\r\n    <div class=\"property-name\">\r\n      <span>{{ property.name }}</span>\r\n      <div class=\"buttons\">\r\n        <button class=\"property-button move-button\">\r\n          <div class=\"icon move-icon\"></div>\r\n        </button>\r\n        <button\r\n          class=\"property-button hide-button\"\r\n          (click)=\"hideProperty(property.name)\"\r\n        >\r\n          <div class=\"icon hide-icon\"></div>\r\n        </button>\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"property.type !== Type.Object\" class=\"property-value\">\r\n      {{ asString(valueSet?.getValue(property.name)) }}\r\n    </div>\r\n    <div *ngIf=\"property.type === Type.Object\">\r\n      <daga-property-settings\r\n        [valueSet]=\"valueSet?.getSubValueSet(property.name)\"\r\n        [depth]=\"depth + 1\"\r\n      ></daga-property-settings>\r\n    </div>\r\n  </div>\r\n  <div class=\"dropbar\" [class]=\"'index-' + (i + 1) + ' depth-' + depth\"></div>\r\n</div>\r\n<div class=\"property\" *ngIf=\"valueSet && valueSet.hiddenProperties.length > 0\">\r\n  <p class=\"property-name\">Add property:</p>\r\n  <select (change)=\"displayProperty($event)\">\r\n    <option value=\"\">Select a property</option>\r\n    <option\r\n      *ngFor=\"let property of valueSet?.hiddenProperties || []\"\r\n      [value]=\"property.name\"\r\n    >\r\n      {{ property.name }}\r\n    </option>\r\n  </select>\r\n</div>\r\n" }]
+            args: [{ standalone: true, selector: 'daga-property-settings', imports: [CommonModule, FormsModule], template: "<div\r\n  class=\"daga-dropbar\"\r\n  [class]=\"'daga-index-' + 0 + ' daga-depth-' + depth\"\r\n></div>\r\n<div\r\n  *ngFor=\"let property of valueSet?.displayedProperties || []; index as i\"\r\n  class=\"daga-property-and-dropbar\"\r\n  [class]=\"getStyleClassName(property.name) + ' daga-depth-' + depth\"\r\n>\r\n  <div\r\n    class=\"daga-property\"\r\n    [class]=\"getStyleClassName(property.name) + ' daga-depth-' + depth\"\r\n  >\r\n    <div class=\"daga-property-name\">\r\n      <span>{{ property.name }}</span>\r\n      <div class=\"daga-buttons\">\r\n        <button class=\"daga-property-button daga-move-button\">\r\n          <div class=\"daga-icon daga-move-icon\"></div>\r\n        </button>\r\n        <button\r\n          class=\"daga-property-button daga-hide-button\"\r\n          (click)=\"hideProperty(property.name)\"\r\n        >\r\n          <div class=\"daga-icon daga-hide-icon\"></div>\r\n        </button>\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"property.type !== Type.Object\" class=\"daga-property-value\">\r\n      {{ asString(valueSet?.getValue(property.name)) }}\r\n    </div>\r\n    <div *ngIf=\"property.type === Type.Object\">\r\n      <daga-property-settings\r\n        [valueSet]=\"valueSet?.getSubValueSet(property.name)\"\r\n        [depth]=\"depth + 1\"\r\n      ></daga-property-settings>\r\n    </div>\r\n  </div>\r\n  <div\r\n    class=\"daga-dropbar\"\r\n    [class]=\"'daga-index-' + (i + 1) + ' daga-depth-' + depth\"\r\n  ></div>\r\n</div>\r\n<div\r\n  class=\"daga-property\"\r\n  *ngIf=\"valueSet && valueSet.hiddenProperties.length > 0\"\r\n>\r\n  <p class=\"daga-property-name\">Add property:</p>\r\n  <select (change)=\"displayProperty($event)\">\r\n    <option value=\"\">Select a property</option>\r\n    <option\r\n      *ngFor=\"let property of valueSet?.hiddenProperties || []\"\r\n      [value]=\"property.name\"\r\n    >\r\n      {{ property.name }}\r\n    </option>\r\n  </select>\r\n</div>\r\n" }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: CanvasProviderService }], propDecorators: { valueSet: [{
                 type: Input
             }], depth: [{
@@ -10050,11 +10066,11 @@ class AutocompleteComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: AutocompleteComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.2", type: AutocompleteComponent, isStandalone: true, selector: "daga-autocomplete", inputs: { value: "value", valueInput: "valueInput", options: "options", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "mainElement", first: true, predicate: ["main"], descendants: true, static: true }], ngImport: i0, template: "<div\r\n  #main\r\n  class=\"autocomplete\"\r\n  [class]=\"showOptions ? 'showing-options' : ''\"\r\n  (blur)=\"closeOptions()\"\r\n>\r\n  <div class=\"autocomplete-input\">\r\n    <input\r\n      [(ngModel)]=\"valueInput\"\r\n      [disabled]=\"disabled\"\r\n      (keyup)=\"onKeyup($event)\"\r\n      (focus)=\"openOptions()\"\r\n      (blur)=\"onLostFocus()\"\r\n    />\r\n    <button\r\n      *ngIf=\"valueInput !== ''\"\r\n      class=\"clear\"\r\n      (click)=\"clearInput()\"\r\n    ></button>\r\n  </div>\r\n  <div class=\"autocomplete-options\">\r\n    <ul class=\"autocomplete-option-list\">\r\n      <li\r\n        *ngIf=\"(currentOptions?.length || 0) === 0\"\r\n        class=\"autocomplete-option no-options\"\r\n      >\r\n        (No options)\r\n      </li>\r\n      <li\r\n        *ngFor=\"let option of currentOptions; let index = index\"\r\n        class=\"autocomplete-option\"\r\n        [class]=\"index === focusIndex ? 'focused' : ''\"\r\n        (mousemove)=\"focusOnOption(index)\"\r\n        (click)=\"complete(option)\"\r\n      >\r\n        <span>{{ currentLabelStarts[index] }}</span>\r\n        <span class=\"match\">{{ currentLabelMatches[index] }}</span>\r\n        <span>{{ currentLabelEnds[index] }}</span>\r\n      </li>\r\n    </ul>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.2", type: AutocompleteComponent, isStandalone: true, selector: "daga-autocomplete", inputs: { value: "value", valueInput: "valueInput", options: "options", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "mainElement", first: true, predicate: ["main"], descendants: true, static: true }], ngImport: i0, template: "<div\r\n  #main\r\n  class=\"daga-autocomplete\"\r\n  [class]=\"showOptions ? 'daga-showing-options' : ''\"\r\n  (blur)=\"closeOptions()\"\r\n>\r\n  <div class=\"daga-autocomplete-input\">\r\n    <input\r\n      [(ngModel)]=\"valueInput\"\r\n      [disabled]=\"disabled\"\r\n      (keyup)=\"onKeyup($event)\"\r\n      (focus)=\"openOptions()\"\r\n      (blur)=\"onLostFocus()\"\r\n    />\r\n    <button\r\n      *ngIf=\"valueInput !== ''\"\r\n      class=\"daga-clear\"\r\n      (click)=\"clearInput()\"\r\n    ></button>\r\n  </div>\r\n  <div class=\"daga-autocomplete-options\">\r\n    <ul class=\"daga-autocomplete-option-list\">\r\n      <li\r\n        *ngIf=\"(currentOptions?.length || 0) === 0\"\r\n        class=\"daga-autocomplete-option no-options\"\r\n      >\r\n        (No options)\r\n      </li>\r\n      <li\r\n        *ngFor=\"let option of currentOptions; let index = index\"\r\n        class=\"daga-autocomplete-option\"\r\n        [class]=\"index === focusIndex ? 'daga-focused' : ''\"\r\n        (mousemove)=\"focusOnOption(index)\"\r\n        (click)=\"complete(option)\"\r\n      >\r\n        <span>{{ currentLabelStarts[index] }}</span>\r\n        <span class=\"daga-match\">{{ currentLabelMatches[index] }}</span>\r\n        <span>{{ currentLabelEnds[index] }}</span>\r\n      </li>\r\n    </ul>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: AutocompleteComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'daga-autocomplete', imports: [CommonModule, FormsModule], template: "<div\r\n  #main\r\n  class=\"autocomplete\"\r\n  [class]=\"showOptions ? 'showing-options' : ''\"\r\n  (blur)=\"closeOptions()\"\r\n>\r\n  <div class=\"autocomplete-input\">\r\n    <input\r\n      [(ngModel)]=\"valueInput\"\r\n      [disabled]=\"disabled\"\r\n      (keyup)=\"onKeyup($event)\"\r\n      (focus)=\"openOptions()\"\r\n      (blur)=\"onLostFocus()\"\r\n    />\r\n    <button\r\n      *ngIf=\"valueInput !== ''\"\r\n      class=\"clear\"\r\n      (click)=\"clearInput()\"\r\n    ></button>\r\n  </div>\r\n  <div class=\"autocomplete-options\">\r\n    <ul class=\"autocomplete-option-list\">\r\n      <li\r\n        *ngIf=\"(currentOptions?.length || 0) === 0\"\r\n        class=\"autocomplete-option no-options\"\r\n      >\r\n        (No options)\r\n      </li>\r\n      <li\r\n        *ngFor=\"let option of currentOptions; let index = index\"\r\n        class=\"autocomplete-option\"\r\n        [class]=\"index === focusIndex ? 'focused' : ''\"\r\n        (mousemove)=\"focusOnOption(index)\"\r\n        (click)=\"complete(option)\"\r\n      >\r\n        <span>{{ currentLabelStarts[index] }}</span>\r\n        <span class=\"match\">{{ currentLabelMatches[index] }}</span>\r\n        <span>{{ currentLabelEnds[index] }}</span>\r\n      </li>\r\n    </ul>\r\n  </div>\r\n</div>\r\n" }]
+            args: [{ standalone: true, selector: 'daga-autocomplete', imports: [CommonModule, FormsModule], template: "<div\r\n  #main\r\n  class=\"daga-autocomplete\"\r\n  [class]=\"showOptions ? 'daga-showing-options' : ''\"\r\n  (blur)=\"closeOptions()\"\r\n>\r\n  <div class=\"daga-autocomplete-input\">\r\n    <input\r\n      [(ngModel)]=\"valueInput\"\r\n      [disabled]=\"disabled\"\r\n      (keyup)=\"onKeyup($event)\"\r\n      (focus)=\"openOptions()\"\r\n      (blur)=\"onLostFocus()\"\r\n    />\r\n    <button\r\n      *ngIf=\"valueInput !== ''\"\r\n      class=\"daga-clear\"\r\n      (click)=\"clearInput()\"\r\n    ></button>\r\n  </div>\r\n  <div class=\"daga-autocomplete-options\">\r\n    <ul class=\"daga-autocomplete-option-list\">\r\n      <li\r\n        *ngIf=\"(currentOptions?.length || 0) === 0\"\r\n        class=\"daga-autocomplete-option no-options\"\r\n      >\r\n        (No options)\r\n      </li>\r\n      <li\r\n        *ngFor=\"let option of currentOptions; let index = index\"\r\n        class=\"daga-autocomplete-option\"\r\n        [class]=\"index === focusIndex ? 'daga-focused' : ''\"\r\n        (mousemove)=\"focusOnOption(index)\"\r\n        (click)=\"complete(option)\"\r\n      >\r\n        <span>{{ currentLabelStarts[index] }}</span>\r\n        <span class=\"daga-match\">{{ currentLabelMatches[index] }}</span>\r\n        <span>{{ currentLabelEnds[index] }}</span>\r\n      </li>\r\n    </ul>\r\n  </div>\r\n</div>\r\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { mainElement: [{
                 type: ViewChild,
                 args: ['main', { static: true }]
@@ -10167,11 +10183,11 @@ class OptionListEditorComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: OptionListEditorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.2", type: OptionListEditorComponent, isStandalone: true, selector: "daga-option-list-editor", inputs: { value: "value", options: "options", valueInput: "valueInput", allowRepeats: "allowRepeats", optionsNotPresentInValue: "optionsNotPresentInValue", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div *ngFor=\"let item of value; let index = index\" class=\"value-item-element\">\r\n  <span class=\"input\">{{ labelsOfValue[index] }}</span>\r\n  <button\r\n    *ngIf=\"!disabled\"\r\n    class=\"property-button\"\r\n    (click)=\"removeFromValue(index)\"\r\n  >\r\n    <div class=\"icon close-icon\"></div>\r\n  </button>\r\n</div>\r\n<div *ngIf=\"!disabled\" class=\"value-item-input\">\r\n  <div class=\"input relatively-positioned\">\r\n    <daga-autocomplete\r\n      [disabled]=\"disabled\"\r\n      [options]=\"allowRepeats ? options || [] : optionsNotPresentInValue || []\"\r\n      [(value)]=\"valueInput\"\r\n    />\r\n  </div>\r\n  <button class=\"property-button\" (click)=\"addToValue()\">\r\n    <div class=\"icon add-icon\"></div>\r\n  </button>\r\n</div>\r\n", dependencies: [{ kind: "component", type: AutocompleteComponent, selector: "daga-autocomplete", inputs: ["value", "valueInput", "options", "disabled"], outputs: ["valueChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.2", type: OptionListEditorComponent, isStandalone: true, selector: "daga-option-list-editor", inputs: { value: "value", options: "options", valueInput: "valueInput", allowRepeats: "allowRepeats", optionsNotPresentInValue: "optionsNotPresentInValue", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div\r\n  *ngFor=\"let item of value; let index = index\"\r\n  class=\"daga-value-item-element\"\r\n>\r\n  <span class=\"daga-input\">{{ labelsOfValue[index] }}</span>\r\n  <button\r\n    *ngIf=\"!disabled\"\r\n    class=\"daga-property-button\"\r\n    (click)=\"removeFromValue(index)\"\r\n  >\r\n    <div class=\"daga-icon daga-close-icon\"></div>\r\n  </button>\r\n</div>\r\n<div *ngIf=\"!disabled\" class=\"daga-value-item-input\">\r\n  <div class=\"daga-input daga-relatively-positioned\">\r\n    <daga-autocomplete\r\n      [disabled]=\"disabled\"\r\n      [options]=\"allowRepeats ? options || [] : optionsNotPresentInValue || []\"\r\n      [(value)]=\"valueInput\"\r\n    />\r\n  </div>\r\n  <button class=\"daga-property-button\" (click)=\"addToValue()\">\r\n    <div class=\"daga-icon daga-add-icon\"></div>\r\n  </button>\r\n</div>\r\n", dependencies: [{ kind: "component", type: AutocompleteComponent, selector: "daga-autocomplete", inputs: ["value", "valueInput", "options", "disabled"], outputs: ["valueChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: OptionListEditorComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'daga-option-list-editor', imports: [AutocompleteComponent, CommonModule, FormsModule], template: "<div *ngFor=\"let item of value; let index = index\" class=\"value-item-element\">\r\n  <span class=\"input\">{{ labelsOfValue[index] }}</span>\r\n  <button\r\n    *ngIf=\"!disabled\"\r\n    class=\"property-button\"\r\n    (click)=\"removeFromValue(index)\"\r\n  >\r\n    <div class=\"icon close-icon\"></div>\r\n  </button>\r\n</div>\r\n<div *ngIf=\"!disabled\" class=\"value-item-input\">\r\n  <div class=\"input relatively-positioned\">\r\n    <daga-autocomplete\r\n      [disabled]=\"disabled\"\r\n      [options]=\"allowRepeats ? options || [] : optionsNotPresentInValue || []\"\r\n      [(value)]=\"valueInput\"\r\n    />\r\n  </div>\r\n  <button class=\"property-button\" (click)=\"addToValue()\">\r\n    <div class=\"icon add-icon\"></div>\r\n  </button>\r\n</div>\r\n" }]
+            args: [{ standalone: true, selector: 'daga-option-list-editor', imports: [AutocompleteComponent, CommonModule, FormsModule], template: "<div\r\n  *ngFor=\"let item of value; let index = index\"\r\n  class=\"daga-value-item-element\"\r\n>\r\n  <span class=\"daga-input\">{{ labelsOfValue[index] }}</span>\r\n  <button\r\n    *ngIf=\"!disabled\"\r\n    class=\"daga-property-button\"\r\n    (click)=\"removeFromValue(index)\"\r\n  >\r\n    <div class=\"daga-icon daga-close-icon\"></div>\r\n  </button>\r\n</div>\r\n<div *ngIf=\"!disabled\" class=\"daga-value-item-input\">\r\n  <div class=\"daga-input daga-relatively-positioned\">\r\n    <daga-autocomplete\r\n      [disabled]=\"disabled\"\r\n      [options]=\"allowRepeats ? options || [] : optionsNotPresentInValue || []\"\r\n      [(value)]=\"valueInput\"\r\n    />\r\n  </div>\r\n  <button class=\"daga-property-button\" (click)=\"addToValue()\">\r\n    <div class=\"daga-icon daga-add-icon\"></div>\r\n  </button>\r\n</div>\r\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { value: [{
                 type: Input
             }], options: [{
@@ -10262,11 +10278,11 @@ class TextListEditorComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: TextListEditorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.2", type: TextListEditorComponent, isStandalone: true, selector: "daga-text-list-editor", inputs: { value: "value", valueInput: "valueInput", allowRepeats: "allowRepeats", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div *ngFor=\"let item of value; let index = index\" class=\"value-item-element\">\r\n  <input\r\n    class=\"input\"\r\n    type=\"text\"\r\n    [disabled]=\"disabled\"\r\n    [value]=\"item\"\r\n    (focusout)=\"editFromValue(getValueFromEvent($event), index)\"\r\n  />\r\n  <button\r\n    *ngIf=\"!disabled\"\r\n    class=\"property-button\"\r\n    (click)=\"removeFromValue(index)\"\r\n  >\r\n    <div class=\"icon close-icon\"></div>\r\n  </button>\r\n</div>\r\n<div *ngIf=\"!disabled\" class=\"value-item-input\">\r\n  <div class=\"input relatively-positioned\">\r\n    <input type=\"text\" (keyup)=\"onKeyUp($event)\" [(ngModel)]=\"valueInput\" />\r\n    <button\r\n      *ngIf=\"valueInput !== ''\"\r\n      class=\"clear\"\r\n      (click)=\"clearInput()\"\r\n    ></button>\r\n  </div>\r\n  <button class=\"property-button\" (click)=\"addToValue()\">\r\n    <div class=\"icon add-icon\"></div>\r\n  </button>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.2", type: TextListEditorComponent, isStandalone: true, selector: "daga-text-list-editor", inputs: { value: "value", valueInput: "valueInput", allowRepeats: "allowRepeats", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div\r\n  *ngFor=\"let item of value; let index = index\"\r\n  class=\"daga-value-item-element\"\r\n>\r\n  <input\r\n    class=\"daga-input\"\r\n    type=\"text\"\r\n    [disabled]=\"disabled\"\r\n    [value]=\"item\"\r\n    (focusout)=\"editFromValue(getValueFromEvent($event), index)\"\r\n  />\r\n  <button\r\n    *ngIf=\"!disabled\"\r\n    class=\"daga-property-button\"\r\n    (click)=\"removeFromValue(index)\"\r\n  >\r\n    <div class=\"icon close-icon\"></div>\r\n  </button>\r\n</div>\r\n<div *ngIf=\"!disabled\" class=\"daga-value-item-input\">\r\n  <div class=\"daga-input daga-relatively-positioned\">\r\n    <input type=\"text\" (keyup)=\"onKeyUp($event)\" [(ngModel)]=\"valueInput\" />\r\n    <button\r\n      *ngIf=\"valueInput !== ''\"\r\n      class=\"daga-clear\"\r\n      (click)=\"clearInput()\"\r\n    ></button>\r\n  </div>\r\n  <button class=\"daga-property-button\" (click)=\"addToValue()\">\r\n    <div class=\"daga-icon daga-add-icon\"></div>\r\n  </button>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: TextListEditorComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'daga-text-list-editor', imports: [CommonModule, FormsModule], template: "<div *ngFor=\"let item of value; let index = index\" class=\"value-item-element\">\r\n  <input\r\n    class=\"input\"\r\n    type=\"text\"\r\n    [disabled]=\"disabled\"\r\n    [value]=\"item\"\r\n    (focusout)=\"editFromValue(getValueFromEvent($event), index)\"\r\n  />\r\n  <button\r\n    *ngIf=\"!disabled\"\r\n    class=\"property-button\"\r\n    (click)=\"removeFromValue(index)\"\r\n  >\r\n    <div class=\"icon close-icon\"></div>\r\n  </button>\r\n</div>\r\n<div *ngIf=\"!disabled\" class=\"value-item-input\">\r\n  <div class=\"input relatively-positioned\">\r\n    <input type=\"text\" (keyup)=\"onKeyUp($event)\" [(ngModel)]=\"valueInput\" />\r\n    <button\r\n      *ngIf=\"valueInput !== ''\"\r\n      class=\"clear\"\r\n      (click)=\"clearInput()\"\r\n    ></button>\r\n  </div>\r\n  <button class=\"property-button\" (click)=\"addToValue()\">\r\n    <div class=\"icon add-icon\"></div>\r\n  </button>\r\n</div>\r\n" }]
+            args: [{ standalone: true, selector: 'daga-text-list-editor', imports: [CommonModule, FormsModule], template: "<div\r\n  *ngFor=\"let item of value; let index = index\"\r\n  class=\"daga-value-item-element\"\r\n>\r\n  <input\r\n    class=\"daga-input\"\r\n    type=\"text\"\r\n    [disabled]=\"disabled\"\r\n    [value]=\"item\"\r\n    (focusout)=\"editFromValue(getValueFromEvent($event), index)\"\r\n  />\r\n  <button\r\n    *ngIf=\"!disabled\"\r\n    class=\"daga-property-button\"\r\n    (click)=\"removeFromValue(index)\"\r\n  >\r\n    <div class=\"icon close-icon\"></div>\r\n  </button>\r\n</div>\r\n<div *ngIf=\"!disabled\" class=\"daga-value-item-input\">\r\n  <div class=\"daga-input daga-relatively-positioned\">\r\n    <input type=\"text\" (keyup)=\"onKeyUp($event)\" [(ngModel)]=\"valueInput\" />\r\n    <button\r\n      *ngIf=\"valueInput !== ''\"\r\n      class=\"daga-clear\"\r\n      (click)=\"clearInput()\"\r\n    ></button>\r\n  </div>\r\n  <button class=\"daga-property-button\" (click)=\"addToValue()\">\r\n    <div class=\"daga-icon daga-add-icon\"></div>\r\n  </button>\r\n</div>\r\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { value: [{
                 type: Input
             }], valueInput: [{
@@ -10353,11 +10369,11 @@ class TextMapEditorComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: TextMapEditorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.2", type: TextMapEditorComponent, isStandalone: true, selector: "daga-text-map-editor", inputs: { value: "value", keyInput: "keyInput", valueInput: "valueInput", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div *ngFor=\"let item of value | keyvalue\" class=\"value-item-element\">\r\n  <input\r\n    class=\"input\"\r\n    type=\"text\"\r\n    [disabled]=\"disabled\"\r\n    [value]=\"item.key\"\r\n    (focusout)=\"editKey(item.key, getValueFromEvent($event))\"\r\n  />\r\n  <input\r\n    class=\"input\"\r\n    type=\"text\"\r\n    [disabled]=\"disabled\"\r\n    [value]=\"item.value\"\r\n    (focusout)=\"editValue(item.key, getValueFromEvent($event))\"\r\n  />\r\n  <button\r\n    *ngIf=\"!disabled\"\r\n    class=\"property-button\"\r\n    (click)=\"removeFromValue(item.key)\"\r\n  >\r\n    <div class=\"icon close-icon\"></div>\r\n  </button>\r\n</div>\r\n<div *ngIf=\"!disabled\" class=\"value-item-input\">\r\n  <div class=\"input relatively-positioned\">\r\n    <input type=\"text\" (keyup)=\"onKeyUp($event)\" [(ngModel)]=\"keyInput\" />\r\n    <button\r\n      *ngIf=\"keyInput !== ''\"\r\n      class=\"clear\"\r\n      (click)=\"clearKeyInput()\"\r\n    ></button>\r\n  </div>\r\n  <div class=\"input relatively-positioned\">\r\n    <input type=\"text\" (keyup)=\"onKeyUp($event)\" [(ngModel)]=\"valueInput\" />\r\n    <button\r\n      *ngIf=\"valueInput !== ''\"\r\n      class=\"clear\"\r\n      (click)=\"clearValueInput()\"\r\n    ></button>\r\n  </div>\r\n  <button class=\"property-button\" (click)=\"addToValue()\">\r\n    <div class=\"icon add-icon\"></div>\r\n  </button>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.2", type: TextMapEditorComponent, isStandalone: true, selector: "daga-text-map-editor", inputs: { value: "value", keyInput: "keyInput", valueInput: "valueInput", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div *ngFor=\"let item of value | keyvalue\" class=\"daga-value-item-element\">\r\n  <input\r\n    class=\"daga-input\"\r\n    type=\"text\"\r\n    [disabled]=\"disabled\"\r\n    [value]=\"item.key\"\r\n    (focusout)=\"editKey(item.key, getValueFromEvent($event))\"\r\n  />\r\n  <input\r\n    class=\"daga-input\"\r\n    type=\"text\"\r\n    [disabled]=\"disabled\"\r\n    [value]=\"item.value\"\r\n    (focusout)=\"editValue(item.key, getValueFromEvent($event))\"\r\n  />\r\n  <button\r\n    *ngIf=\"!disabled\"\r\n    class=\"daga-property-button\"\r\n    (click)=\"removeFromValue(item.key)\"\r\n  >\r\n    <div class=\"icon close-icon\"></div>\r\n  </button>\r\n</div>\r\n<div *ngIf=\"!disabled\" class=\"daga-value-item-input\">\r\n  <div class=\"daga-input daga-relatively-positioned\">\r\n    <input type=\"text\" (keyup)=\"onKeyUp($event)\" [(ngModel)]=\"keyInput\" />\r\n    <button\r\n      *ngIf=\"keyInput !== ''\"\r\n      class=\"daga-clear\"\r\n      (click)=\"clearKeyInput()\"\r\n    ></button>\r\n  </div>\r\n  <div class=\"daga-input daga-relatively-positioned\">\r\n    <input type=\"text\" (keyup)=\"onKeyUp($event)\" [(ngModel)]=\"valueInput\" />\r\n    <button\r\n      *ngIf=\"valueInput !== ''\"\r\n      class=\"daga-clear\"\r\n      (click)=\"clearValueInput()\"\r\n    ></button>\r\n  </div>\r\n  <button class=\"daga-property-button\" (click)=\"addToValue()\">\r\n    <div class=\"daga-icon daga-add-icon\"></div>\r\n  </button>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: TextMapEditorComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'daga-text-map-editor', imports: [CommonModule, FormsModule], template: "<div *ngFor=\"let item of value | keyvalue\" class=\"value-item-element\">\r\n  <input\r\n    class=\"input\"\r\n    type=\"text\"\r\n    [disabled]=\"disabled\"\r\n    [value]=\"item.key\"\r\n    (focusout)=\"editKey(item.key, getValueFromEvent($event))\"\r\n  />\r\n  <input\r\n    class=\"input\"\r\n    type=\"text\"\r\n    [disabled]=\"disabled\"\r\n    [value]=\"item.value\"\r\n    (focusout)=\"editValue(item.key, getValueFromEvent($event))\"\r\n  />\r\n  <button\r\n    *ngIf=\"!disabled\"\r\n    class=\"property-button\"\r\n    (click)=\"removeFromValue(item.key)\"\r\n  >\r\n    <div class=\"icon close-icon\"></div>\r\n  </button>\r\n</div>\r\n<div *ngIf=\"!disabled\" class=\"value-item-input\">\r\n  <div class=\"input relatively-positioned\">\r\n    <input type=\"text\" (keyup)=\"onKeyUp($event)\" [(ngModel)]=\"keyInput\" />\r\n    <button\r\n      *ngIf=\"keyInput !== ''\"\r\n      class=\"clear\"\r\n      (click)=\"clearKeyInput()\"\r\n    ></button>\r\n  </div>\r\n  <div class=\"input relatively-positioned\">\r\n    <input type=\"text\" (keyup)=\"onKeyUp($event)\" [(ngModel)]=\"valueInput\" />\r\n    <button\r\n      *ngIf=\"valueInput !== ''\"\r\n      class=\"clear\"\r\n      (click)=\"clearValueInput()\"\r\n    ></button>\r\n  </div>\r\n  <button class=\"property-button\" (click)=\"addToValue()\">\r\n    <div class=\"icon add-icon\"></div>\r\n  </button>\r\n</div>\r\n" }]
+            args: [{ standalone: true, selector: 'daga-text-map-editor', imports: [CommonModule, FormsModule], template: "<div *ngFor=\"let item of value | keyvalue\" class=\"daga-value-item-element\">\r\n  <input\r\n    class=\"daga-input\"\r\n    type=\"text\"\r\n    [disabled]=\"disabled\"\r\n    [value]=\"item.key\"\r\n    (focusout)=\"editKey(item.key, getValueFromEvent($event))\"\r\n  />\r\n  <input\r\n    class=\"daga-input\"\r\n    type=\"text\"\r\n    [disabled]=\"disabled\"\r\n    [value]=\"item.value\"\r\n    (focusout)=\"editValue(item.key, getValueFromEvent($event))\"\r\n  />\r\n  <button\r\n    *ngIf=\"!disabled\"\r\n    class=\"daga-property-button\"\r\n    (click)=\"removeFromValue(item.key)\"\r\n  >\r\n    <div class=\"icon close-icon\"></div>\r\n  </button>\r\n</div>\r\n<div *ngIf=\"!disabled\" class=\"daga-value-item-input\">\r\n  <div class=\"daga-input daga-relatively-positioned\">\r\n    <input type=\"text\" (keyup)=\"onKeyUp($event)\" [(ngModel)]=\"keyInput\" />\r\n    <button\r\n      *ngIf=\"keyInput !== ''\"\r\n      class=\"daga-clear\"\r\n      (click)=\"clearKeyInput()\"\r\n    ></button>\r\n  </div>\r\n  <div class=\"daga-input daga-relatively-positioned\">\r\n    <input type=\"text\" (keyup)=\"onKeyUp($event)\" [(ngModel)]=\"valueInput\" />\r\n    <button\r\n      *ngIf=\"valueInput !== ''\"\r\n      class=\"daga-clear\"\r\n      (click)=\"clearValueInput()\"\r\n    ></button>\r\n  </div>\r\n  <button class=\"daga-property-button\" (click)=\"addToValue()\">\r\n    <div class=\"daga-icon daga-add-icon\"></div>\r\n  </button>\r\n</div>\r\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { value: [{
                 type: Input
             }], keyInput: [{
@@ -10433,7 +10449,7 @@ class ObjectEditorComponent {
         return new Date(string);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: ObjectEditorComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CanvasProviderService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.2", type: ObjectEditorComponent, isStandalone: true, selector: "daga-object-editor", inputs: { valueSet: "valueSet", depth: "depth" }, ngImport: i0, template: "<div\r\n  *ngFor=\"let property of valueSet?.displayedProperties || []\"\r\n  class=\"property\"\r\n  [class]=\"getStyleClassName(property.name) + ' depth-' + depth\"\r\n>\r\n  <p class=\"property-name\">\r\n    {{ property.name }}\r\n  </p>\r\n\r\n  <input\r\n    *ngIf=\"property.type === Type.Text\"\r\n    type=\"text\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [ngModel]=\"valueSet?.getValue(property.name)\"\r\n    (ngModelChange)=\"setValue(property, $event)\"\r\n  />\r\n  <textarea\r\n    *ngIf=\"property.type === Type.TextArea\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [ngModel]=\"valueSet?.getValue(property.name)\"\r\n    (ngModelChange)=\"setValue(property, $event)\"\r\n  ></textarea>\r\n  <input\r\n    *ngIf=\"property.type === Type.Number\"\r\n    type=\"number\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [ngModel]=\"valueSet?.getValue(property.name)\"\r\n    (ngModelChange)=\"setValue(property, $event)\"\r\n  />\r\n  <input\r\n    *ngIf=\"property.type === Type.Color\"\r\n    type=\"text\"\r\n    pattern=\"#\\d{6}\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [ngModel]=\"valueSet?.getValue(property.name)\"\r\n    (ngModelChange)=\"setValue(property, $event)\"\r\n  />\r\n  <input\r\n    *ngIf=\"property.type === Type.Datetime\"\r\n    type=\"datetime-local\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [ngModel]=\"dateToLocalDatetimeString(valueSet?.getValue(property.name))\"\r\n    (ngModelChange)=\"setValue(property, localDatetimeStringToDate($event))\"\r\n  />\r\n  <input\r\n    *ngIf=\"property.type === Type.Date\"\r\n    type=\"date\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [ngModel]=\"valueSet?.getValue(property.name)\"\r\n    (ngModelChange)=\"setValue(property, $event)\"\r\n  />\r\n  <input\r\n    *ngIf=\"property.type === Type.Time\"\r\n    type=\"time\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [ngModel]=\"valueSet?.getValue(property.name)\"\r\n    (ngModelChange)=\"setValue(property, $event)\"\r\n  />\r\n  <input\r\n    *ngIf=\"property.type === Type.Url\"\r\n    type=\"url\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [ngModel]=\"valueSet?.getValue(property.name)\"\r\n    (ngModelChange)=\"setValue(property, $event)\"\r\n  />\r\n  <div class=\"radio\" *ngIf=\"property.type === Type.Boolean\">\r\n    <label class=\"radio-item radio-start\">\r\n      <input\r\n        type=\"radio\"\r\n        [disabled]=\"!property.editable || !userCanEdit\"\r\n        [name]=\"property.name\"\r\n        value=\"false\"\r\n        [checked]=\"valueSet?.getValue(property.name) === false\"\r\n        (change)=\"setValue(property, false)\"\r\n      />\r\n      No\r\n    </label>\r\n    <label class=\"radio-item radio-end\">\r\n      <input\r\n        type=\"radio\"\r\n        [disabled]=\"!property.editable || !userCanEdit\"\r\n        [name]=\"property.name\"\r\n        value=\"true\"\r\n        [checked]=\"valueSet?.getValue(property.name) === true\"\r\n        (change)=\"setValue(property, true)\"\r\n      />\r\n      Yes\r\n    </label>\r\n  </div>\r\n  <div class=\"relatively-positioned\" *ngIf=\"property.type === Type.Option\">\r\n    <daga-autocomplete\r\n      [disabled]=\"!property.editable || !userCanEdit\"\r\n      [options]=\"property.options || []\"\r\n      [value]=\"valueSet?.getValue(property.name)\"\r\n      (valueChange)=\"setValue(property, $event)\"\r\n    />\r\n  </div>\r\n  <daga-option-list-editor\r\n    *ngIf=\"\r\n      property.type === Type.OptionList || property.type === Type.OptionSet\r\n    \"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [allowRepeats]=\"property.type === Type.OptionList\"\r\n    [options]=\"property.options || []\"\r\n    [value]=\"valueSet?.getValue(property.name)\"\r\n    (valueChange)=\"setValue(property, $event)\"\r\n  ></daga-option-list-editor>\r\n  <daga-text-list-editor\r\n    *ngIf=\"property.type === Type.TextList || property.type === Type.TextSet\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [allowRepeats]=\"property.type === Type.TextList\"\r\n    [value]=\"valueSet?.getValue(property.name)\"\r\n    (valueChange)=\"setValue(property, $event)\"\r\n  ></daga-text-list-editor>\r\n  <daga-text-map-editor\r\n    *ngIf=\"property.type === Type.TextMap\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [value]=\"valueSet?.getValue(property.name)\"\r\n    (valueChange)=\"setValue(property, $event)\"\r\n  ></daga-text-map-editor>\r\n  <div *ngIf=\"property.type === Type.Object\" class=\"left-bar\">\r\n    <daga-object-editor\r\n      [valueSet]=\"valueSet?.getSubValueSet(property.name)\"\r\n      [depth]=\"depth + 1\"\r\n    ></daga-object-editor>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "component", type: ObjectEditorComponent, selector: "daga-object-editor", inputs: ["valueSet", "depth"] }, { kind: "component", type: AutocompleteComponent, selector: "daga-autocomplete", inputs: ["value", "valueInput", "options", "disabled"], outputs: ["valueChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: OptionListEditorComponent, selector: "daga-option-list-editor", inputs: ["value", "options", "valueInput", "allowRepeats", "optionsNotPresentInValue", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: TextListEditorComponent, selector: "daga-text-list-editor", inputs: ["value", "valueInput", "allowRepeats", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: TextMapEditorComponent, selector: "daga-text-map-editor", inputs: ["value", "keyInput", "valueInput", "disabled"], outputs: ["valueChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.2", type: ObjectEditorComponent, isStandalone: true, selector: "daga-object-editor", inputs: { valueSet: "valueSet", depth: "depth" }, ngImport: i0, template: "<div\r\n  *ngFor=\"let property of valueSet?.displayedProperties || []\"\r\n  class=\"daga-property\"\r\n  [class]=\"getStyleClassName(property.name) + ' daga-depth-' + depth\"\r\n>\r\n  <p class=\"daga-property-name\">\r\n    {{ property.name }}\r\n  </p>\r\n\r\n  <input\r\n    *ngIf=\"property.type === Type.Text\"\r\n    type=\"daga-text\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [ngModel]=\"valueSet?.getValue(property.name)\"\r\n    (ngModelChange)=\"setValue(property, $event)\"\r\n  />\r\n  <textarea\r\n    *ngIf=\"property.type === Type.TextArea\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [ngModel]=\"valueSet?.getValue(property.name)\"\r\n    (ngModelChange)=\"setValue(property, $event)\"\r\n  ></textarea>\r\n  <input\r\n    *ngIf=\"property.type === Type.Number\"\r\n    type=\"number\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [ngModel]=\"valueSet?.getValue(property.name)\"\r\n    (ngModelChange)=\"setValue(property, $event)\"\r\n  />\r\n  <input\r\n    *ngIf=\"property.type === Type.Color\"\r\n    type=\"text\"\r\n    pattern=\"#\\d{6}\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [ngModel]=\"valueSet?.getValue(property.name)\"\r\n    (ngModelChange)=\"setValue(property, $event)\"\r\n  />\r\n  <input\r\n    *ngIf=\"property.type === Type.Datetime\"\r\n    type=\"datetime-local\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [ngModel]=\"dateToLocalDatetimeString(valueSet?.getValue(property.name))\"\r\n    (ngModelChange)=\"setValue(property, localDatetimeStringToDate($event))\"\r\n  />\r\n  <input\r\n    *ngIf=\"property.type === Type.Date\"\r\n    type=\"date\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [ngModel]=\"valueSet?.getValue(property.name)\"\r\n    (ngModelChange)=\"setValue(property, $event)\"\r\n  />\r\n  <input\r\n    *ngIf=\"property.type === Type.Time\"\r\n    type=\"time\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [ngModel]=\"valueSet?.getValue(property.name)\"\r\n    (ngModelChange)=\"setValue(property, $event)\"\r\n  />\r\n  <input\r\n    *ngIf=\"property.type === Type.Url\"\r\n    type=\"url\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [ngModel]=\"valueSet?.getValue(property.name)\"\r\n    (ngModelChange)=\"setValue(property, $event)\"\r\n  />\r\n  <div class=\"daga-radio\" *ngIf=\"property.type === Type.Boolean\">\r\n    <label class=\"daga-radio-item daga-radio-start\">\r\n      <input\r\n        type=\"radio\"\r\n        [disabled]=\"!property.editable || !userCanEdit\"\r\n        [name]=\"property.name\"\r\n        value=\"false\"\r\n        [checked]=\"valueSet?.getValue(property.name) === false\"\r\n        (change)=\"setValue(property, false)\"\r\n      />\r\n      No\r\n    </label>\r\n    <label class=\"daga-radio-item daga-radio-end\">\r\n      <input\r\n        type=\"radio\"\r\n        [disabled]=\"!property.editable || !userCanEdit\"\r\n        [name]=\"property.name\"\r\n        value=\"true\"\r\n        [checked]=\"valueSet?.getValue(property.name) === true\"\r\n        (change)=\"setValue(property, true)\"\r\n      />\r\n      Yes\r\n    </label>\r\n  </div>\r\n  <div class=\"daga-relatively-positioned\" *ngIf=\"property.type === Type.Option\">\r\n    <daga-autocomplete\r\n      [disabled]=\"!property.editable || !userCanEdit\"\r\n      [options]=\"property.options || []\"\r\n      [value]=\"valueSet?.getValue(property.name)\"\r\n      (valueChange)=\"setValue(property, $event)\"\r\n    />\r\n  </div>\r\n  <daga-option-list-editor\r\n    *ngIf=\"\r\n      property.type === Type.OptionList || property.type === Type.OptionSet\r\n    \"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [allowRepeats]=\"property.type === Type.OptionList\"\r\n    [options]=\"property.options || []\"\r\n    [value]=\"valueSet?.getValue(property.name)\"\r\n    (valueChange)=\"setValue(property, $event)\"\r\n  ></daga-option-list-editor>\r\n  <daga-text-list-editor\r\n    *ngIf=\"property.type === Type.TextList || property.type === Type.TextSet\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [allowRepeats]=\"property.type === Type.TextList\"\r\n    [value]=\"valueSet?.getValue(property.name)\"\r\n    (valueChange)=\"setValue(property, $event)\"\r\n  ></daga-text-list-editor>\r\n  <daga-text-map-editor\r\n    *ngIf=\"property.type === Type.TextMap\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [value]=\"valueSet?.getValue(property.name)\"\r\n    (valueChange)=\"setValue(property, $event)\"\r\n  ></daga-text-map-editor>\r\n  <div *ngIf=\"property.type === Type.Object\" class=\"daga-left-bar\">\r\n    <daga-object-editor\r\n      [valueSet]=\"valueSet?.getSubValueSet(property.name)\"\r\n      [depth]=\"depth + 1\"\r\n    ></daga-object-editor>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "component", type: ObjectEditorComponent, selector: "daga-object-editor", inputs: ["valueSet", "depth"] }, { kind: "component", type: AutocompleteComponent, selector: "daga-autocomplete", inputs: ["value", "valueInput", "options", "disabled"], outputs: ["valueChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: OptionListEditorComponent, selector: "daga-option-list-editor", inputs: ["value", "options", "valueInput", "allowRepeats", "optionsNotPresentInValue", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: TextListEditorComponent, selector: "daga-text-list-editor", inputs: ["value", "valueInput", "allowRepeats", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: TextMapEditorComponent, selector: "daga-text-map-editor", inputs: ["value", "keyInput", "valueInput", "disabled"], outputs: ["valueChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: ObjectEditorComponent, decorators: [{
             type: Component,
@@ -10444,13 +10460,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
                         OptionListEditorComponent,
                         TextListEditorComponent,
                         TextMapEditorComponent
-                    ], template: "<div\r\n  *ngFor=\"let property of valueSet?.displayedProperties || []\"\r\n  class=\"property\"\r\n  [class]=\"getStyleClassName(property.name) + ' depth-' + depth\"\r\n>\r\n  <p class=\"property-name\">\r\n    {{ property.name }}\r\n  </p>\r\n\r\n  <input\r\n    *ngIf=\"property.type === Type.Text\"\r\n    type=\"text\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [ngModel]=\"valueSet?.getValue(property.name)\"\r\n    (ngModelChange)=\"setValue(property, $event)\"\r\n  />\r\n  <textarea\r\n    *ngIf=\"property.type === Type.TextArea\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [ngModel]=\"valueSet?.getValue(property.name)\"\r\n    (ngModelChange)=\"setValue(property, $event)\"\r\n  ></textarea>\r\n  <input\r\n    *ngIf=\"property.type === Type.Number\"\r\n    type=\"number\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [ngModel]=\"valueSet?.getValue(property.name)\"\r\n    (ngModelChange)=\"setValue(property, $event)\"\r\n  />\r\n  <input\r\n    *ngIf=\"property.type === Type.Color\"\r\n    type=\"text\"\r\n    pattern=\"#\\d{6}\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [ngModel]=\"valueSet?.getValue(property.name)\"\r\n    (ngModelChange)=\"setValue(property, $event)\"\r\n  />\r\n  <input\r\n    *ngIf=\"property.type === Type.Datetime\"\r\n    type=\"datetime-local\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [ngModel]=\"dateToLocalDatetimeString(valueSet?.getValue(property.name))\"\r\n    (ngModelChange)=\"setValue(property, localDatetimeStringToDate($event))\"\r\n  />\r\n  <input\r\n    *ngIf=\"property.type === Type.Date\"\r\n    type=\"date\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [ngModel]=\"valueSet?.getValue(property.name)\"\r\n    (ngModelChange)=\"setValue(property, $event)\"\r\n  />\r\n  <input\r\n    *ngIf=\"property.type === Type.Time\"\r\n    type=\"time\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [ngModel]=\"valueSet?.getValue(property.name)\"\r\n    (ngModelChange)=\"setValue(property, $event)\"\r\n  />\r\n  <input\r\n    *ngIf=\"property.type === Type.Url\"\r\n    type=\"url\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [ngModel]=\"valueSet?.getValue(property.name)\"\r\n    (ngModelChange)=\"setValue(property, $event)\"\r\n  />\r\n  <div class=\"radio\" *ngIf=\"property.type === Type.Boolean\">\r\n    <label class=\"radio-item radio-start\">\r\n      <input\r\n        type=\"radio\"\r\n        [disabled]=\"!property.editable || !userCanEdit\"\r\n        [name]=\"property.name\"\r\n        value=\"false\"\r\n        [checked]=\"valueSet?.getValue(property.name) === false\"\r\n        (change)=\"setValue(property, false)\"\r\n      />\r\n      No\r\n    </label>\r\n    <label class=\"radio-item radio-end\">\r\n      <input\r\n        type=\"radio\"\r\n        [disabled]=\"!property.editable || !userCanEdit\"\r\n        [name]=\"property.name\"\r\n        value=\"true\"\r\n        [checked]=\"valueSet?.getValue(property.name) === true\"\r\n        (change)=\"setValue(property, true)\"\r\n      />\r\n      Yes\r\n    </label>\r\n  </div>\r\n  <div class=\"relatively-positioned\" *ngIf=\"property.type === Type.Option\">\r\n    <daga-autocomplete\r\n      [disabled]=\"!property.editable || !userCanEdit\"\r\n      [options]=\"property.options || []\"\r\n      [value]=\"valueSet?.getValue(property.name)\"\r\n      (valueChange)=\"setValue(property, $event)\"\r\n    />\r\n  </div>\r\n  <daga-option-list-editor\r\n    *ngIf=\"\r\n      property.type === Type.OptionList || property.type === Type.OptionSet\r\n    \"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [allowRepeats]=\"property.type === Type.OptionList\"\r\n    [options]=\"property.options || []\"\r\n    [value]=\"valueSet?.getValue(property.name)\"\r\n    (valueChange)=\"setValue(property, $event)\"\r\n  ></daga-option-list-editor>\r\n  <daga-text-list-editor\r\n    *ngIf=\"property.type === Type.TextList || property.type === Type.TextSet\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [allowRepeats]=\"property.type === Type.TextList\"\r\n    [value]=\"valueSet?.getValue(property.name)\"\r\n    (valueChange)=\"setValue(property, $event)\"\r\n  ></daga-text-list-editor>\r\n  <daga-text-map-editor\r\n    *ngIf=\"property.type === Type.TextMap\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [value]=\"valueSet?.getValue(property.name)\"\r\n    (valueChange)=\"setValue(property, $event)\"\r\n  ></daga-text-map-editor>\r\n  <div *ngIf=\"property.type === Type.Object\" class=\"left-bar\">\r\n    <daga-object-editor\r\n      [valueSet]=\"valueSet?.getSubValueSet(property.name)\"\r\n      [depth]=\"depth + 1\"\r\n    ></daga-object-editor>\r\n  </div>\r\n</div>\r\n" }]
+                    ], template: "<div\r\n  *ngFor=\"let property of valueSet?.displayedProperties || []\"\r\n  class=\"daga-property\"\r\n  [class]=\"getStyleClassName(property.name) + ' daga-depth-' + depth\"\r\n>\r\n  <p class=\"daga-property-name\">\r\n    {{ property.name }}\r\n  </p>\r\n\r\n  <input\r\n    *ngIf=\"property.type === Type.Text\"\r\n    type=\"daga-text\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [ngModel]=\"valueSet?.getValue(property.name)\"\r\n    (ngModelChange)=\"setValue(property, $event)\"\r\n  />\r\n  <textarea\r\n    *ngIf=\"property.type === Type.TextArea\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [ngModel]=\"valueSet?.getValue(property.name)\"\r\n    (ngModelChange)=\"setValue(property, $event)\"\r\n  ></textarea>\r\n  <input\r\n    *ngIf=\"property.type === Type.Number\"\r\n    type=\"number\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [ngModel]=\"valueSet?.getValue(property.name)\"\r\n    (ngModelChange)=\"setValue(property, $event)\"\r\n  />\r\n  <input\r\n    *ngIf=\"property.type === Type.Color\"\r\n    type=\"text\"\r\n    pattern=\"#\\d{6}\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [ngModel]=\"valueSet?.getValue(property.name)\"\r\n    (ngModelChange)=\"setValue(property, $event)\"\r\n  />\r\n  <input\r\n    *ngIf=\"property.type === Type.Datetime\"\r\n    type=\"datetime-local\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [ngModel]=\"dateToLocalDatetimeString(valueSet?.getValue(property.name))\"\r\n    (ngModelChange)=\"setValue(property, localDatetimeStringToDate($event))\"\r\n  />\r\n  <input\r\n    *ngIf=\"property.type === Type.Date\"\r\n    type=\"date\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [ngModel]=\"valueSet?.getValue(property.name)\"\r\n    (ngModelChange)=\"setValue(property, $event)\"\r\n  />\r\n  <input\r\n    *ngIf=\"property.type === Type.Time\"\r\n    type=\"time\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [ngModel]=\"valueSet?.getValue(property.name)\"\r\n    (ngModelChange)=\"setValue(property, $event)\"\r\n  />\r\n  <input\r\n    *ngIf=\"property.type === Type.Url\"\r\n    type=\"url\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [ngModel]=\"valueSet?.getValue(property.name)\"\r\n    (ngModelChange)=\"setValue(property, $event)\"\r\n  />\r\n  <div class=\"daga-radio\" *ngIf=\"property.type === Type.Boolean\">\r\n    <label class=\"daga-radio-item daga-radio-start\">\r\n      <input\r\n        type=\"radio\"\r\n        [disabled]=\"!property.editable || !userCanEdit\"\r\n        [name]=\"property.name\"\r\n        value=\"false\"\r\n        [checked]=\"valueSet?.getValue(property.name) === false\"\r\n        (change)=\"setValue(property, false)\"\r\n      />\r\n      No\r\n    </label>\r\n    <label class=\"daga-radio-item daga-radio-end\">\r\n      <input\r\n        type=\"radio\"\r\n        [disabled]=\"!property.editable || !userCanEdit\"\r\n        [name]=\"property.name\"\r\n        value=\"true\"\r\n        [checked]=\"valueSet?.getValue(property.name) === true\"\r\n        (change)=\"setValue(property, true)\"\r\n      />\r\n      Yes\r\n    </label>\r\n  </div>\r\n  <div class=\"daga-relatively-positioned\" *ngIf=\"property.type === Type.Option\">\r\n    <daga-autocomplete\r\n      [disabled]=\"!property.editable || !userCanEdit\"\r\n      [options]=\"property.options || []\"\r\n      [value]=\"valueSet?.getValue(property.name)\"\r\n      (valueChange)=\"setValue(property, $event)\"\r\n    />\r\n  </div>\r\n  <daga-option-list-editor\r\n    *ngIf=\"\r\n      property.type === Type.OptionList || property.type === Type.OptionSet\r\n    \"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [allowRepeats]=\"property.type === Type.OptionList\"\r\n    [options]=\"property.options || []\"\r\n    [value]=\"valueSet?.getValue(property.name)\"\r\n    (valueChange)=\"setValue(property, $event)\"\r\n  ></daga-option-list-editor>\r\n  <daga-text-list-editor\r\n    *ngIf=\"property.type === Type.TextList || property.type === Type.TextSet\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [allowRepeats]=\"property.type === Type.TextList\"\r\n    [value]=\"valueSet?.getValue(property.name)\"\r\n    (valueChange)=\"setValue(property, $event)\"\r\n  ></daga-text-list-editor>\r\n  <daga-text-map-editor\r\n    *ngIf=\"property.type === Type.TextMap\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [value]=\"valueSet?.getValue(property.name)\"\r\n    (valueChange)=\"setValue(property, $event)\"\r\n  ></daga-text-map-editor>\r\n  <div *ngIf=\"property.type === Type.Object\" class=\"daga-left-bar\">\r\n    <daga-object-editor\r\n      [valueSet]=\"valueSet?.getSubValueSet(property.name)\"\r\n      [depth]=\"depth + 1\"\r\n    ></daga-object-editor>\r\n  </div>\r\n</div>\r\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: CanvasProviderService }], propDecorators: { valueSet: [{
                 type: Input
             }], depth: [{
                 type: Input
             }] } });
 
+/**
+ * Duration of the highlight property animation in milliseconds.
+ */
+const HIGHLIGHT_ANIMATION_DURATION_MS = 1000;
 /**
  * Editor of the values of a value set.
  * @see ValueSet
@@ -10490,14 +10510,14 @@ class PropertyEditorComponent {
         let selector = '';
         let depth = 0;
         for (const propertyName of propertyNames) {
-            selector += ` .property.${getStyleClassName(propertyName)}.depth-${depth}`;
+            selector += ` .daga-property.${getStyleClassName(propertyName)}.daga-depth-${depth}`;
             ++depth;
         }
         if (this.valueSet) {
             d3.select(this.panel.nativeElement)
                 .select(selector)
                 .transition()
-                .duration(1000)
+                .duration(HIGHLIGHT_ANIMATION_DURATION_MS)
                 .ease(d3.easeLinear)
                 .styleTween('background-color', () => {
                 const interpolator = d3.interpolate('rgba(255, 0, 0, 0)', 'rgba(255, 0, 0, 0.4)');
@@ -10506,7 +10526,7 @@ class PropertyEditorComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: PropertyEditorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.2", type: PropertyEditorComponent, isStandalone: true, selector: "daga-property-editor", inputs: { location: "location", direction: "direction", width: "width", valueSet: "valueSet" }, viewQueries: [{ propertyName: "panel", first: true, predicate: ["panel"], descendants: true }], ngImport: i0, template: "<div #panel class=\"panel bottom {{ location }} {{ direction }}\">\r\n  <daga-collapse-button\r\n    #collapse\r\n    [disabled]=\"\r\n      !valueSet ||\r\n      !valueSet.propertySet ||\r\n      !valueSet.propertySet.hasProperties()\r\n    \"\r\n    [direction]=\"direction\"\r\n    [collapsableSelector]=\"panel\"\r\n    collapsableAdditionalSelector=\".panel-content\"\r\n    rule=\"display\"\r\n    collapsedValue=\"none\"\r\n    visibleValue=\"block\"\r\n  />\r\n  <div\r\n    *ngIf=\"\r\n      valueSet &&\r\n      valueSet.propertySet &&\r\n      valueSet.propertySet.hasProperties() &&\r\n      !collapse.collapsed\r\n    \"\r\n    class=\"panel-content\"\r\n  >\r\n    <p *ngIf=\"title\" class=\"title\">\r\n      {{ title }}\r\n      <button class=\"property-button\" (click)=\"settings = !settings\">\r\n        <div\r\n          class=\"icon settings-icon\"\r\n          [class]=\"\r\n            settings === undefined ? '' : settings ? 'unrotate' : 'rotate'\r\n          \"\r\n        ></div>\r\n      </button>\r\n    </p>\r\n    <daga-object-editor *ngIf=\"!settings\" [valueSet]=\"valueSet\" />\r\n    <daga-property-settings *ngIf=\"settings\" [valueSet]=\"valueSet\" />\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CollapseButtonComponent, selector: "daga-collapse-button", inputs: ["collapsableSelector", "collapsableAdditionalSelector", "collapsed", "disabled", "direction", "rule", "collapsedValue", "visibleValue"] }, { kind: "component", type: ObjectEditorComponent, selector: "daga-object-editor", inputs: ["valueSet", "depth"] }, { kind: "component", type: PropertySettingsComponent, selector: "daga-property-settings", inputs: ["valueSet", "depth"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.2", type: PropertyEditorComponent, isStandalone: true, selector: "daga-property-editor", inputs: { location: "location", direction: "direction", width: "width", valueSet: "valueSet" }, viewQueries: [{ propertyName: "panel", first: true, predicate: ["panel"], descendants: true }], ngImport: i0, template: "<div\r\n  #panel\r\n  class=\"daga-panel daga-bottom daga-{{ location }} daga-{{ direction }}\"\r\n>\r\n  <daga-collapse-button\r\n    #collapse\r\n    [disabled]=\"\r\n      !valueSet ||\r\n      !valueSet.propertySet ||\r\n      !valueSet.propertySet.hasProperties()\r\n    \"\r\n    [direction]=\"direction\"\r\n    [collapsableSelector]=\"panel\"\r\n    collapsableAdditionalSelector=\".daga-panel-content\"\r\n    rule=\"display\"\r\n    collapsedValue=\"none\"\r\n    visibleValue=\"block\"\r\n  />\r\n  <div\r\n    *ngIf=\"\r\n      valueSet &&\r\n      valueSet.propertySet &&\r\n      valueSet.propertySet.hasProperties() &&\r\n      !collapse.collapsed\r\n    \"\r\n    class=\"daga-panel-content\"\r\n  >\r\n    <p *ngIf=\"title\" class=\"daga-title\">\r\n      {{ title }}\r\n      <button class=\"daga-property-button\" (click)=\"settings = !settings\">\r\n        <div\r\n          class=\"daga-icon daga-settings-icon\"\r\n          [class]=\"\r\n            settings === undefined\r\n              ? ''\r\n              : settings\r\n                ? 'daga-unrotate'\r\n                : 'daga-rotate'\r\n          \"\r\n        ></div>\r\n      </button>\r\n    </p>\r\n    <daga-object-editor *ngIf=\"!settings\" [valueSet]=\"valueSet\" />\r\n    <daga-property-settings *ngIf=\"settings\" [valueSet]=\"valueSet\" />\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CollapseButtonComponent, selector: "daga-collapse-button", inputs: ["collapsableSelector", "collapsableAdditionalSelector", "collapsed", "disabled", "direction", "rule", "collapsedValue", "visibleValue"] }, { kind: "component", type: ObjectEditorComponent, selector: "daga-object-editor", inputs: ["valueSet", "depth"] }, { kind: "component", type: PropertySettingsComponent, selector: "daga-property-settings", inputs: ["valueSet", "depth"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: PropertyEditorComponent, decorators: [{
             type: Component,
@@ -10515,7 +10535,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
                         CollapseButtonComponent,
                         ObjectEditorComponent,
                         PropertySettingsComponent
-                    ], template: "<div #panel class=\"panel bottom {{ location }} {{ direction }}\">\r\n  <daga-collapse-button\r\n    #collapse\r\n    [disabled]=\"\r\n      !valueSet ||\r\n      !valueSet.propertySet ||\r\n      !valueSet.propertySet.hasProperties()\r\n    \"\r\n    [direction]=\"direction\"\r\n    [collapsableSelector]=\"panel\"\r\n    collapsableAdditionalSelector=\".panel-content\"\r\n    rule=\"display\"\r\n    collapsedValue=\"none\"\r\n    visibleValue=\"block\"\r\n  />\r\n  <div\r\n    *ngIf=\"\r\n      valueSet &&\r\n      valueSet.propertySet &&\r\n      valueSet.propertySet.hasProperties() &&\r\n      !collapse.collapsed\r\n    \"\r\n    class=\"panel-content\"\r\n  >\r\n    <p *ngIf=\"title\" class=\"title\">\r\n      {{ title }}\r\n      <button class=\"property-button\" (click)=\"settings = !settings\">\r\n        <div\r\n          class=\"icon settings-icon\"\r\n          [class]=\"\r\n            settings === undefined ? '' : settings ? 'unrotate' : 'rotate'\r\n          \"\r\n        ></div>\r\n      </button>\r\n    </p>\r\n    <daga-object-editor *ngIf=\"!settings\" [valueSet]=\"valueSet\" />\r\n    <daga-property-settings *ngIf=\"settings\" [valueSet]=\"valueSet\" />\r\n  </div>\r\n</div>\r\n" }]
+                    ], template: "<div\r\n  #panel\r\n  class=\"daga-panel daga-bottom daga-{{ location }} daga-{{ direction }}\"\r\n>\r\n  <daga-collapse-button\r\n    #collapse\r\n    [disabled]=\"\r\n      !valueSet ||\r\n      !valueSet.propertySet ||\r\n      !valueSet.propertySet.hasProperties()\r\n    \"\r\n    [direction]=\"direction\"\r\n    [collapsableSelector]=\"panel\"\r\n    collapsableAdditionalSelector=\".daga-panel-content\"\r\n    rule=\"display\"\r\n    collapsedValue=\"none\"\r\n    visibleValue=\"block\"\r\n  />\r\n  <div\r\n    *ngIf=\"\r\n      valueSet &&\r\n      valueSet.propertySet &&\r\n      valueSet.propertySet.hasProperties() &&\r\n      !collapse.collapsed\r\n    \"\r\n    class=\"daga-panel-content\"\r\n  >\r\n    <p *ngIf=\"title\" class=\"daga-title\">\r\n      {{ title }}\r\n      <button class=\"daga-property-button\" (click)=\"settings = !settings\">\r\n        <div\r\n          class=\"daga-icon daga-settings-icon\"\r\n          [class]=\"\r\n            settings === undefined\r\n              ? ''\r\n              : settings\r\n                ? 'daga-unrotate'\r\n                : 'daga-rotate'\r\n          \"\r\n        ></div>\r\n      </button>\r\n    </p>\r\n    <daga-object-editor *ngIf=\"!settings\" [valueSet]=\"valueSet\" />\r\n    <daga-property-settings *ngIf=\"settings\" [valueSet]=\"valueSet\" />\r\n  </div>\r\n</div>\r\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { panel: [{
                 type: ViewChild,
                 args: ['panel']
@@ -10529,7 +10549,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
                 type: Input
             }] } });
 const getStyleClassName = (s) => {
-    return 'property-name-' + s.replace(/\s/g, '');
+    return 'daga-property-name-' + s.replace(/\s/g, '');
 };
 
 /**
@@ -10589,7 +10609,7 @@ class DiagramEditorComponent {
         this.canvasProvider.initCanvasView(this.appendTo.nativeElement);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: DiagramEditorComponent, deps: [{ token: DagaConfigurationService }, { token: CanvasProviderService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.2", type: DiagramEditorComponent, isStandalone: true, selector: "daga-diagram-editor", outputs: { modelEvent: "modelEvent" }, viewQueries: [{ propertyName: "appendTo", first: true, predicate: ["appendTo"], descendants: true }, { propertyName: "diagramButtons", first: true, predicate: ["diagramButtons"], descendants: true }, { propertyName: "palette", first: true, predicate: ["palette"], descendants: true }, { propertyName: "propertyEditor", first: true, predicate: ["propertyEditor"], descendants: true }], ngImport: i0, template: "<div class=\"append-to\" #appendTo></div>\n<daga-diagram-buttons\n  *ngIf=\"config.components?.buttons?.exists !== false\"\n  #diagramButtons\n  [location]=\"config.components?.buttons?.location || Corner.BottomRight\"\n  [direction]=\"config.components?.buttons?.direction || Side.Top\"\n  [enableFilter]=\"config.components?.buttons?.enableFilter !== false\"\n  [enableLayout]=\"config.components?.buttons?.enableLayout !== false\"\n  [enableUndoRedo]=\"config.components?.buttons?.enableUndoRedo !== false\"\n  [enableZoom]=\"config.components?.buttons?.enableZoom !== false\"\n  [zoomRate]=\"config.components?.buttons?.zoomRate || 2\"\n/>\n<daga-palette\n  *ngIf=\"\n    config.components?.palette?.exists !== false &&\n    config.components?.palette?.sections &&\n    (config.components?.palette?.sections?.length || 0) > 0\n  \"\n  #palette\n  [location]=\"config.components?.palette?.location || Corner.TopLeft\"\n  [direction]=\"config.components?.palette?.direction || Side.Bottom\"\n  [width]=\"config.components?.palette?.width || '12rem'\"\n  [palettes]=\"config.components?.palette?.sections || []\"\n/>\n<daga-property-editor\n  *ngIf=\"config.components?.propertyEditor?.exists !== false\"\n  #propertyEditor\n  [location]=\"config.components?.propertyEditor?.location || Corner.TopRight\"\n  [direction]=\"config.components?.propertyEditor?.direction || Side.Bottom\"\n  [width]=\"config.components?.propertyEditor?.width || '24rem'\"\n/>\n<daga-errors *ngIf=\"config.components?.errors?.exists !== false\" />\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DiagramButtonsComponent, selector: "daga-diagram-buttons", inputs: ["location", "direction", "enableFilter", "enableLayout", "enableUndoRedo", "enableZoom", "zoomRate"] }, { kind: "component", type: PaletteComponent, selector: "daga-palette", inputs: ["palettes", "currentPalette", "currentCategory", "location", "direction", "width"] }, { kind: "component", type: PropertyEditorComponent, selector: "daga-property-editor", inputs: ["location", "direction", "width", "valueSet"] }, { kind: "component", type: ErrorsComponent, selector: "daga-errors" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.2", type: DiagramEditorComponent, isStandalone: true, selector: "daga-diagram-editor", outputs: { modelEvent: "modelEvent" }, viewQueries: [{ propertyName: "appendTo", first: true, predicate: ["appendTo"], descendants: true }, { propertyName: "diagramButtons", first: true, predicate: ["diagramButtons"], descendants: true }, { propertyName: "palette", first: true, predicate: ["palette"], descendants: true }, { propertyName: "propertyEditor", first: true, predicate: ["propertyEditor"], descendants: true }], ngImport: i0, template: "<div class=\"daga-append-to\" #appendTo></div>\r\n<daga-diagram-buttons\r\n  *ngIf=\"config.components?.buttons?.exists !== false\"\r\n  #diagramButtons\r\n  [location]=\"config.components?.buttons?.location || Corner.BottomRight\"\r\n  [direction]=\"config.components?.buttons?.direction || Side.Top\"\r\n  [enableFilter]=\"config.components?.buttons?.enableFilter !== false\"\r\n  [enableLayout]=\"config.components?.buttons?.enableLayout !== false\"\r\n  [enableUndoRedo]=\"config.components?.buttons?.enableUndoRedo !== false\"\r\n  [enableZoom]=\"config.components?.buttons?.enableZoom !== false\"\r\n  [zoomRate]=\"config.components?.buttons?.zoomRate || 2\"\r\n/>\r\n<daga-palette\r\n  *ngIf=\"\r\n    config.components?.palette?.exists !== false &&\r\n    config.components?.palette?.sections &&\r\n    (config.components?.palette?.sections?.length || 0) > 0\r\n  \"\r\n  #palette\r\n  [location]=\"config.components?.palette?.location || Corner.TopLeft\"\r\n  [direction]=\"config.components?.palette?.direction || Side.Bottom\"\r\n  [width]=\"config.components?.palette?.width || '12rem'\"\r\n  [palettes]=\"config.components?.palette?.sections || []\"\r\n/>\r\n<daga-property-editor\r\n  *ngIf=\"config.components?.propertyEditor?.exists !== false\"\r\n  #propertyEditor\r\n  [location]=\"config.components?.propertyEditor?.location || Corner.TopRight\"\r\n  [direction]=\"config.components?.propertyEditor?.direction || Side.Bottom\"\r\n  [width]=\"config.components?.propertyEditor?.width || '24rem'\"\r\n/>\r\n<daga-errors *ngIf=\"config.components?.errors?.exists !== false\" />\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DiagramButtonsComponent, selector: "daga-diagram-buttons", inputs: ["location", "direction", "enableFilter", "enableLayout", "enableUndoRedo", "enableZoom", "zoomRate"] }, { kind: "component", type: PaletteComponent, selector: "daga-palette", inputs: ["palettes", "currentPalette", "currentCategory", "location", "direction", "width"] }, { kind: "component", type: PropertyEditorComponent, selector: "daga-property-editor", inputs: ["location", "direction", "width", "valueSet"] }, { kind: "component", type: ErrorsComponent, selector: "daga-errors" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: DiagramEditorComponent, decorators: [{
             type: Component,
@@ -10599,7 +10619,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
                         PaletteComponent,
                         PropertyEditorComponent,
                         ErrorsComponent
-                    ], template: "<div class=\"append-to\" #appendTo></div>\n<daga-diagram-buttons\n  *ngIf=\"config.components?.buttons?.exists !== false\"\n  #diagramButtons\n  [location]=\"config.components?.buttons?.location || Corner.BottomRight\"\n  [direction]=\"config.components?.buttons?.direction || Side.Top\"\n  [enableFilter]=\"config.components?.buttons?.enableFilter !== false\"\n  [enableLayout]=\"config.components?.buttons?.enableLayout !== false\"\n  [enableUndoRedo]=\"config.components?.buttons?.enableUndoRedo !== false\"\n  [enableZoom]=\"config.components?.buttons?.enableZoom !== false\"\n  [zoomRate]=\"config.components?.buttons?.zoomRate || 2\"\n/>\n<daga-palette\n  *ngIf=\"\n    config.components?.palette?.exists !== false &&\n    config.components?.palette?.sections &&\n    (config.components?.palette?.sections?.length || 0) > 0\n  \"\n  #palette\n  [location]=\"config.components?.palette?.location || Corner.TopLeft\"\n  [direction]=\"config.components?.palette?.direction || Side.Bottom\"\n  [width]=\"config.components?.palette?.width || '12rem'\"\n  [palettes]=\"config.components?.palette?.sections || []\"\n/>\n<daga-property-editor\n  *ngIf=\"config.components?.propertyEditor?.exists !== false\"\n  #propertyEditor\n  [location]=\"config.components?.propertyEditor?.location || Corner.TopRight\"\n  [direction]=\"config.components?.propertyEditor?.direction || Side.Bottom\"\n  [width]=\"config.components?.propertyEditor?.width || '24rem'\"\n/>\n<daga-errors *ngIf=\"config.components?.errors?.exists !== false\" />\n" }]
+                    ], template: "<div class=\"daga-append-to\" #appendTo></div>\r\n<daga-diagram-buttons\r\n  *ngIf=\"config.components?.buttons?.exists !== false\"\r\n  #diagramButtons\r\n  [location]=\"config.components?.buttons?.location || Corner.BottomRight\"\r\n  [direction]=\"config.components?.buttons?.direction || Side.Top\"\r\n  [enableFilter]=\"config.components?.buttons?.enableFilter !== false\"\r\n  [enableLayout]=\"config.components?.buttons?.enableLayout !== false\"\r\n  [enableUndoRedo]=\"config.components?.buttons?.enableUndoRedo !== false\"\r\n  [enableZoom]=\"config.components?.buttons?.enableZoom !== false\"\r\n  [zoomRate]=\"config.components?.buttons?.zoomRate || 2\"\r\n/>\r\n<daga-palette\r\n  *ngIf=\"\r\n    config.components?.palette?.exists !== false &&\r\n    config.components?.palette?.sections &&\r\n    (config.components?.palette?.sections?.length || 0) > 0\r\n  \"\r\n  #palette\r\n  [location]=\"config.components?.palette?.location || Corner.TopLeft\"\r\n  [direction]=\"config.components?.palette?.direction || Side.Bottom\"\r\n  [width]=\"config.components?.palette?.width || '12rem'\"\r\n  [palettes]=\"config.components?.palette?.sections || []\"\r\n/>\r\n<daga-property-editor\r\n  *ngIf=\"config.components?.propertyEditor?.exists !== false\"\r\n  #propertyEditor\r\n  [location]=\"config.components?.propertyEditor?.location || Corner.TopRight\"\r\n  [direction]=\"config.components?.propertyEditor?.direction || Side.Bottom\"\r\n  [width]=\"config.components?.propertyEditor?.width || '24rem'\"\r\n/>\r\n<daga-errors *ngIf=\"config.components?.errors?.exists !== false\" />\r\n" }]
         }], ctorParameters: () => [{ type: DagaConfigurationService }, { type: CanvasProviderService }], propDecorators: { appendTo: [{
                 type: ViewChild,
                 args: ['appendTo']