@metadev/daga-angular 3.1.0 → 3.1.2

package/fesm2022/metadev-daga-angular.mjs

@@ -1,13 +1,13 @@
-import { Side, DiagramCanvas, DiagramActions, layouts, getLocationsOfNodes, ApplyLayoutAction, Events, setCursorStyle, CursorStyle, DragEvents, filterByOnlyDescendants, AddNodeAction, generalClosedPath, DIAGRAM_FIELD_DEFAULTS, getLeftMargin, getTopMargin, Type, Property, isObject, equals, Keys, Corner, DagaImporter, DagaExporter } from '@metadev/daga';
+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, DiagramModel, DiagramNode, DiagramNodeSet, DiagramNodeType, DiagramObject, DiagramObjectSet, DiagramPort, DiagramPortSet, DiagramSecondaryClickEvent, DiagramSection, DiagramSectionSet, 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, ViewChild, EventEmitter, Output, NgModule } from '@angular/core';
+import { ElementRef, Component, Input, Injectable, ChangeDetectionStrategy, ViewChild, EventEmitter, Output, NgModule } from '@angular/core';
 import * as d3 from 'd3';
 import * as i2 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
-import { merge, delay, map } from 'rxjs';
+import { ReplaySubject, merge, delay, map, skip } from 'rxjs';
 
 /**
  * Button used to collapse components that implement it.
@@ -121,27 +121,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
  * @public
  */
 class CanvasProviderService {
+    constructor() {
+        this.canvasSubject$ = new ReplaySubject();
+        /**
+         * Subject used to track when the canvas has been updated.
+         * @public
+         */
+        this.canvas$ = this.canvasSubject$.asObservable();
+        this.viewInitializedSubject$ = new ReplaySubject();
+        /**
+         * Subject used to track when the view of the canvas has been updated after updating the canvas.
+         * @public
+         */
+        this.viewInitialized$ = this.viewInitializedSubject$.asObservable();
+    }
     /**
-     * Initialize the diagram canvas object of this context.
+     * Initialize the diagram canvas object of this context using the given diagram configuration.
      * @private
      * @param parentComponent A diagram editor.
      * @param config A diagram configuration.
      */
     initCanvas(parentComponent, config) {
         this._canvas = new DiagramCanvas(parentComponent, config);
+        this.canvasSubject$.next(this._canvas);
     }
     /**
-     * Attach the canvas of this context to an HTML Element to render it there.
+     * Attach the canvas of this context to an HTML element to render it there.
      * @private
-     * @param appendTo An HTML Element.
+     * @param appendTo An HTML element.
      */
     initCanvasView(appendTo) {
         this._canvas.initView(appendTo);
+        this.viewInitializedSubject$.next(this._canvas);
     }
     /**
-     * Get the diagram canvas of this context. Should only be called after the view of the {@link DiagramComponent} context has been initialized.
+     * Get the current canvas of this context.
      * @public
-     * @returns A diagram canvas.
+     * @returns A canvas.
      */
     getCanvas() {
         return this._canvas;
@@ -153,6 +169,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
             type: Injectable
         }] });
 
