@visuallyjs/browser-ui-angular 1.0.0

package/esm2022/lib/charts/line.chart.component.mjs

@@ -0,0 +1,55 @@
+import { Component, ElementRef, Input, NgZone, inject } from "@angular/core";
+import { LineChart } from "@visuallyjs/browser-ui";
+import { VisuallyJsService } from "../vjs-service";
+import * as i0 from "@angular/core";
+export 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
+            }] } });

package/esm2022/lib/charts/pie.chart.component.mjs

@@ -0,0 +1,55 @@
+import { Component, ElementRef, Input, NgZone, inject } from "@angular/core";
+import { PieChart } from "@visuallyjs/browser-ui";
+import { VisuallyJsService } from "../vjs-service";
+import * as i0 from "@angular/core";
+export 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
+            }] } });

package/esm2022/lib/charts/sankey.chart.component.mjs

@@ -0,0 +1,74 @@
+import { Component, inject, ElementRef, Input, NgZone } from "@angular/core";
+import { SankeyChart } from "@visuallyjs/browser-ui";
+import { VisuallyJsService } from "../vjs-service";
+import * as i0 from "@angular/core";
+export 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
+            }] } });

package/esm2022/lib/charts/scatter.chart.component.mjs

@@ -0,0 +1,55 @@
+import { Component, ElementRef, inject, Input, NgZone } from "@angular/core";
+import { ScatterChart } from "@visuallyjs/browser-ui";
+import { VisuallyJsService } from "../vjs-service";
+import * as i0 from "@angular/core";
+export 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
+            }] } });

package/esm2022/lib/charts/xy.chart.component.mjs

@@ -0,0 +1,39 @@
+import { Component, ElementRef, Input, NgZone, inject } from "@angular/core";
+import { CategoryValueChart } from "@visuallyjs/browser-ui";
+import * as i0 from "@angular/core";
+export 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
+            }] } });

package/esm2022/lib/color.tag.component.mjs

@@ -0,0 +1,86 @@
+import { Component, ElementRef, Input, Output, EventEmitter, signal, ChangeDetectorRef, inject } from "@angular/core";
+import { CLASS_COLOR_PICKER, CLASS_COLOR_PICKER_SWATCH, CLASS_COLOR_PICKER_SWATCHES, EVENT_CONTEXT_UPDATE, INSPECTOR_CONTEXT_RECENT_COLORS } from "@visuallyjs/browser-ui";
+import { VisuallyJsService } from "./vjs-service";
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+
+export 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
+            }] } });

package/esm2022/lib/common.mjs

@@ -0,0 +1,2 @@
+export {};
+// ["view", "tags", "container", "directRender", "storePositionsInModel"]

package/esm2022/lib/controls-component.mjs

@@ -0,0 +1,164 @@
+import { ChangeDetectorRef, Component, ElementRef, inject, Input, } from "@angular/core";
+import { EVENT_UNDOREDO_UPDATE, EVENT_SURFACE_MODE_CHANGED, FALSE, TRUE, SURFACE_MODE_PAN, SURFACE_MODE_SELECT, LASSO_PATH, LASSO_VIEW_BOX, PAN_PATH, PAN_VIEW_BOX, LassoPlugin, ZOOM_TO_FIT_VIEW_BOX, ZOOM_TO_FIT_PATH, ZOOM_IN_OUT_VIEW_BOX, ZOOM_IN_PATH, ZOOM_OUT_PATH, RESET_SELECTION_PATH, RESET_SELECTION_VIEW_BOX, CLEAR_PATH, CLEAR_VIEW_BOX, CLASS_CONTROLS_RESET_SELECTION, EVENT_SELECT, EVENT_DESELECT, EVENT_SELECTION_CLEARED, supportsPathEditing } from "@visuallyjs/browser-ui";
+import { VisuallyJsService } from "./vjs-service";
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+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";
+
+export 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
+            }] } });

package/esm2022/lib/decorator-component.mjs

@@ -0,0 +1,52 @@
+import { Component, Input, ElementRef, inject } from "@angular/core";
+import { VisuallyJsService } from "./vjs-service";
+import * as i0 from "@angular/core";
+export 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
+            }] } });

package/esm2022/lib/default-group-component.mjs

@@ -0,0 +1,18 @@
+import { Component, computed } from "@angular/core";
+import { BaseGroupComponent } from "./base.group.component";
+import * as i0 from "@angular/core";
+
+export 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>`
+                }]
+        }] });

package/esm2022/lib/default-node-component.mjs

@@ -0,0 +1,18 @@
+import { Component, computed } from "@angular/core";
+import { BaseNodeComponent } from "./base.node.component";
+import * as i0 from "@angular/core";
+
+export 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>`
+                }]
+        }] });