@angflow/angular 0.0.1

package/dist/esm/index.d.ts

@@ -0,0 +1,2 @@
+export * from './lib/public-api';
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC"}

package/dist/esm/index.js

@@ -0,0 +1,2 @@
+export * from './lib/public-api';
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC"}

package/dist/esm/lib/components/a11y-descriptions/a11y-descriptions.component.d.ts

@@ -0,0 +1,25 @@
+import * as i0 from "@angular/core";
+export declare class A11yDescriptionsComponent {
+    private store;
+    get rfId(): string;
+    readonly config: import("@angular/core").WritableSignal<{
+        'node.a11yDescription.default': string;
+        'node.a11yDescription.keyboardDisabled': string;
+        'node.a11yDescription.ariaLiveMessage': ({ direction, x, y }: {
+            direction: string;
+            x: number;
+            y: number;
+        }) => string;
+        'edge.a11yDescription.default': string;
+        'controls.ariaLabel': string;
+        'controls.zoomIn.ariaLabel': string;
+        'controls.zoomOut.ariaLabel': string;
+        'controls.fitView.ariaLabel': string;
+        'controls.interactive.ariaLabel': string;
+        'minimap.ariaLabel': string;
+        'handle.ariaLabel': string;
+    }>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<A11yDescriptionsComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<A11yDescriptionsComponent, "ng-flow-a11y-descriptions", never, {}, {}, never, never, true, never>;
+}
+//# sourceMappingURL=a11y-descriptions.component.d.ts.map

package/dist/esm/lib/components/a11y-descriptions/a11y-descriptions.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"a11y-descriptions.component.d.ts","sourceRoot":"","sources":["../../../../../src/lib/components/a11y-descriptions/a11y-descriptions.component.ts"],"names":[],"mappings":";AAGA,qBAmBa,yBAAyB;IACpC,OAAO,CAAC,KAAK,CAAqB;IAElC,IAAI,IAAI,IAAI,MAAM,CAEjB;IAED,QAAQ,CAAC,MAAM;;;;;;;;;;;;;;;;OAA8B;yCAPlC,yBAAyB;2CAAzB,yBAAyB;CAQrC"}

package/dist/esm/lib/components/a11y-descriptions/a11y-descriptions.component.js

@@ -0,0 +1,58 @@
+import { Component, ChangeDetectionStrategy, inject } from '@angular/core';
+import { FlowStore } from '../../services/flow-store.service';
+import * as i0 from "@angular/core";
+export class A11yDescriptionsComponent {
+    constructor() {
+        this.store = inject(FlowStore);
+        this.config = this.store.ariaLabelConfig;
+    }
+    get rfId() {
+        return this.store.rfId();
+    }
+    static { this.ɵfac = function A11yDescriptionsComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || A11yDescriptionsComponent)(); }; }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: A11yDescriptionsComponent, selectors: [["ng-flow-a11y-descriptions"]], hostAttrs: [2, "position", "absolute", "width", "1px", "height", "1px", "margin", "-1px", "padding", "0", "overflow", "hidden", "clip", "rect(0,0,0,0)", "border", "0"], decls: 6, vars: 5, consts: [[1, "xy-flow__sr-only", 3, "id"]], template: function A11yDescriptionsComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵdomElementStart(0, "div", 0);
+            i0.ɵɵtext(1);
+            i0.ɵɵdomElementEnd();
+            i0.ɵɵdomElementStart(2, "div", 0);
+            i0.ɵɵtext(3);
+            i0.ɵɵdomElementEnd();
+            i0.ɵɵdomElementStart(4, "div", 0);
+            i0.ɵɵtext(5, " Edge connection ");
+            i0.ɵɵdomElementEnd();
+        } if (rf & 2) {
+            i0.ɵɵdomProperty("id", ctx.rfId + "-node-desc");
+            i0.ɵɵadvance();
+            i0.ɵɵtextInterpolate1(" ", ctx.config()["node.a11yDescription.default"], " ");
+            i0.ɵɵadvance();
+            i0.ɵɵdomProperty("id", ctx.rfId + "-handle-desc");
+            i0.ɵɵadvance();
+            i0.ɵɵtextInterpolate1(" ", ctx.config()["handle.ariaLabel"], " ");
+            i0.ɵɵadvance();
+            i0.ɵɵdomProperty("id", ctx.rfId + "-edge-desc");
+        } }, encapsulation: 2, changeDetection: 0 }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(A11yDescriptionsComponent, [{
+        type: Component,
+        args: [{
+                selector: 'ng-flow-a11y-descriptions',
+                standalone: true,
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: `
+    <div [id]="rfId + '-node-desc'" class="xy-flow__sr-only">
+      {{ config()['node.a11yDescription.default'] }}
+    </div>
+    <div [id]="rfId + '-handle-desc'" class="xy-flow__sr-only">
+      {{ config()['handle.ariaLabel'] }}
+    </div>
+    <div [id]="rfId + '-edge-desc'" class="xy-flow__sr-only">
+      Edge connection
+    </div>
+  `,
+                host: {
+                    'style': 'position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); border: 0;',
+                },
+            }]
+    }], null, null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(A11yDescriptionsComponent, { className: "A11yDescriptionsComponent", filePath: "lib/components/a11y-descriptions/a11y-descriptions.component.ts", lineNumber: 23 }); })();
+//# sourceMappingURL=a11y-descriptions.component.js.map

