@visuallyjs/browser-ui-angular 1.2.0 → 1.2.1

package/fesm2022/visuallyjs-browser-ui-angular.mjs

@@ -1,8 +1,8 @@
 import * as i0 from '@angular/core';
-import { signal, Injectable, inject, ElementRef, effect, Component, Input, ChangeDetectorRef, computed, Directive, EventEmitter, ViewContainerRef, NgZone, reflectComponentType, Output, NgModule } from '@angular/core';
+import { signal, Injectable, inject, ElementRef, effect, Input, Component, ChangeDetectorRef, computed, Directive, input, EventEmitter, ViewContainerRef, NgZone, reflectComponentType, Output, TemplateRef, ViewChild, ContentChild, NgModule } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import { log, Surface, Paper, MiniviewPlugin, EVENT_ZOOM, EVENT_PORT_UPDATED, BrowserUIModel, OVERLAY_TYPE_CUSTOM, ELEMENT_DIV, isGroup, extend, renderSurface, EVENT_NODE_UPDATED, EVENT_PORT_ADDED, EVENT_GROUP_UPDATED, EVENT_DATA_LOAD_END, EVENT_EDGE_UPDATED, EVENT_INTERNAL_CONNECTION, ShapeLibraryDefaults, ShapePalette, convertToMultilineText, DEFAULT_LABEL_FILL_RATIO, LassoPlugin, EVENT_SURFACE_MODE_CHANGED, EVENT_UNDOREDO_UPDATE, TRUE, FALSE, EVENT_SELECT, EVENT_DESELECT, EVENT_SELECTION_CLEARED, SURFACE_MODE_PAN, SURFACE_MODE_SELECT, supportsPathEditing, PAN_VIEW_BOX, PAN_PATH, LASSO_VIEW_BOX, LASSO_PATH, ZOOM_TO_FIT_VIEW_BOX, ZOOM_TO_FIT_PATH, ZOOM_IN_OUT_VIEW_BOX, ZOOM_IN_PATH, ZOOM_OUT_PATH, CLASS_CONTROLS_RESET_SELECTION, RESET_SELECTION_VIEW_BOX, RESET_SELECTION_PATH, CLEAR_VIEW_BOX, CLEAR_PATH, INSPECTOR_CONTEXT_EDGE_PROPERTY_MAPPINGS, EdgeTypePicker, Palette, SvgExportUI, ImageExportUI, CLASS_CONTROLS, CLASS_EXPORT_CONTROLS, INSPECTOR_CONTEXT_RECENT_COLORS, EVENT_CONTEXT_UPDATE, CLASS_COLOR_PICKER, CLASS_COLOR_PICKER_SWATCHES, CLASS_COLOR_PICKER_SWATCH, createDiagram, ColumnChart, BarChart, DiagramPalette, CategoryValueChart, LineChart, AreaChart, PieChart, ScatterChart, BubbleChart, SankeyChart, Edge, Node, Group, Port, Inspector, EVENT_DATA_UPDATED, EVENT_GRAPH_CLEARED } from '@visuallyjs/browser-ui';
+import { log, Surface, Paper, MiniviewPlugin, EVENT_ZOOM, EVENT_PORT_UPDATED, BrowserUIModel, OVERLAY_TYPE_CUSTOM, ELEMENT_DIV, isGroup, extend, renderSurface, EVENT_NODE_UPDATED, EVENT_PORT_ADDED, EVENT_GROUP_UPDATED, EVENT_DATA_LOAD_END, EVENT_EDGE_UPDATED, EVENT_EDGE_ADDED, EVENT_EDGE_REMOVED, EVENT_INTERNAL_CONNECTION, ShapeLibraryDefaults, ShapePalette, convertToMultilineText, DEFAULT_LABEL_FILL_RATIO, LassoPlugin, EVENT_SURFACE_MODE_CHANGED, EVENT_UNDOREDO_UPDATE, TRUE, FALSE, EVENT_SELECT, EVENT_DESELECT, EVENT_SELECTION_CLEARED, SURFACE_MODE_PAN, SURFACE_MODE_SELECT, supportsPathEditing, PAN_VIEW_BOX, PAN_PATH, LASSO_VIEW_BOX, LASSO_PATH, ZOOM_TO_FIT_VIEW_BOX, ZOOM_TO_FIT_PATH, ZOOM_IN_OUT_VIEW_BOX, ZOOM_IN_PATH, ZOOM_OUT_PATH, CLASS_CONTROLS_RESET_SELECTION, RESET_SELECTION_VIEW_BOX, RESET_SELECTION_PATH, CLEAR_VIEW_BOX, CLEAR_PATH, INSPECTOR_CONTEXT_EDGE_PROPERTY_MAPPINGS, EdgeTypePicker, Palette, SvgExportUI, ImageExportUI, CLASS_CONTROLS, CLASS_EXPORT_CONTROLS, INSPECTOR_CONTEXT_RECENT_COLORS, EVENT_CONTEXT_UPDATE, CLASS_COLOR_PICKER, CLASS_COLOR_PICKER_SWATCHES, CLASS_COLOR_PICKER_SWATCH, createDiagram, ColumnChart, BarChart, DiagramPalette, CategoryValueChart, LineChart, AreaChart, PieChart, ScatterChart, BubbleChart, SankeyChart, PopupHandler, CLASS_SURFACE_POPUP, renderPaper, Edge, Node, Group, Port, Inspector, EVENT_DATA_UPDATED, EVENT_GRAPH_CLEARED } from '@visuallyjs/browser-ui';
 
 
 class VisuallyJsService {
@@ -202,10 +202,10 @@ class VisuallyJsService {
             this.uiListeners.push(cb);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: VisuallyJsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: VisuallyJsService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: VisuallyJsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: VisuallyJsService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: VisuallyJsService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: VisuallyJsService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -257,16 +257,16 @@ class MiniviewComponent {
             this.$miniview.invalidate();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MiniviewComponent, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MiniviewComponent, selector: "vjs-miniview", inputs: { elementFilter: "elementFilter", typeFunction: "typeFunction", activeTracking: "activeTracking", clickToCenter: "clickToCenter", showLasso: "showLasso", trackSelection: "trackSelection" }, ngImport: i0, template: `<div></div>`, isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MiniviewComponent, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: MiniviewComponent, selector: "vjs-miniview", inputs: { elementFilter: "elementFilter", typeFunction: "typeFunction", activeTracking: "activeTracking", clickToCenter: "clickToCenter", showLasso: "showLasso", trackSelection: "trackSelection" }, ngImport: i0, template: `<div></div>`, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MiniviewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MiniviewComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'vjs-miniview',
                     template: `<div></div>`
                 }]
-        }], ctorParameters: function () { return [{ type: i0.NgZone }]; }, propDecorators: { elementFilter: [{
+        }], ctorParameters: () => [{ type: i0.NgZone }], propDecorators: { elementFilter: [{
                 type: Input
             }], typeFunction: [{
                 type: Input
@@ -307,15 +307,31 @@ class BaseVertexComponent {
         this.$data = signal(undefined);
         
         this.zoom = signal(1);
+        
+        this.sourceEdges = signal([]);
+        
+        this.allSourceEdges = signal([]);
+        
+        this.targetEdges = signal([]);
+        
+        this.allTargetEdges = signal([]);
     }
     
     ngOnInit() {
         this.$data.set(this.data);
-        this._zoomHandler = (p) => {
-            this.zoom.set(p.zoom);
-        };
-        this.zoom.set(this.surface.getZoom());
-        this.surface.bind(EVENT_ZOOM, this._zoomHandler);
+        if (this.surface) {
+            this._zoomHandler = (p) => {
+                this.zoom.set(p.zoom);
+            };
+            this.zoom.set(this.surface.getZoom());
+            this.surface.bind(EVENT_ZOOM, this._zoomHandler);
+        }
+    }
+    $updateEdges() {
+        this.sourceEdges.set(this.getVertex().getSourceEdges());
+        this.allSourceEdges.set(this.getVertex().getAllSourceEdges());
+        this.targetEdges.set(this.getVertex().getTargetEdges());
+        this.allTargetEdges.set(this.getVertex().getAllTargetEdges());
     }
     
     getVertex() {
@@ -323,11 +339,12 @@ class BaseVertexComponent {
     }
     
     ngOnDestroy() {
-        this.surface.unbind(EVENT_ZOOM, this._zoomHandler);
-        delete this._el._visuallyJsNgComponent._el;
+        this.surface?.unbind(EVENT_ZOOM, this._zoomHandler);
+        delete this._el?._visuallyJsNgComponent._el;
         delete this._el;
         delete this.model;
         delete this.surface;
+        delete this.paper;
     }
     
     removeVertex() {
@@ -359,16 +376,16 @@ class BaseVertexComponent {
     }
     
     cloneVertex(options) {
-        this.surface.cloneVertex(this.getVertex(), options);
+        this.surface?.cloneVertex(this.getVertex(), options);
     }
     
     flashVertex(duration, animName) {
-        this.surface.flashVertex(this.getVertex(), duration, animName);
+        this.surface?.flashVertex(this.getVertex(), duration, animName);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BaseVertexComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BaseVertexComponent }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BaseVertexComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BaseVertexComponent }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BaseVertexComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BaseVertexComponent, decorators: [{
             type: Injectable
         }], propDecorators: { data: [{
                 type: Input
@@ -376,6 +393,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], surface: [{
                 type: Input
+            }], paper: [{
+                type: Input
+            }], ui: [{
+                type: Input
             }], modelObject: [{
                 type: Input
             }] } });
@@ -414,10 +435,10 @@ class BaseGroupComponent extends BaseVertexComponent {
     getPort(portId) {
         return this.getGroup().getPort(portId);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BaseGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BaseGroupComponent }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BaseGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BaseGroupComponent }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BaseGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BaseGroupComponent, decorators: [{
             type: Injectable
         }] });
 
@@ -427,10 +448,10 @@ class DefaultGroupComponent extends BaseGroupComponent {
         super(...arguments);
         this.label = computed(() => this.$data().label || "");
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DefaultGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DefaultGroupComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `<div class="vjs-default-group">{{label()}}</div>`, isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DefaultGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DefaultGroupComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `<div class="vjs-default-group">{{label()}}</div>`, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DefaultGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DefaultGroupComponent, decorators: [{
             type: Component,
             args: [{
                     template: `<div class="vjs-default-group">{{label()}}</div>`
@@ -469,10 +490,10 @@ class BaseNodeComponent extends BaseVertexComponent {
     flashNode(duration, animName) {
         this.flashVertex(duration, animName);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BaseNodeComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BaseNodeComponent }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BaseNodeComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BaseNodeComponent }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BaseNodeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BaseNodeComponent, decorators: [{
             type: Injectable
         }] });
 
@@ -482,10 +503,10 @@ class DefaultNodeComponent extends BaseNodeComponent {
         super(...arguments);
         this.label = computed(() => this.$data().label || "");
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DefaultNodeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DefaultNodeComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `<div class="vjs-default-node">{{label()}}</div>`, isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DefaultNodeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DefaultNodeComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `<div class="vjs-default-node">{{label()}}</div>`, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DefaultNodeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DefaultNodeComponent, decorators: [{
             type: Component,
             args: [{
                     template: `<div class="vjs-default-node">{{label()}}</div>`
@@ -547,15 +568,15 @@ class BasePortComponent {
     ngOnDestroy() {
         this.parent.model.unbind(EVENT_PORT_UPDATED, this._signalBinder);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BasePortComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: BasePortComponent, selector: "vjs-base-port", inputs: { parent: "parent", data: "data" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BasePortComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: BasePortComponent, selector: "vjs-base-port", inputs: { parent: "parent", data: "data" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BasePortComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BasePortComponent, decorators: [{
             type: Directive,
             args: [{
                     selector: "vjs-base-port",
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { parent: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { parent: [{
                 type: Input
             }], data: [{
                 type: Input
@@ -573,13 +594,36 @@ class BrowserUIAngularModel extends BrowserUIModel {
 class SurfaceComponent {
     constructor() {
         
+        this.data = input();
+        
+        this.url = input();
+        
         this.vertexEvent = new EventEmitter();
         this.$el = inject(ElementRef);
         this.$viewContainerRef = inject(ViewContainerRef);
         this.$ngZone = inject(NgZone);
         this.$vjs = inject(VisuallyJsService);
+        this._dataEffect = effect(() => {
+            const currentData = this.data();
+            if (currentData) {
+                if (this.model) {
+                    this.model.clear();
+                    this.model.load({ data: currentData });
+                }
+            }
+        });
+        this._urlEffect = effect(() => {
+            const currentUrl = this.url();
+            if (currentUrl) {
+                // Respond to changes in the url here.
+                // For example, if you need to reload the model with new data:
+                if (this.model) {
+                    this.model.clear();
+                    this.model.load({ url: currentUrl });
+                }
+            }
+        });
     }
-    // $vjsSignals = inject(VisuallyJsSignalService)
     
     getNativeElement(component) {
         return component.location.nativeElement.childNodes[0];
@@ -638,6 +682,32 @@ class SurfaceComponent {
             }
         }
     }
+    edgeAddedRemoved(params) {
+        const info = this.surface.getObjectInfo(params.edge.source, false);
+        if (info.el) {
+            this._getComponentThen(info.el, (component) => {
+                try {
+                    component.$updateEdges();
+                    if (component.changeDetectorRef) {
+                        component.changeDetectorRef.detectChanges();
+                    }
+                }
+                catch (e) { }
+            }, false);
+        }
+        const info2 = this.surface.getObjectInfo(params.edge.target, false);
+        if (info2.el && info.obj.getFullId() !== info2.obj.getFullId()) {
+            this._getComponentThen(info2.el, (component) => {
+                try {
+                    component.$updateEdges();
+                    if (component.changeDetectorRef) {
+                        component.changeDetectorRef.detectChanges();
+                    }
+                }
+                catch (e) { }
+            }, false);
+        }
+    }
     
     _processAngularOverlays(view) {
         const self = this;
@@ -670,7 +740,10 @@ class SurfaceComponent {
                                     angularOverlayComponent.data = edge.data;
                                 }
                                 angularOverlayComponent.model = self.model;
+                                // backwards compat: remove at some point
+                                ;
                                 angularOverlayComponent.surface = self.surface;
+                                angularOverlayComponent.ui = self.surface;
                                 createdComponent.changeDetectorRef.detectChanges();
                                 return el;
                             };
@@ -733,6 +806,7 @@ class SurfaceComponent {
                 _componentRef.data = data || {};
                 _componentRef.model = model;
                 _componentRef.surface = surface;
+                _componentRef.ui = surface;
                 _componentRef.modelObject = modelObject;
                 // get the reflection data for the component
                 const componentInfo = reflectComponentType(component);
@@ -804,11 +878,17 @@ class SurfaceComponent {
             model.bind(EVENT_PORT_UPDATED, this.portUpdateFn);
             this.edgeUpdateFn = this.edgeUpdated.bind(this);
             model.bind(EVENT_EDGE_UPDATED, this.edgeUpdateFn);
-            if (this.data) {
-                this.model.load({ data: this.data });
+            this.edgeAddFn = this.edgeAddedRemoved.bind(this);
+            this.edgeRemoveFn = this.edgeAddedRemoved.bind(this);
+            model.bind(EVENT_EDGE_ADDED, this.edgeAddFn);
+            model.bind(EVENT_EDGE_REMOVED, this.edgeRemoveFn);
+            const initialData = this.data();
+            const initialUrl = this.url();
+            if (initialData) {
+                this.model.load({ data: initialData });
             }
-            else if (this.url) {
-                this.model.load({ url: this.url });
+            else if (initialUrl) {
+                this.model.load({ url: initialUrl });
             }
         });
     }
@@ -820,13 +900,15 @@ class SurfaceComponent {
         this.model.unbind(EVENT_PORT_ADDED, this.nodeUpdateFn);
         this.model.unbind(EVENT_PORT_UPDATED, this.portUpdateFn);
         this.model.unbind(EVENT_EDGE_UPDATED, this.edgeUpdateFn);
+        this.model.unbind(EVENT_EDGE_ADDED, this.edgeAddFn);
+        this.model.unbind(EVENT_EDGE_REMOVED, this.edgeRemoveFn);
         this.model.unbind(EVENT_DATA_LOAD_END, this.dataLoadEndFn);
         this.surface.unbind(EVENT_INTERNAL_CONNECTION, this.edgeAddFn);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SurfaceComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SurfaceComponent, selector: "vjs-surface", inputs: { inputModel: ["model", "inputModel"], viewOptions: "viewOptions", renderOptions: "renderOptions", modelOptions: "modelOptions", data: "data", url: "url" }, outputs: { vertexEvent: "vertexEvent" }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SurfaceComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: SurfaceComponent, selector: "vjs-surface", inputs: { inputModel: { classPropertyName: "inputModel", publicName: "model", isSignal: false, isRequired: false, transformFunction: null }, viewOptions: { classPropertyName: "viewOptions", publicName: "viewOptions", isSignal: false, isRequired: false, transformFunction: null }, renderOptions: { classPropertyName: "renderOptions", publicName: "renderOptions", isSignal: false, isRequired: false, transformFunction: null }, modelOptions: { classPropertyName: "modelOptions", publicName: "modelOptions", isSignal: false, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, url: { classPropertyName: "url", publicName: "url", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { vertexEvent: "vertexEvent" }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SurfaceComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SurfaceComponent, decorators: [{
             type: Component,
             args: [{
                     selector: "vjs-surface",
@@ -841,10 +923,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], modelOptions: [{
                 type: Input
-            }], data: [{
-                type: Input
-            }], url: [{
-                type: Input
             }], vertexEvent: [{
                 type: Output
             }] } });
@@ -895,16 +973,16 @@ class ShapePaletteComponent {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ShapePaletteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ShapePaletteComponent, selector: "vjs-shape-palette", inputs: { initialSet: "initialSet", dragSize: "dragSize", iconSize: "iconSize", fill: "fill", outline: "outline", showAllMessage: "showAllMessage", selectAfterDrop: "selectAfterDrop", paletteStrokeWidth: "paletteStrokeWidth", onVertexAdded: "onVertexAdded", dataGenerator: "dataGenerator", preparedShapes: "preparedShapes" }, ngImport: i0, template: `<div></div>`, isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ShapePaletteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ShapePaletteComponent, selector: "vjs-shape-palette", inputs: { initialSet: "initialSet", dragSize: "dragSize", iconSize: "iconSize", fill: "fill", outline: "outline", showAllMessage: "showAllMessage", selectAfterDrop: "selectAfterDrop", paletteStrokeWidth: "paletteStrokeWidth", onVertexAdded: "onVertexAdded", dataGenerator: "dataGenerator", preparedShapes: "preparedShapes" }, ngImport: i0, template: `<div></div>`, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ShapePaletteComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ShapePaletteComponent, decorators: [{
             type: Component,
             args: [{
                     template: `<div></div>`,
                     selector: `vjs-shape-palette`
                 }]
-        }], ctorParameters: function () { return []; }, propDecorators: { initialSet: [{
+        }], ctorParameters: () => [], propDecorators: { initialSet: [{
                 type: Input
             }], dragSize: [{
                 type: Input
@@ -967,8 +1045,8 @@ class ShapeComponent {
     ngOnChanges(changes) {
         this._render();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ShapeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ShapeComponent, selector: "vjs-shape", inputs: { obj: "obj", width: "width", height: "height", showLabels: "showLabels", labelProperty: "labelProperty", labelStrokeWidth: "labelStrokeWidth", label: "label", multilineLabels: "multilineLabels", labelFillRatio: "labelFillRatio", font: "font" }, usesOnChanges: true, ngImport: i0, template: `<svg:svg
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ShapeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ShapeComponent, selector: "vjs-shape", inputs: { obj: "obj", width: "width", height: "height", showLabels: "showLabels", labelProperty: "labelProperty", labelStrokeWidth: "labelStrokeWidth", label: "label", multilineLabels: "multilineLabels", labelFillRatio: "labelFillRatio", font: "font" }, usesOnChanges: true, ngImport: i0, template: `<svg:svg
     [attr.stroke-width]="obj.outlineWidth || 2"
     attr.fill="{{ obj.fill }}"
     attr.stroke="{{ obj.outline }}"
@@ -977,7 +1055,7 @@ class ShapeComponent {
     attr.viewBox="0 0 {{ width }} {{ height }}"
   ></svg:svg>`, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ShapeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ShapeComponent, decorators: [{
             type: Component,
             args: [{
                     template: `<svg:svg
@@ -990,7 +1068,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
   ></svg:svg>`,
                     selector: `vjs-shape`,
                 }]
-        }], ctorParameters: function () { return []; }, propDecorators: { obj: [{
+        }], ctorParameters: () => [], propDecorators: { obj: [{
                 type: Input
             }], width: [{
                 type: Input
@@ -1116,10 +1194,10 @@ class ControlsComponent {
             t.clear();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ControlsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ControlsComponent, selector: "vjs-controls", inputs: { undoRedo: "undoRedo", zoomToExtents: "zoomToExtents", zoomButtons: "zoomButtons", clear: "clear", clearMessage: "clearMessage", buttons: "buttons", orientation: "orientation" }, ngImport: i0, template: "<div class=\"vjs-controls\" [attr.data-vjs-orientation]=\"orientation\">\n    <i *ngIf=\"showPanButton\" class=\"vjs-pan-mode vjs-selected-mode\" data-mode=\"pan\" title=\"Pan Mode\" (click)=\"panMode()\">\n      <svg viewBox=\"0 0 24 24\" stroke=\"currentColor\" fill=\"none\">\n        <path d=\"M8 13v-7.5a1.5 1.5 0 0 1 3 0v6.5 M11 5.5v-2a1.5 1.5 0 1 1 3 0v8.5 M14 5.5a1.5 1.5 0 0 1 3 0v6.5 M17 7.5a1.5 1.5 0 0 1 3 0v8.5a6 6 0 0 1 -6 6h-2h.208a6 6 0 0 1 -5.012 -2.7a69.74 69.74 0 0 1 -.196 -.3c-.312 -.479 -1.407 -2.388 -3.286 -5.728a1.5 1.5 0 0 1 .536 -2.022a1.867 1.867 0 0 1 2.28 .28l1.47 1.47\"></path>\n      </svg>\n    </i>\n    <i *ngIf=\"showLassoButton\" class=\"vjs-select-mode\" data-mode=\"select\" title=\"Select Mode\" (click)=\"selectMode()\">\n      <svg fill=\"currentColor\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n        <path d=\"M18.2848192,17.5777124 L20.8535534,20.1464466 C21.0488155,20.3417088 21.0488155,20.6582912 20.8535534,20.8535534 C20.6582912,21.0488155 20.3417088,21.0488155 20.1464466,20.8535534 L17.5777124,18.2848192 L15.9160251,20.7773501 C15.6899572,21.116452 15.1749357,21.0571624 15.0318354,20.6755617 L12.0318354,12.6755617 C11.8811067,12.2736185 12.2736185,11.8811067 12.6755617,12.0318354 L20.6755617,15.0318354 C21.0571624,15.1749357 21.116452,15.6899572 20.7773501,15.9160251 L18.2848192,17.5777124 L18.2848192,17.5777124 Z M17.2312404,17.0782479 L19.4104716,15.6254271 L13.3544004,13.3544004 L15.6254271,19.4104716 L17.0782479,17.2312404 C17.0974475,17.2011742 17.1201804,17.1727128 17.1464466,17.1464466 C17.1727128,17.1201804 17.2011742,17.0974475 17.2312404,17.0782479 L17.2312404,17.0782479 Z M5.5,3 C5.77614237,3 6,3.22385763 6,3.5 C6,3.77614237 5.77614237,4 5.5,4 C4.67157288,4 4,4.67157288 4,5.5 C4,5.77614237 3.77614237,6 3.5,6 C3.22385763,6 3,5.77614237 3,5.5 C3,4.11928813 4.11928813,3 5.5,3 Z M8.5,4 C8.22385763,4 8,3.77614237 8,3.5 C8,3.22385763 8.22385763,3 8.5,3 L10.5,3 C10.7761424,3 11,3.22385763 11,3.5 C11,3.77614237 10.7761424,4 10.5,4 L8.5,4 Z M13.5,4 C13.2238576,4 13,3.77614237 13,3.5 C13,3.22385763 13.2238576,3 13.5,3 L15.5,3 C15.7761424,3 16,3.22385763 16,3.5 C16,3.77614237 15.7761424,4 15.5,4 L13.5,4 Z M8.5,21 C8.22385763,21 8,20.7761424 8,20.5 C8,20.2238576 8.22385763,20 8.5,20 L10.5,20 C10.7761424,20 11,20.2238576 11,20.5 C11,20.7761424 10.7761424,21 10.5,21 L8.5,21 Z M3,8.5 C3,8.22385763 3.22385763,8 3.5,8 C3.77614237,8 4,8.22385763 4,8.5 L4,10.5 C4,10.7761424 3.77614237,11 3.5,11 C3.22385763,11 3,10.7761424 3,10.5 L3,8.5 Z M3,13.5 C3,13.2238576 3.22385763,13 3.5,13 C3.77614237,13 4,13.2238576 4,13.5 L4,15.5 C4,15.7761424 3.77614237,16 3.5,16 C3.22385763,16 3,15.7761424 3,15.5 L3,13.5 Z M3,18.5 C3,18.2238576 3.22385763,18 3.5,18 C3.77614237,18 4,18.2238576 4,18.5 C4,19.3284271 4.67157288,20 5.5,20 C5.77614237,20 6,20.2238576 6,20.5 C6,20.7761424 5.77614237,21 5.5,21 C4.11928813,21 3,19.8807119 3,18.5 Z M21,10.5 C21,10.7761424 20.7761424,11 20.5,11 C20.2238576,11 20,10.7761424 20,10.5 L20,8.5 C20,8.22385763 20.2238576,8 20.5,8 C20.7761424,8 21,8.22385763 21,8.5 L21,10.5 Z M21,5.5 C21,5.77614237 20.7761424,6 20.5,6 C20.2238576,6 20,5.77614237 20,5.5 C20,4.67157288 19.3284271,4 18.5,4 C18.2238576,4 18,3.77614237 18,3.5 C18,3.22385763 18.2238576,3 18.5,3 C19.8807119,3 21,4.11928813 21,5.5 Z\"></path>\n      </svg>\n    </i>\n\n    <i *ngFor=\"let button of modeButtons\" data-mode=\"{{ button.mode }}\" class=\"{{ button.class }}\" title=\"{{ button.title }}\"></i>\n\n    <i *ngIf=\"zoomToExtents\" class=\"vjs-zoom-to-fit\" data-reset=\"true\"title=\"Zoom To Fit\" (click)=\"zoomToFit()\">\n        <svg viewBox=\"0 0 32 30\" stroke=\"currentColor\" fill=\"currentColor\"><path d=\"M3.692 4.63c0-.53.4-.938.939-.938h5.215V0H4.708C2.13 0 0 2.054 0 4.63v5.216h3.692V4.631zM27.354 0h-5.2v3.692h5.17c.53 0 .984.4.984.939v5.215H32V4.631A4.624 4.624 0 0027.354 0zm.954 24.83c0 .532-.4.94-.939.94h-5.215v3.768h5.215c2.577 0 4.631-2.13 4.631-4.707v-5.139h-3.692v5.139zm-23.677.94c-.531 0-.939-.4-.939-.94v-5.138H0v5.139c0 2.577 2.13 4.707 4.708 4.707h5.138V25.77H4.631z\"></path></svg>\n    </i>\n\n    <i *ngIf=\"zoomButtons\" class=\"vjs-zoom-in\" data-zoom-in=\"true\" title=\"Zoom In\" (click)=\"zoomIn()\">\n      <svg viewBox=\"0 0 32 32\" stroke=\"currentColor\" fill=\"currentColor\"><path d=\"M 13 6 L 13 20 M 6 13 L 20 13 M 22,22 L 30,30 M1, 13 a 12,12 0 1,0 24,0 a 12,12 0 1,0 -24,0\"></path></svg>\n    </i>\n\n    <i *ngIf=\"zoomButtons\" class=\"vjs-zoom-out\" data-zoom-out=\"true\" title=\"Zoom Out\" (click)=\"zoomOut()\">\n      <svg viewBox=\"0 0 32 32\" stroke=\"currentColor\" fill=\"currentColor\"><path d=\"M 6 13 L 20 13 M 22,22 L 30,30 M1, 13 a 12,12 0 1,0 24,0 a 12,12 0 1,0 -24,0\"></path></svg>\n    </i>\n\n    <i *ngIf=\"undoRedo\" class=\"vjs-undo\" data-undo=\"true\" title=\"Undo last action\" (click)=\"undo()\"></i>\n    <i *ngIf=\"undoRedo\" class=\"vjs-redo\" data-redo=\"true\" title=\"Redo last action\" (click)=\"redo()\"></i>\n    <i class=\"vjs-controls-reset-selection\" title=\"Clear selection\" (click)=\"resetSelection()\">\n      <svg viewBox=\"0 0 24 24\" stroke=\"currentColor\" fill=\"currentColor\"><path d=\"M2,5 V2 H5 M9,2 H11 M13,2 H15 M19,2 H22 V5 M22,9 V11 M22,13 V15 M22,19 V22 H19 M15,22 H13 M11,22 H9 M5,22 H2 V19 M2,15 V13 M2,11 V9 M9,9 L15,15 M15,9 L9,15\"></path></svg>\n    </i>\n    <i *ngIf=\"clear\" class=\"vjs-clear-dataset\" [title]=\"clearMessage\" (click)=\"doClear()\">\n      <svg viewBox=\"0 0 24 24\" stroke=\"currentColor\" fill=\"currentColor\"><path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"></path></svg>\n    </i>\n    <i *ngFor=\"let button of otherButtons\" class=\"{{ button.class }}\" title=\"{{ button.title }}\"></i>\n  </div>", isInline: true, dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ControlsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ControlsComponent, selector: "vjs-controls", inputs: { undoRedo: "undoRedo", zoomToExtents: "zoomToExtents", zoomButtons: "zoomButtons", clear: "clear", clearMessage: "clearMessage", buttons: "buttons", orientation: "orientation" }, ngImport: i0, template: "<div class=\"vjs-controls\" [attr.data-vjs-orientation]=\"orientation\">\n    <i *ngIf=\"showPanButton\" class=\"vjs-pan-mode vjs-selected-mode\" data-mode=\"pan\" title=\"Pan Mode\" (click)=\"panMode()\">\n      <svg viewBox=\"0 0 24 24\" stroke=\"currentColor\" fill=\"none\">\n        <path d=\"M8 13v-7.5a1.5 1.5 0 0 1 3 0v6.5 M11 5.5v-2a1.5 1.5 0 1 1 3 0v8.5 M14 5.5a1.5 1.5 0 0 1 3 0v6.5 M17 7.5a1.5 1.5 0 0 1 3 0v8.5a6 6 0 0 1 -6 6h-2h.208a6 6 0 0 1 -5.012 -2.7a69.74 69.74 0 0 1 -.196 -.3c-.312 -.479 -1.407 -2.388 -3.286 -5.728a1.5 1.5 0 0 1 .536 -2.022a1.867 1.867 0 0 1 2.28 .28l1.47 1.47\"></path>\n      </svg>\n    </i>\n    <i *ngIf=\"showLassoButton\" class=\"vjs-select-mode\" data-mode=\"select\" title=\"Select Mode\" (click)=\"selectMode()\">\n      <svg fill=\"currentColor\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n        <path d=\"M18.2848192,17.5777124 L20.8535534,20.1464466 C21.0488155,20.3417088 21.0488155,20.6582912 20.8535534,20.8535534 C20.6582912,21.0488155 20.3417088,21.0488155 20.1464466,20.8535534 L17.5777124,18.2848192 L15.9160251,20.7773501 C15.6899572,21.116452 15.1749357,21.0571624 15.0318354,20.6755617 L12.0318354,12.6755617 C11.8811067,12.2736185 12.2736185,11.8811067 12.6755617,12.0318354 L20.6755617,15.0318354 C21.0571624,15.1749357 21.116452,15.6899572 20.7773501,15.9160251 L18.2848192,17.5777124 L18.2848192,17.5777124 Z M17.2312404,17.0782479 L19.4104716,15.6254271 L13.3544004,13.3544004 L15.6254271,19.4104716 L17.0782479,17.2312404 C17.0974475,17.2011742 17.1201804,17.1727128 17.1464466,17.1464466 C17.1727128,17.1201804 17.2011742,17.0974475 17.2312404,17.0782479 L17.2312404,17.0782479 Z M5.5,3 C5.77614237,3 6,3.22385763 6,3.5 C6,3.77614237 5.77614237,4 5.5,4 C4.67157288,4 4,4.67157288 4,5.5 C4,5.77614237 3.77614237,6 3.5,6 C3.22385763,6 3,5.77614237 3,5.5 C3,4.11928813 4.11928813,3 5.5,3 Z M8.5,4 C8.22385763,4 8,3.77614237 8,3.5 C8,3.22385763 8.22385763,3 8.5,3 L10.5,3 C10.7761424,3 11,3.22385763 11,3.5 C11,3.77614237 10.7761424,4 10.5,4 L8.5,4 Z M13.5,4 C13.2238576,4 13,3.77614237 13,3.5 C13,3.22385763 13.2238576,3 13.5,3 L15.5,3 C15.7761424,3 16,3.22385763 16,3.5 C16,3.77614237 15.7761424,4 15.5,4 L13.5,4 Z M8.5,21 C8.22385763,21 8,20.7761424 8,20.5 C8,20.2238576 8.22385763,20 8.5,20 L10.5,20 C10.7761424,20 11,20.2238576 11,20.5 C11,20.7761424 10.7761424,21 10.5,21 L8.5,21 Z M3,8.5 C3,8.22385763 3.22385763,8 3.5,8 C3.77614237,8 4,8.22385763 4,8.5 L4,10.5 C4,10.7761424 3.77614237,11 3.5,11 C3.22385763,11 3,10.7761424 3,10.5 L3,8.5 Z M3,13.5 C3,13.2238576 3.22385763,13 3.5,13 C3.77614237,13 4,13.2238576 4,13.5 L4,15.5 C4,15.7761424 3.77614237,16 3.5,16 C3.22385763,16 3,15.7761424 3,15.5 L3,13.5 Z M3,18.5 C3,18.2238576 3.22385763,18 3.5,18 C3.77614237,18 4,18.2238576 4,18.5 C4,19.3284271 4.67157288,20 5.5,20 C5.77614237,20 6,20.2238576 6,20.5 C6,20.7761424 5.77614237,21 5.5,21 C4.11928813,21 3,19.8807119 3,18.5 Z M21,10.5 C21,10.7761424 20.7761424,11 20.5,11 C20.2238576,11 20,10.7761424 20,10.5 L20,8.5 C20,8.22385763 20.2238576,8 20.5,8 C20.7761424,8 21,8.22385763 21,8.5 L21,10.5 Z M21,5.5 C21,5.77614237 20.7761424,6 20.5,6 C20.2238576,6 20,5.77614237 20,5.5 C20,4.67157288 19.3284271,4 18.5,4 C18.2238576,4 18,3.77614237 18,3.5 C18,3.22385763 18.2238576,3 18.5,3 C19.8807119,3 21,4.11928813 21,5.5 Z\"></path>\n      </svg>\n    </i>\n\n    <i *ngFor=\"let button of modeButtons\" data-mode=\"{{ button.mode }}\" class=\"{{ button.class }}\" title=\"{{ button.title }}\"></i>\n\n    <i *ngIf=\"zoomToExtents\" class=\"vjs-zoom-to-fit\" data-reset=\"true\"title=\"Zoom To Fit\" (click)=\"zoomToFit()\">\n        <svg viewBox=\"0 0 32 30\" stroke=\"currentColor\" fill=\"currentColor\"><path d=\"M3.692 4.63c0-.53.4-.938.939-.938h5.215V0H4.708C2.13 0 0 2.054 0 4.63v5.216h3.692V4.631zM27.354 0h-5.2v3.692h5.17c.53 0 .984.4.984.939v5.215H32V4.631A4.624 4.624 0 0027.354 0zm.954 24.83c0 .532-.4.94-.939.94h-5.215v3.768h5.215c2.577 0 4.631-2.13 4.631-4.707v-5.139h-3.692v5.139zm-23.677.94c-.531 0-.939-.4-.939-.94v-5.138H0v5.139c0 2.577 2.13 4.707 4.708 4.707h5.138V25.77H4.631z\"></path></svg>\n    </i>\n\n    <i *ngIf=\"zoomButtons\" class=\"vjs-zoom-in\" data-zoom-in=\"true\" title=\"Zoom In\" (click)=\"zoomIn()\">\n      <svg viewBox=\"0 0 32 32\" stroke=\"currentColor\" fill=\"currentColor\"><path d=\"M 13 6 L 13 20 M 6 13 L 20 13 M 22,22 L 30,30 M1, 13 a 12,12 0 1,0 24,0 a 12,12 0 1,0 -24,0\"></path></svg>\n    </i>\n\n    <i *ngIf=\"zoomButtons\" class=\"vjs-zoom-out\" data-zoom-out=\"true\" title=\"Zoom Out\" (click)=\"zoomOut()\">\n      <svg viewBox=\"0 0 32 32\" stroke=\"currentColor\" fill=\"currentColor\"><path d=\"M 6 13 L 20 13 M 22,22 L 30,30 M1, 13 a 12,12 0 1,0 24,0 a 12,12 0 1,0 -24,0\"></path></svg>\n    </i>\n\n    <i *ngIf=\"undoRedo\" class=\"vjs-undo\" data-undo=\"true\" title=\"Undo last action\" (click)=\"undo()\"></i>\n    <i *ngIf=\"undoRedo\" class=\"vjs-redo\" data-redo=\"true\" title=\"Redo last action\" (click)=\"redo()\"></i>\n    <i class=\"vjs-controls-reset-selection\" title=\"Clear selection\" (click)=\"resetSelection()\">\n      <svg viewBox=\"0 0 24 24\" stroke=\"currentColor\" fill=\"currentColor\"><path d=\"M2,5 V2 H5 M9,2 H11 M13,2 H15 M19,2 H22 V5 M22,9 V11 M22,13 V15 M22,19 V22 H19 M15,22 H13 M11,22 H9 M5,22 H2 V19 M2,15 V13 M2,11 V9 M9,9 L15,15 M15,9 L9,15\"></path></svg>\n    </i>\n    <i *ngIf=\"clear\" class=\"vjs-clear-dataset\" [title]=\"clearMessage\" (click)=\"doClear()\">\n      <svg viewBox=\"0 0 24 24\" stroke=\"currentColor\" fill=\"currentColor\"><path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"></path></svg>\n    </i>\n    <i *ngFor=\"let button of otherButtons\" class=\"{{ button.class }}\" title=\"{{ button.title }}\"></i>\n  </div>", isInline: true, dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ControlsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ControlsComponent, decorators: [{
             type: Component,
             args: [{
                     selector: "vjs-controls",
@@ -1160,7 +1238,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
     <i *ngFor="let button of otherButtons" class="{{ button.class }}" title="{{ button.title }}"></i>
   </div>`,
                 }]
-        }], ctorParameters: function () { return []; }, propDecorators: { undoRedo: [{
+        }], ctorParameters: () => [], propDecorators: { undoRedo: [{
                 type: Input
             }], zoomToExtents: [{
                 type: Input
@@ -1199,7 +1277,7 @@ class EdgeTypePickerComponent {
                     });
                     const current = inspector.getValue(this.propertyName) || '';
                     this.edgeTypePicker = new EdgeTypePicker(inspector.$ui, this.el.nativeElement, this.resolveMappings(), current, (p, v) => {
-                        inspector.setValue(this.propertyName, v);
+                        inspector.setValue(this.propertyName, v, null);
                         this.changeEvent.emit(v);
                     });
                     this.edgeTypePicker.render(this.propertyName, inspector._currentCommonData);
@@ -1207,16 +1285,16 @@ class EdgeTypePickerComponent {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EdgeTypePickerComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EdgeTypePickerComponent, selector: "vjs-edge-type", inputs: { propertyName: "propertyName", edgeMappings: "edgeMappings" }, outputs: { changeEvent: "changeEvent" }, ngImport: i0, template: `<div [attr.vjs-att]="propertyName"></div>`, isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EdgeTypePickerComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: EdgeTypePickerComponent, selector: "vjs-edge-type", inputs: { propertyName: "propertyName", edgeMappings: "edgeMappings" }, outputs: { changeEvent: "changeEvent" }, ngImport: i0, template: `<div [attr.vjs-att]="propertyName"></div>`, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EdgeTypePickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EdgeTypePickerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: "vjs-edge-type",
                     template: `<div [attr.vjs-att]="propertyName"></div>`
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { propertyName: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { propertyName: [{
                 type: Input
             }], edgeMappings: [{
                 type: Input
@@ -1272,15 +1350,15 @@ class PaletteComponent {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PaletteComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: PaletteComponent, selector: "[vjs-palette]", inputs: { selector: "selector", dataGenerator: "dataGenerator", typeGenerator: "typeGenerator", groupIdentifier: "groupIdentifier", allowDropOnEdge: "allowDropOnEdge", allowDropOnGroup: "allowDropOnGroup", allowDropOnCanvas: "allowDropOnCanvas", allowDropOnNode: "allowDropOnNode", onVertexAdded: "onVertexAdded", dragSize: "dragSize", canvasDropFilter: "canvasDropFilter", mode: "mode", selectAfterAdd: "selectAfterAdd", allowClickToAdd: "allowClickToAdd", clickToAddOnly: "clickToAddOnly" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PaletteComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: PaletteComponent, selector: "[vjs-palette]", inputs: { selector: "selector", dataGenerator: "dataGenerator", typeGenerator: "typeGenerator", groupIdentifier: "groupIdentifier", allowDropOnEdge: "allowDropOnEdge", allowDropOnGroup: "allowDropOnGroup", allowDropOnCanvas: "allowDropOnCanvas", allowDropOnNode: "allowDropOnNode", onVertexAdded: "onVertexAdded", dragSize: "dragSize", canvasDropFilter: "canvasDropFilter", mode: "mode", selectAfterAdd: "selectAfterAdd", allowClickToAdd: "allowClickToAdd", clickToAddOnly: "clickToAddOnly" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PaletteComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PaletteComponent, decorators: [{
             type: Directive,
             args: [{
                     selector: "[vjs-palette]",
                 }]
-        }], ctorParameters: function () { return []; }, propDecorators: { selector: [{
+        }], ctorParameters: () => [], propDecorators: { selector: [{
                 type: Input
             }], dataGenerator: [{
                 type: Input
@@ -1343,10 +1421,10 @@ class ExportControlsComponent {
             type: "image/jpeg",
         }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ExportControlsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ExportControlsComponent, selector: "vjs-export-controls", inputs: { showLabel: "showLabel", label: "label", margins: "margins", svgOptions: "svgOptions", imageOptions: "imageOptions", allowSvgExport: "allowSvgExport", allowPngExport: "allowPngExport", allowJpgExport: "allowJpgExport" }, ngImport: i0, template: "<div class=\"vjs-controls vjs-export-controls\">\n    <span *ngIf=\"showLabel\">{{ label }}</span>\n    <i *ngIf=\"allowSvgExport\"\n      ><a href=\"#\" id=\"exportSvg\" (click)=\"exportSVG()\">SVG</a></i\n    >\n    <i *ngIf=\"allowPngExport\"\n      ><a href=\"#\" id=\"exportPng\" (click)=\"exportPNG()\">PNG</a></i\n    >\n    <i *ngIf=\"allowJpgExport\"\n      ><a href=\"#\" id=\"exportJpg\" (click)=\"exportJPG()\">JPG</a></i\n    >\n  </div>", isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ExportControlsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ExportControlsComponent, selector: "vjs-export-controls", inputs: { showLabel: "showLabel", label: "label", margins: "margins", svgOptions: "svgOptions", imageOptions: "imageOptions", allowSvgExport: "allowSvgExport", allowPngExport: "allowPngExport", allowJpgExport: "allowJpgExport" }, ngImport: i0, template: "<div class=\"vjs-controls vjs-export-controls\">\n    <span *ngIf=\"showLabel\">{{ label }}</span>\n    <i *ngIf=\"allowSvgExport\"\n      ><a href=\"#\" id=\"exportSvg\" (click)=\"exportSVG()\">SVG</a></i\n    >\n    <i *ngIf=\"allowPngExport\"\n      ><a href=\"#\" id=\"exportPng\" (click)=\"exportPNG()\">PNG</a></i\n    >\n    <i *ngIf=\"allowJpgExport\"\n      ><a href=\"#\" id=\"exportJpg\" (click)=\"exportJPG()\">JPG</a></i\n    >\n  </div>", isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ExportControlsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ExportControlsComponent, decorators: [{
             type: Component,
             args: [{
                     selector: "vjs-export-controls",
@@ -1408,7 +1486,7 @@ class ColorPickerComponent {
                 colorInput.onchange = () => {
                     const color = colorInput.value;
                     this.pushColor(color);
-                    i.setValue(this.propertyName, color, true);
+                    i.setValue(this.propertyName, color, null, true);
                 };
                 setTimeout(() => {
                     // if there is a color, maybe push to context
@@ -1428,7 +1506,7 @@ class ColorPickerComponent {
     }
     selectColor(color) {
         this.$getInspector(inspector => {
-            inspector.setValue(this.propertyName, color);
+            inspector.setValue(this.propertyName, color, null);
             this.$el.nativeElement.querySelector("[type='color']").value = color;
         });
     }
@@ -1447,10 +1525,10 @@ class ColorPickerComponent {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColorPickerComponent, selector: "vjs-color", inputs: { propertyName: "propertyName", maxColors: "maxColors" }, outputs: { changeEvent: "changeEvent" }, ngImport: i0, template: "<div class=\"vjs-color-picker\">\n    <input type=\"color\" [attr.vjs-att]=\"propertyName\"/>\n    <div class=\"vjs-color-picker-swatches\">\n      <div *ngFor=\"let swatch of swatches()\" class=\"vjs-color-picker-swatch\" attr.data-color=\"{{swatch}}\" style=\"background-color:{{swatch}}\" (click)=\"selectColor(swatch)\"></div>\n    </div>\n  </div>", isInline: true, dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ColorPickerComponent, selector: "vjs-color", inputs: { propertyName: "propertyName", maxColors: "maxColors" }, outputs: { changeEvent: "changeEvent" }, ngImport: i0, template: "<div class=\"vjs-color-picker\">\n    <input type=\"color\" [attr.vjs-att]=\"propertyName\"/>\n    <div class=\"vjs-color-picker-swatches\">\n      <div *ngFor=\"let swatch of swatches()\" class=\"vjs-color-picker-swatch\" attr.data-color=\"{{swatch}}\" style=\"background-color:{{swatch}}\" (click)=\"selectColor(swatch)\"></div>\n    </div>\n  </div>", isInline: true, dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColorPickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ColorPickerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: "vjs-color",
@@ -1461,7 +1539,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
     </div>
   </div>`
                 }]
-        }], ctorParameters: function () { return []; }, propDecorators: { propertyName: [{
+        }], ctorParameters: () => [], propDecorators: { propertyName: [{
                 type: Input
             }], maxColors: [{
                 type: Input
@@ -1472,19 +1550,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 class DiagramComponent {
     constructor() {
+        
+        this.data = input();
+        
+        this.url = input();
         this.$ngZone = inject(NgZone);
         this.$el = inject(ElementRef);
         this.$vjs = inject(VisuallyJsService);
+        this._dataEffect = effect(() => {
+            const currentData = this.data();
+            if (currentData) {
+                if (this.diagram) {
+                    this.diagram.clear();
+                    this.diagram.load({ data: currentData });
+                }
+            }
+        });
+        this._urlEffect = effect(() => {
+            const currentUrl = this.url();
+            if (currentUrl) {
+                // Respond to changes in the url here.
+                // For example, if you need to reload the model with new data:
+                if (this.diagram) {
+                    this.diagram.clear();
+                    this.diagram.load({ url: currentUrl });
+                }
+            }
+        });
     }
     ngAfterViewInit() {
         this.$ngZone.runOutsideAngular(() => {
             this.diagram = createDiagram(this.$el.nativeElement, this.options, this.modelOptions);
             this.$vjs.$setDiagram(this.diagram);
-            if (this.data != null) {
-                this.diagram.load({ data: this.data });
+            const initialData = this.data();
+            const initialUrl = this.url();
+            if (initialData) {
+                this.diagram.load({ data: initialData });
             }
-            else if (this.url != null) {
-                this.diagram.load({ url: this.url });
+            else if (initialUrl) {
+                this.diagram.load({ url: initialUrl });
             }
         });
     }
@@ -1499,10 +1603,10 @@ class DiagramComponent {
     saveToUrl(options) {
         this.diagram.saveToUrl(options);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DiagramComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DiagramComponent, selector: "vjs-diagram", inputs: { options: "options", data: "data", url: "url", modelOptions: "modelOptions" }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DiagramComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: DiagramComponent, selector: "vjs-diagram", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: false, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, url: { classPropertyName: "url", publicName: "url", isSignal: true, isRequired: false, transformFunction: null }, modelOptions: { classPropertyName: "modelOptions", publicName: "modelOptions", isSignal: false, isRequired: false, transformFunction: null } }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DiagramComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DiagramComponent, decorators: [{
             type: Component,
             args: [{
                     selector: "vjs-diagram",
@@ -1510,10 +1614,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }], propDecorators: { options: [{
                 type: Input
-            }], data: [{
-                type: Input
-            }], url: [{
-                type: Input
             }], modelOptions: [{
                 type: Input
             }] } });
@@ -1555,12 +1655,12 @@ class SeriesBasedChartComponent {
     ngOnDestroy() {
         this.chart?.destroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SeriesBasedChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SeriesBasedChartComponent }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SeriesBasedChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SeriesBasedChartComponent }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SeriesBasedChartComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SeriesBasedChartComponent, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return []; }, propDecorators: { data: [{
+        }], ctorParameters: () => [], propDecorators: { data: [{
                 type: Input
             }], url: [{
                 type: Input
@@ -1575,10 +1675,10 @@ class ColumnChartComponent extends SeriesBasedChartComponent {
     createChart(el, options) {
         return new ColumnChart(el, options);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColumnChartComponent, selector: "vjs-column-chart", inputs: { data: "data", url: "url", options: "options", useModel: "useModel" }, usesInheritance: true, ngImport: i0, template: `<div></div>`, isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ColumnChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ColumnChartComponent, selector: "vjs-column-chart", inputs: { data: "data", url: "url", options: "options", useModel: "useModel" }, usesInheritance: true, ngImport: i0, template: `<div></div>`, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnChartComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ColumnChartComponent, decorators: [{
             type: Component,
             args: [{
                     selector: "vjs-column-chart",
@@ -1599,10 +1699,10 @@ class BarChartComponent extends SeriesBasedChartComponent {
     createChart(el, options) {
         return new BarChart(el, options);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BarChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: BarChartComponent, selector: "vjs-bar-chart", inputs: { data: "data", url: "url", options: "options", useModel: "useModel" }, usesInheritance: true, ngImport: i0, template: `<div></div>`, isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BarChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: BarChartComponent, selector: "vjs-bar-chart", inputs: { data: "data", url: "url", options: "options", useModel: "useModel" }, usesInheritance: true, ngImport: i0, template: `<div></div>`, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BarChartComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BarChartComponent, decorators: [{
             type: Component,
             args: [{
                     selector: "vjs-bar-chart",
@@ -1658,16 +1758,16 @@ class DiagramPaletteComponent {
             this.$init(this.inputDiagram);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DiagramPaletteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DiagramPaletteComponent, selector: "vjs-diagram-palette", inputs: { fill: "fill", outline: "outline", dragSize: "dragSize", inspector: "inspector", iconSize: "iconSize", showLabels: "showLabels", paletteStrokeWidth: "paletteStrokeWidth", showAllMessage: "showAllMessage", onCellAdded: "onCellAdded", mode: "mode", allowClickToAdd: "allowClickToAdd", autoExitDrawMode: "autoExitDrawMode", selectAfterAdd: "selectAfterAdd", inputDiagram: ["diagram", "inputDiagram"], onVertexAdded: "onVertexAdded", preparedShapes: "preparedShapes" }, ngImport: i0, template: `<div></div>`, isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DiagramPaletteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DiagramPaletteComponent, selector: "vjs-diagram-palette", inputs: { fill: "fill", outline: "outline", dragSize: "dragSize", inspector: "inspector", iconSize: "iconSize", showLabels: "showLabels", paletteStrokeWidth: "paletteStrokeWidth", showAllMessage: "showAllMessage", onCellAdded: "onCellAdded", mode: "mode", allowClickToAdd: "allowClickToAdd", autoExitDrawMode: "autoExitDrawMode", selectAfterAdd: "selectAfterAdd", inputDiagram: ["diagram", "inputDiagram"], onVertexAdded: "onVertexAdded", preparedShapes: "preparedShapes" }, ngImport: i0, template: `<div></div>`, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DiagramPaletteComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DiagramPaletteComponent, decorators: [{
             type: Component,
             args: [{
                     selector: "vjs-diagram-palette",
                     template: `<div></div>`,
                 }]
-        }], ctorParameters: function () { return []; }, propDecorators: { fill: [{
+        }], ctorParameters: () => [], propDecorators: { fill: [{
                 type: Input
             }], outline: [{
                 type: Input
@@ -1707,10 +1807,10 @@ class XYChartComponent extends SeriesBasedChartComponent {
     createChart(el, options) {
         return new CategoryValueChart(el, options);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: XYChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: XYChartComponent, selector: "vjs-xy-chart", inputs: { data: "data", url: "url", options: "options", useModel: "useModel" }, usesInheritance: true, ngImport: i0, template: `<div></div>`, isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: XYChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: XYChartComponent, selector: "vjs-xy-chart", inputs: { data: "data", url: "url", options: "options", useModel: "useModel" }, usesInheritance: true, ngImport: i0, template: `<div></div>`, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: XYChartComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: XYChartComponent, decorators: [{
             type: Component,
             args: [{
                     selector: "vjs-xy-chart",
@@ -1731,10 +1831,10 @@ class LineChartComponent extends SeriesBasedChartComponent {
     createChart(el, options) {
         return new LineChart(el, options);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LineChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: LineChartComponent, selector: "vjs-line-chart", inputs: { data: "data", url: "url", options: "options", useModel: "useModel" }, usesInheritance: true, ngImport: i0, template: `<div></div>`, isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LineChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: LineChartComponent, selector: "vjs-line-chart", inputs: { data: "data", url: "url", options: "options", useModel: "useModel" }, usesInheritance: true, ngImport: i0, template: `<div></div>`, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LineChartComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LineChartComponent, decorators: [{
             type: Component,
             args: [{
                     selector: "vjs-line-chart",
@@ -1755,10 +1855,10 @@ class AreaChartComponent extends SeriesBasedChartComponent {
     createChart(el, options) {
         return new AreaChart(el, options);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AreaChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AreaChartComponent, selector: "vjs-area-chart", inputs: { data: "data", url: "url", options: "options", useModel: "useModel" }, usesInheritance: true, ngImport: i0, template: `<div></div>`, isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AreaChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: AreaChartComponent, selector: "vjs-area-chart", inputs: { data: "data", url: "url", options: "options", useModel: "useModel" }, usesInheritance: true, ngImport: i0, template: `<div></div>`, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AreaChartComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AreaChartComponent, decorators: [{
             type: Component,
             args: [{
                     selector: "vjs-area-chart",
@@ -1779,10 +1879,10 @@ class PieChartComponent extends SeriesBasedChartComponent {
     createChart(el, options) {
         return new PieChart(el, options);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PieChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PieChartComponent, selector: "vjs-pie-chart", inputs: { data: "data", url: "url", options: "options", useModel: "useModel" }, usesInheritance: true, ngImport: i0, template: `<div></div>`, isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PieChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: PieChartComponent, selector: "vjs-pie-chart", inputs: { data: "data", url: "url", options: "options", useModel: "useModel" }, usesInheritance: true, ngImport: i0, template: `<div></div>`, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PieChartComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PieChartComponent, decorators: [{
             type: Component,
             args: [{
                     selector: "vjs-pie-chart",
@@ -1803,10 +1903,10 @@ class ScatterChartComponent extends SeriesBasedChartComponent {
     createChart(el, options) {
         return new ScatterChart(el, options);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ScatterChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ScatterChartComponent, selector: "vjs-scatter-chart", inputs: { data: "data", url: "url", options: "options", useModel: "useModel" }, usesInheritance: true, ngImport: i0, template: `<div></div>`, isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ScatterChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ScatterChartComponent, selector: "vjs-scatter-chart", inputs: { data: "data", url: "url", options: "options", useModel: "useModel" }, usesInheritance: true, ngImport: i0, template: `<div></div>`, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ScatterChartComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ScatterChartComponent, decorators: [{
             type: Component,
             args: [{
                     selector: "vjs-scatter-chart",
@@ -1827,10 +1927,10 @@ class BubbleChartComponent extends SeriesBasedChartComponent {
     createChart(el, options) {
         return new BubbleChart(el, options);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BubbleChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: BubbleChartComponent, selector: "vjs-bubble-chart", inputs: { data: "data", url: "url", options: "options", useModel: "useModel" }, usesInheritance: true, ngImport: i0, template: `<div></div>`, isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BubbleChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: BubbleChartComponent, selector: "vjs-bubble-chart", inputs: { data: "data", url: "url", options: "options", useModel: "useModel" }, usesInheritance: true, ngImport: i0, template: `<div></div>`, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BubbleChartComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BubbleChartComponent, decorators: [{
             type: Component,
             args: [{
                     selector: "vjs-bubble-chart",
@@ -1896,16 +1996,16 @@ class SankeyChartComponent {
     ngOnDestroy() {
         this.chart?.destroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SankeyChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SankeyChartComponent, selector: "vjs-sankey-chart", inputs: { csvData: "csvData", jsonData: "jsonData", url: "url", interactive: "interactive", pivot: "pivot", options: "options", useModel: "useModel" }, usesOnChanges: true, ngImport: i0, template: `<div></div>`, isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SankeyChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SankeyChartComponent, selector: "vjs-sankey-chart", inputs: { csvData: "csvData", jsonData: "jsonData", url: "url", interactive: "interactive", pivot: "pivot", options: "options", useModel: "useModel" }, usesOnChanges: true, ngImport: i0, template: `<div></div>`, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SankeyChartComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SankeyChartComponent, decorators: [{
             type: Component,
             args: [{
                     selector: "vjs-sankey-chart",
                     template: `<div></div>`
                 }]
-        }], ctorParameters: function () { return []; }, propDecorators: { csvData: [{
+        }], ctorParameters: () => [], propDecorators: { csvData: [{
                 type: Input
             }], jsonData: [{
                 type: Input
@@ -1946,14 +2046,14 @@ class DecoratorComponent {
             this.surface.unfixElement(this.el.nativeElement.firstElementChild);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DecoratorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DecoratorComponent, selector: "vjs-decorator", inputs: { placement: "placement", position: "position", constraints: "constraints" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DecoratorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DecoratorComponent, selector: "vjs-decorator", inputs: { placement: "placement", position: "position", constraints: "constraints" }, ngImport: i0, template: `
     <div style="display:inline-block;">
       <ng-content></ng-content>
     </div>
   `, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DecoratorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DecoratorComponent, decorators: [{
             type: Component,
             args: [{
                     selector: "vjs-decorator",
@@ -1972,13 +2072,409 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 
+class SurfacePopupComponent {
+    constructor() {
+        this.cdr = inject(ChangeDetectorRef);
+        this.vjs = inject(VisuallyJsService);
+        this.initialized = false;
+        this.current = signal(null);
+        this.model = this.vjs.model;
+        this.ui = this.vjs.ui;
+        this.display = computed(() => (this.current() == null ? "none" : "block"));
+    }
+    $hide() {
+        this.popupHandler?.$hide();
+    }
+    ngAfterViewInit() {
+        this.vjs.getSurface((surface) => {
+            if (!this.initialized) {
+                this.initialized = true;
+                this.popupHandler = new PopupHandler(this.selector, this.container.nativeElement, surface, (v) => {
+                    this.current.set(v);
+                    requestAnimationFrame(() => this.cdr.detectChanges());
+                }, this.anchor);
+            }
+        });
+    }
+    ngOnDestroy() {
+        if (this.popupHandler) {
+            this.popupHandler.$destroy();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SurfacePopupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SurfacePopupComponent, selector: "vjs-surface-popup", inputs: { selector: "selector", anchor: "anchor" }, queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: "\n    <div #container class=\"vjs-surface-popup\" [style.display]=\"display()\" style=\"position:absolute\">\n      <ng-container *ngIf=\"current()\">\n        <ng-container *ngTemplateOutlet=\"template; context: { vertex: current(), model: model(), ui: ui(), hide:$hide }\"></ng-container>\n      </ng-container>\n    </div>\n  ", isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SurfacePopupComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "vjs-surface-popup",
+                    template: `
+    <div #container class="${CLASS_SURFACE_POPUP}" [style.display]="display()" style="position:absolute">
+      <ng-container *ngIf="current()">
+        <ng-container *ngTemplateOutlet="template; context: { vertex: current(), model: model(), ui: ui(), hide:$hide }"></ng-container>
+      </ng-container>
+    </div>
+  `
+                }]
+        }], propDecorators: { selector: [{
+                type: Input,
+                args: [{ required: true }]
+            }], anchor: [{
+                type: Input
+            }], template: [{
+                type: ContentChild,
+                args: [TemplateRef]
+            }], container: [{
+                type: ViewChild,
+                args: ["container"]
+            }] } });
+
+
+class PaperComponent {
+    constructor() {
+        
+        this.data = input();
+        
+        this.url = input();
+        
+        this.vertexEvent = new EventEmitter();
+        this.$el = inject(ElementRef);
+        this.$viewContainerRef = inject(ViewContainerRef);
+        this.$ngZone = inject(NgZone);
+        this.$vjs = inject(VisuallyJsService);
+        this._dataEffect = effect(() => {
+            const currentData = this.data();
+            if (currentData) {
+                if (this.model) {
+                    this.model.clear();
+                    this.model.load({ data: currentData });
+                }
+            }
+        });
+        this._urlEffect = effect(() => {
+            const currentUrl = this.url();
+            if (currentUrl) {
+                // Respond to changes in the url here.
+                // For example, if you need to reload the model with new data:
+                if (this.model) {
+                    this.model.clear();
+                    this.model.load({ url: currentUrl });
+                }
+            }
+        });
+    }
+    
+    getNativeElement(component) {
+        return component.location.nativeElement.childNodes[0];
+    }
+    _getComponent(el, tryParent) {
+        if (el == null) {
+            return null;
+        }
+        else {
+            let vjc = el._visuallyJsNgComponent;
+            if (vjc == null && tryParent && el.parentNode != null) {
+                vjc = el.parentNode._visuallyJsNgComponent;
+            }
+            return vjc;
+        }
+    }
+    _getComponentThen(el, then, tryParent) {
+        const c = this._getComponent(el, tryParent);
+        if (c != null) {
+            then(c);
+        }
+    }
+    
+    nodeOrGroupUpdated(params) {
+        const info = this.paper.getObjectInfo(params.vertex, false);
+        this._getComponentThen(info.el, (component) => {
+            component.data = params.vertex.data;
+            component.$data?.set(component.data);
+            if (component.changeDetectorRef) {
+                component.changeDetectorRef.detectChanges();
+            }
+        }, false);
+    }
+    portUpdated(params) {
+        const info = this.paper.getObjectInfo(params.port, false);
+        this._getComponentThen(info.el, (component) => {
+            if (component instanceof BasePortComponent) {
+                component.data = params.port.data;
+                if (component.changeDetectorRef) {
+                    component.changeDetectorRef.detectChanges();
+                }
+            }
+        }, true);
+    }
+    
+    edgeUpdated(params) {
+        const connection = this.paper.getRenderedConnection(params.edge.id);
+        if (connection) {
+            for (let id in connection.overlays) {
+                const canvas = connection.overlays[id].contentElement;
+                this._getComponentThen(canvas, (component) => {
+                    if (component.changeDetectorRef != null) {
+                        component.changeDetectorRef.detectChanges();
+                    }
+                }, false);
+            }
+        }
+    }
+    edgeAddedRemoved(params) {
+        const info = this.paper.getObjectInfo(params.edge.source, false);
+        if (info.el) {
+            this._getComponentThen(info.el, (component) => {
+                try {
+                    ;
+                    component.$updateEdges();
+                    if (component.changeDetectorRef) {
+                        component.changeDetectorRef.detectChanges();
+                    }
+                }
+                catch (e) { }
+            }, false);
+        }
+        const info2 = this.paper.getObjectInfo(params.edge.target, false);
+        if (info2.el && info.obj.getFullId() !== info2.obj.getFullId()) {
+            this._getComponentThen(info2.el, (component) => {
+                try {
+                    ;
+                    component.$updateEdges();
+                    // tslint:disable-next-line:align
+                    if (component.changeDetectorRef) {
+                        component.changeDetectorRef.detectChanges();
+                    }
+                }
+                catch (e) { }
+            }, false);
+        }
+    }
+    
+    _processAngularOverlays(view) {
+        const self = this;
+        const edgeTypes = view.edges || {};
+        for (let edgeTypeId in edgeTypes) {
+            const edgeType = edgeTypes[edgeTypeId];
+            if (edgeType.overlays != null) {
+                edgeType.overlays = edgeType.overlays.map((o) => {
+                    if (typeof o === "string") {
+                        return o;
+                    }
+                    else {
+                        const fo = o;
+                        if (fo.type === AngularComponentOverlayType) {
+                            const newSpec = Object.assign(fo, {
+                                type: OVERLAY_TYPE_CUSTOM,
+                            });
+                            newSpec.options = (newSpec.options || {});
+                            newSpec.options.create = (connection) => {
+                                const el = document.createElement(ELEMENT_DIV);
+                                let createdComponent = self.$viewContainerRef.createComponent(newSpec.options.component);
+                                let angularOverlayComponent = createdComponent.instance;
+                                let nativeEl = createdComponent.location.nativeElement.childNodes[0];
+                                el.appendChild(nativeEl);
+                                el._visuallyJsNgComponent = angularOverlayComponent;
+                                
+                                if (connection != null) {
+                                    const edge = connection.edge;
+                                    angularOverlayComponent.edge = edge;
+                                    angularOverlayComponent.data = edge.data;
+                                }
+                                angularOverlayComponent.model = self.model;
+                                angularOverlayComponent.ui = self.paper;
+                                createdComponent.changeDetectorRef.detectChanges();
+                                return el;
+                            };
+                            return newSpec;
+                        }
+                        else {
+                            return fo;
+                        }
+                    }
+                });
+            }
+        }
+        return view;
+    }
+    
+    save(options) {
+        this.paper.save(options);
+    }
+    
+    exportData(options) {
+        return this.paper.model.exportData(options);
+    }
+    
+    dataLoadEnd() {
+        setTimeout(() => {
+            if (this.paper != null) {
+                this.paper.repaintEverything();
+            }
+        }, 0);
+    }
+    $removeNgElement(el) {
+        if (el._ref != null) {
+            el._ref.destroy();
+        }
+        if (el.parentNode != null) {
+            el.parentNode.removeChild(el);
+        }
+    }
+    
+    ngAfterViewInit() {
+        this.$ngZone.runOutsideAngular(() => {
+            const view = this._processAngularOverlays(this.viewOptions || {});
+            const self = this;
+            this.renderOptions = this.renderOptions || {};
+            const render = (directiveId, data, instance, objectType, paper, def, modelObject, eventInfo) => {
+                let component;
+                if (def.component == null) {
+                    if (isGroup(modelObject)) {
+                        component = DefaultGroupComponent;
+                    }
+                    else {
+                        component = DefaultNodeComponent;
+                    }
+                }
+                else {
+                    component = def.component;
+                }
+                let createdComponent = self.$viewContainerRef.createComponent(component);
+                let _componentRef = createdComponent.instance;
+                _componentRef.data = data || {};
+                _componentRef.model = model;
+                _componentRef.paper = paper;
+                _componentRef.ui = paper;
+                _componentRef.modelObject = modelObject;
+                // get the reflection data for the component
+                const componentInfo = reflectComponentType(component);
+                // ..and populate any declared inputs from data
+                componentInfo.inputs.forEach((pt) => {
+                    const pv = _componentRef.data[pt.propName];
+                    if (pv != null) {
+                        _componentRef[pt.propName] = pv;
+                    }
+                });
+                // map to any outputs
+                componentInfo.outputs.forEach((pt) => {
+                    _componentRef[pt.propName].subscribe((d) => self.vertexEvent.emit({
+                        vertex: modelObject,
+                        event: pt.propName,
+                        payload: d,
+                        component: createdComponent,
+                    }));
+                });
+                // if angular def has 'inputs' set, set them on the component. this is different to the mechanism above, in which values are extracted from
+                // each node's backing data. here we inject values either as a string or from some arbitrary function.
+                if (def.inputs != null) {
+                    for (let k in def.inputs) {
+                        const v = def.inputs[k];
+                        const value = typeof v === "string" ? v : v(modelObject);
+                        _componentRef[k] = value;
+                    }
+                }
+                createdComponent.changeDetectorRef.detectChanges();
+                // TODO this should not be necessary
+                const nativeElement = self.getNativeElement(createdComponent);
+                _componentRef._el = nativeElement;
+                _componentRef._el._visuallyJsNgComponent = _componentRef;
+                _componentRef._el._ref = createdComponent; // we store _ref so we can call `destroy` on it later if the node is removed.
+                paper.$vertexRendered(modelObject, nativeElement, def, eventInfo);
+            };
+            const templateRenderer = {
+                asynchronous: false,
+                reactive: true,
+                usesWrapperElement: false,
+                update: (el, data, v, renderer) => { },
+                render,
+                rerender: (directiveId, data, instance, objectType, paper, def, modelObject, eventInfo, originalElement) => {
+                    this.$removeNgElement(originalElement);
+                    render(directiveId, data, instance, objectType, paper, def, modelObject, eventInfo);
+                },
+                cleanupVertex: (objId, el) => {
+                    this.$removeNgElement(el);
+                },
+                cleanupPort: (objId, el) => {
+                    this.$removeNgElement(el);
+                },
+            };
+            const renderParams = extend(this.renderOptions || {}, {
+                view: view,
+            });
+            let model = this.inputModel || new BrowserUIAngularModel(this.modelOptions);
+            this.model = model;
+            this.paper = renderPaper(model, self.$el.nativeElement, templateRenderer, renderParams);
+            this.$vjs.$setPaper(this.paper);
+            // ----------------
+            this.nodeUpdateFn = this.nodeOrGroupUpdated.bind(this);
+            model.bind(EVENT_NODE_UPDATED, this.nodeUpdateFn);
+            model.bind(EVENT_PORT_ADDED, this.nodeUpdateFn);
+            model.bind(EVENT_GROUP_UPDATED, this.nodeUpdateFn);
+            this.dataLoadEndFn = this.dataLoadEnd.bind(this);
+            model.bind(EVENT_DATA_LOAD_END, this.dataLoadEndFn);
+            this.portUpdateFn = this.portUpdated.bind(this);
+            model.bind(EVENT_PORT_UPDATED, this.portUpdateFn);
+            this.edgeUpdateFn = this.edgeUpdated.bind(this);
+            model.bind(EVENT_EDGE_UPDATED, this.edgeUpdateFn);
+            this.edgeAddFn = this.edgeAddedRemoved.bind(this);
+            this.edgeRemoveFn = this.edgeAddedRemoved.bind(this);
+            model.bind(EVENT_EDGE_ADDED, this.edgeAddFn);
+            model.bind(EVENT_EDGE_REMOVED, this.edgeRemoveFn);
+            const initialData = this.data();
+            const initialUrl = this.url();
+            if (initialData) {
+                this.model.load({ data: initialData });
+            }
+            else if (initialUrl) {
+                this.model.load({ url: initialUrl });
+            }
+        });
+    }
+    
+    ngOnDestroy() {
+        this.paper.destroy();
+        this.model.unbind(EVENT_NODE_UPDATED, this.nodeUpdateFn);
+        this.model.unbind(EVENT_GROUP_UPDATED, this.nodeUpdateFn);
+        this.model.unbind(EVENT_PORT_ADDED, this.nodeUpdateFn);
+        this.model.unbind(EVENT_PORT_UPDATED, this.portUpdateFn);
+        this.model.unbind(EVENT_EDGE_UPDATED, this.edgeUpdateFn);
+        this.model.unbind(EVENT_EDGE_ADDED, this.edgeAddFn);
+        this.model.unbind(EVENT_EDGE_REMOVED, this.edgeRemoveFn);
+        this.model.unbind(EVENT_DATA_LOAD_END, this.dataLoadEndFn);
+        this.paper.unbind(EVENT_INTERNAL_CONNECTION, this.edgeAddFn);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PaperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: PaperComponent, selector: "vjs-paper", inputs: { inputModel: { classPropertyName: "inputModel", publicName: "model", isSignal: false, isRequired: false, transformFunction: null }, viewOptions: { classPropertyName: "viewOptions", publicName: "viewOptions", isSignal: false, isRequired: false, transformFunction: null }, renderOptions: { classPropertyName: "renderOptions", publicName: "renderOptions", isSignal: false, isRequired: false, transformFunction: null }, modelOptions: { classPropertyName: "modelOptions", publicName: "modelOptions", isSignal: false, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, url: { classPropertyName: "url", publicName: "url", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { vertexEvent: "vertexEvent" }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PaperComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "vjs-paper",
+                    template: `<ng-content></ng-content>`
+                }]
+        }], propDecorators: { inputModel: [{
+                type: Input,
+                args: [{ alias: "model" }]
+            }], viewOptions: [{
+                type: Input
+            }], renderOptions: [{
+                type: Input
+            }], modelOptions: [{
+                type: Input
+            }], vertexEvent: [{
+                type: Output
+            }] } });
+
+
 class VisuallyJsModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: VisuallyJsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: VisuallyJsModule, declarations: [DefaultNodeComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: VisuallyJsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: VisuallyJsModule, declarations: [DefaultNodeComponent,
             DefaultGroupComponent,
             BasePortComponent,
             MiniviewComponent,
             SurfaceComponent,
+            PaperComponent,
             PaletteComponent,
             ShapePaletteComponent,
             DiagramPaletteComponent,
@@ -1998,8 +2494,10 @@ class VisuallyJsModule {
             ScatterChartComponent,
             BubbleChartComponent,
             SankeyChartComponent,
-            DecoratorComponent], imports: [CommonModule], exports: [MiniviewComponent,
+            DecoratorComponent,
+            SurfacePopupComponent], imports: [CommonModule], exports: [MiniviewComponent,
             SurfaceComponent,
+            PaperComponent,
             PaletteComponent,
             DiagramPaletteComponent,
             ShapeComponent,
@@ -2018,10 +2516,11 @@ class VisuallyJsModule {
             ScatterChartComponent,
             BubbleChartComponent,
             SankeyChartComponent,
-            DecoratorComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: VisuallyJsModule, imports: [CommonModule] }); }
+            DecoratorComponent,
+            SurfacePopupComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: VisuallyJsModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: VisuallyJsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: VisuallyJsModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule],
@@ -2031,6 +2530,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         BasePortComponent,
                         MiniviewComponent,
                         SurfaceComponent,
+                        PaperComponent,
                         PaletteComponent,
                         ShapePaletteComponent,
                         DiagramPaletteComponent,
@@ -2050,11 +2550,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         ScatterChartComponent,
                         BubbleChartComponent,
                         SankeyChartComponent,
-                        DecoratorComponent
+                        DecoratorComponent,
+                        SurfacePopupComponent
                     ],
                     exports: [
                         MiniviewComponent,
                         SurfaceComponent,
+                        PaperComponent,
                         PaletteComponent,
                         DiagramPaletteComponent,
                         ShapeComponent,
@@ -2073,7 +2575,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         ScatterChartComponent,
                         BubbleChartComponent,
                         SankeyChartComponent,
-                        DecoratorComponent
+                        DecoratorComponent,
+                        SurfacePopupComponent
                     ]
                 }]
         }] });
@@ -2143,12 +2646,12 @@ class InspectorComponent {
     }
     
     afterUpdate(ui) { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: InspectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: InspectorComponent, inputs: { cssClass: "cssClass", showCloseButton: "showCloseButton", context: "context" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InspectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: InspectorComponent, inputs: { cssClass: "cssClass", showCloseButton: "showCloseButton", context: "context" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: InspectorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InspectorComponent, decorators: [{
             type: Directive
-        }], ctorParameters: function () { return []; }, propDecorators: { cssClass: [{
+        }], ctorParameters: () => [], propDecorators: { cssClass: [{
                 type: Input
             }], showCloseButton: [{
                 type: Input
@@ -2201,5 +2704,5 @@ function useVisuallyJsUpdate(callback) {
 
 
 
-export { AngularComponentOverlayType, AreaChartComponent, BarChartComponent, BaseAngularOverlayComponent, BaseGroupComponent, BaseNodeComponent, BasePortComponent, BaseVertexComponent, BrowserUIAngularModel, BubbleChartComponent, ColorPickerComponent, ColumnChartComponent, ControlsComponent, DecoratorComponent, DefaultGroupComponent, DefaultNodeComponent, DiagramComponent, DiagramPaletteComponent, EdgeTypePickerComponent, ExportControlsComponent, InspectorComponent, LineChartComponent, MiniviewComponent, PaletteComponent, PieChartComponent, SankeyChartComponent, ScatterChartComponent, SeriesBasedChartComponent, ShapeComponent, ShapePaletteComponent, SurfaceComponent, VisuallyJsModule, VisuallyJsService, XYChartComponent, useVisuallyJsUpdate, useZoom };
+export { AngularComponentOverlayType, AreaChartComponent, BarChartComponent, BaseAngularOverlayComponent, BaseGroupComponent, BaseNodeComponent, BasePortComponent, BaseVertexComponent, BrowserUIAngularModel, BubbleChartComponent, ColorPickerComponent, ColumnChartComponent, ControlsComponent, DecoratorComponent, DefaultGroupComponent, DefaultNodeComponent, DiagramComponent, DiagramPaletteComponent, EdgeTypePickerComponent, ExportControlsComponent, InspectorComponent, LineChartComponent, MiniviewComponent, PaletteComponent, PaperComponent, PieChartComponent, SankeyChartComponent, ScatterChartComponent, SeriesBasedChartComponent, ShapeComponent, ShapePaletteComponent, SurfaceComponent, SurfacePopupComponent, VisuallyJsModule, VisuallyJsService, XYChartComponent, useVisuallyJsUpdate, useZoom };
 //# sourceMappingURL=visuallyjs-browser-ui-angular.mjs.map