@visuallyjs/browser-ui-angular 1.1.3 → 1.2.0

package/index.d.ts

@@ -29,6 +29,7 @@ export * from './lib/edge.type.picker.component';
 export * from './lib/inspector.component';
 export * from './lib/color.tag.component';
 export * from './lib/diagram-component';
+export * from './lib/charts/series.based.chart.component';
 export * from './lib/charts/column.chart.component';
 export * from './lib/charts/bar.chart.component';
 export * from './lib/charts/line.chart.component';
@@ -38,3 +39,5 @@ export * from './lib/charts/pie.chart.component';
 export * from './lib/charts/scatter.chart.component';
 export * from './lib/charts/bubble.chart.component';
 export * from './lib/charts/sankey.chart.component';
+export * from './lib/hooks/use-zoom';
+export * from './lib/hooks/use-visuallyjs-update';

package/lib/charts/area.chart.component.d.ts

@@ -1,13 +1,17 @@
-import { AfterViewInit, ElementRef, NgZone, OnDestroy } from "@angular/core";
-import { AreaChartOptions, ObjectData } from "@visuallyjs/browser-ui";
-import { VisuallyJsService } from "../vjs-service";
+import { AreaChart, AreaChartOptions, BrowserElement, ObjectData } from "@visuallyjs/browser-ui";
+import { SeriesBasedChartComponent } from "./series.based.chart.component";
 import * as i0 from "@angular/core";
 /**
  * Options for an area chart
+ * @group Charts
  */
 export interface AreaChartComponentOptions extends Omit<AreaChartOptions, "data" | "url" | "model"> {
 }