package/dist/esm/lib/components/a11y-descriptions/a11y-descriptions.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"a11y-descriptions.component.js","sourceRoot":"","sources":["../../../../../src/lib/components/a11y-descriptions/a11y-descriptions.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,uBAAuB,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAC3E,OAAO,EAAE,SAAS,EAAE,MAAM,mCAAmC,CAAC;;AAqB9D,MAAM,OAAO,yBAAyB;IAnBtC;QAoBU,UAAK,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC;QAMzB,WAAM,GAAG,IAAI,CAAC,KAAK,CAAC,eAAe,CAAC;KAC9C;IALC,IAAI,IAAI;QACN,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;IAC3B,CAAC;0HALU,yBAAyB;oEAAzB,yBAAyB;YAdlC,iCAAyD;YACvD,YACF;YAAA,oBAAM;YACN,iCAA2D;YACzD,YACF;YAAA,oBAAM;YACN,iCAAyD;YACvD,iCACF;YAAA,oBAAM;;YARD,+CAA0B;YAC7B,cACF;YADE,6EACF;YACK,cAA4B;YAA5B,iDAA4B;YAC/B,cACF;YADE,iEACF;YACK,cAA0B;YAA1B,+CAA0B;;;iFAQtB,yBAAyB;cAnBrC,SAAS;eAAC;gBACT,QAAQ,EAAE,2BAA2B;gBACrC,UAAU,EAAE,IAAI;gBAChB,eAAe,EAAE,uBAAuB,CAAC,MAAM;gBAC/C,QAAQ,EAAE;;;;;;;;;;GAUT;gBACD,IAAI,EAAE;oBACJ,OAAO,EAAE,0HAA0H;iBACpI;aACF;;kFACY,yBAAyB"}

package/dist/esm/lib/components/attribution/attribution.component.d.ts

@@ -0,0 +1,6 @@
+import * as i0 from "@angular/core";
+export declare class AttributionComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<AttributionComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AttributionComponent, "ng-flow-attribution", never, {}, {}, never, never, true, never>;
+}
+//# sourceMappingURL=attribution.component.d.ts.map

package/dist/esm/lib/components/attribution/attribution.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"attribution.component.d.ts","sourceRoot":"","sources":["../../../../../src/lib/components/attribution/attribution.component.ts"],"names":[],"mappings":";AAGA,qBAgBa,oBAAoB;yCAApB,oBAAoB;2CAApB,oBAAoB;CAAG"}

package/dist/esm/lib/components/attribution/attribution.component.js

@@ -0,0 +1,32 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { PanelComponent } from '../panel/panel.component';
+import * as i0 from "@angular/core";
+export class AttributionComponent {
+    static { this.ɵfac = function AttributionComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || AttributionComponent)(); }; }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: AttributionComponent, selectors: [["ng-flow-attribution"]], decls: 3, vars: 0, consts: [["position", "bottom-right"], [1, "ng-flow__attribution", "xy-flow__attribution", 2, "font-size", "10px", "color", "#999", "pointer-events", "all"]], template: function AttributionComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "ng-flow-panel", 0)(1, "span", 1);
+            i0.ɵɵtext(2, " ngflow ");
+            i0.ɵɵelementEnd()();
+        } }, dependencies: [PanelComponent], encapsulation: 2, changeDetection: 0 }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AttributionComponent, [{
+        type: Component,
+        args: [{
+                selector: 'ng-flow-attribution',
+                standalone: true,
+                imports: [PanelComponent],
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: `
+    <ng-flow-panel position="bottom-right">
+      <span
+        class="ng-flow__attribution xy-flow__attribution"
+        style="font-size: 10px; color: #999; pointer-events: all;"
+      >
+        ngflow
+      </span>
+    </ng-flow-panel>
+  `,
+            }]
+    }], null, null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AttributionComponent, { className: "AttributionComponent", filePath: "lib/components/attribution/attribution.component.ts", lineNumber: 20 }); })();
+//# sourceMappingURL=attribution.component.js.map

