@visuallyjs/browser-ui-angular 1.2.5 → 1.2.7

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

@@ -1,8 +1,8 @@
 import * as i0 from '@angular/core';
-import { signal, Injectable, inject, ElementRef, effect, Input, Component, ChangeDetectorRef, computed, Directive, input, EventEmitter, ViewContainerRef, NgZone, reflectComponentType, Output, TemplateRef, ViewChild, ContentChild, NgModule } from '@angular/core';
+import { signal, Injectable, inject, ElementRef, effect, Input, Component, ChangeDetectorRef, computed, Directive, input, EventEmitter, ViewContainerRef, NgZone, reflectComponentType, Output, untracked, TemplateRef, ViewChild, ContentChild, NgModule } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import { log, Surface, Paper, MiniviewPlugin, EVENT_EDGE_UPDATED, EVENT_NODE_UPDATED, EVENT_GROUP_UPDATED, EVENT_PORT_UPDATED, EVENT_ZOOM, BrowserUIModel, OVERLAY_TYPE_CUSTOM, ELEMENT_DIV, isGroup, extend, renderSurface, EVENT_PORT_ADDED, EVENT_DATA_LOAD_END, EVENT_EDGE_ADDED, EVENT_EDGE_REMOVED, EVENT_INTERNAL_CONNECTION, ShapeLibraryDefaults, ShapePalette, convertToMultilineText, DEFAULT_LABEL_FILL_RATIO, LassoPlugin, EVENT_SURFACE_MODE_CHANGED, EVENT_UNDOREDO_UPDATE, TRUE, FALSE, EVENT_SELECT, EVENT_DESELECT, EVENT_SELECTION_CLEARED, SURFACE_MODE_PAN, SURFACE_MODE_SELECT, supportsPathEditing, PAN_VIEW_BOX, PAN_PATH, LASSO_VIEW_BOX, LASSO_PATH, ZOOM_TO_FIT_VIEW_BOX, ZOOM_TO_FIT_PATH, ZOOM_IN_OUT_VIEW_BOX, ZOOM_IN_PATH, ZOOM_OUT_PATH, UNDO_VIEW_BOX, UNDO_PATH, REDO_VIEW_BOX, REDO_PATH, CLASS_CONTROLS_RESET_SELECTION, RESET_SELECTION_VIEW_BOX, RESET_SELECTION_PATH, CLEAR_VIEW_BOX, CLEAR_PATH, INSPECTOR_CONTEXT_EDGE_PROPERTY_MAPPINGS, EdgeTypePicker, Palette, SvgExportUI, ImageExportUI, CLASS_CONTROLS, CLASS_EXPORT_CONTROLS, INSPECTOR_CONTEXT_RECENT_COLORS, EVENT_CONTEXT_UPDATE, CLASS_COLOR_PICKER, CLASS_COLOR_PICKER_SWATCHES, CLASS_COLOR_PICKER_SWATCH, createDiagram, ColumnChart, BarChart, DiagramPalette, CategoryValueChart, LineChart, AreaChart, PieChart, ScatterChart, BubbleChart, SankeyChart, PopupHandler, CLASS_SURFACE_POPUP, renderPaper, BackgroundPlugin, SimpleBackground, TiledBackground, GeneratedGridBackground, Edge, Node, Group, Port, Inspector, EVENT_DATA_UPDATED, EVENT_GRAPH_CLEARED } from '@visuallyjs/browser-ui';
+import { log, Surface, Paper, MiniviewPlugin, EVENT_EDGE_UPDATED, EVENT_NODE_UPDATED, EVENT_GROUP_UPDATED, EVENT_PORT_UPDATED, EVENT_ZOOM, BrowserUIModel, OVERLAY_TYPE_CUSTOM, ELEMENT_DIV, isGroup, extend, renderSurface, EVENT_PORT_ADDED, EVENT_DATA_LOAD_END, EVENT_EDGE_ADDED, EVENT_EDGE_REMOVED, EVENT_INTERNAL_CONNECTION, ShapeLibraryDefaults, ShapePalette, convertToMultilineText, DEFAULT_LABEL_FILL_RATIO, LassoPlugin, EVENT_SURFACE_MODE_CHANGED, EVENT_UNDOREDO_UPDATE, TRUE, FALSE, EVENT_SELECT, EVENT_DESELECT, EVENT_SELECTION_CLEARED, SURFACE_MODE_PAN, SURFACE_MODE_SELECT, supportsPathEditing, PAN_VIEW_BOX, PAN_PATH, LASSO_VIEW_BOX, LASSO_PATH, ZOOM_TO_FIT_VIEW_BOX, ZOOM_TO_FIT_PATH, ZOOM_IN_OUT_VIEW_BOX, ZOOM_IN_PATH, ZOOM_OUT_PATH, UNDO_VIEW_BOX, UNDO_PATH, REDO_VIEW_BOX, REDO_PATH, CLASS_CONTROLS_RESET_SELECTION, RESET_SELECTION_VIEW_BOX, RESET_SELECTION_PATH, CLEAR_VIEW_BOX, CLEAR_PATH, INSPECTOR_CONTEXT_EDGE_PROPERTY_MAPPINGS, EdgeTypePicker, Palette, SvgExportUI, ImageExportUI, CLASS_CONTROLS, CLASS_EXPORT_CONTROLS, INSPECTOR_CONTEXT_RECENT_COLORS, EVENT_CONTEXT_UPDATE, CLASS_COLOR_PICKER, CLASS_COLOR_PICKER_SWATCHES, CLASS_COLOR_PICKER_SWATCH, createDiagram, ColumnChart, BarChart, DiagramPalette, CategoryValueChart, LineChart, AreaChart, PieChart, ScatterChart, BubbleChart, SankeyChart, PopupHandler, CLASS_SURFACE_POPUP, renderPaper, BackgroundPlugin, SimpleBackground, TiledBackground, GeneratedGridBackground, isNode, isString, Edge, Node, Group, Port, Inspector, EVENT_DATA_UPDATED, EVENT_GRAPH_CLEARED } from '@visuallyjs/browser-ui';
 
 
 class VisuallyJsService {
@@ -1115,7 +1115,7 @@ class ShapeComponent {
                 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);
+                    convertToMultilineText(lbl, this.label || this.obj[this.labelProperty] || "", this.width * this.labelFillRatio, this.labelPosition);
                 }
             }
         }
