@visuallyjs/browser-ui-angular 1.2.0 → 1.2.1

package/index.d.ts

@@ -17,6 +17,8 @@ export * from './lib/default-group-component';
 export * from './lib/common';
 export * from './lib/miniview-component';
 export * from './lib/surface-component';
+export * from './lib/surface-popup-component';
+export * from './lib/paper-component';
 export * from './lib/overlay-component';
 export * from './lib/palette.component';
 export * from './lib/decorator-component';

package/lib/base.vertex.component.d.ts

@@ -1,5 +1,5 @@
 import { ChangeDetectorRef, OnDestroy, OnInit } from "@angular/core";
-import { ObjectData, Node, Surface, BrowserElement, VisuallyJsModel, SurfaceVertexCloneOptions, Port } from "@visuallyjs/browser-ui";
+import { ObjectData, Node, Surface, BrowserElement, VisuallyJsModel, SurfaceVertexCloneOptions, Port, Edge, Paper, BrowserUI } from "@visuallyjs/browser-ui";
 import * as i0 from "@angular/core";
 /**
  * Superclass for base node and base group components. You wont need to interact directly with this class; other component base classed in VisuallyJs extend from it.
@@ -19,10 +19,20 @@ export declare abstract class BaseVertexComponent<T extends Node> implements OnI
      */
     model: VisuallyJsModel;
     /**
-     * Underlying Surface. Visually sets this.
+     * Underlying Surface. Visually sets this, if the component is rendered by a SurfaceComponent.
      * @internal
      */
     surface: Surface;
+    /**
+     * Underlying Paper. Visually sets this, if the component is rendered by a PaperComponent.
+     * @internal
+     */
+    paper: Paper;
+    /**
+     * Underlying UI. Visually sets this, regardless of the component this was rendered by (ie Surface or Paper).
+     * @internal
+     */
+    ui: BrowserUI;
     /**
      * Underlying model object. Visually sets this.
      * @internal
@@ -46,6 +56,22 @@ export declare abstract class BaseVertexComponent<T extends Node> implements OnI
      * @classMember
      */
     zoom: import("@angular/core").WritableSignal<number>;
+    /**
+     * This signal provides all of the edges for which this vertex is the source. These are edges connected to the vertex, not to its ports.
+     */
+    sourceEdges: import("@angular/core").WritableSignal<Edge[]>;
+    /**
+     * This signal provides all of the edges for which this vertex or one of its ports is the source.
+     */
+    allSourceEdges: import("@angular/core").WritableSignal<Edge[]>;
+    /**
+     * This signal provides all of the edges for which this vertex is the target. These are edges connected to the vertex, not to its ports.
+     */
+    targetEdges: import("@angular/core").WritableSignal<Edge[]>;
+    /**
+     * This signal provides all of the edges for which this vertex or one of its ports is the target.
+     */
+    allTargetEdges: import("@angular/core").WritableSignal<Edge[]>;
     /**
      * @internal
      * @private
@@ -56,6 +82,7 @@ export declare abstract class BaseVertexComponent<T extends Node> implements OnI
      * @internal
      */
     ngOnInit(): void;
+    $updateEdges(): void;
     /**
      * Gets the vertex that this component represents. Subclasses have getters that return more specific subclasses of Vertex.
      * @classMember
@@ -119,7 +146,6 @@ export declare abstract class BaseVertexComponent<T extends Node> implements OnI
      * Flash this vertex
      * @param duration Optional; defaults to 1000ms. Duration of the animation in milliseconds.
      * @param animName Optional; the name of the CSS animation to apply. Defaults to ANIM_SURFACE_ELEMENT_FLASH.
-     * @internal
      */
     flashVertex(duration: number, animName?: string): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<BaseVertexComponent<any>, never>;

package/lib/browser-ui-angular.module.d.ts

@@ -4,26 +4,28 @@ import * as i2 from "./default-group-component";
 import * as i3 from "./base.port.component";
 import * as i4 from "./miniview-component";
 import * as i5 from "./surface-component";
