@visuallyjs/browser-ui-angular 1.0.0

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

@@ -0,0 +1,2235 @@
+import * as i0 from '@angular/core';
+import { Injectable, inject, ElementRef, Component, Input, ChangeDetectorRef, signal, computed, Directive, EventEmitter, ViewContainerRef, NgZone, reflectComponentType, Output, NgModule } from '@angular/core';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { log, Surface, Paper, MiniviewPlugin, EVENT_PORT_UPDATED, BrowserUIModel, CustomOverlay, 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, DEFAULT_LABEL_FILL_RATIO, convertToMultilineText, 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 } from '@visuallyjs/browser-ui';
+
+
+class VisuallyJsService {
+    constructor() {
+        this.inspectorListeners = [];
+        this.surfaceListeners = [];
+        this.paperListeners = [];
+        this.modelListeners = [];
+        this.diagramListeners = [];
+        this.uiListeners = [];
+    }
+    $setInspector(i) {
+        this.$inspector = i;
+        this.$notifyInspector();
+    }
+    $notifyInspector() {
+        this.inspectorListeners.forEach(sl => {
+            try {
+                sl(this.$inspector);
+            }
+            catch (e) {
+                log(`WARN: could not notify Inspector listener ${e}`);
+            }
+        });
+        this.inspectorListeners.length = 0;
+    }
+    $setSurface(s) {
+        // @ts-ignore
+        this.$setModel(s.model);
+        this.$surface = s;
+        this.$notifySurface();
+    }
+    $notifySurface() {
+        this.surfaceListeners.forEach(sl => {
+            try {
+                sl(this.$surface);
+            }
+            catch (e) {
+                log(`WARN: could not notify Surface listener ${e}`);
+            }
+        });
+        this.surfaceListeners.length = 0;
+        this.$notifyUI(this.$surface);
+    }
+    
+    getSurface(cb) {
+        if (this.$surface != null) {
+            cb(this.$surface);
+        }
+        else {
+            this.surfaceListeners.push(cb);
+        }
+    }
+    
+    getInspector(cb) {
+        if (this.$inspector != null) {
+            cb(this.$inspector);
+        }
+        else {
+            this.inspectorListeners.push(cb);
+        }
+    }
+    $setPaper(p) {
+        // @ts-ignore
+        this.$setModel(p.model);
+        this.$paper = p;
+        this.$notifyPaper();
+    }
+    $notifyPaper() {
+        this.paperListeners.forEach(sl => {
+            try {
+                sl(this.$paper);
+            }
+            catch (e) {
+                log(`WARN: could not notify Paper listener ${e}`);
+            }
+        });
+        this.paperListeners.length = 0;
+        this.$notifyUI(this.$paper);
+    }
+    
+    getPaper(cb) {
+        if (this.$paper != null) {
+            cb(this.$paper);
+        }
+        else {
+            this.paperListeners.push(cb);
+        }
+    }
+    $setDiagram(d) {
+        this.$diagram = d;
+        if (d.$ui instanceof Surface) {
+            this.$setSurface(d.$ui);
+        }
+        if (d.$ui instanceof Paper) {
+            this.$setPaper(d.$ui);
+        }
+        this.$notifyDiagram();
+    }
+    $notifyDiagram() {
+        this.diagramListeners.forEach(sl => {
+            try {
+                sl(this.$diagram);
+            }
+            catch (e) {
+                log(`WARN: could not notify Diagram listener ${e}`);
+            }
+        });
+        this.diagramListeners.length = 0;
+    }
+    
+    getDiagram(cb) {
+        if (this.$diagram != null) {
+            cb(this.$diagram);
+        }
+        else {
+            this.diagramListeners.push(cb);
+        }
+    }
+    
+    getModel(cb) {
+        if (this.$model != null) {
+            cb(this.$model);
+        }
+        else {
+            this.modelListeners.push(cb);
+        }
+    }
+    
+    $setModel(m) {
+        this.$model = m;
+        this.$notifyModel();
+    }
+    $notifyModel() {
+        this.modelListeners.forEach(sl => {
+            try {
+                sl(this.$model);
+            }
+            catch (e) {
+                log(`WARN: could not notify Model listener ${e}`);
+            }
+        });
+        this.modelListeners.length = 0;
+    }
+    $notifyUI(ui) {
+        this.uiListeners.forEach(sl => {
+            try {
+                sl(ui);
+            }
+            catch (e) {
+                log(`WARN: could not notify UI listener ${e}`);
+            }
+        });
+        this.uiListeners.length = 0;
+    }
+    
+    getUI(cb) {
+        const ui = this.$surface || this.$paper;
+        if (ui != null) {
+            cb(ui);
+        }
+        else {
+            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' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: VisuallyJsService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+
+class MiniviewComponent {
+    constructor(ngZone) {
+        this.ngZone = ngZone;
+        
+        this.activeTracking = true;
+        
+        this.clickToCenter = true;
+        this.$el = inject(ElementRef);
+        this.$vjs = inject(VisuallyJsService);
+    }
+    
+    ngAfterViewInit() {
+        this.ngZone.runOutsideAngular(() => {
+            // this.$service.addMiniview(this.surfaceId, {
+            //   container: this.el.nativeElement.childNodes[0],
+            //   elementFilter: this.elementFilter,
+            //   typeFunction: this.typeFunction,
+            //   activeTracking: this.activeTracking,
+            //   clickToCenter: this.clickToCenter !== false
+            // })
+            this.$vjs.getUI((b) => {
+                this.$miniview = b.addPlugin({
+                    type: MiniviewPlugin.type,
+                    options: {
+                        container: this.$el.nativeElement.childNodes[0],
+                        elementFilter: this.elementFilter,
+                        typeFunction: this.typeFunction,
+                        activeTracking: this.activeTracking,
+                        clickToCenter: this.clickToCenter !== false
+                    },
+                });
+            });
+        });
+    }
+    
+    redraw() {
+        if (this.$miniview != null) {
+            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" }, ngImport: i0, template: `<div></div>`, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MiniviewComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'vjs-miniview',
+                    template: `<div></div>`
+                }]
+        }], ctorParameters: function () { return [{ type: i0.NgZone }]; }, propDecorators: { elementFilter: [{
+                type: Input
+            }], typeFunction: [{
+                type: Input
+            }], activeTracking: [{
+                type: Input
+            }], clickToCenter: [{
+                type: Input
+            }] } });
+
+
+const AngularComponentOverlayType = "AngularComponent";
+
+class BaseAngularOverlayComponent {
+    constructor() {
+        
+        this.changeDetectorRef = inject(ChangeDetectorRef);
+    }
+    
+    updateEdge(updates) {
+        this.model.updateEdge(this.edge, updates);
+    }
+    
+    removeEdge() {
+        this.model.removeEdge(this.edge);
+    }
+}
+
+
+class BaseVertexComponent {
+    constructor() {
+        
+        this.changeDetectorRef = inject(ChangeDetectorRef);
+        
+        this.$data = signal(undefined);
+    }
+    
+    ngOnInit() {
+        this.$data.set(this.data);
+    }
+    
+    getVertex() {
+        return this._getVertex();
+    }
+    
+    ngOnDestroy() {
+        delete this._el._visuallyJsNgComponent._el;
+        delete this._el;
+        delete this.model;
+        delete this.surface;
+    }
+    
+    removeVertex() {
+        this.model.remove(this.getVertex());
+    }
+    
+    addNewPort(type, data) {
+        this.model.addNewPort(this.getVertex(), type, data);
+    }
+    
+    addPort(data) {
+        return this.model.addPort(this.getVertex(), data);
+    }
+    
+    setAsSelection() {
+        this.model.setSelection(this.getVertex());
+    }
+    
+    addToSelection() {
+        this.model.addToSelection(this.getVertex());
+    }
+    
+    removeFromSelection() {
+        this.model.removeFromSelection(this.getVertex());
+    }
+    
+    updateVertex(data) {
+        this.model.updateVertex(this.getVertex(), data);
+    }
+    
+    cloneVertex(options) {
+        this.surface.cloneVertex(this.getVertex(), options);
+    }
+    
+    flashVertex(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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BaseVertexComponent, decorators: [{
+            type: Injectable
+        }], propDecorators: { data: [{
+                type: Input
+            }], model: [{
+                type: Input
+            }], surface: [{
+                type: Input
+            }], modelObject: [{
+                type: Input
+            }] } });
+
+
+class BaseGroupComponent extends BaseVertexComponent {
+    
+    getGroup() { return this.model.getGroup(this.model.getGroupId(this.data)); }
+    
+    getMembers() { return this.getGroup().getMembers(); }
+    
+    _getVertex() {
+        return this.getGroup();
+    }
+    
+    updateGroup(data) {
+        this.updateVertex(data);
+    }
+    
+    removeGroup() {
+        this.removeVertex();
+    }
+    
+    cloneGroup(options) {
+        this.cloneVertex(options);
+    }
+    
+    flashGroup(duration, animName) {
+        this.flashVertex(duration, animName);
+    }
+    
+    removePort(portId) {
+        this.model.removePort(this.getGroup(), portId);
+    }
+    
+    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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BaseGroupComponent, decorators: [{
+            type: Injectable
+        }] });
+
+
+class DefaultGroupComponent extends BaseGroupComponent {
+    constructor() {
+        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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DefaultGroupComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: `<div class="vjs-default-group">{{label()}}</div>`
+                }]
+        }] });
+
+
+class BaseNodeComponent extends BaseVertexComponent {
+    
+    getNode() { return this.model.getNode(this.model.getNodeId(this.data)); }
+    
+    _getVertex() {
+        return this.getNode();
+    }
+    
+    updateNode(data) {
+        this.updateVertex(data);
+    }
+    
+    removeNode() {
+        this.removeVertex();
+    }
+    
+    removePort(portId) {
+        this.model.removePort(this.getNode(), portId);
+    }
+    
+    getPort(portId) {
+        return this.getNode().getPort(portId);
+    }
+    
+    cloneNode(options) {
+        this.cloneVertex(options);
+    }
+    
+    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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BaseNodeComponent, decorators: [{
+            type: Injectable
+        }] });
+
+
+class DefaultNodeComponent extends BaseNodeComponent {
+    constructor() {
+        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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DefaultNodeComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: `<div class="vjs-default-node">{{label()}}</div>`
+                }]
+        }] });
+
+
+class BasePortComponent {
+    constructor(el) {
+        this.el = el;
+        
+        this.changeDetectorRef = inject(ChangeDetectorRef);
+        
+        this.$data = signal(undefined);
+        el.nativeElement._visuallyJsNgComponent = this;
+    }
+    
+    _signalBinding(n) {
+        if (this.parent != null) {
+            
+            if (n.vertex.id === this.parent.data.id && n.port.id === this.data["id"]) {
+                this.$data.set(this.data);
+            }
+        }
+    }
+    
+    ngOnInit() {
+        if (this.data == null) {
+            log(`WARN: cannot instantiate port component; "data" not set`);
+            return;
+        }
+        if (this.parent == null) {
+            log(`WARN: cannot instantiate port component; "parent" not set (you need to set parent to be a BaseNodeComponent or BaseGroupComponent on this component in your template)`);
+            return;
+        }
+        this.$data.set(this.data);
+        this._signalBinder = this._signalBinding.bind(this);
+        this.parent.model.bind(EVENT_PORT_UPDATED, this._signalBinder);
+    }
+    
+    getPort() {
+        return this.parent
+            .getVertex()
+            .getPort(this.parent.model.getPortId(this.data));
+    }
+    
+    getPortId() {
+        return this.parent.model.getPortId(this.data);
+    }
+    
+    updatePort(data) {
+        this.parent.model.updatePort(this.getPort(), data);
+    }
+    
+    removePort() {
+        this.parent.model.removePort(this.parent.getVertex(), this.getPortId());
+    }
+    
+    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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BasePortComponent, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "vjs-base-port",
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { parent: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }] } });
+
+
+class BrowserUIAngularModel extends BrowserUIModel {
+    render(container, options) {
+        log("render called directly on BrowserUIAngularModel class: should not happen. UI should use internal render.");
+        return null;
+    }
+}
+
+
+class SurfaceComponent {
+    constructor() {
+        
+        this.vertexEvent = new EventEmitter();
+        this.$el = inject(ElementRef);
+        this.$viewContainerRef = inject(ViewContainerRef);
+        this.$ngZone = inject(NgZone);
+        this.$vjs = inject(VisuallyJsService);
+    }
+    
+    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.surface.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.surface.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.surface.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);
+            }
+        }
+    }
+    
+    _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: CustomOverlay.type,
+                            });
+                            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.surface = self.surface;
+                                createdComponent.changeDetectorRef.detectChanges();
+                                return el;
+                            };
+                            return newSpec;
+                        }
+                        else {
+                            return fo;
+                        }
+                    }
+                });
+            }
+        }
+        return view;
+    }
+    
+    save(options) {
+        this.surface.save(options);
+    }
+    
+    exportData(options) {
+        return this.surface.model.exportData(options);
+    }
+    
+    dataLoadEnd() {
+        setTimeout(() => {
+            if (this.surface != null) {
+                this.surface.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, surface, 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.surface = surface;
+                _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.
+                surface.$vertexRendered(modelObject, nativeElement, def, eventInfo);
+            };
+            const templateRenderer = {
+                asynchronous: false,
+                reactive: true,
+                usesWrapperElement: false,
+                update: (el, data, v, renderer) => { },
+                render,
+                rerender: (directiveId, data, instance, objectType, surface, def, modelObject, eventInfo, originalElement) => {
+                    this.$removeNgElement(originalElement);
+                    render(directiveId, data, instance, objectType, surface, def, modelObject, eventInfo);
+                },
+                cleanupVertex: (objId, el) => {
+                    this.$removeNgElement(el);
+                },
+                cleanupPort: (objId, el) => {
+                    this.$removeNgElement(el);
+                },
+            };
+            const renderParams = extend(this.renderOptions || {}, {
+                view: view,
+            });
+            let model = new BrowserUIAngularModel(this.modelOptions);
+            this.model = model;
+            this.surface = renderSurface(model, self.$el.nativeElement, templateRenderer, renderParams);
+            //this.$service.addSurface(this.surfaceId, this.surface);
+            // new
+            this.$vjs.$setSurface(this.surface);
+            // ----------------
+            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);
+            if (this.data) {
+                this.model.load({ data: this.data });
+            }
+            else if (this.url) {
+                this.model.load({ url: this.url });
+            }
+        });
+    }
+    
+    ngOnDestroy() {
+        this.surface.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_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: { viewOptions: "viewOptions", renderOptions: "renderOptions", modelOptions: "modelOptions", data: "data", url: "url" }, 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: [{
+            type: Component,
+            args: [{
+                    selector: "vjs-surface",
+                    template: `<ng-content></ng-content>`
+                }]
+        }], propDecorators: { viewOptions: [{
+                type: Input
+            }], renderOptions: [{
+                type: Input
+            }], modelOptions: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], url: [{
+                type: Input
+            }], vertexEvent: [{
+                type: Output
+            }] } });
+
+
+class ShapePaletteComponent {
+    constructor() {
+        
+        this.dragSize = { width: 150, height: 100 };
+        
+        this.iconSize = { width: 150, height: 100 };
+        
+        this.fill = ShapeLibraryDefaults.FILL;
+        
+        this.outline = ShapeLibraryDefaults.STROKE;
+        
+        this.showAllMessage = "Show all";
+        
+        this.selectAfterDrop = true;
+        
+        this.paletteStrokeWidth = 1;
+        
+        this.dataGenerator = undefined;
+        this.$el = inject(ElementRef);
+        this.$vjs = inject(VisuallyJsService);
+    }
+    ngAfterViewInit() {
+        this.$vjs.getUI((ui) => {
+            
+            new ShapePalette(ui, {
+                container: this.$el.nativeElement,
+                initialSet: this.initialSet,
+                dragSize: this.dragSize,
+                iconSize: this.iconSize,
+                fill: this.fill,
+                outline: this.outline,
+                shapeLibrary: ui.getShapeLibrary(),
+                showAllMessage: this.showAllMessage,
+                selectAfterDrop: this.selectAfterDrop,
+                paletteStrokeWidth: this.paletteStrokeWidth,
+                dataGenerator: this.dataGenerator,
+                onVertexAdded: this.onVertexAdded,
+                preparedShapes: this.preparedShapes
+            });
+        });
+    }
+    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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ShapePaletteComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: `<div></div>`,
+                    selector: `vjs-shape-palette`
+                }]
+        }], propDecorators: { initialSet: [{
+                type: Input
+            }], dragSize: [{
+                type: Input
+            }], iconSize: [{
+                type: Input
+            }], fill: [{
+                type: Input
+            }], outline: [{
+                type: Input
+            }], showAllMessage: [{
+                type: Input
+            }], selectAfterDrop: [{
+                type: Input
+            }], paletteStrokeWidth: [{
+                type: Input
+            }], onVertexAdded: [{
+                type: Input
+            }], dataGenerator: [{
+                type: Input
+            }], preparedShapes: [{
+                type: Input
+            }] } });
+
+
+class ShapeComponent {
+    constructor() {
+        
+        this.showLabels = false;
+        
+        this.labelProperty = "label";
+        
+        this.multilineLabels = true;
+        
+        this.labelFillRatio = DEFAULT_LABEL_FILL_RATIO;
+        this.$el = inject(ElementRef);
+        this.$vjs = inject(VisuallyJsService);
+    }
+    _render() {
+        if (this.shapeLibrary != null) {
+            const svg = this.$el.nativeElement.childNodes[0];
+            const el = this.shapeLibrary.renderCompiledShape(this.obj, this.obj.outlineWidth || 2);
+            svg.replaceChildren(el);
+            if (this.showLabels) {
+                const lbl = this.shapeLibrary.renderShapeLabel(this.obj, this.labelProperty, this.labelStrokeWidth, this.label, this.obj.color || "#000000", this.obj.color || "#000000", this.font);
+                svg.appendChild(lbl);
+                if (this.multilineLabels !== false) {
+                    convertToMultilineText(lbl, this.label || this.obj[this.labelProperty] || "", this.width * this.labelFillRatio);
+                }
+            }
+        }
+    }
+    ngAfterViewInit() {
+        this.$vjs.getUI((b) => {
+            this.shapeLibrary = b.getShapeLibrary();
+            this._render();
+        });
+    }
+    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
+    [attr.stroke-width]="obj.outlineWidth || 2"
+    attr.fill="{{ obj.fill }}"
+    attr.stroke="{{ obj.outline }}"
+    style="width:100%;height:100%;inset:0;position:absolute;"
+    preserveAspectRatio="none"
+    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: [{
+            type: Component,
+            args: [{
+                    template: `<svg:svg
+    [attr.stroke-width]="obj.outlineWidth || 2"
+    attr.fill="{{ obj.fill }}"
+    attr.stroke="{{ obj.outline }}"
+    style="width:100%;height:100%;inset:0;position:absolute;"
+    preserveAspectRatio="none"
+    attr.viewBox="0 0 {{ width }} {{ height }}"
+  ></svg:svg>`,
+                    selector: `vjs-shape`,
+                }]
+        }], propDecorators: { obj: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], height: [{
+                type: Input
+            }], showLabels: [{
+                type: Input
+            }], labelProperty: [{
+                type: Input
+            }], labelStrokeWidth: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], multilineLabels: [{
+                type: Input
+            }], labelFillRatio: [{
+                type: Input
+            }], font: [{
+                type: Input
+            }] } });
+
+const ATTRIBUTE_CAN_UNDO = "can-undo";
+const ATTRIBUTE_CAN_REDO = "can-redo";
+const CLASS_SELECTED_MODE = "vjs-selected-mode";
+const ATTRIBUTE_HAS_SELECTION = "vjs-controls-has-selection";
+
+class ControlsComponent {
+    constructor() {
+        
+        this.undoRedo = true;
+        
+        this.zoomToExtents = true;
+        
+        this.zoomButtons = false;
+        
+        this.clear = true;
+        
+        this.clearMessage = "Clear dataset?";
+        
+        this.buttons = [];
+        
+        this.orientation = "row";
+        this.showPanButton = true;
+        this.showLassoButton = true;
+        this.$vjs = inject(VisuallyJsService);
+        this.$el = inject(ElementRef);
+        this.$cdr = inject(ChangeDetectorRef);
+    }
+    updateSelectionState() {
+        const controls = this.getNativeElement(this.$el);
+        if (this.ui.model.getSelection().isEmpty()) {
+            controls.removeAttribute(ATTRIBUTE_HAS_SELECTION);
+        }
+        else {
+            controls.setAttribute(ATTRIBUTE_HAS_SELECTION, "true");
+        }
+    }
+    ngOnInit() {
+        this.modeButtons = this.buttons.filter((b) => b.mode != null);
+        this.otherButtons = this.buttons.filter((b) => b.mode == null);
+        this.$vjs.getUI((ui) => {
+            this.ui = ui;
+            this.showLassoButton = ui.getPlugin(LassoPlugin.type) != null;
+            this.showPanButton = this.showLassoButton === true;
+            this.ui.bind(EVENT_SURFACE_MODE_CHANGED, (mode) => {
+                const controls = this.getNativeElement(this.$el);
+                const modeButtons = this.ui.$getSelector(controls, "[data-mode]");
+                this.ui.removeClass(modeButtons, CLASS_SELECTED_MODE);
+                this.ui.addClass(this.ui.$getSelector(controls, `[data-mode='${mode}']`), CLASS_SELECTED_MODE);
+            });
+            this.ui.model.bind(EVENT_UNDOREDO_UPDATE, (state) => {
+                const controls = this.getNativeElement(this.$el);
+                controls.setAttribute(ATTRIBUTE_CAN_UNDO, state.undoCount > 0 ? TRUE : FALSE);
+                controls.setAttribute(ATTRIBUTE_CAN_REDO, state.redoCount > 0 ? TRUE : FALSE);
+            });
+            this.ui.model.bind(EVENT_SELECT, () => this.updateSelectionState());
+            this.ui.model.bind(EVENT_DESELECT, () => this.updateSelectionState());
+            this.ui.model.bind(EVENT_SELECTION_CLEARED, () => this.updateSelectionState());
+            this.$cdr.detectChanges();
+        });
+    }
+    getNativeElement(component) {
+        return (component.nativeElement ||
+            component._nativeElement ||
+            component.location.nativeElement).childNodes[0];
+    }
+    panMode() {
+        this.ui.setMode(SURFACE_MODE_PAN);
+    }
+    selectMode() {
+        this.ui.setMode(SURFACE_MODE_SELECT);
+    }
+    zoomToFit() {
+        this.ui.model.clearSelection();
+        this.ui.zoomToFit();
+    }
+    zoomIn() {
+        this.ui.zoomIn();
+    }
+    zoomOut() {
+        this.ui.zoomOut();
+    }
+    resetSelection() {
+        this.ui.model.clearSelection();
+        if (supportsPathEditing(this.ui)) {
+            this.ui.stopEditingPath();
+        }
+    }
+    undo() {
+        this.ui.model.undo();
+    }
+    redo() {
+        this.ui.model.redo();
+    }
+    doClear() {
+        const t = this.ui.model;
+        if ((t.getNodeCount() === 0 && t.getGroupCount() === 0) ||
+            confirm(this.clearMessage)) {
+            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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ControlsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "vjs-controls",
+                    template: `<div class="vjs-controls" [attr.data-vjs-orientation]="orientation">
+    <i *ngIf="showPanButton" class="vjs-pan-mode ${CLASS_SELECTED_MODE}" data-mode="${SURFACE_MODE_PAN}" title="Pan Mode" (click)="panMode()">
+      <svg viewBox="${PAN_VIEW_BOX}" stroke="currentColor" fill="none">
+        <path d="${PAN_PATH}"></path>
+      </svg>
+    </i>
+    <i *ngIf="showLassoButton" class="vjs-select-mode" data-mode="${SURFACE_MODE_SELECT}" title="Select Mode" (click)="selectMode()">
+      <svg fill="currentColor" viewBox="${LASSO_VIEW_BOX}" stroke="currentColor">
+        <path d="${LASSO_PATH}"></path>
+      </svg>
+    </i>
+
+    <i *ngFor="let button of modeButtons" data-mode="{{ button.mode }}" class="{{ button.class }}" title="{{ button.title }}"></i>
+
+    <i *ngIf="zoomToExtents" class="vjs-zoom-to-fit" data-reset="true"title="Zoom To Fit" (click)="zoomToFit()">
+        <svg viewBox="${ZOOM_TO_FIT_VIEW_BOX}" stroke="currentColor" fill="currentColor"><path d="${ZOOM_TO_FIT_PATH}"></path></svg>
+    </i>
+
+    <i *ngIf="zoomButtons" class="vjs-zoom-in" data-zoom-in="true" title="Zoom In" (click)="zoomIn()">
+      <svg viewBox="${ZOOM_IN_OUT_VIEW_BOX}" stroke="currentColor" fill="currentColor"><path d="${ZOOM_IN_PATH}"></path></svg>
+    </i>
+
+    <i *ngIf="zoomButtons" class="vjs-zoom-out" data-zoom-out="true" title="Zoom Out" (click)="zoomOut()">
+      <svg viewBox="${ZOOM_IN_OUT_VIEW_BOX}" stroke="currentColor" fill="currentColor"><path d="${ZOOM_OUT_PATH}"></path></svg>
+    </i>
+
+    <i *ngIf="undoRedo" class="vjs-undo" data-undo="true" title="Undo last action" (click)="undo()"></i>
+    <i *ngIf="undoRedo" class="vjs-redo" data-redo="true" title="Redo last action" (click)="redo()"></i>
+    <i class="${CLASS_CONTROLS_RESET_SELECTION}" title="Clear selection" (click)="resetSelection()">
+      <svg viewBox="${RESET_SELECTION_VIEW_BOX}" stroke="currentColor" fill="currentColor"><path d="${RESET_SELECTION_PATH}"></path></svg>
+    </i>
+    <i *ngIf="clear" class="vjs-clear-dataset" [title]="clearMessage" (click)="doClear()">
+      <svg viewBox="${CLEAR_VIEW_BOX}" stroke="currentColor" fill="currentColor"><path d="${CLEAR_PATH}"></path></svg>
+    </i>
+    <i *ngFor="let button of otherButtons" class="{{ button.class }}" title="{{ button.title }}"></i>
+  </div>`,
+                }]
+        }], propDecorators: { undoRedo: [{
+                type: Input
+            }], zoomToExtents: [{
+                type: Input
+            }], zoomButtons: [{
+                type: Input
+            }], clear: [{
+                type: Input
+            }], clearMessage: [{
+                type: Input
+            }], buttons: [{
+                type: Input
+            }], orientation: [{
+                type: Input
+            }] } });
+
+
+class EdgeTypePickerComponent {
+    constructor(el) {
+        this.el = el;
+        
+        this.changeEvent = new EventEmitter();
+        this.$vjs = inject(VisuallyJsService);
+    }
+    resolveMappings() {
+        const mappings = this.edgeMappings || this.inspector.getFromContext(INSPECTOR_CONTEXT_EDGE_PROPERTY_MAPPINGS);
+        return mappings || this.inspector.$ui.$getEdgePropertyMappings();
+    }
+    ngAfterViewInit() {
+        this.$vjs.getInspector(inspector => {
+            this.inspector = inspector;
+            this.inspector.onChange(() => {
+                this.edgeTypePicker.select(this.propertyName, this.inspector.getValue(this.propertyName));
+            });
+            const current = this.inspector.getValue(this.propertyName) || '';
+            this.edgeTypePicker = new EdgeTypePicker(this.inspector.$ui, this.el.nativeElement, this.resolveMappings(), current, (p, v) => {
+                this.inspector.setValue(this.propertyName, v);
+                this.changeEvent.emit(v);
+            });
+            this.edgeTypePicker.render(this.propertyName, this.inspector._currentCommonData);
+        });
+    }
+    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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.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: [{
+                type: Input
+            }], edgeMappings: [{
+                type: Input
+            }], changeEvent: [{
+                type: Output
+            }] } });
+
+
+class PaletteComponent {
+    constructor() {
+        this.$vjs = inject(VisuallyJsService);
+        this.$el = inject(ElementRef);
+    }
+    
+    ngAfterViewInit() {
+        this.$vjs.getSurface((surface) => {
+            let self = this;
+            let params = {
+                source: self.$el.nativeElement,
+                selector: self.selector,
+                allowDropOnEdge: this.allowDropOnEdge,
+                allowDropOnCanvas: this.allowDropOnCanvas,
+                allowDropOnGroup: this.allowDropOnGroup,
+                allowDropOnNode: this.allowDropOnNode,
+                mode: this.mode,
+                selectAfterAdd: this.selectAfterAdd,
+                allowClickToAdd: this.allowClickToAdd,
+                clickToAddOnly: this.clickToAddOnly
+            };
+            if (this.dataGenerator != null) {
+                params.dataGenerator = this.dataGenerator;
+            }
+            if (this.typeGenerator != null) {
+                params.typeGenerator = this.typeGenerator;
+            }
+            if (this.groupIdentifier != null) {
+                params.groupIdentifier = this.groupIdentifier;
+            }
+            if (this.onVertexAdded != null) {
+                params.onVertexAdded = this.onVertexAdded;
+            }
+            if (this.dragSize != null) {
+                params.dragSize = this.dragSize;
+            }
+            if (this.canvasDropFilter != null) {
+                params.canvasDropFilter = this.canvasDropFilter;
+            }
+            this.palette = new Palette(surface, params);
+        });
+    }
+    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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PaletteComponent, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[vjs-palette]",
+                }]
+        }], propDecorators: { selector: [{
+                type: Input
+            }], dataGenerator: [{
+                type: Input
+            }], typeGenerator: [{
+                type: Input
+            }], groupIdentifier: [{
+                type: Input
+            }], allowDropOnEdge: [{
+                type: Input
+            }], allowDropOnGroup: [{
+                type: Input
+            }], allowDropOnCanvas: [{
+                type: Input
+            }], allowDropOnNode: [{
+                type: Input
+            }], onVertexAdded: [{
+                type: Input
+            }], dragSize: [{
+                type: Input
+            }], canvasDropFilter: [{
+                type: Input
+            }], mode: [{
+                type: Input
+            }], selectAfterAdd: [{
+                type: Input
+            }], allowClickToAdd: [{
+                type: Input
+            }], clickToAddOnly: [{
+                type: Input
+            }] } });
+
+
+class ExportControlsComponent {
+    constructor() {
+        
+        this.showLabel = true;
+        
+        this.label = "Export:";
+        
+        this.allowSvgExport = true;
+        
+        this.allowPngExport = true;
+        
+        this.allowJpgExport = true;
+        // new
+        this.$vjs = inject(VisuallyJsService);
+        this.$el = inject(ElementRef);
+    }
+    ngOnInit() {
+        this.$vjs.getUI((b) => {
+            this.ui = b;
+        });
+    }
+    exportSVG() {
+        new SvgExportUI(this.ui).export(this.svgOptions);
+    }
+    exportPNG() {
+        new ImageExportUI(this.ui).export(this.imageOptions);
+    }
+    exportJPG() {
+        new ImageExportUI(this.ui).export(Object.assign(this.imageOptions || {}, {
+            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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ExportControlsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "vjs-export-controls",
+                    template: `<div class="${CLASS_CONTROLS} ${CLASS_EXPORT_CONTROLS}">
+    <span *ngIf="showLabel">{{ label }}</span>
+    <i *ngIf="allowSvgExport"
+      ><a href="#" id="exportSvg" (click)="exportSVG()">SVG</a></i
+    >
+    <i *ngIf="allowPngExport"
+      ><a href="#" id="exportPng" (click)="exportPNG()">PNG</a></i
+    >
+    <i *ngIf="allowJpgExport"
+      ><a href="#" id="exportJpg" (click)="exportJPG()">JPG</a></i
+    >
+  </div>`,
+                }]
+        }], propDecorators: { showLabel: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], margins: [{
+                type: Input
+            }], svgOptions: [{
+                type: Input
+            }], imageOptions: [{
+                type: Input
+            }], allowSvgExport: [{
+                type: Input
+            }], allowPngExport: [{
+                type: Input
+            }], allowJpgExport: [{
+                type: Input
+            }] } });
+
+
+class ColorPickerComponent {
+    constructor() {
+        
+        this.maxColors = 10;
+        
+        this.changeEvent = new EventEmitter();
+        this.swatches = signal([]);
+        this.$vjs = inject(VisuallyJsService);
+        this.$el = inject(ElementRef);
+        this.$cdr = inject(ChangeDetectorRef);
+    }
+    $getInspector(cb) {
+        this.$vjs.getInspector(cb);
+    }
+    selectColor(color) {
+        this.$getInspector(inspector => {
+            inspector.setValue(this.propertyName, color);
+            this.$el.nativeElement.querySelector("[type='color']").value = color;
+        });
+    }
+    pushColor(color) {
+        this.$getInspector(inspector => {
+            const rc = inspector.getFromContext(INSPECTOR_CONTEXT_RECENT_COLORS);
+            if (rc != null) {
+                if (rc.find((c) => c === color) == null) {
+                    const cc = rc.slice();
+                    cc.unshift(color);
+                    if (cc.length >= this.maxColors) {
+                        cc.length = this.maxColors;
+                    }
+                    inspector.updateContext(INSPECTOR_CONTEXT_RECENT_COLORS, cc);
+                }
+            }
+        });
+    }
+    ngAfterViewInit() {
+        this.$getInspector(inspector => {
+            this.swatches.set(inspector.ensureContext(INSPECTOR_CONTEXT_RECENT_COLORS, () => []));
+            inspector.bind(EVENT_CONTEXT_UPDATE, (p) => {
+                if (p.key === INSPECTOR_CONTEXT_RECENT_COLORS) {
+                    this.swatches.set(p.value);
+                    this.$cdr.detectChanges();
+                }
+            });
+            const colorInput = this.$el.nativeElement.querySelector("[type='color']");
+            colorInput.onchange = () => {
+                const color = colorInput.value;
+                this.pushColor(color);
+                inspector.setValue(this.propertyName, color, true);
+            };
+            setTimeout(() => {
+                // if there is a color, maybe push to context
+                const v = inspector.getValue(this.propertyName);
+                if (v != null) {
+                    this.pushColor(v);
+                }
+            });
+        });
+    }
+    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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColorPickerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "vjs-color",
+                    template: `<div class="${CLASS_COLOR_PICKER}">
+    <input type="color" [attr.vjs-att]="propertyName"/>
+    <div class="${CLASS_COLOR_PICKER_SWATCHES}">
+      <div *ngFor="let swatch of swatches()" class="${CLASS_COLOR_PICKER_SWATCH}" attr.data-color="{{swatch}}" style="background-color:{{swatch}}" (click)="selectColor(swatch)"></div>
+    </div>
+  </div>`
+                }]
+        }], propDecorators: { propertyName: [{
+                type: Input
+            }], maxColors: [{
+                type: Input
+            }], changeEvent: [{
+                type: Output
+            }] } });
+
+
+class DiagramComponent {
+    constructor() {
+        this.$ngZone = inject(NgZone);
+        this.$el = inject(ElementRef);
+        this.$vjs = inject(VisuallyJsService);
+    }
+    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 });
+            }
+            else if (this.url != null) {
+                this.diagram.load({ url: this.url });
+            }
+        });
+    }
+    ngOnDestroy() {
+        this.diagram.$destroy();
+        //this.$service.removeDiagram(this.diagramId, this.diagram)
+    }
+    
+    save(options) {
+        return this.diagram.save(options);
+    }
+    
+    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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DiagramComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "vjs-diagram",
+                    template: `<ng-content></ng-content>`
+                }]
+        }], propDecorators: { options: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], url: [{
+                type: Input
+            }], modelOptions: [{
+                type: Input
+            }] } });
+
+class ColumnChartComponent {
+    constructor() {
+        this.$el = inject(ElementRef);
+        this.$ngZone = inject(NgZone);
+        this.$vjs = inject(VisuallyJsService);
+    }
+    _init(dataSource, data, url) {
+        this.$ngZone.runOutsideAngular(() => {
+            const o = Object.assign({}, this.options);
+            Object.assign(o, { dataSource });
+            this.chart = new ColumnChart(this.$el.nativeElement, o);
+            if (data) {
+                this.chart.load({ data });
+            }
+            else if (url) {
+                this.chart.load({ url });
+            }
+        });
+    }
+    
+    ngAfterViewInit() {
+        if (this.useModel) {
+            this.$vjs.getModel((p) => {
+                this._init(p, null, null);
+            });
+        }
+        else {
+            this._init(null, this.data, this.url);
+        }
+    }
+    ngOnDestroy() {
+        this.chart?.destroy();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnChartComponent, deps: [], 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" }, ngImport: i0, template: `<div></div>`, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnChartComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "vjs-column-chart",
+                    template: `<div></div>`
+                }]
+        }], propDecorators: { data: [{
+                type: Input
+            }], url: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], useModel: [{
+                type: Input
+            }] } });
+
+class BarChartComponent {
+    constructor() {
+        this.$vjs = inject(VisuallyJsService);
+        this.$el = inject(ElementRef);
+        this.$ngZone = inject(NgZone);
+    }
+    _init(dataSource, data, url) {
+        this.$ngZone.runOutsideAngular(() => {
+            const o = Object.assign({}, this.options);
+            Object.assign(o, { dataSource });
+            this.chart = new BarChart(this.$el.nativeElement, o);
+            if (data) {
+                this.chart.load({ data });
+            }
+            else if (url) {
+                this.chart.load({ url });
+            }
+        });
+    }
+    
+    ngAfterViewInit() {
+        if (this.useModel) {
+            this.$vjs.getModel((p) => {
+                this._init(p, null, null);
+            });
+        }
+        else {
+            this._init(null, this.data, this.url);
+        }
+    }
+    ngOnDestroy() {
+        this.chart?.destroy();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BarChartComponent, deps: [], 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" }, ngImport: i0, template: `<div></div>`, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BarChartComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "vjs-bar-chart",
+                    template: `<div></div>`
+                }]
+        }], propDecorators: { data: [{
+                type: Input
+            }], url: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], useModel: [{
+                type: Input
+            }] } });
+
+class DiagramPaletteComponent {
+    constructor() {
+        this.$el = inject(ElementRef);
+        this.$vjs = inject(VisuallyJsService);
+    }
+    $init() {
+        
+        new DiagramPalette(this.$el.nativeElement, this.diagram, {
+            fill: this.fill,
+            outline: this.outline,
+            dragSize: this.dragSize,
+            inspector: this.inspector,
+            iconSize: this.iconSize,
+            showLabels: this.showLabels,
+            paletteStrokeWidth: this.paletteStrokeWidth,
+            showAllMessage: this.showAllMessage,
+            onCellAdded: this.onCellAdded,
+            mode: this.mode,
+            allowClickToAdd: this.allowClickToAdd,
+            autoExitDrawMode: this.autoExitDrawMode,
+            selectAfterAdd: this.selectAfterAdd,
+            onVertexAdded: this.onVertexAdded,
+            preparedShapes: this.preparedShapes
+        });
+    }
+    ngAfterViewInit() {
+        if (this.diagram != null) {
+            this.$init();
+        }
+        else {
+            this.$vjs.getDiagram((d) => {
+                this.diagram = d;
+                this.$init();
+            });
+        }
+    }
+    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", diagram: "diagram", 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: [{
+            type: Component,
+            args: [{
+                    selector: "vjs-diagram-palette",
+                    template: `<div></div>`,
+                }]
+        }], propDecorators: { fill: [{
+                type: Input
+            }], outline: [{
+                type: Input
+            }], dragSize: [{
+                type: Input
+            }], inspector: [{
+                type: Input
+            }], iconSize: [{
+                type: Input
+            }], showLabels: [{
+                type: Input
+            }], paletteStrokeWidth: [{
+                type: Input
+            }], showAllMessage: [{
+                type: Input
+            }], onCellAdded: [{
+                type: Input
+            }], mode: [{
+                type: Input
+            }], allowClickToAdd: [{
+                type: Input
+            }], autoExitDrawMode: [{
+                type: Input
+            }], selectAfterAdd: [{
+                type: Input
+            }], diagram: [{
+                type: Input
+            }], onVertexAdded: [{
+                type: Input
+            }], preparedShapes: [{
+                type: Input
+            }] } });
+
+class XYChartComponent {
+    constructor() {
+        this.$el = inject(ElementRef);
+        this.$ngZone = inject(NgZone);
+    }
+    
+    ngAfterViewInit() {
+        this.$ngZone.runOutsideAngular(() => {
+            this.chart = new CategoryValueChart(this.$el.nativeElement, this.options);
+            if (this.data) {
+                this.chart.load({ data: this.data });
+            }
+            else if (this.url) {
+                this.chart.load({ url: this.url });
+            }
+        });
+    }
+    ngOnDestroy() {
+        this.chart?.destroy();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: XYChartComponent, deps: [], 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" }, ngImport: i0, template: `<div></div>`, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: XYChartComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "vjs-xy-chart",
+                    template: `<div></div>`
+                }]
+        }], propDecorators: { data: [{
+                type: Input
+            }], url: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }] } });
+
+class LineChartComponent {
+    constructor() {
+        this.$el = inject(ElementRef);
+        this.$ngZone = inject(NgZone);
+        this.$vjs = inject(VisuallyJsService);
+    }
+    _init(dataSource, data, url) {
+        this.$ngZone.runOutsideAngular(() => {
+            const o = Object.assign({}, this.options);
+            Object.assign(o, { dataSource });
+            this.chart = new LineChart(this.$el.nativeElement, o);
+            if (data) {
+                this.chart.load({ data });
+            }
+            else if (url) {
+                this.chart.load({ url });
+            }
+        });
+    }
+    
+    ngAfterViewInit() {
+        if (this.useModel) {
+            this.$vjs.getModel((p) => {
+                this._init(p, null, null);
+            });
+        }
+        else {
+            this._init(null, this.data, this.url);
+        }
+    }
+    ngOnDestroy() {
+        this.chart?.destroy();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LineChartComponent, deps: [], 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" }, ngImport: i0, template: `<div></div>`, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LineChartComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "vjs-line-chart",
+                    template: `<div></div>`
+                }]
+        }], propDecorators: { data: [{
+                type: Input
+            }], url: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], useModel: [{
+                type: Input
+            }] } });
+
+class AreaChartComponent {
+    constructor() {
+        this.$vjs = inject(VisuallyJsService);
+        this.$el = inject(ElementRef);
+        this.$ngZone = inject(NgZone);
+    }
+    _init(dataSource, data, url) {
+        this.$ngZone.runOutsideAngular(() => {
+            const o = Object.assign({}, this.options);
+            Object.assign(o, { dataSource });
+            this.chart = new AreaChart(this.$el.nativeElement, o);
+            if (data) {
+                this.chart.load({ data });
+            }
+            else if (url) {
+                this.chart.load({ url });
+            }
+        });
+    }
+    
+    ngAfterViewInit() {
+        if (this.useModel) {
+            this.$vjs.getModel((p) => {
+                this._init(p, null, null);
+            });
+        }
+        else {
+            this._init(null, this.data, this.url);
+        }
+    }
+    ngOnDestroy() {
+        this.chart?.destroy();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AreaChartComponent, deps: [], 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" }, ngImport: i0, template: `<div></div>`, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AreaChartComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "vjs-area-chart",
+                    template: `<div></div>`
+                }]
+        }], propDecorators: { data: [{
+                type: Input
+            }], url: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], useModel: [{
+                type: Input
+            }] } });
+
+class PieChartComponent {
+    constructor() {
+        this.$el = inject(ElementRef);
+        this.$ngZone = inject(NgZone);
+        this.$vjs = inject(VisuallyJsService);
+    }
+    _init(dataSource, data, url) {
+        this.$ngZone.runOutsideAngular(() => {
+            const o = Object.assign({}, this.options);
+            Object.assign(o, { dataSource });
+            this.chart = new PieChart(this.$el.nativeElement, o);
+            if (data) {
+                this.chart.load({ data });
+            }
+            else if (url) {
+                this.chart.load({ url });
+            }
+        });
+    }
+    
+    ngAfterViewInit() {
+        if (this.useModel) {
+            this.$vjs.getModel((p) => {
+                this._init(p, null, null);
+            });
+        }
+        else {
+            this._init(null, this.data, this.url);
+        }
+    }
+    ngOnDestroy() {
+        this.chart?.destroy();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PieChartComponent, deps: [], 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" }, ngImport: i0, template: `<div></div>`, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PieChartComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "vjs-pie-chart",
+                    template: `<div></div>`
+                }]
+        }], propDecorators: { data: [{
+                type: Input
+            }], url: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], useModel: [{
+                type: Input
+            }] } });
+
+class ScatterChartComponent {
+    constructor() {
+        this.$el = inject(ElementRef);
+        this.$ngZone = inject(NgZone);
+        this.$vjs = inject(VisuallyJsService);
+    }
+    _init(dataSource, data, url) {
+        this.$ngZone.runOutsideAngular(() => {
+            const o = Object.assign({}, this.options);
+            Object.assign(o, { dataSource });
+            this.chart = new ScatterChart(this.$el.nativeElement, o);
+            if (data) {
+                this.chart.load({ data });
+            }
+            else if (url) {
+                this.chart.load({ url });
+            }
+        });
+    }
+    
+    ngAfterViewInit() {
+        if (this.useModel) {
+            this.$vjs.getModel((p) => {
+                this._init(p, null, null);
+            });
+        }
+        else {
+            this._init(null, this.data, this.url);
+        }
+    }
+    ngOnDestroy() {
+        this.chart?.destroy();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ScatterChartComponent, deps: [], 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" }, ngImport: i0, template: `<div></div>`, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ScatterChartComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "vjs-scatter-chart",
+                    template: `<div></div>`
+                }]
+        }], propDecorators: { data: [{
+                type: Input
+            }], url: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], useModel: [{
+                type: Input
+            }] } });
+
+class BubbleChartComponent {
+    constructor() {
+        this.$el = inject(ElementRef);
+        this.$ngZone = inject(NgZone);
+        this.$vjs = inject(VisuallyJsService);
+    }
+    _init(dataSource, data, url) {
+        this.$ngZone.runOutsideAngular(() => {
+            const o = Object.assign({}, this.options);
+            Object.assign(o, { dataSource });
+            this.chart = new BubbleChart(this.$el.nativeElement, o);
+            if (data) {
+                this.chart.load({ data });
+            }
+            else if (url) {
+                this.chart.load({ url });
+            }
+        });
+    }
+    
+    ngAfterViewInit() {
+        if (this.useModel) {
+            this.$vjs.getModel((p) => {
+                this._init(p, null, null);
+            });
+        }
+        else {
+            this._init(null, this.data, this.url);
+        }
+    }
+    ngOnDestroy() {
+        this.chart?.destroy();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BubbleChartComponent, deps: [], 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" }, ngImport: i0, template: `<div></div>`, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BubbleChartComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "vjs-bubble-chart",
+                    template: `<div></div>`
+                }]
+        }], propDecorators: { data: [{
+                type: Input
+            }], url: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], useModel: [{
+                type: Input
+            }] } });
+
+class SankeyChartComponent {
+    constructor() {
+        this.$el = inject(ElementRef);
+        this.$ngZone = inject(NgZone);
+        this.$vjs = inject(VisuallyJsService);
+    }
+    
+    _init(dataSource, csvData, jsonData, url) {
+        this.$ngZone.runOutsideAngular(() => {
+            const options = Object.assign({}, this.options);
+            if (this.interactive != null) {
+                options.interactive = this.interactive;
+            }
+            if (this.pivot != null) {
+                options.pivot = this.pivot;
+            }
+            Object.assign(options, {
+                csvData,
+                jsonData,
+                dataSource,
+                url
+            });
+            this.chart = new SankeyChart(this.$el.nativeElement, options);
+        });
+    }
+    
+    ngAfterViewInit() {
+        if (this.useModel) {
+            this.$vjs.getModel((p) => {
+                this._init(p, null, null, null);
+            });
+        }
+        else {
+            this._init(null, this.csvData, this.jsonData, this.url);
+        }
+    }
+    ngOnChanges(changes) {
+        // @ts-ignore
+        if (changes['pivot'] && this.chart) {
+            // @ts-ignore
+            this.chart.pivot(changes['pivot'].currentValue);
+        }
+    }
+    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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SankeyChartComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "vjs-sankey-chart",
+                    template: `<div></div>`
+                }]
+        }], propDecorators: { csvData: [{
+                type: Input
+            }], jsonData: [{
+                type: Input
+            }], url: [{
+                type: Input
+            }], interactive: [{
+                type: Input
+            }], pivot: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], useModel: [{
+                type: Input
+            }] } });
+
+class DecoratorComponent {
+    constructor() {
+        
+        this.placement = 'floating';
+        
+        this.position = { x: 0, y: 0 };
+        this.el = inject(ElementRef);
+        this.service = inject(VisuallyJsService);
+    }
+    ngAfterViewInit() {
+        this.service.getSurface(s => {
+            const nativeElement = this.el.nativeElement.firstElementChild;
+            if (this.placement === 'fixed') {
+                s.fixElement(nativeElement, this.position, this.constraints);
+            }
+            else {
+                s.floatElement(nativeElement, this.position);
+            }
+        });
+    }
+    ngOnDestroy() {
+        if (this.surface && this.placement === 'fixed') {
+            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: `
+    <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: [{
+            type: Component,
+            args: [{
+                    selector: "vjs-decorator",
+                    template: `
+    <div style="display:inline-block;">
+      <ng-content></ng-content>
+    </div>
+  `
+                }]
+        }], propDecorators: { placement: [{
+                type: Input
+            }], position: [{
+                type: Input
+            }], constraints: [{
+                type: Input
+            }] } });
+
+
+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,
+            DefaultGroupComponent,
+            BasePortComponent,
+            MiniviewComponent,
+            SurfaceComponent,
+            PaletteComponent,
+            ShapePaletteComponent,
+            DiagramPaletteComponent,
+            ShapeComponent,
+            ControlsComponent,
+            EdgeTypePickerComponent,
+            PaletteComponent,
+            ExportControlsComponent,
+            ColorPickerComponent,
+            DiagramComponent,
+            ColumnChartComponent,
+            BarChartComponent,
+            XYChartComponent,
+            LineChartComponent,
+            AreaChartComponent,
+            PieChartComponent,
+            ScatterChartComponent,
+            BubbleChartComponent,
+            SankeyChartComponent,
+            DecoratorComponent], imports: [CommonModule], exports: [MiniviewComponent,
+            SurfaceComponent,
+            PaletteComponent,
+            DiagramPaletteComponent,
+            ShapeComponent,
+            ShapePaletteComponent,
+            ControlsComponent,
+            ExportControlsComponent,
+            EdgeTypePickerComponent,
+            ColorPickerComponent,
+            DiagramComponent,
+            ColumnChartComponent,
+            BarChartComponent,
+            XYChartComponent,
+            LineChartComponent,
+            AreaChartComponent,
+            PieChartComponent,
+            ScatterChartComponent,
+            BubbleChartComponent,
+            SankeyChartComponent,
+            DecoratorComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: VisuallyJsModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: VisuallyJsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule],
+                    declarations: [
+                        DefaultNodeComponent,
+                        DefaultGroupComponent,
+                        BasePortComponent,
+                        MiniviewComponent,
+                        SurfaceComponent,
+                        PaletteComponent,
+                        ShapePaletteComponent,
+                        DiagramPaletteComponent,
+                        ShapeComponent,
+                        ControlsComponent,
+                        EdgeTypePickerComponent,
+                        PaletteComponent,
+                        ExportControlsComponent,
+                        ColorPickerComponent,
+                        DiagramComponent,
+                        ColumnChartComponent,
+                        BarChartComponent,
+                        XYChartComponent,
+                        LineChartComponent,
+                        AreaChartComponent,
+                        PieChartComponent,
+                        ScatterChartComponent,
+                        BubbleChartComponent,
+                        SankeyChartComponent,
+                        DecoratorComponent
+                    ],
+                    exports: [
+                        MiniviewComponent,
+                        SurfaceComponent,
+                        PaletteComponent,
+                        DiagramPaletteComponent,
+                        ShapeComponent,
+                        ShapePaletteComponent,
+                        ControlsComponent,
+                        ExportControlsComponent,
+                        EdgeTypePickerComponent,
+                        ColorPickerComponent,
+                        DiagramComponent,
+                        ColumnChartComponent,
+                        BarChartComponent,
+                        XYChartComponent,
+                        LineChartComponent,
+                        AreaChartComponent,
+                        PieChartComponent,
+                        ScatterChartComponent,
+                        BubbleChartComponent,
+                        SankeyChartComponent,
+                        DecoratorComponent
+                    ]
+                }]
+        }] });
+
+// ["view", "tags", "container", "directRender", "storePositionsInModel"]
+
+
+class InspectorComponent {
+    constructor() {
+        
+        this.currentType = "";
+        
+        this.currentObjectType = "";
+        
+        this.EDGE = Edge.objectType;
+        
+        this.NODE = Node.objectType;
+        
+        this.GROUP = Group.objectType;
+        
+        this.PORT = Port.objectType;
+        
+        this.context = {};
+        
+        this.changeDetector = inject(ChangeDetectorRef);
+        
+        this.el = inject(ElementRef);
+        // new
+        this.$vjs = inject(VisuallyJsService);
+    }
+    
+    ngAfterViewInit() {
+        this.$vjs.getUI((ui) => {
+            this.ui = ui;
+            this.inspector = new Inspector({
+                context: this.context,
+                container: this.el.nativeElement,
+                cssClass: this.cssClass,
+                showCloseButton: this.showCloseButton,
+                ui,
+                renderEmptyContainer: () => {
+                    this.reset();
+                    this.changeDetector.detectChanges();
+                },
+                refresh: (obj, cb) => {
+                    this.currentObj = obj;
+                    this.refresh(obj);
+                    setTimeout(cb, 0);
+                    this.changeDetector.detectChanges();
+                },
+                afterUpdate: () => this.afterUpdate(ui),
+            });
+            this.$vjs.$setInspector(this.inspector);
+        });
+    }
+    
+    refresh(obj) {
+        this.currentType = obj.data.type;
+        this.currentObjectType = obj.objectType;
+    }
+    
+    reset() {
+        this.currentType = "";
+        this.currentObjectType = '';
+    }
+    
+    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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: InspectorComponent, decorators: [{
+            type: Directive
+        }], propDecorators: { cssClass: [{
+                type: Input
+            }], showCloseButton: [{
+                type: Input
+            }], context: [{
+                type: Input
+            }] } });
+
+
+
+
+
+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, ShapeComponent, ShapePaletteComponent, SurfaceComponent, VisuallyJsModule, VisuallyJsService, XYChartComponent };
+//# sourceMappingURL=visuallyjs-browser-ui-angular.mjs.map