+/**
+ * A provider for the {@link DiagramConfig} associated with a {@link DiagramComponent} context.
+ * @public
+ */
+class DagaConfigurationService {
+    constructor() {
+        this.configSubject$ = new ReplaySubject();
+        /**
+         * Subject used to track when the diagram configuration has been updated.
+         * @public
+         */
+        this.config$ = this.configSubject$.asObservable();
+    }
+    /**
+     * Set the diagram configuration of this context.
+     * @private
+     * @param config A diagram configuration.
+     */
+    init(config) {
+        this._config = config;
+        this.configSubject$.next(config);
+    }
+    /**
+     * Get the current diagram configuration of this context.
+     * @public
+     * @returns A diagram configuration.
+     */
+    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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DagaConfigurationService, decorators: [{
+            type: Injectable
+        }] });
+
 /**
  * Buttons used to trigger diagram functionalities by the user.
  * @private
@@ -161,8 +214,9 @@ class DiagramButtonsComponent {
     get canvas() {
         return this.canvasProvider.getCanvas();
     }
-    constructor(canvasProvider) {
+    constructor(canvasProvider, configService) {
         this.canvasProvider = canvasProvider;
+        this.configService = configService;
         this.enableAction = false;
         this.enableFilter = false;
         this.enableLayout = false;
@@ -173,7 +227,28 @@ class DiagramButtonsComponent {
         this.animationOngoing = false;
         this.DiagramActions = DiagramActions;
     }
+    ngOnInit() {
+        this.sub = this.configService.config$.subscribe((c) => {
+            this.init(c);
+        });
+    }
     ngAfterViewInit() {
+        this.recalculateSizeOfButtons();
+    }
+    ngOnDestroy() {
+        this.sub?.unsubscribe();
+    }
+    init(config) {
+        this.filterOn = false;
+        this.collapsed = true;
+        this.animationOngoing = false;
+        this.location = config.components?.buttons?.location || Corner.BottomRight;
+        this.direction = config.components?.buttons?.direction || Side.Top;
+        this.enableAction = config.components?.buttons?.enableAction === true;
+        this.enableFilter = config.components?.buttons?.enableFilter === true;
+        this.enableLayout = config.components?.buttons?.enableLayout === true;
+        this.enableSelection = config.components?.buttons?.enableSelection === true;
+        this.enableZoom = config.components?.buttons?.enableZoom !== false;
         switch (this.direction) {
             case Side.Bottom:
                 this.sizeAttribute = 'height';
@@ -200,16 +275,25 @@ class DiagramButtonsComponent {
                 this.marginSide = 'right';
                 break;
         }
-        const numberOfCollapsableButtons = d3
-            .select(this.collapsableButtons.nativeElement)
-            .selectChildren()
-            .size();
-        this.collapsableButtonsSize = `${4 * numberOfCollapsableButtons}rem`;
-        d3.select(this.collapsableButtons.nativeElement)
-            .style(`margin-${this.marginSide}`, '-1rem')
-            .style(this.sizeAttribute, '0rem')
-            .style('transform', `${this.transformFunction}(0)`)
-            .style('transform-origin', this.transformOrigin);
+        this.recalculateSizeOfButtons();
+    }
+    recalculateSizeOfButtons() {
+        if (this.collapsableButtons) {
+            const numberOfCollapsableButtons = (this.enableZoom &&
+                this.canvas.canUserPerformAction(DiagramActions.Zoom)
+                ? 1
+                : 0) +
+                (this.enableAction ? 2 : 0) +
+                (this.enableSelection ? 5 : 0) +
+                (this.enableLayout ? 1 : 0) +
+                (this.enableFilter ? 1 : 0);
+            this.collapsableButtonsSize = `${4 * numberOfCollapsableButtons}rem`;
+            d3.select(this.collapsableButtons.nativeElement)
+                .style(`margin-${this.marginSide}`, '-1rem')
+                .style(this.sizeAttribute, '0rem')
+                .style('transform', `${this.transformFunction}(0)`)
+                .style('transform-origin', this.transformOrigin);
+        }
     }
     // Collapse functions
     async toggleCollapse() {
@@ -289,13 +373,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 }], 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\r\n      *ngIf=\"enableLayout && canvas.layoutFormat\"\r\n      class=\"daga-layout\"\r\n      (click)=\"layout()\"\r\n    >\r\n      <span class=\"daga-tooltip\">Apply layout</span>\r\n    </button>\r\n    <button\r\n      *ngIf=\"enableFilter\"\r\n      class=\"daga-filter\"\r\n      [class]=\"filterOn ? 'daga-on' : 'daga-off'\"\r\n      (click)=\"filter()\"\r\n    >\r\n      <span class=\"daga-tooltip\">Apply filter</span>\r\n    </button>\r\n  </div>\r\n  <button class=\"daga-more-options\" (click)=\"toggleCollapse()\">\r\n    <span *ngIf=\"!collapsed\" class=\"daga-tooltip\">Less options</span>\r\n    <span *ngIf=\"collapsed\" class=\"daga-tooltip\">More options</span>\r\n  </button>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DiagramButtonsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'daga-diagram-buttons', imports: [CommonModule], template: "<div class=\"daga-diagram-buttons daga-{{ location }} daga-{{ direction }}\">\r\n  <button\r\n    *ngIf=\"enableZoom && canvas.canUserPerformAction(DiagramActions.Zoom)\"\r\n    class=\"daga-zoom-in\"\r\n    (click)=\"zoomIn()\"\r\n  >\r\n    <span class=\"daga-tooltip\">Zoom in</span>\r\n  </button>\r\n  <button\r\n    *ngIf=\"enableZoom && canvas.canUserPerformAction(DiagramActions.Zoom)\"\r\n    class=\"daga-zoom-out\"\r\n    (click)=\"zoomOut()\"\r\n  >\r\n    <span class=\"daga-tooltip\">Zoom out</span>\r\n  </button>\r\n  <div #collapsableButtons class=\"daga-collapsable-buttons daga-collapsed\">\r\n    <button\r\n      *ngIf=\"enableZoom && canvas.canUserPerformAction(DiagramActions.Zoom)\"\r\n      class=\"daga-center\"\r\n      (click)=\"center()\"\r\n    >\r\n      <span class=\"daga-tooltip\">Fit diagram to screen</span>\r\n    </button>\r\n    <button *ngIf=\"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\r\n      *ngIf=\"enableLayout && canvas.layoutFormat\"\r\n      class=\"daga-layout\"\r\n      (click)=\"layout()\"\r\n    >\r\n      <span class=\"daga-tooltip\">Apply layout</span>\r\n    </button>\r\n    <button\r\n      *ngIf=\"enableFilter\"\r\n      class=\"daga-filter\"\r\n      [class]=\"filterOn ? 'daga-on' : 'daga-off'\"\r\n      (click)=\"filter()\"\r\n    >\r\n      <span class=\"daga-tooltip\">Apply filter</span>\r\n    </button>\r\n  </div>\r\n  <button class=\"daga-more-options\" (click)=\"toggleCollapse()\">\r\n    <span *ngIf=\"!collapsed\" class=\"daga-tooltip\">Less options</span>\r\n    <span *ngIf=\"collapsed\" class=\"daga-tooltip\">More options</span>\r\n  </button>\r\n</div>\r\n" }]
-        }], ctorParameters: () => [{ type: CanvasProviderService }], propDecorators: { collapsableButtons: [{
+            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: [{
                 type: ViewChild,
                 args: ['collapsableButtons']
             }], location: [{
@@ -323,29 +407,42 @@ class ErrorsComponent {
     get canvas() {
         return this.canvasProvider.getCanvas();
     }
-    constructor(canvasProvider) {
+    constructor(canvasProvider, cdf) {
         this.canvasProvider = canvasProvider;
+        this.cdf = cdf;
         this.errors = [];
         this.Side = Side;
     }
     ngAfterViewInit() {
-        merge(this.canvas.validatorChange$, this.canvas.diagramChange$)
-            .pipe(
-        // delay to avoid errors of variables changing right after checking
-        delay(1), map(() => this.validate()))
-            .subscribe();
+        this.canvasSub = this.canvasProvider.canvas$.subscribe((c) => {
+            this.updateCanvas(c);
+        });
+    }
+    ngOnDestroy() {
+        this.canvasSub?.unsubscribe();
+        this.validationSub?.unsubscribe();
     }
     selectPanel() {
         return d3
             .select(this.errorsContainer.nativeElement)
             .select('.daga-error-panel');
     }
+    updateCanvas(canvas) {
+        this.validationSub?.unsubscribe();
+        this.validationSub = merge(canvas.validatorChange$, canvas.diagramChange$)
+            .pipe(
+        // delay to avoid errors of variables changing right after checking
+        delay(1), map(() => this.validate()))
+            .subscribe();
+    }
     validate() {
         this.errors = [];
         for (const validator of this.canvas.validators) {
             const newErrors = validator.validate(this.canvas.model);
             this.errors = [...this.errors, ...newErrors];
         }
+        // need to force detection changes here for some reason...
+        this.cdf.detectChanges();
     }
     showError(error) {
         if (error.elementId &&
@@ -375,13 +472,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 }], 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"] }] }); }
+    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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ErrorsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'daga-errors', imports: [CommonModule, CollapseButtonComponent], template: "<div #errorsContainer class=\"daga-errors\">\r\n  <div\r\n    *ngIf=\"errors.length === 0\"\r\n    class=\"daga-errors-summary daga-no-errors daga-prevent-user-select\"\r\n  >\r\n    <span>No errors found</span>\r\n  </div>\r\n  <div\r\n    *ngIf=\"errors.length > 0\"\r\n    class=\"daga-errors-summary daga-with-errors daga-prevent-user-select\"\r\n  >\r\n    <span>{{ errors.length }} errors found</span>\r\n    <div class=\"daga-collapse-button-container\">\r\n      <daga-collapse-button\r\n        [collapsableSelector]=\"errorsContainer\"\r\n        [collapsableAdditionalSelector]=\"'.daga-error-panel'\"\r\n        [direction]=\"Side.Top\"\r\n        [rule]=\"'display'\"\r\n        [collapsedValue]=\"'none'\"\r\n        [visibleValue]=\"'block'\"\r\n      />\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"errors.length > 0\" class=\"daga-error-panel\">\r\n    <ol>\r\n      <li\r\n        *ngFor=\"let error of errors; index as i\"\r\n        (click)=\"showError(error)\"\r\n        [innerHTML]=\"error.message\"\r\n      ></li>\r\n    </ol>\r\n  </div>\r\n</div>\r\n" }]
-        }], ctorParameters: () => [{ type: CanvasProviderService }], propDecorators: { errorsContainer: [{
+            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: [{
                 type: ViewChild,
                 args: ['errors']
             }] } });
@@ -396,14 +493,19 @@ class PaletteComponent {
     get canvas() {
         return this.canvasProvider.getCanvas();
     }
-    constructor(canvasProvider) {
+    constructor(canvasProvider, configService) {
         this.canvasProvider = canvasProvider;
+        this.configService = configService;
         this.currentCategory = '';
     }
-    ngAfterContentInit() {
-        // we initialize the currentPalette variable if it hasn't been initalized with a proper value
-        // doing this in ngAfterViewInit() would cause an ExpressionChangedAfterItHasBeenCheckedError
-        this.currentPalette = this.currentPalette || this.palettes[0];
+    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());
+        });
     }
     ngAfterViewInit() {
         this.refreshPalette();
@@ -429,19 +531,33 @@ class PaletteComponent {
             .style('justify-content', 'center')
             .style('gap', this.gap);
     }
+    ngOnDestroy() {
+        this.sub?.unsubscribe();
+    }
+    init(config) {
+        this.location = config.components?.palette?.location || Corner.TopLeft;
+        this.direction = config.components?.palette?.direction || Side.Bottom;
+        this.width = config.components?.palette?.width || '12rem';
+        this.gap = config.components?.palette?.gap || '1rem';
+        this.palettes = config.components?.palette?.sections || [];
+        this.currentPalette = this.palettes[0];
+        this.refreshPalette();
+    }
     refreshPalette() {
         this.switchPalette(this.currentPalette);
     }
     switchPalette(palette) {
         this.currentPalette = palette;
-        this.selectPalette().selectAll('*').remove();
-        this.priorityThreshold = this.canvas.getPriorityThreshold();
-        if (palette.categories) {
-            this.appendCategories(palette.categories);
-        }
-        if (palette.templates) {
-            for (const template of palette.templates) {
-                this.appendTemplate(template);
+        if (this.panel !== undefined) {
+            this.selectPalette().selectAll('*').remove();
+            this.priorityThreshold = this.canvas.getPriorityThreshold();
+            if (palette.categories) {
+                this.appendCategories(palette.categories);
+            }
+            if (palette.templates) {
+                for (const template of palette.templates) {
+                    this.appendTemplate(template);
+                }
             }
         }
     }
@@ -815,13 +931,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 }], 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"] }] }); }
+    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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: PaletteComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'daga-palette', imports: [CommonModule, CollapseButtonComponent], template: "<div #panel class=\"daga-panel daga-{{ location }} daga-{{ direction }}\">\r\n  <daga-collapse-button\r\n    #collapseButton\r\n    [direction]=\"direction\"\r\n    [collapsableSelector]=\"panel\"\r\n    collapsableAdditionalSelector=\".daga-panel-content\"\r\n    rule=\"display\"\r\n    collapsedValue=\"none\"\r\n    visibleValue=\"block\"\r\n  />\r\n  <div class=\"daga-panel-content\">\r\n    <div *ngIf=\"palettes.length > 1\" class=\"daga-panel-tabs\">\r\n      <div\r\n        *ngFor=\"let palette of palettes\"\r\n        class=\"daga-panel-tab\"\r\n        [class]=\"palette === currentPalette ? 'daga-current-tab' : ''\"\r\n        (click)=\"switchPalette(palette)\"\r\n      >\r\n        {{ palette.name }}\r\n      </div>\r\n    </div>\r\n    <div class=\"daga-palette-view\"></div>\r\n  </div>\r\n</div>\r\n" }]
-        }], ctorParameters: () => [{ type: CanvasProviderService }], propDecorators: { panel: [{
+            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: [{
                 type: ViewChild,
                 args: ['panel']
             }], palettes: [{
@@ -1022,11 +1138,11 @@ class PropertySettingsComponent {
         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"] }] }); }
+    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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: PropertySettingsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'daga-property-settings', imports: [CommonModule, FormsModule], template: "<div\r\n  class=\"daga-dropbar\"\r\n  [class]=\"'daga-index-' + 0 + ' daga-depth-' + depth\"\r\n></div>\r\n<div\r\n  *ngFor=\"let property of valueSet?.displayedProperties || []; index as i\"\r\n  class=\"daga-property-and-dropbar\"\r\n  [class]=\"getStyleClassName(property.name) + ' daga-depth-' + depth\"\r\n>\r\n  <div\r\n    class=\"daga-property\"\r\n    [class]=\"getStyleClassName(property.name) + ' daga-depth-' + depth\"\r\n  >\r\n    <div class=\"daga-property-name\">\r\n      <span>{{ property.name }}</span>\r\n      <div class=\"daga-buttons\">\r\n        <button class=\"daga-property-button daga-move-button\">\r\n          <div class=\"daga-icon daga-move-icon\"></div>\r\n        </button>\r\n        <button\r\n          class=\"daga-property-button daga-hide-button\"\r\n          (click)=\"hideProperty(property.name)\"\r\n        >\r\n          <div class=\"daga-icon daga-hide-icon\"></div>\r\n        </button>\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"property.type !== Type.Object\" class=\"daga-property-value\">\r\n      {{ asString(valueSet?.getValue(property.name)) }}\r\n    </div>\r\n    <div *ngIf=\"property.type === Type.Object\">\r\n      <daga-property-settings\r\n        [valueSet]=\"valueSet?.getSubValueSet(property.name)\"\r\n        [depth]=\"depth + 1\"\r\n      ></daga-property-settings>\r\n    </div>\r\n  </div>\r\n  <div\r\n    class=\"daga-dropbar\"\r\n    [class]=\"'daga-index-' + (i + 1) + ' daga-depth-' + depth\"\r\n  ></div>\r\n</div>\r\n<div\r\n  class=\"daga-property\"\r\n  *ngIf=\"valueSet && valueSet.hiddenProperties.length > 0\"\r\n>\r\n  <p class=\"daga-property-name\">Add property:</p>\r\n  <select (change)=\"displayProperty($event)\">\r\n    <option value=\"\">Select a property</option>\r\n    <option\r\n      *ngFor=\"let property of valueSet?.hiddenProperties || []\"\r\n      [value]=\"property.name\"\r\n    >\r\n      {{ property.name }}\r\n    </option>\r\n  </select>\r\n</div>\r\n" }]
+            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: [{
                 type: Input
             }], depth: [{
@@ -1212,11 +1328,11 @@ class AutocompleteComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AutocompleteComponent, deps: [{ token: i0.ChangeDetectorRef }], 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"] }] }); }
+    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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AutocompleteComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'daga-autocomplete', imports: [CommonModule, FormsModule], template: "<div\r\n  #main\r\n  class=\"daga-autocomplete\"\r\n  [class]=\"showOptions ? 'daga-showing-options' : ''\"\r\n  (blur)=\"closeOptions()\"\r\n>\r\n  <div class=\"daga-autocomplete-input\">\r\n    <input\r\n      [(ngModel)]=\"valueInput\"\r\n      [disabled]=\"disabled\"\r\n      (keyup)=\"onKeyup($event)\"\r\n      (focus)=\"openOptions()\"\r\n      (blur)=\"onLostFocus()\"\r\n    />\r\n    <button\r\n      *ngIf=\"valueInput !== ''\"\r\n      class=\"daga-clear\"\r\n      (click)=\"clearInput()\"\r\n    ></button>\r\n  </div>\r\n  <div class=\"daga-autocomplete-options\">\r\n    <ul class=\"daga-autocomplete-option-list\">\r\n      <li\r\n        *ngIf=\"(currentOptions?.length || 0) === 0\"\r\n        class=\"daga-autocomplete-option no-options\"\r\n      >\r\n        (No options)\r\n      </li>\r\n      <li\r\n        *ngFor=\"let option of currentOptions; let index = index\"\r\n        class=\"daga-autocomplete-option\"\r\n        [class]=\"index === focusIndex ? 'daga-focused' : ''\"\r\n        (mousemove)=\"focusOnOption(index)\"\r\n        (click)=\"complete(option)\"\r\n      >\r\n        <span>{{ currentLabelStarts[index] }}</span>\r\n        <span class=\"daga-match\">{{ currentLabelMatches[index] }}</span>\r\n        <span>{{ currentLabelEnds[index] }}</span>\r\n      </li>\r\n    </ul>\r\n  </div>\r\n</div>\r\n" }]
+            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" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { mainElement: [{
                 type: ViewChild,
                 args: ['main', { static: true }]
@@ -1329,11 +1445,11 @@ class OptionListEditorComponent {
         }
     }
     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 }] }); }
+    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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: OptionListEditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'daga-option-list-editor', imports: [AutocompleteComponent, CommonModule, FormsModule], template: "<div\r\n  *ngFor=\"let item of value; let index = index\"\r\n  class=\"daga-value-item-element\"\r\n>\r\n  <span class=\"daga-input\">{{ labelsOfValue[index] }}</span>\r\n  <button\r\n    *ngIf=\"!disabled\"\r\n    class=\"daga-property-button\"\r\n    (click)=\"removeFromValue(index)\"\r\n  >\r\n    <div class=\"daga-icon daga-close-icon\"></div>\r\n  </button>\r\n</div>\r\n<div *ngIf=\"!disabled\" class=\"daga-value-item-input\">\r\n  <div class=\"daga-input daga-relatively-positioned\">\r\n    <daga-autocomplete\r\n      [disabled]=\"disabled\"\r\n      [options]=\"allowRepeats ? options || [] : optionsNotPresentInValue || []\"\r\n      [(value)]=\"valueInput\"\r\n    />\r\n  </div>\r\n  <button class=\"daga-property-button\" (click)=\"addToValue()\">\r\n    <div class=\"daga-icon daga-add-icon\"></div>\r\n  </button>\r\n</div>\r\n" }]
+            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: [{
                 type: Input
             }], options: [{
@@ -1424,11 +1540,11 @@ class TextListEditorComponent {
         }
     }
     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=\"icon close-icon\"></div>\r\n  </button>\r\n</div>\r\n<div *ngIf=\"!disabled\" class=\"daga-value-item-input\">\r\n  <div class=\"daga-input daga-relatively-positioned\">\r\n    <input type=\"text\" (keyup)=\"onKeyUp($event)\" [(ngModel)]=\"valueInput\" />\r\n    <button\r\n      *ngIf=\"valueInput !== ''\"\r\n      class=\"daga-clear\"\r\n      (click)=\"clearInput()\"\r\n    ></button>\r\n  </div>\r\n  <button class=\"daga-property-button\" (click)=\"addToValue()\">\r\n    <div class=\"daga-icon daga-add-icon\"></div>\r\n  </button>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+    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=\"icon close-icon\"></div>\r\n  </button>\r\n</div>\r\n<div *ngIf=\"!disabled\" class=\"daga-value-item-input\">\r\n  <div class=\"daga-input daga-relatively-positioned\">\r\n    <input type=\"text\" (keyup)=\"onKeyUp($event)\" [(ngModel)]=\"valueInput\" />\r\n    <button\r\n      *ngIf=\"valueInput !== ''\"\r\n      class=\"daga-clear\"\r\n      (click)=\"clearInput()\"\r\n    ></button>\r\n  </div>\r\n  <button class=\"daga-property-button\" (click)=\"addToValue()\">\r\n    <div class=\"daga-icon daga-add-icon\"></div>\r\n  </button>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: TextListEditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'daga-text-list-editor', imports: [CommonModule, FormsModule], template: "<div\r\n  *ngFor=\"let item of value; let index = index\"\r\n  class=\"daga-value-item-element\"\r\n>\r\n  <input\r\n    class=\"daga-input\"\r\n    type=\"text\"\r\n    [disabled]=\"disabled\"\r\n    [value]=\"item\"\r\n    (focusout)=\"editFromValue(getValueFromEvent($event), index)\"\r\n  />\r\n  <button\r\n    *ngIf=\"!disabled\"\r\n    class=\"daga-property-button\"\r\n    (click)=\"removeFromValue(index)\"\r\n  >\r\n    <div class=\"icon close-icon\"></div>\r\n  </button>\r\n</div>\r\n<div *ngIf=\"!disabled\" class=\"daga-value-item-input\">\r\n  <div class=\"daga-input daga-relatively-positioned\">\r\n    <input type=\"text\" (keyup)=\"onKeyUp($event)\" [(ngModel)]=\"valueInput\" />\r\n    <button\r\n      *ngIf=\"valueInput !== ''\"\r\n      class=\"daga-clear\"\r\n      (click)=\"clearInput()\"\r\n    ></button>\r\n  </div>\r\n  <button class=\"daga-property-button\" (click)=\"addToValue()\">\r\n    <div class=\"daga-icon daga-add-icon\"></div>\r\n  </button>\r\n</div>\r\n" }]
+            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=\"icon close-icon\"></div>\r\n  </button>\r\n</div>\r\n<div *ngIf=\"!disabled\" class=\"daga-value-item-input\">\r\n  <div class=\"daga-input daga-relatively-positioned\">\r\n    <input type=\"text\" (keyup)=\"onKeyUp($event)\" [(ngModel)]=\"valueInput\" />\r\n    <button\r\n      *ngIf=\"valueInput !== ''\"\r\n      class=\"daga-clear\"\r\n      (click)=\"clearInput()\"\r\n    ></button>\r\n  </div>\r\n  <button class=\"daga-property-button\" (click)=\"addToValue()\">\r\n    <div class=\"daga-icon daga-add-icon\"></div>\r\n  </button>\r\n</div>\r\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { value: [{
                 type: Input
             }], valueInput: [{
@@ -1515,11 +1631,11 @@ class TextMapEditorComponent {
         }
     }
     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=\"icon close-icon\"></div>\r\n  </button>\r\n</div>\r\n<div *ngIf=\"!disabled\" class=\"daga-value-item-input\">\r\n  <div class=\"daga-input daga-relatively-positioned\">\r\n    <input type=\"text\" (keyup)=\"onKeyUp($event)\" [(ngModel)]=\"keyInput\" />\r\n    <button\r\n      *ngIf=\"keyInput !== ''\"\r\n      class=\"daga-clear\"\r\n      (click)=\"clearKeyInput()\"\r\n    ></button>\r\n  </div>\r\n  <div class=\"daga-input daga-relatively-positioned\">\r\n    <input type=\"text\" (keyup)=\"onKeyUp($event)\" [(ngModel)]=\"valueInput\" />\r\n    <button\r\n      *ngIf=\"valueInput !== ''\"\r\n      class=\"daga-clear\"\r\n      (click)=\"clearValueInput()\"\r\n    ></button>\r\n  </div>\r\n  <button class=\"daga-property-button\" (click)=\"addToValue()\">\r\n    <div class=\"daga-icon daga-add-icon\"></div>\r\n  </button>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+    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=\"icon close-icon\"></div>\r\n  </button>\r\n</div>\r\n<div *ngIf=\"!disabled\" class=\"daga-value-item-input\">\r\n  <div class=\"daga-input daga-relatively-positioned\">\r\n    <input type=\"text\" (keyup)=\"onKeyUp($event)\" [(ngModel)]=\"keyInput\" />\r\n    <button\r\n      *ngIf=\"keyInput !== ''\"\r\n      class=\"daga-clear\"\r\n      (click)=\"clearKeyInput()\"\r\n    ></button>\r\n  </div>\r\n  <div class=\"daga-input daga-relatively-positioned\">\r\n    <input type=\"text\" (keyup)=\"onKeyUp($event)\" [(ngModel)]=\"valueInput\" />\r\n    <button\r\n      *ngIf=\"valueInput !== ''\"\r\n      class=\"daga-clear\"\r\n      (click)=\"clearValueInput()\"\r\n    ></button>\r\n  </div>\r\n  <button class=\"daga-property-button\" (click)=\"addToValue()\">\r\n    <div class=\"daga-icon daga-add-icon\"></div>\r\n  </button>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: TextMapEditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'daga-text-map-editor', imports: [CommonModule, FormsModule], template: "<div *ngFor=\"let item of value | keyvalue\" class=\"daga-value-item-element\">\r\n  <input\r\n    class=\"daga-input\"\r\n    type=\"text\"\r\n    [disabled]=\"disabled\"\r\n    [value]=\"item.key\"\r\n    (focusout)=\"editKey(item.key, getValueFromEvent($event))\"\r\n  />\r\n  <input\r\n    class=\"daga-input\"\r\n    type=\"text\"\r\n    [disabled]=\"disabled\"\r\n    [value]=\"item.value\"\r\n    (focusout)=\"editValue(item.key, getValueFromEvent($event))\"\r\n  />\r\n  <button\r\n    *ngIf=\"!disabled\"\r\n    class=\"daga-property-button\"\r\n    (click)=\"removeFromValue(item.key)\"\r\n  >\r\n    <div class=\"icon close-icon\"></div>\r\n  </button>\r\n</div>\r\n<div *ngIf=\"!disabled\" class=\"daga-value-item-input\">\r\n  <div class=\"daga-input daga-relatively-positioned\">\r\n    <input type=\"text\" (keyup)=\"onKeyUp($event)\" [(ngModel)]=\"keyInput\" />\r\n    <button\r\n      *ngIf=\"keyInput !== ''\"\r\n      class=\"daga-clear\"\r\n      (click)=\"clearKeyInput()\"\r\n    ></button>\r\n  </div>\r\n  <div class=\"daga-input daga-relatively-positioned\">\r\n    <input type=\"text\" (keyup)=\"onKeyUp($event)\" [(ngModel)]=\"valueInput\" />\r\n    <button\r\n      *ngIf=\"valueInput !== ''\"\r\n      class=\"daga-clear\"\r\n      (click)=\"clearValueInput()\"\r\n    ></button>\r\n  </div>\r\n  <button class=\"daga-property-button\" (click)=\"addToValue()\">\r\n    <div class=\"daga-icon daga-add-icon\"></div>\r\n  </button>\r\n</div>\r\n" }]
+            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=\"icon close-icon\"></div>\r\n  </button>\r\n</div>\r\n<div *ngIf=\"!disabled\" class=\"daga-value-item-input\">\r\n  <div class=\"daga-input daga-relatively-positioned\">\r\n    <input type=\"text\" (keyup)=\"onKeyUp($event)\" [(ngModel)]=\"keyInput\" />\r\n    <button\r\n      *ngIf=\"keyInput !== ''\"\r\n      class=\"daga-clear\"\r\n      (click)=\"clearKeyInput()\"\r\n    ></button>\r\n  </div>\r\n  <div class=\"daga-input daga-relatively-positioned\">\r\n    <input type=\"text\" (keyup)=\"onKeyUp($event)\" [(ngModel)]=\"valueInput\" />\r\n    <button\r\n      *ngIf=\"valueInput !== ''\"\r\n      class=\"daga-clear\"\r\n      (click)=\"clearValueInput()\"\r\n    ></button>\r\n  </div>\r\n  <button class=\"daga-property-button\" (click)=\"addToValue()\">\r\n    <div class=\"daga-icon daga-add-icon\"></div>\r\n  </button>\r\n</div>\r\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { value: [{
                 type: Input
             }], keyInput: [{
@@ -1593,7 +1709,7 @@ class ObjectEditorComponent {
         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=\"#\\d{6}\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [ngModel]=\"valueSet?.getValue(property.name)\"\r\n    (ngModelChange)=\"setValue(property, $event)\"\r\n  />\r\n  <input\r\n    *ngIf=\"property.type === Type.Datetime\"\r\n    type=\"datetime-local\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [ngModel]=\"dateToLocalDatetimeString(valueSet?.getValue(property.name))\"\r\n    (ngModelChange)=\"setValue(property, localDatetimeStringToDate($event))\"\r\n  />\r\n  <input\r\n    *ngIf=\"property.type === Type.Date\"\r\n    type=\"date\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [ngModel]=\"valueSet?.getValue(property.name)\"\r\n    (ngModelChange)=\"setValue(property, $event)\"\r\n  />\r\n  <input\r\n    *ngIf=\"property.type === Type.Time\"\r\n    type=\"time\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [ngModel]=\"valueSet?.getValue(property.name)\"\r\n    (ngModelChange)=\"setValue(property, $event)\"\r\n  />\r\n  <input\r\n    *ngIf=\"property.type === Type.Url\"\r\n    type=\"url\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [ngModel]=\"valueSet?.getValue(property.name)\"\r\n    (ngModelChange)=\"setValue(property, $event)\"\r\n  />\r\n  <div class=\"daga-radio\" *ngIf=\"property.type === Type.Boolean\">\r\n    <label\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"] }] }); }
+    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=\"#\\d{6}\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [ngModel]=\"valueSet?.getValue(property.name)\"\r\n    (ngModelChange)=\"setValue(property, $event)\"\r\n  />\r\n  <input\r\n    *ngIf=\"property.type === Type.Datetime\"\r\n    type=\"datetime-local\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [ngModel]=\"dateToLocalDatetimeString(valueSet?.getValue(property.name))\"\r\n    (ngModelChange)=\"setValue(property, localDatetimeStringToDate($event))\"\r\n  />\r\n  <input\r\n    *ngIf=\"property.type === Type.Date\"\r\n    type=\"date\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [ngModel]=\"valueSet?.getValue(property.name)\"\r\n    (ngModelChange)=\"setValue(property, $event)\"\r\n  />\r\n  <input\r\n    *ngIf=\"property.type === Type.Time\"\r\n    type=\"time\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [ngModel]=\"valueSet?.getValue(property.name)\"\r\n    (ngModelChange)=\"setValue(property, $event)\"\r\n  />\r\n  <input\r\n    *ngIf=\"property.type === Type.Url\"\r\n    type=\"url\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [ngModel]=\"valueSet?.getValue(property.name)\"\r\n    (ngModelChange)=\"setValue(property, $event)\"\r\n  />\r\n  <div class=\"daga-radio\" *ngIf=\"property.type === Type.Boolean\">\r\n    <label\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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ObjectEditorComponent, decorators: [{
             type: Component,
@@ -1604,7 +1720,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                         OptionListEditorComponent,
                         TextListEditorComponent,
                         TextMapEditorComponent
-                    ], template: "<div\r\n  *ngFor=\"let property of valueSet?.displayedProperties || []\"\r\n  class=\"daga-property\"\r\n  [class]=\"getStyleClassName(property.name) + ' daga-depth-' + depth\"\r\n>\r\n  <p class=\"daga-property-name\">\r\n    {{ property.name }}\r\n  </p>\r\n\r\n  <input\r\n    *ngIf=\"property.type === Type.Text\"\r\n    type=\"daga-text\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [ngModel]=\"valueSet?.getValue(property.name)\"\r\n    (ngModelChange)=\"setValue(property, $event)\"\r\n  />\r\n  <textarea\r\n    *ngIf=\"property.type === Type.TextArea\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [ngModel]=\"valueSet?.getValue(property.name)\"\r\n    (ngModelChange)=\"setValue(property, $event)\"\r\n  ></textarea>\r\n  <input\r\n    *ngIf=\"property.type === Type.Number\"\r\n    type=\"number\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [ngModel]=\"valueSet?.getValue(property.name)\"\r\n    (ngModelChange)=\"setValue(property, $event)\"\r\n  />\r\n  <input\r\n    *ngIf=\"property.type === Type.Color\"\r\n    type=\"text\"\r\n    pattern=\"#\\d{6}\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [ngModel]=\"valueSet?.getValue(property.name)\"\r\n    (ngModelChange)=\"setValue(property, $event)\"\r\n  />\r\n  <input\r\n    *ngIf=\"property.type === Type.Datetime\"\r\n    type=\"datetime-local\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [ngModel]=\"dateToLocalDatetimeString(valueSet?.getValue(property.name))\"\r\n    (ngModelChange)=\"setValue(property, localDatetimeStringToDate($event))\"\r\n  />\r\n  <input\r\n    *ngIf=\"property.type === Type.Date\"\r\n    type=\"date\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [ngModel]=\"valueSet?.getValue(property.name)\"\r\n    (ngModelChange)=\"setValue(property, $event)\"\r\n  />\r\n  <input\r\n    *ngIf=\"property.type === Type.Time\"\r\n    type=\"time\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [ngModel]=\"valueSet?.getValue(property.name)\"\r\n    (ngModelChange)=\"setValue(property, $event)\"\r\n  />\r\n  <input\r\n    *ngIf=\"property.type === Type.Url\"\r\n    type=\"url\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [ngModel]=\"valueSet?.getValue(property.name)\"\r\n    (ngModelChange)=\"setValue(property, $event)\"\r\n  />\r\n  <div class=\"daga-radio\" *ngIf=\"property.type === Type.Boolean\">\r\n    <label\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" }]
+                    ], 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=\"#\\d{6}\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [ngModel]=\"valueSet?.getValue(property.name)\"\r\n    (ngModelChange)=\"setValue(property, $event)\"\r\n  />\r\n  <input\r\n    *ngIf=\"property.type === Type.Datetime\"\r\n    type=\"datetime-local\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [ngModel]=\"dateToLocalDatetimeString(valueSet?.getValue(property.name))\"\r\n    (ngModelChange)=\"setValue(property, localDatetimeStringToDate($event))\"\r\n  />\r\n  <input\r\n    *ngIf=\"property.type === Type.Date\"\r\n    type=\"date\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [ngModel]=\"valueSet?.getValue(property.name)\"\r\n    (ngModelChange)=\"setValue(property, $event)\"\r\n  />\r\n  <input\r\n    *ngIf=\"property.type === Type.Time\"\r\n    type=\"time\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [ngModel]=\"valueSet?.getValue(property.name)\"\r\n    (ngModelChange)=\"setValue(property, $event)\"\r\n  />\r\n  <input\r\n    *ngIf=\"property.type === Type.Url\"\r\n    type=\"url\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [ngModel]=\"valueSet?.getValue(property.name)\"\r\n    (ngModelChange)=\"setValue(property, $event)\"\r\n  />\r\n  <div class=\"daga-radio\" *ngIf=\"property.type === Type.Boolean\">\r\n    <label\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: [{
                 type: Input
             }], depth: [{
@@ -1632,19 +1748,43 @@ class PropertyEditorComponent {
             this.cdr.detectChanges();
         }
     }
-    constructor(cdr) {
+    constructor(cdr, configService) {
         this.cdr = cdr;
+        this.configService = configService;
+    }
+    ngOnInit() {
+        this.sub = this.configService.config$.subscribe((c) => {
+            this.init(c);
+        });
     }
     ngAfterViewInit() {
-        switch (this.direction) {
-            case Side.Bottom:
-            case Side.Top:
-                this.selectPanel().style('width', this.width);
-                break;
-            case Side.Left:
-            case Side.Right:
-                this.selectPanel().style('height', this.width);
-                break;
+        this.setPanelWidth();
+    }
+    ngOnDestroy() {
+        this.sub?.unsubscribe();
+    }
+    init(config) {
+        this.location =
+            config.components?.propertyEditor?.location || Corner.TopRight;
+        this.direction =
+            config.components?.propertyEditor?.direction || Side.Bottom;
+        this.width = config.components?.propertyEditor?.width || '24rem';
+        this.title = undefined;
+        this.valueSet = undefined;
+        this.setPanelWidth();
+    }
+    setPanelWidth() {
+        if (this.panel !== undefined) {
+            switch (this.direction) {
+                case Side.Bottom:
+                case Side.Top:
+                    this.selectPanel().style('width', this.width);
+                    break;
+                case Side.Left:
+                case Side.Right:
+                    this.selectPanel().style('height', this.width);
+                    break;
+            }
         }
     }
     selectPanel() {
@@ -1669,8 +1809,8 @@ class PropertyEditorComponent {
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: PropertyEditorComponent, deps: [{ token: i0.ChangeDetectorRef }], 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: { location: "location", direction: "direction", width: "width", valueSet: "valueSet" }, viewQueries: [{ propertyName: "panel", first: true, predicate: ["panel"], descendants: true }], ngImport: i0, template: "<div\r\n  #panel\r\n  class=\"daga-panel daga-bottom daga-{{ location }} daga-{{ direction }}\"\r\n>\r\n  <daga-collapse-button\r\n    #collapse\r\n    [disabled]=\"\r\n      !valueSet ||\r\n      !valueSet.propertySet ||\r\n      !valueSet.propertySet.hasProperties()\r\n    \"\r\n    [direction]=\"direction\"\r\n    [collapsableSelector]=\"panel\"\r\n    collapsableAdditionalSelector=\".daga-panel-content\"\r\n    rule=\"display\"\r\n    collapsedValue=\"none\"\r\n    visibleValue=\"block\"\r\n  />\r\n  <div\r\n    *ngIf=\"\r\n      valueSet &&\r\n      valueSet.propertySet &&\r\n      valueSet.propertySet.hasProperties() &&\r\n      !collapse.collapsed\r\n    \"\r\n    class=\"daga-panel-content\"\r\n  >\r\n    <p *ngIf=\"title\" class=\"daga-title\">\r\n      {{ title }}\r\n      <button class=\"daga-property-button\" (click)=\"settings = !settings\">\r\n        <div\r\n          class=\"daga-icon daga-settings-icon\"\r\n          [class]=\"\r\n            settings === undefined\r\n              ? ''\r\n              : settings\r\n                ? 'daga-unrotate'\r\n                : 'daga-rotate'\r\n          \"\r\n        ></div>\r\n      </button>\r\n    </p>\r\n    <daga-object-editor *ngIf=\"!settings\" [valueSet]=\"valueSet\" />\r\n    <daga-property-settings *ngIf=\"settings\" [valueSet]=\"valueSet\" />\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CollapseButtonComponent, selector: "daga-collapse-button", inputs: ["collapsableSelector", "collapsableAdditionalSelector", "collapsed", "disabled", "direction", "rule", "collapsedValue", "visibleValue"] }, { kind: "component", type: ObjectEditorComponent, selector: "daga-object-editor", inputs: ["valueSet", "depth"] }, { kind: "component", type: PropertySettingsComponent, selector: "daga-property-settings", inputs: ["valueSet", "depth"] }] }); }
+    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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: PropertyEditorComponent, decorators: [{
             type: Component,
@@ -1679,16 +1819,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                         CollapseButtonComponent,
                         ObjectEditorComponent,
                         PropertySettingsComponent
-                    ], template: "<div\r\n  #panel\r\n  class=\"daga-panel daga-bottom daga-{{ location }} daga-{{ direction }}\"\r\n>\r\n  <daga-collapse-button\r\n    #collapse\r\n    [disabled]=\"\r\n      !valueSet ||\r\n      !valueSet.propertySet ||\r\n      !valueSet.propertySet.hasProperties()\r\n    \"\r\n    [direction]=\"direction\"\r\n    [collapsableSelector]=\"panel\"\r\n    collapsableAdditionalSelector=\".daga-panel-content\"\r\n    rule=\"display\"\r\n    collapsedValue=\"none\"\r\n    visibleValue=\"block\"\r\n  />\r\n  <div\r\n    *ngIf=\"\r\n      valueSet &&\r\n      valueSet.propertySet &&\r\n      valueSet.propertySet.hasProperties() &&\r\n      !collapse.collapsed\r\n    \"\r\n    class=\"daga-panel-content\"\r\n  >\r\n    <p *ngIf=\"title\" class=\"daga-title\">\r\n      {{ title }}\r\n      <button class=\"daga-property-button\" (click)=\"settings = !settings\">\r\n        <div\r\n          class=\"daga-icon daga-settings-icon\"\r\n          [class]=\"\r\n            settings === undefined\r\n              ? ''\r\n              : settings\r\n                ? 'daga-unrotate'\r\n                : 'daga-rotate'\r\n          \"\r\n        ></div>\r\n      </button>\r\n    </p>\r\n    <daga-object-editor *ngIf=\"!settings\" [valueSet]=\"valueSet\" />\r\n    <daga-property-settings *ngIf=\"settings\" [valueSet]=\"valueSet\" />\r\n  </div>\r\n</div>\r\n" }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { panel: [{
+                    ], 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: [{
                 type: ViewChild,
                 args: ['panel']
-            }], location: [{
-                type: Input
-            }], direction: [{
-                type: Input
-            }], width: [{
-                type: Input
             }], valueSet: [{
                 type: Input
             }] } });
@@ -1697,88 +1831,34 @@ const getStyleClassName = (s) => {
 };
 
 /**
- * A provider for the {@link DiagramConfig} associated with a {@link DiagramComponent} context.
+ * The context of a diagram. Every separate diagram must be contained within its own {@link DiagramComponent} and every {@link DiagramComponent} must contain its own {@link DiagramEditorComponent}.
+ * This component defines a {@link DagaConfigurationService} and a {@link CanvasProviderService}, which is shared by all the components within and allows accessing the configuration and the canvas of this component's diagram, respectively.
  * @public
  */