-export declare class AreaChartComponent implements AfterViewInit, OnDestroy {
+/**
+ * An area chart. Data can be sourced from a url or a JS object, or, if you want to use the chart as part of a dashboard, from the current model provisioned by the VisuallyJsService.
+ * @group Charts
+ */
+export declare class AreaChartComponent extends SeriesBasedChartComponent<AreaChart, AreaChartOptions, AreaChartComponentOptions> {
     /**
      * Optional data to load into the chart
      * @input
@@ -22,22 +26,13 @@ export declare class AreaChartComponent implements AfterViewInit, OnDestroy {
      * Options for the chart
      * @input
      */
-    options: AreaChartComponentOptions;
+    options: AreaChartOptions;
     /**
      * If true, the component attaches to a model provided by the VisuallyJsService. Defaults to false.
      * @input
      */
     useModel?: boolean;
-    $vjs: VisuallyJsService;
-    private chart;
-    $el: ElementRef<any>;
-    $ngZone: NgZone;
-    private _init;
-    /**
-     * @internal
-     */
-    ngAfterViewInit(): void;
-    ngOnDestroy(): void;
+    createChart(el: BrowserElement, options: AreaChartOptions): AreaChart;
     static ɵfac: i0.ɵɵFactoryDeclaration<AreaChartComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<AreaChartComponent, "vjs-area-chart", never, { "data": { "alias": "data"; "required": false; }; "url": { "alias": "url"; "required": false; }; "options": { "alias": "options"; "required": false; }; "useModel": { "alias": "useModel"; "required": false; }; }, {}, never, never, false, never>;
 }

package/lib/charts/bar.chart.component.d.ts

@@ -1,10 +1,13 @@
-import { AfterViewInit, ElementRef, NgZone, OnDestroy } from "@angular/core";
-import { BarChartOptions, ObjectData } from "@visuallyjs/browser-ui";
-import { VisuallyJsService } from "../vjs-service";
+import { BarChart, BarChartOptions, BrowserElement, ObjectData } from "@visuallyjs/browser-ui";
+import { SeriesBasedChartComponent } from "./series.based.chart.component";
 import * as i0 from "@angular/core";
 export interface BarChartComponentOptions extends Omit<BarChartOptions, "data" | "url" | "model"> {
 }
-export declare class BarChartComponent implements AfterViewInit, OnDestroy {
+/**
+ * A bar chart. Data can be sourced from a url or a JS object, or, if you want to use the chart as part of a dashboard, from the current model provisioned by the VisuallyJsService.
+ * @group Charts
+ */
+export declare class BarChartComponent extends SeriesBasedChartComponent<BarChart, BarChartOptions, BarChartComponentOptions> {
     /**
      * Optional data to load into the chart
      * @input
@@ -19,22 +22,13 @@ export declare class BarChartComponent implements AfterViewInit, OnDestroy {
      * Options for the chart
      * @input
      */
-    options: BarChartComponentOptions;
+    options: BarChartOptions;
     /**
      * If true, the component attaches to a model provided by the VisuallyJsService. Defaults to false.
      * @input
      */
     useModel?: boolean;
-    $vjs: VisuallyJsService;
-    private chart;
-    $el: ElementRef<any>;
-    $ngZone: NgZone;
-    private _init;
-    /**
-     * @internal
-     */
-    ngAfterViewInit(): void;
-    ngOnDestroy(): void;
+    createChart(el: BrowserElement, options: BarChartOptions): BarChart;
     static ɵfac: i0.ɵɵFactoryDeclaration<BarChartComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<BarChartComponent, "vjs-bar-chart", never, { "data": { "alias": "data"; "required": false; }; "url": { "alias": "url"; "required": false; }; "options": { "alias": "options"; "required": false; }; "useModel": { "alias": "useModel"; "required": false; }; }, {}, never, never, false, never>;
 }

package/lib/charts/bubble.chart.component.d.ts

@@ -1,10 +1,16 @@
-import { AfterViewInit, ElementRef, NgZone, OnDestroy } from "@angular/core";
-import { BubbleChartOptions, ObjectData } from "@visuallyjs/browser-ui";
-import { VisuallyJsService } from "../vjs-service";
+import { BrowserElement, BubbleChart, BubbleChartOptions, ObjectData } from "@visuallyjs/browser-ui";
+import { SeriesBasedChartComponent } from "./series.based.chart.component";
 import * as i0 from "@angular/core";
+/**
+ * Options for a bubble chart.
+ */
 export interface BubbleChartComponentOptions extends Omit<BubbleChartOptions, "data" | "url" | "model"> {
 }
-export declare class BubbleChartComponent implements AfterViewInit, OnDestroy {
+/**
+ * A bubble chart. Data can be sourced from a url or a JS object, or, if you want to use the chart as part of a dashboard, from the current model provisioned by the VisuallyJsService.
+ * @group Charts
+ */
+export declare class BubbleChartComponent extends SeriesBasedChartComponent<BubbleChart, BubbleChartOptions, BubbleChartComponentOptions> {
     /**
      * Optional data to load into the chart
      * @input
@@ -19,22 +25,13 @@ export declare class BubbleChartComponent implements AfterViewInit, OnDestroy {
      * Options for the chart
      * @input
      */
-    options: BubbleChartComponentOptions;
+    options: BubbleChartOptions;
     /**
      * If true, the component attaches to a model provided by the VisuallyJsService. Defaults to false.
      * @input
      */
     useModel?: boolean;
-    private chart;
-    $el: ElementRef<any>;
-    $ngZone: NgZone;
-    $vjs: VisuallyJsService;
-    private _init;
-    /**
-     * @internal
-     */
-    ngAfterViewInit(): void;
-    ngOnDestroy(): void;
+    createChart(el: BrowserElement, options: BubbleChartOptions): BubbleChart;
     static ɵfac: i0.ɵɵFactoryDeclaration<BubbleChartComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<BubbleChartComponent, "vjs-bubble-chart", never, { "data": { "alias": "data"; "required": false; }; "url": { "alias": "url"; "required": false; }; "options": { "alias": "options"; "required": false; }; "useModel": { "alias": "useModel"; "required": false; }; }, {}, never, never, false, never>;
 }

package/lib/charts/column.chart.component.d.ts

@@ -1,10 +1,16 @@
-import { AfterViewInit, ElementRef, NgZone, OnDestroy } from "@angular/core";
-import { ColumnChartOptions, ObjectData } from "@visuallyjs/browser-ui";
-import { VisuallyJsService } from "../vjs-service";
+import { BrowserElement, ColumnChart, ColumnChartOptions, ObjectData } from "@visuallyjs/browser-ui";
+import { SeriesBasedChartComponent } from "./series.based.chart.component";
 import * as i0 from "@angular/core";
+/**
+ * Options for a column chart.
+ */
 export interface ColumnChartComponentOptions extends Omit<ColumnChartOptions, "data" | "url" | "model"> {
 }
-export declare class ColumnChartComponent implements AfterViewInit, OnDestroy {
+/**
+ * A column chart. Data can be sourced from a url or a JS object, or, if you want to use the chart as part of a dashboard, from the current model provisioned by the VisuallyJsService.
+ * @group Charts
+ */
+export declare class ColumnChartComponent extends SeriesBasedChartComponent<ColumnChart, ColumnChartOptions, ColumnChartComponentOptions> {
     /**
      * Optional data to load into the chart
      * @input
@@ -19,22 +25,13 @@ export declare class ColumnChartComponent implements AfterViewInit, OnDestroy {
      * Options for the chart
      * @input
      */
-    options: ColumnChartComponentOptions;
+    options: ColumnChartOptions;
     /**
      * If true, the component attaches to a model provided by the VisuallyJsService. Defaults to false.
      * @input
      */
     useModel?: boolean;
-    private chart;
-    $el: ElementRef<any>;
-    $ngZone: NgZone;
-    $vjs: VisuallyJsService;
-    private _init;
-    /**
-     * @internal
-     */
-    ngAfterViewInit(): void;
-    ngOnDestroy(): void;
+    createChart(el: BrowserElement, options: ColumnChartOptions): ColumnChart;
     static ɵfac: i0.ɵɵFactoryDeclaration<ColumnChartComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<ColumnChartComponent, "vjs-column-chart", never, { "data": { "alias": "data"; "required": false; }; "url": { "alias": "url"; "required": false; }; "options": { "alias": "options"; "required": false; }; "useModel": { "alias": "useModel"; "required": false; }; }, {}, never, never, false, never>;
 }

package/lib/charts/line.chart.component.d.ts

@@ -1,39 +1,38 @@
-import { AfterViewInit, ElementRef, NgZone, OnDestroy } from "@angular/core";
-import { LineChartOptions, ObjectData } from "@visuallyjs/browser-ui";
-import { VisuallyJsService } from "../vjs-service";
+import { BrowserElement, LineChart, LineChartOptions, ObjectData } from "@visuallyjs/browser-ui";
+import { SeriesBasedChartComponent } from "./series.based.chart.component";
 import * as i0 from "@angular/core";
+/**
+ * Options for a line chart
+ * @group Charts
+ */
 export interface LineChartComponentOptions extends Omit<LineChartOptions, "data" | "url" | "model"> {
 }
-export declare class LineChartComponent implements AfterViewInit, OnDestroy {
+/**
+ * A line chart. Data can be sourced from a url or a JS object, or, if you want to use the chart as part of a dashboard, from the current model provisioned by the VisuallyJsService.
+ * @group Charts
+ */
+export declare class LineChartComponent extends SeriesBasedChartComponent<LineChart, LineChartOptions, LineChartComponentOptions> {
     /**
      * Optional data to load into the chart
-     *
+     * @input
      */
     data?: Array<ObjectData>;
     /**
      * Optional URL for data to load into the chart
-     *
+     * @input
      */
     url?: string;
     /**
      * Options for the chart
+     * @input
      */
-    options: LineChartComponentOptions;
+    options: LineChartOptions;
     /**
      * If true, the component attaches to a model provided by the VisuallyJsService. Defaults to false.
      * @input
      */
     useModel?: boolean;
-    private chart;
-    $el: ElementRef<any>;
-    $ngZone: NgZone;
-    $vjs: VisuallyJsService;
-    private _init;
-    /**
-     * @internal
-     */
-    ngAfterViewInit(): void;
-    ngOnDestroy(): void;
+    createChart(el: BrowserElement, options: LineChartOptions): LineChart;
     static ɵfac: i0.ɵɵFactoryDeclaration<LineChartComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<LineChartComponent, "vjs-line-chart", never, { "data": { "alias": "data"; "required": false; }; "url": { "alias": "url"; "required": false; }; "options": { "alias": "options"; "required": false; }; "useModel": { "alias": "useModel"; "required": false; }; }, {}, never, never, false, never>;
 }

package/lib/charts/pie.chart.component.d.ts

@@ -1,10 +1,13 @@
-import { AfterViewInit, ElementRef, NgZone, OnDestroy } from "@angular/core";
-import { PieChartOptions, ObjectData } from "@visuallyjs/browser-ui";
-import { VisuallyJsService } from "../vjs-service";
+import { PieChart, PieChartOptions, BrowserElement, ObjectData } from "@visuallyjs/browser-ui";
+import { SeriesBasedChartComponent } from "./series.based.chart.component";
 import * as i0 from "@angular/core";
 export interface PieChartComponentOptions extends Omit<PieChartOptions, "data" | "url" | "model"> {
 }
-export declare class PieChartComponent implements AfterViewInit, OnDestroy {
+/**
+ * A Pie chart.
+ * @group Charts
+ */
+export declare class PieChartComponent extends SeriesBasedChartComponent<PieChart, PieChartOptions, PieChartComponentOptions> {
     /**
      * Optional data to load into the chart
      * @input
@@ -19,22 +22,13 @@ export declare class PieChartComponent implements AfterViewInit, OnDestroy {
      * Options for the chart
      * @input
      */
-    options: PieChartComponentOptions;
+    options: PieChartOptions;
     /**
      * If true, the component attaches to a model provided by the VisuallyJsService. Defaults to false.
      * @input
      */
     useModel?: boolean;
-    private chart;
-    $el: ElementRef<any>;
-    $ngZone: NgZone;
-    $vjs: VisuallyJsService;
-    private _init;
-    /**
-     * @internal
-     */
-    ngAfterViewInit(): void;
-    ngOnDestroy(): void;
+    createChart(el: BrowserElement, options: PieChartOptions): PieChart;
     static ɵfac: i0.ɵɵFactoryDeclaration<PieChartComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<PieChartComponent, "vjs-pie-chart", never, { "data": { "alias": "data"; "required": false; }; "url": { "alias": "url"; "required": false; }; "options": { "alias": "options"; "required": false; }; "useModel": { "alias": "useModel"; "required": false; }; }, {}, never, never, false, never>;
 }

package/lib/charts/sankey.chart.component.d.ts

@@ -4,6 +4,10 @@ import { VisuallyJsService } from "../vjs-service";
 import * as i0 from "@angular/core";
 export interface SankeyChartComponentOptions extends Omit<SankeyOptions, "data" | "url" | "model"> {
 }
+/**
+ * A sankey chart. Data can be sourced from a url or a JS object, or, if you want to use the chart as part of a dashboard, from the current model provisioned by the VisuallyJsService.
+ * @group Charts
+ */
 export declare class SankeyChartComponent implements AfterViewInit, OnDestroy, OnChanges {
     /**
      * Optional data to load into the chart (in CSV format)
@@ -44,6 +48,7 @@ export declare class SankeyChartComponent implements AfterViewInit, OnDestroy, O
     $el: ElementRef<any>;
     $ngZone: NgZone;
     $vjs: VisuallyJsService;
+    constructor();
     /**
      * @internal
      */

package/lib/charts/scatter.chart.component.d.ts

@@ -1,10 +1,13 @@
-import { AfterViewInit, ElementRef, NgZone, OnDestroy } from "@angular/core";
-import { ScatterChartOptions, ObjectData } from "@visuallyjs/browser-ui";
-import { VisuallyJsService } from "../vjs-service";
+import { ScatterChart, ScatterChartOptions, BrowserElement, ObjectData } from "@visuallyjs/browser-ui";
+import { SeriesBasedChartComponent } from "./series.based.chart.component";
 import * as i0 from "@angular/core";
 export interface ScatterChartComponentOptions extends Omit<ScatterChartOptions, "data" | "url" | "model"> {
 }
-export declare class ScatterChartComponent implements AfterViewInit, OnDestroy {
+/**
+ * A scatter chart. Data can be sourced from a url or a JS object, or, if you want to use the chart as part of a dashboard, from the current model provisioned by the VisuallyJsService.
+ * @group Charts
+ */
+export declare class ScatterChartComponent extends SeriesBasedChartComponent<ScatterChart, ScatterChartOptions, ScatterChartComponentOptions> {
     /**
      * Optional data to load into the chart
      * @input
@@ -19,22 +22,13 @@ export declare class ScatterChartComponent implements AfterViewInit, OnDestroy {
      * Options for the chart
      * @input
      */
-    options: ScatterChartComponentOptions;
+    options: ScatterChartOptions;
     /**
      * If true, the component attaches to a model provided by the VisuallyJsService. Defaults to false.
      * @input
      */
     useModel?: boolean;
-    private chart;
-    $el: ElementRef<any>;
-    $ngZone: NgZone;
-    $vjs: VisuallyJsService;
-    private _init;
-    /**
-     * @internal
-     */
-    ngAfterViewInit(): void;
-    ngOnDestroy(): void;
+    createChart(el: BrowserElement, options: ScatterChartOptions): ScatterChart;
     static ɵfac: i0.ɵɵFactoryDeclaration<ScatterChartComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<ScatterChartComponent, "vjs-scatter-chart", never, { "data": { "alias": "data"; "required": false; }; "url": { "alias": "url"; "required": false; }; "options": { "alias": "options"; "required": false; }; "useModel": { "alias": "useModel"; "required": false; }; }, {}, never, never, false, never>;
 }

package/lib/charts/series.based.chart.component.d.ts

@@ -0,0 +1,44 @@
+import { BrowserElement, ObjectData } from "@visuallyjs/browser-ui";
+import { AfterViewInit, ElementRef, NgZone, OnDestroy } from "@angular/core";
+import { VisuallyJsService } from "../vjs-service";
+import { SeriesBasedChart } from "@visuallyjs/browser-ui/types/charts/series-based-chart";
+import * as i0 from "@angular/core";
+/**
+ * Parent component for xy charts.
+ */
+export declare abstract class SeriesBasedChartComponent<T extends SeriesBasedChart<O>, O, CO> implements AfterViewInit, OnDestroy {
+    /**
+     * Optional data to load into the chart
+     * @input
+     */
+    data?: Array<ObjectData>;
+    /**
+     * Optional URL for data to load into the chart
+     * @input
+     */
+    url?: string;
+    /**
+     * Options for the chart
+     * @input
+     */
+    options: CO;
+    /**
+     * If true, the component attaches to a model provided by the VisuallyJsService. Defaults to false.
+     * @input
+     */
+    useModel?: boolean;
+    private chart;
+    $el: ElementRef<any>;
+    $ngZone: NgZone;
+    $vjs: VisuallyJsService;
+    private _init;
+    constructor();
+    /**
+     * @internal
+     */
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    abstract createChart(el: BrowserElement, options: O): T;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SeriesBasedChartComponent<any, any, any>, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<SeriesBasedChartComponent<any, any, any>>;
+}

package/lib/charts/xy.chart.component.d.ts

@@ -1,9 +1,13 @@
-import { AfterViewInit, ElementRef, NgZone, OnDestroy } from "@angular/core";
-import { CategoryValueChartOptions, ObjectData } from "@visuallyjs/browser-ui";
+import { BrowserElement, CategoryValueChart, CategoryValueChartOptions, ObjectData } from "@visuallyjs/browser-ui";
+import { SeriesBasedChartComponent } from "./series.based.chart.component";
 import * as i0 from "@angular/core";
 export interface XYChartComponentOptions extends Omit<CategoryValueChartOptions, "data" | "url" | "model"> {
 }
-export declare class XYChartComponent implements AfterViewInit, OnDestroy {
+/**
+ * A generic category/value charts
+ * @group Charts
+ */
+export declare class XYChartComponent extends SeriesBasedChartComponent<CategoryValueChart, CategoryValueChartOptions, XYChartComponentOptions> {
     /**
      * Optional data to load into the chart
      * @input
@@ -18,15 +22,13 @@ export declare class XYChartComponent implements AfterViewInit, OnDestroy {
      * Options for the chart
      * @input
      */
-    options: XYChartComponentOptions;
-    private chart;
-    $el: ElementRef<any>;
-    $ngZone: NgZone;
+    options: CategoryValueChartOptions;
     /**
-     * @internal
+     * If true, the component attaches to a model provided by the VisuallyJsService. Defaults to false.
+     * @input
      */
-    ngAfterViewInit(): void;
-    ngOnDestroy(): void;
+    useModel?: boolean;
+    createChart(el: BrowserElement, options: CategoryValueChartOptions): CategoryValueChart;
     static ɵfac: i0.ɵɵFactoryDeclaration<XYChartComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<XYChartComponent, "vjs-xy-chart", never, { "data": { "alias": "data"; "required": false; }; "url": { "alias": "url"; "required": false; }; "options": { "alias": "options"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<XYChartComponent, "vjs-xy-chart", never, { "data": { "alias": "data"; "required": false; }; "url": { "alias": "url"; "required": false; }; "options": { "alias": "options"; "required": false; }; "useModel": { "alias": "useModel"; "required": false; }; }, {}, never, never, false, never>;
 }

package/lib/color.tag.component.d.ts

@@ -1,12 +1,11 @@
-import { AfterViewInit, ElementRef, EventEmitter, ChangeDetectorRef } from "@angular/core";
+import { ElementRef, EventEmitter, ChangeDetectorRef } from "@angular/core";
 import { VisuallyJsService } from "./vjs-service";
 import * as i0 from "@angular/core";
 /**
- * A helper component that offers the ability to change color and keep a history of selected colors, for
- * use in an {@link InspectorComponent}
+ * A helper component that offers the ability to change color and keep a history of selected colors, for use in an {@link InspectorComponent}
  * @group Components
  */
-export declare class ColorPickerComponent implements AfterViewInit {
+export declare class ColorPickerComponent {
     /**
      * The name of the property that maps the color. Required.
      * @input
@@ -26,10 +25,11 @@ export declare class ColorPickerComponent implements AfterViewInit {
     $vjs: VisuallyJsService;
     $el: ElementRef<any>;
     $cdr: ChangeDetectorRef;
+    initialized: boolean;
+    constructor();
     private $getInspector;
     selectColor(color: string): void;
     private pushColor;
-    ngAfterViewInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ColorPickerComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<ColorPickerComponent, "vjs-color", never, { "propertyName": { "alias": "propertyName"; "required": false; }; "maxColors": { "alias": "maxColors"; "required": false; }; }, { "changeEvent": "changeEvent"; }, never, never, false, never>;
 }

package/lib/controls-component.d.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectorRef, ElementRef, OnInit } from "@angular/core";
+import { ChangeDetectorRef, ElementRef } from "@angular/core";
 import { ControlsComponentButtons, BrowserElement, BrowserUI } from "@visuallyjs/browser-ui";
 import { VisuallyJsService } from "./vjs-service";
 import * as i0 from "@angular/core";
@@ -10,7 +10,7 @@ import * as i0 from "@angular/core";
  * press the 'clear' button is in English, as are the button tooltips.
  * @group Components
  */
-export declare class ControlsComponent implements OnInit {
+export declare class ControlsComponent {
     /**
      * Whether or not to show undo/redo buttons. Defaults to true.
      * @input
@@ -48,14 +48,16 @@ export declare class ControlsComponent implements OnInit {
     orientation?: string;
     modeButtons: ControlsComponentButtons;
     otherButtons: ControlsComponentButtons;
-    ui: BrowserUI;
+    initialized: boolean;
     showPanButton: boolean;
     showLassoButton: boolean;
     $vjs: VisuallyJsService;
     $el: ElementRef<any>;
     $cdr: ChangeDetectorRef;
+    ui: import("@angular/core").WritableSignal<BrowserUI<any>>;
+    model: import("@angular/core").Signal<import("@visuallyjs/browser-ui").VisuallyJsModel>;
     updateSelectionState(): void;
-    ngOnInit(): void;
+    constructor();
     getNativeElement(component: any): BrowserElement;
     panMode(): void;
     selectMode(): void;

package/lib/diagram-palette-component.d.ts

@@ -2,6 +2,10 @@ import { Diagram, DiagramCell, Size, PaletteMode, OnVertexAddedCallback, Prepare
 import { AfterViewInit, ElementRef } from "@angular/core";
 import { VisuallyJsService } from "./vjs-service";
 import * as i0 from "@angular/core";
+/**
+ * Provides a palette for a diagram.
+ * @group Components
+ */
 export declare class DiagramPaletteComponent implements AfterViewInit {
     /**
      * Optional fill color to use for dragged elements. This should be in RGB format, _not_ a color like 'white' or 'cyan' etc.
@@ -72,7 +76,7 @@ export declare class DiagramPaletteComponent implements AfterViewInit {
      * Optional diagram to attach to. It is not generally necessary to supply this as it will be retrieved from the context.
      * @input
      */
-    diagram?: Diagram;
+    inputDiagram?: Diagram;
     /**
      * Optional callback that will be invoked after a new vertex has been dropped and added to the dataset.
      * @input
@@ -85,8 +89,10 @@ export declare class DiagramPaletteComponent implements AfterViewInit {
     preparedShapes?: Array<PreparedShape>;
     $el: ElementRef<any>;
     $vjs: VisuallyJsService;
+    initialized: boolean;
     private $init;
+    constructor();
     ngAfterViewInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DiagramPaletteComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DiagramPaletteComponent, "vjs-diagram-palette", never, { "fill": { "alias": "fill"; "required": false; }; "outline": { "alias": "outline"; "required": false; }; "dragSize": { "alias": "dragSize"; "required": false; }; "inspector": { "alias": "inspector"; "required": false; }; "iconSize": { "alias": "iconSize"; "required": false; }; "showLabels": { "alias": "showLabels"; "required": false; }; "paletteStrokeWidth": { "alias": "paletteStrokeWidth"; "required": false; }; "showAllMessage": { "alias": "showAllMessage"; "required": false; }; "onCellAdded": { "alias": "onCellAdded"; "required": false; }; "mode": { "alias": "mode"; "required": false; }; "allowClickToAdd": { "alias": "allowClickToAdd"; "required": false; }; "autoExitDrawMode": { "alias": "autoExitDrawMode"; "required": false; }; "selectAfterAdd": { "alias": "selectAfterAdd"; "required": false; }; "diagram": { "alias": "diagram"; "required": false; }; "onVertexAdded": { "alias": "onVertexAdded"; "required": false; }; "preparedShapes": { "alias": "preparedShapes"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DiagramPaletteComponent, "vjs-diagram-palette", never, { "fill": { "alias": "fill"; "required": false; }; "outline": { "alias": "outline"; "required": false; }; "dragSize": { "alias": "dragSize"; "required": false; }; "inspector": { "alias": "inspector"; "required": false; }; "iconSize": { "alias": "iconSize"; "required": false; }; "showLabels": { "alias": "showLabels"; "required": false; }; "paletteStrokeWidth": { "alias": "paletteStrokeWidth"; "required": false; }; "showAllMessage": { "alias": "showAllMessage"; "required": false; }; "onCellAdded": { "alias": "onCellAdded"; "required": false; }; "mode": { "alias": "mode"; "required": false; }; "allowClickToAdd": { "alias": "allowClickToAdd"; "required": false; }; "autoExitDrawMode": { "alias": "autoExitDrawMode"; "required": false; }; "selectAfterAdd": { "alias": "selectAfterAdd"; "required": false; }; "inputDiagram": { "alias": "diagram"; "required": false; }; "onVertexAdded": { "alias": "onVertexAdded"; "required": false; }; "preparedShapes": { "alias": "preparedShapes"; "required": false; }; }, {}, never, never, false, never>;
 }

package/lib/edge.type.picker.component.d.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, ElementRef, EventEmitter } from "@angular/core";
+import { ElementRef, EventEmitter } from "@angular/core";
 import { EdgePropertyMappings, Inspector } from "@visuallyjs/browser-ui";
 import { VisuallyJsService } from "./vjs-service";
 import * as i0 from "@angular/core";
@@ -6,7 +6,7 @@ import * as i0 from "@angular/core";
  * A helper component that wraps an EdgeTypePicker, for use in an {@link InspectorComponent}
  * @group Components
  */
-export declare class EdgeTypePickerComponent implements AfterViewInit {
+export declare class EdgeTypePickerComponent {
     private el;
     /**
      * The name of the property that maps the edge type. Required.
@@ -26,10 +26,10 @@ export declare class EdgeTypePickerComponent implements AfterViewInit {
     changeEvent: EventEmitter<string>;
     private edgeTypePicker;
     $vjs: VisuallyJsService;
-    inspector: Inspector;
-    constructor(el: ElementRef);
+    _inspector: import("@angular/core").WritableSignal<Inspector>;
+    initialised: boolean;
     private resolveMappings;
-    ngAfterViewInit(): void;
+    constructor(el: ElementRef);
     static ɵfac: i0.ɵɵFactoryDeclaration<EdgeTypePickerComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<EdgeTypePickerComponent, "vjs-edge-type", never, { "propertyName": { "alias": "propertyName"; "required": false; }; "edgeMappings": { "alias": "edgeMappings"; "required": false; }; }, { "changeEvent": "changeEvent"; }, never, never, false, never>;
 }

package/lib/export-controls-component.d.ts

@@ -1,11 +1,11 @@
-import { ElementRef, OnInit } from "@angular/core";
-import { BrowserUI, ImageExportUIOptions, PointXY, SvgExportUIOptions } from "@visuallyjs/browser-ui";
+import { ElementRef } from "@angular/core";
+import { ImageExportUIOptions, PointXY, SvgExportUIOptions } from "@visuallyjs/browser-ui";
 import { VisuallyJsService } from "./vjs-service";
 import * as i0 from "@angular/core";
 /**
  * @group Components
  */
-export declare class ExportControlsComponent implements OnInit {
+export declare class ExportControlsComponent {
     /**
      * Whether or not to show a label in front of the buttons. Defaults to true.
      * @input
@@ -46,11 +46,11 @@ export declare class ExportControlsComponent implements OnInit {
      * @input
      */
     allowJpgExport?: boolean;
-    /** @internal */
-    ui: BrowserUI;
     $vjs: VisuallyJsService;
     $el: ElementRef<any>;
-    ngOnInit(): void;
+    /** @internal */
+    ui: import("@angular/core").WritableSignal<import("@visuallyjs/browser-ui").BrowserUI<any>>;
+    model: import("@angular/core").Signal<import("@visuallyjs/browser-ui").VisuallyJsModel>;
     exportSVG(): void;
     exportPNG(): void;
     exportJPG(): void;

package/lib/hooks/use-visuallyjs-update.d.ts

@@ -0,0 +1,21 @@
+import { BrowserUIModel } from "@visuallyjs/browser-ui";
+/**
+ * Simple hook that responds to all update events in the model, including when the model is cleared. You pass in a function that takes the model as argument, and that should be invoked when an update/clear event occurs. The function is also invoked when the initial model reference is obtained.
+ *
+ * ```typescript
+ * import { useVisuallyJsUpdate } from "@visuallyjs/browser-ui-angular"
+ *
+ * @Component({
+ * ...
+ * })
+ * export class MyComponent {
+ *  constructor() {
+ *    useVisuallyJsUpdate((model) => console.log("Model updated", model.getNodeCount()))
+ *  }
+ * }
+ * ```
+ *
+ * @param callback Callback to invoke when an update occurs.
+ * @group Hooks
+ */
+export declare function useVisuallyJsUpdate(callback: (model: BrowserUIModel) => any): void;

package/lib/hooks/use-zoom.d.ts

@@ -0,0 +1,6 @@
+import { Signal } from "@angular/core";
+/**
+ * Provides a signal that exposes the zoom for the given Surface.
+ * @group Hooks
+ */
+export declare function useZoom(): Signal<number>;