package/dist/esm/lib/components/attribution/attribution.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"attribution.component.js","sourceRoot":"","sources":["../../../../../src/lib/components/attribution/attribution.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,uBAAuB,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;;AAkB1D,MAAM,OAAO,oBAAoB;qHAApB,oBAAoB;oEAApB,oBAAoB;YAT3B,AADF,wCAAuC,cAIpC;YACC,wBACF;YACF,AADE,iBAAO,EACO;4BAVR,cAAc;;iFAab,oBAAoB;cAhBhC,SAAS;eAAC;gBACT,QAAQ,EAAE,qBAAqB;gBAC/B,UAAU,EAAE,IAAI;gBAChB,OAAO,EAAE,CAAC,cAAc,CAAC;gBACzB,eAAe,EAAE,uBAAuB,CAAC,MAAM;gBAC/C,QAAQ,EAAE;;;;;;;;;GAST;aACF;;kFACY,oBAAoB"}

package/dist/esm/lib/components/background/background.component.d.ts

@@ -0,0 +1,31 @@
+import * as i0 from "@angular/core";
+export type BackgroundVariant = 'dots' | 'lines' | 'cross';
+export declare class BackgroundComponent {
+    private store;
+    readonly variant: import("@angular/core").InputSignal<BackgroundVariant>;
+    readonly gap: import("@angular/core").InputSignal<number | [number, number]>;
+    readonly size: import("@angular/core").InputSignal<number>;
+    readonly lineWidth: import("@angular/core").InputSignal<number | undefined>;
+    readonly offset: import("@angular/core").InputSignal<number | [number, number]>;
+    readonly color: import("@angular/core").InputSignal<string | undefined>;
+    readonly bgColor: import("@angular/core").InputSignal<string | undefined>;
+    readonly patternClassName: import("@angular/core").InputSignal<string | undefined>;
+    readonly bgId: import("@angular/core").InputSignal<string | undefined>;
+    readonly patternId: import("@angular/core").Signal<string>;
+    readonly zoom: import("@angular/core").Signal<number>;
+    private readonly gapX;
+    private readonly gapY;
+    private readonly offsetX;
+    private readonly offsetY;
+    readonly scaledGapX: import("@angular/core").Signal<number>;
+    readonly scaledGapY: import("@angular/core").Signal<number>;
+    readonly resolvedLineWidth: import("@angular/core").Signal<number>;
+    readonly patternOffset: import("@angular/core").Signal<{
+        x: number;
+        y: number;
+    }>;
+    readonly crossPath: import("@angular/core").Signal<string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<BackgroundComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<BackgroundComponent, "ng-flow-background", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "gap": { "alias": "gap"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "lineWidth": { "alias": "lineWidth"; "required": false; "isSignal": true; }; "offset": { "alias": "offset"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "bgColor": { "alias": "bgColor"; "required": false; "isSignal": true; }; "patternClassName": { "alias": "patternClassName"; "required": false; "isSignal": true; }; "bgId": { "alias": "id"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+//# sourceMappingURL=background.component.d.ts.map

package/dist/esm/lib/components/background/background.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"background.component.d.ts","sourceRoot":"","sources":["../../../../../src/lib/components/background/background.component.ts"],"names":[],"mappings":";AAGA,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,CAAC;AAE3D,qBAgFa,mBAAmB;IAC9B,OAAO,CAAC,KAAK,CAAqB;IAElC,QAAQ,CAAC,OAAO,yDAAoC;IACpD,QAAQ,CAAC,GAAG,iEAAwC;IACpD,QAAQ,CAAC,IAAI,8CAAY;IACzB,QAAQ,CAAC,SAAS,0DAAmB;IACrC,QAAQ,CAAC,MAAM,iEAAuC;IACtD,QAAQ,CAAC,KAAK,0DAAmB;IACjC,QAAQ,CAAC,OAAO,0DAAmB;IACnC,QAAQ,CAAC,gBAAgB,0DAAmB;IAC5C,QAAQ,CAAC,IAAI,0DAAyD;IAEtE,QAAQ,CAAC,SAAS,yCAGf;IAEH,QAAQ,CAAC,IAAI,yCAA6C;IAE1D,OAAO,CAAC,QAAQ,CAAC,IAAI,CAGlB;IAEH,OAAO,CAAC,QAAQ,CAAC,IAAI,CAGlB;IAEH,OAAO,CAAC,QAAQ,CAAC,OAAO,CAGrB;IAEH,OAAO,CAAC,QAAQ,CAAC,OAAO,CAGrB;IAEH,QAAQ,CAAC,UAAU,yCAA6C;IAChE,QAAQ,CAAC,UAAU,yCAA6C;IAEhE,QAAQ,CAAC,iBAAiB,yCAIvB;IAEH,QAAQ,CAAC,aAAa;;;OAMnB;IAEH,QAAQ,CAAC,SAAS,yCAOf;yCAhEQ,mBAAmB;2CAAnB,mBAAmB;CAiE/B"}

package/dist/esm/lib/components/background/background.component.js

@@ -0,0 +1,209 @@
+import { Component, ChangeDetectionStrategy, input, inject, computed } from '@angular/core';
+import { FlowStore } from '../../services/flow-store.service';
+import * as i0 from "@angular/core";
+function BackgroundComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵdomElement(0, "rect", 1);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵattribute("fill", ctx_r0.bgColor());
+} }
+function BackgroundComponent_Case_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵdomElementStart(0, "pattern", 2);
+    i0.ɵɵdomElement(1, "circle");
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵattribute("id", ctx_r0.patternId())("x", ctx_r0.patternOffset().x)("y", ctx_r0.patternOffset().y)("width", ctx_r0.scaledGapX())("height", ctx_r0.scaledGapY());
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap("xy-flow__background-pattern dots " + (ctx_r0.patternClassName() ?? ""));
+    i0.ɵɵattribute("cx", ctx_r0.size() * ctx_r0.zoom())("cy", ctx_r0.size() * ctx_r0.zoom())("r", ctx_r0.size() * ctx_r0.zoom())("fill", ctx_r0.color());
+} }
+function BackgroundComponent_Case_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵdomElementStart(0, "pattern", 2);
+    i0.ɵɵdomElement(1, "path");
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵattribute("id", ctx_r0.patternId())("x", ctx_r0.patternOffset().x)("y", ctx_r0.patternOffset().y)("width", ctx_r0.scaledGapX())("height", ctx_r0.scaledGapY());
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap("xy-flow__background-pattern lines " + (ctx_r0.patternClassName() ?? ""));
+    i0.ɵɵattribute("stroke", ctx_r0.color())("stroke-width", ctx_r0.resolvedLineWidth() * ctx_r0.zoom())("d", "M " + ctx_r0.scaledGapX() + " 0 L 0 0 0 " + ctx_r0.scaledGapY());
+} }
+function BackgroundComponent_Case_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵdomElementStart(0, "pattern", 2);
+    i0.ɵɵdomElement(1, "path");
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵattribute("id", ctx_r0.patternId())("x", ctx_r0.patternOffset().x)("y", ctx_r0.patternOffset().y)("width", ctx_r0.scaledGapX())("height", ctx_r0.scaledGapY());
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap("xy-flow__background-pattern cross " + (ctx_r0.patternClassName() ?? ""));
+    i0.ɵɵattribute("stroke", ctx_r0.color())("stroke-width", ctx_r0.resolvedLineWidth() * ctx_r0.zoom())("d", ctx_r0.crossPath());
+} }
+export class BackgroundComponent {
+    constructor() {
+        this.store = inject(FlowStore);
+        this.variant = input('dots', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+        this.gap = input(20, ...(ngDevMode ? [{ debugName: "gap" }] : /* istanbul ignore next */ []));
+        this.size = input(1, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        this.lineWidth = input(...(ngDevMode ? [undefined, { debugName: "lineWidth" }] : /* istanbul ignore next */ []));
+        this.offset = input(0, ...(ngDevMode ? [{ debugName: "offset" }] : /* istanbul ignore next */ []));
+        this.color = input(...(ngDevMode ? [undefined, { debugName: "color" }] : /* istanbul ignore next */ []));
+        this.bgColor = input(...(ngDevMode ? [undefined, { debugName: "bgColor" }] : /* istanbul ignore next */ []));
+        this.patternClassName = input(...(ngDevMode ? [undefined, { debugName: "patternClassName" }] : /* istanbul ignore next */ []));
+        this.bgId = input(undefined, { ...(ngDevMode ? { debugName: "bgId" } : /* istanbul ignore next */ {}), alias: 'id' });
+        this.patternId = computed(() => {
+            const customId = this.bgId();
+            return customId ?? `ng-flow-bg-${this.store.rfId()}`;
+        }, ...(ngDevMode ? [{ debugName: "patternId" }] : /* istanbul ignore next */ []));
+        this.zoom = computed(() => this.store.transform()[2], ...(ngDevMode ? [{ debugName: "zoom" }] : /* istanbul ignore next */ []));
+        this.gapX = computed(() => {
+            const g = this.gap();
+            return Array.isArray(g) ? g[0] : g;
+        }, ...(ngDevMode ? [{ debugName: "gapX" }] : /* istanbul ignore next */ []));
+        this.gapY = computed(() => {
+            const g = this.gap();
+            return Array.isArray(g) ? g[1] : g;
+        }, ...(ngDevMode ? [{ debugName: "gapY" }] : /* istanbul ignore next */ []));
+        this.offsetX = computed(() => {
+            const o = this.offset();
+            return Array.isArray(o) ? o[0] : o;
+        }, ...(ngDevMode ? [{ debugName: "offsetX" }] : /* istanbul ignore next */ []));
+        this.offsetY = computed(() => {
+            const o = this.offset();
+            return Array.isArray(o) ? o[1] : o;
+        }, ...(ngDevMode ? [{ debugName: "offsetY" }] : /* istanbul ignore next */ []));
+        this.scaledGapX = computed(() => this.gapX() * this.zoom(), ...(ngDevMode ? [{ debugName: "scaledGapX" }] : /* istanbul ignore next */ []));
+        this.scaledGapY = computed(() => this.gapY() * this.zoom(), ...(ngDevMode ? [{ debugName: "scaledGapY" }] : /* istanbul ignore next */ []));
+        this.resolvedLineWidth = computed(() => {
+            const lw = this.lineWidth();
+            if (lw !== undefined)
+                return lw;
+            return this.variant() === 'dots' ? this.size() : 1;
+        }, ...(ngDevMode ? [{ debugName: "resolvedLineWidth" }] : /* istanbul ignore next */ []));
+        this.patternOffset = computed(() => {
+            const t = this.store.transform();
+            return {
+                x: t[0] % this.scaledGapX() + this.offsetX() * this.zoom(),
+                y: t[1] % this.scaledGapY() + this.offsetY() * this.zoom(),
+            };
+        }, ...(ngDevMode ? [{ debugName: "patternOffset" }] : /* istanbul ignore next */ []));
+        this.crossPath = computed(() => {
+            const gx = this.scaledGapX();
+            const gy = this.scaledGapY();
+            const s = this.size() * this.zoom();
+            const halfGX = gx / 2;
+            const halfGY = gy / 2;
+            return `M ${halfGX - s} ${halfGY} L ${halfGX + s} ${halfGY} M ${halfGX} ${halfGY - s} L ${halfGX} ${halfGY + s}`;
+        }, ...(ngDevMode ? [{ debugName: "crossPath" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = function BackgroundComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || BackgroundComponent)(); }; }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: BackgroundComponent, selectors: [["ng-flow-background"]], hostAttrs: [1, "ng-flow__background", "xy-flow__background", "xy-flow__container", 2, "display", "block", "position", "absolute", "width", "100%", "height", "100%", "top", "0", "left", "0", "pointer-events", "none", "z-index", "-1"], inputs: { variant: [1, "variant"], gap: [1, "gap"], size: [1, "size"], lineWidth: [1, "lineWidth"], offset: [1, "offset"], color: [1, "color"], bgColor: [1, "bgColor"], patternClassName: [1, "patternClassName"], bgId: [1, "id", "bgId"] }, decls: 7, vars: 7, consts: [[1, "ng-flow__background-svg"], ["x", "0", "y", "0", "width", "100%", "height", "100%"], ["patternUnits", "userSpaceOnUse"]], template: function BackgroundComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵnamespaceSVG();
+            i0.ɵɵdomElementStart(0, "svg", 0);
+            i0.ɵɵconditionalCreate(1, BackgroundComponent_Conditional_1_Template, 1, 1, ":svg:rect", 1);
+            i0.ɵɵdomElementStart(2, "defs");
+            i0.ɵɵconditionalCreate(3, BackgroundComponent_Case_3_Template, 2, 11, ":svg:pattern", 2)(4, BackgroundComponent_Case_4_Template, 2, 10, ":svg:pattern", 2)(5, BackgroundComponent_Case_5_Template, 2, 10, ":svg:pattern", 2);
+            i0.ɵɵdomElementEnd();
+            i0.ɵɵdomElement(6, "rect", 1);
+            i0.ɵɵdomElementEnd();
+        } if (rf & 2) {
+            let tmp_3_0;
+            i0.ɵɵstyleProp("width", "100%")("height", "100%");
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.bgColor() ? 1 : -1);
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional((tmp_3_0 = ctx.variant()) === "dots" ? 3 : tmp_3_0 === "lines" ? 4 : tmp_3_0 === "cross" ? 5 : -1);
+            i0.ɵɵadvance(3);
+            i0.ɵɵattribute("fill", "url(#" + ctx.patternId() + ")");
+        } }, encapsulation: 2, changeDetection: 0 }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(BackgroundComponent, [{
+        type: Component,
+        args: [{
+                selector: 'ng-flow-background',
+                standalone: true,
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                host: {
+                    'class': 'ng-flow__background xy-flow__background xy-flow__container',
+                    'style': 'display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none; z-index: -1;',
+                },
+                template: `
+    <svg
+      class="ng-flow__background-svg"
+      [style.width]="'100%'"
+      [style.height]="'100%'"
+    >
+      @if (bgColor()) {
+        <rect x="0" y="0" width="100%" height="100%" [attr.fill]="bgColor()" />
+      }
+      <defs>
+        @switch (variant()) {
+          @case ('dots') {
+            <pattern
+              [attr.id]="patternId()"
+              [attr.x]="patternOffset().x"
+              [attr.y]="patternOffset().y"
+              [attr.width]="scaledGapX()"
+              [attr.height]="scaledGapY()"
+              patternUnits="userSpaceOnUse"
+            >
+              <circle
+                [class]="'xy-flow__background-pattern dots ' + (patternClassName() ?? '')"
+                [attr.cx]="size() * zoom()"
+                [attr.cy]="size() * zoom()"
+                [attr.r]="size() * zoom()"
+                [attr.fill]="color()"
+              />
+            </pattern>
+          }
+          @case ('lines') {
+            <pattern
+              [attr.id]="patternId()"
+              [attr.x]="patternOffset().x"
+              [attr.y]="patternOffset().y"
+              [attr.width]="scaledGapX()"
+              [attr.height]="scaledGapY()"
+              patternUnits="userSpaceOnUse"
+            >
+              <path
+                [class]="'xy-flow__background-pattern lines ' + (patternClassName() ?? '')"
+                [attr.stroke]="color()"
+                [attr.stroke-width]="resolvedLineWidth() * zoom()"
+                [attr.d]="'M ' + scaledGapX() + ' 0 L 0 0 0 ' + scaledGapY()"
+              />
+            </pattern>
+          }
+          @case ('cross') {
+            <pattern
+              [attr.id]="patternId()"
+              [attr.x]="patternOffset().x"
+              [attr.y]="patternOffset().y"
+              [attr.width]="scaledGapX()"
+              [attr.height]="scaledGapY()"
+              patternUnits="userSpaceOnUse"
+            >
+              <path
+                [class]="'xy-flow__background-pattern cross ' + (patternClassName() ?? '')"
+                [attr.stroke]="color()"
+                [attr.stroke-width]="resolvedLineWidth() * zoom()"
+                [attr.d]="crossPath()"
+              />
+            </pattern>
+          }
+        }
+      </defs>
+      <rect
+        x="0" y="0" width="100%" height="100%"
+        [attr.fill]="'url(#' + patternId() + ')'"
+      />
+    </svg>
+  `,
+            }]
+    }], null, { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], lineWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "lineWidth", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "offset", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], bgColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "bgColor", required: false }] }], patternClassName: [{ type: i0.Input, args: [{ isSignal: true, alias: "patternClassName", required: false }] }], bgId: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(BackgroundComponent, { className: "BackgroundComponent", filePath: "lib/components/background/background.component.ts", lineNumber: 86 }); })();
+//# sourceMappingURL=background.component.js.map