@@ -1129,6 +1129,8 @@ class ShapeComponent {
         this.multilineLabels = true;
         
         this.labelFillRatio = DEFAULT_LABEL_FILL_RATIO;
+        
+        this.labelPosition = "center";
         this.$el = inject(ElementRef);
         this.$vjs = inject(VisuallyJsService);
         this.ui = this.$vjs.ui;
@@ -1144,7 +1146,7 @@ class ShapeComponent {
         this._render();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ShapeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ShapeComponent, selector: "vjs-shape", inputs: { obj: "obj", width: "width", height: "height", showLabels: "showLabels", labelProperty: "labelProperty", labelStrokeWidth: "labelStrokeWidth", label: "label", multilineLabels: "multilineLabels", labelFillRatio: "labelFillRatio", font: "font" }, usesOnChanges: true, ngImport: i0, template: `<svg:svg
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ShapeComponent, selector: "vjs-shape", inputs: { obj: "obj", width: "width", height: "height", showLabels: "showLabels", labelProperty: "labelProperty", labelStrokeWidth: "labelStrokeWidth", label: "label", multilineLabels: "multilineLabels", labelFillRatio: "labelFillRatio", labelPosition: "labelPosition", font: "font" }, usesOnChanges: true, ngImport: i0, template: `<svg:svg
     [attr.stroke-width]="obj.outlineWidth || 2"
     attr.fill="{{ obj.fill }}"
     attr.stroke="{{ obj.outline }}"
@@ -1184,6 +1186,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }], labelFillRatio: [{
                 type: Input
+            }], labelPosition: [{
+                type: Input
             }], font: [{
                 type: Input
             }] } });
