@metadev/daga-angular 2.0.2

package/fesm2022/metadev-daga-angular.mjs

@@ -0,0 +1,1861 @@
+import { Side, DiagramCanvas, DiagramActions, layouts, Events, DragEvents, setCursorStyle, CursorStyle, AddNodeAction, generalClosedPath, DIAGRAM_FIELD_DEFAULTS, getLeftMargin, getTopMargin, ClosedShape, Type, Property, isObject, equals, Keys, Corner, DagaImporter, DagaExporter } from '@metadev/daga';
+export { ACTION_STACK_SIZE, ActionStack, AddConnectionAction, AddNodeAction, AdjacencyLayout, BreadthAdjacencyLayout, BreadthLayout, ClosedShape, CollabClient, Corner, DagaExporter, DagaImporter, DiagramActions, DiagramCanvas, DiagramConnection, DiagramConnectionSet, DiagramConnectionType, DiagramDecorator, DiagramDecoratorSet, DiagramElement, DiagramElementSet, DiagramEntitySet, DiagramEvent, DiagramField, DiagramFieldSet, DiagramModel, DiagramNode, DiagramNodeSet, DiagramNodeType, DiagramObject, DiagramObjectSet, DiagramPort, DiagramPortSet, DiagramSection, DiagramSectionSet, EditFieldAction, ForceLayout, HorizontalAlign, HorizontalLayout, LineShape, LineStyle, PriorityLayout, Property, PropertySet, RemoveAction, SetGeometryAction, Side, TreeLayout, Type, UpdateValuesAction, ValueSet, VerticalAlign, VerticalLayout, 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 * as d3 from 'd3';
+import * as i2 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import { merge, delay, map } from 'rxjs';
+
+/**
+ * Button used to collapse components that implement it.
+ * @private
+ */
+class CollapseButtonComponent {
+    constructor() {
+        this.collapsed = false;
+        this.disabled = false;
+        this.direction = Side.Bottom;
+        this.rule = 'visibility';
+        this.collapsedValue = 'collapse';
+        this.visibleValue = 'visible';
+        this.Side = Side;
+    }
+    toggleCollapse() {
+        if (!this.disabled) {
+            this.collapsed = !this.collapsed;
+            let selection;
+            if (this.collapsableSelector instanceof ElementRef) {
+                selection = d3.select(this.collapsableSelector.nativeElement);
+                if (this.collapsableAdditionalSelector) {
+                    selection = selection.select(this.collapsableAdditionalSelector);
+                }
+            }
+            else if (this.collapsableSelector instanceof HTMLElement) {
+                selection = d3.select(this.collapsableSelector);
+                if (this.collapsableAdditionalSelector) {
+                    selection = selection.select(this.collapsableAdditionalSelector);
+                }
+            }
+            else {
+                selection = d3.select(this.collapsableSelector);
+                if (this.collapsableAdditionalSelector) {
+                    selection = selection.select(this.collapsableAdditionalSelector);
+                }
+            }
+            selection.style(this.rule, this.collapsed ? this.collapsedValue : this.visibleValue);
+        }
+    }
+    getClass() {
+        switch (this.direction) {
+            case Side.Right:
+                if (this.disabled) {
+                    return 'daga-horizontal-none';
+                }
+                else if (this.collapsed) {
+                    return 'daga-horizontal-right';
+                }
+                else {
+                    return 'daga-horizontal-left';
+                }
+            case Side.Bottom:
+                if (this.disabled) {
+                    return 'daga-vertical-none';
+                }
+                else if (this.collapsed) {
+                    return 'daga-vertical-down';
+                }
+                else {
+                    return 'daga-vertical-up';
+                }
+            case Side.Left:
+                if (this.disabled) {
+                    return 'daga-horizontal-none';
+                }
+                else if (this.collapsed) {
+                    return 'daga-horizontal-left';
+                }
+                else {
+                    return 'daga-horizontal-right';
+                }
+            case Side.Top:
+                if (this.disabled) {
+                    return 'daga-vertical-none';
+                }
+                else if (this.collapsed) {
+                    return 'daga-vertical-up';
+                }
+                else {
+                    return 'daga-vertical-down';
+                }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: CollapseButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.2", type: CollapseButtonComponent, isStandalone: true, selector: "daga-collapse-button", inputs: { collapsableSelector: "collapsableSelector", collapsableAdditionalSelector: "collapsableAdditionalSelector", collapsed: "collapsed", disabled: "disabled", direction: "direction", rule: "rule", collapsedValue: "collapsedValue", visibleValue: "visibleValue" }, ngImport: i0, template: "<button\r\n  class=\"daga-collapse-button daga-{{ direction }}\"\r\n  (click)=\"toggleCollapse()\"\r\n>\r\n  <div [class]=\"getClass()\"></div>\r\n</button>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: CollapseButtonComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'daga-collapse-button', imports: [CommonModule], template: "<button\r\n  class=\"daga-collapse-button daga-{{ direction }}\"\r\n  (click)=\"toggleCollapse()\"\r\n>\r\n  <div [class]=\"getClass()\"></div>\r\n</button>\r\n" }]
+        }], propDecorators: { collapsableSelector: [{
+                type: Input
+            }], collapsableAdditionalSelector: [{
+                type: Input
+            }], collapsed: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], direction: [{
+                type: Input
+            }], rule: [{
+                type: Input
+            }], collapsedValue: [{
+                type: Input
+            }], visibleValue: [{
+                type: Input
+            }] } });
+
+/**
+ * A provider for the {@link Canvas} associated with a {@link DiagramComponent} context.
+ * @public
+ */
+class CanvasProviderService {
+    /**
+     * Initialize the diagram canvas object of this context.
+     * @private
+     * @param parentComponent A diagram editor.
+     * @param config A diagram configuration.
+     */
+    initCanvas(parentComponent, config) {
+        this._canvas = new DiagramCanvas(parentComponent, config);
+    }
+    /**
+     * Attach the canvas of this context to an HTML Element to render it there.
+     * @private
+     * @param appendTo An HTML Element.
+     */
+    initCanvasView(appendTo) {
+        this._canvas.initView(appendTo);
+    }
+    /**
+     * Get the diagram canvas of this context. Should only be called after the view of the {@link DiagramComponent} context has been initialized.
+     * @public
+     * @returns A diagram canvas.
+     */
+    getCanvas() {
+        return this._canvas;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: CanvasProviderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: CanvasProviderService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: CanvasProviderService, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * Buttons used to trigger diagram functionalities by the user.
+ * @private
+ */
+class DiagramButtonsComponent {
+    get canvas() {
+        return this.canvasProvider.getCanvas();
+    }
+    constructor(canvasProvider) {
+        this.canvasProvider = canvasProvider;
+        this.enableAction = false;
+        this.enableFilter = false;
+        this.enableLayout = false;
+        this.enableSelection = false;
+        this.enableZoom = true;
+        this.filterOn = false;
+        this.collapsed = true;
+        this.animationOngoing = false;
+        this.DiagramActions = DiagramActions;
+    }
+    ngAfterViewInit() {
+        switch (this.direction) {
+            case Side.Bottom:
+                this.sizeAttribute = 'height';
+                this.transformFunction = 'scaleY';
+                this.transformOrigin = 'top';
+                this.marginSide = 'bottom';
+                break;
+            case Side.Top:
+                this.sizeAttribute = 'height';
+                this.transformFunction = 'scaleY';
+                this.transformOrigin = 'bottom';
+                this.marginSide = 'top';
+                break;
+            case Side.Left:
+                this.sizeAttribute = 'width';
+                this.transformFunction = 'scaleX';
+                this.transformOrigin = 'right';
+                this.marginSide = 'left';
+                break;
+            case Side.Right:
+                this.sizeAttribute = 'width';
+                this.transformFunction = 'scaleX';
+                this.transformOrigin = 'left';
+                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);
+    }
+    // Collapse functions
+    async toggleCollapse() {
+        if (!this.animationOngoing) {
+            const duration = 500;
+            const collapsableButtons = d3.select(this.collapsableButtons.nativeElement);
+            if (this.collapsed) {
+                this.collapsed = false;
+                collapsableButtons
+                    .transition()
+                    .duration(duration)
+                    .ease(d3.easeLinear)
+                    .style(this.sizeAttribute, this.collapsableButtonsSize)
+                    .style('transform', `${this.transformFunction}(1)`);
+                setTimeout(() => {
+                    this.animationOngoing = false;
+                }, duration);
+            }
+            else {
+                this.collapsed = true;
+                collapsableButtons
+                    .transition()
+                    .duration(duration)
+                    .ease(d3.easeLinear)
+                    .style(this.sizeAttribute, '0rem')
+                    .style('transform', `${this.transformFunction}(0)`);
+                setTimeout(() => {
+                    this.animationOngoing = false;
+                }, duration);
+            }
+        }
+    }
+    // Button functions
+    zoomIn() {
+        this.canvas.zoomBy(this.canvas.zoomFactor);
+    }
+    zoomOut() {
+        this.canvas.zoomBy(1 / this.canvas.zoomFactor);
+    }
+    center() {
+        this.canvas.center();
+    }
+    layout() {
+        if (this.canvas.layoutFormat && this.canvas.layoutFormat in layouts) {
+            layouts[this.canvas.layoutFormat].apply(this.canvas.model);
+        }
+    }
+    filter() {
+        this.filterOn = !this.filterOn;
+        const priorityThresholds = this.canvas.getPriorityThresholdOptions();
+        if (priorityThresholds && priorityThresholds.length >= 2) {
+            this.canvas.setPriorityThreshold(priorityThresholds[this.filterOn ? 1 : 0]);
+        }
+    }
+    undo() {
+        this.canvas.actionStack.undo();
+    }
+    redo() {
+        this.canvas.actionStack.redo();
+    }
+    copySelection() {
+        this.canvas.userSelection.copyToClipboard();
+    }
+    cutSelection() {
+        this.canvas.userSelection.cutToClipboard();
+    }
+    pasteSelection() {
+        this.canvas.userSelection.pasteFromClipboard();
+    }
+    deleteSelection() {
+        this.canvas.userSelection.removeFromModel();
+    }
+    startMultipleSelection() {
+        this.canvas.multipleSelectionOn = true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: DiagramButtonsComponent, deps: [{ token: CanvasProviderService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.2", type: DiagramButtonsComponent, isStandalone: true, selector: "daga-diagram-buttons", inputs: { location: "location", direction: "direction", 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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: DiagramButtonsComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'daga-diagram-buttons', imports: [CommonModule], template: "<div class=\"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: [{
+                type: ViewChild,
+                args: ['collapsableButtons']
+            }], location: [{
+                type: Input
+            }], direction: [{
+                type: Input
+            }], enableAction: [{
+                type: Input
+            }], enableFilter: [{
+                type: Input
+            }], enableLayout: [{
+                type: Input
+            }], enableSelection: [{
+                type: Input
+            }], enableZoom: [{
+                type: Input
+            }] } });
+
+/**
+ * Displays the errors detected by a diagram's validators.
+ * @private
+ * @see DiagramValidator
+ */
+class ErrorsComponent {
+    get canvas() {
+        return this.canvasProvider.getCanvas();
+    }
+    constructor(canvasProvider) {
+        this.canvasProvider = canvasProvider;
+        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();
+    }
+    selectPanel() {
+        return d3
+            .select(this.errorsContainer.nativeElement)
+            .select('.daga-error-panel');
+    }
+    validate() {
+        this.errors = [];
+        for (const validator of this.canvas.validators) {
+            const newErrors = validator.validate(this.canvas.model);
+            this.errors = [...this.errors, ...newErrors];
+        }
+    }
+    showError(error) {
+        if (error.elementId &&
+            (error.propertyNames === undefined || error.propertyNames.length === 0)) {
+            const element = this.canvas.model.nodes.get(error.elementId) ||
+                this.canvas.model.connections.get(error.elementId);
+            if (element) {
+                this.canvas.userHighlight.add(element);
+            }
+        }
+        else if (error.elementId &&
+            error.propertyNames !== undefined &&
+            error.propertyNames.length > 0) {
+            this.canvas.userSelection.openInPropertyEditor(this.canvas.model.nodes.get(error.elementId) ||
+                this.canvas.model.connections.get(error.elementId));
+            const element = this.canvas.model.nodes.get(error.elementId) ||
+                this.canvas.model.connections.get(error.elementId);
+            if (element) {
+                this.canvas.userHighlight.add(element);
+            }
+            this.canvas.parentComponent?.propertyEditor?.highlightProperty(...error.propertyNames);
+        }
+        else if (!error.elementId &&
+            error.propertyNames !== undefined &&
+            error.propertyNames.length > 0) {
+            this.canvas.userSelection.openInPropertyEditor();
+            this.canvas.parentComponent?.propertyEditor?.highlightProperty(...error.propertyNames);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: ErrorsComponent, deps: [{ token: CanvasProviderService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.2", type: ErrorsComponent, isStandalone: true, selector: "daga-errors", viewQueries: [{ propertyName: "errorsContainer", first: true, predicate: ["errors"], descendants: true }], ngImport: i0, template: "<div #errorsContainer class=\"daga-errors\">\r\n  <div\r\n    *ngIf=\"errors.length === 0\"\r\n    class=\"daga-errors-summary daga-no-errors daga-prevent-user-select\"\r\n  >\r\n    <span>No errors found</span>\r\n  </div>\r\n  <div\r\n    *ngIf=\"errors.length > 0\"\r\n    class=\"daga-errors-summary daga-with-errors daga-prevent-user-select\"\r\n  >\r\n    <span>{{ errors.length }} errors found</span>\r\n    <div class=\"daga-collapse-button-container\">\r\n      <daga-collapse-button\r\n        [collapsableSelector]=\"errorsContainer\"\r\n        [collapsableAdditionalSelector]=\"'.daga-error-panel'\"\r\n        [direction]=\"Side.Top\"\r\n        [rule]=\"'display'\"\r\n        [collapsedValue]=\"'none'\"\r\n        [visibleValue]=\"'block'\"\r\n      />\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"errors.length > 0\" class=\"daga-error-panel\">\r\n    <ol>\r\n      <li\r\n        *ngFor=\"let error of errors; index as i\"\r\n        (click)=\"showError(error)\"\r\n        [innerHTML]=\"error.message\"\r\n      ></li>\r\n    </ol>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CollapseButtonComponent, selector: "daga-collapse-button", inputs: ["collapsableSelector", "collapsableAdditionalSelector", "collapsed", "disabled", "direction", "rule", "collapsedValue", "visibleValue"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: ErrorsComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'daga-errors', imports: [CommonModule, CollapseButtonComponent], template: "<div #errorsContainer class=\"daga-errors\">\r\n  <div\r\n    *ngIf=\"errors.length === 0\"\r\n    class=\"daga-errors-summary daga-no-errors daga-prevent-user-select\"\r\n  >\r\n    <span>No errors found</span>\r\n  </div>\r\n  <div\r\n    *ngIf=\"errors.length > 0\"\r\n    class=\"daga-errors-summary daga-with-errors daga-prevent-user-select\"\r\n  >\r\n    <span>{{ errors.length }} errors found</span>\r\n    <div class=\"daga-collapse-button-container\">\r\n      <daga-collapse-button\r\n        [collapsableSelector]=\"errorsContainer\"\r\n        [collapsableAdditionalSelector]=\"'.daga-error-panel'\"\r\n        [direction]=\"Side.Top\"\r\n        [rule]=\"'display'\"\r\n        [collapsedValue]=\"'none'\"\r\n        [visibleValue]=\"'block'\"\r\n      />\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"errors.length > 0\" class=\"daga-error-panel\">\r\n    <ol>\r\n      <li\r\n        *ngFor=\"let error of errors; index as i\"\r\n        (click)=\"showError(error)\"\r\n        [innerHTML]=\"error.message\"\r\n      ></li>\r\n    </ol>\r\n  </div>\r\n</div>\r\n" }]
+        }], ctorParameters: () => [{ type: CanvasProviderService }], propDecorators: { errorsContainer: [{
+                type: ViewChild,
+                args: ['errors']
+            }] } });
+
+/**
+ * Palette that the user can drag and drop nodes from.
+ * @private
+ * @see DiagramConfig
+ * @see DiagramNode
+ */
+class PaletteComponent {
+    get canvas() {
+        return this.canvasProvider.getCanvas();
+    }
+    constructor(canvasProvider) {
+        this.canvasProvider = canvasProvider;
+        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];
+    }
+    ngAfterViewInit() {
+        this.refreshPalette();
+        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;
+        }
+    }
+    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);
+            }
+        }
+    }
+    selectPanel() {
+        return d3.select(this.panel.nativeElement);
+    }
+    selectPalette() {
+        return this.selectPanel().select('.daga-palette-view');
+    }
+    appendCategories(categories) {
+        const thisComponent = this.selectPalette()
+            .append('select')
+            .style('width', '100%')
+            .style('height', '2rem')
+            .style('padding', '0.5rem')
+            .style('border-radius', '0.25rem')
+            .style('background-color', '#f7f8fc')
+            .style('border', `1px solid #e6e6e6`);
+        thisComponent.append('option').attr('value', '').text('(None selected)');
+        for (const categoryKey in categories) {
+            thisComponent
+                .append('option')
+                .attr('value', categoryKey)
+                .text(categoryKey);
+        }
+        thisComponent.on(Events.Change, () => {
+            if (this.currentCategory) {
+                this.selectPalette()
+                    .selectAll(`.daga-template-container.daga-in-category`)
+                    .remove();
+            }
+            const selectedKey = thisComponent.property('value');
+            this.currentCategory = selectedKey;
+            const templatesInCategory = categories[selectedKey] || [];
+            for (const template of templatesInCategory) {
+                this.appendTemplate(template, 'daga-in-category');
+            }
+        });
+        if (this.currentCategory) {
+            // if we had a category already selected, re-select it
+            thisComponent.property('value', this.currentCategory);
+            thisComponent.dispatch(Events.Change);
+        }
+    }
+    appendTemplate(template, classes) {
+        if (template.templateType === 'node') {
+            const nodeType = this.canvas.model.nodes.types.get(template.type);
+            if (nodeType) {
+                this.appendNodeTemplate(nodeType, template, classes);
+            }
+            else {
+                console.error(`Could not find a node type called '${template.type}'`);
+            }
+        }
+        else if (template.templateType === 'connection') {
+            {
+                const connectionType = this.canvas.model.connections.types.get(template.type);
+                if (connectionType) {
+                    this.appendConnectionTemplate(connectionType, template, classes);
+                }
+                else {
+                    console.error(`Could not find a connection type called '${template.type}'`);
+                }
+            }
+        }
+    }
+    appendNodeTemplate(type, templateConfig, classes) {
+        if (this.priorityThreshold !== undefined &&
+            type.priority < this.priorityThreshold) {
+            return;
+        }
+        const thisComponent = this.selectPalette()
+            .append('div')
+            .attr('class', `daga-template-container ${classes !== undefined ? classes : ''}`)
+            .style('width', `${type.defaultWidth}px`)
+            .style('height', `${type.defaultHeight}px`)
+            .call(d3
+            .drag()
+            .on(DragEvents.Drag, (event) => {
+            if (this.canvas.canUserPerformAction(DiagramActions.AddNode)) {
+                const pointerCoords = this.canvas.getPointerLocationRelativeToScreen(event);
+                if (pointerCoords.length < 2 ||
+                    isNaN(pointerCoords[0]) ||
+                    isNaN(pointerCoords[1])) {
+                    return;
+                }
+                thisComponent
+                    .style('position', 'fixed')
+                    .style('left', `${pointerCoords[0] - type.defaultWidth / 2}px`)
+                    .style('top', `${pointerCoords[1] - type.defaultHeight / 2}px`)
+                    .style('z-index', 1);
+            }
+        })
+            .on(DragEvents.Start, (event) => {
+            if (this.canvas.canUserPerformAction(DiagramActions.AddNode)) {
+                setCursorStyle(CursorStyle.Grabbing);
+                const pointerCoords = this.canvas.getPointerLocationRelativeToScreen(event);
+                if (pointerCoords.length < 2 ||
+                    isNaN(pointerCoords[0]) ||
+                    isNaN(pointerCoords[1])) {
+                    return;
+                }
+                thisComponent
+                    .style('position', 'fixed')
+                    .style('left', `${pointerCoords[0] - type.defaultWidth / 2}px`)
+                    .style('top', `${pointerCoords[1] - type.defaultHeight / 2}px`)
+                    .style('z-index', 1);
+                // when trying to place a unique node in a diagram that already has a node of that type, set cursor style to not allowed
+                if (type.isUnique &&
+                    this.canvas.model.nodes.find((n) => !n.removed && n.type.id === type.id) !== undefined) {
+                    setCursorStyle(CursorStyle.NotAllowed);
+                }
+            }
+        })
+            .on(DragEvents.End, (event) => {
+            if (this.canvas.canUserPerformAction(DiagramActions.AddNode)) {
+                // take node back to its original position
+                setCursorStyle(CursorStyle.Auto);
+                thisComponent
+                    .style('position', 'relative')
+                    .style('left', 0)
+                    .style('top', 0)
+                    .style('z-index', 'auto');
+                // try to place node
+                if (type.isUnique &&
+                    this.canvas.model.nodes.find((n) => !n.removed && n.type.id === type.id) !== undefined) {
+                    // can't place, it's unique and that node is already in the model
+                    return;
+                }
+                const pointerCoordsRelativeToScreen = this.canvas.getPointerLocationRelativeToScreen(event);
+                if (pointerCoordsRelativeToScreen.length < 2 ||
+                    isNaN(pointerCoordsRelativeToScreen[0]) ||
+                    isNaN(pointerCoordsRelativeToScreen[1])) {
+                    // can't place, position is incorrect
+                    return;
+                }
+                const element = document.elementFromPoint(pointerCoordsRelativeToScreen[0], pointerCoordsRelativeToScreen[1]);
+                if (element &&
+                    !this.canvas.selectCanvasView().node()?.contains(element)) {
+                    // can't place, node hasn't been dropped on the canvas
+                    return;
+                }
+                const pointerCoords = this.canvas.getPointerLocationRelativeToCanvas(event);
+                if (pointerCoords.length < 2 ||
+                    isNaN(pointerCoords[0]) ||
+                    isNaN(pointerCoords[1])) {
+                    // can't place, position is incorrect
+                    return;
+                }
+                let newNodeCoords = [
+                    pointerCoords[0] - type.defaultWidth / 2,
+                    pointerCoords[1] - type.defaultHeight / 2
+                ];
+                if (this.canvas.snapToGrid) {
+                    newNodeCoords = this.canvas.getClosestGridPoint(newNodeCoords);
+                }
+                const addNodeAction = new AddNodeAction(this.canvas, type, newNodeCoords, templateConfig.label, templateConfig.values);
+                addNodeAction.do();
+                this.canvas.actionStack.add(addNodeAction);
+                // reset cursor
+                setCursorStyle();
+            }
+        }))
+            .append('svg')
+            .attr('class', `palette-node ${type.id}`)
+            .style('position', 'relative')
+            .style('left', 0)
+            .style('top', 0)
+            .style('width', '100%')
+            .style('height', '100%');
+        switch (type.look.lookType) {
+            case 'shaped-look':
+                thisComponent
+                    .append('path')
+                    .attr('d', generalClosedPath(type.look.shape, 0, 0, type.defaultWidth, type.defaultHeight))
+                    .attr('fill', type.look.fillColor)
+                    .attr('stroke', type.look.borderColor)
+                    .attr('stroke-width', '1px');
+                break;
+            case 'image-look':
+                thisComponent
+                    .append('image')
+                    .attr('x', 0)
+                    .attr('y', 0)
+                    .attr('width', type.defaultWidth)
+                    .attr('height', type.defaultHeight)
+                    .attr('href', type.look.backgroundImage)
+                    .attr('preserveAspectRatio', 'none');
+                break;
+            case 'stretchable-image-look':
+                thisComponent
+                    .append('image')
+                    .attr('x', 0)
+                    .attr('y', 0)
+                    .attr('width', type.look.leftMargin)
+                    .attr('height', type.look.topMargin)
+                    .attr('href', type.look.backgroundImageTopLeft)
+                    .attr('preserveAspectRatio', 'none');
+                thisComponent
+                    .append('image')
+                    .attr('x', type.look.leftMargin)
+                    .attr('y', 0)
+                    .attr('width', type.defaultWidth - type.look.rightMargin - type.look.leftMargin)
+                    .attr('height', type.look.topMargin)
+                    .attr('href', type.look.backgroundImageTop)
+                    .attr('preserveAspectRatio', 'none');
+                thisComponent
+                    .append('image')
+                    .attr('x', type.defaultWidth - type.look.rightMargin)
+                    .attr('y', 0)
+                    .attr('width', type.look.rightMargin)
+                    .attr('height', type.look.topMargin)
+                    .attr('href', type.look.backgroundImageTopRight)
+                    .attr('preserveAspectRatio', 'none');
+                thisComponent
+                    .append('image')
+                    .attr('x', 0)
+                    .attr('y', type.look.topMargin)
+                    .attr('width', type.look.leftMargin)
+                    .attr('height', type.defaultHeight - type.look.bottomMargin - type.look.topMargin)
+                    .attr('href', type.look.backgroundImageLeft)
+                    .attr('preserveAspectRatio', 'none');
+                thisComponent
+                    .append('image')
+                    .attr('x', type.look.leftMargin)
+                    .attr('y', type.look.topMargin)
+                    .attr('width', type.defaultWidth - type.look.rightMargin - type.look.leftMargin)
+                    .attr('height', type.defaultHeight - type.look.bottomMargin - type.look.topMargin)
+                    .attr('href', type.look.backgroundImageCenter)
+                    .attr('preserveAspectRatio', 'none');
+                thisComponent
+                    .append('image')
+                    .attr('x', type.defaultWidth - type.look.rightMargin)
+                    .attr('y', type.look.topMargin)
+                    .attr('width', type.look.rightMargin)
+                    .attr('height', type.defaultHeight - type.look.bottomMargin - type.look.topMargin)
+                    .attr('href', type.look.backgroundImageRight)
+                    .attr('preserveAspectRatio', 'none');
+                thisComponent
+                    .append('image')
+                    .attr('x', 0)
+                    .attr('y', type.defaultHeight - type.look.bottomMargin)
+                    .attr('width', type.look.leftMargin)
+                    .attr('height', type.look.bottomMargin)
+                    .attr('href', type.look.backgroundImageBottomLeft)
+                    .attr('preserveAspectRatio', 'none');
+                thisComponent
+                    .append('image')
+                    .attr('x', type.look.leftMargin)
+                    .attr('y', type.defaultHeight - type.look.bottomMargin)
+                    .attr('width', type.defaultWidth - type.look.rightMargin - type.look.leftMargin)
+                    .attr('height', type.look.bottomMargin)
+                    .attr('href', type.look.backgroundImageBottom)
+                    .attr('preserveAspectRatio', 'none');
+                thisComponent
+                    .append('image')
+                    .attr('x', type.defaultWidth - type.look.rightMargin)
+                    .attr('y', type.defaultHeight - type.look.bottomMargin)
+                    .attr('width', type.look.rightMargin)
+                    .attr('height', type.look.bottomMargin)
+                    .attr('href', type.look.backgroundImageBottomRight)
+                    .attr('preserveAspectRatio', 'none');
+        }
+        if (templateConfig.label) {
+            const labelConfig = {
+                ...DIAGRAM_FIELD_DEFAULTS,
+                ...type.label,
+                ...templateConfig.labelLook
+            };
+            thisComponent
+                .append('text')
+                .attr('transform', `translate(${(getLeftMargin(labelConfig) + type.defaultWidth) / 2},${(getTopMargin(labelConfig) + type.defaultHeight) / 2})`)
+                .attr('x', 0)
+                .attr('y', 0)
+                .attr('font-size', `${labelConfig.fontSize}px`)
+                .attr('text-anchor', 'middle')
+                .attr('font-family', labelConfig.fontFamily)
+                .attr('font-weight', 400)
+                .attr('fill', labelConfig.color)
+                .attr('stroke', 'none')
+                .style('font-kerning', 'none')
+                .style('user-select', 'none')
+                .text(templateConfig.label);
+        }
+    }
+    appendConnectionTemplate(type, templateConfig, classes) {
+        const thisComponent = this.selectPalette()
+            .append('div')
+            .attr('class', `daga-template-container ${classes !== undefined ? classes : ''}`)
+            .style('width', `${templateConfig.width}px`)
+            .style('height', `${templateConfig.height}px`)
+            .append('svg')
+            .attr('class', `palette-button ${type.id}`)
+            .style('position', 'relative')
+            .style('left', 0)
+            .style('top', 0)
+            .style('width', '100%')
+            .style('height', '100%')
+            .on('click', () => {
+            this.canvas.connectionType = type;
+        });
+        thisComponent
+            .append('path')
+            .attr('d', generalClosedPath(ClosedShape.Rectangle, 0, 0, templateConfig.width, templateConfig.height))
+            .attr('fill', templateConfig.backgroundColor)
+            .attr('stroke', 'black')
+            .attr('stroke-width', '1px');
+        if (templateConfig.icon !== '') {
+            thisComponent
+                .append('image')
+                .attr('x', 0)
+                .attr('y', 0)
+                .attr('width', templateConfig.width)
+                .attr('height', templateConfig.height)
+                .attr('href', templateConfig.icon);
+        }
+        if (templateConfig.label !== '') {
+            thisComponent
+                .append('text')
+                .attr('transform', `translate(${templateConfig.width / 2},${templateConfig.height / 2 + 5})`)
+                .attr('x', 0)
+                .attr('y', 0)
+                .attr('font-size', '20px')
+                .attr('text-anchor', 'middle')
+                .attr('font-family', "'Wonder Unit Sans', sans-serif")
+                .attr('font-weight', 400)
+                .attr('fill', '#000000')
+                .attr('stroke', 'none')
+                .style('font-kerning', 'none')
+                .style('user-select', 'none')
+                .text(templateConfig.label);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: PaletteComponent, deps: [{ token: CanvasProviderService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.2", type: PaletteComponent, isStandalone: true, selector: "daga-palette", inputs: { palettes: "palettes", currentPalette: "currentPalette", currentCategory: "currentCategory", location: "location", direction: "direction", width: "width" }, viewQueries: [{ propertyName: "panel", first: true, predicate: ["panel"], descendants: true }], ngImport: i0, template: "<div #panel class=\"daga-panel daga-{{ location }} daga-{{ direction }}\">\r\n  <daga-collapse-button\r\n    #collapseButton\r\n    [direction]=\"direction\"\r\n    [collapsableSelector]=\"panel\"\r\n    collapsableAdditionalSelector=\".daga-panel-content\"\r\n    rule=\"display\"\r\n    collapsedValue=\"none\"\r\n    visibleValue=\"block\"\r\n  />\r\n  <div class=\"daga-panel-content\">\r\n    <div *ngIf=\"palettes.length > 1\" class=\"daga-panel-tabs\">\r\n      <div\r\n        *ngFor=\"let palette of palettes\"\r\n        class=\"daga-panel-tab\"\r\n        [class]=\"palette === currentPalette ? 'daga-current-tab' : ''\"\r\n        (click)=\"switchPalette(palette)\"\r\n      >\r\n        {{ palette.name }}\r\n      </div>\r\n    </div>\r\n    <div class=\"daga-palette-view\"></div>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CollapseButtonComponent, selector: "daga-collapse-button", inputs: ["collapsableSelector", "collapsableAdditionalSelector", "collapsed", "disabled", "direction", "rule", "collapsedValue", "visibleValue"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: PaletteComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'daga-palette', imports: [CommonModule, CollapseButtonComponent], template: "<div #panel class=\"daga-panel daga-{{ location }} daga-{{ direction }}\">\r\n  <daga-collapse-button\r\n    #collapseButton\r\n    [direction]=\"direction\"\r\n    [collapsableSelector]=\"panel\"\r\n    collapsableAdditionalSelector=\".daga-panel-content\"\r\n    rule=\"display\"\r\n    collapsedValue=\"none\"\r\n    visibleValue=\"block\"\r\n  />\r\n  <div class=\"daga-panel-content\">\r\n    <div *ngIf=\"palettes.length > 1\" class=\"daga-panel-tabs\">\r\n      <div\r\n        *ngFor=\"let palette of palettes\"\r\n        class=\"daga-panel-tab\"\r\n        [class]=\"palette === currentPalette ? 'daga-current-tab' : ''\"\r\n        (click)=\"switchPalette(palette)\"\r\n      >\r\n        {{ palette.name }}\r\n      </div>\r\n    </div>\r\n    <div class=\"daga-palette-view\"></div>\r\n  </div>\r\n</div>\r\n" }]
+        }], ctorParameters: () => [{ type: CanvasProviderService }], propDecorators: { panel: [{
+                type: ViewChild,
+                args: ['panel']
+            }], palettes: [{
+                type: Input
+            }], currentPalette: [{
+                type: Input
+            }], currentCategory: [{
+                type: Input
+            }], location: [{
+                type: Input
+            }], direction: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }] } });
+
+/**
+ * Editor of the settings of a property editor, such as what properties are displayed and hidden and in what order.
+ * @private
+ * @see PropertyEditor
+ * @see ValueSet
+ */
+class PropertySettingsComponent {
+    get canvas() {
+        return this.canvasProvider.getCanvas();
+    }
+    get valueSet() {
+        return this._valueSet;
+    }
+    set valueSet(valueSet) {
+        if (this._valueSet !== valueSet) {
+            this._valueSet = valueSet;
+            // force value change detection
+            this.cdr.detectChanges();
+        }
+    }
+    constructor(element, cdr, canvasProvider) {
+        this.element = element;
+        this.cdr = cdr;
+        this.canvasProvider = canvasProvider;
+        /** How many property-settings elements are parents of this property-settings element. @private */
+        this.depth = 0;
+        // Attributes for the template
+        this.Type = Type;
+        this.getStyleClassName = getStyleClassName;
+        this.asString = asString;
+    }
+    ngAfterViewInit() {
+        this.addListeners();
+    }
+    addListeners() {
+        for (const property of this.valueSet?.displayedProperties || []) {
+            let propertyElementWidth = 0;
+            let propertyElementHeight = 0;
+            let closestDropbarIndex = 0;
+            const propertyElement = d3
+                .select(this.element.nativeElement)
+                .select(`.daga-property.${getStyleClassName(property.name)}.daga-depth-${this.depth}`);
+            propertyElement.select('button.daga-move-button').call(d3
+                .drag()
+                .on(DragEvents.Start, (event) => {
+                setCursorStyle(CursorStyle.Grabbing);
+                const pointerCoords = this.canvas.getPointerLocationRelativeToScreen(event);
+                if (pointerCoords.length < 2 ||
+                    isNaN(pointerCoords[0]) ||
+                    isNaN(pointerCoords[1])) {
+                    return;
+                }
+                const boundingRect = propertyElement
+                    .node()
+                    ?.getBoundingClientRect();
+                propertyElementWidth = boundingRect?.width || 0;
+                propertyElementHeight = boundingRect?.height || 0;
+                propertyElement
+                    .style('position', 'fixed')
+                    .style('left', `${pointerCoords[0] - propertyElementWidth / 2}px`)
+                    .style('top', `${pointerCoords[1] - propertyElementHeight / 2}px`)
+                    .style('width', `${propertyElementWidth}px`)
+                    .style('height', `${propertyElementHeight}px`)
+                    .style('z-index', 1);
+            })
+                .on(DragEvents.Drag, (event) => {
+                setCursorStyle(CursorStyle.Grabbing);
+                const pointerCoords = this.canvas.getPointerLocationRelativeToScreen(event);
+                if (pointerCoords.length < 2 ||
+                    isNaN(pointerCoords[0]) ||
+                    isNaN(pointerCoords[1])) {
+                    return;
+                }
+                propertyElement
+                    .style('position', 'fixed')
+                    .style('left', `${pointerCoords[0] - propertyElementWidth / 2}px`)
+                    .style('top', `${pointerCoords[1] - propertyElementHeight / 2}px`)
+                    .style('width', `${propertyElementWidth}px`)
+                    .style('height', `${propertyElementHeight}px`)
+                    .style('z-index', 1);
+                d3.select(this.element.nativeElement)
+                    .select(`.daga-dropbar.daga-index-${closestDropbarIndex}.daga-depth-${this.depth}`)
+                    .style('visibility', 'hidden')
+                    .style('height', 0);
+                closestDropbarIndex = this.getClosestDropbarIndex(pointerCoords);
+                d3.select(this.element.nativeElement)
+                    .select(`.daga-dropbar.daga-index-${closestDropbarIndex}.daga-depth-${this.depth}`)
+                    .style('visibility', 'visible')
+                    .style('height', '0.25rem');
+            })
+                .on(DragEvents.End, (event) => {
+                setCursorStyle(CursorStyle.Auto);
+                propertyElement
+                    .style('position', 'relative')
+                    .style('left', 0)
+                    .style('top', 0)
+                    .style('z-index', 0)
+                    .style('width', 'unset')
+                    .style('height', 'unset');
+                d3.select(this.element.nativeElement)
+                    .select(`.daga-dropbar.daga-index-${closestDropbarIndex}.daga-depth-${this.depth}`)
+                    .style('visibility', 'hidden')
+                    .style('height', 0);
+                const pointerCoords = this.canvas.getPointerLocationRelativeToScreen(event);
+                if (pointerCoords.length < 2 ||
+                    isNaN(pointerCoords[0]) ||
+                    isNaN(pointerCoords[1])) {
+                    return;
+                }
+                closestDropbarIndex = this.getClosestDropbarIndex(pointerCoords);
+                this.valueSet?.displayedProperties?.splice(this.valueSet.displayedProperties.indexOf(property), 1);
+                this.valueSet?.displayedProperties?.splice(closestDropbarIndex, 0, property);
+            }));
+        }
+    }
+    getClosestDropbarIndex(pointerCoords) {
+        const propertyList = this.valueSet?.propertySet.propertyList || [];
+        // note that this is <= and not < as we are counting the index after the last element as well
+        const coordsList = [];
+        for (let i = 0; i <= propertyList.length; ++i) {
+            const boundingRect = d3
+                .select(this.element.nativeElement)
+                .select(`.daga-dropbar.daga-index-${i}.daga-depth-${this.depth}`)
+                .node()
+                ?.getBoundingClientRect();
+            if (boundingRect) {
+                coordsList.push([
+                    boundingRect.x + boundingRect.width / 2,
+                    boundingRect.y + boundingRect.height / 2
+                ]);
+            }
+        }
+        if (coordsList.length > 0) {
+            // euclidean distance
+            const distanceToDropbars = coordsList.map((p) => ((pointerCoords[0] - p[0]) ** 2 + (pointerCoords[1] - p[1]) ** 2) **
+                0.5);
+            const indexOfClosestDropbar = distanceToDropbars.indexOf(Math.min(...distanceToDropbars));
+            return indexOfClosestDropbar;
+        }
+        return 0;
+    }
+    displayProperty(property) {
+        if (this.valueSet === undefined) {
+            return;
+        }
+        let selectedProperty;
+        if (property instanceof Property) {
+            selectedProperty = property;
+        }
+        else if (property instanceof Event) {
+            selectedProperty = this.valueSet?.propertySet.getProperty(property.target?.value || '');
+        }
+        else {
+            selectedProperty = this.valueSet?.propertySet.getProperty(property || '');
+        }
+        if (selectedProperty) {
+            this.valueSet.displayProperty(selectedProperty);
+        }
+        this.cdr.detectChanges();
+        this.addListeners();
+    }
+    hideProperty(property) {
+        if (this.valueSet === undefined) {
+            return;
+        }
+        let selectedProperty;
+        if (property instanceof Property) {
+            selectedProperty = property;
+        }
+        else if (property instanceof Event) {
+            selectedProperty = this.valueSet?.propertySet.getProperty(property.target?.value || '');
+        }
+        else {
+            selectedProperty = this.valueSet?.propertySet.getProperty(property || '');
+        }
+        if (selectedProperty) {
+            this.valueSet.hideProperty(selectedProperty);
+        }
+        this.cdr.detectChanges();
+        this.addListeners();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: PropertySettingsComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: CanvasProviderService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.2", type: PropertySettingsComponent, isStandalone: true, selector: "daga-property-settings", inputs: { valueSet: "valueSet", depth: "depth" }, ngImport: i0, template: "<div\r\n  class=\"daga-dropbar\"\r\n  [class]=\"'daga-index-' + 0 + ' daga-depth-' + depth\"\r\n></div>\r\n<div\r\n  *ngFor=\"let property of valueSet?.displayedProperties || []; index as i\"\r\n  class=\"daga-property-and-dropbar\"\r\n  [class]=\"getStyleClassName(property.name) + ' daga-depth-' + depth\"\r\n>\r\n  <div\r\n    class=\"daga-property\"\r\n    [class]=\"getStyleClassName(property.name) + ' daga-depth-' + depth\"\r\n  >\r\n    <div class=\"daga-property-name\">\r\n      <span>{{ property.name }}</span>\r\n      <div class=\"daga-buttons\">\r\n        <button class=\"daga-property-button daga-move-button\">\r\n          <div class=\"daga-icon daga-move-icon\"></div>\r\n        </button>\r\n        <button\r\n          class=\"daga-property-button daga-hide-button\"\r\n          (click)=\"hideProperty(property.name)\"\r\n        >\r\n          <div class=\"daga-icon daga-hide-icon\"></div>\r\n        </button>\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"property.type !== Type.Object\" class=\"daga-property-value\">\r\n      {{ asString(valueSet?.getValue(property.name)) }}\r\n    </div>\r\n    <div *ngIf=\"property.type === Type.Object\">\r\n      <daga-property-settings\r\n        [valueSet]=\"valueSet?.getSubValueSet(property.name)\"\r\n        [depth]=\"depth + 1\"\r\n      ></daga-property-settings>\r\n    </div>\r\n  </div>\r\n  <div\r\n    class=\"daga-dropbar\"\r\n    [class]=\"'daga-index-' + (i + 1) + ' daga-depth-' + depth\"\r\n  ></div>\r\n</div>\r\n<div\r\n  class=\"daga-property\"\r\n  *ngIf=\"valueSet && valueSet.hiddenProperties.length > 0\"\r\n>\r\n  <p class=\"daga-property-name\">Add property:</p>\r\n  <select (change)=\"displayProperty($event)\">\r\n    <option value=\"\">Select a property</option>\r\n    <option\r\n      *ngFor=\"let property of valueSet?.hiddenProperties || []\"\r\n      [value]=\"property.name\"\r\n    >\r\n      {{ property.name }}\r\n    </option>\r\n  </select>\r\n</div>\r\n", dependencies: [{ kind: "component", type: PropertySettingsComponent, selector: "daga-property-settings", inputs: ["valueSet", "depth"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: PropertySettingsComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'daga-property-settings', imports: [CommonModule, FormsModule], template: "<div\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: [{
+                type: Input
+            }] } });
+const asString = (value) => {
+    if (Array.isArray(value)) {
+        return value.join(', ');
+    }
+    if (isObject(value)) {
+        return Object.entries(value)
+            .map((pair) => pair.map((p) => JSON.stringify(p)).join(': '))
+            .join(', ');
+    }
+    if (value instanceof Date) {
+        return value.toLocaleString();
+    }
+    if (value === undefined || value === null) {
+        return '';
+    }
+    return '' + value;
+};
+
+const LOST_FOCUS_TIME_WINDOW_MS = 200;
+/**
+ * Combobox with autocomplete.
+ * @private
+ * @see PropertyEditor
+ * @see ValueSet
+ */
+class AutocompleteComponent {
+    set value(value) {
+        if (equals(value, this._value)) {
+            return;
+        }
+        this._value = value;
+        this.valueInput = this.getLabelOfValue(value);
+    }
+    get value() {
+        return this._value;
+    }
+    constructor(cdr) {
+        this.cdr = cdr;
+        this.valueInput = '';
+        this.disabled = false;
+        this.showOptions = false;
+        this.valueChange = new EventEmitter();
+    }
+    getLabelOfValue(value) {
+        for (const option of this.options) {
+            if (equals(option.key, value)) {
+                return option.label;
+            }
+        }
+        return asString(value);
+    }
+    onKeyup(event) {
+        if (!this.disabled) {
+            switch (event.key) {
+                case Keys.PageDown:
+                    if (this.focusIndex === undefined) {
+                        this.focusOnOption(0);
+                        this.scrollToOption(0);
+                    }
+                    else {
+                        this.focusOnOption(this.focusIndex + 5);
+                        this.scrollToOption(this.focusIndex);
+                    }
+                    event.preventDefault();
+                    break;
+                case Keys.ArrowDown:
+                    if (this.focusIndex === undefined) {
+                        this.focusOnOption(0);
+                        this.scrollToOption(0);
+                    }
+                    else {
+                        this.focusOnOption(this.focusIndex + 1);
+                        this.scrollToOption(this.focusIndex);
+                    }
+                    event.preventDefault();
+                    break;
+                case Keys.PageUp:
+                    if (this.focusIndex === undefined) {
+                        this.focusOnOption(this.options.length - 1);
+                        this.scrollToOption(this.options.length - 1);
+                    }
+                    else {
+                        this.focusOnOption(this.focusIndex - 5);
+                        this.scrollToOption(this.focusIndex);
+                    }
+                    event.preventDefault();
+                    break;
+                case Keys.ArrowUp:
+                    if (this.focusIndex === undefined) {
+                        this.focusOnOption(this.options.length - 1);
+                        this.scrollToOption(this.options.length - 1);
+                    }
+                    else {
+                        this.focusOnOption(this.focusIndex - 1);
+                        this.scrollToOption(this.focusIndex);
+                    }
+                    event.preventDefault();
+                    break;
+                case Keys.Escape:
+                    this.closeOptions();
+                    event.preventDefault();
+                    break;
+                case Keys.Enter:
+                    this.complete(this.options[this.focusIndex || 0]);
+                    event.preventDefault();
+                    break;
+                default:
+                    this.openOptions();
+            }
+        }
+    }
+    openOptions() {
+        if (!this.disabled) {
+            const mustContain = normalizeString(this.valueInput.trim());
+            this.currentOptions = [];
+            this.currentLabelStarts = [];
+            this.currentLabelMatches = [];
+            this.currentLabelEnds = [];
+            for (const option of this.options) {
+                const normalizedLabel = normalizeString(option.label);
+                const position = normalizedLabel.indexOf(mustContain);
+                if (position >= 0) {
+                    const labelStart = option.label.substring(0, position);
+                    const labelMatch = option.label.substring(position, position + mustContain.length);
+                    const labelEnd = option.label.substring(position + mustContain.length);
+                    this.currentOptions.push(option);
+                    this.currentLabelStarts.push(labelStart);
+                    this.currentLabelMatches.push(labelMatch);
+                    this.currentLabelEnds.push(labelEnd);
+                }
+            }
+            this.showOptions = true;
+        }
+    }
+    closeOptions() {
+        this.showOptions = false;
+    }
+    focusOnOption(index) {
+        if (!this.disabled) {
+            this.focusIndex = index;
+            if (index === undefined) {
+                return;
+            }
+            if (index < 0) {
+                this.focusIndex = 0;
+            }
+            if (index >= this.options.length) {
+                this.focusIndex = this.options.length - 1;
+            }
+        }
+    }
+    onLostFocus() {
+        setTimeout(() => {
+            this.closeOptions();
+        }, LOST_FOCUS_TIME_WINDOW_MS);
+    }
+    scrollToOption(index) {
+        const target = this.mainElement.nativeElement.querySelectorAll('li')[index];
+        if (target) {
+            target.scrollIntoView({ block: 'center' });
+        }
+    }
+    clearInput() {
+        if (!this.disabled) {
+            this.value = undefined;
+            this.valueInput = '';
+            this.showOptions = false;
+            this.focusIndex = undefined;
+        }
+    }
+    complete(option) {
+        if (!this.disabled) {
+            this.value = option;
+            this.valueInput = option.label;
+            this.showOptions = false;
+            this.focusIndex = undefined;
+            this.valueChange.emit(option.key);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: AutocompleteComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.2", type: AutocompleteComponent, isStandalone: true, selector: "daga-autocomplete", inputs: { value: "value", valueInput: "valueInput", options: "options", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "mainElement", first: true, predicate: ["main"], descendants: true, static: true }], ngImport: i0, template: "<div\r\n  #main\r\n  class=\"daga-autocomplete\"\r\n  [class]=\"showOptions ? 'daga-showing-options' : ''\"\r\n  (blur)=\"closeOptions()\"\r\n>\r\n  <div class=\"daga-autocomplete-input\">\r\n    <input\r\n      [(ngModel)]=\"valueInput\"\r\n      [disabled]=\"disabled\"\r\n      (keyup)=\"onKeyup($event)\"\r\n      (focus)=\"openOptions()\"\r\n      (blur)=\"onLostFocus()\"\r\n    />\r\n    <button\r\n      *ngIf=\"valueInput !== ''\"\r\n      class=\"daga-clear\"\r\n      (click)=\"clearInput()\"\r\n    ></button>\r\n  </div>\r\n  <div class=\"daga-autocomplete-options\">\r\n    <ul class=\"daga-autocomplete-option-list\">\r\n      <li\r\n        *ngIf=\"(currentOptions?.length || 0) === 0\"\r\n        class=\"daga-autocomplete-option no-options\"\r\n      >\r\n        (No options)\r\n      </li>\r\n      <li\r\n        *ngFor=\"let option of currentOptions; let index = index\"\r\n        class=\"daga-autocomplete-option\"\r\n        [class]=\"index === focusIndex ? 'daga-focused' : ''\"\r\n        (mousemove)=\"focusOnOption(index)\"\r\n        (click)=\"complete(option)\"\r\n      >\r\n        <span>{{ currentLabelStarts[index] }}</span>\r\n        <span class=\"daga-match\">{{ currentLabelMatches[index] }}</span>\r\n        <span>{{ currentLabelEnds[index] }}</span>\r\n      </li>\r\n    </ul>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: AutocompleteComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'daga-autocomplete', imports: [CommonModule, FormsModule], template: "<div\r\n  #main\r\n  class=\"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 }]
+            }], value: [{
+                type: Input
+            }], valueInput: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }] } });
+const normalizeString = (a) => (a || '')
+    .toLowerCase()
+    .normalize('NFD')
+    .replace(/[\u0300-\u036f]/g, '');
+
+/**
+ * Editor of a property of text list type within a property editor.
+ * @private
+ * @see Type.TextList
+ * @see PropertyEditor
+ * @see ValueSet
+ */
+class OptionListEditorComponent {
+    set value(value) {
+        if (value === this._value) {
+            return;
+        }
+        const initialAndEmpty = value.length === 0 && this._value.length === 0;
+        this._value = value;
+        this.labelsOfValue = [];
+        for (const key of this._value) {
+            this.labelsOfValue.push(this.getLabelOfValue(key));
+        }
+        if (initialAndEmpty) {
+            this.valueChange.emit(this._value);
+        }
+        this.updateOptionsNotPresentInValue();
+    }
+    get value() {
+        return this._value;
+    }
+    constructor(cdr) {
+        this.cdr = cdr;
+        this._value = [];
+        this.labelsOfValue = [];
+        this.options = [];
+        this.valueInput = undefined;
+        this.allowRepeats = true;
+        this.optionsNotPresentInValue = [];
+        this.disabled = false;
+        this.valueChange = new EventEmitter();
+    }
+    getLabelOfValue(value) {
+        for (const option of this.options) {
+            if (option.key === value) {
+                return option.label;
+            }
+        }
+        return `${value}`;
+    }
+    hasValue(value) {
+        for (const item of this._value || []) {
+            if (item === value) {
+                return true;
+            }
+        }
+        return false;
+    }
+    removeFromValue(index) {
+        if (this._value.length > index) {
+            this._value.splice(index, 1);
+            this.labelsOfValue.splice(index, 1);
+            this.valueChange.emit(this._value);
+            this.updateOptionsNotPresentInValue();
+            this.cdr.detectChanges();
+        }
+    }
+    addToValue() {
+        if (this.valueInput !== undefined &&
+            (this.allowRepeats ? true : !this.hasValue(this.valueInput))) {
+            this._value.push(this.valueInput);
+            this.labelsOfValue.push(this.getLabelOfValue(this.valueInput));
+            this.valueChange.emit(this._value);
+            this.clearInput();
+            this.updateOptionsNotPresentInValue();
+            this.cdr.detectChanges();
+        }
+    }
+    clearInput() {
+        this.valueInput = '';
+    }
+    updateOptionsNotPresentInValue() {
+        if (!this.allowRepeats) {
+            const optionsNotPresentInValue = [];
+            for (const option of this.options) {
+                if (!this.hasValue(option.key)) {
+                    optionsNotPresentInValue.push(option);
+                }
+            }
+            this.optionsNotPresentInValue = optionsNotPresentInValue;
+        }
+    }
+    onKeyUp(event) {
+        if (event.key === 'Enter') {
+            this.addToValue();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: OptionListEditorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.2", type: OptionListEditorComponent, isStandalone: true, selector: "daga-option-list-editor", inputs: { value: "value", options: "options", valueInput: "valueInput", allowRepeats: "allowRepeats", optionsNotPresentInValue: "optionsNotPresentInValue", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div\r\n  *ngFor=\"let item of value; let index = index\"\r\n  class=\"daga-value-item-element\"\r\n>\r\n  <span class=\"daga-input\">{{ labelsOfValue[index] }}</span>\r\n  <button\r\n    *ngIf=\"!disabled\"\r\n    class=\"daga-property-button\"\r\n    (click)=\"removeFromValue(index)\"\r\n  >\r\n    <div class=\"daga-icon daga-close-icon\"></div>\r\n  </button>\r\n</div>\r\n<div *ngIf=\"!disabled\" class=\"daga-value-item-input\">\r\n  <div class=\"daga-input daga-relatively-positioned\">\r\n    <daga-autocomplete\r\n      [disabled]=\"disabled\"\r\n      [options]=\"allowRepeats ? options || [] : optionsNotPresentInValue || []\"\r\n      [(value)]=\"valueInput\"\r\n    />\r\n  </div>\r\n  <button class=\"daga-property-button\" (click)=\"addToValue()\">\r\n    <div class=\"daga-icon daga-add-icon\"></div>\r\n  </button>\r\n</div>\r\n", dependencies: [{ kind: "component", type: AutocompleteComponent, selector: "daga-autocomplete", inputs: ["value", "valueInput", "options", "disabled"], outputs: ["valueChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: OptionListEditorComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'daga-option-list-editor', imports: [AutocompleteComponent, CommonModule, FormsModule], template: "<div\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: [{
+                type: Input
+            }], valueInput: [{
+                type: Input
+            }], allowRepeats: [{
+                type: Input
+            }], optionsNotPresentInValue: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }] } });
+
+/**
+ * Editor of a property of text list type within a property editor.
+ * @private
+ * @see Type.TextList
+ * @see PropertyEditor
+ * @see ValueSet
+ */
+class TextListEditorComponent {
+    set value(value) {
+        if (value === this._value) {
+            return;
+        }
+        const initialAndEmpty = value.length === 0 && this._value.length === 0;
+        this._value = value;
+        if (initialAndEmpty) {
+            this.valueChange.emit(this._value);
+        }
+    }
+    get value() {
+        return this._value;
+    }
+    constructor(cdr) {
+        this.cdr = cdr;
+        this._value = [];
+        this.valueInput = '';
+        this.allowRepeats = true;
+        this.disabled = false;
+        this.valueChange = new EventEmitter();
+    }
+    getValueFromEvent(event) {
+        return event.target.value;
+    }
+    hasValue(value) {
+        for (const item of this._value || []) {
+            if (item === value) {
+                return true;
+            }
+        }
+        return false;
+    }
+    removeFromValue(index) {
+        if (this._value.length > index) {
+            this._value.splice(index, 1);
+            this.valueChange.emit(this._value);
+            this.cdr.detectChanges();
+        }
+    }
+    editFromValue(item, index) {
+        item = item.trim();
+        if (this._value.length > index && item !== '') {
+            this._value.splice(index, 1, item);
+            this.valueChange.emit(this._value);
+            this.cdr.detectChanges();
+        }
+    }
+    addToValue() {
+        const valueInput = this.valueInput.trim();
+        if (valueInput !== '' &&
+            (this.allowRepeats ? true : !this.hasValue(valueInput))) {
+            this._value.push(valueInput);
+            this.valueChange.emit(this._value);
+            this.clearInput();
+            this.cdr.detectChanges();
+        }
+    }
+    clearInput() {
+        this.valueInput = '';
+    }
+    onKeyUp(event) {
+        if (event.key === 'Enter') {
+            this.addToValue();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: TextListEditorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.2", type: TextListEditorComponent, isStandalone: true, selector: "daga-text-list-editor", inputs: { value: "value", valueInput: "valueInput", allowRepeats: "allowRepeats", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div\r\n  *ngFor=\"let item of value; let index = index\"\r\n  class=\"daga-value-item-element\"\r\n>\r\n  <input\r\n    class=\"daga-input\"\r\n    type=\"text\"\r\n    [disabled]=\"disabled\"\r\n    [value]=\"item\"\r\n    (focusout)=\"editFromValue(getValueFromEvent($event), index)\"\r\n  />\r\n  <button\r\n    *ngIf=\"!disabled\"\r\n    class=\"daga-property-button\"\r\n    (click)=\"removeFromValue(index)\"\r\n  >\r\n    <div class=\"icon close-icon\"></div>\r\n  </button>\r\n</div>\r\n<div *ngIf=\"!disabled\" class=\"daga-value-item-input\">\r\n  <div class=\"daga-input daga-relatively-positioned\">\r\n    <input type=\"text\" (keyup)=\"onKeyUp($event)\" [(ngModel)]=\"valueInput\" />\r\n    <button\r\n      *ngIf=\"valueInput !== ''\"\r\n      class=\"daga-clear\"\r\n      (click)=\"clearInput()\"\r\n    ></button>\r\n  </div>\r\n  <button class=\"daga-property-button\" (click)=\"addToValue()\">\r\n    <div class=\"daga-icon daga-add-icon\"></div>\r\n  </button>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: TextListEditorComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'daga-text-list-editor', imports: [CommonModule, FormsModule], template: "<div\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: [{
+                type: Input
+            }], allowRepeats: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }] } });
+
+/**
+ * Editor of a property of text map type within a property editor.
+ * @private
+ * @see Type.TextMap
+ * @see PropertyEditor
+ * @see ValueSet
+ */
+class TextMapEditorComponent {
+    set value(value) {
+        if (value === this._value) {
+            return;
+        }
+        const initialAndEmpty = Object.keys(value).length === 0 && Object.keys(this._value).length === 0;
+        this._value = value;
+        if (initialAndEmpty) {
+            this.valueChange.emit(this._value);
+        }
+    }
+    get value() {
+        return this._value;
+    }
+    constructor(cdr) {
+        this.cdr = cdr;
+        this._value = {};
+        this.keyInput = '';
+        this.valueInput = '';
+        this.disabled = false;
+        this.valueChange = new EventEmitter();
+    }
+    getValueFromEvent(event) {
+        return event.target.value;
+    }
+    removeFromValue(key) {
+        delete this._value[key];
+        this.cdr.detectChanges();
+    }
+    editKey(oldKey, newKey) {
+        newKey = newKey.trim();
+        if (oldKey !== newKey && newKey !== '') {
+            this._value[newKey] = this._value[oldKey];
+            delete this._value[oldKey];
+            this.cdr.detectChanges();
+        }
+    }
+    editValue(key, value) {
+        value = value.trim();
+        if (value !== '') {
+            this._value[key] = value;
+            this.cdr.detectChanges();
+        }
+    }
+    addToValue() {
+        const keyInput = this.keyInput.trim();
+        const valueInput = this.valueInput.trim();
+        if (keyInput !== '' && valueInput !== '') {
+            this._value[keyInput] = valueInput;
+            this.valueChange.emit(this._value);
+            this.clearKeyInput();
+            this.clearValueInput();
+            this.cdr.detectChanges();
+        }
+    }
+    clearKeyInput() {
+        this.keyInput = '';
+    }
+    clearValueInput() {
+        this.valueInput = '';
+    }
+    onKeyUp(event) {
+        if (event.key === 'Enter') {
+            this.addToValue();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: TextMapEditorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.2", type: TextMapEditorComponent, isStandalone: true, selector: "daga-text-map-editor", inputs: { value: "value", keyInput: "keyInput", valueInput: "valueInput", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div *ngFor=\"let item of value | keyvalue\" class=\"daga-value-item-element\">\r\n  <input\r\n    class=\"daga-input\"\r\n    type=\"text\"\r\n    [disabled]=\"disabled\"\r\n    [value]=\"item.key\"\r\n    (focusout)=\"editKey(item.key, getValueFromEvent($event))\"\r\n  />\r\n  <input\r\n    class=\"daga-input\"\r\n    type=\"text\"\r\n    [disabled]=\"disabled\"\r\n    [value]=\"item.value\"\r\n    (focusout)=\"editValue(item.key, getValueFromEvent($event))\"\r\n  />\r\n  <button\r\n    *ngIf=\"!disabled\"\r\n    class=\"daga-property-button\"\r\n    (click)=\"removeFromValue(item.key)\"\r\n  >\r\n    <div class=\"icon close-icon\"></div>\r\n  </button>\r\n</div>\r\n<div *ngIf=\"!disabled\" class=\"daga-value-item-input\">\r\n  <div class=\"daga-input daga-relatively-positioned\">\r\n    <input type=\"text\" (keyup)=\"onKeyUp($event)\" [(ngModel)]=\"keyInput\" />\r\n    <button\r\n      *ngIf=\"keyInput !== ''\"\r\n      class=\"daga-clear\"\r\n      (click)=\"clearKeyInput()\"\r\n    ></button>\r\n  </div>\r\n  <div class=\"daga-input daga-relatively-positioned\">\r\n    <input type=\"text\" (keyup)=\"onKeyUp($event)\" [(ngModel)]=\"valueInput\" />\r\n    <button\r\n      *ngIf=\"valueInput !== ''\"\r\n      class=\"daga-clear\"\r\n      (click)=\"clearValueInput()\"\r\n    ></button>\r\n  </div>\r\n  <button class=\"daga-property-button\" (click)=\"addToValue()\">\r\n    <div class=\"daga-icon daga-add-icon\"></div>\r\n  </button>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: TextMapEditorComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'daga-text-map-editor', imports: [CommonModule, FormsModule], template: "<div *ngFor=\"let item of value | keyvalue\" class=\"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: [{
+                type: Input
+            }], valueInput: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }] } });
+
+/**
+ * Editor of a value set within a property editor.
+ * @private
+ * @see PropertyEditor
+ * @see ValueSet
+ */
+class ObjectEditorComponent {
+    get canvas() {
+        return this.canvasProvider.getCanvas();
+    }
+    get userCanEdit() {
+        return (this.canvas.canUserPerformAction(DiagramActions.UpdateValues) &&
+            this.valueSet?.rootElement?.['removed'] !== true);
+    }
+    get valueSet() {
+        return this._valueSet;
+    }
+    set valueSet(valueSet) {
+        if (this._valueSet !== valueSet) {
+            this._valueSet = valueSet;
+            // force value change detection
+            this.cdr.detectChanges();
+        }
+    }
+    constructor(cdr, canvasProvider) {
+        this.cdr = cdr;
+        this.canvasProvider = canvasProvider;
+        /** How many object-editor elements are parents of this object-editor element. @private */
+        this.depth = 0;
+        // Attributes for the template
+        this.Type = Type;
+        this.getStyleClassName = getStyleClassName;
+    }
+    setValue(property, value) {
+        if (this.valueSet === undefined) {
+            return;
+        }
+        if (property.editable) {
+            if (!equals(this.valueSet.getValue(property.name), value)) {
+                this.valueSet.setValue(property.name, value);
+                // register a diagram change when editing a value
+                this.canvas.diagramChange$?.next();
+                this.canvas.propertyEditorChanges$?.next();
+            }
+        }
+    }
+    dateToLocalDatetimeString(date) {
+        if (typeof date === 'string') {
+            return date;
+        }
+        if (date === null || date === undefined || isNaN(date.valueOf())) {
+            return '';
+        }
+        const offsetDate = new Date(date);
+        const timezoneOffset = offsetDate.getTimezoneOffset();
+        offsetDate.setMinutes(offsetDate.getMinutes() - timezoneOffset);
+        return offsetDate.toISOString().substring(0, 19); // for user friendliness, we trim off the milliseconds
+    }
+    localDatetimeStringToDate(string) {
+        // with no timezone specified, the local time is assumed
+        return new Date(string);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: ObjectEditorComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CanvasProviderService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.2", type: ObjectEditorComponent, isStandalone: true, selector: "daga-object-editor", inputs: { valueSet: "valueSet", depth: "depth" }, ngImport: i0, template: "<div\r\n  *ngFor=\"let property of valueSet?.displayedProperties || []\"\r\n  class=\"daga-property\"\r\n  [class]=\"getStyleClassName(property.name) + ' daga-depth-' + depth\"\r\n>\r\n  <p class=\"daga-property-name\">\r\n    {{ property.name }}\r\n  </p>\r\n\r\n  <input\r\n    *ngIf=\"property.type === Type.Text\"\r\n    type=\"daga-text\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [ngModel]=\"valueSet?.getValue(property.name)\"\r\n    (ngModelChange)=\"setValue(property, $event)\"\r\n  />\r\n  <textarea\r\n    *ngIf=\"property.type === Type.TextArea\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [ngModel]=\"valueSet?.getValue(property.name)\"\r\n    (ngModelChange)=\"setValue(property, $event)\"\r\n  ></textarea>\r\n  <input\r\n    *ngIf=\"property.type === Type.Number\"\r\n    type=\"number\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [ngModel]=\"valueSet?.getValue(property.name)\"\r\n    (ngModelChange)=\"setValue(property, $event)\"\r\n  />\r\n  <input\r\n    *ngIf=\"property.type === Type.Color\"\r\n    type=\"text\"\r\n    pattern=\"#\\d{6}\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [ngModel]=\"valueSet?.getValue(property.name)\"\r\n    (ngModelChange)=\"setValue(property, $event)\"\r\n  />\r\n  <input\r\n    *ngIf=\"property.type === Type.Datetime\"\r\n    type=\"datetime-local\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [ngModel]=\"dateToLocalDatetimeString(valueSet?.getValue(property.name))\"\r\n    (ngModelChange)=\"setValue(property, localDatetimeStringToDate($event))\"\r\n  />\r\n  <input\r\n    *ngIf=\"property.type === Type.Date\"\r\n    type=\"date\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [ngModel]=\"valueSet?.getValue(property.name)\"\r\n    (ngModelChange)=\"setValue(property, $event)\"\r\n  />\r\n  <input\r\n    *ngIf=\"property.type === Type.Time\"\r\n    type=\"time\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [ngModel]=\"valueSet?.getValue(property.name)\"\r\n    (ngModelChange)=\"setValue(property, $event)\"\r\n  />\r\n  <input\r\n    *ngIf=\"property.type === Type.Url\"\r\n    type=\"url\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [ngModel]=\"valueSet?.getValue(property.name)\"\r\n    (ngModelChange)=\"setValue(property, $event)\"\r\n  />\r\n  <div class=\"daga-radio\" *ngIf=\"property.type === Type.Boolean\">\r\n    <label class=\"daga-radio-item daga-radio-start\">\r\n      <input\r\n        type=\"radio\"\r\n        [disabled]=\"!property.editable || !userCanEdit\"\r\n        [name]=\"property.name\"\r\n        value=\"false\"\r\n        [checked]=\"valueSet?.getValue(property.name) === false\"\r\n        (change)=\"setValue(property, false)\"\r\n      />\r\n      No\r\n    </label>\r\n    <label class=\"daga-radio-item daga-radio-end\">\r\n      <input\r\n        type=\"radio\"\r\n        [disabled]=\"!property.editable || !userCanEdit\"\r\n        [name]=\"property.name\"\r\n        value=\"true\"\r\n        [checked]=\"valueSet?.getValue(property.name) === true\"\r\n        (change)=\"setValue(property, true)\"\r\n      />\r\n      Yes\r\n    </label>\r\n  </div>\r\n  <div class=\"daga-relatively-positioned\" *ngIf=\"property.type === Type.Option\">\r\n    <daga-autocomplete\r\n      [disabled]=\"!property.editable || !userCanEdit\"\r\n      [options]=\"property.options || []\"\r\n      [value]=\"valueSet?.getValue(property.name)\"\r\n      (valueChange)=\"setValue(property, $event)\"\r\n    />\r\n  </div>\r\n  <daga-option-list-editor\r\n    *ngIf=\"\r\n      property.type === Type.OptionList || property.type === Type.OptionSet\r\n    \"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [allowRepeats]=\"property.type === Type.OptionList\"\r\n    [options]=\"property.options || []\"\r\n    [value]=\"valueSet?.getValue(property.name)\"\r\n    (valueChange)=\"setValue(property, $event)\"\r\n  ></daga-option-list-editor>\r\n  <daga-text-list-editor\r\n    *ngIf=\"property.type === Type.TextList || property.type === Type.TextSet\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [allowRepeats]=\"property.type === Type.TextList\"\r\n    [value]=\"valueSet?.getValue(property.name)\"\r\n    (valueChange)=\"setValue(property, $event)\"\r\n  ></daga-text-list-editor>\r\n  <daga-text-map-editor\r\n    *ngIf=\"property.type === Type.TextMap\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [value]=\"valueSet?.getValue(property.name)\"\r\n    (valueChange)=\"setValue(property, $event)\"\r\n  ></daga-text-map-editor>\r\n  <div *ngIf=\"property.type === Type.Object\" class=\"daga-left-bar\">\r\n    <daga-object-editor\r\n      [valueSet]=\"valueSet?.getSubValueSet(property.name)\"\r\n      [depth]=\"depth + 1\"\r\n    ></daga-object-editor>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "component", type: ObjectEditorComponent, selector: "daga-object-editor", inputs: ["valueSet", "depth"] }, { kind: "component", type: AutocompleteComponent, selector: "daga-autocomplete", inputs: ["value", "valueInput", "options", "disabled"], outputs: ["valueChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: OptionListEditorComponent, selector: "daga-option-list-editor", inputs: ["value", "options", "valueInput", "allowRepeats", "optionsNotPresentInValue", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: TextListEditorComponent, selector: "daga-text-list-editor", inputs: ["value", "valueInput", "allowRepeats", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: TextMapEditorComponent, selector: "daga-text-map-editor", inputs: ["value", "keyInput", "valueInput", "disabled"], outputs: ["valueChange"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: ObjectEditorComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'daga-object-editor', imports: [
+                        AutocompleteComponent,
+                        CommonModule,
+                        FormsModule,
+                        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 class=\"daga-radio-item daga-radio-start\">\r\n      <input\r\n        type=\"radio\"\r\n        [disabled]=\"!property.editable || !userCanEdit\"\r\n        [name]=\"property.name\"\r\n        value=\"false\"\r\n        [checked]=\"valueSet?.getValue(property.name) === false\"\r\n        (change)=\"setValue(property, false)\"\r\n      />\r\n      No\r\n    </label>\r\n    <label class=\"daga-radio-item daga-radio-end\">\r\n      <input\r\n        type=\"radio\"\r\n        [disabled]=\"!property.editable || !userCanEdit\"\r\n        [name]=\"property.name\"\r\n        value=\"true\"\r\n        [checked]=\"valueSet?.getValue(property.name) === true\"\r\n        (change)=\"setValue(property, true)\"\r\n      />\r\n      Yes\r\n    </label>\r\n  </div>\r\n  <div class=\"daga-relatively-positioned\" *ngIf=\"property.type === Type.Option\">\r\n    <daga-autocomplete\r\n      [disabled]=\"!property.editable || !userCanEdit\"\r\n      [options]=\"property.options || []\"\r\n      [value]=\"valueSet?.getValue(property.name)\"\r\n      (valueChange)=\"setValue(property, $event)\"\r\n    />\r\n  </div>\r\n  <daga-option-list-editor\r\n    *ngIf=\"\r\n      property.type === Type.OptionList || property.type === Type.OptionSet\r\n    \"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [allowRepeats]=\"property.type === Type.OptionList\"\r\n    [options]=\"property.options || []\"\r\n    [value]=\"valueSet?.getValue(property.name)\"\r\n    (valueChange)=\"setValue(property, $event)\"\r\n  ></daga-option-list-editor>\r\n  <daga-text-list-editor\r\n    *ngIf=\"property.type === Type.TextList || property.type === Type.TextSet\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [allowRepeats]=\"property.type === Type.TextList\"\r\n    [value]=\"valueSet?.getValue(property.name)\"\r\n    (valueChange)=\"setValue(property, $event)\"\r\n  ></daga-text-list-editor>\r\n  <daga-text-map-editor\r\n    *ngIf=\"property.type === Type.TextMap\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [value]=\"valueSet?.getValue(property.name)\"\r\n    (valueChange)=\"setValue(property, $event)\"\r\n  ></daga-text-map-editor>\r\n  <div *ngIf=\"property.type === Type.Object\" class=\"daga-left-bar\">\r\n    <daga-object-editor\r\n      [valueSet]=\"valueSet?.getSubValueSet(property.name)\"\r\n      [depth]=\"depth + 1\"\r\n    ></daga-object-editor>\r\n  </div>\r\n</div>\r\n" }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: CanvasProviderService }], propDecorators: { valueSet: [{
+                type: Input
+            }], depth: [{
+                type: Input
+            }] } });
+
+/**
+ * Duration of the highlight property animation in milliseconds.
+ */
+const HIGHLIGHT_ANIMATION_DURATION_MS = 1000;
+/**
+ * Editor of the values of a value set.
+ * @private
+ * @see ValueSet
+ */
+class PropertyEditorComponent {
+    get valueSet() {
+        return this._valueSet;
+    }
+    set valueSet(valueSet) {
+        if (this._valueSet !== valueSet) {
+            this._valueSet = valueSet;
+            this.settings = undefined;
+            // force value change detection
+            this.cdr.detectChanges();
+        }
+    }
+    constructor(cdr) {
+        this.cdr = cdr;
+    }
+    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;
+        }
+    }
+    selectPanel() {
+        return d3.select(this.panel.nativeElement);
+    }
+    highlightProperty(...propertyNames) {
+        let selector = '';
+        let depth = 0;
+        for (const propertyName of propertyNames) {
+            selector += ` .daga-property.${getStyleClassName(propertyName)}.daga-depth-${depth}`;
+            ++depth;
+        }
+        if (this.valueSet) {
+            d3.select(this.panel.nativeElement)
+                .select(selector)
+                .transition()
+                .duration(HIGHLIGHT_ANIMATION_DURATION_MS)
+                .ease(d3.easeLinear)
+                .styleTween('background-color', () => {
+                const interpolator = d3.interpolate('rgba(255, 0, 0, 0)', 'rgba(255, 0, 0, 0.4)');
+                return (t) => interpolator(t > 0.5 ? 1 - t : t);
+            });
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: PropertyEditorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.2", type: PropertyEditorComponent, isStandalone: true, selector: "daga-property-editor", inputs: { location: "location", direction: "direction", width: "width", valueSet: "valueSet" }, viewQueries: [{ propertyName: "panel", first: true, predicate: ["panel"], descendants: true }], ngImport: i0, template: "<div\r\n  #panel\r\n  class=\"daga-panel daga-bottom daga-{{ location }} daga-{{ direction }}\"\r\n>\r\n  <daga-collapse-button\r\n    #collapse\r\n    [disabled]=\"\r\n      !valueSet ||\r\n      !valueSet.propertySet ||\r\n      !valueSet.propertySet.hasProperties()\r\n    \"\r\n    [direction]=\"direction\"\r\n    [collapsableSelector]=\"panel\"\r\n    collapsableAdditionalSelector=\".daga-panel-content\"\r\n    rule=\"display\"\r\n    collapsedValue=\"none\"\r\n    visibleValue=\"block\"\r\n  />\r\n  <div\r\n    *ngIf=\"\r\n      valueSet &&\r\n      valueSet.propertySet &&\r\n      valueSet.propertySet.hasProperties() &&\r\n      !collapse.collapsed\r\n    \"\r\n    class=\"daga-panel-content\"\r\n  >\r\n    <p *ngIf=\"title\" class=\"daga-title\">\r\n      {{ title }}\r\n      <button class=\"daga-property-button\" (click)=\"settings = !settings\">\r\n        <div\r\n          class=\"daga-icon daga-settings-icon\"\r\n          [class]=\"\r\n            settings === undefined\r\n              ? ''\r\n              : settings\r\n                ? 'daga-unrotate'\r\n                : 'daga-rotate'\r\n          \"\r\n        ></div>\r\n      </button>\r\n    </p>\r\n    <daga-object-editor *ngIf=\"!settings\" [valueSet]=\"valueSet\" />\r\n    <daga-property-settings *ngIf=\"settings\" [valueSet]=\"valueSet\" />\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CollapseButtonComponent, selector: "daga-collapse-button", inputs: ["collapsableSelector", "collapsableAdditionalSelector", "collapsed", "disabled", "direction", "rule", "collapsedValue", "visibleValue"] }, { kind: "component", type: ObjectEditorComponent, selector: "daga-object-editor", inputs: ["valueSet", "depth"] }, { kind: "component", type: PropertySettingsComponent, selector: "daga-property-settings", inputs: ["valueSet", "depth"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: PropertyEditorComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'daga-property-editor', imports: [
+                        CommonModule,
+                        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: [{
+                type: ViewChild,
+                args: ['panel']
+            }], location: [{
+                type: Input
+            }], direction: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], valueSet: [{
+                type: Input
+            }] } });
+const getStyleClassName = (s) => {
+    return 'daga-property-name-' + s.replace(/\s/g, '');
+};
+
+/**
+ * A provider for the {@link DiagramConfig} associated with a {@link DiagramComponent} context.
+ * @public
+ */
+class DagaConfigurationService {
+    /**
+     * Set the diagram configuration of this context.
+     * @private
+     * @param config A diagram configuration.
+     */
+    init(config) {
+        this._config = config;
+    }
+    /**
+     * Get the diagram configuration of this context. Should only be called after the {@link DiagramComponent} context has been initialized.
+     * @public
+     * @returns A diagram configuration.
+     */
+    getConfig() {
+        return this._config;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: DagaConfigurationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: DagaConfigurationService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", 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;
+        /**
+         * Output for user events on the diagram's model.
+         * @public
+         */
+        this.modelEvent = new EventEmitter();
+        this.Corner = Corner;
+        this.Side = Side;
+    }
+    ngOnInit() {
+        this.canvasProvider.initCanvas(this, this.config);
+    }
+    ngAfterViewInit() {
+        this.canvasProvider.initCanvasView(this.appendTo.nativeElement);
+        this.canvas.diagramEvent$.subscribe((e) => {
+            this.modelEvent.emit(e);
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: DiagramEditorComponent, deps: [{ token: DagaConfigurationService }, { token: CanvasProviderService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.2", type: DiagramEditorComponent, isStandalone: true, selector: "daga-diagram-editor", outputs: { modelEvent: "modelEvent" }, viewQueries: [{ propertyName: "appendTo", first: true, predicate: ["appendTo"], descendants: true }, { propertyName: "diagramButtons", first: true, predicate: ["diagramButtons"], descendants: true }, { propertyName: "palette", first: true, predicate: ["palette"], descendants: true }, { propertyName: "propertyEditor", first: true, predicate: ["propertyEditor"], descendants: true }], ngImport: i0, template: "<div class=\"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  [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"] }, { kind: "component", type: PropertyEditorComponent, selector: "daga-property-editor", inputs: ["location", "direction", "width", "valueSet"] }, { kind: "component", type: ErrorsComponent, selector: "daga-errors" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: DiagramEditorComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, 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  [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']
+            }], modelEvent: [{
+                type: Output
+            }] } });
+
+/**
+ * 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 {
+    /**
+     * Serialized model for the diagram. Used for data binding to the model.
+     * @public
+     */
+    get model() {
+        return this._model;
+    }
+    /**
+     * Serialized model for the diagram. Used for data binding to the model.
+     * @public
+     */
+    set model(model) {
+        if (this._model !== model) {
+            this._model = model;
+            const canvas = this.canvasProvider.getCanvas();
+            if (canvas) {
+                this.importer.import(this.canvasProvider.getCanvas().model, model);
+            }
+        }
+    }
+    constructor(configurationService, canvasProvider) {
+        this.configurationService = configurationService;
+        this.canvasProvider = canvasProvider;
+        this.importer = new DagaImporter();
+        this.exporter = new DagaExporter();
+        /**
+         * Output for changes to the diagram's model.
+         * @public
+         */
+        this.modelChange = new EventEmitter();
+    }
+    ngOnInit() {
+        this.configurationService.init(this.config);
+    }
+    ngAfterContentInit() {
+        this.canvasProvider
+            .getCanvas()
+            .viewInitialized$.pipe(delay(1))
+            .subscribe(() => {
+            if (this.model) {
+                this.importer.import(this.canvasProvider.getCanvas().model, this.model);
+            }
+        });
+    }
+    ngAfterViewInit() {
+        this.canvasProvider.getCanvas().diagramChange$.subscribe(() => {
+            const exportedModel = this.exporter.export(this.canvasProvider.getCanvas().model);
+            this._model = exportedModel;
+            this.modelChange.emit(exportedModel);
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: DiagramComponent, deps: [{ token: DagaConfigurationService }, { token: CanvasProviderService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.2", type: DiagramComponent, isStandalone: true, selector: "daga-diagram", inputs: { config: "config", model: "model" }, outputs: { modelChange: "modelChange" }, providers: [CanvasProviderService, DagaConfigurationService], ngImport: i0, template: `<ng-content />`, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: DiagramComponent, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    selector: 'daga-diagram',
+                    template: `<ng-content />`,
+                    providers: [CanvasProviderService, DagaConfigurationService]
+                }]
+        }], ctorParameters: () => [{ type: DagaConfigurationService }, { type: CanvasProviderService }], propDecorators: { config: [{
+                type: Input
+            }], model: [{
+                type: Input
+            }], modelChange: [{
+                type: Output
+            }] } });
+
+class DagaModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: DagaModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.2", ngImport: i0, type: DagaModule, imports: [CollapseButtonComponent,
+            DiagramButtonsComponent,
+            DiagramComponent,
+            DiagramEditorComponent,
+            ErrorsComponent,
+            ObjectEditorComponent,
+            PaletteComponent,
+            TextListEditorComponent,
+            TextMapEditorComponent,
+            PropertyEditorComponent,
+            CommonModule,
+            FormsModule], exports: [DiagramComponent, DiagramEditorComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: DagaModule, providers: [DagaConfigurationService, CanvasProviderService], imports: [CollapseButtonComponent,
+            DiagramButtonsComponent,
+            DiagramEditorComponent,
+            ErrorsComponent,
+            ObjectEditorComponent,
+            PaletteComponent,
+            TextListEditorComponent,
+            TextMapEditorComponent,
+            PropertyEditorComponent,
+            CommonModule,
+            FormsModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: DagaModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [],
+                    imports: [
+                        CollapseButtonComponent,
+                        DiagramButtonsComponent,
+                        DiagramComponent,
+                        DiagramEditorComponent,
+                        ErrorsComponent,
+                        ObjectEditorComponent,
+                        PaletteComponent,
+                        TextListEditorComponent,
+                        TextMapEditorComponent,
+                        PropertyEditorComponent,
+                        CommonModule,
+                        FormsModule
+                    ],
+                    exports: [DiagramComponent, DiagramEditorComponent],
+                    providers: [DagaConfigurationService, CanvasProviderService]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CanvasProviderService, CollapseButtonComponent, DagaConfigurationService, DagaModule, DiagramButtonsComponent, DiagramComponent, DiagramEditorComponent, ErrorsComponent, ObjectEditorComponent, PaletteComponent, PropertyEditorComponent, TextListEditorComponent, TextMapEditorComponent };
+//# sourceMappingURL=metadev-daga-angular.mjs.map