package/dist/esm/lib/components/background/background.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"background.component.js","sourceRoot":"","sources":["../../../../../src/lib/components/background/background.component.ts"],"names":[],"mappings":"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"}

package/dist/esm/lib/components/connection-line/connection-line.component.d.ts

@@ -0,0 +1,36 @@
+import { Type } from '@angular/core';
+import { ConnectionLineType, Position } from '@angflow/system';
+import { FlowStore } from '../../services/flow-store.service';
+import * as i0 from "@angular/core";
+export declare class ConnectionLineComponent {
+    readonly store: FlowStore<import("../../types").Node, import("../../types").Edge>;
+    readonly customComponent: import("@angular/core").InputSignal<Type<unknown> | null>;
+    readonly connectionLineType: import("@angular/core").InputSignal<ConnectionLineType>;
+    readonly isConnecting: import("@angular/core").Signal<boolean>;
+    readonly connectionProps: import("@angular/core").Signal<{
+        fromX?: undefined;
+        fromY?: undefined;
+        toX?: undefined;
+        toY?: undefined;
+        fromPosition?: undefined;
+        toPosition?: undefined;
+        connectionLineType?: undefined;
+        fromNode?: undefined;
+        fromHandle?: undefined;
+    } | {
+        fromX: number;
+        fromY: number;
+        toX: number;
+        toY: number;
+        fromPosition: Position;
+        toPosition: Position;
+        connectionLineType: ConnectionLineType;
+        fromNode: import("@angflow/system").InternalNodeBase;
+        fromHandle: import("@angflow/system").Handle;
+    }>;
+    private readonly connectionCoords;
+    readonly connectionPath: import("@angular/core").Signal<string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ConnectionLineComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ConnectionLineComponent, "ng-flow-connection-line", never, { "customComponent": { "alias": "customComponent"; "required": false; "isSignal": true; }; "connectionLineType": { "alias": "connectionLineType"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+//# sourceMappingURL=connection-line.component.d.ts.map

package/dist/esm/lib/components/connection-line/connection-line.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"connection-line.component.d.ts","sourceRoot":"","sources":["../../../../../src/lib/components/connection-line/connection-line.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAA+D,IAAI,EAAE,MAAM,eAAe,CAAC;AAElG,OAAO,EAAqD,kBAAkB,EAAE,QAAQ,EAA6B,MAAM,iBAAiB,CAAC;AAC7I,OAAO,EAAE,SAAS,EAAE,MAAM,mCAAmC,CAAC;;AAE9D,qBA6Ba,uBAAuB;IAClC,QAAQ,CAAC,KAAK,oEAAqB;IAEnC,QAAQ,CAAC,eAAe,4DAAqC;IAC7D,QAAQ,CAAC,kBAAkB,0DAAwD;IAEnF,QAAQ,CAAC,YAAY,0CAIlB;IAEH,QAAQ,CAAC,eAAe;;;;;;;;;;;;;;;;;;;;OAcrB;IAEH,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAwB9B;IAEH,QAAQ,CAAC,cAAc,yCA0BpB;yCAhFQ,uBAAuB;2CAAvB,uBAAuB;CAiFnC"}

package/dist/esm/lib/components/connection-line/connection-line.component.js

@@ -0,0 +1,146 @@
+import { Component, ChangeDetectionStrategy, inject, computed, input } from '@angular/core';
+import { CommonModule, NgComponentOutlet } from '@angular/common';
+import { getBezierPath, getSmoothStepPath, getStraightPath, ConnectionLineType, Position } from '@angflow/system';
+import { FlowStore } from '../../services/flow-store.service';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+function ConnectionLineComponent_Conditional_0_Conditional_0_ng_container_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainer(0);
+} }
+function ConnectionLineComponent_Conditional_0_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, ConnectionLineComponent_Conditional_0_Conditional_0_ng_container_0_Template, 1, 0, "ng-container", 1);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("ngComponentOutlet", ctx_r0.customComponent())("ngComponentOutletInputs", ctx_r0.connectionProps());
+} }
+function ConnectionLineComponent_Conditional_0_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(0, "svg", 0)(1, "g");
+    i0.ɵɵelement(2, "path", 2);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(2);
+    i0.ɵɵattribute("d", ctx_r0.connectionPath());
+} }
+function ConnectionLineComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, ConnectionLineComponent_Conditional_0_Conditional_0_Template, 1, 2, "ng-container")(1, ConnectionLineComponent_Conditional_0_Conditional_1_Template, 3, 1, ":svg:svg", 0);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵconditional(ctx_r0.customComponent() ? 0 : 1);
+} }
+export class ConnectionLineComponent {
+    constructor() {
+        this.store = inject(FlowStore);
+        this.customComponent = input(null, ...(ngDevMode ? [{ debugName: "customComponent" }] : /* istanbul ignore next */ []));
+        this.connectionLineType = input(ConnectionLineType.Bezier, ...(ngDevMode ? [{ debugName: "connectionLineType" }] : /* istanbul ignore next */ []));
+        this.isConnecting = computed(() => {
+            this.store.version();
+            const conn = this.store.connection();
+            return conn?.inProgress ?? false;
+        }, ...(ngDevMode ? [{ debugName: "isConnecting" }] : /* istanbul ignore next */ []));
+        this.connectionProps = computed(() => {
+            const coords = this.connectionCoords();
+            if (!coords)
+                return {};
+            return {
+                fromX: coords.fromX,
+                fromY: coords.fromY,
+                toX: coords.toX,
+                toY: coords.toY,
+                fromPosition: coords.fromPosition,
+                toPosition: coords.toPosition,
+                connectionLineType: this.connectionLineType(),
+                fromNode: coords.fromNode,
+                fromHandle: coords.fromHandle,
+            };
+        }, ...(ngDevMode ? [{ debugName: "connectionProps" }] : /* istanbul ignore next */ []));
+        this.connectionCoords = computed(() => {
+            this.store.version();
+            const conn = this.store.connection();
+            if (!conn?.inProgress)
+                return null;
+            const activeConn = conn;
+            const fromX = activeConn.from?.x ?? 0;
+            const fromY = activeConn.from?.y ?? 0;
+            const fromPosition = activeConn.fromPosition ?? Position.Bottom;
+            const toScreenX = activeConn.to?.x ?? 0;
+            const toScreenY = activeConn.to?.y ?? 0;
+            const transform = this.store.transform();
+            const toX = (toScreenX - transform[0]) / transform[2];
+            const toY = (toScreenY - transform[1]) / transform[2];
+            const toPosition = activeConn.toPosition ?? Position.Top;
+            return {
+                fromX, fromY, fromPosition,
+                toX, toY, toPosition,
+                fromNode: activeConn.fromNode ?? null,
+                fromHandle: activeConn.fromHandle ?? null,
+            };
+        }, ...(ngDevMode ? [{ debugName: "connectionCoords" }] : /* istanbul ignore next */ []));
+        this.connectionPath = computed(() => {
+            const coords = this.connectionCoords();
+            if (!coords)
+                return '';
+            const params = {
+                sourceX: coords.fromX,
+                sourceY: coords.fromY,
+                targetX: coords.toX,
+                targetY: coords.toY,
+                sourcePosition: coords.fromPosition,
+                targetPosition: coords.toPosition,
+            };
+            const lineType = this.connectionLineType();
+            switch (lineType) {
+                case ConnectionLineType.Straight:
+                    return getStraightPath(params)[0];
+                case ConnectionLineType.Step:
+                    return getSmoothStepPath({ ...params, borderRadius: 0 })[0];
+                case ConnectionLineType.SmoothStep:
+                    return getSmoothStepPath(params)[0];
+                case ConnectionLineType.Bezier:
+                default:
+                    return getBezierPath(params)[0];
+            }
+        }, ...(ngDevMode ? [{ debugName: "connectionPath" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = function ConnectionLineComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ConnectionLineComponent)(); }; }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ConnectionLineComponent, selectors: [["ng-flow-connection-line"]], hostAttrs: [2, "display", "contents"], inputs: { customComponent: [1, "customComponent"], connectionLineType: [1, "connectionLineType"] }, decls: 1, vars: 1, consts: [[1, "ng-flow__connectionline", "xy-flow__connectionline", 2, "overflow", "visible", "position", "absolute", "width", "100%", "height", "100%", "pointer-events", "none"], [4, "ngComponentOutlet", "ngComponentOutletInputs"], ["fill", "none", 1, "ng-flow__connection-path", "xy-flow__connection-path"]], template: function ConnectionLineComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵconditionalCreate(0, ConnectionLineComponent_Conditional_0_Template, 2, 1);
+        } if (rf & 2) {
+            i0.ɵɵconditional(ctx.isConnecting() ? 0 : -1);
+        } }, dependencies: [CommonModule, i1.NgComponentOutlet], encapsulation: 2, changeDetection: 0 }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ConnectionLineComponent, [{
+        type: Component,
+        args: [{
+                selector: 'ng-flow-connection-line',
+                standalone: true,
+                imports: [CommonModule, NgComponentOutlet],
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                host: {
+                    'style': 'display: contents;',
+                },
+                template: `
+    @if (isConnecting()) {
+      @if (customComponent()) {
+        <ng-container
+          *ngComponentOutlet="customComponent(); inputs: connectionProps()"
+        />
+      } @else {
+        <svg class="ng-flow__connectionline xy-flow__connectionline"
+             style="overflow: visible; position: absolute; width: 100%; height: 100%; pointer-events: none;">
+          <g>
+            <path
+              class="ng-flow__connection-path xy-flow__connection-path"
+              [attr.d]="connectionPath()"
+              fill="none"
+            />
+          </g>
+        </svg>
+      }
+    }
+  `,
+            }]
+    }], null, { customComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "customComponent", required: false }] }], connectionLineType: [{ type: i0.Input, args: [{ isSignal: true, alias: "connectionLineType", required: false }] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ConnectionLineComponent, { className: "ConnectionLineComponent", filePath: "lib/components/connection-line/connection-line.component.ts", lineNumber: 35 }); })();
+//# sourceMappingURL=connection-line.component.js.map

package/dist/esm/lib/components/connection-line/connection-line.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"connection-line.component.js","sourceRoot":"","sources":["../../../../../src/lib/components/connection-line/connection-line.component.ts"],"names":[],"mappings":"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"}