@@ -1293,13 +1297,13 @@ class ControlsComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ControlsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ControlsComponent, selector: "vjs-controls", inputs: { undoRedo: "undoRedo", zoomToExtents: "zoomToExtents", zoomButtons: "zoomButtons", clear: "clear", clearMessage: "clearMessage", buttons: "buttons", orientation: "orientation" }, ngImport: i0, template: "<div class=\"vjs-controls\" [attr.data-vjs-orientation]=\"orientation\">\n    <i *ngIf=\"showPanButton\" class=\"vjs-pan-mode vjs-selected-mode\" data-mode=\"pan\" title=\"Pan Mode\" (click)=\"panMode()\">\n      <svg viewBox=\"0 0 24 24\" stroke=\"currentColor\" fill=\"none\">\n        <path d=\"M8 13v-7.5a1.5 1.5 0 0 1 3 0v6.5 M11 5.5v-2a1.5 1.5 0 1 1 3 0v8.5 M14 5.5a1.5 1.5 0 0 1 3 0v6.5 M17 7.5a1.5 1.5 0 0 1 3 0v8.5a6 6 0 0 1 -6 6h-2h.208a6 6 0 0 1 -5.012 -2.7a69.74 69.74 0 0 1 -.196 -.3c-.312 -.479 -1.407 -2.388 -3.286 -5.728a1.5 1.5 0 0 1 .536 -2.022a1.867 1.867 0 0 1 2.28 .28l1.47 1.47\"></path>\n      </svg>\n    </i>\n    <i *ngIf=\"showLassoButton\" class=\"vjs-select-mode\" data-mode=\"select\" title=\"Select Mode\" (click)=\"selectMode()\">\n      <svg fill=\"currentColor\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n        <path d=\"M18.2848192,17.5777124 L20.8535534,20.1464466 C21.0488155,20.3417088 21.0488155,20.6582912 20.8535534,20.8535534 C20.6582912,21.0488155 20.3417088,21.0488155 20.1464466,20.8535534 L17.5777124,18.2848192 L15.9160251,20.7773501 C15.6899572,21.116452 15.1749357,21.0571624 15.0318354,20.6755617 L12.0318354,12.6755617 C11.8811067,12.2736185 12.2736185,11.8811067 12.6755617,12.0318354 L20.6755617,15.0318354 C21.0571624,15.1749357 21.116452,15.6899572 20.7773501,15.9160251 L18.2848192,17.5777124 L18.2848192,17.5777124 Z M17.2312404,17.0782479 L19.4104716,15.6254271 L13.3544004,13.3544004 L15.6254271,19.4104716 L17.0782479,17.2312404 C17.0974475,17.2011742 17.1201804,17.1727128 17.1464466,17.1464466 C17.1727128,17.1201804 17.2011742,17.0974475 17.2312404,17.0782479 L17.2312404,17.0782479 Z M5.5,3 C5.77614237,3 6,3.22385763 6,3.5 C6,3.77614237 5.77614237,4 5.5,4 C4.67157288,4 4,4.67157288 4,5.5 C4,5.77614237 3.77614237,6 3.5,6 C3.22385763,6 3,5.77614237 3,5.5 C3,4.11928813 4.11928813,3 5.5,3 Z M8.5,4 C8.22385763,4 8,3.77614237 8,3.5 C8,3.22385763 8.22385763,3 8.5,3 L10.5,3 C10.7761424,3 11,3.22385763 11,3.5 C11,3.77614237 10.7761424,4 10.5,4 L8.5,4 Z M13.5,4 C13.2238576,4 13,3.77614237 13,3.5 C13,3.22385763 13.2238576,3 13.5,3 L15.5,3 C15.7761424,3 16,3.22385763 16,3.5 C16,3.77614237 15.7761424,4 15.5,4 L13.5,4 Z M8.5,21 C8.22385763,21 8,20.7761424 8,20.5 C8,20.2238576 8.22385763,20 8.5,20 L10.5,20 C10.7761424,20 11,20.2238576 11,20.5 C11,20.7761424 10.7761424,21 10.5,21 L8.5,21 Z M3,8.5 C3,8.22385763 3.22385763,8 3.5,8 C3.77614237,8 4,8.22385763 4,8.5 L4,10.5 C4,10.7761424 3.77614237,11 3.5,11 C3.22385763,11 3,10.7761424 3,10.5 L3,8.5 Z M3,13.5 C3,13.2238576 3.22385763,13 3.5,13 C3.77614237,13 4,13.2238576 4,13.5 L4,15.5 C4,15.7761424 3.77614237,16 3.5,16 C3.22385763,16 3,15.7761424 3,15.5 L3,13.5 Z M3,18.5 C3,18.2238576 3.22385763,18 3.5,18 C3.77614237,18 4,18.2238576 4,18.5 C4,19.3284271 4.67157288,20 5.5,20 C5.77614237,20 6,20.2238576 6,20.5 C6,20.7761424 5.77614237,21 5.5,21 C4.11928813,21 3,19.8807119 3,18.5 Z M21,10.5 C21,10.7761424 20.7761424,11 20.5,11 C20.2238576,11 20,10.7761424 20,10.5 L20,8.5 C20,8.22385763 20.2238576,8 20.5,8 C20.7761424,8 21,8.22385763 21,8.5 L21,10.5 Z M21,5.5 C21,5.77614237 20.7761424,6 20.5,6 C20.2238576,6 20,5.77614237 20,5.5 C20,4.67157288 19.3284271,4 18.5,4 C18.2238576,4 18,3.77614237 18,3.5 C18,3.22385763 18.2238576,3 18.5,3 C19.8807119,3 21,4.11928813 21,5.5 Z\"></path>\n      </svg>\n    </i>\n\n    <i *ngFor=\"let button of modeButtons\" data-mode=\"{{ button.mode }}\" class=\"{{ button.class }}\" title=\"{{ button.title }}\"></i>\n\n    <i *ngIf=\"zoomToExtents\" class=\"vjs-zoom-to-fit\" data-reset=\"true\"title=\"Zoom To Fit\" (click)=\"zoomToFit()\">\n        <svg viewBox=\"0 0 32 30\" stroke=\"currentColor\" fill=\"currentColor\"><path d=\"M3.692 4.63c0-.53.4-.938.939-.938h5.215V0H4.708C2.13 0 0 2.054 0 4.63v5.216h3.692V4.631zM27.354 0h-5.2v3.692h5.17c.53 0 .984.4.984.939v5.215H32V4.631A4.624 4.624 0 0027.354 0zm.954 24.83c0 .532-.4.94-.939.94h-5.215v3.768h5.215c2.577 0 4.631-2.13 4.631-4.707v-5.139h-3.692v5.139zm-23.677.94c-.531 0-.939-.4-.939-.94v-5.138H0v5.139c0 2.577 2.13 4.707 4.708 4.707h5.138V25.77H4.631z\"></path></svg>\n    </i>\n\n    <i *ngIf=\"zoomButtons\" class=\"vjs-zoom-in\" data-zoom-in=\"true\" title=\"Zoom In\" (click)=\"zoomIn()\">\n      <svg viewBox=\"0 0 32 32\" stroke=\"currentColor\" fill=\"currentColor\"><path d=\"M 13 6 L 13 20 M 6 13 L 20 13 M 22,22 L 30,30 M1, 13 a 12,12 0 1,0 24,0 a 12,12 0 1,0 -24,0\"></path></svg>\n    </i>\n\n    <i *ngIf=\"zoomButtons\" class=\"vjs-zoom-out\" data-zoom-out=\"true\" title=\"Zoom Out\" (click)=\"zoomOut()\">\n      <svg viewBox=\"0 0 32 32\" stroke=\"currentColor\" fill=\"currentColor\"><path d=\"M 6 13 L 20 13 M 22,22 L 30,30 M1, 13 a 12,12 0 1,0 24,0 a 12,12 0 1,0 -24,0\"></path></svg>\n    </i>\n\n    <i *ngIf=\"undoRedo\" class=\"vjs-undo\" data-undo=\"true\" title=\"Undo last action\" (click)=\"undo()\">\n      <svg viewBox=\"0 0 24 24\" stroke=\"currentColor\" fill=\"none\"><path d=\"M3 7v6h6 M21 17a9 9 0 0 0-9-9 9 9 0 0 0-6 2.3L3 13\" stroke-width=\"2\"></path></svg>\n    </i>\n    <i *ngIf=\"undoRedo\" class=\"vjs-redo\" data-redo=\"true\" title=\"Redo last action\" (click)=\"redo()\">\n      <svg viewBox=\"0 0 24 24\" stroke=\"currentColor\" fill=\"none\"><path d=\"M21 7v6h-6 M3 17a9 9 0 0 1 9-9 9 9 0 0 1 6 2.3L21 13\" stroke-width=\"2\"></path></svg>\n    </i>\n    <i class=\"vjs-controls-reset-selection\" title=\"Clear selection\" (click)=\"resetSelection()\">\n      <svg viewBox=\"0 0 24 24\" stroke=\"currentColor\" fill=\"currentColor\"><path d=\"M2,5 V2 H5 M9,2 H11 M13,2 H15 M19,2 H22 V5 M22,9 V11 M22,13 V15 M22,19 V22 H19 M15,22 H13 M11,22 H9 M5,22 H2 V19 M2,15 V13 M2,11 V9 M9,9 L15,15 M15,9 L9,15\"></path></svg>\n    </i>\n    <i *ngIf=\"clear\" class=\"vjs-clear-dataset\" [title]=\"clearMessage\" (click)=\"doClear()\">\n      <svg viewBox=\"0 0 24 24\" stroke=\"currentColor\" fill=\"currentColor\"><path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"></path></svg>\n    </i>\n    <i *ngFor=\"let button of otherButtons\" class=\"{{ button.class }}\" title=\"{{ button.title }}\"></i>\n  </div>", isInline: true, dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ControlsComponent, selector: "vjs-controls", inputs: { undoRedo: "undoRedo", zoomToExtents: "zoomToExtents", zoomButtons: "zoomButtons", clear: "clear", clearMessage: "clearMessage", buttons: "buttons", orientation: "orientation" }, ngImport: i0, template: "<div class=\"vjs-controls\" [attr.data-vjs-orientation]=\"orientation\" can-undo=\"false\" can-redo=\"false\">\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()\">\n      <svg viewBox=\"0 0 24 24\" stroke=\"currentColor\" fill=\"none\"><path d=\"M3 7v6h6 M21 17a9 9 0 0 0-9-9 9 9 0 0 0-6 2.3L3 13\" stroke-width=\"2\"></path></svg>\n    </i>\n    <i *ngIf=\"undoRedo\" class=\"vjs-redo\" data-redo=\"true\" title=\"Redo last action\" (click)=\"redo()\">\n      <svg viewBox=\"0 0 24 24\" stroke=\"currentColor\" fill=\"none\"><path d=\"M21 7v6h-6 M3 17a9 9 0 0 1 9-9 9 9 0 0 1 6 2.3L21 13\" stroke-width=\"2\"></path></svg>\n    </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: "17.3.12", ngImport: i0, type: ControlsComponent, decorators: [{
             type: Component,
             args: [{
                     selector: "vjs-controls",
-                    template: `<div class="vjs-controls" [attr.data-vjs-orientation]="orientation">
+                    template: `<div class="vjs-controls" [attr.data-vjs-orientation]="orientation" ${ATTRIBUTE_CAN_UNDO}="false" ${ATTRIBUTE_CAN_REDO}="false">
     <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>
@@ -1375,6 +1379,7 @@ class EdgeTypePickerComponent {
                 if (inspector != null) {
                     this.initialised = true;
                     inspector.onChange(() => {
+                        this.edgeTypePicker.reset();
                         this.edgeTypePicker.select(this.propertyName, inspector.getValue(this.propertyName));
                     });
                     const current = inspector.getValue(this.propertyName) || '';
@@ -1735,7 +1740,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
 class SeriesBasedChartComponent {
     _init(dataSource, data, url) {
         this.$ngZone.runOutsideAngular(() => {
-            const o = Object.assign({}, this.options);
+            const o = Object.assign({}, this.options());
             Object.assign(o, { dataSource });
             this.chart = this.createChart(this.$el.nativeElement, o);
             if (data) {
@@ -1747,6 +1752,45 @@ class SeriesBasedChartComponent {
         });
     }
     constructor() {
+        
+        this.data = input();
+        
+        this.url = input();
+        
+        this.options = input();
+        this._dataEffect = effect(() => {
+            const currentData = this.data();
+            if (currentData) {
+                if (this.chart) {
+                    this.chart.load({ data: currentData });
+                }
+            }
+        });
+        this._urlEffect = effect(() => {
+            const currentUrl = this.url();
+            if (currentUrl) {
+                // Respond to changes in the url here.
+                // For example, if you need to reload the model with new data:
+                if (this.chart) {
+                    this.chart.load({ url: currentUrl });
+                }
+            }
+        });
+        this._optionsEffect = effect(() => {
+            this.options(); // track options
+            if (this.chart) {
+                // options have changed, recreate the chart
+                untracked(() => {
+                    this.chart.destroy();
+                    if (this.useModel) {
+                        this._init(this.$vjs.model(), null, null);
+                    }
+                    else {
+                        this._init(null, this.data(), this.url());
+                    }
+                });
+            }
+        });
         this.$el = inject(ElementRef);
         this.$ngZone = inject(NgZone);
         this.$vjs = inject(VisuallyJsService);
@@ -1762,7 +1806,7 @@ class SeriesBasedChartComponent {
     
     ngAfterViewInit() {
         if (!this.useModel) {
-            this._init(null, this.data, this.url);
+            this._init(null, this.data(), this.url());
         }
     }
     ngOnDestroy() {
@@ -1773,23 +1817,26 @@ class SeriesBasedChartComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SeriesBasedChartComponent, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [], propDecorators: { data: [{
-                type: Input
-            }], url: [{
-                type: Input
-            }], options: [{
-                type: Input
-            }], useModel: [{
+        }], ctorParameters: () => [], propDecorators: { useModel: [{
                 type: Input
             }] } });
 
 
 class ColumnChartComponent extends SeriesBasedChartComponent {
+    constructor() {
+        super(...arguments);
+        
+        this.data = input();
+        
+        this.url = input();
+        
+        this.options = input();
+    }
     createChart(el, options) {
         return new ColumnChart(el, options);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ColumnChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ColumnChartComponent, selector: "vjs-column-chart", inputs: { data: "data", url: "url", options: "options", useModel: "useModel" }, usesInheritance: true, ngImport: i0, template: `<div></div>`, isInline: true }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: ColumnChartComponent, selector: "vjs-column-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, url: { classPropertyName: "url", publicName: "url", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, useModel: { classPropertyName: "useModel", publicName: "useModel", isSignal: false, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `<div></div>`, isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ColumnChartComponent, decorators: [{
             type: Component,
@@ -1797,23 +1844,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                     selector: "vjs-column-chart",
                     template: `<div></div>`
                 }]
-        }], propDecorators: { data: [{
-                type: Input
-            }], url: [{
-                type: Input
-            }], options: [{
-                type: Input
-            }], useModel: [{
+        }], propDecorators: { useModel: [{
                 type: Input
             }] } });
 
 
 class BarChartComponent extends SeriesBasedChartComponent {
+    constructor() {
+        super(...arguments);
+        
+        this.data = input();
+        
+        this.url = input();
+        
+        this.options = input();
+    }
     createChart(el, options) {
         return new BarChart(el, options);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BarChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: BarChartComponent, selector: "vjs-bar-chart", inputs: { data: "data", url: "url", options: "options", useModel: "useModel" }, usesInheritance: true, ngImport: i0, template: `<div></div>`, isInline: true }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: BarChartComponent, selector: "vjs-bar-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, url: { classPropertyName: "url", publicName: "url", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, useModel: { classPropertyName: "useModel", publicName: "useModel", isSignal: false, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `<div></div>`, isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BarChartComponent, decorators: [{
             type: Component,
@@ -1821,13 +1871,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                     selector: "vjs-bar-chart",
                     template: `<div></div>`
                 }]
-        }], propDecorators: { data: [{
-                type: Input
-            }], url: [{
-                type: Input
-            }], options: [{
-                type: Input
-            }], useModel: [{
+        }], propDecorators: { useModel: [{
                 type: Input
             }] } });
 
@@ -1943,11 +1987,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
 
 
 class XYChartComponent extends SeriesBasedChartComponent {
+    constructor() {
+        super(...arguments);
+        
+        this.data = input();
+        
+        this.url = input();
+        
+        this.options = input();
+    }
     createChart(el, options) {
         return new CategoryValueChart(el, options);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: XYChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: XYChartComponent, selector: "vjs-xy-chart", inputs: { data: "data", url: "url", options: "options", useModel: "useModel" }, usesInheritance: true, ngImport: i0, template: `<div></div>`, isInline: true }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: XYChartComponent, selector: "vjs-xy-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, url: { classPropertyName: "url", publicName: "url", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, useModel: { classPropertyName: "useModel", publicName: "useModel", isSignal: false, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `<div></div>`, isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: XYChartComponent, decorators: [{
             type: Component,
@@ -1955,23 +2008,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                     selector: "vjs-xy-chart",
                     template: `<div></div>`
                 }]
