@memberjunction/ng-flow-editor 0.0.1 → 4.1.0

package/dist/lib/components/flow-palette.component.js

@@ -0,0 +1,110 @@
+import { Component, Input, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+import * as i2 from "@foblex/flow";
+function FlowPaletteComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span");
+    i0.ɵɵtext(1, "Steps");
+    i0.ɵɵelementEnd();
+} }
+function FlowPaletteComponent_Conditional_4_For_2_For_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 6)(1, "div", 7);
+    i0.ɵɵelement(2, "i", 8);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span", 9);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const nodeType_r1 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("fData", nodeType_r1.Type)("title", nodeType_r1.Label);
+    i0.ɵɵadvance();
+    i0.ɵɵstyleProp("background-color", ctx_r1.GetBgColor(nodeType_r1.Color, 0.08))("color", nodeType_r1.Color);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", nodeType_r1.Icon);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(nodeType_r1.Label);
+} }
+function FlowPaletteComponent_Conditional_4_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 4)(1, "div", 5);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵrepeaterCreate(3, FlowPaletteComponent_Conditional_4_For_2_For_4_Template, 5, 8, "div", 6, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const category_r3 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(category_r3);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r1.GetTypesForCategory(category_r3));
+} }
+function FlowPaletteComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 3);
+    i0.ɵɵrepeaterCreate(1, FlowPaletteComponent_Conditional_4_For_2_Template, 5, 1, "div", 4, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r1.categories);
+} }
+/**
+ * Draggable palette sidebar for creating new nodes.
+ * Uses Foblex's fExternalItem directive to enable drag-to-canvas creation.
+ */
+export class FlowPaletteComponent {
+    NodeTypes = [];
+    Collapsed = false;
+    get categories() {
+        const cats = new Set();
+        for (const nt of this.NodeTypes) {
+            if (nt.Draggable !== false) {
+                cats.add(nt.Category ?? 'General');
+            }
+        }
+        return Array.from(cats);
+    }
+    GetTypesForCategory(category) {
+        return this.NodeTypes.filter(nt => nt.Draggable !== false && (nt.Category ?? 'General') === category);
+    }
+    /** Converts a hex color to rgba with the given opacity for background tinting */
+    GetBgColor(hexColor, opacity) {
+        if (!hexColor)
+            return 'transparent';
+        // Handle standard 6-digit hex colors
+        const match = hexColor.match(/^#?([0-9a-fA-F]{6})$/);
+        if (match) {
+            const r = parseInt(match[1].substring(0, 2), 16);
+            const g = parseInt(match[1].substring(2, 4), 16);
+            const b = parseInt(match[1].substring(4, 6), 16);
+            return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+        }
+        // Fallback: return the color as-is with opacity via CSS
+        return hexColor;
+    }
+    static ɵfac = function FlowPaletteComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || FlowPaletteComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FlowPaletteComponent, selectors: [["mj-flow-palette"]], inputs: { NodeTypes: "NodeTypes", Collapsed: "Collapsed" }, standalone: false, decls: 5, vars: 4, consts: [[1, "mj-flow-palette"], [1, "mj-flow-palette-header"], [1, "fa-solid", "fa-puzzle-piece"], [1, "mj-flow-palette-content"], [1, "mj-flow-palette-category"], [1, "mj-flow-palette-category-label"], ["fExternalItem", "", 1, "mj-flow-palette-item", 3, "fData", "title"], [1, "mj-flow-palette-item-icon"], [1, "fa-solid", 3, "ngClass"], [1, "mj-flow-palette-item-label"]], template: function FlowPaletteComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1);
+            i0.ɵɵelement(2, "i", 2);
+            i0.ɵɵconditionalCreate(3, FlowPaletteComponent_Conditional_3_Template, 2, 0, "span");
+            i0.ɵɵelementEnd();
+            i0.ɵɵconditionalCreate(4, FlowPaletteComponent_Conditional_4_Template, 3, 0, "div", 3);
+            i0.ɵɵelementEnd();
+        } if (rf & 2) {
+            i0.ɵɵclassProp("mj-flow-palette--collapsed", ctx.Collapsed);
+            i0.ɵɵadvance(3);
+            i0.ɵɵconditional(!ctx.Collapsed ? 3 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(!ctx.Collapsed ? 4 : -1);
+        } }, dependencies: [i1.NgClass, i2.FExternalItemDirective], styles: ["/* ============================================================\n   Flow Palette \u2014 Draggable node type sidebar\n   ============================================================ */\n\n.mj-flow-palette {\n  width: 180px;\n  background: #ffffff;\n  border-right: 1px solid #e2e8f0;\n  display: flex;\n  flex-direction: column;\n  overflow-y: auto;\n  flex-shrink: 0;\n  transition: width 0.2s ease;\n}\n\n.mj-flow-palette--collapsed {\n  width: 44px;\n}\n\n.mj-flow-palette--collapsed .mj-flow-palette-header {\n  justify-content: center;\n  padding: 10px 0;\n}\n\n.mj-flow-palette-header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 12px 14px;\n  font-size: 12px;\n  font-weight: 600;\n  color: #64748b;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  border-bottom: 1px solid #f1f5f9;\n}\n\n.mj-flow-palette-header i {\n  font-size: 13px;\n}\n\n.mj-flow-palette-content {\n  padding: 8px;\n  flex: 1;\n}\n\n.mj-flow-palette-category {\n  margin-bottom: 12px;\n}\n\n.mj-flow-palette-category-label {\n  font-size: 10px;\n  font-weight: 600;\n  color: #94a3b8;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  padding: 4px 6px;\n  margin-bottom: 4px;\n}\n\n.mj-flow-palette-item {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 8px 10px;\n  border-radius: 8px;\n  cursor: grab;\n  transition: background-color 0.15s ease, box-shadow 0.15s ease;\n  user-select: none;\n}\n\n.mj-flow-palette-item:hover {\n  background: #f8fafc;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);\n}\n\n.mj-flow-palette-item:active {\n  cursor: grabbing;\n  background: #f1f5f9;\n}\n\n.mj-flow-palette-item-icon {\n  width: 32px;\n  height: 32px;\n  border-radius: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 14px;\n  flex-shrink: 0;\n}\n\n.mj-flow-palette-item-label {\n  font-size: 13px;\n  font-weight: 500;\n  color: #334155;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n"], encapsulation: 2, changeDetection: 0 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FlowPaletteComponent, [{
+        type: Component,
+        args: [{ standalone: false, selector: 'mj-flow-palette', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"mj-flow-palette\" [class.mj-flow-palette--collapsed]=\"Collapsed\">\n  <div class=\"mj-flow-palette-header\">\n    <i class=\"fa-solid fa-puzzle-piece\"></i>\n    @if (!Collapsed) {\n      <span>Steps</span>\n    }\n  </div>\n\n  @if (!Collapsed) {\n    <div class=\"mj-flow-palette-content\">\n      @for (category of categories; track category) {\n        <div class=\"mj-flow-palette-category\">\n          <div class=\"mj-flow-palette-category-label\">{{ category }}</div>\n          @for (nodeType of GetTypesForCategory(category); track nodeType) {\n            <div\n              class=\"mj-flow-palette-item\"\n              fExternalItem\n              [fData]=\"nodeType.Type\"\n              [title]=\"nodeType.Label\">\n              <div class=\"mj-flow-palette-item-icon\" [style.backgroundColor]=\"GetBgColor(nodeType.Color, 0.08)\" [style.color]=\"nodeType.Color\">\n                <i class=\"fa-solid\" [ngClass]=\"nodeType.Icon\"></i>\n              </div>\n              <span class=\"mj-flow-palette-item-label\">{{ nodeType.Label }}</span>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: ["/* ============================================================\n   Flow Palette \u2014 Draggable node type sidebar\n   ============================================================ */\n\n.mj-flow-palette {\n  width: 180px;\n  background: #ffffff;\n  border-right: 1px solid #e2e8f0;\n  display: flex;\n  flex-direction: column;\n  overflow-y: auto;\n  flex-shrink: 0;\n  transition: width 0.2s ease;\n}\n\n.mj-flow-palette--collapsed {\n  width: 44px;\n}\n\n.mj-flow-palette--collapsed .mj-flow-palette-header {\n  justify-content: center;\n  padding: 10px 0;\n}\n\n.mj-flow-palette-header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 12px 14px;\n  font-size: 12px;\n  font-weight: 600;\n  color: #64748b;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  border-bottom: 1px solid #f1f5f9;\n}\n\n.mj-flow-palette-header i {\n  font-size: 13px;\n}\n\n.mj-flow-palette-content {\n  padding: 8px;\n  flex: 1;\n}\n\n.mj-flow-palette-category {\n  margin-bottom: 12px;\n}\n\n.mj-flow-palette-category-label {\n  font-size: 10px;\n  font-weight: 600;\n  color: #94a3b8;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  padding: 4px 6px;\n  margin-bottom: 4px;\n}\n\n.mj-flow-palette-item {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 8px 10px;\n  border-radius: 8px;\n  cursor: grab;\n  transition: background-color 0.15s ease, box-shadow 0.15s ease;\n  user-select: none;\n}\n\n.mj-flow-palette-item:hover {\n  background: #f8fafc;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);\n}\n\n.mj-flow-palette-item:active {\n  cursor: grabbing;\n  background: #f1f5f9;\n}\n\n.mj-flow-palette-item-icon {\n  width: 32px;\n  height: 32px;\n  border-radius: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 14px;\n  flex-shrink: 0;\n}\n\n.mj-flow-palette-item-label {\n  font-size: 13px;\n  font-weight: 500;\n  color: #334155;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n"] }]
+    }], null, { NodeTypes: [{
+            type: Input
+        }], Collapsed: [{
+            type: Input
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FlowPaletteComponent, { className: "FlowPaletteComponent", filePath: "src/lib/components/flow-palette.component.ts", lineNumber: 16 }); })();
+//# sourceMappingURL=flow-palette.component.js.map

package/dist/lib/components/flow-palette.component.js.map

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

package/dist/lib/components/flow-status-bar.component.d.ts

@@ -0,0 +1,13 @@
+import * as i0 from "@angular/core";
+/**
+ * Status bar at the bottom of the flow editor showing counts and state.
+ */
+export declare class FlowStatusBarComponent {
+    NodeCount: number;
+    ConnectionCount: number;
+    SelectedCount: number;
+    ZoomLevel: number;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FlowStatusBarComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FlowStatusBarComponent, "mj-flow-status-bar", never, { "NodeCount": { "alias": "NodeCount"; "required": false; }; "ConnectionCount": { "alias": "ConnectionCount"; "required": false; }; "SelectedCount": { "alias": "SelectedCount"; "required": false; }; "ZoomLevel": { "alias": "ZoomLevel"; "required": false; }; }, {}, never, never, false, never>;
+}
+//# sourceMappingURL=flow-status-bar.component.d.ts.map

package/dist/lib/components/flow-status-bar.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"flow-status-bar.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/flow-status-bar.component.ts"],"names":[],"mappings":";AAEA;;GAEG;AACH,qBAsDa,sBAAsB;IACxB,SAAS,SAAK;IACd,eAAe,SAAK;IACpB,aAAa,SAAK;IAClB,SAAS,SAAO;yCAJd,sBAAsB;2CAAtB,sBAAsB;CAKlC"}

package/dist/lib/components/flow-status-bar.component.js

@@ -0,0 +1,81 @@
+import { Component, Input, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core';
+import * as i0 from "@angular/core";
+function FlowStatusBarComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 1);
+    i0.ɵɵelement(1, "i", 6);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", ctx_r0.SelectedCount, " selected ");
+} }
+/**
+ * Status bar at the bottom of the flow editor showing counts and state.
+ */
+export class FlowStatusBarComponent {
+    NodeCount = 0;
+    ConnectionCount = 0;
+    SelectedCount = 0;
+    ZoomLevel = 100;
+    static ɵfac = function FlowStatusBarComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || FlowStatusBarComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FlowStatusBarComponent, selectors: [["mj-flow-status-bar"]], inputs: { NodeCount: "NodeCount", ConnectionCount: "ConnectionCount", SelectedCount: "SelectedCount", ZoomLevel: "ZoomLevel" }, standalone: false, decls: 11, vars: 6, consts: [[1, "mj-flow-status-bar"], [1, "mj-flow-status-item"], [1, "fa-solid", "fa-circle-nodes"], [1, "fa-solid", "fa-link"], [1, "mj-flow-status-item", "mj-flow-status-item--right"], [1, "fa-solid", "fa-magnifying-glass"], [1, "fa-solid", "fa-check-square"]], template: function FlowStatusBarComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0)(1, "span", 1);
+            i0.ɵɵelement(2, "i", 2);
+            i0.ɵɵtext(3);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(4, "span", 1);
+            i0.ɵɵelement(5, "i", 3);
+            i0.ɵɵtext(6);
+            i0.ɵɵelementEnd();
+            i0.ɵɵconditionalCreate(7, FlowStatusBarComponent_Conditional_7_Template, 3, 1, "span", 1);
+            i0.ɵɵelementStart(8, "span", 4);
+            i0.ɵɵelement(9, "i", 5);
+            i0.ɵɵtext(10);
+            i0.ɵɵelementEnd()();
+        } if (rf & 2) {
+            i0.ɵɵadvance(3);
+            i0.ɵɵtextInterpolate2(" ", ctx.NodeCount, " ", ctx.NodeCount === 1 ? "node" : "nodes", " ");
+            i0.ɵɵadvance(3);
+            i0.ɵɵtextInterpolate2(" ", ctx.ConnectionCount, " ", ctx.ConnectionCount === 1 ? "connection" : "connections", " ");
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.SelectedCount > 0 ? 7 : -1);
+            i0.ɵɵadvance(3);
+            i0.ɵɵtextInterpolate1(" ", ctx.ZoomLevel, "% ");
+        } }, styles: ["\n    .mj-flow-status-bar {\n      display: flex;\n      align-items: center;\n      gap: 16px;\n      padding: 4px 14px;\n      background: #f8fafc;\n      border-top: 1px solid #e2e8f0;\n      font-size: 11px;\n      color: #64748b;\n      flex-shrink: 0;\n      min-height: 28px;\n    }\n\n    .mj-flow-status-item {\n      display: inline-flex;\n      align-items: center;\n      gap: 5px;\n\n      i { font-size: 10px; }\n\n      &--right {\n        margin-left: auto;\n      }\n    }\n  "], encapsulation: 2, changeDetection: 0 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FlowStatusBarComponent, [{
+        type: Component,
+        args: [{ standalone: false, selector: 'mj-flow-status-bar', template: `
+    <div class="mj-flow-status-bar">
+      <span class="mj-flow-status-item">
+        <i class="fa-solid fa-circle-nodes"></i>
+        {{ NodeCount }} {{ NodeCount === 1 ? 'node' : 'nodes' }}
+      </span>
+      <span class="mj-flow-status-item">
+        <i class="fa-solid fa-link"></i>
+        {{ ConnectionCount }} {{ ConnectionCount === 1 ? 'connection' : 'connections' }}
+      </span>
+      @if (SelectedCount > 0) {
+        <span class="mj-flow-status-item">
+          <i class="fa-solid fa-check-square"></i>
+          {{ SelectedCount }} selected
+        </span>
+      }
+      <span class="mj-flow-status-item mj-flow-status-item--right">
+        <i class="fa-solid fa-magnifying-glass"></i>
+        {{ ZoomLevel }}%
+      </span>
+    </div>
+    `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["\n    .mj-flow-status-bar {\n      display: flex;\n      align-items: center;\n      gap: 16px;\n      padding: 4px 14px;\n      background: #f8fafc;\n      border-top: 1px solid #e2e8f0;\n      font-size: 11px;\n      color: #64748b;\n      flex-shrink: 0;\n      min-height: 28px;\n    }\n\n    .mj-flow-status-item {\n      display: inline-flex;\n      align-items: center;\n      gap: 5px;\n\n      i { font-size: 10px; }\n\n      &--right {\n        margin-left: auto;\n      }\n    }\n  "] }]
+    }], null, { NodeCount: [{
+            type: Input
+        }], ConnectionCount: [{
+            type: Input
+        }], SelectedCount: [{
+            type: Input
+        }], ZoomLevel: [{
+            type: Input
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FlowStatusBarComponent, { className: "FlowStatusBarComponent", filePath: "src/lib/components/flow-status-bar.component.ts", lineNumber: 60 }); })();
+//# sourceMappingURL=flow-status-bar.component.js.map

