@metadev/daga-angular 4.0.4 → 4.2.0

package/fesm2022/metadev-daga-angular.mjs

@@ -1,11 +1,11 @@
 import { Side, DiagramCanvas, DiagramActions, Corner, layouts, getLocationsOfNodes, ApplyLayoutAction, Events, setCursorStyle, CursorStyle, DragEvents, filterByOnlyDescendants, AddNodeAction, generalClosedPath, DIAGRAM_FIELD_DEFAULTS, getLeftMargin, getTopMargin, Type, Property, isObject, equals, Keys, DagaImporter, DagaExporter } from '@metadev/daga';
 export { ACTION_STACK_SIZE, ActionStack, AddConnectionAction, AddNodeAction, AdjacencyLayout, ApplyLayoutAction, BreadthAdjacencyLayout, BreadthLayout, ClosedShape, CollabClient, Corner, DagaExporter, DagaImporter, DiagramActionMethod, DiagramActions, DiagramCanvas, DiagramConnection, DiagramConnectionSet, DiagramConnectionType, DiagramDecorator, DiagramDecoratorSet, DiagramDoubleClickEvent, DiagramElement, DiagramElementSet, DiagramEntitySet, DiagramEvent, DiagramEvents, DiagramField, DiagramFieldSet, DiagramHighlightedEvent, DiagramModel, DiagramNode, DiagramNodeSet, DiagramNodeType, DiagramObject, DiagramObjectSet, DiagramPort, DiagramPortSet, DiagramPortType, DiagramSecondaryClickEvent, DiagramSection, DiagramSectionSet, DiagramSelectionEvent, EditFieldAction, ForceLayout, HorizontalAlign, HorizontalLayout, LineShape, LineStyle, MoveAction, PasteAction, PriorityLayout, Property, PropertySet, RemoveAction, SetGeometryAction, SetParentAction, Side, TreeLayout, Type, UpdateValuesAction, ValueSet, VerticalAlign, VerticalLayout, getLocationsOfNodes, layouts } from '@metadev/daga';
-import * as i1 from '@angular/common';
-import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { ElementRef, Component, Input, Injectable, ChangeDetectionStrategy, ViewChild, EventEmitter, Output, NgModule } from '@angular/core';
+import { ElementRef, Input, Component, Injectable, inject, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef, EventEmitter, Output, NgModule } from '@angular/core';
 import * as d3 from 'd3';
-import * as i2 from '@angular/forms';
+import * as i2 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import { ReplaySubject, merge, map, skip } from 'rxjs';
 
@@ -92,12 +92,12 @@ class CollapseButtonComponent {
                 }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: CollapseButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", 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 }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: CollapseButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", 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" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: CollapseButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: CollapseButtonComponent, decorators: [{
             type: Component,