-        }], propDecorators: { data: [{
-                type: Input
-            }], url: [{
-                type: Input
-            }], options: [{
-                type: Input
-            }], useModel: [{
+        }], propDecorators: { useModel: [{
                 type: Input
             }] } });
 
 
 class LineChartComponent extends SeriesBasedChartComponent {
+    constructor() {
+        super(...arguments);
+        
+        this.data = input();
+        
+        this.url = input();
+        
+        this.options = input();
+    }
     createChart(el, options) {
         return new LineChart(el, options);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LineChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: LineChartComponent, selector: "vjs-line-chart", inputs: { data: "data", url: "url", options: "options", useModel: "useModel" }, usesInheritance: true, ngImport: i0, template: `<div></div>`, isInline: true }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: LineChartComponent, selector: "vjs-line-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, url: { classPropertyName: "url", publicName: "url", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, useModel: { classPropertyName: "useModel", publicName: "useModel", isSignal: false, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `<div></div>`, isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LineChartComponent, decorators: [{
             type: Component,
@@ -1979,23 +2035,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                     selector: "vjs-line-chart",
                     template: `<div></div>`
                 }]
-        }], propDecorators: { data: [{
-                type: Input
-            }], url: [{
-                type: Input
-            }], options: [{
-                type: Input
-            }], useModel: [{
+        }], propDecorators: { useModel: [{
                 type: Input
             }] } });
 
 
 class AreaChartComponent extends SeriesBasedChartComponent {
+    constructor() {
+        super(...arguments);
+        
+        this.data = input();
+        
+        this.url = input();
+        
+        this.options = input();
+    }
     createChart(el, options) {
         return new AreaChart(el, options);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AreaChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: AreaChartComponent, selector: "vjs-area-chart", inputs: { data: "data", url: "url", options: "options", useModel: "useModel" }, usesInheritance: true, ngImport: i0, template: `<div></div>`, isInline: true }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: AreaChartComponent, selector: "vjs-area-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, url: { classPropertyName: "url", publicName: "url", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, useModel: { classPropertyName: "useModel", publicName: "useModel", isSignal: false, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `<div></div>`, isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AreaChartComponent, decorators: [{
             type: Component,
@@ -2003,23 +2062,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                     selector: "vjs-area-chart",
                     template: `<div></div>`
                 }]