-class DagaConfigurationService {
-    /**
-     * Set the diagram configuration of this context.
-     * @private
-     * @param config A diagram configuration.
-     */
-    init(config) {
-        this._config = config;
-    }
+class DiagramComponent {
     /**
-     * Get the diagram configuration of this context. Should only be called after the {@link DiagramComponent} context has been initialized.
+     * Getter for the configuration of this diagram.
      * @public
-     * @returns A diagram configuration.
      */
-    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 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DagaConfigurationService, decorators: [{
-            type: Injectable
-        }] });
-
-/**
- * A diagram's user interface editor.
- * @private
- */
-class DiagramEditorComponent {
     get config() {
         return this.configurationService.getConfig();
     }
-    get canvas() {
-        return this.canvasProvider.getCanvas();
-    }
-    constructor(configurationService, canvasProvider) {
-        this.configurationService = configurationService;
-        this.canvasProvider = canvasProvider;
-        this.Corner = Corner;
-        this.Side = Side;
-    }
-    ngOnInit() {
-        this.canvasProvider.initCanvas(this, this.config);
+    /**
+     * Setter for the configuration for the diagram.
+     * @public
+     */
+    set config(config) {
+        if (this.configurationService.getConfig() !== config) {
+            this.configurationService.init(config);
+        }
     }
-    ngAfterViewInit() {
-        this.canvasProvider.initCanvasView(this.appendTo.nativeElement);
+    /**
+     * Subject used to track when the diagram configuration has been updated.
+     * @public
+     */
+    get config$() {
+        return this.configurationService.config$;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DiagramEditorComponent, deps: [{ token: DagaConfigurationService }, { token: CanvasProviderService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: DiagramEditorComponent, isStandalone: true, selector: "daga-diagram-editor", viewQueries: [{ propertyName: "appendTo", first: true, predicate: ["appendTo"], descendants: true }, { propertyName: "diagramButtons", first: true, predicate: ["diagramButtons"], descendants: true }, { propertyName: "palette", first: true, predicate: ["palette"], descendants: true }, { propertyName: "propertyEditor", first: true, predicate: ["propertyEditor"], descendants: true }], ngImport: i0, template: "<div class=\"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  [location]=\"config.components?.buttons?.location || Corner.BottomRight\"\r\n  [direction]=\"config.components?.buttons?.direction || Side.Top\"\r\n  [enableAction]=\"config.components?.buttons?.enableAction === true\"\r\n  [enableFilter]=\"config.components?.buttons?.enableFilter === true\"\r\n  [enableLayout]=\"config.components?.buttons?.enableLayout === true\"\r\n  [enableSelection]=\"config.components?.buttons?.enableSelection === true\"\r\n  [enableZoom]=\"config.components?.buttons?.enableZoom !== false\"\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  [location]=\"config.components?.palette?.location || Corner.TopLeft\"\r\n  [direction]=\"config.components?.palette?.direction || Side.Bottom\"\r\n  [width]=\"config.components?.palette?.width || '12rem'\"\r\n  [gap]=\"config.components?.palette?.gap || '1rem'\"\r\n  [palettes]=\"config.components?.palette?.sections || []\"\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  [location]=\"config.components?.propertyEditor?.location || Corner.TopRight\"\r\n  [direction]=\"config.components?.propertyEditor?.direction || Side.Bottom\"\r\n  [width]=\"config.components?.propertyEditor?.width || '24rem'\"\r\n/>\r\n<daga-errors\r\n  *ngIf=\"\r\n    config.components?.errors !== undefined &&\r\n    config.components?.errors?.enabled !== false\r\n  \"\r\n/>\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: ["location", "direction", "width", "valueSet"] }, { kind: "component", type: ErrorsComponent, selector: "daga-errors" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DiagramEditorComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'daga-diagram-editor', imports: [
-                        CommonModule,
-                        DiagramButtonsComponent,
-                        PaletteComponent,
-                        PropertyEditorComponent,
-                        ErrorsComponent
-                    ], 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  [location]=\"config.components?.buttons?.location || Corner.BottomRight\"\r\n  [direction]=\"config.components?.buttons?.direction || Side.Top\"\r\n  [enableAction]=\"config.components?.buttons?.enableAction === true\"\r\n  [enableFilter]=\"config.components?.buttons?.enableFilter === true\"\r\n  [enableLayout]=\"config.components?.buttons?.enableLayout === true\"\r\n  [enableSelection]=\"config.components?.buttons?.enableSelection === true\"\r\n  [enableZoom]=\"config.components?.buttons?.enableZoom !== false\"\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  [location]=\"config.components?.palette?.location || Corner.TopLeft\"\r\n  [direction]=\"config.components?.palette?.direction || Side.Bottom\"\r\n  [width]=\"config.components?.palette?.width || '12rem'\"\r\n  [gap]=\"config.components?.palette?.gap || '1rem'\"\r\n  [palettes]=\"config.components?.palette?.sections || []\"\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  [location]=\"config.components?.propertyEditor?.location || Corner.TopRight\"\r\n  [direction]=\"config.components?.propertyEditor?.direction || Side.Bottom\"\r\n  [width]=\"config.components?.propertyEditor?.width || '24rem'\"\r\n/>\r\n<daga-errors\r\n  *ngIf=\"\r\n    config.components?.errors !== undefined &&\r\n    config.components?.errors?.enabled !== false\r\n  \"\r\n/>\r\n" }]
-        }], ctorParameters: () => [{ type: DagaConfigurationService }, { type: CanvasProviderService }], propDecorators: { appendTo: [{
-                type: ViewChild,
-                args: ['appendTo']
-            }], diagramButtons: [{
-                type: ViewChild,
-                args: ['diagramButtons']
-            }], palette: [{
-                type: ViewChild,
-                args: ['palette']
-            }], propertyEditor: [{
-                type: ViewChild,
-                args: ['propertyEditor']
-            }] } });
-
-/**
- * The context of a diagram. Every separate diagram must be contained within its own {@link DiagramComponent} and every {@link DiagramComponent} must contain its own {@link DiagramEditorComponent}.
- * This component defines a {@link DagaConfigurationService} and a {@link CanvasProviderService}, which is shared by all the components within and allows accessing the configuration and the canvas of this component's diagram, respectively.
- * @public
- */
-class DiagramComponent {
     /**
      * Getter for the canvas of this diagram.
      * @public
@@ -1786,6 +1866,13 @@ class DiagramComponent {
     get canvas() {
         return this.canvasProvider.getCanvas();
     }
+    /**
+     * Subject used to track when the canvas has been updated.
+     * @public
+     */
+    get canvas$() {
+        return this.canvasProvider.canvas$;
+    }
     /**
      * Serialized model for the diagram. Used for data binding to the model.
      * @public
@@ -1806,9 +1893,10 @@ class DiagramComponent {
             }
         }
     }
-    constructor(configurationService, canvasProvider) {
+    constructor(configurationService, canvasProvider, cdr) {
         this.configurationService = configurationService;
         this.canvasProvider = canvasProvider;
+        this.cdr = cdr;
         this.importer = new DagaImporter();
         this.exporter = new DagaExporter();
         /**
@@ -1821,15 +1909,39 @@ class DiagramComponent {
          * @public
          */
         this.diagramEvent = new EventEmitter();
+        this.Corner = Corner;
+        this.Side = Side;
     }
     ngOnInit() {
-        this.configurationService.init(this.config);
+        this.canvasProvider.initCanvas(this, this.config);
+        this.setUpCanvas(this.canvasProvider.getCanvas());
     }
     ngAfterViewInit() {
-        const canvas = this.canvas;
-        if (this.model) {
-            this.importer.import(canvas.model, this.model);
-        }
+        this.canvasProvider.initCanvasView(this.appendTo.nativeElement);
+        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))
+            .subscribe((c) => {
+            // reset model of the old canvas
+            this.model = this.exporter.export(c.model);
+            this.setUpCanvas(c);
+        });
+        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();
+        });
+    }
+    ngOnDestroy() {
+        this.configurationSub?.unsubscribe();
+        this.canvasSub?.unsubscribe();
+    }
+    setUpCanvas(canvas) {
         canvas.diagramEvent$.subscribe((e) => {
             this.diagramEvent.emit(e);
         });
@@ -1838,22 +1950,34 @@ class DiagramComponent {
             this._model = exportedModel;
             this.modelChange.emit(exportedModel);
         });