-import * as i6 from "./palette.component";
-import * as i7 from "./shape.palette.component";
-import * as i8 from "./diagram-palette-component";
-import * as i9 from "./shape.component";
-import * as i10 from "./controls-component";
-import * as i11 from "./edge.type.picker.component";
-import * as i12 from "./export-controls-component";
-import * as i13 from "./color.tag.component";
-import * as i14 from "./diagram-component";
-import * as i15 from "./charts/column.chart.component";
-import * as i16 from "./charts/bar.chart.component";
-import * as i17 from "./charts/xy.chart.component";
-import * as i18 from "./charts/line.chart.component";
-import * as i19 from "./charts/area.chart.component";
-import * as i20 from "./charts/pie.chart.component";
-import * as i21 from "./charts/scatter.chart.component";
-import * as i22 from "./charts/bubble.chart.component";
-import * as i23 from "./charts/sankey.chart.component";
-import * as i24 from "./decorator-component";
-import * as i25 from "@angular/common";
+import * as i6 from "./paper-component";
+import * as i7 from "./palette.component";
+import * as i8 from "./shape.palette.component";
+import * as i9 from "./diagram-palette-component";
+import * as i10 from "./shape.component";
+import * as i11 from "./controls-component";
+import * as i12 from "./edge.type.picker.component";
+import * as i13 from "./export-controls-component";
+import * as i14 from "./color.tag.component";
+import * as i15 from "./diagram-component";
+import * as i16 from "./charts/column.chart.component";
+import * as i17 from "./charts/bar.chart.component";
+import * as i18 from "./charts/xy.chart.component";
+import * as i19 from "./charts/line.chart.component";
+import * as i20 from "./charts/area.chart.component";
+import * as i21 from "./charts/pie.chart.component";
+import * as i22 from "./charts/scatter.chart.component";
+import * as i23 from "./charts/bubble.chart.component";
+import * as i24 from "./charts/sankey.chart.component";
+import * as i25 from "./decorator-component";
+import * as i26 from "./surface-popup-component";
+import * as i27 from "@angular/common";
 /**
  * VisuallyJs Angular module.
  *
@@ -59,6 +61,6 @@ import * as i25 from "@angular/common";
  */
 export declare class VisuallyJsModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<VisuallyJsModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<VisuallyJsModule, [typeof i1.DefaultNodeComponent, typeof i2.DefaultGroupComponent, typeof i3.BasePortComponent, typeof i4.MiniviewComponent, typeof i5.SurfaceComponent, typeof i6.PaletteComponent, typeof i7.ShapePaletteComponent, typeof i8.DiagramPaletteComponent, typeof i9.ShapeComponent, typeof i10.ControlsComponent, typeof i11.EdgeTypePickerComponent, typeof i6.PaletteComponent, typeof i12.ExportControlsComponent, typeof i13.ColorPickerComponent, typeof i14.DiagramComponent, typeof i15.ColumnChartComponent, typeof i16.BarChartComponent, typeof i17.XYChartComponent, typeof i18.LineChartComponent, typeof i19.AreaChartComponent, typeof i20.PieChartComponent, typeof i21.ScatterChartComponent, typeof i22.BubbleChartComponent, typeof i23.SankeyChartComponent, typeof i24.DecoratorComponent], [typeof i25.CommonModule], [typeof i4.MiniviewComponent, typeof i5.SurfaceComponent, typeof i6.PaletteComponent, typeof i8.DiagramPaletteComponent, typeof i9.ShapeComponent, typeof i7.ShapePaletteComponent, typeof i10.ControlsComponent, typeof i12.ExportControlsComponent, typeof i11.EdgeTypePickerComponent, typeof i13.ColorPickerComponent, typeof i14.DiagramComponent, typeof i15.ColumnChartComponent, typeof i16.BarChartComponent, typeof i17.XYChartComponent, typeof i18.LineChartComponent, typeof i19.AreaChartComponent, typeof i20.PieChartComponent, typeof i21.ScatterChartComponent, typeof i22.BubbleChartComponent, typeof i23.SankeyChartComponent, typeof i24.DecoratorComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<VisuallyJsModule, [typeof i1.DefaultNodeComponent, typeof i2.DefaultGroupComponent, typeof i3.BasePortComponent, typeof i4.MiniviewComponent, typeof i5.SurfaceComponent, typeof i6.PaperComponent, typeof i7.PaletteComponent, typeof i8.ShapePaletteComponent, typeof i9.DiagramPaletteComponent, typeof i10.ShapeComponent, typeof i11.ControlsComponent, typeof i12.EdgeTypePickerComponent, typeof i7.PaletteComponent, typeof i13.ExportControlsComponent, typeof i14.ColorPickerComponent, typeof i15.DiagramComponent, typeof i16.ColumnChartComponent, typeof i17.BarChartComponent, typeof i18.XYChartComponent, typeof i19.LineChartComponent, typeof i20.AreaChartComponent, typeof i21.PieChartComponent, typeof i22.ScatterChartComponent, typeof i23.BubbleChartComponent, typeof i24.SankeyChartComponent, typeof i25.DecoratorComponent, typeof i26.SurfacePopupComponent], [typeof i27.CommonModule], [typeof i4.MiniviewComponent, typeof i5.SurfaceComponent, typeof i6.PaperComponent, typeof i7.PaletteComponent, typeof i9.DiagramPaletteComponent, typeof i10.ShapeComponent, typeof i8.ShapePaletteComponent, typeof i11.ControlsComponent, typeof i13.ExportControlsComponent, typeof i12.EdgeTypePickerComponent, typeof i14.ColorPickerComponent, typeof i15.DiagramComponent, typeof i16.ColumnChartComponent, typeof i17.BarChartComponent, typeof i18.XYChartComponent, typeof i19.LineChartComponent, typeof i20.AreaChartComponent, typeof i21.PieChartComponent, typeof i22.ScatterChartComponent, typeof i23.BubbleChartComponent, typeof i24.SankeyChartComponent, typeof i25.DecoratorComponent, typeof i26.SurfacePopupComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<VisuallyJsModule>;
 }

package/lib/diagram-component.d.ts

@@ -13,15 +13,15 @@ export declare class DiagramComponent implements AfterViewInit, OnDestroy {
      */
     options?: DiagramOptions;
     /**
-     * Optional data to load after creation
+     * Optional data to load after the view has been initialised. This input is a signal, and will reload the dataset if changed.
      * @input
      */
-    data?: any;
+    data: import("@angular/core").InputSignal<Record<string, any>>;
     /**
-     * Optional URL from which to load data after creation
+     * Optional url from which to load data after the view has been initialised. This input is a signal, and will reload the dataset if changed.
      * @input
      */
-    url?: string;
+    url: import("@angular/core").InputSignal<string>;
     /**
      * Options for the underlying model
      * @input
@@ -35,6 +35,8 @@ export declare class DiagramComponent implements AfterViewInit, OnDestroy {
     $ngZone: NgZone;
     $el: ElementRef<any>;
     $vjs: VisuallyJsService;
+    private _dataEffect;
+    private _urlEffect;
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
     /**
@@ -48,5 +50,5 @@ export declare class DiagramComponent implements AfterViewInit, OnDestroy {
      */
     saveToUrl(options: SaveOptions): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DiagramComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DiagramComponent, "vjs-diagram", never, { "options": { "alias": "options"; "required": false; }; "data": { "alias": "data"; "required": false; }; "url": { "alias": "url"; "required": false; }; "modelOptions": { "alias": "modelOptions"; "required": false; }; }, {}, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DiagramComponent, "vjs-diagram", never, { "options": { "alias": "options"; "required": false; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "url": { "alias": "url"; "required": false; "isSignal": true; }; "modelOptions": { "alias": "modelOptions"; "required": false; }; }, {}, never, ["*"], false, never>;
 }

package/lib/overlay-component.d.ts

@@ -1,4 +1,4 @@
-import { Edge, ObjectData, Surface } from "@visuallyjs/browser-ui";
+import { BrowserUI, Edge, ObjectData } from "@visuallyjs/browser-ui";
 import { ChangeDetectorRef } from "@angular/core";
 import { VisuallyJsModel } from "@visuallyjs/browser-ui";
 import { VisuallyJsAngularComponent } from "./surface-component";
@@ -10,7 +10,7 @@ export declare const AngularComponentOverlayType = "AngularComponent";
 /**
  * Definition of an angular component that will act as an overlay. This interface exists largely for convenience; the code will write the members of this interface onto any component it creates.
  */
-export interface AngularOverlayComponent extends VisuallyJsAngularComponent {
+export interface AngularOverlayComponent<T extends BrowserUI = BrowserUI> extends VisuallyJsAngularComponent<T> {
     /**
      * The edge that this overlay is drawn on.
      */
@@ -20,17 +20,17 @@ export interface AngularOverlayComponent extends VisuallyJsAngularComponent {
  * A component that you can use as a base for your own overlay component if its convenient for you. This class offers an `updateEdge` and a `removeEdge` method, as helpers.
  * @group Components
  */
-export declare abstract class BaseAngularOverlayComponent implements AngularOverlayComponent {
+export declare abstract class BaseAngularOverlayComponent<T extends BrowserUI = BrowserUI> implements AngularOverlayComponent<T> {
     /**
      * The underlying model
      * @classMember
      */
     model: VisuallyJsModel;
     /**
-     * The surface that this overlay is rendered by
+     * The UI that this overlay is rendered by
      * @classMember
      */
-    surface: Surface;
+    ui: T;
     /**
      * Backing data for the edge this overlay is attached to
      * @classMember

package/lib/paper-component.d.ts

@@ -0,0 +1,156 @@
+import { AfterViewInit, ComponentRef, ElementRef, EventEmitter, NgZone, OnDestroy, ViewContainerRef } from "@angular/core";
+import { PortUpdatedParams, Vertex, VertexUpdatedParams, Paper, ModelOptions, SurfaceSaveData, ExportOptions, SaveOptions, BrowserUIModel } from "@visuallyjs/browser-ui";
+import { AngularRenderOptions, AngularViewOptions } from "./common";
+import { VisuallyJsService } from "./vjs-service";
+import { VisuallyJsAngularDOMElement } from "./surface-component";
+import * as i0 from "@angular/core";
+/**
+ * Provides a component that manages a Paper. You can configure three sets of options on this component:
+ *
+ * 1. renderOptions - these are options that control the behaviour of the Paper canvas
+ * 2. viewOptions - these are mappings of node/group types to behaviour and components, and edge types to behaviour
+ * 3. modelOptions - Options that govern how the underlying data model operates. If you don't provide these, the Paper component uses defaults (which is fine for the majority of applications)
+ *
+ * ```typescript
+ * @Component({
+ *   selector:"app-my-canvas",
+ *   template:`<vjs-Paper [renderOptions]="renderOptions"
+ *   [viewOptions]="viewOptions"
+ *   [modelOptions]="modelOptions"/>`
+ * })
+ * export class MyCanvas {
+ *
+ *   renderOptions = { ... }
+ *   viewOptions = { ... }
+ *   modelOptions = { ... }
+ * }
+ * ```
+ *
+ * @group Components
+ */
+export declare class PaperComponent<RO extends AngularRenderOptions = AngularRenderOptions> implements AfterViewInit, OnDestroy {
+    /**
+     * Optional preconfigured model to use for this Paper. You don't normally need to provide this; the component will create a model from the options you pass in (or with blank options by default) otherwise.
+     */
+    inputModel?: BrowserUIModel;
+    /**
+     * Options for the view - mappings of components and behaviour to model object types.
+     * @input
+     */
+    viewOptions?: AngularViewOptions;
+    /**
+     * Options for the underlying Paper widget.
+     * @input
+     */
+    renderOptions?: AngularRenderOptions;
+    /**
+     * Optional parameters for the underlying model instance. These will be used only if the model instance with the given ID has not yet been created somewhere else in the app.
+     * @input
+     */
+    modelOptions?: ModelOptions;
+    /**
+     * Optional data to load after the view has been initialised. This input is a signal, and will reload the dataset if changed.
+     * @input
+     */
+    data: import("@angular/core").InputSignal<Record<string, any>>;
+    /**
+     * Optional url from which to load data after the view has been initialised. This input is a signal, and will reload the dataset if changed.
+     * @input
+     */
+    url: import("@angular/core").InputSignal<string>;
+    /**
+     * Output event emitter, for proxying events from vertex components.
+     * @output
+     */
+    vertexEvent: EventEmitter<{
+        /**
+         * The vertex emitting the event
+         */
+        vertex: Vertex;
+        /**
+         * Event name
+         */
+        event: string;
+        /**
+         * Payload for the event
+         */
+        payload: any;
+        /**
+         * The Angular component that fired the event
+         */
+        component: ComponentRef<any>;
+    }>;
+    /**
+     * The underlying model.
+     * @classMember
+     */
+    model: BrowserUIModel;
+    /**
+     * The Paper from the UI core package that this component manages.
+     * @classMember
+     */
+    paper: Paper;
+    nodeUpdateFn: (a: any, e?: any) => any;
+    groupUpdateFn: (a: any, e?: any) => any;
+    portAddedFn: (a: any, e?: any) => any;
+    portUpdateFn: (a: any, e?: any) => any;
+    dataLoadEndFn: () => any;
+    edgeUpdateFn: (a: any, e?: any) => any;
+    edgeAddFn: (a: any, e?: any) => any;
+    edgeRemoveFn: (a: any, e?: any) => any;
+    $el: ElementRef<any>;
+    $viewContainerRef: ViewContainerRef;
+    $ngZone: NgZone;
+    $vjs: VisuallyJsService;
+    private _dataEffect;
+    private _urlEffect;
+    /**
+     * @internal
+     */
+    getNativeElement(component: any): VisuallyJsAngularDOMElement;
+    private _getComponent;
+    private _getComponentThen;
+    /**
+     * on node/group update, store the new data in the view
+     * @internal
+     */
+    nodeOrGroupUpdated(params: VertexUpdatedParams): void;
+    portUpdated(params: PortUpdatedParams): void;
+    /**
+     * When an edge updated event is received, check for angular overlays, and if they have a change detector, invoke it. Used with OnPush change detection.
+     * @internal
+     */
+    private edgeUpdated;
+    private edgeAddedRemoved;
+    /**
+     * @internal
+     */
+    private _processAngularOverlays;
+    /**
+     * Save the dataset and the Paper's current pan/zoom, as well as any inspector context, via POST to a URL.
+     * @param options Options for the save operation
+     * @classMember
+     */
+    save(options: SaveOptions): void;
+    /**
+     * Export the dataset only
+     * @classMember
+     */
+    exportData(options: ExportOptions): SurfaceSaveData;
+    /**
+     * On data load end, repaint everything on next tick.
+     * @internal
+     */
+    dataLoadEnd(): void;
+    private $removeNgElement;
+    /**
+     * @internal
+     */
+    ngAfterViewInit(): void;
+    /**
+     * @internal
+     */
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PaperComponent<any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PaperComponent<any>, "vjs-paper", never, { "inputModel": { "alias": "model"; "required": false; }; "viewOptions": { "alias": "viewOptions"; "required": false; }; "renderOptions": { "alias": "renderOptions"; "required": false; }; "modelOptions": { "alias": "modelOptions"; "required": false; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "url": { "alias": "url"; "required": false; "isSignal": true; }; }, { "vertexEvent": "vertexEvent"; }, never, ["*"], false, never>;
+}

package/lib/surface-component.d.ts

@@ -1,18 +1,21 @@
 import { AfterViewInit, ComponentRef, ElementRef, EventEmitter, NgZone, OnDestroy, ViewContainerRef, ChangeDetectorRef, WritableSignal } from "@angular/core";
-import { ObjectData, PortUpdatedParams, Vertex, VertexUpdatedParams, Surface, BrowserElement, VisuallyJsModel, ModelOptions, SurfaceSaveData, ExportOptions, SaveOptions, BrowserUIModel } from "@visuallyjs/browser-ui";
+import { ObjectData, PortUpdatedParams, Vertex, VertexUpdatedParams, Surface, BrowserElement, VisuallyJsModel, ModelOptions, SurfaceSaveData, ExportOptions, SaveOptions, BrowserUIModel, BrowserUI, Paper } from "@visuallyjs/browser-ui";
 import { AngularRenderOptions, AngularViewOptions } from "./common";
 import { VisuallyJsService } from "./vjs-service";
 import * as i0 from "@angular/core";
-type VisuallyJsAngularDOMElement = BrowserElement & {
+/**
+ * @internal
+ */
+export type VisuallyJsAngularDOMElement = BrowserElement & {
     _visuallyJsNgComponent: any;
     _ref: ComponentRef<any>;
 };
 /**
  * @internal
  */
-export interface VisuallyJsAngularComponent {
+export interface VisuallyJsAngularComponent<T extends BrowserUI> {
     model: VisuallyJsModel;
-    surface: Surface;
+    ui: T;
     data: ObjectData;
     $data?: WritableSignal<ObjectData>;
     changeDetectorRef?: ChangeDetectorRef;
@@ -20,9 +23,11 @@ export interface VisuallyJsAngularComponent {
 /**
  * @internal
  */
-export interface VisuallyJsAngularVertexComponent extends VisuallyJsAngularComponent {
+export interface VisuallyJsAngularVertexComponent<T extends BrowserUI> extends VisuallyJsAngularComponent<T> {
     modelObject: Vertex;
     _el: VisuallyJsAngularDOMElement;
+    surface?: Surface;
+    paper?: Paper;
 }
 /**
  * Provides a component that manages a Surface. You can configure three sets of options on this component:
@@ -69,15 +74,15 @@ export declare class SurfaceComponent<RO extends AngularRenderOptions = AngularR
      */
     modelOptions?: ModelOptions;
     /**
-     * Optional data to load after the view has been initialised.
+     * Optional data to load after the view has been initialised. This input is a signal, and will reload the dataset if changed.
      * @input
      */
-    data?: Record<string, any>;
+    data: import("@angular/core").InputSignal<Record<string, any>>;
     /**
-     * Optional url from which to load data after the view has been initialised.
+     * Optional url from which to load data after the view has been initialised. This input is a signal, and will reload the dataset if changed.
      * @input
      */
-    url?: string;
+    url: import("@angular/core").InputSignal<string>;
     /**
      * Output event emitter, for proxying events from vertex components.
      * @output
@@ -117,10 +122,13 @@ export declare class SurfaceComponent<RO extends AngularRenderOptions = AngularR
     dataLoadEndFn: () => any;
     edgeUpdateFn: (a: any, e?: any) => any;
     edgeAddFn: (a: any, e?: any) => any;
+    edgeRemoveFn: (a: any, e?: any) => any;
     $el: ElementRef<any>;
     $viewContainerRef: ViewContainerRef;
     $ngZone: NgZone;
     $vjs: VisuallyJsService;
+    private _dataEffect;
+    private _urlEffect;
     /**
      * @internal
      */
@@ -138,6 +146,7 @@ export declare class SurfaceComponent<RO extends AngularRenderOptions = AngularR
      * @internal
      */
     private edgeUpdated;
+    private edgeAddedRemoved;
     /**
      * @internal
      */
@@ -168,6 +177,5 @@ export declare class SurfaceComponent<RO extends AngularRenderOptions = AngularR
      */
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SurfaceComponent<any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SurfaceComponent<any>, "vjs-surface", never, { "inputModel": { "alias": "model"; "required": false; }; "viewOptions": { "alias": "viewOptions"; "required": false; }; "renderOptions": { "alias": "renderOptions"; "required": false; }; "modelOptions": { "alias": "modelOptions"; "required": false; }; "data": { "alias": "data"; "required": false; }; "url": { "alias": "url"; "required": false; }; }, { "vertexEvent": "vertexEvent"; }, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SurfaceComponent<any>, "vjs-surface", never, { "inputModel": { "alias": "model"; "required": false; }; "viewOptions": { "alias": "viewOptions"; "required": false; }; "renderOptions": { "alias": "renderOptions"; "required": false; }; "modelOptions": { "alias": "modelOptions"; "required": false; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "url": { "alias": "url"; "required": false; "isSignal": true; }; }, { "vertexEvent": "vertexEvent"; }, never, ["*"], false, never>;
 }
-export {};

package/lib/surface-popup-component.d.ts

@@ -0,0 +1,62 @@
+import { TemplateRef, ElementRef, AfterViewInit, OnDestroy } from "@angular/core";
+import { Vertex, PopupHandler, PopupPosition } from "@visuallyjs/browser-ui";
+import * as i0 from "@angular/core";
+/**
+ * Provides a means to wire up a popup that is shown when users tap on a vertex.
+ *
+ * Use it like this:
+ *
+ * ```html
+ * <vjs-surface-popup selector=".my-launcher" anchor="bottom">
+ *   <ng-template let-vertex="vertex" let-model="model" let-ui="ui" let-hide="hide">
+ *      <div>Popup content for {{vertex.data.name}}</div>
+ *   </ng-template>
+ * </vjs-surface-popup>
+ * ```
+ *
+ * Your popup should expose inputs for
+ *
+ * - vertex The vertex the popup is attached to
+ * - model The underlying model
+ * - ui The UI that rendered this popup
+ * - hide A function you can invoke to close the popup, if you need to.
+ *
+ *
+ * @group Components
+ */
+export declare class SurfacePopupComponent implements AfterViewInit, OnDestroy {
+    /**
+     * CSS3 selector identifying elements from which this popup is launched.
+     * @input
+     */
+    selector: string;
+    /**
+     * Optional position to place this popup. Defaults to "bottom", and can also be overridden on a per-launcher basis via a DOM attribute.
+     * @input
+     */
+    anchor?: PopupPosition;
+    /**
+     * Template containing popup content
+     */
+    template: TemplateRef<any>;
+    /**
+     * @internal
+     */
+    container: ElementRef<HTMLDivElement>;
+    private cdr;
+    private vjs;
+    private initialized;
+    /**
+     * @internal
+     */
+    popupHandler: PopupHandler;
+    readonly current: import("@angular/core").WritableSignal<Vertex>;
+    readonly model: import("@angular/core").WritableSignal<import("@visuallyjs/browser-ui").BrowserUIModel>;
+    readonly ui: import("@angular/core").WritableSignal<import("@visuallyjs/browser-ui").BrowserUI<any>>;
+    readonly display: import("@angular/core").Signal<"none" | "block">;
+    $hide(): void;
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SurfacePopupComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SurfacePopupComponent, "vjs-surface-popup", never, { "selector": { "alias": "selector"; "required": true; }; "anchor": { "alias": "anchor"; "required": false; }; }, {}, ["template"], never, false, never>;
+}

package/package.json

@@ -1,13 +1,13 @@
 {
     "name": "@visuallyjs/browser-ui-angular",
-    "version": "1.2.0",
+    "version": "1.2.1",
     "peerDependencies": {
         "@angular/common": "*",
         "@angular/core": "*"
     },
     "dependencies": {
         "tslib": "^2.0.0",
-        "@visuallyjs/browser-ui": "1.2.0"
+        "@visuallyjs/browser-ui": "1.2.1"
     },
     "exports": {
         "./css/visuallyjs-angular.css": {