-        }], propDecorators: { data: [{
-                type: Input
-            }], url: [{
-                type: Input
-            }], options: [{
-                type: Input
-            }], useModel: [{
+        }], propDecorators: { useModel: [{
                 type: Input
             }] } });
 
 
 class PieChartComponent extends SeriesBasedChartComponent {
+    constructor() {
+        super(...arguments);
+        
+        this.data = input();
+        
+        this.url = input();
+        
+        this.options = input();
+    }
     createChart(el, options) {
         return new PieChart(el, options);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PieChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: PieChartComponent, selector: "vjs-pie-chart", inputs: { data: "data", url: "url", options: "options", useModel: "useModel" }, usesInheritance: true, ngImport: i0, template: `<div></div>`, isInline: true }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: PieChartComponent, selector: "vjs-pie-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, url: { classPropertyName: "url", publicName: "url", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, useModel: { classPropertyName: "useModel", publicName: "useModel", isSignal: false, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `<div></div>`, isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PieChartComponent, decorators: [{
             type: Component,
@@ -2027,23 +2089,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                     selector: "vjs-pie-chart",
                     template: `<div></div>`
                 }]
-        }], propDecorators: { data: [{
-                type: Input
-            }], url: [{
-                type: Input
-            }], options: [{
-                type: Input
-            }], useModel: [{
+        }], propDecorators: { useModel: [{
                 type: Input
             }] } });
 
 
 class ScatterChartComponent extends SeriesBasedChartComponent {
+    constructor() {
+        super(...arguments);
+        
+        this.data = input();
+        
+        this.url = input();
+        
+        this.options = input();
+    }
     createChart(el, options) {
         return new ScatterChart(el, options);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ScatterChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ScatterChartComponent, selector: "vjs-scatter-chart", inputs: { data: "data", url: "url", options: "options", useModel: "useModel" }, usesInheritance: true, ngImport: i0, template: `<div></div>`, isInline: true }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: ScatterChartComponent, selector: "vjs-scatter-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, url: { classPropertyName: "url", publicName: "url", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, useModel: { classPropertyName: "useModel", publicName: "useModel", isSignal: false, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `<div></div>`, isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ScatterChartComponent, decorators: [{
             type: Component,
@@ -2051,23 +2116,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                     selector: "vjs-scatter-chart",
                     template: `<div></div>`
                 }]
-        }], propDecorators: { data: [{
-                type: Input
-            }], url: [{
-                type: Input
-            }], options: [{
-                type: Input
-            }], useModel: [{
+        }], propDecorators: { useModel: [{
                 type: Input
             }] } });
 
 
 class BubbleChartComponent extends SeriesBasedChartComponent {
+    constructor() {
+        super(...arguments);
+        
+        this.data = input();
+        
+        this.url = input();
+        
+        this.options = input();
+    }
     createChart(el, options) {
         return new BubbleChart(el, options);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BubbleChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: BubbleChartComponent, selector: "vjs-bubble-chart", inputs: { data: "data", url: "url", options: "options", useModel: "useModel" }, usesInheritance: true, ngImport: i0, template: `<div></div>`, isInline: true }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: BubbleChartComponent, selector: "vjs-bubble-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, url: { classPropertyName: "url", publicName: "url", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, useModel: { classPropertyName: "useModel", publicName: "useModel", isSignal: false, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `<div></div>`, isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BubbleChartComponent, decorators: [{
             type: Component,
@@ -2075,19 +2143,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                     selector: "vjs-bubble-chart",
                     template: `<div></div>`
                 }]