+        if (this.model) {
+            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 }], 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: "editor", first: true, predicate: DiagramEditorComponent, descendants: true }], ngImport: i0, template: `<daga-diagram-editor /><ng-content />`, isInline: true, dependencies: [{ kind: "component", type: DiagramEditorComponent, selector: "daga-diagram-editor" }] }); }
+    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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DiagramComponent, decorators: [{
             type: Component,
-            args: [{
-                    standalone: true,
-                    selector: 'daga-diagram',
-                    template: `<daga-diagram-editor /><ng-content />`,
-                    providers: [CanvasProviderService, DagaConfigurationService],
-                    imports: [DiagramEditorComponent]
-                }]
-        }], ctorParameters: () => [{ type: DagaConfigurationService }, { type: CanvasProviderService }], propDecorators: { editor: [{
+            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: [{
+                type: ViewChild,
+                args: ['appendTo']
+            }], diagramButtons: [{
+                type: ViewChild,
+                args: ['diagramButtons']
+            }], palette: [{
+                type: ViewChild,
+                args: ['palette']
+            }], propertyEditor: [{
                 type: ViewChild,
-                args: [DiagramEditorComponent]
+                args: ['propertyEditor']
             }], config: [{
                 type: Input
             }], model: [{
@@ -1869,7 +1993,6 @@ class DagaModule {
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.5", ngImport: i0, type: DagaModule, imports: [CollapseButtonComponent,
             DiagramButtonsComponent,
             DiagramComponent,
-            DiagramEditorComponent,
             ErrorsComponent,
             ObjectEditorComponent,
             PaletteComponent,
@@ -1877,11 +2000,10 @@ class DagaModule {
             TextMapEditorComponent,
             PropertyEditorComponent,
             CommonModule,
-            FormsModule], exports: [DiagramComponent, DiagramEditorComponent] }); }
+            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,
-            DiagramEditorComponent,
             ErrorsComponent,
             ObjectEditorComponent,
             PaletteComponent,
@@ -1899,7 +2021,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                         CollapseButtonComponent,
                         DiagramButtonsComponent,
                         DiagramComponent,
-                        DiagramEditorComponent,
                         ErrorsComponent,
                         ObjectEditorComponent,
                         PaletteComponent,
@@ -1909,7 +2030,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                         CommonModule,
                         FormsModule
                     ],
-                    exports: [DiagramComponent, DiagramEditorComponent],
+                    exports: [DiagramComponent],
                     providers: [DagaConfigurationService, CanvasProviderService]
                 }]
         }] });
@@ -1918,5 +2039,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { CanvasProviderService, CollapseButtonComponent, DagaConfigurationService, DagaModule, DiagramButtonsComponent, DiagramComponent, DiagramEditorComponent, ErrorsComponent, ObjectEditorComponent, PaletteComponent, PropertyEditorComponent, TextListEditorComponent, TextMapEditorComponent };
+export { CanvasProviderService, CollapseButtonComponent, DagaConfigurationService, DagaModule, DiagramButtonsComponent, DiagramComponent, ErrorsComponent, ObjectEditorComponent, PaletteComponent, PropertyEditorComponent, TextListEditorComponent, TextMapEditorComponent };
 //# sourceMappingURL=metadev-daga-angular.mjs.map