package/dist/lib/components/flow-status-bar.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flow-status-bar.component.js","sourceRoot":"","sources":["../../../src/lib/components/flow-status-bar.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,iBAAiB,EAAE,uBAAuB,EAAE,MAAM,eAAe,CAAC;;;IAmBrF,+BAAkC;IAChC,uBAAwC;IACxC,YACF;IAAA,iBAAO;;;IADL,eACF;IADE,8DACF;;AApBR;;GAEG;AAuDH,MAAM,OAAO,sBAAsB;IACxB,SAAS,GAAG,CAAC,CAAC;IACd,eAAe,GAAG,CAAC,CAAC;IACpB,aAAa,GAAG,CAAC,CAAC;IAClB,SAAS,GAAG,GAAG,CAAC;gHAJd,sBAAsB;6DAAtB,sBAAsB;YAjD7B,AADF,8BAAgC,cACI;YAChC,uBAAwC;YACxC,YACF;YAAA,iBAAO;YACP,+BAAkC;YAChC,uBAAgC;YAChC,YACF;YAAA,iBAAO;YACP,yFAAyB;YAMzB,+BAA6D;YAC3D,uBAA4C;YAC5C,aACF;YACF,AADE,iBAAO,EACH;;YAhBF,eACF;YADE,2FACF;YAGE,eACF;YADE,mHACF;YACA,cAKC;YALD,gDAKC;YAGC,eACF;YADE,+CACF;;;iFAgCO,sBAAsB;cAtDlC,SAAS;6BACI,KAAK,YACP,oBAAoB,YACpB;;;;;;;;;;;;;;;;;;;;;KAqBP,iBA2BY,iBAAiB,CAAC,IAAI,mBACpB,uBAAuB,CAAC,MAAM;;kBAG9C,KAAK;;kBACL,KAAK;;kBACL,KAAK;;kBACL,KAAK;;kFAJK,sBAAsB"}

package/dist/lib/components/flow-toolbar.component.d.ts

@@ -0,0 +1,25 @@
+import { EventEmitter } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * Internal toolbar for the generic flow editor canvas controls.
+ * Provides zoom, fit-to-screen, auto-layout, and grid/minimap toggles.
+ */
+export declare class FlowToolbarComponent {
+    ZoomLevel: number;
+    ShowGrid: boolean;
+    ShowMinimap: boolean;
+    ShowLegend: boolean;
+    ReadOnly: boolean;
+    PanMode: boolean;
+    ZoomInClicked: EventEmitter<void>;
+    ZoomOutClicked: EventEmitter<void>;
+    FitToScreenClicked: EventEmitter<void>;
+    AutoLayoutClicked: EventEmitter<void>;
+    GridToggled: EventEmitter<boolean>;
+    MinimapToggled: EventEmitter<boolean>;
+    LegendToggled: EventEmitter<boolean>;
+    PanModeToggled: EventEmitter<boolean>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FlowToolbarComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FlowToolbarComponent, "mj-flow-toolbar", never, { "ZoomLevel": { "alias": "ZoomLevel"; "required": false; }; "ShowGrid": { "alias": "ShowGrid"; "required": false; }; "ShowMinimap": { "alias": "ShowMinimap"; "required": false; }; "ShowLegend": { "alias": "ShowLegend"; "required": false; }; "ReadOnly": { "alias": "ReadOnly"; "required": false; }; "PanMode": { "alias": "PanMode"; "required": false; }; }, { "ZoomInClicked": "ZoomInClicked"; "ZoomOutClicked": "ZoomOutClicked"; "FitToScreenClicked": "FitToScreenClicked"; "AutoLayoutClicked": "AutoLayoutClicked"; "GridToggled": "GridToggled"; "MinimapToggled": "MinimapToggled"; "LegendToggled": "LegendToggled"; "PanModeToggled": "PanModeToggled"; }, never, never, false, never>;
+}
+//# sourceMappingURL=flow-toolbar.component.d.ts.map

package/dist/lib/components/flow-toolbar.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"flow-toolbar.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/flow-toolbar.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,YAAY,EAA8C,MAAM,eAAe,CAAC;;AAEnH;;;GAGG;AACH,qBA0Ia,oBAAoB;IACtB,SAAS,SAAO;IAChB,QAAQ,UAAQ;IAChB,WAAW,UAAQ;IACnB,UAAU,UAAQ;IAClB,QAAQ,UAAS;IACjB,OAAO,UAAS;IAEf,aAAa,qBAA4B;IACzC,cAAc,qBAA4B;IAC1C,kBAAkB,qBAA4B;IAC9C,iBAAiB,qBAA4B;IAC7C,WAAW,wBAA+B;IAC1C,cAAc,wBAA+B;IAC7C,aAAa,wBAA+B;IAC5C,cAAc,wBAA+B;yCAf5C,oBAAoB;2CAApB,oBAAoB;CAgBhC"}

package/dist/lib/components/flow-toolbar.component.js

@@ -0,0 +1,192 @@
+import { Component, Input, Output, EventEmitter, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core';
+import * as i0 from "@angular/core";
+function FlowToolbarComponent_Conditional_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "div", 9);
+} }
+function FlowToolbarComponent_Conditional_17_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 1)(1, "button", 20);
+    i0.ɵɵlistener("click", function FlowToolbarComponent_Conditional_17_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.AutoLayoutClicked.emit()); });
+    i0.ɵɵelement(2, "i", 21);
+    i0.ɵɵelementEnd()();
+} }
+/**
+ * Internal toolbar for the generic flow editor canvas controls.
+ * Provides zoom, fit-to-screen, auto-layout, and grid/minimap toggles.
+ */
+export class FlowToolbarComponent {
+    ZoomLevel = 100;
+    ShowGrid = true;
+    ShowMinimap = true;
+    ShowLegend = true;
+    ReadOnly = false;
+    PanMode = false;
+    ZoomInClicked = new EventEmitter();
+    ZoomOutClicked = new EventEmitter();
+    FitToScreenClicked = new EventEmitter();
+    AutoLayoutClicked = new EventEmitter();
+    GridToggled = new EventEmitter();
+    MinimapToggled = new EventEmitter();
+    LegendToggled = new EventEmitter();
+    PanModeToggled = new EventEmitter();
+    static ɵfac = function FlowToolbarComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || FlowToolbarComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FlowToolbarComponent, selectors: [["mj-flow-toolbar"]], inputs: { ZoomLevel: "ZoomLevel", ShowGrid: "ShowGrid", ShowMinimap: "ShowMinimap", ShowLegend: "ShowLegend", ReadOnly: "ReadOnly", PanMode: "PanMode" }, outputs: { ZoomInClicked: "ZoomInClicked", ZoomOutClicked: "ZoomOutClicked", FitToScreenClicked: "FitToScreenClicked", AutoLayoutClicked: "AutoLayoutClicked", GridToggled: "GridToggled", MinimapToggled: "MinimapToggled", LegendToggled: "LegendToggled", PanModeToggled: "PanModeToggled" }, standalone: false, decls: 26, vars: 13, consts: [[1, "mj-flow-toolbar"], [1, "mj-flow-toolbar-group"], ["title", "Zoom In", 1, "mj-flow-toolbar-btn", 3, "click"], [1, "fa-solid", "fa-magnifying-glass-plus"], [1, "mj-flow-toolbar-zoom"], ["title", "Zoom Out", 1, "mj-flow-toolbar-btn", 3, "click"], [1, "fa-solid", "fa-magnifying-glass-minus"], ["title", "Fit to Screen", 1, "mj-flow-toolbar-btn", 3, "click"], [1, "fa-solid", "fa-expand"], [1, "mj-flow-toolbar-divider"], ["title", "Select Mode (pointer)", 1, "mj-flow-toolbar-btn", 3, "click"], [1, "fa-solid", "fa-arrow-pointer"], ["title", "Pan Mode (drag to move canvas)", 1, "mj-flow-toolbar-btn", 3, "click"], [1, "fa-solid", "fa-hand"], ["title", "Toggle Grid", 1, "mj-flow-toolbar-btn", 3, "click"], [1, "fa-solid", "fa-border-all"], ["title", "Toggle Minimap", 1, "mj-flow-toolbar-btn", 3, "click"], [1, "fa-solid", "fa-map"], ["title", "Toggle Legend", 1, "mj-flow-toolbar-btn", 3, "click"], [1, "fa-solid", "fa-list-check"], ["title", "Auto Arrange", 1, "mj-flow-toolbar-btn", 3, "click"], [1, "fa-solid", "fa-diagram-project"]], template: function FlowToolbarComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "button", 2);
+            i0.ɵɵlistener("click", function FlowToolbarComponent_Template_button_click_2_listener() { return ctx.ZoomInClicked.emit(); });
+            i0.ɵɵelement(3, "i", 3);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(4, "span", 4);
+            i0.ɵɵtext(5);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(6, "button", 5);
+            i0.ɵɵlistener("click", function FlowToolbarComponent_Template_button_click_6_listener() { return ctx.ZoomOutClicked.emit(); });
+            i0.ɵɵelement(7, "i", 6);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(8, "button", 7);
+            i0.ɵɵlistener("click", function FlowToolbarComponent_Template_button_click_8_listener() { return ctx.FitToScreenClicked.emit(); });
+            i0.ɵɵelement(9, "i", 8);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelement(10, "div", 9);
+            i0.ɵɵelementStart(11, "div", 1)(12, "button", 10);
+            i0.ɵɵlistener("click", function FlowToolbarComponent_Template_button_click_12_listener() { return ctx.PanModeToggled.emit(false); });
+            i0.ɵɵelement(13, "i", 11);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(14, "button", 12);
+            i0.ɵɵlistener("click", function FlowToolbarComponent_Template_button_click_14_listener() { return ctx.PanModeToggled.emit(true); });
+            i0.ɵɵelement(15, "i", 13);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵconditionalCreate(16, FlowToolbarComponent_Conditional_16_Template, 1, 0, "div", 9);
+            i0.ɵɵconditionalCreate(17, FlowToolbarComponent_Conditional_17_Template, 3, 0, "div", 1);
+            i0.ɵɵelement(18, "div", 9);
+            i0.ɵɵelementStart(19, "div", 1)(20, "button", 14);
+            i0.ɵɵlistener("click", function FlowToolbarComponent_Template_button_click_20_listener() { return ctx.GridToggled.emit(!ctx.ShowGrid); });
+            i0.ɵɵelement(21, "i", 15);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(22, "button", 16);
+            i0.ɵɵlistener("click", function FlowToolbarComponent_Template_button_click_22_listener() { return ctx.MinimapToggled.emit(!ctx.ShowMinimap); });
+            i0.ɵɵelement(23, "i", 17);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(24, "button", 18);
+            i0.ɵɵlistener("click", function FlowToolbarComponent_Template_button_click_24_listener() { return ctx.LegendToggled.emit(!ctx.ShowLegend); });
+            i0.ɵɵelement(25, "i", 19);
+            i0.ɵɵelementEnd()()();
+        } if (rf & 2) {
+            i0.ɵɵadvance(5);
+            i0.ɵɵtextInterpolate1("", ctx.ZoomLevel, "%");
+            i0.ɵɵadvance(7);
+            i0.ɵɵclassProp("mj-flow-toolbar-btn--active", !ctx.PanMode);
+            i0.ɵɵadvance(2);
+            i0.ɵɵclassProp("mj-flow-toolbar-btn--active", ctx.PanMode);
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(!ctx.ReadOnly ? 16 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(!ctx.ReadOnly ? 17 : -1);
+            i0.ɵɵadvance(3);
+            i0.ɵɵclassProp("mj-flow-toolbar-btn--active", ctx.ShowGrid);
+            i0.ɵɵadvance(2);
+            i0.ɵɵclassProp("mj-flow-toolbar-btn--active", ctx.ShowMinimap);
+            i0.ɵɵadvance(2);
+            i0.ɵɵclassProp("mj-flow-toolbar-btn--active", ctx.ShowLegend);
+        } }, styles: ["\n    .mj-flow-toolbar {\n      display: flex;\n      align-items: center;\n      gap: 2px;\n      padding: 4px 8px;\n      background: #ffffff;\n      border: 1px solid #e2e8f0;\n      border-radius: 8px;\n      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);\n    }\n\n    .mj-flow-toolbar-group {\n      display: flex;\n      align-items: center;\n      gap: 2px;\n    }\n\n    .mj-flow-toolbar-divider {\n      width: 1px;\n      height: 20px;\n      background: #e2e8f0;\n      margin: 0 4px;\n    }\n\n    .mj-flow-toolbar-btn {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: 30px;\n      height: 30px;\n      border: none;\n      border-radius: 6px;\n      background: transparent;\n      color: #64748b;\n      cursor: pointer;\n      transition: all 0.15s ease;\n      font-size: 13px;\n    }\n\n    .mj-flow-toolbar-btn:hover {\n      background: #f1f5f9;\n      color: #334155;\n    }\n\n    .mj-flow-toolbar-btn--active {\n      background: #eff6ff;\n      color: #3b82f6;\n    }\n\n    .mj-flow-toolbar-btn--active:hover {\n      background: #dbeafe;\n      color: #2563eb;\n    }\n\n    .mj-flow-toolbar-zoom {\n      font-size: 11px;\n      font-weight: 500;\n      color: #64748b;\n      min-width: 38px;\n      text-align: center;\n      user-select: none;\n    }\n  "], encapsulation: 2, changeDetection: 0 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FlowToolbarComponent, [{
+        type: Component,
+        args: [{ standalone: false, selector: 'mj-flow-toolbar', template: `
+    <div class="mj-flow-toolbar">
+      <div class="mj-flow-toolbar-group">
+        <button class="mj-flow-toolbar-btn" (click)="ZoomInClicked.emit()" title="Zoom In">
+          <i class="fa-solid fa-magnifying-glass-plus"></i>
+        </button>
+        <span class="mj-flow-toolbar-zoom">{{ ZoomLevel }}%</span>
+        <button class="mj-flow-toolbar-btn" (click)="ZoomOutClicked.emit()" title="Zoom Out">
+          <i class="fa-solid fa-magnifying-glass-minus"></i>
+        </button>
+        <button class="mj-flow-toolbar-btn" (click)="FitToScreenClicked.emit()" title="Fit to Screen">
+          <i class="fa-solid fa-expand"></i>
+        </button>
+      </div>
+    
+      <div class="mj-flow-toolbar-divider"></div>
+    
+      <div class="mj-flow-toolbar-group">
+        <button class="mj-flow-toolbar-btn"
+          [class.mj-flow-toolbar-btn--active]="!PanMode"
+          (click)="PanModeToggled.emit(false)"
+          title="Select Mode (pointer)">
+          <i class="fa-solid fa-arrow-pointer"></i>
+        </button>
+        <button class="mj-flow-toolbar-btn"
+          [class.mj-flow-toolbar-btn--active]="PanMode"
+          (click)="PanModeToggled.emit(true)"
+          title="Pan Mode (drag to move canvas)">
+          <i class="fa-solid fa-hand"></i>
+        </button>
+      </div>
+    
+      @if (!ReadOnly) {
+        <div class="mj-flow-toolbar-divider"></div>
+      }
+    
+      @if (!ReadOnly) {
+        <div class="mj-flow-toolbar-group">
+          <button class="mj-flow-toolbar-btn" (click)="AutoLayoutClicked.emit()" title="Auto Arrange">
+            <i class="fa-solid fa-diagram-project"></i>
+          </button>
+        </div>
+      }
+    
+      <div class="mj-flow-toolbar-divider"></div>
+    
+      <div class="mj-flow-toolbar-group">
+        <button class="mj-flow-toolbar-btn"
+          [class.mj-flow-toolbar-btn--active]="ShowGrid"
+          (click)="GridToggled.emit(!ShowGrid)"
+          title="Toggle Grid">
+          <i class="fa-solid fa-border-all"></i>
+        </button>
+        <button class="mj-flow-toolbar-btn"
+          [class.mj-flow-toolbar-btn--active]="ShowMinimap"
+          (click)="MinimapToggled.emit(!ShowMinimap)"
+          title="Toggle Minimap">
+          <i class="fa-solid fa-map"></i>
+        </button>
+        <button class="mj-flow-toolbar-btn"
+          [class.mj-flow-toolbar-btn--active]="ShowLegend"
+          (click)="LegendToggled.emit(!ShowLegend)"
+          title="Toggle Legend">
+          <i class="fa-solid fa-list-check"></i>
+        </button>
+      </div>
+    </div>
+    `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["\n    .mj-flow-toolbar {\n      display: flex;\n      align-items: center;\n      gap: 2px;\n      padding: 4px 8px;\n      background: #ffffff;\n      border: 1px solid #e2e8f0;\n      border-radius: 8px;\n      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);\n    }\n\n    .mj-flow-toolbar-group {\n      display: flex;\n      align-items: center;\n      gap: 2px;\n    }\n\n    .mj-flow-toolbar-divider {\n      width: 1px;\n      height: 20px;\n      background: #e2e8f0;\n      margin: 0 4px;\n    }\n\n    .mj-flow-toolbar-btn {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: 30px;\n      height: 30px;\n      border: none;\n      border-radius: 6px;\n      background: transparent;\n      color: #64748b;\n      cursor: pointer;\n      transition: all 0.15s ease;\n      font-size: 13px;\n    }\n\n    .mj-flow-toolbar-btn:hover {\n      background: #f1f5f9;\n      color: #334155;\n    }\n\n    .mj-flow-toolbar-btn--active {\n      background: #eff6ff;\n      color: #3b82f6;\n    }\n\n    .mj-flow-toolbar-btn--active:hover {\n      background: #dbeafe;\n      color: #2563eb;\n    }\n\n    .mj-flow-toolbar-zoom {\n      font-size: 11px;\n      font-weight: 500;\n      color: #64748b;\n      min-width: 38px;\n      text-align: center;\n      user-select: none;\n    }\n  "] }]
+    }], null, { ZoomLevel: [{
+            type: Input
+        }], ShowGrid: [{
+            type: Input
+        }], ShowMinimap: [{
+            type: Input
+        }], ShowLegend: [{
+            type: Input
+        }], ReadOnly: [{
+            type: Input
+        }], PanMode: [{
+            type: Input
+        }], ZoomInClicked: [{
+            type: Output
+        }], ZoomOutClicked: [{
+            type: Output
+        }], FitToScreenClicked: [{
+            type: Output
+        }], AutoLayoutClicked: [{
+            type: Output
+        }], GridToggled: [{
+            type: Output
+        }], MinimapToggled: [{
+            type: Output
+        }], LegendToggled: [{
+            type: Output
+        }], PanModeToggled: [{
+            type: Output
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FlowToolbarComponent, { className: "FlowToolbarComponent", filePath: "src/lib/components/flow-toolbar.component.ts", lineNumber: 145 }); })();
+//# sourceMappingURL=flow-toolbar.component.js.map

package/dist/lib/components/flow-toolbar.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flow-toolbar.component.js","sourceRoot":"","sources":["../../../src/lib/components/flow-toolbar.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,YAAY,EAAE,iBAAiB,EAAE,uBAAuB,EAAE,MAAM,eAAe,CAAC;;;IA0C3G,yBAA2C;;;;IAKzC,AADF,8BAAmC,iBAC2D;IAAxD,yLAAS,+BAAwB,KAAC;IACpE,wBAA2C;IAE/C,AADE,iBAAS,EACL;;AAhDd;;;GAGG;AA2IH,MAAM,OAAO,oBAAoB;IACtB,SAAS,GAAG,GAAG,CAAC;IAChB,QAAQ,GAAG,IAAI,CAAC;IAChB,WAAW,GAAG,IAAI,CAAC;IACnB,UAAU,GAAG,IAAI,CAAC;IAClB,QAAQ,GAAG,KAAK,CAAC;IACjB,OAAO,GAAG,KAAK,CAAC;IAEf,aAAa,GAAG,IAAI,YAAY,EAAQ,CAAC;IACzC,cAAc,GAAG,IAAI,YAAY,EAAQ,CAAC;IAC1C,kBAAkB,GAAG,IAAI,YAAY,EAAQ,CAAC;IAC9C,iBAAiB,GAAG,IAAI,YAAY,EAAQ,CAAC;IAC7C,WAAW,GAAG,IAAI,YAAY,EAAW,CAAC;IAC1C,cAAc,GAAG,IAAI,YAAY,EAAW,CAAC;IAC7C,aAAa,GAAG,IAAI,YAAY,EAAW,CAAC;IAC5C,cAAc,GAAG,IAAI,YAAY,EAAW,CAAC;8GAf5C,oBAAoB;6DAApB,oBAAoB;YApIzB,AADF,AADF,8BAA6B,aACQ,gBACkD;YAA/C,iGAAS,wBAAoB,IAAC;YAChE,uBAAiD;YACnD,iBAAS;YACT,+BAAmC;YAAA,YAAgB;YAAA,iBAAO;YAC1D,iCAAqF;YAAjD,iGAAS,yBAAqB,IAAC;YACjE,uBAAkD;YACpD,iBAAS;YACT,iCAA8F;YAA1D,iGAAS,6BAAyB,IAAC;YACrE,uBAAkC;YAEtC,AADE,iBAAS,EACL;YAEN,0BAA2C;YAGzC,AADF,+BAAmC,kBAID;YAD9B,kGAAS,wBAAoB,KAAK,CAAC,IAAC;YAEpC,yBAAyC;YAC3C,iBAAS;YACT,mCAGyC;YADvC,kGAAS,wBAAoB,IAAI,CAAC,IAAC;YAEnC,yBAAgC;YAEpC,AADE,iBAAS,EACL;YAEN,wFAAiB;YAIjB,wFAAiB;YAQjB,0BAA2C;YAGzC,AADF,+BAAmC,kBAIX;YADpB,kGAAS,mCAA2B,IAAC;YAErC,yBAAsC;YACxC,iBAAS;YACT,mCAGyB;YADvB,kGAAS,yCAAiC,IAAC;YAE3C,yBAA+B;YACjC,iBAAS;YACT,mCAGwB;YADtB,kGAAS,uCAA+B,IAAC;YAEzC,yBAAsC;YAG5C,AADE,AADE,iBAAS,EACL,EACF;;YA5DiC,eAAgB;YAAhB,6CAAgB;YAajD,eAA8C;YAA9C,2DAA8C;YAM9C,eAA6C;YAA7C,0DAA6C;YAOjD,eAEC;YAFD,yCAEC;YAED,cAMC;YAND,yCAMC;YAMG,eAA8C;YAA9C,2DAA8C;YAM9C,eAAiD;YAAjD,8DAAiD;YAMjD,eAAgD;YAAhD,6DAAgD;;;iFA2E7C,oBAAoB;cA1IhC,SAAS;6BACI,KAAK,YACP,iBAAiB,YACjB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAmEP,iBAiEY,iBAAiB,CAAC,IAAI,mBACpB,uBAAuB,CAAC,MAAM;;kBAG9C,KAAK;;kBACL,KAAK;;kBACL,KAAK;;kBACL,KAAK;;kBACL,KAAK;;kBACL,KAAK;;kBAEL,MAAM;;kBACN,MAAM;;kBACN,MAAM;;kBACN,MAAM;;kBACN,MAAM;;kBACN,MAAM;;kBACN,MAAM;;kBACN,MAAM;;kFAfI,oBAAoB"}

package/dist/lib/flow-editor.module.d.ts

@@ -0,0 +1,19 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./components/flow-editor.component";
+import * as i2 from "./components/flow-node.component";
+import * as i3 from "./components/flow-palette.component";
+import * as i4 from "./components/flow-toolbar.component";
+import * as i5 from "./components/flow-status-bar.component";
+import * as i6 from "./agent-editor/flow-agent-editor.component";
+import * as i7 from "./agent-editor/agent-properties-panel.component";
+import * as i8 from "./agent-editor/agent-step-list.component";
+import * as i9 from "@angular/common";
+import * as i10 from "@angular/forms";
+import * as i11 from "@foblex/flow";
+import * as i12 from "@memberjunction/ng-code-editor";
+export declare class FlowEditorModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<FlowEditorModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<FlowEditorModule, [typeof i1.FlowEditorComponent, typeof i2.FlowNodeComponent, typeof i3.FlowPaletteComponent, typeof i4.FlowToolbarComponent, typeof i5.FlowStatusBarComponent, typeof i6.FlowAgentEditorComponent, typeof i7.AgentPropertiesPanelComponent, typeof i8.AgentStepListComponent], [typeof i9.CommonModule, typeof i10.FormsModule, typeof i11.FFlowModule, typeof i12.CodeEditorModule], [typeof i1.FlowEditorComponent, typeof i2.FlowNodeComponent, typeof i3.FlowPaletteComponent, typeof i4.FlowToolbarComponent, typeof i5.FlowStatusBarComponent, typeof i6.FlowAgentEditorComponent, typeof i7.AgentPropertiesPanelComponent, typeof i8.AgentStepListComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<FlowEditorModule>;
+}
+//# sourceMappingURL=flow-editor.module.d.ts.map

package/dist/lib/flow-editor.module.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"flow-editor.module.d.ts","sourceRoot":"","sources":["../../src/lib/flow-editor.module.ts"],"names":[],"mappings":";;;;;;;;;;;;;AAkBA,qBAgCa,gBAAgB;yCAAhB,gBAAgB;0CAAhB,gBAAgB;0CAAhB,gBAAgB;CAAI"}

package/dist/lib/flow-editor.module.js

@@ -0,0 +1,84 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { FFlowModule } from '@foblex/flow';
+import { CodeEditorModule } from '@memberjunction/ng-code-editor';
+// Generic components
+import { FlowEditorComponent } from './components/flow-editor.component';
+import { FlowNodeComponent } from './components/flow-node.component';
+import { FlowPaletteComponent } from './components/flow-palette.component';
+import { FlowToolbarComponent } from './components/flow-toolbar.component';
+import { FlowStatusBarComponent } from './components/flow-status-bar.component';
+// Agent-specific components
+import { FlowAgentEditorComponent } from './agent-editor/flow-agent-editor.component';
+import { AgentPropertiesPanelComponent } from './agent-editor/agent-properties-panel.component';
+import { AgentStepListComponent } from './agent-editor/agent-step-list.component';
+import * as i0 from "@angular/core";
+export class FlowEditorModule {
+    static ɵfac = function FlowEditorModule_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || FlowEditorModule)(); };
+    static ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: FlowEditorModule });
+    static ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [CommonModule,
+            FormsModule,
+            FFlowModule,
+            CodeEditorModule] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FlowEditorModule, [{
+        type: NgModule,
+        args: [{
+                declarations: [
+                    // Generic
+                    FlowEditorComponent,
+                    FlowNodeComponent,
+                    FlowPaletteComponent,
+                    FlowToolbarComponent,
+                    FlowStatusBarComponent,
+                    // Agent-specific
+                    FlowAgentEditorComponent,
+                    AgentPropertiesPanelComponent,
+                    AgentStepListComponent
+                ],
+                imports: [
+                    CommonModule,
+                    FormsModule,
+                    FFlowModule,
+                    CodeEditorModule
+                ],
+                exports: [
+                    // Generic — for any consumer
+                    FlowEditorComponent,
+                    FlowNodeComponent,
+                    FlowPaletteComponent,
+                    FlowToolbarComponent,
+                    FlowStatusBarComponent,
+                    // Agent-specific
+                    FlowAgentEditorComponent,
+                    AgentPropertiesPanelComponent,
+                    AgentStepListComponent
+                ]
+            }]
+    }], null, null); })();
+(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(FlowEditorModule, { declarations: [
+        // Generic
+        FlowEditorComponent,
+        FlowNodeComponent,
+        FlowPaletteComponent,
+        FlowToolbarComponent,
+        FlowStatusBarComponent,
+        // Agent-specific
+        FlowAgentEditorComponent,
+        AgentPropertiesPanelComponent,
+        AgentStepListComponent], imports: [CommonModule,
+        FormsModule,
+        FFlowModule,
+        CodeEditorModule], exports: [
+        // Generic — for any consumer
+        FlowEditorComponent,
+        FlowNodeComponent,
+        FlowPaletteComponent,
+        FlowToolbarComponent,
+        FlowStatusBarComponent,
+        // Agent-specific
+        FlowAgentEditorComponent,
+        AgentPropertiesPanelComponent,
+        AgentStepListComponent] }); })();
+//# sourceMappingURL=flow-editor.module.js.map

package/dist/lib/flow-editor.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flow-editor.module.js","sourceRoot":"","sources":["../../src/lib/flow-editor.module.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAElE,qBAAqB;AACrB,OAAO,EAAE,mBAAmB,EAAE,MAAM,oCAAoC,CAAC;AACzE,OAAO,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAC;AACrE,OAAO,EAAE,oBAAoB,EAAE,MAAM,qCAAqC,CAAC;AAC3E,OAAO,EAAE,oBAAoB,EAAE,MAAM,qCAAqC,CAAC;AAC3E,OAAO,EAAE,sBAAsB,EAAE,MAAM,wCAAwC,CAAC;AAEhF,4BAA4B;AAC5B,OAAO,EAAE,wBAAwB,EAAE,MAAM,4CAA4C,CAAC;AACtF,OAAO,EAAE,6BAA6B,EAAE,MAAM,iDAAiD,CAAC;AAChG,OAAO,EAAE,sBAAsB,EAAE,MAAM,0CAA0C,CAAC;;AAkClF,MAAM,OAAO,gBAAgB;0GAAhB,gBAAgB;4DAAhB,gBAAgB;gEAlBzB,YAAY;YACZ,WAAW;YACX,WAAW;YACX,gBAAgB;;iFAeP,gBAAgB;cAhC5B,QAAQ;eAAC;gBACR,YAAY,EAAE;oBACZ,UAAU;oBACV,mBAAmB;oBACnB,iBAAiB;oBACjB,oBAAoB;oBACpB,oBAAoB;oBACpB,sBAAsB;oBACtB,iBAAiB;oBACjB,wBAAwB;oBACxB,6BAA6B;oBAC7B,sBAAsB;iBACvB;gBACD,OAAO,EAAE;oBACP,YAAY;oBACZ,WAAW;oBACX,WAAW;oBACX,gBAAgB;iBACjB;gBACD,OAAO,EAAE;oBACP,6BAA6B;oBAC7B,mBAAmB;oBACnB,iBAAiB;oBACjB,oBAAoB;oBACpB,oBAAoB;oBACpB,sBAAsB;oBACtB,iBAAiB;oBACjB,wBAAwB;oBACxB,6BAA6B;oBAC7B,sBAAsB;iBACvB;aACF;;wFACY,gBAAgB;QA9BzB,UAAU;QACV,mBAAmB;QACnB,iBAAiB;QACjB,oBAAoB;QACpB,oBAAoB;QACpB,sBAAsB;QACtB,iBAAiB;QACjB,wBAAwB;QACxB,6BAA6B;QAC7B,sBAAsB,aAGtB,YAAY;QACZ,WAAW;QACX,WAAW;QACX,gBAAgB;QAGhB,6BAA6B;QAC7B,mBAAmB;QACnB,iBAAiB;QACjB,oBAAoB;QACpB,oBAAoB;QACpB,sBAAsB;QACtB,iBAAiB;QACjB,wBAAwB;QACxB,6BAA6B;QAC7B,sBAAsB"}