-        }], propDecorators: { data: [{
-                type: Input
-            }], url: [{
-                type: Input
-            }], options: [{
-                type: Input
-            }], useModel: [{
+        }], propDecorators: { useModel: [{
                 type: Input
             }] } });
 
 
 class SankeyChartComponent {
     constructor() {
+        
+        this.csvData = input();
+        
+        this.jsonData = input();
+        
+        this.url = input();
+        this._dataEffect = effect(() => {
+            const currentData = this.jsonData();
+            if (currentData) {
+                if (this.chart) {
+                    this.chart.load({ jsonData: currentData });
+                }
+            }
+        });
+        this._urlEffect = effect(() => {
+            const currentUrl = this.url();
+            if (currentUrl) {
+                // Respond to changes in the url here.
+                // For example, if you need to reload the model with new data:
+                if (this.chart) {
+                    this.chart.load({ url: currentUrl });
+                }
+            }
+        });
+        this._csvDataEffect = effect(() => {
+            const currentData = this.csvData();
+            if (currentData) {
+                if (this.chart) {
+                    this.chart.load({ csvData: currentData });
+                }
+            }
+        });
         this.$el = inject(ElementRef);
         this.$ngZone = inject(NgZone);
         this.$vjs = inject(VisuallyJsService);
@@ -2122,7 +2216,7 @@ class SankeyChartComponent {
     
     ngAfterViewInit() {
         if (!this.useModel) {
-            this._init(null, this.csvData, this.jsonData, this.url);
+            this._init(null, this.csvData(), this.jsonData(), this.url());
         }
     }
     ngOnChanges(changes) {
@@ -2136,7 +2230,7 @@ class SankeyChartComponent {
         this.chart?.destroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SankeyChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SankeyChartComponent, selector: "vjs-sankey-chart", inputs: { csvData: "csvData", jsonData: "jsonData", url: "url", interactive: "interactive", pivot: "pivot", options: "options", useModel: "useModel" }, usesOnChanges: true, ngImport: i0, template: `<div></div>`, isInline: true }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: SankeyChartComponent, selector: "vjs-sankey-chart", inputs: { csvData: { classPropertyName: "csvData", publicName: "csvData", isSignal: true, isRequired: false, transformFunction: null }, jsonData: { classPropertyName: "jsonData", publicName: "jsonData", isSignal: true, isRequired: false, transformFunction: null }, url: { classPropertyName: "url", publicName: "url", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: false, isRequired: false, transformFunction: null }, pivot: { classPropertyName: "pivot", publicName: "pivot", isSignal: false, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: false, isRequired: false, transformFunction: null }, useModel: { classPropertyName: "useModel", publicName: "useModel", isSignal: false, isRequired: false, transformFunction: null } }, usesOnChanges: true, ngImport: i0, template: `<div></div>`, isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SankeyChartComponent, decorators: [{
             type: Component,
@@ -2144,13 +2238,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                     selector: "vjs-sankey-chart",
                     template: `<div></div>`
                 }]
-        }], ctorParameters: () => [], propDecorators: { csvData: [{
-                type: Input
-            }], jsonData: [{
-                type: Input
-            }], url: [{
-                type: Input
-            }], interactive: [{
+        }], ctorParameters: () => [], propDecorators: { interactive: [{
                 type: Input
             }], pivot: [{
                 type: Input
@@ -2820,6 +2908,282 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             }] } });
 
 
+class EdgePropertyMappingsInspectorComponent {
+    constructor() {
+        this.$vjs = inject(VisuallyJsService);
+        this._inspector = this.$vjs.inspector;
+    }
+    get cls() {
+        return this.cssClass || "vjs-inspector-section";
+    }
+    resolveMappings() {
+        if (this.mappings) {
+            return this.mappings;
+        }
+        else {
+            const mappings = this._inspector().getFromContext(INSPECTOR_CONTEXT_EDGE_PROPERTY_MAPPINGS);
+            return mappings || this._inspector().$ui.$getEdgePropertyMappings();
+        }
+    }
+    toList(pm) {
+        const p = pm.property;
+        return Array.isArray(p) ? p : [p];
+    }
+    getPropertyKey(pm) {
+        return this.toList(pm).join(" ");
+    }
+    getName(pm) {
+        return this.getPropertyName ? this.getPropertyName(pm) : pm.name || this.getPropertyKey(pm);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EdgePropertyMappingsInspectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: EdgePropertyMappingsInspectorComponent, selector: "vjs-edge-properties-inspector", inputs: { getPropertyName: "getPropertyName", showName: "showName", cssClass: "cssClass", mappings: "mappings" }, ngImport: i0, template: `
+        @for (pm of resolveMappings(); track getPropertyKey(pm)) {
+            <div [class]="cls">
+                @if (showName !== false) {
+                    <div>{{ getName(pm) }}</div>
+                }
+                <vjs-edge-type [propertyName]="getPropertyKey(pm)"></vjs-edge-type>
+            </div>
+        }
+    `, isInline: true, dependencies: [{ kind: "component", type: EdgeTypePickerComponent, selector: "vjs-edge-type", inputs: ["propertyName", "edgeMappings"], outputs: ["changeEvent"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EdgePropertyMappingsInspectorComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "vjs-edge-properties-inspector",
+                    template: `
+        @for (pm of resolveMappings(); track getPropertyKey(pm)) {
+            <div [class]="cls">
+                @if (showName !== false) {
+                    <div>{{ getName(pm) }}</div>
+                }
+                <vjs-edge-type [propertyName]="getPropertyKey(pm)"></vjs-edge-type>
+            </div>
+        }
+    `
+                }]
+        }], propDecorators: { getPropertyName: [{
+                type: Input
+            }], showName: [{
+                type: Input
+            }], cssClass: [{
+                type: Input
+            }], mappings: [{
+                type: Input
+            }] } });
+
+const MAX_RADIOS = 7;
+const TRUE_FALSE = ["True", "False"];
+
+class ShapePropertiesInspectorComponent {
+    constructor() {
+        
+        this.vertex = null;
+        this.$vjs = inject(VisuallyJsService);
+        this._inspector = this.$vjs.inspector;
+    }
+    get currentMaxRadios() {
+        return this.maxRadios == null ? MAX_RADIOS : this.maxRadios;
+    }
+    get shapeDef() {
+        if (this._inspector() == null || this.vertex == null || !isNode(this.vertex)) {
+            return null;
+        }
+        const { type, category } = this.vertex.data;
+        if (!type || !category) {
+            return null;
+        }
+        const shapeLibrary = this._inspector().$ui.getShapeLibrary();
+        const shapeSet = shapeLibrary.getShapeSet(category);
+        if (!shapeSet) {
+            return null;
+        }
+        return shapeSet.shapes.find(s => s.type === type);
+    }
+    getBooleanLabel(prop, value) {
+        const labels = prop.booleanLabels || TRUE_FALSE;
+        return labels[value ? 0 : 1];
+    }
+    getShapePropertyValueLabel(v) {
+        return isString(v) ? v : v.label;
+    }
+    getShapePropertyValueValue(v) {
+        return isString(v) ? v : v.value;
+    }
+    isBoolean(prop) {
+        return prop.type === 'boolean';
+    }
+    hasValues(prop) {
+        return prop.values && prop.values.length > 0;
+    }
+    useRadio(prop) {
+        return this.hasValues(prop) && prop.editor !== 'select' && prop.values.length <= this.currentMaxRadios;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ShapePropertiesInspectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: ShapePropertiesInspectorComponent, selector: "vjs-shape-properties-inspector", inputs: { vertex: "vertex", maxRadios: "maxRadios" }, ngImport: i0, template: `
+        @if (shapeDef && shapeDef.properties) {
+            @for (prop of shapeDef.properties; track prop.id) {
+
+                <div class="vjs-inspector-field">
+                    @if (!isBoolean(prop) || prop.editor === 'select' || prop.editor === 'radio') {
+                        <label class="vjs-inspector-property-label">{{ prop.label || prop.id }}</label>
+                    }
+
+                    @if (prop.type === 'string') {
+                        @if (hasValues(prop)) {
+                            @if (useRadio(prop)) {
+                                <div class="vjs-radio-group">
+                                    @for (v of prop.values; track getShapePropertyValueLabel(v)) {
+                                        <label>
+                                            <input type="radio" [name]="prop.id" [attr.vjs-att]="prop.id" [value]="getShapePropertyValueValue(v)" /> {{ getShapePropertyValueLabel(v) }}
+                                        </label>
+                                    }
+                                </div>
+                            } @else {
+                                <select [attr.vjs-att]="prop.id">
+                                    @for (v of prop.values; track getShapePropertyValueLabel(v)) {
+                                        <option [value]="getShapePropertyValueValue(v)">{{ getShapePropertyValueLabel(v) }}</option>
+                                    }
+                                </select>
+                            }
+                        } @else {
+                            <input type="text" [attr.vjs-att]="prop.id" [placeholder]="prop.description" />
+                        }
+                    } @else if (prop.type === 'number') {
+                        @if (hasValues(prop)) {
+                            @if (useRadio(prop)) {
+                                <div class="vjs-radio-group">
+                                    @for (v of prop.values; track getShapePropertyValueLabel(v)) {
+                                        <label>
+                                            <input type="radio" [attr.vjs-att]="prop.id" [value]="getShapePropertyValueValue(v)" /> {{ getShapePropertyValueLabel(v) }}
+                                        </label>
+                                    }
+                                </div>
+                            } @else {
+                                <select [attr.vjs-att]="prop.id">
+                                    @for (v of prop.values; track getShapePropertyValueLabel(v)) {
+                                        <option [value]="getShapePropertyValueValue(v)">{{ getShapePropertyValueLabel(v) }}</option>
+                                    }
+                                </select>
+                            }
+                        } @else {
+                            <input type="number" [attr.vjs-att]="prop.id" [placeholder]="prop.description" [attr.min]="prop.min" [attr.max]="prop.max" />
+                        }
+                    } @else if (isBoolean(prop)) {
+                        @if (prop.editor === 'select') {
+                            <select [attr.vjs-att]="prop.id" vjs-datatype="boolean">
+                                <option value=""></option>
+                                <option value="true">{{ getBooleanLabel(prop, true) }}</option>
+                                <option value="false">{{ getBooleanLabel(prop, false) }}</option>
+                            </select>
+                        } @else if (prop.editor === 'radio') {
+                            <div class="vjs-radio-group">
+                                <label><input type="radio" [name]="prop.id" [attr.vjs-att]="prop.id" vjs-datatype="boolean" value="true" /><span>{{ getBooleanLabel(prop, true) }}</span></label>
+                                <label><input type="radio" [name]="prop.id" [attr.vjs-att]="prop.id" vjs-datatype="boolean" value="false" /><span>{{ getBooleanLabel(prop, false) }}</span></label>
+                            </div>
+                        } @else {
+                            <label>
+                                <input type="checkbox" vjs-datatype="boolean" [attr.vjs-att]="prop.id" /> {{ prop.label || prop.id }}
+                            </label>
+                        }
+                    } @else {
+                        <input type="text" [attr.vjs-att]="prop.id" [placeholder]="prop.description" />
+                    }
+
+                    @if (prop.description) {
+                        <div class="vjs-field-desc">{{ prop.description }}</div>
+                    }
+                </div>
+            }
+        }
+    `, isInline: true, styles: [":host{display:contents}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ShapePropertiesInspectorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vjs-shape-properties-inspector', template: `
+        @if (shapeDef && shapeDef.properties) {
+            @for (prop of shapeDef.properties; track prop.id) {
+
+                <div class="vjs-inspector-field">
+                    @if (!isBoolean(prop) || prop.editor === 'select' || prop.editor === 'radio') {
+                        <label class="vjs-inspector-property-label">{{ prop.label || prop.id }}</label>
+                    }
+
+                    @if (prop.type === 'string') {
+                        @if (hasValues(prop)) {
+                            @if (useRadio(prop)) {
+                                <div class="vjs-radio-group">
+                                    @for (v of prop.values; track getShapePropertyValueLabel(v)) {
+                                        <label>
+                                            <input type="radio" [name]="prop.id" [attr.vjs-att]="prop.id" [value]="getShapePropertyValueValue(v)" /> {{ getShapePropertyValueLabel(v) }}
+                                        </label>
+                                    }
+                                </div>
+                            } @else {
+                                <select [attr.vjs-att]="prop.id">
+                                    @for (v of prop.values; track getShapePropertyValueLabel(v)) {
+                                        <option [value]="getShapePropertyValueValue(v)">{{ getShapePropertyValueLabel(v) }}</option>
+                                    }
+                                </select>
+                            }
+                        } @else {
+                            <input type="text" [attr.vjs-att]="prop.id" [placeholder]="prop.description" />
+                        }
+                    } @else if (prop.type === 'number') {
+                        @if (hasValues(prop)) {
+                            @if (useRadio(prop)) {
+                                <div class="vjs-radio-group">
+                                    @for (v of prop.values; track getShapePropertyValueLabel(v)) {
+                                        <label>
+                                            <input type="radio" [attr.vjs-att]="prop.id" [value]="getShapePropertyValueValue(v)" /> {{ getShapePropertyValueLabel(v) }}
+                                        </label>
+                                    }
+                                </div>
+                            } @else {
+                                <select [attr.vjs-att]="prop.id">
+                                    @for (v of prop.values; track getShapePropertyValueLabel(v)) {
+                                        <option [value]="getShapePropertyValueValue(v)">{{ getShapePropertyValueLabel(v) }}</option>
+                                    }
+                                </select>
+                            }
+                        } @else {
+                            <input type="number" [attr.vjs-att]="prop.id" [placeholder]="prop.description" [attr.min]="prop.min" [attr.max]="prop.max" />
+                        }
+                    } @else if (isBoolean(prop)) {
+                        @if (prop.editor === 'select') {
+                            <select [attr.vjs-att]="prop.id" vjs-datatype="boolean">
+                                <option value=""></option>
+                                <option value="true">{{ getBooleanLabel(prop, true) }}</option>
+                                <option value="false">{{ getBooleanLabel(prop, false) }}</option>
+                            </select>
+                        } @else if (prop.editor === 'radio') {
+                            <div class="vjs-radio-group">
+                                <label><input type="radio" [name]="prop.id" [attr.vjs-att]="prop.id" vjs-datatype="boolean" value="true" /><span>{{ getBooleanLabel(prop, true) }}</span></label>
+                                <label><input type="radio" [name]="prop.id" [attr.vjs-att]="prop.id" vjs-datatype="boolean" value="false" /><span>{{ getBooleanLabel(prop, false) }}</span></label>
+                            </div>
+                        } @else {
+                            <label>
+                                <input type="checkbox" vjs-datatype="boolean" [attr.vjs-att]="prop.id" /> {{ prop.label || prop.id }}
+                            </label>
+                        }
+                    } @else {
+                        <input type="text" [attr.vjs-att]="prop.id" [placeholder]="prop.description" />
+                    }
+
+                    @if (prop.description) {
+                        <div class="vjs-field-desc">{{ prop.description }}</div>
+                    }
+                </div>
+            }
+        }
+    `, styles: [":host{display:contents}\n"] }]
+        }], propDecorators: { vertex: [{
+                type: Input
+            }], maxRadios: [{
+                type: Input
+            }] } });
+
+
 class VisuallyJsModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: VisuallyJsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: VisuallyJsModule, declarations: [DefaultNodeComponent,
@@ -2852,7 +3216,9 @@ class VisuallyJsModule {
             BackgroundComponent,
             ImageBackgroundComponent,
             GridBackgroundComponent,
-            TiledImageBackgroundComponent], imports: [CommonModule], exports: [MiniviewComponent,
+            TiledImageBackgroundComponent,
+            EdgePropertyMappingsInspectorComponent,
+            ShapePropertiesInspectorComponent], imports: [CommonModule], exports: [MiniviewComponent,
             SurfaceComponent,
             PaperComponent,
             PaletteComponent,
@@ -2878,7 +3244,9 @@ class VisuallyJsModule {
             BackgroundComponent,
             ImageBackgroundComponent,
             GridBackgroundComponent,
-            TiledImageBackgroundComponent] }); }
+            TiledImageBackgroundComponent,
+            EdgePropertyMappingsInspectorComponent,
+            ShapePropertiesInspectorComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: VisuallyJsModule, imports: [CommonModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: VisuallyJsModule, decorators: [{
@@ -2916,7 +3284,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         BackgroundComponent,
                         ImageBackgroundComponent,
                         GridBackgroundComponent,
-                        TiledImageBackgroundComponent
+                        TiledImageBackgroundComponent,
+                        EdgePropertyMappingsInspectorComponent,
+                        ShapePropertiesInspectorComponent
                     ],
                     exports: [
                         MiniviewComponent,
@@ -2945,7 +3315,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         BackgroundComponent,
                         ImageBackgroundComponent,
                         GridBackgroundComponent,
-                        TiledImageBackgroundComponent
+                        TiledImageBackgroundComponent,
+                        EdgePropertyMappingsInspectorComponent,
+                        ShapePropertiesInspectorComponent
                     ]
                 }]
         }] });
@@ -3073,5 +3445,5 @@ function useVisuallyJsUpdate(callback) {
 
 
 
-export { AngularComponentOverlayType, AreaChartComponent, BackgroundComponent, BarChartComponent, BaseAngularOverlayComponent, BaseGroupComponent, BaseNodeComponent, BasePortComponent, BaseVertexComponent, BrowserUIAngularModel, BubbleChartComponent, ColorPickerComponent, ColumnChartComponent, ControlsComponent, DecoratorComponent, DefaultGroupComponent, DefaultNodeComponent, DiagramComponent, DiagramPaletteComponent, EdgeTypePickerComponent, ExportControlsComponent, GridBackgroundComponent, ImageBackgroundComponent, InspectorComponent, LineChartComponent, MiniviewComponent, PaletteComponent, PaperComponent, PieChartComponent, SankeyChartComponent, ScatterChartComponent, SeriesBasedChartComponent, ShapeComponent, ShapePaletteComponent, SurfaceComponent, SurfacePopupComponent, TiledImageBackgroundComponent, VisuallyJsModule, VisuallyJsService, XYChartComponent, useVisuallyJsUpdate, useZoom };
+export { AngularComponentOverlayType, AreaChartComponent, BackgroundComponent, BarChartComponent, BaseAngularOverlayComponent, BaseGroupComponent, BaseNodeComponent, BasePortComponent, BaseVertexComponent, BrowserUIAngularModel, BubbleChartComponent, ColorPickerComponent, ColumnChartComponent, ControlsComponent, DecoratorComponent, DefaultGroupComponent, DefaultNodeComponent, DiagramComponent, DiagramPaletteComponent, EdgePropertyMappingsInspectorComponent, EdgeTypePickerComponent, ExportControlsComponent, GridBackgroundComponent, ImageBackgroundComponent, InspectorComponent, LineChartComponent, MiniviewComponent, PaletteComponent, PaperComponent, PieChartComponent, SankeyChartComponent, ScatterChartComponent, SeriesBasedChartComponent, ShapeComponent, ShapePaletteComponent, ShapePropertiesInspectorComponent, SurfaceComponent, SurfacePopupComponent, TiledImageBackgroundComponent, VisuallyJsModule, VisuallyJsService, XYChartComponent, useVisuallyJsUpdate, useZoom };
 //# sourceMappingURL=visuallyjs-browser-ui-angular.mjs.map