-            args: [{ 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" }]
+            args: [{ selector: 'daga-collapse-button', 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: [{
@@ -162,10 +162,10 @@ class CanvasProviderService {
     getCanvas() {
         return this._canvas;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: CanvasProviderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: CanvasProviderService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: CanvasProviderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: CanvasProviderService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: CanvasProviderService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: CanvasProviderService, decorators: [{
             type: Injectable
         }] });
 
@@ -199,10 +199,10 @@ class DagaConfigurationService {
     getConfig() {
         return this._config;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DagaConfigurationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DagaConfigurationService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DagaConfigurationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DagaConfigurationService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DagaConfigurationService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DagaConfigurationService, decorators: [{
             type: Injectable
         }] });
 
@@ -211,12 +211,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
  * @private
  */
 class DiagramButtonsComponent {
-    get canvas() {
-        return this.canvasProvider.getCanvas();
-    }
-    constructor(canvasProvider, configService) {
-        this.canvasProvider = canvasProvider;
-        this.configService = configService;
+    constructor() {
+        this.#canvasProvider = inject(CanvasProviderService);
+        this.#configService = inject(DagaConfigurationService);
         this.enableAction = true;
         this.enableFilter = false;
         this.enableLayout = false;
@@ -227,8 +224,13 @@ class DiagramButtonsComponent {
         this.animationOngoing = false;
         this.DiagramActions = DiagramActions;
     }
+    #canvasProvider;
+    #configService;
+    get canvas() {
+        return this.#canvasProvider.getCanvas();
+    }
     ngOnInit() {
-        this.sub = this.configService.config$.subscribe((c) => {
+        this.sub = this.#configService.config$.subscribe((c) => {
             this.init(c);
         });
     }
@@ -374,13 +376,13 @@ class DiagramButtonsComponent {
     startMultipleSelection() {
         this.canvas.multipleSelectionOn = true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DiagramButtonsComponent, deps: [{ token: CanvasProviderService }, { token: DagaConfigurationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: DiagramButtonsComponent, isStandalone: true, selector: "daga-diagram-buttons", inputs: { location: "location", direction: "direction", enableAction: "enableAction", enableFilter: "enableFilter", enableLayout: "enableLayout", enableSelection: "enableSelection", enableZoom: "enableZoom" }, 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=\"enableAction\" class=\"daga-undo\" (click)=\"undo()\">\r\n      <span class=\"daga-tooltip\">Undo</span>\r\n    </button>\r\n    <button *ngIf=\"enableAction\" class=\"daga-redo\" (click)=\"redo()\">\r\n      <span class=\"daga-tooltip\">Redo</span>\r\n    </button>\r\n    <button *ngIf=\"enableSelection\" class=\"daga-copy\" (click)=\"copySelection()\">\r\n      <span class=\"daga-tooltip\">Copy</span>\r\n    </button>\r\n    <button *ngIf=\"enableSelection\" class=\"daga-cut\" (click)=\"cutSelection()\">\r\n      <span class=\"daga-tooltip\">Cut</span>\r\n    </button>\r\n    <button\r\n      *ngIf=\"enableSelection\"\r\n      class=\"daga-multiple-selection\"\r\n      [class]=\"canvas.multipleSelectionOn ? 'daga-on' : 'daga-off'\"\r\n      (click)=\"startMultipleSelection()\"\r\n    >\r\n      <span class=\"daga-tooltip\">Multiple selection</span>\r\n    </button>\r\n    <button\r\n      *ngIf=\"enableSelection\"\r\n      class=\"daga-paste\"\r\n      (click)=\"pasteSelection()\"\r\n    >\r\n      <span class=\"daga-tooltip\">Paste</span>\r\n    </button>\r\n    <button\r\n      *ngIf=\"enableSelection\"\r\n      class=\"daga-delete\"\r\n      (click)=\"deleteSelection()\"\r\n    >\r\n      <span class=\"daga-tooltip\">Delete</span>\r\n    </button>\r\n    <button *ngIf=\"enableLayout\" class=\"daga-layout\" (click)=\"layout()\">\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DiagramButtonsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: DiagramButtonsComponent, isStandalone: true, selector: "daga-diagram-buttons", inputs: { location: "location", direction: "direction", enableAction: "enableAction", enableFilter: "enableFilter", enableLayout: "enableLayout", enableSelection: "enableSelection", enableZoom: "enableZoom" }, viewQueries: [{ propertyName: "collapsableButtons", first: true, predicate: ["collapsableButtons"], descendants: true }], ngImport: i0, template: "<div class=\"daga-diagram-buttons daga-{{ location }} daga-{{ direction }}\">\r\n  @if (enableZoom && canvas.canUserPerformAction(DiagramActions.Zoom)) {\r\n    <button\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  }\r\n  @if (enableZoom && canvas.canUserPerformAction(DiagramActions.Zoom)) {\r\n    <button\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  }\r\n  <div #collapsableButtons class=\"daga-collapsable-buttons daga-collapsed\">\r\n    @if (enableZoom && canvas.canUserPerformAction(DiagramActions.Zoom)) {\r\n      <button\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    }\r\n    @if (enableAction) {\r\n      <button class=\"daga-undo\" (click)=\"undo()\">\r\n        <span class=\"daga-tooltip\">Undo</span>\r\n      </button>\r\n    }\r\n    @if (enableAction) {\r\n      <button class=\"daga-redo\" (click)=\"redo()\">\r\n        <span class=\"daga-tooltip\">Redo</span>\r\n      </button>\r\n    }\r\n    @if (enableSelection) {\r\n      <button class=\"daga-copy\" (click)=\"copySelection()\">\r\n        <span class=\"daga-tooltip\">Copy</span>\r\n      </button>\r\n    }\r\n    @if (enableSelection) {\r\n      <button class=\"daga-cut\" (click)=\"cutSelection()\">\r\n        <span class=\"daga-tooltip\">Cut</span>\r\n      </button>\r\n    }\r\n    @if (enableSelection) {\r\n      <button\r\n        class=\"daga-multiple-selection\"\r\n        [class]=\"canvas.multipleSelectionOn ? 'daga-on' : 'daga-off'\"\r\n        (click)=\"startMultipleSelection()\"\r\n        >\r\n        <span class=\"daga-tooltip\">Multiple selection</span>\r\n      </button>\r\n    }\r\n    @if (enableSelection) {\r\n      <button\r\n        class=\"daga-paste\"\r\n        (click)=\"pasteSelection()\"\r\n        >\r\n        <span class=\"daga-tooltip\">Paste</span>\r\n      </button>\r\n    }\r\n    @if (enableSelection) {\r\n      <button\r\n        class=\"daga-delete\"\r\n        (click)=\"deleteSelection()\"\r\n        >\r\n        <span class=\"daga-tooltip\">Delete</span>\r\n      </button>\r\n    }\r\n    @if (enableLayout) {\r\n      <button class=\"daga-layout\" (click)=\"layout()\">\r\n        <span class=\"daga-tooltip\">Apply layout</span>\r\n      </button>\r\n    }\r\n    @if (enableFilter) {\r\n      <button\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    }\r\n  </div>\r\n  <button class=\"daga-more-options\" (click)=\"toggleCollapse()\">\r\n    @if (!collapsed) {\r\n      <span class=\"daga-tooltip\">Less options</span>\r\n    }\r\n    @if (collapsed) {\r\n      <span class=\"daga-tooltip\">More options</span>\r\n    }\r\n  </button>\r\n</div>\r\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DiagramButtonsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DiagramButtonsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'daga-diagram-buttons', imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, 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=\"enableAction\" class=\"daga-undo\" (click)=\"undo()\">\r\n      <span class=\"daga-tooltip\">Undo</span>\r\n    </button>\r\n    <button *ngIf=\"enableAction\" class=\"daga-redo\" (click)=\"redo()\">\r\n      <span class=\"daga-tooltip\">Redo</span>\r\n    </button>\r\n    <button *ngIf=\"enableSelection\" class=\"daga-copy\" (click)=\"copySelection()\">\r\n      <span class=\"daga-tooltip\">Copy</span>\r\n    </button>\r\n    <button *ngIf=\"enableSelection\" class=\"daga-cut\" (click)=\"cutSelection()\">\r\n      <span class=\"daga-tooltip\">Cut</span>\r\n    </button>\r\n    <button\r\n      *ngIf=\"enableSelection\"\r\n      class=\"daga-multiple-selection\"\r\n      [class]=\"canvas.multipleSelectionOn ? 'daga-on' : 'daga-off'\"\r\n      (click)=\"startMultipleSelection()\"\r\n    >\r\n      <span class=\"daga-tooltip\">Multiple selection</span>\r\n    </button>\r\n    <button\r\n      *ngIf=\"enableSelection\"\r\n      class=\"daga-paste\"\r\n      (click)=\"pasteSelection()\"\r\n    >\r\n      <span class=\"daga-tooltip\">Paste</span>\r\n    </button>\r\n    <button\r\n      *ngIf=\"enableSelection\"\r\n      class=\"daga-delete\"\r\n      (click)=\"deleteSelection()\"\r\n    >\r\n      <span class=\"daga-tooltip\">Delete</span>\r\n    </button>\r\n    <button *ngIf=\"enableLayout\" class=\"daga-layout\" (click)=\"layout()\">\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 }, { type: DagaConfigurationService }], propDecorators: { collapsableButtons: [{
+            args: [{ selector: 'daga-diagram-buttons', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"daga-diagram-buttons daga-{{ location }} daga-{{ direction }}\">\r\n  @if (enableZoom && canvas.canUserPerformAction(DiagramActions.Zoom)) {\r\n    <button\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  }\r\n  @if (enableZoom && canvas.canUserPerformAction(DiagramActions.Zoom)) {\r\n    <button\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  }\r\n  <div #collapsableButtons class=\"daga-collapsable-buttons daga-collapsed\">\r\n    @if (enableZoom && canvas.canUserPerformAction(DiagramActions.Zoom)) {\r\n      <button\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    }\r\n    @if (enableAction) {\r\n      <button class=\"daga-undo\" (click)=\"undo()\">\r\n        <span class=\"daga-tooltip\">Undo</span>\r\n      </button>\r\n    }\r\n    @if (enableAction) {\r\n      <button class=\"daga-redo\" (click)=\"redo()\">\r\n        <span class=\"daga-tooltip\">Redo</span>\r\n      </button>\r\n    }\r\n    @if (enableSelection) {\r\n      <button class=\"daga-copy\" (click)=\"copySelection()\">\r\n        <span class=\"daga-tooltip\">Copy</span>\r\n      </button>\r\n    }\r\n    @if (enableSelection) {\r\n      <button class=\"daga-cut\" (click)=\"cutSelection()\">\r\n        <span class=\"daga-tooltip\">Cut</span>\r\n      </button>\r\n    }\r\n    @if (enableSelection) {\r\n      <button\r\n        class=\"daga-multiple-selection\"\r\n        [class]=\"canvas.multipleSelectionOn ? 'daga-on' : 'daga-off'\"\r\n        (click)=\"startMultipleSelection()\"\r\n        >\r\n        <span class=\"daga-tooltip\">Multiple selection</span>\r\n      </button>\r\n    }\r\n    @if (enableSelection) {\r\n      <button\r\n        class=\"daga-paste\"\r\n        (click)=\"pasteSelection()\"\r\n        >\r\n        <span class=\"daga-tooltip\">Paste</span>\r\n      </button>\r\n    }\r\n    @if (enableSelection) {\r\n      <button\r\n        class=\"daga-delete\"\r\n        (click)=\"deleteSelection()\"\r\n        >\r\n        <span class=\"daga-tooltip\">Delete</span>\r\n      </button>\r\n    }\r\n    @if (enableLayout) {\r\n      <button class=\"daga-layout\" (click)=\"layout()\">\r\n        <span class=\"daga-tooltip\">Apply layout</span>\r\n      </button>\r\n    }\r\n    @if (enableFilter) {\r\n      <button\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    }\r\n  </div>\r\n  <button class=\"daga-more-options\" (click)=\"toggleCollapse()\">\r\n    @if (!collapsed) {\r\n      <span class=\"daga-tooltip\">Less options</span>\r\n    }\r\n    @if (collapsed) {\r\n      <span class=\"daga-tooltip\">More options</span>\r\n    }\r\n  </button>\r\n</div>\r\n" }]
+        }], propDecorators: { collapsableButtons: [{
                 type: ViewChild,
                 args: ['collapsableButtons']
             }], location: [{
@@ -405,17 +407,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
  * @see DiagramValidator
  */
 class ErrorsComponent {
-    get canvas() {
-        return this.canvasProvider.getCanvas();
-    }
-    constructor(canvasProvider, cdf) {
-        this.canvasProvider = canvasProvider;
-        this.cdf = cdf;
+    constructor() {
+        this.#canvasProvider = inject(CanvasProviderService);
+        this.#cdf = inject(ChangeDetectorRef);
         this.errors = [];
         this.Side = Side;
     }
+    #canvasProvider;
+    #cdf;
+    get canvas() {
+        return this.#canvasProvider.getCanvas();
+    }
     ngAfterViewInit() {
-        this.canvasSub = this.canvasProvider.canvas$.subscribe((c) => {
+        this.canvasSub = this.#canvasProvider.canvas$.subscribe((c) => {
             this.updateCanvas(c);
         });
     }
@@ -441,7 +445,7 @@ class ErrorsComponent {
             this.errors = [...this.errors, ...newErrors];
         }
         // need to force detection changes here for some reason...
-        this.cdf.detectChanges();
+        this.#cdf.detectChanges();
     }
     showError(error) {
         if (error.elementId &&
@@ -471,13 +475,13 @@ class ErrorsComponent {
             this.canvas.parentComponent?.propertyEditor?.highlightProperty(...error.propertyNames);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ErrorsComponent, deps: [{ token: CanvasProviderService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ErrorsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", 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  @if (errors.length === 0) {\r\n    <div\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  }\r\n  @if (errors.length > 0) {\r\n    <div\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    }\r\n    @if (errors.length > 0) {\r\n      <div class=\"daga-error-panel\">\r\n        <ol>\r\n          @for (error of errors; track error; let i = $index) {\r\n            <li\r\n              (click)=\"showError(error)\"\r\n              [innerHTML]=\"error.message\"\r\n            ></li>\r\n          }\r\n        </ol>\r\n      </div>\r\n    }\r\n  </div>\r\n", dependencies: [{ kind: "component", type: CollapseButtonComponent, selector: "daga-collapse-button", inputs: ["collapsableSelector", "collapsableAdditionalSelector", "collapsed", "disabled", "direction", "rule", "collapsedValue", "visibleValue"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ErrorsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ErrorsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'daga-errors', imports: [CommonModule, CollapseButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, 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 }, { type: i0.ChangeDetectorRef }], propDecorators: { errorsContainer: [{
+            args: [{ selector: 'daga-errors', imports: [CollapseButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div #errorsContainer class=\"daga-errors\">\r\n  @if (errors.length === 0) {\r\n    <div\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  }\r\n  @if (errors.length > 0) {\r\n    <div\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    }\r\n    @if (errors.length > 0) {\r\n      <div class=\"daga-error-panel\">\r\n        <ol>\r\n          @for (error of errors; track error; let i = $index) {\r\n            <li\r\n              (click)=\"showError(error)\"\r\n              [innerHTML]=\"error.message\"\r\n            ></li>\r\n          }\r\n        </ol>\r\n      </div>\r\n    }\r\n  </div>\r\n" }]
+        }], propDecorators: { errorsContainer: [{
                 type: ViewChild,
                 args: ['errors']
             }] } });
@@ -493,21 +497,23 @@ const LABEL_VERTICAL_SHIFT_PX = 6;
  * @see DiagramNode
  */
 class PaletteComponent {
-    get canvas() {
-        return this.canvasProvider.getCanvas();
-    }
-    constructor(canvasProvider, configService) {
-        this.canvasProvider = canvasProvider;
-        this.configService = configService;
+    constructor() {
+        this.#canvasProvider = inject(CanvasProviderService);
+        this.#configService = inject(DagaConfigurationService);
         this.currentCategory = '';
     }
+    #canvasProvider;
+    #configService;
+    get canvas() {
+        return this.#canvasProvider.getCanvas();
+    }
     ngOnInit() {
         /*
         reload using the canvas observable instead of the config one
         because we're getting the type info from the model, not the configuration
         */
-        this.sub = this.canvasProvider.canvas$.subscribe(() => {
-            this.init(this.configService.getConfig());
+        this.sub = this.#canvasProvider.canvas$.subscribe(() => {
+            this.init(this.#configService.getConfig());
         });
     }
     ngAfterViewInit() {
@@ -635,12 +641,16 @@ class PaletteComponent {
         const borderThickness = type.defaultLook.lookType === 'shaped-look'
             ? type.defaultLook.borderThickness
             : 0;
+        const templateHeight = type.defaultHeight + borderThickness;
+        const templateWidth = type.defaultWidth + borderThickness;
+        const stretchedTemplateHeight = templateConfig.height || templateHeight;
+        const stretchedTemplateWidth = templateConfig.width || templateWidth;
         let thisComponentClone;
         const thisComponent = this.selectPalette()
             .append('div')
             .attr('class', `daga-template-container ${classes !== undefined ? classes : ''}`)
-            .style('width', `${type.defaultWidth + borderThickness}px`)
-            .style('height', `${type.defaultHeight + borderThickness}px`)
+            .style('width', `${stretchedTemplateWidth}px`)
+            .style('height', `${stretchedTemplateHeight}px`)
             .on(Events.MouseEnter, () => {
             setCursorStyle(CursorStyle.Grab);
         })
@@ -658,8 +668,8 @@ class PaletteComponent {
                     return;
                 }
                 thisComponentClone
-                    .style('left', `${pointerCoords[0] - type.defaultWidth / 2 - borderThickness / 2}px`)
-                    .style('top', `${pointerCoords[1] - type.defaultHeight / 2 - borderThickness / 2}px`);
+                    .style('left', `${pointerCoords[0] - stretchedTemplateWidth / 2}px`)
+                    .style('top', `${pointerCoords[1] - stretchedTemplateHeight / 2}px`);
             }
         })
             .on(DragEvents.Start, (event) => {
@@ -678,8 +688,8 @@ class PaletteComponent {
                 thisComponentClone = d3.select(thisComponentNodeCloned);
                 thisComponentClone
                     .style('position', 'absolute')
-                    .style('left', `${pointerCoords[0] - type.defaultWidth / 2 - borderThickness / 2}px`)
-                    .style('top', `${pointerCoords[1] - type.defaultHeight / 2 - borderThickness / 2}px`)
+                    .style('left', `${pointerCoords[0] - stretchedTemplateWidth / 2}px`)
+                    .style('top', `${pointerCoords[1] - stretchedTemplateHeight / 2}px`)
                     .style('z-index', 1);
                 // when trying to place a unique node in a diagram that already has a node of that type, set cursor style to not allowed
                 if (type.isUnique &&
@@ -748,11 +758,13 @@ class PaletteComponent {
         }))
             .append('svg')
             .attr('class', `palette-node ${type.id}`)
+            .attr('viewBox', `0 0 ${templateWidth} ${templateHeight}`)
+            .attr('preserveAspectRatio', 'none')
             .style('position', 'relative')
             .style('left', 0)
             .style('top', 0)
-            .style('width', '100%')
-            .style('height', '100%');
+            .style('width', `${stretchedTemplateWidth}px`)
+            .style('height', `${stretchedTemplateHeight}px`);
         const nodeLook = templateConfig.look || type.defaultLook;
         switch (nodeLook.lookType) {
             case 'shaped-look':
@@ -847,37 +859,39 @@ class PaletteComponent {
                     .attr('href', nodeLook.backgroundImageBottomRight)
                     .attr('preserveAspectRatio', 'none');
         }
-        if (type.decorators) {
-            for (const decoratorConfig of type.decorators) {
+        if (templateConfig.look === undefined) {
+            if (type.decorators) {
+                for (const decoratorConfig of type.decorators) {
+                    thisComponent
+                        .append('foreignObject')
+                        .attr('width', `${decoratorConfig.width}px`)
+                        .attr('height', `${decoratorConfig.height}px`)
+                        .attr('transform', `translate(${decoratorConfig.coords[0]},${decoratorConfig.coords[1]})`)
+                        .html(decoratorConfig.html);
+                }
+            }
+            if (templateConfig.label) {
+                const labelConfig = {
+                    ...DIAGRAM_FIELD_DEFAULTS,
+                    ...type.label,
+                    ...templateConfig.labelLook
+                };
                 thisComponent
-                    .append('foreignObject')
-                    .attr('width', `${decoratorConfig.width}px`)
-                    .attr('height', `${decoratorConfig.height}px`)
-                    .attr('transform', `translate(${decoratorConfig.coords[0]},${decoratorConfig.coords[1]})`)
-                    .html(decoratorConfig.html);
+                    .append('text')
+                    .attr('transform', `translate(${(getLeftMargin(labelConfig) + type.defaultWidth + borderThickness / 2) / 2},${(getTopMargin(labelConfig) + type.defaultHeight + borderThickness / 2) / 2})`)
+                    .attr('x', 0)
+                    .attr('y', 0)
+                    .attr('font-size', `${labelConfig.fontSize}px`)
+                    .attr('text-anchor', 'middle')
+                    .attr('font-family', labelConfig.fontFamily)
+                    .attr('font-weight', 400)
+                    .attr('fill', labelConfig.color)
+                    .attr('stroke', 'none')
+                    .style('font-kerning', 'none')
+                    .style('user-select', 'none')
+                    .text(templateConfig.label);
             }
         }
-        if (templateConfig.label) {
-            const labelConfig = {
-                ...DIAGRAM_FIELD_DEFAULTS,
-                ...type.label,
-                ...templateConfig.labelLook
-            };
-            thisComponent
-                .append('text')
-                .attr('transform', `translate(${(getLeftMargin(labelConfig) + type.defaultWidth + borderThickness / 2) / 2},${(getTopMargin(labelConfig) + type.defaultHeight + borderThickness / 2) / 2})`)
-                .attr('x', 0)
-                .attr('y', 0)
-                .attr('font-size', `${labelConfig.fontSize}px`)
-                .attr('text-anchor', 'middle')
-                .attr('font-family', labelConfig.fontFamily)
-                .attr('font-weight', 400)
-                .attr('fill', labelConfig.color)
-                .attr('stroke', 'none')
-                .style('font-kerning', 'none')
-                .style('user-select', 'none')
-                .text(templateConfig.label);
-        }
     }
     appendConnectionTemplate(type, templateConfig, classes) {
         const thisComponent = this.selectPalette()
@@ -947,13 +961,13 @@ class PaletteComponent {
                 .text(templateConfig.label);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: PaletteComponent, deps: [{ token: CanvasProviderService }, { token: DagaConfigurationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: PaletteComponent, isStandalone: true, selector: "daga-palette", inputs: { palettes: "palettes", currentPalette: "currentPalette", currentCategory: "currentCategory", location: "location", direction: "direction", width: "width", gap: "gap" }, 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: PaletteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: PaletteComponent, isStandalone: true, selector: "daga-palette", inputs: { palettes: "palettes", currentPalette: "currentPalette", currentCategory: "currentCategory", location: "location", direction: "direction", width: "width", gap: "gap" }, 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      @if (palettes.length > 1) {\r\n        <div class=\"daga-panel-tabs\">\r\n          @for (palette of palettes; track palette) {\r\n            <div\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          }\r\n        </div>\r\n      }\r\n      <div class=\"daga-palette-view\"></div>\r\n    </div>\r\n  </div>\r\n", dependencies: [{ kind: "component", type: CollapseButtonComponent, selector: "daga-collapse-button", inputs: ["collapsableSelector", "collapsableAdditionalSelector", "collapsed", "disabled", "direction", "rule", "collapsedValue", "visibleValue"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: PaletteComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: PaletteComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'daga-palette', imports: [CommonModule, CollapseButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, 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 }, { type: DagaConfigurationService }], propDecorators: { panel: [{
+            args: [{ selector: 'daga-palette', imports: [CollapseButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, 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      @if (palettes.length > 1) {\r\n        <div class=\"daga-panel-tabs\">\r\n          @for (palette of palettes; track palette) {\r\n            <div\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          }\r\n        </div>\r\n      }\r\n      <div class=\"daga-palette-view\"></div>\r\n    </div>\r\n  </div>\r\n" }]
+        }], propDecorators: { panel: [{
                 type: ViewChild,
                 args: ['panel']
             }], palettes: [{
@@ -979,8 +993,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
  * @see ValueSet
  */
 class PropertySettingsComponent {
+    constructor() {
+        this.#element = inject(ElementRef);
+        this.#cdr = inject(ChangeDetectorRef);
+        this.#canvasProvider = inject(CanvasProviderService);
+        /** How many property-settings elements are parents of this property-settings element. @private */
+        this.depth = 0;
+        // Attributes for the template
+        this.Type = Type;
+        this.getStyleClassName = getStyleClassName;
+        this.asString = asString;
+    }
+    #element;
+    #cdr;
+    #canvasProvider;
     get canvas() {
-        return this.canvasProvider.getCanvas();
+        return this.#canvasProvider.getCanvas();
     }
     get valueSet() {
         return this._valueSet;
@@ -989,20 +1017,9 @@ class PropertySettingsComponent {
         if (this._valueSet !== valueSet) {
             this._valueSet = valueSet;
             // force value change detection
-            this.cdr.detectChanges();
+            this.#cdr.detectChanges();
         }
     }
-    constructor(element, cdr, canvasProvider) {
-        this.element = element;
-        this.cdr = cdr;
-        this.canvasProvider = canvasProvider;
-        /** How many property-settings elements are parents of this property-settings element. @private */
-        this.depth = 0;
-        // Attributes for the template
-        this.Type = Type;
-        this.getStyleClassName = getStyleClassName;
-        this.asString = asString;
-    }
     ngAfterViewInit() {
         this.addListeners();
     }
@@ -1012,7 +1029,7 @@ class PropertySettingsComponent {
             let propertyElementHeight = 0;
             let closestDropbarIndex = 0;
             const propertyElement = d3
-                .select(this.element.nativeElement)
+                .select(this.#element.nativeElement)
                 .select(`.daga-property.${getStyleClassName(property.name)}.daga-depth-${this.depth}`);
             propertyElement.select('button.daga-move-button').call(d3
                 .drag()
@@ -1052,12 +1069,12 @@ class PropertySettingsComponent {
                     .style('width', `${propertyElementWidth}px`)
                     .style('height', `${propertyElementHeight}px`)
                     .style('z-index', 1);
-                d3.select(this.element.nativeElement)
+                d3.select(this.#element.nativeElement)
                     .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)
+                d3.select(this.#element.nativeElement)
                     .select(`.daga-dropbar.daga-index-${closestDropbarIndex}.daga-depth-${this.depth}`)
                     .style('visibility', 'visible')
                     .style('height', '0.25rem');
@@ -1071,7 +1088,7 @@ class PropertySettingsComponent {
                     .style('z-index', 0)
                     .style('width', 'unset')
                     .style('height', 'unset');
-                d3.select(this.element.nativeElement)
+                d3.select(this.#element.nativeElement)
                     .select(`.daga-dropbar.daga-index-${closestDropbarIndex}.daga-depth-${this.depth}`)
                     .style('visibility', 'hidden')
                     .style('height', 0);
@@ -1084,7 +1101,7 @@ class PropertySettingsComponent {
                 closestDropbarIndex = this.getClosestDropbarIndex(pointerCoords);
                 this.valueSet?.displayedProperties?.splice(this.valueSet.displayedProperties.indexOf(property), 1);
                 this.valueSet?.displayedProperties?.splice(closestDropbarIndex, 0, property);
-                this.cdr.detectChanges();
+                this.#cdr.detectChanges();
             }));
         }
     }
@@ -1094,7 +1111,7 @@ class PropertySettingsComponent {
         const coordsList = [];
         for (let i = 0; i <= propertyList.length; ++i) {
             const boundingRect = d3
-                .select(this.element.nativeElement)
+                .select(this.#element.nativeElement)
                 .select(`.daga-dropbar.daga-index-${i}.daga-depth-${this.depth}`)
                 .node()
                 ?.getBoundingClientRect();
@@ -1131,7 +1148,7 @@ class PropertySettingsComponent {
         if (selectedProperty) {
             this.valueSet.displayProperty(selectedProperty);
         }
-        this.cdr.detectChanges();
+        this.#cdr.detectChanges();
         this.addListeners();
     }
     hideProperty(property) {
@@ -1151,16 +1168,16 @@ class PropertySettingsComponent {
         if (selectedProperty) {
             this.valueSet.hideProperty(selectedProperty);
         }
-        this.cdr.detectChanges();
+        this.#cdr.detectChanges();
         this.addListeners();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", 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: "19.0.5", 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: PropertySettingsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", 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@for (property of valueSet?.displayedProperties || []; track property; let i = $index) {\r\n  <div\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      @if (property.type !== Type.Object) {\r\n        <div class=\"daga-property-value\">\r\n          {{ asString(valueSet?.getValue(property.name)) }}\r\n        </div>\r\n      }\r\n      @if (property.type === Type.Object) {\r\n        <div>\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      }\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}\r\n@if (valueSet && valueSet.hiddenProperties.length > 0) {\r\n  <div\r\n    class=\"daga-property\"\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      @for (property of valueSet?.hiddenProperties || []; track property) {\r\n        <option\r\n          [value]=\"property.name\"\r\n          >\r\n          {{ property.name }}\r\n        </option>\r\n      }\r\n    </select>\r\n  </div>\r\n}\r\n", dependencies: [{ kind: "component", type: PropertySettingsComponent, selector: "daga-property-settings", inputs: ["valueSet", "depth"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: PropertySettingsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: PropertySettingsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'daga-property-settings', imports: [CommonModule, FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, 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: [{
+            args: [{ selector: 'daga-property-settings', imports: [FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  class=\"daga-dropbar\"\r\n  [class]=\"'daga-index-' + 0 + ' daga-depth-' + depth\"\r\n></div>\r\n@for (property of valueSet?.displayedProperties || []; track property; let i = $index) {\r\n  <div\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      @if (property.type !== Type.Object) {\r\n        <div class=\"daga-property-value\">\r\n          {{ asString(valueSet?.getValue(property.name)) }}\r\n        </div>\r\n      }\r\n      @if (property.type === Type.Object) {\r\n        <div>\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      }\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}\r\n@if (valueSet && valueSet.hiddenProperties.length > 0) {\r\n  <div\r\n    class=\"daga-property\"\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      @for (property of valueSet?.hiddenProperties || []; track property) {\r\n        <option\r\n          [value]=\"property.name\"\r\n          >\r\n          {{ property.name }}\r\n        </option>\r\n      }\r\n    </select>\r\n  </div>\r\n}\r\n" }]
+        }], propDecorators: { valueSet: [{
                 type: Input
             }], depth: [{
                 type: Input
@@ -1343,12 +1360,12 @@ class AutocompleteComponent {
             this.valueChange.emit(option.key);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", 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      @if (valueInput !== '') {\r\n        <button\r\n          class=\"daga-clear\"\r\n          (click)=\"clearInput()\"\r\n        ></button>\r\n      }\r\n    </div>\r\n    <div class=\"daga-autocomplete-options\">\r\n      <ul class=\"daga-autocomplete-option-list\">\r\n        @if ((currentOptions?.length || 0) === 0) {\r\n          <li\r\n            class=\"daga-autocomplete-option no-options\"\r\n            >\r\n            (No options)\r\n          </li>\r\n        }\r\n        @for (option of currentOptions; track option; let index = $index) {\r\n          <li\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        }\r\n      </ul>\r\n    </div>\r\n  </div>\r\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AutocompleteComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AutocompleteComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'daga-autocomplete', imports: [CommonModule, FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, 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" }]
+            args: [{ selector: 'daga-autocomplete', imports: [FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, 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      @if (valueInput !== '') {\r\n        <button\r\n          class=\"daga-clear\"\r\n          (click)=\"clearInput()\"\r\n        ></button>\r\n      }\r\n    </div>\r\n    <div class=\"daga-autocomplete-options\">\r\n      <ul class=\"daga-autocomplete-option-list\">\r\n        @if ((currentOptions?.length || 0) === 0) {\r\n          <li\r\n            class=\"daga-autocomplete-option no-options\"\r\n            >\r\n            (No options)\r\n          </li>\r\n        }\r\n        @for (option of currentOptions; track option; let index = $index) {\r\n          <li\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        }\r\n      </ul>\r\n    </div>\r\n  </div>\r\n" }]
         }], propDecorators: { mainElement: [{
                 type: ViewChild,
                 args: ['main', { static: true }]
@@ -1376,6 +1393,18 @@ const normalizeString = (a) => (a || '')
  * @see ValueSet
  */
 class OptionListEditorComponent {
+    constructor() {
+        this.#cdr = inject(ChangeDetectorRef);
+        this._value = [];
+        this.labelsOfValue = [];
+        this.options = [];
+        this.valueInput = undefined;
+        this.allowRepeats = true;
+        this.optionsNotPresentInValue = [];
+        this.disabled = false;
+        this.valueChange = new EventEmitter();
+    }
+    #cdr;
     set value(value) {
         if (value === this._value) {
             return;
@@ -1394,17 +1423,6 @@ class OptionListEditorComponent {
     get value() {
         return this._value;
     }
-    constructor(cdr) {
-        this.cdr = cdr;
-        this._value = [];
-        this.labelsOfValue = [];
-        this.options = [];
-        this.valueInput = undefined;
-        this.allowRepeats = true;
-        this.optionsNotPresentInValue = [];
-        this.disabled = false;
-        this.valueChange = new EventEmitter();
-    }
     getLabelOfValue(value) {
         for (const option of this.options) {
             if (option.key === value) {
@@ -1427,7 +1445,7 @@ class OptionListEditorComponent {
             this.labelsOfValue.splice(index, 1);
             this.valueChange.emit(this._value);
             this.updateOptionsNotPresentInValue();
-            this.cdr.detectChanges();
+            this.#cdr.detectChanges();
         }
     }
     addToValue() {
@@ -1438,7 +1456,7 @@ class OptionListEditorComponent {
             this.valueChange.emit(this._value);
             this.clearInput();
             this.updateOptionsNotPresentInValue();
-            this.cdr.detectChanges();
+            this.#cdr.detectChanges();
         }
     }
     clearInput() {
@@ -1460,13 +1478,13 @@ class OptionListEditorComponent {
             this.addToValue();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: OptionListEditorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", 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 }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: OptionListEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", 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: "@for (item of value; track item; let index = $index) {\r\n  <div\r\n    class=\"daga-value-item-element\"\r\n    >\r\n    <span class=\"daga-input\">{{ labelsOfValue[index] }}</span>\r\n    @if (!disabled) {\r\n      <button\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    }\r\n  </div>\r\n}\r\n@if (!disabled) {\r\n  <div 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  }\r\n", dependencies: [{ kind: "component", type: AutocompleteComponent, selector: "daga-autocomplete", inputs: ["value", "valueInput", "options", "disabled"], outputs: ["valueChange"] }, { kind: "ngmodule", type: FormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: OptionListEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: OptionListEditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'daga-option-list-editor', imports: [AutocompleteComponent, CommonModule, FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, 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: [{
+            args: [{ selector: 'daga-option-list-editor', imports: [AutocompleteComponent, FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "@for (item of value; track item; let index = $index) {\r\n  <div\r\n    class=\"daga-value-item-element\"\r\n    >\r\n    <span class=\"daga-input\">{{ labelsOfValue[index] }}</span>\r\n    @if (!disabled) {\r\n      <button\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    }\r\n  </div>\r\n}\r\n@if (!disabled) {\r\n  <div 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  }\r\n" }]
+        }], propDecorators: { value: [{
                 type: Input
             }], options: [{
                 type: Input
@@ -1490,6 +1508,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
  * @see ValueSet
  */
 class TextListEditorComponent {
+    constructor() {
+        this.#cdr = inject(ChangeDetectorRef);
+        this._value = [];
+        this.valueInput = '';
+        this.allowRepeats = true;
+        this.disabled = false;
+        this.valueChange = new EventEmitter();
+    }
+    #cdr;
     set value(value) {
         if (value === this._value) {
             return;
@@ -1503,14 +1530,6 @@ class TextListEditorComponent {
     get value() {
         return this._value;
     }
-    constructor(cdr) {
-        this.cdr = cdr;
-        this._value = [];
-        this.valueInput = '';
-        this.allowRepeats = true;
-        this.disabled = false;
-        this.valueChange = new EventEmitter();
-    }
     getValueFromEvent(event) {
         return event.target.value;
     }
@@ -1526,7 +1545,7 @@ class TextListEditorComponent {
         if (this._value.length > index) {
             this._value.splice(index, 1);
             this.valueChange.emit(this._value);
-            this.cdr.detectChanges();
+            this.#cdr.detectChanges();
         }
     }
     editFromValue(item, index) {
@@ -1534,7 +1553,7 @@ class TextListEditorComponent {
         if (this._value.length > index && item !== '') {
             this._value.splice(index, 1, item);
             this.valueChange.emit(this._value);
-            this.cdr.detectChanges();
+            this.#cdr.detectChanges();
         }
     }
     addToValue() {
@@ -1544,7 +1563,7 @@ class TextListEditorComponent {
             this._value.push(valueInput);
             this.valueChange.emit(this._value);
             this.clearInput();
-            this.cdr.detectChanges();
+            this.#cdr.detectChanges();
         }
     }
     clearInput() {
@@ -1555,13 +1574,13 @@ class TextListEditorComponent {
             this.addToValue();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: TextListEditorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", 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=\"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    <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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: TextListEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: TextListEditorComponent, isStandalone: true, selector: "daga-text-list-editor", inputs: { value: "value", valueInput: "valueInput", allowRepeats: "allowRepeats", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "@for (item of value; track item; let index = $index) {\r\n  <div\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      @if (!disabled) {\r\n        <button\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      }\r\n    </div>\r\n  }\r\n  @if (!disabled) {\r\n    <div 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        @if (valueInput !== '') {\r\n          <button\r\n            class=\"daga-clear\"\r\n            (click)=\"clearInput()\"\r\n          ></button>\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  }\r\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: TextListEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: TextListEditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'daga-text-list-editor', imports: [CommonModule, FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, 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=\"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    <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: [{
+            args: [{ selector: 'daga-text-list-editor', imports: [FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "@for (item of value; track item; let index = $index) {\r\n  <div\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      @if (!disabled) {\r\n        <button\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      }\r\n    </div>\r\n  }\r\n  @if (!disabled) {\r\n    <div 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        @if (valueInput !== '') {\r\n          <button\r\n            class=\"daga-clear\"\r\n            (click)=\"clearInput()\"\r\n          ></button>\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  }\r\n" }]
+        }], propDecorators: { value: [{
                 type: Input
             }], valueInput: [{
                 type: Input
@@ -1581,6 +1600,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
  * @see ValueSet
  */
 class TextMapEditorComponent {
+    constructor() {
+        this.#cdr = inject(ChangeDetectorRef);
+        this._value = {};
+        this.keyInput = '';
+        this.valueInput = '';
+        this.disabled = false;
+        this.valueChange = new EventEmitter();
+    }
+    #cdr;
     set value(value) {
         if (value === this._value) {
             return;
@@ -1594,34 +1622,26 @@ class TextMapEditorComponent {
     get value() {
         return this._value;
     }
-    constructor(cdr) {
-        this.cdr = cdr;
-        this._value = {};
-        this.keyInput = '';
-        this.valueInput = '';
-        this.disabled = false;
-        this.valueChange = new EventEmitter();
-    }
     getValueFromEvent(event) {
         return event.target.value;
     }
     removeFromValue(key) {
         delete this._value[key];
-        this.cdr.detectChanges();
+        this.#cdr.detectChanges();
     }
     editKey(oldKey, newKey) {
         newKey = newKey.trim();
         if (oldKey !== newKey && newKey !== '') {
             this._value[newKey] = this._value[oldKey];
             delete this._value[oldKey];
-            this.cdr.detectChanges();
+            this.#cdr.detectChanges();
         }
     }
     editValue(key, value) {
         value = value.trim();
         if (value !== '') {
             this._value[key] = value;
-            this.cdr.detectChanges();
+            this.#cdr.detectChanges();
         }
     }
     addToValue() {
@@ -1632,7 +1652,7 @@ class TextMapEditorComponent {
             this.valueChange.emit(this._value);
             this.clearKeyInput();
             this.clearValueInput();
-            this.cdr.detectChanges();
+            this.#cdr.detectChanges();
         }
     }
     clearKeyInput() {
@@ -1646,13 +1666,13 @@ class TextMapEditorComponent {
             this.addToValue();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: TextMapEditorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", 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=\"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    <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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: TextMapEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: TextMapEditorComponent, isStandalone: true, selector: "daga-text-map-editor", inputs: { value: "value", keyInput: "keyInput", valueInput: "valueInput", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "@for (item of value | keyvalue; track item) {\r\n  <div 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        @if (!disabled) {\r\n          <button\r\n            class=\"daga-property-button\"\r\n            (click)=\"removeFromValue(item.key)\"\r\n            >\r\n            <div class=\"daga-icon daga-close-icon\"></div>\r\n          </button>\r\n        }\r\n      </div>\r\n    }\r\n    @if (!disabled) {\r\n      <div 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          @if (keyInput !== '') {\r\n            <button\r\n              class=\"daga-clear\"\r\n              (click)=\"clearKeyInput()\"\r\n            ></button>\r\n          }\r\n        </div>\r\n        <div class=\"daga-input daga-relatively-positioned\">\r\n          <input type=\"text\" (keyup)=\"onKeyUp($event)\" [(ngModel)]=\"valueInput\" />\r\n          @if (valueInput !== '') {\r\n            <button\r\n              class=\"daga-clear\"\r\n              (click)=\"clearValueInput()\"\r\n            ></button>\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    }\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i2.KeyValuePipe, name: "keyvalue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: TextMapEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: TextMapEditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'daga-text-map-editor', imports: [CommonModule, FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, 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=\"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    <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: [{
+            args: [{ selector: 'daga-text-map-editor', imports: [CommonModule, FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "@for (item of value | keyvalue; track item) {\r\n  <div 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        @if (!disabled) {\r\n          <button\r\n            class=\"daga-property-button\"\r\n            (click)=\"removeFromValue(item.key)\"\r\n            >\r\n            <div class=\"daga-icon daga-close-icon\"></div>\r\n          </button>\r\n        }\r\n      </div>\r\n    }\r\n    @if (!disabled) {\r\n      <div 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          @if (keyInput !== '') {\r\n            <button\r\n              class=\"daga-clear\"\r\n              (click)=\"clearKeyInput()\"\r\n            ></button>\r\n          }\r\n        </div>\r\n        <div class=\"daga-input daga-relatively-positioned\">\r\n          <input type=\"text\" (keyup)=\"onKeyUp($event)\" [(ngModel)]=\"valueInput\" />\r\n          @if (valueInput !== '') {\r\n            <button\r\n              class=\"daga-clear\"\r\n              (click)=\"clearValueInput()\"\r\n            ></button>\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    }\r\n" }]
+        }], propDecorators: { value: [{
                 type: Input
             }], keyInput: [{
                 type: Input
@@ -1671,8 +1691,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
  * @see ValueSet
  */
 class ObjectEditorComponent {
+    constructor() {
+        this.#cdr = inject(ChangeDetectorRef);
+        this.#canvasProvider = inject(CanvasProviderService);
+        /** How many object-editor elements are parents of this object-editor element. @private */
+        this.depth = 0;
+        // Attributes for the template
+        this.Type = Type;
+        this.getStyleClassName = getStyleClassName;
+    }
+    #cdr;
+    #canvasProvider;
     get canvas() {
-        return this.canvasProvider.getCanvas();
+        return this.#canvasProvider.getCanvas();
     }
     get userCanEdit() {
         return (this.canvas.canUserPerformAction(DiagramActions.UpdateValues) &&
@@ -1685,18 +1716,9 @@ class ObjectEditorComponent {
         if (this._valueSet !== valueSet) {
             this._valueSet = valueSet;
             // force value change detection
-            this.cdr.detectChanges();
+            this.#cdr.detectChanges();
         }
     }
-    constructor(cdr, canvasProvider) {
-        this.cdr = cdr;
-        this.canvasProvider = canvasProvider;
-        /** How many object-editor elements are parents of this object-editor element. @private */
-        this.depth = 0;
-        // Attributes for the template
-        this.Type = Type;
-        this.getStyleClassName = getStyleClassName;
-    }
     setValue(property, value) {
         if (this.valueSet === undefined) {
             return;
@@ -1724,20 +1746,19 @@ class ObjectEditorComponent {
         // with no timezone specified, the local time is assumed
         return new Date(string);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ObjectEditorComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CanvasProviderService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", 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=\"#[0-9a-fA-F]{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\r\n      class=\"daga-radio-item daga-radio-start\"\r\n      [class]=\"\r\n        valueSet?.getValue(property.name) === false ? 'daga-checked' : ''\r\n      \"\r\n    >\r\n      <input\r\n        type=\"radio\"\r\n        [disabled]=\"!property.editable || !userCanEdit\"\r\n        [name]=\"property.name\"\r\n        value=\"false\"\r\n        (change)=\"setValue(property, false)\"\r\n      />\r\n      No\r\n    </label>\r\n    <label\r\n      class=\"daga-radio-item daga-radio-end\"\r\n      [class]=\"valueSet?.getValue(property.name) === true ? 'daga-checked' : ''\"\r\n    >\r\n      <input\r\n        type=\"radio\"\r\n        [disabled]=\"!property.editable || !userCanEdit\"\r\n        [name]=\"property.name\"\r\n        value=\"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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ObjectEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: ObjectEditorComponent, isStandalone: true, selector: "daga-object-editor", inputs: { valueSet: "valueSet", depth: "depth" }, ngImport: i0, template: "@for (property of valueSet?.displayedProperties || []; track property) {\r\n  <div\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    @if (property.type === Type.Text) {\r\n      <input\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    }\r\n    @if (property.type === Type.TextArea) {\r\n      <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    }\r\n    @if (property.type === Type.Number) {\r\n      <input\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    }\r\n    @if (property.type === Type.Color) {\r\n      <input\r\n        type=\"text\"\r\n        pattern=\"#[0-9a-fA-F]{6}\"\r\n        [disabled]=\"!property.editable || !userCanEdit\"\r\n        [ngModel]=\"valueSet?.getValue(property.name)\"\r\n        (ngModelChange)=\"setValue(property, $event)\"\r\n        />\r\n    }\r\n    @if (property.type === Type.Datetime) {\r\n      <input\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    }\r\n    @if (property.type === Type.Date) {\r\n      <input\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    }\r\n    @if (property.type === Type.Time) {\r\n      <input\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    }\r\n    @if (property.type === Type.Url) {\r\n      <input\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    }\r\n    @if (property.type === Type.Boolean) {\r\n      <div class=\"daga-radio\">\r\n        <label\r\n          class=\"daga-radio-item daga-radio-start\"\r\n      [class]=\"\r\n        valueSet?.getValue(property.name) === false ? 'daga-checked' : ''\r\n      \"\r\n          >\r\n          <input\r\n            type=\"radio\"\r\n            [disabled]=\"!property.editable || !userCanEdit\"\r\n            [name]=\"property.name\"\r\n            value=\"false\"\r\n            (change)=\"setValue(property, false)\"\r\n            />\r\n            No\r\n          </label>\r\n          <label\r\n            class=\"daga-radio-item daga-radio-end\"\r\n            [class]=\"valueSet?.getValue(property.name) === true ? 'daga-checked' : ''\"\r\n            >\r\n            <input\r\n              type=\"radio\"\r\n              [disabled]=\"!property.editable || !userCanEdit\"\r\n              [name]=\"property.name\"\r\n              value=\"true\"\r\n              (change)=\"setValue(property, true)\"\r\n              />\r\n              Yes\r\n            </label>\r\n          </div>\r\n        }\r\n        @if (property.type === Type.Option) {\r\n          <div class=\"daga-relatively-positioned\">\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          }\r\n          @if (\r\n            property.type === Type.OptionList || property.type === Type.OptionSet\r\n            ) {\r\n            <daga-option-list-editor\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          }\r\n          @if (property.type === Type.TextList || property.type === Type.TextSet) {\r\n            <daga-text-list-editor\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          }\r\n          @if (property.type === Type.TextMap) {\r\n            <daga-text-map-editor\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          }\r\n          @if (property.type === Type.Object) {\r\n            <div 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          }\r\n        </div>\r\n      }\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: FormsModule }, { kind: "directive", type: i1.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: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1.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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ObjectEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ObjectEditorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'daga-object-editor', imports: [
                         AutocompleteComponent,
-                        CommonModule,
                         FormsModule,
                         OptionListEditorComponent,
                         TextListEditorComponent,
                         TextMapEditorComponent
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, 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=\"#[0-9a-fA-F]{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\r\n      class=\"daga-radio-item daga-radio-start\"\r\n      [class]=\"\r\n        valueSet?.getValue(property.name) === false ? 'daga-checked' : ''\r\n      \"\r\n    >\r\n      <input\r\n        type=\"radio\"\r\n        [disabled]=\"!property.editable || !userCanEdit\"\r\n        [name]=\"property.name\"\r\n        value=\"false\"\r\n        (change)=\"setValue(property, false)\"\r\n      />\r\n      No\r\n    </label>\r\n    <label\r\n      class=\"daga-radio-item daga-radio-end\"\r\n      [class]=\"valueSet?.getValue(property.name) === true ? 'daga-checked' : ''\"\r\n    >\r\n      <input\r\n        type=\"radio\"\r\n        [disabled]=\"!property.editable || !userCanEdit\"\r\n        [name]=\"property.name\"\r\n        value=\"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: [{
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@for (property of valueSet?.displayedProperties || []; track property) {\r\n  <div\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    @if (property.type === Type.Text) {\r\n      <input\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    }\r\n    @if (property.type === Type.TextArea) {\r\n      <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    }\r\n    @if (property.type === Type.Number) {\r\n      <input\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    }\r\n    @if (property.type === Type.Color) {\r\n      <input\r\n        type=\"text\"\r\n        pattern=\"#[0-9a-fA-F]{6}\"\r\n        [disabled]=\"!property.editable || !userCanEdit\"\r\n        [ngModel]=\"valueSet?.getValue(property.name)\"\r\n        (ngModelChange)=\"setValue(property, $event)\"\r\n        />\r\n    }\r\n    @if (property.type === Type.Datetime) {\r\n      <input\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    }\r\n    @if (property.type === Type.Date) {\r\n      <input\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    }\r\n    @if (property.type === Type.Time) {\r\n      <input\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    }\r\n    @if (property.type === Type.Url) {\r\n      <input\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    }\r\n    @if (property.type === Type.Boolean) {\r\n      <div class=\"daga-radio\">\r\n        <label\r\n          class=\"daga-radio-item daga-radio-start\"\r\n      [class]=\"\r\n        valueSet?.getValue(property.name) === false ? 'daga-checked' : ''\r\n      \"\r\n          >\r\n          <input\r\n            type=\"radio\"\r\n            [disabled]=\"!property.editable || !userCanEdit\"\r\n            [name]=\"property.name\"\r\n            value=\"false\"\r\n            (change)=\"setValue(property, false)\"\r\n            />\r\n            No\r\n          </label>\r\n          <label\r\n            class=\"daga-radio-item daga-radio-end\"\r\n            [class]=\"valueSet?.getValue(property.name) === true ? 'daga-checked' : ''\"\r\n            >\r\n            <input\r\n              type=\"radio\"\r\n              [disabled]=\"!property.editable || !userCanEdit\"\r\n              [name]=\"property.name\"\r\n              value=\"true\"\r\n              (change)=\"setValue(property, true)\"\r\n              />\r\n              Yes\r\n            </label>\r\n          </div>\r\n        }\r\n        @if (property.type === Type.Option) {\r\n          <div class=\"daga-relatively-positioned\">\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          }\r\n          @if (\r\n            property.type === Type.OptionList || property.type === Type.OptionSet\r\n            ) {\r\n            <daga-option-list-editor\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          }\r\n          @if (property.type === Type.TextList || property.type === Type.TextSet) {\r\n            <daga-text-list-editor\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          }\r\n          @if (property.type === Type.TextMap) {\r\n            <daga-text-map-editor\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          }\r\n          @if (property.type === Type.Object) {\r\n            <div 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          }\r\n        </div>\r\n      }\r\n" }]
+        }], propDecorators: { valueSet: [{
                 type: Input
             }], depth: [{
                 type: Input
@@ -1753,6 +1774,8 @@ const HIGHLIGHT_ANIMATION_DURATION_MS = 1000;
  * @see ValueSet
  */
 class PropertyEditorComponent {
+    #cdr = inject(ChangeDetectorRef);
+    #configService = inject(DagaConfigurationService);
     get valueSet() {
         return this._valueSet;
     }
@@ -1761,15 +1784,11 @@ class PropertyEditorComponent {
             this._valueSet = valueSet;
             this.settings = undefined;
             // force value change detection
-            this.cdr.detectChanges();
+            this.#cdr.detectChanges();
         }
     }
-    constructor(cdr, configService) {
-        this.cdr = cdr;
-        this.configService = configService;
-    }
     ngOnInit() {
-        this.sub = this.configService.config$.subscribe((c) => {
+        this.sub = this.#configService.config$.subscribe((c) => {
             this.init(c);
         });
     }
@@ -1825,18 +1844,17 @@ class PropertyEditorComponent {
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: PropertyEditorComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: DagaConfigurationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: PropertyEditorComponent, isStandalone: true, selector: "daga-property-editor", inputs: { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: PropertyEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: PropertyEditorComponent, isStandalone: true, selector: "daga-property-editor", inputs: { 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    @if (\r\n      valueSet &&\r\n      valueSet.propertySet &&\r\n      valueSet.propertySet.hasProperties() &&\r\n      !collapse.collapsed\r\n      ) {\r\n      <div\r\n        class=\"daga-panel-content\"\r\n        >\r\n        @if (title) {\r\n          <p 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        }\r\n        @if (!settings) {\r\n          <daga-object-editor [valueSet]=\"valueSet\" />\r\n        }\r\n        @if (settings) {\r\n          <daga-property-settings [valueSet]=\"valueSet\" />\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n", dependencies: [{ 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: PropertyEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: PropertyEditorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'daga-property-editor', imports: [
-                        CommonModule,
                         CollapseButtonComponent,
                         ObjectEditorComponent,
                         PropertySettingsComponent
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, 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 }, { type: DagaConfigurationService }], propDecorators: { panel: [{
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, 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    @if (\r\n      valueSet &&\r\n      valueSet.propertySet &&\r\n      valueSet.propertySet.hasProperties() &&\r\n      !collapse.collapsed\r\n      ) {\r\n      <div\r\n        class=\"daga-panel-content\"\r\n        >\r\n        @if (title) {\r\n          <p 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        }\r\n        @if (!settings) {\r\n          <daga-object-editor [valueSet]=\"valueSet\" />\r\n        }\r\n        @if (settings) {\r\n          <daga-property-settings [valueSet]=\"valueSet\" />\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n" }]
+        }], propDecorators: { panel: [{
                 type: ViewChild,
                 args: ['panel']
             }], valueSet: [{
@@ -1852,20 +1870,42 @@ const getStyleClassName = (s) => {
  * @public
  */
 class DiagramComponent {
+    constructor() {
+        this.#configurationService = inject(DagaConfigurationService);
+        this.#canvasProvider = inject(CanvasProviderService);
+        this.#cdr = inject(ChangeDetectorRef);
+        this.importer = new DagaImporter();
+        this.exporter = new DagaExporter();
+        /**
+         * Output for changes to the diagram's model.
+         * @public
+         */
+        this.modelChange = new EventEmitter();
+        /**
+         * Output for user events on the diagram.
+         * @public
+         */
+        this.diagramEvent = new EventEmitter();
+        this.Corner = Corner;
+        this.Side = Side;
+    }
+    #configurationService;
+    #canvasProvider;
+    #cdr;
     /**
      * Getter for the configuration of this diagram.
      * @public
      */
     get config() {
-        return this.configurationService.getConfig();
+        return this.#configurationService.getConfig();
     }
     /**
      * Setter for the configuration for the diagram.
      * @public
      */
     set config(config) {
-        if (this.configurationService.getConfig() !== config) {
-            this.configurationService.init(config);
+        if (this.#configurationService.getConfig() !== config) {
+            this.#configurationService.init(config);
         }
     }
     /**
@@ -1873,28 +1913,28 @@ class DiagramComponent {
      * @public
      */
     get config$() {
-        return this.configurationService.config$;
+        return this.#configurationService.config$;
     }
     /**
      * Getter for the canvas of this diagram.
      * @public
      */
     get canvas() {
-        return this.canvasProvider.getCanvas();
+        return this.#canvasProvider.getCanvas();
     }
     /**
      * Subject used to track when the canvas has been updated.
      * @public
      */
     get canvas$() {
-        return this.canvasProvider.canvas$;
+        return this.#canvasProvider.canvas$;
     }
     /**
      * Subject used to track when the view has been initialized after updating the canvas.
      * @public
      */
     get viewInitialized$() {
-        return this.canvasProvider.viewInitialized$;
+        return this.#canvasProvider.viewInitialized$;
     }
     /**
      * Serialized model for the diagram. Used for data binding to the model.
@@ -1916,38 +1956,19 @@ class DiagramComponent {
             }
         }
     }
-    constructor(configurationService, canvasProvider, cdr) {
-        this.configurationService = configurationService;
-        this.canvasProvider = canvasProvider;
-        this.cdr = cdr;
-        this.importer = new DagaImporter();
-        this.exporter = new DagaExporter();
-        /**
-         * Output for changes to the diagram's model.
-         * @public
-         */
-        this.modelChange = new EventEmitter();
-        /**
-         * Output for user events on the diagram.
-         * @public
-         */
-        this.diagramEvent = new EventEmitter();
-        this.Corner = Corner;
-        this.Side = Side;
-    }
     ngOnInit() {
-        this.canvasProvider.initCanvas(this, this.config);
+        this.#canvasProvider.initCanvas(this, this.config);
         this.setUpCanvas(this.canvas);
     }
     ngAfterViewInit() {
         // wait for setTimeout(0) to force browser to finish calculating the size of parent before initializing the view
         setTimeout(() => {
-            this.canvasProvider.initCanvasView(this.appendTo.nativeElement);
+            this.#canvasProvider.initCanvasView(this.appendTo.nativeElement);
             // initial import of the model
             if (this.model) {
                 this.importer.import(this.canvas.model, this.model);
             }
-            this.canvasSub = this.canvasProvider.canvas$
+            this.canvasSub = this.#canvasProvider.canvas$
                 // we skip the first one as the subscribe() underneath is
                 // for when the canvas is reloaded, not initially loaded
                 .pipe(skip(1))
@@ -1956,14 +1977,14 @@ class DiagramComponent {
                 this.model = this.exporter.export(c.model);
                 this.setUpCanvas(c);
             });
-            this.configurationSub = this.configurationService.config$
+            this.configurationSub = this.#configurationService.config$
                 // we skip the first one as the subscribe() underneath is
                 // for when the config is reloaded, not initially loaded
                 .pipe(skip(1))
                 .subscribe((c) => {
-                this.canvasProvider.initCanvas(this, c);
-                this.canvasProvider.initCanvasView(this.appendTo.nativeElement);
-                this.cdr.detectChanges();
+                this.#canvasProvider.initCanvas(this, c);
+                this.#canvasProvider.initCanvasView(this.appendTo.nativeElement);
+                this.#cdr.detectChanges();
             });
         }, 0);
     }
@@ -1984,19 +2005,18 @@ class DiagramComponent {
             this.importer.import(canvas.model, this.model);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DiagramComponent, deps: [{ token: DagaConfigurationService }, { token: CanvasProviderService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: DiagramComponent, isStandalone: true, selector: "daga-diagram", inputs: { config: "config", model: "model" }, outputs: { modelChange: "modelChange", diagramEvent: "diagramEvent" }, providers: [CanvasProviderService, DagaConfigurationService], 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=\"\r\n    config.components?.buttons !== undefined &&\r\n    config.components?.buttons?.enabled !== false\r\n  \"\r\n  #diagramButtons\r\n/>\r\n<daga-palette\r\n  *ngIf=\"\r\n    config.components?.palette !== undefined &&\r\n    config.components?.palette?.enabled !== false &&\r\n    config.components?.palette?.sections &&\r\n    (config.components?.palette?.sections?.length || 0) > 0\r\n  \"\r\n  #palette\r\n/>\r\n<daga-property-editor\r\n  *ngIf=\"\r\n    config.components?.propertyEditor !== undefined &&\r\n    config.components?.propertyEditor?.enabled !== false\r\n  \"\r\n  #propertyEditor\r\n/>\r\n<daga-errors\r\n  *ngIf=\"\r\n    config.components?.errors !== undefined &&\r\n    config.components?.errors?.enabled !== false\r\n  \"\r\n/>\r\n<ng-content />\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", "enableAction", "enableFilter", "enableLayout", "enableSelection", "enableZoom"] }, { kind: "component", type: PaletteComponent, selector: "daga-palette", inputs: ["palettes", "currentPalette", "currentCategory", "location", "direction", "width", "gap"] }, { kind: "component", type: PropertyEditorComponent, selector: "daga-property-editor", inputs: ["valueSet"] }, { kind: "component", type: ErrorsComponent, selector: "daga-errors" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DiagramComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: DiagramComponent, isStandalone: true, selector: "daga-diagram", inputs: { config: "config", model: "model" }, outputs: { modelChange: "modelChange", diagramEvent: "diagramEvent" }, providers: [CanvasProviderService, DagaConfigurationService], 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@if (\r\n  config.components?.buttons !== undefined &&\r\n  config.components?.buttons?.enabled !== false\r\n  ) {\r\n  <daga-diagram-buttons\r\n    #diagramButtons\r\n    />\r\n}\r\n@if (\r\n  config.components?.palette !== undefined &&\r\n  config.components?.palette?.enabled !== false &&\r\n  config.components?.palette?.sections &&\r\n  (config.components?.palette?.sections?.length || 0) > 0\r\n  ) {\r\n  <daga-palette\r\n    #palette\r\n    />\r\n}\r\n@if (\r\n  config.components?.propertyEditor !== undefined &&\r\n  config.components?.propertyEditor?.enabled !== false\r\n  ) {\r\n  <daga-property-editor\r\n    #propertyEditor\r\n    />\r\n}\r\n@if (\r\n  config.components?.errors !== undefined &&\r\n  config.components?.errors?.enabled !== false\r\n  ) {\r\n  <daga-errors\r\n    />\r\n}\r\n<ng-content />\r\n", dependencies: [{ kind: "component", type: DiagramButtonsComponent, selector: "daga-diagram-buttons", inputs: ["location", "direction", "enableAction", "enableFilter", "enableLayout", "enableSelection", "enableZoom"] }, { kind: "component", type: PaletteComponent, selector: "daga-palette", inputs: ["palettes", "currentPalette", "currentCategory", "location", "direction", "width", "gap"] }, { kind: "component", type: PropertyEditorComponent, selector: "daga-property-editor", inputs: ["valueSet"] }, { kind: "component", type: ErrorsComponent, selector: "daga-errors" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DiagramComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DiagramComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'daga-diagram', providers: [CanvasProviderService, DagaConfigurationService], imports: [
-                        CommonModule,
                         DiagramButtonsComponent,
                         PaletteComponent,
                         PropertyEditorComponent,
                         ErrorsComponent
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"daga-append-to\" #appendTo></div>\r\n<daga-diagram-buttons\r\n  *ngIf=\"\r\n    config.components?.buttons !== undefined &&\r\n    config.components?.buttons?.enabled !== false\r\n  \"\r\n  #diagramButtons\r\n/>\r\n<daga-palette\r\n  *ngIf=\"\r\n    config.components?.palette !== undefined &&\r\n    config.components?.palette?.enabled !== false &&\r\n    config.components?.palette?.sections &&\r\n    (config.components?.palette?.sections?.length || 0) > 0\r\n  \"\r\n  #palette\r\n/>\r\n<daga-property-editor\r\n  *ngIf=\"\r\n    config.components?.propertyEditor !== undefined &&\r\n    config.components?.propertyEditor?.enabled !== false\r\n  \"\r\n  #propertyEditor\r\n/>\r\n<daga-errors\r\n  *ngIf=\"\r\n    config.components?.errors !== undefined &&\r\n    config.components?.errors?.enabled !== false\r\n  \"\r\n/>\r\n<ng-content />\r\n" }]
-        }], ctorParameters: () => [{ type: DagaConfigurationService }, { type: CanvasProviderService }, { type: i0.ChangeDetectorRef }], propDecorators: { appendTo: [{
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"daga-append-to\" #appendTo></div>\r\n@if (\r\n  config.components?.buttons !== undefined &&\r\n  config.components?.buttons?.enabled !== false\r\n  ) {\r\n  <daga-diagram-buttons\r\n    #diagramButtons\r\n    />\r\n}\r\n@if (\r\n  config.components?.palette !== undefined &&\r\n  config.components?.palette?.enabled !== false &&\r\n  config.components?.palette?.sections &&\r\n  (config.components?.palette?.sections?.length || 0) > 0\r\n  ) {\r\n  <daga-palette\r\n    #palette\r\n    />\r\n}\r\n@if (\r\n  config.components?.propertyEditor !== undefined &&\r\n  config.components?.propertyEditor?.enabled !== false\r\n  ) {\r\n  <daga-property-editor\r\n    #propertyEditor\r\n    />\r\n}\r\n@if (\r\n  config.components?.errors !== undefined &&\r\n  config.components?.errors?.enabled !== false\r\n  ) {\r\n  <daga-errors\r\n    />\r\n}\r\n<ng-content />\r\n" }]
+        }], propDecorators: { appendTo: [{
                 type: ViewChild,
                 args: ['appendTo']
             }], diagramButtons: [{
@@ -2019,8 +2039,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
             }] } });
 
 class DagaModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DagaModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.5", ngImport: i0, type: DagaModule, imports: [CollapseButtonComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DagaModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.3", ngImport: i0, type: DagaModule, imports: [CollapseButtonComponent,
             DiagramButtonsComponent,
             DiagramComponent,
             ErrorsComponent,
@@ -2031,19 +2051,15 @@ class DagaModule {
             PropertyEditorComponent,
             CommonModule,
             FormsModule], exports: [DiagramComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DagaModule, providers: [DagaConfigurationService, CanvasProviderService], imports: [CollapseButtonComponent,
-            DiagramButtonsComponent,
-            DiagramComponent,
-            ErrorsComponent,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DagaModule, providers: [DagaConfigurationService, CanvasProviderService], imports: [DiagramComponent,
             ObjectEditorComponent,
-            PaletteComponent,
             TextListEditorComponent,
             TextMapEditorComponent,
             PropertyEditorComponent,
             CommonModule,
             FormsModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DagaModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DagaModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [],